/* ============================================================================
   Cadastrador — folha de estilo unica.

   Sem Tailwind e sem Vite de proposito: o servidor de producao NAO tem Node
   instalado, entao um pipeline de build viraria um passo manual de deploy
   ("rodar npm na sua maquina e lembrar de enviar o public/build"). Um arquivo
   .css versionado elimina a classe inteira de erro.

   Mobile primeiro: a ferramenta e usada com a caixa na mao.
   ========================================================================= */

/* 🔄 A FONTE DA INTERFACE — **Inter**, e ela e servida daqui (02/10/2026).

   🔴 **Por que ela NAO estava aqui, e por que entra agora.** A folha nascia com
   `system-ui` — que no Windows 11 resolve para a Segoe UI, uma fonte de sistema
   de 2006 com desenho mais largo e menos geometrico. ⚠️ E nao era escolha: era
   AUSENCIA, e ela custava o que o usuario sente sem saber nomear — a tela lia
   como *"ferramenta de sistema"*, ❌ nao como *"produto"*. 🔵 O
   `UI-E-DESIGN-SYSTEM` §4.2 ja mandava Inter desde a v1.0; a folha e que nunca
   a carregou.

   ⚠️ **E ela e self-hosted, ❌ nao via Google Fonts** — a mesma regra do §4.2, e
   pela mesma razao do `app.css` (sem build, sem dependencia de terceiro no
   caminho critico). Os dois arquivos cobrem `latin` e `latin-ext`, que e o que
   o portugues precisa: acento, cedilha e til ficam no `latin` (U+00C0–U+00FF).

   📌 **O `../fonts/` e relativo de proposito:** o CSS mora em
   `public/css/app.css`, entao `../fonts/` resolve para `public/fonts/` em
   qualquer instalacao — inclusive se a ferramenta um dia for servida dentro de
   uma subpasta, que e onde um caminho absoluto (`/fonts/`) quebraria em
   silencio. ⚠️ E o `?v=` da folha ❌ nao atrapalha: o endereco do `url()` e
   resolvido a partir do endereco do proprio CSS.

   ⚠️ **`font-weight: 100 900`** e o que diz que o arquivo e VARIAVEL: sem ele o
   navegador trataria os 400/500/600/700 da folha como quatro pesos sinteticos
   do mesmo corte, e o ganho da Inter se perderia justamente na hierarquia. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --tinta: #16202b;
  --tinta-fraca: #5b6b7c;
  --linha: #dbe2e9;
  /* 🔵 **A linha das ZONAS (02/10/2026) — e ela ❌ não é a das caixas.**

     ⚠️ O `--linha` desenha o perímetro de um campo, de um cartão e de uma
     tabela: é detalhe de FORMA, e por isso pode ser discreto. 🔴 A divisa da
     barra carrega outra informação — ela diz onde acaba o trabalho de hoje e
     começa o que se consulta. ⚠️ Com o `#dbe2e9` das caixas, o traço media
     **1px por 18px** e sumia, e "sumir" aqui é a barra voltar a ser uma fileira
     indistinguível (que é o defeito que o R-211 fechou, de outro jeito).
     📌 Uma cor só para as duas funções dava à mais importante das duas a
     evidência da mais banal. */
  --linha-forte: #c3ccd6;
  --fundo: #f4f6f8;
  --papel: #ffffff;
  /* 🔵 O acento e a COR DA MARCA, ❌ nao uma escolha de gosto: e o roxo da
     Lumine — o mesmo tom medido no arquivo oficial do logo (`#7345B3`, no
     `docs/assets/logo.png` do projeto). Os tres sao os do
     `UI-E-DESIGN-SYSTEM` §2: o `roxo-600` (a marca), o `roxo-700` (o hover) e o
     `roxo-100` (o fundo suave). 📌 O 6,5:1 do `roxo-600` sobre branco e o que
     deixa link e botao passarem em AA sem engrossar a fonte. */
  --acento: #7345b3;
  --acento-escuro: #5e3794;
  --perigo: #a4262c;
  --perigo-fundo: #fdeceb;
  --ok: #1d6b45;
  --ok-fundo: #e8f5ee;
  --aviso: #8a5a00;
  --aviso-fundo: #fdf3e2;
  /* 🔵 **As três LINHAS do aviso (02/10/2026), e elas existem para tirar peso da
     tela.** O aviso tinha o perímetro inteiro na cor CHEIA do tom — um
     retângulo grande com uma moldura `#1d6b45` em volta, que é a coisa mais
     pesada de qualquer tela onde ele aparece. 🔴 **Medido na tela do rótulo: dois
     avisos empilhados, de `101px` e `150px`, com moldura escura nos quatro
     lados** — e o olho lia a MOLDURA antes do texto.
     📌 Agora a cor cheia fica só na BARRA da esquerda, que é onde ela diz o tom
     sem gritar, e o perímetro inteiro usa estes tons de fundo-aberto. ⚠️ Eles
     ❌ não são os `--*-fundo`: a linha precisa ser mais escura que o fundo para
     existir, e mais clara que o tom para ❌ não virar moldura. */
  --ok-linha: #b9dcc9;
  --perigo-linha: #eec3c0;
  --aviso-linha: #ecd8ae;
  --raio: 8px;
  /* 🔵 O tom do item ATUAL e do avatar. Ele mora aqui, ao lado dos outros
     fundos, porque a família já existe neste arquivo (o `--perigo-fundo`, o
     `--ok-fundo`, o `--aviso-fundo`) — e um tom de acento escrito solto dentro
     de uma regra seria o único da folha sem dono. */
  --acento-suave: #ebe4f7;

  /* 🔵 A ALTURA DA BARRA — e ela tem DONO porque duas coisas dependem dela: o
     `min-height` do `.topo__interno` e o deslocamento do painel do menu, que se
     ancora na conta e precisa saber onde a barra termina. Antes o `46px` estava
     escrito solto no `min-height`, e o `12px` do painel era a conta dele feita à
     mão — duas verdades sobre a mesma medida, que é o defeito que o comentário
     do próprio painel registrava.

     🔄 **Subiu de `46px` para `56px` (02/10/2026).** 🔴 O defeito era medido: com
     a barra em `46px` e o link em `33px`, sobravam **6,5px de ar** acima e abaixo
     de cada item — e com a logo de `38px` o respiro caía para **4px**. 📌 Era a
     barra de um sistema denso, onde o menu é apertado de propósito; ❌ não é o que
     esta ferramenta quer. Com `56px` o link passa a `39px` e o ar vai a **8,5px**,
     que é o respiro em que o item se lê como ALVO (o mesmo raciocínio dos `44px`
     de toque dos campos, um degrau acima).

     ⚠️ **E isto ❌ não custa um pixel de largura.** A barra tem um teto de largura
     medido e sem folga (ver o `.topo__interno`), e altura ❌ não entra nessa
     conta: o `Consultas` continua saindo inteiro, e a promessa do R-211 segue
     inteira. Por isso a mudança é só de ALTURA — o recuo lateral dos itens fica
     onde estava, que é o que a conta do teto mede. */
  --topo-altura: 56px;

  /* ==========================================================================
     A ESCALA TIPOGRÁFICA — a fonte ÚNICA dos tamanhos de letra (02/10/2026).

     🔴 **O defeito que ela fecha.** A folha tinha **17 tamanhos avulsos**
     espalhados por ~50 regras (`0.68`, `0.7`, `0.72`, `0.75`, `0.78`, `0.8`,
     `0.82`, `0.85`, `0.86`, `0.88`, `0.9`, `0.92`, `0.95`, `1.05`, `1.1`,
     `1.4`, `1.7`). ⚠️ **Nenhum deles tinha dono, e o resultado não era
     "variedade" — era AUSÊNCIA DE HIERARQUIA:** o `h2` media `1.1rem` (17,6px) e
     o corpo media `1rem` (16px), ou seja **1,6px de diferença** — o título de
     seção ❌ não se distinguia do texto por tamanho, só por peso. 🔵 E a pilha
     de valores entre `13px` e `14,7px` (seis tamanhos diferentes para a mesma
     função de apoio) fazia a página inteira parecer **levemente desalinhada**
     sem que se soubesse apontar onde.

     ⚠️ **O critério dos degraus, e por que estes nove?** Cada degrau é uma
     **camada de leitura**, ❌ não um tamanho escolhido a olho:

       metadado  →  selo, badge, contador      (12px)
       interface →  menu, campo, botão, célula (14px)
       leitura   →  prosa, subtítulo, aviso    (15px)
       seção     →  título de cartão (h2)      (17px)
       página    →  título de página (h1)      (20px)
       destaque  →  número grande              (26px)

     📌 **E a razão entre degraus vizinhos fica entre 1,07 e 1,29** — o que
     garante que cada salto seja perceptível. 🔴 **Um degrau a mais entre a
     interface e a leitura (14 → 15) seria invisível** e é o único par apertado
     de propósito: os dois são TEXTO CORRIDO, e o que os separa é o PAPEL (a
     moldura da barra × a prosa da tela), ❌ não o tamanho.

     🔵 **O `text-base` do `UI-E-DESIGN-SYSTEM` §4.2 é `1rem` (16px), e aqui ele
     é `15px` — e a diferença é DELIBERADA.** Aquele token descreve a **vitrine**
     (produto, preço, ficha técnica), lida por quem está comprando com tempo;
     ⚠️ esta é a **ferramenta de trabalho**, e o §5 do mesmo documento manda o
     **painel** ter *densidade alta* com `text-sm`. 📌 15px é o meio-termo
     medido: mantém a leitura confortável com a caixa na mão e devolve ~8% de
     altura de página em relação aos 16px.

     ⚠️ **Todos os valores em `rem`, e o `html` fica no `16px` do navegador:**
     assim a escala inteira acompanha quem aumenta a fonte do sistema (o zoom de
     200% que o `NAO-FUNCIONAIS.md` §5.3 exige), ❌ não só o texto que usa
     `rem` explicitamente.
     ========================================================================== */
  --t-xs: 0.75rem;      /* 12px — selo, badge, metadado */
  --t-sm: 0.875rem;     /* 14px — interface: menu, campo, botão, célula, apoio */
  --t-base: 0.9375rem;  /* 15px — leitura: prosa, subtítulo, aviso */
  --t-lg: 1.0625rem;    /* 17px — título de seção (h2) */
  --t-xl: 1.25rem;      /* 20px — título de página (h1) */
  --t-2xl: 1.625rem;    /* 26px — número de destaque */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  /* 🔄 **Inter primeiro, e o `system-ui` fica como FALLBACK.** 🔴 A ordem
     importa: `system-ui` antes faria o navegador nunca chegar na Inter, e o
     `@font-face` ficaria baixado e sem uso — o defeito silencioso que nao
     aparece em nenhum teste, so no olho. ⚠️ E o fallback e o do §4.2: se a
     fonte nao carregar, a tela continua legivel na fonte do sistema, ❌ nao
     numa serifa qualquer. */
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--t-base);
  /* 🔄 **Subiu de `1.5` para `1.6` (02/10/2026).** 🔵 É o pedido de LEVEZA, e o
     número diz por quê: em `15px`, o `1.5` dá uma linha de `22,5px` e o `1.6` dá
     `24px` — **1,5px a mais por linha**, que num parágrafo de cinco linhas são
     `7,5px` de ar. 📌 O efeito ❌ não é "texto maior" (o tamanho da letra ❌ não
     mudou); é a mancha de texto deixar de ser um bloco cinza e voltar a ser
     LINHA, que é o que se lê. ⚠️ E os elementos de moldura que têm altura
     prometida — a barra — fixam o próprio `line-height` justamente para ❌ não
     herdarem isto. */
  line-height: 1.6;
  color: var(--tinta);
  background: var(--fundo);
  -webkit-text-size-adjust: 100%;
}

/* --- topo ---------------------------------------------------------------- */

/* 🔵 A barra GRUDA no alto (`sticky`), e isso é a diferença entre uma moldura e
   um enfeite: o gerador e a lista de glossários são páginas longas, e sem a barra
   grudada o operador perde o menu no meio do trabalho — justamente quando ele
   quer sair da tela em que está. 📌 E o `sticky` ❌ não custa um pixel de altura:
   ele ocupa o mesmo espaço, só que continua à vista.

   ⚠️ O `z-index: 10` é **abaixo** do `20` da lista do combobox (`combobox__lista`),
   de propósito: o menu suspenso de um campo tem de poder passar por CIMA da
   barra. Um `z-index` igual nos dois deixaria a ordem do HTML decidir isso. */
.topo {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
  /* A sombra é o que dá PROFUNDIDADE à barra: sem ela, um fundo branco sobre um
     fundo quase branco (`--fundo`) parece colado no conteúdo. Ela é de 2px e de
     3% de opacidade — o suficiente para a borda virar um degrau, ❌ não uma
     linha desenhada. */
  box-shadow: 0 1px 2px rgba(22, 32, 43, .04);
}

/* 🔵 A barra é UMA linha, e sempre — em qualquer largura. Ela é moldura, ❌ não
   conteúdo: cada pixel dela sai da tela em que o operador está trabalhando, e
   ❌ não há nada nela que ele leia duas vezes. Medida antes desta correção:
   59px na tela larga e ⚠️ **101px** quando o menu descia para a própria linha —
   num celular de 394px de altura, a barra comia um quarto da tela.

   🔵 E `flex-wrap: wrap` era o defeito por trás disso: com a marca à esquerda e
   a conta à direita, a quebra não dividia o menu, ela **isolava a marca numa
   linha só dela** — e o menu ia inteiro para a de baixo. O menu ❌ não quebra:
   ele **cede espaço** e rola (é o que o R-183 promete, e o que a barra passa a
   cumprir), então não há nada para o `wrap` fazer aqui. */
.topo__interno {
  /* 🔄 **O teto subiu de 1080px para 1120px (02/10/2026).** ⚠️ E ele ❌ não subiu
     por gosto: com a **Inter** (§4.2) o menu ficou **26px mais largo** que na
     Segoe UI (529px → **555px**), e a marca e a conta também engordaram uns
     pixels. 🔴 **A consequência era um defeito, ❌ não uma preferência:** a
     combinação mais larga (logo + complemento + menu inteiro + nome no teto)
     passou a pedir **1.096px** — e um teto de 1.080px ❌ não a comporta **em
     largura de janela nenhuma**, porque o teto é rígido. O menu voltaria a
     rolar e o último item (`Consultas`) apareceria cortado ao meio — o defeito
     que o R-211 fechou.

     📌 `1.120px` dá **24px** de folga sobre os 1.096px, e os 24 ❌ não são
     gordura: são o que a regra de folga de 10px pede, mais os poucos pixels que
     uma fonte mais larga que a desta máquina come. 🔵 **E o `.conteudo` e o
     `.rodape` acompanham** — uma barra mais larga que o conteúdo desalinharia a
     logo da primeira coluna da página, que é o tipo de desencontro que se vê
     sem saber nomear. */
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
  min-height: var(--topo-altura);
  /* 🔵 O `line-height` da barra é FIXO, e ❌ não o `1.6` da prosa: a barra é
     MOLDURA, e a altura que ela promete (o `--topo-altura`) ❌ não pode depender
     de uma decisão de leitura que vale para o texto da página. 📌 Sem esta linha,
     subir o `line-height` do corpo incharia o link junto e a conta do respiro
     acima deixaria de valer — o defeito silencioso que só aparece depois. */
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 16px;
  /* ⚠️ `position: relative` por causa do painel do grupo das Consultas:
     o bloco contentor de um `position: absolute` define se ele e RECORTADO
     pelo `overflow` do menu. ⚠️ Com o contentor AQUI FORA — no interno, e ❌
     nao dentro do `.topo__nav`, que rola —, o painel atravessa o recorte e
     aparece inteiro; 📌 medido: com o contentor dentro do menu, o painel era
     recortado na altura da barra, e o grupo ficava sem poder abrir. */
  position: relative;
}

/* 🔵 O conjunto da marca: a LOGO + fio de 1px + `CADASTRADOR`. O fio sai do
   `::before` do complemento porque ele é PONTUAÇÃO, ❌ não conteúdo: se o
   complemento não aparece (tela estreita), o fio não aparece junto — os dois
   são a mesma peça. */
.topo__marca {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  text-decoration: none;
  white-space: nowrap;
}

/* 🔵 A marca da barra é a LOGO, ❌ não o nome escrito: a ferramenta é da Lumine,
   e a primeira coisa que a barra diz é de quem ela é. ⚠️ E ela é a versão
   POSITIVA — símbolo e nome em roxo sobre transparente —, que é exatamente a
   forma que o `UI-E-DESIGN-SYSTEM` §3.1 reserva para cabeçalho: o arquivo
   oficial é branco sobre roxo, e ❌ não se lê sobre um fundo branco.

   📌 A ALTURA sai do ORÇAMENTO DA BARRA, ❌ não do gosto. A barra tem um teto de
   largura medido (o comentário do grupo das Consultas conta a conta), e a marca
   ❌ não cresce sem que a conta dos dois pontos de virada seja refeita junto.

   🔄 **Ela subiu de `28px` para `34px` e depois para `38px` (02/10/2026).** A
   razão é de LEITURA, ❌ não de gosto: nos `28px` a logo media **96px** de
   largura, que é exatamente o **MÍNIMO** da marca (§3.2 do `UI-E-DESIGN-SYSTEM`)
   — e um elemento parado no próprio piso lê como *"o menor tamanho permitido"*,
   ❌ não como *"o tamanho escolhido"*. 📌 Medido na tela real: os `34px` deram
   **116px** de largura e os `38px` dão **130px** — **34px acima do piso**, e a
   marca inteira (com o complemento) vai de **213px** (nos 28px) para **247px**.

   ⚠️ **O segundo degrau só foi possível porque a barra tinha acabado de
   alargar** (ver o `.topo__interno`): ele custa **+14px** de largura, e a barra
   estava exatamente sem folga. 🔴 **É a última vez que ela cresce sem que o teto
   da barra suba de novo** — a folga depois dos `38px` é de **11px**, abaixo da
   régua de 10px que os pontos de virada exigem mais os poucos pixels que uma
   fonte mais larga que a desta máquina come.

   📌 **No teto da barra:** `46px` de altura e **38px** de logo deixam 4px de
   respiro em cima e 4px embaixo — apertado de propósito, e ainda assim dentro da
   área de respiro que o §3.2 pede (a altura da letra "L"). ⚠️ E a barra ❌ não
   cresce por causa disso: `min-height: 46px` continua sendo o que manda.

   🔴 **E no celular ela continua nos `28px`, e passa a ser o SÍMBOLO** — ver a
   media query dos `620px`: ali a barra é a mais apertada da folha, e os 20px
   sairiam justamente das duas PORTAS DE ENTRADA, que a promessa do R-211 ❌ não
   deixa rolar para fora. 📌 **Os `28px` são o piso do TAMANHO, ❌ não da marca:**
   neles a versão com o nome mede **95,7px** (o mínimo dela é 96px) e o símbolo
   isolado mede **34,9px** (o mínimo dele é 24px) — 🔵 é essa folga de formato que
   a barra apertada usa para as duas portas caberem. */
.topo__marca-logo {
  display: block;
  height: 38px;
  width: auto;
}

/* 🔵 O complemento é um RÓTULO, ❌ não uma continuação da frase — e é por isso
   que ele vai em caixa alta e com o entreletra aberto: assim ele se lê como
   etiqueta ("o que esta ferramenta é"), e ❌ não como o resto de um texto que
   começou no nome. 📌 É o mesmo trabalho que o fio faz, por outro meio: os dois
   dizem onde acaba o nome e começa a explicação.

   🔵 E ele some quando não há largura para ele. Ele é explicação, ❌ não
   identificação: quem já está dentro do cadastrador sabe o que a ferramenta é,
   e o primeiro a sumir numa barra apertada tem de ser o texto que explica, nunca
   o item de menu que LEVA a algum lugar.

   ⚠️ E ele some SEM deixar rastro: o fio é o `::before` dele, ❌ não uma peça
   solta na marca — um fio sem o texto ao lado seria uma linha vertical sem
   função, que é pior que não ter nenhuma. */
.topo__marca-complemento {
  display: none;
  align-items: center;
  gap: 10px;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.topo__marca-complemento::before {
  content: "";
  width: 1px;
  height: 13px;
  background: var(--linha);
}

/* 🔵 **O texto que só o LEITOR DE TELA lê.**

   ⚠️ Ele responde a segunda pergunta que toda porta da barra faz: *"como isto se
   chama?"* o rótulo visível já responde; *"o que isto FAZ?"* ❌ não — e é a
   segunda que trava quem chega. 🔴 **A barra ❌ não tem largura para a frase
   inteira** (o orçamento está medido e sem folga), então a frase entra AQUI:
   fora do fluxo, invisível na tela e presente para quem ouve a tela.

   📌 A receita é a clássica, e cada linha tem função: `absolute` tira do fluxo
   (❌ não mexe no orçamento da barra), `1px` por `1px` com `inset(50%)` não deixa
   sobra de desenho, e o `nowrap` impede que a frase vire duas linhas num leitor
   que a leia por posição. */
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- a navegacao --------------------------------------------------------- */

/* 🔵 Sao LINKS, ❌ nao botoes. Uma barra de botoes de borda cheia nao
   hierarquiza nada: todos pesam igual, o menu compete com o botao de acao da
   propria tela, e nao se sabe em qual delas se esta. Link pesa menos que
   botao — e e por isso que ele pode ser menu. */
.topo__nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
  /* 🔵 O menu CEDE espaço (❌ não empurra a barra) e rola quando não cabe: com
     `min-width: 0` ele encolhe abaixo do próprio conteúdo, e o `overflow-x`
     devolve o resto por rolagem. Sem o `min-width`, um item de flex se recusa a
     ficar menor que o conteúdo — e a barra volta a crescer. */
  flex: 0 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.topo__nav::-webkit-scrollbar { display: none; }

.topo__link {
  /* ⚠️ **Só a ALTURA subiu (`6px` → `9px`) — o recuo lateral continua em `9px`.**
     🔴 A largura da barra está no teto medido e sem folga: cada pixel lateral
     multiplica por sete itens e joga o `Consultas` para fora. A altura, ❌ não
     entra naquela conta. 📌 O link passa de `33px` para `39px`, e o ar da barra
     de `6,5px` para `8,5px` (ver o `--topo-altura`). */
  padding: 9px 9px;
  font-size: var(--t-sm);
  /* 🔵 O MESMO peso no item atual e nos outros, de propósito. Um item que
     engrossa ao ser escolhido muda de largura — e o menu inteiro se desloca
     alguns pixels a cada troca de tela, o que é o tipo de tremor que se sente
     sem saber de onde vem. A marca da tela atual é COR e FUNDO, que ❌ não
     mexem no tamanho. */
  font-weight: 500;
  /* 🔄 **A tinta subiu de `--tinta-fraca` para `--tinta` (02/10/2026).** ⚠️ E
     isto é HIERARQUIA, ❌ não gosto: com todos os itens em cinza fraco
     (`#5b6b7c`), a barra inteira lia como texto secundário e ❌ não havia
     primeiro plano nenhum — o menu parecia desabilitado. 🔵 Com a tinta cheia,
     quem se acende em roxo (o item ATUAL) passa a ter de onde se destacar, e o
     contraste item × fundo vai de 5,5:1 para **16,7:1**.

     📌 **E o custo de largura é ZERO** — cor ❌ não mexe em medida —, que é o
     único tipo de mudança que esta barra ainda comporta: no pior caso sobram
     ~10px do teto (ver a conta no ponto de virada do complemento). */
  color: var(--tinta);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 6px;
  transition: background-color .15s ease, color .15s ease;
}

.topo__link:hover {
  color: var(--tinta);
  background: var(--fundo);
}

/* ⚠️ A tela ATUAL fica marcada. Sem esta marca a barra volta a ser uma fileira
   de itens iguais e a pergunta "onde eu estou?" fica sem resposta na tela. */
.topo__link--atual {
  color: var(--acento);
  background: var(--acento-suave);
}

/* 🔵 O item atual ❌ não muda no `hover`: ele já está aceso, e o realce de
   passagem é para o que ainda ❌ não foi escolhido. */
.topo__link--atual:hover { background: var(--acento-suave); }

/* 🔵 O traco separa os DOIS tempos do menu, e o corte e onde ele esta:
   ANTES dele, o trabalho de hoje na ordem em que ele acontece (ler o rotulo,
   gerar o SKU, a etiqueta, a renomeacao e o que ja subiu para o site); DEPOIS
   dele, o que se olha de vez em quando (a leitura da caixa, o registro do que
   saiu e a regua do SKU). ⚠️ E ele e a unica coisa que diz isso: sem ele, os
   links de peso igual voltam a ser uma fileira indistinguivel. */
.topo__traco {
  flex: none;
  /* ⚠️ A largura continua `1px`: o orçamento da barra ❌ não muda. */
  width: 1px;
  /* 🔄 A ALTURA subiu de `18px` para `24px` (02/10/2026), e a mudança é de
     PAPEL: uma marca de 18px lia como piscada de detalhe, ❌ não como divisa de
     zona. 📌 A altura ❌ não entra na conta da largura (ver o `--topo-altura`),
     então este é o mesmo tipo de mudança de graça que a cor. */
  height: 24px;
  margin: 0 7px;
  background: var(--linha-forte);
}

/* --- o grupo das consultas ----------------------------------------------- */

/* 🔵 **Um item do menu que ABRE**, e o irmao do menu da conta: um `<details>`
   do proprio navegador, com o painel da conta reusado (`.topo__painel`).
   ⚠️ Ele existe porque o menu ❌ nao caberia com as tres consultas soltas na
   fileira (ver o comentario do Blade), e a divisao e a que a barra ja fazia: o
   trabalho de um lado do traco, o que se olha de vez em quando do outro. */
.topo__grupo {
  /* ⚠️ `flex: none` pelo mesmo motivo do traco: quem paga o aperto da barra e
     o menu, que rola — e ❌ nao o item que abre. */
  flex: none;
}

/* ⚠️ O `summary` veste a classe do item de menu (`.topo__link`) de proposito:
   ele E um item da fileira, e um estilo proprio faria duas fileiras dentro da
   mesma fileira. O que sobra e o que o `<summary>` traz de fabrica — o
   marcador (o triangulo do navegador), que sai pelas mesmas duas linhas do
   `.topo__resumo`, e o cursor. */
.topo__link--grupo {
  list-style: none;
  cursor: pointer;
}

.topo__link--grupo::-webkit-details-marker { display: none; }

/* A seta do grupo: a MESMA peca do menu da conta, e ❌ nao um `▾` de fonte.
   ⚠️ Aqui ela e `inline-block` porque o `summary` ❌ nao e um flex (trocar o
   `display` de um `summary` custa o comportamento de abrir e fechar em alguns
   navegadores — a mesma regra do `.topo__resumo`). */
.topo__link--grupo .topo__seta {
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
}

/* 🔵 Aberto, a seta vira para CIMA — ela aponta para onde o painel esta, e a
   volta e o unico sinal de que o toque fechou o que o outro abriu. */
.topo__grupo[open] .topo__seta { transform: rotate(180deg); }

/* 🔵 O painel do grupo nasce do `.topo__interno` (o bloco contentor com
   `position: relative`), ❌ nao da conta — e e por isso que ele ❌ NAO precisa de
   um `top` proprio: a conta do `.topo__painel` e escrita em funcao da BARRA
   (`100% + (altura da barra - 100%) / 2 + 5px`), e aqui `100%` JA E a altura da
   barra, porque o contentor e o interno. O termo do meio vira zero sozinho, e o
   que sobra e o mesmo vao de 4px do painel da conta. 📌 Um so calculo serve aos
   dois, que e o que faz os dois nascerem na MESMA linha.

   🔴 **Aqui havia `top: calc(100% + 5px)` — e ele NUNCA valeu.** O
   `.topo__painel` e escrito DEPOIS no arquivo, com o mesmo peso de seletor
   (`0,1,0`), e empate de peso se resolve por ORDEM: a declaracao de baixo vencia
   a de cima, e o painel do grupo saia com o deslocamento do painel da conta.
   ⚠️ Medido antes desta rodada: o painel do grupo nascia **11px** abaixo da barra
   e o da conta a **4px** — o desencontro que o comentario acima dizia estar
   corrigido. 🔵 A regra sai em vez de ganhar peso: com o calculo unico, ela nao
   tem mais o que declarar, e uma regra que so existe para ser sobreposta e a
   proxima a enganar quem for mexer. */

/* --- a conta ------------------------------------------------------------- */

/* 🔵 Ela fica FORA da navegacao, do outro lado de um traco: sair nao e escolher
   tela nenhuma, e ❌ nao pode ter o mesmo peso dos itens de menu.

   ⚠️ E ela e `position: relative` porque o painel do menu nasce daqui: o painel
   e alinhado a BORDA DIREITA da conta inteira (`right: 0`), ❌ nao a do resumo —
   assim ele cai sob o conjunto todo (o nome e o "Sair"), e nao deslocado para a
   esquerda pela largura do "Sair". */
.topo__conta {
  display: flex;
  align-items: center;
  gap: 4px;
  /* ⚠️ `flex: none`: a conta ❌ não pode ser o que encolhe. Ela é a saída, e
     quem paga pelo aperto é o menu — que rola. */
  flex: none;
  position: relative;
  padding-left: 12px;
  /* ⚠️ A MESMA linha das zonas do menu (`--linha-forte`): a conta é a TERCEIRA
     zona da barra, e três zonas ❌ não podem ter duas espessuras de divisa —
     isso faria a da conta parecer de outra natureza. */
  border-left: 1px solid var(--linha-forte);
}

.topo__usuario {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--tinta-fraca);
  font-size: var(--t-sm);
  font-weight: 500;
  white-space: nowrap;
}

/* 🔵 O avatar com as iniciais: ele responde *"de quem é esta sessão?"* antes de
   o olho ler o nome, e é o que dá à conta um peso visual próprio — sem ele, o
   nome e o "Sair" ficam dois textos soltos na ponta da barra.

   ⚠️ **Ele é um CÍRCULO com as iniciais, e ❌ não uma foto**, porque este
   cadastrador ❌ não tem upload de imagem de perfil: um círculo vazio esperando
   uma foto que nunca chega seria promessa não cumprida. */
.topo__avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--acento-suave);
  color: var(--acento);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .02em;
}

/* ⚠️ O nome ❌ não cresce sem limite: ele vem do cadastro de usuários, e um nome
   longo empurraria o menu para fora da barra. Quem trunca é aqui — o dado
   continua inteiro no banco, e a tela de usuários é que o mostra por completo.

   🔵 **O teto é 120px, e ele é uma CONTA, ❌ não um gosto.** Ele é o que garante
   que o menu inteiro caiba junto com o complemento da marca a partir de 1.060px,
   qualquer que seja o nome (ver a media query do complemento): com o nome no
   teto, a conta mede 241px, e o conjunto pede 1.035px de barra. Um teto maior
   faria a barra ❌ não cumprir o que ela promete — e o jeito de descobrir isso
   seria um nome comprido aparecendo meses depois. */
.topo__nome {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

/* --- o menu da conta ----------------------------------------------------- */

/* 🔵 O resumo e o que se ve quando o menu esta fechado, e ele e o CHIP da conta:
   o avatar e o nome, iguais aos de antes — mais a seta, que e a peca nova e a
   unica que diz que aquilo ABRE. ⚠️ Sem a seta, o nome e o avatar sao texto: um
   controle que ❌ nao se anuncia e um controle que ❌ nao se acha.

   ⚠️ Ele ❌ nao vira `display: flex` (o flex mora no `.topo__usuario` de
   dentro): alguns navegadores tratam mal o `display` trocado no `<summary>` —
   o triangulo nativo some junto com o comportamento de abrir e fechar. E o
   triangulo nativo sai de qualquer forma, por duas linhas: o `list-style` do
   Firefox e o `::-webkit-details-marker` do WebKit. */
.topo__resumo {
  list-style: none;
  cursor: pointer;
  /* 🔵 O mesmo `9px` de altura do link (aqui o `9px` vira `8px` porque o resumo
     ❌ não tem borda própria e carrega o avatar de `24px`): a conta do respiro é
     a mesma peça dos itens ao lado, e um chip de conta mais baixo que o menu
     faria a fileira parecer torta. ⚠️ O `7px` lateral fica: é o que a largura da
     conta mede. */
  padding: 8px 7px;
  border-radius: 6px;
  transition: background-color .15s ease, color .15s ease;
}

.topo__resumo::-webkit-details-marker { display: none; }

.topo__resumo:hover {
  color: var(--tinta);
  background: var(--fundo);
}

/* ⚠️ Quando a tela atual mora DENTRO do menu, quem se acende e o resumo: a
   pergunta "onde eu estou?" e a mesma dos itens do menu, e a resposta tem de
   estar visivel com o menu FECHADO — acender so o item de dentro seria acender
   uma luz atras da porta. */
.topo__resumo--atual { color: var(--acento); background: var(--acento-suave); }

.topo__resumo--atual:hover { background: var(--acento-suave); }

/* A seta: um triangulo desenhado em borda, ❌ nao um caractere. Um `▾` de fonte
   depende da fonte ter o glifo, e ele sai diferente em cada sistema. */
.topo__seta {
  flex: none;
  width: 0;
  height: 0;
  margin-left: 1px;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  opacity: .75;
  transition: transform .15s ease;
}

/* 🔵 Com o menu aberto a seta vira para CIMA: ela aponta para onde o painel
   esta, e a volta e o unico sinal de que o clique fechou o que o outro abriu. */
.topo__menu[open] .topo__seta { transform: rotate(180deg); }

/* 🔵 O painel cai ABAIXO da barra e por CIMA do conteudo, e ❌ nao empurra nada:
   ele e `position: absolute`, entao a barra continua medindo o que media com o
   menu aberto ou fechado. 📌 E a barra e uma linha em qualquer largura, por
   decisao (ver o `.topo__interno`) — um painel que participasse do fluxo faria
   a tela inteira pular para baixo quando alguem abrisse a conta.

   ⚠️ O `z-index` e 1 DENTRO da barra, e isso e o que basta: a barra inteira esta
   em `10`, abaixo do `20` da lista do combobox — o menu suspenso de um campo
   continua podendo passar por cima do painel, que e a mesma regra que vale para
   a barra (o `topo`, acima). */
.topo__painel {
  position: absolute;
  /* ⚠️ O `100%` é o fundo da CONTA, ❌ não o da barra: a conta mede 32px e está
     centrada numa barra de 47px, então sobram-lhe 8px até a borda de baixo. Os
     12px são esses 8 mais 4 de VÃO — o painel passa a nascer 4px abaixo da
     borda da barra, ❌ não 2px por cima dela (medido: era o que acontecia antes
     do ajuste, e o painel cobria o fio de baixo da barra, parecendo colado). */
  /* 🔄 **A conta deixou de ser um número escrito à mão (02/10/2026).** ⚠️ Antes
     eram `12px` fixos, e eles só valiam porque a conta media `32px` dentro de uma
     barra de `47px` — isto é, o número guardava a medida da barra SEM dizer que a
     guardava. Quando a barra subiu para `56px`, os `12px` teriam colado o painel
     na borda de baixo (o painel cobriria o fio, que é exatamente o defeito que o
     ajuste antigo veio corrigir).

     🔵 **Agora a conta é escrita:** o painel nasce na borda de baixo da BARRA,
     ❌ não na da conta. ⚠️ E o `top` de um `position: absolute` se conta do TOPO
     do bloco contentor, ❌ não do fundo — por isso o `100% +` na frente:
     `100%` é a altura da conta (leva o painel até o fundo dela), e
     `(var(--topo-altura) - 100%) / 2` é o que falta até o fundo da barra (as duas
     estão centradas). Os `5px` são o vão de `4px` mais o fio de `1px`.
     📌 Com a conta em `40px` e a barra em `56px`, o painel desce `53px` e nasce
     `4px` abaixo da barra — e continua dando o certo se qualquer uma das duas
     mudar. */
  top: calc(100% + (var(--topo-altura) - 100%) / 2 + 5px);
  right: 0;
  z-index: 1;
  min-width: 232px;
  padding: 6px;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 10px;
  box-shadow: 0 14px 32px rgba(22, 32, 43, .16);

  /* 🔴 **O MENU QUE SUMIA NA TELA CURTA.** ⚠️ O painel nasce ABAIXO da barra e
     ❌ não tinha teto de ALTURA: numa janela mais baixa que ele, o fim do menu
     caía fora da tela — e ❌ não havia como alcançá-lo. 🔵 A barra é `sticky`
     (`top: 0`), então rolar a página ❌ não move nem a barra nem o painel: o
     último item ficava **inalcançável**, com o painel aberto por cima do
     conteúdo. 📌 Medido em `1200×200`: o painel das `Consultas` ia até `240` e o
     item dos `Glossários` (centro em `206`) ficava abaixo da área visível —
     `elementFromPoint` devolvia `null`.

     🔵 **O teto é o que SOBRA abaixo do painel, ❌ não um número escolhido:** ele
     nasce a `61px` do topo da janela (a conta do `top`, logo acima), e os `72px`
     são esses `61` mais `11` de vão. 📌 Com ele o painel **nunca passa da tela**
     — ele ROLA por dentro, que é o que o menu da barra já faz no outro eixo
     (`overflow-x`). ⚠️ `dvh` quando o navegador conhece: no celular o `100vh`
     conta a barra de endereço, e é a tela curta que este teto atende. */
  max-height: calc(100vh - 72px);
  max-height: calc(100dvh - 72px);
  overflow-y: auto;
  /* ⚠️ Chegar ao fim do menu ❌ não pode começar a rolar a PÁGINA de trás: com a
     barra `sticky`, o painel ❌ não sairia do lugar e o gesto pareceria vazio. */
  overscroll-behavior: contain;
}

.topo__item {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--tinta);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}

.topo__item:hover { background: var(--fundo); }

/* 📌 A tela atual dentro do painel ganha a MESMA marca do item de menu (`cor +
   fundo`), e ❌ nao uma pílula de outro tom: o painel e o menu da barra vistos
   de dentro, e a marca de "onde eu estou" e uma so na ferramenta inteira. */
.topo__item--atual { color: var(--acento); background: var(--acento-suave); }

.topo__item--atual:hover { background: var(--acento-suave); }

/* 🔵 **A frase que EXPLICA o item, dentro do painel.**

   ⚠️ Aqui ela é VISÍVEL, e a diferença com o `.so-leitor` é de LUGAR, ❌ não de
   ideia: o painel tem largura própria (`absolute`, por cima do conteúdo), então
   ele comporta a frase que a fileira ❌ não comporta. 🔵 E é justamente onde ela
   mais serve: quem abre as `Consultas` gastou um toque a mais, e é quem ainda
   ❌ não sabe qual das três telas responde a pergunta dele. 📌 O rótulo diz o
   NOME; esta linha diz a RESPOSTA. */
.topo__item-nota {
  display: block;
  margin-top: 2px;
  color: var(--tinta-fraca);
  font-size: var(--t-xs);
  font-weight: 400;
  line-height: 1.35;
  /* ⚠️ O item do painel é `nowrap` (o nome ❌ não pode quebrar); a frase PODE —
     ela é a única peça do painel que cresce para baixo, ❌ não para o lado. */
  white-space: normal;
}

/* O fio separa o que e de CADA UM (a senha) do que e DA CASA (as contas e a
   credencial) — ver o comentario do Blade. */
.topo__painel-traco {
  display: block;
  height: 1px;
  margin: 6px 4px;
  background: var(--linha);
}

.topo__sair {
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--tinta-fraca);
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 8px 9px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.topo__sair:hover { color: var(--perigo); background: var(--perigo-fundo); }

/* 🔴 O foco do teclado tem de ser VISÍVEL, e a barra é onde ele começa. O
   navegador desenha um contorno próprio em alguns elementos e nenhum em outros
   — e um item de menu focado sem marca é um item que a tecla Tab alcança e o
   olho ❌ não vê. A régua é a mesma dos campos (`outline` de 2px no acento). */
.topo__marca:focus-visible,
.topo__link:focus-visible,
.topo__resumo:focus-visible,
.topo__item:focus-visible,
.topo__sair:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

/* 🔵 Quem pediu ao sistema para reduzir animação ❌ não recebe transição de
   fundo — o realce continua, ele só chega de uma vez. */
@media (prefers-reduced-motion: reduce) {
  .topo__link,
  .topo__resumo,
  .topo__item,
  .topo__seta,
  .topo__sair { transition: none; }
}

/* --- conteudo ------------------------------------------------------------ */

.conteudo {
  /* ⚠️ O MESMO teto da barra (ver o `.topo__interno`): se os dois divergirem, a
     logo deixa de alinhar com a primeira coluna do conteudo abaixo dela. */
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px 16px 72px;
}

/* ============================================================================
   OS TITULOS — as duas unicas camadas de voz alta da ferramenta.

   🔵 **Hierarquia aqui e DEGRAU, ❌ nao tamanho grande.** Antes o `h1` media
   `1.4rem` (22,4px) e o `h2` `1.1rem` (17,6px) — dois valores avulsos, e o
   primeiro grande demais para conviver com uma barra de `14px`. Agora os dois
   saem da escala (`--t-xl` / `--t-lg`), e a razao fica em **20 : 17**, com o
   peso fazendo o resto do trabalho.

   ⚠️ **O `line-height` e o `letter-spacing` sao PARTE do titulo, e nao
   enfeite:** em 20px, o `1.5` do corpo abriria um vao que separaria o titulo do
   subtitulo abaixo dele (que e o par que se le junto); `1.2` mantem os dois
   colados. E o `-0.01em` fecha o fio branco que a Inter abre entre letras
   grandes — 🔵 o mesmo ajuste que qualquer fonte de titulo pede, e que ❌ nao
   se aplica ao corpo (onde ele apertaria a leitura). */
h1 {
  font-size: var(--t-xl);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}

/* ⚠️ **O `margin-top` do `h2` é maior que o do `h1`, e isso tem razao:** o `h1`
   abre a pagina (nada acima dele pede respiro), enquanto o `h2` CHEGA DEPOIS de
   um bloco — e e o espaco de cima que diz "assunto novo", ❌ nao a distancia
   para o texto que ele titula. */
/* ============================================================================
   O `h2` — RÓTULO DE CONTAINER, e ele veste maiúsculas (02/10/2026).

   🔵 **Ele deixou de ser um "título grande" e passou a ser um RÓTULO.** A
   diferença é de PAPEL: um título grande diz *"leia isto primeiro"*; um rótulo diz
   *"aqui começa outro assunto"*. E é o rótulo que combina com o que ele é na
   tela — o nome do CARTÃO (o `.cartao`), ❌ não uma seção de texto corrido.

   ⚠️ **O TAMANHO DESCEU junto com as maiúsculas, e os dois são a MESMA
   decisão.** O `1.17rem`/`--t-lg` (17px) com caixa alta viraria ~19px percebidos
   — encostando no `h1` de `20px`, e o rótulo do cartão passaria a competir com o
   título da PÁGINA. 🔵 E há a razão tipográfica, que é a que manda: **maiúscula
   lê maior que minúscula no mesmo corpo**, porque ❌ não tem a diferença entre
   olho e altura de caixa. 📌 Por isso os `14px` daqui percebem-se como ~15,5px —
   o degrau certo abaixo dos `20px` do `h1` —, e o corpo desce sem que o rótulo
   encolha aos olhos.

   🔵 **O entreletra é o que faz as maiúsculas respirarem, ❌ não um enfeite.**
   Caixa alta tem espaçamento natural apertado (o `A` encosta no `V`), e em bloco
   o rótulo vira uma mancha. O `0.06em` é a mesma ordem dos outros rótulos da
   folha (o `th` da tabela e o complemento da marca), e é o que dá o ar de
   etiqueta em vez de texto gritado.

   🔴 **E `text-transform`, ❌ não o texto escrito em maiúsculas.** As duas formas
   desenham igual, mas só esta preserva o que está ESCRITO: o `h1` da tela
   continua sendo "O que está instalado", e é assim que o leitor de tela o
   anuncia e que o `TitulosDasTelasTest` o lê. 📌 Maiúscula na fonte é decisão de
   FORMA; no conteúdo, seria decidir pela pessoa que lê.
   ========================================================================== */
h2 {
  font-size: var(--t-sm);
  font-weight: 700;
  /* O entreletra vale para a caixa alta; o dialog que reusar o `h2` o desliga. */
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.4;
  color: var(--tinta);
  margin: 28px 0 12px;
}

/* ============================================================================
   O `h3` — o DEGRAU QUE FALTAVA, e ele faltava por escrito.

   🔴 **Não havia regra nenhuma de `h3`, e o defeito era pior que a ausência:**
   sem regra, o navegador aplicava o padrão dele (`1.17em` + margens de `1em`). Em
   corpo de `15px` isso dá **`17,55px`** — ou seja, o SUBTÍTULO de uma seção ficava
   **MAIOR que o `h2`** (`17px`) que o titula. 📌 Medido na tela `Ler o rótulo`:
   "Camada 1 — o OCR" media `17,55px` contra os `17px` de "O que está instalado".
   🔵 A hierarquia ❌ não estava fraca: estava **INVERTIDA**, e era isso que fazia
   a página parecer pesada — três títulos grandes e igualmente fortes competindo
   dentro do mesmo cartão, cada um com `17,5px` de margem do navegador.

   🔵 **O degrau é o `--t-base` (15px) com peso `600`, ❌ não um tamanho novo.** O
   vizinho de cima é o `h2` (`17px`/`700`) e o de baixo é a prosa (`15px`/`400`);
   o subtítulo fica no tamanho da prosa e se separa dela pelo PESO e pelo VÃO —
   que é hierarquia por ênfase, ❌ não por tamanho. ⚠️ Um degrau a mais aqui
   (`14px`) faria o subtítulo menor que o próprio texto que ele titula, que é o
   erro espelhado deste. */
h3 {
  font-size: var(--t-base);
  font-weight: 600;
  line-height: 1.4;
  color: var(--tinta);
  /* ⚠️ O vão de cima (`20px`) é o que faz as vezes do tamanho: é ele que diz
     "aqui começa outro assunto" dentro do cartão. O de baixo (`8px`) é curto de
     propósito — o subtítulo pertence ao bloco que ele abre. */
  margin: 20px 0 8px;
}

.subtitulo {
  color: var(--tinta-fraca);
  margin: 0 0 24px;
}

/* --- cartao -------------------------------------------------------------- */

.cartao {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 24px;
  margin-bottom: 24px;
}

.cartao--estreito {
  max-width: 460px;
  margin: 48px auto;
}

/* ============================================================================
   AS PONTAS DO CARTAO E DA JANELA — o vao que o template estava inventando a mao.

   🔴 **O defeito era medido, e o sintoma era o proprio HTML.** O `.cartao` tem
   `padding: 24px`; o `h2` traz `28px` de margem de cima e os parágrafos trazem o
   vao de baixo do navegador. Nas PONTAS esses vaos ❌ nao separam nada — estao
   entre o texto e o `padding` que ja existe —, e por isso **quinze arquivos de
   template traziam `style="margin-top: 0"` e `style="margin-bottom: 0"`
   escritos no meio do markup** para os anular. 📌 Medido em `02/10/2026`: eram
   **mais de 60 ocorrencias** de `style="margin..."` nos `resources/views`, e a
   maioria absoluta era exatamente esta.

   ⚠️ **Um valor que o template precisa desmentir é um valor errado no lugar
   errado** — a mesma conclusão que o comentario da `.campo__ajuda` ja tinha
   tirado para o vao de cima. 🔵 Aqui a regra e de CONTEXTO e vale para toda
   ponta: o primeiro filho ❌ nao empurra para baixo, o ultimo ❌ nao empurra para
   cima. Assim o `padding` do cartao volta a ser o unico dono do respiro da
   borda, e o template volta a poder ser so o conteudo.

   📌 **O `.ajuda__corpo` entra na mesma regra porque a ponta é do contentor, ❌
   não da peça que o ocupa.** Sem ela, o `12px` de baixo da `.lista` somaria com o
   `padding` do corpo e a janela da leitura fecharia com `28px` de ar onde o desenho
   pede `16`.
   ⚠️ **A metade de CIMA dela é inerte hoje, e a medição diz por quê:** quem abre a
   janela da classe é um `<p class="campo__ajuda">`, e o `<dialog>` mora DENTRO de um
   `.campo` — então os `4px` do `.campo .campo__ajuda` vencem os `0px` desta regra, e
   o vão do topo sai com `16px` (12 do padding + 4). 📌 É o valor certo, e por isso a
   regra fica: ela descreve a ponta, e não o caso de hoje.
   ========================================================================== */
.cartao > :first-child,
.ajuda__corpo > :first-child { margin-top: 0; }

.cartao > :last-child,
.ajuda__corpo > :last-child { margin-bottom: 0; }

/* 🔵 A ajuda na PONTA do cartão é um "saiba mais", ❌ não a linha de baixo de um
   rótulo: dentro do campo os `6px` do `.ajuda__abre` valem, e aqui ela pede o vão
   do parágrafo — que é o mesmo contexto que o `.campo__ajuda` resolve com os
   `16px` dele.

   ⚠️ **E aqui ela vira BLOCO, ❌ não `inline-flex` como no campo — o defeito era
   medido.** Como elemento INLINE numa linha só dele, a margem de baixo do parágrafo
   acima ❌ não encolhe com a dele, e o vão saía **`30px`** (os `14px` do parágrafo
   + os `16px` do botão) em vez dos `16px` de um intervalo de parágrafo. 📌 Como
   bloco, as duas margens se encontram e vale a maior. O `width: fit-content`
   devolve o que o `inline` dava de graça: ❌ não esticar a área clicável pela
   largura do cartão.

   🔵 O `:not(:first-child)` é o que impede o `16px` de brigar com a regra das
   pontas: quando a ajuda é o primeiro (e único) filho do cartão — que é o caso da
   lista das classes —, quem manda é o `padding`, e ❌ não a margem. */
.cartao > .ajuda__abre:not(:first-child) {
  display: flex;
  width: fit-content;
  margin-top: 16px;
}

/* --- formularios --------------------------------------------------------- */

.campo { margin-bottom: 20px; }

.campo__rotulo {
  display: block;
  font-weight: 600;
  font-size: var(--t-sm);
  margin-bottom: 6px;
}

/* ============================================================================
   A AJUDA — e ela tem DOIS papéis, que antes recebiam o mesmo vão de `4px`.

   🔴 **O defeito era medido.** Esta classe nasceu como a linha que explica o
   CAMPO logo acima dela — e ali `4px` é o certo: os dois são uma peça só. Mas os
   templates passaram a usá-la também como o **PARÁGRAFO DE FECHAMENTO do cartão**
   ("A foto é lida e descartada…", na tela `Ler o rótulo`), e nesse papel ela
   herdava os mesmos `4px` de cima — 🔵 ou seja, a prosa que explica o cartão
   inteiro nascia **colada no bloco anterior**, sem uma linha de ar. 📌 Medido: no
   cartão da foto, o parágrafo começava `4px` abaixo dos botões.

   ⚠️ **E o sintoma de que o vão estava errado é que os próprios templates o
   corrigiam à mão:** há `style="margin-top: 0"` e `style="margin: 16px 0 0"`
   escritos em vários arquivos, cada um inventando o respiro que a folha devia
   ter dado. 🔵 Um valor que o template precisa desmentir é um valor errado no
   lugar errado.

   📌 **A correção é por CONTEXTO, ❌ não por um número novo:** o vão de `16px`
   passa a ser o padrão (o papel de prosa), e o de `4px` fica reservado para
   quando a ajuda está DENTRO de um campo — que é a condição que a distingue.
   ========================================================================== */
.campo__ajuda {
  color: var(--tinta-fraca);
  font-size: var(--t-sm);
  margin-top: 16px;
}

/* 🔵 A ajuda DENTRO de um campo é a linha de baixo do controle, e só ali os
   `4px` valem: é o mesmo parágrafo que explica o que está logo acima, e um vão
   de parágrafo entre os dois os separaria em duas coisas. */
.campo .campo__ajuda { margin-top: 4px; }

/* O rotulo carrega o nome e a dica: a dica explica o CAMPO, entao ela anda
   colada nele — separada, vira texto solto que ninguem liga ao controle. */
.campo__nome { display: block; }

.campo__dica {
  display: block;
  font-weight: 400;
  font-size: var(--t-xs);
  color: var(--tinta-fraca);
}

/* 🔴 O aviso do campo e para o ERRO do que foi digitado, ❌ nao para enfeite:
   e a cor da perigo e ele so existe quando ha algo a corrigir. */
.campo__aviso {
  color: var(--perigo);
  font-size: var(--t-sm);
  margin: 6px 0 0;
}

.campo__ajuda code,
.campo__aviso code {
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: 4px;
  padding: 1px 4px;
  font-size: var(--t-xs);
}

/* 🔴 **O `input[type="file"]` entra nesta lista, e o defeito era visível:** ele
   ficou de fora dela desde sempre, e ❌ não há regra nenhuma de `file` na folha —
   então o navegador desenhava o controle NATIVO, com a fonte de `13,3px` de
   fábrica e uns 22px de altura. 📌 Medido na tela `Ler o rótulo`: o campo de
   arquivo media **menos da metade** dos `44px` dos campos ao lado, e a fonte era
   `13,3px` contra os `15px` de todo o resto — 🔵 o "Escolher arquivo / Nenhum
   arquivo escolhido" que se lê como sobra de outra tela. E ele é o CAMINHO DE
   SEMPRE do rótulo (as outras duas portas dependem de aparelho), ❌ não um
   detalhe: é o controle que mais precisa parecer um campo.

   ⚠️ **A caixa é a mesma das outras entradas** — `44px`, `font: inherit`, a borda
   e o raio —, e por isso ele entra AQUI em vez de ganhar uma regra própria: duas
   listas de campos seriam duas verdades sobre a mesma altura. O que é só dele (o
   botão de dentro) mora logo abaixo. */
input[type="text"],
input[type="number"],
input[type="password"],
input[type="file"],
select,
textarea {
  width: 100%;
  /* 44px de altura: o minimo para o dedo nao errar no celular. */
  min-height: 44px;
  padding: 10px 12px;
  font: inherit;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 6px;
}

/* ⚠️ **O campo de arquivo pede MENOS recuo vertical que os outros, e a razão é
   que a altura dele já vem de dentro:** quem desenha o miolo é o botão, de `36px`
   (o `padding` dele mais a linha de `24px`). Somando o `10px` dos campos de texto
   por fora, ele fechava em **`63px`** — 17px mais alto que os `46px` dos campos
   vizinhos, que é a desproporção que se vê antes de saber medir. 📌 Com `4px` fora
   e `5px` no botão, os dois fecham em **`46px`**, que é a altura dos outros. */
input[type="file"] { padding: 4px 10px; }

/* 🔵 O BOTÃO DE DENTRO do campo de arquivo — a única parte dele que se pode
   vestir. O botão nativo é do sistema e ignora `font: inherit` do campo: sem
   esta regra ele sai com a fonte de fábrica (pequena) dentro de uma caixa de
   `15px`, que é o desencontro que se vê. 📌 As duas grafias são necessárias:
   `::file-selector-button` é o padrão, e `::-webkit-file-upload-button` é o nome
   que o WebKit antigo entende — e um campo sem estilo de botão continua legível,
   que é o que faz esta duplicação ser barata. */
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
  font: inherit;
  font-weight: 600;
  color: var(--tinta);
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: 6px;
  padding: 5px 12px;
  margin-right: 10px;
  cursor: pointer;
}

/* ⚠️ O realce do botão é o mesmo dos campos: o acento na borda e a tinta do
   acento no texto. 🔵 Sem ele, o botão de dentro seria o único controle da tela
   que ❌ não responde ao ponteiro. */
input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover {
  color: var(--acento-escuro);
  background: var(--acento-suave);
  border-color: var(--acento);
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
  border-color: var(--acento);
}

/* A area de texto leva varias linhas e nao deve crescer sozinha: a altura e a
   que o `rows` pede, e o operador a ajusta se quiser. */
textarea {
  resize: vertical;
  line-height: 1.5;
}

.campo__erro {
  color: var(--perigo);
  font-size: var(--t-sm);
  margin-top: 4px;
}

.campo--caixa {
  display: flex;
  align-items: center;
  gap: 8px;
}

.campo--caixa input { min-height: 0; }
.campo--caixa label { margin: 0; }

/* 🔵 **A caixa de marcação veste a COR DA MARCA — e `accent-color` é uma linha,
   ❌ não um desenho próprio.** A caixa continua sendo a do sistema, com o alvo de
   toque, o anel de foco e o contraste que o próprio sistema garante; o que ela
   deixa é o **azul de fábrica**, que era a única cor da ferramenta que ❌ não
   vinha de lugar nenhum dela. 📌 São 5 caixas (entrar, superadmin, credencial,
   etiqueta e glossários), e todas apareciam em azul no meio de uma tela roxa. */
input[type="checkbox"],
input[type="radio"] { accent-color: var(--acento); }

/* --- o campo com a acao ao lado ------------------------------------------ */

/* 🔵 O botao que SUBMETE este campo, e nao um botao qualquer da tela — por isso
   ele anda junto com o campo, na mesma linha, como o olho do `.senha`. ⚠️ Sem
   isto, um campo de `width: 100%` fecha a linha sozinho e o botao cai para a de
   baixo, colado na borda do campo: foi o que acontecia na correcao a mao do
   §7.1, onde o motivo e o "Desmarcar" ficavam em duas linhas dentro da mesma
   celula (R-227).

   ⚠️ **O piso de `12rem` e MEDIDO, e vale para o celular.** Dentro de uma tabela
   que rola (`.tabela__rolagem`), o campo encolheria ate os 26px medidos numa
   janela de 390px — e um campo de 26px nao recebe uma frase. Com o piso, quem
   cede e a TABELA: ela rola, que e o desenho dela, e o campo continua campo. */
.campo--acao {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.campo--acao input,
.campo--acao select { flex: 1 1 auto; min-width: 12rem; }

.campo--acao button { flex: 0 0 auto; }

/* --- o campo de senha com o botao de exibir/ocultar ---------------------- */

/* 🔵 O botao e IRMAO do input, e nao flutuando por cima dele. Dois motivos:
   o alvo de toque fica com os 44px inteiros (a ferramenta e usada com a caixa
   na mao), e nenhuma medida magica de `padding-right` precisa adivinhar a
   largura do texto — que muda entre "Mostrar" e "Ocultar". E o mesmo desenho
   em duas colunas do `.composto` (§2.5). */
.senha {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.senha input { flex: 1 1 auto; min-width: 0; }

.senha__olho {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 14px;
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--acento);
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 6px;
  cursor: pointer;
}

.senha__olho:hover { background: var(--fundo); }

/* Com a senha a mostra o botao deixa de ser uma ACAO pendente e passa a ser o
   estado atual: recua para a cor fraca, como o `.derivada` da classe. */
.senha__olho[aria-pressed="true"] {
  color: var(--tinta-fraca);
  background: var(--fundo);
}

/* --- o campo de foto (as tres portas ate a mesma imagem) ------------------ */

/* 🔵 O bloco ❌ nao tem forma propria: quem desenha o rotulo e a entrada e o
   `.campo` de sempre. O que nasce aqui e o que ele ainda nao tinha — o botao da
   webcam e a previa do que entrou. */
/* 🔵 **A CAMERA DO COMPUTADOR E UMA PORTA DO CAMPO, entao ela mora NO campo
   (02/10/2026).** O botao estava FORA do `.campo`, como irmao dele, e o preco era
   medido: entre o controle e o botao que o preenche havia um paragrafo de ajuda
   inteiro — **`69px` de distancia na tela do rotulo**, com o botao parecendo
   solto no meio do cartao, que e exatamente o "botao jogado ao leo" que se via.
   📌 O campo de arquivo e o botao da camera fazem a MESMA coisa (entregam a foto
   no mesmo `input`), e o que faz o mesmo trabalho anda junto. Agora o vao e de
   `10px`: o suficiente para ❌ nao colarem, e curto para lerem como uma peca so. */
.foto__webcam {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 10px 0 0;
}

/* 🔴 O `hidden` NAO se defende sozinho de um `display: flex` — a regra do
   navegador para `[hidden]` perde para qualquer classe, e o botao nasceria
   visivel mesmo sem JavaScript. ⚠️ E o defeito seria exatamente o que o
   componente promete evitar: um botao que oferece a camera e nao abre nada. */
.foto__webcam[hidden] { display: none; }

.foto__nota {
  font-size: var(--t-sm);
  color: var(--tinta-fraca);
}

.foto__previa {
  margin: 14px 0 0;
  padding: 0;
}

/* ⚠️ O `max-height` e o que impede a previa de empurrar o botao de enviar para
   fora da tela: a foto de um celular tem 4000px de altura, e no tamanho natural
   ela sozinha ocuparia a tela inteira. */
.foto__imagem {
  display: block;
  max-width: 100%;
  max-height: 220px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}

.foto__legenda {
  margin-top: 6px;
  font-size: var(--t-xs);
  color: var(--tinta-fraca);
}

/* --- a janela da camera --------------------------------------------------- */

/* 🔴 **A camera veste a MESMA casca da ajuda e da janela — e isto e uma
   CORRECAO, ❌ nao uma semelhanca (02/10/2026).** Ate aqui ela tinha medidas
   proprias (`min(680px, …)`, sem `max-height` e sem `overflow`), e o que sobrava
   era o PADRAO DO NAVEGADOR: `overflow: auto` na caixa INTEIRA. Isso rola
   **titulo e botoes junto** — e 🔴 **medido em `1200x360`**, com o video alto ou
   com o recado de erro na tela, o botao *Tirar foto* ficava **269px abaixo da
   area visivel da janela**. E exatamente o defeito que o `.janela__pe` existe
   para impedir (*"o botao que salva nao pode sair da tela justamente quando a
   tela diz o que corrigir"*).

   📌 **A forma dela mora com as outras duas**, no bloco `--- janelas ---` do fim
   deste arquivo: largura, teto, fundo, sombra e `overflow: hidden` sao a MESMA
   peca, e um segundo conjunto de medidas daria tres janelas que quase coincidem
   — a que alguem corrigisse primeiro. Aqui fica so o que e DESTA janela: o video
   e o recado. */

/* ⚠️ O fundo preto e o `contain` sao o que faz a imagem se ler: num aparelho
   cuja camera e mais larga que alta, a barra preta diz onde a imagem termina —
   e a previa deixa de "vazar" para o fundo branco da janela.

   🔴 **O teto deixou de ser `60vh` sozinho, e a razao e a casca nova:** a janela
   para em `min(85vh, 720px)`, e num monitor alto o `60vh` sozinho passa a pedir
   MAIS que a janela inteira — o video estouraria o proprio teto e o corpo
   comecaria a rolar POR CAUSA DELE. Os `480px` sao o ponto em que o video deixa
   de comer a janela em tela alta; abaixo disso quem manda continua sendo o
   `60vh`, que e o que impede o video gigante em tela baixa. */
.camera__video {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(60vh, 480px);
  background: #000;
  border-radius: var(--raio);
  object-fit: contain;
}

.camera__recado {
  margin: 12px 0 0;
  font-size: var(--t-sm);
  color: var(--tinta-fraca);
}

/* 🔵 O vermelho e do DEFEITO, e nao do aviso de espera: *"conectando a camera"*
   e *"a permissao foi negada"* sao a mesma linha da tela, e pintar as duas de
   vermelho ensina a ignorar o vermelho — 🔴 o mesmo criterio que o
   `LinguagemDasTelasTest` usa para um vermelho errado. */
.camera__recado--erro { color: var(--perigo); }

/* --- botoes -------------------------------------------------------------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  font: inherit;
  font-weight: 600;
  color: var(--papel);
  background: var(--acento);
  border: 1px solid var(--acento);
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
}

.botao:hover { background: var(--acento-escuro); border-color: var(--acento-escuro); }

.botao--discreto {
  color: var(--tinta);
  background: var(--papel);
  border-color: var(--linha);
}

.botao--discreto:hover { background: var(--fundo); }

.botao--perigo {
  color: var(--perigo);
  background: var(--papel);
  border-color: var(--linha);
}

.botao--perigo:hover { background: var(--perigo-fundo); border-color: var(--perigo); }

.botao--largo { width: 100%; }

/* ============================================================================
   O BOTÃO DE LINHA — `--pequeno` + `--fantasma`, e as duas metades têm razão
   PRÓPRIA (02/10/2026).

   🔴 **O defeito que eles fecham foi medido na lista de marcas:** a célula das
   ações empilhava um `Editar` e um `Desativar` de `46px` cada, um sobre o outro
   — a célula media **`99px`** e a linha, **`126px`**. ⚠️ Numa lista de **209
   marcas** isso é uma página de `24.735px`, e o olho perde a coluna entre uma
   linha e a seguinte. 🔵 **A causa era o `flex-wrap: wrap` do `.acoes` dentro
   de uma célula estreita:** dois botões de `44px` não cabem lado a lado, e o
   `wrap` resolve a falta de espaço **empilhando** — que, numa coluna de ações,
   é o mesmo que dizer *"esta tabela não tem linhas"*.

   📌 **As duas metades resolvem coisas diferentes:**

     · **`--pequeno` é `36px`, o `sm` da escala de botão do `UI-E-DESIGN-SYSTEM`
       §4.2 (`sm` 36 / `md` 44 / `lg` 52).** ⚠️ Ele ❌ não substitui os `44px` do
       resto da ferramenta: a ação PRINCIPAL de uma tela continua no tamanho do
       dedo. 🔵 A ação DE LINHA é o outro caso — ela é secundária, e a densidade
       ali é função (§5: *"densidade só onde ela é função — tabela do painel"*).

     · **`--fantasma` tira a moldura e deixa a TINTA.** 🔴 É o mesmo raciocínio
       que esta folha já registrava para a barra de topo: *"uma barra de botões
       de borda cheia não hierarquiza nada — todos pesam igual"*. ⚠️ Numa coluna
       de ações, um botão de borda por linha (são sete nas sete primeiras
       linhas) compete com o botão principal da página, e é o principal que
       precisa vencer.
   ========================================================================== */
.botao--pequeno {
  min-height: 36px;
  padding: 6px 12px;
  font-size: var(--t-sm);
}

/* 🔵 O fantasma continua sendo um BOTÃO, e ❌ não um link: o alvo do dedo é a
   área do `padding` (a mesma nas duas direções), e o realce de passagem é o
   fundo suave — ❌ não a borda, que é justamente o que ele não tem. */
.botao--fantasma {
  color: var(--acento);
  background: none;
  border-color: transparent;
}

.botao--fantasma:hover {
  color: var(--acento-escuro);
  background: var(--acento-suave);
  border-color: transparent;
}

/* ⚠️ **O perigo fantasma vem DEPOIS — e tem de vir.** Ele tem o MESMO peso de
   seletor do `.botao--fantasma:hover` (dois seletores de classe), e empate de
   peso se resolve por ORDEM: 🔴 sem estas duas linhas, o ponteiro sobre o
   `Desativar` puxaria o roxo do fantasma comum, e o vermelho da única ação
   destrutiva da linha desapareceria exatamente quando o dedo está em cima dela. */
.botao--perigo.botao--fantasma { color: var(--perigo); }

.botao--perigo.botao--fantasma:hover {
  color: var(--perigo);
  background: var(--perigo-fundo);
  border-color: transparent;
}

.acoes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 28px;
}

/* ============================================================================
   AS AÇÕES DE UMA LINHA DA TABELA (`--linha`) — a terceira metade do conserto.

   🔵 **O que muda, e por que cada linha é o que é:**

     · **`nowrap`** — era o `wrap` do `.acoes` que empilhava as ações e fazia a
       linha de `126px`. Numa célula de ações, quebrar ❌ não é ceder espaço: é
       a lista deixar de ter LINHAS, que é a única coisa que uma lista tem.
     · **`justify-content: flex-end`** — a coluna é a ÚLTIMA da tabela, e a ação
       pertence à borda direita: alinhada à esquerda ela boiaria no meio do vão
       da célula, longe do olho que acabou de ler a linha.
     · **`margin-top: 0`** — ⚠️ e este é o valor que os templates vinham
       DESMENTINDO com `style="margin-top: 0"` escrito no Blade, linha por linha.
       📌 É o mesmo defeito que o comentário das pontas do cartão já registrava
       (*"um valor que o template precisa desmentir é um valor errado no lugar
       errado"*): agora ele tem dono aqui, e o Blade volta a ser só conteúdo.
   ========================================================================== */
.acoes--linha {
  margin-top: 0;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 2px;
}

/* 🔵 O fio entre o que EDITA e o que TIRA da régua: são duas naturezas de ação —
   uma corrige o cadastro, a outra tira a linha do gerador —, e o fio as separa
   sem gastar uma cor. ⚠️ A MESMA peça do `.topo__traco`, e pela mesma razão: o
   que é pontuação se desenha em 1px de tinta, ❌ não num caractere. */
.acoes__traco {
  flex: none;
  width: 1px;
  height: 16px;
  margin: 0 4px;
  background: var(--linha);
}

/* --- avisos -------------------------------------------------------------- */

/* 🔄 **O aviso ficou mais leve (02/10/2026).** Ele era um retângulo com o
   perímetro INTEIRO na cor cheia do tom (`#1d6b45` na versão verde), e num
   cartão com dois avisos empilhados isso vira a moldura mais forte da tela —
   o olho lê a caixa antes do recado.

   🔵 Agora a cor cheia vive só na BARRA da esquerda, que é o que diz o tom, e o
   resto do perímetro usa a linha aberta do mesmo tom (`--ok-linha` e as irmãs).
   📌 É a forma que a barra de status já usa em todo lugar: **o tom na ponta, o
   fundo claro, e ❌ não um contorno escuro em volta de tudo.**

   ⚠️ **Os recuos são por LADO, e ❌ não `border-color` de uma vez:** assim a
   barra da esquerda fica com o tom cheio e os outros três lados com a linha
   clara — que é a assimetria que faz o aviso ler como anotação na margem. */
.aviso {
  padding: 14px 16px;
  border-style: solid;
  border-width: 1px 1px 1px 3px;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: var(--t-base);
}

/* 🔵 **O parágrafo dentro do aviso ❌ não precisa mais se defender do vão.**
   Antes, cada `<p>` lá dentro vinha com `style="margin-top: 0"` ou
   `style="margin-bottom: 0"` escrito no Blade — porque o vão de parágrafo da
   prosa fazia o primeiro e o último parágrafo descolarem da caixa que os
   contém. ⚠️ O conserto estava no lugar errado: o vão é do parágrafo ENTRE
   parágrafos, e as pontas do aviso ❌ não são intervalo nenhum. */
.aviso > p:first-child { margin-top: 0; }
.aviso > p:last-child { margin-bottom: 0; }

.aviso--ok {
  color: var(--ok);
  background: var(--ok-fundo);
  border-color: var(--ok-linha) var(--ok-linha) var(--ok-linha) var(--ok);
}

.aviso--erro {
  color: var(--perigo);
  background: var(--perigo-fundo);
  border-color: var(--perigo-linha) var(--perigo-linha) var(--perigo-linha) var(--perigo);
}

.aviso--aviso {
  color: var(--aviso);
  background: var(--aviso-fundo);
  border-color: var(--aviso-linha) var(--aviso-linha) var(--aviso-linha) var(--aviso);
}

.aviso ul { margin: 0; padding-left: 18px; }

/* ============================================================================
   A TABELA — e ela é o PAINEL da ferramenta, ❌ não uma grade de linhas soltas.

   🔴 **O defeito era medido, e era de DENSIDADE (02/10/2026).** Cada linha da
   lista de marcas media **`126px`**: a célula das ações empilhava dois botões
   (`99px`) e o recuo da célula somava `13px` em cima e embaixo. ⚠️ Com **209
   marcas**, o resultado era uma página de **`24.735px`** — **196 telas** de
   rolagem para ler uma lista que se lê em três, com o olho perdendo a coluna a
   cada troca de linha.

   🔵 **A régua que ela passa a seguir é a do §4.2/§5 do `UI-E-DESIGN-SYSTEM`:**
   linha de tabela de painel com **densidade alta**. 📌 E densidade, aqui, ❌ não
   é "apertar": é fazer a lista ser **VARRIDA** em vez de lida — que é o que a
   pessoa faz com uma régua de 209 linhas.

   ⚠️ **As três peças, e cada uma responde por um terço do defeito:**

     1. o **recuo da célula** caiu de `13px` para `9px` — a linha respira pelo
        TEXTO, ❌ não pela moldura;
     2. as ações da linha viraram **`--pequeno` + `--fantasma`, numa linha só**
        (o bloco dos botões, acima) — a linha passa a ter a altura da ação;
     3. o conjunto virou **UM painel** — contorno, raio e cabeçalho com fundo —,
        para a lista se ler como BLOCO, e ❌ não como uma mancha branca que
        começa e termina em lugar nenhum.
   ========================================================================== */

/* 🔵 **O contorno é do ROLO, ❌ não da `<table>`.** A `.tabela__rolagem` é o que
   rola no celular (o comentário dela mora aqui agora), então é ela que desenha o
   painel: a borda fica PARADA e a tabela anda por dentro. ⚠️ Se o contorno
   fosse da `<table>`, ele rolaria junto e a lista pareceria escapar do próprio
   quadro — e é o `overflow` dela, ainda por cima, que recorta o canto do
   cabeçalho no raio (um `border-radius` de célula ❌ não vale num
   `border-collapse: collapse`). */
.tabela__rolagem {
  overflow-x: auto;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}

/* ⚠️ **Dentro de um cartão, a tabela NÃO desenha o próprio contorno** — quem
   emoldura já é o cartão. 🔴 E isto é uma correção de percurso, ❌ não uma
   preferência: os sete lugares que põem uma tabela dentro de um cartão (a
   abertura, o `Já no site`, a leitura da IA, a conferência e o pronto do lote e
   o `o que mudou`) sairiam com **caixa dentro de caixa** — duas molduras
   paralelas a `1px`, que é o desenho que faz uma tela parecer montada por
   acidente.

   🔵 **A regra é de CONTEXTO, ❌ não uma segunda classe no Blade:** a mesma
   tabela deve ficar certa nos dois lugares sem que ninguém precise lembrar de
   trocar a classe — que é o mesmo critério da `.campo .campo__ajuda` e da ponta
   do cartão, logo acima. 📌 E o `background` fica: dentro do cartão o papel já é
   branco, e manter a linha é o que faz o desenho valer também onde o cartão
   ainda não chegou. */
.cartao .tabela__rolagem {
  border: 0;
  border-radius: 0;
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  background: var(--papel);
  font-size: var(--t-base);
}

.tabela th, .tabela td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--linha);
  vertical-align: middle;
}

/* 🔵 **O cabeçalho é uma FAIXA, ❌ não uma linha de texto em caixa alta.** Com o
   fundo do tom de apoio, o nome das colunas se separa do conteúdo por BLOCO —
   e a caixa alta, que sozinha era só um sussurro cinza, passa a ter contraste
   de onde puxar. ⚠️ O `nowrap` é o que impede `CATEGORIA` de quebrar em duas
   linhas e inflar o cabeçalho numa tela estreita. */
.tabela th {
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--tinta-fraca);
  background: var(--fundo);
  white-space: nowrap;
}

/* 🔵 **A linha sob o ponteiro se acende — e numa tabela de seis colunas isso ❌
   não é enfeite, é o que mantém o olho NA LINHA.** Sem o realce, atravessar
   `Código` → `Nome` → `Perfil` → `Categoria` → `Estado` → ação é uma leitura que
   se refaz a cada linha; com ele, a faixa diz onde a leitura começou. */
.tabela tbody tr:hover { background: var(--fundo); }

.tabela tr:last-child td { border-bottom: none; }

/* 🔴 **O código veste monoespaçada, e isto ❌ não é enfeite.** Esta coluna é
   CONFERIDA contra a planilha do ERP, e em fonte de largura variável o `I` e o
   `1` — que o alfabeto do SKU usa — se confundem justamente na hora da
   conferência. 📌 É a mesma razão (e a mesma família) do `.codigo` do gerador. */
.tabela code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ⚠️ **A nota dentro da célula é SUB-LINHA, ❌ não prosa.** O `--t-sm` da
   `.lista__nota` é o vão de um item de lista; na tabela ele compete com a
   primeira linha da própria célula e devolve à linha os pixels que o recuo
   acabou de devolver.

   📌 **E ela tem teto de largura porque ela é FRASE, ❌ não rótulo:** a razão de
   uma linha não poder ser editada (*"já entrou em SKU emitido: só se
   desativa"*) tem 39 caracteres, e sem teto ela esticaria a coluna do estado até
   virar a mais larga da tabela — empurrando para longe justamente o selo que ela
   explica. ⚠️ O teto é em `ch`, e não em `px`, para ele acompanhar o corpo da
   letra se a escala mudar. */
.tabela .lista__nota {
  font-size: var(--t-xs);
  line-height: 1.45;
  max-width: 24ch;
}

/* 🔵 **As duas colunas que ❌ não podem ser esticadas:** elas são FATO CURTO — um
   selo e uma ação —, e a largura que sobra é das colunas de texto. ⚠️ O `1%` é o
   mínimo que uma célula aceita: o navegador entrega a ela o conteúdo e reparte o
   resto entre as outras, que é o que se quer de uma coluna de estado.

   ⚠️ **O `nowrap` fica só na coluna das AÇÕES, ❌ não na do estado:** naquela ele
   é o que impede as duas ações de se empilharem (o defeito original); nesta ele
   faria o contrário do que se quer — a razão escrita ficaria numa linha só, e a
   coluna do estado viraria a mais larga da tabela. 📌 O selo já tem o `nowrap`
   DELE, no `.etiqueta`, que é onde ele pertence. */
.tabela__estado { width: 1%; }

.tabela__acoes {
  width: 1%;
  white-space: nowrap;
  /* E a ação pertence à BORDA: ela é o fim da linha, ❌ não um bloco no meio
     dela. */
  text-align: right;
}

/* 🔵 **As colunas de CONTAGEM alinham pela direita e usam número tabular.** Três
   números de larguras diferentes (`0`, `7`, `209`) alinhados à esquerda fazem a
   coluna parecer torta, e a leitura de cima para baixo — que é a única leitura
   de uma coluna de contagem — vira uma comparação de posições. ⚠️ E o `tabular`
   é o mesmo token do `.numero__valor`: com ele, trocar `9` por `10` ❌ não mexe
   na largura do dígito, e a coluna para de tremer quando o dado muda. */
.tabela__numero {
  width: 1%;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   A ETIQUETA DE ESTADO — o chip com PONTO.

   🔴 **O defeito era de HIERARQUIA, e ele foi medido na tela (02/10/2026).** O
   estado é a coluna que decide a LINHA INTEIRA — *"posso editar?"*, *"isto já
   saiu num SKU?"* —, e era justamente a mais FRACA da tabela: `12px` em
   `--tinta-fraca` (`#5b6b7c`, **4,0:1** sobre o branco), sem fundo e sem marca.
   ⚠️ Na mesma linha, o botão `Desativar` tinha `15px` de tinta CHEIA: 🔵 o olho
   lia a AÇÃO antes do ESTADO — e é o estado que decide se a ação pode existir.

   🔵 **O ponto à esquerda é o que faz o chip se ler como ESTADO**, ❌ não como um
   texto com moldura em volta: é a forma que a barra de status usa em todo lugar.
   📌 E ele é `currentColor`, ❌ não uma cor própria — assim cada variante declara
   o próprio tom UMA vez, no `color`, e o ponto acompanha.

   ⚠️ **`inline-flex` no lugar do `inline-block`** porque agora há duas peças
   (ponto e texto) que precisam alinhar pelo CENTRO: com o `inline-block`, o
   ponto boiaria na linha de base do texto, que é um ou dois pixels acima do
   meio — o desencontro que se vê sem saber nomear.
   ========================================================================== */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 9px 1px 7px;
  font-size: var(--t-xs);
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid var(--linha);
  background: var(--papel);
  color: var(--tinta-fraca);
  white-space: nowrap;
}

.etiqueta::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}

/* 🔵 **O `código do sistema` e o `em uso` ficam com o ACENTO — e ❌ não com o
   vermelho da perigo.** Os dois são FATO, ❌ não defeito: o `SMR` é um código do
   padrão, e o `em uso` quer dizer *"esta linha já saiu"*. ⚠️ O fundo suave entra
   porque os dois são os estados que o operador precisa ACHAR na lista — eles são
   a minoria, e a minoria é que merece a cor cheia. */
.etiqueta--super {
  color: var(--acento);
  border-color: var(--acento);
  background: var(--acento-suave);
}

/* ⚠️ **O aviso é o §5.4 visto de fora:** o `rascunho` (`PROPOSTA`) e o `fora da
   régua` parecem estado comum e ❌ não são — eles dizem *"este código NÃO entra
   em SKU emitido"*, que é a única coisa da lista capaz de estragar um lote. 📌 A
   tinta do aviso, e ❌ não a da perigo: ninguém errou nada. */
.etiqueta--aviso {
  color: var(--aviso);
  border-color: var(--aviso-linha);
  background: var(--aviso-fundo);
}

/* 🔵 **O `desativada` é o estado APAGADO, e o ponto dele é VAZIO — de
   propósito.** Ele é o único que fala do que a linha NÃO faz mais, e o miolo
   branco o distingue do `livre` (ponto cheio) sem precisar de outra cor: 🔵 os
   dois são cinza, e o que os separa é a FORMA. ⚠️ E o fundo recua para o tom do
   papel de trás, que é o mesmo sinal que a `.foto__imagem` apagada e o campo
   `disabled` já usam para dizer *"este aqui não está no jogo"*. */
.etiqueta--morta {
  color: var(--tinta-fraca);
  background: var(--fundo);
}

.etiqueta--morta::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px currentColor;
}

/* --- rodape -------------------------------------------------------------- */

.rodape {
  /* ⚠️ O mesmo teto da barra e do conteudo (ver o `.topo__interno`). */
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 16px 56px;
  color: var(--tinta-fraca);
  font-size: var(--t-xs);
}

/* --- a marca da entrada --------------------------------------------------- */

/* 🔵 A tela de ENTRAR é a única da ferramenta que carrega a logo grande, e a
   razão é a ordem em que ela aparece: é a PRIMEIRA tela de quem chega, e ela
   responde *"onde eu estou?"* antes de pedir login e senha. ⚠️ Nas telas de
   dentro, a logo fica na barra, em 28px, porque ali o espaço é do trabalho.

   📌 A largura é uma só, e ela não é solta: `230px` dão ~67px de altura, e
   mantêm o lockup **acima dos 96px mínimos** da marca (§3.2 do
   `UI-E-DESIGN-SYSTEM`) com folga larga. */
.entrada__marca {
  max-width: 230px;
  margin: 24px auto 22px;
}

.entrada__marca img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- a tela de entrada ---------------------------------------------------- */

/* Os tres numeros do trabalho. */
.numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.numero {
  padding: 14px 16px;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}

/* O numero e o sujeito do bloco: vem grande porque e o que se le de longe. */
.numero__valor {
  display: block;
  font-size: var(--t-2xl);
  font-weight: 700;
  line-height: 1.1;
  /* 🔵 Tabular: os tres numeros ficam alinhados na vertical quando mudam, e a
     faixa nao "pula" de largura ao trocar 9 por 10. */
  font-variant-numeric: tabular-nums;
}

.numero__rotulo {
  display: block;
  margin-top: 2px;
  font-size: var(--t-xs);
  color: var(--tinta-fraca);
}

/* Os tres passos do trabalho. */
.passos {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.passo {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}

.passo__numero {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--acento);
  color: var(--papel);
  font-size: var(--t-xs);
  font-weight: 700;
}

.passo__texto { min-width: 0; }

.passo__titulo {
  display: block;
  font-weight: 600;
}

.passo__nota {
  display: block;
  font-size: var(--t-sm);
  color: var(--tinta-fraca);
}

/* ⚠️ No celular o botao desce para a propria linha: ao lado do texto ele
   comprimiria a frase ate ela virar uma coluna de palavras. */
@media (max-width: 640px) {
  .passo { grid-template-columns: auto 1fr; }
  .passo .botao { grid-column: 1 / -1; }
}

/* --- gerador de SKU ------------------------------------------------------ */

/* Os quatro campos em uma coluna no celular e em duas na tela larga. A ORDEM
   da leitura nao muda com a largura (classe, marca, produto, apresentacao):
   o grid so decide onde cada campo cai, ❌ nao o que vem antes. */
.gerador__campos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 20px;
}

/* A classe derivada do perfil (§2.1). 🔵 Ela e CONSEQUENCIA do campo de cima,
   entao anda menor e em voz baixa: com o mesmo peso dos campos, pareceria um
   quinto campo a preencher — e nao ha nada a preencher nela. */
.derivada {
  margin: 6px 0 0;
  font-size: var(--t-sm);
  color: var(--tinta-fraca);
}

.derivada strong {
  color: var(--tinta);
  letter-spacing: 0.04em;
}

/* --- o combobox ---------------------------------------------------------- */

.combobox { position: relative; }

.combobox__entrada { padding-right: 34px; }

/* A seta e desenhada em CSS, ❌ nao e imagem: um icone de arquivo seria mais
   um pedido no deploy, e a caixa precisa apenas avisar que ha lista ali. */
.combobox::after {
  content: "";
  position: absolute;
  top: 22px;
  right: 14px;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--tinta-fraca);
  border-bottom: 2px solid var(--tinta-fraca);
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}

.combobox__lista {
  position: absolute;
  z-index: 20;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  max-height: 280px;
  overflow-y: auto;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgb(22 32 43 / 12%);
}

/* O componente nasce com o `hidden` do HTML; o JS troca o atributo junto com a
   classe, e sem esta linha o `display: flex` do item venceria o atributo. */
.combobox__lista[hidden] { display: none; }

/* 🔵 DUAS colunas por um motivo medido: as duas coisas sao procuradas. A SIGLA
   e o que entra no codigo; o NOME e o que a pessoa conhece. Mostrar so o nome
   esconde a sigla que vai ser escrita; mostrar so a sigla esconde o que a
   pessoa digitou. */
.combobox__item {
  display: grid;
  grid-template-columns: minmax(56px, auto) 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.combobox__sigla {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--acento);
  white-space: nowrap;
}

.combobox__nome {
  font-size: var(--t-sm);
  color: var(--tinta);
}

.combobox__detalhe {
  font-size: var(--t-xs);
  color: var(--tinta-fraca);
  white-space: nowrap;
}

.combobox__item--ativo,
.combobox__item:hover {
  background: var(--fundo);
}

.combobox__item--ativo { box-shadow: inset 2px 0 0 var(--acento); }

.combobox__vazio {
  padding: 10px;
  font-size: var(--t-sm);
  color: var(--tinta-fraca);
}

/* 🔵 O CONVITE da porta estreita (§2.5) é a ÚLTIMA linha da lista, e ocupa a
   largura toda: ele não tem sigla nem nome — tem uma frase.
   ⚠️ E o destaque é o de ITEM, ❌ não o de botão: ele é um `role="option"` como
   os outros, e pintá-lo como botão faria os dois caminhos — escolher e criar —
   parecerem coisas de naturezas diferentes, quando a diferença é só o que
   acontece depois do clique. */
.combobox__item--convite { grid-template-columns: 1fr; }

.combobox__convite {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--acento-escuro);
}

.combobox__item--convite.combobox__item--ativo .combobox__convite,
.combobox__item--convite:hover .combobox__convite { color: var(--tinta); }

/* Campo desligado (o PRODUTO, antes da MARCA): apagado e sem a seta — a seta
   promete lista, e nao ha lista enquanto nao houver marca (§5.3). */
.combobox--bloqueado::after { display: none; }

input:disabled,
select:disabled {
  color: var(--tinta-fraca);
  background: var(--fundo);
  cursor: not-allowed;
}

/* --- o campo composto: numero + unidade (§2.5) --------------------------- */

.composto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.composto > * { min-width: 0; }

/* Com a unidade do tipo `tamanho`, o numero NAO existe (§5.4): o ultimo nivel
   e a letra, e uma caixa de numero vazia ao lado estaria pedindo um dado que
   nao entra no codigo. Escondida, a FORMA da tela passa a ser a forma do
   codigo — e a pessoa ve a regra em vez de ler sobre ela. */
.composto--so-letra { grid-template-columns: 1fr; }

.composto--so-letra .composto__numero { display: none; }

.composto__numero--erro { border-color: var(--perigo); }

.composto__numero--erro:focus { outline-color: var(--perigo); }

/* --- o codigo sendo montado ---------------------------------------------- */

.montagem {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 0;
  padding: 14px 16px;
  background: var(--fundo);
  border: 1px dashed var(--linha);
  border-radius: var(--raio);
}

.montagem__seta {
  font-size: var(--t-lg);
  color: var(--tinta-fraca);
}

/* O codigo e o SUJEITO da tela. 🔵 Monospacada porque este texto e conferido
   CONTRA a planilha, e em fonte de largura variavel o `I` e o `1` — que o
   alfabeto do SKU usa — se confundem exatamente na hora da conferencia. */
.codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--tinta-fraca);
  word-break: break-all;
}

.codigo--pronto { color: var(--tinta); }

/* O selo diz "montado", ❌ nao "gravado": quem grava e o lote (§6). */
.selo {
  padding: 2px 8px;
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 999px;
  border: 1px solid var(--linha);
  color: var(--tinta-fraca);
}

.selo--ok {
  color: var(--ok);
  background: var(--ok-fundo);
  border-color: var(--ok);
}

/* --- o que ja existe ----------------------------------------------------- */

/* ============================================================================
   A LISTA — e o item dela é PROSA, ❌ não uma fileira de pedaços.

   🔴 **O defeito era de português, e a causa era esta linha de `display: flex`
   (medido e corrigido em 02/10/2026).** O `.lista__item` nasceu como `flex` com
   `gap: 10px` para um par *rótulo + valor*, mas os `<li>` da ferramenta são, na
   maioria, uma **FRASE** com `<strong>` e `<em>` no meio dela. ⚠️ **E um
   contentor `flex` ❌ não tem frase:** cada nó de texto e cada elemento inline
   vira um ITEM próprio, e o `gap` entra entre eles.

   📌 **O que isso desenhava na tela — e o texto estava certo no Blade:**

     · `É <em>extração de padrão</em>: exata` saía como *"padrão : exata"*, com
       o vão de 10px **antes dos dois-pontos**;
     · `e a <em>categoria</em>, escolhendo` saía como *"categoria"* e, na linha
       seguinte, **", escolhendo"** — a vírgula **sozinha no começo da linha**,
       que é o que a vírgula ❌ nunca pode fazer.

   🔴 **E ❌ não era só o desenho:** o vão entra no TEXTO, e o leitor de tela
   anunciava *"categoria , escolhendo"*, com a pausa no lugar errado. Uma
   quebra de linha dessas não se conserta no conteúdo — ela é do layout.

   🔵 **Agora o item é PROSA, e o par tem NOME.** São dois trabalhos diferentes, e
   por isso duas classes: o item comum é uma frase e flui como frase (o padrão
   vale para a maioria), e o par *rótulo + valor* — que quer mesmo ficar lado a
   lado, alinhado pela BASE do texto — pede a variante `--ficha`, escrita onde é
   usada. 📌 Antes, os dois usavam a mesma regra e só um dos dois funcionava.
   ========================================================================= */

.lista {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

/* 🔵 O item de PROSA. `display` de bloco porque o conteúdo é uma frase: é o
   fluxo normal do texto que mantém a vírgula colada na palavra. */
.lista__item {
  padding: 12px 0;
  border-bottom: 1px solid var(--linha);
}

/* 🔵 O item de FICHA: o *rótulo + valor* que anda em par. ⚠️ `align-items:
   baseline` porque o que alinha é a LINHA DE BASE — sem isso, um `code` menor ao
   lado de um texto maior boia para cima. 📌 Só use onde o item é mesmo um par;
   num item de prosa, ele é que produz a vírgula órfã. */
.lista__item--ficha {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.lista__item:last-child { border-bottom: none; }

.lista__item code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-sm);
}

/* 🔵 A NOTA do item — a linha que explica, abaixo do rótulo. 🔄 **Subiu de
   `--t-xs` (12px) para `--t-sm` (14px)**, e o motivo é de CONSISTÊNCIA, ❌ não de
   gosto: o outro texto apagado da folha, o `.campo__ajuda`, já era `14px`, e as
   duas peças fazem o mesmo trabalho — explicar em voz baixa. ⚠️ **A 12px o que
   elas guardam aqui ❌ não é legenda, é PROSA** (as quatro travas do glossário são
   frases inteiras), e prosa a 12px obriga a parar para ler — o oposto do
   *"em voz baixa"*. 📌 O que as separa do corpo continua sendo a COR, que é o que
   ❌ não muda de tamanho. */
.lista__nota {
  font-size: var(--t-sm);
  color: var(--tinta-fraca);
}

/* 🔵 A ORIGEM de cada linha (§2.4, decisao 2): `no registro` x `no Tiny`. Ela e
   um selo, e nao uma nota, porque e ela que impede o operador de confundir o
   codigo que a FERRAMENTA emitiu com o codigo velho que ainda esta no ERP — a
   confusao que faria "parecer gerado o que e codigo velho". */
.lista__origem {
  font-size: var(--t-xs);
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--linha);
  color: var(--tinta-fraca);
  white-space: nowrap;
}

/* 📌 Terreno novo e informacao, ❌ nao erro: a combinacao sem nada emitido
   aparece como linha propria em vez de sumir, porque o silencio faria a tela
   parecer quebrada. */
.lista__vazio {
  padding: 8px 0;
  font-size: var(--t-sm);
  color: var(--tinta-fraca);
}

/* ⚠️ O aviso da FAMILIA (§2.4, decisao 3) e informacao, ❌ nao alerta: ele diz
   quantas apresentacoes o produto ja tem, sem acusar defeito nenhum — e por isso
   nao usa a cor do aviso. */
.aviso--familia {
  margin-top: 8px;
  color: var(--tinta-fraca);
  background: transparent;
  border-style: dashed;
}

/* --- a ajuda de classe, em janela ---------------------------------------- */

/* 🔵 O gatilho parece um LINK, e nao um botao cheio: ele e uma pergunta, e a
   forma de botao competiria com o "Gerar o codigo" logo abaixo. */
.ajuda__abre {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 0;
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--acento-escuro);
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}

.ajuda__abre:hover { color: var(--tinta); }

.ajuda__marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--papel);
  background: var(--acento);
  border-radius: 50%;
}

/* 🔴 A janela NAO alonga a pagina — que e o defeito que ela veio corrigir:
   fechada ela e `display: none` (nem um pixel); aberta ela flutua por cima, e
   o que rola e o CORPO dela, nao o formulario de tras.

   🔵 **TRES formas, os MESMOS valores.** A `ajuda` (a leitura da classe), a
   `janela` (a porta estreita do §2.5) e a `camera` (a webcam) sao a mesma peca
   vista tres vezes — uma mostra uma tabela, a outra um formulario, a terceira um
   video —, e um segundo conjunto de medidas daria tres janelas que quase
   coincidem: a que alguem corrigisse primeiro.

   📌 **A `camera` entrou nesta lista em 02/10/2026, e ela ❌ nao era a mais nova
   das tres: era a que vivia do padrao do NAVEGADOR por ❌ nao ter sido convidada.**
   O preco esta medido no bloco dela, la em cima. */
.ajuda,
.janela,
.camera {
  width: min(820px, calc(100vw - 24px));
  max-height: min(85vh, 720px);
  padding: 0;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: 0 18px 48px rgba(22, 32, 43, 0.28);
  overflow: hidden;
}

/* 🔴 **A AJUDA ABERTA DE DENTRO DE UMA JANELA ❌ não pode nascer na MESMA caixa
   dela.** ⚠️ O `<dialog>` da ajuda pode ser FILHO de outro `<dialog>` — é o caso
   da janela de *acrescentar linha* (§2.5), que carrega a ajuda de classe junto
   dos campos. 🔵 Os dois valem da MESMA casca (a regra acima), e um `<dialog>`
   modal é centrado na JANELA, ❌ não no pai: os dois caem **exatamente** na mesma
   posição e no mesmo tamanho. 📌 Medido em `708×383`: a janela e a ajuda de
   dentro devolveram a **mesma** caixa (`29 · 18 · 672×326`, os quatro números
   iguais) — quem clicava em *"Não sabe qual é a classe?"* dentro da janela via a
   janela **trocar de conteúdo**, ❌ não uma ajuda **por cima** dela.

   🔵 **A correção é de TAMANHO, ❌ não de camada:** a ajuda aninhada já está na
   frente (o *top layer* do `<dialog>` resolve isso). O que faltava era ela ❌ não
   COINCIDIR com a janela: entrando menor, a janela aparece **em volta** — e o
   `::backdrop`, que os dois compartilham, passa a ter o que escurecer. 📌 As
   medidas são um degrau abaixo das da casca (`820px`/`85vh`/`720px`) e continuam
   `min()`, para o telefone ❌ não perder o vão das bordas. */
dialog .ajuda {
  width: min(660px, calc(100vw - 96px));
  max-height: min(70vh, 560px);
}

/* O `[open]` e explicito de proposito: sem ele, `display: flex` brigaria com o
   `display: none` que o navegador da ao dialogo fechado. */
.ajuda[open],
.janela[open],
.camera[open] { display: flex; flex-direction: column; }

.ajuda::backdrop,
.janela::backdrop,
.camera::backdrop { background: rgba(22, 32, 43, 0.45); }

.ajuda__topo,
.janela__topo,
.camera__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--linha);
}

.ajuda__titulo,
.janela__titulo,
.camera__titulo {
  margin: 0;
  font-size: var(--t-lg);
  /* 🔴 **O título de DIÁLOGO desliga as maiúsculas do `h2`, e ❌ não por
     exceção:** ele é a resposta a *"o que é esta caixa que acabou de abrir?"* —
     é o título da SUPERFÍCIE inteira, e ❌ não o rótulo de um bloco dentro dela.
     📌 É o mesmo papel do `h1` da tela, e é por isso que ele volta à caixa de
     frase e ao corpo cheio (`--t-lg`): um rótulo em caixa alta aqui gritaria o
     nome da janela em vez de anunciá-la. */
  text-transform: none;
  letter-spacing: normal;
}

.ajuda__fecha,
.janela__fecha,
.camera__fecha { min-height: 36px; padding: 6px 14px; }

/* `min-height: 0` e o que permite o corpo encolher dentro do flex e ROLAR, em
   vez de esticar a janela para fora da tela. */
.ajuda__corpo,
.janela__corpo,
.camera__corpo {
  flex: 1;
  min-height: 0;
  padding: 12px 16px 16px;
  overflow: auto;
}

/* 🔵 O formulario e um filho flex do proprio dialogo, e nao um envelope solto:
   sem o `flex: 1` ele encolheria ate o conteudo, e o corpo — que e quem rola —
   nao teria altura para rolar dentro. */
.janela__form {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

/* 🔴 O rodape das acoes fica FORA da area que rola, e isso e uma correcao de
   percurso: quem errou um campo, rolou ate a mensagem que explica o conserto
   tem de poder reenviar sem rolar de volta — o botao que salva nao pode sair
   da tela justamente quando a tela diz o que corrigir.

   📌 **A `camera` entrou aqui em 02/10/2026, e ela e a PROVA da regra:** era a
   unica das tres janelas que ❌ nao tinha rodape preso, e o preco ja estava
   medido — o botao *Tirar foto* saia da area visivel quando o recado de erro
   aparecia (ver o bloco da camera). A licao que ela deixa escrita: o rodape ❌ nao
   e enfeite de formulario, e a forma de a JANELA ter um lugar onde o botao
   principal nunca sai da tela. */
.janela__pe,
.camera__pe {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--linha);
}

/* --- a trava da rolagem de tras ------------------------------------------- */

/* 🔴 **A pagina de tras rolava com a janela aberta, e isso e um defeito de
   POSICAO** — do tipo que ❌ nao quebra nada e por isso passa: o `<dialog>`
   nativo prende o foco e escurece o fundo, mas ❌ nao trava a ROLAGEM. Medido com
   a janela aberta, `scrollTo` moveu a pagina de `0` para `250`. ➡️ Na pratica, a
   roda por cima do fundo escurecido desloca a pagina por baixo da janela, e quem
   fecha a janela volta para outro lugar da tela.

   🔵 **A classe e escrita pelo `dialogo.js`, ❌ nao por um `:has()`:** a trava
   precisa MEDIR a barra de rolagem ANTES de esconde-la, e no CSS puro essa
   medida ❌ nao existe. ⚠️ O `padding-right` e o que impede o pulo de `15px`: sem
   ele, o sumico da barra alarga a pagina e a moldura inteira anda de lado — o
   mesmo `15px` que o `.topo__interno` ja registra. Em sistema de barra
   sobreposta (largura `0`, como o deste navegador) a variavel nasce `0` e ❌ nao
   ha o que compensar. */
html.janela-aberta {
  overflow: hidden;
  padding-right: var(--barra-de-rolagem, 0);
}

.janela__erros { margin-bottom: 14px; }

/* Duas colunas so quando ha largura para as duas: os campos sao curtos, mas
   lado a lado num celular cada um ficaria com menos de 150px — e a marca
   `Adelia Mendonca` nao caberia nem truncada. */
@media (min-width: 720px) {
  .gerador__campos { grid-template-columns: 1fr 1fr; }
}

/* 🔵 O complemento da marca volta a aparecer só quando há largura para ele E
   para o menu inteiro — e nunca à custa de uma quebra de linha.

   ⚠️ O ponto de virada é MEDIDO, ❌ não estimado: a marca inteira (**247px**
   desde 02/10/2026, com a logo nos `38px` e o complemento na Inter) + os dois
   vãos (2 × 16px) + o menu (**555px** — era 529px na Segoe UI, e a Inter o
   engordou 26px) + a conta no TETO do nome (**243px**) + o recuo lateral
   (2 × 16px) pedem **1.109px de barra**, e a barra oferece isso a partir de
   **1.124px de janela** — ⚠️ porque a barra de rolagem do sistema come 15px da
   largura da tela e ela ❌ não entra na conta. 📌 O ponto de virada fica em
   **1.135px**, e os 10px de folga são de propósito: uma fonte mais larga que a
   desta máquina come alguns pixels desta conta.

   🔵 **A conta usa o PIOR caso, ❌ não o nome que está logado hoje:** assim ela
   continua valendo no dia em que entrar alguém com um nome comprido — e um ponto
   de virada que só funciona para o operador atual é um defeito com data marcada
   para aparecer.

   ⚠️ **E o teto da barra continua perto:** o `.topo__interno` para em **1.120px**,
   e a conta pede **1.109px** — sobram **11px**. 🔴 Quem for aumentar a marca ou o
   menu daqui para a frente tem de refazer esta conta ANTES: os 11px são a única
   sobra que existe, e a Inter já consumiu o que havia, e a logo nos `38px`
   consumiu o resto.

   📌 **A vida deste número, para quem for mexer nele:** nasceu em 1.070px, desceu
   para 1.040px e daí subiu para 1.060px (a barra encolhendo, do R-211 ao R-212),
   subiu para **1.075px** com as duas telas novas do R-226, depois para **1.090px**
   quando a logo saiu do piso (`28px` → `34px`), depois para **1.125px** quando a
   ferramenta passou a usar a **Inter** (§4.2), e agora para **1.135px** com a logo
   nos `38px`. ⚠️ **E a última é a única das cinco que foi pedida por quem usa a
   ferramenta** — as outras quatro vieram de tela nova, de fonte obrigatória ou de
   correção. 🔵 **O teto da barra subiu junto uma vez** (`1.080px` → `1.120px`),
   porque ❌ não havia como pagar a Inter só encolhendo o menu; 📌 **e ele ❌ não
   sobe de novo por causa deste degrau da logo**, que coube nos 11px que restavam.
   **O que NÃO cresceu junto é a decisão que segura esta conta:** as duas telas
   novas custariam **+165px** soltas na fileira — o menu iria a **679px** e
   estouraria o teto da barra até no nome curto —, e custaram **+15px** com a
   etiqueta na fileira e as três consultas no grupo (medido: 514px → **529px** na
   Segoe UI, **555px** na Inter).

   ⚠️ E os dois vãos do `gap` entram na conta: foi esquecê-los que errou este
   ponto de virada na primeira tentativa, e o erro era o último item do menu
   cortado ao meio — que é pior que o complemento ausente. */
@media (min-width: 1135px) {
  .topo__marca-complemento { display: inline-flex; }
}

/* 🔵 Entre 1.020px e 1.135px o complemento já saiu e o menu ainda ❌ não cabe
   junto com o nome: ele precisaria dos mesmos 1.109px menos o complemento
   (247 − 130 = 117px), o que dá **992px de barra** — ou 1.007px de janela com o
   mesmo desconto da barra de rolagem. 📌 O ponto de virada fica em **1.020px**,
   com os mesmos 10px de folga dos outros dois. Quem paga, então, é o NOME — ❌ não
   o menu.

   ⚠️ **E o nome sai do OLHO, ❌ não do documento.** Um `display: none` o apagaria
   também para quem usa leitor de tela, e a conta passaria a se anunciar apenas
   como *"Sair"* — que é a mesma perda de identidade, só que invisível para quem
   a causou. O recorte (`clip-path`) esconde do olho e mantém no texto lido: quem
   ❌ não vê as iniciais continua ouvindo o nome inteiro.

   📌 E o avatar fica: a inicial continua dizendo de quem é a sessão, que é
   exatamente o trabalho que o nome fazia. */
@media (max-width: 1020px) {
  .topo__nome {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* 🔵 No celular a conta fica com o avatar e o "Sair", e a SETA sai.

   ⚠️ **O critério é o da própria barra, e é o mesmo de sempre:** as duas PORTAS
   DE ENTRADA (Ler o rótulo e Gerar SKU) têm de continuar visíveis sem um toque,
   porque são o trabalho do dia — 🔵 e ele segue de pé nesta rodada, porque as
   duas telas novas entram DEPOIS delas: o `Gerar SKU` é o segundo item antes e
   depois do R-226, a etiqueta é o terceiro e o grupo das consultas é o último.

   🔴 **E o número que este comentário guardava estava ERRADO (medido e
   corrigido em 02/10/2026).** Ele dizia que num telefone de verdade as duas
   portas cabem por **1,1px**, e que o corte era artefato da emulação. ❌ Não
   reproduz: medido, a barra de rolagem deste navegador tem **0px** de largura —
   ela é sobreposta, que é exatamente o caso do telefone —, e mesmo assim a
   conta ❌ não fecha.

   📌 **A conta certa, medida na tela a 390px:** o que ❌ não é menu soma
   **230,4px** — 24 do recuo lateral, 95,7 da marca, 90,3 da conta e 20 dos dois
   vãos —, e sobram **160,4px** de menu para os **175,4px** das duas portas
   (90,3 + 1 + 84,2). 🔴 **Faltam 15px, e o `Gerar SKU` aparece cortado:** ❌ não
   por um pixel — por **um sexto dele**. ⚠️ **A 360px, que é Android comum,
   faltam 45,4px**, e o botão perde **mais da metade**.

   🔵 **O número errado veio de supor 176px de menu no telefone.** O que existe é
   390 − 230,4 = **159,6px**. 📌 **E daí sai o ponto de virada:**
   175,4 + 230,4 = **405,8px** — abaixo dele a promessa ❌ não se sustenta, e
   quase todo telefone está abaixo (360, 375, 390, 393).

   ⚠️ **E as duas saídas que este comentário nomeava ❌ não fechavam a conta:**
   encurtar o rótulo da primeira porta devolveria **8px**, e o recuo do menu,
   **4px** — contra 15px a 390 e 45px a 360. 🔵 **A alavanca certa estava noutro
   eixo**, e é a que o §3.2 do design system já previa: o **SÍMBOLO ISOLADO tem
   mínimo próprio de 24px de largura**, e a marca inteira tem **96px**. 🔴
   **Medido: a marca a 28px de altura dá 95,7px — 0,3px ABAIXO do próprio
   mínimo** —, e o símbolo a 28px dá **34,9px**, com 10,9px de folga sobre o
   mínimo dele. 📌 **É por isso que o `<picture>` do Blade troca o arquivo a
   416px** (405,8 + os 10px de folga do R-212, arredondados): libera **60,8px**, e
   no pior telefone que interessa — 360px — as portas passam a caber com
   **+15,4px**, acima dos 10px exigidos.

   🔄 **E a INTER encolheu essa folga, ❌ não a criou.** Na Segoe UI os dois
   rótulos somavam **167px**; na Inter somam **174px** — 🔴 **7px a mais de
   porta**, que é o que fez o defeito aparecer nesta rodada. 🔵 Os 14px de corte
   que o registro antigo media na janela emulada eram, portanto, **o defeito de
   verdade**, e ❌ não a sobra de uma barra de rolagem: os 15px medidos aqui ❌
   não vêm do sistema — vêm da conta que faltava.

   🔄 **E o que sai mudou com o menu da conta.** Antes, quem saía era o avatar,
   porque ele era só identidade — o dado mais redundante que existe num aparelho
   que é da própria pessoa. Agora ele é também o BOTÃO que abre o menu, e um
   botão de 21px (a seta sozinha, sem o nome e sem o avatar) é um alvo pequeno
   demais para um dedo. 🔵 Então fica o avatar — que já se lê como botão, é
   redondo e carrega a inicial de quem está na sessão — e sai a seta, que é a
   peça mais barata das duas. Os vãos, os itens e o próprio recuo lateral também
   encolhem. */
@media (max-width: 620px) {
  .topo__interno { padding: 0 12px; gap: 10px; }
  /* 🔴 **A logo volta ao piso (`28px`) aqui, e isso ❌ não é inconsistência.**
     Esta é a barra mais apertada da folha, e os 20px que a logo maior custaria
     sairiam das duas PORTAS DE ENTRADA — que a promessa do R-211 mantém visíveis
     sem um toque. 🔵 Quem paga pelo tamanho, no celular, é a primeira porta — e
     ela ❌ não pode pagar.

     🔴 **E o piso ❌ não bastou (02/10/2026).** Medido a 390px, os `28px` deixam
     **160,4px** de menu para os **175,4px** das duas portas — o `Gerar SKU`
     cortado por 15px —, e a 360px por 45,4px. 🔵 **Encolher mais ❌ não havia
     como:** nos `28px` a marca mede **95,7px**, contra o mínimo de **96px** do
     §3.2 — ela já está 0,3px ABAIXO dele. ⚠️ **O que ainda tinha folga era o
     FORMATO, ❌ não o tamanho:** o símbolo isolado tem mínimo próprio de **24px**
     e mede **34,9px** nos mesmos `28px` de altura. 📌 Quem troca o arquivo é o
     `<source media="(max-width: 416px)">` do Blade, e a conta que chegou nesses
     416px está no comentário deste mesmo bloco, acima. */
  .topo__marca-logo { height: 28px; }
  .topo__nav { gap: 1px; }
  /* ⚠️ O `9px` de altura é o MESMO do desktop: o aperto do celular é de LARGURA
     (o recuo lateral cai para `7px`), ❌ não de altura — a barra lá é tão alta
     quanto aqui, e é isso que mantém o alvo do dedo. */
  .topo__link { padding: 9px 7px; }
  .topo__conta { padding-left: 10px; gap: 0; }
  .topo__resumo { padding: 8px 5px; }
  .topo__seta { display: none; }
}

@media (max-width: 560px) {
  .cartao { padding: 16px; }
}

/* --- a etiqueta (G-18) --------------------------------------------------- */

/* ============================================================================
   A ETIQUETA — a peca que vai para o papel.

   🔴 **As medidas NAO moram aqui.** A largura, a altura, o lado do QR e a letra
   sao escritos em `mm` no proprio elemento, vindos da geometria em vigor: o
   navegador converte milimetro para o papel, e a medida que a tela mostra e a
   medida que a impressora imprime. ⚠️ Uma classe com `px` fixo seria a segunda
   verdade sobre a mesma medida — e a que divergisse seria justamente a que o
   operador nao olhou.

   🔵 **O que mora aqui e a FORMA:** como o QR e o codigo se arrumam dentro da
   etiqueta, e o que sobra quando um codigo nao cabe na largura.
   ========================================================================= */

/* A prova de impressao: a etiqueta sobre um fundo neutro, para o olho ver o
   tamanho dela contra alguma coisa. */
.prova {
  display: flex;
  justify-content: center;
  padding: 16px;
  margin-top: 16px;
  background: var(--fundo);
  border-radius: var(--raio);
  overflow-x: auto;
}

.rotulo {
  display: flex;
  background: #ffffff;
  color: #000000;
  overflow: hidden;
  /* O tracejado mostra a BORDA da etiqueta, que no papel adesivo nao existe:
     sem ele, a prova e um QR flutuando e nao se ve se o texto esta saindo. */
  outline: 1px dashed var(--linha);
  outline-offset: 1px;
}

/* O codigo AO LADO do QR: ele fica no meio da altura que sobra, e a largura que
   sobra e dele. */
.rotulo--ao-lado {
  flex-direction: row;
  align-items: center;
  gap: 2mm;
}

/* O codigo ABAIXO do QR: a coluna inteira, centrada. */
.rotulo--abaixo {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5mm;
}

.rotulo__qr {
  flex: 0 0 auto;
  display: block;
  line-height: 0;
}

.rotulo__qr svg { display: block; }

/* 🔴 O `word-break` e o `min-width: 0` sao o que impede o codigo longo de
   EMPURRAR o QR para fora da etiqueta: um SKU de 40 caracteres quebra em varias
   linhas dentro do espaco que sobrou. Sem eles, o flex recusaria a quebra (o
   conteudo minimo de um item de flex e o proprio conteudo) e a etiqueta
   vazaria. */
.rotulo__codigo {
  flex: 1 1 auto;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height: 1.15;
  word-break: break-all;
}

.rotulo--abaixo .rotulo__codigo {
  width: 100%;
  text-align: center;
}

/* ⚠️ O tracejado e da TELA: no papel ele seria tinta em volta de cada etiqueta. */
@media print {
  .rotulo { outline: none; }
}

/* --- as medidas da geometria --------------------------------------------- */

.medidas__grupo {
  border: 0;
  margin: 0 0 8px;
  padding: 0;
}

/* 🔵 O mesmo registro do `h2` (o rótulo de container): o `legend` nomeia um GRUPO
   de campos, e ❌ não titula prosa. 📌 As duas peças passam a ler igual porque
   fazem o mesmo trabalho — antes uma era maiúscula e a outra não, e a diferença
   só existia porque cada uma foi escrita num dia. */
.medidas__grupo legend {
  font-weight: 700;
  font-size: var(--t-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0;
  margin-bottom: 12px;
}

.medidas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0 16px;
  margin-bottom: 8px;
}