/* Metro de datos: oscuro en 3D, como el sitio, y claro en el plano. */
.metro {
  color-scheme: dark;
  --papel: rgb(3 9 15 / 0.92); --hoja: #0F2B41; --tinta: #EAF4FA; --suave: #A9C0D0; --linea: #2B5674; --acento: #7DD6FF;
  --atencion: #FFBD4D; --atencion-fondo: #3A2A0C; --pulsado: #1C5887; --on-fondo: #7DD6FF; --on-texto: #06202F;
}
.metro .nota-fin { margin: 0; }
.metro [hidden] { display: none !important; }
.metro { background: var(--papel); color: var(--tinta); font: 15px/1.5 var(--cuerpo); padding: 18px 20px 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; border: 1px solid var(--linea); }
.metro * { box-sizing: border-box; }
.metro .tope { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 8px 24px; }
.metro h3, .metro h4 { font-family: var(--titulo); font-weight: 800; margin: 0; text-wrap: balance; }
.metro h3 { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.15; }
.metro h4 { font-size: 16px; line-height: 1.3; }
.metro .sub { color: var(--suave); font-size: 14px; }
.metro .sello { display: inline-block; border: 1px solid var(--atencion); color: var(--atencion); background: var(--atencion-fondo); padding: 0 7px; font-size: 13px; font-weight: 600; }
.metro .cifras { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.metro .cifra { background: var(--hoja); border: 1px solid var(--linea); border-left: 3px solid var(--acento); padding: 7px 12px; }
.metro .cifra b { display: block; font: 800 21px/1.2 var(--titulo); font-variant-numeric: tabular-nums; }
.metro .cifra span { color: var(--suave); font-size: 13px; }
.metro .cifra.alerta { border-left-color: var(--atencion); }
.metro .cifra.alerta b { color: var(--atencion); }
.metro .mandos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.metro button { font: 600 13px var(--cuerpo); color: var(--tinta); background: var(--hoja); border: 1px solid var(--linea); padding: 6px 10px; cursor: pointer; min-height: 34px; }
.metro button:hover { border-color: var(--acento); }
.metro button[aria-pressed="true"] { background: var(--on-fondo); color: var(--on-texto); border-color: var(--on-fondo); }
.metro :focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.metro .separa { width: 1px; height: 22px; background: var(--linea); margin: 0 4px; }
.metro .sala { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.metro .plano { background: #fff; border: 1px solid var(--linea); overflow-x: auto; }
.metro .escena { position: sticky; top: calc(var(--barra) + 12px); height: clamp(560px, 78vh, 820px); background: #05111A; border: 1px solid #16364C; overflow: hidden; }
.metro .escena canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; }
.metro .escena canvas.agarrando { cursor: grabbing; }
.metro[data-modo="3d"] .plano { display: none; }
.metro[data-modo="plano"] .escena { display: none; }
.metro .sobre { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; }
.metro .sobre button { background: #0F2B41; color: #EAF4FA; border-color: #2B5674; }
.metro .sobre button.principal { background: #7DD6FF; color: #06202F; border-color: #7DD6FF; }
.metro .ayuda { position: absolute; left: 12px; top: 12px; color: #A9C0D0; font-size: 13px; pointer-events: none; max-width: 52%; }
.metro .relato { position: absolute; left: 12px; right: 12px; bottom: 12px; background: rgba(15, 43, 65, .94); color: #EAF4FA; border-left: 3px solid #7DD6FF; padding: 8px 12px; font-size: 15px; }
.metro .relato b { display: block; font-family: var(--titulo); }
.metro .globo { position: absolute; pointer-events: none; background: #EAF4FA; color: #06202F; font-size: 13px; font-weight: 600; padding: 3px 8px; border-radius: 4px; transform: translate(10px, -130%); white-space: nowrap; }
.metro .flujo { fill: none; stroke: rgba(255, 255, 255, .95); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1 26; animation: correr 1.1s linear infinite; }
@keyframes correr { to { stroke-dashoffset: -27; } }
.metro .plano svg { display: block; width: 100%; min-width: 860px; height: auto; font-family: var(--cuerpo); }
.metro .lado { display: grid; gap: 12px; min-width: 0; }
.metro .caja { background: var(--hoja); border: 1px solid var(--linea); padding: 12px 14px; display: grid; gap: 7px; min-width: 0; }
.metro .caja p { margin: 0; font-size: 14px; }
.metro .ley-area { color: var(--suave); font-size: 12px; font-weight: 700; margin-top: 4px; }
.metro .leyenda { display: grid; gap: 3px; margin-top: 6px; }
.metro summary { cursor: pointer; font: 800 16px var(--titulo); }
.metro .cab-area, .metro .fila-area { display: grid; grid-template-columns: minmax(0, 1fr) 34px 66px; gap: 6px; align-items: center; }
.metro .cab-area { color: var(--suave); font-size: 12px; padding: 0 8px; }
.metro .cab-area span:nth-child(n+2), .metro .fila-area > span:nth-child(n+2) { text-align: right; }
.metro .fila-area { width: 100%; text-align: left; font-weight: 600; padding: 6px 8px; }
.metro .fila-area small { font-weight: 400; font-size: 12px; }
.metro .fila-area .cuenta { font-variant-numeric: tabular-nums; }
.metro .fila-area .marca-al { color: var(--atencion); font-variant-numeric: tabular-nums; }
.metro .fila-area[aria-pressed="true"] .marca-al { color: inherit; }
.metro .fila-area .marca-al.cero { color: var(--suave); }
.metro .leyenda button { display: flex; align-items: center; gap: 8px; text-align: left; font-weight: 400; border-color: transparent; background: transparent; padding: 3px 5px; }
.metro .leyenda button:hover { border-color: var(--linea); }
.metro .leyenda button[aria-pressed="true"] { background: var(--pulsado); color: var(--tinta); border-color: var(--acento); }
.metro .chapa { flex: none; display: inline-grid; place-items: center; width: 28px; height: 18px; border-radius: 9px; color: #fff; font-size: 11px; font-weight: 700; }
.metro .ficha dl { margin: 2px 0 0; display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 2px 8px; font-size: 14px; }
.metro .ficha dt { color: var(--suave); }
.metro .ficha dd { margin: 0; }
.metro .mt-aviso { background: var(--atencion-fondo); color: var(--atencion); padding: 6px 8px; font-size: 14px; }
.metro .mt-nota { color: var(--suave); font-size: 13px; }
.metro .linea-svg { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; transition: opacity .2s; }
.metro .linea-svg.linea-borde { stroke-width: 8; }
.metro .grupo { transition: opacity .2s; }
.metro .estacion { cursor: pointer; }
.metro .estacion:focus-visible rect { stroke: #0B5CAD; stroke-width: 3; }
.metro .plano :focus-visible { outline-color: #0B5CAD; }
.metro .rotulo { font-size: 13px; font-weight: 600; fill: #0F2B41; paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.metro .colt { font: 800 13px var(--titulo); fill: #4E6577; }
@media (prefers-reduced-motion: reduce) { .metro .linea-svg, .metro .grupo { transition: none; } .metro .flujo { animation: none; display: none; } }
@media (max-width: 1020px) { .metro .sala { grid-template-columns: minmax(0, 1fr); } .metro .escena { position: relative; top: 0; height: 72vw; min-height: 420px; } }
@media (max-width: 560px) {
  .metro { padding: 14px 12px 16px; }
  .metro #mt-mandos { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
  .metro #mt-mandos button { flex: none; }
  .metro .escena { height: 380px; min-height: 380px; }
  .metro .ayuda { top: auto; bottom: 10px; max-width: none; }
}
.metro .sala > div:first-child { align-self: stretch; }
@media (max-width: 800px) { .metro .cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); } }