/* =============================================================================
   PANEL HAG - ESTILOS HEIMDALL SOBRIO
   Hotel Alicante Golf
============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
  font-family: var(--font-main);
  -webkit-font-smoothing: antialiased;
}

/* Heimdall Tiles */
.heimdall-tile {
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.heimdall-tile:hover {
  transform: translateY(-2px);
}

/* Category Pills */
.cat-pill {
  background-color: transparent;
  color: #94a3b8;
  border: 1px solid transparent;
}

.cat-pill:hover {
  color: #f1f5f9;
  background-color: rgba(51, 65, 85, 0.4);
}

.cat-pill.active {
  background-color: #059669;
  color: #ffffff;
  border-color: #10b981;
}

.cat-pill.active span:last-child {
  background-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.4);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.7);
}

/* Network Info Tooltip */
.info-tooltip-box {
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.group\/info:hover .info-tooltip-box,
.group\/info:focus-within .info-tooltip-box {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

/* Topology Node Cards */
.topo-node-card {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.topo-node-card:hover {
  border-color: rgba(16, 185, 129, 0.4);
}

.topo-service-tile {
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.topo-service-tile:hover {
  transform: translateY(-1px);
}

/* Copy notification toast */
@keyframes fadeInOut {
  0% { opacity: 0; transform: translateY(10px); }
  15% { opacity: 1; transform: translateY(0); }
  85% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-10px); }
}

.toast-copy-notify {
  animation: fadeInOut 2s ease forwards;
}