/*
|--------------------------------------------------------------------------
| 🎨 Variables CSS (Paleta Corporativa)
|--------------------------------------------------------------------------
*/
:root {
    /* Colores */
    --verde-institucional: #3c6948; /* Principal / Botón */
    --naranja-profesional: #dc7e24; /* Accento / Hover */
    --gris-claro: #f5f1ec; /* Fondo Principal (Body) */
    --blanco: #FFFFFF; /* Fondo de Tarjeta */
    --gris-oscuro: #2B2B2B; /* Tipografía Principal */
    --dorado-suave: #D7A86E; /* Accento Secundario/Íconos */

    /* Tipografía */
    --font-family: 'Montserrat', 'Lato', sans-serif;

    /* Espaciado / Border */
    --card-padding: 3rem;
    --card-radius: 12px;
}

/*
|--------------------------------------------------------------------------
| Estilos Generales y Reseteo Mínimo
|--------------------------------------------------------------------------
*/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    background-color: var(--gris-claro);
    color: var(--gris-oscuro);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    line-height: 1.6;
    position: relative;
}

/* Cuando hay imagen de fondo, se aplica sobre el body */
body[style*="background-image"] {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

/*
|--------------------------------------------------------------------------
| 📐 Contenedor Principal (Flexbox para Two-Column Layout)
|--------------------------------------------------------------------------
*/
.login-container {
    width: 100%;
    max-width: 1200px; /* Incrementamos el ancho máximo para hacer el formulario más grande */
    padding: 1rem;
}

.main-content {
    display: flex;
    gap: 0; /* Sin espacio entre las tarjetas - pegadas */
    width: 100%;
    /* La sombra se aplica al contenedor principal para un efecto unificado */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); 
    border-radius: var(--card-radius);
    overflow: hidden; /* Asegura que la sombra y el borde funcionen bien */
}

/*
|--------------------------------------------------------------------------
| 1. Tarjeta de Inicio de Sesión (Login Card)
|--------------------------------------------------------------------------
*/
.login-card {
    background-color: var(--blanco);
    padding: 4rem 3.5rem; /* Aumentamos el padding para hacer el formulario más grande */
    flex: 1 1 500px; /* Aumentamos el ancho base */
    border-radius: var(--card-radius) 0 0 var(--card-radius); /* Redondeo solo a la izquierda */
    min-width: 400px;
}

/* Para la esquina del lado de la imagen */
.main-content .login-card {
    border-radius: var(--card-radius) 0 0 var(--card-radius);
}


/*
|--------------------------------------------------------------------------
| 2. Tarjeta de Imagen (Image Card)
|--------------------------------------------------------------------------
*/
.image-card {
    background-color: var(--verde-institucional); /* Fondo del color principal para el contraste */
    flex: 1 1 50%; /* Ocupa el 50% del espacio junto al formulario */
    padding: var(--card-padding);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 var(--card-radius) var(--card-radius) 0; /* Redondeo solo a la derecha */
}

.image-placeholder {
    text-align: center;
    color: #FFFFFF !important;
    opacity: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.image-placeholder h2 {
    font-size: 1.8rem;
    margin-top: 1rem;
    font-weight: 600;
    color: #FFFFFF !important;
}

.image-placeholder h2.welcome-title {
    font-weight: 800 !important;
    font-size: 2rem;
    color: #FFFFFF !important;
    margin-top: 1rem;
}

.image-placeholder p {
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.4;
    margin-top: 0.5rem;
    color: #FFFFFF !important;
}

.image-placeholder p.app-description {
    text-align: justify;
}

.image-card {
    color: #FFFFFF !important;
}

.image-card * {
    color: #FFFFFF !important;
}

.large-icon {
    font-size: 4rem; /* Icono más grande para el visual */
    color: var(--dorado-suave);
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.1));
}


/*
|--------------------------------------------------------------------------
| Estilos de Formulario (Mantenidos)
|--------------------------------------------------------------------------
*/

.login-header {
    text-align: center;
    margin-bottom: 3rem; /* Aumentamos el margen */
}

.login-title {
    font-size: 1.8rem; /* Aumentamos el tamaño del título */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--gris-oscuro);
    margin-top: 0.5rem;
}

.icon--outline {
    font-size: 2.5rem;
    color: var(--dorado-suave);
    display: inline-block;
}

.login-form {
    display: flex;
    flex-direction: column;
}

.form-group {
    margin-bottom: 2rem; /* Aumentamos el espacio entre campos */
}

label {
    display: block;
    margin-bottom: 0.8rem; /* Aumentamos el espacio del label */
    font-weight: 600;
    color: var(--gris-oscuro);
    font-size: 1.1rem; /* Aumentamos el tamaño del label */
}

input[type="text"],
input[type="password"],
input[type="email"] {
    width: 100%;
    padding: 1.2rem 1.5rem; /* Aumentamos el padding para hacer los campos más grandes */
    border: 2px solid #E0E0E0;
    border-radius: 8px; /* Aumentamos el border-radius */
    font-size: 1.15rem; /* Aumentamos el tamaño de fuente */
    font-weight: 400;
    color: var(--gris-oscuro);
    background-color: #FFFFFF !important; /* Fondo blanco */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Placeholder gris transparente */
input[type="text"]::placeholder,
input[type="password"]::placeholder,
input[type="email"]::placeholder {
    color: rgba(128, 128, 128, 0.4) !important;
    opacity: 1;
}

input[type="text"]::-webkit-input-placeholder,
input[type="password"]::-webkit-input-placeholder,
input[type="email"]::-webkit-input-placeholder {
    color: rgba(128, 128, 128, 0.4) !important;
    opacity: 1;
}

input[type="text"]::-moz-placeholder,
input[type="password"]::-moz-placeholder,
input[type="email"]::-moz-placeholder {
    color: rgba(128, 128, 128, 0.4) !important;
    opacity: 1;
}

input[type="text"]:-ms-input-placeholder,
input[type="password"]:-ms-input-placeholder,
input[type="email"]:-ms-input-placeholder {
    color: rgba(128, 128, 128, 0.4) !important;
    opacity: 1;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus {
    border-color: var(--verde-institucional);
    outline: none;
    box-shadow: 0 0 0 3px rgba(60, 105, 72, 0.2);
    background-color: #FFFFFF !important; /* Mantener fondo blanco en focus */
}

.btn {
    padding: 1.2rem 2.5rem !important; /* Aumentamos el padding vertical para hacer el botón más alto */
    border: none;
    border-radius: 8px; /* Aumentamos el border-radius */
    font-size: 1.1rem; /* Aumentamos el tamaño de fuente */
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
    transition: background-color 0.3s ease, transform 0.1s ease;
    margin-top: 1.5rem; /* Aumentamos el margen superior */
    width: 100%; /* Hacer el botón del ancho completo */
}

.btn-primary {
    background-color: var(--verde-institucional);
    color: var(--blanco);
}

.btn-primary:hover {
    background-color: var(--naranja-profesional);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.link-forgot {
    display: block;
    text-align: center;
    margin-top: 2rem; /* Aumentamos el margen */
    color: var(--verde-institucional);
    text-decoration: none;
    font-size: 1rem; /* Aumentamos el tamaño de fuente */
    font-weight: 600;
    transition: color 0.3s ease;
}

.link-forgot:hover {
    color: var(--naranja-profesional);
}


/*
|--------------------------------------------------------------------------
| 📱 Responsividad (Stacking Layout)
|--------------------------------------------------------------------------
*/
@media (max-width: 768px) {
    .main-content {
        flex-direction: column; /* Apila las tarjetas verticalmente en móviles/tabletas */
        gap: 0;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); /* Sombra solo en el contendor principal */
    }

    .login-card {
        padding: 3rem 2.5rem; /* Aumentamos el padding en móviles también */
        /* Reajuste de bordes para el apilamiento */
        border-radius: var(--card-radius) var(--card-radius) 0 0; 
        min-width: auto; /* Permitir que se ajuste en móviles */
    }

    .image-card {
        display: none; /* Ocultamos la imagen en pantallas muy pequeñas para priorizar el formulario */
        /* Si se desea mantener la imagen:
        border-radius: 0 0 var(--card-radius) var(--card-radius); 
        padding: 1.5rem 2rem;
        height: 150px;
        */
    }
    
    /* Si decides mantenerla, ajusta el texto en pantallas pequeñas */
    .image-placeholder h2 {
        font-size: 1.4rem;
    }
    .large-icon {
        font-size: 3rem;
    }
}

/*
||--------------------------------------------------------------------------
|| Estilos Adicionales para Compatibilidad
||--------------------------------------------------------------------------
*/

.login-card .alert {
    margin-bottom: 1.5rem;
    padding: 0.75rem;
    border-radius: 6px;
    background-color: #fee;
    color: #c33;
    border: 1px solid #fcc;
}

.login-card .alert-danger {
    background-color: #fee;
    color: #c33;
    border-color: #fcc;
}

.login-card .form-group .g-recaptcha {
    margin-bottom: 1.5rem;
}

.login-card img.form-signin-max-w-img {
    max-width: 200px;
    height: auto;
}

.login-card img.signin-logo-large {
    max-width: 400px !important;
    width: auto;
    height: auto;
    max-height: 120px;
    object-fit: contain;
}

.logo-circle-wrapper {
    width: auto;
    height: auto;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem auto;
    padding: 0;
}

.image-card img.signin-logo-large {
    width: auto !important;
    height: auto !important;
    max-width: 560px !important;
    max-height: 560px !important;
    object-fit: contain;
    filter: brightness(0) invert(1); /* Hace el logo blanco para que se vea bien en el fondo verde */
}

.login-card .icon-16 {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 0.5rem;
}

/* Asegurar que los inputs mantengan el estilo incluso con clases de Bootstrap */
.login-card input.form-control,
.login-card input.form-signin-input {
    width: 100% !important;
    padding: 1.2rem 1.5rem !important; /* Aumentamos el padding */
    border: 2px solid #E0E0E0 !important;
    border-radius: 8px !important; /* Aumentamos el border-radius */
    font-size: 1.15rem !important; /* Aumentamos el tamaño de fuente */
    font-weight: 400 !important;
    color: var(--gris-oscuro) !important;
    background-color: #FFFFFF !important; /* Fondo blanco */
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* Placeholder gris transparente para inputs con clases de Bootstrap */
.login-card input.form-control::placeholder,
.login-card input.form-signin-input::placeholder {
    color: rgba(128, 128, 128, 0.4) !important;
    opacity: 1;
}

.login-card input.form-control::-webkit-input-placeholder,
.login-card input.form-signin-input::-webkit-input-placeholder {
    color: rgba(128, 128, 128, 0.4) !important;
    opacity: 1;
}

.login-card input.form-control::-moz-placeholder,
.login-card input.form-signin-input::-moz-placeholder {
    color: rgba(128, 128, 128, 0.4) !important;
    opacity: 1;
}

.login-card input.form-control:-ms-input-placeholder,
.login-card input.form-signin-input:-ms-input-placeholder {
    color: rgba(128, 128, 128, 0.4) !important;
    opacity: 1;
}

.login-card input.form-control:focus,
.login-card input.form-signin-input:focus {
    border-color: var(--verde-institucional) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(60, 105, 72, 0.2) !important;
    background-color: #FFFFFF !important; /* Mantener fondo blanco en focus */
}

/* Estilos para mensajes de validación - Color visible */
.login-card .help-block,
.login-card .error,
.login-card span.help-block,
.login-card label.error,
.login-card .invalid-feedback {
    color: #dc7e24 !important; /* Color naranja para los mensajes de error */
    font-size: 0.9rem !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0 !important;
    display: block !important;
    font-weight: 500 !important;
}

.login-card .has-error .help-block,
.login-card .has-error .error,
.login-card .has-error label.error {
    color: #dc7e24 !important; /* Color naranja para los mensajes de error */
    display: block !important;
}

.login-card .form-group.has-error input {
    border-color: #dc7e24 !important;
}