/* =============================================================================
 * responsive-a11y.css — piezas canónicas P8.11 (touch targets) + P8.12 (clamp).
 * Estándar de App del despacho (alleato-v2-kit). CSS neutral: sirve a los 3
 * sabores (Next+TW4, EJS+Bootstrap, EJS+Tailwind 3.4) — es CSS plano, no depende
 * del framework. Clónalo a `public/css/` (EJS) o `styles/` (Next) e impórtalo
 * DESPUÉS del CSS de tema para que gane en cascada. No hardcodea colores; usa el
 * sistema de tokens sólo donde ya existe.
 *
 * Adopción (por app, no automática):
 *   - EJS: <link rel="stylesheet" href="/css/responsive-a11y.css?v=..."> tras el
 *     tema, y marca los toggles de ícono con class="tap-target".
 *   - Next: import './responsive-a11y.css' en el layout raíz.
 * ============================================================================= */

/* -----------------------------------------------------------------------------
 * [P8.11] Touch targets ≥44px (WCAG 2.5.5 / ergonomía móvil)
 * En punteros gruesos (dedo) todo control accionable ocupa mínimo 44×44 CSS px.
 * `@media (pointer: coarse)` sólo afecta táctil — el mouse conserva su densidad,
 * así no engorda la UI de escritorio. `.tap-target` es el opt-in explícito para
 * botones-ícono chicos (hamburguesa, chevrons) que de otro modo quedan < 44.
 * --------------------------------------------------------------------------- */
.tap-target {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (pointer: coarse) {
  a[role="button"],
  button,
  [type="button"],
  [type="submit"],
  [type="reset"],
  .tap-target,
  .btn,                 /* Bootstrap */
  .side-item,           /* sorteo (EJS+TW3.4) */
  .side-group-header {  /* sorteo */
    min-height: 44px;
  }

  /* Botones que son sólo un ícono: garantizar también ancho mínimo. */
  .tap-target,
  button:not(.btn-block):not(.w-full) {
    min-width: 44px;
  }
}

/* -----------------------------------------------------------------------------
 * [P8.12] Tipografía fluida con clamp()
 * Escala continua móvil↔desktop sin saltos por breakpoint. Los `--fs-*` se
 * pueden consumir directo (`font-size: var(--fs-h1)`) o vía las clases utilitarias
 * de abajo. clamp(mín, preferido-vw, máx): el término medio escala con el ancho
 * del viewport entre los dos límites.
 * --------------------------------------------------------------------------- */
:root {
  --fs-h1: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem);   /* 24 → 36 px */
  --fs-h2: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);  /* 20 → 28 px */
  --fs-h3: clamp(1.1rem, 1rem + 0.5vw, 1.375rem);     /* ~17.6 → 22 px */
  --fs-lead: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* 16 → 18 px */
}

.fs-fluid-h1 { font-size: var(--fs-h1); line-height: 1.15; }
.fs-fluid-h2 { font-size: var(--fs-h2); line-height: 1.2; }
.fs-fluid-h3 { font-size: var(--fs-h3); line-height: 1.25; }
.fs-fluid-lead { font-size: var(--fs-lead); line-height: 1.5; }