/*--------------------------------------------------------------
# Error 404
--------------------------------------------------------------*/

:root {
    --primary-color: #000102;
    --secondary-color: #6c757d;
    --success-color: #198754;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #0dcaf0;
    --light-color: #f8f9fa;
    --dark-color: #212529;
    --light-bg: #f8fafc;
    --border-color: #e2e8f0;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --cuotas-bg: #eff6ff;
    --cuotas-border: #bfdbfe;
    --highlight-bg: #fef3c7;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --isp-color-negro: #010206;
    --isp-color-azul-negro: #0D113AFF;
    --isp-color-morado: #3C038C;
    --isp-color-morado-isp: #292655FF;
    --isp-color-azul: #2f549a;
    --isp-color-azul-sigob: #11308C;
    --isp-color-celeste: #B6DBF2;
    --isp-color-amarillo: #FADD52FF;
    --isp-color-rosa: #F55379FF;
    --isp-color-gris: #D1D2D2;
    --isp-color-blanco: #FFFFFF;
    --isp-color-celeste2: #569ff7;
}

/* Tamaño base para accesibilidad. NO usar rem aquí: el root es el ancla del
   escalado (el control A−/A/A+ ajusta este valor vía estilo inline). */
html {
    font-size: 22.5px;
}

/* Panel admin interno — contrarresta el escalado del html:18px */
.navbar-custom,
.topbar,
.leftside-menu,
.leftside-menu .side-nav-link,
.leftside-menu .side-nav-second-level a,
.dropdown-menu {
    font-size: 0.778rem;
}

.error-404 {
    padding: 30px;
}

.error-404 h1 {
    font-size: 10rem;
    font-weight: 700;
    color: #4154f1;
    margin-bottom: 0;
    line-height: 150px;
}

.error-404 h2 {
    font-size: 1.333rem;
    font-weight: 700;
    color: #012970;
    margin-bottom: 30px;
}

.error-404 .btn {
    background: #51678f;
    color: #fff;
    padding: 8px 30px;
}

.error-404 .btn:hover {
    background: #3e4f6f;
}

@media (min-width: 992px) {
    .error-404 img {
        max-width: 50%;
    }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {
    padding: 20px 0;
    font-size: 0.889rem;
    transition: all 0.3s;
    border-top: 1px solid #cddfff;
}

.footer .copyright {
    text-align: center;
    color: #012970;
}

.footer .credits {
    padding-top: 5px;
    text-align: center;
    font-size: 0.833rem;
    color: #012970;
}

.drop-area {
    border: 2px dashed #1c435e;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    font-size: 1.2em;
}

.highlight {
    background-color: #f0f0f0;
}

.file-list {
    margin-top: 10px;
}

/* Estilos para el dropzone */
.drop-zone {
    border: 2px dashed #ccc;
    padding: 20px;
    margin-bottom: 20px;
    cursor: pointer;
}

.dragover {
    border-color: #007bff;
}

.drop-zone ul {
    list-style: none;
    padding: 0;
}

.drop-zone ul li {
    margin-bottom: 5px;
}

.remove-btn {
    margin-left: 10px;
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
}

.bold {
    font-weight: bold;
}

.dataTables_wrapper .dt-buttons button {
    font-family: 'Roboto', sans-serif; /* Cambia la fuente de los botones */
    background-color: #192c3f; /* Cambia el color de fondo de los botones */
    color: #fff; /* Cambia el color del texto de los botones */
    border: none; /* Elimina los bordes de los botones */

}

.hidden-column {
    display: none;
}


[data-bs-theme=light] {
    /*.bg-logo {*/
    /*        background-color: #3a444e;*/
    /*        color: #000;*/
    /*}*/

    .logoispdark {
        display: none;
    }

    .logoisplight {

    }
}

[data-bs-theme=dark] {
    /*.bg-logo {*/
    /*    background-color: #000;*/
    /*    color: #000;*/
    /*}*/

    .logoispdark {

    }

    .logoisplight {
        display: none;
    }

}

/* Reducir el padding en las celdas */
#itemsTable td {
    padding: 4px; /* Reduce el espacio entre celdas */
}

/* Asegurar que los inputs llenen todo el ancho de la celda */
#itemsTable input {
    width: 100%; /* Ocupa todo el espacio disponible */
    box-sizing: border-box; /* Considera padding y bordes en el ancho */
    margin: 0; /* Elimina márgenes adicionales */
}

.select2-dropdown {
    width: 500px !important;
}

.back-to-top {
    position: fixed; /* Fija el botón en una posición */
    bottom: 20px; /* Distancia desde el borde inferior */
    right: 20px; /* Distancia desde el borde derecho */
    z-index: 1000; /* Asegura que quede encima de otros elementos */
    width: 50px; /* Ancho del botón */
    height: 50px; /* Altura del botón */
    border-radius: 50%; /* Forma circular */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para destacar */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Efectos suaves */
}

.back-to-top:hover {
    transform: scale(1.1); /* Efecto de agrandamiento al pasar el cursor */
}

.back-to-top.hidden {
    opacity: 0; /* Oculta el botón */
    pointer-events: none; /* Evita que interfiera al estar oculto */
}

.selected-row {
    background-color: #222b33; /* Un color de fondo suave */
}

.button-group {
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.button-group a {
    text-decoration: none;
    text-align: center;
    transition: transform 0.3s ease, color 0.3s ease;
}

.button-group a:hover {
    transform: scale(1.1);
    color: #007bff;
}

.button-group i {
    font-size: 2.5rem; /* Tamaño del icono */
    display: block;
    margin-bottom: 0.5rem;
}

.button-group p {
    font-size: 1rem;
    margin: 0;
    color: #6c757d;
}

.button-group a:hover i {
    color: #007bff;
}

.button-container {
    text-align: center;
}

.button-container a {
    display: inline-block;
    text-decoration: none;
    color: #6c757d; /* Color inicial del texto */
    transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.button-container a:hover {
    transform: scale(1.1); /* Agranda el botón */

    color: #007bff; /* Cambia el color del texto */
}

.button-container i {
    font-size: 2.5rem; /* Tamaño del ícono */
    transition: color 0.3s ease; /* Transición del color del ícono */
}

.button-container a:hover i {
    color: #007bff; /* Cambia el color del ícono en hover */
}

.button-container p {
    font-size: 1rem;
    margin-top: 0.5rem;
    transition: color 0.3s ease;
}

.button-container a:hover p {
    color: #007bff; /* Cambia el color del texto en hover */
}

.back-btn {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para destacar */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Efectos suaves */
    align-items: center;
    justify-content: center;

}

.back-btn:hover {
    transform: scale(1.1); /* Efecto de agrandamiento al pasar el cursor */
}

table.dataTable thead input[type="date"] {
    border: 1px solid #dee2e6;
    font-size: 0.85rem;
    padding: 2px 6px;
    height: 30px;
}

.bg-institucional-deg {
    background: linear-gradient(to right, #f25e86, #fbcf44);
}

.bg-institucional {
    background-color: #242a59;
}

.icon-background {
    display: inline-block;
    background: linear-gradient(to right, #f25e86, #fbcf44);
    background-size: 300% 100%;
    animation: moveGradient 3s linear 1s infinite alternate;
    padding: 10px; /* Asegura que el icono tenga suficiente espacio */
    border-radius: 50%; /* Para que sea redondeado si deseas */
    color: transparent; /* Hacemos que el icono sea transparente, solo vemos el fondo */
    -webkit-background-clip: text; /* Asegura que el gradiente se aplique al texto/icono */
    background-clip: text; /* Asegura que el gradiente se aplique al texto/icono */
}

.div-background-inst {
    display: inline-block;
    background: linear-gradient(to right, #f25e86, #fbcf44);
    background-size: 300% 100%;
    animation: moveGradient 3s linear 1s infinite alternate;
    padding: 10px; /* Asegura que el icono tenga suficiente espacio */
    border-radius: 50%; /* Para que sea redondeado si deseas */
    color: transparent; /* Hacemos que el icono sea transparente, solo vemos el fondo */
}

.animated-border-wrapper {
    display: inline-block;
    padding: 2px; /* Grosor del borde */
    border-radius: 50px;
    background: linear-gradient(to right, #f25e86, #fbcf44);
    background-size: 300% 100%;
    animation: moveGradient 3s linear infinite alternate;
}


@keyframes moveGradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 50% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}


.animated-border-wrapper button {
    transition: background-color 0.5s ease-out;
}

.animated-border-wrapper button:hover {
    /*max-width: 25%;
    border: none;
    font-weight: bold;
    */
}

.focusText {
    position: relative;
}

.focusText::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5px; /* Altura del subrayado */
    background: linear-gradient(to right, #f25e86, #fbcf44);
    color: #8C8C8C;
    border-radius: 2px; /* Esquinas redondeadas (opcional) */
    font-weight: bold;
}

.tagTitle {
    background-color: #F2F2F2;
    width: 25%;
    padding-left: 20px;
}

@media (max-width: 600px) {
    .animated-border-wrapper button {
        /*max-width: 25%;*/
        font-size: 6pt;
    }

    .tagTitle {
        width: 100%;
        text-align: center;
        padding-left: 0;
    }
}

.divLineStyle {
    position: relative;
    padding-bottom: 10px; /* espacio para el borde */
}

.divLineStyle::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px; /* grosor del "borde" */
    width: 100%;
    background: linear-gradient(to right, #f25e86, #fbcf44);
}

.animated-border-wrapper-aprobado {
    display: inline-block;
    padding: 3px; /* Grosor del borde */
    border-radius: 50px;
    background: linear-gradient(to right, #249b69, #62bd4d);
    /*background: linear-gradient(to right, #f25e86, #fbcf44);*/
    background-size: 300% 100%;
    animation: moveGradient 3s linear infinite alternate;
}

.animated-border-wrapper-vobo {
    display: inline-block;
    padding: 3px; /* Grosor del borde */
    border-radius: 50px;
    background: linear-gradient(to right, #222387, #fbcf44);
    /*background: linear-gradient(to right, #f25e86, #fbcf44);*/
    background-size: 300% 100%;
    animation: moveGradient 3s linear infinite alternate;
}

.animated-border-wrapper-denegado {
    display: inline-block;
    padding: 3px; /* Grosor del borde */
    border-radius: 50px;
    background: linear-gradient(to right, #da0000, #fbcf44);
    /*background: linear-gradient(to right, #f25e86, #fbcf44);*/
    background-size: 300% 100%;
    animation: moveGradient 3s linear infinite alternate;
}

.btn-inner {
    border: none;
    border-radius: 50px;
    padding: 10px 20px;
    color: black;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
}

.btn-inner:hover {
    transform: scale(1.1);
    color: #041f3b;
}

.btn-dark:hover {
    transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
    transform: scale(1.05);
    color: #041f3b;
}

.card {
    overflow: hidden;
}

.card-header-blue {
    position: relative;
    border-radius: 10px 10px 0 0 !important;
    background: linear-gradient(135deg, var(--primary-color), #0056b3, var(--primary-color));
    background-size: 300% 300%;
    animation: moverGradiente 12s ease-in-out infinite;
    overflow: hidden;
}

.card-subHeader-blue {
    position: relative;
    border-radius: 4px 4px 0 0 !important;
    background: #021331;
    background-size: 300% 300%;
    overflow: hidden;
}

.card-subHeader-blue h5 {
    font-size: 0.8rem; /* Reduce tamaño del título */
    margin: 0; /* Evita que agregue altura extra */
    line-height: 1; /* Compacta más */
}

.card-header-blue h4 {
    font-size: 1rem; /* Reduce tamaño del título */
    margin: 0; /* Evita que agregue altura extra */
    line-height: 1.2; /* Compacta más */
}

/* humo flotando */
.card-header-blue::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.08), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.05), transparent 60%);
    background-repeat: no-repeat;
    filter: blur(35px);
    animation: humoAnim 25s ease-in-out infinite alternate;
    pointer-events: none;
}

/* movimiento del degradado */
@keyframes moverGradiente {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* movimiento lento del humo */
@keyframes humoAnim {
    0% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(25px, -35px) scale(1.05);
    }
    100% {
        transform: translate(-20px, 30px) scale(1);
    }
}

/* Estilos para filas seleccionadas en DataTables */
table.dataTable tbody tr.selected {
    background-color: #727cf5 !important; /* Fondo verde */
    color: white !important; /* Texto blanco */
}

/* Asegurar que las celdas de la fila también adopten el color blanco */
table.dataTable tbody tr.selected td {
    color: white !important;
}

/* Opcional: Asegurar que los enlaces dentro de las filas seleccionadas sean visibles */
table.dataTable tbody tr.selected a {
    color: white !important;
}

/* Estilos para radio buttons tipo toggle */
.radio-toggle-group {
    display: inline-flex;
    gap: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.radio-toggle-input {
    display: none;
}

.radio-toggle-label {
    padding: 12px 24px;
    background-color: #f8f9fa;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid #e9ecef;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    user-select: none;
}

.radio-toggle-label:hover {
    background-color: #e9ecef;
}

.radio-toggle-input:checked + .radio-toggle-label {
    background-color: #010B40;
    color: white;
    border-color: #00265a;
    box-shadow: 0 2px 8px rgba(114, 124, 245, 0.4);
}

.radio-toggle-label i {
    font-size: 1rem;
}

/* Efecto de animación al cambiar */
.radio-toggle-label {
    position: relative;
    z-index: 1;
}

.radio-toggle-input:checked + .radio-toggle-label {
    z-index: 2;
    transform: scale(1.02);
}

/* Estilo para las tablas */
.h-table {
    /*background: radial-gradient(circle at left,#0D0D0D, #595959, #010D26);*/
    /*background: radial-gradient(circle at left,#010B40, #00265a, #010D26);*/
    -webkit-background-clip: content;
    background-clip: border-box;
    color: white !important;
    border-radius: 0.8rem 0.8rem 0 0;
}

.h-table th {
    color: white !important;
}

.h-table {
    position: relative;
    /*background: radial-gradient(circle at left,#010B40, #00265a, #010D26);*/
    color: white !important;
    border-radius: 0.8rem 0.8rem 0 0;
    z-index: 1;
    overflow: hidden;
}

/* Relleno que tapa el gradiente, dejando solo el borde */
.h-table::after {
    content: "";
    position: absolute;
    inset: 1px; /* debe ser igual al padding del ::before */
    border-radius: calc(0.8rem - 2px) calc(0.8rem - 2px) 0 0;
    background: radial-gradient(circle at left, #010B40, #00265a, #010D26);
    z-index: -1;
}

/* Para tablas secundarias */


@keyframes borderShine {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Para modificar el paginador del data table */
.active a {
    background: radial-gradient(circle at left, #010B40, #00265a, #010D26) !important;
    font-weight: bold;
    border: solid 1px #00265a;
}


.tag-bg-outline {
    border: solid 1px #00265a;
    color: black !important;
    background: none !important;
    border-radius: 35px;
}


.bank-cards-item__hint {
    position: absolute;
    top: -68px;
    left: calc(50% - 220px / 2);
    width: 220px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 8px;
    background: url("https://bato-web-agency.github.io/bato-shared/img/bank-cards/hint.svg");
    background-size: 100% 100%;
    border-radius: 10px;
    opacity: 0;
    transform: translateY(100%);
}

@keyframes hint {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }

    50% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-100%);
    }
}

.bank-cards-item__hint.shown {
    animation: hint 1.6s ease-in-out forwards;
}

.btn-circle {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    text-align: center;
}

/*.panelOpMenu {*/
/*  position: relative;*/
/*  background-size: cover;*/
/*  min-height: 200px;*/
/*  border-radius: 2px;*/
/*  border: solid 1px #D9D0D0;*/
/*  overflow: hidden;*/
/*  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;*/
/*}*/

.panelOpMenu::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px; /* grosor del borde degradado */
    background: linear-gradient(to right, #f25e86, #fbcf44);
}

/*.fondoIconos*/
/*{*/
/*  background: linear-gradient(to right, #f25e86, #fbcf44);*/
/*}*/

/* Nueva version */

.panelOpMenu {
    background-size: cover;
    min-height: 200px;
    border-radius: 2px;
    border: solid 1px #D9D0D0;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.panelOpMenu:hover {
    background-color: white; /* color de relleno al pasar el cursor */
    transform: translateY(-3px); /* pequeño efecto de elevación opcional */
    cursor: pointer;
}

.panelOpMenu a {
    color: inherit; /* mantiene el color del texto */
    text-decoration: none; /* quita subrayado */
}

.panelOpMenu:hover i,
.panelOpMenu:hover h4 {
    color: #1A1A18 !important; /* fuerza el color al pasar el cursor */
}

.badge.badge-small {
    font-size: 0.50rem; /* ~12px */
    padding: 0.35em 0.65em;
}

/*MENU FLOTANTE SCROLL*/
/* Menú flotante compacto con iconos circulares */
.menu {
    position: fixed;
    bottom: 10vh;
    right: 1vh;
    transform: translateY(-50%);
    z-index: 1000;
    width: auto;
}

.flotando {
    animation: flotar 4s ease-in-out infinite;
}

@keyframes flotar {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

.nav-pills {
    gap: 12px;
}

.nav-pills .nav-link {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border: 2px solid #e9ecef;
    color: #6c757d;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.nav-pills .nav-link:hover {
    background-color: #f8f9fa;
    border-color: #0d6efd;
    color: #0d6efd;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.2);
}

.nav-pills .nav-link.active {
    background: linear-gradient(135deg, var(--primary-color), #0056b3, var(--primary-color));
    border-color: var(--primary-color);
    color: white;
    transform: scale(1.15);
    background-size: 300% 300%;
    animation: moverGradiente 12s ease-in-out infinite;
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
    overflow: hidden;
}

.nav-pills .nav-link.active::before {
    content: attr(data-tooltip);
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.08), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.05), transparent 60%);
    background-repeat: no-repeat;
    filter: blur(35px);
    animation: humoAnim 25s ease-in-out infinite alternate;
    pointer-events: none;
}

.nav-pills .nav-link i {
    margin: 0;
    font-size: 1.222rem;
}

/* Tooltips para los iconos */
.nav-pills .nav-link::before {
    content: attr(data-tooltip);
    position: absolute;
    right: 60px;
    background-color: #333;
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.722rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.nav-pills .nav-link::after {
    content: '';
    position: absolute;
    right: 52px;
    border: 6px solid transparent;
    border-left-color: #333;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.nav-pills .nav-link:hover::before,
.nav-pills .nav-link:hover::after {
    opacity: 1;
}

/* movimiento del degradado */
@keyframes moverGradiente {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* movimiento lento del humo */
@keyframes humoAnim {
    0% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(25px, -35px) scale(1.05);
    }
    100% {
        transform: translate(-20px, 30px) scale(1);
    }
}


/*ESTILO PARA ERRORES*/
.error-container {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.error-icon {
    font-size: 6rem;
    color: #dc3545;
    text-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
}

.not-found-icon {
    font-size: 6rem;
    color: #dc6f35;
    text-shadow: 0 4px 8px rgba(220, 111, 53, 0.3);
}

.error-code {
    font-size: 4rem;
    font-weight: 700;
    color: #495057;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-custom {
    border-radius: 50px;
    padding: 12px 30px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    border: none;
    position: relative;
    overflow: hidden;
}


.btn-secondary-custom {
    background: linear-gradient(45deg, #6c757d, #495057);
    color: white;
}

.btn-custom:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.btn-custom::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn-custom:hover::before {
    left: 100%;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/*FIN*/

/*CALCULADORA MODAL*/

/* Modal personalizado */
.oferta-modal {
    border: none;
    border-radius: 11px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

/* Header con gradiente */
.oferta-header {
    position: relative;
    border-radius: 10px 10px 0 0 !important;
    background: linear-gradient(135deg, var(--primary-color), #0056b3, var(--primary-color));
    background-size: 300% 300%;
    animation: moverGradiente 12s ease-in-out infinite;
    overflow: hidden;
    color: white;
    padding: 1.5rem 2rem;
    border-bottom: none;
}

.oferta-header .modal-title {
    font-size: 1.25rem;
    letter-spacing: 0.5px;
}

/* Tabla principal */
.oferta-table {
    margin-bottom: 0;
}

.oferta-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s ease;
}

.oferta-table tbody tr:last-child {
    border-bottom: none;
}

.oferta-table tbody tr:hover {
    background-color: var(--light-bg);
}

.label-cell {
    font-weight: 600;
    color: var(--text-primary);
    padding: 1rem;
    width: 50%;
    font-size: 0.9rem;
    letter-spacing: 0.3px;
}

.value-cell {
    padding: 1rem;
    color: var(--text-primary);
    font-weight: 500;
}

.highlight-label {
    position: relative;
    background: #021331;
    border-bottom: 2px solid var(--cuotas-border);
    border-left: 4px solid var(--isp-color-negro);
}

.w-60 {
    width: 60% !important; /* Etiqueta más ancha */
}

.w-40 {
    width: 40% !important; /* Input/Valor más delgado */
}

/* Opcional: Ajustar el input-group-text dentro del select para que se vea bien */
.input-group-text.w-25 {
    width: 25% !important;
}

/* Inputs mejorados */
.oferta-input {
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 0.625rem 0.875rem;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.oferta-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    outline: none;
}

.oferta-input:hover {
    border-color: var(--primary-color);
}

/* Sección de cuotas */
.cuotas-section {
    border-radius: 10px;
    overflow: hidden;
}

.cuotas-header {
    position: relative;
    border-radius: 10px 10px 0 0 !important;
    background: linear-gradient(135deg, var(--primary-color), #0056b3, var(--primary-color));
    background-size: 300% 300%;
    animation: moverGradiente 12s ease-in-out infinite;
    overflow: hidden;
    padding: 1rem 1.5rem;
    border-bottom: 2px solid var(--cuotas-border);
}

/* humo flotando */
.cuotas-header::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.08), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.05), transparent 60%);
    background-repeat: no-repeat;
    filter: blur(35px);
    animation: humoAnim 25s ease-in-out infinite alternate;
    pointer-events: none;
}

.cuotas-header h6 {
    color: var(--primary-color);
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    text-align: center;
}

.cuotas-body {
    padding: 0.5rem;
    border-radius: 0px 0px 10px 10px;
    box-shadow: var(--shadow-sm);
    background-color: whitesmoke;
}

.cuotas-table {
    margin-bottom: 0;
}

.cuota-row {
    transition: all 0.2s ease;
    cursor: pointer;
}

.cuota-row:hover {
    background-color: rgba(191, 219, 254, 0.3);
}

.cuota-row.active {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.15) 0%, rgba(37, 99, 235, 0.05) 100%);
    border-left: 4px solid var(--primary-color);
}

.cuota-row.active .cuota-value {
    color: var(--primary-color);
    font-weight: 700;
}

.cuota-label {
    padding: 0.75rem 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.875rem;
    width: 50%;
}

.cuota-value {
    padding: 0.75rem 1rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
    font-size: 0.9rem;
}

/* Footer mejorado */
.oferta-footer {
    background-color: var(--light-bg);
    border-top: 1px solid var(--border-color);
    padding: 0.25rem 1rem;
}

/* Botones mejorados */
.btn-cerrar {
    background-color: var(--secondary-color);
    border: none;
    padding: 0.625rem 1.5rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-cerrar:hover {
    background-color: #475569;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Responsive */
@media (max-width: 768px) {
    .oferta-header {
        padding: 1rem 1.5rem;
    }

    .oferta-header .modal-title {
        font-size: 1rem;
    }

    .label-cell,
    .value-cell {
        padding: 0.75rem;
        font-size: 0.85rem;
    }

    .cuota-label,
    .cuota-value {
        padding: 0.625rem 0.75rem;
        font-size: 0.8rem;
    }

    .oferta-footer {
        padding: 1rem 1.5rem;
    }
}

.progressBar {
    background-color: #0D113A;
}

/*------------ ESTILO DE LOS MODALES DE CONFIRMACIÓN -----------*/
.swal2-confirm {
    border: solid 1px #00265a !important;
    color: #010B40 !important;
    background: none !important;
    border-radius: 10px !important;
    padding: 10px 20px;
    font-weight: bold;
    transition: all 0.8s ease, box-shadow 0.3s ease;

}

.swal2-confirm:hover {
    filter: brightness(1.1);
    cursor: pointer;
    background-color: #00265a !important;
    color: #F2F2F2 !important;
}

.swal2-cancel {
    border-radius: 10px !important;
    border: solid 1px #2c3e50 !important;
    background: none !important;
    color: #2c3e50 !important;
    transition: all 0.8s ease, box-shadow 0.3s ease;
}

.swal2-cancel:hover {
    filter: brightness(1.1);
    cursor: pointer;
    background-color: #5C6873 !important;
    color: #D9D9D9 !important;
    border: solid 1px #5C6873 !important;

}


.swal2-modal {
    border-radius: 20px !important;

}

.info-cliente-seccion {
    display: none;
}

.btn-primary-custom {
    background: linear-gradient(45deg, #010B40, #010D26);
    color: white;
}

/* MENU AZUL */

.leftside-menu .side-nav-second-level li .active span {
    /* 220 */
    background: radial-gradient(circle at left, #010B40, #0460D9, #010D26);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; /* Safari/Chrome */
    background-clip: text;
    color: transparent; /* fallback */
}

/* Estilo para mostrar seleccionada la opcion activa */
.leftside-menu .side-nav-second-level li .active {
    background: radial-gradient(circle at top left, #FFFFFF, #D0D8D9, #AAB4B6);
    color: #010D26 !important;
    border-radius: 25px 0px 0px 25px !important;
    font-weight: bold !important;
}

@media print {
    /* Oculta todo el contenido que no sea el modal */
    body > *:not(.modal-open):not(#ofertaComercialModal) {
        display: none !important;
    }

    .fila-reestruc {
        display: none !important;
    }

    #detalleOfertaResumen {
        width: 60%;
    }

    .cuotas-header,
    .cuotas-header h6 {
        color: black !important;
        background-color: white !important;
        box-shadow: none !important;
        /* Remover el padding/margen si causa problemas visuales en impresión */
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Asegurar que el texto que usa .text-light se imprima en negro */
    .cuotas-header .text-light {
        color: black !important;
    }

    .form-control,
    .form-select,
    .oferta-input, /* Tu clase personalizada */
    .oferta-select { /* Tu clase personalizada */
        border: none !important;
        background-color: white !important;
        box-shadow: none !important;
        /* Asegurarse que el texto es negro y no se corta */
        color: black !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 2. Hace que el contenido del modal sea el contenido principal del documento */
    #ofertaComercialModal,
    #ofertaComercialModal .modal-dialog,
    #ofertaComercialModal .modal-content {
        position: static !important; /* Desactiva el posicionamiento flotante */
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        color: black !important;
        border: none !important;
        background: white !important; /* Asegura un fondo blanco */
    }

    /* 3. Oculta elementos que no quieres en la impresión */
    .modal-title,
    .modal-backdrop, /* Oculta la sombra de fondo */
    .btn-close, /* Oculta el botón de cerrar del modal */
    .modal-footer /* Oculta el footer (ya lo manejamos con JS, pero doble seguridad) */
    {
        display: none !important;
    }

    /* 4. Asegura que el contenido sea visible */
    body {
        visibility: hidden; /* Oculta todo por defecto */
    }

    #ofertaComercialModal {
        visibility: visible; /* Muestra solo el modal */
    }

    .input-group-text {
        display: none !important;
    }

    /* 3. Asegurar que los contenedores no añadan espacio extra */
    .input-group {
        width: 100% !important;
        flex-wrap: nowrap !important; /* Evita saltos de línea inesperados */
    }

    /* Opcional: Para los campos sin input (solo texto) que quieres resaltar */
    .highlight-label {
        color: black !important; /* Asegura que la etiqueta sea negra */
        background-color: white !important; /* Oculta el fondo de color */
    }

    #notaLegalImpresion {
        display: block !important; /* Fuerza que aparezca */
        visibility: visible !important;
        color: black !important;
        font-size: 0.75rem !important; /* Letra un poco más pequeña */
        margin-top: 20px !important;
        border-top: 1px solid black !important; /* Línea separadora */
        padding-top: 10px !important;
    }

    .cuota-row:not(.active) {
        display: none !important;
    }

    /* 2. Asegurar que la fila activa se vea y resalte (opcionalmente) */
    .cuota-row.active {
        display: table-row !important;
        background-color: white !important;
        color: black !important;
        font-weight: bold !important; /* Negrita para resaltar la cuota elegida */
        border-bottom: 1px solid #000 !important; /* Opcional: un borde para encuadrarla */
    }

    #tasaInteresCal,
    #plazoMesesCal,
    #montoSolicitadoCal { /* Agregué monto por si acaso */
        width: auto !important;
        display: inline-block !important;
        flex: 0 0 auto !important;
    }

    /* 2. Para la TASA DE INTERÉS: Agrega '%' al final */
    .input-group:has(#tasaInteresCal)::after {
        content: "%" !important;
        color: black !important;
        margin-left: 1px;
        align-self: center; /* Alineación vertical */
    }

    /* BONUS: Para el MONTO SOLICITADO: Agrega '$' al inicio */
    .input-group:has(#montoSolicitadoCal)::before {
        content: "$ " !important;
        color: black !important;
        font-weight: bold;
        margin-right: 1px;
        align-self: center;
    }

    /* Aseguramos que el input-group se comporte como una línea de texto */
    .input-group {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }
}

.img-cst {
    max-width: 100%;
    height: auto;
}

.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, .9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.loading-box {
    text-align: center;
    padding: 30px 50px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .2);
}


/* Estilos simples para la tabla */
table.resultDetalle {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th.resultDetalle, td.resultDetalle {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

th.resultDetalle {
    background-color: #f2f2f2;
}

.btn-select {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}

.btn-select:hover {
    background-color: #0056b3;
}

/*.neon-text-dark-2 {*/
/*    !* 220 *!*/
/*    background: radial-gradient(circle at left,#010B40,#0460D9, #010D26);*/
/*    -webkit-background-clip: text;*/
/*    -webkit-text-fill-color: transparent; !* Safari/Chrome *!*/
/*    background-clip: text;*/
/*    color: transparent; !* fallback *!*/
/*}*/

.neon-text-warning {
    /* 220 */
    background: radial-gradient(circle at left, #872c00, #ff9300, #270e00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; /* Safari/Chrome */
    background-clip: text;
    color: transparent; /* fallback */
}

.neon-text-success {
    /* 220 */
    background: radial-gradient(circle at left, #29641c, #6ddc4f, #0b2907);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; /* Safari/Chrome */
    background-clip: text;
    color: transparent; /* fallback */
}

.neon-text-danger {
    /* 220 */
    background: radial-gradient(circle at left, #b91010, #e62525, #470606);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; /* Safari/Chrome */
    background-clip: text;
    color: transparent; /* fallback */
}

.neon-text-info {
    /* 220 */
    background: radial-gradient(circle at left, #1c3664, #3371ed, #112447);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; /* Safari/Chrome */
    background-clip: text;
    color: transparent; /* fallback */
}

.neon-text-ligth {
    /* 220 */
    background: radial-gradient(circle at left, #acacac, #ffffff, #676767);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; /* Safari/Chrome */
    background-clip: text;
    color: transparent; /* fallback */
}

.icon-circle {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at bottom, rgba(1, 13, 38, 1) 0%, rgba(4, 96, 217, 1) 100%);
}

/*SPINNER NUEVO*/
/* Fondo con desenfoque */
.fondo-blur {
    background-color: rgba(26, 26, 26, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 1000;
}

/*--- Configuración del Spinner ---*/

/* Tamaño del spinner */
.spinner-box {
    width: 150px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
}

/* ANIMACIÓN 1: Giro constante del contenedor total */
/* Esto hace que todo el conjunto rote a una velocidad constante */
.spinner-svg {
    animation: rotar-contenedor 2s linear infinite;
    transform-origin: center center;
    width: 100%;
    height: 100%;
    /* position: absolute; Si se necesita superponer algo en el centro */
}

/* ANIMACIÓN 2: El efecto de estirar y encoger la línea */
/* Se aplica directamente al círculo dentro del SVG */
.circle-path {
    /* Define los valores iniciales de la línea discontinua */
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    /* La magia ocurre aquí: animamos estas propiedades */
    animation: estirar-linea 1.5s ease-in-out infinite;
    stroke-linecap: round; /* Puntas redondeadas */
}

/*--- Keyframes (Las reglas de la animación) ---*/

/* Keyframe para el giro constante */
@keyframes rotar-contenedor {
    100% {
        transform: rotate(360deg);
    }
}

/* Keyframe complejo para el efecto de "gusano" que se estira */
/* Se basa en la circunferencia del círculo (aprox 125px en este viewBox) */
@keyframes estirar-linea {
    0% {
        stroke-dasharray: 1, 200; /* Empieza muy corto */
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89, 200; /* Se estira hasta casi el 75% del círculo */
        stroke-dashoffset: -35px; /* Se desplaza un poco hacia atrás */
    }
    100% {
        stroke-dasharray: 89, 200; /* Mantiene el largo */
        stroke-dashoffset: -124px; /* Pero la "cola" alcanza a la "cabeza" (casi una vuelta completa) */
    }
}

.texto-cargando {
    position: absolute;
    font-size: 0.9rem; /* Tamaño ajustado para encajar en el círculo */
    font-weight: 600;
    color: #fadd52; /* Color amarillo de tu gradiente, cámbialo a blanco si prefieres */
    letter-spacing: 1px; /* Separación elegante entre letras */
    text-transform: uppercase; /* Todo en mayúsculas se ve más limpio */

    /* Opcional: una suave animación de parpadeo (pulso) para darle vida */
    animation: pulso-texto 1.5s ease-in-out infinite alternate;
}

/* Animación opcional para el texto */
@keyframes pulso-texto {
    0% {
        opacity: 0.6;
    }
    100% {
        opacity: 1;
    }
}


/*--- Fin Configuración del Spinner ---*/

/* 1. Hacemos el switch un poco más ancho para que luzca moderno */
.form-switch .form-check-input {
    width: 2em;
    height: 1.1em;
    cursor: pointer;
}

/* 2. Estado Inactivo (Apagado) */
.form-check-input ~ .texto-switch::before {
    content: "NO";
    color: #6c757d; /* Color gris (muted) */
    font-size: 1rem;
}

/* 3. Estado Activo (Encendido) */
.form-check-input:checked ~ .texto-switch::before {
    content: "SÍ";
    color: #198754; /* Color verde (success) */
    font-size: 1rem;
}

/* Si quieres que los de alerta (OFAC/ONU) se pongan rojos al decir "SÍ",
   puedes crear una clase extra como esta: */
.switch-peligro:checked ~ .texto-switch::before {
    color: #dc3545 !important; /* Rojo (danger) */
}

.form-check-input ~ .texto-switch-header::before {
    content: "NO";
    color: rgba(255, 255, 255, 0.6); /* Blanco semitransparente apagado */
    font-size: 0.95rem;
}

.form-check-input:checked ~ .texto-switch-header::before {
    content: "SÍ";
    color: #ffffff; /* Blanco brillante encendido */
    font-size: 0.95rem;
}

.neon-text-dark {
    background: linear-gradient(90deg,
    #A6A6A6,
    #ACD1F2,
    #45628a
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.neon-text-dark-2 {
    background: radial-gradient(circle at left, #010B40, #0460D9, #010D26);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.focus-text-sm {
    position: relative;
}

.focus-text-sm::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px; /* Altura del subrayado */
    background: linear-gradient(to right, #f25e86, #fbcf44);
    color: #8C8C8C;
    border-radius: 2px; /* Esquinas redondeadas (opcional) */
    font-weight: bold;
}

.fontModern {
    font-family: "Figtree", sans-serif;
}

/* Ajuste para que el texto largo no se monte y sea responsive */
.side-nav-title {
    white-space: normal !important; /* Permite que el texto baje a la siguiente línea */
    line-height: 1.2 !important; /* Ajusta el espacio entre líneas */
    padding: 12px 20px !important; /* Espaciado interno elegante */
    font-size: 0.722rem !important; /* Tamaño estándar para títulos de sidebar */
    text-transform: uppercase; /* Todo en mayúsculas para estilo pro */
    letter-spacing: 0.05em;
    color: #8391a2; /* Color gris suave para títulos */
    display: block;
}

/* Evita que los iconos y el texto se peguen */
.side-nav-link i {
    margin-right: 10px;
}

/* ================================================================
   Solicitud Historial Laboral (hl/solicitudHL)
   ================================================================ */

/* Hero de bienvenida */
/* hero anterior removido — ahora usa degradado puro */

.hl-hero-content {
    position: relative;
    z-index: 1;
}

/* Tarjeta de panel en pantalla de inicio */
.hl-card {
    border: none;
    border-radius: 1.2rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(6px);
}

/* Logo en el hero */
.hl-logo {
    max-height: 90px;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}

/* Header del formulario (barra superior oscura) */
.hl-topbar {
    background: linear-gradient(90deg, #0D113A 0%, #1e3a7a 60%, #2f549a 100%);
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.35);
    position: sticky;
    top: 0;
    z-index: 100;
}

.hl-topbar-left {
    flex-shrink: 0;
}

.hl-topbar-logo {
    height: 38px;
}

.hl-topbar-center {
    flex: 1;
    text-align: center;
}

.hl-topbar-right {
    flex-shrink: 0;
}

.hl-topbar-title {
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.2;
}

.hl-topbar-badge {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 12px;
    border-radius: 20px;
    font-size: .7rem;
    font-weight: 600;
    background: rgba(255,255,255,0.18);
    color: #FADD52;
    letter-spacing: 0.05em;
    border: 1px solid rgba(250,221,82,0.4);
}

.hl-topbar-cancel {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    border-radius: 20px;
    padding: 5px 14px;
    font-size: .8rem;
    cursor: pointer;
    transition: background .2s;
}

.hl-topbar-cancel:hover {
    background: rgba(255,255,255,0.22);
}

/* Título del wizard */
.hl-wizard-title {
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--isp-color-azul);
}

/* Indicador de pasos */
.hl-step-item {
    flex: 1;
    text-align: center;
    padding: 6px 2px;
    border-bottom: 3px solid transparent;
    transition: all .25s;
}

.hl-step-item.active {
    border-bottom-color: var(--isp-color-azul);
}

.hl-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    background: #e2e8f0;
    color: #64748b;
    margin-bottom: 3px;
    transition: all .25s;
}

.hl-step-item.active .hl-step-num {
    background: var(--isp-color-azul);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(47,84,154,0.2);
}

.hl-step-item.done .hl-step-num {
    background: #198754;
    color: #fff;
}

.hl-step-lbl {
    font-size: 0.65rem;
    color: #94a3b8;
    white-space: nowrap;
}

.hl-step-item.active .hl-step-lbl {
    color: var(--isp-color-azul);
    font-weight: 600;
}

/* Card de cada paso */
.hl-paso-card {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    margin-bottom: 1.2rem;
}

.hl-paso-card .card-header {
    background: linear-gradient(90deg, #0D113A 0%, #2f549a 100%);
    color: #fff;
    border-radius: 1rem 1rem 0 0;
    padding: 14px 20px;
}

.hl-paso-card .card-header h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

/* Sección notificación física/electrónica */
.hl-seccion-titulo {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--isp-color-azul);
    border-left: 3px solid var(--isp-color-azul);
    padding-left: 8px;
    margin-bottom: 12px;
}

/* Botones de navegación del wizard */
.hl-btn-nav {
    min-width: 120px;
}

/* Tabla de historial */
.hl-tabla thead {
    background: linear-gradient(90deg, #0D113A 0%, #2f549a 100%);
    color: #fff;
}

/* Comprobante */
.hl-comprobante-header {
    background: linear-gradient(90deg, #198754, #20c997);
    color: #fff;
    border-radius: 1rem 1rem 0 0;
    padding: 16px 20px;
}

.hl-comprobante-row th {
    background: #f1f5f9;
    font-weight: 600;
    width: 40%;
}

/* Botones flotantes redes sociales */
.hl-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: #fff;
    border: 1px solid #dee2e6;
    color: #555;
    text-decoration: none;
    transition: background .2s, color .2s;
}

.hl-social-btn:first-child { border-radius: 8px 0 0 0; }
.hl-social-btn:last-child  { border-radius: 0 0 0 8px; }
.hl-social-btn:hover { background: var(--isp-color-azul); color: #fff; border-color: var(--isp-color-azul); }

/* Modos de carga HL */
.hl-modo-btn {
    min-width: 170px;
}

/* Preview imagen DUI */
.hl-dui-preview {
    max-height: 140px;
    border: 2px dashed #cbd5e1;
    border-radius: .5rem;
    object-fit: cover;
    width: 100%;
    margin-top: 8px;
}

/* Aviso representante */
.hl-aviso-rep {
    background: #eff6ff;
    border-left: 4px solid var(--isp-color-azul);
    border-radius: .5rem;
    padding: 10px 14px;
    font-size: .85rem;
    color: #1e40af;
}

/* Footer del hero */
.hl-footer-text {
    color: rgba(255,255,255,0.55);
    font-size: .78rem;
    text-align: center;
    margin-top: 1.5rem;
}

/*nuevo*/

/* ================================================================
   REDISEÑO PANTALLA INICIO — HISTORIAL LABORAL
   Agregar al final de style.css
   ================================================================ */

/* ---- HERO ACTUALIZADO ---- */
.hl-hero {
    background: linear-gradient(135deg, #040c2b 0%, #0D113A 35%, #1a3a7a 70%, #2f549a 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.hl-hero-content {
    position: relative;
    z-index: 1;
}

/* ---- ORBES DECORATIVOS ---- */
.hl-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.hl-orb--top-right {
    width: 520px;
    height: 520px;
    top: -200px;
    right: -160px;
    background: radial-gradient(circle, rgba(47, 84, 154, 0.40) 0%, transparent 70%);
    animation: hl-orb-float 9s ease-in-out infinite alternate;
}

.hl-orb--bottom-left {
    width: 420px;
    height: 420px;
    bottom: -160px;
    left: -110px;
    background: radial-gradient(circle, rgba(250, 221, 82, 0.18) 0%, transparent 70%);
    animation: hl-orb-float 11s ease-in-out infinite alternate-reverse;
}

.hl-orb--mid {
    width: 250px;
    height: 250px;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    background: radial-gradient(circle, rgba(182, 219, 242, 0.12) 0%, transparent 70%);
    animation: hl-orb-float 14s ease-in-out infinite alternate;
}

@keyframes hl-orb-float {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(18px, -28px) scale(1.06); }
}

/* ---- LOGO ---- */
.hl-logo-container {
    text-align: center;
    margin-bottom: 1.75rem;
    animation: hl-fade-down 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hl-logo {
    max-height: 90px;
    filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.45));
}

/* ---- CARD BASE ---- */
.hl-card {
    border: none !important;
    border-radius: 1.4rem !important;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.98) !important;
    animation: hl-fade-up 0.95s cubic-bezier(0.16, 1, 0.3, 1) both 0.18s;
}

/* ---- BARRA DORADA SUPERIOR ---- */
.hl-card-accent {
    height: 4px;
    background: linear-gradient(90deg, var(--isp-color-azul) 0%, var(--isp-color-celeste2) 50%, var(--isp-color-amarillo) 100%);
}

/* ---- CUERPO DEL CARD ---- */
.hl-card-body {
    padding: 1.75rem 2rem 1.65rem;
}

/* ---- BADGE DE SERVICIO ---- */
.hl-service-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(47, 84, 154, 0.08);
    color: var(--isp-color-azul);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    padding: 5px 13px;
    border-radius: 100px;
    margin-bottom: 1rem;
    border: 1px solid rgba(47, 84, 154, 0.18);
}

.hl-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--isp-color-azul);
    flex-shrink: 0;
    animation: hl-pulse-dot 2.2s ease-in-out infinite;
}

@keyframes hl-pulse-dot {
    0%, 100% { opacity: 1;   transform: scale(1);   }
    50%       { opacity: 0.5; transform: scale(0.75); }
}

/* ---- TIPOGRAFÍA CARD ---- */
.hl-card-title {
    font-size: 1.22rem;
    font-weight: 800;
    color: var(--isp-color-azul-negro);
    margin-bottom: 0.45rem;
    line-height: 1.3;
    letter-spacing: -0.015em;
}

.hl-card-subtitle {
    font-size: 0.87rem;
    color: #475569;
    margin-bottom: 1.1rem;
    line-height: 1.65;
}

/* ---- BLOQUE DE INFORMACIÓN ---- */
.hl-info-block {
    background: #f7faff;
    border-radius: 0.8rem;
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(47, 84, 154, 0.1);
}

.hl-info-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 0.55rem;
}

.hl-info-item:last-child {
    margin-bottom: 0;
}

.hl-info-icon {
    color: var(--isp-color-azul);
    font-size: 0.95rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.hl-info-text {
    font-size: 0.82rem;
    color: #4a5568;
    margin: 0;
    line-height: 1.55;
}

/* ---- TEXTO LEGAL ---- */
.hl-legal-text {
    font-size: 0.73rem;
    color: #94a3b8;
    line-height: 1.55;
    margin-bottom: 0;
    font-style: italic;
}

/* ---- DIVISOR ---- */
.hl-divider {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #e2e8f0 40%, #e2e8f0 60%, transparent 100%);
    margin: 1.15rem 0;
}

/* ---- CHECKBOX TÉRMINOS ---- */
.hl-terms-check {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 0.8rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1.15rem;
    transition: border-color 0.22s ease, background 0.22s ease;
    cursor: pointer;
}

.hl-terms-check:has(input:checked) {
    border-color: var(--isp-color-azul);
    background: rgba(47, 84, 154, 0.04);
}

.hl-terms-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
    margin: 0;
    cursor: pointer;
    user-select: none;
}

/* ---- GRUPO DE BOTONES CTA ---- */
.hl-cta-group {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

/* ---- BOTÓN PRIMARIO ---- */
.hl-btn-primary {
    width: 100%;
    padding: 0.875rem 1.5rem;
    background: linear-gradient(135deg, var(--isp-color-azul) 0%, var(--isp-color-azul-negro) 100%);
    color: #fff;
    border: none;
    border-radius: 100px;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.2s;
    position: relative;
    overflow: hidden;
}

.hl-btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 55%);
    opacity: 0;
    transition: opacity 0.3s;
}

.hl-btn-primary:hover:not(:disabled)::after {
    opacity: 1;
}

.hl-btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(47, 84, 154, 0.45);
}

.hl-btn-primary:active:not(:disabled) {
    transform: translateY(0px);
    box-shadow: none;
}

.hl-btn-primary:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

/* ---- BOTÓN GHOST / SECUNDARIO ---- */
.hl-btn-ghost {
    width: 100%;
    padding: 0.75rem 1.5rem;
    background: transparent;
    color: #64748b;
    border: 1.5px solid #dde3eb;
    border-radius: 100px;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.hl-btn-ghost:hover {
    border-color: var(--isp-color-azul);
    color: var(--isp-color-azul);
    background: rgba(47, 84, 154, 0.04);
}

/* ---- BOTÓN DANGER (mismo estilo que primario, en rojo) ---- */
.hl-btn-danger {
    width: 100%;
    padding: 0.875rem 1.5rem;
    background: linear-gradient(135deg, #e6494a 0%, #b7211f 100%);
    color: #fff;
    border: none;
    border-radius: 100px;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.2s;
}

.hl-btn-danger:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(220, 53, 69, 0.4);
}

.hl-btn-danger:active:not(:disabled) {
    transform: translateY(0px);
    box-shadow: none;
}

/* ---- FOOTER DEL HERO ---- */
.hl-footer-text {
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.76rem;
    text-align: center;
    margin-top: 1.4rem;
    animation: hl-fade-up 1s cubic-bezier(0.16, 1, 0.3, 1) both 0.5s;
}

/* ---- ANIMACIONES DE ENTRADA ---- */
@keyframes hl-fade-down {
    from { opacity: 0; transform: translateY(-22px); }
    to   { opacity: 1; transform: translateY(0);     }
}

@keyframes hl-fade-up {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ---- ALERTA dentro de cards ---- */
.hl-alert {
    font-size: 0.83rem;
    border-radius: 0.6rem;
    padding: 0.6rem 0.9rem;
}

/* ---- RESPONSIVE: pantallas muy pequeñas ---- */
@media (max-width: 400px) {
    .hl-card-body {
        padding: 1.4rem 1.25rem 1.25rem;
    }

    .hl-card-title {
        font-size: 1.08rem;
    }
}

/*wizard*/
/* ============================================================
   ISP — Paso 1: Identificación
   Estilos limpios y profesionales
   ============================================================ */

/* ---- Variables de color ISP ---- */
:root {
    --isp-azul:       #2f549a;
    --isp-azul-dark:  #0D113A;
    --isp-amarillo:   #FADD52;
    --isp-error:      #e24b4a;

    --bg-primary:     #ffffff;
    --bg-secondary:   #f8fafc;
    --text-primary:   #1e293b;
    --text-secondary: #64748b;
    --text-tertiary:  #94a3b8;
    --border-default: #e2e8f0;
    --border-focus:   #2f549a;
    --radius-sm:      6px;
    --radius-md:      8px;
    --radius-lg:      12px;
    --radius-xl:      14px;
    --radius-pill:    100px;
}

/* ---- Reset básico ---- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f1f5f9;
    color: var(--text-primary);
}

/* ---- Contenedor principal ---- */
.wrapper {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 0.5px solid var(--border-default);
    max-width: 43.33rem;
    margin: 0 auto;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
}

/* ============================================================
   BARRA SUPERIOR
   ============================================================ */
.topbar {
    background: linear-gradient(90deg, var(--isp-azul-dark) 0%, var(--isp-azul) 100%);
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.topbar-logo {
    height: 32px;
    background: #fff;
    border-radius: var(--radius-sm);
    padding: 3px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.778rem;
    color: var(--isp-azul-dark);
    letter-spacing: 1px;
    flex-shrink: 0;
}

.topbar-center {
    flex: 1;
    text-align: center;
}

.topbar-title {
    color: #fff;
    font-size: 0.722rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2;
}

.topbar-badge {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.611rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.15);
    color: var(--isp-amarillo);
    border: 1px solid rgba(250, 221, 82, 0.3);
}

.topbar-cancel {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 0.667rem;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}

.topbar-cancel:hover {
    background: rgba(255, 255, 255, 0.22);
}

/* ============================================================
   INDICADOR DE PASOS
   ============================================================ */
.steps-bar {
    background: var(--bg-primary);
    border-bottom: 0.5px solid var(--border-default);
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
}

/* Línea conectora entre pasos */
.step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 14px;
    left: calc(50% + 14px);
    right: calc(-50% + 14px);
    height: 1.5px;
    background: var(--border-default);
}

.step.done:not(:last-child)::after {
    background: var(--isp-azul);
}

.step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.611rem;
    font-weight: 500;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1.5px solid var(--border-default);
    position: relative;
    z-index: 1;
    transition: all 0.25s ease;
}

.step.active .step-num {
    background: var(--isp-azul);
    color: #fff;
    border-color: var(--isp-azul);
    box-shadow: 0 0 0 4px rgba(47, 84, 154, 0.18);
}

.step.done .step-num {
    background: var(--isp-azul);
    color: #fff;
    border-color: var(--isp-azul);
}

.step-lbl {
    font-size: 0.556rem;
    color: var(--text-tertiary);
    margin-top: 5px;
    white-space: nowrap;
}

.step.active .step-lbl {
    color: var(--isp-azul);
    font-weight: 600;
}

.step.done .step-lbl {
    color: var(--isp-azul);
}

/* ============================================================
   ÁREA DEL FORMULARIO
   ============================================================ */
.form-area {
    padding: 24px;
    background: var(--bg-primary);
}

/* Encabezado de sección */
.section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 0.5px solid var(--border-default);
}

.section-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    background: rgba(47, 84, 154, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.section-icon svg {
    width: 17px;
    height: 17px;
}

.section-title {
    font-size: 0.778rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}

.section-sub {
    font-size: 0.667rem;
    color: var(--text-secondary);
    margin-top: 1px;
}

/* ============================================================
   GRIDS DE CAMPOS
   ============================================================ */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.grid-full {
    grid-column: 1 / -1;
}

/* ============================================================
   CAMPOS DE FORMULARIO
   ============================================================ */
.field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.field label {
    font-size: 0.667rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.field label .req {
    color: var(--isp-error);
    margin-left: 2px;
}

.field label .opt {
    color: var(--text-tertiary);
    font-weight: 400;
    font-size: 0.611rem;
}

/* Input con botón de búsqueda */
.input-wrap {
    display: flex;
    align-items: center;
    border: 0.5px solid var(--border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-primary);
    transition: border-color 0.2s;
}

.input-wrap:focus-within {
    border-color: var(--border-focus);
}

.input-wrap input {
    flex: 1;
    border: none;
    outline: none;
    padding: 9px 12px;
    font-size: 0.722rem;
    background: transparent;
    color: var(--text-primary);
}

.input-wrap input::placeholder {
    color: var(--text-tertiary);
}

.search-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--isp-azul);
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
}

.search-btn:hover {
    background: var(--isp-azul-dark);
}

.search-btn svg {
    width: 15px;
    height: 15px;
}

/* Input normal */
.plain-input {
    border: 0.5px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 9px 12px;
    font-size: 0.722rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    width: 100%;
    outline: none;
    transition: border-color 0.2s;
}

.plain-input:focus {
    border-color: var(--border-focus);
}

.plain-input::placeholder {
    color: var(--text-tertiary);
}

.plain-input[readonly] {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: default;
}

/* Select */
.select-wrap {
    position: relative;
}

.select-wrap::after {
    content: '';
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--text-secondary);
    pointer-events: none;
}

.select-input {
    border: 0.5px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 9px 36px 9px 12px;
    font-size: 0.722rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    width: 100%;
    outline: none;
    appearance: none;
    cursor: pointer;
    transition: border-color 0.2s;
}

.select-input:focus {
    border-color: var(--border-focus);
}

/* ============================================================
   DIVISOR Y SUBTÍTULOS INTERNOS
   ============================================================ */
.divider {
    height: 0.5px;
    background: var(--border-default);
    margin: 22px 0;
}

.sub-label {
    font-size: 0.611rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--isp-azul);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.sub-label::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 13px;
    background: var(--isp-azul);
    border-radius: 2px;
}

/* ============================================================
   SECCIÓN DOCUMENTOS DUI
   ============================================================ */
.dui-section {
    /* sin margen adicional, el divider ya separa */
}

.dui-note {
    font-size: 0.611rem;
    color: var(--text-tertiary);
    padding: 9px 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    border-left: 2px solid var(--border-default);
    line-height: 1.55;
    margin-bottom: 14px;
}

.dui-uploads {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.upload-zone {
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-lg);
    padding: 22px 14px;
    text-align: center;
    background: var(--bg-secondary);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.upload-zone:hover {
    border-color: var(--isp-azul);
    background: rgba(47, 84, 154, 0.04);
}

.upload-zone svg {
    width: 22px;
    height: 22px;
    margin-bottom: 7px;
}

.upload-label {
    font-size: 0.667rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 3px;
}

.upload-label .req {
    color: var(--isp-error);
    margin-left: 2px;
}

.upload-sub {
    font-size: 0.611rem;
    color: var(--text-tertiary);
}

/* Preview imagen DUI */
.dui-preview {
    max-height: 130px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    object-fit: cover;
    width: 100%;
    margin-top: 10px;
}


/* ============================================================
   ALERTA DE ERROR
   ============================================================ */
.alert-error {
    font-size: 0.722rem;
    color: #991b1b;
    background: #fef2f2;
    border: 0.5px solid #fecaca;
    border-radius: var(--radius-md);
    padding: 10px 14px;
    margin-top: 16px;
}

/* ============================================================
   BOTONES DE NAVEGACIÓN
   ============================================================ */
.footer-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 26px;
    padding-top: 18px;
    border-top: 0.5px solid var(--border-default);
}

.btn-back {
    border: 0.5px solid var(--border-default);
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-pill);
    padding: 9px 20px;
    font-size: 0.722rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: border-color 0.2s, color 0.2s;
}

.btn-back:hover {
    border-color: var(--isp-azul);
    color: var(--isp-azul);
}

.btn-next {
    background: linear-gradient(135deg, var(--isp-azul) 0%, var(--isp-azul-dark) 100%);
    color: #fff;
    border: none;
    border-radius: var(--radius-pill);
    padding: 10px 26px;
    font-size: 0.722rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-next:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(47, 84, 154, 0.35);
}

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

/* ============================================================
   RESPONSIVE — pantallas pequeñas
   ============================================================ */
@media (max-width: 560px) {
    .grid-2 {
        grid-template-columns: 1fr;
    }

    .grid-full {
        grid-column: 1;
    }

    .dui-uploads {
        grid-template-columns: 1fr;
    }

    .steps-bar {
        padding: 12px 10px;
    }

    .step-lbl {
        display: none;
    }

    .form-area {
        padding: 18px 16px;
    }

    .topbar {
        padding: 10px 16px;
    }

    .topbar-title {
        font-size: 0.611rem;
    }
}

/* ================================================================
   ISP — WIZARD HISTORIAL LABORAL
   wizard.css — Layout full-width, elegante y profesional
   Requiere: Bootstrap 5, icons.min.css (Remix Icons)
================================================================ */

/* ----------------------------------------------------------------
   TOPBAR
---------------------------------------------------------------- */
.isp-topbar {
    background: linear-gradient(90deg, #0D113A 0%, #2f549a 100%);
    padding: 11px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.isp-topbar-left { flex-shrink: 0; }

.isp-topbar-logo { height: 36px; }

.isp-topbar-center {
    flex: 1;
    text-align: center;
}

.isp-topbar-title {
    color: #fff;
    font-size: 0.667rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.2;
}

.isp-topbar-badge {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.556rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.15);
    color: #FADD52;
    border: 1px solid rgba(250, 221, 82, 0.3);
    letter-spacing: 0.05em;
}

.isp-topbar-right { flex-shrink: 0; }

.isp-topbar-cancel {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 0.611rem;
    cursor: pointer;
    transition: background 0.2s;
}

.isp-topbar-cancel:hover {
    background: rgba(255, 255, 255, 0.22);
}

/* ----------------------------------------------------------------
   STEPS BAR
---------------------------------------------------------------- */
.isp-steps-wrap {
    background: #ffffff;
    border-bottom: 0.5px solid #e2e8f0;
}

.isp-steps-bar {
    display: flex;
    align-items: center;
    padding: 14px 0;
    width: 100%;
}

.isp-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
    padding: 0 2px;
}

.isp-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 14px;
    left: calc(50% + 14px);
    right: calc(-50% + 14px);
    height: 1.5px;
    background: #e2e8f0;
}

.isp-step.done:not(:last-child)::after {
    background: #2f549a;
}

.isp-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.611rem;
    font-weight: 600;
    background: #f8fafc;
    color: #64748b;
    border: 1.5px solid #e2e8f0;
    position: relative;
    z-index: 1;
    transition: all 0.25s ease;
}

.isp-step.active .isp-step-num {
    background: #2f549a;
    color: #fff;
    border-color: #2f549a;
    box-shadow: 0 0 0 4px rgba(47, 84, 154, 0.18);
}

.isp-step.done .isp-step-num {
    background: #2f549a;
    color: #fff;
    border-color: #2f549a;
}

.isp-step-lbl {
    font-size: 0.556rem;
    color: #94a3b8;
    margin-top: 5px;
    white-space: nowrap;
}

.isp-step.active .isp-step-lbl {
    color: #2f549a;
    font-weight: 600;
}

.isp-step.done .isp-step-lbl {
    color: #2f549a;
}

/* ----------------------------------------------------------------
   FORM AREA
---------------------------------------------------------------- */
.isp-form-area {
    background: #f1f5f9;
    min-height: calc(100vh - 120px);
    padding: 24px 0 48px;
}

/* ----------------------------------------------------------------
   PASO CARD
---------------------------------------------------------------- */
.isp-paso-card {
    background: #ffffff;
    border: 0.5px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    margin-bottom: 20px;
}

.isp-card-head {
    background: linear-gradient(90deg, #0D113A 0%, #2f549a 100%);
    color: #fff;
    padding: 13px 22px;
    font-size: 0.722rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 9px;
}

.isp-card-head i {
    font-size: 0.889rem;
}

.isp-card-body {
    padding: 22px 24px;
}

/* ----------------------------------------------------------------
   SUB-LABEL
---------------------------------------------------------------- */
.isp-sub-label {
    font-size: 0.611rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #2f549a;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.isp-sub-label::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 13px;
    background: #2f549a;
    border-radius: 2px;
}

/* ----------------------------------------------------------------
   LABELS
---------------------------------------------------------------- */
.isp-label {
    font-size: 0.611rem;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 5px;
    display: block;
}

.isp-req {
    color: #e24b4a;
    margin-left: 2px;
}

.isp-opt {
    color: #94a3b8;
    font-weight: 400;
    font-size: 0.556rem;
}

/* ----------------------------------------------------------------
   INPUTS
---------------------------------------------------------------- */
.isp-input {
    border: 0.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 0.722rem;
    background: #ffffff;
    color: #1e293b;
    width: 100%;
    outline: none;
    transition: border-color 0.2s;
    font-family: inherit;
}

.isp-input:focus {
    border-color: #2f549a;
    box-shadow: 0 0 0 3px rgba(47, 84, 154, 0.08);
}

.isp-input::placeholder {
    color: #94a3b8;
}

.isp-input[readonly] {
    background: #f8fafc;
    color: #64748b;
    cursor: default;
}

/* Input con botón búsqueda */
.isp-input-group {
    display: flex;
    align-items: center;
    border: 0.5px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.2s;
}

.isp-input-group:focus-within {
    border-color: #2f549a;
    box-shadow: 0 0 0 3px rgba(47, 84, 154, 0.08);
}

.isp-input-group .isp-input {
    border: none;
    border-radius: 0;
    box-shadow: none !important;
}

.isp-search-btn {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2f549a;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}

.isp-search-btn:hover {
    background: #0D113A;
}

.isp-search-btn i {
    color: #fff;
    font-size: 0.833rem;
}

/* Select */
.isp-select-wrap {
    position: relative;
}

.isp-select-wrap::after {
    content: '';
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #64748b;
    pointer-events: none;
}

.isp-select {
    border: 0.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 9px 32px 9px 12px;
    font-size: 0.722rem;
    background: #ffffff;
    color: #1e293b;
    width: 100%;
    outline: none;
    appearance: none;
    cursor: pointer;
    transition: border-color 0.2s;
    font-family: inherit;
}

.isp-select:focus {
    border-color: #2f549a;
    box-shadow: 0 0 0 3px rgba(47, 84, 154, 0.08);
}

/* Textarea */
.isp-textarea {
    border: 0.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 0.722rem;
    background: #ffffff;
    color: #1e293b;
    width: 100%;
    outline: none;
    resize: vertical;
    min-height: 72px;
    transition: border-color 0.2s;
    font-family: inherit;
}

.isp-textarea:focus {
    border-color: #2f549a;
    box-shadow: 0 0 0 3px rgba(47, 84, 154, 0.08);
}

/* ----------------------------------------------------------------
   DIVISOR
---------------------------------------------------------------- */
.isp-divider {
    height: 0.5px;
    background: #e2e8f0;
    margin: 20px 0;
}

/* ----------------------------------------------------------------
   UPLOAD DUI
---------------------------------------------------------------- */
.isp-dui-note {
    font-size: 0.611rem;
    color: #94a3b8;
    padding: 9px 12px;
    background: #f8fafc;
    border-radius: 6px;
    border-left: 2px solid #e2e8f0;
    line-height: 1.55;
    margin-bottom: 14px;
}

.isp-upload-zone {
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    padding: 24px 14px;
    text-align: center;
    background: #f8fafc;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    height: 100%;
    min-height: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.isp-upload-zone:hover {
    border-color: #2f549a;
    background: rgba(47, 84, 154, 0.04);
}

.isp-upload-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(47, 84, 154, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}

.isp-upload-icon i {
    font-size: 1.111rem;
    color: #2f549a;
}

.isp-upload-lbl {
    font-size: 0.667rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 2px;
}

.isp-upload-sub {
    font-size: 0.611rem;
    color: #94a3b8;
}

.isp-dui-preview {
    max-height: 130px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    object-fit: cover;
    width: 100%;
    margin-top: 10px;
}

/* ----------------------------------------------------------------
   FOOTER NAVEGACIÓN
---------------------------------------------------------------- */
.isp-paso-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 0.5px solid #e2e8f0;
}

.isp-btn-back {
    border: 0.5px solid #e2e8f0;
    background: transparent;
    color: #64748b;
    border-radius: 100px;
    padding: 9px 22px;
    font-size: 0.722rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: border-color 0.2s, color 0.2s;
    font-family: inherit;
}

.isp-btn-back:hover {
    border-color: #2f549a;
    color: #2f549a;
}

.isp-btn-next {
    background: linear-gradient(135deg, #2f549a 0%, #0D113A 100%);
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: 10px 28px;
    font-size: 0.722rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: transform 0.2s, box-shadow 0.2s;
    font-family: inherit;
}

.isp-btn-next:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(47, 84, 154, 0.35);
}

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

/* ----------------------------------------------------------------
   TABLA HISTORIAL
---------------------------------------------------------------- */
.isp-tabla thead {
    background: linear-gradient(90deg, #0D113A 0%, #2f549a 100%);
    color: #fff;
}

.isp-tabla thead th {
    font-weight: 600;
    font-size: 0.667rem;
    padding: 10px 12px;
    color: #fff !important;
}

/* ----------------------------------------------------------------
   AVISO REPRESENTANTE
---------------------------------------------------------------- */
.isp-aviso-rep {
    background: #eff6ff;
    border-left: 4px solid #2f549a;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 0.85rem;
    color: #1e40af;
}

/* ----------------------------------------------------------------
   COMPROBANTE
---------------------------------------------------------------- */
.isp-comprobante-header {
    background: linear-gradient(90deg, #198754, #20c997);
    color: #fff;
    border-radius: 14px 14px 0 0 !important;
    padding: 16px 22px;
}

/* ----------------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------------- */
@media (max-width: 768px) {
    .isp-topbar {
        padding: 10px 16px;
    }

    .isp-topbar-title {
        font-size: 0.556rem;
    }

    .isp-card-body {
        padding: 16px;
    }

    .isp-paso-footer {
        flex-direction: column-reverse;
        gap: 10px;
    }

    .isp-btn-back,
    .isp-btn-next {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 560px) {
    .isp-steps-bar {
        padding: 12px 4px;
    }

    .isp-step-lbl {
        display: none;
    }
}

/* ============================================================================
   Compatibilidad selectorTelefonoPais con .hl-input (Global)
   ============================================================================ */
.input-group .hl-input {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    padding: 10px 14px !important;
    font-size: 0.85rem !important;
}
.input-group .btn.dropdown-toggle {
    border-color: #94a3b8 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-size: 0.85rem !important;
    background-color: #f8fafc !important;
    color: #1e293b !important;
}
.input-group .btn.dropdown-toggle:hover {
    background-color: #e2e8f0 !important;
}