/* COS Seguridad — tema claro "Opción B": barra lateral azul marino, fondo crema, tarjetas blancas, acento dorado del escudo */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#f4f3ee; --panel:#ffffff; --panel2:#f7f6f1; --panel3:#eeece4; --border:#e4e2da; --border2:#d5d2c6;
  --text:#16202e; --muted:#6b7280; --accent:#2f6fd6;
  --navy:#0f1b2d; --navy-2:#16263d; --navy-text:#c9d3e3;
  /* --gold: acento (botones, activo). --gold-2: dorado legible sobre fondo claro (enlaces, títulos). */
  --gold:#e2b23a; --gold-2:#9a6d0b; --gold-dim:#c99a26; --gold-soft:rgba(226,178,58,.16); --gold-ink:#3a2a03;
  --green:#3b8a2e; --red:#c8372d; --amber:#c2611f;
  --red-bg:#fbe3e0; --amber-bg:#fdebd9; --green-bg:#e6f2dc; --gold-bg:#fbf1d6;
  --cv:var(--gold); --cv-dim:var(--gold-dim);
  --mono:'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  --head:Inter, -apple-system, 'Segoe UI', Arial, sans-serif;
  --sidebar:240px;
  color-scheme: light;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{
  background:var(--bg); color:var(--text); min-height:100vh;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; font-size:14px;
}
body.booting main{visibility:hidden;}
/* Cambio de módulo más fluido: mientras arranca, la franja del menú ya está pintada (no "salta"), el menú queda
   fijo entre páginas (transición entre documentos de Chrome/Edge) y el contenido aparece con un fundido corto. */
@media (min-width: 861px){ body.booting{background:linear-gradient(90deg, var(--navy) var(--sidebar), var(--bg) var(--sidebar));} }
@view-transition{navigation:auto;}
.sidebar{view-transition-name:menu-lateral;}
::view-transition-group(root){animation-duration:.14s;}
main{animation:cos-entrar .16s ease-out;}
@keyframes cos-entrar{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion: reduce){ main{animation:none;} ::view-transition-group(*){animation:none;} }
a{color:var(--gold-2);}
.hidden{display:none !important;}
::selection{background:rgba(226,178,58,.35);}

/* ---------- Barra lateral ---------- */
.sidebar{
  position:fixed; inset:0 auto 0 0; width:var(--sidebar); z-index:20;
  display:flex; flex-direction:column; gap:6px; padding:18px 14px;
  background:var(--navy); color:var(--navy-text);
}
.brand{display:flex; align-items:center; gap:11px; padding:2px 4px 18px; margin-bottom:4px;}
.logo{width:44px; height:44px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:20px; background:var(--gold);}
img.logo{background:none;}
.brand-name{font-weight:700; font-size:16px; line-height:1.1; color:#fff;}
.brand-sub{font-size:11.5px; color:#8fa0bb; margin-top:2px;}
.sidebar .menu-toggle{display:none; margin-left:auto;}
.sidebar nav{display:flex; flex-direction:column; gap:3px; flex:1; overflow-y:auto;}
.nav-group{font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#6f819e; padding:14px 10px 6px;}
.sidebar nav a{
  display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:10px;
  color:var(--navy-text); text-decoration:none; font-size:13.5px; font-weight:500;
}
.sidebar nav a:hover{background:rgba(255,255,255,.05); color:#fff;}
.sidebar nav a.active{background:rgba(255,255,255,.09); color:var(--gold); font-weight:600;}
.ni{width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;}
.ni svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.userbox{display:flex; flex-direction:column; gap:10px; padding:12px; border-radius:12px; background:var(--navy-2);}
.userbox .who{display:flex; align-items:center; gap:10px;}
.userbox .ubtns{display:flex; gap:8px;}
.userbox .ubtns button{flex:1; background:transparent; color:#e6ecf5; border:1px solid #33465f; border-radius:999px; padding:6px 10px; font-size:12px; font-weight:600; box-shadow:none;}
.userbox .ubtns button:hover{border-color:var(--gold); color:var(--gold); filter:none;}
.avatar{
  width:34px; height:34px; border-radius:50%; background:var(--gold); color:var(--gold-ink);
  display:flex; align-items:center; justify-content:center; font-weight:800; flex-shrink:0;
}
.uinfo{flex:1; min-width:0;}
.uname{font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#fff;}
.urole{font-size:10.5px; color:#8fa0bb; text-transform:uppercase; letter-spacing:.06em;}
.demo-badge{font-size:10.5px; text-align:center; color:var(--gold); border:1px dashed rgba(226,178,58,.5); border-radius:8px; padding:5px; margin-top:6px;}
.live-clock{font-family:var(--mono); font-size:11px; color:#8fa0bb; text-align:center; padding:6px 0 0;}
body.with-shell main{margin-left:var(--sidebar);}
main{padding:26px 32px 40px;}
.page{max-width:1280px; margin:0 auto; display:flex; flex-direction:column; gap:18px;}
.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:2px;}
.page-head h1{margin:0; font-size:28px; font-weight:700; letter-spacing:-.01em; color:var(--text);}
.page-head .sub{color:var(--muted); font-size:14px; margin-top:4px;}

@media (max-width: 860px){
  .sidebar{position:sticky; top:0; inset:auto; width:auto; height:auto; padding:8px 12px; gap:0;}
  .brand{padding:2px 0; margin:0;}
  .logo{width:36px; height:36px;}
  .sidebar .menu-toggle{display:flex;}
  .sidebar nav, .sidebar .userbox, .sidebar .demo-badge, .sidebar .live-clock{display:none;}
  .sidebar.open nav, .sidebar.open .userbox, .sidebar.open .demo-badge{display:flex;}
  .sidebar.open nav{padding-top:8px;}
  body.with-shell main{margin-left:0;}
  .row .field{flex:1 1 100%;}
  main{padding:16px 16px 32px;}
  .page-head h1{font-size:23px;}
}

/* ---------- Componentes ---------- */
.card{background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:18px; min-width:0;}
.card h2{font-size:15px; margin:0 0 14px; display:flex; align-items:center; gap:9px; font-weight:600; color:var(--text);}
.card h2 .right{margin-left:auto; font-weight:500;}
.stepnum{
  width:24px; height:24px; border-radius:50%; background:var(--gold-bg); border:1px solid rgba(226,178,58,.6);
  display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--gold-2); flex-shrink:0; font-weight:700;
}
.row{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end;}
.grid2{display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); gap:18px;}
label{font-size:12px; color:var(--muted); display:block; margin-bottom:5px; font-weight:500;}
label.check{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text); margin:4px 0;}
.field{display:flex; flex-direction:column; min-width:160px;}
.hint{font-size:12px; color:var(--muted); margin-top:6px; line-height:1.5;}
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time], input[type=search], input[type=datetime-local], select, textarea{
  background:#fff; border:1px solid var(--border2); color:var(--text);
  border-radius:12px; padding:9px 12px; font-size:13px; font-family:inherit; min-width:0;
}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(226,178,58,.22);}
input[type=file]{color:var(--text); font-size:13px; max-width:100%;}
input[type=range]{accent-color:var(--gold-dim);}
input[type=checkbox]{accent-color:var(--gold-dim); width:16px; height:16px;}
textarea{width:100%; resize:vertical; min-height:70px;}

button{
  background:var(--gold); color:var(--gold-ink); border:1px solid var(--gold);
  padding:9px 18px; border-radius:999px; font-weight:600; font-size:13px; cursor:pointer; font-family:inherit; white-space:nowrap;
}
button:hover{background:#d6a52c; border-color:#d6a52c;}
button.secondary{background:#fff; color:var(--text); border:1px solid var(--border2);}
button.secondary:hover{border-color:var(--gold); background:#fff;}
button.dark{background:var(--navy); color:#fff; border-color:var(--navy);}
button.dark:hover{background:var(--navy-2);}
button.danger{background:#fff; color:var(--red); border:1px solid rgba(200,55,45,.4);}
button.danger:hover{background:var(--red-bg);}
button.small{padding:5px 12px; font-size:12px;}
button:disabled{opacity:.45; cursor:not-allowed;}
.icon-btn{
  background:#fff; border:1px solid var(--border2); color:var(--text); width:34px; height:34px; padding:0;
  display:flex; align-items:center; justify-content:center; border-radius:10px; font-size:15px;
}
.sidebar .icon-btn{background:var(--navy-2); border-color:#33465f; color:#fff;}

/* Indicadores (KPI) */
.statgrid{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; margin-bottom:14px;}
.stat{background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:14px 16px;}
.stat .n{font-size:24px; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; letter-spacing:-.01em;}
.stat .l{font-size:12px; color:var(--muted); margin-top:2px;}
.stat .d{font-size:11.5px; color:var(--muted); margin-top:4px;}
.stat.crit{background:var(--red-bg); border-color:transparent;} .stat.crit .n, .stat.crit .l{color:var(--red);}
.stat.warn{background:var(--amber-bg); border-color:transparent;} .stat.warn .n, .stat.warn .l{color:var(--amber);}
.stat.ok{background:var(--green-bg); border-color:transparent;} .stat.ok .n, .stat.ok .l{color:var(--green);}
.stat.gold{background:var(--gold-bg); border-color:transparent;} .stat.gold .n, .stat.gold .l{color:var(--gold-2);}

.dirbar{display:flex; height:26px; border-radius:8px; overflow:hidden; border:1px solid var(--border); margin-bottom:6px;}
.dirbar .seg{display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff;}
.dirbar .izq{background:#2f6fd6;} .dirbar .cen{background:#3b8a2e;} .dirbar .der{background:#e2b23a; color:var(--gold-ink);}
.dirbar .empty{background:var(--panel2); color:var(--muted);}
.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--muted); margin-bottom:16px;}
.legend span{display:flex; align-items:center; gap:5px;}
.sw{width:10px; height:10px; border-radius:50%; display:inline-block; flex-shrink:0;}

.timeline{position:relative; height:34px; background:var(--panel2); border:1px solid var(--border); border-radius:8px; overflow:hidden; margin-bottom:14px;}
.timeline.seekable{cursor:pointer;}
.timeline .tick{position:absolute; top:0; bottom:0; width:2px;}

/* Anillo y medidor (mismo estilo que el panel de ejemplo) */
.donut{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.donut .ring{width:150px; height:150px; border-radius:50%; position:relative; flex-shrink:0;}
.donut .ring::after{content:''; position:absolute; inset:22px; border-radius:50%; background:var(--panel);}
.donut .ring .c{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:1; font-size:12px; color:var(--muted);}
.donut .ring .c b{font-size:28px; color:var(--text);}
.donut ul{list-style:none; margin:0; padding:0; flex:1; min-width:160px; display:flex; flex-direction:column; gap:8px; font-size:13px;}
.donut li{display:flex; align-items:center; gap:8px;} .donut li span:last-child{margin-left:auto; font-weight:600;}
.gauge{position:relative; width:220px; height:120px; margin:0 auto; overflow:hidden;}
.gauge .arc{width:220px; height:220px; border-radius:50%; position:absolute; top:0; left:0;}
.gauge .arc::after{content:''; position:absolute; inset:28px; border-radius:50%; background:var(--panel);}
.gauge .v{position:absolute; bottom:0; left:0; right:0; text-align:center; font-size:34px; font-weight:700; line-height:1;}
.gauge .v small{display:block; font-size:12px; color:var(--muted); font-weight:500; margin-top:4px;}

/* ---------- Tablas ---------- */
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:12px; border:1px solid var(--border);}
table{width:100%; border-collapse:collapse; font-size:13px;}
th, td{padding:11px 12px; border-bottom:1px solid var(--border); text-align:left; vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
thead th{color:var(--muted); text-transform:uppercase; font-size:11px; letter-spacing:.06em; font-weight:600; white-space:nowrap;
  background:#faf9f5; position:sticky; top:0; z-index:1;}
td.num, th.num{text-align:right; font-variant-numeric:tabular-nums;}
tbody tr:hover{background:#fbfaf6;}
tr.clickable{cursor:pointer;}
.actions{display:flex; gap:6px; justify-content:flex-end;}
/* Filtros por columna (lupa) */
.th-in{display:inline-flex; align-items:center; gap:4px;}
.th-sort{cursor:pointer; user-select:none;}
.th-sort:hover{color:var(--text);}
.th-lupa{background:none; border:none; padding:0 2px; font-size:12px; cursor:pointer; opacity:.5; filter:grayscale(1); border-radius:4px;}
.th-lupa:hover, .th-lupa.on{opacity:1; filter:none; background:none;}
tr.filter-row th{padding:4px 6px 8px; background:#faf9f5; position:sticky; top:37px; z-index:1;}
tr.filter-row input, tr.filter-row select{width:100%; min-width:70px; padding:5px 8px; font-size:12px; text-transform:none; letter-spacing:0; font-weight:500; border-radius:8px;}
.tf-bar{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:12px;}
.tf-search{position:relative; flex:1; min-width:200px; max-width:420px;}
.tf-search input{width:100%; padding-left:32px; border-radius:999px;}
.tf-search::before{content:'🔍'; position:absolute; left:11px; top:50%; transform:translateY(-50%); font-size:12px; opacity:.6;}
.tf-count{font-size:12px; color:var(--muted);}
mark.hl{background:rgba(226,178,58,.4); color:inherit; border-radius:2px; padding:0 1px;}

.badge{display:inline-block; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:600; white-space:nowrap; background:var(--panel3); color:var(--muted);}
.badge.admin{background:var(--gold-bg); color:var(--gold-2);}
.badge.supervisor{background:#e3ecfa; color:#2457a8;}
.badge.operador{background:#e6f2dc; color:#3b6d11;}
.badge.on{background:var(--green-bg); color:var(--green);}
.badge.off{background:var(--panel3); color:var(--muted);}
.badge.warn{background:var(--amber-bg); color:var(--amber);}
.lab{display:inline-block; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; white-space:nowrap;}
.lab.incidente{background:var(--red-bg); color:var(--red);} .lab.normal{background:var(--green-bg); color:var(--green);} .lab.descartado{background:var(--panel3); color:var(--muted);}
.badge.live{color:var(--green); background:var(--green-bg);}
.badge.live::before{content:''; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--green); margin-right:6px; animation:blink 1.4s infinite;}

.note{background:var(--gold-bg); border:1px solid rgba(226,178,58,.45); border-radius:12px; padding:10px 14px; font-size:12.5px; color:#6b4d08; line-height:1.5;}
.note.info{background:#e9f0fb; border-color:#bcd0f0; color:#2457a8;}
.empty-state{text-align:center; color:var(--muted); padding:28px 12px; font-size:13px;}

/* ---------- Video ---------- */
.video-wrap{position:relative; background:#000; border-radius:12px; overflow:hidden; border:1px solid var(--border2);}
.video-wrap video, .video-wrap img.snap{width:100%; display:block; max-height:540px; background:#000; object-fit:contain;}
.overlay-canvas, .zone-canvas{position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none;}
.zone-canvas.drawing{pointer-events:auto; cursor:crosshair; touch-action:none;}
.osd{position:absolute; font-family:var(--mono); font-size:11px; color:#f0cf7a; text-shadow:0 0 4px #000; background:rgba(0,0,0,.45); padding:2px 6px; border-radius:4px;}
.osd-top{top:8px; left:10px;} .osd-clock{top:8px; right:10px;}
.progress-wrap{height:8px; background:var(--panel3); border-radius:5px; overflow:hidden; margin-top:10px;}
.progress-bar{height:100%; width:0%; background:var(--gold); transition:width .2s;}
.zone-item{display:flex; align-items:center; gap:8px; padding:7px 12px; background:var(--panel2); border:1px solid var(--border); border-radius:10px; margin-bottom:6px; font-size:13px;}
.zone-item .name{flex:1;}
.engine-line{display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; color:var(--muted);}
.dot{width:7px; height:7px; border-radius:50%; display:inline-block; background:var(--muted);}
.dot.ok{background:var(--green);}
.dot.warn{background:var(--amber);}
.dot.pulse{animation:blink 1.4s infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.3;}}

/* ---------- Gráficos ---------- */
.chart-box{position:relative; height:260px;}
.hbar{display:flex; align-items:center; gap:10px; margin-bottom:9px; font-size:13px;}
.hbar .hl{width:38%; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.hbar .ht{flex:1; height:10px; background:var(--panel3); border-radius:6px; overflow:hidden;}
.hbar .hf{height:100%; background:var(--red); border-radius:6px;}
.hbar .hf.gold{background:var(--gold);}
.hbar .hv{width:56px; text-align:right; font-weight:600; font-variant-numeric:tabular-nums;}

/* ---------- Modal / avisos ---------- */
.modal-back{position:fixed; inset:0; background:rgba(15,27,45,.45); z-index:50; display:flex; align-items:center; justify-content:center; padding:16px;}
.modal{background:var(--panel); border:1px solid var(--border); border-radius:18px; width:100%; max-width:460px; max-height:calc(100vh - 32px); overflow:auto; box-shadow:0 20px 60px rgba(15,27,45,.25);}
.modal h3{margin:0; padding:18px 20px 0; font-size:18px; font-weight:700;}
.modal-body{padding:14px 20px; display:flex; flex-direction:column; gap:12px;}
.modal-actions{display:flex; justify-content:flex-end; gap:8px; padding:0 20px 18px;}
.form-error{color:var(--red); font-size:12px;}
#toasts{position:fixed; right:16px; bottom:16px; z-index:60; display:flex; flex-direction:column; gap:8px; max-width:calc(100vw - 32px);}
.toast{background:var(--navy); color:#fff; padding:11px 16px; border-radius:12px; font-size:13px; box-shadow:0 8px 24px rgba(15,27,45,.25); border-left:4px solid var(--gold); transition:opacity .3s, transform .3s;}
.toast.err{border-left-color:#ef6a5f;}
.toast.out{opacity:0; transform:translateY(6px);}

/* ---------- Inicio de sesión ---------- */
.auth-wrap{min-height:100vh; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);}
.auth-hero{position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:40px 32px; background:var(--navy); color:#fff;}
.auth-hero img{width:min(280px, 58%);}
.auth-hero h2{font-size:32px; font-weight:700; margin:22px 0 6px;}
.auth-hero p{color:var(--navy-text); max-width:420px; margin:0 auto; line-height:1.6;}
.auth-feats{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin-top:28px; max-width:520px; width:100%;}
.auth-feats div{background:var(--navy-2); border:1px solid #2a3c57; border-radius:14px; padding:12px 8px; font-size:12px; color:var(--navy-text);}
.auth-feats b{display:block; font-size:20px; margin-bottom:4px;}
.auth-side{display:flex; align-items:center; justify-content:center; padding:24px 16px;}
.auth-card{width:100%; max-width:400px; background:var(--panel); border:1px solid var(--border); border-radius:20px; padding:30px 28px; box-shadow:0 20px 50px rgba(15,27,45,.08);}
.auth-card .brand{padding:0 0 18px;}
.auth-card .brand-name{color:var(--text);} .auth-card .brand-sub{color:var(--muted);}
.auth-card h1{font-size:24px; font-weight:700; margin:0 0 4px;}
.auth-card .field{margin-bottom:12px;}
.auth-card button[type=submit]{width:100%; padding:12px; margin-top:4px; font-size:14px;}
.auth-links{display:flex; justify-content:space-between; margin-top:12px; font-size:12px;}
.linkbtn{background:none; border:none; color:var(--gold-2); padding:0; font-weight:500; font-size:12px; cursor:pointer;}
.linkbtn:hover{background:none; text-decoration:underline;}
.secure-note{display:flex; align-items:center; gap:8px; font-size:11px; color:var(--muted); margin-top:16px; padding-top:12px; border-top:1px solid var(--border);}
.demo-accounts{margin-top:18px; border-top:1px solid var(--border); padding-top:14px;}
.demo-accounts .acc{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:6px 0; font-size:12px;}
.demo-accounts code{font-family:var(--mono); color:var(--muted);}
@media (max-width: 900px){
  .auth-wrap{grid-template-columns:1fr;}
  .auth-hero{padding:28px 16px 20px;}
  .auth-hero img{width:130px;}
  .auth-hero h2{font-size:26px; margin-top:12px;}
  .auth-feats{display:none;}
}
/* =====================================================================
   Centro de monitoreo: mismo tema claro que el resto (menú lateral, tarjetas blancas).
   Solo los videos, el mosaico y la línea de tiempo quedan oscuros para ver bien las cámaras.
   Prioridades: rojo (crítica) / naranja (alta) / amarillo (media).
   ===================================================================== */
body.vms{--crit:#c8372d; --high:#c2611f; --med:#b38a12; --ok:#3b8a2e;}
body.vms button.ghost{background:transparent; border:none; color:var(--muted); padding:4px 8px;}
body.vms button.ghost:hover{color:var(--text); background:var(--panel3);}
body.vms .pbar > div{background:var(--gold);}

/* Cabecera de la página: título, buscador y sucursal */
.sala-head{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap;}
.sala-head .tools{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.vms-search .box{width:340px; max-width:100%; position:relative;}
.vms-search input{width:100%; border-radius:999px !important; padding-left:34px !important;}
.vms-search .box::before{content:'\1F50D'; position:absolute; left:12px; top:50%; transform:translateY(-50%); font-size:12px; opacity:.6;}

/* Pestañas tipo píldora */
.vms-tabs{display:flex; gap:6px; flex-wrap:wrap; padding:6px; background:var(--panel); border:1px solid var(--border); border-radius:999px; width:max-content; max-width:100%;}
body.vms .vms-tabs button{background:transparent; border:1px solid transparent; color:var(--muted); font-weight:500; padding:7px 14px;}
body.vms .vms-tabs button:hover{background:var(--panel2); color:var(--text);}
body.vms .vms-tabs button.on{background:var(--navy); border-color:var(--navy); color:#fff;}
.vms-tabs .count{display:inline-flex; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--crit); color:#fff; font-size:11px; align-items:center; justify-content:center; margin-left:4px;}

/* Cuerpo: contenido + panel de alarmas */
.vms-body{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:18px; align-items:start;}
.vms-body.full{grid-template-columns:minmax(0,1fr);}
.vms-pane{display:flex; flex-direction:column; gap:18px; min-width:0;}
@media (max-width: 1100px){ .vms-body{grid-template-columns:1fr;} }

/* Panel de alarmas */
.alarm-stream{background:var(--panel); border:1px solid var(--border); border-radius:16px; position:sticky; top:16px; max-height:calc(100vh - 32px); display:flex; flex-direction:column;}
.alarm-stream .as-head{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border); font-weight:600;}
.alarm-stream .as-list{overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:10px;}
.alarm-card{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:10px; cursor:pointer;}
.alarm-card:hover{border-color:var(--border2); background:var(--panel2);}
.alarm-card.sel{border-color:var(--gold); box-shadow:0 0 0 2px rgba(226,178,58,.25);}
.alarm-card .ac-top{display:flex; justify-content:space-between; gap:8px;}
.alarm-card .ac-title{font-weight:600; font-size:13px;}
.alarm-card .ac-time{font-size:11px; color:var(--muted); margin-top:2px;}
.alarm-card .ac-shots{display:grid; gap:4px; margin:8px 0; grid-template-columns:repeat(var(--n,1), 1fr);}
.alarm-card .ac-shots img{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:6px; background:#000;}
.alarm-card .ac-foot{display:flex; align-items:center; gap:6px; border-top:1px solid var(--border); padding-top:8px;}
.alarm-card .ac-foot .src{flex:1; font-size:11px; color:var(--muted); line-height:1.3;}
.alarm-card .ac-foot .src b{display:block; color:var(--text); font-size:12px;}
.prio{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; white-space:nowrap;}
.prio::before{content:''; width:7px; height:7px; border-radius:50%; background:currentColor;}
.prio.alta{color:var(--crit);} .prio.media{color:var(--high);} .prio.baja{color:var(--med);}
.st{display:inline-flex; align-items:center; gap:5px; font-size:11px; padding:2px 9px; border-radius:999px; background:var(--panel3); color:var(--muted);}
.st.nuevo{background:var(--gold-bg); color:var(--gold-2);} .st.incidente{background:var(--red-bg); color:var(--red);} .st.normal{background:var(--green-bg); color:var(--green);} .st.descartado{color:var(--muted);}

/* Mosaico de cámaras (oscuro, como un monitor) */
.cam-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:12px;}
.cam-grid.focus{grid-template-columns:1fr;}
.cam-tile{background:var(--panel); border:1px solid var(--border); border-radius:12px; overflow:hidden; position:relative;}
.cam-tile.alarm{border:2px solid var(--crit); box-shadow:0 0 0 3px rgba(200,55,45,.15);}
.cam-tile .view{position:relative; aspect-ratio:16/9; background:#000;}
.cam-tile video{width:100%; height:100%; object-fit:contain; display:block;}
.cam-tile canvas{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;}
.cam-tile .rec{position:absolute; top:8px; left:8px; font-size:10px; font-weight:800; color:#fff; background:rgba(0,0,0,.45); padding:2px 6px; border-radius:4px; display:flex; align-items:center; gap:4px;}
.cam-tile .rec::before{content:''; width:7px; height:7px; border-radius:50%; background:#ef4444;}
.cam-tile .tools{position:absolute; top:6px; right:6px; display:flex; gap:4px;}
body.vms .cam-tile .tools button{width:26px; height:26px; padding:0; background:rgba(15,27,45,.7); border:1px solid rgba(255,255,255,.15); border-radius:6px; font-size:12px; color:#fff;}
body.vms .cam-tile .tools .badge-n{background:var(--crit); border-color:var(--crit); width:auto; padding:0 6px; font-weight:800;}
.cam-tile .bar{display:flex; align-items:center; justify-content:space-between; padding:8px 12px; font-size:13px; font-weight:500;}
.cam-tile .bar small{color:var(--muted); font-family:var(--mono);}
.cam-tile.empty .view{display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:12px;
  background:repeating-linear-gradient(45deg, #f1efe8 0 6px, #eceae2 6px 12px);}
.master{display:flex; align-items:center; gap:10px; background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:10px 14px;}
.master input[type=range]{flex:1;}
.master .clock{font-family:var(--mono); font-size:18px; font-weight:700; min-width:90px;}

/* Mapa */
.map-stats{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:12px;}
.map-stat{background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:14px; display:flex; justify-content:space-between; align-items:center;}
.map-stat b{display:block; font-size:24px; font-weight:700;} .map-stat span{font-size:12px; color:var(--muted);}
.map-stat i{width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-style:normal; font-size:18px; background:var(--gold-bg);}
.map-wrap{position:relative; background:var(--panel2); border:1px solid var(--border); border-radius:12px; overflow:hidden; user-select:none;}
.map-wrap img.plan{display:block; width:100%; height:auto;}
.map-wrap img.plan.dark{filter:invert(1) hue-rotate(180deg) brightness(.82) contrast(.92) saturate(.6);}
.map-wrap svg{position:absolute; inset:0; width:100%; height:100%;}
.map-empty{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:420px; color:var(--muted); text-align:center; padding:20px;}
.cam-pin{cursor:pointer;}
.cam-pin .ring{fill:#fff; stroke:var(--navy); stroke-width:2;}
.cam-pin.alert .ring{stroke:var(--crit); stroke-width:3;}
.cam-pin.alert .pulse{fill:none; stroke:var(--crit); stroke-width:2; animation:pinpulse 1.6s infinite;}
.cam-pin.sel .ring{stroke:var(--gold); stroke-width:4;}
@keyframes pinpulse{0%{r:14px; opacity:.9;} 100%{r:30px; opacity:0;}}
.map-tag{position:absolute; transform:translate(-50%, 0); background:var(--navy); color:#fff; border-radius:6px; padding:3px 8px; font-size:11px; white-space:nowrap; pointer-events:none;}
.map-tag.alert{background:var(--crit);}
.map-tools{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.map-side img{width:100%; border-radius:8px; aspect-ratio:16/9; object-fit:cover; background:#000;}
.cam-chip{display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; border:1px dashed var(--border2); font-size:12px; cursor:grab; background:var(--panel);}
.cam-chip.placed{border-style:solid; opacity:.55;}

/* Detalle del evento (panel lateral) */
.ev-back{position:fixed; inset:0; background:rgba(15,27,45,.45); z-index:60; display:flex; justify-content:flex-end;}
.ev-panel{width:min(980px, 100%); height:100%; overflow-y:auto; background:var(--panel); box-shadow:-20px 0 60px rgba(15,27,45,.25);}
.ev-head{display:flex; align-items:center; justify-content:space-between; padding:16px 22px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--panel); z-index:2;}
.ev-head h3{margin:0; font-size:17px; font-weight:600;}
.ev-video{position:relative; margin:18px 22px 0; border-radius:12px; overflow:hidden; background:#000;}
.ev-video video{width:100%; display:block; max-height:460px;}
.ev-video canvas{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;}
body.vms .ev-video .dl{position:absolute; top:10px; right:10px; width:34px; height:34px; padding:0; background:rgba(15,27,45,.75); border:1px solid rgba(255,255,255,.15); color:#fff;}
.ev-body{padding:18px 22px 24px;}
.ev-title{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--border);}
.ev-title h4{margin:0 0 4px; font-size:18px; font-weight:600;}
.ev-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px 28px; padding:16px 0; border-bottom:1px solid var(--border);}
.ev-grid label{font-size:12px; color:var(--muted); font-weight:500; margin-bottom:3px;}
.ev-grid div > span{font-size:13px;}
.ev-actions{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; margin-top:14px;}
@media (max-width: 700px){ .ev-grid{grid-template-columns:1fr;} .vms-search .box{width:100%;} }

/* Informe Word del incidente (Revisión rápida) */
.inf-panel{width:min(900px, 100%); background:var(--panel);}
.inf-body{display:flex; flex-direction:column; gap:10px;}
.inf-h{margin:14px 0 4px; font-size:14px; display:flex; gap:10px; align-items:baseline; border-bottom:1px solid var(--border); padding-bottom:6px;}
.inf-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px;}
.inf-body input[type=text], .inf-body input[type=date], .inf-body textarea{width:100%;}
.inf-moms{display:flex; flex-direction:column; gap:10px;}
.inf-mom{border:1px solid var(--border); border-radius:12px; padding:10px; display:flex; flex-direction:column; gap:8px; background:var(--panel2);}
.inf-mom.off{opacity:.5;}
.inf-mom-top{display:flex; align-items:center; gap:10px;} .inf-mom-top .grow{flex:1;}
.inf-hora{width:110px !important; font-family:var(--mono); font-weight:700;}
.inf-fotos{display:flex; flex-wrap:wrap; gap:8px;}
.inf-foto{display:flex; flex-direction:column; gap:4px; text-transform:none; letter-spacing:0; font-size:12px; color:var(--text); margin:0; cursor:pointer;}
.inf-foto img{width:220px; border-radius:8px; display:block; border:2px solid var(--gold);}
.inf-foto.off img{border-color:transparent; opacity:.45;}
.inf-foto span{display:flex; align-items:center; gap:6px;}

/* Editor de muestras (marcar personas en una foto congelada) */
.me-stage{background:#000; border-radius:12px; overflow:hidden; display:flex; justify-content:center; user-select:none;}
.me-cv{display:block; cursor:crosshair; touch-action:none; max-width:100%;}

.me-actions{position:sticky; bottom:0; background:var(--panel); padding:12px 18px 14px !important; border-top:1px solid var(--border); margin-top:4px;}