/* ============================================================================
   Login — diseño simple y moderno
   ========================================================================== */

:root {
    --lgn-azul: #1b4f72;
    --lgn-azul-d: #143b56;
    --lgn-rojo: #c0392b;
    --lgn-ink: #1f2937;
    --lgn-muted: #6b7280;
    --lgn-border: #e2e8f0;
    --lgn-bg: #0a0e14;          /* fondo mientras carga el video (o si no hay video): casi negro */
}

/* ---- Fondo ---------------------------------------------------------------- */
body.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: var(--lgn-bg);
    background-image:
        radial-gradient(1200px 600px at 12% -10%, rgba(27, 79, 114, .22), transparent 60%),
        radial-gradient(900px 500px at 110% 115%, rgba(155, 34, 71, .14), transparent 55%);
    font-family: var(--gd-font, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif);
    -webkit-font-smoothing: antialiased;
}

/* ---- Caja --------------------------------------------------------------- */
.login-box,
.register-box {
    width: 100%;
    max-width: 400px;
    margin: 0;
}

.login-box .card,
.login-box-body .card {
    border: 0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 20px 45px -12px rgba(16, 33, 54, .25), 0 4px 12px rgba(16, 33, 54, .06);
    overflow: hidden;
}

.login-card-body {
    padding: 2.5rem 2.25rem 2.25rem;
    border-radius: 18px;
}

/* ---- Logo (completo, sin recortar) ------------------------------------- */
.contact-image {
    text-align: center;
    margin-bottom: 1.1rem;
}

.contact-image img {
    display: inline-block;
    width: auto;
    max-width: 78%;
    height: auto;
    max-height: 132px;
    object-fit: contain;      /* nunca recorta */
    border-radius: 0;         /* se anula el rounded-circle de AdminLTE */
}

/* ---- Títulos ---------------------------------------------------------- */
.login-box-msg,
.register-box-msg {
    padding: 0;
    margin: 0 0 .35rem;
    text-align: center;
    color: var(--lgn-ink);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.login-subtitle {
    margin: 0 0 1.6rem;
    text-align: center;
    font-size: .82rem;
    color: var(--lgn-muted);
}

/* ---- Campos ---------------------------------------------------------- */
.login-card-body .form-group {
    margin-bottom: 1rem;
}

.login-card-body label {
    display: block;
    margin-bottom: .35rem;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--lgn-muted);
}

.lgn-field {
    position: relative;
}

.lgn-field > .lgn-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa5b1;
    font-size: .9rem;
    pointer-events: none;
    /* Por encima del .form-control del input-group (Bootstrap le da z-index 2/3),
       si no, el candado del campo de contraseña queda oculto tras el input. */
    z-index: 5;
}

.login-card-body .form-control {
    height: 46px;
    border-radius: 11px;
    border: 1px solid var(--lgn-border);
    background: #f8fafc;
    padding: .5rem .9rem .5rem 2.5rem;
    font-size: .95rem;
    color: var(--lgn-ink);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.login-card-body .form-control::placeholder {
    color: #9aa5b1;
    font-size: .88rem;
}

.login-card-body .form-control:focus {
    border-color: var(--lgn-azul);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(27, 79, 114, .15);
}

/* Autocompletado del navegador: neutraliza el fondo amarillo/azul y fija el
   color del texto para que se lea bien (usuario y contraseña guardados). */
.login-card-body .form-control:-webkit-autofill,
.login-card-body .form-control:-webkit-autofill:hover,
.login-card-body .form-control:-webkit-autofill:focus,
.login-card-body .form-control:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #f4f7fb inset;
    box-shadow: 0 0 0 1000px #f4f7fb inset;
    -webkit-text-fill-color: var(--lgn-ink);
    caret-color: var(--lgn-ink);
    transition: background-color 9999s ease 0s, color 9999s ease 0s;
}
.login-card-body .form-control:autofill {
    -webkit-text-fill-color: var(--lgn-ink);
    box-shadow: 0 0 0 1000px #f4f7fb inset;
}

/* ---- Grupo de contraseña + botón "ver" ------------------------------ */
.login-card-body .input-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.login-card-body .input-group-append .btnShowPassword {
    display: flex;
    align-items: center;
    border: 1px solid var(--lgn-border);
    border-left: 0;
    border-top-right-radius: 11px;
    border-bottom-right-radius: 11px;
    background: #f8fafc;
    color: var(--lgn-muted);
    padding: 0 .95rem;
    cursor: pointer;
    box-shadow: none;
}

.login-card-body .input-group-append .btnShowPassword:hover {
    background: #eef2f7;
    color: var(--lgn-ink);
}

/* ---- Botón ingresar ----------------------------------------------- */
.login-card-body button[type="submit"],
.login-card-body .btn-block[type="submit"] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 46px;
    margin-top: .4rem;
    border: 0;
    border-radius: 11px;
    background: var(--lgn-azul);
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    transition: background .15s ease, transform .05s ease, box-shadow .15s ease;
    box-shadow: 0 8px 18px -6px rgba(27, 79, 114, .5);
}

.login-card-body button[type="submit"]:hover {
    background: var(--lgn-azul-d);
}

.login-card-body button[type="submit"]:active {
    transform: translateY(1px);
}

.login-card-body button[type="submit"] i {
    margin-right: .4rem;
}

/* ---- Pie / enlaces ------------------------------------------------ */
.login-box p.desc,
.login-box .desc {
    font-size: .82rem;
    color: var(--lgn-muted);
}

.login-box a {
    color: var(--lgn-azul);
    font-weight: 600;
}

/* ---- FormValidation: mensajes de error --------------------------- */
.login-card-body .fv-plugins-message-container {
    margin-top: .3rem;
    font-size: .78rem;
    color: var(--lgn-rojo);
}

.login-card-body .fv-plugins-icon {
    display: none !important;   /* íconos de check/equis sobre el input: fuera */
}

/* ---- Responsivo ------------------------------------------------- */
@media (max-width: 480px) {
    .login-card-body { padding: 2rem 1.4rem 1.75rem; }
    .login-box, .register-box { max-width: 100%; }
}

/* ============================================================================
   Modo oscuro (activo por default; se apaga con dm==='0')
   ========================================================================== */
body.login-page.dark-mode {
    background: #0f1218 !important;
    background-image:
        radial-gradient(1200px 600px at 12% -10%, rgba(59, 130, 196, .18), transparent 60%),
        radial-gradient(900px 500px at 110% 115%, rgba(192, 57, 43, .16), transparent 55%) !important;
}

body.dark-mode .login-box .card,
body.dark-mode .login-box-body .card {
    background: #1b1f28;
    box-shadow: 0 20px 45px -12px rgba(0, 0, 0, .55), 0 4px 12px rgba(0, 0, 0, .3);
}

body.dark-mode .login-card-body { background: #1b1f28; }

body.dark-mode .login-box-msg,
body.dark-mode .register-box-msg { color: #e8edf4; }

body.dark-mode .login-subtitle,
body.dark-mode .login-card-body label { color: #94a3b8; }

body.dark-mode .login-card-body .form-control {
    background: #232833;
    border-color: #333a48;
    color: #e8edf4;
}
body.dark-mode .login-card-body .form-control::placeholder { color: #7c8798; }
body.dark-mode .login-card-body .form-control:focus {
    background: #262c38;
    border-color: #3b82c4;
    box-shadow: 0 0 0 3px rgba(59, 130, 196, .25);
}
body.dark-mode .login-card-body .form-control:-webkit-autofill,
body.dark-mode .login-card-body .form-control:-webkit-autofill:hover,
body.dark-mode .login-card-body .form-control:-webkit-autofill:focus,
body.dark-mode .login-card-body .form-control:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #232833 inset;
    box-shadow: 0 0 0 1000px #232833 inset;
    -webkit-text-fill-color: #e8edf4;
    caret-color: #e8edf4;
}
body.dark-mode .login-card-body .form-control:autofill {
    -webkit-text-fill-color: #e8edf4;
    box-shadow: 0 0 0 1000px #232833 inset;
}

body.dark-mode .lgn-field > .lgn-icon { color: #7c8798; }

body.dark-mode .login-card-body .input-group-append .btnShowPassword {
    background: #232833;
    border-color: #333a48;
    color: #94a3b8;
}
body.dark-mode .login-card-body .input-group-append .btnShowPassword:hover {
    background: #2b3240;
    color: #e8edf4;
}

body.dark-mode .login-card-body button[type="submit"] { background: #2f6fa8; }
body.dark-mode .login-card-body button[type="submit"]:hover { background: #285f8f; }

body.dark-mode .login-box a { color: #6db3ea; }

/* Video de fondo del login (static/login/video/fondo.mp4). Aparece solo cuando
   empieza a reproducirse; el velo oscurece un poco para que el formulario se lea. */
#login-video, #login-video-b {
    position: fixed; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0; pointer-events: none;
}
#login-video-velo {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: rgba(10, 14, 20, .38);
}
body.login-page .login-box { position: relative; z-index: 1; }