:root{--bg:#080d16;--panel:#0d1522;--panel2:#111b2b;--line:#202d42;--text:#e8eef8;--muted:#8fa0b8;--accent:#4d92f4;--accent2:#2cb49e;--good:#4dd4ac;--warn:#f4bd62;--bad:#ff7486;--shadow:0 14px 40px rgba(0,0,0,.26)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}button,input,select{font:inherit}button{cursor:pointer;border:0}button:focus-visible,input:focus-visible,select:focus-visible,.timeline:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.hidden{display:none!important}.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 30% 10%,#12213a 0,transparent 35%),var(--bg)}.login-card{width:min(390px,100%);background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:var(--shadow)}.brand-mark{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;font-weight:800;background:linear-gradient(135deg,var(--accent),var(--accent2));color:white}.brand-mark.small{width:36px;height:36px;border-radius:10px;font-size:13px}.login-card h1{margin:18px 0 5px;font-size:25px}.login-card p{margin:0 0 22px;color:var(--muted);font-size:13px}.login-card label,.recording-toolbar label{display:grid;gap:7px;color:#aebbd0;font-size:12px;margin-bottom:13px}.login-card input,.recording-toolbar select,.live-actions select{width:100%;background:#080e19;border:1px solid var(--line);border-radius:9px;color:var(--text);padding:11px}.primary{background:linear-gradient(135deg,#397fdc,#2e66c7);color:white;border-radius:9px;padding:11px 14px;font-weight:700}.login-card .primary{width:100%;margin-top:7px}.compact{padding:9px 13px}.error{background:rgba(255,116,134,.09);border:1px solid rgba(255,116,134,.25);color:#ffb5c0;border-radius:8px;padding:9px 10px;font-size:12px}.app{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;background:#090f19;border-right:1px solid var(--line);padding:20px 14px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:11px;padding:2px 8px 22px}.brand strong,.brand span{display:block}.brand span{color:var(--muted);font-size:10px;margin-top:2px}.sidebar nav{display:grid;gap:4px}.nav-item{width:100%;display:flex;align-items:center;gap:10px;background:transparent;color:#9cadc5;border-radius:9px;padding:10px 11px;text-align:left;text-decoration:none;font-size:13px}.nav-item span{width:18px;text-align:center}.nav-item:hover,.nav-item.active{background:#111c2c;color:white}.nav-item.active{box-shadow:inset 3px 0 0 var(--accent)}.sidebar-bottom{margin-top:auto;border-top:1px solid var(--line);padding-top:10px}.content{min-width:0;padding:0 28px 28px}.topbar{min-height:82px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);margin-bottom:24px}.topbar h2{margin:0;font-size:22px}.topbar p{margin:4px 0 0;color:var(--muted);font-size:13px}.status-wrap{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--warn);box-shadow:0 0 0 4px rgba(244,189,98,.08)}.status-dot.good{background:var(--good);box-shadow:0 0 0 4px rgba(77,212,172,.08)}.status-dot.bad{background:var(--bad)}.view{display:none}.view.active{display:block}.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:14px}.kpi{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:14px;padding:18px}.kpi span{display:block;color:var(--muted);font-size:12px}.kpi strong{display:block;font-size:26px;margin:8px 0 3px}.kpi small{color:#8798b1}.server-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:0 0 28px}.server-strip>div{background:#0b121e;padding:12px 14px}.server-strip span,.server-strip strong{display:block}.server-strip span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}.server-strip strong{margin-top:4px;font-size:13px}.section-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin:0 0 14px}.section-head h3{margin:0;font-size:17px}.section-head p{margin:4px 0 0;color:var(--muted);font-size:12px}.ghost{background:#121c2d;color:#c9d7eb;border:1px solid var(--line);border-radius:9px;padding:9px 12px}.ghost:hover{background:#18253a}.camera-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.camera-card,.record-card{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:15px}.camera-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.camera-card h4{margin:0;font-size:15px}.badge-row{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}.pill{font-size:10px;padding:4px 7px;border-radius:99px;background:rgba(143,160,184,.1);color:#bac7d9;border:1px solid rgba(143,160,184,.18)}.pill.good{background:rgba(77,212,172,.1);color:#82e6c8;border-color:rgba(77,212,172,.18)}.pill.bad{background:rgba(255,116,134,.09);color:#ffacb8;border-color:rgba(255,116,134,.2)}.pill.warn{background:rgba(244,189,98,.09);color:#ffd488;border-color:rgba(244,189,98,.2)}.camera-card p{margin:8px 0 13px;color:var(--muted);font-size:12px;min-height:30px}.camera-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 12px}.camera-meta div{background:#09111d;border:1px solid #17243a;border-radius:8px;padding:8px}.camera-meta span,.camera-meta strong{display:block}.camera-meta span{font-size:9px;text-transform:uppercase;color:#73859f}.camera-meta strong{font-size:11px;margin-top:3px}.meter{height:7px;background:#09101d;border:1px solid #1d293c;border-radius:10px;overflow:hidden}.meter>span{display:block;height:100%;background:linear-gradient(90deg,#438ef0,#2cae9a)}.meter-row{display:flex;justify-content:space-between;color:#8293ad;font-size:11px;margin-top:7px}.empty-state{display:grid;place-items:center;min-height:170px;color:var(--muted);border:1px dashed var(--line);border-radius:13px}.live-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.layout-switch{display:flex;gap:3px;padding:3px;background:#09111d;border:1px solid var(--line);border-radius:9px}.layout-switch button{min-width:36px;background:transparent;color:#93a5bd;border-radius:6px;padding:6px 9px}.layout-switch button.active{background:#1a2b44;color:#fff}.live-actions select{width:auto;min-width:150px;padding:8px 9px}.live-grid{display:grid;gap:14px;min-height:0;border:0}.live-grid.layout-1{grid-template-columns:1fr}.live-grid.layout-3{grid-template-columns:repeat(2,minmax(0,1fr))}.live-grid.layout-3 .live-card:nth-child(3){grid-column:1/-1}.live-grid.layout-4{grid-template-columns:repeat(2,minmax(0,1fr))}.live-card{background:#050911;border:1px solid var(--line);border-radius:14px;overflow:hidden;position:relative;box-shadow:var(--shadow);cursor:pointer}.live-card video{display:block;width:100%;aspect-ratio:16/9;background:#02050a;object-fit:contain}.live-grid.layout-1 .live-card video{max-height:calc(100vh - 190px)}.live-overlay{position:absolute;left:0;right:0;bottom:0;padding:30px 13px 11px;background:linear-gradient(transparent,rgba(0,0,0,.82));display:flex;justify-content:space-between;align-items:end;pointer-events:none}.live-name{font-weight:700;font-size:14px}.live-meta{display:block;color:#b0bed1;font-size:10px;margin-top:2px}.live-state{font-size:10px;border-radius:99px;padding:4px 7px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.12)}.recording-toolbar{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin-bottom:16px}.recording-toolbar label{margin:0;min-width:190px}.timeline-panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:16px}.timeline-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}.timeline-top strong{font-size:24px;display:block;margin:2px 0}.timeline-top small{display:block;color:var(--muted)}.eyebrow{font-size:9px;text-transform:uppercase;color:#71839c;letter-spacing:.07em}.timeline-controls{display:flex;gap:8px;flex-wrap:wrap}.zoom-row{display:flex;align-items:center;gap:10px;margin-bottom:9px;color:var(--muted);font-size:11px}.zoom-switch{margin-right:auto}.timeline-window{white-space:nowrap}.timeline{position:relative;height:58px;border:1px solid #25354d;border-radius:10px;background:#070d16;overflow:hidden;cursor:crosshair}.timeline-segments{position:absolute;inset:0}.timeline-segment{position:absolute;top:12px;height:32px;border-radius:4px;background:linear-gradient(180deg,rgba(77,146,244,.85),rgba(44,180,158,.7));border:1px solid rgba(105,183,255,.25);min-width:2px}.timeline-segment.growing{box-shadow:inset 0 0 0 1px rgba(77,212,172,.65)}.timeline-cursor{position:absolute;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.4);pointer-events:none;transform:translateX(-1px)}.timeline-cursor span{position:absolute;top:4px;left:50%;transform:translateX(-50%);width:8px;height:8px;border-radius:50%;background:#fff}.timeline-ticks{display:grid;grid-template-columns:repeat(5,1fr);color:#7689a5;font-size:10px;margin-top:5px}.timeline-ticks span:nth-child(2),.timeline-ticks span:nth-child(3),.timeline-ticks span:nth-child(4){text-align:center}.timeline-ticks span:last-child{text-align:right}.timeline-range{width:100%;margin:8px 0 2px;accent-color:var(--accent)}.timeline-legend{display:flex;gap:16px;color:#7f90a9;font-size:10px;margin-top:4px}.timeline-legend i{display:inline-block;width:12px;height:6px;border-radius:2px;margin-right:5px;vertical-align:1px}.legend-recorded{background:linear-gradient(90deg,var(--accent),var(--accent2))}.legend-gap{background:#111a28;border:1px solid #26364e}.recording-stats{color:var(--muted);font-size:12px;margin-bottom:10px}.recording-list{display:grid;gap:8px;min-height:130px}.record-card{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:12px 14px}.record-time{font-weight:700}.record-sub{color:var(--muted);font-size:11px;margin-top:3px}.record-card button{background:#19263c;color:#d9e5f7;border:1px solid #30405a;border-radius:8px;padding:8px 11px}.modal{position:fixed;inset:0;background:rgba(0,0,0,.75);display:grid;place-items:center;padding:24px;z-index:20}.modal-card{width:min(1100px,100%);background:#090f1b;border:1px solid var(--line);border-radius:15px;overflow:hidden;box-shadow:var(--shadow)}.modal-head{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;border-bottom:1px solid var(--line)}.modal-head span{display:block;color:var(--muted);font-size:11px;margin-top:2px}.icon-btn{width:36px;height:36px;border-radius:9px;background:#172237;color:#fff;font-size:22px}.modal video{display:block;width:100%;max-height:72vh;background:#000}.modal-nav{display:flex;justify-content:center;gap:10px;padding:11px;border-top:1px solid var(--line)}footer{color:#61718a;font-size:10px;margin-top:30px;text-align:right}@media(max-width:1100px){.kpis{grid-template-columns:repeat(2,1fr)}.camera-summary{grid-template-columns:repeat(2,1fr)}.server-strip{grid-template-columns:repeat(3,1fr)}}@media(max-width:800px){.app{grid-template-columns:1fr}.sidebar{position:fixed;z-index:10;left:0;right:0;bottom:0;top:auto;height:64px;border-right:0;border-top:1px solid var(--line);padding:7px 10px;flex-direction:row}.brand,.sidebar-bottom .link{display:none}.sidebar nav{display:flex;flex:1;justify-content:space-around}.sidebar-bottom{margin:0;padding:0;border:0;display:flex}.sidebar-bottom #logoutBtn span{display:none}.sidebar-bottom #logoutBtn{width:auto;font-size:0}.sidebar-bottom #logoutBtn:after{content:'↪';font-size:18px}.nav-item{justify-content:center;padding:8px}.nav-item span{width:auto}.nav-item.active{box-shadow:inset 0 -3px 0 var(--accent)}.content{padding:0 14px 82px}.topbar{min-height:68px}.topbar p{display:none}.server-strip{grid-template-columns:repeat(2,1fr)}.camera-summary{grid-template-columns:1fr}.section-head{align-items:flex-start;flex-direction:column}.live-actions{width:100%;justify-content:flex-start}.live-grid.layout-3,.live-grid.layout-4{grid-template-columns:1fr}.live-grid.layout-3 .live-card:nth-child(3){grid-column:auto}.recording-toolbar{display:grid;grid-template-columns:1fr 1fr}.recording-toolbar .primary{grid-column:1/-1}.recording-toolbar label{min-width:0}.timeline-top{align-items:flex-start;flex-direction:column}.timeline-controls{width:100%}.status-wrap span:last-child{display:none}}@media(max-width:480px){.kpis{grid-template-columns:1fr}.server-strip{grid-template-columns:1fr 1fr}.topbar h2{font-size:19px}.recording-toolbar{grid-template-columns:1fr}.recording-toolbar .primary{grid-column:auto}.timeline-controls{display:grid;grid-template-columns:1fr 1fr}.timeline-controls #playSelected{grid-column:1/-1;grid-row:1}.zoom-row{flex-wrap:wrap}.timeline-window{width:100%}}


/* v0.3 - administración de cámaras */
.admin-notice{display:flex;gap:12px;align-items:flex-start;background:rgba(244,189,98,.07);border:1px solid rgba(244,189,98,.2);border-radius:12px;padding:12px 14px;margin-bottom:14px;color:#d8c59e;font-size:12px}.admin-notice strong{color:#f7d998;white-space:nowrap}.camera-admin-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:14px}.admin-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px}.form-title{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:14px}.form-title h4{margin:0;font-size:15px}.form-title p{margin:4px 0 0;color:var(--muted);font-size:11px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 12px}.form-grid label{display:grid;gap:6px;color:#aebbd0;font-size:11px}.form-grid label small{color:#7486a0;font-size:9px;margin-left:3px}.form-grid .span-2{grid-column:1/-1}.form-grid input,.form-grid select{width:100%;min-width:0;background:#080e19;border:1px solid var(--line);border-radius:9px;color:var(--text);padding:10px}.input-suffix{display:flex;align-items:stretch}.input-suffix input{border-radius:9px 0 0 9px}.input-suffix span{display:grid;place-items:center;padding:0 10px;border:1px solid var(--line);border-left:0;border-radius:0 9px 9px 0;background:#111b2b;color:var(--muted);font-size:10px}.admin-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}.admin-result{margin-top:13px;border-radius:9px;padding:10px 11px;font-size:11px;white-space:pre-wrap}.admin-result.good{background:rgba(77,212,172,.08);border:1px solid rgba(77,212,172,.2);color:#8fe7cd}.admin-result.bad{background:rgba(255,116,134,.08);border:1px solid rgba(255,116,134,.2);color:#ffb4be}.admin-result.warn{background:rgba(244,189,98,.08);border:1px solid rgba(244,189,98,.2);color:#ffd68e}.admin-camera-list{display:grid;gap:8px;min-height:120px}.admin-camera-item{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#09111d;border:1px solid #17243a;border-radius:10px;padding:11px 12px}.admin-camera-item strong,.admin-camera-item span{display:block}.admin-camera-item span{font-size:10px;color:var(--muted);margin-top:3px}.admin-camera-streams{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}.admin-footnote{color:#73849d;font-size:10px;line-height:1.5;margin:13px 0 0}.admin-footnote code{color:#a9bbd2}.primary:disabled,.ghost:disabled{opacity:.5;cursor:not-allowed}@media(max-width:1050px){.camera-admin-grid{grid-template-columns:1fr}}@media(max-width:600px){.form-grid{grid-template-columns:1fr}.form-grid .span-2{grid-column:auto}.admin-actions{display:grid;grid-template-columns:1fr}.admin-notice{display:block}.admin-notice strong{display:block;margin-bottom:5px}}

/* v0.3.3 live layouts */
.live-layout-label{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:11px}.live-layout-label select{min-width:112px}.live-grid.layout-2{grid-template-columns:repeat(2,minmax(0,1fr))}.live-grid.layout-main5{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,auto))}.live-grid.layout-main5 .live-card-main{grid-column:1/3;grid-row:1/3}.live-grid.layout-main5 .live-card-main video{height:100%;min-height:360px}.live-grid.layout-main5 .live-card:not(.live-card-main) video{aspect-ratio:16/9}.live-grid.layout-9{grid-template-columns:repeat(3,minmax(0,1fr))}.live-grid.layout-9 .live-card video{aspect-ratio:16/9}.live-grid.layout-2 .live-card video,.live-grid.layout-4 .live-card video{aspect-ratio:16/9}@media(max-width:800px){.live-grid.layout-2,.live-grid.layout-main5,.live-grid.layout-9{grid-template-columns:1fr}.live-grid.layout-main5 .live-card-main{grid-column:auto;grid-row:auto}.live-grid.layout-main5 .live-card-main video{min-height:0}}

/* v0.3.6 - geometría de video estilo DVR/NVR
   Cada mosaico usa una ventana 16:9 estable. El video llena esa ventana para
   normalizar streams anamórficos como 1080N/1080P-Lite (p.ej. 960x1080). */
.live-card{
  aspect-ratio:16 / 9;
  min-width:0;
  background:#000;
}
.live-card video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-height:none!important;
  aspect-ratio:auto!important;
  object-fit:fill;
  background:#000;
}
.live-grid.layout-1{
  justify-items:center;
}
.live-grid.layout-1 .live-card{
  width:min(100%,1280px);
}
.live-grid.layout-main5 .live-card-main{
  min-height:0;
}
.live-grid.layout-main5 .live-card-main video,
.live-grid.layout-main5 .live-card:not(.live-card-main) video,
.live-grid.layout-9 .live-card video,
.live-grid.layout-2 .live-card video,
.live-grid.layout-4 .live-card video{
  height:100%;
  min-height:0;
  aspect-ratio:auto!important;
}
@media(max-width:800px){
  .live-card{aspect-ratio:16 / 9;}
  .live-grid.layout-1 .live-card{width:100%;}
}

/* v0.3.7 - navegación y exportación de grabaciones */
.day-nav{display:flex;gap:6px;align-items:center}.day-nav button:disabled,.timeline-controls button:disabled,.clip-actions button:disabled{opacity:.42;cursor:not-allowed}.clip-toolbar{display:grid;grid-template-columns:minmax(170px,220px) minmax(240px,1fr) auto;align-items:end;gap:14px;margin:0 0 14px;padding:12px;border:1px solid #1d2c43;border-radius:10px;background:#09111d}.clip-toolbar label{margin:0}.clip-toolbar select{margin-top:5px}.clip-summary{min-width:0}.clip-summary strong,.clip-summary small{display:block}.clip-summary strong{font-size:14px;margin:4px 0}.clip-summary small{color:var(--muted);font-size:10px}.clip-actions{display:flex;gap:7px;align-items:center;justify-content:flex-end}.timeline-segment.selected{outline:2px solid rgba(255,255,255,.82);outline-offset:-2px;filter:brightness(1.18)}.record-card{grid-template-columns:minmax(0,1fr) auto}.record-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.record-actions button{background:#19263c;color:#d9e5f7;border:1px solid #30405a;border-radius:8px;padding:8px 11px}.record-actions .download-block{background:#102b2c;border-color:#275458;color:#bfeee7}.recording-player-nav{align-items:center}.recording-player-nav .primary{min-width:180px}.modal-card #recordingPlayer{aspect-ratio:16/9;object-fit:contain;max-height:72vh}
@media(max-width:900px){.clip-toolbar{grid-template-columns:1fr 1fr}.clip-actions{grid-column:1/-1;justify-content:flex-start}.timeline-controls{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:100%}.timeline-controls button{padding-left:7px;padding-right:7px}}
@media(max-width:620px){.recording-toolbar{grid-template-columns:1fr}.day-nav{grid-column:1/-1}.day-nav button{flex:1}.clip-toolbar{grid-template-columns:1fr}.clip-actions{grid-column:auto;display:grid;grid-template-columns:1fr 1fr}.timeline-controls{grid-template-columns:1fr 1fr}.timeline-controls #playSelected{grid-column:1/-1;grid-row:1}.record-card{grid-template-columns:1fr}.record-actions{justify-content:stretch}.record-actions button{flex:1}.recording-player-nav{display:grid;grid-template-columns:1fr 1fr}.recording-player-nav #playerDownload{grid-column:1/-1;grid-row:1}}

/* v0.3.8 - gestión completa de cámaras */
.admin-camera-info{min-width:0;flex:1}.admin-camera-info small{display:block;color:#627792;font-size:9px;margin-top:4px}.admin-camera-side{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.admin-camera-actions{display:flex;gap:6px;align-items:center}.danger{background:rgba(255,93,112,.08);border:1px solid rgba(255,93,112,.34);color:#ff9bab;border-radius:8px;padding:8px 11px;cursor:pointer}.danger:hover{background:rgba(255,93,112,.14)}.danger:disabled{opacity:.45;cursor:not-allowed}.admin-camera-item.editing{border-color:rgba(74,171,255,.5);background:#0b1727}@media(max-width:650px){.admin-camera-item{align-items:flex-start;flex-direction:column}.admin-camera-side{width:100%;justify-content:space-between}.admin-camera-actions{width:100%}.admin-camera-actions button{flex:1}}


/* v0.3.9 · Pantalla completa para Live */
.live-card-fullscreen{position:absolute;top:10px;right:10px;z-index:6;width:38px;height:38px;display:grid;place-items:center;border-radius:9px;background:rgba(0,0,0,.58);color:#fff;border:1px solid rgba(255,255,255,.18);font-size:19px;line-height:1;backdrop-filter:blur(4px)}
.live-card-fullscreen:hover{background:rgba(18,31,49,.9)}
.live-card-fullscreen:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#liveGrid:fullscreen,#liveGrid:-webkit-full-screen{width:100vw;height:100vh;max-width:none;padding:10px;gap:8px;background:#000;overflow:hidden}
#liveGrid:fullscreen .live-card,#liveGrid:-webkit-full-screen .live-card{min-width:0;min-height:0;height:100%;aspect-ratio:auto;border-radius:8px;box-shadow:none}
#liveGrid:fullscreen .live-card video,#liveGrid:-webkit-full-screen .live-card video{width:100%;height:100%;max-height:none!important;min-height:0!important;aspect-ratio:auto;object-fit:contain}
#liveGrid:fullscreen.layout-1,#liveGrid:-webkit-full-screen.layout-1{grid-template-columns:1fr;grid-template-rows:1fr}
#liveGrid:fullscreen.layout-2,#liveGrid:-webkit-full-screen.layout-2{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:1fr}
#liveGrid:fullscreen.layout-4,#liveGrid:-webkit-full-screen.layout-4{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
#liveGrid:fullscreen.layout-9,#liveGrid:-webkit-full-screen.layout-9{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}
#liveGrid:fullscreen.layout-main5,#liveGrid:-webkit-full-screen.layout-main5{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}
#liveGrid:fullscreen.layout-main5 .live-card-main,#liveGrid:-webkit-full-screen.layout-main5 .live-card-main{grid-column:1/3;grid-row:1/3}
.live-card:fullscreen,.live-card:-webkit-full-screen{width:100vw;height:100vh;max-width:none;aspect-ratio:auto;border:0;border-radius:0;background:#000;display:flex;align-items:center;justify-content:center}
.live-card:fullscreen video,.live-card:-webkit-full-screen video{width:100%;height:100%;max-height:none!important;aspect-ratio:auto;object-fit:contain}
.live-card:fullscreen .live-overlay,.live-card:-webkit-full-screen .live-overlay{z-index:4}
.live-card:fullscreen .live-card-fullscreen,.live-card:-webkit-full-screen .live-card-fullscreen{display:none}

/* Grabaciones v0.4.1: búsqueda exacta compacta + vista previa estilo NVR */
.recording-seek-grid{
  display:grid;
  grid-template-columns:minmax(320px,380px) minmax(520px,960px);
  gap:14px;
  margin-bottom:16px;
  align-items:start;
  justify-content:start;
}
.exact-seek-card,.recording-preview-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;min-width:0}
.exact-seek-card{padding:15px;align-self:start}
.seek-card-head strong,.recording-preview-head strong{display:block;font-size:16px;margin:3px 0}
.seek-card-head small,.recording-preview-head small{display:block;color:var(--muted);font-size:11px}
.exact-seek-form{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;align-items:end}
.exact-seek-form label{margin:0;min-width:0}
.exact-seek-form button{grid-column:1/-1}
.exact-seek-status{margin-top:11px;padding:9px 10px;border-radius:8px;background:#09111d;border:1px solid #1c2a40;color:#8da0ba;font-size:11px;min-height:37px}
.recording-preview-card{padding:0;overflow:hidden;width:100%;max-width:960px;align-self:start}
.recording-preview-head{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.recording-preview-head>div{min-width:0}
.recording-preview-head small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:680px}
.recording-preview-video-wrap{position:relative;background:#02050a;aspect-ratio:16/9;display:grid;place-items:center;max-height:540px}
.recording-preview-video-wrap video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.recording-preview-empty{position:absolute;inset:0;display:grid;place-items:center;padding:20px;text-align:center;color:#6f829e;font-size:12px;background:linear-gradient(135deg,#040812,#07101c)}
.recording-preview-actions{display:flex;gap:7px;flex-wrap:wrap;padding:10px 12px;border-top:1px solid var(--line)}
.recording-preview-actions .primary{min-width:130px}
.recording-preview-actions button:disabled,.recording-preview-head button:disabled{opacity:.42;cursor:not-allowed}
/* En pantallas amplias evitamos que el video se convierta en un panel gigantesco. */
@media(min-width:1700px){.recording-seek-grid{grid-template-columns:360px 960px}}
@media(max-width:1250px){.recording-seek-grid{grid-template-columns:minmax(300px,360px) minmax(0,1fr)}.recording-preview-card{max-width:none}}
@media(max-width:980px){.recording-seek-grid{grid-template-columns:1fr}.recording-preview-card{max-width:900px}.exact-seek-card{display:grid;grid-template-columns:minmax(200px,.75fr) minmax(0,1.25fr);gap:12px;align-items:end}.seek-card-head{align-self:center}.exact-seek-form{margin-top:0}.exact-seek-status{grid-column:1/-1;margin-top:0}}
@media(max-width:700px){.exact-seek-card{display:block}.exact-seek-form{margin-top:14px}.exact-seek-status{margin-top:11px}}
@media(max-width:620px){.exact-seek-form{grid-template-columns:1fr}.exact-seek-form button{grid-column:auto}.recording-preview-actions{display:grid;grid-template-columns:1fr 1fr}.recording-preview-actions #previewLoad{grid-column:1/-1;grid-row:1}.recording-preview-head{align-items:flex-start}.recording-preview-head button{white-space:nowrap}}


/* Grabaciones v0.4.2: selector único fecha/hora + panel NVR compacto */
.recording-query-card{
  max-width:1180px;margin:0 auto 14px;padding:14px 16px;background:var(--panel);
  border:1px solid var(--line);border-radius:14px
}
.recording-query-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:12px}
.recording-query-head strong{display:block;font-size:16px;margin:3px 0}.recording-query-head small{display:block;color:var(--muted);font-size:11px}
.recording-query-grid{display:grid;grid-template-columns:minmax(220px,1.25fr) minmax(150px,.8fr) minmax(135px,.65fr) auto auto;gap:10px;align-items:end}
.recording-query-grid label{margin:0;min-width:0}.recording-query-grid input,.recording-query-grid select{margin-top:5px}
.recording-search-button{min-height:39px;white-space:nowrap}.recording-query-grid .day-nav{align-self:end;min-height:39px}.recording-query-grid .day-nav button{min-height:39px;white-space:nowrap}
.recording-query-status{margin-top:10px;min-height:34px;display:flex;align-items:center;padding:8px 10px;border-radius:8px;background:#09111d;border:1px solid #1c2a40;color:#8da0ba;font-size:11px}
.recording-workspace{max-width:1180px;margin:0 auto 14px}.recording-preview-card{max-width:1040px;margin:0 auto;padding:0;overflow:hidden}
.recording-preview-head{padding:12px 14px;background:rgba(9,17,29,.55)}
.recording-preview-actions-top{display:flex;align-items:center;padding:9px 12px;border-top:0;border-bottom:1px solid var(--line);background:#09111d;position:relative;z-index:2}
.preview-actions-spacer{flex:1}.recording-preview-video-wrap{max-height:585px;aspect-ratio:16/9}
.timeline-panel{max-width:1180px;margin:0 auto 14px;padding:14px;background:var(--panel);border:1px solid var(--line);border-radius:14px}
.timeline-heading strong{display:block;font-size:15px;margin:3px 0}.timeline-heading small{display:block;color:var(--muted);font-size:11px}
.recording-stats,.recording-list{max-width:1180px;margin-left:auto;margin-right:auto}
.recording-stats{margin-top:2px;margin-bottom:10px}
/* Evita duplicar la hora: el momento seleccionado vive en los controles superiores. */
#selectedTime{display:none!important}
/* Los controles de reproducción siempre permanecen visibles, incluso después de cargar un clip. */
.recording-preview-actions-top button{visibility:visible!important}
@media(max-width:1080px){
  .recording-query-grid{grid-template-columns:minmax(210px,1fr) minmax(150px,.8fr) minmax(135px,.7fr) auto}.recording-search-button{grid-column:1/-1}
  .recording-query-grid .day-nav{grid-column:4}
}
@media(max-width:760px){
  .recording-query-card{padding:12px}.recording-query-grid{grid-template-columns:1fr 1fr}.recording-query-grid label:first-child{grid-column:1/-1}
  .recording-query-grid .day-nav{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.recording-search-button{grid-column:1/-1}
  .recording-preview-actions-top{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px}.recording-preview-actions-top .preview-actions-spacer{display:none}.recording-preview-actions-top #previewFullscreen,.recording-preview-actions-top #previewDownload{grid-column:auto}.recording-preview-head{align-items:flex-start}
  .timeline-panel{padding:12px}.timeline-top{gap:10px}
}
@media(max-width:520px){
  .recording-query-grid{grid-template-columns:1fr}.recording-query-grid label:first-child,.recording-query-grid .day-nav,.recording-search-button{grid-column:auto}
  .recording-preview-actions-top{grid-template-columns:1fr 1fr}.recording-preview-actions-top #previewLoad{grid-column:1/-1;grid-row:1}.recording-preview-actions-top #previewBack1,.recording-preview-actions-top #previewForward1{grid-row:2}
  .recording-preview-actions-top #previewFullscreen,.recording-preview-actions-top #previewDownload{grid-row:3}
}


/* Grabaciones v0.4.3: búsqueda fecha/hora integrada en Navegación del día */
.recording-camera-toolbar{max-width:1180px;margin:0 auto 12px;display:flex;align-items:end;gap:12px}
.recording-camera-toolbar label{margin:0;min-width:260px}
.recording-toolbar-hint{color:var(--muted);font-size:11px;padding-bottom:10px}
.recording-workspace{max-width:1180px;margin:0 auto 14px}
.recording-preview-card{width:min(960px,100%);max-width:960px;margin:0 auto;padding:0;overflow:hidden}
.recording-preview-head{padding:12px 14px;background:rgba(9,17,29,.55);border-bottom:1px solid var(--line)}
.recording-preview-video-wrap{position:relative;width:100%;aspect-ratio:16/9;max-height:none;background:#000;overflow:hidden;display:block}
.recording-preview-video-wrap video{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:fill!important;background:#000}
.recording-preview-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:9px 12px;border-top:1px solid var(--line);background:#09111d;position:relative;z-index:2}
.recording-preview-actions .preview-actions-spacer{flex:1}
.timeline-panel{max-width:1180px;margin:0 auto 14px;padding:14px;background:var(--panel);border:1px solid var(--line);border-radius:14px}
.timeline-seek-toolbar{display:grid;grid-template-columns:minmax(150px,190px) minmax(135px,170px) auto auto minmax(260px,1fr);gap:10px;align-items:end;margin:0 0 12px;padding:12px;background:#09111d;border:1px solid #1d2c43;border-radius:10px}
.timeline-seek-toolbar label{display:grid;gap:5px;margin:0;color:#aebbd0;font-size:11px;min-width:0}
.timeline-seek-toolbar input{width:100%;min-height:39px;background:#080e19;border:1px solid var(--line);border-radius:9px;color:var(--text);padding:8px 10px;color-scheme:dark}
.timeline-seek-toolbar .day-nav{align-self:end;min-height:39px}
.timeline-seek-toolbar .day-nav button{min-height:39px;white-space:nowrap}
.timeline-seek-toolbar>#seekExactDateTime{min-height:39px;white-space:nowrap}
.timeline-seek-status{min-height:39px;display:flex;align-items:center;padding:8px 10px;border-radius:8px;background:#07101a;border:1px solid #18263a;color:#8da0ba;font-size:10px;line-height:1.35}
/* Hora visible y editable sólo en los controles unificados. */
#selectedTime{display:none!important}
/* El reproductor grande usa la misma ventana 16:9 que Live. */
.modal-card #recordingPlayer{width:100%;aspect-ratio:16/9;object-fit:fill!important;max-height:72vh;background:#000}
#recordingPreview:fullscreen,#recordingPreview:-webkit-full-screen,#recordingPlayer:fullscreen,#recordingPlayer:-webkit-full-screen{width:100%;height:100%;object-fit:fill!important;background:#000}
.recording-stats,.recording-list{max-width:1180px;margin-left:auto;margin-right:auto}
@media(max-width:1050px){
  .timeline-seek-toolbar{grid-template-columns:1fr 1fr auto auto}
  .timeline-seek-status{grid-column:1/-1}
}
@media(max-width:760px){
  .recording-camera-toolbar{display:block}.recording-toolbar-hint{display:block;padding:8px 0 0}.recording-camera-toolbar label{min-width:0}
  .timeline-seek-toolbar{grid-template-columns:1fr 1fr}
  .timeline-seek-toolbar .day-nav{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}
  .timeline-seek-toolbar>#seekExactDateTime{grid-column:1/-1}
  .recording-preview-actions{display:grid;grid-template-columns:1fr 1fr}.recording-preview-actions .preview-actions-spacer{display:none}.recording-preview-actions #previewLoad{grid-column:1/-1;grid-row:1}
}
@media(max-width:520px){
  .timeline-seek-toolbar{grid-template-columns:1fr}.timeline-seek-toolbar .day-nav,.timeline-seek-toolbar>#seekExactDateTime,.timeline-seek-status{grid-column:1}
  .clip-toolbar{grid-template-columns:1fr}.clip-actions{display:grid;grid-template-columns:1fr 1fr}
}

/* Grabaciones v0.4.4: video primero, navegación única y exportación simplificada */
.recordings-v044{--recording-max:1600px}
.recordings-camera-bar{width:min(100%,var(--recording-max));margin:0 auto 14px;display:flex;align-items:end;justify-content:space-between;gap:18px;padding:12px 14px;background:#0b1320;border:1px solid var(--line);border-radius:12px}
.recordings-camera-bar>div{min-width:0}.recordings-camera-bar>div strong{display:block;font-size:17px;margin:2px 0}.recordings-camera-bar>div small{display:block;color:var(--muted);font-size:11px}.recordings-camera-bar label{display:grid;gap:5px;color:#aebbd0;font-size:11px;min-width:260px;margin:0}.recordings-camera-bar select{width:100%;background:#080e19;border:1px solid var(--line);border-radius:9px;color:var(--text);padding:9px 10px}
.recordings-v044 .recording-workspace{width:100%;max-width:none;margin:0 0 14px}
.recordings-v044 .recording-preview-card{width:min(100%,calc((100vh - 210px)*16/9));max-width:none;margin:0 auto;padding:0;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:var(--shadow)}
.recordings-v044 .recording-preview-head{padding:10px 13px;background:#0b1320;border-bottom:1px solid var(--line)}
.preview-title-line{display:flex;align-items:center;gap:9px;min-width:0}.recording-preview-title strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.recording-preview-title small{display:block;margin-top:4px;color:var(--muted);font-size:10px}
.recordings-v044 .recording-preview-video-wrap{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden;display:block}
.recordings-v044 .recording-preview-video-wrap video{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;display:block;object-fit:fill!important;background:#000}
.recordings-v044 .recording-preview-actions{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;padding:9px 11px;border-top:1px solid var(--line);background:#09111d;position:relative;z-index:2}
.recordings-v044 .recording-preview-actions .preview-actions-spacer{flex:1}.recordings-v044 .recording-preview-actions button{white-space:nowrap}.recordings-v044 .recording-preview-actions button:disabled{opacity:.42;cursor:not-allowed}
.preview-speed-label{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:10px}.preview-speed-label select{background:#080e19;border:1px solid var(--line);border-radius:8px;color:var(--text);padding:7px 8px;color-scheme:dark}
.recordings-v044 .timeline-panel,.recording-export-panel,.recording-blocks-details{width:min(100%,var(--recording-max));max-width:none;margin-left:auto;margin-right:auto}
.recordings-v044 .timeline-panel{padding:15px;margin-bottom:14px;background:var(--panel);border:1px solid var(--line);border-radius:14px}
.recording-section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:13px}.recording-section-head>div:first-child{min-width:0}.recording-section-head strong{display:block;font-size:16px;margin:3px 0}.recording-section-head small{display:block;color:var(--muted);font-size:11px}
.recording-section-head .timeline-seek-status{max-width:440px;min-height:auto;padding:7px 10px;background:#09111d;border:1px solid #1b2a40;border-radius:8px;color:#8294ae;font-size:10px;line-height:1.35}
.recording-time-controls{display:grid;grid-template-columns:minmax(155px,190px) minmax(135px,165px) auto auto auto auto;gap:8px;align-items:end;margin-bottom:14px;padding:11px;background:#09111d;border:1px solid #1c2b41;border-radius:10px}
.recording-time-controls label{display:grid;gap:5px;color:#aebbd0;font-size:10px}.recording-time-controls input{width:100%;min-height:38px;background:#080e19;border:1px solid var(--line);border-radius:8px;color:var(--text);padding:8px 9px;color-scheme:dark}.recording-time-controls button{min-height:38px;white-space:nowrap}
.recording-timeline-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}.segment-nav{display:flex;gap:7px}.recording-timeline-meta .zoom-row{margin:0}.recording-timeline-meta .zoom-switch{margin-right:0}.recordings-v044 .timeline{height:64px}.recordings-v044 .timeline-segment{top:13px;height:36px}.recordings-v044 .timeline-ticks{font-size:10px}.recordings-v044 .timeline-range{margin:7px 0 1px}.recordings-v044 .timeline-legend{align-items:center}.timeline-click-hint{margin-left:auto;color:#657892}
.recording-export-panel{margin-bottom:14px;padding:14px;background:linear-gradient(180deg,#0e1725,#0b1320);border:1px solid var(--line);border-radius:14px}.recording-export-panel .export-head{align-items:center;margin-bottom:12px}.recording-export-panel .clip-summary{text-align:right;min-width:300px}.recording-export-panel .clip-summary span,.recording-export-panel .clip-summary strong,.recording-export-panel .clip-summary small{display:block}.recording-export-panel .clip-summary strong{font-size:16px;margin:3px 0}.recording-export-panel .clip-summary small{color:var(--muted);font-size:10px}
.recording-export-controls{display:flex;align-items:end;gap:14px}.duration-choice-wrap{flex:1;min-width:0}.duration-choice-wrap>span{display:block;color:#aebbd0;font-size:10px;margin-bottom:6px}.duration-buttons{display:flex;gap:6px;flex-wrap:wrap}.duration-buttons button{background:#101b2b;color:#aebbd0;border:1px solid var(--line);border-radius:8px;padding:9px 13px}.duration-buttons button:hover{background:#17253a}.duration-buttons button.active{background:#1b3150;color:#fff;border-color:#315681;box-shadow:inset 0 0 0 1px rgba(77,146,244,.12)}.recording-download-main{min-width:180px;min-height:39px}
.recording-blocks-details{margin-bottom:18px;border:1px solid var(--line);border-radius:12px;background:#0a111c;overflow:hidden}.recording-blocks-details summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:14px;align-items:center;padding:11px 13px;color:#b9c7da;font-size:12px}.recording-blocks-details summary::-webkit-details-marker{display:none}.recording-blocks-details summary:before{content:'›';font-size:18px;transition:transform .15s ease}.recording-blocks-details[open] summary:before{transform:rotate(90deg)}.recording-blocks-details summary>span:first-of-type{margin-right:auto;font-weight:700}.recording-blocks-details #recordingStats{margin:0;color:#71849f;font-size:10px}.recording-blocks-details .recording-list{max-width:none;margin:0;padding:0 12px 12px}.recording-blocks-details .empty-state{margin:0 12px 12px}
.recordings-v044 #selectedTime{display:none!important}.recordings-v044 #recordingPreview:fullscreen,.recordings-v044 #recordingPreview:-webkit-full-screen{width:100%;height:100%;object-fit:fill!important;background:#000}
@media(max-width:1180px){.recording-time-controls{grid-template-columns:1fr 1fr repeat(2,auto)}.recording-time-controls #recordNow,.recording-time-controls #seekExactDateTime{grid-row:2}.recording-time-controls #recordNow{grid-column:1}.recording-time-controls #seekExactDateTime{grid-column:2}.recording-time-controls #recordPrevDay{grid-column:3;grid-row:2}.recording-time-controls #recordNextDay{grid-column:4;grid-row:2}.recording-section-head{align-items:flex-start}.recording-section-head .timeline-seek-status{max-width:340px}}
@media(max-width:820px){.recordings-camera-bar{align-items:stretch;flex-direction:column}.recordings-camera-bar label{min-width:0}.recordings-v044 .recording-preview-card{width:100%}.recordings-v044 .recording-preview-actions{display:grid;grid-template-columns:repeat(5,1fr)}.recordings-v044 .recording-preview-actions .preview-actions-spacer{display:none}.preview-speed-label{grid-column:1/3}.recordings-v044 .recording-preview-actions #previewDownload{grid-column:3/4}.recordings-v044 .recording-preview-actions #previewFullscreen{grid-column:4/6}.recording-section-head{display:block}.recording-section-head .timeline-seek-status{max-width:none;margin-top:8px}.recording-time-controls{grid-template-columns:1fr 1fr}.recording-time-controls #recordPrevDay,.recording-time-controls #recordNow,.recording-time-controls #seekExactDateTime,.recording-time-controls #recordNextDay{grid-row:auto;grid-column:auto}.recording-timeline-meta{align-items:flex-start;flex-direction:column}.recording-export-panel .export-head{display:block}.recording-export-panel .clip-summary{text-align:left;min-width:0;margin-top:10px}.recording-export-controls{align-items:stretch;flex-direction:column}.recording-download-main{width:100%}}
@media(max-width:560px){.content{padding-left:14px;padding-right:14px}.recordings-v044 .recording-preview-actions{grid-template-columns:1fr 1fr}.recordings-v044 .recording-preview-actions #previewLoad{grid-column:1/-1;grid-row:1}.recordings-v044 .recording-preview-actions #previewBack1,.recordings-v044 .recording-preview-actions #previewBack10s,.recordings-v044 .recording-preview-actions #previewForward10s,.recordings-v044 .recording-preview-actions #previewForward1{grid-column:auto}.preview-speed-label{grid-column:1/-1;justify-content:center}.recordings-v044 .recording-preview-actions #previewDownload,.recordings-v044 .recording-preview-actions #previewFullscreen{grid-column:auto}.recording-time-controls{grid-template-columns:1fr}.recording-time-controls>*{grid-column:1!important}.segment-nav{width:100%}.segment-nav button{flex:1}.recording-timeline-meta .zoom-row{width:100%;flex-wrap:wrap}.timeline-click-hint{display:none}.duration-buttons{display:grid;grid-template-columns:repeat(2,1fr)}.duration-buttons button:last-child{grid-column:1/-1}.recording-blocks-details summary{align-items:flex-start;flex-wrap:wrap}}

/* ================================================================
   Grabaciones v0.5.0 — diseño tipo NVR comercial
   Cámara → Video → Timeline → Exportar
   ================================================================ */
.recordings-v050{--rec-panel:#0a121e;--rec-panel-2:#0d1725;--rec-soft:#111d2d;--rec-line:#213148;--rec-max:1780px}
.recordings-v050 .hidden{display:none!important}
.rec-page-head{max-width:var(--rec-max);margin:0 auto 12px;display:flex;align-items:flex-end;justify-content:space-between;gap:18px}
.rec-page-head h3{margin:2px 0 3px;font-size:22px}.rec-page-head p{margin:0;color:var(--muted);font-size:12px}.rec-page-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.rec-header-status{color:#91a3bd;font-size:11px}
.rec-commercial-grid{max-width:var(--rec-max);margin:0 auto 12px;display:grid;grid-template-columns:210px minmax(0,1fr) 300px;gap:12px;align-items:start}
.rec-camera-rail,.rec-tools-rail>section,.recordings-v050 .recording-preview-card,.recordings-v050 .timeline-panel,.recordings-v050 .recording-blocks-details{border:1px solid var(--rec-line);background:var(--rec-panel);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.rec-camera-rail{min-height:100%;padding:11px;position:sticky;top:12px}.rec-panel-title{display:grid;gap:3px;margin-bottom:10px}.rec-panel-title strong{font-size:13px}.rec-panel-title small{color:var(--muted);font-size:10px;line-height:1.4}.rec-panel-title-row{display:flex;justify-content:space-between;align-items:center}.rec-mini-actions{display:flex;gap:5px}.rec-mini-actions .icon-btn{width:30px;height:30px;font-size:18px}
.rec-camera-list{display:grid;gap:6px}.rec-camera-item{width:100%;display:grid;grid-template-columns:8px minmax(0,1fr) auto;align-items:center;gap:8px;text-align:left;border:1px solid transparent;background:transparent;color:var(--text);border-radius:9px;padding:9px 8px;cursor:pointer}.rec-camera-item:hover{background:#101b2b;border-color:#1f3047}.rec-camera-item.active{background:#132238;border-color:#31547d}.rec-camera-dot{width:7px;height:7px;border-radius:50%;background:#53657c;box-shadow:0 0 0 3px rgba(83,101,124,.08)}.rec-camera-dot.good{background:#3fd28c;box-shadow:0 0 0 3px rgba(63,210,140,.10)}.rec-camera-copy{min-width:0;display:grid;gap:2px}.rec-camera-copy strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rec-camera-copy small{font-size:9px;color:#7387a3}.rec-camera-chevron{color:#5d7290;font-size:18px}.rec-rail-empty{padding:18px 8px;text-align:center;color:var(--muted);font-size:11px}
.rec-video-stage{min-width:0}.recordings-v050 .recording-workspace{width:100%;max-width:none;margin:0}.recordings-v050 .recording-preview-card{width:100%;max-width:none;margin:0;padding:0;overflow:hidden;background:#05080d}.recordings-v050 .recording-preview-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 11px;background:#0a1320;border-bottom:1px solid var(--rec-line)}.recordings-v050 .recording-preview-title{min-width:0}.recordings-v050 .preview-title-line{display:flex;align-items:center;gap:8px;min-width:0}.recordings-v050 .preview-title-line strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.recordings-v050 .recording-preview-title small{display:block;margin-top:3px;font-size:9px;color:#71839c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rec-playback-state{flex:0 0 auto;color:#8da1bd;font-size:9px;padding:5px 7px;border:1px solid #23344d;border-radius:999px;background:#0b1522}
.recordings-v050 .recording-preview-video-wrap{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden}.recordings-v050 .recording-preview-video-wrap video{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;display:block;object-fit:fill!important;background:#000}.recordings-v050 .recording-preview-empty{position:absolute;inset:0;display:grid;place-items:center;color:#60738f;font-size:12px;background:radial-gradient(circle at center,#0c1521 0,#030507 72%)}
.recordings-v050 .recording-preview-actions{display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding:8px 9px;border-top:1px solid var(--rec-line);background:#08111c}.recordings-v050 .recording-preview-actions button{white-space:nowrap;padding:7px 9px;font-size:10px}.recordings-v050 .recording-preview-actions button:disabled{opacity:.38;cursor:not-allowed}.recordings-v050 .recording-preview-actions .preview-actions-spacer{flex:1}.recordings-v050 .rec-play-button{min-width:96px}.recordings-v050 .preview-speed-label{display:flex;align-items:center;gap:5px;color:#778aa5;font-size:9px}.recordings-v050 .preview-speed-label select{background:#07101a;border:1px solid var(--rec-line);border-radius:7px;color:var(--text);padding:6px 7px;color-scheme:dark}
.rec-empty-stage{min-height:390px;border:1px dashed #263951;border-radius:12px;background:linear-gradient(145deg,#08101a,#050a11);display:grid;place-content:center;text-align:center;gap:5px;color:#7285a0}.rec-empty-stage strong{font-size:14px;color:#aab8ca}.rec-empty-stage span{font-size:10px}
.rec-tools-rail{display:grid;gap:10px;position:sticky;top:12px}.rec-calendar-card,.recordings-v050 .recording-export-panel{padding:11px;background:var(--rec-panel)}
.rec-weekdays,.rec-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}.rec-weekdays{margin-bottom:4px;color:#5f728e;font-size:8px;text-align:center}.rec-weekdays span{padding:2px 0}.rec-calendar-grid{min-height:150px}.rec-calendar-empty{min-height:29px}.rec-calendar-day{min-width:0;min-height:29px;padding:0;border:1px solid transparent;border-radius:6px;background:transparent;color:#536984;font-size:10px;cursor:default}.rec-calendar-day:disabled{opacity:.34}.rec-calendar-day.has-video{color:#c5d3e5;background:#101b2a;border-color:#1b2b40;cursor:pointer;position:relative}.rec-calendar-day.has-video:after{content:'';position:absolute;left:50%;bottom:3px;width:3px;height:3px;margin-left:-1.5px;border-radius:50%;background:#4d92f4}.rec-calendar-day.has-video:hover{background:#17263a}.rec-calendar-day.selected{background:#24446a!important;border-color:#4b7eb8!important;color:#fff;font-weight:700}.rec-calendar-day.selected:after{background:#7ab4ff}
.rec-day-nav{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:5px;margin-top:8px}.rec-day-nav span{text-align:center;color:#9eb0c8;font-size:9px;text-transform:capitalize}.rec-day-nav button{padding:6px 8px;font-size:9px}.rec-time-jump{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:end;margin-top:9px;padding-top:9px;border-top:1px solid #17273a}.rec-time-jump label{display:grid;gap:4px;color:#71849f;font-size:9px}.rec-time-jump input{width:100%;min-height:34px;background:#07101a;border:1px solid var(--rec-line);border-radius:7px;color:var(--text);padding:6px 8px;color-scheme:dark}.rec-time-jump button{min-height:34px}.recordings-v050 .timeline-seek-status{margin-top:7px;min-height:auto;padding:7px 8px;border-radius:7px;background:#07101a;border:1px solid #17273a;color:#7488a5;font-size:9px;line-height:1.35}
.recordings-v050 .recording-export-panel{margin:0;width:auto;max-width:none}.rec-export-markers{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0}.rec-export-markers>div{padding:8px;border:1px solid #1a2a3f;border-radius:8px;background:#08111c;min-width:0}.rec-export-markers span{display:block;color:#687c98;font-size:8px;text-transform:uppercase;letter-spacing:.05em}.rec-export-markers strong{display:block;margin-top:3px;color:#d6e0ed;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rec-export-buttons{display:grid;grid-template-columns:1fr 1fr;gap:6px}.rec-export-buttons button{font-size:9px;padding:7px 5px}.rec-export-quick{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:9px;padding-top:8px;border-top:1px solid #17273a}.rec-export-quick>span{grid-column:1/-1;color:#677b97;font-size:8px;text-transform:uppercase}.rec-export-quick button{font-size:9px}.rec-export-summary{margin:9px 0;padding:8px;background:#07101a;border:1px solid #18283c;border-radius:8px}.rec-export-summary span{display:block;color:#dce6f3;font-size:11px;font-weight:700}.rec-export-summary small{display:block;margin-top:3px;color:#71849e;font-size:9px;line-height:1.35}.recordings-v050 .recording-download-main{width:100%;min-height:36px;font-size:10px}
.recordings-v050 .timeline-panel{max-width:var(--rec-max);width:100%;margin:0 auto 10px;padding:12px 14px;background:#09121e}.rec-timeline-topline{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:9px}.rec-timeline-topline>div:first-child{display:grid;gap:2px}.rec-timeline-topline strong{font-size:12px;text-transform:capitalize}.recordings-v050 .zoom-row{margin:0;display:flex;align-items:center;gap:7px}.recordings-v050 .zoom-row>span{font-size:9px;color:#72849e}.recordings-v050 .timeline{height:74px;border-radius:8px;background:#050a11;border:1px solid #1b2c42;overflow:hidden;position:relative}.recordings-v050 .timeline:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(4.1667% - 1px),rgba(255,255,255,.035) calc(4.1667% - 1px),rgba(255,255,255,.035) 4.1667%);pointer-events:none}.recordings-v050 .timeline-segment{top:18px;height:38px;border-radius:3px;background:linear-gradient(180deg,#2d7d63,#205b4a);box-shadow:inset 0 0 0 1px rgba(98,225,172,.18)}.recordings-v050 .timeline-segment.selected{background:linear-gradient(180deg,#3e9e79,#2f795f);box-shadow:0 0 0 1px rgba(109,235,182,.35)}.recordings-v050 .timeline-selection{position:absolute;top:12px;height:50px;border:1px solid #e2a94f;background:rgba(226,169,79,.18);z-index:3;pointer-events:none;border-radius:4px}.recordings-v050 .timeline-cursor{z-index:5}.recordings-v050 .timeline-cursor:before{background:#f0c15a}.recordings-v050 .timeline-cursor span{background:#f0c15a;color:#201605}.recordings-v050 .timeline-ticks{font-size:9px;color:#657994;padding:0 2px}.recordings-v050 .timeline-range{margin:6px 0 0}.recordings-v050 .timeline-legend{margin-top:5px;display:flex;align-items:center;gap:13px;color:#647892;font-size:8px;flex-wrap:wrap}.recordings-v050 .timeline-click-hint{margin-left:auto}.legend-selection{display:inline-block;width:12px;height:6px;border-radius:2px;background:rgba(226,169,79,.28);border:1px solid #c6923f;margin-right:4px}
.recordings-v050 .recording-blocks-details{max-width:var(--rec-max);width:100%;margin:0 auto 18px;background:#08111b;overflow:hidden}.recordings-v050 .recording-blocks-details summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:9px 11px;color:#8ea0b9;font-size:10px}.recordings-v050 .recording-blocks-details summary::-webkit-details-marker{display:none}.recordings-v050 .recording-blocks-details summary:before{content:'›';font-size:15px;transition:transform .15s ease}.recordings-v050 .recording-blocks-details[open] summary:before{transform:rotate(90deg)}.recordings-v050 .recording-blocks-details summary span:first-of-type{font-weight:700;color:#a9b8ca}.recordings-v050 .recording-blocks-details #recordingStats{margin-left:auto;color:#657a95}.recordings-v050 .recording-list{max-width:none;margin:0;padding:0 10px 10px}
.recordings-v050 #selectedTime{display:none!important}.recordings-v050 #recordingPreviewFrame:fullscreen,.recordings-v050 #recordingPreviewFrame:-webkit-full-screen{width:100%;height:100%;background:#000;display:grid;place-items:center}.recordings-v050 #recordingPreviewFrame:fullscreen video,.recordings-v050 #recordingPreviewFrame:-webkit-full-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:fill!important}

@media(max-width:1380px){.rec-commercial-grid{grid-template-columns:180px minmax(0,1fr) 270px}.recordings-v050 .recording-preview-actions button{padding:6px 7px;font-size:9px}.rec-calendar-grid{min-height:135px}.rec-calendar-day{min-height:26px}}
@media(max-width:1120px){.rec-commercial-grid{grid-template-columns:180px minmax(0,1fr)}.rec-tools-rail{grid-column:1/-1;display:grid;grid-template-columns:minmax(280px,.8fr) minmax(320px,1.2fr);position:static}.rec-camera-rail{position:static}.rec-calendar-grid{min-height:auto}.rec-export-markers{grid-template-columns:1fr 1fr}}
@media(max-width:820px){.rec-page-head{align-items:flex-start;flex-direction:column}.rec-page-actions{width:100%;justify-content:space-between}.rec-commercial-grid{grid-template-columns:1fr}.rec-camera-rail{min-height:auto}.rec-camera-list{grid-template-columns:repeat(2,minmax(0,1fr))}.rec-video-stage{grid-row:2}.rec-tools-rail{grid-column:auto;grid-template-columns:1fr}.recordings-v050 .recording-preview-actions{display:grid;grid-template-columns:repeat(4,1fr)}.recordings-v050 .recording-preview-actions .preview-actions-spacer{display:none}.recordings-v050 .preview-speed-label{grid-column:1/3;justify-content:center}.recordings-v050 #previewFullscreen{grid-column:3/5}.rec-timeline-topline{align-items:flex-start;flex-direction:column}.recordings-v050 .zoom-row{width:100%;flex-wrap:wrap}.recordings-v050 .timeline-click-hint{display:none}}
@media(max-width:560px){.content{padding-left:12px;padding-right:12px}.rec-camera-list{grid-template-columns:1fr}.recordings-v050 .recording-preview-actions{grid-template-columns:1fr 1fr}.recordings-v050 #prevRecording,.recordings-v050 #nextRecording{grid-row:1}.recordings-v050 #previewLoad{grid-column:1/-1;grid-row:2}.recordings-v050 .preview-speed-label{grid-column:1/-1}.recordings-v050 #previewFullscreen{grid-column:1/-1}.rec-export-markers,.rec-export-buttons{grid-template-columns:1fr}.recordings-v050 .timeline{height:62px}.recordings-v050 .timeline-segment{top:15px;height:32px}.recordings-v050 .timeline-selection{top:10px;height:42px}.recordings-v050 .timeline-legend span:nth-child(2){display:none}}


/* Usuarios v0.5.4 */
.user-admin-grid{display:grid;grid-template-columns:minmax(340px,.85fr) minmax(460px,1.15fr);gap:18px;align-items:start}.user-create-card,.user-list-card{min-width:0}.user-form-grid{grid-template-columns:1fr 1fr}.user-permissions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 4px;padding:12px;border:1px solid var(--border);border-radius:12px;background:#09111d}.user-permissions label{display:flex;gap:9px;align-items:flex-start;padding:10px;border:1px solid #1b2a3d;border-radius:9px;background:#0b1522;cursor:pointer}.user-permissions input{width:auto;margin-top:3px}.user-permissions span{display:grid;gap:3px}.user-permissions strong{font-size:12px}.user-permissions small{color:var(--muted);font-size:10px;line-height:1.35}.admin-user-list{display:grid;gap:8px}.admin-user-item{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:11px;align-items:center;padding:11px 12px;border:1px solid var(--border);border-radius:11px;background:#09121e}.admin-user-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#13233a;border:1px solid #294568;color:#b9d7ff;font-weight:800;font-size:14px}.admin-user-info{min-width:0;display:grid;gap:4px}.admin-user-name{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.admin-user-name strong{font-size:13px}.admin-user-info>span{color:var(--muted);font-size:10px}.admin-user-perms{display:flex;gap:5px;flex-wrap:wrap}.admin-user-perms span{padding:3px 6px;border:1px solid #22354e;border-radius:999px;background:#0d1928;color:#8195b1;font-size:8px;text-transform:uppercase;letter-spacing:.03em}.admin-user-actions{display:flex;align-items:center}.admin-user-actions button:disabled{opacity:.35;cursor:not-allowed}
@media(max-width:980px){.user-admin-grid{grid-template-columns:1fr}.user-form-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.user-form-grid,.user-permissions{grid-template-columns:1fr}.admin-user-item{grid-template-columns:34px minmax(0,1fr)}.admin-user-actions{grid-column:2}.admin-user-actions button{width:100%}}