/* ==========================================================
   LOGIN
   Sistema de Gestión de Socios
   Séptima Compañía de Bomberos
   Bootstrap 5 - Responsive
   ========================================================== */

:root {
    --login-yellow: #FFD800;
    --login-yellow-hover: #E8C500;
    --login-black: #050505;
    --login-black-soft: #111111;
    --login-green: #0B8F3C;
    --login-green-dark: #06652B;
    --login-background: #F3F4F6;
    --login-white: #FFFFFF;
    --login-border: #DEE2E6;
    --login-text: #252525;
    --login-muted: #6C757D;
    --login-danger: #DC3545;
}


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

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--login-text);
    background: radial-gradient( circle at 20% 20%, rgba(255, 216, 0, .10), transparent 30% ), radial-gradient( circle at 85% 80%, rgba(11, 143, 60, .08), transparent 30% ), var(--login-background);
}


/* ==========================================================
   CONTENEDOR GENERAL
   ========================================================== */

.login-page {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
}


/* ==========================================================
   CONTENEDOR LOGIN
   ========================================================== */

.wrap-login100 {
    position: relative;
    width: 100%;
    max-width: 450px;
    margin: auto !important;
    padding: 0;
    background: var(--login-white);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 15px 45px rgba(0, 0, 0, .12);
    border: 1px solid rgba(0, 0, 0, .05);
}


    /*
 Línea institucional superior
*/

    .wrap-login100::before {
        content: "";
        display: block;
        width: 100%;
        height: 6px;
        background: linear-gradient( 90deg, var(--login-yellow) 0%, var(--login-yellow) 65%, var(--login-green) 65%, var(--login-green) 100% );
    }


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

.login100-form {
    width: 100%;
    padding: 30px 40px 35px !important;
}


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

    .login100-form .wrap-input100:first-child {
        margin-bottom: 5px;
        border: 0;
        background: transparent;
    }


        .login100-form .wrap-input100:first-child img {
            display: block;
            width: 190px !important;
            max-width: 65%;
            height: auto;
            margin: 0 auto 8px !important;
            padding: 10px !important;
            object-fit: contain;
        }


/* ==========================================================
   NOMBRE DE LA COMPAÑÍA
   ========================================================== */

.login100-company-title {
    text-align: center;
    color: var(--login-black);
    margin-bottom: 24px;
    font-size: 1.35rem;
    line-height: 1.35;
    font-weight: 750;
    letter-spacing: -.01em;
}


    .login100-company-title br + * {
        color: var(--login-green);
    }


/* ==========================================================
   TÍTULO ACTUAL CON TU HTML
   ========================================================== */

.login100-form .wrap-input100:nth-child(2) {
    width: 100%;
    margin-bottom: 22px !important;
    text-align: center !important;
    color: var(--login-black) !important;
    font-size: 1.35rem !important;
    font-weight: 750;
    line-height: 1.35;
}


    /*
   Segunda línea del título
*/

    .login100-form .wrap-input100:nth-child(2)::after {
        content: "";
        display: block;
        width: 45px;
        height: 3px;
        margin: 12px auto 0;
        background: var(--login-yellow);
        border-radius: 5px;
    }


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

.login100-form .wrap-input100 {
    position: relative;
    width: 100%;
    margin-bottom: 14px !important;
    border: 0;
    background: transparent;
}


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

.login100-form .input100 {
    width: 100%;
    min-height: 48px;
    padding: 12px 15px;
    color: var(--login-text);
    background: #FFFFFF;
    border: 1px solid var(--login-border);
    border-radius: 9px;
    outline: none;
    font-size: .9rem;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}


    /* Placeholder */

    .login100-form .input100::placeholder {
        color: #9AA0A6;
        opacity: 1;
    }


    /* Hover */

    .login100-form .input100:hover {
        border-color: #B8BEC5;
    }


    /* Focus */

    .login100-form .input100:focus {
        border-color: var(--login-yellow);
        background: #FFFFFF;
        box-shadow: 0 0 0 3px rgba(255, 216, 0, .18);
    }


/* ==========================================================
   ELIMINAR EFECTOS ANTIGUOS
   ========================================================== */

.login100-form .focus-input100 {
    display: none;
}


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

.container-login100-form-btn {
    width: 100%;
    margin: 8px 0 12px !important;
}


.login100-form-btn {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    color: var(--login-black);
    background: var(--login-yellow);
    border: 1px solid var(--login-yellow);
    border-radius: 9px;
    font-size: .9rem;
    font-weight: 750;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}


    /* Hover */

    .login100-form-btn:hover {
        color: var(--login-black);
        background: var(--login-yellow-hover);
        border-color: var(--login-yellow-hover);
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(255, 216, 0, .25);
    }


    /* Active */

    .login100-form-btn:active {
        transform: translateY(0);
        box-shadow: none;
    }


    /* Focus */

    .login100-form-btn:focus {
        outline: none;
        color: var(--login-black);
        background: var(--login-yellow);
        box-shadow: 0 0 0 3px rgba(255, 216, 0, .25);
    }


/* ==========================================================
   VALIDACIÓN
   ========================================================== */

.login100-form
.field-validation-error {
    display: block;
    margin-top: 5px;
    color: var(--login-danger);
    font-size: .75rem;
    font-weight: 500;
}


.login100-form
.input-validation-error {
    border-color: var(--login-danger) !important;
    background-color: #FFF8F8;
}


/* ==========================================================
   VALIDATION SUMMARY
   ========================================================== */

.login100-form
[data-valmsg-summary="true"] {
    margin-top: 10px;
    padding: 11px 13px;
    color: #842029;
    background: #F8D7DA;
    border: 1px solid #F1AEB5;
    border-radius: 8px;
    font-size: .78rem;
    line-height: 1.4;
}


    .login100-form
    [data-valmsg-summary="true"]:empty {
        display: none;
    }


    .login100-form
    [data-valmsg-summary="true"] ul {
        margin: 0;
        padding-left: 18px;
    }


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

.login100-form .row {
    margin: 12px 0 !important;
}


    .login100-form .row .col-12 {
        margin: 0 !important;
        padding: 0;
    }


    .login100-form .row a {
        display: inline-block;
        color: var(--login-green);
        font-size: .82rem !important;
        font-weight: 600;
        text-decoration: none;
        transition: color .2s ease;
    }


        .login100-form .row a:hover {
            color: var(--login-green-dark);
            text-decoration: underline;
        }


/* ==========================================================
   AUTOFILL CHROME
   ========================================================== */

.login100-form input:-webkit-autofill,
.login100-form input:-webkit-autofill:hover,
.login100-form input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--login-text);
    -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset;
    transition: background-color 5000s ease-in-out 0s;
}


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

@media (max-width: 767.98px) {

    .login-page {
        padding: 25px 16px;
    }


    .wrap-login100 {
        max-width: 430px;
        border-radius: 15px;
    }


    .login100-form {
        padding: 26px 30px 30px !important;
    }


        .login100-form .wrap-input100:nth-child(2) {
            font-size: 1.2rem !important;
        }


        .login100-form .input100 {
            min-height: 47px;
        }


    .login100-form-btn {
        min-height: 47px;
    }
}


/* ==========================================================
   MÓVIL
   ========================================================== */

@media (max-width: 575.98px) {

    .login-page {
        min-height: 100vh;
        padding: 15px 12px;
    }


    .wrap-login100 {
        width: 100%;
        max-width: 100%;
        border-radius: 12px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, .10);
    }


    .login100-form {
        padding: 22px 20px 25px !important;
    }


        .login100-form .wrap-input100:first-child img {
            width: 155px !important;
            max-width: 55%;
        }


        .login100-form .wrap-input100:nth-child(2) {
            margin-bottom: 20px !important;
            font-size: 1.05rem !important;
            line-height: 1.35;
        }


        .login100-form .input100 {
            min-height: 46px;
            padding: 11px 13px;
            font-size: .86rem;
        }


    .login100-form-btn {
        min-height: 46px;
        font-size: .86rem;
    }


    .login100-form .row a {
        font-size: .8rem !important;
    }
}


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

@media (max-width: 375px) {

    .login-page {
        padding: 10px;
    }


    .login100-form {
        padding: 18px 16px 20px !important;
    }


        .login100-form .wrap-input100:first-child img {
            width: 135px !important;
            max-width: 50%;
        }


        .login100-form .wrap-input100:nth-child(2) {
            font-size: .98rem !important;
        }
}