/* ============================================================
   SHELL.CSS — re-piel Atlas del chrome (header + sidebar + main +
   overlay). SOLO CSS, ÚLTIMA hoja de la cascada (gana a las
   globales legacy por orden). El shell es único → no se page-scopea.
   NO toca navigate/filterSidebar/_canNavigate ni los handlers del
   header. REGLA: ninguna regla de .nav-item fija display/visibility
   (lo gestiona filterSidebar inline). No toca clases genéricas de
   página (.card/.badge/.btn/.kpi/…). --header-h/--sidebar-w intactas.
   ============================================================ */

/* ---- HEADER ---- */
.header { background:var(--surface); border-bottom:1px solid var(--border); }
.header-logo { color:var(--text); }
.header-logo span { color:var(--accent); }
.header-pill { background:var(--accent-weak); border:1px solid transparent; border-radius:var(--radius-pill); color:var(--accent-strong); font-family:var(--font-num); }
.header-pill .dot { background:var(--accent); }

.empresa-select, .year-select { background:var(--surface) var(--select-arrow) no-repeat right 9px center; border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); font-size:13px; padding:6px 26px 6px 10px; -webkit-appearance:none; appearance:none; cursor:pointer; transition:border-color .13s, box-shadow .13s; }
.empresa-select { font-family:var(--font-sans); min-width:160px; }
.year-select { font-family:var(--font-num); }
.empresa-select:focus, .year-select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-weak); }

.hamburger span { background:var(--text-2); }

.btn-logout { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-2); font-family:var(--font-sans); font-size:12px; font-weight:600; padding:6px 13px; transition:all .13s; }
.btn-logout:hover { background:var(--hover); color:var(--text); border-color:var(--border-strong); }

/* ---- SIDEBAR ---- */
.sidebar { background:var(--surface); border-right:1px solid var(--border); }
.sidebar-label { color:var(--text-3); letter-spacing:.1em; }
.nav-item { color:var(--text-2); font-family:var(--font-sans); font-weight:500; border-left:2px solid transparent; transition:background .15s, color .15s, border-color .15s; }
.nav-item:hover { background:var(--hover); color:var(--text); }
.nav-item.active { background:var(--accent-weak); color:var(--accent-strong); border-left:2px solid var(--accent); font-weight:600; }
.nav-item .icon { color:var(--text-3); }
.nav-item.active .icon { color:var(--accent-strong); }
.nav-badge { background:var(--accent); color:var(--accent-on); border-radius:var(--radius-pill); font-weight:700; }
.sidebar-bottom { border-top:1px solid var(--border); }
.sidebar-version { color:var(--text-3); font-family:var(--font-num); }
.sidebar-bottom { display:flex; flex-direction:column; align-items:stretch; gap:10px; padding:16px 20px; }
.sidebar-bottom__meta { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.sidebar-planner-link {
  width:100%;
  min-height:34px;
  border:1px solid var(--accent);
  border-radius:var(--radius-sm);
  background:var(--accent);
  color:var(--accent-on);
  font-family:var(--font-sans);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  cursor:pointer;
  padding:8px 12px;
  text-align:center;
  transition:background .13s, border-color .13s, transform .13s;
}
.sidebar-planner-link:hover { background:var(--accent-strong); border-color:var(--accent-strong); }
.sidebar-planner-link:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (min-width: 769px) {
  body.sidebar-collapsed .sidebar-bottom { padding-left:8px; padding-right:8px; }
  body.sidebar-collapsed .sidebar-bottom__meta { display:none; }
  body.sidebar-collapsed .sidebar-planner-link {
    min-width:40px;
    min-height:34px;
    padding:8px 0;
    font-size:0;
    position:relative;
  }
  body.sidebar-collapsed .sidebar-planner-link::after {
    content:"P";
    font-size:13px;
    letter-spacing:0;
  }
}

/* ---- OVERLAY MÓVIL ---- */
.sidebar-overlay { background:rgba(15,30,25,0.5); }

/* ---- MAIN ---- */
.main { background:var(--bg); }