:root{color-scheme:dark;--bg:#0e1112;--sidebar:#111617;--card:#181d1d;--border:#293130;--text:#f0f4ef;--muted:#899692;--green:#b8f46b;--green2:#85c549;--yellow:#f4cf81;--purple:#bfb1ff;--orange:#eeb68a;--red:#ff8c8c;--radius:20px;--shadow:0 20px 80px rgba(0,0,0,.12);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);min-width:320px}button,select,input{font:inherit}button{cursor:pointer}button:disabled,select:disabled{cursor:wait;opacity:.5}.hidden{display:none!important}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}.brand-mark{display:grid;place-items:center;width:41px;height:41px;border-radius:13px;background:var(--green);color:#122015;box-shadow:0 4px 23px rgba(184,244,107,.12)}.brand-mark .icon{fill:#162317;stroke-width:1.25}.brand-light{font-weight:450;color:#a8b5ad}
/* Login */
.login-screen{min-height:100vh;display:grid;place-items:center;padding:30px;position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(circle at 76% 33%,rgba(81,116,62,.16),transparent 38%),#0e1211}.login-decoration{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#ffffff06 1px,transparent 1px),linear-gradient(90deg,#ffffff06 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(120deg,transparent 8%,black 90%)}.login-card{border:1px solid #303c34;background:linear-gradient(155deg,#1c2420,#111615 68%);width:100%;max-width:470px;padding:48px;border-radius:29px;box-shadow:0 26px 100px #0007}.login-logo{display:flex;align-items:center;gap:13px;font-weight:850;letter-spacing:.065em;font-size:18px}.login-kicker{font-size:10px;font-weight:800;letter-spacing:.2em;color:var(--green);margin:49px 0 17px}.login-card h1{font-size:clamp(34px,5vw,47px);line-height:1.09;letter-spacing:-.052em;margin:0 0 17px;font-weight:760}.login-card h1 em{color:var(--green);font-style:normal}.login-card>p{color:#a0aca5;line-height:1.68;margin:0 0 35px;font-size:14px}.login-card label{display:block;font-size:12px;font-weight:650;margin-bottom:11px}.password-wrap{height:53px;display:flex;align-items:center;gap:11px;padding:0 16px;border-radius:12px;border:1px solid #3a4841;background:#111614;color:#81938a}.password-wrap:focus-within{border-color:var(--green)}.password-wrap .icon{width:18px}.password-wrap input{border:0;outline:0;background:transparent;color:white;width:100%;font-size:14px}.login-error{font-size:12px;color:var(--red);min-height:19px;margin:8px 0}.primary-button{display:inline-flex;align-items:center;justify-content:space-between;gap:15px;border:none;border-radius:12px;background:var(--green);color:#162116;padding:15px 18px;font-weight:780;transition:filter .18s}.primary-button:hover{filter:brightness(1.07)}.primary-button.full{width:100%}.login-foot{border-top:1px solid #ffffff18;margin-top:32px;padding-top:22px;display:flex;align-items:center;gap:10px;font-size:11px;color:#7f9385}.login-foot .icon{width:15px}.login-side-caption{position:absolute;bottom:25px;color:#758478;letter-spacing:.2em;font-size:9px;font-weight:800}
/* Layout */
.app-shell{display:grid;grid-template-columns:246px minmax(0,1fr);min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;background:var(--sidebar);border-right:1px solid #252c2b;padding:30px 17px 23px;display:flex;flex-direction:column;justify-content:space-between}.brand{text-decoration:none;color:#f3f7f1;font-weight:850;letter-spacing:.05em;font-size:15px;display:flex;align-items:center;gap:12px;padding:0 7px}.brand small{display:block;font-size:9px;color:var(--green);letter-spacing:.21em;margin-top:5px;font-weight:750}.nav-heading{font-size:10px;letter-spacing:.15em;color:#5e6e67;font-weight:800;margin:61px 13px 17px}.navigation{display:grid;gap:7px}.nav-link{text-decoration:none;color:#8e9b95;display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:11px;font-weight:600;font-size:13px;transition:background .2s,color .2s}.nav-link:hover{background:#ffffff0b;color:#fff}.nav-link.active{background:#b8f46b18;color:var(--green)}.nav-link .icon{width:19px}.sidebar-device{display:flex;align-items:center;gap:10px;padding:15px 10px;border:1px solid #293632;border-radius:14px;background:#19211e}.device-icon{width:33px;height:33px;display:grid;place-items:center;border-radius:10px;background:#b8f46b18;color:var(--green)}.device-icon .icon{width:18px}.sidebar-device strong{display:block;font-size:11px}.sidebar-device span{display:block;color:#7b9084;font-size:10px;margin-top:5px}.sidebar-meta{display:flex;align-items:center;gap:8px;color:#859b87;font-size:11px;margin:19px 11px}.status-point,.top-live i,.pulse-dot,.mini-dot{display:inline-block;width:7px;height:7px;background:var(--green);border-radius:50%}.logout-btn{color:#9bab9e;background:transparent;border:0;display:flex;align-items:center;gap:9px;margin:18px 9px 0;font-size:12px}.logout-btn .icon{width:17px}.main{min-width:0}.topbar{height:91px;border-bottom:1px solid #242c29;display:flex;justify-content:space-between;align-items:center;padding:0 clamp(25px,4vw,60px)}.topbar-title{display:flex;align-items:center;gap:17px}.topbar-title>span{display:grid;gap:6px}.crumb{font-size:10px;color:#87968b;font-weight:780;letter-spacing:.14em}.crumb span{color:#4e5c53;padding:0 7px}.topbar-title strong{font-size:16px;letter-spacing:-.02em}.topbar-actions{display:flex;align-items:center;gap:22px}.top-live{display:flex;align-items:center;gap:9px;color:#c2d3c2;font-size:12px;font-weight:650}.top-live.offline i{background:var(--red)}.last-updated{font-size:11px;color:#697b71}.icon-button{background:#202825;border:1px solid #303d35;width:36px;height:36px;border-radius:11px;color:#a8b7ad;display:grid;place-items:center}.icon-button:hover{color:var(--green);border-color:#658258}.icon-button .icon{width:16px}.menu-button{display:none}.content{padding:40px clamp(25px,4vw,60px) 32px;max-width:1650px;margin:auto}.page-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:29px}.eyebrow{font-size:10px;letter-spacing:.18em;font-weight:850;color:var(--green);margin-bottom:13px}.page-heading h1{font-size:clamp(24px,2.55vw,34px);letter-spacing:-.043em;font-weight:740;margin:0 0 10px}.green-dot{color:var(--green)}.page-heading p{margin:0;color:#84928b;font-size:13px;line-height:1.6}.page-date{font-size:11px;color:#9bac9d;border:1px solid #303830;background:#171d19;border-radius:11px;padding:11px 14px;white-space:nowrap}
/* Hero */
.hero-panel{position:relative;overflow:hidden;min-height:240px;border:1px solid #475d38;border-radius:23px;display:flex;justify-content:space-between;align-items:center;padding:34px clamp(30px,4vw,58px);background:radial-gradient(ellipse at 87% 40%,rgba(152,227,101,.16),transparent 42%),linear-gradient(120deg,#1f3325,#17251d 50%,#18271d);gap:20px}.hero-noise{position:absolute;inset:0;pointer-events:none;opacity:.19;background:repeating-linear-gradient(110deg,transparent 0,transparent 32px,rgba(255,255,255,.025) 33px,transparent 34px)}.hero-left,.hero-right{position:relative;z-index:1}.hero-chip{display:inline-flex;align-items:center;gap:10px;border:1px solid #617c4b;background:#b8f46b12;color:#c6f5a0;border-radius:99px;padding:8px 12px;font-size:10px;letter-spacing:.08em;font-weight:830}.hero-chip.warning{color:var(--yellow);background:#f4cf8112;border-color:#887c51}.hero-chip.error{color:var(--red);background:#ff8c8c12;border-color:#9b5a5a}.hero-chip.warning .pulse-dot{background:var(--yellow)}.hero-chip.error .pulse-dot{background:var(--red)}.pulse-dot{box-shadow:0 0 0 4px #b8f46b20}.hero-left h2{font-size:clamp(24px,2.5vw,33px);letter-spacing:-.045em;margin:22px 0 9px}.hero-left p{font-size:13px;color:#b5c8b7;line-height:1.6;margin:0;max-width:460px}.hero-pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.hero-pills span{display:flex;align-items:center;gap:7px;color:#bad2bc;font-size:11px}.hero-pills .icon{width:15px}.hero-right{display:flex;align-items:center;gap:20px;padding-right:13px}.battery-icon{width:101px;height:132px;position:relative;display:flex;align-items:center}.battery-cap{position:absolute;left:35px;top:-4px;width:32px;height:7px;background:#759767;border-radius:5px 5px 0 0}.battery-inner{position:relative;border:4px solid #789767;border-radius:14px;width:100%;height:100%;overflow:hidden;padding:4px}.battery-fill{position:absolute;inset:auto 4px 4px;height:87%;background:linear-gradient(0deg,#77bd5e,#b9f56b);border-radius:6px;transition:height .65s}.battery-bolt{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#18331b;fill:#18331b;width:39px;height:49px;stroke-width:1;opacity:.9}.hero-battery-info{display:grid;gap:7px}.hero-battery-info strong{font-size:41px;line-height:1;font-weight:790;letter-spacing:-.055em}.hero-battery-info span{font-size:9px;font-weight:850;letter-spacing:.15em;color:#98b393;max-width:110px;line-height:1.5}
/* Metrics */
.metrics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-top:17px}.metric-card,.panel,.settings-panel{background:var(--card);border:1px solid #2a3230;border-radius:18px;box-shadow:var(--shadow)}.metric-card{padding:22px 22px 19px;min-width:0}.metric-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#acb9b0;font-weight:640}.metric-icon{width:34px;height:34px;border-radius:11px;display:grid;place-items:center}.metric-icon .icon{width:18px}.m-green{color:var(--green);background:#b8f46b14}.m-yellow{color:var(--yellow);background:#f4cf8114}.m-purple{color:var(--purple);background:#bfb1ff14}.m-orange{color:var(--orange);background:#eeb68a14}.metric-number{font-size:33px;font-weight:780;letter-spacing:-.055em;margin:18px 0 15px;white-space:nowrap}.metric-number span{font-size:15px;color:#87978b;font-weight:650;margin-left:5px;letter-spacing:0}.progress-line{height:5px;border-radius:6px;background:#3b463c;overflow:hidden;margin-bottom:12px}.progress-line i{display:block;height:100%;width:0;background:var(--green);border-radius:6px;transition:width .5s}.progress-line i.load-bar{background:var(--purple)}.metric-caption{color:#798a80;font-size:11px;line-height:1.5;min-height:18px}
/* Controls */
.section-heading{display:flex;justify-content:space-between;align-items:end;margin:45px 0 17px;gap:12px;scroll-margin-top:25px}.section-heading .eyebrow{margin-bottom:8px}.section-heading h2{font-size:21px;letter-spacing:-.025em;margin:0}.section-hint{color:#7b8981;font-size:11px}.controls-grid{display:grid;grid-template-columns:1fr 1.18fr;gap:17px}.panel{padding:25px;min-width:0}.panel-icon{width:41px;height:41px;border-radius:13px;display:grid;place-items:center;margin-bottom:20px}.purple-icon{background:#bfb1ff18;color:var(--purple)}.green-icon{background:#b8f46b17;color:var(--green)}.panel-icon .icon{width:21px}.panel-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.panel-title-row h3,.settings-panel h3,.panel-head h3{font-size:16px;letter-spacing:-.02em;margin:0 0 9px}.panel-title-row p,.settings-panel p,.panel-head p{font-size:12px;line-height:1.63;color:#899a8f;margin:0;max-width:360px}.switch{width:52px;height:29px;position:relative;display:block;flex:none;margin-top:1px}.switch input{opacity:0;position:absolute;width:100%;height:100%;margin:0;cursor:pointer;z-index:2}.switch-track{position:absolute;inset:0;background:#3d4844;border:1px solid #526057;border-radius:99px;transition:background .2s}.switch-track:before{content:"";display:block;width:21px;height:21px;border-radius:50%;background:#d5ded5;position:absolute;left:3px;top:3px;transition:transform .2s}.switch input:checked+.switch-track{background:var(--green);border-color:var(--green)}.switch input:checked+.switch-track:before{background:#192515;transform:translateX(22px)}.switch input:focus-visible+.switch-track{outline:2px solid #f6fcf1;outline-offset:3px}.control-status{display:flex;align-items:center;gap:10px;margin-top:29px;padding:14px 15px;background:#212a25;border:1px solid #314034;border-radius:11px;color:#c3dac1;font-size:12px;font-weight:650}.control-status.off{background:#252a29;border-color:#343c39;color:#abb7af}.control-status.off .mini-dot{background:#8f9c96}.control-status.warning{color:#f4cf81;background:#363024;border-color:#554a30}.control-status.warning .mini-dot{background:var(--yellow)}.panel-footnote{font-size:11px;line-height:1.55;color:#7d8d82;padding-top:22px;margin-top:22px;border-top:1px solid #293330}.eco-levels{margin-top:25px}.field-label{font-size:10px;color:#92a19a;letter-spacing:.13em;font-weight:800;margin-bottom:12px}.segmented{background:#101515;border:1px solid #303b35;border-radius:11px;padding:4px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}.segmented button{display:grid;gap:4px;align-content:center;text-align:center;background:transparent;color:#88988d;border:1px solid transparent;border-radius:8px;padding:10px 5px}.segmented button.active{background:#2b3c2c;border-color:#4e7045;color:var(--green)}.segmented strong{font-size:12px}.segmented small{font-size:10px;white-space:nowrap}.fine-text{font-size:11px;color:#7d8d83;line-height:1.6;margin:12px 0 0}.settings-panel{margin-top:15px;padding:22px 25px;display:flex;justify-content:space-between;align-items:center;gap:20px}.settings-copy{display:flex;align-items:center;gap:16px}.settings-icon{display:grid;place-items:center;background:#d6c3ff12;color:#cbbcff;width:40px;height:40px;flex:none;border-radius:12px}.select-wrap{position:relative;width:220px;flex:none}.select-wrap select{width:100%;background:#232c28;color:#e6eee8;border:1px solid #39483f;border-radius:11px;padding:12px 34px 12px 15px;appearance:none;outline:0;cursor:pointer;font-size:12px;font-weight:670}.select-wrap select:focus{border-color:var(--green)}.select-wrap>.icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:16px;pointer-events:none;color:#a5b4aa}
/* Diagnostics */
.system-grid{display:grid;grid-template-columns:1.18fr 1fr;gap:17px}.panel-head{display:flex;justify-content:space-between;align-items:start;gap:12px;margin-bottom:24px}.panel-head h3{margin-bottom:6px}.small-tag{font-size:9px;letter-spacing:.11em;font-weight:800;color:#93ad90;background:#243427;border:1px solid #3a4a3a;padding:7px 9px;border-radius:8px;white-space:nowrap}.service-list{display:grid}.service-item{display:flex;justify-content:space-between;align-items:center;gap:13px;padding:13px 0;border-top:1px solid #29332e}.service-identity{display:flex;align-items:center;gap:11px;min-width:0}.service-identity strong,.service-identity small{display:block}.service-identity strong{font-size:12px;font-weight:680}.service-identity small{font-size:10px;color:#75877c;margin-top:5px;line-height:1.4}.service-bullet{width:35px;height:35px;border-radius:11px;display:grid;place-items:center;background:#252e29;color:#93ab94;flex:none}.service-bullet .icon{width:17px}.service-state{font-size:10px;font-weight:780;color:#b4eb93;border:1px solid #3d5a3a;border-radius:7px;padding:6px 8px;background:#b4eb9312;white-space:nowrap}.service-state.bad{color:#ff9898;background:#ff989810;border-color:#703a3a}.service-state.neutral{color:#a9b5ae;background:#ffffff0a;border-color:#4b574f}.detail-list{margin:0}.detail-list>div{display:flex;justify-content:space-between;gap:14px;padding:13px 0;border-top:1px solid #29332e}.detail-list dt{color:#899a8d;font-size:12px}.detail-list dd{margin:0;color:#ebf0ea;font-size:12px;font-weight:720;text-align:right;word-break:break-word}.history-panel{margin-top:17px}.history-list{display:grid}.history-item{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-top:1px solid #29332e;font-size:12px;color:#d3ded2}.history-item span{color:#829187;font-size:11px}.history-item .event-circle{width:7px;height:7px;background:#b8f46b;border-radius:50%;margin-right:11px;display:inline-block}.history-item.warning .event-circle{background:var(--yellow)}.history-empty{color:#77877f;font-size:12px;padding:12px 0}.footer{display:flex;justify-content:space-between;gap:15px;color:#58665f;font-size:10px;letter-spacing:.09em;font-weight:800;margin:36px 0 4px}.footer i{font-style:normal;color:var(--green);padding:0 7px}.toast{position:fixed;bottom:28px;right:28px;background:#27372b;border:1px solid #66815d;color:#e3f9d9;border-radius:12px;box-shadow:0 16px 55px #0006;max-width:min(410px,calc(100vw - 30px));padding:15px 19px;font-size:13px;font-weight:660;z-index:9999;opacity:0;transform:translateY(20px);pointer-events:none;transition:opacity .25s,transform .25s}.toast.show{opacity:1;transform:translateY(0)}.toast.error{background:#392727;border-color:#915e5e;color:#ffb3b3}
@media(max-width:1120px){.app-shell{grid-template-columns:205px minmax(0,1fr)}.content{padding-left:25px;padding-right:25px}.topbar{padding:0 25px}.metrics-grid{grid-template-columns:repeat(2,1fr)}.hero-right{padding-right:0}.hero-battery-info strong{font-size:32px}.hero-battery-info span{font-size:8px}.battery-icon{width:75px;height:100px}.battery-cap{left:22px}}@media(max-width:790px){.app-shell{display:block}.sidebar{position:fixed;left:-265px;top:0;width:246px;height:100vh;z-index:50;transition:left .2s;box-shadow:20px 0 50px #0007}.sidebar.mobile-open{left:0}.menu-button{display:grid}.topbar{height:80px}.topbar-actions{gap:10px}.last-updated{display:none}.page-heading{align-items:start}.page-date{display:none}.controls-grid,.system-grid{grid-template-columns:1fr}.hero-panel{padding:28px}.section-heading{margin-top:34px}}@media(max-width:540px){.content{padding:26px 16px}.topbar{padding:0 16px}.topbar-title strong{font-size:14px}.crumb{font-size:9px}.top-live{font-size:11px}.topbar-actions{gap:9px}.hero-panel{display:block;padding:26px 22px}.hero-left h2{font-size:25px}.hero-right{margin-top:30px;justify-content:flex-start}.battery-icon{width:68px;height:83px}.hero-battery-info strong{font-size:34px}.metrics-grid{gap:10px}.metric-card{padding:17px 15px}.metric-top{font-size:11px}.metric-number{font-size:27px}.metric-number span{font-size:12px}.metric-caption{font-size:10px}.settings-panel{display:block}.settings-copy{margin-bottom:20px}.select-wrap{width:100%}.panel{padding:20px}.footer{display:grid;line-height:1.7}.section-hint{display:none}.small-tag{font-size:8px}.login-card{padding:32px 25px}.login-foot{line-height:1.5}}

/* Camera — styling follows the existing PIXELIN POWER cards */
.camera-panel{margin-bottom:18px}.camera-screen{position:relative;aspect-ratio:16/9;max-width:950px;background:#090c0a;border:1px solid #364039;border-radius:14px;overflow:hidden;display:grid;place-items:center}.camera-screen iframe{display:none;width:100%;height:100%;border:0;background:#090c0a}.camera-screen iframe.active{display:block}.camera-placeholder{position:absolute;text-align:center;padding:22px;color:#9aaa9f;font-size:13px;pointer-events:none}.camera-placeholder.hidden{display:none}.camera-actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:16px}.camera-actions .primary-button{width:auto}.camera-status{font-size:12px;color:#9caea0}

/* Navegación modular: Energía y Seguridad nunca comparten pantalla */
.module-view[hidden]{display:none!important}.nav-module-heading{margin-top:27px}.nav-sub{padding-left:29px!important;font-size:12px}.module-view>.page-heading:first-child{margin-top:0}.module-view .camera-panel{margin-top:18px}

.camera-controls{display:flex;align-items:center;gap:25px;flex-wrap:wrap;margin-top:22px;border-top:1px solid rgba(255,255,255,.07);padding-top:20px}.camera-controls h4{font-size:14px;margin:0 0 12px}.ptz-pad{display:grid;grid-template-columns:repeat(3,50px);grid-template-rows:repeat(3,44px);gap:5px;touch-action:none;user-select:none}.ptz-btn{border:1px solid #45584a;background:#1b2920;color:#d9e9df;border-radius:11px;cursor:pointer;font-size:15px;touch-action:none}.ptz-btn:hover,.ptz-btn.pressed{background:#315940;border-color:#7abe8b}.ptz-up{grid-column:2;grid-row:1}.ptz-left{grid-column:1;grid-row:2}.ptz-center{grid-column:2;grid-row:2}.ptz-right{grid-column:3;grid-row:2}.ptz-down{grid-column:2;grid-row:3}

/* Cámara: audio y grabaciones locales. */
.camera-secondary{border:1px solid #465747;border-radius:10px;background:#25362b;color:#e3f1e0;cursor:pointer;padding:10px 15px;font-size:12px;font-weight:680}
.camera-secondary:hover{background:#344d3a}.camera-secondary.recording{border-color:#da7979;color:#ffd0d0;background:#4c2525}
.camera-recordings{margin-top:16px}.camera-recordings .panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.recordings-list{display:grid;gap:8px;margin-top:12px}.record-item{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:11px 0;border-top:1px solid #354038;font-size:12px;color:#d9e6d7}
.record-item span{flex:1;min-width:185px}.record-item button,.record-item a{padding:6px 9px;border:1px solid #4d6850;border-radius:7px;background:#243a2a;color:#dfeddc;font:inherit;cursor:pointer;text-decoration:none}.record-empty{color:#83988b;font-size:12px}
#recordingPlayer{width:100%;max-width:950px;border-radius:12px;background:#080b08;max-height:535px;margin:6px 0 15px}#recordingPlayer[hidden]{display:none!important}

/* PIXELIN POWER · Configuración y selección de cámaras */
.sidebar-bottom .settings-nav{display:flex;width:100%;margin-bottom:13px;box-sizing:border-box;text-decoration:none}
.camera-picker{display:flex;flex-wrap:wrap;gap:10px;margin:9px 0 18px}
.camera-choice{border:1px solid #394c3d;background:#1b2920;color:#c1d3c2;border-radius:11px;padding:12px 17px;font-weight:700;font-size:12px;cursor:pointer}
.camera-choice.active,.camera-choice:hover{color:#ecf8e7;border-color:#a0d97d;background:#294430}
.camera-controls[hidden],.config-camera-form[hidden]{display:none!important}
.settings-camera-list{display:grid;gap:11px;margin:14px 0 19px}
.config-camera-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:#1c2520;border:1px solid #364338;border-radius:15px;padding:18px 21px}
.config-camera-info{display:grid;gap:6px}.config-camera-info strong{font-size:15px;color:#e1eee1}.config-camera-info small{font-size:12px;color:#92a79a}
.config-camera-buttons,.config-form-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.config-camera-buttons .config-danger{color:#f9b3b3;border-color:#794343;background:#392727}
.config-camera-form{margin-top:20px}.config-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:17px}
.config-fields label{display:grid;gap:7px;color:#a5baa8;font-size:12px;font-weight:700}
.config-fields input{width:100%;box-sizing:border-box;padding:13px 12px;border:1px solid #405142;border-radius:10px;outline:0;background:#16211a;color:#f0f6ed;font:inherit;font-weight:500}
.config-fields input:focus{border-color:#a7d77b}.config-advanced{margin:0 0 20px;border-top:1px solid #334137;padding-top:12px}.config-advanced summary{cursor:pointer;color:#b8d9ad;font-weight:700;font-size:12px;margin-bottom:15px}.config-ptz{display:flex;align-items:center;gap:12px;margin:14px 0 23px;color:#ccdfc9;font-size:13px}
.config-ptz input{accent-color:#a7d77b;width:17px;height:17px}.config-form-actions #cameraFormStatus{font-size:12px;color:#e3b2a4}
@media(max-width:620px){.config-fields{grid-template-columns:1fr}.config-camera-row{align-items:flex-start}.settings-camera-list{gap:9px}}


/* PIXELIN MULTICAM V14 — Seguridad, visor responsivo */
#viewSecurity{--multi-line:#334238;--multi-surface:#17211b;--multi-accent:#b4f27e;color:#e8f0e6}
.multi-header{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:1px 0 23px}
.multi-header h1{font-size:clamp(27px,3.1vw,39px);letter-spacing:-.04em;margin:8px 0 7px}
.multi-header p{margin:0;color:#9aae9c;font-size:13px}
.multi-count{color:#b8d1b6;border:1px solid #344b39;background:#1b3022;padding:9px 14px;border-radius:24px;font-size:11px;font-weight:800;white-space:nowrap}
.multi-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:0 0 16px;padding:12px 15px;background:#1b241e;border:1px solid var(--multi-line);border-radius:16px}
.multi-layouts{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.multi-layout{background:transparent;border:1px solid transparent;padding:10px 12px;border-radius:10px;color:#a6bbaa;font-weight:700;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:9px}
.multi-layout:hover{background:#2b3930;color:#edf8e7}
.multi-layout.active{background:#2b4c34;border-color:#72965d;color:#e5ffd6}
.layout-glyph{display:block;width:18px;height:15px;border-radius:3px;border:1.5px solid currentColor;opacity:.8}
.layout-focus{background:linear-gradient(to bottom,transparent 0 64%,currentColor 65% 70%,transparent 70%),linear-gradient(to right,transparent 0 33%,currentColor 34% 37%,transparent 38% 66%,currentColor 67% 70%,transparent 71%)}
.layout-four{background:linear-gradient(to right,transparent 46%,currentColor 47% 53%,transparent 54%),linear-gradient(to bottom,transparent 46%,currentColor 47% 53%,transparent 54%)}
.layout-nine{background:repeating-linear-gradient(to right,transparent 0 27%,currentColor 28% 32%,transparent 33% 36%),repeating-linear-gradient(to bottom,transparent 0 27%,currentColor 28% 32%,transparent 33% 36%)}
.multi-toolbar-right{display:flex;align-items:center;gap:14px;justify-content:flex-end;flex-wrap:wrap}
.multi-toggle{white-space:nowrap;min-width:142px;justify-content:center}
.multi-global-status{font-size:11px}
.multi-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(235px,267px);align-items:start;gap:16px}
.multi-stage{min-width:0}.multi-wall{display:grid;gap:12px;min-width:0;grid-auto-flow:row}
.multi-wall.layout-focus{grid-template-columns:repeat(3,minmax(0,1fr))}
.multi-wall.layout-focus .multi-tile.selected{grid-column:span 3}
.multi-wall.layout-focus .multi-tile:not(.selected){grid-column:span 1}
.multi-wall.layout-focus[data-count="2"]{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.multi-wall.layout-focus[data-count="2"] .multi-tile.selected{grid-column:1}
.multi-wall.layout-focus[data-count="2"] .multi-tile:not(.selected){grid-column:2}
.multi-wall.layout-focus[data-count="1"]{grid-template-columns:minmax(0,1fr)}
.multi-wall.layout-focus[data-count="1"] .multi-tile.selected{grid-column:1}
.multi-wall.layout-single{grid-template-columns:minmax(0,1fr)}
.multi-wall.layout-grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
.multi-wall.layout-grid9{grid-template-columns:repeat(3,minmax(0,1fr))}
.multi-tile{position:relative;min-width:0;border-radius:14px;border:1px solid #3c4b40;background:#0c120e;overflow:hidden;box-shadow:0 12px 24px #0001}
.multi-tile[hidden]{display:none!important}
.multi-tile.selected{border-color:#a4df7f;box-shadow:0 0 0 1px #a4df7f33,0 12px 34px #0003}
.multi-scene{position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;background:radial-gradient(circle at center,#223126 0%,#101811 72%)}
.multi-scene .multi-frame{width:100%;height:100%;position:absolute;inset:0;border:0;display:none;background:#080c09}
.multi-scene.playing .multi-frame{display:block}
.multi-idle{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;color:#9bb19d;font-size:12px}
.multi-idle-icon{font-size:31px;opacity:.32;line-height:1}
.multi-scene.playing .multi-idle{display:none}
.multi-tile-head,.multi-tile-foot{position:absolute;z-index:2;left:11px;right:11px;display:flex;align-items:center;justify-content:space-between;gap:8px;pointer-events:none}
.multi-tile-head{top:11px}.multi-tile-foot{bottom:11px}
.multi-tile-select{pointer-events:auto;cursor:pointer;background:#0b100ddd;color:#ecf8ee;border:1px solid #ffffff28;padding:9px 12px;border-radius:9px;font-size:12px;font-weight:800;max-width:75%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left}
.multi-tile-select:hover,.multi-tile.selected .multi-tile-select{border-color:#9cd883;color:#fff;background:#213c28ed}
.multi-tile-state{color:#d8e8d8;font-size:10px;font-weight:700;border:1px solid #ffffff24;border-radius:999px;padding:7px 9px;background:#101a13d9;white-space:nowrap}
.multi-tile.connected .multi-tile-state:before{content:'';display:inline-block;width:6px;height:6px;margin-right:6px;background:#93e777;border-radius:50%}
.multi-quality{font-size:10px;letter-spacing:.06em;font-weight:800;background:#09120bcc;color:#dae7d9;border-radius:7px;padding:8px 9px}
.multi-fullscreen{pointer-events:auto;width:30px;height:30px;background:#0a110ccc;border:1px solid #ffffff3b;color:#f5fff3;border-radius:9px;font-size:22px;line-height:1;cursor:pointer}
.multi-fullscreen:hover{background:#2b4930}
.multi-wall.layout-grid9 .multi-tile-select,.multi-wall.layout-grid9 .multi-tile-state{font-size:10px;padding:6px 7px}
.multi-wall.layout-grid9 .multi-tile-head,.multi-wall.layout-grid9 .multi-tile-foot{left:6px;right:6px;top:auto}
.multi-wall.layout-grid9 .multi-tile-head{top:6px}.multi-wall.layout-grid9 .multi-tile-foot{bottom:6px}
.multi-empty{padding:100px 24px;text-align:center;border:1px dashed #415743;border-radius:15px;color:#99b19d}
.multi-footer-line{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:11px;color:#839a89;margin:12px 2px 0}
.multi-footer-line a{color:#b0dba3;text-decoration:none}.multi-green-dot{display:inline-block;width:6px;height:6px;background:#96e985;border-radius:50%;margin-right:6px}
.multi-inspector{border:1px solid #3b493d;background:#1b251e;border-radius:17px;padding:22px 20px;min-width:0}
.multi-inspector-overline{font-size:9px;letter-spacing:.14em;font-weight:800;color:#8ea98d}
.multi-inspector-top h2{font-size:23px;letter-spacing:-.03em;line-height:1.2;overflow-wrap:anywhere;margin:10px 0 6px}
.multi-inspector-top p{color:#8fa392;font-size:11px;margin:0 0 13px;overflow-wrap:anywhere}
.multi-quick-picker{display:flex;gap:6px;flex-wrap:wrap;margin:11px 0 0;padding:14px 0;border-top:1px solid #324537;border-bottom:1px solid #324537}
.multi-quick-picker .camera-choice{padding:7px 9px;font-size:10px;border-radius:8px;max-width:100%;text-overflow:ellipsis;overflow:hidden}
.multi-inspector .camera-controls{display:block;margin:17px 0 0;border:0;padding:0}
.multi-inspector .camera-controls[hidden]{display:none!important}
.multi-ptz-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}
.multi-ptz-title h4{font-size:13px;font-weight:800;margin:0}
.multi-ptz-title span{font-size:10px;border:1px solid #516c54;color:#b1d4ae;border-radius:6px;padding:4px 7px}
.multi-inspector .ptz-pad{grid-template-columns:repeat(3,minmax(0,52px));grid-template-rows:repeat(3,48px);gap:7px;justify-content:center;margin:0 auto 11px}
.multi-inspector .ptz-btn{border-radius:11px;font-size:17px;touch-action:none}
.multi-inspector .ptz-center{background:#354c39;border-color:#638366}
.multi-inspector #ptzStatus{display:block;min-height:15px;text-align:center;font-size:11px}
.multi-record-control{border-top:1px solid #324537;margin-top:21px;padding-top:20px;display:grid;gap:8px}
.multi-record-button{display:flex;justify-content:center;align-items:center;gap:10px;padding:13px 12px;width:100%}
.multi-record-button:before{content:'';display:inline-block;width:9px;height:9px;flex:none;border-radius:50%;background:#e77575;box-shadow:0 0 0 3px #f15e5e18}
.multi-record-button.recording:before{animation:multi-pulse 1s infinite}
@keyframes multi-pulse{50%{opacity:.28}}
.multi-recordings{margin-top:22px}.multi-recordings .panel-head p{font-size:12px;color:#91a792;margin:7px 0 0}
@media(max-width:1220px){.multi-workspace{grid-template-columns:minmax(0,1fr) 224px}.multi-inspector{padding:18px 14px}}
@media(max-width:970px){.multi-workspace{grid-template-columns:1fr}.multi-inspector{display:grid;grid-template-columns:1fr 1fr;gap:14px}.multi-inspector .camera-controls{grid-row:span 2;margin:0}.multi-inspector-top h2{margin-top:4px}.multi-quick-picker{border-bottom:0}.multi-record-control{margin:0;padding-top:10px}.multi-inspector .ptz-pad{margin-left:0}}
@media(max-width:600px){.multi-header{align-items:start}.multi-header h1{font-size:28px}.multi-count{font-size:10px;padding:7px 9px}.multi-toolbar{padding:10px}.multi-layouts{width:100%;justify-content:space-between}.multi-layout{font-size:11px;padding:8px;gap:5px}.multi-toolbar-right{justify-content:space-between;width:100%}.multi-workspace{gap:12px}.multi-wall.layout-focus{grid-template-columns:repeat(2,minmax(0,1fr))}.multi-wall.layout-focus .multi-tile.selected{grid-column:span 2}.multi-wall.layout-focus[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}.multi-wall.layout-focus[data-count="2"] .multi-tile.selected{grid-column:span 2}.multi-wall.layout-focus[data-count="2"] .multi-tile:not(.selected){grid-column:span 1}.multi-wall.layout-grid9{grid-template-columns:repeat(2,minmax(0,1fr))}.multi-inspector{display:block}.multi-inspector .camera-controls{margin:18px 0}.multi-tile-select{padding:6px;font-size:10px}.multi-tile-state{font-size:9px;padding:6px}.multi-tile-head{left:6px;right:6px;top:6px}.multi-tile-foot{left:6px;right:6px;bottom:6px}.multi-quality{font-size:9px;padding:5px}.multi-footer-line{font-size:10px}}

/* PIXELIN MULTICAM V15: seleccionar haciendo clic en la imagen */
.multi-tile-hit{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;border:0;border-radius:0;background:transparent;padding:0;cursor:pointer;touch-action:manipulation}
.multi-tile-hit:focus-visible{outline:3px solid #b4f27e;outline-offset:-5px}
.multi-tile:not(.selected) .multi-tile-hit:hover{box-shadow:inset 0 0 0 2px #b4f27e80}
.multi-tile-head,.multi-tile-foot{z-index:2}

/* PIXELIN MULTICAM V16: vistas 1/4/9 con posiciones fijas */
.multi-layout[hidden]{display:none!important}
.multi-wall.layout-grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
.multi-wall.layout-grid9{grid-template-columns:repeat(3,minmax(0,1fr))}
.multi-wall.layout-single{grid-template-columns:minmax(0,1fr)}
.multi-slot-empty{min-width:0;aspect-ratio:16/9;border:1px dashed #405446;border-radius:14px;background:#111a15;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;color:#748a7a;font-size:11px}
.multi-slot-mark{font-size:25px;opacity:.4}
@media(max-width:600px){.multi-wall.layout-grid9{grid-template-columns:repeat(3,minmax(0,1fr))}.multi-wall.layout-grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* PIXELIN POWER - gestión de cuenta */
.account-heading{margin-top:38px}
.account-panel{max-width:860px;margin-top:14px}
.account-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}
.account-fields label{display:flex;flex-direction:column;gap:9px;font-size:12px;font-weight:700;color:#b1c5b1}
.account-fields label:first-child{grid-column:1/-1}
.account-fields input{width:100%;box-sizing:border-box;border:1px solid #405142;border-radius:10px;background:#16211a;color:#f0f6ed;font:inherit;font-size:14px;min-height:46px;padding:12px;outline:0}
.account-fields input:focus{border-color:#a7d77b;box-shadow:0 0 0 3px #a7d77b20}
.account-actions{display:flex;align-items:center;gap:15px;flex-wrap:wrap;margin-top:22px}
#accountPasswordStatus{font-size:12px;color:#e3b2a4}
@media(max-width:620px){.account-fields{grid-template-columns:1fr}}

/* PIXELIN HOME V19 · identidad, usuarios y apariencia individual */
[hidden]{display:none!important}
.login-user-wrap{margin-bottom:19px}
.login-card form>.login-user-wrap{margin-bottom:20px}
.signed-user{display:flex;align-items:center;gap:11px;margin-top:18px;padding:15px 10px;border-top:1px solid var(--border)}
.signed-avatar{flex:none;display:grid;place-items:center;width:37px;height:37px;border-radius:12px;background:color-mix(in srgb,var(--green) 20%,var(--sidebar));border:1px solid color-mix(in srgb,var(--green) 45%,transparent);color:var(--green);font-weight:850;font-size:16px}
.signed-user strong,.signed-user small{display:block}.signed-user strong{font-size:12px}.signed-user small{margin-top:4px;font-size:10px;color:var(--muted)}
.theme-panel,.users-panel{max-width:1080px;margin-top:13px}
.theme-presets{display:flex;gap:9px;flex-wrap:wrap;margin:25px 0 20px}
.theme-preset{display:flex;align-items:center;gap:9px;background:var(--menu);color:var(--text);border:1px solid var(--border);border-radius:11px;padding:12px 14px;font-size:12px;font-weight:700;transition:border-color .18s,transform .18s}
.theme-preset:hover{transform:translateY(-2px)}.theme-preset.active{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.theme-preset i{width:15px;height:15px;border-radius:50%;box-shadow:0 0 0 3px #ffffff15}
.theme-colors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.theme-color{display:flex;align-items:center;gap:12px;min-width:0;padding:13px 15px;border-radius:12px;background:color-mix(in srgb,var(--card) 80%,var(--sidebar));border:1px solid var(--border);cursor:pointer}
.theme-color-info{display:grid;gap:5px;min-width:0;flex:1}.theme-color-info strong{font-size:12px;font-weight:750;color:var(--text)}.theme-color-info small{font-size:10px;color:var(--muted);line-height:1.35}
.theme-color input[type=color]{flex:none;height:39px;width:47px;cursor:pointer;padding:3px;border:1px solid var(--border);border-radius:10px;background:var(--input)}
.theme-color code{font-size:10px;letter-spacing:.025em;color:var(--muted);width:65px;text-align:right;font-family:ui-monospace,monospace}
.theme-actions{display:flex;align-items:center;gap:13px;flex-wrap:wrap;padding-top:23px;margin-top:21px;border-top:1px solid var(--border)}
#themeStatus,#userFormStatus{font-size:12px;color:var(--muted)}
.user-row{display:flex;gap:12px;align-items:center;padding:15px 0;border-bottom:1px solid var(--border)}
.user-row .signed-avatar{width:43px;height:43px}.user-identity{flex:1;min-width:0}.user-identity strong,.user-identity small{display:block}.user-identity strong{font-size:13px;color:var(--text)}.user-identity small{font-size:11px;color:var(--muted);margin-top:5px;overflow-wrap:anywhere}
.user-buttons{display:flex;gap:9px}.user-form{margin-top:22px;padding:22px;border-radius:15px;background:var(--sidebar);border:1px solid var(--border)}
.user-form-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}.user-form-title h3{font-size:17px;margin:0}.user-form label small{color:var(--muted);font-weight:400}
.user-form input:disabled{opacity:.55}.user-form select{min-height:46px;width:100%;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--input);color:var(--text)}
/* Aplicación real de la paleta a las superficies de la interfaz. */
:root{--hero:#1f3325;--hero-end:#18271d;--menu:#202825;--input:#16211a}
body{background:var(--bg);color:var(--text)}
.sidebar{background:var(--sidebar);border-color:var(--border)}
.topbar{background:var(--bg);border-bottom-color:var(--border)}
.metric-card,.panel,.settings-panel{background:var(--card);border-color:var(--border);color:var(--text)}
.metric-top,.metric-caption,.page-heading p,.panel-head p,.panel-title-row p,.fine-text,.section-hint,.footer,.last-updated,.crumb,.nav-link,.nav-heading,.history-empty{color:var(--muted)}
.nav-link.active{background:color-mix(in srgb,var(--green) 13%,transparent);color:var(--green)}
.hero-panel{background:radial-gradient(ellipse at 87% 40%,color-mix(in srgb,var(--green) 17%,transparent),transparent 45%),linear-gradient(125deg,var(--hero),var(--hero-end));border-color:color-mix(in srgb,var(--green) 32%,var(--border))}
.hero-chip{background:color-mix(in srgb,var(--green) 13%,transparent);border-color:color-mix(in srgb,var(--green) 49%,transparent);color:var(--green)}
.hero-left p,.hero-pills span,.hero-battery-info span{color:color-mix(in srgb,var(--text) 74%,var(--hero-end))}
.battery-fill{background:linear-gradient(0deg,var(--green2),var(--green))}
.battery-inner{border-color:var(--green2)}.battery-cap{background:var(--green2)}
.progress-line i,.status-point,.top-live i,.mini-dot,.pulse-dot,.switch input:checked+.switch-track{background:var(--green)}
.progress-line i.load-bar{background:var(--purple)}
.m-green,.green-icon{color:var(--green);background:color-mix(in srgb,var(--green) 13%,transparent)}
.m-yellow{color:var(--yellow);background:color-mix(in srgb,var(--yellow) 13%,transparent)}
.m-purple,.purple-icon{color:var(--purple);background:color-mix(in srgb,var(--purple) 13%,transparent)}
.m-orange{color:var(--orange);background:color-mix(in srgb,var(--orange) 13%,transparent)}
.icon-button,.theme-preset,.sidebar-device{background:var(--menu);border-color:var(--border)}
.password-wrap,.account-fields input,.config-fields input,.config-fields select{background:var(--input);border-color:var(--border);color:var(--text)}
.brand small,.eyebrow,.green-dot{color:var(--green)}
.brand-mark,.primary-button{background:var(--green)}
.multi-tile.selected{border-color:var(--green);box-shadow:0 0 0 1px color-mix(in srgb,var(--green) 25%,transparent),0 12px 34px #0003}
.multi-tile-select:hover,.multi-tile.selected .multi-tile-select{border-color:var(--green)}
.account-fields label{color:var(--text)}
@media(max-width:720px){.theme-colors{grid-template-columns:1fr}.theme-color code{width:70px}.theme-panel,.users-panel{padding:19px}.user-form{padding:15px}.user-row{flex-wrap:wrap}.user-row .user-buttons{width:100%;justify-content:flex-end}}
@media(max-width:430px){.theme-color{gap:7px;padding:11px}.theme-color code{font-size:9px;width:58px}.theme-color input[type=color]{width:39px}.theme-presets{gap:7px}.theme-preset{padding:9px 11px}}

/* Legibilidad automática de los colores de acento, incluidos los oscuros. */
:root{--accent-ink:#162116;--accent-readable:#b8f46b}
.primary-button,.brand-mark{color:var(--accent-ink)}
.brand-mark .icon{fill:none;stroke:var(--accent-ink);stroke-width:2}
.brand small,.eyebrow,.green-dot,.nav-link.active,.signed-avatar,.theme-color input:focus-visible{color:var(--accent-readable)}
.primary-button:hover{filter:brightness(1.08)}

/* Pixelin Home V20 — configuración organizada */
.config-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin:27px 0 26px}
.config-tab{display:flex;align-items:center;gap:13px;text-align:left;min-width:0;padding:18px 16px;background:var(--card);border:1px solid var(--border);border-radius:15px;color:var(--text);cursor:pointer;transition:background .18s,border-color .18s,transform .18s}
.config-tab:hover{border-color:var(--accent);transform:translateY(-1px)}
.config-tab.active{background:color-mix(in srgb,var(--accent) 12%,var(--card));border-color:var(--accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent)}
.config-tab-ico{display:grid;place-items:center;flex:none;width:40px;height:40px;font-size:23px;border-radius:12px;color:var(--accent-readable);background:var(--menu)}
.config-tab.active .config-tab-ico{background:var(--accent);color:var(--accent-ink)}
.config-tab strong,.config-tab small{display:block}.config-tab strong{font-size:13px;font-weight:750}.config-tab small{font-size:10px;color:var(--muted);margin-top:5px;line-height:1.4}
.config-page[hidden],.config-tab[hidden]{display:none!important}
.config-page>.section-heading:first-child{margin-top:0}
.config-page .panel{max-width:none}
@media(max-width:1050px){.config-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.config-tabs{gap:8px}.config-tab{padding:12px;gap:9px}.config-tab-ico{width:31px;height:31px;font-size:17px}.config-tab strong{font-size:12px}.config-tab small{font-size:9px}}