/* =====================================================
   CLUB TITANES
   LOGIN - DISEÑO RESPONSIVE
===================================================== */

/* ================================================
   1. VARIABLES
================================================ */

:root {
    --login-azul: #173D75;
    --login-azul-hover: #245A9C;
    --login-naranja: #F28C28;
    --login-naranja-hover: #E67E18;
    --login-fondo: #F1F5F9;
    --login-blanco: #FFFFFF;
    --login-texto: #334155;
    --login-secundario: #64748B;
    --login-borde: #E2E8F0;
    --login-error: #B42318;
}

/* ================================================
   2. REINICIO GENERAL
================================================ */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body.login-body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    color: var(--login-texto);

    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(23, 61, 117, 0.09),
            transparent 38%
        ),
        radial-gradient(
            circle at 90% 85%,
            rgba(242, 140, 40, 0.10),
            transparent 35%
        ),
        var(--login-fondo);
}

/* ================================================
   3. CONTENEDOR
================================================ */

.login-container {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 100vh;
    min-height: 100dvh;

    width: 100%;

    padding: 24px 16px;
}

/* ================================================
   4. TARJETA PRINCIPAL
================================================ */

.login-card {
    width: 100%;
    max-width: 430px;

    padding: 36px 32px;

    background: var(--login-blanco);

    border: 1px solid var(--login-borde);
    border-radius: 22px;

    box-shadow:
        0 20px 55px rgba(23, 61, 117, 0.08),
        0 5px 15px rgba(15, 23, 42, 0.03);
}

/* ================================================
   5. ENCABEZADO
================================================ */

.login-header {
    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    margin-bottom: 32px;
}

.login-logo {
    display: block;

    width: 190px;
    max-width: 100%;
    height: auto;

    object-fit: contain;

    margin-bottom: 12px;
}

.login-header h1 {
    margin: 0;

    font-size: 25px;
    font-weight: 800;

    line-height: 1.25;
    letter-spacing: 0.5px;

    color: var(--login-azul);
}

.login-header p {
    margin: 9px 0 0;

    font-size: 13px;
    line-height: 1.6;

    color: var(--login-secundario);
}

/* ================================================
   6. FORMULARIO
================================================ */

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

    gap: 21px;
}

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

    gap: 9px;
}

.login-campo label {
    font-size: 13px;
    font-weight: 650;

    color: var(--login-azul);
}

/* ================================================
   7. CAMPOS DE ENTRADA
================================================ */

.login-input-group {
    display: flex;
    align-items: center;

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

    border: 1px solid var(--login-borde);
    border-radius: 11px;

    background: var(--login-blanco);

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

.login-input-group:focus-within {
    border-color: var(--login-azul-hover);

    box-shadow:
        0 0 0 3px rgba(23, 61, 117, 0.10);
}

.login-input-group > i {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 45px;
    flex-shrink: 0;

    font-size: 18px;

    color: var(--login-secundario);
}

.login-input-group input {
    flex: 1;

    width: 100%;
    min-width: 0;
    height: 48px;

    padding: 0 12px 0 0;

    border: none;
    outline: none;

    background: transparent;

    font-family: inherit;
    font-size: 14px;

    color: var(--login-texto);
}

.login-input-group input::placeholder {
    color: #94A3B8;
    opacity: 1;
}

/* ================================================
   8. MOSTRAR / OCULTAR CONTRASEÑA
================================================ */

.login-toggle-password {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    flex-shrink: 0;

    padding: 0;

    border: none;
    border-radius: 9px;

    background: transparent;

    color: var(--login-secundario);

    cursor: pointer;

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

.login-toggle-password:hover {
    color: var(--login-azul);

    background: rgba(23, 61, 117, 0.06);
}

.login-toggle-password i {
    font-size: 18px;
}

/* ================================================
   9. BOTÓN INICIAR SESIÓN
================================================ */

.login-submit {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

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

    margin-top: 5px;
    padding: 13px 18px;

    border: none;
    border-radius: 11px;

    background: var(--login-naranja);

    color: var(--login-blanco);

    font-family: inherit;
    font-size: 13px;
    font-weight: 750;

    letter-spacing: 0.5px;

    cursor: pointer;

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

.login-submit:hover {
    background: var(--login-naranja-hover);

    box-shadow:
        0 6px 18px rgba(242, 140, 40, 0.20);
}

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

.login-submit i {
    font-size: 17px;
}

.login-submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

/* ================================================
   10. MENSAJES DE ERROR
================================================ */

.login-mensaje {
    padding: 12px 14px;

    border: 1px solid #FECACA;
    border-radius: 10px;

    background: #FEF2F2;

    color: var(--login-error);

    font-size: 13px;
    line-height: 1.6;
}

.login-mensaje[hidden] {
    display: none !important;
}

/* ================================================
   11. PIE DE FORMULARIO
================================================ */

.login-footer {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    margin-top: 28px;
    padding-top: 22px;

    border-top: 1px solid var(--login-borde);

    color: var(--login-secundario);

    text-align: center;

    font-size: 11px;
    line-height: 1.6;
}

.login-footer i {
    flex-shrink: 0;

    font-size: 15px;

    color: var(--login-azul);
}

/* ================================================
   12. ACCESIBILIDAD
================================================ */

.login-submit:focus-visible,
.login-toggle-password:focus-visible {
    outline: 3px solid rgba(23, 61, 117, 0.30);
    outline-offset: 3px;
}

/* ================================================
   13. TABLETS
================================================ */

@media (min-width: 768px) {

    .login-card {
        padding: 42px 38px;
    }

    .login-logo {
        width: 230px;
    }

    .login-header h1 {
        font-size: 27px;
    }

}

/* ================================================
   14. CELULARES
================================================ */

@media (max-width: 480px) {

    .login-container {
        padding: 18px 14px;
    }

    .login-card {
        padding: 30px 22px;

        border-radius: 18px;
    }

    .login-logo {
        width: 200px;
    }

    .login-header {
        margin-bottom: 27px;
    }

    .login-header h1 {
        font-size: 23px;
    }

    .login-form {
        gap: 19px;
    }

    .login-footer {
        margin-top: 25px;
    }

}

/* ================================================
   15. PANTALLAS PEQUEÑAS
================================================ */

@media (max-width: 350px) {

    .login-card {
        padding: 25px 16px;
    }

    .login-header h1 {
        font-size: 21px;
    }

    .login-footer {
        font-size: 10px;
    }

}

/* ================================================
   16. MOVIMIENTO REDUCIDO
================================================ */

@media (prefers-reduced-motion: reduce) {

    .login-input-group,
    .login-toggle-password,
    .login-submit {
        transition: none;
    }

}