:root{font-family:var(--font-sans);color:var(--text);background:var(--bg);--rail-width:72px;--rail-expanded-width:260px;--topbar-height:48px;--workspace-gap:6px}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at top left,var(--glow) 0,var(--bg) 40%);overflow:hidden}button,input,select{font:inherit}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,summary:focus-visible{outline:var(--focus-ring);outline-offset:2px}.boot,.login-page{display:grid;min-height:100vh;place-items:center}.login-card{width:min(420px,calc(100vw - 32px));padding:var(--s6);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--veil);box-shadow:var(--shadow-lg)}.brand{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s5)}.brand-mark{display:grid;width:42px;height:42px;place-items:center;border-radius:50%;background:var(--brand);color:var(--brand-ink);font-weight:900}.brand h1{margin:0;font-size:var(--fs-26)}.brand small,.muted{color:var(--text-2)}.login-page label,#content label,.agent-drawer label{display:block;margin:var(--s3) 0 var(--s1);color:var(--text-2);font-size:var(--fs-13)}.login-page .field,#content .field,.agent-drawer .field{width:100%;height:44px;padding:0 var(--s3);color:var(--text);border:1px solid var(--line-field);border-radius:var(--r-md);background:var(--well)}.login-page .field:focus,#content .field:focus,.agent-drawer .field:focus{border-color:var(--brand)}.primary{width:100%;height:44px;margin-top:var(--s4);border:0;border-radius:var(--r-md);background:var(--brand);color:var(--brand-ink);font-weight:800;cursor:pointer}.primary:disabled{opacity:.45;cursor:not-allowed}.error{min-height:20px;margin:var(--s3) 0 0;color:var(--danger-text);font-size:var(--fs-13)}.shell{display:grid;height:100vh;grid-template-columns:var(--rail-width) minmax(0,1fr)}.sidebar{position:relative;z-index:60;display:flex;width:var(--rail-width);min-height:0;flex-direction:column;padding:var(--s2) var(--s2);border-right:1px solid var(--line);background:var(--rail-bg);transition:width var(--dur) ease,box-shadow var(--dur) ease}.shell.rail-expanded .sidebar{width:var(--rail-expanded-width);box-shadow:8px 0 28px var(--shade)}.sidebar .brand{justify-content:center;margin:var(--s2) 0 var(--s3)}.sidebar .brand>div:last-child,.nav-button>span:not(.nav-icon):not(.nav-badge),.nav-label,.user-card strong,.user-card small,.rail-toggle>span:last-child{display:none}.shell.rail-expanded .sidebar .brand{justify-content:flex-start}.shell.rail-expanded .sidebar .brand>div:last-child,.shell.rail-expanded .nav-button>span:not(.nav-icon):not(.nav-badge),.shell.rail-expanded .nav-label,.shell.rail-expanded .user-card strong,.shell.rail-expanded .user-card small,.shell.rail-expanded .rail-toggle>span:last-child{display:initial}.rail-toggle{display:flex;width:100%;height:38px;align-items:center;justify-content:center;gap:var(--s2);border:1px solid transparent;border-radius:var(--r-md);background:transparent;color:var(--text-2);cursor:pointer}.rail-toggle:hover{border-color:var(--line);background:var(--hover)}.shell.rail-expanded .rail-toggle{justify-content:flex-start;padding:0 var(--s3)}.sidebar .nav-button{justify-content:center}.shell.rail-expanded .sidebar .nav-button{justify-content:flex-start}.nav-label{margin:var(--s4) var(--s2) var(--s2);color:var(--text-3);font-size:var(--fs-11);font-weight:800;letter-spacing:.16em;text-transform:uppercase}.nav{min-height:0;flex:1;overflow:auto}.nav-button{display:flex;width:100%;align-items:center;gap:var(--s3);margin:var(--s0) 0;padding:var(--s2) var(--s3);border:1px solid transparent;border-radius:var(--r-md);background:transparent;color:var(--text-2);text-align:left;cursor:pointer}.nav-button:hover{background:var(--hover);color:var(--text)}.nav-button.active{border-color:var(--sel-line);background:var(--sel);color:var(--text)}.nav-icon{width:24px;text-align:center}.user-card{padding:var(--s3);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}.user-card strong{display:block}.user-card small{color:var(--text-3);text-transform:uppercase}.logout{float:right;border:0;background:none;color:var(--text-3);cursor:pointer}.workspace{display:grid;min-width:0;grid-template-rows:var(--topbar-height) minmax(0,1fr)}.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 var(--s4);border-bottom:1px solid var(--line);background:var(--top-bg);backdrop-filter:blur(12px)}.topbar h2{margin:0;font-size:var(--fs-20)}.status-dot{display:inline-block;width:8px;height:8px;margin-right:var(--s2);border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok)}.workspace-body{position:relative;min-width:0;min-height:0}.content{width:100%;height:100%;min-width:0;min-height:0;padding:var(--workspace-gap)}.frame-pool,.native-pool{position:absolute;inset:var(--workspace-gap);min-width:0;min-height:0}.native-pool[hidden]{display:none}.native-pool #office-native-root{width:100%;height:100%;overflow:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg)}.frame-pool .app-frame[hidden]{display:none}.app-frame{width:100%;height:100%;border:0;border-radius:var(--r-lg);background:var(--bg)}.panel-page{height:100%;overflow:auto;padding:var(--s5)}.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s4)}.page-head h3{margin:0 0 var(--s1);font-size:var(--fs-26)}.cards{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.card{padding:var(--s4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}.card h4{margin:0 0 var(--s2)}.badge{display:inline-flex;padding:var(--s0) var(--s2);border-radius:var(--r-pill);background:var(--fill);color:var(--text-2);font-size:var(--fs-11)}.badge.healthy{background:var(--ok-soft);color:var(--ok-text)}.badge.down{background:var(--danger-soft);color:var(--danger-text)}.meta{display:grid;gap:var(--s1);margin-top:var(--s3);color:var(--text-2);font-size:var(--fs-12)}.empty{padding:var(--s6);border:1px dashed var(--line);border-radius:var(--r-lg);color:var(--text-2);text-align:center}#overlay-host{pointer-events:none;position:fixed;inset:0;z-index:1000}.overlay-stack{pointer-events:none;position:absolute;display:grid;gap:var(--s2);width:min(390px,calc(100vw - 28px))}.overlay-stack.top-right{top:14px;right:14px}.overlay-stack.bottom-right{right:14px;bottom:14px}.overlay-stack.top{top:14px;left:50%;transform:translateX(-50%)}.overlay-stack.bottom{bottom:14px;left:50%;transform:translateX(-50%)}.overlay{pointer-events:auto;padding:var(--s3) var(--s3);border:1px solid var(--line);border-left:4px solid var(--info);border-radius:var(--r-lg);background:var(--veil);box-shadow:var(--shadow-md);backdrop-filter:blur(12px)}.overlay.success{border-left-color:var(--ok)}.overlay.warning{border-left-color:var(--warn)}.overlay.error{border-left-color:var(--danger)}.overlay-head{display:flex;justify-content:space-between;gap:var(--s3)}.overlay h5{margin:0;font-size:var(--fs-14)}.overlay p{margin:var(--s1) 0 0;color:var(--text-2);font-size:var(--fs-12)}.overlay-close{border:0;background:none;color:var(--text-3);cursor:pointer}.progress{height:5px;margin-top:var(--s2);overflow:hidden;border-radius:var(--r-pill);background:var(--fill)}.progress i{display:block;height:100%;background:var(--brand)}.agent-top-button{display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);border:1px solid var(--line-strong);border-radius:var(--r-pill);background:transparent;color:var(--text);cursor:pointer}.agent-top-button:hover{background:var(--hover)}.agent-drawer{position:fixed;z-index:90;top:calc(var(--topbar-height) + 8px);right:10px;bottom:10px;width:min(450px,calc(100vw - 92px));overflow:hidden;border:1px solid var(--line-strong);border-radius:var(--r-lg);background:var(--veil);box-shadow:var(--shadow-lg);backdrop-filter:blur(18px);animation:agent-enter var(--dur) ease-out}.agent-drawer[hidden]{display:none}.agent-drawer>header{display:flex;height:45px;align-items:center;justify-content:space-between;padding:0 var(--s3);border-bottom:1px solid var(--line)}.agent-drawer>header button{width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--text-2);font-size:var(--fs-26);cursor:pointer}.agent-drawer-body{height:calc(100% - 45px);min-height:0}.agent-fab{display:none}@keyframes agent-enter{from{opacity:0;transform:translateX(18px) scale(.985)}to{opacity:1;transform:none}}@media(max-width:760px){:root{--rail-width:62px;--workspace-gap:4px}.shell{grid-template-columns:var(--rail-width) minmax(0,1fr)}.sidebar{width:var(--rail-width);padding:var(--s2) var(--s1)}.shell.rail-expanded .sidebar{width:min(var(--rail-expanded-width),calc(100vw - 46px))}.topbar{padding:0 var(--s2)}.portal-status,.agent-top-button{display:none}.agent-fab{display:grid;position:fixed;right:14px;bottom:14px;z-index:85;width:48px;height:48px;place-items:center;border:0;border-radius:50%;background:var(--brand);color:var(--brand-ink);box-shadow:var(--shadow-md);font-size:var(--fs-20)}.agent-drawer{top:6px;right:6px;bottom:6px;width:calc(100vw - 12px)}.content{padding:var(--workspace-gap)}}

.sidebar{overflow:visible;padding-top:calc(var(--s7) + var(--s2))}.sidebar .brand{margin-top:0}.rail-toggle{position:absolute;top:12px;right:8px;width:38px;height:36px;border-color:var(--line);background:var(--surface);box-shadow:var(--shadow-md)}.rail-toggle:hover{border-color:var(--line-field);background:var(--raised)}.rail-toggle-icon{font-size:var(--fs-26);line-height:1}.shell.rail-expanded .rail-toggle{right:10px;width:auto;max-width:calc(100% - 20px);justify-content:flex-start;padding:0 var(--s3)}.nav{overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--line-field) transparent;transition:box-shadow var(--dur-fast) ease}.nav::-webkit-scrollbar{width:6px;height:0}.nav::-webkit-scrollbar-track{background:transparent}.nav::-webkit-scrollbar-thumb{border-radius:var(--r-pill);background:var(--line-field)}.nav.can-scroll-up.can-scroll-down{box-shadow:inset 0 16px 13px -15px var(--line-field),inset 0 -16px 13px -15px var(--line-field)}.nav.can-scroll-up:not(.can-scroll-down){box-shadow:inset 0 16px 13px -15px var(--line-field)}.nav.can-scroll-down:not(.can-scroll-up){box-shadow:inset 0 -16px 13px -15px var(--line-field)}.nav-button{min-width:0}.nav-button>span:not(.nav-icon):not(.nav-badge){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* El ancho activo es la fuente única para el menú y el área de aplicaciones. */
.shell{--rail-active-width:var(--rail-width);grid-template-columns:var(--rail-active-width) minmax(0,1fr)}
.shell.rail-expanded{--rail-active-width:var(--rail-expanded-width)}
.sidebar,.shell.rail-expanded .sidebar{width:100%}
.workspace,.workspace-body,.frame-pool{min-width:0;overflow:hidden}
@media(max-width:760px){.shell{--rail-active-width:var(--rail-width);grid-template-columns:var(--rail-active-width) minmax(0,1fr)}.shell.rail-expanded{--rail-active-width:min(var(--rail-expanded-width),calc(100vw - 46px))}.sidebar,.shell.rail-expanded .sidebar{width:100%}}

/* Navegación canónica: iconos SVG, ancho reservado y transiciones sin saltos. */
.shell{transition:grid-template-columns var(--dur) var(--ease)}
.shell.rail-expanded .sidebar{box-shadow:8px 0 28px var(--shade)}
.nav-button{min-height:42px;transition:background-color var(--dur-fast) ease,border-color var(--dur-fast) ease,color var(--dur-fast) ease}
.nav-button.active{box-shadow:inset 3px 0 0 var(--brand)}
.nav-icon{display:grid;width:24px;height:24px;flex:0 0 24px;place-items:center;text-align:center}
.nav-svg{display:block;width:20px;height:20px;stroke-width:1.8}
.utility-svg{display:block;width:18px;height:18px;stroke-width:1.8}
.rail-toggle-icon{display:grid;width:20px;height:20px;flex:0 0 20px;place-items:center;font-size:initial;line-height:normal}
.rail-toggle-icon .nav-svg{width:18px;height:18px}
.user-card{display:grid;grid-template-columns:32px minmax(0,1fr);grid-template-rows:auto auto;column-gap:var(--s2);align-items:center;padding:var(--s2)}
.logout{display:grid;grid-row:1/3;width:32px;height:32px;place-items:center;float:none;border:0;border-radius:var(--r-md);background:transparent;color:var(--text-3);cursor:pointer;transition:background-color var(--dur-fast) ease,color var(--dur-fast) ease}
.logout:hover{background:var(--hover);color:var(--text)}
.logout .nav-svg{width:18px;height:18px}
.user-card strong{grid-column:2;grid-row:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-card small{grid-column:2;grid-row:2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agent-top-button>span:first-child,.bell>span:first-child{display:grid;place-items:center}
.agent-fab .utility-svg{width:21px;height:21px}
@media(prefers-reduced-motion:reduce){.shell,.sidebar,.nav,.nav-button,.rail-toggle,.logout,.agent-drawer{transition:none;animation:none}}
.session-choices{border:1px solid var(--line-strong);border-radius:var(--r-lg);margin:var(--s4) 0 var(--s5);padding:var(--s3) var(--s3);display:grid;gap:var(--s2)}
.session-choices legend{padding:0 var(--s1);font-size:var(--fs-13);color:var(--text-2)}
.session-choice{display:flex;align-items:flex-start;gap:var(--s2);cursor:pointer;font-weight:500;line-height:1.25}
.session-choice input{width:17px;height:17px;flex:0 0 auto;margin:1px 0 0;accent-color:var(--brand)}
.session-choice span{display:grid;gap:var(--s0)}
.session-choice small,.session-default{color:var(--text-3);font-size:var(--fs-12);font-weight:400}

/* Acciones de una credencial: guardar y probar, lado a lado. */
.form-acciones{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;margin-top:var(--s2)}
.form-acciones .credencial-probar{padding:var(--s2) var(--s4);border-radius:var(--r-md);border:1px solid currentColor;background:transparent;color:inherit;cursor:pointer;font:inherit}
.form-acciones .credencial-probar:disabled{opacity:.55;cursor:progress}

/* Vencimiento del secreto de una credencial. */
.vencimiento{margin:var(--s1) 0 var(--s2);font-size:var(--fs-12);opacity:.8}
.vencimiento.pronto{color:var(--warn);opacity:1;font-weight:600}
.vencimiento.vencido{color:var(--danger-text);opacity:1;font-weight:600}

/* Disponibilidad de aplicaciones en riel y contenido */
.nav-button.app-unavailable{opacity:.45;color:var(--text-3)}
.nav-button.app-unavailable:hover{opacity:.8;color:var(--text-2)}
.app-unavailable-box{max-width:480px;margin:var(--s6) auto;display:grid;gap:var(--s3);place-items:center}
.app-unavailable-box .app-retry-btn{width:auto;min-width:140px;padding:0 var(--s4)}