/*
 * dc.css -- a pele calibrada da trilha viva. Base em T3 (spec
 * daumcheck-ui-reskin); o eixo neo-brutalista (N1-N5: borda, sombra,
 * canto, peso/tipografia, Verde Tech cercado) é T6, sob o Contrato C8
 * (design.md §2, emenda de 07/09) -- R26 a R38. Consome SÓ `var(--dc-...)`
 * de `/estatico/tema.css` (R17/C3) -- nenhum hexadecimal, `rgb(`, cor
 * nomeada ou fonte crua aqui, exceção única o bloco `@font-face` logo
 * abaixo (D2 do design.md).
 *
 * Progresso de T6 nesta árvore (ver RELATORIO-T6.md pra lista fechada de
 * commits): N1/N2/N3 (borda/sombra/canto -- R28/R29/R30) já estão na
 * pele inteira. N4 (peso/tipografia -- R31/R36), N5 (Verde Tech cercado
 * -- R32/R34) e os elementos específicos de R33/R35/R37 ainda não --
 * `--accent`/`--green-tech`/`--ring-accent` continuam fora daqui até R32
 * entrar (`TestSemVerdeTech`, abaixo, prova a ausência a cada commit).
 *
 * Os SEIS estados exigidos (W8) têm marcador de comentário explícito
 * imediatamente acima da regra que os implementa -- é o que
 * `web/tests/test_ui_reskin_telas.py` confere por leitura de arquivo:
 *   estado:repouso / estado:foco / estado:hover / estado:carregando /
 *   estado:erro / estado:vazio
 *
 * Convenção de hover: em vez de um token por combinação, todo hover desta
 * pele escurece a superfície de repouso com `color-mix(in srgb, var(--dc-cor-texto)
 * var(--dc-wash-estado), <base>)` -- chumbo a 12% (o mesmo `--dc-wash-estado`
 * que os blocos de estado usam para o wash; aqui o "estado" é só "passou o
 * mouse"). Onde `color-mix` não existe, o `@supports` perto do fim cai para
 * os tokens de hover já prontos (`--dc-cor-acento-hover`,
 * `--dc-cor-superficie-alta`) -- nunca um buraco.
 */

/* =============================================================== fonte
   Exo é a tipografia oficial da Expertise, servida por este mesmo servidor
   (W9 proíbe rede para fora). O arquivo é VARIÁVEL -- pesos 100 a 900 num
   TTF só --, por isso um único @font-face cobre a família inteira e
   `font-weight: 100 900` é a FAIXA que ele atende, não um peso. Caminho
   ABSOLUTO (`/estatico/fonts/...`) porque `dc.css` mora um nível abaixo de
   `web/static/` (D2). Fallback Verdana (R18) via `--dc-fonte`, que já
   inclui "Verdana Brand", Verdana no fim da cadeia. */
@font-face {
  font-family: "Exo";
  src: url("/estatico/fonts/Exo-VariableFont_wght.ttf") format("truetype-variations"),
       url("/estatico/fonts/Exo-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* =============================================================== reset */

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

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

/* estado:repouso -- aparência padrão da página inteira: fundo off-white
   (eixo 1), texto chumbo, Exo com fallback Verdana (R18/R19). */
body {
  background: var(--dc-cor-fundo);
  color: var(--dc-cor-texto);
  font-family: var(--dc-fonte);
  font-size: var(--dc-fs-body);
  line-height: var(--dc-lh-corpo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, li, form, fieldset, pre {
  margin: 0;
  padding: 0;
}

ul { list-style: none; }
fieldset { border: 0; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
img { max-width: 100%; display: block; }
a { color: var(--dc-cor-acento); }

/* [hidden] -- o dc.js alterna visibilidade só por este atributo (D3/D5). */
[hidden] { display: none !important; }

/* =============================================================== layout */

/* Cabeçalho (R33): 64px, papel, fixo no topo -- marca (símbolo + word-
   mark "Daum[check]") à esquerda, ações à direita. `.dc-cabecalho__logo`/
   `__produto` saíram inteiros -- a marca agora é o `<h1 class="dc-marca">`
   único descrito logo abaixo, no lugar dos dois elementos antigos (R19/
   R24 de 02/09 ficaram para trás; P4 = A supera com o mockup). SEM faixa
   nem painel colorido (eixo 2: verde escuro só na ação). */
.dc-cabecalho {
  display: flex;
  align-items: center;
  gap: var(--dc-espaco-3);
  height: var(--dc-espaco-7);
  padding: 0 var(--dc-espaco-5);
  background: var(--dc-cor-superficie);
  border-bottom: var(--dc-borda-cartao);
  position: sticky;
  top: 0;
  z-index: 20;
}

/* R33 -- marca = símbolo + wordmark, um único <h1> (aria-label carrega o
   nome inteiro pra leitor de tela; o texto visual "Daum" + "check" seria
   lido em dois pedaços sem ele). Nenhum `gap` no container: o espaço
   entre símbolo e "Daum" (--dc-espaco-2) e entre "Daum" e o selo (--dc-
   espaco-1, "colado") são DIFERENTES -- um `gap` do flex aplicaria o
   mesmo valor nos dois pares, então cada distância vem de margin no
   próprio filho seguinte (mais literal ao requisito que compensar um
   `gap` uniforme com margin negativa). */
.dc-marca {
  display: flex;
  align-items: center;
  margin: 0;
}

.dc-marca__simbolo {
  width: 1.75rem;
  height: 1.75rem;
  margin-right: var(--dc-espaco-2);
}

.dc-marca__nome {
  font-weight: var(--dc-peso-extrabold);
  font-size: var(--dc-fs-h3);
  letter-spacing: var(--dc-espacamento-marca);
  line-height: 1;
  color: var(--dc-cor-texto);
}

/* selo "check" -- Verde Tech (R32(e), um dos cinco lugares permitidos)
   cercado por --dc-borda-controle; sombra dura pequena (C8) e leve giro
   de -1.5deg (mesmo idioma do "selo" do desenho, sem imagem). */
.dc-marca__selo {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-espaco-1);
  margin-left: var(--dc-espaco-1);
  padding: 0 var(--dc-espaco-2) var(--dc-espaco-1) var(--dc-espaco-1);
  font-weight: var(--dc-peso-extrabold);
  font-size: var(--dc-fs-h3);
  letter-spacing: var(--dc-espacamento-marca);
  line-height: 1;
  color: var(--dc-cor-texto);
  background: var(--dc-cor-destaque);
  border: var(--dc-borda-controle);
  box-shadow: var(--dc-sombra-selo);
  transform: rotate(-1.5deg);
}

.dc-marca__selo svg {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  stroke-width: 3.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
  fill: none;
}

.dc-cabecalho__acoes {
  display: flex;
  align-items: center;
  gap: var(--dc-espaco-3);
  margin-left: auto;
}

/* Página: largura de leitura + grade de 12 colunas em telas largas
   (design.md §3: "estudos = 4 col, detalhe = 12"). Abaixo de 48rem a
   grade vira 1 coluna (média responsiva, perto do fim do arquivo). */
.dc-pagina {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--dc-espaco-4);
  display: flex;
  flex-direction: column;
  gap: var(--dc-espaco-4);
}

@media (min-width: 64rem) {
  .dc-pagina {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: start;
  }
  #secao-estudos.dc-secao { grid-column: span 4; }
  #secao-estudo.dc-secao { grid-column: span 12; }
}

/* ================================================================ seções
   `#secao-estudos`, `#secao-estudo`, `#secao-upload`, `#secao-preview`,
   `#secao-rodada`, `#secao-historico` (R22): painel de cartão -- N1/N2/N3
   (R28/R29/R30): borda 1px `--dc-borda-cartao` (a seção é "painel", nunca
   "controle"), canto 0, SEM sombra (`--dc-sombra-repouso`/`-elevada`
   ficam só em `tema.css`, pra trilha velha -- R29: "nenhum outro elemento
   de dc/ tem sombra"). */
.dc-secao {
  background: var(--dc-cor-superficie);
  border: var(--dc-borda-cartao);
  border-radius: var(--dc-raio-cartao);
  padding: var(--dc-espaco-4);
  display: flex;
  flex-direction: column;
  gap: var(--dc-espaco-3);
}

/* R31 (N4): título de seção -- peso/espaçamento/altura de linha. TU4/R18
   (09/09) subiu as quatro seções da conferência de `h3` para `h2` (um só
   h1 por tela); tamanho continua --dc-fs-h2 (26px) -- troca é só de nível
   semântico, não de desenho. O título do login ("Entrar no Daumcheck")
   usa o mesmo --dc-fs-h2 por classe própria, ainda não criada nesta árvore
   (R37, commit 7 de T6). */
.dc-secao__titulo {
  font-weight: var(--dc-peso-bold);
  letter-spacing: var(--dc-espacamento-titulo);
  line-height: var(--dc-lh-apertado);
  color: var(--dc-cor-texto);
}
h2.dc-secao__titulo { font-size: var(--dc-fs-h2); }

/* R31 (N4): eyebrow -- rótulo plano, caixa-alta, SEM caixa/chip (o chip
   inline de T3 saiu -- nada de `--dc-cor-superficie-alta` aqui). Só as
   três seções numeradas da conferência ganham
   `<p class="dc-secao__passo">` (app.html) -- "Rodadas anteriores" fica
   de fora, letra de R31 ("acima de cada h3 de seção; 'Rodadas
   anteriores' não tem passo"). R36: 4px (`--dc-espaco-1`) de respiro até
   o título -- o desenho não dá o número exato deste par; fica o menor
   degrau da escala. */
.dc-secao__passo {
  display: block;
  font-size: var(--dc-fs-caption);
  font-weight: var(--dc-peso-semibold);
  text-transform: uppercase;
  letter-spacing: var(--dc-espacamento-rotulo);
  color: var(--dc-cor-texto-fraco);
  margin-bottom: var(--dc-espaco-1);
}

/* Texto de apoio dentro de uma seção (parágrafos comuns, sem classe
   própria) -- corpo em chumbo, herdado do body; só a cor "fraca" muda
   quando o próprio elemento pede (ver `.dc-aviso` abaixo). */
.dc-secao p { color: var(--dc-cor-texto); }

/* Listas simples (reconhecidos/ignorados/insumos não lidos/recusas): sem
   classe própria em cada `<ul>` -- estas quatro nascem de `dc.js` sem
   marcação nova, então a regra as alcança por contexto (descendente de
   `.dc-secao`/`.dc-bloco-estado`), nunca por um seletor que dc.js não
   escreve. */
.dc-secao ul:not(.dc-grade-slides):not(.dc-lista-estudos):not(.dc-historico),
.dc-bloco-estado ul {
  list-style: disc;
  padding-left: var(--dc-espaco-4);
  margin: var(--dc-espaco-2) 0;
  display: flex;
  flex-direction: column;
  gap: var(--dc-espaco-1);
  font: var(--dc-texto-pequeno);
  color: var(--dc-cor-texto);
}

/* R11 (spec UI 09/09) -- botão "Ver slide N →" dentro de cada `<li>` de
   `#lista-recusas`: link inline (sem borda/fundo, mesma ausência de
   moldura de `.dc-botao--link`), mas fora da família `.dc-botao` -- vive
   dentro do texto da recusa, não como ação isolada com altura fixa. */
.dc-link {
  background: transparent;
  border: 0;
  padding: 0;
  margin-left: 0.5rem; /* integração 09/09: ar entre o texto da recusa e "Ver slide N →" */
  color: var(--dc-cor-acento);
  font: inherit;
  font-weight: var(--dc-peso-semibold);
  text-decoration: underline;
  cursor: pointer;
}
.dc-link:hover {
  color: var(--dc-cor-acento-hover);
}

.dc-secao h4 {
  font: var(--dc-texto-subtitulo);
  color: var(--dc-cor-texto);
}

/* ======================================================== lista de estudos
   `#lista-estudos` (dc-lista-estudos): dc.js cria `<li><button>...` sem
   classe própria em cada item -- os seletores descendentes abaixo
   alcançam esses nós sem depender de nenhuma classe que dc.js não
   escreve (Território de T3 não inclui dc.js). */
.dc-lista-estudos {
  display: flex;
  flex-direction: column;
  gap: var(--dc-espaco-2);
  margin: var(--dc-espaco-2) 0;
}

/* estado:repouso -- linha clicável da lista de estudos, aparência padrão */
.dc-lista-estudos > li > button {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--dc-cor-superficie);
  border: var(--dc-borda-cartao);
  border-radius: var(--dc-raio-cartao);
  padding: var(--dc-espaco-2) var(--dc-espaco-3);
  font: var(--dc-texto-corpo);
  color: var(--dc-cor-texto);
  cursor: pointer;
  transition: background var(--dc-transicao-rapida);
}

/* estado:hover -- item da lista de estudos, fundo off-white (design.md §3) */
.dc-lista-estudos > li > button:hover {
  background: var(--dc-cor-fundo);
}

/* ============================================================ histórico */

.dc-historico {
  display: flex;
  flex-direction: column;
  margin: var(--dc-espaco-2) 0;
}

.dc-historico > li {
  padding: var(--dc-espaco-2) 0;
  border-bottom: var(--dc-borda-cartao);
  font: var(--dc-texto-pequeno);
  color: var(--dc-cor-texto-fraco);
}

.dc-historico > li:last-child { border-bottom: none; }

.dc-historico a {
  margin-left: var(--dc-espaco-2);
  color: var(--dc-cor-acento);
}

/* ================================================================ forms */

.dc-formulario {
  display: flex;
  flex-direction: column;
  gap: var(--dc-espaco-3);
  max-width: 32rem;
}

/* `<label>` que envolve o texto do rótulo e o campo juntos (marcação atual
   de `app.html`/`login.html`) -- o texto do rótulo é o nó de texto direto
   do próprio `<label>`, então esta classe carrega a tipografia de rótulo
   (Medium, `--dc-fs-body-sm`) e o campo aninhado (`.dc-campo-texto`)
   reafirma a sua própria tipografia por cima. */
.dc-campo {
  display: flex;
  flex-direction: column;
  gap: var(--dc-espaco-2);
  font: var(--dc-peso-medio) var(--dc-fs-body-sm) / var(--dc-lh-corpo) var(--dc-fonte);
  color: var(--dc-cor-texto-fraco);
}

/* Mesma tipografia de `.dc-campo`, disponível como classe própria para
   quando o rótulo tiver elemento separado (design.md §3 nomeia as duas). */
.dc-rotulo {
  font: var(--dc-peso-medio) var(--dc-fs-body-sm) / var(--dc-lh-corpo) var(--dc-fonte);
  color: var(--dc-cor-texto-fraco);
}

/* estado:repouso -- aparência padrão de campo de texto/select/arquivo --
   N1 (R28): controle, 2px chumbo (`--dc-borda-controle`). */
.dc-campo-texto {
  background: var(--dc-cor-superficie);
  color: var(--dc-cor-texto);
  border: var(--dc-borda-controle);
  border-radius: var(--dc-raio-controle);
  padding: var(--dc-espaco-2) var(--dc-espaco-3);
  font: var(--dc-texto-corpo);
  width: 100%;
  transition: border-color var(--dc-transicao-rapida), box-shadow var(--dc-transicao-rapida);
}

/* `select.dc-campo-texto`: sem seta nativa do SO -- seta em SVG inline
   "chumbo" via `currentColor` (o SVG não fixa cor nenhuma; herda
   `color`, que já é `--dc-cor-texto`/chumbo). Nenhum hexadecimal cru: a
   cor vive só no `color` do elemento, nunca na string do SVG. */
select.dc-campo-texto {
  appearance: none;
  -webkit-appearance: none;
  color: var(--dc-cor-texto);
  padding-right: var(--dc-espaco-6);
  background-repeat: no-repeat;
  background-position: right var(--dc-espaco-3) center;
  background-size: 0.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}

/* `input[type=file]` (`#input-pasta`): o botão nativo "Escolher arquivos"
   é pseudo-elemento (`::file-selector-button`), a única parte que aceita
   estilo do autor -- a caixa em volta segue a mesma linguagem dos outros
   campos. */
/* zona de arquivo (`#input-pasta`) -- N1 (R28): tracejada 2px chumbo,
   nunca a borda fina genérica. */
.dc-campo-arquivo {
  display: block;
  width: 100%;
  background: var(--dc-cor-superficie);
  color: var(--dc-cor-texto);
  border: var(--dc-borda-controle-tracejada);
  border-radius: var(--dc-raio-controle);
  padding: var(--dc-espaco-2) var(--dc-espaco-3);
  font: var(--dc-texto-corpo);
}

/* T8/R41 -- `display: block` acima tem a mesma especificidade do `[hidden]`
   do navegador e venceria por ordem de cascata; `#input-pasta` (C1) segue
   existindo e funcional (a zona de soltar aciona `.click()` nele), só some
   da tela porque o desenho não mostra o campo de arquivo cru. */
.dc-campo-arquivo[hidden] {
  display: none;
}

.dc-campo-arquivo::file-selector-button {
  margin-right: var(--dc-espaco-3);
  border: none;
  border-radius: var(--dc-raio-controle);
  padding: var(--dc-espaco-1) var(--dc-espaco-3);
  background: var(--dc-cor-acento);
  color: var(--dc-cor-texto-em-acento);
  font: var(--dc-texto-pequeno);
  cursor: pointer;
  transition: background var(--dc-transicao-rapida);
}

.dc-campo-arquivo::file-selector-button:hover {
  background: color-mix(in srgb, var(--dc-cor-texto) var(--dc-wash-estado), var(--dc-cor-acento));
}

/* estado:foco -- contorno visível em todo controle interativo, nunca
   suprimido sem substituto (R21: anel verde escuro, nunca Verde Tech). */
*:focus-visible {
  outline: none;
  box-shadow: var(--dc-sombra-foco);
}

/* =============================================================== botões
   primário (Verde Tech cercado de chumbo -- R32, T6 commit 4),
   secundário (superfície, borda chumbo, texto chumbo), fantasma (sem
   fundo, borda 1px --dc-cor-borda-forte -- R28, a única exceção) -- R19/
   R22/R28/R29. Cada variante declara a própria borda (larguras diferem:
   2px controle nos dois primeiros, 1px cartão no fantasma), por isso a
   base não fixa nenhuma. */
.dc-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dc-espaco-2);
  height: 2.5rem;
  padding: 0 var(--dc-espaco-4);
  border-radius: var(--dc-raio-controle);
  font: var(--dc-texto-subtitulo);
  font-weight: var(--dc-peso-semibold);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dc-transicao-rapida), box-shadow var(--dc-transicao-rapida),
    transform var(--dc-transicao-rapida);
}

/* N2 (R29) + N5 (R32, "P1 = A", `[aprovado 07/09 06:03]`): o primário é o
   ÚNICO botão com sombra -- dura, deslocada, chumbo; desloca no hover,
   "afunda" (sombra zero) no active. Fundo Verde Tech (R32(a), um dos
   cinco lugares permitidos) cercado por --dc-borda-controle (2px
   chumbo) -- nunca preenchimento sem essa borda (1,08:1 sozinho). */
.dc-botao--primario {
  background: var(--dc-cor-destaque);
  color: var(--dc-cor-texto);
  border: var(--dc-borda-controle);
  box-shadow: var(--dc-sombra-dura);
}

.dc-botao--secundario {
  background: var(--dc-cor-superficie);
  color: var(--dc-cor-texto);
  border: var(--dc-borda-controle);
}

/* R28: única exceção do N1 -- borda 1px `--dc-cor-borda-forte` (o mesmo
   valor de `--dc-borda-cartao`), nunca 2px chumbo: o texto chumbo
   (13,57:1) é o que identifica o botão fantasma, não a borda. */
.dc-botao--fantasma {
  background: transparent;
  color: var(--dc-cor-texto-fraco);
  border: var(--dc-borda-cartao);
}

/* T9b (R43/D-T9b.14) -- "Voltar aos projetos" da tela Conferindo: link
   verde escuro sem borda nem fundo (o desenho não pinta nenhum dos
   dois) -- mesma ausência de moldura do fantasma, mas na cor de ação
   (`--dc-cor-acento`), não no texto fraco. */
.dc-botao--link {
  background: transparent;
  border: 0;
  color: var(--dc-cor-acento);
  padding: 0 var(--dc-espaco-3);
}

/* estado:hover -- secundário e fantasma escurecem por `color-mix` (chumbo
   a `--dc-wash-estado`, 12%) sobre a própria cor de repouso; o primário
   ganha o deslocamento duro de N2 MAIS a troca pro token de hover fechado
   de R32 (`--dc-cor-destaque-hover`, texto chumbo continua 8,82:1 --
   `color-mix` sairia do par medido). */
.dc-botao--primario:hover {
  background: var(--dc-cor-destaque-hover);
  transform: translate(-1px, -1px);
  box-shadow: var(--dc-sombra-dura-hover);
}
.dc-botao--primario:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}
.dc-botao--secundario:hover {
  background: color-mix(in srgb, var(--dc-cor-texto) var(--dc-wash-estado), var(--dc-cor-superficie));
}
.dc-botao--fantasma:hover {
  background: color-mix(in srgb, var(--dc-cor-texto) var(--dc-wash-estado), var(--dc-cor-fundo));
  color: var(--dc-cor-texto);
}
.dc-botao--link:hover {
  color: var(--dc-cor-acento-hover);
  text-decoration: underline;
}

/* R29: "transições desligadas sob `prefers-reduced-motion: reduce`" --
   só o deslocamento (transform) do primário é movimento de verdade; os
   `color-mix` de hover continuam (mudança de cor não é o que a
   preferência pede para desligar). */
@media (prefers-reduced-motion: reduce) {
  .dc-botao--primario {
    transition: background var(--dc-transicao-rapida), box-shadow var(--dc-transicao-rapida);
  }
  .dc-botao--primario:hover,
  .dc-botao--primario:active {
    transform: none;
  }
}

/* hoje `dc.js` não alterna `aria-busy` em nenhum botão (o gancho é de
   T1/T4, fora do território de T3 -- ver furos no relatório de entrega);
   a regra abaixo fica pronta, mesmo idioma calibrado de `app.css`, para
   o dia em que existir. */
/* estado:carregando -- botão ocupado, nunca clicável em dobro */
.dc-botao[aria-busy="true"] {
  cursor: progress;
  color: transparent;
  position: relative;
  pointer-events: none;
  opacity: 0.85;
}
.dc-botao[aria-busy="true"]::after {
  content: "";
  position: absolute;
  width: 1.1em;
  height: 1.1em;
  /* N3 (R30): `--dc-raio-pill` está proibido em dc.css -- este círculo é
     geometria (o spinner só gira certo redondo), não decisão de cantos
     de componente; exceção análoga à de `.dc-relatorio` no design (D2). */
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  color: var(--dc-cor-texto-em-acento);
  animation: dc-girar 700ms linear infinite;
}

/* R32 -- `--dc-cor-texto-em-acento` (off-white) foi calibrado pro primário
   verde ESCURO de antes de T6; sobre o novo fundo Verde Tech (claro) ele
   sumiria. Ainda é código morto (`dc.js` não liga `aria-busy` em botão
   nenhum hoje -- ver comentário acima), mas troca o par pra ficar
   coerente com a paleta nova pro dia em que existir. */
.dc-botao--primario[aria-busy="true"]::after {
  color: var(--dc-cor-texto);
}

@keyframes dc-girar {
  to { transform: rotate(360deg); }
}

.dc-botao:disabled,
.dc-botao[disabled] {
  background: var(--dc-cor-neutro);
  color: var(--dc-cor-texto-em-acento);
  border-color: transparent;
  cursor: not-allowed;
  box-shadow: none;
}

/* R32: :disabled do primário tem look próprio -- a regra genérica acima
   zera a borda pra transparent; aqui ela volta pro token (--dc-borda-
   controle já é 2px var(--dc-cor-texto), "mesma borda" que R32 pede) e
   o fundo/texto trocam pro par que a letra do requisito lista. Vem
   DEPOIS da regra genérica (mesma especificidade -- ordem decide). */
.dc-botao--primario:disabled,
.dc-botao--primario[disabled] {
  background: var(--dc-cor-superficie-alta);
  color: var(--dc-cor-neutro);
  border-color: var(--dc-cor-texto);
}

/* ==================================================== mensagens de erro
   `#erro-estudos`, `#erro-login`, `#insumos-erro`, `#preview-erro`,
   `#erro-disparo`, `#erro-sonda` (e `#sinal-rodada`, mesma família --
   "sem sinal do servidor" é texto de alerta/erro, R1) -- R13/R22. */

/* estado:erro -- wash 12% de erro sobre a superfície, borda 1px erro. */
.dc-mensagem-erro {
  background: color-mix(in srgb, var(--dc-cor-erro) var(--dc-wash-estado), var(--dc-cor-superficie));
  border: 1px solid var(--dc-cor-erro);
  color: var(--dc-cor-erro);
  border-radius: var(--dc-raio-cartao);
  padding: var(--dc-espaco-2) var(--dc-espaco-3);
  font: var(--dc-texto-pequeno);
}

/* ========================================================= avisos discretos
   `#preview-sonda-aviso`, `#pre-voo-aviso`, `#pre-voo-recomendacao`,
   `#aviso-papel` -- texto pequeno, cor fraca, nunca cor de erro (a espera
   pode só estar demorando, não necessariamente falhado). */
.dc-aviso {
  font: var(--dc-peso-medio) var(--dc-fs-body-sm) / var(--dc-lh-corpo) var(--dc-fonte);
  color: var(--dc-cor-texto-fraco);
  margin: var(--dc-espaco-2) 0;
}

/* ============================================================= estado vazio
   `#preview-vazio` -- desenhado de propósito, nunca uma área em branco. */

/* estado:vazio */
.dc-estado-vazio {
  border: 1px dashed var(--dc-cor-borda-forte);
  border-radius: var(--dc-raio-cartao);
  padding: var(--dc-espaco-6) var(--dc-espaco-4);
  text-align: center;
  color: var(--dc-cor-texto-fraco);
  font: var(--dc-texto-corpo);
}

/* Lista de estudos/histórico vazia: `dc.js` não desenha nenhum elemento
   próprio quando a lista está vazia (o array simplesmente não itera) --
   sem um nó para carregar `.dc-estado-vazio`, o `:empty` cobre a caixa
   (nunca texto novo -- copy é decisão de quem escreve `dc.js`, fora do
   território de T3; ver furos). */
.dc-lista-estudos:empty,
.dc-historico:empty {
  border: 1px dashed var(--dc-cor-borda-forte);
  border-radius: var(--dc-raio-cartao);
  min-height: 3rem;
}

/* ======================================================= grade de preview
   `#grade-preview` (dc-grade-slides) + cards gerados por `dc.js`
   (Contrato C1) -- TODAS as classes que `grep -o 'dc-[a-z_-]*' dc.js`
   encontra, mais os dois modificadores concatenados em runtime
   (`dc-cartao-preview__miniatura--ausente`,
   `dc-cartao-preview__titulo--vazio`; ver relatório de entrega). */

/* CONTRATO T9a -- coluna 168px e gap 20px/16px do desenho (ANEXO E 1001).
   `grid-template-columns`/`minmax()` não é `padding|margin|gap` (R19 só
   proíbe px nesses três + font-size) -- 168px fica literal, byte a byte
   com o desenho e com o teste novo (`minmax(168px, 1fr)`); o `gap`, esse
   sim coberto por R19, vira rem (20px = 1.25rem, 16px = 1rem). */
.dc-grade-slides {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 1.25rem 1rem;
  margin: var(--dc-espaco-2) 0 0;
}

.dc-cartao-preview {
  background: var(--dc-cor-superficie);
  border: var(--dc-borda-cartao);
  border-radius: var(--dc-raio-cartao);
  padding: var(--dc-espaco-2);
  display: flex;
  flex-direction: column;
  gap: var(--dc-espaco-2);
  transition: border-color var(--dc-transicao-rapida), box-shadow var(--dc-transicao-rapida);
  /* Pedido do dono do produto 06/09/2026: o cartão INTEIRO é o botão de seleção. */
  cursor: pointer;
}

/* estado:focus-visible -- cartão focado pelo teclado (Tab); Espaço/Enter alternam */
.dc-cartao-preview:focus-visible {
  outline: 2px solid var(--dc-cor-acento);
  outline-offset: 2px;
}

/* estado:hover -- card do preview reage ao passar o mouse. N2 (R29): sem
   sombra aqui -- a caixa de sombra dura é só do botão primário e dos
   selos; o card muda de borda, nunca "levanta". */
.dc-cartao-preview:hover {
  border-color: var(--dc-cor-borda-foco);
}

/* Slide desmarcado com motivo (onda anterior, "já conferido em...", etc.):
   aparece apagado, NUNCA escondido -- o motivo fica visível ao lado (trava
   2 de R52). R52 travas 1-2 (07/09, decisão do dono do produto, brief §13.1) sobrepõe a
   W4 de hoje: o cartão apagado ALTERNA como qualquer outro -- cursor
   normal (herda `pointer` de `.dc-cartao-preview`), sem recusa de clique. */
.dc-cartao-preview--apagado {
  opacity: 0.6;
}

/* R52 -- cartão apagado que a operadora MARCA volta à opacidade plena
   (a miniatura some do estado "apagado" visual); o `<p>` de motivo continua
   no DOM e visível (trava 2) -- nada aqui o remove. */
.dc-cartao-preview--apagado:has(.dc-cartao-preview__marca:checked) {
  opacity: 1;
}

/* R34: a moldura de "marcado" mudou de casa e de cor -- não é mais o
   cartão inteiro (`:has()`, tirado por letra explícita de R34: "NÃO DEVE
   ... depender de :has()"), é a MINIATURA -- 1px cinza (`--dc-borda-
   cartao`) desmarcada, 2px chumbo (`--dc-borda-controle`) marcada. Como
   a miniatura vem ANTES do checkbox no DOM (`montarSlidePreview`), um
   combinador de irmão não alcança pra trás sem `:has()`; o sinal
   ACESSÍVEL de "marcado" (o que T5/leitor de tela usam) é o próprio
   checkbox -- `:checked` nele mesmo e `aria-pressed` (gravado por
   `dc.js`, abaixo) -- e o único uso de `:has()` que sobra nesta pele é
   só o efeito visual DERIVADO da miniatura, nunca a fonte da verdade. */
.dc-cartao-preview__miniatura {
  aspect-ratio: 16 / 9;
  background: var(--dc-cor-fundo);
  border: var(--dc-borda-cartao);
  border-radius: var(--dc-raio-cartao);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--dc-transicao-rapida), border-width var(--dc-transicao-rapida);
}
.dc-cartao-preview:has(.dc-cartao-preview__marca:checked) .dc-cartao-preview__miniatura {
  border: var(--dc-borda-controle);
}

.dc-cartao-preview__miniatura img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* miniatura ausente (miniatura: null, ou <img> que falhou ao carregar):
   título sem imagem, sem buraco no layout -- mesma caixa, símbolo neutro. */
.dc-cartao-preview__miniatura--ausente {
  color: var(--dc-cor-neutro);
  font: var(--dc-texto-micro);
  text-align: center;
  padding: var(--dc-espaco-2);
}

/* R42/D32 (desenho byte a byte) -- linha de baixo do cartão: número à
   esquerda, selo de tipo à direita (a mesma linha; sem `:has()`, é o
   próprio flex que separa os dois `<span>`). */
.dc-cartao-preview__linha {
  display: flex;
  justify-content: space-between;
  margin: 0;
}

/* R34 -- a letra pede especificamente --dc-fs-caption + --dc-peso-semibold
   (não o atalho `--dc-texto-micro`, que carrega --fw-medium): escrito por
   extenso pra bater literal com o requisito. Continua só o número (R42). */
.dc-cartao-preview__numero {
  font-family: var(--dc-fonte);
  font-size: var(--dc-fs-caption);
  font-weight: var(--dc-peso-semibold);
  line-height: var(--dc-lh-justo);
  color: var(--dc-cor-texto-fraco);
}

/* R42 -- selo de tipo ("Gráfico"/"Tabela"/"Números"/"Texto"/"Sem
   descrição"), mesma família tipográfica do número (12px/600 --dc-cor-
   texto-fraco -- "--text-2" do desenho). */
.dc-cartao-preview__tipo {
  font-family: var(--dc-fonte);
  font-size: var(--dc-fs-caption);
  font-weight: var(--dc-peso-semibold);
  line-height: var(--dc-lh-justo);
  color: var(--dc-cor-texto-fraco);
}

.dc-cartao-preview__titulo {
  font: var(--dc-texto-pequeno);
  color: var(--dc-cor-texto);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dc-cartao-preview__titulo--vazio {
  color: var(--dc-cor-neutro);
  font-style: italic;
}

.dc-cartao-preview__rodape {
  display: flex;
  align-items: center;
  gap: var(--dc-espaco-2);
  font: var(--dc-texto-pequeno);
  color: var(--dc-cor-texto);
  cursor: pointer;
}

/* R34/R32(c): "o quadrado de seleção" -- checkbox nativo (continua sendo
   um `<input type="checkbox">` de verdade, focável e lido por leitor de
   tela; `appearance: none` só troca o DESENHO, não o elemento) redesenhado
   pro quadrado 20x20 do desenho: papel vazio + `--dc-borda-controle` (2px
   chumbo) desmarcado; `--dc-cor-destaque` (Verde Tech -- R32(c), um dos
   cinco lugares permitidos) + ✓ chumbo marcado. `dc.js` grava
   `aria-pressed` espelhando `checked` (D19) -- T5 lê os dois; a MARCA
   VISUAL some se `--dc-cor-destaque`/`appearance` não existir, mas
   `checked`/`aria-pressed` continuam corretos (R34: "nem esconder a
   checkbox nativa sem manter aria-pressed/checked lido por T5"). */
.dc-cartao-preview__marca {
  appearance: none;
  -webkit-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  flex-shrink: 0;
  position: relative;
  background: var(--dc-cor-superficie);
  border: var(--dc-borda-controle);
  border-radius: var(--dc-raio-controle);
  cursor: pointer;
}

.dc-cartao-preview__marca:checked {
  background: var(--dc-cor-destaque);
}

/* ✓ desenhado por dois lados de borda rotacionados (sem imagem, sem
   hexadecimal cru -- R17) -- só aparece marcado. */
.dc-cartao-preview__marca:checked::after {
  content: "";
  position: absolute;
  left: 0.35rem;
  top: 0.1rem;
  width: 0.3rem;
  height: 0.55rem;
  border: solid var(--dc-cor-texto);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.dc-cartao-preview__motivo {
  font: var(--dc-texto-micro);
  color: var(--dc-cor-erro);
}

/* Bloco de descrição por slide (R7/RM29; R34 -- terceiro `✗` de R20 no
   harness): regra base é o neutro (nenhum atributo, ou qualquer valor
   que não seja "ok"/"erro") -- N1 (R28), 1px cor de borda de cartão,
   tracejada. `montarBlocoDescricao` (`dc.js`, D19) grava `data-estado`
   neste MESMO `<div>` (não só no `<p>` filho `__descricao-estado`) --
   os dois seletores de atributo abaixo tingem por cima da base, sem
   `:has()` (o atributo já está no próprio elemento, não num
   descendente/irmão). */
.dc-cartao-preview__descricao {
  border-top: 1px dashed var(--dc-cor-borda-forte);
  margin-top: var(--dc-espaco-2);
  padding-top: var(--dc-espaco-2);
  display: flex;
  flex-direction: column;
  gap: var(--dc-espaco-1);
}

/* estado:ok -- wash 12% + borda 1px na cor "positivo" já usada por
   `.dc-bloco-estado--positivo` (--dc-cor-acento, o verde escuro de T3 --
   NÃO é Verde Tech; R32 não lista este par entre (a)-(e)). */
.dc-cartao-preview__descricao[data-estado="ok"] {
  background: color-mix(in srgb, var(--dc-cor-acento) var(--dc-wash-estado), var(--dc-cor-superficie));
  border-top: 1px solid var(--dc-cor-acento);
}

/* estado:erro -- mesmo tratamento, cor de erro (tijolo). */
.dc-cartao-preview__descricao[data-estado="erro"] {
  background: color-mix(in srgb, var(--dc-cor-erro) var(--dc-wash-estado), var(--dc-cor-superficie));
  border-top: 1px solid var(--dc-cor-erro);
}

/* Onde `color-mix` não existe -- mesmo raciocínio do `@supports` de
   `.dc-bloco-estado`: cai pra superfície lisa, o estado continua
   sinalizado pela borda e pelo nome escrito (abaixo). */
@supports not (background: color-mix(in srgb, currentcolor 10%, currentcolor)) {
  .dc-cartao-preview__descricao[data-estado="ok"],
  .dc-cartao-preview__descricao[data-estado="erro"] {
    background: var(--dc-cor-superficie);
  }
}

/* corpo em chumbo (R34) -- só o NOME do estado muda de cor; o resto do
   bloco (números/texto/resumo/detalhe, abaixo) fica exatamente como no
   neutro, chumbo ou chumbo-fraco. */
.dc-cartao-preview__descricao-estado {
  font-weight: var(--dc-peso-semibold);
  font-size: var(--dc-fs-caption);
  line-height: var(--dc-lh-justo);
  color: var(--dc-cor-texto);
}
.dc-cartao-preview__descricao[data-estado="ok"] .dc-cartao-preview__descricao-estado {
  color: var(--dc-cor-acento);
}
.dc-cartao-preview__descricao[data-estado="erro"] .dc-cartao-preview__descricao-estado {
  color: var(--dc-cor-erro);
}

.dc-cartao-preview__descricao-numeros,
.dc-cartao-preview__descricao-detalhe {
  font: var(--dc-texto-micro);
  color: var(--dc-cor-texto);
  padding-left: var(--dc-espaco-3);
  display: flex;
  flex-direction: column;
  gap: var(--dc-espaco-1);
}

.dc-cartao-preview__descricao-texto,
.dc-cartao-preview__descricao-resumo {
  font: var(--dc-texto-micro);
  color: var(--dc-cor-texto-fraco);
}

/* `#contador-selecao` (dc-contador-selecao) -- rótulo Medium, corpo pequeno. */
.dc-contador-selecao {
  font: var(--dc-peso-medio) var(--dc-fs-body-sm) / var(--dc-lh-corpo) var(--dc-fonte);
  color: var(--dc-cor-texto-fraco);
  margin: var(--dc-espaco-2) 0;
}

/* R31 (N4): números tabulares -- contagem, custo, ETA e progresso não
   podem "dançar" de largura enquanto o dígito muda; é uma feature
   OpenType da própria Exo (variável), sem fonte nem elemento novo. Os
   cinco ids que R31 lista, ids nunca mudam (C1). */
#contador-selecao,
#custo-rodada,
#pre-voo-custo,
#eta-rodada,
#progresso-rodada {
  font-feature-settings: "tnum";
}
.dc-contador-selecao strong { color: var(--dc-cor-texto); }

/* R35/R43 -- barra de progresso: `#progresso-rodada` é, ela mesma, a
   barra (`role="progressbar"` fixo no HTML, `aria-valuenow` escrito por
   dc.js -- D19, nenhum elemento/atributo novo além desses dois). Nada
   de custom property nova aqui: C8 é lista fechada e `dc.css` só pode
   usar `var(--dc-…)` com token correspondente em `tema.css` (testado);
   uma % contínua escrita por JS não é token de design, então o
   preenchimento lê o PRÓPRIO `aria-valuenow` por seletor de atributo
   (degraus de 10 -- floor; `attr()` tipado em contexto não-`content`
   não tem suporte confiável o bastante pra apostar nele aqui).
   `::before` = trilho (moldura fixa, sempre 100%); `::after` = pre-
   enchimento (largura por degrau, dentro da moldura). Os dois são
   `position: absolute` no topo do bloco (`#progresso-rodada` vira
   `position: relative`). R43 (07/09, T9b) sobrepõe: a tela Conferindo
   tira o texto de dentro da barra -- vira a linha "<fase> · slide X de
   N" / "P% · <ETA>" abaixo (`.dc-conferindo__linha`) -- então o
   `padding-top` que empurrava aquele texto sai, e o preenchimento passa
   a ser a listra diagonal animada Verde Tech do desenho, não mais o
   acento liso. */
#progresso-rodada {
  position: relative;
  height: var(--dc-espaco-5);
  margin: 0;
  padding: 0;
}
#progresso-rodada::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: var(--dc-borda-controle);
  background: var(--dc-cor-superficie);
}
#progresso-rodada::after {
  content: "";
  position: absolute;
  /* 5px = 2px de --dc-borda-controle + 3px de padding do desenho -- a
     barra não tem padding de verdade (R19 proíbe px em padding/margin/
     gap/font-size), então o preenchimento se insere por posição, não
     por caixa; top/left/height/width não entram no regex de
     espaçamento (esse mira só um trio de propriedades bem mais
     específico). */
  top: 5px;
  left: 5px;
  height: calc(100% - 10px);
  width: 0;
  background: repeating-linear-gradient(-45deg, var(--dc-cor-destaque) 0 10px, var(--dc-cor-destaque-hover) 10px 20px);
  background-size: 28px 28px;
  animation: dc-stripe 0.7s linear infinite;
  transition: width 0.4s ease-out;
}
#progresso-rodada[aria-valuenow^="1"]:not([aria-valuenow="1"]):not([aria-valuenow="100"])::after { width: calc(10% - 10px); }
#progresso-rodada[aria-valuenow^="2"]:not([aria-valuenow="2"])::after { width: calc(20% - 10px); }
#progresso-rodada[aria-valuenow^="3"]:not([aria-valuenow="3"])::after { width: calc(30% - 10px); }
#progresso-rodada[aria-valuenow^="4"]:not([aria-valuenow="4"])::after { width: calc(40% - 10px); }
#progresso-rodada[aria-valuenow^="5"]:not([aria-valuenow="5"])::after { width: calc(50% - 10px); }
#progresso-rodada[aria-valuenow^="6"]:not([aria-valuenow="6"])::after { width: calc(60% - 10px); }
#progresso-rodada[aria-valuenow^="7"]:not([aria-valuenow="7"])::after { width: calc(70% - 10px); }
#progresso-rodada[aria-valuenow^="8"]:not([aria-valuenow="8"])::after { width: calc(80% - 10px); }
#progresso-rodada[aria-valuenow^="9"]:not([aria-valuenow="9"])::after { width: calc(90% - 10px); }
#progresso-rodada[aria-valuenow="100"]::after { width: calc(100% - 10px); }

/* R43 -- listra diagonal do preenchimento anda 28px (a largura de um
   ciclo do `repeating-linear-gradient`) por volta, .7s linear infinito;
   reduced-motion desliga a listra E o toast (D-T9b.12/13). */
@keyframes dc-stripe {
  to {
    background-position: 28px 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  #progresso-rodada::after {
    animation: none;
    transition: none;
  }
  .dc-toast {
    animation: none;
  }
}

/* Pedido do dono do produto 06/09/2026: `#barra-selecao` (dc-barra-selecao) -- base
   herdada (flex/gap). CONTRATO T9a: o layout REAL da barra agora vem de
   `.dc-barra-flutuante`, logo abaixo -- mesma especificidade (1 classe
   cada), a ordem no arquivo decide, e a regra nova vence onde as duas
   declaram a mesma propriedade (`display`/`margin`). Os botões fantasma
   que moravam aqui saíram para `#acoes-slides` (CONTRATO T9a) -- não há
   mais `.dc-botao` fantasma dentro desta barra, então a regra que os
   encolhia saiu junto (o único botão de dentro agora é o CTA primário,
   que tem tamanho próprio em `.dc-barra-flutuante__acao`). */
.dc-barra-selecao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dc-espaco-3);
  margin: var(--dc-espaco-2) 0 0;
}

/* CONTRATO T9a -- `#barra-selecao` vira a barra flutuante fixa no rodapé
   (ANEXO E 1014-1019, byte a byte). `pointer-events: none` aqui / `auto`
   no miolo: a barra ocupa a LARGURA TODA (`left:0;right:0`) -- sem isso
   ela bloquearia clique nos cartões por baixo dela fora do miolo visível.
   `margin: 0` zera o `margin-top` de `.dc-barra-selecao` acima (mesma
   especificidade -- ordem decide); a posição vem só de `bottom`. 24px do
   desenho = --dc-espaco-4 (token exato). */
.dc-barra-flutuante {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--dc-espaco-4);
  margin: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 30;
}

/* 20px de gap e 12px/22px de padding (ANEXO E 1015) não têm token exato
   na escala de 8 -- rem literal, mesmo padrão de `.dc-cartao-projeto__nome`
   pra medida sem degrau. Fundo chumbo/texto papel/borda chumbo = o MESMO
   par que `--dc-cor-superficie-invertida`/`--dc-cor-texto-em-acento` já
   usam no painel do login (R37) -- `tema.css` documenta essa dupla
   nominalmente como "chumbo -- barra de seleção". */
.dc-barra-flutuante__miolo {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.75rem 0.75rem 0.75rem 1.375rem;
  background: var(--dc-cor-superficie-invertida);
  color: var(--dc-cor-texto-em-acento);
  border: 1px solid var(--dc-cor-superficie-invertida);
}

/* ANEXO E 1016 -- "N de T slides" fora do `<strong>`, 14px/600. */
.dc-barra-flutuante__texto {
  font-family: var(--dc-fonte);
  font-size: var(--dc-fs-label);
  font-weight: var(--dc-peso-semibold);
}

/* ANEXO E 1016 -- o `<strong>` do N vivo: 22px/700 tabular (`tnum` já
   herda de `#contador-selecao`, no bloco dos 5 ids de R31 -- explícito
   aqui também, byte a byte com o desenho). 22px sem --dc-fs-* exato:
   mesmo 1.375rem já usado em `.dc-cartao-projeto__nome`. */
.dc-barra-flutuante__n {
  font-size: 1.375rem;
  font-weight: var(--dc-peso-bold);
  font-feature-settings: "tnum";
}

/* ANEXO E 1017 -- aviso "Selecione ao menos um slide..." (C14, `role=
   status`), 13px = --dc-fs-label (token exato); cor "--line" do desenho é
   o mesmo --dc-cor-borda-forte (#BFBBAF, `--gray` de expertise-tokens.css --
   valor conferido). */
.dc-barra-flutuante__aviso {
  font-family: var(--dc-fonte);
  font-size: var(--dc-fs-label);
  color: var(--dc-cor-borda-forte);
}

/* ANEXO E 1018 -- CTA "Conferir N slides →": 15px/700, padding 11px 20px
   (sem token exato -- rem literal); `height: auto` porque `.dc-botao`
   trava 2.5rem fixo (N2/R32) e o padding do desenho passa disso -- cor/
   fundo/borda/sombra continuam de `.dc-botao--primario` (mesmo verde tech
   de todo primário do app; o desenho usa placeholders de cor dinâmicos
   pro estado habilitado/desabilitado, não hex fixo, então não há cor nova
   pra copiar aqui). */
.dc-barra-flutuante__acao {
  height: auto;
  font-size: 0.9375rem;
  font-weight: var(--dc-peso-bold);
  padding: 0.6875rem 1.25rem;
}

/* CONTRATO T9a -- disabled do CTA da barra flutuante (N = 0) é MAIS CLARO
   que o `:disabled` genérico do primário logo acima (que usa
   --dc-cor-texto, escuro, na borda): "--line-2"/"--muted" do desenho não
   têm hex no despacho (o excerto do mock usa placeholders de template,
   `{{ checkBtnBg }}` etc., não literais) -- mapeados aos tons já usados
   no `:disabled` do primário (fundo --dc-cor-superficie-alta, texto
   --dc-cor-neutro, ambos herdados sem mudança); só a BORDA muda, de
   --dc-cor-texto para o mesmo tom do fundo (decisão registrada no
   relatório -- ver Furos). Vem DEPOIS de `.dc-botao--primario:disabled`
   (mesma especificidade -- ordem decide). */
.dc-barra-flutuante__acao:disabled,
.dc-barra-flutuante__acao[disabled] {
  border-color: var(--dc-cor-superficie-alta);
  box-shadow: none;
  cursor: not-allowed;
}

/* ==================================================== blocos de estado
   R20 (eixos 3 e 4): `#aviso-rodada-em-curso` (alerta), `#bloco-pre-voo`
   (neutro), `#status-rodada` (alerta), `#resultado-rodada` (positivo),
   `#bloco-interrompida` (alerta), `#bloco-falha` (erro),
   `#bloco-insumos-nao-lidos` (alerta), `#bloco-recusas` (erro). O
   modificador vai fixo no HTML de cada bloco (a classe não muda com
   `hidden` -- só `dc.js` alterna `hidden`, nunca a classe). Fundo tingido
   (wash) na cor do estado + borda 1px na cor + nome do estado ESCRITO
   (nunca cor como único sinal) -- mesmo idioma calibrado de `app.css`
   (`.dc-cartao`), com `--dc-cor-estado-nome` no título para preservar o
   contraste medido (o alerta sobre o wash é o par mais apertado, 4,53:1,
   documentado no cabeçalho de `tema.css`). */
.dc-bloco-estado {
  --dc-cor-estado: var(--dc-cor-neutro);
  --dc-cor-estado-nome: var(--dc-cor-texto-fraco);
  background: color-mix(in srgb, var(--dc-cor-estado) var(--dc-wash-estado), var(--dc-cor-superficie));
  border: 1px solid var(--dc-cor-estado);
  border-radius: var(--dc-raio-cartao);
  padding: var(--dc-espaco-3) var(--dc-espaco-4);
  margin-top: var(--dc-espaco-3);
  display: flex;
  flex-direction: column;
  gap: var(--dc-espaco-2);
  color: var(--dc-cor-texto);
}

.dc-bloco-estado__titulo {
  font: var(--dc-texto-subtitulo);
  color: var(--dc-cor-estado-nome);
}

.dc-bloco-estado--positivo {
  --dc-cor-estado: var(--dc-cor-acento);
  --dc-cor-estado-nome: var(--dc-cor-acento);
}
.dc-bloco-estado--erro {
  --dc-cor-estado: var(--dc-cor-erro);
  --dc-cor-estado-nome: var(--dc-cor-erro);
}
.dc-bloco-estado--alerta {
  --dc-cor-estado: var(--dc-cor-alerta);
  --dc-cor-estado-nome: var(--dc-cor-alerta);
}
.dc-bloco-estado--neutro {
  --dc-cor-estado: var(--dc-cor-neutro);
  --dc-cor-estado-nome: var(--dc-cor-texto-fraco);
}

/* Onde `color-mix` não existe, o tingimento não pode virar buraco: cai
   para superfície lisa -- o estado continua sinalizado pela borda e pelo
   nome escrito (mesmo raciocínio de `app.css`/`.dc-cartao`). Idem para o
   hover de arquivo, que também usa `color-mix` (o hover do primário
   saiu daqui em R32 -- agora é `--dc-cor-destaque-hover`, token fixo,
   sem `color-mix`, funciona em qualquer motor). */
@supports not (background: color-mix(in srgb, currentcolor 10%, currentcolor)) {
  .dc-bloco-estado { background: var(--dc-cor-superficie); }
  .dc-mensagem-erro { background: var(--dc-cor-superficie); }
  .dc-botao--secundario:hover,
  .dc-botao--fantasma:hover { background: var(--dc-cor-superficie-alta); }
  .dc-campo-arquivo::file-selector-button:hover { background: var(--dc-cor-acento-hover); }
}

/* ================================================================ relatório
   `#relatorio-texto` (dc-relatorio): monoespaço de propósito -- tabelas de
   texto do relatório precisam de alinhamento de coluna, o que nenhuma
   fonte proporcional (Exo incluída) garante. `font-family` aqui é uma
   pilha de sistema (não a marca) e `0.9rem` é medida literal, não token
   de marca -- design.md §3 pede exatamente essa dupla exceção para este
   elemento (mesma razão de D2 para o `@font-face`: conteúdo tabular, não
   decisão de identidade visual). */
.dc-relatorio {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.9rem;
  line-height: var(--dc-lh-corpo);
  white-space: pre-wrap;
  background: var(--dc-cor-fundo);
  border: var(--dc-borda-cartao);
  border-radius: var(--dc-raio-cartao);
  padding: var(--dc-espaco-3);
  overflow: auto;
  max-height: 32rem;
  color: var(--dc-cor-texto);
}

/* ============================================================ tela login
   R37 -- painel chumbo (hero à esquerda) + cartão papel (à direita), duas
   colunas iguais só a partir de 64rem; abaixo disso empilha (painel em
   cima, cartão embaixo -- ordem já é essa no HTML, então basta 1 coluna).
   Fixado em P2 = A [aprovado 07/09 06:03]: sem gradiente/glow/drop-shadow/
   sombra difusa -- "sem sombra pesada" do brandbook. */
.dc-login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--dc-cor-superficie-invertida);
  position: relative;
  overflow: hidden;
}
@media (min-width: 64rem) {
  .dc-login {
    grid-template-columns: 1fr 1fr;
  }
}

.dc-login__painel {
  background: var(--dc-cor-superficie-invertida);
  padding: var(--dc-espaco-6);
  display: flex;
  flex-direction: column;
  gap: var(--dc-espaco-4);
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

.dc-login__logo {
  height: 2.75rem; /* 44 do desenho (132x44 pelo SVG 3:1) -- T6c */
  width: auto;
  align-self: flex-start; /* largura própria: sem isto o item flex estica até a coluna -- T6c */
}

/* Verde Tech sobre chumbo -- R32 (b), o segundo dos cinco contextos
   permitidos (o primeiro é o botão primário cercado, R32 (a)). */
.dc-login__eyebrow {
  display: inline-block;
  align-self: flex-start;
  font-size: var(--dc-fs-caption);
  font-weight: var(--dc-peso-semibold);
  text-transform: uppercase;
  letter-spacing: var(--dc-espacamento-rotulo);
  color: var(--dc-cor-texto);
  background: var(--dc-cor-destaque);
  padding: var(--dc-espaco-1) var(--dc-espaco-2);
}

/* Hero decorativo (aria-hidden -- o título acessível de verdade é
   `.dc-login__titulo`, no cartão). Abaixo de 64rem usa --dc-fs-h1 (o
   desenho empilhado de 1024px); a partir de 64rem, --dc-fs-hero (112 do desenho: o mockup manda -- T6c). */
.dc-login__hero {
  margin: 0;
  font-size: var(--dc-fs-h1);
  font-weight: var(--dc-peso-extrabold);
  letter-spacing: var(--dc-espacamento-hero);
  line-height: var(--dc-lh-hero);
  color: var(--dc-cor-texto-em-acento);
}
@media (min-width: 64rem) {
  .dc-login__hero {
    font-size: var(--dc-fs-hero);
  }
}

.dc-login__hero-daum {
  display: block;
}

/* O mesmo selo "check" de R33 (`.dc-marca__selo`), em escala de hero --
   fundo Verde Tech, texto chumbo, sombra dura maior (--dc-sombra-selo-
   hero, C8) e o ✓ em 2.5rem (era 1rem no cabeçalho). */
.dc-login__hero-selo {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-espaco-2);
  margin-top: var(--dc-espaco-2);
  padding: 0 var(--dc-espaco-3) var(--dc-espaco-2) var(--dc-espaco-2);
  color: var(--dc-cor-texto);
  background: var(--dc-cor-destaque);
  border: var(--dc-borda-controle);
  box-shadow: var(--dc-sombra-selo-hero);
  transform: rotate(-1.5deg);
}
.dc-login__hero-selo svg {
  width: 2.5rem;
  height: 2.5rem;
  stroke: currentColor;
  stroke-width: 3.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
  fill: none;
}

.dc-login__frase {
  margin: 0;
  font-size: var(--dc-fs-body-lg);
  line-height: var(--dc-lh-corpo);
  color: var(--dc-cor-borda-forte);
  max-width: 28rem;
}

.dc-login__cartao {
  width: min(26rem, 100%);
  justify-self: center;
  align-self: center;
  background: var(--dc-cor-superficie);
  border: var(--dc-borda-cartao);
  border-radius: var(--dc-raio-cartao);
  padding: var(--dc-espaco-5);
  display: flex;
  flex-direction: column;
  gap: var(--dc-espaco-4);
  position: relative;
  z-index: 1;
}

.dc-login__titulo {
  margin: 0;
  font-size: var(--dc-fs-h2);
  font-weight: var(--dc-peso-bold);
  letter-spacing: var(--dc-espacamento-titulo);
  line-height: var(--dc-lh-apertado);
  color: var(--dc-cor-texto);
}

.dc-login__subtitulo {
  font: var(--dc-texto-pequeno);
  color: var(--dc-cor-texto-fraco);
}

/* Rótulos "Conta"/"Senha" e os campos, só dentro do cartão do login --
   tratamento próprio de R37 (--dc-fs-label/--dc-peso-semibold), mais
   forte que o --dc-fs-body-sm genérico de `.dc-campo` no resto de `dc/`. */
.dc-login__cartao .dc-campo {
  font-size: var(--dc-fs-label);
  font-weight: var(--dc-peso-semibold);
}

/* --dc-cor-fundo (off-white), não --dc-cor-superficie (papel do card) --
   os dois campos do login flutuam sobre o fundo da página, não sobre uma
   segunda camada de papel. */
.dc-login__cartao .dc-campo-texto {
  background: var(--dc-cor-fundo);
}

#erro-login {
  font-size: var(--dc-fs-label);
  font-weight: var(--dc-peso-semibold);
}

/* Camada de fundo do login -- emenda de R37 (decisao do dono do produto, 08/09/2026): o
   grafismo do desenho entra SO aqui; gradiente/glow/drop-shadow seguem
   proibidos nos componentes (recorte, 08/09). */
.dc-login__meio {
  display: flex;
  flex-direction: column;
  gap: var(--dc-espaco-4);
  padding: var(--dc-espaco-6) 0;
}

.dc-login__rodape {
  margin: 0;
  font-size: var(--dc-fs-label);
  font-weight: var(--dc-peso-medio);
  color: var(--dc-cor-borda-forte);
  text-align: right;
}

.dc-login__fundo {
  position: absolute;
  right: -8.75rem;
  bottom: -8.75rem;
  width: 32.5rem;
  height: 32.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
}

.dc-login__brilho {
  position: absolute;
  width: 56.25rem;
  height: 56.25rem;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--dc-cor-destaque) 34%, transparent) 0%,
    color-mix(in srgb, var(--dc-cor-acento) 28%, transparent) 32%,
    color-mix(in srgb, var(--dc-cor-acento) 10%, transparent) 55%,
    transparent 72%
  );
}

.dc-login__sol {
  position: relative;
  width: 32.5rem;
  height: 32.5rem;
  opacity: 0.18;
  filter:
    drop-shadow(0 1rem 2rem color-mix(in srgb, var(--dc-cor-texto) 55%, transparent))
    drop-shadow(0 0 2.5rem color-mix(in srgb, var(--dc-cor-destaque) 40%, transparent));
}

/* =========================================================== responsivo
   Abaixo de 48rem a grade de 12 colunas nunca chegou a ligar (só liga a
   >= 64rem, acima); aqui é só a grade de cards do preview que precisa
   encolher o mínimo da coluna. */
@media (max-width: 48rem) {
  .dc-grade-slides {
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  }
}

/* ============================================================ T8 -- C9
   roteador por hash, stepper e moldura de tela (`#/<passo>/<id>`); R39.
   Tudo abaixo é classe NOVA (território de T8, design.md §C9/§C8). */

/* ---------------------------------------------------------------- stepper
   5 caixinhas 22x22 (rem literal -- dimensão, não espaçamento; nenhum
   --dc-fs-*/--dc-espaco-* bate em 22px) + rótulo; estado por
   `data-estado` ("corrente"/"percorrido"/"afrente"), setado por dc.js.
   `aria-current="step"` é o estado real (R39); `data-estado` só decide a
   COR (o passo 4 pode ser "percorrido" e mesmo assim nunca clicável --
   R39 -- por isso a cor não pode depender só de `disabled`). */
.dc-stepper {
  height: 100%;
}

.dc-stepper__lista {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  height: 100%;
}

.dc-stepper__item {
  display: flex;
}

.dc-stepper__passo {
  font: inherit;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  display: flex;
  align-items: center;
  gap: var(--dc-espaco-2);
  padding: 0 var(--dc-espaco-3);
  height: var(--dc-espaco-7);
  font-size: var(--dc-fs-body-sm);
  font-weight: var(--dc-peso-semibold);
  color: var(--dc-cor-texto);
  cursor: pointer;
}

.dc-stepper__passo:disabled {
  cursor: default;
}

.dc-stepper__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  font-size: var(--dc-fs-caption);
  font-weight: var(--dc-peso-bold);
  border: 2px solid var(--dc-cor-texto);
  background: var(--dc-cor-superficie);
  color: var(--dc-cor-texto);
}

/* abaixo de 1024px o rótulo some -- só a caixinha fica (R39, emenda byte
   a byte item h; `[data-cols]`/`[data-hero]`/etc do desenho não são
   deste arquivo -- só este). */
@media (max-width: 1024px) {
  [data-step-label] {
    display: none;
  }
}

/* corrente: aria-current="step" -- Verde Tech na caixinha + linha 3px
   (R32 ganha um sexto contexto aqui, R39; ver ALLOWLIST em
   test_ui_reskin_telas.py, editado por T8). */
.dc-stepper__passo[aria-current="step"] {
  border-bottom-color: var(--dc-cor-destaque);
}
.dc-stepper__passo[aria-current="step"] .dc-stepper__num {
  background: var(--dc-cor-destaque);
  color: var(--dc-cor-texto);
  border-color: var(--dc-cor-texto);
}

/* percorrido: caixinha chumbo, número em papel -- clicável (exceto o
   passo 4, que chega aqui com `data-estado="percorrido"` MAS
   `disabled`, R39). */
.dc-stepper__passo[data-estado="percorrido"] .dc-stepper__num {
  background: var(--dc-cor-texto);
  color: var(--dc-cor-superficie);
  border-color: var(--dc-cor-texto);
}

/* à frente: tudo em --dc-cor-neutro (o mesmo tom que R32 já usa pro
   :disabled do primário -- "componente apagado", não texto). */
.dc-stepper__passo[data-estado="afrente"] {
  color: var(--dc-cor-neutro);
}
.dc-stepper__passo[data-estado="afrente"] .dc-stepper__num {
  border-color: var(--dc-cor-neutro);
  color: var(--dc-cor-neutro);
  background: var(--dc-cor-superficie);
}

/* -------------------------------------------------------------- moldura
   `<main class="dc-tela dc-in" data-tela="...">` -- eyebrow + h1 (R39,
   `<h1>` continua em R31: --dc-fs-h1/36px, não os 40px do desenho -- P5,
   sem degrau inventado). 1200px do desenho -> mesmo 72rem de `.dc-pagina`
   (nenhuma medida nova inventada); 48/40/120 -> grade de 8 (R36). */
.dc-tela {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--dc-espaco-6) var(--dc-espaco-5) var(--dc-espaco-8);
}

/* CONTRATO T9a -- só a tela Slides ganha um "padding-bottom" extra. A
   barra flutuante fixa no rodapé (abaixo) não pode cobrir a última
   fileira de cartões -- o desenho usa 48, 40 e 160 (unidade px) pro trio
   do `padding` da moldura. --dc-espaco-8 (96, o maior degrau da escala)
   não chega aos 160 pedidos -- 10rem é literal, mesmo padrão já usado em
   `.dc-cartao-projeto__nome` (1.375rem) pra medida sem token exato.
   `[data-tela="slides"]` só aparece em `#secao-estudo` (grep confirmado --
   `#secao-estudos`, a lista de projetos, usa `data-tela="projetos"` fixo,
   nunca "slides"). */
[data-tela="slides"].dc-tela {
  padding-bottom: 10rem;
}

.dc-tela__eyebrow {
  font-size: var(--dc-fs-caption);
  font-weight: var(--dc-peso-semibold);
  letter-spacing: var(--dc-espacamento-rotulo);
  text-transform: uppercase;
  color: var(--dc-cor-texto-fraco);
  margin: 0 0 var(--dc-espaco-2);
}

.dc-tela__titulo {
  margin: 0;
  font-size: var(--dc-fs-h1);
  font-weight: var(--dc-peso-bold);
  letter-spacing: var(--dc-espacamento-titulo);
  line-height: var(--dc-lh-apertado);
  color: var(--dc-cor-texto);
}

/* topo de Projetos: eyebrow+h1 à esquerda, busca+"Novo projeto" à
   direita (R40); `.dc-tela__acoes-topo` e `.dc-tela__form`/`.dc-tela__vazio`
   ficam sob o mesmo prefixo `.dc-tela*` permitido no despacho. */
.dc-tela__topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--dc-espaco-4);
  flex-wrap: wrap;
  margin-bottom: var(--dc-espaco-5);
}

.dc-tela__acoes-topo {
  display: flex;
  gap: var(--dc-espaco-2);
}

/* CONTRATO T9a (R42) -- `#acoes-slides` (dc-tela__acoes-topo
   dc-atalhos-slides) só aparece na tela Slides. NENHUM mecanismo
   `[data-tela=...]` existia em dc.css antes desta tarefa (o Anexo H do
   despacho aponta só um COMENTÁRIO, não uma regra -- ver relatório/furos);
   este é o primeiro uso real, ancorado no `data-tela` que `abrirEstudo`
   já grava em `#secao-estudo`. */
.dc-atalhos-slides {
  display: none;
}
[data-tela="slides"] .dc-atalhos-slides {
  display: flex;
}

/* T9b (R43) -- Conferindo é a quarta tela dedicada: coluna estreita
   (720px do desenho = 45rem, contra os 72rem das outras telas) e as
   demais seções somem da vista -- mesmo padrão de `[data-tela=...]` que
   T9a fixou pra Slides (ANEXO A8/E8): regra por tela em dc.css, nunca
   `hidden` escrito por JS. O "Voltar aos projetos" de T8 no topo
   (`#btn-voltar`) também some -- o da tela nova mora no corpo
   (`.dc-conferindo__acoes`). */
[data-tela="conferindo"].dc-tela {
  max-width: 45rem;
}
[data-tela="conferindo"] #secao-upload,
[data-tela="conferindo"] #secao-preview,
[data-tela="conferindo"] #secao-rodada,
[data-tela="conferindo"] #secao-historico,
[data-tela="conferindo"] #btn-voltar {
  display: none;
}

/* T9b (R43/D-T9b.15) -- selo "Daumcheck" do corpo de Conferindo: cópia
   de `.dc-marca__selo` (R33) com as medidas do desenho (ANEXO B1
   l.1028) -- giro -1.5deg igual, sombra dura (não a sombra-selo pequena
   do cabeçalho), oculto fora da tela Conferindo. */
.dc-selo-daumcheck {
  display: none;
  align-items: center;
  gap: var(--dc-espaco-2);
  margin: 0 0 var(--dc-espaco-5);
  padding: var(--dc-espaco-2) var(--dc-espaco-3) var(--dc-espaco-2) var(--dc-espaco-2);
  font-weight: var(--dc-peso-extrabold);
  font-size: var(--dc-fs-body);
  letter-spacing: var(--dc-espacamento-titulo);
  line-height: 1;
  color: var(--dc-cor-texto);
  background: var(--dc-cor-destaque);
  border: var(--dc-borda-controle);
  box-shadow: var(--dc-sombra-dura);
  transform: rotate(-1.5deg);
}
[data-tela="conferindo"] .dc-selo-daumcheck {
  display: inline-flex;
}
.dc-selo-daumcheck svg {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  stroke-width: 3.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
  fill: none;
}

/* T9b (R43) -- corpo da tela Conferindo: `#aviso-rodada-em-curso` deixa
   de ser um `.dc-bloco-estado` (não é mais um "estado" no meio de outra
   tela -- é a tela toda) e vira este container simples. */
.dc-conferindo {
  color: var(--dc-cor-texto);
}

.dc-conferindo__frase {
  margin: 0 0 var(--dc-espaco-5);
  font-size: var(--dc-fs-body-lg);
  color: var(--dc-cor-texto-fraco);
  line-height: var(--dc-lh-corpo);
}

/* linha "<fase> · slide X de N" / "P% · <ETA>" abaixo da barra --
   números tabulares por CLASSE (a lista fechada dos cinco ids de R31,
   ANEXO F6, não muda: nem #fase-rodada nem #eta-medido-rodada entram
   nela). */
.dc-conferindo__linha {
  display: flex;
  justify-content: space-between;
  gap: var(--dc-espaco-3);
  flex-wrap: wrap;
  margin-top: var(--dc-espaco-3);
  font-size: var(--dc-fs-body-sm);
  font-weight: var(--dc-peso-semibold);
  color: var(--dc-cor-texto-fraco);
  font-feature-settings: "tnum";
}
.dc-conferindo__linha p {
  margin: 0;
}

/* #fase-rodada -- só marca o texto à esquerda da linha; tipografia,
   cor e `tnum` já vêm do pai (`.dc-conferindo__linha`), sem repetir. */
.dc-conferindo__fase {
  font-weight: inherit;
}

.dc-conferindo__acoes {
  display: flex;
  gap: var(--dc-espaco-2);
  margin-top: var(--dc-espaco-5);
}

/* T9b (R43/D-T9b.13) -- toast de término da rodada; fixo, fora de
   qualquer `<main>` (aparece em qualquer tela -- a sonda sobrevive à
   troca de tela). Cor do texto sobre o chumbo = o MESMO token que
   `.dc-barra-flutuante__miolo` já usa sobre `--dc-cor-superficie-
   invertida` (grep confirmado). */
.dc-toast {
  position: fixed;
  right: var(--dc-espaco-4);
  top: 5.25rem;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--dc-espaco-4);
  padding: var(--dc-espaco-3);
  background: var(--dc-cor-superficie-invertida);
  color: var(--dc-cor-texto-em-acento);
  animation: dc-pop 0.3s ease-out;
}
.dc-toast[hidden] {
  display: none;
}
.dc-toast__quadrado {
  width: 0.625rem;
  height: 0.625rem;
  background: var(--dc-cor-destaque);
  flex: none;
}
.dc-toast__texto {
  font-size: var(--dc-fs-body);
  font-weight: var(--dc-peso-semibold);
}
.dc-toast__acao {
  box-shadow: none;
  border-color: var(--dc-cor-destaque);
  font-weight: var(--dc-peso-bold);
}
.dc-toast__acao:hover {
  border-color: var(--dc-cor-destaque-hover);
  transform: none;
  box-shadow: none;
}
@keyframes dc-pop {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* R42/C14 -- frase de ajuda do Shift-clique: 13px = --dc-fs-label (token
   exato, sem número mágico -- R19); cor "--text-2" do desenho é o mesmo
   --dc-cor-texto-fraco já usado em `.dc-cartao-preview__tipo`. */
.dc-slides__ajuda {
  font-family: var(--dc-fonte);
  font-size: var(--dc-fs-label);
  color: var(--dc-cor-texto-fraco);
  margin: 0 0 var(--dc-espaco-2);
}

.dc-tela__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: var(--dc-espaco-2);
  align-items: end;
  padding: var(--dc-espaco-3);
  border: var(--dc-borda-cartao);
  background: var(--dc-cor-superficie);
  margin-bottom: var(--dc-espaco-4);
}

.dc-tela__form .dc-campo {
  margin: 0;
}

.dc-tela__form-acoes {
  display: flex;
  gap: var(--dc-espaco-2);
}

/* grade de cartões de Projetos (R40) -- 20px do desenho não é degrau de
   8 (R36: 14/18/20 -> 16). */
.dc-tela__grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
  gap: var(--dc-espaco-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* estado vazio da busca (R40) -- mesma linguagem de `.dc-estado-vazio`,
   mas com o padding exato do desenho (64px = --dc-espaco-7, que
   `.dc-estado-vazio` compartilhado com T9 não usa -- por isso classe
   nova em vez de reaproveitar a existente). */
.dc-tela__vazio {
  border: 1px dashed var(--dc-cor-borda-forte);
  padding: var(--dc-espaco-7) var(--dc-espaco-4);
  text-align: center;
  color: var(--dc-cor-texto-fraco);
  font-size: var(--dc-fs-body-sm);
  line-height: var(--dc-lh-corpo);
}

.dc-tela__vazio .dc-botao--fantasma {
  border: 0;
  padding: 0;
  height: auto;
  text-decoration: underline;
  color: var(--dc-cor-acento);
}

/* animação de entrada de toda tela (C9) -- .3s, translateY(6px)->0,
   opacidade 0->1; `prefers-reduced-motion` já existe uma regra genérica
   mais abaixo no arquivo (botão primário) -- esta soma `.dc-in`. */
@keyframes dc-in {
  from {
    opacity: 0;
    transform: translateY(0.375rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.dc-in {
  animation: dc-in 0.3s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .dc-in {
    animation: none;
  }
}

/* ------------------------------------------------------------ cartão de
   projeto (R40) -- `<button>` de texto à esquerda dentro de `.dc-tela__grade`. */
.dc-cartao-projeto {
  text-align: left;
  font: inherit;
  cursor: pointer;
  background: var(--dc-cor-superficie);
  border: var(--dc-borda-cartao);
  padding: var(--dc-espaco-4);
  display: flex;
  flex-direction: column;
  gap: var(--dc-espaco-3);
  min-height: 12.25rem;
  color: var(--dc-cor-texto);
  transition: border-color var(--dc-transicao-rapida);
}

.dc-cartao-projeto:hover {
  border-color: var(--dc-cor-texto);
}

.dc-cartao-projeto__cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--dc-espaco-2);
}

/* 0.06em do desenho não tem token (só -0.02/0.08/-0.04/-0.05 existem em
   tema.css) -- usa o mais próximo já fechado por C8, --dc-espacamento-
   rotulo (0.08em); furo reportado no relatório de T8. */
.dc-cartao-projeto__cliente {
  font-size: var(--dc-fs-caption);
  font-weight: var(--dc-peso-semibold);
  letter-spacing: var(--dc-espacamento-rotulo);
  text-transform: uppercase;
  color: var(--dc-cor-texto-fraco);
}

.dc-cartao-projeto__etiqueta {
  font-size: var(--dc-fs-caption);
  font-weight: var(--dc-peso-semibold);
  padding: var(--dc-espaco-1) var(--dc-espaco-2);
  border: 1px solid var(--dc-cor-texto);
  white-space: nowrap;
}

/* 22px do desenho: sem --dc-fs-* exato (h3=20/h2=26); rem literal, mesmo
   padrão de `.dc-relatorio` (design.md §3/D2) -- regex de R19 só proíbe
   `px`, não `rem`. */
.dc-cartao-projeto__nome {
  font-size: 1.375rem;
  font-weight: var(--dc-peso-semibold);
  line-height: 1.2;
  flex: 1;
}

/* R28 fecha borda em 2 tons só (controle/cartão); o filete mais claro
   do desenho (E4E2D6) não sobra opção -- usa o mesmo tom da borda
   externa do cartão (--dc-borda-cartao), não o token genérico banido. */
.dc-cartao-projeto__rodape {
  display: flex;
  justify-content: space-between;
  font-size: var(--dc-fs-label);
  color: var(--dc-cor-texto-fraco);
  border-top: var(--dc-borda-cartao);
  padding-top: var(--dc-espaco-3);
}

/* ---------------------------------------------------------------- busca
   input[type=search] do topo de Projetos (R40) -- 300px do desenho vira
   rem (18.75rem), 11px/16px de padding batem no exemplo do próprio R36. */
.dc-busca {
  font: inherit;
  font-size: var(--dc-fs-body-sm);
  padding: var(--dc-espaco-2) var(--dc-espaco-3);
  width: 18.75rem;
  max-width: 100%;
  border: var(--dc-borda-controle);
  background: var(--dc-cor-superficie);
  color: var(--dc-cor-texto);
}

.dc-busca:focus-visible {
  outline: none;
  box-shadow: var(--dc-sombra-foco);
}

/* ------------------------------------------------------------ zona de
   soltar (R41) -- tracejada 2px chumbo, 340px de altura mínima (rem
   literal), ícone 64x64 Verde Tech cercado (R32(d), contexto já
   pré-declarado -- T8 é quem implementa). */
.dc-zona-soltar {
  font: inherit;
  color: var(--dc-cor-texto);
  border: var(--dc-borda-controle-tracejada);
  background: var(--dc-cor-superficie);
  min-height: 21.25rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--dc-espaco-3);
  padding: var(--dc-espaco-5);
  text-align: center;
  cursor: pointer;
  transition: background var(--dc-transicao-fase);
}

.dc-zona-soltar:hover,
.dc-zona-soltar--sobre {
  background: var(--dc-cor-superficie-hover);
}

.dc-zona-soltar__icone {
  width: var(--dc-espaco-7);
  height: var(--dc-espaco-7);
  border: var(--dc-borda-controle);
  background: var(--dc-cor-destaque);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dc-zona-soltar__icone svg {
  stroke: currentColor;
  fill: none;
}

/* 22px sem token exato -- mesmo tratamento do nome do cartão acima. */
.dc-zona-soltar__titulo {
  font-size: 1.375rem;
  font-weight: var(--dc-peso-semibold);
}

.dc-zona-soltar__ajuda {
  font-size: var(--dc-fs-body-sm);
  color: var(--dc-cor-texto-fraco);
  line-height: var(--dc-lh-corpo);
  max-width: 23.75rem;
}

.dc-zona-soltar__link {
  font-weight: var(--dc-peso-semibold);
  text-decoration: underline;
  color: var(--dc-cor-acento);
}

/* -------------------------------------------------------- lista de
   arquivos da pasta (R41) -- cabeçalho + <ul> + rodapé; ids
   `#lista-reconhecidos`/`#lista-ignorados` continuam existindo (C9), só
   ganham esta roupa nova por fora. */
.dc-lista-arquivos {
  border: var(--dc-borda-cartao);
  background: var(--dc-cor-superficie);
}

.dc-lista-arquivos__cabecalho {
  padding: var(--dc-espaco-3);
  border-bottom: var(--dc-borda-cartao);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--dc-espaco-2);
}

.dc-lista-arquivos__nome {
  font-size: var(--dc-fs-body-sm);
  font-weight: var(--dc-peso-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dc-lista-arquivos__selo {
  font-size: var(--dc-fs-caption);
  font-weight: var(--dc-peso-semibold);
  padding: var(--dc-espaco-1) var(--dc-espaco-2);
  border: 1px solid var(--dc-cor-texto);
  white-space: nowrap;
}

.dc-lista-arquivos ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* mesmo caso do rodapé do cartão de projeto: R28 não deixa o filete
   claro (E4E2D6) sobreviver como borda -- usa --dc-borda-cartao. */
.dc-lista-arquivos__linha {
  display: flex;
  align-items: center;
  gap: var(--dc-espaco-3);
  padding: var(--dc-espaco-2) var(--dc-espaco-3);
  border-bottom: var(--dc-borda-cartao);
  font-size: var(--dc-fs-body-sm);
}

/* 44px/11px sem token exato -- rem literal (mesmo padrão do nome do
   cartão); a cor por extensão do desenho não entra: R41 só pede borda
   1px, nenhuma cor por tipo tem token -- selo neutro (furo reportado). */
.dc-lista-arquivos__ext {
  font-size: 0.6875rem;
  font-weight: var(--dc-peso-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  width: 2.75rem;
  text-align: center;
  padding: var(--dc-espaco-1) 0;
  border: 1px solid var(--dc-cor-texto);
  color: var(--dc-cor-texto);
}

.dc-lista-arquivos__detalhe {
  flex: 1;
  min-width: 0;
}

.dc-lista-arquivos__detalhe-nome {
  display: block;
  font-weight: var(--dc-peso-medio);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dc-lista-arquivos__erro {
  display: block;
  font-size: var(--dc-fs-label);
  font-weight: var(--dc-peso-semibold);
  color: var(--dc-cor-erro);
  margin-top: 0.125rem;
}

.dc-lista-arquivos__meta {
  font-size: var(--dc-fs-label);
  color: var(--dc-cor-texto-fraco);
  white-space: nowrap;
}

/* R41/T8b -- coluna meta do arquivo ignorado ("ignorado"/"ilegível") e nome
   apagado da linha ignorada; sem fundo (--dc-cor-erro-* não existe -- ver
   RELATORIO-T8B.md seção 6). */
.dc-lista-arquivos__meta--ilegivel {
  color: var(--dc-cor-erro);
  font-weight: var(--dc-peso-semibold);
}

.dc-lista-arquivos__meta--ignorado {
  color: var(--dc-cor-texto-fraco);
}

.dc-lista-arquivos__linha--ignorado .dc-lista-arquivos__detalhe-nome {
  color: var(--dc-cor-texto-fraco);
}

.dc-lista-arquivos__remover {
  font: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--dc-cor-texto-fraco);
  font-size: var(--dc-fs-body);
  line-height: 1;
  padding: var(--dc-espaco-1);
}

.dc-lista-arquivos__remover:hover {
  color: var(--dc-cor-erro);
}

.dc-lista-arquivos__rodape {
  padding: var(--dc-espaco-3);
  background: var(--dc-cor-superficie-hover);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--dc-espaco-2);
  flex-wrap: wrap;
}

.dc-lista-arquivos__resumo {
  font-size: var(--dc-fs-label);
  font-weight: var(--dc-peso-semibold);
  color: var(--dc-cor-acento);
  line-height: var(--dc-lh-corpo);
}

.dc-lista-arquivos__resumo-secundario {
  display: block;
  font-weight: var(--dc-peso-medio);
  color: var(--dc-cor-texto-fraco);
}

/* T10a -- Resultados: estrutura */

/* R44: 1360px do desenho; a moldura .dc-tela de hoje e 72rem. */
#secao-estudo[data-tela="resultados"] {
  max-width: 85rem;
}

/* C-T10a.7/ANEXO E3 -- MESMO mecanismo que #acoes-slides/.dc-atalhos-slides:
   nasce escondido (nenhum atributo `hidden` estático no HTML) e só aparece
   com `data-tela="resultados"` -- nunca `hidden` solto por JS pra
   mostrar/esconder entre telas. `:not([hidden])` (decisão de builder --
   nenhum caso do ANEXO E3 combinava `hidden` com `data-tela`) é o que
   mantém efeito real o único `#resultados.hidden = true` que o próprio
   C-T10a.7 manda escrever, no ramo de erro de `abrirResultados`: sem o
   guard, a regra `display: block` daqui venceria incondicionalmente o
   `[hidden]{display:none}` do agente de usuário (origem autor sempre
   vence origem UA na cascata, com qualquer especificidade) e o `hidden =
   true` do erro não teria efeito nenhum. .dc-resultados__principal é a
   coluna esquerda (R44 -- grade de duas colunas com o <aside> de T10b);
   sem o painel ainda, T10a só reserva o gancho de bloco (decisão de
   builder -- C-T10a.1/.8 não trazem regra própria pra ela; F3 exige
   seletor pra toda classe dc-* do HTML) -- a grade de duas colunas fica
   para T10b. */
.dc-resultados {
  display: none;
}
[data-tela="resultados"] .dc-resultados:not([hidden]) {
  display: block;
}

.dc-resultados__principal {
  display: block;
}

.dc-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--dc-cor-borda-forte);
  background: var(--dc-cor-superficie);
  margin-bottom: 1.75rem;
}

.dc-kpi {
  padding: 1.125rem 1.375rem;
  border-right: 1px solid var(--dc-cor-borda-forte);
}
.dc-kpi:last-child {
  border-right: 0;
}

.dc-kpi__rotulo {
  display: block;
  font-size: var(--dc-fs-caption);
  font-weight: var(--dc-peso-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dc-cor-texto-fraco);
}

.dc-kpi__numero {
  display: block;
  font-size: 2.5rem;
  font-weight: var(--dc-peso-bold);
  letter-spacing: var(--dc-espacamento-titulo);
  line-height: 1.1;
  font-feature-settings: "tnum";
}

.dc-kpi--batem {
  background: var(--dc-cor-superficie-hover);
}
.dc-kpi--batem .dc-kpi__rotulo,
.dc-kpi--batem .dc-kpi__numero {
  color: var(--dc-cor-acento);
}

.dc-kpi--divergencia {
  background: var(--dc-cor-superficie-invertida);
  color: var(--dc-cor-fundo);
}
.dc-kpi--divergencia .dc-kpi__rotulo {
  color: var(--dc-cor-destaque);
}

/* R3 (spec UI 09/09) -- 4º KPI "Não conferidos", mesmo padrão visual do
   KPI "Com divergência" (fundo invertido), rótulo na cor de alerta (ocre,
   a mesma da 4ª cor da legenda/estado nao_conferido -- D1). */
.dc-kpi--nao-conferidos {
  background: var(--dc-cor-superficie-invertida);
  color: var(--dc-cor-fundo);
}
.dc-kpi--nao-conferidos .dc-kpi__rotulo {
  color: var(--dc-cor-alerta);
}

.dc-kpi__sufixo {
  font-size: 0.9375rem;
  font-weight: var(--dc-peso-medio);
  color: var(--dc-cor-borda-forte);
}

.dc-tabela-slides {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 1.25rem 1rem;
}

.dc-slide-resultado {
  font: inherit;
  cursor: pointer;
  padding: 0;
  text-align: left;
  border: 0;
  background: none;
  display: flex;
  flex-direction: column;
  gap: var(--dc-espaco-2);
  color: inherit;
}

.dc-slide-resultado__moldura {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--dc-cor-superficie);
  border: 1px solid var(--dc-cor-borda-forte);
  overflow: hidden;
}

.dc-slide-resultado--divergente .dc-slide-resultado__moldura {
  border-color: var(--dc-cor-erro);
}

.dc-slide-resultado--ativo .dc-slide-resultado__moldura {
  border-color: var(--dc-cor-texto);
  box-shadow: 0 0 0 3px var(--dc-cor-destaque);
}

.dc-slide-resultado__miniatura {
  display: block;
  width: 100%;
  height: 100%;
}
.dc-slide-resultado__miniatura img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dc-slide-resultado__estado {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.25rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: var(--dc-peso-bold);
  letter-spacing: .02em;
}

.dc-slide-resultado--divergente .dc-slide-resultado__estado {
  background: var(--dc-cor-erro);
  color: var(--dc-cor-fundo);
}
.dc-slide-resultado--bate .dc-slide-resultado__estado {
  background: var(--dc-cor-destaque);
  color: var(--dc-cor-texto);
}
.dc-slide-resultado--sem-numeros .dc-slide-resultado__estado {
  background: var(--dc-cor-borda);
  color: var(--dc-cor-texto);
}
.dc-slide-resultado--nao-conferido .dc-slide-resultado__estado {
  background: var(--dc-cor-alerta);
  color: var(--dc-cor-fundo);
}

.dc-slide-resultado__linha {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: var(--dc-fs-caption);
  font-weight: var(--dc-peso-semibold);
  color: var(--dc-cor-texto-fraco);
}

/* decisão de builder (C-T10a.2 gera estes dois filhos; F3 exige seletor
   pra classe dc-* que o JS gera) -- mesma lógica de .dc-conferindo__fase
   (T9b): só marcam o nó, tipografia/cor já vêm do pai .dc-slide-
   resultado__linha por herança, sem repetir a duplicação que
   .dc-cartao-preview__numero/__tipo (T9a) precisou porque
   .dc-cartao-preview__linha não carrega font-size/cor. */
.dc-slide-resultado__numero,
.dc-slide-resultado__tipo {
  font-weight: inherit;
}

/* T10b -- Resultados: painel de detalhe */

.dc-resultados {
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 2rem;
  align-items: start;
}

/* decisão de builder -- especificidade, não ordem: a regra de T10a acima
   (`[data-tela="resultados"] .dc-resultados:not([hidden])`, 1 atributo + 1
   classe + 1 atributo dentro de :not() = 0-3-0) bate a `.dc-resultados`
   simples (0-1-0) pra `display` mesmo esta vindo depois no arquivo -- a
   cascata só desempata por ordem quando a especificidade é IGUAL, e
   especificidade sempre vence ordem. Repete aqui o MESMO seletor de T10a
   (nunca edita a regra do dono do produto, só herda a especificidade) pra trocar
   `display: block` por `display: grid` quando a tela realmente está
   visível; sem isto a grade de duas colunas nunca aparece na tela. */
[data-tela="resultados"] .dc-resultados:not([hidden]) {
  display: grid;
}

.dc-painel-slide {
  position: sticky;
  top: 5.5rem;
  border: 1px solid var(--dc-cor-borda-forte);
  background: var(--dc-cor-superficie);
}

@media (max-width: 1023.98px) {
  .dc-resultados {
    grid-template-columns: minmax(0, 1fr);
  }
  .dc-painel-slide {
    order: -1;
    position: static;
  }
}

/* decisão de builder -- wrapper puro que só alterna via `hidden` nativo
   (mesmo cuidado do ANEXO E4 em #resultados): nenhuma declaração de
   `display` aqui, senão a regra de autor venceria `[hidden]{display:none}`
   do agente de usuário por origem/importância, antes de especificidade,
   e o painel nunca sumiria. O seletor só existe para F3 (toda classe dc-*
   do HTML tem regra em dc.css); nada visual pendurado nela. */
.dc-painel-slide__detalhe {
  color: inherit;
}

.dc-painel-slide__vazio {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--dc-cor-texto-fraco);
  font-size: 0.9375rem;
  line-height: var(--dc-lh-corpo);
}

.dc-painel-slide__icone {
  width: 44px;
  height: 44px;
  opacity: .4;
  margin-bottom: 0.75rem;
}

.dc-painel-slide__convite {
  margin: 0;
}

/* R12 (spec UI 09/09) -- a legenda saiu de dentro de #painel-slide-vazio e
   virou rodapé do próprio <aside> (sempre visível, com slide selecionado ou
   não); border-top separa do conteúdo de cima em qualquer um dos dois
   estados. */
.dc-legenda {
  list-style: none;
  margin: 0;
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--dc-cor-borda-forte);
  text-align: left;
  font-size: 0.8125rem;
  display: grid;
  gap: var(--dc-espaco-2);
}

.dc-legenda__item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.dc-legenda__cor {
  width: 14px;
  height: 14px;
  display: inline-block;
  flex: none;
}

.dc-legenda__cor--divergente {
  background: var(--dc-cor-erro);
}
.dc-legenda__cor--bate {
  background: var(--dc-cor-destaque);
  border: 1px solid var(--dc-cor-texto);
}
.dc-legenda__cor--sem-numeros {
  background: var(--dc-cor-borda);
}
.dc-legenda__cor--nao-conferido {
  background: var(--dc-cor-alerta);
}

.dc-painel-slide__cabecalho {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1rem 0.875rem 1.25rem;
  border-bottom: 1px solid var(--dc-cor-borda-forte);
}

.dc-painel-slide__titulo {
  font-size: 1.25rem;
  font-weight: var(--dc-peso-bold);
  letter-spacing: var(--dc-espacamento-titulo);
}

.dc-painel-slide__selo {
  font-size: var(--dc-fs-caption);
  font-weight: var(--dc-peso-semibold);
  padding: 0.1875rem 0.5rem;
  border: 1px solid var(--dc-cor-texto);
}

.dc-painel-slide__selo--divergente {
  background: var(--dc-cor-erro);
  color: var(--dc-cor-fundo);
}
.dc-painel-slide__selo--bate {
  background: var(--dc-cor-destaque);
  color: var(--dc-cor-texto);
}
.dc-painel-slide__selo--sem-numeros {
  background: var(--dc-cor-borda);
  color: var(--dc-cor-texto);
}
.dc-painel-slide__selo--nao-conferido {
  background: var(--dc-cor-alerta);
  color: var(--dc-cor-fundo);
}

.dc-painel-slide__botoes {
  margin-left: auto;
  display: flex;
  gap: 0.25rem;
}

.dc-painel-slide__botao {
  font: inherit;
  font-size: 0.875rem;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--dc-cor-texto);
  background: var(--dc-cor-superficie);
  color: var(--dc-cor-texto);
  cursor: pointer;
}
.dc-painel-slide__botao:hover {
  background: var(--dc-cor-superficie-hover);
}
.dc-painel-slide__botao:disabled {
  opacity: .4;
  cursor: default;
}

.dc-painel-slide__miniatura {
  margin: 1rem 1.25rem 0;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--dc-cor-borda-forte);
  background: var(--dc-cor-superficie);
  overflow: hidden;
}
.dc-painel-slide__miniatura img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dc-painel-slide__linha {
  margin: 0;
  padding: 1rem 1.25rem 0.5rem;
  font-size: var(--dc-fs-caption);
  font-weight: var(--dc-peso-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dc-cor-texto-fraco);
}

.dc-painel-slide__cartoes {
  display: grid;
  gap: 0.75rem;
  margin: 0 1.25rem;
}

/* RE13/CONTRATO 10 (emenda 14/09, 2ª) -- nunca vaza do painel: o cartão
   inteiro (e cada texto dentro dele) quebra linha em vez de esticar a
   largura. */
.dc-cartao-celula {
  border: 1px solid var(--dc-cor-borda-forte);
  background: var(--dc-cor-superficie);
  min-width: 0;
  overflow-wrap: anywhere;
}
.dc-cartao-celula--divergente {
  border-color: var(--dc-cor-erro);
}
.dc-cartao-celula--nao-conferivel {
  border-color: var(--dc-cor-alerta);
}
.dc-cartao-celula--pleno {
  background: var(--dc-cor-superficie-alta);
}

.dc-cartao-celula__cabecalho {
  display: flex;
  justify-content: space-between;
  gap: var(--dc-espaco-2);
  flex-wrap: wrap;
  padding: 0.625rem 0.875rem;
}
.dc-cartao-celula--divergente .dc-cartao-celula__cabecalho,
.dc-cartao-celula--nao-conferivel .dc-cartao-celula__cabecalho {
  border-bottom: 1px solid var(--dc-cor-borda-forte);
}

.dc-cartao-celula__rotulo {
  font-size: 0.875rem;
  font-weight: var(--dc-peso-semibold);
  min-width: 0;
  overflow-wrap: anywhere;
}

.dc-cartao-celula__endereco {
  font-size: var(--dc-fs-caption);
  color: var(--dc-cor-texto-fraco);
}

/* RE13/CONTRATO 10 -- 2 colunas ("No slide"/"Na base"), sem Δ (a coluna
   ficava com "+10 (+1,1%)"; saiu por completo, D10). */
.dc-cartao-celula__grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  font-feature-settings: "tnum";
}
/* R6/D4 (spec UI 09/09) -- cartão não conferível: grade PRÓPRIA de 1
   coluna ("No slide"), nunca a de 3 colunas com 2 vazias (buraco
   visual). */
.dc-cartao-celula__grade--nc {
  grid-template-columns: minmax(0, 1fr);
}

.dc-cartao-celula__coluna {
  padding: 0.625rem 0.875rem;
  border-right: 1px solid var(--dc-cor-borda-forte);
}
.dc-cartao-celula__coluna:last-child {
  border-right: 0;
}

.dc-cartao-celula__rotulo-valor {
  display: block;
  font-size: 0.6875rem;
  font-weight: var(--dc-peso-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dc-cor-texto-fraco);
}

.dc-cartao-celula__valor {
  display: block;
  font-size: 1.25rem;
  font-weight: var(--dc-peso-bold);
  letter-spacing: var(--dc-espacamento-titulo);
}
.dc-cartao-celula__valor--base {
  color: var(--dc-cor-acento);
}
.dc-cartao-celula__valor--slide {
  color: var(--dc-cor-erro);
}

.dc-cartao-celula__onde {
  margin: 0;
  padding: 0.5rem 0.875rem 0;
  font-size: 0.8125rem;
  color: var(--dc-cor-texto-fraco);
  line-height: var(--dc-lh-corpo);
}

/* RE13/CONTRATO 10 (emenda 14/09, 2ª) -- o endereço legível é a informação
   mais forte depois do título: peso/tamanho de corpo, cor de texto normal
   (nunca a cor fraca da linha de rodapé de antes), padding igual ao
   cabeçalho. Soma com `.dc-cartao-celula__onde` no mesmo `<p>` (mesma
   ordem de cascata -- as duas classes ficam no elemento). */
.dc-cartao-celula__onde--destaque {
  font: var(--dc-texto-corpo);
  font-weight: var(--dc-peso-semibold);
  color: var(--dc-cor-texto);
  padding: 0.625rem 0.875rem;
  text-transform: none;
}

/* RE13/CONTRATO 10 -- causa (+ marca) numa linha própria abaixo dos
   números; o visual é o mesmo que `.dc-cartao-celula__onde` tinha antes de
   virar o endereço em destaque. */
.dc-cartao-celula__causa {
  margin: 0;
  padding: 0.5rem 0.875rem 0;
  font-size: 0.8125rem;
  color: var(--dc-cor-texto-fraco);
  line-height: var(--dc-lh-corpo);
}

/* R6/D4 (spec UI 09/09) -- "Não conferido · <causa> · confira este número
   à mão.": mesma cor de alerta do cartão (border-color de
   `.dc-cartao-celula--nao-conferivel`), texto sempre visível (nunca cor
   sozinha como sinal -- a palavra "Não conferido" já está escrita). */
.dc-cartao-celula__aviso {
  margin: 0;
  padding: 0.5rem 0.875rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: var(--dc-peso-semibold);
  color: var(--dc-cor-alerta);
  line-height: var(--dc-lh-corpo);
}

.dc-cartao-celula__acoes {
  margin: 0;
  padding: 0.625rem 0.875rem 0.75rem;
}

.dc-cartao-celula__copiar {
  font: inherit;
  font-size: var(--dc-fs-caption);
  font-weight: var(--dc-peso-semibold);
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--dc-cor-texto);
  background: var(--dc-cor-superficie);
  color: var(--dc-cor-texto);
  cursor: pointer;
}
.dc-cartao-celula__copiar:hover {
  background: var(--dc-cor-superficie-hover);
}

.dc-painel-slide__rodape {
  padding: 0.5rem 1.25rem 1.25rem;
  font-size: 0.8125rem;
  color: var(--dc-cor-texto-fraco);
  line-height: var(--dc-lh-corpo);
}
.dc-painel-slide__como {
  display: inline;
}
.dc-painel-slide__como-summary {
  display: inline;
  cursor: pointer;
  font-weight: var(--dc-peso-semibold);
  color: var(--dc-cor-acento);
  text-decoration: underline;
  list-style: none;
}
.dc-painel-slide__como-summary::-webkit-details-marker {
  display: none;
}
.dc-painel-slide__como-texto {
  margin: var(--dc-espaco-2) 0 0;
  color: var(--dc-cor-texto);
}

/* ---- emenda G (T17): escala das telas */
/* [aprovado 08/09 16:41] "o mock inteiro": cada medida abaixo é a do desenho
   (requisitos.md BLOCO G, itens 1-27; design.md D-T17.2/.3/.6). Esta seção
   SOBRESCREVE por cascata as regras acima -- nada acima foi editado, e T18
   (Pasta e Slides) e T19 (Conferindo e Resultados) acrescentam as suas
   DEPOIS desta. rem literal = px do desenho / 16 (R19 só proíbe px). */

/* itens 1-3 (G-c): cabeçalho 0 40 / gap 32; wordmark 22; selo 2 6 3 5, gap e margem 3 */
.dc-cabecalho {
  gap: 2rem;              /* 32px do desenho */
  padding: 0 2.5rem;      /* 40px do desenho */
}
.dc-marca__nome {
  font-size: 1.375rem;    /* 22px do desenho; line-height 1 já vem da regra base = 22px */
}
.dc-marca__selo {
  gap: 0.1875rem;                                       /* 3px do desenho */
  margin-left: 0.1875rem;                               /* 3px do desenho */
  padding: 0.125rem 0.375rem 0.1875rem 0.3125rem;       /* 2 6 3 5 do desenho */
  font-size: 1.375rem;                                  /* 22px do desenho */
}

/* item 4: passo do stepper 0 14 */
.dc-stepper__passo {
  padding: 0 0.875rem;    /* 14px do desenho */
}

/* item 5 (mock l.1293-1294, D-T17.2): passo/número FUTURO em --dc-cor-texto-apagado, nº com fundo transparente */
.dc-stepper__passo[data-estado="afrente"] {
  color: var(--dc-cor-texto-apagado);
}
.dc-stepper__passo[data-estado="afrente"] .dc-stepper__num {
  border-color: var(--dc-cor-texto-apagado);
  color: var(--dc-cor-texto-apagado);
  background: transparent;
}

/* item 6 (mock l.1294): nº PERCORRIDO em --dc-cor-fundo (#F6F5EE), não papel */
.dc-stepper__passo[data-estado="percorrido"] .dc-stepper__num {
  color: var(--dc-cor-fundo);
}

/* item 7 (mock l.899): "Sair" 13/600, 7 12, borda 1px cinza, transparente, texto chumbo -> 49.5x35.5 */
.dc-cabecalho #btn-sair {
  height: auto;
  padding: 0.4375rem 0.75rem;         /* 7px 12px do desenho */
  font-size: 0.8125rem;               /* 13px do desenho */
  font-weight: var(--dc-peso-semibold);
  line-height: var(--dc-lh-corpo);    /* 1.5, herdado do body no mock (D-T17.6b) */
  color: var(--dc-cor-texto);
  background: transparent;
  border: 1px solid var(--dc-cor-borda-forte);
}
.dc-cabecalho #btn-sair:hover {
  background: var(--dc-cor-superficie-hover);
  color: var(--dc-cor-texto);
}

/* item 8 (mock l.815, G-g -- R21 derrubada): foco = anel sólido 3px verde escuro a 2px, sem sombra */
*:focus-visible {
  outline: 3px solid var(--dc-cor-acento);
  outline-offset: 2px;
  box-shadow: none;
}
.dc-busca:focus-visible {
  outline: 3px solid var(--dc-cor-acento);
  outline-offset: 2px;
  box-shadow: none;
}
.dc-cartao-preview:focus-visible {
  outline-width: 3px;
}

/* item 9: moldura 1200 com padding 48 40 120 (conteúdo 1120). Slides mantém
   padding-bottom 10rem ([data-tela="slides"].dc-tela, mais específico, l.1549);
   Resultados mantém max-width 85rem (#secao-estudo[data-tela="resultados"], T10a). */
.dc-tela {
  max-width: 75rem;                    /* 1200px do desenho */
  padding: 3rem 2.5rem 7.5rem;         /* 48 40 120 do desenho */
}

/* item 10 (G-a -- P5 derrubada só no título): h1 das telas em 40, lh 42, -0.02em (token já) */
.dc-tela__titulo {
  font-size: var(--dc-fs-h1-tela);
  line-height: 1.05;                   /* 42px / 40px do desenho */
}

/* item 11: margem entre o topo e o conteúdo, por tela -- Projetos 36, Slides 28,
   Resultados 28 no .dc-tela__topo; Pasta 36 e Conferindo 12 no próprio h1
   (topo com margem 0 nessas duas: é onde o desenho e o oráculo medem). */
[data-tela="projetos"] .dc-tela__topo {
  margin-bottom: 2.25rem;              /* 36px do desenho */
}
[data-tela="slides"] .dc-tela__topo,
[data-tela="resultados"] .dc-tela__topo {
  margin-bottom: 1.75rem;              /* 28px do desenho */
}
[data-tela="pasta"] .dc-tela__topo,
[data-tela="conferindo"] .dc-tela__topo {
  margin-bottom: 0;
}
[data-tela="pasta"] .dc-tela__titulo {
  margin: 0 0 2.25rem;                 /* 36px do desenho */
}
[data-tela="conferindo"] .dc-tela__titulo {
  margin: 0 0 0.75rem;                 /* 12px do desenho */
}

/* D-T17.3 (G-h): escala de botões SOB .dc-tela -- a base .dc-botao (l.435) e o
   login não mudam. Ordem importa: base das telas, depois as variantes, depois
   os casos que precisam vencer a base em igual especificidade. */
.dc-tela .dc-botao {
  height: auto;
  padding: 0.625rem 1rem;              /* 10px 16px do desenho */
  font-size: 0.875rem;                 /* 14px do desenho */
  font-weight: var(--dc-peso-semibold);
  line-height: var(--dc-lh-corpo);     /* 1.5 -- sem isto cada botão fica ~3,5px baixo (D-T17.3) */
}
.dc-tela .dc-botao--secundario {
  border: 1px solid var(--dc-cor-texto);
  background: var(--dc-cor-superficie);
}
.dc-tela .dc-botao--secundario:hover {
  background: var(--dc-cor-superficie-hover);
}
.dc-tela .dc-botao--primario {
  padding: 0.6875rem 1.25rem;          /* 11px 20px do desenho */
  font-size: 0.9375rem;                /* 15px do desenho */
  font-weight: var(--dc-peso-bold);
}
/* item 27 (parte): "Limpar busca" redeclarado DEPOIS da base para vencê-la (mesma
   especificidade 0,2,0) -- 15/600 sublinhado verde escuro, sem borda/fundo/padding */
.dc-tela__vazio .dc-botao--fantasma {
  padding: 0;
  border: 0;
  height: auto;
  font-size: 0.9375rem;                /* 15px do desenho */
  font-weight: var(--dc-peso-semibold);
  line-height: var(--dc-lh-corpo);
  background: transparent;
  text-decoration: underline;
  color: var(--dc-cor-acento);
}

/* ---- emenda G (T17b): Projetos byte a byte */
.dc-marca__simbolo {
  margin-right: 0.75rem; /* 12px do desenho -- item 3b */
}

/* itens 13-20: grade 20, cartao cheio com gap 20, cabecalho 12, cliente .06em,
   etiqueta 3 8 com fundo por data-etiqueta (CONTRATO 16; mock l.1306; R32(f), G-i),
   nome -0.01em, rodape com filete claro e 14 em cima, hover branco */
.dc-tela__grade {
  gap: 1.25rem;                        /* 20px do desenho */
}
.dc-cartao-projeto {
  width: 100%;
  gap: 1.25rem;                        /* 20px do desenho */
}
.dc-cartao-projeto:hover {
  background: var(--dc-cor-branco);
}
.dc-cartao-projeto__cabecalho {
  gap: 0.75rem;                        /* 12px do desenho */
}
.dc-cartao-projeto__cliente {
  letter-spacing: 0.06em;
}
.dc-cartao-projeto__etiqueta {
  padding: 0.1875rem 0.5rem;           /* 3px 8px do desenho -> 47x26 */
}
.dc-cartao-projeto__etiqueta[data-etiqueta="ativo"] {
  background: var(--dc-cor-destaque);  /* limao com o cerco 1px chumbo da regra base -- R32(f) */
}
.dc-cartao-projeto__etiqueta[data-etiqueta="pausado"] {
  background: var(--dc-cor-fundo);
}
.dc-cartao-projeto__etiqueta[data-etiqueta="interno"] {
  background: var(--dc-cor-superficie-invertida);
  color: var(--dc-cor-fundo);
}
.dc-cartao-projeto__nome {
  letter-spacing: -0.01em;
}
.dc-cartao-projeto__rodape {
  border-top: 1px solid var(--dc-cor-filete);
  padding-top: 0.875rem;               /* 14px do desenho */
}

/* itens 21-22 (G-f): busca 15px 11 16 (300x48.5); "Novo projeto" 11 18 (130x48.5;
   15/700 e a borda 2px ja vem de .dc-tela .dc-botao--primario e da base) */
.dc-busca {
  font-size: 0.9375rem;                /* 15px do desenho */
  padding: 0.6875rem 1rem;             /* 11px 16px do desenho */
  line-height: var(--dc-lh-corpo);
}
#btn-novo-projeto {
  padding: 0.6875rem 1.125rem;         /* 11px 18px do desenho */
}

/* itens 23-26 (mock l.919): formulario gap 12 / padding 20 (as 3 faixas ficam as
   da regra base -- 447/447/160 saem sozinhas); rotulo 13/600 chumbo em bloco;
   o campo e FILHO do label no produto (o mock poe o label ao lado) -- por isso o
   6px entre rotulo e campo entra como margin-top do input (item 24, correcao
   de despacho 08/09); campo 15px 10 12 em --dc-cor-fundo (46.5); botoes 14px
   10 14 (45), Cancelar 600 com borda 2px, Criar 700 */
.dc-tela__form {
  gap: 0.75rem;                        /* 12px do desenho */
  padding: 1.25rem;                    /* 20px do desenho */
}
.dc-tela__form .dc-campo {
  display: block;
  gap: normal;
  margin: 0;
  font-size: 0.8125rem;                /* 13px do desenho */
  font-weight: var(--dc-peso-semibold);
  line-height: var(--dc-lh-corpo);
  color: var(--dc-cor-texto);
}
.dc-tela__form .dc-campo-texto {
  display: block;
  width: 100%;
  margin-top: 0.375rem;                /* 6px do desenho (margin-bottom do label no mock) */
  padding: 0.625rem 0.75rem;           /* 10px 12px do desenho */
  font-size: 0.9375rem;                /* 15px do desenho */
  line-height: var(--dc-lh-corpo);
  background: var(--dc-cor-fundo);
}
.dc-tela__form .dc-botao {
  padding: 0.625rem 0.875rem;          /* 10px 14px do desenho */
  font-size: 0.875rem;                 /* 14px do desenho */
}
.dc-tela__form .dc-botao--secundario {
  border: var(--dc-borda-controle);    /* Cancelar: 2px chumbo no mock */
  font-weight: var(--dc-peso-semibold);
}
.dc-tela__form .dc-botao--primario {
  font-weight: var(--dc-peso-bold);
}

/* item 27 (mock l.938): vazio 15px (o resto -- 64 24, tracejado, cor, centro -- ja bate) */
.dc-tela__vazio {
  font-size: 0.9375rem;                /* 15px do desenho */
}

/* ---- emenda G (T18): Pasta e Slides */
/* [aprovado 08/09 16:41] + [aprovado 08/09 16:28] (Pasta em duas colunas). requisitos.md
   BLOCO G itens 28-47; design D-T17.4/.5/.8/.9/.10. Mesmo protocolo da emenda T17:
   SO acrescenta, no fim do arquivo; vence o que esta acima por ordem/especificidade;
   nenhuma string de seletor da secao T17 se repete aqui (test_t17_escala). rem
   literal = px do desenho / 16. T18a = Pasta (itens 28-38) + R39 de pasta e slides;
   T18b = Slides (itens 39-47), acrescentada DEPOIS do fim desta parte. */

/* R39 (D-T17.4): o que Pasta e Slides NAO mostram -- regra CSS por data-tela,
   nunca `hidden` por JS (CONTRATO 9). O bloco literal de conferindo (l.1615-1622)
   segue intocado; resultados e T19. */
[data-tela="pasta"] #secao-preview,
[data-tela="pasta"] #secao-rodada,
[data-tela="pasta"] #secao-historico {
  display: none;
}

[data-tela="slides"] #secao-upload {
  display: none;
}

/* FIX 09/09/2026 (defeito relatado pelo dono do produto: "não consigo ver rodadas
   passadas ainda") -- `#secao-historico` estava em `display: none` nas
   QUATRO telas do estudo (pasta l.2960, slides aqui, conferindo l.1635,
   resultados l.3371), ou seja: a lista "Rodadas anteriores" era montada
   pelo JS e nunca aparecia em lugar nenhum. Volta a aparecer em SLIDES --
   a tela onde se decide rodar, e o destino do "← Slides" de Resultados.
   Conferindo e Resultados seguem escondendo (decisão de tela cheia, R39);
   Pasta também, porque lá o estudo ainda nem tem insumos. */

/* item 28 / D-T17.3: "<- Projetos" (pasta) e "<- Pasta" (slides) viram link
   14/600 verde escuro, sem borda/fundo/padding, mb 20 -> h 21. (1,1,0) vence
   `.dc-tela .dc-botao` (0,2,0) e o :hover do fantasma. */
[data-tela="pasta"] #btn-voltar,
[data-tela="slides"] #btn-voltar {
  height: auto;
  min-height: 0;
  margin: 0 0 1.25rem;                     /* 20px do desenho */
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--dc-cor-acento);
  font-size: var(--dc-fs-body-sm);         /* 14px do desenho */
  font-weight: var(--dc-peso-semibold);
  line-height: var(--dc-lh-corpo);
}

[data-tela="pasta"] #btn-voltar:hover,
[data-tela="slides"] #btn-voltar:hover {
  background: transparent;
  color: var(--dc-cor-acento);
}

/* item 29 / D-T17.5: Pasta em duas colunas 593.45 x 494.53 (1120 - 32), gap 32;
   `#secao-upload` perde a moldura de .dc-secao. Zona e erro na coluna 1, a caixa
   de arquivos na coluna 2 linha 1; os filhos `hidden` (input, botao) nao ocupam
   celula ([hidden]{display:none !important}, l.82). */
[data-tela="pasta"] #secao-upload {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 2rem;                               /* 32px do desenho */
  align-items: start;
  padding: 0;
  border: 0;
  background: none;
}

[data-tela="pasta"] #secao-upload > .dc-zona-soltar {
  grid-column: 1;
}

[data-tela="pasta"] #secao-upload > #resultado-upload {
  grid-column: 2;
  grid-row: 1;
}

[data-tela="pasta"] #secao-upload > #insumos-erro {
  grid-column: 1;
}

/* R36: abaixo de 1024px vira uma coluna (seletor com `.dc-secao` para nao repetir
   a string de cima no dicionario dos testes). */
@media (max-width: 64rem) {
  [data-tela="pasta"] #secao-upload.dc-secao {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-tela="pasta"] #secao-upload.dc-secao > #resultado-upload {
    grid-column: 1;
    grid-row: auto;
  }
}

/* item 30: zona -- padding 40, hover limao lavado, icone 28, titulo tracking -1%,
   ajuda/link 15. Largura 593.5 vem do grid; o quadrado limao do icone fica. */
.dc-zona-soltar {
  padding: 2.5rem;                         /* 40px do desenho */
}

.dc-zona-soltar:hover, .dc-zona-soltar--sobre {
  background: var(--dc-cor-wash-destaque);
}

.dc-zona-soltar__icone svg {
  width: 1.75rem;                          /* 28px do desenho */
  height: 1.75rem;
}

.dc-zona-soltar__titulo {
  letter-spacing: -0.01em;
}

.dc-zona-soltar__ajuda {
  font-size: 0.9375rem;                    /* 15px do desenho */
}

/* item 32: cabecalho da caixa 16 20, gap 12, nome 15, selo 2 8 (h 24) */
.dc-lista-arquivos__cabecalho {
  padding: 1rem 1.25rem;                   /* 16px 20px do desenho */
  gap: 0.75rem;                            /* 12px do desenho */
}

.dc-lista-arquivos__nome {
  font-size: 0.9375rem;                    /* 15px do desenho */
}

.dc-lista-arquivos__selo {
  padding: 0.125rem 0.5rem;                /* 2px 8px do desenho */
}

/* item 33: linha gap 14, padding 12 20, filete 1px embaixo (h 51.5) */
.dc-lista-arquivos__linha {
  gap: 0.875rem;                           /* 14px do desenho */
  padding: 0.75rem 1.25rem;                /* 12px 20px do desenho */
  border-bottom: 1px solid var(--dc-cor-filete);
}

/* item 33 (integracao, o integrador 08/09): a regra generica `.dc-secao ul:not(...)` (l.253,
   (0,4,1)) vencia `.dc-lista-arquivos ul` (0,1,1) e dava as listas da caixa recuo de 24,
   margem 8 e gap -- o desenho tem as linhas encostadas na caixa. (1,1,1) vence. */
#resultado-upload .dc-lista-arquivos ul {
  list-style: none;
  display: block;
  padding: 0;
  margin: 0;
}

/* item 34 / CONTRATO 16: selo de extensao por [data-ext] (dc.js grava em minusculas).
   PPTX chumbo/fundo; XLSX limao/chumbo; demais (DOCX...) fundo/texto-fraco.
   O texto ja chega maiusculo de extensaoDe(). */
.dc-lista-arquivos__ext {
  text-transform: none;
  background: var(--dc-cor-fundo);
  color: var(--dc-cor-texto-fraco);
}

.dc-lista-arquivos__ext[data-ext="pptx"] {
  background: var(--dc-cor-superficie-invertida);
  color: var(--dc-cor-fundo);
}

.dc-lista-arquivos__ext[data-ext="xlsx"] {
  background: var(--dc-cor-destaque);
  color: var(--dc-cor-texto);
}

/* item 35: linha ilegivel com fundo de erro lavado; o meta ilegivel em 400
   (a regra base l.2084 continua semibold para test_t8b; esta vence por ordem). */
.dc-lista-arquivos__linha:has(.dc-lista-arquivos__meta--ilegivel) {
  background: var(--dc-cor-wash-erro);
}

.dc-lista-arquivos__meta--ilegivel {
  font-weight: var(--dc-peso-regular);
}

/* item 36: ignorado e o "x" em texto apagado */
.dc-lista-arquivos__meta--ignorado,
.dc-lista-arquivos__remover {
  color: var(--dc-cor-texto-apagado);
}

/* item 37: rodape 16 20, gap 12; resumo 13/600 verde lh 1.4; 2a linha 13/600
   verde inline. (0,2,0) vence `.dc-secao p` (0,1,1), que hoje pinta de chumbo. */
.dc-lista-arquivos__rodape {
  padding: 1rem 1.25rem;                   /* 16px 20px do desenho */
  gap: 0.75rem;                            /* 12px do desenho */
}

.dc-lista-arquivos__rodape .dc-lista-arquivos__resumo {
  color: var(--dc-cor-acento);
  line-height: 1.4;                        /* 18.2px do desenho */
}

.dc-lista-arquivos__rodape .dc-lista-arquivos__resumo-secundario {
  display: inline;
  font-size: var(--dc-fs-label);           /* 13px do desenho */
  font-weight: var(--dc-peso-semibold);
  color: var(--dc-cor-acento);
}

/* item 38: Continuar 15/700 (ja vem de .dc-tela .dc-botao--primario), padding 12 20 */
#btn-continuar-pasta {
  padding: 0.75rem 1.25rem;                /* 12px 20px do desenho */
}

/* ---- emenda G (T18b): Slides -- itens 39-47, D-T17.8 (revista 08/09), D-T17.9, D-T17.10.
   Continua a secao T18 (o marcador da secao T18, acima, segue sendo o unico);
   so acrescenta, depois do fim de T18a. O DOM do cartao nao muda: a marca sobe para
   a miniatura por CSS, porque desenharConteudoMiniatura (dc.js l.853) esvazia a
   miniatura com innerHTML = "" a cada redesenho. */

/* item 42 (correcao de despacho 08/09): #secao-preview sem moldura e sem o cabecalho
   "Passo 2 / 2. Conferir..." que o desenho nao mostra; gap 0 (a distancia frase->grade
   e a margem da frase, item 40). */
[data-tela="slides"] #secao-preview {
  padding: 0;
  border: 0;
  background: none;
  gap: 0;
}

[data-tela="slides"] #secao-preview .dc-secao__passo,
[data-tela="slides"] #secao-preview .dc-secao__titulo {
  display: none;
}

/* item 39 / D-T17.3: atalhos 14/600 9 14 (borda 1px, papel e hover ja vem de
   .dc-tela .dc-botao--secundario, secao T17) */
#acoes-slides .dc-botao {
  padding: 0.5625rem 0.875rem;             /* 9px 14px do desenho */
}

/* item 40: frase do Shift 13 fraco, mb 20 -- (1,0,0) vence `.dc-secao p` (0,1,1) */
#ajuda-shift {
  color: var(--dc-cor-texto-fraco);
  margin: 0 0 1.25rem;                     /* 20px do desenho */
}

/* item 41: grade encostada (6 x 173 em 1120 vem de minmax(168px, 1fr) + gap 20 16 da base) */
#grade-preview {
  margin: 0;
}

/* item 42 / D-T17.8: cartao nu -- gap 6, sem padding/borda/fundo; e a ancora da marca */
[data-tela="slides"] .dc-cartao-preview {
  position: relative;
  gap: 0.375rem;                           /* 6px do desenho */
  padding: 0;
  border: 0;
  background: transparent;
}

[data-tela="slides"] .dc-cartao-preview__titulo,
[data-tela="slides"] .dc-cartao-preview__motivo {
  display: none;
}

/* item 43: miniatura branca, borda 1px cinza, imagem a 55%; marcada = 1px chumbo + anel
   limao 3px + imagem 100%. A regra do anel repete a STRING da base l.722 de proposito
   (a ALLOWLIST de R32 casa a string inteira do seletor) e vence por ordem. */
[data-tela="slides"] .dc-cartao-preview__miniatura {
  position: relative;
  background: var(--dc-cor-branco);
  border: 1px solid var(--dc-cor-borda-forte);
  box-shadow: none;
}

[data-tela="slides"] .dc-cartao-preview__miniatura img {
  opacity: 0.55;
}

.dc-cartao-preview:has(.dc-cartao-preview__marca:checked) .dc-cartao-preview__miniatura {
  border: 1px solid var(--dc-cor-texto);
  box-shadow: 0 0 0 3px var(--dc-cor-destaque);
}

.dc-cartao-preview:has(.dc-cartao-preview__marca:checked) .dc-cartao-preview__miniatura img {
  opacity: 1;
}

/* item 44 / D-T17.8: o <label> do rodape vira ancora invisivel no canto do cartao (o
   texto " selecionar" some da vista e nao recebe clique); o input, no MESMO lugar do
   DOM, volta a visivel: 20x20 (regra base), a 6/6 do canto da miniatura. */
[data-tela="slides"] .dc-cartao-preview__rodape {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  visibility: hidden;
}

[data-tela="slides"] .dc-cartao-preview__marca {
  visibility: visible;
  position: absolute;
  top: 0.375rem;                           /* 6px do desenho */
  right: 0.375rem;                         /* 6px do desenho */
}

/* item 45: linha numero/tipo 12/600 fraco (o <p> herdava 16/400 chumbo de .dc-secao p) */
[data-tela="slides"] .dc-cartao-preview__linha {
  font-size: var(--dc-fs-caption);         /* 12px do desenho */
  font-weight: var(--dc-peso-semibold);
  color: var(--dc-cor-texto-fraco);
}

/* item 45 (integracao, o integrador 08/09): a linha mede 18 no desenho (12 x 1,5); __numero e __tipo
   trazem --dc-lh-justo (15) da base e o cartao ficava 3px mais baixo (121,5 -> 118,5). */
[data-tela="slides"] .dc-cartao-preview__numero,
[data-tela="slides"] .dc-cartao-preview__tipo {
  line-height: var(--dc-lh-corpo);
}

/* item 46: barra -- texto 14/600 (padding 12 12 12 22 e gap 20 ja batem na base) */
.dc-barra-flutuante__texto {
  font-size: var(--dc-fs-body-sm);         /* 14px do desenho */
}

/* item 47: Conferir 15/700 11 20 (ja vem de .dc-barra-flutuante__acao) + sombra dura
   limao; desabilitado = filete/apagado, sem sombra, not-allowed. (1,0,0)/(1,1,0)
   vencem .dc-botao--primario:hover e .dc-barra-flutuante__acao:disabled. */
#btn-conferir-slides {
  box-shadow: var(--dc-sombra-dura-destaque);
}

#btn-conferir-slides:disabled,
#btn-conferir-slides[disabled] {
  background: var(--dc-cor-filete);
  border-color: var(--dc-cor-filete);
  color: var(--dc-cor-texto-apagado);
  box-shadow: none;
  cursor: not-allowed;
}

/* ---- emenda G (T19): Conferindo e Resultados -- itens 48-67, D-T17.4 (R39 de
   resultados), D-T17.7 (Conferindo centrado), D-T19.1. So acrescenta, depois da
   secao T18; nada acima muda. Os seletores de BASE que reaparecem aqui (o main de
   Conferindo, o selo, #progresso-rodada e seus degraus) vencem por ordem; os blocos
   de base ficam como estao porque test_t9b_conferindo os pina byte a byte. */

/* item 48 / D-T17.7: o main de Conferindo e a largura toda (1416 no desenho) e centra
   o bloco na vertical (cabecalho de 64px = 4rem); os 720 vivem na coluna (item 49). */
[data-tela="conferindo"].dc-tela {
  max-width: none;
  min-height: calc(100vh - 4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* item 49: topo e corpo em 100% ate 720; o div do topo (selo/eyebrow/h1) ocupa a
   coluna inteira (o h1 do desenho mede 720). */
[data-tela="conferindo"] .dc-tela__topo,
[data-tela="conferindo"] #aviso-rodada-em-curso {
  width: 100%;
  max-width: 45rem;                        /* 720px do desenho */
}

[data-tela="conferindo"] .dc-tela__topo > div {
  width: 100%;
}

/* item 50: selo 15/800 (peso e giro ja vem da base l.1627), padding 6 12 7 10, mb 28;
   line-height do corpo (1.5): o desenho mede 42.9 de altura com o giro, o que so
   fecha com 15 x 1.5 + 13 + 4 (a base tem line-height 1). */
[data-tela="conferindo"] .dc-selo-daumcheck {
  font-size: 0.9375rem;                    /* 15px do desenho */
  line-height: var(--dc-lh-corpo);
  padding: 0.375rem 0.75rem 0.4375rem 0.625rem; /* 6 12 7 10 do desenho */
  margin: 0 0 1.75rem;                     /* 28px do desenho */
}

/* item 51: frase mb 36 */
[data-tela="conferindo"] .dc-conferindo__frase {
  margin: 0 0 2.25rem;                     /* 36px do desenho */
}

/* item 52 / D-T17.7: o trilho passa a ser o proprio elemento (borda 2px chumbo, papel,
   padding 3, 32 de altura em border-box); o ::before deixa de desenhar; o
   preenchimento fica a 3px da borda interna (= 5px da externa, como antes), com 22 de
   altura e degraus `calc(N% - 6px)`. Listras, cores, 28px e .7s vem da base (l.970) e
   nao mudam. 0.1875rem = 3px (R19: nunca px em padding). */
#progresso-rodada {
  height: 2rem;                            /* 32px do desenho */
  border: var(--dc-borda-controle);
  background: var(--dc-cor-superficie);
  padding: 0.1875rem;                      /* 3px do desenho */
}

#progresso-rodada::before {
  content: none;
}

#progresso-rodada::after {
  top: 3px;
  left: 3px;
  height: calc(100% - 6px);                /* 22px do desenho */
}

#progresso-rodada[aria-valuenow^="1"]:not([aria-valuenow="1"]):not([aria-valuenow="100"])::after { width: calc(10% - 6px); }
#progresso-rodada[aria-valuenow^="2"]:not([aria-valuenow="2"])::after { width: calc(20% - 6px); }
#progresso-rodada[aria-valuenow^="3"]:not([aria-valuenow="3"])::after { width: calc(30% - 6px); }
#progresso-rodada[aria-valuenow^="4"]:not([aria-valuenow="4"])::after { width: calc(40% - 6px); }
#progresso-rodada[aria-valuenow^="5"]:not([aria-valuenow="5"])::after { width: calc(50% - 6px); }
#progresso-rodada[aria-valuenow^="6"]:not([aria-valuenow="6"])::after { width: calc(60% - 6px); }
#progresso-rodada[aria-valuenow^="7"]:not([aria-valuenow="7"])::after { width: calc(70% - 6px); }
#progresso-rodada[aria-valuenow^="8"]:not([aria-valuenow="8"])::after { width: calc(80% - 6px); }
#progresso-rodada[aria-valuenow^="9"]:not([aria-valuenow="9"])::after { width: calc(90% - 6px); }
#progresso-rodada[aria-valuenow="100"]::after { width: calc(100% - 6px); }

/* item 53: linha "fase . ETA" mt 14 */
[data-tela="conferindo"] .dc-conferindo__linha {
  margin-top: 0.875rem;                    /* 14px do desenho */
}

/* item 54: acoes gap 12 (itens 55/56 -- Cancelar 14/600 10 16 1px e Voltar como link --
   ja vem de .dc-tela .dc-botao--secundario / --link da secao T17; o oraculo os da
   fechados antes de T19) */
[data-tela="conferindo"] .dc-conferindo__acoes {
  gap: 0.75rem;                            /* 12px do desenho */
}

/* item 57 / D-T17.4: R39 em Resultados -- so #resultados e os blocos de #secao-rodada
   que sao a tela ficam visiveis; regra CSS por tela, nunca hidden por JS (C9).
   #secao-rodada perde a moldura (D-T19.1 c): o que sobra dentro dela e bloco de
   estado com moldura propria, e uma secao vazia com borda e padding apareceria
   como caixa fantasma. */
[data-tela="resultados"] #secao-upload,
[data-tela="resultados"] #secao-preview,
[data-tela="resultados"] #secao-historico,
[data-tela="resultados"] #secao-rodada > :not(#resultado-rodada):not(#cobertura-numeros):not(#cobertura-rodada):not(#bloco-interrompida):not(#bloco-falha) {
  display: none;
}

[data-tela="resultados"] #secao-rodada {
  padding: 0;
  border: 0;
  background: none;
}

/* item 60: item da lista gap 6 */
[data-tela="resultados"] .dc-slide-resultado {
  gap: 0.375rem;                           /* 6px do desenho */
}

/* item 61: moldura em repouso 1px cinza sobre BRANCO (a borda ja e --dc-cor-borda-forte;
   ativo = 1px chumbo + anel limao e divergente = 1px --dc-cor-erro ja vem da base
   l.2251-2258 e nao mudam) */
[data-tela="resultados"] .dc-slide-resultado__moldura {
  background: var(--dc-cor-branco);
}

/* item 62: miniatura do painel branca; botao x do painel 16px */
[data-tela="resultados"] .dc-painel-slide__miniatura {
  background: var(--dc-cor-branco);
}

#btn-fechar-painel {
  font-size: 1rem;                         /* 16px do desenho */
}

/* item 63 / D-T19.1 (d): o cartao de celula carrega a propria margem 0 20 12; o
   container __cartoes deixa de dar margem e gap (senao o x do cartao andaria 20 e a
   distancia entre cartoes dobraria). */
[data-tela="resultados"] .dc-painel-slide__cartoes {
  margin: 0;
  gap: 0;
}

[data-tela="resultados"] .dc-cartao-celula {
  margin: 0 1.25rem 0.75rem;               /* 0 20 12 do desenho */
}

/* item 64: filetes do cabecalho (so nos cartoes que tem filete na base: divergente e
   nao-conferivel) e das colunas em --dc-cor-filete */
[data-tela="resultados"] .dc-cartao-celula--divergente .dc-cartao-celula__cabecalho,
[data-tela="resultados"] .dc-cartao-celula--nao-conferivel .dc-cartao-celula__cabecalho {
  border-bottom-color: var(--dc-cor-filete);
}

[data-tela="resultados"] .dc-cartao-celula__coluna {
  border-right-color: var(--dc-cor-filete);
}

/* item 65: endereco da celula 500 */
[data-tela="resultados"] .dc-cartao-celula__endereco {
  font-weight: var(--dc-peso-medio);
}

/* item 66: acoes do cartao em linha, gap 6 */
[data-tela="resultados"] .dc-cartao-celula__acoes {
  display: flex;
  gap: 0.375rem;                           /* 6px do desenho */
}

/* item 67: "Como comparamos" sem sublinhado (600 e acento ja vem da base) */
[data-tela="resultados"] .dc-painel-slide__como-summary {
  text-decoration: none;
}


/* ------------------------------------------------------------------ */
/* cancel-1009 (10/09/2026) -- diálogo de confirmação da própria UI no
   lugar do `window.confirm()` (Firefox o pintava em texto minúsculo, fora
   do DS). Mesma gramática dos controles: moldura N1 (2px chumbo), sombra
   dura N2 (o token de hover, 5px -- lista fechada de R29), raio zero, wash de
   erro só na marca do canto. Motion: scrim funde (--dur-base), a caixa
   sobe 0.75rem e assenta (--ease-standard); no fechamento, o inverso.
   Sob `prefers-reduced-motion`, só opacidade. */
.dc-dialogo {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(28rem, calc(100vw - 2 * var(--dc-espaco-4)));
  width: 100%;
  margin: auto;
  overflow: visible;
  opacity: 0;
  transform: translateY(0.75rem) scale(0.98);
  transition: opacity var(--dc-transicao-fase), transform var(--dc-transicao-fase),
    overlay var(--dc-transicao-fase) allow-discrete, display var(--dc-transicao-fase) allow-discrete;
}
.dc-dialogo[open] {
  opacity: 1;
  transform: none;
}
@starting-style {
  .dc-dialogo[open] {
    opacity: 0;
    transform: translateY(0.75rem) scale(0.98);
  }
}
.dc-dialogo::backdrop {
  background: color-mix(in srgb, var(--dc-cor-superficie-invertida) 55%, transparent);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--dc-transicao-fase), overlay var(--dc-transicao-fase) allow-discrete,
    display var(--dc-transicao-fase) allow-discrete;
}
.dc-dialogo[open]::backdrop {
  opacity: 1;
}
@starting-style {
  .dc-dialogo[open]::backdrop {
    opacity: 0;
  }
}
.dc-dialogo__caixa {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--dc-espaco-3);
  padding: var(--dc-espaco-5) var(--dc-espaco-5) var(--dc-espaco-4);
  background: var(--dc-cor-superficie);
  color: var(--dc-cor-texto);
  border: var(--dc-borda-controle);
  border-radius: var(--dc-raio-cartao);
  box-shadow: var(--dc-sombra-dura-hover);
  font-family: var(--dc-fonte);
}
/* marca do canto: o quadrado do DS (mesmo do toast), na cor de erro --
   é o único lugar do diálogo em que a cor de erro aparece fora do botão. */
.dc-dialogo__marca {
  position: absolute;
  top: -2px;
  left: -2px;
  width: var(--dc-espaco-3);
  height: var(--dc-espaco-3);
  background: var(--dc-cor-erro);
}
.dc-dialogo__titulo {
  font: var(--dc-texto-titulo);
  letter-spacing: var(--dc-espacamento-titulo);
  margin: 0;
}
.dc-dialogo__texto {
  font: var(--dc-texto-corpo);
  color: var(--dc-cor-texto-fraco);
  margin: 0;
  max-width: var(--dc-largura-leitura);
}
.dc-dialogo__acoes {
  display: flex;
  justify-content: flex-end;
  gap: var(--dc-espaco-2);
  margin-top: var(--dc-espaco-2);
  flex-wrap: wrap;
}

/* botão de perigo: fundo tijolo (--dc-cor-erro, #A6432A, off-white em cima
   = 6,1:1), moldura chumbo como todo controle N1; hover escurece por
   color-mix sobre a própria cor (mesmo idioma do secundário), active
   afunda 1px. Sem sombra dura -- a sombra é só do primário (N2). */
.dc-botao--perigo {
  background: var(--dc-cor-erro);
  color: var(--dc-cor-texto-em-acento);
  border: var(--dc-borda-controle);
}
.dc-botao--perigo:hover {
  background: color-mix(in srgb, var(--dc-cor-texto) var(--dc-wash-estado), var(--dc-cor-erro));
}
.dc-botao--perigo:active {
  transform: translate(1px, 1px);
}
.dc-botao--perigo:disabled,
.dc-botao--perigo[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  @starting-style {
    .dc-dialogo[open] {
      transform: none;
    }
  }
  .dc-dialogo {
    transform: none;
    transition: opacity var(--dc-transicao-fase), overlay var(--dc-transicao-fase) allow-discrete,
      display var(--dc-transicao-fase) allow-discrete;
  }
  .dc-dialogo::backdrop {
    backdrop-filter: none;
  }
  .dc-botao--perigo:active {
    transform: none;
  }
}

/* === S7/T1 — upload: motion + loading === */

/* R1.1/CONTRATO 5 -- zona em estado de envio: mesmo tom mais escuro que o
   `:hover` já usa (D2 reaproveitado, nenhuma cor nova); a guarda de
   verdade contra clique/drop durante o envio é em JS
   (`enviarArquivosDaPasta`), isto aqui é só o sinal visual. */
.dc-zona-soltar[data-estado="enviando"] {
  background: var(--dc-cor-superficie-hover);
  cursor: progress;
}

/* linha de status ("Enviando N arquivos…") -- fica lado a lado com o
   spinner, mesma cor apagada da ajuda logo acima dela. */
.dc-zona-soltar__status {
  display: flex;
  align-items: center;
  gap: var(--dc-espaco-2);
  font-size: var(--dc-fs-body-sm);
  color: var(--dc-cor-texto-fraco);
}

/* spinner -- mesma geometria círculo-por-`border-radius: 50%` do spinner
   de `.dc-botao[aria-busy]::after` (dc.css, regra R32/N3): giro por
   `@keyframes dc-girar`, já existente, nenhuma keyframe nova. Exceção de
   canto geométrico (N3/R30), não decisão de canto de componente. */
.dc-zona-soltar__spinner {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  color: var(--dc-cor-acento);
  animation: dc-girar 700ms linear infinite;
}

/* R1.3 -- reduced-motion mantém texto e estado, só para o giro. */
@media (prefers-reduced-motion: reduce) {
  .dc-zona-soltar__spinner {
    animation: none;
  }
}

/* === S7/T2 — reportar problema === */

/* R2.2 -- "Remover print" com largura de conteudo -- nao esticado pela
   coluna flex do dialogo, como os demais filhos diretos. */
#btn-reportar-remover {
  align-self: flex-start;
}

/* R2.2/R2.3/R2.5 -- previa do print: quadro N1 (mesma familia de borda
   e raio de cartao do resto do app); troca de conteudo (texto <-> img)
   por JS, o quadro em volta nao muda. */
.dc-reportar__previa {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 8rem;
  padding: var(--dc-espaco-3);
  border: var(--dc-borda-cartao);
  border-radius: var(--dc-raio-cartao);
  background: var(--dc-cor-superficie-alta);
}
.dc-reportar__previa-texto {
  font: var(--dc-texto-pequeno);
  color: var(--dc-cor-texto-fraco);
  margin: 0;
}
.dc-reportar__previa-imagem {
  display: block;
  max-width: 100%;
  max-height: 12rem;
}

/* R2.3 -- status invalido: mesma cor de erro do resto do app (so
   var(--dc-...) que ja existe -- regra 0.3.6). */
#reportar-status[data-estado="erro"] {
  color: var(--dc-cor-erro);
}

/* R2.4 -- status apos 201: nao ha token "ok"/"sucesso" em tema.css; usa
   a cor de acao (mesmo verde de .dc-botao--primario). */
#reportar-status[data-estado="enviado"] {
  color: var(--dc-cor-acento);
}

/* R2.4 -- feedback visual do envio em curso (estado por dataset, nunca
   aria-busy -- regra 0.3.7). */
#dialogo-reportar[data-estado="enviando"] #btn-reportar-enviar {
  opacity: 0.6;
}

/* === S7/T3 — lupa === */

/* CONTRATO 2/Decisões 6-7 -- containers que recebem o gatilho `appendChild`
   de T3b/T3c (posicionamento absoluto no canto): T3a planta o CSS inteiro,
   T3b/T3c só o `appendChild` da própria linha. `.dc-slide-resultado` some
   de `<button>` direto do grid para `.dc-slide-resultado__envelope > button`
   -- por isso o `width: 100%` explícito (o grid não estica mais o botão
   sozinho). */
.dc-cartao-preview {
  position: relative;
}
.dc-slide-resultado__envelope {
  position: relative;
}
.dc-slide-resultado__envelope > .dc-slide-resultado {
  width: 100%;
}

/* R3.1 -- botão da lupa, canto superior direito da miniatura; destaque no
   hover/focus-visible por `--dc-cor-acento` (NUNCA `--dc-cor-destaque`
   aqui -- R32/ALLOWLIST não cobre este seletor). `z-index: 1` só para
   ficar acima da própria miniatura (nenhum z-index existente muda). */
.dc-lupa__gatilho {
  position: absolute;
  top: var(--dc-espaco-2);
  right: var(--dc-espaco-2);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: var(--dc-borda-cartao);
  border-radius: var(--dc-raio-controle);
  background: var(--dc-cor-superficie);
  color: var(--dc-cor-texto);
  font-size: var(--dc-fs-body-sm);
  line-height: 1;
  cursor: pointer;
  transition: background var(--dc-transicao-rapida), border-color var(--dc-transicao-rapida);
}
.dc-lupa__gatilho:hover,
.dc-lupa__gatilho:focus-visible {
  background: var(--dc-cor-superficie-hover);
  border-color: var(--dc-cor-acento);
}

/* R3.2 -- `<dialog>` PRÓPRIO (não usa `.dc-dialogo`: a `max-width: 28rem`
   dela quebraria a lupa em tela cheia, e `.dc-dialogo`/`#dialogo-cancelar`
   são intocáveis -- Esclarecimentos do integrador). Mesmo molde de
   entrada/saída do `.dc-dialogo` (fade+scale, `@starting-style`,
   `--dc-transicao-fase`, `allow-discrete`): a diferença é o `[open]`
   ocupar a viewport inteira (`inset: 0`) em vez de ficar centrado com
   largura de conteúdo. */
.dc-lupa {
  border: 0;
  margin: 0;
  padding: var(--dc-espaco-4);
  background: transparent;
  color: var(--dc-cor-texto-em-acento);
  opacity: 0;
  transform: scale(0.98);
  transition: opacity var(--dc-transicao-fase), transform var(--dc-transicao-fase),
    overlay var(--dc-transicao-fase) allow-discrete, display var(--dc-transicao-fase) allow-discrete;
}
.dc-lupa[open] {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--dc-espaco-3);
  opacity: 1;
  transform: none;
}
@starting-style {
  .dc-lupa[open] {
    opacity: 0;
    transform: scale(0.98);
  }
}
.dc-lupa::backdrop {
  background: color-mix(in srgb, var(--dc-cor-superficie-invertida) 85%, transparent);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--dc-transicao-fase), overlay var(--dc-transicao-fase) allow-discrete,
    display var(--dc-transicao-fase) allow-discrete;
}
.dc-lupa[open]::backdrop {
  opacity: 1;
}
@starting-style {
  .dc-lupa[open]::backdrop {
    opacity: 0;
  }
}

/* botão fechar (×), canto superior direito da própria lupa (sobre o
   fundo escuro, não sobre a imagem). */
.dc-lupa__fechar {
  position: absolute;
  top: var(--dc-espaco-4);
  right: var(--dc-espaco-4);
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: var(--dc-borda-controle);
  border-radius: var(--dc-raio-controle);
  background: var(--dc-cor-superficie);
  color: var(--dc-cor-texto);
  font-size: var(--dc-fs-h3);
  line-height: 1;
  cursor: pointer;
}
.dc-lupa__fechar:hover,
.dc-lupa__fechar:focus-visible {
  background: var(--dc-cor-superficie-hover);
}

/* corpo: setas nas laterais + quadro da imagem no meio -- R3.2. */
.dc-lupa__corpo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--dc-espaco-3);
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
}

/* Decisão 24 [emenda 14/09] -- as setas saem do fluxo (`.dc-lupa[open]` já
   é `position: fixed`, então é ela quem vira o container de referência)
   para a imagem poder ocupar `90vw` sem estourar `100vw` -- 2 setas + gaps
   não cabem ao lado de `90vw`. */
.dc-lupa__seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: var(--dc-borda-controle);
  border-radius: var(--dc-raio-controle);
  background: var(--dc-cor-superficie);
  color: var(--dc-cor-texto);
  font-size: var(--dc-fs-h3);
  line-height: 1;
  cursor: pointer;
}
#lupa-anterior {
  left: var(--dc-espaco-4);
}
#lupa-proximo {
  right: var(--dc-espaco-4);
}
.dc-lupa__seta:hover,
.dc-lupa__seta:focus-visible {
  background: var(--dc-cor-superficie-hover);
}
.dc-lupa__seta:disabled,
.dc-lupa__seta[disabled] {
  opacity: 0.4;
  cursor: default;
}

/* R3.2 (emenda 14/09) -- imagem PREENCHE 90vw × 80vh (`width`/`height`,
   não só `max-*`: a caixa renderizada precisa medir isso, não só nunca
   passar disso), `object-fit: contain`; o placeholder ocupa o mesmo
   quadro quando não há leitura nem miniatura (R3.2, contra-exemplo:
   nenhum `fetch`, só o texto "sem miniatura"). */
.dc-lupa__quadro {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 90vw;
  max-height: 80vh;
  min-height: 0;
}
.dc-lupa__imagem {
  display: block;
  width: 90vw;
  height: 80vh;
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
}
.dc-lupa__placeholder {
  padding: var(--dc-espaco-5);
  border: var(--dc-borda-cartao);
  background: var(--dc-cor-superficie);
  color: var(--dc-cor-texto-fraco);
  font: var(--dc-texto-corpo);
}

/* R3.3 -- fade curto (`--dc-transicao-rapida`) na troca de slide; a classe
   é reiniciada por JS a cada navegação (nunca `.style.`). */
.dc-lupa__quadro--trocando {
  animation: dc-lupa-fade var(--dc-transicao-rapida);
}
@keyframes dc-lupa-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.dc-lupa__contador {
  flex: 0 0 auto;
  margin: 0;
  color: var(--dc-cor-texto-em-acento);
  font: var(--dc-texto-pequeno);
  font-feature-settings: "tnum";
}

/* R3.4 -- rodapé: "Selecionar"/"Selecionado ✓" (Seleção) ou "Slide N ·
   <estado>" (Resultados). `#lupa-selecionar` usa `dc-botao dc-botao--
   primario`: o verde de destaque e o par de texto vêm da regra do
   primário (dc.css ~474) -- esta âncora não escreve `var(--dc-cor-
   destaque)` (R32 [conserto 13/09]), só largura/margem. */
.dc-lupa__rodape {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 24rem;
}
#lupa-selecionar {
  width: 100%;
}
.dc-lupa__estado {
  margin: 0;
  color: var(--dc-cor-texto-em-acento);
  font: var(--dc-texto-corpo);
  text-align: center;
}

/* RE14/CONTRATO 10 (emenda 14/09, 2ª) -- container do gatilho de lupa na
   prévia grande do painel (T10b): mesmo `position: relative` que
   `.dc-cartao-preview`/`.dc-slide-resultado__envelope` já usam acima para
   o `.dc-lupa__gatilho` (position: absolute) se ancorar no canto. */
.dc-painel-slide__miniatura {
  position: relative;
}

/* RE15/CONTRATO 10/D11 (emenda 14/09, 2ª) -- cartões do slide dentro da
   lupa (mesmos cartões de RE13, montados por `montarCartoesDoSlide`);
   `<aside id="lupa-cartoes">` fica sempre no DOM (só `hidden` alterna).
   Nenhuma regra desta âncora usa `var(--dc-cor-destaque)` (R32). */
.dc-lupa__cartoes {
  background: var(--dc-cor-superficie);
  color: var(--dc-cor-texto);
  overflow: auto;
  display: grid;
  gap: .75rem;
  padding: var(--dc-espaco-4);
  max-height: 80vh;
  width: min(28rem, 30vw);
}

/* Layout lado a lado (≥ 1024px, D11): a classe `dc-lupa--com-cartoes` no
   `<dialog>` estreita a imagem para dar lugar à coluna de cartões. */
.dc-lupa--com-cartoes .dc-lupa__quadro,
.dc-lupa--com-cartoes .dc-lupa__imagem {
  width: 60vw;
  max-width: 60vw;
}

/* < 1024px: cartões empilham ABAIXO da imagem (RE15) -- o corpo vira
   coluna e as duas áreas voltam a ocupar a largura da viewport. */
@media (max-width: 1023.98px) {
  .dc-lupa--com-cartoes .dc-lupa__corpo {
    flex-direction: column;
  }
  .dc-lupa--com-cartoes .dc-lupa__cartoes {
    width: 90vw;
    max-height: 35vh;
  }
  .dc-lupa--com-cartoes .dc-lupa__imagem {
    width: 90vw;
    height: 45vh;
    max-height: 45vh;
  }
}

/* R3.2/R3.3 -- reduced-motion desliga a transição+`@starting-style` de
   `.dc-lupa`, do `::backdrop` dela e a animação de troca de imagem. */
@media (prefers-reduced-motion: reduce) {
  @starting-style {
    .dc-lupa[open] {
      transform: none;
    }
  }
  .dc-lupa {
    transform: none;
    transition: opacity var(--dc-transicao-fase), overlay var(--dc-transicao-fase) allow-discrete,
      display var(--dc-transicao-fase) allow-discrete;
  }
  .dc-lupa::backdrop {
    backdrop-filter: none;
  }
  .dc-lupa__quadro--trocando {
    animation: none;
  }
}

/* === S7/T45 — barra de progresso === */

/* F1/R4.3 -- preenchimento contínuo: `span.dc-progresso__sentido`, criado
   por JS na primeira vez (`desenharProgressoRodada`), por cima do `::after`
   por degraus de hoje (que continua existindo -- testes). Listra do
   `#progresso-rodada::after` vigente (~988-1005); geometria da seção T19
   (~3346-3361, que REDEFINE `::after` e é a que vale na tela -- conserto
   13/09): `top`/`left`/`height` em px são posição, não caixa (R19 mira só
   padding/margin/gap/font-size); a largura em si é sempre `calc(N% - 6px)`,
   N escrito por JS -- nunca custom property nova (o teste de tokens proíbe
   `var(--` fora de `--dc-`). Sem reabrir `#progresso-rodada::after` aqui: o
   `z-index: 1` do span posicionado já pinta por cima do `::after` (que tem
   `z-index: auto`); reabrir o seletor sobrescreveria o bloco da T19. */
.dc-progresso__sentido {
  position: absolute;
  top: 3px;
  left: 3px;
  height: calc(100% - 6px);
  max-width: calc(100% - 6px);
  width: 0;
  z-index: 1;
  background: repeating-linear-gradient(-45deg, var(--dc-cor-destaque) 0 10px, var(--dc-cor-destaque-hover) 10px 20px);
  background-size: 28px 28px;
  animation: dc-stripe 0.7s linear infinite;
  transition: width 0.4s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .dc-progresso__sentido {
    animation: none;
    transition: none;
  }
}