:root {
/* === Brand (Palette B — +20% luminance, 2026-05-26) === */
--deep: #0A4259; /* prev #032838 */
--primary: #11577B; /* prev #043448 */
--secondary: #5C8A9E; /* prev #365C6C */
--mid: #555555;
--light: #C1C1C1;
--white: #FFFFFF;
--black: #000000;
--border: rgba(92,138,158,0.35); /* secondary @ 35% */
--gradient: linear-gradient(135deg,var(--primary),var(--secondary));
/* === Grays (DS-1+DS-2 2026-05-19 — var(--gray-500) ya migrado a --gray-500 en DS-2) === */
--gray-50: #F8FAFC;
--gray-100: #F1F5F9;
--gray-200: #E0E0E0;
--gray-300: #CBD5E1;
--gray-400: #94A3B8;
--gray-500: #7A9BAA; /* gris-azulado canónico del proyecto */
--gray-600: #475569;
--gray-700: #334155;
--gray-800: #1E293B;
--gray-900: #0F172A;
/* === Status colors (existentes ampliados con variantes light/bright) === */
--red: #DC2626; /* alias --status-err */
--red-light: #EF4444;
--red-bright: #F87171;
--green: #16A34A; /* alias --status-ok */
--green-light: #22C55E;
--green-bright: #4ADE80;
--amber: #F59E0B;
--amber-light: #EAB308; /* alias --status-warn */
--blue: #3B82F6;
--blue-light: #60A5FA;
--emerald: #10B981;
/* === Status semantic aliases (existentes) === */
--status-ok: #16a34a;
--status-warn: #eab308;
--status-err: #dc2626;
/* === Spacing (DS-1 — escala base 4px) === */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
/* === Typography (DS-1 — consolida 13 font-sizes hard-coded a 9 tokens) === */
--text-xs: 11px; /* badges, captions */
--text-sm: 12px; /* secondary */
--text-base: 14px; /* body */
--text-md: 15px; /* emphasized body */
--text-lg: 16px; /* H4, controls */
--text-xl: 18px; /* H3 */
--text-2xl: 22px; /* H2 */
--text-3xl: 28px; /* H1 */
--text-4xl: 48px; /* hero */
/* === Border radius (DS-1 — consolida 13 valores a 6 tokens) === */
--radius-sm: 4px; /* badges, small chips */
--radius-md: 8px; /* inputs, buttons */
--radius-lg: 12px; /* cards */
--radius-xl: 20px; /* modals */
--radius-pill: 999px; /* pills */
--radius-full: 50%; /* avatars, circle icons */
/* === Shadow (DS-1) === */
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 4px 6px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 15px rgba(0,0,0,0.15);
/* === Transitions (DS-1) === */
--duration-fast: 150ms;
--duration-base: 250ms;
--duration-slow: 400ms;
--ease: cubic-bezier(0.4, 0, 0.2, 1);
}
/* Global text size boost */
html,body { font-size: 15px; }
.nav-item { font-size: 14px !important; }
.nav-label { font-size: 12px !important; }
.an-kpi .lbl { font-size: 13px !important; }
.an-table { font-size: 14px !important; }
.an-table th { font-size: 12px !important; }
.an-section-title { font-size: 14px !important; }
.an-bar-pct { font-size: 13px !important; }
.an-empty, .an-loading, .an-error { font-size: 14px !important; }
.cam-row-name { font-size: 15px !important; }
.cam-row-sub { font-size: 13px !important; }
.settings-title { font-size: 18px !important; }
.btn-del-cam { font-size: 13px !important; }
*{margin:0;padding:0;box-sizing:border-box;}
/* Audit 2026-05-19 §4: "Helvetica Now Display" no tiene @font-face
que la cargue, caía silenciosamente al fallback. Removida para
dejar explícito que usamos Helvetica Neue del sistema. */
html,body{height:100vh;width:100vw;overflow:hidden;background:var(--deep);color:var(--white);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;}
#app{display:flex;height:100vh;width:100vw;}
/* SIDEBAR */
#sidebar{width:240px;background:var(--primary);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:24px 0;overflow-y:auto;flex-shrink:0;}
.logo-wrap{padding:0 20px 24px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border);margin-bottom:20px;}
.logo-icon{width:36px;height:36px;background:var(--gradient);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.logo-icon svg{width:20px;height:20px;fill:var(--white);}
.logo-name{font-family:"Red Rose",serif;font-weight:700;font-size:18px;letter-spacing:.06em;text-transform:uppercase;color:var(--white);}
.logo-sub{font-size: 12px;color:var(--light);letter-spacing:.12em;text-transform:uppercase;margin-top:1px;}
.nav-label{padding:0 20px 6px;font-size: 11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-500);}
.nav{flex:1;display:flex;flex-direction:column;gap:4px;padding:0 12px;}
.nav-item{padding:10px 14px;border-radius:6px;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:12px;font-size:13px;font-weight:500;color:var(--light);border:none;background:none;text-align:left;width:100%;}
.nav-item:hover{background:rgba(92,138,158,.3);color:var(--white);}
.nav-item.active{background:var(--gradient);color:var(--white);}
.nav-item svg{width:18px;height:18px;flex-shrink:0;fill:currentColor;opacity:.85;}
.nav-item.active svg{opacity:1;}
.nav-footer{padding:12px 12px 0;margin-top:16px;border-top:1px solid var(--border);}
/* MAIN */
#main{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--deep);}
/* TOPBAR */
#topbar{height:60px;background:var(--primary);border-bottom:1px solid var(--border);padding:0 24px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.top-title{font-family:"Red Rose",serif;font-weight:700;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--white);}
.top-controls{display:flex;align-items:center;gap:12px;}
.grid-sel{display:flex;gap:4px;background:rgba(2,13,21,.5);padding:4px;border-radius:6px;border:1px solid var(--border);}
.grid-btn{padding:5px 10px;border:none;background:transparent;color:var(--light);border-radius:4px;cursor:pointer;font-size:11px;font-weight:600;letter-spacing:.04em;transition:all .15s;}
.grid-btn:hover{color:var(--white);background:rgba(92,138,158,.3);}
.grid-btn.active{background:var(--gradient);color:var(--white);}
.top-btn{background:none;border:1px solid var(--border);color:var(--light);cursor:pointer;font-size:13px;padding:7px 12px;border-radius:6px;transition:all .15s;display:flex;align-items:center;gap:6px;}
.top-btn:hover{background:rgba(92,138,158,.3);color:var(--white);border-color:var(--gray-500);}
.badge{background:var(--red);color:white;font-size: 11px;font-weight:700;padding:2px 5px;border-radius:8px;}
/* STATUS BAR */
#statusbar{height:32px;background:rgba(17,87,123,.6);border-bottom:1px solid var(--border);padding:0 24px;display:flex;align-items:center;gap:24px;font-size: 12px;color:var(--light);flex-shrink:0;}
.dot{width:6px;height:6px;border-radius:50%;display:inline-block;margin-right:5px;}
.dot.on{background:var(--green);}
.dot.off{background:var(--mid);}
.dot.al{background:var(--red);}
/* CONTENT */
#content{flex:1;overflow-y:auto;overflow-x:hidden;padding:20px;}
/* GRID */
.cam-grid{display:grid;gap:12px;align-items:start;}
.g-4x2{grid-template-columns:repeat(4,1fr);}
.g-3x3{grid-template-columns:repeat(3,1fr);}
.g-2x4{grid-template-columns:repeat(2,1fr);}
.g-1x1{grid-template-columns:1fr;}
@media(max-width:1600px){.cam-grid{grid-template-columns:repeat(3,1fr)!important;}}
@media(max-width:1200px){.cam-grid{grid-template-columns:repeat(2,1fr)!important;}}
@media(max-width:768px){.cam-grid{grid-template-columns:1fr!important;}}
@media(max-width:1200px){#healthKpis{grid-template-columns:repeat(3,1fr)!important;}}
@media(max-width:768px){#healthKpis{grid-template-columns:repeat(2,1fr)!important;}}
/* MODAL */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(2,13,21,.8);z-index:100;align-items:center;justify-content:center;}
.modal-bg.open{display:flex;}
.modal{background:var(--primary);border:1px solid var(--border);border-radius:12px;padding:28px;width:560px;max-width:90vw;max-height:calc(100vh - 80px);overflow-y:auto;}
.modal h2{font-family:"Red Rose",serif;font-weight:700;font-size:18px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:20px;}
.modal-field{margin-bottom:14px;}
.modal-field label{display:block;font-size: 12px;letter-spacing:.08em;text-transform:uppercase;color:var(--light);margin-bottom:6px;}
.modal-field input{width:100%;background:rgba(2,13,21,.6);border:1px solid var(--border);border-radius:6px;padding:9px 12px;color:var(--white);font-size:13px;outline:none;}
.modal-field input:focus{border-color:var(--gray-500);}
.modal-row{display:flex;gap:12px;}
.modal-row .modal-field{flex:1;}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;}
.det-master-row{display:flex;flex-direction:column;gap:var(--space-1);padding-bottom:var(--space-3);border-bottom:1px solid var(--border);margin-bottom:var(--space-3);}
.det-master-toggle{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-base);font-weight:600;color:var(--white);cursor:pointer;}
.det-master-toggle input{accent-color:var(--secondary);cursor:pointer;width:18px;height:18px;}
.det-master-row small{color:var(--gray-500);font-size:var(--text-sm);}
.det-model-block{background:rgba(2,13,21,.4);border:1px solid var(--border);border-radius:6px;overflow:hidden;}
.det-model-header{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;cursor:pointer;-webkit-user-select:none; user-select:none;}
.det-model-header:hover{background:rgba(92,138,158,.2);}
.det-model-title{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--white);}
.det-model-actions{display:flex;gap:6px;}
.det-model-link{font-size: 12px;color:var(--gray-500);background:none;border:none;cursor:pointer;padding:0;text-decoration:underline;}
.det-model-link:hover{color:var(--light);}
.det-classes-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px 4px;padding:5px 10px 6px;border-top:1px solid var(--border);}
.det-class-label{display:flex;align-items:center;gap:5px;font-size: 12px;color:var(--light);cursor:pointer;padding:2px 0;}
.det-class-label input{accent-color:var(--secondary);cursor:pointer;flex-shrink:0;}
.det-subgroup-header{display:flex;align-items:center;justify-content:space-between;padding:4px 10px;font-size: 11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-500);cursor:pointer;-webkit-user-select:none; user-select:none;border-top:1px solid rgba(92,138,158,.3);margin-top:2px;}
.det-subgroup-header:hover{color:var(--light);}
.det-subgroup-arrow{font-size: 12px;transition:transform .15s;}
.det-model-chevron{font-size: 12px;color:var(--gray-500);cursor:pointer;margin-left:auto;padding:0 4px;}
.btn-cancel{padding:8px 18px;border-radius:6px;border:1px solid var(--border);background:none;color:var(--light);font-size:13px;cursor:pointer;}
.btn-save{padding:8px 18px;border-radius:6px;border:none;background:var(--gradient);color:var(--white);font-size:13px;font-weight:600;cursor:pointer;}
.btn-add-cam{padding:7px 14px;border-radius:6px;border:1px solid var(--border);background:rgba(92,138,158,.2);color:var(--white);font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;letter-spacing:.04em;}
.btn-add-cam:hover{background:var(--secondary);}
.btn-add-cam svg{width:14px;height:14px;fill:currentColor;}
.cam-card{position:relative;}
@keyframes spin{to{transform:rotate(360deg)}}
/* FULLSCREEN CAMERA */
#camFullscreen{display:none;position:fixed;inset:0;background:#000;z-index:200;flex-direction:column;}
#camFullscreen.open{display:flex;}
#fsHeader{display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:60px;background:var(--primary);border-bottom:1px solid var(--border);flex-shrink:0;}
#fsTitle{font-family:"Red Rose",serif;font-weight:700;font-size:18px;letter-spacing:.08em;text-transform:uppercase;color:var(--white);}
#fsStatus{font-size: 12px;color:var(--gray-500);margin-top:2px;}
#fsBody{flex:1;position:relative;background:#000;overflow:hidden;}
#fsVideo{width:100%;height:100%;object-fit:contain;display:none;}
#fsPlaceholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--gray-500);}
#fsPlaceholder svg{width:64px;height:64px;fill:currentColor;opacity:.3;}
#fsPlaceholder p{font-size:13px;opacity:.6;}
#fsPlaceholder small{font-size: 12px;opacity:.4;font-family:monospace;}
/* Smooth fullscreen entry (2026-05-19): fade-in del stream HD y
fade-out del poster intermedio en lugar de un corte abrupto.
Cuando el pre-warm WebRTC está listo, el video llega en <300ms
y la transición de 280ms hace que sea perceptiblemente suave
sin retraso real. */
#fsVideoMse, #fsSnapshot, #fsMjpeg { transition: opacity 280ms ease; }
@media (prefers-reduced-motion: reduce) {
#fsVideoMse, #fsSnapshot, #fsMjpeg { transition: none; }
}
#fsClose{width:36px;height:36px;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--gray-500);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--duration-fast) var(--ease);}
#fsClose:hover{background:var(--secondary);color:var(--white);}
#fsClose:focus-visible{outline:2px solid var(--secondary);outline-offset:2px;}
#fsClose svg{width:18px;height:18px;fill:currentColor;}
/* ── Recording Playback tab bar ───────────────────────────────── */
#fsTabs{display:flex;align-items:center;gap:4px;padding:8px 20px;background:var(--primary);border-bottom:1px solid var(--border);}
.fs-tab{padding:6px 16px;border-radius:6px;border:1px solid transparent;font-size:13px;font-weight:600;cursor:pointer;color:var(--gray-500);background:none;transition:all var(--duration-fast) var(--ease);}
.fs-tab.active{background:rgba(92,138,158,.35);border-color:var(--border);color:var(--white);}
.fs-tab:hover:not(.active){color:var(--light);}
/* ── Recording panel ──────────────────────────────────────────── */
#fsRecPanel{display:none;position:absolute;inset:0;background:#0b1e28;overflow-y:auto;color:var(--gray-200);padding:20px;box-sizing:border-box;z-index:5;}
#fsRecPanel.visible{display:flex;flex-direction:column;gap:16px;}
#fsRecDateRow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
#fsRecDateInput{background:rgba(17,87,123,.7);border:1px solid var(--border);color:var(--gray-200);padding:5px 10px;border-radius:5px;font-size:13px;}
#fsRecDateInput:focus{outline:none;border-color:var(--gray-500);}
#fsRecStatus{font-size:12px;color:var(--gray-500);}
#fsRecTimeline{width:100%;height:52px;border-radius:6px;overflow:hidden;cursor:pointer;background:#182d38;}
#fsRecSegList{display:flex;flex-direction:column;gap:8px;margin-top:4px;}
.rec-seg-row{display:flex;align-items:center;gap:12px;padding:8px 12px;background:rgba(17,87,123,.5);border:1px solid var(--border);border-radius:6px;cursor:pointer;transition:background .15s;font-size:12px;}
.rec-seg-row:hover{background:rgba(92,138,158,.5);}
.rec-seg-time{color:var(--gray-200);font-family:monospace;}
.rec-seg-dur{color:var(--gray-500);margin-left:auto;}
#fsRecMsg{text-align:center;padding:32px;color:var(--gray-500);font-size:13px;}
#fsRecTicketMsg{padding:12px;background:rgba(17,87,123,.6);border:1px solid var(--secondary);border-radius:6px;color:var(--gray-500);font-size:12px;line-height:1.5;}
.cam-card{cursor:pointer;}
/* SETTINGS PAGE */
#pageSettings{display:none;height:100%;flex-direction:column;overflow:hidden;}
#pageSettings.active{display:flex;}
#settingsPanelGeneral{flex:1;overflow-y:auto;padding:24px;}
#settingsPanelRecorders{flex:1;overflow-y:auto;padding:20px 24px;display:none;}
#settingsPanelAccount{flex:1;overflow-y:auto;padding:24px;display:none;}
.settings-section{margin-bottom:32px;}
.settings-title{font-family:"Red Rose",serif;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-500);margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid var(--border);}
.cam-row{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:rgba(17,87,123,.3);border:1px solid var(--border);border-radius:8px;margin-bottom:8px;}
.cam-row-info{display:flex;flex-direction:column;gap:3px;}
.cam-row-name{font-size:13px;font-weight:600;color:var(--white);}
.cam-row-sub{font-size: 12px;color:var(--gray-500);}
.cam-row-right{display:flex;align-items:center;gap:8px;}
.dot-sm{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.dot-sm.on{background:var(--green);}
.dot-sm.off{background:#64748b;}
.btn-del-cam{padding:6px 12px;border-radius:5px;border:1px solid rgba(220,38,38,.4);background:rgba(220,38,38,.1);color:var(--red-bright);font-size:11px;font-weight:600;cursor:pointer;letter-spacing:.04em;}
.btn-del-cam:hover{background:rgba(220,38,38,.3);}
.no-cams-msg{padding:24px;text-align:center;color:var(--gray-500);font-size:13px;}
/* Auth confirm modal */
.modal-sm{background:var(--primary);border:1px solid var(--border);border-radius:12px;padding:24px;width:340px;max-width:90vw;}
.modal-sm h2{font-family:"Red Rose",serif;font-size:14px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px;}
.modal-sm p{font-size:12px;color:var(--light);margin-bottom:16px;}
/* CARD */
.cam-card{background:var(--primary);border:1px solid var(--border);border-radius:8px;overflow:hidden;transition:all .2s;display:flex;flex-direction:column;cursor:pointer;position:relative;}
.cam-card[draggable="true"]{cursor:grab;}
.cam-card[draggable="true"]:active{cursor:grabbing;}
.cam-card.dragging{opacity:.35;transform:scale(.96);}
.cam-card.drag-over{border-color:var(--blue-light) !important;box-shadow:0 0 12px rgba(96,165,250,.4) !important;}
.cam-card:hover{border-color:var(--gray-500);box-shadow:0 4px 16px rgba(17,87,123,.6);}
.cam-card.alert{border-color:var(--red);animation:pulse-red 2s ease-in-out infinite;}
.cam-preview{aspect-ratio:var(--cam-ar,16/9);background:linear-gradient(135deg,var(--deep),var(--primary));overflow:hidden;position:relative;}
.cam-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
/* ── Grid tile geometry lock ─ el grid manda la box, nunca el stream.
Cubre img + video + placeholder; !important blinda contra style.cssText
dinámico que pueda quedar inconsistente al reutilizar cards.
Always cover: card aspect-ratio = image ratio so no cropping occurs. */
.cam-preview > img,
.cam-preview > video,
.cam-preview > .cam-offline-placeholder{
position:absolute !important;inset:0 !important;
width:100% !important;height:100% !important;
object-fit:cover !important;display:block !important;
}
/* Row del grid estable — el footer no puede encoger/estirar. */
.cam-card{min-height:0;}
.cam-foot{height:36px;min-height:36px;max-height:36px;overflow:hidden;flex-shrink:0;}
.cam-overlay{position:absolute;top:0;left:0;right:0;padding:8px;display:flex;justify-content:space-between;align-items:flex-start;background:linear-gradient(to bottom,rgba(2,13,21,.8),transparent);}
.cam-lbl{font-family:"Red Rose",serif;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--white);}
.cam-st{display:flex;align-items:center;gap:5px;background:rgba(2,13,21,.75);padding:3px 8px;border-radius:4px;font-size: 11px;font-weight:600;letter-spacing:.04em;color:var(--white);}
.cam-foot{padding:6px 10px;background:rgba(2,13,21,.5);border-top:1px solid var(--border);display:flex;flex-direction:column;gap:3px;}
.cam-foot-row{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;overflow:hidden;width:100%;}
.cam-name{font-size:11px;font-weight:600;color:var(--white);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%;}
.cam-meta{font-size: 12px;color:var(--light);}
.no-sig{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:.3;}
.no-sig svg{width:32px;height:32px;fill:var(--light);}
.no-sig span{font-size: 12px;letter-spacing:.06em;text-transform:uppercase;color:var(--light);}
.det-tag{position:absolute;bottom:8px;left:8px;background:rgba(220,38,38,.9);color:white;font-size: 11px;font-weight:700;letter-spacing:.06em;padding:3px 8px;border-radius:4px;}
/* ARMING STATUS */
.arm-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:4px;font-size: 11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;}
.arm-badge.armed{background:rgba(22,163,74,.15);border:1px solid rgba(22,163,74,.5);color:var(--green-bright);}
.arm-badge.disarmed{background:rgba(220,38,38,.15);border:1px solid rgba(220,38,38,.5);color:var(--red-bright);}
.arm-badge.partial{background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.5);color:#fbbf24;}
.arm-badge .arm-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.arm-badge.armed .arm-dot{background:var(--green-light);}
.arm-badge.disarmed .arm-dot{background:var(--red-light);}
.arm-badge.partial .arm-dot{background:var(--amber);}
.arm-cam-icon{position:absolute;bottom:8px;right:8px;font-size:12px;line-height:1;z-index:5;background:rgba(2,13,21,.7);padding:3px 5px;border-radius:4px;pointer-events:none;}
/* SCROLLBAR */
#content::-webkit-scrollbar{width:6px;}
#content::-webkit-scrollbar-track{background:transparent;}
#content::-webkit-scrollbar-thumb{background:var(--secondary);border-radius:3px;}
#sidebar::-webkit-scrollbar{width:4px;}
#sidebar::-webkit-scrollbar-thumb{background:var(--secondary);border-radius:2px;}
@keyframes pulse-red{0%,100%{box-shadow:0 0 8px rgba(220,38,38,.25);}50%{box-shadow:0 0 20px rgba(220,38,38,.5);}}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.4;}}
.dot.on{animation:blink 3s ease-in-out infinite;}
/* RESPONSIVE */
@media(max-width:1024px){
#sidebar{width:56px;padding:16px 0;}
.logo-wrap{padding:0 0 16px;justify-content:center;}
.logo-name,.logo-sub{display:none;}
.logo-icon{margin:0 auto;}
.nav-item{padding:10px;justify-content:center;}
.nav-item span{display:none;}
.nav-label{display:none;}
.nav-footer{padding:8px 4px 0;}
}
@media(max-width:768px){
#sidebar{position:fixed;left:0;top:0;height:100vh;width:240px;z-index:1000;transform:translateX(-100%);transition:transform .25s;}
#sidebar.open{transform:translateX(0);}
.hbg{display:flex!important;background:none;border:none;color:var(--light);cursor:pointer;font-size:20px;padding:8px;}
}
/* Auto-refresh: new detection highlight */
@keyframes evtNewFade {
0% { box-shadow: 0 0 0 2px rgba(96,165,250,.7); }
100% { box-shadow: 0 0 0 0 rgba(96,165,250,0); }
}
.evt-new {
animation: evtNewFade 3s ease-out forwards;
}
/* ─── PWA MOBILE UX ─── */
/* Safe area for notch devices (iPhone X+) */
@supports(padding: env(safe-area-inset-top)) {
#topbar { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
#content { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
#sidebar { padding-bottom: env(safe-area-inset-bottom); }
}
/* Standalone mode (installed PWA): hide browser chrome elements */
@media(display-mode: standalone) {
body { -webkit-user-select:none; user-select:none; }
#topbar { padding-top: env(safe-area-inset-top, 0px); height: calc(60px + env(safe-area-inset-top, 0px)); }
}
/* Mobile (<=768px): improve tap targets & readability */
@media(max-width:768px) {
#topbar { padding: 0 12px; height: 52px; }
.top-title { font-size: 14px; }
.top-controls { gap: 6px; }
.grid-sel { display: none; } /* grid selector not useful on mobile — always 1 col */
.top-btn { padding: 8px; min-width: 40px; min-height: 40px; justify-content: center; }
.top-btn span:not(.badge) { display: none; } /* hide "Admin" text, keep badge */
#content { padding: 12px; }
.cam-grid { gap: 10px; }
.cam-overlay { padding: 6px; }
.cam-lbl { font-size: 12px; }
.cam-foot { padding: 5px 8px; }
.cam-name { font-size: 12px; max-width: 55%; }
#statusbar { padding: 0 12px; gap: 12px; font-size: 12px; height: 28px; overflow-x: auto; white-space: nowrap; }
/* Nav items: bigger tap targets */
.nav-item { padding: 12px 14px; min-height: 44px; font-size: 14px; }
/* Modals: full width on mobile */
.modal { width: 95vw; padding: 20px; max-height: 90vh; overflow-y: auto; }
.modal-sm { width: 90vw; }
.modal-row { flex-direction: column; gap: 0; }
.modal-field input { font-size: 16px; padding: 10px 12px; } /* prevent iOS zoom on focus */
.modal-field label { font-size: 12px; }
.modal-actions { flex-direction: column; }
.modal-actions button { width: 100%; padding: 12px; font-size: 14px; }
.btn-cancel, .btn-save { min-height: 44px; }
/* Arming badges */
.arm-badge { font-size: 12px; padding: 4px 10px; }
/* Settings cam rows */
.cam-row { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
.cam-row-right { width: 100%; justify-content: space-between; }
/* Sidebar overlay backdrop */
#sidebar.open ~ #main::before {
content: '';
position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 999;
}
/* ── Mobile rediseño: bottom tab bar + carrusel cámaras (PR #277) ──── */
/* Hide the hamburger in mobile: bottom tabs cover the 4 primary
destinations, sidebar is only reached via the "Más" tab. */
.hbg { display: none !important; }
/* Bottom tab bar — always visible in mobile, fixed at viewport bottom */
#bottomTabs {
display: flex !important;
position: fixed;
left: 0; right: 0; bottom: 0;
height: calc(56px + env(safe-area-inset-bottom, 0));
padding-bottom: env(safe-area-inset-bottom, 0);
background: var(--primary, var(--primary));
border-top: 1px solid var(--border, #1a4858);
z-index: 1000;
align-items: stretch;
}
#bottomTabs .btab {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
background: none;
border: none;
color: rgba(255,255,255,.65);
font-size: 12px;
letter-spacing: .04em;
text-transform: uppercase;
cursor: pointer;
padding: 6px 2px;
position: relative;
min-height: 44px;
}
#bottomTabs .btab .btab-ico { font-size: 20px; line-height: 1; }
#bottomTabs .btab.active { color: #fff; }
#bottomTabs .btab.active::after {
content: ''; position: absolute; top: 0; left: 22%; right: 22%; height: 3px;
background: var(--accent, var(--amber)); border-radius: 0 0 3px 3px;
}
/* Badge on the alarmas tab — reuses the same node as the topbar badge */
#bottomTabs .btab .btab-badge {
position: absolute; top: 4px; right: calc(50% - 22px);
min-width: 16px; height: 16px; padding: 0 4px;
border-radius: 8px; background: var(--red); color: #fff;
font-size: 11px; font-weight: 600; line-height: 16px; text-align: center;
display: none;
}
#bottomTabs .btab .btab-badge.show { display: block; }
/* Leave room for the bottom bar under the content so nothing is hidden */
#content, #pageEvents, #pageLPR, #pageAlarms, #pageArming,
#pageMap, #pageSensores, #pageBilling, #pageFototrampeo {
padding-bottom: calc(72px + env(safe-area-inset-bottom, 0)) !important;
}
/* Carrusel horizontal de cámaras (Mission Control / Dashboard).
scroll-snap-x → 1 cam por pantalla, swipe natural izq/der. */
.cam-grid {
display: flex !important;
flex-direction: row !important;
grid-template-columns: none !important; /* override desktop grid */
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
gap: 0 !important;
padding: 0 !important;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox */
}
.cam-grid::-webkit-scrollbar { display: none; } /* Safari/Chrome */
.cam-grid > * {
flex: 0 0 100vw;
max-width: 100vw;
scroll-snap-align: start;
scroll-snap-stop: always;
}
/* Dot indicator below the carousel */
#camDots {
display: flex;
justify-content: center;
gap: 6px;
padding: 8px 0 4px;
}
#camDots .dot {
width: 6px; height: 6px;
border-radius: 50%;
background: rgba(255,255,255,.25);
transition: background .15s;
}
#camDots .dot.active {
background: var(--accent, var(--amber));
width: 18px;
border-radius: 3px;
}
/* Fullscreen close button — 36 → 44 tap target */
#fsClose { width: 44px !important; height: 44px !important; font-size: 22px; }
}
/* Desktop: bottom tabs + dots indicator hidden */
#bottomTabs, #camDots { display: none; }
/* Small phones (<=480px) */
@media(max-width:480px) {
.top-title { font-size: 13px; letter-spacing: .04em; }
#content { padding: 8px; }
.cam-grid { gap: 8px; }
.modal { padding: 16px; }
#statusbar { display: none; } /* too cramped on very small screens */
}
/* ─── Accesibilidad (audit 2026-05-19 §4) ────────────────────────────
Antes: solo 4 selectores `:focus` en todo el archivo + 10 `outline:none`
sin sustituto + 0 `prefers-reduced-motion`. WCAG AA fail.
Estrategia mínima:
1. Focus visible global: cualquier elemento interactivo que reciba
:focus-visible (sin :focus para evitar mostrar ring al hacer
click con ratón) muestra un ring azul Silvano de 2px.
2. `prefers-reduced-motion`: usuarios con esa preferencia ven
transiciones/animaciones a 0.01s — efectivamente desactivadas
pero sin romper transitions con timeouts dependientes.
3. `.sr-only`: helper estándar para texto solo-screen-reader,
útil para labels invisibles de iconos.
*/
:where(button, input, select, textarea, a, [tabindex]):focus-visible {
outline: 2px solid var(--blue-light); /* light blue, contrast OK on dark + light */
outline-offset: 2px;
border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
.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;
}
/* ─── Loading skeletons (audit 2026-05-19 §4) ────────────────────────
Reemplaza placeholders `Cargando...` planos por shimmer animado.
Uso típico:
(texto 1 línea)
(60% width)
(tarjeta)
(thumbnail cuadrada)
En modo reduced-motion el shimmer queda estático (CSS rule arriba). */
.skeleton {
display: block;
background: linear-gradient(
90deg,
rgba(54, 92, 108, 0.18) 0%,
rgba(54, 92, 108, 0.32) 50%,
rgba(54, 92, 108, 0.18) 100%
);
background-size: 200% 100%;
animation: skeletonShimmer 1.4s ease-in-out infinite;
border-radius: 4px;
}
.skeleton-line { height: 14px; margin: 6px 0; }
.skeleton-line + .skeleton-line { margin-top: 8px; }
.skeleton-w-30 { width: 30%; }
.skeleton-w-50 { width: 50%; }
.skeleton-w-60 { width: 60%; }
.skeleton-w-80 { width: 80%; }
.skeleton-card { height: 84px; margin: 8px 0; border-radius: 6px; }
.skeleton-thumb { width: 100%; aspect-ratio: 16/9; border-radius: 6px; }
@keyframes skeletonShimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
/* Auto-generated classes from former inline styles */
.i-s-001{display:none;position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:99999;background:var(--amber);color:#000;font-weight:700;font-size:11px;letter-spacing:.12em;padding:3px 18px;border-radius:0 0 8px 8px;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.4);}
.i-s-002{background:none;padding:0;}
.i-s-003{width:36px;height:36px;object-fit:contain;}
.i-s-004{margin:8px 0;border-top:1px solid var(--border);}
.i-s-005{display:none;color:#fb923c;font-weight:600;}
.i-s-006{fill:#fb923c;}
.i-s-007{opacity:.7;}
.i-s-008{display:flex;align-items:center;gap:12px;}
.i-s-009{display:none;}
.i-s-010{margin-left:12px;cursor:pointer;}
.i-s-011{margin-left:8px;font-size: 12px;color:var(--light);opacity:.7;}
.i-s-012{display:flex;gap:4px;margin-left:12px;}
.i-s-013{margin-left:auto;display:flex;align-items:center;gap:6px;cursor:pointer;font-size: 12px;color:var(--light);-webkit-user-select:none; user-select:none;}
.i-s-014{accent-color:var(--secondary);width:12px;height:12px;cursor:pointer;}
.i-s-015{margin-left:16px;font-size: 12px;letter-spacing:.06em;}
.i-s-016{padding:12px 24px 0;border-bottom:1px solid var(--border);display:flex;gap:4px;}
.i-s-017{margin-bottom:24px;background:rgba(17,87,123,.3);border:1px solid var(--border);border-radius:8px;padding:14px 16px;}
.i-s-018{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.i-s-019{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.i-s-020{margin-bottom:0;border:none;font-size:14px;}
.i-s-021{display:none;font-size: 11px;font-weight:700;letter-spacing:.06em;background:rgba(92,138,158,.35);border:1px solid rgba(92,138,158,.6);border-radius:4px;padding:2px 8px;color:var(--gray-500);text-transform:uppercase;}
.i-s-022{display:none;font-size: 11px;font-weight:700;letter-spacing:.06em;border-radius:4px;padding:2px 8px;text-transform:uppercase;}
.i-s-023{display:none;padding:6px 12px;border-radius:6px;border:none;background:var(--gradient);color:#fff;font-size:12px;font-weight:600;cursor:pointer;}
.i-s-024{margin-top:10px;font-size:13px;color:var(--light);}
.i-s-025{margin-bottom:24px;}
.i-s-026{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.i-s-027{margin-bottom:0;border:none;}
.i-s-028{display:flex;align-items:center;gap:8px;}
.i-s-029{padding:6px 10px;border-radius:6px;border:1px solid var(--border);background:rgba(2,13,21,.5);color:var(--white);font-size:12px;width:180px;}
.i-s-030{padding:6px 14px;border-radius:6px;border:1px solid var(--secondary);background:rgba(92,138,158,.3);color:var(--gray-500);font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap;}
.i-s-031{display:flex;flex-wrap:wrap;gap:8px;min-height:32px;}
.i-s-032{height:24px;}
.i-s-033{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.i-s-034{display:flex;gap:8px;}
.i-s-035{display:none;flex:1;overflow-y:auto;padding:20px 24px;}
.i-s-036{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.i-s-037{font-size:20px;font-weight:700;color:var(--white);}
.i-s-038{font-size:13px;color:var(--light);margin-top:2px;}
.i-s-039{padding:8px 16px;border-radius:6px;border:none;background:var(--gradient);color:#fff;font-size:13px;font-weight:600;cursor:pointer;}
.i-s-040{display:flex;flex-direction:column;gap:8px;}
.i-s-041{max-width:480px;}
.i-s-042{font-size:18px;font-weight:700;color:var(--white);margin-bottom:4px;}
.i-s-043{font-size:13px;color:var(--light);margin-bottom:20px;}
.i-s-044{background:rgba(17,87,123,.3);border:1px solid var(--border);border-radius:6px;padding:12px;margin-bottom:20px;font-size:13px;color:var(--light);}
.i-s-045{color:var(--gray-500);}
.i-s-046{display:flex;flex-direction:column;gap:12px;}
.i-s-047{display:block;font-size:12px;color:var(--gray-500);margin-bottom:4px;}
.i-s-048{width:100%;padding:8px 12px;border-radius:6px;border:1px solid var(--border);background:rgba(2,13,21,.5);color:var(--white);font-size:13px;}
.i-s-049{display:flex;align-items:center;gap:12px;margin-top:8px;}
.i-s-050{padding:8px 18px;border-radius:6px;border:none;background:var(--gradient);color:#fff;font-size:13px;font-weight:600;cursor:pointer;}
.i-s-051{font-size:12px;}
.i-s-052{margin-top:36px;padding-top:24px;border-top:1px solid var(--border);}
.i-s-053{font-size:16px;font-weight:700;color:var(--white);margin-bottom:4px;}
.i-s-054{font-size:12px;color:var(--light);margin-bottom:14px;}
.i-s-055{font-size:13px;color:var(--light);}
.i-s-056{margin-top:14px;padding:6px 14px;border-radius:6px;border:1px solid var(--amber);background:transparent;color:var(--amber);font-size:12px;cursor:pointer;}
.i-s-057{flex-wrap:wrap;}
.i-s-058{display:flex;align-items:center;gap:16px;flex:1;min-width:200px;}
.i-s-059{font-size:13px;color:var(--gray-500);}
.i-s-060{display:none;align-items:center;gap:8px;font-size:12px;color:var(--gray-500);margin-right:8px;}
.i-s-061{width:120px;height:6px;background:rgba(96,165,250,.1);border-radius:3px;overflow:hidden;}
.i-s-062{height:100%;background:var(--emerald);border-radius:3px;transition:width .3s;width:0%;}
.i-s-063{display:flex;gap:2px;background:rgba(2,13,21,.5);padding:3px;border-radius:6px;border:1px solid var(--border);margin-right:8px;}
.i-s-064{padding:4px 12px;border:none;background:var(--gradient);color:var(--white);border-radius:4px;cursor:pointer;font-size:12px;font-weight:600;letter-spacing:.03em;transition:all .15s;}
.i-s-065{padding:4px 12px;border:none;background:transparent;color:var(--light);border-radius:4px;cursor:pointer;font-size:12px;font-weight:600;letter-spacing:.03em;transition:all .15s;}
.i-s-066{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:4px 0;}
.i-s-067{background:var(--primary);border:1px solid var(--border);color:var(--light);padding:5px 8px;border-radius:6px;font-size:13px;cursor:pointer;}
.i-s-068{position:relative;}
.i-s-069{font-size:13px;padding:5px 12px;border-radius:6px;border:1px solid var(--border);background:var(--primary);color:var(--light);cursor:pointer;display:flex;align-items:center;gap:6px;}
.i-s-070{display:none;font-size: 12px;background:var(--blue-light);color:#fff;border-radius:50%;padding:0 5px;}
.i-s-071{display:none;position:absolute;top:100%;right:0;margin-top:6px;width:220px;max-height:350px;overflow-y:auto;background:var(--primary);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:100;padding:8px 14px;}
.i-s-072{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.i-s-073{font-size:13px;font-weight:600;color:var(--white);}
.i-s-074{display:flex;gap:6px;}
.i-s-075{font-size: 12px;padding:1px 6px;border-radius:3px;border:1px solid var(--border);background:transparent;color:var(--gray-500);cursor:pointer;}
.i-s-076{display:none;position:absolute;top:100%;right:0;margin-top:6px;width:280px;max-height:400px;overflow-y:auto;background:var(--primary);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:100;padding:8px 0;}
.i-s-077{padding:6px 14px 8px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);}
.i-s-078{display:flex;gap:4px;}
.i-s-079{padding:4px 0;}
.i-s-080{font-size:12px;padding:4px 10px;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--gray-500);cursor:pointer;}
.i-s-081{font-size:12px;padding:4px 8px;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--gray-500);cursor:pointer;display:none;}
.i-s-082{font-size:13px;padding:5px 8px;border-radius:6px;border:1px solid var(--border);background:var(--primary);color:var(--light);cursor:pointer;margin-left:auto;}
.i-s-083{flex:1;overflow:hidden;padding:8px 16px;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;align-content:start;}
.i-s-084{display:none;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:12px;color:var(--gray-500);text-align:center;padding:24px;}
.i-s-085{opacity:.35;}
.i-s-086{font-size:15px;color:var(--white);font-weight:600;}
.i-s-087{font-size:13px;max-width:380px;line-height:1.5;}
.i-s-088{display:none;padding:24px;color:var(--red);font-size:13px;text-align:center;}
.i-s-089{display:flex;flex-shrink:0;padding:6px 16px;border-top:1px solid var(--border);align-items:center;justify-content:center;gap:12px;}
.i-s-090{padding:5px 14px;border-radius:6px;border:1px solid var(--border);background:rgba(92,138,158,.3);color:var(--light);font-size:12px;cursor:pointer;}
.i-s-091{font-size:12px;color:var(--gray-500);min-width:120px;text-align:center;}
.i-s-092{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.92);align-items:center;justify-content:center;}
.i-s-093{width:98vw;height:98vh;object-fit:contain;display:block;}
.i-s-094{display:none;color:var(--red);font-size:14px;padding:40px;}
.i-s-095{position:absolute;top:0;left:0;right:0;padding:14px 56px 14px 16px;color:var(--light);font-size:13px;text-align:center;background:linear-gradient(180deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,0) 100%);pointer-events:none;}
.i-s-096{position:absolute;bottom:0;left:0;right:0;padding:14px 16px 18px;display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;background:linear-gradient(0deg,rgba(0,0,0,.75) 0%,rgba(0,0,0,0) 100%);}
.i-s-097{padding:6px 16px;border-radius:6px;border:1px solid var(--border);background:rgba(17,87,123,.9);color:var(--light);font-size:13px;cursor:pointer;}
.i-s-098{padding:6px 14px;border-radius:6px;border:1px solid rgba(16,185,129,.4);background:rgba(16,185,129,.15);color:var(--emerald);font-size:13px;cursor:pointer;font-weight:600;}
.i-s-099{padding:6px 14px;border-radius:6px;border:1px solid rgba(245,158,11,.4);background:rgba(245,158,11,.15);color:var(--amber);font-size:13px;cursor:pointer;font-weight:600;}
.i-s-100{display:none;padding:6px 14px;border-radius:6px;border:1px solid rgba(124,58,237,.4);background:rgba(124,58,237,.15);color:#a78bfa;font-size:13px;cursor:pointer;}
.i-s-101{font-size: 12px;color:var(--gray-500);width:100%;text-align:center;margin-top:2px;}
.i-s-102{display:none;position:absolute;inset:0;pointer-events:none;transition:opacity .3s;}
.i-s-103{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:none;background:rgba(17,87,123,.85);color:var(--light);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:1;}
.i-s-104{display:none;position:fixed;inset:0;z-index:10002;background:rgba(0,0,0,.75);align-items:center;justify-content:center;}
.i-s-105{background:#0a2a3a;border:1px solid #1e4a5e;border-radius:12px;padding:24px;width:480px;max-width:92vw;}
.i-s-106{font-family:Red Rose,serif;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-200);margin:0 0 16px;}
.i-s-107{font-size:12px;color:#8ba5b5;margin:0 0 14px;line-height:1.5;}
.i-s-108{margin-bottom:14px;}
.i-s-109{display:block;font-size: 12px;letter-spacing:.08em;text-transform:uppercase;color:#8ba5b5;margin-bottom:6px;}
.i-s-110{width:100%;background:rgba(2,13,21,.6);border:1px solid #1e4a5e;border-radius:6px;padding:9px 12px;color:var(--gray-200);font-size:13px;}
.i-s-111{margin-bottom:18px;}
.i-s-112{font-size:12px;min-height:18px;margin-bottom:10px;}
.i-s-113{display:flex;gap:10px;justify-content:flex-end;}
.i-s-114{padding:9px 16px;border-radius:6px;border:1px solid #1e4a5e;background:transparent;color:#8ba5b5;font-size:13px;cursor:pointer;}
.i-s-115{padding:9px 18px;border-radius:6px;border:none;background:#7c3aed;color:#fff;font-size:13px;cursor:pointer;font-weight:600;}
.i-s-116{display:none;position:fixed;inset:0;z-index:10001;background:rgba(0,0,0,.7);align-items:center;justify-content:center;}
.i-s-117{background:#0a2a3a;border:1px solid #1e4a5e;border-radius:12px;padding:24px;width:420px;max-width:90vw;}
.i-s-118{display:none;margin-bottom:14px;}
.i-s-119{flex:1;background:rgba(2,13,21,.6);border:1px solid #1e4a5e;border-radius:6px;padding:9px 12px;color:var(--gray-200);font-size:12px;}
.i-s-120{padding:9px 14px;border-radius:6px;border:1px solid #1e4a5e;background:rgba(17,87,123,.9);color:var(--gray-200);font-size:12px;cursor:pointer;white-space:nowrap;}
.i-s-121{font-size: 12px;color:#8ba5b5;margin-top:6px;}
.i-s-122{display:none;color:#e74c3c;font-size:12px;margin-bottom:10px;}
.i-s-123{padding:8px 16px;border-radius:6px;border:1px solid #1e4a5e;background:transparent;color:#8ba5b5;font-size:13px;cursor:pointer;}
.i-s-124{padding:8px 16px;border-radius:6px;border:none;background:var(--secondary);color:#fff;font-size:13px;cursor:pointer;}
.i-s-125{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.7);align-items:center;justify-content:center;}
.i-s-126{background:var(--primary);border:1px solid var(--border);border-radius:12px;width:480px;max-height:85vh;overflow-y:auto;padding:24px;}
.i-s-127{color:var(--white);margin-bottom:16px;}
.i-s-128{font-size:12px;color:var(--gray-500);display:block;margin-bottom:4px;}
.i-s-129{width:100%;padding:8px 10px;border-radius:6px;border:1px solid var(--border);background:var(--deep);color:var(--light);font-size:13px;box-sizing:border-box;}
.i-s-130{width:100%;padding:8px;border-radius:6px;border:1px solid var(--border);background:var(--deep);color:var(--light);font-size:13px;}
.i-s-131{flex:1;}
.i-s-132{width:100%;padding:8px;border-radius:6px;border:1px solid var(--border);background:var(--deep);color:var(--light);font-size:13px;box-sizing:border-box;}
.i-s-133{flex:1;display:none;}
.i-s-134{font-size:12px;color:var(--gray-500);display:block;margin-bottom:4px;margin-top:8px;}
.i-s-135{display:none;color:var(--red);font-size:12px;}
.i-s-136{display:flex;gap:8px;justify-content:flex-end;margin-top:8px;}
.i-s-137{padding:8px 16px;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--light);cursor:pointer;font-size:13px;}
.i-s-138{background:var(--primary);border:1px solid var(--border);border-radius:12px;width:600px;max-height:80vh;overflow-y:auto;padding:24px;}
.i-s-139{color:var(--white);margin:0;}
.i-s-140{background:none;border:none;color:var(--gray-500);font-size:18px;cursor:pointer;}
.i-s-141{flex:1;height:100%;overflow:hidden;}
.i-s-142{width:100%;height:100%;border:none;}
.i-s-143{padding:20px 24px 16px;border-bottom:1px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:space-between;}
.i-s-144{display:flex;gap:8px;align-items:center;}
.i-s-145{padding:6px 10px;border-radius:6px;background:rgba(17,87,123,.55);border:1px solid var(--border);color:var(--light);font-size:12px;cursor:pointer;}
.i-s-146{font-size:12px;color:var(--gray-500);}
.i-s-147{flex:1;overflow-y:auto;padding:20px 24px;}
.i-s-148{text-align:center;padding:40px;color:var(--gray-500);}
.i-s-149{display:none;text-align:center;padding:60px 20px;color:var(--gray-500);}
.i-s-150{opacity:.4;margin-bottom:12px;}
.i-s-151{font-size:14px;}
.i-s-152{display:none;text-align:center;padding:40px;color:var(--red);}
.i-s-153{display:flex;flex-direction:column;gap:6px;}
.i-s-154{flex:1;height:100%;overflow:hidden;display:none;}
.i-s-155{display:grid;grid-template-columns:280px 1fr;height:100%;background:var(--primary);}
.i-s-156{border-right:1px solid var(--border);overflow-y:auto;padding:18px 14px;background:rgba(2,13,21,.5);}
.i-s-157{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
.i-s-158{font-size:18px;font-weight:700;color:var(--white);}
.i-s-159{width:100%;padding:8px 10px;background:rgba(2,13,21,.6);border:1px solid var(--border);color:#fff;border-radius:6px;margin-bottom:14px;font-size:13px;}
.i-s-160{overflow-y:auto;padding:30px 36px;color:var(--light);}
.i-s-161{color:var(--gray-500);text-align:center;padding:60px 20px;}
.i-s-162{font-size:48px;margin-bottom:8px;}
.i-s-163{flex:1;height:100%;overflow-y:auto;padding:20px 24px;}
.i-s-164{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin-bottom:20px;}
.i-s-165{font-size:14px;font-weight:600;color:var(--gray-500);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;}
.i-s-166{background:var(--primary);border:1px solid var(--border);border-radius:12px;width:460px;max-height:85vh;overflow-y:auto;padding:24px;}
.i-s-167{display:flex;gap:4px;flex-wrap:wrap;}
.i-s-168{background:var(--primary);border:1px solid var(--border);border-radius:12px;width:380px;padding:24px;}
.i-s-169{font-size: 12px;color:var(--gray-500);}
.i-s-170{font-size:11px;padding:3px 8px;border-radius:4px;font-weight:600;}
.i-s-171{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:20px;}
.i-s-172{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.i-s-173{display:flex;flex-direction:column;gap:16px;}
.i-s-174{vertical-align:-3px;margin-right:6px;}
.i-s-175{display:flex;flex-direction:column;gap:4px;max-height:280px;overflow-y:auto;}
.i-s-176{display:flex;flex-direction:column;gap:6px;max-height:240px;overflow-y:auto;}
.i-s-177{display:flex;flex-direction:column;gap:4px;}
.i-s-178{font-size: 12px;opacity:.8;display:flex;align-items:center;gap:3px;}
.i-s-179{display:inline-block;transition:transform .3s;font-size:13px;}
.i-s-180{font-size: 12px;opacity:.6;}
.i-s-181{display:none;position:absolute;inset:0;z-index:500;background:rgba(2,13,21,.78);align-items:center;justify-content:center;flex-direction:column;gap:14px;color:var(--gray-500);text-align:center;padding:24px;pointer-events:auto;}
.i-s-182{opacity:.4;}
.i-s-183{font-size:16px;color:var(--white);font-weight:600;}
.i-s-184{font-size:13px;max-width:420px;line-height:1.5;}
.i-s-185{margin-top:8px;background:var(--gradient,var(--secondary));color:var(--white);border:none;padding:10px 22px;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;letter-spacing:.04em;}
.i-s-186{color:#e55;font-size:12px;display:none;}
.i-s-187{display:flex;gap:6px;margin-top:6px;}
.i-s-188{color:#e55;font-size: 12px;display:none;margin-bottom:4px;}
.i-s-189{width:14px;height:10px;border:2px dashed var(--amber);border-radius:2px;opacity:.8;}
.i-s-190{display:none;border-left:1px solid rgba(92,138,158,.5);padding-left:10px;margin-left:2px;}
.i-s-191{display:flex;align-items:center;gap:4px;margin-bottom:2px;font-weight:600;font-size: 11px;}
.i-s-192{display:flex;align-items:center;gap:3px;font-size: 12px;}
.i-s-193{width:10px;height:10px;border-radius:50%;background:var(--green-bright);display:inline-block;}
.i-s-194{width:10px;height:10px;border-radius:50%;background:#facc15;display:inline-block;margin-left:3px;}
.i-s-195{width:10px;height:10px;border-radius:50%;background:#f97316;display:inline-block;margin-left:3px;}
.i-s-196{width:10px;height:10px;border-radius:50%;background:var(--red-light);display:inline-block;margin-left:3px;}
.i-s-197{display:none;flex-direction:column;gap:24px;}
.i-s-198{grid-template-columns:repeat(6,1fr);}
.i-s-199{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;}
.i-s-200{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--border);flex-shrink:0;}
.i-s-201{font-family:'Red Rose',serif;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-500);}
.i-s-202{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:600;}
.i-s-203{flex:1;overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;gap:20px;}
.i-s-204{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
.i-s-205{display:none;padding:12px 16px;border-radius:8px;font-size:13px;}
.i-s-206{display:flex;gap:10px;flex-wrap:wrap;}
.i-s-207{font-size:13px;font-weight:600;color:var(--light);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;}
.i-s-208{padding:20px 24px 16px;border-bottom:1px solid var(--border);flex-shrink:0;}
.i-s-209{display:flex;align-items:center;justify-content:space-between;}
.i-s-210{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;flex:1;}
.i-s-211{margin-left:12px;padding:6px 10px;border-radius:6px;background:rgba(17,87,123,.55);border:1px solid var(--border);color:var(--light);font-size:12px;cursor:pointer;}
.i-s-212{background:rgba(17,87,123,.55);border:1px solid var(--border);border-radius:8px;overflow:hidden;padding:16px;display:flex;flex-direction:column;gap:10px;}
.i-s-213{font-size:13px;font-weight:600;color:var(--light);text-transform:uppercase;letter-spacing:.08em;}
.i-s-214{display:flex;gap:8px;flex-wrap:wrap;}
.i-s-215{background:rgba(17,87,123,.55);border:1px solid var(--border);border-radius:8px;padding:16px;}
.i-s-216{font-size:13px;font-weight:600;color:var(--light);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;}
.i-s-217{color:var(--gray-500);font-size:13px;}
.i-s-218{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.i-s-219{font-size: 12px;padding:4px 10px;background:transparent;}
.i-s-220{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.i-s-221{justify-content:center;background:rgba(17,87,123,.55);border:1px solid var(--border);border-radius:6px;padding:10px;}
.i-s-222{font-size:20px;font-weight:700;color:var(--white);margin-bottom:16px;}
.i-s-223{display:flex;gap:12px;margin-bottom:18px;flex-wrap:wrap;}
.i-s-224{width:540px;max-height:calc(100vh - 80px);display:flex;flex-direction:column;}
.i-s-225{width:100%;background:rgba(2,13,21,.6);border:1px solid var(--border);border-radius:6px;padding:9px 12px;color:var(--white);font-size:13px;outline:none;}
.i-s-226{color:var(--secondary);font-weight:normal;text-transform:none;letter-spacing:0;}
.i-s-227{display:none;border-top:1px solid var(--border);margin-top:14px;padding-top:12px;}
.i-s-228{font-family:'Red Rose',serif;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#e0a458;margin-bottom:10px;}
.i-s-229{display:flex;align-items:center;gap:8px;padding-top:18px;}
.i-s-230{accent-color:#e0a458;width:16px;height:16px;cursor:pointer;}
.i-s-231{margin:0;cursor:pointer;text-transform:none;letter-spacing:0;font-size:12px;}
.i-s-232{display:flex;align-items:center;gap:8px;margin-top:6px;}
.i-s-233{accent-color:var(--secondary);width:16px;height:16px;cursor:pointer;}
.i-s-234{display:flex;gap:10px;align-items:center;margin-top:12px;}
.i-s-235{font-size:12px;color:var(--secondary);}
.i-s-236{margin-top:10px;padding:10px 12px;border-radius:6px;background:rgba(17,87,123,.5);border:1px solid var(--secondary);font-size:12px;color:var(--light);}
.i-s-237{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.i-s-238{color:#e0a458;}
.i-s-239{display:none;margin-top:8px;padding:8px 10px;border-radius:6px;background:rgba(204,68,68,.12);border:1px solid #cc4444;color:#cc4444;font-size:12px;}
.i-s-240{display:none;padding:8px 20px 0;border-top:1px solid var(--border);}
.i-s-241{margin-top:10px;font-size:13px;display:none;}
.i-s-242{margin-top:6px;font-size:12px;color:var(--secondary);min-height:16px;}
.i-s-243{margin-top:14px;}
.i-s-244{position:absolute;top:20px;left:24px;display:none;z-index:9;gap:6px;align-items:center;flex-wrap:wrap;}
.i-s-245{background:linear-gradient(135deg,#7c3aed,#a855f7);border:none;color:#fff;font-size:15px;font-weight:600;padding:12px 22px;border-radius:8px;cursor:pointer;font-family:inherit;box-shadow:0 4px 16px rgba(124,58,237,.5);letter-spacing:.02em;transition:all .15s;}
.i-s-246{background:rgba(17,87,123,.9);color:#fff;border:1px solid rgba(255,255,255,.15);font-size:12px;font-family:inherit;padding:8px 12px;border-radius:6px;cursor:pointer;}
.i-s-247{position:absolute;top:0;left:0;pointer-events:none;display:none;}
.i-s-248{margin-top:12px;}
.i-s-249{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--light);cursor:pointer;}
.i-s-250{font-size:24px;margin:0 0 4px;color:var(--white);}
.i-s-251{color:var(--muted,var(--gray-400));font-size:14px;margin:0;}
.i-s-252{font-size:12px;color:var(--muted,var(--gray-400));}
.i-s-253{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
.i-s-254{background:var(--card,#0d2638);border:1px solid var(--border,#1e3a4a);border-radius:8px;padding:12px 16px;min-width:120px;}
.i-s-255{font-size:24px;font-weight:700;color:var(--white);}
.i-s-256{font-size: 12px;color:var(--gray-400);text-transform:uppercase;}
.i-s-257{font-size:24px;font-weight:700;color:var(--red);}
.i-s-258{font-size:24px;font-weight:700;color:#d97706;}
.i-s-259{display:none;padding:24px;text-align:center;color:var(--gray-400);}
.i-s-260{margin-top:24px;background:var(--card,#0d2638);border:1px solid var(--border,#1e3a4a);border-radius:8px;padding:16px 20px;}
.i-s-261{margin:0 0 12px;font-size:18px;color:var(--white);}
.i-s-262{margin:0 0 16px;font-size:13px;color:var(--gray-400);}
.i-s-263{background:#082030;border:1px solid #1e3a4a;border-radius:6px;padding:12px 14px;margin-bottom:16px;}
.i-s-264{font-size:13px;color:var(--gray-300);margin-bottom:8px;font-weight:600;}
.i-s-265{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.i-s-266{font-size:12px;color:var(--gray-400);}
.i-s-267{flex:1;min-width:220px;padding:6px 10px;border:1px solid var(--secondary);border-radius:4px;background:#fff;color:var(--primary);font-size:13px;}
.i-s-268{padding:6px 14px;background:var(--primary);color:#fff;border:0;border-radius:4px;font-size:12px;cursor:pointer;}
.i-s-269{font-size: 12px;color:var(--gray-400);margin-top:6px;}
.i-s-270{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.i-s-271{font-size:13px;color:var(--gray-300);font-weight:600;}
.i-s-272{display:none;padding:16px;text-align:center;color:var(--gray-400);font-size:13px;}
.i-s-273{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1000;align-items:center;justify-content:center;}
.i-s-274{background:#fff;color:var(--primary);border-radius:8px;padding:20px;max-width:520px;width:90%;max-height:calc(100vh - 80px);overflow-y:auto;}
.i-s-275{margin:0 0 14px;color:var(--primary);}
.i-s-276{display:flex;flex-direction:column;gap:10px;}
.i-s-277{font-size:12px;color:var(--secondary);font-weight:600;}
.i-s-278{display:block;width:100%;padding:6px 10px;margin-top:4px;border:1px solid var(--secondary);border-radius:4px;color:var(--primary);font-size:13px;}
.i-s-279{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.i-s-280{border:1px solid var(--gray-300);border-radius:4px;padding:8px 10px;margin:0;}
.i-s-281{font-size:12px;color:var(--secondary);font-weight:600;padding:0 6px;}
.i-s-282{display:grid;grid-template-columns:1fr 1fr;gap:4px;font-size:13px;}
.i-s-283{display:none;background:var(--gray-50);border:1px solid var(--gray-300);border-radius:4px;padding:10px;}
.i-s-284{font-size: 12px;color:var(--secondary);margin-bottom:6px;}
.i-s-285{width:100%;padding:6px 10px;border:1px solid var(--gray-300);border-radius:4px;color:var(--primary);font-size:12px;font-family:monospace;}
.i-s-286{font-size:13px;color:var(--primary);}
.i-s-287{font-size:12px;color:var(--red);min-height:16px;}
.i-s-288{display:flex;justify-content:flex-end;gap:8px;margin-top:6px;}
.i-s-289{padding:6px 14px;border:1px solid var(--secondary);border-radius:4px;background:#fff;color:var(--primary);font-size:13px;cursor:pointer;}
.i-s-290{padding:6px 14px;border:0;border-radius:4px;background:var(--primary);color:#fff;font-size:13px;cursor:pointer;}
.i-s-291{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9000;align-items:center;justify-content:center;padding:20px;}
.i-s-292{background:#0d2638;border:1px solid #1e3a4a;border-radius:10px;width:min(720px,100%);max-height:80vh;display:flex;flex-direction:column;}
.i-s-293{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #1e3a4a;}
.i-s-294{margin:0;color:#e0e8f0;font-size:16px;}
.i-s-295{background:none;border:none;color:var(--gray-400);font-size:20px;cursor:pointer;}
.i-s-296{overflow-y:auto;flex:1;padding:6px 10px;}
.i-s-297{padding:10px 18px;border-top:1px solid #1e3a4a;text-align:center;}
.i-s-298{display:none;background:var(--secondary);color:#fff;border:none;border-radius:6px;padding:6px 16px;font-size:13px;cursor:pointer;}
.i-s-299{display:none;flex-shrink:0;position:relative;background:#000;border-radius:6px;overflow:hidden;margin-bottom:8px;}
.i-s-300{width:100%;max-height:260px;object-fit:contain;display:block;background:#000;}
.i-s-301{display:none;position:absolute;inset:0;background:rgba(4,20,30,.85);flex-direction:column;align-items:center;justify-content:center;gap:8px;}
.i-s-302{display:none;position:absolute;inset:0;width:100%;height:100%;z-index:1;}
.i-s-303{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;z-index:1;}
.i-s-304{display:none;position:absolute;left:12px;bottom:12px;background:rgba(4,20,30,.78);color:#cfe4eb;font-size:12px;letter-spacing:.04em;padding:6px 10px;border-radius:4px;z-index:5;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
.i-s-305{display:none;position:absolute;inset:0;width:100%;height:100%;z-index:10;cursor:crosshair;}
.i-s-306{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--gray-500);cursor:pointer;}
.i-s-307{display:none;flex-direction:column;align-items:center;gap:10px;}
.i-s-308{width:40px;height:40px;border:3px solid rgba(92,138,158,.3);border-top-color:var(--gray-500);border-radius:50%;animation:spin 1s linear infinite;}
.i-s-309{font-size:12px;color:var(--gray-500);opacity:.8;}
.i-s-310{width:64px;height:64px;fill:currentColor;opacity:.3;}
.i-s-311{font-size:13px;opacity:.7;}
.i-s-312{font-size: 12px;opacity:.4;font-family:monospace;}
.i-s-313{color:var(--red-bright);font-size:12px;min-height:18px;margin-top:4px;}
.i-s-314{background:linear-gradient(135deg,#7f1d1d,var(--red));}
.i-s-315{gap:8px;}
.i-s-316{flex:0;align-self:flex-end;}
.i-s-317{padding:8px 10px;border-radius:6px;border:1px solid var(--border);background:rgba(17,87,123,.6);color:var(--light);font-size:12px;cursor:pointer;}
.i-s-318{height:140px;border-radius:8px;overflow:hidden;border:1px solid var(--border);margin-bottom:14px;}
.i-s-319{display:flex;flex-wrap:wrap;gap:6px;padding:6px 0;min-height:28px;}
.i-s-320{margin-top:10px;padding:10px 12px;background:rgba(17,87,123,.25);border:1px solid var(--border);border-radius:6px;}
.i-s-321{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.i-s-322{font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--gray-500);}
.i-s-323{padding:4px 10px;border-radius:5px;border:1px solid var(--secondary);background:rgba(92,138,158,.3);color:var(--gray-500);font-size: 12px;cursor:pointer;}
.i-s-324{padding:4px 10px;border-radius:5px;border:1px solid var(--secondary);background:rgba(92,138,158,.3);color:var(--gray-500);font-size: 12px;cursor:pointer;display:none;}
.i-s-325{margin-top:8px;font-size:12px;color:var(--light);}
.i-s-326{margin-top:8px;}
.i-s-327{display:flex;flex-direction:column;gap:6px;margin-top:4px;}
.i-s-328{display:none;padding:10px 12px;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);border-radius:6px;font-size: 12px;color:#fbbf24;}
.i-s-329{color:var(--red-bright);font-size:12px;min-height:18px;margin-top:8px;}
.i-s-330{height:200px;border-radius:8px;overflow:hidden;border:1px solid var(--border);margin-bottom:14px;}
.i-s-331{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:rgba(2,13,21,.4);border:1px solid var(--border);border-radius:6px;cursor:pointer;margin-bottom:0;}
.i-s-332{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--white);}
.i-s-333{font-size: 12px;color:var(--light);margin-top:2px;}
.i-s-334{width:36px;height:20px;border-radius:10px;background:var(--border);transition:background .2s;position:relative;flex-shrink:0;margin-left:12px;}
.i-s-335{width:16px;height:16px;border-radius:50%;background:var(--white);position:absolute;top:2px;left:2px;transition:left .2s;}
.i-s-336{display:none;margin-top:14px;}
.i-s-337{background:rgba(2,13,21,.6);border:1px solid var(--border);border-radius:6px;padding:8px 12px;color:var(--white);font-size:13px;width:100%;box-sizing:border-box;}
.i-s-338{font-size: 12px;color:var(--light);margin-top:4px;}
.i-s-339{display:none;margin-top:8px;}
.i-s-340{height:4px;background:var(--border);border-radius:2px;overflow:hidden;}
.i-s-341{height:100%;width:0%;background:var(--secondary);transition:width .3s;}
.i-s-342{font-size: 12px;color:var(--light);margin-top:5px;text-align:center;}
.i-s-343{display:none;position:fixed;inset:0;z-index:99999;background:rgba(2,10,18,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);align-items:center;justify-content:center;flex-direction:column;gap:16px;}
.i-s-344{text-align:center;max-width:320px;}
.i-s-345{color:var(--gray-100);font-size:18px;font-weight:600;margin:0 0 8px;}
.i-s-346{color:var(--gray-400);font-size:14px;margin:0 0 24px;line-height:1.5;}
.i-s-347{background:var(--secondary);color:var(--gray-100);border:none;border-radius:8px;padding:10px 28px;font-size:15px;font-weight:600;cursor:pointer;transition:background .15s;}
.i-s-348{color:var(--white);font-weight:600;}
.i-s-349{color:var(--blue);font-size: 12px;cursor:pointer;margin-right:10px;}
.i-s-350{background:transparent;border:none;color:var(--gray-500);font-size:18px;cursor:pointer;line-height:1;}
.i-s-351{margin:0;font-size:17px;color:#fff;}
.i-s-352{font-size:12px;color:var(--gray-400);margin-top:3px;}
.i-s-353{background:transparent;border:none;color:var(--gray-500);font-size:24px;cursor:pointer;}
.i-s-354{text-align:center;color:#cfd9df;padding:24px 14px;font-size:14px;line-height:1.6;}
/* generated JS style classes */
.s-s-001{font-size: 12px;color:var(--gray-500);}
.s-s-002{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--light);cursor:pointer;background:rgba(17,87,123,.4);border:1px solid var(--border);border-radius:5px;padding:3px 8px;}
.s-s-003{accent-color:var(--secondary);width:13px;height:13px;}
.s-s-004{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;color:var(--secondary);max-width:420px;margin:0 auto;}
.s-s-005{margin-bottom:16px;opacity:.5;}
.s-s-online{color:var(--green);}
.s-s-offline{color:var(--mid);}
.lpr-swatch-black{background:#111;}
.lpr-swatch-white{background:#f5f5f5;}
.lpr-swatch-gray{background:#888;}
.lpr-swatch-silver{background:#c0c0c0;}
.lpr-swatch-red{background:var(--red);}
.lpr-swatch-blue{background:#2563eb;}
.lpr-swatch-green{background:var(--green);}
.lpr-swatch-yellow{background:var(--amber-light);}
.lpr-swatch-orange{background:#ea580c;}
.lpr-swatch-brown{background:#8b4513;}
.lpr-swatch-purple{background:#7c3aed;}
.lpr-swatch-beige{background:#d9c8a1;}
.lpr-swatch-border{border:1px solid rgba(0,0,0,.25);}
.s-s-006{font-size:16px;font-weight:600;color:var(--white);margin-bottom:4px;}
.s-s-007{font-size:13px;opacity:.7;margin-bottom:20px;}
.s-s-008{text-align:left;width:100%;display:flex;flex-direction:column;gap:10px;}
.s-s-009{display:flex;align-items:center;gap:10px;background:rgba(92,138,158,.15);padding:10px 14px;border-radius:8px;border:1px solid var(--border);}
.s-s-010{background:var(--secondary);color:var(--white);width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;}
.s-s-011{font-size:13px;color:var(--light);}
.s-s-012{color:var(--white);}
.s-s-013{margin-top:20px;background:var(--gradient,var(--secondary));color:var(--white);border:none;padding:10px 22px;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;letter-spacing:.04em;}
.s-s-014{font-size: 12px;letter-spacing:.08em;text-transform:uppercase;}
.s-s-015{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.s-s-016{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:rgba(92,138,158,.5);}
.s-s-017{position:absolute;top:8px;right:8px;background:rgba(245,158,11,.2);border:1px solid rgba(245,158,11,.6);border-radius:4px;padding:2px 7px;font-size: 11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fbbf24;}
.s-s-019{color:var(--amber);background:rgba(245,158,11,.15);padding:1px 5px;border-radius:3px;}
.s-s-020{opacity:.7;background:rgba(92,138,158,.3);padding:1px 5px;border-radius:3px;}
.s-s-021{font-size:24px;opacity:0.6;}
.s-s-022{font-weight:600;}
.s-s-023{font-size: 12px;opacity:0.7;}
.s-s-024{font-size: 12px;padding:2px 8px;border-radius:99px;border:1px solid var(--border);background:transparent;color:var(--light);cursor:pointer;}
.s-s-024.active{background:var(--accent);color:#fff;}
.s-s-025{font-size: 12px;padding:2px 8px;border-radius:99px;border:1px solid var(--border);background:transparent;color:var(--light);cursor:pointer;}
.s-s-025.active{background:var(--accent);color:#fff;}
.s-s-026{color:var(--gray-500);}
.s-s-027{color:var(--red-bright);}
.s-s-028{color:var(--light);}
.s-s-029{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;background:rgba(2,13,21,.4);border:1px solid var(--border);border-radius:4px;margin-bottom:4px;}
.s-s-030{font-weight:600;color:var(--white);}
.s-s-031{color:var(--light);font-size: 12px;}
.s-s-032{padding:3px 8px;border-radius:4px;border:1px solid var(--secondary);background:rgba(92,138,158,.4);color:var(--gray-500);font-size: 12px;cursor:pointer;white-space:nowrap;}
.s-s-033{color:#34d399;}
.s-s-034{display:flex;justify-content:space-between;gap:12px;}
.s-s-035{background:#4caf6e;color:#fff;padding:1px 6px;border-radius:3px;font-size: 12px;margin-left:6px;}
.s-s-036{padding:3px 10px;border-radius:4px;border:1px solid var(--red-light);background:transparent;color:var(--red-light);font-size: 12px;cursor:pointer;}
.s-s-037{background:rgba(17,87,123,.3);border:1px solid var(--border);border-radius:6px;padding:10px;margin-bottom:8px;}
.s-s-038{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.s-s-039{flex:1;font-size:12px;}
.s-s-040{font-size: 12px;color:var(--gray-500);margin-top:2px;}
.s-s-041{font-size: 12px;color:#6a8294;margin-top:2px;}
.s-s-042{font-size:18px;font-weight:700;color:var(--white);margin-bottom:16px;}
.s-s-043{margin-top:10px;padding-top:10px;border-top:1px solid #2a4a60;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.s-s-044{color:#e0e8f0;}
.s-s-045{background:#fff;color:var(--primary);border:1px solid #2a4a60;border-radius:4px;padding:4px 6px;font-size:12px;}
.s-s-046{margin-top:8px;padding-top:8px;border-top:1px solid #2a4a60;display:none;align-items:center;gap:8px;flex-wrap:wrap;}
.s-s-047{font-size: 12px;color:var(--amber);}
.s-s-048{background:#1a3040;border:1px solid #2a4a60;border-radius:8px;padding:12px;margin-bottom:10px;}
.s-s-049{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.s-s-050{font-size:12px;color:var(--gray-500);}
.s-s-051{color:#4caf50;}
.s-s-052{color:#8ab4c0;font-size:12px;}
.s-s-053{display:flex;justify-content:space-between;align-items:center;}
.s-s-054{color:#4caf50;font-size:12px;}
.s-s-055{color:#8ab4c0;font-size:12px;margin-top:6px;}
.s-s-056{display:flex;flex-wrap:wrap;gap:24px;align-items:center;}
.s-s-057{font-size:18px;font-weight:700;color:var(--white);}
.s-s-058{font-size:13px;color:var(--gray-500);font-weight:500;}
.s-s-059{font-size:18px;font-weight:700;color:var(--white);}
.s-s-059-pending{color:var(--amber-light);}
.s-s-060{margin-top:10px;height:6px;background:rgba(96,165,250,.1);border-radius:3px;overflow:hidden;}
.s-s-061{height:100%;border-radius:3px;transition:width .3s;background:var(--secondary);width:50%;}
.s-s-062{margin-top:8px;font-size:12px;color:var(--gray-500);}
.s-s-063{color:var(--red);}
.s-s-064{font-size: 11px;font-weight:700;letter-spacing:.08em;background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.5);border-radius:3px;padding:1px 5px;color:#fbbf24;vertical-align:middle;}
.s-s-065{font-size: 11px;font-weight:600;letter-spacing:.04em;background:rgba(92,138,158,.35);border:1px solid rgba(92,138,158,.5);border-radius:3px;padding:1px 5px;color:var(--gray-500);vertical-align:middle;}
.s-s-066{background:rgba(92,138,158,.3);color:var(--gray-500);border-color:var(--gray-500);}
.s-s-067{display:inline-flex;align-items:center;gap:6px;background:rgba(92,138,158,.25);border:1px solid rgba(92,138,158,.5);border-radius:6px;padding:5px 10px;}
.s-s-068{font-size:12px;font-weight:600;color:var(--light);}
.s-s-069{background:none;border:none;color:var(--red);cursor:pointer;font-size:14px;line-height:1;padding:0 2px;}
.s-s-070{font-size: 12px;color:var(--gray-500);}
.s-s-071{display:none;border-top:none;}
.s-s-072{border-top:none;}
.s-s-073{border-top:1px solid var(--border);}
.s-s-075{accent-color:var(--secondary);cursor:pointer;}
.s-s-076{font-size: 12px;color:var(--red);}
.s-s-077{color:var(--red);font-weight:600;}
.s-s-078{color:#d97706;font-weight:600;}
.s-s-079{color:var(--green);font-weight:600;}
.s-s-080{padding:6px 8px;}
.s-s-081{cursor:pointer;border-bottom:1px dotted #888;}
.s-s-082{padding:6px 8px;color:var(--gray-400);font-size:13px;}
.s-s-083{padding:6px 8px;color:var(--gray-400);font-size:12px;}
.s-s-084{padding:6px 8px;text-align:center;}
.s-s-085{background:none;border:none;cursor:pointer;font-size:16px;color:inherit;}
.s-s-086{background:none;border:none;cursor:pointer;font-size:16px;color:inherit;margin-left:6px;}
.s-s-087{padding:12px;color:var(--gray-400);}
.s-s-088{color:var(--amber);font-weight:600;}
.s-s-089{color:var(--emerald);font-weight:600;}
.s-s-090{color:#6b7280;font-weight:600;}
.s-s-091{color:var(--gray-400);}
.s-s-092{color:var(--gray-400);font-size: 12px;margin-left:8px;}
.s-s-093{border-bottom:1px solid rgba(255,255,255,.08);}
.s-s-094{padding:6px 10px;color:var(--gray-300);font-size:12px;white-space:nowrap;}
.s-s-095{padding:6px 10px;}
.s-s-096{padding:6px 10px;color:var(--gray-500);font-size: 12px;text-align:right;}
.s-s-097{padding:20px;color:var(--gray-400);text-align:center;}
.s-s-098{width:100%;border-collapse:collapse;}
.s-s-099{padding:20px;color:var(--red-bright);}
.s-s-100{background:#fef3c7;border:1px solid #fde68a;color:#92400e;padding:6px 10px;border-radius:6px;font-size:12px;margin:6px 0;}
.s-s-101{background:var(--card,#0d2638);border:1px solid var(--border,#1e3a4a);border-radius:8px;padding:12px;margin-bottom:12px;}
.s-s-102{margin:0 0 6px;font-size:14px;color:var(--white);}
.s-s-103{color:var(--gray-400);font-weight:400;}
.s-s-104{text-align:left;color:var(--gray-400);font-size: 12px;text-transform:uppercase;}
.s-s-105{color:var(--green-light);}
.s-s-106{background:#082030;border:1px solid #1e3a4a;border-radius:6px;padding:10px 12px;margin-bottom:8px;}
.s-s-107{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;}
.s-s-108{flex:1;min-width:200px;}
.s-s-109{color:#fff;font-size:13px;font-weight:600;}
.s-s-110{color:var(--gray-400);font-size: 12px;margin-top:2px;}
.s-s-111{color:var(--gray-300);font-size: 12px;margin-top:2px;}
.s-s-112{display:flex;gap:6px;}
.s-s-113{padding:4px 10px;background:var(--secondary);color:#fff;border:0;border-radius:4px;font-size: 12px;cursor:pointer;}
.s-s-114{padding:4px 10px;background:var(--primary);color:#fff;border:0;border-radius:4px;font-size: 12px;cursor:pointer;}
.s-s-115{padding:4px 10px;background:#7f1d1d;color:#fff;border:0;border-radius:4px;font-size: 12px;cursor:pointer;}
.s-s-116{color:var(--muted);}
.s-s-117{color:var(--red-light);}
.s-s-118{color:var(--amber);}
.s-s-119{color:#fca5a5;}
.s-s-120{padding:4px 8px;font-size:12px;}
.s-s-121{font-size: 12px;color:var(--secondary);}
.s-s-122{font-family:monospace;font-size:12px;}
.s-s-123{padding:5px 10px;font-size:12px;}
.s-s-124{padding:0;}
.s-s-125{text-align:right;}
.s-s-126{padding:16px 0;}
.s-s-127{color:var(--secondary);}
.s-s-128{padding:3px 8px;font-size: 12px;}
.s-s-129{font-family:monospace;}
.s-s-130{font-size: 12px;color:var(--secondary);margin-left:6px;}
.s-s-131{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:12px;flex-wrap:wrap;}
.s-s-132{font-size:12px;color:var(--secondary);}
.s-s-133{font-size:12px;color:var(--secondary);cursor:pointer;display:inline-flex;align-items:center;gap:4px;}
.s-s-134{color:#fca5a5;padding:16px 0;}
.s-s-135{background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.25);border-radius:3px;padding:1px 5px;font-size: 12px;}
.s-s-136{font-size: 11px;color:var(--gray-500);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;font-weight:700;}
.s-s-137{display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid rgba(92,138,158,.2);}
.s-s-138{font-size: 12px;color:#4a6a7a;min-width:60px;}
.s-s-139{display:flex;gap:4px;flex-wrap:wrap;}
.s-s-140{background:rgba(16,185,129,.15);border:1px solid rgba(16,185,129,.3);border-radius:3px;padding:1px 6px;font-size: 12px;color:var(--emerald);}
.s-s-141{color:#4a6a7a;font-size: 12px;margin-left:auto;}
.s-s-142{color:var(--gray-500);font-size: 12px;padding:4px 0;}
.s-s-143{width:16px;height:16px;border-radius:50%;background:var(--secondary);}
.s-s-144{color:var(--emerald);font-size: 12px;padding:4px 0;}
.s-s-145{grid-column:1/-1;font-size:11px;font-weight:600;color:var(--gray-500);padding:6px 4px 2px;letter-spacing:.04em;text-transform:uppercase;border-bottom:1px solid rgba(92,138,158,.15);margin-bottom:2px;}
.s-s-146{padding:6px 14px 8px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:6px;}
.s-s-147{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--light);cursor:pointer;}
.s-s-148{accent-color:var(--blue-light);cursor:pointer;}
.s-s-149{font-size: 12px;color:var(--muted);margin-left:22px;margin-top:2px;}
.s-s-150{font-size: 12px;background:var(--blue-light);color:#fff;border-radius:50%;padding:0 5px;}
.s-s-151{margin-bottom:4px;}
.s-s-152{font-size:13px;font-weight:600;color:var(--light);padding:6px 14px;display:flex;align-items:center;gap:6px;}
.s-s-153{padding:0 14px 4px 34px;}
.s-s-154{display:flex;align-items:center;gap:6px;padding:3px 0;font-size:13px;color:var(--light);cursor:pointer;}
.s-s-155{font-size:12px;color:var(--gray-500);padding:8px 0;}
.s-s-156{color:var(--gray-500);padding:40px;text-align:center;}
.s-s-157{background:rgba(17,87,123,.55);border:1px solid var(--border);border-radius:8px;padding:14px 18px;display:flex;align-items:center;gap:16px;}
.s-s-158{flex:1;min-width:0;}
.s-s-159{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.s-s-160{font-size:15px;font-weight:600;color:var(--white);}
.s-s-161{font-size: 12px;padding:2px 8px;border-radius:99px;background:rgba(16,185,129,.15);color:var(--emerald);font-weight:500;}
.s-s-162{font-size:12px;color:var(--gray-500);display:flex;gap:16px;flex-wrap:wrap;}
.s-s-163{display:flex;gap:6px;flex-shrink:0;}
.s-s-164{padding:5px 12px;border-radius:5px;border:1px solid var(--border);background:transparent;color:var(--blue-light);cursor:pointer;font-size:12px;}
.s-s-165{padding:5px 12px;border-radius:5px;border:1px solid var(--border);background:transparent;color:var(--light);cursor:pointer;font-size:12px;}
.s-s-166{padding:5px 12px;border-radius:5px;border:1px solid var(--border);background:transparent;color:var(--secondary);cursor:pointer;font-size:12px;}
.s-s-167{color:var(--red);padding:20px;text-align:center;}
.s-s-168{color:var(--gray-500);text-align:center;padding:20px;}
.s-s-169{font-size: 12px;color:var(--white);}
.s-s-170{background:rgba(17,87,123,.4);border:1px solid var(--border);border-radius:6px;padding:12px;margin-bottom:6px;}
.s-s-171{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.s-s-172{font-size: 12px;padding:2px 8px;border-radius:99px;background:rgba(92,138,158,.35);color:var(--white);font-weight:500;}
.s-s-173{margin-top:6px;border-top:1px solid var(--border);padding-top:6px;}
.s-s-174{margin-top:4px;font-size: 12px;color:var(--red);}
.s-s-175{margin-top:8px;padding-top:6px;border-top:1px solid var(--border);}
.s-s-176{font-size:12px;color:var(--blue-light);text-decoration:none;}
.s-s-177{color:var(--red);text-align:center;}
.s-s-178{grid-column:1/-1;}
.s-s-179{width:80px;height:60px;object-fit:cover;border-radius:6px;border:1px solid var(--border);flex-shrink:0;}
.s-s-180{font-size: 12px;padding:2px 6px;border-radius:4px;background:rgba(96,165,250,.12);color:var(--blue-light);}
.s-s-181{font-size: 12px;padding:4px 10px;border-radius:4px;border:1px solid var(--amber-light);background:rgba(234,179,8,.12);color:var(--amber-light);cursor:pointer;}
.s-s-182{font-size: 12px;padding:4px 10px;border-radius:4px;border:1px solid var(--green-light);background:rgba(34,197,94,.12);color:var(--green-light);cursor:pointer;}
.s-s-183{display:flex;align-items:center;gap:12px;padding:14px 16px;background:rgba(17,87,123,.55);border:1px solid var(--border);border-radius:8px;}
.s-s-184{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.s-s-185{font-size:11px;padding:2px 8px;border-radius:4px;background:rgba(92,138,158,.35);color:var(--white);font-weight:600;}
.s-s-186{font-size:11px;padding:2px 8px;border-radius:4px;background:rgba(239,68,68,.08);color:var(--red-bright);font-weight:600;}
.s-s-187{font-size:14px;color:var(--white);font-weight:600;}
.s-s-188{font-size:13px;color:var(--light);margin-left:auto;white-space:nowrap;}
.s-s-189{display:flex;align-items:center;gap:6px;margin-top:4px;}
.s-s-190{margin-top:3px;}
.s-s-191{background:rgba(17,87,123,.55);border:1px solid var(--border);border-radius:8px;padding:14px 16px;display:flex;align-items:center;gap:12px;}
.s-s-192{font-size:20px;}
.s-s-193{font-size:12px;padding:2px 8px;border-radius:4px;background:rgba(17,87,123,.35);color:var(--white);font-weight:600;}
.s-s-194{font-size:13px;color:var(--light);margin-top:3px;}
.s-s-195{font-size: 11px;padding:1px 4px;border-radius:3px;background:rgba(220,38,38,.2);color:var(--red-light);font-weight:600;}
.s-s-196{color:var(--emerald);font-size: 12px;}
.s-s-197{color:var(--amber);font-size: 12px;}
.s-s-198{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px 6px 0 0;display:block;cursor:pointer;}
.s-s-199{background:rgba(17,87,123,.55);border:1px solid var(--border);border-radius:6px;cursor:pointer;transition:border-color .15s;}
.s-s-200{padding:5px 8px 6px;}
.s-s-201{display:flex;align-items:center;gap:4px;overflow:hidden;}
.s-s-202{font-size:13px;color:var(--white);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;}
.s-s-203{display:flex;align-items:center;gap:4px;margin-top:4px;}
.s-s-204{font-size:12px;color:#34d399;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;}
.s-s-205{flex:1;}
.s-s-206{font-size:12px;color:var(--gray-300);white-space:nowrap;font-variant-numeric:tabular-nums;}
.s-s-207{font-size: 11px;padding:1px 5px;border-radius:99px;background:rgba(220,38,38,.15);color:var(--red-light);font-weight:600;}
.s-s-208{font-size: 12px;padding:1px 5px;border-radius:99px;background:rgba(16,185,129,.15);color:var(--emerald);}
.s-s-209{font-size: 12px;padding:1px 5px;border-radius:99px;background:rgba(245,158,11,.15);color:var(--amber);}
.s-s-210{background:rgba(17,87,123,.55);border:1px solid var(--border);border-radius:8px;overflow:hidden;}
.s-s-211{display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.s-s-212{font-size: 12px;padding:1px 5px;border-radius:3px;background:rgba(17,87,123,.35);color:var(--white);font-weight:500;}
.s-s-213{font-size:12px;color:var(--white);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.s-s-214{font-size: 12px;color:var(--secondary);margin-left:auto;white-space:nowrap;}
.s-s-215{font-size: 12px;color:var(--light);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.s-s-216{color:#8ba5b5;}
.s-s-217{color:var(--emerald);}
.s-s-218{color:var(--red);}
.s-s-219{font-size: 12px;padding:1px 6px;border-radius:3px;border:1px solid rgba(16,185,129,.3);background:rgba(16,185,129,.1);color:var(--emerald);cursor:pointer;margin-left:4px;}
.s-s-220{font-size: 12px;padding:1px 6px;border-radius:3px;border:1px solid rgba(245,158,11,.3);background:rgba(245,158,11,.1);color:var(--amber);cursor:pointer;}
.s-s-221{color:var(--light);text-decoration:underline;cursor:pointer;}
.s-s-222{color:var(--light);text-decoration:underline;}
.s-s-223{padding:6px 0;color:var(--gray-500);font-size:12px;}
.s-s-224{width:100%;font-size:12px;border-collapse:collapse;margin-top:6px;}
.s-s-225{padding:2px 8px 2px 0;color:var(--gray-500);white-space:nowrap;}
.s-s-226{padding:2px 0;color:var(--light);}
.s-s-227{background:#1976D2;height:2px;}
.s-s-228{background:#42A5F5;height:1px;}
.s-s-229{font-size: 12px;color:rgba(255,255,255,.45);margin-top:2px;}
.s-s-230{background:transparent;border:2px solid #ff6600;}
.s-s-231{background:rgba(255,102,0,.15);border:1px solid #ff6600;}
.s-s-232{background:#cc0000;height:2px;}
.s-s-233{background:#e8d44d;}
.s-s-234{background:#7ec850;}
.s-s-235{background:#2d8c2d;}
.s-s-236{background:#9b59b6;}
.s-s-237{background:#a0a0a0;}
.s-s-238{background:#4a90d9;}
.s-s-239{background:#2171b5;height:2px;}
.s-s-240{background:#e63946;}
.s-s-241{background:#f4d35e;}
.s-s-242{background:#6a994e;}
.s-s-243{background:#a7c957;}
.s-s-244{background:#457b9d;}
.s-s-245{background:#ccc;}
.s-s-246{background:rgba(34,139,34,.4);border:2px solid #228B22;}
.s-s-247{background:rgba(65,105,225,.4);border:2px solid #4169E1;}
.s-s-248{background:#f0f0f0;}
.s-s-249{background:#b0b0b0;}
.s-s-250{background:#707070;}
.s-s-251{font-size: 12px;color:rgba(255,255,255,.4);margin-top:2px;}
.s-s-252{display:none;}
.s-s-253{background:var(--primary);border:2px solid #fff;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:0 2px 4px rgba(0,0,0,.4);}
.s-s-254{color:#6b7280;}
.s-s-255{font-size: 12px;color:var(--gray-500);margin-top:4px;}
.s-s-256{font-size: 12px;color:var(--gray-300);margin-top:4px;}
.s-s-257{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap;}
.s-s-258{text-align:center;}
.s-s-259{color:var(--primary);}
.s-s-260{font-size: 12px;opacity:.7;}
.s-s-261{margin-top:6px;padding:3px 10px;background:#e55;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size: 12px;}
.s-s-262{display:inline-block;vertical-align:0;margin-right:4px;flex-shrink:0;}
.s-s-263{font-family:\'Red Rose\',serif;font-size:14px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px;color:#fff;}
.s-s-264{margin-bottom:18px;color:var(--gray-200);white-space:pre-wrap;}
.s-s-265{display:flex;gap:8px;justify-content:flex-end;}
.s-s-266{padding:8px 16px;border-radius:6px;border:1px solid rgba(92,138,158,.6);background:transparent;color:#fff;font-size:12px;font-weight:600;cursor:pointer;}
.s-s-267{padding:8px 16px;border-radius:6px;background:var(--red);color:#fff;font-size:12px;font-weight:600;cursor:pointer;}
.s-s-268{margin-bottom:12px;color:var(--gray-200);}
.s-s-269{width:100%;padding:8px 12px;border-radius:6px;border:1px solid rgba(92,138,158,.6);background:rgba(0,0,0,.25);color:#fff;font-size:13px;margin-bottom:18px;box-sizing:border-box;}
.s-s-270{padding:8px 16px;border-radius:6px;background:var(--gradient,linear-gradient(135deg,var(--primary),var(--secondary)));color:#fff;border:none;font-size:12px;font-weight:600;cursor:pointer;}
.s-s-271{flex:1;font-size: 12px;line-height:1.3;}
.s-s-272{color:rgba(255,255,255,.8);font-size:12px;font-weight:600;align-self:center;}
.s-s-273{padding:5px 14px;background:var(--green-light);border:none;border-radius:5px;color:#fff;font-size:12px;font-weight:600;cursor:pointer;}
.s-s-274{padding:5px 14px;background:#e55;border:none;border-radius:5px;color:#fff;font-size:12px;font-weight:600;cursor:pointer;}
.s-s-275{width:100%;font-size: 12px;padding:5px 0;cursor:pointer;}
.s-s-276{color:#8ab4c0;font-size: 12px;font-weight:400;}
.s-s-277{font-size: 12px;color:#8ab4c0;margin-bottom:4px;}
.s-s-278{width:100%;box-sizing:border-box;background:#0a1e28;border:1px solid var(--secondary);color:#fff;padding:4px 6px;border-radius:3px;font-size:12px;margin-bottom:6px;}
.s-s-279{display:flex;gap:4px;}
.s-s-280{flex:1;font-size: 12px;padding:4px 0;}
.s-s-281{transform:rotate(0deg);opacity:1;filter:drop-shadow(0 0 4px rgba(0,0,0,.8));width:24px;height:24px;}
.s-s-282{background:rgba(17,87,123,.85);padding:4px 10px;border-radius:6px;white-space:nowrap;font-size:12px;font-weight:600;border:1px solid rgba(92,138,158,.5);}
.s-s-283{opacity:.6;font-weight:400;}
.s-s-284{font-size: 12px;color:var(--gray-500);}
.s-s-285{flex:1;min-width:40px;}
.s-s-286{width:50%;}
.s-s-287{font-size: 12px;color:var(--gray-500);min-width:38px;text-align:right;}
.s-s-288{width:50%;}
.s-s-289{height:100%;background:rgba(92,138,158,.15);}
.s-s-290{background:var(--gradient);color:var(--white);border:none;}
.s-s-291{background:var(--red);color:var(--white);border:none;}
.s-s-292{color:var(--light);text-decoration:underline;font-size:12px;}
.s-s-293{color:var(--light);font-weight:500;}
.s-s-294{min-width:180px;}
.s-s-295{width:50%;}
.s-s-296{font-size:18px;font-weight:700;color:var(--white);margin-bottom:4px;}
.s-s-297{color:var(--light);font-weight:500;}
.s-s-298{color:var(--gray-500);font-size:12px;margin-top:4px;}
.s-s-299{font-size: 12px;padding:6px 12px;background:var(--gradient);color:var(--white);border:none;border-radius:4px;cursor:pointer;}
.s-s-300{font-size: 12px;padding:6px 12px;background:var(--red);color:var(--white);border:none;border-radius:4px;cursor:pointer;}
.s-s-301{color:var(--light);font-weight:500;}
.s-s-302{color:var(--light);font-weight:600;font-size:15px;}
.s-s-303{color:var(--gray-500);margin-top:4px;}
.s-s-304{color:var(--gray-500);font-size:13px;}
.s-s-305{display:flex;align-items:center;gap:8px;padding:6px 10px;background:rgba(17,87,123,.4);border-radius:6px;border:1px solid rgba(92,138,158,.15);}
.s-s-306{color:var(--light);}
.s-s-307{font-size:12px;color:var(--white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.s-s-308{font-size: 12px;color:var(--gray-500);white-space:nowrap;}
.s-s-309{color:var(--green);}
.s-s-310{background:rgba(17,87,123,.55);border:1px solid var(--border);border-radius:8px;padding:12px;display:flex;align-items:center;gap:10px;}
.s-s-311{font-size:18px;}
.s-s-312{font-size:13px;font-weight:600;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.s-s-313{font-size: 11px;font-weight:700;letter-spacing:.06em;color:var(--light);}
.s-s-314{color:var(--gray-500);padding:20px;text-align:center;}
.s-s-315{color:var(--green);font-weight:600;}
.s-s-316{color:var(--red);font-weight:600;}
.s-s-317{background:rgba(22,163,74,.15);color:var(--green);padding:2px 6px;border-radius:4px;font-size: 11px;font-weight:700;}
.s-s-318{background:rgba(220,38,38,.15);color:var(--red);padding:2px 6px;border-radius:4px;font-size: 11px;font-weight:700;}
.s-s-319{background:rgba(100,116,139,.2);color:var(--mid);padding:2px 6px;border-radius:4px;font-size: 11px;font-weight:600;}
.s-s-320{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:rgba(17,87,123,.3);border:1px solid var(--border);border-radius:8px;}
.s-s-321{font-size:13px;font-weight:600;color:var(--white);}
.s-s-322{font-size: 12px;color:var(--gray-500);margin-top:3px;}
.s-s-323{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.s-s-324{padding:5px 10px;border-radius:5px;border:1px solid var(--border);background:transparent;color:var(--light);font-size: 12px;cursor:pointer;}
.s-s-325{padding:5px 10px;border-radius:5px;border:1px solid rgba(220,38,38,.4);background:rgba(220,38,38,.1);color:var(--red-bright);font-size: 12px;cursor:pointer;}
.s-s-326{padding:6px 10px;border-radius:5px;border:1px solid var(--border);background:transparent;color:var(--light);font-size:12px;cursor:pointer;min-width:36px;}
.s-s-327{display:flex;align-items:center;gap:12px;padding:12px 16px;background:rgba(17,87,123,.55);border:1px solid var(--border);border-radius:8px;transition:opacity .2s;}
.s-s-328{font-size:14px;}
.s-s-329{font-size:11px;padding:2px 8px;border-radius:99px;background:rgba(17,87,123,.35);color:var(--white);font-weight:600;}
.s-s-330{font-size:12px;color:var(--white);font-weight:600;}
.s-s-331{display:flex;align-items:center;gap:8px;}
.s-s-332{font-size: 12px;color:var(--gray-500);margin-top:2px;}
.s-s-333{display:flex;align-items:center;gap:12px;padding:10px 14px;background:rgba(17,87,123,.4);border:1px solid var(--border);border-radius:6px;}
.s-s-334{font-size:16px;}
.s-s-335{font-size:12px;font-weight:600;color:var(--white);}
.s-s-336{font-size: 12px;color:var(--gray-500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.s-s-337{font-size: 12px;color:var(--light);margin-top:2px;font-weight:500;}
.s-s-338{font-size: 12px;color:var(--red-light);margin-top:2px;}
.s-s-339{font-size: 11px;padding:2px 8px;border-radius:99px;font-weight:600;color:var(--green);background:rgba(34,197,94,.1);}
.s-s-340{font-size: 12px;color:var(--gray-500);white-space:nowrap;flex-shrink:0;}
.s-s-341{background:var(--green);}
.s-s-342{color:var(--gray-500);font-size:13px;text-align:center;padding:12px;}
.s-s-343{color:var(--amber-light);border-color:rgba(234,179,8,.4);}
.s-s-344{color:var(--blue-light);border-color:rgba(96,165,250,.4);}
.s-s-345{text-align:center;padding:16px;color:var(--green);font-size:13px;}
.s-s-346{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:4px;font-size:12px;background:rgba(17,87,123,.35);border:1px solid var(--border);}
.s-s-347{flex:1;color:var(--white);font-weight:500;}
.s-s-348{padding:6px 10px;border-radius:4px;font-size:12px;background:rgba(17,87,123,.35);border:1px solid var(--border);}
.s-s-349{flex:1;color:var(--white);font-weight:600;}
.s-s-350{font-size: 12px;color:var(--gray-500);margin-top:3px;padding-left:2px;}
.s-s-351{text-align:center;padding:10px;color:var(--green);font-size:13px;}
.s-s-352{color:var(--gray-500);font-size:12px;}
.s-s-353{background:rgba(92,138,158,.3);}
.s-s-354{text-decoration:none;}
.s-s-355{font-size:12px;color:var(--secondary);text-decoration:none;}
.s-s-356{padding:14px;color:var(--secondary);font-size:13px;}
.s-s-357{font-weight:600;color:var(--white);font-size:13px;}
.s-s-358{font-size:12px;color:var(--secondary);margin-top:2px;}
.s-s-359{font-size: 12px;color:var(--secondary);margin-top:4px;}
.s-s-360{font-size: 12px;color:var(--secondary);margin-top:2px;}
.s-s-361{max-width:100%;max-height:280px;border-radius:6px;border:1px solid var(--border);}
.s-s-362{font-size:12px;color:var(--secondary);font-style:italic;}
.s-s-363{padding:18px;overflow:auto;}
.s-s-364{font-size:14px;font-weight:600;color:var(--white);margin-bottom:12px;}
.s-s-365{margin-bottom:16px;}
.s-s-366{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:12px;}
.s-s-367{color:var(--white);font-family:monospace;}
.s-s-368{margin-top:18px;padding:10px 12px;background:rgba(255,255,255,.04);border-radius:6px;font-size:12px;color:var(--secondary);}
.s-s-369{margin-top:18px;display:flex;gap:8px;flex-wrap:wrap;}
.s-s-370{padding:6px 14px;}
.s-s-371{margin-top:10px;font-size:12px;display:none;}
.s-s-372{padding:32px;text-align:center;color:var(--light);}
.s-s-373{padding:48px;text-align:center;color:var(--light);}
.s-s-374{background:var(--border);color:var(--light);}
.s-s-375{font-size:12px;color:var(--white);}
.s-s-376{padding:32px;text-align:center;color:#e57373;}
.s-s-377{color:var(--green-bright);}
.s-s-378{color:#fb923c;}
.s-s-379{font-size: 12px;color:var(--secondary);margin-top:6px;}
.s-s-380{margin-top:8px;}
.s-s-381{color:var(--secondary);font-size: 12px;}
.s-s-382{display:inline-flex;align-items:center;gap:6px;}
.s-s-383{width:12px;height:12px;border-radius:3px;}
.s-s-384{font-size:12px;color:var(--light);text-transform:none;letter-spacing:0;cursor:pointer;}
.s-s-385{margin-bottom:14px;}
.s-s-386{width:36px;}
.s-s-387{display:flex;align-items:center;gap:8px;cursor:pointer;}
.s-s-388{color:var(--white);text-transform:none;letter-spacing:0;}
.s-s-389{display:flex;gap:8px;align-items:center;}
.s-s-390{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.s-s-391{margin:0;}
.s-s-392{display:none;padding:8px 0;text-align:left;}
.s-s-393{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--gray-500);margin-bottom:6px;font-weight:600;}
.s-s-394{display:block;padding:6px 10px;border-radius:4px;color:var(--light);background:transparent;font-size:13px;cursor:pointer;margin-bottom:2px;text-decoration:none;}
.s-s-395{font-size: 12px;text-transform:uppercase;letter-spacing:.08em;color:var(--gray-500);margin-bottom:4px;}
.s-s-396{margin:0 0 20px;font-size:26px;color:var(--white);font-weight:700;}
.s-s-397{line-height:1.7;color:#cfd9df;font-size:14px;}
.s-s-398{white-space:pre-wrap;}
.s-s-399{margin-top:32px;padding-top:20px;border-top:1px solid var(--border);font-size:13px;color:var(--gray-500);}
.s-s-400{margin-left:8px;padding:5px 12px;background:transparent;border:1px solid var(--border);border-radius:4px;color:#4caf6e;cursor:pointer;}
.s-s-401{margin-left:6px;padding:5px 12px;background:transparent;border:1px solid var(--border);border-radius:4px;color:var(--red-bright);cursor:pointer;}
.s-s-402{float:right;font-size: 12px;}
.s-s-403{color:var(--red-bright);padding:30px;}
.s-s-404{opacity:.6;}
.s-s-405{text-align:center;padding:20px;color:var(--gray-500);}
.s-s-406{width:100%;padding:10px;background:var(--gradient,var(--secondary));color:#fff;border:none;border-radius:6px;font-weight:600;cursor:pointer;margin-bottom:14px;}
.s-s-407{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px;}
.s-s-408{color:#fff;flex:1;}
.s-s-409{font-size:12px;color:var(--gray-500);margin-bottom:12px;}
.s-s-410{display:flex;gap:8px;}
.s-s-411{flex:1;padding:10px;background:transparent;border:1px solid var(--border);color:#cfd9df;border-radius:6px;cursor:pointer;font-family:inherit;font-size:13px;}
.s-s-412{flex:1;padding:10px;background:var(--gradient,var(--secondary));border:none;color:#fff;border-radius:6px;font-weight:600;cursor:pointer;font-family:inherit;font-size:13px;}
.s-s-413{color:var(--red-bright);margin-top:10px;font-size:13px;}
.s-s-414{font-size: 12px;color:var(--gray-500);margin-bottom:4px;}
.s-s-415{white-space:pre-wrap;color:#fff;}
.s-s-416{margin-top:10px;padding:10px;background:rgba(76,175,110,.1);border-radius:6px;}
.s-s-417{font-size:12px;color:#cfd9df;margin-bottom:6px;}
.s-s-418{background:transparent;border:1px solid var(--border);color:#fbbf24;font-size:18px;padding:4px 8px;margin-right:4px;border-radius:4px;cursor:pointer;}
.s-s-419{background:transparent;border:none;color:var(--gray-500);cursor:pointer;font-size:12px;margin-bottom:10px;}
.s-s-420{margin-bottom:14px;font-size:12px;}
.s-s-421{color:var(--gray-500);margin-top:6px;}
.s-s-422{background:rgba(2,13,21,.4);padding:10px 12px;border-radius:6px;margin-bottom:14px;white-space:pre-wrap;}
.s-s-423{font-size:12px;color:var(--gray-500);text-align:center;padding:10px;}
.s-s-424{text-align:center;padding:12px;color:var(--gray-500);font-size:12px;}
.s-s-425{margin-top:14px;border-top:1px solid var(--border);padding-top:14px;}
.s-s-426{min-height:80px;}
.s-s-427{display:inline-block;margin-top:6px;font-size: 12px;color:var(--gray-500);cursor:pointer;}
.s-s-428{display:block;margin-top:4px;font-size: 12px;color:#cfd9df;}
.s-s-429{display:flex;gap:8px;margin-top:6px;}
.s-s-430{padding:8px 14px;background:transparent;border:1px solid var(--border);color:var(--amber);border-radius:6px;cursor:pointer;}
.s-s-431{flex:1;padding:8px;background:var(--gradient,var(--secondary));border:none;color:#fff;border-radius:6px;font-weight:600;cursor:pointer;}
.s-s-432{background:var(--secondary);color:#fff;border:none;border-radius:4px;padding:4px 10px;font-size:12px;cursor:pointer;}
.s-s-433{background:var(--amber);color:#fff;border:none;border-radius:4px;padding:4px 10px;font-size:12px;cursor:pointer;}
#pageRecorders { display:none; flex:1; height:100%; overflow-y:auto; padding:20px 24px; }
#pageRecorders.active { display:block; }
.rec-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.rec-header h2 { font-size:20px; font-weight:700; color:var(--white); margin:0; }
.rec-sub { font-size:12px; color:var(--secondary); margin-top:4px; }
.rec-btn { background:var(--gradient); color:var(--white); border:none; padding:9px 16px; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.rec-btn:hover { opacity:.9; }
.rec-btn.ghost { background:transparent; border:1px solid var(--border); color:var(--light); }
.rec-btn.danger { background:rgba(220,38,38,.15); border:1px solid rgba(220,38,38,.35); color:#fca5a5; }
.rec-btn:disabled { opacity:.45; cursor:not-allowed; }
.rec-table { width:100%; border-collapse:collapse; font-size:13px; background:rgba(17,87,123,.35); border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.rec-table th { text-align:left; padding:11px 14px; font-size:11px; font-weight:600; color:var(--secondary); text-transform:uppercase; letter-spacing:.08em; border-bottom:1px solid var(--border); background:rgba(2,13,21,.35); }
.rec-table td { padding:12px 14px; border-bottom:1px solid rgba(92,138,158,.18); color:var(--light); vertical-align:middle; }
.rec-table tr:last-child td { border-bottom:none; }
.rec-table tr:hover td { background:rgba(92,138,158,.12); }
.rec-badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600; letter-spacing:.04em; }
.rec-badge.on { background:rgba(34,197,94,.18); color:#86efac; }
.rec-badge.off { background:rgba(107,114,128,.2); color:#9ca3af; }
.rec-detail { background:rgba(2,13,21,.4); border-top:1px solid var(--border); padding:14px 16px; }
.rec-children { width:100%; border-collapse:collapse; font-size:12px; }
.rec-children th { text-align:left; padding:6px 10px; font-size: 11px; font-weight:600; color:var(--secondary); text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid var(--border); }
.rec-children td { padding:6px 10px; border-bottom:1px solid rgba(92,138,158,.12); color:var(--light); }
.rec-children tr:last-child td { border-bottom:none; }
.rec-empty { padding:40px 0; text-align:center; color:var(--secondary); font-size:13px; }
.rec-loading { padding:40px 0; text-align:center; color:var(--secondary); font-size:13px; }
.rec-inline-msg { margin-top:10px; padding:9px 12px; border-radius:6px; font-size:12px; }
.rec-inline-msg.ok { background:rgba(34,197,94,.12); color:#86efac; border:1px solid rgba(34,197,94,.3); }
.rec-inline-msg.err { background:rgba(220,38,38,.12); color:#fca5a5; border:1px solid rgba(220,38,38,.3); }
.rec-actions { display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap; }
.health-kpi{background:var(--primary);border:1px solid var(--border);border-radius:8px;padding:12px 18px;min-width:120px;text-align:center;}
.health-kpi .hk-val{font-size:22px;font-weight:700;color:var(--white);}
.health-kpi .hk-lbl{font-size: 12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:2px;}
.health-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;}
.health-tbl th{text-align:left;padding:8px 12px;color:var(--muted);font-size: 12px;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--border);}
.health-tbl td{padding:10px 12px;border-bottom:1px solid rgba(26,48,64,.5);color:var(--text);}
.health-tbl tr:hover td{background:rgba(92,138,158,.12);}
.health-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle;}
.health-dot.on{background:var(--green-light);box-shadow:0 0 6px rgba(34,197,94,.5);}
.health-dot.off{background:var(--red-light);box-shadow:0 0 6px rgba(239,68,68,.5);}
.health-dot.err{background:var(--amber);box-shadow:0 0 6px rgba(245,158,11,.5);}
.health-uptime{font-weight:600;}
.health-uptime.good{color:var(--green-light);}
.health-uptime.bad{color:var(--red-light);}
.health-uptime.warn{color:var(--amber);}
.ai-badge {
position: absolute; top: 8px; left: 8px;
background: rgba(16,185,129,.15);
border: 1px solid rgba(16,185,129,.6);
border-radius: 4px; padding: 2px 7px;
font-size: 11px; font-weight: 700; letter-spacing: .1em;
text-transform: uppercase; color: var(--emerald);
animation: ai-pulse 2s ease-in-out infinite;
z-index: 5;
}
@keyframes ai-pulse {
0%,100% { opacity: 1; }
50% { opacity: .5; }
}
.det-result-bar {
width: 100%;
padding: 3px 0 0;
font-size: 12px; color: var(--emerald);
display: flex; gap: 4px; flex-wrap: wrap;
}
#fsAiBtn {
padding: 6px 12px; border-radius: 6px; border: 1px solid var(--border);
background: rgba(17,87,123,.6); color: #e2eaf0; font-size: 12px;
font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px;
transition: background .15s;
}
#fsAiBtn:hover { background: rgba(92,138,158,.5); }
#fsAiBtn.active { background: rgba(16,185,129,.2); border-color: rgba(16,185,129,.6); color: var(--emerald); }
#fsDetPanel {
border-top: 1px solid var(--border);
background: rgba(2,13,21,.9);
padding: 10px 16px;
max-height: 160px; overflow-y: auto;
font-size: 12px;
}
/* ── Zone editor ─────────────────────────────────────────────────── */
#fsZoneBtn {
padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border);
background: rgba(17,87,123,.6); color: var(--white); font-size: 12px;
font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px;
transition: background .15s;
}
#fsZoneBtn:hover { background: rgba(92,138,158,.5); }
#fsZoneBtn.active { background: rgba(233,168,37,.2); border-color: rgba(233,168,37,.6); color: #e9a825; }
#fsZonePanel {
position: absolute; top: 8px; right: 8px; z-index: 20;
background: rgba(2,13,21,.92); border: 1px solid var(--border);
border-radius: 8px; padding: 12px; min-width: 220px; max-width: 280px;
display: none; font-size: 12px;
}
#fsZonePanel h4 { font-size: 12px; color: var(--gray-200); margin: 0 0 8px; font-weight: 600;
text-transform: uppercase; letter-spacing: .06em; }
.zone-list-item {
display: flex; align-items: center; gap: 6px; padding: 4px 0;
border-bottom: 1px solid rgba(92,138,158,.2);
}
.zone-list-item .zone-color { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.zone-list-item .zone-name { flex: 1; color: #c0d0d8; font-size: 12px; }
.zone-list-item .zone-type { font-size: 12px; color: var(--gray-500); text-transform: uppercase; letter-spacing: .04em; }
.zone-list-item button { background: none; border: none; color: var(--gray-500); cursor: pointer; font-size: 14px; padding: 0 2px; }
.zone-list-item button:hover { color: #ff6b6b; }
#fsZoneAdd {
margin-top: 8px; padding: 4px 8px; border-radius: 4px; font-size: 12px;
background: rgba(16,185,129,.15); border: 1px solid rgba(16,185,129,.3);
color: var(--emerald); cursor: pointer; width: 100%;
}
#fsZoneAdd:hover { background: rgba(16,185,129,.25); }
.zone-form { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.zone-form input, .zone-form select {
padding: 4px 8px; border-radius: 4px; border: 1px solid var(--border);
background: rgba(17,87,123,.6); color: var(--gray-200); font-size: 12px;
}
.zone-form .zone-form-actions { display: flex; gap: 6px; }
.zone-form .zone-form-actions button {
flex: 1; padding: 4px 8px; border-radius: 4px; font-size: 12px; cursor: pointer;
border: 1px solid var(--border);
}
.zone-form .btn-save { background: rgba(16,185,129,.2); color: var(--emerald); border-color: rgba(16,185,129,.3); }
.zone-form .btn-cancel { background: rgba(255,107,107,.1); color: #ff6b6b; border-color: rgba(255,107,107,.3); }
/* ── Events Page ────────────────────────────────────────────────────── */
#pageEvents {
display: none;
flex-direction: column;
height: 100%;
overflow: hidden;
}
#pageEvents.active { display: flex; }
.evt-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px 16px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.evt-header select {
background: var(--primary);
border: 1px solid var(--border);
color: var(--light);
padding: 6px 10px;
border-radius: 6px;
font-size: 13px;
cursor: pointer;
outline: none;
}
.events-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 12px;
padding: 20px 24px;
overflow-y: auto;
flex: 1;
}
.det-card {
background: rgba(17,87,123,.45);
border: 1px solid var(--border);
border-radius: 6px;
overflow: hidden;
transition: border-color .15s;
}
.det-card:hover { border-color: var(--secondary); }
.det-thumb-wrap {
width: 100%;
aspect-ratio: 4/3;
background: var(--deep);
overflow: hidden;
}
.det-thumb {
width: 100%; height: 100%;
object-fit: cover; display: block;
}
.det-thumb-ph {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
color: var(--secondary); opacity: .4;
}
.det-thumb-ph svg { width: 24px; height: 24px; fill: currentColor; }
.det-card-meta {
padding: 6px 8px;
display: flex; flex-direction: column; gap: 2px;
}
.det-labels { display: flex; flex-wrap: wrap; gap: 3px; }
.det-label {
background: rgba(16,185,129,.15);
border: 1px solid rgba(16,185,129,.3);
border-radius: 3px;
padding: 1px 5px;
font-size: 12px; color: var(--emerald); font-weight: 500;
}
.det-cam-name { font-size: 12px; color: var(--light); }
.det-ts { font-size: 12px; color: var(--secondary); }
.evt-loading {
grid-column: 1/-1;
text-align: center; padding: 48px;
color: var(--secondary); font-size: 13px;
}
.btn-load-more {
background: rgba(92,138,158,.3);
border: 1px solid var(--border);
color: var(--light);
padding: 8px 28px; border-radius: 6px;
cursor: pointer; font-size: 13px;
transition: background .15s;
}
.btn-load-more:hover { background: rgba(92,138,158,.55); }
/* Compact mode for "Todas" mixed view */
.evt-compact .evt-compact-row {
display: flex; flex-direction: row; gap: 0; cursor: pointer;
transition: background .1s; height: 100%;
}
.evt-compact .evt-compact-row:hover { background: rgba(92,138,158,.2); }
.evt-compact .evt-compact-thumb {
width: 90px; min-width: 90px; height: 64px;
object-fit: cover; border-radius: 8px 0 0 8px; flex-shrink: 0;
cursor: pointer;
}
.evt-compact .evt-compact-body {
flex: 1; min-width: 0; padding: 6px 10px;
display: flex; flex-direction: column; justify-content: center; gap: 2px;
}
/* ═══ MAP PAGE ══════════════════════════════════════════════ */
#pageMap {
display: none;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
#pageMap.active { display: flex; flex-direction: column; }
#mapToolbar {
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
display: flex;
align-items: center;
gap: 8px;
background: rgba(17,87,123,.92);
border: 1px solid rgba(92,138,158,.5);
border-radius: 10px;
padding: 6px 10px;
-webkit-backdrop-filter: blur(6px);backdrop-filter: blur(6px);
box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
.map-tool-group { display: flex; gap: 4px; align-items: center; }
.map-tool-group + .map-tool-group {
border-left: 1px solid rgba(92,138,158,.4);
padding-left: 8px; margin-left: 4px;
}
.map-tool-btn {
display: flex; align-items: center; gap: 5px;
padding: 5px 10px; border-radius: 6px; border: none;
background: transparent; color: rgba(255,255,255,.7);
cursor: pointer; font-size: 12px; font-weight: 500; transition: all .15s;
}
.map-tool-btn svg { width: 14px; height: 14px; fill: currentColor; }
.map-tool-btn:hover { background: rgba(92,138,158,.4); color: #fff; }
.map-tool-btn.active { background: var(--secondary,var(--secondary)); color: #fff; }
.map-weather {
display: flex; align-items: center; gap: 6px;
font-size: 13px; color: rgba(255,255,255,.85);
padding-left: 8px; border-left: 1px solid rgba(92,138,158,.4); margin-left: 4px;
}
.wind-arrow-marker { font-size: 18px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); text-align: center; line-height: 24px; opacity: .85; }
.windy-modal { background: var(--primary); border: 1px solid var(--border); border-radius: 12px; padding: 0; width: 90vw; max-width: 900px; height: 70vh; max-height: 600px; overflow: hidden; display: flex; flex-direction: column; }
.windy-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.windy-modal-header h2 { font-family: "Red Rose", serif; font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; margin: 0; }
.windy-modal-close { background: none; border: none; color: var(--light); font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 4px; }
.windy-modal-close:hover { background: rgba(92,138,158,.3); color: #fff; }
.windy-modal iframe { flex: 1; border: none; width: 100%; }
#mapContainer { position: absolute; inset: 0; z-index: 1; }
.leaflet-container { background: #1a2332; }
/* --- Layers panel --- */
.map-layers-wrapper { position: relative; }
.map-layers-panel {
display: none; position: absolute; top: 38px; right: 0; z-index: 1100;
background: rgba(17,87,123,.96); border: 1px solid rgba(92,138,158,.5);
border-radius: 10px; padding: 10px 12px; min-width: 200px;
-webkit-backdrop-filter: blur(8px);backdrop-filter: blur(8px); box-shadow: 0 6px 24px rgba(0,0,0,.5);
}
.map-layers-panel.open { display: block; }
.map-layers-title {
font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
color: rgba(255,255,255,.45); margin: 0 0 6px; font-weight: 600;
}
.map-layers-title:not(:first-child) { margin-top: 10px; border-top: 1px solid rgba(92,138,158,.3); padding-top: 8px; }
.map-layers-item {
display: flex; align-items: center; gap: 8px; padding: 4px 0;
font-size: 12px; color: rgba(255,255,255,.8); cursor: pointer; -webkit-user-select:none; user-select:none;
}
.map-layers-item:hover { color: #fff; }
.map-layers-item input { accent-color: var(--secondary); cursor: pointer; margin: 0; }
.map-layers-item input[type="radio"] { accent-color: #8ab4c0; }
/* --- Map legends --- */
#mapLegends {
position: absolute; bottom: 55px; left: 12px; z-index: 1000;
display: flex; flex-direction: column; gap: 6px;
max-height: calc(100vh - 160px); overflow-y: auto;
pointer-events: auto;
}
#mapLegends:empty { display: none; }
/* Contour lines — blue + thicker via drop-shadow */
.contour-blue img {
filter: hue-rotate(185deg) saturate(1.8) brightness(1.1)
drop-shadow(0 0 1px rgba(25,118,210,.9))
drop-shadow(0 0 1px rgba(25,118,210,.7));
}
.map-legend-card {
background: rgba(17,87,123,.92); border: 1px solid rgba(92,138,158,.5);
border-radius: 8px; padding: 6px 10px; -webkit-backdrop-filter: blur(6px);backdrop-filter: blur(6px);
box-shadow: 0 2px 12px rgba(0,0,0,.35); max-width: 220px;
}
.map-legend-title {
font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
color: rgba(255,255,255,.5); font-weight: 600; margin: 0 0 4px;
}
.map-legend-card img { max-width: 200px; display: block; border-radius: 3px; }
.map-legend-row {
display: flex; align-items: center; gap: 6px; padding: 2px 0;
font-size: 12px; color: rgba(255,255,255,.75);
}
.map-legend-swatch {
width: 14px; height: 10px; border-radius: 2px; flex-shrink: 0;
border: 1px solid rgba(255,255,255,.15);
}
#mapSidebar {
position: absolute; top: 68px; right: 12px; z-index: 1000;
width: 260px;
background: rgba(17,87,123,.92); border: 1px solid rgba(92,138,158,.5);
border-radius: 10px; -webkit-backdrop-filter: blur(6px);backdrop-filter: blur(6px);
box-shadow: 0 4px 20px rgba(0,0,0,.4);
max-height: calc(100vh - 120px); display: flex; flex-direction: column;
}
.map-sidebar-header {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 12px; border-bottom: 1px solid rgba(92,138,158,.4);
font-size: 12px; font-weight: 600; color: rgba(255,255,255,.7);
text-transform: uppercase; letter-spacing: .06em;
}
.map-sidebar-header button {
width: 22px; height: 22px; border-radius: 50%;
border: 1px solid rgba(92,138,158,.6); background: transparent;
color: #fff; cursor: pointer; font-size: 16px; line-height: 1;
display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.map-sidebar-header button:hover { background: rgba(92,138,158,.5); }
#mapRefList { flex: 1; overflow-y: auto; padding: 6px; }
.map-ref-item {
display: flex; align-items: center; gap: 6px;
padding: 7px 8px; border-radius: 6px; margin-bottom: 3px;
font-size: 12px; color: rgba(255,255,255,.85);
background: rgba(92,138,158,.15); cursor: pointer;
}
.map-ref-item:hover { background: rgba(92,138,158,.3); }
.map-ref-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.map-ref-dot.ok { background: #4caf50; }
.map-ref-dot.error { background: #e55; }
.map-ref-dot.pending { background: #ffa726; }
.map-ref-name { flex: 1; min-width: 0; }
.map-ref-rc { font-size: 12px; opacity: .6; }
.map-ref-del {
background: none; border: none; cursor: pointer;
color: rgba(255,255,255,.3); font-size: 14px; line-height: 1;
padding: 2px 4px; border-radius: 4px; transition: color .15s;
}
.map-ref-del:hover { color: #e55; }
.map-search-tooltip { background: rgba(33,150,243,.85) !important; border: none !important; color: #fff !important; font-size: 11px !important; font-weight: 600; padding: 2px 8px !important; border-radius: 4px; }
.map-parcel-tooltip { background: rgba(17,87,123,.85) !important; border: none !important; color: #fff !important; font-size: 11px !important; font-weight: 600; padding: 2px 8px !important; border-radius: 4px; }
.cam-in-finca { filter: drop-shadow(0 0 6px rgba(17,87,123,.9)) drop-shadow(0 0 12px rgba(92,138,158,.5)); }
.cam-outside-finca { filter: drop-shadow(0 0 5px rgba(245,158,11,.7)) drop-shadow(0 0 10px rgba(245,158,11,.35)); }
.finca-badge-in { font-size: 11px;padding:1px 6px;border-radius:99px;background:rgba(16,185,129,.15);color:var(--emerald);font-weight:600; }
.finca-badge-out { font-size: 11px;padding:1px 6px;border-radius:99px;background:rgba(239,68,68,.15);color:var(--red-light);font-weight:600; }
.finca-badge-unknown { font-size: 12px;padding:1px 6px;border-radius:99px;background:rgba(122,155,170,.15);color:var(--gray-500);font-weight:500; }
.flt-finca-active { background:rgba(17,87,123,.6) !important; color:#fff !important; border-color:var(--secondary) !important; }
.map-det-dot { border-radius:50%;border:2px solid #fff;width:10px;height:10px;box-shadow:0 0 6px rgba(0,0,0,.4); }
.map-ref-loading, .map-ref-empty {
padding: 12px 8px; font-size: 12px; color: rgba(255,255,255,.4); text-align: center;
}
/* Finca group styles */
.map-finca-group { margin-bottom: 4px; }
.map-finca-header {
display: flex; align-items: center; gap: 6px;
padding: 7px 8px; border-radius: 6px; margin-bottom: 2px;
font-size: 12px; font-weight: 600; color: rgba(255,255,255,.95);
background: rgba(17,87,123,.5); cursor: pointer; -webkit-user-select:none; user-select:none;
}
.map-finca-header:hover { background: rgba(17,87,123,.7); }
.map-finca-toggle { font-size: 12px; width: 14px; text-align: center; opacity: .6; flex-shrink: 0; }
.map-finca-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-finca-count { font-size: 12px; opacity: .5; flex-shrink: 0; }
.map-finca-act-btn {
background: none; border: 1px solid rgba(92,138,158,.4); cursor: pointer;
color: rgba(255,255,255,.5); font-size: 12px; line-height: 1;
width: 20px; height: 20px; border-radius: 3px; transition: all .15s;
display: flex; align-items: center; justify-content: center;
}
.map-finca-act-btn:hover { color: #fff; background: rgba(92,138,158,.5); border-color: rgba(92,138,158,.8); }
.map-finca-del {
background: none; border: none; cursor: pointer;
color: rgba(255,255,255,.25); font-size: 13px; line-height: 1;
padding: 2px 4px; border-radius: 4px; transition: color .15s; flex-shrink: 0;
}
.map-finca-del:hover { color: #e55; }
.map-finca-children { padding-left: 12px; }
.map-finca-children .map-ref-item { font-size: 12px; padding: 5px 6px; opacity: .85; }
.map-section-label {
padding: 8px 8px 4px; font-size: 11px; font-weight: 600;
color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: .06em;
}
/* Save as finca bar */
#mapSaveFincaBar {
display: none; padding: 8px; border-top: 1px solid rgba(92,138,158,.4);
background: rgba(17,87,123,.6);
}
#mapSaveFincaBar input {
width: 100%; padding: 5px 8px; font-size: 12px; border-radius: 4px;
border: 1px solid rgba(92,138,158,.5); background: rgba(0,0,0,.3);
color: #fff; margin-bottom: 6px; box-sizing: border-box;
}
#mapSaveFincaBar .map-finca-btns { display: flex; gap: 6px; }
#mapSaveFincaBar .map-finca-btns button {
flex: 1; padding: 5px 8px; font-size: 12px; border-radius: 4px;
border: 1px solid rgba(92,138,158,.5); cursor: pointer; font-weight: 600;
}
#btnSaveFinca { background: var(--primary); color: #fff; }
#btnSaveFinca:hover { background: var(--secondary); }
#btnCancelFinca { background: transparent; color: rgba(255,255,255,.7); }
#btnCancelFinca:hover { background: rgba(92,138,158,.3); }
/* Map toast notification */
.map-toast {
position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%);
z-index: 1200; padding: 8px 18px; border-radius: 6px;
font-size: 12px; font-weight: 600; color: #fff;
-webkit-backdrop-filter: blur(6px);backdrop-filter: blur(6px); box-shadow: 0 4px 16px rgba(0,0,0,.4);
animation: mapToastIn .25s ease-out;
pointer-events: none; white-space: nowrap; max-width: 90%;
overflow: hidden; text-overflow: ellipsis;
}
.map-toast.ok { background: rgba(34,197,94,.9); }
.map-toast.err { background: rgba(239,68,68,.9); }
.map-toast.warn { background: rgba(245,158,11,.9); color: #1a1a1a; }
.map-toast.info { background: rgba(17,87,123,.95); border: 1px solid rgba(92,138,158,.6); }
@keyframes mapToastIn { from { opacity:0; transform:translateX(-50%) translateY(10px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
/* Inline rename input inside finca header */
.map-finca-rename-input {
flex: 1; min-width: 0; padding: 2px 6px; font-size: 12px; font-weight: 600;
background: rgba(0,0,0,.4); color: #fff; border: 1px solid #e88c1a;
border-radius: 3px; outline: none;
}
/* Inline confirm bar */
.map-inline-confirm {
display: flex; align-items: center; gap: 6px; padding: 6px 8px;
background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.3);
border-radius: 6px; margin-bottom: 3px; font-size: 12px; color: rgba(255,255,255,.85);
animation: mapToastIn .2s ease-out;
}
.map-inline-confirm span { flex: 1; }
.map-inline-confirm button {
padding: 3px 10px; font-size: 11px; font-weight: 600; border-radius: 4px;
border: none; cursor: pointer;
}
.map-inline-confirm .confirm-yes { background: #e55; color: #fff; }
.map-inline-confirm .confirm-yes:hover { background: #d33; }
.map-inline-confirm .confirm-no { background: rgba(92,138,158,.5); color: #fff; }
.map-inline-confirm .confirm-no:hover { background: rgba(92,138,158,.8); }
/* Finca header hover highlight on map */
.map-finca-header.highlight { background: rgba(232,140,26,.25); border: 1px solid rgba(232,140,26,.4); margin: -1px; }
#mapAddRefForm { padding: 8px; border-top: 1px solid rgba(92,138,158,.4); }
#mapAddRefForm input {
width: 100%; box-sizing: border-box; padding: 6px 8px;
background: rgba(0,0,0,.3); border: 1px solid rgba(92,138,158,.5);
border-radius: 5px; color: #fff; font-size: 12px; margin-bottom: 5px; outline: none;
}
#mapAddRefForm input:focus { border-color: var(--secondary,var(--secondary)); }
.map-btn-primary {
flex: 1; padding: 5px 0; background: var(--secondary,var(--secondary));
border: none; border-radius: 5px; color: #fff; font-size: 12px; cursor: pointer;
}
.map-btn-primary:hover { background: #4a7a8a; }
.map-btn-secondary {
flex: 1; padding: 5px 0; background: transparent;
border: 1px solid rgba(92,138,158,.5); border-radius: 5px;
color: rgba(255,255,255,.6); font-size: 12px; cursor: pointer;
}
.map-btn-secondary:hover { background: rgba(92,138,158,.2); color: #fff; }
/* Leaflet popup for camera markers */
.map-cam-popup .leaflet-popup-content-wrapper {
background: rgba(17,87,123,.96); border: 1px solid rgba(92,138,158,.6);
border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,.5);
-webkit-backdrop-filter: blur(8px);backdrop-filter: blur(8px); color: #fff;
}
.map-cam-popup .leaflet-popup-tip { background: rgba(17,87,123,.96); }
.map-cam-popup .leaflet-popup-content { margin: 10px 12px; min-width: 200px; }
.map-cam-popup .leaflet-popup-close-button { color: rgba(255,255,255,.5); font-size: 18px; }
.map-cam-popup .leaflet-popup-close-button:hover { color: #fff; }
.mcp-thumb {
width: 100%; height: 110px; object-fit: cover; border-radius: 6px;
background: rgba(0,0,0,.3); margin-bottom: 8px; display: block;
}
.mcp-name { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 4px; }
.mcp-status {
display: inline-flex; align-items: center; gap: 4px;
font-size: 12px; padding: 2px 8px; border-radius: 20px; margin-bottom: 10px;
}
.mcp-status.online { background: rgba(76,175,80,.2); color: #4caf50; }
.mcp-status.offline { background: rgba(100,100,100,.2); color: #999; }
.mcp-status.error { background: rgba(229,85,85,.2); color: #e55; }
.mcp-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.mcp-btn {
flex: 1; min-width: 0; padding: 5px 4px; border-radius: 5px; border: 1px solid rgba(92,138,158,.5);
background: rgba(92,138,158,.2); color: rgba(255,255,255,.85);
cursor: pointer; font-size: 12px; font-weight: 500; text-align: center; transition: all .15s;
white-space: nowrap;
}
.mcp-btn:hover { background: rgba(92,138,158,.5); color: #fff; }
/* Map legend */
#mapLegend {
position: absolute; bottom: 16px; left: 12px; z-index: 1000;
background: rgba(17,87,123,.88); border: 1px solid rgba(92,138,158,.4);
border-radius: 8px; padding: 8px 12px; -webkit-backdrop-filter: blur(6px);backdrop-filter: blur(6px);
display: flex; gap: 12px; align-items: center; font-size: 12px; color: rgba(255,255,255,.75);
}
.map-legend-item { display: flex; align-items: center; gap: 5px; }
.map-legend-dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.4); }
.map-legend-dot.on { background: var(--green-light); }
.map-legend-dot.off { background: var(--red-light); }
/* Pulse animation for online markers */
@keyframes camPulse {
0% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); }
70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.cam-marker-ok { animation: camPulse 2.5s ease-out infinite; border-radius: 50%; }
@media(max-width:1400px){#evtTimeline{grid-template-columns:repeat(4,1fr) !important;}} @media(max-width:1100px){#evtTimeline{grid-template-columns:repeat(3,1fr) !important;}} @media(max-width:800px){#evtTimeline{grid-template-columns:repeat(2,1fr) !important;}} @media(max-width:500px){#evtTimeline{grid-template-columns:1fr !important;}}
#pageAlerts { display:none; } #pageAlerts.active { display:flex; }
#pageArming { display:none; } #pageArming.active { display:block; }
#pageReports { display:none; } #pageReports.active { display:block; }
/* ══ ANALYTICS PAGE ══════════════════════════════════════════════════════ */#pageAnalytics { display: none; flex-direction: column; height: 100%; overflow: hidden;}#pageAnalytics.active { display: flex; }.analytics-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0;}.analytics-header select { background: var(--primary); border: 1px solid var(--border); color: var(--light); padding: 6px 10px; border-radius: 6px; font-size: 13px; cursor: pointer; outline: none;}.analytics-body { flex: 1; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 24px;}.an-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;}.an-kpi { background: rgba(17,87,123,.55); border: 1px solid var(--border); border-radius: 8px; padding: 16px 18px;}.an-kpi .val { font-size: 28px; font-weight: 700; color: var(--white); line-height: 1; }.an-kpi .lbl { font-size: 11px; color: var(--light); text-transform: uppercase; letter-spacing: .08em; margin-top: 5px; }.an-section { display: flex; flex-direction: column; gap: 10px; }.an-section-title { font-size: 13px; font-weight: 600; color: var(--light); text-transform: uppercase; letter-spacing: .08em; }.an-table { width: 100%; border-collapse: collapse; font-size: 13px; }.an-table th { text-align: left; padding: 7px 10px; font-size: 11px; font-weight: 600; color: var(--secondary); text-transform: uppercase; letter-spacing: .08em; border-bottom: 1px solid var(--border); }.an-table td { padding: 8px 10px; border-bottom: 1px solid rgba(92,138,158,.15); color: var(--light); }.an-table tr:last-child td { border-bottom: none; }.an-table tr:hover td { background: rgba(92,138,158,.12); }.an-bar-wrap { display: flex; align-items: center; gap: 8px; }.an-bar-bg { flex: 1; height: 6px; background: rgba(92,138,158,.25); border-radius: 3px; overflow: hidden; min-width: 60px; }.an-bar-fill { height: 100%; background: var(--gradient); border-radius: 3px; transition: width .3s; }.an-bar-pct { font-size: 11px; color: var(--secondary); min-width: 38px; text-align: right; }.an-empty { padding: 28px 0; text-align: center; color: var(--secondary); font-size: 13px; }.an-loading { padding: 28px 0; text-align: center; color: var(--secondary); font-size: 13px; }.an-error { padding: 14px; background: rgba(220,38,38,.1); border: 1px solid rgba(220,38,38,.3); border-radius: 6px; color: var(--red); font-size: 13px; }
.an-cam-row { display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:4px; font-size:13px; }
.an-cam-row:hover { background:rgba(92,138,158,.12); }
.an-cam-name { min-width:80px; max-width:140px; color:var(--white); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.an-cam-count { min-width:45px; text-align:right; color:var(--light); font-weight:600; font-size:12px; }
.an-hour-chart { display:flex; align-items:flex-end; gap:2px; height:120px; padding:8px 0; }
.an-hour-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; height:100%; }
.an-hour-bar-wrap { flex:1; width:100%; display:flex; align-items:flex-end; }
.an-hour-bar { width:100%; background:var(--gradient); border-radius:2px 2px 0 0; min-height:2px; transition:height .3s; }
.an-hour-label { font-size: 12px; color:var(--gray-500); }
@media(max-width:1200px){ #anContent > div:nth-child(2) { grid-template-columns:1fr 1fr !important; } .an-kpis { grid-template-columns:repeat(3,1fr) !important; } }
@media(max-width:800px){ #anContent > div:nth-child(2) { grid-template-columns:1fr !important; } .an-kpis { grid-template-columns:repeat(2,1fr) !important; } }
#pageBilling{display:none;flex-direction:column;height:100%;overflow:hidden;}#pageBilling.active{display:flex;}
#pageOverview{display:none;flex-direction:column;height:100%;overflow:hidden;}#pageOverview.active{display:flex;}
#pageAlarms{display:none;flex-direction:column;height:100%;overflow:hidden;}#pageAlarms.active{display:flex;}
#pageAvisos{display:none;flex-direction:column;height:100%;overflow:hidden;}#pageAvisos.active{display:flex;}
#pageMission{display:none;flex-direction:column;height:100%;overflow:hidden;}#pageMission.active{display:flex;}
#pageHealth{display:none;}#pageHealth.active{display:block;}
/* ══ SENSORES PAGE ══════════════════════════════════════════════════════ */
#pageSensores { display:none; }
#pageSensores.active { display:block; }
/* ══ LPR V1 — Bloque 6 ════════════════════════════════════════════════════ */
#pageLPR { display:none; flex-direction:column; height:100%; overflow:hidden; }
#pageLPR.active { display:flex; }
/* ══ FOTOTRAMPEO PAGE ════════════════════════════════════════════════════ */
#pageFototrampeo { display:none; flex-direction:column; height:100%; overflow:hidden; }
#pageFototrampeo.active { display:flex; }
.ft-header { display:flex; align-items:center; justify-content:space-between; padding:20px 24px 16px; border-bottom:1px solid var(--border); flex-shrink:0; }
.ft-title { font-size:15px; font-weight:600; color:var(--white); }
.ft-subtabs { display:flex; gap:4px; }
.ft-subtab { background:transparent; color:var(--light); border:1px solid var(--border); padding:6px 14px; border-radius:6px; font-size:13px; cursor:pointer; font-family:inherit; transition:all .15s; }
.ft-subtab.active { background:var(--gradient); color:var(--white); border-color:transparent; }
.ft-subsubtab { background:transparent; color:var(--light); border:1px solid var(--border); padding:5px 12px; border-radius:5px; font-size:12px; cursor:pointer; font-family:inherit; transition:all .15s; margin-right:4px; }
.ft-subsubtab.active { background:rgba(92,138,158,.35); color:var(--white); border-color:var(--secondary); }
.ft-badge { display:inline-block; min-width:18px; padding:1px 6px; margin-left:6px; border-radius:9px; background:var(--red); color:#fff; font-size:11px; font-weight:600; line-height:16px; text-align:center; }
.ft-body { flex:1; overflow:hidden; position:relative; }
.ft-view { display:none; height:100%; overflow:hidden; }
.ft-view.active { display:flex; flex-direction:column; }
.ft-empty { padding:28px 0; text-align:center; color:var(--secondary); font-size:13px; }
.ft-error { padding:14px; background:rgba(220,38,38,.1); border:1px solid rgba(220,38,38,.3); border-radius:6px; color:var(--red-bright); font-size:13px; margin:16px; }
.ft-loading { padding:28px 0; text-align:center; color:var(--secondary); font-size:13px; }
.ft-dash-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:20px 24px; }
.ft-dash-card { background:rgba(17,87,123,.55); border:1px solid var(--border); border-radius:10px; padding:18px 20px; display:flex; flex-direction:column; gap:8px; }
.ft-dash-card-title { font-size:11px; font-weight:600; color:var(--secondary); text-transform:uppercase; letter-spacing:.08em; }
.ft-dash-stat { font-size:26px; font-weight:700; color:var(--white); line-height:1; }
.ft-dash-sub { font-size:12px; color:var(--light); }
.ft-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; flex-shrink:0; }
.ft-dot-green { background:var(--green-light); box-shadow:0 0 6px var(--green-light)88; }
.ft-dot-red { background:var(--red-light); box-shadow:0 0 6px var(--red-light)88; }
.ft-badge-warn { display:inline-flex; align-items:center; gap:4px; background:rgba(249,115,22,.15); border:1px solid rgba(249,115,22,.4); color:#fb923c; border-radius:4px; padding:2px 8px; font-size:12px; font-weight:600; }
.ft-q-layout { display:flex; flex:1; overflow:hidden; }
.ft-q-list { width:340px; flex-shrink:0; border-right:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden; }
.ft-q-filters { padding:12px 16px; border-bottom:1px solid var(--border); flex-shrink:0; display:flex; gap:6px; }
.ft-q-filter { background:transparent; color:var(--light); border:1px solid var(--border); padding:4px 10px; border-radius:5px; font-size:12px; cursor:pointer; font-family:inherit; }
.ft-q-filter.active { background:var(--gradient); color:var(--white); border-color:transparent; }
.ft-q-items { flex:1; overflow-y:auto; }
.ft-q-item { padding:12px 16px; border-bottom:1px solid rgba(92,138,158,.2); cursor:pointer; transition:background .1s; }
.ft-q-item:hover { background:rgba(92,138,158,.2); }
.ft-q-item.selected { background:rgba(92,138,158,.35); }
.ft-q-item-subject { font-size:13px; color:var(--white); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px; }
.ft-q-item-meta { font-size: 12px; color:var(--secondary); margin-top:3px; }
.ft-q-item-badge { display:inline-block; border-radius:3px; padding:1px 6px; font-size: 11px; font-weight:600; text-transform:uppercase; }
.ft-q-badge-pending { background:rgba(249,115,22,.2); color:#fb923c; }
.ft-q-badge-linked { background:rgba(34,197,94,.15); color:var(--green-bright); }
.ft-q-badge-discard { background:rgba(100,116,139,.2); color:var(--gray-400); }
.ft-q-loadmore { padding:12px; text-align:center; }
.ft-q-loadmore-btn { background:transparent; color:var(--secondary); border:1px solid var(--border); padding:6px 16px; border-radius:5px; font-size:12px; cursor:pointer; font-family:inherit; }
.ft-q-detail { flex:1; overflow-y:auto; padding:20px 24px; display:flex; flex-direction:column; gap:16px; }
.ft-q-detail-empty { flex:1; display:flex; align-items:center; justify-content:center; color:var(--secondary); font-size:13px; }
.ft-q-section-title { font-size:11px; font-weight:600; color:var(--secondary); text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; }
.ft-q-meta-grid { display:grid; grid-template-columns:120px 1fr; gap:4px 8px; font-size:13px; }
.ft-q-meta-label { color:var(--secondary); }
.ft-q-meta-value { color:var(--light); word-break:break-all; }
.ft-q-attachments { display:flex; flex-direction:column; gap:8px; }
.ft-q-att { display:flex; align-items:center; gap:10px; padding:8px 10px; background:rgba(17,87,123,.4); border:1px solid var(--border); border-radius:6px; }
.ft-q-att-thumb { width:48px; height:36px; object-fit:cover; border-radius:4px; background:rgba(92,138,158,.3); flex-shrink:0; }
.ft-q-att-name { flex:1; font-size:12px; color:var(--light); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ft-q-att-btn { background:transparent; color:var(--secondary); border:1px solid var(--border); padding:3px 8px; border-radius:4px; font-size: 12px; cursor:pointer; font-family:inherit; white-space:nowrap; }
.ft-q-att-btn:hover { color:var(--white); border-color:var(--secondary); }
.ft-q-actions { display:flex; gap:10px; padding-top:8px; border-top:1px solid var(--border); }
.ft-btn-link { flex:1; background:var(--gradient); color:var(--white); border:none; padding:10px; border-radius:7px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; }
.ft-btn-discard { flex:1; background:rgba(100,116,139,.15); color:var(--gray-400); border:1px solid rgba(100,116,139,.3); padding:10px; border-radius:7px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; }
.ft-btn-discard:hover { background:rgba(239,68,68,.15); color:var(--red-bright); border-color:rgba(239,68,68,.3); }
.ft-lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:9000; align-items:center; justify-content:center; }
.ft-lightbox.open { display:flex; }
.ft-lightbox-frame { position:relative; width:96vw; height:96vh; line-height:0; }
.ft-lightbox img { width:100%; height:100%; object-fit:contain; display:block; }
.ft-lightbox-close { position:absolute; top:20px; right:24px; background:none; border:none; color:#fff; font-size:28px; cursor:pointer; line-height:1; }
.ft-modal-bg { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:8000; align-items:center; justify-content:center; }
.ft-modal-bg.open { display:flex; }
.ft-modal { background:var(--primary); border:1px solid var(--border); border-radius:10px; width:420px; max-height:80vh; display:flex; flex-direction:column; }
.ft-modal-head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); }
.ft-modal-title { font-size:14px; font-weight:600; color:var(--white); }
.ft-modal-close { background:none; border:none; color:var(--secondary); font-size:20px; cursor:pointer; line-height:1; }
.ft-modal-body { padding:20px; flex:1; overflow-y:auto; }
.ft-modal-foot { padding:16px 20px; border-top:1px solid var(--border); display:flex; gap:8px; justify-content:flex-end; }
.ft-modal-cancel { background:transparent; color:var(--secondary); border:1px solid var(--border); padding:7px 16px; border-radius:6px; font-size:13px; cursor:pointer; font-family:inherit; }
.ft-modal-confirm { background:var(--gradient); color:var(--white); border:none; padding:7px 16px; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; }
.ft-select { width:100%; background:rgba(17,87,123,.8); border:1px solid var(--border); color:var(--white); padding:8px 10px; border-radius:6px; font-size:13px; font-family:inherit; outline:none; }
.ft-cfg-body { flex:1; overflow-y:auto; padding:20px 24px; display:flex; flex-direction:column; gap:24px; }
.ft-cfg-section { display:flex; flex-direction:column; gap:12px; }
.ft-cfg-section-head { display:flex; align-items:center; justify-content:space-between; }
.ft-cfg-section-title { font-size:13px; font-weight:600; color:var(--white); text-transform:uppercase; letter-spacing:.06em; }
.ft-cfg-table { width:100%; border-collapse:collapse; font-size:13px; }
.ft-cfg-table th { text-align:left; padding:7px 10px; font-size:11px; font-weight:600; color:var(--secondary); text-transform:uppercase; letter-spacing:.08em; border-bottom:1px solid var(--border); }
.ft-cfg-table td { padding:8px 10px; border-bottom:1px solid rgba(92,138,158,.15); color:var(--light); }
.ft-cfg-table tr:last-child td { border-bottom:none; }
.ft-cfg-imap { background:rgba(17,87,123,.55); border:1px solid var(--border); border-radius:8px; padding:16px 20px; display:flex; flex-direction:column; gap:10px; }
.ft-cfg-imap-row { display:flex; justify-content:space-between; align-items:center; font-size:13px; }
.ft-cfg-imap-label { color:var(--secondary); }
.ft-cfg-imap-value { color:var(--light); }
.ft-btn-sm { background:transparent; color:var(--secondary); border:1px solid var(--border); padding:5px 12px; border-radius:5px; font-size:12px; cursor:pointer; font-family:inherit; }
.ft-btn-sm:hover { color:var(--white); border-color:var(--secondary); }
.ft-btn-primary-sm { background:var(--gradient); color:var(--white); border:none; padding:5px 12px; border-radius:5px; font-size:12px; font-weight:600; cursor:pointer; font-family:inherit; }
.ft-det-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; padding:14px 16px; align-content:start; }
#ftViewDetections { overflow-y:auto; }
.ft-det-card { background:var(--card); border:1px solid var(--border); border-radius:8px; overflow:hidden; transition:border-color .15s; }
.ft-det-card:hover { border-color:var(--secondary); }
.ft-det-thumb { width:100%; aspect-ratio:4/3; object-fit:cover; background:#0a1a22; display:block; cursor:pointer; }
.ft-det-body { padding:8px 10px; }
.ft-det-labels { display:flex; flex-wrap:wrap; gap:3px; margin-bottom:6px; }
.ft-det-label { background:var(--gradient); color:#fff; font-size: 12px; padding:2px 5px; border-radius:3px; }
.ft-det-meta { font-size: 12px; color:var(--light); display:flex; flex-direction:column; gap:2px; }
.ft-det-battery { color:#66bb6a; }
.ft-det-more { display:block; margin:8px auto 16px; background:transparent; border:1px solid var(--border); color:var(--light); padding:7px 20px; border-radius:6px; font-size:12px; cursor:pointer; font-family:inherit; }
.ft-det-more:hover { border-color:var(--secondary); color:var(--white); }
.ft-input { width:100%; background:rgba(17,87,123,.8); border:1px solid var(--border); color:var(--white); padding:8px 10px; border-radius:6px; font-size:13px; font-family:inherit; outline:none; box-sizing:border-box; }
.ft-input:focus { border-color:var(--secondary); }
.ft-form-label { font-size:12px; color:var(--secondary); margin-bottom:5px; display:block; }
.lpr-header { display:flex; align-items:center; justify-content:space-between; padding:20px 24px 16px; border-bottom:1px solid var(--border); flex-shrink:0; }
.lpr-subtabs { display:flex; gap:4px; }
.lpr-subtab { background:transparent; color:var(--light); border:1px solid var(--border); padding:6px 14px; border-radius:6px; font-size:13px; cursor:pointer; font-family:inherit; }
.lpr-subtab.active { background:var(--gradient); color:var(--white); border-color:transparent; }
.lpr-body { flex:1; overflow-y:auto; overflow-x:hidden; padding:20px 24px; min-width:0; }
.lpr-view { width:100%; min-width:0; }
#lprCfgTable { table-layout:auto; }
#lprCfgTable td:first-child, #lprCfgTable th:first-child { max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lpr-view { display:none; }
.lpr-view.active { display:block; }
.lpr-table { width:100%; border-collapse:collapse; font-size:13px; }
.lpr-table th { text-align:left; padding:8px 10px; font-size:11px; font-weight:600; color:var(--secondary); text-transform:uppercase; letter-spacing:.08em; border-bottom:1px solid var(--border); }
.lpr-table td { padding:10px; border-bottom:1px solid rgba(92,138,158,.15); color:var(--light); }
.lpr-table tr:last-child td { border-bottom:none; }
.lpr-table tr:hover td { background:rgba(92,138,158,.12); }
.lpr-badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.lpr-badge-granted { background:rgba(16,185,129,.2); color:var(--emerald); }
.lpr-badge-denied { background:rgba(220,38,38,.2); color:var(--red); }
.lpr-badge-oh { background:rgba(233,168,37,.2); color:#e9a825; }
.lpr-badge-unknown { background:rgba(122,155,170,.2); color:var(--gray-500); }
.lpr-btn-view { background:transparent; border:1px solid var(--border); color:var(--light); padding:4px 10px; border-radius:4px; cursor:pointer; font-size:12px; font-family:inherit; }
.lpr-btn-view:hover { background:rgba(92,138,158,.2); color:var(--white); }
.lpr-pager { display:flex; align-items:center; justify-content:space-between; padding:14px 0 4px; gap:12px; }
.lpr-pager-info { color:var(--secondary); font-size:12px; }
.lpr-pager-ctrl { display:flex; align-items:center; gap:8px; }
.lpr-pager-ctrl button { background:transparent; border:1px solid var(--border); color:var(--light); padding:4px 10px; border-radius:4px; cursor:pointer; font-size:12px; font-family:inherit; }
.lpr-pager-ctrl button:disabled { opacity:.4; cursor:not-allowed; }
.lpr-pager-ctrl select { background:var(--primary); border:1px solid var(--border); color:var(--light); padding:4px 8px; border-radius:4px; font-size:12px; }
.lpr-filters { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:flex-end; padding:12px 14px; background:rgba(17,87,123,.55); border:1px solid var(--border); border-radius:8px; }
.lpr-filter { display:flex; flex-direction:column; gap:3px; }
.lpr-filter label { font-size: 12px; color:var(--secondary); text-transform:uppercase; letter-spacing:.08em; }
.lpr-filter input, .lpr-filter select { background:var(--primary); border:1px solid var(--border); color:var(--white); padding:5px 8px; border-radius:4px; font-size:12px; font-family:inherit; min-width:140px; }
.lpr-filter-decisions { display:flex; gap:10px; padding:4px 0; }
.lpr-filter-decisions label { display:flex; align-items:center; gap:4px; font-size:12px; color:var(--light); text-transform:none; letter-spacing:0; cursor:pointer; }
.lpr-filter-actions { display:flex; gap:6px; }
.lpr-filter-actions button { background:var(--gradient); color:var(--white); border:none; padding:6px 14px; border-radius:4px; cursor:pointer; font-size:12px; font-family:inherit; }
.lpr-filter-actions button.lpr-btn-clear { background:transparent; border:1px solid var(--border); color:var(--light); }
.lpr-modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:9999; display:none; align-items:center; justify-content:center; padding:40px; }
.lpr-modal-bg.open { display:flex; }
.lpr-modal { background:var(--primary); border:1px solid var(--border); border-radius:10px; max-width:900px; width:100%; max-height:calc(100vh - 80px); display:flex; flex-direction:column; }
.lpr-modal-head { padding:16px 20px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.lpr-modal-title { font-size:15px; font-weight:700; color:var(--white); }
.lpr-modal-close { background:transparent; border:none; color:var(--light); font-size:22px; cursor:pointer; padding:0 6px; }
.lpr-modal-body { padding:18px 20px; overflow-y:auto; flex:1; }
.lpr-modal-foot { padding:12px 20px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px; }
.lpr-modal-foot button { background:transparent; border:1px solid var(--border); color:var(--light); padding:6px 14px; border-radius:4px; cursor:pointer; font-size:13px; font-family:inherit; }
.lpr-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.lpr-detail-section { display:flex; flex-direction:column; gap:6px; }
.lpr-detail-section h4 { font-size:11px; font-weight:600; color:var(--secondary); text-transform:uppercase; letter-spacing:.08em; margin:0 0 4px; padding-bottom:4px; border-bottom:1px solid var(--border); }
.lpr-detail-row { display:flex; justify-content:space-between; gap:12px; font-size:12px; color:var(--light); }
.lpr-detail-row span:first-child { color:var(--secondary); }
.lpr-detail-row span:last-child { color:var(--white); font-family:monospace; text-align:right; word-break:break-all; }
@media(max-width:900px) { .lpr-detail-grid { grid-template-columns:1fr; } }
.lpr-cfg-switch { position:relative; display:inline-block; width:36px; height:20px; }
.lpr-cfg-switch input { opacity:0; width:0; height:0; }
.lpr-cfg-switch .slider { position:absolute; inset:0; background:rgba(92,138,158,.4); border-radius:20px; transition:.2s; cursor:pointer; }
.lpr-cfg-switch .slider:before { content:""; position:absolute; width:14px; height:14px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; }
.lpr-cfg-switch input:checked + .slider { background:var(--emerald); }
.lpr-cfg-switch input:checked + .slider:before { transform:translateX(16px); }
.lpr-cfg-switch input:disabled + .slider { opacity:.5; cursor:not-allowed; }
.lpr-cfg-skeleton { height:14px; background:rgba(122,155,170,.15); border-radius:3px; animation:lprPulse 1s infinite; }
@keyframes lprPulse { 0%,100% { opacity:.4; } 50% { opacity:.8; } }
.lpr-cfg-na { color:var(--secondary); font-style:italic; }
.lpr-cfg-form { display:flex; flex-direction:column; gap:14px; }
.lpr-cfg-field { display:flex; flex-direction:column; gap:4px; }
.lpr-cfg-field label { font-size: 12px; color:var(--secondary); text-transform:uppercase; letter-spacing:.08em; }
.lpr-cfg-field input[type=number], .lpr-cfg-field input[type=text], .lpr-cfg-field input[type=date], .lpr-cfg-field input[type=email], .lpr-cfg-field input:not([type]), .lpr-cfg-field select, .lpr-cfg-field textarea { background:var(--primary); border:1px solid var(--border); color:var(--white); padding:7px 10px; border-radius:4px; font-size:13px; font-family:inherit; }
.lpr-cfg-field input::placeholder, .lpr-cfg-field textarea::placeholder { color:var(--secondary); opacity:.7; }
.lpr-cfg-field select option { background:var(--primary); color:var(--white); }
.lpr-cfg-field-row { display:flex; align-items:center; gap:10px; }
.lpr-cfg-field-row span.val { color:var(--white); min-width:42px; text-align:right; font-family:monospace; font-size:12px; }
.lpr-cfg-save { background:var(--gradient); color:var(--white); border:none; padding:8px 18px; border-radius:4px; cursor:pointer; font-size:13px; font-family:inherit; }
.lpr-cfg-cancel { background:transparent; border:1px solid var(--border); color:var(--light); padding:8px 18px; border-radius:4px; cursor:pointer; font-size:13px; font-family:inherit; }
/* Bloque 7: Watchlists sub-vista */
.lpr-wl-layout { display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap:16px; align-items:start; }
@media (max-width: 900px) { .lpr-wl-layout { grid-template-columns: 1fr; } }
.lpr-wl-panel { background:rgba(17,87,123,.55); border:1px solid var(--border); border-radius:8px; padding:14px 16px; min-width:0; }
.lpr-wl-panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; gap:10px; }
.lpr-wl-panel-title { font-size:13px; font-weight:700; color:var(--white); letter-spacing:.04em; }
.lpr-wl-state { padding:24px 12px; text-align:center; color:var(--secondary); font-size:13px; }
.lpr-wl-state.error { color:var(--red); }
.lpr-wl-state .lpr-btn-retry { margin-top:10px; background:transparent; border:1px solid var(--border); color:var(--light); padding:6px 14px; border-radius:4px; cursor:pointer; font-size:12px; font-family:inherit; }
.lpr-wl-row-selected td { background:rgba(17,87,123,.55) !important; }
.lpr-wl-badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600; letter-spacing:.04em; }
.lpr-wl-badge-authorized { background:rgba(16,185,129,.18); color:var(--emerald); }
.lpr-wl-badge-blacklist { background:rgba(239,68,68,.18); color:var(--red); }
.lpr-wl-badge-visitors { background:rgba(59,130,246,.18); color:var(--blue); }
.lpr-wl-badge-other { background:rgba(122,155,170,.18); color:var(--light); }
.lpr-wl-mono { font-family:monospace; font-size:12px; color:var(--light); }
.lpr-wl-btn-primary { background:var(--gradient); color:var(--white); border:none; padding:6px 14px; border-radius:4px; cursor:pointer; font-size:12px; font-family:inherit; }
.lpr-wl-btn-ghost { background:transparent; border:1px solid var(--border); color:var(--light); padding:4px 10px; border-radius:4px; cursor:pointer; font-size:12px; font-family:inherit; }
.lpr-wl-btn-danger { background:transparent; border:1px solid rgba(239,68,68,.5); color:var(--red); padding:4px 10px; border-radius:4px; cursor:pointer; font-size:12px; font-family:inherit; }
.lpr-wl-row-highlight td { background:rgba(255,208,92,.22) !important; transition: background .4s ease; }
.lpr-thumb-box { width:200px; height:80px; background:rgba(17,87,123,.55); border:1px solid var(--border); border-radius:4px; display:flex; align-items:center; justify-content:center; overflow:hidden; cursor:pointer; position:relative; }
.lpr-thumb-box img { width:100%; height:100%; object-fit:cover; display:block; }
.lpr-thumb-skeleton { width:100%; height:100%; background:linear-gradient(90deg, rgba(122,155,170,.08), rgba(122,155,170,.18), rgba(122,155,170,.08)); background-size:200% 100%; animation:lprShimmer 1.4s infinite; }
.lpr-thumb-placeholder { color:var(--secondary); font-size: 12px; text-align:center; padding:0 8px; display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100%; }
.lpr-thumb-retry { margin-top:4px; background:transparent; border:1px solid var(--border); color:var(--light); padding:2px 8px; border-radius:3px; font-size: 12px; cursor:pointer; }
.lpr-img-viewer { position:fixed; inset:0; background:rgba(0,0,0,.85); display:none; align-items:center; justify-content:center; z-index:9999; cursor:zoom-out; }
.lpr-img-viewer.open { display:flex; }
.lpr-img-viewer img { max-width:90vw; max-height:80vh; object-fit:contain; }
@keyframes lprShimmer { 0% { background-position:100% 0; } 100% { background-position:-100% 0; } }
.lpr-why { background:rgba(17,87,123,.55); border:1px solid var(--border); border-radius:6px; padding:12px 14px; margin-bottom:14px; display:flex; flex-direction:column; gap:6px; }
.lpr-why-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.lpr-why-head h4 { font-size:11px; font-weight:600; color:var(--secondary); text-transform:uppercase; letter-spacing:.08em; margin:0; }
.lpr-why-reason { font-size:13px; color:var(--light); }
.lpr-why-match { font-size:12px; color:var(--light); }
.lpr-why-muted { color:var(--secondary); font-style:italic; }
.lpr-why-link { color:var(--primary); text-decoration:underline; cursor:pointer; }
.lpr-why-link:hover { color:var(--white); }
.mc-card{background:rgba(17,87,123,.55);border:1px solid var(--border);border-radius:8px;padding:14px 16px;}
.mc-card-title{font-size:13px;font-weight:700;color:var(--white);margin-bottom:10px;letter-spacing:.04em;}
.mc-kpi{background:rgba(17,87,123,.55);border:1px solid var(--border);border-radius:8px;padding:12px 14px;text-align:center;}
.mc-kpi .mc-val{font-size:22px;font-weight:700;color:var(--white);}
.mc-kpi .mc-lbl{font-size: 12px;color:var(--gray-500);margin-top:2px;text-transform:uppercase;letter-spacing:.06em;}
.mc-cam-row{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:4px;font-size:13px;}
.mc-cam-row:hover{background:rgba(92,138,158,.15);}
.mc-cam-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.mc-cam-name{flex:1;color:var(--white);font-weight:500;}
.mc-cam-meta{font-size: 12px;color:var(--gray-500);}
.mc-alert-row{display:flex;align-items:center;gap:10px;padding:8px 10px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);border-radius:6px;}
.mc-alert-row .mc-al-info{flex:1;min-width:0;}
.mc-alert-row .mc-al-cam{font-size:13px;font-weight:600;color:var(--white);}
.mc-alert-row .mc-al-detail{font-size: 12px;color:var(--gray-500);margin-top:1px;}
.mc-alert-row .mc-al-actions{display:flex;gap:6px;flex-shrink:0;}
.mc-alert-row .mc-al-actions button{font-size: 12px;padding:3px 8px;border-radius:4px;cursor:pointer;border:1px solid;background:none;font-weight:500;}
.mc-evt-row{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:4px;font-size:12px;color:var(--light);}
.mc-evt-row:hover{background:rgba(92,138,158,.15);}
.mc-evt-icon{font-size:14px;flex-shrink:0;width:20px;text-align:center;}
.mc-evt-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mc-evt-time{font-size: 12px;color:var(--gray-500);flex-shrink:0;}
.mc-health-row{display:flex;align-items:center;justify-content:space-between;padding:5px 8px;font-size:13px;border-radius:4px;}
.mc-health-row:hover{background:rgba(92,138,158,.15);}
.mc-health-row .mc-h-label{color:var(--light);}
.mc-health-row .mc-h-value{font-weight:600;}
.mc-ok{color:var(--green);} .mc-warn{color:var(--amber-light);} .mc-err{color:var(--red-light);}
@media(max-width:1200px){#mcKpis{grid-template-columns:repeat(3,1fr)!important;}}
@media(max-width:900px){#pageMission .mc-card{min-width:0;}#pageMission > div:last-child > div:last-child{grid-template-columns:1fr!important;}}
#helpInlineFab{position:fixed;right:148px;bottom:20px;width:44px;height:44px;border-radius:50%;background:rgba(92,138,158,.85);color:#fff;border:1px solid var(--border);display:none;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 14px rgba(17,87,123,.4);z-index:8999;font-size:18px;transition:transform .15s, background .15s;}
#helpInlineFab:hover{transform:scale(1.08);background:rgba(92,138,158,1);}
#helpInlinePanel{position:fixed;right:20px;bottom:84px;width:min(420px,92vw);max-height:60vh;background:var(--primary);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 32px rgba(17,87,123,.55);z-index:9002;display:none;flex-direction:column;overflow:hidden;}
#helpInlinePanel.open{display:flex;}
#helpInlinePanelHead{padding:10px 14px;background:rgba(92,138,158,.18);border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-size:13px;}
#helpInlinePanelBody{padding:14px;overflow-y:auto;color:#cfd9df;font-size:13px;line-height:1.6;}
#helpInlinePanelBody h1{font-size:16px;color:#fff;margin:0 0 6px;}
#helpInlinePanelBody h2{font-size:14px;color:#fff;margin:12px 0 4px;}
#helpInlinePanelBody h3{font-size:13px;color:#fff;margin:10px 0 3px;}
#helpInlinePanelBody ul,#helpInlinePanelBody ol{padding-left:20px;}
#helpInlinePanelBody code{background:rgba(2,13,21,.5);padding:1px 5px;border-radius:3px;font-size:12px;}
#helpInlinePanelBody a{color:var(--blue);}
#aiFab{position:fixed;right:84px;bottom:20px;width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--secondary),var(--primary));color:#fff;border:1px solid #4d7a8e;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 18px rgba(17,87,123,.6);z-index:9000;font-size:16px;font-weight:600;font-family:inherit;transition:transform .15s;}
#aiFab:hover{transform:scale(1.08);}
#aiModal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:9001;}
#aiModal.open{display:flex;}
#aiModalCard{background:var(--primary);border:1px solid var(--border);border-radius:10px;width:min(640px,94vw);max-height:90vh;display:flex;flex-direction:column;overflow:hidden;}
#aiModalHeader{padding:14px 18px;border-bottom:1px solid var(--border);background:rgba(92,138,158,.22);display:flex;justify-content:space-between;align-items:center;}
#aiMessages{flex:1;overflow-y:auto;padding:18px;font-size:13px;color:#cfd9df;}
#aiInputArea{padding:14px 18px;border-top:1px solid var(--border);display:flex;gap:8px;}
#aiInput{flex:1;padding:10px 12px;background:rgba(2,13,21,.5);border:1px solid var(--border);color:#fff;border-radius:6px;font-size:13px;font-family:inherit;}
#aiSendBtn{padding:10px 18px;background:linear-gradient(135deg,#7c3aed,#2563eb);border:none;color:#fff;border-radius:6px;cursor:pointer;font-weight:600;}
#aiSendBtn:disabled{opacity:.5;cursor:wait;}
.ai-msg{margin-bottom:14px;}
.ai-msg.user{text-align:right;}
.ai-msg .bubble{display:inline-block;max-width:85%;padding:10px 14px;border-radius:12px;text-align:left;}
.ai-msg.user .bubble{background:rgba(92,138,158,.45);border:1px solid var(--secondary);}
.ai-msg.assistant .bubble{background:rgba(2,13,21,.45);border:1px solid var(--border);}
.ai-citations{font-size: 12px;color:var(--gray-400);margin-top:6px;}
.ai-citations a{color:var(--blue-light);text-decoration:underline;cursor:pointer;margin-right:6px;}
.ai-suggestions{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;}
.ai-suggestions button{padding:5px 12px;background:rgba(2,13,21,.4);border:1px solid var(--border);color:#cfd9df;border-radius:14px;font-size: 12px;cursor:pointer;}
.ai-suggestions button:hover{border-color:#7c3aed;color:#fff;}
#supportFab{position:fixed;right:20px;bottom:20px;width:54px;height:54px;border-radius:50%;background:var(--gradient,linear-gradient(135deg,var(--secondary),var(--primary)));color:#fff;border:1px solid #4d7a8e;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 18px rgba(17,87,123,.6);z-index:9000;font-size:14px;font-weight:600;font-family:inherit;letter-spacing:.04em;transition:transform .15s;}
#supportFab:hover{transform:scale(1.08);}
#supportModal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:9001;}
#supportModal.open{display:flex;}
#supportModalCard{background:var(--primary);border:1px solid var(--border);border-radius:10px;padding:0;width:min(620px,92vw);max-height:90vh;display:flex;flex-direction:column;overflow:hidden;}
#supportModalHeader{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;background:rgba(92,138,158,.18);}
#supportModalHeader h3{margin:0;font-size:16px;color:#fff;}
#supportModalClose{background:transparent;border:none;color:var(--gray-500);font-size:24px;cursor:pointer;padding:0 4px;}
#supportModalBody{padding:20px;overflow-y:auto;flex:1;color:#cfd9df;font-size:14px;line-height:1.5;}
#supportModalBody input,#supportModalBody textarea,#supportModalBody select{width:100%;padding:9px 11px;background:rgba(2,13,21,.5);border:1px solid var(--border);color:#fff;border-radius:6px;font-size:14px;font-family:inherit;margin-bottom:12px;}
#supportModalBody textarea{min-height:130px;resize:vertical;line-height:1.5;}
#supportModalBody label{display:block;font-size:13px;color:#9bb4c0;margin-bottom:5px;font-weight:500;}
.support-list-item{background:rgba(2,13,21,.4);border:1px solid var(--border);border-radius:6px;padding:10px 12px;margin-bottom:8px;cursor:pointer;transition:border-color .15s;}
.support-list-item:hover{border-color:var(--gray-500);}
.support-msg{padding:10px 12px;border-radius:6px;margin-bottom:8px;}
.support-msg.mine{background:rgba(92,138,158,.3);border:1px solid rgba(92,138,158,.5);}
.support-msg.staff{background:rgba(76,175,110,.15);border:1px solid rgba(76,175,110,.3);}
.support-badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size: 12px;text-transform:uppercase;letter-spacing:.04em;}
.support-badge.sev-low{background:var(--gray-400)22;color:var(--gray-400);}
.support-badge.sev-medium{background:var(--blue)22;color:var(--blue);}
.support-badge.sev-high{background:#f9731622;color:#f97316;}
.support-badge.sev-critical{background:var(--red)22;color:var(--red);}
.support-badge.st-open{background:var(--blue)22;color:var(--blue);}
.support-badge.st-in_progress{background:#f9731622;color:#f97316;}
.support-badge.st-waiting_user{background:#a855f722;color:#a855f7;}
.support-badge.st-resolved{background:var(--green)22;color:var(--green);}
.support-badge.st-closed{background:#64748b22;color:#64748b;}
/* Cotos module — light theme, fondo #f0f5f8 / sidebar #11577B */
/* ════════════ Cotos — DARK MODE Palette B (unificado 2026-05-27) ════════════ */
/* Antes era modo claro (#f0f5f8 bg). Migrado al tema oscuro canonical para
coherencia con el resto del control-center. */
#pageCotos { background:var(--deep); padding:0; min-height:100vh; color:var(--light); position:relative; }
#pageCotos .cotos-topbar { display:flex; align-items:center; justify-content:space-between; padding:16px 24px; background:var(--primary); border-bottom:1px solid var(--border); }
#pageCotos .cotos-title { display:flex; gap:12px; align-items:center; font-size:18px; color:var(--white); }
#pageCotos .cotos-finca-pick, #pageCotos .cotos-temp-pick {
color:var(--light); font-size:13px; cursor:pointer;
display:inline-flex; align-items:center; gap:6px;
padding:4px 10px; border:1px solid var(--border); border-radius:var(--radius-md);
background:rgba(255,255,255,0.04); transition:background .15s, border-color .15s;
}
#pageCotos .cotos-finca-pick:hover, #pageCotos .cotos-temp-pick:hover {
background:rgba(255,255,255,0.08); border-color:var(--secondary);
}
#pageCotos .cotos-finca-pick::after, #pageCotos .cotos-temp-pick::after {
content:'▾'; font-size: 12px; color:var(--gray-500);
}
#pageCotos .cotos-tabs { display:flex; gap:4px; padding:8px 24px; background:var(--primary); border-bottom:1px solid var(--border); }
#pageCotos .cotos-tab { border:0; background:transparent; padding:8px 14px; border-radius:var(--radius-md); font-weight:600; color:var(--gray-500); cursor:pointer; transition:all var(--duration-fast) var(--ease); }
#pageCotos .cotos-tab:hover { color:var(--light); background:rgba(92,138,158,0.12); }
#pageCotos .cotos-tab.active { background:var(--gradient); color:var(--white); }
#pageCotos .cotos-tab-count { background:rgba(92,138,158,0.25); color:var(--light); font-size: 12px; padding:2px 6px; border-radius:9px; margin-left:4px; }
#pageCotos .cotos-tab.active .cotos-tab-count { background:rgba(255,255,255,.20); color:var(--white); }
#pageCotos .cotos-main { display:grid; grid-template-columns:1fr 280px; gap:18px; padding:18px 24px; }
#pageCotos .cotos-panel { background:var(--primary); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px; min-height:60vh; }
#pageCotos .cotos-sidebar { display:flex; flex-direction:column; gap:14px; }
#pageCotos .cotos-side-card { background:var(--primary); border:1px solid var(--border); border-radius:var(--radius-lg); padding:14px 16px; }
#pageCotos .cotos-side-card h4 { margin:0 0 10px; font-size:12px; color:var(--gray-500); text-transform:uppercase; letter-spacing:.04em; }
#pageCotos .cotos-kv { display:flex; justify-content:space-between; font-size:14px; margin:6px 0; color:var(--light); }
#pageCotos .cotos-kv strong { font-size:20px; color:var(--white); }
#pageCotos .cotos-side-list { list-style:none; margin:0; padding:0; font-size:13px; }
#pageCotos .cotos-side-list li { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid rgba(92,138,158,0.15); color:var(--light); }
#pageCotos .cotos-timeline-day { color:var(--gray-500); font-size:12px; text-transform:uppercase; letter-spacing:.04em; margin:18px 0 8px; }
#pageCotos .cotos-timeline-entry { display:flex; gap:14px; padding:12px 0; border-bottom:1px solid rgba(92,138,158,0.15); }
#pageCotos .cotos-timeline-entry .time { width:50px; color:var(--gray-500); font-size:13px; }
#pageCotos .cotos-tag { display:inline-block; padding:2px 8px; border-radius:8px; font-size:11px; margin-right:6px; font-weight:600; }
#pageCotos .cotos-tag-monteria { background:rgba(245,158,11,0.20); color:var(--amber); }
#pageCotos .cotos-tag-espera { background:rgba(34,197,94,0.20); color:var(--green-light); }
#pageCotos .cotos-tag-rececho { background:rgba(59,130,246,0.20); color:var(--blue-light); }
#pageCotos .cotos-tag-tarea { background:rgba(139,92,246,0.20); color:#a78bfa; }
#pageCotos .cotos-tag-alerta { background:rgba(220,38,38,0.20); color:var(--red-bright); }
#pageCotos .cotos-captura-pill { display:inline-block; margin-right:6px; font-size:12px; color:var(--gray-500); }
/* Tiempo & Informes tabs */
#pageCotos .cotos-tiempo-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; }
#pageCotos .cotos-tiempo-card { background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px; }
#pageCotos .cotos-tiempo-card h4 { margin:0 0 10px; font-size:12px; color:var(--gray-500); text-transform:uppercase; letter-spacing:.04em; }
#pageCotos .cotos-tiempo-wide { grid-column:1 / -1; }
#pageCotos .cotos-tiempo-big { font-size:36px; font-weight:600; margin:6px 0 10px; color:var(--white); }
#pageCotos .cotos-tiempo-scroll { max-height:280px; overflow:auto; }
#pageCotos .cotos-tiempo-table { width:100%; border-collapse:collapse; font-size:13px; }
#pageCotos .cotos-tiempo-table th, #pageCotos .cotos-tiempo-table td { padding:6px 8px; border-bottom:1px solid rgba(92,138,158,0.15); text-align:left; color:var(--light); }
#pageCotos .cotos-tiempo-table th { color:var(--gray-500); font-weight:600; }
#pageCotos .cotos-informes-head { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:16px; }
#pageCotos .cotos-informes-summary { display:flex; gap:18px; }
#pageCotos .cotos-informes-summary > div { text-align:center; }
#pageCotos .cotos-informes-summary strong { display:block; font-size:24px; color:var(--white); }
#pageCotos .cotos-informes-summary span { color:var(--gray-500); font-size: 12px; text-transform:uppercase; letter-spacing:.04em; }
#pageCotos .cotos-informes-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; }
#pageCotos .cotos-informes-card { background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px; }
#pageCotos .cotos-informes-card h4 { margin:0 0 10px; font-size:12px; color:var(--gray-500); text-transform:uppercase; letter-spacing:.04em; }
#pageCotos .cotos-informes-table { width:100%; border-collapse:collapse; font-size:13px; }
#pageCotos .cotos-informes-table th, #pageCotos .cotos-informes-table td { padding:6px 8px; border-bottom:1px solid rgba(92,138,158,0.15); text-align:left; color:var(--light); }
#pageCotos .cotos-informes-table th { color:var(--gray-500); font-weight:600; }
/* Puestos tab — PR3 */
#pageCotos .cotos-puestos-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
#pageCotos .cotos-puesto-card { background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:var(--radius-md); padding:12px; }
#pageCotos .cotos-puesto-card.ocupado { border-color:var(--red); background:rgba(220,38,38,0.10); }
#pageCotos .cotos-puesto-card h5 { margin:0 0 4px; font-size:14px; color:var(--white); }
#pageCotos .cotos-puesto-card .badge { display:inline-block; font-size:11px; padding:2px 8px; border-radius:6px; font-weight:600; }
#pageCotos .cotos-puesto-card.libre .badge { background:rgba(34,197,94,0.20); color:var(--green-light); }
#pageCotos .cotos-puesto-card.ocupado .badge { background:rgba(220,38,38,0.25); color:var(--red-bright); }
#pageCotos .cotos-puesto-card .actions { margin-top:8px; }
#pageCotos .cotos-puesto-card button { font-size:12px; padding:4px 10px; }
/* Modal "Nueva entrada" — PR7 — ahora oscuro canonical */
.cotos-modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.6); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; z-index:1000; }
.cotos-modal-backdrop[hidden] { display:none; }
.cotos-modal-content { background:var(--primary); color:var(--light); border:1px solid var(--border); border-radius:var(--radius-lg); width:min(560px, 92vw); max-height:calc(100vh - 80px); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-lg); }
.cotos-modal-header { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border); }
.cotos-modal-header h3 { margin:0; font-family:"Red Rose",serif; font-size:18px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--white); }
.cotos-modal-close { background:transparent; border:0; font-size:22px; cursor:pointer; color:var(--gray-500); padding:4px 8px; border-radius:var(--radius-sm); transition:all var(--duration-fast) var(--ease); }
.cotos-modal-close:hover { background:var(--secondary); color:var(--white); }
.cotos-modal-typetabs { display:flex; gap:4px; padding:10px 18px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.cotos-modal-typebtn { border:1px solid var(--border); background:transparent; color:var(--light); padding:6px 12px; border-radius:var(--radius-md); font-size:13px; cursor:pointer; transition:all var(--duration-fast) var(--ease); }
.cotos-modal-typebtn:hover { background:rgba(255,255,255,0.06); border-color:var(--secondary); }
.cotos-modal-typebtn.active { background:var(--gradient); color:var(--white); border-color:transparent; }
.cotos-modal-form { padding:16px 18px; display:flex; flex-direction:column; gap:10px; overflow-y:auto; flex:1; }
.cotos-modal-form label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--gray-500); }
.cotos-modal-form input, .cotos-modal-form select, .cotos-modal-form textarea { padding:7px 10px; border:1px solid var(--border); border-radius:var(--radius-md); font:inherit; background:rgba(255,255,255,0.04); color:var(--light); }
.cotos-modal-form input:focus, .cotos-modal-form select:focus, .cotos-modal-form textarea:focus { outline:none; border-color:var(--secondary); box-shadow:0 0 0 3px rgba(92,138,158,0.20); }
.cotos-modal-form textarea { min-height:60px; }
.cotos-modal-form .row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cotos-modal-footer { display:flex; justify-content:flex-end; gap:8px; padding:12px 18px; border-top:1px solid var(--border); flex-shrink:0; }
.cotos-modal-capturas { border:1px dashed var(--border); border-radius:var(--radius-md); padding:10px; }
.cotos-modal-capturas h5 { margin:0 0 8px; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--gray-500); }
.cotos-modal-capturas .cap-row { display:grid; grid-template-columns:2fr 1fr 1fr 28px; gap:6px; margin-bottom:6px; }
.cotos-modal-capturas .cap-add { font-size:12px; padding:4px 10px; }
#pageCotos .cotos-picker-popover {
position: absolute;
background: var(--primary);
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
min-width: 240px;
max-height: 320px;
overflow: auto;
z-index: 900;
padding: 4px 0;
}
#pageCotos .cotos-picker-popover[hidden] { display: none; }
#pageCotos .cotos-picker-item {
padding: 8px 14px;
cursor: pointer;
font-size: 14px;
color: var(--light);
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
#pageCotos .cotos-picker-item:hover { background: rgba(255,255,255,0.06); }
#pageCotos .cotos-picker-item.active { background: var(--gradient); color: var(--white); }
#pageCotos .cotos-picker-label { flex: 1; min-width: 0; }
#pageCotos .cotos-picker-item .sub {
display: block; font-size: 12px; color: var(--gray-500); margin-top: 2px;
}
#pageCotos .cotos-picker-item.active .sub { color: rgba(255,255,255,.7); }
#pageCotos .cotos-picker-edit {
background: transparent;
border: 0;
cursor: pointer;
font-size: 14px;
color: var(--gray-500);
padding: 4px 6px;
border-radius: var(--radius-sm);
flex-shrink: 0;
}
#pageCotos .cotos-picker-edit:hover { background: rgba(255,255,255,.10); }
#pageCotos .cotos-picker-item.active .cotos-picker-edit { color: rgba(255,255,255,.85); }
#pageCotos .cotos-picker-item.active .cotos-picker-edit:hover { background: rgba(255,255,255,.18); }
#pageCotos .cotos-picker-divider {
height: 1px; background: var(--border); margin: 4px 0;
}
#pageCotos .cotos-picker-action {
padding: 8px 14px;
cursor: pointer;
font-size: 13px;
color: var(--secondary);
font-weight: 600;
}
#pageCotos .cotos-picker-action:hover { background: rgba(255,255,255,0.06); }
#pageCotos .cotos-finca-pick, #pageCotos .cotos-temp-pick {
position: relative;
}
.hidden { display: none !important; }
/* Cotos inline helper styles — ahora oscuro canonical */
.cotos-note { margin: 0 0 12px; color: var(--gray-500); }
.cotos-note-error { color: var(--red-bright); }
.cotos-meta { font-size: 13px; color: var(--gray-500); margin-top: 4px; }
.cotos-subtext { font-size: 12px; color: var(--gray-500); }
.cotos-link { color: var(--secondary); text-decoration: none; }
.cotos-link:hover { text-decoration: underline; color:var(--light); }
.table-full { width: 100%; border-collapse: collapse; }
.table-head-row { text-align: left; border-bottom: 1px solid var(--border); }
.cell-padding { padding: 8px 0; }
.table-empty-cell { padding: 14px; color: var(--gray-500); }
.mt-0 { margin: 0; }
.mt-6 { margin-top: 6px; }
.label-inline { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.cotos-weather-value { font-size: 32px; font-weight: 600; }
.cotos-weather-sub { font-size: 14px; color: #4a6173; margin-left: 4px; }
.text-right { text-align: right; }
.cotos-task-item { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid #eef3f6; }
.flex-1 { flex: 1; }
.cotos-task-done { text-decoration: line-through; color: #9aa9b4; }
.an-empty--centered { padding: 32px; text-align: center; }
.list-reset { list-style:none; padding:0; margin:0; }
.text-success { color: #3d5a1a; }
.text-error { color: #9c1d1d; }
.m-0 { margin: 0; }
/* ════════════ Detection clip modal ════════════ */
.det-clip-modal {
position: fixed; inset: 0;
background: rgba(0,0,0,.78);
display: flex; align-items: center; justify-content: center;
z-index: 9999;
}
.det-clip-modal.hidden { display: none; }
.det-clip-modal__panel {
position: relative;
width: min(1280px, 96vw);
height: min(720px, 86vh);
display: flex; flex-direction: column;
background: #11577B;
border-radius: 12px;
box-shadow: 0 16px 48px rgba(0,0,0,.55);
color: #e3eef3;
overflow: hidden;
}
/* ════════════ Fullscreen detection sidebar (left column) ════════════ */
#fsContent { display: flex; flex: 1; min-height: 0; }
#fsBody { min-width: 0; }
#fsDetPanel {
/* U-5: sidebar fullscreen unificado con sidebar app */
border-top: 0 !important;
max-height: none !important;
width: 270px;
flex-shrink: 0;
overflow-y: auto;
padding: 12px 14px;
background: var(--primary); /* era rgba(2,13,21,.92) — ahora Palette B */
border-right: 1px solid var(--border);
font-size: 12px;
}
#fsDetPanel .s-s-136 {
margin-bottom: 10px;
position: sticky; top: -12px;
background: var(--primary); /* sticky header igual que panel */
padding: 2px 0 8px;
z-index: 1;
}
#fsDetPanel .s-s-137 {
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding: 8px 4px;
}
#fsDetPanel .s-s-138 {
min-width: 0;
font-size: 12px;
font-weight: 600;
color: var(--light); /* era #b4c4cb custom */
font-variant-numeric: tabular-nums;
}
#fsDetPanel .s-s-139 {
gap: 4px;
}
#fsDetPanel .s-s-140 {
font-size: 12px;
padding: 1px 6px;
}
#fsDetPanel .s-s-141 {
font-size: 12px;
margin-left: 0;
color: var(--gray-500); /* era #6b8089 custom */
}
/* ════════════ Detection panel (right side) — U-5b 2026-05-27 ════════════ */
#fsZonePanel {
position: absolute;
top: 64px;
right: 12px;
width: 320px;
max-height: calc(100vh - 220px); /* deja espacio para floating action bar (bottom 86 + h ~52) + FABs + gap */
overflow-y: auto;
background: rgba(10,66,89,0.96); /* var(--deep) con alpha — coherente con paleta */
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 12px;
color: var(--light);
box-shadow: var(--shadow-lg);
z-index: 10;
display: none;
}
#fsZonePanel.open { display: block; } /* toggle via class si JS lo controla así */
.zone-panel-title {
font-family: "Red Rose", serif;
font-size: var(--text-xl);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--white);
margin: 0 0 12px 0;
}
.zone-view-tabs {
display: flex;
gap: 6px;
margin-bottom: 10px;
}
.zone-view-tab {
flex: 1;
text-align: center;
cursor: pointer;
padding: 6px 8px;
border-radius: var(--radius-md);
background: transparent;
border: 1px solid var(--border);
font-size: 12px;
color: var(--light);
font-family: inherit;
font-weight: 500;
transition: background var(--duration-fast) var(--ease),
border-color var(--duration-fast) var(--ease);
}
.zone-view-tab:hover {
background: rgba(92,138,158,0.12);
border-color: var(--secondary);
}
.zone-view-tab.is-active {
background: rgba(92,138,158,0.25);
border-color: var(--secondary);
color: var(--white);
font-weight: 600;
}
.zone-view-tab:focus-visible {
outline: 2px solid var(--secondary);
outline-offset: 2px;
}
.zf-classes {
margin: 8px 0;
font-size: 13px;
line-height: 1.5;
}
.zf-classes-hint {
margin-bottom: 8px;
color: var(--gray-500);
}
.zf-class-group {
margin: 0 0 10px 0;
padding: 6px 8px;
background: rgba(255,255,255,0.03);
border-radius: var(--radius-sm);
}
.zf-class-group-label {
color: var(--light);
font-weight: 600;
margin-bottom: 4px;
}
.zf-class-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
gap: 4px 10px;
}
.zf-class-label {
cursor: pointer;
white-space: nowrap;
display: flex;
align-items: center;
gap: 4px;
color: var(--light);
}
.zf-class-label input {
accent-color: var(--primary);
}
.zone-mode-info {
margin: 8px 0;
padding: 8px;
background: rgba(92,138,158,0.10);
border-left: 3px solid var(--secondary);
font-size: 12px;
color: var(--light);
line-height: 1.4;
border-radius: var(--radius-sm);
}
.zone-mode-info--ok {
background: rgba(16,185,129,0.08);
border-left-color: var(--emerald);
}
.zai-save-btn {
margin-top: 8px;
width: 100%;
padding: 10px;
background: var(--gradient);
color: var(--white);
border: 0;
border-radius: var(--radius-md);
cursor: pointer;
font-family: inherit;
font-size: 14px;
font-weight: 600;
min-height: 40px;
transition: filter var(--duration-fast) var(--ease),
transform var(--duration-fast) var(--ease),
box-shadow var(--duration-fast) var(--ease);
}
.zai-save-btn:hover {
filter: brightness(1.08);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.zai-save-btn:focus-visible {
outline: 2px solid var(--secondary);
outline-offset: 2px;
}
.zai-save-btn[disabled] {
opacity: 0.5;
cursor: not-allowed;
filter: none;
transform: none;
box-shadow: none;
}
.zf-conf-row,
.zf-visibility {
margin: 8px 0;
padding: 6px 8px;
background: rgba(255,255,255,0.03);
border-radius: var(--radius-sm);
font-size: 12px;
line-height: 1.5;
color: var(--light);
}
.zf-conf-label,
.zf-visibility-label {
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
}
.zf-conf-label input,
.zf-visibility-label input {
accent-color: var(--primary);
}
.zf-conf-hint {
margin-top: 4px;
color: var(--gray-500);
font-size: 12px;
}
.zf-conf-slider-row {
margin-top: 6px;
color: var(--light);
}
.zf-conf-slider {
width: 140px;
vertical-align: middle;
accent-color: var(--primary);
}
.zone-classes,
.zone-conf {
font-size: 12px;
color: var(--gray-500);
}
.zone-classes { margin-top: 2px; }
.zone-form-spacer { height: 110px; } /* clearance para que el último input no quede bajo el action bar fijo */
.zone-form-actions {
position: fixed;
bottom: 86px; /* por encima de #supportFab + #aiFab (bottom:20 + 54 + 12 gap) */
right: 24px;
width: 296px;
background: rgba(10,66,89,0.98);
padding: 8px;
border-radius: var(--radius-md);
border: 1px solid var(--border);
display: flex;
gap: 8px;
z-index: 9100; /* sobre los FABs (z 9000) para no quedar tapados */
box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.zf-form-btn { flex: 1; }
.zf-edit-hint {
font-size: 12px;
color: var(--gray-500);
margin-bottom: 6px;
}
.zf-redraw-btn {
width: 100%;
padding: 8px;
margin-bottom: 8px;
background: rgba(245,158,11,0.18);
color: var(--amber);
border: 1px solid var(--amber);
border-radius: var(--radius-md);
cursor: pointer;
font-family: inherit;
font-size: 13px;
font-weight: 600;
min-height: 36px;
transition: filter var(--duration-fast) var(--ease);
}
.zf-redraw-btn:hover { filter: brightness(1.1); }
.zf-redraw-btn:focus-visible {
outline: 2px solid var(--amber);
outline-offset: 2px;
}
.zf-edit-instructions {
font-size: 12px;
color: var(--amber);
padding: 8px;
background: rgba(245,158,11,0.10);
border-radius: var(--radius-md);
line-height: 1.5;
}
.det-clip-modal__close {
position: absolute; top: 8px; right: 12px;
background: transparent; border: 0;
color: #e3eef3; font-size: 22px; cursor: pointer;
z-index: 2; padding: 4px 10px;
}
.det-clip-modal__close:hover { color: #fff; }
.det-clip-modal__body {
display: flex;
flex: 1;
min-height: 0;
}
.det-clip-modal__list {
width: 260px;
flex-shrink: 0;
overflow-y: auto;
border-right: 1px solid rgba(255,255,255,.08);
padding: 6px 0;
}
.det-clip-modal__list-loading,
.det-clip-modal__list-empty {
padding: 16px;
color: #9ab3bd;
font-size: 13px;
text-align: center;
}
.det-list-item {
padding: 10px 14px;
cursor: pointer;
border-bottom: 1px solid rgba(255,255,255,.04);
display: flex; flex-direction: column; gap: 2px;
transition: background .12s ease;
border-left: 3px solid transparent;
}
.det-list-item:hover { background: rgba(255,255,255,.05); }
.det-list-item:focus-visible { outline: none; background: rgba(74,138,156,.12); }
.det-list-item.active {
background: rgba(74,138,156,.2);
border-left-color: #4a8a9c;
}
.det-list-item__time {
font-weight: 600; font-size: 14px; color: #e3eef3;
font-variant-numeric: tabular-nums;
}
.det-list-item__labels {
font-size: 12px; color: #9ab3bd;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.det-clip-modal__main {
flex: 1;
display: flex; flex-direction: column;
min-width: 0;
}
.det-clip-modal__header {
display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
padding: 14px 56px 10px 18px;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.det-clip-modal__time { font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; }
.det-clip-modal__utc {
font-size: 12px; color: #7a98a3;
font-variant-numeric: tabular-nums;
}
.det-clip-modal__labels { color: #9ab3bd; font-size: 13px; }
.det-clip-modal__video-wrap {
position: relative; background: #000;
flex: 1;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.det-clip-modal__video {
width: 100%; height: 100%;
object-fit: contain;
display: block;
}
.det-clip-modal__overlay {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
background: rgba(0,0,0,.55);
color: #e3eef3;
font-size: 14px;
pointer-events: none;
}
@media (max-width: 720px) {
.det-clip-modal__panel { width: 96vw; height: 92vh; }
.det-clip-modal__body { flex-direction: column; }
.det-clip-modal__list { width: 100%; max-height: 30vh; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
}
/* Clickable detection rows (fullscreen "Últimas detecciones" list) */
.s-s-137.det-row-clickable {
cursor: pointer;
transition: background 0.15s ease;
border-radius: 4px;
}
.s-s-137.det-row-clickable:hover { background: rgba(255,255,255,.06); }
.s-s-137.det-row-clickable:focus-visible { outline: 2px solid #4a8a9c; outline-offset: 2px; }
/* Settings · Reproducción config */
.det-clip-config { padding: 6px 0 0; }
.det-clip-config__hint {
font-size: 13px; color: #6b7c85;
margin: 6px 0 12px;
}
.det-clip-config__row {
display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
.det-clip-config__row label {
font-size: 13px; color: #5C8A9E;
display: inline-flex; align-items: center; gap: 6px;
}
.det-clip-config__row input[type="number"] {
width: 76px; padding: 6px 8px;
border: 1px solid #d6e0e5; border-radius: 6px;
font: inherit;
}
.det-clip-config__save {
padding: 7px 14px;
background: #11577B; color: #fff;
border: 0; border-radius: 6px; cursor: pointer;
font: inherit;
}
.det-clip-config__save:hover { background: #0a4b65; }
.det-clip-config__msg { font-size: 13px; color: #3d5a1a; }
/* ════════════════════════════════════════════════════════════════════════
U-7 · Fullscreen camera iOS-style controls overlay (2026-05-27)
════════════════════════════════════════════════════════════════════════
Reemplaza:
- #fsHeader (antes 60px fijo) → hover-revealed glass overlay
- Añade .fs-bottom-controls hover-revealed (timeline + play controls)
- FABs (#supportFab, #aiFab) → hover-only en fullscreen mode
- Estilo glassmorphism iOS: blur(28px) saturate(200%), squircle 18px,
transparencia rgba(...,0.28), border highlight + box-shadow capas
──────────────────────────────────────────────────────────────────────── */
/* === Hover zones (invisibles, detectan mouse) === */
#camFullscreen .fs-header-hover-zone {
position: absolute; top: 0; left: 0; right: 0;
height: 100px;
z-index: 50;
}
#camFullscreen .fs-bottom-hover-zone {
position: absolute; bottom: 0; left: 0; right: 0;
height: 140px;
z-index: 50;
}
#camFullscreen .fs-fab-hover-zone {
position: fixed;
bottom: 0; right: 0;
width: 220px; height: 110px;
z-index: 70;
}
/* === HEADER siempre visible (glass iOS-style) — sobrescribe #fsHeader === */
/* Cambio de hover-revealed → always-visible tras feedback usuario:
el header tapaba los botones En vivo/Grabación/IA/Detección al hover.
Ahora siempre visible, conserva glass style sin overlay flotante. */
#camFullscreen #fsHeader {
position: relative;
height: auto;
padding: 14px 20px;
background: rgba(10,66,89,0.45);
-webkit-backdrop-filter: blur(28px) saturate(200%);
backdrop-filter: blur(28px) saturate(200%);
border: none;
border-bottom: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 2px 8px rgba(0,0,0,0.20);
z-index: 10;
flex-shrink: 0;
}
/* Quitar hover zone superior + hint top (header ya no es hover) */
#camFullscreen .fs-hint.top { display: none; }
#camFullscreen .fs-header-hover-zone { display: none; }
/* Recordings: ocultar franja static (fecha + timeline + speed + hint bottom).
Redundantes con el overlay hover U-7 (#fsBottomControls), que ya da
#fsCtrlDate, #fsTl, #fsCtrlSpeed y los demás controles. Se ocultan vía
display:none manteniendo el DOM intacto para no romper handlers que
referencien #fsRecDateInput, #fsRecTimeline o el row dinámico de speed
(control-center.html:17913). Reportado por operador 2026-05-28. */
#camFullscreen .fs-hint.bottom { display: none; }
#camFullscreen #fsRecDateRow { display: none; }
#camFullscreen #fsRecTimeline { display: none; }
#camFullscreen #fsRecSpeedRow { display: none; }
/* Clock pills + status row dentro del header */
#camFullscreen .fs-header-status-row {
display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 4px;
}
#camFullscreen .fs-header-status {
font-size: 12px; color: var(--light);
display: inline-flex; align-items: center; gap: 6px;
}
#camFullscreen .fs-header-status .dot {
width: 8px; height: 8px; background: var(--red); border-radius: 50%;
animation: live-pulse 1.5s ease-in-out infinite;
}
#camFullscreen .fs-header-status.tech {
color: var(--gray-400); font-family: "Courier New", monospace;
}
#camFullscreen .fs-header-clocks { display: flex; gap: 10px; align-items: center; }
#camFullscreen .fs-clock-pill {
padding: 8px 14px;
border-radius: 12px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.12);
color: var(--white);
font-family: "Courier New", monospace;
text-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-backdrop-filter: blur(20px) saturate(180%);
backdrop-filter: blur(20px) saturate(180%);
box-shadow: 0 4px 12px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.10);
}
#camFullscreen .fs-clock-pill .label {
display: block; font-size: 10px;
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--gray-500); margin-bottom: 2px;
font-family: "Helvetica Neue", sans-serif; font-weight: 600;
}
#camFullscreen .fs-clock-pill .time {
font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums;
}
#camFullscreen .fs-clock-pill.recording { border-color: var(--emerald); }
#camFullscreen .fs-clock-pill.recording .time,
#camFullscreen .fs-clock-pill.recording .label { color: var(--emerald); }
@keyframes live-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.85); }
}
/* === BOTTOM controls overlay (hover-revealed) === */
#camFullscreen .fs-bottom-controls {
position: absolute;
bottom: 16px; left: 16px; right: 16px;
padding: 16px 20px 14px;
background: rgba(10,66,89,0.28);
-webkit-backdrop-filter: blur(28px) saturate(200%);
backdrop-filter: blur(28px) saturate(200%);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 18px;
box-shadow:
0 20px 50px rgba(0,0,0,0.45),
0 4px 12px rgba(0,0,0,0.25),
inset 0 1px 0 rgba(255,255,255,0.12);
z-index: 60;
opacity: 0;
transform: translateY(20px) scale(0.98);
transition: opacity var(--duration-base) var(--ease),
transform var(--duration-base) var(--ease);
pointer-events: none;
}
#camFullscreen .fs-bottom-hover-zone:hover ~ .fs-bottom-controls,
#camFullscreen .fs-bottom-controls:hover,
#camFullscreen .fs-bottom-controls.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
#camFullscreen .fs-timeline-row {
display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
#camFullscreen .fs-time-current,
#camFullscreen .fs-time-total {
font-family: "Courier New", monospace;
font-size: 13px; color: var(--light);
font-variant-numeric: tabular-nums; white-space: nowrap;
text-shadow: 1px 1px 2px rgba(0,0,0,0.8); min-width: 56px;
}
#camFullscreen .fs-time-current { color: var(--white); font-weight: 600; }
#camFullscreen .fs-tl { flex: 1; height: 32px; position: relative; cursor: pointer; }
#camFullscreen .fs-tl-track {
position: absolute; top: 50%; left: 0; right: 0;
transform: translateY(-50%); height: 6px;
background: rgba(255,255,255,0.18); border-radius: 3px;
}
#camFullscreen .fs-tl-seg {
position: absolute; top: 0; height: 100%;
background: rgba(16,185,129,0.55); border-radius: 3px;
}
#camFullscreen .fs-tl-seg.warn { background: rgba(245,158,11,0.55); }
#camFullscreen .fs-tl-seg.err { background: rgba(220,38,38,0.55); }
#camFullscreen .fs-tl-progress {
position: absolute; top: 0; left: 0; height: 100%;
background: var(--gradient); border-radius: 3px;
}
#camFullscreen .fs-tl-handle {
position: absolute; top: 50%;
transform: translate(-50%, -50%);
width: 18px; height: 18px;
background: var(--white);
border: 2px solid var(--secondary);
border-radius: 50%;
cursor: grab;
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
transition: transform var(--duration-fast) var(--ease);
}
#camFullscreen .fs-tl-handle:hover { transform: translate(-50%, -50%) scale(1.2); }
#camFullscreen .fs-tl-marker {
position: absolute; top: -4px;
width: 3px; height: 14px;
background: var(--amber);
border-radius: 1px;
pointer-events: none;
}
#camFullscreen .fs-tl-tooltip {
position: absolute; bottom: 100%;
transform: translateX(-50%);
padding: 6px 10px;
background: rgba(10,66,89,0.96);
border: 1px solid var(--border);
border-radius: 6px;
font-size: 11px; font-family: "Courier New", monospace;
color: var(--white); white-space: nowrap;
pointer-events: none; margin-bottom: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.4);
opacity: 0; transition: opacity var(--duration-fast) var(--ease);
}
#camFullscreen .fs-tl:hover .fs-tl-tooltip { opacity: 1; }
#camFullscreen .fs-controls-bar { display: flex; align-items: center; gap: 4px; }
#camFullscreen .fs-controls-left,
#camFullscreen .fs-controls-right { display: flex; align-items: center; gap: 4px; flex: 1; }
#camFullscreen .fs-controls-right { justify-content: flex-end; }
#camFullscreen .fs-controls-center { display: flex; align-items: center; gap: 8px; }
#camFullscreen .fs-ctrl-btn {
width: 40px; height: 40px;
border-radius: 10px;
background: transparent; border: 1px solid transparent;
color: var(--white); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background var(--duration-fast) var(--ease),
transform var(--duration-fast) var(--ease);
font-size: 16px;
}
#camFullscreen .fs-ctrl-btn:hover {
background: rgba(255,255,255,0.12); transform: scale(1.08);
}
#camFullscreen .fs-ctrl-btn:focus-visible {
outline: 2px solid var(--secondary); outline-offset: 2px;
}
#camFullscreen .fs-ctrl-btn svg { width: 20px; height: 20px; fill: currentColor; }
#camFullscreen .fs-ctrl-play {
width: 56px; height: 56px; border-radius: 50%;
background: var(--gradient);
box-shadow: 0 4px 12px rgba(17,87,123,0.6);
margin: 0 4px;
}
#camFullscreen .fs-ctrl-play:hover {
transform: scale(1.06);
box-shadow: 0 6px 16px rgba(17,87,123,0.8);
}
#camFullscreen .fs-ctrl-play svg { width: 26px; height: 26px; }
#camFullscreen .fs-ctrl-pill {
padding: 6px 12px; border-radius: 999px;
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.15);
font-family: "Courier New", monospace; font-size: 12px;
color: var(--white); cursor: pointer;
transition: background var(--duration-fast) var(--ease);
display: inline-flex; align-items: center; gap: 6px;
font-variant-numeric: tabular-nums;
}
#camFullscreen .fs-ctrl-pill:hover { background: rgba(255,255,255,0.18); }
#camFullscreen .fs-live-dot {
width: 8px; height: 8px; background: var(--red); border-radius: 50%;
animation: live-pulse 1.5s ease-in-out infinite;
}
#camFullscreen .fs-date-pill {
padding: 6px 12px; border-radius: 999px;
background: var(--gradient); color: var(--white);
cursor: pointer; font-size: 12px;
font-family: "Courier New", monospace; border: 0;
display: inline-flex; align-items: center; gap: 6px;
font-weight: 600;
}
#camFullscreen .fs-date-pill:hover { filter: brightness(1.1); }
/* Hints sutiles cuando no hay hover */
#camFullscreen .fs-hint {
position: absolute;
padding: 6px 12px;
background: rgba(0,0,0,0.6); border-radius: 999px;
font-size: 11px; color: var(--gray-400);
pointer-events: none; z-index: 55;
letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600;
transition: opacity var(--duration-base) var(--ease);
}
#camFullscreen .fs-hint.top { top: 12px; left: 50%; transform: translateX(-50%); }
#camFullscreen .fs-hint.bottom { bottom: 12px; left: 50%; transform: translateX(-50%); }
#camFullscreen .fs-header-hover-zone:hover ~ .fs-hint.top { opacity: 0; }
#camFullscreen .fs-bottom-hover-zone:hover ~ .fs-hint.bottom { opacity: 0; }
/* === FABs hover-only en fullscreen + iOS squircle === */
#camFullscreen.open ~ #supportFab,
#camFullscreen.open ~ #aiFab {
width: 48px; height: 48px;
border-radius: 14px !important;
background: rgba(10,66,89,0.35) !important;
-webkit-backdrop-filter: blur(28px) saturate(200%);
backdrop-filter: blur(28px) saturate(200%);
border: 1px solid rgba(255,255,255,0.10) !important;
box-shadow:
0 8px 24px rgba(0,0,0,0.30),
0 2px 6px rgba(0,0,0,0.20),
inset 0 1px 0 rgba(255,255,255,0.15) !important;
opacity: 0;
transform: translateY(20px) scale(0.9);
pointer-events: none;
transition: opacity var(--duration-base) var(--ease),
transform var(--duration-base) var(--ease);
}
#camFullscreen.open ~ .fs-fab-hover-zone:hover ~ #supportFab,
#camFullscreen.open ~ .fs-fab-hover-zone:hover ~ #aiFab,
#camFullscreen.open ~ #supportFab:hover,
#camFullscreen.open ~ #aiFab:hover {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}