/* ============================================================
   LUGAR KALEMA · tela de evolucao (a prova)
   Depende de kal.css, que traz as cores e a base.
   ============================================================ */

.bloco { margin: 0 0 52px; }
.bloco > .titulo {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin: 0 0 6px;
}
.bloco > .titulo h2 {
  font-family: var(--kal-font-title); font-weight: 400; font-size: 24px;
  letter-spacing: .03em; margin: 0;
}
.bloco > .titulo .marca-passo { font-size: 12px; color: var(--kal-ink-mute); }
.bloco > .sub { color: var(--kal-ink-soft); font-size: 14px; margin: 0 0 20px; max-width: 780px; }

/* ── Painel ─────────────────────────────────────────────────── */
.painel {
  background: var(--kal-navy-800); border: 1px solid var(--kal-navy-600);
  border-radius: var(--kal-radius); padding: 22px 24px; margin-bottom: 18px;
  min-width: 0; max-width: 100%;
}
/* Conteudo largo (tabela e grafico) rola DENTRO da caixa. Sem isto a tabela
   estica o painel e o corpo da pagina rola de lado no telefone: medido em
   390px, estourava 179px. */
.rolagem { width: 100%; max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
.rolagem::-webkit-scrollbar { height: 7px; }
.rolagem::-webkit-scrollbar-thumb { background: var(--kal-navy-600); border-radius: 99px; }
.painel > h3 {
  font-size: 15px; font-weight: 600; margin: 0 0 4px;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.painel > h3 .etiq {
  font-size: 10.5px; letter-spacing: .14em; color: var(--kal-ink-mute);
  border: 1px solid var(--kal-navy-600); padding: 2px 8px; border-radius: 999px;
}
.painel > .papel { font-size: 13px; color: var(--kal-ink-mute); margin: 0 0 18px; }

/* ── Grafico ────────────────────────────────────────────────── */
.grafico { width: 100%; max-width: 100%; overflow-x: auto; }
.grafico svg { display: block; min-width: 560px; }
.legenda {
  display: flex; gap: 20px; flex-wrap: wrap; font-size: 12px;
  color: var(--kal-ink-mute); margin-top: 10px;
}
.legenda i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* ── Tabela de edicoes ──────────────────────────────────────── */
.tab { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 13.5px; margin-top: 8px; }
.tab th {
  text-align: left; font-weight: 600; font-size: 11px; letter-spacing: .1em;
  color: var(--kal-ink-mute); padding: 8px 10px; border-bottom: 1px solid var(--kal-navy-600);
  white-space: nowrap;
}
.tab td { padding: 10px; border-bottom: 1px solid rgba(29,51,80,.5); vertical-align: top; }
.tab td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tab tr.era-kalema { background: rgba(212,162,78,.05); }
.tab tr.era-kalema td:first-child { box-shadow: inset 3px 0 0 var(--kal-gold); }
.tab .rot { font-weight: 600; white-space: nowrap; }
.tab .peq { font-size: 11.5px; color: var(--kal-ink-mute); display: block; margin-top: 2px; white-space: normal; }
.tab .nd { color: var(--kal-ink-mute); font-style: italic; }
.tab tr:hover td { background: rgba(255,255,255,.03); }

/* ── KMI ────────────────────────────────────────────────────── */
.kmi-topo {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--kal-navy-600);
}
.kmi-nota { display: flex; align-items: baseline; gap: 10px; }
.kmi-nota .n { font-family: var(--kal-font-title); font-size: 42px; line-height: 1; }
.kmi-nota .n.antes { color: var(--kal-ink-mute); }
.kmi-nota .n.depois { color: var(--kal-gold); }
.kmi-nota .seta { color: var(--kal-ink-mute); font-size: 20px; }
.kmi-nota .rot { font-size: 11px; letter-spacing: .14em; color: var(--kal-ink-mute); }

.pilar { padding: 14px 0; border-bottom: 1px solid rgba(29,51,80,.5); }
.pilar:last-child { border-bottom: none; }
.pilar .cab { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; }
.pilar .letra {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--kal-font-title); font-size: 15px;
  background: var(--kal-navy-700); color: var(--kal-gold);
}
.pilar .nome { font-size: 14.5px; font-weight: 600; flex: 1; }
.pilar .delta { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pilar .delta.sobe { color: var(--kal-ok); }
.pilar .delta.desce { color: var(--kal-erro); }
.pilar .delta.igual { color: var(--kal-ink-mute); }

/* A barra colorida e ONDE ESTA HOJE. O trago claro por cima marca de onde
   partiu. Preenchimento sobre preenchimento nao funcionava: o de hoje cobria
   o da entrada e a comparacao sumia. */
.barra { position: relative; height: 9px; background: var(--kal-navy-700); border-radius: 99px; overflow: hidden; }
.barra .depois { position: absolute; inset: 0 auto 0 0; background: var(--kal-gold); opacity: .9; }
.barra .antes {
  position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px;
  background: var(--kal-ink); z-index: 2;
}
.barra.regride .depois { background: var(--kal-coral); }
.barra-rot { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--kal-ink-mute); margin-top: 5px; }

.pilar .ev { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pilar .ev > div { font-size: 12.5px; color: var(--kal-ink-soft); line-height: 1.55; }
.pilar .ev .r { font-size: 10.5px; letter-spacing: .12em; color: var(--kal-ink-mute); display: block; margin-bottom: 3px; }
.pilar.sem .letra { color: var(--kal-ink-mute); }
.pilar.sem .nome { color: var(--kal-ink-mute); }

/* ── Antes e depois (sistema) ───────────────────────────────── */
.sis { display: grid; gap: 12px; }
.sis .linha {
  display: grid; grid-template-columns: 190px 1fr 1fr; gap: 16px; align-items: start;
  padding: 14px 0; border-bottom: 1px solid rgba(29,51,80,.5);
}
.sis .linha:last-child { border-bottom: none; }
.sis .item { font-size: 13.5px; font-weight: 600; }
.sis .item .fonte { display: block; font-weight: 400; font-size: 11px; color: var(--kal-ink-mute); margin-top: 4px; }
.sis .col { font-size: 13px; line-height: 1.55; }
.sis .col .r { font-size: 10.5px; letter-spacing: .12em; display: block; margin-bottom: 4px; }
.sis .col.antes { color: var(--kal-ink-mute); }
.sis .col.antes .r { color: var(--kal-ink-mute); }
.sis .col.hoje { color: var(--kal-ink-soft); }
.sis .col.hoje .r { color: var(--kal-mar-100); }

/* ── Linha do tempo ─────────────────────────────────────────── */
.tempo { position: relative; padding-left: 26px; }
.tempo::before {
  content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(180deg, var(--kal-navy-600), var(--kal-gold-deep), var(--kal-navy-600));
}
.tempo .ev { position: relative; padding: 0 0 20px; }
.tempo .ev::before {
  content: ''; position: absolute; left: -24px; top: 6px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--kal-navy-700); border: 2px solid var(--kal-navy-600);
}
/* `marco` = passo de amadurecimento da Kalema. `kalema` = edição comum da série
   (a série inteira é Kalema, então este é o estado normal). */
.tempo .ev.marco::before { background: var(--kal-gold); border-color: var(--kal-gold-light); }
.tempo .ev.kalema::before { background: var(--kal-gold-deep); border-color: var(--kal-gold); }
.tempo .ev.futuro::before { background: transparent; border-style: dashed; }
.tempo .ev .d { font-size: 11px; letter-spacing: .1em; color: var(--kal-ink-mute); }
.tempo .ev .t { font-size: 14.5px; font-weight: 600; margin: 2px 0 3px; }
.tempo .ev.marco .t { color: var(--kal-gold); }
.tempo .ev .x { font-size: 13px; color: var(--kal-ink-soft); line-height: 1.55; }

/* ── Vazio de proposito ─────────────────────────────────────── */
.vazio-motivo {
  border: 1px dashed var(--kal-navy-600); border-radius: 10px;
  padding: 16px 18px; color: var(--kal-ink-mute); font-size: 13px; line-height: 1.6;
}
.vazio-motivo b { color: var(--kal-ink-soft); }

/* ── Telefone ───────────────────────────────────────────────── */
@media (max-width: 720px) {
  .pilar .ev { grid-template-columns: 1fr; gap: 10px; }
  .sis .linha { grid-template-columns: 1fr; gap: 8px; }
  .kmi-topo { gap: 16px; }
}


/* Os passos do caminho, sem caixa de explicacao (18/08/2026) */
.marcos-lista { list-style: none; margin: 6px 0 0; padding: 0; display: flex; gap: 14px; flex-wrap: wrap; }
.marcos-lista li {
  flex: 1 1 300px; font-size: 13px; line-height: 1.55;
  border-left: 2px solid var(--kal-gold); padding: 4px 0 4px 12px;
}
.marcos-lista li b { display: block; font-family: var(--kal-font-title); font-size: 16px; font-weight: 400; }