:root{
 --bg:#050d15;--bg2:#081522;--panel:#091928;--panel2:#0d2031;--line:#1c3347;
 --text:#f4f8fb;--muted:#7f98ae;--orange:#ff6a00;--orange2:#ff9038;--mag:#bb167d;
 --green:#31db77;--yellow:#ffd14a;--red:#ff4d5e;--cyan:#59c8ff
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif}
body{background:radial-gradient(1200px 600px at 55% -10%,#16304a 0,#081522 35%,#050d15 75%)}
button,select,input{font:inherit}.shell{display:grid;grid-template-columns:180px minmax(0,1fr);min-height:100vh}
.sidebar{background:linear-gradient(180deg,#07121e,#050d15);border-right:1px solid #173047;padding:16px 13px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:20}
.brand{display:flex;gap:10px;align-items:center;padding:10px;border:1px solid #1d384e;background:#0b1b2a;border-radius:14px}
.brand-a{width:46px;height:46px;border-radius:13px;background:linear-gradient(145deg,#ff7a1a,#ff952e);display:grid;place-items:center;font-size:28px;font-weight:1000;box-shadow:0 0 28px #ff6a0033}.brand strong,.brand small{display:block}.brand strong{font-size:13px}.brand small{font-size:9px;color:var(--muted);margin-top:4px}
nav{margin-top:22px;display:grid;gap:7px}.nav{border:0;background:transparent;color:#a9bac8;padding:13px 12px;border-radius:10px;text-align:left;cursor:pointer}.nav span{display:inline-grid;width:24px}.nav:hover,.nav.active{color:#fff;background:linear-gradient(90deg,#c01883,#7d0e5a80);box-shadow:0 8px 20px #0004}
.side-status{margin-top:auto;border-top:1px solid #173047;padding:18px 3px 4px;display:flex;gap:10px;align-items:center}.side-status b,.side-status small{display:block}.side-status b{font-size:11px}.side-status small{font-size:8px;color:var(--muted);margin-top:4px;max-width:125px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pulse{width:9px;height:9px;border-radius:50%;background:var(--yellow);box-shadow:0 0 15px currentColor;animation:pulse 1.2s infinite}@keyframes pulse{50%{opacity:.35}}
.main{padding:0 18px 20px;min-width:0}.topbar{height:92px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #1b3348}.kicker{font-size:9px;color:#69bde9;letter-spacing:.14em}.topbar h1{margin:6px 0 0;font-size:23px}.topbar h1 em{font-style:normal;color:#fff}.topmeta{display:flex;align-items:center}.online,.meta{padding:8px 15px;border-left:1px solid #21394e}.online{border:1px solid #164a2e;background:#071e16;border-radius:10px;color:var(--green);font-weight:900;font-size:11px;margin-right:9px}.online i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:6px;box-shadow:0 0 9px #31db77}.meta small,.meta b{display:block}.meta small{font-size:7px;color:#6e8ba4}.meta b{font-size:11px;margin-top:4px}.meta.train b{font-size:13px}
.panel{background:linear-gradient(180deg,#0b1d2d 0,#081724 100%);border:1px solid #1c354b;border-radius:13px;box-shadow:0 18px 40px #0002}.hero{margin-top:14px;padding:16px}.hero-head{display:flex;align-items:center;justify-content:space-between;gap:14px}.line-head{min-height:72px;display:flex;align-items:center}.head-img{display:block;max-width:360px;max-height:72px;object-fit:contain}.head-fallback{display:none;align-items:center;gap:13px}.head-fallback>span{width:62px;height:62px;border-radius:16px;background:linear-gradient(140deg,#c51a84,#7d145e);display:grid;place-items:center;font-size:40px;font-weight:1000}.head-fallback b{display:block;font-size:20px}.controls{display:flex;gap:8px;align-items:end}.speed-control span{display:block;font-size:7px;color:var(--muted);margin:0 0 4px 4px}.speed-control select,.btn{height:38px;border-radius:9px;border:1px solid #29465f;background:#0b1c2b;color:#fff;padding:0 12px}.btn{cursor:pointer}.btn:hover{filter:brightness(1.12)}.btn.orange{background:linear-gradient(135deg,#ff6a00,#ff8526);border-color:#ff6a00;box-shadow:0 5px 18px #ff6a0028}
.route-wrap{overflow-x:auto;overflow-y:hidden;margin-top:4px}.route{position:relative;min-width:1120px;height:185px;display:flex;justify-content:space-between;padding:0 28px}.rail{position:absolute;left:54px;right:54px;top:72px;height:5px;background:#2c4154;border-radius:8px;box-shadow:inset 0 1px 0 #ffffff0f}.rail.done{right:auto;width:0;background:linear-gradient(90deg,#ff6a00,#ff9b49);box-shadow:0 0 18px #ff6a0055;transition:width .18s linear}.station{position:relative;width:78px;margin-top:53px;z-index:3;text-align:center}.iconbox{width:43px;height:43px;margin:0 auto;display:grid;place-items:center;position:relative}.iconbox i{position:absolute;width:16px;height:16px;border-radius:50%;background:#0b1b29;border:4px solid #d8e2eb;box-shadow:0 0 0 4px #22384c}.iconbox img{width:36px;height:36px;object-fit:contain;position:relative;z-index:2;filter:drop-shadow(0 4px 5px #0008)}.station.current .iconbox{transform:scale(1.12)}.station.current .iconbox:after{content:"";position:absolute;inset:-8px;border:2px solid var(--green);border-radius:50%;box-shadow:0 0 16px #31db7799;animation:ring 1.2s infinite}@keyframes ring{50%{transform:scale(1.12);opacity:.4}}.station.passed{opacity:.86}.station b{display:block;margin-top:17px;font-size:8px;line-height:1.15;transform:rotate(-63deg);white-space:nowrap;color:#e6edf3}.train-marker{position:absolute;top:21px;left:54px;width:105px;z-index:7;transform:translateX(-50%);transition:left .18s linear;filter:drop-shadow(0 10px 8px #0009)}.train-marker svg{width:100%;display:block}.train-tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-size:8px;font-weight:900;padding:2px 6px;border:1px solid #37526b;background:#0d2132;border-radius:5px}
.journey-cards{display:grid;grid-template-columns:.9fr 1.75fr 1.2fr 2fr;border-top:1px solid #1c354b}.journey-cards>div{padding:12px 14px;border-right:1px solid #1c354b;min-width:0}.journey-cards>div:last-child{border-right:0}.journey-cards small,.journey-cards strong,.journey-cards span{display:block}.journey-cards small{font-size:7px;color:#66859e}.journey-cards strong{font-size:11px;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.journey-cards span{font-size:8px;color:#7f98ae;margin-top:5px}.progress-card>div:first-child{display:flex;justify-content:space-between}.progress-card strong{color:var(--orange);font-size:12px}.progress{height:9px;border-radius:10px;background:#243645;margin-top:11px;overflow:hidden}.progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#ff6a00,#ff9746);box-shadow:0 0 12px #ff6a0066;transition:width .2s linear}
.timeline-row{display:grid;grid-template-columns:34px 1fr 34px 135px;gap:8px;align-items:center;border-top:1px solid #1c354b;padding-top:11px;margin-top:2px}.timeline-row button{height:30px;border:1px solid #29445c;background:#0b1b2a;color:#fff;border-radius:7px;cursor:pointer}.timeline-row input{accent-color:var(--orange);width:100%}.row-counter span,.row-counter b{display:block;text-align:right}.row-counter span{font-size:6px;color:#607e97}.row-counter b{font-size:9px;margin-top:2px}
.grid{display:grid;grid-template-columns:1.05fr 1.58fr 1.12fr;gap:12px;margin-top:12px}.grid>.panel{padding:14px;min-height:260px}.panel-title{display:flex;align-items:center;justify-content:space-between;font-size:9px;font-weight:900;letter-spacing:.03em}.panel-title small{font-size:7px;color:#718da5;font-weight:600}.live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px #31db77}.gauge{height:175px;position:relative}.gauge svg{width:100%;height:100%}.g-bg,.g-value{fill:none;stroke-width:15;stroke-linecap:round}.g-bg{stroke:#33495e}.g-value{stroke:url(#none);stroke:var(--orange);stroke-dasharray:299;stroke-dashoffset:299;transition:stroke-dashoffset .16s linear}.g-center{position:absolute;left:0;right:0;top:75px;text-align:center}.g-center b{display:block;font-size:38px}.g-center span{font-size:9px;color:#879db0}.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.metric-grid>div{border:1px solid #1e384e;background:#091a28;border-radius:8px;padding:8px}.metric-grid small,.metric-grid b{display:block}.metric-grid small{font-size:6px;color:#63829a}.metric-grid b{font-size:10px;margin-top:5px}.legend{font-size:7px;color:#8299ac;font-weight:600}.legend i{display:inline-block;width:18px;height:2px;margin:0 4px 2px 8px}.legend .or{background:var(--orange)}.legend .rd{background:var(--red)}.legend .yl{background:var(--yellow)}#chart{width:100%;height:285px;margin-top:3px}.chart-grid{stroke:#243a4d;stroke-width:1}.chart-label{fill:#678299;font-size:8px}.chart-speed{fill:none;stroke:var(--orange);stroke-width:3}.chart-max{fill:none;stroke:var(--red);stroke-width:1.4;stroke-dasharray:7 5}.chart-but{fill:none;stroke:var(--yellow);stroke-width:1.4;stroke-dasharray:5 4}
.train-summary{display:grid;grid-template-columns:1.15fr .95fr;gap:10px;margin-top:12px}.kv p{display:flex;justify-content:space-between;gap:7px;margin:0;padding:7px 0;border-bottom:1px dashed #21394e}.kv span{font-size:7px;color:#6b8aa1}.kv b{font-size:8px;text-align:right;max-width:145px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.train-art{text-align:center;align-self:center}.train-art svg{width:100%;max-width:180px}.train-art b{font-size:8px;color:#adc0d0}
.signals-panel{grid-column:1/2}.events-panel{grid-column:2/3}.ai-panel{grid-column:3/4}.signals{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:13px}.signal{display:flex;align-items:center;gap:7px;padding:5px 6px;border-radius:7px;background:#091a28;border:1px solid #162f43;font-size:8px}.signal i{width:11px;height:11px;border-radius:50%;background:#485c6d;box-shadow:inset 0 0 0 2px #ffffff10}.signal.on i,.sig.on{background:var(--green);box-shadow:0 0 9px #31db7788}.signal b{margin-left:auto;color:#728da3}.sig{display:inline-block;width:7px;height:7px;border-radius:50%;background:#4c5d6a;margin:0 3px 0 8px}
.events{display:grid;gap:5px;margin-top:11px;max-height:225px;overflow:auto}.event{display:grid;grid-template-columns:82px 1fr 90px;gap:7px;padding:7px;border:1px solid #193348;background:#091925;border-radius:7px;font-size:8px}.event time{color:#53d9ff}.event b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.event span{text-align:right;color:#94a8b9}.event.alert time{color:#ff9f63}.event.alert{border-color:#5b2a24}
.risk{display:flex;gap:12px;align-items:center;padding:13px;border:1px solid #1c3b4a;border-radius:10px;margin-top:13px;background:#0a1d29}.brain{font-size:33px;color:var(--cyan)}.risk small,.risk b,.risk span{display:block}.risk small{font-size:7px;color:#6c8ba2}.risk b{font-size:19px;margin-top:2px}.risk span{font-size:8px;color:#899faf;margin-top:3px}.risk.low b{color:var(--green)}.risk.medium b{color:var(--yellow)}.risk.high b{color:var(--red)}.ai-metrics{margin-top:9px}.ai-metrics>div{display:flex;justify-content:space-between;border-bottom:1px dashed #1e374a;padding:7px 1px;font-size:8px}.confidence{height:6px;background:#203646;border-radius:8px;overflow:hidden;margin-top:11px}.confidence span{display:block;height:100%;width:90%;background:var(--green);transition:.2s}.ai-panel p{font-size:8px;color:#7994aa;line-height:1.5}
footer{display:grid;grid-template-columns:1fr 1.6fr 1.4fr 1fr;margin-top:12px;border:1px solid #1c354b;background:#071521;border-radius:10px;overflow:hidden}footer>div{padding:10px 13px;border-right:1px solid #1c354b}footer>div:last-child{border-right:0}footer span,footer b{display:block}footer span{font-size:6px;color:#648198}footer b{font-size:8px;margin-top:4px}.foot-ok{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block!important;float:left;margin:6px 7px 0 0}
.loading{position:fixed;inset:0;background:#050d15ee;backdrop-filter:blur(7px);z-index:100;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:9px}.loading.hide{opacity:0;pointer-events:none;transition:.35s}.loading b{font-size:16px}.loading span{font-size:10px;color:#7894aa}.loader{width:42px;height:42px;border:4px solid #1d3548;border-top-color:var(--orange);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:1180px){.shell{grid-template-columns:76px 1fr}.brand>div:last-child,.nav:not(.active){font-size:0}.brand{justify-content:center}.side-status div:last-child{display:none}.grid{grid-template-columns:1fr 1fr}.train-panel,.ai-panel,.events-panel,.signals-panel{grid-column:auto}.journey-cards{grid-template-columns:1fr 1.5fr 1fr 1.5fr}}
@media(max-width:800px){.shell{display:block}.sidebar{display:none}.main{padding:0 10px 14px}.topbar{height:auto;padding:13px 0;align-items:flex-start}.topmeta{flex-wrap:wrap;justify-content:flex-end}.meta{padding:6px 8px}.hero-head{align-items:flex-start}.head-img{max-width:245px}.controls{flex-wrap:wrap;justify-content:flex-end}.grid{grid-template-columns:1fr}.signals-panel,.events-panel,.ai-panel{grid-column:1}.journey-cards{grid-template-columns:1fr 1fr}.timeline-row{grid-template-columns:30px 1fr 30px}.row-counter{grid-column:1/4}.route-wrap{margin-left:-10px;margin-right:-10px}}


/* ===== Estado del tren: lectura rápida para operador ===== */
.train-state{
  display:grid;
  grid-template-columns:64px 1.5fr 1fr 1.25fr;
  gap:0;
  margin-top:10px;
  border:1px solid #214159;
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(90deg,#0d2130,#0a1926);
  box-shadow:inset 4px 0 0 var(--cyan);
}
.train-state>div{padding:13px 15px;border-right:1px solid #20394d}
.train-state>div:last-child{border-right:0}
.state-icon{display:grid;place-items:center;font-size:31px!important;padding:0!important}
.train-state small,.train-state strong,.train-state span{display:block}
.train-state small{font-size:7px;color:#7390a8;letter-spacing:.08em}
.train-state strong{font-size:15px;margin-top:4px}
.train-state span{font-size:9px;color:#9bb0c1;margin-top:4px;line-height:1.35}
.train-state.moving{box-shadow:inset 4px 0 0 var(--cyan)}
.train-state.moving .state-icon,.train-state.moving #stateTitle{color:var(--cyan)}
.train-state.at-station{box-shadow:inset 4px 0 0 var(--green);background:linear-gradient(90deg,#0b261d,#0a1926)}
.train-state.at-station .state-icon,.train-state.at-station #stateTitle{color:var(--green)}
.train-state.stopped{box-shadow:inset 4px 0 0 var(--yellow);background:linear-gradient(90deg,#2b2310,#0a1926)}
.train-state.stopped .state-icon,.train-state.stopped #stateTitle{color:var(--yellow)}
.train-state.alert{box-shadow:inset 4px 0 0 var(--red)}
.state-doors{min-width:230px}
.door-visual{display:flex!important;align-items:center;justify-content:center;gap:9px;margin-top:8px!important}
.door-side{display:flex!important;align-items:center;gap:4px;padding:4px 7px;border:1px solid #2a4154;border-radius:6px;background:#071521}
.door-side i{width:8px;height:16px;background:#344a5c;border-radius:2px}
.door-side b{font-size:7px;color:#8198ab}
.door-side.open{border-color:#2ebf68;background:#0b281a;box-shadow:0 0 12px #31db7733}
.door-side.open i{background:var(--green);box-shadow:0 0 8px #31db77}
.door-side.open b{color:#77eea7}
.mini-car{width:30px;height:24px;border-radius:6px;background:var(--orange);display:grid!important;place-items:center;color:#fff;font-weight:1000;font-size:13px;margin:0!important}
.user-help{display:flex;gap:18px;flex-wrap:wrap;padding:8px 3px 2px;color:#839daf;font-size:8px}
.user-help span{display:flex;align-items:center;gap:6px}
.user-help b{color:#dce7ef}
.help{width:8px;height:8px;border-radius:50%}
.help.moving{background:var(--cyan)}
.help.station{background:var(--green)}
.help.stopped{background:var(--yellow)}

@media(max-width:1000px){
  .train-state{grid-template-columns:55px 1fr 1fr}
  .state-doors{grid-column:1/4;border-top:1px solid #20394d}
}
@media(max-width:700px){
  .train-state{grid-template-columns:45px 1fr}
  .state-station,.state-doors{grid-column:1/3;border-top:1px solid #20394d}
}


/* =========================================================
   TEMA INSTITUCIONAL · METRO CDMX
   Colores semánticos y sobrios para operación gubernamental
   ========================================================= */
:root{
  --bg:#f4f6f8;
  --bg2:#ffffff;
  --panel:#ffffff;
  --panel2:#f8fafc;
  --line:#d7dee5;
  --text:#1c2733;
  --muted:#6b7b88;

  /* Identidad Línea A */
  --mag:#a51f78;
  --mag2:#7e165c;

  /* Semánticos */
  --green:#168a4a;      /* Operación normal */
  --yellow:#d89a00;     /* Atención / detenido */
  --red:#c93c3c;        /* Falla / alarma */
  --cyan:#236b9e;       /* Información / movimiento */

  /* Tren */
  --orange:#f06b23;
  --orange2:#d95d18;
}

html,body{
  background:#eef2f5;
  color:var(--text);
}

body{
  background:
    linear-gradient(180deg,#f7f9fb 0,#edf2f5 100%);
}

.sidebar{
  background:#ffffff;
  border-right:1px solid #d4dde5;
  box-shadow:6px 0 24px rgba(33,48,63,.06);
}

.brand{
  background:#fafbfc;
  border:1px solid #d7e0e7;
}

.brand-a{
  background:linear-gradient(145deg,var(--mag),var(--mag2));
  box-shadow:none;
}

.brand strong{color:#1e2a35}
.brand small{color:#7b8996}

.nav{
  color:#50606d;
}

.nav:hover{
  background:#f3e8f0;
  color:var(--mag);
}

.nav.active{
  background:#f2e3ee;
  color:var(--mag);
  box-shadow:inset 4px 0 0 var(--mag);
}

.side-status{
  border-top-color:#d7e0e7;
}

.main{background:transparent}

.topbar{
  border-bottom:1px solid #d7e0e7;
}

.kicker{
  color:#5c6f7f;
}

.topbar h1{
  color:#17232e;
}

.topbar h1 em{
  color:var(--mag);
}

.online{
  border:1px solid #b7dbc7;
  background:#edf8f1;
  color:var(--green);
}

.meta{
  border-left-color:#d6dee5;
}

.meta small{color:#71808d}
.meta b{color:#1b2732}

.panel,
.hero{
  background:#ffffff;
  border:1px solid #d9e1e7;
  box-shadow:0 8px 24px rgba(36,52,67,.08);
}

.hero{
  border-top:4px solid var(--mag);
}

.speed-control span{color:#6c7d8a}

.speed-control select,
.btn{
  background:#ffffff;
  border:1px solid #bfcbd5;
  color:#24313c;
}

.btn:hover{
  background:#f7f9fa;
}

.btn.orange{
  background:var(--mag);
  border-color:var(--mag);
  box-shadow:none;
}

.rail{
  background:#d6dee4;
}

.rail.done{
  background:linear-gradient(90deg,var(--mag),#c9479b);
  box-shadow:none;
}

.station b{
  color:#435360;
}

.iconbox i{
  background:#ffffff;
  border-color:#9babb7;
  box-shadow:0 0 0 3px #e4eaee;
}

.station.current .iconbox:after{
  border-color:var(--green);
  box-shadow:0 0 0 5px rgba(22,138,74,.12);
}

.train-marker{
  filter:drop-shadow(0 5px 6px rgba(0,0,0,.24));
}

.train-tag{
  background:#ffffff;
  color:#31404d;
  border-color:#c3ced7;
}

.journey-cards{
  border-top-color:#dce3e8;
}

.journey-cards>div{
  border-right-color:#dce3e8;
}

.journey-cards small{color:#778793}
.journey-cards strong{color:#1d2933}
.journey-cards span{color:#6c7e8b}

.progress{
  background:#e0e6eb;
}

.progress i{
  background:linear-gradient(90deg,var(--mag),#c44b9c);
  box-shadow:none;
}

.timeline-row{
  border-top-color:#dce3e8;
}

.timeline-row button{
  background:#ffffff;
  color:#2b3945;
  border-color:#c6d0d8;
}

.timeline-row input{
  accent-color:var(--mag);
}

.row-counter span{color:#758692}
.row-counter b{color:#24303b}

.grid>.panel{
  background:#ffffff;
}

.panel-title{
  color:#2a3742;
}

.panel-title small{
  color:#758692;
}

.g-bg{
  stroke:#dfe5ea;
}

.g-value{
  stroke:var(--mag);
}

.g-center b{color:#17232d}
.g-center span{color:#70818e}

.metric-grid>div{
  background:#f8fafb;
  border-color:#dde5ea;
}

.metric-grid small{color:#748795}
.metric-grid b{color:#26333e}

.chart-grid{
  stroke:#e1e7eb;
}

.chart-label{
  fill:#7d8a95;
}

.chart-speed{
  stroke:var(--mag);
}

.chart-max{
  stroke:var(--red);
}

.chart-but{
  stroke:var(--yellow);
}

.legend{color:#667783}
.legend .or{background:var(--mag)}

.kv p{
  border-bottom-color:#e1e6ea;
}

.kv span{color:#71828f}
.kv b{color:#293640}

.signals-panel,
.events-panel,
.ai-panel{
  background:#ffffff;
}

.signal{
  background:#f8fafb;
  border-color:#dfe6eb;
  color:#31404d;
}

.signal i{
  background:#aeb9c2;
  box-shadow:none;
}

.signal.on i,
.sig.on{
  background:var(--green);
  box-shadow:0 0 0 3px rgba(22,138,74,.12);
}

.signal b{
  color:#7d8d99;
}

.events .event{
  background:#fbfcfd;
  border-color:#dce4ea;
  color:#2f3d48;
}

.event time{
  color:#256f9f;
}

.event span{
  color:#6e7f8b;
}

.event.alert{
  background:#fff6f5;
  border-color:#efc9c6;
}

.event.alert time{
  color:var(--red);
}

.risk{
  background:#f8fafb;
  border-color:#dce4e9;
}

.risk.low{
  border-left:5px solid var(--green);
}

.risk.medium{
  border-left:5px solid var(--yellow);
}

.risk.high{
  border-left:5px solid var(--red);
}

.risk small{color:#758692}
.risk span{color:#687a87}

.ai-metrics>div{
  border-bottom-color:#e0e6ea;
  color:#384752;
}

.confidence{
  background:#e3e8ec;
}

.ai-panel p{
  color:#6d7f8c;
}

/* Estado del tren: colores semánticos claros */
.train-state{
  background:#f8fafb;
  border-color:#d7e0e6;
}

.train-state>div{
  border-right-color:#dde4e9;
}

.train-state small{
  color:#72838f;
}

.train-state span{
  color:#647784;
}

.train-state.moving{
  background:#eef6fb;
  box-shadow:inset 5px 0 0 var(--cyan);
}

.train-state.moving .state-icon,
.train-state.moving #stateTitle{
  color:var(--cyan);
}

.train-state.at-station{
  background:#edf8f1;
  box-shadow:inset 5px 0 0 var(--green);
}

.train-state.at-station .state-icon,
.train-state.at-station #stateTitle{
  color:var(--green);
}

.train-state.stopped{
  background:#fff8e8;
  box-shadow:inset 5px 0 0 var(--yellow);
}

.train-state.stopped .state-icon,
.train-state.stopped #stateTitle{
  color:#b37b00;
}

.train-state.alert{
  background:#fff1f1;
  box-shadow:inset 5px 0 0 var(--red);
}

.door-side{
  background:#ffffff;
  border-color:#cbd5dd;
}

.door-side i{
  background:#aeb9c1;
}

.door-side b{
  color:#677986;
}

.door-side.open{
  background:#edf8f1;
  border-color:#a8d4ba;
  box-shadow:none;
}

.door-side.open i{
  background:var(--green);
  box-shadow:none;
}

.door-side.open b{
  color:var(--green);
}

.user-help{
  color:#70818e;
}

.user-help b{
  color:#34434f;
}

.help.moving{background:var(--cyan)}
.help.station{background:var(--green)}
.help.stopped{background:var(--yellow)}

footer{
  background:#ffffff;
  border-color:#d8e0e6;
}

footer>div{
  border-right-color:#d8e0e6;
}

footer span{color:#728390}
footer b{color:#2a3742}

.loading{
  background:rgba(245,247,249,.96);
  color:#1e2a35;
}

.loading span{
  color:#6c7d89;
}

.loader{
  border-color:#d9e1e6;
  border-top-color:var(--mag);
}

/* Barra superior institucional */
.topbar:before{
  content:"";
  position:absolute;
  left:180px;
  right:0;
  top:0;
  height:4px;
  background:linear-gradient(90deg,var(--mag) 0 35%,#7d165c 35% 60%,#f06b23 60% 100%);
}

@media(max-width:1180px){
  .topbar:before{left:76px}
}

@media(max-width:800px){
  .topbar:before{left:0}
}

/* Mejor contraste de estados */
#riskBox.low #risk{color:var(--green)}
#riskBox.medium #risk{color:#a86f00}
#riskBox.high #risk{color:var(--red)}

#doorTitle{letter-spacing:.02em}

/* ===== v3: movimiento estable y lectura de puertas ===== */
.train-marker{
  transition:left .42s linear !important;
  will-change:left;
}
.rail.done{
  transition:width .42s linear !important;
}
.door-side.open{
  transform:scale(1.08);
}
#doorTitle{
  font-size:14px;
  font-weight:900;
}
#doorDescription{
  font-weight:700;
}

/* v4 · diagnóstico explícito de puertas */
.door-raw{
  margin-top:6px;
  padding:5px 7px;
  border-radius:6px;
  background:#eef2f5;
  color:#5e7180;
  font-size:7px;
  font-family:Consolas,Monaco,monospace;
  letter-spacing:.03em;
}
.state-doors:has(#doorLeft.open) #doorTitle,
.state-doors:has(#doorRight.open) #doorTitle{
  color:var(--green);
}
#doorLeft.open,#doorRight.open{
  outline:2px solid rgba(22,138,74,.16);
}


/* =========================================================
   v5 FIX: evitar colisión entre .station del mapa y estado
   ========================================================= */
.train-state.at-station{
  width:100% !important;
  margin-top:10px !important;
  text-align:left !important;
  position:relative !important;
  background:#edf8f1 !important;
  box-shadow:inset 5px 0 0 var(--green) !important;
}
.train-state.at-station .state-icon,
.train-state.at-station #stateTitle{
  color:var(--green) !important;
}
.train-state.at-station strong,
.train-state.at-station span,
.train-state.at-station small{
  transform:none !important;
  white-space:normal !important;
}

/* La sección de puertas debe ser siempre visible */
.state-doors{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}
#doorTitle{
  display:block !important;
  color:#273640;
}
#doorDescription{
  display:block !important;
}
#doorRawSignals{
  display:block !important;
}

/* Colores muy claros para el lado detectado */
#doorLeft.open{
  background:#e8f7ee !important;
  border-color:#168a4a !important;
}
#doorRight.open{
  background:#e8f7ee !important;
  border-color:#168a4a !important;
}
#doorLeft.open b,
#doorRight.open b{
  color:#168a4a !important;
  font-weight:900;
}

/* v6: el tren sigue una trayectoria precomputada sin rebotes */
.train-marker{transition:left .26s linear !important}
.rail.done{transition:width .26s linear !important}