/* Generado por scripts/sync-ds.mjs desde vendor/fluxing-ds. No editar: cambiar el origen y volver a generar. */

/* ---------- base ---------- */
.fx-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.fx-num { font-variant-numeric: tabular-nums; }

/* ---------- icon ---------- */
.fx-icon { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- brand mark (single-ink SVG via mask) ---------- */
.fx-brand { display: inline-block; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--fx-mask) center / contain no-repeat; mask: var(--fx-mask) center / contain no-repeat; }
.fx-brand-lg { width: 24px; height: 24px; }

/* ---------- button ---------- */
.fx-btn { display: inline-flex; align-items: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-md); font: 500 14px/1 var(--font-sans); border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s, color .15s; text-decoration: none; }
.fx-btn-primary { background: var(--brand); color: var(--on-brand); }
.fx-btn-primary:hover { background: var(--brand-strong); }
.fx-btn-secondary { background: var(--bg-200); color: var(--ink); border-color: var(--line-300); }
.fx-btn-secondary:hover { background: var(--bg-300); }
.fx-btn-ghost { background: transparent; color: var(--ink-muted); }
.fx-btn-ghost:hover { background: var(--bg-300); color: var(--ink); }
.fx-btn-sm { height: 32px; padding: 0 var(--space-3); font-size: 13px; }
.fx-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- badge ---------- */
.fx-badge { display: inline-flex; align-items: center; gap: var(--space-1); height: 24px; padding: 0 10px; border-radius: var(--radius-pill); font: 500 12px/1 var(--font-sans); border: 1px solid transparent; }
.fx-badge-role { background: var(--violet-soft); color: var(--violet); }
.fx-badge-brand { background: var(--brand-soft); color: var(--brand); }
.fx-badge-flux { background: var(--flux-soft); color: var(--flux); }
.fx-badge-neutral { background: var(--bg-300); color: var(--ink-muted); border-color: var(--line-200); }
.fx-badge-mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.fx-badge .fx-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- eyebrow ---------- */
.fx-eyebrow { font: 500 11px/14px var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); }
.fx-eyebrow-flux { color: var(--flux); }

/* ---------- tabs ---------- */
.fx-tabs { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.fx-tab { display: inline-flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-md); background: transparent; border: 0; color: var(--ink-muted); font: 500 14px/1 var(--font-sans); cursor: pointer; }
.fx-tab:hover { color: var(--ink); background: var(--bg-300); }
.fx-tab[aria-selected="true"] { background: var(--brand-soft); color: var(--brand); }
.fx-tabs-line { gap: var(--space-4); border-bottom: 1px solid var(--line-100); }
.fx-tabs-line .fx-tab { border-radius: 0; height: 44px; padding: 0 2px; box-shadow: inset 0 -2px 0 transparent; }
.fx-tabs-line .fx-tab:hover { background: transparent; }
.fx-tabs-line .fx-tab[aria-selected="true"] { background: transparent; box-shadow: inset 0 -2px 0 var(--brand); }

/* ---------- segmented ---------- */
.fx-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radius-md); background: var(--bg-100); border: 1px solid var(--line-200); }
.fx-seg button { height: 28px; padding: 0 var(--space-3); border-radius: var(--radius-sm); border: 0; background: transparent; color: var(--ink-muted); font: 600 12px/1 var(--font-sans); cursor: pointer; }
.fx-seg button[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); }

/* ---------- stat card ---------- */
.fx-stat { position: relative; display: flex; flex-direction: column; gap: var(--space-2); min-height: 116px; padding: var(--space-5); border-radius: var(--radius-lg); background: var(--bg-200); border: 1px solid var(--line-200); box-shadow: var(--shadow-card); overflow: hidden; }
.fx-stat-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); color: var(--ink-muted); font: 400 13px/18px var(--font-sans); }
.fx-stat-value { font: 600 26px/32px var(--font-sans); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.fx-stat-note { font: 400 12px/16px var(--font-sans); color: var(--ink-muted); }
.fx-stat-trace { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 10px); opacity: .5; }
.fx-tone-income { color: var(--data-income); }
.fx-tone-net { color: var(--data-net); }
.fx-tone-expense { color: var(--data-expense); }
.fx-tone-fee { color: var(--data-fee); }
.fx-tone-funding { color: var(--data-funding); }
.fx-tone-provider { color: var(--data-provider); }
.fx-tone-pending { color: var(--data-pending); }
.fx-tone-brand { color: var(--brand); }
.fx-stat-spark { padding-bottom: 52px; }
.fx-spark { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 48px; display: block; }
.fx-delta { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); font: 600 12px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.fx-delta-up { color: var(--data-income); background: color-mix(in srgb, var(--data-income) 12%, transparent); }
.fx-delta-dn { color: var(--data-expense); background: color-mix(in srgb, var(--data-expense) 12%, transparent); }
.fx-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }

/* ---------- flow node ---------- */
.fx-node { display: flex; align-items: center; gap: var(--space-3); height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-md); background: var(--bg-200); border: 1px solid var(--line-200); color: var(--ink); font: 500 14px/1 var(--font-sans); white-space: nowrap; }
.fx-node .fx-icon, .fx-node .fx-brand { color: var(--ink-muted); width: 16px; height: 16px; }
.fx-node-sub { display: block; margin-top: 4px; font-weight: 400; font-size: 12px; color: var(--ink-muted); }
.fx-node-tall { height: auto; padding: 12px var(--space-4); }
.fx-node-active { background: var(--flux-soft); border-color: color-mix(in srgb, var(--flux) 55%, var(--line-200)); }
.fx-node-active .fx-icon, .fx-node-active .fx-brand { color: var(--flux); }
.fx-node-hub { flex-direction: column; justify-content: center; gap: 6px; height: auto; min-width: 200px; padding: var(--space-5) var(--space-6); background: var(--bg-100); border-color: var(--flux); box-shadow: var(--glow-flux); font: 600 20px/1.1 var(--font-sans); text-align: center; }
.fx-node-hub .fx-eyebrow { color: var(--flux); }

/* ---------- flow diagram ---------- */
.fx-flow { position: relative; padding: var(--space-4) 0; }
.fx-flow-cols { position: relative; z-index: 1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-7); align-items: stretch; }
.fx-flow-col { display: grid; grid-template-rows: auto 1fr; gap: var(--space-6); }
.fx-flow-col > .fx-eyebrow { text-align: center; min-height: 14px; }
.fx-flow-nodes { display: flex; flex-direction: column; gap: var(--space-5); justify-content: center; align-items: stretch; }
/* Hasta 1023px el diagrama se apila: en columnas, los nodos nowrap y el min-width del hub desbordan en tablet. */
@media (max-width: 1023px) {
  .fx-flow-cols { grid-auto-flow: row; grid-auto-columns: auto; gap: var(--space-7); }
  .fx-flow-col { gap: var(--space-3); }
  .fx-flow-nodes { gap: var(--space-3); }
  .fx-node { white-space: normal; }
}
.fx-flow-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; pointer-events: none; }
.fx-wire { fill: none; stroke: var(--line-300); stroke-width: 1.25; stroke-dasharray: 2 5; stroke-linecap: round; }
.fx-wire-live { stroke: var(--flux); stroke-dasharray: 2 5; animation: fx-flow 1.2s linear infinite; }
.fx-wire-dot { fill: var(--flux); }
@keyframes fx-flow { to { stroke-dashoffset: -14; } }

/* ---------- neural background: layered graph + forward-pass current ---------- */
.fx-net, .fx-bus { position: relative; isolation: isolate; background-color: var(--bg-000);
  background-image: radial-gradient(ellipse 70% 55% at 50% 0%, color-mix(in srgb, var(--flux) 9%, transparent), transparent 70%); }
.fx-net-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: hidden; }
.fx-net-edge { fill: none; stroke: var(--trace); stroke-width: 1; }
.fx-net-node { fill: var(--bg-000); stroke: var(--trace-strong); stroke-width: 1; }
.fx-net-hub { stroke: var(--flux); stroke-opacity: .6; }
.fx-net-lit { fill: var(--flux); }
.fx-net-ring { fill: none; stroke: var(--flux); stroke-width: 1; }
.fx-net-core { fill: var(--flux); }
.fx-cur-glow, .fx-cur-tail, .fx-cur-mid, .fx-cur-head { fill: none; stroke: var(--flux); stroke-linecap: round; }
.fx-cur-glow { stroke-width: 7; opacity: .25; filter: blur(3px); }
.fx-cur-tail { stroke-width: 1.25; opacity: .22; }
.fx-cur-mid { stroke-width: 1.75; opacity: .55; }
.fx-cur-head { stroke-width: 2.25; }
.fx-net-content, .fx-bus-content { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .fx-wire-live { animation: none; } .fx-net-anim { display: none; } }

/* ---------- site layout ---------- */
.fx-container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 var(--space-5); }
.fx-section { padding: var(--space-8) 0; }
.fx-section-head { display: flex; flex-direction: column; gap: var(--space-3); max-width: 720px; margin-bottom: var(--space-7); }
.fx-section-head h2 { margin: 0; }
.fx-section-center .fx-section-head { margin-left: auto; margin-right: auto; text-align: center; align-items: center; }
.fx-lead { margin: 0; color: var(--ink-muted); font-size: 17px; line-height: 27px; }
@media (max-width: 640px) { .fx-section { padding: var(--space-7) 0; } .fx-section-head { margin-bottom: var(--space-6); } }

/* ---------- card ---------- */
.fx-card { padding: var(--space-5); border-radius: var(--radius-lg); background: var(--bg-200); border: 1px solid var(--line-200); box-shadow: var(--shadow-card); }
/* ink-faint sobre bg-200 da 4.25:1; en tarjetas el texto chico usa ink-muted para llegar a AA */
.fx-card .fx-eyebrow:not(.fx-eyebrow-flux), .fx-card .text-ink-faint { color: var(--ink-muted); }

/* ---------- form ---------- */
.fx-field { display: flex; flex-direction: column; gap: var(--space-2); }
.fx-field label { font: 500 13px/18px var(--font-sans); color: var(--ink); }
.fx-input { width: 100%; height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-sm); background: var(--bg-100); border: 1px solid var(--line-300); color: var(--ink); font: 400 15px/23px var(--font-sans); }
.fx-input::placeholder { color: var(--ink-faint); }
.fx-input[aria-invalid="true"] { border-color: var(--danger); }
.fx-textarea { height: auto; min-height: 112px; padding: var(--space-3); resize: vertical; }
.fx-field-error { margin: 0; font: 400 13px/18px var(--font-sans); color: var(--danger); }
.fx-field-hint { margin: 0; font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }

/* ---------- dialog ---------- */
/* margin: auto repone el centrado nativo de <dialog>, que un reset global de margin (el preflight de Tailwind) anula. */
.fx-dialog { margin: auto; width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--bg-100); color: var(--ink); border: 1px solid var(--line-200); box-shadow: var(--shadow-card); overflow: auto; }
.fx-dialog::backdrop { background: color-mix(in srgb, var(--bg-000) 80%, transparent); }
.fx-dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-5); }
.fx-dialog-head h2 { margin: 0; }
.fx-dialog-wide { width: min(880px, calc(100vw - 32px)); }

/* ---------- accordion ---------- */
.fx-accordion { display: flex; flex-direction: column; border-top: 1px solid var(--line-100); }
.fx-accordion-item { border-bottom: 1px solid var(--line-100); }
.fx-accordion-item summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-5) 0; cursor: pointer; list-style: none; }
.fx-accordion-item summary::-webkit-details-marker { display: none; }
.fx-accordion-item summary h3 { margin: 0; }
.fx-accordion-item summary .fx-icon { color: var(--ink-muted); transition: transform .15s; }
.fx-accordion-item[open] summary .fx-icon { transform: rotate(180deg); }
.fx-accordion-item p { margin: 0 0 var(--space-5); color: var(--ink-muted); max-width: 72ch; }
@media (prefers-reduced-motion: reduce) { .fx-accordion-item summary .fx-icon { transition: none; } }