/* Unifilar · diseño C «Panel de control» (ADR-0009): vidrio oscuro o claro, azul Sinergy en degradados y violeta, menú lateral en
   el computador y barra flotante en el celular. Va después de app.css, red.css y depuracion.css y solo cambia
   variables y la apariencia de los componentes comunes: las vistas no cambian.
   Modo: <html data-tema="claro|oscuro">, lo pone public/js/tema.js antes de pintar (sigue al sistema hasta que la
   persona elige con el botón de la barra). Sin JavaScript queda el modo claro. */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/fonts/manrope-latin.woff2") format("woff2-variations"), url("/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/fonts/manrope-latin-ext.woff2") format("woff2-variations"), url("/fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------ modo claro (por defecto) */
:root {
  color-scheme: light;

  /* Azul Sinergy (#074985, del logo) en escala: 900 #04264A · 800 #053463 · 700 #074985 · 600 #0B5FAD ·
     500 #1C7AD6 · 400 #4A9BEA · 300 #8CC2F5 · 200 #C9E1FA · 100 #E6F1FD. Naranja del logo: #F09000. */
  --azul-sinergy: #074985;
  --acento: #074985;
  --acento-oscuro: #053463;
  --acento-suave: #E3EEFB;
  --sobre-acento: #FFFFFF;
  --enlace: #074985;
  --boton-borde: #0B5FAD;
  --foco: #F09000;
  --barra-fondo: rgba(255, 255, 255, .84);
  --degradado-acento: linear-gradient(135deg, #1C7AD6 0%, #0B5FAD 45%, #074985 100%);
  --degradado-suave: linear-gradient(90deg, #E3EEFB, rgba(227, 238, 251, 0));
  --degradado-marca: linear-gradient(90deg, #04264A, #074985 35%, #1C7AD6 70%, #4A9BEA);

  --violeta: #6D28D9;
  --violeta-suave: #EDE7FB;

  --fondo: #F2F5F9;
  --superficie: #FFFFFF;
  --superficie-2: #EEF3F9;
  --superficie-3: #DFE7F1;
  --borde: #D1DCE8;
  --borde-fuerte: #64768C;
  --texto: #0B1A2B;
  --texto-2: #3A4B60;

  --verde: #15803D;  --verde-fondo: #DCF3E4;  --verde-texto: #0B5A2A;
  --azul: #0B5FAD;   --azul-fondo: #E3EEFB;   --azul-texto: #053463;
  --ambar: #B45309;  --ambar-fondo: #FDF0D5;  --ambar-texto: #6B3A00;
  --rojo: #B91C1C;   --rojo-fondo: #FBE3E1;   --rojo-texto: #8A1414;
  --gris: #64748B;   --gris-fondo: #EAEFF5;   --gris-texto: #334155;

  --hilo-disponible: #15803D;
  --hilo-ocupado: #0B5FAD;
  --hilo-reservado: #6D28D9;
  --hilo-muerto: #B91C1C;
  --hilo-por-validar: #64748B;

  --lev-sin: #94A3B8;
  --lev-en: #E08600;
  --lev-ok: #0B5FAD;

  --esquema-fondo: #F7FAFD;
  --esquema-nodo: #FFFFFF;
  --esquema-nodo-borde: #074985;
  --logico: #6D28D9;
  --logico-texto: #5B21B6;

  --radio: 18px;
  --radio-chico: 12px;
  --ancho-max: 1180px;
  --ancho-lateral: 248px;
  --sombra: 0 1px 2px rgba(4, 38, 74, .05), 0 8px 24px rgba(4, 38, 74, .07);
  --sombra-alta: 0 18px 50px rgba(4, 38, 74, .24);
  --vidrio: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .75));
  --brillo-1: rgba(28, 122, 214, .13);
  --brillo-2: rgba(109, 40, 217, .06);
  --resplandor: none;

  --fuente: "Manrope", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* ------------------------------------------------------------------ modo oscuro */
:root[data-tema="oscuro"] {
  color-scheme: dark;

  --acento: #1F6FC4;
  --acento-oscuro: #2F80D8;
  --acento-suave: #0E2440;
  --sobre-acento: #FFFFFF;
  --enlace: #8CC2F5;
  --boton-borde: #4A9BEA;
  --foco: #F5A524;
  --barra-fondo: rgba(8, 12, 20, .84);
  --degradado-acento: linear-gradient(135deg, #2F80D8 0%, #1C6BC0 45%, #074985 100%);
  --degradado-suave: linear-gradient(90deg, #0E2440, rgba(14, 36, 64, 0));
  --degradado-marca: linear-gradient(90deg, #074985, #1C7AD6 45%, #4A9BEA 75%, #8CC2F5);

  --violeta: #A78BFA;
  --violeta-suave: #21173A;

  --fondo: #070B12;
  --superficie: #0F1520;
  --superficie-2: #151D2A;
  --superficie-3: #1D2736;
  --borde: #243146;
  --borde-fuerte: #7D8FA6;
  --texto: #E8EEF6;
  --texto-2: #B3C0D1;

  --verde: #22C55E;  --verde-fondo: #0F2A1A;  --verde-texto: #86EFAC;
  --azul: #4A9BEA;   --azul-fondo: #0E2440;   --azul-texto: #B9D8F8;
  --ambar: #F5A524;  --ambar-fondo: #2B1F08;  --ambar-texto: #FCD58A;
  --rojo: #F87171;   --rojo-fondo: #341313;   --rojo-texto: #FCA5A5;
  --gris: #94A3B8;   --gris-fondo: #1A2331;   --gris-texto: #CBD5E1;

  --hilo-disponible: #15803D;
  --hilo-ocupado: #0B5FAD;
  --hilo-reservado: #6D28D9;
  --hilo-muerto: #B91C1C;
  --hilo-por-validar: #475569;

  --lev-sin: #6B7B92;
  --lev-en: #F5A524;
  --lev-ok: #4A9BEA;

  --esquema-fondo: #080E18;
  --esquema-nodo: #0F1520;
  --esquema-nodo-borde: #8CC2F5;
  --logico: #A78BFA;
  --logico-texto: #C4B5FD;

  --sombra: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px rgba(0, 0, 0, .25);
  --sombra-alta: 0 20px 60px rgba(0, 0, 0, .65);
  --vidrio: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
  --brillo-1: rgba(28, 122, 214, .17);
  --brillo-2: rgba(167, 139, 250, .07);
  --resplandor: drop-shadow(0 0 4px currentColor);
}

/* ------------------------------------------------------------------ base */
body {
  background:
    radial-gradient(1100px 560px at 85% -12%, var(--brillo-1), transparent 62%),
    radial-gradient(900px 600px at -10% 110%, var(--brillo-2), transparent 60%),
    var(--fondo);
  background-attachment: fixed;
  font-feature-settings: "tnum" 1;
}
h1 { font-weight: 800; letter-spacing: -.015em; }
h2, h3 { font-weight: 700; }

/* ------------------------------------------------------------------ barra superior (vidrio) */
.barra-superior {
  background: var(--barra-fondo);
  color: var(--texto);
  border-bottom: 1px solid var(--borde);
  box-shadow: none;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
.barra-superior :focus-visible { outline-color: var(--foco); }
.marca { color: var(--texto); }
.marca img { border-radius: 10px; padding: 3px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--borde); }
.marca-sub { color: var(--texto-2); font-weight: 600; }
.marca-sub::before { content: " · "; }

.estado-conexion {
  background: var(--superficie-2);
  color: var(--texto-2);
  border: 1px solid var(--borde);
}
.estado-conexion .punto { background: #22C55E; box-shadow: 0 0 8px rgba(34, 197, 94, .7); }
.estado-conexion[data-estado="sin-senal"] { background: #FDE047; color: #1F1300; border-color: #CA8A04; }

.contador-cola { color: var(--texto); }
.contador-cola:hover { background: var(--superficie-2); }
.contador-cola .badge { box-shadow: 0 0 0 2px var(--superficie); }
.barra-superior .badge.info { background: var(--degradado-acento); color: #FFFFFF; }
/* Franja con los tonos del azul Sinergy en el borde de la barra (arriba en el celular, a la izquierda en el PC). */
.barra-superior::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--degradado-marca);
}

.boton-usuario {
  background: var(--superficie-2);
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
}
.boton-usuario:hover { background: var(--superficie-3); }

.boton-tema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--toque);
  height: var(--toque);
  flex: none;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  background: var(--superficie-2);
  color: var(--texto);
  cursor: pointer;
}
.boton-tema:hover { background: var(--superficie-3); }
.boton-tema [data-icono] { display: inline-flex; }
.boton-tema .tema-sol,
:root[data-tema="oscuro"] .boton-tema .tema-luna { display: none; }
:root[data-tema="oscuro"] .boton-tema .tema-sol { display: inline-flex; }
@media (max-width: 380px) { .estado-conexion .texto { display: none; } }

@media (min-width: 860px) and (max-width: 1023px) {
  .nav-principal a { color: var(--texto-2); }
  .nav-principal a:hover { background: var(--superficie-2); color: var(--texto); }
  .nav-principal a[aria-current="page"] {
    background: var(--acento-suave);
    color: var(--texto);
    box-shadow: inset 0 0 0 1px var(--acento);
  }
}

/* ------------------------------------------------------------------ menú lateral (computador)
   Panel oscuro flotante con esquinas redondeadas, igual en modo claro y oscuro: la marca arriba en una tarjeta,
   opciones grandes con su icono, la activa en gris claro y separadores finos. Tiene su propia paleta (--lat-*). */
@media (min-width: 1024px) {
  :root {
    --lat-fondo: #17191C;
    --lat-borde: rgba(255, 255, 255, .06);
    --lat-texto: #C9CDD3;
    --lat-texto-2: #8B9099;
    --lat-activo: rgba(255, 255, 255, .09);
    --lat-hover: rgba(255, 255, 255, .05);
    --lat-linea: rgba(255, 255, 255, .08);
    --lat-margen: 12px;
  }
  :root[data-tema="oscuro"] {
    --lat-fondo: #10151F;
    --lat-borde: #222D3D;
  }
  body[data-sesion="activa"] { padding-left: calc(var(--ancho-lateral) + var(--lat-margen) * 2); }
  body[data-sesion="activa"] .barra-superior {
    position: fixed;
    top: var(--lat-margen);
    bottom: var(--lat-margen);
    left: var(--lat-margen);
    width: var(--ancho-lateral);
    border: 1px solid var(--lat-borde);
    border-radius: 22px;
    background: var(--lat-fondo);
    color: var(--lat-texto);
    box-shadow: 0 20px 50px rgba(4, 38, 74, .18);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    overflow-y: auto;
    scrollbar-width: thin;
  }
  body[data-sesion="activa"] .barra-superior::before { content: none; }
  body[data-sesion="activa"] .barra-superior :focus-visible { outline-color: #F5A524; }
  body[data-sesion="activa"] .barra-contenido {
    height: auto;
    min-height: 100%;
    max-width: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 14px 12px 14px;
  }

  /* Tarjeta de la marca */
  body[data-sesion="activa"] .marca {
    gap: 12px;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .04);
    color: #FFFFFF;
  }
  body[data-sesion="activa"] .marca img {
    width: 44px;
    height: 44px;
    padding: 5px;
    border-radius: 12px;
    box-shadow: none;
  }
  body[data-sesion="activa"] .marca-texto {
    display: flex;
    flex-direction: column-reverse;
    line-height: 1.15;
    font-size: 1.1875rem;
    font-weight: 600;
  }
  body[data-sesion="activa"] .marca-sub {
    display: block;
    color: var(--lat-texto-2);
    font-size: .8125rem;
    font-weight: 500;
  }
  body[data-sesion="activa"] .marca-sub::before { content: none; }

  /* Opciones */
  body[data-sesion="activa"] .nav-principal {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 8px 0 10px;
    border-top: 1px solid var(--lat-linea);
  }
  body[data-sesion="activa"] .nav-principal a {
    justify-content: flex-start;
    gap: 14px;
    min-height: 52px;
    padding: 0 12px;
    border: 0;
    border-radius: 14px;
    color: var(--lat-texto);
    font-size: 1.0625rem;
    font-weight: 500;
  }
  body[data-sesion="activa"] .nav-principal a > [data-icono] {
    display: inline-flex;
    width: auto;
    height: auto;
    background: none;
    color: var(--lat-texto-2);
  }
  body[data-sesion="activa"] .nav-principal a > [data-icono] svg { width: 22px; height: 22px; }
  body[data-sesion="activa"] .nav-principal a:hover { background: var(--lat-hover); color: #FFFFFF; }
  body[data-sesion="activa"] .nav-principal a[aria-current="page"] {
    background: var(--lat-activo);
    color: #FFFFFF;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  }
  body[data-sesion="activa"] .nav-principal a[aria-current="page"] > [data-icono] { color: #8CC2F5; }

  /* Abajo: modo, conexión y usuario */
  body[data-sesion="activa"] .barra-derecha {
    margin: auto 0 0;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--lat-linea);
  }
  body[data-sesion="activa"] .boton-tema,
  body[data-sesion="activa"] .estado-conexion,
  body[data-sesion="activa"] .boton-usuario {
    border-color: var(--lat-linea);
    background: rgba(255, 255, 255, .05);
    color: var(--lat-texto);
  }
  body[data-sesion="activa"] .boton-tema:hover,
  body[data-sesion="activa"] .boton-usuario:hover { background: var(--lat-hover); color: #FFFFFF; }
  body[data-sesion="activa"] .contador-cola { color: var(--lat-texto); }
  body[data-sesion="activa"] .contador-cola .badge { box-shadow: 0 0 0 2px var(--lat-fondo); }
  body[data-sesion="activa"] .barra-superior .badge.info { background: #F09000; color: #1F1300; }
  body[data-sesion="activa"] .usuario-caja { flex: 1 1 100%; }
  body[data-sesion="activa"] .boton-usuario { width: 100%; min-height: 48px; justify-content: flex-start; border-radius: 14px; }
  body[data-sesion="activa"] .usuario-nombre { max-width: none; }
  body[data-sesion="activa"] .menu-usuario {
    top: auto;
    bottom: calc(var(--lat-margen) + 8px);
    left: calc(var(--ancho-lateral) + var(--lat-margen) * 2);
    right: auto;
  }
  body[data-sesion="activa"] .aviso-version { margin-left: 0; }
  #principal { padding-top: 24px; }
}

/* ------------------------------------------------------------------ barra inferior flotante (celular) */
.nav-inferior {
  left: 10px;
  right: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  padding: 6px;
  gap: 4px;
  border: 1px solid var(--borde);
  border-radius: 20px;
  background: var(--barra-fondo);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--sombra-alta);
}
.nav-inferior a,
.nav-inferior button {
  min-height: 54px;
  border-radius: 14px;
  color: var(--texto-2);
}
.nav-inferior a[aria-current="page"],
.nav-inferior button[aria-expanded="true"] {
  background: var(--degradado-acento);
  color: #FFFFFF;
  box-shadow: 0 6px 16px rgba(7, 73, 133, .35);
}
body[data-sesion="activa"] { padding-bottom: calc(var(--alto-nav) + 28px + env(safe-area-inset-bottom)); }
@media (min-width: 860px) { body[data-sesion="activa"] { padding-bottom: 0; } }

/* ------------------------------------------------------------------ menú del usuario, modales y avisos */
.menu-usuario {
  border-radius: var(--radio);
  background: var(--superficie);
  box-shadow: var(--sombra-alta);
}
.menu-usuario a,
.menu-usuario button { border-radius: var(--radio-chico); }

.modal-caja { border-radius: 22px; }
.toast { border-radius: 14px; }
.aviso { border-radius: 14px; }

/* ------------------------------------------------------------------ tarjetas de vidrio */
.tarjeta {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--vidrio), var(--superficie);
  box-shadow: var(--sombra);
}
.tarjeta.destacada {
  border: 1px solid color-mix(in srgb, var(--boton-borde) 55%, transparent);
  background:
    linear-gradient(160deg, color-mix(in srgb, #1C7AD6 18%, transparent), transparent 70%),
    var(--superficie);
}
.lista { border-radius: var(--radio); }

/* ------------------------------------------------------------------ botones */
.boton {
  border-width: 1.5px;
  border-radius: var(--radio-chico);
  background: transparent;
}
.boton.primario {
  background: var(--degradado-acento);
  border-color: transparent;
  color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(7, 73, 133, .30);
}
.boton.primario:hover { background: var(--degradado-acento); border-color: transparent; filter: brightness(1.1); }
.boton.peligro { color: #FFFFFF; }
:root[data-tema="oscuro"] .boton.peligro { background: #B91C1C; border-color: #B91C1C; }

/* ------------------------------------------------------------------ campos */
.campo input:not([type="checkbox"]):not([type="radio"]),
.campo select,
.campo textarea {
  border-radius: var(--radio-chico);
  background: var(--superficie-2);
}

/* ------------------------------------------------------------------ chips y pestañas */
.chip { border-radius: 999px; }
.pestanas {
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--borde);
  border-radius: 14px;
  background: var(--superficie-2);
}
.pestanas a,
.pestana {
  min-height: 40px;
  margin-bottom: 0;
  border-bottom: 0;
  border-radius: 10px;
}
.pestanas a:hover { background: var(--superficie-3); }
.pestanas a.activa,
.pestanas a[aria-current="page"] {
  background: var(--degradado-acento);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(7, 73, 133, .28);
}
.pestanas a.activa .badge,
.pestanas a[aria-current="page"] .badge { background: rgba(255, 255, 255, .22); color: #FFFFFF; }

/* ------------------------------------------------------------------ fichas de hilo */
.ficha-hilo { border-radius: 12px; }
.ficha-hilo[data-estado="Ocupado"] { background: linear-gradient(160deg, #1C7AD6, #074985); }
:root[data-tema="oscuro"] .ficha-hilo {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

/* ------------------------------------------------------------------ esquema de la red (ADR-0010)
   Color por grupo (Anillo 1 azul Sinergy, Anillo 2 violeta, Radial celeste, Ramal gris punteado); el estado va
   encima: sin levantar punteado, en levantamiento naranja con halo, levantado continuo. Nodos hexagonales, un punto
   por hilo sobre el enlace, fondo de radar y buscador con filtros flotando sobre el mapa. */
:root {
  --grupo-a1: #0B5FAD;
  --grupo-a2: #6D28D9;
  --grupo-radial: #0284C7;
  --grupo-ramal: #94A3B8;
  --radar: rgba(11, 95, 173, .07);
  --radar-barrido: rgba(28, 122, 214, .06);
  --esquema-fondo: #F7FAFD;
}
:root[data-tema="oscuro"] {
  --grupo-a1: #4A9BEA;
  --grupo-a2: #A78BFA;
  --grupo-radial: #38BDF8;
  --grupo-ramal: #5B6B82;
  --radar: rgba(74, 155, 234, .09);
  --radar-barrido: rgba(74, 155, 234, .11);
  --esquema-fondo: #080D18;
}
.esquema {
  border-radius: var(--radio);
  background: radial-gradient(60% 70% at 50% 50%, var(--radar-barrido), transparent 75%), var(--esquema-fondo);
}

/* Fondo de radar */
.capa-fondo { pointer-events: none; }
.radar-anillos circle,
.radar-anillos line { fill: none; stroke: var(--radar); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.radar-barrido { fill: var(--radar-barrido); }

/* Enlaces: halo + núcleo por grupo */
.enlace-svg { color: var(--grupo-a1); }
.enlace-svg.grupo-a2 { color: var(--grupo-a2); }
.enlace-svg.grupo-radial { color: var(--grupo-radial); }
.enlace-svg.grupo-ramal { color: var(--grupo-ramal); }
.enlace-svg .enlace-linea {
  stroke: currentColor;
  stroke-width: 4px;
  filter: var(--resplandor);
}
.enlace-svg.lev-sin .enlace-linea { stroke-dasharray: 9 6; stroke-opacity: .75; }
.enlace-svg.tipo-ramal .enlace-linea { stroke-width: 2.5px; stroke-dasharray: 3 7; }
.enlace-halo {
  stroke: transparent;
  stroke-width: 16px;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.enlace-svg.lev-ok .enlace-halo { stroke: currentColor; stroke-opacity: .16; }
.enlace-svg.lev-en { color: var(--lev-en); }
.enlace-svg.lev-en .enlace-linea { stroke-width: 5px; }
.enlace-svg.lev-en .enlace-halo { stroke: var(--lev-en); stroke-opacity: .22; animation: latido-enlace 1.8s ease-in-out infinite; }
@keyframes latido-enlace { 50% { stroke-opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .enlace-svg.lev-en .enlace-halo { animation: none; } }
.enlace-svg:hover .enlace-linea,
.enlace-svg:focus-visible .enlace-linea { stroke-width: 7px; }
.esquema-svg.con-seleccion .enlace-svg.resaltado .enlace-linea { stroke-width: 7px; stroke-dasharray: none; stroke-opacity: 1; }

/* Filtros: grupos ocultos y «solo en levantamiento» */
.esquema-svg.oculto-grupo-a1 .enlace-svg.grupo-a1,
.esquema-svg.oculto-grupo-a2 .enlace-svg.grupo-a2,
.esquema-svg.oculto-grupo-radial .enlace-svg.grupo-radial,
.esquema-svg.oculto-grupo-ramal .enlace-svg.grupo-ramal { display: none; }
.esquema-svg.solo-levantamiento .enlace-svg:not(.lev-en) { opacity: .15; }
.esquema-svg.solo-levantamiento .hilos-enlace { opacity: .25; }

/* Un punto por hilo */
.capa-hilos { pointer-events: none; }
.hilos-enlace circle { stroke: var(--esquema-fondo); stroke-width: 1.2px; }
.h-ocupado { fill: #1C7AD6; }
.h-reservado { fill: #8B5CF6; }
.h-disponible { fill: #16A34A; }
.h-validar { fill: #94A3B8; }
.h-muerto { fill: #DC2626; }
:root[data-tema="oscuro"] .hilos-enlace { filter: drop-shadow(0 0 2px rgba(255, 255, 255, .35)); }

/* Nodos hexagonales */
.nodo-svg .nodo-forma {
  fill: var(--esquema-nodo);
  stroke: var(--esquema-nodo-borde);
  stroke-width: 2.5;
  stroke-linejoin: round;
  transition: stroke-width .12s;
}
.nodo-svg .nodo-forma.nodo-cruce { stroke-width: 3.5; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--esquema-nodo-borde) 45%, transparent)); }
.nodo-svg.nodo-ramal .nodo-forma { stroke: var(--grupo-ramal); stroke-width: 1.5; stroke-dasharray: 3 2; }
.nodo-svg .nodo-codigo { font: 800 13px var(--fuente); fill: var(--texto); }
.nodo-svg.nodo-ramal .nodo-codigo { font-size: 9.5px; fill: var(--texto-2); }
.nodo-svg .nodo-nombre {
  font: 600 10.5px var(--fuente);
  fill: var(--texto-2);
  paint-order: stroke;
  stroke: var(--esquema-fondo);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.nodo-svg:hover .nodo-forma { stroke-width: 4; }
.nodo-svg:focus-visible .nodo-forma { stroke: var(--foco); stroke-width: 4; }
.nodo-svg.seleccionado .nodo-forma { fill: #074985; stroke: #4A9BEA; }
.nodo-svg.seleccionado .nodo-codigo { fill: #FFFFFF; }

/* Buscador y filtros flotando sobre el mapa */
.esquema-barra {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}
.esquema-barra > * { pointer-events: auto; }
.esquema-buscar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(320px, 100%);
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--borde);
  border-radius: 14px;
  background: var(--superficie);
  color: var(--texto-2);
  box-shadow: var(--sombra-alta);
}
.esquema-buscar input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--texto);
  font-size: .9375rem;
}
.esquema-filtros { display: flex; flex-wrap: wrap; gap: 6px; }
.filtro-esquema {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--superficie);
  color: var(--texto-2);
  font-size: .8125rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(4, 38, 74, .12);
}
.filtro-esquema[aria-pressed="false"] { opacity: .55; text-decoration: line-through; }
.filtro-esquema.grupo-a1 { color: var(--grupo-a1); }
.filtro-esquema.grupo-a2 { color: var(--grupo-a2); }
.filtro-esquema.grupo-radial { color: var(--grupo-radial); }
.filtro-esquema.grupo-ramal { color: var(--texto-2); }
.filtro-levantamiento { color: #8A4B00; border-color: #F09000; }
.filtro-levantamiento[aria-pressed="false"] { opacity: 1; text-decoration: none; }
.filtro-levantamiento[aria-pressed="true"] { background: #F09000; border-color: #F09000; color: #1F1300; }
:root[data-tema="oscuro"] .filtro-levantamiento[aria-pressed="false"] { color: #FCD58A; }
@media (max-width: 599px) {
  /* En el celular la barra va encima del mapa (no flotando) para no taparlo. */
  .esquema { display: flex; flex-direction: column; }
  .esquema-barra { position: static; order: -1; padding: 10px 10px 0; }
  .esquema-buscar { width: 100%; box-shadow: none; }
  .esquema-filtros { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 2px; scrollbar-width: none; }
  .filtro-esquema { flex: none; min-height: 34px; padding: 0 10px; font-size: .75rem; box-shadow: none; }
}

/* Cifras con anillo de progreso */
.cifras-red .cifra { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
.cifras-red .cifra .anillo-cifra { grid-row: span 2; }
.cifras-red .cifra .valor small { font-size: .9rem; color: var(--texto-2); font-weight: 600; }
.anillo-fondo { fill: none; stroke: var(--superficie-3); stroke-width: 6; }
.anillo-valor { fill: none; stroke-width: 6; stroke-linecap: round; }
.a-azul .anillo-valor { stroke: #1C7AD6; }
.a-naranja .anillo-valor { stroke: #F09000; }
.a-violeta .anillo-valor { stroke: #8B5CF6; }
.a-verde .anillo-valor { stroke: #16A34A; }
.a-rojo .anillo-valor { stroke: #DC2626; }
.cifra-naranja { border-color: color-mix(in srgb, #F09000 45%, var(--borde)); }

/* Leyenda */
.leyenda .muestra.grupo-a1 { stroke: var(--grupo-a1); }
.leyenda .muestra.grupo-a2 { stroke: var(--grupo-a2); }
.leyenda .muestra.grupo-radial { stroke: var(--grupo-radial); }
.leyenda .muestra.grupo-ramal { stroke: var(--grupo-ramal); }
.leyenda .muestra.lev-sin { stroke: var(--texto-2); stroke-dasharray: 6 4; }
.leyenda .muestra.lev-en { stroke: var(--lev-en); stroke-width: 5; filter: drop-shadow(0 0 3px var(--lev-en)); }
.leyenda .muestra.lev-ok { stroke: var(--texto-2); }

@media print {
  body { background: #FFFFFF; padding-left: 0 !important; }
}