:root {
    --sietelsa-blue: #0f1d63;
    --sietelsa-blue-dark: #0a1346;
    --sietelsa-red: #d71f2d;
    --sietelsa-red-dark: #a81421;
    --sietelsa-ink: #1a2a46;
    --sietelsa-muted: #5b6c85;
    --panel-shadow: 0 24px 58px -30px rgba(10, 19, 70, 0.55);
}

body {
    color: var(--sietelsa-ink);
    background:
        radial-gradient(circle at 12% 12%, rgba(76, 119, 210, 0.3) 0%, transparent 40%),
        radial-gradient(circle at 92% 4%, rgba(215, 31, 45, 0.28) 0%, transparent 32%),
        linear-gradient(150deg, #0a1346 0%, #0f1d63 46%, #1b255a 72%, #0a1346 100%);
}

body::before {
    background: rgba(215, 31, 45, 0.24);
}

body::after {
    background: rgba(36, 94, 218, 0.24);
}

.login-shell {
    border-radius: 26px;
    box-shadow: var(--panel-shadow);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(11px);
}

.panel-brand {
    position: relative;
    background:
        linear-gradient(145deg, rgba(10, 19, 70, 0.93), rgba(15, 29, 99, 0.86)),
        url("../assets/img/fondoSietelsa.png") center/cover no-repeat;
}

.panel-brand::after {
    content: "";
    position: absolute;
    left: 2.5rem;
    right: 2.5rem;
    bottom: 0;
    height: 4px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(90deg, rgba(215, 31, 45, 0.2) 0%, rgba(215, 31, 45, 0.9) 55%, rgba(215, 31, 45, 0.25) 100%);
}

.logo-wrap img {
    width: 58px;
    height: 58px;
    box-shadow: 0 12px 20px -14px rgba(6, 12, 41, 0.8);
}

.headline h2 {
    text-wrap: balance;
}

.headline p {
    color: rgba(238, 245, 255, 0.86);
}

.feature-list li::before {
    background: var(--sietelsa-red);
    box-shadow: 0 0 0 0.2rem rgba(215, 31, 45, 0.2);
}

.panel-form {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 255, 0.95));
}

.back-link {
    color: var(--sietelsa-blue);
}

.back-link:hover {
    color: var(--sietelsa-red);
}

.panel-form h3 {
    color: var(--sietelsa-blue);
}

.panel-form p {
    color: var(--sietelsa-muted);
}

label {
    color: #29476b;
}

.field input {
    border: 1px solid #bfcee4;
    color: #112d4b;
}

.field input:focus {
    border-color: var(--sietelsa-blue);
    box-shadow: 0 0 0 0.2rem rgba(15, 29, 99, 0.16);
}

.submit-btn {
    background: linear-gradient(140deg, var(--sietelsa-red) 0%, var(--sietelsa-red-dark) 100%);
    box-shadow: 0 14px 30px -16px rgba(168, 20, 33, 0.95);
}

.submit-btn:hover {
    box-shadow: 0 18px 30px -14px rgba(168, 20, 33, 0.95);
}

.submit-btn:focus-visible {
    outline: 2px solid rgba(215, 31, 45, 0.42);
    outline-offset: 2px;
}

.alert-box.info {
    background: #eef3ff;
    border-color: #cfddf9;
    color: #1a3e7c;
}

.recaptcha-wrap {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.3rem;
    -webkit-overflow-scrolling: touch;
}

.recaptcha-wrap .g-recaptcha {
    width: fit-content;
}

.alert-inline {
    margin-bottom: 0;
}

.login-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 8px;
    text-align: center;
    color: rgba(230, 245, 255, 0.78);
    font-size: 0.8rem;
    z-index: 1;
}

@media (max-width: 960px) {
    .page {
        width: min(720px, 94vw);
        padding: 1.3rem 0;
    }

    .panel-brand {
        gap: 1.4rem;
    }

    .panel-brand::after {
        left: 1.5rem;
        right: 1.5rem;
    }

    .login-footer {
        position: static;
        margin: 0.45rem 0 0.8rem;
        color: rgba(226, 241, 255, 0.84);
    }
}

@media (max-width: 640px) {
    .page {
        width: 100%;
        padding: 0.9rem 0.72rem;
    }

    .login-shell {
        border-radius: 20px;
    }

    .panel-brand {
        padding: 1.4rem 1rem 1.3rem;
    }

    .panel-form {
        padding: 1.2rem 0.95rem 1rem;
    }

    .headline h2 {
        font-size: 1.35rem;
    }

    .brand-copy h1 {
        font-size: 1.25rem;
    }

    .feature-list {
        gap: 0.55rem;
    }

    .field input {
        padding: 0.72rem 0.8rem;
    }

    .submit-btn {
        width: 100%;
    }
}

@media (max-width: 390px) {
    .recaptcha-wrap .g-recaptcha {
        transform: scale(0.87);
        transform-origin: left top;
    }

    .recaptcha-wrap {
        min-height: 70px;
    }
}

@media (max-width: 340px) {
    .recaptcha-wrap .g-recaptcha {
        transform: scale(0.77);
    }

    .recaptcha-wrap {
        min-height: 63px;
    }
}