/* PORTAL BASE EM LOTE - o confronto do arquivo inteiro
   Cabeçalho com o botão de confrontar, o resumo por estado e a lista de
   resultados com as diferenças de cada empreitada. Painel em
   `public/features/base-batch-panel.js`.

   O confronto individual do Resumo da EOP é outro ecrã e tem folha própria
   (`public/styles/eop-base.css`, com os seletores `.basePublished*`). São dois
   nomes parecidos para duas coisas diferentes: uma EOP na faixa lateral, contra
   o arquivo todo numa gaveta. */

/* Os cartões do confronto usavam a moldura da confirmação por exceção, âmbar
   para todos os estados, e as classes de cor não existiam fora do laboratório:
   uma empreitada que confere ficava com a mesma moldura de aviso da que
   diverge. Aqui a cor diz o estado, e só as que exigem atenção o mostram. */

.baseHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.baseHead h3 {
  margin: 0 0 6px;
}

.baseHeadText {
  min-width: 0;
  flex: 1;
}

.baseHead p {
  margin: 0;
  width: 100%;
  max-width: none;
}

.baseHeadActions {
  flex: none;
  display: grid;
  gap: 6px;
  justify-items: end;
}

.baseEstado {
  font-size: var(--txt-sm);
  text-align: right;
}

.baseSummaryGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.baseSummaryGrid > div {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--subtle);
}

.baseSummaryGrid span {
  display: block;
  color: var(--muted);
  font-size: var(--txt-xs);
  line-height: 1.3;
}

/* Sem `nowrap`: a lista de anos é o valor mais comprido do painel e, presa
   numa linha, saía por fora da moldura do cartão. */
.baseSummaryGrid b {
  display: block;
  margin-top: 4px;
  font-size: var(--txt-lg);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.baseSummaryGrid b.ok { color: var(--verde); }
.baseSummaryGrid b.erro { color: var(--vermelho); }

.baseCarimbo {
  margin: 10px 0 0;
  font-size: var(--txt-xs);
}

.baseList {
  display: grid;
  gap: 8px;
}

.baseResult {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.baseResult:hover {
  background: var(--subtle);
}

.baseResult.erro { border-left-color: var(--vermelho); }
.baseResult.ok { border-left-color: var(--verde); }

.baseResultTop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.baseResultTop b {
  font-size: var(--txt-md);
}

.baseResultTop span {
  flex: none;
  color: var(--muted);
  font-size: var(--txt-xs);
  font-weight: 700;
  text-align: right;
}

.baseResultTop span.ok { color: var(--verde); }
.baseResultTop span.erro { color: var(--vermelho); }

.baseDiff {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin-top: 6px;
  font-size: var(--txt-sm);
}

.baseDiff span {
  color: var(--ink);
  font-weight: 650;
}

.baseDiff em {
  color: var(--muted);
  font-style: normal;
}

.baseResultMeta {
  margin-top: 6px;
  color: var(--muted);
  font-size: var(--txt-sm);
}

@media (max-width: 620px) {
  .baseHead { display: grid; gap: 12px; }
  .baseHeadActions { justify-items: start; }
  .baseEstado { text-align: left; }
  .baseSummaryGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}