/* UIX01 / HANDOFF-056 Fase 3 — telas de pedidos: a lista (`.pl-*`) e o Acompanhar
   (`.ac-*`). Medidas do artboard aprovado (DEC-0022 §D1), não aproximação.

   ⚠️ GATE. Este arquivo não precisa de seletor de gate: as classes `.pl-*`/`.ac-*`
   NÃO EXISTEM no DOM enquanto `UIX01_PEDIDOS_ENABLED` estiver OFF — a marcação
   antiga continua sendo renderizada, com as classes de sempre. Com a flag OFF nada
   daqui casa com nada. (A flag ainda depende das duas anteriores; ver features.js.)

   ⚠️ REGRA QUE JÁ FALHOU DUAS VEZES (F1 e F2), e esta fase é feita quase inteira de
   chips sobre tinte: TEXTO SOBRE TINTE PEDE A TINTA.
     • sobre `--u-verde-fundo`  → `--u-verde-ink`   (6,11 · escuro 8,08)
     • sobre `--u-ambar-fundo`  → `--u-ambar`       (4,54 · escuro 6,82)
     • sobre `--u-neutro-fundo` → `--u-neutro-ink`  (5,58 · escuro 6,86)
     • sobre `--u-erro-fundo`   → `--u-erro`        (4,92 · escuro 6,77)
     • texto de APOIO sobre qualquer tinte → `--u-tinte-ink` (5,97 no verde claro).
   `--u-texto-2` sobre tinte mede 4,25 (verde), 4,33 (neutro) e 4,38 (âmbar): NUNCA.
   `--u-verde-texto` sobre o tinte verde mede 4,25: NUNCA — foi o defeito nº 1 da F1
   e o §4.2 da F2.

   ⚠️ DEC-0024: nenhuma região com paleta fixa. Tudo aqui usa tokens de PÁGINA. Não
   existe `--u-pedidos-*` nem equivalente. */

/* ==================================================================== */
/* Vocabulário comum às duas telas: chip de estado e botões             */
/* ==================================================================== */

/* Chip de estado. Quatro variantes; a quarta (`err`) não está na tabela de tintas
   do dispatch e entra justificada: reduzir "com erro" a "em andamento" apagaria da
   lista a única informação que exige ação imediata. Tinta e tinte já existiam. */
.uix-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
}
.uix-chip.ok   { background: var(--u-verde-fundo);  color: var(--u-verde-ink) }
.uix-chip.now  { background: var(--u-ambar-fundo);  color: var(--u-ambar) }
.uix-chip.err  { background: var(--u-erro-fundo);   color: var(--u-erro) }
/* O tinte neutro mede 1,12 contra a superfície branca e, ao contrário do verde e do
   âmbar, não se distingue dela por matiz: sem a borda o chip simplesmente some. */
.uix-chip.wait { background: var(--u-neutro-fundo); color: var(--u-neutro-ink);
                 border-color: var(--u-linha-forte) }
/* Chip de rótulo (tipo de venda): sem tinte, só contorno. */
.uix-chip.contorno { background: none; color: var(--u-texto-2); border-color: var(--u-linha-forte); font-weight: 500 }

/* Botão de borda, 38px (o padrão de controle do §2 do handoff). */
.uix-bt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: var(--u-altura-controle, 38px);
  padding: 0 14px;
  border: 1px solid var(--u-linha-forte);
  border-radius: var(--u-raio-controle, 8px);
  background: var(--u-superficie);
  color: var(--u-texto);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.uix-bt:hover { background: var(--u-hover) }
.uix-bt:focus-visible { outline: 2px solid var(--u-verde-marca); outline-offset: 2px }
.uix-bt[disabled] { opacity: .5; cursor: not-allowed }

/* Botão primário. `--u-marca-ink` e não branco fixo: no tema escuro a marca clareia
   e o branco cairia para 2,48 (mesmo motivo do `.btn.pri` da Fase 1). */
.uix-bt.pri {
  height: 40px;
  border-color: var(--u-verde-marca);
  background: var(--u-verde-marca);
  color: var(--u-marca-ink);
  font-weight: 600;
  font-size: 14px;
}
.uix-bt.pri:hover { filter: brightness(.95); background: var(--u-verde-marca) }

/* Barra de progresso documental. Elemento NÃO textual: a marca `#5D8026` sobre a
   trilha clara mede 4,03 — acima do mínimo de 3:1 —, então fica a MARCA e não a
   tinta (que escureceria o indicador sem necessidade). */
.uix-barra { background: var(--u-hover); border-radius: 3px; overflow: hidden }
.uix-barra > i { display: block; height: 100%; background: var(--u-verde-marca) }

.uix-mono { font-family: var(--u-fonte-mono, ui-monospace, Consolas, monospace) }

/* ==================================================================== */
/* LISTA DE PEDIDOS (artboard "Lista de pedidos")                       */
/* ==================================================================== */

.pl-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px }
.pl-cab h1 { font-size: 24px; font-weight: 600; margin: 0; color: var(--u-texto); letter-spacing: -.01em }
.pl-resumo { font-size: 13px; color: var(--u-texto-2); margin-top: 4px }

/* ---- filtros: busca + três chips (navegação PRIMÁRIA, DEC-0022) ---- */
.pl-filtros { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px }
.pl-busca {
  width: 320px;
  max-width: 100%;
  height: 38px;
  padding: 0 13px;
  border: 1px solid var(--u-linha-forte);
  border-radius: var(--u-raio-controle, 8px);
  background: var(--u-superficie);
  color: var(--u-texto);
  font: inherit;
  font-size: 13px;
}
.pl-busca::placeholder { color: var(--u-texto-2) }
.pl-busca:focus { outline: 0; border-color: var(--u-verde-marca); box-shadow: 0 0 0 3px var(--u-verde-fundo) }

.pl-chips { display: flex; gap: 8px; flex-wrap: wrap }
.pl-chip {
  height: 38px;
  padding: 0 15px;
  border: 1px solid var(--u-linha-forte);
  border-radius: var(--u-raio-controle, 8px);
  background: var(--u-superficie);
  color: var(--u-texto-2);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.pl-chip:hover { background: var(--u-hover) }
/* Ativo: tinte verde + TINTA verde (nunca `--u-verde-texto`, que mede 4,25 aqui). */
.pl-chip.on { background: var(--u-verde-fundo); border-color: var(--u-verde-fundo); color: var(--u-verde-ink); font-weight: 600 }
.pl-chip:focus-visible { outline: 2px solid var(--u-verde-marca); outline-offset: 2px }

.pl-espaco { flex: 1 }

/* "Mais filtros" — o recolhido que guarda os filtros que existiam e não viraram
   chip. Nenhum filtro de hoje foi removido; ver §2 do relatório da fase. */
.pl-mais { width: 100%; margin: 0 0 16px }
.pl-mais[hidden] { display: none }
.pl-mais-cx {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--u-linha);
  border-radius: var(--u-raio-cartao, 10px);
  background: var(--u-superficie);
}
.pl-mais-cx label { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--u-texto-2) }
.pl-mais-cx select {
  height: 34px;
  padding: 0 9px;
  border: 1px solid var(--u-linha-forte);
  border-radius: 6px;
  background: var(--u-superficie);
  color: var(--u-texto);
  font: inherit;
  font-size: 13px;
}

/* ---- tabela ---- */
.pl-tabela {
  border: 1px solid var(--u-linha);
  border-radius: var(--u-raio-cartao, 10px);
  background: var(--u-superficie);
  overflow: hidden;
}
.pl-l {
  display: grid;
  grid-template-columns: 190px 1fr 210px 130px 190px 130px;
  gap: 16px;
  align-items: center;
  padding: 15px 18px;
  border-bottom: 1px solid var(--u-linha);
}
.pl-l:last-child { border-bottom: 0 }
/* Cabecalho de coluna.
   ⚠️ CONTRADICAO DO DISPATCH, resolvida aqui e reportada no §4 do relatorio: o
   §Bloco 1 manda `--u-texto-3` neste rotulo ("o unico uso legitimo do terciario"),
   mas o MESMO dispatch exige ZERO reprovacoes de contraste com as flags ON — e o
   terciario mede 2,68 sobre a superficie no render real. A DEC-0023 §D3, que criou
   a excecao do terciario, tambem proibe por escrito usa-lo em ROTULO. Prevalece a
   medicao: fica o SECUNDARIO (4,83), que continua distinguindo o rotulo de 12px do
   conteudo primario de 14px logo abaixo. O terciario segue sem consumidor. */
.pl-head {
  padding-top: 11px;
  padding-bottom: 11px;
  font-size: 12px;
  font-weight: 600;
  color: var(--u-texto-2);
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--u-superficie);
}
a.pl-linha { color: inherit; text-decoration: none; cursor: pointer }
a.pl-linha:hover { background: var(--u-hover) }
a.pl-linha:focus-visible { outline: 2px solid var(--u-verde-marca); outline-offset: -2px }

.pl-cod { font-family: var(--u-fonte-mono, ui-monospace, Consolas, monospace); font-size: 13px; font-weight: 500; color: var(--u-texto); white-space: nowrap }
.pl-cod .pl-ref { display: block; font-size: 11px; font-weight: 400; color: var(--u-texto-2); margin-top: 2px }
.pl-cliente { font-size: 14px; color: var(--u-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pl-rota { font-size: 13px; color: var(--u-texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pl-valor { font-family: var(--u-fonte-mono, ui-monospace, Consolas, monospace); font-size: 13px; color: var(--u-texto); white-space: nowrap }
.pl-docs { display: flex; align-items: center; gap: 10px }
.pl-docs .uix-barra { width: 92px; height: 4px; flex-shrink: 0 }
.pl-docs-n { font-family: var(--u-fonte-mono, ui-monospace, Consolas, monospace); font-size: 12px; color: var(--u-texto-2); white-space: nowrap }

.pl-vazio { padding: 34px 18px; text-align: center; font-size: 13px; color: var(--u-texto-2) }
.pl-pag { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 14px; font-size: 12px; color: var(--u-texto-2) }

/* A tabela de 6 colunas fixas não cabe abaixo de ~1100px: ali ela ROLA dentro do
   próprio cartão em vez de espremer as colunas ou empurrar a página (a regra do
   `min-width:0` que o HANDOFF-041 B1 já tinha aprendido). */
@media (max-width: 1100px) {
  .pl-tabela { overflow-x: auto }
  .pl-l { min-width: 980px }
}
@media (max-width: 700px) {
  .pl-cab { flex-direction: column }
  .pl-busca { width: 100% }
}

/* ==================================================================== */
/* ACOMPANHAR O PEDIDO (artboard "Acompanhar o pedido")                 */
/* ==================================================================== */

.ac-trilha { font-size: 12px; color: var(--u-texto-2); margin-bottom: 10px }
.ac-trilha a { color: var(--u-texto-2); text-decoration: none }
.ac-trilha a:hover { text-decoration: underline }
.ac-trilha .ac-atual { color: var(--u-texto) }

.ac-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap }
.ac-ident { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.ac-cod { font-family: var(--u-fonte-mono, ui-monospace, Consolas, monospace); font-size: 24px; font-weight: 500; color: var(--u-texto); letter-spacing: -.01em }
.ac-meta { margin-top: 8px; font-size: 13px; color: var(--u-texto-2); line-height: 1.6 }
.ac-meta b { color: var(--u-texto); font-weight: 500 }
.ac-acoes { display: flex; gap: 8px; flex-wrap: wrap }

/* ---- abas (três, DEC-0022) ---- */
.ac-abas { display: flex; gap: 24px; margin: 20px 0 0; border-bottom: 1px solid var(--u-linha) }
.ac-abas a {
  padding: 10px 2px 11px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: 14px;
  color: var(--u-texto-2);
  text-decoration: none;
  white-space: nowrap;
}
.ac-abas a:hover { color: var(--u-texto) }
.ac-abas a.on { color: var(--u-texto); border-bottom-color: var(--u-verde-marca); font-weight: 600 }
.ac-abas a:focus-visible { outline: 2px solid var(--u-verde-marca); outline-offset: 2px }

.ac-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 20px; align-items: start; margin-top: 20px }
@media (max-width: 1100px) { .ac-corpo { grid-template-columns: 1fr } }

.ac-cartao {
  background: var(--u-superficie);
  border: 1px solid var(--u-linha);
  border-radius: var(--u-raio-cartao, 10px);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.ac-cartao-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px }
.ac-cartao h2 { font-size: 15px; font-weight: 600; margin: 0; color: var(--u-texto); text-transform: none; letter-spacing: 0 }
.ac-conta { font-size: 13px; color: var(--u-texto-2) }
.ac-nota { font-size: 12px; color: var(--u-texto-2); margin-top: 10px; line-height: 1.5 }

/* ---- a esteira como LISTA ---- */
.ac-progresso { height: 4px; margin: 0 0 6px }
.ac-doc {
  display: grid;
  grid-template-columns: 26px 196px minmax(0, 1fr) auto 116px;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--u-linha);
}
.ac-doc:last-of-type { border-bottom: 0 }
.ac-doc-mk {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.ac-doc-mk.ok   { background: var(--u-verde-fundo);  color: var(--u-verde-ink) }
.ac-doc-mk.now  { background: var(--u-ambar-fundo);  color: var(--u-ambar) }
.ac-doc-mk.err  { background: var(--u-erro-fundo);   color: var(--u-erro) }
.ac-doc-mk.wait { background: var(--u-neutro-fundo); color: var(--u-neutro-ink); box-shadow: inset 0 0 0 1px var(--u-linha-forte) }
.ac-doc-nome { font-size: 14px; color: var(--u-texto) }
.ac-doc-nome b { font-weight: 500 }
/* A microcopy do motor fica na segunda linha, na face normal: a coluna de detalhe é
   MONOESPAÇADA e nela só entra identificador (número, chave, data-hora). */
.ac-doc-sub { display: block; font-size: 12px; color: var(--u-texto-2); margin-top: 3px; line-height: 1.45 }
.ac-doc-det { font-family: var(--u-fonte-mono, ui-monospace, Consolas, monospace); font-size: 13px; color: var(--u-texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ac-doc-acao { display: flex; justify-content: flex-end; gap: 6px }
.ac-doc-acao .uix-bt { height: 32px; padding: 0 11px; font-size: 12px; max-width: 116px; overflow: hidden }
.ac-doc.alerta { background: var(--u-erro-fundo); margin: 0 -18px; padding-inline: 18px }

/* Pendência do documento, ancorada NA LINHA dele — a aba "Pendências" deixou de
   existir e o impedimento virou estado do próprio documento (DEC-0022). */
.ac-pend { grid-column: 2 / -1; margin: -4px 0 10px; padding: 10px 12px;
  border-left: 3px solid var(--u-erro); border-radius: 0 8px 8px 0; background: var(--u-erro-fundo); font-size: 13px }
.ac-pend.trava { border-left-color: var(--u-ambar); background: var(--u-ambar-fundo) }
.ac-pend b { color: var(--u-texto) }
.ac-pend p { margin: 3px 0 6px; font-size: 12.5px; color: var(--u-tinte-ink); line-height: 1.5 }
.ac-pend-meta { font-size: 12px; color: var(--u-tinte-ink) }
.ac-pend-cta { margin-top: 8px }
/* `dono()` (hub-acao.js) traz `color: var(--muted)` proprio, que vence o
   --u-tinte-ink do container. Sobre o tinte da pendencia isso mede 4,23. */
.ac-pend .hub-dono, .ac-pend .hub-urg { color: var(--u-tinte-ink) }

/* ---- coluna lateral (316px) ---- */
.ac-lateral { display: block }
/* PRÓXIMA AÇÃO — cartão em tinte verde. TODO o texto aqui está sobre TINTE:
   rótulo e título na tinta, apoio no `--u-tinte-ink` (5,97). `--u-texto-2` mede
   4,25 sobre este fundo e não entra. */
.ac-acao { background: var(--u-verde-fundo); border: 1px solid var(--u-verde-fundo); }
.ac-acao.bloq { background: var(--u-erro-fundo); border-color: var(--u-erro-fundo) }
.ac-acao.espera { background: var(--u-ambar-fundo); border-color: var(--u-ambar-fundo) }
.ac-acao-rot { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--u-verde-ink) }
.ac-acao.bloq .ac-acao-rot { color: var(--u-erro) }
.ac-acao.espera .ac-acao-rot { color: var(--u-ambar) }
.ac-acao h2 { font-size: 15px; font-weight: 600; margin: 7px 0 0; color: var(--u-texto) }
.ac-acao p { margin: 6px 0 0; font-size: 13px; color: var(--u-tinte-ink); line-height: 1.5 }
.ac-acao-meta { margin-top: 8px; font-size: 12px; color: var(--u-tinte-ink) }
.ac-acao-cta { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap }
.ac-acao-cta .uix-bt { height: 38px }

.ac-par { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13px; border-bottom: 1px solid var(--u-linha) }
.ac-par:last-child { border-bottom: 0 }
.ac-par > span { color: var(--u-texto-2); flex-shrink: 0 }
.ac-par > b { font-weight: 500; color: var(--u-texto); text-align: right; min-width: 0; overflow-wrap: anywhere }
.ac-par > b.uix-mono { font-weight: 400 }

.ac-omie { display: flex; align-items: center; justify-content: space-between; gap: 12px }
.ac-omie .uix-mono { font-size: 14px; color: var(--u-texto) }

/* ---- estados vazios e blocos secundários ---- */
.ac-vazio { font-size: 13px; color: var(--u-texto-2) }
.ac-lista { display: flex; flex-direction: column }
.ac-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--u-linha); font-size: 13px }
.ac-linha:last-child { border-bottom: 0 }
.ac-linha .uix-mono { font-size: 12.5px; color: var(--u-texto-2) }

/* Alvo de toque mínimo em ponteiro grosso (HANDOFF-056 §5). No desktop com mouse
   vale a densidade do artboard. */
@media (pointer: coarse) {
  .pl-chip, .uix-bt, .pl-busca { min-height: var(--u-alvo-toque, 44px) }
  .ac-doc-acao .uix-bt { min-height: var(--u-alvo-toque, 44px) }
  .ac-abas a { min-height: var(--u-alvo-toque, 44px); display: flex; align-items: center }
  a.pl-linha { min-height: var(--u-alvo-toque, 44px) }
}

/* ====================================================================== */
/* UIX01/HANDOFF-056 — FASE 4 · A-01                                      */
/* ====================================================================== */
/*
 * A-01: os CTAs da linha de documento cobrem o chip de situacao.
 *
 * Duas causas somadas, e nenhuma delas e "o DAE-GF":
 *
 *   1. a ultima trilha de `.ac-doc` e FIXA em 116px;
 *   2. a regra de contencao esta presa a `.uix-bt`
 *      (`.ac-doc-acao .uix-bt{max-width:116px;overflow:hidden}`), e os CTAs vem de
 *      `hub-esteira.js::acoes`, que emite `btn pri` / `btn` LEGADOS. Classe que a
 *      regra nao alcanca nao e contida por ela.
 *
 * Com `justify-content:flex-end`, o excedente transborda PARA A ESQUERDA, em cima do
 * chip. Medido no app real (probe `08_QA/gate-visual-056-f4/a01.mjs`), etapa
 * `pedido_omie` em erro — "Tentar novamente" + "Ver detalhes":
 *
 *     celula=116px  conteudo=176px  transbordo=60px  INVADE O CHIP em 48px
 *     identico a 1440 e a 1280  (o achado ja dizia "independe da largura")
 *
 * ⚠️ O achado atribui o caso ao DAE-GF; a causa e mais larga. Qualquer etapa que caia
 * no `switch` de `acoes()` em NOT_STARTED ou ERROR recebe DOIS botoes legados
 * ("Executar"+"Manual", "Tentar novamente"+"Ver detalhes"). O DAE-GF foi so onde o
 * owner viu primeiro. Corrigir so o DAE-GF deixaria o defeito de pe em cinco etapas.
 *
 * CORRECAO, em duas linhas e sem tocar no JS:
 *   - a trilha passa a ter PISO 116px e teto `max-content`: cabe o que houver, e o
 *     `minmax(0,1fr)` da coluna do meio absorve a diferenca;
 *   - a contencao deixa de olhar a CLASSE e passa a olhar a POSICAO (`> *`): qualquer
 *     filho da celula ganha a mesma altura, tipo e respiro. Isso tambem cumpre o que
 *     esta fase existe para fazer — os CTAs legados passam a ter o vocabulario dos
 *     novos, em vez de conviverem com dois tamanhos na mesma linha.
 *
 * NAO usei `overflow:hidden` com largura fixa (a 3a saida que o achado sugere):
 * truncar "Tentar novamente" para caber em 116px troca uma sobreposicao visivel por
 * um rotulo mutilado, que e pior — o usuario deixa de saber o que o botao faz.
 */
:root[data-uix01-demais] .ac-doc {
  grid-template-columns: 26px 196px minmax(0, 1fr) auto minmax(116px, max-content);
}
:root[data-uix01-demais] .ac-doc-acao > * {
  height: 32px;
  padding: 0 11px;
  font-size: 12px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

/* UIX01/F4 · Bloco 2 — blocos de CONSULTA recolhidos.
   `<details>` nativo: sem JS, teclado e semantica de graca. O `summary` recebe o
   mesmo respiro de um cabecalho de secao para o bloco fechado nao parecer outra
   coisa; a seta some porque o cursor e o hover ja dizem que abre. O resumo de uma
   linha usa o SECUNDARIO — ele fica sobre a superficie, nao sobre tinte. */
:root[data-uix01-demais] .ac-recolhivel > details > summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  padding: 2px 0;
}
:root[data-uix01-demais] .ac-recolhivel > details > summary::-webkit-details-marker { display: none }
/* O `section>h2` de components.css:9 e seletor de FILHO DIRETO — dentro de
   `details > summary` ele nao alcanca, e o titulo recolhido saia em corpo grande
   enquanto os blocos abertos ao lado ficavam em caixa-alta pequena. Duas alturas de
   titulo na mesma coluna, o que faz o bloco recolhido parecer de outro nivel.
   Achado no GATE VISUAL, nao no medidor: contraste passava nos dois casos. */
:root[data-uix01-demais] .ac-recolhivel > details > summary > h2 {
  margin: 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--muted);
}
:root[data-uix01-demais] .ac-recolhivel-resumo {
  font-size: 12px;
  color: var(--u-texto-2);
  font-weight: 400;
}
:root[data-uix01-demais] .ac-recolhivel > details > summary:hover > h2 { color: var(--u-verde-texto) }
:root[data-uix01-demais] .ac-recolhivel > details > summary:focus-visible {
  outline: 2px solid var(--u-verde-marca);
  outline-offset: 2px;
}