/* ===================================================================
   SEDIASA · HMI de inspección de etiquetado — mock
   =================================================================== */
:root{
  --bg:#0b1016;
  --bg2:#111a24;
  --panel:#141e29;
  --panel2:#1a2734;
  --line:#24354a;
  --txt:#e6eef7;
  --txt-dim:#8ba0b6;
  --acc:#3ba0ff;
  --ok:#2fd18a;
  --ng:#ff4d5e;
  --warn:#ffb02e;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --mono:"JetBrains Mono",Consolas,"Courier New",monospace;
  --topbar-h:60px;                        /* alto del encabezado */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1200px 600px at 50% -10%,#16232f 0%,transparent 60%),
    var(--bg);
  color:var(--txt);
  font-family:"Segoe UI",Inter,system-ui,sans-serif;
  min-height:100vh;
}

/* ---------- topbar ---------- */
.topbar{
  display:flex;align-items:center;gap:20px;
  padding:6px 18px;min-height:var(--topbar-h);
  background:linear-gradient(180deg,#16222e,#101a24);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:40;
}
.brand{display:flex;align-items:center;gap:14px;flex:1}
.logo{
  height:34px;width:auto;max-width:190px;object-fit:contain;
  padding:3px 8px;border-radius:7px;
  background:#fff;                       /* el logo es para fondo claro */
  box-shadow:0 2px 12px rgba(0,0,0,.45);
  flex:0 0 auto;
}
.topbar h1{margin:0;font-size:15px;letter-spacing:.2px;line-height:1.2}
.topbar p{margin:1px 0 0;font-size:11px;color:var(--txt-dim);line-height:1.25}
.topbar code{background:#0d151d;padding:1px 6px;border-radius:4px;font-family:var(--mono);color:var(--acc)}

.stack-light{
  display:flex;flex-direction:row;gap:6px;padding:5px 8px;
  background:#0a1118;border:1px solid var(--line);border-radius:8px;
}
.lamp{width:12px;height:12px;border-radius:50%;background:#20313f;transition:.25s}
.lamp.green.on{background:var(--ok);box-shadow:0 0 14px var(--ok)}
.lamp.amber.on{background:var(--warn);box-shadow:0 0 14px var(--warn)}
.lamp.red.on{background:var(--ng);box-shadow:0 0 16px var(--ng);animation:blink .6s steps(1) infinite}
@keyframes blink{50%{opacity:.25;box-shadow:none}}

.status-block{display:flex;align-items:center;gap:10px}
.status-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 11px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.5px;
  background:rgba(47,209,138,.12);color:var(--ok);border:1px solid rgba(47,209,138,.35);
}
.status-pill .dot{width:8px;height:8px;border-radius:50%;background:currentColor;animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.3}}
.status-pill.paused{background:rgba(255,176,46,.12);color:var(--warn);border-color:rgba(255,176,46,.35)}
.status-pill.alarm{background:rgba(255,77,94,.14);color:var(--ng);border-color:rgba(255,77,94,.45)}
.clock{font-family:var(--mono);font-size:12px;color:var(--txt-dim);margin:0}


/* ---------- pestanas de navegacion ---------- */
.tabs{display:flex;gap:5px;background:#0a1118;border:1px solid var(--line);border-radius:9px;padding:3px}
.tab{
  display:flex;align-items:center;gap:7px;
  padding:6px 13px;border-radius:7px;text-decoration:none;
  font-size:12.5px;font-weight:600;color:var(--txt-dim);transition:.15s;white-space:nowrap;
}
.tab:hover{color:var(--txt);background:#152131}
.tab.active{
  background:linear-gradient(180deg,#2f7fd1,#1e5da0);color:#fff;
  box-shadow:0 2px 10px rgba(59,160,255,.35);
}

main{padding:14px 18px 10px;max-width:none;margin:0}

/* ---------- layout HMI: contenido a la izquierda, metricas a la derecha ---------- */
.hmi{
  display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,22vw,380px);
  gap:14px;align-items:stretch;
  min-height:calc(100vh - var(--topbar-h) - 62px);
}
.hmi-main{min-width:0;display:flex;flex-direction:column;gap:14px}
/* la linea de montaje se come el espacio libre que quede abajo */
.line-panel{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.line-panel .panel-head{flex:0 0 auto}
.line-panel .controls{flex:0 0 auto}
.hmi-main>section{margin:0}
.hmi-side{
  display:flex;flex-direction:column;gap:14px;
  position:sticky;top:calc(var(--topbar-h) + 10px);height:calc(100vh - var(--topbar-h) - 62px);
}
.ins-section .panel{
  margin:0;display:grid;gap:14px;
  grid-template-columns:minmax(0,1fr) clamp(230px,17vw,310px);
  align-items:start;
}
.ins-section .panel-head{grid-column:1/-1;margin:0}
.ins-section .views{grid-column:1}
/* los datos de la inferencia pasan a la columna derecha del panel */
.ins-section .verdict-bar{
  grid-column:2;margin:0;flex-direction:column;align-items:flex-start;gap:9px;
  align-self:stretch;justify-content:center;line-height:1.4;
}
.ins-section .vb-meta{white-space:normal}
.log-panel{display:flex;flex-direction:column;min-height:0;flex:1;margin:0}

/* ---------- KPIs ---------- */
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
.kpi{
  background:linear-gradient(180deg,var(--panel),#111b25);
  border:1px solid var(--line);border-radius:11px;padding:9px 12px;
  display:flex;flex-direction:column;gap:2px;box-shadow:var(--shadow);
}
.kpi-label{font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:var(--txt-dim)}
.kpi strong{font-size:23px;font-family:var(--mono);line-height:1.1}
.kpi-sub{font-size:11px;color:var(--txt-dim)}
.kpi.ok strong{color:var(--ok)}
.kpi.ng strong{color:var(--ng)}
.kpi.crit strong{color:var(--warn)}
.kpi.bump{animation:bump .45s ease}
@keyframes bump{40%{transform:translateY(-4px);border-color:var(--acc)}}

/* ---------- paneles ---------- */
.panel{
  background:linear-gradient(180deg,var(--panel),#101922);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
  padding:14px 16px 16px;margin-bottom:16px;
}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.panel-head h2{margin:0;font-size:14px;text-transform:uppercase;letter-spacing:1px;color:var(--txt-dim)}
.tag{
  font-family:var(--mono);font-size:11px;color:var(--acc);
  background:rgba(59,160,255,.1);border:1px solid rgba(59,160,255,.25);
  padding:3px 9px;border-radius:6px;
}

/* ===================================================================
   ESCENA / LÍNEA DE MONTAJE
   =================================================================== */
.scene{
  position:relative;flex:1 1 auto;height:auto;min-height:240px;border-radius:12px;overflow:hidden;
  background:
    linear-gradient(180deg,#0e1720 0%,#0b131b 55%,#080e14 100%);
  border:1px solid #1d2b3a;
}
.scene::before{ /* rejilla de fondo */
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(59,160,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(59,160,255,.05) 1px,transparent 1px);
  background-size:40px 40px;
}

/* cinta */
.belt{position:absolute;left:0;right:0;top:51.5%;height:26px}
.belt-surface{
  position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,#2b3d4f 0 26px,#22323f 26px 52px);
  border-top:2px solid #3d566d;border-bottom:2px solid #17222c;
  animation:beltMove 1s linear infinite;
}
@keyframes beltMove{to{background-position:52px 0}}
.belt-edge{
  position:absolute;left:0;right:0;bottom:-7px;height:7px;
  background:linear-gradient(180deg,#16222c,#0d151c);
}
body.paused .belt-surface,
body.paused .roller,
body.paused .tray{animation-play-state:paused !important}

.rollers{position:absolute;left:0;right:0;top:60.5%;display:flex;justify-content:space-around;padding:0 30px}
.roller{
  width:20px;height:20px;border-radius:50%;
  background:conic-gradient(#3b5568 0 25%,#243543 0 50%,#3b5568 0 75%,#243543 0);
  border:1px solid #46627a;animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* trigger / barrera fotoeléctrica */
.trigger-line{
  position:absolute;left:50%;top:17%;height:45%;width:2px;
  background:linear-gradient(180deg,transparent,var(--ng),transparent);
  box-shadow:0 0 10px rgba(255,77,94,.6);z-index:6;
}
.trigger-line.hit{animation:trigHit .35s ease}
@keyframes trigHit{
  0%,100%{box-shadow:0 0 10px rgba(255,77,94,.6);width:2px}
  40%{box-shadow:0 0 26px 6px rgba(255,255,255,.9);width:4px;background:#fff}
}
.trigger-label{
  position:absolute;top:-34px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:9px;color:var(--ng);text-align:center;
  letter-spacing:.5px;line-height:1.2;white-space:nowrap;
}

/* tramo de cristal para la cámara inferior */
.glass-gap{
  position:absolute;left:calc(50% - 60px);width:120px;top:51.5%;height:26px;z-index:2;
  background:linear-gradient(180deg,rgba(160,220,255,.22),rgba(120,190,255,.06));
  border-left:2px dashed rgba(160,220,255,.5);border-right:2px dashed rgba(160,220,255,.5);
}
.glass-gap span{
  position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:9px;color:#9fd4ff;opacity:.75;
}

/* cámaras */
.cam{position:absolute;left:50%;transform:translateX(-50%);z-index:7;display:flex;flex-direction:column;align-items:center}
/* la camara superior va del techo de la escena hasta la cinta,
   la inferior desde la cinta hasta el piso: los conos estiran solos */
.cam-top{top:3%;bottom:48.5%}
.cam-bottom{top:calc(51.5% + 28px);bottom:40px}
.cam-body{
  flex:0 0 auto;
  font-family:var(--mono);font-size:10px;letter-spacing:.5px;
  background:linear-gradient(180deg,#2a3b4d,#1a2733);
  border:1px solid #46627a;border-radius:5px;padding:5px 10px;color:#cfe3f7;
  box-shadow:0 3px 10px rgba(0,0,0,.5);
}
.cam-cone{
  flex:1 1 auto;width:104px;min-height:18px;
  background:rgba(59,160,255,.10);
  clip-path:polygon(50% 0,100% 100%,0 100%);   /* haz apuntando hacia abajo */
  filter:blur(.4px);transition:background .2s;
}
.cam-bottom .cam-cone{
  clip-path:polygon(0 0,100% 0,50% 100%);      /* haz apuntando hacia arriba */
}
.cam.flash .cam-cone{background:rgba(255,255,255,.5)}
.cam-led{
  flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:#1f4d3a;margin-top:4px;
}
.cam.flash .cam-led{background:#fff;box-shadow:0 0 12px #fff}

/* rechazador */
.rejector{position:absolute;left:78%;top:36%;z-index:5;display:flex;flex-direction:column;align-items:center}
.rej-body{
  font-family:var(--mono);font-size:10px;background:#25333f;border:1px solid #46627a;
  border-radius:4px;padding:3px 8px;color:#cfe3f7;
}
.rej-arm{
  background:linear-gradient(180deg,#8fa8bd,#5d7488);
  border:1px solid #9fbdd4;border-radius:2px;margin-bottom:2px;
  transform-origin:top center;transition:transform .12s ease-out;
}
.rejector.fire .rej-arm{transform:translateY(46px) scaleY(3.2)}

.reject-bin{
  position:absolute;left:74%;top:71.5%;width:110px;height:20%;min-height:52px;z-index:3;
  background:linear-gradient(180deg,#2a1a1e,#1a1013);
  border:1px solid #6d3540;border-top:3px solid #a04653;border-radius:0 0 8px 8px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
}
.reject-bin span{font-family:var(--mono);font-size:9px;color:#ff8a95;letter-spacing:1px}
.reject-bin b{font-family:var(--mono);font-size:20px;color:var(--ng)}

.scene-floor{
  position:absolute;left:0;right:0;bottom:0;height:36px;
  background:repeating-linear-gradient(45deg,#0d141b 0 10px,#0a1016 10px 20px);
  border-top:1px solid #1b2836;
}

/* ---------- bandejas ---------- */
.trays{position:absolute;inset:0;z-index:4;pointer-events:none}
.tray{
  position:absolute;top:42.5%;width:74px;height:32px;
  transform:translateX(-50%);
  transition:none;
}
.tray-body{
  position:relative;width:100%;height:30px;border-radius:4px;
  background:linear-gradient(180deg,#f4f7fa,#cfd8e0);
  border:1px solid #aeb9c4;
  box-shadow:0 6px 10px rgba(0,0,0,.5),inset 0 -4px 0 rgba(0,0,0,.06);
}
.tray-body::after{ /* textura granulada de la bandeja */
  content:"";position:absolute;inset:2px;border-radius:3px;opacity:.5;
  background-image:radial-gradient(#b9c4ce 1px,transparent 1px);
  background-size:6px 6px;
}
.tray .lbl{
  position:absolute;width:26px;height:9px;border-radius:1px;left:50%;transform:translateX(-50%);
  background:repeating-linear-gradient(90deg,#1c2530 0 1px,#fdfdfd 1px 2px);
  border:1px solid #566;z-index:2;
}
.tray .lbl.top{top:-5px}
.tray .lbl.bot{bottom:-5px}
.tray.miss-top .lbl.top,.tray.miss-bot .lbl.bot{display:none}
.tray-id{
  position:absolute;top:-19px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:9px;color:var(--txt-dim);white-space:nowrap;
}
.tray.ng .tray-body{border-color:var(--ng);box-shadow:0 0 14px rgba(255,77,94,.6),0 6px 10px rgba(0,0,0,.5)}
.tray.ok .tray-body{border-color:var(--ok);box-shadow:0 0 12px rgba(47,209,138,.45),0 6px 10px rgba(0,0,0,.5)}
.tray.ejected{animation:eject .55s cubic-bezier(.4,.1,.9,.9) forwards}
@keyframes eject{
  0%{transform:translateX(-50%) translateY(0) rotate(0)}
  100%{transform:translateX(-50%) translateY(120px) rotate(38deg);opacity:.15}
}

/* ---------- controles ---------- */
.controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
.btn{
  background:linear-gradient(180deg,#22303e,#18232e);
  color:var(--txt);border:1px solid var(--line);border-radius:8px;
  padding:9px 14px;font-size:13px;cursor:pointer;transition:.15s;font-weight:600;
}
.btn:hover:not(:disabled){border-color:var(--acc);transform:translateY(-1px)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.primary{background:linear-gradient(180deg,#2f7fd1,#1e5da0);border-color:#3d8ede}
.btn.danger{background:linear-gradient(180deg,#e0424f,#a92b36);border-color:#ff6b78}
.btn.ghost{background:transparent}
.btn.armed{animation:blink 1s steps(1) infinite;border-color:var(--ng);color:var(--ng)}

.slider,.check{
  display:flex;align-items:center;gap:8px;font-size:12px;color:var(--txt-dim);
  background:#0e1720;border:1px solid var(--line);border-radius:8px;padding:7px 11px;
}
.slider input[type=range]{width:110px;accent-color:var(--acc)}
.slider b{font-family:var(--mono);color:var(--txt);min-width:38px;text-align:right}
.check input{accent-color:var(--acc)}

/* ===================================================================
   VISTAS DE CÁMARA
   =================================================================== */
.grid-2{display:grid;grid-template-columns:1.35fr 1fr;gap:16px}
.views{gap:14px}
.views{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.view-head{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:10px;color:var(--txt-dim);
  letter-spacing:.5px;margin-bottom:6px;
}
.verdict{font-weight:700}
.verdict.ok{color:var(--ok)}
.verdict.ng{color:var(--ng)}

.capture{
  position:relative;aspect-ratio:400/260;border-radius:8px;overflow:hidden;
  max-height:clamp(190px,30vh,320px);width:auto;max-width:100%;margin:0 auto;
  background:radial-gradient(circle at 50% 40%,#1c2a36,#0a1015 75%);
  border:1px solid var(--line);
}
.capture.ok{border-color:rgba(47,209,138,.6)}
.capture.ng{border-color:rgba(255,77,94,.7);box-shadow:0 0 18px rgba(255,77,94,.25)}
.capture.shot{animation:shot .3s ease}
@keyframes shot{0%{filter:brightness(3.2) contrast(.6)}100%{filter:none}}

.noise{
  position:absolute;inset:0;opacity:.14;pointer-events:none;
  background-image:radial-gradient(#fff 1px,transparent 1px);
  background-size:3px 3px;animation:noise .35s steps(2) infinite;
}
@keyframes noise{50%{background-position:1px 2px}}
.scanline{
  position:absolute;left:0;right:0;height:34%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(59,160,255,.22),transparent);
  animation:scan 2.6s linear infinite;
}
@keyframes scan{0%{top:-34%}100%{top:100%}}

.no-signal{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mono);font-size:13px;letter-spacing:3px;color:#3f5468;
  background:#0a1015;
}
.no-signal.hide{display:none}

/* render de la bandeja capturada (planta) */
.tray-render{
  position:absolute;left:14%;top:18%;width:72%;height:64%;
  border-radius:8px;background:linear-gradient(160deg,#f7f9fb,#c9d3dc);
  border:2px solid #a9b4bf;box-shadow:0 12px 26px rgba(0,0,0,.55);
  display:grid;place-items:center;opacity:0;transition:opacity .18s;
}
.tray-render.show{opacity:1}
.tray-render::before{
  content:"";position:absolute;inset:6px;border-radius:5px;
  background-image:radial-gradient(#bcc7d1 1.2px,transparent 1.2px);
  background-size:9px 9px;opacity:.6;
}
.tray-render::after{ /* borde interno del molde */
  content:"";position:absolute;inset:14px;border:2px solid rgba(0,0,0,.07);border-radius:4px;
}
.tray-render .label{
  position:relative;width:44%;height:34%;border-radius:2px;z-index:2;
  background:#fff;border:1px solid #7c8894;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  display:flex;flex-direction:column;justify-content:center;gap:3px;padding:5px 7px;
}
.tray-render .label i{display:block;height:2px;background:#2b3644;border-radius:1px}
.tray-render .label i:nth-child(1){width:80%}
.tray-render .label i:nth-child(2){width:62%}
.tray-render .barcode{
  height:34%;margin-top:3px;
  background:repeating-linear-gradient(90deg,#141a22 0 1.5px,#fff 1.5px 3.5px);
}

/* cajas de detección */
.boxes{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.boxes rect{fill:none;stroke-width:2}
.boxes .b-ok{stroke:var(--ok)}
.boxes .b-tray{stroke:var(--acc);stroke-dasharray:6 4}
.boxes .b-ng{stroke:var(--ng);stroke-dasharray:5 3;animation:blink .7s steps(1) infinite}
.boxes text{font-family:var(--mono);font-size:11px;font-weight:700}
.boxes .draw{animation:draw .32s ease-out}
@keyframes draw{from{opacity:0;transform:scale(.9);transform-origin:center}to{opacity:1}}

.verdict-bar{
  margin-top:12px;padding:11px 14px;border-radius:9px;
  background:#0e1720;border:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-size:13px;font-weight:600;
}
.verdict-bar.ok{background:rgba(47,209,138,.1);border-color:rgba(47,209,138,.4);color:var(--ok)}
.verdict-bar.ng{background:rgba(255,77,94,.1);border-color:rgba(255,77,94,.45);color:var(--ng)}
.vb-meta{font-family:var(--mono);font-size:11px;color:var(--txt-dim);font-weight:400}

/* ---------- log ---------- */
.log-wrap{flex:1;min-height:180px;overflow-y:auto;border:1px solid var(--line);border-radius:9px}
.log{width:100%;border-collapse:collapse;font-size:12px}
.log th{
  position:sticky;top:0;background:#101a24;color:var(--txt-dim);
  text-align:left;padding:9px 10px;font-weight:600;font-size:11px;
  text-transform:uppercase;letter-spacing:.6px;border-bottom:1px solid var(--line);
}
.log td{padding:8px 10px;border-bottom:1px solid #18242f;font-family:var(--mono)}
.log tr.row-ng td{background:rgba(255,77,94,.07)}
.log tr.new{animation:rowIn .4s ease}
@keyframes rowIn{from{background:rgba(59,160,255,.2);transform:translateX(-8px)}}
.pill{padding:2px 7px;border-radius:5px;font-size:10px;font-weight:700}
.pill.y{background:rgba(47,209,138,.15);color:var(--ok)}
.pill.n{background:rgba(255,77,94,.15);color:var(--ng)}

/* ---------- alarma ---------- */
#alarmFlash{
  position:fixed;inset:0;pointer-events:none;z-index:60;opacity:0;
  box-shadow:inset 0 0 120px 24px rgba(255,77,94,.55);
}
#alarmFlash.on{animation:flash .5s ease-in-out 1}
@keyframes flash{0%,100%{opacity:0}50%{opacity:1}}

/* aviso de alarma sobre la escena (no detiene la linea) */
.alarm-toast{
  position:absolute;top:26px;left:50%;transform:translate(-50%,-40px) scale(.92);
  z-index:20;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:22px 46px;border-radius:16px;min-width:min(560px,86%);
  background:linear-gradient(180deg,rgba(74,20,30,.97),rgba(42,14,20,.97));
  border:2px solid var(--ng);
  box-shadow:0 16px 50px rgba(0,0,0,.55),0 0 60px rgba(255,77,94,.35);
  text-align:center;color:#ffdfe3;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
}
.alarm-toast.show{opacity:1;transform:translate(-50%,0) scale(1)}
.alarm-toast .at-icon{
  font-size:44px;line-height:1;color:var(--ng);
  animation:blink .7s steps(1) infinite;
}
.alarm-toast .at-text{
  font-size:30px;font-weight:800;letter-spacing:.6px;color:var(--ng);
  text-shadow:0 0 22px rgba(255,77,94,.45);line-height:1.15;
}
.alarm-toast .at-id{
  font-family:var(--mono);font-size:14px;color:#e9b7bd;font-weight:400;letter-spacing:.5px;
}
@media(max-width:760px){
  .alarm-toast{padding:16px 22px;min-width:92%}
  .alarm-toast .at-text{font-size:21px}
  .alarm-toast .at-icon{font-size:34px}
}

footer{text-align:center;font-size:11px;color:#5b6f83;padding:6px 0 12px}

/* ---------- responsive ---------- */
/* en pantallas anchas la barra de metricas es un 20% mas ancha (380 -> ~456px) */
@media(min-width:1600px){
  .hmi{grid-template-columns:minmax(0,1fr) clamp(400px,23.8vw,470px)}
}

/* pantallas de poca altura (notebooks 768/900): todo sigue entrando */
@media(max-height:880px) and (min-width:1151px){
  .capture{max-height:21vh}
  .scene{min-height:200px}
  .kpi strong{font-size:20px}
  .kpi{padding:7px 11px}
}

@media(max-width:1150px){
  .hmi{grid-template-columns:1fr}
  .hmi-side{position:static;height:auto}
  .kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
  .log-wrap{max-height:340px}
  .grid-2{grid-template-columns:1fr}
}
@media(max-width:760px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .views{grid-template-columns:1fr}
  .topbar{flex-wrap:wrap}
}