/* ══════════════════════════════════════════════
   CUMBRE v2 — Tokens + utility classes
   Portados 1:1 desde el prototipo v2 (artifact).

   Este archivo se carga DESPUÉS de style.css en index.html
   para que las utilidades nuevas tengan prelación sin tener
   que reescribir el CSS existente.

   Variables base (--bg, --ink, --terra, --ok, --warn, --bad,
   --rule, --font-*) ya están en :root de style.css.

   Aquí solo añadimos: eyebrow, mono, serif, rule, score-cell
   + escala s-10..s-90, spinner, placeholders y animaciones.
   ══════════════════════════════════════════════ */

/* ── Eyebrow / typographic tags ── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow-ink   { color: var(--ink-2); }
.eyebrow-terra { color: var(--terra); }

.serif { font-family: var(--font-serif); letter-spacing: -0.02em; }
.mono  { font-family: var(--font-mono); }

/* ── Hairlines ── */
.rule     { border-bottom: 1px solid var(--rule); }
.rule-ink { border-bottom: 2px solid var(--ink); }

/* ── Score heatmap cell ── */
.score-cell {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 700;
  color: var(--ink);
}
.s-90 { background: #5e8b50; color: #fff; }
.s-80 { background: #82a76e; color: #fff; }
.s-70 { background: #b7c089; color: var(--ink); }
.s-60 { background: #e3d599; color: var(--ink); }
.s-50 { background: #e8b878; color: var(--ink); }
.s-40 { background: #d99a5a; color: var(--ink); }
.s-30 { background: #c2410c; color: #fff; }
.s-20 { background: #9a3412; color: #fff; }
.s-10 { background: #5a1e08; color: #fff; }

[data-theme="dark"] .s-90 { background: #6f9c5f; }
[data-theme="dark"] .s-80 { background: #5e8b50; }
[data-theme="dark"] .s-70 { background: #4a6b40; }
[data-theme="dark"] .s-60 { background: #5e5a35; color: #fff; }
[data-theme="dark"] .s-50 { background: #7a5d2c; color: #fff; }
[data-theme="dark"] .s-40 { background: #8c5022; color: #fff; }
[data-theme="dark"] .s-30 { background: #a8420e; }
[data-theme="dark"] .s-20 { background: #7a2a0e; }
[data-theme="dark"] .s-10 { background: #4a1808; }

/* ── Spinner Cumbre ── */
.cumbre-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid var(--rule);
  border-top-color: var(--terra);
  border-radius: 50%;
  animation: cumbre-spin 0.8s linear infinite;
}
@keyframes cumbre-spin { to { transform: rotate(360deg); } }

/* ── Placeholder mapa / topo (cuando aún no carga) ── */
.placeholder-map {
  background:
    repeating-linear-gradient(135deg,
      var(--paper) 0 6px,
      var(--paper-2) 6px 12px);
  border: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
}
.placeholder-map::before {
  content: "MAPA · TOPO";
  position: absolute;
  top: 8px; left: 10px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--ink-3);
}

/* ── No scrollbar ── */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* ── Fade-in suave ── */
@keyframes cumbre-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: cumbre-fade 0.25s ease both; }