/* ============================================================
 * mobile-foundations.css
 * ============================================================
 * Reglas mobile cross-cutting que aplican a TODOS los HTML
 * del proyecto. Antes vivían solo en css/styles.css (que carga
 * solo index.html), dejando los portales, onboardings y otras
 * páginas sin esta red de seguridad.
 *
 * Cargar PRIMERO o JUNTO con el CSS específico de cada página.
 * Estas reglas son defensivas y NO deberían entrar en conflicto
 * con estilos locales.
 *
 * Cubre:
 *   - Anti zoom iOS (inputs ≥ 16px)
 *   - Tap targets mínimos 44px (Apple HIG)
 *   - SVG/canvas que no rebalsen el contenedor
 *   - Headings que escalan con clamp en mobile
 *   - Wrap defensivo de strings largos
 *   - Overflow-x:hidden cross-cutting
 *   - prefers-reduced-motion global (accesibilidad vestibular)
 *   - color-scheme:dark para inputs date/time (pickers oscuros)
 * ============================================================ */


/* ─── 1. Evita auto-zoom iOS al hacer focus en inputs ────────
 * Safari iOS hace zoom in automático si el input tiene
 * font-size < 16px. Forzamos 16px en mobile. ──────────────── */
@media (max-width: 768px) {
    input, select, textarea,
    .form-input, .portal-input, .chat-field {
        font-size: 16px !important;
    }
}


/* ─── 2. Tap targets mínimos en mobile ────────────────────────
 * Apple HIG: 44x44pt mínimo. Excluimos los toggles colapsables
 * compactos del onboarding (que no son CTA principales). ──── */
@media (max-width: 768px) {
    button:not(.faq-toggle):not(.proceso-arrow):not(.step-dot):not(.lang-btn),
    .btn, .pill {
        min-height: 44px;
    }
}


/* ─── 3. SVG / canvas que respetan el contenedor ─────────────
 * Excluimos los SVG con width/height explícitos para no romper
 * iconos pequeños. ───────────────────────────────────────── */
@media (max-width: 768px) {
    svg:not([width]):not(.icon-inline),
    canvas {
        max-width: 100%;
        height: auto;
    }
}


/* ─── 4. Headings escalables ─────────────────────────────── */
@media (max-width: 768px) {
    h1 { font-size: clamp(1.6rem, 6vw, 2.4rem); }
    h2 { font-size: clamp(1.4rem, 5vw, 2rem); }
    h3 { font-size: clamp(1.15rem, 4.5vw, 1.6rem); }
}


/* ─── 5. Wrap defensivo de strings largos ────────────────── */
body {
    word-wrap: break-word;
    overflow-wrap: break-word;
}


/* ─── 6. Previene overflow horizontal accidental ──────────── */
html, body {
    overflow-x: hidden;
}


/* ─── 7. prefers-reduced-motion global ────────────────────── */
/* Quick win: respeta a usuarios con sensibilidad vestibular
 * que activaron "Reducir movimiento" en su sistema operativo.
 * Neutraliza TODAS las animaciones/transiciones existentes. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ─── 8. color-scheme:dark para inputs date/time ──────────── */
/* Hace que los pickers nativos (calendar de iOS, time picker
 * de Android) respeten el tema oscuro del sitio en vez de
 * abrir en blanco brillante sobre modales oscuros. */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
    color-scheme: dark;
}