/* ══════════════════════════════════════════════════════════════════ DALKEN — LOS COMPONENTES DEL PANEL El catálogo del shell: botones, filas, insignias, sidebar, formularios. Salió de base.html en V-3 (23-ago). Movimiento puro: ni una regla cambió. El orden de carga lo fija en base.html y en el panel de cocina: LETRA -> TOKENS -> COMPONENTES. ══════════════════════════════════════════════════════════════════ */ html { scrollbar-gutter: stable; background: var(--bg); } body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); } h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; color: var(--text); line-height: 1.2; } a { color: var(--accent); } a:hover { color: var(--accent-hover); } /* ---------- SHELL: sidebar + main ---------- */ .app { display: flex; min-height: 100vh; align-items: stretch; } .sidebar { width: 248px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); box-shadow: 6px 0 24px -10px rgba(var(--shadow-rgb), .08); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; height: 100dvh; z-index: 40; } .app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .main { flex: 1 1 auto; width: 100%; max-width: 1140px; margin: 0 auto; padding: 1.6rem 2rem 3rem; } .brand { display: flex; align-items: center; gap: .55rem; color: var(--text); } .brand .logo { display: inline-flex; align-items: center; justify-content: center; } .brand .logo img { display: block; } /* Logotipo (DESIGN.md §6.2): Hanken 600 + tracking .015em. El tracking abierto es la decisión de marca — la palabra respira y no se empasta a 20px. No cerrarlo ni subir a 700 "para que pese más": el peso lo carga la piedra. */ .brand .word { font-family: var(--font-display); font-weight: 600; font-size:var(--fs-xl); letter-spacing: .015em; line-height: 1; } .brand .word small { display: block; font-family: var(--font-body); font-weight: 500; font-size:var(--fs-2xs); color: var(--text-subtle); letter-spacing: .03em; margin-top: var(--sp-1); } .sidebar .brand { padding: 1.35rem 1.25rem 1.1rem; } /* La navegación es la ÚNICA parte que scrollea; la marca arriba y el pie (quién eres + Salir) quedan fijos. Con 19 ítems en el celular el sidebar medía 1082px contra un viewport de 757: sobraban 325px que no había cómo alcanzar —no existía overflow en ninguna parte— y el pie caía fuera de pantalla, así que el dueño no llegaba a Mi plan, Ayuda ni a su propio nombre. ⚠️ `min-height: 0` no es opcional: un hijo flex no se encoge por debajo de su contenido, y sin eso .nav se estira y el scroll no aparece. */ /* `justify-content` explícito: el framework le pone `space-between` a todo