/* =========================================================
   LOGIN - SISTEMA RTO
   ========================================================= */

:root{
    --color-primario: #1E3A5F;
    --color-secundario: #2563EB;

    --color-card: #FFFFFF;
    --color-texto: #1F2937;

    --color-error: #DC2626;

    --color-borde: #D8DEE7;

    --login-radius: 18px;

    --login-shadow:
        0 12px 30px rgba(30,58,95,.14);
}


/* =========================================================
   BODY
   ========================================================= */

.login-body{

    min-height:100vh;

    margin:0;
    padding:20px;

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

    background:
        linear-gradient(
            135deg,
            var(--color-primario),
            var(--color-secundario)
        );

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


/* =========================================================
   WRAPPER
   ========================================================= */

.accounts-auth-wrapper{

    width:100%;

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


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

.accounts-auth-card{

    width:100%;
    max-width:390px;

    background:var(--color-card);

    border-radius:var(--login-radius);

    padding:28px;

    box-shadow:var(--login-shadow);
}


/* =========================================================
   TITULOS
   ========================================================= */

.accounts-auth-card h1{

    font-size:1.45rem;
    font-weight:800;

    color:var(--color-primario);
}

.accounts-auth-card p{

    font-size:.88rem;

    color:#6B7280;
}


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

.accounts-auth-form{
    margin-top:18px;
}


/* =========================================================
   LABELS
   ========================================================= */

.accounts-auth-card .form-label{

    font-size:.88rem;
    font-weight:700;

    color:var(--color-texto);

    margin-bottom:5px;
}


/* =========================================================
   INPUTS
   ========================================================= */

.accounts-input{

    height:46px;

    border-radius:12px;

    border:1px solid var(--color-borde);

    padding:0 14px;

    font-size:.95rem;

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

.accounts-input:focus{

    border-color:var(--color-secundario);

    box-shadow:
        0 0 0 .18rem rgba(37,99,235,.12);
}


/* =========================================================
   MOSTRAR PASSWORD
   ========================================================= */

.accounts-toggle-password{

    font-size:.78rem;
    font-weight:600;

    color:var(--color-secundario) !important;

    text-decoration:none;
}

.accounts-toggle-password:hover{

    color:var(--color-primario) !important;
}


/* =========================================================
   BOTON LOGIN
   ========================================================= */

.accounts-btn-primary{

    height:46px;

    border:none;

    border-radius:12px;

    background:
        linear-gradient(
            135deg,
            var(--color-secundario),
            var(--color-primario)
        );

    color:#fff;

    font-size:.95rem;
    font-weight:700;

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.accounts-btn-primary:hover{

    color:#fff;

    transform:translateY(-1px);

    box-shadow:
        0 8px 18px rgba(37,99,235,.20);
}


/* =========================================================
   LINKS
   ========================================================= */

.accounts-auth-card a{

    color:var(--color-secundario);

    text-decoration:none;

    font-weight:600;
}

.accounts-auth-card a:hover{

    color:var(--color-primario);

    text-decoration:underline;
}


/* =========================================================
   ALERTA
   ========================================================= */

.accounts-auth-card .alert{

    border:none;

    border-radius:10px;

    font-size:.85rem;
}

.accounts-auth-card .alert-danger{

    background:#FEE2E2;

    color:var(--color-error);
}


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

@media (max-width:575.98px){

    .login-body{
        padding:14px;
    }

    .accounts-auth-card{

        max-width:100%;

        padding:24px 18px;
    }

    .accounts-input,
    .accounts-btn-primary{

        height:44px;

        font-size:.92rem;
    }

    .accounts-auth-card h1{
        font-size:1.3rem;
    }
}