/* ═══════════════════════════════════════════════════════════════════════
   NVR Microwave · sistema de diseño (F1)
   1. Tokens  2. Base  3. Componentes  4. Shell (cabecera/login/menú)
   5. Visor (aside + reproductor)  6. Páginas  7. Responsivo / print
   Los colores del reproductor y de la multivista usan --video-*.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root{
  color-scheme:light;
  /* neutros */
  --bg:#f5f7fb; --surface:#ffffff; --surface-2:#f1f4f9; --surface-3:#e6ebf3;
  --line:#d5dde8; --line-strong:#7c8aa0;
  --txt:#16202f; --txt-2:#3f5270; --txt-3:#586783;
  /* acento */
  --accent:#2563eb; --accent-strong:#1d4ed8; --accent-soft:#e8f0fe; --on-accent:#ffffff;
  /* semánticos: --x = relleno/indicador · --x-txt = texto AA · --x-soft = fondo suave */
  --ok:#16a34a; --ok-strong:#15803d; --ok-txt:#166534; --ok-soft:#e2f4e8; --on-ok:#ffffff;
  --warn:#f59e0b; --warn-txt:#b45309; --warn-soft:#fdf1e3;
  --danger:#dc2626; --danger-txt:#b91c1c; --danger-soft:#fde8e8; --on-danger:#ffffff;
  --star:#d97706;
  /* lienzo de video (igual en ambos temas) */
  --video-bg:#05070c; --video-ctl-bg:rgba(9,13,21,.96); --video-txt:#e9eef7; --video-txt-2:#94a8c8;
  --video-line:rgba(255,255,255,.14); --video-hover:rgba(255,255,255,.09);
  --video-track:rgba(255,255,255,.16); --video-cover:rgba(96,165,250,.95); --video-knob:#ffffff;
  /* sombras y foco */
  --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.10);
  --shadow-lg:0 10px 30px rgba(16,24,40,.14);
  --shadow-pop:0 14px 40px rgba(16,24,40,.22),0 2px 6px rgba(16,24,40,.08);
  --ring:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent);
  /* tipografía (sin medios píxeles; mínimo 11 px) */
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --fs-xs:11px; --fs-sm:12px; --fs:13px; --fs-md:14px; --fs-lg:16px; --fs-xl:20px; --fs-2xl:24px;
  --fw:400; --fw-md:500; --fw-sb:600; --fw-b:700;
  --lh-tight:1.15; --lh:1.45;
  /* espaciado base 4 */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:28px; --s-8:32px;
  /* radios */
  --r-xs:4px; --r-sm:6px; --r:10px; --r-lg:14px; --r-pill:999px;
  /* alturas de control */
  --ctl-sm:28px; --ctl:36px; --ctl-lg:44px;
  /* tiempos */
  --t-fast:.12s; --t:.18s; --t-slow:.4s; --ease:cubic-bezier(.2,.8,.2,1);
  /* capas */
  --z-sticky:5; --z-drop:20; --z-header:30; --z-fs:35; --z-login:40; --z-pop:50; --z-toast:60;
  /* layout */
  --sidebar:340px; --header-h:60px; --page-max:1480px;
}
[data-theme=dark]{
  color-scheme:dark;
  --bg:#0b0f17; --surface:#121826; --surface-2:#182031; --surface-3:#202a3d;
  --line:#26314a; --line-strong:#5b6c8d;
  --txt:#e9eef7; --txt-2:#aebdd6; --txt-3:#93a3be;
  --accent:#5b9dff; --accent-strong:#8ebbff; --accent-soft:#172743; --on-accent:#06101f;
  --ok:#3ddc84; --ok-strong:#3ddc84; --ok-txt:#5ee69a; --ok-soft:#12301f; --on-ok:#06210f;
  --warn:#f0b64d; --warn-txt:#f6c76a; --warn-soft:#2f2512;
  --danger:#ff6b6b; --danger-txt:#ff8a8a; --danger-soft:#3a1a1e; --on-danger:#1a0606;
  --star:#f6c76a;
  --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-lg:0 16px 40px rgba(0,0,0,.5);
  --shadow-pop:0 18px 50px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.4);
}

/* ── 2. Base ───────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
body{background:var(--bg);color:var(--txt);font-family:var(--sans);font-size:var(--fs-md);line-height:var(--lh);
     font-variant-numeric:tabular-nums;height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
svg{flex:none}
[hidden]{display:none !important}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:var(--r-pill);border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--txt-3);background-clip:content-box}
*{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
mark{background:color-mix(in srgb,var(--warn) 35%,transparent);color:inherit;border-radius:3px;padding:0 1px}
.spacer{flex:1}
.ico{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ico.sm{width:14px;height:14px}
.ico.lg{width:20px;height:20px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ── 3. Componentes ────────────────────────────────────────────────────── */
/* texto de sección/etiqueta: la única "eyebrow" */
.eyebrow,.field label,.sec-title,.kpi .k,.cov-donut .dk,.chead,.cmp-tag,th,.menu-sec{
  display:block;font-size:var(--fs-xs);font-weight:var(--fw-sb);letter-spacing:.05em;text-transform:uppercase;color:var(--txt-3);line-height:var(--lh-tight)}
.field label{margin-bottom:var(--s-2)}
.sec-title{margin-bottom:var(--s-3)}
.sec-title span,.kpi .k span{color:var(--txt-3);font-weight:var(--fw-md)}

/* botón base y variantes */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);height:var(--ctl);padding:0 var(--s-4);border-radius:var(--r-sm);
     font-size:var(--fs);font-weight:var(--fw-sb);border:1px solid var(--line);background:var(--surface);color:var(--txt);
     white-space:nowrap;transition:background var(--t),border-color var(--t),color var(--t),transform var(--t-fast),opacity var(--t);line-height:1}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn:hover{background:var(--surface-2);border-color:var(--line-strong)}
.btn:active{transform:scale(.97)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.45;pointer-events:none}
.btn:focus-visible{outline:none;box-shadow:var(--ring);border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.primary:hover{background:var(--accent-strong);border-color:var(--accent-strong)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--txt-2)}
.btn.ghost:hover{background:var(--surface-2);color:var(--txt)}
.btn.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-strong)}
.btn.danger{color:var(--danger-txt);border-color:var(--danger-soft);background:var(--danger-soft)}
.btn.danger:hover{background:var(--danger);border-color:var(--danger);color:var(--on-danger)}
.btn.sm{height:var(--ctl-sm);padding:0 var(--s-3);font-size:var(--fs-sm);gap:var(--s-1)}
.btn.sm svg{width:14px;height:14px}
.btn.lg{height:var(--ctl-lg);padding:0 var(--s-5);font-size:var(--fs-md)}
.btn.icon{width:var(--ctl);padding:0}
.btn.icon.sm{width:var(--ctl-sm)}
.btn.icon.lg{width:var(--ctl-lg)}
.btn.icon svg{width:18px;height:18px}
.icon-btn{width:var(--ctl);padding:0}   /* alias legado */
.btn .spin{border-color:color-mix(in srgb,currentColor 30%,transparent);border-top-color:currentColor}
.more-btn{margin:var(--s-2) 0 var(--s-1);width:100%}

/* etiqueta/insignia: .badge (+ .sm .accent .ok .warn .danger .neutral) — los alias antiguos comparten base */
.badge,.chip-sm,.src,.gchip,.pbadge,.dl-badge,.rea-badge,.vmaf,.combo-item .var,.clips-head .n{
  display:inline-flex;align-items:center;gap:var(--s-1);height:20px;padding:0 var(--s-2);border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:var(--fw-sb);letter-spacing:.01em;white-space:nowrap;line-height:1;
  background:var(--surface-3);color:var(--txt-2);flex:none}
.badge.sm{height:18px;padding:0 6px}
.badge.accent,.src.dss,.pbadge,.dl-badge{background:var(--accent-soft);color:var(--accent-strong)}
.badge.ok,.gchip.ok,.vmaf.g{background:var(--ok-soft);color:var(--ok-txt)}
.badge.warn,.src.evs,.gchip.mid,.vmaf.y,.rea-badge{background:var(--warn-soft);color:var(--warn-txt)}
.badge.danger,.gchip.bad,.vmaf.r{background:var(--danger-soft);color:var(--danger-txt)}
.badge .dot,.gchip .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.pbadge:empty{display:none}

/* chip = SOLO conmutador (aria-pressed); las acciones son .btn.sm.ghost */
.chiprow{display:flex;gap:var(--s-2);flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:var(--s-1);height:var(--ctl-sm);padding:0 var(--s-3);border:1px solid var(--line);
      background:var(--surface);color:var(--txt-2);border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:var(--fw-sb);
      white-space:nowrap;transition:background var(--t),border-color var(--t),color var(--t)}
.chip svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chip:hover{border-color:var(--line-strong);color:var(--txt)}
.chip.on,.chip[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-strong)}
.chip:focus-visible{outline:none;box-shadow:var(--ring);border-color:var(--accent)}
.chip:disabled{opacity:.45;pointer-events:none}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--txt-3);flex:none}
.dot.ok{background:var(--ok)} .dot.warn{background:var(--warn)} .dot.danger{background:var(--danger)}
.chip.on .dot,.chip[aria-pressed=true] .dot{box-shadow:0 0 0 2px var(--surface)}

/* fila seleccionable */
.row{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);border:1px solid transparent;
     background:transparent;color:inherit;font:inherit;width:100%;text-align:left;transition:background var(--t-fast),border-color var(--t-fast);cursor:pointer}
.row:hover{background:var(--surface-2)}
.row.sel,.row[aria-current=true]{background:var(--accent-soft);border-color:var(--accent)}
.row:focus-visible{outline:none;box-shadow:var(--ring)}

/* tarjeta */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s-4);box-shadow:var(--shadow)}
.card.flat{box-shadow:none}

/* controles de formulario: UNA altura, UN foco */
.ctl,select,.search,.mv-date,input:not([type]),input[type=date],input[type=text],input[type=password],input[type=search],input[type=email],input[type=number]{
  height:var(--ctl);width:100%;background:var(--surface);color:var(--txt);border:1px solid var(--line-strong);border-radius:var(--r-sm);
  padding:0 var(--s-3);font-size:var(--fs-md);font-weight:var(--fw-md);transition:border-color var(--t),box-shadow var(--t)}
.ctl:hover,select:hover,.search:hover,.mv-date:hover{border-color:var(--txt-3)}
.ctl:focus,select:focus,.search:focus,.mv-date:focus,input:not([type]):focus,input[type=date]:focus,input[type=text]:focus,input[type=password]:focus,input[type=search]:focus,input[type=email]:focus,input[type=number]:focus{
  outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.ctl::placeholder,.search::placeholder,input::placeholder{color:var(--txt-3);font-weight:var(--fw)}
.ctl.sm{height:var(--ctl-sm);font-size:var(--fs);padding:0 var(--s-2)}
select{appearance:none;padding-right:34px;cursor:pointer}
.select{position:relative}
.select::after{content:'';position:absolute;right:13px;top:50%;width:8px;height:8px;border-right:2px solid var(--txt-3);
      border-bottom:2px solid var(--txt-3);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.search-wrap{position:relative}
.search-wrap .search{padding-left:36px}
.search-wrap>svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--txt-3);
      fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
input[type=checkbox],input[type=radio]{accent-color:var(--accent);width:16px;height:16px;cursor:pointer}
input[type=range]{accent-color:var(--accent)}
input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-pill)}

/* estados vacíos, carga, esqueleto, spinner */
.empty{color:var(--txt-3);text-align:center;padding:var(--s-8) var(--s-4);font-size:var(--fs)}
.empty svg{width:34px;height:34px;opacity:.5;margin-bottom:var(--s-2);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.empty b{color:var(--txt-2)}
.empty p{color:var(--txt-3);font-size:var(--fs-sm);margin-top:var(--s-1)}
.empty .btn{margin-top:var(--s-3)}
.spin{width:14px;height:14px;border:2px solid var(--line-strong);border-top-color:var(--accent);border-radius:50%;animation:reaspin .8s linear infinite;flex:none}
@keyframes reaspin{to{transform:rotate(360deg)}}
.skel{height:52px;border-radius:var(--r);background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 37%,var(--surface-2) 63%);
      background-size:400% 100%;animation:skel 1.3s ease infinite}
.skel+.skel{margin-top:var(--s-2)}
@keyframes skel{0%{background-position:100% 0}100%{background-position:0 0}}

/* toast (ok / danger) · debajo de la cabecera de la celda activa (⋯ y chip H.264 quedan libres) */
.toast{position:fixed;right:16px;top:calc(var(--header-h,60px) + 56px);left:auto;bottom:auto;transform:none;z-index:var(--z-toast);display:flex;align-items:center;gap:var(--s-3);
      background:var(--txt);color:var(--bg);padding:var(--s-2) var(--s-2) var(--s-2) var(--s-4);border-radius:var(--r);box-shadow:var(--shadow-lg);
      font-size:var(--fs);font-weight:var(--fw-md);max-width:min(92vw,560px);animation:toastin .22s ease}
.toast .ti{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.toast.ok .ti{color:var(--ok)}
.toast.danger .ti{color:var(--danger)}
[data-theme=dark] .toast.ok .ti{color:var(--ok-strong)}
.toast .msg{flex:1;min-width:0}
.toast .btn{height:var(--ctl-sm);padding:0 var(--s-3);font-size:var(--fs-sm);background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.toast .btn:hover{background:var(--accent-strong)}
.toast .tclose{border:none;background:transparent;color:inherit;opacity:.75;width:var(--ctl);height:var(--ctl);border-radius:var(--r-sm);display:grid;place-items:center}
.toast .tclose svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.toast .tclose:hover{opacity:1;background:rgba(255,255,255,.12)}
@keyframes toastin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* barra de progreso */
.bar{background:var(--surface-3);border-radius:var(--r-pill);height:7px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-strong));border-radius:var(--r-pill);transition:width var(--t-slow) ease}
.bar.ok i{background:var(--ok)}

/* ── 4. Shell: cabecera, menú, popover, login ──────────────────────────── */
header{display:flex;align-items:center;gap:var(--s-3);padding:0 var(--s-5);height:var(--header-h);flex-shrink:0;min-width:0;
       background:var(--surface);border-bottom:1px solid var(--line);position:relative;z-index:var(--z-header)}
.brand{display:flex;align-items:center;gap:10px;font-weight:var(--fw-sb);font-size:15px;letter-spacing:-.01em;border:none;background:transparent;
       color:inherit;padding:0 var(--s-1) 0 0;height:var(--ctl);border-radius:var(--r-sm);min-width:0;flex:none}
.brand:hover .bname{color:var(--accent-strong)}
.brand .mark{width:30px;height:30px;border-radius:var(--r-sm);background:linear-gradient(135deg,var(--accent),var(--accent-strong));
      display:grid;place-items:center;color:#fff;box-shadow:var(--shadow);flex:none}
.brand .mark svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.brand .bname{white-space:nowrap;line-height:var(--lh-tight)}
.brand .tenant{display:block;font-size:var(--fs-xs);font-weight:var(--fw-md);color:var(--txt-3);letter-spacing:0;white-space:nowrap;line-height:var(--lh-tight);margin-top:2px;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.brand .bt{display:flex;flex-direction:column;min-width:0}

/* píldora única de salud: "● Respaldado 87 % · 3,2 TB libres" */
.health{display:inline-flex;align-items:center;gap:var(--s-2);height:32px;padding:0 var(--s-3);border-radius:var(--r-pill);
        background:var(--surface-2);border:1px solid var(--line);font-size:var(--fs-sm);font-weight:var(--fw-md);color:var(--txt-2);
        white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis;transition:border-color var(--t),color var(--t);flex:0 1 auto}
.health:hover{border-color:var(--line-strong);color:var(--txt)}
.health:focus-visible{outline:none;box-shadow:var(--ring);border-color:var(--accent)}
.health b{color:var(--txt);font-weight:var(--fw-sb)}
.health .d{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft);flex:none}
.health .ht{overflow:hidden;text-overflow:ellipsis;min-width:0}
.health.warn{background:var(--warn-soft);border-color:transparent;color:var(--warn-txt)}
.health.warn b{color:var(--warn-txt)}
.health.warn .d{background:var(--warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 25%,transparent)}
.health.danger{background:var(--danger-soft);border-color:transparent;color:var(--danger-txt)}
.health.danger b{color:var(--danger-txt)}
.health.danger .d{background:var(--danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 25%,transparent)}
.health.off .d{background:var(--txt-3);box-shadow:0 0 0 3px var(--surface-3)}

/* pestañas */
.tabs{display:flex;align-items:center;gap:var(--s-1);flex:none}
.tab{position:relative}
.tab.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-strong)}
.tab .tl{line-height:1}

/* menú de usuario */
.umenu{position:relative;flex:none}
.menu{position:absolute;right:0;top:calc(100% + 6px);width:280px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
      box-shadow:var(--shadow-pop);padding:var(--s-2);z-index:var(--z-pop);animation:popin .14s var(--ease)}
@keyframes popin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.menu-head{padding:var(--s-2) var(--s-3) var(--s-3);border-bottom:1px solid var(--line);margin-bottom:var(--s-2);min-width:0}
.menu-head b{display:block;font-size:var(--fs-md);font-weight:var(--fw-sb);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu-head span{display:block;font-size:var(--fs-sm);color:var(--txt-3)}
.menu-sec{padding:var(--s-2) var(--s-3) var(--s-1)}
.menu-item{display:flex;align-items:center;gap:10px;width:100%;height:var(--ctl);padding:0 var(--s-3);border:none;background:transparent;color:var(--txt);
      border-radius:var(--r-sm);font-size:var(--fs);font-weight:var(--fw-md);text-align:left;white-space:nowrap}
.menu-item svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--txt-3)}
.menu-item:hover,.menu-item:focus-visible{background:var(--surface-2);outline:none}
.menu-item[aria-current=true]{color:var(--accent-strong)} .menu-item[aria-current=true] svg{color:var(--accent-strong)}
.menu-item.danger{color:var(--danger-txt)} .menu-item.danger svg{color:var(--danger-txt)}
.menu-item.danger:hover{background:var(--danger-soft)}
.menu hr{border:none;border-top:1px solid var(--line);margin:var(--s-2) 0}
/* segmentado (tema) */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;background:var(--surface-2);border-radius:var(--r-sm);padding:2px;margin:0 var(--s-3) var(--s-2)}
.seg button{height:var(--ctl-sm);border:none;border-radius:var(--r-xs);background:transparent;color:var(--txt-2);font-size:var(--fs-sm);font-weight:var(--fw-sb);
      display:inline-flex;align-items:center;justify-content:center;gap:var(--s-1);padding:0 2px;white-space:nowrap;min-width:0;transition:background var(--t),color var(--t)}
.seg button svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.seg button:hover{color:var(--txt)}
.seg button[aria-pressed=true]{background:var(--surface);color:var(--accent-strong);box-shadow:var(--shadow)}
.seg button:focus-visible{outline:none;box-shadow:var(--ring)}

/* popover modal (atajos de teclado) */
.pop-back{position:fixed;inset:0;z-index:var(--z-pop);background:rgba(8,12,20,.45);display:grid;place-items:center;padding:var(--s-4)}
.pop{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);width:min(520px,100%);max-height:90vh;overflow:auto;
     padding:var(--s-5);animation:popin .16s var(--ease)}
.pop-head{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-4)}
.pop-head h2{font-size:var(--fs-lg);font-weight:var(--fw-sb);flex:1}
.kbd-table{width:100%;border-collapse:collapse;font-size:var(--fs)}
.kbd-table th{padding:var(--s-2) 0}
.kbd-table td{padding:var(--s-2) 0;border-bottom:1px solid var(--line);vertical-align:middle}
.kbd-table tr:last-child td{border-bottom:none}
.kbd-table td:first-child{width:46%;color:var(--txt-2)}
kbd{display:inline-block;min-width:22px;padding:2px 6px;border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:var(--r-xs);
    background:var(--surface-2);font-family:inherit;font-size:var(--fs-xs);font-weight:var(--fw-sb);text-align:center;color:var(--txt);margin:0 1px}

/* login */
#login{position:fixed;inset:0;z-index:var(--z-login);display:grid;place-items:center;padding:var(--s-4);
      background:radial-gradient(1200px 600px at 50% -10%,var(--accent-soft),var(--bg))}
#login form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-8);width:min(400px,100%);
      box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:var(--s-3)}
#login .lhead{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-2);min-width:0}
#login .mark{width:40px;height:40px;border-radius:var(--r);background:linear-gradient(135deg,var(--accent),var(--accent-strong));
      display:grid;place-items:center;color:#fff;flex:none}
#login .mark svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
#login h1{font-size:18px;font-weight:var(--fw-b);letter-spacing:-.01em;line-height:var(--lh-tight)}
#login .ltenant{font-size:var(--fs);color:var(--txt-2);font-weight:var(--fw-md);margin-top:2px}
#login .ltenant:empty{display:none}
#login .lsub{font-size:var(--fs-sm);color:var(--txt-3);margin-top:2px}
#login .lfield{display:flex;flex-direction:column;gap:var(--s-1)}
#login .lfield label{font-size:var(--fs-sm);font-weight:var(--fw-sb);color:var(--txt-2)}
#login input{height:var(--ctl-lg);font-size:var(--fs-md)}
.pwwrap{position:relative}
.pwwrap input{padding-right:48px}
.pwwrap .pwtoggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:var(--ctl);height:var(--ctl);border:none;background:transparent;
      color:var(--txt-3);border-radius:var(--r-sm);display:grid;place-items:center}
.pwwrap .pwtoggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pwwrap .pwtoggle:hover{color:var(--txt);background:var(--surface-2)}
#lerr{font-size:var(--fs);min-height:20px;font-weight:var(--fw-md);color:var(--danger-txt);display:flex;align-items:flex-start;gap:var(--s-2);line-height:1.35}
#lerr.info{color:var(--txt-2)}
#lerr svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
#lerr:empty{display:none}
#login .lbtn{height:var(--ctl-lg);font-size:var(--fs-md);font-weight:var(--fw-sb)}
#login .lfoot{display:flex;justify-content:space-between;gap:var(--s-3);font-size:var(--fs-xs);color:var(--txt-3);margin-top:var(--s-1);flex-wrap:wrap}
#login .lfoot a{color:var(--txt-2)}
#login .lfoot:empty{display:none}

/* ── 5. Visor: aside + reproductor ────────────────────────────────────── */
main{flex:1;display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:0}
aside{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow-y:auto;padding:var(--s-4) var(--s-4)}
aside > :not([hidden])+*{margin-top:var(--s-3)}
.field{min-width:0}
#treeLoad{display:flex;flex-direction:column;gap:10px}
#treeLoad .skel{margin:0;height:40px}
#treeLoad .ld{display:flex;align-items:center;gap:9px;font-size:var(--fs);color:var(--txt-2);font-weight:var(--fw-md)}

/* calendario compacto */
.cal{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:var(--s-2) 10px}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.cal-head b{font-size:var(--fs-sm);font-weight:var(--fw-sb)}
.cal-head b::first-letter{text-transform:uppercase}
.cal-nav{width:32px;height:32px;border-radius:var(--r-sm);border:1px solid transparent;background:transparent;color:var(--txt-2);
      display:grid;place-items:center;transition:background var(--t),color var(--t);position:relative}
.cal-nav::after{content:'';position:absolute;inset:-4px}   /* zona táctil 40 px */
.cal-nav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cal-nav:hover{background:var(--surface-3);color:var(--txt)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;text-align:center}
.dow{font-size:var(--fs-xs);font-weight:var(--fw-sb);color:var(--txt-3);padding:2px 0}
.day{height:32px;display:grid;place-items:center;border-radius:var(--r-sm);font-size:var(--fs-sm);font-weight:var(--fw-md);
      color:var(--txt-3);position:relative;transition:background var(--t-fast),color var(--t-fast);border:none;background:transparent;
      font-family:inherit;padding:0;width:100%;cursor:default}
.day:disabled{opacity:.5}
.day.has{color:var(--ok-txt);font-weight:var(--fw-sb);cursor:pointer}
.day.has::after{content:'';position:absolute;bottom:3px;width:4px;height:4px;border-radius:50%;background:var(--ok)}
.day.has:hover{background:var(--ok-soft)}
.day.sel{background:var(--ok-strong);color:var(--on-ok)}.day.sel::after{background:var(--on-ok)}
.legend{display:none}

/* lista de grabaciones */
.clips-wrap{flex:1;display:flex;flex-direction:column;min-height:0}
.clips-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s-2)}
.clips-head .sec-title{margin:0}
#clipFilter{margin-bottom:var(--s-2)}
#clips{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:var(--s-1);min-height:170px;margin:0 -4px;padding:0 4px}
.clip{display:flex;align-items:center;gap:10px;padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);cursor:pointer;
      border:1px solid transparent;transition:background var(--t-fast),border-color var(--t-fast);width:100%;text-align:left;background:transparent;
      color:inherit;font:inherit;flex-shrink:0;min-height:var(--ctl-lg)}
.clip:hover{background:var(--surface-2)}
.clip:focus-visible{outline:none;box-shadow:var(--ring)}
.clip.sel{background:var(--accent-soft);border-color:var(--accent)}
.clip .play{width:28px;height:28px;border-radius:50%;background:var(--surface-3);display:grid;place-items:center;flex-shrink:0;color:var(--txt-2)}
.clip .play svg{width:14px;height:14px}
.clip.sel .play{background:var(--accent);color:var(--on-accent)}
.clip .meta{flex:1;min-width:0}
.clip .t{font-weight:var(--fw-sb);font-size:var(--fs);display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.clip .t .dur{font-weight:var(--fw-md);color:var(--txt-2);font-size:var(--fs-sm)}
.clip .s{font-size:var(--fs-sm);color:var(--txt-3);display:flex;flex-wrap:wrap;gap:4px 5px;align-items:center;margin-top:3px}
.chip-sm{height:18px;padding:0 6px;background:var(--surface-3);color:var(--txt-2)}
.clip.sel .chip-sm{background:var(--surface)}
.src{height:18px;padding:0 6px;letter-spacing:.04em;font-weight:var(--fw-b)}
.src.mix{background:var(--surface-3);color:var(--txt-2)}

/* selector de cámara (buscador con lista) */
.combo{position:relative}
.combo .search{padding-right:40px}
.combo-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:var(--z-drop);max-height:min(46vh,380px);overflow-y:auto;
      background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-sm);box-shadow:var(--shadow-lg);padding:var(--s-1)}
.combo-item{display:flex;align-items:center;gap:var(--s-2);padding:0 10px;min-height:var(--ctl);border-radius:var(--r-sm);cursor:pointer;font-size:var(--fs);
      border:none;background:transparent;width:100%;text-align:left;color:inherit;font-family:inherit}
.combo-item:hover,.combo-item.act{background:var(--surface-2)}
.combo-item.cur{color:var(--accent-strong);font-weight:var(--fw-sb)}
.combo-item .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.combo-item .var{height:18px;padding:0 6px;color:var(--txt-3)}
.combo-foot{padding:7px 10px;font-size:var(--fs-xs);color:var(--txt-3);border-top:1px solid var(--line);margin-top:var(--s-1)}
.combo-clear{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:var(--ctl-sm);height:var(--ctl-sm);border:none;background:transparent;
      color:var(--txt-3);border-radius:var(--r-sm);display:grid;place-items:center}
.combo-clear::after{content:'';position:absolute;inset:-6px}
.combo-clear svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.combo-clear:hover{background:var(--surface-3);color:var(--txt)}
.variants{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:var(--s-2);
      max-height:min(28vh,140px);overflow-y:auto;overscroll-behavior:contain;padding:2px 2px 2px 0}   /* hay centros con 150 copias */
.variants .src{margin-left:auto}
.vlbl{font-size:var(--fs-xs);color:var(--txt-3);font-weight:var(--fw-sb)}

/* reproductor en rejilla (F2): #stage > #grid > .cell · #pbar overlay · menús */
section{display:flex;flex-direction:column;min-width:0;background:var(--video-bg)}
#stage{flex:1;position:relative;display:flex;flex-direction:column;background:var(--video-bg);min-height:240px;overflow:hidden;outline:none}
#stage.fakefs{position:fixed;inset:0;z-index:var(--z-fs);min-height:0}
#stage:fullscreen{background:#000}
#stage.idle:not(.paused){cursor:none}
#grid{flex:1;display:grid;gap:3px;min-height:0;min-width:0;background:var(--video-bg)}
#stage[data-layout="1"] #grid{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
#stage[data-layout="2x2"] #grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
#stage[data-layout="3x3"] #grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}
#stage[data-layout="4x4"] #grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr))}
#stage[data-layout="1+5"] #grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}
#stage[data-layout="1+5"] .cell:first-child{grid-area:1/1/3/3}
#stage[data-layout="1+7"] #grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr))}
#stage[data-layout="1+7"] .cell:first-child{grid-area:1/1/4/4}
#stage[data-layout="free"] #grid{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(12,minmax(0,1fr))}
#stage[data-layout="free"] .cell{grid-column:var(--x,1) / span var(--w,4);grid-row:var(--y,1) / span var(--h,4)}
#stage.has-max .cell{display:none}
#stage.has-max .cell.max{display:flex;grid-area:1/1/-1/-1}
.cell{position:relative;min-width:0;min-height:0;background:#000;display:flex;flex-direction:column;overflow:hidden;outline:none;box-shadow:inset 0 0 0 1px transparent;transition:box-shadow var(--t-fast)}
#stage.multi .cell.act{box-shadow:inset 0 0 0 2px var(--accent)}
.cell:focus-visible{box-shadow:inset 0 0 0 2px var(--accent-strong)}
.cell.over{box-shadow:inset 0 0 0 3px var(--accent);background:var(--accent-soft)}
.cell.bad{box-shadow:inset 0 0 0 3px var(--danger)}
.cell.drag{opacity:.35}
.cell-body{flex:1;position:relative;overflow:hidden;min-height:0;touch-action:none;cursor:default}
.cell.zoomed .cell-body{cursor:grab}
.cell-body video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;transform-origin:0 0;
      transform:translate(var(--px,0px),var(--py,0px)) scale(var(--zoom,1))}
.cell-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:saturate(.7) brightness(.8)}
.cell-msg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-2);color:var(--video-txt-2);
      font-size:var(--fs-sm);font-weight:var(--fw-md);text-align:center;padding:var(--s-3);pointer-events:none;z-index:2;background:rgba(0,0,0,.25)}
.cell-msg.soft{background:transparent;justify-content:flex-end;padding-bottom:var(--s-4)}
.cell-msg.soft span{background:rgba(9,13,21,.75);padding:3px 10px;border-radius:var(--r-pill);font-size:var(--fs-xs)}
.cell-msg.warn{color:var(--warn-txt)}
.cell-msg .btn{pointer-events:auto}
.cell:not(.has-cam) .cell-msg{background:transparent;color:var(--video-txt-2)}
.cell:not(.has-cam){background:color-mix(in srgb,var(--video-bg) 70%,#1a2333)}
#stage[data-layout="1"] .cell:not(.has-cam) .cell-msg{display:none}
.tap2play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;
  border:0;background:rgba(255,255,255,.92);color:#0b1220;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 30px rgba(0,0,0,.5);z-index:5}
.tap2play svg{width:40px;height:40px;margin-left:4px}
.cell-hd{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;align-items:center;gap:6px;padding:4px 4px 10px 10px;
      background:linear-gradient(rgba(0,0,0,.72),transparent);color:var(--video-txt);font-size:var(--fs-sm);font-weight:var(--fw-sb);
      opacity:0;transition:opacity var(--t);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
#stage.multi .cell-hd{cursor:grab}
#stage[data-layout="1"] .cell-hd{cursor:default}
.cell:hover .cell-hd,.cell:focus-within .cell-hd,.cell.touch .cell-hd,.cell.drag .cell-hd,#stage:not(.idle) .cell.act .cell-hd{opacity:1}
#stage.idle .cell-hd{opacity:0}
.cell:not(.has-cam) .cell-hd{display:none}
#stage[data-layout="free"] .cell:not(.has-cam) .cell-hd{display:flex}   /* libre: la celda vacía también tiene ⋯ y ✕ */
.cell-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell-time{color:var(--video-txt-2);font-weight:var(--fw-md);font-variant-numeric:tabular-nums}
.cell-chip{background:var(--warn-soft);color:var(--warn-txt)}
.cell.muted .cell-name::after{content:'';display:none}
.cell-menu,.cell-close{width:28px;height:28px;border:0;background:transparent;color:inherit;border-radius:var(--r-sm);display:grid;place-items:center;cursor:pointer;flex:none}
.cell-menu svg,.cell-close svg{width:16px;height:16px}
.cell-menu:hover,.cell-close:hover{background:var(--video-hover)}
.cell-menu:focus-visible,.cell-close:focus-visible{outline:2px solid var(--video-txt);outline-offset:-2px}
.cell-close{display:none}
#stage[data-layout="free"] .cell-close{display:grid}
.cell-close:hover{color:var(--danger)}
.cell-seek{height:3px;background:var(--seekbg,var(--video-track));position:relative;flex:none;z-index:3}
.cell-seek i{position:absolute;top:-2px;width:2px;height:7px;background:var(--video-knob);left:var(--cur,0%);transform:translateX(-1px)}
#stage[data-layout="1"] .cell-seek,.cell:not(.has-cam) .cell-seek{display:none}
.rz{position:absolute;width:16px;height:16px;z-index:4;display:none;touch-action:none}
#stage[data-layout="free"] .cell:hover .rz,#stage[data-layout="free"] .cell.act .rz,#stage[data-layout="free"] .cell.touch .rz{display:block}
.rz-se{right:0;bottom:0;cursor:nwse-resize}.rz-sw{left:0;bottom:0;cursor:nesw-resize}.rz-ne{right:0;top:0;cursor:nesw-resize}.rz-nw{left:0;top:0;cursor:nwse-resize}
.rz::after{content:'';position:absolute;inset:4px;border:2px solid #fff;opacity:.75;border-radius:2px}
.rz-se::after{border-top:0;border-left:0}.rz-sw::after{border-top:0;border-right:0}.rz-ne::after{border-bottom:0;border-left:0}.rz-nw::after{border-bottom:0;border-right:0}
.drag-ghost{position:fixed;z-index:var(--z-toast);pointer-events:none;width:200px;border:2px solid var(--accent);border-radius:var(--r-sm);overflow:hidden;background:#000;
      box-shadow:var(--shadow-lg);opacity:.92;color:#fff;font-size:var(--fs-xs);font-weight:var(--fw-sb)}
.drag-ghost canvas{display:block;width:200px;height:112px}
.drag-ghost span{display:block;padding:4px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:rgba(0,0,0,.7)}
#stageEmpty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--video-txt-2);pointer-events:none;z-index:1}
#dropHint{position:absolute;inset:12px;z-index:6;border:2px dashed var(--accent);border-radius:var(--r-lg);display:grid;place-items:center;color:var(--video-txt);
      font-weight:var(--fw-sb);background:color-mix(in srgb,var(--accent) 18%,transparent);pointer-events:none}
#stage.dnd .cell:not(.over){opacity:.8}
/* barra overlay */
#pbar{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;flex-direction:column;gap:1px;padding:6px 14px 8px;color:var(--video-txt);user-select:none;
      background:linear-gradient(transparent,rgba(5,7,12,.55) 30%,rgba(5,7,12,.92));opacity:0;transition:opacity .22s;pointer-events:none;
      padding-bottom:max(8px,env(safe-area-inset-bottom))}
#stage:hover:not(.idle) #pbar,#pbar:hover,#pbar:focus-within,#stage.paused #pbar,#stage.touch #pbar{opacity:1;pointer-events:auto}
@media(hover:none){#stage:not(.idle) #pbar{opacity:1;pointer-events:auto}}
.seekrow{display:flex;align-items:center;width:100%}
.ctrlrow{display:flex;align-items:center;gap:2px;width:100%;min-width:0}
#pbar button{background:transparent;border:none;color:var(--video-txt);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:4px;
      width:var(--ctl);height:var(--ctl);border-radius:var(--r);transition:background var(--t),transform .08s,opacity var(--t);flex:none;-webkit-tap-highlight-color:transparent;font-size:var(--fs-sm);font-weight:var(--fw-sb)}
#pbar button.wide{width:auto;padding:0 10px}
#pbar button:hover{background:var(--video-hover)}
#pbar button:active{transform:scale(.92)}
#pbar button:disabled{opacity:.28;pointer-events:none}
#pbar button:focus-visible{outline:2px solid var(--video-txt);outline-offset:-2px}
#pbar button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#pbar button svg[fill=currentColor]{fill:currentColor;stroke:none}
#pbar #pp{width:42px;height:42px}
#pbar #pp svg{width:24px;height:24px}
#pbar .tm{font-size:var(--fs);color:var(--video-txt);font-weight:var(--fw-sb);margin:0 var(--s-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;font-variant-numeric:tabular-nums}
#pbar .tm small{color:var(--video-txt-2);font-weight:var(--fw-md);margin-left:var(--s-2);font-size:var(--fs-xs);display:inline-block}
#pbar .tm small::first-letter{text-transform:uppercase}
#pbar .tm small.tz{opacity:.8}
#pbar .zoomlbl,#pbar .synclbl{background:rgba(255,255,255,.14);color:var(--video-txt);margin-right:4px}
#pbar .synclbl{background:var(--warn-soft);color:var(--warn-txt)}
#pbar .spacer{flex:1;min-width:6px}
.seekwrap{flex:1;position:relative;display:flex;align-items:center;min-width:60px;height:26px}
#seek{width:100%;height:26px;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;margin:0}
#seek::-webkit-slider-runnable-track{height:5px;border-radius:var(--r-pill);background:var(--seekbg,var(--video-track));transition:height .18s ease}
#seek::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;margin-top:-4px;border-radius:50%;background:var(--video-knob);
      box-shadow:0 1px 5px rgba(0,0,0,.55);transition:transform .14s,margin-top .18s ease}
.seekwrap:hover #seek::-webkit-slider-runnable-track,#pbar.scrub #seek::-webkit-slider-runnable-track{height:9px}
.seekwrap:hover #seek::-webkit-slider-thumb,#pbar.scrub #seek::-webkit-slider-thumb{margin-top:-2px;transform:scale(1.2)}
#seek:active::-webkit-slider-thumb,#pbar.scrub #seek::-webkit-slider-thumb{transform:scale(1.45)}
#seek::-moz-range-track{height:5px;border-radius:var(--r-pill);background:var(--seekbg,var(--video-track));transition:height .18s ease}
#seek::-moz-range-thumb{width:13px;height:13px;border:none;border-radius:50%;background:var(--video-knob);box-shadow:0 1px 5px rgba(0,0,0,.55);transition:transform .14s}
.seekwrap:hover #seek::-moz-range-track,#pbar.scrub #seek::-moz-range-track{height:9px}
.seekwrap:hover #seek::-moz-range-thumb{transform:scale(1.2)}
#pbar.scrub #seek::-moz-range-thumb{transform:scale(1.45)}
#pbar:focus-within #seek::-webkit-slider-runnable-track{height:9px}
.seektip{position:absolute;bottom:24px;transform:translateX(-50%);background:var(--video-ctl-bg);color:var(--video-txt);
      -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--video-line);
      padding:4px;border-radius:var(--r-sm);font-size:var(--fs-sm);font-weight:var(--fw-sb);display:flex;flex-direction:column;align-items:center;gap:3px;
      pointer-events:none;opacity:0;transition:opacity var(--t-fast);white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.45);z-index:2}
.seektip.on{opacity:1}
.seektip img{width:160px;aspect-ratio:16/9;object-fit:cover;border-radius:3px;background:#000;display:block}
.seektip img[hidden]{display:none}
.seektip span{padding:0 6px}
/* menús del reproductor (rejilla y contextual) */
.menu.ctx{position:absolute;right:auto;top:auto;width:auto;min-width:240px;max-width:min(340px,calc(100vw - 16px));max-height:min(70vh,560px);overflow-y:auto}
#layoutMenu{position:absolute;right:52px;bottom:52px;top:auto;z-index:var(--z-pop)}
#ctxmenu{position:fixed;z-index:var(--z-toast)}
#ctxmenu.noclick{pointer-events:none}   /* 400 ms tras abrir: el click de soltar la pulsación larga no ejecuta un ítem */
/* hoja inferior (C3): en ≤700 px el menú contextual (o cualquier .menu.ctx con .sheet) se ancla abajo a todo el ancho,
   esquinas superiores redondeadas e ítems de 44 px; el !important pisa el left/top en línea que fija ctxOpen() */
@media(max-width:700px){
  #ctxmenu,.menu.ctx.sheet{position:fixed!important;left:0!important;right:0!important;top:auto!important;bottom:0!important;z-index:var(--z-toast);
      width:auto;min-width:0;max-width:none;max-height:min(72vh,600px);border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:0;
      padding:var(--s-1) var(--s-2) calc(var(--s-2) + env(safe-area-inset-bottom));animation:sheetin .18s var(--ease)}
  #ctxmenu::before,.menu.ctx.sheet::before{content:'';display:block;width:36px;height:4px;border-radius:2px;background:var(--line-strong);margin:2px auto 8px}
  #ctxmenu .menu-head,.menu.ctx.sheet .menu-head{padding:var(--s-2) var(--s-3) var(--s-3)}
  #ctxmenu .menu-item,.menu.ctx.sheet .menu-item{min-height:var(--ctl-lg);padding:8px var(--s-3);font-size:var(--fs-md)}
  #ctxmenu .menu-sec,.menu.ctx.sheet .menu-sec{padding-top:var(--s-3)}
  @keyframes sheetin{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
}
.menu.ctx .menu-item{height:auto;min-height:var(--ctl);padding:6px var(--s-3);white-space:normal;gap:8px}
.menu.ctx .menu-item span{flex:1;min-width:0}
.menu.ctx .menu-item kbd{margin-left:auto;flex:none}
.menu.ctx .menu-item[aria-checked=true]{color:var(--accent-strong);font-weight:var(--fw-sb)}
.menu.ctx .menu-item[aria-checked=true]::before{content:'✓';width:14px;flex:none;text-align:center}
.menu.ctx .menu-item[role=menuitemradio]:not([aria-checked=true])::before{content:'';width:14px;flex:none}
.menu.ctx .menu-item:disabled{opacity:.45;pointer-events:none}
.lay-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:0 var(--s-3) var(--s-2)}
.lay-grid button{height:var(--ctl);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--txt);font-size:var(--fs-sm);font-weight:var(--fw-sb);cursor:pointer}
.lay-grid button:hover{border-color:var(--line-strong)}
.lay-grid button[aria-checked=true]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-strong)}
.lay-grid button:focus-visible{outline:none;box-shadow:var(--ring)}
.lay-row{display:flex;align-items:center;gap:2px}
.lay-row .menu-item{flex:1;min-width:0}
.lay-nm{display:flex;flex-direction:column;min-width:0}
.lay-nm>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lay-nm small{color:var(--txt-3);font-size:var(--fs-xs);font-weight:var(--fw)}
/* el panel: arrastrables y botón ＋ */
.combo-item,.clip{-webkit-user-drag:element}
.combo-add{width:28px;height:28px;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--txt-3);flex:none;opacity:0;transition:opacity var(--t),background var(--t)}
.combo-add svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.combo-item:hover .combo-add,.combo-item.act .combo-add,.combo-item:focus-visible .combo-add{opacity:1}
.combo-add:hover{background:var(--accent-soft);color:var(--accent-strong)}
@media(hover:none){.combo-add{opacity:1}}

/* ── 6. Páginas (Respaldo / Operación / Prioridades / Laboratorio / Multivista) ── */
.page{flex:1;min-height:0;background:var(--bg);display:flex;flex-direction:column;overflow:hidden;animation:pagein .22s ease}
@keyframes pagein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.page-head{display:flex;align-items:center;gap:var(--s-3);padding:0 var(--s-6);height:var(--header-h);flex-shrink:0;
      background:var(--surface);border-bottom:1px solid var(--line);min-width:0}
.page-head h2{font-size:var(--fs-lg);font-weight:var(--fw-sb);letter-spacing:-.01em;white-space:nowrap}
.page-head .sub{color:var(--txt-3);font-size:var(--fs-sm);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.page-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-5);overflow-anchor:none;
      width:100%;max-width:var(--page-max);margin:0 auto}
.page-cols{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:0;overflow:hidden;width:100%;max-width:var(--page-max);margin:0 auto}
.page-col{display:flex;flex-direction:column;min-height:0;padding:var(--s-5) var(--s-6);overflow-y:auto}
.page-col+.page-col{border-left:1px solid var(--line)}
.page-col .hintline{color:var(--txt-3);font-size:var(--fs-sm);margin-bottom:var(--s-2)}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s-3)}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px var(--s-4);box-shadow:var(--shadow)}
.kpi .v{font-size:22px;font-weight:var(--fw-b);letter-spacing:-.02em;margin-top:var(--s-1);white-space:normal;overflow-wrap:anywhere;transition:none}   /* I5: nunca recortar */
.kpi .v small{font-size:var(--fs);font-weight:var(--fw-sb);color:var(--txt-3)}
.kpi .ksub{font-size:var(--fs-xs);color:var(--txt-3);margin-top:3px}
.banner{display:flex;align-items:center;gap:10px;background:var(--warn-soft);color:var(--warn-txt);border-radius:var(--r);
      padding:var(--s-3) var(--s-4);font-weight:var(--fw-sb);font-size:var(--fs)}
.banner svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.banner.danger{background:var(--danger-soft);color:var(--danger-txt)}
.dl-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s-3) 14px;margin-bottom:var(--s-2);box-shadow:var(--shadow)}
.dl-top{display:flex;align-items:center;gap:10px;margin-bottom:var(--s-2)}
.dl-top .nm{flex:1;min-width:0;font-weight:var(--fw-sb);font-size:var(--fs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-top .nm span{color:var(--txt-3);font-weight:var(--fw-md)}
.dl-stats{display:flex;gap:14px;font-size:var(--fs-sm);color:var(--txt-3);margin-top:6px}
.dl-stats b{color:var(--txt-2);font-weight:var(--fw-sb)}
.dl-card .bar i{transition:none}
.rea-spin{width:10px;height:10px;border:2px solid color-mix(in srgb,var(--warn) 30%,transparent);border-top-color:var(--warn);border-radius:50%;animation:reaspin .8s linear infinite;flex:none}

/* cobertura (F3 la rediseña; aquí solo tokens y tamaños mínimos) */
.cov-hero{display:flex;gap:14px;align-items:stretch;flex-wrap:wrap}
.cov-donut{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
      padding:14px var(--s-5);display:flex;align-items:center;gap:var(--s-4);min-width:232px}
.cov-donut svg{width:84px;height:84px;transform:rotate(-90deg);flex:none}
.cov-donut .ring-bg{stroke:var(--surface-3)}
.cov-donut .ring-fg{transition:stroke-dashoffset 1s cubic-bezier(.22,1,.36,1),stroke .6s}
.cov-donut .dk{display:flex;align-items:center;gap:var(--s-1)}
.cov-donut .dk svg{width:12px;height:12px;transform:none;fill:currentColor;stroke:none}
.cov-donut .dv{font-size:25px;font-weight:var(--fw-b);letter-spacing:-.02em;margin-top:2px}
.cov-donut .dsub{font-size:var(--fs-sm);color:var(--txt-3);margin-top:2px}
.cov-tools{position:sticky;top:calc(-1 * var(--s-6));z-index:var(--z-sticky);display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap;
      background:var(--bg);padding:10px 0;margin:-6px 0 0;border-bottom:1px solid var(--line)}
.cov-tools .search-wrap{flex:1;min-width:170px;max-width:340px}
.upd{margin-left:auto;font-size:var(--fs-xs);color:var(--txt-3);display:flex;align-items:center;gap:6px}
.upd .pulse{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:updpulse 2s ease-in-out infinite}
@keyframes updpulse{50%{opacity:.35}}
.gchips{display:flex;gap:5px;margin-left:6px;flex-shrink:0}
.gchip{height:18px;padding:0 7px;font-weight:var(--fw-b)}
.chead{display:grid;grid-template-columns:minmax(0,1fr) 92px 92px 150px;gap:10px;padding:var(--s-2) 6px 6px}
.chead .num{text-align:right}
.crow{display:grid;grid-template-columns:minmax(0,1fr) 92px 92px 150px;gap:10px;align-items:center;
      padding:6px 6px;min-height:var(--ctl-lg);border-bottom:1px solid var(--line);font-size:var(--fs)}
.crow:last-child{border-bottom:none}
.crow .cn{display:flex;align-items:center;gap:7px;min-width:0}
.crow .cn .nm2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;border-radius:var(--r-xs)}
.crow .cn .nm2:hover{color:var(--accent-strong);text-decoration:underline}
.star{border:none;background:none;cursor:pointer;color:var(--txt-3);width:32px;height:32px;display:grid;place-items:center;
      padding:0;flex:none;border-radius:var(--r-sm);transition:background var(--t),color var(--t);position:relative}
.star::after{content:'';position:absolute;inset:-4px}
.star:hover{color:var(--star);background:var(--surface-2)}
.star svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.star.on{color:var(--star)}.star.on svg{fill:currentColor}
.gplay{width:32px;height:32px;border:none;background:transparent;color:var(--txt-3);border-radius:var(--r-sm);cursor:pointer;display:grid;place-items:center;flex:none;transition:background var(--t),color var(--t);margin-left:2px;position:relative}
.gplay::after{content:'';position:absolute;inset:-4px}
.gplay:hover{background:var(--accent-soft);color:var(--accent-strong)}
.gplay svg{width:14px;height:14px}
.crow .msub{display:none}
.page-head .sub,#estadoInfo,#covInfo{font-variant-numeric:tabular-nums}
.crow .num{text-align:right;color:var(--txt-2)}
.crow .cbar{display:flex;align-items:center;gap:var(--s-2)}
.crow .pctxt{font-size:var(--fs-xs);font-weight:var(--fw-sb);min-width:40px;text-align:right}
.crow .nodata{color:var(--txt-3);font-size:var(--fs-xs);font-style:italic;font-weight:var(--fw-md)}
#estadoBody .bar i{transition:width .8s cubic-bezier(.22,1,.36,1),background-color .5s}
body[data-role=cliente] .star,body[data-role=cliente] .pbadge{display:none}

details.grp{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:var(--s-2);background:var(--surface)}
details.grp summary{cursor:pointer;padding:var(--s-3) 14px;font-weight:var(--fw-sb);display:flex;align-items:center;gap:10px;list-style:none;font-size:var(--fs);min-height:var(--ctl-lg)}
details.grp summary::-webkit-details-marker{display:none}
details.grp summary:focus-visible{outline:none;box-shadow:inset var(--ring)}
details.grp summary .caret{width:16px;height:16px;color:var(--txt-3);transition:transform var(--t);flex-shrink:0}
details.grp[open] summary .caret{transform:rotate(90deg)}
details.grp summary .cnt{color:var(--txt-3);font-weight:var(--fw-md);font-size:var(--fs-sm);flex-shrink:0}
details.grp summary .gname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
details.grp summary .right{margin-left:auto;display:flex;align-items:center;gap:10px;flex-shrink:0}
details.grp summary .right .bar{width:160px}
details.grp summary .gpct{font-size:var(--fs-sm);font-weight:var(--fw-sb);min-width:44px;text-align:right}
details.grp .inner{padding:0 14px var(--s-3);border-top:1px solid var(--line)}
table{width:100%;border-collapse:collapse;font-size:var(--fs)}
th{display:table-cell;text-align:left;padding:var(--s-2);border-bottom:1px solid var(--line)}
td{padding:var(--s-2);border-bottom:1px solid var(--line);vertical-align:middle}
th svg{width:12px;height:12px;vertical-align:-2px;margin-left:2px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body[data-role=cliente] .src{display:none}
tr:last-child td{border-bottom:none}
.num{text-align:right}

/* prioridades */
.mini-add{border:1px solid var(--line);background:var(--surface-2);color:var(--txt);border-radius:var(--r-sm);cursor:pointer;height:var(--ctl-sm);
      padding:0 10px;font-size:var(--fs-sm);font-weight:var(--fw-sb);transition:border-color var(--t),color var(--t);white-space:nowrap}
.mini-add:hover{border-color:var(--accent);color:var(--accent-strong)}
.prow{display:flex;align-items:center;gap:10px;padding:6px var(--s-3);min-height:var(--ctl-lg);border-radius:var(--r-sm);background:var(--surface-2);margin-bottom:5px;transition:opacity var(--t-fast),box-shadow var(--t-fast)}
.prow.drag{opacity:.35} .prow.over{box-shadow:inset 0 0 0 2px var(--accent)}
.prow .grip{color:var(--txt-3);cursor:grab;display:grid;place-items:center}
.prow .grip svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.prow .nm{flex:1;font-size:var(--fs);min-width:0}
.prow .nm b{color:var(--accent-strong);margin-right:4px}
.prow small{color:var(--txt-3)}
.prow button{border:1px solid var(--line);background:var(--surface);color:var(--txt-2);border-radius:var(--r-sm);cursor:pointer;
      width:32px;height:32px;display:grid;place-items:center;transition:border-color var(--t),color var(--t);position:relative}
.prow button::after{content:'';position:absolute;inset:-4px}
.prow button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.prow button:hover{border-color:var(--accent);color:var(--accent-strong)}

/* laboratorio (experimentos): solo tokens */
.exp-form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px var(--s-4);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:var(--s-3)}
.exp-row{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:flex-end}
.exp-adv{background:var(--surface-2);border-radius:var(--r-sm);padding:10px var(--s-3);align-items:center;gap:14px}
.exp-ctl{display:flex;flex-direction:column;gap:3px;font-size:var(--fs-xs);font-weight:var(--fw-sb);color:var(--txt-3)}
.exp-ctl.inline{flex-direction:row;align-items:center;gap:7px}
.exp-ctl output{color:var(--accent-strong)}
.exp-ctl input[type=range]{width:130px}
.exp-ctl input[type=text]{height:var(--ctl-sm);font-size:var(--fs-sm);padding:0 var(--s-2)}
.exp-chk{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--txt-2);cursor:pointer;white-space:nowrap}
.exp-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s-3) 14px;margin-bottom:var(--s-2);box-shadow:var(--shadow)}
.exp-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.exp-top .nm{font-weight:var(--fw-sb);font-size:var(--fs);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.exp-thumb{width:64px;height:36px;object-fit:cover;border-radius:var(--r-sm);background:var(--surface-3);flex:none;cursor:pointer}
.exp-top .nm span{color:var(--txt-3);font-weight:var(--fw-md)}
.exp-params{font-size:var(--fs-xs);color:var(--txt-3);margin-top:3px}
.exp-res{display:flex;align-items:center;gap:var(--s-4);margin-top:9px;flex-wrap:wrap}
.exp-big{font-size:21px;font-weight:var(--fw-b);color:var(--ok-txt)}
.exp-sub{font-size:var(--fs-xs);color:var(--txt-3)}
.exp-szbar{flex:1;min-width:140px;display:flex;flex-direction:column;gap:4px}
.exp-szbar .bar{height:9px}
.vmaf{font-weight:var(--fw-b)}
.cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cmp-grid video{width:100%;background:var(--video-bg);border-radius:var(--r);aspect-ratio:16/9}
.mvpair{display:flex;gap:var(--s-2);margin-top:10px}
.mvpair>div{flex:1;min-width:0}
.mvpair img{width:100%;border-radius:var(--r-sm);background:var(--surface-3)}
.cmp-tag{margin-bottom:4px}
.cmp-tag.ok{color:var(--ok-txt)}
.cmp-tag b{font-weight:var(--fw-sb);margin-left:6px;color:var(--txt-2);text-transform:none;letter-spacing:0}
.exp-head-row{display:flex;align-items:center;gap:10px}
.exp-head-row .chiprow{margin-left:auto}
.cov-tools.static{position:static;border-bottom:none;padding:var(--s-1) 0 0}


/* ── 6b. F3: banner global, Respaldo, Operación, Prioridades, panel lateral ── */
.gbanner{display:flex;align-items:center;gap:10px;padding:var(--s-2) var(--s-5);background:var(--danger-soft);color:var(--danger-txt);
        font-weight:var(--fw-sb);font-size:var(--fs);border-bottom:1px solid var(--line);flex-shrink:0}
.gbanner svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* semáforo del servicio */
.svc{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
     padding:var(--s-3) var(--s-4);box-shadow:var(--shadow)}
.svc .d{width:12px;height:12px;border-radius:50%;background:var(--txt-3);box-shadow:0 0 0 4px var(--surface-3);flex:none}
.svc.ok .d{background:var(--ok);box-shadow:0 0 0 4px var(--ok-soft)}
.svc.warn .d{background:var(--warn);box-shadow:0 0 0 4px var(--warn-soft)}
.svc.danger .d{background:var(--danger);box-shadow:0 0 0 4px var(--danger-soft)}
.svc .svc-t{display:flex;flex-direction:column;min-width:0;flex:1}
.svc b{font-size:var(--fs-md);font-weight:var(--fw-sb)}
.svc.ok b{color:var(--ok-txt)} .svc.warn b{color:var(--warn-txt)} .svc.danger b{color:var(--danger-txt)}
.svc .svc-s{font-size:var(--fs-sm);color:var(--txt-3)}
.svc .svc-more{list-style:none;width:100%;display:flex;flex-direction:column;gap:4px;font-size:var(--fs-sm);color:var(--txt-2);padding-left:24px}
.svc .svc-more b{font-size:inherit;color:var(--warn-txt)} .svc .svc-more li.danger b{color:var(--danger-txt)}
.kpi.ok .v{color:var(--ok-txt)} .kpi.warn .v{color:var(--warn-txt)} .kpi.danger .v{color:var(--danger-txt)}
/* I5: hero flexible: donut 1 : KPI 3; las tarjetas bajan a 140 px sin recortar el valor (4 columnas hasta 1024) */
.cov-hero .cov-donut{flex:1 1 232px;min-width:0}
.cov-hero .kpis{flex:3 1 320px;align-content:start;min-width:0;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.cov-hero .kpis .skel{height:82px}
/* I1: la barra pegajosa se ancla al borde del scroll de .page-body (top:0 la dejaba 24 px más abajo, el padding, y asomaba una fila) */
.cov-tools{margin:0}
#cov .cov-tools{top:calc(-1 * var(--s-6))}
.cov-tools .btn.sm{flex:none}
.chead,.crow{grid-template-columns:minmax(0,1fr) 100px 108px 104px 150px}
.crow .stt{display:flex;justify-content:center}
.chead .stt{text-align:center}
.crow .cn .nm2{border:none;background:transparent;font:inherit;color:inherit;padding:0 2px;text-align:left;min-width:0;white-space:nowrap;
     overflow:hidden;text-overflow:ellipsis;cursor:pointer;border-radius:var(--r-xs)}
.crow .cn .nm2:hover,.crow .cn .nm2:focus-visible{color:var(--accent-strong);text-decoration:underline;outline:none}
.star:disabled{cursor:default;background:transparent}
.star[aria-pressed=true]{color:var(--star)}
.gchips{gap:6px}
.gchips .badge{gap:4px}
.gchips .badge .dot{width:6px;height:6px}
.prio-msg.ok{color:var(--ok-txt)} .prio-msg.danger{color:var(--danger-txt)}
.mini-add.danger{border-color:var(--danger);color:var(--danger-txt);background:var(--danger-soft)}
.prow .nm.na .txt{color:var(--txt-3);font-style:italic}
/* panel lateral */
.clips-head{justify-content:flex-start;gap:var(--s-2)}
.clips-head .tz{font-size:var(--fs-xs);color:var(--txt-3);font-weight:var(--fw-md);margin-right:auto;white-space:nowrap}
.clip{position:relative}
.clip .clip-dl{width:32px;height:32px;border:none;background:transparent;color:var(--txt-3);border-radius:var(--r-sm);display:grid;place-items:center;
     flex:none;cursor:pointer;opacity:.7;position:relative}
.clip .clip-dl::after{content:'';position:absolute;inset:-6px}
.clip .clip-dl svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.clip .clip-dl:hover,.clip .clip-dl:focus-visible{background:var(--surface-3);color:var(--accent-strong);opacity:1;outline:none}
.clip.sel .clip-dl{color:var(--accent-strong);opacity:1}
.cal-mes{border:none;background:transparent;font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-sb);color:var(--txt);padding:4px 8px;
     border-radius:var(--r-sm);cursor:pointer;display:inline-flex;align-items:center;gap:4px;min-height:32px}
.cal-mes::first-letter{text-transform:uppercase}
.cal-mes:hover{background:var(--surface-3)}
.cal-mes[aria-expanded=true]{background:var(--accent-soft);color:var(--accent-strong)}
.cal-pick{display:flex;gap:6px;padding:2px 0 6px}
.cal-pick .select{flex:1;min-width:0}
.cal-pick select{height:var(--ctl-sm);font-size:var(--fs-sm);padding:0 26px 0 var(--s-2)}
.cal-pick .select::after{right:10px}
/* diálogo Descargar tramo */
.dlp-row{display:flex;gap:var(--s-3);margin-bottom:var(--s-3)} .dlp-row .field{flex:1}
.dlp-err{color:var(--danger-txt);font-size:var(--fs-sm);min-height:18px;margin-bottom:var(--s-2)}
.dlp-err:empty{display:none}
.pop .hintline{color:var(--txt-3);font-size:var(--fs-sm);margin-bottom:var(--s-3)}
.pop-foot{display:flex;justify-content:flex-end;gap:var(--s-2);margin-top:var(--s-3)}
/* categorías del gráfico del laboratorio (sin hex en el JS) */
:root{--cat-1:#2563eb;--cat-2:#059669;--cat-3:#d97706;--cat-4:#7c3aed;--cat-5:#db2777;--cat-6:#0891b2;--cat-7:#ea580c;--cat-8:#c026d3;--cat-9:#65a30d;--cat-10:#0d9488}
[data-theme=dark]{--cat-1:#60a5fa;--cat-2:#34d399;--cat-3:#fbbf24;--cat-4:#a78bfa;--cat-5:#f472b6;--cat-6:#22d3ee;--cat-7:#fb923c;--cat-8:#e879f9;--cat-9:#a3e635;--cat-10:#2dd4bf}
.exp-legend{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:var(--s-2);font-size:var(--fs-xs);color:var(--txt-3)}
.exp-legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px;vertical-align:-1px}
#expTable th[data-k]{cursor:pointer;white-space:nowrap}
#covPrintHead{display:none}

/* ── 7. Responsivo ─────────────────────────────────────────────────────── */
@media(max-width:1050px){
  header .tab .tl{display:none}
  header .tab{width:40px;padding:0}
  header .tab svg{width:18px;height:18px}
  .health .hl{display:none}   /* "Respaldado" / "libres" se acortan */
}
@media(max-width:1024px){
  .kpi .v small{display:block;margin-top:2px;line-height:var(--lh-tight)}   /* I5: la unidad/comparación baja de línea */
  .cov-hero .kpi .k{min-height:calc(2 * var(--lh-tight) * 1em)}   /* etiquetas de 1 o 2 líneas: los valores quedan alineados */
}
@media(max-width:900px){
  header{position:sticky;top:0;height:56px;padding:0 var(--s-3);gap:var(--s-2)}
  .page-cols{display:flex;flex-direction:column;overflow-y:auto}
  .page-col+.page-col{border-left:none;border-top:1px solid var(--line)}
  .page-head{height:auto;min-height:56px;padding:10px 14px;flex-wrap:wrap}
  .page-head h2{font-size:15px}
  .page-head .sub{width:100%;order:9;font-size:var(--fs-sm);white-space:normal}
  .page-body{padding:14px}
  #cov .cov-tools{top:-14px}   /* = padding de .page-body aquí */
  .kpis{grid-template-columns:repeat(2,1fr);gap:10px}
  .cov-hero .kpis{flex-basis:100%;grid-template-columns:repeat(2,1fr)}   /* donut a todo el ancho y KPI 2×2 debajo */
  .kpi .v{font-size:19px}
  details.grp summary .right .bar{width:64px}
  details.grp summary .cnt{display:none}
  details.grp summary{padding:11px var(--s-3)}
}
/* I9: tableta 768–900 px: se mantienen dos columnas (panel de 300 px + reproductor); apilar solo por debajo de 768 */
@media(min-width:768px) and (max-width:900px){
  :root{--sidebar:300px}
  aside{padding:var(--s-3)}
  /* el reproductor mide ~470 px: la hora toma el espacio libre; fecha y zona horaria quedan en el calendario y el ⋯ */
  #pbar .tm{flex:1 1 auto;min-width:0}
  #pbar .tm small,#pbar .zoomlbl{display:none}
  #pbar .spacer{flex:0 0 4px;min-width:0}
}
@media(max-width:767px){
  body{height:auto;min-height:100dvh;overflow-y:auto;overflow-anchor:none}
  main{display:flex;flex-direction:column}
  aside{border-right:none;border-bottom:1px solid var(--line)}
  #clips{max-height:40vh}
  /* F2: en columna, main y section crecen con su contenido (si no, el escenario queda a 0 px) */
  main{flex:none;height:auto}
  section{flex:none}
  #stage{flex:none;height:calc(56.25vw + 48px);min-height:0}
  #stage[data-layout="2x2"]{height:calc(112.5vw + 48px)}
  #stage.fakefs,#stage:fullscreen{height:auto}
  #pbar{padding:5px 8px calc(6px + env(safe-area-inset-bottom))}
  #pbar .tm small.tz,#pbar .zoomlbl{display:none}
  .cov-tools{position:static}   /* aquí desplaza la ventana, no .page-body */
}
@media(max-width:800px){.cmp-grid{grid-template-columns:1fr}}
@media(max-width:700px){
  .cov-donut{width:100%}
  .chead{display:none}
  .crow{grid-template-columns:minmax(0,1fr) auto;row-gap:5px}
  .crow .num{display:none}
  .crow .cn{flex-wrap:wrap}
  .crow .msub{display:block;width:100%;font-size:var(--fs-xs);color:var(--txt-3);order:9;padding-left:29px;margin-top:-2px}
  .crow .cbar{grid-column:1/-1}
  .cov-tools{gap:6px}
  .chiprow{overflow-x:auto;flex-wrap:nowrap;max-width:100%;padding-bottom:2px;scrollbar-width:none}
  .chiprow::-webkit-scrollbar{display:none}
  .upd{width:100%;justify-content:flex-end;margin-left:0}
  #pbar{padding:5px 10px calc(7px + env(safe-area-inset-bottom))}
  /* I8: la hora toma el espacio libre en vez de recortarse a "00:…"; fecha y zona van al ⋯ */
  #pbar .tm{font-size:var(--fs-sm);margin:0 4px;flex:1 1 auto;min-width:0}
  #pbar .tm small{display:none}   /* misma especificidad que la regla base (inline-block) */
  #pbar .spacer{flex:0 0 4px;min-width:0}
  .cal{padding:6px var(--s-2)}
  .cal-grid .day{height:30px;font-size:var(--fs-xs)}
  #clips{max-height:34vh}
  .health .hm{display:none}   /* solo "87 %" */
}
@media(max-width:560px){
  .brand .bt{display:none}
  .brand{padding:0}
  .health{padding:0 10px}
  .menu{width:min(280px,calc(100vw - 24px))}
}
@media(max-width:420px){
  .kpis{grid-template-columns:1fr 1fr}
  details.grp summary .right .bar{display:none}
  #pbar #dl,#pbar #fs{display:none}   /* I8: siguen en el menú ⋯ */
  #login form{padding:var(--s-6)}
}

/* ── impresión: la vista actual completa, sin cabecera ni herramientas ── */
@media print{
  html,body{height:auto;overflow:visible;background:#fff;color:#000;display:block}
  header,.toast,.pop-back,.cov-tools,#pbar,.tap2play,#dropHint,.cell-hd,.cell-seek,aside,.page-head .btn,.page-head .spacer,.exp-form,#login{display:none !important}
  main,.page,.page-body,.page-cols,.page-col,#clips,#estadoBody{display:block;overflow:visible !important;height:auto !important;max-height:none !important;min-height:0}
  .page{animation:none}
  .page-body{padding:0;max-width:none}
  .page-head{height:auto;border:none;padding:0 0 var(--s-3)}
  details.grp{break-inside:avoid;box-shadow:none}
  .kpi,.dl-card,.cov-donut,.exp-card{box-shadow:none;break-inside:avoid}
  #stage{min-height:0;background:#fff}
  #grid{display:block}.cell{display:block;break-inside:avoid}.cell-body{position:static}.cell-body video{position:static;height:auto;transform:none}
  a[href]::after{content:''}
  /* informe de Respaldo: cabecera de impresión, todos los centros abiertos, sin controles */
  #covPrintHead{display:block;font-size:var(--fs-lg);font-weight:var(--fw-sb);margin-bottom:var(--s-3)}
  .gbanner,.gplay,.star,.clip-dl,.more-btn,#covToggleAll,.cal-pick,.upd{display:none !important}
  /* I7: los grupos "por clasificar" (cámaras sin centro confirmado) no van al informe impreso */
  details.grp.unclassified,[data-unclassified]{display:none !important}
  .svc,.kpi{border:1px solid #bbb}
  .svc .svc-more{padding-left:16px}
  .cov-hero{display:grid;grid-template-columns:auto 1fr;gap:10px}
  .kpis{grid-template-columns:repeat(4,1fr)}
  details.grp{page-break-inside:auto;break-inside:auto;margin-bottom:var(--s-3)}
  details.grp summary{break-after:avoid;padding:6px 10px;min-height:0}
  details.grp summary .caret{display:none}
  details.grp .inner{display:block;padding:0 10px 6px}
  .chead{display:grid;padding:4px 6px 2px}
  /* I7: filas compactas (17.000+ cámaras): 21 px por fila en vez de 27 */
  .crow{break-inside:avoid;font-size:var(--fs-sm);min-height:0;padding:2px 6px;gap:8px}
  .crow .msub{display:none}
  .crow .cn{gap:5px}
  .badge{border:1px solid currentColor;height:16px;padding:0 5px}
  .crow .bar{height:5px}
  .bar{border:1px solid #ccc}
}

/* modo archivo (2026-11): la descarga desde el DSS está retirada */
body[data-mode=archivo] [data-dl]{display:none!important}
body[data-mode=archivo] .cov-hero{grid-template-columns:1fr}
.banner.ok{background:var(--surface-2);color:var(--txt-2)}