/* Identidad compartida (15 §5 U1): el simulador hereda la paleta terrosa canónica
   desde el ÚNICO origen de verdad, una carpeta por encima (raíz del sitio). */
@import url("../assets/css/tokens.css");

:root {
  /* ── Chasis: remapeado a la identidad compartida (15 §5 U1) ─────────── */
  --bg:     var(--crema);    /* era #f7f5f0 → ahora la crema canónica */
  --panel:  #ffffff;
  --ink:    var(--tierra);   /* era #2b2a26 */
  --muted:  var(--tierra-2); /* era #6b675e */
  --line:   var(--linea);    /* era #e3ddd1 */
  --accent: var(--arcilla);  /* era el azul #2b6cb0 → arcilla cálida compartida */

  /* ── Semánticos DIDÁCTICOS propios del simulador — NO se tocan (13 §4) ─
     enseñan metro (núcleo, no elegible) vs. valor (propiedad del nodo). Son
     una lección, no decoración: por eso quedan fuera de la identidad común. */
  --valor: #3a7d5d;      /* slider de valor: editable */
  --valor-bg: #eaf3ee;
  --metro: #8a6d3b;      /* candado de metro: núcleo */
  --metro-bg: #f3ecdd;
  --ok: #2f7a44;
  --bad: #b23b3b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.45;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 24px 20px 64px; }

/* ── Cromado de marca + retorno al sitio (15 §5 U2) ───────────────────────
   Misma identidad que el header institucional (logo + marca serif), con un
   camino de vuelta explícito. Cierra E5.3 del doc 14. */
.sim-topbar {
  display: flex; align-items: center; gap: 10px;
  margin: -8px 0 18px; padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
}
.sim-topbar:hover { color: var(--accent); }
.sim-topbar:hover .back b { color: var(--accent); }
.sim-topbar img { width: 34px; height: 34px; object-fit: contain; flex: 0 0 auto; }
.sim-topbar .back { font-family: var(--font-serif); font-size: 0.98rem; }
.sim-topbar .back b { font-weight: 700; color: var(--ink); }
.sim-topbar .crumb {
  margin-left: auto; color: var(--muted); font-size: 0.8rem;
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px;
}
@media (max-width: 560px) {
  .sim-topbar .back { font-size: 0.9rem; }
  .sim-topbar .crumb { display: none; }
}

header h1 { font-size: 1.5rem; margin: 0 0 4px; }
header .sub { color: var(--muted); margin: 0 0 16px; }

.scope-label {
  background: #fff8e6;
  border: 1px solid #e9d9a8;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.86rem;
  color: #6a5a2a;
  margin-bottom: 20px;
}
.scope-label strong { color: #4f4319; }

.layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }

/* ── Presets ─────────────────────────────────────────────────────────── */
.presets {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 20px;
}
.presets-head h2 { font-size: 1.05rem; margin: 0 0 2px; }
.presets-head .doc { color: var(--muted); font-size: 0.78rem; margin: 0 0 14px; }

.preset-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 760px) { .preset-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .preset-grid { grid-template-columns: 1fr; } }

.preset-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  background: #faf8f3;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 11px 13px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.preset-btn:hover { border-color: var(--valor); background: var(--valor-bg); }
.preset-btn.active {
  border-color: var(--valor);
  background: var(--valor-bg);
  box-shadow: 0 0 0 1px var(--valor) inset;
}
.preset-emoji { font-size: 1.25rem; line-height: 1; }
.preset-nombre { font-weight: 700; font-size: 0.9rem; }
.preset-escala { font-size: 0.7rem; color: var(--muted); }
.preset-btn.active .preset-escala { color: var(--valor); }

.preset-note {
  margin-top: 14px;
  border-left: 3px solid var(--valor);
  background: var(--valor-bg);
  border-radius: 7px;
  padding: 9px 12px;
}
.preset-note.custom { border-left-color: var(--muted); background: #f3f1ec; }
.preset-note .vocacion { margin: 0; font-size: 0.86rem; }
.preset-note .enciende { margin: 5px 0 0; font-size: 0.76rem; color: var(--muted); }

/* Coherence-checker a todo el ancho, debajo del grid sliders|salidas */
.cohere-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 10px; margin-bottom: 12px; }
.cohere-head .doc { flex: 1 1 100%; margin: 0; }
.cohere-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; align-items: start; }
@media (max-width: 760px) { .cohere-cols { grid-template-columns: 1fr; } }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 20px;
}
.panel h2 { font-size: 1.05rem; margin: 0 0 2px; }
.panel .doc { color: var(--muted); font-size: 0.78rem; margin: 0 0 14px; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
@media (max-width: 560px) { .grid2 { grid-template-columns: 1fr; } }

.ctrl { font-size: 0.84rem; }
.ctrl .top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ctrl label { font-weight: 600; }
.ctrl .val { font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 600; }
.ctrl .doc { color: var(--muted); font-size: 0.72rem; margin: 1px 0 4px; }
.ctrl input[type="range"] { width: 100%; accent-color: var(--valor); }
.ctrl select { width: 100%; padding: 4px 6px; border-radius: 7px; border: 1px solid var(--line); }
.ctrl.valor { border-left: 3px solid var(--valor); padding-left: 9px; background: var(--valor-bg); border-radius: 7px; padding: 7px 9px; }

.tag { display: inline-block; font-size: 0.66rem; padding: 1px 6px; border-radius: 999px; vertical-align: middle; margin-left: 6px; }
.tag.valor { background: var(--valor); color: #fff; }
.tag.metro { background: var(--metro); color: #fff; }

.outputs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.out {
  background: #faf8f3; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
}
.out .k { font-size: 0.74rem; color: var(--muted); }
.out .v { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.out .f { font-size: 0.68rem; color: var(--muted); }

svg.chart { width: 100%; height: 220px; background: #faf8f3; border: 1px solid var(--line); border-radius: 10px; }
svg.chart.bar { height: 150px; }

/* Coherence checker */
.verdict { border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; font-weight: 600; }
.verdict.ok { background: #e8f5ec; border: 1px solid #b8ddc4; color: var(--ok); }
.verdict.bad { background: #fbeaea; border: 1px solid #e6b9b9; color: var(--bad); }
.verdict small { display: block; font-weight: 400; color: var(--muted); margin-top: 2px; }

.rule { display: flex; gap: 8px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 0.83rem; }
.rule:last-child { border-bottom: none; }
.rule .mark { flex: 0 0 auto; font-size: 0.95rem; }
.rule .id { font-weight: 700; font-variant-numeric: tabular-nums; }
.rule .why { color: var(--muted); font-size: 0.78rem; }

.locks { margin-top: 6px; }
.lock { display: flex; gap: 8px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 0.79rem; }
.lock:last-child { border-bottom: none; }
.lock .id { font-weight: 700; color: var(--metro); flex: 0 0 78px; }
.lock .what { color: var(--ink); }
.lock .what small { color: var(--muted); display: block; }

.break-btn {
  margin-top: 6px; background: var(--bad); color: #fff; border: none; border-radius: 9px;
  padding: 8px 12px; font-weight: 600; cursor: pointer; font-size: 0.82rem;
}
.break-btn.reset { background: #555; }

details.legend { margin-top: 14px; font-size: 0.8rem; color: var(--muted); }
details.legend summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.swatch { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: middle; margin-right: 5px; }