/* ============================================================
   Módulo Sonar — Surface styles
   Construido sobre los tokens del Guardian DS.
   Solo usa --g-* / --fs-* / --ls-* tokens del sistema.
   ============================================================ */

html, body, #root {
  height: 100%;
  background: var(--g-bg-dark);
  color: var(--g-text-cream);
  overflow: hidden;
}

body {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-feature-settings: "ss01", "tnum";
}

/* Density variants — set on the .sonar-app root */
.sonar-app {
  height: 100%;
  display: flex;
  flex-direction: column;
  --density-pad: 24px;
  --density-card-pad: 20px;
  --density-row: 44px;
  --density-gap: 16px;
  --accent: var(--g-celadon);

  /* ─── Theme surface tokens (default = "Negro & Eléctrico" dark) ─── */
  --s-shell:        #050608;
  --s-panel:        #07090c;
  --s-map-bg:       #04060a;
  --s-glass:        rgba(7, 9, 12, 0.85);
  --s-glass-strong: rgba(7, 9, 12, 0.94);
  --s-map-tint:     linear-gradient(rgba(4,8,12,0.32), rgba(4,8,12,0.32)), radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.4) 100%);
  --s-card-shadow:  none;
  --s-card-radius:  var(--g-radius-card);
}

/* ════════════════════════════════════════════════════════════════
   APARIENCIA CLARA — flip de tokens de color (independiente de versión)
   Aplica a moderna-clara y minimalista-clara por igual.
   ═══════════════════════════════════════════════════════════════ */
.sonar-app[data-theme="claro"] {
  --s-shell:        #EAEEF3;
  --s-panel:        #FFFFFF;
  --s-map-bg:       #E7ECF1;
  --s-glass:        rgba(255, 255, 255, 0.94);
  --s-glass-strong: rgba(255, 255, 255, 0.97);
  --s-map-tint:     linear-gradient(rgba(255,255,255,0.04), rgba(255,255,255,0.04)), radial-gradient(ellipse at center, transparent 72%, rgba(11,15,20,0.10) 100%);
  --s-card-shadow:  0 1px 2px rgba(11,15,20,0.04), 0 4px 16px rgba(11,15,20,0.06);

  --g-text-cream:           #0B0F14;
  --g-text-mute-dark:       rgba(11, 15, 20, 0.55);
  --g-border-on-dark:       rgba(11, 15, 20, 0.10);
  --g-surface-on-dark:      #FFFFFF;
  --g-surface-on-dark-hover:#F4F7FA;

  --accent: #1391C4;
  --g-celadon: #1391C4;
}

/* ════════════════════════════════════════════════════════════════
   VERSIÓN MINIMALISTA — lenguaje de FORMA "oficina diurna"
   (radios, sombras, padding, pills). Independiente del color:
   funciona en claro y en oscuro usando los tokens de tema.
   ═══════════════════════════════════════════════════════════════ */
.sonar-app[data-version="minimalista"] {
  --s-card-radius: 16px;
  --density-pad: 28px;
  --density-card-pad: 22px;
}
.sonar-app[data-version="minimalista"][data-density="compacto"] { --density-pad: 18px; --density-card-pad: 14px; }
.sonar-app[data-version="minimalista"][data-density="amplio"]   { --density-pad: 36px; --density-card-pad: 30px; }
.sonar-app[data-density="compacto"] {
  --density-pad: 14px;
  --density-card-pad: 12px;
  --density-row: 36px;
  --density-gap: 10px;
}
.sonar-app[data-density="amplio"] {
  --density-pad: 32px;
  --density-card-pad: 26px;
  --density-row: 52px;
  --density-gap: 22px;
}

/* Accent variants — kept within DS palette */
.sonar-app[data-accent="cyan"]    { --accent: var(--g-celadon); }
.sonar-app[data-accent="amber"]   { --accent: var(--g-signal-yellow); }
.sonar-app[data-accent="green"]   { --accent: var(--g-signal-green); }

/* ─── App shell ─────────────────────────────────────────────────── */
.sonar-shell {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  grid-template-rows: 56px minmax(0, 1fr) 28px;
  grid-template-areas:
    "logo  topbar"
    "nav   main"
    "nav   status";
  flex: 1;
  min-height: 0;
  background: var(--s-shell);
}

.sonar-logo {
  grid-area: logo;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 14px;
  border-right: 1px solid var(--g-border-on-dark);
  border-bottom: 1px solid var(--g-border-on-dark);
  background: var(--s-panel);
}
.sonar-logo__partner {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding-left: 10px;
  border-left: 1px solid var(--g-border-on-dark);
  height: 30px;
}
.sonar-logo__partner img {
  height: 30px;
  width: auto;
  object-fit: contain;
  border-radius: 4px;
  background: #FFFFFF;
  padding: 2px;
}
.sonar-logo__mark {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  flex-shrink: 0;
  color: var(--accent);
}
.sonar-logo__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.92;
}
.sonar-logo__brand {
  font-size: 18px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.5px;
  color: var(--g-text-cream);
  text-transform: uppercase;
}
.sonar-logo__module {
  font-size: 10px;
  font-weight: var(--fw-medium);
  letter-spacing: 4.5px;
  text-indent: 4.5px;
  color: var(--g-text-mute-dark);
  text-transform: uppercase;
  margin-top: 3px;
}

/* ─── Sidebar nav ───────────────────────────────────────────────── */
.sonar-nav {
  grid-area: nav;
  background: var(--s-panel);
  border-right: 1px solid var(--g-border-on-dark);
  display: flex;
  flex-direction: column;
  padding: 14px 0;
  overflow: hidden;
  position: relative;
}
.sonar-nav__group-label {
  font-size: 10px;
  letter-spacing: var(--ls-eyebrow-strong);
  text-transform: uppercase;
  color: var(--g-text-mute-dark);
  padding: 0 22px;
  margin: 10px 0 6px;
}
.sonar-nav__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 22px;
  color: var(--g-text-mute-dark);
  font-size: 14px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.3px;
  cursor: pointer;
  position: relative;
  border: 0;
  background: transparent;
  text-align: left;
  width: 100%;
  transition: color 160ms var(--ease-emphasised), background 160ms;
}
.sonar-nav__item:hover {
  color: var(--g-text-cream);
  background: rgba(79, 212, 255, 0.04);
}
.sonar-nav__item[aria-current="true"] {
  color: var(--g-text-cream);
  background: rgba(79, 212, 255, 0.06);
}
.sonar-nav__item[aria-current="true"]::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.sonar-nav__item--disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.sonar-nav__item--disabled:hover { background: transparent; color: var(--g-text-mute-dark); }
.sonar-nav__item .lucide {
  width: 18px; height: 18px;
  stroke-width: 1.75;
  flex-shrink: 0;
}
.sonar-nav__counter {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: 0.6px;
  padding: 2px 7px;
  border-radius: var(--g-radius-pill);
  background: var(--g-signal-red);
  color: white;
  font-weight: var(--fw-medium);
}
/* ── Pantalla de login: tarjeta + franja de colaboración (Gobierno+Interior │ Deep Modular) ── */
.login-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 50px;                 /* separa la franja de logos de la tarjeta de login */
  min-height: 100vh;
  padding: 40px 16px;
  overflow-y: auto;
  /* Fondo: imagen del Quindío. #0b1016 = color de respaldo si la imagen no está. */
  background: #0b1016 url('assets/login-bg.jpg') center / cover no-repeat;
}
/* Velo oscuro (más fuerte al centro, donde van los logos y la tarjeta) para mantener legibilidad. */
.login-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(135% 110% at 50% 42%,
              rgba(6, 10, 15, 0.82) 0%, rgba(6, 10, 15, 0.55) 55%, rgba(6, 10, 15, 0.45) 100%);
  pointer-events: none;
  z-index: 0;
}
.login-screen > * { position: relative; z-index: 1; }   /* logos + tarjeta por ENCIMA del velo */

/* Ojo de preview de la contraseña */
.login__eye {
  position: absolute;
  right: 6px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--g-text-mute-dark);
  border-radius: 6px;
  transition: color 150ms;
}
.login__eye:hover { color: var(--g-text-cream); }

/* Franja de colaboración: Gobierno+Interior │ línea │ Deep Modular.
   Grid 1fr · auto · 1fr → la línea queda SIEMPRE en el centro del ancho de la ventana;
   los logos se acomodan pegados a cada lado de la línea. */
.login__collab {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  max-width: 880px;
  column-gap: 34px;
}
/* Gobierno + Interior: mismo tratamiento que el panel principal (.sonar-nav__partner) */
.login__gov {
  justify-self: end;          /* a la izquierda, pegado a la línea central */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.login__gov img { width: 87px; height: auto; object-fit: contain; }
.login__gov-interior { width: 87px; border-radius: 3px; }
.sonar-app[data-theme="oscuro"] .login__gov img:not(.login__gov-interior) {
  filter: brightness(0) invert(1) opacity(0.85);
}
/* Línea separadora vertical (centro de la ventana) */
.login__sep {
  justify-self: center;
  width: 1px;
  align-self: stretch;
  min-height: 70px;
  background: var(--g-border-on-dark);
}
/* Deep Modular (PNG procesado: transparente + tono claro) — a la derecha de la línea */
.login__dm-img { justify-self: start; width: 118px; max-width: 100%; height: auto; object-fit: contain; opacity: 0.95; }

/* Candado en los paneles bloqueados (feature gating por .env: "Próximamente"). */
.sonar-nav__lock {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  opacity: 0.7;
}
.sonar-nav__lock .lucide { width: 14px; height: 14px; }
/* Tooltip "Próximamente" de las opciones bloqueadas. position:fixed → NO lo recorta el
   overflow:hidden del sidebar; instantáneo y fiable (no depende del title nativo). */
.sonar-nav__tip {
  position: fixed;
  transform: translateY(-50%);
  background: #0e151d;
  border: 1px solid var(--g-border-on-dark);
  color: var(--g-text-cream);
  font-size: 11px;
  letter-spacing: 0.4px;
  padding: 4px 9px;
  border-radius: 7px;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  z-index: 9999;
}
.sonar-nav__partner {
  margin: 0 12px 8px;
  padding: 4px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.sonar-nav__partner img {
  width: 100%;
  /* Logo Gobierno del Quindío +10% (79 → 87px). El de Interior queda en 79px por su !important. */
  max-width: 87px;
  height: auto;
  object-fit: contain;
}
.sonar-nav__partner {
  flex-direction: column;
  gap: 4px;
}
.sonar-nav__partner-interior {
  max-width: 87px !important;   /* +10%, parejo con el logo de Gobierno */
  border-radius: 3px;
}
.sonar-app[data-theme="oscuro"] .sonar-nav__partner img:not(.sonar-nav__partner-interior) {
  /* Navy seal → light tone so it reads on dark surfaces */
  filter: brightness(0) invert(1) opacity(0.85);
}
.sonar-nav__spacer { flex: 1; }
.sonar-nav__theme {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 12px 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--g-border-on-dark);
  background: transparent;
  color: var(--g-text-mute-dark);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 160ms var(--ease-emphasised);
}
.sonar-nav__theme:hover { color: var(--g-text-cream); background: rgba(127,127,127,0.08); }
.sonar-nav__theme .lucide { flex-shrink: 0; }
.sonar-nav__theme-val {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.sonar-nav__footer {
  padding: 12px 22px;
  border-top: 1px solid var(--g-border-on-dark);
  font-size: 11px;
  color: var(--g-text-mute-dark);
  letter-spacing: 0.5px;
  line-height: 1.6;
}
.sonar-nav__profile {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sonar-nav__avatar {
  width: 28px; height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(127,127,127,0.12);
  border: 1px solid var(--g-border-on-dark);
  color: var(--g-text-cream);
}
.sonar-nav__profile-info {
  display: flex; flex-direction: column;
  min-width: 0; line-height: 1.3;
}
.sonar-nav__profile-name {
  font-size: 13.5px;
  font-weight: var(--fw-semibold);
  color: var(--g-text-cream);
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.sonar-nav__profile-sub {
  font-size: 11.5px;
  color: var(--g-text-mute-dark);
  letter-spacing: 0.3px;
}
.sonar-nav__footbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  align-self: center;
  margin-top: 12px;
  padding: 7px 16px;
  border-radius: 9px;
  border: 1px solid var(--g-border-on-dark);
  background: transparent;
  color: var(--g-text-mute-dark);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 160ms var(--ease-emphasised);
}
.sonar-nav__footbtn:hover { color: var(--g-text-cream); border-color: var(--g-text-mute-dark); background: rgba(127,127,127,0.06); }
/* Cerrar sesión: enlace de texto compacto, JUSTO debajo del nombre del operador. */
.sonar-nav__logout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: 4px;
  padding: 1px 0;
  border: 0;
  background: transparent;
  color: var(--g-text-mute-dark);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: color 150ms;
}
.sonar-nav__logout:hover { color: var(--g-signal-red-soft); }
.sonar-nav__session {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  align-self: center;
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--g-text-mute-dark);
}
.sonar-nav__session-val {
  color: var(--g-text-cream);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-medium);
}
.sonar-nav__footer {
  display: flex;
  flex-direction: column;
  padding: 10px 22px 34px;
  border-top: 1px solid var(--g-border-on-dark);
}
.sonar-topbar__theme {
  cursor: pointer;
  font-family: var(--font-sans);
}
.sonar-topbar__theme:hover { border-color: var(--g-text-mute-dark); }
.sonar-nav__version {
  position: absolute;
  left: 0; bottom: 0;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--density-pad);
  border-top: 1px solid var(--g-border-on-dark);
  width: 100%;
  font-size: 10px;
  letter-spacing: 0.3px;
  color: var(--g-text-mute-dark);
  white-space: nowrap;
  background: var(--s-panel);
}

/* ─── Top bar ───────────────────────────────────────────────────── */
.sonar-topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 var(--density-pad);
  border-bottom: 1px solid var(--g-border-on-dark);
  background: var(--s-panel);
}
.sonar-topbar__title {
  display: flex; flex-direction: column;
  justify-content: center;
}
.sonar-topbar__eyebrow {
  font-size: 10px;
  letter-spacing: var(--ls-eyebrow-strong);
  text-transform: uppercase;
  color: var(--g-text-mute-dark);
}
.sonar-topbar__heading {
  font-size: 17px;
  font-weight: var(--fw-medium);
  letter-spacing: -0.2px;
  color: var(--g-text-cream);
  margin-top: 3px;
}
.sonar-topbar__spacer { flex: 1; }
.sonar-topbar__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--g-radius-pill);
  border: 1px solid var(--g-border-on-dark);
  background: rgba(79, 212, 255, 0.04);
  color: var(--g-text-cream);
  font-size: 12px;
  letter-spacing: 0.4px;
  font-variant-numeric: tabular-nums;
}
.sonar-topbar__chip .lucide { width: 14px; height: 14px; stroke-width: 1.75; }
.sonar-topbar__chip .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--g-signal-green);
  box-shadow: 0 0 8px var(--g-signal-green);
}

/* ─── Status bar (bottom) ──────────────────────────────────────── */
.sonar-status {
  grid-area: status;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 var(--density-pad);
  border-top: 1px solid var(--g-border-on-dark);
  background: var(--s-panel);
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--g-text-mute-dark);
  font-variant-numeric: tabular-nums;
}
.sonar-status__sep { opacity: 0.3; }
.sonar-status__pulse {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 6px;
  animation: sonarPulse 1.6s ease-in-out infinite;
}
@keyframes sonarPulse {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

/* ─── Main area ────────────────────────────────────────────────── */
.sonar-main {
  grid-area: main;
  overflow: hidden;
  position: relative;
}
.sonar-main__inner {
  height: 100%;
  overflow: auto;
}

/* Grid backdrop */
.sonar-grid-bg {
  background-image:
    linear-gradient(rgba(79, 212, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 212, 255, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ─── License plate (Colombia-like) ────────────────────────────── */
/* Compact single-line plate — just the alphanumeric. */
.plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 84px;
  background: var(--g-signal-yellow);
  color: #0B0F14;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  padding: 6px 11px;
  border-radius: var(--g-radius-plate);
  border: 1px solid rgba(0, 0, 0, 0.4);
  font-size: 15px;
  letter-spacing: 0.5px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.18);
  white-space: nowrap;
}
.plate--lg { font-size: 22px; padding: 9px 16px; letter-spacing: 1px; border-width: 1.5px; min-width: 132px; }
.plate--sm { font-size: 11px; padding: 3px 0;  letter-spacing: 0.4px; min-width: 0; width: 66px; flex-shrink: 0; }

/* ─── Generic surfaces ─────────────────────────────────────────── */
.surface {
  background: var(--g-surface-on-dark);
  border: 1px solid var(--g-border-on-dark);
  border-radius: var(--g-radius-card);
}
.surface-soft {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--g-border-on-dark);
  border-radius: var(--g-radius-card);
}

/* ─── Sin bordes: tarjetas borderless con relleno translúcido ───── */
.sonar-app[data-cards="sin-bordes"] .surface,
.sonar-app[data-cards="sin-bordes"] .surface-soft {
  border-color: transparent !important;
  background: rgba(127, 134, 142, 0.10);
}
.sonar-app[data-cards="sin-bordes"][data-theme="claro"] .surface,
.sonar-app[data-cards="sin-bordes"][data-theme="claro"] .surface-soft {
  background: rgba(11, 15, 20, 0.045);
}
/* Hairline dividers entre filas y secciones se suavizan, no desaparecen */
.sonar-app[data-cards="sin-bordes"] {
  --g-border-on-dark: rgba(127, 134, 142, 0.14);
}

/* ════════════════════════════════════════════════════════════════
   MINIMALISTA — restyle completo de componentes (Parque del Café)
   No es sólo color: cambia radios, sombras, padding, pills, chips.
   ═══════════════════════════════════════════════════════════════ */

/* ── FORMA: tarjetas redondeadas + sombra (color via tokens de tema) ── */
.sonar-app[data-version="minimalista"] .surface,
.sonar-app[data-version="minimalista"] .surface-soft {
  border-radius: var(--s-card-radius);
  box-shadow: var(--s-card-shadow);
}

/* ── Sidebar aireado, pills redondeadas ── */
.sonar-app[data-version="minimalista"] .sonar-nav { padding: 16px 12px; }
.sonar-app[data-version="minimalista"] .sonar-nav__group-label { padding: 0 12px; margin: 18px 0 8px; }
.sonar-app[data-version="minimalista"] .sonar-nav__item {
  padding: 11px 14px;
  margin-bottom: 3px;
  border-radius: 12px;
  font-weight: var(--fw-medium);
}
.sonar-app[data-version="minimalista"] .sonar-nav__item[aria-current="true"] {
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--accent);
  border-radius: 12px;
}
.sonar-app[data-version="minimalista"] .sonar-nav__item[aria-current="true"]::before { display: none; }

/* ── Topbar: título más grande, chips pill bordeados ── */
.sonar-app[data-version="minimalista"] .sonar-topbar__heading { font-size: 19px; }
.sonar-app[data-version="minimalista"] .sonar-topbar__chip {
  border-radius: 10px;
  padding: 7px 13px;
  box-shadow: var(--s-card-shadow);
  background: var(--g-surface-on-dark);
}

/* ── Botones: redondeados + sombra; primary sólido ── */
.sonar-app[data-version="minimalista"] .btn {
  border-radius: 10px;
  box-shadow: var(--s-card-shadow);
  background: var(--g-surface-on-dark);
  font-weight: var(--fw-medium);
}
.sonar-app[data-version="minimalista"] .btn--primary {
  background: var(--accent);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 32%, transparent);
}
.sonar-app[data-version="minimalista"] .btn--ghost {
  background: transparent; border-color: transparent; box-shadow: none;
}
.sonar-app[data-version="minimalista"] .btn--danger { box-shadow: none; }

/* ── Inputs redondeados con sombra ── */
.sonar-app[data-version="minimalista"] .input { border-radius: 10px; box-shadow: var(--s-card-shadow); }

/* ── Eyebrow sin guion ── */
.sonar-app[data-version="minimalista"] .eyebrow::before { display: none; }

/* ── KPI cards estilo referencia (icono junto al texto + número grande) ── */
.kpi-card { position: relative; }
.kpi-card__head { display: flex; align-items: center; gap: 8px; }
.kpi-card__icon { display: none; }
/* Minimalista: ícono inline al lado de la etiqueta; mantiene grid 2×2 */
.sonar-app[data-version="minimalista"] .kpi-card {
  padding: 14px 14px;
  min-height: 0;
}
.sonar-app[data-version="minimalista"] .kpi-card__head { gap: 6px; min-width: 0; }
.sonar-app[data-version="minimalista"] .kpi-card__label {
  white-space: nowrap;
  letter-spacing: 0.6px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sonar-app[data-version="minimalista"] .kpi-card__icon {
  display: inline-grid;
  place-items: center;
  width: 16px; height: 16px;
  flex-shrink: 0;
}
.sonar-app[data-version="minimalista"] .kpi-card__num {
  font-size: 26px;
  color: var(--g-text-cream) !important;
  margin-top: 6px;
}

/* ─── Buttons / CTAs ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--g-radius-cta);
  border: 1px solid var(--g-border-on-dark);
  background: transparent;
  color: var(--g-text-cream);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 180ms var(--ease-emphasised);
}
.btn:hover { background: rgba(79, 212, 255, 0.06); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn .lucide { width: 15px; height: 15px; stroke-width: 1.75; }
.btn--primary {
  background: var(--accent);
  color: #0B0F14;
  border-color: transparent;
  font-weight: var(--fw-medium);
}
.btn--primary:hover { background: var(--accent); box-shadow: var(--btn-glow, 0 0 0 3px rgba(79, 212, 255, 0.18)); }
.btn--ghost { border-color: transparent; opacity: 0.7; }

/* ─── Tono de botones — cyan brillante (única opción) ──────────── */
.btn--ghost:hover { opacity: 1; }
.btn--danger {
  background: rgba(229, 51, 63, 0.1);
  border-color: rgba(229, 51, 63, 0.3);
  color: var(--g-signal-red);
}

/* ─── Eyebrow + meta ───────────────────────────────────────────── */
.eyebrow {
  font-size: 10px;
  letter-spacing: var(--ls-eyebrow-strong);
  text-transform: uppercase;
  color: var(--g-text-mute-dark);
}
.eyebrow--accent { color: var(--accent); opacity: 1; }

/* Scroll horizontal con difuminado en los bordes (secciones del panel del mapa). */
.hscroll {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
.hscroll::-webkit-scrollbar { display: none; }

/* Burbuja (InfoWindow) del mapa → tarjeta del sistema: gris claro con borde, compacta.
   Se quita el padding y la franja del botón cerrar (usamos un × propio). */
.gm-style .gm-style-iw-c {
  padding: 0 !important;
  background: #f5f7fa !important;
  border: 1px solid #d8dee6 !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22) !important;
  max-width: 250px !important;
}
.gm-style .gm-style-iw-d { overflow: hidden !important; padding: 0 !important; max-height: none !important; }
.gm-style .gm-style-iw-chr { display: none !important; }            /* franja del cerrar de Google */
.gm-style .gm-style-iw button.gm-ui-hover-effect { display: none !important; }
.gm-style .gm-style-iw-tc::after { background: #f5f7fa !important; }
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px; height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 8px;
  opacity: 0.6;
}

.meta { font-size: 11px; letter-spacing: 0.4px; color: var(--g-text-mute-dark); font-variant-numeric: tabular-nums; }

/* ─── Status badges ────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: var(--g-radius-pill);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
}
.badge--alert {
  background: rgba(229, 51, 63, 0.12);
  color: var(--g-signal-red-soft);
  border: 1px solid rgba(229, 51, 63, 0.3);
}
.badge--active {
  background: rgba(74, 222, 128, 0.1);
  color: var(--g-signal-green);
  border: 1px solid rgba(74, 222, 128, 0.25);
}
.badge--inactive {
  background: rgba(229, 238, 245, 0.05);
  color: var(--g-text-mute-dark);
  border: 1px solid var(--g-border-on-dark);
}
.badge--warn {
  background: rgba(242, 198, 29, 0.1);
  color: var(--g-signal-yellow);
  border: 1px solid rgba(242, 198, 29, 0.3);
}

/* ─── Operational alert banner (Pulso) ─────────────────────────── */
.alert-banner {
  position: relative;
  background: linear-gradient(180deg, rgba(229, 51, 63, 0.18), rgba(229, 51, 63, 0.06));
  border: 1px solid rgba(229, 51, 63, 0.5);
  border-radius: var(--g-radius-card);
  padding: 18px 22px;
  overflow: hidden;
}
.alert-banner::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--g-signal-red);
  box-shadow: 0 0 16px var(--g-signal-red);
  animation: alertPulse 1.4s ease-in-out infinite;
}
@keyframes alertPulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

/* ─── Forms ────────────────────────────────────────────────────── */
.input {
  width: 100%;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--g-border-on-dark);
  border-radius: var(--g-radius-cta);
  padding: 12px 14px;
  color: var(--g-text-cream);
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0.4px;
  outline: none;
  transition: all 180ms;
}
.input:focus {
  border-color: var(--accent);
  background: rgba(79, 212, 255, 0.04);
  box-shadow: 0 0 0 3px rgba(79, 212, 255, 0.15);
}
.input::placeholder { color: var(--g-text-mute-dark); }
.reg-select option {
  background: var(--s-panel);
  color: var(--g-text-cream);
}
.sonar-app[data-version="minimalista"] .reg-select option {
  background: #fff;
  color: var(--g-text-espresso);
}

/* ─── Map node styles ──────────────────────────────────────────── */
.node-glow { filter: drop-shadow(0 0 6px currentColor); }

/* ─── Animations ───────────────────────────────────────────────── */
@keyframes nodeAlertPulse {
  0%, 100% { r: 8; opacity: 0.8; }
  50%      { r: 14; opacity: 0; }
}
@keyframes corridorDash {
  to { stroke-dashoffset: -30; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes sweep {
  0%   { transform: rotate(0deg);   opacity: 0; }
  10%  { opacity: 0.4; }
  100% { transform: rotate(360deg); opacity: 0; }
}

/* ─── Scrollbars ───────────────────────────────────────────────── */
.sonar-main__inner::-webkit-scrollbar,
.scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.sonar-main__inner::-webkit-scrollbar-thumb,
.scroll::-webkit-scrollbar-thumb { background: rgba(79, 212, 255, 0.18); border-radius: 4px; }
.sonar-main__inner::-webkit-scrollbar-track,
.scroll::-webkit-scrollbar-track { background: transparent; }

/* ─── Timeline ─────────────────────────────────────────────────── */
.timeline-track {
  position: relative;
  height: 60px;
}
.timeline-track::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--g-border-on-dark) 8%,
    var(--g-border-on-dark) 92%,
    transparent 100%);
}
.timeline-tick {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* ─── Confidence pill ──────────────────────────────────────────── */
.conf-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--g-radius-pill);
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
}
.conf-pill--alto   { background: rgba(74, 222, 128, 0.12); color: var(--g-signal-green); border: 1px solid rgba(74, 222, 128, 0.3); }
.conf-pill--medio  { background: rgba(242, 198, 29, 0.12); color: var(--g-signal-yellow); border: 1px solid rgba(242, 198, 29, 0.3); }
.conf-pill--bajo   { background: rgba(255, 138, 61, 0.12); color: var(--g-signal-orange); border: 1px solid rgba(255, 138, 61, 0.3); }
.conf-pill--desc   { background: rgba(229, 238, 245, 0.04); color: var(--g-text-mute-dark); border: 1px solid var(--g-border-on-dark); text-decoration: line-through; }

/* ─── Misc ─────────────────────────────────────────────────────── */
.divider { height: 1px; background: var(--g-border-on-dark); margin: 0; border: 0; }
.kbd {
  display: inline-block;
  padding: 2px 6px;
  font-size: 10px;
  letter-spacing: 0.5px;
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--g-border-on-dark);
  color: var(--g-text-mute-dark);
  font-family: var(--font-sans);
}
.fade-in { animation: fadeIn 260ms var(--ease-emphasised); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }