/**
 * a11y-touch-safe-area.css — Targets táctiles WCAG 2.2 + iOS safe-area
 *
 * Lote 8 Track 2 (2026-06-22) del audit nc-product-review --ui-ux.
 * Aplica criterios mobile-friendly globalmente sobre la app existente:
 *
 *  - WCAG 2.2 SC 2.5.8 Target Size (Minimum 24×24 CSS):
 *      botones/links interactivos deben ser >=24×24 incluso en desktop.
 *      Convención más estricta Apple HIG/Material 3: 44×44 (mobile).
 *      Aplicamos 44×44 en mobile, 32×32 desktop (compromise visual + a11y).
 *
 *  - iOS safe-area-inset (notch + home indicator):
 *      env(safe-area-inset-top/bottom/left/right) en elementos fixed/sticky
 *      que ocupan bordes del viewport.
 *
 *  - Mobile viewport hardening:
 *      previene scroll horizontal en elementos que pueden overflow (tablas,
 *      preformatted text, embeds).
 *
 * Pendiente de iteración futura (no Lote 8):
 *  - Audit Playwright multi-viewport (iPhone SE 375, iPhone 14 390, Samsung A 360)
 *  - Refactor inputs con teclado virtual que tape el botón submit
 *  - Container queries para componentes complejos (timeline emisiones, charts)
 */

/* ============================================================ */
/* TOUCH TARGETS — WCAG 2.2 SC 2.5.8                            */
/* ============================================================ */

/* Mobile: targets táctiles >=44x44 (Apple HIG estándar) */
@media (max-width: 768px) {
    button:not([aria-hidden="true"]):not([hidden]),
    .btn,
    .btn-foundry,
    .btn-sm,
    .btn-xs,
    [role="button"]:not([aria-hidden="true"]),
    a.btn,
    a.button {
        min-height: 44px;
        min-width: 44px;
    }

    /* Inputs táctiles también deben ser >=44 alto. */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="url"],
    select,
    textarea {
        min-height: 44px;
        font-size: 16px; /* Previene zoom auto iOS al focus en input */
    }

    /* Checkboxes/radios: target táctil ampliado al label */
    label.checkbox-inline,
    label.radio-inline {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* Desktop: relajado a WCAG mínimo 24x24, pero mantener line-height
   suficiente para clicks precisos. */
@media (min-width: 769px) {
    button:not([aria-hidden="true"]):not([hidden]),
    .btn,
    [role="button"]:not([aria-hidden="true"]) {
        min-height: 32px;
        min-width: 32px;
    }
}

/* ============================================================ */
/* SAFE-AREA INSETS — iOS notch + home indicator                */
/* ============================================================ */

/* Header sticky/fixed: respeta notch superior */
.app-header,
.header-canonical,
header.app-header,
nav.app-navbar,
header[role="banner"] {
    padding-top: env(safe-area-inset-top, 0);
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
}

/* Footer sticky/fixed: respeta home indicator */
.app-footer,
.footer-canonical,
footer.app-footer,
footer[role="contentinfo"] {
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
}

/* Cookie banner / toasts bottom: respeta home indicator */
.cookie-banner,
.toast-container,
.toast,
.notification-container {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
}

/* Drawers laterales mobile */
.drawer,
.side-drawer,
.mobile-drawer {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* ============================================================ */
/* VIEWPORT HARDENING                                            */
/* ============================================================ */

/* Previene scroll horizontal indeseado en mobile */
@media (max-width: 768px) {
    html, body {
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Tablas con muchas columnas → scroll horizontal contenido */
    .table-responsive,
    .data-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Preformatted text / código no debe romper layout */
    pre, code {
        max-width: 100%;
        overflow-x: auto;
        word-wrap: break-word;
    }

    /* Imágenes responsive por defecto */
    img:not([width]):not([height]) {
        max-width: 100%;
        height: auto;
    }
}

/* ============================================================ */
/* FOCUS VISIBLE (complementa WCAG 2.4.7)                       */
/* ============================================================ */

/* Default browser :focus-visible es inconsistente — refuerzo global.
   Solo aplica cuando el user navega con teclado (NO mouse). */
*:focus-visible {
    outline: 2px solid #0ea5e9;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Inputs ya tienen sus estilos custom de focus — no sobre-escribir
   pero asegurar que NO desactivan visibilidad cuando user tabbea. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid #0ea5e9;
    outline-offset: -1px;
}