/* Compatibilidad para clases generadas dinamicamente por JavaScript. */
.col-span-full{grid-column:1 / -1}
.bg-orange-100{--tw-bg-opacity:1;background-color:rgb(255 237 213 / var(--tw-bg-opacity, 1))}
.bg-emerald-100{--tw-bg-opacity:1;background-color:rgb(209 250 229 / var(--tw-bg-opacity, 1))}
.bg-red-50{--tw-bg-opacity:1;background-color:rgb(254 242 242 / var(--tw-bg-opacity, 1))}
.text-orange-700{--tw-text-opacity:1;color:rgb(194 65 12 / var(--tw-text-opacity, 1))}
.text-emerald-700{--tw-text-opacity:1;color:rgb(4 120 87 / var(--tw-text-opacity, 1))}

/* Modo oscuro: capa compatible con Tailwind local y contenido renderizado por JavaScript. */
.theme-toggle{
  background:#ffffff;
  color:#334155;
  border-color:#cbd5e1;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.theme-toggle:hover{background:#f8fafc;box-shadow:0 4px 14px rgba(15,23,42,.10)}

body.theme-dark{
  background:#020617;
  color:#e2e8f0;
}
body.theme-dark .theme-toggle{
  background:#0f172a;
  color:#f8fafc;
  border-color:#334155;
}
body.theme-dark .theme-toggle:hover{
  background:#1e293b;
  box-shadow:0 4px 18px rgba(0,0,0,.35);
}

body.theme-dark .bg-white,
body.theme-dark .bg-slate-50,
body.theme-dark .bg-slate-100{
  background-color:#0f172a !important;
}
body.theme-dark main,
body.theme-dark .flex-1.overflow-y-auto{
  background:#020617 !important;
}
body.theme-dark header,
body.theme-dark .card-shadow,
body.theme-dark .rounded-xl,
body.theme-dark .rounded-2xl{
  border-color:#1e293b !important;
}
body.theme-dark header{
  background:#0f172a !important;
  box-shadow:0 1px 0 rgba(148,163,184,.12);
}
body.theme-dark .card-shadow{
  box-shadow:0 10px 28px rgba(0,0,0,.32);
}

body.theme-dark .border,
body.theme-dark .border-b,
body.theme-dark .border-slate-200,
body.theme-dark .border-slate-300,
body.theme-dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]){
  border-color:#1e293b !important;
}

body.theme-dark .text-slate-800,
body.theme-dark .text-slate-900,
body.theme-dark .text-slate-700,
body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark h4,
body.theme-dark h5{
  color:#f8fafc !important;
}
body.theme-dark .text-slate-600,
body.theme-dark .text-slate-500{
  color:#cbd5e1 !important;
}
body.theme-dark .text-slate-400{
  color:#94a3b8 !important;
}

body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea{
  background:#020617 !important;
  color:#e2e8f0 !important;
  border-color:#334155 !important;
}
body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder{
  color:#64748b !important;
}
body.theme-dark input[type="color"]{
  background:#0f172a !important;
}
body.theme-dark input[type="file"]::file-selector-button{
  background:#1e293b;
  color:#f8fafc;
  border:0;
}

body.theme-dark table{
  color:#e2e8f0;
}
body.theme-dark thead,
body.theme-dark th{
  background:#111827 !important;
  color:#cbd5e1 !important;
}
body.theme-dark tbody tr{
  background:#0f172a;
}
body.theme-dark tbody tr:hover{
  background:#111827;
}

body.theme-dark .bg-slate-800{
  background-color:#334155 !important;
}
body.theme-dark .hover\:bg-slate-900:hover,
body.theme-dark .hover\:bg-slate-800:hover{
  background-color:#475569 !important;
}
body.theme-dark .bg-red-50{
  background-color:rgba(127,29,29,.28) !important;
}
body.theme-dark .bg-orange-100{
  background-color:rgba(154,52,18,.25) !important;
}
body.theme-dark .bg-emerald-100{
  background-color:rgba(6,78,59,.32) !important;
}

body.theme-dark .text-blue-700{color:#60a5fa !important}
body.theme-dark .text-cyan-600{color:#22d3ee !important}
body.theme-dark .text-emerald-600,
body.theme-dark .text-emerald-700{color:#34d399 !important}
body.theme-dark .text-red-500,
body.theme-dark .text-red-600{color:#f87171 !important}
body.theme-dark .text-orange-600,
body.theme-dark .text-orange-700{color:#fb923c !important}
body.theme-dark .text-amber-600{color:#fbbf24 !important}
body.theme-dark .text-fuchsia-600{color:#e879f9 !important}
body.theme-dark .text-violet-600{color:#a78bfa !important}
body.theme-dark .text-teal-600{color:#2dd4bf !important}

body.theme-dark #login-screen{
  background:radial-gradient(circle at top,#1e293b 0,#020617 54%,#000 100%) !important;
}
body.theme-dark #login-screen .bg-white,
body.theme-dark #password-modal .bg-white{
  background:#0f172a !important;
  border:1px solid #1e293b;
}
body.theme-dark canvas{
  color-scheme:dark;
}