@font-face{font-family:DDIN;src:url('../separador-hmi/assets/fonts/d-din/D-DIN.otf')}@font-face{font-family:DDIN;src:url('../separador-hmi/assets/fonts/d-din/D-DIN-Bold.otf');font-weight:700}
:root{--ink:#07171f;--panel:#0d252f;--panel2:#112e39;--line:#28505d;--cyan:#5dd7e8;--text:#e7f3f5;--muted:#8eb0ba;--green:#55d6a6}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#06151d;color:var(--text);font-family:DDIN,Arial,sans-serif}body{overflow:hidden}button,input{font:inherit}button{cursor:pointer}#particles{position:fixed;inset:0;width:100%;height:100%;opacity:.36;pointer-events:none}.hmi-shell{position:relative;z-index:1;height:100vh;display:grid;grid-template-rows:74px minmax(0,1fr) 38px;padding:12px;gap:9px}.app-toolbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:8px 16px;border:1px solid var(--line);background:linear-gradient(110deg,rgba(12,36,46,.98),rgba(7,24,32,.95));box-shadow:0 12px 40px #0008}.brand{display:grid;place-items:center;width:145px;height:50px;border-right:1px solid var(--line);padding-right:18px}.brand img{width:100%;max-height:42px;object-fit:contain}.eyebrow{color:var(--cyan);font-size:11px;letter-spacing:.18em}.app-toolbar h1{margin:2px 0 0;font-size:24px;letter-spacing:.035em}.toolbar-actions{display:flex;align-items:center;gap:18px}.toolbar-actions a,.live{color:var(--muted);text-decoration:none;font-size:12px;letter-spacing:.08em}.live i,.status-card i,.hmi-footer i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green);margin-right:6px}.hmi-layout{min-height:0;display:grid;grid-template-columns:minmax(220px,17vw) minmax(0,1fr) minmax(280px,21vw);gap:9px}.panel,.model-column{min-height:0;border:1px solid var(--line);background:linear-gradient(180deg,rgba(14,38,48,.98),rgba(7,25,33,.97));box-shadow:0 16px 45px #0007}.panel{padding:14px;overflow:auto}.panel header{display:grid;gap:3px;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:12px}.panel header span,.model-head,.model-footer{color:var(--cyan);font-size:10px;letter-spacing:.14em}.panel header strong{font-size:16px}.metric{padding:11px;margin-bottom:8px;border:1px solid #214552;background:#102c37}.metric>div{display:flex;justify-content:space-between;color:var(--muted);font-size:11px}.metric>div b{color:var(--cyan)}.metric>strong{display:block;font-size:23px;margin:7px 0 5px}.metric small{font-size:12px;color:var(--muted)}meter{width:100%;height:5px;display:block}meter::-webkit-meter-bar{background:#061820;border:0}meter::-webkit-meter-optimum-value{background:linear-gradient(90deg,#258fa0,var(--cyan))}.grid-readings{display:grid;grid-template-columns:1fr 1fr;gap:7px}.grid-readings div,.status-card{padding:10px;border:1px solid #214552;background:#0b222c}.grid-readings span,.status-card span,.status-card small{display:block;color:var(--muted);font-size:10px}.grid-readings b{display:block;margin-top:4px;font-size:14px}.status-card{margin-top:8px}.status-card strong{display:block;margin:8px 0;color:#dffbf0}.model-column{display:grid;grid-template-rows:34px minmax(0,1fr) 28px;overflow:hidden}.model-head,.model-footer{display:flex;align-items:center;justify-content:space-between;padding:0 13px;background:#0a222c;border-bottom:1px solid var(--line)}.model-footer{border-top:1px solid var(--line);border-bottom:0;color:var(--muted)}.model-view{position:relative;min-height:0;overflow:hidden;background:radial-gradient(circle at 50% 42%,#18323d 0,#0a1d26 68%,#06141b 100%)}.model-view canvas{display:block;width:100%;height:100%}#loading{position:absolute;z-index:3;inset:0;display:grid;place-items:center;background:#081b24;color:var(--cyan);letter-spacing:.08em}#tag{position:absolute;z-index:4;transform:translate(-50%,-100%);padding:7px 10px;border-left:2px solid var(--cyan);background:#0a202bde;font-size:11px;pointer-events:none}.view-hint{position:absolute;z-index:2;left:14px;bottom:12px;color:#83a7b2;font-size:10px;letter-spacing:.06em;pointer-events:none}
.controls{display:flex;flex-direction:column;gap:9px}.actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.actions.views{grid-template-columns:repeat(3,1fr)}button{border:1px solid #356271;border-radius:4px;padding:9px 7px;background:#102c37;color:#dceef2;transition:.18s}button:hover,button[aria-pressed=true]{border-color:var(--cyan);background:#174454;color:#fff}.check{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px;padding:5px 0}.check input{accent-color:var(--cyan)}details{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px 0}summary{cursor:pointer;color:#bdd4da;font-size:12px}#groups{display:grid;gap:3px;padding-top:6px}.controls>label[for=search]{color:var(--muted);font-size:11px}#search{width:100%;border:1px solid #356271;border-radius:4px;background:#071b24;color:#e8f5f7;padding:10px;outline:0}#search:focus{border-color:var(--cyan)}#parts{display:grid;gap:5px;min-height:80px;max-height:190px;overflow:auto;padding-right:3px}#parts button{text-align:left;font-size:11px;padding:8px}#parts button.featured{border-color:#4f9dad;background:linear-gradient(135deg,#173843,#102830);font-weight:700}#parts button.featured::before{content:'⌖';margin-right:.4rem;color:#79d2df}.info{padding:11px;border:1px solid #294f5b;background:#0b222c}.info h3{margin:0 0 6px;color:#dff7fa;font-size:14px}.info p{margin:0;color:var(--muted);font-size:11px;line-height:1.45}
.station-controls{order:-1;margin:0;border:1px solid #315563;padding:8px;background:#091f28}.station-controls>summary{color:var(--cyan);font-weight:700}.station-controls>div{display:grid;gap:7px;padding-top:8px}.unit-control{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:8px;border:1px solid #294a56;background:#0e2934}.unit-control strong{grid-column:1/-1;font-size:12px;color:#e1f4f6}.unit-control button{font-size:10px;padding:7px 4px}.unit-control .check{grid-column:1/-1;margin:0;padding:1px}.hmi-footer{display:flex;align-items:center;justify-content:space-between;padding:0 14px;border:1px solid var(--line);background:#0a222c;color:var(--muted);font-size:10px;letter-spacing:.08em}
@media(max-width:1100px){body{overflow:auto}.hmi-shell{height:auto;min-height:100vh}.hmi-layout{grid-template-columns:220px minmax(580px,1fr)}.controls{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,1fr)}.model-column{min-height:650px}.toolbar-actions .live{display:none}}
@media(max-width:760px){.hmi-shell{padding:6px;grid-template-rows:auto auto auto}.app-toolbar{grid-template-columns:auto 1fr}.brand{width:100px}.toolbar-actions{display:none}.app-toolbar h1{font-size:18px}.hmi-layout{display:flex;flex-direction:column}.model-column{order:-1;min-height:560px}.panel{max-height:none}.controls{display:flex}.hmi-footer{gap:10px;flex-wrap:wrap;padding:8px 12px}}
[hidden]{display:none!important}

/* Panel simplificado: los controles internos permanecen disponibles para el
   visor, pero la interfaz sólo muestra las tres unidades de la estación. */
.controls > :not(.station-controls):not(.unit-status-board){display:none!important}
.controls > .station-controls{order:0;margin:0;width:100%}
.unit-control{position:relative}
.unit-status-board{display:grid;gap:14px;width:100%;margin-top:4px}
.unit-status-card{min-height:112px;display:grid;grid-template-columns:1fr auto;align-items:center;padding:18px 22px;border:1px solid #294a56;background:linear-gradient(135deg,rgba(14,41,52,.86),rgba(6,20,29,.92))}
.unit-status-card>strong{font-size:13px;color:#e1f4f6}
.unit-status{display:inline-flex;flex-direction:column;align-items:center;gap:9px;min-width:82px;color:var(--muted);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.unit-status::before{content:'';width:42px;height:42px;border:2px solid rgba(255,255,255,.2);border-radius:50%;background:#e34b4b;box-shadow:0 0 12px rgba(227,75,75,.85),0 0 30px rgba(227,75,75,.32),inset 0 2px 8px rgba(255,255,255,.24)}
.unit-status.is-running::before{background:#55d6a6;box-shadow:0 0 12px rgba(85,214,166,.95),0 0 32px rgba(85,214,166,.38),inset 0 2px 8px rgba(255,255,255,.28)}
.unit-status.is-stopped::before{background:#e34b4b;box-shadow:0 0 12px rgba(227,75,75,.95),0 0 32px rgba(227,75,75,.36),inset 0 2px 8px rgba(255,255,255,.24)}

/* Navegacion movil en flujo: el visor y los paneles dejan de vivir dentro de
   una pantalla fija y pasan al scroll principal, igual que el separador. */
@media(max-width:760px){
  html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto!important}
  body{touch-action:pan-y}
  .hmi-shell{box-sizing:border-box;width:100%;height:auto!important;min-height:100svh;display:flex;flex-direction:column;padding:84px 8px 10px;gap:10px;overflow:visible}
  .hmi-layout{min-height:0;display:flex;flex-direction:column;gap:10px;overflow:visible}
  .model-column{order:1;width:100%;height:58svh;min-height:380px;max-height:560px;flex:none;overflow:hidden}
  .telemetry{order:2;width:100%;overflow:visible!important;max-height:none!important}
  .controls{order:3;width:100%;display:flex;flex-direction:column;overflow:visible!important;max-height:none!important}
  .panel{max-height:none;overflow:visible}
  .station-controls,.unit-status-board{width:100%}
  .hmi-footer{min-height:54px;flex:none;gap:8px;flex-wrap:wrap;padding:9px 12px}
  .model-view canvas{touch-action:none}
}

/* Secuencia de entrada consistente con Motogeneradores y Motocompresion. */
@keyframes stationHeaderIn{from{opacity:0;transform:translate3d(0,-22px,0);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes stationModelIn{from{opacity:0;transform:translate3d(0,24px,0) scale(.965);filter:blur(9px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes stationLeftIn{from{opacity:0;transform:translate3d(-28px,0,0);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes stationRightIn{from{opacity:0;transform:translate3d(28px,0,0);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes stationFooterIn{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@keyframes stationItemIn{from{opacity:0;transform:translate3d(0,12px,0) scale(.98)}to{opacity:1;transform:none}}
.station-entering .app-toolbar,.station-entering .model-column,.station-entering .telemetry,.station-entering .controls,.station-entering .hmi-footer{opacity:0}
.station-entering.station-ready .app-toolbar{animation:stationHeaderIn .8s cubic-bezier(.2,.78,.2,1) both}
.station-entering.station-ready .model-column{animation:stationModelIn .88s cubic-bezier(.18,.86,.2,1) .1s both}
.station-entering.station-ready .telemetry{animation:stationLeftIn .78s cubic-bezier(.18,.86,.2,1) .24s both}
.station-entering.station-ready .controls{animation:stationRightIn .78s cubic-bezier(.18,.86,.2,1) .32s both}
.station-entering.station-ready .hmi-footer{animation:stationFooterIn .65s ease .48s both}
.station-ready .unit-control,.station-ready .unit-status-card{animation:stationItemIn .58s cubic-bezier(.18,.86,.2,1) both}
.station-ready .unit-control:nth-child(2),.station-ready .unit-status-card:nth-child(2){animation-delay:.08s}
.station-ready .unit-control:nth-child(3),.station-ready .unit-status-card:nth-child(3){animation-delay:.16s}
@media(max-width:760px){.station-entering.station-ready .telemetry,.station-entering.station-ready .controls{animation-name:stationModelIn}}
@media(prefers-reduced-motion:reduce){.station-entering .app-toolbar,.station-entering .model-column,.station-entering .telemetry,.station-entering .controls,.station-entering .hmi-footer{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}.station-ready .unit-control,.station-ready .unit-status-card{animation:none!important}}