:root{--cc-bg:#07090c;--cc-panel:#101319;--cc-panel-2:#151920;--cc-line:#ffffff14;--cc-muted:#8d96a3;--cc-text:#f5f7f9;--cc-green:#ffffff;--cc-red:#e4007c;--cc-blue:#ffffff}

#camera-live button:not(:disabled):hover,#viewer button:not(:disabled):hover{border-color:#e4007c}
#camera-live .secondary:hover,#camera-live .camera-status-rail button:hover,#camera-live .command-nav button:hover,#camera-live .local-tools .camera-switch:hover,#camera-live .camera-primary-actions button:hover,#viewer .viewer-buttons button:hover,#viewer .viewer-view-controls button:hover{background:#e4007c1c;color:#fff}
#camera-live .danger-button:hover,#viewer .danger-button:hover{background:#e4007c26;color:#fff}
#camera-live .primary:hover,#viewer .primary:hover{box-shadow:0 10px 30px #e4007c55}

/* Estación transmisora */
#camera-live{display:none!important;padding:0!important;min-height:100dvh;background:var(--cc-bg)!important;overflow:hidden!important}
#camera-live.active{display:grid!important;grid-template-rows:calc(66px + max(10px, env(safe-area-inset-top))) minmax(0,1fr)}
.command-header{display:flex;align-items:center;gap:24px;padding:max(10px, env(safe-area-inset-top)) clamp(18px,3vw,42px) 0;border-bottom:1px solid var(--cc-line);background:#0a0d11;z-index:20}.command-header .brand{position:static!important;flex:0 0 auto}.command-header .brand small{color:var(--cc-muted)}.command-session{display:flex;align-items:center;gap:16px;min-width:0;margin-left:auto;color:var(--cc-muted);font-size:11px}.command-session>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.command-live{display:flex;align-items:center;gap:7px;color:#e9edf1;font-weight:850;letter-spacing:.12em}.command-live i{width:8px;height:8px;border-radius:50%;background:var(--cc-green);box-shadow:0 0 14px #ffffff70}.command-end{min-height:36px;padding:0 14px;border:1px solid #e4007c44;border-radius:10px;background:#e4007c0d;color:#ff6fb8;font-size:11px;font-weight:750}
#camera-live .camera-grid{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(370px,430px)!important;gap:0!important;width:100%!important;height:calc(100dvh - 66px - max(10px, env(safe-area-inset-top)))!important;margin:0!important;align-items:stretch!important}
.camera-workspace{display:grid;grid-template-rows:minmax(0,1fr) auto;min-width:0;padding:clamp(16px,2.2vw,32px);background:radial-gradient(circle at 50% 35%,#171c23 0,#0b0e12 58%,#07090c 100%)}
#camera-live .preview{width:100%;height:100%;min-height:0;aspect-ratio:auto!important;border:1px solid #ffffff17!important;border-radius:20px!important;background:#020304;box-shadow:0 28px 80px #0009!important}
#camera-live .preview video{object-fit:contain!important}.preview>span{top:16px!important;left:16px!important;border:1px solid #ffffff14;border-radius:999px!important;background:#080b0edb!important}.preview #camera-night-mode{left:16px;right:auto;bottom:16px;top:auto}.preview #recording-state{position:absolute;right:16px;bottom:16px;z-index:8;margin:0;box-shadow:0 12px 32px #0008}
.camera-status-rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:8px;padding-top:12px}.camera-status-rail>div{display:grid;gap:4px;min-width:0;padding:11px 13px;border:1px solid var(--cc-line);border-radius:12px;background:#0d1015}.camera-status-rail span,.panel-title span,.viewer-panel-title span{color:var(--cc-muted);font-size:8px;font-weight:850;letter-spacing:.15em}.camera-status-rail strong{overflow:hidden;color:#e8ebef;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.camera-status-rail strong b{color:var(--cc-green)}.camera-status-rail button{padding:0 15px;border:1px solid var(--cc-line);border-radius:12px;background:#13171d;color:#d9dde2;font-size:11px;font-weight:750}
#camera-live .camera-info{display:flex;flex-direction:column;min-width:0;max-height:none!important;padding:24px!important;border-left:1px solid var(--cc-line);background:#0d1014;overflow-y:auto!important}#camera-live .camera-info>*{flex-shrink:0}.command-panel-head p{margin:0;color:var(--cc-green);font-size:8px;font-weight:850;letter-spacing:.16em}.command-panel-head h2{margin:5px 0 18px;font-size:25px!important;letter-spacing:-.035em}
.command-nav{display:flex;gap:4px;padding:4px;border:1px solid var(--cc-line);border-radius:0;background:#080a0d;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.command-nav::-webkit-scrollbar{display:none}.command-nav button{flex:0 0 auto;min-height:38px;padding:0 13px;border:0;border-radius:0;background:transparent;color:#838b96;font-size:12px;font-weight:750;white-space:nowrap}.command-nav button.active{background:#20252d;color:#fff;box-shadow:inset 0 0 0 1px #ffffff12}.command-nav button[data-action="recordings"],.command-nav button[data-action="show-logs"]{color:#bdc3ca}
.command-panel{display:none;padding:20px 0 4px}.command-panel.active{display:block}.panel-title{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:14px}.panel-title>div{display:grid;gap:4px}.panel-title strong{font-size:14px}.panel-title small{color:var(--cc-muted);font-size:9px;text-align:right}
#camera-live .local-tools,#camera-live .alert-tools{display:block!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;color:inherit!important}#camera-live .local-tools .actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}.local-tools .actions>button,.local-tools .camera-switch{min-height:52px;margin:0!important}.local-tools .actions>small{grid-column:1/-1;padding:2px;color:var(--cc-muted);font-size:11px}.local-tools .manual-record{width:100%;min-height:52px!important}.camera-primary-actions{display:grid!important;grid-template-columns:1fr 1fr 1fr;gap:7px!important;margin-top:14px!important}.camera-primary-actions button{min-width:0!important;min-height:42px!important;padding:0 7px!important;font-size:11px!important}
#camera-live .alert-type-row{gap:10px}.alert-selects{display:grid;grid-template-columns:1fr 1fr;gap:8px}.alert-selects label{color:var(--cc-muted);font-size:12px}.alert-selects select{width:100%;margin-top:5px;padding:10px;border:1px solid var(--cc-line);border-radius:9px;background:#11151b;color:#fff}.alert-recorder{display:grid!important;grid-template-columns:1fr 1fr;gap:7px!important}.alert-recorder button{min-width:0;padding:0 8px;font-size:11px}.alert-recorder span{grid-column:1/-1}.access-layout{display:grid;grid-template-columns:145px 1fr;gap:14px;align-items:start}.access-layout .qr-card.small{width:145px!important;height:145px!important;float:none!important;margin:0!important;padding:9px;border-radius:14px!important}.access-layout .keyword-card{min-height:0;padding:14px}.access-layout .keyword-card strong{font-size:20px}.access-share{width:100%;margin-top:9px}

/* Consola del visor */
#viewer{display:none!important;padding:0!important;background:var(--cc-bg)!important;overflow:hidden!important}#viewer.active{display:grid!important;grid-template-rows:calc(62px + max(10px, env(safe-area-inset-top))) minmax(0,1fr);height:100dvh!important;min-height:100dvh!important}
.viewer-command-header{display:flex;align-items:center;gap:14px;padding:max(10px, env(safe-area-inset-top)) 18px 0;border-bottom:1px solid var(--cc-line);background:#0a0d11;z-index:30}.viewer-command-header .viewer-logo,.viewer-command-header .live-top,.viewer-command-header #viewer-connection{position:static!important;inset:auto!important;transform:none!important}.viewer-command-header .viewer-logo{display:flex;align-items:center;gap:8px;padding:0;border:0;background:transparent}.viewer-command-header .viewer-logo small{color:var(--cc-muted);font-size:8px;letter-spacing:.12em}.viewer-command-header .live-top{display:flex;width:auto;margin-left:auto}.viewer-command-header #viewer-connection{margin:0}.viewer-command-header>.danger-button{min-height:34px;padding:0 12px;font-size:9px}
.viewer-command-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;min-height:0}.viewer-stage{position:relative;min-width:0;min-height:0;margin:18px 0 18px 18px;border:1px solid var(--cc-line);border-radius:18px;overflow:hidden;background:#020304}.viewer-stage #remote-video{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;transform-origin:center}.viewer-stage .viewer-wait{position:absolute!important;inset:0!important}.viewer-stage .viewer-resume-btn{position:absolute!important;inset:0!important}.viewer-stage .viewer-view-controls{position:absolute!important;top:14px!important;right:14px!important;z-index:12}.viewer-stage .viewer-night-mode{top:auto!important;bottom:14px!important;left:14px!important;transform:none!important}.viewer-stage .motion-alert{top:50%!important;left:50%!important;bottom:auto!important}.viewer-control-panel{display:flex;flex-direction:column;gap:14px;min-height:0;padding:20px;border-left:1px solid var(--cc-line);background:#0d1014;overflow-y:auto}.viewer-panel-title{display:grid;gap:5px}.viewer-panel-title strong{font-size:18px}.viewer-metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px}.viewer-metrics .sound-indicator,.viewer-metrics .motion-summary,.viewer-metrics .face-summary{position:static!important;inset:auto!important;display:flex!important;min-height:58px;margin:0!important;padding:10px!important;border:1px solid var(--cc-line)!important;border-radius:12px!important;background:#12161c!important;transform:none!important}.viewer-metrics .sound-indicator{grid-column:1/-1}.viewer-metrics .motion-summary,.viewer-metrics .face-summary{flex-wrap:wrap;align-content:center}.viewer-metrics .motion-summary strong,.viewer-metrics .face-summary strong{font-size:18px}.viewer-metrics small{width:100%;margin:0!important;color:var(--cc-muted)!important}.viewer-control-panel .live-bottom{position:static!important;inset:auto!important;display:flex!important;flex-direction:column;gap:12px;width:100%;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important}.viewer-control-panel .detection-controls{display:grid!important;grid-template-columns:1fr;gap:8px;width:100%}.viewer-control-panel .motion-control{min-height:58px}.viewer-control-panel .viewer-buttons{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;width:100%}.viewer-control-panel .viewer-buttons button{height:46px!important;min-width:0!important;padding:0 8px!important;font-size:10px!important}.viewer-control-panel .viewer-buttons button[data-action="remote-record"]{border-color:#e4007c}.viewer-control-panel .viewer-buttons button[data-action="remote-evidence"]{border-color:#ffffff44}

/* Los módulos de trabajo son drawers, no cajas flotantes */
#recordings-panel,#watchlist-panel,#remote-evidence-panel{justify-content:flex-end!important;align-items:stretch!important;place-items:stretch end!important;padding:0!important;background:#02030599!important;backdrop-filter:blur(5px)!important}
#recordings-panel .recordings-card,#watchlist-panel .recordings-card,#remote-evidence-panel .remote-evidence-card{width:min(760px,92vw)!important;height:100dvh!important;max-height:100dvh!important;margin:0!important;border-radius:20px 0 0 20px!important;border-top:0!important;border-right:0!important;border-bottom:0!important;box-shadow:-32px 0 90px #000a!important}

@media(max-width:900px){
  #camera-live.active{grid-template-rows:calc(58px + max(10px, env(safe-area-inset-top))) minmax(0,1fr)}.command-header{padding:max(10px, env(safe-area-inset-top)) 14px 0;gap:10px}.command-header .brand small{display:none}.command-header .brand-name{font-size:2.6em}.command-session{gap:8px}.command-session>span:last-child{display:none}.command-end{padding:0 10px}
  #camera-live .camera-grid{grid-template-columns:1fr!important;grid-template-rows:minmax(210px,42dvh) minmax(0,1fr);height:calc(100dvh - 58px - max(10px, env(safe-area-inset-top)))!important;overflow:hidden}.camera-workspace{padding:10px;grid-template-rows:minmax(0,1fr) auto}.camera-status-rail{grid-template-columns:1fr 1fr 1fr}.camera-status-rail>div{padding:8px}.camera-status-rail>div:nth-child(3){display:none}.camera-status-rail button{padding:0 8px}#camera-live .camera-info{padding:14px!important;border-top:1px solid var(--cc-line);border-left:0!important;overflow-y:hidden!important}.command-panel-head{display:none}.command-nav{flex:0 0 auto}.command-panel{padding-top:14px}#camera-live .command-panel.active{flex-shrink:1;flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.camera-primary-actions{grid-template-columns:1fr 1fr 1fr!important}.access-layout{grid-template-columns:110px 1fr}.access-layout .qr-card.small{width:110px!important;height:110px!important}
  #viewer.active{grid-template-rows:calc(56px + max(10px, env(safe-area-inset-top))) minmax(0,1fr)}.viewer-command-header{padding:max(10px, env(safe-area-inset-top)) 10px 0;gap:8px}.viewer-command-header .viewer-logo small{display:none}.viewer-command-header .live-top{margin-left:auto}.viewer-command-layout{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}.viewer-stage{margin:8px 8px 0;min-height:0;border-radius:14px}.viewer-control-panel{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px;padding:8px;border-left:0;overflow:visible}.viewer-panel-title{display:none}.viewer-metrics{display:none}.viewer-control-panel .live-bottom{display:grid!important;grid-template-columns:150px minmax(0,1fr)!important;grid-column:1/-1;gap:8px!important}.viewer-control-panel .detection-controls{grid-template-columns:1fr!important}.viewer-control-panel .motion-control{min-height:44px!important;padding:5px 8px!important;font-size:9px}.viewer-control-panel .viewer-buttons{grid-template-columns:repeat(4,minmax(0,1fr))!important}.viewer-control-panel .viewer-buttons button{height:44px!important;font-size:9px!important}.viewer-stage .viewer-night-mode{bottom:10px!important;left:10px!important}.viewer-stage .viewer-view-controls{top:10px!important;right:10px!important}
}

@media(orientation:portrait) and (max-width:600px){
  #camera-live .camera-grid{grid-template-rows:minmax(190px,36dvh) minmax(0,1fr)}#camera-live .preview{border-radius:14px!important}.preview #recording-state{right:8px;bottom:8px}.preview #camera-night-mode{left:8px;bottom:8px;max-width:52%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.camera-status-rail{padding-top:8px}.camera-status-rail span{display:none}.camera-status-rail strong{font-size:11px}.camera-info{overflow-y:auto!important}.panel-title small{display:none}.local-tools .actions>button,.local-tools .camera-switch{min-height:46px}.camera-primary-actions{grid-template-columns:1fr 1fr!important}.camera-primary-actions button:last-child{grid-column:1/-1}.alert-selects{grid-template-columns:1fr}.access-layout{grid-template-columns:100px 1fr}.access-layout .qr-card.small{width:100px!important;height:100px!important}.access-layout .keyword-card strong{font-size:16px}
  #viewer.active{grid-template-rows:calc(54px + max(10px, env(safe-area-inset-top))) minmax(0,1fr)}.viewer-command-header{padding:max(10px, env(safe-area-inset-top)) 8px 0;gap:6px}.viewer-command-header #viewer-connection span{display:none}.viewer-command-header .live-top .live-label{display:none}.viewer-command-header>.danger-button{flex:0 0 auto;min-height:30px;padding:0 9px;font-size:8px}.viewer-command-layout{grid-template-rows:minmax(0,1fr) 202px}.viewer-control-panel{display:block;padding:8px;background:#0a0d11}.viewer-control-panel .live-bottom{display:flex!important}.viewer-control-panel .detection-controls{grid-template-columns:1fr 1fr!important;gap:6px}.viewer-control-panel .motion-control{min-height:48px!important}.viewer-control-panel .viewer-buttons{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important}.viewer-control-panel .viewer-buttons button{height:42px!important}.viewer-stage #remote-video{object-fit:contain!important}.viewer-stage .viewer-night-mode{max-width:calc(100% - 20px);font-size:7px!important}.viewer-stage .motion-alert{min-width:min(300px,calc(100% - 24px))!important}
  #recordings-panel .recordings-card,#watchlist-panel .recordings-card,#remote-evidence-panel .remote-evidence-card{width:100vw!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important;border-left:0!important;padding-top:calc(20px + max(10px, env(safe-area-inset-top)))!important}
}

@media(orientation:landscape) and (max-height:600px){
  #camera-live .camera-grid{grid-template-columns:minmax(0,1fr) 360px!important;grid-template-rows:1fr;height:calc(100dvh - 58px - max(10px, env(safe-area-inset-top)))!important}.camera-workspace{padding:8px}.camera-info{padding:10px!important;border-top:0;border-left:1px solid var(--cc-line)!important}.command-panel{padding-top:9px}.panel-title{margin-bottom:8px}.local-tools .actions>button,.local-tools .camera-switch{min-height:40px}.camera-primary-actions{margin-top:8px!important}.camera-status-rail{display:none}.alert-tools p{display:none}.alert-type-row{padding:8px 10px}.alert-recorder{margin-top:7px!important}
  #viewer.active{grid-template-rows:calc(48px + max(10px, env(safe-area-inset-top))) minmax(0,1fr)}.viewer-command-layout{grid-template-columns:minmax(0,1fr) 330px;grid-template-rows:1fr}.viewer-stage{margin:7px}.viewer-control-panel{display:block;padding:8px;border-left:1px solid var(--cc-line);overflow-y:auto}.viewer-control-panel .live-bottom{display:flex!important}.viewer-control-panel .detection-controls{grid-template-columns:1fr 1fr!important}.viewer-control-panel .viewer-buttons{grid-template-columns:repeat(4,1fr)!important}.viewer-metrics,.viewer-panel-title{display:none}
}

/* Explicación editorial del almacenamiento LIBR. */
#recordings-panel .recordings-card{position:relative}.recordings-note{display:block!important}
.storage-explainer-link{display:inline;padding:0;border:0;border-bottom:1px solid #ffffff60;background:transparent;color:var(--cc-green);font:inherit;font-weight:750;cursor:pointer}.storage-explainer-link:hover{border-color:var(--cc-green);color:#fff}
.storage-explainer{position:absolute;z-index:40;left:22px;right:22px;top:104px;display:block;padding:22px;border:1px solid #ffffff38;border-radius:18px;background:linear-gradient(145deg,#151a20f7,#090c10fa);box-shadow:0 28px 80px #000d,0 0 50px #ffffff0d;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);transition:opacity .18s ease,transform .18s ease,visibility .18s}.storage-explainer[aria-hidden="true"]{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px)}.storage-explainer[aria-hidden="false"]{opacity:1;visibility:visible;transform:translateY(0)}.storage-explainer>header{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:16px!important;margin:0 0 12px!important;padding:0 0 14px!important;border-bottom:1px solid var(--cc-line)!important;background:none!important}.storage-explainer>header span{color:var(--cc-green);font-size:8px;font-weight:900;letter-spacing:.17em}.storage-explainer h4{margin:5px 0 0;color:#fff;font-size:22px;letter-spacing:-.035em}.storage-explainer>header button{flex:0 0 auto;width:34px;height:34px;padding:0;border:1px solid var(--cc-line);border-radius:50%;background:#ffffff08;color:#fff;font-size:22px}.storage-explainer>p{max-width:650px;margin:0 0 16px;color:#aeb5bf;font-size:11px;line-height:1.55}.storage-magic-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.storage-magic-grid article{position:relative;display:grid;grid-template-columns:28px 1fr;gap:3px 8px;padding:12px;border:1px solid var(--cc-line);border-radius:12px;background:#ffffff05}.storage-magic-grid i{grid-row:1/3;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:#ffffff10;color:var(--cc-green);font-size:8px;font-style:normal;font-weight:900}.storage-magic-grid strong{font-size:11px}.storage-magic-grid small{color:#929aa5;font-size:9px;line-height:1.4}.storage-magic-signature{display:grid;gap:4px;margin-top:12px;padding:12px 14px;border-left:2px solid var(--cc-green);background:#ffffff07}.storage-magic-signature span{color:var(--cc-green);font-size:8px;font-weight:900;letter-spacing:.15em}.storage-magic-signature strong{font-size:11px}
@media(max-width:600px){.storage-explainer{position:fixed;inset:auto 10px calc(10px + env(safe-area-inset-bottom));top:auto;max-height:calc(100dvh - 20px - env(safe-area-inset-bottom));padding:18px;overflow-y:auto;border-radius:20px}.storage-explainer h4{font-size:20px}.storage-magic-grid{grid-template-columns:1fr}.storage-explainer>p{font-size:10px}}

/* Escala de supervisión: el video ocupa aproximadamente 1/4 del monitor */
@media(min-width:901px){.camera-workspace{grid-template-rows:auto auto!important;align-content:start;overflow-y:auto}.camera-workspace .preview{justify-self:center;width:min(50vw,960px)!important;height:auto!important;aspect-ratio:16/9!important;min-height:0!important}.camera-status-rail{justify-self:center;width:min(50vw,960px)}}

/* Evidencias detiene sólo el render visible; la vigilancia WebRTC sigue activa. */
.camera-workspace,.viewer-stage{transition:filter .22s ease,opacity .22s ease,transform .22s ease}.media-section-open .camera-workspace,.media-section-open .viewer-stage{filter:blur(12px) brightness(.34) saturate(.55);opacity:.72;transform:scale(.988);pointer-events:none}.media-section-open .preview:after,.media-section-open .viewer-stage:after{content:'VIDEO PAUSADO · EVIDENCIAS ABIERTAS';position:absolute;inset:0;z-index:30;display:grid;place-items:center;background:#05060855;color:#fff;font-size:10px;font-weight:900;letter-spacing:.15em;text-align:center}.media-section-open .viewer-stage:after{border-radius:18px}
@media(max-width:600px){.media-section-open .camera-workspace,.media-section-open .viewer-stage{filter:blur(8px) brightness(.32);transform:none}}

/* Imagen profesional */
#camera-live .advanced-mode{width:100%;margin:16px 0 4px;padding:0;border:1px solid #ffffff18;border-radius:16px;background:linear-gradient(180deg,#141820,#0d1015);overflow:hidden;box-shadow:0 18px 45px #0003}
#camera-live .advanced-mode summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:12px 14px;list-style:none;cursor:pointer;color:#f4f6f8}#camera-live .advanced-mode summary::-webkit-details-marker{display:none}
.advanced-summary-copy{display:flex;align-items:center;gap:11px;min-width:0}.advanced-summary-copy>i{position:relative;flex:0 0 auto;width:34px;height:34px;border:1px solid #ffffff20;border-radius:11px;background:linear-gradient(145deg,#252b34,#11151a)}.advanced-summary-copy>i:before{content:'';position:absolute;inset:8px;border:1.5px solid #fff;border-radius:50%}.advanced-summary-copy>i:after{content:'';position:absolute;left:15px;top:15px;width:4px;height:4px;border-radius:50%;background:#e4007c;box-shadow:0 0 12px #e4007c}
.advanced-summary-copy span{display:grid;gap:3px}.advanced-summary-copy b{font-size:13px}.advanced-summary-copy small{color:var(--cc-muted);font-size:9px;font-weight:600}#image-settings-summary{display:flex;align-items:center;gap:7px;flex:0 0 auto;color:#dce0e5;font-size:9px;font-weight:800;letter-spacing:.04em}#image-settings-summary:after{content:'⌄';color:#7f8791;font-size:13px;line-height:1;transition:transform .2s}#camera-live .advanced-mode[open] #image-settings-summary:after{transform:rotate(180deg)}#camera-live .advanced-mode[open] summary{border-bottom:1px solid #ffffff12}
.advanced-console{display:grid;gap:10px;padding:10px}.image-pro-panel,.advanced-analysis-panel{padding:13px;border:1px solid #ffffff12;border-radius:12px;background:#090c10}.image-section-head{display:flex;align-items:end;justify-content:space-between;gap:10px;margin-bottom:13px}.image-section-head>div{display:grid;gap:3px}.image-section-head span{color:#e4007c;font-size:7px;font-weight:900;letter-spacing:.18em}.image-section-head strong{font-size:13px}.image-section-head small{color:var(--cc-muted);font-size:8px;text-align:right}
.image-control-block{padding:11px 0;border-top:1px solid #ffffff0d}.image-control-block:first-of-type{border-top:0;padding-top:0}.image-control-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.image-control-title strong{font-size:10px}.image-control-title small{color:var(--cc-muted);font-size:8px}.image-quality-selector,.image-preset-selector{display:grid;gap:5px}.image-quality-selector{grid-template-columns:repeat(3,1fr)}.image-preset-selector{grid-template-columns:repeat(4,1fr)}
.image-quality-selector button,.image-preset-selector button{min-width:0;min-height:43px;padding:6px;border:1px solid #ffffff16;border-radius:9px;background:#12161c;color:#99a1ac;font-size:9px;font-weight:750}.image-quality-selector button{display:grid;place-content:center;gap:2px}.image-quality-selector b{color:#e8ebef;font-size:11px}.image-quality-selector small{font-size:7px;color:#79818c}.image-quality-selector button.active,.image-preset-selector button.active{border-color:#e4007c99;background:#e4007c15;color:#fff;box-shadow:inset 0 0 0 1px #e4007c22}.image-quality-selector button.active b{color:#fff}
.image-quality-fixed{margin:0;padding:9px 10px;border:1px solid #ffffff16;border-radius:9px;background:#12161c;color:#99a1ac;font-size:9px;line-height:1.5}
.image-tuning-grid{display:grid;gap:8px;padding:11px 0;border-top:1px solid #ffffff0d}.image-tuning-grid label{display:grid;gap:7px}.image-tuning-grid label>span{display:flex;align-items:center;justify-content:space-between}.image-tuning-grid b{color:#bbc1c9;font-size:9px}.image-tuning-grid output{min-width:30px;padding:3px 6px;border-radius:6px;background:#ffffff0a;color:#fff;font-family:var(--mono);font-size:8px;text-align:center}.image-tuning-grid input[type=range]{width:100%!important;height:16px;margin:0!important;padding:0!important;background:transparent}.image-tuning-grid input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:99px;background:linear-gradient(90deg,#e4007c,#ffffff24)}.image-tuning-grid input[type=range]::-webkit-slider-thumb{width:17px;height:17px;margin-top:-7px;border:2px solid #0d1015;border-radius:50%;background:#fff;box-shadow:0 2px 9px #000;-webkit-appearance:none}
.image-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding-top:11px;border-top:1px solid #ffffff0d}.image-feature-toggle{display:flex;align-items:center;gap:8px;min-height:52px;padding:8px;border:1px solid #ffffff12;border-radius:10px;background:#11151a;cursor:pointer}.image-feature-toggle>input{position:absolute;opacity:0;pointer-events:none}.image-feature-toggle .ios-switch{flex:0 0 auto;transform:scale(.78);transform-origin:left center;margin-right:-7px}.image-feature-toggle input:checked+.ios-switch{background:#e4007c;box-shadow:inset 0 0 0 1px #ffffff18,0 0 14px #e4007c3d}.image-feature-toggle input:checked+.ios-switch:after{transform:translateX(20px)}.image-feature-toggle>span{display:grid;gap:2px}.image-feature-toggle strong{font-size:9px}.image-feature-toggle small{color:var(--cc-muted);font-size:7px;line-height:1.25}.image-feature-toggle:has(input:checked){border-color:#e4007c55;background:#e4007c0b}.image-feature-toggle.locked{cursor:default}.image-feature-toggle.locked .ios-switch{opacity:.7}
.image-pro-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:11px;padding-top:10px;border-top:1px solid #ffffff0d}.image-pro-footer>span{color:#858e99;font-size:7px}.image-pro-footer>span i{display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:#fff;box-shadow:0 0 9px #fff8}.image-pro-footer>span b{color:#cbd0d6}.image-pro-footer button{min-height:28px;padding:0 9px;border:1px solid #ffffff18;border-radius:8px;background:transparent;color:#9ca4ae;font-size:8px}.advanced-analysis-panel .advanced-grid{margin-top:0}.advanced-analysis-panel .advanced-grid label{font-size:9px}.advanced-analysis-panel .advanced-grid select{border-radius:9px;background:#11151b}
@media(max-width:600px){#camera-live .advanced-mode{border-radius:14px}.advanced-console{padding:8px}.image-pro-panel,.advanced-analysis-panel{padding:11px}.image-preset-selector{grid-template-columns:1fr 1fr}.image-feature-grid{grid-template-columns:1fr}.image-section-head small{display:none}.image-control-title small{max-width:55%;text-align:right}.image-pro-footer>span{max-width:68%;line-height:1.35}}
@media(orientation:landscape) and (max-height:600px){#camera-live .advanced-mode summary{min-height:48px;padding:7px 10px}.advanced-summary-copy>i{width:28px;height:28px}.advanced-summary-copy>i:before{inset:6px}.advanced-summary-copy>i:after{left:12px;top:12px}.advanced-console{grid-template-columns:1.15fr .85fr}.image-pro-panel,.advanced-analysis-panel{padding:9px}.image-control-block,.image-tuning-grid{padding:7px 0}.image-quality-selector button,.image-preset-selector button{min-height:35px}.image-feature-grid{padding-top:7px}.image-feature-toggle{min-height:42px}.image-pro-footer{margin-top:7px;padding-top:7px}}

/* Vigilancia inteligente · las zonas sólo existen visualmente dentro del editor */
#camera-live .ai-controls-mode{margin-top:10px}.ai-summary-copy>i:before{inset:8px;border-radius:7px;border-color:#fff9}.ai-summary-copy>i:after{left:15px;top:15px;width:5px;height:5px;box-shadow:0 0 0 4px #e4007c20,0 0 14px #e4007c}.ai-summary-copy>i{background:radial-gradient(circle at center,#e4007c18 0 21%,transparent 22%),linear-gradient(145deg,#252b34,#11151a)}
#ai-zone-summary{display:flex;align-items:center;gap:7px;flex:0 0 auto;color:#dce0e5;font-size:9px;font-weight:800;letter-spacing:.04em}#ai-zone-summary:after{content:'⌄';color:#7f8791;font-size:13px;line-height:1;transition:transform .2s}#camera-live .ai-controls-mode[open] #ai-zone-summary:after{transform:rotate(180deg)}
.ai-zone-console{padding:14px;background:#090c10}.ai-zone-intro{margin:0 0 13px;color:#929ba6;font-size:9px;line-height:1.5}.ai-zone-actions{display:grid;grid-template-columns:1fr;gap:7px}.ai-zone-actions button{display:flex;align-items:center;gap:9px;min-height:58px;padding:9px;border:1px solid #ffffff16;border-radius:11px;background:#12161c;color:#eef1f4;text-align:left}.ai-zone-actions button>i{position:relative;flex:0 0 auto;width:27px;height:27px;border:1px solid #e4007c99;border-radius:8px;background:#e4007c12}.ai-zone-actions button>i:after{content:'';position:absolute;inset:6px;border:1px dashed #ff4dab}.ai-zone-actions button span{display:grid;gap:3px}.ai-zone-actions b{font-size:9px}.ai-zone-actions small{color:#8c95a0;font-size:7px;line-height:1.3}
.ai-zone-list{display:grid;gap:6px;margin-top:11px}.ai-zone-empty{display:grid;place-items:center;min-height:66px;padding:13px;border:1px dashed #ffffff18;border-radius:10px;color:#737d88;font-size:8px;text-align:center}.ai-zone-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;padding:9px;border:1px solid #ffffff12;border-radius:10px;background:#10141a}.ai-zone-swatch{width:8px;height:30px;border-radius:99px;background:#e4007c;box-shadow:0 0 12px #e4007c55}.ai-zone-copy{display:grid;gap:3px;min-width:0}.ai-zone-copy strong{overflow:hidden;color:#eef1f4;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.ai-zone-copy small{color:#828b96;font-size:7px}.ai-zone-tools{display:flex;gap:4px}.ai-zone-tools button{min-height:28px;padding:0 8px;border:1px solid #ffffff16;border-radius:7px;background:#161b22;color:#aeb5be;font-size:7px}.ai-zone-tools button[data-action="zone-delete"]{color:#ff7dbf}.ai-zone-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:11px;padding-top:10px;border-top:1px solid #ffffff0d;color:#858e99;font-size:7px}.ai-zone-footer>span>i{display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:#65dfac;box-shadow:0 0 9px #65dfac77}.ai-zone-footer b{color:#cbd0d6}.ai-zone-footer small{font-size:7px}
.smart-automatic-grid{display:grid;gap:6px;margin-top:11px;padding-top:11px;border-top:1px solid #ffffff0d}.smart-automatic-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;min-height:50px;padding:8px 9px;border:1px solid #ffffff12;border-radius:10px;background:#10151a}.smart-automatic-row>i{position:relative;width:26px;height:26px;border:1px solid #65dfac66;border-radius:8px;background:#65dfac0e}.smart-automatic-row>i:after{content:'';position:absolute;inset:7px;border-radius:50%;background:#65dfac;box-shadow:0 0 10px #65dfac88}.smart-automatic-row.context>i{border-color:#e4007c66;background:#e4007c0d}.smart-automatic-row.context>i:after{background:#e4007c;box-shadow:0 0 10px #e4007c88}.smart-automatic-row>span{display:grid;gap:3px}.smart-automatic-row b{font-size:9px}.smart-automatic-row small{color:#858e99;font-size:7px;line-height:1.3}.smart-automatic-row em{padding:4px 6px;border:1px solid #ffffff12;border-radius:6px;color:#9099a4;font-size:6px;font-style:normal;font-weight:900;letter-spacing:.08em}
.smart-automatic-row.alert{border-color:#ff3b8170;background:#ff2d640d}.smart-automatic-row.alert>i{border-color:#ff3b8180;background:#ff2d6418}.smart-automatic-row.alert>i:after{background:#ff3b81;box-shadow:0 0 12px #ff3b81aa}.smart-automatic-row.alert small{color:#ff9fbe}
.camera-protection-control{cursor:pointer}.camera-protection-control>i{border-color:#ffffff24;background:#ffffff08}.camera-protection-control>i:after{background:#68707c;box-shadow:none}.camera-protection-control.enabled{border-color:#e4007c55;background:#e4007c0b}.camera-protection-control.enabled>i{border-color:#65dfac66;background:#65dfac0e}.camera-protection-control.enabled>i:after{background:#65dfac;box-shadow:0 0 10px #65dfac88}.smart-protection-toggle{display:flex!important;align-items:center;gap:3px}.smart-protection-toggle>input{position:absolute;opacity:0;pointer-events:none}.smart-protection-toggle .ios-switch{display:block;flex:0 0 auto;transform:scale(.66);transform-origin:right center;margin-left:-12px;margin-right:-5px}.smart-protection-toggle input:checked+.ios-switch{background:#e4007c;box-shadow:inset 0 0 0 1px #ffffff18,0 0 14px #e4007c3d}.smart-protection-toggle input:checked+.ios-switch:after{transform:translateX(20px)}.smart-protection-toggle em{min-width:26px;text-align:center}.camera-protection-control.enabled .smart-protection-toggle em{border-color:#e4007c55;color:#ff77b7}
.zone-editor-modal{position:fixed;inset:0;z-index:1000;display:none;place-items:center;padding:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom));background:#030405e8;backdrop-filter:blur(18px)}.zone-editor-modal.open{display:grid}.zone-editor-sheet{width:min(94vw,720px);max-height:calc(100vh - 28px);max-height:calc(100dvh - 28px);overflow:auto;border:1px solid #ffffff22;border-radius:18px;background:#0c1015;box-shadow:0 30px 100px #000b;color:#f4f6f8}.zone-editor-sheet>header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #ffffff12}.zone-editor-sheet>header>div{display:grid;gap:3px}.zone-editor-sheet>header span{color:#e4007c;font-size:7px;font-weight:900;letter-spacing:.18em}.zone-editor-sheet>header strong{font-size:14px}.zone-editor-sheet>header button{width:34px;height:34px;padding:0;border:1px solid #ffffff18;border-radius:10px;background:#151a21;color:#fff;font-size:22px;line-height:1}
.zone-editor-stage{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#020304;touch-action:none;user-select:none}.zone-editor-stage video,.zone-editor-stage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.zone-editor-stage canvas{z-index:2;cursor:crosshair}.zone-editor-stage canvas:focus-visible{outline:2px solid #e4007c;outline-offset:-2px}.zone-editor-stage>div{position:absolute;z-index:3;left:50%;bottom:10px;transform:translateX(-50%);max-width:90%;padding:6px 9px;border-radius:99px;background:#05070acc;color:#eef1f4;font-size:8px;font-weight:750;text-align:center;pointer-events:none}.zone-editor-stage.has-draft>div{opacity:0}
.zone-editor-fields{display:grid;grid-template-columns:1.4fr 1fr;gap:8px;padding:13px 14px 8px}.zone-editor-fields label{display:grid;gap:5px}.zone-editor-fields label>span{color:#9ca5af;font-size:8px;font-weight:750}.zone-editor-fields input,.zone-editor-fields select{width:100%;min-height:42px;margin:0!important;padding:0 11px!important;border:1px solid #ffffff1d;border-radius:10px;background:#151a21;color:#fff;font-size:11px}.zone-editor-sheet>footer{display:flex;justify-content:flex-end;gap:7px;padding:12px 14px 14px}.zone-editor-sheet>footer button{min-height:40px;margin:0;padding:0 14px;font-size:9px}
.zone-editor-fields select:disabled{opacity:.52}.zone-editor-open{overflow:hidden}
@media(max-width:600px){.ai-zone-actions{grid-template-columns:1fr}.ai-zone-row{gap:7px}.ai-zone-tools button{min-height:34px;padding:0 7px}.zone-editor-modal{align-items:end;padding:0}.zone-editor-sheet{width:100%;max-height:96vh;max-height:96dvh;border-radius:18px 18px 0 0}.zone-editor-fields{grid-template-columns:1fr}.zone-editor-stage>div{bottom:7px}.zone-editor-sheet>footer{position:sticky;bottom:0;background:#0c1015eF;backdrop-filter:blur(10px)}}
@media(max-width:420px){.smart-automatic-row{grid-template-columns:auto minmax(0,1fr)}.smart-automatic-row em{grid-column:2;justify-self:start}.ai-zone-row{grid-template-columns:auto minmax(0,1fr)}.ai-zone-tools{grid-column:2;justify-self:start}}
/* #viewer normalmente es un grid fijo de 100dvh sin scroll (pensado para una sola
   cámara). Al abrir "Otras cámaras" pasa a haber 3 bloques (header, video propio,
   lista) en vez de 2 — sin este cambio el grid comprime el video para que todo entre
   en una sola pantalla. Con .has-panel-inline se permite scroll y el video mantiene
   una altura fija razonable en vez de achicarse. */
#viewer.active.has-panel-inline{display:flex!important;flex-direction:column;height:auto!important;min-height:100dvh!important;overflow-y:auto!important}
#viewer.active.has-panel-inline .viewer-command-header{flex:0 0 auto;position:sticky;top:0;z-index:30}
#viewer.active.has-panel-inline .viewer-command-layout{flex:0 0 auto;height:70vh;min-height:420px;display:grid}
#viewer.active.has-panel-inline .panel-inline{flex:0 0 auto}
html.panel-scroll-snap{scroll-snap-type:y mandatory}
html.panel-scroll-snap .viewer-command-layout,html.panel-scroll-snap .panel-inline{scroll-snap-align:start}
.viewer-buttons button[data-action="activity"]{border-color:#65dfac55!important}.viewer-buttons button[data-action="activity"] b{display:inline-grid;place-items:center;min-width:16px;height:16px;margin-left:4px;padding:0 4px;border-radius:99px;background:#65dfac;color:#07110d;font-size:7px}
