/* ═══════════════════════════════════════════════════════════════
   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; }

[data-embed]{ --barra-h:58px; }
[data-embed] .barra{ padding-inline:12px; gap:10px; }
[data-embed] .barra .marca{ 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: #538235;
  --eje-colonos: #FF0000;
  --eje-lago: #FFC000;
  --eje-glaciares: #2D75B6;
  --eje-mar: #9DC3E6;
  --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: #70AD47;
  --eje-colonos: #FF4D4D;
  --eje-lago: #FFC000;
  --eje-glaciares: #5B9BD5;
  --eje-mar: #7EB6D9;
  --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;
}
.titulo-lamina{
  fill:var(--rotulo); stroke:none;
  font:700 42px var(--tipo); letter-spacing:.01em;
}
.subtitulo-lamina{
  fill:var(--rotulo); stroke:none;
  font:700 24px var(--tipo);
}
.titulo-rule{ stroke:var(--nodo-stroke); stroke-width:14; fill:none; stroke-linecap:butt; }

.icono-avion{ fill:var(--eje-glaciares); 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); }
.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; }
  .cifras-tablero{ display:none; }
  .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); }
}