/* =========================================================
   SAID
   SISTEMA ADMINISTRATIVO INTEGRADO DE DATOS

   Login
   Identidad visual Soft-Hard Computer
========================================================= */


/* =========================================================
   VARIABLES VISUALES
========================================================= */

:root {

    /* =====================================================
       IDENTIDAD SOFT-HARD COMPUTER
    ===================================================== */

    --colorPrincipal: #373D47;

    --colorPrincipalHover: #2D323A;

    --colorPrincipalActivo: #23272E;


    --colorMarca: #6EB736;

    --colorMarcaHover: #5EA52B;

    --colorMarcaSuave: #F2F8ED;


    /* =====================================================
       SUPERFICIES
    ===================================================== */

    --colorFondo: #F7F8FA;

    --colorSuperficie: #FFFFFF;

    --colorSuperficieHover: #F5F6F7;


    /* =====================================================
       TEXTO
    ===================================================== */

    --colorTexto: #252A31;

    --colorTextoSecundario: #69717D;

    --colorTextoSuave: #9299A3;


    /* =====================================================
       BORDES
    ===================================================== */

    --colorBorde: #E1E4E8;

    --colorBordeHover: #C9CED4;

    --colorBordeFocus: #6EB736;


    /* =====================================================
       ESTADOS
    ===================================================== */

    --colorErrorTexto: #C62828;

    --colorCorrectoTexto: #4F8A27;


    /* =====================================================
       RADIOS
    ===================================================== */

    --radioPequeno: 8px;

    --radioMedio: 12px;

    --radioGrande: 18px;


    /* =====================================================
       SOMBRAS
    ===================================================== */

    --sombraLogin:
        0 24px 60px rgba(55, 61, 71, 0.09),
        0 4px 14px rgba(55, 61, 71, 0.04);


    /* =====================================================
       TRANSICIONES
    ===================================================== */

    --transicionRapida:
        150ms ease;

    --transicionNormal:
        200ms ease;

}


/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {

    box-sizing: border-box;

}


html,
body {

    width: 100%;

    min-height: 100%;

    margin: 0;

    padding: 0;

}


html {

    -webkit-text-size-adjust: 100%;

}


body {

    min-height: 100vh;

    font-family:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(110, 183, 54, 0.05),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 90%,
            rgba(55, 61, 71, 0.06),
            transparent 32%
        ),
        var(--colorFondo);

    color:
        var(--colorTexto);

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;

}


/* =========================================================
   PÁGINA LOGIN
========================================================= */

.loginPagina {

    width: 100%;

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        32px
        20px;

}


/* =========================================================
   CAJA LOGIN
========================================================= */

.loginCaja {

    position: relative;

    width: 100%;

    max-width: 430px;

    padding:
        42px
        42px
        34px;

    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.98);

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

    border-radius:
        var(--radioGrande);

    box-shadow:
        var(--sombraLogin);

    animation:
        aparecerLogin
        350ms
        ease-out;

}


/* Línea corporativa verde */

.loginCaja::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 3px;

    background:
        var(--colorMarca);

}


/* =========================================================
   ANIMACIÓN LOGIN
========================================================= */

@keyframes aparecerLogin {

    from {

        opacity: 0;

        transform:
            translateY(8px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   CABECERA
========================================================= */

.loginCabecera {

    margin-bottom:
        34px;

    text-align:
        center;

}


/* =========================================================
   LOGO SAID
========================================================= */

.logo {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        82px;

    height:
        52px;

    margin-bottom:
        24px;

    padding:
        0
        18px;

    background:
        var(--colorPrincipal);

    color:
        #FFFFFF;

    border-bottom:
        3px solid
        var(--colorMarca);

    border-radius:
        13px;

    font-size:
        24px;

    font-weight:
        800;

    letter-spacing:
        1.5px;

    box-shadow:
        0 8px 20px
        rgba(55, 61, 71, 0.18);

}


/* =========================================================
   TÍTULO
========================================================= */

.loginCabecera h1 {

    margin:
        0
        0
        9px;

    color:
        var(--colorTexto);

    font-size:
        26px;

    font-weight:
        700;

    line-height:
        1.25;

    letter-spacing:
        -0.4px;

}


/* =========================================================
   SUBTÍTULO
========================================================= */

.loginCabecera p {

    max-width:
        310px;

    margin:
        0
        auto;

    color:
        var(--colorTextoSecundario);

    font-size:
        14px;

    line-height:
        1.55;

}


/* =========================================================
   FORMULARIO
========================================================= */

.loginFormulario {

    display:
        flex;

    flex-direction:
        column;

    gap:
        21px;

}


/* =========================================================
   CAMPOS
========================================================= */

.campo {

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

}


/* =========================================================
   LABEL
========================================================= */

.campo label {

    color:
        var(--colorTexto);

    font-size:
        14px;

    font-weight:
        600;

    line-height:
        1.3;

}


/* =========================================================
   INPUT
========================================================= */

.campo input {

    width:
        100%;

    height:
        50px;

    padding:
        0
        15px;

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

    border-radius:
        var(--radioMedio);

    background:
        var(--colorSuperficie);

    color:
        var(--colorTexto);

    font-family:
        inherit;

    font-size:
        15px;

    outline:
        none;

    caret-color:
        var(--colorMarca);

    transition:
        border-color
        var(--transicionNormal),
        box-shadow
        var(--transicionNormal),
        background
        var(--transicionNormal);

}


/* Placeholder */

.campo input::placeholder {

    color:
        var(--colorTextoSuave);

    opacity:
        1;

}


/* Hover */

.campo input:hover {

    border-color:
        #AEB4BB;

}


/* Focus */

.campo input:focus {

    border-color:
        var(--colorMarca);

    box-shadow:
        0 0 0 3px
        rgba(110, 183, 54, 0.14);

}


/* =========================================================
   AUTOCOMPLETE CHROME
========================================================= */

.campo input:-webkit-autofill,
.campo input:-webkit-autofill:hover,
.campo input:-webkit-autofill:focus {

    -webkit-text-fill-color:
        var(--colorTexto);

    -webkit-box-shadow:
        0 0 0 1000px
        #FFFFFF inset;

    transition:
        background-color
        9999s
        ease-in-out
        0s;

}


/* =========================================================
   CONTRASEÑA
========================================================= */

.campoContrasena {

    position:
        relative;

    width:
        100%;

}


.campoContrasena input {

    width:
        100%;

    padding-right:
        56px;

}


/* =========================================================
   BOTÓN OJO
========================================================= */

.botonMostrar {

    position:
        absolute;

    top:
        50%;

    right:
        9px;

    transform:
        translateY(-50%);

    width:
        36px;

    height:
        36px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    border:
        0;

    border-radius:
        var(--radioPequeno);

    background:
        transparent;

    color:
        var(--colorTextoSecundario);

    cursor:
        pointer;

    z-index:
        2;

    transition:
        background
        var(--transicionRapida),
        color
        var(--transicionRapida),
        transform
        var(--transicionRapida);

}


.botonMostrar:hover {

    background:
        var(--colorMarcaSuave);

    color:
        var(--colorMarcaHover);

}


.botonMostrar:active {

    transform:
        translateY(-50%)
        scale(0.94);

}


.botonMostrar:focus {

    outline:
        none;

}


.botonMostrar:focus-visible {

    box-shadow:
        0 0 0 3px
        rgba(110, 183, 54, 0.18);

}


/* SVG generado por Lucide */

.botonMostrar svg {

    display:
        block;

    width:
        20px;

    height:
        20px;

    stroke:
        currentColor;

    stroke-width:
        2;

    pointer-events:
        none;

}


/* =========================================================
   MENSAJES
========================================================= */

.mensaje {

    display:
        none;

    width:
        100%;

    margin-top:
        -3px;

    font-size:
        13px;

    font-weight:
        600;

    line-height:
        1.45;

    text-align:
        center;

    letter-spacing:
        0.1px;

}


/* Error */

.mensaje.error {

    display:
        block;

    color:
        var(--colorErrorTexto);

    animation:
        mostrarMensaje
        180ms
        ease;

}


/* Correcto */

.mensaje.correcto {

    display:
        block;

    color:
        var(--colorCorrectoTexto);

    animation:
        mostrarMensaje
        180ms
        ease;

}


@keyframes mostrarMensaje {

    from {

        opacity:
            0;

        transform:
            translateY(-3px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   BOTÓN ENTRAR
========================================================= */

.botonEntrar {

    position:
        relative;

    width:
        100%;

    height:
        50px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    margin-top:
        1px;

    padding:
        0
        20px;

    border:
        0;

    border-radius:
        var(--radioMedio);

    background:
        var(--colorPrincipal);

    color:
        #FFFFFF;

    font-family:
        inherit;

    font-size:
        15px;

    font-weight:
        650;

    letter-spacing:
        0.1px;

    cursor:
        pointer;

    box-shadow:
        0 4px 12px
        rgba(55, 61, 71, 0.14);

    transition:
        background
        var(--transicionNormal),
        transform
        var(--transicionRapida),
        box-shadow
        var(--transicionNormal),
        opacity
        var(--transicionNormal);

}


.botonEntrar:hover:not(:disabled) {

    background:
        var(--colorPrincipalHover);

    box-shadow:
        0 6px 16px
        rgba(55, 61, 71, 0.18);

    transform:
        translateY(-1px);

}


.botonEntrar:active:not(:disabled) {

    background:
        var(--colorPrincipalActivo);

    box-shadow:
        0 2px 8px
        rgba(55, 61, 71, 0.12);

    transform:
        translateY(0);

}


.botonEntrar:focus {

    outline:
        none;

}


.botonEntrar:focus-visible {

    box-shadow:
        0 0 0 4px
        rgba(110, 183, 54, 0.20);

}


/* =========================================================
   BOTÓN CARGANDO
========================================================= */

.botonEntrar:disabled {

    opacity:
        0.82;

    cursor:
        wait;

    transform:
        none;

    box-shadow:
        none;

}


/* =========================================================
   TEXTO BOTÓN
========================================================= */

.textoBotonEntrar {

    display:
        inline-block;

}


/* =========================================================
   SPINNER
========================================================= */

.spinnerLogin {

    display:
        none;

    width:
        17px;

    height:
        17px;

    border:
        2px solid
        rgba(255, 255, 255, 0.35);

    border-top-color:
        #FFFFFF;

    border-radius:
        50%;

    animation:
        girarSpinner
        700ms
        linear
        infinite;

}


.botonEntrar.cargando .spinnerLogin {

    display:
        inline-block;

}


@keyframes girarSpinner {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


/* =========================================================
   PIE
========================================================= */

.loginPie {

    margin-top:
        34px;

    padding-top:
        24px;

    border-top:
        1px solid
        var(--colorBorde);

    text-align:
        center;

}


.loginPie p {

    margin:
        0
        0
        4px;

    color:
        var(--colorPrincipal);

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        0.2px;

}


.loginPie span {

    color:
        var(--colorTextoSuave);

    font-size:
        11px;

    line-height:
        1.4;

}


/* =========================================================
   SELECCIÓN
========================================================= */

::selection {

    background:
        #DCEBCF;

    color:
        var(--colorPrincipal);

}


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

@media (max-width: 600px) {

    .loginPagina {

        padding:
            20px
            16px;

    }


    .loginCaja {

        max-width:
            100%;

        padding:
            34px
            26px
            28px;

        border-radius:
            16px;

    }


    .logo {

        height:
            48px;

        margin-bottom:
            21px;

        font-size:
            22px;

    }


    .loginCabecera {

        margin-bottom:
            30px;

    }


    .loginCabecera h1 {

        font-size:
            23px;

    }


    .campo input {

        height:
            49px;

        /*
         * 16px evita zoom automático
         * de Safari en iPhone.
         */

        font-size:
            16px;

    }


    .botonEntrar {

        height:
            49px;

    }

}


/* =========================================================
   MÓVILES PEQUEÑOS
========================================================= */

@media (max-width: 380px) {

    .loginPagina {

        padding:
            12px;

    }


    .loginCaja {

        padding:
            30px
            20px
            25px;

    }


    .loginCabecera p {

        font-size:
            13px;

    }

}


/* =========================================================
   PANTALLAS CON POCA ALTURA
========================================================= */

@media (max-height: 650px) {

    .loginPagina {

        align-items:
            flex-start;

        padding-top:
            28px;

        padding-bottom:
            28px;

    }


    .loginCaja {

        padding-top:
            32px;

        padding-bottom:
            26px;

    }


    .loginCabecera {

        margin-bottom:
            25px;

    }


    .logo {

        margin-bottom:
            17px;

    }


    .loginPie {

        margin-top:
            26px;

        padding-top:
            19px;

    }

}


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

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

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

    }

}