/* OnnixConnect v2 — Cards, Alerts, Tables (DataTables), Badges
   Scoped under .onnix-v2. No markup changes required. */

/* ==========================================================================
   Cards
   ========================================================================== */
.onnix-v2 .card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color) !important;
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}

/* Headers “planos” / sólidos legacy (CoreUI bg-dark text-white).
   NO pisar los tintados con bg-*-opacity-* (form producto, categorías UDN,
   subproductos, etc.): ahí Bootstrap pinta un fondo semitransparente + borde
   de color; forzar --bg-surface los dejaba todos iguales y sin jerarquía. */
.onnix-v2 .card-header:not([class*="bg-opacity"]) {
  background: var(--bg-surface) !important;
  border-bottom: 1px solid var(--border-color);
  font-weight: 700;
  color: var(--text-heading) !important;
  border-radius: 12px 12px 0 0 !important;
}
.onnix-v2 .card-header.bg-dark:not([class*="bg-opacity"]),
.onnix-v2 .card-header.bg-primary:not([class*="bg-opacity"]),
.onnix-v2 .card-header.bg-secondary:not([class*="bg-opacity"]) {
  background: var(--bg-surface) !important;
  color: var(--text-heading) !important;
}
/* Vistas viejas (CoreUI) traían "card-header bg-dark text-white": el bg-dark ya
   se pisa arriba, pero el texto blanco también viene con !important de Bootstrap. */
.onnix-v2 .card-header.text-white:not([class*="bg-opacity"]),
.onnix-v2 .card-header:not([class*="bg-opacity"]) .text-white {
  color: var(--text-heading) !important;
}
/* Secciones tintadas: solo tipografía/radio; fondo y color los da Bootstrap */
.onnix-v2 .card-header[class*="bg-opacity"] {
  border-bottom: 1px solid var(--border-color);
  font-weight: 700;
  border-radius: 12px 12px 0 0 !important;
}

.onnix-v2 .card-body {
  color: var(--text-body);
}

.onnix-v2 .card-footer {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-color) !important;
  color: var(--text-body);
}

/* ==========================================================================
   .panel / .panel-default (Bootstrap 2/3, ~11 vistas de tesoreria/cobro,
   cuotas, orden-pago, obligaciones tributarias) — nunca tuvo cobertura
   onnix-v2 (solo .card la tiene), quedaba con el fondo blanco/borde gris
   claro por defecto del navegador dentro de popups ya oscuros.
   ========================================================================== */
.onnix-v2 .panel.panel-default {
  background: var(--bg-surface);
  border: 1px solid var(--border-color) !important;
  border-radius: 8px;
  color: var(--text-body);
}
.onnix-v2 .panel-heading {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-color);
  color: var(--text-heading);
  border-radius: 8px 8px 0 0;
  padding: .75rem 1rem;
}
.onnix-v2 .panel-body {
  padding: 1rem;
  color: var(--text-body);
}

/* List-group / dropdowns / tabs — mismo contraste de borde que cards */
.onnix-v2 .list-group-item {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color) !important;
  color: var(--text-body);
}
.onnix-v2 .list-group-item:hover,
.onnix-v2 .list-group-item.active {
  background-color: var(--bg-elevated);
  color: var(--text-heading);
  border-color: var(--border-color) !important;
}

.onnix-v2 .dropdown-menu {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color) !important;
  color: var(--text-body);
}

.onnix-v2 .nav-tabs {
  border-bottom: 1px solid var(--border-color) !important;
}
.onnix-v2 .nav-tabs .nav-link:not(.active) {
  border-color: transparent;
  color: var(--text-muted);
}

.onnix-v2 .accordion-item {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color) !important;
  color: var(--text-body);
}
.onnix-v2 .accordion-button {
  background-color: var(--bg-elevated);
  color: var(--text-heading);
  border-color: var(--border-color);
}
.onnix-v2 .accordion-button:not(.collapsed) {
  background-color: var(--bg-elevated);
  color: var(--text-heading);
  box-shadow: inset 0 calc(-1 * 1px) 0 var(--border-color);
}
.onnix-v2 .accordion-body {
  background-color: var(--bg-surface);
  color: var(--text-body);
  border-top: 1px solid var(--border-color);
}

/* ==========================================================================
   Alerts
   ========================================================================== */
.onnix-v2 .alert-success {
  background: rgba(22, 163, 74, 0.10);
  border: 1px solid rgba(22, 163, 74, 0.3);
  color: var(--success);
  border-radius: 10px;
}

.onnix-v2 .alert-danger {
  background: rgba(220, 38, 38, 0.10);
  border: 1px solid rgba(220, 38, 38, 0.3);
  color: var(--danger);
  border-radius: 10px;
}

.onnix-v2 .alert-warning {
  background: color-mix(in srgb, var(--warning) 16%, var(--bg-elevated));
  border: 1px solid color-mix(in srgb, var(--warning) 35%, var(--border-color));
  color: var(--warning-text);
  border-radius: 10px;
}

.onnix-v2 .alert-info {
  background: color-mix(in srgb, var(--primary) 16%, var(--bg-elevated));
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border-color));
  color: var(--primary);
  border-radius: 10px;
}

html.dark .onnix-v2 .alert-light,
.onnix-v2 .alert-light {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color) !important;
  color: var(--text-body);
  border-radius: 10px;
}

/* .alert-secondary / .alert-dark: Sneat core.css los deja HARDCODEADOS en claro
   (#ebeef0 / #8592a3). Presupuesto (y remisión/ventas) los usan como “cards” de
   sección (cliente, detalle, CKEditor, etc.) → en html.dark quedan islas claras.
   theme-toggle no carga core-dark.css, así que se pisan con tokens. */
.onnix-v2 .alert-secondary,
.onnix-v2 .alert-dark {
  background: var(--bg-elevated);
  /* !important: Sneat fija border-color claro; token debe contrastar vs bg */
  border: 1px solid var(--border-color) !important;
  color: var(--text-body);
  border-radius: 10px;
}

/* Títulos y separadores dentro de alert-as-card (presupuesto base/detalle).
   Sneat pinta .alert-secondary hr con #8592a3 !important. */
.onnix-v2 .alert .alert-heading {
  color: var(--text-heading);
}
.onnix-v2 .alert hr {
  border: 0;
  border-top: 1px solid var(--border-color);
  background-color: var(--border-color) !important;
  opacity: 1;
  color: inherit;
}

/* ==========================================================================
   Tables (standard + DataTables)
   ========================================================================== */
/* Bug real: Sneat carga SIEMPRE public/sneat/vendor/css/rtl/core.css (el
   "template-customizer-core-css"), que trae --bs-table-striped-bg: #f9fafb
   (casi blanco) HARDCODEADO — el swap a la variante core-dark.css es un
   mecanismo propio de Sneat (template-customizer.js) que theme-toggle.js de
   onnix-v2 no dispara (solo pone data-bs-theme/clase .dark). Resultado: en
   modo oscuro el texto de las filas queda claro (--text-body) pero el fondo
   de las filas pares/impares sigue siendo el claro de Sneat -> texto
   invisible (ver Screenshot_46, filas "en blanco" del panel Superadmin).
   Se pisan acá las custom properties que Bootstrap usa para pintar
   .table-striped/.table-hover/.table-active, en vez de perseguir cada regla
   de core.css con !important. */
.onnix-v2 .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-body);
  --bs-table-border-color: var(--border-color);
  --bs-table-striped-bg: var(--bg-elevated);
  --bs-table-striped-color: var(--text-body);
  --bs-table-hover-bg: var(--primary-tint);
  --bs-table-hover-color: var(--text-body);
  --bs-table-active-bg: var(--primary-tint);
  --bs-table-active-color: var(--text-body);
  border-color: var(--border-color);
}

.onnix-v2 .table-bordered,
.onnix-v2 .table-bordered > :not(caption) > *,
.onnix-v2 .table-bordered > :not(caption) > * > * {
  border-color: var(--border-color) !important;
}

/* Bug real (visto en el buscador de productos, popup con layouts.ventanas):
   public/material/css/jquery.dataTables.min.css trae
   "table.dataTable tbody tr{background-color:#ffffff}" HARDCODEADO, sin
   requerir .stripe/.display. Esa regla no pasa por --bs-table-* (eso solo lo
   usan .table-striped/.table-hover de Bootstrap), así que la fila quedaba
   blanca con texto claro (var(--text-body) en modo oscuro) encima -> texto
   prácticamente invisible. Se pisa acá con más especificidad. */
.onnix-v2 table.dataTable tbody tr {
  background-color: transparent !important;
}

/* .table-light / .table-dark: variantes FIJAS de Bootstrap (no responden a
   data-bs-theme, es su comportamiento documentado — sirven para forzar
   contraste puntual, no para temizar toda la tabla). Se usan sueltas como
   "cabecera gris" en ~13 vistas (onnixconnect, importador, reportes, etc.)
   asumiendo que el resto de la tabla también es clara. En modo oscuro eso
   deja una cabecera blanca pegada encima de un body oscuro — choque directo.
   Se pisan acá para que se integren con el resto de la tabla oscura. */
.onnix-v2 table.table-light > thead,
.onnix-v2 thead.table-light,
.onnix-v2 tfoot.table-light {
  --bs-table-bg: var(--bg-elevated);
  --bs-table-color: var(--text-body);
  background-color: var(--bg-elevated) !important;
  color: var(--text-body) !important;
  border-color: var(--border-color) !important;
}

/* CoreUI / Argon: thead.thead-light (grilla de productos del presupuesto).
   No es .table-light de Bootstrap 5 — fondo #f0f3f5 fijo en material/coreui. */
.onnix-v2 thead.thead-light,
.onnix-v2 .thead-light > tr > th,
.onnix-v2 table .thead-light th {
  background-color: var(--bg-elevated) !important;
  color: var(--text-muted) !important;
  border-color: var(--border-color) !important;
}
.onnix-v2 .table tfoot th,
.onnix-v2 .table tfoot td {
  background-color: var(--bg-elevated);
  color: var(--text-heading);
  border-color: var(--border-color) !important;
}
/* Título casero de fragmentos CRUD en #customModal / cualquier .modal
   (personas partials contacto/direcciones/documentos/vínculos/referencias,
   países, etc.): <div class="text-center my-3 border-bottom"> en vez de
   .modal-header real. Se normaliza sin tocar N blades. */
.onnix-v2 #customModal-dialog .text-center.my-3.border-bottom,
.onnix-v2 .modal .text-center.my-3.border-bottom {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-heading);
  border-color: var(--border-color) !important;
  padding-bottom: .75rem;
}

/* Segundo patrón: <div class="modal-header"><h3> anidado en modal-body
   (referencias/bancarias, talonarios, categorías/marcas, datosBase,
   suscripción, hosting). Border claro fijo de Bootstrap → tokens.
   EXCEPCIÓN: form producto (y similares) inyectan .modal-header.bg-success|
   warning|info DENTRO de #customModal .modal-body — no aplastar el color. */
.onnix-v2 #customModal-dialog .modal-body .modal-header:not(.bg-success):not(.bg-warning):not(.bg-info):not(.bg-primary):not(.bg-danger):not(.bg-secondary),
.onnix-v2 .modal .modal-body .modal-header:not(.bg-success):not(.bg-warning):not(.bg-info):not(.bg-primary):not(.bg-danger):not(.bg-secondary) {
  background: transparent;
  border-bottom: 1px solid var(--border-color);
  padding: .75rem 0 .5rem;
  margin-bottom: .5rem;
}
.onnix-v2 #customModal-dialog .modal-body .modal-header h3,
.onnix-v2 #customModal-dialog .modal-body .modal-header h4,
.onnix-v2 .modal .modal-body .modal-header h3,
.onnix-v2 .modal .modal-body .modal-header h4 {
  color: var(--text-heading);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
}
/* Cabecera coloreada anidada (prod-form en #customModal): padding propio,
   sin transparentizar el bg-* de Bootstrap. */
.onnix-v2 .modal .modal-body .modal-header.bg-success,
.onnix-v2 .modal .modal-body .modal-header.bg-warning,
.onnix-v2 .modal .modal-body .modal-header.bg-info,
.onnix-v2 .modal .modal-body .modal-header.bg-primary,
.onnix-v2 .modal .modal-body .modal-header.bg-danger,
.onnix-v2 .modal .modal-body .modal-header.bg-secondary {
  border-bottom: none;
  padding: .5rem 1rem;
  margin-bottom: 0;
}

.onnix-v2 table.table-dark > thead,
.onnix-v2 thead.table-dark,
.onnix-v2 tfoot.table-dark {
  --bs-table-bg: var(--bg-page);
  --bs-table-color: var(--text-heading);
  background-color: var(--bg-page) !important;
  color: var(--text-heading) !important;
  border-color: var(--border-color) !important;
}

.onnix-v2 table.dataTable thead th,
.onnix-v2 .table thead th {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border-color) !important;
  white-space: nowrap;
}

.onnix-v2 table.dataTable tbody td,
.onnix-v2 .table tbody td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border-color) !important;
  color: var(--text-body);
  font-size: 0.8125rem;
}

.onnix-v2 table.dataTable tbody tr:hover td {
  background: rgba(37, 99, 235, .04) !important;
}

/* Sub-fila de DataTables (tipo producto / desglose UdN bajo cada comprobante).
   Antes: background:#f8f9fb + color:#555 inline → ilegible en modo oscuro (Screenshot_47). */
.onnix-v2 table.dataTable tbody tr.sub-info-row td {
  background: var(--bg-elevated) !important;
  border-top: 0 !important;
  padding: 3px 16px 4px !important;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.onnix-v2 table.dataTable tbody tr.sub-info-row .sub-info-sep {
  color: var(--border-color);
}

.onnix-v2 table.dataTable tbody tr.sub-info-row .fw-semibold {
  color: var(--text-body);
}

/* ==========================================================================
   DataTables toolbar (filter, length, pagination)
   ========================================================================== */
.onnix-v2 .dataTables_wrapper .dataTables_filter input,
.onnix-v2 .dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--input-border) !important;
  border-radius: 8px;
  background: var(--bg-elevated);
  color: var(--text-body);
}

.onnix-v2 .dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 6px;
  color: var(--text-body) !important;
}

.onnix-v2 .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}

/* ==========================================================================
   Badges
   ========================================================================== */
.onnix-v2 .badge {
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.6875rem;
}

.onnix-v2 .badge-success {
  background: rgba(22, 163, 74, 0.10);
  color: var(--success);
}

.onnix-v2 .badge-danger {
  background: rgba(220, 38, 38, 0.10);
  color: var(--danger);
}

.onnix-v2 .badge-warning {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.onnix-v2 .badge-primary,
.onnix-v2 .badge-info {
  background: var(--primary-tint);
  color: var(--primary);
}

/* ==========================================================================
   Responsive table wrapper
   ========================================================================== */
.onnix-v2 .table-responsive,
.onnix-v2 .dataTables_wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   Small screens
   ========================================================================== */
@media (max-width: 480px) {
  .onnix-v2 .card {
    border-radius: 10px;
  }

  .onnix-v2 .card-body {
    padding: 1rem;
  }
}