/* CSS Responsive para versión móvil */

/* Breakpoint para dispositivos móviles */
@media (max-width: 768px) {
    
    /* Contenedor principal - cambiar a layout vertical */
    .slider-container {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
    }
    
    /* Ocultar el slider en móvil */
    .slider-section {
        display: none;
    }
    
    /* Hacer que la sección de contenido ocupe todo el ancho */
    .content-section {
        width: 100%;
        height: auto;
        min-height: 100vh;
        padding: 20px;
        justify-content: flex-start;
    }
    
    /* Ajustar el wrapper del contenido */
    .content-wrapper {
        padding-top: 20px;
        margin-bottom: 30px;
    }
    
    /* Ajustar el logo */
    .content-wrapper img {
        max-width: 150px;
    }
    
    /* Ajustar el título de login */
    .login-title {
        font-size: 20px;
        line-height: 28px;
        margin-top: 30px;
        width: auto;
    }
    
    /* Ajustar el texto de ayuda */
    .login-hint {
        font-size: 13px;
        margin-top: 15px;
        padding: 0 20px;
    }
    
    /* Ajustar el wrapper del formulario */
    .form-wrapper {
        margin-top: 30px;
        padding: 0 10px;
    }
    
    /* Ajustar el formulario */
    .login-form {
        width: 100%;
        max-width: 100%;
    }
    
    /* Ajustar el input */
    .client-input {
        height: 50px;
        font-size: 16px; /* Evitar zoom en iOS */
    }
    
    /* Ajustar el botón */
    .submit-btn {
        height: 50px;
        margin-top: 20px;
    }
    
    /* Ajustar el footer */
    .footer {
        margin-top: 40px;
        padding: 15px 10px;
    }
    
    .footer-links {
        margin-bottom: 12px;
        gap: 8px;
    }
    
    .footer-link {
        font-size: 11px;
    }
    
    .footer-copyright {
        font-size: 11px;
    }
    
    /* Agregar contenido promocional debajo del formulario */
    .mobile-promo {
        display: block;
        margin-top: 40px;
        padding: 0 20px;
        text-align: center;
    }
    
    .mobile-promo h2 {
        color: #fff;
        font-family: 'Noto Sans', sans-serif;
        font-size: 18px;
        font-weight: 700;
        line-height: 24px;
        margin-bottom: 20px;
    }
    
    .mobile-promo ul {
        list-style: none;
        padding: 0;
        margin: 0;
        text-align: left;
    }
    
    .mobile-promo li {
        color: #fff;
        font-family: 'Noto Sans', sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        margin-bottom: 12px;
        padding-left: 20px;
        position: relative;
    }
    
    .mobile-promo li:before {
        content: "•";
        color: #00a8ff;
        font-size: 16px;
        position: absolute;
        left: 0;
        top: 0;
    }
}

/* Breakpoint para dispositivos muy pequeños */
@media (max-width: 480px) {
    
    .content-section {
        padding: 15px;
    }
    
    .content-wrapper {
        padding-top: 15px;
    }
    
    .content-wrapper img {
        max-width: 120px;
    }
    
    .login-title {
        font-size: 18px;
        line-height: 24px;
        margin-top: 25px;
    }
    
    .login-hint {
        font-size: 12px;
        padding: 0 10px;
    }
    
    .form-wrapper {
        padding: 0 5px;
    }
    
    .mobile-promo {
        padding: 0 15px;
        margin-top: 30px;
    }
    
    .mobile-promo h2 {
        font-size: 16px;
        line-height: 22px;
        margin-bottom: 15px;
    }
    
    .mobile-promo li {
        font-size: 13px;
        line-height: 18px;
        margin-bottom: 10px;
    }
}

/* Ocultar contenido promocional en desktop */
.mobile-promo {
    display: none;
}