/* layout.css — con Bootstrap 5.3 ya cargado en cada pantalla (vía CDN,
   sin build step), este archivo deja de ser un sistema de diseño
   paralelo. Solo aporta:
     1) el mapeo de brand.config.js -> variables de color de Bootstrap
        (así cada instalación tiñe los componentes de Bootstrap sin
        tocar Bootstrap ni escribir CSS propio por componente)
     2) el puñado de reglas de layout que Bootstrap no resuelve solo
        (el shell sidebar+contenido)
*/

:root {
  --sidebar-width: 220px;
}

/* Bootstrap ya trae [data-bs-theme="dark"/"light"] — el color mode se
   selecciona ahí (ver brand.config.js / layout.js). Aquí solo mapeamos
   el acento de marca sobre las variables que Bootstrap expone. */
[data-bs-theme] {
  --bs-primary: var(--brand-primary, #2f6f4f);
  --bs-primary-rgb: var(--brand-primary-rgb, 47, 111, 79);
}

.app-shell {
  display: flex;
  min-height: 100vh;
}

.app-sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
}

.app-main {
  flex: 1;
  min-width: 0;
}

.app-content {
  padding: 24px;
}

@media (max-width: 768px) {
  .app-shell { flex-direction: column; }
  .app-sidebar { width: 100%; }
}