/* =========================================================
   Finaz · C04-A — Design System
   Dark-mode-first, densidad alta (Datadog/Linear), tono comité
   ========================================================= */

:root {
  /* superficies — 4 niveles */
  --surface-0: #0A0C10;
  --surface-1: #11141A;
  --surface-2: #181C24;
  --surface-3: #20252F;
  --surface-4: #2A2F3A;

  /* texto */
  --text-primary:   #E8EAED;
  --text-secondary: #A2A9B4;
  --text-tertiary:  #6B7280;
  --text-disabled:  #3F4651;

  /* bordes */
  --border-subtle:  #1F232C;
  --border-default: #2A2F3A;
  --border-strong:  #3F4651;

  /* acento */
  --accent: #6BA3FF;
  --accent-muted: #243556;

  /* semánticos pedagógicos */
  --signal-driver:     #6BA3FF;
  --signal-hypothesis: #F0B86E;
  --signal-warning:    #E07A5F;
  --signal-pass:       #5BC68F;
  --signal-fail:       #D85C5C;

  /* tints muy sutiles (para fondos de banner) */
  --tint-driver:     rgba(107, 163, 255, 0.10);
  --tint-hypothesis: rgba(240, 184, 110, 0.10);
  --tint-warning:    rgba(224, 122, 95, 0.10);
  --tint-pass:       rgba(91, 198, 143, 0.10);
  --tint-fail:       rgba(216, 92, 92, 0.10);

  /* voces */
  --voice-sofia: #C6A1FF;
  --voice-mateo: #F0B86E;
  --voice-tutor: #6BA3FF;

  /* tipografía */
  --font-display: "Inter Tight", "Söhne", "Inter Display", system-ui, sans-serif;
  --font-text:    "Inter", "Söhne", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  --font-serif:   "Source Serif 4", "Source Serif Pro", Georgia, serif;

  /* escala */
  --size-xs:  11px;
  --size-sm:  12.5px;
  --size-md:  14px;
  --size-lg:  16px;
  --size-xl:  20px;
  --size-2xl: 28px;
  --size-3xl: 40px;
  --size-4xl: 56px;

  /* line-height */
  --lh-tight: 1.25;
  --lh-body:  1.5;
  --lh-prose: 1.65;

  /* radii */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;

  /* espacio */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --grid-max: 1400px;
  --rail-width: 220px;
  --tutor-drawer-width: 360px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--surface-0);
  color: var(--text-primary);
  font-family: var(--font-text);
  font-size: var(--size-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* base reset */
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; border-spacing: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }

/* === utility classes === */
.mono  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.serif { font-family: var(--font-serif); }
.italic { font-style: italic; }
.bold   { font-weight: 600; }

.txt-sec { color: var(--text-secondary); }
.txt-ter { color: var(--text-tertiary); }
.txt-xs  { font-size: var(--size-xs); }
.txt-sm  { font-size: var(--size-sm); }
.txt-lg  { font-size: var(--size-lg); }

.row { display: flex; align-items: center; gap: var(--space-2); }
.col { display: flex; flex-direction: column; }

/* === Surfaces === */
.surface-1 { background: var(--surface-1); }
.surface-2 { background: var(--surface-2); }
.surface-3 { background: var(--surface-3); }

.card {
  background: var(--surface-1);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
}

/* === Btn === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--r-md);
  font-size: var(--size-sm);
  font-weight: 500;
  border: 1px solid var(--border-default);
  background: var(--surface-2);
  color: var(--text-primary);
  transition: background .15s, border-color .15s, transform .05s;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-3); border-color: var(--border-strong); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--accent-muted);
  border-color: var(--accent);
  color: var(--accent);
}
.btn-primary:hover { background: rgba(107,163,255,0.18); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text-primary); }
.btn-disabled, .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: var(--size-xs);
  font-weight: 500;
  border: 1px solid var(--border-default);
  background: var(--surface-2);
  color: var(--text-secondary);
  white-space: nowrap;
}
.chip-active { color: var(--accent); border-color: var(--accent); background: var(--accent-muted); }
.chip-driver     { color: var(--signal-driver);     border-color: rgba(107,163,255,0.4); background: var(--tint-driver); }
.chip-hypothesis { color: var(--signal-hypothesis); border-color: rgba(240,184,110,0.4); background: var(--tint-hypothesis); }
.chip-warning    { color: var(--signal-warning);    border-color: rgba(224,122,95,0.4);  background: var(--tint-warning); }
.chip-pass       { color: var(--signal-pass);       border-color: rgba(91,198,143,0.4);  background: var(--tint-pass); }
.chip-fail       { color: var(--signal-fail);       border-color: rgba(216,92,92,0.4);   background: var(--tint-fail); }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--border-default);
  color: var(--text-tertiary);
  background: var(--surface-2);
}

/* === Step rail === */
.step-rail { display: flex; flex-direction: column; gap: 4px; }
.step-rail-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  padding: 10px 8px;
  border-radius: var(--r-md);
  align-items: flex-start;
  cursor: pointer;
  transition: background .15s;
  border-left: 2px solid transparent;
}
.step-rail-item:hover { background: var(--surface-2); }
.step-rail-item.current { background: var(--surface-2); border-left-color: var(--accent); }
.step-rail-item.locked { opacity: 0.45; cursor: not-allowed; }
.step-rail-marker {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 1px solid var(--border-default);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
}
.step-rail-item.current .step-rail-marker {
  background: var(--accent-muted);
  border-color: var(--accent);
  color: var(--accent);
}
.step-rail-item.done .step-rail-marker {
  background: rgba(91,198,143,0.15);
  border-color: var(--signal-pass);
  color: var(--signal-pass);
}
.step-rail-label { font-size: var(--size-sm); font-weight: 500; line-height: 1.2; }
.step-rail-meta  { font-size: 11px; color: var(--text-tertiary); font-family: var(--font-mono); margin-top: 2px; }

/* === Glossary tooltip === */
.glossary-trigger {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border-bottom: 1px dashed rgba(107,163,255,0.45);
  color: var(--signal-driver);
  cursor: help;
}
.glossary-trigger:hover { background: var(--tint-driver); }
.glossary-trigger .i-icon {
  display: inline-grid; place-items: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  font-size: 9px;
  font-family: var(--font-mono);
  background: var(--accent-muted);
  color: var(--signal-driver);
  border: 1px solid rgba(107,163,255,0.35);
}

/* === Voice cards === */
.voice-card {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  margin-bottom: 8px;
}
.voice-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-mono);
  position: relative;
}
.voice-avatar::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  opacity: 0.18;
  z-index: -1;
}
.voice-sofia .voice-avatar { background: rgba(198,161,255,0.18); color: var(--voice-sofia); }
.voice-sofia .voice-avatar::before { background: var(--voice-sofia); }
.voice-mateo .voice-avatar { background: rgba(240,184,110,0.18); color: var(--voice-mateo); }
.voice-mateo .voice-avatar::before { background: var(--voice-mateo); }
.voice-tutor .voice-avatar { background: rgba(107,163,255,0.18); color: var(--voice-tutor); }
.voice-tutor .voice-avatar::before { background: var(--voice-tutor); }

.voice-meta { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; gap: 8px; }
.voice-name { font-weight: 600; font-size: var(--size-sm); }
.voice-cue  { font-size: 11px; color: var(--text-tertiary); font-style: italic; }
.voice-text { font-family: var(--font-serif); font-size: var(--size-md); line-height: var(--lh-prose); color: var(--text-primary); }

.voice-card.playing { border-color: var(--accent); background: linear-gradient(to right, rgba(107,163,255,0.04), transparent); }

/* === Trio card (valor + drivers + delta) === */
.trio-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
}
.trio-value {
  font-family: var(--font-mono);
  font-size: var(--size-2xl);
  font-weight: 500;
  color: var(--signal-driver);
  line-height: 1;
}
.trio-drivers { display: flex; gap: 8px; flex-wrap: wrap; }
.trio-delta { font-size: var(--size-xs); color: var(--text-secondary); font-family: var(--font-mono); }

/* === Table === */
.table {
  width: 100%;
  font-size: var(--size-sm);
}
.table th, .table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
}
.table th {
  font-size: var(--size-xs);
  font-weight: 500;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.table td.num { font-family: var(--font-mono); text-align: right; }

/* === Rubric meter === */
.rubric-row { display: grid; gap: 4px; margin-bottom: 10px; }
.rubric-label {
  display: flex; justify-content: space-between;
  font-size: var(--size-xs);
  color: var(--text-secondary);
}
.rubric-value { font-family: var(--font-mono); }
.rubric-bar {
  height: 6px;
  background: var(--surface-3);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}
.rubric-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .4s ease;
}
.rubric-threshold {
  position: absolute;
  top: -2px; bottom: -2px;
  width: 1px;
  background: var(--text-secondary);
  opacity: 0.6;
}
.rubric-fill.pass { background: var(--signal-pass); }
.rubric-fill.warn { background: var(--signal-hypothesis); }
.rubric-fill.fail { background: var(--signal-warning); }

/* === Banner === */
.banner {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid;
  align-items: start;
}
.banner-icon {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px;
  font-weight: 600;
}
.banner-title { font-size: var(--size-sm); font-weight: 600; margin-bottom: 2px; }
.banner-text  { font-size: var(--size-sm); color: var(--text-secondary); line-height: 1.45; }

.banner-driver     { background: var(--tint-driver);     border-color: rgba(107,163,255,0.3); }
.banner-driver     .banner-icon { background: var(--accent-muted); color: var(--signal-driver); }
.banner-warning    { background: var(--tint-warning);    border-color: rgba(224,122,95,0.3); }
.banner-warning    .banner-icon { background: rgba(224,122,95,0.18); color: var(--signal-warning); }
.banner-hypothesis { background: var(--tint-hypothesis); border-color: rgba(240,184,110,0.3); }
.banner-hypothesis .banner-icon { background: rgba(240,184,110,0.18); color: var(--signal-hypothesis); }
.banner-pass       { background: var(--tint-pass);       border-color: rgba(91,198,143,0.3); }
.banner-pass       .banner-icon { background: rgba(91,198,143,0.18); color: var(--signal-pass); }
.banner-fail       { background: var(--tint-fail);       border-color: rgba(216,92,92,0.3); }
.banner-fail       .banner-icon { background: rgba(216,92,92,0.18); color: var(--signal-fail); }

/* === Watermark === */
.watermark {
  position: absolute;
  bottom: 8px; right: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 6px;
  border: 1px dashed var(--border-default);
  border-radius: var(--r-sm);
  background: rgba(10,12,16,0.7);
  pointer-events: none;
}

/* === Module / Voice geometric glyph (D1 = option 4) === */
.voice-glyph {
  width: 24px; height: 24px;
  border-radius: 50%;
  position: relative;
  display: grid; place-items: center;
}
.voice-glyph::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  opacity: 0.18;
}
.voice-glyph::after {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  position: absolute;
}
.voice-glyph.sofia::before { background: var(--voice-sofia); }
.voice-glyph.sofia::after  { background: var(--voice-sofia); }
.voice-glyph.mateo::before { background: var(--voice-mateo); }
.voice-glyph.mateo::after  { background: var(--voice-mateo); }
.voice-glyph.tutor::before { background: var(--voice-tutor); }
.voice-glyph.tutor::after  { background: var(--voice-tutor); }

/* === Formula block === */
.formula {
  font-family: var(--font-mono);
  background: var(--surface-2);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--accent);
  padding: 12px 16px;
  border-radius: var(--r-md);
  font-size: var(--size-md);
  color: var(--text-primary);
  overflow-x: auto;
  line-height: 1.5;
}
.formula .var { color: var(--signal-driver); }
.formula .op  { color: var(--text-tertiary); }

/* === Sticky areas === */
.sticky-header {
  position: sticky; top: 0;
  background: rgba(10,12,16,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-subtle);
  z-index: 10;
}

/* === Disclaimer footer === */
.disclaimer {
  font-size: var(--size-xs);
  color: var(--text-tertiary);
  padding: 10px 14px;
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-1);
  font-style: italic;
}

/* === Heatmap === */
.heat-grid {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 3px;
}
.heat-cell {
  aspect-ratio: 1;
  border-radius: 2px;
  background: var(--surface-3);
}
.heat-cell.lv1 { background: rgba(107,163,255,0.20); }
.heat-cell.lv2 { background: rgba(107,163,255,0.40); }
.heat-cell.lv3 { background: rgba(107,163,255,0.65); }
.heat-cell.lv4 { background: rgba(107,163,255,0.95); }

/* === Input === */
.input {
  width: 100%;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--size-sm);
  color: var(--text-primary);
  outline: none;
  transition: border-color .15s;
}
.input:focus { border-color: var(--accent); }
.input::placeholder { color: var(--text-tertiary); }

.textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  font-family: var(--font-serif);
  font-size: var(--size-lg);
  line-height: var(--lh-prose);
  color: var(--text-primary);
  outline: none;
  resize: vertical;
  min-height: 200px;
}
.textarea:focus { border-color: var(--accent); }

/* prohibited language highlight in memo */
.prohibited {
  background: rgba(216,92,92,0.18);
  border-bottom: 2px solid var(--signal-fail);
  text-decoration: line-through;
  text-decoration-color: rgba(216,92,92,0.5);
  cursor: pointer;
}

/* === Generic placeholder for assets === */
.placeholder-img {
  background-image: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 8px, var(--surface-3) 8px, var(--surface-3) 16px);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* === Audio player === */
.audio-player {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
}
.audio-play-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--accent-muted);
  color: var(--accent);
  display: grid; place-items: center;
  border: 1px solid var(--accent);
}
.audio-waveform {
  height: 28px;
  display: flex;
  align-items: center;
  gap: 2px;
}
.audio-waveform .bar {
  flex: 1;
  background: var(--border-strong);
  border-radius: 1px;
  min-width: 2px;
}
.audio-waveform .bar.played { background: var(--accent); }
.audio-time { font-family: var(--font-mono); font-size: var(--size-xs); color: var(--text-secondary); }

/* === Misc === */
.divider { height: 1px; background: var(--border-subtle); margin: 16px 0; }

.dot-pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(107,163,255,0.5);
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(107,163,255,0.5); }
  70% { box-shadow: 0 0 0 8px rgba(107,163,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(107,163,255,0); }
}

/* selection */
::selection { background: rgba(107,163,255,0.3); }

/* scrollbar (subtle) */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* artboard root resets to surface-0 */
.artboard-root {
  background: var(--surface-0);
  color: var(--text-primary);
  min-height: 100%;
  position: relative;
  font-family: var(--font-text);
}