/* ============================================================
   MAPPING ROLETTE — PARTE 1
   style.css — Base do modo escuro + tokens dos grupos de cor
   (o layout completo da mesa e do racetrack chega na Parte 4;
   aqui apenas os fundamentos e a página de validação)
   ============================================================ */

:root {
  /* Superfícies (modo escuro, tom de mesa de laboratório) */
  --bg: #0d1117;
  --surface: #161b22;
  --surface-2: #1f2630;
  --border: #2d333b;

  /* Texto */
  --text: #e6edf3;
  --text-dim: #8b949e;
  --accent: #fbbf24; /* âmbar: destaques e títulos */

  /* Grupos de Terminais (filtro Pragmatic) */
  --grp-red: #dc2626;
  --grp-red-soft: #dc262622;
  --grp-green: #16a34a;
  --grp-green-soft: #16a34a22;
  --grp-blue: #2563eb;
  --grp-blue-soft: #2563eb22;

  /* Estados de teste */
  --ok: #4ade80;
  --bad: #f87171;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  padding: 24px;
}

header h1 {
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin: 0 0 4px;
}

header p {
  margin: 0 0 24px;
  color: var(--text-dim);
  font-size: 0.9rem;
}

section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 20px;
}

section h2 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: var(--text);
}

/* ---------- Resultados dos testes ---------- */

#test-summary { font-weight: bold; margin-bottom: 10px; }
#test-summary.ok { color: var(--ok); }
#test-summary.bad { color: var(--bad); }

#test-results {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: "Consolas", "Courier New", monospace;
  font-size: 0.82rem;
}

#test-results li { padding: 3px 0; }
#test-results li.pass { color: var(--ok); }
#test-results li.fail { color: var(--bad); }

/* ---------- Grade de DNA dos 37 números ---------- */

#dna-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
}

.dna-cell {
  border-radius: 8px;
  padding: 8px 6px;
  text-align: center;
  border: 1px solid var(--border);
  cursor: default;
  transition: transform 0.1s ease;
}

.dna-cell:hover { transform: scale(1.06); }

.dna-cell .num {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
}

.dna-cell .tags {
  display: block;
  font-size: 0.68rem;
  color: var(--text);
  opacity: 0.85;
  margin-top: 2px;
  font-family: "Consolas", monospace;
}

.grp-red   { background: var(--grp-red-soft);   border-color: var(--grp-red);   }
.grp-red .num   { color: var(--grp-red); filter: brightness(1.5); }
.grp-green { background: var(--grp-green-soft); border-color: var(--grp-green); }
.grp-green .num { color: var(--grp-green); filter: brightness(1.5); }
.grp-blue  { background: var(--grp-blue-soft);  border-color: var(--grp-blue);  }
.grp-blue .num  { color: var(--grp-blue); filter: brightness(1.5); }

/* ---------- Legenda ---------- */

.legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 0.82rem; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i {
  width: 12px; height: 12px; border-radius: 3px; display: inline-block;
}
.legend .i-red { background: var(--grp-red); }
.legend .i-green { background: var(--grp-green); }
.legend .i-blue { background: var(--grp-blue); }

@media (max-width: 480px) {
  body { padding: 14px; }
  #dna-grid { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); }
}

/* ============================================================
   PARTE 2 — Interface de entrada de dados
   ============================================================ */

.app-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 12px; margin-bottom: 16px;
}
.header-actions { display: flex; gap: 8px; }

.hidden { display: none !important; }
.dim { color: var(--text-dim); }
.small { font-size: 0.78rem; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }

#status { min-height: 1.2em; font-size: 0.85rem; margin: 0 0 12px; }
#status.ok { color: var(--ok); }
#status.err { color: var(--bad); }

/* ---------- Botões ---------- */
.btn {
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 14px; font-size: 0.85rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); color: #1a1a1a; font-weight: 700; border-color: var(--accent); }
.btn.ghost { background: transparent; }
.link { color: var(--accent); text-decoration: underline; cursor: pointer; }
.row-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

/* ---------- Miniteclado ---------- */
#keypad {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 6px; margin-top: 10px;
}
.key {
  border-radius: 8px; border: 1px solid var(--border);
  font-size: 1.05rem; font-weight: 700; padding: 12px 0;
  cursor: pointer; color: var(--text); transition: transform 0.08s ease;
}
.key:active { transform: scale(0.92); }
.key.grp-red   { background: var(--grp-red-soft);   border-color: var(--grp-red); }
.key.grp-green { background: var(--grp-green-soft); border-color: var(--grp-green); }
.key.grp-blue  { background: var(--grp-blue-soft);  border-color: var(--grp-blue); }

/* ---------- Linha do Tempo ---------- */
#timeline {
  display: flex; gap: 6px; overflow-x: auto; padding: 10px 4px;
  scroll-behavior: smooth; min-height: 66px;
}
#timeline .empty { color: var(--text-dim); font-size: 0.85rem; margin: auto 0; }
.tl-chip {
  min-width: 52px; border-radius: 8px; border: 1px solid var(--border);
  text-align: center; padding: 7px 4px; flex-shrink: 0;
}
.tl-num { display: block; font-size: 1.1rem; font-weight: 700; }
.tl-tags { display: block; font-size: 0.66rem; font-family: "Consolas", monospace; opacity: 0.9; }
.tl-chip .ambig { color: var(--accent); font-weight: 700; cursor: help; }
.tl-chip.grp-red   { background: var(--grp-red-soft);   border-color: var(--grp-red); }
.tl-chip.grp-green { background: var(--grp-green-soft); border-color: var(--grp-green); }
.tl-chip.grp-blue  { background: var(--grp-blue-soft);  border-color: var(--grp-blue); }

/* ---------- Revisão ---------- */
.review { border-color: var(--accent); }
#review-input {
  width: 100%; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  font-family: "Consolas", monospace; font-size: 0.9rem; padding: 10px;
  resize: vertical;
}
#review-preview { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.rv-chip {
  border-radius: 6px; padding: 3px 8px; font-weight: 700; font-size: 0.85rem;
  border: 1px solid var(--border);
}
.rv-chip.grp-red   { background: var(--grp-red-soft);   border-color: var(--grp-red); }
.rv-chip.grp-green { background: var(--grp-green-soft); border-color: var(--grp-green); }
.rv-chip.grp-blue  { background: var(--grp-blue-soft);  border-color: var(--grp-blue); }
.rv-chip.rv-bad { background: #f8717122; border-color: var(--bad); color: var(--bad); text-decoration: line-through; }

/* ---------- Configurações ---------- */
.cfg-row { display: block; margin: 12px 0; font-size: 0.85rem; color: var(--text-dim); }
.cfg-row input[type="password"], .cfg-row input[type="number"] {
  display: block; width: 100%; margin-top: 5px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px;
  font-size: 0.9rem;
}
.cfg-row.inline { display: flex; align-items: center; gap: 8px; }
.cfg-row.inline input { width: auto; margin: 0; }

footer { margin-top: 24px; }
footer a { color: var(--accent); }

/* ============================================================
   PARTE 4 — Mapas de Calor (Mesa + Racetrack + Setores)
   ============================================================ */

.sub { font-size: 0.85rem; color: var(--text-dim); margin: 16px 0 8px; font-weight: 600; }

.svg-wrap { width: 100%; overflow-x: auto; }
.svg-wrap svg { width: 100%; min-width: 560px; height: auto; display: block; }
.hm-cell { cursor: default; }
.hm-cell:hover rect, .hm-cell:hover circle { filter: brightness(1.25); }

.win-toggle { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.btn.win { padding: 5px 12px; font-size: 0.78rem; }
.btn.win.active { background: var(--accent); color: #1a1a1a; border-color: var(--accent); font-weight: 700; }

/* Barras de setor */
.sector-row { display: grid; grid-template-columns: 140px 1fr 200px; gap: 10px; align-items: center; margin: 7px 0; font-size: 0.8rem; }
.sector-name { font-weight: 600; }
.sector-name.sec-voisins { color: #4ade80; }
.sector-name.sec-tiers { color: #60a5fa; }
.sector-name.sec-orphelins { color: #fbbf24; }
.sector-bar { position: relative; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; height: 16px; overflow: hidden; }
.sector-fill { height: 100%; border-radius: 5px 0 0 5px; transition: width 0.25s ease; }
.sector-fill.sec-voisins { background: #4ade8055; }
.sector-fill.sec-tiers { background: #60a5fa55; }
.sector-fill.sec-orphelins { background: #fbbf2455; }
.sector-exp { position: absolute; top: 0; bottom: 0; width: 2px; background: #e6edf3; opacity: 0.9; }
.sector-nums { font-family: "Consolas", monospace; font-size: 0.72rem; }

@media (max-width: 640px) {
  .sector-row { grid-template-columns: 100px 1fr; }
  .sector-nums { grid-column: 1 / -1; }
}

/* ============================================================
   PARTE 5 — Alertas, Conflitos, Placar e Sessão
   ============================================================ */

.session-bar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font-family: "Consolas", monospace; font-size: 0.82rem;
  color: var(--text-dim); margin-bottom: 14px;
}
.limit-msg { color: var(--bad); font-weight: 700; }

/* Alertas */
.alert-card {
  border: 1px solid var(--border); border-left-width: 4px;
  border-radius: 8px; padding: 10px 14px; margin: 8px 0;
  background: var(--surface-2);
}
.alert-card.s1 { border-left-color: #fbbf24; }
.alert-card.s2 { border-left-color: #4ade80; }
.alert-card.s3 { border-left-color: #f472b6; }
.alert-card.s4 { border-left-color: #60a5fa; }
.alert-card.s5 { border-left-color: #a78bfa; }
.alert-card.s6 { border-left-color: #fb923c; }
.alert-card.s7 { border-left-color: #f87171; }
.alert-head { display: flex; align-items: center; gap: 8px; }
.alert-msg { margin: 6px 0; font-size: 0.85rem; color: var(--text-dim); }
.alert-targets { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.z-badge, .amb-badge {
  font-family: "Consolas", monospace; font-size: 0.7rem;
  border-radius: 5px; padding: 1px 6px; cursor: help;
}
.z-badge { background: #60a5fa22; color: #60a5fa; border: 1px solid #60a5fa; }
.amb-badge { background: #fbbf2422; color: var(--accent); border: 1px solid var(--accent); }

.conflict-card {
  border: 1px solid var(--bad); border-radius: 8px;
  background: #f8717111; color: var(--text);
  padding: 10px 14px; margin: 8px 0; font-size: 0.85rem;
}

/* Placar */
.table-wrap { overflow-x: auto; }
#scoreboard { width: 100%; border-collapse: collapse; font-size: 0.8rem; min-width: 640px; }
#scoreboard th, #scoreboard td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--border); }
#scoreboard th { color: var(--text-dim); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }
#scoreboard td:not(:first-child), #scoreboard th:not(:first-child) { text-align: right; }
.pnl-pos { color: var(--ok); font-weight: 700; }
.pnl-neg { color: var(--bad); font-weight: 700; }

/* ---------- Parte 3: indicador da Ponte Local ---------- */
.bridge-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; align-self: center; }
.bridge-dot.off { background: var(--text-dim); opacity: 0.5; }
.bridge-dot.on  { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.bridge-dot.err { background: var(--bad); }
.cfg-row input[type="text"] { display: block; width: 100%; margin-top: 5px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px; font-size: 0.9rem; }

/* Linha de TOTAL do placar */
#scoreboard .total-row td {
  border-top: 2px solid var(--accent);
  font-weight: 700;
  background: var(--surface-2);
}

/* ============================================================
   v1.2 — Variantes, pips, custo, dourado e comparativo de modos
   ============================================================ */

.variant-box {
  border: 1px dashed var(--border); border-radius: 8px;
  padding: 8px 12px; margin-top: 8px; background: var(--bg);
}
.variant-box.primary { border-style: solid; }
.variant-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; font-size: 0.85rem; }
.variant-head.single { margin: 6px 0; }

.cost-badge {
  font-family: "Consolas", monospace; font-size: 0.72rem; cursor: help;
  border: 1px solid var(--bad); color: var(--bad);
  background: #f8717111; border-radius: 5px; padding: 1px 8px;
}

.pips { font-size: 0.8rem; letter-spacing: 2px; color: var(--accent); cursor: help; }

.entry-badge {
  font-size: 0.7rem; font-weight: 700; border-radius: 5px; padding: 1px 8px;
  background: #4ade8022; color: var(--ok); border: 1px solid var(--ok);
  animation: entry-pulse 1.2s ease-in-out infinite;
}
@keyframes entry-pulse { 50% { opacity: 0.55; } }

.sample-badge {
  font-size: 0.68rem; border-radius: 5px; padding: 1px 8px; cursor: help;
  background: var(--surface); color: var(--text-dim); border: 1px solid var(--border);
}

.gold-badge {
  font-size: 0.7rem; font-weight: 700; border-radius: 5px; padding: 1px 8px; cursor: help;
  background: #fbbf2422; color: var(--accent); border: 1px solid var(--accent);
}
.alert-card.gold {
  border-color: var(--accent);
  box-shadow: 0 0 14px #fbbf2455, inset 0 0 24px #fbbf240d;
}

#modes-board { width: 100%; border-collapse: collapse; font-size: 0.8rem; min-width: 640px; }
#modes-board th, #modes-board td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--border); }
#modes-board th { color: var(--text-dim); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }
#modes-board td:not(:first-child), #modes-board th:not(:first-child) { text-align: right; }

/* ---------- v1.3: chaves Liga/Desliga e linhas OFF ---------- */
#strategy-switches { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; margin-top: 8px; }
.strat-switch { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.strat-switch input { accent-color: var(--accent); width: 16px; height: 16px; }
#scoreboard tr.off-row td { opacity: 0.38; }
.off-tag { font-size: 0.65rem; border: 1px solid var(--bad); color: var(--bad); border-radius: 4px; padding: 0 5px; margin-left: 6px; vertical-align: middle; }

/* v1.5: Colar Sequência */
.seq-input-row { display: flex; gap: 10px; margin-top: 8px; }
#seq-input { flex: 1; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; font-family: "Consolas", monospace; font-size: 0.9rem; padding: 9px 10px; resize: vertical; }

/* v1.6: Camada de Inteligência */
.delay-badge {
  font-size: 0.7rem; font-weight: 700; border-radius: 5px; padding: 2px 8px;
  background: #fbbf2433; color: var(--accent); border: 1px solid var(--accent);
  display: block; margin-top: 6px;
}
.int-status { font-size: 0.68rem; display: block; margin-top: 2px; }

/* ─── v1.7: EV Observado no Placar ───────────────────────────────────── */
.ev-pos { color: #4ade80; font-weight: 700; }  /* verde — EV positivo     */
.ev-neg { color: #f87171; font-weight: 700; }  /* vermelho — EV negativo  */