body {
    -moz-osx-font-smoothing: grayscale;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
    margin: 0
}

code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace
}

.loader-overlay {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background: #001947cc !important;
    bottom: 0 !important;
    box-sizing: border-box;
    height: 100vh !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 20px;
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    z-index: 10000000
}

.loader-text {
    color: #fff !important;
    font-size: 15px !important
}

.loader-subtext {
    color: #e0e0e0
}

.codigo-overlay {
    z-index: 1000
}

.codigo-body .titulo-principal {
    color: #111;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 18px
}

.icono-candado {
    background: #0000;
    border-radius: 0;
    color: #111;
    display: block;
    font-size: 24px;
    height: auto;
    margin: 0 0 12px;
    width: auto
}

.icono-candado i {
    color: #111
}

.label-token {
    align-items: center;
    color: #111;
    display: flex;
    font-size: 15px !important;
    font-weight: 600;
    gap: 6px;
    margin: 0 0 8px
}

.label-token .icono-info {
    color: #0755b5;
    cursor: help;
    font-size: 14px
}

.codigo-body .subtitulo-codigo {
    width: 100%
}

@media (max-width:700px) {
    .codigo-body {
        align-items: center;
        padding: 40px 20px
    }

    .codigo-body .titulo-principal {
        margin-left: 0
    }

    .codigo-body .subtitulo-codigo {
        width: 100%
    }

    .codigo-form,
    .mensaje-codigo {
        max-width: 440px;
        width: 100%
    }
}

@media (max-width:480px) {
    .codigo-header {
        padding: 0 15px
    }

    .codigo-header .titulo-header {
        font-size: 12px
    }

    .codigo-body {
        padding: 35px 16px
    }

    .codigo-body .titulo-principal {
        font-size: 17px
    }

    .icono-candado {
        font-size: 22px
    }

    .codigo-form {
        padding: 24px 20px 26px
    }
}

.gradient-icon {
    -webkit-text-fill-color: #0000;
    background: linear-gradient(to bottom right, #007bff, purple);
    -webkit-background-clip: text;
    font-size: 1.2rem;
    font-weight: 700
}

.icono-degradado {
    font-size: 19px !important
}

.tab {
    border: none;
    border-bottom: 2px solid #0000;
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
    padding: 0;
    transition: all .2s ease
}

.tab:hover {
    background: #f8fafc
}

.tab.activo {
    background: #fff;
    border-bottom-color: #0755b5
}

.mensaje-informativo {
    justify-content: space-between;
    padding: 10px 12px
}

.mensaje-informativo .cerrar-mensaje {
    background: none;
    padding: 0 5px
}

.mensaje-informativo.oculto {
    display: none
}

.formulario {
    padding: 20px
}

.campo {
    margin-bottom: 15px
}

.campo label {
    color: #374151;
    font-size: 11px;
    margin-bottom: 5px
}

.identificacion {
    display: flex;
    gap: 8px
}

.custom-select-container {
    flex-shrink: 0;
    width: 100px
}

.select-trigger {
    font-size: 11px;
    height: 38px;
    padding: 0 8px
}

.select-trigger .arrow {
    color: #0755b5;
    font-size: 10px
}

.select-options {
    top: 100%;
    width: 100%;
    z-index: 100
}

.select-options li {
    font-size: 11px;
    padding: 8px 12px;
    transition: background .2s ease
}

.select-options li:hover {
    background: #ffffff1a
}

.identificacion input {
    flex: 1 1;
    height: 38px
}

.native-select {
    display: none
}

.input-icono input {
    color: #333;
    font-size: 12px;
    font-weight: 500;
    height: 38px;
    padding: 0 40px 0 12px
}

.input-icono input:focus {
    box-shadow: 0 0 0 3px #0755b51a
}

.input-icono .ver {
    background: none;
    border: none;
    color: #0755b5;
    cursor: pointer;
    padding: 0;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%)
}

.btn-ingresar {
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    height: 40px;
    transition: all .2s ease
}

.btn-ingresar:not(:disabled) {
    background: #0755b5;
    color: #fff
}

.btn-ingresar:not(:disabled):hover {
    background: #06499a
}

.enlaces-formulario .enlace {
    white-space: nowrap
}

.enlaces-formulario {
    gap: 5px !important;
    margin-top: 20px
}

.enlace {
    color: #1e90ff;
    text-decoration: none
}

.separador {
    color: #ccc;
    font-size: 1.2rem
}

.modal-overlay {
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    background: #11305bdb;
    z-index: 9999999
}

.sp-ml-modal {
    animation: modalEntrada .18s ease-out;
    border-radius: 4px !important;
    box-shadow: 0 8px 30px #0000001f;
    box-sizing: border-box;
    max-width: 503px !important;
    max-width: calc(100% - 32px);
    min-height: 247px
}

@keyframes modalEntrada {
    0% {
        opacity: 0;
        transform: scale(.97)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.sp-ml-modal__icon {
    align-items: center;
    border-radius: 50%;
    display: flex;
    height: 30px;
    justify-content: center;
    margin-bottom: 15px;
    width: 30px
}

.sp-ml-modal__icon span {
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1
}

.sp-ml-modal__icon--warning {
    background: #ff9d2e
}

.sp-ml-modal__icon--error {
    background: #ff3636
}

.sp-ml-modal__title {
    color: #111;
    font-size: 15px !important;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 15px
}

.sp-ml-modal__sub-title,
.sp-ml-modal__title {
    font-family: Arial, Helvetica, sans-serif;
    text-align: left
}

.sp-ml-modal__sub-title {
    color: #222;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.55;
    margin-bottom: 25px
}

.sp-ml-modal__options {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    width: 100%
}

.sp-at-btn {
    border-radius: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 700;
    height: 38px;
    min-width: 139px;
    padding: 0 22px;
    transition: background .15s ease, transform .1s ease
}

.sp-at-btn:active {
    transform: scale(.98)
}

@media (max-width:600px) {
    .sp-ml-modal {
        min-height: auto;
        padding: 26px;
        width: calc(100% - 32px)
    }

    .sp-ml-modal__title {
        font-size: 15px !important
    }

    .sp-ml-modal__sub-title {
        font-size: 13px
    }

    .sp-ml-modal__options {
        justify-content: flex-end
    }

    .sp-at-btn {
        min-width: 130px
    }
}

:root {
    --azul: #0755b5;
    --azul-oscuro: #003b7a;
    --azul-suave: #eef6ff;
    --amarillo: #f9b718;
    --texto: #222;
    --texto-gris: #646b72;
    --borde: #d9dde2;
    --fondo-derecho: #f3f8fd;
    --blanco: #fff
}

.codigo-overlay {
    animation: fadeInCodigo .25s ease;
    background: #f5f9fd;
    display: none;
    flex-direction: column;
    height: 100vh;
    inset: 0;
    overflow-y: auto;
    position: fixed;
    width: 100%;
    z-index: 10000
}

.codigo-overlay.visible {
    display: flex
}

@keyframes fadeInCodigo {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.codigo-header {
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #dfe3e8;
    border-top: 1px solid #eadfe0;
    display: flex;
    height: 56px;
    justify-content: space-between;
    min-height: 56px;
    padding: 0 32px;
    position: sticky;
    top: 0;
    z-index: 20
}

.codigo-header .btn-atras {
    align-items: center;
    background: #0000;
    border: none;
    color: #0755b5;
    cursor: pointer;
    display: flex;
    font-size: 13px;
    font-weight: 500;
    gap: 5px;
    padding: 0;
    transition: color .2s ease
}

.codigo-header .btn-atras:hover {
    background: #0000;
    color: #003b7a
}

.codigo-header .titulo-header {
    color: #111827;
    font-size: 13px;
    font-weight: 600;
    left: 50%;
    margin: 0;
    position: absolute;
    transform: translateX(-50%)
}

.codigo-header .btn-abandonar {
    align-items: center;
    background: #0000;
    border: none;
    color: #0755b5;
    cursor: pointer;
    display: flex;
    font-size: 13px;
    font-weight: 500;
    gap: 5px;
    padding: 0;
    transition: color .2s ease
}

.codigo-header .btn-abandonar:hover {
    background: #0000;
    color: #003b7a
}

.codigo-body {
    align-items: flex-start;
    background: #f5f9fd;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding-left: calc(50% - 220px);
    padding-top: 53px;
    width: 100%
}

.codigo-body .icono-seguridad {
    background: #0000;
    border-radius: 0;
    color: #000;
    display: block;
    font-size: 27px;
    height: auto;
    margin: 0 0 9px 32px;
    width: auto
}

.codigo-body .icono-seguridad i {
    color: #000
}

.codigo-body h2 {
    color: #111;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 7px
}

.codigo-body .subtitulo-codigo {
    color: #333;
    font-size: 13px;
    line-height: 1.45;
    margin: 0 0 18px;
    text-align: left;
    width: 376px
}

.codigo-form {
    background: #fff;
    border: 1px solid #dfe3e8;
    border-radius: 6px;
    box-shadow: none;
    box-sizing: border-box;
    padding: 28px 32px 32px;
    width: 440px
}

.codigo-body .registro-badge {
    display: none
}

.codigo-form label {
    color: #111;
    display: block;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 12px
}

.btn-verificar {
    align-items: center;
    background: #e5e5e5;
    border: none;
    border-radius: 10px;
    color: #777;
    cursor: pointer;
    display: inline-flex;
    font-size: 13px;
    font-weight: 600;
    gap: 7px;
    height: 38px;
    justify-content: center;
    margin-top: 2px;
    min-width: 101px;
    padding: 0 25px;
    transition: background .2s ease, color .2s ease;
    width: auto
}

.btn-verificar:hover {
    background: #0755b5;
    color: #fff
}

.btn-verificar:disabled {
    background: #e5e5e5;
    color: #777;
    cursor: not-allowed
}

.btn-verificar .spinner {
    animation: spin .8s linear infinite;
    border: 2px solid #ffffff59;
    border-radius: 50%;
    border-top-color: #fff;
    display: inline-block;
    height: 14px;
    width: 14px
}

.mensaje-codigo {
    border-radius: 5px;
    box-sizing: border-box;
    display: none;
    font-size: 13px;
    font-weight: 500;
    margin: 0 0 12px;
    padding: 10px 14px;
    text-align: left;
    width: 440px
}

.mensaje-codigo.visible {
    display: block
}

.mensaje-codigo.success {
    background: #eaf7ee;
    border: 1px solid #c9e8d2;
    color: #176b35
}

.mensaje-codigo.danger {
    background: #fff0f0;
    border: 1px solid #f2c6ca;
    color: #a51d2d
}

.mensaje-codigo.info {
    background: #eef6ff;
    border: 1px solid #c9def7;
    color: #0755b5
}

.codigo-footer {
    background: #fff;
    border-top: 1px solid #e0e3e7;
    color: #8a8f96;
    font-size: 11px;
    margin-top: auto;
    padding: 18px;
    text-align: center
}

.codigo-footer a {
    color: #0755b5;
    text-decoration: none
}

.codigo-footer a:hover {
    text-decoration: underline
}

.token-inputs {
    display: flex;
    gap: 7px;
    margin-bottom: 26px
}

.token-inputs input {
    background: #fff;
    border: 1px solid #aeb4ba;
    border-radius: 5px;
    box-sizing: border-box;
    color: #111;
    font-size: 18px;
    font-weight: 500;
    height: 38px;
    outline: none;
    padding: 0;
    text-align: center;
    transition: border-color .2s ease, box-shadow .2s ease;
    width: 38px
}

.token-inputs input:focus {
    border-color: #0755b5;
    box-shadow: 0 0 0 2px #0755b51f
}

.btn-verificar.activo {
    background: #0755b5;
    color: #fff;
    cursor: pointer
}

.btn-verificar.activo:hover {
    background: #06499a
}

.loader-overlay {
    background: #fffffff2;
    flex-direction: column;
    height: 100vh;
    inset: 0;
    transition: opacity .3s ease;
    z-index: 99999
}

.loader-container {
    padding: 20px;
    text-align: center
}

.loader-gif {
    height: 80px;
    margin-bottom: 20px;
    object-fit: contain;
    width: 80px
}

.loader-text {
    color: #0755b5;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px
}

.loader-subtext {
    color: #6b7280;
    font-size: 14px
}

.modal-overlay {
    align-items: center;
    background: #00000080;
    display: none;
    inset: 0;
    justify-content: center;
    position: fixed;
    z-index: 99998
}

.modal-overlay.show {
    display: flex
}

.sp-ml-modal {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px #0000004d;
    max-width: 440px;
    padding: 32px;
    width: 90%
}

.sp-ml-modal__content__box {
    text-align: center
}

.sp-ml-modal__content__box__title {
    color: #111827;
    font-size: 20px;
    margin-bottom: 8px
}

.sp-ml-modal__content__box__sub-title {
    color: #6b7280
}

.sp-at-btn {
    background: #0755b5;
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 32px
}

.sp-at-btn:hover {
    background: #06499a
}

@media (max-width:700px) {
    .codigo-body {
        align-items: center;
        padding: 40px 20px
    }

    .codigo-body .icono-seguridad,
    .codigo-body .subtitulo-codigo,
    .codigo-body h2 {
        margin-left: 0
    }

    .codigo-body .subtitulo-codigo {
        max-width: 376px;
        width: 100%
    }

    .codigo-form,
    .mensaje-codigo {
        max-width: 440px;
        width: 100%
    }
}

@media (max-width:480px) {
    .codigo-header {
        padding: 0 15px
    }

    .codigo-header .titulo-header {
        font-size: 12px
    }

    .codigo-body {
        padding: 35px 16px
    }

    .codigo-body .icono-seguridad {
        font-size: 24px
    }

    .codigo-body h2 {
        font-size: 17px
    }

    .codigo-form {
        padding: 24px 20px 26px
    }
}

* {
    box-sizing: border-box;
    font-family: Roboto-Medium, sans-serif;
    font-size: 12px !important
}

*,
body,
html {
    margin: 0;
    padding: 0
}

body,
html {
    max-width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    width: 100%
}

body {
    -webkit-font-smoothing: antialiased;
    background: #fff;
    background: var(--blanco);
    color: #222;
    color: var(--texto);
    font-family: Arial, Segoe UI, sans-serif
}

button,
input,
select {
    font-family: inherit
}

button {
    border: 0
}

.loader-overlay {
    align-items: center;
    background: #00173f;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    opacity: 1;
    position: fixed;
    top: 0;
    transition: opacity .5s ease;
    width: 100%;
    z-index: 9999
}

.loader-overlay.hidden {
    opacity: 0;
    pointer-events: none
}

.loader {
    animation: spin 1s linear infinite;
    border: 4px solid #ffffff4d;
    border-radius: 50%;
    border-top-color: #fff;
    height: 50px;
    width: 50px
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

.modal-overlay {
    align-items: center !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background: #001947cc !important;
    bottom: 0 !important;
    box-sizing: border-box;
    display: none !important;
    height: 100vh !important;
    justify-content: center !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 20px;
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    z-index: 99999 !important
}

.modal-overlay.show {
    display: flex !important
}

.sp-ml-modal {
    z-index: 100000
}

.sp-ml-modal,
.sp-ml-modal__content {
    max-width: 400px;
    position: relative;
    width: 100%
}

.sp-ml-modal__content {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px #0003;
    margin: 0 auto;
    padding: 32px;
    text-align: center;
    z-index: 100001
}

.sp-ml-modal__content__box__icon {
    margin-bottom: 16px
}

.ico-warning {
    align-items: center;
    background: #fff3cd;
    border-radius: 50%;
    display: flex;
    height: 48px;
    justify-content: center;
    margin: 0 auto;
    width: 48px
}

.ico-warning:before {
    color: #856404;
    content: "⚠";
    font-size: 24px
}

.ico-info {
    align-items: center;
    background: #d1ecf1;
    border-radius: 50%;
    display: flex;
    height: 48px;
    justify-content: center;
    margin: 0 auto;
    width: 48px
}

.ico-info:before {
    color: #0c5460;
    content: "ℹ";
    font-size: 24px
}

.sp-ml-modal__content__box__title {
    color: #0a1a2e;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px
}

.sp-ml-modal__content__box__sub-title {
    color: #5c6f8d;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 24px
}

.sp-ml-modal__content__box__options__btn {
    display: flex;
    justify-content: center
}

.sp-ml-modal__content__box {
    width: 100%
}

.sp-at-btn--primary {
    background: #0040a8;
    border: none;
    border-radius: 100px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    font-weight: 400;
    padding: 12px 32px;
    transition: all .3s ease
}

.sp-at-btn--lg {
    font-size: 18px;
    padding: 14px 40px
}

.sp-at-btn--primary:hover {
    background: #002c76;
    box-shadow: 0 4px 12px #0040a866
}

.pagina {
    display: grid;
    grid-template-columns: 48% 52%;
    min-height: 100vh;
    width: 100%
}

.zona-izquierda {
    align-items: flex-start;
    background: #fff;
    box-sizing: border-box;
    display: flex;
    justify-content: right;
    margin: 25px;
    min-height: 100vh
}

.contenedor-izquierdo {
    max-width: calc(100% - 30px);
    width: 286px
}

.logo {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%
}

.logo-simbolo {
    color: #f2aa00;
    font-size: 20px;
    height: 20px;
    width: 64%
}

.logo-simbolo img {
    display: block;
    height: auto;
    width: 100%
}

.zona-izquierda h1 {
    color: #171717;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 17px
}

.aviso {
    align-items: center;
    background: linear-gradient(100deg, #0755b5, #00449a);
    border-radius: 8px;
    color: #fff;
    display: flex;
    height: 64px;
    margin-bottom: 12px;
    overflow: hidden;
    padding: 7px;
    position: relative;
    width: 100%
}

.aviso-imagen {
    background: #e7eef6;
    background: #0000;
    border-radius: 50%;
    flex-shrink: 0;
    height: 134%;
    overflow: hidden;
    width: 20%
}

.aviso-imagen img {
    border-radius: 0 !important;
    display: block;
    height: 100%;
    object-fit: cover;
    object-position: center;
    width: 100%
}

.aviso-contenido {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 10px;
    padding-right: 24px
}

.aviso-contenido strong {
    font-size: 9.3px;
    line-height: 1.35
}

.aviso-contenido span {
    color: #ffffffe6;
    font-size: 9px;
    line-height: 1.3
}

.aviso-cerrar {
    align-items: center;
    background: #0000;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-size: 17px;
    height: 20px;
    justify-content: center;
    opacity: .9;
    position: absolute;
    right: 7px;
    top: 7px;
    width: 20px
}

.aviso-cerrar:hover {
    opacity: .6
}

.tarjeta-formulario {
    background: #fff;
    border: 1px solid #dadde1;
    border-radius: 8px;
    overflow: hidden;
    width: 100%
}

.tabs {
    border-bottom: 1px solid #e1e3e6;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%
}

.tab,
.tabs {
    height: 45px
}

.tab {
    background: #fff;
    color: #555;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    position: relative;
    transition: color .3s ease
}

.tab.activo,
.tab:hover {
    color: #0755b5;
    color: var(--azul)
}

.tab:after {
    background: #0755b5;
    background: var(--azul);
    bottom: -1px;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    right: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease
}

.tab.activo:after {
    transform: scaleX(1)
}

.mensaje-informativo {
    align-items: center;
    background: #e3f2fd;
    border-radius: 4px;
    display: flex;
    justify-content: flex-start;
    margin-bottom: 15px;
    padding: 12px 40px 12px 12px;
    position: relative;
    width: 100%
}

.mensaje-informativo p {
    color: #0d47a1;
    flex: 1 1;
    font-size: 10px;
    line-height: 1.4;
    margin: 0
}

.mensaje-informativo .cerrar-mensaje {
    background: #0000;
    border: none;
    border-radius: 50%;
    color: #0d47a1;
    cursor: pointer;
    height: 20px;
    opacity: .5;
    padding: 2px 4px;
    position: absolute;
    right: 6px;
    top: 4px;
    transition: opacity .2s ease;
    width: 20px
}

.mensaje-informativo .cerrar-mensaje,
.mensaje-informativo .cerrar-mensaje i {
    align-items: center;
    display: flex;
    font-size: 16px;
    font-weight: 300;
    justify-content: center;
    line-height: 1
}

.mensaje-informativo .cerrar-mensaje:hover {
    background: #0d47a114;
    opacity: 1
}

.formulario {
    padding: 20px 20px 19px
}

.formulario.oculto {
    display: none
}

.campo {
    margin-bottom: 17px
}

.campo label {
    color: #454a4f;
    display: block;
    font-size: 10px;
    font-weight: 600;
    margin-bottom: 7px
}

.identificacion {
    grid-gap: 12px;
    display: grid;
    gap: 12px;
    grid-template-columns: 40% 1fr;
    width: 100%
}

.identificacion input {
    background: #fff;
    border: 1px solid #bfc4c9;
    border-radius: 6px;
    color: #333;
    font-size: 12px;
    font-weight: 500;
    height: 44px;
    outline: none;
    padding: 0 12px;
    width: 100%
}

.identificacion input:focus {
    border-color: #0755b5;
    border-color: var(--azul);
    box-shadow: 0 0 0 3px #0755b51a
}

.custom-select-container {
    font-family: Arial, sans-serif;
    position: relative;
    width: 100%
}

.select-trigger {
    align-items: center;
    background-color: #fff;
    border: 1px solid #bfc4c9;
    border-radius: 6px;
    color: #333;
    cursor: pointer;
    display: flex;
    font-size: 12px;
    font-weight: 500;
    height: 44px;
    justify-content: space-between;
    padding: 6px 10px;
    width: 100%
}

.select-trigger:focus,
.select-trigger:hover {
    border-color: #0755b5;
    border-color: var(--azul)
}

.select-trigger:focus {
    box-shadow: 0 0 0 3px #0755b51a;
    outline: none
}

.fa-solid,
.fas {
    font-size: 16px;
    font-weight: 900
}

.select-options {
    -webkit-overflow-scrolling: touch;
    background-color: #02479f;
    border: 1px solid #0755b5;
    border-radius: 8px;
    box-shadow: 0 4px 12px #00000026;
    display: none;
    left: 0;
    list-style: none;
    margin: 0;
    max-height: 150px;
    max-width: 230px;
    overflow-y: auto;
    position: absolute;
    top: 130%;
    width: 171%;
    z-index: 1000
}

.select-options.show {
    display: block
}

.select-options li {
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    margin-bottom: 8px;
    padding: 4px 14px;
    transition: all .2s ease
}

.select-options li:last-child {
    margin-bottom: 0
}

.select-options li:hover {
    background-color: #022d6391;
    color: #fff
}

.select-options::-webkit-scrollbar {
    width: 5px
}

.select-options::-webkit-scrollbar-track {
    background: #0000
}

.select-options::-webkit-scrollbar-thumb {
    background: rgba(137, 186, 247, .788);
    border-radius: 10px
}

.select-options::-webkit-scrollbar-thumb:hover {
    background: #0755b599
}

.arrow {
    color: #0755b5;
    font-size: 8px;
    margin-left: 4px;
    transition: transform .3s ease
}

.select-trigger.open .arrow {
    transform: rotate(180deg)
}

.input-icono {
    position: relative;
    width: 100%
}

.input-icono input {
    background: #fff;
    border: 1px solid #bfc4c9;
    border-radius: 6px;
    font-size: 11px;
    height: 39px;
    outline: none;
    padding: 0 38px 0 11px;
    width: 100%
}

.input-icono input:focus {
    border-color: #0755b5;
    border-color: var(--azul);
    box-shadow: 0 0 0 2px #0755b514
}

.input-icono input::placeholder {
    color: #999
}

.ver {
    align-items: center;
    background: #0000;
    border: none;
    color: #0755b5;
    color: var(--azul);
    cursor: pointer;
    display: flex;
    font-size: 12px;
    height: 30px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px
}

.ver:hover {
    background: #f0f6fc;
    border-radius: 5px
}

.ver i {
    transition: transform .2s ease
}

.ver:hover i {
    transform: scale(1.1)
}

.btn-ingresar {
    background: #e3e3e3;
    border-radius: 7px;
    color: #858585;
    cursor: default;
    font-size: 11px;
    font-weight: 700;
    height: 39px;
    margin-top: 1px;
    transition: background .2s ease, transform .2s ease, color .2s ease;
    width: 100%
}

.btn-ingresar:not(:disabled) {
    cursor: pointer
}

.btn-ingresar:not(:disabled):hover {
    background: #003b7a
}

.btn-ingresar:active {
    transform: scale(.99)
}

.enlaces-formulario {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    justify-content: center;
    margin-top: 15px;
    width: 100%
}

.enlaces-formulario .enlace {
    align-items: center;
    color: #0755b5;
    color: var(--azul);
    cursor: pointer;
    display: flex;
    font-size: 10px;
    font-weight: 600;
    gap: 5px;
    text-decoration: none;
    transition: all .3s ease
}

.enlaces-formulario .enlace:after {
    content: "›";
    font-size: 14px;
    font-weight: 700;
    transition: transform .3s ease
}

.enlaces-formulario .enlace:hover {
    text-decoration: none;
    transform: translateX(3px)
}

.captcha-demo {
    color: #777;
    font-size: 8px;
    line-height: 1.5;
    margin-top: 14px
}

.captcha-demo a {
    color: #0755b5;
    text-decoration: none
}

.captcha-demo a:hover {
    text-decoration: underline
}

.zona-derecha {
    align-items: flex-start;
    background: #f3f8fd;
    display: flex;
    justify-content: normal;
    min-height: 100vh;
    padding-top: 86px
}

.contenedor-derecho {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 440px;
    width: 100%
}

.banner {
    border-radius: 6px;
    height: 214px;
    overflow: hidden;
    width: 100%
}

.banner img {
    display: block;
    height: 100%;
    object-fit: contain;
    width: 100%
}

.opciones {
    grid-gap: 7px;
    display: grid;
    gap: 7px;
    grid-template-columns: 1fr 1fr 1fr 55px;
    margin: 10px;
    width: 100%
}

.opcion {
    align-items: center;
    background: #fff;
    border: 1px solid #dce1e6;
    border-radius: 6px;
    color: #0755b5;
    color: var(--azul);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
    min-height: 82px;
    padding: 7px;
    transition: .2s ease
}

.opcion:hover {
    box-shadow: 0 4px 12px #0000000f;
    transform: translateY(-1px)
}

.opcion.seleccionada {
    background: #e5f1fd;
    border-color: #c9def2
}

.opcion i {
    font-size: 17px
}

.opcion span {
    color: #0755b5;
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center
}

.boton-flecha {
    background: #fff;
    border: 1px solid #d8e1eb;
    border-radius: 6px;
    color: #0755b5;
    color: var(--azul);
    cursor: pointer;
    min-height: 82px
}

.boton-flecha,
.boton-flecha i {
    align-items: center;
    display: flex;
    justify-content: center
}

.boton-flecha i {
    border: 1px solid #0755b5;
    border: 1px solid var(--azul);
    border-radius: 15px;
    font-size: 13px;
    height: 39px;
    width: 39px
}

.boton-flecha:hover {
    background: #f0f7ff
}

.mensaje-opcion {
    background: #fff;
    border: 1px solid #e0e6eb;
    border-radius: 6px;
    color: #6b737a;
    font-size: 9px;
    margin-top: 10px;
    opacity: 0;
    padding: 10px;
    text-align: center;
    transition: opacity .2s ease;
    width: 100%
}

.mensaje-opcion.visible {
    opacity: 1
}

@media (max-width:1050px) {
    .pagina {
        grid-template-columns: 45% 55%
    }

    .contenedor-derecho {
        max-width: 390px
    }

    .zona-derecha {
        padding-left: 20px;
        padding-right: 20px
    }
}

@media (max-width:800px) {
    .pagina {
        flex-direction: column !important;
        max-width: 100vw !important
    }

    .pagina,
    .zona-derecha,
    .zona-izquierda {
        display: flex !important;
        overflow-x: hidden !important;
        width: 100% !important
    }

    .zona-derecha,
    .zona-izquierda {
        flex: 0 0 auto !important;
        justify-content: center !important;
        margin: 0 !important;
        max-width: 100% !important;
        min-height: auto !important;
        padding: 20px 15px !important
    }

    .contenedor-derecho,
    .contenedor-izquierdo {
        margin: 0 auto !important;
        max-width: 400px !important;
        padding: 0 10px !important;
        width: 100% !important
    }

    .zona-izquierda .logo {
        align-items: center !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
        justify-content: flex-start !important;
        margin-bottom: 16px !important;
        width: 100% !important
    }

    .logo h1 {
        color: #171717 !important;
        flex: 1 1 !important;
        font-size: 20px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        margin: 0 !important
    }

    .logo-simbolo {
        flex-shrink: 0 !important;
        height: 28px !important;
        width: 28px !important
    }

    .aviso {
        margin: 0 auto 12px !important
    }

    .aviso,
    .tarjeta-formulario {
        max-width: 100% !important;
        width: 100% !important
    }

    .tarjeta-formulario {
        margin: 0 auto !important
    }

    .formulario {
        padding: 20px 16px 19px !important
    }

    .identificacion {
        grid-gap: 10px !important;
        display: grid !important;
        gap: 10px !important;
        grid-template-columns: 1fr 1.5fr !important;
        width: 100% !important
    }

    .custom-select-container {
        display: none !important
    }

    .identificacion select {
        background: #fff !important;
        border: 1px solid #bfc4c9 !important;
        border-radius: 6px !important;
        color: #333 !important;
        display: block !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        height: 44px !important;
        outline: none !important;
        padding: 0 12px !important;
        width: 100% !important
    }

    .campo input,
    .identificacion input,
    .input-icono input {
        box-sizing: border-box !important;
        width: 100% !important
    }

    .enlaces-formulario {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 15px !important;
        justify-content: center !important;
        width: 100% !important
    }

    .enlaces-formulario .enlace {
        white-space: nowrap !important
    }

    .tabs {
        display: flex !important;
        gap: 5px !important;
        width: 100% !important
    }

    .tab,
    .tabs {
        height: auto !important
    }

    .tab {
        flex: 1 1 !important;
        font-size: 13px !important;
        padding: 12px 8px !important
    }

    .banner {
        overflow: hidden !important
    }

    .banner,
    .banner img {
        height: auto !important;
        width: 100% !important
    }

    .banner img {
        object-fit: contain !important
    }

    .opciones {
        -webkit-overflow-scrolling: touch !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        justify-content: flex-start !important;
        margin: 10px 0 !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 10px 0 !important;
        scroll-snap-type: x mandatory !important;
        width: 100% !important
    }

    .opcion {
        max-width: 120px !important;
        min-width: 100px !important;
        scroll-snap-align: start !important
    }

    .boton-flecha,
    .opcion {
        flex: 0 0 auto !important;
        min-height: 75px !important
    }

    .boton-flecha {
        align-items: center !important;
        display: flex !important;
        justify-content: center !important;
        width: 55px !important
    }

    .boton-flecha i {
        border-radius: 12px !important;
        font-size: 14px !important;
        height: 40px !important;
        width: 40px !important
    }

    .opciones::-webkit-scrollbar {
        display: none !important
    }

    .opciones {
        -ms-overflow-style: none !important;
        scrollbar-width: none !important
    }

    .mensaje-opcion {
        margin-top: 10px !important;
        padding: 12px !important;
        text-align: center !important;
        width: 100% !important
    }

    .captcha-demo {
        font-size: 10px !important;
        padding: 10px !important;
        text-align: center !important
    }

    .btn-ingresar {
        font-size: 14px !important;
        height: auto !important;
        padding: 14px 20px !important;
        width: 100% !important
    }

    .zona-derecha {
        padding: 20px 15px 30px !important
    }
}

@media (max-width:400px) {

    .contenedor-derecho,
    .contenedor-izquierdo {
        padding: 0 5px !important
    }

    .formulario {
        padding: 15px 12px 17px !important
    }

    .identificacion {
        gap: 8px !important;
        grid-template-columns: 1fr 1.2fr !important
    }

    .logo h1 {
        font-size: 16px !important
    }

    .opcion {
        max-width: 100px !important;
        min-height: 65px !important;
        min-width: 85px !important;
        padding: 6px !important
    }

    .opcion i {
        font-size: 14px !important
    }

    .opcion span {
        font-size: 8px !important
    }

    .boton-flecha {
        min-height: 65px !important;
        width: 45px !important
    }

    .boton-flecha i {
        font-size: 12px !important;
        height: 32px !important;
        width: 32px !important
    }
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid #3c8bd5;
    outline-offset: 2px
}

@media (prefers-reduced-motion:no-preference) {

    .banner-texto button,
    .boton-flecha,
    .btn-ingresar,
    .opcion {
        transition: transform .2s ease, background .2s ease, box-shadow .2s ease
    }
}

/*# sourceMappingURL=main.413d7fc7.css.map*/