/* RESPONSIVE DESIGN PARA MONEX */

/* Tablets y pantallas medianas */
@media (max-width: 1024px) {
    .div-wrapper-bx {
        max-width: 95%;
        width: 95%;
        margin-left: auto;
        margin-right: auto;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .bloquebX_izquierdo ul {
        width: 100%;
    }
    
    .bloquebX_izquierdo li {
        width: 100%;
    }
}

/* Dispositivos plegables y pantallas anchas especiales (como Galaxy Z Fold) */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
    .div-wrapper-bx {
        max-width: 85%; /* Más margen en dispositivos plegables */
        width: 85%;
        margin: -150px auto 40px auto;
        padding: 30px 40px; /* Más padding lateral */
    }
    
    /* En dispositivos plegables, mantener layout horizontal si hay espacio */
    .div-wrapper-bx {
        flex-direction: row;
    }
    
    .bloquebXdercho, .bloquebX_izquierdo {
        width: 48%;
        margin: 0;
        padding: 0 15px;
    }
    
    .bloquebXdercho:has(.login-box-servicios), 
    .bloquebXdercho:has(.login-box-servicios-password) {
        padding-top: 0;
        margin-top: 72px;
    }
}

/* Móviles y pantallas pequeñas */
@media (max-width: 768px) {
    /* Header responsive mantiene proporciones */
    .header {
        padding: 10px 15px;
    }
    
    .logo {
        height: 60px;
    }
    
    .bandera-email {
        height: 18px;
    }
    
    /* Hero section más pequeña */
    .hero-section {
        height: 250px;
    }
    
    /* Contenedor principal - cambiar a columnas */
    .div-wrapper-bx {
        max-width: 95%;
        width: 95%;
        margin: -150px auto 100px auto; /* Espacio para footer en móviles */
        padding: 20px 30px; /* Más padding lateral para evitar tocar bordes */
        flex-direction: column; /* Columnas */
        gap: 40px; /* Espacio entre bloques */
        min-width: 320px; /* Ancho mínimo para evitar deformaciones */
    }
    
    /* Reordenar: Login primero, Tips segundo */
    .bloquebXdercho {
        order: 1; /* Login arriba */
        width: 100%;
        padding-top: 0;
        margin-top: 0;
        margin-bottom: 0;
    }
    
    .bloquebX_izquierdo {
        order: 2; /* Tips debajo */
        width: 100%;
        margin-top: 0;
        padding-top: 20px;
    }
    
    /* MANTENER tamaños del login SIN deformar */
    .login-box-servicios, .login-box-servicios-password {
        margin-top: 20px;
        padding: 30px; /* Mantener padding original */
    }
    
    /* Ajustar el bloque derecho específicamente en mobile */
    .bloquebXdercho:has(.login-box-servicios), .bloquebXdercho:has(.login-box-servicios-password), .bloquebXdercho:has(.login-box-token) {
        padding-top: 0;
        margin-top: 20px;
    }
    
    /* Estilos responsive para página de token */
    .login-box-token {
        padding: 30px 20px;
    }
    
    .token-header {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }
    
    .token-user-info {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .btn-cancelar-token {
        width: auto;
        padding: 8px 18px;
        font-size: 13px;
    }
    
    .input-group-token {
        width: 80%;
        height: 50px;
    }
    
    .input-token {
        height: 50px;
        font-size: 18px;
        padding-left: 55px;
    }
    
    .token-buttons {
        flex-direction: column;
        width: 80%;
        margin: 25px auto 0 auto;
    }
    
    .btn-ingresar-token, .btn-salir-token {
        max-width: 100%;
        width: 100%;
    }
    
    .banca-digital-logo {
        max-width: 200px; /* Mantener tamaño */
    }
    
    .input-group-servicios, .input-group-password-servicios {
        width: 70%; /* Mantener ancho original */
        height: 44px; /* Mantener altura original */
        margin: 0 auto 15px auto; /* Centrar y espaciado vertical */
    }
    
    .input-usuario-servicios, .input-password-servicios {
        height: 44px; /* Mantener altura original */
        font-size: 21px; /* Mantener tamaño de fuente */
        padding-left: 62px; /* Mantener padding original */
        padding-right: 40px;
    }
    
    .user-icon-servicios, .password-icon-servicios {
        position: absolute;
        left: 0px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
    }
    
    .btn-verificar-servicios {
        width: 70%; /* Mantener ancho original */
        font-size: 18px; /* Mantener tamaño original */
        padding: 10px 30px; /* Mantener padding original */
    }
    
    /* IMAGEN de enlaces centrada y tamaño original */
    .form-links-image {
        display: block;
        margin: 0 auto;
        max-width: 100%; /* Se adapta al contenedor en mobile */
        width: auto;
        height: auto;
    }
    
    .login-links-servicios {
        text-align: center;
        overflow: visible; /* Para que no se corte */
        margin-bottom: 15px;
        padding: 0 10px; /* Padding para que no toque los bordes */
    }
    
    /* Tips de seguridad mantener formato */
    .bloquebX_izquierdo h2 {
        font-size: 24px; /* Mantener tamaño original */
    }
    
    .bloquebX_izquierdo ul {
        width: 493px; /* Mantener ancho original */
        text-align: justify;
        margin: 0 auto; /* Centrar */
    }
    
    .bloquebX_izquierdo li {
        width: 493px; /* Mantener ancho original */
        font-size: 14px; /* Mantener tamaño original */
    }
    
    .bloquebX_izquierdo p {
        font-size: 14px; /* Mantener tamaño original */
    }
    
    /* App download mantener formato */
    .app-download-servicios {
        padding: 20px; /* Mantener padding original */
    }
    
    .app-download-servicios p {
        font-size: 14px; /* Mantener tamaño original */
    }
    
    /* Footer responsive para tablets */
    .footer {
        padding: 60px 0 40px;
        margin-top: 0; /* Sin margen, el wrapper maneja el espaciado */
    }
    
    .footer-content {
        padding: 0 30px;
    }
    
    .footer-image {
        max-width: 90%;
    }
    
    /* Estilos responsive para formulario de sincronización de token en tablets */
    .sincro-form-horizontal {
        flex-wrap: wrap;
        gap: 15px;
    }
    
    .sincro-token-container {
        padding: 40px 30px;
    }
}

/* Móviles muy pequeños */
@media (max-width: 480px) {
    .div-wrapper-bx {
        margin: -120px auto 80px auto; /* Espacio para footer en móviles pequeños */
        padding: 15px 25px; /* Mantener padding lateral mínimo */
        max-width: 95%; /* No ocupar 100% para mantener márgenes */
        width: 95%;
        gap: 30px; /* Menos espacio en móviles pequeños */
        min-width: 300px; /* Ancho mínimo */
    }
    
    .login-box-servicios, .login-box-servicios-password {
        margin-top: 15px;
        padding: 25px;
    }
    
    .bloquebXdercho:has(.login-box-servicios), .bloquebXdercho:has(.login-box-servicios-password), .bloquebXdercho:has(.login-box-token) {
        margin-top: 15px;
    }
    
    /* Estilos responsive para página de token en móviles pequeños */
    .login-box-token {
        padding: 25px 15px;
    }
    
    .token-user-name {
        font-size: 20px;
    }
    
    .token-user-account {
        font-size: 13px;
    }
    
    .banca-digital-titulo-token {
        font-size: 24px;
    }
    
    .input-group-token {
        width: 85%;
    }
    
    .token-buttons {
        width: 85%;
    }
    
    .input-group-servicios, .input-group-password-servicios {
        width: 80%; /* Ajuste mínimo */
        height: 44px; /* Mantener altura */
        margin: 0 auto 15px auto; /* Centrar y espaciado vertical */
    }
    
    .input-usuario-servicios, .input-password-servicios {
        height: 44px; /* Mantener altura */
        font-size: 19px; /* Ligero ajuste */
        padding-left: 58px; /* Ajuste mínimo */
        padding-right: 38px;
    }
    
    .user-icon-servicios, .password-icon-servicios {
        position: absolute;
        left: 0px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
    }
    
    .btn-verificar-servicios {
        width: 75%; /* Ajuste mínimo */
        font-size: 17px; /* Mantener casi original */
    }
    
    /* Ajustar imagen de enlaces en móviles pequeños */
    .form-links-image {
        max-width: 95%; /* Un poco más pequeña en móviles */
    }
    
    .login-links-servicios {
        padding: 0 5px; /* Menos padding en móviles pequeños */
        margin-bottom: 12px;
    }
    
    /* Tips de seguridad para móviles pequeños */
    .bloquebX_izquierdo ul {
        width: 100%; /* Solo en móviles muy pequeños */
    }
    
    .bloquebX_izquierdo li {
        width: 100%; /* Solo en móviles muy pequeños */
        font-size: 13px; /* Ajuste mínimo */
        padding-left: 15px;
    }
    
    .bloquebX_izquierdo p {
        font-size: 13px; /* Ajuste mínimo */
    }
    
    /* Footer responsive para móviles pequeños */
    .footer {
        padding: 40px 0 30px;
        margin-top: 0; /* Sin margen, el wrapper maneja el espaciado */
    }
    
    .footer-content {
        padding: 0 15px;
    }
    
    .footer-image {
        max-width: 95%;
    }
    
    /* Estilos responsive para formulario de sincronización de token */
    .sincro-form-horizontal {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }
    
    .sincro-token-container {
        padding: 30px 20px;
    }
    
    .sincro-btn-enviar-horizontal {
        width: 100%;
    }
}