/* ============================================================
   Pulso · dashboard.css · EL ARMAZÓN, con el material del sistema
   Reescrita el 27 de agosto de 2026 al aplicar el sistema de diseño de
   Pulso pieza a pieza. Es la composición «Pantalla de trabajo» del
   catálogo (labs.ohwow.es/pulso/design-system/, banda #navegacion): el
   menú lateral como tarjeta de cristal a la izquierda, la barra de arriba
   en píldora de cristal, y el contenido debajo, todo sobre el fondo con
   halo que pinta el body.

   El LOOK de cada pieza lo trae components.css (`.sidenav`, `.topbar`,
   `.kpi`, `.card`…). Aquí solo vive lo que el catálogo no necesita
   porque es una lámina y la app no: la rejilla, el scroll propio del
   contenido, la barra pegajosa y el cajón del menú en pantallas
   estrechas. Y las piezas `db-*` que aún pintan algunas pantallas,
   hasta que todas hablen el vocabulario del catálogo.

   Los nombres de pieza NO cambian: hay una prueba que censa todas las
   clases que pintan las pantallas y exige que existan en alguna hoja.
   ============================================================ */

/* ---- 1 · La rejilla: menú a la izquierda, contenido con su propio scroll ---- */
.db-shell {
  display: grid;
  grid-template-columns: var(--db-side-w) minmax(0, 1fr);
  gap: var(--s-3);
  padding: var(--s-3);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: transparent; /* el halo del fondo lo pinta el body */
}

/* ---- 1.1 · El menú lateral: la tarjeta `.sidenav` del catálogo, a toda altura ---- */
.db-side {
  grid-column: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.db-side nav { display: grid; gap: 2px; }
/* Quince entradas más buscador y promo tienen que caber en un portátil de 900
   píxeles de alto sin desplazar el menú: entradas y grupos algo más juntos que
   en la lámina del catálogo, que solo enseña seis. */
.db-side.sidenav a { padding: 8px 12px; }
.db-side .sidenav__grupo { padding: 10px 12px 3px; }
.db-side .sidenav__promo { margin-top: 10px; padding: 12px 14px; gap: 4px; }
.db-side .sidenav__pie { padding-top: 10px; margin-top: 10px; }

/* ---- 1.2 · El contenido, con scroll propio ---- */
.db-main {
  grid-column: 2;
  min-width: 0; min-height: 0;
  overflow-y: auto;
  display: grid; gap: var(--s-3);
  /* Una sola columna que NO crece con su contenido: sin el minmax(0, 1fr), la
     barra de arriba (que no parte línea) ensancha la columna entera en un móvil
     y el texto de toda la pantalla se corta por la derecha. Medido el 27 de
     agosto a 390 px. */
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  background: transparent;
  scroll-behavior: auto; /* nunca smooth: secuestra el scroll programado (fallo 100 de la casa) */
  scrollbar-width: thin;
}
.db-main__body {
  padding: 0 4px var(--s-5);
  display: grid; gap: var(--s-4);
  align-content: start;
  min-width: 0;
}

/* ---- 1.3 · La barra de arriba: la `.topbar` del catálogo, pegada al borde al bajar ---- */
.db-topbar {
  position: sticky; top: 0; z-index: 40;
  flex-wrap: nowrap;
  min-height: var(--db-topbar-h);
}
.db-topbar h1 {
  font: 600 1rem/1.2 var(--font-display);
  margin: 0; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.db-topbar .avatar { text-decoration: none; }
.db-topbar .btn-circle, .db-topbar .avatar { flex: 0 0 auto; }
.db-topbar .tag-pill { white-space: nowrap; }
.db-topbar .topbar__selector { text-decoration: none; color: var(--text); }
.db-burger { display: none; }

/* ---- 1.4 · Secciones: título y explicación a la izquierda, controles a la derecha ---- */
.db-section { display: grid; gap: var(--s-3); min-width: 0; }
.db-section__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
}
.db-section__head h2 {
  font: 600 var(--t-h2)/1.25 var(--font-display);
  margin: 0; letter-spacing: -0.01em;
}
.db-section__head p { font: 400 var(--t-small)/1.55 var(--font-body); color: var(--text-muted); max-width: 70ch; margin: 0; }

/* ---- 1.5 · Pantalla estrecha: el menú se esconde en un cajón ---- */
@media (max-width: 1000px) {
  .db-shell { grid-template-columns: minmax(0, 1fr); padding: var(--s-2); gap: var(--s-2); }
  .db-side {
    position: fixed; z-index: 60;
    top: var(--s-2); bottom: var(--s-2); left: var(--s-2);
    width: var(--db-side-w);
    transform: translateX(calc(-100% - var(--s-3)));
    transition: transform .22s ease;
    box-shadow: var(--sh-3);
  }
  .db-side.is-open { transform: translateX(0); }
  .db-main { grid-column: 1; }
  .db-burger { display: inline-grid; }
  .db-topbar { gap: 10px; padding-left: 10px; }
  .db-topbar h1 { display: none; }
  .db-topbar .topbar__selector { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw; min-width: 0; }
  .db-topbar .topbar__selector svg { flex: 0 0 auto; }
}
/* En un móvil estrecho el periodo no cabe junto a la campana y el avatar; el
   periodo sigue escrito en la cabecera de cada pantalla. */
@media (max-width: 600px) {
  .db-topbar .tag-pill { display: none; }
  .db-scrim-side {
    position: fixed; inset: 0; z-index: 55;
    background: var(--db-scrim);
    border: 0; padding: 0; cursor: pointer;
  }
  .db-scrim-side[hidden] { display: none; }
}
@media (min-width: 1001px) { .db-scrim-side { display: none; } }
@media (prefers-reduced-motion: reduce) { .db-side { transition: none; } }

/* ============================================================
   2 · Lo que queda de las piezas `db-*` de las pantallas: todas hablan ya
   el vocabulario del catálogo (`.kpi`, `.tabla`, `.card`). Solo sigue en
   uso la marca de «no imprimir» de los documentos.
   ============================================================ */
.db-no-imprimir { display: revert; }