/* css/iniciar-sesion.css */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&display=swap');

:root {
    --bg-color: #101420;
    --card-color: rgba(255, 255, 255, 0.1);
    --text-color: #f5f7ff;
    --accent: #ad53ff;
    --accent-secondary: #ff76b0;
    --muted: #94a3b8;
    --border: rgba(255, 255, 255, 0.14);
    --glow-1: rgba(173,83,255,0.18);
    --glow-2: rgba(255,118,176,0.22);
}
:root[data-theme='light'] {
    --bg-color: #f4f5ff;
    --card-color: rgba(255, 255, 255, 0.72);
    --text-color: #171622;
    --accent: #8459e8;
    --accent-secondary: #ff72bb;
    --muted: #5c617b;
    --border: rgba(23, 22, 34, 0.12);
    --glow-1: rgba(132,89,232,0.28);
    --glow-2: rgba(255,130,183,0.26);
}
:root[data-theme='dark'] {
    --bg-color: #050712;
    --card-color: rgba(20, 24, 42, 0.82);
    --text-color: #f8f9ff;
    --accent: #c792ff;
    --accent-secondary: #ff88cb;
    --muted: #a3aed5;
    --border: rgba(255,255,255,0.08);
    --glow-1: rgba(90,115,255,0.32);
    --glow-2: rgba(255,142,212,0.24);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    min-height: 100vh;
    font-family: 'Manrope', sans-serif;
    background: radial-gradient(circle at top left, var(--glow-1), transparent 45%),
                radial-gradient(circle at bottom right, var(--glow-2), transparent 40%),
                var(--bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
}

.logo-intro {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: grid;
    place-items: center;
    pointer-events: none;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.09), transparent 62%),
                radial-gradient(circle at 20% 20%, var(--glow-1), transparent 55%),
                radial-gradient(circle at 80% 80%, var(--glow-2), transparent 50%),
                var(--bg-color);
    animation: intro-overlay-fade 1.75s ease forwards;
}

.logo-intro__image {
    width: min(190px, 44vw);
    aspect-ratio: 1;
    border-radius: 30px;
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.35);
    animation: logo-center-diffuse 1.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes logo-center-diffuse {
    0% {
        opacity: 0;
        filter: blur(18px);
        transform: scale(0.55);
    }
    22% {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
    }
    65% {
        opacity: 1;
        filter: blur(0);
        transform: scale(1.06);
    }
    100% {
        opacity: 0;
        filter: blur(14px);
        transform: scale(1.2);
    }
}

@keyframes intro-overlay-fade {
    0%, 70% {
        opacity: 1;
        visibility: visible;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

body[data-theme='dark'] {
    background: radial-gradient(circle at top left, var(--glow-1), transparent 48%),
                radial-gradient(circle at bottom right, var(--glow-2), transparent 42%),
                var(--bg-color);
}

.login-container {
    width: 100%;
    max-width: 960px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
    align-items: center;
}

.login-hero {
    color: var(--text-color);
    padding: 20px;
}
.login-hero h1 {
    font-size: 2.8rem;
    margin-bottom: 12px;
}
.login-hero p {
    color: var(--muted);
    line-height: 1.5;
    max-width: 340px;
}

.login-card {
    background: var(--card-color);
    border-radius: 20px;
    padding: 36px 32px;
    border: 1px solid var(--border);
    backdrop-filter: blur(12px);
    box-shadow: 0 18px 50px rgba(0,0,0,0.25);
}
.login-card h2 {
    color: var(--text-color);
}
.login-card p { color: var(--muted); }

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}
.brand img {
    width: 52px;
    height: 52px;
    border-radius: 16px;
}
.brand span {
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--text-color);
}

.form-group { margin-bottom: 18px; color: var(--text-color); }
.form-group label { display:block; margin-bottom: 6px; font-weight: 600; }
.form-group input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
    color: var(--text-color);
    font-size: 1rem;
    transition: border 0.2s;
}
.form-group select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
    color: var(--text-color);
    font-size: 1rem;
}
.form-group input:focus { outline:none; border-color: var(--accent); }
.form-group select:focus { outline:none; border-color: var(--accent); }

.password-input {
    position: relative;
    display: flex;
    align-items: center;
}
.password-input input {
    padding-right: 44px;
}
.password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--muted);
    padding: 4px;
}
.password-toggle:hover { color: var(--accent); }
.password-toggle:focus { outline: none; color: var(--accent); }

.btn {
    width: 100%;
    padding: 14px;
    border-radius: 10px;
    border:none;
    background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
    color:#fff;
    font-weight: 700;
    font-size: 1rem;
    cursor:pointer;
    margin-top: 8px;
    transition: transform 0.15s;
}
.btn:hover { transform: translateY(-1px); }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; }


.error-message {
    color: #fca5a5;
    margin-top: 14px;
    text-align: center;
    font-size: 0.92rem;
    display: none;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(252, 165, 165, 0.08);
    border: 1px solid rgba(252, 165, 165, 0.2);
}



.link-button {
    background: none;
    border: none;
    color: var(--accent);
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}
.link-button:hover { color: var(--accent-secondary); }

    .pay-scheme-note {
        margin-top: 8px;
        padding: 10px 12px;
        border-radius: 10px;
        border: 1px dashed rgba(102, 51, 153, 0.35);
        background: rgba(245, 237, 255, 0.7);
        color: #2f2450;
    }
    .pay-scheme-note__title { margin: 0 0 6px; font-weight: 700; font-size: 0.95rem; }
    .pay-scheme-note__summary { margin: 0 0 8px; font-size: 0.95rem; line-height: 1.4; }
    .pay-scheme-note__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
    .pay-scheme-note__block { background: #fff; border: 1px dashed #d7c7ff; border-radius: 8px; padding: 8px 10px; }
    .pay-scheme-note__subtitle { margin: 0 0 4px; font-weight: 600; font-size: 0.9rem; }
    .pay-scheme-note ul { margin: 0; padding-left: 18px; line-height: 1.45; font-size: 0.95rem; }

.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 3000;
    align-items: center;
    justify-content: center;
}
.modal[aria-hidden="false"] {
    display: flex;
}



.form-message {
    margin-top: 14px;
    font-size: 0.92rem;
    text-align: left;
    color: var(--muted);
}
.form-message--error { color: #f87171; }
.form-message--success { color: #34d399; }

.theme-toggle {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: linear-gradient(135deg, #7f6bff, #ff72bb);
    color: #fff;
    border: none;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    box-shadow: 0 12px 22px rgba(0,0,0,0.25);
    z-index: 2000;
    cursor: pointer;
}
.theme-toggle span { pointer-events: none; }
body[data-theme='dark'] .theme-toggle {
    background: linear-gradient(135deg, #2f3566, #5d63a4);
    box-shadow: 0 12px 24px rgba(0,0,0,0.5);
}

@media (max-width: 768px) {
    .login-hero { text-align: center; }
    .login-hero p { margin: 0 auto; }
    .logo-intro__image {
        width: min(160px, 48vw);
        border-radius: 24px;
    }
}

@media (max-width: 400px) {
    body {
        padding: 16px 10px;
    }
    .login-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 8px !important;
        gap: 20px !important;
    }
    .brand {
        justify-content: center;
        margin-bottom: 16px;
    }
    .login-hero h1 {
        font-size: 1.4rem !important;
    }
    .login-hero p {
        font-size: 0.85rem !important;
    }
    .login-card {
        padding: 24px 18px !important;
        border-radius: 16px !important;
    }
    .form-group input,
    .form-group select {
        font-size: 16px !important; /* Previene auto-zoom en iOS Safari (iPhone SE) */
        padding: 12px 14px;
    }
    .btn {
        min-height: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .logo-intro__image {
        width: min(120px, 40vw) !important;
        border-radius: 18px !important;
    }
}

.suspended-account {
    text-align: center;
    padding: 8px 0;
}
.suspended-account__icon {
    font-size: 2.8rem;
    margin-bottom: 8px;
}
.suspended-account__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #f87171;
    margin-bottom: 6px;
}
.suspended-account__text {
    font-size: 0.9rem;
    color: var(--muted);
    line-height: 1.5;
    margin-bottom: 14px;
}
.suspended-account__btn {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 10px;
    background: linear-gradient(135deg, #25d366, #128c7e);
    color: #fff;
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
}
.suspended-account__btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35);
}
.suspended-account__btn:active {
    transform: translateY(0);
}