/* ── Contraste del modo oscuro (portal CRM) ─────────────────────────────────
   Bootstrap 5.3 NO reajusta --bs-light ni --bs-dark cuando el tema es oscuro:
   .bg-light y .table-light siguen casi blancos (#f8f9fa) y .text-dark sigue
   siendo #212529. Mezclados con el color de texto del tema (claro) dejan
   letra clara sobre fondo claro o letra oscura sobre fondo oscuro, y en el
   CRM eso pasa en sitios que se pintan desde JS (menús del chat, resúmenes
   del cliente, cabeceras de tabla) donde no hay una clase que corregir vista
   por vista. Esta hoja es la red de seguridad: se carga de última y garantiza
   que el texto siempre se lea. Si una pantalla necesita otro color, que lo
   declare con las variables --crm-* y no con las utilidades claras. */

/* ── 1. «Texto oscuro» suelto sobre fondo oscuro ───────────────────────────
   Se dejan fuera los badges y botones con fondo propio (p. ej. el clásico
   .badge.bg-warning.text-dark, que sí necesita letra oscura). */
[data-bs-theme="dark"] .crm-body .text-dark:not(.badge):not(.btn):not([class*="bg-"]):not([style*="background"]),
[data-bs-theme="dark"] .crm-body .text-black:not(.badge):not(.btn):not([class*="bg-"]):not([style*="background"]),
[data-bs-theme="dark"] .crm-body .link-dark {
    color: var(--crm-text) !important;
}

/* ── 2. Fondos claros de Bootstrap → superficie del tema ──────────────────── */
[data-bs-theme="dark"] .crm-body .bg-white,
[data-bs-theme="dark"] .crm-body .bg-light,
[data-bs-theme="dark"] .crm-body .text-bg-light,
[data-bs-theme="dark"] .crm-body .table-light {
    background-color: var(--crm-surface-3) !important;
    color: var(--crm-text) !important;
}

/* Las tablas pintan las celdas con sus propias variables, no con background. */
[data-bs-theme="dark"] .crm-body .table-light {
    --bs-table-bg: var(--crm-surface-3);
    --bs-table-color: var(--crm-text);
    --bs-table-border-color: var(--crm-border);
    --bs-table-striped-bg: var(--crm-surface-3);
    --bs-table-striped-color: var(--crm-text);
    --bs-table-active-bg: var(--crm-surface-3);
    --bs-table-active-color: var(--crm-text);
    --bs-table-hover-bg: var(--crm-surface-3);
    --bs-table-hover-color: var(--crm-text);
}
[data-bs-theme="dark"] .crm-body .table-light > :not(caption) > * > *,
[data-bs-theme="dark"] .crm-body thead.table-light th,
[data-bs-theme="dark"] .crm-body thead.table-light td {
    background-color: var(--crm-surface-3) !important;
    color: var(--crm-text) !important;
}

/* ── 3. Fondos blancos escritos a mano en el atributo style ────────────────
   Sin esto, el div se queda blanco y hereda la letra clara del tema. */
[data-bs-theme="dark"] .crm-body [style*="background:#fff"],
[data-bs-theme="dark"] .crm-body [style*="background: #fff"],
[data-bs-theme="dark"] .crm-body [style*="background:white"],
[data-bs-theme="dark"] .crm-body [style*="background: white"],
[data-bs-theme="dark"] .crm-body [style*="background-color:#fff"],
[data-bs-theme="dark"] .crm-body [style*="background-color: #fff"],
[data-bs-theme="dark"] .crm-body [style*="background-color:white"],
[data-bs-theme="dark"] .crm-body [style*="background-color: white"] {
    background: var(--crm-surface) !important;
    color: var(--crm-text) !important;
}

/* ── 4. Vuelta atrás donde el fondo SÍ sigue siendo claro ──────────────────
   .bg-warning y .bg-info no cambian con el tema (amarillo y cian), así que
   ahí dentro la letra tiene que seguir siendo oscura. */
[data-bs-theme="dark"] .crm-body :is(.bg-warning, .bg-info, .text-bg-warning, .text-bg-info) :is(.text-dark, .text-black),
[data-bs-theme="dark"] .crm-body :is(.bg-warning, .bg-info) {
    color: #0f172a !important;
}

/* ── 5. Texto atenuado ─────────────────────────────────────────────────────
   --bs-secondary-color es rgba(173,181,189,.75): sobre las superficies del
   CRM queda demasiado flojo para leer un dato. */
[data-bs-theme="dark"] .crm-body .text-muted,
[data-bs-theme="dark"] .crm-body .text-secondary,
[data-bs-theme="dark"] .crm-body small.text-muted {
    color: var(--crm-text-muted) !important;
}