/* ═══════════════════════════════════════════════════════════
   VIURAX Mobile Fix — 2026-10-10
   Mobile-first responsive + touch-friendly
   ═══════════════════════════════════════════════════════════ */

/* ─── 1. FONTS: Nada menos de 14px en mobile ─── */
@media (max-width: 768px) {
    html {
        -webkit-text-size-adjust: 100%; /* iOS: respeta el zoom */
    }
    body {
        font-size: 16px !important; /* Base legible */
        line-height: 1.5 !important;
    }
    /* Escalar todos los fonts chicos a mínimo 14px */
    *[style*="font-size: 9px"],
    *[style*="font-size:9px"] { font-size: 14px !important; }
    *[style*="font-size: 10px"],
    *[style*="font-size:10px"] { font-size: 14px !important; }
    *[style*="font-size: 11px"],
    *[style*="font-size:11px"] { font-size: 14px !important; }
    *[style*="font-size: 12px"],
    *[style*="font-size:12px"] { font-size: 15px !important; }

    /* Headers responsive con clamp() */
    h1 { font-size: clamp(1.75rem, 5vw, 2.5rem) !important; }
    h2 { font-size: clamp(1.5rem, 4vw, 2rem) !important; }
    h3 { font-size: clamp(1.25rem, 3vw, 1.5rem) !important; }
}

/* ─── 2. WIDTHS: Nada de 1000px+ en mobile ─── */
@media (max-width: 768px) {
    /* Forzar max-width 100% en contenedores con width fijo grande */
    *[style*="width: 1200px"],
    *[style*="width:1200px"],
    *[style*="width: 1280px"],
    *[style*="width:1280px"],
    *[style*="width: 1100px"],
    *[style*="width:1100px"] {
        width: 100% !important;
        max-width: 100% !important;
    }
    /* Prevenir scroll horizontal */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    /* Grids responsive */
    .grid, .features, .cards {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
}

/* ─── 3. TOUCH-FRIENDLY: Botones de mínimo 44x44px ─── */
@media (max-width: 768px) {
    button,
    .btn,
    a.btn,
    input[type="submit"],
    [role="button"] {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 12px 20px !important;
        font-size: 16px !important; /* iOS: no hace zoom si >= 16px */
        touch-action: manipulation !important; /* Sin delay 300ms */
    }
    /* Inputs también */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    select,
    textarea {
        font-size: 16px !important; /* iOS: previene auto-zoom */
        min-height: 44px !important;
        padding: 12px !important;
    }
    /* Cualquier elemento clickeable debe tener 44x44 */
    a {
        touch-action: manipulation !important;
    }
}

/* ─── 4. VIEWPORT: Ajustes específicos iOS ─── */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari */
    body {
        -webkit-tap-highlight-color: transparent; /* Sin highlight azul feo */
    }
    /* Fix para 100vh en iOS (que cuenta la barra de navegación) */
    .full-height {
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }
}

/* ─── 5. TOASTS para reemplazar alert() ─── */
.viurax-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: rgba(20, 20, 30, 0.95);
    color: #fff;
    padding: 14px 22px;
    border-radius: 12px;
    font-size: 15px;
    max-width: calc(100vw - 40px);
    z-index: 999999;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    pointer-events: none;
}
.viurax-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
.viurax-toast.success { border-left: 4px solid #22c55e; }
.viurax-toast.error   { border-left: 4px solid #ef4444; }
.viurax-toast.info    { border-left: 4px solid #3b82f6; }
.viurax-toast.warning { border-left: 4px solid #f59e0b; }

/* ─── 6. MODALES responsive ─── */
@media (max-width: 768px) {
    .modal-content,
    [class*="modal"] > div,
    .auth-modal > div {
        max-width: 95vw !important;
        max-height: 90vh !important;
        margin: 20px auto !important;
        padding: 20px !important;
    }
}

/* ─── 7. HERO / SECCIONES responsive ─── */
@media (max-width: 768px) {
    section {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    /* Imágenes no se desbordan */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ─── 8. OCULTAR decoraciones en mobile ─── */
@media (max-width: 480px) {
    /* Ocultar elementos puramente decorativos que rompen layout */
    .globe-3d,
    canvas,
    [class*="3d"],
    [class*="decoration"] {
        display: none !important;
    }
}

/* ─── 9. NAV / MENÚ MOBILE ─── */
@media (max-width: 768px) {
    /* Menú hamburguesa */
    .menu-toggle, .hamburger {
        display: flex !important;
        min-width: 44px;
        min-height: 44px;
    }
    .nav-links, .menu-items {
        display: none;
    }
    .nav-links.open, .menu-items.open {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(5, 7, 13, 0.98);
        padding: 60px 20px 20px;
        z-index: 10000;
        overflow-y: auto;
    }
    .nav-links.open a, .menu-items.open a {
        font-size: 1.5rem !important;
        padding: 16px 0 !important;
    }
}