/* Componentes compartilhados: cartões, botões, alertas, etiquetas, tabelas,
   formulários, abas e atalhos. Só usam as variáveis de tema.css. */

/* ---------- Tipografia do conteúdo ---------- */
.conteudo h1, .cartao-vidro h1 { margin: var(--esp-2) 0 var(--esp-4); font-size: clamp(24px, 3vw, 32px); line-height: 1.15; }
.conteudo h2 { margin: var(--esp-6) 0 var(--esp-3); font-size: 20px; line-height: 1.2; }
.conteudo h3 { margin: var(--esp-5) 0 var(--esp-2); font-size: 17px; }
.conteudo a:where(:not(.botao):not(.atalho):not(.aba)) { color: var(--azul-hover); }
.subtitulo { margin: calc(-1 * var(--esp-2)) 0 var(--esp-4); color: var(--texto-suave); font-weight: 600; }
.trilha { margin: 0; font-size: 14px; font-weight: 600; color: var(--texto-suave); }
.trilha a { text-decoration: none; }
.trilha a:hover { text-decoration: underline; }
.contagem { margin: var(--esp-2) 0; color: var(--texto-suave); font-size: 14px; }
.titulo-acao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3); }
.titulo-acao h1 { margin-bottom: var(--esp-2); }

/* ---------- Cartões ---------- */
.cartao {
  margin: var(--esp-4) 0;
  padding: var(--esp-5);
  border: 1px solid var(--borda);
  border-radius: var(--raio-m);
  background: var(--branco);
  box-shadow: var(--sombra-cartao);
}
.cartao > :first-child { margin-top: 0; }
.cartao > :last-child { margin-bottom: 0; }
.cartao-vidro {
  width: min(440px, 100%);
  padding: var(--esp-6) var(--esp-5);
  border: 1px solid var(--vidro-borda);
  border-radius: var(--raio-g);
  background: var(--vidro-cartao);
  -webkit-backdrop-filter: var(--desfoque-painel);
  backdrop-filter: var(--desfoque-painel);
  box-shadow: var(--sombra-flutuante);
  color: var(--azul);
  text-align: center;
}
.cartao-vidro h1 { margin-top: 0; margin-bottom: var(--esp-2); }
.cartao-vidro__texto { margin: 0 0 var(--esp-5); color: var(--texto-suave); font-weight: 500; }
.cartao-vidro__voltar { margin: var(--esp-5) 0 0; font-size: 15px; font-weight: 600; }
.cartao-vidro__voltar a { color: var(--azul); }

.cartao-vidro--largo { width: min(560px, 100%); }
.cartao-vidro .formulario { text-align: left; }
.cartao-vidro .formulario label { color: var(--azul); }
.divisor { display: flex; align-items: center; gap: var(--esp-3); margin: var(--esp-4) 0; color: var(--texto-suave); font-size: 14px; font-weight: 600; }
.divisor::before, .divisor::after { content: ""; flex: 1; height: 1px; background: var(--borda-forte); }
.bloco-conta { margin-top: var(--esp-5); padding-top: var(--esp-4); border-top: 1px solid var(--borda); }
.bloco-conta p { margin: 0 0 var(--esp-2); }
.nota { margin: var(--esp-4) 0 0; font-size: 13px; line-height: 1.4; color: var(--texto-suave); }

/* ---------- Aviso de Privacidade (texto longo, rascunho) ---------- */
.texto-longo p, .texto-longo li { line-height: 1.55; }
.texto-longo ul { padding-left: 1.2em; }
.texto-longo .cartao h2:first-child { margin-top: 0; }
.faixa-rascunho { margin: 0 0 var(--esp-4); padding: var(--esp-3) var(--esp-4); border: 1px solid #f5d76e; border-radius: var(--raio-p); background: #fff7c2; color: #5c4d00; }
.a-definir { padding: 0 6px; border-radius: 6px; background: #fff7c2; color: #5c4d00; font-weight: 700; }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: var(--raio-pilula);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transicao), border-color var(--transicao), transform var(--transicao), box-shadow var(--transicao);
}
.botao--principal { background: var(--azul); color: var(--branco); }
.botao--principal:hover { background: var(--azul-hover); transform: translateY(-1px); box-shadow: var(--sombra-hover); }
.botao--leve { background: var(--realce-forte); color: var(--azul); }
.botao--leve:hover { background: rgba(18, 50, 90, 0.14); }
.botao--perigo { border-color: currentColor; background: var(--branco); color: var(--erro); }
.botao--perigo:hover { background: var(--erro-fundo); }
.botao--largo { width: 100%; }

/* "Entrar com Google" no padrão visual do Google: fundo branco, borda cinza, G colorido */
.botao-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid #747775;
  border-radius: var(--raio-pilula);
  background: #fff;
  color: #1f1f1f;
  font-family: var(--fonte-google);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .25px;
  cursor: pointer;
  transition: background-color .2s ease, box-shadow .2s ease;
}
.botao-google:hover { background: #f8f9fa; box-shadow: 0 1px 2px rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15); }
.botao-google:active { background: #f1f3f4; }
.botao-google svg { flex: none; width: 20px; height: 20px; }

/* ---------- Alertas ---------- */
.alerta { margin: 0 0 var(--esp-4); padding: var(--esp-3) 14px; border: 1px solid transparent; border-radius: var(--raio-p); text-align: left; font-weight: 500; }
.alerta--erro { border-color: #fecdca; background: var(--erro-fundo); color: var(--erro); }
.alerta--ok { border-color: #abefc6; background: var(--sucesso-fundo); color: var(--sucesso); }
.alerta--info { border-color: #b2ddff; background: var(--info-fundo); color: var(--azul); }

/* ---------- Selos (perfil, situação) e etiquetas de categoria ---------- */
.selo {
  display: inline-block;
  padding: 1px 10px;
  border-radius: var(--raio-pilula);
  background: var(--realce-forte);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}
.selo--admin { background: var(--azul); color: var(--branco); }
.selo--see { background: #dbe7f5; color: var(--azul); }
.selo--escola { background: #fff6cc; color: #5c4d00; }
.selo--candidato { background: #e2f5ea; color: #05603a; }
.selo--ativo, .selo--ativa, .selo--publicado { background: #dcfae6; color: var(--sucesso); }
.selo--inativo, .selo--inativa, .selo--encerrado { background: #fee4e2; color: var(--erro); }
.selo--rascunho { background: #eef1f5; color: var(--azul); }

/* Cores da logo em tons suaves, texto sempre escuro e legível (contraste ≥ 4,5:1) */
.etiqueta {
  display: inline-block;
  padding: 1px 10px;
  border-radius: var(--raio-pilula);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}
.etiqueta--1 { background: #e8e9f6; color: #2d2f7a; }   /* azul ETE */
.etiqueta--2 { background: #e2f5ea; color: #05603a; }   /* verde ETE */
.etiqueta--3 { background: #fff7c2; color: #5c4d00; }   /* amarelo ETE */
.etiqueta--4 { background: #fde7e7; color: #9b1c20; }   /* vermelho ETE */
.etiqueta--5 { background: #e3f1fb; color: var(--azul); } /* céu */

/* ---------- Atalhos da página inicial do painel ---------- */
.atalhos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--esp-4); margin-top: var(--esp-5); }
.atalho {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 96px;
  padding: 18px 20px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-m);
  background: var(--branco);
  box-shadow: var(--sombra-cartao);
  color: var(--azul);
  text-decoration: none;
  transition: background var(--transicao), border-color var(--transicao);
}
.atalho:hover { background: linear-gradient(var(--realce), var(--realce)), var(--branco); border-color: var(--borda-forte); }
.atalho__icone {
  display: inline-flex;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--azul);
  color: var(--branco);
}
.atalho__icone svg { width: 24px; height: 24px; }
.atalho__textos { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.atalho__titulo { font-size: 19px; font-weight: 700; line-height: 1.2; }
.atalho__resumo { font-size: 14px; font-weight: 600; color: var(--texto-suave); }
.atalho__seta { flex: none; font-size: 24px; opacity: 0.4; transition: transform var(--transicao); }
.atalho:hover .atalho__seta { transform: translateX(2px); }

/* ---------- Dados (cadastro) e totais ---------- */
.dados { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--esp-3); margin: 0; }
.dados > div { padding: var(--esp-3) 14px; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--branco); }
.dados .dados__largo { grid-column: 1 / -1; }
.dados dt { font-size: 13px; font-weight: 600; color: var(--texto-suave); }
.dados dd { margin: 2px 0 0; font-weight: 600; }

.totais { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--esp-3); margin: var(--esp-3) 0 0; }
.total { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin: 0; padding: var(--esp-3) 14px; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--branco); }
.total__valor { font-size: 26px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.total .etiqueta { white-space: normal; }
.total--geral { border-color: var(--azul); background: var(--azul); color: var(--branco); font-weight: 600; }

@media (max-width: 767px) {
  .dados, .totais { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .total__valor { font-size: 22px; }
  .cartao { padding: var(--esp-4); }
}

/* ---------- Abas ---------- */
.abas { display: flex; gap: var(--esp-2); margin: var(--esp-5) 0 var(--esp-4); padding: 0; overflow-x: auto; list-style: none; }
.aba {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pilula);
  background: var(--branco);
  color: var(--azul);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transicao), border-color var(--transicao);
}
.aba:hover { border-color: var(--borda-forte); }
.aba[aria-current="page"] { border-color: var(--azul); background: var(--azul); color: var(--branco); }

/* ---------- Filtros e formulários ---------- */
.filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px var(--esp-3); margin: var(--esp-2) 0 var(--esp-3); }
.filtros label, .formulario label { display: flex; flex-direction: column; gap: var(--esp-1); font-size: 14px; font-weight: 600; }
.filtros label { flex: 1 1 200px; min-width: 0; }
.filtros select { width: 100%; max-width: 100%; }
.conteudo input:not([type="checkbox"]), .conteudo select,
.formulario input:not([type="checkbox"]), .formulario select {
  min-height: 44px;
  padding: 8px var(--esp-3);
  border: 1px solid rgba(18, 50, 90, 0.28);
  border-radius: var(--raio-p);
  background: var(--branco);
  color: var(--azul);
  font: inherit;
  font-weight: 500;
}
.conteudo input[readonly] { background: #f2f4f7; }
.formulario input:not([type="checkbox"]) { width: 100%; }
.formulario { display: flex; flex-direction: column; gap: 14px; }
.formulario small { font-weight: 500; color: var(--texto-suave); }
.formulario__acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.formulario__par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.formulario__link { margin: 0; text-align: center; font-size: 15px; font-weight: 600; }
.formulario__link a { color: var(--azul); }
.formulario--linha { margin-bottom: var(--esp-4); }
.formulario--whatsapp { margin-top: var(--esp-4); padding-top: var(--esp-4); border-top: 1px solid var(--borda); }
.caixa { flex-direction: row !important; align-items: flex-start; gap: 10px !important; font-weight: 500 !important; line-height: 1.4; cursor: pointer; }
.caixa input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--azul); }
.caixa a { color: var(--azul); font-weight: 600; }
@media (max-width: 479px) {
  .formulario__par { grid-template-columns: 1fr; }
}

/* ---------- Tabelas ---------- */
.tabela-caixa { border: 1px solid var(--borda); border-radius: var(--raio-m); background: var(--branco); box-shadow: var(--sombra-cartao); }
.tabela { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.tabela th, .tabela td { padding: 10px var(--esp-3); border-bottom: 1px solid var(--divisoria); text-align: left; vertical-align: middle; }
.tabela thead th {
  position: sticky;
  top: var(--topo-altura);          /* cabeçalho fixo logo abaixo da barra de topo */
  z-index: 1;
  background: #f3f7fb;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.tabela thead th:first-child { border-top-left-radius: var(--raio-m); }
.tabela thead th:last-child { border-top-right-radius: var(--raio-m); }
.tabela tbody tr:nth-child(even) td { background: var(--linha-alternada); }
.tabela tbody tr:hover td { background: #eef4fa; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tfoot td { border-top: 2px solid var(--borda); border-bottom: 0; font-weight: 700; background: #f3f7fb; }
.tabela .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela--compacta { font-size: 14px; }
.detalhes { display: block; max-width: 440px; font-size: 12px; white-space: pre-wrap; word-break: break-word; }

/* Telas médias: a tabela rola na horizontal se não couber */
@media (min-width: 768px) and (max-width: 1023px) {
  .tabela-caixa { overflow-x: auto; }
  .tabela thead th { position: static; }
}

/* Celular: cada linha vira um cartão */
@media (max-width: 767px) {
  .tabela-caixa { border: 0; background: transparent; box-shadow: none; }
  .tabela, .tabela tbody, .tabela tfoot, .tabela tr, .tabela td { display: block; width: 100%; }
  .tabela thead { display: none; }
  .tabela tr {
    margin-bottom: var(--esp-3);
    padding: var(--esp-2) var(--esp-4);
    border: 1px solid var(--borda);
    border-radius: var(--raio-m);
    background: var(--branco);
    box-shadow: var(--sombra-cartao);
  }
  .tabela tbody tr:nth-child(even) td, .tabela tbody tr:hover td { background: transparent; }
  .tabela td, .tabela tfoot td {
    display: flex;
    justify-content: space-between;
    gap: var(--esp-4);
    padding: 6px 0;
    border-bottom: 1px solid var(--divisoria);
    background: transparent;
    text-align: right;
  }
  .tabela tr td:last-child { border-bottom: 0; }
  .tabela td::before {
    content: attr(data-rotulo);
    flex: none;
    max-width: 50%;
    color: var(--texto-suave);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
  }
  .tabela td[data-rotulo=""]::before { content: none; }
  .tabela td.tabela__principal { display: block; padding-top: 4px; font-size: 16px; font-weight: 700; text-align: left; }
  .tabela td.tabela__principal::before { content: none; }
  .tabela tfoot tr { border-color: var(--azul); }
  .detalhes { max-width: 60%; }
}

/* ---------- Lista simples (certames de que a escola participa) ---------- */
.lista-simples { margin: 0; padding: 0; list-style: none; }
.lista-simples li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2); padding: var(--esp-3) 0; border-bottom: 1px solid var(--divisoria); }
.lista-simples li:last-child { border-bottom: 0; }

/* ---------- Paginação ---------- */
.paginacao { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--esp-4); margin-top: var(--esp-4); font-weight: 600; }