/* ==========================================================
   LOGIN PAGE
   REPORTES AsEp
   Diseño final — claro / oscuro
   ========================================================== */

@import "../components/background.css";
@import "../components/login-card.css";
@import "../components/login-header.css";
@import "../components/login-form.css";
@import "../components/login-button.css";
@import "../components/login-footer.css";
@import "../components/login-animations.css";


/* ==========================================================
   PAGE
   ========================================================== */

.login-page-container{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:0;
    flex:1 1 auto;
    width:100%;
    padding:1rem;
    overflow:hidden;
}

.login-wrapper{
    width:min(100%,560px);
}


/* ==========================================================
   LOGIN CARD
   Sobrescribe únicamente el login.
   No afecta al Home.
   ========================================================== */

.login-card{
    width:100%;
    max-width:540px;
    margin:0 auto;
    padding:1.25rem 2.75rem 1.35rem;
    border-radius:28px;
    overflow:hidden;
}

/*
   MISMA SUPERFICIE DE VIDRIO QUE EL HERO CARD DEL HOME
   -----------------------------------------------------
   Importante: no se cambia el color base del login.
   Se reutilizan exactamente las variables del Home para que
   el fondo espacial pueda verse a través de la tarjeta en
   ambos temas.
*/
.login-card{
    background:var(--home-hero-background);
    border:1px solid var(--home-hero-border);
    box-shadow:var(--home-hero-shadow);
    backdrop-filter:blur(var(--home-hero-blur));
    -webkit-backdrop-filter:blur(var(--home-hero-blur));
}

.login-card::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    border-radius:inherit;
    background:var(--home-hero-highlight);
    opacity:var(--home-hero-highlight-opacity);
    z-index:0;
}

.login-card > *{
    position:relative;
    z-index:1;
}

.login-card:hover{
    transform:none;
}

.login-card:hover::before{
    transform:scaleX(0);
}


/* ==========================================================
   ACTIONS
   ========================================================== */

.page-actions{
    margin-bottom:1rem;
}

.back-btn{
    padding:.58rem 1.05rem;
    border-radius:12px;
    font-size:.90rem;
    font-weight:600;
}


/* ==========================================================
   HEADER
   ========================================================== */

.login-header{
    margin-bottom:1.15rem;
}

.login-logo{
    width:150px;
    margin-bottom:.65rem;
}

.login-title{
    font-size:2rem;
    line-height:1.12;
    letter-spacing:-.035em;
}

.login-subtitle{
    margin-top:.45rem;
    max-width:none;
    font-size:.93rem;
    line-height:1.45;
    letter-spacing:.15px;
}

.login-divider{
    width:76px;
    height:4px;
    margin-top:.85rem;
}


/* ==========================================================
   FORM
   ========================================================== */

.login-body{
    gap:.85rem;
}

.form-group{
    gap:.48rem;
}

.form-label{
    font-size:.88rem;
    font-weight:600;
}

.form-control{
    min-height:52px;
    padding:.75rem 3.25rem .75rem 3.25rem;
    border-radius:14px;
    font-size:.96rem;
}

[data-theme="light"] .form-control{
    color:#24364E;
    caret-color:#24364E;
}

[data-theme="light"] .form-control::placeholder{
    color:#9AA8BB;
    opacity:1;
}

[data-theme="dark"] .form-control{
    color:#F4F7FC;
    caret-color:#F4F7FC;
}

[data-theme="dark"] .form-control::placeholder{
    color:#8192B3;
    opacity:1;
}

[data-theme="dark"] .form-control:-webkit-autofill,
[data-theme="dark"] .form-control:-webkit-autofill:hover,
[data-theme="dark"] .form-control:-webkit-autofill:focus{
    -webkit-text-fill-color:#F4F7FC;
    box-shadow:0 0 0 1000px #172B47 inset;
    caret-color:#F4F7FC;
}

[data-theme="light"] .form-control{
    background:rgba(255,255,255,.68);
    border-color:rgba(203,213,225,.78);
}

[data-theme="dark"] .form-control{
    background:rgba(255,255,255,.035);
    border-color:rgba(82,107,156,.34);
}

.input-icon{
    left:17px;
}


/* ==========================================================
   RECORDAR / RECUPERACIÓN
   ========================================================== */

.login-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    margin-top:-.1rem;
    font-size:.88rem;
}

.remember-label{
    display:inline-flex;
    align-items:center;
    gap:.55rem;
    margin:0;
    color:var(--color-text);
    cursor:pointer;
    user-select:none;
}

[data-theme="dark"] .remember-label{
    color:#E2E8F0;
}

.remember-checkbox{
    width:19px;
    height:19px;
    margin:0;
    appearance:none;
    -webkit-appearance:none;
    border:1px solid var(--border-normal);
    border-radius:5px;
    background:transparent;
    cursor:pointer;
    position:relative;
    flex:0 0 auto;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.remember-checkbox:checked{
    background:var(--color-primary);
    border-color:var(--color-primary);
}

.remember-checkbox:checked::after{
    content:"";
    position:absolute;
    left:5px;
    top:2px;
    width:6px;
    height:10px;
    border:solid #fff;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}

.remember-checkbox:focus-visible{
    outline:none;
    box-shadow:0 0 0 3px var(--color-primary-soft);
}

.forgot-link{
    color:var(--color-primary);
    font-weight:600;
    text-decoration:none;
    white-space:nowrap;
    transition:
        color var(--transition-fast),
        opacity var(--transition-fast);
}

.forgot-link:hover{
    color:var(--color-primary-hover);
}


/* ==========================================================
   LOGIN BUTTON
   ========================================================== */

.login-actions{
    margin-top:0;
}

.btn-login{
    width:100%;
    min-height:54px;
    border-radius:14px;
    padding:.95rem 1.4rem;
    font-size:1rem;
    font-weight:700;
}

/* Light = orange */
[data-theme="light"] .btn-login{
    background:linear-gradient(
        135deg,
        #FF6B3D,
        #F25C2A
    );
    box-shadow:0 16px 32px rgba(242,92,42,.22);
}

/* Dark = blue, as in the reference */
[data-theme="dark"] .btn-login{
    background:linear-gradient(
        135deg,
        #3B82F6,
        #2563EB
    );
    box-shadow:0 16px 32px rgba(37,99,235,.28);
}

[data-theme="dark"] .btn-login:hover{
    box-shadow:0 20px 38px rgba(37,99,235,.34);
}


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

.login-footer{
    margin-top:1rem;
    padding-top:.85rem;
    gap:.8rem;
}

.login-footer p{
    font-size:.86rem;
}

.login-support{
    font-size:.86rem;
}


/* ==========================================================
   PAGE / GLOBAL FOOTER
   Login comparte el footer global sin alterar el Home.
   ========================================================== */

body:has(.login-page-container){
    overflow:hidden;
}

body:has(.login-page-container) .app{
    height:100dvh;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

body:has(.login-page-container) .app-main{
    position:relative;
    flex:1 1 auto;
    min-height:0;
    height:auto;
    overflow:hidden;
}

body:has(.login-page-container) .app-footer{
    position:relative;
    z-index:20;
    flex:0 0 auto;
}


/* ==========================================================
   ESCRITORIO CON POCA ALTURA
   El diseño normal no cambia en escritorios altos.
   Solo comprimimos cuando la ventana realmente es baja.
   ========================================================== */

@media (min-width:769px) and (max-width:1400px) and (max-height:700px){

    .login-page-container{
        padding:.55rem 1rem;
    }

    .login-card{
        padding:.9rem 2.25rem 1rem;
        border-radius:24px;
    }

    .page-actions{
        margin-bottom:.55rem;
    }

    .back-btn{
        padding:.48rem .9rem;
        font-size:.84rem;
    }

    .login-header{
        margin-bottom:.7rem;
    }

    .login-logo{
        width:125px;
        margin-bottom:.35rem;
    }

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

    .login-subtitle{
        margin-top:.2rem;
        font-size:.82rem;
        line-height:1.3;
    }

    .login-divider{
        margin-top:.45rem;
    }

    .login-body{
        gap:.62rem;
    }

    .form-group{
        gap:.35rem;
    }

    .form-control{
        min-height:46px;
        padding:.62rem 3rem .62rem 3rem;
    }

    .btn-login{
        min-height:48px;
        padding:.75rem 1.2rem;
    }

    .login-footer{
        margin-top:.65rem;
        padding-top:.55rem;
    }
}


/* ==========================================================
   ESCRITORIO MUY BAJO
   ========================================================== */

@media (min-width:769px) and (max-width:1400px) and (max-height:620px){

    .login-page-container{
        padding:.35rem .75rem;
    }

    .login-card{
        padding:.7rem 2rem .8rem;
        border-radius:22px;
    }

    .page-actions{
        margin-bottom:.4rem;
    }

    .login-logo{
        width:105px;
    }

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

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

    .login-body{
        gap:.5rem;
    }

    .form-control{
        min-height:43px;
        font-size:.9rem;
    }

    .btn-login{
        min-height:45px;
    }

    .login-footer{
        margin-top:.5rem;
        padding-top:.4rem;
    }
}


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

@media (max-width:768px){

    .login-page-container{
        min-height:0;
        flex:1 1 auto;
        padding:.75rem 1rem;
    }

    .login-card{
        padding:1.15rem 2.2rem 1.25rem;
        border-radius:25px;
    }

    .login-logo{
        width:150px;
    }

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

@media (max-width:576px){

    .login-page-container{
        padding:.6rem .75rem;
    }

    .login-wrapper{
        width:100%;
    }

    .login-card{
        padding:1.1rem 1.25rem 1.25rem;
        border-radius:22px;
    }

    .page-actions{
        margin-bottom:1.3rem;
    }

    .login-logo{
        width:135px;
        margin-bottom:.65rem;
    }

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

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

    .login-header{
        margin-bottom:1.55rem;
    }

    .login-body{
        gap:1.05rem;
    }

    .form-control{
        min-height:52px;
        font-size:.93rem;
        padding:.85rem 3rem .85rem 3rem;
    }

    .login-meta{
        align-items:flex-start;
        font-size:.82rem;
    }

    .btn-login{
        min-height:54px;
        font-size:.94rem;
    }

    .login-footer{
        margin-top:1.4rem;
        padding-top:1.25rem;
    }
}

@media (max-width:380px){

    .login-card{
        padding:1.25rem 1rem 1.5rem;
    }

    .login-logo{
        width:130px;
    }

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

    .login-meta{
        flex-direction:column;
        align-items:flex-start;
    }
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

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

    .login-card,
    .login-logo,
    .form-control,
    .btn-login,
    .back-btn,
    .forgot-link{
        transition:none !important;
    }
}


/* ==========================================================
   PRINT
   ========================================================== */

@media print{

    .login-page-container{
        min-height:auto;
        padding:0;
    }

    .login-card{
        background:#fff !important;
        border:1px solid #d1d5db !important;
        box-shadow:none !important;
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
    }

}