/* site.css — casca do site: cabeçalhos/rodapés de programa, telas Termos e Privacidade, e o
   aviso de tela estreita que substitui a bancada abaixo de 1100px. Só tokens de tokens.css:
   cor nunca em hex aqui (regra de disciplina herdada de componentes.css). */

html, body {
  margin: 0;
  font: var(--tipo-base);
  color: var(--cor-texto);
  background: var(--cor-fundo);
}

/* `[hidden]` é regra do user-agent (origem "user agent", prioridade normal); qualquer classe
   de componente que force `display` (ex.: `.bloco { display: flex; }`) é origem "autor" e vence
   o user-agent mesmo com `hidden` presente — o elemento fica visível e clicável escondido atrás
   do atributo. Reforça aqui pra `hidden` sempre ganhar, em qualquer tela. */
[hidden] {
  display: none !important;
}

a {
  color: var(--cor-acao);
}
a:hover {
  color: var(--cor-acao-ativa);
}

/* ── Base do site (mockup manda na tela) ───────────────────────────────────────
   componentes.css é o catálogo antigo, também usado por index.html e estilo.html: aqui o
   site sobrescreve só o que o mockup pede, sem mexer na aparência daquelas duas páginas. */

/* O app foca o h1 a cada troca de tela (leitor de tela anuncia); o anel é ruído pra quem vê. */
[tabindex="-1"]:focus {
  outline: none;
}

.botao {
  gap: var(--espaco-2);
}

/* Logo: texto na cor da tinta, 22px/700 (mockup; o cabeçalho do Programa usa 21px). */
.logo {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cor-texto);
  text-decoration: none;
}

/* Label de campo: 14px/600 na cor do texto (mockup). */
.campo {
  font-size: 14px;
  font-weight: 600;
  color: var(--cor-texto);
}

/* Campo: caixa com borda em volta, 44px, 16px de fonte. Checkbox e rádio ficam nativos. */
.campo input:not([type="checkbox"]):not([type="radio"]), .campo select, .campo textarea,
input.campo:not([type="checkbox"]):not([type="radio"]), select.campo, textarea.campo {
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 var(--espaco-3);
  font: 16px/1.4 system-ui, sans-serif;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-controle);
}
.campo textarea, textarea.campo {
  padding: var(--espaco-3);
}
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible,
input.campo:focus-visible, select.campo:focus-visible, textarea.campo:focus-visible {
  border-color: var(--cor-acao);
  outline: 2px solid var(--cor-acao-fundo);
}

/* ── Rodapé público (Termos, Privacidade) ──────────────────────────────────────
   88px, uma linha: © à esquerda, o aviso de que o Dose Guia não sugere conduta à direita. */
.rodape-site {
  --site-lateral: max(16px, min(120px, 8.3334%), calc((100% - 1200px) / 2));
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--espaco-2) var(--espaco-6);
  min-height: 88px;
  padding: var(--espaco-6) var(--site-lateral);
  background: var(--cinza-900);
  color: var(--cinza-300);
  font-size: 14px;
  line-height: 1.5;
}
.rodape-site p {
  margin: 0;
}

/* ── Cabeçalho de programa (Conduta/Conferir/Folha) ────────────────────────────── */
/* Programa.dc.html: cabeçalho de 64px, faixa de passos de 72px e rodapé de 48px, brancos, com a
   página em --cinza-50 entre eles. `#tela` vira coluna de altura mínima da janela e o miolo
   (`.programa`) cresce, então o rodapé fica no fim mesmo com pouco conteúdo. O `min-height` que
   cada tela punha no miolo (100vh − cabeçalho) sai daqui: quem garante a altura é a coluna. */
#tela:has(> .cabecalho-programa) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--cinza-50);
}
#tela:has(> .cabecalho-programa) > .programa {
  flex: 1 0 auto;
  min-height: 0;
}
.cabecalho-programa {
  display: flex;
  align-items: center;
  gap: var(--espaco-6);
  box-sizing: border-box;
  height: 64px;
  padding: 0 var(--espaco-6);
  border-bottom: 1px solid var(--cor-borda);
  background: var(--cor-fundo);
}
.cabecalho-programa .logo {
  font-size: 21px;
}
/* O selo empurra Ajuda e a conta para a direita (o espaçador do mockup). */
.cabecalho-programa .selo-demo {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--espaco-2);
  margin-right: auto;
  border-radius: var(--raio-1);
  background: var(--teal-50);
  color: var(--teal-800);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.link-ajuda {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--cor-texto-secundario);
  font-size: 15px;
  text-decoration: none;
}
.conta-programa {
  display: flex;
  align-items: center;
  gap: var(--espaco-1);
}
/* Separador de 1×24px entre Ajuda e a conta (24px de cada lado, como o gap do cabeçalho). */
.conta-programa::before {
  content: "";
  width: 1px;
  height: 24px;
  margin-right: 20px;
  background: var(--cor-borda);
}
.conta-programa-nome {
  color: var(--cor-texto);
  font-size: 15px;
  font-weight: 600;
}
.conta-programa a[data-sair] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 var(--espaco-3);
  color: var(--cor-texto-secundario);
  font-size: 15px;
  text-decoration: none;
}
.conta-programa a[data-sair] svg {
  width: 16px;
  height: 16px;
}
.link-ajuda:hover,
.conta-programa a[data-sair]:hover {
  color: var(--cor-texto);
}

/* Faixa de passos, logo abaixo do cabeçalho: bola de 30px, linha de 64×2px (teal depois de
   um passo feito). */
.passos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-4);
  box-sizing: border-box;
  height: 72px;
  padding: 0 var(--espaco-6);
  border-bottom: 1px solid var(--cor-borda);
  background: var(--cor-fundo);
}
.passo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 var(--espaco-3);
  color: var(--cor-texto-secundario);
  font-size: 16px;
  font-weight: 500;
}
.passo[aria-current="step"] {
  color: var(--cor-texto);
  font-weight: 700;
}
.passo-marcador {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  font-size: 14px;
  font-weight: 700;
}
.passo-marcador.passo-atual {
  background: var(--cor-acao);
  color: var(--cor-fundo);
}
.passo-marcador.passo-feito {
  background: var(--teal-50);
  color: var(--teal-800);
}
.passo-marcador.passo-feito svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.75;
}
.passo-marcador.passo-futuro {
  background: var(--cor-fundo);
  color: var(--cor-texto-secundario);
  border: 1.5px solid var(--cor-borda-forte);
}
.passo-linha {
  flex: none;
  width: 64px;
  height: 2px;
  background: var(--cor-borda);
}
.passo-linha.passo-linha-feita {
  background: var(--cor-acao);
}

/* Impressão: só a folha. A lista de cabeçalho/rodapé fica na seção da Folha; a faixa de
   passos e o fundo cinza da página são deste cromo. */
@media print {
  .passos {
    display: none !important;
  }
  #tela:has(> .cabecalho-programa) {
    display: block;
    min-height: 0;
    background: none;
  }
}

/* ── Rodapé de programa ─────────────────────────────────────────────────────── */
.rodape-programa {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 20px;
  box-sizing: border-box;
  min-height: 48px;
  padding: 0 var(--espaco-6);
  border-top: 1px solid var(--cor-borda);
  background: var(--cor-fundo);
  color: var(--cor-texto-secundario);
  font-size: 13px;
}
.rodape-programa p {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 auto 0 0;
}
.rodape-programa p svg {
  flex: none;
  width: 14px;
  height: 14px;
}
.rodape-programa nav {
  display: flex;
  gap: 20px;
}
.rodape-programa nav a {
  color: var(--cor-texto-secundario);
  text-decoration: none;
}
.rodape-programa nav a:hover {
  color: var(--cor-texto);
  text-decoration: underline;
}
.rodape-programa > span {
  color: var(--cor-texto-apagado);
}

.rodape-programa-opiniao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cor-acao);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.rodape-programa-opiniao svg {
  width: 14px;
  height: 14px;
}

/* ── Diálogo "Enviar opinião" (rodapé do Programa) ─────────────────────────── */
/* Cartão de 420px no canto de baixo à direita, logo acima do rodapé (mockup). Continua modal
   (showModal): o véu fica, o foco preso também. */
#form-opiniao {
  box-sizing: border-box;
  width: 420px;
  max-width: calc(100vw - var(--espaco-8));
  max-height: calc(100vh - 84px);
  margin: auto var(--espaco-6) 60px auto;
  padding: 20px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-2);
  box-shadow: var(--sombra-dialogo);
  color: var(--cor-texto);
}
#form-opiniao[open] {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#form-opiniao > * {
  margin: 0;
}
.opiniao-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-3);
}
.opiniao-cabecalho h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}
.opiniao-fechar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cor-texto-secundario);
  cursor: pointer;
}
.opiniao-fechar svg {
  width: 16px;
  height: 16px;
}
#form-opiniao > label[for="op-texto"] {
  margin-bottom: -8px;
  font-size: 14px;
  font-weight: 600;
}
#form-opiniao .conduta-textarea {
  padding: 10px var(--espaco-3);
  font-size: 15px;
  line-height: 1.5;
}
#form-opiniao #op-aviso {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: -8px;
  color: var(--cinza-700);
  font-weight: 600;
}
#form-opiniao #op-aviso svg {
  flex: none;
  width: 14px;
  height: 14px;
}
.opiniao-procurar {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--cinza-700);
  font-size: 14px;
  line-height: 1.45;
  cursor: pointer;
}
.opiniao-procurar input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--cor-acao);
}
.opiniao-procurar .conduta-ajuda {
  display: inline;
}
.opiniao-contato {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espaco-2);
  color: var(--cor-texto-secundario);
  font-size: 13px;
}
#form-opiniao .dialogo-acoes {
  gap: 10px;
}
#form-opiniao .dialogo-acoes .botao {
  height: 40px;
  font-size: 14px;
}
#form-opiniao [data-opiniao-cancelar] {
  border-color: transparent;
  background: none;
  color: var(--cor-texto-secundario);
}
#form-opiniao [data-opiniao-enviar] {
  padding: 0 18px;
}

/* ── Telas simples (placeholders de home/entrar/cadastro/programa) ────────────── */
.pagina-simples {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--espaco-8) var(--espaco-6);
}
.programa-conteudo {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--espaco-8) var(--espaco-6);
}

/* ── Termos e Privacidade ───────────────────────────────────────────────────── */
/* Termos.dc.html / Privacidade.dc.html. Miolo de 1200px (1248 − 2×24), o mesmo dos 120px de
   margem do mockup em 1440: índice de 280px, 80px de vão e o texto em 760px. */
.cabecalho-doc {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 32px;
  height: 72px;
  padding: 0 max(var(--espaco-6), calc((100% - 1200px) / 2));
  border-bottom: 1px solid var(--cor-borda);
  background: var(--cor-fundo);
}
.cabecalho-doc-abas {
  flex: 1;
  display: flex;
  gap: var(--espaco-2);
}
.cabecalho-doc-abas a {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 18px;
  font-size: 15px;
  font-weight: 500;
  color: var(--cor-texto-secundario);
  text-decoration: none;
}
.cabecalho-doc-abas a:hover {
  color: var(--cor-acao);
}
.cabecalho-doc-abas a[aria-current="page"] {
  background: var(--cor-acao-fundo);
  font-weight: 600;
  color: var(--cor-acao-ativa);
}
.cabecalho-doc-voltar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  font-size: 15px;
  font-weight: 500;
  color: var(--cor-texto-secundario);
  text-decoration: none;
}
.cabecalho-doc-voltar:hover {
  color: var(--cor-acao);
}
.cabecalho-doc-voltar svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.25;
}
/* Com sessão, app.js põe "Voltar ao Programa" antes do cabeçalho: alinhado com o logo. */
.voltar-programa:has(+ .cabecalho-doc) {
  padding-left: max(var(--espaco-6), calc((100% - 1200px) / 2));
}

.pagina-doc {
  box-sizing: border-box;
  max-width: 1248px;
  margin: 0 auto;
  padding: 56px var(--espaco-6) 80px;
}
.doc-corpo {
  display: flex;
  align-items: flex-start;
  gap: 80px;
}
.indice {
  box-sizing: border-box;
  width: 280px;
  flex-shrink: 0;
  position: sticky;
  top: var(--espaco-6);
  padding: 20px;
  background: var(--cor-fundo-suave);
  border-radius: var(--raio-2);
}
.indice-titulo {
  padding-bottom: var(--espaco-2);
  font-size: 13px;
  font-weight: 700;
  color: var(--cor-texto);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.indice a {
  display: block;
  padding: 7px 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--cor-texto-secundario);
  text-decoration: none;
}
.indice a:hover {
  color: var(--cor-acao);
}

.doc {
  flex: 0 1 760px;
  min-width: 0;
}
.doc a {
  color: var(--cor-acao);
}
.doc a:hover {
  color: var(--cor-acao-ativa);
}
.doc h1 {
  margin: 0 0 var(--espaco-2);
  font-size: 40px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cor-texto);
}
.doc h2 {
  margin: 40px 0 12px;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--cor-texto);
  scroll-margin-top: var(--espaco-6);
}
.doc p {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--cinza-700);
}
.doc ul, .doc ol {
  margin: 0 0 12px;
  padding-left: 22px;
}
.doc li {
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--cinza-700);
}
.doc strong {
  color: var(--cor-texto);
}
.doc .doc-meta {
  color: var(--cor-texto-secundario);
}
.doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0 16px;
  font-size: 15px;
  line-height: 1.5;
}
.doc th {
  text-align: left;
  padding: 10px 12px;
  font-weight: 700;
  color: var(--cor-texto);
  background: var(--cor-fundo-suave);
  border-bottom: 1px solid var(--cor-borda);
}
/* Larguras das colunas da tabela de dados (mockup: 30% · 28% · 20% · o resto). */
.doc th:nth-child(1):nth-last-child(4) { width: 30%; }
.doc th:nth-child(2):nth-last-child(3) { width: 28%; }
.doc th:nth-child(3):nth-last-child(2) { width: 20%; }
.doc td {
  padding: 10px 12px;
  vertical-align: top;
  color: var(--cinza-700);
  border-bottom: 1px solid var(--cor-divisor);
}
.doc-nota {
  font-size: 13px;
  color: var(--cor-texto-apagado);
}
.doc-pendente {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  background: var(--cor-aviso-fundo);
  color: var(--cor-aviso);
  border-radius: var(--raio-1);
  font-size: 12px;
  font-weight: 700;
  vertical-align: middle;
  white-space: nowrap;
}
td > .doc-pendente:first-child {
  margin-left: 0;
}

/* Aceitar Termos novos (#/aceitar-termos): o texto dos Termos sem o índice, centrado, com a
   caixa de aceite no fim. */
.aceite-sair {
  margin-left: auto;
}
.aceite-corpo {
  justify-content: center;
}
.aceite {
  flex: 0 1 760px;
  min-width: 0;
}
.aceite-intro {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 32px;
  padding: 14px var(--espaco-4);
  background: var(--cor-acao-fundo);
  color: var(--cor-acao-ativa);
  border-radius: var(--raio-2);
  font-size: 15px;
  line-height: 1.5;
}
.aceite-intro svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.aceite-caixa {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espaco-4);
  margin-top: 40px;
  padding: 24px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-2);
}
.aceite-caixa label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--cor-texto);
  cursor: pointer;
}
.aceite-caixa input[type="checkbox"] {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--cor-acao);
}
.aceite-erro {
  padding: 10px var(--espaco-3);
  border-radius: var(--raio-1);
  background: var(--cor-erro-fundo);
  color: var(--cor-erro);
  font-size: 14px;
  line-height: 1.45;
}

/* Aviso de rascunho: triângulo + uma frase só (título em negrito dentro do texto). */
.doc-aviso {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 32px;
  padding: 14px var(--espaco-4);
  background: var(--cor-aviso-fundo);
  color: var(--cor-aviso);
  border-radius: var(--raio-2);
  font-size: 15px;
  line-height: 1.5;
}
.doc-aviso svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.doc-aviso strong {
  color: var(--cor-aviso);
}

/* Termos, seção 7: "não saem do seu navegador", com o cadeado. */
.doc-destaque {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 0 0 var(--espaco-4);
  padding: 18px 20px;
  background: var(--cor-acao-fundo);
  border-radius: var(--raio-2);
  color: var(--cor-acao-ativa);
}
.doc-destaque svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
}
.doc-destaque p,
.doc-destaque strong {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--cor-acao-ativa);
}

/* Privacidade, "Em resumo": bloco A (fica com o Dose Guia) e B (nunca sai do navegador). */
.doc-resumo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espaco-4);
  margin-top: var(--espaco-6);
  scroll-margin-top: var(--espaco-6);
}
.doc-bloco {
  box-sizing: border-box;
  padding: 20px 22px;
  border-radius: var(--raio-2);
}
.doc-bloco-a {
  background: var(--cor-fundo-suave);
  border: 1px solid var(--cor-borda);
}
.doc-bloco-b {
  background: var(--cor-acao-fundo);
}
.doc-bloco-c {
  grid-column: 1 / -1;
  background: var(--cor-fundo-suave);
  border: 1px solid var(--cor-borda);
}
.doc-bloco-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.doc-bloco-icone {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cor-fundo);
  color: var(--cinza-700);
}
.doc-bloco-a .doc-bloco-icone {
  border: 1px solid var(--cor-borda);
}
.doc-bloco-icone svg {
  width: 16px;
  height: 16px;
}
.doc-bloco h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--cor-texto);
}
.doc-bloco > p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--cor-texto-secundario);
}
.doc-bloco ul {
  margin: 10px 0 0;
  padding-left: 20px;
}
.doc-bloco li {
  margin: 0 0 4px;
  font-size: 15px;
  line-height: 1.5;
}
.doc-bloco-b .doc-bloco-icone,
.doc-bloco-b h3,
.doc-bloco-b > p {
  color: var(--cor-acao-ativa);
}

/* Tela estreita (fora do mockup, que é de 1440): índice em cima do texto, blocos um sob o
   outro, cabeçalho quebra linha. */
@media (max-width: 900px) {
  .cabecalho-doc {
    flex-wrap: wrap;
    gap: var(--espaco-2) var(--espaco-4);
    height: auto;
    padding-top: var(--espaco-3);
    padding-bottom: var(--espaco-3);
  }
  .cabecalho-doc-abas {
    order: 3;
    flex-basis: 100%;
  }
  .cabecalho-doc-voltar {
    margin-left: auto;
  }
  .pagina-doc {
    padding-top: var(--espaco-6);
  }
  .doc-corpo {
    flex-direction: column;
    gap: var(--espaco-6);
  }
  .indice {
    position: static;
    width: 100%;
  }
  .doc {
    flex: none;
    width: 100%;
  }
  .doc h1 {
    font-size: 32px;
  }
  .doc-resumo {
    grid-template-columns: minmax(0, 1fr);
  }
  .doc table {
    display: block;
    overflow-x: auto;
  }
}

/* ── Aviso de tela estreita ─────────────────────────────────────────────────── */
/* A bancada (dentro de `.programa`) só é usável a partir de 1100px de largura. Abaixo
   disso, o aviso aparece e tudo o mais dentro de `.programa` some — genérico o bastante
   pra funcionar com qualquer conteúdo que as tarefas seguintes colocarem ali dentro. */
.aviso-tela-estreita {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-3);
  max-width: 420px;
  margin: var(--espaco-8) auto;
  padding: var(--espaco-6);
  text-align: center;
  color: var(--cor-aviso);
}
.aviso-tela-estreita svg {
  color: var(--cor-aviso);
}

@media (max-width: 1099px) {
  .aviso-tela-estreita {
    display: flex;
  }
  .programa > *:not(.aviso-tela-estreita) {
    display: none;
  }
}

/* ── Home (§4.1) ────────────────────────────────────────────────────────────── */
/* Main.dc.html (1440px): tudo alinhado numa margem lateral de 120px. Abaixo de 1440 a margem
   encolhe na proporção (8,33%); acima, o conteúdo para em 1200px e centraliza. */
.home {
  --home-lateral: max(16px, min(120px, 8.3334%), calc((100% - 1200px) / 2));
  color: var(--cor-texto);
}
.home section {
  box-sizing: border-box;
}
.botao svg {
  flex-shrink: 0;
}

/* Botões grandes do hero e do CTA final: 56px, 18px/600. O primário é branco sobre o escuro. */
.botao-secundario-claro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-2);
  height: 32px;
  padding: 0 var(--espaco-4);
  font: var(--tipo-base);
  font-weight: 600;
  border: 1.5px solid var(--cor-fundo);
  border-radius: var(--raio-controle);
  background: transparent;
  color: var(--cor-fundo);
  text-decoration: none;
  cursor: pointer;
}
.botao-secundario-claro:hover {
  background: var(--cor-veu-claro);
  color: var(--cor-fundo);
}
.home-hero-cta .botao,
.home-final-cta .botao {
  box-sizing: border-box;
  height: 56px;
  padding: 0 24px;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
}
.home-hero-cta .botao-primario,
.home-final-cta .botao-primario {
  padding: 0 28px;
  background: var(--cor-fundo);
  border: 1.5px solid var(--cor-fundo);
  color: var(--teal-800);
}
.home-hero-cta .botao-primario:hover,
.home-final-cta .botao-primario:hover {
  background: var(--teal-50);
  border-color: var(--teal-50);
  color: var(--teal-800);
}
.home-hero-cta .botao svg,
.home-final-cta .botao svg {
  width: 20px;
  height: 20px;
}

/* Barra utilitária: 40px, 14px. */
.home-barra-utilidade {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-4);
  min-height: 40px;
  padding: 0 var(--home-lateral);
  background: var(--cinza-900);
  color: var(--cinza-200);
  font-size: 14px;
  line-height: 1.3;
}
.home-barra-utilidade-esq {
  display: flex;
  align-items: center;
  gap: var(--espaco-6);
  flex-wrap: wrap;
}
.home-barra-utilidade-esq span,
.home-barra-utilidade-ajuda {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
}
.home-barra-utilidade svg {
  width: 15px;
  height: 15px;
}
.home-barra-utilidade-ajuda {
  color: var(--cor-fundo);
  white-space: nowrap;
}

/* Cabeçalho: 76px, logo → 48px → nav logo depois do logo; Entrar/Pedir acesso à direita. */
.home-cabecalho {
  display: flex;
  align-items: center;
  gap: 48px;
  height: 76px;
  padding: 0 var(--home-lateral);
  border-bottom: 1px solid var(--cor-borda);
  background: var(--cor-fundo);
  /* fica no topo ao rolar; as âncoras param logo abaixo dele (76 + 1 de borda) */
  position: sticky;
  top: 0;
  z-index: 10;
}
.home [id] {
  scroll-margin-top: 77px;
}
.home-logo {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cor-texto);
  text-decoration: none;
  white-space: nowrap;
}
.home-logo:hover {
  color: var(--cor-texto);
}
.home-menu-abrir {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  cursor: pointer;
}
.home-nav {
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: var(--espaco-8);
}
.home-nav > a {
  color: var(--cor-texto-secundario);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
}
.home-nav > a:hover {
  color: var(--cor-acao);
}
.home-nav-cta {
  display: none;
}
.home-cabecalho-cta,
.home-nav-cta {
  align-items: center;
  gap: var(--espaco-3);
}
.home-cabecalho-cta {
  display: flex;
}
.home-cabecalho .botao {
  box-sizing: border-box;
  height: 44px;
  padding: 0 22px;
  border-width: 1.5px;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}
.home-cabecalho .botao-secundario {
  padding: 0 20px;
}

/* Hero: 640px, foto por baixo do véu; texto em 560px à esquerda, anúncio à direita. */
.home-hero {
  position: relative;
  isolation: isolate;
  background: var(--cinza-700);
  display: flex;
  align-items: center;
  gap: 64px;
  height: 640px;
  padding: 56px var(--home-lateral) 136px;
  overflow: hidden;
}
.home-topo {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.home-topo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-hero-veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cor-veu-forte);
}
.home-hero-conteudo {
  flex: 0 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espaco-6);
  color: var(--cor-fundo);
}
.home-hero-selo {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 16px;
  background: var(--teal-50);
  color: var(--teal-800);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.home-hero-conteudo h1 {
  margin: 0;
  font-size: 52px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.home-hero-conteudo p {
  margin: 0;
  font-size: 19px;
  line-height: 1.5;
  color: var(--cinza-100);
}
.home-hero-cta {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  flex-wrap: wrap;
  padding-top: var(--espaco-2);
}
.home-hero-conteudo .home-hero-ajuda-movel {
  display: none;
  font-size: 14px;
  color: var(--cinza-200);
}

/* Carrossel: o cartão branco é a caixa (360px); os controles ficam fora, sobre o escuro. */
.home-carrossel {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-4);
}
.home-anuncio-caixa {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: 360px;
  padding: var(--espaco-6);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-2);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--cinza-900) 8%, transparent);
}
.home-anuncio-pecas {
  position: relative;
  height: 100%;
}
.home-anuncio {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);
}
.home-anuncio[aria-hidden="true"] {
  display: none;
}
.home-anuncio-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-2);
}
.home-anuncio-selo {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--raio-1);
  background: var(--cinza-100);
  color: var(--cinza-600);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.home-anuncio-marca {
  font-size: 13px;
  color: var(--cor-texto-apagado);
}
.home-anuncio-icone {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--raio-1);
  background: var(--cor-fundo-suave);
  color: var(--cor-acao);
}
.home-anuncio-icone svg {
  width: 64px;
  height: 64px;
  stroke-width: 1.5;
}
.home-anuncio-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-4);
}
.home-anuncio-rodape p {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--cor-texto);
}
.home-anuncio-link {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  flex-shrink: 0;
  color: var(--cor-acao);
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
}
.home-anuncio-link svg {
  width: 16px;
  height: 16px;
}
.home-carrossel-controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-3);
}
.home-carrossel-botao {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
  background: var(--cor-fundo);
  color: var(--cinza-700);
  cursor: pointer;
}
.home-carrossel-botao:hover {
  color: var(--cor-acao);
  border-color: var(--cor-acao);
}
.home-carrossel-bolinhas {
  display: flex;
  align-items: center;
  gap: 2px;
}
/* A bolinha é um alvo de 32×44; o traço visível (8px, 24px na atual) é o ::before. */
.home-bolinha {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.home-bolinha::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--cor-fundo) 45%, transparent);
}
.home-bolinha[aria-current="true"]::before {
  width: 24px;
  background: var(--cor-fundo);
}

/* Cartões: sobem 96px sobre o hero, grade de 4 em 120px de margem. */
.home-recursos {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--espaco-6);
  align-items: start;
  min-height: 320px;
  margin-top: -96px;
  padding: 0 var(--home-lateral);
  pointer-events: none; /* a faixa sobre o hero é transparente: só o cartão recebe o ponteiro */
}
.home-cartao {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-2);
  box-shadow: var(--sombra-pop);
}
.home-cartao-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--raio-2);
  background: var(--cor-acao-fundo);
  color: var(--cor-acao);
}
.home-cartao-icone svg {
  width: 26px;
  height: 26px;
}
.home-cartao h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 600;
}
.home-cartao p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--cor-texto-secundario);
}

/* Título de seção: rótulo 14px teal em caixa alta + h2 de 36px. */
.home-secao-titulo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.home-eyebrow {
  color: var(--cor-acao);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.home-secao-titulo h2,
.home-folha-texto h2 {
  margin: 0;
  font-size: 36px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Como funciona: 3 passos em círculos de 96px ligados por uma linha de 2px. */
.home-como-funciona {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding: 48px var(--home-lateral) 72px;
}
.home-timeline {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--espaco-8);
  background-image: linear-gradient(var(--cinza-200), var(--cinza-200));
  background-size: 66% 2px;
  background-position: center 48px;
  background-repeat: no-repeat;
}
.home-passo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.home-passo-circulo {
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border: 2px solid var(--cor-borda);
  border-radius: 50%;
  background: var(--cor-fundo);
  color: var(--cor-acao);
}
.home-passo-circulo svg {
  width: 36px;
  height: 36px;
  stroke-width: 1.75;
}
.home-passo-numero {
  position: absolute;
  top: -4px;
  right: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--cor-acao);
  color: var(--cor-fundo);
  font-size: 14px;
  font-weight: 700;
}
.home-passo h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 600;
}
.home-passo p {
  max-width: 300px;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--cor-texto-secundario);
}

/* A folha do tutor: fundo cinza-claro, texto em 460px, exemplo real da folha em 420px. */
.home-folha {
  display: flex;
  align-items: center;
  gap: 80px;
  padding: 72px var(--home-lateral);
  background: var(--cor-fundo-suave);
}
.home-folha-texto {
  flex: 0 1 460px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.home-folha-texto p {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--cor-texto-secundario);
}
.home-folha-texto .botao {
  box-sizing: border-box;
  height: 52px;
  margin-top: var(--espaco-2);
  padding: 0 var(--espaco-6);
  font-size: 17px;
  font-weight: 600;
}
.home-folha-visual {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
}
.home-folha-moldura {
  flex-shrink: 0;
  width: 420px;
  height: 594px;
  overflow: hidden;
  box-shadow: var(--sombra-folha);
  background: var(--cor-fundo);
}
.home-folha-escala {
  width: 793.7px;
  height: 1122.6px;
  transform: scale(0.5292);
  transform-origin: top left;
}

/* CTA final: faixa teal-800 de 360px; o mockup põe uma foto redonda à direita que não
   existe aqui, então o texto fica sozinho (sem ícone decorativo no lugar). */
.home-final {
  display: flex;
  align-items: center;
  min-height: 360px;
  padding: 56px var(--home-lateral);
  background: var(--teal-800);
  color: var(--cor-fundo);
}
.home-final-texto {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espaco-4);
}
.home-final-texto h2 {
  margin: 0;
  font-size: 40px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.home-final-texto p {
  margin: 0;
  font-size: 19px;
  line-height: 1.5;
  color: var(--teal-50);
}
.home-final-cta {
  display: flex;
  gap: var(--espaco-3);
  flex-wrap: wrap;
  padding-top: var(--espaco-2);
}

/* Rodapé da Home: 3 colunas (marca, Produto, Empresa) em 120px de margem, 15px, títulos sem
   caixa alta. A marca leva o dobro, para a frase caber numa linha. */
.rodape-home {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  min-height: 360px;
  padding: 56px var(--home-lateral) var(--espaco-8);
  background: var(--cinza-900);
  color: var(--cinza-300);
}
.rodape-home-colunas {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
}
.rodape-home-marca {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
}
.rodape-home-nome {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cor-fundo);
}
.rodape-home-marca p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--cinza-300);
}
.rodape-home nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rodape-home-titulo {
  font-size: 15px;
  font-weight: 700;
  color: var(--cor-fundo);
}
.rodape-home nav a {
  font-size: 15px;
  color: var(--cinza-200);
  text-decoration: none;
}
.rodape-home nav a:hover {
  color: var(--cor-fundo);
}
.rodape-home-base {
  display: flex;
  justify-content: space-between;
  gap: var(--espaco-4);
  padding-top: var(--espaco-4);
  border-top: 1px solid var(--cinza-700);
  font-size: 14px;
  line-height: 1.5;
}
.rodape-home-base p {
  margin: 0;
  max-width: 820px;
}
.rodape-home-base span {
  white-space: nowrap;
}

/* Telas médias: cartões em 2×2, rodapé em 2×2. */
@media (max-width: 1100px) {
  .home-recursos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-folha {
    gap: 48px;
  }
  .rodape-home-colunas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Abaixo de 960px o nav não cabe ao lado dos botões: vira menu hambúrguer. */
@media (max-width: 960px) {
  .home-cabecalho {
    gap: var(--espaco-4);
    height: 64px;
  }
  .home [id] {
    scroll-margin-top: 65px;
  }
  .home-menu-abrir {
    display: inline-flex;
  }
  .home-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 3;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--espaco-4);
    padding: var(--espaco-4) var(--home-lateral);
    background: var(--cor-fundo);
    border-bottom: 1px solid var(--cor-borda);
  }
  .home-nav.home-nav--aberto {
    display: flex;
  }
  .home-nav-cta {
    display: flex;
  }
  .home-cabecalho-cta {
    display: none;
  }
}

@media (max-width: 760px) {
  .home-barra-utilidade {
    flex-wrap: wrap;
    gap: var(--espaco-1) var(--espaco-4);
    padding-top: var(--espaco-2);
    padding-bottom: var(--espaco-2);
    font-size: 13px;
  }
  .home-barra-utilidade-esq {
    gap: var(--espaco-1) var(--espaco-4);
  }
  .home-hero-selo {
    height: auto;
    min-height: 32px;
    padding: 6px 14px;
    font-size: 12px;
    line-height: 1.4;
  }

  .home-hero {
    flex-direction: column;
    align-items: stretch;
    gap: var(--espaco-6);
    height: auto;
    padding: var(--espaco-6) var(--home-lateral) var(--espaco-8);
  }
  .home-hero-conteudo {
    flex: none;
  }
  .home-hero-conteudo h1 {
    font-size: 36px;
  }
  .home-hero-conteudo p {
    font-size: 17px;
  }
  .home-hero-conteudo .home-hero-ajuda-movel {
    display: block;
  }
  .home-carrossel {
    flex: none;
  }
  .home-anuncio-caixa {
    height: 300px;
  }
  .home-anuncio-rodape {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--espaco-2);
  }
  .home-recursos {
    grid-template-columns: 1fr;
    min-height: 0;
    margin-top: var(--espaco-6);
  }
  .home-como-funciona {
    padding-bottom: 48px;
  }
  .home-secao-titulo h2,
  .home-folha-texto h2 {
    font-size: 28px;
  }
  .home-timeline {
    grid-template-columns: 1fr;
    background: none;
  }
  .home-folha {
    flex-direction: column;
    align-items: stretch;
    gap: var(--espaco-6);
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .home-folha-texto {
    flex: none;
  }
  .home-folha-visual {
    order: -1;
  }
  .home-folha-moldura {
    width: 320px;
    height: 453px;
  }
  .home-folha-escala {
    transform: scale(0.4032);
  }
  .home-final {
    min-height: 0;
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .home-final-texto h2 {
    font-size: 30px;
  }
  .home-final-texto p {
    font-size: 17px;
  }
  .rodape-home {
    min-height: 0;
  }
  .rodape-home-colunas {
    grid-template-columns: 1fr;
    gap: var(--espaco-6);
  }
  .rodape-home-base {
    flex-direction: column;
  }
}

/* ── Entrar (§4.2) ──────────────────────────────────────────────────────────── */
.voltar-programa {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  padding: var(--espaco-3) var(--espaco-6);
  color: var(--cor-acao);
  font-weight: 600;
  text-decoration: none;
}
.voltar-programa:hover {
  text-decoration: underline;
}
.voltar-programa svg {
  width: 18px;
  height: 18px;
}

/* Mockup Entrar.dc.html (1440 × 980): foto de 640 px à esquerda, na altura toda, e o lado do
   formulário com a coluna de 480 px. O "Voltar ao site" fica no alto, à direita do lado do
   formulário; a linha dos Termos fica no pé. */
.entrar {
  display: flex;
  min-height: 100vh;
}

.entrar-foto {
  position: relative;
  flex: 0 0 640px;
  overflow: hidden;
  background: var(--cinza-700);
}
.entrar-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% center;
}
.entrar-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cor-veu-forte);
}
.entrar-foto-legenda {
  position: absolute;
  inset: 0;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 64px 64px;
  color: var(--cor-fundo);
}
.entrar-foto-legenda .logo {
  font-size: 24px;
  color: inherit;
  letter-spacing: -0.01em;
}
.entrar-foto-chamada {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espaco-4);
}
.entrar-foto-selo {
  display: inline-flex;
  align-items: center;
  height: 30px;
  box-sizing: border-box;
  padding: 0 12px;
  border-radius: 15px;
  background: var(--teal-50);
  color: var(--teal-800);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.entrar-foto-chamada p {
  margin: 0;
  font-size: 36px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.entrar-lado {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 27px 120px 48px 112px;
}

.entrar-voltar {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  color: var(--cor-texto-secundario);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
.entrar-voltar:hover {
  color: var(--cor-acao);
}
.entrar-voltar svg {
  width: 16px;
  height: 16px;
}

.entrar-conteudo {
  box-sizing: border-box;
  width: 100%;
  max-width: 480px;
  margin-top: 27px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Abas em trilho: a selecionada vira um "botão" branco com sombra leve. */
.entrar-abas {
  display: flex;
  padding: 4px;
  background: var(--cinza-50);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-2);
}
.entrar-abas [role="tab"] {
  flex: 1 1 0;
  height: 40px;
  border: 0;
  border-radius: var(--raio-controle);
  background: transparent;
  color: var(--cor-texto-secundario);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.entrar-abas [role="tab"][aria-selected="true"] {
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-weight: 700;
  box-shadow: 0 0 0 1px var(--cor-borda);
}

.entrar-painel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.entrar-primeiro,
.entrar-conta {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.entrar-primeiro h1,
.entrar-conta h1 {
  margin: 0;
  font-size: 32px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.entrar-primeiro p,
.entrar-conta p {
  margin: 0;
}
.entrar .entrar-intro {
  margin-top: -18px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--cor-texto-secundario);
}

.entrar-primeiro form,
.entrar-conta form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
}
.entrar-primeiro form label.campo,
.entrar-conta form label.campo {
  font-size: 14px;
}
.entrar-conta .entrar-rotulo-seguinte {
  margin-top: var(--espaco-2);
}
/* `.entrar` na frente: a base `input.campo:not(…):not(…)` tem especificidade (0,3,1). */
.entrar .entrar-primeiro input.campo,
.entrar .entrar-conta input.campo {
  box-sizing: border-box;
  width: 100%;
  height: 52px;
  padding: 0 16px;
  font-size: 17px;
}
.entrar .entrar-painel input.campo.campo-chave {
  font-family: inherit;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}
.entrar-primeiro form button[type="submit"],
.entrar-conta form button[type="submit"],
.entrar-sucesso .botao {
  box-sizing: border-box;
  justify-content: center;
  width: 100%;
  height: 52px;
  font-size: 17px;
  font-weight: 600;
}
.entrar-primeiro form button[type="submit"] {
  margin-top: 12px;
}
.entrar-dica {
  font-size: 14px;
  color: var(--cor-texto-secundario);
}

/* O span de dentro é a região aria-live, então a caixa nunca sai do DOM: vazia, sai do fluxo
   (sem ocupar o gap do form) e perde o fundo; com texto, vira o alerta do mockup. */
.entrar-alerta {
  display: flex;
  gap: var(--espaco-2);
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: var(--raio-1);
  background: var(--cor-erro-fundo);
  color: var(--cor-erro);
  font-size: 14px;
  line-height: 1.4;
}
.entrar-alerta svg {
  flex-shrink: 0;
}
.entrar-alerta:has(> .entrar-erro:empty) {
  position: absolute;
  padding: 0;
  background: none;
}
.entrar-alerta:has(> .entrar-erro:empty) svg {
  display: none;
}
[data-form-espera] .entrar-alerta {
  padding: 0;
  background: none;
  align-items: center;
  font-size: 13px;
}
[data-form-espera] .entrar-alerta svg {
  width: 14px;
  height: 14px;
}

.entrar-sucesso {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--espaco-4);
  border-radius: var(--raio-2);
  background: var(--cor-ok-fundo);
}
.entrar-sucesso[hidden] {
  display: none;
}
.entrar-sucesso p {
  display: flex;
  gap: var(--espaco-2);
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--cor-ok);
}
.entrar-sucesso p svg {
  width: 20px;
  height: 20px;
}

.entrar-primeiro hr {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--cor-borda);
}
.entrar-primeiro h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
}
.entrar .entrar-espera-texto {
  margin-top: -22px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--cor-texto-secundario);
}
.entrar-espera-status {
  margin-top: -16px;
  padding: 14px 16px;
  border-radius: var(--raio-controle);
  background: var(--cor-ok-fundo);
  color: var(--cor-ok);
  font-size: 15px;
  font-weight: 600;
}
.entrar-espera-status:empty {
  position: absolute;
  padding: 0;
  background: none;
}

.entrar [data-form-espera] {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.entrar [data-form-espera] label.campo {
  font-size: 13px;
}
.entrar-espera-linha {
  display: flex;
  gap: var(--espaco-2);
}
.entrar .entrar-espera-linha input.campo {
  box-sizing: border-box;
  flex: 1;
  min-width: 0;
  height: 44px;
  font-size: 15px;
}
.entrar-espera-linha .botao {
  height: 44px;
  padding: 0 18px;
  border-width: 1.5px;
  font-size: 15px;
  font-weight: 600;
}
[data-form-espera] .entrar-dica {
  font-size: 13px;
  line-height: 1.45;
}

.entrar-perdeu {
  color: var(--cor-texto-secundario);
  font-size: 14px;
  line-height: 1.5;
}
.entrar-perdeu p {
  display: inline;
}
.entrar-perdeu a {
  color: var(--cor-acao);
}
.entrar-perdeu-copiar {
  margin-left: var(--espaco-1);
  background: none;
  border: none;
  padding: 0;
  color: var(--cor-acao);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}
.entrar-perdeu-status {
  margin-left: var(--espaco-2);
}

.entrar-legal {
  margin: auto 0 0;
  padding-top: var(--espaco-6);
  max-width: 480px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cor-texto-secundario);
}
.entrar-legal a {
  color: var(--cor-acao);
}

@media (max-width: 1100px) {
  .entrar-foto {
    flex-basis: 40%;
  }
  .entrar-lado {
    padding: 40px 48px 48px;
  }
}
@media (max-width: 760px) {
  .entrar-foto {
    display: none;
  }
  .entrar-lado {
    padding: var(--espaco-4) var(--espaco-4) var(--espaco-6);
  }
  .entrar-conteudo {
    margin-top: var(--espaco-4);
  }
  .entrar-espera-linha {
    flex-wrap: wrap;
  }
  .entrar-espera-linha .botao {
    flex: 1 1 auto;
  }
}

/* ── Cadastro (§4.3) ────────────────────────────────────────────────────────── */
/* Mockup Cadastro.dc.html (1440 de largura): página cinza, cabeçalho branco de 72 px, coluna de
   720 px e o formulário num cartão branco com três seções. */
.cadastro {
  min-height: 100vh;
  background: var(--cinza-50);
}

.cadastro-cabecalho {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--espaco-6);
  height: 72px;
  padding: 0 120px;
  background: var(--cor-fundo);
  border-bottom: 1px solid var(--cor-borda);
}
.cadastro-cabecalho .logo {
  letter-spacing: -0.01em;
}
.cadastro-passo {
  flex: 1 1 auto;
  color: var(--cor-texto-secundario);
  font-size: 14px;
}
.cadastro-voltar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  color: var(--cor-texto-secundario);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
.cadastro-voltar:hover {
  color: var(--cor-acao);
}
.cadastro-voltar svg {
  width: 16px;
  height: 16px;
}

.cadastro-corpo {
  box-sizing: border-box;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 0 64px;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-6);
}
.cadastro-corpo p {
  margin: 0;
}

.cadastro-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.cadastro-intro h1 {
  margin: 0;
  font-size: 32px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
}
/* Concluído: o cartão de sucesso toma o lugar da introdução, como no mockup. */
.cadastro-corpo:has([data-concluido]:not([hidden])) .cadastro-intro {
  display: none;
}

.cadastro-selo-codigo {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 15px;
  background: var(--cor-ok-fundo);
  color: var(--cor-ok);
  font-size: 13px;
  font-weight: 600;
}
.cadastro-selo-codigo svg {
  width: 16px;
  height: 16px;
}

.cadastro-privacidade {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  font-size: 15px;
  line-height: 1.45;
  color: var(--cor-texto-secundario);
}
.cadastro-privacidade svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.cadastro-explica {
  font-size: 17px;
  line-height: 1.5;
  color: var(--cor-texto-secundario);
}

.cadastro-pendencias {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--raio-2);
  background: var(--cor-erro-fundo);
  color: var(--cor-erro);
  font-size: 15px;
  line-height: 1.45;
}
.cadastro-pendencias svg {
  flex-shrink: 0;
}

.cadastro-cartao {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-8);
  padding: var(--espaco-8);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-2);
}
.cadastro-secao {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);
}
.cadastro-secao legend {
  padding: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
  color: var(--cor-texto);
}
.cadastro-secao legend.cadastro-legenda-curta {
  padding-bottom: 6px;
}
.cadastro-secao-nota {
  font-size: 14px;
  line-height: 1.5;
  color: var(--cor-texto-secundario);
}
.cadastro-divisor {
  height: 1px;
  background: var(--cor-divisor);
}

.cadastro-grade {
  display: grid;
  gap: var(--espaco-4);
}
.cadastro-grade-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cadastro-grade-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cadastro-grade-3 > .cadastro-largo {
  grid-column: span 2;
}

.cadastro-campo {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* `.cadastro` na frente: a base `input.campo:not(…):not(…)` tem especificidade (0,3,1). */
.cadastro .cadastro-campo input.campo,
.cadastro .cadastro-campo select.campo {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  padding: 0 12px;
  background: var(--cor-fundo);
  color: var(--cor-texto);
}
.cadastro .cadastro-campo select.campo {
  padding: 0 10px;
}
.cadastro .cadastro-campo.cadastro-numerico input.campo {
  font-variant-numeric: tabular-nums;
}
.cadastro-opcional {
  font-weight: 400;
  color: var(--cor-texto-secundario);
}
/* O span é região aria-live: nunca sai do DOM. Vazio, sai do fluxo e não come o gap. */
.cadastro-erro {
  font-size: 13px;
  color: var(--cor-erro);
}
.cadastro-erro:empty {
  position: absolute;
}
.cadastro-sugestao {
  padding: 8px 10px;
  border-radius: var(--raio-1);
  background: var(--cor-aviso-fundo);
  color: var(--cor-aviso);
  font-size: 14px;
}
.cadastro-sugestao-botao {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.cadastro-consentimentos {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cadastro-checagem {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* O texto vai num <span> próprio: sem ele, cada pedaço solto do label virava coluna do flex. */
.cadastro-checagem label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--cor-texto);
  cursor: pointer;
}
.cadastro-checagem input[type="checkbox"] {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--cor-acao);
}
.cadastro-checagem .cadastro-erro {
  margin-left: 32px;
}

.cadastro-rodape-form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-4);
}
.cadastro-obrigatorios {
  font-size: 13px;
  color: var(--cor-texto-secundario);
}
.cadastro-rodape-form .botao,
.cadastro-concluido-acoes .botao {
  height: 52px;
  font-size: 17px;
  font-weight: 600;
}
.cadastro-rodape-form .botao {
  padding: 0 32px;
}

.cadastro-concluido {
  box-sizing: border-box;
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-4);
  padding: 48px;
  text-align: center;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-2);
}
.cadastro-concluido[hidden] {
  display: none;
}
.cadastro-concluido-marca {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 32px;
  background: var(--cor-ok-fundo);
  color: var(--cor-ok);
}
.cadastro-concluido-marca svg {
  width: 32px;
  height: 32px;
}
.cadastro-concluido h1 {
  margin: 0;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 700;
}
.cadastro-concluido p {
  max-width: 480px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--cor-texto-secundario);
}
.cadastro-concluido-acoes {
  margin-top: var(--espaco-2);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.cadastro-concluido-acoes .botao-primario {
  gap: 10px;
  padding: 0 28px;
}
.cadastro-concluido-acoes .botao-primario svg {
  width: 20px;
  height: 20px;
}
.cadastro-concluido-acoes .botao-secundario {
  padding: 0 24px;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda-forte);
  color: var(--cor-texto);
}

@media (max-width: 960px) {
  .cadastro-cabecalho {
    padding: 0 var(--espaco-6);
  }
  .cadastro-corpo {
    padding: var(--espaco-8) var(--espaco-6) 48px;
  }
}
@media (max-width: 760px) {
  .cadastro-cabecalho {
    height: auto;
    min-height: 64px;
    flex-wrap: wrap;
    gap: 0 var(--espaco-3);
    padding: var(--espaco-2) var(--espaco-4);
  }
  .cadastro-corpo {
    padding: var(--espaco-6) var(--espaco-4) var(--espaco-8);
  }
  .cadastro-cartao {
    padding: var(--espaco-6) var(--espaco-4);
    gap: var(--espaco-6);
  }
  .cadastro-grade-2,
  .cadastro-grade-3 {
    grid-template-columns: minmax(0, 1fr);
  }
  .cadastro-grade-3 > .cadastro-largo {
    grid-column: auto;
  }
  .cadastro-rodape-form {
    flex-direction: column;
    align-items: stretch;
  }
  .cadastro-concluido {
    margin-top: 0;
    padding: var(--espaco-8) var(--espaco-4);
  }
  .cadastro-concluido-acoes .botao {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* ── Programa: Conduta (§3.1, Programa.dc.html) ────────────────────────────── */
/* Coluna de 1200px (120px de margem em 1440), aside de 340px; A e B são cartões brancos sobre
   o cinza da página. */
.conduta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
  gap: var(--espaco-8);
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px var(--espaco-6) 48px;
}
.conduta-principal {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-6);
  min-width: 0;
}
/* T3: da Conduta de volta à bancada, sem ler de novo (o estilo é o do "Conduta" do rodapé do Conferir).
   Linha própria da grade, acima das duas colunas: a lateral continua alinhada ao card A. */
.conduta-voltar-bancada {
  grid-column: 1 / -1;
  justify-self: start;
}
.conduta-titulo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.conduta-titulo h1 {
  margin: 0;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.conduta-titulo p {
  margin: 0;
  color: var(--cor-texto-secundario);
  font-size: 16px;
  line-height: 1.5;
}
.conduta-secao {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
  padding: var(--espaco-6);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-2);
  background: var(--cor-fundo);
}
.conduta-secao > *,
.conduta-secao > [data-reserva] > * {
  margin: 0;
}
.conduta-rotulo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cor-texto);
  font-size: 17px;
  font-weight: 600;
}
.conduta-letra {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 13px;
  background: var(--teal-50);
  color: var(--teal-800);
  font-size: 13px;
  font-weight: 700;
}
/* Sem fonte própria o <textarea> cai no monoespaçado do navegador: A herda a do texto. */
.conduta-textarea {
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: var(--espaco-3) 14px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-controle);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.55;
  resize: vertical;
}
.conduta-textarea:focus-visible {
  border-color: var(--cor-acao);
  outline: 2px solid var(--cor-acao-fundo);
}
.conduta-textarea-mono {
  background: var(--cinza-50);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 14px;
}
/* Dado do tutor achado na conduta: borda âmbar de 2px no campo A (mockup). */
.conduta-secao:has([data-achados]:not([hidden])) #conduta {
  border: 2px solid color-mix(in srgb, var(--ambar-700) 55%, var(--ambar-50));
}
.conduta-ajuda {
  display: block;
  color: var(--cor-texto-secundario);
  font-size: 13px;
  line-height: 1.45;
}
.conduta-erro {
  display: block;
  padding: 10px var(--espaco-3);
  border-radius: var(--raio-1);
  background: var(--cor-erro-fundo);
  color: var(--cor-erro);
  font-size: 14px;
  line-height: 1.45;
}

.conduta-achados {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 14px var(--espaco-4);
  border: 1px solid color-mix(in srgb, var(--ambar-700) 22%, var(--ambar-50));
  border-radius: var(--raio-controle);
  background: var(--cor-aviso-fundo);
  color: var(--cor-aviso);
}
.conduta-achados-titulo {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  font-size: 15px;
  font-weight: 700;
}
.conduta-achados ul {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
  margin: 0;
  padding-left: 26px;
  color: color-mix(in srgb, var(--ambar-700) 65%, var(--cinza-900));
  font-size: 14px;
  line-height: 1.4;
}
.conduta-achado-tipo {
  color: var(--cor-texto-apagado);
}
.conduta-achados-acoes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-left: 26px;
  font-size: 13px;
}
/* "Tirar tudo isso": botão contornado em âmbar, no aviso e na confirmação. */
.conduta [data-tirar-tudo] {
  height: 36px;
  padding: 0 14px;
  border-color: var(--cor-aviso);
  background: var(--cor-fundo);
  color: var(--cor-aviso);
  font-size: 14px;
}
.conduta [data-tirar-tudo]:hover {
  background: var(--cor-aviso-fundo);
}

.conduta-copiar-linha {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espaco-3);
}
.conduta-secao > .conduta-copiar-linha:not(.conduta-endereco-linha),
.conduta-secao > [data-reserva] > .conduta-copiar-linha:not(.conduta-endereco-linha) {
  padding-top: var(--espaco-1);
}
.conduta [data-copiar] {
  height: 44px;
  padding: 0 18px;
  font-size: 15px;
}
.conduta [data-ler],
.conduta [data-ler-ia] {
  height: 52px;
  padding: 0 var(--espaco-6);
  gap: 10px;
  font-size: 17px;
}
.conduta-cole-em {
  color: var(--cor-texto-secundario);
  font-size: 14px;
}
/* ChatGPT e Gemini: botões contornados que abrem em outra aba. */
.conduta-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-controle);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.conduta-link:hover {
  border-color: var(--cor-acao);
  color: var(--cor-texto);
}
.conduta-link svg {
  width: 14px;
  height: 14px;
  color: var(--cor-texto-secundario);
}
/* Endereços em texto (o artefato do claude.ai não abre link externo): linha discreta. */
.conduta-endereco-linha {
  gap: var(--espaco-2);
  font-size: 13px;
}
.conduta-endereco {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: var(--cor-texto);
  background: var(--cor-fundo-suave);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-1);
  padding: 2px var(--espaco-2);
  user-select: all;
}
.conduta-link-copiar {
  background: none;
  border: none;
  padding: 0;
  color: var(--cor-texto-secundario);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
}
.conduta-link-status {
  font-size: 13px;
  color: var(--cor-ok);
}

/* Confirmação ("Ainda há dado do tutor", "A bancada tem edições suas"): faixa âmbar em linha. */
.conduta-confirmar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espaco-3);
  padding: var(--espaco-3) 14px;
  border: 1px solid var(--cor-aviso);
  border-radius: var(--raio-controle);
  background: var(--cor-aviso-fundo);
  color: var(--cor-aviso);
}
.conduta-confirmar > span {
  flex: 1 1 200px;
  font-size: 15px;
  font-weight: 700;
}
.conduta-confirmar .dialogo-acoes {
  flex-wrap: wrap;
  gap: var(--espaco-3);
  margin: 0;
}
.conduta-confirmar .botao {
  height: 36px;
  font-size: 14px;
}
.conduta-confirmar [data-copiar-mesmo] {
  padding: 0;
  border: 0;
  background: none;
  color: var(--cor-texto-secundario);
  text-decoration: underline;
}

.conduta-copiado {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--espaco-2);
  padding: var(--espaco-2) var(--espaco-3);
  border-radius: var(--raio-1);
  background: var(--cor-ok-fundo);
  color: var(--cor-ok);
  font-size: 14px;
  font-weight: 600;
}

.conduta-fallback p {
  margin: 0 0 var(--espaco-2);
  color: var(--cor-texto-secundario);
  font-size: 13px;
}

.conduta-ia {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
}
.conduta-fase-teste {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-2);
  margin: 0;
  color: var(--cor-texto-secundario);
  font-size: 13px;
  line-height: 1.45;
}
.conduta-fase-teste svg {
  flex: none;
}
.conduta-ia-status {
  color: var(--cor-texto-secundario);
  font-size: 14px;
}
.conduta-ia-tirados {
  display: block;
  color: var(--cor-texto-secundario);
  font-size: 13px;
  line-height: 1.45;
}
/* Nasce visível; some quando a IA está disponível (ligar() em conduta.js chama
   definirReserva(false)). `display: contents` some da caixa sem mudar a estrutura em flex
   de .conduta-secao — o [hidden] global (site.css:16, com !important) vence quando fechado. */
.conduta-reserva {
  display: contents;
}

.conduta-lateral {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);
  padding-top: 72px;
}
.conduta-lateral .conduta-secao {
  gap: 14px;
  padding: 20px;
}
.conduta-lateral h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--cor-texto);
}
.conduta-lateral ol {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  padding-left: 20px;
  color: var(--cinza-700);
  font-size: 15px;
  line-height: 1.45;
}
.conduta-privacidade {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-3);
  padding: 20px;
  border-radius: var(--raio-2);
  background: var(--teal-50);
  color: var(--teal-800);
}
.conduta-privacidade svg {
  flex: none;
  width: 22px;
  height: 22px;
}
.conduta-privacidade p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}
.conduta-link-botao {
  align-self: flex-start;
  min-height: 44px;
  padding: 0;
  border: none;
  background: none;
  color: var(--cor-acao);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}
.conduta-link-botao:hover {
  color: var(--cor-acao-ativa);
}

@media (max-width: 1099px) {
  .conduta {
    grid-template-columns: 1fr;
  }
  .conduta-lateral {
    padding-top: 0;
  }
}

/* ── Conferir (§3.2, parte 1) ───────────────────────────────────────────────── */
/* Mockup Conferir.dc.html a 1440px: barra da primeira dose de ponta a ponta, cartão do
   Cronograma (cabeçalho de dias + raias em duas colunas: remédio 312px | dias), cartão Geral
   em 3 colunas e o rodapé fixo com as pendências. O mockup é um app de altura fixa com o miolo
   rolando; aqui a página rola e o rodapé é sticky — por isso o espaço reservado embaixo: o campo
   que recebe foco (Tab, Alt+P, clique na pendência) rola pra cima do rodapé, não pra trás dele. */
html:has(.conferir-rodape) {
  scroll-padding-bottom: 176px;
}
.conferir-tela {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 64px);
  background: var(--cor-fundo-suave);
}

/* barra de cima: primeira dose · salvo · Desfazer · Atalhos */
.conferir-barra-cima {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espaco-3) var(--espaco-6);
  padding: 10px var(--espaco-6);
  background: var(--cor-fundo);
  border-bottom: 1px solid var(--cor-borda);
}
.conferir-barra-inicio {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espaco-2);
}
.conferir-barra-inicio label {
  font-size: 13px;
  font-weight: 600;
  color: var(--cor-texto);
}
.conferir-barra-inicio input,
.conferir-barra-inicio select {
  box-sizing: border-box;
  height: 36px;
  padding: 0 10px;
  font: 14px/1.4 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-controle);
}
.conferir-barra-inicio input { width: 132px; }
.conferir-barra-inicio select { width: 80px; padding: 0 6px; }
.conferir-barra-inicio input:focus-visible,
.conferir-barra-inicio select:focus-visible {
  border-color: var(--cor-acao);
  outline: 2px solid var(--cor-acao-fundo);
}
.conferir-barra-nota {
  max-width: 180px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--cor-texto-secundario);
}
.conferir-erro-inicio {
  font-size: 13px;
  font-weight: 600;
  color: var(--cor-erro);
}
.conferir-barra-espaco {
  flex: 1;
}
.conferir-salvo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--cor-texto-secundario);
}
.conferir-salvo svg {
  width: 16px;
  height: 16px;
  color: var(--cor-ok);
}
.conferir-barra-botao {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  height: 36px;
  padding: 0 var(--espaco-3);
  font: 600 14px/1 system-ui, sans-serif;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-controle);
  cursor: pointer;
}
.conferir-barra-botao svg { width: 16px; height: 16px; }
.conferir-barra-botao:disabled {
  color: var(--cor-texto-apagado);
  cursor: not-allowed;
}
.conferir-barra-atalhos {
  background: transparent;
  border-color: transparent;
  color: var(--cor-texto-secundario);
}
.conferir-barra-botao:hover:not(:disabled) { border-color: var(--cor-acao); }
.conferir-barra-cima > .conferir-popover {
  top: calc(100% - var(--espaco-1));
  left: auto;
  right: var(--espaco-6);
  width: 300px;
}

/* miolo cinza-claro com os dois cartões */
.conferir-conteudo {
  flex: 1;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px var(--espaco-6) var(--espaco-6);
}
.conferir-removido {
  padding: var(--espaco-2) var(--espaco-3);
  background: var(--cor-aviso-fundo);
  border: 1px solid var(--cor-aviso);
  border-radius: var(--raio-2);
  color: var(--cor-texto);
}
.conferir-removido p {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  margin: 0;
}
.conferir-cronograma,
.conferir-geral {
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-2);
}

/* cabeçalho do cartão: título, legenda, paginação */
.conferir-cronograma-topo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espaco-3) var(--espaco-6);
  padding: 14px var(--espaco-4);
  border-bottom: 1px solid var(--cor-borda);
}
.conferir-cronograma-titulo h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}
.conferir-cronograma-titulo p {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--cor-texto-secundario);
}
.conferir-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--cor-texto-secundario);
}
.conferir-legenda li {
  display: flex;
  align-items: center;
  gap: 5px;
}
.conferir-legenda svg { width: 14px; height: 14px; }
.conferir-paginacao {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--cor-texto-secundario);
}
.conferir-paginacao button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-controle);
  color: var(--cor-texto);
  cursor: pointer;
}
.conferir-paginacao button:disabled {
  color: var(--cor-texto-apagado);
  border-color: var(--cor-borda);
  cursor: not-allowed;
}

/* cabeçalho de dias: mesma grade da raia (312px | dias) */
.conferir-dias,
.conferir-raia {
  display: grid;
  grid-template-columns: 312px minmax(0, 1fr);
}
.conferir-dias {
  background: var(--cor-fundo-suave);
  border-bottom: 1px solid var(--cor-borda);
}
.conferir-dias-remedio {
  align-self: end;
  padding: 10px var(--espaco-4);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cor-texto-secundario);
}
.conferir-dias-grade {
  display: grid;
}
.conferir-dia {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--espaco-2) var(--espaco-1);
  border-left: 1px solid var(--cor-divisor);
}
.conferir-dia-mes {
  height: 14px;
  font-size: 11px;
  font-weight: 600;
  line-height: 14px;
  text-transform: uppercase;
  color: var(--teal-800);
}
.conferir-dia-num {
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.conferir-dia-sem {
  font-size: 12px;
  color: var(--cor-texto-secundario);
}

/* raias */
.conferir-bancada {
  display: flex;
  flex-direction: column;
}
.conferir-bancada > .bloco-erro {
  margin: var(--espaco-3) var(--espaco-4);
}
.conferir-bancada > .conferir-problemas {
  margin: var(--espaco-3) var(--espaco-4);
}
.conferir-vazio {
  margin: 0;
  padding: var(--espaco-6) var(--espaco-4);
  color: var(--cor-texto-secundario);
}
.conferir-raia {
  position: relative;
  border-bottom: 1px solid var(--cor-borda);
}
.conferir-raia:focus-within { z-index: 2; }
.conferir-raia-cabeca {
  display: flex;
  gap: var(--espaco-2);
  min-width: 0;
  padding: var(--espaco-3) 10px 14px var(--espaco-2);
  background: var(--cor-fundo);
  border-right: 1px solid var(--cor-borda);
}
.conferir-raia-ordem {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.conferir-raia-ordem button,
.conferir-icone-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--raio-1);
  color: var(--cor-texto-apagado);
  cursor: pointer;
}
.conferir-raia-ordem svg,
.conferir-icone-botao svg { width: 16px; height: 16px; }
.conferir-raia-ordem button:hover:not(:disabled),
.conferir-icone-botao:hover {
  background: var(--cor-fundo-suave);
  border-color: var(--cor-borda);
  color: var(--cor-texto);
}
.conferir-raia-ordem button:disabled {
  color: var(--cor-borda-forte);
  cursor: not-allowed;
}
.conferir-remover:hover { color: var(--cor-erro); }
.conferir-raia-cor {
  flex: none;
  width: 5px;
  border-radius: 3px;
  background: var(--cor-raia, var(--cor-borda-forte));
}
.conferir-raia-corpo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.conferir-raia-corpo > .bloco-erro { margin: 0; }

/* nome + lixeira / apresentação + via */
.conferir-raia-cab {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px 32px;
  grid-template-areas: "nome nome remover" "apres via via";
  gap: 4px 6px;
  align-items: center;
}
.conferir-raia-identidade,
.conferir-raia-acoes {
  display: contents;
}
.conferir-raia-cab [data-campo="nome"] { grid-area: nome; }
.conferir-raia-cab [data-campo="apres"] { grid-area: apres; }
.conferir-raia-cab [data-campo="via"] { grid-area: via; }
.conferir-raia-cab [data-remover] { grid-area: remover; width: 32px; height: 32px; justify-self: end; }
/* "Passar para \"se precisar\"" na linha de baixo, inteira: na 1ª coluna ele esticava até a largura dela
   e o texto, sem quebra, passava do fundo (Safari, 14/10) */
.conferir-raia-cab [data-para-sos] { grid-column: 1 / -1; justify-self: start; max-width: 100%; }
.conferir-raia-identidade input,
.conferir-raia-identidade select,
.conferir-sos-identidade input,
.conferir-sos-identidade select,
.conferir-comeca input,
.conferir-fase input,
.conferir-fase select,
.conferir-sos-dias-input {
  box-sizing: border-box;
  min-width: 0;
  height: 30px;
  padding: 0 6px;
  font: 13px/1.3 system-ui, sans-serif;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  border: 1px solid transparent;
  border-radius: var(--raio-1);
}
.conferir-raia-identidade input:hover,
.conferir-raia-identidade select,
.conferir-sos-identidade input:hover,
.conferir-sos-identidade select,
.conferir-comeca input,
.conferir-fase input,
.conferir-fase select,
.conferir-sos-dias-input {
  border-color: var(--cor-borda);
}
.conferir-raia-identidade [data-campo="nome"] {
  margin-left: -6px;
  font-size: 16px;
  font-weight: 700;
}
.conferir-raia-identidade [data-campo="apres"] {
  margin-left: -6px;
  color: var(--cor-texto-secundario);
}
.conferir-raia-identidade input:focus-visible,
.conferir-raia-identidade select:focus-visible,
.conferir-sos-identidade input:focus-visible,
.conferir-sos-identidade select:focus-visible,
.conferir-comeca input:focus-visible,
.conferir-fase input:focus-visible,
.conferir-fase select:focus-visible,
.conferir-sos-dias-input:focus-visible {
  border-color: var(--cor-acao);
  outline: 2px solid var(--cor-acao-fundo);
}
.conferir-raia-identidade input::placeholder,
.conferir-sos-identidade input::placeholder,
.conferir-fase input::placeholder { color: var(--cor-erro); font-weight: 600; }
.conferir-raia-identidade select:has(option[value=""]:checked),
.conferir-sos-identidade select:has(option[value=""]:checked) {
  color: var(--cor-erro);
  border-color: var(--cor-erro);
}

/* posologia: Dose [..] · a cada [..] por [..] dias */
.conferir-raia-poso {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* N4: Começa no dia [..] dd/mm — mesma cara da linha de fase */
.conferir-comeca,
.conferir-fase {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-size: 13px;
  color: var(--cor-texto-secundario);
}
.conferir-comeca input { width: 52px; }
.conferir-comeca > .bloco-erro,
.conferir-fase > .bloco-erro {
  flex-basis: 100%;
  margin: 0;
  font-size: 13px;
}
.conferir-fase-dose,
.conferir-fase-rotulo,
.conferir-posologia {
  display: flex;
  align-items: center;
  gap: 6px;
}
.conferir-fase-dose { flex: 1 1 100%; }
.conferir-fase-dose > .conferir-fase-rotulo { flex: none; min-width: 36px; }
/* min-width 0 no rótulo e no campo: sem ele o campo não encolhe abaixo da largura natural (166 px)
   e, com "Fase 1 · dose" ao lado, passa da borda da coluna */
.conferir-fase-dose { min-width: 0; }
.conferir-fase-dose input { flex: 1; min-width: 0; font-weight: 600; }
.conferir-fase-rotulo { white-space: nowrap; }
/* Q3: "Quando dar" numa linha própria, o campo ocupando a largura inteira — texto comprido não
   corta mais. */
.conferir-fase-quando { flex: 1 1 100%; white-space: normal; }
.conferir-fase-quando input { flex: 1; }
/* "por [N] dias" na mesma linha de "Começa no dia": campo numérico estreito, fora de
   `.conferir-fase` — não é pendência quando vazio ("sem fim" é válido). */
.conferir-sos-dias {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-size: 13px;
  color: var(--cor-texto-secundario);
}
/* Mais largo que `.conferir-posologia input[data-duracao]` e sem a seta do spinner nativo, para o
   placeholder "sem fim" caber inteiro. */
.conferir-sos-dias-input { width: 72px; }
/* Número da raia sem a seta nativa: no Safari com zoom reduzido ela não encolhe com a página e
   cobre o segundo dígito ("28" vira "2◇", 14/10). */
.conferir-raia input[type=number],
.conferir-sos-dias-input {
  appearance: textfield;
  -moz-appearance: textfield;
}
.conferir-raia input[type=number]::-webkit-inner-spin-button,
.conferir-raia input[type=number]::-webkit-outer-spin-button,
.conferir-sos-dias-input::-webkit-inner-spin-button,
.conferir-sos-dias-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.conferir-posologia {
  flex-wrap: wrap;
  border-radius: var(--raio-1);
}
.conferir-posologia:focus { outline: 2px solid var(--cor-acao); outline-offset: 2px; }
.conferir-posologia select { width: 64px; padding: 0 2px; }
.conferir-posologia input[data-duracao] { width: 52px; }
/* ciclo B: "a cada [dias da semana]" e os 7 dias (D S T Q Q S S), alvo de toque de 32 px */
.conferir-posologia select:has(option[value="semana"]:checked) { width: auto; }
.conferir-dias-semana { display: flex; gap: 2px; border-radius: var(--raio-1); }
.conferir-dias-semana:focus { outline: 2px solid var(--cor-acao); outline-offset: 2px; }
.conferir-dias-semana:not(:has([aria-pressed="true"])) [data-dia-semana] {
  background: var(--cor-erro-fundo);
  border-color: var(--cor-erro);
}
[data-dia-semana] {
  width: 32px;
  height: 32px;
  padding: 0;
  font: 600 13px/1 system-ui, sans-serif;
  color: var(--cor-texto-secundario);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-1);
  cursor: pointer;
}
[data-dia-semana][aria-pressed="true"] {
  color: var(--cor-fundo);
  background: var(--cor-acao);
  border-color: var(--cor-acao);
}
[data-dia-semana]:focus-visible { outline: 2px solid var(--cor-acao-fundo); outline-offset: 1px; }
[data-texto-semanal] { color: var(--cor-texto); font-weight: 600; }
[data-texto-semanal]:empty { display: none; }
.conferir-fase input:placeholder-shown,
.conferir-posologia select:has(option[value=""]:checked) {
  background: var(--cor-erro-fundo);
  border-color: var(--cor-erro);
}
.conferir-continuo {
  font-weight: 600;
  color: var(--cor-texto);
}
.conferir-duracao-pendente-abrir {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  height: 30px;
  padding: 0 var(--espaco-2);
  font: 700 12px/1 system-ui, sans-serif;
  color: var(--cor-erro);
  background: var(--cor-erro-fundo);
  border: 0;
  border-radius: var(--raio-1);
  box-shadow: inset 0 0 0 2px var(--cor-erro);
  cursor: pointer;
}
.conferir-duracao-pendente-abrir svg { width: 14px; height: 14px; }
/* K2: acrescentar fase depois da última · T5: juntar as duas fases, no erro que recusou a edição */
.conferir-acrescentar-fase button,
.conferir-fase > [data-juntar-fases] {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  height: 30px;
  padding: 0 var(--espaco-2);
  font: 600 12px/1 system-ui, sans-serif;
  color: var(--cor-acao);
  background: transparent;
  border: 1px dashed var(--cor-borda-forte);
  border-radius: var(--raio-1);
  cursor: pointer;
}
.conferir-acrescentar-fase button:hover,
.conferir-fase > [data-juntar-fases]:hover { background: var(--cor-acao-fundo); }
.conferir-fase > [data-juntar-fases] { border-style: solid; }
.conferir-acrescentar-fase svg { width: 14px; height: 14px; }
.conferir-acrescentar-fase .bloco-erro { margin: 6px 0 0; }

/* horários · ajustar · origem / madrugada / fim */
.conferir-raia-meta {
  display: flex;
  align-items: center;
  gap: 2px;
}
.conferir-raia-horas {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--cor-texto);
}
.conferir-raia-horas svg { flex: none; width: 14px; height: 14px; color: var(--cor-texto-secundario); }
.conferir-raia-meta .conferir-icone-botao { width: 26px; height: 26px; }
.conferir-madrugada {
  display: flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin: 0;
  padding: 5px var(--espaco-2);
  background: var(--cor-divisor);
  border-radius: var(--raio-1);
  font-size: 12px;
  color: var(--cor-texto);
}
.conferir-madrugada svg { flex: none; width: 13px; height: 13px; }
.conferir-fim {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--cor-texto);
}
.conferir-fim:empty { display: none; }
.conferir-desmame {
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  font-size: 13px;
}
.conferir-desmame p {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  flex: 1 1 18em;
  margin: 0;
}
.conferir-desmame p svg { flex: none; width: 14px; height: 14px; margin-top: 2px; }
/* O botão cresce com a letra: no Safari com zoom reduzido o texto quebra em duas linhas (14/10). */
.conferir-desmame .botao { height: auto; min-height: 32px; padding-block: 4px; text-align: center; }
/* N6: aviso âmbar do leitor na raia e no Geral; os da leitura inteira no topo da bancada */
.conferir-avisos,
.conferir-problemas { font-size: 13px; }
.conferir-avisos svg,
.conferir-problemas svg { width: 14px; height: 14px; margin-top: 2px; }
.conferir-avisos ul,
.conferir-problemas ul { margin: 0; padding-left: 1.1em; }
.conferir-raia-corpo > .conferir-avisos { margin: 0; }

/* células de dia */
.conferir-celulas {
  display: grid;
}
.conferir-cel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--cor-fundo);
  border-left: 1px solid var(--cor-divisor);
  cursor: pointer;
}
.conferir-cel:focus-visible { outline: 2px solid var(--cor-acao); outline-offset: -2px; }
/* depois do último dia (última página da janela de 7): coluna vazia, mais apagada */
.conferir-dia-depois { background: var(--cor-fundo-suave); border-left: 1px solid var(--cor-divisor); }
/* A célula estica até a altura da raia; o editor do dia abre logo abaixo das doses, onde
   o clique aconteceu, não no pé da célula. Altura zero: não mexe no desenho da célula. */
.conferir-cel-ancora {
  position: relative;
  height: 0;
}
.conferir-cel-ancora > .conferir-popover { top: var(--espaco-2); }
.conferir-cel-fora,
.conferir-cel:has(> .conferir-sem-dose) {
  background: var(--cor-fundo-suave);
}
.conferir-cel-fora {
  align-items: center;
  justify-content: center;
  cursor: default;
}
.conferir-dose {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 5px;
  padding: var(--espaco-2) 6px var(--espaco-2) var(--espaco-2);
  font: 700 14px/1.3 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  text-align: left;
  color: var(--cor-texto);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.conferir-dose + .conferir-dose { padding-top: 0; }
.conferir-dose-qtd {
  font-size: 13px;
  font-weight: 600;
  color: var(--cor-texto-secundario);
}
.conferir-dose:hover { background: var(--cor-acao-fundo); }
.conferir-sem-dose {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--cor-texto-apagado);
}
.muda-dose {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--ambar-700);
  background: var(--ambar-50);
  border-bottom: 1px solid var(--cor-divisor);
}
.muda-dose svg { flex: none; width: 11px; height: 11px; }
.conferir-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  height: 24px;
  padding: 0 var(--espaco-2);
  font-size: 12px;
  font-weight: 600;
  color: var(--cinza-700);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda-forte);
  border-radius: 12px;
}
.conferir-pill svg { width: 11px; height: 11px; }
.conferir-cel-pendente {
  align-items: stretch;
  justify-content: center;
  min-height: 64px;
  background: var(--cor-erro-fundo);
  box-shadow: inset 0 0 0 2px var(--cor-erro);
  color: var(--cor-erro);
}
.conferir-cel-pendente > span {
  margin: auto;
  font-size: 12px;
  font-weight: 700;
}
.conferir-cel-pendente-abrir {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--espaco-1);
  font: 700 12px/1.2 system-ui, sans-serif;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
.conferir-cel-pendente-abrir svg { width: 14px; height: 14px; }
.conferir-cel-pendente-nota {
  display: flex;
  align-items: center;
  gap: var(--espaco-1);
  margin: 0 0 var(--espaco-2);
  color: var(--cor-erro);
}

/* Adicionar remédio: faixa de largura inteira no pé do cartão */
.conferir-adicionar {
  position: relative;
}
.conferir-adicionar-botao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-2);
  width: 100%;
  height: 52px;
  font: 600 15px/1 system-ui, sans-serif;
  color: var(--cor-acao);
  background: transparent;
  border: 0;
  border-radius: 0 0 var(--raio-2) var(--raio-2);
  cursor: pointer;
}
.conferir-adicionar-botao:hover { background: var(--cor-acao-fundo); }
.conferir-adicionar > .conferir-popover {
  top: auto;
  bottom: calc(100% + var(--espaco-2));
  left: 50%;
  transform: translateX(-50%);
  width: 360px;
}
.conferir-adicionar .campo { margin-bottom: var(--espaco-3); }
.conferir-adicionar .campo label { display: flex; flex-direction: column; gap: 6px; }

/* "Se precisar": os remédios sem horário fixo, em cartões à parte, depois das raias */
.conferir-se-precisar {
  padding: var(--espaco-4);
  border-top: 1px solid var(--cor-borda);
}
.conferir-se-precisar h2 {
  margin: 0 0 var(--espaco-3);
  font-size: 15px;
}
.conferir-sos {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--espaco-3);
  border: 1.5px solid var(--cor-sos);
  border-radius: var(--raio-2);
}
.conferir-sos + .conferir-sos { margin-top: var(--espaco-3); }
.conferir-sos-cab {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2);
  align-items: center;
}
.conferir-sos-identidade {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}
.conferir-sos-identidade [data-sos-campo="nome"] {
  flex: 1 1 140px;
  font-size: 16px;
  font-weight: 700;
}
.conferir-sos-identidade [data-sos-campo="apres"] {
  flex: 0 1 auto;
  width: 140px;
  max-width: 45%;
  color: var(--cor-texto-secundario);
}
.conferir-sos-identidade [data-sos-campo="via"] { flex: none; }
/* Q4: em repouso (sem foco, sem hover) os campos do cartão largo ficavam sem borda e não
   pareciam campo — só herdavam a borda no hover. */
.conferir-sos-identidade [data-sos-campo="nome"],
.conferir-sos-identidade [data-sos-campo="apres"] {
  border-color: var(--cor-borda);
}
.conferir-sos-acoes {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  flex: none;
}
.conferir-sos-linha {
  margin: 0;
  font-size: 13px;
  color: var(--cor-texto);
}
.conferir-sos-linha:empty { display: none; }
/* Ciclo C: "Com data marcada" — o remédio a cada 15 dias, todo mês, a cada 12 semanas. Cartão no
   molde do "se precisar", com borda neutra; campos de 32 px de alvo. */
.conferir-marcadas {
  padding: var(--espaco-4);
  border-top: 1px solid var(--cor-borda);
}
.conferir-marcadas h2 {
  margin: 0 0 var(--espaco-3);
  font-size: 15px;
}
.conferir-marcada { border-color: var(--cor-borda); }
.conferir-marcada .conferir-sos-identidade [data-campo="nome"] {
  flex: 1 1 140px;
  font-size: 16px;
  font-weight: 700;
  border-color: var(--cor-borda);
}
.conferir-marcada .conferir-sos-identidade [data-campo="apres"] {
  flex: 0 1 auto;
  width: 140px;
  max-width: 45%;
  color: var(--cor-texto-secundario);
  border-color: var(--cor-borda);
}
.conferir-marcada .conferir-sos-identidade [data-campo="via"] { flex: none; }
[data-acada-n],
[data-doses] {
  width: 56px;
  min-height: 32px;
  appearance: textfield;
  -moz-appearance: textfield;
}
[data-acada-n]::-webkit-inner-spin-button,
[data-acada-n]::-webkit-outer-spin-button,
[data-doses]::-webkit-inner-spin-button,
[data-doses]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.conferir-posologia select[data-acada-unidade] { width: auto; min-height: 32px; }
.conferir-posologia select:has(option[value="dias"]:checked),
.conferir-posologia select:has(option[value="meses"]:checked) { width: auto; }
.conferir-marcada-continuo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  cursor: pointer;
}
.conferir-marcada-continuo input { width: 18px; height: 18px; margin: 0; }
.conferir-marcada .conferir-fase input[data-doses]:disabled {
  background: var(--cor-fundo);
  border-color: var(--cor-borda);
  opacity: .5;
}
.conferir-marcada-pendencia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13px;
}
.conferir-marcada-pendencia button { min-height: 32px; }
.conferir-marcada [data-datas] { font-weight: 600; }
.conferir-para-sos {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px var(--espaco-2);
  font: 600 12px/1.2 system-ui, sans-serif;
  color: var(--cor-acao);
  background: transparent;
  border: 1px dashed var(--cor-borda-forte);
  border-radius: var(--raio-1);
  text-align: left;
  cursor: pointer;
}
.conferir-para-sos:hover { background: var(--cor-acao-fundo); }

/* editores por cima (popovers) */
.conferir-popover {
  position: absolute;
  z-index: 5;
  top: calc(100% + var(--espaco-2));
  left: 0;
  width: min(420px, 90vw);
  box-sizing: border-box;
  padding: var(--espaco-3) var(--espaco-4);
  font-size: 14px;
  font-weight: 400;
  color: var(--cor-texto);
  text-align: left;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-2);
  box-shadow: var(--sombra-pop);
  cursor: default;
}
.conferir-popover p { margin: 0 0 var(--espaco-2); }
.conferir-popover h3 { margin: var(--espaco-3) 0 var(--espaco-2); font-size: 14px; }
.conferir-popover-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-2);
  margin-bottom: var(--espaco-2);
  font-size: 15px;
}
.conferir-popover-topo button {
  display: inline-flex;
  padding: var(--espaco-1);
  background: none;
  border: none;
  border-radius: var(--raio-1);
  color: var(--cor-texto-secundario);
  cursor: pointer;
}
.conferir-popover .bloco { margin: 0 0 var(--espaco-2); font-size: 13px; }
.conferir-trecho {
  margin: 0 0 var(--espaco-2);
  padding: var(--espaco-2) var(--espaco-3);
  background: var(--cor-fundo-suave);
  border-left: var(--espaco-1) solid var(--cor-borda-forte);
  font-style: italic;
}
.conferir-popover-avisos {
  margin: 0 0 var(--espaco-2);
  padding-left: var(--espaco-4);
  color: var(--cor-aviso);
}
.conferir-tabela-leitura {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--tipo-rotulo-tamanho);
}
.conferir-tabela-leitura th,
.conferir-tabela-leitura td {
  text-align: left;
  padding: var(--espaco-1) var(--espaco-2);
  border-bottom: 1px solid var(--cor-divisor);
}
.conferir-ajustar-botoes,
.conferir-duracao-escolhas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2);
}
.conferir-duracao-escolhas { margin: var(--espaco-2) 0; }
.conferir-ajustar-botoes button,
.conferir-duracao-escolhas button,
.conferir-duracao-digitar button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 var(--espaco-3);
  font: 600 14px/1 system-ui, sans-serif;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-controle);
  cursor: pointer;
}
.conferir-duracao-escolhas button[aria-expanded="true"] {
  border-color: var(--cor-acao);
  background: var(--cor-acao-fundo);
}
.conferir-popover-resumo {
  color: var(--cor-texto-secundario);
  font-size: 13px;
}
.conferir-popover-botoes {
  display: flex;
  justify-content: flex-end;
  gap: var(--espaco-2);
  margin-top: var(--espaco-3);
}
.conferir-celula-opcoes {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
}
.conferir-celula-opcao {
  display: flex;
  gap: var(--espaco-2);
  align-items: flex-start;
  cursor: pointer;
}
.conferir-celula-opcao > span {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
}
.conferir-celula-campo {
  display: flex;
  align-items: center;
  gap: var(--espaco-1);
}
.conferir-celula-nota {
  color: var(--cor-texto-secundario);
  font-size: var(--tipo-rotulo-tamanho);
}
.conferir-duracao-digitar {
  display: flex;
  align-items: flex-end;
  gap: var(--espaco-2);
}
.conferir-duracao-digitar label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
}
.conferir-duracao-digitar input {
  box-sizing: border-box;
  width: 96px;
  height: 36px;
  padding: 0 var(--espaco-2);
  font: 14px/1 system-ui, sans-serif;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-controle);
}
.conferir-atalhos-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  font-size: 13px;
}
.conferir-atalhos-lista li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espaco-3);
}
.conferir-atalhos-lista kbd {
  flex: none;
  padding: 1px 6px;
  font: 600 12px/1.4 system-ui, sans-serif;
  background: var(--cor-fundo-suave);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-1);
}
.conferir-atalhos-nota {
  display: block;
  color: var(--cor-texto-secundario);
  font-size: var(--tipo-rotulo-tamanho);
}

/* Geral: 3 colunas, rótulo em cima */
.conferir-geral {
  padding: 18px 20px 20px;
}
.conferir-geral-topo {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px var(--espaco-3);
  margin-bottom: 14px;
}
.conferir-geral-topo h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}
.conferir-geral-topo p {
  margin: 0;
  font-size: 13px;
  color: var(--cor-texto-secundario);
}
.conferir-geral > .bloco-erro { margin: 0 0 14px; }
.conferir-geral > .conferir-avisos { margin: 0 0 14px; }
.conferir-geral-grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--espaco-4);
  align-items: start;
}
.conferir-geral-coluna {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
}
.conferir-geral .campo label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.conferir-geral .campo input:not([type="checkbox"]) {
  min-height: 36px;
  height: 36px;
  font-size: 14px;
  font-weight: 400;
}
.conferir-geral .campo textarea {
  min-height: 0;
  padding: var(--espaco-2) 10px;
  font-size: 14px;
  font-weight: 400;
  resize: vertical;
}
.conferir-padroes {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.conferir-padroes legend {
  margin-bottom: 6px;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--cor-texto);
}
.conferir-padroes label {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  font-size: 13px;
}
.conferir-padroes input { width: 16px; height: 16px; margin: 0; accent-color: var(--cor-acao); }

.conferir-celulas > .conferir-cel:nth-last-child(-n+3) > .conferir-popover {
  left: auto;
  right: 0;
}

/* rodapé fixo: ← Conduta · pendências · Continuar */
.conferir-rodape {
  position: sticky;
  bottom: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: var(--espaco-3) var(--espaco-6);
  background: var(--cor-fundo);
  border-top: 1px solid var(--cor-borda);
}
.conferir-rodape-voltar,
.conduta-voltar-bancada {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  flex: none;
  height: 44px;
  padding: 0 var(--espaco-4);
  font: 600 15px/1 system-ui, sans-serif;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-controle);
  cursor: pointer;
}
.conferir-rodape-status {
  flex: 1;
  min-width: 0;
}
.conferir-rodape-status .bloco {
  display: inline-flex;
  max-width: 100%;
  box-sizing: border-box;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px var(--espaco-2);
  margin: 0;
  padding: var(--espaco-2) var(--espaco-3);
  font-size: 14px;
  border: 0;
  border-radius: var(--raio-2);
}
.conferir-rodape-status .bloco-ok { font-weight: 600; }
.conferir-rodape-status .bloco svg { width: 16px; height: 16px; }
.conferir-pendencias-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.conferir-pendencias-lista button {
  box-sizing: border-box;
  height: 28px;
  padding: 0 10px;
  font: 600 13px/1 system-ui, sans-serif;
  color: var(--cor-erro);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-erro);
  border-radius: 14px;
  cursor: pointer;
}
.conferir-pendencias-lista button:hover { background: var(--cor-erro-fundo); }
.conferir-rodape-dica {
  flex: none;
  max-width: 170px;
  margin: 0;
  font-size: 13px;
  line-height: 1.3;
  color: var(--cor-texto-secundario);
}
.conferir-rodape .conferir-continuar {
  flex: none;
  height: 48px;
  padding: 0 22px;
  gap: var(--espaco-2);
  font-size: 16px;
  font-weight: 600;
}
.conferir-rodape .conferir-continuar:disabled {
  color: var(--cor-texto-apagado);
  background: var(--cor-divisor);
  border-color: var(--cor-divisor);
  cursor: not-allowed;
}

/* ── Programa: Folha (§3.3) ─────────────────────────────────────────────────── */
/* Programa.dc.html, passo 3: fundo cinza-50, coluna do formulário com cartões brancos e a
   prévia A4 de 460px à direita. 1248 − 2×24 = 1200px de miolo, o mesmo dos 120px de margem
   do mockup em 1440. */
.folha-tela {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 64px);
  background: var(--cor-fundo-suave);
}
.folha-conteudo {
  box-sizing: border-box;
  max-width: 1248px;
  width: 100%;
  margin: 0 auto;
  padding: 40px var(--espaco-6) 48px;
  flex: 1;
}
.folha-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 40px;
  align-items: start;
}
.folha-coluna-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.folha-titulo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.folha-titulo h1 {
  margin: 0;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.folha-titulo p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--cor-texto-secundario);
}

/* Cartões */
.folha-secao {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px var(--espaco-6);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-2);
}
.folha-secao h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}
.folha-secao-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--espaco-4);
}
.folha-link {
  height: 36px;
  padding: 0;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--cor-acao);
  text-decoration: underline;
  cursor: pointer;
  align-self: flex-start;
}
.folha-secao-topo .folha-link {
  align-self: center;
}
.folha-link:hover {
  color: var(--cor-acao-ativa);
}

/* Este atendimento: rótulo em cima, animal e tutor lado a lado */
.folha-atendimento {
  gap: var(--espaco-4);
  padding: var(--espaco-6);
}
.folha-atendimento-par {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espaco-4);
  align-items: start;
}
.folha-atendimento .campo,
.folha-clinica-editor .campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}
.folha-atendimento .campo input {
  width: 100%;
  color: var(--cor-texto);
  background: var(--cor-fundo);
}
.folha-atendimento .campo input[aria-invalid="true"] {
  border: 2px solid var(--cor-erro);
}
.folha-atendimento .campo:has(input[aria-invalid="true"]) label {
  color: var(--cor-erro);
}
.folha-campo-erro {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cor-erro);
}
.folha-campo-erro[hidden] {
  display: none;
}
.folha-campo-erro svg {
  width: 14px;
  height: 14px;
  flex: none;
}
.folha-privacidade {
  margin: 0;
  font-size: 13px;
  color: var(--cor-texto-secundario);
}

/* Orientações gerais: rótulo | valor numa grade só */
.folha-orientacoes {
  gap: var(--espaco-3);
}
.folha-orientacoes dl {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: var(--espaco-2) var(--espaco-4);
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
}
.folha-orientacoes dl > div {
  display: contents;
}
.folha-orientacoes dt {
  color: var(--cor-texto-secundario);
}
.folha-orientacoes dd {
  margin: 0;
  color: var(--cor-texto);
  white-space: pre-wrap;
}
.folha-orientacoes dd.folha-vazio {
  color: var(--cor-texto-apagado);
}

/* Clínica e veterinário: texto à esquerda, de onde veio à direita */
.folha-clinica-linha {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--espaco-4);
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--cinza-700);
}
.folha-clinica-linha + .folha-clinica-linha {
  padding-top: 14px;
  border-top: 1px solid var(--cor-divisor);
}
.folha-etiqueta {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--cor-texto-secundario);
}
.folha-etiqueta svg {
  width: 14px;
  height: 14px;
  flex: none;
}
.folha-clinica-editor {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
  padding: var(--espaco-4);
  background: var(--cor-fundo-suave);
  border-radius: var(--raio-2);
}
.folha-clinica-editor .campo input {
  width: 100%;
}
.folha-clinica-editor .botao {
  align-self: flex-start;
}

/* Antes de imprimir */
.folha-imprimir h2 {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
}
.folha-imprimir h2 svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.folha-avisos {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
}
.folha-avisos-titulo {
  font-size: 14px;
  color: var(--cor-texto-secundario);
}
.folha-avisos-lista {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.folha-aviso {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-2);
  padding: 10px var(--espaco-3);
  background: var(--cor-aviso-fundo);
  border-radius: var(--raio-1);
  font-size: 14px;
  line-height: 1.45;
  color: var(--cor-aviso);
}
.folha-aviso svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 2px;
}
.folha-aviso-texto {
  flex: 1;
}
.folha-aviso-tipo {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.folha-imprimir-acoes {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  padding-top: var(--espaco-1);
}
.folha-imprimir-acoes .botao {
  height: 52px;
  border-radius: var(--raio-controle);
  font-size: 16px;
  font-weight: 600;
}
.folha-imprimir-acoes [data-voltar-conferir] {
  margin-right: auto;
  padding: 0 20px;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda-forte);
  color: var(--cor-texto);
}
.folha-imprimir-acoes [data-voltar-conferir]:hover {
  background: var(--cor-fundo-suave);
}
.folha-imprimir-acoes [data-voltar-conferir] svg {
  width: 18px;
  height: 18px;
}
.folha-imprimir-acoes [data-imprimir] {
  gap: 10px;
  padding: 0 28px;
  font-size: 17px;
}
.folha-imprimir-acoes [data-imprimir] svg {
  width: 20px;
  height: 20px;
}
.folha-imprimir-acoes [data-imprimir]:disabled {
  background: var(--cor-borda);
  border-color: var(--cor-borda);
  color: var(--cor-texto-secundario);
  cursor: not-allowed;
}
.folha-motivo {
  font-size: 14px;
  font-weight: 600;
  color: var(--cor-erro);
}
.folha-imprimir [data-status-impressao] {
  align-self: flex-end;
  margin: 0;
  font-size: 13px;
  color: var(--cor-texto-secundario);
}

/* Prévia: a A4 inteira reduzida a 460px de largura (0,5796 = 460px ÷ 210mm a 96 dpi), numa
   caixa do tamanho exato dela. `transform`, não `zoom`: o zoom conta para a letra mínima do
   Safari (9px na tela), que aumentava a letra da prévia e a deixava diferente da impressa. O
   transform deixa a caixa de layout da A4 no tamanho cheio; o `overflow: clip` corta sem
   deixar rolar. Quando a página do navegador está abaixo de 100%, a .a4 vem com o zoom
   `--escala-medida` de folha.css, e o transform o desfaz. paginar() mede com
   `.folha-previa-medindo` (sem transform; ver paginar() em paginacao.js). */
.folha-coluna-previa {
  position: sticky;
  top: var(--espaco-4);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: var(--espaco-1);
}
.folha-previa-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--espaco-3);
}
.folha-previa-rotulo {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cor-texto-secundario);
}
.folha-previa-nav {
  display: flex;
  align-items: center;
  gap: var(--espaco-1);
}
.folha-previa-nav button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--raio-controle);
  border: 1px solid var(--cor-borda-forte);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  cursor: pointer;
}
.folha-previa-nav button svg {
  width: 14px;
  height: 14px;
}
.folha-previa-nav button:disabled {
  color: var(--cor-texto-apagado);
  border-color: var(--cor-borda);
  cursor: not-allowed;
}
.folha-previa-nav .folha-previa-ampliar {
  gap: 6px;
  width: auto;
  margin-right: var(--espaco-2);
  padding: 0 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
}
.folha-previa-nav [data-folha-texto] {
  min-width: 92px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--cinza-700);
  font-variant-numeric: tabular-nums;
}
.folha-previa {
  width: 460px;
  height: 651px;
  overflow: clip;
  cursor: zoom-in;
  background: var(--cor-fundo);
  box-shadow: var(--sombra-folha);
}
.folha-previa .a4,
.folha-previa .a4 + .a4 {
  margin: 0;
  box-shadow: none;
  border-radius: 0;
}
.folha-previa:not(.folha-previa-medindo) .a4 {
  transform: scale(calc(0.5796 / var(--escala-medida, 1)));
  transform-origin: 0 0;
}
/* .a4.folha-pagina-oculta (não só .folha-pagina-oculta): folha.css carrega depois deste
   arquivo e define ".a4{display:flex}" com a mesma especificidade — sem o ".a4" aqui, a
   ordem no cascade faz o flex do folha.css vencer e a página some da posição mas continua
   visível. */
.a4.folha-pagina-oculta {
  display: none;
}

/* Folha ampliada: a A4 em tamanho real (210 mm de largura), centrada sobre o site escurecido;
   rola para ver o pé da folha. Mesma técnica da prévia: a caixa tem o tamanho exato da A4 e o
   transform desfaz o zoom `--escala-medida` que a .a4 traz quando a página está abaixo de 100%.
   O `scrollbar-gutter` dos dois lados mantém a folha no meio com a barra de rolagem. */
.folha-ampliada {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}
.folha-ampliada::backdrop {
  background: var(--cor-veu-forte);
}
.folha-ampliada-rolagem {
  box-sizing: border-box;
  height: 100%;
  overflow: auto;
  scrollbar-gutter: stable both-edges;
  padding: 64px 72px 40px;
}
.folha-ampliada-pagina {
  width: 210mm;
  height: 297mm;
  margin: 0 auto;
  overflow: clip;
  background: var(--cor-fundo);
  box-shadow: var(--sombra-folha);
}
.folha-ampliada-pagina .a4 {
  margin: 0;
  transform: scale(calc(1 / var(--escala-medida, 1)));
  transform-origin: 0 0;
}
.folha-ampliada-topo {
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}
.folha-ampliada-topo [data-ampliada-texto] {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--cor-texto);
  color: var(--cor-fundo);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.folha-ampliada button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  box-shadow: var(--sombra-folha);
  cursor: pointer;
  pointer-events: auto;
}
.folha-ampliada button svg {
  width: 20px;
  height: 20px;
}
.folha-ampliada button[hidden] {
  display: none;
}
.folha-ampliada button:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.folha-ampliada [data-ampliada-fechar] {
  position: absolute;
  top: 0;
  right: 24px;
}
.folha-ampliada-seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.folha-ampliada-seta-esquerda {
  left: 16px;
}
.folha-ampliada-seta-direita {
  right: 28px;
}

/* Impressão: só o contêiner das .a4 sobra na página — nada de cabeçalho/rodapé do Programa
   nem da coluna de formulário. As próprias .a4 têm as regras de página em folha.css; a caixa
   de 460px e a escala da prévia saem. */
@media print {
  .cabecalho-programa,
  .rodape-programa,
  .folha-coluna-form,
  .folha-previa-cabecalho,
  .folha-ampliada,
  .aviso-tela-estreita {
    display: none !important;
  }
  .folha-pagina-oculta {
    display: flex !important;
  }
  .folha-tela,
  .folha-conteudo,
  .folha-grade,
  .folha-coluna-previa,
  .folha-previa {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    box-shadow: none !important;
  }
  .folha-previa .a4 {
    zoom: 1 !important;
    transform: none !important;
  }
}