/* ===== 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-"]),
/* Sin verde, lima ni turquesa: el manual de marca los prohibe, asi que un icono */
/* sobre ese fondo no puede existir. Lo que sube va en `brand` y lo que baja en  */
/* `warm` (el neutro calido), que si estan aca. */
[class*="bg-blue-"] i:not([class*="text-"]),
[class*="bg-warm"] i:not([class*="text-"]),
[class*="bg-red-"] i:not([class*="text-"]),
[class*="bg-yellow-"] i:not([class*="text-"]),
[class*="bg-amber-"] 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-pink-"] i:not([class*="text-"]) {
  color: white;
}