/*
Theme Name: Quintina
Theme URI: https://tuquintina.com
Author: Joaco
Description: Sistema de Inteligencia Predictiva y Análisis de Secuencias. Estilo Claro High-Tech.
Version: 1.1
*/

/* ==========================================================================
   🎯 ESTILOS RESPONSIVOS EXCLUSIVOS PARA MÓVILES (Quintina Mobile v1.0)
   ========================================================================== */
@media (max-width: 768px) {
    
    /* 1. Ajustes Generales de la Cabecera en Móviles */
    header {
        flex-direction: column !important; /* Apila el logo arriba y el menú abajo */
        gap: 12px !important;
        padding: 15px 20px !important;
        text-align: center;
        align-items: center !important;
    }

    /* Centramos el bloque del logo */
    .brand-link {
        justify-content: center;
        margin: 0 auto;
    }

    /* Ajustamos el menú para que no se desborde en el Home */
    nav {
        justify-content: center !important;
        width: 100% !important;
        margin-top: 5px;
        display: flex;
        flex-wrap: wrap; /* Permite que los enlaces caigan en línea de forma armónica si falta espacio */
    }

    nav a {
        margin: 5px 10px !important;
        font-size: 15px !important;
    }

    /* 2. Optimización del Contenedor de Fichas (front-page.php) */
    .contenedor-fichas {
        grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)) !important; /* Reorganiza las fichas dinámicamente */
        gap: 8px !important;
        padding: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .bloque-ficha {
        font-size: 18px !important; /* Ajuste posicional interno para que no se corte el número */
        padding: 12px 5px !important;
        text-align: center;
    }

    /* 3. Ajustes de Márgenes del Cuerpo y Botón en el Home */
    main {
        padding: 20px 15px !important; /* Reduce los márgenes laterales excesivos en pantallas chicas */
        width: 100% !important;
        box-sizing: border-box;
    }

    .boton-predecir {
        width: 100% !important; /* El botón ocupa el ancho disponible de forma cómoda en mobile */
        max-width: 340px;
        margin: 25px auto 0 auto !important;
        display: block !important;
        text-align: center;
    }

    /* Recuadro de los pares recomendados en el Home */
    .recuadro-premium-minimal {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px 15px !important;
        box-sizing: border-box;
    }

    /* 4. Optimización de la Tarjeta de Autenticación (page-login.php) */
    .tarjeta-auth {
        width: 100% !important;
        max-width: 90% !important; /* Evita que la tarjeta toque los bordes físicos de la pantalla del celular */
        margin: 30px auto !important;
        padding: 25px 20px !important; /* Suaviza el espaciado interior */
        box-sizing: border-box;
    }

    .grupo-input input {
        width: 100% !important;
        padding: 12px !important; /* Hace que los campos sean más fáciles de presionar con el dedo */
    }

    .boton-auth {
        width: 100% !important;
        padding: 12px !important;
    }
}