@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════
   layout.css — generado por SA-Diseñador.
   Disposición elegida: Menú lateral fijo
   Usa los tokens de theme.css; inclúyelo después de theme.css.
   ═══════════════════════════════════════════════════════════ */

.ui-shell {
  display: flex;
  min-height: 100vh;
  background: var(--bg);
  position: relative;
}

.ui-shell-nav {
  display: flex; flex-direction: column;
  width: var(--nav-w); flex: none;
  background: var(--nav-bg);
  border-right: var(--border-width) solid var(--line);
}
.ui-shell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ui-shell-top {
  display: flex; align-items: center; gap: 12px;
  height: 52px; flex: none; padding: 0 14px;
  background: var(--topbar-bg);
  border-bottom: var(--border-width) solid var(--line);
}
.ui-shell-body {
  flex: 1; overflow: auto; width: 100%;
  max-width: var(--content-max);
  padding: calc(var(--panel-pad) * var(--density));
}
.ui-burger {
  width: 32px; height: 28px; display: grid; align-content: center; gap: 4px;
  padding: 0 6px; background: none; cursor: pointer;
  border: var(--btn-border-width) solid var(--btn-border);
  border-radius: var(--btn-radius);
}
.ui-burger span { display: block; height: 2px; background: var(--ink); }

/* Menú lateral fijo */
.ui-burger { display: none; }

/* Tablero compuesto en el editor — 6 tarjetas sobre 4 columnas.
   La rejilla .ui-dash está en framework.css; el ancho y el alto de
   cada tarjeta van en el propio dashboard.html:

     1. Registros del mes — span 1
     2. Elementos activos — span 1
     3. Pendientes — span 1
     4. Cumplimiento — span 1
     5. Tendencia semanal — span 2, alta
     6. Última actividad — span 2, alta

   Para cambiarlo, edita el grid-column de esa tarjeta en el HTML.
   Desde aquí sólo se puede pisar con !important, porque el valor
   está en el atributo style. */