/*==========================================================
    LOGIN-TERRITORIAL.CSS
    ACCESO AL SEGUIMIENTO TERRITORIAL QRESP
==========================================================*/

:root{
    --lt-primary:#1769E0;
    --lt-primary-dark:#1259BE;
    --lt-primary-light:#EEF5FF;

    --lt-text:#172033;
    --lt-text-soft:#52627A;
    --lt-muted:#7A8799;

    --lt-border:#DCE5F0;
    --lt-bg:#F4F7FB;
    --lt-white:#FFFFFF;

    --lt-success:#22B861;
    --lt-danger:#E5484D;

    --lt-shadow:0 18px 45px rgba(29,55,90,.11);
}

/*==========================================================
    BASE
==========================================================*/

*{
    box-sizing:border-box;
}

html{
    min-height:100%;
}

body{
    margin:0;
    min-height:100vh;

    background:
        radial-gradient(
            circle at top left,
            rgba(23,105,224,.08),
            transparent 35%
        ),
        var(--lt-bg);

    color:var(--lt-text);

    font-family:"Montserrat",sans-serif;
}

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

.territorial-login-page{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;

    width:100%;
    min-height:100vh;

    padding:32px 20px;
}

/*==========================================================
    CARD
==========================================================*/

.territorial-login-card{
    width:min(470px,100%);

    padding:34px;

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

    background:rgba(255,255,255,.97);

    box-shadow:var(--lt-shadow);

    backdrop-filter:blur(10px);
}

/*==========================================================
    BRAND
==========================================================*/

.territorial-login-brand{
    display:flex;
    align-items:center;

    gap:14px;

    margin-bottom:28px;
}

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

    flex:0 0 56px;

    width:56px;
    height:56px;

    border-radius:15px;

    background:var(--lt-primary);

    color:#FFFFFF;

    font-size:1.2rem;

    box-shadow:
        0 10px 22px rgba(23,105,224,.20);
}

.territorial-login-brand-text{
    min-width:0;
}

.territorial-login-brand-text span{
    display:block;

    margin-bottom:3px;

    color:var(--lt-primary);

    font-size:.72rem;

    font-weight:800;

    letter-spacing:.08em;
}

.territorial-login-brand-text h1{
    margin:0;

    color:var(--lt-text);

    font-size:1.16rem;

    line-height:1.2;

    font-weight:800;
}

/*==========================================================
    HEADING
==========================================================*/

.territorial-login-heading{
    margin-bottom:24px;
}

.section-tag{
    display:inline-block;

    margin-bottom:8px;

    color:var(--lt-primary);

    font-size:.68rem;

    font-weight:800;

    letter-spacing:.08em;
}

.territorial-login-heading h2{
    margin:0 0 8px;

    color:var(--lt-text);

    font-size:1.35rem;

    line-height:1.25;

    font-weight:800;
}

.territorial-login-heading p{
    margin:0;

    color:var(--lt-muted);

    font-size:.73rem;

    line-height:1.65;
}

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

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

    gap:17px;
}

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

    gap:7px;
}

.login-field label{
    color:var(--lt-text);

    font-size:.68rem;

    font-weight:700;
}

.login-input-wrapper{
    position:relative;

    display:flex;
    align-items:center;
}

.login-input-wrapper > i{
    position:absolute;
    left:14px;

    color:var(--lt-muted);

    font-size:.8rem;

    pointer-events:none;
}

.login-input-wrapper input{
    width:100%;
    height:50px;

    padding:
        0 46px 0 40px;

    border:1px solid var(--lt-border);

    border-radius:11px;

    outline:none;

    background:#FFFFFF;

    color:var(--lt-text);

    font-size:.74rem;

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

.login-input-wrapper input:hover{
    border-color:#C6D5E6;
}

.login-input-wrapper input:focus{
    border-color:var(--lt-primary);

    background:#FFFFFF;

    box-shadow:
        0 0 0 4px rgba(23,105,224,.07);
}

.login-input-wrapper input::placeholder{
    color:#9AA7B8;
}

/*==========================================================
    PASSWORD TOGGLE
==========================================================*/

.password-toggle{
    position:absolute;
    right:8px;

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

    width:36px;
    height:36px;

    border:0;
    border-radius:8px;

    background:transparent;

    color:var(--lt-muted);

    cursor:pointer;

    transition:
        background .2s ease,
        color .2s ease;
}

.password-toggle:hover{
    background:var(--lt-primary-light);

    color:var(--lt-primary);
}

/*==========================================================
    MESSAGE
==========================================================*/

.territorial-login-message{
    display:flex;
    align-items:flex-start;

    gap:9px;

    padding:12px 13px;

    border:1px solid rgba(229,72,77,.18);

    border-radius:10px;

    background:#FFF5F5;

    color:var(--lt-danger);

    font-size:.65rem;

    line-height:1.5;
}

.territorial-login-message[hidden]{
    display:none;
}

.territorial-login-message i{
    margin-top:2px;

    flex:0 0 auto;
}

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

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

    gap:8px;

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

    margin-top:3px;

    padding:0 18px;

    border:1px solid var(--lt-primary);

    border-radius:11px;

    background:var(--lt-primary);

    color:#ffffff;

    font-size:.78rem;

    font-weight:600;

    cursor:pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.territorial-login-button:hover{
    background:var(--lt-primary-dark);

    border-color:var(--lt-primary-dark);

    transform:translateY(-1px);

    box-shadow:
        0 8px 18px rgba(23,105,224,.16);
}

.territorial-login-button:active{
    transform:translateY(0);
}

.territorial-login-button:disabled{
    opacity:.65;

    cursor:not-allowed;

    transform:none;

    box-shadow:none;
}

/*==========================================================
    SECURITY INFORMATION
==========================================================*/

.territorial-login-security{
    display:flex;
    flex-direction:column;

    gap:8px;

    margin-top:22px;

    padding-top:19px;

    border-top:1px solid #EDF1F6;
}

.security-item{
    display:flex;
    align-items:flex-start;

    gap:9px;
}

.security-item i{
    flex:0 0 auto;

    margin-top:2px;

    color:var(--lt-primary);

    font-size:.74rem;
}

.security-item span{
    color:var(--lt-muted);

    font-size:.62rem;

    line-height:1.5;
}

/*==========================================================
    BACK HOME
==========================================================*/

.territorial-back-home{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:8px;

    width:100%;

    min-height:44px;

    margin-top:20px;

    border:1px solid var(--lt-border);

    border-radius:10px;

    background:#FFFFFF;

    color:var(--lt-text-soft);

    font-size:.7rem;

    font-weight:700;

    text-decoration:none;

    transition:
        border-color .2s ease,
        background .2s ease,
        color .2s ease;
}

.territorial-back-home:hover{
    border-color:var(--lt-primary);

    background:var(--lt-primary-light);

    color:var(--lt-primary);
}

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

.coordinator-login-footer,
.territorial-login-footer{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;

    gap:4px;

    margin-top:20px;

    text-align:center;
}

.territorial-login-footer strong{
    color:var(--lt-primary);

    font-size:.73rem;

    font-weight:800;

    letter-spacing:.06em;
}

.territorial-login-footer span{
    color:var(--lt-muted);

    font-size:.6rem;
}

/*==========================================================
    ESTADOS DE VALIDACIÓN
==========================================================*/

.login-field.error input{
    border-color:var(--lt-danger);

    background:#FFF9F9;

    box-shadow:
        0 0 0 3px rgba(229,72,77,.06);
}

.login-field.success input{
    border-color:var(--lt-success);

    box-shadow:
        0 0 0 3px rgba(34,184,97,.06);
}

/*==========================================================
    RESPONSIVE | 600
==========================================================*/

@media (max-width:600px){

    .territorial-login-page{
        padding:20px 14px;
    }

    .territorial-login-card{
        padding:27px 22px;

        border-radius:18px;
    }

    .territorial-login-heading h2{
        font-size:1.18rem;
    }

}

/*==========================================================
    RESPONSIVE | 420
==========================================================*/

@media (max-width:420px){

    .territorial-login-card{
        padding:23px 17px;
    }

    .territorial-login-brand{
        gap:11px;
    }

    .territorial-login-icon{
        width:48px;
        height:48px;

        flex-basis:48px;

        border-radius:13px;

        font-size:1rem;
    }

    .territorial-login-brand-text h1{
        font-size:1rem;
    }

    .territorial-login-heading h2{
        font-size:1.08rem;
    }

    .territorial-login-heading p{
        font-size:.68rem;
    }

}

/*==========================================================
    ACCESIBILIDAD
==========================================================*/

button:focus-visible,
a:focus-visible,
input:focus-visible{
    outline:3px solid rgba(23,105,224,.22);

    outline-offset:2px;
}

/*==========================================================
    AJUSTE UX
    TIPOGRAFÍA PARA CELULAR Y TABLET
==========================================================*/

/*----------------------------------------------------------
    ENCABEZADO
----------------------------------------------------------*/

.territorial-login-heading h2{
    font-size:1.45rem;
    line-height:1.3;
}

.territorial-login-heading p{
    font-size:.82rem;
    line-height:1.65;
}


/*----------------------------------------------------------
    ETIQUETA DE ACCESO
----------------------------------------------------------*/

.section-tag{
    font-size:.76rem;
}


/*----------------------------------------------------------
    LABELS
----------------------------------------------------------*/

.login-field label{
    font-size:.82rem;
    line-height:1.4;
}


/*----------------------------------------------------------
    CAMPOS
----------------------------------------------------------*/

.login-input-wrapper input{
    font-size:.90rem;
}


/*----------------------------------------------------------
    BOTÓN
----------------------------------------------------------*/

.territorial-login-button{
    font-size:.86rem;
}


/*----------------------------------------------------------
    MENSAJE
----------------------------------------------------------*/

.territorial-login-message{
    font-size:.73rem;
    line-height:1.55;
}


/*----------------------------------------------------------
    INFORMACIÓN DE SEGURIDAD
----------------------------------------------------------*/

.security-item span{
    color:#646464;
    font-size:.70rem;
    line-height:1.55;
}


/*----------------------------------------------------------
    VOLVER
----------------------------------------------------------*/

.territorial-back-home{
    font-size:.76rem;
}


/*==========================================================
    TABLET
==========================================================*/

@media (max-width:700px){

    .territorial-login-heading h2{
        font-size:1.40rem;
    }

    .territorial-login-heading p{
        font-size:.84rem;
    }

    .login-field label{
        font-size:.84rem;
    }

    .login-input-wrapper input{
        font-size:16px;
    }

    .territorial-login-button{
        font-size:.90rem;
    }

    .territorial-login-message{
        font-size:.76rem;
    }

    .security-item span{
        font-size:.74rem;
    }

    .territorial-back-home{
        font-size:.80rem;
    }

}


/*==========================================================
    CELULAR
==========================================================*/

@media (max-width:520px){

    .territorial-login-heading h2{
        font-size:1.30rem;
    }

    .territorial-login-heading p{
        font-size:.84rem;
    }

    .login-field label{
        font-size:.84rem;
    }

    .login-input-wrapper input{
        height:52px;
        font-size:16px;
    }

    .territorial-login-button{
        min-height:52px;
        font-size:.92rem;
    }

    .territorial-login-message{
        padding:13px 14px;
        font-size:.76rem;
    }

    .security-item span{
        font-size:.74rem;
    }

    .territorial-back-home{
        min-height:46px;
        font-size:.80rem;
    }

}