/* =========================
  Solo estilos del login.
  Aquí van clases como:
========================= */

:root{
    --ts-blue: #12345A;
    --ts-blue-light: #1D4F91;
    --ts-gold: #F6C343;
    --ts-gold-soft: #DFAE2F;
    --ts-dark: #0B1324;
    --ts-dark-2: #10233D;
    --ts-white: #FFFFFF;
    --ts-gray: #CBD5E1;
    --ts-bg: #F5F7FB;
    --ts-border: rgba(255,255,255,.12);
    --ts-shadow: 0 20px 50px rgba(0,0,0,.28);
}

/* LOGIN THE SOLUTION */
body.login-ts{
    margin: 0;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background:
        radial-gradient(circle at top left, rgba(212,166,42,.15), transparent 25%),
        radial-gradient(circle at bottom right, rgba(30,90,168,.25), transparent 30%),
        linear-gradient(135deg, #0b1220 0%, #111827 45%, #0f172a 100%);
    color: var(--ts-white);
    min-height: 100vh;
}

.login-wrapper{
    min-height: 100vh;
}

.login-side-brand{
    position: relative;
    background:
        linear-gradient(160deg, rgba(18,60,115,.95), rgba(15,23,42,.92)),
        url("../images/login-bg.jpg") center/cover no-repeat;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    padding: 60px;
}

.brand-overlay{
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(15,23,42,.2), rgba(15,23,42,.75)),
        radial-gradient(circle at top right, rgba(242,193,78,.18), transparent 25%);
    backdrop-filter: blur(1px);
}

.brand-content{
    position: relative;
    z-index: 2;
    max-width: 520px;
}

.brand-logo-wrap{
    margin-bottom: 25px;
}

.brand-logo{
    width: 110px;
    max-width: 100%;
    filter: drop-shadow(0 10px 25px rgba(0,0,0,.3));
}

.brand-badge{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: var(--ts-gold-soft);
    padding: 8px 14px;
    border-radius: 50px;
    font-size: .9rem;
    margin-bottom: 20px;
}

.brand-title{
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 10px;
    line-height: 1.1;
    letter-spacing: .5px;
}

.brand-subtitle{
    font-size: 1.2rem;
    color: var(--ts-gold-soft);
    margin-bottom: 20px;
    font-weight: 500;
}

.brand-divider{
    width: 90px;
    height: 4px;
    border-radius: 20px;
    background: linear-gradient(to right, var(--ts-gold), var(--ts-gold-soft));
    margin-bottom: 24px;
}

.brand-text{
    font-size: 1rem;
    color: rgba(255,255,255,.85);
    line-height: 1.8;
    margin-bottom: 30px;
}

.brand-features{
    display: grid;
    gap: 14px;
}

.brand-feature{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(6px);
}

.brand-feature i{
    color: var(--ts-gold-soft);
    font-size: 1rem;
}

/* PANEL DERECHO */
.login-side-form{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 18px;
    background: transparent;
}

.login-form-box{
    width: 100%;
    max-width: 460px;
    background: rgba(255,255,255,.08);
    border: 1px solid var(--ts-border);
    backdrop-filter: blur(14px);
    border-radius: 26px;
    box-shadow: var(--ts-shadow);
    padding: 38px 28px;
}

.login-mobile-logo{
    width: 90px;
    margin-bottom: 16px;
}

.login-title{
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--ts-white);
}

.login-subtitle{
    color: var(--ts-gray);
    margin-bottom: 0;
}

.form-label{
    color: var(--ts-white);
    font-weight: 600;
    margin-bottom: 8px;
}

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

.input-icon{
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ts-gold);
    z-index: 5;
}

.input-icon-group .input-ts{
    padding-left: 44px;
}

.input-ts,
.input-ts:focus{
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: var(--ts-white);
    box-shadow: none;
}

.input-ts::placeholder{
    color: rgba(255,255,255,.45);
}

.input-ts:focus{
    border-color: var(--ts-gold);
    background: rgba(255,255,255,.1);
}

.input-ts-icon{
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: var(--ts-gold);
}

.input-password-group .form-control{
    border-left: 0;
    border-right: 0;
}

.btn-toggle-pass{
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: var(--ts-gold);
}

.btn-toggle-pass:hover{
    background: rgba(212,166,42,.12);
    color: var(--ts-gold-soft);
}

.form-check-input{
    background-color: transparent;
    border-color: rgba(255,255,255,.35);
}

.form-check-input:checked{
    background-color: var(--ts-gold);
    border-color: var(--ts-gold);
}

.form-check-label,
.login-link{
    color: var(--ts-gray);
}

.login-link{
    text-decoration: none;
    transition: .3s ease;
}

.login-link:hover{
    color: var(--ts-gold-soft);
}

.btn-ts-primary{
    background: linear-gradient(135deg, var(--ts-blue), var(--ts-dark-2));
    border: none;
    color: #fff;
    font-weight: 800;
    border-radius: 14px;
    padding: 14px 20px;
    transition: all .3s ease;
    box-shadow: 0 10px 25px rgba(18,52,90,.25);
}

.btn-ts-primary:hover{
    transform: translateY(-2px);
    background: linear-gradient(135deg, var(--ts-dark), var(--ts-blue));
    box-shadow: 0 15px 35px rgba(18,52,90,.35);
    color: #fff;
}

.login-footer-note{
    color: rgba(255,255,255,.55);
}

/* RESPONSIVE */
@media (max-width: 991.98px){
    .login-side-form{
        min-height: 100vh;
        padding: 22px 14px;
    }

    .login-form-box{
        max-width: 100%;
        border-radius: 22px;
        padding: 28px 20px;
    }

    .login-title{
        font-size: 1.7rem;
    }

    .login-subtitle{
        font-size: .95rem;
    }
}

@media (max-width: 575.98px){
    .login-form-box{
        padding: 24px 16px;
        border-radius: 18px;
    }

    .login-title{
        font-size: 1.5rem;
    }

    .form-control-lg,
    .input-group-lg > .form-control,
    .input-group-lg > .btn,
    .input-group-lg > .input-group-text{
        font-size: 1rem;
        padding-top: .85rem;
        padding-bottom: .85rem;
    }

    .btn-ts-primary{
        padding: 12px 16px;
        font-size: 1rem;
    }
}




@media (max-width: 991.98px){
    body.login-ts{
        background: linear-gradient(135deg, var(--ts-dark), var(--ts-dark-2));
    }

    .login-side-form{
        min-height: 100vh;
        padding: 22px 14px;
    }

    .login-form-box{
        max-width: 100%;
        border-radius: 22px;
        padding: 28px 20px;
    }

    .login-title{
        font-size: 1.7rem;
    }
}

@media (max-width: 575.98px){
    .login-form-box{
        padding: 24px 16px;
        border-radius: 18px;
    }

    .login-title{
        font-size: 1.55rem;
    }

    .btn-ts-primary{
        padding: 13px 16px;
        font-size: 1rem;
    }
}




.auth-premium-section {
    background:
        radial-gradient(circle at top left, rgba(246,195,67,.14), transparent 28%),
        linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
    padding: 44px 0 70px;
    min-height: calc(100vh - 80px);
}

.auth-premium-card {
    max-width: 1120px;
    margin: auto;
    background: var(--ts-white);
    border-radius: 28px;
    overflow: hidden;
    display: grid;
    grid-template-columns: .95fr 1fr;
    box-shadow: 0 22px 55px rgba(15,23,42,.12);
    border: 1px solid #e2e8f0;
}

.auth-register-layout {
    grid-template-columns: .75fr 1.25fr;
}

.auth-premium-brand {
    position: relative;
    min-height: 540px;
    background:
        radial-gradient(circle at bottom right, rgba(246,195,67,.22), transparent 35%),
        linear-gradient(145deg, var(--ts-dark), var(--ts-blue));
    color: var(--ts-white);
    padding: 48px;
    display: flex;
    align-items: center;
}

.auth-brand-content {
    position: relative;
    z-index: 2;
}

.auth-brand-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    color: var(--ts-gold);
    padding: 9px 14px;
    border-radius: 999px;
    font-weight: 800;
    margin-bottom: 22px;
}

.auth-brand-content h1 {
    font-size: 42px;
    line-height: 1.08;
    font-weight: 950;
    margin-bottom: 18px;
}

.auth-brand-content h1 span {
    color: var(--ts-gold);
}

.auth-brand-content p {
    color: rgba(255,255,255,.82);
    font-size: 17px;
    line-height: 1.7;
    margin-bottom: 28px;
}

.auth-brand-features {
    display: grid;
    gap: 12px;
}

.auth-brand-features div {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    padding: 13px 15px;
    font-weight: 750;
    display: flex;
    align-items: center;
    gap: 10px;
}

.auth-brand-features i {
    color: var(--ts-gold);
}

.auth-premium-form {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 42px;
}

.auth-form-box {
    width: 100%;
    max-width: 430px;
}

.auth-form-box-lg {
    max-width: 720px;
}

.auth-form-box h3 {
    font-size: 31px;
    font-weight: 950;
    color: var(--ts-text);
    margin-bottom: 8px;
}

.auth-form-box p {
    color: var(--ts-text-muted);
    margin-bottom: 24px;
}

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

.auth-input-icon i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ts-blue);
    z-index: 3;
}

.auth-input-icon .form-control {
    padding-left: 44px;
    min-height: 46px;
    border-radius: 13px;
    border: 1px solid #dbe3ef;
    font-weight: 650;
}

.auth-input-icon .form-control:focus {
    border-color: var(--ts-gold);
    box-shadow: 0 0 0 .2rem rgba(246,195,67,.18);
}

.auth-main-btn {
    min-height: 48px;
    background: var(--ts-blue);
    color: var(--ts-white);
    border-radius: 14px;
    font-weight: 900;
}

.auth-main-btn:hover {
    background: var(--ts-dark);
    color: var(--ts-white);
}

.auth-form-box a {
    color: var(--ts-blue);
    font-weight: 850;
    text-decoration: none;
}

.auth-form-box a:hover {
    color: var(--ts-gold);
}

@media (max-width: 991px) {
    .auth-premium-section {
        padding: 22px 0 96px;
    }

    .auth-premium-card,
    .auth-register-layout {
        grid-template-columns: 1fr;
        border-radius: 24px;
    }

    .auth-premium-brand {
        min-height: auto;
        padding: 32px 24px;
    }

    .auth-brand-content h1 {
        font-size: 30px;
    }

    .auth-premium-form {
        padding: 28px 22px;
    }
}

@media (max-width: 575px) {
    .auth-premium-section {
        padding: 14px 0 92px;
    }

    .auth-premium-card {
        border-radius: 22px;
    }

    .auth-premium-brand {
        padding: 28px 20px;
    }

    .auth-brand-content h1 {
        font-size: 27px;
    }

    .auth-brand-content p {
        font-size: 15px;
    }

    .auth-brand-features div {
        font-size: 14px;
    }

    .auth-premium-form {
        padding: 24px 18px;
    }

    .auth-form-box h3 {
        font-size: 25px;
    }
}







/* =========================================================
   REGISTRO RENTGOPERU
========================================================= */

.auth-register-layout {
    display: grid;
    grid-template-columns: 34% 66%;
    overflow: hidden;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 20px 55px rgba(15, 35, 65, .10);
}


/* =========================================================
   PARTE DERECHA
========================================================= */

.auth-register-layout .auth-premium-form {
    padding: 32px 38px;
}

.auth-register-layout .auth-form-box {
    width: 100%;
    max-width: none;
}


/* =========================================================
   CABECERA CREAR CUENTA
========================================================= */

.auth-register-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.auth-register-heading-icon {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #eaf2ff;
    color: #155fd1;

    font-size: 22px;
}

.auth-register-heading h3 {
    margin: 0;
    color: #10213e;
    font-size: 27px;
    font-weight: 900;
}

.auth-register-heading p {
    margin: 5px 0 0;
    color: #68778e;
    font-size: 13px;
    line-height: 1.45;
}


/* =========================================================
   SECCIONES
========================================================= */

.auth-register-section {
    margin-bottom: 24px;
}

.auth-register-section > h5 {
    margin: 0 0 12px;

    color: #17243b;

    font-size: 14px;
    font-weight: 900;
}


/* =========================================================
   LOS 4 TIPOS DE USUARIO
========================================================= */

.auth-user-type-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.auth-user-type-card {
    position: relative;

    min-height: 185px;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 15px 11px 13px;

    border: 1.5px solid #d6dfeb;
    border-radius: 12px;

    background: #ffffff;

    text-align: center;

    cursor: pointer;

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

.auth-user-type-card:hover {
    border-color: #75a8f7;
    transform: translateY(-2px);

    box-shadow:
        0 9px 24px
        rgba(20, 90, 190, .09);
}

.auth-user-type-card.active {
    border-color: #1769ed;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f4f8ff 100%
        );

    box-shadow:
        0 0 0 1px
        rgba(23, 105, 237, .06);
}


/* RADIO ORIGINAL */

.auth-user-type-card > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}


/* RADIO VISUAL */

.auth-user-type-radio {
    position: absolute;

    top: 11px;
    left: 11px;

    width: 18px;
    height: 18px;

    border: 1.5px solid #b8c5d6;
    border-radius: 50%;

    background: #ffffff;
}

.auth-user-type-card.active
.auth-user-type-radio {
    border: 5px solid #1769ed;
}


/* =========================================================
   ICONOS DE TIPO
========================================================= */

.auth-user-type-icon {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    margin: 10px 0 11px;

    border-radius: 50%;

    font-size: 24px;
}

.type-taxista {
    background: #fff3ce;
    color: #d89b00;
}

.type-turista {
    background: #e5faeb;
    color: #15943c;
}

.type-propietario {
    background: #e8f2ff;
    color: #145ac5;
}

.type-empresa {
    background: #f2eaff;
    color: #7b2bc3;
}


/* TEXTO DE TARJETAS */

.auth-user-type-card strong {
    display: block;

    margin-bottom: 7px;

    color: #17243b;

    font-size: 14px;
    font-weight: 900;
}

.auth-user-type-card[data-tipo="taxista"] strong {
    color: #1769ed;
}

.auth-user-type-card[data-tipo="turista"] strong {
    color: #15943c;
}

.auth-user-type-card[data-tipo="propietario"] strong {
    color: #145ac5;
}

.auth-user-type-card[data-tipo="empresa"] strong {
    color: #7426b5;
}

.auth-user-type-card small {
    display: block;

    color: #44526a;

    font-size: 11px;
    line-height: 1.45;
}


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

.auth-register-layout .form-label {
    margin-bottom: 6px;

    color: #16233a;

    font-size: 12px;
    font-weight: 800;
}


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

.auth-register-layout .auth-input-icon {
    position: relative;
}

.auth-register-layout
.auth-input-icon > i {
    position: absolute;

    top: 50%;
    left: 14px;

    z-index: 2;

    transform: translateY(-50%);

    color: #53657f;

    font-size: 13px;
}

.auth-register-layout
.auth-input-icon .form-control {
    width: 100%;
    min-height: 44px;

    padding-left: 42px;

    border: 1px solid #ccd7e5;
    border-radius: 9px;

    background: #ffffff;

    color: #18263d;

    font-size: 12px;

    box-shadow: none;
}

.auth-register-layout
.auth-input-icon .form-control:focus {
    border-color: #3b82f6;

    box-shadow:
        0 0 0 3px
        rgba(59, 130, 246, .10);
}

.auth-register-layout
.auth-input-icon .form-control::placeholder {
    color: #8c99aa;
}


/* =========================================================
   AYUDA TELÉFONO
========================================================= */

.auth-field-help {
    display: block;

    margin-top: 5px;

    color: #738198;

    font-size: 10px;
}


/* =========================================================
   FOTO PERFIL
========================================================= */

.auth-photo-upload {
    width: 100%;
    min-height: 88px;

    display: flex;
    align-items: center;
    gap: 14px;

    padding: 11px 15px;

    border: 1.5px dashed #b9c8da;
    border-radius: 10px;

    background: #fbfdff;

    cursor: pointer;

    transition:
        border-color .18s ease,
        background-color .18s ease;
}

.auth-photo-upload:hover {
    border-color: #2776eb;
    background: #f5f9ff;
}

.auth-photo-preview {
    width: 56px;
    height: 56px;

    flex: 0 0 56px;

    display: grid;
    place-items: center;

    overflow: hidden;

    border-radius: 50%;

    background: #eaf2ff;

    color: #145ac5;

    font-size: 21px;
}

.auth-photo-preview img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.auth-photo-text strong {
    display: block;

    color: #25344c;

    font-size: 12px;
    font-weight: 800;
}

.auth-photo-text small {
    display: block;

    margin-top: 3px;

    color: #77859a;

    font-size: 10px;
}


/* =========================================================
   EMPRESA
========================================================= */

.auth-company-box {
    padding: 17px;

    border: 1px solid #e1d5f5;
    border-radius: 12px;

    background:
        linear-gradient(
            180deg,
            #fcfaff,
            #ffffff
        );
}


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

.auth-password-toggle {
    position: absolute;

    top: 50%;
    right: 10px;

    z-index: 3;

    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    transform: translateY(-50%);

    border: 0;

    background: transparent;

    color: #67768d;

    cursor: pointer;
}

.auth-password-toggle:hover {
    color: #1769ed;
}

.auth-input-icon:has(.auth-password-toggle)
.form-control {
    padding-right: 48px;
}


/* =========================================================
   TÉRMINOS
========================================================= */

.auth-register-terms {
    display: flex;
    align-items: center;
    gap: 8px;

    margin: 6px 0 17px;

    padding: 10px 12px;

    border: 1px solid #c9ddfa;
    border-radius: 8px;

    background: #f4f8ff;

    color: #53647d;

    font-size: 10px;
    line-height: 1.4;
}

.auth-register-terms > i {
    color: #1769ed;
    font-size: 14px;
}

.auth-register-terms a {
    color: #1769ed;
    font-weight: 700;
    text-decoration: none;
}


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

.auth-register-layout .auth-main-btn {
    min-height: 46px;

    border: 0;
    border-radius: 9px;

    background:
        linear-gradient(
            90deg,
            #1459d7,
            #0868ec
        );

    color: #ffffff;

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

    box-shadow:
        0 7px 16px
        rgba(20, 89, 215, .16);
}

.auth-register-layout
.auth-main-btn:hover {
    color: #ffffff;

    transform: translateY(-1px);
}


/* =========================================================
   INICIAR SESIÓN
========================================================= */

.auth-register-login {
    margin-top: 15px;

    color: #34445d;

    font-size: 12px;

    text-align: center;
}

.auth-register-login a {
    color: #1769ed;

    font-weight: 900;

    text-decoration: none;
}


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

@media (max-width: 1199px) {

    .auth-register-layout {
        grid-template-columns: 30% 70%;
    }

    .auth-register-layout
    .auth-premium-form {
        padding: 28px 25px;
    }

    .auth-user-type-grid {
        gap: 8px;
    }
}


@media (max-width: 991px) {

    .auth-register-layout {
        display: block;
    }

    .auth-register-layout
    .auth-premium-brand {
        display: none;
    }

    .auth-user-type-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 576px) {

    .auth-register-layout
    .auth-premium-form {
        padding: 21px 14px;
    }

    .auth-register-heading h3 {
        font-size: 22px;
    }

    .auth-user-type-grid {
        grid-template-columns: 1fr 1fr;
        gap: 7px;
    }

    .auth-user-type-card {
        min-height: 170px;
        padding: 12px 7px;
    }

    .auth-user-type-icon {
        width: 48px;
        height: 48px;

        font-size: 20px;
    }

    .auth-user-type-card small {
        font-size: 10px;
    }

}



/* =========================================================
   BOTÓN PRINCIPAL - COLOR DEL SISTEMA
========================================================= */

.auth-register-layout .auth-main-btn {
    min-height: 46px;

    border: 1px solid #174a86;
    border-radius: 9px;

    background: #174a86;

    color: #ffffff;

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

    box-shadow:
        0 7px 16px
        rgba(23, 74, 134, .18);

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

.auth-register-layout .auth-main-btn:hover {
    background: #123e73;
    border-color: #123e73;
    color: #ffffff;

    transform: translateY(-1px);

    box-shadow:
        0 9px 20px
        rgba(23, 74, 134, .24);
}

.auth-register-layout .auth-main-btn:focus,
.auth-register-layout .auth-main-btn:active {
    background: #103866 !important;
    border-color: #103866 !important;
    color: #ffffff !important;
}




/* =========================================================
   LOGIN FRONTEND - USUARIO IDENTIFICADO
========================================================= */

.auth-login-box {
    width: 100%;
}


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

.auth-login-heading {
    text-align: center;
    margin-bottom: 25px;
}

.auth-login-heading-icon {
    width: 68px;
    height: 68px;

    display: grid;
    place-items: center;

    margin: 0 auto 13px;

    border-radius: 50%;

    background: #eaf2ff;
    color: #174a86;

    font-size: 27px;
}

.auth-login-heading h3 {
    margin: 0;

    color: #10213e;

    font-size: 27px;
    font-weight: 900;
}

.auth-login-heading p {
    max-width: 390px;

    margin: 7px auto 0;

    color: #6a7890;

    font-size: 13px;
    line-height: 1.5;
}


/* =========================================================
   ESTADO CORREO
========================================================= */

.auth-login-email-status {
    min-height: 19px;

    display: flex;
    align-items: center;
    gap: 5px;

    margin-top: 5px;

    font-size: 10px;
}

.auth-login-email-status.status-loading {
    color: #64748b;
}

.auth-login-email-status.status-success {
    color: #16934a;
}

.auth-login-email-status.status-error {
    color: #dc3545;
}


/* =========================================================
   USUARIO
========================================================= */

.auth-login-user-card {
    display: flex;
    align-items: center;
    gap: 14px;

    margin: 8px 0 19px;

    padding: 14px;

    border: 1px solid #d7e3f1;
    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #f7faff,
            #ffffff
        );

    box-shadow:
        0 7px 20px
        rgba(25, 67, 115, .06);
}


/* FOTO */

.auth-login-user-photo {
    width: 64px;
    height: 64px;

    flex: 0 0 64px;

    overflow: hidden;

    border: 3px solid #ffffff;
    border-radius: 50%;

    background: #eaf2ff;

    box-shadow:
        0 3px 12px
        rgba(20, 65, 115, .13);
}

.auth-login-user-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* DATOS */

.auth-login-user-data {
    min-width: 0;
}

.auth-login-welcome {
    display: block;

    margin-bottom: 2px;

    color: #75849a;

    font-size: 10px;
    font-weight: 700;
}

.auth-login-user-data > strong {
    display: block;

    overflow: hidden;

    color: #13243e;

    font-size: 15px;
    font-weight: 900;

    white-space: nowrap;
    text-overflow: ellipsis;
}


/* META */

.auth-login-user-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;

    margin-top: 7px;
}

.auth-login-user-type,
.auth-login-member {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 5px 8px;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 800;
}


/* TIPO */

.auth-login-user-type {
    background: #eaf2ff;
    color: #174a86;
}

.auth-login-user-type.type-taxista {
    background: #fff3d1;
    color: #b77c00;
}

.auth-login-user-type.type-turista {
    background: #e7f8ec;
    color: #138a3a;
}

.auth-login-user-type.type-propietario {
    background: #e8f1ff;
    color: #155bb4;
}

.auth-login-user-type.type-empresa {
    background: #f2eaff;
    color: #7327ae;
}


/* FECHA */

.auth-login-member {
    background: #f1f5f9;
    color: #66768d;
}


/* =========================================================
   OPCIONES
========================================================= */

.auth-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin: 5px 0 17px;
}

.auth-remember {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #485971;

    font-size: 11px;

    cursor: pointer;
}

.auth-remember input {
    accent-color: #174a86;
}

.auth-forgot-link {
    color: #174a86;

    font-size: 11px;
    font-weight: 700;

    text-decoration: none;
}

.auth-forgot-link:hover {
    text-decoration: underline;
}


/* =========================================================
   BOTÓN INGRESAR - COLOR SISTEMA
========================================================= */

.auth-login-submit {
    min-height: 46px !important;

    border: 1px solid #174a86 !important;

    background: #174a86 !important;

    color: #ffffff !important;

    font-size: 13px !important;
    font-weight: 900 !important;

    box-shadow:
        0 7px 18px
        rgba(23, 74, 134, .19) !important;
}

.auth-login-submit:hover {
    border-color: #123e73 !important;

    background: #123e73 !important;

    color: #ffffff !important;
}


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

.auth-login-security {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    margin-top: 38px;

    color: #65758e;

    font-size: 11px;
}

.auth-login-security i {
    color: #174a86;

    font-size: 15px;
}



/* =========================================================
   LOGIN - ESTADO INICIAL MÁS ELEGANTE
========================================================= */

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

    margin: 0 auto;

    padding: 12px 8px 0;
}


/* CABECERA */

.auth-login-heading {
    margin-bottom: 30px;
    text-align: center;
}

.auth-login-heading-icon {
    width: 66px;
    height: 66px;

    display: grid;
    place-items: center;

    margin: 0 auto 14px;

    border-radius: 50%;

    background: #eaf2ff;
    color: #174a86;

    font-size: 25px;
}

.auth-login-heading h3 {
    margin: 0;

    color: #10213e;

    font-size: 28px;
    font-weight: 900;
}

.auth-login-heading p {
    max-width: 360px;

    margin: 7px auto 0;

    color: #6b7b91;

    font-size: 13px;
    line-height: 1.45;
}


/* =========================================================
   CAMPO CORREO
========================================================= */

.auth-login-field {
    margin-bottom: 18px;
}

.auth-login-field .form-label {
    margin-bottom: 7px;

    color: #17243b;

    font-size: 13px;
    font-weight: 800;
}


/* CONTENEDOR */

.auth-login-field .auth-input-icon {
    position: relative;
}


/* ICONO */

.auth-login-field .auth-input-icon > i {
    position: absolute;

    top: 50%;
    left: 15px;

    transform: translateY(-50%);

    color: #174a86;

    font-size: 14px;

    z-index: 2;
}


/* INPUT */

.auth-login-field .form-control {
    min-height: 49px;

    padding:
        0 15px
        0 44px;

    border: 1.5px solid #ccd7e5;
    border-radius: 11px;

    background: #ffffff;

    color: #17243b;

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

    box-shadow:
        0 3px 10px
        rgba(15, 45, 80, .03);

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


/* PLACEHOLDER */

.auth-login-field
.form-control::placeholder {
    color: #91a0b3;
    font-weight: 500;
}


/* FOCUS */

.auth-login-field
.form-control:focus {
    border-color: #174a86;

    background: #ffffff;

    box-shadow:
        0 0 0 3px
        rgba(23, 74, 134, .10);

    outline: none;
}


/* =========================================================
   ESTADO DEL CORREO
========================================================= */

.auth-login-email-status {
    min-height: 20px;

    display: flex;
    align-items: center;
    gap: 6px;

    margin-top: 6px;

    padding-left: 2px;

    font-size: 11px;
    font-weight: 600;
}

.auth-login-email-status.status-loading {
    color: #64748b;
}

.auth-login-email-status.status-success {
    color: #159447;
}

.auth-login-email-status.status-error {
    color: #dc3545;
}


/* =========================================================
   CREAR CUENTA
========================================================= */

.auth-register-login {
    margin-top: 28px;

    color: #607087;

    font-size: 12px;

    text-align: center;
}

.auth-register-login a {
    margin-left: 3px;

    color: #174a86;

    font-weight: 900;

    text-decoration: none;
}

.auth-register-login a:hover {
    text-decoration: underline;
}


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

.auth-login-security {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    margin-top: 36px;

    padding-top: 16px;

    border-top: 1px solid #edf1f5;

    color: #66778e;

    font-size: 11px;
}

.auth-login-security i {
    color: #174a86;

    font-size: 15px;
}



.nav-user-menu {
    min-width: 270px;

    padding: 10px;

    border: 1px solid #e4eaf2;
    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 16px 38px rgba(15, 35, 65, .16);
}

.dropdown-user-header {
    display: flex;
    align-items: center;
    gap: 11px;

    padding: 8px 8px 12px;
}

.dropdown-user-header strong {
    display: block;

    color: #17243b;

    font-size: 12px;
    font-weight: 900;
}

.dropdown-user-header small {
    display: block;

    margin-top: 2px;

    color: #718096;

    font-size: 10px;
    font-weight: 700;
}

.nav-user-menu .dropdown-divider {
    margin: 5px 0;
    border-color: #edf1f5;
}

.nav-user-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;

    min-height: 42px;

    padding: 0 11px;

    border-radius: 9px;

    color: #34445b;

    font-size: 11px;
    font-weight: 700;

    transition:
        background-color .18s ease,
        color .18s ease;
}

.nav-user-menu .dropdown-item i {
    width: 17px;

    color: #174a86;

    text-align: center;
}

.nav-user-menu .dropdown-item:hover {
    background: #eef5fd;
    color: #174a86;
}

.nav-user-menu .dropdown-item.text-danger {
    color: #dc3545 !important;
}

.nav-user-menu .dropdown-item.text-danger i {
    color: #dc3545;
}

.nav-user-menu .dropdown-item.text-danger:hover {
    background: #fff1f2;
}




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

.auth-recovery-icon {
    background: #fff4d8 !important;
    color: #ba7c00 !important;
}

.auth-recovery-back {
    margin-top: 22px;

    text-align: center;
}

.auth-recovery-back a {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #174a86;

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

    text-decoration: none;
}

.auth-recovery-back a:hover {
    text-decoration: underline;
}


/* SOPORTE */

.auth-recovery-support {
    display: grid;

    grid-template-columns:
        42px minmax(0, 1fr) auto;

    align-items: center;

    gap: 11px;

    margin-top: 30px;

    padding: 14px;

    border: 1px solid #d7eadf;
    border-radius: 13px;

    background: #f3fbf6;
}

.auth-recovery-support-icon {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    background: #dff6e8;

    color: #15964b;

    font-size: 20px;
}

.auth-recovery-support strong {
    display: block;

    color: #1d3f2c;

    font-size: 12px;
    font-weight: 800;
}

.auth-recovery-support small {
    display: block;

    margin-top: 2px;

    color: #638070;

    font-size: 10px;
    line-height: 1.4;
}

.auth-recovery-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 35px;

    padding: 0 12px;

    border-radius: 9px;

    background: #1fa855;

    color: #ffffff !important;

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

    text-decoration: none;
}

.auth-recovery-whatsapp:hover {
    background: #178943;
}


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

@media (
    max-width: 575px
) {

    .auth-recovery-support {
        grid-template-columns:
            42px minmax(0, 1fr);
    }

    .auth-recovery-whatsapp {
        grid-column:
            1 / -1;

        width: 100%;

        margin-top: 4px;
    }
}



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

.auth-reset-icon {
    background: #fff4d8 !important;

    color: #b77b00 !important;
}


/* =========================================================
   REGLAS PASSWORD
========================================================= */

.auth-reset-rules {
    margin: 17px 0;

    padding: 14px;

    border: 1px solid #d9e5f3;
    border-radius: 12px;

    background: #f6f9fd;
}

.auth-reset-rules > strong {
    display: block;

    margin-bottom: 9px;

    color: #243a57;

    font-size: 12px;
    font-weight: 800;
}

.auth-reset-rules > div {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.auth-reset-rules span {
    display: flex;
    align-items: center;
    gap: 7px;

    color: #61748b;

    font-size: 11px;
    font-weight: 600;
}

.auth-reset-rules span i {
    width: 18px;
    height: 18px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #ddf5e6;

    color: #15964b;

    font-size: 8px;
}


/* =========================================================
   TOKEN INVÁLIDO
========================================================= */

.auth-reset-invalid {
    text-align: center;
}

.auth-reset-invalid-icon {
    width: 76px;
    height: 76px;

    display: grid;
    place-items: center;

    margin: 0 auto 18px;

    border-radius: 50%;

    background: #fff0f1;

    color: #d43a48;

    font-size: 28px;
}

.auth-reset-invalid h3 {
    margin-bottom: 7px;

    color: #172943;

    font-size: 23px;
    font-weight: 850;
}

.auth-reset-invalid p {
    max-width: 360px;

    margin: 0 auto 23px;

    color: #718096;

    font-size: 13px;
    line-height: 1.55;
}

.auth-reset-login-link {
    display: inline-block;

    margin-top: 17px;

    color: #174a86;

    font-size: 12px;
    font-weight: 750;

    text-decoration: none;
}

.auth-reset-login-link:hover {
    text-decoration: underline;
}



/* ==========================================================================
   SWEETALERT - LOGIN ADMINISTRATIVO
   ========================================================================== */

.swal2-popup.swal-login-admin {
    border-radius: 18px !important;
    padding: 1.8rem !important;
    box-shadow:
        0 20px 60px
        rgba(15, 43, 77, 0.18) !important;
}

.swal2-popup.swal-login-admin .swal2-title {
    color: #173f6f !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
}

.swal2-popup.swal-login-admin .swal2-html-container {
    margin-top: 0.7rem !important;
}

.swal2-popup.swal-login-admin .swal2-confirm,
.swal2-popup.swal-login-admin .swal2-cancel {
    border-radius: 9px !important;
    padding: 0.65rem 1.15rem !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

.swal2-popup.swal-login-admin .swal2-icon {
    margin-top: 1rem !important;
}


/* ==========================================================================
   LOADER ACCESO ADMINISTRATIVO - RENTGOPERU
   ========================================================================== */

.login-admin-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;

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

    padding: 20px;

    background: rgba(8, 25, 47, 0.64);
    backdrop-filter: blur(5px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}


.login-admin-loader.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}


.login-admin-loader-card {
    width: min(520px, 100%);

    background: #ffffff;

    border-radius: 22px;

    padding: 30px 34px 28px;

    text-align: center;

    box-shadow:
        0 25px 80px
        rgba(4, 24, 50, .28);

    transform: translateY(12px) scale(.98);

    transition:
        transform .3s ease;
}


.login-admin-loader.is-visible
.login-admin-loader-card {
    transform: translateY(0) scale(1);
}


/* ==========================================================================
   ICONO SUPERIOR
   ========================================================================== */

.login-admin-loader-icon {
    width: 62px;
    height: 62px;

    margin:
        0 auto
        14px;

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

    border-radius: 50%;

    background: #eef4fb;

    color: #174a86;

    font-size: 25px;
}


.login-admin-loader-card h3 {
    margin: 0;

    color: #102c50;

    font-size: 23px;
    font-weight: 700;
}


.login-admin-loader-card > p {
    margin:
        8px 0
        22px;

    color: #6b7280;

    font-size: 14px;
}


/* ==========================================================================
   CARRETERA
   ========================================================================== */

.login-admin-road {
    position: relative;

    height: 112px;

    margin-bottom: 18px;

    overflow: hidden;

    border-radius: 14px;

    background:
        linear-gradient(
            to bottom,
            #f5f8fc 0%,
            #f5f8fc 62%,
            #3c4858 62%,
            #303a47 100%
        );
}


/* CIUDAD */

.login-admin-city {
    position: absolute;

    left: 18px;
    bottom: 43px;

    display: flex;
    align-items: flex-end;
    gap: 8px;

    color: #d7e0eb;

    font-size: 29px;
}


.login-admin-city i:nth-child(2) {
    font-size: 40px;
}


.login-admin-city i:nth-child(3) {
    margin-left: 8px;

    color: #9eb99e;

    font-size: 25px;
}


/* PISTA DEL AUTO */

.login-admin-car-track {
    position: absolute;

    left: 18px;
    right: 18px;
    bottom: 26px;

    height: 42px;
}


/* AUTO */

.login-admin-car {
    position: absolute;

    left: 0;
    bottom: 1px;

    width: 44px;
    height: 32px;

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

    color: #f0a400;

    font-size: 35px;

    transform: translateX(0);

    transition:
        left .09s linear;

    z-index: 5;

    filter:
        drop-shadow(
            0 3px 3px
            rgba(0, 0, 0, .22)
        );
}


/* EFECTO MOVIMIENTO */

.login-admin-car::before {
    content: "";

    position: absolute;

    width: 15px;
    height: 3px;

    left: -11px;
    top: 13px;

    border-radius: 5px;

    background: #f0a400;

    opacity: .55;

    box-shadow:
        -8px 6px 0
        rgba(240, 164, 0, .28);
}


/* META */

.login-admin-finish {
    position: absolute;

    right: 0;
    bottom: 6px;

    color: #174a86;

    font-size: 25px;
}


/* LÍNEA CENTRAL CARRETERA */

.login-admin-road-line {
    position: absolute;

    left: 20px;
    right: 20px;
    bottom: 13px;

    height: 2px;

    background:
        repeating-linear-gradient(
            to right,
            rgba(255, 255, 255, .9) 0,
            rgba(255, 255, 255, .9) 24px,
            transparent 24px,
            transparent 42px
        );
}


/* ==========================================================================
   BARRA DE PROGRESO
   ========================================================================== */

.login-admin-progress-row {
    display: flex;
    align-items: center;

    gap: 14px;
}


.login-admin-progress {
    position: relative;

    flex: 1;

    height: 12px;

    overflow: hidden;

    border-radius: 999px;

    background: #e7edf4;
}


.login-admin-progress-bar {
    width: 1%;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #e99d00,
            #f5b51b
        );

    transition:
        width .09s linear;
}


.login-admin-progress-row strong {
    width: 46px;

    color: #102c50;

    font-size: 17px;
    font-weight: 700;

    text-align: right;
}


/* ==========================================================================
   ESTADO
   ========================================================================== */

.login-admin-loader-status {
    margin-top: 22px;

    padding: 13px 16px;

    display: flex;
    align-items: center;

    gap: 12px;

    text-align: left;

    border-radius: 13px;

    background: #f5f8fc;
}


.login-admin-loader-status-icon {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

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

    border-radius: 10px;

    background: #fff2d4;

    color: #e99d00;

    font-size: 17px;
}


.login-admin-loader-status strong {
    display: block;

    color: #163d6b;

    font-size: 14px;
    font-weight: 700;
}


.login-admin-loader-status small {
    display: block;

    margin-top: 2px;

    color: #778293;

    font-size: 12px;
}


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

@media (max-width: 575.98px) {

    .login-admin-loader {
        padding: 14px;
    }


    .login-admin-loader-card {
        padding:
            24px
            18px
            22px;

        border-radius: 18px;
    }


    .login-admin-loader-card h3 {
        font-size: 20px;
    }


    .login-admin-road {
        height: 100px;
    }


    .login-admin-car {
        font-size: 31px;
    }


    .login-admin-loader-status {
        padding: 12px;
    }

}



/* ==========================================================================
   LOADER DE ACCESO - RENTGOPERU
   ========================================================================== */

.rentgo-access-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;

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

    padding: 18px;

    background: rgba(7, 28, 53, .68);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}


.rentgo-access-loader.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}


/* ==========================================================================
   TARJETA
   ========================================================================== */

.rentgo-access-card {
    width: min(520px, 100%);

    padding: 28px 32px 27px;

    background: #ffffff;

    border:
        1px solid
        rgba(20, 69, 120, .10);

    border-radius: 22px;

    text-align: center;

    box-shadow:
        0 26px 80px
        rgba(5, 25, 50, .30);

    transform:
        translateY(12px)
        scale(.98);

    transition:
        transform .28s ease;
}


.rentgo-access-loader.is-visible
.rentgo-access-card {
    transform:
        translateY(0)
        scale(1);
}


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

.rentgo-access-icon {
    width: 60px;
    height: 60px;

    margin:
        0 auto
        13px;

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

    border-radius: 50%;

    background: #edf4fc;

    color: #174a86;

    font-size: 25px;
}


.rentgo-access-card h3 {
    margin: 0;

    color: #102f55;

    font-size: 22px;
    font-weight: 700;
}


.rentgo-access-card > p {
    margin:
        7px 0
        20px;

    color: #6c7785;

    font-size: 13px;
    line-height: 1.5;
}


/* ==========================================================================
   CARRETERA
   ========================================================================== */

.rentgo-access-road {
    position: relative;

    height: 110px;

    margin-bottom: 18px;

    overflow: hidden;

    border-radius: 14px;

    background:
        linear-gradient(
            to bottom,
            #f5f8fc 0%,
            #f5f8fc 61%,
            #44515f 61%,
            #313b47 100%
        );
}


/* ==========================================================================
   DECORACIÓN
   ========================================================================== */

.rentgo-road-background {
    position: absolute;

    left: 17px;
    bottom: 43px;

    display: flex;
    align-items: flex-end;

    gap: 7px;

    color: #d4deea;

    font-size: 28px;
}


.rentgo-road-background i:nth-child(2) {
    font-size: 39px;
}


.rentgo-road-background i:nth-child(3) {
    margin-left: 7px;

    color: #9eb79e;

    font-size: 24px;
}


/* ==========================================================================
   PISTA
   ========================================================================== */

.rentgo-car-track {
    position: absolute;

    left: 18px;
    right: 18px;
    bottom: 25px;

    height: 43px;
}


/* ==========================================================================
   VEHÍCULO
   ========================================================================== */

.rentgo-loader-car {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 43px;
    height: 32px;

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

    color: #eda600;

    font-size: 34px;

    z-index: 5;

    transition:
        left .08s linear;

    filter:
        drop-shadow(
            0 3px 3px
            rgba(0, 0, 0, .25)
        );
}


/* VELOCIDAD */

.rentgo-loader-car::before {
    content: "";

    position: absolute;

    left: -12px;
    top: 11px;

    width: 14px;
    height: 3px;

    border-radius: 5px;

    background:
        rgba(237, 166, 0, .60);

    box-shadow:
        -8px 7px 0
        rgba(237, 166, 0, .28);
}


/* ==========================================================================
   META
   ========================================================================== */

.rentgo-loader-finish {
    position: absolute;

    right: 0;
    bottom: 5px;

    color: #174a86;

    font-size: 25px;
}


/* ==========================================================================
   LÍNEA CARRETERA
   ========================================================================== */

.rentgo-road-line {
    position: absolute;

    left: 20px;
    right: 20px;
    bottom: 13px;

    height: 2px;

    background:
        repeating-linear-gradient(
            to right,
            rgba(255, 255, 255, .9) 0,
            rgba(255, 255, 255, .9) 24px,
            transparent 24px,
            transparent 42px
        );
}


/* ==========================================================================
   PROGRESO
   ========================================================================== */

.rentgo-progress-row {
    display: flex;
    align-items: center;

    gap: 13px;
}


.rentgo-progress {
    flex: 1;

    height: 12px;

    overflow: hidden;

    border-radius: 999px;

    background: #e6edf5;
}


.rentgo-progress-bar {
    width: 1%;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #174a86,
            #2866a8
        );

    transition:
        width .08s linear;
}


.rentgo-progress-row strong {
    width: 45px;

    color: #102f55;

    font-size: 17px;
    font-weight: 700;

    text-align: right;
}


/* ==========================================================================
   ESTADO
   ========================================================================== */

.rentgo-access-status {
    margin-top: 21px;

    padding: 12px 15px;

    display: flex;
    align-items: center;

    gap: 11px;

    text-align: left;

    border-radius: 13px;

    background: #f3f7fc;
}


.rentgo-status-icon {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

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

    border-radius: 10px;

    background: #e6f0fb;

    color: #174a86;

    font-size: 16px;
}


.rentgo-access-status strong {
    display: block;

    color: #163f6e;

    font-size: 13px;
    font-weight: 700;
}


.rentgo-access-status small {
    display: block;

    margin-top: 2px;

    color: #778394;

    font-size: 12px;
}


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

@media (max-width: 575.98px) {

    .rentgo-access-loader {
        padding: 13px;
    }


    .rentgo-access-card {
        padding:
            23px
            17px
            21px;

        border-radius: 18px;
    }


    .rentgo-access-card h3 {
        font-size: 19px;
    }


    .rentgo-access-road {
        height: 96px;
    }


    .rentgo-loader-car {
        font-size: 30px;
    }


    .rentgo-access-status {
        padding: 11px;
    }
}



/* ==========================================================================
   SWEETALERT LOGIN - RENTGOPERU
   ========================================================================== */

.rentgo-swal-popup {
    width: min(410px, calc(100% - 28px)) !important;

    padding:
        0
        0
        24px !important;

    overflow: hidden;

    border:
        1px solid
        rgba(18, 65, 111, .10);

    border-radius:
        20px !important;

    background:
        #ffffff !important;

    box-shadow:
        0 24px 70px
        rgba(8, 35, 67, .22) !important;
}


.rentgo-swal-html {
    margin:
        0 !important;

    padding:
        0 !important;
}


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

.rentgo-swal-content {
    position: relative;

    padding:
        31px
        30px
        10px;

    text-align:
        center;
}


/* LÍNEA SUPERIOR CORPORATIVA */

.rentgo-swal-content::before {
    content: "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    right:
        0;

    height:
        5px;

    background:
        linear-gradient(
            90deg,
            #0c315a,
            #174a86,
            #2d6aaa
        );
}


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

.rentgo-swal-icon {
    width:
        70px;

    height:
        70px;

    margin:
        0 auto
        18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    font-size:
        29px;
}


/* WARNING */

.rentgo-swal-warning {
    color:
        #d48a00;

    background:
        #fff5dc;

    border:
        1px solid
        #f7d58d;
}


/* ERROR */

.rentgo-swal-error {
    color:
        #b93838;

    background:
        #fff0f0;

    border:
        1px solid
        #f0bcbc;
}


/* SUCCESS */

.rentgo-swal-success {
    color:
        #168252;

    background:
        #eaf8f1;

    border:
        1px solid
        #b8e5ce;
}


/* INFO */

.rentgo-swal-info {
    color:
        #174a86;

    background:
        #edf4fc;

    border:
        1px solid
        #c7d9ee;
}


/* ==========================================================================
   TEXTOS
   ========================================================================== */

.rentgo-swal-title {
    margin:
        0
        0
        8px;

    color:
        #102f55;

    font-size:
        21px;

    font-weight:
        750;

    line-height:
        1.25;
}


.rentgo-swal-message {
    max-width:
        315px;

    margin:
        0 auto;

    color:
        #687587;

    font-size:
        14px;

    line-height:
        1.55;
}


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

.rentgo-swal-confirm {
    min-width:
        145px;

    height:
        44px;

    margin-top:
        8px;

    padding:
        0
        22px;

    border:
        0;

    border-radius:
        10px;

    background:
        linear-gradient(
            135deg,
            #174a86,
            #205b99
        );

    color:
        #ffffff;

    font-size:
        14px;

    font-weight:
        700;

    box-shadow:
        0 8px 20px
        rgba(23, 74, 134, .20);

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


.rentgo-swal-confirm:hover {
    transform:
        translateY(-1px);

    background:
        linear-gradient(
            135deg,
            #123e73,
            #174f8e
        );

    box-shadow:
        0 10px 24px
        rgba(23, 74, 134, .27);
}


.rentgo-swal-confirm:active {
    transform:
        translateY(0);
}


.rentgo-swal-confirm:focus {
    outline:
        none;

    box-shadow:
        0 0 0 4px
        rgba(23, 74, 134, .16);
}


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

.rentgo-swal-show {
    animation:
        rentgoSwalEntrada
        .28s
        ease-out;
}


.rentgo-swal-hide {
    animation:
        rentgoSwalSalida
        .18s
        ease-in
        forwards;
}


@keyframes rentgoSwalEntrada {

    from {
        opacity:
            0;

        transform:
            translateY(14px)
            scale(.96);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0)
            scale(1);
    }
}


@keyframes rentgoSwalSalida {

    from {
        opacity:
            1;

        transform:
            scale(1);
    }

    to {
        opacity:
            0;

        transform:
            scale(.97);
    }
}


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

@media (max-width: 575.98px) {

    .rentgo-swal-popup {
        width:
            calc(100% - 24px) !important;

        border-radius:
            17px !important;
    }


    .rentgo-swal-content {
        padding:
            27px
            20px
            8px;
    }


    .rentgo-swal-icon {
        width:
            62px;

        height:
            62px;

        font-size:
            25px;
    }


    .rentgo-swal-title {
        font-size:
            19px;
    }


    .rentgo-swal-message {
        font-size:
            13px;
    }
}



/* =========================================================
   RENTGO PERÚ
   LOGIN - MÓVIL / TABLET VERTICAL
========================================================= */

@media (max-width: 991.98px) and (orientation: portrait) {

    /*
    |--------------------------------------------------------------------------
    | OCULTAR BENEFICIOS
    |--------------------------------------------------------------------------
    */

    .auth-premium-brand
    .auth-brand-content
    .auth-brand-features {

        display: none !important;
    }


    /*
    |--------------------------------------------------------------------------
    | OCULTAR SEGURIDAD
    |--------------------------------------------------------------------------
    */

    .auth-premium-brand
    .auth-brand-content
    .auth-brand-security {

        display: none !important;
    }

}


/* =========================================================
   RENTGO PERÚ
   LOGIN - MÓVIL / TABLET VERTICAL
========================================================= */

@media (max-width: 991.98px) and (orientation: portrait) {

    .auth-premium-brand
    .auth-brand-content
    .auth-brand-features,

    .auth-premium-brand
    .auth-brand-content
    .auth-brand-security {

        display: none !important;
    }

}



/* =========================================================
   RENTGO PERÚ
   REGISTRO
   TABLET HORIZONTAL
========================================================= */

@media
(min-width: 768px)
and
(max-width: 1199.98px)
and
(orientation: landscape) {

    /*
    |--------------------------------------------------------------------------
    | DISTRIBUCIÓN PRINCIPAL
    |--------------------------------------------------------------------------
    |
    | Damos más espacio a la presentación izquierda.
    |
    |--------------------------------------------------------------------------
    */

    .auth-register-layout {

        grid-template-columns:
            minmax(330px, 36%)
            minmax(0, 64%) !important;
    }


    /*
    |--------------------------------------------------------------------------
    | COLUMNA IZQUIERDA
    |--------------------------------------------------------------------------
    */

    .auth-register-layout
    .auth-premium-brand {

        min-width:
            0;
    }


    /*
    |--------------------------------------------------------------------------
    | CONTENIDO
    |--------------------------------------------------------------------------
    */

    .auth-register-layout
    .auth-brand-content {

        width:
            100%;

        min-width:
            0;

        padding-left:
            32px;

        padding-right:
            32px;

        box-sizing:
            border-box;
    }


    /*
    |--------------------------------------------------------------------------
    | TÍTULO
    |--------------------------------------------------------------------------
    */

    .auth-register-layout
    .auth-brand-content
    h1 {

        width:
            100%;

        max-width:
            100%;

        font-size:
            clamp(
                32px,
                3.4vw,
                42px
            );

        line-height:
            1.08;

        overflow-wrap:
            normal;

        word-break:
            normal;
    }


    /*
    |--------------------------------------------------------------------------
    | RENTGOPERU
    |--------------------------------------------------------------------------
    */

    .auth-register-layout
    .auth-brand-content
    h1 span {

        display:
            block;

        width:
            100%;

        font-size:
            inherit;

        line-height:
            inherit;

        white-space:
            nowrap;
    }


    /*
    |--------------------------------------------------------------------------
    | DESCRIPCIÓN
    |--------------------------------------------------------------------------
    */

    .auth-register-layout
    .auth-brand-content
    > p {

        width:
            100%;

        max-width:
            100%;

        font-size:
            15px;

        line-height:
            1.65;
    }


    /*
    |--------------------------------------------------------------------------
    | BENEFICIOS
    |--------------------------------------------------------------------------
    */

    .auth-register-layout
    .auth-brand-features {

        width:
            100%;
    }


    .auth-register-layout
    .auth-brand-features
    > div {

        width:
            100%;

        box-sizing:
            border-box;
    }


    /*
    |--------------------------------------------------------------------------
    | FORMULARIO DERECHO
    |--------------------------------------------------------------------------
    */

    .auth-register-layout
    .auth-premium-form {

        min-width:
            0;
    }

}

/* =========================================================
   TÍTULO - TABLET HORIZONTAL
========================================================= */

@media
(min-width: 768px)
and
(max-width: 1199.98px)
and
(orientation: landscape) {

    /*
    |--------------------------------------------------------------------------
    | TÍTULO PRINCIPAL
    |--------------------------------------------------------------------------
    */

    .auth-register-layout
    .auth-brand-content
    h1 {

        width: 100%;

        max-width: 100%;

        margin-right: 0;

        font-size: clamp(
            30px,
            3.2vw,
            38px
        );

        line-height: 1.08;

        overflow: hidden;

        overflow-wrap: normal;

        word-break: normal;
    }


    /*
    |--------------------------------------------------------------------------
    | RENTGOPERU
    |--------------------------------------------------------------------------
    */

    .auth-register-layout
    .auth-brand-content
    h1 span {

        display: block;

        width: 100%;

        max-width: 100%;

        font-size: clamp(
            28px,
            3vw,
            36px
        );

        line-height: 1.12;

        white-space: nowrap;

        letter-spacing: -0.5px;
    }

}

.auth-register-layout
.auth-brand-content
h1 {

    font-size: 26px;
    line-height: 1.15;
}


.auth-register-layout
.auth-brand-content
h1 span {

    display: block;

    width: 100%;

    max-width: 100%;

    font-size: 26px;

    line-height: 1.15;

    white-space: nowrap;

    letter-spacing: -0.7px;
}