/* ============================================================
   ESTILOS CONTROLADORES: ILUSTRACIÓN COMPLETA + LOGIN DINÁMICO
   ============================================================ */

html, body {
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    width: 100% !important;
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif !important;
    background: #ffffff !important;
    overflow: hidden !important; /* Bloqueado solo en escritorio */
}

/* Forzar reset absoluto de contenedores nativos para el centrado */
#layout,
.task-login #layout-content,
#layout-content .login-wrapper {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
}

#layout-content .login-wrapper {
    flex-direction: row !important;
    align-items: stretch !important;
}

/* COLUMNA IZQUIERDA (DESKTOP): 30% de ancho */
#layout-content .login-left {
    flex: 0 0 30% !important;
    max-width: 30% !important;
    min-width: 340px !important; 
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; 
    align-items: center !important;     
    padding: 2rem !important;
    background: #fcfcfd !important;
    box-shadow: 2px 0 20px rgba(0,0,0,0.06) !important;
    z-index: 1 !important;
    box-sizing: border-box !important;
}

/* FORMULARIO DINÁMICO DE ROUNDCUBE */
#login-form,
.task-login #login-form,
#layout-content .login-left .propform {
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    top: 0 !important; 
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* LOGO DE ROUNDCUBE (Alineado al ancho de los inputs) */
.task-login #logo,
.task-login #layout-content #logo,
#layout-content .login-left .propform #logo {
    position: static !important;
    top: 0 !important;
    margin: 0 auto 1.8rem auto !important;
    width: 100% !important;        /* <--- Fuerza a ocupar el 100% del contenedor */
    max-width: 320px !important;   /* <--- Mismo ancho máximo exacto que los inputs (320px) */
    height: auto !important;
    max-height: none !important;
    display: block !important;
}


/* REDISEÑO DE LA TABLA INTERNA */
#layout-content .login-left .propform table,
#layout-content .login-left .propform tbody,
#layout-content .login-left .propform tr,
#layout-content .login-left .propform td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
    box-sizing: border-box !important;
}

#layout-content .login-left .propform tr {
    margin-bottom: 1rem !important;
}

/* Ocultar textos/etiquetas duplicadas de la tabla */
#layout-content .login-left .propform td.title,
#layout-content .login-left .propform .input-group-prepend {
    display: none !important;
}

/* ENTRADAS DE TEXTO DINÁMICAS (Usuario y Contraseña) */
#layout-content .login-left .propform input[type="text"],
#layout-content .login-left .propform input[type="password"] {
    width: 100% !important;
    padding: 0.85rem 1.2rem !important;
    border: 1.5px solid #dce1e8 !important;
    border-radius: 8px !important;
    font-size: 0.95rem !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

#layout-content .login-left .propform input:focus {
    border-color: #1a2b4a !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(26,43,74,0.1) !important;
}

/* CONTENEDOR DEL BOTÓN */
#layout-content .login-left .propform .formbuttons,
#layout-content .login-left .propform p {
    width: 100% !important;
    margin-top: 0.5rem !important;
    display: block !important;
}

/* BOTÓN DE INICIO DE SESIÓN */
#layout-content .login-left .propform .formbuttons button,
#layout-content .login-left .propform .formbuttons input[type="submit"],
#layout-content .login-left .propform button.submit,
#layout-content .login-left .propform .button {
    width: 100% !important;
    padding: 0.9rem !important;
    background: #1a2b4a !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

#layout-content .login-left .propform .formbuttons button:hover,
#layout-content .login-left .propform button.submit:hover {
    background: #0f1e33 !important;
}

/* COLUMNA DERECHA: ILUSTRACIÓN DESKTOP */
#layout-content .login-right {
    flex: 1 !important;
    background: #eef2f7 !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 2.5rem !important; 
    box-sizing: border-box !important;
}

#layout-content .login-right img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; 
    display: block !important;
}

#layout-content .voice,
#layout-content #login-footer {
    display: none !important;
}

/* ============================================================
   REDISEÑO EXCLUSIVO Y SEGURO PARA DISPOSITIVOS MÓVILES
   ============================================================ */
@media (max-width: 992px) {
    html, body {
        overflow: auto !important;
        height: auto !important;
    }
    
    #layout,
    .task-login #layout-content,
    #layout-content .login-wrapper {
        position: relative !important;
        height: auto !important;
        min-height: 100vh !important; 
        display: flex !important;
        flex-direction: column !important;
    }
    
    #layout-content .login-wrapper {
        flex-direction: column !important;
    }
    
    #layout-content .login-left {
        flex: 1 0 auto !important;
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important; 
        height: auto !important;
        padding: 3.5rem 1.5rem !important; 
    }
    
    #layout-content .login-right {
        height: 35vh !important; 
        flex: none !important;
        padding: 1.5rem !important;
        background: #eef2f7 !important;
    }
}