/* CSS do sistema, escrito à mão: um arquivo só, sem framework e sem nada
   de fora. Cores e espaçamentos são variáveis; fonte é a do sistema. */
:root {
  --cor-fundo: #f4f5f7;
  --cor-superficie: #ffffff;
  --cor-texto: #1d2733;
  --cor-texto-suave: #5b6675;
  --cor-borda: #d5dae1;
  --cor-fundo-coluna: #eaedf1;
  --cor-destaque: #1f5fae;
  --cor-destaque-texto: #ffffff;
  --cor-erro: #a32020;
  --cor-erro-fundo: #fbeaea;
  /* As cores do prazo (14/10), próprias e distintas do vermelho de erro, que
     é o do "PO pendente" e das recusas. */
  --cor-prazo-em-dia: #2e7d32;
  --cor-prazo-em-dia-fundo: #e8f3e9;
  --cor-prazo-amarelo: #c98a00;
  --cor-prazo-amarelo-fundo: #fff4d6;
  --cor-prazo-vermelho: #e0461f;
  --cor-prazo-vermelho-fundo: #fdebe5;

  --espaco-1: 0.25rem;
  --espaco-2: 0.5rem;
  --espaco-3: 0.75rem;
  --espaco-4: 1rem;
  --espaco-5: 1.5rem;
  --espaco-6: 2rem;

  --raio: 6px;
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte);
  font-size: 1rem;
  line-height: 1.45;
}

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-4);
  padding: var(--espaco-3) var(--espaco-5);
  background: var(--cor-superficie);
  border-bottom: 1px solid var(--cor-borda);
}

.marca { font-weight: 700; color: var(--cor-texto); text-decoration: none; }

.navegacao { display: flex; align-items: center; gap: var(--espaco-4); }
.usuario { color: var(--cor-texto-suave); }
.linha { display: inline; margin: 0; }

.conteudo { padding: var(--espaco-5); }

.cartao {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: var(--espaco-5);
}
.estreito { max-width: 28rem; margin: var(--espaco-6) auto; }

h1 { margin: 0 0 var(--espaco-4); font-size: 1.4rem; }

input[type="text"], input[type="email"], input[type="password"] {
  width: 100%;
  padding: var(--espaco-2) var(--espaco-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  font: inherit;
}

button {
  padding: var(--espaco-2) var(--espaco-4);
  border: 0;
  border-radius: var(--raio);
  background: var(--cor-destaque);
  color: var(--cor-destaque-texto);
  font: inherit;
  cursor: pointer;
}
.botao-discreto {
  background: transparent;
  color: var(--cor-destaque);
  border: 1px solid var(--cor-borda);
}

.erro { color: var(--cor-erro); }

.aviso {
  margin: var(--espaco-3) var(--espaco-5) 0;
  padding: var(--espaco-3) var(--espaco-4);
  border: 1px solid var(--cor-erro);
  border-radius: var(--raio);
  background: var(--cor-erro-fundo);
  color: var(--cor-erro);
}
.aviso[hidden] { display: none; }

/* Quadro: a página rola (decisão do Operador, 08/10), sem JavaScript.
   Na vertical, ela desce no máximo a altura do cabeçalho e da faixa: as
   colunas têm a altura da tela, e com a página rolada até o fim o quadro a
   ocupa inteira. Cada coluna rola por dentro, com o título preso no alto, e
   a roda no fim de uma coluna passa para a página (sem overscroll-behavior,
   de propósito). Na horizontal, a rolagem é a da própria página, e por isso
   a barra é a da janela, sempre à vista no pé da tela; o corpo cresce até a
   largura das colunas, e o cabeçalho e o que fica acima das colunas ficam
   presos à esquerda, na largura visível. */
body:has(.quadro) {
  /* A largura visível, sem a barra vertical da página. */
  --largura-visivel: calc(100vw - 1rem);
  width: max-content;
  min-width: 100%;
}
body:has(.quadro) .topo,
body:has(.quadro) > .aviso {
  position: sticky;
  left: 0;
  width: var(--largura-visivel);
}
body:has(.quadro) > .aviso { width: calc(var(--largura-visivel) - 2 * var(--espaco-5)); }
body:has(.quadro) .conteudo { padding-bottom: 0; }
body:has(.quadro) .conteudo > :not(#colunas-do-quadro):not(#painel-do-card) {
  position: sticky;
  left: var(--espaco-5);
  max-width: calc(var(--largura-visivel) - 2 * var(--espaco-5));
}
.quadro {
  display: flex;
  gap: var(--espaco-4);
  align-items: stretch;
  height: 100vh;
  height: 100dvh;
  /* Folga no pé para a barra horizontal da janela não cobrir o fim das
     colunas. */
  padding-bottom: var(--espaco-4);
}
.coluna {
  flex: 0 0 16rem;
  min-height: 0;
  overflow-y: auto;
  background: var(--cor-fundo-coluna);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: var(--espaco-3);
}
.coluna h2 {
  position: sticky;
  top: calc(-1 * var(--espaco-3));
  z-index: 1;
  margin: calc(-1 * var(--espaco-3)) calc(-1 * var(--espaco-3)) var(--espaco-3);
  padding: var(--espaco-3);
  background: var(--cor-fundo-coluna);
  font-size: 1rem;
  display: flex;
  justify-content: space-between;
  gap: var(--espaco-2);
}
.contagem { color: var(--cor-texto-suave); font-weight: 400; }
.card {
  /* A referência do texto só para leitor de tela da borda do prazo: sem
     ela, o texto escondido se prende à página, fica fora da rolagem da
     coluna e estica a página para baixo (14/10). */
  position: relative;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: var(--espaco-3);
  margin-bottom: var(--espaco-2);
}
.card h3 { margin: 0 0 var(--espaco-2); font-size: 0.95rem; }
/* A borda do prazo no card fechado (14/10): só amarelo e vermelho. */
.card.prazo-amarelo { border-left: 4px solid var(--cor-prazo-amarelo); }
.card.prazo-vermelho { border-left: 4px solid var(--cor-prazo-vermelho); }
/* Texto só para leitor de tela. */
.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;
}
.card .identidade { margin: 0 0 var(--espaco-2); font-size: 0.85rem; color: var(--cor-texto-suave); }
.card .modalidade { margin: 0 0 var(--espaco-2); font-size: 0.85rem; color: var(--cor-texto-suave); }
/* "Encerrando em X dias", em Matriculado: a mesma pílula de contorno das marcas. */
.encerrando-em {
  display: inline-block;
  margin: var(--espaco-2) var(--espaco-2) 0 0;
  padding: 0 var(--espaco-2);
  border: 1px solid var(--cor-texto-suave);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}
/* A coluna Lead: o "↑↓" da ordem no título, a nota dos filtros e a etiqueta
   de apresentação, com o contorno das outras etiquetas do card fechado. */
.ordem-do-lead { margin-left: auto; color: var(--cor-texto-suave); text-decoration: none; font-weight: 400; }
.ordem-do-lead:hover, .ordem-do-lead:focus-visible { color: var(--cor-destaque); }
.nota-da-coluna { margin: 0; font-size: 0.85rem; font-style: italic; color: var(--cor-texto-suave); }
.apresentacao-do-lead {
  display: inline-block;
  margin: 0;
  padding: 0 var(--espaco-2);
  border: 1px solid var(--cor-texto-suave);
  border-radius: 999px;
  font-size: 0.8rem;
}
.aviso-do-filtro { margin: var(--espaco-2) 0 0; font-size: 0.85rem; font-style: italic; color: var(--cor-texto-suave); }

/* Filtros do quadro (§4): cinco controles fora do botão, o resto dentro. */
.filtros { margin: 0 0 var(--espaco-3); display: flex; flex-wrap: wrap; gap: var(--espaco-2) var(--espaco-4); align-items: flex-start; }
.filtros-fora { display: flex; flex-wrap: wrap; gap: var(--espaco-2) var(--espaco-4); align-items: flex-start; font-size: 0.9rem; }
.filtros-fora input[type="search"] { width: 11rem; }
.filtros-dentro { font-size: 0.9rem; }
.filtros-dentro[open] { flex-basis: 100%; }
.filtros-dentro summary { cursor: pointer; }
/* "Mais filtros" com cara de botão, de contorno: fechado, diz quantos de
   dentro estão ligados; aberto, "Recolher filtros". */
/* "Mais filtros", "Filtrar" e "Listas de trabalho" do mesmo tamanho, cada um
   com as suas cores. */
.botao-mais-filtros, .botao-filtrar, .botao-listas {
  display: inline-block;
  min-width: 8rem;
  padding: var(--espaco-2) var(--espaco-4);
  border: 1px solid var(--cor-destaque);
  border-radius: var(--raio);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}
.botao-mais-filtros {
  list-style: none;
  background: var(--cor-superficie);
  color: var(--cor-destaque);
}
.botao-mais-filtros::-webkit-details-marker { display: none; }
.botao-mais-filtros:hover, .botao-mais-filtros:focus-visible { background: var(--cor-fundo-coluna); }
.filtros-dentro[open] > .botao-mais-filtros .quando-fechado,
.filtros-dentro:not([open]) > .botao-mais-filtros .quando-aberto { display: none; }
/* As duas filas de "Mais filtros" com a mesma regra: Estado de passo,
   Posição e Tipo numa, os campos de valor na outra. Flex com gap, sem o
   espaço em branco que o inline-block somava entre os grupos. */
.grupos-de-filtro, .campos-de-valor { display: flex; flex-wrap: wrap; gap: var(--espaco-2); margin-top: var(--espaco-2); }
.grupos-de-filtro > .grupo-de-valor { max-width: none; }
.grupo-de-valor.tipo > div { display: flex; gap: var(--espaco-3); margin-top: var(--espaco-1); }
/* Com "Mais filtros" aberto, as colunas somem; o que fica acima delas (lista
   ligada, erros e resumo) continua à vista. Voltam ao recolher ou filtrar. */
body:has(.filtros-dentro[open]) #colunas-do-quadro { display: none; }
.frase-da-posicao { margin: var(--espaco-2) 0 0; color: var(--cor-texto-suave); }
/* O Filtrar do fim do painel com espaço embaixo, sem colar no que vem depois. */
.filtros-acoes { display: flex; gap: var(--espaco-3); align-items: center; margin-bottom: var(--espaco-4); }

/* A faixa do alto do quadro, em duas filas: a primeira é a área de fora
   (buscas, datas e, no fim, o contador "a conferir"); a segunda, "Mais
   filtros", Filtrar, Limpar, as listas e, à direita, as somas por grupo.
   Com "Mais filtros" aberto, o painel ocupa a largura e o resto da segunda
   fila desce para depois dele, como antes. */
body:has(.quadro) .conteudo { padding-top: var(--espaco-3); }
/* A faixa fica presa à esquerda (sticky), e por isso é um contexto de
   empilhamento próprio: os painéis por cima (listas e formulários de lista)
   só passam por cima dos títulos presos das colunas se a faixa inteira
   estiver acima deles. Abaixo do card aberto, que vem por cima de tudo. */
.faixa-do-quadro { position: relative; z-index: 5; }
.faixa-do-quadro .filtros { align-items: center; }
.faixa-do-quadro .filtros-fora { flex-basis: 100%; }
.faixa-do-quadro .filtros-fora .a-conferir { margin-left: auto; }
.faixa-do-quadro .filtros-acoes { margin-bottom: 0; }
.somas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-1) var(--espaco-3);
  align-items: baseline;
  margin: 0 0 0 auto;
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
}
.soma strong { color: var(--cor-texto); font-weight: 600; }
/* O Não matriculado, separado das somas: não é soma de coluna. */
.soma-nao-matriculado { padding-left: var(--espaco-3); border-left: 1px solid var(--cor-borda); }
.erros-do-filtro { margin: 0 0 var(--espaco-2); padding-left: var(--espaco-5); font-size: 0.9rem; }
/* O resumo dos filtros ligados, acima das colunas: uma pílula por filtro,
   com o "×" que tira só ele. */
.filtros-ligados { display: flex; flex-wrap: wrap; gap: var(--espaco-2); align-items: baseline; margin: 0 0 var(--espaco-2); font-size: 0.85rem; }
.filtros-ligados-titulo { font-weight: 600; }
.pilula-de-filtro {
  display: inline-flex;
  gap: var(--espaco-2);
  align-items: baseline;
  padding: 0 var(--espaco-2);
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  background: var(--cor-superficie);
}
.tirar-filtro { color: var(--cor-texto-suave); text-decoration: none; font-weight: 700; }
.tirar-filtro:hover, .tirar-filtro:focus-visible { color: var(--cor-erro); }

/* Card aberto: painel largo, com volta ao quadro. Só leitura. */
#painel-do-card:not(:empty) {
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow: auto;
  padding: var(--espaco-5);
  background: var(--cor-fundo);
}
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover, .card h3 a:focus-visible { text-decoration: underline; color: var(--cor-destaque); }

.card-aberto { max-width: 70rem; margin: 0 auto; }
.card-aberto h2 { margin: 0 0 var(--espaco-3); font-size: 1.1rem; }
.card-aberto h3 { margin: 0 0 var(--espaco-2); font-size: 0.95rem; }
.card-aberto dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: var(--espaco-1) var(--espaco-4); font-size: 0.9rem; }
.card-aberto dt { color: var(--cor-texto-suave); }
.card-aberto dd { margin: 0; }
.volta { margin: 0 0 var(--espaco-3); }

.faixa, .informacoes-gerais, .faixa-de-po, .secao {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: var(--espaco-3) var(--espaco-4);
  margin-bottom: var(--espaco-3);
}
.faixa-passo { margin: 0; display: flex; flex-wrap: wrap; gap: var(--espaco-3); align-items: baseline; }
.faixa-linha { margin: var(--espaco-1) 0 0; }
.faixa-setor { color: var(--cor-texto-suave); }
.chip {
  display: inline-block;
  padding: 0 var(--espaco-2);
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  background: var(--cor-fundo-coluna);
  font-size: 0.85rem;
}
/* O chip do prazo na faixa do card aberto (14/10). Sem regra de prazo, cinza. */
.chip.prazo-em_dia { border-color: var(--cor-prazo-em-dia); background: var(--cor-prazo-em-dia-fundo); color: var(--cor-prazo-em-dia); font-weight: 600; }
.chip.prazo-amarelo { border-color: var(--cor-prazo-amarelo); background: var(--cor-prazo-amarelo-fundo); color: var(--cor-texto); font-weight: 600; }
.chip.prazo-vermelho { border-color: var(--cor-prazo-vermelho); background: var(--cor-prazo-vermelho-fundo); color: var(--cor-texto); font-weight: 600; }
.chip.prazo-sem_prazo, .chip.prazo-sem-regra { color: var(--cor-texto-suave); }
.blocos { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--espaco-4); }

.informacoes-gerais > summary, .faixa-de-po > summary { cursor: pointer; }
.informacoes-gerais > summary h2, .faixa-de-po > summary h2 { display: inline; }
.secao summary { cursor: pointer; display: flex; justify-content: space-between; gap: var(--espaco-3); font-weight: 600; }
.secao-marca { font-weight: 400; color: var(--cor-texto-suave); font-size: 0.85rem; }
.secao-indisponivel, .secao-indisponivel_com_conteudo { opacity: 0.75; }
.passos { list-style: none; margin: var(--espaco-3) 0 0; padding: 0; }
.passo { border-top: 1px solid var(--cor-borda); padding: var(--espaco-2) 0; }
.passo-cabecalho { display: flex; flex-wrap: wrap; gap: var(--espaco-3); align-items: baseline; }
.passo-nome { font-weight: 600; }
.passo-setor, .passo-marca, .passo-nota { color: var(--cor-texto-suave); font-size: 0.85rem; }
.passo-nota, .passo-aviso, .passo-trava, .passo-liberacao { margin: var(--espaco-1) 0 0; }
.passo-trava { color: var(--cor-erro); font-size: 0.9rem; }
.passo-atual { background: var(--cor-fundo-coluna); padding-left: var(--espaco-2); padding-right: var(--espaco-2); }
.falta { color: var(--cor-erro); }

.aviso-po {
  margin: var(--espaco-2) 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cor-erro);
}

/* Administração de contas. */
.tabela { width: 100%; border-collapse: collapse; background: var(--cor-superficie); }
.tabela th, .tabela td {
  padding: var(--espaco-2) var(--espaco-3);
  border-bottom: 1px solid var(--cor-borda);
  text-align: left;
}
.dados { display: grid; grid-template-columns: max-content 1fr; gap: var(--espaco-1) var(--espaco-4); }
.dados dt { color: var(--cor-texto-suave); }
.dados dd { margin: 0; }
#detalhe-da-conta .cartao { margin-bottom: var(--espaco-4); }
#detalhe-da-conta h2 { margin: 0 0 var(--espaco-3); font-size: 1.1rem; }
.senha-provisoria { font-family: ui-monospace, monospace; font-size: 1.2rem; font-weight: 700; user-select: all; }
.aviso-ok { color: var(--cor-destaque); font-weight: 600; }

/* Estado de passo em várias linhas (§4.3): passo mais os três rádios. */
.estado-de-passo #linhas-de-passo { margin-top: var(--espaco-2); }
.linha-de-passo { display: flex; flex-wrap: wrap; gap: var(--espaco-2) var(--espaco-3); align-items: center; margin-bottom: var(--espaco-1); }
.linha-de-passo select { max-width: 22rem; }

/* Valor de campo (§4.2): os doze campos, recolhidos, menos o que tem valor. */
.grupo-de-valor { border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: var(--espaco-2); min-width: 14rem; max-width: 24rem; }
.grupo-de-valor summary { cursor: pointer; font-weight: 600; }
.nota-do-prazo { margin: var(--espaco-1) 0 0; font-size: 0.8rem; color: var(--cor-texto-suave); }
.grupo-de-valor .opcoes { display: flex; flex-direction: column; max-height: 10rem; overflow: auto; margin-top: var(--espaco-1); }
.grupo-de-valor .opcoes.especiais { flex-direction: row; gap: var(--espaco-3); max-height: none; color: var(--cor-texto-suave); }

/* As três caixas de data (§4.1), fora de "Mais filtros": as datas numa
   linha, os dias a partir de hoje na outra. */
.grupo-de-data { min-width: 11rem; max-width: none; }
.grupo-de-data .linha-de-data { margin-top: var(--espaco-1); white-space: nowrap; }
.grupo-de-data input[type="number"] { width: 4.5rem; }

/* Listas de trabalho (§4.6): a ligada fica sempre à vista. A escolha de
   lista é um botão da segunda fila da faixa, que abre um painel por cima. */
.trocar-lista { position: relative; font-size: 0.9rem; }
/* O tamanho é o da regra comum dos botões da faixa; aqui, só as cores. */
.botao-listas {
  list-style: none;
  cursor: pointer;
  background: var(--cor-superficie);
  color: var(--cor-destaque);
}
.botao-listas:hover, .botao-listas:focus-visible { background: var(--cor-fundo-coluna); }
.trocar-lista summary::-webkit-details-marker { display: none; }
.trocar-lista summary::after { content: " ▾"; }
.trocar-lista .listas h2 { display: none; }
.trocar-lista[open] > .listas, #painel-da-lista:not(:empty) {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 22rem;
  max-width: 36rem;
  max-height: 60vh;
  overflow: auto;
  margin-top: var(--espaco-1);
  padding: var(--espaco-3);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.trocar-lista .listas ul { margin: 0; padding-left: var(--espaco-4); }
/* Os formulários de lista, no painel por cima: o painel já tem a borda. */
#painel-da-lista { z-index: 30; }
#painel-da-lista .lista-form { margin: 0; padding: 0; border: 0; }
.lista-ligada { display: flex; flex-wrap: wrap; gap: var(--espaco-2) var(--espaco-3); align-items: baseline; margin: 0 0 var(--espaco-2); font-size: 0.9rem; }
.lista-ligada-nome { font-weight: 600; }
.lista-ligada-autoria, .suave { color: var(--cor-texto-suave); }
.lista-alterada { padding: 0 var(--espaco-2); border: 1px solid var(--cor-borda); border-radius: var(--raio); }
.salvar-busca { margin: 0 0 var(--espaco-2); font-size: 0.9rem; }
.lista-form { max-width: 32rem; margin: 0 0 var(--espaco-3); padding: var(--espaco-3); border: 1px solid var(--cor-borda); border-radius: var(--raio); }
.lista-form h2 { margin: 0 0 var(--espaco-2); font-size: 1rem; }

/* A marca "a conferir" (decisão da Bianca, 02/10): a marca no card e no passo,
   o contador fora do botão, o bloco do card aberto e o botão de confirmar. */
.marca-a-conferir {
  display: inline-block;
  margin: var(--espaco-1) 0 0;
  padding: 0 var(--espaco-2);
  border: 1px solid var(--cor-destaque);
  border-radius: 999px;
  color: var(--cor-destaque);
  font-size: 0.8rem;
  font-weight: 600;
}
.filtros .a-conferir { display: inline-flex; flex-wrap: wrap; gap: var(--espaco-2) var(--espaco-3); align-items: baseline; }
.contador-a-conferir, .contador-a-conferir-fora {
  padding: 0 var(--espaco-2);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}
.contador-a-conferir { background: var(--cor-destaque); color: var(--cor-destaque-texto); }
/* Com o filtro ligado, o contador ganha um anel: quem desliga é a pílula. */
.contador-a-conferir.ligado { box-shadow: 0 0 0 2px var(--cor-superficie), 0 0 0 4px var(--cor-destaque); }
.contador-a-conferir-fora { border: 1px solid var(--cor-destaque); color: var(--cor-destaque); }
.card-aberto .a-conferir {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-destaque);
  border-left-width: 4px;
  border-radius: var(--raio);
  padding: var(--espaco-3) var(--espaco-4);
  margin-bottom: var(--espaco-3);
}
.card-aberto .a-conferir h2 { margin: 0; font-size: 1.05rem; color: var(--cor-destaque); }
.motivos-a-conferir { margin: var(--espaco-2) 0 0; padding-left: var(--espaco-5); }
.passos-do-motivo { color: var(--cor-texto-suave); }
.confirmar-conferencia { margin: var(--espaco-3) 0 0; }
.aviso-da-conferencia {
  margin: 0 0 var(--espaco-3);
  padding: var(--espaco-2) var(--espaco-4);
  border: 1px solid var(--cor-destaque);
  border-radius: var(--raio);
  background: var(--cor-superficie);
  color: var(--cor-destaque);
  font-weight: 600;
}

/* O lead: o "+ Novo lead" no título da coluna, a página do lead e o
   formulário de criar e editar. */
.novo-lead { font-size: 0.85rem; font-weight: 600; color: var(--cor-destaque); text-decoration: none; white-space: nowrap; }
.novo-lead:hover, .novo-lead:focus-visible { text-decoration: underline; }
.card-do-lead h3 a { color: inherit; }
.pagina-do-lead, .lead-form { max-width: 44rem; }
.situacao-do-lead { margin: 0 0 var(--espaco-1); font-weight: 600; }
.aviso-do-lead {
  margin: 0 0 var(--espaco-3);
  padding: var(--espaco-2) var(--espaco-4);
  border: 1px solid var(--cor-destaque);
  border-radius: var(--raio);
  background: var(--cor-superficie);
  color: var(--cor-destaque);
}
.botao-contorno {
  display: inline-block;
  padding: var(--espaco-2) var(--espaco-4);
  border: 1px solid var(--cor-destaque);
  border-radius: var(--raio);
  color: var(--cor-destaque);
  font-weight: 600;
  text-decoration: none;
}
.campos-do-lead { display: grid; grid-template-columns: max-content 1fr; gap: var(--espaco-2) var(--espaco-4); margin: var(--espaco-4) 0; }
.campos-do-lead dt { color: var(--cor-texto-suave); }
.campos-do-lead dd { margin: 0; overflow-wrap: anywhere; }
.pagina-do-lead h2 { font-size: 1.05rem; margin: var(--espaco-5) 0 var(--espaco-2); }
.registro-do-lead { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.registro-do-lead th, .registro-do-lead td { padding: var(--espaco-1) var(--espaco-2); border-bottom: 1px solid var(--cor-borda); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.lead-form fieldset { margin: 0 0 var(--espaco-4); padding: var(--espaco-3) var(--espaco-4); border: 1px solid var(--cor-borda); border-radius: var(--raio); background: var(--cor-superficie); }
.lead-form legend { font-weight: 600; padding: 0 var(--espaco-1); }
.lead-form label { display: block; margin: 0 0 var(--espaco-2); }
.lead-form label.opcao { display: inline-block; margin-right: var(--espaco-4); }
.lead-form label[hidden] { display: none; }
.lead-form select, .lead-form input[type="date"], .lead-form textarea { display: block; width: 100%; padding: var(--espaco-2); border: 1px solid var(--cor-borda); border-radius: var(--raio); font: inherit; }
.lead-form input[type="date"] { width: auto; }
.lead-form .erro { margin: 0 0 var(--espaco-2); }

/* A conversão do lead: o Converter no card fechado, a escolha do aluno e o
   resumo. A recusa vem antes do clique, no lugar da opção de marcar. */
.converter-lead { margin: var(--espaco-1) 0 0; font-size: 0.85rem; }
.converter-lead a { font-weight: 600; color: var(--cor-destaque); }
section.converter-lead { max-width: 44rem; font-size: 1rem; }
section.converter-lead h2 { font-size: 1.05rem; margin: var(--espaco-5) 0 var(--espaco-2); }
.alunos-para-escolher { list-style: none; margin: 0; padding: 0; }
.aluno-para-escolher { padding: var(--espaco-2) 0; border-bottom: 1px solid var(--cor-borda); overflow-wrap: anywhere; }
.motivos-do-candidato { color: var(--cor-texto-suave); }
.recusa-da-conversao { margin: var(--espaco-1) 0 0; color: var(--cor-erro); }
.rematricula-da-conversao { font-weight: 600; }
.busca-da-conversao { display: flex; flex-wrap: wrap; gap: var(--espaco-2); align-items: end; margin: var(--espaco-3) 0; }
.contato-da-conversao { border-collapse: collapse; font-size: 0.9rem; }
.contato-da-conversao th, .contato-da-conversao td { padding: var(--espaco-1) var(--espaco-3); border-bottom: 1px solid var(--cor-borda); text-align: left; overflow-wrap: anywhere; }
.pergunta-da-empresa { margin: 0 0 var(--espaco-2); padding: var(--espaco-2) var(--espaco-3); border: 1px solid var(--cor-destaque); border-radius: var(--raio); }
.pergunta-da-empresa p { margin: 0 0 var(--espaco-2); font-weight: 600; }
/* O botão que o Enter usa: fora da vista, mas presente. */
.submissao-padrao { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 40rem) {
  .campos-do-lead { grid-template-columns: 1fr; }
  .campos-do-lead dt { margin-top: var(--espaco-2); }
}
/* Arquivar e a página Leads; a linha "Veio do lead" no card aberto. */
.acoes-do-lead { display: flex; flex-wrap: wrap; gap: var(--espaco-2); }
.titulo-do-lead { color: inherit; text-decoration: none; }
.titulo-do-lead:hover, .titulo-do-lead:focus-visible { text-decoration: underline; }
.pagina-dos-leads { max-width: 60rem; }
.abas-dos-leads { display: flex; flex-wrap: wrap; gap: var(--espaco-2); margin: 0 0 var(--espaco-3); }
.abas-dos-leads a { padding: var(--espaco-1) var(--espaco-3); border: 1px solid var(--cor-borda); border-radius: var(--raio); color: var(--cor-destaque); text-decoration: none; }
.abas-dos-leads a.aba-atual { border-color: var(--cor-destaque); background: var(--cor-destaque); color: var(--cor-destaque-texto); }
.abas-dos-leads a.aba-atual .contagem { color: inherit; }
.busca-dos-leads { display: flex; flex-wrap: wrap; gap: var(--espaco-2); align-items: flex-end; margin: 0 0 var(--espaco-3); }
.busca-dos-leads input[type="search"] { padding: var(--espaco-2); border: 1px solid var(--cor-borda); border-radius: var(--raio); font: inherit; }
.tabela-dos-leads { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tabela-dos-leads th, .tabela-dos-leads td { padding: var(--espaco-1) var(--espaco-2); border-bottom: 1px solid var(--cor-borda); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.veio-do-lead { margin: 0 0 var(--espaco-3); color: var(--cor-texto-suave); }

/* A escrita nos passos do card (09/10): o cumprir dentro da linha, os links
   das páginas próprias, e o resultado da escrita abaixo da faixa. */
.passo-cumprir {
  display: flex; flex-wrap: wrap; gap: var(--espaco-2); align-items: center;
  margin: var(--espaco-2) 0 0;
}
.passo-cumprir label { display: inline-flex; gap: var(--espaco-1); align-items: center; }
.passo-corrigir, .passo-anteriores { margin: var(--espaco-1) 0 0; font-size: 0.9rem; }
.passo-corrigir > summary, .passo-anteriores > summary { cursor: pointer; color: var(--cor-destaque); }
.passo-acoes { display: flex; flex-wrap: wrap; gap: var(--espaco-3); margin: var(--espaco-1) 0 0; font-size: 0.9rem; }
.passo-sem-escrita { font-style: italic; }
.passo-do-resultado { outline: 2px solid var(--cor-destaque); outline-offset: 2px; }
.aviso-do-passo, .recusa-do-passo {
  margin: var(--espaco-3) 0 0; padding: var(--espaco-2) var(--espaco-3);
  border: 1px solid var(--cor-borda); border-radius: var(--raio); background: var(--cor-superficie);
}
.recusa-do-passo { border-color: var(--cor-erro); background: var(--cor-erro-fundo); }
.passo-dialogo .aviso-forte { font-weight: 600; }

/* Contato e texto livre (09/10): o link de editar no título do bloco, e o
   valor gravado agora quando o formulário leu outra coisa. */
.editar-bloco { margin-left: var(--espaco-2); font-size: 0.8rem; font-weight: 400; color: var(--cor-destaque); }
.card-campos label { display: block; margin: var(--espaco-3) 0 0; }
.card-campos textarea, .card-campos input[type="email"], .card-campos input[type="tel"] { display: block; width: 100%; max-width: 40rem; }
.campo-mudou { color: var(--cor-erro); }

/* A marca "Já era aluno antes do sistema" (13/10): o botão na mesma linha
   do Sim ou Não, no tamanho do link de editar. */
.marcar-ja-era-aluno { display: inline; margin-left: var(--espaco-2); }
.marcar-ja-era-aluno button { font-size: 0.8rem; }

/* As páginas dos campos de passo e os diálogos de passo (10/10): um espaço
   entre os campos e os botões; o "Por quê?" numa linha própria; as caixas
   de campos a esvaziar uma por linha, alinhadas à esquerda; e o botão na
   altura normal, sem esticar com a linha. */
.card-campos .filtros-acoes, .passo-dialogo .filtros-acoes { margin-top: var(--espaco-4); align-items: center; }
.card-campos .filtros-acoes button, .passo-dialogo .filtros-acoes button { flex: 0 0 auto; align-self: center; height: auto; }
.passo-dialogo form > label { display: block; margin: var(--espaco-3) 0 0; }
.campos-a-esvaziar { margin: var(--espaco-3) 0 0; padding: 0; border: 0; }
.campos-a-esvaziar legend { padding: 0; font-weight: 600; }
.campos-a-esvaziar .opcao { display: flex; gap: var(--espaco-2); align-items: baseline; justify-content: flex-start; margin: var(--espaco-1) 0 0; text-align: left; }
.campo-mudou pre { white-space: pre-wrap; margin: var(--espaco-1) 0 0; font: inherit; }

/* A grade de disponibilidade (10/10): seis dias por quinze horas, na página
   do passo 2 e no filtro do quadro. Rola por dentro em tela estreita. */
.disponibilidade { margin: var(--espaco-3) 0 0; padding: var(--espaco-2) var(--espaco-3); border: 1px solid var(--cor-borda); border-radius: var(--raio); }
.disponibilidade legend { padding: 0 var(--espaco-1); font-weight: 600; }
.disponibilidade .opcao { display: flex; gap: var(--espaco-2); align-items: baseline; }
.grade-de-disponibilidade { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; margin: var(--espaco-2) 0 0; }
.grade-de-disponibilidade th, .grade-de-disponibilidade td { padding: 0 var(--espaco-2); text-align: center; font-weight: 400; }
.grade-de-disponibilidade thead th { font-weight: 600; }
.grade-de-disponibilidade tbody th { text-align: right; color: var(--cor-texto-suave); }
.grade-de-disponibilidade input { margin: 0; }

/* Formar turma (13/10): a caixa dos matriculados da preferência numa linha
   própria; o nível em caixas agrupadas pelo idioma, um bloco por idioma. */
.incluir-matriculados { display: block; margin: var(--espaco-2) 0 0; }
.opcoes-por-idioma .niveis-do-idioma { display: flex; flex-direction: column; margin: 0 0 var(--espaco-2); }
.opcoes-por-idioma .titulo-do-idioma { font-weight: 600; }

/* A pendência (Bianca, 09/10): etiqueta sem cor própria, no card fechado e
   na faixa; o bloco do card aberto; o diálogo. */
.etiqueta-pendencia {
  display: inline-block;
  margin: var(--espaco-1) 0 0;
  padding: 0 var(--espaco-2);
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  color: var(--cor-texto);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
}
.pendencia-do-card {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-superficie);
  padding: var(--espaco-3) var(--espaco-4);
  margin: var(--espaco-3) 0;
}
.pendencia-do-card h2 { margin: 0; font-size: 1.05rem; }
.pendencia-do-card p { margin: var(--espaco-1) 0 0; }
.registrar-pendencia { margin: var(--espaco-3) 0 0; }
.encerrar-processo { margin: 0 0 var(--espaco-3); }
.encerrar-dialogo .escolha { border: 0; padding: 0; margin: var(--espaco-3) 0 0; }
.encerrar-dialogo .escolha .opcao { display: inline-flex; gap: var(--espaco-1); margin: 0 var(--espaco-3) 0 0; }
.encerrar-dialogo .encerrar-resumo { display: grid; grid-template-columns: max-content 1fr; gap: var(--espaco-1) var(--espaco-3); }
.encerrar-dialogo .encerrar-resumo dd { margin: 0; }
.pendencia-dialogo .de-quem { border: 0; padding: 0; margin: var(--espaco-3) 0 0; }
.pendencia-dialogo .de-quem .opcao { display: inline-flex; gap: var(--espaco-1); margin: 0 var(--espaco-3) 0 0; }

/* O Histórico (08/10): os estados e os motivos abrem e fecham sem script;
   cada aluno numa linha, com o detalhe em cinza. O bloco "sem data na
   planilha" fica no fim, separado por uma borda. */
.soma-nao-matriculado { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.historico-bloco { position: relative; margin-bottom: var(--espaco-3); }
.historico-sem-data { border-top: 1px solid var(--cor-borda); padding-top: var(--espaco-2); }
.historico-sem-data h2 { font-size: 1rem; margin: 0 0 var(--espaco-1); }
.historico-estado { margin-bottom: var(--espaco-2); }
.historico-estado > summary { font-weight: 600; cursor: pointer; }
.historico-motivo { margin: var(--espaco-1) 0 var(--espaco-1) var(--espaco-3); }
.historico-motivo > summary { cursor: pointer; }
.historico-alunos { list-style: none; margin: var(--espaco-1) 0; padding-left: var(--espaco-3); }
.historico-aluno { margin-bottom: var(--espaco-2); }
.historico-aluno .historico-detalhe { display: block; font-size: 0.85rem; color: var(--cor-texto-suave); }
.historico-aluno:target { outline: 2px solid var(--cor-destaque); outline-offset: 2px; }

/* O painel "Hoje e esta semana" (15/10): duas seções, as linhas de cada uma
   com a cor em chip, só em amarelo e vermelho, e os motivos embaixo. */
.bloco-do-painel { margin-bottom: var(--espaco-4); }
.linhas-do-painel { list-style: none; margin: var(--espaco-1) 0; padding: 0; }
.linha-do-painel { padding: var(--espaco-2) 0; border-bottom: 1px solid var(--cor-borda); }
.motivos-do-painel { margin: var(--espaco-1) 0 0; padding-left: var(--espaco-4); font-size: 0.9rem; }
.pendencia-do-painel { display: block; color: var(--cor-texto-suave); }
.dia-do-painel { margin: var(--espaco-3) 0 0; font-size: 1rem; }
.vazio-do-painel { color: var(--cor-texto-suave); }
/* O link do painel na faixa do quadro: um link, ao lado dos botões, sem
   entrar na regra comum do tamanho deles. */
.link-do-painel { align-self: center; color: var(--cor-destaque); font-weight: 600; font-size: 0.95rem; }

/* A página Cadastros (15/10): as abas reaproveitam as da página Leads. */
.aviso-do-cadastro {
  margin: 0 0 var(--espaco-3);
  padding: var(--espaco-2) var(--espaco-4);
  border: 1px solid var(--cor-destaque);
  border-radius: var(--raio);
}
.itens-do-cadastro { list-style: none; margin: 0; padding: 0; max-width: 60rem; }
.item-do-cadastro { border-top: 1px solid var(--cor-borda); padding: var(--espaco-2) 0; overflow-wrap: anywhere; }
.item-do-cadastro-linha { display: flex; flex-wrap: wrap; gap: var(--espaco-2) var(--espaco-3); align-items: baseline; }
.item-do-cadastro-nome { font-weight: 600; }
.marca-da-origem { padding: 0 var(--espaco-2); border: 1px solid var(--cor-borda); border-radius: var(--raio); font-size: 0.85rem; }
.acoes-do-cadastro { display: flex; flex-wrap: wrap; gap: var(--espaco-2); margin-left: auto; font-size: 0.85rem; }
.historico-do-cadastro { margin: var(--espaco-1) 0 0; font-size: 0.85rem; }
.historico-do-cadastro summary { cursor: pointer; color: var(--cor-texto-suave); }
.historico-do-cadastro ul { margin: var(--espaco-1) 0 0; padding-left: var(--espaco-5); }
.juntar-cadastro select { max-width: 100%; }
.previa-do-juntar { margin-top: var(--espaco-3); }
/* "Ver os alunos" e "Ver os leads", na prévia do juntar: parecem link. */
.juntar-cadastro .ver-nomes > summary { color: LinkText; text-decoration: underline; cursor: pointer; }
/* "Ver o que muda": menor, com contorno, como "Mais filtros"; o único botão
   cheio da caixa continua sendo o de confirmar. */
.juntar-cadastro .botao-ver-o-que-muda, .corrigir-cadastro .botao-ver-o-que-muda {
  padding: var(--espaco-1) var(--espaco-3);
  border: 1px solid var(--cor-destaque);
  background: var(--cor-superficie);
  color: var(--cor-destaque);
  font-size: 0.85rem;
  font-weight: 600;
}
.juntar-cadastro .botao-ver-o-que-muda:hover, .juntar-cadastro .botao-ver-o-que-muda:focus-visible,
.corrigir-cadastro .botao-ver-o-que-muda:hover, .corrigir-cadastro .botao-ver-o-que-muda:focus-visible {
  background: var(--cor-fundo-coluna);
}
.juntar-cadastro .acoes-da-escolha { margin-top: var(--espaco-3); }