/* static/css/style.css */

/* --- Variables CSS de Innovateqroo --- */
:root {
    --innovateqroo-dark-blue: #013C57; /* Azul Principal (Títulos, Texto) */
    --innovateqroo-light-blue: #00BCD4; /* Azul Acento (Botones, Foco) */
    --innovateqroo-text-dark: #343a40; 
    --innovateqroo-bg-light: #f8f9fa;
    --innovateqroo-white: #ffffff;
    --innovateqroo-background-gradient: linear-gradient(135deg, #013C57 0%, #00BCD4 100%); /* Degradado para la izquierda */
}

/* --- Estilos del Body y Contenedor Principal (Layout de 2 Columnas) --- */
body {
    background-color: var(--innovateqroo-dark-blue); /* Fondo oscuro general para el marco */
    /* CAMBIO CLAVE: Usamos la nueva fuente Inter */
    font-family: 'Inter', sans-serif; 
    display: flex;
    min-height: 100vh;
    font-family: 'Roboto', sans-serif;
    display: flex;
    min-height: 100vh;
    align-items: center; /* Centrar verticalmente */
    justify-content: center; /* Centrar horizontalmente */
    margin: 0;
    padding: 20px;
}

/* ESTILO ESPECÍFICO PARA EL LOGIN (Solo si body tiene la clase 'login-page-bg') */
body.login-page-bg {
    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364); /* Fondo Oscuro */
    color: var(--light); /* Texto blanco sobre fondo oscuro */
}


.login-split-container {
    display: flex;
    width: 90%; /* Ancho máximo en pantalla */
    max-width: 1000px; /* Tamaño máximo del contenedor dividido */
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    overflow: hidden; /* Importante para los bordes redondeados */
    min-height: 500px; /* Altura mínima para el efecto */
}

/* Columna Izquierda (Imagen/Degradado) */
.login-left-panel {
    width: 50%;
    background: var(--innovateqroo-background-gradient); /* Degradado institucional */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    position: relative;
    /* Si quieres una imagen de fondo difuminada: */
    /* background: url('../img/abstract_network.jpg') no-repeat center center; 
       background-size: cover; 
       filter: brightness(0.7); */
}

.left-panel-content {
    text-align: center;
    color: var(--innovateqroo-white);
    z-index: 10;
}

.left-panel-content h1 {
    font-weight: 700;
    font-size: 2.5em;
    margin-bottom: 15px;
}

.left-panel-content p {
    font-size: 1.1em;
}

/* Columna Derecha (Formulario) */
.login-right-panel {
    width: 50%;
    background-color: var(--innovateqroo-white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.login-form-content {
    max-width: 350px;
    width: 100%;
    text-align: center;
}

/* --- Estilos Específicos del Formulario --- */
.login-logo {
    max-width: 150px;
    height: auto;
}

.login-form-content h2 {
    color: var(--innovateqroo-dark-blue);
    font-weight: 700;
    margin-bottom: 30px;
    font-size: 1.8em;
}

/* Contenedor del Icono Interno */
.input-icon-container {
    position: relative;
}

.input-icon {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: #6c757d; 
    font-size: 1.4em;
    z-index: 10;
}

/* Estilos de Input */
.form-control {
    border-color: #ced4da; /* Borde normal de input */
    padding: 12px 15px; /* Más padding para mejor touch/click */
    height: 50px; /* Altura uniforme */
    box-shadow: none;
    z-index: 1; /* Para evitar problemas de apilamiento */
}

.form-control:focus {
    border-color: var(--innovateqroo-light-blue); /* Color de acento al enfocar */
    box-shadow: 0 0 0 0.2rem rgba(0, 188, 212, 0.25); /* Sombra del acento */
}

/* ESTILOS CLAVE para la línea divisoria (input-group-text) */
.input-group-text {
    background-color: var(--innovateqroo-white); /* Fondo del icono (el borde es la línea) */
    border-color: #ced4da; /* Color del borde, que actúa como línea divisoria */
    color: var(--innovateqroo-dark-blue); /* Color del icono */
    padding: 0.75rem 0.9rem; /* Altura del icono */
    height: 50px; /* Asegura que coincida con la altura del input */
    border-right: 1px solid #ced4da; /* Asegura la línea divisoria si Bootstrap la oculta */
    border-radius: 6px 0 0 6px; /* Para que el borde redondeado esté solo en la izquierda del grupo */
    font-size: 1.4em;
}

/* Ajustes adicionales para que se vea limpio */
.input-group .form-control {
    border-radius: 0 6px 6px 0; /* Asegura que el input solo se redondee a la derecha */
}


/* --- Estilos de Botones --- */
.btn-primary {
    background-color: var(--innovateqroo-light-blue);
    border-color: var(--innovateqroo-light-blue);
    color: var(--innovateqroo-white);
    padding: 12px 0;
    font-size: 1.1em;
    font-weight: 600;
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.btn-primary:hover {
    background-color: #00acc1;
    border-color: #00acc1;
}

/* Eliminar estilos del botón de registro/outline (ya no lo necesitamos) */
/* .btn-outline-secondary, .btn-outline-secondary:hover { display: none; } */


/* Estilos para el enlace de "Olvidaste tu contraseña?" */
.forgot-password-link {
    color: var(--innovateqroo-dark-blue);
    text-decoration: none;
    font-size: 0.9em;
    transition: color 0.3s ease;
}

.forgot-password-link:hover {
    color: var(--innovateqroo-light-blue);
}

/* --- Estilos de Mensajes Flash --- */
.flash-messages-container {
    position: absolute;
    top: 20px;
    width: 100%;
    z-index: 1000;
}

.flash-messages {
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
}

.flash-messages .alert {
    font-size: 0.9em;
}


/* Media Queries para Responsive Design (en pantallas pequeñas) */
@media (max-width: 768px) {
    .login-split-container {
        flex-direction: column;
        min-height: auto;
    }
    
    .login-left-panel, .login-right-panel {
        width: 100%;
    }
    
    .login-left-panel {
        padding: 30px;
        border-radius: 12px 12px 0 0;
    }

    .login-right-panel {
        padding: 30px;
    }
}