/* Vistas — encabezados, Administración → Módulos y públicas · POS-SAAS-0A.2 */

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.page-head__sub { margin-top: var(--s-1); color: var(--c-ink-2); font-size: var(--fs-lg); }
.page-head__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* ─────────────────── Administración → Configuración → Módulos ─────────────────── */

.module-count {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--s-3);
  border-radius: var(--r-pill);
  background: var(--c-surface-2);
  color: var(--c-petrol);
  font-weight: 700;
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.module-groups { display: grid; gap: var(--s-6); }
.module-group { display: grid; gap: var(--s-3); }
.module-group__title {
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-ink-2);
  font-weight: 700;
}
.module-group__list { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1180px) { .module-group__list { grid-template-columns: 1fr; } }

/* ─────────────────────────── muestras del design system ─────────────────────────── */

.lab-section .card__body { gap: var(--s-5); }
.lab-sub { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .08em; color: var(--c-ink-2); margin-top: var(--s-2); }
.lab-type.display { font-size: var(--fs-4xl); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.lab-type.h2 { font-size: var(--fs-xl); }
.lab-type.h3 { font-size: var(--fs-lg); }
.lab-nums { font-size: var(--fs-xl); font-weight: 700; }

.swatches { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.swatch { display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto; column-gap: var(--s-3); align-items: center; }
.swatch__chip { grid-row: span 2; width: 48px; height: 48px; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px rgba(11, 31, 59, .16); }
.swatch__name { font-weight: 600; }
.swatch__code { color: var(--c-ink-2); font-size: var(--fs-xs); }

.contrast-sample { display: inline-block; padding: 4px 10px; border-radius: var(--r-sm); font-weight: 600; box-shadow: inset 0 0 0 1px rgba(11, 31, 59, .12); }

.touch-demo { display: grid; gap: var(--s-2); justify-items: start; }

.icon-grid { list-style: none; display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.icon-grid__item { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--c-bg); }
.icon-grid__item code { font-size: var(--fs-xs); color: var(--c-ink-2); }

.event-log { padding-left: var(--s-6); display: grid; gap: var(--s-1); font-size: var(--fs-sm); min-height: 24px; }