:root {
    --corporate-azul-fondo-principal: #0f0f42; /* Color de fondo principal de la página (azul oscuro) */
    --corporate-azul-acento-brillante: #0a52ee; /* Azul brillante para botones e iconos */
    --corporate-azul-hover: #0739b5; /* Azul para el hover de botones */

    --corporate-texto-blanco: #ffffff;
    --corporate-texto-oscuro-principal: #f9f9fa; /* Un gris oscuro para texto general */


    --login-primary-color: var(--corporate-azul-acento-brillante);
    --login-primary-color-hover: var(--corporate-azul-hover);
    --login-primary-color-rgb: 10, 82, 238; /* RGB de --corporate-azul-acento-brillante */

    /* Nuevos colores para el degradado del contenedor del login */
    --login-container-gradient-start: #d8e2ff; /* Azul lavanda muy claro para el inicio del degradado */
    --login-container-gradient-end: #b8c6ff;   /* Azul lavanda un poco más oscuro para el final */

    --login-text-color-dark: var(--corporate-texto-oscuro-principal); /* Texto oscuro dentro del contenedor */
    --login-text-color-light: var(--corporate-texto-blanco); /* Texto para botones (blanco) */
    /* --login-container-background: #ffffff; Ya no se usa un fondo sólido blanco para el contenedor */

    --border-radius-std: 0.5rem; /* Radio de borde estándar para elementos */
    --box-shadow-std: 0 8px 24px rgba(0, 0, 0, 0.1); /* Sombra estándar */

    --font-family-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body.login-page {
    background-color: var(--corporate-azul-fondo-principal); /* Fondo azul oscuro sólido para toda la página */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 1rem;
    font-family: var(--font-family-primary);
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

.login-container {
    /* NUEVO: Fondo degradado para el contenedor del login */
    background: var(--corporate-azul-fondo-principal); /* Fondo azul oscuro sólido para toda la página */
    padding: 35px 30px;
    border-radius: 16px; /* Aumentamos un poco el radio para un look más suave como en la imagen */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* Sombra un poco más pronunciada */
    max-width: 420px;
    width: 100%;
    animation: fadeIn 0.6s ease-out forwards;
    text-align: center;
    position: relative;
    z-index: 1;
}

/* ELIMINADO: .login-container::before y @keyframes bordeAnimado ya no son necesarios */

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.login-header {
    margin-bottom: 25px;
}

.login-header img {
    width: 150px; /* Ligeramente más pequeño si el logo es grande */
    height: auto;
    margin-bottom: 15px;
    /* El logo VANTIA (azul claro/blanco) debería contrastar bien con el nuevo fondo degradado del contenedor */
    animation: entradaZoom 0.8s ease-out forwards,
               sacudidaLateral 0.6s ease-out 0.8s 1,
               pulsoSuave 4s ease-in-out 1.2s infinite alternate;
}

.login-header h2 {
    font-weight: 600;
    color: var(--login-text-color-dark); /* Texto oscuro ("Acceso al Sistema") sobre el fondo degradado claro */
    font-size: 1.85rem;
    margin-top: 0;
}

.form-floating {
    margin-bottom: 1.25rem;
}
.form-control, .form-select {
    font-size: 0.95rem;
    border-radius: var(--border-radius-std);
    background-color: #ffffff; /* Asegurar fondo blanco para los inputs como en la imagen */
    border: 1px solid #ced4da; /* Borde estándar de Bootstrap */
}

/* Iconos dentro de los campos de formulario */
.form-floating > .form-icon {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    color: var(--login-primary-color); /* Iconos azules */
    font-size: 1.1rem;
    z-index: 3;
    pointer-events: none;
}
.form-floating > .form-control {
    padding-left: 2.75rem;
}
.form-floating > label {
    padding-left: 2.75rem;
    color: #495057; /* Color estándar de Bootstrap para labels, buen contraste */
}

.form-control:focus {
    border-color: var(--login-primary-color);
    box-shadow: 0 0 0 0.25rem rgba(var(--login-primary-color-rgb), 0.25);
    background-color: #ffffff; /* Mantener fondo blanco al enfocar */
}

.btn-login {
    background-color: var(--login-primary-color); /* Botón azul */
    border-color: var(--login-primary-color);
    color: var(--login-text-color-light); /* Texto blanco en el botón */
    font-weight: 600;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border-radius: var(--border-radius-std);
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, transform 0.1s ease;
}
.btn-login:hover, .btn-login:focus {
    background-color: var(--login-primary-color-hover);
    border-color: var(--login-primary-color-hover);
    color: var(--login-text-color-light);
    transform: translateY(-2px);
}
.btn-login:active {
    transform: translateY(0);
}

@media (max-width: 480px) {
    .login-container {
        padding: 30px 20px;
        margin: 15px;
        width: auto;
    }
    .login-header img {
        width: 120px;
    }
    .login-header h2 {
        font-size: 1.5rem;
    }
    .form-control, .btn-login {
        font-size: 0.9rem;
    }
}

/* Estilos para SweetAlert personalizado */
.swal-popup-custom {
    border-radius: 10px !important;
    box-shadow: var(--box-shadow-std) !important;
    background-color: var(--login-container-gradient-start) !important; /* Fondo del popup similar al contenedor */
}
.swal-popup-custom .swal2-title {
    color: var(--login-text-color-dark) !important; /* Título oscuro para buen contraste */
    font-weight: 600 !important;
}
.swal-popup-custom .swal2-html-container { /* Para el texto del mensaje */
    color: var(--login-text-color-dark) !important;
}
.swal-popup-custom .swal2-confirm {
    background-color: var(--login-primary-color) !important;
    border-color: var(--login-primary-color) !important;
    border-radius: var(--border-radius-std) !important;
    color: var(--corporate-texto-blanco) !important;
}
.swal-popup-custom .swal2-confirm:hover {
    background-color: var(--login-primary-color-hover) !important;
    border-color: var(--login-primary-color-hover) !important;
}
.swal-popup-custom .swal2-icon.swal2-error [class^=swal2-x-mark-line] {
    background-color: var(--corporate-azul-hover) !important; /* Color de la X en error */
}
.swal-popup-custom .swal2-icon.swal2-success .swal2-success-ring {
    border-color: var(--corporate-azul-hover) !important; /* Anillo en éxito */
}
.swal-popup-custom .swal2-icon.swal2-success [class^=swal2-success-line] {
    background-color: var(--corporate-azul-hover) !important; /* Líneas en éxito */
}


/* Animaciones adicionales */
@keyframes entradaZoom {
    0%   { opacity: 0; transform: scale(0.6) translateY(-20px); }
    60%  { opacity: 1; transform: scale(1.05) translateY(0); }
    80%  { transform: scale(0.98); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes pulsoSuave {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(0.97); }
}
@keyframes sacudidaLateral {
    0%   { transform: translateX(0); }
    15%  { transform: translateX(-8px) rotate(-2deg); }
    30%  { transform: translateX(8px) rotate(2deg); }
    45%  { transform: translateX(-6px) rotate(-1deg); }
    60%  { transform: translateX(6px) rotate(1deg); }
    75%  { transform: translateX(-4px) rotate(0deg); }
    100% { transform: translateX(0); }
}