.mode-title { margin: 20px 0 10px; color: #d9dde2; font-size: 12px; font-weight: 800; }
#setup, #diagnostics, #session-summary { overflow-y: auto; }
#setup .center { padding: 30px 0; }
.mode-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; width: min(100%, 720px); margin: 0 auto 18px; }
.mode-card { min-height: 104px; padding: 14px; border: 1px solid #343a43; border-radius: 0; background: transparent; color: #fff; text-align: left; font-size: 12px; font-weight: 750; }
.mode-card span { display: block; margin-bottom: 9px; font-family: var(--mono); font-size: 11px; font-weight: 500; color: #6b7278; letter-spacing: .08em; }
.mode-card strong,.mode-card small { display: block; }.mode-card small { margin-top: 6px; color: #9299a3; font-weight: 500; line-height: 1.35; }
.mode-card.active { border-color: var(--mode-color,var(--green)); background: #ffffff12; box-shadow: inset 0 0 0 1px var(--mode-color,var(--green)); }
.activation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: min(100%,620px); margin: 0 auto 14px; }
.activation-control,.camera-switch { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #343a43; border-radius: 8px; background: #0b0e12; text-align: left; cursor: pointer; }
.activation-control input,.camera-switch input { position: absolute; opacity: 0; pointer-events: none; width: auto!important; margin: 0!important; }
.activation-control input:checked + .ios-switch,.camera-switch input:checked + .ios-switch { background: #e4007c; box-shadow: inset 0 0 0 1px #ffffff18,0 0 16px #e4007c44; }
.activation-control input:checked + .ios-switch:after,.camera-switch input:checked + .ios-switch:after { transform: translateX(20px); }
.activation-control:has(input:checked),.camera-switch:has(input:checked) { border-color: #e4007c88; background: #e4007c0c; }
.activation-control span strong,.activation-control span small { display: block; }.activation-control span small { margin-top: 3px; color: #8f96a0; font-size: 9px; }
.privacy-control{grid-column:1/-1}.privacy-control:has(input:checked){border-color:#e4007c!important;background:#e4007c12!important}.privacy-control input:checked + .ios-switch{background:#e4007c}
.advanced-mode { width: min(100%,720px); margin: 0 auto 18px; padding: 12px; border: 1px solid #303640; border-radius: 8px; text-align: left; }
.advanced-mode summary { cursor: pointer; color: #cbd0d6; font-size: 12px; font-weight: 750; }
.advanced-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.advanced-grid label { color: #aeb5be; font-size: 10px; font-weight: 700; }.advanced-grid select { display: block; width: 100%; margin-top: 5px; padding: 9px; background: #0c0e11; color: #fff; border: 1px solid #3a414b; border-radius: 5px; }
.advanced-grid input { width: 100%!important; margin: 6px 0!important; padding: 0!important; font-size: initial!important; }.advanced-grid input[type=checkbox] { display: inline!important; width: auto!important; }
.manual-record { margin: 0; min-height: 44px; }.manual-record.recording { background: #e4007c; color: #fff; animation: pulse .8s infinite; }.camera-switch { padding: 7px 11px; font-size: 11px; }
.camera-primary-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.camera-primary-actions button{margin:0}.local-tools{margin-top:10px;color:#969da7}.local-tools summary{cursor:pointer;font-size:11px;font-weight:750}.local-tools .actions{margin-top:9px}.remote-record-button.active{background:#e4007c!important;border-color:#e4007c!important;color:#fff}#switch-ultrawide.active{background:#e4007c;border-color:#e4007c;color:#fff}.drive-toolbar small{display:block;color:#aab1ba}.drive-toolbar button:disabled{opacity:.45;cursor:not-allowed}
.interest-primary{border-color:#ffffff!important;color:#ffffff!important}.interest-primary b{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;margin-left:5px;border-radius:999px;background:#ffffff;color:#0a0a0a}
#remote-video{transform-origin:center center;transition:transform .18s ease;will-change:transform;touch-action:none;user-select:none;-webkit-user-select:none}#remote-video.zoomed{cursor:grab}#remote-video.zoomed.panning{cursor:grabbing;transition:none}#viewer:fullscreen{background:#000}#viewer:fullscreen #remote-video{object-fit:contain}
.viewer-view-controls{position:absolute;z-index:6;top:18px;right:18px;display:flex;gap:4px;padding:4px;border:1px solid #ffffff30;border-radius:999px;background:#080a0dcc}.viewer-view-controls button{min-width:38px;height:34px;border:0;border-radius:999px;background:transparent;color:#fff;font-size:12px;font-weight:800}.viewer-view-controls button:active{background:#ffffff22}
.setup-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: min(100%, 620px); margin: 0 auto 12px; }
.setup-options label { text-align: left; color: #b9bfc7; font-size: 11px; font-weight: 750; }
.setup-options select { width: 100%; margin-top: 6px; padding: 12px; border: 1px solid #3a414b; border-radius: 6px; background: #0c0e11; color: #fff; }
.diagnostic-card { width: min(100%, 670px); margin: auto; }
.browser-diagnostic{display:flex;align-items:center;gap:12px;margin:20px 0 10px;padding:15px;border:1px solid #3a4049;border-radius:12px;background:#0b0e12;text-align:left}.browser-diagnostic>i{width:13px;height:13px;flex:0 0 13px;border:3px solid #e4007c;border-radius:50%;box-shadow:0 0 18px #e4007c66}.browser-diagnostic span{min-width:0;flex:1}.browser-diagnostic b,.browser-diagnostic small{display:block}.browser-diagnostic b{font-size:14px}.browser-diagnostic small{margin-top:4px;color:#9299a3;font-size:11px}.browser-diagnostic em{padding:6px 8px;border-radius:999px;background:#e4007c18;color:#ff66b8;font-size:9px;font-style:normal;font-weight:900;letter-spacing:.08em}.diagnostic-legend{display:flex;flex-wrap:wrap;gap:12px;margin:10px 2px 14px;color:#9299a3;font-size:10px}.diagnostic-legend span{display:flex;align-items:center;gap:5px}.diagnostic-legend i{width:7px;height:7px;border-radius:50%}.diagnostic-legend .ok{background:#fff}.diagnostic-legend .warn{background:#8d96a3}.diagnostic-legend .fail{background:#e4007c}.diagnostic-group{padding:9px 15px;border-bottom:1px solid #303640;background:#ffffff08;color:#8f96a0;font-size:9px;font-weight:900;letter-spacing:.13em}
.diagnostic-list { margin: 24px 0; border: 1px solid #303640; border-radius: 10px; overflow: hidden; text-align: left; }
.diagnostic-item { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; min-height: 48px; padding: 0 15px; border-bottom: 1px solid #272c33; }
.diagnostic-item:last-child { border-bottom: 0; }
.diagnostic-item i { width: 10px; height: 10px; border-radius: 50%; background: #69717c; }
.diagnostic-item.ok i { background: #ffffff; box-shadow: 0 0 12px #ffffff88; }
.diagnostic-item.warn i { background: #8d96a3; }
.diagnostic-item.fail i { background: #e4007c; }
.diagnostic-item span { font-size: 13px; font-weight: 750; }
.diagnostic-item small { color: #9299a3; font-size: 11px; }
.diagnostic-warning { padding: 11px 13px; margin: 8px 0; background: #ffffff0e; border: 1px solid #ffffff33; border-radius: 6px; color: #d6d9dd; font-size: 12px; }
.browser-recommendation{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:13px;margin:14px 0 20px;padding:15px;border:1px solid #e4007c66;border-radius:12px;background:#e4007c0b;text-align:left}.browser-recommendation[hidden]{display:none}.browser-recommendation-logo{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:linear-gradient(145deg,#19c37d,#168eea);color:#fff;font-size:25px;font-weight:900}.browser-recommendation span{min-width:0}.browser-recommendation small,.browser-recommendation b{display:block}.browser-recommendation small{color:#ff69b9;font-size:8px;font-weight:900;letter-spacing:.1em}.browser-recommendation b{margin-top:4px;font-size:14px}.browser-recommendation p{margin:4px 0 0;color:#9da4ad;font-size:10px;line-height:1.35}.browser-recommendation a{padding:11px 13px;border-radius:7px;background:#e4007c;color:#fff;text-decoration:none;font-size:10px;font-weight:900;white-space:nowrap}@media(max-width:600px){.browser-recommendation{grid-template-columns:44px 1fr}.browser-recommendation-logo{width:44px;height:44px}.browser-recommendation a{grid-column:1/-1;text-align:center}}
.connection-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 999px; background: #11151a; font-size: 10px; font-weight: 850; letter-spacing: .07em; }
.connection-pill i { width: 8px; height: 8px; border-radius: 50%; background: #ffffff; }
.connection-pill.good i { background: #8d96a3; }.connection-pill.weak i { background: #e4007c; }
#viewer-connection { position: absolute; z-index: 4; top: 39px; left: 50%; transform: translateX(-50%); }
.sound-indicator { position: absolute; z-index: 4; left: 24px; top: 88px; display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: #0a0c0fe6; border: 1px solid #ffffff2b; border-radius: 999px; font-size: 11px; font-weight: 800; }
.sound-indicator i { width: 9px; height: 9px; border-radius: 50%; background: #ffffff; }
.sound-indicator.moderate i { background: #8d96a3; }.sound-indicator.loud i { background: #e4007c; box-shadow: 0 0 14px #e4007c; }
.detection-controls { display: flex; gap: 8px; margin-right: auto; }
.detection-controls .motion-control { margin-right: 0; }
.face-summary { position: absolute; z-index: 4; right: 24px; top: 132px; display: none; align-items: baseline; gap: 7px; padding: 9px 12px; background: #0a0c0fe6; border: 1px solid #ffffff2b; border-radius: 12px; color: #fff; }
.face-summary.active { display: flex; }
.face-summary strong { color: #ffffff; font-size: 20px; }.face-summary span { font-size: 10px; font-weight: 750; }.face-summary small { color: #a6acb4; font-size: 9px; }
.talk-button.active { color: #050608; background: #e4007c; border-color: #e4007c; }
.night-status { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 18px; color: #7f8791; }
.night-status .night-brand { color: #fff; font-size: clamp(40px, 8vw, 72px); font-weight: 900; letter-spacing: .04em; gap: 14px; }
.night-status .night-brand > span:first-child { font-size: 1em; }
.night-status .night-brand small { font-size: .22em; letter-spacing: .1em; }
.night-status .night-live { display: flex; align-items: center; gap: 8px; color: #b8bec6; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.night-status time { color: #aeb5be; font-size: clamp(38px, 6vw, 72px); font-variant-numeric: tabular-nums; }
.night-actions { display: flex; gap: 8px; }
.black{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;min-height:100dvh!important;background:#000!important;z-index:100}.black .night-status{transition:opacity .35s}.black.fully-dark .night-status{opacity:0;pointer-events:none}.night-hint{color:#686e76;font-size:10px;text-align:center}.fullscreen-request{display:none;min-height:48px}.black.fullscreen-needed .fullscreen-request{display:flex}
.summary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; width: min(100%, 560px); margin: 25px auto; }
.summary-grid div { padding: 18px; background: #0c0f13; border: 1px solid #303640; border-radius: 8px; }
.summary-grid strong { display: block; color: var(--green); font-size: 28px; }.summary-grid span { color: #959ca6; font-size: 11px; }
@media(max-width:600px){.mode-grid{grid-template-columns:repeat(2,1fr)}.setup-options{grid-template-columns:1fr}.sound-indicator{top:82px;left:16px}.motion-summary{top:124px}.face-summary{top:166px;left:16px;right:16px;justify-content:center}.motion-alert{top:210px}.mobile-controls{flex-direction:column;align-items:stretch}.detection-controls{width:100%;display:grid;grid-template-columns:1fr 1fr}.detection-controls .motion-control{justify-content:space-between}.viewer-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.viewer-buttons button{min-width:0;padding:0 6px;font-size:10px}#viewer-connection{top:20px}.diagnostic-item{grid-template-columns:20px 1fr}.diagnostic-item small{grid-column:2}.summary-grid{grid-template-columns:1fr 1fr}.browser-diagnostic{align-items:flex-start}.browser-diagnostic em{font-size:8px}.diagnostic-card{padding-bottom:28px}}
@media(max-width:600px){.activation-grid,.advanced-grid{grid-template-columns:1fr}.mode-card{min-height:112px;padding:11px}.mode-card small{font-size:9px}}
@media(max-width:600px){.activation-control input:checked + .ios-switch:after,.camera-switch input:checked + .ios-switch:after{transform:translateX(18px)}}
@media(max-width:600px){#watchlist-panel{padding:12px;align-items:center}#watchlist-panel .watchlist-card{max-height:calc(100dvh - 24px);padding:18px}.camera-primary-actions{display:grid;grid-template-columns:1fr 1fr}.camera-primary-actions button{min-width:0}}
.alert-tools{margin-top:12px;padding:12px;border:1px solid #e4007c;border-radius:12px;background:#0b0e12}.alert-tools summary{cursor:pointer;color:#fff;font-size:12px;font-weight:850}.alert-tools p{color:#9ba2ab;font-size:12px;line-height:1.45}.alert-type-grid{display:flex;flex-direction:column;gap:8px;margin:12px 0}.alert-type-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 12px;border:1px solid #ffffff1f;border-radius:10px}.alert-type-row strong{flex:1 1 130px;font-size:13px;color:#e8ebef}.alert-type-row label{display:flex;align-items:center;gap:6px;font-size:12px;color:#c3c8ce;white-space:nowrap}.alert-type-row input{accent-color:#e4007c}.alert-recorder{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:12px}.alert-recorder button{min-height:38px}.alert-recorder span{color:#aeb4bc;font-size:12px}.alert-recorder span.recording{color:#e4007c;font-weight:850}.alert-tools.unavailable{opacity:.5;pointer-events:none}.alert-tools.unavailable:after{content:'Disponible solo en Seguridad hogar';display:block;margin-top:8px;color:#ff6fb8;font-size:10px}@media(max-width:600px){.alert-recorder button{width:100%}}

.panel-inline{display:none;margin:18px clamp(24px,6vw,40px) 0;border-top:1px solid #292e36;padding-top:16px}
.panel-inline.active{display:block}
.panel-inline>header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.panel-inline>header strong{font-size:14px;color:#e8ebef}
.panel-inline>header button{margin-left:auto;min-height:38px;padding:0 14px;border:1px solid #ffffff35;border-radius:8px;background:#101318;color:#fff;font-size:12px}
.panel-inline-list{display:flex;flex-direction:row;align-items:flex-start;gap:12px;overflow-x:auto;overflow-y:visible;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;padding:2px 2px 10px;scroll-padding:0 6vw}
.panel-inline-empty{padding:24px 10px;color:#8f96a0;font-size:12px;white-space:nowrap}
.panel-inline-row{flex:0 0 88%;scroll-snap-align:center;border:1px solid #292e36;border-radius:12px;overflow:hidden;background:#0a0b0d;transition:border-color .2s}
.panel-inline-row.active{border-color:#e4007c}
.panel-inline-row-head{display:flex;align-items:center;gap:8px;padding:10px 12px}
.status-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:#5b626c;box-shadow:0 0 0 3px #5b626c22;transition:background .25s,box-shadow .25s}
.status-dot[data-status="connecting"]{background:#e8b923;box-shadow:0 0 0 3px #e8b92322;animation:statusPulse 1.4s ease-in-out infinite}
.status-dot[data-status="live"]{background:#2ecc71;box-shadow:0 0 0 3px #2ecc7122}
.status-dot[data-status="stalled"]{background:#e4483a;box-shadow:0 0 0 3px #e4483a22;animation:statusPulse 1.4s ease-in-out infinite}
@keyframes statusPulse{0%,100%{opacity:1}50%{opacity:.45}}
.panel-inline-row-head strong{flex:1 1 auto;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel-inline-row-head .panel-route{flex:0 0 auto;color:#9098a8;font-size:10px;letter-spacing:.02em;white-space:nowrap}
.panel-inline-row-head button[data-action="panel-remove"]{width:26px;height:26px;flex:0 0 auto;border:1px solid #ffffff30;border-radius:50%;background:#141820;color:#fff;font-size:14px;line-height:1}
.panel-inline-stage{position:relative;isolation:isolate;width:100%;aspect-ratio:16/9;overflow:hidden;background:#000;border-top:1px solid #292e36}
.panel-inline-stage video{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:contain}
.panel-inline-wait{display:none!important}
.panel-inline-alert{position:absolute;left:50%;top:12px;transform:translate(-50%,-10px);opacity:0;z-index:20;display:flex;align-items:center;justify-content:center;min-height:34px;background:#e4007c;color:#fff;padding:7px 14px;border:1px solid #ffffff66;border-radius:999px;box-shadow:0 10px 34px #000b,0 0 28px #e4007c66;font-size:10px;font-weight:900;letter-spacing:.08em;text-align:center;white-space:nowrap;max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis;transition:.2s;pointer-events:none}
.panel-inline-alert.show{opacity:1;transform:translate(-50%,0)}
#global-viewer-alert{position:fixed;z-index:100;left:50%;top:50%;display:flex;align-items:center;justify-content:center;width:max-content;max-width:calc(100vw - 32px);min-height:52px;padding:14px 20px;border:1px solid #ffffff88;border-radius:999px;background:#e4007cf2;color:#fff;box-shadow:0 22px 70px #000d,0 0 45px #e4007c88;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);font-size:clamp(12px,3.2vw,17px);font-weight:950;letter-spacing:.055em;line-height:1.25;text-align:center;opacity:0;visibility:hidden;transform:translate(-50%,-42%) scale(.94);transition:opacity .2s,transform .2s,visibility .2s;pointer-events:none}
#global-viewer-alert.show{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.panel-inline-controls{padding:8px 10px 10px;border-top:1px solid #292e36}
.panel-detect-row{display:flex;gap:10px;padding:2px 2px 8px;border-bottom:1px solid #ffffff14;margin-bottom:8px}
.panel-switch-row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:1 1 0;min-width:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.panel-switch-label{font-size:12px;color:#c3c8ce;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel-switch{position:relative;flex:0 0 auto;width:38px;height:22px}
.panel-switch input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer;z-index:1}
.panel-switch input:disabled{cursor:default}
.panel-switch-track{position:absolute;inset:0;background:#3a3d42;border-radius:999px;transition:background .18s}
.panel-switch-knob{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .18s;box-shadow:0 1px 3px #00000066}
.panel-switch.active .panel-switch-track{background:#e4007c}
.panel-switch.active .panel-switch-knob{transform:translateX(16px)}
.panel-icon-bar{display:flex;flex-wrap:nowrap;justify-content:space-between;gap:4px}
.panel-icon-btn{position:relative;display:flex;align-items:center;justify-content:center;flex:1 1 0;min-width:0;max-width:48px;aspect-ratio:1;padding:0;border:1px solid #ffffff22;border-radius:10px;background:#141820;color:#c3c8ce;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .15s,border-color .15s,color .15s}
.panel-icon-btn .picon{display:flex;align-items:center;justify-content:center;width:17px;height:17px}
.panel-icon-btn .picon svg{width:100%;height:100%}
.panel-icon-btn.active{background:#2a0f1c;border-color:#e4007c;color:#ff6fb8}
.panel-icon-btn:active{transform:scale(.94)}
.panel-icon-btn:disabled{opacity:.4;pointer-events:none}
@media(min-width:700px){.panel-inline-row{flex-basis:420px}}
.viewer-resume-btn{display:flex;align-items:center;justify-content:center;z-index:14;width:100%;height:100%;border:0;background:#000000cc;color:#fff;font-size:16px;font-weight:850;letter-spacing:.02em}
.viewer-resume-btn[hidden]{display:none}
#panel-add{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:20px;background:#050608ed}
#panel-add.active{display:flex}
.panel-add-card textarea{width:100%;min-height:110px;margin:6px 0 16px;padding:12px;border:1px solid #3a414b;border-radius:8px;background:#0c0e11;color:#fff;font:inherit;resize:vertical}
.panel-add-card input[type="text"],.panel-add-card input[type="password"]{width:100%;margin:6px 0 16px;padding:12px;border:1px solid #3a414b;border-radius:8px;background:#0c0e11;color:#fff;font:inherit}
.panel-add-card input#panel-code{text-transform:uppercase;letter-spacing:.08em;font-weight:850}
@media(max-width:600px){.panel-inline{margin:14px 16px 0}}
.alert-selects{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.alert-selects label{color:#aeb4bc;font-size:12px}.alert-selects select{display:block;width:100%;margin-top:5px;padding:9px;border:1px solid #ffffff22;border-radius:8px;background:#101318;color:#fff}@media(max-width:600px){.alert-selects{grid-template-columns:1fr}}