/* Orçamento — folha de componentes. Escrita à mão sobre as variáveis de tokens.css.
   Nenhuma cor, espaço, raio ou sombra fora de var(--…): a prova cores_uma_fonte acusa.
   Prefixo o- em toda classe. Publicada como components/bundle.css do sistema e embutida
   em cada tela depois do tokens.css.
   Segunda rodada (30/10/2026, noite): saiu a régua lateral de modos, o cartão-herói e os
   ladrilhos (a "mímica do GovGo" que o dono rejeitou); entraram o casco leve com coluna e pé,
   a lista de tarefas com estado calculado, a sequência de quadradinhos ligados por traço
   (e a sua forma em abas), o cabeçalho da unidade, a página-documento e o cartão dividido. */

/* ---------- Base: caixa, letra e foco ---------- */
.o-app, .o-app *, .o-app *::before, .o-app *::after { box-sizing: border-box; }
.o-app {
  min-height: 100%;
  background: var(--fundo);
  color: var(--tinta-1);
  font-family: var(--font-texto);
  font-size: 14px;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Só o link solto no texto é marinho e sublinha: link com classe (botão, aba, item de lista) pinta a si mesmo. */
.o-app a:not([class]) { color: var(--marinho); text-decoration: none; }
.o-app a:not([class]):hover { text-decoration: underline; }
.o-app a[class] { text-decoration: none; }
.o-app :focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; border-radius: var(--raio-xs); }
/* Só o controle SEM classe herda letra e cor: um botão com classe (.o-botao, .o-pilula, aba da sequência) define as suas. */
.o-app button:not([class]), .o-app input, .o-app select, .o-app textarea { font: inherit; color: inherit; }
.o-app button[class] { font: inherit; }
.o-app img { display: block; }
.o-app svg { display: block; }
/* Todo número da tela é tabular, na própria letra do texto: não há fonte mono. */
.o-num, .o-codigo, .o-contador, .o-tabela td, .o-entrada--numero, .o-entrada--editavel { font-variant-numeric: tabular-nums; }

/* Ícones: traço 1,5 px, caixa 20, cor herdada. Tamanhos por papel. */
.o-icone { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.o-icone--pequeno { width: 12px; height: 12px; }
.o-icone--medio { width: 18px; height: 18px; }
.o-icone--destaque { width: 24px; height: 24px; }

/* Só para leitor de tela. */
.o-oculto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- O casco: cabeçalho leve em cima; coluna | principal; o pé mora no principal ---------- */
.o-casco {
  display: grid;
  grid-template-columns: var(--coluna-largura) minmax(0, 1fr);
  grid-template-rows: var(--cabecalho-altura) minmax(0, 1fr);
  grid-template-areas: "cabecalho cabecalho" "coluna principal";
  min-height: 100vh;
}
.o-casco--sem-coluna { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cabecalho" "principal"; }
/* Com o cabeçalho de duas linhas (opções 2 e 3) a primeira linha da grade cresce com ele; senão a segunda linha
   fica sem fundo e o conteúdo aparece por baixo das abas. */
.o-casco--cabecalho-duplo { grid-template-rows: auto minmax(0, 1fr); }
/* Grades de blocos: as colunas caem sozinhas em tela estreita. */
.o-grade { display: grid; gap: var(--esp-4); min-width: 0; }
.o-grade--1-1 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.o-grade--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
/* A forma "tudo numa tela" (opção 2): o corpo nunca rola; cada bloco rola por dentro. */
.o-casco--tela { height: 100vh; min-height: 0; overflow: hidden; }
.o-casco--tela .o-principal { overflow: hidden; display: flex; flex-direction: column; }

/* O cabeçalho leve: ícone, nome, selo do ciclo; à direita a leitura, a ajuda, "Mais", a pessoa. Fixo, papel, filete. */
.o-cabecalho {
  grid-area: cabecalho;
  position: sticky; top: 0; z-index: 30;
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  padding: 0 var(--esp-5);
  min-width: 0;
}
.o-cabecalho__marca { display: flex; align-items: center; gap: 10px; min-width: 0; }
.o-cabecalho__icone { width: 28px; height: 28px; border-radius: var(--raio-pilula); }
.o-cabecalho__nome { font-family: var(--font-titulo); font-size: 16px; line-height: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--tinta-1); white-space: nowrap; }
.o-cabecalho__direita { margin-left: auto; display: flex; align-items: center; gap: var(--esp-3); min-width: 0; }
.o-cabecalho__divisor { width: 1px; height: 20px; background: var(--linha); }
/* O logotipo da Ideal: sempre sobre papel, 26 px, nunca recolorido. */
.o-cabecalho__ideal { width: 26px; height: 26px; object-fit: contain; flex: none; }
.o-cabecalho__pessoa { display: flex; align-items: center; gap: var(--esp-2); min-width: 0; }
.o-cabecalho__pessoa-nome { font-size: 13px; line-height: 16px; color: var(--tinta-1); white-space: nowrap; }
.o-cabecalho__pessoa-papel { font-size: 11px; line-height: 14px; color: var(--tinta-3); white-space: nowrap; }
/* Duas linhas (opção 2, como o PB): a primeira com a unidade e o estado de gravação, a segunda com as abas. */
.o-cabecalho--duas-linhas { height: auto; flex-wrap: wrap; padding: 0; align-items: stretch; }
.o-cabecalho--duas-linhas .o-cabecalho__linha { display: flex; align-items: center; gap: var(--esp-4); padding: 0 var(--esp-5); min-height: var(--cabecalho-altura); width: 100%; min-width: 0; }
.o-cabecalho--duas-linhas .o-cabecalho__linha--abas { min-height: 44px; padding: 0 var(--esp-5); border-top: 1px solid var(--linha-suave); }

/* Selo do ciclo: pequeno, caixa alta, marinho pálido. */
.o-selo-ciclo {
  display: inline-flex; align-items: center; height: 20px; padding: 0 var(--esp-2);
  border-radius: var(--raio-xs);
  background: var(--marinho-fundo); color: var(--marinho); border: 1px solid var(--marinho-borda);
  font-family: var(--font-texto); font-size: 10.5px; line-height: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
}

/* A última leitura do Zoho: o espec manda mostrá-la em toda tela. */
.o-leitura { display: inline-flex; align-items: center; gap: 6px; color: var(--tinta-3); font-size: 12px; line-height: 16px; white-space: nowrap; }
.o-leitura b { color: var(--tinta-2); font-weight: 500; }
.o-leitura--antiga, .o-leitura--antiga b { color: var(--ambar-escuro); }

/* O menu "Mais ▾": Premissas · Pessoas · Histórico · Exportar. Provisório, até o dono definir o que é etapa. */
.o-menu-mais { position: relative; }
.o-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 180px; padding: 6px; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-md); box-shadow: var(--sombra-flutuante); z-index: 40; display: flex; flex-direction: column; }
.o-menu__item { display: flex; align-items: center; gap: var(--esp-2); padding: 7px 10px; border-radius: var(--raio-sm); font-size: 13px; color: var(--tinta-1); text-decoration: none; }
.o-menu__item:hover { background: var(--trilho); }

/* Seletor de unidade no cabeçalho (opções 2 e 3) ou no alto da coluna (opção 4): código, nome, seta. */
.o-seletor-unidade { display: inline-flex; align-items: center; gap: var(--esp-2); min-height: 34px; padding: 0 10px 0 var(--esp-3); border: 1px solid var(--linha); border-radius: var(--raio-md); background: var(--papel); color: var(--tinta-1); cursor: pointer; max-width: 100%; min-width: 0; }
.o-seletor-unidade:hover { background: var(--trilho); }
.o-seletor-unidade .o-codigo { color: var(--tinta-3); }
.o-seletor-unidade__nome { font-family: var(--font-titulo); font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-seletor-unidade .o-icone { color: var(--tinta-3); }

/* Avatar: só iniciais, círculo marinho. */
.o-avatar {
  width: 32px; height: 32px; border-radius: var(--raio-pilula); flex: none;
  background: var(--marinho); color: var(--sobre-marinho);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-titulo); font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
}
.o-avatar--pequeno { width: 24px; height: 24px; font-size: 10px; }
.o-avatar--neutro { background: var(--rebaixado); color: var(--tinta-2); }

/* ---------- A coluna da esquerda (como a lateral do PEV) ---------- */
.o-coluna { grid-area: coluna; background: var(--papel); border-right: 1px solid var(--linha); min-width: 0; }
/* O miolo fica preso sob o cabeçalho e rola por dentro quando a lista é maior que a tela. */
.o-coluna__fixa { position: sticky; top: var(--cabecalho-altura); max-height: calc(100vh - var(--cabecalho-altura)); overflow: auto; display: flex; flex-direction: column; gap: var(--esp-3); padding: var(--esp-3) var(--esp-3) var(--esp-6); }
/* As pílulas-aba do alto da coluna ("Atual" · "Unidades 5"): do mesmo tamanho; a ativa em laranja pálido. */
.o-abas-pilula { display: flex; gap: 6px; }
.o-aba-pilula { flex: 1; min-height: 34px; padding: 0 var(--esp-3); border: 1px solid var(--linha); border-radius: var(--raio-md); background: var(--papel); color: var(--tinta-2); font-family: var(--font-titulo); font-size: 12.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.o-aba-pilula:hover { background: var(--trilho); }
.o-aba-pilula--ativa, .o-aba-pilula--ativa:hover { background: var(--laranja-fundo); border-color: var(--laranja-borda); color: var(--laranja-escuro); }
.o-aba-pilula__contador { font-size: 11px; font-weight: 600; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.o-aba-pilula--ativa .o-aba-pilula__contador { color: var(--laranja-escuro); }

/* O cartão de unidade na coluna: código, nome (duas linhas no máximo), chips e a linha de andamento do PEV. */
.o-unidade-cartao { display: block; padding: var(--esp-3); border: 1px solid var(--linha); border-radius: var(--raio-lg); background: var(--papel); color: inherit; text-decoration: none; }
.o-unidade-cartao:hover { background: var(--trilho); text-decoration: none; }
/* A aberta: fundo pálido e filete laranja de 3 px à esquerda, por sombra interna (nada se desloca). */
.o-unidade-cartao--aberta, .o-unidade-cartao--aberta:hover { background: var(--laranja-fundo); border-color: var(--laranja-borda); box-shadow: inset 3px 0 0 var(--laranja); }
.o-unidade-cartao__topo { display: flex; align-items: baseline; gap: var(--esp-2); }
.o-unidade-cartao__nome { font-family: var(--font-titulo); font-size: 14px; line-height: 18px; font-weight: 600; color: var(--tinta-1); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.o-unidade-cartao__chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
/* A linha de andamento: ponto de 8 px, barra de 3 px, "7 de 12" e o nome da etapa em que está. */
.o-andamento { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: var(--esp-2); margin-top: 10px; }
.o-andamento__ponto { width: 8px; height: 8px; border-radius: var(--raio-pilula); background: var(--marinho); }
.o-andamento__barra { height: 3px; border-radius: var(--raio-pilula); background: var(--rebaixado); overflow: hidden; }
.o-andamento__barra span { display: block; height: 100%; background: var(--marinho); border-radius: var(--raio-pilula); }
.o-andamento__texto { font-size: 12px; line-height: 16px; color: var(--tinta-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.o-andamento__texto b { font-weight: 600; color: var(--tinta-1); }
.o-andamento--completa .o-andamento__ponto, .o-andamento--completa .o-andamento__barra span { background: var(--verde); }
.o-andamento--pendencia .o-andamento__ponto, .o-andamento--pendencia .o-andamento__barra span { background: var(--laranja); }

/* ---------- A lista de tarefas (as doze etapas, estado calculado; como "Suas tarefas" do Canton Fair) ---------- */
.o-tarefas { display: flex; flex-direction: column; min-width: 0; }
/* No alto: "7" grande, "de 12", a barra de 10 px e a legenda dos ícones em tamanho real. */
.o-tarefas__topo { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--esp-2) var(--esp-3); padding: var(--esp-3) var(--esp-3) var(--esp-2); }
.o-tarefas__numero { font-family: var(--font-titulo); font-size: 32px; line-height: 36px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--tinta-1); white-space: nowrap; }
.o-tarefas__numero small { font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--tinta-2); margin-left: 4px; }
.o-tarefas__barra { height: 10px; border-radius: var(--raio-pilula); background: var(--rebaixado); overflow: hidden; }
.o-tarefas__barra span { display: block; height: 100%; background: var(--verde); border-radius: var(--raio-pilula); }
.o-tarefas__barra-rotulo { grid-column: 2; font-size: 12px; line-height: 16px; color: var(--tinta-3); margin-top: -4px; }
.o-tarefas__legenda { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-3); padding: 0 var(--esp-3) var(--esp-2); font-size: 12px; line-height: 16px; color: var(--tinta-3); }
.o-tarefas__legenda span { display: inline-flex; align-items: center; gap: 5px; }
/* As doze, direto, sem agrupamento (resposta do dono: "só as doze"). */
.o-tarefas__lista { list-style: none; margin: 0; padding: 0; }
.o-tarefas__lista--topo { border-top: 1px solid var(--linha-suave); }
/* O item: ícone de 24 px | nome e pendências | fração e ações. Sempre na mesma ordem. */
.o-tarefas__item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 4px; align-items: start; padding: 9px var(--esp-3); border-top: 1px solid var(--linha-suave); }
.o-tarefas__item:first-child { border-top: 0; }
.o-tarefas__item--aberta { background: var(--laranja-fundo); box-shadow: inset 3px 0 0 var(--laranja); }
.o-tarefas__nome { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--tinta-1); text-decoration: none; }
.o-tarefas__nome:hover { text-decoration: underline; }
/* Feita: o título se apaga (Canton); o ✓ e a pílula "aceita" carregam o estado. */
.o-tarefas__item--feita .o-tarefas__nome { color: var(--tinta-3); font-weight: 500; }
.o-tarefas__direita { display: flex; align-items: center; gap: 4px; justify-self: end; }
/* A pílula com a fração ou o estado: colorida conforme o estado; neutra quando aguarda. */
.o-tarefas__fracao { display: inline-flex; align-items: center; height: 20px; padding: 0 9px; border-radius: var(--raio-pilula); background: var(--rebaixado); color: var(--tinta-3); font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.o-tarefas__fracao--feita { background: var(--verde-fundo); color: var(--verde-escuro); }
.o-tarefas__fracao--metade { background: var(--ambar-fundo); color: var(--ambar-escuro); }
.o-tarefas__fracao--desatualizada { background: var(--ambar-fundo); color: var(--ambar-escuro); }
.o-tarefas__fracao--pronta { background: var(--marinho-fundo); color: var(--marinho); }
.o-tarefas__fracao--aviso { background: var(--laranja-fundo); color: var(--laranja-escuro); }
/* ⓘ e ↻ (refazer a proposta a partir das fontes): 24 px; só na etapa aberta e sob o ponteiro, para a coluna
   de 340 px não quebrar o nome em duas linhas (medido na primeira passada). */
.o-tarefas__acao { width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--raio-xs); background: transparent; color: var(--tinta-3); cursor: pointer; display: none; align-items: center; justify-content: center; }
.o-tarefas__item--aberta .o-tarefas__acao, .o-tarefas__item:hover .o-tarefas__acao, .o-tarefas--larga .o-tarefas__acao { display: inline-flex; }
.o-tarefas__acao:hover { background: var(--papel); color: var(--tinta-1); }
.o-tarefas__acao--desatualizada { color: var(--laranja-escuro); }
/* As pendências da etapa, como ligações que abrem o lugar onde se resolvem (Canton: até 12 por tarefa). */
.o-tarefas__pendencias { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.o-tarefas__pendencia { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; border-radius: var(--raio-pilula); border: 1px solid var(--laranja-borda); background: var(--papel); color: var(--laranja-escuro); font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.o-tarefas__pendencia:hover { background: var(--laranja-fundo); text-decoration: none; }
.o-tarefas__dependencia { grid-column: 2 / -1; font-size: 12px; line-height: 16px; color: var(--tinta-3); }

/* ---------- O ícone de etapa de 24 px, que muda de forma (não só de cor) ---------- */
.o-etapa-circulo { width: 24px; height: 24px; border-radius: var(--raio-pilula); flex: none; position: relative; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--anel-vazio); background: transparent; color: var(--tinta-1); font-family: var(--font-titulo); font-size: 12px; font-weight: 700; }
.o-etapa-circulo .o-icone { width: 14px; height: 14px; stroke-width: 2.2; }
/* Proposta pronta (calculada, a aceitar): anel marinho com um ponto no meio. */
.o-etapa-circulo--pronta { border-color: var(--marinho); }
.o-etapa-circulo--pronta::after { content: ""; width: 8px; height: 8px; border-radius: var(--raio-pilula); background: var(--marinho); }
/* Pela metade: anel laranja e a metade esquerda cheia. */
.o-etapa-circulo--metade { border-color: var(--laranja); background: linear-gradient(90deg, var(--laranja) 50%, transparent 50%); }
/* Aceita: disco verde com ✓ branco. */
.o-etapa-circulo--feita { border-color: var(--verde); background: var(--verde); color: var(--sobre-marinho); }
/* Desatualizada (uma etapa ou premissa anterior mudou): disco âmbar com "!" escuro. */
.o-etapa-circulo--desatualizada { border-color: var(--ambar); background: var(--ambar); color: var(--tinta-1); }
/* Não se aplica (unidade sem receita): anel tracejado, conta como feita. */
.o-etapa-circulo--nao-se-aplica { border-style: dashed; border-color: var(--divisor); }
/* Com aviso (a conferência automática achou algo): anel laranja-escuro com "!" */
.o-etapa-circulo--aviso { border-color: var(--laranja-escuro); color: var(--laranja-escuro); }
/* A atual na régua compacta do celular: anel laranja por fora, sem mexer no tamanho. */
.o-etapa-circulo--atual { box-shadow: 0 0 0 2px var(--papel), 0 0 0 4px var(--laranja); }
.o-etapa-circulo--pequeno { width: 18px; height: 18px; border-width: 1.5px; font-size: 10px; }
.o-etapa-circulo--pequeno .o-icone { width: 11px; height: 11px; }

/* ---------- A sequência em linha: quadradinhos de 18 px ligados por um traço de 1,5 px (a régua do PEV) ---------- */
.o-sequencia { display: flex; align-items: center; gap: 0; min-width: 0; overflow-x: auto; padding: 5px 6px; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-lg); }
.o-sequencia__etapa { display: inline-flex; align-items: center; gap: var(--esp-2); min-height: 32px; padding: 0 10px 0 7px; border: 0; border-radius: var(--raio-md); background: transparent; color: var(--tinta-2); font-family: var(--font-titulo); font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; cursor: pointer; flex: none; }
.o-sequencia__etapa:hover { background: var(--trilho); }
.o-sequencia__quadrado { width: 18px; height: 18px; border-radius: var(--raio-sm); border: 1px solid var(--linha); background: var(--rebaixado); color: var(--tinta-2); display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; flex: none; font-variant-numeric: tabular-nums; }
.o-sequencia__quadrado .o-icone { width: 11px; height: 11px; stroke-width: 2.4; }
/* Feita: quadradinho verde-pálido com ✓ verde-escuro. Parcial: letra laranja-escura sobre laranja-pálido. */
.o-sequencia__etapa--feita .o-sequencia__quadrado { background: var(--verde-fundo); border-color: var(--verde-borda); color: var(--verde-escuro); }
.o-sequencia__etapa--parcial .o-sequencia__quadrado { background: var(--laranja-fundo); border-color: var(--laranja-borda); color: var(--laranja-escuro); }
/* Proposta pronta: marinho-pálido. Desatualizada: âmbar com "!". Não se aplica: tracejado. */
.o-sequencia__etapa--pronta .o-sequencia__quadrado { background: var(--marinho-fundo); border-color: var(--marinho-borda); color: var(--marinho); }
.o-sequencia__etapa--desatualizada .o-sequencia__quadrado { background: var(--ambar); border-color: var(--ambar); color: var(--tinta-1); }
.o-sequencia__etapa--nao-se-aplica .o-sequencia__quadrado { border-style: dashed; border-color: var(--divisor); background: transparent; color: var(--tinta-3); }
/* Atual: o quadradinho cheio de marinho com a letra branca; o botão com fundo marinho-pálido e o rótulo em 600. */
.o-sequencia__etapa--atual, .o-sequencia__etapa--atual:hover { background: var(--marinho-fundo); color: var(--marinho); font-weight: 600; }
.o-sequencia__etapa--atual .o-sequencia__quadrado { background: var(--marinho); border-color: var(--marinho); color: var(--sobre-marinho); }
/* O Comitê destacado (a "Decisão" do PEV): laranja pálido com texto laranja-escuro. */
.o-sequencia__etapa--destaque, .o-sequencia__etapa--destaque:hover { background: var(--laranja-fundo); color: var(--laranja-escuro); font-weight: 600; }
.o-sequencia__etapa--destaque .o-sequencia__quadrado { background: var(--papel); border-color: var(--laranja-borda); color: var(--laranja-escuro); }
.o-sequencia__etapa--destaque.o-sequencia__etapa--atual .o-sequencia__quadrado { background: var(--laranja-escuro); border-color: var(--laranja-escuro); color: var(--sobre-marinho); }
/* O traço: estica entre os botões, mínimo de 5 px; verde-pálido quando os dois lados já estão feitos. */
.o-sequencia__traco { flex: 1 1 auto; min-width: 5px; height: 1.5px; background: var(--sequencia-traco); }
.o-sequencia__traco--percorrido { background: var(--sequencia-percorrido); }
.o-sequencia__contador { margin-left: auto; padding-left: var(--esp-3); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--tinta-2); white-space: nowrap; font-variant-numeric: tabular-nums; flex: none; }
.o-sequencia__contador b { color: var(--tinta-1); }
/* Compacta (opção 4, no alto do cartão-documento): só os quadradinhos numerados, sem rótulo; o nome da etapa atual vai ao lado. */
.o-sequencia--compacta { padding: 0; border: 0; border-radius: 0; background: transparent; }
.o-sequencia--compacta .o-sequencia__etapa { min-height: 24px; padding: 0 3px; gap: 0; }
.o-sequencia--compacta .o-sequencia__etapa--atual { background: transparent; }
.o-sequencia--compacta .o-sequencia__etapa--destaque { background: transparent; }
.o-sequencia--compacta .o-sequencia__traco { min-width: 6px; max-width: 22px; }
.o-sequencia__atual-nome { font-family: var(--font-titulo); font-size: 12.5px; font-weight: 600; color: var(--marinho); margin-left: var(--esp-2); white-space: nowrap; }
/* Com moldura (opção 1): a mesma régua das doze dentro da faixa branca do PEV. */
.o-sequencia--moldura { padding: 6px 10px; border: 1px solid var(--linha); border-radius: var(--raio-lg); background: var(--papel); }
.o-sequencia--moldura .o-sequencia__traco { max-width: 40px; }
/* A forma em abas (opção 2, como o PB): as treze numa linha só, a ativa cheia de marinho com texto branco,
   a marca de estado em cada uma; a letra encolhe por nível para caber. */
.o-sequencia--abas { padding: 0; border: 0; border-radius: 0; background: transparent; gap: 3px; align-items: flex-end; width: 100%; overflow: visible; }
.o-sequencia--abas .o-sequencia__traco { display: none; }
.o-sequencia--abas .o-sequencia__etapa { min-height: 34px; padding: 0 10px; border-radius: var(--raio-md) var(--raio-md) 0 0; background: var(--rebaixado); color: var(--tinta-2); font-size: 12.5px; font-weight: 600; gap: 6px; flex: 1 1 auto; justify-content: center; min-width: 0; }
.o-sequencia--abas .o-sequencia__etapa:hover { background: var(--linha); }
.o-sequencia--abas .o-sequencia__etapa--atual, .o-sequencia--abas .o-sequencia__etapa--atual:hover { background: var(--marinho); color: var(--sobre-marinho); }
.o-sequencia--abas .o-sequencia__etapa--destaque { color: var(--laranja-escuro); }
.o-sequencia--abas .o-sequencia__numero { font-weight: 700; color: var(--marinho); font-variant-numeric: tabular-nums; }
.o-sequencia--abas .o-sequencia__etapa--atual .o-sequencia__numero { color: var(--sobre-marinho); }
.o-sequencia--abas .o-sequencia__marca { width: 14px; height: 14px; flex: none; }
.o-sequencia--abas .o-sequencia__etapa--feita .o-sequencia__marca { color: var(--verde-escuro); }
.o-sequencia--abas .o-sequencia__etapa--desatualizada .o-sequencia__marca { color: var(--ambar-escuro); }
.o-sequencia--abas .o-sequencia__etapa--pronta .o-sequencia__marca { color: var(--marinho); }
/* A barra de 3 px marinho sob as abas, como no PB; a ativa se funde a ela. */
.o-abas-barra { border-bottom: 3px solid var(--marinho); }
@media (max-width: 1280px) { .o-sequencia--abas .o-sequencia__etapa { font-size: 11.5px; padding: 0 7px; } }
@media (max-width: 1100px) { .o-sequencia--abas .o-sequencia__etapa { font-size: 10.5px; padding: 0 5px; gap: 4px; } }

/* Pílulas numeradas do cabeçalho leve (opção 3, como as do Guia do Canton): "1 Unidade", o número em marinho. */
.o-pilulas-etapas { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; min-width: 0; scrollbar-width: none; }
.o-pilula-etapa { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border-radius: var(--raio-pilula); border: 1px solid var(--linha); background: var(--papel); color: var(--tinta-1); font-family: var(--font-titulo); font-size: 12px; font-weight: 500; white-space: nowrap; text-decoration: none; flex: none; }
.o-pilula-etapa:hover { background: var(--trilho); text-decoration: none; }
.o-pilula-etapa b { color: var(--marinho); font-weight: 700; font-variant-numeric: tabular-nums; }
.o-pilula-etapa--atual, .o-pilula-etapa--atual:hover { background: var(--marinho); border-color: var(--marinho); color: var(--sobre-marinho); font-weight: 600; }
.o-pilula-etapa--atual b { color: var(--sobre-marinho); }
.o-pilula-etapa .o-icone { width: 12px; height: 12px; stroke-width: 2.2; color: var(--verde-escuro); }

/* ---------- O cabeçalho da unidade (como o cabeçalho do edital no PEV) ---------- */
.o-unidade-cabecalho { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: var(--esp-3) var(--esp-4); align-items: start; padding: var(--esp-4) var(--esp-5); background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-lg); box-shadow: var(--sombra-cartao); }
.o-unidade-cabecalho__quadrado { width: 48px; height: 48px; border-radius: 10px; background: var(--marinho); color: var(--sobre-marinho); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-titulo); font-size: 13px; font-weight: 700; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.o-unidade-cabecalho__titulo { display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap; }
.o-unidade-cabecalho__nome { font-family: var(--font-titulo); font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.015em; color: var(--tinta-1); margin: 0; }
.o-unidade-cabecalho__local { font-size: 13px; color: var(--tinta-3); display: inline-flex; align-items: center; gap: 4px; }
.o-unidade-cabecalho__chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.o-unidade-cabecalho__meta { display: flex; gap: var(--esp-4); flex-wrap: wrap; align-items: center; margin-top: 10px; font-size: 13px; color: var(--tinta-2); }
.o-unidade-cabecalho__meta b { font-weight: 600; color: var(--tinta-1); }
.o-unidade-cabecalho__direita { display: flex; flex-direction: column; align-items: flex-end; gap: var(--esp-3); }
.o-unidade-cabecalho__acoes { display: flex; gap: var(--esp-2); }
/* "Progresso 7 de 12 etapas aceitas" com a barra (o quinto indicador do PEV). */
.o-progresso { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 12px; line-height: 16px; color: var(--tinta-3); }
.o-progresso b { color: var(--tinta-1); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.o-progresso__barra { width: 160px; height: 6px; border-radius: var(--raio-pilula); background: var(--rebaixado); overflow: hidden; }
.o-progresso__barra span { display: block; height: 100%; background: var(--marinho); border-radius: var(--raio-pilula); }

/* ---------- A área principal e o pé fixo ---------- */
.o-principal { grid-area: principal; min-width: 0; display: flex; flex-direction: column; }
.o-principal__miolo { flex: 1; padding: var(--esp-5) var(--esp-7) var(--esp-6); display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
.o-principal__miolo--documento { max-width: var(--documento-largura); width: 100%; margin: 0 auto; padding: var(--esp-8) var(--esp-5) var(--esp-9); gap: var(--esp-9); }
.o-principal__miolo--tela { padding: var(--esp-3) var(--esp-5); gap: 10px; min-height: 0; flex: 1; overflow: hidden; }
/* O pé fixo da etapa: Anterior | Etapa n de 12 | salvo · Aceitar · Próxima. Preso ao pé da janela. */
.o-pe-etapa { position: sticky; bottom: 0; z-index: 20; min-height: var(--pe-altura); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--esp-3); padding: var(--esp-2) var(--esp-7); background: var(--papel); border-top: 1px solid var(--linha); }
.o-pe-etapa__esquerda { display: flex; align-items: center; gap: var(--esp-3); min-width: 0; }
.o-pe-etapa__meio { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--tinta-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.o-pe-etapa__direita { display: flex; align-items: center; justify-content: flex-end; gap: var(--esp-3); min-width: 0; flex-wrap: wrap; }
/* O motivo escrito ao lado do botão desabilitado; e o estado "aceita em…" com "Refazer o aceite". */
.o-pe-etapa__motivo { font-size: 12px; line-height: 16px; color: var(--tinta-3); max-width: 36ch; }
.o-pe-etapa__aceita { font-size: 13px; color: var(--verde-escuro); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
/* Em linha (opção 3): o mesmo pé no fim da seção, sem ficar preso. */
.o-pe-etapa--em-linha { position: static; border: 1px solid var(--linha); border-radius: var(--raio-lg); padding: var(--esp-3) var(--esp-4); }

/* ---------- A página-documento: rótulo-olho, título grande, abertura, metadados, blocos ---------- */
.o-documento { display: flex; flex-direction: column; gap: var(--esp-5); min-width: 0; }
.o-documento--cartao { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-lg); box-shadow: var(--sombra-cartao); padding: var(--esp-6) var(--esp-7) var(--esp-7); }
.o-documento__topo { display: flex; flex-direction: column; gap: var(--esp-2); }
.o-documento__olho { font-size: 11.5px; line-height: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--marinho); display: flex; align-items: center; gap: var(--esp-2); }
.o-documento__titulo { font-family: var(--font-titulo); font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.02em; color: var(--tinta-1); margin: 0; text-wrap: balance; }
.o-documento__titulo b { color: var(--marinho); font-weight: 700; }
.o-documento__abertura { font-size: 15px; line-height: 24px; color: var(--tinta-2); margin: 0; max-width: 72ch; }
.o-documento__meta { display: flex; flex-wrap: wrap; gap: 6px var(--esp-5); font-size: 13px; line-height: 18px; color: var(--tinta-2); padding-top: var(--esp-1); }
.o-documento__meta b { font-weight: 600; color: var(--tinta-1); }
.o-documento__filete { height: 1px; background: var(--linha); border: 0; margin: 0; }
/* Um bloco de trabalho: título, um parágrafo curto e o conteúdo (aviso, tabela, cartão dividido). */
.o-documento__bloco { display: flex; flex-direction: column; gap: var(--esp-3); }
.o-documento__bloco-titulo { font-family: var(--font-titulo); font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; margin: 0; display: flex; align-items: center; gap: var(--esp-2); }
.o-documento__bloco-texto { font-size: 13.5px; line-height: 20px; color: var(--tinta-2); margin: 0; max-width: 80ch; }
.o-documento__bloco-acoes { margin-left: auto; display: flex; gap: var(--esp-2); align-items: center; }

/* ---------- O cartão dividido: fonte | resultado ---------- */
.o-dividido { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--linha); border-radius: var(--raio-lg); overflow: hidden; background: var(--papel); }
.o-dividido__fonte { background: var(--trilho); padding: var(--esp-4) 18px; border-right: 1px solid var(--linha-suave); display: flex; flex-direction: column; gap: 6px; }
.o-dividido__resultado { padding: var(--esp-4) var(--esp-5); display: flex; flex-direction: column; gap: 6px; }
.o-dividido__rotulo { font-size: 11.5px; line-height: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-3); display: flex; align-items: center; gap: var(--esp-2); }
.o-dividido__valor { font-family: var(--font-titulo); font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--tinta-1); }
.o-dividido__valor small { font-family: var(--font-texto); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--tinta-2); margin-left: 6px; }
.o-dividido__linha { font-size: 13px; line-height: 18px; color: var(--tinta-2); display: flex; flex-wrap: wrap; gap: 4px var(--esp-3); align-items: center; }
.o-dividido__linha b { font-weight: 600; color: var(--tinta-1); }

/* ---------- O Resumo: dois cartões de resposta no alto (como o Sumário do PB) ---------- */
.o-resumo-duplo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--esp-5); }
.o-resumo-duplo__titulo { font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-3); }
.o-resumo-duplo__valor { font-family: var(--font-titulo); font-size: 24px; line-height: 28px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.o-resumo-duplo__apoio { font-size: 13px; line-height: 18px; color: var(--tinta-2); }

/* ---------- Botões ---------- */
.o-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
  min-height: var(--alvo-minimo); padding: 0 var(--esp-4);
  border-radius: var(--raio-md); border: 1px solid var(--linha);
  background: var(--papel); color: var(--tinta-1);
  font-family: var(--font-titulo); font-size: 13px; line-height: 18px; font-weight: 600;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 120ms, border-color 120ms, color 120ms;
}
.o-botao:hover { background: var(--trilho); text-decoration: none; color: var(--tinta-1); }
.o-botao:active { transform: translateY(0.5px); }
.o-botao:disabled, .o-botao[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
/* Principal: o laranja escuro para o branco passar de 4,5:1. Um por área. */
.o-botao--principal { background: var(--laranja-escuro); border-color: var(--laranja-escuro); color: var(--sobre-marinho); }
.o-botao--principal:hover { background: var(--laranja-pressionado); border-color: var(--laranja-pressionado); color: var(--sobre-marinho); }
.o-botao--secundario { background: var(--marinho); border-color: var(--marinho); color: var(--sobre-marinho); }
.o-botao--secundario:hover { background: var(--marinho-escuro); border-color: var(--marinho-escuro); color: var(--sobre-marinho); }
.o-botao--fantasma { background: transparent; border-color: transparent; color: var(--marinho); }
.o-botao--fantasma:hover { background: var(--marinho-fundo); color: var(--marinho); }
.o-botao--perigo { color: var(--erro); border-color: var(--erro-borda); }
.o-botao--perigo:hover { background: var(--erro-fundo); color: var(--erro); }
/* "Refazer a proposta" quando a etapa está desatualizada: o "Refazer" laranja do PEV. */
.o-botao--refazer { color: var(--laranja-escuro); border-color: var(--laranja-borda); background: var(--laranja-fundo); }
.o-botao--pequeno { min-height: 28px; padding: 0 10px; font-size: 12px; }
.o-botao--grande { min-height: 40px; padding: 0 var(--esp-5); font-size: 13.5px; }
.o-botao--icone { width: 34px; min-height: 34px; padding: 0; }
.o-botao--icone.o-botao--pequeno { width: 28px; min-height: 28px; }
.o-botao--largo { width: 100%; }

/* ---------- Campos ---------- */
.o-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.o-campo__rotulo { font-size: 11.5px; line-height: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-3); }
.o-campo__ajuda { font-size: 12px; line-height: 16px; color: var(--tinta-3); }
.o-campo__erro { font-size: 12px; line-height: 16px; color: var(--erro); font-weight: 500; }
.o-entrada {
  width: 100%; min-height: var(--alvo-minimo); padding: 0 var(--esp-3);
  border: 1px solid var(--linha); border-radius: var(--raio-md);
  background: var(--papel); color: var(--tinta-1);
  font-family: var(--font-texto); font-size: 14px; line-height: 20px;
}
.o-entrada::placeholder { color: var(--tinta-3); }
.o-entrada:focus { outline: 2px solid var(--laranja); outline-offset: 1px; border-color: var(--laranja); }
.o-entrada:disabled { background: var(--rebaixado); color: var(--tinta-3); cursor: not-allowed; }
.o-entrada--invalido { border-color: var(--erro); background: var(--erro-fundo); }
textarea.o-entrada { min-height: 72px; padding: var(--esp-2) var(--esp-3); resize: vertical; }
.o-entrada--busca { width: 220px; max-width: 100%; min-height: 32px; }
select.o-entrada { padding-right: var(--esp-7); }

/* O número editável: fundo âmbar-pálido, borda âmbar, tabular à direita. */
.o-entrada--numero, .o-entrada--editavel { font-size: 13.5px; font-weight: 500; text-align: right; }
.o-entrada--editavel { background: var(--ambar-fundo); border-color: var(--ambar-borda); border-radius: var(--raio-sm); min-height: 30px; padding: 0 var(--esp-2); }
.o-entrada--editavel:focus { background: var(--papel); }
/* Alterado à mão: borda laranja de 2 px (dentro, para não crescer), letra 600. */
.o-entrada--alterado { box-shadow: inset 0 0 0 2px var(--laranja); border-color: var(--laranja); font-weight: 600; color: var(--laranja-escuro); }

/* Campo com unidade e o ↺ ao lado, alinhados por coluna. */
.o-campo-linha { display: inline-flex; align-items: center; gap: 6px; min-width: 0; position: relative; }
.o-campo-linha .o-entrada--editavel { width: 112px; }
.o-campo-linha__unidade { font-size: 12px; color: var(--tinta-3); white-space: nowrap; }
/* O ↺ só existe quando o valor difere do proposto: laranja, 24 px, sem borda. */
.o-voltar { width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--raio-xs); background: transparent; color: var(--laranja-escuro); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.o-voltar:hover { background: var(--laranja-fundo); }

/* A dica (ao passar o ponteiro): proposto, quem, quando, motivo. */
.o-dica { position: absolute; z-index: 40; width: max-content; max-width: 320px; padding: var(--esp-2) var(--esp-3); border-radius: var(--raio-md); background: var(--tinta-1); color: var(--papel); box-shadow: var(--sombra-flutuante); font-size: 12.5px; line-height: 17px; text-align: left; font-weight: 400; font-variant-numeric: tabular-nums; }
.o-dica b { font-weight: 600; }
.o-dica__linha { display: flex; gap: var(--esp-2); }
.o-dica__linha span:first-child { color: var(--sobre-escuro-suave); min-width: 64px; }
.o-dica--abaixo { top: calc(100% + 6px); left: 0; }

/* ---------- Pílula de origem e pílulas comuns ---------- */
.o-pilula { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 var(--esp-2); border-radius: var(--raio-pilula); border: 1px solid var(--linha); background: var(--papel); color: var(--tinta-2); font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; }
.o-pilula--ativa { background: var(--marinho); border-color: var(--marinho); color: var(--sobre-marinho); }
.o-pilula--chip { background: var(--rebaixado); border-color: var(--rebaixado); color: var(--tinta-2); height: 20px; font-size: 11.5px; }
.o-pilula__remover { width: 14px; height: 14px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; display: inline-flex; }
/* Origem do valor: curta, caixa alta, uma tinta por fonte. A data da fonte vai ao lado, em legenda. */
.o-pilula--origem { height: 18px; padding: 0 6px; border-radius: var(--raio-xs); font-size: 10px; line-height: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.o-pilula--zoho, .o-pilula--folha { background: var(--marinho-fundo); border-color: var(--marinho-borda); color: var(--marinho); }
.o-pilula--calculo, .o-pilula--premissa { background: var(--rebaixado); border-color: var(--linha); color: var(--tinta-2); }
.o-pilula--empresa, .o-pilula--tipo, .o-pilula--contrato { background: var(--trilho); border-color: var(--linha); color: var(--tinta-2); }
.o-pilula--ajuste { background: var(--laranja-fundo); border-color: var(--laranja-borda); color: var(--laranja-escuro); }
.o-origem { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--tinta-3); white-space: nowrap; }

/* ---------- Selo de estado (situação): cor e palavra, nunca só a cor ---------- */
.o-selo { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 var(--esp-2); border-radius: var(--raio-xs); border: 1px solid var(--linha); background: var(--trilho); color: var(--tinta-2); font-size: 11.5px; line-height: 14px; font-weight: 600; white-space: nowrap; }
.o-selo::before { content: ""; width: 7px; height: 7px; border-radius: var(--raio-pilula); background: var(--tinta-4); flex: none; }
.o-selo--andamento { background: var(--marinho-fundo); border-color: var(--marinho-borda); color: var(--marinho); }
.o-selo--andamento::before { background: var(--marinho); }
.o-selo--comite { background: var(--marinho); border-color: var(--marinho); color: var(--sobre-marinho); }
.o-selo--comite::before { background: var(--ambar); }
.o-selo--aprovado, .o-selo--feito { background: var(--verde-fundo); border-color: var(--verde-borda); color: var(--verde-escuro); }
.o-selo--aprovado::before, .o-selo--feito::before { background: var(--verde); }
.o-selo--atencao { background: var(--ambar-fundo); border-color: var(--ambar-borda); color: var(--ambar-escuro); }
.o-selo--atencao::before { background: var(--ambar); }
.o-selo--devolvida, .o-selo--pendente { background: var(--laranja-fundo); border-color: var(--laranja-borda); color: var(--laranja-escuro); }
.o-selo--devolvida::before, .o-selo--pendente::before { background: var(--laranja); }
.o-selo--erro { background: var(--erro-fundo); border-color: var(--erro-borda); color: var(--erro); }
.o-selo--erro::before { background: var(--erro); }
.o-selo--neutro { color: var(--tinta-3); }
.o-selo--sem-ponto::before { display: none; }

/* ---------- Cartão ---------- */
.o-cartao { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-lg); box-shadow: var(--sombra-cartao); min-width: 0; display: flex; flex-direction: column; }
.o-cartao__cabecalho { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); padding: var(--esp-3) var(--esp-4); border-bottom: 1px solid var(--linha-suave); min-height: 48px; }
.o-cartao__titulo { font-family: var(--font-titulo); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--tinta-1); display: flex; align-items: center; gap: var(--esp-2); }
.o-cartao__titulo .o-icone { color: var(--tinta-3); }
.o-cartao__subtitulo { font-size: 12px; line-height: 16px; color: var(--tinta-3); }
.o-cartao__acoes { margin-left: auto; display: flex; align-items: center; gap: var(--esp-2); }
.o-cartao__corpo { padding: var(--esp-4); }
.o-cartao__corpo--sem-respiro { padding: 0; }
.o-cartao__pe { display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-2) var(--esp-4); border-top: 1px solid var(--linha-suave); background: var(--trilho); border-radius: 0 0 var(--raio-lg) var(--raio-lg); font-size: 12px; color: var(--tinta-3); min-height: 40px; flex-wrap: wrap; }
.o-cartao__pe-direita { margin-left: auto; display: flex; align-items: center; gap: var(--esp-3); }
/* Bloco que rola por dentro (opção 2): o cartão ocupa o que sobra e a tabela rola dentro dele. */
.o-cartao--rola { flex: 1 1 auto; min-height: 0; }
.o-cartao--rola .o-tabela-caixa { overflow: auto; flex: 1 1 auto; min-height: 0; }

/* Cartão de número solto (três números do Comitê): papel, número maior, variação. */
.o-numero-cartao { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-lg); padding: var(--esp-4) var(--esp-4) var(--esp-3); display: flex; flex-direction: column; gap: 4px; }
.o-numero-cartao__valor { font-family: var(--font-titulo); font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.o-variacao { font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 4px; }
.o-pos { color: var(--verde-escuro); }
.o-neg { color: var(--erro); }
.o-neutro { color: var(--tinta-3); }

/* ---------- Barra de progresso ("n de 12") fora da lista de tarefas ---------- */
.o-barra { display: inline-flex; align-items: center; gap: var(--esp-2); min-width: 0; }
.o-barra__trilho { width: 72px; height: 6px; border-radius: var(--raio-pilula); background: var(--rebaixado); overflow: hidden; flex: none; }
.o-barra__cheio { display: block; height: 100%; border-radius: var(--raio-pilula); background: var(--marinho); }
.o-barra__cheio--completa { background: var(--verde); }
.o-barra__cheio--atencao { background: var(--laranja); }
.o-contador { font-size: 12px; font-weight: 600; color: var(--tinta-2); white-space: nowrap; }

/* ---------- Tabela ---------- */
.o-tabela-caixa { overflow-x: auto; max-width: 100%; border: 1px solid var(--linha); border-radius: var(--raio-md); background: var(--papel); }
/* Dentro de um cartão a caixa não repete a borda. */
.o-cartao .o-tabela-caixa { border: 0; border-radius: 0; }
.o-tabela { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; line-height: 18px; }
.o-tabela th { position: sticky; top: 0; z-index: 2; background: var(--trilho); color: var(--tinta-3); font-family: var(--font-texto); font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-align: left; padding: 10px var(--esp-3); border-bottom: 1px solid var(--linha); white-space: nowrap; }
.o-tabela td { padding: 9px var(--esp-3); border-bottom: 1px solid var(--linha-suave); vertical-align: middle; color: var(--tinta-1); }
.o-tabela tbody tr:hover td { background: var(--trilho); }
.o-tabela tbody tr:last-child td { border-bottom: 0; }
/* Número: tabular, à direita; o percentual pequeno e colorido ao lado (a densidade do PEV). */
.o-tabela .o-num, .o-tabela th.o-num { text-align: right; font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.o-tabela th.o-num { font-size: 11px; font-weight: 600; }
.o-tabela .o-num small { font-size: 11.5px; line-height: 14px; font-weight: 500; color: var(--tinta-3); margin-left: 6px; }
.o-tabela .o-num small.o-pos { color: var(--verde-escuro); }
.o-tabela .o-num small.o-neg { color: var(--erro); }
.o-tabela .o-num--sub small { display: block; margin-left: 0; }
.o-tabela .o-codigo { font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--tinta-2); }
.o-tabela .o-tabela__nome { font-weight: 600; color: var(--tinta-1); }
.o-tabela .o-tabela__sub { display: block; font-size: 10.5px; line-height: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tinta-3); margin-top: 2px; }
.o-tabela .o-tabela__discreto { color: var(--tinta-3); font-size: 12.5px; white-space: nowrap; }
.o-tabela th.o-tabela__ordenada { color: var(--laranja-escuro); }
.o-tabela th button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
/* Densa: para a base realizada, o quadro de pessoal e o quadro do Comitê. */
.o-tabela--densa td { padding: 6px var(--esp-3); font-size: 13px; line-height: 17px; }
.o-tabela--densa th { padding: 8px var(--esp-3); }
.o-tabela--densa td:first-child { min-width: 180px; }
/* Linha de grupo, subtotal e resultado: reconhecíveis sem ler. */
.o-tabela__grupo td { background: var(--rebaixado); color: var(--tinta-2); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding-top: 6px; padding-bottom: 6px; }
.o-tabela__subtotal td { background: var(--rebaixado); font-weight: 600; border-top: 1px solid var(--linha); }
.o-tabela__resultado td { background: var(--verde-fundo); color: var(--verde-escuro); font-weight: 700; padding-top: 11px; padding-bottom: 11px; border-top: 1px solid var(--verde-borda); border-bottom: 1px solid var(--verde-borda); }
.o-tabela__resultado--negativo td { background: var(--erro-fundo); color: var(--erro); border-color: var(--erro-borda); }
.o-tabela__total td { background: var(--trilho); font-weight: 700; border-top: 2px solid var(--linha); position: sticky; bottom: 0; }
.o-tabela tr.o-tabela__expansivel td:first-child { padding-left: var(--esp-2); }
.o-tabela__seta { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--tinta-3); margin-right: 4px; vertical-align: middle; }
.o-tabela__filha td { background: var(--trilho); color: var(--tinta-2); }
.o-tabela__filha td:first-child { padding-left: var(--esp-8); }
/* Célula editável e célula alterada seguem o campo; a alterada ganha o ↺ ao lado. */
.o-tabela td.o-celula--editavel { padding: 3px var(--esp-2); }
.o-tabela td.o-celula--editavel .o-campo-linha { justify-content: flex-end; width: 100%; }
.o-tabela td.o-celula--editavel .o-entrada--editavel { width: 88px; }
.o-tabela td.o-celula--alterada .o-entrada--editavel { box-shadow: inset 0 0 0 2px var(--laranja); border-color: var(--laranja); font-weight: 600; color: var(--laranja-escuro); }
.o-tabela th.o-coluna--marcada, .o-tabela td.o-coluna--marcada { background: var(--marinho-fundo); }
.o-tabela tbody tr:hover td.o-coluna--marcada { background: var(--marinho-fundo); }
/* A conferência automática escreve ao lado do número, sem travar nada. */
.o-conferencia { font-size: 11.5px; line-height: 14px; color: var(--erro); font-weight: 500; }
.o-conferencia--limite { color: var(--ambar-escuro); }

/* ---------- Listas de itens (Histórico, pendências do Resumo) ---------- */
.o-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.o-lista__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--esp-1) var(--esp-3); align-items: start; padding: 10px var(--esp-4); border-top: 1px solid var(--linha-suave); text-decoration: none; color: inherit; }
.o-lista__item:first-child { border-top: 0; }
a.o-lista__item:hover { background: var(--trilho); text-decoration: none; }
.o-lista__titulo { display: block; font-size: 13.5px; line-height: 18px; font-weight: 600; color: var(--tinta-1); }
.o-lista__titulo em { font-style: normal; font-weight: 500; color: var(--laranja-escuro); }
.o-lista__sub { display: block; font-size: 10.5px; line-height: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tinta-3); margin-top: 2px; }
.o-lista__texto { display: block; font-size: 13px; line-height: 17px; color: var(--tinta-2); margin-top: 3px; }
.o-lista__meta { font-size: 11.5px; line-height: 16px; font-weight: 500; color: var(--tinta-3); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.o-lista__meta b { display: block; font-weight: 500; color: var(--tinta-2); font-size: 12px; }
.o-lista__item--com-icone { grid-template-columns: 26px minmax(0, 1fr) auto; }
.o-lista__icone { width: 26px; height: 26px; border-radius: var(--raio-sm); display: inline-flex; align-items: center; justify-content: center; background: var(--rebaixado); color: var(--tinta-2); }
.o-lista__icone--laranja { background: var(--laranja-fundo); color: var(--laranja-escuro); }
.o-lista__icone--verde { background: var(--verde-fundo); color: var(--verde-escuro); }
.o-lista__icone--marinho { background: var(--marinho-fundo); color: var(--marinho); }
.o-lista__icone--ambar { background: var(--ambar-fundo); color: var(--ambar-escuro); }
.o-ver-todos { margin-left: auto; font-family: var(--font-titulo); font-size: 12px; font-weight: 600; color: var(--marinho); display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }

/* ---------- Avisos ---------- */
.o-aviso { display: flex; gap: var(--esp-3); align-items: flex-start; padding: var(--esp-3) var(--esp-4); border-radius: var(--raio-md); border: 1px solid var(--linha); background: var(--trilho); color: var(--tinta-1); font-size: 13.5px; line-height: 19px; }
.o-aviso .o-icone { margin-top: 2px; flex: none; }
.o-aviso__titulo { font-weight: 600; }
.o-aviso__texto { color: var(--tinta-2); }
.o-aviso__acoes { margin-left: auto; display: flex; gap: var(--esp-2); align-items: center; flex: none; flex-wrap: wrap; }
.o-aviso--info { background: var(--marinho-fundo); border-color: var(--marinho-borda); }
.o-aviso--info .o-icone { color: var(--marinho); }
.o-aviso--atencao { background: var(--ambar-fundo); border-color: var(--ambar-borda); }
.o-aviso--atencao .o-icone { color: var(--ambar-escuro); }
.o-aviso--pendencia { background: var(--laranja-fundo); border-color: var(--laranja-borda); }
.o-aviso--pendencia .o-icone { color: var(--laranja-escuro); }
.o-aviso--sucesso { background: var(--verde-fundo); border-color: var(--verde-borda); }
.o-aviso--sucesso .o-icone { color: var(--verde-escuro); }
.o-aviso--erro { background: var(--erro-fundo); border-color: var(--erro-borda); }
.o-aviso--erro .o-icone { color: var(--erro); }
/* Escolha dentro do aviso (ex.: a base da folha): botões de opção em linha; o marcado em âmbar-pálido. */
.o-escolha { display: inline-flex; border: 1px solid var(--linha); border-radius: var(--raio-md); overflow: hidden; background: var(--papel); }
.o-escolha__opcao { padding: 6px var(--esp-3); border: 0; background: transparent; font-size: 13px; font-weight: 500; color: var(--tinta-2); cursor: pointer; border-left: 1px solid var(--linha); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.o-escolha__opcao:first-child { border-left: 0; }
.o-escolha__opcao--marcada { background: var(--ambar-fundo); color: var(--tinta-1); font-weight: 600; }
.o-escolha__opcao--marcada .o-icone { color: var(--verde-escuro); }

/* ---------- Estado vazio, carregando, erro ---------- */
.o-vazio { border: 1px dashed var(--divisor); border-radius: var(--raio-lg); background: var(--trilho); padding: var(--esp-9) var(--esp-6); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--esp-2); }
.o-vazio__icone { width: 44px; height: 44px; border-radius: var(--raio-pilula); background: var(--marinho-fundo); color: var(--marinho); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.o-vazio__titulo { font-family: var(--font-titulo); font-size: 15px; line-height: 20px; font-weight: 600; }
.o-vazio__texto { font-size: 13px; line-height: 18px; color: var(--tinta-2); max-width: 44ch; }
.o-esqueleto { display: block; height: 14px; border-radius: var(--raio-xs); background: linear-gradient(90deg, var(--rebaixado) 25%, var(--linha-suave) 50%, var(--rebaixado) 75%); background-size: 200% 100%; animation: o-brilho 1.4s linear infinite; }
.o-esqueleto--linha { height: 36px; border-radius: var(--raio-md); }
.o-esqueleto--numero { height: 28px; width: 120px; }
@keyframes o-brilho { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .o-esqueleto { animation: none; } }
.o-girando { animation: o-gira 0.9s linear infinite; }
@keyframes o-gira { to { transform: rotate(360deg); } }
/* Andamento sem percentual nem cronômetro (PEV): barra fina indeterminada e o texto do passo. */
.o-andando { position: relative; height: 3px; background: var(--rebaixado); overflow: hidden; border-radius: var(--raio-pilula); }
.o-andando::after { content: ""; position: absolute; top: 0; bottom: 0; left: -42%; width: 42%; background: var(--laranja); animation: o-anda 1.1s linear infinite; }
@keyframes o-anda { to { left: 100%; } }
.o-andando-texto { font-size: 12px; line-height: 16px; font-style: italic; color: var(--tinta-3); }

/* ---------- Gravação sem botão: "salvando…", "salvo 14:32", "só leitura" ---------- */
.o-salvo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--tinta-3); white-space: nowrap; }
.o-salvo--salvando { color: var(--marinho); }
.o-salvo--feito .o-icone { color: var(--verde-escuro); }
.o-salvo--erro { color: var(--erro); }
.o-salvo--leitura { color: var(--ambar-escuro); }

/* ---------- Gaveta de ajuda (ⓘ): quatro pontos, à direita ---------- */
.o-gaveta { width: var(--gaveta-largura); max-width: 100%; background: var(--papel); border-left: 1px solid var(--linha); box-shadow: var(--sombra-dialogo); display: flex; flex-direction: column; }
.o-gaveta__cabecalho { display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); border-bottom: 1px solid var(--linha-suave); min-height: 48px; }
.o-gaveta__corpo { padding: var(--esp-4); display: flex; flex-direction: column; gap: var(--esp-4); overflow: auto; }
.o-gaveta__secao h3 { margin: 0 0 4px; font-size: 11.5px; line-height: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-3); }
.o-gaveta__secao p { margin: 0; font-size: 13.5px; line-height: 19px; color: var(--tinta-1); }
.o-gaveta__secao ul { margin: 4px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 19px; color: var(--tinta-1); }
.o-gaveta__conta { background: var(--rebaixado); border-radius: var(--raio-md); padding: var(--esp-2) var(--esp-3); font-size: 13px; line-height: 18px; color: var(--tinta-1); font-variant-numeric: tabular-nums; }
.o-gaveta__fontes { font-size: 12px; line-height: 16px; color: var(--tinta-3); }
.o-com-gaveta { display: grid; grid-template-columns: minmax(0, 1fr) var(--gaveta-largura); gap: var(--esp-5); align-items: start; }

/* ---------- Diálogo de confirmação ---------- */
.o-veu { position: fixed; inset: 0; background: var(--veu); display: flex; align-items: center; justify-content: center; padding: var(--esp-4); z-index: 50; }
.o-veu--em-linha { position: relative; inset: auto; min-height: 320px; border-radius: var(--raio-lg); }
.o-dialogo { width: min(520px, 100%); background: var(--papel); border-radius: var(--raio-xl); box-shadow: var(--sombra-dialogo); display: flex; flex-direction: column; }
.o-dialogo__cabecalho { padding: var(--esp-5) var(--esp-6) 0; font-family: var(--font-titulo); font-size: 16px; line-height: 22px; font-weight: 600; }
.o-dialogo__corpo { padding: var(--esp-3) var(--esp-6); font-size: 13.5px; line-height: 19px; color: var(--tinta-2); display: flex; flex-direction: column; gap: var(--esp-3); }
.o-dialogo__pe { padding: var(--esp-3) var(--esp-6) var(--esp-5); display: flex; justify-content: flex-end; gap: var(--esp-2); }

/* ---------- Aviso flutuante (canto inferior direito) ---------- */
.o-flutuante { position: fixed; right: var(--esp-6); bottom: calc(var(--pe-altura) + var(--esp-4)); z-index: 60; display: inline-flex; align-items: center; gap: var(--esp-3); padding: 10px var(--esp-4); border-radius: var(--raio-md); background: var(--tinta-1); color: var(--papel); box-shadow: var(--sombra-flutuante); font-size: 13.5px; line-height: 18px; }
.o-flutuante--em-linha { position: static; }
.o-flutuante .o-icone { color: var(--verde); }
.o-flutuante--erro .o-icone { color: var(--laranja); }
.o-flutuante__acao { color: var(--ambar); font-weight: 600; text-decoration: none; }
.o-flutuante__fechar { width: 22px; height: 22px; padding: 0; border: 0; background: transparent; color: var(--sobre-escuro-suave); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }

/* ---------- Lista de documentos ---------- */
.o-doc-linha { display: grid; grid-template-columns: 26px minmax(0, 1.6fr) minmax(0, 1fr) auto auto auto; gap: var(--esp-3); align-items: center; padding: 10px var(--esp-4); border-top: 1px solid var(--linha-suave); font-size: 13px; }
.o-doc-linha:first-child { border-top: 0; }
.o-doc-linha__nome { font-weight: 600; color: var(--tinta-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-doc-linha__meta { color: var(--tinta-3); font-size: 12px; }
.o-versao { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.o-versao--aguardando, .o-versao--indisponivel { color: var(--tinta-3); }
.o-versao--extraido { color: var(--verde-escuro); }
.o-versao--falhou { color: var(--erro); }
.o-envio { border: 1px dashed var(--divisor); border-radius: var(--raio-lg); background: var(--trilho); padding: var(--esp-5); text-align: center; color: var(--tinta-2); font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: var(--esp-2); }

/* ---------- Abas internas (seletor de grupo) e filtros ---------- */
.o-abas { display: inline-flex; background: var(--rebaixado); border-radius: var(--raio-md); padding: 3px; gap: 2px; }
.o-aba { padding: 5px var(--esp-3); border: 0; border-radius: var(--raio-sm); background: transparent; color: var(--tinta-2); font-family: var(--font-titulo); font-size: 12.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.o-aba--ativa { background: var(--papel); color: var(--laranja-escuro); box-shadow: var(--sombra-cartao); }
.o-aba__contador { font-size: 11px; font-weight: 500; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.o-filtros { display: flex; gap: var(--esp-2); flex-wrap: wrap; align-items: center; }
.o-filtros .o-entrada { width: auto; min-width: 160px; min-height: 32px; }

/* ---------- Premissa: a linha com os três níveis ---------- */
.o-niveis { display: inline-flex; gap: 4px; }
.o-nivel { height: 18px; min-width: 18px; padding: 0 5px; border-radius: var(--raio-xs); border: 1px solid var(--linha); background: var(--trilho); font-size: 11px; font-weight: 600; color: var(--tinta-3); display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.o-nivel--com-valor { background: var(--laranja-fundo); border-color: var(--laranja-borda); color: var(--laranja-escuro); }
.o-situacao { font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.o-situacao--lei { color: var(--verde-escuro); }
.o-situacao--estimativa { color: var(--ambar-escuro); }
.o-situacao--projeto { color: var(--marinho); }
.o-situacao--regra { color: var(--tinta-2); }

/* ---------- Entrada (a tela de entrar) ---------- */
.o-entrar { min-height: 100vh; background: var(--fundo); display: flex; align-items: center; justify-content: center; padding: var(--esp-6) var(--esp-4); }
.o-entrar__cartao { width: min(400px, 100%); background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-xl); box-shadow: var(--sombra-cartao); padding: var(--esp-8) var(--esp-7); display: flex; flex-direction: column; gap: var(--esp-4); }
.o-entrar__marca { display: flex; flex-direction: column; align-items: center; gap: var(--esp-2); text-align: center; }
.o-entrar__marca img { width: 56px; height: 56px; border-radius: var(--raio-pilula); }
.o-entrar__titulo { font-family: var(--font-titulo); font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.02em; }

/* ---------- Casca do celular (390): a lista das doze é a primeira tela; o aceite fica preso no pé ---------- */
.o-celular { width: 100%; min-height: 100vh; background: var(--fundo); display: flex; flex-direction: column; font-family: var(--font-texto); color: var(--tinta-1); }
.o-celular__topo { height: 56px; background: var(--papel); border-bottom: 1px solid var(--linha); display: flex; align-items: center; gap: 10px; padding: 0 var(--esp-4); position: sticky; top: 0; z-index: 10; }
.o-celular__miolo { flex: 1; padding: var(--esp-4); display: flex; flex-direction: column; gap: var(--esp-3); padding-bottom: 88px; }
.o-celular__aceite { position: fixed; left: 0; right: 0; bottom: 0; padding: var(--esp-3) var(--esp-4); background: var(--papel); border-top: 1px solid var(--linha); display: flex; gap: var(--esp-2); align-items: center; z-index: 9; }
.o-celular .o-botao, .o-celular .o-entrada { min-height: 44px; }
.o-cartao-cargo { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-lg); padding: var(--esp-3) var(--esp-4); display: flex; flex-direction: column; gap: var(--esp-2); }
.o-cartao-cargo__linha { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-3); font-size: 13.5px; }
.o-cartao-cargo__linha span:first-child { color: var(--tinta-2); }

/* ---------- Em tela estreita: a coluna vira gaveta; nada vaza à direita ---------- */
@media (max-width: 900px) {
  .o-casco { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cabecalho" "principal"; }
  /* A coluna some do fluxo e volta como gaveta por um botão do cabeçalho (desenho do celular). */
  .o-coluna { display: none; }
  .o-coluna--gaveta { display: block; position: fixed; inset: var(--cabecalho-altura) 0 0 0; width: min(var(--coluna-largura), 100%); z-index: 35; box-shadow: var(--sombra-dialogo); }
  .o-cabecalho { padding: 0 var(--esp-4); gap: var(--esp-2); }
  .o-cabecalho--duas-linhas .o-cabecalho__linha { padding: 0 var(--esp-4); }
  .o-cabecalho__nome { font-size: 15px; }
  .o-cabecalho .o-leitura, .o-cabecalho .o-salvo, .o-cabecalho .o-cabecalho__pessoa-nome, .o-cabecalho .o-cabecalho__pessoa-papel, .o-cabecalho .o-botao--sair, .o-cabecalho .o-cabecalho__divisor, .o-cabecalho .o-cabecalho__ideal, .o-cabecalho .o-menu-mais { display: none; }
  .o-seletor-unidade { flex: 1 1 auto; min-width: 0; }
  /* Com o seletor de unidade no cabeçalho não cabe o selo do ciclo (medido a 390: ficava cortado atrás do seletor). */
  .o-cabecalho--duas-linhas .o-selo-ciclo { display: none; }
  .o-principal__miolo { padding: var(--esp-4) var(--esp-4) var(--esp-6); }
  .o-principal__miolo--documento { padding: var(--esp-5) var(--esp-4) var(--esp-8); gap: var(--esp-6); }
  .o-documento--cartao { padding: var(--esp-4); }
  .o-documento__titulo { font-size: 22px; line-height: 28px; }
  .o-unidade-cabecalho { grid-template-columns: 40px minmax(0, 1fr); }
  .o-unidade-cabecalho__direita { grid-column: 1 / -1; align-items: flex-start; }
  .o-unidade-cabecalho__quadrado { width: 40px; height: 40px; font-size: 11px; }
  .o-dividido { grid-template-columns: minmax(0, 1fr); }
  .o-dividido__fonte { border-right: 0; border-bottom: 1px solid var(--linha-suave); }
  /* O aviso com escolha: as opções descem para a linha de baixo e podem quebrar texto (medido a 390: vazava 40 px). */
  .o-aviso { flex-wrap: wrap; }
  .o-aviso__acoes { margin-left: 0; flex-basis: 100%; }
  .o-escolha { display: flex; flex-wrap: wrap; max-width: 100%; }
  .o-escolha__opcao { white-space: normal; flex: 1 1 auto; justify-content: center; }
  .o-pe-etapa { grid-template-columns: minmax(0, 1fr); padding: var(--esp-2) var(--esp-4); }
  .o-pe-etapa__meio { display: none; }
  .o-pe-etapa__direita { justify-content: space-between; }
  .o-pe-etapa .o-botao--principal { flex: 1; }
  .o-sequencia--abas { overflow-x: auto; }
  .o-sequencia--abas .o-sequencia__etapa { flex: none; }
  .o-com-gaveta { grid-template-columns: minmax(0, 1fr); }
  .o-gaveta { width: 100%; border-left: 0; border-top: 1px solid var(--linha); }
  .o-casco--tela { height: auto; overflow: visible; }
  .o-casco--tela .o-principal, .o-principal__miolo--tela { overflow: visible; }
}