/* V2 · layout.css — app-shell: topbar, sidebar, contenido, bottom-nav móvil */

.v2-app { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "sidebar topbar" "sidebar main"; }

/* ---------- Topbar ---------- */
.v2-topbar {
  grid-area: topbar;
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  /* Con viewport-fit=cover (necesario para que el fondo llegue a los bordes) el contenido se mete
     DEBAJO de la barra de estado al instalar la app: en iPhone el botón de menú quedaba encima de
     la hora y no se podía pulsar. env() vale 0 en navegador normal y en móviles sin notch, así que
     esto no cambia nada fuera del modo instalado. */
  padding-top: calc(var(--sp-3) + env(safe-area-inset-top, 0px));
  padding-left: max(var(--sp-5), env(safe-area-inset-left, 0px));
  padding-right: max(var(--sp-5), env(safe-area-inset-right, 0px));
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.v2-topbar__spacer { flex: 1; }
.v2-topbar__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); }
.v2-iconbtn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); color: var(--text); transition: var(--t-fast); }
.v2-iconbtn:hover { border-color: var(--brand); color: var(--brand); }
.v2-menu-toggle { display: grid; } /* visible también en escritorio: oculta/muestra el sidebar */

.v2-userchip { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); }
.v2-userchip__avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--brand-grad); color: var(--brand-contrast); display: grid; place-items: center; font-weight: 700; font-size: var(--fs-sm); }
.v2-userchip__bal { color: var(--brand); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Sidebar ---------- */
.v2-sidebar {
  grid-area: sidebar;
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  background: var(--bg-2); border-right: 1px solid var(--border);
  padding: var(--sp-4) var(--sp-3);
  overflow-y: auto;
}
.v2-brand { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3) var(--sp-5); }
.v2-brand__logo { width: 60px; height: 60px; object-fit: contain; flex: none; }
.v2-brand__name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); line-height: 1.05; }
.v2-brand__tag { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }

.v2-nav { display: flex; flex-direction: column; gap: 2px; }
.v2-nav__group { display: flex; flex-direction: column; gap: 2px; }
.v2-nav__section { margin-top: var(--sp-4); padding: 0 var(--sp-3) var(--sp-2); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.v2-nav__item {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  justify-content: flex-start;
  padding: var(--sp-3); border-radius: var(--r-md);
  color: var(--text-soft); font-weight: 600; font-size: var(--fs-sm);
  background: transparent; border: 1px solid transparent;
  transition: var(--t-fast); text-align: left;
}
.v2-nav__item:hover { background: var(--surface); color: var(--text); text-decoration: none; }
.v2-nav__item.is-active { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); border-color: color-mix(in srgb, var(--brand) 30%, transparent); }
.v2-nav__icon { width: 20px; height: 20px; flex: none; display: grid; place-items: center; }
.v2-nav__badge { margin-left: auto; background: var(--danger); color: #fff; font-size: var(--fs-xs); font-weight: 700; border-radius: var(--r-pill); padding: 1px 7px; }
.v2-sidebar__foot { margin-top: auto; padding-top: var(--sp-4); }

/* ---------- Main ---------- */
.v2-main { grid-area: main; padding: var(--sp-6) var(--sp-6) var(--sp-10); min-width: 0; overflow-x: hidden; }
.v2-container { width: 100%; max-width: var(--max-w); margin: 0 auto; min-width: 0; }

/* ---------- Sidebar colapsado (solo escritorio) ---------- */
@media (min-width: 961px) {
  .v2-app.is-nav-collapsed { grid-template-columns: minmax(0, 1fr); grid-template-areas: "topbar" "main"; }
  .v2-app.is-nav-collapsed .v2-sidebar { display: none; }
}

/* ---------- Bottom nav (móvil) ---------- */
.v2-bottomnav { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .v2-app { grid-template-columns: minmax(0, 1fr); grid-template-areas: "topbar" "main"; }
  .v2-sidebar {
    position: fixed; left: 0; top: 0; z-index: 60; width: 80vw; max-width: 320px;
    transform: translateX(-100%); transition: transform var(--t);
    box-shadow: var(--shadow-lg);
    /* El menú lateral también arranca en top:0 → su cabecera caía bajo la barra de estado. */
    padding-top: env(safe-area-inset-top, 0px);
  }
  .v2-app.is-nav-open .v2-sidebar { transform: translateX(0); }
  .v2-scrim { display: none; position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.5); }
  .v2-app.is-nav-open .v2-scrim { display: block; }
  .v2-menu-toggle { display: grid; }
  .v2-main { padding: var(--sp-4) var(--sp-4) calc(var(--sp-10) + 64px); }

  .v2-bottomnav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
    background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px);
    border-top: 1px solid var(--border); padding: var(--sp-1) var(--sp-2) calc(var(--sp-1) + env(safe-area-inset-bottom));
  }
  .v2-bottomnav__item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--sp-2); color: var(--muted); font-size: 10px; font-weight: 600; border-radius: var(--r-sm); }
  .v2-bottomnav__item.is-active { color: var(--brand); }
}