/* ============================================================
   QOSTUM · Tema oscuro (compartido)
   Modo claro = por defecto (sin atributo). Oscuro = html[data-theme="dark"].
   Estrategia:
   1) Voltear las variables --color-* → cubre todo lo que usa var() en cualquier módulo.
   2) Variables de superficie oscuras (--qd-*) para los overrides por módulo.
   3) Botón sol/luna + base oscura genérica (body, scrollbars, inputs de texto).
   Los colores fijos (hex) de cada módulo se sobreescriben en su propio bloque.
   ============================================================ */

/* ---- Botón de tema (claro y oscuro) ---- */
.qostum-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  border: none; border-radius: 6px;
  background: transparent; color: #9ca3af; cursor: pointer;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.qostum-theme-toggle:hover { background: rgba(0,0,0,.06); color: #4b5563; }
.qostum-theme-toggle .qtt-ico { width: 17px; height: 17px; }
.qostum-theme-toggle .qtt-ico { display: none; }
.qostum-theme-toggle .qtt-moon { display: inline-block; }   /* claro → ofrece luna */
html[data-theme="dark"] .qostum-theme-toggle .qtt-moon { display: none; }
html[data-theme="dark"] .qostum-theme-toggle .qtt-sun { display: inline-block; } /* oscuro → ofrece sol */
@media (hover: none) and (pointer: coarse) {
  .qostum-theme-toggle { width: 40px; height: 40px; }
}

/* ============================================================
   MODO OSCURO
   ============================================================ */
html[data-theme="dark"] {
  /* Variables de superficie (úsalas en los overrides por módulo) */
  --qd-bg: #13171e;          /* fondo base de página */
  --qd-surface: #1b212b;     /* tarjetas, paneles */
  --qd-surface-2: #222b37;   /* filas alternas, hover suave */
  --qd-elevated: #232c38;    /* modales, popovers, menús */
  --qd-border: #323b48;      /* bordes */
  --qd-border-soft: #2a323d; /* bordes sutiles */
  --qd-text: #e6eaf0;        /* texto principal */
  --qd-text-muted: #9aa4b2;  /* texto secundario */
  --qd-text-faint: #6b7785;  /* texto tenue */

  /* Volteo de la escala de grises: lo que era fondo claro se vuelve oscuro,
     lo que era texto oscuro se vuelve claro. Cubre todo lo que use var(). */
  --color-gray-50:  #1b212b;
  --color-gray-100: #222b37;
  --color-gray-200: #323b48;
  --color-gray-300: #3d4754;
  --color-gray-400: #6b7785;
  --color-gray-500: #9aa4b2;
  --color-gray-600: #b4bdc9;
  --color-gray-700: #d7dde5;
  --color-gray-800: #e6eaf0;
  --color-gray-900: #f2f5f8;

  /* Acentos: se conservan (la marca). El primario se mantiene legible en oscuro. */
  --color-primary: #6f93b0;
  --color-celeste-bg-light: #1e2a33;
}

/* ---- Base de página ---- */
html[data-theme="dark"] body {
  background: var(--qd-bg);
  color: var(--qd-text);
}

/* ---- Scrollbars ---- */
html[data-theme="dark"] * {
  scrollbar-color: #3d4754 transparent;
}
html[data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #3d4754; border-radius: 8px; border: 3px solid var(--qd-bg);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4b5563; }

/* ---- Selección de texto ---- */
html[data-theme="dark"] ::selection { background: rgba(217,125,85,0.35); color: #fff; }

/* ---- Inputs de texto genéricos (no toca checkboxes/radios) ---- */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background-color: var(--qd-surface);
  color: var(--qd-text);
  border-color: var(--qd-border);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--qd-text-faint); }
html[data-theme="dark"] select option { background: var(--qd-elevated); color: var(--qd-text); }
/* La lista desplegable NATIVA del <select> la pinta el SO: color-scheme la hace oscura */
html[data-theme="dark"] select { color-scheme: dark; }

/* ---- Estilos inline claros en HTML generado por JS (modales, tarjetas, alertas) ----
   Case-insensitive ( i ) para cazar mayúsculas/minúsculas (#FAF7F4, #F9FAFB, etc.). ---- */
html[data-theme="dark"] [style*="background: white" i]:not(.qostum-theme-toggle),
html[data-theme="dark"] [style*="background:white" i]:not(.qostum-theme-toggle),
html[data-theme="dark"] [style*="background-color: white" i],
html[data-theme="dark"] [style*="background-color:white" i],
html[data-theme="dark"] [style*="background:#fff" i],
html[data-theme="dark"] [style*="background: #fff" i],
html[data-theme="dark"] [style*="background-color:#fff" i],
html[data-theme="dark"] [style*="background-color: #fff" i],
html[data-theme="dark"] [style*="background:#fef" i],
html[data-theme="dark"] [style*="background: #fef" i],
html[data-theme="dark"] [style*="background:#faf" i],
html[data-theme="dark"] [style*="background: #faf" i],
html[data-theme="dark"] [style*="background:#f9" i],
html[data-theme="dark"] [style*="background: #f9" i],
html[data-theme="dark"] [style*="background:#f8" i],
html[data-theme="dark"] [style*="background: #f8" i],
html[data-theme="dark"] [style*="background:#f7" i],
html[data-theme="dark"] [style*="background: #f7" i],
html[data-theme="dark"] [style*="background:#f5" i],
html[data-theme="dark"] [style*="background: #f5" i],
html[data-theme="dark"] [style*="background:#f3f4f6" i],
html[data-theme="dark"] [style*="background: #f3f4f6" i],
html[data-theme="dark"] [style*="background:#fafafa" i],
html[data-theme="dark"] [style*="background: #fafafa" i],
html[data-theme="dark"] [style*="background:#e5edf2" i],
html[data-theme="dark"] [style*="background: #e5edf2" i],
html[data-theme="dark"] [style*="background:#e0f2fe" i],
html[data-theme="dark"] [style*="background: #e0f2fe" i] { background-color: var(--qd-surface) !important; }
/* Texto oscuro inline → claro (case-insensitive) */
html[data-theme="dark"] [style*="color:#1f2937" i], html[data-theme="dark"] [style*="color: #1f2937" i],
html[data-theme="dark"] [style*="color:#111827" i], html[data-theme="dark"] [style*="color: #111827" i],
html[data-theme="dark"] [style*="color:#374151" i], html[data-theme="dark"] [style*="color: #374151" i],
html[data-theme="dark"] [style*="color:#0f172a" i], html[data-theme="dark"] [style*="color: #0f172a" i],
html[data-theme="dark"] [style*="color:#334155" i], html[data-theme="dark"] [style*="color: #334155" i],
html[data-theme="dark"] [style*="color:#475569" i], html[data-theme="dark"] [style*="color: #475569" i],
html[data-theme="dark"] [style*="color:#1e293b" i], html[data-theme="dark"] [style*="color: #1e293b" i] { color: var(--qd-text) !important; }
html[data-theme="dark"] [style*="color:#4b5563" i], html[data-theme="dark"] [style*="color: #4b5563" i],
html[data-theme="dark"] [style*="color:#6b7280" i], html[data-theme="dark"] [style*="color: #6b7280" i],
html[data-theme="dark"] [style*="color:#64748b" i], html[data-theme="dark"] [style*="color: #64748b" i] { color: var(--qd-text-muted) !important; }

/* ============================================================
   RED AMPLIADA (QA modo oscuro 2026-06-11)
   Caza los estilos inline claros que la red base no alcanzaba:
   grises sueltos, formas rgb() serializadas (cssText / .style desde JS),
   tintes semánticos (verde/rojo/ámbar/azul/crema) y bordes claros.
   Todo bajo html[data-theme="dark"]; el modo claro queda intacto.
   ============================================================ */

/* ---- Fondos grises/neutros que no empiezan por los prefijos base ---- */
html[data-theme="dark"] [style*="background:#e5e7eb" i], html[data-theme="dark"] [style*="background: #e5e7eb" i],
html[data-theme="dark"] [style*="background-color:#e5e7eb" i], html[data-theme="dark"] [style*="background-color: #e5e7eb" i],
html[data-theme="dark"] [style*="background:#d1d5db" i], html[data-theme="dark"] [style*="background: #d1d5db" i],
html[data-theme="dark"] [style*="background:#e2e8f0" i], html[data-theme="dark"] [style*="background: #e2e8f0" i],
html[data-theme="dark"] [style*="background:#edf2f7" i], html[data-theme="dark"] [style*="background: #edf2f7" i] { background-color: #3d4754 !important; }
html[data-theme="dark"] [style*="background:#ececec" i], html[data-theme="dark"] [style*="background: #ececec" i],
html[data-theme="dark"] [style*="background:#ddd7ce" i], html[data-theme="dark"] [style*="background: #ddd7ce" i],
html[data-theme="dark"] [style*="background:#ece3db" i], html[data-theme="dark"] [style*="background: #ece3db" i],
html[data-theme="dark"] [style*="background:#e6ddd4" i], html[data-theme="dark"] [style*="background: #e6ddd4" i],
html[data-theme="dark"] [style*="background:#eef0f2" i], html[data-theme="dark"] [style*="background: #eef0f2" i] { background-color: var(--qd-surface-2) !important; }

/* ---- Formas rgb() serializadas: cssText y .style.background desde JS ---- */
html[data-theme="dark"] [style*="background: rgb(255, 255, 255)"],
html[data-theme="dark"] [style*="background-color: rgb(255, 255, 255)"],
html[data-theme="dark"] [style*="background: rgb(249, 250, 251)"],
html[data-theme="dark"] [style*="background: rgb(250, 247, 244)"],
html[data-theme="dark"] [style*="background: rgb(243, 244, 246)"] { background-color: var(--qd-surface) !important; }
html[data-theme="dark"] [style*="background: rgb(243, 241, 236)"] { background-color: var(--qd-surface-2) !important; }
html[data-theme="dark"] [style*="color: rgb(31, 41, 55)"],
html[data-theme="dark"] [style*="color: rgb(17, 24, 39)"],
html[data-theme="dark"] [style*="color: rgb(55, 65, 81)"] { color: var(--qd-text) !important; }
html[data-theme="dark"] [style*="color: rgb(75, 85, 99)"],
html[data-theme="dark"] [style*="color: rgb(107, 114, 128)"],
html[data-theme="dark"] [style*="color: rgb(100, 116, 139)"] { color: var(--qd-text-muted) !important; }

/* ---- Tintes semánticos → versión oscura del tinte (van DESPUÉS de los
        neutros y de la red base para ganarles en cascada) ---- */
/* Verde (éxito) */
html[data-theme="dark"] [style*="background:#eaf7ee" i], html[data-theme="dark"] [style*="background: #eaf7ee" i],
html[data-theme="dark"] [style*="background:#e8f5e9" i], html[data-theme="dark"] [style*="background: #e8f5e9" i],
html[data-theme="dark"] [style*="background:#f4faf5" i], html[data-theme="dark"] [style*="background: #f4faf5" i],
html[data-theme="dark"] [style*="background:#ecfdf5" i], html[data-theme="dark"] [style*="background: #ecfdf5" i],
html[data-theme="dark"] [style*="background:#f0fdf4" i], html[data-theme="dark"] [style*="background: #f0fdf4" i],
html[data-theme="dark"] [style*="background:#dcfce7" i], html[data-theme="dark"] [style*="background: #dcfce7" i] { background-color: #1e2a22 !important; }
/* Rojo (error) */
html[data-theme="dark"] [style*="background:#feefee" i], html[data-theme="dark"] [style*="background: #feefee" i],
html[data-theme="dark"] [style*="background:#fceeec" i], html[data-theme="dark"] [style*="background: #fceeec" i],
html[data-theme="dark"] [style*="background:#fcebea" i], html[data-theme="dark"] [style*="background: #fcebea" i],
html[data-theme="dark"] [style*="background:#fee2e2" i], html[data-theme="dark"] [style*="background: #fee2e2" i],
html[data-theme="dark"] [style*="background:#fecaca" i], html[data-theme="dark"] [style*="background: #fecaca" i],
html[data-theme="dark"] [style*="background:#fef2f2" i], html[data-theme="dark"] [style*="background: #fef2f2" i],
html[data-theme="dark"] [style*="background:#fff5f5" i], html[data-theme="dark"] [style*="background: #fff5f5" i] { background-color: #2d1f20 !important; }
/* Ámbar (aviso) */
html[data-theme="dark"] [style*="background:#fffbeb" i], html[data-theme="dark"] [style*="background: #fffbeb" i],
html[data-theme="dark"] [style*="background:#fef3c7" i], html[data-theme="dark"] [style*="background: #fef3c7" i],
html[data-theme="dark"] [style*="background:#fef6e7" i], html[data-theme="dark"] [style*="background: #fef6e7" i],
html[data-theme="dark"] [style*="background:#fff7ed" i], html[data-theme="dark"] [style*="background: #fff7ed" i],
html[data-theme="dark"] [style*="background:#fff3e0" i], html[data-theme="dark"] [style*="background: #fff3e0" i] { background-color: #2a2418 !important; }
/* Azul (informativo) */
html[data-theme="dark"] [style*="background:#eff6ff" i], html[data-theme="dark"] [style*="background: #eff6ff" i],
html[data-theme="dark"] [style*="background:#dbeafe" i], html[data-theme="dark"] [style*="background: #dbeafe" i],
html[data-theme="dark"] [style*="background:#eff4f9" i], html[data-theme="dark"] [style*="background: #eff4f9" i] { background-color: #1e2a33 !important; }
/* Crema de marca (resaltados) */
html[data-theme="dark"] [style*="background:#fef3ec" i], html[data-theme="dark"] [style*="background: #fef3ec" i],
html[data-theme="dark"] [style*="background:#fde9dd" i], html[data-theme="dark"] [style*="background: #fde9dd" i],
html[data-theme="dark"] [style*="background:#fbeadf" i], html[data-theme="dark"] [style*="background: #fbeadf" i],
html[data-theme="dark"] [style*="background:#f6d9c6" i], html[data-theme="dark"] [style*="background: #f6d9c6" i] { background-color: #33261d !important; }
/* Blanco templado (headers de modal) → superficie elevada, no plana */
html[data-theme="dark"] [style*="background:#faf7f4" i], html[data-theme="dark"] [style*="background: #faf7f4" i] { background-color: var(--qd-elevated) !important; }

/* ---- Texto semántico oscuro inline → versión clara ---- */
html[data-theme="dark"] [style*="color:#2d5a3a" i], html[data-theme="dark"] [style*="color: #2d5a3a" i],
html[data-theme="dark"] [style*="color:#166534" i], html[data-theme="dark"] [style*="color: #166534" i],
html[data-theme="dark"] [style*="color:#15803d" i], html[data-theme="dark"] [style*="color: #15803d" i],
html[data-theme="dark"] [style*="color:#047857" i], html[data-theme="dark"] [style*="color: #047857" i] { color: #9fd3b0 !important; }
html[data-theme="dark"] [style*="color:#7a2823" i], html[data-theme="dark"] [style*="color: #7a2823" i],
html[data-theme="dark"] [style*="color:#991b1b" i], html[data-theme="dark"] [style*="color: #991b1b" i],
html[data-theme="dark"] [style*="color:#b91c1c" i], html[data-theme="dark"] [style*="color: #b91c1c" i] { color: #e8a09a !important; }
html[data-theme="dark"] [style*="color:#92400e" i], html[data-theme="dark"] [style*="color: #92400e" i],
html[data-theme="dark"] [style*="color:#b45309" i], html[data-theme="dark"] [style*="color: #b45309" i],
html[data-theme="dark"] [style*="color:#a16207" i], html[data-theme="dark"] [style*="color: #a16207" i],
html[data-theme="dark"] [style*="color:#78350f" i], html[data-theme="dark"] [style*="color: #78350f" i],
html[data-theme="dark"] [style*="color:#7a5500" i], html[data-theme="dark"] [style*="color: #7a5500" i] { color: #e3c27e !important; }
html[data-theme="dark"] [style*="color:#1e40af" i], html[data-theme="dark"] [style*="color: #1e40af" i],
html[data-theme="dark"] [style*="color:#1d4ed8" i], html[data-theme="dark"] [style*="color: #1d4ed8" i],
html[data-theme="dark"] [style*="color:#2d4a66" i], html[data-theme="dark"] [style*="color: #2d4a66" i],
html[data-theme="dark"] [style*="color:#2d4a63" i], html[data-theme="dark"] [style*="color: #2d4a63" i] { color: #9ec3f0 !important; }
html[data-theme="dark"] [style*="color:#7c3aed" i], html[data-theme="dark"] [style*="color: #7c3aed" i],
html[data-theme="dark"] [style*="color:#6d28d9" i], html[data-theme="dark"] [style*="color: #6d28d9" i] { color: #c4b5fd !important; }

/* ---- Bordes claros inline ---- */
html[data-theme="dark"] [style*="solid #e5e7eb" i], html[data-theme="dark"] [style*="solid #d1d5db" i],
html[data-theme="dark"] [style*="solid #ddd7ce" i], html[data-theme="dark"] [style*="solid #ece3db" i],
html[data-theme="dark"] [style*="solid #e6ddd4" i], html[data-theme="dark"] [style*="solid #eef0f2" i],
html[data-theme="dark"] [style*="solid #e2e8f0" i], html[data-theme="dark"] [style*="solid #f3f4f6" i],
html[data-theme="dark"] [style*="solid #ececec" i] { border-color: var(--qd-border) !important; }
html[data-theme="dark"] [style*="solid #fde68a" i], html[data-theme="dark"] [style*="solid #f2d58a" i] { border-color: #52431f !important; }
html[data-theme="dark"] [style*="solid #c7dfce" i] { border-color: #2f4a3a !important; }
html[data-theme="dark"] [style*="solid #ecc4c0" i], html[data-theme="dark"] [style*="solid #f4b5b0" i],
html[data-theme="dark"] [style*="solid #fecaca" i], html[data-theme="dark"] [style*="solid #e7c4c4" i] { border-color: #503335 !important; }
html[data-theme="dark"] [style*="solid #f6d9c6" i], html[data-theme="dark"] [style*="solid #fad9c2" i],
html[data-theme="dark"] [style*="solid #e6c9b8" i] { border-color: #4a372c !important; }

/* ---- SweetAlert2 (cualquier módulo que lo cargue) ---- */
html[data-theme="dark"] .swal2-popup { background: var(--qd-elevated) !important; color: var(--qd-text) !important; }
html[data-theme="dark"] .swal2-title { color: var(--qd-text) !important; }
html[data-theme="dark"] .swal2-html-container { color: var(--qd-text-muted) !important; }
html[data-theme="dark"] .swal2-footer { border-color: var(--qd-border-soft) !important; color: var(--qd-text-muted) !important; }
html[data-theme="dark"] .swal2-close { color: var(--qd-text-muted) !important; }
html[data-theme="dark"] .swal2-input, html[data-theme="dark"] .swal2-select, html[data-theme="dark"] .swal2-textarea {
  background: var(--qd-surface) !important; color: var(--qd-text) !important; border-color: var(--qd-border) !important;
}