/* ═══════════════════════════════════════════════════════════════
   Esquema interactivo · lámina 3 hecha navegable
   Colores y nodos siguen el poster; el cromo (barra, tablero, hoja)
   y la propia lámina respetan el tema claro / oscuro.
   ═══════════════════════════════════════════════════════════════ */

body.esquema-page{ overflow:hidden; }
.barra{
  background:#fff;
  border-top:4px solid #08304D;
  box-shadow: 0 8px 32px -14px rgba(20,40,70,.18);
}
[data-tema="oscuro"] .barra{
  background:linear-gradient(180deg, rgba(8,17,27,.97) 0%, rgba(8,17,27,.88) 100%);
  box-shadow:0 8px 32px -14px rgba(0,0,0,.9);
}

[data-embed]{ --barra-h:58px; }
[data-embed] .barra{ padding-inline:12px; gap:10px; }
[data-embed] .barra .marca-txt{ display:none; }
[data-embed] .esquema-tools{ margin-left:0; }
[data-embed] .acciones{ margin-left:auto; }

.lienzo-esquema{
  --lamina: #ffffff;
  --nodo-fill: #ffffff;
  --nodo-stroke: #111111;
  --rotulo: #111111;
  --rotulo-ramal: #9a9a9a;
  --eje-bosques: #98B826;
  --eje-colonos: #CC523D;
  --eje-lago: #EDC23F;
  --eje-glaciares: #1E4F78;
  --eje-mar: #9FC3E5;
  --eje-ramal: #D0D1D0;
  --eje-pale: #E8E8E8;
  --tip-bg: #ffffff;
  --tip-fg: #111111;
  --tip-muted: #5a5a5a;
  position:fixed; top:var(--barra-h); left:0; right:0; bottom:0;
  overflow:auto;
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(86,196,239,.06), transparent 70%),
    var(--fondo);
  scroll-behavior:smooth;
  transition: left 280ms ease, right 280ms ease, bottom 280ms ease;
}
[data-tema="oscuro"] .lienzo-esquema{
  --lamina: #0e1620;
  --nodo-fill: #0e1620;
  --nodo-stroke: #e8eef4;
  --rotulo: #f2f5f8;
  --rotulo-ramal: #8b97a4;
  --eje-bosques: #B4D63F;
  --eje-colonos: #E2705E;
  --eje-lago: #F5D262;
  --eje-glaciares: #6D9DC9;
  --eje-mar: #9FC3E5;
  --eje-ramal: #4a5560;
  --eje-pale: #2a3340;
  --tip-bg: #141c26;
  --tip-fg: #f2f5f8;
  --tip-muted: #9db3c8;
}

.diagrama{
  padding:28px 28px 72px;
  min-width:min-content;
  display:flex; justify-content:center;
}

@media (min-width:1180px){
  body.con-tablero .lienzo-esquema{ left:308px; }
}
@media (min-width:901px){
  body.con-hoja .lienzo-esquema{ right: var(--ficha-w); }
}

/* ── Lámina ── */
.diagrama svg.lamina{
  display:block;
  background:var(--lamina);
  border-radius:2px;
  box-shadow:
    0 0 0 1px rgba(20,40,70,.06),
    0 24px 64px -28px rgba(12,24,40,.45);
  fill:none; stroke:none; stroke-width:0;
  height:auto; max-width:none;
  user-select:none;
}
[data-tema="oscuro"] .diagrama svg.lamina{
  box-shadow: 0 0 0 1px rgba(140,190,235,.08), 0 24px 64px -28px rgba(0,0,0,.65);
}
.diagrama svg.lamina *{ vector-effect:none; }
.diagrama svg.lamina.compacta{
  width:100% !important;
  max-width:480px;
  background:transparent;
  box-shadow:none;
}

/* ── Eje y ramales ── */
.eje{
  fill:none; stroke-width:20; stroke-linecap:butt; stroke-linejoin:miter;
}
.compacta .eje{ stroke-width:14; }
.eje-bosques{ stroke:var(--eje-bosques); }
.eje-colonos{ stroke:var(--eje-colonos); }
.eje-lago{ stroke:var(--eje-lago); }
.eje-glaciares{ stroke:var(--eje-glaciares); }
.eje-mar{ stroke:var(--eje-mar); }
.eje-ramal{ stroke:var(--eje-ramal); stroke-width:20; fill:none; stroke-linecap:butt; }
.eje-pale{ stroke:var(--eje-pale); stroke-width:20; fill:none; stroke-linecap:butt; }
.eje-titulo{ stroke:var(--eje-bosques); stroke-width:14; fill:none; stroke-linecap:butt; }

.seg-halo{
  fill:none; stroke-width:32; stroke-linecap:round; opacity:.22;
  animation:respirar 2.6s ease-in-out infinite;
}
.compacta .seg-halo{ stroke-width:22; }
.seg-hit{
  fill:none; stroke:#000; stroke-opacity:0; stroke-width:44;
  stroke-linecap:round; cursor:pointer;
}
.compacta .seg-hit{ stroke-width:36; }
.seg:hover .eje{ filter:brightness(1.12); }
.seg.sel .eje{ filter:brightness(1.2); }
.seg:focus{ outline:none; }
.seg:focus-visible .eje{ filter:brightness(1.2) drop-shadow(0 0 9px var(--hielo)); }
.seg.apagado{ opacity:.14; pointer-events:none; }
.seg.apagado .seg-halo{ animation:none; opacity:.04; }

@keyframes respirar{ 0%,100%{ opacity:.14; } 50%{ opacity:.36; } }

/* ── Nodos ── */
.nodo{
  fill:var(--nodo-fill); stroke:var(--nodo-stroke); stroke-width:5.5; cursor:pointer;
}
.compacta .nodo{ stroke-width:4.2; }
.nodo-cruz{
  stroke:var(--nodo-stroke); stroke-width:3.2; stroke-linecap:square; fill:none;
  pointer-events:none;
}
.est{ cursor:pointer; }
.est:focus{ outline:none; }
.est:hover .nodo{ stroke-width:7; }
.est:focus-visible .nodo{ stroke:var(--hielo); stroke-width:8; }
.est.sel .nodo{ stroke-width:7.5; }
.est-nom{
  fill:var(--rotulo); stroke:none;
  font:700 28px var(--tipo); letter-spacing:-.01em;
  pointer-events:none;
}
.compacta .est-nom{ font-size:16px; font-weight:650; }
.est-nom.wrap{ font-size:26px; }
.est-sub{
  fill:var(--rotulo-ramal); stroke:none;
  font:600 12px var(--tipo);
  pointer-events:none;
}
.ramal-txt{
  fill:var(--rotulo-ramal); stroke:none;
  font:700 22px var(--tipo);
  pointer-events:none;
}
.ramal-txt .ramal-destacado{
  fill:#c90000;
  font-weight:800;
}
/* El bloque de título dispone de 717 px entre el ramal norte y el borde de la
   lámina: por encima de este cuerpo el texto se sale del viewBox. */
.titulo-lamina{
  fill:var(--rotulo); stroke:none;
  font:700 32px var(--tipo); letter-spacing:.01em;
}
.subtitulo-lamina{
  fill:var(--rotulo); stroke:none;
  font:600 19px var(--tipo);
}
.titulo-rule{ stroke:var(--nodo-stroke); stroke-width:14; fill:none; stroke-linecap:butt; }

.icono-avion{ stroke:none; }
.avion-disco{ fill:var(--eje-glaciares); stroke:var(--lamina); stroke-width:3; }
.avion-glifo{ fill:#ffffff; stroke:none; }
.icono-paso{ fill:none; stroke:var(--rotulo-ramal); stroke-width:5; stroke-linecap:round; }
.icono-paso.destacado{ stroke:#c90000; stroke-width:6; }

/* ── Semáforo de obras ── */
.marca-obra{ pointer-events:none; }
.semaforo-caja{
  fill:var(--nodo-fill); stroke:var(--nodo-stroke); stroke-width:2.2;
}
.luz{ fill:#2c3338; }
.luz.roja.on{ fill:#ff3d5a; }
.luz.ambar.on{ fill:#ffb300; }
.luz.verde{ fill:#1c3328; }

@media (prefers-reduced-motion: reduce){
  .seg-halo{ animation:none; opacity:.28; }
  .lienzo-esquema{ scroll-behavior:auto; }
}

/* ── Tooltip ── */
.tip-seg{
  position:fixed; z-index:1250; pointer-events:none;
  min-width:220px; max-width:min(300px, calc(100vw - 24px));
  padding:12px 14px 13px;
  background:var(--tip-bg, #fff); color:var(--tip-fg, #111);
  border:1px solid var(--borde);
  border-radius:12px;
  box-shadow:var(--sombra);
  opacity:0; transform:translateY(4px);
  transition:opacity 140ms ease, transform 140ms ease;
}
.lienzo-esquema ~ .tip-seg,
.tip-seg{
  background: #fff; color:#111;
}
[data-tema="oscuro"] .tip-seg{
  background:#141c26; color:#f2f5f8;
}
.tip-seg.on{ opacity:1; transform:none; }
.tip-seg .tip-k{
  font-size:.62rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--texto-3); margin-bottom:4px;
}
.tip-seg b{ display:block; font-size:.92rem; font-weight:700; line-height:1.25; }
.tip-seg .tip-m{ margin-top:6px; font-size:.74rem; color:var(--texto-2); line-height:1.4; }
.tip-seg .tip-obra{
  margin-top:8px; font-size:.72rem; font-weight:600;
  color:#b88600;
}
.tip-seg .tip-obra.corte{ color:#c0122a; }
[data-tema="oscuro"] .tip-seg .tip-obra{ color:#ffb300; }
[data-tema="oscuro"] .tip-seg .tip-obra.corte{ color:#ff6b7f; }

/* ── Barra de herramientas ── */
.esquema-tools{
  display:flex; align-items:center; gap:8px; margin-left:auto;
}
.esquema-tools select{
  max-width:230px; padding:8px 11px; font-size:.76rem; font-family:inherit;
  background:var(--vidrio); border:1px solid var(--borde); border-radius:var(--r-m);
  color:var(--texto); outline:none; cursor:pointer; transition:var(--tr);
}
.esquema-tools select:hover{ border-color:var(--borde-fuerte); }
.esquema-tools select:focus{ border-color:var(--hielo-b); box-shadow:0 0 0 3px var(--hielo-f); }
.esquema-tools select option{ background:var(--panel-solido); color:var(--texto); }
.zoom-btns{ display:flex; gap:4px; }
.zoom-btns .icono-btn{ width:34px; height:34px; }

/* ── Tablero ── */
.tablero{
  position:fixed; top:calc(var(--barra-h) + 12px); left:14px; z-index:1100;
  width:280px; max-height:calc(100vh - var(--barra-h) - 28px); overflow-y:auto;
  padding:14px 15px 16px; border-radius:var(--r-l);
  background:var(--panel); backdrop-filter:blur(22px) saturate(160%);
  border:1px solid var(--borde); box-shadow:var(--sombra);
  transition:transform var(--tr), opacity var(--tr), visibility var(--tr);
}
.tablero.oculto{ transform:translateX(calc(-100% - 20px)); opacity:0; visibility:hidden; }
.tablero-cab{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.tablero-cab h2{ margin:0; font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--texto-3); }
.tablero-tabs{ display:none; }
.tablero-vista{ display:block; }

.ruta-item{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:8px 10px; border-radius:var(--r-s); text-align:left;
  font-size:.76rem; color:var(--texto-2); transition:var(--tr);
  border:1px solid transparent;
}
.ruta-item:hover{ background:rgba(255,255,255,.05); color:var(--texto); }
[data-tema="claro"] .ruta-item:hover{ background:rgba(20,40,70,.05); }
.ruta-item.on{ border-color:var(--c-b); background:var(--c-f); color:var(--texto); }
.ruta-item .traza{ width:22px; height:6px; border-radius:99px; flex:none; background:var(--c-b); }
.ruta-item .n{ margin-left:auto; font-family:var(--mono); font-size:.68rem; color:var(--texto-3); }

.ley-fila{ display:flex; flex-direction:column; gap:8px; }
.ley-item{
  display:flex; align-items:center; gap:10px;
  font-size:.72rem; color:var(--texto-2);
}
.ley-sim{
  width:22px; height:22px; flex:none;
  display:grid; place-items:center;
}
.ley-sim svg{ width:22px; height:22px; display:block; fill:none; stroke:none; }
.ley-sim .nodo{ cursor:default; stroke-width:4; fill:var(--panel-solido); stroke:var(--texto); }
/* Los tokens --eje-* viven en .lienzo-esquema, fuera del alcance de la leyenda. */
.ley-sim .avion-disco{ fill:#1E4F78; stroke:var(--panel-solido); stroke-width:2; }
.ley-sim .avion-glifo{ fill:#ffffff; }
[data-tema="oscuro"] .ley-sim .avion-disco{ fill:#6D9DC9; }
.ley-sim .nodo-cruz{ stroke:var(--texto); stroke-width:2.4; fill:none; }
.ley-sim .trazo{ stroke-width:5; stroke-linecap:round; }
.ley-sim .semaforo-caja{ fill:var(--panel-solido); stroke:var(--texto); stroke-width:1.6; }

/* ── Hoja: en escritorio no tapa el esquema ── */
.esquema-page .velo{
  pointer-events:none;
}
.esquema-page .velo.on{
  background:transparent;
  backdrop-filter:none;
}
@media (min-width:901px){
  .esquema-page .velo{ display:none; }
}

/* ── Hoja de detalle ── */
.tira-ruta{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.7rem; font-weight:600; letter-spacing:.02em;
  padding:4px 11px 4px 8px; border-radius:999px;
  background:var(--c-f); border:1px solid var(--c-b); color:var(--texto);
}
.tira-ruta::before{ content:''; width:16px; height:5px; border-radius:99px; background:var(--c-b); }

.oper{ display:flex; flex-wrap:wrap; gap:7px; }
.oper-item{
  display:inline-flex; align-items:center; gap:7px; padding:6px 11px;
  border-radius:var(--r-s); font-size:.74rem; color:var(--texto-2);
  background:rgba(86,196,239,.08); border:1px solid rgba(86,196,239,.22);
}
.oper-item b{ color:var(--texto); font-weight:600; }
.oper-item .tec{ font-family:var(--mono); font-size:.67rem; color:var(--hielo); }

.lista-atr{ display:flex; flex-direction:column; gap:6px; }
.atr{
  display:flex; align-items:flex-start; gap:10px; padding:9px 12px;
  border-radius:var(--r-m); border:1px solid var(--borde);
  background:rgba(255,255,255,.028); transition:var(--tr);
}
[data-tema="claro"] .atr{ background:rgba(20,40,70,.035); }
.atr:hover{ border-color:var(--borde-fuerte); }
.atr-enlace{
  color:var(--texto); text-decoration:none; border-bottom:1px solid var(--borde);
}
.atr-enlace:hover{
  color:var(--texto); border-bottom-color:var(--hielo); background:var(--hielo-f);
}
.atr-enlace:focus-visible{
  outline:3px solid var(--hielo-b); outline-offset:2px; border-color:var(--hielo);
}
.atr-jer{
  width:7px; height:7px; border-radius:50%; flex:none; margin-top:6px;
  background:var(--c-b, var(--hielo)); box-shadow:0 0 0 3px var(--c-f, var(--hielo-f));
}
.atr-t{ min-width:0; flex:1; }
.atr-n{ display:block; font-size:.78rem; font-weight:500; line-height:1.3; }
.atr-m{ display:block; font-size:.67rem; color:var(--texto-3); margin-top:3px; line-height:1.4; }
.atr-d{ font-family:var(--mono); font-size:.67rem; color:var(--texto-3); flex:none; margin-top:2px; }

.plegable > summary{
  cursor:pointer; list-style:none; font-size:.72rem; color:var(--texto-3);
  padding:7px 0; display:flex; align-items:center; gap:7px;
}
.plegable > summary::-webkit-details-marker{ display:none; }
.plegable > summary::after{
  content:''; width:7px; height:7px; margin-left:auto;
  border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px); transition:transform var(--tr);
}
.plegable[open] > summary::after{ transform:rotate(-135deg) translate(-2px,-2px); }
.plegable > summary:hover{ color:var(--texto); }

@media (max-width:900px){
  .esquema-page .marca-org{ display:none; }
  .tablero{
    top:auto; bottom:0; left:0; right:0; width:100%; z-index:1280;
    max-height:min(46vh, 360px);
    max-height:min(46dvh, 360px); border-radius:var(--r-l) var(--r-l) 0 0;
    border-left:none; border-right:none; border-bottom:none;
    padding:10px 12px calc(12px + env(safe-area-inset-bottom));
  }
  .tablero.oculto{ transform:translateY(100%); }
  .tablero-cab{ margin-bottom:7px; }
  .tablero-tabs{
    display:grid; grid-template-columns:1fr 1fr; gap:4px;
    padding:3px; margin-bottom:8px; border-radius:11px;
    background:color-mix(in srgb, var(--panel-solido) 72%, transparent);
    border:1px solid var(--borde);
  }
  .tablero-tabs button{
    min-height:34px; padding:6px 10px; border-radius:8px;
    font-size:.72rem; font-weight:600; color:var(--texto-3);
  }
  .tablero-tabs button.on{
    color:var(--texto); background:var(--hielo-f);
    box-shadow:inset 0 0 0 1px var(--hielo-b);
  }
  .tablero-vista{ display:none; }
  .tablero-vista.on{ display:block; }
  .tablero .bloque{ margin-top:8px; padding:9px 10px; }
  .tablero .bloque > h4{ margin-bottom:7px; }
  #lista-rutas{
    display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:4px;
  }
  .ruta-item{ min-height:38px; padding:6px 8px; gap:7px; line-height:1.15; }
  .ruta-item .traza{ width:16px; }
  .ruta-item .n{ display:none; }
  .ley-fila{
    display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:6px 10px;
  }
  .ley-item{ gap:7px; font-size:.68rem; line-height:1.2; }
  .ley-sim{ width:19px; height:19px; }
  .ley-sim svg{ width:19px; height:19px; }
  .tablero .chip{ padding:6px 9px; font-size:.68rem; }
  .esquema-tools select{ max-width:120px; }
  .diagrama{ padding:12px 12px 28px; }
  body.con-hoja .lienzo-esquema{ bottom: 50vh; }
  .esquema-page .hoja{
    height:50vh; max-height:50vh; z-index:1260;
  }
  .esquema-page .velo.on{
    display:block;
    background:transparent;
    pointer-events:none;
  }
}
@media (max-width:900px){
  [data-embed]{ --barra-h:58px; }
  [data-embed] .esquema-tools select{ max-width:min(42vw, 180px); }
}
@media (max-width:900px){
  .zoom-btns{ display:none; }
}
@media (max-width:560px){
  .esquema-tools select{ display:none; }
  .hoja-cuerpo .cifras, .tablero .cifras{ grid-template-columns:repeat(2, 1fr); }
}

/* ── Identidad institucional ── */
.gob-logo{
  flex:none; width:auto; height:30px; padding:8px 11px;
  background:#08304D; border-radius:4px; box-sizing:content-box;
}
[data-tema="oscuro"] .gob-logo{ background:rgba(255,255,255,.1); }
.marca-org{ color:#08304D; }
[data-tema="oscuro"] .marca-org{ color:#A6E9F7; }
/* Sin navegación cruzada en la barra el título dispone de ancho: se deja
   ajustar en dos líneas en vez de recortarse con puntos suspensivos. */
.esquema-page .marca-txt h1{
  white-space:normal; overflow:hidden; text-overflow:clip;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
}

.idioma{
  min-width:55px; height:36px; padding:0 7px;
  border:1px solid var(--borde); border-radius:9px;
  background:var(--vidrio); color:var(--texto); font-weight:700;
}
.descarga{ display:grid; text-decoration:none; border-bottom:1px solid var(--borde); }
.descarga-completa{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  padding:6px 12px;
  color:#08304D;
  background:#A6E9F7;
  border:1px solid #7ad4e8;
  border-radius:10px;
  text-decoration:none;
  line-height:1.15;
}
.descarga-completa svg{ width:18px; height:18px; flex:none; }
.descarga-completa span{ display:flex; flex-direction:column; }
.descarga-completa b{ font-size:.74rem; }
.descarga-completa small{ color:#0d4266; font-size:.6rem; font-weight:650; }

.cta-planificador{
  position:fixed; z-index:1190; right:22px; bottom:22px;
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 17px; border:0; border-radius:999px;
  background:#08304D; color:#fff; font-size:.82rem; font-weight:700;
  box-shadow:0 10px 30px rgba(8,48,77,.28);
}
.cta-planificador:hover{ color:#fff; background:#0c456d; transform:translateY(-1px); }
.cta-planificador svg{ width:18px; height:18px; }
body.con-hoja .cta-planificador{ right:calc(var(--ficha-w) + 22px); }

@media (max-width:1180px){
  .barra{ gap:10px; padding-inline:12px; }
  .marca-txt p{ display:none; }
  .esquema-tools select{ max-width:150px; }
}
@media (max-width:1000px){
  .marca{ flex:1 1 auto; min-width:0; }
  .esquema-tools{ margin-left:0; }
}
@media (max-width:900px){
  :root{ --barra-h:66px; }
  .gob-logo{ height:22px; padding:6px 8px; }
  .esquema-tools{ display:none; }
  .acciones{ margin-left:auto; }
  body.con-hoja .cta-planificador{ right:14px; bottom:calc(50vh + 22px); }
  .cta-planificador{ right:14px; bottom:22px; padding:11px 14px; }
}
@media (max-width:520px){
  .marca-txt{ border-left:0; padding-left:0; }
  .marca-org{ display:none; }
  /* En teléfono el ancho no alcanza para el título completo: la marca
     institucional identifica el producto y el único h1 se mantiene en el
     árbol de accesibilidad en vez de recortarse. */
  .esquema-page .marca-txt h1{
    position:absolute; width:1px; height:1px; margin:-1px;
    padding:0; border:0; clip-path:inset(50%); overflow:hidden;
  }
  .descarga-completa small{ display:none; }
  .descarga-completa b{ font-size:.68rem; }
}