/* ==========================================================================
   Voxa Theme — capa visual global sobre Bootstrap 5.3 (Mekano CRM)

   Se carga DESPUÉS de bootstrap.min.css, app.css y DataTables en getHeader().
   No cambia markup ni JS: re-estiliza las clases que las vistas ya usan
   (navbar, tarjetas, botones, formularios, tablas, tabs, modales, badges...).
   Tokens compatibles con Voxa UI (prefijo vx-) para futuras vistas nuevas.
   Estándar: docs/estandares/voxa_theme.md
   ========================================================================== */

:root {
  /* marca */
  --vx-navy-900: #071e3b;
  --vx-navy-700: #10386b;
  --vx-navy-600: #1d4b86;
  --vx-navy-100: #e8eef7;
  --vx-amber:    #feba00;
  --vx-amber-h:  #ffa80b;
  --vx-amber-bg: #fff6dc;

  /* superficie y texto */
  --vx-bg:        #f4f6f9;
  --vx-surface:   #ffffff;
  --vx-surface-2: #f7f9fc;
  --vx-ink:       #1f2a37;
  --vx-body:      #4a5560;
  --vx-muted:     #8a94a0;
  --vx-line:      #e6eaf0;
  --vx-line-2:    #d8dee6;

  /* semántica */
  --vx-ok:      #1f7a4d;  --vx-ok-bg:      #e6f3ec;
  --vx-danger:  #c0392b;  --vx-danger-bg:  #fbeae8;
  --vx-warn:    #b7791f;  --vx-warn-bg:    #fdf4dc;
  --vx-info:    #2c5687;  --vx-info-bg:    #eaf1f9;
  --vx-neutral: #5b6672;  --vx-neutral-bg: #eef1f5;

  /* forma */
  --vx-radius:    10px;
  --vx-radius-sm: 8px;
  --vx-radius-xs: 6px;
  --vx-shadow:    0 2px 12px rgba(7, 30, 59, .06);
  --vx-shadow-lg: 0 12px 40px rgba(7, 30, 59, .18);
  --vx-focus:     0 0 0 3px rgba(16, 56, 107, .16);
  --vx-font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Bootstrap: variables globales que alcanzan a todos los componentes */
  --bs-body-color: var(--vx-body);
  --bs-body-font-family: var(--vx-font);
  --bs-border-color: var(--vx-line);
  --bs-border-radius: var(--vx-radius-sm);
  --bs-border-radius-sm: var(--vx-radius-xs);
  --bs-border-radius-lg: var(--vx-radius);
  --bs-link-color: var(--vx-navy-600);
  --bs-link-hover-color: var(--vx-navy-900);
  --bs-link-color-rgb: 29, 75, 134;
  --bs-link-hover-color-rgb: 7, 30, 59;
  --bs-heading-color: var(--vx-ink);
  --bs-secondary-color: var(--vx-muted);
  --bs-primary: var(--vx-navy-700);
  --bs-primary-rgb: 16, 56, 107;
}

/* --- base ------------------------------------------------------------------ */
html, body { background-color: var(--vx-bg) !important; }
body { color: var(--vx-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { color: var(--vx-ink); font-weight: 600; letter-spacing: -.01em; }
a { text-decoration-thickness: 1px; text-underline-offset: 2px; }
hr { border-color: var(--vx-line-2); opacity: 1; }
label, .form-label { color: var(--vx-body); }
small, .small { color: inherit; }

/* Título de página (h3 al inicio del <main>) */
main.main > h3, main.main > .row h3, main.main h3:first-of-type {
  font-size: 1.45rem; font-weight: 600; color: var(--vx-ink); margin-bottom: .35rem;
}
main.main > hr { margin: .75rem 0 1.25rem; border-color: var(--vx-line); }

/* Scrollbars finos en contenedores con scroll propio */
.custom-scroll-300, .custom-scroll-500, .table-scroll-wrapper, .table-responsive, .table-responsive-sm, .offcanvas-body, .modal-body {
  scrollbar-width: thin; scrollbar-color: var(--vx-line-2) transparent;
}
.custom-scroll-300::-webkit-scrollbar, .custom-scroll-500::-webkit-scrollbar, .table-scroll-wrapper::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar, .table-responsive-sm::-webkit-scrollbar, .offcanvas-body::-webkit-scrollbar, .modal-body::-webkit-scrollbar { width: 8px; height: 8px; }
.custom-scroll-300::-webkit-scrollbar-thumb, .custom-scroll-500::-webkit-scrollbar-thumb, .table-scroll-wrapper::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb, .table-responsive-sm::-webkit-scrollbar-thumb, .offcanvas-body::-webkit-scrollbar-thumb, .modal-body::-webkit-scrollbar-thumb { background: var(--vx-line-2); border-radius: 8px; }

/* --- navbar ---------------------------------------------------------------- */
.navbar.fixed-top {
  background-color: var(--vx-navy-700) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 4px 16px rgba(7, 30, 59, .22);
  padding-top: .35rem; padding-bottom: .35rem;
}
.navbar .navbar-nav .nav-link {
  color: rgba(255,255,255,.78); font-weight: 500; font-size: .875rem;
  padding: .55rem .8rem; border-radius: var(--vx-radius-xs); position: relative;
  transition: color .15s ease, background-color .15s ease;
}
.navbar .navbar-nav .nav-link:hover, .navbar .navbar-nav .nav-link:focus { color: #fff; background-color: rgba(255,255,255,.07); }
.navbar .navbar-nav .nav-link.active { color: #fff; font-weight: 600; background-color: rgba(255,255,255,.09); }
/* subrayado ambar en ::before: el ::after lo usa Bootstrap para la flecha de los desplegables (Ventas, Inventario) */
.navbar .navbar-nav .nav-link.active::before {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .15rem;
  height: 2.5px; border-radius: 2px; background: var(--vx-amber);
}
.navbar .navbar-nav .nav-link.dropdown-toggle.active::before { right: 1.6rem; }
.navbar .navbar-nav .dropdown-toggle::after { vertical-align: .18em; opacity: .85; }
.navbar .navbar-nav .nav-item.show > .nav-link { color: #fff; background-color: rgba(255,255,255,.09); }
.navbar .navbar-nav .nav-link.btn.border { border-color: rgba(255,255,255,.35) !important; color: #fff; line-height: 1; }
.navbar .navbar-nav .nav-link.btn.border:hover { background-color: var(--vx-amber); border-color: var(--vx-amber) !important; color: var(--vx-navy-900); }
.navbar .link-light { color: rgba(255,255,255,.78) !important; transition: color .15s ease; }
.navbar .link-light:hover { color: #fff !important; }
.navbar .dropdown-menu { margin-top: .5rem; }

/* buscador global */
.navbar .input-group .form-select, .navbar .input-group .form-control, .navbar .input-group .btn {
  border-color: rgba(255,255,255,.14); font-size: .85rem; box-shadow: none;
}
.navbar .input-group .form-select { background-color: rgba(255,255,255,.12); color: #fff; max-width: 150px; }
.navbar .input-group .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.navbar .input-group .form-select option { color: var(--vx-ink); }
.navbar .input-group .form-control { background-color: rgba(255,255,255,.12); color: #fff; }
.navbar .input-group .form-control::placeholder { color: rgba(255,255,255,.55); }
.navbar .input-group .form-control:focus, .navbar .input-group .form-select:focus { background-color: rgba(255,255,255,.18); border-color: rgba(255,255,255,.35); box-shadow: none; color: #fff; }
.navbar .input-group .btn-light { background-color: var(--vx-amber); border-color: var(--vx-amber); color: var(--vx-navy-900); font-weight: 600; }
.navbar .input-group .btn-light:hover { background-color: var(--vx-amber-h); border-color: var(--vx-amber-h); }

/* --- botones --------------------------------------------------------------- */
.btn {
  --bs-btn-border-radius: var(--vx-radius-sm);
  --bs-btn-font-weight: 500;
  --bs-btn-font-size: .875rem;
  --bs-btn-padding-y: .45rem; --bs-btn-padding-x: .95rem;
  --bs-btn-focus-box-shadow: var(--vx-focus);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn-sm { --bs-btn-border-radius: var(--vx-radius-xs); --bs-btn-font-size: .8rem; --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .7rem; }
.btn:focus-visible { box-shadow: var(--vx-focus); }

.voxa-btn-blue, .dt-button.voxa-btn-blue { color: #fff !important; background-color: var(--vx-navy-900) !important; border-color: var(--vx-navy-900) !important; }
.voxa-btn-blue:hover, .voxa-btn-blue:focus { background-color: var(--vx-navy-700) !important; border-color: var(--vx-navy-700) !important; color: #fff !important; }
.voxa-btn-yellow { color: var(--vx-navy-900); background-color: var(--vx-amber); border-color: var(--vx-amber); font-weight: 600; }
.voxa-btn-yellow:hover, .voxa-btn-yellow:focus { color: var(--vx-navy-900); background-color: var(--vx-amber-h); border-color: var(--vx-amber-h); }

.btn-primary { --bs-btn-bg: var(--vx-navy-700); --bs-btn-border-color: var(--vx-navy-700); --bs-btn-hover-bg: var(--vx-navy-900); --bs-btn-hover-border-color: var(--vx-navy-900); --bs-btn-active-bg: var(--vx-navy-900); --bs-btn-active-border-color: var(--vx-navy-900); }
.btn-secondary { --bs-btn-bg: #6b7785; --bs-btn-border-color: #6b7785; --bs-btn-hover-bg: #5b6672; --bs-btn-hover-border-color: #5b6672; }
.btn-success { --bs-btn-bg: var(--vx-ok); --bs-btn-border-color: var(--vx-ok); --bs-btn-hover-bg: #1a6640; --bs-btn-hover-border-color: #1a6640; }
.btn-danger { --bs-btn-bg: var(--vx-danger); --bs-btn-border-color: var(--vx-danger); --bs-btn-hover-bg: #a93226; --bs-btn-hover-border-color: #a93226; }
.btn-warning { --bs-btn-bg: var(--vx-amber); --bs-btn-border-color: var(--vx-amber); --bs-btn-color: var(--vx-navy-900); --bs-btn-hover-bg: var(--vx-amber-h); --bs-btn-hover-border-color: var(--vx-amber-h); --bs-btn-hover-color: var(--vx-navy-900); }
.btn-info { --bs-btn-bg: var(--vx-info); --bs-btn-border-color: var(--vx-info); --bs-btn-color: #fff; --bs-btn-hover-bg: #244a75; --bs-btn-hover-border-color: #244a75; --bs-btn-hover-color: #fff; }
.btn-light { --bs-btn-bg: var(--vx-surface); --bs-btn-border-color: var(--vx-line-2); --bs-btn-color: var(--vx-navy-700); --bs-btn-hover-bg: var(--vx-surface-2); --bs-btn-hover-border-color: var(--vx-line-2); --bs-btn-hover-color: var(--vx-navy-900); }
.btn-outline-secondary { --bs-btn-color: var(--vx-body); --bs-btn-border-color: var(--vx-line-2); --bs-btn-hover-bg: var(--vx-surface-2); --bs-btn-hover-border-color: var(--vx-line-2); --bs-btn-hover-color: var(--vx-ink); }
.btn-outline-danger { --bs-btn-color: var(--vx-danger); --bs-btn-border-color: #efc4bf; --bs-btn-hover-bg: var(--vx-danger-bg); --bs-btn-hover-border-color: #efc4bf; --bs-btn-hover-color: var(--vx-danger); }
.btn-outline-primary { --bs-btn-color: var(--vx-navy-700); --bs-btn-border-color: var(--vx-navy-700); --bs-btn-hover-bg: var(--vx-navy-700); --bs-btn-hover-border-color: var(--vx-navy-700); }

/* --- tarjetas y KPIs ------------------------------------------------------- */
.card {
  --bs-card-border-color: var(--vx-line);
  --bs-card-border-radius: var(--vx-radius);
  --bs-card-inner-border-radius: calc(var(--vx-radius) - 1px);
  --bs-card-bg: var(--vx-surface);
  --bs-card-cap-bg: var(--vx-surface-2);
  box-shadow: var(--vx-shadow);
}
.card.shadow-sm { box-shadow: var(--vx-shadow) !important; }
.card.border-0 { border: 1px solid var(--vx-line) !important; }
.card > .d-flex.justify-content-between > div > h6,
.card > h6, .card .card-header h6, .card .card-title {
  font-size: .95rem; font-weight: 600; color: var(--vx-ink); margin: .15rem 0 .35rem;
}
.card > .d-flex.justify-content-between { padding: .35rem .5rem .25rem; border-bottom: 1px solid var(--vx-line); margin-bottom: .6rem; }

.kpi.bg-light, .kpi {
  background-color: var(--vx-surface-2) !important;
  border: 1px solid var(--vx-line);
  border-radius: var(--vx-radius) !important;
  transition: box-shadow .15s ease, transform .15s ease;
}
.kpi:hover { box-shadow: var(--vx-shadow); }
.kpi .text-uppercase.small { font-size: .68rem !important; letter-spacing: .06em; font-weight: 600; color: var(--vx-muted) !important; }
.kpi .fs-4 { font-size: 1.35rem !important; letter-spacing: -.02em; }
.kpi .fs-4:not(.text-success):not(.text-danger) { color: var(--vx-ink); }
.text-success { color: var(--vx-ok) !important; }
.text-danger { color: var(--vx-danger) !important; }

/* --- formularios ------------------------------------------------------------ */
.form-control, .form-select {
  background-color: var(--vx-surface);
  border-color: var(--vx-line-2); border-radius: var(--vx-radius-sm);
  color: var(--vx-ink); font-size: .9rem; padding: .48rem .75rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control-sm, .form-select-sm { border-radius: var(--vx-radius-xs); font-size: .82rem; padding: .32rem .6rem; }
.form-control:focus, .form-select:focus { border-color: var(--vx-navy-600); box-shadow: var(--vx-focus); }
.form-control::placeholder { color: var(--vx-muted); }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--vx-surface-2); color: var(--vx-body); border-color: var(--vx-line); }
.form-label { font-size: .85rem; font-weight: 500; margin-bottom: .3rem; }
.form-label .text-danger, .form-label span[style*="red"] { color: var(--vx-danger) !important; }
.input-group-text { background-color: var(--vx-surface-2); border-color: var(--vx-line-2); color: var(--vx-body); border-radius: var(--vx-radius-sm); }
.form-check-input { border-color: var(--vx-line-2); }
.form-check-input:checked { background-color: var(--vx-navy-700); border-color: var(--vx-navy-700); }
.form-check-input:focus { border-color: var(--vx-navy-600); box-shadow: var(--vx-focus); }
.form-text { color: var(--vx-muted); }
.voxa-input-error { color: var(--vx-danger); font-size: 12px; }
.was-validated .form-control:invalid, .form-control.is-invalid, .form-select.is-invalid { border-color: var(--vx-danger); }
.invalid-feedback { color: var(--vx-danger); }

/* --- tablas ----------------------------------------------------------------- */
/* customPaginateTable: la tabla propia del CRM (renderers JS) */
.customPaginateTable {
  font-family: var(--vx-font);
  font-size: 12px;
  box-shadow: none;
  border: 1px solid var(--vx-line);
  border-radius: var(--vx-radius-sm);
  overflow: hidden;
  background: var(--vx-surface);
}
.customPaginateTable thead tr { background-color: var(--vx-surface-2); color: var(--vx-body); }
.customPaginateTable thead th {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--vx-muted);
  border-bottom: 1px solid var(--vx-line-2); padding: 10px 12px; white-space: nowrap;
}
.customPaginateTable tbody tr { background-color: var(--vx-surface); transition: background-color .12s ease; }
.customPaginateTable tbody tr:nth-of-type(even) { background-color: #fbfcfd; }
.customPaginateTable tbody tr:hover { background-color: var(--vx-navy-100); }
.customPaginateTable td { border-bottom: 1px solid var(--vx-line); padding: 9px 12px; vertical-align: middle; color: var(--vx-body); }
.customPaginateTable tbody tr:last-child td { border-bottom: 0; }
.customPaginateTable button:hover { color: var(--vx-navy-700); }

/* tablas anidadas (productos dentro de una fila) */
.customPaginateTable table, .customPaginateTable .table { border: 0; box-shadow: none; margin: 0; background: transparent; }
.customPaginateTable .table > thead th { background: transparent; text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--vx-muted); border-bottom: 1px solid var(--vx-line); padding: 4px 8px; }
.customPaginateTable .table > tbody td { border-bottom: 1px dashed var(--vx-line); padding: 4px 8px; }
.customPaginateTable .table > tbody tr:last-child td { border-bottom: 0; }
.customPaginateTable .table > tbody tr:hover { background: transparent; }

/* tablas Bootstrap */
.table {
  --bs-table-bg: var(--vx-surface);
  --bs-table-color: var(--vx-body);
  --bs-table-border-color: var(--vx-line);
  --bs-table-striped-bg: #fbfcfd;
  --bs-table-hover-bg: var(--vx-navy-100);
  --bs-table-active-bg: var(--vx-navy-100);
  font-size: .85rem;
}
.table > thead th, .table > :not(caption) > * > th {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--vx-muted);
  background-color: var(--vx-surface-2); border-bottom: 1px solid var(--vx-line-2); vertical-align: middle;
}
.table > :not(caption) > * > * { padding: .55rem .7rem; }
.table-sm > :not(caption) > * > * { padding: .4rem .55rem; }
.table-secondary { --bs-table-bg: var(--vx-surface-2); --bs-table-striped-bg: var(--vx-surface-2); --bs-table-hover-bg: var(--vx-navy-100); --bs-table-border-color: var(--vx-line); }
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: var(--vx-navy-100); }

/* paginación propia */
.custom-pagination { gap: 4px; margin-top: .75rem; align-items: center; }
.custom-pagination button {
  border: 1px solid var(--vx-line-2); background: var(--vx-surface); color: var(--vx-body);
  border-radius: var(--vx-radius-xs); padding: 5px 11px; margin: 0; font-size: 13px; font-family: var(--vx-font);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.custom-pagination button:hover:not(:disabled) { background: var(--vx-surface-2); border-color: var(--vx-navy-600); color: var(--vx-navy-700); }
.custom-pagination button.active { background: var(--vx-navy-700); border-color: var(--vx-navy-700); color: #fff; font-weight: 600; }
.custom-pagination button:disabled { color: var(--vx-line-2); background: var(--vx-surface); }

/* DataTables */
table.dataTable { font-size: 12.5px; border-collapse: collapse !important; }
table.dataTable thead th, table.dataTable thead td {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--vx-muted);
  background: var(--vx-surface-2); border-bottom: 1px solid var(--vx-line-2) !important; padding: 10px 12px;
}
table.dataTable tbody td { padding: 9px 12px; border-bottom: 1px solid var(--vx-line); }
table.dataTable.display tbody tr.odd, table.dataTable.display tbody tr.odd > .sorting_1 { background-color: var(--vx-surface); }
table.dataTable.display tbody tr.even, table.dataTable.display tbody tr.even > .sorting_1 { background-color: #fbfcfd; }
table.dataTable.display tbody tr:hover, table.dataTable.display tbody tr:hover > .sorting_1,
table.dataTable.hover tbody tr:hover { background-color: var(--vx-navy-100) !important; }
table.dataTable.no-footer { border-bottom: 1px solid var(--vx-line); }
.dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--vx-line-2); border-radius: var(--vx-radius-xs); padding: .3rem .6rem; font-size: .82rem; background: var(--vx-surface); color: var(--vx-ink);
}
.dataTables_wrapper .dataTables_filter input:focus { outline: none; border-color: var(--vx-navy-600); box-shadow: var(--vx-focus); }
.dataTables_wrapper .dataTables_info { color: var(--vx-muted); font-size: .8rem; padding-top: .9rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border: 1px solid var(--vx-line-2) !important; border-radius: var(--vx-radius-xs); background: var(--vx-surface) !important;
  color: var(--vx-body) !important; padding: .3rem .7rem; margin-left: 4px; font-size: .82rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--vx-surface-2) !important; border-color: var(--vx-navy-600) !important; color: var(--vx-navy-700) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--vx-navy-700) !important; border-color: var(--vx-navy-700) !important; color: #fff !important; font-weight: 600;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: .45; }
.dt-button, .dt-buttons .dt-button {
  border-radius: var(--vx-radius-xs) !important; border: 1px solid var(--vx-line-2) !important; background: var(--vx-surface) !important;
  color: var(--vx-body) !important; font-size: .8rem; padding: .3rem .7rem;
}
.dt-button:hover, .dt-buttons .dt-button:hover { background: var(--vx-surface-2) !important; }

/* --- tabs ------------------------------------------------------------------- */
.nav-tabs {
  --bs-nav-tabs-border-color: var(--vx-line-2);
  --bs-nav-tabs-link-active-color: var(--vx-navy-900);
  --bs-nav-tabs-link-active-bg: transparent;
  --bs-nav-tabs-link-active-border-color: transparent transparent var(--vx-amber) transparent;
  --bs-nav-tabs-link-hover-border-color: transparent transparent var(--vx-line-2) transparent;
  --bs-nav-link-color: var(--vx-muted);
  --bs-nav-link-hover-color: var(--vx-navy-700);
  gap: 2px;
}
.nav-tabs .nav-link {
  font-size: .875rem; font-weight: 500; padding: .6rem .9rem; margin-bottom: -1px;
  border: 0; border-bottom: 2.5px solid transparent; border-radius: 0; color: var(--vx-muted);
  transition: color .15s ease, border-color .15s ease;
}
.nav-tabs .nav-link:hover { color: var(--vx-navy-700); border-bottom-color: var(--vx-line-2); isolation: auto; }
.nav-tabs .nav-link.active { color: var(--vx-navy-900); font-weight: 600; border-bottom-color: var(--vx-amber); background: transparent; }
.nav-tabs .nav-link:focus-visible { box-shadow: var(--vx-focus); border-radius: var(--vx-radius-xs); }
#tabsStage .nav-link { font-size: .82rem; }
.tab-content { padding-top: .5rem; }

/* pills (por si alguna vista los usa) */
.nav-pills { --bs-nav-pills-link-active-bg: var(--vx-navy-700); --bs-nav-pills-border-radius: var(--vx-radius-sm); }

/* --- badges ---------------------------------------------------------------- */
.badge { font-weight: 600; letter-spacing: .01em; padding: .35em .6em; border-radius: 999px; }
.badge.text-bg-primary, .badge.bg-primary { background-color: var(--vx-navy-600) !important; color: #fff !important; }
.badge.text-bg-secondary, .badge.bg-secondary { background-color: var(--vx-neutral-bg) !important; color: var(--vx-neutral) !important; }
.badge.text-bg-success, .badge.bg-success { background-color: var(--vx-ok-bg) !important; color: var(--vx-ok) !important; }
.badge.text-bg-danger { background-color: var(--vx-danger-bg) !important; color: var(--vx-danger) !important; }
.badge.text-bg-warning, .badge.bg-warning { background-color: var(--vx-warn-bg) !important; color: var(--vx-warn) !important; }
.badge.text-bg-info, .badge.bg-info { background-color: var(--vx-info-bg) !important; color: var(--vx-info) !important; }
/* contadores rojos sobre botones (notificaciones) siguen sólidos */
.position-absolute.badge.bg-danger, .btn .badge.bg-danger { background-color: var(--vx-danger) !important; color: #fff !important; }

/* --- alertas ---------------------------------------------------------------- */
.alert { border-radius: var(--vx-radius-sm); border-width: 1px; border-left-width: 4px; font-size: .875rem; }
.alert-success { --bs-alert-bg: var(--vx-ok-bg); --bs-alert-color: var(--vx-ok); --bs-alert-border-color: #b8e2c8; }
.alert-danger { --bs-alert-bg: var(--vx-danger-bg); --bs-alert-color: #7d2f28; --bs-alert-border-color: #f0c2bd; }
.alert-warning { --bs-alert-bg: var(--vx-warn-bg); --bs-alert-color: #7a5410; --bs-alert-border-color: #ead9a6; }
.alert-info { --bs-alert-bg: var(--vx-info-bg); --bs-alert-color: var(--vx-info); --bs-alert-border-color: #c7d9ec; }

/* --- dropdowns ------------------------------------------------------------- */
.dropdown-menu {
  --bs-dropdown-border-color: var(--vx-line);
  --bs-dropdown-border-radius: var(--vx-radius);
  --bs-dropdown-link-hover-bg: var(--vx-surface-2);
  --bs-dropdown-link-active-bg: var(--vx-navy-700);
  --bs-dropdown-font-size: .85rem;
  --bs-dropdown-item-padding-y: .45rem;
  --bs-dropdown-item-padding-x: .9rem;
  box-shadow: 0 10px 30px rgba(7, 30, 59, .14);
  padding: .35rem;
}
.dropdown-item { border-radius: var(--vx-radius-xs); }
.dropdown-item:active { color: #fff; }

/* --- modales y offcanvas ---------------------------------------------------- */
.modal-content {
  --bs-modal-border-radius: 14px;
  --bs-modal-border-color: transparent;
  --bs-modal-header-border-color: var(--vx-line);
  --bs-modal-footer-border-color: var(--vx-line);
  box-shadow: var(--vx-shadow-lg);
}
.modal-header { padding: 1rem 1.25rem .85rem; }
.modal-title { font-size: 1.05rem !important; font-weight: 600; color: var(--vx-ink); }
.modal-body { padding: 1.1rem 1.25rem; }
.modal-footer { padding: .75rem 1.25rem; background: var(--vx-surface-2); border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; }
.modal-backdrop.show { opacity: .45; }
.offcanvas { --bs-offcanvas-border-color: var(--vx-line); box-shadow: var(--vx-shadow-lg); }
.offcanvas-bottom { border-top-left-radius: 14px; border-top-right-radius: 14px; }
.offcanvas-header { border-bottom: 1px solid var(--vx-line); }
.offcanvas-title { font-size: 1.05rem; font-weight: 600; }

/* --- listas y acordeones ---------------------------------------------------- */
.list-group { --bs-list-group-border-color: var(--vx-line); --bs-list-group-border-radius: var(--vx-radius-sm); --bs-list-group-active-bg: var(--vx-navy-700); --bs-list-group-active-border-color: var(--vx-navy-700); }
.accordion { --bs-accordion-border-color: var(--vx-line); --bs-accordion-border-radius: var(--vx-radius); --bs-accordion-inner-border-radius: calc(var(--vx-radius) - 1px); --bs-accordion-btn-focus-box-shadow: var(--vx-focus); --bs-accordion-active-bg: var(--vx-navy-100); --bs-accordion-active-color: var(--vx-navy-900); }
.accordion-button { font-weight: 500; font-size: .9rem; }

/* --- botón flotante de actividades pendientes -------------------------------- */
#btnScheduleReminderDet {
  background-color: var(--vx-navy-900) !important; border-radius: 999px; font-weight: 600; font-size: .85rem;
  padding: .55rem 1.1rem; box-shadow: 0 8px 22px rgba(7, 30, 59, .3);
}
#btnScheduleReminderDet:hover { background-color: var(--vx-navy-700) !important; }

/* --- terceros --------------------------------------------------------------- */
.apexcharts-canvas text, .apexcharts-text, .apexcharts-legend-text, .apexcharts-tooltip, .apexcharts-xaxistooltip { font-family: var(--vx-font) !important; }
.apexcharts-tooltip { border-radius: var(--vx-radius-sm) !important; box-shadow: var(--vx-shadow-lg) !important; border-color: var(--vx-line) !important; }
.swal2-popup { font-family: var(--vx-font) !important; border-radius: 14px !important; }
.swal2-title { color: var(--vx-ink) !important; font-size: 1.3rem !important; }
.swal2-styled.swal2-confirm { border-radius: var(--vx-radius-sm) !important; background-color: var(--vx-navy-700) !important; font-weight: 600; }
.swal2-styled.swal2-cancel { border-radius: var(--vx-radius-sm) !important; font-weight: 600; }
.swal2-styled:focus { box-shadow: var(--vx-focus) !important; }
.flatpickr-calendar { border-radius: var(--vx-radius) !important; box-shadow: var(--vx-shadow-lg) !important; font-family: var(--vx-font); }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--vx-navy-700) !important; border-color: var(--vx-navy-700) !important; }
.flatpickr-day.today { border-color: var(--vx-amber) !important; }
.tooltip { --bs-tooltip-bg: var(--vx-navy-900); --bs-tooltip-border-radius: var(--vx-radius-xs); font-family: var(--vx-font); }

/* FullCalendar (agenda) */
.fc { font-family: var(--vx-font); --fc-border-color: var(--vx-line); --fc-today-bg-color: var(--vx-amber-bg); --fc-page-bg-color: var(--vx-surface); --fc-neutral-bg-color: var(--vx-surface-2); }
.fc .fc-toolbar-title { font-size: 1.15rem; font-weight: 600; color: var(--vx-ink); }
.fc .fc-button { font-family: var(--vx-font); font-size: .82rem; font-weight: 500; border-radius: var(--vx-radius-xs); padding: .38rem .75rem; text-transform: capitalize; }
.fc .fc-button-primary { background-color: var(--vx-surface); border-color: var(--vx-line-2); color: var(--vx-navy-700); }
.fc .fc-button-primary:hover { background-color: var(--vx-surface-2); border-color: var(--vx-line-2); color: var(--vx-navy-900); }
.fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active { background-color: var(--vx-navy-700); border-color: var(--vx-navy-700); color: #fff; }
.fc .fc-button-primary:disabled { background-color: var(--vx-surface-2); border-color: var(--vx-line); color: var(--vx-muted); }
.fc .fc-button:focus, .fc .fc-button-primary:focus { box-shadow: var(--vx-focus); }
.fc .fc-col-header-cell-cushion, .fc .fc-daygrid-day-number { color: var(--vx-ink); font-weight: 600; text-decoration: none; font-size: .85rem; }
.fc .fc-timegrid-slot-label-cushion, .fc .fc-timegrid-axis-cushion { color: var(--vx-muted); font-size: .78rem; }
.fc .fc-event { border-radius: var(--vx-radius-xs); font-size: .8rem; }
.fc .fc-list-event:hover td { background-color: var(--vx-navy-100); }

/* --- sidebar legacy (donde aún se muestra) ---------------------------------- */
.menu { background-color: var(--vx-navy-700); box-shadow: var(--vx-shadow); }
.seleccion { color: var(--vx-amber); }