/* Tarjetas de resumen de ONUs en TEMA OSCURO (21-oct-2026: antes también en claro).
 * Cuando se escribió (9-oct), el módulo OLT era un lienzo oscuro aun sin `html.dark` y los fondos
 * pastel dejaban los números casi invisibles. Hoy el panel sigue el tema (`.theme-adaptive`): en claro
 * las tarjetas usan sus clases pastel con texto oscuro (OnuPanel), y este parche solo afina el oscuro.
 * Si se le quita el `html.dark`, en tema claro vuelven los bloques negros sobre la página blanca. */
html.dark .theme-adaptive.olt-workspace .grid > button.bg-blue-50 {
  --onu-kpi-surface: #112446;
  --onu-kpi-border: #456a9b;
  --onu-kpi-accent: #bfdbfe;
}
html.dark .theme-adaptive.olt-workspace .grid > button.bg-emerald-50 {
  --onu-kpi-surface: #0f2a25;
  --onu-kpi-border: #34775c;
  --onu-kpi-accent: #86efac;
}
html.dark .theme-adaptive.olt-workspace .grid > button.bg-slate-50 {
  --onu-kpi-surface: #202a38;
  --onu-kpi-border: #64748b;
  --onu-kpi-accent: #f1f5f9;
}
html.dark .theme-adaptive.olt-workspace .grid > button.bg-sky-50 {
  --onu-kpi-surface: #102a3c;
  --onu-kpi-border: #377494;
  --onu-kpi-accent: #7dd3fc;
}
html.dark .theme-adaptive.olt-workspace .grid > button.bg-amber-50 {
  --onu-kpi-surface: #342915;
  --onu-kpi-border: #92712d;
  --onu-kpi-accent: #fde68a;
}

html.dark .theme-adaptive.olt-workspace .grid > button:is(.bg-blue-50, .bg-emerald-50, .bg-slate-50, .bg-sky-50, .bg-amber-50) {
  min-width: 0;
  min-height: 5.25rem;
  background-color: var(--onu-kpi-surface);
  background-image: linear-gradient(145deg, var(--onu-kpi-surface), #0b1426);
  border-color: var(--onu-kpi-border);
  color: #e2e8f0;
  box-shadow: 0 2px 8px rgb(0 0 0 / 16%);
}
html.dark .theme-adaptive.olt-workspace .grid > button:is(.bg-blue-50, .bg-emerald-50, .bg-slate-50, .bg-sky-50, .bg-amber-50) > div > span:first-child {
  color: var(--onu-kpi-accent);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}
html.dark .theme-adaptive.olt-workspace .grid > button:is(.bg-blue-50, .bg-emerald-50, .bg-slate-50, .bg-sky-50, .bg-amber-50) > div > svg {
  color: var(--onu-kpi-accent);
  opacity: .95;
}
html.dark .theme-adaptive.olt-workspace .grid > button:is(.bg-blue-50, .bg-emerald-50, .bg-slate-50, .bg-sky-50, .bg-amber-50) > p {
  color: #e2e8f0;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.25rem;
}
html.dark .theme-adaptive.olt-workspace .grid > button.bg-amber-50 > p > span.text-amber-400 { color: #fde68a; }
html.dark .theme-adaptive.olt-workspace .grid > button.bg-amber-50 > p > span.text-red-400 { color: #fca5a5; }
html.dark .theme-adaptive.olt-workspace .grid > button:is(.bg-blue-50, .bg-emerald-50, .bg-slate-50, .bg-sky-50, .bg-amber-50).ring-1 {
  border-color: var(--onu-kpi-accent);
  box-shadow: 0 0 0 2px var(--onu-kpi-accent), 0 6px 14px rgb(0 0 0 / 22%);
}
html.dark .theme-adaptive.olt-workspace .grid > button:is(.bg-blue-50, .bg-emerald-50, .bg-slate-50, .bg-sky-50, .bg-amber-50):focus-visible {
  outline: 2px solid #f8fafc;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px #1d4ed8;
}
@media (prefers-reduced-motion: reduce) {
  html.dark .theme-adaptive.olt-workspace .grid > button:is(.bg-blue-50, .bg-emerald-50, .bg-slate-50, .bg-sky-50, .bg-amber-50) {
    transition: none;
  }
  html.dark .theme-adaptive.olt-workspace .grid > button:is(.bg-blue-50, .bg-emerald-50, .bg-slate-50, .bg-sky-50, .bg-amber-50):hover {
    transform: none;
  }
}