/* Painel Coin — CSS em arquivo, não inline: a CSP proíbe `unsafe-inline`,
   que é o que torna a proteção contra XSS real em vez de decorativa. */

:root {
  --tinta: #1a1d21;
  --tinta-fraca: #6b7280;
  --fundo: #f7f8fa;
  --papel: #ffffff;
  --borda: #e3e6ea;
  --marca: #14532d;
  --alerta: #b91c1c;
  --alerta-fundo: #fef2f2;
  --aviso: #92400e;
  --aviso-fundo: #fffbeb;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--tinta);
  background: var(--fundo);
  line-height: 1.5;
}

/* --- topo --- */
.topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  background: var(--papel);
  border-bottom: 1px solid var(--borda);
}
.topo-marca { font-weight: 650; letter-spacing: -0.01em; }
.topo-sub { color: var(--tinta-fraca); font-weight: 400; }
.topo-usuario { display: flex; align-items: center; gap: 0.85rem; font-size: 0.875rem; }
.topo-nome { font-weight: 550; }
.topo-papeis { color: var(--tinta-fraca); font-size: 0.8125rem; }
.topo-form { margin: 0; }

/* --- conteúdo --- */
.conteudo { max-width: 60rem; margin: 0 auto; padding: 2rem 1.25rem; }
.titulo { font-size: 1.375rem; margin: 0 0 0.75rem; letter-spacing: -0.02em; }
.texto { color: var(--tinta-fraca); margin: 0 0 1.5rem; }

.cartao {
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 1.25rem;
}
.cartao-titulo { font-size: 0.9375rem; margin: 0 0 0.75rem; }
.lista { margin: 0; padding-left: 1.1rem; color: var(--tinta-fraca); }
.lista li { margin-bottom: 0.4rem; }
.etiqueta {
  display: inline-block;
  font-size: 0.6875rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: var(--fundo);
  border: 1px solid var(--borda);
  color: var(--tinta-fraca);
  margin-left: 0.25rem;
}

/* --- login e formulários --- */
.caixa-login, .caixa-erro {
  max-width: 24rem;
  margin: 3.5rem auto;
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 1.75rem;
}
.formulario { display: flex; flex-direction: column; gap: 0.9rem; }
.campo { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.875rem; }
.campo input {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--borda);
  border-radius: 7px;
  font-size: 0.9375rem;
  font-family: inherit;
}
.campo input:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
.ajuda { color: var(--tinta-fraca); font-size: 0.75rem; }

.botao {
  padding: 0.6rem 1rem;
  background: var(--marca);
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: 0.9375rem;
  font-family: inherit;
  font-weight: 550;
  cursor: pointer;
}
.botao:hover { filter: brightness(1.12); }
.botao-texto {
  background: none;
  border: none;
  color: var(--tinta-fraca);
  cursor: pointer;
  font: inherit;
  font-size: 0.875rem;
  text-decoration: underline;
  padding: 0;
}

.alerta {
  background: var(--alerta-fundo);
  color: var(--alerta);
  border: 1px solid currentColor;
  border-radius: 7px;
  padding: 0.55rem 0.7rem;
  font-size: 0.875rem;
  margin: 0 0 0.9rem;
}
.aviso {
  background: var(--aviso-fundo);
  color: var(--aviso);
  border: 1px solid currentColor;
  border-radius: 7px;
  padding: 0.55rem 0.7rem;
  font-size: 0.875rem;
  margin: 0 0 0.9rem;
}

.erro-status { font-size: 2.25rem; font-weight: 700; color: var(--borda); margin: 0; }
.link { color: var(--marca); }
.rodape {
  text-align: center;
  color: var(--tinta-fraca);
  font-size: 0.75rem;
  padding: 1.5rem 1rem 2.5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tinta: #e8eaed;
    --tinta-fraca: #9aa2ad;
    --fundo: #16181c;
    --papel: #1e2126;
    --borda: #2f343b;
    --marca: #4ade80;
    --alerta: #fca5a5;
    --alerta-fundo: #2a1618;
    --aviso: #fcd34d;
    --aviso-fundo: #2a2114;
  }
  .botao { color: #0b2016; }
}

/* ===================== Fila de validação (Bloco 2B) ===================== */

.cabecalho-secao { margin-bottom: 1.25rem; }
.migalha { margin: 0 0 0.75rem; font-size: 0.8125rem; }
.sub { font-size: 0.8125rem; margin: 1.25rem 0 0.5rem; color: var(--tinta-fraca); text-transform: uppercase; letter-spacing: 0.04em; }
.nota { font-size: 0.75rem; margin-top: 0.75rem; }
.fraco { color: var(--tinta-fraca); }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.875em; }
.vazio { text-align: center; color: var(--tinta-fraca); }

/* tabela — rola sozinha em tela estreita, sem empurrar a página */
.tabela-envolucro { overflow-x: auto; border: 1px solid var(--borda); border-radius: 10px; background: var(--papel); }
.tabela { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.tabela th {
  text-align: left; font-weight: 550; font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--tinta-fraca);
  padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--borda); white-space: nowrap;
}
.tabela td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--borda); }
.tabela tbody tr:last-child td { border-bottom: none; }
.tabela .num { text-align: right; white-space: nowrap; }
.tabela-densa { font-size: 0.8125rem; }
.tabela-densa td { padding: 0.35rem 0; border-bottom: none; }
.linha-alerta { background: var(--aviso-fundo); }
.espera { font-variant-numeric: tabular-nums; color: var(--tinta-fraca); white-space: nowrap; }

/* pastilhas de estado */
.pastilha {
  display: inline-block; font-size: 0.6875rem; padding: 0.1rem 0.45rem; border-radius: 999px;
  border: 1px solid var(--borda); color: var(--tinta-fraca); white-space: nowrap;
}
.pastilha-ok { border-color: var(--marca); color: var(--marca); }
.pastilha-alerta { border-color: var(--aviso); color: var(--aviso); background: var(--aviso-fundo); }
.pastilha-ANUNCIADO { border-color: var(--tinta-fraca); }
.pastilha-BAIXADO { border-color: var(--marca); color: var(--marca); }
.pastilha-FALHOU { border-color: var(--alerta); color: var(--alerta); }

/* checks automáticos */
.checks { list-style: none; margin: 0; padding: 0; }
.check { display: flex; gap: 0.6rem; padding: 0.5rem 0; border-bottom: 1px solid var(--borda); }
.check:last-child { border-bottom: none; }
.check-marca {
  flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.75rem; font-weight: 700;
  border: 1px solid var(--borda); color: var(--tinta-fraca);
}
.check-ok .check-marca { border-color: var(--marca); color: var(--marca); }
.check-alerta .check-marca { border-color: var(--aviso); color: var(--aviso); background: var(--aviso-fundo); }
.check-corpo { display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.875rem; }
.check-detalhe { color: var(--tinta-fraca); font-size: 0.8125rem; }

/* duas colunas: normalizado × cru */
.colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0; }
@media (max-width: 60rem) { .colunas { grid-template-columns: 1fr; } }

.lista-dados { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; margin: 0; font-size: 0.875rem; }
.lista-dados dt { color: var(--tinta-fraca); }
.lista-dados dd { margin: 0; }
.lista-simples { list-style: none; margin: 0; padding: 0; font-size: 0.875rem; }
.lista-simples li { padding: 0.3rem 0; }

.payload {
  background: var(--fundo); border: 1px solid var(--borda); border-radius: 7px;
  padding: 0.75rem; font-size: 0.75rem; line-height: 1.45;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  max-height: 32rem; overflow: auto; margin: 0;
}

/* decisão */
.cartao-decisao { margin-top: 1rem; }
.formulario-linha { display: flex; gap: 0.5rem; margin-bottom: 0.6rem; }
.campo-linha {
  flex: 1; padding: 0.5rem 0.7rem; border: 1px solid var(--borda);
  border-radius: 7px; font-size: 0.875rem; font-family: inherit;
}
.campo-linha:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
.botao-secundario { background: none; border: 1px solid var(--borda); color: var(--tinta); }
.botao-pequeno {
  display: inline-block; padding: 0.3rem 0.65rem; border-radius: 6px;
  border: 1px solid var(--borda); font-size: 0.8125rem; text-decoration: none; color: inherit;
}
.botao-pequeno:hover { border-color: var(--marca); color: var(--marca); }

/* o topo ganha navegação quando há mais de uma tela */
.topo-nav { display: flex; gap: 1rem; font-size: 0.875rem; }
.topo-nav a { color: var(--tinta-fraca); text-decoration: none; }
.topo-nav a:hover { color: var(--tinta); }

/* ============= Visão 360, Pendências, Vencimentos (Bloco 7 antecipado) ============= */

.topo-busca { display: flex; gap: 0.4rem; align-items: center; }
.topo-busca-campo {
  padding: 0.35rem 0.6rem; border: 1px solid var(--borda); border-radius: 7px;
  font-size: 0.8125rem; font-family: inherit; width: 12rem;
}
.topo-busca-campo:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }

.pastilha-CRITICA { border-color: var(--alerta); color: var(--alerta); background: var(--alerta-fundo); }
.pastilha-ATENCAO { border-color: var(--aviso); color: var(--aviso); background: var(--aviso-fundo); }
.pastilha-INFORMATIVA { border-color: var(--tinta-fraca); }
.pastilha-APROVADA { border-color: var(--marca); color: var(--marca); }
.pastilha-EM_ANALISE { border-color: var(--aviso); color: var(--aviso); }
.pastilha-REPROVADA { border-color: var(--alerta); color: var(--alerta); }

.etiqueta {
  display: inline-block; margin-left: 0.35rem; padding: 0.05rem 0.4rem; border-radius: 999px;
  background: var(--fundo); border: 1px solid var(--borda); font-size: 0.6875rem; color: var(--tinta-fraca);
}

.acoes-pendencia { position: relative; }
.acoes-pendencia summary { list-style: none; cursor: pointer; }
.acoes-pendencia summary::-webkit-details-marker { display: none; }
.acoes-pendencia-corpo {
  position: absolute; right: 0; top: 100%; z-index: 10; margin-top: 0.3rem;
  background: var(--papel); border: 1px solid var(--borda); border-radius: 8px;
  padding: 0.6rem; display: flex; flex-direction: column; gap: 0.4rem; min-width: 16rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}