/* Finaz C09-B — Design tokens (dark strict per brief §3) */

:root {
  /* Surfaces */
  --bg: #0F1115;
  --surface-1: #171A21;
  --surface-2: #1E222B;
  --surface-3: #262A33;
  --border: #2C3140;
  --border-strong: #3A4051;

  /* Text */
  --fg: #E8EAF0;
  --fg-muted: #A0A7B8;
  --fg-faint: #6B7385;

  /* Semantic voices (heredadas C04-A) */
  --signal-driver: #6BA3FF;     /* azul vivo — dato observado */
  --signal-loading: #9CB4D8;    /* azul apagado — carga factorial estimada (NUEVO C09-B) */
  --signal-hypothesis: #E5B873; /* ámbar — hipótesis / divergencia */
  --signal-underclaim: #E07A5F; /* terracota — underclaim */
  --signal-mastery: #5BC68F;    /* verde — mastery */
  --signal-fail: #E15B5B;       /* rojo — fail */
  --peer-color: #8B7FE0;        /* índigo — peer review (NUEVO C09-B) */
  --peer-color-muted: #2C2748;

  /* Voces narrativas */
  --voice-sofia: #C8A3E5;
  --voice-mateo: #7FCCB5;
  --voice-tutor: #6BA3FF;

  /* Tipografía */
  --font-sans: "Inter Tight", -apple-system, system-ui, sans-serif;
  --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Radii */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* Density (Tweak) */
  --density: 1;
  --pad-base: calc(12px * var(--density));
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Reset native form controls */
button { font: inherit; color: inherit; }

/* Common atomic styles for slot interior */
.fz-slot {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.fz-slot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-1);
  flex-shrink: 0;
}

.fz-slot-header h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.fz-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.fz-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-mono);
  background: var(--surface-3);
  color: var(--fg-muted);
  border: 1px solid var(--border);
}

.fz-chip-amber {
  background: rgba(229, 184, 115, 0.12);
  color: var(--signal-hypothesis);
  border-color: rgba(229, 184, 115, 0.35);
}

.fz-chip-green {
  background: rgba(91, 198, 143, 0.12);
  color: var(--signal-mastery);
  border-color: rgba(91, 198, 143, 0.35);
}

.fz-chip-peer {
  background: rgba(139, 127, 224, 0.14);
  color: var(--peer-color);
  border-color: rgba(139, 127, 224, 0.4);
}

.fz-mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }
.fz-serif { font-family: var(--font-serif); }

/* Scrollbar styling */
.fz-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.fz-scroll::-webkit-scrollbar-track { background: transparent; }
.fz-scroll::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 4px;
}
.fz-scroll::-webkit-scrollbar-thumb:hover { background: #4a5168; }

/* Button atoms */
.fz-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--fg);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.fz-btn:hover { background: var(--surface-3); border-color: var(--border-strong); }
.fz-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.fz-btn-primary {
  background: var(--signal-driver);
  border-color: var(--signal-driver);
  color: #0a1220;
}
.fz-btn-primary:hover { background: #85b6ff; }
.fz-btn-mastery {
  background: var(--signal-mastery);
  border-color: var(--signal-mastery);
  color: #0a1a12;
}
.fz-btn-ghost {
  background: transparent;
  border-color: transparent;
}
.fz-btn-ghost:hover { background: var(--surface-2); }

/* Tab atoms */
.fz-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
}
.fz-tab {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  border: none;
  color: var(--fg-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 120ms, border-color 120ms;
}
.fz-tab:hover { color: var(--fg); }
.fz-tab[data-active="true"] {
  color: var(--signal-driver);
  border-bottom-color: var(--signal-driver);
}

/* KaTeX-ish display formula (we render as styled text, no real KaTeX needed for prototype) */
.fz-formula {
  font-family: "Computer Modern Serif", var(--font-serif);
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0.01em;
  line-height: 1.6;
}
.fz-formula em { font-style: italic; }
.fz-formula sub { font-size: 0.7em; vertical-align: -0.2em; font-style: normal; }
.fz-formula .op { color: var(--fg-muted); font-style: normal; margin: 0 4px; }
.fz-formula .beta {
  color: var(--signal-loading);
  cursor: pointer;
  border-bottom: 1px dotted var(--signal-loading);
}
.fz-formula .beta:hover { color: var(--fg); }

/* Sparkline mini */
.fz-spark { display: inline-block; vertical-align: middle; }

/* Definition-style label */
.fz-label {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-faint);
  font-weight: 500;
}

/* Number display */
.fz-num {
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.fz-num-loading { color: var(--signal-loading); }
.fz-num-driver { color: var(--signal-driver); }
.fz-num-big { font-size: 28px; font-weight: 500; letter-spacing: -0.02em; }
.fz-num-xl { font-size: 42px; font-weight: 500; letter-spacing: -0.03em; }

/* Banner */
.fz-banner {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  border: 1px solid;
  font-size: 13px;
  line-height: 1.5;
}
.fz-banner-amber {
  background: rgba(229, 184, 115, 0.08);
  border-color: rgba(229, 184, 115, 0.3);
  color: var(--signal-hypothesis);
}
.fz-banner-terracotta {
  background: rgba(224, 122, 95, 0.08);
  border-color: rgba(224, 122, 95, 0.3);
  color: var(--signal-underclaim);
}
.fz-banner-peer {
  background: rgba(139, 127, 224, 0.08);
  border-color: rgba(139, 127, 224, 0.3);
  color: var(--peer-color);
}

/* Card */
.fz-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.fz-card-pad { padding: 16px; }

/* Density helpers */
[data-density="compact"] { --density: 0.85; }
[data-density="comfy"] { --density: 1.1; }