/* Rumbo OS — app shell (riel lateral + topbar) · look "clean slick" ref sonar-advance
   Reutiliza los tokens Norte definidos en el <style> inline de cada página.
   Soporta tema claro/oscuro vía :root[data-theme="dark"]. */

:root{
  --rail-w:250px;
  --rail-bg:#fff; --rail-line:var(--line); --rail-ink:var(--navy); --rail-muted:var(--muted);
  --rail-active-bg:var(--wash); --rail-active-ink:var(--navy);
  --content-bg:var(--band);
  --tb-bg:#fff; --tb-line:var(--line);
}
:root[data-theme="dark"]{
  --navy:#0B1220; --navy-deep:#060A12; --band:#0E1626; --wash:#16233B;
  --line:#22314d; --muted:#8A97AA; --link:#7FB4FF;
  --rail-bg:#0B1424; --rail-line:#1c2a42; --rail-ink:#E7EEF8; --rail-muted:#8fa0ba;
  --rail-active-bg:#16233B; --rail-active-ink:#fff;
  --content-bg:#0A101C; --tb-bg:#0B1424; --tb-line:#1c2a42;
}
:root[data-theme="dark"] body{background:var(--content-bg);color:var(--rail-ink)}
:root[data-theme="dark"] .panel,:root[data-theme="dark"] .kpi,:root[data-theme="dark"] .os-card,
:root[data-theme="dark"] .fb,:root[data-theme="dark"] .pf,:root[data-theme="dark"] .area-links a{
  background:#101a2e;border-color:var(--line);color:var(--rail-ink)}
:root[data-theme="dark"] th{color:var(--rail-muted)}
:root[data-theme="dark"] .frm input,:root[data-theme="dark"] .frm select,
:root[data-theme="dark"] input.in2,:root[data-theme="dark"] textarea.in2{background:#0D1626;color:var(--rail-ink)}

/* ---- layout ---- */
#app{display:flex;min-height:100vh;align-items:stretch}
.rail{position:sticky;top:0;align-self:flex-start;height:100vh;width:var(--rail-w);flex:none;
  background:var(--rail-bg);border-right:1px solid var(--rail-line);display:flex;flex-direction:column;
  z-index:50;transition:transform .22s ease}
.main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--content-bg)}
.content{flex:1}
.content .wrap{max-width:1160px}

/* ---- rail: marca ---- */
.rail-brand{display:flex;align-items:center;gap:11px;padding:20px 20px 16px;width:100%;text-align:left;background:none;border:0;cursor:pointer}
.rail-brand svg{width:34px;height:34px;background:var(--navy);border-radius:10px;padding:5px;flex:none}
.rail-brand .bt{font:800 15px var(--sans);color:var(--rail-ink);line-height:1.1}
.rail-brand .bt small{display:block;font:600 9.5px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--rail-muted);margin-top:3px}

/* ---- rail: perfil ---- */
.rail-profile{display:flex;align-items:center;gap:10px;margin:0 14px 10px;padding:11px;border-radius:13px;background:var(--rail-active-bg)}
.rail-profile .av{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:radial-gradient(120% 120% at 30% 20%,var(--navy-700,#0A4386) 0%,var(--navy) 70%);color:#fff;font:800 15px var(--sans)}
.rail-profile .pi{min-width:0}
.rail-profile .pi b{display:block;font:700 13px var(--sans);color:var(--rail-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-profile .pi span{display:block;font:500 11px var(--sans);color:var(--rail-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- rail: nav ---- */
.rail-nav{flex:1;overflow-y:auto;padding:6px 12px 14px;display:flex;flex-direction:column;gap:2px}
.rail-nav::-webkit-scrollbar{width:8px}
.rail-nav::-webkit-scrollbar-thumb{background:var(--rail-line);border-radius:99px}
.rnav{display:flex;align-items:center;gap:11px;width:100%;text-align:left;border:0;background:none;cursor:pointer;
  font:600 13.5px var(--sans);color:var(--rail-muted);border-radius:11px;padding:10px 12px;position:relative;transition:.12s}
.rnav .ic{width:18px;text-align:center;font-size:15px;flex:none}
.rnav .lb{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rnav:hover{background:var(--rail-active-bg);color:var(--rail-ink)}
.rnav.on{background:var(--rail-active-bg);color:var(--rail-active-ink);font-weight:800}
.rnav.on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:99px;background:var(--blue)}
.rnav .cnt{font:800 10px var(--sans);background:var(--error);color:#fff;border-radius:999px;padding:1px 6px;min-width:18px;text-align:center}
.rnav .chev{margin-left:auto;font-size:11px;color:var(--rail-muted);transition:transform .18s}

/* grupo expandible */
.rgroup{display:flex;flex-direction:column}
.rgroup.open > .rgroup-hd .chev{transform:rotate(90deg)}
.rgroup-items{display:none;flex-direction:column;gap:1px;margin:1px 0 3px}
.rgroup.open > .rgroup-items{display:flex}
.rnav.sub{padding:8px 12px 8px 30px;font-size:12.5px}
.rnav.sub .ic{font-size:12px}
.rgroup-items .rnav.on::before{left:16px}

/* ---- rail: footer ---- */
.rail-foot{padding:12px 14px 16px;border-top:1px solid var(--rail-line);display:flex;flex-direction:column;gap:6px}
.rail-foot a{font:600 11.5px var(--sans);color:var(--rail-muted);text-decoration:none;padding:2px 4px}
.rail-foot a:hover{color:var(--blue)}
.rail-out{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:1px solid #f5c6c6;
  background:#FDECEC;color:var(--error);font:700 13px var(--sans);border-radius:12px;padding:11px;cursor:pointer}
.rail-out:hover{background:#f9dede}
:root[data-theme="dark"] .rail-out{background:rgba(214,0,0,.12);border-color:rgba(214,0,0,.35)}

/* ---- topbar ---- */
.topbar2{position:sticky;top:0;z-index:40;background:var(--tb-bg);border-bottom:1px solid var(--tb-line);
  display:flex;align-items:center;gap:14px;padding:12px 26px;min-height:60px}
.tb-burger{display:none;border:0;background:none;font-size:20px;cursor:pointer;color:var(--rail-ink)}
.tb-title h1{font:600 20px/1.15 var(--serif);color:var(--rail-ink);margin:0}
.tb-title span{display:block;font:500 12px var(--sans);color:var(--rail-muted);margin-top:1px}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:9px}
.tb-sync{display:inline-flex;align-items:center;gap:7px;font:600 11.5px var(--sans);color:var(--rail-muted);
  background:var(--rail-active-bg);border-radius:999px;padding:6px 12px;white-space:nowrap}
.tb-sync .dot{width:8px;height:8px;border-radius:99px;background:var(--success);box-shadow:0 0 0 3px rgba(18,136,66,.15)}
.tb-cop{display:inline-flex;align-items:center;gap:7px;font:700 12.5px var(--sans);color:#fff;cursor:pointer;
  border:0;border-radius:999px;padding:8px 15px;
  background:radial-gradient(120% 120% at 30% 20%,var(--navy-700,#0A4386) 0%,var(--navy) 60%,var(--navy-deep) 100%);
  box-shadow:0 4px 14px rgba(4,30,66,.22)}
.tb-cop:hover{transform:translateY(-1px)}
.tb-ic{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--tb-line);background:transparent;
  border-radius:10px;cursor:pointer;font-size:15px;color:var(--rail-muted)}
.tb-ic:hover{border-color:var(--blue);color:var(--blue)}
.tb-lang{font:700 12px var(--sans);border:1px solid var(--tb-line);background:transparent;color:var(--rail-ink);
  border-radius:10px;padding:8px 9px;cursor:pointer}

/* ---- responsive ---- */
@media(max-width:900px){
  .rail{position:fixed;left:0;top:0;transform:translateX(-100%);box-shadow:0 20px 60px rgba(4,30,66,.28)}
  #app.rail-open .rail{transform:none}
  .rail-scrim{display:none;position:fixed;inset:0;background:rgba(4,30,66,.4);z-index:45}
  #app.rail-open .rail-scrim{display:block}
  .tb-burger{display:block}
  .tb-sync .tx{display:none}
  .topbar2{padding:12px 16px}
}