/* aplica solo al header principal en tema claro */
[data-bs-theme="light"] #main-header {
  background-color: #3c8dbc !important;
  color: #fff;
}

[data-bs-theme="light"] #main-header .nav-link,
[data-bs-theme="light"] #main-header .navbar-brand {
  color: #fff !important;
}

/* texto "ContaWizard" en blanco solo en el primer header */
[data-bs-theme="light"] #main-header .navbar-brand-text {
  color: #fff !important;
}

/* ============================================================
   Tablas — encabezados con fondo del header (navy) + letras
   blancas, sticky en scroll, y respetando mayús/minús.
   Aplica global a todo .table dentro de la app.
   ============================================================ */
/* Specificity .card .table thead th > Tabler card-table override que
   pintaba el thead con el fondo del card-cap; sin esto el navy se
   perdía en tablas dentro de cards (.card-table). Lista amplia de
   selectores para cubrir todas las combinaciones table/card-table/
   tabla-dentro-de-card. */
.table thead th,
.table thead td,
.card .table thead th,
.card-table thead th,
.card .card-table thead th,
.table > thead > tr > th {
  /* Mismo navy del header para coherencia visual */
  background-color: #243c5e !important;
  color: #fff !important;
  /* Respetar mayús/minús del template (no forzar uppercase) */
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: 600;
  border-color: rgba(255, 255, 255, 0.08) !important;
  /* Sticky: se queda pegado arriba al hacer scroll */
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Dark mode: mantener el navy del thead en TODAS las tablas, también
   las que usan .card-table (Tabler tiene un override .card .card-table
   thead th que pintaba con el card-cap; lo cubrimos con descendientes
   sin `>` para empatar specificity). */
[data-bs-theme="dark"] .table thead th,
[data-bs-theme="dark"] .table thead td,
[data-bs-theme="dark"] .card .table thead th,
[data-bs-theme="dark"] .card-table thead th,
[data-bs-theme="dark"] .card .card-table thead th,
[data-bs-theme="dark"] .table > thead > tr > th {
  background-color: #243c5e !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Dark mode: card-header (el "Correos principales", "Marca del despacho",
   etc.) tenía el mismo color que el card-body, quedando todo el card
   como un bloque oscuro indiferenciado. Le damos un tono ligeramente
   más oscuro + border-bottom claro para que separe visualmente.
   Aplica también a las variantes (modal-header, page-header). */
[data-bs-theme="dark"] .card-header {
  background-color: rgba(0, 0, 0, 0.18) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
[data-bs-theme="dark"] .card-header .card-title {
  color: var(--tblr-body-color);
}
[data-bs-theme="dark"] .card-footer {
  background-color: rgba(0, 0, 0, 0.18) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
[data-bs-theme="dark"] .modal-header {
  background-color: rgba(0, 0, 0, 0.18) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
[data-bs-theme="dark"] .modal-footer {
  background-color: rgba(0, 0, 0, 0.18) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
/* Page-header (el bloque grande del título de la página, ej. "Validar
   CFDIs", "Empresas") — fuera de cards; suele tener bg propio en
   dark. Si Tabler ya lo maneja queda; si no, el body se ve plano. */
[data-bs-theme="dark"] .page-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* DataTables sort icons en blanco para que se vean sobre el navy */
.table > thead > tr > th.sorting,
.table > thead > tr > th.sorting_asc,
.table > thead > tr > th.sorting_desc {
  color: #fff !important;
}
[data-bs-theme="dark"] .table > thead > tr > th.sorting,
[data-bs-theme="dark"] .table > thead > tr > th.sorting_asc,
[data-bs-theme="dark"] .table > thead > tr > th.sorting_desc {
  color: var(--tblr-body-color) !important;
}

/* Quitar el border-bottom doble que Bootstrap pone entre thead/tbody:
   con thead oscuro se ve mal. */
.table > :not(:first-child) {
  border-top: none !important;
}

/* ============================================================
   Dark mode: fixes de fondos blancos heredados de Bootstrap.

   Los modales, alguna tabla generada por JS y ciertas utilidades
   (.bg-light) se quedan con --bs-body-bg blanco aunque el body
   tenga data-bs-theme="dark", por la cascada de Bootstrap. Aquí
   los redirigimos al surface de Tabler para que respeten el tema.
   ============================================================ */

/* Tablas: forzar las variables --bs-table-* a Tabler en dark.
   Esto cubre tanto las tablas en modales como las generadas
   inline por JS (que no leen los CSS scopeados de Tabler). */
[data-bs-theme="dark"] .table {
  --bs-table-bg: var(--tblr-bg-surface);
  --bs-table-color: var(--tblr-body-color);
  --bs-table-border-color: var(--tblr-border-color);
  --bs-table-striped-bg: var(--tblr-bg-surface-secondary);
  --bs-table-hover-bg: var(--tblr-bg-surface-secondary);
  color: var(--tblr-body-color);
}
[data-bs-theme="dark"] .table > tbody > tr > td,
[data-bs-theme="dark"] .table > tbody > tr > th {
  background-color: var(--tblr-bg-surface);
  color: var(--tblr-body-color);
  border-color: var(--tblr-border-color);
}
[data-bs-theme="dark"] .table-hover > tbody > tr:hover > td {
  background-color: var(--tblr-bg-surface-secondary);
}

/* Utilities de Bootstrap con fondo claro:
   .bg-light y .bg-white siempre apuntan a #f8f9fa / #fff aunque
   estés en dark; en dark queremos surface-secondary. */
[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .card.bg-light {
  background-color: var(--tblr-bg-surface-secondary) !important;
  color: var(--tblr-body-color) !important;
}
[data-bs-theme="dark"] .bg-white {
  background-color: var(--tblr-bg-surface) !important;
  color: var(--tblr-body-color) !important;
}

/* Modal: asegurar que el body del modal y form-controls dentro
   no muestren el blanco default de Bootstrap. */
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .modal-content .modal-body,
[data-bs-theme="dark"] .modal-content .modal-header,
[data-bs-theme="dark"] .modal-content .modal-footer {
  background-color: var(--tblr-bg-surface);
  color: var(--tblr-body-color);
}

/* Alertas, badges y otros bg-* claros que se ven mal en dark. */
[data-bs-theme="dark"] .alert-light {
  background-color: var(--tblr-bg-surface-secondary) !important;
  color: var(--tblr-body-color) !important;
  border-color: var(--tblr-border-color) !important;
}

/* SweetAlert: el popup hereda fondo blanco. helpers.js aplica
   .swal-corp via Swal.mixin; aquí cubrimos también los inputs,
   action buttons y el icono que vienen sin theme.
   En dark le ponemos un borde y sombra para que el popup no se
   funda con el backdrop oscuro. */
[data-bs-theme="dark"] .swal2-popup {
  background-color: var(--tblr-bg-surface) !important;
  color: var(--tblr-body-color) !important;
  border: 1px solid var(--tblr-border-color) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7),
              0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}
/* Timer bar (toasts y modales con timer): en dark casi no se veía.
   La pintamos en primary (Tabler #066fd1) para que destaque. */
.swal2-timer-progress-bar {
  background: var(--tblr-primary, #066fd1) !important;
  height: 3px !important;
}
[data-bs-theme="dark"] .swal2-timer-progress-bar {
  background: var(--tblr-primary, #066fd1) !important;
}
[data-bs-theme="dark"] .swal2-title,
[data-bs-theme="dark"] .swal2-html-container,
[data-bs-theme="dark"] .swal2-content {
  color: var(--tblr-body-color) !important;
}
[data-bs-theme="dark"] .swal2-input,
[data-bs-theme="dark"] .swal2-textarea,
[data-bs-theme="dark"] .swal2-select {
  background-color: var(--tblr-bg-surface-secondary) !important;
  color: var(--tblr-body-color) !important;
  border-color: var(--tblr-border-color) !important;
}
[data-bs-theme="dark"] .swal2-validation-message {
  background-color: var(--tblr-bg-surface-secondary) !important;
  color: var(--tblr-body-color) !important;
}
[data-bs-theme="dark"] .swal2-footer {
  border-top-color: var(--tblr-border-color) !important;
  color: var(--tblr-body-color) !important;
}
/* El backdrop del Swal queda como está (oscuro semi-transparente). */

/* ============================================================
   SweetAlert: estandarizar botón Cancelar al patrón del sistema
   (borde rojo outline, al hover se rellena). Esto sobrescribe el
   cancelButtonColor heredado del mixin para que TODOS los swal
   tengan el mismo estilo que los botones de Cancelar del resto
   de la app, sin tener que tocar 47 call sites.
   ============================================================ */
.swal2-cancel.swal2-styled,
.swal2-cancel {
  background-color: transparent !important;
  background-image: none !important;
  color: #DC2626 !important;
  border: 1px solid #DC2626 !important;
  box-shadow: none !important;
  transition: background-color .15s ease, color .15s ease !important;
}
.swal2-cancel.swal2-styled:hover,
.swal2-cancel:hover,
.swal2-cancel.swal2-styled:focus,
.swal2-cancel:focus {
  background-color: #DC2626 !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25) !important;
}

/* Confirm button: aire entre icono y texto, mismo padding que los
   demás botones primary del sistema (lo deja consistente cuando el
   call site usa confirmButtonText con <i> de Phosphor). */
.swal2-confirm.swal2-styled,
.swal2-cancel.swal2-styled,
.swal2-deny.swal2-styled {
  padding: .55em 1.1em !important;
  font-weight: 500 !important;
}
.swal2-confirm.swal2-styled i,
.swal2-cancel.swal2-styled i,
.swal2-deny.swal2-styled i {
  vertical-align: -1px;
}
/* Separación entre los dos botones de la fila de acciones. */
.swal2-actions {
  gap: .5rem !important;
}

/* ============================================================
   Dark mode: vista /cfdi/validar (carga_masiva.blade) tiene
   varios CSS con #fff hardcoded en sus controles personalizados.
   En lugar de tocar la blade, los redirigimos aquí.
   ============================================================ */
[data-bs-theme="dark"] .sel-empresa-wrapper #sel-empresa-input {
  background-color: var(--tblr-bg-surface) !important;
  color: var(--tblr-body-color);
  border-color: var(--tblr-border-color);
}
[data-bs-theme="dark"] #sel-empresa-dropdown {
  background-color: var(--tblr-bg-surface) !important;
  border-color: var(--tblr-border-color) !important;
  color: var(--tblr-body-color);
}
[data-bs-theme="dark"] .sel-empresa-item {
  color: var(--tblr-body-color);
}
[data-bs-theme="dark"] .sel-empresa-item:hover,
[data-bs-theme="dark"] .sel-empresa-item.active {
  background: var(--tblr-bg-surface-secondary);
  color: var(--tblr-primary);
}
[data-bs-theme="dark"] .cfdi-search input,
[data-bs-theme="dark"] .cfdi-pagesize {
  background: var(--tblr-bg-surface) !important;
  color: var(--tblr-body-color) !important;
  border-color: var(--tblr-border-color) !important;
}
/* Los .cfdi-filter conservan su CSS original (definido en
   carga_masiva.blade) en ambos temas — borde de color por categoría
   con fondo blanco, hover/active con fondo sólido del color. NO se
   les aplica override en dark para que no pierdan identidad. */

/* Tarjetas de "Total" y similares con bg claro hardcoded. */
[data-bs-theme="dark"] .cfdi-total-badge {
  background: var(--tblr-bg-surface-secondary);
  color: var(--tblr-body-color);
}

/* Botones outline custom (PDF, preview) — el fondo blanco hardcoded
   los hace destacar como manchas en dark mode. */
[data-bs-theme="dark"] .btn-cfdi-pdf,
[data-bs-theme="dark"] .btn-cfdi-preview {
  background: var(--tblr-bg-surface) !important;
}

/* Modal de resumen y sheets de preview del validador. */
[data-bs-theme="dark"] #modal-cfdi-resumen .modal-body,
[data-bs-theme="dark"] .cfdi-preview-dialog .modal-content,
[data-bs-theme="dark"] .cfdi-sheet,
[data-bs-theme="dark"] .rc-stat {
  background: var(--tblr-bg-surface) !important;
  color: var(--tblr-body-color);
}

/* RFC del emisor en la tabla de detalle del modal "Resumen de carga":
   el <code> heredaba color de Bootstrap/browser y se veia gris/diluido
   frente a las demas columnas. Forzamos el mismo color que el resto
   del td para que solo el font-family monospace lo diferencie. */
#modal-cfdi-resumen .rc-table code,
#modal-cfdi-resumen .rc-table tbody td code,
.rc-table code {
  color: var(--tblr-body-color) !important;
  background: transparent !important;
  padding: 0 !important;
  font-size: 12px !important;
}

/* "Motivo de exclusión" cards dentro de #modal-cfdi-resumen — el bg
   #fff y el border claro hardcoded los dejaba como manchas blancas
   en dark. */
[data-bs-theme="dark"] .rc-reason {
  background: var(--tblr-bg-surface-secondary) !important;
  border-color: var(--tblr-border-color) !important;
}
[data-bs-theme="dark"] .rc-reason:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}
[data-bs-theme="dark"] .rc-reason-title { color: var(--tblr-body-color); }
[data-bs-theme="dark"] .rc-reason-desc  { color: var(--tblr-secondary-color); }
[data-bs-theme="dark"] .rc-reason-count {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--tblr-body-color) !important;
}
[data-bs-theme="dark"] .rc-progress {
  background: rgba(255, 255, 255, 0.06) !important;
}