/* ============================================================
   Sistema de vigilancia IA · YPF
   Dirección de diseño: SALA DE CONTROL INDUSTRIAL.
   Paneles a ras separados por hairlines (no tarjetas flotantes),
   monospace como lengua franca del instrumento, color reservado
   para significado. Tema oscuro único y deliberado: opera 24/7.
   ============================================================ */

:root{
  /* superficies — grafito frío, no negro puro */
  --g-900:#0b0e13;  --g-850:#0e1116;  --g-800:#12161d;
  --g-750:#151a21;  --g-700:#1b212a;  --g-650:#222932;
  --rule:#252d37;   --rule-fuerte:#324050;

  /* tinta */
  --ink:#e6e9ee;  --ink-2:#b7c0cc;  --muted:#8b96a5;  --dim:#5a6472;

  /* marca / interacción — ámbar señal, SOLO para activo, foco y marca */
  --senal:#f0b429;  --senal-tenue:rgba(240,180,41,.13);

  /* estado — reservados, nunca para series */
  --ok:#46a95c;  --warn:#c8862a;  --crit:#e2685f;  --info:#4d8ff0;

  /* series de gráfico — paleta validada (CVD, lightness, contraste) */
  --s1:#e2685f; --s2:#4d8ff0; --s3:#b87d22; --s4:#9d6fd8; --s5:#46a95c;

  --mono:"Cascadia Mono","Cascadia Code",ui-monospace,Consolas,"DejaVu Sans Mono",monospace;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  --rail:56px; --top:44px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--g-850); color:var(--ink);
  font-family:var(--mono); font-size:13px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
button,input,select{font:inherit;color:inherit}
a{color:var(--info);text-decoration:none}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:var(--g-900)}
::-webkit-scrollbar-thumb{background:var(--g-650);border:2px solid var(--g-900)}
::-webkit-scrollbar-thumb:hover{background:var(--rule-fuerte)}
:focus-visible{outline:2px solid var(--senal);outline-offset:1px}

/* ---------- tipografía de instrumento ---------- */
.rotulo{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.prosa{font-family:var(--sans)}

/* ============================ LOGIN ============================ */
.login-bg{
  min-height:100dvh; display:grid; place-items:center; padding:24px;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px),
    radial-gradient(1100px 500px at 50% -10%,#161d27 0%,var(--g-900) 60%);
}
.login-caja{width:min(400px,100%);border:1px solid var(--rule);background:var(--g-800)}
.login-cab{padding:20px 22px 16px;border-bottom:1px solid var(--rule);position:relative}
.login-cab::after{content:"";position:absolute;left:22px;bottom:-1px;width:34px;height:2px;background:var(--senal)}
.login-marca{font-size:15px;font-weight:700;letter-spacing:.02em}
.login-marca span{color:var(--senal)}
.login-sub{margin-top:5px;font-size:11px;color:var(--muted)}
.login-cuerpo{padding:20px 22px 22px;display:flex;flex-direction:column;gap:14px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo input{
  background:var(--g-900);border:1px solid var(--rule);padding:9px 11px;
  color:var(--ink);border-radius:2px;
}
.campo input:focus{border-color:var(--senal);outline:none}
.btn{
  border:1px solid var(--rule-fuerte);background:var(--g-700);color:var(--ink);
  padding:9px 14px;cursor:pointer;border-radius:2px;letter-spacing:.04em;
  text-transform:uppercase;font-size:11px;transition:background .12s,border-color .12s;
}
.btn:hover{background:var(--g-650);border-color:var(--muted)}
.btn-pri{background:var(--senal);color:#1b1405;border-color:var(--senal);font-weight:700}
.btn-pri:hover{background:#ffc23d;border-color:#ffc23d}
.login-error{
  border:1px solid var(--crit);background:rgba(226,104,95,.1);color:var(--crit);
  padding:8px 11px;font-size:11.5px;border-radius:2px;
}
.login-pie{padding:12px 22px;border-top:1px solid var(--rule);font-size:10.5px;color:var(--dim)}

/* ============================ SHELL ============================ */
.app{display:grid;grid-template-columns:var(--rail) 1fr;height:100dvh;overflow:hidden}

/* rail lateral */
.rail{
  background:var(--g-900);border-right:1px solid var(--rule);
  display:flex;flex-direction:column;align-items:center;padding:8px 0;gap:3px;
}
.rail-logo{
  width:34px;height:34px;display:grid;place-items:center;margin-bottom:10px;
  border:1px solid var(--senal);color:var(--senal);font-weight:700;font-size:14px;border-radius:2px;
}
.nav-b{
  width:40px;height:40px;display:grid;place-items:center;color:var(--dim);
  border:1px solid transparent;cursor:pointer;background:none;border-radius:2px;position:relative;
}
.nav-b:hover{color:var(--ink-2);background:var(--g-800)}
.nav-b.on{color:var(--senal);background:var(--senal-tenue);border-color:rgba(240,180,41,.3)}
.nav-b.on::before{content:"";position:absolute;left:-9px;top:9px;bottom:9px;width:2px;background:var(--senal)}
.nav-b svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6}
.nav-b[data-tip]:hover::after{
  content:attr(data-tip);position:absolute;left:46px;top:50%;transform:translateY(-50%);
  background:var(--g-700);border:1px solid var(--rule-fuerte);padding:3px 8px;
  font-size:10.5px;white-space:nowrap;z-index:60;text-transform:uppercase;letter-spacing:.08em;
}
.rail-sep{width:24px;height:1px;background:var(--rule);margin:5px 0}

/* ---------- ayuda contextual: qué hace cada cosa ---------- */
[data-ayuda]{position:relative}
[data-ayuda]::after{
  content:attr(data-ayuda);position:absolute;left:50%;top:calc(100% + 7px);
  transform:translateX(-50%);z-index:200;width:max-content;max-width:270px;
  background:var(--g-700);border:1px solid var(--rule-fuerte);color:var(--ink-2);
  padding:6px 9px;font-size:11px;line-height:1.4;font-family:var(--sans);
  letter-spacing:0;text-transform:none;font-weight:400;white-space:normal;
  opacity:0;visibility:hidden;transition:opacity .12s .35s,visibility 0s .35s;
  box-shadow:0 6px 18px rgba(0,0,0,.5);pointer-events:none;text-align:left;
}
[data-ayuda]::before{
  content:"";position:absolute;left:50%;top:calc(100% + 2px);transform:translateX(-50%);
  border:5px solid transparent;border-bottom-color:var(--rule-fuerte);z-index:201;
  opacity:0;visibility:hidden;transition:opacity .12s .35s,visibility 0s .35s;pointer-events:none;
}
[data-ayuda]:hover::after,[data-ayuda]:hover::before,
[data-ayuda]:focus-visible::after,[data-ayuda]:focus-visible::before{opacity:1;visibility:visible}
[data-ayuda].ay-izq::after{left:auto;right:0;transform:none}
[data-ayuda].ay-izq::before{left:auto;right:14px;transform:none}
/* el rail ya tiene su propio tooltip lateral; no duplicar */
.nav-b[data-ayuda]::after,.nav-b[data-ayuda]::before{display:none}
/* marca de "hay ayuda acá" en los rótulos */
.rotulo[data-ayuda]{border-bottom:1px dotted var(--dim);cursor:help}

/* columna principal */
.main{display:flex;flex-direction:column;min-width:0;overflow:hidden}

/* barra superior de estado */
.top{
  height:var(--top);flex:0 0 auto;display:flex;align-items:center;gap:16px;
  padding:0 14px;background:var(--g-800);border-bottom:1px solid var(--rule);
}
.top-tit{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink)}
.top-tit b{color:var(--senal);font-weight:700}
.tele{display:flex;align-items:center;gap:14px;margin-left:auto;font-size:11px;color:var(--muted)}
.tele .par{display:flex;align-items:center;gap:5px}
.tele .v{color:var(--ink);font-variant-numeric:tabular-nums}
.pulso{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:lat 2s infinite}
.pulso.bad{background:var(--crit)}
@keyframes lat{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.pulso{animation:none}}
/* interruptor del análisis de IA — el consumo de GPU se enciende a mano */
.ia-b{display:flex;align-items:center;gap:7px;background:var(--g-750);cursor:pointer;
  border:1px solid var(--rule-fuerte);color:var(--muted);padding:5px 11px;border-radius:2px;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;transition:all .15s}
.ia-b:hover{border-color:var(--muted);color:var(--ink)}
.ia-led{width:8px;height:8px;border-radius:50%;background:var(--dim);flex:0 0 auto;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5)}
.ia-b.on{background:var(--senal-tenue);border-color:var(--senal);color:var(--senal);font-weight:700}
.ia-b.on .ia-led{background:var(--senal);box-shadow:0 0 7px rgba(240,180,41,.9)}
.ia-b.cargando{opacity:.6;pointer-events:none}
.usuario{display:flex;align-items:center;gap:7px;padding-left:14px;border-left:1px solid var(--rule)}
.usuario .rol{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--senal);
  border:1px solid rgba(240,180,41,.35);padding:1px 5px}
.icon-b{background:none;border:1px solid var(--rule);color:var(--muted);width:26px;height:24px;
  display:grid;place-items:center;cursor:pointer;border-radius:2px}
.icon-b:hover{color:var(--ink);border-color:var(--rule-fuerte)}
.icon-b svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.7}

/* área de vistas */
.vista{flex:1;overflow:auto;padding:14px;display:none}
.vista.on{display:block}
.vista.sin-pad{padding:0}

/* ---------- panel: a ras, hairline, con tick ---------- */
.panel{border:1px solid var(--rule);background:var(--g-750)}
.panel-cab{
  display:flex;align-items:center;gap:9px;padding:8px 11px;
  border-bottom:1px solid var(--rule);background:var(--g-800);position:relative;
}
.panel-cab::before{content:"";width:3px;height:11px;background:var(--senal);flex:0 0 auto}
.panel-cab h2{margin:0;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);font-weight:600}
.panel-cab .der{margin-left:auto;display:flex;align-items:center;gap:7px}
.panel-cuerpo{padding:11px}

/* ---------- barra de herramientas ---------- */
.herr{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 11px;
  background:var(--g-800);border:1px solid var(--rule);border-bottom:none}
.seg{display:flex;border:1px solid var(--rule);border-radius:2px;overflow:hidden}
.seg button{background:var(--g-750);border:none;border-right:1px solid var(--rule);
  color:var(--muted);padding:5px 10px;cursor:pointer;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase}
.seg button:last-child{border-right:none}
.seg button:hover{color:var(--ink);background:var(--g-700)}
.seg button.on{background:var(--senal);color:#1b1405;font-weight:700}
select,.sel{background:var(--g-750);border:1px solid var(--rule);color:var(--ink);
  padding:5px 8px;border-radius:2px;font-size:11px}

/* ============================ MURAL ============================ */
/* El mural ocupa el alto disponible y reparte filas IGUALES: así todos los tiles
   miden lo mismo, sin importar el aspecto nativo de cada cámara. */
.mural{display:grid;gap:6px;padding:6px;height:calc(100dvh - var(--top) - 41px);
  grid-auto-rows:1fr}
.mural[data-l="1"]{grid-template-columns:1fr;grid-template-rows:1fr}
.mural[data-l="4"]{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)}
.mural[data-l="6"]{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}
.mural[data-l="9"]{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}
.mural[data-l="foco"]{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}
.mural[data-l="foco"] .tile:first-child{grid-column:span 2;grid-row:span 2}
@media(max-width:900px){
  .mural[data-l="6"],.mural[data-l="9"]{grid-template-columns:repeat(2,1fr)}
  .mural[data-l="foco"]{grid-template-columns:repeat(2,1fr)}
}
/* paginación cuando hay más cámaras que espacios */
.pag{display:flex;align-items:center;gap:6px}
.pag .n{font-size:10.5px;color:var(--muted);min-width:42px;text-align:center}

/* tile de video con brackets de visor */
.tile{position:relative;background:#05070a;border:1px solid var(--rule);overflow:hidden;
  cursor:pointer;min-height:0}
.tile:hover{border-color:var(--rule-fuerte)}
.tile.sel{border-color:var(--senal)}
/* En el mural: `cover` para que el tile quede LLENO y todos parejos (es lo que
   hacen los VMS profesionales). El campo visual completo se ve en el visor a
   pantalla completa, que usa `contain`. */
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;background:#05070a}
.tile.ia-on{box-shadow:inset 0 0 0 1px rgba(240,180,41,.5)}
.tile::after{  /* scanline sutil: textura de monitor CCTV */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.13) 0 1px,transparent 1px 3px);
}
.brk{position:absolute;width:13px;height:13px;border:1.5px solid rgba(240,180,41,.55);pointer-events:none}
.brk.tl{top:5px;left:5px;border-right:none;border-bottom:none}
.brk.tr{top:5px;right:5px;border-left:none;border-bottom:none}
.brk.bl{bottom:5px;left:5px;border-right:none;border-top:none}
.brk.br{bottom:5px;right:5px;border-left:none;border-top:none}
/* OSD */
.osd{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:7px;
  flex-wrap:wrap;padding:6px 8px;background:linear-gradient(0deg,rgba(4,7,11,.9),transparent);
  pointer-events:none}
.osd .id{color:var(--senal);font-size:10px;letter-spacing:.1em}
.osd .nom{font-size:12px;font-weight:600}
.osd .hd{font-size:9px;border:1px solid var(--info);color:var(--info);padding:0 4px;letter-spacing:.06em}
.osd .cnt{margin-left:auto;font-size:12px;font-variant-numeric:tabular-nums;
  border:1px solid var(--rule-fuerte);padding:1px 7px;background:rgba(11,14,19,.75)}
.osd .cnt.act{border-color:var(--senal);color:var(--senal)}
.zrow{flex-basis:100%;display:flex;gap:4px;flex-wrap:wrap}
.zpill{font-size:9.5px;padding:1px 5px;border:1px solid transparent;letter-spacing:.04em}
.z-libre{color:var(--ok);border-color:rgba(70,169,92,.4);background:rgba(70,169,92,.1)}
.z-ocupado{color:var(--warn);border-color:rgba(200,134,42,.45);background:rgba(200,134,42,.12)}
.z-saturado{color:var(--crit);border-color:rgba(226,104,95,.5);background:rgba(226,104,95,.14)}
.tile-off{position:absolute;inset:0;display:grid;place-items:center;background:#080b0f;
  color:var(--crit);font-size:11px;letter-spacing:.1em;text-transform:uppercase}

/* visor a pantalla completa */
.visor{position:fixed;inset:0;background:rgba(6,9,13,.97);z-index:100;display:none;
  flex-direction:column}
.visor.on{display:flex}
.visor-cab{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--rule)}
.visor-cab .nom{font-size:14px;font-weight:600}
.visor-cuerpo{flex:1;padding:12px;min-height:0;min-width:0}
/* llena todo el espacio disponible respetando el aspecto real de la cámara */
.visor-cuerpo img{width:100%;height:100%;object-fit:contain;display:block;background:#05070a}
/* botón de IA por cámara, dentro del tile */
.ia-tile{position:absolute;top:6px;right:6px;z-index:3;width:24px;height:24px;display:grid;
  place-items:center;background:rgba(8,11,16,.8);border:1px solid var(--rule-fuerte);
  color:var(--dim);cursor:pointer;border-radius:2px;font-size:9px;letter-spacing:.04em;
  font-family:var(--mono);font-weight:700}
.ia-tile:hover{border-color:var(--muted);color:var(--ink)}
.ia-tile.on{color:var(--senal);border-color:var(--senal);background:rgba(240,180,41,.16)}

/* ============================ GESTIÓN DE CÁMARAS ============================ */
.cam-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:1px;
  background:var(--rule)}
.cam-f{background:var(--g-750);padding:0;display:flex;flex-direction:column}
.cam-f .mini{position:relative;aspect-ratio:16/9;background:#05070a;overflow:hidden;cursor:pointer}
.cam-f .mini img{width:100%;height:100%;object-fit:cover;display:block}
.cam-f .mini .sello{position:absolute;left:6px;top:6px;font-size:9.5px;letter-spacing:.09em;
  color:var(--senal);background:rgba(8,11,16,.8);padding:1px 6px;border:1px solid rgba(240,180,41,.3)}
.cam-f .mini .nose{position:absolute;inset:0;display:grid;place-items:center;color:var(--crit);
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.cam-f .cuerpo{padding:9px 11px;display:flex;flex-direction:column;gap:7px;flex:1}
.cam-f .tit{display:flex;align-items:center;gap:8px}
.cam-f .tit b{font-size:13px;font-weight:600}
.cam-f .datos{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;font-size:10.5px;
  color:var(--muted)}
.cam-f .datos dt{color:var(--dim);letter-spacing:.06em;text-transform:uppercase;font-size:9.5px}
.cam-f .datos dd{margin:0;color:var(--ink-2);font-variant-numeric:tabular-nums}
.cam-f .pie{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:7px;
  border-top:1px solid var(--rule)}
/* interruptor */
.sw{position:relative;width:38px;height:20px;background:var(--g-900);border:1px solid var(--rule-fuerte);
  border-radius:11px;cursor:pointer;flex:0 0 auto;transition:.15s}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:var(--dim);transition:.15s}
.sw.on{background:var(--senal-tenue);border-color:var(--senal)}
.sw.on::after{left:20px;background:var(--senal);box-shadow:0 0 6px rgba(240,180,41,.8)}
.sw.wait{opacity:.5;pointer-events:none}
.cam-f .estado-ia{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.cam-f .estado-ia.on{color:var(--senal)}

/* ============================ KPIs ============================ */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border:1px solid var(--rule);border-right:none;margin-bottom:12px}
.kpi{padding:11px 13px;border-right:1px solid var(--rule);background:var(--g-750)}
.kpi .t{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.kpi .v{font-size:27px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.15;margin-top:3px}
.kpi .s{font-size:10.5px;color:var(--muted)}
.kpi.warn .v{color:var(--warn)} .kpi.crit .v{color:var(--crit)} .kpi.ok .v{color:var(--ok)}

/* ============================ GRÁFICOS ============================ */
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:12px}
.grafico{position:relative}
.grafico svg{display:block;width:100%;height:auto;overflow:visible}
.gx{fill:var(--dim);font-size:9px;font-family:var(--mono)}
.gtick{stroke:var(--rule);stroke-width:1}
.leyenda{display:flex;gap:12px;flex-wrap:wrap;padding:7px 11px;border-top:1px solid var(--rule);
  font-size:10.5px;color:var(--muted)}
.leyenda i{display:inline-block;width:9px;height:9px;margin-right:5px;vertical-align:-1px}
.tip{position:absolute;pointer-events:none;background:var(--g-700);border:1px solid var(--rule-fuerte);
  padding:5px 8px;font-size:11px;white-space:nowrap;opacity:0;transition:opacity .1s;z-index:20}
.tip.on{opacity:1}
.tip .k{color:var(--muted);margin-right:6px}

/* ============================ TABLAS ============================ */
.tabla{width:100%;border-collapse:collapse;font-size:11.5px}
.tabla th{text-align:left;padding:7px 10px;border-bottom:1px solid var(--rule-fuerte);
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
  background:var(--g-800);position:sticky;top:0;z-index:2}
.tabla td{padding:6px 10px;border-bottom:1px solid var(--rule);vertical-align:top}
.tabla tbody tr:hover{background:var(--g-700)}
.tabla .num{text-align:right;font-variant-numeric:tabular-nums}
.et{display:inline-block;font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  padding:1px 6px;border:1px solid}
.et-saturacion{color:var(--warn);border-color:rgba(200,134,42,.45);background:rgba(200,134,42,.1)}
.et-intrusion{color:var(--crit);border-color:rgba(226,104,95,.5);background:rgba(226,104,95,.12)}
.et-permanencia{color:var(--s4);border-color:rgba(157,111,216,.45);background:rgba(157,111,216,.1)}
.et-actividad_caja{color:var(--info);border-color:rgba(77,143,240,.45);background:rgba(77,143,240,.1)}
.et-caida{color:var(--crit);border-color:rgba(226,104,95,.7);background:rgba(226,104,95,.2);font-weight:600}

/* ============================ LOG ============================ */
.log{font-size:11.5px;line-height:1.6;padding:0;max-height:calc(100dvh - 190px);overflow:auto;
  background:var(--g-900)}
.log-l{display:flex;gap:10px;padding:3px 11px;border-bottom:1px solid rgba(37,45,55,.5)}
.log-l:hover{background:var(--g-800)}
.log-l .t{color:var(--dim);flex:0 0 auto}
.log-l .n{flex:0 0 54px;text-transform:uppercase;font-size:9.5px;letter-spacing:.08em;padding-top:2px}
.log-l .o{flex:0 0 96px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.log-l .m{flex:1;min-width:0;word-break:break-word}
.n-info{color:var(--info)} .n-aviso{color:var(--warn)} .n-error{color:var(--crit)} .n-debug{color:var(--dim)}
.log-l.nuevo{animation:destello .9s ease-out}
@keyframes destello{from{background:rgba(240,180,41,.14)}to{background:transparent}}
@media (prefers-reduced-motion:reduce){.log-l.nuevo{animation:none}}

/* ============================ BARRAS / MEDIDORES ============================ */
.medidor{height:5px;background:var(--g-900);border:1px solid var(--rule);overflow:hidden}
.medidor > i{display:block;height:100%;background:var(--info)}
.medidor.warn > i{background:var(--warn)} .medidor.crit > i{background:var(--crit)}
.filas{display:flex;flex-direction:column}
.fila{display:flex;align-items:center;gap:10px;padding:7px 11px;border-bottom:1px solid var(--rule)}
.fila:last-child{border-bottom:none}
.fila .n{flex:0 0 116px;color:var(--ink-2)}
.fila .b{flex:1}
.fila .v{flex:0 0 auto;font-variant-numeric:tabular-nums;color:var(--muted);font-size:11px}
.punto{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.p-online{background:var(--ok)} .p-conectando{background:var(--warn)} .p-offline{background:var(--crit)}
.vacio{color:var(--dim);font-size:11.5px;padding:16px;text-align:center;font-style:italic}

/* Mensajes del login: el servidor pone la clase en <body>, así no hace falta
   JavaScript embebido (que el CSP bloquea). */
.login-error{display:none}
body.e1 .err-1{display:block}
body.e2 .err-2{display:block}

/* ============================================================
   MÓVIL — el panel se opera con el pulgar, no con mouse.
   Se respeta el notch/barra inferior del iPhone con safe-area.
   ============================================================ */
@media (max-width: 820px){
  :root{ --rail:0px; --top:auto; }
  .app{ grid-template-columns:1fr; }

  /* el rail pasa a ser una barra inferior, como una app nativa */
  .rail{
    position:fixed; left:0; right:0; bottom:0; top:auto; z-index:90;
    flex-direction:row; justify-content:space-around; align-items:center;
    border-right:none; border-top:1px solid var(--rule); padding:5px 4px;
    padding-bottom:calc(5px + env(safe-area-inset-bottom));
    background:var(--g-900);
  }
  .rail-logo,.rail-sep{ display:none; }
  .nav-b{ width:46px; height:42px; }
  .nav-b.on::before{ left:9px; right:9px; top:auto; bottom:-5px; width:auto; height:2px; }
  .nav-b[data-tip]:hover::after{ display:none; }

  .main{ padding-bottom:60px; }
  .top{
    height:auto; flex-wrap:wrap; gap:8px 12px; padding:8px 12px;
    padding-top:calc(8px + env(safe-area-inset-top));
    position:sticky; top:0; z-index:80;
  }
  .top-tit{ font-size:11px; }
  .tele{ order:3; flex-basis:100%; margin-left:0; gap:10px; font-size:10px; flex-wrap:wrap; }
  .usuario{ padding-left:10px; font-size:11px; }
  .usuario #u-nombre{ display:none; }
  .ia-b{ font-size:10px; padding:5px 9px; }

  .vista{ padding:10px; }
  .herr{ gap:6px; padding:8px; overflow-x:auto; }
  .seg button{ padding:7px 11px; }         /* objetivos táctiles más grandes */
  .btn{ padding:10px 13px; }
  select{ padding:8px 9px; }

  .mural{ height:auto; grid-auto-rows:auto; }
  .mural[data-l="4"],.mural[data-l="6"],.mural[data-l="9"],.mural[data-l="foco"]{
    grid-template-columns:1fr; grid-template-rows:none;
  }
  .mural[data-l="foco"] .tile:first-child{ grid-column:auto; grid-row:auto; }
  .tile{ aspect-ratio:16/9; }

  .kpis{ grid-template-columns:repeat(2,1fr); border-right:1px solid var(--rule); }
  .kpi{ border-bottom:1px solid var(--rule); }
  .kpi .v{ font-size:23px; }
  .cols{ grid-template-columns:1fr; }
  .rejilla{ grid-template-columns:1fr; }
  .cam-grid{ grid-template-columns:1fr; }

  /* tablas: scroll horizontal en vez de romper el layout */
  .tabla{ font-size:11px; }
  .tabla th,.tabla td{ padding:7px 8px; }

  /* la ayuda contextual estorba en táctil */
  [data-ayuda]::after,[data-ayuda]::before{ display:none; }

  /* visor a pantalla completa */
  .visor-cab{ flex-wrap:wrap; gap:7px; padding:8px 10px;
    padding-top:calc(8px + env(safe-area-inset-top)); }
  .visor-cab .btn{ padding:8px 10px; font-size:10px; }
  #visor-zonas{ flex-basis:100%; }
  .visor-cuerpo{ padding:6px; }
}

@media (max-width: 420px){
  .kpis{ grid-template-columns:1fr; }
  .visor-cab .nom{ font-size:12px; }
}

/* ---------- visor: video + registro de la cámara al costado ---------- */
.visor-main{flex:1;display:grid;grid-template-columns:1fr 300px;min-height:0;min-width:0}
.visor-reg{border-left:1px solid var(--rule);background:var(--g-800);display:flex;
  flex-direction:column;min-height:0}
.visor-reg .panel-cab{background:var(--g-750)}
.reg-lista{flex:1;overflow-y:auto;min-height:0}
.reg-i{display:flex;flex-direction:column;gap:3px;padding:8px 11px;
  border-bottom:1px solid var(--rule);cursor:default}
.reg-i:hover{background:var(--g-750)}
.reg-i .l1{display:flex;align-items:center;gap:7px}
.reg-i .h{font-family:var(--mono);font-size:10.5px;color:var(--muted);white-space:nowrap}
.reg-i .d{font-size:11.5px;color:var(--ink-2);line-height:1.35}
.reg-i .clip{align-self:flex-start;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--rule-fuerte);background:var(--g-700);color:var(--ink-2);
  padding:2px 7px;cursor:pointer;border-radius:2px;margin-top:2px}
.reg-i .clip:hover{border-color:var(--senal);color:var(--senal)}
@media(max-width:820px){
  .visor-main{grid-template-columns:1fr;grid-template-rows:1fr auto}
  .visor-reg{border-left:none;border-top:1px solid var(--rule);max-height:38vh}
}

/* ---------- personal: turnos + ranking ---------- */
.turno-form{display:flex;gap:8px;padding:10px 12px;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.turno-form select,.turno-form input{flex:1;min-width:110px}
.turno-form input{background:var(--g-700);border:1px solid var(--rule-fuerte);color:var(--ink);
  padding:7px 9px;font:inherit;font-size:12px;border-radius:2px}
.turno-form input:focus{outline:none;border-color:var(--senal)}
.aviso-score{margin-left:auto;color:var(--dim);font-size:10.5px;max-width:46ch;text-align:right;line-height:1.3}
.rk-fila{cursor:pointer}
.rk-fila:hover td{background:var(--g-750)}
.score-b{display:flex;align-items:center;gap:8px}
.score-b .medidor{flex:1}
.score-b b{font-family:var(--mono);font-size:12px;min-width:24px;text-align:right}
@media(max-width:820px){
  .aviso-score{flex-basis:100%;max-width:none;text-align:left;margin-left:0}
}

/* ---------- manual de uso ---------- */
.man{max-width:860px;display:flex;flex-direction:column;gap:14px}
.man-c{padding:14px 16px;font-size:12.5px;line-height:1.65;color:var(--ink-2)}
.man-c p{margin:0 0 10px}
.man-c p:last-child{margin-bottom:0}
.man-c h3{margin:14px 0 6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
.man-c ul{margin:0 0 10px;padding-left:18px}
.man-c li{margin:0 0 6px}
.man-c b{color:var(--ink)}
.man-c .tabla{margin:8px 0}
.man-adv{border-left:2px solid var(--senal);background:var(--senal-tenue);
  padding:9px 12px;color:var(--ink-2)}

/* ---------- selector de fechas (analítica) ---------- */
.fecha{background:var(--g-700);border:1px solid var(--rule-fuerte);color:var(--ink);
  padding:5px 7px;font:inherit;font-size:11px;border-radius:2px;color-scheme:dark}
.fecha:focus{outline:none;border-color:var(--senal)}

/* ---------- campanita de notificaciones ---------- */
#b-push.on{color:var(--senal);border-color:var(--senal)}
#b-push.wait{opacity:.4;pointer-events:none}