/* Explorador de resultados de FlowGenX (js/components/demos/flowgenx.js) */
.fg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; } .fg-row > div, .fg-scatterbox { min-width: 0; }
.fg-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1rem; }
.fg-h { font: 500 0.7rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin: 0; } .fg-h small { text-transform: none; letter-spacing: 0; color: var(--muted2); }
.fg-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.fg-chip { font: 500 0.72rem var(--mono); color: var(--muted); background: transparent; border: 1px solid var(--border2); border-radius: 999px; padding: 0.3rem 0.75rem; transition: color 0.2s, border-color 0.2s, background 0.2s; }
.fg-chip:hover { color: var(--accent); border-color: var(--accent); } .fg-chip.on { color: #04121f; background: var(--accent); border-color: var(--accent); }
.fg-hint { margin: -0.4rem 0 0; font-size: 0.78rem; color: var(--muted2); }
.fg-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.fg-matrix { display: grid; grid-template-columns: 6.2rem repeat(5, minmax(0, 1fr)); gap: 4px; }
.fg-cell { min-width: 0; display: grid; place-items: center; text-align: center; padding: 0.7rem 0.3rem; border-radius: 8px; font: 500 0.8rem var(--mono); border: 0; color: var(--text); }
.fg-colh { font: 500 0.64rem/1.25 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); background: none; } .fg-rowh { justify-items: start; font: 500 0.72rem var(--mono); color: var(--muted); background: none; }
.fg-empty, .fg-na { background: var(--card); color: var(--muted2); } .fg-na { cursor: pointer; }
.fg-val { cursor: pointer; background: color-mix(in srgb, var(--accent) calc(var(--s) * 78%), var(--card2)); color: color-mix(in srgb, #04121f calc(var(--s) * 100%), var(--text)); transition: transform 0.15s, box-shadow 0.15s; }
.fg-val:hover { transform: translateY(-1px); } .fg-val.sel { box-shadow: 0 0 0 2px var(--text); }
.fg-detail { background: var(--card); border-radius: var(--r); padding: 1.1rem 1.2rem; display: grid; gap: 0.7rem; min-width: 0; }
.fg-detail h4 { margin: 0; font-size: 1.05rem; } .fg-detail h4 small { color: var(--muted2); font-weight: 400; }
.fg-tag { margin: 0; font: 400 0.72rem var(--mono); color: var(--muted2); }
.fg-bar2 { display: grid; grid-template-columns: 5.2rem 1fr 3rem; align-items: center; gap: 0.6rem; font: 400 0.72rem var(--mono); color: var(--muted); position: relative; }
.fg-bar2 i { display: block; height: 6px; border-radius: 3px; background: var(--accent); } .fg-bar2 b { color: var(--text); font-weight: 500; text-align: right; }
.fg-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1rem; margin: 0; }
.fg-dl dt { font: 400 0.64rem var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted2); } .fg-dl dd { margin: 0; font: 500 0.86rem var(--mono); }
.fg-warn { margin: 0; font-size: 0.78rem; line-height: 1.5; color: #fcd34d; }
.fg-tablewrap { overflow-x: auto; border-radius: 10px; background: var(--card); margin-top: 0.5rem; }
.fg-table { width: 100%; border-collapse: collapse; font: 400 0.76rem var(--mono); white-space: nowrap; }
.fg-table th, .fg-table td { padding: 0.5rem 0.75rem; text-align: right; } .fg-table th:nth-child(-n+2), .fg-table td:nth-child(-n+2) { text-align: left; }
.fg-table th button { background: none; border: 0; color: var(--muted); font: 500 0.66rem var(--mono); text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; } .fg-table th button.on { color: var(--accent); }
.fg-table tbody tr { cursor: pointer; } .fg-table tbody tr:hover, .fg-table tbody tr.sel { background: var(--card2); } .fg-table tr:focus-visible { outline: 1px solid var(--accent); }
.fg-sel { display: flex; align-items: center; gap: 0.5rem; font: 500 0.72rem var(--mono); color: var(--muted); }
.fg-sel select { background: var(--bg2); color: var(--text); border: 1px solid var(--border2); border-radius: 6px; padding: 0.35rem 0.5rem; font: inherit; }
.fg-scatterbox { display: grid; gap: 0.6rem; } .fg-scatterbox svg { display: block; width: 100%; height: auto; max-height: 420px; background: var(--bg2); border-radius: 10px; font: 400 10px var(--mono); fill: var(--muted); }
.fg-scatterbox .ax { stroke: var(--border2); } .fg-scatterbox .pt { cursor: pointer; } .fg-scatterbox .pt circle { stroke: var(--bg); stroke-width: 1.5; } .fg-scatterbox .pt.sel circle { stroke: #fff; stroke-width: 2; }
.fg-legend { display: flex; flex-wrap: wrap; gap: 1rem; font: 400 0.72rem var(--mono); color: var(--muted); } .fg-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 0.4rem; }
.fg-note { margin: 0; font-size: 0.74rem; line-height: 1.55; color: var(--muted2); max-width: none; } .fg-note code { font-size: 0.72rem; }
@media (max-width: 900px) { .fg-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .fg-matrix { grid-template-columns: 3.9rem repeat(5, minmax(0, 1fr)); gap: 3px; } .fg-cell { padding: 0.55rem 0.1rem; font-size: 0.66rem; } .fg-colh { font-size: 0.46rem; letter-spacing: 0; overflow-wrap: anywhere; hyphens: auto; min-width: 0; overflow: hidden; } .fg-rowh { font-size: 0.52rem; letter-spacing: -0.02em; } }