/*
 * Primitivos do Doutor na Cadeira.
 *
 * CSS puro, sem framework e sem build. O Dokploy builda na propria VPS, que tem
 * pouca memoria: cada dependencia de build aqui e' tempo de deploy e risco de
 * OOM. Cinco telas nao justificam um bundler.
 *
 * Todo valor vem de `tokens.css`. Nao ha hex, px de espacamento nem font-family
 * literal neste arquivo: se algum aparecer, e' regressao.
 */

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

/*
 * `hidden` VOLTA A ESCONDER. Sim, isto parece redundante, e não é.
 *
 * O navegador esconde `[hidden]` com uma regra de folha de usuário cuja
 * especificidade é a de um seletor de atributo. QUALQUER classe nossa que
 * declare `display` (e várias declaram: `.dnc-botao` é inline-flex,
 * `.dnc-rodape-fixo` é flex, `.dnc-campo__erro` é block) tem especificidade
 * maior e ANULA o `hidden` em silêncio.
 *
 * Encontrado em 2026-08-11 ao renderizar a página de termos servida pelo app:
 * o botão "Li e aceito" aparecia mesmo fora do fluxo de aceite, e clicar nele
 * registraria um aceite que ninguém pediu. O mesmo defeito estava no link de
 * WhatsApp da ficha da cliente (aparecia sem número) e nos campos de erro da
 * ficha (renderizavam vazios). Um sintoma, três telas.
 *
 * O `!important` é o que torna a regra confiável, e ele é seguro porque a única
 * exceção legítima do app está escrita com especificidade MAIOR e também com
 * `!important` (ver `.dnc-ficha [data-passo][hidden]` na seção de desktop).
 */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--dnc-fonte);
  font-size: var(--dnc-t-base);
  line-height: 1.5;
  color: var(--dnc-texto);
  background: var(--dnc-fundo);
  /* Respeita a barra de gestos e o notch: sem isto o botao fixo do rodape fica
     embaixo da barra do iPhone e nao da para clicar. */
  padding-bottom: env(safe-area-inset-bottom);
}

/* ---- estrutura --------------------------------------------------------- */

.dnc-tela {
  max-width: var(--dnc-largura-max);
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.dnc-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dnc-e-3);
  padding: var(--dnc-e-3) var(--dnc-e-4);
  background: var(--dnc-superficie);
  border-bottom: 1px solid var(--dnc-borda);
  position: sticky;
  top: 0;
  z-index: 10;
}

.dnc-topo__titulo {
  font-size: var(--dnc-t-base);
  font-weight: var(--dnc-peso-medio);
  margin: 0;
}

/* Ação principal no topo (o Salvar da ficha). Existe SÓ no desktop: no celular
   quem salva é o botão do último passo, no rodapé. Some por padrão e volta
   dentro da media query, para que o HTML seja um só.

   ⚠️ O SELETOR PRECISA DO PAI (`.dnc-topo`), e isso não é enfeite. O botão também
   carrega `.dnc-botao`, que declara `display: inline-flex` mais abaixo neste
   arquivo. Entre dois seletores de mesma especificidade (0,1,0) vence o ÚLTIMO,
   então `.dnc-topo__acao` sozinho PERDIA e o Salvar aparecia no celular, no passo
   1 de 4, ao lado do "Próximo". Ficou assim de 2026-08-11 (quando a ficha foi
   escrita) até ser flagrado no render de 2026-08-11. Com o pai, a conta vira
   (0,2,0) e ganha. Mesma armadilha do `[hidden]` documentada no topo do arquivo:
   qualquer classe que declare `display` derruba quem esconde. */
.dnc-topo .dnc-topo__acao {
  display: none;
}

.dnc-corpo {
  flex: 1;
  padding: var(--dnc-e-4);
  padding-bottom: var(--dnc-e-7);
}

.dnc-rodape-fixo {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: var(--dnc-e-3);
  padding: var(--dnc-e-3) var(--dnc-e-4);
  padding-bottom: calc(var(--dnc-e-3) + env(safe-area-inset-bottom));
  background: var(--dnc-superficie);
  border-top: 1px solid var(--dnc-borda);
}

/* ---- passo a passo ------------------------------------------------------ */

.dnc-passos {
  display: flex;
  align-items: center;
  gap: var(--dnc-e-2);
  padding: var(--dnc-e-3) var(--dnc-e-4) 0;
}

.dnc-passos__trilho {
  flex: 1;
  height: 4px;
  border-radius: var(--dnc-raio-pill);
  background: var(--dnc-borda);
  overflow: hidden;
}

.dnc-passos__preenchido {
  height: 100%;
  background: var(--dnc-marca-500);
  border-radius: var(--dnc-raio-pill);
  transition: width 220ms ease;
}

.dnc-passos__contador {
  font-size: var(--dnc-t-sm);
  color: var(--dnc-texto-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dnc-secao-titulo {
  font-size: var(--dnc-t-xl);
  font-weight: var(--dnc-peso-forte);
  margin: 0 0 var(--dnc-e-1);
}

.dnc-secao-apoio {
  font-size: var(--dnc-t-sm);
  color: var(--dnc-texto-2);
  margin: 0 0 var(--dnc-e-5);
}

/* ---- campo -------------------------------------------------------------- */

.dnc-campo {
  margin-bottom: var(--dnc-e-5);
}

.dnc-campo__rotulo {
  display: block;
  font-size: var(--dnc-t-sm);
  font-weight: var(--dnc-peso-medio);
  margin-bottom: var(--dnc-e-2);
}

.dnc-campo__dica {
  display: block;
  font-size: var(--dnc-t-xs);
  color: var(--dnc-texto-3);
  margin-top: var(--dnc-e-1);
}

.dnc-entrada,
.dnc-area {
  width: 100%;
  /* 16px: abaixo disso o Safari do iPhone da zoom ao focar. Ver tokens.css. */
  font-size: var(--dnc-t-base);
  font-family: inherit;
  color: var(--dnc-texto);
  background: var(--dnc-superficie);
  border: 1px solid var(--dnc-borda-forte);
  border-radius: var(--dnc-raio);
  padding: var(--dnc-e-3);
  min-height: var(--dnc-toque);
}

.dnc-area {
  min-height: calc(var(--dnc-toque) * 2);
  resize: vertical;
}

.dnc-entrada:focus-visible,
.dnc-area:focus-visible,
.dnc-opcao input:focus-visible + span,
.dnc-botao:focus-visible {
  outline: 3px solid var(--dnc-marca-300);
  outline-offset: 2px;
}

.dnc-entrada[aria-invalid="true"],
.dnc-area[aria-invalid="true"] {
  border-color: var(--dnc-erro);
}

.dnc-campo__erro {
  display: block;
  font-size: var(--dnc-t-xs);
  color: var(--dnc-erro);
  margin-top: var(--dnc-e-1);
}

/* ---- opcoes (escolha unica e multipla, mesma aparencia) ----------------- */

/* Uma so aparencia para radio e checkbox de proposito: quem preenche nao pensa
   em "unica ou multipla", pensa em "marcar o que vale". A regra de cardinalidade
   e cobrada pelo banco (indice parcial), nao pela aparencia. */
.dnc-opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dnc-e-2);
}

.dnc-opcao input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.dnc-opcao span {
  display: inline-flex;
  align-items: center;
  min-height: var(--dnc-toque);
  padding: 0 var(--dnc-e-4);
  border: 1px solid var(--dnc-borda-forte);
  border-radius: var(--dnc-raio-pill);
  background: var(--dnc-superficie);
  font-size: var(--dnc-t-sm);
  cursor: pointer;
  user-select: none;
}

.dnc-opcao input:checked + span {
  background: var(--dnc-marca-100);
  border-color: var(--dnc-marca-500);
  color: var(--dnc-marca-900);
  font-weight: var(--dnc-peso-medio);
}

/* ---- botao -------------------------------------------------------------- */

.dnc-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dnc-e-2);
  min-height: var(--dnc-toque);
  padding: 0 var(--dnc-e-5);
  border-radius: var(--dnc-raio);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: var(--dnc-t-base);
  font-weight: var(--dnc-peso-medio);
  cursor: pointer;
  text-decoration: none;
}

.dnc-botao--principal {
  background: var(--dnc-marca-500);
  color: var(--dnc-texto-inverso);
  flex: 1;
}

.dnc-botao--secundario {
  background: var(--dnc-superficie);
  color: var(--dnc-texto);
  border-color: var(--dnc-borda-forte);
}

.dnc-botao--texto {
  background: transparent;
  color: var(--dnc-texto-2);
  padding: 0 var(--dnc-e-2);
}

.dnc-botao--perigo {
  background: var(--dnc-superficie);
  color: var(--dnc-erro);
  border-color: var(--dnc-erro);
}

.dnc-botao[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Botão que ocupa a linha inteira. É padrão de CELULAR: com o polegar, alvo
   largo é alvo fácil. No desktop ele volta ao tamanho do próprio texto, dentro
   da media query. Um botão de largura inteira num monitor não fica "confortável",
   fica com peso de ação principal, e o único que usa esta classe hoje é o de
   EXCLUIR a cliente com todo o histórico. */
.dnc-botao--bloco {
  width: 100%;
  margin-top: var(--dnc-e-6);
}

/* ---- cartao e lista ----------------------------------------------------- */

.dnc-cartao {
  background: var(--dnc-superficie);
  border: 1px solid var(--dnc-borda);
  border-radius: var(--dnc-raio-lg);
  padding: var(--dnc-e-4);
  box-shadow: var(--dnc-sombra-1);
}

.dnc-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--dnc-e-2);
}

.dnc-item {
  display: flex;
  align-items: center;
  gap: var(--dnc-e-3);
  min-height: calc(var(--dnc-toque) + var(--dnc-e-3));
  padding: var(--dnc-e-3) var(--dnc-e-4);
  background: var(--dnc-superficie);
  border: 1px solid var(--dnc-borda);
  border-radius: var(--dnc-raio);
  text-decoration: none;
  color: inherit;
}

.dnc-item__nome {
  font-weight: var(--dnc-peso-medio);
}

.dnc-item__apoio {
  font-size: var(--dnc-t-sm);
  color: var(--dnc-texto-2);
}

.dnc-etiqueta {
  display: inline-flex;
  align-items: center;
  padding: var(--dnc-e-1) var(--dnc-e-3);
  border-radius: var(--dnc-raio-pill);
  font-size: var(--dnc-t-xs);
  font-weight: var(--dnc-peso-medio);
  background: var(--dnc-superficie-2);
  color: var(--dnc-texto-2);
}

.dnc-etiqueta--retorno {
  background: var(--dnc-ok-fundo);
  color: var(--dnc-marca-900);
}

.dnc-etiqueta--atencao {
  background: var(--dnc-aviso-fundo);
  color: var(--dnc-aviso);
}

/* Cartao da Proxima visita. No mockup aprovado isto era `style=` inline; virou
   classe ao implementar, porque destaque de campo e decisao de design e nao
   pode viver so dentro de uma tela. */
.dnc-cartao--destaque {
  border-color: var(--dnc-marca-500);
  background: var(--dnc-marca-100);
}

/* ---- barra de navegacao ------------------------------------------------- */

.dnc-nav {
  position: sticky;
  bottom: 0;
  display: flex;
  background: var(--dnc-superficie);
  border-top: 1px solid var(--dnc-borda);
  padding-bottom: env(safe-area-inset-bottom);
}

.dnc-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--dnc-e-1);
  min-height: calc(var(--dnc-toque) + var(--dnc-e-2));
  padding: var(--dnc-e-2);
  font-size: var(--dnc-t-xs);
  color: var(--dnc-texto-2);
  text-decoration: none;
}

.dnc-nav a[aria-current="page"] {
  color: var(--dnc-marca-500);
  font-weight: var(--dnc-peso-medio);
}

/* ---- texto longo (documentos legais) ------------------------------------ */

.dnc-prosa {
  font-size: var(--dnc-t-base);
}

.dnc-prosa h1 {
  font-size: var(--dnc-t-2xl);
  margin: 0 0 var(--dnc-e-4);
}

.dnc-prosa h2 {
  font-size: var(--dnc-t-lg);
  margin: var(--dnc-e-6) 0 var(--dnc-e-2);
}

.dnc-prosa p,
.dnc-prosa ul {
  margin: 0 0 var(--dnc-e-4);
}

.dnc-prosa li {
  margin-bottom: var(--dnc-e-2);
}

/* Citacao: no termo da cliente, e o texto que se le em voz alta para ela. */
.dnc-prosa blockquote {
  margin: 0 0 var(--dnc-e-4);
  padding: var(--dnc-e-3) var(--dnc-e-4);
  border-left: 3px solid var(--dnc-marca-500);
  background: var(--dnc-superficie);
  color: var(--dnc-texto);
}

/* ---- vazio e avisos ----------------------------------------------------- */

.dnc-vazio {
  text-align: center;
  padding: var(--dnc-e-7) var(--dnc-e-4);
  color: var(--dnc-texto-2);
}

.dnc-aviso {
  padding: var(--dnc-e-3) var(--dnc-e-4);
  border-radius: var(--dnc-raio);
  font-size: var(--dnc-t-sm);
  background: var(--dnc-aviso-fundo);
  color: var(--dnc-aviso);
  margin-bottom: var(--dnc-e-4);
}

.dnc-aviso--erro {
  background: var(--dnc-erro-fundo);
  color: var(--dnc-erro);
}

/* Confirmação. Mesmo formato dos outros dois avisos: só troca o par de cores,
   que são os tokens `--dnc-ok` (o verde da própria marca) e `--dnc-ok-fundo`.
   Nada de ícone, nada de negrito, nada de verde de semáforo: quem terminou uma
   tarefa precisa saber que deu certo e seguir, não ser parabenizado. Os dois
   tokens já existiam nos dois temas e não eram usados por nada. */
.dnc-aviso--ok {
  background: var(--dnc-ok-fundo);
  color: var(--dnc-ok);
}

/* ---- hambúrguer e gaveta (celular) -------------------------------------- */

/*
 * ⚠️ AQUI O APP DIVERGE DO EDITOR ACADÊMICO, DE PROPÓSITO. Lá o hambúrguer é um
 * botão FLUTUANTE sobre o conteúdo, porque a topbar global foi removida em
 * 2026-06-28 ("layout virou sidebar-only"). Aqui a `.dnc-topo` já existe em toda
 * tela, fixa e com o título da página, então o botão entra DENTRO dela: um
 * elemento a menos por cima do conteúdo, e o título continua onde já estava.
 * Pedido do Wellington em 2026-08-11.
 *
 * Ele só aparece nas telas de topo (as que têm abas no rodapé). Em tela filha,
 * o lugar da esquerda é da seta de voltar, que é a ação certa ali.
 */
.dnc-topo__menu {
  flex: 0 0 auto;
}

.dnc-lateral__fundo {
  position: fixed;
  inset: 0;
  background: rgba(18, 32, 28, 0.45);
  z-index: 30;
}

@media (min-width: 768px) {
  /* No desktop a barra é permanente: hambúrguer e fundo não existem. */
  .dnc-topo__menu,
  .dnc-lateral__fundo {
    display: none !important;
  }
}

@media (max-width: 767px) {
  /* Fixar a barra é conceito de desktop: no celular ela é gaveta, e gaveta
     fixada seria uma gaveta que não fecha. */
  .dnc-lateral__fixar {
    display: none !important;
  }

  /* A gaveta: a MESMA barra do desktop, aberta por cima com fundo escuro. Não é
     um segundo componente, é a mesma marcação com outro enquadramento. */
  .dnc-lateral[data-aberta="true"] {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--dnc-lateral-aberta);
    z-index: 40;
    background: var(--dnc-superficie);
    border-right: 1px solid var(--dnc-borda);
    overflow-y: auto;
    box-shadow: var(--dnc-sombra-2);
  }
}

/* ---- rodapé da barra: suporte e conta ----------------------------------- */

/* `margin-top: auto` cola o bloco embaixo em qualquer altura de tela, sem
   precisar calcular nada. */
.dnc-lateral__rodape {
  margin-top: auto;
  border-top: 1px solid var(--dnc-borda);
  padding: var(--dnc-e-2);
  position: relative;
}

/* Interruptor do modo atendimento. Mesma forma do botão de suporte logo abaixo:
   são vizinhos e fazem parte do mesmo bloco de ferramentas da barra. */
.dnc-lateral__modo {
  display: flex;
  align-items: center;
  gap: var(--dnc-e-3);
  width: 100%;
  margin-bottom: var(--dnc-e-2);
  padding: var(--dnc-e-3);
  border: 1px solid var(--dnc-borda-forte);
  border-radius: var(--dnc-raio-sm);
  background: transparent;
  color: var(--dnc-texto);
  font-family: inherit;
  font-size: var(--dnc-t-sm);
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}

.dnc-lateral__modo:hover {
  background: var(--dnc-superficie-2);
}

/* LIGADO precisa ser inconfundível, inclusive na barra recolhida, onde só o
   ícone aparece. Se ficar sutil, a pessoa não percebe que está ligado, estranha
   a lista vazia e conclui que o aplicativo perdeu as clientes dela. */
.dnc-lateral__modo[aria-pressed="true"] {
  background: var(--dnc-marca-100);
  border-color: var(--dnc-marca-500);
  color: var(--dnc-marca-900);
  font-weight: var(--dnc-peso-medio);
}

.dnc-lateral__suporte {
  display: flex;
  align-items: center;
  gap: var(--dnc-e-3);
  width: 100%;
  padding: var(--dnc-e-3);
  border: 1px solid var(--dnc-borda-forte);
  border-radius: var(--dnc-raio-sm);
  background: transparent;
  color: var(--dnc-texto);
  font-family: inherit;
  font-size: var(--dnc-t-sm);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.dnc-lateral__suporte:hover {
  background: var(--dnc-superficie-2);
}

/* Sem número configurado o botão APARECE e não funciona, em vez de sumir ou de
   virar um `wa.me` sem destino. Link quebrado é pior que botão apagado: quem
   clica conclui que o produto está com defeito. */
.dnc-lateral__suporte[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.dnc-lateral__perfil {
  display: flex;
  align-items: center;
  gap: var(--dnc-e-3);
  width: 100%;
  margin-top: var(--dnc-e-2);
  padding: var(--dnc-e-2);
  border: 0;
  border-radius: var(--dnc-raio-sm);
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.dnc-lateral__perfil:hover {
  background: var(--dnc-superficie-2);
}

/* Avatar com a inicial: o app não tem upload de foto, e não precisa ter. */
.dnc-lateral__avatar {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: var(--dnc-raio-pill);
  background: var(--dnc-marca-500);
  color: var(--dnc-texto-inverso);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--dnc-t-sm);
  font-weight: var(--dnc-peso-forte);
}

/* `min-width: 0` é o que permite o `text-overflow` funcionar dentro do flex:
   sem ele o filho recusa encolher e o e-mail longo estoura a barra. */
.dnc-lateral__quem {
  flex: 1;
  min-width: 0;
}

.dnc-lateral__nome,
.dnc-lateral__email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dnc-lateral__nome {
  font-size: var(--dnc-t-sm);
  font-weight: var(--dnc-peso-medio);
  color: var(--dnc-texto);
}

.dnc-lateral__email {
  font-size: var(--dnc-t-xs);
  color: var(--dnc-texto-3);
}

/* Abre PARA CIMA: o gatilho está colado no rodapé da tela, e um menu para baixo
   sairia da janela. Mesma escolha do Editor Acadêmico. */
.dnc-lateral__menu {
  position: absolute;
  bottom: calc(100% - var(--dnc-e-2));
  left: var(--dnc-e-2);
  right: var(--dnc-e-2);
  z-index: 50;
  background: var(--dnc-superficie);
  border: 1px solid var(--dnc-borda);
  border-radius: var(--dnc-raio);
  box-shadow: var(--dnc-sombra-2);
  padding: var(--dnc-e-1);
  display: flex;
  flex-direction: column;
}

.dnc-lateral__menu a,
.dnc-lateral__menu button {
  display: block;
  width: 100%;
  padding: var(--dnc-e-2) var(--dnc-e-3);
  border: 0;
  border-radius: var(--dnc-raio-sm);
  background: transparent;
  color: var(--dnc-texto);
  font-family: inherit;
  font-size: var(--dnc-t-sm);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.dnc-lateral__menu a:hover,
.dnc-lateral__menu button:hover {
  background: var(--dnc-superficie-2);
}

.dnc-lateral__menu hr {
  border: 0;
  border-top: 1px solid var(--dnc-borda);
  margin: var(--dnc-e-1) 0;
}

/* Sair em vermelho: é a única ação do menu que não se desfaz com um clique, e a
   cor diz isso antes de a pessoa ler.
   ⚠️ O seletor precisa das DUAS classes. `.dnc-lateral__sair` sozinho é (0,1,0)
   e perde para `.dnc-lateral__menu button`, que é (0,1,1) por causa do seletor
   de elemento. O render saiu com o "Sair" preto até isto ser corrigido. */
.dnc-lateral__menu .dnc-lateral__sair {
  color: var(--dnc-erro);
}

/* ==========================================================================
   DESKTOP: barra lateral e ficha em página única (direção C, 2026-08-11)
   ==========================================================================
   Mobile continua sendo o desenho principal, e nada abaixo o altera: TODAS as
   regras desta seção vivem dentro de `@media (min-width: 768px)`. Abaixo disso
   o app é exatamente o que já era, com a navegação de 3 abas no rodapé.

   Por que a lateral abre por HOVER em vez de por clique: sem framework não há
   estado persistido, e um botão de fixar exigiria JavaScript mais
   `localStorage`. Hover mais `:focus-within` resolve em CSS puro e continua
   acessível pelo teclado. Fixar a barra fica como evolução, se incomodar.
   ========================================================================== */

/*
 * ⚠️ O QUE ESTÁ AQUI FORA VALE NAS DUAS FORMAS, e essa separação foi paga com um
 * bug: no primeiro corte, TODO o estilo interno da barra morava dentro do
 * `@media (min-width: 768px)`. No desktop ficava certo, mas a GAVETA do celular
 * (que é a mesma marcação, aberta por cima) saía como lista com marcador e link
 * azul sublinhado, porque nenhuma daquelas regras alcançava o celular.
 *
 * Regra de bolso: APARÊNCIA DO CONTEÚDO fica fora, POSICIONAMENTO DA BARRA fica
 * dentro da media query. Entre as duas formas muda só o enquadramento.
 */
.dnc-lateral {
  /* Escondida por padrão. Volta como coluna fixa no desktop, ou como gaveta no
     celular quando o `data-aberta` entra. */
  display: none;
  flex-direction: column;
  background: var(--dnc-superficie);
  border-right: 1px solid var(--dnc-borda);
  overflow: hidden;
}

/* A marca e o botão de fixar dividem a mesma linha. São irmãos, e não aninhados,
   porque `<button>` dentro de `<a>` é HTML inválido: o navegador reescreve a
   árvore e o clique passa a cair no lugar errado. */
.dnc-lateral__topo {
  display: flex;
  align-items: center;
}

.dnc-lateral__marca {
  display: flex;
  align-items: center;
  gap: var(--dnc-e-3);
  flex: 1;
  min-width: 0;
  min-height: calc(var(--dnc-toque) + var(--dnc-e-3));
  padding: var(--dnc-e-3);
  font-weight: var(--dnc-peso-forte);
  color: var(--dnc-marca-900);
  text-decoration: none;
  white-space: nowrap;
}

/*
 * Botão de fixar a barra.
 *
 * ⚠️ SÓ APARECE COM A BARRA ABERTA (hover, foco ou já fixada). Na barra
 * recolhida há 60px de largura, e eles são do ícone da marca: espremer um
 * segundo alvo ali daria dois botões de 20px grudados, que ninguém acerta.
 * Quem está com a barra recolhida chega nele passando o mouse, que é o mesmo
 * gesto que já usa para ler os rótulos.
 */
.dnc-lateral__fixar {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--dnc-toque);
  height: var(--dnc-toque);
  margin-right: var(--dnc-e-1);
  border: 0;
  border-radius: var(--dnc-raio-sm);
  background: transparent;
  color: var(--dnc-texto-3);
  cursor: pointer;
}

.dnc-lateral__fixar:hover {
  background: var(--dnc-superficie-2);
  color: var(--dnc-texto);
}

/* O símbolo tem largura fixa igual à da barra recolhida, para que o ícone não
   ande para o lado quando ela abre. Sem isso, tudo "pula" no hover. */
.dnc-lateral__simbolo {
  flex: 0 0 auto;
  width: calc(var(--dnc-lateral) - var(--dnc-e-3) * 2);
  display: flex;
  justify-content: center;
}

.dnc-lateral__itens {
  list-style: none;
  margin: 0;
  padding: var(--dnc-e-2) 0;
  display: flex;
  flex-direction: column;
  gap: var(--dnc-e-1);
}

.dnc-lateral__item {
  display: flex;
  align-items: center;
  gap: var(--dnc-e-3);
  padding: var(--dnc-e-3);
  /* Borda sempre presente, transparente quando inativa: se ela só existisse no
     item ativo, o texto deslocaria 3px ao trocar de página. */
  border-left: 3px solid transparent;
  color: var(--dnc-texto-2);
  text-decoration: none;
  white-space: nowrap;
  font-size: var(--dnc-t-sm);
}

.dnc-lateral__item:hover {
  background: var(--dnc-superficie-2);
}

.dnc-lateral__item[aria-current="page"] {
  border-left-color: var(--dnc-marca-500);
  background: var(--dnc-marca-100);
  color: var(--dnc-marca-900);
  font-weight: var(--dnc-peso-medio);
}

.dnc-lateral__icone {
  flex: 0 0 auto;
  width: calc(var(--dnc-lateral) - var(--dnc-e-3) * 2 - 3px);
  display: flex;
  justify-content: center;
}

/*
 * Régua de âncoras da ficha: ESCONDIDA POR PADRÃO, volta só no desktop.
 *
 * ⚠️ ESTA LINHA CONSERTA UM DEFEITO QUE ESTEVE NO AR NO CELULAR. Todo o estilo
 * das âncoras morava dentro do `@media (min-width: 768px)`, e NADA as escondia
 * abaixo disso. Resultado no telefone, que é o aparelho de quem atende no salão:
 * uma lista de 4 links azuis sublinhados, com marcador de bolinha, no meio da
 * ficha, logo acima de "Identificação". Elas não têm função nenhuma ali, porque
 * no celular a ficha é passo a passo e só existe uma seção por vez.
 *
 * É a MESMA armadilha que já tinha mordido a gaveta da barra lateral: quem
 * escreve só a regra do desktop esquece que a marcação existe nas duas formas.
 * Regra de bolso do arquivo: aparência do conteúdo FORA da media query,
 * posicionamento DENTRO. "Existe ou não existe" é aparência, então mora aqui.
 */
.dnc-ancoras {
  display: none;
}

/* Salvar do fim da ficha: só existe no desktop, onde as 4 seções abrem juntas.
   ⚠️ O seletor carrega o PAI (0,2,0) porque o botão também é `.dnc-botao`, que
   declara `display: inline-flex`. Sem o pai seria empate de especificidade, e
   venceria quem viesse por último no arquivo: exatamente a armadilha que deixou
   o Salvar do cabeçalho aparecendo no celular. */
.dnc-ficha .dnc-ficha__salvar-fim {
  display: none;
}

@media (min-width: 768px) {
  /* A barra some no celular e a de abas some no desktop. Nunca as duas. */
  .dnc-nav {
    display: none;
  }

  .dnc-lateral {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    width: var(--dnc-lateral);
    /* Acima do topo grudento (z-index 10), porque ela SOBREPÕE ao abrir. */
    z-index: 20;
    transition: width 200ms ease;
  }

  /* `focus-within` não é zelo: sem ele, quem navega por teclado abre os itens da
     barra sem nunca ver os rótulos. */
  .dnc-lateral:hover,
  .dnc-lateral:focus-within {
    width: var(--dnc-lateral-aberta);
    box-shadow: var(--dnc-sombra-2);
  }

  /* O botão de fixar só existe com a barra aberta. */
  .dnc-lateral:hover .dnc-lateral__fixar,
  .dnc-lateral:focus-within .dnc-lateral__fixar,
  body[data-lateral="fixa"] .dnc-lateral__fixar {
    display: inline-flex;
  }

  /* ---- rodapé da barra RECOLHIDA -----------------------------------------
     ⚠️ CONSERTA UM DEFEITO QUE ESTAVA NO AR. O botão de suporte tem borda e
     `width: 100%`. Num trilho de 60px com `overflow: hidden`, isso desenhava uma
     caixinha de 43px com a palavra "Falar" cortada no meio, saindo "Fala". Os
     itens de navegação não sofriam do mesmo porque não têm borda: o rótulo deles
     também é cortado, só que invisivelmente.

     A correção é esconder o RÓTULO em vez de deixá-lo vazar, e tirar a moldura
     enquanto ela não cabe. Recolhida, o suporte vira ícone centralizado, igual
     aos irmãos de cima; aberta, volta a ser botão com texto. Nada disso vale no
     celular, onde a gaveta já abre com 240px e a moldura cabe inteira. */
  /* ⚠️ TODO SELETOR DESTE BLOCO COMECA EM `.dnc-lateral`, e isso NAO e verbosidade.
     Na primeira escrita eles eram soltos (`.dnc-lateral__quem { display: none }`),
     e a regra vazou: o painel de Ajustes reusou a classe para mostrar quem esta
     logado e apareceu com a bolinha do avatar SOZINHA, sem nome nem e-mail.
     Estas regras descrevem o ESTADO RECOLHIDO DA BARRA, não a aparência da
     classe, e estado de um componente não pode alcançar quem está fora dele.
     Pego no render do mockup em 2026-08-11. */
  .dnc-lateral .dnc-lateral__suporte,
  .dnc-lateral .dnc-lateral__modo,
  .dnc-lateral .dnc-lateral__perfil {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }

  /* A moldura sai enquanto ela não cabe. ⚠️ MENOS a do modo LIGADO: ali a
     moldura é o único sinal de que ele está ativo, e a barra recolhida é
     justamente onde a pessoa vai passar o dia. Sem ela, a lista aparece vazia
     sem nada explicando por quê. */
  .dnc-lateral .dnc-lateral__suporte,
  .dnc-lateral .dnc-lateral__modo[aria-pressed="false"] {
    border-color: transparent;
  }

  /* O rótulo do suporte, o do modo, o nome/e-mail e a seta do menu só existem
     com espaço para eles. `display: none` e não `overflow`: texto cortado no
     meio da palavra é pior que texto ausente. */
  .dnc-lateral .dnc-lateral__suporte > span,
  .dnc-lateral .dnc-lateral__modo > span,
  .dnc-lateral .dnc-lateral__quem,
  .dnc-lateral .dnc-lateral__perfil > svg {
    display: none;
  }

  .dnc-lateral:hover .dnc-lateral__suporte,
  .dnc-lateral:focus-within .dnc-lateral__suporte,
  body[data-lateral="fixa"] .dnc-lateral .dnc-lateral__suporte,
  .dnc-lateral:hover .dnc-lateral__modo,
  .dnc-lateral:focus-within .dnc-lateral__modo,
  body[data-lateral="fixa"] .dnc-lateral .dnc-lateral__modo,
  .dnc-lateral:hover .dnc-lateral__perfil,
  .dnc-lateral:focus-within .dnc-lateral__perfil,
  body[data-lateral="fixa"] .dnc-lateral .dnc-lateral__perfil {
    justify-content: flex-start;
    padding-left: var(--dnc-e-3);
    padding-right: var(--dnc-e-3);
  }

  .dnc-lateral:hover .dnc-lateral__suporte,
  .dnc-lateral:focus-within .dnc-lateral__suporte,
  body[data-lateral="fixa"] .dnc-lateral .dnc-lateral__suporte,
  .dnc-lateral:hover .dnc-lateral__modo,
  .dnc-lateral:focus-within .dnc-lateral__modo,
  body[data-lateral="fixa"] .dnc-lateral .dnc-lateral__modo {
    border-color: var(--dnc-borda-forte);
  }

  /* O ligado volta a ter a cor da marca mesmo com a barra aberta: a regra acima
     é genérica e passaria por cima dele. */
  .dnc-lateral .dnc-lateral__modo[aria-pressed="true"] {
    border-color: var(--dnc-marca-500);
  }

  .dnc-lateral:hover .dnc-lateral__suporte > span,
  .dnc-lateral:focus-within .dnc-lateral__suporte > span,
  body[data-lateral="fixa"] .dnc-lateral .dnc-lateral__suporte > span,
  .dnc-lateral:hover .dnc-lateral__modo > span,
  .dnc-lateral:focus-within .dnc-lateral__modo > span,
  body[data-lateral="fixa"] .dnc-lateral .dnc-lateral__modo > span {
    display: inline;
  }

  /* ⚠️ `block`, e NÃO `flex`. Este elemento não declara `display` nenhum: como
     é filho de um flex container, o navegador o blocifica, e `block` é o valor
     que ele já computava antes desta seção existir. Devolver `flex` colocaria o
     nome e o e-mail LADO A LADO em vez de empilhados. Ao esconder algo por CSS,
     restaurar o valor computado original, não um parecido. */
  .dnc-lateral:hover .dnc-lateral__quem,
  .dnc-lateral:focus-within .dnc-lateral__quem,
  body[data-lateral="fixa"] .dnc-lateral .dnc-lateral__quem {
    display: block;
  }

  .dnc-lateral:hover .dnc-lateral__perfil > svg,
  .dnc-lateral:focus-within .dnc-lateral__perfil > svg,
  body[data-lateral="fixa"] .dnc-lateral .dnc-lateral__perfil > svg {
    display: block;
  }

  /* ---- barra FIXADA ------------------------------------------------------
     O estado mora no `<body>` (`data-lateral="fixa"`), e não na própria barra,
     porque quem precisa reagir é o CONTEÚDO, que é irmão dela: só um ancestral
     comum consegue estilizar os dois. Persiste em `localStorage`.

     Fixada, ela para de sobrepor e passa a EMPURRAR: é essa a diferença que a
     pessoa está pedindo ao fixar. Por isso a sombra sai (ela existia para
     descolar a barra do conteúdo enquanto flutuava por cima). */
  body[data-lateral="fixa"] .dnc-lateral {
    width: var(--dnc-lateral-aberta);
    box-shadow: none;
  }

  /* Ganha largura quem tem o que fazer com ela: lista, página da cliente e a
     ficha (que precisa acomodar a régua de âncoras AO LADO do formulário).
     ⚠️ O que NÃO alarga é a coluna do formulário em si: ela continua em
     `--dnc-largura-max`, porque campo de texto largo é ruim de ler. Alarga o
     contêiner, não o campo. */
  .dnc-tela--larga {
    max-width: var(--dnc-largura-larga);
  }

  /* ---- deslocamento por causa da barra lateral ---------------------------
     ⚠️ A ORDEM DESTES DOIS BLOCOS IMPORTA, e quase me custou o estado fixado.
     `body[data-lateral] .dnc-tela--larga` e `body[data-lateral="fixa"]
     .dnc-tela--larga` têm a MESMA especificidade (0,2,1), então quem vence é o
     que aparece por último. Com o genérico embaixo, fixar a barra passava a
     deslocar 60px em vez de 240px, e o conteúdo entrava por baixo dela. O
     genérico vem primeiro; o "fixa" é a exceção e fica depois.

     ⚠️ `padding-left`, e NÃO `margin-left`. Com margin-left explícito o
     `margin: 0 auto` do seletor base deixa de centralizar (a margem esquerda
     deixa de ser `auto`), e a tela inteira gruda à esquerda com um vazio enorme
     à direita em monitor largo. Foi o primeiro defeito que o render mostrou.

     ⚠️ Condicionado a `body[data-lateral]`, que o `nav.js` escreve ao montar a
     barra. Só 5 das 11 telas montam navegação: Entrar, Ativar, Sem acesso e os
     3 documentos legais não têm barra nenhuma. Sem a condição, essas 6 abriam
     com 60px de vão vazio à esquerda, desalinhando o centro da página em 30px
     sem nada ali para justificar.

     O conteúdo desloca pela largura RECOLHIDA e nunca mais se mexe: a barra
     aberta passa por cima. Empurrar o conteúdo no hover faria a tela inteira
     dançar cada vez que o mouse cruzasse a lateral. */
  body[data-lateral] .dnc-tela {
    padding-left: var(--dnc-lateral);
    max-width: calc(var(--dnc-largura-max) + var(--dnc-lateral));
  }

  body[data-lateral] .dnc-tela--larga {
    max-width: calc(var(--dnc-largura-larga) + var(--dnc-lateral));
  }

  body[data-lateral="fixa"] .dnc-tela {
    padding-left: var(--dnc-lateral-aberta);
    max-width: calc(var(--dnc-largura-max) + var(--dnc-lateral-aberta));
  }

  body[data-lateral="fixa"] .dnc-tela--larga {
    max-width: calc(var(--dnc-largura-larga) + var(--dnc-lateral-aberta));
  }

  /* ---- a barra de topo deixa de SER barra --------------------------------
     Decidido em 2026-08-11 pelo conselho (opção "a"), depois de renderizar.

     O QUE ELA ERA: um retângulo branco solto, com fundo e borda, que começava
     depois da lateral e parava no meio da tela. Não encostava em nada, e mudava
     de largura conforme a tela (900px em Clientes, 640px em Ajustes), então
     saltava de tamanho ao navegar. Conteúdo pode variar de largura; moldura,
     não. O título dela tinha 16px enquanto as seções logo abaixo têm 22px: o
     nome da página era o MENOR texto de destaque da tela.

     POR QUE SOME EM VEZ DE SER CONSERTADA: no desktop ela não carrega nada que a
     barra lateral já não carregue, fora a ação principal. "Onde estou" já está
     no item aceso da lateral. Uma moldura que não informa é moldura a menos.

     NÃO É UM COMPONENTE NOVO. É o MESMO `<header>` das 9 telas, reestilizado
     para virar o cabeçalho do conteúdo. Isso preserva os `id` e os handlers de
     cada tela (`#nova`, `#salvar-topo`, `#excluir`), mantém o celular intocado
     por construção, e não deixa espaço para as 9 telas divergirem: existe uma
     classe só, `.dnc-topo__titulo`, e exatamente um `<h1>` por tela (conferido).
     A entropia do app irmão (título de 18,4 a 30,4px em duas famílias, por cada
     rota reescrever o seu) não tem por onde entrar aqui. */
  .dnc-topo {
    position: static;
    background: transparent;
    border-bottom: 0;
    padding: var(--dnc-e-6) var(--dnc-e-4) var(--dnc-e-4);
    gap: var(--dnc-e-3);
    /* Ação COLADA no título, não empurrada para a borda. Um botão sozinho a um
       palmo do título parece órfão; ao lado dele, lê-se como o verbo do
       substantivo. */
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  /* 28px: precisa vencer os 22px dos títulos de seção da ficha, senão a
     hierarquia fica EMPATADA, que é tão errado quanto invertida. Medido, não
     escolhido no olho. */
  .dnc-topo__titulo {
    font-size: var(--dnc-t-2xl);
    font-weight: var(--dnc-peso-forte);
    line-height: 1.2;
  }

  /* O "Voltar" sobe para uma linha só dele, ACIMA do título. No celular ele
     divide a linha porque lá o espaço é caro; aqui não é, e voltar é navegação,
     não ação da página. `flex-basis: 100%` com `flex-wrap` é o que força a
     quebra sem precisar de outro elemento no HTML. */
  .dnc-topo > .dnc-botao--texto {
    order: -1;
    flex-basis: 100%;
    justify-content: flex-start;
    padding-left: 0;
  }

  /* Espaçador que centraliza o título entre a seta e a borda. É truque de
     celular: no desktop o título é alinhado à esquerda e ele só abre um buraco. */
  .dnc-topo__espaco {
    display: none;
  }

  /* ---- as faixas grudentas de celular saem do desktop ---------------------
     Duas sobraram da forma de telefone e ficaram enormes no monitor.

     1) O rodapé fixo da página da cliente virava uma faixa VERDE de ponta a
        ponta na base da janela, com um "Novo atendimento" gigante dentro. No
        celular ela existe porque é onde o polegar alcança; no desktop o polegar
        não existe, e o que sobra é peso visual sem função. Vira o último bloco
        do conteúdo, com o botão do tamanho do texto.
        (Na ficha ele já era escondido: o passo a passo não existe aqui.)

     2) O botão de EXCLUIR a cliente e todo o histórico ocupava a linha inteira
        em vermelho. Largura inteira e cor de alerta é vocabulário de ação
        principal, e esta é uma ação de exceção, irreversível. O fluxo de
        confirmação em si (confirmar, depois digitar o nome da cliente) já é
        forte e não muda: o que muda é só o quanto ele grita na tela. */
  .dnc-rodape-fixo {
    position: static;
    background: transparent;
    border-top: 0;
    padding: 0 var(--dnc-e-4) var(--dnc-e-5);
    /* ⚠️ SOBE PARA LOGO DEPOIS DO TÍTULO. Sem isto ele fica no fim do documento,
       que no celular não importa (a barra é grudenta e está sempre à vista) mas
       no desktop deixa "Novo atendimento", a ação PRINCIPAL da tela, embaixo de
       "Excluir esta cliente e todo o histórico", que é a de exceção. `order`
       funciona porque `.dnc-tela` já é um flex em coluna: header, main e footer
       são irmãos diretos. Reordenar por CSS, e não mexer no HTML, mantém o
       rodapé onde o polegar espera no celular. */
    order: 1;
  }

  .dnc-corpo {
    order: 2;
  }

  .dnc-rodape-fixo > .dnc-botao {
    flex: 0 0 auto;
  }

  .dnc-botao--bloco {
    width: auto;
  }

  /* ---- a ficha vira página única ---------------------------------------- */

  /* A barra de progresso e os botões Voltar/Próximo são do passo a passo, que
     só existe no celular. */
  .dnc-ficha .dnc-passos,
  .dnc-ficha .dnc-rodape-fixo {
    display: none;
  }

  /* ⚠️ ISTO É O CORAÇÃO DA DIREÇÃO C. O JavaScript do passo a passo esconde as
     seções com o atributo `hidden`, e aqui elas voltam TODAS. Assim o mesmo
     HTML e o mesmo script servem às duas formas, sem duplicar a tela nem
     ramificar o código por tamanho de tela. */
  /* ⚠️ O `!important` aqui É OBRIGATÓRIO e não é gambiarra: ele responde ao
     `[hidden] { display: none !important }` do topo do arquivo. Entre duas
     declarações `!important` vence a mais específica, e esta (0,3,0) vence
     aquela (0,1,0). Sem o `!important`, a regra do topo ganharia e as 4 seções
     ficariam escondidas no desktop, ou seja, a ficha inteira sumiria. */
  .dnc-ficha [data-passo][hidden] {
    display: block !important;
  }

  .dnc-ficha__corpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--dnc-largura-max);
    gap: var(--dnc-e-6);
    align-items: start;
    padding: var(--dnc-e-5) var(--dnc-e-4);
  }

  /* O aviso de erro atravessa as duas colunas. Sem isto ele cairia na coluna
     das âncoras, espremido em 11rem, que é onde ninguém procura por um erro. */
  .dnc-ficha__corpo > [data-avisos] {
    grid-column: 1 / -1;
  }

  /* As âncoras acompanham a rolagem: com as 4 seções abertas a página fica
     longa, e sem isto a pessoa perde a referência de onde está. */
  .dnc-ancoras {
    position: sticky;
    top: var(--dnc-e-5);
    justify-self: end;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--dnc-e-1);
    min-width: 11rem;
  }

  .dnc-ancoras a {
    display: flex;
    align-items: center;
    gap: var(--dnc-e-2);
    padding: var(--dnc-e-2) var(--dnc-e-3);
    border-radius: var(--dnc-raio-sm);
    color: var(--dnc-texto-2);
    text-decoration: none;
    font-size: var(--dnc-t-sm);
  }

  .dnc-ancoras a:hover {
    background: var(--dnc-superficie-2);
  }

  .dnc-ancoras a[aria-current="true"] {
    color: var(--dnc-marca-900);
    font-weight: var(--dnc-peso-medio);
  }

  .dnc-ancoras__ponto {
    width: var(--dnc-e-2);
    height: var(--dnc-e-2);
    border-radius: var(--dnc-raio-pill);
    background: var(--dnc-borda-forte);
    flex: 0 0 auto;
  }

  .dnc-ancoras a[aria-current="true"] .dnc-ancoras__ponto {
    background: var(--dnc-marca-500);
  }

  /* Separador entre as seções, que no celular era a própria troca de tela. */
  .dnc-ficha__secoes > [data-passo] + [data-passo] {
    margin-top: var(--dnc-e-6);
    padding-top: var(--dnc-e-6);
    border-top: 1px solid var(--dnc-borda);
  }

  /* Salvar sobe para o topo, já que o rodapé do passo a passo sumiu.
     Espelha a especificidade (0,2,0) de quem esconde, lá em cima. */
  .dnc-topo .dnc-topo__acao {
    display: inline-flex;
    flex: 0 0 auto;
  }

  /* A âncora leva a uma seção que fica embaixo do topo grudento. Sem isto, o
     título da seção some atrás dele a cada clique. */
  .dnc-ficha__secoes > [data-passo] {
    scroll-margin-top: var(--dnc-e-7);
  }

  /* Salvar do fim: na coluna do FORMULÁRIO (a 2ª), não na das âncoras. Sem o
     `grid-column` ele cairia na linha de baixo, na coluna 1, ou seja, embaixo da
     régua de âncoras e longe do último campo que a pessoa acabou de preencher. */
  .dnc-ficha .dnc-ficha__salvar-fim {
    display: inline-flex;
    grid-column: 2;
    justify-self: start;
    margin-top: var(--dnc-e-6);
  }
}

/* ==========================================================================
   PAINEL DE AJUSTES (direção A, escolhida em 2026-08-11)
   ==========================================================================
   Mockup, wireframes e o porquê em `_docs/design/ajustes-painel/decisao.md`.

   Ajustes deixou de ser página de cartões empilhados e virou painel sobreposto:
   fundo escuro na tela inteira, régua de seções à esquerda, conteúdo à direita.
   A URL `/ajustes.html` CONTINUA, porque três lugares apontam para ela (o item
   da barra, "Minha conta" e "Meus dados" no menu do usuário).

   ⚠️ As classes são PRÓPRIAS (`.dnc-painel__nome`, `__email`), e não as
   `.dnc-lateral__*`, mesmo desenhando a mesma coisa. Reusar aquelas parecia
   econômico: o mockup saiu com a bolinha do avatar sozinha, porque as regras do
   estado RECOLHIDO da barra escondiam o nome e o e-mail e não tinham escopo.
   Aquelas regras ganharam `.dnc-lateral` na frente; estas nasceram separadas.
   ========================================================================== */

.dnc-painel__fundo {
  position: fixed;
  inset: 0;
  background: rgba(18, 32, 28, 0.45);
  z-index: 50;
  display: grid;
  place-items: center;
  padding: var(--dnc-e-4);
}

.dnc-painel {
  width: 100%;
  max-width: var(--dnc-largura-larga);
  max-height: calc(100dvh - var(--dnc-e-6));
  background: var(--dnc-superficie);
  border-radius: var(--dnc-raio-lg);
  box-shadow: var(--dnc-sombra-2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dnc-painel__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dnc-e-3);
  padding: var(--dnc-e-4);
  border-bottom: 1px solid var(--dnc-borda);
}

.dnc-painel__titulo {
  margin: 0;
  font-size: var(--dnc-t-xl);
  font-weight: var(--dnc-peso-forte);
}

.dnc-painel__fechar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--dnc-toque);
  height: var(--dnc-toque);
  border: 0;
  border-radius: var(--dnc-raio-sm);
  background: transparent;
  color: var(--dnc-texto-3);
  cursor: pointer;
}

.dnc-painel__fechar:hover {
  background: var(--dnc-superficie-2);
  color: var(--dnc-texto);
}

.dnc-painel__corpo {
  display: grid;
  min-height: 0;
}

.dnc-painel__secoes {
  border-right: 1px solid var(--dnc-borda);
  padding: var(--dnc-e-3);
  display: flex;
  flex-direction: column;
  gap: var(--dnc-e-1);
  overflow-y: auto;
}

.dnc-painel__quem {
  display: flex;
  align-items: center;
  gap: var(--dnc-e-3);
  padding: var(--dnc-e-2) var(--dnc-e-3) var(--dnc-e-4);
  min-width: 0;
}

.dnc-painel__identidade {
  display: block;
  min-width: 0;
}

.dnc-painel__nome,
.dnc-painel__email {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dnc-painel__nome {
  font-size: var(--dnc-t-sm);
  font-weight: var(--dnc-peso-medio);
  color: var(--dnc-texto);
}

.dnc-painel__email {
  font-size: var(--dnc-t-xs);
  color: var(--dnc-texto-3);
}

.dnc-painel__item {
  display: flex;
  align-items: center;
  gap: var(--dnc-e-3);
  padding: var(--dnc-e-3);
  border: 0;
  border-radius: var(--dnc-raio-sm);
  background: transparent;
  font-family: inherit;
  font-size: var(--dnc-t-sm);
  color: var(--dnc-texto-2);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
}

.dnc-painel__item:hover {
  background: var(--dnc-superficie-2);
}

.dnc-painel__item[aria-current="true"] {
  background: var(--dnc-marca-100);
  color: var(--dnc-marca-900);
  font-weight: var(--dnc-peso-medio);
}

.dnc-painel__item svg {
  flex: 0 0 auto;
}

/* Encerrar a conta é o item de exceção: separado por uma linha e empurrado para
   o fim. Vizinhança sugere semelhança, e ele não se parece com os outros três. */
.dnc-painel__item--perigo {
  color: var(--dnc-erro);
  margin-top: auto;
  border-top: 1px solid var(--dnc-borda);
  border-radius: 0;
}

.dnc-painel__conteudo {
  padding: var(--dnc-e-5);
  overflow-y: auto;
  min-height: 0;
}

.dnc-painel__secao-titulo {
  margin: 0 0 var(--dnc-e-1);
  font-size: var(--dnc-t-lg);
  font-weight: var(--dnc-peso-forte);
}

.dnc-painel__secao-apoio {
  margin: 0 0 var(--dnc-e-4);
  color: var(--dnc-texto-3);
  font-size: var(--dnc-t-sm);
}

@media (min-width: 768px) {
  .dnc-painel__corpo {
    grid-template-columns: 15rem minmax(0, 1fr);
  }

  /* No desktop as duas colunas estão visíveis ao mesmo tempo: não há para onde
     voltar. */
  .dnc-painel .dnc-painel__voltar {
    display: none;
  }
}

@media (max-width: 767px) {
  /* Em 390px duas colunas não cabem. Quem está escolhendo vê a LISTA; quem
     escolheu vê a SEÇÃO. O estado mora no `<body>`, mesmo padrão do
     `data-lateral` da barra. */
  .dnc-painel__fundo {
    padding: 0;
  }

  .dnc-painel {
    max-width: none;
    max-height: none;
    height: 100dvh;
    border-radius: 0;
  }

  .dnc-painel__secoes {
    border-right: 0;
  }

  body[data-painel="lista"] .dnc-painel__conteudo,
  body[data-painel="secao"] .dnc-painel__secoes {
    display: none;
  }

  .dnc-painel .dnc-painel__voltar {
    display: inline-flex;
    align-items: center;
    gap: var(--dnc-e-2);
    margin-bottom: var(--dnc-e-4);
    padding: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: var(--dnc-t-sm);
    color: var(--dnc-texto-2);
    cursor: pointer;
  }
}

/* ---- so para leitor de tela --------------------------------------------- */

.dnc-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- impressao ---------------------------------------------------------- */
/* A ficha impressa e' um dos order bumps propostos. Sem isto, imprimir sai com
   topo grudento, botoes e barra de progresso no papel. */
@media print {
  .dnc-topo,
  .dnc-rodape-fixo,
  .dnc-passos,
  .dnc-botao {
    display: none !important;
  }
  body {
    background: var(--dnc-print-fundo);
  }
  .dnc-cartao {
    box-shadow: none;
    border-color: var(--dnc-print-borda);
  }
}