/* ============================================================
   Alianza Seguro · Ajustes de legibilidad y usabilidad
   Cargado después de Tailwind CDN. Usa !important porque el CDN
   inyecta sus reglas en tiempo de ejecución, después de este archivo.
   ============================================================ */

/* ---------- 1. Tamaños mínimos de letra ----------
   Audiencia mayoritariamente adulta y en móvil: nada por debajo de ~12.5px.
   Tailwind: text-xs = 12px, text-sm = 14px.                        */
.text-xs        { font-size: 0.8125rem !important; line-height: 1.5 !important; }  /* 12 -> 13px */
.text-sm        { font-size: 0.9375rem !important; line-height: 1.6 !important; }  /* 14 -> 15px */
.text-\[9px\]   { font-size: 11px !important; }
.text-\[10px\]  { font-size: 12px !important; line-height: 1.45 !important; }
.text-\[11px\]  { font-size: 12.5px !important; line-height: 1.5 !important; }
.text-\[12px\]  { font-size: 13px !important; }

/* Texto corrido un poco más aireado */
.leading-relaxed { line-height: 1.7 !important; }

@media (max-width: 767px) {
  /* En móvil el cuerpo sube a 17px: mejora clara de lectura sin romper la retícula */
  body { font-size: 17px; }
  .text-base { font-size: 1.0625rem !important; }

  /* Texto justificado en columnas estrechas genera "ríos" de espacio en español */
  .text-justify { text-align: left !important; }
}

/* ---------- 2. Áreas táctiles de 44px (WCAG 2.5.8) ---------- */
@media (max-width: 1023px) {
  /* teléfono de la barra superior */
  .bg-primary a[href^="tel:"] { min-height: 44px; align-items: center; }

  /* botón hamburguesa */
  #menu-btn { min-width: 44px; min-height: 44px; display: inline-flex;
              align-items: center; justify-content: center; }

  /* índice alfabético de estados y iconos sociales redondos */
  a[href^="#letter-"],
  .rounded-full.w-10.h-10 { min-width: 44px !important; min-height: 44px !important; }

  /* campos de formulario: 42px -> 48px, y 16px evita el zoom automático de iOS */
  input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    min-height: 48px; font-size: 16px !important;
  }

  /* puntos del carrusel de fotos: el punto sigue siendo pequeño,
     pero el área que se puede tocar pasa a 44px */
  button[aria-label^="Foto"] { position: relative; }
  button[aria-label^="Foto"]::after {
    content: ""; position: absolute; inset: -17px; border-radius: 9999px;
  }

  /* casillas de consentimiento: 16px es demasiado pequeño para el dedo */
  input[type="checkbox"], input[type="radio"] {
    width: 22px !important; height: 22px !important; min-height: 22px !important;
  }
  label:has(input[type="checkbox"]), label:has(input[type="radio"]) {
    min-height: 44px; display: flex; align-items: flex-start; gap: 10px;
  }

  /* enlaces-CTA de texto ("Conocer más →", "Ver todas las preguntas →") */
  a.inline-flex, a[class*="items-center"][class*="gap-"] { min-height: 44px; }

  /* listas del pie: enlaces de 19px de alto, difíciles de acertar */
  footer li > a, footer ul a {
    display: inline-flex; align-items: center; min-height: 40px;
  }

  /* algunos campos quedan en 41px por reglas de assets/styles.css */
  input.w-full, select.w-full, textarea.w-full,
  form input, form select { min-height: 48px !important; }
}

/* ---------- 3. Scroll horizontal en móvil ----------
   .reveal-left / .reveal-right entran con translateX(±60px). Antes de
   revelarse sobresalen del viewport y el documento gana ~36px de ancho.
   En móvil la entrada pasa a ser vertical: mismo efecto, sin desbordamiento. */
@media (max-width: 767px) {
  .reveal-left, .reveal-right { transform: translateY(40px) !important; }
  .reveal-left.in-view, .reveal-right.in-view { transform: translateY(0) !important; }
}

/* ---------- 4. Respetar "reducir movimiento" ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale, .reveal-fade {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
}

/* ---------- 5. Foco visible para navegación por teclado ---------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid #c9a961; outline-offset: 2px; border-radius: 4px;
}