:root {
    --azul: #071a2f;
    --azul-2: #0b2744;
    --azul-3: #123b63;

    --rojo: #d71920;
    --rojo-hover: #b9141a;

    --gris: #f3f5f7;
    --gris-texto: #68717c;
    --borde: #dfe4e8;

    --blanco: #ffffff;
    --negro: #111827;

    --dorado: #c9a227;
}


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

.login-container {
    min-height: 100vh;
    display: flex;
    background: var(--gris);
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
}


/* =========================================
   PANEL IZQUIERDO
========================================= */

.login-presentacion {
    position: relative;
    width: 55%;
    min-height: 100vh;

    display: flex;
    align-items: center;

  background: linear-gradient(333deg, rgb(4 17 31 / 22%), rgba(8, 36, 62, .92)), url(/img/fondos/1.jpg);

    background-size: cover;
    background-position: center;

    overflow: hidden;
}


/* Líneas decorativas */

.login-presentacion::before {
    content: "";
    position: absolute;

    width: 500px;
    height: 500px;

    right: -250px;
    bottom: -250px;

    border: 80px solid rgba(255,255,255,.025);

    border-radius: 50%;
}


.login-presentacion::after {
    content: "";
    position: absolute;

    width: 350px;
    height: 350px;

    left: -180px;
    top: -180px;

    border: 60px solid rgba(215,25,32,.08);

    border-radius: 50%;
}


.presentacion-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(4,15,28,.96) 0%,
            rgba(4,15,28,.80) 60%,
            rgba(4,15,28,.55) 100%
        );
}


/* =========================================
   CONTENIDO
========================================= */

.presentacion-contenido {
    position: relative;
    z-index: 2;

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

    padding: 70px 80px;

    color: white;
}


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

.logo-login {
    display: flex;
    align-items: center;
    gap: 14px;

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

    letter-spacing: 3px;
}


.logo-icono {
    width: 48px;
    height: 48px;

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

    background: var(--rojo);

    border-radius: 8px;

    font-size: 25px;

    box-shadow:
        0 8px 20px rgba(215,25,32,.3);
}


.linea-roja {
    width: 70px;
    height: 4px;

    background: var(--rojo);

    margin: 25px 0 14px;

    border-radius: 10px;
}


.subtitulo-transporte {
    font-size: 12px;
    font-weight: 700;

    letter-spacing: 2px;

    color: #c7d0d9;
}


/* =========================================
   TITULO
========================================= */

.presentacion-contenido h1 {
    margin: 20px 0;

    font-size: clamp(38px, 4vw, 58px);

    line-height: 1.08;

    font-weight: 300;

    letter-spacing: -1.5px;
}


.presentacion-contenido h1 strong {
    display: block;

    font-weight: 800;

    color: white;
}


.presentacion-contenido > p {
    max-width: 520px;

    color: #b8c3ce;

    font-size: 16px;

    line-height: 1.7;

    margin-bottom: 40px;
}


/* =========================================
   ICONOS
========================================= */

.presentacion-iconos {
    display: flex;
    gap: 15px;

    margin-top: 30px;
}


.icono-transporte {
    flex: 1;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 16px;

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

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 10px;

    backdrop-filter: blur(8px);

    transition: .25s ease;
}


.icono-transporte:hover {
    transform: translateY(-3px);

    background: rgba(255,255,255,.09);
}


.icono-transporte .icono {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

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

    background: rgba(215,25,32,.15);

    color: #ff4a50;

    border-radius: 8px;

    font-size: 19px;
}


.icono-transporte strong {
    display: block;

    font-size: 13px;

    color: white;

    margin-bottom: 3px;
}


.icono-transporte span {
    display: block;

    color: #8795a4;

    font-size: 11px;
}


/* =========================================
   SERVICIO FEDERAL
========================================= */

.numero-federal {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-top: 40px;

    padding: 10px 15px;

    border-left: 3px solid var(--rojo);

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

    color: #aeb9c4;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


.numero-federal i {
    color: var(--rojo);

    font-size: 16px;
}


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

.login-formulario {
    width: 45%;

    min-height: 100vh;

    display: flex;

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

    background: #f5f6f8;

    padding: 40px;
}


.login-box {
    width: 100%;
    max-width: 440px;

    padding: 45px;

    background: white;

    border-radius: 14px;

    box-shadow:
        0 20px 60px rgba(7,26,47,.10);

    border: 1px solid #e9edf1;
}


/* =========================================
   ICONO PRINCIPAL
========================================= */

.login-icono-principal {
    width: 55px;
    height: 55px;

    display: flex;

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

    margin-bottom: 25px;

    background: var(--azul);

    color: white;

    border-radius: 10px;

    font-size: 24px;

    box-shadow:
        0 8px 20px rgba(7,26,47,.18);
}


/* =========================================
   TITULO LOGIN
========================================= */

.login-titulo span {
    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

    color: var(--rojo);
}


.login-titulo h2 {
    margin: 7px 0 8px;

    color: var(--azul);

    font-size: 30px;

    font-weight: 800;
}


.login-titulo p {
    margin: 0 0 32px;

    color: var(--gris-texto);

    font-size: 14px;

    line-height: 1.6;
}


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

.campo-login {
    margin-bottom: 20px;
}


.campo-login label {
    display: block;

    margin-bottom: 8px;

    color: var(--negro);

    font-size: 13px;

    font-weight: 700;
}


.input-login {
    position: relative;

    display: flex;

    align-items: center;
}


.input-login > i {
    position: absolute;

    left: 16px;

    color: #8a949e;

    font-size: 17px;

    pointer-events: none;
}


.input-login input {
    width: 100%;

    height: 52px;

    padding: 0 48px;

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

    border-radius: 8px;

    background: #fafbfc;

    color: var(--negro);

    font-size: 14px;

    outline: none;

    transition: .2s ease;

    box-sizing: border-box;
}


.input-login input::placeholder {
    color: #a4acb5;
}


.input-login input:focus {
    border-color: var(--azul);

    background: white;

    box-shadow:
        0 0 0 3px rgba(7,26,47,.08);
}


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

.mostrar-password {
    position: absolute;

    right: 8px;

    width: 38px;
    height: 38px;

    border: 0;

    background: transparent;

    color: #7e8994;

    cursor: pointer;

    border-radius: 6px;

    transition: .2s;
}


.mostrar-password:hover {
    background: #f0f2f4;

    color: var(--azul);
}


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

.btn-login {
    width: 100%;

    height: 54px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-top: 10px;

    border: none;

    border-radius: 8px;

    background: var(--rojo);

    color: white;

    font-size: 14px;

    font-weight: 800;

    cursor: pointer;

    transition: .25s ease;

    box-shadow:
        0 8px 20px rgba(215,25,32,.20);
}


.btn-login:hover {
    background: var(--rojo-hover);

    transform: translateY(-1px);

    box-shadow:
        0 12px 25px rgba(215,25,32,.28);
}


.btn-login i {
    font-size: 18px;

    transition: .2s;
}


.btn-login:hover i {
    transform: translateX(4px);
}


/* =========================================
   MENSAJE
========================================= */

.mensaje-login {
    margin-top: 15px;

    font-size: 13px;

    text-align: center;
}


/* =========================================
   SEGURIDAD
========================================= */

.login-seguridad {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin-top: 25px;

    padding-top: 20px;

    border-top: 1px solid #edf0f2;

    color: #8a949e;

    font-size: 11px;

    text-align: center;
}


.login-seguridad i {
    color: #4f8b62;
}


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

.login-footer {
    display: flex;

    justify-content: center;

    gap: 8px;

    margin-top: 25px;

    color: #9aa2aa;

    font-size: 10px;

    letter-spacing: .4px;
}


.separador {
    color: #d2d6da;
}


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

@media (max-width: 1000px) {

    .login-presentacion {
        width: 50%;
    }

    .login-formulario {
        width: 50%;
    }

    .presentacion-contenido {
        padding: 50px;
    }

    .presentacion-iconos {
        flex-direction: column;
    }

}


@media (max-width: 768px) {

    .login-container {
        display: block;
    }

    .login-presentacion {
        width: 100%;

        min-height: auto;

        padding: 50px 0;
    }

    .presentacion-contenido {
        padding: 40px 30px;
    }

    .presentacion-contenido h1 {
        font-size: 38px;
    }

    .presentacion-iconos {
        display: none;
    }

    .numero-federal {
        margin-top: 20px;
    }

    .login-formulario {
        width: 100%;

        min-height: auto;

        padding: 30px 20px;

        box-sizing: border-box;
    }

    .login-box {
        padding: 30px 25px;
    }

}


@media (max-width: 480px) {

    .logo-login {
        font-size: 22px;
    }

    .presentacion-contenido h1 {
        font-size: 32px;
    }

    .login-titulo h2 {
        font-size: 26px;
    }

    .login-box {
        padding: 25px 20px;
    }

}