/* ============================================================
   CAETA - Renovación visual exclusiva de /login.php
   Se carga después de los estilos originales para mantener la
   animación y permitir una restauración rápida con el archivo .bak.
   ============================================================ */

:root {
    --caeta-login-navy: #003e57;
    --caeta-login-blue: #005b7f;
    --caeta-login-cyan: #06aef4;
    --caeta-login-sky: #75d9ff;
    --caeta-login-ink: #f3fbff;
    --caeta-login-muted: #bdeaff;
}

body {
    position: relative;
    isolation: isolate;
    background-color: #b8e1f0;
    background-image:
        radial-gradient(circle at 12% 18%, rgba(6, 174, 244, 0.48) 0, rgba(6, 174, 244, 0.13) 22%, transparent 43%),
        radial-gradient(circle at 87% 82%, rgba(0, 91, 127, 0.42) 0, rgba(0, 91, 127, 0.1) 25%, transparent 48%),
        linear-gradient(138deg, #dff4fb 0%, #a9daeb 46%, #72bad5 100%);
    background-attachment: fixed;
    color: var(--caeta-login-ink);
}

body::before,
body::after {
    position: fixed;
    inset: 0;
    z-index: -1;
    content: "";
    pointer-events: none;
}

body::before {
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.11) 0 1px, transparent 1px 22px),
        repeating-linear-gradient(45deg, rgba(0, 62, 87, 0.035) 0 1px, transparent 1px 22px);
    opacity: 0.72;
}

body::after {
    inset: 8% 5%;
    border-radius: 48px;
    background:
        radial-gradient(ellipse at center, rgba(255, 255, 255, 0.28), transparent 66%);
    filter: blur(22px);
}

#content {
    isolation: isolate;
    border: 1px solid rgba(183, 235, 255, 0.58);
    background:
        linear-gradient(145deg, rgba(0, 62, 87, 0.79) 0%, rgba(0, 91, 127, 0.58) 52%, rgba(0, 62, 87, 0.72) 100%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    backdrop-filter: blur(18px) saturate(135%);
    box-shadow:
        0 30px 70px rgba(0, 48, 68, 0.32),
        0 8px 22px rgba(0, 62, 87, 0.24),
        inset 1px 1px 0 rgba(255, 255, 255, 0.24),
        inset -1px -1px 0 rgba(0, 30, 43, 0.3);
}

#content::before {
    position: absolute;
    inset: 1px;
    z-index: 1;
    border-radius: 19px;
    background:
        linear-gradient(150deg, rgba(255, 255, 255, 0.15), transparent 27%, transparent 72%, rgba(6, 174, 244, 0.1));
    content: "";
    pointer-events: none;
}

#content::after {
    position: absolute;
    right: -110px;
    bottom: -145px;
    z-index: 0;
    width: 290px;
    height: 290px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(6, 174, 244, 0.2), transparent 68%);
    content: "";
    pointer-events: none;
}

/* Se retira visualmente el logotipo posterior sin eliminar su HTML. */
#content .central-hub {
    display: none !important;
}

#content .bg-animacion {
    opacity: 0.82;
}

#content .bg-animacion .particle {
    background: #dff7ff !important;
    box-shadow:
        0 0 7px 2px rgba(117, 217, 255, 0.92),
        0 0 18px 7px rgba(6, 174, 244, 0.43) !important;
}

#form_login,
#Msg,
.sesion {
    z-index: 3;
}

.sesion {
    color: var(--caeta-login-ink);
    text-shadow: 0 2px 12px rgba(0, 38, 54, 0.38);
}

.sesion::before {
    background: linear-gradient(to right, transparent, rgba(117, 217, 255, 0.66));
}

.sesion::after {
    background: linear-gradient(to right, rgba(117, 217, 255, 0.66), transparent);
}

#content .input-group {
    border: 1px solid rgba(183, 235, 255, 0.28) !important;
    background: rgba(0, 42, 59, 0.36) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 7px 15px rgba(0, 38, 54, 0.12);
    transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

#content .input-group:hover {
    border-color: rgba(117, 217, 255, 0.5) !important;
    background: rgba(0, 52, 72, 0.46) !important;
}

#content .input-group:focus-within {
    border-color: var(--caeta-login-cyan) !important;
    background: rgba(0, 52, 72, 0.56) !important;
    box-shadow:
        0 0 0 3px rgba(6, 174, 244, 0.17),
        0 9px 20px rgba(0, 38, 54, 0.18);
    transform: translateY(-1px);
}

#content .input-group-text {
    border-right: 1px solid rgba(183, 235, 255, 0.14) !important;
}

#content .input-group-text img {
    filter: brightness(0) saturate(100%) invert(74%) sepia(73%) saturate(1737%) hue-rotate(164deg) brightness(101%) contrast(98%);
    opacity: 0.92;
}

#content .textbox,
#content .form-control.textbox,
#content select.textbox {
    color: var(--caeta-login-ink) !important;
}

#content .textbox::placeholder,
#content .form-control.textbox::placeholder {
    color: rgba(215, 244, 255, 0.68) !important;
}

#content select.textbox option {
    background-color: var(--caeta-login-navy) !important;
    color: var(--caeta-login-ink) !important;
}

#content a {
    color: var(--caeta-login-sky);
    text-underline-offset: 3px;
}

#content a:hover,
#content a:focus-visible {
    color: #ffffff;
}

#content .button.login {
    border: 1px solid rgba(196, 240, 255, 0.55);
    background: linear-gradient(135deg, #33c2fa 0%, var(--caeta-login-cyan) 44%, #0279a8 100%);
    box-shadow:
        0 12px 25px rgba(0, 91, 127, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.42);
    color: #002d3f;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}

#content .button.login:hover,
#content .button.login:focus-visible {
    border-color: #d8f6ff;
    background: linear-gradient(135deg, #75d9ff 0%, #19b9f8 48%, #0096d1 100%);
    box-shadow:
        0 15px 30px rgba(0, 91, 127, 0.4),
        0 0 0 4px rgba(117, 217, 255, 0.16);
    color: #002536;
}

#content .button.login:active {
    transform: translateY(0);
}

#content form .error,
#content #Msg {
    color: #ffd6d6 !important;
}

@media (max-width: 575.98px) {
    body > .container {
        margin-top: 2rem !important;
    }

    #content {
        padding: 34px 22px;
        border-radius: 18px;
    }

    #content::before {
        border-radius: 17px;
    }

    .sesion {
        font-size: 1.3rem;
        letter-spacing: 0.06em;
    }
}

@media (prefers-reduced-motion: reduce) {
    #content .input-group,
    #content .button.login {
        transition: none;
    }
}