/* ===== Normalizacion de Font Awesome para Dark Theme ===== */
/* Este archivo reemplaza GRADUALMENTE los hacks con !important de base.html. */
/* A medida que se verifique que los iconos se ven bien, ir eliminando las reglas */
/* inline de base.html que correspondan. */

/* Layout basico — sin !important */
.fas, .far, .fab, .fa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
}

/* Color por defecto: claro sobre fondo oscuro. */
/* Solo aplica si el icono NO tiene una clase text-* de Tailwind. */
i.fas:not([class*="text-"]),
i.far:not([class*="text-"]),
i.fab:not([class*="text-"]),
i.fa:not([class*="text-"]) {
  color: #e2e8f0; /* equivale a text-content / slate-200 */
}

/* Iconos dentro de contenedores con fondo de color -> texto blanco */
/* Solo si no tienen una clase text-* explicita */
[class*="bg-brand"] i:not([class*="text-"]),
[class*="bg-accent"] i:not([class*="text-"]),
[class*="bg-blue-"] i:not([class*="text-"]),
[class*="bg-green-"] i:not([class*="text-"]),
[class*="bg-emerald-"] i:not([class*="text-"]),
[class*="bg-red-"] i:not([class*="text-"]),
[class*="bg-yellow-"] i:not([class*="text-"]),
[class*="bg-purple-"] i:not([class*="text-"]),
[class*="bg-violet-"] i:not([class*="text-"]),
[class*="bg-indigo-"] i:not([class*="text-"]),
[class*="bg-teal-"] i:not([class*="text-"]),
[class*="bg-pink-"] i:not([class*="text-"]) {
  color: white;
}