/* CSS MÓVIL PROFESIONAL - INTERFAZ OPTIMIZADA */
/* IMPORTANTE: Este archivo debe cargarse DESPUÉS de main.css */

/* VIEWPORT FIX CRÍTICO - APLICAR SIEMPRE */
html {
    -webkit-text-size-adjust: none !important;
    -ms-text-size-adjust: none !important; 
    text-size-adjust: none !important;
    width: 100% !important;
    overflow-x: hidden !important;
}

body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* FORZAR ANCHO MÓVIL - MÁXIMA PRIORIDAD */
@media screen and (max-width: 768px) {
    * {
        box-sizing: border-box !important;
    }
    
    body, html {
        font-size: 16px !important;
        line-height: 1.4 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
}

@media (max-width: 640px) {
    
    /* ===== DASHBOARD MÓVIL FIXES ===== */
    body {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }
    
    /* Dashboard principal - ancho completo */
    .dashboard-main,
    main {
        padding: 0.5rem !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Cards del dashboard - stack vertical */
    .grid-cols-1,
    .grid-cols-2,
    .grid-cols-3,
    .md\\:grid-cols-2,
    .lg\\:grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Gamificación widget - compacto */
    .widget-gamification,
    .gamification-container {
        padding: 0.75rem !important;
        font-size: 0.8rem !important;
    }
    
    /* ===== IMÁGENES TEST MÓVIL ===== */
    
    /* Imágenes principales - más grandes en móvil */
    .test-image,
    img[src*="espacial"],
    img[src*="cubo"],
    img[src*="figura"] {
        width: 100% !important;
        max-width: 280px !important;
        height: auto !important;
        margin: 1rem auto !important;
        display: block !important;
    }
    
    /* Contenedor de pregunta - ajustado */
    .question-container {
        padding: 1rem !important;
        margin: 0.5rem 0 !important;
    }
    
    /* ===== MODALES MÓVIL RESPONSIVE ===== */
    
    /* Modal principal - pantalla completa en móvil */
    .modal-container,
    div[class*="modal"] {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-width: none !important;
        max-height: none !important;
        border-radius: 0 !important;
        padding: 1rem !important;
        overflow-y: auto !important;
    }
    
    /* Contenido de modal - ancho completo */
    .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        padding: 1rem !important;
    }
    
    /* ===== BOTONES ACCIÓN MÓVIL ===== */
    
    /* Botones principales - más grandes y accesibles */
    button,
    .btn,
    input[type="button"],
    input[type="submit"] {
        min-height: 44px !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        margin: 0.5rem 0 !important;
        border-radius: 0.5rem !important;
        touch-action: manipulation !important;
    }
    
    /* Botones de test específicos */
    #volver-inicio,
    .bg-red-500,
    .bg-green-600 {
        min-height: 50px !important;
        font-size: 1rem !important;
        margin: 0.75rem 0 !important;
    }
    
    /* Container de botones - stack vertical */
    .button-container,
    .flex.space-x-4,
    .flex.gap-4 {
        flex-direction: column !important;
        gap: 1rem !important;
        width: 100% !important;
    }
    
    /* ===== NAVEGACIÓN Y UI ELEMENTS ===== */
    
    /* Header navigation - compacto */
    header,
    .header {
        padding: 0.5rem !important;
        font-size: 0.9rem !important;
    }
    
    /* Progress indicators */
    .progress-indicator,
    .test-progress {
        font-size: 0.8rem !important;
        padding: 0.5rem !important;
    }
    
    /* Viewport específico - forzar zoom correcto */
    html {
        -webkit-text-size-adjust: none !important;
        -ms-text-size-adjust: none !important;
        text-size-adjust: none !important;
    }
    
    /* CONTENEDOR PRINCIPAL - MÁS ANCHO */
    .container {
        padding: 0.5rem !important;
        margin: 0 !important;
        max-width: 100% !important;
    }
    
    /* TEST CONTAINER - SIN MÁRGENES LATERALES */
    #test-container {
        padding: 1rem !important;
        margin: 0.5rem 0 !important;
        border-radius: 0.5rem !important;
    }
    
    /* TÍTULOS - TAMAÑO APROPIADO */
    h1, h2, h3 {
        font-size: 1.25rem !important;
        margin: 0.5rem 0 !important;
        line-height: 1.3 !important;
    }
    
    /* BOTONES OPCIONES - COMPACTOS MÓVIL */
    .question-option,
    .min-h-\[80px\],
    .min-h-\[50px\] {
        min-height: 35px !important;
        max-height: 40px !important;
        padding: 0.4rem !important;
        font-size: 0.8rem !important;
        line-height: 1.2 !important;
        margin: 0.2rem 0 !important;
        border-radius: 0.3rem !important;
    }
    
    /* GRIDS - COLUMNA ÚNICA CON ESPACIADO */
    .grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
    
    /* BOTONES DE ACCIÓN - MÁS GRANDES */
    .bg-indigo-600,
    .bg-green-600,
    .bg-blue-600,
    button:not(.question-option) {
        padding: 0.75rem 1.5rem !important;
        font-size: 1rem !important;
        min-height: 48px !important;
        border-radius: 0.5rem !important;
    }
    
    /* EXPLICACIONES - POSICIONAMIENTO CORRECTO */
    .explanation {
        position: static !important;
        margin-top: 1rem !important;
        clear: both !important;
        padding: 1rem !important;
        border-radius: 0.5rem !important;
    }
    
    /* TEXTO - TAMAÑO LEGIBLE */
    p, span, div {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
    }

    /* MODALES INSTRUCCIONES - TODOS LOS TIPOS */
    #spatialInstructionsModal:not(.hidden),
    #verbalInstructionsModal:not(.hidden),
    #verbal1InstructionsModal:not(.hidden),
    #verbal2InstructionsModal:not(.hidden),
    #logicaInstructionsModal:not(.hidden),
    #numericoInstructionsModal:not(.hidden),
    #mecanicoInstructionsModal:not(.hidden),
    #brujulasInstructionsModal:not(.hidden) {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 99999 !important;
        background: rgba(0,0,0,0.9) !important;
        align-items: center !important;
        justify-content: center !important;
        pointer-events: auto !important;
    }

    #spatialInstructionsModal:not(.hidden) > div,
    #verbalInstructionsModal:not(.hidden) > div,
    #verbal1InstructionsModal:not(.hidden) > div,
    #verbal2InstructionsModal:not(.hidden) > div,
    #logicaInstructionsModal:not(.hidden) > div,
    #numericoInstructionsModal:not(.hidden) > div,
    #mecanicoInstructionsModal:not(.hidden) > div,
    #brujulasInstructionsModal:not(.hidden) > div {
        max-width: 95% !important;
        width: 95% !important;
        max-height: 85% !important;
        background: white !important;
        padding: 1rem !important;
        border-radius: 0.5rem !important;
        overflow-y: auto !important;
        position: relative !important;
        z-index: 100000 !important;
    }
    
    /* CONTENIDO MODAL - TEXTO MÁS COMPACTO */
    #spatialInstructionsModal h3,
    #verbalInstructionsModal h3,
    #verbal1InstructionsModal h3,
    #verbal2InstructionsModal h3,
    #logicaInstructionsModal h3,
    #numericoInstructionsModal h3,
    #mecanicoInstructionsModal h3,
    #brujulasInstructionsModal h3 {
        font-size: 1.1rem !important;
        margin: 0.5rem 0 !important;
    }

    /* ===== BOTONES DE ACCIÓN EN MÓVIL ===== */

    /* Ocultar botones de escritorio en móvil */
    .desktop-action-buttons {
        display: none !important;
    }

    /* Mostrar contenedor de botones móviles */
    .mobile-action-buttons {
        display: flex !important;
        gap: 0.5rem !important;
        margin-top: 1rem !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .mobile-action-buttons button {
        flex: 1 !important;
        max-width: 140px !important;
        padding: 0.6rem 1rem !important;
        font-size: 0.85rem !important;
        min-height: 42px !important;
        border-radius: 0.5rem !important;
        font-weight: 600 !important;
    }
    
    #spatialInstructionsModal p,
    #verbalInstructionsModal p,
    #verbal1InstructionsModal p,
    #verbal2InstructionsModal p,
    #logicaInstructionsModal p,
    #numericoInstructionsModal p,
    #mecanicoInstructionsModal p,
    #brujulasInstructionsModal p {
        font-size: 0.8rem !important;
        line-height: 1.3 !important;
        margin: 0.4rem 0 !important;
    }
    
    #spatialInstructionsModal ul,
    #verbalInstructionsModal ul,
    #verbal1InstructionsModal ul,
    #verbal2InstructionsModal ul,
    #logicaInstructionsModal ul,
    #numericoInstructionsModal ul,
    #mecanicoInstructionsModal ul,
    #brujulasInstructionsModal ul {
        margin: 0.5rem 0 !important;
        padding-left: 1rem !important;
    }
    
    #spatialInstructionsModal li,
    #verbalInstructionsModal li,
    #verbal1InstructionsModal li,
    #verbal2InstructionsModal li,
    #logicaInstructionsModal li,
    #numericoInstructionsModal li,
    #mecanicoInstructionsModal li,
    #brujulasInstructionsModal li {
        font-size: 0.8rem !important;
        line-height: 1.3 !important;
        margin: 0.2rem 0 !important;
    }
    
    /* MODALES SELECCIÓN - FORZAR TAMAÑO PEQUEÑO */
    #espacial-modal .max-w-2xl,
    #verbal-modal .max-w-2xl,
    #logico-modal .max-w-2xl,
    #numerico-modal .max-w-2xl,
    #mecanico-modal .max-w-2xl,
    #brujulas-modal .max-w-2xl {
        max-width: 90vw !important;
        width: 90vw !important;
        max-height: 80vh !important;
        padding: 0.75rem !important;
        margin: 1rem !important;
    }
    
    #espacial-modal .grid,
    #verbal-modal .grid,
    #logico-modal .grid,
    #numerico-modal .grid,
    #mecanico-modal .grid,
    #brujulas-modal .grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    /* BOTONES MODALES - FORZAR PEQUEÑOS */
    #espacial-modal .grid button,
    #verbal-modal .grid button,
    #logico-modal .grid button,
    #numerico-modal .grid button,
    #mecanico-modal .grid button,
    #brujulas-modal .grid button {
        font-size: 0.7rem !important;
        padding: 0.3rem 0.5rem !important;
        margin: 0.1rem 0 !important;
        min-height: 32px !important;
        height: 32px !important;
        line-height: 1.2 !important;
        border-radius: 0.25rem !important;
    }
    
}

/* FIX CRÍTICO GLOBAL - CONTRASEÑA NEGRA FORZADA */
body input[type="password"],
body input[type="email"],
body #password,
body #email,
html input[type="password"],
html input[type="email"] {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    text-fill-color: #000000 !important;
    background-color: #f3f4f6 !important;
}