/* Fireflou — clases de componentes. Todo valor sale de tokens.css (var(--…)). */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--surface-canvas); color: var(--ink-body); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }

/* ---------- Tonos complementarios: una clase por módulo ---------- */
.ff-tone-flame   { --t-solid: var(--accent-flame);  --t-ink: var(--accent-ruby);       --t-text: var(--accent-ruby);       --t-surface: var(--accent-flame-glass);  --t-border: var(--accent-flame-border); }
.ff-tone-violet  { --t-solid: var(--tone-violet);   --t-ink: var(--tone-violet-ink);   --t-text: var(--tone-violet-ink);   --t-surface: var(--tone-violet-surface);  --t-border: var(--tone-violet-border); }
.ff-tone-emerald { --t-solid: var(--tone-emerald);  --t-ink: var(--tone-emerald-ink);  --t-text: var(--ink-charcoal);       --t-surface: var(--tone-emerald-surface); --t-border: var(--tone-emerald-border); }
.ff-tone-cobalt  { --t-solid: var(--tone-cobalt);   --t-ink: var(--tone-cobalt-ink);   --t-text: var(--tone-cobalt-ink);   --t-surface: var(--tone-cobalt-surface);  --t-border: var(--tone-cobalt-border); }
.ff-tone-amber   { --t-solid: var(--tone-amber);    --t-ink: var(--tone-amber-ink);    --t-text: var(--ink-charcoal);       --t-surface: var(--tone-amber-surface);   --t-border: var(--tone-amber-border); }
.ff-tone-cyan    { --t-solid: var(--tone-cyan);     --t-ink: var(--tone-cyan-ink);     --t-text: var(--tone-cyan-ink);     --t-surface: var(--tone-cyan-surface);    --t-border: var(--tone-cyan-border); }
.ff-tone-indigo  { --t-solid: var(--tone-indigo);   --t-ink: var(--tone-indigo-ink);   --t-text: var(--tone-indigo-ink);   --t-surface: var(--tone-indigo-surface);  --t-border: var(--tone-indigo-border); }
.ff-tone-carbon  { --t-solid: var(--ink-charcoal);  --t-ink: var(--ink-charcoal);      --t-text: var(--ink-charcoal);      --t-surface: var(--surface-muted-tint);   --t-border: var(--border-strong); }

/* ---------- Foco visible (elegido: el original no lo define) ---------- */
.ff-btn:focus-visible, .ff-chip:focus-visible, .ff-card:focus-visible { outline: 2px solid var(--ink-black); outline-offset: 2px; }

/* ---------- Aura: pétalos difuminados detrás del vidrio ---------- */
.ff-aura {
  background-color: var(--surface-canvas);
  background-image:
    radial-gradient(at 75% 20%, rgba(210, 25, 29, 0.09) 0px, transparent 45%),
    radial-gradient(at 25% 65%, rgba(124, 58, 237, 0.06) 0px, transparent 50%),
    radial-gradient(at 80% 80%, rgba(245, 158, 11, 0.05) 0px, transparent 40%);
}
.ff-grid { background-color: var(--surface-canvas); background-image: radial-gradient(rgba(10, 10, 12, 0.10) 1px, transparent 1px); background-size: 24px 24px; }

/* ---------- Jumbo ---------- */
.ff-jumbo-hero, .ff-jumbo-section, .ff-jumbo-metric { font-family: var(--font-display); font-weight: 800; color: var(--ink-black); margin: 0; }
.ff-jumbo-hero    { font-size: clamp(3.25rem, 6.8vw, 6rem);  line-height: 0.98; letter-spacing: -0.045em; }
.ff-jumbo-section { font-size: clamp(2.5rem, 5vw, 4.5rem);   line-height: 1.02; letter-spacing: -0.04em; }
.ff-jumbo-metric  { font-size: clamp(3rem, 5.5vw, 5rem);     line-height: 0.95; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.ff-jumbo-metric .ff-unit { color: var(--accent-flame); }
.ff-accent-word { position: relative; isolation: isolate; display: inline-block; background: linear-gradient(90deg, var(--accent-ruby) 0%, var(--accent-flou) 50%, var(--accent-flame) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--accent-flou); }
.ff-accent-word::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 12px; background: var(--accent-flame-glass); border-radius: var(--radius-full); transform: rotate(-1deg); z-index: -1; }
.ff-heading-bento { font: 700 clamp(1.75rem, 2.8vw, 2.5rem)/1.12 var(--font-display); letter-spacing: -0.03em; color: var(--ink-black); margin: 0; }
.ff-heading-card  { font: 700 clamp(1.25rem, 1.8vw, 1.5rem)/1.25 var(--font-display); letter-spacing: -0.02em; color: var(--ink-black); margin: 0; }
.ff-body-editorial { font-size: clamp(1.125rem, 1.4vw, 1.375rem); line-height: 1.55; letter-spacing: -0.01em; color: var(--ink-body); max-width: 62ch; margin: 0; }

/* ---------- Botones ---------- */
.ff-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 12px 20px; border: 1px solid transparent; border-radius: var(--radius-lg); font: 600 15px/1.2 var(--font-sans); cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, box-shadow .15s; }
.ff-btn--flame { background: linear-gradient(135deg, var(--accent-flame) 0%, var(--accent-flou) 100%); color: var(--on-accent); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), var(--shadow-cta-flame); }
.ff-btn--flame:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), var(--shadow-accent-red); background: linear-gradient(135deg, var(--accent-flou) 0%, var(--accent-ruby) 100%); }
.ff-btn--obsidian { background: var(--ink-black); color: var(--on-accent); }
.ff-btn--obsidian:hover { background: var(--ink-charcoal); }
.ff-btn--obsidian .ff-arrow { color: var(--accent-flame); }
.ff-btn--glass { background: rgba(255,255,255,0.75); -webkit-backdrop-filter: blur(var(--blur-pill)); backdrop-filter: blur(var(--blur-pill)); border-color: rgba(10,10,12,0.14); color: var(--ink-black); }
.ff-btn--glass:hover { border-color: rgba(210,25,29,0.40); background: rgba(210,25,29,0.04); }
.ff-btn--tint { background: var(--t-surface, var(--accent-flame-glass)); color: var(--t-text, var(--accent-ruby)); border-color: var(--t-border, var(--accent-flame-border)); }
.ff-btn--tint .ff-icon { color: var(--t-ink, var(--accent-ruby)); }
.ff-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- Badges / píldoras ---------- */
.ff-badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1\.5) var(--space-3\.5); border-radius: var(--radius-full); background: var(--t-surface, var(--accent-flame-glass)); border: 1px solid var(--t-border, var(--accent-flame-border)); color: var(--t-text, var(--accent-ruby)); font: 600 12px/1.33 var(--font-sans); letter-spacing: 0.05em; text-transform: uppercase; -webkit-backdrop-filter: blur(var(--blur-pill)); backdrop-filter: blur(var(--blur-pill)); }
.ff-badge .ff-dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--t-solid, var(--accent-flame)); }
.ff-badge .ff-dot--live { animation: ff-pulse 2s ease-in-out infinite; }
@keyframes ff-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ff-badge .ff-dot--live { animation: none; } }
.ff-badge--mono { font-family: var(--font-mono); font-weight: 600; text-transform: none; letter-spacing: 0; }

/* ---------- Tarjetas y niveles de vidrio ---------- */
.ff-card { position: relative; padding: var(--space-6); border-radius: var(--radius-xl); background: linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.68) 100%); -webkit-backdrop-filter: blur(var(--blur-card)) saturate(180%); backdrop-filter: blur(var(--blur-card)) saturate(180%); border: 1px solid var(--border-hairline); box-shadow: var(--shadow-glass-light); transition: box-shadow .2s, border-color .2s; }
.ff-card:hover { box-shadow: var(--shadow-glass-float); border-top-color: var(--t-solid, var(--accent-flame)); }
.ff-card--app { border-radius: var(--radius-lg); }
.ff-card--accent { background: linear-gradient(135deg, rgba(210,25,29,0.09) 0%, rgba(197,5,44,0.03) 100%); -webkit-backdrop-filter: blur(var(--blur-petal)); backdrop-filter: blur(var(--blur-petal)); border-color: rgba(197,5,44,0.18); box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.80); }
.ff-pill-float { display: inline-flex; align-items: center; gap: var(--space-2); padding: 8px var(--space-4); border-radius: var(--radius-full); background: rgba(255,255,255,0.90); -webkit-backdrop-filter: blur(var(--blur-pill)); backdrop-filter: blur(var(--blur-pill)); border: 1px solid rgba(10,10,12,0.10); box-shadow: var(--shadow-pill-float); font: 500 13.5px/1.45 var(--font-sans); color: var(--ink-black); }
.ff-card-stack { position: relative; isolation: isolate; }
.ff-card-stack::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--radius-xl); background: rgba(255,255,255,0.72); border: 1px solid var(--border-hairline); transform: rotate(-1.5deg); }
.ff-card-stack::after { content: ""; position: absolute; right: -10px; top: -10px; width: 72px; height: 72px; z-index: -1; border-radius: var(--radius-xl); background: rgba(210,25,29,0.10); }

/* ---------- Navegación ---------- */
.ff-nav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--space-8); padding: 12px var(--space-8); background: rgba(255,255,255,0.78); -webkit-backdrop-filter: blur(var(--blur-nav)) saturate(180%); backdrop-filter: blur(var(--blur-nav)) saturate(180%); border-bottom: 1px solid rgba(10,10,12,0.07); }
.ff-nav img { height: 40px; width: auto; display: block; }
.ff-nav__links { display: flex; gap: var(--space-6); margin: 0 auto 0 var(--space-4); padding: 0; list-style: none; }
.ff-nav__links a { position: relative; padding: 6px 0; color: var(--ink-charcoal); font: 500 14px/1.2 var(--font-sans); text-decoration: none; }
.ff-nav__links a:hover { color: var(--ink-black); }
.ff-nav__links a[aria-current="page"] { color: var(--ink-black); }
.ff-nav__links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--accent-flame); border-radius: var(--radius-full); }

/* ---------- Chips de acciones del agente ---------- */
.ff-chip { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-lg); background: var(--surface-canvas); border: 1px solid var(--border-hairline); color: var(--ink-black); font: 500 14px/1.3 var(--font-sans); text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.ff-chip:hover { border-color: var(--t-border); background: var(--t-surface); }
.ff-chip__icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-lg); background: var(--t-surface); border: 1px solid var(--t-border); color: var(--t-ink); }
.ff-chip__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Mensajes ---------- */
.ff-chat { background: var(--surface-warm); padding: var(--space-6); display: flex; flex-direction: column; gap: 12px; border-radius: var(--radius-xl); }
.ff-msg { max-width: 78%; padding: 10px 14px; border-radius: var(--radius-lg); font: 500 13.5px/1.45 var(--font-sans); color: var(--ink-black); }
.ff-msg time { display: block; margin-top: 4px; font: 500 12px/1.3 var(--font-sans); color: var(--ink-muted); }
.ff-msg--in { align-self: flex-start; background: var(--surface-canvas); border: 1px solid var(--border-hairline); }
.ff-msg--out { align-self: flex-end; background: var(--tone-emerald-surface); border: 1px solid var(--tone-emerald-border); }
.ff-msg--ai { align-self: flex-end; position: relative; padding-left: 18px; background: rgba(255,255,255,0.88); -webkit-backdrop-filter: blur(var(--blur-card)); backdrop-filter: blur(var(--blur-card)); border: 1px solid var(--border-hairline); box-shadow: var(--shadow-glass-light); }
.ff-msg--ai::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: var(--radius-lg) 0 0 var(--radius-lg); background: linear-gradient(180deg, var(--accent-flou), var(--tone-violet)); }
.ff-msg--ai .ff-badge { margin-bottom: 8px; text-transform: none; letter-spacing: 0; font-size: 12px; }

/* ---------- Nodos de flujo ---------- */
.ff-canvas { padding: var(--space-8); border: 1px solid var(--border-hairline); border-radius: var(--radius-xl); }
.ff-node { position: relative; width: 220px; padding: 12px 14px 12px 18px; border-radius: var(--radius-lg); background: rgba(255,255,255,0.92); -webkit-backdrop-filter: blur(var(--blur-pill)); backdrop-filter: blur(var(--blur-pill)); border: 1px solid var(--border-hairline); box-shadow: var(--shadow-glass-light); }
.ff-node::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: var(--radius-lg) 0 0 var(--radius-lg); background: var(--n-bar, var(--ink-black)); }
.ff-node--trigger { --n-bar: var(--ink-black); }
.ff-node--action  { --n-bar: var(--accent-flame); }
.ff-node--agent   { --n-bar: var(--tone-violet); }
.ff-node--router  { --n-bar: var(--tone-cobalt); }
.ff-node--active  { border-color: var(--accent-flame-border); }
.ff-node__kind { font: 600 12px/1.33 var(--font-mono); color: var(--ink-body); margin: 0 0 4px; }
.ff-node__title { font: 600 14px/1.3 var(--font-sans); color: var(--ink-black); margin: 0; }
.ff-node__meta { font: 500 13.5px/1.45 var(--font-sans); color: var(--ink-body); margin: 4px 0 0; }