/* ============================================================
   CIAR | theme.css  v3 — DARK MODE PREMIUM
   Fondo slate azulado profundo · acentos dorado + esmeralda · glassmorphism
   ============================================================ */

/* ── Transición suave global ── */
*,
*::before,
*::after {
  transition:
    background-color 0.28s ease,
    border-color 0.28s ease,
    color 0.2s ease,
    box-shadow 0.25s ease;
}

/* ════════════════════════════════════════════════════════════
   PALETA DE VARIABLES — dark mode
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  /* Fondos */
  --dk-bg: #080d18;
  --dk-bg-2: #0c1222;
  --dk-bg-3: #101828;
  --dk-surface: #111c2e;
  --dk-surface-2: #162035;
  --dk-surface-3: #1a2840;
  --dk-glass: rgba(16, 24, 40, 0.7);

  /* Bordes */
  --dk-border: #1e3050;
  --dk-border-2: #253d60;
  --dk-border-3: #2d4a72;

  /* Texto */
  --dk-text: #e2e8f0;
  --dk-text-2: #94a3b8;
  --dk-text-3: #64748b;
  --dk-text-inv: #080d18;

  /* Acentos */
  --dk-gold: #f59e0b;
  --dk-gold-2: #fbbf24;
  --dk-gold-glow: rgba(245, 158, 11, 0.25);
  --dk-gold-soft: rgba(245, 158, 11, 0.08);

  --dk-blue: #38bdf8;
  --dk-blue-glow: rgba(56, 189, 248, 0.2);
  --dk-blue-soft: rgba(56, 189, 248, 0.07);

  --dk-green: #4ade80;
  --dk-green-glow: rgba(74, 222, 128, 0.2);
  --dk-green-soft: rgba(74, 222, 128, 0.07);

  --dk-red: #f87171;
  --dk-red-glow: rgba(248, 113, 113, 0.2);
  --dk-red-soft: rgba(248, 113, 113, 0.08);

  /* Sombras */
  --dk-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --dk-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --dk-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.65);
}

/* ════════════════════════════════════════════════════════════
   BASE
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"],
[data-theme="dark"] body {
  background-color: var(--dk-bg) !important;
  color: var(--dk-text) !important;
}

/* ── Tipografía global ── */
[data-theme="dark"] p,
[data-theme="dark"] span:not(.session-role):not(.session-badge),
[data-theme="dark"] label,
[data-theme="dark"] li,
[data-theme="dark"] small,
[data-theme="dark"] strong,
[data-theme="dark"] em,
[data-theme="dark"] b,
[data-theme="dark"] i,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: var(--dk-text) !important;
}

[data-theme="dark"] .text-muted,
[data-theme="dark"] .muted,
[data-theme="dark"] .mutedr,
[data-theme="dark"] .mutedl,
[data-theme="dark"] [class*="subtitle"],
[data-theme="dark"] [class*="text-muted"],
[data-theme="dark"] [class*="text-gray"],
[data-theme="dark"] [class*="text-light"] {
  color: var(--dk-text-2) !important;
}

/* Override de colores inline claros */
[data-theme="dark"] [style*="color:#062a56"],
[data-theme="dark"] [style*="color: #062a56"],
[data-theme="dark"] [style*="color:#1e293b"],
[data-theme="dark"] [style*="color:#334155"],
[data-theme="dark"] [style*="color:#475569"],
[data-theme="dark"] [style*="color:#0f172a"] {
  color: var(--dk-text) !important;
}

[data-theme="dark"] [style*="color:#64748b"],
[data-theme="dark"] [style*="color:#94a3b8"],
[data-theme="dark"] [style*="color:#9ca3af"],
[data-theme="dark"] [style*="color:#6b7280"] {
  color: var(--dk-text-3) !important;
}

/* ════════════════════════════════════════════════════════════
   SIDEBAR
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] #sidebar {
  background: var(--dk-bg-2) !important;
  border-right: 1px solid var(--dk-border) !important;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.4) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] #sidebar *:not(.session-role):not(.session-badge) {
  color: var(--dk-text) !important;
}

/* ════════════════════════════════════════════════════════════
   TOPBAR
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] .topbar {
  background: var(--dk-bg-2) !important;
  border-bottom: 1px solid var(--dk-border) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] .topbar * {
  color: var(--dk-text) !important;
}

/* ════════════════════════════════════════════════════════════
   CHIP USUARIO
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] .chip {
  background: var(--dk-surface-2) !important;
  color: var(--dk-text) !important;
  border: 1px solid var(--dk-border-2) !important;
}

/* ════════════════════════════════════════════════════════════
   BOTÓN TEMA
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] #themeBtn {
  background: var(--dk-surface) !important;
  border: 1px solid var(--dk-border-2) !important;
  color: var(--dk-gold) !important;
  box-shadow: 0 0 10px var(--dk-gold-glow) !important;
}
[data-theme="dark"] #themeBtn svg,
[data-theme="dark"] #themeBtn .icon-sun,
[data-theme="dark"] #themeBtn .icon-muun {
  color: var(--dk-gold) !important;
  fill: var(--dk-gold) !important;
  stroke: var(--dk-gold) !important;
}

/* ════════════════════════════════════════════════════════════
   CONTENIDO PRINCIPAL
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] main,
[data-theme="dark"] .main-content,
[data-theme="dark"] .content,
[data-theme="dark"] .page-content,
[data-theme="dark"] .paneld,
[data-theme="dark"] .grids {
  background-color: var(--dk-bg) !important;
  color: var(--dk-text) !important;
}

/* ════════════════════════════════════════════════════════════
   CARDS / PANELS
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] .card,
[data-theme="dark"] .panel,
[data-theme="dark"] .box,
[data-theme="dark"] .cards,
[data-theme="dark"] [class*="card"],
[data-theme="dark"] [class*="panel"] {
  background-color: var(--dk-surface) !important;
  border: 1px solid var(--dk-border) !important;
  box-shadow: var(--dk-shadow-sm) !important;
  color: var(--dk-text) !important;
}

/* ════════════════════════════════════════════════════════════
   KPI / STATS
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] .stat-card,
[data-theme="dark"] .metric-card,
[data-theme="dark"] .kpi-card {
  background: linear-gradient(
    135deg,
    var(--dk-surface) 0%,
    var(--dk-surface-2) 100%
  ) !important;
  border: 1px solid var(--dk-border-2) !important;
  box-shadow: var(--dk-shadow-sm) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] .card-icon {
  color: var(--dk-gold) !important;
  stroke: var(--dk-gold) !important;
  fill: none !important;
}
[data-theme="dark"] .kpi {
  color: var(--dk-text) !important;
}
[data-theme="dark"] .card .muted {
  color: var(--dk-text-2) !important;
}
/* =============================================
   BOTÓN EXPANDIR / CONTRAER SIDEBAR - Mejorado
   ============================================= */

[data-theme="dark"] #sidebarToggleBtn {
  width: 42px;
  height: 42px;
  background: var(--dk-surface-2);
  border: 1.5px solid var(--dk-border-2);
  border-radius: 12px;
  color: var(--dk-text);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

[data-theme="dark"] #sidebarToggleBtn:hover {
  background: var(--dk-surface-3);
  border-color: var(--dk-gold);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.25);
}

[data-theme="dark"] #sidebarToggleBtn:active {
  transform: scale(0.92);
  background: var(--dk-gold);
  color: var(--dk-text-inv);
}

/* Rotación del ícono según estado */
[data-theme="dark"] #sidebarToggleBtn svg {
  transition: transform 0.4s ease;
}

/* Cuando el sidebar está contraído (rotar 180°) */
[data-theme="dark"] .sidebar-collapsed #sidebarToggleBtn svg {
  transform: rotate(180deg);
}

/* ============================================================
   MODAL pedirNota() — DARK MODE ONLY
   Los estilos base (modo claro) están definidos en el JS.
   Aquí solo se sobreescriben cuando data-theme="dark".
   ============================================================ */

/* Fondo oscuro con blur */
[data-theme="dark"] .vn-nota-overlay {
  background: rgba(8, 13, 24, 0.88) !important;
  backdrop-filter: blur(12px);
}

/* Contenedor principal del dialog */
[data-theme="dark"] .vn-nota-dialog {
  background: var(--dk-surface) !important;
  color: var(--dk-text) !important;
  border: 1px solid var(--dk-border-2);
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.65) !important;
}

/* Header */
[data-theme="dark"] .vn-nota-header {
  background: var(--dk-surface-2) !important;
  border-bottom: 1px solid var(--dk-border);
}

/* Título del header */
[data-theme="dark"] .vn-nota-title {
  color: var(--dk-text) !important;
}

/* Botón cerrar X */
[data-theme="dark"] #vnNotaClose {
  color: var(--dk-text-2) !important;
}
[data-theme="dark"] #vnNotaClose:hover {
  color: var(--dk-red) !important;
}

/* Labels */
[data-theme="dark"] .vn-nota-label {
  color: var(--dk-text-2) !important;
}

/* Inputs */
[data-theme="dark"] .vn-nota-input {
  background: var(--dk-bg-3) !important;
  border: 1.5px solid var(--dk-border-2) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] .vn-nota-input::placeholder {
  color: var(--dk-text-3) !important;
}
[data-theme="dark"] .vn-nota-input:focus {
  border-color: var(--dk-gold) !important;
  box-shadow: 0 0 0 4px var(--dk-gold-glow) !important;
}

/* Ícono calendario */
[data-theme="dark"] .vn-cal-btn svg {
  stroke: var(--dk-gold) !important;
}

/* Footer */
[data-theme="dark"] .vn-nota-footer {
  background: var(--dk-surface-2) !important;
  border-top: 1px solid var(--dk-border);
}

/* Botón Confirmar */
[data-theme="dark"] .vn-btn-ok {
  background: linear-gradient(135deg, var(--dk-gold), #fbbf24) !important;
  color: var(--dk-text-inv) !important;
  border: none;
  box-shadow: 0 5px 15px var(--dk-gold-glow);
}
[data-theme="dark"] .vn-btn-ok:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--dk-gold-glow);
}

/* Botón Cancelar / Omitir */
[data-theme="dark"] .vn-btn-cancel {
  background: var(--dk-surface-3) !important;
  color: var(--dk-text-2) !important;
  border: 1.5px solid var(--dk-border-2);
}
[data-theme="dark"] .vn-btn-cancel:hover {
  background: var(--dk-red-soft) !important;
  color: var(--dk-red) !important;
  border-color: var(--dk-red);
}
/* =============================================
   LISTA DE CLIENTES - Modo Oscuro
   ============================================= */

[data-theme="dark"] #vnClienteList {
  background: var(--dk-surface) !important;
  border: 1px solid var(--dk-border-2) !important;
  border-radius: 10px;
  box-shadow: var(--dk-shadow-md) !important;
  max-height: 320px;
  overflow-y: auto;
}

[data-theme="dark"] .cliente-item {
  background: transparent !important;
  transition: background 0.2s ease;
  border-bottom: 1px solid var(--dk-border) !important;
}

[data-theme="dark"] .cliente-item:hover {
  background: var(--dk-text-inv) !important; /* ← Hover oscuro */
}

[data-theme="dark"] .cliente-nombre {
  color: var(--dk-text) !important;
  font-weight: 600;
}

[data-theme="dark"] .cliente-detalle {
  color: var(--dk-text-2) !important;
}

/* Fondo del contenedor cuando hay resultados */
[data-theme="dark"] #vnClienteList > div {
  background: var(--dk-surface) !important;
}
/* =============================================
   HOVER EN LISTA DE PRODUCTOS (Modo Oscuro)
   ============================================= */

[data-theme="dark"] .rowPick {
  transition: background-color 0.2s ease;
}

[data-theme="dark"] .rowPick:hover {
  background-color: var(--dk-text-inv) !important; /* Color oscuro elegante */
  border-color: var(--dk-border-2) !important;
}

[data-theme="dark"] .rowPick:active {
  background-color: var(--dk-text-2) !important;
}

/* Para los packs también */
[data-theme="dark"] .pack-header:hover {
  background-color: var(--dk-surface-2) !important;
}

/* Ajuste del texto en hover para mejor contraste */
[data-theme="dark"] .rowPick:hover .cliente-nombre,
[data-theme="dark"] .rowPick:hover div[style*="color:#062a56"],
[data-theme="dark"] .rowPick:hover strong {
  color: var(--dk-text) !important;
}
/* ════════════════════════════════════════════════════════════
   PANEL DATOS CERTIFICADO / CAMPOS FECHA LIBRES
   ════════════════════════════════════════════════════════════ */

/* Inputs de fecha libre (tipo text) y nota dentro del panel */
.vt-campo-fecha {
  background: #fff;
  color: #1e293b;
  border: 1.5px solid #c4cfe0;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background 0.2s;
}

.vt-campo-fecha:focus {
  outline: none;
  border-color: #062a56;
  box-shadow: 0 0 0 3px rgba(6, 42, 86, 0.1);
}

/* Dark mode — panel contenedor */
[data-theme="dark"] #vtFormDatos_0,
[data-theme="dark"] [id^="vtFormDatos_"] {
  background: var(--dk-bg-3) !important;
  border-color: var(--dk-border-2) !important;
}

/* Dark mode — título del panel */
[data-theme="dark"] [id^="vtFormDatos_"] > div:first-child {
  border-color: var(--dk-border-2) !important;
  color: var(--dk-blue) !important;
}

/* Dark mode — labels dentro del panel */
[data-theme="dark"] [id^="vtFormDatos_"] label,
[data-theme="dark"] [id^="vtCamposDatos_"] label,
[data-theme="dark"] [id^="vtCursoCampos_"] label {
  color: var(--dk-text-2) !important;
}

/* Dark mode — inputs de fecha libre y nota */
[data-theme="dark"] .vt-campo-fecha {
  background: var(--dk-bg-2) !important;
  color: var(--dk-text) !important;
  border-color: var(--dk-border-2) !important;
}

[data-theme="dark"] .vt-campo-fecha::placeholder {
  color: var(--dk-text-3) !important;
}

[data-theme="dark"] .vt-campo-fecha:focus {
  border-color: var(--dk-gold) !important;
  box-shadow: 0 0 0 3px var(--dk-gold-glow) !important;
}

/* Dark mode — cards de curso del pack */
[data-theme="dark"] [id^="vtCursoCard_"] {
  background: var(--dk-surface) !important;
  border-color: var(--dk-border-2) !important;
}

[data-theme="dark"] [id^="vtCursoCard_"] > div:first-child {
  background: var(--dk-surface-2) !important;
}

[data-theme="dark"] [id^="vtCursoCampos_"] {
  background: var(--dk-bg-3) !important;
  border-color: var(--dk-border) !important;
}

/* Dark mode — lista de selección de productos hover */
[data-theme="dark"] [id^="vtLista_"] {
  background: var(--dk-surface) !important;
  border-color: var(--dk-border-2) !important;
}

[data-theme="dark"] [id^="vtLista_"] div[data-sel-valor] {
  border-color: var(--dk-border) !important;
  color: var(--dk-text) !important;
}

/* Dark mode — panel de cambio de item */
[data-theme="dark"] [id^="editItemEdit_"] > td {
  background: var(--dk-bg-3) !important;
}

[data-theme="dark"] [id^="editItemEdit_"] > td > div {
  border-color: var(--dk-border-2) !important;
}

/* Dark mode — buscador dentro del panel */
[data-theme="dark"] [id^="vtBuscar_"] {
  background: var(--dk-bg-3) !important;
  border-color: var(--dk-border-2) !important;
  color: var(--dk-text) !important;
}

[data-theme="dark"] [id^="vtBuscar_"]::placeholder {
  color: var(--dk-text-3) !important;
}

/* Dark mode — precio editable */
[data-theme="dark"] [id^="editItemPrecio_"] {
  background: var(--dk-bg-3) !important;
  border-color: var(--dk-border-2) !important;
  color: var(--dk-text) !important;
}

/* Dark mode — info del ítem actual (fondo naranja → dark) */
[data-theme="dark"] div[style*="background:#fff7ed"],
[data-theme="dark"] div[style*="background: #fff7ed"] {
  background: var(--dk-surface-2) !important;
  border-color: var(--dk-border-2) !important;
}

[data-theme="dark"]
  div[style*="background:#fff7ed"]
  span[style*="color:#9a3412"],
[data-theme="dark"]
  div[style*="background:#fff7ed"]
  span[style*="color:#1e293b"] {
  color: var(--dk-text) !important;
}
/* =============================================
   SECCIÓN PACKS - Modo Oscuro
   ============================================= */

[data-theme="dark"] .pack-header {
  background: var(--dk-surface-2) !important;
  border-bottom: 1px solid var(--dk-border) !important;
  color: var(--dk-text) !important;
}

[data-theme="dark"] .pack-header:hover {
  background: var(--dk-text-inv) !important;
}

[data-theme="dark"] .pack-sub-list {
  background: var(--dk-surface) !important;
  border-color: var(--dk-border-2) !important;
}

/* Texto dentro de packs */
[data-theme="dark"] .pack-header div,
[data-theme="dark"] .pack-sub-list div {
  color: var(--dk-text) !important;
}

[data-theme="dark"] .pack-header .pack-chevron {
  color: var(--dk-gold) !important;
}

/* Título "PACKS (X)" */
[data-theme="dark"] div[style*="background:#f5f3ff"],
[data-theme="dark"] div[style*="background: #f5f3ff"] {
  background: var(--dk-surface-2) !important;
  color: var(--dk-text) !important;
}

/* Botón "+ Agregar pack" */
[data-theme="dark"] .btn-add-pack {
  background: var(--dk-gold) !important;
  color: var(--dk-text-inv) !important;
  border: none !important;
}

[data-theme="dark"] .btn-add-pack:hover {
  background: #fbbf24 !important;
  transform: translateY(-1px);
}
/* ════════════════════════════════════════════════════════════
   TABLA GENÉRICA
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] table,
[data-theme="dark"] .table,
[data-theme="dark"] .sales-table,
[data-theme="dark"] .products-table {
  background-color: var(--dk-surface) !important;
  color: var(--dk-text) !important;
  border-color: var(--dk-border) !important;
}
[data-theme="dark"] thead,
[data-theme="dark"] th {
  background: linear-gradient(
    90deg,
    var(--dk-bg-3) 0%,
    var(--dk-surface-2) 100%
  ) !important;
  color: var(--dk-blue) !important;
  border-color: var(--dk-border) !important;
  letter-spacing: 0.05em;
}
[data-theme="dark"] td {
  border-color: var(--dk-border) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] tbody tr:hover {
  background-color: var(--dk-surface-2) !important;
}
[data-theme="dark"] .table-responsive-wrapper {
  border-color: var(--dk-border) !important;
  background: var(--dk-surface) !important;
}

/* ════════════════════════════════════════════════════════════
   INPUTS / SELECTS / TEXTAREAS
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] [class*="search"],
[data-theme="dark"] [class*="form-control"],
[data-theme="dark"] [class*="form-input"] {
  background-color: var(--dk-bg-3) !important;
  border: 1px solid var(--dk-border-2) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--dk-text-3) !important;
}
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  border-color: var(--dk-gold) !important;
  box-shadow: 0 0 0 3px var(--dk-gold-glow) !important;
  outline: none !important;
}
[data-theme="dark"] .input-lock,
[data-theme="dark"] input[disabled],
[data-theme="dark"] input[readonly] {
  background: var(--dk-bg-2) !important;
  color: var(--dk-text-3) !important;
  border-color: var(--dk-border) !important;
}
[data-theme="dark"] select option {
  background-color: var(--dk-surface-2) !important;
  color: var(--dk-text) !important;
}

/* ── Ícono del date picker ── */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.6) sepia(1) saturate(2) hue-rotate(10deg);
  cursor: pointer;
  opacity: 0.7;
}
[data-theme="dark"]
  input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* ════════════════════════════════════════════════════════════
   SEPARADORES / HR
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] hr,
[data-theme="dark"] .divider,
[data-theme="dark"] [class*="divider"] {
  border-color: var(--dk-border) !important;
  background-color: var(--dk-border) !important;
}

/* ════════════════════════════════════════════════════════════
   SCROLLBAR
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--dk-bg);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--dk-surface-3);
  border-radius: 3px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--dk-gold);
  box-shadow: 0 0 6px var(--dk-gold-glow);
}

/* ════════════════════════════════════════════════════════════
   CHARTS / CANVAS
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] .chart-container,
[data-theme="dark"] [class*="chart-container"],
[data-theme="dark"] [class*="chart-wrapper"] {
  background-color: var(--dk-surface) !important;
  border: 1px solid var(--dk-border) !important;
}
[data-theme="dark"] canvas {
  background: var(--dk-surface) !important;
  border-radius: 10px;
}

/* ════════════════════════════════════════════════════════════
   SKELETON / SPINNER
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] .skeleton,
[data-theme="dark"] .vh-sk,
[data-theme="dark"] .co-sk {
  background: linear-gradient(
    90deg,
    var(--dk-surface) 25%,
    var(--dk-surface-3) 50%,
    var(--dk-surface) 75%
  ) !important;
  background-size: 200% 100% !important;
  animation: skeletonDark 1.4s infinite !important;
}
@keyframes skeletonDark {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
[data-theme="dark"] .spinner {
  border-color: var(--dk-border) !important;
  border-top-color: var(--dk-gold) !important;
}

/* ════════════════════════════════════════════════════════════
   TAGS DE ESTADO
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] .tag.success {
  background: var(--dk-green-soft) !important;
  color: var(--dk-green) !important;
  border: 1px solid rgba(74, 222, 128, 0.2) !important;
}
[data-theme="dark"] .tag.warning {
  background: var(--dk-gold-soft) !important;
  color: var(--dk-gold) !important;
  border: 1px solid var(--dk-gold-glow) !important;
}

/* ════════════════════════════════════════════════════════════
   PANELES CON BG BLANCO INLINE
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] div[style*="background:white"],
[data-theme="dark"] div[style*="background: white"],
[data-theme="dark"] div[style*="background:#fff"],
[data-theme="dark"] div[style*="background: #fff"],
[data-theme="dark"] div[style*="background:#ffffff"],
[data-theme="dark"] div[style*="background: #ffffff"],
[data-theme="dark"] div[style*="background-color:white"],
[data-theme="dark"] div[style*="background-color: white"],
[data-theme="dark"] div[style*="background-color:#fff"],
[data-theme="dark"] div[style*="background-color: #fff"] {
  background: var(--dk-surface) !important;
  border: 1px solid var(--dk-border) !important;
  box-shadow: none !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] div[style*="background:white"] *,
[data-theme="dark"] div[style*="background: white"] *,
[data-theme="dark"] div[style*="background:#fff"] *,
[data-theme="dark"] div[style*="background: #fff"] *,
[data-theme="dark"] div[style*="background:#ffffff"] *,
[data-theme="dark"] div[style*="background-color:#fff"] *,
[data-theme="dark"] div[style*="background-color: #fff"] * {
  color: var(--dk-text) !important;
}

/* Texto hardcoded oscuro */
[data-theme="dark"] [style*="color:black"],
[data-theme="dark"] [style*="color: black"],
[data-theme="dark"] [style*="color:#000"],
[data-theme="dark"] [style*="color: #000"],
[data-theme="dark"] [style*="color:#111"],
[data-theme="dark"] [style*="color:#222"],
[data-theme="dark"] [style*="color:#333"] {
  color: var(--dk-text) !important;
}

/* ════════════════════════════════════════════════════════════
   CONFIGURACIÓN / SESSION CARDS
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] .session-card {
  background: var(--dk-surface) !important;
  border: 1px solid var(--dk-border-2) !important;
  box-shadow: var(--dk-shadow-sm) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] .session-card:hover {
  border-color: var(--dk-gold) !important;
  box-shadow:
    0 0 0 2px var(--dk-gold-glow),
    var(--dk-shadow-md) !important;
  transform: translateY(-2px);
}
[data-theme="dark"] .session-meta-item {
  background: var(--dk-bg-3) !important;
  border: 1px solid var(--dk-border) !important;
}
[data-theme="dark"] .session-meta-label {
  color: var(--dk-text-3) !important;
}
[data-theme="dark"] .session-meta-value {
  color: var(--dk-text) !important;
}
[data-theme="dark"] .session-name,
[data-theme="dark"] .session-header {
  color: var(--dk-text) !important;
}
[data-theme="dark"] .session-role {
  background: var(--dk-blue-soft) !important;
  color: var(--dk-blue) !important;
  border: 1px solid var(--dk-blue-glow) !important;
}
[data-theme="dark"] .session-badge.active {
  background: var(--dk-green-soft) !important;
  color: var(--dk-green) !important;
  border: 1px solid var(--dk-green-glow) !important;
}
[data-theme="dark"] .session-badge.inactive {
  background: var(--dk-red-soft) !important;
  color: var(--dk-red) !important;
  border: 1px solid var(--dk-red-glow) !important;
}

/* ════════════════════════════════════════════════════════════
   BOTONES OSCURO / CLARO
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] button.dark,
[data-theme="dark"] button.clear {
  background: var(--dk-surface-2) !important;
  border: 1px solid var(--dk-border-2) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] button.dark:hover,
[data-theme="dark"] button.clear:hover {
  background: var(--dk-surface-3) !important;
  border-color: var(--dk-gold) !important;
}
[data-theme="dark"] button.dark.active,
[data-theme="dark"] button.clear.active {
  background: var(--dk-gold) !important;
  color: var(--dk-text-inv) !important;
  border-color: var(--dk-gold) !important;
}

/* ════════════════════════════════════════════════════════════
   TABS
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] .tabs-card {
  background: var(--dk-surface) !important;
  border: 1px solid var(--dk-border) !important;
}
[data-theme="dark"] .tab {
  background: transparent !important;
  color: var(--dk-text-3) !important;
  border: none !important;
}
[data-theme="dark"] .tab.active {
  background: var(--dk-gold) !important;
  color: var(--dk-text-inv) !important;
  box-shadow: 0 2px 8px var(--dk-gold-glow) !important;
}
[data-theme="dark"] #busq-content {
  background: var(--dk-surface) !important;
  border: 1px solid var(--dk-border) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] #form-area {
  background: var(--dk-bg-3) !important;
  border: 1px solid var(--dk-border) !important;
  color: var(--dk-text) !important;
}

/* Sidebar expandir/contraer */
[data-theme="dark"] .btnexpandir,
[data-theme="dark"] .btmcontraer {
  background: var(--dk-surface-2) !important;
  border: 1px solid var(--dk-border-2) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] .btnexpandir:hover,
[data-theme="dark"] .btmcontraer:hover {
  background: var(--dk-surface-3) !important;
  border-color: var(--dk-gold) !important;
  color: var(--dk-gold) !important;
}

/* ════════════════════════════════════════════════════════════
   DASHBOARD — PANEL
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] .panel {
  background: var(--dk-surface) !important;
  border: 1px solid var(--dk-border) !important;
  box-shadow: var(--dk-shadow-sm) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] .panel .sub,
[data-theme="dark"] .sub {
  background: transparent !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] .panel > .cards {
  background: var(--dk-surface) !important;
  border: 1px solid var(--dk-border) !important;
}

/* ════════════════════════════════════════════════════════════
   VENTAS POR HORA
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] #vhKpiGrid > div {
  background: linear-gradient(
    135deg,
    var(--dk-surface) 0%,
    var(--dk-surface-2) 100%
  ) !important;
  border: 1px solid var(--dk-border-2) !important;
  box-shadow: var(--dk-shadow-sm) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] #vhKpiGrid > div > div {
  color: var(--dk-text) !important;
}
[data-theme="dark"] #vhRango,
[data-theme="dark"] #vhFechaInicio,
[data-theme="dark"] #vhFechaFin {
  background: var(--dk-bg-3) !important;
  border: 1px solid var(--dk-border-2) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] #vhReload {
  background: var(--dk-surface-2) !important;
  border: 1px solid var(--dk-border-2) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] #vhRows tr:hover {
  background: var(--dk-surface-2) !important;
}
[data-theme="dark"] #vhRows td {
  color: var(--dk-text) !important;
  border-color: var(--dk-border) !important;
}

/* ════════════════════════════════════════════════════════════
   COMISIONES
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] #coGenerado,
[data-theme="dark"] #coPagado {
  color: var(--dk-text) !important;
}
[data-theme="dark"] #coMes {
  background: var(--dk-bg-3) !important;
  border: 1px solid var(--dk-border-2) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] #coBtnVer {
  background: var(--dk-surface-2) !important;
  border: 1px solid var(--dk-border-2) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] #coRows tr:hover {
  background: var(--dk-surface-2) !important;
}
[data-theme="dark"] #coRows td {
  color: var(--dk-text) !important;
  border-color: var(--dk-border) !important;
}

/* ════════════════════════════════════════════════════════════
   PRODUCTOS
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] .header-product {
  color: var(--dk-text) !important;
}
[data-theme="dark"] #prCat,
[data-theme="dark"] #prSearch {
  background: var(--dk-bg-3) !important;
  border: 1px solid var(--dk-border-2) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] .sales-table thead tr,
[data-theme="dark"] .sales-table th {
  background: var(--dk-bg-3) !important;
  color: var(--dk-blue) !important;
  border-color: var(--dk-border) !important;
}
[data-theme="dark"] .sales-table td {
  color: var(--dk-text) !important;
  border-color: var(--dk-border) !important;
}
[data-theme="dark"] .sales-table tbody tr:hover {
  background: var(--dk-surface-2) !important;
}

/* Modal productos */
[data-theme="dark"] .modal-box {
  background: var(--dk-surface) !important;
  border: 1px solid var(--dk-border-2) !important;
  box-shadow:
    var(--dk-shadow-lg),
    0 0 0 1px var(--dk-border) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] .modal-box * {
  color: var(--dk-text) !important;
}
[data-theme="dark"] .modal-box input,
[data-theme="dark"] .modal-box select,
[data-theme="dark"] .modal-box textarea {
  background: var(--dk-bg-3) !important;
  border: 1px solid var(--dk-border-2) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] .modal-box label,
[data-theme="dark"] .modal-box .pr-section-label {
  color: var(--dk-text-3) !important;
  border-color: var(--dk-border) !important;
}
[data-theme="dark"] .btn-premium-close {
  background: var(--dk-surface-2) !important;
  border: 1px solid var(--dk-border-2) !important;
  color: var(--dk-text-2) !important;
}
[data-theme="dark"] .btn-premium-close:hover {
  background: var(--dk-red-soft) !important;
  border-color: var(--dk-red) !important;
  color: var(--dk-red) !important;
}
[data-theme="dark"] #prModal {
  background: rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: blur(4px) !important;
}

/* ════════════════════════════════════════════════════════════
   REGISTRAR VENTA
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] .panels {
  background: var(--dk-bg) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] .cont-header,
[data-theme="dark"] .cont-header-vent {
  background: var(--dk-surface) !important;
  color: var(--dk-text) !important;
  border-color: var(--dk-border) !important;
}
[data-theme="dark"] .cont-header *,
[data-theme="dark"] .cont-header-vent * {
  color: var(--dk-text) !important;
}
[data-theme="dark"] #vnTotalFinal {
  color: var(--dk-gold) !important;
}

[data-theme="dark"] .panels input,
[data-theme="dark"] .panels select,
[data-theme="dark"] .panels textarea {
  background: var(--dk-bg-3) !important;
  border: 1px solid var(--dk-border-2) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] .panels input::placeholder {
  color: var(--dk-text-3) !important;
}

[data-theme="dark"] .prod-list-corporate {
  background: var(--dk-surface) !important;
  border: 1px solid var(--dk-border-2) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] .prod-list-corporate * {
  color: var(--dk-text) !important;
}

[data-theme="dark"] .products-table thead tr {
  background: var(--dk-bg-3) !important;
}
[data-theme="dark"] .products-table th,
[data-theme="dark"] .products-table td {
  color: var(--dk-text) !important;
  border-color: var(--dk-border) !important;
}

[data-theme="dark"] #vnNroOperacion,
[data-theme="dark"] #vnObservacion,
[data-theme="dark"] #envioDireccion,
[data-theme="dark"] #envioCantidad {
  background: var(--dk-bg-3) !important;
  border-color: var(--dk-border-2) !important;
  color: var(--dk-text) !important;
}

/* Cards envío */
[data-theme="dark"] .envio-card {
  background: var(--dk-surface) !important;
  border: 1px solid var(--dk-border-2) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] .envio-card:hover {
  background: var(--dk-surface-2) !important;
  border-color: var(--dk-gold) !important;
  box-shadow: 0 0 10px var(--dk-gold-glow) !important;
}
[data-theme="dark"] .card-envio {
  background: var(--dk-surface) !important;
  border: 1px solid var(--dk-border) !important;
}
[data-theme="dark"] .envio-title {
  color: var(--dk-text) !important;
}
[data-theme="dark"] .envio-desc {
  color: var(--dk-text-2) !important;
}

/* Botones formulario */
[data-theme="dark"] .btns {
  background: var(--dk-surface-2) !important;
  border: 1px solid var(--dk-border-2) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] .btns1 {
  background: var(--dk-gold-soft) !important;
  border: 1px solid var(--dk-gold) !important;
  color: var(--dk-gold) !important;
}
[data-theme="dark"] .btn-buscar,
[data-theme="dark"] #vnManualAdd {
  background: var(--dk-surface-2) !important;
  border: 1px solid var(--dk-border-2) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] .espcio_envio {
  background: var(--dk-bg) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] #mensajeSinProductos {
  color: var(--dk-text-2) !important;
}

/* ════════════════════════════════════════════════════════════
   LOGIN
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] .loginBox {
  background: var(--dk-surface) !important;
  border: 1px solid var(--dk-gold) !important;
  box-shadow:
    0 0 40px var(--dk-gold-glow),
    var(--dk-shadow-lg) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] .cont_login {
  background: var(--dk-bg) !important;
}
[data-theme="dark"] .main-title {
  color: var(--dk-gold) !important;
}
[data-theme="dark"] .subtitle {
  color: var(--dk-text-2) !important;
}
[data-theme="dark"] .contform {
  background: transparent !important;
}
[data-theme="dark"] .loginBox input {
  background: var(--dk-bg-3) !important;
  border-color: var(--dk-border-2) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] .loginBox input::placeholder {
  color: var(--dk-text-3) !important;
}
[data-theme="dark"] .loginBox input:focus {
  border-color: var(--dk-gold) !important;
  box-shadow: 0 0 0 3px var(--dk-gold-glow) !important;
}
[data-theme="dark"] .loginBox label {
  color: var(--dk-text-2) !important;
  background: var(--dk-bg-3) !important;
}
[data-theme="dark"] .loginBox input:focus + label,
[data-theme="dark"] .loginBox input:not(:placeholder-shown) + label {
  color: var(--dk-gold) !important;
  background: var(--dk-bg-3) !important;
}
[data-theme="dark"] .loginBox .btn {
  background: linear-gradient(
    135deg,
    var(--dk-gold) 0%,
    #fbbf24 100%
  ) !important;
  color: #000 !important;
  border: none !important;
  box-shadow: 0 4px 14px var(--dk-gold-glow) !important;
}
[data-theme="dark"] .loginBox .btn:hover {
  background: linear-gradient(
    135deg,
    #d97706 0%,
    var(--dk-gold) 100%
  ) !important;
}
[data-theme="dark"] .muteds {
  background: var(--dk-bg-2) !important;
  color: var(--dk-text-2) !important;
}
[data-theme="dark"] .segundo-back {
  background: rgba(0, 0, 0, 0.8) !important;
}
[data-theme="dark"] .errormesageor {
  background: var(--dk-red-soft) !important;
  color: var(--dk-red) !important;
  border-color: rgba(248, 113, 113, 0.3) !important;
}
[data-theme="dark"] .success {
  background: var(--dk-green-soft) !important;
  color: var(--dk-green) !important;
  border-color: var(--dk-green-glow) !important;
}

/* ════════════════════════════════════════════════════════════
   GASTOS
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] #gastosModal,
[data-theme="dark"] .gastos-form,
[data-theme="dark"] [id*="gasto"],
[data-theme="dark"] [class*="gasto"] {
  background: var(--dk-surface) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] #gastosModal *,
[data-theme="dark"] .gastos-form * {
  color: var(--dk-text) !important;
}
[data-theme="dark"] #gastosModal input,
[data-theme="dark"] #gastosModal select,
[data-theme="dark"] #gastosModal textarea,
[data-theme="dark"] .gastos-form input,
[data-theme="dark"] .gastos-form select,
[data-theme="dark"] .gastos-form textarea {
  background: var(--dk-bg-3) !important;
  border: 1px solid var(--dk-border-2) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] [class*="upload"],
[data-theme="dark"] [class*="dropzone"],
[data-theme="dark"] [class*="file-zone"],
[data-theme="dark"] .comprobante-area {
  background: var(--dk-bg-3) !important;
  border: 2px dashed var(--dk-border-2) !important;
  color: var(--dk-text-2) !important;
}
[data-theme="dark"] input[type="file"] {
  background: var(--dk-bg-3) !important;
  border: 1px solid var(--dk-border-2) !important;
  color: var(--dk-text-2) !important;
}
[data-theme="dark"] #gsTitle {
  color: var(--dk-gold) !important;
}
[data-theme="dark"] #gsModalContainer h2,
[data-theme="dark"] #gsModalContainer h3,
[data-theme="dark"] #gsModalContainer .modal-title,
[data-theme="dark"] #gsModal h2,
[data-theme="dark"] #gsModal h3,
[data-theme="dark"] #gsModal .modal-title {
  color: var(--dk-gold) !important;
}
[data-theme="dark"] #gsModalContainer label,
[data-theme="dark"] #gsModal label {
  color: var(--dk-text-3) !important;
}
[data-theme="dark"] .gs-page-title,
[data-theme="dark"] .gastos-title,
[data-theme="dark"] [class*="gastos"] h2,
[data-theme="dark"] [class*="gastos"] h3,
[data-theme="dark"] [id*="gastos"] h2,
[data-theme="dark"] [id*="gastos"] h3 {
  color: var(--dk-gold) !important;
}
[data-theme="dark"] #gsRows td {
  color: var(--dk-text) !important;
  border-color: var(--dk-border) !important;
}
[data-theme="dark"] #gsRows tr:hover {
  background: var(--dk-surface-2) !important;
}
[data-theme="dark"] #gsRows .muted,
[data-theme="dark"] #gsModalContainer .muted,
[data-theme="dark"] #gsModal .muted {
  color: var(--dk-text-2) !important;
}

/* Botones de acción */
[data-theme="dark"] .btn-action {
  background: var(--dk-bg-3) !important;
  border: 1px solid var(--dk-border) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] .btn-edit {
  color: var(--dk-blue) !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
}
[data-theme="dark"] .btn-delete {
  color: var(--dk-red) !important;
  border-color: rgba(248, 113, 113, 0.3) !important;
}
[data-theme="dark"] .btn-edit:hover {
  background: var(--dk-blue-soft) !important;
  border-color: var(--dk-blue) !important;
  box-shadow: 0 0 8px var(--dk-blue-glow) !important;
}
[data-theme="dark"] .btn-delete:hover {
  background: var(--dk-red-soft) !important;
  border-color: var(--dk-red) !important;
  box-shadow: 0 0 8px var(--dk-red-glow) !important;
}
[data-theme="dark"] .btnPdfLine {
  color: var(--dk-gold) !important;
  border: 1px solid var(--dk-gold-glow) !important;
  background: var(--dk-gold-soft) !important;
}
[data-theme="dark"] .btnPdfLine:hover {
  border-color: var(--dk-gold) !important;
  box-shadow: 0 0 8px var(--dk-gold-glow) !important;
}
[data-theme="dark"] #gsSearch {
  background: var(--dk-bg-3) !important;
  border: 1px solid var(--dk-border-2) !important;
  color: var(--dk-text) !important;
}
[data-theme="dark"] #gsNew,
[data-theme="dark"] #gsReload {
  background: var(--dk-gold-soft) !important;
  border: 1px solid var(--dk-gold) !important;
  color: var(--dk-gold) !important;
}
[data-theme="dark"] #gsNew:hover,
[data-theme="dark"] #gsReload:hover {
  background: var(--dk-gold) !important;
  color: var(--dk-text-inv) !important;
  box-shadow: 0 4px 14px var(--dk-gold-glow) !important;
}

/* ════════════════════════════════════════════════════════════
   MODAL EDITAR VENTA — tabla de productos
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] #editItemsTabla {
  background: var(--dk-bg-3) !important;
  border-color: var(--dk-border-2) !important;
}
[data-theme="dark"] #editItemsTabla thead th {
  background: linear-gradient(
    90deg,
    var(--dk-bg-3) 0%,
    var(--dk-surface-2) 100%
  ) !important;
  color: var(--dk-blue) !important;
}
[data-theme="dark"] #editItemsTabla tbody td {
  background: var(--dk-bg-3) !important;
  color: var(--dk-text) !important;
  border-color: var(--dk-border) !important;
}
[data-theme="dark"] .item-tipo-badge.pack {
  background: var(--dk-blue-soft) !important;
  color: var(--dk-blue) !important;
  border: 1px solid var(--dk-blue-glow) !important;
}
[data-theme="dark"] .item-tipo-badge.producto {
  background: var(--dk-green-soft) !important;
  color: var(--dk-green) !important;
  border: 1px solid var(--dk-green-glow) !important;
}

/* Resumen de totales */
[data-theme="dark"] #editResumenTotales {
  background: linear-gradient(135deg, #0d1826 0%, #0a1a30 100%) !important;
  border-color: var(--dk-border-2) !important;
}
[data-theme="dark"] #editResumenTotales .lbl {
  color: var(--dk-text-3) !important;
}
[data-theme="dark"] #editResumenTotales .val {
  color: var(--dk-text) !important;
}
[data-theme="dark"] #editResumenTotales .val.desc-val {
  color: var(--dk-red) !important;
}
[data-theme="dark"] #editResumenTotales .val.total-val {
  color: var(--dk-green) !important;
}
[data-theme="dark"] #editResumenTotales .resumen-sep {
  color: var(--dk-text-3) !important;
}

/* Botones guardar / cancelar */
[data-theme="dark"] #saveEdit {
  background: linear-gradient(
    135deg,
    #d97706 0%,
    var(--dk-gold) 100%
  ) !important;
  color: #000 !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 16px var(--dk-gold-glow) !important;
  border: none !important;
}
[data-theme="dark"] #saveEdit:hover {
  background: linear-gradient(135deg, #b45309 0%, #d97706 100%) !important;
  box-shadow: 0 6px 24px var(--dk-gold-glow) !important;
}
[data-theme="dark"] #cancelEdit {
  background: var(--dk-red-soft) !important;
  border: 1.5px solid rgba(248, 113, 113, 0.3) !important;
  color: var(--dk-red) !important;
}
[data-theme="dark"] #cancelEdit:hover {
  background: #7f1d1d !important;
  border-color: var(--dk-red) !important;
  color: #fff !important;
}
[data-theme="dark"] .btn-cambiar-item {
  background: var(--dk-gold-soft) !important;
  border-color: var(--dk-gold) !important;
  color: var(--dk-gold) !important;
}
[data-theme="dark"] .btn-cambiar-item:hover {
  background: var(--dk-gold) !important;
  color: #000 !important;
  box-shadow: 0 2px 10px var(--dk-gold-glow) !important;
}
[data-theme="dark"] .btn-confirmar-cambio {
  background: #16a34a !important;
  color: #fff !important;
  box-shadow: 0 2px 10px var(--dk-green-glow) !important;
}
[data-theme="dark"] .btn-cancelar-cambio {
  background: var(--dk-surface-3) !important;
  color: var(--dk-text-2) !important;
}

/* Empty state */
[data-theme="dark"] .emptyBox {
  color: var(--dk-text) !important;
}
[data-theme="dark"] .invoiceIcon {
  fill: #1e3a5f !important;
}
[data-theme="dark"] .moneyIcon {
  fill: var(--dk-gold) !important;
}
[data-theme="dark"] .chartIcon {
  fill: var(--dk-blue) !important;
}

/* ════════════════════════════════════════════════════════════
   LISTA SELECTOR DE PRODUCTOS — item seleccionado dark mode
   ════════════════════════════════════════════════════════════ */

/* Item seleccionado en la lista (el JS pone background:#dbeafe inline,
   esto lo sobreescribe solo en dark mode con !important) */
[data-theme="dark"] [id^="vtLista_"] div[data-sel-valor][style*="dbeafe"],
[data-theme="dark"] [id^="vtLista_"] div[data-sel-valor][style*="1e3a5f"] {
  background: #1e3a5f !important;
  color: #e2e8f0 !important;
}

/* Pill "✔ Nuevo:" que también usa #dbeafe hardcodeado */
[data-theme="dark"] [id^="vtSelPill_"] div[style*="dbeafe"] {
  background: #1e3a5f !important;
  border-color: #38bdf8 !important;
}

[data-theme="dark"]
  [id^="vtSelPill_"]
  div[style*="dbeafe"]
  span[style*="1e40af"] {
  color: #38bdf8 !important;
}

[data-theme="dark"]
  [id^="vtSelPill_"]
  div[style*="dbeafe"]
  span[style*="1e293b"] {
  color: #e2e8f0 !important;
}

[data-theme="dark"]
  [id^="vtSelPill_"]
  div[style*="dbeafe"]
  span[style*="166534"] {
  color: #4ade80 !important;
}
/* ════════════════════════════════════════════════════════════
   BADGES PACK en lista de selección — dark mode
   Los badges inline usan colores claros (#f3e8ff / #6b21a8)
   que son ilegibles en modo oscuro. Se sobreescriben aquí.
   ════════════════════════════════════════════════════════════ */

/* Badge PACK dentro de la lista de items (vtLista_) */
[data-theme="dark"] [id^="vtLista_"] span[style*="f3e8ff"] {
  background: #4c1d95 !important;
  color: #e9d5ff !important;
  border: 1px solid #7c3aed !important;
}

/* Badge PACK dentro del pill de selección (vtSelPill_) */
[data-theme="dark"] [id^="vtSelPill_"] span[style*="f3e8ff"] {
  background: #4c1d95 !important;
  color: #e9d5ff !important;
  border: 1px solid #7c3aed !important;
}