/* ── Diagnóstico · demo con lo que ya guarda DOSIK (13/10/2026) ─────────────
   static/js/diagnostico_demo.js. Reutiliza la ventana, los controles, el duelo,
   la cinta y los avisos de la demo del Planner (planner_demo.css, pd-*); aquí
   va solo lo suyo: el mapa de calor, los peores equipos y los destellos sobre
   el propio apartado de Diagnóstico. */

/* El panel: duelo · mapa de calor · peores equipos. */
.dd-panel { grid-template-columns: minmax(270px, .9fr) minmax(0, 2fr) minmax(260px, 1.05fr); }
@container (max-width: 1050px) { .dd-panel { grid-template-columns: minmax(0, 1fr); } }
.dd-k .pd-k-par .o b { font-size: 1.6rem; }
.dd-k .pd-k-par b { font-size: 1.3rem; }
#dd-cv { width: 100%; display: block; }
.pd-ley.dd-ok { background: #2ea043; }
.pd-ley.dd-medio { background: #bb8009; }
.pd-ley.dd-mal { background: #da3633; }
.pd-ley.dd-sobre { background: #a371f7; height: 4px; vertical-align: 1px; }

/* Los peores equipos: filas fijas cuyas barras crecen. */
.dd-pareto { display: flex; flex-direction: column; gap: 4px; }
.dd-par-f { display: grid; grid-template-columns: 58px minmax(0, 1fr) 54px 40px; align-items: center; gap: 6px; font-size: .95rem; }
.dd-par-n { font-weight: 700; color: var(--text0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-par-b { height: 9px; border-radius: 5px; background: var(--bg3); overflow: hidden; }
.dd-par-b i { display: block; height: 100%; border-radius: 5px; background: var(--text2); transition: width .35s ease-out; }
.dd-par-b.top i { background: linear-gradient(90deg, #f97316, #fb923c); }
#dd-par-kg .dd-par-b.top i { background: linear-gradient(90deg, #8250df, #a371f7); }
.dd-par-f b { text-align: right; color: var(--text0); font-variant-numeric: tabular-nums; }
.dd-par-f em { font-style: normal; text-align: right; color: var(--text2); font-variant-numeric: tabular-nums; }

/* Sobre el apartado: la cinta (sin el margen lateral del Planner) y el día. */
.dd-cinta { margin: 0 0 14px; }
.dd-cinta-dia { font-weight: 700; color: var(--blue); font-variant-numeric: tabular-nums; font-size: 1.15rem; }

/* Equipos que cambian de nivel y hallazgos nuevos. */
.dg-eq.dd-empeora { animation: dd-empeora 1.2s ease-out; }
.dg-eq.dd-mejora { animation: dd-mejora 1.2s ease-out; }
@keyframes dd-empeora { from { box-shadow: 0 0 0 3px rgba(248,81,73,.75), 0 0 24px rgba(248,81,73,.5); } to { box-shadow: none; } }
@keyframes dd-mejora { from { box-shadow: 0 0 0 3px rgba(63,185,80,.75), 0 0 24px rgba(63,185,80,.5); } to { box-shadow: none; } }
.dg-h.dd-nuevo { animation: dd-nuevo .7s ease-out; }
@keyframes dd-nuevo { from { opacity: 0; transform: translateY(-12px); box-shadow: 0 0 0 2px var(--blue); } to { opacity: 1; transform: none; box-shadow: none; } }
.dd-demo-on .dg-anillo-valor { transition: stroke-dasharray .4s ease-out; }
.dd-demo-on .dg-eq-salud em { transition: width .4s ease-out; }
.pd-aviso.dd-crit { border-left-color: var(--red); }
.pd-aviso.dd-crit > .ti { color: var(--red); }

/* Veredicto: los cinco peores de cada lista. */
.dd-fin-peores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 10px; }
.dd-fin-peores > div { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 10px;
  background: var(--bg1); border: 1px solid var(--border); font-size: 1rem; }
.dd-fin-peores em { font-style: normal; color: var(--text2); margin-bottom: 2px; }
.dd-fin-peores span { display: flex; gap: 6px; align-items: baseline; }
.dd-fin-peores span b { color: var(--text0); min-width: 54px; }
.dd-fin-peores small { color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .dd-fin-peores { grid-template-columns: minmax(0, 1fr); } }