/* Demo del caso de estudio Production ML Platform (js/components/demos/perf-study.js). Reutiliza .fg-tabs/.fg-chip de demo-flowgenx.css */
.pf { display: grid; gap: 1rem; min-width: 0; }
.pf-note { margin: 0; font-size: 0.86rem; line-height: 1.55; color: var(--muted); max-width: 72ch; } .pf-note.small { font-size: 0.76rem; color: var(--muted2); }
.pf-note code, .pf-foot code { font: 500 0.78rem var(--mono); color: var(--text); }
.pf-ctl { display: grid; gap: 0.6rem; } .pf-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 0.45rem; vertical-align: baseline; }
.pf-chart { background: var(--card); border-radius: 12px; padding: 0.6rem 0.4rem 0.2rem; min-width: 0; } .pf-svg { width: 100%; height: auto; display: block; touch-action: pan-y; }
.pf-grid { stroke: var(--border); stroke-width: 1; } .pf-axis { stroke: var(--border2); stroke-width: 1; } .pf-hline { stroke: var(--muted2); stroke-width: 1; stroke-dasharray: 3 3; }
.pf-tick { font: 400 11px var(--mono); fill: var(--muted2); } .pf-lab { font: 500 11.5px var(--mono); fill: var(--muted); } .pf-mark { stroke-width: 1; stroke-dasharray: 3 4; } .pf-marktxt { font: 500 10.5px var(--mono); }
.pf-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font: 500 0.74rem var(--mono); color: var(--muted); padding: 0.2rem 0.4rem; } .pf-legend i { display: inline-block; width: 18px; height: 3px; border-radius: 2px; margin-right: 0.4rem; vertical-align: middle; }
.pf-readout { background: var(--card); border-radius: 12px; padding: 0.8rem 1rem; overflow-x: auto; } .pf-readout > b { font: 600 0.8rem var(--mono); color: var(--accent); display: block; margin-bottom: 0.5rem; }
.pf table { width: 100%; border-collapse: collapse; font: 400 0.76rem var(--mono); } .pf th { text-align: left; font-weight: 500; color: var(--muted2); padding: 0.3rem 0.6rem 0.3rem 0; border-bottom: 1px solid var(--border); white-space: nowrap; }
.pf td { padding: 0.38rem 0.6rem 0.38rem 0; border-bottom: 1px solid var(--border); color: var(--text); white-space: nowrap; } .pf tr.chosen td { color: var(--accent); }
.pf-table { background: var(--card); border-radius: 12px; padding: 0.7rem 1rem; overflow-x: auto; }
.pf-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.7rem; } .pf-kpis div { background: var(--card); border-radius: 10px; padding: 0.8rem 1rem; display: grid; gap: 0.25rem; }
.pf-kpis b { font: 700 1.15rem var(--mono); color: var(--text); } .pf-kpis span { font-size: 0.74rem; color: var(--muted2); line-height: 1.4; }
.pf-h4 { margin: 0.6rem 0 0; font-size: 1rem; } .pf-h4.first { margin-top: 0; } .pf-empty { padding: 2rem; text-align: center; color: var(--muted2); }
.pf-ledger { display: grid; gap: 0.7rem; } .pf-row { background: var(--card); border-radius: 12px; padding: 0.9rem 1.1rem; border-left: 3px solid var(--border2); display: grid; gap: 0.5rem; min-width: 0; } .pf-row.kept { border-left-color: var(--accent); } .pf-row.rejected { border-left-color: var(--muted2); opacity: 0.9; } .pf-row.base { border-left-color: var(--orange); }
.pf-row-h { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; } .pf-row-h b { font-size: 0.98rem; } .pf-row p { margin: 0; font-size: 0.84rem; line-height: 1.5; color: var(--muted); max-width: none; }
.pf-v { font: 700 0.62rem var(--mono); text-transform: uppercase; letter-spacing: 0.06em; padding: 0.15rem 0.5rem; border-radius: 4px; background: var(--border); color: var(--muted); } .pf-v.kept { background: rgba(65, 143, 251, 0.18); color: var(--accent-b); } .pf-v.base { background: rgba(var(--orange-r), 0.18); color: var(--orange); }
.pf-bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; } .pf-bar i { display: block; height: 100%; border-radius: 3px; }
.pf-nums { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; font: 400 0.74rem var(--mono); color: var(--muted2); } .pf-nums b { color: var(--text); font-weight: 600; } .pf-d { color: var(--accent-b); }
.pf-wf { background: var(--card); border-radius: 12px; padding: 0.8rem 1rem; display: grid; gap: 3px; overflow-x: auto; } .pf-wf-h, .pf-wf-r { display: grid; grid-template-columns: minmax(210px, 0.8fr) minmax(280px, 2fr); gap: 0.8rem; align-items: center; }
.pf-wf-h { font: 500 0.68rem var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted2); padding-bottom: 0.3rem; border-bottom: 1px solid var(--border); margin-bottom: 0.2rem; }
.pf-wf-n { font: 400 0.76rem var(--mono); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pf-wf-t { position: relative; height: 20px; background: rgba(255, 255, 255, 0.03); border-radius: 3px; }
.pf-wf-t i { position: absolute; top: 3px; height: 14px; border-radius: 3px; min-width: 2px; } .pf-wf-t em { position: absolute; right: 4px; top: 2px; font: 400 0.68rem var(--mono); font-style: normal; color: var(--muted); text-shadow: 0 0 4px var(--card); }
.pf-foot { margin: 1.2rem 0 0; font-size: 0.76rem; line-height: 1.55; color: var(--muted2); max-width: 80ch; }
@media (max-width: 640px) { .pf-wf-h, .pf-wf-r { grid-template-columns: minmax(150px, 0.9fr) minmax(220px, 2fr); } .pf-nums { gap: 0.3rem 1rem; } }

/* Móvil: el texto en <code> de las notas no debe ensanchar la página */
.pf code, .pf-note code { overflow-wrap: anywhere; white-space: normal; }
.pf { max-width: 100%; min-width: 0; }
.pf, .pf-ctl { grid-template-columns: minmax(0, 1fr); }
.pf > * { min-width: 0; }