@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* =====================================================================
   Pantalla de acceso — diseño tomado del index.php de la intranet
   (segunda versión: fondo con imagen, parallax en la foto, cajas de
   contacto y seguridad en blanco, y los textos legales en paneles
   desplegables en vez de un modal).

   Va en su propio archivo, cargado solo cuando ViewBag.EsLogin es true.
   Son reglas que ninguna otra pantalla usa, y varias (alturas de 100vh,
   body sin margen) estorbarían dentro del portal.

   Las clases conservan los nombres del diseño original —login_card,
   side_ttl, btn_login— para poder cruzarlas contra aquel CSS cuando haya
   que ajustar algo.
   ===================================================================== */

/* ---------- Variables del diseño ---------- */
:root {
    --clr001: #ee762d;   /* naranja de acento */
    --clr002: #00BCD4;   /* aqua */
    --clr003: #ffb606;
    --clr004: #232323;
    --clr005: #2aaef5;
}

/* ---------- Base ----------
   El index.php corre con Open Sans y line-height 1.2. Bootstrap trae 1.5,
   y esa diferencia hacía que cada bloque de texto saliera ~25% más alto.
   Buena parte del diseño nuevo mide en porcentajes, así que el tamaño
   base tiene que ser el de allá o todo sale chico. */
body {
    font-family: "Open Sans", sans-serif;
    line-height: 1.2;
    font-size: clamp(1rem, 2.5vw, 1.3rem);
}

/* Utilitarias del diseño original que usa el marcado. */
.poss { position: relative; }
.upp_ { text-transform: uppercase; }
.fw_900 { font-weight: 900; }
.clr_01 { color: var(--clr001); }
.fs_01_0 { font-size: calc(0.3rem + 1vw); }

/* ---------- Estructura ---------- */
#log_in {
    min-height: 100vh;
    padding: 0;
}

.cont_row_login {
    min-height: 100vh;
}

/* ---------- Panel izquierdo ----------
   OJO con el apilamiento. El diseño original pone aquí z-index:-10 para
   mandar la foto del camión al fondo, pero eso deja la fila pintada por
   DEBAJO de la <section> que la contiene, y como los clics siguen el
   orden de pintado, el formulario se vuelve intocable: no se puede
   escribir el usuario ni pulsar Entrar.

   La foto se manda al fondo levantando el contenido, que es lo mismo a
   la vista y no rompe nada. */
.bg_side_login_ {
    min-height: 100vh;
    background-image: url(../img/bg_00.png);
    background-size: cover;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    position: relative;
}

.bg_side_login {
    min-height: 100vh;
    padding: 2rem 2rem;
}

/*  La foto se sale del panel por la derecha y llega a la zona de la
    tarjeta. Queda debajo del texto (z-index 1) y de la tarjeta (2): solo
    se ve sobre el fondo.

    Las dos variables las mueve el JS del parallax; si el JS no corre
    valen 0 y la imagen se queda quieta en su sitio. */
.img_log {
    position: absolute;
    top: 50%;
    transform:
        translateY(-50%)
        translate3d(var(--parallax-x, 0px), var(--parallax-y, 0px), 0);
    width: 70%;
    right: -20%;
    z-index: 0;

    will-change: transform;
    pointer-events: none;
}

.side_login_content {
    color: #fff;
    position: relative;
    z-index: 1;     /* por encima de la foto */
}

.side_logo {
    width: 210px;
    max-width: 60%;
    margin-bottom: 28px;
}

.side_ttl {
    font-size: 35px;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 12px;
}

.side_ttl strong {
    font-weight: 800;
    letter-spacing: .5px;
    font-size: calc(1rem + 3vw);
}

.side_subttl {
    color: rgba(255,255,255,.75);
    font-size: 15px;
    max-width: 460px;
    margin-bottom: 28px;
}

.side_features_ttl {
    font-size: 85%;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--clr002);
    border-bottom: 2px solid #ff4d1c;
    display: inline-block;
    padding-bottom: 8px;
    margin-bottom: 22px;
}

/*  Media anchura, uno debajo de otro: la mitad derecha se deja libre a
    propósito para que se vea la foto del camión. */
.side_features_list li {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    width: 50%;
}

.side_features_list strong {
    display: block;
    font-size: 80%;
    margin-bottom: 2px;
}

.side_features_list p {
    font-size: 75%;
    margin: 0;
}

.feat_icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--clr002);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.feat_icon_ {
    background: var(--clr001);
}

/* ==========================================
   LOGIN — CONTACTO Y SEGURIDAD
   ========================================== */

.side_contact_box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, .90);
    border: 1px solid rgba(16, 51, 158, .30);
    border-radius: 20px;
    padding: 14px 24px;
    margin-top: 28px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .08);
    backdrop-filter: blur(8px);
}

.side_contact_item {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.contact_icon {
    width: 54px;
    height: 54px;
    min-width: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    color: #fff;
}

.contact_tel { background: #174fc4; }
.contact_wa { background: #19b84a; }
.contact_email { background: #174fc4; }

.contact_data {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.contact_data strong {
    color: #123d8f;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.1;
}

.contact_data a {
    color: #123d8f;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    text-decoration: none;
}

.contact_data a:hover {
    color: var(--clr001);
}

.side_contact_separator {
    width: 1px;
    height: 62px;
    background: rgba(16, 51, 158, .30);
    margin: 0 22px;
}

/* ==========================================
   BLOQUE DE SEGURIDAD
   ========================================== */

.side_secure_box {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 18px;

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

    border: 1px solid rgba(16, 51, 158, .30);
    border-radius: 20px;

    padding: 15px 24px;
    margin: 10px 0 0;

    box-shadow: 0 5px 20px rgba(0, 0, 0, .08);

    backdrop-filter: blur(8px);
}

.secure_icon {
    width: 54px;
    height: 54px;
    min-width: 54px;

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

    background: #174fc4;
    color: #fff;

    clip-path: polygon(
        50% 0%,
        91% 15%,
        91% 53%,
        80% 72%,
        65% 88%,
        50% 100%,
        35% 88%,
        20% 72%,
        9% 53%,
        9% 15%
    );

    font-size: 26px;
}

.side_secure_box strong {
    display: block;

    color: #123d8f;

    font-size: 16px;
    font-weight: 800;

    line-height: 1.2;

    margin-bottom: 3px;
}

.side_secure_box p {
    color: #123d8f;

    font-size: 13px;
    font-weight: 500;

    line-height: 1.3;

    margin: 0;
}

@media (max-width: 575.98px) {

    .side_contact_box {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 16px;
    }

    .side_contact_item {
        width: 100%;
    }

    .side_contact_separator {
        width: 100%;
        height: 1px;
        margin: 0;
    }

    .side_secure_box {
        padding: 15px;
    }

    .side_secure_box p {
        font-size: 12px;
    }
}

/* ---------- Tarjeta de login ---------- */
.login_card {
    /*  Sobre la foto. Sin esto el camión se pinta encima de la tarjeta y
        tapa el aviso de "Al continuar, aceptas…": un elemento posicionado
        le gana a uno que no lo está, aunque venga después. */
    position: relative;
    z-index: 2;

    background: #fff;
    border-radius: 20px;
    box-shadow: 0 0 10px rgb(0 0 0 / 5%);
    padding: 40px 36px;
    width: 100%;
    text-align: center;
}

.login_card:hover {
    box-shadow: 0 0 40px #040d41;
}

.login_logo {
    width: 175px;
    max-width: 70%;
    margin-bottom: 20px;

    /*  En las pantallas de apoyo después del logo va un icono grande; como
        imagen en línea se le pegaba al lado en vez de quedar debajo. */
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.ttl_clr_login {
    font-size: calc(1rem + 2vw);
    line-height: 1;
    text-transform: uppercase;
    font-weight: 900;
    color: #0a1f6b;
}

.ttl_clr_login span {
    color: var(--clr001);
    display: block;
    font-size: 90%;
}

/*  El título del diseño es de dos renglones en mayúsculas ("INICIA SESIÓN
    / Y GANA MÁS") y a calc(1rem + 2vw) llena la tarjeta. Las pantallas de
    apoyo —verificación, recuperar, alta— llevan frases largas en mayúsculas
    y minúsculas, y ahí ese tamaño se sale de la caja. */
.ttl_clr_login_sm {
    font-size: 20px;
    line-height: 1.3;
    text-transform: none;
    font-weight: 700;
    color: #0a1f6b;
}

.subttl_login {
    font-size: 13.5px;
    color: #7a8296;
    margin-bottom: 24px;
}

/* ---------- Formulario ---------- */
.login-form {
    text-align: left;
}

.login-form .form-label {
    font-size: 13px;
    font-weight: 600;
    color: #2a2f45;
}

.input-icon-wrap {
    position: relative;
}

.input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa1b5;
    font-size: 15px;
    z-index: 4;     /* el campo de Bootstrap se pinta encima si no */
}

.login-input {
    height: 46px;
    border-radius: 10px;
    border: 1px solid #e2e5ee;
    font-size: 14px;
}

.login-input:focus {
    border-color: #10339e;
    box-shadow: 0 0 0 3px rgba(16,51,158,.12);
}

/*  El hueco de la izquierda es para el icono, así que solo lo llevan los
    campos que están dentro de un .input-icon-wrap. En el formulario de alta
    la mayoría no tiene icono y ese hueco se veía como un error.

    A la derecha, sitio para el ojo y la equis, que no deben tapar lo que
    se escribe. */
.input-icon-wrap .login-input {
    padding-left: 40px !important;
    padding-right: 42px;
}

.password-toggle-icon,
.input-clear-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #9aa1b5;
    z-index: 4;
}

.input-clear-icon {
    font-size: 13px;
    display: none;      /* aparece solo con texto, desde el JS */
}

.form-row-between {
    font-size: 13px;
}

.custom-checkbox {
    cursor: pointer;
}

.link_forgot {
    color: #10339e;
    font-size: 13px;
    text-decoration: none;
    font-weight: 600;
}

.link_forgot:hover {
    text-decoration: underline;
}

.btn_login {
    width: 100%;
    height: 48px;
    background: #10339e;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 15px;
    transition: background .2s ease;
}

.btn_login:hover,
.btn_login:focus {
    background: #0a1f6b;
    color: #fff;
}

.btn_login:disabled {
    background: #7a8bc9;
}

/* ---------- Formulario de alta ----------
   Son catorce campos: en una tarjeta de 420px se vuelve una tira larguísima.
   Esta se ensancha y los campos van en dos columnas. */
.login_card_ancha {
    max-width: 780px;
    margin: 0 auto;
}

.alta-grupo {
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #7a8296;
    border-bottom: 2px solid #ff4d1c;
    display: inline-block;
    padding-bottom: 5px;
    margin: 14px 0 12px;
}

.alta-fijos {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 12.5px;
    color: #7a8296;
    background: #f4f6fb;
    border-radius: 8px;
    padding: 9px 12px;
    margin-bottom: 4px;
}

.alta-fijos i { color: #10339e; }

/*  El widget de Turnstile mide 300x65 y viene alineado a la izquierda;
    centrado se ve como parte del formulario y no como un pegote. */
.alta-captcha {
    display: flex;
    justify-content: center;
    margin: 6px 0 14px;
}

/* El selector nativo mide distinto que un input; se igualan. */
.form-select.login-input {
    height: 46px;
}

/* ---------- Pie de la tarjeta ---------- */
.divider_o {
    display: flex;
    align-items: center;
    text-align: center;
    color: #b6bbcc;
    font-size: 12px;
    margin: 20px 0;
}

.divider_o::before,
.divider_o::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid #e6e8f0;
}

.divider_o span {
    padding: 0 12px;
}

.btn_request_access {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    height: 48px;
    border: 1.5px solid #10339e;
    color: #10339e;
    border-radius: 10px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: background .2s ease;
}

.btn_request_access:hover {
    background: #eef1fb;
    color: #10339e;
}

/*  El botón del diseño lleva 2.5rem de relleno vertical porque adentro van
    dos renglones. Donde solo dice "Volver al acceso" ese relleno con
    height:48px deja el texto fuera de la caja: esta variante recupera la
    geometría de un botón normal. */
.btn_request_access_simple {
    gap: 8px;
    padding: 0 1rem;
    width: 100%;
}

.help_text {
    font-size: 13px;
    color: #7a8296;
    margin: 20px 0 8px;
}

.help_text a {
    color: #10339e;
    font-weight: 600;
    text-decoration: none;
}

.contact_info {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 12px;
    color: #7a8296;
}

.contact_info i {
    margin-right: 4px;
    color: #10339e;
}

.contact_info a { color: #232323; text-decoration: none; }
.contact_info a:hover { color: var(--clr002); }

.clr_wa { color: #19b84a !important; }

.terms_text {
    text-align: left;
    font-size: 12.5px;
    color: #7a8296;
    margin-top: 14px;
    margin-bottom: 0;
}

.terms_text a {
    color: #10339e;
    text-decoration: underline;
    font-weight: 600;
    cursor: pointer;
}

/* ---------- Pie de página ----------
   Barra oscura debajo del acceso, igual que en el diseño. */
footer {
    background: #181818;
    padding: 20px 0;
    color: #fff;
    position: relative;
}

footer p {
    margin: 0;
}

footer a {
    color: #fff;
}

footer a:hover,
footer a:focus {
    color: var(--clr001);
}

.copy_login {
    text-align: center;
    color: #9aa1b5;
    font-size: 80%;
}

/* Los avisos del servidor —contraseña incorrecta, sesión vencida— dentro
   de la tarjeta, alineados a la izquierda como el resto del formulario. */
.login_aviso {
    text-align: left;
    font-size: 13px;
    border-radius: 10px;
    padding: 10px 12px;
}

.login_aviso ul {
    margin: 0;
    padding-left: 18px;
}

/* ---------- Código de verificación (segundo paso) ---------- */
.codigo_input {
    height: 58px;
    text-align: center;
    letter-spacing: .5rem;
    font-size: 1.7rem;
    font-weight: 700;
    color: #0a1f6b;
    border-radius: 10px;
    border: 1px solid #e2e5ee;
    padding-left: 12px !important;
}

.codigo_input:focus {
    border-color: #10339e;
    box-shadow: 0 0 0 3px rgba(16,51,158,.12);
}

.login_icono_grande {
    font-size: 2.4rem;
    color: #10339e;
}

/* ---------- Paneles legales desplegables ----------
   Sustituyen al modal: se abren con data-bs-toggle="collapse" y tapan la
   pantalla con un velo borroso. Van fuera de la fila del login, que tiene
   z-index negativo, para poder pintarse encima. */
.fade_clps {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.fade_clps.show {
    opacity: 1;
}

.cont_clps {
    position: fixed;
    top: 0;
    padding: 3em;
    backdrop-filter: blur(1rem);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;

    /*  Por encima del acceso. El diseño original no lo necesita porque su
        página no tiene nada más; aquí el layout puede traer otras capas. */
    z-index: 1055;
}

.cont_clps .card {
    width: 100%;
    margin: 0 auto;
}

.cont_clps_card_body {
    max-height: 500px;
    overflow-y: auto;
}

/*  Texto largo para leer: hereda el tamaño base del acceso (hasta 20px) y
    a esa medida se vuelve incómodo. */
.cont_clps {
    font-size: 1rem;
}

.legal_content h2 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: .5rem;
}

.legal_content p,
.legal_content li {
    font-size: .95rem;
    line-height: 1.5;
}

/* ---------- Tableta ---------- */
@media (max-width: 991.98px) {
    /*  Apilado, el alto lo manda el contenido: forzar 100vh en cada uno
        dejaba huecos entre las secciones. */
    #log_in,
    .cont_row_login,
    .bg_side_login_,
    .bg_side_login {
        min-height: auto;
    }

    .bg_side_login {
        padding: 40px 24px;
    }

    /*  La foto se sale de cuadro y ensancha la página en horizontal. */
    #log_in {
        overflow: hidden;
    }
}

/* ---------- Teléfono ---------- */
@media (max-width: 767px) {

    .fs_01_0 {
        font-size: calc(0.65rem + 1vw);
    }

    .login_card {
        padding: 1rem 1rem;
    }

    .side_ttl strong {
        font-size: calc(3rem + 3vw);
    }

    .side_features_list li {
        width: 100%;
    }

    #log_in {
        overflow: hidden;
    }

    .side_logo {
        width: 160px;
        margin-bottom: 28px;
    }

    .img_log {
        position: absolute;
        top: 7%;
        transform: translateY(-50%);
        width: 60%;
        right: -20%;
        z-index: -1;
    }

    /*  El velo con 3em de aire por lado no deja sitio al texto en un
        teléfono. */
    .cont_clps {
        padding: 1rem;
    }

    .cont_clps_card_body {
        max-height: 70vh;
    }
}