/* ==========================================================
   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));
}

/*
   El Home define estas variables en variables.css, pero el login
   no importa ese archivo de la misma forma. Por eso el valor anterior
   podía quedar inválido y el fondo opaco de login-card.css seguía activo.
   Aquí se fijan exactamente los valores usados por el Home.
*/
[data-theme="light"] .login-card{
    background:rgba(226,232,240,.10);
    border:1px solid rgba(148,163,184,.24);
    box-shadow:
        0 20px 48px rgba(51,65,85,.09),
        inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
}

[data-theme="dark"] .login-card{
    background:rgba(10,28,58,.10);
    border:1px solid rgba(96,165,250,.26);
    box-shadow:
        0 20px 48px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
}

[data-theme="light"] .login-card::after{
    background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 38%);
    opacity:.18;
}

[data-theme="dark"] .login-card::after{
    background:linear-gradient(180deg,rgba(255,255,255,.045),transparent 36%);
    opacity:.32;
}

/* ==========================================================
   HERO CARD — TRANSPARENCIA
   Solo se modifica la opacidad del fondo.
   Los colores, borde, sombra y resto del diseño se conservan.
   ========================================================== */

[data-theme="light"] .login-card{
    background:rgba(255,255,255,.045);
}

[data-theme="dark"] .login-card{
    background:rgba(19,36,66,.55);
}

.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;
}


/* ==========================================================
   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;
    }

}

/* ==========================================================
   RECUPERACIÓN DE CONTRASEÑA
========================================================== */

.forgot-link-button{
    border:0;
    background:transparent;
    padding:0;
    font:inherit;
    cursor:pointer;
}

.forgot-password-modal{
    position:fixed;
    inset:0;
    z-index:1200;
    display:grid;
    place-items:center;
    padding:1.25rem;
}

.forgot-password-modal[hidden]{display:none;}

.forgot-password-backdrop{
    position:absolute;
    inset:0;
    background:rgba(6,18,34,.55);
    backdrop-filter:blur(7px);
}

.forgot-password-dialog{
    position:relative;
    width:min(460px,100%);
    padding:1.5rem;
    border:1px solid var(--border-light);
    border-radius:20px;
    background:var(--bg-card);
    box-shadow:var(--shadow-lg);
}

.forgot-password-close{
    position:absolute;
    top:.8rem;
    right:.8rem;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border:0;
    border-radius:10px;
    background:transparent;
    color:var(--color-text-muted);
    cursor:pointer;
}

.forgot-password-close:hover{background:var(--bg-hover);color:var(--color-text);}

.forgot-password-icon{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:var(--color-primary-soft);
    color:var(--color-primary);
    font-size:1.2rem;
    margin-bottom:1rem;
}

.forgot-password-dialog h2{
    margin:0;
    color:var(--color-heading);
    font-size:1.2rem;
}

.forgot-password-description{
    margin:.45rem 0 1.1rem;
    color:var(--color-text-secondary);
    font-size:.86rem;
    line-height:1.5;
}

.forgot-password-status{
    min-height:24px;
    margin-top:.75rem;
    display:flex;
    align-items:center;
    gap:.5rem;
    color:var(--color-text-muted);
    font-size:.8rem;
    line-height:1.4;
}

.forgot-password-status.is-success{color:var(--color-success);}
.forgot-password-status.is-error{color:var(--color-danger);}
.forgot-password-status.is-loading{color:var(--color-primary);}

.forgot-password-actions{
    display:flex;
    justify-content:flex-end;
    gap:.65rem;
    margin-top:1rem;
}

.forgot-password-submit{
    min-width:160px;
}

.forgot-password-submit.is-complete{
    background:var(--color-success) !important;
    box-shadow:none !important;
}

body.forgot-password-open{overflow:hidden;}

/* ==========================================================
   RECUPERACIÓN — LOGO DE ASéP
========================================================== */

.forgot-password-logo-wrap{
    width:72px;
    height:72px;
    margin:0 auto 1rem;
    display:grid;
    place-items:center;
    border-radius:18px;
    background:var(--bg-surface);
    border:1px solid var(--border-light);
    box-shadow:var(--shadow-sm);
    overflow:hidden;
}

.forgot-password-logo{
    width:56px;
    height:56px;
    display:block;
    object-fit:contain;
}

.forgot-password-modal{
    z-index:1200;
}

.forgot-password-dialog{
    z-index:1201;
}

.forgot-password-modal[hidden]{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
}

/* ==========================================================
   RECUPERACIÓN — VISUAL DE SEGURIDAD + ACCIÓN
========================================================== */

.forgot-password-security-visual{
    position:relative;
    width:92px;
    height:82px;
    margin:0 auto 1rem;
    display:grid;
    place-items:center;
}

.forgot-security-shield{
    position:relative;
    z-index:3;
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    border-radius:18px;
    background:var(--bg-surface);
    border:1px solid rgba(242,92,42,.20);
    color:var(--color-primary);
    box-shadow:
        0 12px 30px rgba(242,92,42,.12),
        inset 0 0 0 6px rgba(242,92,42,.035);
    font-size:1.6rem;
}

.forgot-security-action{
    position:absolute;
    z-index:4;
    right:4px;
    top:3px;
    width:31px;
    height:31px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:var(--color-primary);
    color:#fff;
    border:3px solid var(--bg-card);
    box-shadow:0 8px 18px rgba(242,92,42,.20);
    font-size:.82rem;
}

.forgot-security-orbit{
    position:absolute;
    border:1px solid rgba(242,92,42,.22);
    border-radius:50%;
}

.orbit-one{
    width:68px;
    height:68px;
}

.orbit-two{
    width:88px;
    height:88px;
    border-style:dashed;
    opacity:.60;
}

.forgot-security-dot{
    position:absolute;
    z-index:4;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--color-primary);
    box-shadow:0 0 0 5px rgba(242,92,42,.07);
}

.dot-one{
    right:0;
    top:13px;
}

.dot-two{
    left:2px;
    bottom:10px;
}

/* ==========================================================
   RECUPERACIÓN — CAMPO DE USUARIO
========================================================== */

.forgot-input-wrapper{
    position:relative;
}

.forgot-input-wrapper .form-control{
    padding-left:2.75rem;
}

.forgot-input-icon{
    position:absolute;
    left:.95rem;
    top:50%;
    transform:translateY(-50%);
    z-index:2;
    color:var(--color-primary);
    pointer-events:none;
    line-height:1;
}

.forgot-input-wrapper:focus-within .forgot-input-icon{
    color:var(--color-primary);
}

.forgot-password-submit{
    min-width:190px;
}

.forgot-password-status.is-loading{
    color:var(--color-primary);
}

.forgot-password-status.is-success{
    color:var(--color-success);
}

.forgot-password-status.is-error{
    color:var(--color-danger);
}