:root {
    --olive-900: #2f3b1f;
    --olive-800: #3b4a27;
    --olive-700: #495a30;
    --olive-500: #6e8b3d;
    /* seleccionado */
    --olive-300: #a6c36f;
    --paper: #ffffff;
    --ink: #1f2614;
    --olv-bg: #3f5e2e;
    /* banda de fondo */
    --olv-900: #0f2707;
    /* activo profundo */
    --olv-800: #163913;
    --olv-700: #1f4b19;
    --chip-bg: #ffffff;
    /* chip normal */
    --chip-txt: #2a3a25;
}

/* === WRAPPERS GENERALES: texto / número / tel === */
.input-wrap,
.date-wrap {
    position: relative;
    display: flex;
    /* antes inline-flex */
    align-items: center;
    width: 100%;
    /* SIEMPRE ocupar todo el col-md-X   */
    max-width: 100%;
    /* evita que se quede “chico”        */
    background: var(--paper);
    border: 2px solid var(--olive-700);
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
    transition: border-color .2s, box-shadow .2s;
    cursor: text;
}

/* Si quieres limitar en pantallas grandes, solo como máximo */
@media (min-width: 1200px) {

    .input-wrap,
    .date-wrap {
        max-width: 508px;
        /* opcional: quítalo si quieres full-width siempre */
    }
}

.input-wrap:hover,
.date-wrap:hover {
    border-color: var(--olive-500);
}

/* Inputs internos: que ocupen todo el wrapper */
.input-field,
.date-field {
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    padding: 14px 44px 14px 16px;
    width: 100%;
    letter-spacing: .3px;
}

/* === Estado deshabilitado: text + date === */
.input-field:disabled,
.input-field[disabled],
.date-field:disabled,
.date-field[disabled] {
    background: #eef0e8;
    /* mismo tono que los otros disabled */
    color: #9aa18a;
    cursor: not-allowed;
}

/* Placeholder cuando está deshabilitado (date & text) */
.input-field:disabled::placeholder,
.input-field[disabled]::placeholder,
.date-field:disabled::placeholder,
.date-field[disabled]::placeholder {
    color: #b0b7a5;
    opacity: 0.9;
}

/* (Opcional) wrapper del date cuando lo deshabilites */
.date-wrap.is-disabled {
    border-color: #c4c9b7;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
    opacity: 0.8;
    cursor: not-allowed;
}

/* Icono de los inputs (texto, número, tel, etc.) */
.input-icon,
.date-icon {
    position: absolute;
    right: 12px;
    width: 22px;
    height: 22px;
    fill: var(--olive-700);
    pointer-events: none;
}

/* Teléfono con intl-tel-input: que respete el ancho del wrapper */
.input-wrap .iti {
    width: 100%;
}


/* Responsive: separaciones entre filas en pantallas chicas */
@media (max-width: 767.98px) {
    #tabDatosPersonalesAgregar .form-group {
        margin-bottom: 1rem;
    }
}


/* === Tema Flatpickr en olivo === */
.flatpickr-calendar {
    border: 1px solid var(--olive-700);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .30);
    border-radius: 10px;
    overflow: hidden;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Barra superior y encabezados de días EN BLANCO */
.flatpickr-months,
.flatpickr-weekdays {
    background: var(--olive-800) !important;
    color: #fff !important;
}

.flatpickr-weekday {
    color: #fff !important;
    font-weight: 600;
}

/* Mes y año en blanco */
.flatpickr-current-month .cur-month,
.flatpickr-current-month input.cur-year {
    color: #fff !important;
    font-weight: 700;
}

/* Flechas (prev/next) en blanco */
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    fill: #fff !important;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--olive-300) !important;
}

/* Dropdown del mes y controles numéricos */
.flatpickr-current-month .flatpickr-monthDropdown-months {
    color: #fff !important;
    background: var(--olive-800) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-current-month .numInputWrapper:hover {
    background: var(--olive-700) !important;
}

.flatpickr-current-month .numInputWrapper span.arrowUp:after,
.flatpickr-current-month .numInputWrapper span.arrowDown:after {
    border-top-color: #fff !important;
    border-bottom-color: #fff !important;
}

/* Días */
.flatpickr-day {
    color: #2b2f24;
    border-radius: 6px;
    transition: background-color .2s, color .2s, border-color .2s;
}

/* Hoy (borde olivo) */
.flatpickr-day.today {
    border-color: var(--olive-500) !important;
    color: var(--olive-700);
}

.flatpickr-day.today:hover {
    background: color-mix(in srgb, var(--olive-500) 25%, #fff);
}

/* Seleccionado / rangos — VERDE OLIVO + texto blanco */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected:focus {
    background: var(--olive-500) !important;
    border-color: var(--olive-500) !important;
    color: #fff !important;
}

/* Hover general */
.flatpickr-day:not(.selected):hover {
    background: color-mix(in srgb, var(--olive-300) 35%, #fff);
    border-color: var(--olive-300);
}

/* Deshabilitados / días de otro mes */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.nextMonthDay,
.flatpickr-day.prevMonthDay {
    color: #c7c7c7 !important;
    cursor: not-allowed;
}

.login-body {
    background-color: olivedrab;
}

.border-card-login {
    border-top: 3px solid #295b28;
    background-color: rgba(0, 100, 0, 0.818);
    width: 100%;
}

.text-title-login {
    color: aliceblue;
}

.fin-text-white {
    color: white;
}

.fondo_cliente_add_modal {
    background-color: rgba(103, 190, 77, 0.733);
}

.bg-financiera-success {
    background-color: rgba(61, 83, 22, 0.767);
}

.bg-financiera-danger {
    background-color: #e68248;
}

.bg-financiera-success2 {
    background-color: rgba(47, 79, 79, 0.753);
    color: white;
}

.fondo-tipo-cliente {
    background-color: rgba(7, 39, 77, 0.877);
}

.fondo_cliente_edit_modal {
    background-color: rgba(39, 90, 24, 0.877);
    color: aliceblue;
}

.fondo-modal-add-inv {
    background-color: rgba(8, 66, 137, 0.779);
    color: white;
}

.fondo-graficas {
    background-color: rgba(181, 255, 200, 0.641);
    color: rgb(0, 0, 0);
}

.fondo-tabs {
    background-color: rgba(0, 100, 0, 0.818);
    color: white;
}

.text-title-cat {
    color: black;
}

.btnCloseColor {
    color: aliceblue;
}

.divider {
    color: white;
    background-color: white;
}

table {
    display: inline-flexbox;
}

.bg-modalVoucher {
    background-color: rgba(85, 107, 47, 0.818);
    color: white !important;
    border-radius: 5px;
}

/* Modal purple */
.bg-modal-purple {
    background: linear-gradient(45deg, rgba(128, 0, 128, 0.818), rgba(75, 0, 130, 0.818));
    color: white !important;
    border-radius: 5px;
}

/* Para los cards personalizados de la financiera */
/* Tarjeta con fondo sólido en tono morado claro */
.card-purple {
    background-color: #760d86b1;
    /* fondo morado muy claro */
    border-top: 3px solid #b39ddb;
    /* borde superior con un morado más intenso */
    color: #4a148c;
    /* color de texto, puedes ajustarlo según el contraste que desees */
}

/* Tarjeta con solo contorno en tono morado claro */
.card-outline-purple {
    border: 1px solid #b39ddb;
    /* borde en tono morado */
    color: #fff;
    /* el texto toma el mismo tono del borde */
}

/* Contenedor principal del modal */
.agreement-modal {
    background: #1b1030;
    color: #f5f5f7;
}

/* Card principal del convenio */
.agreement-card {
    background: #26163f;
    border-radius: 12px;
    border: 1px solid #7e57c2;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

/* Título de sección dentro del modal */
.agreement-section-title {
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #e1d7ff;
}

/* Línea divisoria estética del modal */
.agreement-divider {
    border: 0;
    height: 1px;
    margin: 0.75rem 0 1.25rem;
    background: linear-gradient(to right,
            transparent,
            rgba(158, 140, 255, 0.8),
            transparent);
}

/* Labels y textos secundarios */
/* Texto normal dentro del input */
.agreement-input {
  background-color: #1a102e;
  border: 1px solid #4b3a70;
  color: #ffffff;              /* texto bien blanco */
  border-radius: 8px;
  font-size: 0.95rem;
}

/* Placeholder más tenue pero visible */
.agreement-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
  opacity: 1;                  /* necesario para algunos navegadores */
}

/* Inputs deshabilitados (como Total adeudo) */
.agreement-input:disabled,
.agreement-input[readonly] {
  background-color: #2b1b49;
  color: #e0def5;              /* que se vea claro aunque esté disabled */
  opacity: 1;
}

/* Estado focus */
.agreement-input:focus {
  background-color: #1f1436;
  border-color: #9575cd;
  box-shadow: 0 0 0 0.2rem rgba(149, 117, 205, 0.25);
  color: #ffffff;
}


/* Bloques de resumen numérico */
.agreement-summary-block {
    text-align: center;
    padding: 0.75rem 0.5rem;
}

.agreement-summary-block--bordered {
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

/* Tabla de pagos pendientes */
.agreement-table {
    color: #f5f5f7;
}

.agreement-table thead {
    background: #2f1c4d;
}

.agreement-table thead th {
    border-bottom: 0;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #c5b9ff;
}

.agreement-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.agreement-table tbody tr:hover {
    background: rgba(149, 117, 205, 0.15);
}

/* Botones del footer del modal */
.agreement-btn-cancel {
    min-width: 120px;
    border-radius: 999px;
    font-weight: 500;
    background: linear-gradient(135deg, #e53935, #b71c1c);
    border: none;
    color: #fff;
}

.agreement-btn-save {
    min-width: 120px;
    border-radius: 999px;
    font-weight: 500;
    background: linear-gradient(135deg, #43a047, #1b5e20);
    border: none;
    color: #fff;
}

/* Responsivo específico del modal */
@media (max-width: 768px) {
    .agreement-card {
        padding: 0.5rem;
    }

    .agreement-summary-block--bordered {
        border-right: none;
    }
}


.description-text-14 {
    text-transform: uppercase;
    font-size: 14px;
}

.description-text-13 {
    text-transform: uppercase;
    font-size: 13px;
}

.description-text-12 {
    text-transform: uppercase;
    font-size: 12px;
}

.description-text-11 {
    text-transform: uppercase;
    font-size: 11px;
}

.description-text-10 {
    text-transform: uppercase;
    font-size: 10px;
}

.description-text-9 {
    text-transform: uppercase;
    font-size: 9px;
}

.description-text-8 {
    text-transform: uppercase;
    font-size: 8px;
}

.description-text-7 {
    text-transform: uppercase;
    font-size: 7px;
}


.bg-slider {
    background-color: rgba(85, 107, 47, 0.923);
    color: white !important;
}

.bg-modalCapitalPayment {
    background-color: rgba(20, 71, 20, 0.719);
}

.bg-dark-financira {
    background-color: black;
    color: white;
}

.bg-financiera-primary {
    background-color: rgb(10, 86, 173);
    color: white;
}

/* Estilos para botones */
/* ESTADO NORMAL ------------------------------------------ */
.bg-gradient-purple.btn {
    background: linear-gradient(180deg,
            #6a5a8c 0%,
            /* morado grisáceo medio */
            #4a3d6b 100%
            /* morado más profundo, bajo en saturación */
        ) !important;
    border: 1px solid #3f345a !important;
    color: #f4f4f4 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .35);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
    transition: all .15s ease-in-out;
    border-radius: .5rem;
}

/* Evita que el theme meta background raro en estado active / dropdown-toggle */
.bg-gradient-purple.btn:not(:disabled):not(.disabled):active,
.bg-gradient-purple.btn:not(:disabled):not(.disabled).active,
.show>.bg-gradient-purple.btn.dropdown-toggle {
    background-image: none !important;
}

/* HOVER --------------------------------------------------- */
.bg-gradient-purple.btn:hover {
    background: linear-gradient(180deg,
            #5c4e7b 0%,
            #3f335a 100%) !important;
    border-color: #362a4e !important;
    color: #eaeaea !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .45);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
}

/* ACTIVE / PRESSED ---------------------------------------- */
.bg-gradient-purple.btn:not(:disabled):not(.disabled):active,
.bg-gradient-purple.btn:not(:disabled):not(.disabled).active,
.bg-gradient-purple.btn:active,
.bg-gradient-purple.btn.active {
    background: linear-gradient(180deg,
            #4f416f 0%,
            #332748 100%) !important;
    border-color: #2a1f3d !important;
    color: #ffffff !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .7);
}

/* DISABLED ------------------------------------------------ */
.bg-gradient-purple.btn:disabled,
.bg-gradient-purple.btn.disabled {
    background: #514566 !important;
    /* morado mate apagado */
    border-color: #514566 !important;
    color: #cfcbdc !important;
    /* texto gris lavanda, menos agresivo */
    box-shadow: none !important;
    text-shadow: none !important;
    cursor: not-allowed;
}


.bg-gradient-red {
    background: #c82333 linear-gradient(180deg, #e55353, #c82333) repeat-x !important;
    color: #fff;
}

.bg-gradient-red.btn:not(:disabled):not(.disabled):active,
.bg-gradient-red.btn:not(:disabled):not(.disabled).active,
.show>.bg-gradient-red.btn.dropdown-toggle {
    background-image: none !important;
}

.bg-gradient-red.btn:hover {
    background: #c82333 linear-gradient(180deg, #d33a3a, #a91e2e) repeat-x !important;
    border-color: #a91e2e;
    color: #ececec;
}

.bg-gradient-red.btn:not(:disabled):not(.disabled):active,
.bg-gradient-red.btn:not(:disabled):not(.disabled).active,
.bg-gradient-red.btn:active,
.bg-gradient-red.btn.active {
    background: #c82333 linear-gradient(180deg, #d12f37, #a21d29) repeat-x !important;
    border-color: #901a27;
    color: #fff;
}

.bg-gradient-red.btn:disabled,
.bg-gradient-red.btn.disabled {
    background-image: none !important;
    border-color: #c82333;
    color: #fff;
}

/* Melon gradient button (basado en tu estilo purple) */
/* ESTADO NORMAL ------------------------------------------ */
.bg-gradient-melon.btn {
    background: linear-gradient(180deg,
            #d97d5d 0%,
            /* melón/coral medio, menos neón */
            #b55a3d 100%
            /* coral quemado más profundo */
        ) !important;
    border: 1px solid #9d4d34 !important;
    color: #fdf4ee !important;
    /* marfil cálido, no blanco explosivo */
    box-shadow: 0 2px 4px rgba(0, 0, 0, .35);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .55);
    transition: all .15s ease-in-out;
    border-radius: .5rem;
}

/* Evitar que el theme meta otro bg cuando se activa o es dropdown-toggle */
.bg-gradient-melon.btn:not(:disabled):not(.disabled):active,
.bg-gradient-melon.btn:not(:disabled):not(.disabled).active,
.show>.bg-gradient-melon.btn.dropdown-toggle {
    background-image: none !important;
}

/* HOVER --------------------------------------------------- */
.bg-gradient-melon.btn:hover {
    background: linear-gradient(180deg,
            #c96f51 0%,
            #a64c30 100%) !important;
    border-color: #8e3f28 !important;
    color: #fff3ea !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .45);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
}

/* ACTIVE / PRESSED ---------------------------------------- */
.bg-gradient-melon.btn:not(:disabled):not(.disabled):active,
.bg-gradient-melon.btn:not(:disabled):not(.disabled).active,
.bg-gradient-melon.btn:active,
.bg-gradient-melon.btn.active {
    background: linear-gradient(180deg,
            #b76044 0%,
            #863823 100%) !important;
    border-color: #6d2d1c !important;
    color: #ffffff !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .7);
}

/* DISABLED ------------------------------------------------ */
.bg-gradient-melon.btn:disabled,
.bg-gradient-melon.btn.disabled {
    background: #9f5d45 !important;
    /* tono melón tostado mate */
    border-color: #9f5d45 !important;
    color: #e1c9bd !important;
    /* texto beige apagado */
    box-shadow: none !important;
    text-shadow: none !important;
    cursor: not-allowed;
}


/* Brown (café) gradient button, siguiendo tu mismo patrón */
.bg-gradient-brown {
    background: #8b5e3c linear-gradient(180deg, #b98a68, #8b5e3c) repeat-x !important;
    color: #fff;
}

/* Quita el gradiente en estados pressed/active de Bootstrap */
.bg-gradient-brown.btn:not(:disabled):not(.disabled):active,
.bg-gradient-brown.btn:not(:disabled):not(.disabled).active,
.show>.bg-gradient-brown.btn.dropdown-toggle {
    background-image: none !important;
}

/* Hover */
.bg-gradient-brown.btn:hover {
    background: #8b5e3c linear-gradient(180deg, #a97957, #7a4f30) repeat-x !important;
    border-color: #5a331a;
    color: #ffffff;
}

/* Active / pressed */
.bg-gradient-brown.btn:not(:disabled):not(.disabled):active,
.bg-gradient-brown.btn:not(:disabled):not(.disabled).active,
.bg-gradient-brown.btn:active,
.bg-gradient-brown.btn.active {
    background: #8b5e3c linear-gradient(180deg, #a57252, #6a4228) repeat-x !important;
    border-color: #4d2b16;
    color: #fff;
}

/* Disabled */
.bg-gradient-brown.btn:disabled,
.bg-gradient-brown.btn.disabled {
    background-image: none !important;
    border-color: #8b5e3c;
    color: #fff;
}

/* ====== Botón degradado verde olivo ====== */
.bg-gradient-olive.btn:not(:disabled):not(.disabled):active,
.bg-gradient-olive.btn:not(:disabled):not(.disabled).active,
.show>.bg-gradient-olive.btn.dropdown-toggle {
    background-image: none !important;
}

.bg-gradient-olive.btn:hover {
    background: #4a7a4f linear-gradient(180deg, #5e9462, #3d6341) repeat-x !important;
    border-color: #365b39;
    color: #ececec;
}

.bg-gradient-olive.btn:not(:disabled):not(.disabled):active,
.bg-gradient-olive.btn:not(:disabled):not(.disabled).active,
.bg-gradient-olive.btn:active,
.bg-gradient-olive.btn.active {
    background: #4a7a4f linear-gradient(180deg, #5b8b5f, #365b39) repeat-x !important;
    border-color: #2f4f33;
    color: #fff;
}

.bg-gradient-olive.btn:disabled,
.bg-gradient-olive.btn.disabled {
    background-image: none !important;
    background-color: #4a7a4f;
    border-color: #4a7a4f;
    color: #fff;
}

/* ESTADO NORMAL ------------------------------------------ */
.bg-gradient-success.btn {
    background: linear-gradient(180deg,
            #6b7a58 0%,
            /* verde oliva grisáceo claro */
            #556343 100%
            /* verde más profundo, menos saturado */
        ) !important;
    border: 1px solid #4a553a !important;
    color: #f4f4f4 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .35);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
    transition: all .15s ease-in-out;
    border-radius: .5rem;
    /* esquinas más amables al ojo */
}

/* Quitar degradado default que mete active/toggle en algunos themes */
.bg-gradient-success.btn:not(:disabled):not(.disabled):active,
.bg-gradient-success.btn:not(:disabled):not(.disabled).active,
.show>.bg-gradient-success.btn.dropdown-toggle {
    background-image: none !important;
}

/* HOVER --------------------------------------------------- */
.bg-gradient-success.btn:hover {
    background: linear-gradient(180deg,
            #5a6648 0%,
            #454f38 100%) !important;
    border-color: #3c4530 !important;
    color: #eaeaea !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .45);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
}

/* ACTIVE / PRESSED ---------------------------------------- */
.bg-gradient-success.btn:not(:disabled):not(.disabled):active,
.bg-gradient-success.btn:not(:disabled):not(.disabled).active,
.bg-gradient-success.btn:active,
.bg-gradient-success.btn.active {
    background: linear-gradient(180deg,
            #4d573d 0%,
            #3a4230 100%) !important;
    border-color: #2f3627 !important;
    color: #ffffff !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .7);
}

/* DISABLED ------------------------------------------------ */
.bg-gradient-success.btn:disabled,
.bg-gradient-success.btn.disabled {
    background: #596648 !important;
    border-color: #596648 !important;
    color: #bfc5bb !important;
    box-shadow: none !important;
    text-shadow: none !important;
    cursor: not-allowed;
}


/* ESTADO NORMAL ------------------------------------------ */
.bg-gradient-danger.btn {
    background: linear-gradient(180deg,
            #7a4a4a 0%,
            /* rojo vino medio, no saturado */
            #5a2f30 100%
            /* rojo oscuro tirando a borgoña */
        ) !important;
    border: 1px solid #4a2425 !important;
    color: #f4f4f4 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .35);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
    transition: all .15s ease-in-out;
    border-radius: .5rem;
    /* mismo radio amable */
}

/* Evita que el theme original meta un bg distinto al estar "active" o "dropdown-toggle" */
.bg-gradient-danger.btn:not(:disabled):not(.disabled):active,
.bg-gradient-danger.btn:not(:disabled):not(.disabled).active,
.show>.bg-gradient-danger.btn.dropdown-toggle {
    background-image: none !important;
}

/* HOVER --------------------------------------------------- */
.bg-gradient-danger.btn:hover {
    background: linear-gradient(180deg,
            #683d3d 0%,
            #4a2526 100%) !important;
    border-color: #3c1c1d !important;
    color: #eaeaea !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .45);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
}

/* ACTIVE / PRESSED ---------------------------------------- */
.bg-gradient-danger.btn:not(:disabled):not(.disabled):active,
.bg-gradient-danger.btn:not(:disabled):not(.disabled).active,
.bg-gradient-danger.btn:active,
.bg-gradient-danger.btn.active {
    background: linear-gradient(180deg,
            #593333 0%,
            #3a1a1b 100%) !important;
    border-color: #2a1213 !important;
    color: #ffffff !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .7);
}

/* DISABLED ------------------------------------------------ */
.bg-gradient-danger.btn:disabled,
.bg-gradient-danger.btn.disabled {
    background: #5f3a3b !important;
    /* tono mate apagado */
    border-color: #5f3a3b !important;
    color: #c9b9ba !important;
    /* texto gris rosado, baja intensidad */
    box-shadow: none !important;
    text-shadow: none !important;
    cursor: not-allowed;
}

/* ESTADO NORMAL ------------------------------------------ */
.bg-gradient-info.btn {
    background: linear-gradient(180deg,
            #5b7391 0%,
            /* azul grisáceo medio (no chillón) */
            #3f556e 100%
            /* azul más profundo y sobrio */
        ) !important;
    border: 1px solid #364a60 !important;
    color: #f4f4f4 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .35);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
    transition: all .15s ease-in-out;
    border-radius: .5rem;
}

/* Evita bg raro en active / dropdown-toggle */
.bg-gradient-info.btn:not(:disabled):not(.disabled):active,
.bg-gradient-info.btn:not(:disabled):not(.disabled).active,
.show>.bg-gradient-info.btn.dropdown-toggle {
    background-image: none !important;
}

/* HOVER --------------------------------------------------- */
.bg-gradient-info.btn:hover {
    background: linear-gradient(180deg,
            #4f657f 0%,
            #34485e 100%) !important;
    border-color: #2e3f52 !important;
    color: #eaeaea !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .45);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
}

/* ACTIVE / PRESSED ---------------------------------------- */
.bg-gradient-info.btn:not(:disabled):not(.disabled):active,
.bg-gradient-info.btn:not(:disabled):not(.disabled).active,
.bg-gradient-info.btn:active,
.bg-gradient-info.btn.active {
    background: linear-gradient(180deg,
            #42536a 0%,
            #2a394a 100%) !important;
    border-color: #22303f !important;
    color: #ffffff !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .7);
}

/* DISABLED ------------------------------------------------ */
.bg-gradient-info.btn:disabled,
.bg-gradient-info.btn.disabled {
    background: #4a5e76 !important;
    /* azul mate apagado */
    border-color: #4a5e76 !important;
    color: #cbd4dd !important;
    /* texto gris azulado, menos agresivo */
    box-shadow: none !important;
    text-shadow: none !important;
    cursor: not-allowed;
}


/* ESTADO NORMAL ------------------------------------------ */
/* ESTADO NORMAL ------------------------------------------ */
.bg-gradient-primary.btn {
    background: linear-gradient(180deg,
            #4f5f79 0%,
            /* azul gris medio, sobrio */
            #364559 100%
            /* azul más profundo tipo acero */
        ) !important;
    border: 1px solid #2f3a4a !important;
    color: #f4f4f4 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .35);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
    transition: all .15s ease-in-out;
    border-radius: .5rem;
}

/* Evita que el theme meta un bg distinto cuando está "active" o abierto como dropdown */
.bg-gradient-primary.btn:not(:disabled):not(.disabled):active,
.bg-gradient-primary.btn:not(:disabled):not(.disabled).active,
.show>.bg-gradient-primary.btn.dropdown-toggle {
    background-image: none !important;
}

/* HOVER --------------------------------------------------- */
.bg-gradient-primary.btn:hover {
    background: linear-gradient(180deg,
            #44546b 0%,
            #2a3646 100%) !important;
    border-color: #232d3a !important;
    color: #eaeaea !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .45);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
}

/* ACTIVE / PRESSED ---------------------------------------- */
.bg-gradient-primary.btn:not(:disabled):not(.disabled):active,
.bg-gradient-primary.btn:not(:disabled):not(.disabled).active,
.bg-gradient-primary.btn:active,
.bg-gradient-primary.btn.active {
    background: linear-gradient(180deg,
            #3a475b 0%,
            #1f2834 100%) !important;
    border-color: #191f28 !important;
    color: #ffffff !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .7);
}

/* DISABLED ------------------------------------------------ */
.bg-gradient-primary.btn:disabled,
.bg-gradient-primary.btn.disabled {
    background: #404f63 !important;
    /* azul mate apagado */
    border-color: #404f63 !important;
    color: #cfd5dc !important;
    /* gris azulado suave */
    box-shadow: none !important;
    text-shadow: none !important;
    cursor: not-allowed;
}

/* ESTADO NORMAL ------------------------------------------ */
.bg-gradient-secondary.btn {
    background: linear-gradient(180deg,
            #70757c 0%,
            /* gris medio tirando a acero */
            #4a4f56 100%
            /* gris más profundo / grafito */
        ) !important;
    border: 1px solid #3d4146 !important;
    color: #f4f4f4 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .35);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
    transition: all .15s ease-in-out;
    border-radius: .5rem;
}

/* Evita que frameworks metan otro background en active/toggle */
.bg-gradient-secondary.btn:not(:disabled):not(.disabled):active,
.bg-gradient-secondary.btn:not(:disabled):not(.disabled).active,
.show>.bg-gradient-secondary.btn.dropdown-toggle {
    background-image: none !important;
}

/* HOVER --------------------------------------------------- */
.bg-gradient-secondary.btn:hover {
    background: linear-gradient(180deg,
            #62676e 0%,
            #3d4147 100%) !important;
    border-color: #34373c !important;
    color: #eaeaea !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .45);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
}

/* ACTIVE / PRESSED ---------------------------------------- */
.bg-gradient-secondary.btn:not(:disabled):not(.disabled):active,
.bg-gradient-secondary.btn:not(:disabled):not(.disabled).active,
.bg-gradient-secondary.btn:active,
.bg-gradient-secondary.btn.active {
    background: linear-gradient(180deg,
            #50545a 0%,
            #2a2d31 100%) !important;
    border-color: #1f2124 !important;
    color: #ffffff !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .7);
}

/* DISABLED ------------------------------------------------ */
.bg-gradient-secondary.btn:disabled,
.bg-gradient-secondary.btn.disabled {
    background: #5b6066 !important;
    /* gris mate apagado */
    border-color: #5b6066 !important;
    color: #cfd1d4 !important;
    /* texto gris claro, sin brillo blanco */
    box-shadow: none !important;
    text-shadow: none !important;
    cursor: not-allowed;
}


/* ESTADO NORMAL ------------------------------------------ */
.bg-gradient-dark.btn {
    background: linear-gradient(180deg,
            #3a3a3a 0%,
            /* gris carbón medio */
            #1f1f1f 100%
            /* negro profundo pero no puro */
        ) !important;
    border: 1px solid #141414 !important;
    color: #f1f1f1 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .6);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .8);
    transition: all .15s ease-in-out;
    border-radius: .5rem;
}

/* Evita que el theme/Bootstrap cambie el fondo en active o dropdown-toggle */
.bg-gradient-dark.btn:not(:disabled):not(.disabled):active,
.bg-gradient-dark.btn:not(:disabled):not(.disabled).active,
.show>.bg-gradient-dark.btn.dropdown-toggle {
    background-image: none !important;
}

/* HOVER --------------------------------------------------- */
.bg-gradient-dark.btn:hover {
    background: linear-gradient(180deg,
            #303030 0%,
            #151515 100%) !important;
    border-color: #0f0f0f !important;
    color: #eaeaea !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .75);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .85);
}

/* ACTIVE / PRESSED ---------------------------------------- */
.bg-gradient-dark.btn:not(:disabled):not(.disabled):active,
.bg-gradient-dark.btn:not(:disabled):not(.disabled).active,
.bg-gradient-dark.btn:active,
.bg-gradient-dark.btn.active {
    background: linear-gradient(180deg,
            #252525 0%,
            #0b0b0b 100%) !important;
    border-color: #000000 !important;
    color: #ffffff !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .8);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .9);
}

/* DISABLED ------------------------------------------------ */
.bg-gradient-dark.btn:disabled,
.bg-gradient-dark.btn.disabled {
    background: #2b2b2b !important;
    /* gris oscuro mate, sin brillo */
    border-color: #2b2b2b !important;
    color: #9d9d9d !important;
    /* gris claro tenue, para que se note apagado */
    box-shadow: none !important;
    text-shadow: none !important;
    cursor: not-allowed;
}

/* ESTADO NORMAL ------------------------------------------ */
.bg-gradient-warning.btn {
    background: linear-gradient(180deg,
            #d1a83a 0%,
            /* dorado/ámbar medio */
            #a97f22 100%
            /* ámbar tostado más profundo */
        ) !important;
    border: 1px solid #8a671c !important;
    color: #2a1f00 !important;
    /* texto oscuro sobre dorado, mejor accesibilidad que blanco sobre amarillo */
    box-shadow: 0 2px 4px rgba(0, 0, 0, .35);
    text-shadow: 0 1px 1px rgba(255, 255, 255, .4);
    /* leve halo claro para resaltar el texto oscuro */
    transition: all .15s ease-in-out;
    border-radius: .5rem;
}

/* Evitar que el theme meta otro bg cuando está activo o es dropdown-toggle */
.bg-gradient-warning.btn:not(:disabled):not(.disabled):active,
.bg-gradient-warning.btn:not(:disabled):not(.disabled).active,
.show>.bg-gradient-warning.btn.dropdown-toggle {
    background-image: none !important;
}

/* HOVER --------------------------------------------------- */
.bg-gradient-warning.btn:hover {
    background: linear-gradient(180deg,
            #bf9935 0%,
            #8f671a 100%) !important;
    border-color: #755415 !important;
    color: #221800 !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .45);
    text-shadow: 0 1px 1px rgba(255, 255, 255, .35);
}

/* ACTIVE / PRESSED ---------------------------------------- */
.bg-gradient-warning.btn:not(:disabled):not(.disabled):active,
.bg-gradient-warning.btn:not(:disabled):not(.disabled).active,
.bg-gradient-warning.btn:active,
.bg-gradient-warning.btn.active {
    background: linear-gradient(180deg,
            #a8842c 0%,
            #60430f 100%) !important;
    border-color: #4a330c !important;
    color: #fffdf5 !important;
    /* en estado presionado sí cambiamos a claro para reforzar acción */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .7);
}

/* DISABLED ------------------------------------------------ */
.bg-gradient-warning.btn:disabled,
.bg-gradient-warning.btn.disabled {
    background: #8f7a32 !important;
    /* dorado apagado mate */
    border-color: #8f7a32 !important;
    color: #e4ddc2 !important;
    /* beige grisáceo bajito, no blanco puro */
    box-shadow: none !important;
    text-shadow: none !important;
    cursor: not-allowed;
}





/* hr{
    color: white;
    background-color: white;
} */

.small-text {
    line-height: normal;
    width: 50px;
}

.centerColumn {
    text-align: center;
}

.dataTable-table {
    text-align: center;
    vertical-align: middle;
}

td,
tr,
th,
thead {
    text-align: center;
    vertical-align: middle !important;
}

.custom-tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.custom-tooltip::before,
.custom-tooltip::after {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s;
}

.custom-tooltip:hover::before,
.custom-tooltip:hover::after {
    visibility: visible;
    opacity: 1;
}

/* Estilo del texto del tooltip */
.custom-tooltip::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 150%;
    /* Ajusta la posición del tooltip */
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 6px 12px;
    border-radius: 5px;
    white-space: nowrap;
    font-size: 12px;
    z-index: 1;
}

/* Flecha del tooltip */
.custom-tooltip::after {
    content: '';
    position: absolute;
    bottom: 100%;
    /* Flecha justo encima del ícono */
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
    z-index: 1;
}

/* Aplica a cualquier elemento con data-tooltip */
[data-tooltip] {
    position: relative;
    display: inline-block;
    /* necesario para que posicione bien */
    cursor: pointer;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    /* encima del icono */
    left: 50%;
    transform: translateX(-50%);
    background: #111;
    color: #fff;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* no bloquear clics al icono */
    z-index: 2;
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-4px);
}


.modern-hr {
    /* quitamos el border nativo del <hr> */
    border: 0;
    height: 2px;
    width: 100%;
    margin: 16px 0 20px 0;

    /* línea oliva metálica con leve dorado hacia la derecha */
    background-image: linear-gradient(90deg,
            rgba(34, 40, 28, 0) 0%,
            /* fade-in suave desde transparente */
            rgba(110, 129, 72, 0.85) 10%,
            /* oliva oscuro satinado */
            rgba(171, 198, 82, 0.9) 50%,
            /* punto de luz (oliva/dorado) */
            rgba(110, 129, 72, 0.85) 90%,
            /* vuelve a oliva */
            rgba(34, 40, 28, 0) 100%
            /* fade-out */
        );

    /* sutil relieve bajo la línea, no sombra dura */
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.6),
        /* ligera profundidad abajo */
        0 -1px 1px rgba(255, 255, 255, 0.07);
    /* leve highlight arriba tipo bisel */

    /* bordes redondeados para que no parezca un bloque pintado */
    border-radius: 999px;
}


#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Fondo semitransparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

#loading-container {
    display: flex;
    flex-direction: column;
    /* Alinea la imagen y el GIF en columna */
    align-items: center;
    justify-content: center;
}

#main-image {
    max-width: 200px;
    /* Ajusta el tamaño de la imagen principal */
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    /* Espacio entre la imagen y el GIF */
}

#loading-gif {
    max-width: 100px;
    /* Ajusta el tamaño del GIF */
    width: 100%;
    height: auto;
}

.small-box .inner h3 {
    font-size: calc(1.5rem + 1vw);
    /* Ajusta el tamaño del texto según la pantalla */
}

.small-box .inner h5 {
    font-size: calc(1rem + 0.5vw);
    /* Ajusta el tamaño del texto para subtítulos */
}

.small-box {
    padding: 20px;
    text-align: center;
    /* Centrar el contenido */
}

.icon {
    font-size: 4rem;
    /* Ajustar el tamaño del ícono */
}


.CodeMirror {
    margin: auto;
    height: 700px;
    width: 1250px;
    border: 1px solid #ccc;
}

.iti {
    width: 100%;
    /* Asegura que el input ocupe todo el ancho */
    color: #000;
}

.phone-input {
    padding-left: 58px;
    /* Ajusta el espacio para la bandera */
    height: 40px;
}

.highlight-text {
    color: #fff;
    /* Texto blanco para buen contraste */
    font-weight: 700;
    font-size: 1.1em;
    text-transform: uppercase;
    background-color: #e74c3c;
    /* Fondo rojo vibrante */
    padding: 4px 8px;
    border-radius: 6px;
    position: relative;
    display: inline-block;
    transition: background-color 0.3s ease-in-out, transform 0.2s;
}

.highlight-text::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #e74c3c, #ff7675);
    border-radius: 2px;
    transform: scaleX(0);
    transition: transform 0.3s ease-in-out;
    transform-origin: left;
}

.highlight-text:hover {
    background-color: #ff7675;
    /* Fondo más claro al pasar el mouse */
    transform: scale(1.05);
    /* Aumenta ligeramente el tamaño */
}

.highlight-text:hover::after {
    transform: scaleX(1);
}

.highlight-textB {
    color: #fff;
    /* Texto blanco para contraste */
    font-weight: 700;
    font-size: 1.1em;
    text-transform: uppercase;
    background-color: #3498db;
    /* Fondo azul claro */
    padding: 4px 8px;
    border-radius: 6px;
    position: relative;
    display: inline-block;
    transition: background-color 0.3s ease-in-out, transform 0.2s;
}

.highlight-textB::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #3498db, #5dade2);
    /* Degradado en azul */
    border-radius: 2px;
    transform: scaleX(0);
    transition: transform 0.3s ease-in-out;
    transform-origin: left;
}

.highlight-textB:hover {
    background-color: #5dade2;
    /* Fondo más claro en hover */
    transform: scale(1.05);
    /* Aumenta ligeramente el tamaño */
}

.highlight-textB:hover::after {
    transform: scaleX(1);
    /* Animación de línea al hacer hover */
}

.styleNomCartera {
    background: linear-gradient(135deg, #0a5a34, #66bb6a);
    /* Fondo degradado en verde */
    color: #ffffff;
    /* Texto en color blanco */
    padding: 2vw;
    /* Espaciado interno proporcional al ancho de la pantalla */
    border-radius: 8px;
    /* Bordes redondeados */
    text-align: center;
    /* Centrado del texto */
    font-family: Arial, sans-serif;
    font-size: 1.2rem;
    /* Tamaño de fuente base para pantallas medianas */
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
    .styleNomCartera {
        font-size: 1rem;
        /* Reducir tamaño de fuente en pantallas más pequeñas */
        padding: 3vw;
        /* Aumentar padding para que sea cómodo en móviles */
    }
}

/* Ajustes para pantallas grandes */
@media (min-width: 1200px) {
    .styleNomCartera {
        font-size: 1.4rem;
        /* Aumentar tamaño de fuente en pantallas grandes */
        padding: 1.5vw;
        /* Reducir padding para pantallas más grandes */
    }
}

.styleObservacionesCredit {
    background: linear-gradient(135deg, #4caf50, #733d03);
    /* Degradado verde claro con amarillo */
    color: #000;
    /* Texto en blanco */
    padding: 1.5vw;
    /* Espaciado adaptable */
    border-radius: 6px;
    /* Bordes más sutiles */
    text-align: center;
    /* Centrado */
    font-family: Arial, sans-serif;
    font-size: clamp(0.9rem, 1.1vw, 1.3rem);
    /* Tamaño de fuente dinámico */
    max-width: 90%;
    /* Evitar que ocupe demasiado ancho */
    margin: auto;
    /* Centrar en el contenedor */
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
    .styleObservacionesCredit {
        font-size: 0.9rem;
        /* Reducir texto */
        padding: 2vw;
        /* Ajustar espacio */
    }
}

/* Ajustes para pantallas grandes */
@media (min-width: 1200px) {
    .styleObservacionesCredit {
        font-size: 1.2rem;
        /* Ajustar tamaño de texto */
        padding: 1vw;
        /* Menos padding en pantallas grandes */
    }
}


/* Estilos personalizados para la tabla */
.custom-table {
    width: 100%;
    border-collapse: collapse;
    margin: 32px 0;
    font-size: 16px;
    text-align: left;
    color: #000;
}

.custom-table th,
.custom-table td {
    border: 1px solid #ddd;
    padding: 8px;
}

.custom-table th {
    background-color: #f4f4f4;
}

.custom-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.custom-table tr:hover {
    background-color: #f1f1f1;
}

/* General styles for the container */
.col {
    flex: 1;
    /* To allow equal distribution */
    padding: 1rem;
    min-width: clamp(200px, 25%, 300px);
    /* Adapts width */
}

/* Styling for .small-box */
.small-box {
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    padding: clamp(1rem, 2vw, 2rem);
    /* Adapts spacing */
    text-align: center;
}

/* Adjust the header font sizes */
.small-box h3 {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    /* Adjusts font size */
    margin: 0;
}

.small-box h5 {
    font-size: clamp(1rem, 2vw, 1.5rem);
    /* Adjusts for readability */
    margin-top: 0.5rem;
    word-wrap: break-word;
}

/* Styles for the .small-box-footer */
.small-box-footer {
    display: inline-block;
    margin-top: clamp(0.5rem, 1vw, 1rem);
    padding: clamp(0.5rem, 1vw, 1rem) clamp(1rem, 2vw, 1.5rem);
    font-size: clamp(0.8rem, 1.5vw, 1rem);
    color: #ffffff;
    background-color: #333;
    border-radius: 5px;
    text-decoration: none;
}

.small-box-footer:hover {
    background-color: #555;
    text-decoration: underline;
}

/* Icons styles */
.small-box .icon i {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-top: clamp(0.5rem, 1vw, 1rem);
}

/* Responsive behavior for columns */
@media (max-width: 768px) {
    .col {
        flex: 1 1 100%;
        /* Full width on smaller screens */
        margin-bottom: 1rem;
    }
}


.custom-monto {
    background-color: #007bff;
    color: white;
    padding: 5px;
    border-radius: 4px;
    font-weight: bold;
    display: inline-block;
}

#selectMonthInterest option:disabled {
    background-color: #f0f0f0;
    /* Gris claro */
    color: #888;
    /* Color de texto más claro */

}

.bg-dark-financiera {
    background-color: #0a5a34;
    color: #f1f1f1;
}

.bg-icon-financiera {
    background-color: #3a9f3d;
}

.icono-pdf-grande {
    font-size: 1rem;
    /* Ajusta el tamaño */
    color: white;
    /* Cambia el color */
}

/* Contenedor del switch con nombres exclusivos */
.exclusive-toggle {
    position: relative;
    display: inline-block;
    width: 40px;
    /* Ancho reducido */
    height: 24px;
    /* Alto reducido */
    vertical-align: middle;
}

/* Ocultamos el checkbox original */
.exclusive-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* Estilo de la barra (slider) exclusivo con dimensiones reducidas */
.exclusive-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: red;
    /* Color cuando está desactivado */
    transition: background-color 0.4s;
    border-radius: 24px;
    /* Radio para borde redondeado */
}

/* El círculo que se mueve, también con dimensiones reducidas */
.exclusive-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: transform 0.4s;
    border-radius: 50%;
}

/* Cuando el checkbox está activado */
.exclusive-toggle input:checked+.exclusive-slider {
    background-color: #12cb20;
    /* Color cuando está activado */
}

.exclusive-toggle input:checked+.exclusive-slider:before {
    transform: translateX(16px);
    /* Movimiento acorde al tamaño reducido */
}

/* Contenedor */
.dataTable-pagination {
    display: flex;
    gap: .25rem;
    padding: .5rem;
    justify-content: center;
}

/* Botones base */
.dataTable-pagination li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 .6rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    color: var(--olive-700);
    background: linear-gradient(180deg, #ffffff, #f7faf7);
    border: 1px solid #dfe7dc;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
    transition: transform .08s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

/* Hover */
.dataTable-pagination li a:hover {
    background: linear-gradient(180deg, #f6fbf4, #eef7ec);
    border-color: #cfe1cb;
    color: var(--olv-800);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
    transform: translateY(-1px);
}

/* Active (página actual) */
.dataTable-pagination .active a,
.dataTable-pagination .active a:focus,
.dataTable-pagination .active a:hover {
    color: #000000;
    border-color: transparent;
    background:
        linear-gradient(180deg, var(--olv-600), var(--olv-800));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .15),
        0 4px 10px rgba(0, 0, 0, .12);
    transform: none;
}

/* Disabled (prev/next cuando no hay más) */
.dataTable-pagination .disabled a,
.dataTable-pagination .disabled a:hover {
    color: #9aa7a0;
    background: linear-gradient(180deg, #f7f9f7, #f1f4f0);
    border-color: #e6eee3;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Focus visible: accesible y contrastado */
.dataTable-pagination li a:focus-visible {
    outline: 3px solid #9bd18d;
    outline-offset: 2px;
}

/* Tamaño compacto opcional */
.dataTable-pagination.compact li a {
    min-width: 2rem;
    height: 2rem;
    border-radius: 8px;
    font-size: .875rem;
}

/* Tamaño grande opcional */
.dataTable-pagination.lg li a {
    min-width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    font-size: 1rem;
}


/* ====== Aside financiero - estilo ejecutivo ====== */
/* ====== Aside financiero - estilo ejecutivo ====== */
#controlSidebar {
    --brand-700: #2f5d3a;
    /* oliva fuerte */
    --brand-500: #4a7a4f;
    /* oliva medio */
    --brand-200: #dfe9e2;
    /* verde claro */
    --ink-900: #111827;
    /* gris muy oscuro */
    --ink-700: #374151;
    /* gris oscuro */
    --ink-500: #6b7280;
    /* gris medio */
    --surface: #ffffff;

    position: fixed;
    top: 0;
    right: 0;
    z-index: 1055;
    /* arriba del contenido, debajo de modales si usas 1060+ */
    width: min(60vw, 920px);
    height: 100dvh;
    /* full alto, compatible móvil */
    background: var(--brand-700, #fff);
    box-shadow: -24px 0 40px rgba(17, 24, 39, .20);
    transform: translateX(100%);
    /* oculto a la derecha */
    opacity: 0;
    transition: transform .45s cubic-bezier(.22, .61, .36, 1), opacity .3s ease;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: block;
}

/* Estado abierto */
#controlSidebar.is-open {
    transform: translateX(0);
    opacity: 1;
}

/* Borde izquierdo “pro” con degradado y glow */
#controlSidebar::before {
    content: "";
    position: absolute;
    left: -12px;
    /* sobresale un poco para dar relieve */
    top: 0;
    width: 12px;
    height: 100%;
    background: linear-gradient(180deg, var(--brand-500, #4a7a4f) 0%, var(--brand-700, #2f5d3a) 100%);
    border-radius: 12px 0 0 12px;
    filter: drop-shadow(-2px 0 8px rgba(74, 122, 79, .35));
    pointer-events: none;
}

/* Un pelín de borde interior para separar contenido de la orilla */
#controlSidebar .card,
#controlSidebar .info-box,
#controlSidebar h1,
#controlSidebar h2,
#controlSidebar h3 {
    will-change: transform, opacity;
}

/* ====== BACKDROP: oscurece lo que no es el aside ====== */
#sidebarBackdrop {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, .45);
    /* oscuro sutil */
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
    z-index: 1050;
    /* justo debajo del aside */
}

/* Visible cuando el aside está abierto */
#sidebarBackdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* ====== Accesibilidad y confort ====== */
body.no-scroll {
    overflow: hidden;
    /* bloqueo scroll del body cuando aside está abierto */
}

/* Reduce motion si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {

    #controlSidebar,
    #sidebarBackdrop {
        transition: none !important;
    }
}

/* Tabla ejecutiva apuntando sólo a #tblControlInterest */
#tblControlInterest {
    background: var(--surface);
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    font-size: 14px;
    width: 100% !important;
    table-layout: fixed;
}

#tblControlInterest thead th {
    background: linear-gradient(0deg, #f2f6f3, #fff);
    color: var(--ink-700);
    font-weight: 700;
    border-bottom: 1px solid #e8ecef;
    text-align: left;
}

#tblControlInterest tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid #f1f3f6;
    color: var(--ink-900);
}

#tblControlInterest tbody tr:hover {
    background: #fbfcfd;
}

#tblControlInterest .td-right {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

#tblControlInterest .badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef2f7;
    color: var(--ink-700);
}

#tblControlInterest .badge.expense {
    background: #fdecec;
    color: #b00020;
}

#tblControlInterest .badge.income {
    background: #e9f7ee;
    color: #2e7d32;
}

#tblControlInterest .badge-neutral {
    background: #f5f5f5;
    color: #666;
}

#tblControlInterest .badge-accent {
    background: #eaf2ec;
    color: var(--brand-700);
}

#tblControlInterest .tr-ub {
    background: linear-gradient(90deg, #f7faf8, #fff);
    font-weight: 800;
}

#tblControlInterest th,
#tblControlInterest td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Distribución de columnas */
#tblControlInterest th:nth-child(1),
#tblControlInterest td:nth-child(1) {
    width: 55%;
}

/* Rubro */
#tblControlInterest th:nth-child(2),
#tblControlInterest td:nth-child(2) {
    width: 20%;
    text-align: center;
}

/* Detalle */
#tblControlInterest th:nth-child(3),
#tblControlInterest td:nth-child(3) {
    width: 25%;
    text-align: right;
}

/* Tarjeta de la gráfica con contraste legible */
#chartStatics {
    width: 100%;
    height: 280px;
}

/* ====== Ajustes para ocupar todo el ancho ====== */

/* Quita padding lateral en la fila de la tabla */
#controlSidebar .row.p-2>.col-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* El wrapper responsive ocupa todo */
#controlSidebar .table-responsive {
    width: 100%;
}

/* Asegura que la tabla se estire correctamente */
#tblControlInterest {
    width: 100% !important;
}

/* Ajustes de la tarjeta para evitar márgenes internos sobrantes */
#controlSidebar .card .card-body {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* Opcional: para filas sin gutters */
#controlSidebar .row.g-0 {
    margin-left: 0;
    margin-right: 0;
}

#controlSidebar .row.g-0>[class^="col-"] {
    padding-left: 0;
    padding-right: 0;
}


/* ====== KPIs corporativos - Verde Olivo ====== */

/* Contenedor general de KPIs */
.kpi-row {
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    /* <- clave */
    background: transparent;
    /* <- sin banda */
    border-radius: 0;
    box-shadow: none;
}

/* Gutter uniforme entre columnas (si no usas Bootstrap 5 con g-*) */
.row.kpi-row>[class*="col-"] {
    padding-left: .75rem;
    padding-right: .75rem;
}

.kpi-row .col-sm-3:last-child .description-block {
    border-right: none !important;
}


/* Bloques individuales */
.description-block.bg-gradient-olive {
    background: linear-gradient(180deg, var(--olive-500) 0%, var(--olive-700) 100%) !important;
    border: 1px solid var(--olive-800);
    border-radius: 12px;
    padding: 16px 18px;
    text-align: center;
    color: #fff;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .10), inset 0 1px 0 rgba(255, 255, 255, .08);
    transition: transform .18s ease, box-shadow .18s ease;

    /* Alineación vertical y alturas consistentes */
    min-height: 120px;
    /* ajusta si lo necesitas */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Separadores verticales sutiles */
.description-block.border-right {
    border-right: 1px solid rgba(255, 255, 255, .14) !important;
}

/* Hover elegante */
@media (hover:hover) {
    .description-block.bg-gradient-olive:hover {
        transform: translateY(-2px);
        background: linear-gradient(180deg, var(--olive-300) 0%, var(--olive-700) 100%) !important;
        box-shadow:
            0 10px 24px rgba(0, 0, 0, 0.14),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
}

/* Tipografía */
.description-block .description-percentage {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
}

.description-block .description-header {
    margin: 0.25rem 0 0.15rem;
    font-weight: 800;
    font-size: 1.35rem;
    line-height: 1.2;
    color: #fff;
}

.description-block .description-text {
    font-size: 0.76rem;
    letter-spacing: 0.12em;
    color: var(--olive-700);
}

/* Colores de indicadores */
.bg-gradient-olive .description-percentage.text-warning {
    color: #f3d96f !important;
}

.bg-gradient-olive .description-percentage.text-success {
    color: #b8f5b8 !important;
}

.bg-gradient-olive .description-percentage.text-danger {
    color: #ffb3b3 !important;
}

/* Responsive */
@media (max-width: 576px) {
    .description-block.border-right {
        border-right: none !important;
    }

    .row.kpi-row>[class*="col-"] {
        margin-bottom: .75rem;
    }
}

/* ====== Estilos para la tabla de vouchers ====== */

.voucher-list {
    margin-top: .75rem;
}

.table-vouchers th,
.table-vouchers td {
    vertical-align: middle;
}

.input-monto {
    text-align: right;
}

.select-banco {
    width: 100%;
}

/* =========================
   Tabla de comprobantes (responsive + tus inputs)
   ========================= */

/* Fallback: scroll horizontal si hace falta */
.table-vouchers-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Tabla base */
.table-vouchers {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

/* Compacidad general de la tabla (tuyas) */
.table-vouchers th,
.table-vouchers td {
    vertical-align: middle;
    padding: 6px 8px;
    white-space: nowrap;
}

/* Encabezado pegajoso y tema */
.table-vouchers thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--olive-800, #3b4a27);
    color: #fff;
    font-weight: 600;
}

/* Miniatura */
.voucher-thumb {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    object-fit: cover;
}

@media (max-width:480px) {
    .voucher-thumb {
        width: 56px;
        height: 56px;
    }
}

/* ======== TUS INPUTS dentro de la tabla ======== */
.table-vouchers .input-wrap {
    width: 100%;
    border-width: 1.5px;
    /* lo pediste más delgado en tabla */
    border-radius: 10px;
    box-shadow: none;
    /* sin sombra aquí para que no “salte” */
}

.table-vouchers .input-wrap.sm .input-field {
    padding: 10px 36px 10px 12px;
    /* compacto + espacio para ícono a la derecha */
    font-size: 0.9rem;
    text-align: right;
    /* estilo financiero */
}

.table-vouchers .input-icon {
    right: 10px;
    width: 18px;
    height: 18px;
}

/* Select custom: ocupa ancho completo en la tabla */
.table-vouchers .olv-selectbox {
    width: 100%;
}

.table-vouchers .olv-selectbox.sm .olv-select {
    padding: 10px 40px 10px 12px;
    font-size: .9rem;
}

/* Truncar nombre de archivo largo, pero legible */
.table-vouchers td[data-label="Comprobante"],
.table-vouchers td:nth-child(2) {
    max-width: 420px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ======== MODO TARJETAS (móvil) ======== */
@media (max-width: 768px) {
    .table-vouchers thead {
        display: none;
    }

    .table-vouchers,
    .table-vouchers tbody,
    .table-vouchers tr,
    .table-vouchers td {
        display: block;
        width: 100%;
        white-space: normal;
    }

    .table-vouchers tr {
        background: var(--paper, #fff);
        border: 1px solid color-mix(in srgb, var(--olive-700) 18%, transparent);
        border-radius: 14px;
        box-shadow: 0 6px 16px rgba(0, 0, 0, .20);
        padding: 12px;
        margin: 10px 0;
    }

    .table-vouchers td {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 4px;
    }

    /* Etiqueta “tipo ficha” sacada de data-label */
    .table-vouchers td::before {
        content: attr(data-label);
        flex: 0 0 38%;
        max-width: 40%;
        color: var(--olive-700, #495a30);
        font-weight: 600;
        font-size: .92rem;
    }

    /* Contenido del campo: ocupa el resto */
    .table-vouchers td>*:not(.input-wrap):not(.olv-selectbox) {
        flex: 1 1 auto;
        min-width: 0;
        /* habilita truncado cuando aplique */
    }

    /* Inputs y selects a ancho completo */
    .table-vouchers .input-wrap,
    .table-vouchers .olv-selectbox {
        flex: 1 1 auto;
        width: 100%;
    }

    /* Nombre de archivo ya no se trunca en móvil (que ocupe el ancho) */
    .table-vouchers td[data-label="Comprobante"] {
        overflow: visible;
        white-space: normal;
    }

    /* Última celda (acciones) a la derecha si usas botones ahí */
    .table-vouchers td[data-label="Opciones"] {
        justify-content: flex-end;
    }
}



/* ======= Para los selects personalizados dentro de la tabla ======= */
/* Paleta base oliva */
:root {
    --olv-bg-deep: rgba(27, 68, 7, 0.524);
    /* fondo caja */
    --olv-bg-soft: rgba(42, 50, 34, 0.6);
    /* hover fila */
    --olv-border: #556b2f;
    /* olive dark */
    --olv-border-glow: #8fbf3a;
    /* olive light */
    --olv-text-main: #f5ffe1;
    /* texto claro verdoso */
    --olv-text-dim: rgba(245, 255, 225, 0.6);
    /* texto tenue */
    --olv-accent-solid: #8fbf3a;
    /* acento */
    --olv-accent-gradient-start: #6e8821;
    /* degradado selección */
    --olv-accent-gradient-end: #9ad13d;
    --olv-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}

/* Contenedor del grupo label + select */
.olv-fieldgroup {
    color: var(--olv-text-main);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

/* Label arriba del select */
.olv-label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--olv-text-dim);
    margin-bottom: .4rem;
}

/* Wrapper visual del multiple select */
.olv-multi-wrapper {
    background: radial-gradient(circle at 10% 5%, rgba(60, 70, 40, 0.45) 0%, rgba(10, 12, 8, 0.2) 60%);
    border: 1.5px solid var(--olv-border);
    border-radius: 10px;
    box-shadow: var(--olv-shadow), 0 0 12px rgba(143, 191, 58, 0.15);
    padding: .4rem .5rem;
    display: flex;
    align-items: stretch;
    position: relative;
}

/* El <select multiple> en sí */
.olv-multi {
    width: 100%;
    min-height: 260px;
    max-height: 220px;
    background-color: var(--olv-bg-deep);
    background-image:
        radial-gradient(circle at 0% 0%, rgba(160, 220, 70, 0.07) 0%, rgba(0, 0, 0, 0) 70%);
    border: 1px solid var(--olv-border);
    border-radius: 8px;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, .8),
        0 0 8px rgba(143, 191, 58, 0.25);
    color: var(--olv-text-main);
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.3;
    padding: .6rem .75rem;
    cursor: pointer;
    outline: none;
    appearance: none;
    /* quita estilos nativos */
    scrollbar-width: thin;
    scrollbar-color: var(--olv-border-glow) rgba(0, 0, 0, .2);
}

/* Scrollbar WebKit */
.olv-multi::-webkit-scrollbar {
    width: 6px;
}

.olv-multi::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
}

.olv-multi::-webkit-scrollbar-thumb {
    background-image: linear-gradient(to bottom,
            var(--olv-accent-gradient-start),
            var(--olv-accent-gradient-end));
    border-radius: 4px;
    box-shadow: 0 0 6px rgba(143, 191, 58, 0.5);
}

/* Estado hover general del control */
.olv-multi:hover {
    border-color: var(--olv-border-glow);
    box-shadow:
        inset 0 0 8px rgba(0, 0, 0, .8),
        0 0 10px rgba(143, 191, 58, 0.4),
        0 16px 40px rgba(0, 0, 0, 0.7);
}

/* Estado focus (tecla TAB o click) */
.olv-multi:focus {
    border-color: var(--olv-border-glow);
    outline: 2px solid rgba(143, 191, 58, 0.4);
    outline-offset: 2px;
    box-shadow:
        0 0 12px rgba(143, 191, 58, 0.6),
        0 20px 50px rgba(0, 0, 0, 0.8);
}

/* Estilo de las opciones */
.olv-multi option {
    background-color: transparent;
    color: var(--olv-text-main);
    padding: .4rem .5rem;
    border-radius: 4px;
    font-weight: 500;
    line-height: 1.4;
}

/* Hover visual dentro del dropdown/scroll list */
.olv-multi option:hover {
    background-color: var(--olv-bg-soft);
    color: var(--olv-text-main);
}

/* Opción seleccionada (en multiple puedes tener varias) */
.olv-multi option:checked {
    /* degradado oliva "activo" */
    background-image: linear-gradient(90deg,
            var(--olv-accent-gradient-start) 0%,
            var(--olv-accent-gradient-end) 100%);
    background-color: var(--olv-accent-solid);
    /* fallback */
    color: #0f1405;
    /* texto oscuro encima del oliva claro */
    font-weight: 600;
    box-shadow: 0 0 6px rgba(143, 191, 58, 0.6);
}

/* Para browsers que ignoran background en option:checked (algunos Firefox viejos)
   reforzamos color y font-weight */
@supports not (background-image: linear-gradient(to right, #000, #111)) {
    .olv-multi option:checked {
        background-color: var(--olv-accent-solid);
        color: #0f1405;
    }
}

/* Pequeño ajuste responsive en pantallas muy chicas */
@media (max-width: 576px) {
    .olv-multi {
        min-height: 120px;
        font-size: .85rem;
    }

    .olv-label {
        font-size: .75rem;
    }
}

/* ====== Estilos para los swithes de los checknbox ====== */
.custom-switch.custom-switch-off-primary .custom-control-input~.custom-control-label::before {
    background-color: #1f3b74;
    /* azul profundo */
    border-color: #0f1c39;
    /* borde aún más oscuro */
}

.custom-switch.custom-switch-off-primary .custom-control-input:focus~.custom-control-label::before {
    box-shadow: 0 0 0 1px #fff,
        0 0 0 2px rgba(31, 59, 116, 0.25);
    /* glow azul suave */
}

.custom-switch.custom-switch-off-primary .custom-control-input~.custom-control-label::after {
    background-color: #0f1c39;
    /* perilla oscura */
}

.custom-switch.custom-switch-on-primary .custom-control-input:checked~.custom-control-label::before {
    background-color: #1f3b74;
    border-color: #0f1c39;
}

.custom-switch.custom-switch-on-primary .custom-control-input:checked:focus~.custom-control-label::before {
    box-shadow: 0 0 0 1px #fff,
        0 0 0 2px rgba(31, 59, 116, 0.25);
}

.custom-switch.custom-switch-on-primary .custom-control-input:checked~.custom-control-label::after {
    background-color: #99caff;
    /* perilla clara, contraste accesible */
}

.custom-switch.custom-switch-off-secondary .custom-control-input~.custom-control-label::before {
    background-color: #6c757d;
    /* gris medio */
    border-color: #3a3f43;
    /* gris oscuro/granito */
}

.custom-switch.custom-switch-off-secondary .custom-control-input:focus~.custom-control-label::before {
    box-shadow: 0 0 0 1px #fff,
        0 0 0 2px rgba(108, 117, 125, 0.25);
}

.custom-switch.custom-switch-off-secondary .custom-control-input~.custom-control-label::after {
    background-color: #2b2f32;
    /* perilla oscura */
}

.custom-switch.custom-switch-on-secondary .custom-control-input:checked~.custom-control-label::before {
    background-color: #6c757d;
    border-color: #3a3f43;
}

.custom-switch.custom-switch-on-secondary .custom-control-input:checked:focus~.custom-control-label::before {
    box-shadow: 0 0 0 1px #fff,
        0 0 0 2px rgba(108, 117, 125, 0.25);
}

.custom-switch.custom-switch-on-secondary .custom-control-input:checked~.custom-control-label::after {
    background-color: #bcc1c6;
    /* perilla gris clarita */
}

.custom-switch.custom-switch-off-success .custom-control-input~.custom-control-label::before {
    background-color: #4a7a4f;
    /* verde bosque medio */
    border-color: #2f4f33;
    /* borde verde oscuro profundo */
}

.custom-switch.custom-switch-off-success .custom-control-input:focus~.custom-control-label::before {
    box-shadow: 0 0 0 1px #fff,
        0 0 0 2px rgba(74, 122, 79, 0.25);
}

.custom-switch.custom-switch-off-success .custom-control-input~.custom-control-label::after {
    background-color: #2f4f33;
    /* perilla verde muy oscura */
}

.custom-switch.custom-switch-on-success .custom-control-input:checked~.custom-control-label::before {
    background-color: #4a7a4f;
    border-color: #2f4f33;
}

.custom-switch.custom-switch-on-success .custom-control-input:checked:focus~.custom-control-label::before {
    box-shadow: 0 0 0 1px #fff,
        0 0 0 2px rgba(74, 122, 79, 0.25);
}

.custom-switch.custom-switch-on-success .custom-control-input:checked~.custom-control-label::after {
    background-color: #9fc7a4;
    /* perilla verde pastel suave */
}

.custom-switch.custom-switch-off-danger .custom-control-input~.custom-control-label::before {
    background-color: #b33a44;
    /* rojo vino medio */
    border-color: #61161c;
    /* borde borgoña oscuro */
}

.custom-switch.custom-switch-off-danger .custom-control-input:focus~.custom-control-label::before {
    box-shadow: 0 0 0 1px #fff,
        0 0 0 2px rgba(179, 58, 68, 0.25);
}

.custom-switch.custom-switch-off-danger .custom-control-input~.custom-control-label::after {
    background-color: #61161c;
    /* perilla vino oscuro */
}

.custom-switch.custom-switch-on-danger .custom-control-input:checked~.custom-control-label::before {
    background-color: #b33a44;
    border-color: #61161c;
}

.custom-switch.custom-switch-on-danger .custom-control-input:checked:focus~.custom-control-label::before {
    box-shadow: 0 0 0 1px #fff,
        0 0 0 2px rgba(179, 58, 68, 0.25);
}

.custom-switch.custom-switch-on-danger .custom-control-input:checked~.custom-control-label::after {
    background-color: #e8a4aa;
    /* perilla rosado claro */
}

.custom-switch.custom-switch-off-info .custom-control-input~.custom-control-label::before {
    background-color: #1e7f8f;
    /* teal profundo */
    border-color: #0e4047;
    /* borde verde-petróleo muy oscuro */
}

.custom-switch.custom-switch-off-info .custom-control-input:focus~.custom-control-label::before {
    box-shadow: 0 0 0 1px #fff,
        0 0 0 2px rgba(30, 127, 143, 0.25);
}

.custom-switch.custom-switch-off-info .custom-control-input~.custom-control-label::after {
    background-color: #0e4047;
    /* perilla casi petróleo */
}

.custom-switch.custom-switch-on-info .custom-control-input:checked~.custom-control-label::before {
    background-color: #1e7f8f;
    border-color: #0e4047;
}

.custom-switch.custom-switch-on-info .custom-control-input:checked:focus~.custom-control-label::before {
    box-shadow: 0 0 0 1px #fff,
        0 0 0 2px rgba(30, 127, 143, 0.25);
}

.custom-switch.custom-switch-on-info .custom-control-input:checked~.custom-control-label::after {
    background-color: #7adeee;
    /* celeste/teal claro que ya usabas */
}

.custom-switch.custom-switch-off-warning .custom-control-input~.custom-control-label::before {
    background-color: #d1a83a;
    /* dorado cálido */
    border-color: #8a671c;
    /* borde ámbar tostado oscuro */
}

.custom-switch.custom-switch-off-warning .custom-control-input:focus~.custom-control-label::before {
    box-shadow: 0 0 0 1px #fff,
        0 0 0 2px rgba(209, 168, 58, 0.25);
}

.custom-switch.custom-switch-off-warning .custom-control-input~.custom-control-label::after {
    background-color: #60430f;
    /* perilla café oscuro */
}

.custom-switch.custom-switch-on-warning .custom-control-input:checked~.custom-control-label::before {
    background-color: #d1a83a;
    border-color: #8a671c;
}

.custom-switch.custom-switch-on-warning .custom-control-input:checked:focus~.custom-control-label::before {
    box-shadow: 0 0 0 1px #fff,
        0 0 0 2px rgba(209, 168, 58, 0.25);
}

.custom-switch.custom-switch-on-warning .custom-control-input:checked~.custom-control-label::after {
    background-color: #ffe7a0;
    /* perilla vainilla clara */
}

.custom-switch.custom-switch-off-dark .custom-control-input~.custom-control-label::before {
    background-color: #3a3a3a;
    /* gris carbón */
    border-color: #121212;
    /* borde negro casi puro */
}

.custom-switch.custom-switch-off-dark .custom-control-input:focus~.custom-control-label::before {
    box-shadow: 0 0 0 1px #fff,
        0 0 0 2px rgba(58, 58, 58, 0.25);
}

.custom-switch.custom-switch-off-dark .custom-control-input~.custom-control-label::after {
    background-color: #000000;
    /* perilla negra total */
}

.custom-switch.custom-switch-on-dark .custom-control-input:checked~.custom-control-label::before {
    background-color: #3a3a3a;
    border-color: #121212;
}

.custom-switch.custom-switch-on-dark .custom-control-input:checked:focus~.custom-control-label::before {
    box-shadow: 0 0 0 1px #fff,
        0 0 0 2px rgba(58, 58, 58, 0.25);
}

.custom-switch.custom-switch-on-dark .custom-control-input:checked~.custom-control-label::after {
    background-color: #7a8793;
    /* perilla gris acero (legible sobre dark) */
}

.custom-switch.custom-switch-off-purple .custom-control-input~.custom-control-label::before {
    background-color: #6f42c1;
    /* morado medio */
    border-color: #3c236d;
    /* borde morado oscuro profundo */
}

.custom-switch.custom-switch-off-purple .custom-control-input:focus~.custom-control-label::before {
    box-shadow: 0 0 0 1px #fff,
        0 0 0 2px rgba(111, 66, 193, 0.25);
}

.custom-switch.custom-switch-off-purple .custom-control-input~.custom-control-label::after {
    background-color: #3c236d;
    /* perilla morado oscuro */
}

.custom-switch.custom-switch-on-purple .custom-control-input:checked~.custom-control-label::before {
    background-color: #6f42c1;
    border-color: #3c236d;
}

.custom-switch.custom-switch-on-purple .custom-control-input:checked:focus~.custom-control-label::before {
    box-shadow: 0 0 0 1px #fff,
        0 0 0 2px rgba(111, 66, 193, 0.25);
}

.custom-switch.custom-switch-on-purple .custom-control-input:checked~.custom-control-label::after {
    background-color: #c7b5e7;
    /* perilla lila pastel */
}

.custom-switch.custom-switch-off-melon .custom-control-input~.custom-control-label::before {
    background-color: #b55a3d;
    /* coral tostado medio */
    border-color: #6d2d1c;
    /* borde marrón rojizo profundo */
}

.custom-switch.custom-switch-off-melon .custom-control-input:focus~.custom-control-label::before {
    box-shadow: 0 0 0 1px #fff,
        0 0 0 2px rgba(183, 90, 61, 0.25);
}

.custom-switch.custom-switch-off-melon .custom-control-input~.custom-control-label::after {
    background-color: #6d2d1c;
    /* perilla marrón oscuro */
}

.custom-switch.custom-switch-on-melon .custom-control-input:checked~.custom-control-label::before {
    background-color: #b55a3d;
    border-color: #6d2d1c;
}

.custom-switch.custom-switch-on-melon .custom-control-input:checked:focus~.custom-control-label::before {
    box-shadow: 0 0 0 1px #fff,
        0 0 0 2px rgba(183, 90, 61, 0.25);
}

.custom-switch.custom-switch-on-melon .custom-control-input:checked~.custom-control-label::after {
    background-color: #f0b9a2;
    /* perilla durazno claro */
}

/* ====== Estilos para los saldos de las carteeras que se visualizan en el modulo de carteras ====== */

/* Caja contenedora: la volvemos flex para alinear contenido + botón */
/* Monto responsivo dentro de la info-box */
/* Contenedor tarjeta cartera */
/* CONTENEDOR DE TODAS LAS CARTERAS */
.wallet-row {
    display: inline-flex;
    flex-wrap: nowrap;
    /* 🔒 siempre en una sola línea */
    overflow-x: auto;
    /* ⬅ aparece scroll horizontal si no caben */
    scrollbar-width: thin;
    /* Firefox: scrollbar discreta */
    scrollbar-color: rgba(0, 0, 0, .4) rgba(0, 0, 0, .1);

    padding: .75rem;
    gap: 1rem;
    /* espacio entre tarjetas */
}

/* Scrollbar bonita para Chrome/Edge/WebKit */
.wallet-row::-webkit-scrollbar {
    height: 8px;
}

.wallet-row::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, .15);
    border-radius: 4px;
}

.wallet-row::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .4);
    border-radius: 4px;
}

.wallet-row::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, .55);
}

/* COLUMNA RESPONSIVE
   - "flex: 1 1 260px" = cada tarjeta intenta medir al menos 260px.
   - Si hay espacio entran varias por fila. Si no, baja.
*/
.wallet-col {
    flex: 0 0 320px;
    /* cada cartera ocupa ~320px en la fila */
    max-width: 320px;
    min-width: 280px;
    /* evita que se aplaste demasiado */
}

/* TARJETA */
.wallet-card {
    width: 100%;
    box-sizing: border-box;

    display: flex;
    flex-wrap: wrap;
    align-items: center;

    background: var(--olv-accent-gradient-start);
    color: var(--olv-text-main);

    border-radius: .75rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .35);

    padding: 1rem 1rem 1rem .75rem;
    min-height: 90px;
    position: relative;
    gap: .75rem;
}

/* Bloque izquierdo: icono + texto */
.wallet-left {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: .75rem;
}

/* Icono billetera */
.wallet-icon {
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    border-radius: .5rem;
    background: #f8f9fa;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #1f2a37;
}

/* Texto cartera (nombre + saldo) */
.wallet-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.wallet-name {
    font-size: .9rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.wallet-amount {
    font-weight: 700;
    line-height: 1.15;
    font-size: clamp(1rem, 2.2vw + 0.4rem, 1.8rem);
    font-variant-numeric: tabular-nums lining-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Botón Detalles */
.wallet-action {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.wallet-action .btn-details {
    white-space: nowrap;
    font-size: .8rem;
    line-height: 1.2;
    height: auto;
    padding: .4rem .6rem;
    border-radius: .5rem;
    border: 1px solid #1c5c2a;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
    transition: all .15s ease-in-out;
    background: #28451a;
    color: #00f736;
}

.wallet-action .btn-details:hover {
    background: #1c5c2a;
    color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .4);
}

/* MODO MOBILE:
   - Apila el botón debajo para que no quede “flotando al lado”.
*/
@media (max-width: 576px) {
    .wallet-card {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .wallet-left {
        justify-content: center;
        text-align: center;
    }

    .wallet-action {
        width: 100%;
        justify-content: center;
    }

    .wallet-action .btn-details {
        width: 100%;
        max-width: 200px;
    }

    .wallet-name {
        white-space: normal;
    }

    .wallet-amount {
        white-space: normal;
    }
}



/* =========================
   Estilos para los inputs WRAPS
    ========================= */
/* Asegura que el contenedor del plugin ocupe todo el ancho del input-wrap */
.input-wrap .iti {
    width: 100%;
}

/* Input interno del plugin con mismo estilo que .input-field */
.input-wrap .iti__tel-input {
    width: 100%;
    border: none;
    background: transparent;
    padding-right: 2.5rem;
    /* espacio para el icono de la derecha */
}

/* Opcional: alinear verticalmente para que la altura sea idéntica */
.input-wrap,
.input-wrap .iti__tel-input,
.input-wrap .input-field {
    min-height: 50px;
    /* ajusta al alto que uses en tu diseño */
}


/* Fondo principal del modal conquita */
.conq-modal-bg {
  background-color: rgba(38, 53, 31, 0.92); /* mismo verde, 92% opacidad */
  color: #f6f6f6;
}

/* Panel superior de resumen */
.conq-summary-panel {
  background: rgba(0,0,0,0.12);
  border-radius: 12px;
}

/* Panel de formulario / detalle */
.conq-form-panel {
  background: rgba(0,0,0,0.08);
  border-radius: 12px;
}

/* Etiqueta pequeña en mayúsculas */
.conq-label-sm {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255,255,255,0.75);
}

/* Inputs dentro del modal conquita */
.conq-modal-bg .conq-input {
  background-color: rgba(0,0,0,0.20);
  border-color: rgba(255,255,255,0.15);
  color: #fff;
}

.conq-modal-bg .conq-input::placeholder {
  color: rgba(255,255,255,0.5);
}

/* Texto claro genérico dentro del modal conquita */
.conq-modal-bg .conq-text-muted {
  color: rgba(255,255,255,0.6);
}

/* Títulos / números principales */
.conq-h4 {
  font-size: 1.4rem;
  font-weight: 600;
}

.conq-h6 {
  font-size: 1rem;
  font-weight: 500;
}


.badge-melon-gradient {
    background: linear-gradient(135deg, #FDBCB4, #FFB3A6);
    color: #5a2b23;              /* texto oscuro para buen contraste */
    border-radius: 999px;        /* pill/badge */
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.05);
}