/* =============================================================================
 * responsive-a11y.css — piezas canónicas P8.11 (touch targets) + P8.12 (clamp).
 * Estándar de App del despacho (alleato-v2-kit). Clon de
 * standard/plantilla/css/responsive-a11y.css. Importado DESPUÉS del CSS de tema
 * para que gane en cascada. No hardcodea colores.
 *
 * Adopción en esta app (EJS+Bootstrap):
 *   - <link> tras el tema en views/layouts/main.ejs.
 *   - Toggle hamburguesa (topbar.ejs) marcado con class="tap-target".
 * ============================================================================= */

/* -----------------------------------------------------------------------------
 * [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.
 * `.tap-target` es el opt-in explícito para botones-ícono chicos.
 * --------------------------------------------------------------------------- */
.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 */
    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
 * consumen directo (`font-size: var(--fs-h1)`) o vía las clases utilitarias.
 * --------------------------------------------------------------------------- */
: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; }