/*
 * Modo oscuro global.
 *
 * La app usa clases de Tailwind con colores claros fijos (bg-white,
 * text-gray-800, border-gray-200, etc.) en lugar de variantes dark:.
 * Para no tener que editar cada componente, aqui se remapean esas
 * utilidades cuando el elemento <html> tiene la clase .dark.
 *
 * El toggle en Configuracion agrega/quita .dark en <html> a traves del
 * store de tema, por lo que el cambio se aplica al instante sin recargar.
 *
 * Se usa !important porque las utilidades de Tailwind ya son reglas
 * directas y necesitamos ganarles sin depender del orden de inyeccion.
 */

.dark body {
    background-color: #0f172a;
    color: #e5e7eb;
}

/* ---------------------------------------------------------------- */
/* Fondos                                                           */
/* ---------------------------------------------------------------- */
.dark .bg-white {
    background-color: #1e293b !important;
}

.dark .bg-gray-50 {
    background-color: #1e293b !important;
}

.dark .bg-gray-100 {
    background-color: #334155 !important;
}

.dark .bg-gray-200 {
    background-color: #475569 !important;
}

.dark .bg-gray-300 {
    background-color: #64748b !important;
}

/* Hover de fondos claros */
.dark .hover\:bg-gray-50:hover {
    background-color: #334155 !important;
}

.dark .hover\:bg-gray-100:hover {
    background-color: #3f4d63 !important;
}

.dark .hover\:bg-gray-200:hover {
    background-color: #475569 !important;
}

/* Fondos semitransparentes de badges: mantener el color pero oscurecer */
.dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.15) !important; }
.dark .bg-green-50 { background-color: rgba(34, 197, 94, 0.15) !important; }
.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.15) !important; }
.dark .bg-yellow-50 { background-color: rgba(234, 179, 8, 0.15) !important; }

.dark .bg-blue-100 { background-color: rgba(59, 130, 246, 0.2) !important; }
.dark .bg-green-100 { background-color: rgba(34, 197, 94, 0.2) !important; }
.dark .bg-red-100 { background-color: rgba(239, 68, 68, 0.2) !important; }
.dark .bg-yellow-100 { background-color: rgba(234, 179, 8, 0.2) !important; }
.dark .bg-orange-100 { background-color: rgba(249, 115, 22, 0.2) !important; }

/* ---------------------------------------------------------------- */
/* Texto                                                            */
/* ---------------------------------------------------------------- */
.dark .text-gray-900 { color: #f1f5f9 !important; }
.dark .text-gray-800 { color: #e2e8f0 !important; }
.dark .text-gray-700 { color: #cbd5e1 !important; }
.dark .text-gray-600 { color: #94a3b8 !important; }
.dark .text-gray-500 { color: #94a3b8 !important; }
.dark .text-gray-400 { color: #64748b !important; }

.dark .hover\:text-gray-900:hover { color: #f1f5f9 !important; }
.dark .hover\:text-gray-600:hover { color: #94a3b8 !important; }

/* Texto oscuro casi negro que quedaria invisible */
.dark .text-black { color: #e5e7eb !important; }

/* ---------------------------------------------------------------- */
/* Bordes                                                           */
/* ---------------------------------------------------------------- */
.dark .border-gray-200 { border-color: #334155 !important; }
.dark .border-gray-300 { border-color: #475569 !important; }
.dark .border-gray-100 { border-color: #263244 !important; }
.dark .border-gray-50 { border-color: #263244 !important; }

.dark .hover\:border-gray-300:hover { border-color: #64748b !important; }

/* ---------------------------------------------------------------- */
/* Inputs, selects y textareas                                      */
/* ---------------------------------------------------------------- */
.dark input,
.dark select,
.dark textarea {
    background-color: #0f172a !important;
    color: #e5e7eb !important;
    border-color: #475569 !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: #64748b !important;
}

/* Botones de archivo (input type=file) */
.dark .file\:bg-blue-50::file-selector-button {
    background-color: rgba(59, 130, 246, 0.2) !important;
}

/* ---------------------------------------------------------------- */
/* Iconos SVG con relleno negro fijo                                */
/* ---------------------------------------------------------------- */
/* Muchos iconos (icon.js, boton hamburguesa, buscador) usan un fill
   negro fijo por atributo. En oscuro serian casi invisibles, asi que
   los aclaramos. Solo afecta a los que son negros; los de color
   (verde/rojo/azul) tienen otro valor de fill y no coinciden. */
.dark svg[fill="#000000"],
.dark svg[fill="#000"],
.dark svg[fill="black"],
.dark svg[fill="#000000"] path,
.dark svg[fill="#000"] path,
.dark svg[fill="black"] path {
    fill: #e5e7eb !important;
}

/* Iconos que heredan el color del texto (stroke/fill currentColor).
   Al aclarar el texto general ya se ven; reforzamos por si el
   contenedor no define color. */
.dark svg[stroke="currentColor"] {
    color: #cbd5e1;
}

/* Gris oscuro usado en algunos iconos inline que quedaria ilegible */
.dark svg[fill="#374151"],
.dark svg[fill="#374151"] path {
    fill: #cbd5e1 !important;
}

/* ---------------------------------------------------------------- */
/* Bordes por defecto (border sin color = currentColor)             */
/* ---------------------------------------------------------------- */
/* En Tailwind v4 un `border` sin color usa currentColor. Como ya
   aclaramos el color del texto, esos bordes se aclaran solos. No se
   fuerza color aqui para no pisar bordes de colores (border-blue-500,
   etc.). Solo tratamos separadores neutros. */

/* hr y divisores */
.dark hr {
    border-color: #334155 !important;
}
.dark .divide-x > * + *,
.dark .divide-y > * + * {
    border-color: #334155 !important;
}

/* ---------------------------------------------------------------- */
/* Puntos / bullets / textos negros literales                      */
/* ---------------------------------------------------------------- */
/* Texto negro por color inline (style="color:#000...") en algunos
   spans/parrafos: se fuerza claro para legibilidad. */
.dark [style*="color:#000"],
.dark [style*="color: #000"],
.dark [style*="color:black"],
.dark [style*="color: black"] {
    color: #e5e7eb !important;
}

/* Color de texto base heredable: cualquier texto SIN clase de color de
   Tailwind (que por defecto seria negro) heredara este color claro.
   No se ponen reglas por-elemento para no pisar las utilidades .text-*. */
.dark body,
.dark #app {
    color: #e2e8f0;
}

/* ---------------------------------------------------------------- */
/* Iconos FontAwesome negros                                        */
/* ---------------------------------------------------------------- */
/* Los <i> de FontAwesome heredan color; si no tienen clase de color
   Tailwind, toman el color del texto (ya aclarado). Reforzamos los
   que quedan en negro puro. */
.dark i[style*="color:#000"],
.dark i[style*="color: #000"] {
    color: #e5e7eb !important;
}

/* ---------------------------------------------------------------- */
/* Sombras un poco mas marcadas en oscuro                           */
/* ---------------------------------------------------------------- */
.dark .shadow-sm,
.dark .shadow,
.dark .shadow-md,
.dark .shadow-lg,
.dark .shadow-xl {
    --tw-shadow-color: rgba(0, 0, 0, 0.6);
}

/* Overlay negro del sidebar en movil ya es oscuro, se deja igual. */