/* ==========================================================
   MEJORAS RESPONSIVE - ESTILOS LOGIN (estilos.css)
   Optimizaciones adicionales para dispositivos móviles
   ========================================================== */

/* ========== CONTENEDOR LOGIN RESPONSIVE ========== */

/* Móvil pequeño: < 480px */
@media (max-width: 480px) {
    .contenedor-login {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        min-height: 100vh;
    }

    .panel-izquierdo {
        display: none !important;
    }

    .panel-derecho {
        width: 100%;
        min-height: 100vh;
        padding: 20px 12px;
        border-radius: 0;
    }

    .contenedor-formulario {
        width: 100%;
        padding: 15px !important;
    }

    .encabezado-formulario {
        gap: 10px;
        margin-bottom: 15px;
    }

    .icono-seguridad {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .titulo-formulario {
        font-size: 18px !important;
    }

    .subtitulo-formulario {
        font-size: 12px !important;
    }

    .formulario-login {
        gap: 10px !important;
    }

    .grupo-entrada {
        margin-bottom: 10px !important;
    }

    .entrada-texto,
    .codigo-input {
        font-size: 16px !important;
        padding: 10px 10px !important;
        min-height: 44px !important;
    }

    .boton-ver-contrasena {
        width: 40px;
        height: 40px;
        right: 6px;
    }

    .opciones-login {
        margin: 10px 0 !important;
        min-height: auto;
    }

    .enlace-olvido {
        font-size: 12px;
    }

    .boton-login,
    .boton-envio {
        height: 44px !important;
        font-size: 14px !important;
        padding: 10px !important;
        margin-top: 5px;
    }

    .linea-separador {
        margin: 12px 0 !important;
    }

    .linea-separador > span {
        font-size: 12px;
    }

    /* Campos de código para 2FA */
    .contenedor-codigo-entrada {
        gap: 4px !important;
    }

    .codigo-digito {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
    }
}

/* Móvil grande: 480px - 768px */
@media (min-width: 480px) and (max-width: 768px) {
    .contenedor-login {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .panel-izquierdo {
        display: none !important;
    }

    .panel-derecho {
        width: 100%;
        padding: 30px 20px;
    }

    .contenedor-formulario {
        max-width: 100%;
        width: 100%;
        padding: 20px !important;
    }

    .encabezado-formulario {
        gap: 12px;
    }

    .titulo-formulario {
        font-size: 20px !important;
    }

    .subtitulo-formulario {
        font-size: 13px !important;
    }

    .entrada-texto {
        font-size: 16px !important;
        min-height: 44px !important;
        padding: 11px 12px !important;
    }

    .boton-login {
        min-height: 44px !important;
        font-size: 14px !important;
    }
}

/* Tablet: 768px - 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
    .contenedor-login {
        grid-template-columns: 1fr !important;
    }

    .panel-izquierdo {
        display: block !important;
        min-height: 150px;
    }

    .panel-derecho {
        padding: 40px 30px;
    }

    .contenedor-formulario {
        max-width: 400px;
        margin: 0 auto;
    }
}

/* Desktop y más: > 1024px */
@media (min-width: 1025px) {
    .panel-izquierdo {
        display: flex !important;
    }

    .panel-derecho {
        display: flex !important;
    }
}

/* ========== MENÚ MÓVIL RESPONSIVE ========== */

@media (max-width: 768px) {
    /* Mostrar menú móvil */
    .menu-movil {
        display: flex !important;
    }

    /* Características en menú móvil */
    .caracteristicas-menu {
        gap: 8px;
    }

    .caracteristica-menu {
        flex-direction: column;
        text-align: center;
        padding: 12px;
    }

    .caracteristica-menu i {
        width: 50px;
        height: 50px;
    }

    .caracteristica-menu h3 {
        font-size: 12px !important;
    }

    .caracteristica-menu p {
        font-size: 11px !important;
    }
}

@media (min-width: 769px) {
    .menu-movil {
        display: none !important;
    }

    .panel-menu-movil {
        display: none !important;
    }

    .overlay-menu {
        display: none !important;
    }
}

/* ========== AJUSTES DE FUENTE RESPONSIVOS ========== */

@media (max-width: 768px) {
    body {
        font-size: 14px !important;
    }

    h1 {
        font-size: 20px !important;
    }

    h2 {
        font-size: 18px !important;
    }

    h3 {
        font-size: 16px !important;
    }

    h4 {
        font-size: 14px !important;
    }

    p {
        font-size: 13px !important;
    }
}

/* ========== SCROLLBAR EN MÓVIL ========== */

@media (max-width: 768px) {
    /* Mostrar scrollbar simplificado */
    .panel-menu-movil::-webkit-scrollbar {
        width: 4px;
    }

    .panel-menu-movil::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
    }

    .panel-menu-movil::-webkit-scrollbar-thumb {
        background: rgba(229, 9, 20, 0.3);
        border-radius: 2px;
    }

    .panel-menu-movil::-webkit-scrollbar-thumb:hover {
        background: rgba(229, 9, 20, 0.5);
    }
}

/* ========== LANDSCAPE MÓVIL ========== */

@media (max-height: 600px) and (max-width: 768px) {
    .menu-movil {
        height: 45px;
    }

    .panel-derecho {
        min-height: auto;
        padding: 15px;
    }

    .contenedor-formulario {
        padding: 12px !important;
    }

    .encabezado-formulario {
        margin-bottom: 8px !important;
    }

    .grupo-entrada {
        margin-bottom: 8px !important;
    }

    .formulario-login {
        gap: 8px !important;
    }

    .boton-login {
        margin-top: 3px;
    }
}

/* ========== ANIMACIONES SMOOTH EN MÓVIL ========== */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========== MEJORA PARA PANTALLAS PEQUEÑAS HORIZONTALES ========== */

@media (max-width: 480px) and (orientation: landscape) {
    body {
        max-height: 100vh;
        overflow-y: auto;
    }

    .menu-movil {
        height: 50px;
        padding: 5px 12px;
    }

    .panel-derecho {
        padding: 15px;
        min-height: auto;
    }

    .contenedor-formulario {
        padding: 12px !important;
    }

    .encabezado-formulario {
        gap: 8px;
        margin-bottom: 10px;
    }

    .icono-seguridad {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }

    .titulo-formulario {
        font-size: 16px !important;
    }

    .subtitulo-formulario {
        font-size: 11px !important;
        display: none; /* Ocultar en landscape */
    }

    .entrada-texto {
        padding: 8px 10px !important;
        font-size: 14px !important;
    }

    .grupo-entrada {
        margin-bottom: 6px !important;
    }

    .etiqueta-entrada {
        font-size: 11px !important;
        margin-bottom: 3px !important;
    }

    .boton-login {
        height: 40px !important;
        font-size: 13px !important;
        margin-top: 2px;
    }

    .formulario-login {
        gap: 6px !important;
    }
}

/* ========== MÁXIMOS/MÍNIMOS EN DIFERENTES RESOLUCIONES ========== */

@media (min-width: 1440px) {
    .panel-derecho {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .contenedor-formulario {
        max-width: 450px;
    }

    .panel-izquierdo {
        max-width: 50%;
    }
}