:root{--bg:#0b0f1b;--sidebar:#0d1220;--card:#141b2b;--border:#273149;--text:#f3f6fd;--muted:#9aa8bc;--faint:#6e819b;--teal:#3fe1b7;--blue:#7da4ff;--orange:#ffc47f;--red:#fa9ca6;--shadow:0 22px 70px rgba(0,0,0,.18)}
*{box-sizing:border-box}html{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--text);scroll-behavior:smooth}body{margin:0;min-height:100vh;-webkit-font-smoothing:antialiased}button,a{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}svg.icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}.app-layout{min-height:100vh;display:flex}.sidebar{width:262px;flex:0 0 262px;background:var(--sidebar);border-right:1px solid #242d40;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:29px 19px 24px}.brand{display:flex;align-items:center;gap:12px;padding:0 10px}.brand-icon{width:45px;height:45px;border-radius:14px;background:linear-gradient(140deg,#56e5c1,#408df0);color:#06253c;display:grid;place-items:center;box-shadow:0 5px 25px rgba(65,216,194,.16)}.brand-icon .icon{width:26px;height:26px;stroke-width:2.3}.brand-copy{display:flex;flex-direction:column;gap:3px}.brand-copy strong{font-size:20px;letter-spacing:-.6px}.brand-accent{color:var(--teal)}.brand-copy small{font-size:9px;font-weight:800;letter-spacing:2.4px;color:#93a0b8}.sidebar-label{margin:66px 12px 14px;font-size:10px;font-weight:800;letter-spacing:2px;color:#697a94}.side-nav{display:grid;gap:6px}.nav-item{border:0;background:transparent;color:#8d9cb3;padding:14px 16px;border-radius:11px;display:flex;gap:13px;align-items:center;text-align:left;font-size:14px;font-weight:600}.nav-item .icon{width:19px;height:19px}.nav-item:hover,.nav-item:focus-visible{background:#1a2637;color:#f5f8ff}.nav-item.is-active{background:linear-gradient(90deg,#173d43,#1b303d);color:var(--teal)}.sidebar-bottom{margin-top:auto;padding:0 9px}.environment{display:flex;align-items:center;gap:9px;color:#a8b8cd;font-size:10px;font-weight:800;letter-spacing:1.4px}.environment-dot{width:7px;height:7px;background:var(--orange);border-radius:50%;box-shadow:0 0 14px #e1b45d}.sidebar-bottom>p{color:#72839b;font-size:12px;line-height:1.6;margin:13px 0 26px}.profile{border-top:1px solid #263149;padding-top:22px;display:flex;gap:10px;align-items:center}.avatar,.topbar-avatar{display:grid;place-items:center;border-radius:13px;font-weight:800;color:#d5e5ff;background:#24334f}.avatar{width:38px;height:38px;font-size:12px}.profile>span:last-child{display:flex;flex-direction:column;gap:4px}.profile strong{font-size:12px}.profile small{font-size:11px;color:#798ba3}.main-content{flex:1;min-width:0;max-width:1550px;padding:0 clamp(25px,5.1vw,94px) 95px}.topbar{height:101px;border-bottom:1px solid #232c40;display:flex;justify-content:space-between;align-items:center;gap:18px}.topbar-name{display:flex;flex-direction:column;gap:7px}.eyebrow{font-size:10px;letter-spacing:2.4px;font-weight:800;color:#7c92b3}.topbar-name strong{font-size:14px}.topbar-right{display:flex;align-items:center;gap:17px}.preview-chip{padding:9px 14px;display:flex;gap:9px;align-items:center;border:1px solid #68533c;background:#2c271f;color:#ffd49b;border-radius:20px;font-size:11px;font-weight:700}.preview-pulse{width:6px;height:6px;background:#e5b874;border-radius:50%}.topbar-avatar{height:38px;width:38px;font-size:11px}.view-panel{padding-top:44px}.view-panel[hidden]{display:none}.page-intro{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:35px}.page-intro h1{font-size:clamp(29px,3.35vw,44px);line-height:1.15;margin:11px 0 13px;letter-spacing:-1.5px}.period{color:var(--teal)}.page-intro p{color:#91a0b6;margin:0;line-height:1.65;font-size:14px}.today{font-size:12px;color:#8294ab;text-transform:capitalize;white-space:nowrap;padding-bottom:5px}.device-card{background:radial-gradient(ellipse at 88% -20%,#253f52 0,transparent 46%),linear-gradient(125deg,#172235,#151d2c);border:1px solid #304359;border-radius:20px;overflow:hidden;padding:28px 31px 0;box-shadow:var(--shadow);position:relative}.device-accent{position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#4edec3 26%,#7198ee 64%,transparent)}.device-top,.device-identity{display:flex;align-items:center}.device-top{justify-content:space-between;gap:18px}.device-identity{gap:17px}.device-image{height:62px;width:62px;background:#23374a;border:1px solid #385164;color:#8bddcc;border-radius:17px;display:grid;place-items:center}.device-image .icon{width:33px;height:33px}.device-mini{color:#8da0b8;font-size:10px;font-weight:800;letter-spacing:1.6px}.device-identity h2{margin:5px 0 4px;letter-spacing:-.5px;font-size:24px}.device-domain{color:#92a4bb;font-size:12px}.state-pill{border:1px solid #6b5942;color:#f5c98d;background:#30291e;border-radius:30px;padding:9px 14px;display:flex;gap:9px;align-items:center;white-space:nowrap;font-weight:700;font-size:11px}.state-led{width:8px;height:8px;border-radius:50%;background:#e9ad69}.status-panel{border:1px solid #314258;background:#101b2b9e;border-radius:13px;padding:17px 19px;display:flex;gap:13px;align-items:center;margin:28px 0}.status-icon{color:var(--blue);width:37px;height:37px;display:grid;place-items:center;background:#263957;border-radius:11px;flex-shrink:0}.status-icon .icon{width:20px;height:20px}.status-panel strong{font-size:13px}.status-panel p{color:#93a6be;font-size:12px;margin:4px 0 0;line-height:1.5}.device-footer{border-top:1px solid #304157;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:21px 0 23px}.device-footer>div{display:flex;flex-direction:column;gap:6px}.detail-label{font-size:10px;font-weight:800;letter-spacing:1.25px;color:#7186a0}.device-footer strong{font-size:12px;font-weight:600;color:#d6e1ee}.section-heading{display:flex;justify-content:space-between;margin:38px 0 18px}.section-heading h2{font-size:19px;margin:0 0 7px;letter-spacing:-.35px}.section-heading p{color:#8595aa;font-size:12px;line-height:1.55;margin:0}.power-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}.power-card{position:relative;min-height:171px;display:flex;flex-direction:column;align-items:flex-start;padding:22px 24px;border:1px solid #294638;border-radius:16px;background:linear-gradient(130deg,#17372e,#172b2c 70%,#172534);text-align:left;color:var(--text);transition:transform .2s ease,border-color .2s ease}.power-card:hover{transform:translateY(-2px)}.power-on:hover{border-color:#37be96}.power-off{background:linear-gradient(130deg,#3c262c,#2c232f 65%,#202331);border-color:#55353d}.power-off:hover{border-color:#bb6c76}.power-symbol{width:42px;height:42px;border-radius:12px;background:#275443;color:#7aefcb;display:grid;place-items:center;margin-bottom:16px}.power-off .power-symbol{background:#59323e;color:#ffb7bc}.power-title{font-size:17px;font-weight:800;letter-spacing:-.3px}.power-note{font-size:11px;color:#9cc9b6;margin-top:5px}.power-off .power-note{color:#d8a2ae}.power-arrow{position:absolute;right:22px;bottom:20px;color:#7bcfb5}.power-off .power-arrow{color:#dfa0ab}.quick-heading{margin-top:32px}.quick-card{display:flex;align-items:center;border:1px solid #2b3850;background:#141e2e;padding:16px 18px;border-radius:15px;gap:14px;transition:border-color .2s}.quick-card:hover{border-color:#678aaf}.quick-icon{height:48px;width:48px;display:grid;place-items:center;border-radius:12px;color:#a0bbef;background:#273655}.quick-text{display:flex;flex-direction:column;gap:6px}.quick-text strong{font-size:13px}.quick-text small{font-size:11px;color:#899eb8}.open-icon{margin-left:auto;color:#7c96b4}.demo-note{display:flex;align-items:start;gap:9px;color:#7f91a9;font-size:11px;line-height:1.6;margin-top:25px}.demo-note .icon{width:16px;height:16px;flex-shrink:0;margin-top:1px}.empty-card{padding:67px 36px;border:1px dashed #41516b;border-radius:19px;text-align:center;background:#151e2e}.empty-icon{height:74px;width:74px;background:#24364d;color:#9db6d7;display:grid;place-items:center;border-radius:20px;margin:0 auto 20px}.empty-icon .icon{width:33px;height:33px}.empty-card h2{font-size:22px}.empty-card p{font-size:13px;line-height:1.75;color:#a0b0c5;max-width:460px;margin:0 auto 22px}.phase-chip{display:inline-flex;padding:8px 12px;background:#223b3c;color:#89e6c6;border-radius:20px;font-size:11px;font-weight:800;letter-spacing:.25px}.security-card{display:flex;gap:26px;align-items:start;background:#151e30;border:1px solid #35445c;border-radius:18px;padding:28px}.security-illustration{background:#253e40;color:#65e4bd;display:grid;place-items:center;width:72px;height:72px;border-radius:19px;flex-shrink:0}.security-illustration .icon{width:35px;height:35px}.security-card h2{font-size:23px;letter-spacing:-.5px;margin:17px 0 10px}.security-card p{color:#9baabe;font-size:13px;max-width:600px;line-height:1.75;margin-bottom:26px}.security-row{border-top:1px solid #2c3a51;padding:15px 0;display:flex;gap:10px;align-items:center;font-size:12px;color:#c9d5e5}.security-row .icon{width:18px;height:18px;color:#9ab3d9}.security-warning{margin-top:18px;display:flex;gap:10px;align-items:center;color:#f8cf98;background:#2b251d;border:1px solid #695236;border-radius:13px;padding:16px;font-size:12px;line-height:1.5}.security-warning .icon{flex-shrink:0}.mobile-nav{display:none}.notice-dialog{position:fixed;inset:0;max-width:400px;width:calc(100% - 38px);padding:31px;border-radius:21px;background:#1c273b;border:1px solid #3c4e69;color:#f6f8fc;box-shadow:0 25px 90px #000b}.notice-dialog::backdrop{background:rgba(4,8,16,.76);backdrop-filter:blur(7px)}.dialog-icon{height:53px;width:53px;border-radius:15px;background:#31445b;color:#9fb9ec;display:grid;place-items:center;margin-bottom:21px}.notice-dialog h2{font-size:22px;margin:0 0 12px}.notice-dialog p{color:#adbad0;line-height:1.75;font-size:13px}.btn-close-dialog,.btn-primary{display:inline-flex;justify-content:center;align-items:center;border:0;border-radius:12px;background:#5fe2c2;color:#10302a;padding:13px 22px;font-size:13px;font-weight:800;margin-top:17px;cursor:pointer}.btn-close-dialog{width:100%}.error-page{display:grid;place-items:center;padding:30px}.error-card{padding:30px;max-width:450px;border:1px solid #35445c;border-radius:17px;background:#151d2d}.error-card p{color:#91a1b8;line-height:1.7}
@media(max-width:1050px){.sidebar{width:220px;flex-basis:220px}.main-content{padding-left:38px;padding-right:38px}.today{display:none}.device-footer{gap:10px}}
@media(max-width:720px){body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}.app-layout{display:block}.sidebar{display:none}.main-content{padding:0 19px 36px;max-width:none}.topbar{height:74px}.topbar-name .eyebrow{font-size:8px;letter-spacing:1.7px}.topbar-name strong{font-size:14px}.topbar-avatar{display:none}.preview-chip{padding:8px 10px;font-size:9px;white-space:nowrap}.view-panel{padding-top:33px}.page-intro{margin-bottom:26px}.page-intro h1{font-size:30px;letter-spacing:-1.1px;margin:10px 0}.page-intro p{font-size:12px}.device-card{padding:19px 17px 0;border-radius:17px}.device-top{align-items:flex-start;gap:8px}.device-identity{gap:11px}.device-image{height:47px;width:47px;border-radius:13px}.device-image .icon{height:27px;width:27px}.device-identity h2{font-size:18px;letter-spacing:-.4px}.device-mini{font-size:8px;letter-spacing:1.1px}.device-domain{font-size:11px}.state-pill{padding:6px 8px;font-size:9px;gap:5px}.state-led{width:6px;height:6px}.status-panel{margin:21px 0;padding:13px 12px}.status-panel p{font-size:11px}.device-footer{grid-template-columns:1fr 1fr;gap:16px}.device-footer>div:last-child{grid-column:1 / -1}.device-footer strong{font-size:11px}.section-heading{margin:29px 0 14px}.section-heading h2{font-size:17px}.section-heading p{font-size:11px}.power-grid{gap:11px}.power-card{padding:17px 15px;min-height:156px}.power-symbol{width:38px;height:38px;margin-bottom:19px}.power-title{font-size:14px}.power-note{font-size:10px}.power-arrow{right:12px;bottom:13px}.quick-heading{margin-top:27px}.quick-card{padding:14px}.mobile-nav{position:fixed;left:0;right:0;bottom:0;height:calc(64px + env(safe-area-inset-bottom));padding:4px 7px env(safe-area-inset-bottom);z-index:10;display:flex;justify-content:space-around;align-items:center;background:#101827ef;border-top:1px solid #2e3a50;backdrop-filter:blur(16px)}.mobile-nav-item{border:0;background:transparent;color:#91a1b9;display:flex;flex-direction:column;align-items:center;gap:5px;padding:5px 11px;font-size:10px}.mobile-nav-item .icon{width:22px;height:22px}.mobile-nav-item.is-active{color:var(--teal)}.security-card{display:block;padding:22px}.security-card h2{font-size:21px}.security-illustration{margin-bottom:19px}.empty-card{padding:48px 21px}}
@media(max-width:380px){.main-content{padding-left:14px;padding-right:14px}.state-pill{font-size:8px}.device-image{width:42px;height:42px}.device-identity h2{font-size:16px}.topbar-right{gap:7px}.preview-chip{font-size:8px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Etapa 2: formularios, seguridad y auditoría */
.account-body{min-height:100vh;background:radial-gradient(circle at 30% 10%,#182b3c 0,transparent 35%),var(--bg)}
.auth-shell{min-height:100vh;display:flex;justify-content:center;align-items:center;padding:34px 18px}
.auth-card,.management-card{background:#151e2e;border:1px solid #35445c;border-radius:20px;padding:33px;width:min(100%,470px);box-shadow:var(--shadow)}
.auth-wide{width:min(100%,610px)}.auth-card h1,.management-card h1{font-size:30px;letter-spacing:-1px;margin:10px 0}
.auth-mark{display:grid;place-items:center;height:58px;width:58px;border-radius:18px;background:#223f43;color:#61e8c5;font-size:21px;font-weight:800;margin-bottom:22px}
.auth-subtitle,.auth-foot,.subtle-note{color:#9aabc0;line-height:1.65;font-size:13px}.auth-foot{font-size:11px;margin-top:20px}
.auth-card form,.management-form{display:flex;flex-direction:column;gap:10px;margin-top:23px}
.auth-card label,.management-form label{font-size:12px;color:#cbd6e3;font-weight:700;margin-top:9px}
.auth-card input,.management-form input,.management-form select{width:100%;padding:13px 14px;background:#0d1624;border:1px solid #3b5067;border-radius:10px;color:#f1f7fd;font-size:15px;outline-offset:2px}
.management-form select{color:#f1f7fd}
.action-submit{border:0;background:#59dfc0;color:#102e2a;border-radius:11px;padding:14px 18px;font-weight:800;font-size:13px;cursor:pointer;margin-top:15px;text-align:center}
.as-link{display:block}.auth-link{display:inline-block;margin-top:16px;color:#8fcef4;font-size:13px}.auth-link:hover,.account-links a:hover{text-decoration:underline}
.form-errors{color:#ffd0d0;font-size:13px;line-height:1.6}.form-errors:empty{display:none}
.checkline{display:flex;align-items:center;gap:9px}.checkline input{width:auto}.secret-block{background:#0a1525;border:1px solid #465d72;border-radius:12px;padding:20px;overflow-wrap:anywhere}
.secret-block span{display:block;color:#9caec4;font-size:12px;margin-bottom:10px}.secret-block code{color:#76e7c8;font-size:21px;letter-spacing:2px}
.recovery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.recovery-grid code{background:#102337;padding:10px;text-align:center;border-radius:8px;font-size:13px}
.text-button,.signout-button{background:transparent;border:1px solid #46536c;color:#cbd8ed;padding:9px 14px;border-radius:9px;font-size:12px;cursor:pointer}
.top-logout{margin-left:16px}.management-card{width:min(100%,960px)}.management-card h2{font-size:18px;margin-top:30px}
.management-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}.management-form>div{display:flex;flex-direction:column;gap:6px}
.management-form button{grid-column:1/-1}.table-wrap{overflow-x:auto}.activity-table{width:100%;border-collapse:collapse;font-size:12px;text-align:left}
.activity-table th{color:#9ab0c6;font-size:11px;border-bottom:1px solid #37465b;padding:14px 9px}.activity-table td{border-bottom:1px solid #26384c;padding:12px 9px;color:#d4e1ec}
.activity-table td small{display:block;color:#8ca0b7;margin-top:4px}.mini-button{border:1px solid #576a80;border-radius:8px;background:#253249;color:#e6f0fa;padding:8px 10px;font-size:11px}
.success-note{padding:13px;border:1px solid #397759;background:#193c30;color:#aaf6d5;border-radius:11px;font-size:12px}
.account-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}.account-links a{border:1px solid #3b5a72;background:#152f41;border-radius:8px;padding:11px;color:#b0def4;font-size:12px}
@media(max-width:720px){.auth-card,.management-card{padding:22px}.management-form{grid-template-columns:1fr}.recovery-grid{grid-template-columns:1fr}.top-logout{margin-left:6px}.signout-button{padding:7px 9px}}

.role-select{background:#142335;border:1px solid #455c70;border-radius:7px;color:#d5e6f6;padding:7px;max-width:135px}

/* MFA QR: imagen generada en servidor, sin peticiones externas */
.mfa-qr-panel{background:#101c2b;border:1px solid #3c5969;border-radius:17px;padding:22px 15px;margin:22px 0;text-align:center;display:flex;align-items:center;flex-direction:column;gap:7px}
.mfa-qr-image-wrap{background:#fff;border:9px solid #fff;border-radius:12px;display:flex;align-items:center;justify-content:center;width:min(100%,288px);margin-bottom:9px}
.mfa-qr-image{display:block;width:100%;max-width:248px;height:auto;aspect-ratio:1/1;image-rendering:auto}
.mfa-qr-panel strong{font-size:16px;color:#f2f8ff}
.mfa-account-label{font-size:12px;color:#8fe6cc;overflow-wrap:anywhere}
.mfa-qr-panel p{font-size:12px;line-height:1.6;color:#a7b6c7;margin:8px 0 0}
.mfa-manual{margin:20px 0 13px;border:1px solid #35475e;border-radius:12px;padding:15px}
.mfa-manual summary{cursor:pointer;color:#bdebdc;font-size:13px;font-weight:700}
.mfa-manual p{color:#9aabc0;font-size:12px;line-height:1.6}
.mfa-manual .secret-block{margin-top:12px}
@media(max-width:480px){.mfa-qr-panel{padding:16px 10px}.mfa-qr-image-wrap{width:min(100%,278px)}}

/* Etapa 3: monitoreo NAS. No representa acciones de energía. */
.state-pill[data-state="online"] { color:#65e6bd; border-color:#2c7e63; background:#163d34; }
.state-pill[data-state="unreachable"] { color:#f1c28a; border-color:#78583c; background:#34291f; }
.state-pill[data-state="not_configured"],.state-pill[data-state="unknown"] { color:#b3bfd3; border-color:#45546c; background:#252d3c; }
.state-pill[data-state="online"] .state-led { background:#5fe4ab; box-shadow:0 0 9px #5fe4ab55; }
.state-pill[data-state="unreachable"] .state-led { background:#ecc17d; }
.nas-checks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin:15px 0 0; }
.nas-checks>div { display:flex; flex-direction:column; gap:8px; border:1px solid #34475e; background:#102033; border-radius:11px; padding:13px; min-width:0; }
.nas-checks span { color:#9eacc2; font-size:11px; line-height:1.4; }
.nas-checks strong { font-size:12px; color:#c1cee0; }
.nas-checks strong.probe-online { color:#65e6bd; }
.nas-checks strong.probe-unreachable { color:#e7bb8b; }
.nas-checks-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 0 16px; }
.nas-checks-footer small { color:#93a4ba; font-size:11px; }
.nas-refresh { color:#91d9e6; background:#183043; border:1px solid #376075; padding:8px 11px; border-radius:8px; font-size:11px; cursor:pointer; white-space:nowrap; }
.nas-refresh:disabled { opacity:.5; cursor:progress; }
@media(max-width:720px){.nas-checks{grid-template-columns:1fr}.nas-checks>div{flex-direction:row;justify-content:space-between;align-items:center}.nas-checks-footer{flex-direction:column;align-items:flex-start}.nas-refresh{align-self:flex-start}}

/* Etapa 4: UI de confirmación segura para energía */
.power-action-form {display:flex;min-width:0;} .power-action-form .power-card {width:100%;text-align:left;}
.power-disabled {opacity:.48;cursor:not-allowed;} .power-feedback {background:#153d34;border:1px solid #36715e;border-radius:12px;color:#c4efdd;padding:14px 18px;font-size:13px;margin:14px 0;line-height:1.6;}
.shutdown-dialog {width:min(94vw,450px);border:1px solid #7a5263;border-radius:19px;background:#182031;color:#f1f6fa;padding:27px;box-shadow:0 28px 80px #0009;}
.shutdown-dialog::backdrop {background:#020716bb;backdrop-filter:blur(3px);}
.shutdown-dialog h2 {font-size:22px;margin:0 0 12px;} .shutdown-dialog p {font-size:13px;line-height:1.65;color:#b8c4d3;}
.shutdown-dialog form {margin-top:22px;display:flex;flex-direction:column;gap:13px;} .shutdown-dialog label {font-size:12px;color:#e4dce1;font-weight:600;}
.shutdown-dialog input[type=text] {padding:14px;border-radius:10px;background:#0b1628;border:1px solid #586477;color:#fff;letter-spacing:3px;font-size:20px;}
.shutdown-dialog .confirm-row {display:flex;align-items:center;gap:10px;line-height:1.5;} .shutdown-dialog .confirm-row input {width:19px;height:19px;flex-shrink:0;}
.shutdown-actions {display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;} .shutdown-submit {border:0;border-radius:9px;background:#dc6e82;color:#231019;padding:12px 16px;font-weight:800;cursor:pointer;}
button:disabled {cursor:not-allowed;opacity:.6;}
@media(max-width:720px) {.shutdown-dialog{padding:20px}.shutdown-actions>*{flex:1}}