:root {
    --cc-bg-dark: #0f172a;
    --cc-card: rgba(15, 23, 42, .78);
    --cc-accent: #2f9e6b;
    --cc-accent-hover: #268056;
    --cc-border: rgba(255, 255, 255, .14);
    --cc-text-muted: #b9c2d0;
}

html {
    /* Fondo de respaldo mientras cargan las fotos del slideshow (o si JS está desactivado). */
    background-color: var(--cc-bg-dark);
}

html, body {
    height: 100%;
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

body {
    /* Importante: NO ponerle background-color propio al body.
       Vegas inserta las fotos como elementos position:fixed; z-index:-1 dentro del body,
       y si el body tiene su propio color de fondo, ese color se pinta ENCIMA de esas
       imágenes (por el orden de pintado del navegador), tapando el slideshow por completo. */
    background-color: transparent;
}

#login-root {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 1.5rem;
    padding-right: clamp(2rem, 6vw, 6rem);
}

@media (max-width: 576px) {
    #login-root {
        justify-content: center;
        padding-right: 1.5rem;
    }
}

.login-card {
    width: 100%;
    max-width: 380px;
    background: var(--cc-card);
    border: 1px solid var(--cc-border);
    border-radius: 1rem;
    padding: 2.25rem 2rem 2rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #fff;
}

.login-card__logo {
    display: block;
    max-width: 170px;
    margin: 0 auto 1.75rem;
}

.login-card .form-floating > .form-control {
    background-color: rgba(255, 255, 255, .06);
    border: 1px solid var(--cc-border);
    color: #fff;
}

.login-card .form-floating > .form-control:focus {
    background-color: rgba(255, 255, 255, .1);
    border-color: var(--cc-accent);
    box-shadow: 0 0 0 .2rem rgba(47, 158, 107, .25);
    color: #fff;
}

.login-card .form-floating > label {
    color: var(--cc-text-muted);
}

.login-card .form-control::placeholder {
    color: transparent;
}

/* autofill fix para que Chrome no pinte el input de blanco (versión reforzada:
   Chrome a veces ignora un box-shadow muy sutil, así que usamos un inset casi opaco
   del mismo tono oscuro de la tarjeta en vez de un blanco translúcido). */
.login-card .form-control:-webkit-autofill,
.login-card .form-control:-webkit-autofill:hover,
.login-card .form-control:-webkit-autofill:focus,
.login-card .form-control:-webkit-autofill:active {
    -webkit-text-fill-color: #fff !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(15, 23, 42, .95) inset !important;
    box-shadow: 0 0 0 1000px rgba(15, 23, 42, .95) inset !important;
    caret-color: #fff;
    transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
}

.btn-cc-primary {
    background-color: var(--cc-accent);
    border-color: var(--cc-accent);
    color: #fff;
    font-weight: 600;
    letter-spacing: .02em;
}

.btn-cc-primary:hover,
.btn-cc-primary:focus {
    background-color: var(--cc-accent-hover);
    border-color: var(--cc-accent-hover);
    color: #fff;
}

.login-card__link {
    color: var(--cc-text-muted);
    text-decoration: none;
    font-size: .875rem;
}

.login-card__link:hover {
    color: #fff;
    text-decoration: underline;
}

/* jQuery Validate Unobtrusive no usa is-invalid/invalid-feedback de Bootstrap por defecto,
   así que estilamos directamente las clases que si aplica (field-validation-error / input-validation-error). */
.login-card .field-validation-error {
    display: block;
    color: #ffb4b4;
    font-size: .8rem;
    margin-top: .25rem;
}

.login-card .input-validation-error {
    border-color: #ff8a8a !important;
}

.login-card .form-control.has-password-toggle {
    padding-right: 2.75rem;
}

.login-card .password-toggle {
    position: absolute;
    right: .5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--cc-text-muted);
    padding: .5rem;
    cursor: pointer;
    z-index: 5;
}

.login-card .password-toggle:hover,
.login-card .password-toggle:focus {
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}