/* ============================================================
   dark-fix.css — Adaptación de modo oscuro para estilos inline
   ============================================================
   El chrome (.card, .box, .form-control) ya usa tokens y se
   adapta solo. El problema son los colores HEX HARDCODEADOS en
   atributos style="" de ~50 vistas (paneles #f9f9f9, textos
   #777/#999, bordes #e0e0e0, etc.): los estilos inline SIN
   !important SÍ pueden sobrescribirse desde CSS con !important.

   Aquí remapeamos esos neutros a los tokens del tema cuando
   data-theme="dark". NO se tocan los colores semánticos
   (#3c8dbc, #00a65a, #dd4b39, color:#fff sobre botones, etc.).
   Solo se cargan reglas bajo el selector de tema oscuro, así el
   modo claro queda 100% intacto.
   ============================================================ */

/* ---------- Fondos neutros → superficie ---------- */
:root[data-theme="dark"] [style*="background:#fff"],
:root[data-theme="dark"] [style*="background: #fff"],
:root[data-theme="dark"] [style*="background:#ffffff"],
:root[data-theme="dark"] [style*="background: #ffffff"],
:root[data-theme="dark"] [style*="background:white"],
:root[data-theme="dark"] [style*="background: white"],
:root[data-theme="dark"] [style*="background-color:#fff"],
:root[data-theme="dark"] [style*="background-color: #fff"],
:root[data-theme="dark"] [style*="background-color:#ffffff"],
:root[data-theme="dark"] [style*="background-color:white"] {
  background-color: var(--bg-surface) !important;
}

:root[data-theme="dark"] [style*="background:#f9f9f9"],
:root[data-theme="dark"] [style*="background: #f9f9f9"],
:root[data-theme="dark"] [style*="background:#f5f5f5"],
:root[data-theme="dark"] [style*="background: #f5f5f5"],
:root[data-theme="dark"] [style*="background:#fafafa"],
:root[data-theme="dark"] [style*="background: #fafafa"],
:root[data-theme="dark"] [style*="background:#f8f9fa"],
:root[data-theme="dark"] [style*="background: #f8f9fa"],
:root[data-theme="dark"] [style*="background:#f7f7f7"],
:root[data-theme="dark"] [style*="background:#fbfbfb"],
:root[data-theme="dark"] [style*="background:#fcfcfc"],
:root[data-theme="dark"] [style*="background-color:#f9f9f9"],
:root[data-theme="dark"] [style*="background-color:#f5f5f5"] {
  background-color: var(--bg-subtle) !important;
}

:root[data-theme="dark"] [style*="background:#eee"],
:root[data-theme="dark"] [style*="background: #eee"],
:root[data-theme="dark"] [style*="background:#eeeeee"],
:root[data-theme="dark"] [style*="background:#e3e3e3"],
:root[data-theme="dark"] [style*="background:#ededed"],
:root[data-theme="dark"] [style*="background:#f0f0f0"],
:root[data-theme="dark"] [style*="background:#e9ecef"],
:root[data-theme="dark"] [style*="background:#e0e0e0"],
:root[data-theme="dark"] [style*="background: #e0e0e0"],
:root[data-theme="dark"] [style*="background:#e5e5e5"],
:root[data-theme="dark"] [style*="background-color:#eee"],
:root[data-theme="dark"] [style*="background-color:#e3e3e3"] {
  background-color: var(--bg-sunken) !important;
}

/* ---------- Texto neutro → tokens fg ----------
   Solo property "color:" para no afectar fondos. Nunca tocamos
   color:#fff (texto blanco sobre botones/badges de color). */
:root[data-theme="dark"] [style*="color:#333"],
:root[data-theme="dark"] [style*="color: #333"],
:root[data-theme="dark"] [style*="color:#000"],
:root[data-theme="dark"] [style*="color: #000"],
:root[data-theme="dark"] [style*="color:#222"],
:root[data-theme="dark"] [style*="color:#212529"],
:root[data-theme="dark"] [style*="color:#2c3e50"],
:root[data-theme="dark"] [style*="color:#1f2937"],
:root[data-theme="dark"] [style*="color:#374151"],
:root[data-theme="dark"] [style*="color:#111"] {
  color: var(--fg-1) !important;
}

:root[data-theme="dark"] [style*="color:#444"],
:root[data-theme="dark"] [style*="color: #444"],
:root[data-theme="dark"] [style*="color:#555"],
:root[data-theme="dark"] [style*="color: #555"],
:root[data-theme="dark"] [style*="color:#666"],
:root[data-theme="dark"] [style*="color: #666"],
:root[data-theme="dark"] [style*="color:#6b7280"],
:root[data-theme="dark"] [style*="color:#4b5563"],
:root[data-theme="dark"] [style*="color:#7a8698"] {
  color: var(--fg-2) !important;
}

:root[data-theme="dark"] [style*="color:#777"],
:root[data-theme="dark"] [style*="color: #777"],
:root[data-theme="dark"] [style*="color:#888"],
:root[data-theme="dark"] [style*="color: #888"],
:root[data-theme="dark"] [style*="color:#999"],
:root[data-theme="dark"] [style*="color: #999"],
:root[data-theme="dark"] [style*="color:#aaa"],
:root[data-theme="dark"] [style*="color:#9ca3af"],
:root[data-theme="dark"] [style*="color:#6b6e7a"],
:root[data-theme="dark"] [style*="color:#95a5a6"] {
  color: var(--fg-3) !important;
}

/* ---------- Bordes claros → token border ----------
   Fijar border-color es inocuo aunque el elemento no tenga borde. */
:root[data-theme="dark"] [style*="#e0e0e0"],
:root[data-theme="dark"] [style*="#e5e5e5"],
:root[data-theme="dark"] [style*="#e1e1e1"],
:root[data-theme="dark"] [style*="#ebebeb"],
:root[data-theme="dark"] [style*="#ececec"],
:root[data-theme="dark"] [style*="#dddddd"],
:root[data-theme="dark"] [style*="#ddd;"],
:root[data-theme="dark"] [style*="#ddd "],
:root[data-theme="dark"] [style*="solid #ddd"],
:root[data-theme="dark"] [style*="#cccccc"],
:root[data-theme="dark"] [style*="solid #ccc"],
:root[data-theme="dark"] [style*="#d9d6cc"] {
  border-color: var(--border) !important;
}

/* ---------- Componentes Bootstrap/AdminLTE no tokenizados ---------- */
:root[data-theme="dark"] .table,
:root[data-theme="dark"] .table > tbody > tr > td,
:root[data-theme="dark"] .table > tbody > tr > th,
:root[data-theme="dark"] .table > thead > tr > th,
:root[data-theme="dark"] .table > tfoot > tr > td,
:root[data-theme="dark"] .table-bordered,
:root[data-theme="dark"] .table-bordered > tbody > tr > td,
:root[data-theme="dark"] .table-bordered > thead > tr > th {
  background-color: var(--bg-surface) !important;
  color: var(--fg-1) !important;
  border-color: var(--border) !important;
}
:root[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd),
:root[data-theme="dark"] .table-hover > tbody > tr:hover {
  background-color: var(--bg-subtle) !important;
}
:root[data-theme="dark"] .table > thead > tr > th {
  background-color: var(--bg-subtle) !important;
}

/* Inputs sin clase .form-control dentro de la APP (no en el login:
   el login tiene su propio diseño con .auth-shell/.auth-input y se
   deja tal cual). Por eso se acota a contenedores de la app. */
:root[data-theme="dark"] .page input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
:root[data-theme="dark"] .page select,
:root[data-theme="dark"] .page textarea,
:root[data-theme="dark"] .card input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
:root[data-theme="dark"] .card select,
:root[data-theme="dark"] .card textarea,
:root[data-theme="dark"] .box input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
:root[data-theme="dark"] .box select,
:root[data-theme="dark"] .box textarea,
:root[data-theme="dark"] .modal-content input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
:root[data-theme="dark"] .modal-content select,
:root[data-theme="dark"] .modal-content textarea {
  background-color: var(--bg-surface) !important;
  color: var(--fg-1) !important;
  border-color: var(--border) !important;
}
:root[data-theme="dark"] .page input::placeholder,
:root[data-theme="dark"] .card input::placeholder,
:root[data-theme="dark"] .box input::placeholder,
:root[data-theme="dark"] .modal-content input::placeholder,
:root[data-theme="dark"] .page textarea::placeholder,
:root[data-theme="dark"] .card textarea::placeholder { color: var(--fg-4) !important; }

:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .modal-body,
:root[data-theme="dark"] .modal-footer,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .panel-body,
:root[data-theme="dark"] .well {
  background-color: var(--bg-surface) !important;
  color: var(--fg-1) !important;
  border-color: var(--border) !important;
}
:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .modal-footer { background-color: var(--bg-subtle) !important; }
:root[data-theme="dark"] .panel-heading { background-color: var(--bg-subtle) !important; color: var(--fg-1) !important; }
:root[data-theme="dark"] .modal-title { color: var(--fg-1) !important; }
:root[data-theme="dark"] .close { color: var(--fg-2) !important; opacity: .8; }

/* ====================== SweetAlert2 — skin oscuro ======================
   Skin deliberado y completo (no remapeo genérico) para que los
   modales swal se vean nítidos en tema oscuro. Se respetan los
   colores de los iconos (éxito/error/aviso) y los botones de acción
   propios de swal2; solo se oscurecen superficie, texto e inputs. */
:root[data-theme="dark"] .swal2-container.swal2-backdrop-show,
:root[data-theme="dark"] .swal2-container.swal2-shown {
  background: rgba(0,0,0,.62) !important;
}
:root[data-theme="dark"] .swal2-popup {
  background: var(--bg-surface) !important;
  color: var(--fg-1) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.55) !important;
}
:root[data-theme="dark"] .swal2-title { color: var(--fg-1) !important; }
:root[data-theme="dark"] .swal2-html-container,
:root[data-theme="dark"] .swal2-content,
:root[data-theme="dark"] .swal2-popup .swal2-html-container * {
  color: var(--fg-2) !important;
}
:root[data-theme="dark"] .swal2-popup .swal2-html-container a { color: var(--accent, #3c8dbc) !important; }
:root[data-theme="dark"] .swal2-input,
:root[data-theme="dark"] .swal2-textarea,
:root[data-theme="dark"] .swal2-file,
:root[data-theme="dark"] .swal2-select {
  background: var(--bg-subtle) !important;
  color: var(--fg-1) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}
:root[data-theme="dark"] .swal2-input::placeholder,
:root[data-theme="dark"] .swal2-textarea::placeholder { color: var(--fg-4) !important; }
:root[data-theme="dark"] .swal2-input:focus,
:root[data-theme="dark"] .swal2-textarea:focus,
:root[data-theme="dark"] .swal2-select:focus {
  border-color: var(--border-strong) !important;
  box-shadow: 0 0 0 2px rgba(60,141,188,.35) !important;
}
:root[data-theme="dark"] .swal2-footer {
  color: var(--fg-3) !important;
  border-top: 1px solid var(--border) !important;
}
:root[data-theme="dark"] .swal2-close { color: var(--fg-3) !important; }
:root[data-theme="dark"] .swal2-close:hover { color: var(--fg-1) !important; }
:root[data-theme="dark"] .swal2-validation-message {
  background: var(--bg-sunken) !important;
  color: var(--fg-2) !important;
}
:root[data-theme="dark"] .swal2-timer-progress-bar { background: var(--border-strong) !important; }
:root[data-theme="dark"] .swal2-loader { border-color: var(--accent,#3c8dbc) transparent var(--accent,#3c8dbc) transparent !important; }
/* No tocar botones de acción ni iconos: swal2 ya los pinta con color
   sólido (verde/rojo/azul) que contrasta bien sobre el fondo oscuro.
   Solo aseguramos el texto del botón cancelar por defecto. */
:root[data-theme="dark"] .swal2-styled.swal2-cancel {
  background: var(--bg-sunken) !important;
  color: var(--fg-1) !important;
}

/* SweetAlert v1 (legacy, por si alguna vista aún lo usa) */
:root[data-theme="dark"] .sweet-alert {
  background: var(--bg-surface) !important;
  color: var(--fg-1) !important;
}
:root[data-theme="dark"] .sweet-alert h2 { color: var(--fg-1) !important; }
:root[data-theme="dark"] .sweet-alert p  { color: var(--fg-2) !important; }
:root[data-theme="dark"] .sweet-alert input {
  background: var(--bg-subtle) !important;
  color: var(--fg-1) !important;
  border: 1px solid var(--border) !important;
}

/* Cajas de "ayuda/nota" claras frecuentes (instrucciones) */
:root[data-theme="dark"] .help-block,
:root[data-theme="dark"] .text-muted { color: var(--fg-3) !important; }

/* Hover de filas/acciones que usan grises claros */
:root[data-theme="dark"] [style*="background:#f3f2ef"],
:root[data-theme="dark"] [style*="background:#f4f4f4"] {
  background-color: var(--bg-hover) !important;
}

/* ============ Pago mixto / desglose de efectivo (tema oscuro) ============
   Componente compartido (Crear Venta, Cuentas por Cobrar, Cuentas por
   Pagar). mixed-payment.css usa colores claros hardcodeados en sus
   clases; aquí se remapean a los tokens del tema. */
:root[data-theme="dark"] .mixed-pay-panel {
  background: var(--bg-surface) !important;
  border-color: #6366f1 !important;
}
:root[data-theme="dark"] .mixed-pay-header { border-bottom-color: var(--border) !important; }
:root[data-theme="dark"] .mixed-pay-header strong { color: #818cf8 !important; }
:root[data-theme="dark"] .mixed-pay-row {
  background: var(--bg-subtle) !important;
  border-color: var(--border) !important;
}
:root[data-theme="dark"] .mixed-pay-row label { color: var(--fg-3) !important; }
:root[data-theme="dark"] .mixed-pay-row select,
:root[data-theme="dark"] .mixed-pay-row input {
  background: var(--bg-surface) !important;
  color: var(--fg-1) !important;
  border-color: var(--border) !important;
}
:root[data-theme="dark"] .mixed-pay-row select option { background: var(--bg-surface) !important; color: var(--fg-1) !important; }
:root[data-theme="dark"] .mixed-pay-row input::placeholder { color: var(--fg-4) !important; }
:root[data-theme="dark"] .mixed-pay-row__remove {
  background: var(--bg-sunken) !important;
  color: #f87171 !important;
  border-color: var(--border-strong) !important;
}
:root[data-theme="dark"] .mixed-pay-row__remove:hover { background: rgba(248,113,113,.16) !important; }
:root[data-theme="dark"] .mixed-pay-summary {
  background: var(--bg-sunken) !important;
  border-top-color: var(--border) !important;
}
:root[data-theme="dark"] .mixed-pay-summary__row span { color: var(--fg-3) !important; }
:root[data-theme="dark"] .mixed-pay-summary__row strong { color: var(--fg-1) !important; }
:root[data-theme="dark"] .mixed-pay-summary__diff { border-top-color: var(--border) !important; }
:root[data-theme="dark"] .mixed-pay-summary__diff--ok      { color: #34d399 !important; }
:root[data-theme="dark"] .mixed-pay-summary__diff--missing { color: #fbbf24 !important; }
:root[data-theme="dark"] .mixed-pay-summary__diff--over    { color: #f87171 !important; }

/* Desglose de efectivo (denominaciones) */
:root[data-theme="dark"] .cash-breakdown {
  background: var(--bg-subtle) !important;
  border-color: var(--border) !important;
}
:root[data-theme="dark"] .cash-breakdown__title { color: var(--fg-1) !important; }
:root[data-theme="dark"] .cash-breakdown__group h5 { color: var(--fg-3) !important; }
:root[data-theme="dark"] .cash-breakdown__item {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
}
:root[data-theme="dark"] .cash-breakdown__item label { color: var(--fg-2) !important; }
:root[data-theme="dark"] .cash-breakdown__item input {
  background: var(--bg-surface) !important;
  color: var(--fg-1) !important;
  border-color: var(--border) !important;
}
:root[data-theme="dark"] .cash-breakdown__total { background: var(--bg-sunken) !important; color: var(--fg-1) !important; }
:root[data-theme="dark"] .cash-breakdown__total--ok      { background: rgba(16,185,129,.18) !important; color: #34d399 !important; }
:root[data-theme="dark"] .cash-breakdown__total--missing { background: rgba(245,158,11,.18) !important; color: #fbbf24 !important; }
:root[data-theme="dark"] .cash-breakdown__total--over    { background: rgba(59,130,246,.20) !important; color: #93c5fd !important; }

/* ============ Tintes claros adicionales + alertas suaves (oscuro) ============
   Cajas tipo "Cambio de plan" (#f9fafb) y alertas pastel
   (#fee2e2 danger, #fef3c7 warning, #e8f5e9 success) usadas en
   modales (Mejorar plan, etc.). En oscuro se ven lavadas/ilegibles:
   se remapean a fondos translúcidos con texto legible. Estas
   reglas van al final para ganar sobre los remapeos neutros. */
:root[data-theme="dark"] [style*="background:#f9fafb"],
:root[data-theme="dark"] [style*="background: #f9fafb"],
:root[data-theme="dark"] [style*="background:#fafbfc"],
:root[data-theme="dark"] [style*="background:#f3f4f6"],
:root[data-theme="dark"] [style*="background:#f4f6f8"],
:root[data-theme="dark"] [style*="background:#eef2ff"] {
  background-color: var(--bg-subtle) !important;
}

/* Danger / error suave (#fee2e2, #fef2f2, #fde8e8) */
:root[data-theme="dark"] [style*="background:#fee2e2"],
:root[data-theme="dark"] [style*="background: #fee2e2"],
:root[data-theme="dark"] [style*="background:#fef2f2"],
:root[data-theme="dark"] [style*="background:#fde8e8"] {
  background-color: rgba(239,68,68,.16) !important;
  border-color: rgba(239,68,68,.45) !important;
}
:root[data-theme="dark"] [style*="color:#991b1b"],
:root[data-theme="dark"] [style*="color:#b91c1c"],
:root[data-theme="dark"] [style*="color:#c62828"],
:root[data-theme="dark"] [style*="color:#dc2626"],
:root[data-theme="dark"] [style*="color:#dd4b39"] { color: #fca5a5 !important; }

/* Warning / aviso suave (#fef3c7, #fffbeb, #fff3cd, #fef9e7) */
:root[data-theme="dark"] [style*="background:#fef3c7"],
:root[data-theme="dark"] [style*="background: #fef3c7"],
:root[data-theme="dark"] [style*="background:#fffbeb"],
:root[data-theme="dark"] [style*="background:#fff3cd"],
:root[data-theme="dark"] [style*="background:#fef9e7"],
:root[data-theme="dark"] [style*="background:#fff8e1"] {
  background-color: rgba(245,158,11,.15) !important;
  border-color: rgba(245,158,11,.45) !important;
}
:root[data-theme="dark"] [style*="color:#92400e"],
:root[data-theme="dark"] [style*="color:#78350f"],
:root[data-theme="dark"] [style*="color:#b45309"],
:root[data-theme="dark"] [style*="color:#856404"] { color: #fcd34d !important; }

/* Success / éxito suave (#e8f5e9, #d1fae5, #dcfce7, #f0fdf4) */
:root[data-theme="dark"] [style*="background:#e8f5e9"],
:root[data-theme="dark"] [style*="background: #e8f5e9"],
:root[data-theme="dark"] [style*="background:#d1fae5"],
:root[data-theme="dark"] [style*="background:#dcfce7"],
:root[data-theme="dark"] [style*="background:#f0fdf4"],
:root[data-theme="dark"] [style*="background:#e6f4ea"] {
  background-color: rgba(16,185,129,.16) !important;
  border-color: rgba(16,185,129,.45) !important;
}
:root[data-theme="dark"] [style*="color:#065f46"],
:root[data-theme="dark"] [style*="color:#166534"],
:root[data-theme="dark"] [style*="color:#2e7d32"],
:root[data-theme="dark"] [style*="color:#1b5e20"] { color: #6ee7b7 !important; }

/* Info suave (#dbeafe, #e0f2fe, #eff6ff) */
:root[data-theme="dark"] [style*="background:#dbeafe"],
:root[data-theme="dark"] [style*="background:#e0f2fe"],
:root[data-theme="dark"] [style*="background:#eff6ff"] {
  background-color: rgba(59,130,246,.18) !important;
  border-color: rgba(59,130,246,.45) !important;
}
:root[data-theme="dark"] [style*="color:#1e3a8a"],
:root[data-theme="dark"] [style*="color:#1e40af"],
:root[data-theme="dark"] [style*="color:#1d4ed8"] { color: #93c5fd !important; }