/* Transición suave para todos los cambios de color */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Overrides para el Modo Oscuro - Usando selector html.dark-mode para mayor especificidad */
html.dark-mode body {
  background-color: #0f172a !important; /* slate-900 */
  color: #f1f5f9 !important; /* slate-100 */
}

/* Fondos */
html.dark-mode .bg-white,
html.dark-mode .bg-slate-50 {
  background-color: #1e293b !important; /* slate-800 */
}

html.dark-mode .bg-slate-50\/30 {
  background-color: rgba(30, 41, 59, 0.5) !important;
}

html.dark-mode .bg-slate-50\/50 {
  background-color: rgba(30, 41, 59, 0.8) !important;
}

html.dark-mode .bg-slate-100 {
  background-color: #334155 !important; /* slate-700 */
}

html.dark-mode .bg-slate-100\/40 {
  background-color: rgba(51, 65, 85, 0.4) !important;
}

/* Bordes */
html.dark-mode .border-slate-200,
html.dark-mode .border-slate-100,
html.dark-mode .divide-slate-100 > * {
  border-color: #334155 !important; /* slate-700 */
}

/* Textos */
html.dark-mode .text-slate-900,
html.dark-mode .text-slate-800,
html.dark-mode .text-slate-700 {
  color: #f1f5f9 !important;
}

html.dark-mode .text-slate-600,
html.dark-mode .text-slate-500 {
  color: #cbd5e1 !important; /* slate-300 */
}

html.dark-mode .text-slate-400 {
  color: #94a3b8 !important;
}

html.dark-mode .text-slate-300 {
  color: #64748b !important;
}

/* Componentes específicos */
html.dark-mode aside {
  background-color: #0f172a !important;
  border-right-color: #334155 !important;
}

html.dark-mode header {
  background-color: #0f172a !important;
  border-bottom-color: #334155 !important;
}

html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea {
  background-color: #0f172a !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}

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

html.dark-mode .hover\:bg-slate-50:hover,
html.dark-mode .hover\:bg-slate-50\/50:hover {
  background-color: #334155 !important;
}

/* Colores de acento en modo oscuro (suavizados) */
html.dark-mode .bg-indigo-50 {
  background-color: rgba(99, 102, 241, 0.15) !important;
}
html.dark-mode .text-indigo-700,
html.dark-mode .text-indigo-600 {
  color: #a5b4fc !important;
}

html.dark-mode .bg-emerald-50 {
  background-color: rgba(16, 185, 129, 0.15) !important;
}
html.dark-mode .text-emerald-700,
html.dark-mode .text-emerald-600 {
  color: #6ee7b7 !important;
}

html.dark-mode .bg-amber-50 {
  background-color: rgba(245, 158, 11, 0.15) !important;
}
html.dark-mode .text-amber-700,
html.dark-mode .text-amber-600 {
  color: #fcd34d !important;
}

html.dark-mode .bg-purple-50 {
  background-color: rgba(168, 85, 247, 0.15) !important;
}
html.dark-mode .text-purple-700,
html.dark-mode .text-purple-600 {
  color: #d8b4fe !important;
}

html.dark-mode .bg-red-50 {
  background-color: rgba(239, 68, 68, 0.15) !important;
}
html.dark-mode .text-red-700 {
  color: #fca5a5 !important;
}

/* Ajustes para el Dashboard (Recharts) en modo oscuro */
html.dark-mode .recharts-cartesian-grid-horizontal line,
html.dark-mode .recharts-cartesian-grid-vertical line {
  stroke: #334155;
}

html.dark-mode .recharts-text {
  fill: #94a3b8 !important;
}

html.dark-mode .recharts-tooltip-cursor {
  fill: #334155 !important;
  opacity: 0.4;
}