/* ==========================================================================
   ESCOLA CONEXÃO — COMPONENTES
   Depende de tokens.css. Nenhum hex solto aqui dentro: se faltar uma cor,
   ela vira token antes de virar componente.

   Prefixo cx- em tudo para poder conviver com o CSS do template do site
   sem briga de especificidade.
   ========================================================================== */

/* ---------- Base ---------- */

.cx {
  font-family: var(--cx-fonte);
  font-weight: var(--cx-peso-normal);
  font-size: var(--cx-txt-base);
  line-height: var(--cx-linha-normal);
  color: var(--cx-texto);
  background: var(--cx-fundo);
}

/* Um único anel de foco para o sistema inteiro. Nunca remova o outline sem
   colocar isto no lugar — é o que permite operar tudo pelo teclado. */
.cx :focus-visible {
  outline: none;
  box-shadow: var(--cx-foco);
  border-radius: var(--cx-raio-sm);
}

/* ---------- Botão ---------- */

.cx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cx-esp-2);
  font-family: inherit;
  font-size: var(--cx-txt-sm);
  font-weight: var(--cx-peso-forte);
  line-height: 1;
  padding: var(--cx-esp-3) var(--cx-esp-6);
  border: 2px solid transparent;
  border-radius: var(--cx-raio-full);
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.cx-btn:disabled,
.cx-btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
}

.cx-btn--principal {
  background: var(--cx-acao);
  color: var(--cx-texto-invertido);
}
.cx-btn--principal:hover:not(:disabled) { background: var(--cx-acao-hover); }

.cx-btn--secundario {
  background: transparent;
  color: var(--cx-acao);
  border-color: var(--cx-acao);
}
.cx-btn--secundario:hover:not(:disabled) { background: var(--cx-acao-suave); }

.cx-btn--texto {
  background: transparent;
  color: var(--cx-acao);
  padding-inline: var(--cx-esp-2);
}
.cx-btn--texto:hover:not(:disabled) { text-decoration: underline; }

/* Destrutivo: some do fluxo normal, aparece só onde apaga coisa. */
.cx-btn--perigo {
  background: var(--cx-atrasado);
  color: var(--cx-texto-invertido);
}

.cx-btn--pequeno { font-size: var(--cx-txt-xs); padding: var(--cx-esp-2) var(--cx-esp-4); }
.cx-btn--largo   { width: 100%; }

/* ---------- Campo de formulário ---------- */

.cx-campo {
  display: flex;
  flex-direction: column;
  gap: var(--cx-esp-1);
}
.cx-campo__rotulo {
  font-size: var(--cx-txt-sm);
  font-weight: var(--cx-peso-forte);
  color: var(--cx-texto-suave);
}
.cx-campo__controle {
  font-family: inherit;
  font-size: var(--cx-txt-base);
  font-weight: var(--cx-peso-normal);
  color: var(--cx-texto);
  background: var(--cx-superficie);
  padding: var(--cx-esp-3) var(--cx-esp-4);
  border: 1.5px solid var(--cx-borda);
  border-radius: var(--cx-raio-md);
  transition: border-color .15s ease;
}
.cx-campo__controle:hover { border-color: var(--cx-borda-forte); }
.cx-campo__controle::placeholder { color: var(--cx-texto-suave); opacity: .7; }

/* Texto de ajuda e de erro. O erro nunca é só a borda vermelha: quem não
   enxerga a cor precisa da frase. */
.cx-campo__ajuda { font-size: var(--cx-txt-xs); color: var(--cx-texto-suave); }
.cx-campo__erro  { font-size: var(--cx-txt-xs); color: var(--cx-atrasado); font-weight: var(--cx-peso-medio); }
.cx-campo--invalido .cx-campo__controle { border-color: var(--cx-atrasado); }

/* Valores em dinheiro alinham pela direita, em fonte tabular. */
.cx-campo__controle--moeda {
  font-family: var(--cx-fonte-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ---------- Área de soltar arquivo ----------
   Para a importação de extrato. Continua sendo um <input type="file">
   por baixo, então funciona no teclado e no leitor de tela. */

.cx-solta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cx-esp-2);
  text-align: center;
  padding: var(--cx-esp-12) var(--cx-esp-6);
  border: 2px dashed var(--cx-borda-forte);
  border-radius: var(--cx-raio-lg);
  background: var(--cx-fundo-alt);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.cx-solta:hover,
.cx-solta--ativo {
  border-color: var(--cx-acao);
  background: var(--cx-acao-suave);
}
.cx-solta__titulo { font-weight: var(--cx-peso-forte); }
.cx-solta__dica   { font-size: var(--cx-txt-sm); color: var(--cx-texto-suave); }

/* ---------- Selo de estado ----------
   A palavra vem sempre junto da cor. Cor sozinha não comunica estado. */

.cx-selo {
  display: inline-block;
  font-size: var(--cx-txt-xs);
  font-weight: var(--cx-peso-forte);
  line-height: 1.4;
  padding: var(--cx-esp-1) var(--cx-esp-3);
  border-radius: var(--cx-raio-full);
  white-space: nowrap;
}
.cx-selo--pago     { color: var(--cx-pago);     background: var(--cx-pago-fundo); }
.cx-selo--atrasado { color: var(--cx-atrasado); background: var(--cx-atrasado-fundo); }
.cx-selo--parcial  { color: var(--cx-parcial);  background: var(--cx-parcial-fundo); }
.cx-selo--pendente { color: var(--cx-pendente); background: var(--cx-pendente-fundo); }

/* ---------- Cartão ---------- */

.cx-cartao {
  background: var(--cx-superficie);
  border: 1px solid var(--cx-borda);
  border-radius: var(--cx-raio-lg);
  padding: var(--cx-esp-6);
  box-shadow: var(--cx-sombra-sm);
  display: flex;
  flex-direction: column;
  gap: var(--cx-esp-4);
}
.cx-cartao__titulo {
  font-size: var(--cx-txt-lg);
  font-weight: var(--cx-peso-forte);
  line-height: var(--cx-linha-apertada);
}

/* Cartão de número — o resumo que se lê antes do detalhe. */
.cx-numero { display: flex; flex-direction: column; gap: var(--cx-esp-1); }
.cx-numero__rotulo {
  font-size: var(--cx-txt-xs);
  font-weight: var(--cx-peso-forte);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--cx-texto-suave);
}
.cx-numero__valor {
  font-family: var(--cx-fonte-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--cx-txt-2xl);
  font-weight: var(--cx-peso-forte);
  line-height: 1.1;
}
.cx-numero__apoio { font-size: var(--cx-txt-sm); color: var(--cx-texto-suave); }

/* ---------- Tabela ----------
   Sempre dentro do wrapper: tabela larga rola dentro dela mesma, a página
   nunca rola de lado. */

.cx-tabela-wrap {
  overflow-x: auto;
  border: 1px solid var(--cx-borda);
  border-radius: var(--cx-raio-md);
  background: var(--cx-superficie);
}
.cx-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--cx-txt-sm);
}
.cx-tabela th,
.cx-tabela td {
  text-align: left;
  padding: var(--cx-esp-3) var(--cx-esp-4);
  border-bottom: 1px solid var(--cx-borda);
  white-space: nowrap;
}
.cx-tabela tbody tr:last-child td { border-bottom: none; }
.cx-tabela th {
  font-size: var(--cx-txt-xs);
  font-weight: var(--cx-peso-forte);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--cx-texto-suave);
  background: var(--cx-fundo-alt);
  position: sticky;
  top: 0;
}
.cx-tabela tbody tr:hover { background: var(--cx-acao-suave); }
.cx-tabela .num {
  font-family: var(--cx-fonte-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Linha que precisa de conferência humana. A faixa à esquerda é redundante
   com o selo de propósito — dois sinais para a mesma informação. */
.cx-tabela tr.cx-linha--revisar td:first-child {
  box-shadow: inset 3px 0 0 var(--cx-parcial);
}

/* ---------- Aviso ---------- */

.cx-aviso {
  display: flex;
  gap: var(--cx-esp-3);
  padding: var(--cx-esp-4);
  border-radius: var(--cx-raio-md);
  font-size: var(--cx-txt-sm);
  border-left: 4px solid;
}
.cx-aviso__texto { display: flex; flex-direction: column; gap: var(--cx-esp-1); }
.cx-aviso__titulo { font-weight: var(--cx-peso-forte); }

.cx-aviso--info    { background: var(--cx-turquesa-50); border-color: var(--cx-destaque-forte); color: var(--cx-turquesa-950); }
.cx-aviso--sucesso { background: var(--cx-pago-fundo);     border-color: var(--cx-pago);     color: var(--cx-pago); }
.cx-aviso--atencao { background: var(--cx-parcial-fundo);  border-color: var(--cx-parcial);  color: var(--cx-parcial); }
.cx-aviso--erro    { background: var(--cx-atrasado-fundo); border-color: var(--cx-atrasado); color: var(--cx-atrasado); }

/* ---------- Cabeçalho de página ---------- */

.cx-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cx-esp-4);
  padding-bottom: var(--cx-esp-4);
  border-bottom: 1px solid var(--cx-borda);
}
.cx-topo__titulo {
  font-size: var(--cx-txt-xl);
  font-weight: var(--cx-peso-forte);
  line-height: var(--cx-linha-apertada);
  letter-spacing: -.01em;
}
.cx-topo__apoio { font-size: var(--cx-txt-sm); color: var(--cx-texto-suave); }

/* ---------- Auxiliares ---------- */

.cx-pilha  { display: flex; flex-direction: column; gap: var(--cx-esp-4); }
.cx-linha  { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cx-esp-3); }
.cx-grade  { display: grid; gap: var(--cx-esp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.cx-so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .cx *, .cx *::before, .cx *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}