:root {
        --login-bg: #05030a;
        --login-bg-2: #0b0613;

        --card-bg: rgba(12, 8, 20, 0.96);
        --card-border: rgba(139, 92, 246, 0.17);

        --text-main: #f8f7fb;
        --text-secondary: #9b96a7;
        --text-muted: #66616f;

        --input-bg: #0b0811;
        --input-border: rgba(139, 92, 246, 0.16);

        --purple: #8b5cf6;
        --purple-light: #b052ff;
        --purple-dark: #7138e7;

        --danger: #fb7185;

        --shadow:
            0 30px 90px rgba(0, 0, 0, 0.52),
            0 0 70px rgba(124, 58, 237, 0.05);
    }

    html.light-theme {
        --login-bg: #f4f4f8;
        --login-bg-2: #ffffff;

        --card-bg: rgba(255, 255, 255, 0.97);
        --card-border: rgba(91, 55, 160, 0.15);

        --text-main: #17131e;
        --text-secondary: #696372;
        --text-muted: #918b98;

        --input-bg: #f8f7fb;
        --input-border: rgba(91, 55, 160, 0.16);

        --shadow:
            0 25px 70px rgba(33, 22, 55, 0.12),
            0 0 50px rgba(124, 58, 237, 0.04);
    }

    html,
    body {
        min-height: 100%;
    }

    body {
        margin: 0;
        transition:
            background 0.25s ease,
            color 0.25s ease;
    }

    button,
    input {
        font: inherit;
    }

    .login-page {
        position: relative;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        min-height: 100vh;

        padding:
            max(24px, env(safe-area-inset-top))
            16px
            max(24px, env(safe-area-inset-bottom));

        overflow: hidden;

        background:
            radial-gradient(
                circle at 50% 12%,
                rgba(111, 45, 190, 0.14),
                transparent 34%
            ),
            radial-gradient(
                circle at 8% 75%,
                rgba(76, 29, 149, 0.07),
                transparent 27%
            ),
            linear-gradient(
                145deg,
                var(--login-bg),
                var(--login-bg-2)
            );

        transition: background 0.25s ease;
    }

    .background-glow {
        position: absolute;
        top: 2%;
        left: 50%;

        width: 430px;
        height: 430px;

        transform: translateX(-50%);

        border-radius: 999px;

        background: rgba(124, 58, 237, 0.08);

        filter: blur(120px);

        pointer-events: none;
    }

    .login-card {
        position: relative;
        z-index: 2;

        width: 100%;
        max-width: 465px;

        padding: 32px 30px 30px;

        color: var(--text-main);
        background: var(--card-bg);

        border: 1px solid var(--card-border);
        border-radius: 30px;

        box-shadow: var(--shadow);

        transition:
            background 0.25s ease,
            border-color 0.25s ease,
            color 0.25s ease,
            box-shadow 0.25s ease;
    }

    /* =========================================================
       BOTÓN DE TEMA
       ========================================================= */

    .theme-toggle {
        position: absolute;
        top: 21px;
        right: 21px;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 46px;
        height: 46px;

        padding: 0;

        color: var(--text-secondary);

        background: rgba(124, 58, 237, 0.035);

        border: 1px solid var(--card-border);
        border-radius: 14px;

        cursor: pointer;

        transition:
            color 0.2s ease,
            background 0.2s ease,
            border-color 0.2s ease,
            transform 0.2s ease;
    }

    .theme-toggle:hover {
        color: var(--text-main);
        background: rgba(124, 58, 237, 0.09);
        border-color: rgba(139, 92, 246, 0.35);
    }

    .theme-toggle:active {
        transform: scale(0.95);
    }

    .theme-toggle svg {
        width: 21px;
        height: 21px;
    }

    /* =========================================================
       LOGO / MARCA
       ========================================================= */

    .login-header {
        padding: 2px 48px 0;
        text-align: center;
    }

    .login-logo {
        display: block;

        width: 96px;
        height: 96px;

        margin: 0 auto 18px;

        object-fit: cover;

        border-radius: 24px;

        box-shadow:
            0 12px 35px rgba(0, 0, 0, 0.30),
            0 0 30px rgba(139, 92, 246, 0.10);
    }

    .login-title {
        margin: 0;

        color: var(--text-main);

        font-size: 1.85rem;
        font-weight: 900;

        line-height: 1.05;

        letter-spacing: -0.04em;
    }

    .brand-subtitle {
        margin-top: 8px;

        color: var(--purple-light);

        font-size: 0.66rem;
        font-weight: 900;

        line-height: 1.4;

        letter-spacing: 0.18em;

        text-transform: uppercase;
    }

    .login-subtitle {
        margin-top: 12px;

        color: var(--text-secondary);

        font-size: 0.88rem;
        font-weight: 600;

        line-height: 1.5;
    }

    /* =========================================================
       FLASH
       ========================================================= */

    .login-flashes {
        margin-top: 22px;
    }

    .login-flash {
        margin-bottom: 10px;

        padding: 13px 15px;

        border-radius: 13px;

        font-size: 0.78rem;
        font-weight: 700;

        text-align: center;
    }

    .login-flash-error {
        color: #fda4af;

        background: rgba(190, 24, 93, 0.09);

        border: 1px solid rgba(244, 63, 94, 0.22);
    }

    .login-flash-success {
        color: #6ee7b7;

        background: rgba(16, 185, 129, 0.08);

        border: 1px solid rgba(16, 185, 129, 0.20);
    }

    html.light-theme .login-flash-error {
        color: #be123c;
    }

    html.light-theme .login-flash-success {
        color: #047857;
    }

    /* =========================================================
       FORMULARIO
       ========================================================= */

    .login-form {
        margin-top: 27px;
    }

    .field-group {
        margin-bottom: 19px;
    }

    .login-label {
        display: block;

        margin-bottom: 9px;

        color: var(--text-main);

        font-size: 0.85rem;
        font-weight: 800;
    }

    .input-wrapper {
        position: relative;
    }

    .login-input {
        display: block;

        width: 100%;
        height: 59px;

        padding: 0 51px;

        color: var(--text-main);

        background: var(--input-bg);

        border: 1px solid var(--input-border);
        border-radius: 16px;

        outline: none;

        font-size: 0.94rem;
        font-weight: 600;

        transition:
            background 0.2s ease,
            color 0.2s ease,
            border-color 0.2s ease,
            box-shadow 0.2s ease;
    }

    .login-input::placeholder {
        color: var(--text-muted);
    }

    .login-input:hover {
        border-color: rgba(139, 92, 246, 0.30);
    }

    .login-input:focus {
        border-color: var(--purple);

        box-shadow:
            0 0 0 3px rgba(139, 92, 246, 0.10),
            0 0 22px rgba(139, 92, 246, 0.05);
    }

    .input-icon {
        position: absolute;
        top: 50%;
        left: 17px;

        width: 21px;
        height: 21px;

        transform: translateY(-50%);

        color: var(--text-secondary);

        pointer-events: none;
    }

    .password-toggle {
        position: absolute;
        top: 50%;
        right: 14px;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 36px;
        height: 36px;

        padding: 0;

        transform: translateY(-50%);

        color: var(--text-secondary);

        background: transparent;

        border: 0;
        border-radius: 9px;

        cursor: pointer;
    }

    .password-toggle:hover {
        color: var(--purple-light);
    }

    .password-toggle svg {
        width: 21px;
        height: 21px;
    }

    /* =========================================================
       TURNSTILE
       ========================================================= */

    .turnstile-container {
        display: flex;
        justify-content: center;

        width: 100%;

        margin: 22px 0;

        overflow: hidden;
    }

    .turnstile-inner {
        display: flex;
        justify-content: center;

        width: 100%;

        transform-origin: center;
    }


    .turnstile-status {
        display: none;
        margin: -11px 0 18px;
        padding: 11px 13px;
        border-radius: 12px;
        font-size: 0.76rem;
        font-weight: 800;
        line-height: 1.45;
        text-align: center;
    }

    .turnstile-status.active {
        display: block;
    }

    .turnstile-status.pending {
        color: #fcd34d;
        background: rgba(245, 158, 11, 0.08);
        border: 1px solid rgba(245, 158, 11, 0.20);
    }

    .turnstile-status.success {
        color: #6ee7b7;
        background: rgba(16, 185, 129, 0.08);
        border: 1px solid rgba(16, 185, 129, 0.20);
    }

    .turnstile-status.error {
        color: #fda4af;
        background: rgba(190, 24, 93, 0.09);
        border: 1px solid rgba(244, 63, 94, 0.22);
    }

    html.light-theme .turnstile-status.pending {
        color: #92400e;
    }

    html.light-theme .turnstile-status.success {
        color: #047857;
    }

    html.light-theme .turnstile-status.error {
        color: #be123c;
    }

    /* =========================================================
       CHECKBOX
       ========================================================= */

    .login-options {
        display: flex;
        flex-direction: column;

        gap: 14px;

        margin: 4px 0 23px;
    }

    .option-row {
        display: flex;
        align-items: center;

        min-height: 25px;

        gap: 8px;
    }

    .checkbox-label {
        display: inline-flex;
        align-items: center;

        gap: 11px;

        color: var(--text-secondary);

        font-size: 0.84rem;
        font-weight: 700;

        cursor: pointer;

        user-select: none;
    }

    .checkbox-label input {
        position: absolute;

        width: 1px;
        height: 1px;

        opacity: 0;

        pointer-events: none;
    }

    .check-box {
        position: relative;

        flex: 0 0 auto;

        width: 23px;
        height: 23px;

        background: var(--input-bg);

        border: 1px solid var(--input-border);
        border-radius: 7px;

        transition:
            background 0.2s ease,
            border-color 0.2s ease,
            box-shadow 0.2s ease;
    }

    .checkbox-label:hover .check-box {
        border-color: rgba(139, 92, 246, 0.45);
    }

    .checkbox-label input:focus-visible + .check-box {
        box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.14);
    }

    .checkbox-label input:checked + .check-box {
        background:
            linear-gradient(
                135deg,
                var(--purple-dark),
                var(--purple-light)
            );

        border-color: var(--purple);

        box-shadow:
            0 0 15px rgba(139, 92, 246, 0.20);
    }

    .checkbox-label input:checked + .check-box::after {
        content: "";

        position: absolute;

        top: 3px;
        left: 7px;

        width: 7px;
        height: 12px;

        border: solid #ffffff;
        border-width: 0 2px 2px 0;

        transform: rotate(45deg);
    }

    .terms-button {
        display: inline;

        padding: 0;

        color: var(--purple-light);
        background: transparent;

        border: 0;

        font-size: 0.84rem;
        font-weight: 800;

        cursor: pointer;

        text-align: left;
        text-decoration: none;
    }

    .terms-button:hover {
        text-decoration: underline;
    }

    /* =========================================================
       BOTÓN LOGIN
       ========================================================= */

    .login-submit {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        min-height: 59px;

        padding: 0 20px;

        color: #ffffff;

        background:
            linear-gradient(
                100deg,
                #7138ef 0%,
                #8b3ff2 50%,
                #a84cf4 100%
            );

        border: 1px solid rgba(216, 180, 254, 0.20);
        border-radius: 16px;

        box-shadow:
            0 12px 30px rgba(124, 58, 237, 0.20),
            inset 0 1px 0 rgba(255, 255, 255, 0.12);

        font-size: 0.93rem;
        font-weight: 900;

        letter-spacing: 0.02em;

        cursor: pointer;

        overflow: hidden;

        transition:
            transform 0.2s ease,
            box-shadow 0.2s ease,
            filter 0.2s ease;
    }

    .login-submit::before {
        content: "";

        position: absolute;
        top: 0;
        left: -150px;

        width: 120px;
        height: 100%;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.13),
                transparent
            );

        transform: skewX(-20deg);

        transition: left 0.5s ease;
    }

    .login-submit:hover {
        filter: brightness(1.08);

        box-shadow:
            0 15px 38px rgba(124, 58, 237, 0.30),
            inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }

    .login-submit:hover::before {
        left: calc(100% + 30px);
    }

    .login-submit:active {
        transform: scale(0.985);
    }

    /* =========================================================
       LINKS INFERIORES
       ========================================================= */

    .login-links {
        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 16px;

        margin-top: 23px;
    }

    .login-link {
        padding: 0;

        color: var(--text-secondary);

        background: transparent;

        border: 0;

        font-size: 0.80rem;
        font-weight: 800;

        text-decoration: none;

        cursor: pointer;

        transition: color 0.2s ease;
    }

    .login-link:hover {
        color: var(--purple-light);
    }

    /* =========================================================
       FOOTER
       ========================================================= */

    .login-footer {
        position: relative;
        z-index: 2;

        margin-top: 27px;

        color: var(--text-muted);

        font-size: 0.70rem;
        font-weight: 600;

        text-align: center;
    }

    /* =========================================================
       MODAL TÉRMINOS
       ========================================================= */

    .terms-modal {
        position: fixed;
        inset: 0;
        z-index: 9999;

        display: flex;
        align-items: center;
        justify-content: center;

        padding: 18px;

        background: rgba(2, 1, 5, 0.82);

        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);

        opacity: 0;
        visibility: hidden;

        transition:
            opacity 0.2s ease,
            visibility 0.2s ease;
    }

    .terms-modal.active {
        opacity: 1;
        visibility: visible;
    }

    .terms-card {
        position: relative;

        width: 100%;
        max-width: 440px;
        max-height: 85vh;

        padding: 29px;

        color: var(--text-main);
        background: var(--card-bg);

        border: 1px solid var(--card-border);
        border-radius: 25px;

        box-shadow: var(--shadow);

        overflow-y: auto;

        transform: translateY(12px) scale(0.98);

        transition:
            transform 0.2s ease,
            background 0.25s ease,
            color 0.25s ease;
    }

    .terms-modal.active .terms-card {
        transform: translateY(0) scale(1);
    }

    .terms-close {
        position: absolute;
        top: 13px;
        right: 17px;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 38px;
        height: 38px;

        padding: 0;

        color: var(--text-secondary);
        background: transparent;

        border: 0;
        border-radius: 10px;

        font-size: 29px;
        font-weight: 400;

        cursor: pointer;
    }

    .terms-close:hover {
        color: var(--text-main);
        background: rgba(139, 92, 246, 0.08);
    }

    .terms-title {
        margin: 0;
        padding-right: 40px;

        color: var(--text-main);

        font-size: 1.35rem;
        font-weight: 900;
    }

    .terms-brand {
        margin-top: 6px;

        color: var(--purple-light);

        font-size: 0.65rem;
        font-weight: 900;

        letter-spacing: 0.15em;

        text-transform: uppercase;
    }

    .terms-content {
        margin-top: 23px;
    }

    .terms-section {
        margin-bottom: 19px;
    }

    .terms-section h3 {
        margin: 0 0 7px;

        color: var(--text-main);

        font-size: 0.86rem;
        font-weight: 900;
    }

    .terms-section p {
        margin: 0;

        color: var(--text-secondary);

        font-size: 0.82rem;

        line-height: 1.65;
    }

    .terms-accept {
        margin-top: 7px;
    }

    /* =========================================================
       MENSAJE OLVIDASTE CONTRASEÑA
       ========================================================= */

    .visual-notice {
        position: fixed;
        left: 50%;
        bottom: 24px;
        z-index: 10000;

        width: calc(100% - 32px);
        max-width: 400px;

        padding: 13px 16px;

        color: var(--text-main);
        background: var(--card-bg);

        border: 1px solid var(--card-border);
        border-radius: 13px;

        box-shadow: var(--shadow);

        font-size: 0.78rem;
        font-weight: 700;

        text-align: center;

        opacity: 0;
        visibility: hidden;

        transform: translate(-50%, 15px);

        transition:
            opacity 0.2s ease,
            visibility 0.2s ease,
            transform 0.2s ease;
    }

    .visual-notice.active {
        opacity: 1;
        visibility: visible;

        transform: translate(-50%, 0);
    }

    /* =========================================================
       RESPONSIVE
       ========================================================= */

    @media (max-width: 520px) {
        .login-page {
            padding-left: 13px;
            padding-right: 13px;
        }

        .login-card {
            padding: 27px 19px 24px;

            border-radius: 25px;
        }

        .theme-toggle {
            top: 17px;
            right: 17px;

            width: 42px;
            height: 42px;

            border-radius: 13px;
        }

        .login-header {
            padding-left: 39px;
            padding-right: 39px;
        }

        .login-logo {
            width: 84px;
            height: 84px;

            margin-bottom: 16px;

            border-radius: 21px;
        }

        .login-title {
            font-size: 1.60rem;
        }

        .brand-subtitle {
            font-size: 0.59rem;
            letter-spacing: 0.14em;
        }

        .login-subtitle {
            font-size: 0.81rem;
        }

        .login-input,
        .login-submit {
            min-height: 57px;
            height: 57px;
        }

        .login-links {
            gap: 10px;
        }

        .login-link {
            font-size: 0.74rem;
        }

        .terms-card {
            padding: 25px 20px;
        }
    }

    @media (max-width: 365px) {
        .login-card {
            padding-left: 15px;
            padding-right: 15px;
        }

        .turnstile-inner {
            transform: scale(0.88);
        }

        .login-links {
            align-items: flex-start;
        }

        .login-link {
            max-width: 55%;
        }
    }