/* aquacalc — TOKENS E REGISTROS DO APP DA LOJA (21/09/2026, T-84)
   ============================================================================
   POR QUE ESTE ARQUIVO EXISTE. Medido no `app.html` antes de escrevê-lo: 10
   tokens de cor declarados contra 78 cores hex CRAVADAS, 17 tamanhos de fonte,
   20 valores de espaço, 14 raios e 673 atributos `style=` inline. Não existia
   sistema — existia acúmulo, e por isso toda tela nova nascia um pouco
   diferente das outras.

   ELE NOMEOU O DEFEITO, e é o que este arquivo conserta: «campos um em cima do
   outro, listas esquisitas, botões em cada canto».

   ELE NASCE AO LADO, NÃO NO LUGAR. Nada do CSS antigo foi removido: tela que
   ainda não migrou continua exatamente como estava. Uma tela migra ganhando a
   classe do seu REGISTRO, e a guarda `visual-do-registro.test.js` conta quantas
   já migraram — número que só sobe — e quanto `style=` inline ainda resta —
   número que só desce.

   OS TRÊS REGISTROS, e eles existem porque o lojista está em três posturas
   incompatíveis. O app tratava as três igual, e era esse o defeito de fundo:
     · CAMPO      — de pé na frente do vidro, telefone numa mão, a outra
                    molhada, 30 s por aquário. Alvo de 56px, texto de 1,0625rem.
     · BALCÃO     — com o cliente olhando a tela, sob pressão de tempo.
     · ESCRITÓRIO — sentado depois de fechar. Aqui DENSIDADE É QUALIDADE.
   ========================================================================= */

/* ==== V-904 (08/10/2026) — A LETRA DO PAINEL É A DO SITE ======================================
   Achado no «Hoje»: a letra não era a da casa, e tudo passa a seguir o mesmo padrão. O app
   carregava Bricolage Grotesque e JetBrains Mono do Google Fonts — a letra da identidade antiga, e o
   único lugar que ainda mandava o IP do lojista ao Google. Agora: Hanken Grotesk e JetBrains Mono,
   auto-hospedadas em site/fontes/ (licenças OFL ao lado), os MESMOS arquivos do site.
   POR QUE O @font-face SE REPETE AQUI e não no tokens-site.css: o site declara a Hanken 300–500 (a
   Linha d'água não usa negrito acima de 500), e o painel usa 600, 700 e 800 em mais de cem regras.
   O arquivo variável vai de 100 a 900; abrir a faixa no tokens-site.css trocaria o negrito sintético
   pelo real em todas as páginas da Linha d'água — inclusive as do experimento, que não mudam até
   07/11. Este arquivo só o painel carrega, então a faixa inteira mora aqui. A mono do painel é a
   variável (100–800, 40 KB), porque os números grandes do painel são mono 700. */
@font-face{
  font-family:"Hanken Grotesk";
  font-style:normal;
  font-display:swap;
  font-weight:100 900;
  src:url(fontes/hanken-grotesk-latin-wght-normal.woff2) format("woff2-variations"),
      url(fontes/hanken-grotesk-latin-wght-normal.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:"JetBrains Mono";
  font-style:normal;
  font-display:swap;
  font-weight:100 800;
  src:url(fontes/jetbrains-mono-latin-wght-normal.woff2) format("woff2-variations"),
      url(fontes/jetbrains-mono-latin-wght-normal.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;
}
:root{
  --fonte-texto:"Hanken Grotesk", system-ui, sans-serif;
  --fonte-mono:"JetBrains Mono", ui-monospace, monospace;
}
/* ==== fim V-904 ==== */

/* TOKENS:INICIO — gerado de interno/tokens-loja.tokens.json por interno/ferramentas/gerar-tokens.py. Não edite à mão: edite o JSON e rode o gerador. */
:root{
  color-scheme: light;
  --t-tinta:#0e2430;  /* Azul-petróleo do manual da marca v1.0 (V-915, 08/10): 15.99:1 sobre superfície */
  --t-tinta-2:#56676e;  /* Texto 2 do manual: 5.90:1 sobre branco, 5.41:1 sobre o fundo */
  --t-tinta-2-campo:#0e2430;  /* V-351: AAA (7:1) para o texto CRÍTICO da ronda. V-915 (08/10): o manual não tem um cinza que passe de 7:1 sobre o fundo (o Rótulo #4a5a61 dá 6.58), então o texto crítico vai na tinta do manual — 14.9:1 sobre o fundo */
  --t-fundo:#f1f6f7;  /* Água do manual */
  --t-superficie:#ffffff;
  --t-borda:#7d8f96;  /* contorno que IDENTIFICA um campo precisa de 3:1 (WCAG 1.4.11): 3.36:1 sobre branco, 3.09:1 sobre o fundo (o --ln-ctl do site) */
  --t-borda-sutil:#d2dde1;  /* Linha do manual: só divisória entre linhas, não identifica nada */
  --t-profundo:#0e2430;  /* estrutura: topo e menu, no azul-petróleo do manual. Nunca em botão. */
  --t-acao:#2e7d4f;  /* Verde marca do manual: 5.05:1 com branco (o teal #12786e de antes dava 5.33) */
  --t-acao-campo:#1f5c3a;  /* V-351: o fundo do botão de AÇÃO da ronda, branco por cima: Verde profundo do manual, 7.92:1 */
  --t-acao-clara:#e2efe8;  /* Verde névoa do manual */
  --t-atencao:#8a5200;  /* vence hoje, falta alguém fazer */
  --t-atencao-cl:#fdf3e2;
  --t-perda:#a01f15;  /* morte, erro, cancelar */
  --t-perda-campo:#a01f15;  /* V-351: o vermelho que se lê na ronda (sinal vencido, Registrar a morte). O --alerta #b3261e da folha antiga dava 6.54:1. V-915 (08/10): no escuro a superfície passou ao #13303d do manual e o #f2988e caiu para 6.36:1; #f5a89f dá 7.24:1. */
  --t-perda-cl:#fdeceb;
  --t-e1:.25rem;
  --t-e2:.5rem;
  --t-e3:.75rem;
  --t-e4:1rem;
  --t-e5:1.5rem;
  --t-e6:2rem;
  --t-r1:.5rem;
  --t-r2:.75rem;
  --t-r3:999px;
  --t-sombra:0 1px 2px 0 rgba(15,39,51,.06), 0 10px 28px -16px rgba(15,39,51,.25);
  --t-col-form:44rem;  /* Um campo de descrição com 1.500px de largura lê como quebrado, não como espaçoso — um dos três defeitos nomeados. */
  --t-col-lista:72rem;  /* onde a linha ainda liga o título à ação sem o olho atravessar a tela */
}
/* TEMA ESCURO: só com data-tema="escuro" declarado — nunca pela preferência do sistema (24/09). */
:root[data-tema="escuro"], [data-tema="escuro"]{
  color-scheme: dark;
  --t-tinta:#e6eef0;
  --t-tinta-2:#9fb2b8;
  --t-tinta-2-campo:#e6eef0;
  --t-fundo:#0e2430;
  --t-superficie:#13303d;
  --t-borda:#7d8f96;
  --t-borda-sutil:#23404c;
  --t-profundo:#0e2430;
  --t-acao:#2e7d4f;
  --t-acao-campo:#1f5c3a;
  --t-acao-clara:#23404c;
  --t-atencao:#e0a34a;
  --t-atencao-cl:#33260f;
  --t-perda:#f08a7e;
  --t-perda-campo:#f5a89f;
  --t-perda-cl:#331714;
  --t-sombra:0 1px 2px 0 rgba(0,0,0,.4);
}
/* TOKENS:FIM */

/* ---- ESTADOS -------------------------------------------------------------
   FOCO VISÍVEL NÃO É REFINAMENTO, É REQUISITO — e o app tinha ZERO
   `:focus-visible` (medido em 21/09). Quem navega por teclado não enxergava
   onde estava. Esta regra vale para o app INTEIRO, migrado ou não. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--t-acao); outline-offset:2px; border-radius:var(--t-r1);
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ---- A ASSINATURA: o código do vidro --------------------------------------
   `BAT01-02` é o vocabulário FÍSICO do lojista: está escrito no vidro, na
   etiqueta e no QR que ele bipa. É o que os olhos procuram ao varrer a tela.
   Monoespaçado é o que faz BAT01-02 e BAT01-03 se distinguirem num relance. */
.t-cod{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-weight:600;
  letter-spacing:.04em;background:var(--t-borda-sutil);color:var(--t-tinta);
  padding:.125rem .4rem;border-radius:var(--t-r1);font-size:.9em;white-space:nowrap}
/* número se compara alinhado à direita e em fonte tabular */
.t-num{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}

/* ---- BOTÕES ---------------------------------------------------------------
   UMA ação primária por tela. O resto é secundário ou vai para o menu da
   linha. Trinta botões coloridos numa lista de dez linhas foi o terceiro
   defeito que ele nomeou.
   22/09 — MEDIDO a 414px, não deduzido: este botão nasceu com 2.375rem (38px),
   abaixo dos 44px recomendados (SC 2.5.5), e eu vinha REMENDANDO tela a tela
   (`.t-kpi .t-btn`, `.hoje-passo .t-btn` traziam `min-height:2.75rem` cada uma).
   Remendo por tela esconde o defeito da base e não alcança a tela seguinte: no
   Estoque o «Lançar» continuava com 38px. O piso sobe AQUI e os dois remendos
   saem. Mesma história do `.t-form input`, logo abaixo. */
.t-btn{appearance:none;font:inherit;font-weight:600;cursor:pointer;border-radius:var(--t-r1);
  min-height:2.75rem;padding:0 var(--t-e4);border:1px solid transparent;
  display:inline-flex;align-items:center;gap:var(--t-e2);background:none;color:var(--t-tinta)}
.t-btn-1{background:var(--t-acao);color:#fff}
.t-btn-2{background:var(--t-superficie);color:var(--t-tinta);border-color:var(--t-borda)}

/* ═══ REGISTRO ESCRITÓRIO ═════════════════════════════════════════════════ */
.reg-escritorio{font-size:.875rem;line-height:1.45;color:var(--t-tinta)}

/* a ajuda RECOLHIDA: a primeira linha fica, o resto abre. Quem trabalha não lê
   parágrafo — mas o texto não se perde, que é o risco da divulgação
   progressiva. Recolhe-se EXPLICAÇÃO, nunca ESTADO. */
.reg-escritorio .t-ajuda{font-size:.8125rem;color:var(--t-tinta-2);margin:0 0 var(--t-e4)}
.reg-escritorio .t-ajuda summary{cursor:pointer;color:var(--t-acao);font-weight:600;
  list-style:none;display:inline-block}
.reg-escritorio .t-ajuda summary::-webkit-details-marker{display:none}
.reg-escritorio .t-ajuda summary::after{content:" ⌄"}
.reg-escritorio .t-ajuda[open] summary::after{content:" ⌃"}
.reg-escritorio .t-ajuda p{margin-top:var(--t-e2);max-width:60ch}

/* ---- FORMULÁRIO: grade de 12 colunas --------------------------------------
   A pesquisa é clara: UMA COLUNA é o certo em geral, e lado a lado vale só
   para campos conceitualmente irmãos (quantidade+unidade, validade+destino).
   O defeito do nosso não era a coluna: era não ter largura máxima, todo campo
   ter a mesma largura, e não haver seção nomeada. A largura de cada campo é
   DECLARADA em colunas — nunca em pixel solto —, e é por isso que as linhas
   não ficam irregulares.
   22/09 — o campo desta grade tinha 2.375rem (38px). A camada geral cobra 44px
   com `:where()` (especificidade mínima, de propósito), e ESTA regra, com duas
   classes, vencia. A grade que eu escrevi para arrumar o formulário era o que
   mantinha o formulário abaixo do piso. O piso vale aqui também. */
.reg-escritorio .t-form{display:grid;grid-template-columns:repeat(12,1fr);
  gap:var(--t-e3) var(--t-e4);align-items:end;max-width:var(--t-col-form)}
.reg-escritorio .t-form label{display:flex;flex-direction:column;gap:var(--t-e1);
  font-size:.75rem;color:var(--t-tinta-2);font-weight:600;grid-column:span 4}
.reg-escritorio .t-form input,.reg-escritorio .t-form select{font:inherit;font-size:.875rem;
  font-weight:400;color:var(--t-tinta);padding:.5rem var(--t-e3);border:1px solid var(--t-borda);
  border-radius:var(--t-r1);background:var(--t-superficie);min-height:2.75rem;width:100%}
.reg-escritorio .t-form input::placeholder{color:var(--t-tinta-2);opacity:.75}
/* `[hidden]` PRECISA vencer as regras de display da camada. `.reg-escritorio .t-form label`
   tem duas classes e um elemento; `[hidden]` sozinho, do navegador, perde e o campo escondido
   continua na tela. O atributo repetido sobe a especificidade sem `!important` e sem tocar nas
   outras regras — mesma solução, e mesma razão, do `.reg-campo.reg-campo` mais abaixo. */
.reg-escritorio [hidden][hidden]{display:none}
.reg-escritorio .t-form .c12{grid-column:span 12}
.reg-escritorio .t-form .c7{grid-column:span 7}
.reg-escritorio .t-form .c5{grid-column:span 5}
.reg-escritorio .t-form .c4{grid-column:span 4}
.reg-escritorio .t-form .c3{grid-column:span 3}
.reg-escritorio .t-form .c2{grid-column:span 2}
/* a seção nomeada: sete campos soltos parecem sete assuntos */
.reg-escritorio .t-secao{grid-column:1/-1;font-size:.6875rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--t-tinta-2);font-weight:700;margin:var(--t-e3) 0 0}
.reg-escritorio .t-secao:first-child{margin-top:0}
.reg-escritorio .t-form-pe{grid-column:1/-1;display:flex;gap:var(--t-e2);align-items:center;
  margin-top:var(--t-e3);padding-top:var(--t-e4);border-top:1px solid var(--t-borda-sutil)}

/* ---- LISTA: tabela com colunas alinhadas ----------------------------------
   Texto à esquerda, NÚMERO À DIREITA e em fonte tabular — é o que deixa
   comparar de relance. Altura de linha declarada (48px, a densidade
   «regular»). A seleção aparece no hover e a barra de lote só surge DEPOIS de
   selecionar: só então ela é relevante. */
.reg-escritorio .t-tab-cab{display:flex;align-items:center;gap:var(--t-e3);flex-wrap:wrap;
  padding:var(--t-e3) 0;border-bottom:1px solid var(--t-borda-sutil)}
.reg-escritorio .t-tab-cab h3{font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--t-tinta-2);font-weight:700;margin:0}
.reg-escritorio .t-tab-cab .t-conta{font-size:.75rem;color:var(--t-tinta-2)}
.reg-escritorio table.t-tab{width:100%;border-collapse:collapse;font-size:.875rem}
.reg-escritorio .t-tab th{font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--t-tinta-2);font-weight:700;text-align:left;padding:var(--t-e2) var(--t-e3);
  border-bottom:1px solid var(--t-borda-sutil);white-space:nowrap}
.reg-escritorio .t-tab td{padding:.375rem var(--t-e3);height:3rem;
  border-bottom:1px solid var(--t-borda-sutil);vertical-align:middle}
.reg-escritorio .t-tab tr:last-child td{border-bottom:0}
.reg-escritorio .t-tab tbody tr:hover{background:var(--t-acao-clara)}
.reg-escritorio .t-tab .dir{text-align:right}
.reg-escritorio .t-tab .item{font-weight:600;color:var(--t-tinta)}
.reg-escritorio .t-tab .sub{color:var(--t-tinta-2)}
/* 22/09: era 1rem (16px) e ficava abaixo do piso obrigatório de 24px — medido na varredura
   das 25 telas. Caixa de marcar em lista de lote é justamente o alvo que o dedo erra, e o
   erro aqui custa um lote de etiquetas marcado errado. */
.reg-escritorio .t-tab .t-sel{width:1.5rem;height:1.5rem;accent-color:var(--t-acao);opacity:0}
.reg-escritorio .t-tab tr:hover .t-sel,.reg-escritorio .t-tab .t-sel:checked,
.reg-escritorio .t-tab .t-sel:focus-visible{opacity:1}
.reg-escritorio .t-tab .riscada{opacity:.55}
.reg-escritorio .t-tab .riscada .item{text-decoration:line-through}
.t-selo{font-size:.6875rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:.125rem .5rem;border-radius:var(--t-r3);white-space:nowrap;display:inline-block}
.t-selo-entrada{background:var(--t-acao-clara);color:var(--t-acao)}
.t-selo-baixa{background:var(--t-borda-sutil);color:var(--t-tinta-2)}
.t-selo-morte{background:var(--t-perda-cl);color:var(--t-perda)}
.t-selo-ajuste{background:var(--t-atencao-cl);color:var(--t-atencao)}

/* o menu da linha: `<details>` nativo, sem dependência e alcançável por teclado */
.t-menu{position:relative}
.t-menu > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;min-width:2.75rem;min-height:2.75rem;border-radius:var(--t-r1);
  color:var(--t-tinta-2);font-size:1.15rem;line-height:1}
.t-menu > summary::-webkit-details-marker{display:none}
.t-menu > summary:hover{background:var(--t-borda-sutil);color:var(--t-tinta)}
.t-menu > div{position:absolute;right:0;top:100%;z-index:20;min-width:15rem;
  background:var(--t-superficie);border:1px solid var(--t-borda);border-radius:var(--t-r2);
  box-shadow:var(--t-sombra);padding:var(--t-e1);display:flex;flex-direction:column}
/* 22/09 — o item do menu tinha 2.25rem (36px). É o alvo MAIS fácil de errar do app: painel
   estreito, itens encostados e a ação destrutiva no meio deles. Terceira regra do padrão novo
   nascida abaixo do piso de 44px — junto com `.t-btn` e `.t-form input`. Eu escrevi o piso para
   as classes VELHAS e não o cobrei das que estava criando; a guarda de `piso-do-padrao` fecha
   isso lendo o CSS, não a tela. */
.t-menu button{appearance:none;background:none;border:0;font:inherit;text-align:left;
  padding:.5rem var(--t-e3);border-radius:var(--t-r1);cursor:pointer;color:var(--t-tinta);
  min-height:2.75rem}
.t-menu button:hover{background:var(--t-acao-clara)}
/* V-1040: menu recortado pela caixa de rolagem sai dela, fixo junto do «⋯» (tMenuLado no app) */
.t-menu.t-menu-solto > div{position:fixed;top:auto;bottom:auto;z-index:70}
.t-menu button.perigo{color:var(--t-perda)}
.t-menu button.perigo:hover{background:var(--t-perda-cl)}

/* a barra de lote: só existe DEPOIS de selecionar */
.t-lote{display:flex;align-items:center;gap:var(--t-e2);flex-wrap:wrap;
  background:var(--t-acao-clara);border:1px solid var(--t-acao);border-radius:var(--t-r1);
  padding:var(--t-e2) var(--t-e3);margin:var(--t-e3) 0}
.t-lote b{color:var(--t-acao)}

/* ---- as ações da PÁGINA, no cabeçalho ------------------------------------
   Uma ação primária, no cabeçalho — não no meio do conteúdo. */
#telaTitulo{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--t-e4);
  flex-wrap:wrap}
#telaAcoes{display:flex;gap:var(--t-e2);flex-wrap:wrap}
#telaAcoes:empty{display:none}
@media (max-width:640px){
  #telaAcoes{width:100%}
  #telaAcoes .t-btn{flex:1 1 auto;justify-content:center}
  .reg-escritorio .t-form label{grid-column:span 12!important}
}

/* o bloco opcional do lote: continua sendo `<details>` (é informação secundária de verdade,
   e a divulgação progressiva é legítima aqui), mas dentro dele a grade é a mesma. */
.reg-escritorio details.mov-opc{grid-column:1/-1;border:1px solid var(--t-borda-sutil);
  border-radius:var(--t-r2);padding:var(--t-e3) var(--t-e4);background:var(--t-fundo)}
.reg-escritorio details.mov-opc summary{cursor:pointer;font-size:.75rem;color:var(--t-tinta-2);
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;list-style:none}
.reg-escritorio details.mov-opc summary::-webkit-details-marker{display:none}
.reg-escritorio details.mov-opc summary::after{content:" ⌄"}
.reg-escritorio details.mov-opc[open] summary::after{content:" ⌃"}
.reg-escritorio details.mov-opc > div{display:grid;grid-template-columns:repeat(12,1fr);
  gap:var(--t-e3) var(--t-e4);align-items:end;margin-top:var(--t-e3)}
.reg-escritorio details.mov-opc label{grid-column:span 4}
.reg-escritorio .t-form .dica{grid-column:1/-1}

/* ═══ REGISTRO CAMPO ══════════════════════════════════════════════════════
   22/09. Respondida a pergunta que travava este registro: a
   ronda é feita com CELULAR NA MÃO, de pé na frente do vidro. Isso deixou de
   ser suposição e virou número.

   MEDIDO ANTES DE ESCREVER, com `interno/render/medir-alvos.js`, que abre a
   tela a 414px num navegador de verdade e lê o retângulo de cada controle —
   porque altura calculada de cabeça (padding + fonte) erra por line-height,
   borda e box-sizing, e desenho de campo se decide em pixel:

     12 de 12 alvos da ronda abaixo de 44px
     1 deles com 19px — ABAIXO do piso OBRIGATÓRIO (WCAG 2.2 SC 2.5.8, 24px)
     o «Bipar QR do aquário», que é o gesto principal no celular: 36px

   E o achado que só a medição dava: a regra de celular que existia desde
   sempre — `.br-bipar-grande{padding:16px;font-size:16px}` dentro de um
   @media — NUNCA valeu, porque `button.acao` (elemento + classe) vence
   `.br-bipar-grande` (uma classe) na especificidade. O botão grande do
   celular nunca foi grande. Ninguém viu em dois anos porque ninguém mediu.

   OS NÚMEROS DESTE REGISTRO: alvo de 3.5rem (56px), texto de 1.0625rem (17px)
   e ação de largura inteira. Os 56px vêm da literatura de aplicação de campo
   para mão com luva ou molhada (48–56px); os 44px do SC 2.5.5 são o mínimo
   recomendado, não o alvo de quem está de pé com uma mão só. */
.reg-campo.reg-campo{font-size:1.0625rem;line-height:1.45;color:var(--t-tinta)}
.reg-campo.reg-campo .dica,.reg-campo.reg-campo .sub{font-size:.9375rem;color:var(--t-tinta-2);
  background:none;border:0;padding:0}

/* O ALVO. `min-height` no controle e não `padding`, porque padding some quando
   alguém redefine a classe: a altura é o requisito, e é ela que se declara.
   `:where()` mantém a especificidade em ZERO do lado direito, então a soma é a
   do `.reg-campo` sozinho — regra de tela antiga continua podendo sobrepor o
   que é só aparência, e a ALTURA vem daqui. */
/* `.reg-campo.reg-campo` — a classe repetida DE PROPÓSITO, e a razão fica escrita porque é
   sutil: as vistas de campo moram DENTRO de uma aba de escritório, e as regras de escritório
   para controle (`.reg-escritorio :where(input,select)`, 44px) nasceram depois destas no
   arquivo. Mesma especificidade, e quem vem depois ganha: medido em 22/09, os 56px da ronda
   viraram 44 no minuto em que a aba entrou no registro. Repetir a classe sobe a especificidade
   do lado esquerdo sem tocar no `:where`, que continua em zero à direita — o campo ganha do
   escritório, e qualquer regra de tela continua ganhando dos dois. */
.reg-campo.reg-campo :where(button,select,input,a.t-alvo,summary){min-height:3.5rem}
.reg-campo.reg-campo :where(button,select,input){font-size:1.0625rem}
.reg-campo.reg-campo :where(select,input){padding:0 var(--t-e3);border:1px solid var(--t-borda);
  border-radius:var(--t-r1);background:var(--t-superficie);color:var(--t-tinta);width:100%}

/* A AÇÃO DA LINHA ocupa a linha. Botão de 90px ao lado de um título de três
   palavras é alvo de mouse; o polegar quer a largura inteira. */
.reg-campo .t-linha{display:flex;flex-direction:column;gap:var(--t-e2);
  padding:var(--t-e4) 0;border-top:1px solid var(--t-borda-sutil)}
.reg-campo .t-linha .t-linha-topo{display:flex;align-items:baseline;gap:var(--t-e2);
  justify-content:space-between}
.reg-campo .t-linha b{font-size:1.0625rem;font-weight:700}
.reg-campo .t-linha .t-linha-acao{display:flex;gap:var(--t-e2);flex-wrap:wrap}
.reg-campo .t-linha .t-linha-acao > *{flex:1 1 0}
/* ESCOLHER vem antes de AGIR, e escolher precisa de largura: dividido ao meio com o botão, o
   select da morte rápida cortava o código do aquário no meio («BAT01-02 — 1»), que é
   justamente o que a pessoa precisa ler para ter certeza do vidro. Ele toma a linha; o botão
   vem embaixo, inteiro. */
.reg-campo .t-linha .t-linha-acao select{flex:1 1 100%}
.reg-campo.reg-campo .t-btn,.reg-campo.reg-campo button.acao{min-height:3.5rem;font-size:1.0625rem;
  border-radius:var(--t-r2);width:100%;justify-content:center;text-align:center}

/* O GESTO PRINCIPAL primeiro e inteiro — é o que a mão procura sem ler.
   O seletor traz o ELEMENTO de propósito (`button.t-gesto`): sem ele, a regra de cima
   `.reg-campo button.acao{min-height:3.5rem}` vencia na especificidade e o gesto saía do mesmo
   tamanho dos outros — MEDIDO, 56px onde o desenho pede 64. É o mesmo defeito que matou o
   `.br-bipar-grande`, repetido por mim dez linhas depois de escrevê-lo. */
.reg-campo.reg-campo button.t-gesto{width:100%;min-height:4rem;font-size:1.125rem;font-weight:700;
  margin:0 0 var(--t-e4)}

/* O PLACAR da ronda: um número grande, lido de longe, antes de qualquer lista.
   TRÊS CONSERTOS que só o retrato de 414px mostrou, e os três são de seletor, não de gosto:
   (a) `.t-placar b` alcançava TODO negrito de dentro, inclusive o da frase da dica — que virou
       um título de 24px competindo com o próprio número. O seletor agora é de FILHO DIRETO.
   (b) a `.dica` traz borda e fundo da folha antiga, e dentro do placar isso virava caixa dentro
       de caixa. Aqui ela é texto.
   (c) o negrito DENTRO da dica volta ao tamanho do texto: ênfase, não hierarquia. */
.reg-campo .t-placar{background:var(--t-acao-clara);border-radius:var(--t-r2);
  padding:var(--t-e4);margin:0 0 var(--t-e4)}
.reg-campo .t-placar > b{display:block;font-size:1.5rem;line-height:1.1;color:var(--t-tinta)}
.reg-campo .t-placar .dica{margin:var(--t-e2) 0 0;border:0;background:none;padding:0;
  font-size:.9375rem;color:var(--t-tinta-2)}
.reg-campo .t-placar .dica b{font-size:inherit;font-weight:700;color:var(--t-tinta)}

/* ---- O QUE É CRÍTICO NA RONDA LÊ-SE A 7:1 (V-351, 03/10) ------------------
   O parecer visual de 21/09, ponto 8: «AAA (7:1) para o que é crítico na ronda
   — o que se lê sob luz ruim e com pressa». A meta do app continua 4.5:1 (AA);
   o 7:1 vale para UMA lista declarada, e ela é a ordem da cabeça de quem chega
   ao vidro, escrita no `brRenderRonda`: QUANTO FALTA (a conta do placar e o
   estado de cada linha, com o «até 09:00»), o GESTO e as AÇÕES (Bipar QR,
   Registrar, Continuar, Lançar o teste, Alocar, Registrar a morte) e o que pede
   ação URGENTE (o sinal vencido, «Pedido pela ronda»). MEDIDO antes, no
   navegador, a 414px: botão de ação 5.33:1, estado da linha 6.51, conta do
   placar 5.76, sinal vencido e Registrar a morte 6.54. Ficam FORA, de
   propósito: a explicação recolhida («Como funciona esta tela» — explicação,
   não estado, §2.2f do parecer), os títulos de seção e a esteira (estado de
   lote, não da ronda do dia). O registro campo é também o do mapa e da leitura,
   que é para onde o Registrar leva: o botão e o estado valem igual lá.
   A guarda `contraste-da-ronda.test.js` recalcula os pares dos tokens e
   confere que cada elemento crítico aponta para o token AAA; a conferência de
   tela mede a cor COMPUTADA, porque regra que perde na especificidade não
   pinta nada. */
.reg-campo.reg-campo .t-linha .sub,
.reg-campo.reg-campo .t-placar .dica{color:var(--t-tinta-2-campo)}
.reg-campo.reg-campo button.acao:not(.sec):not(.vermelho){background:var(--t-acao-campo);color:#fff}
.reg-campo.reg-campo button.acao:not(.sec):not(.vermelho):hover{filter:brightness(.85)}
.reg-campo.reg-campo button.acao.vermelho{color:var(--t-perda-campo);border-color:var(--t-perda-campo)}
.reg-campo.reg-campo .br-vencida{color:var(--t-perda-campo)}

/* No ESCRITÓRIO a mesma tela pode ser mais densa: a partir de 700px a ação
   volta para o lado do título, porque aí há mouse e largura sobrando. A
   ALTURA do alvo NÃO volta — 56px não atrapalha ninguém sentado. */
@media (min-width:700px){
  .reg-campo .t-linha{flex-direction:row;align-items:center;justify-content:space-between}
  .reg-campo .t-linha .t-linha-acao{flex:0 0 auto}
  .reg-campo .t-linha .t-linha-acao > *{flex:0 0 auto;min-width:9rem}
  .reg-campo .t-btn,.reg-campo button.acao{width:auto}
  .reg-campo button.t-gesto{width:auto;min-width:16rem}
}

/* ---- O FORMULÁRIO DE CAMPO (22/09) ----------------------------------------
   Medido antes: a tela de LEITURA — a que se usa de pé, na frente do vidro,
   para digitar pH, amônia e nitrito — tinha DEZ alvos de 19px, abaixo do piso
   OBRIGATÓRIO da WCAG 2.2. Era a pior tela do app nesse critério, e é a que
   mais se usa em campo.
   O formulário de campo não é o de escritório com fonte maior: ali cabem doze
   colunas porque há mouse e largura; aqui o dedo pede DUAS colunas no celular
   e campos que não encolhem. O rótulo fica ACIMA e legível — rótulo de 12px
   sobre campo de 56px é a caixa grande com a pergunta pequena. */
.reg-campo .t-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  gap:var(--t-e3) var(--t-e3);margin:0 0 var(--t-e4)}
.reg-campo label{display:flex;flex-direction:column;gap:var(--t-e1);
  font-size:.9375rem;font-weight:600;color:var(--t-tinta)}
.reg-campo label .dica{font-weight:400;font-size:.875rem;border:0;background:none;padding:0;
  margin:var(--t-e1) 0 0}
/* a linha de baixo do formulário: observação larga e a ação inteira, nessa ordem */
.reg-campo .t-pe{display:flex;flex-direction:column;gap:var(--t-e3);margin:var(--t-e4) 0 0}
@media (min-width:700px){
  .reg-campo .t-pe{flex-direction:row;align-items:center}
  .reg-campo .t-pe input{flex:1 1 auto}
  .reg-campo .t-pe button{flex:0 0 auto;min-width:12rem}
  /* V-342 (04/10, retrato 1280): `.reg-campo.reg-campo button.acao` (width 100%) vencia a regra acima e
     o «Lançar leitura» saía da caixa, espremendo a observação a 25 px. Mesma especificidade, depois. */
  .reg-campo.reg-campo .t-pe button.acao{width:auto}
}
/* o parâmetro que a tarefa pede (V-342): a dica embaixo do campo, em tinta de ação */
.reg-campo.reg-campo .t-campos .lei-pedido{color:var(--t-acao-campo);font-weight:600}

/* A AJUDA RECOLHIDA no registro de campo. Ela existe no escritório desde a
   primeira tela, e eu tinha esquecido de trazer: no retrato de 414px o
   `<summary>` saiu com o triângulo nativo do browser e em preto, lido como
   título de seção em vez de «abre aqui se você quiser». Um `<details>` sem
   estilo não é divulgação progressiva, é um título com um bico do lado. */
.reg-campo .t-ajuda{margin:var(--t-e4) 0 0}
.reg-campo.reg-campo .t-ajuda summary{cursor:pointer;color:var(--t-acao);font-weight:600;
  font-size:.9375rem;list-style:none;display:inline-flex;align-items:center;min-height:3.5rem}
.reg-campo .t-ajuda summary::-webkit-details-marker{display:none}
.reg-campo .t-ajuda summary::after{content:" ⌄"}
.reg-campo .t-ajuda[open] summary::after{content:" ⌃"}
.reg-campo .t-ajuda p{margin:0;font-size:.9375rem;color:var(--t-tinta-2)}
/* e o ar entre o que se ESCOLHE e o que se DIGITA: sem ele a dica do seletor
   encostava no primeiro rótulo e os dois liam como um bloco só */
.reg-campo .t-campos{margin-top:var(--t-e5)}

/* ---- O PAINEL DO DIA (22/09) ----------------------------------------------
   «Hoje» é o painel de controle, e no ESCRITÓRIO densidade é qualidade. O que
   estava errado, lido no retrato de 1280px:
   (a) a nota de cada cartão era uma `.dica` — caixa cinza COM BORDA dentro de
       um cartão que já é uma caixa. Caixa dentro de caixa é o mesmo defeito do
       placar da ronda, e aqui acontecia três vezes na mesma tela.
   (b) a ação de cada cartão ficava logo abaixo do texto, então cartões com
       notas de tamanhos diferentes punham os botões em ALTURAS diferentes —
       «botões em cada canto», que é como ele descreveu o problema. A ação
       agora é a última faixa da grade do cartão: todas na mesma linha.
   (c) o número era 26px e o rótulo 13,5 — mas o número é a RESPOSTA e o
       rótulo é a pergunta. A hierarquia ficou explícita.
   O ALVO fica em 2.75rem (44px, SC 2.5.5) e não em 56: aqui a pessoa está
   sentada, com mouse, e 56px numa grade de cartões rouba densidade sem dar
   precisão a ninguém. */
.reg-escritorio .t-painel-dia{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:var(--t-e4)}
.reg-escritorio .t-kpi{display:grid;grid-template-rows:auto auto 1fr auto;
  gap:var(--t-e2);background:var(--t-superficie);border:1px solid var(--t-borda-sutil);
  border-radius:var(--t-r2);padding:var(--t-e4)}
.reg-escritorio .t-kpi h3{margin:0;font-size:.6875rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--t-tinta-2);font-weight:700}
.reg-escritorio .t-kpi-num{margin:0;font-size:2rem;line-height:1;font-weight:800;
  color:var(--t-tinta);font-variant-numeric:tabular-nums}
.reg-escritorio .t-kpi-nota{margin:0;font-size:.8125rem;color:var(--t-tinta-2)}
.reg-escritorio .t-kpi .t-btn{justify-content:center;width:100%}
/* o cartão que tem hora contando: a cor de atenção na BORDA, não no fundo —
   fundo colorido em três cartões de seis faz o painel inteiro gritar */
.reg-escritorio .t-kpi.urgente{border-color:var(--t-atencao);border-left-width:4px}
.reg-escritorio .t-kpi.urgente h3{color:var(--t-atencao)}
/* texto de apoio que NÃO é caixa. A `.dica` da casa tem fundo e borda, e por
   isso vira caixa dentro de caixa quando mora dentro de um cartão — foi o que
   o retrato do painel do dia mostrou, três vezes na mesma tela. `.t-nota` é a
   mesma informação sem a moldura. */
.reg-escritorio .t-nota{margin:var(--t-e3) 0 0;font-size:.8125rem;color:var(--t-tinta-2);
  border:0;background:none;padding:0}
.reg-escritorio .t-nota a{color:var(--t-acao)}
/* A ESTEIRA DE PRIMEIROS PASSOS. No retrato de 414px o botão aparecia ENCRAVADO
   no meio da frase («…bipe, registre, [Começar] pronto.»), porque ele morava
   dentro do mesmo <span> do texto e quebrava junto com ele. Agora é irmão do
   texto, e a linha é uma grade: número, frase, ação — a ação sempre no fim,
   inteira no celular e à direita quando há largura. */
.reg-escritorio .hoje-passo{display:grid;grid-template-columns:1.5rem minmax(0,1fr);
  gap:var(--t-e2) var(--t-e3);align-items:center;padding:var(--t-e2) var(--t-e3);
  border:0;border-radius:var(--t-r1)}
.reg-escritorio .hoje-passo .t-passo-txt{min-width:0}
/* V-435 (02/10) — O PASSO ATUAL SE DESTACA SEM MEXER NA GRADE. No print: o passo 1 (atual)
   tinha fundo e 8px de recuo a mais, e o passo 2 não — os números, os textos e os botões dos dois
   começavam em lugares diferentes. Agora TODO passo tem o mesmo recuo; o atual só ganha o fundo e
   um filete à esquerda (sombra interna, que não ocupa espaço). Cor de token: vale no escuro. */
.reg-escritorio .hoje-passo.atual{background:var(--t-acao-clara);box-shadow:inset 3px 0 0 var(--t-acao);
  padding-left:var(--t-e3);padding-right:var(--t-e3)}
.reg-escritorio .ob-passos{display:flex;flex-direction:column;gap:var(--t-e1);margin:var(--t-e2) 0}
/* no telefone: número | texto; as ações descem para baixo do texto numa grade de duas colunas
   (ação do passo | Agora não), igual em todo passo. O «Sim, é a loja inteira» ocupa a linha de cima
   inteira — com metade da largura ele quebrava em duas linhas e o «Agora não» caía sozinho embaixo. */
.reg-escritorio .hoje-passo .n{align-self:start;margin-top:.0625rem}
.reg-escritorio .hoje-passo .trilha-acoes{grid-column:2;display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:var(--t-e2);align-items:center}
.reg-escritorio .hoje-passo .trilha-acoes .t-btn{justify-content:center}
.reg-escritorio .hoje-passo .trilha-acoes .t-btn-1{grid-column:1/-1}
/* V-435 — COM LARGURA, UMA GRADE SÓ PARA TODOS OS PASSOS. Cada passo era a sua própria grade, e a
   coluna da ação tinha a largura dos botões DAQUELE passo: o passo com três botões («Sim, é a loja
   inteira», «Ainda falta», «Agora não») empurrava o texto e os botões para fora da coluna dos outros.
   Agora a grade é do bloco (.ob-passos) e cada passo é subgrid dela:
     número | texto | [Sim, é a loja inteira] | ação do passo | Agora não
   A ação do passo mora na MESMA coluna em todos (mesma largura, mínimo 9rem), o «Agora não» na
   última. O texto ocupa também a coluna do «Sim» quando ele não está na tela. */
@media (min-width:700px){
  /* a 1ª e a última coluna são `auto` de propósito: o recuo do passo (o fundo do atual) entra na conta
     da trilha da subgrid; com 1.5rem fixo o número invadia o texto (visto no retrato) */
  .reg-escritorio .ob-passos{display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(9rem,auto) auto;
    column-gap:var(--t-e3);row-gap:var(--t-e1)}
  .reg-escritorio .ob-passos > .hoje-passo{grid-column:1/-1;grid-template-columns:subgrid}
  .reg-escritorio .hoje-passo .trilha-acoes{display:contents}
  .reg-escritorio .hoje-passo .n{align-self:center;margin-top:0}
  .reg-escritorio .hoje-passo .t-passo-txt{grid-column:2/4}
  .reg-escritorio .hoje-passo:has(#hojeObConfirma:not([hidden])) .t-passo-txt{grid-column:2/3}
  .reg-escritorio .hoje-passo .trilha-acoes .t-btn-1{grid-column:3}
  .reg-escritorio .hoje-passo .trilha-acoes .t-btn-2{grid-column:4;justify-self:stretch}
  .reg-escritorio .hoje-passo .trilha-acoes .trilha-pular{grid-column:5}
}
/* V-435 — O LEMBRETE numa linha curta. O select tinha a largura da opção mais longa e a altura de
   alvo de toque ao lado de texto de 13px («a caixa dos 3 dias é gigante»). Agora ele tem a largura do
   que mostra (field-sizing; sem suporte, cai na largura nativa). A ALTURA fica no piso de 44px da casa
   (piso-do-padrao.test.js): tentei 2rem no escritório e a guarda reprovou — o piso não tem exceção de tela. */
.reg-escritorio .ob-lembrete{display:flex;flex-wrap:wrap;align-items:center;gap:var(--t-e1) var(--t-e2)}
.reg-escritorio .ob-lembrete select{width:auto;field-sizing:content;padding:0 var(--t-e2);
  border:1px solid var(--t-borda);border-radius:var(--t-r1);background:var(--t-superficie);color:var(--t-tinta)}
/* no telefone o rótulo fica na linha de cima, e o select vem com a regra ao lado — a regra não cai
   sozinha numa linha órfã */
@media (max-width:699.98px){ .reg-escritorio .ob-lembrete label{flex-basis:100%} }
/* os marcos ficam EM LINHA (não flex): o link «veja a sua página» é link no meio da frase, a exceção
   declarada do SC 2.5.8 — num item flex ele vira bloco e o medidor de alvo o conta como botão de 16px */
.reg-escritorio .ob-marcos{margin-top:0}
.reg-escritorio .ob-marcos > span{margin-right:var(--t-e4)}

/* ---- A LINHA DA LISTA (22/09) ---------------------------------------------
   A tela de tarefas tem CINCO listas, e cada linha trazia dois botões
   coloridos — um deles vermelho. Medido no retrato: 69 alvos na tela, quase
   todos «Editar» e «Remover» repetidos. A ação da linha vai para o «⋯»; o que
   é ESTADO (o intervalo que liga a cobrança da manutenção) fica FORA dele,
   visível, porque esconder estado é o erro que a divulgação progressiva
   costuma cometer. */
.reg-escritorio .t-item{display:flex;align-items:center;gap:var(--t-e3);
  padding:var(--t-e3) 0;border-top:1px solid var(--t-borda-sutil)}
.reg-escritorio .t-item:first-of-type{border-top:0}
.reg-escritorio .t-item-oque{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;
  gap:.125rem}
.reg-escritorio .t-item-oque b{font-size:.875rem;font-weight:700}
.reg-escritorio .t-item-oque .sub{font-size:.8125rem;color:var(--t-tinta-2)}
.reg-escritorio .t-item-controle{flex:0 0 auto;display:flex;align-items:center;
  gap:var(--t-e2);font-size:.8125rem;color:var(--t-tinta-2)}
/* 22/09 — 2.25rem (36px). É o campo de QUANTIDADE da linha: o lojista digita nele com a caixa
   na outra mão. Piso de 44px como qualquer outro campo; a largura de 4.5rem fica, porque
   largura de campo é a promessa do que cabe dentro — não é alvo. */
.reg-escritorio .t-item-controle input{width:4.5rem;font:inherit;font-size:.875rem;
  padding:.375rem var(--t-e2);border:1px solid var(--t-borda);border-radius:var(--t-r1);
  min-height:2.75rem}
/* a linha em edição: faixa à esquerda, não contorno pulando por cima do vizinho */
/* 22/09 (T-43) — A LINHA QUE TEM CORPO. O serviço, o plano e o contrato não cabem numa linha
   de uma altura só: cada um carrega um bloco (a receita, a composição) que é parte da linha e
   não uma segunda linha. `.t-item-bloco` é a mesma linha empilhada — mesmo fio, mesmo menu «⋯»
   no canto —, e o bloco de dentro fica RECUADO com um fio próprio, porque no primeiro retrato
   a receita lia como um segundo serviço: estava no mesmo nível do nome. */
.reg-escritorio .t-item-bloco{flex-direction:column;align-items:stretch;gap:var(--t-e2);
  position:relative;padding-right:3.25rem}
.reg-escritorio .t-item-bloco > .t-menu{position:absolute;right:0;top:var(--t-e2)}
.reg-escritorio .t-item-receita{border-left:3px solid var(--t-borda-sutil);
  padding-left:var(--t-e3);margin:0 0 0 var(--t-e1)}
.reg-escritorio .t-item-receita-rot{display:block;font-size:.6875rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--t-tinta-2);font-weight:700;margin-bottom:var(--t-e1)}
.reg-escritorio .t-item-receita .t-item{padding-left:0}
.reg-escritorio .t-item-receita .dica{margin:0}

/* «em estoque» é estado bom, e verde é a cor do estado bom na casa. Era `style="color:#1f7a5c"`
   na linha — um `style=` inline a menos, e a cor passa a ser decisão da camada. */
.reg-escritorio .t-ok{color:var(--t-ok,#1f7a5c)}
.reg-escritorio .t-item-marcada{box-shadow:inset .25rem 0 0 var(--t-acao);
  padding-left:var(--t-e3);background:var(--t-acao-clara)}
@media (max-width:600px){
  .reg-escritorio .t-item{flex-wrap:wrap}
  .reg-escritorio .t-item-controle{flex:1 1 100%;order:3}
}
/* o selo «de fábrica» na linha migrada. Ele mora DENTRO do <b> do título de
   propósito (§2.150): fora dele cairia na linha do detalhe e pareceria mais um
   atributo da tarefa, em vez de dizer de onde ela veio. */
.reg-escritorio .t-item-oque b .br-semente{display:inline-block;margin-left:var(--t-e2);
  padding:.0625rem var(--t-e2);border-radius:var(--t-r3);background:var(--t-borda-sutil);
  color:var(--t-tinta-2);font-size:.6875rem;font-weight:600;letter-spacing:.02em;
  vertical-align:.0625rem}

/* O PISO DO ALVO NO ESCRITÓRIO, e ele não é decoração: medido a 414px na tela
   de tarefas, o `<summary>` da ajuda dava 18,8px — abaixo do piso OBRIGATÓRIO
   da WCAG 2.2 (SC 2.5.8, 24px) — e os chips de teste, 29px. Sentado com mouse
   o alvo pode ser menor que no campo, mas «menor» não é «menor que o mínimo».
   44px é o SC 2.5.5, e é o que vale aqui. */
.reg-escritorio .t-ajuda summary{min-height:2.75rem;display:flex;align-items:center}
.reg-escritorio .br-chip{min-height:2.75rem}
/* Os CAMPOS dos formulários desta tela ainda não estão na grade de 12 colunas
   — isso é a próxima leva, e está escrito no item. Mas alvo e legibilidade não
   esperam grade: medidos a 414px, os `select` davam 34px e 12px de fonte. O
   piso e o tamanho entram agora; a arrumação vem depois. */
.reg-escritorio .br-form input,.reg-escritorio .br-form select,
.reg-escritorio .br-caixa input,.reg-escritorio .br-caixa select{
  min-height:2.75rem;font:inherit;font-size:.875rem}
/* 22/09 — O BOTÃO VELHO DA CASA, `button.acao` (app.html §375: `padding:10px 18px`, sem
   altura declarada → 36px medidos). Eu vinha cobrando o piso dele POR CAIXA
   (`.br-form .acao`, `.br-caixa .acao`), e por isso o «Salvar configurações», o «Ler e
   correlacionar», o «Imprimir fila» e o «Sair da conta» continuavam com 36 a 38px: nenhum
   deles mora numa dessas duas caixas.
   `.reg-escritorio .acao` são duas classes e vence `button.acao` (uma classe + um elemento)
   sem `!important` e sem nomear caixa nenhuma. É a mesma lição do `.t-btn`, um nível acima:
   remendo por container esconde o defeito da base. */
.reg-escritorio .acao{min-height:2.75rem}
/* o alternador de visão (`todas · no mapa · fora do mapa`, `por valor · por quantidade`) é
   chip de filtro: alvo como qualquer outro, peso visual de secundário. Medido a 32.1px. */
.reg-escritorio .visao-tog button{min-height:2.75rem}

/* ---- O QUADRO DA LISTA (T-43) na camada de tokens -------------------------
   A contagem é parte do TÍTULO, e não um número solto no canto: com
   `space-between` numa caixa de largura inteira ela ia parar do outro lado da
   tela, a um metro do que conta — visto no retrato de 1280px.
   E a lista inteira ganha largura máxima de leitura: linha de 1.500px com a
   ação na ponta direita obriga o olho a atravessar a tela para ligar uma coisa
   à outra. */
.reg-escritorio .t-lista-cab{display:flex;align-items:baseline;gap:var(--t-e3);
  flex-wrap:wrap;margin:var(--t-e5) 0 var(--t-e2);max-width:var(--t-col-lista)}
.reg-escritorio .t-lista-cab h3{margin:0}
.reg-escritorio .t-lista-busca{width:100%;max-width:21rem;margin:0 0 var(--t-e2);
  min-height:2.75rem;font:inherit;font-size:.875rem;padding:0 var(--t-e3);
  border:1px solid var(--t-borda);border-radius:var(--t-r1)}
.reg-escritorio .t-item{max-width:var(--t-col-lista)}

/* ---- A LINHA ANTIGA, DENTRO DO REGISTRO (22/09) ---------------------------
   Medido: 28 funções ainda constroem `.mov-li` com botões por linha, em telas
   que vão da estrutura ao contrato. Converter as 28 à mão numa passada é o
   tipo de mudança grande que ninguém consegue ler no retrato — e a casa da
   linha (`linhaLista`) vai chegar a elas uma a uma.
   O que NÃO pode esperar é o RUÍDO, que é o defeito que ele nomeou: botão
   colorido repetido em cada linha, em alturas e cores diferentes. Aqui a
   linha antiga recebe o mesmo desenho da nova — ação à direita, alvo de 44px,
   e a AÇÃO DESTRUTIVA em texto, com o vermelho aparecendo só no hover e no
   foco. Vermelho repetido vinte vezes não avisa de nada: vira papel de parede,
   e some justamente quando importa.
   Isto é CAMADA, não conserto: a conversão de cada lista continua na lista de
   trabalho, e esta regra sai quando a última migrar. */
.reg-escritorio .mov-li{align-items:center;gap:var(--t-e3);
  border-top:1px solid var(--t-borda-sutil);padding:var(--t-e3) 0;font-size:.875rem;
  /* a MESMA largura máxima da linha nova: no retrato de Serviços o «Remover» do insumo
     estava do outro lado da tela, a 1.400px do insumo que ele remove. Ação longe do seu
     objeto é ação de outra linha, para o olho. */
  max-width:var(--t-col-lista)}
.reg-escritorio .mov-li .oque{min-width:0}
.reg-escritorio .mov-li .oque span{font-size:.8125rem;color:var(--t-tinta-2)}
.reg-escritorio .mov-li .acao.mini,
.reg-escritorio .mov-li .acao.mini.sec,
.reg-escritorio .mov-li .acao.mini.vermelho{min-height:2.75rem;font-size:.8125rem;
  background:none;border:1px solid transparent;color:var(--t-tinta-2);font-weight:600}
.reg-escritorio .mov-li .acao.mini:hover,
.reg-escritorio .mov-li .acao.mini.sec:hover{color:var(--t-acao);border-color:var(--t-borda)}
.reg-escritorio .mov-li .acao.mini.vermelho:hover{color:var(--t-perda);border-color:var(--t-perda)}
.reg-escritorio .mov-li .acao.mini:focus-visible{border-color:var(--t-acao)}

/* ---- A CAIXA CINZA, QUE ERA O OUTRO RUÍDO (22/09) -------------------------
   Lido no retrato de Produtos e catálogo: QUATRO caixas cinzas empilhadas
   antes de qualquer conteúdo. A `.dica` da casa tem fundo, borda e raio — ou
   seja, toda frase de apoio vira um objeto com moldura, e uma tela com cinco
   frases de apoio vira cinco objetos disputando a atenção com o que a pessoa
   veio fazer. São 229 `.dica` no app.
   No registro, texto de apoio é TEXTO: sem moldura, menor e na tinta
   secundária. Quem continua sendo caixa é o `.aviso` — aviso é interrupção, e
   interrupção precisa de moldura para não se confundir com o resto.
   Isto é o oposto de «esconder»: a frase continua lá, inteira. O que sai é a
   caixa em volta dela. */
.reg-escritorio .dica{background:none;border:0;padding:0;border-radius:0;
  color:var(--t-tinta-2);font-size:.8125rem;margin:var(--t-e2) 0}
.reg-escritorio .dica b{color:var(--t-tinta)}
/* a exceção declarada: dentro do placar e da barra de lote a `.dica` é parte
   de um bloco que JÁ é caixa, e ali ela nunca teve moldura própria */
.reg-escritorio .t-lote .dica{margin:0}

/* ---- CAMPO DE TEXTO TEM LARGURA MÁXIMA (22/09) ----------------------------
   Lido no retrato do Balcão: o campo «Nome» com 1.170px ao lado do telefone
   com 320. É o defeito (a) do parecer — a coluna do formulário sem largura
   máxima —, e ele não é estético: campo muito mais largo que o seu conteúdo
   lê como quebrado, e some a pista de quanto se espera que você escreva.
   O número sai do conteúdo: 28rem cabe um nome completo com folga. Campos em
   grade já são limitados pela coluna, e o `max-width` só os limita mais quando
   a coluna é larga demais — nunca os encolhe abaixo da grade. */
/* `input:not([type])` entra na conta: sem o atributo o navegador trata como texto, mas o
   seletor `input[type="text"]` NÃO casa — e foi assim que o campo «Nome» do degrau de porte
   continuou com 1.440px de largura para caber a letra «P», visto no retrato de Preços. */
.reg-escritorio .cartao :where(input[type="text"],input[type="tel"],input[type="email"],
                               input[type="search"],input:not([type])){max-width:28rem}
/* o que precisa ser largo diz que precisa */
.reg-escritorio .cartao input.t-largo{max-width:none}

/* ---- O CAMPO, EM QUALQUER TELA DO REGISTRO (22/09) ------------------------
   As regras acima alcançavam os campos que moram em `.br-form` ou `.br-caixa`.
   Lido no retrato dos Relatórios: o `select` de período continuava com o
   tamanho nativo do navegador — 34px e fonte menor que o resto da tela —,
   porque não mora em nenhum dos dois. Alvo e legibilidade não podem depender
   de em qual caixa o campo caiu.
   `:where()` mantém a especificidade no mínimo de propósito: qualquer regra de
   tela que precise de outro tamanho continua ganhando desta, sem `!important`
   e sem disputa.
   22/09 — o `input[type=color]` saiu da lista de exclusões. Ele estava lá junto com `file` e as
   caixas de marcar, como se fosse a mesma coisa, e não é: o `file` ignora altura (quem recebe o
   toque é o botão interno que o navegador desenha) e a caixa de marcar tem o alvo no label. O
   seletor de cor ACEITA altura — a amostra cresce. Estava com 38px em Configurações por uma
   exclusão que ninguém tinha medido. */
.reg-escritorio :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
                       select, textarea){min-height:2.75rem;font-size:.875rem;font-family:inherit}
.reg-escritorio :where(textarea){min-height:5rem;padding:var(--t-e2) var(--t-e3)}

/* ---- O PISO, NOS DOIS CONTROLES QUE SOBRARAM (22/09) ----------------------
   Varredura de alvo nas 25 telas: sobraram três classes abaixo do piso
   obrigatório (24px, WCAG 2.2 SC 2.5.8).
   (1) `<summary>` fora da ajuda e do menu — a estante, «Nova bateria», «Do
       lote» — com 17 a 20px. São interruptores de verdade e não têm exceção.
   (2) caixas de seleção nativas com 16px. O SC 2.5.8 abre exceção para o
       controle cujo tamanho quem decide é o navegador, mas aqui quem decide
       somos nós no momento em que escolhemos não mexer: 24px é o piso, e uma
       caixa de marcar em lista de lote é exatamente o alvo que o dedo erra.
   (3) LINK DENTRO DE FRASE («Primeiros passos da loja»). Esse NÃO é defeito:
       o SC 2.5.8 excepciona explicitamente o alvo em linha dentro de um bloco
       de texto, porque aumentá-lo quebraria a frase. Fica como está, e o
       medidor passa a dizer isso em vez de contá-lo como falha. */
/* 22/09 — A CAIXA DE MARCAR, medida e não suposta. O comentário acima dizia «24px é o piso, e
   uma caixa de marcar em lista de lote é exatamente o alvo que o dedo erra» — e parava aí. Era
   decisão pela metade: reconhecia o problema e deixava o alvo em 24px.
   O que a medição a 414px mostrou: nas 11 caixas de Configurações a caixa JÁ MORA dentro de um
   `<label>` — e o label também tinha 24px. Clicar no label alterna a caixa, nativamente. Então
   o alvo de 44px não custa aumentar a caixa: custa dar altura à LINHA que já é clicável. A
   caixa continua com 24px (tamanho do navegador, exceção do SC 2.5.8); o ALVO passa a ser a
   linha inteira, que é o que o dedo acerta.
   Onde NÃO há label — `td` da tabela de lote, `div.chk` do balcão — isto não alcança, e o
   conserto é de marcação, não de camada: está no app.html, no mesmo commit. */
.reg-escritorio label:has(> input[type="checkbox"]),
.reg-escritorio label:has(> input[type="radio"]){min-height:2.75rem;
  display:flex;flex-direction:row;align-items:center;gap:var(--t-e2)}

.reg-escritorio :where(summary){min-height:2.75rem;display:flex;align-items:center}
.reg-escritorio :where(input[type="checkbox"],input[type="radio"]){width:1.5rem;height:1.5rem}

/* os chips do mapa também são alvo de campo: a regra de escritório (44px) nasceu depois da de
   campo no arquivo e passou a vencer quando a aba entrou no registro — mesma armadilha de
   cascata do bloco acima, e mesmo conserto. */
.reg-campo.reg-campo .br-chip{min-height:3.5rem}

/* `.chk input{width:16px}` (app.html, §do balcão) e o seletor de lote vencem o `:where` acima
   por especificidade — e é assim que se quer: regra de tela ganha da camada. O que NÃO pode é
   a regra de tela ficar abaixo do piso obrigatório. Aqui a camada cobra o piso desses dois
   casos nominalmente, com a especificidade necessária e a razão escrita, em vez de subir a
   especificidade da regra geral e passar a atropelar todas as telas. */
.reg-escritorio .chk input{width:1.5rem;height:1.5rem}
/* o `.chk` do balcão e do orçamento é `<input>` + `<label for=...>`: o label JÁ alterna a caixa,
   só não tinha altura. Dar 44px ao label é dar 44px ao alvo sem inchar a caixa. */
.reg-escritorio .chk label{min-height:2.75rem;display:flex;align-items:center}
/* a caixa de selecionar linha da tabela de lote não tinha label NENHUM — clicar ao lado dela não
   fazia nada, e a célula tem 48px de altura desperdiçados. O `<label>` embrulha a caixa (alterna
   nativamente, sem `for` e sem id) e ocupa a célula inteira. */
.reg-escritorio .t-tab td > label.t-sel-alvo{display:flex;align-items:center;justify-content:center;
  min-height:2.75rem;min-width:2.75rem;cursor:pointer;margin:0}
.reg-escritorio .movSel{width:1.5rem;height:1.5rem}
/* o `.acao.mini` é o botão mais comum do app (o «mini» vem de quando a tela toda era menor).
   Medido nas 25 telas: era o que sobrava abaixo dos 44px recomendados. O alvo sobe; o peso
   visual não — «mini» continua sendo o botão secundário, só deixa de ser pequeno para o dedo. */
.reg-escritorio .acao.mini{min-height:2.75rem}

/* AÇÃO EM LOTE (T-43, 22/09) — a marcação da linha e a barra do lote. A caixa tem alvo de 44px
   (o piso do registro) mesmo sendo pequena: quem é grande é o rótulo que a envolve. */
.lote-marca{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  min-width:44px;min-height:44px;margin:-6px 0 -6px -10px;cursor:pointer}
.lote-caixa{width:1.15rem;height:1.15rem;margin:0;accent-color:var(--t-acao,#137a70);cursor:pointer}
.mov-li > .lote-marca{order:-1}
/* percurso 3 (30/09): na célula de tabela (Clientes, Histórico de orçamentos) a caixa ia para uma linha
   só dela, centrada em cima do nome — a regra geral do rótulo com caixa (`label:has(> input)` → flex,
   mais específica) vencia o inline-flex daqui. A marca do lote fica ao lado do texto, sempre. */
.reg-escritorio label.lote-marca:has(> input[type="checkbox"]){display:inline-flex;vertical-align:middle}
/* a caixa e o texto ficam na MESMA linha também a 414 px: sem isto o título longo empurrava a
   caixa para uma linha só dela, e a lista virava duas colunas desencontradas (visto no retrato) */
.t-item > .lote-marca + .t-item-oque{flex:1 1 0;min-width:0}
/* percurso 3 (30/09): na linha `.mov-li` (excluídos do Histórico, sinais de recompra) o texto ficava
   CENTRADO entre a caixa e o botão — o `space-between` da linha espalhava os três. O texto ocupa o meio. */
.mov-li > .lote-marca + .oque{flex:1 1 0;min-width:0}
.lote-barra{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 10px;margin:0 0 8px;
  border:1px solid var(--t-borda-sutil,#d2dde1);border-radius:10px;background:var(--t-acao-clara,#eef6f8);
  position:sticky;top:0;z-index:5}
.lote-barra[hidden]{display:none}
.lote-barra .lote-conta{font-weight:700;font-size:.875rem;margin-right:auto}

/* EDIÇÃO EM PAINEL (T-43, 22/09, noite) — editar sem sair da lista. Antes, «Editar» enchia uma
   caixa no topo ou no pé da tela e ROLAVA até ela: a pessoa perdia a linha que estava editando
   e, depois de salvar, tinha de achar de novo onde estava. Agora a MESMA caixa vira painel —
   ao lado da lista no escritório (a lista encolhe e continua à vista), e subindo do pé no
   telefone. Não é modal: a lista continua clicável, e outra linha editada troca o conteúdo. */
.t-painel{position:fixed;z-index:60;overflow:auto;background:var(--t-superficie);color:var(--t-tinta);
  box-shadow:var(--t-sombra);padding:var(--t-e4);margin:0;overscroll-behavior:contain;
  /* caixa que é grade (a da tarefa é) esticava as linhas até a altura da tela: título com 135 px
     e um vão de 200 px antes do formulário — visto no retrato de 1280 px */
  align-content:start}
@media (min-width:900px){
  .t-painel{top:0;right:0;bottom:0;width:min(30rem,42vw);border-left:1px solid var(--t-borda)}
  body.com-painel{padding-right:min(30rem,42vw)}
}
@media (max-width:899px){
  .t-painel{left:0;right:0;bottom:0;max-height:85vh;border-top:1px solid var(--t-borda);
    border-radius:var(--t-r2) var(--t-r2) 0 0;padding-bottom:calc(var(--t-e4) + env(safe-area-inset-bottom))}
}
/* a linha que está no painel fica dita na lista — quem olha ao lado sabe qual é */
.t-item-editando,.mov-li.t-item-editando{box-shadow:inset .25rem 0 0 var(--t-acao);background:var(--t-acao-clara)}

/* CONVITE DOS EXEMPLOS (V-99, 22/09, noite) — a lista de serviços oferece os 13 exemplos: grande
   quando a lista está vazia, discreto quando só faltam alguns. */
.t-convite{display:flex;flex-wrap:wrap;gap:var(--t-e2) var(--t-e3);align-items:center;margin:var(--t-e3) 0;
  padding:var(--t-e3) var(--t-e4);border:1px dashed var(--t-borda);border-radius:var(--t-r2);background:var(--t-superficie)}
.t-convite > .dica{flex:1 1 20rem;margin:0}

/* FORMULÁRIOS ANTIGOS NA GRADE DE 12 COLUNAS (T-84, 23/09) — os 25 `.br-form` do app. Antes:
   `auto-fit` de colunas de 160 px com `align-items:end` — cada campo com a mesma largura, e o
   campo que traz explicação dentro do rótulo empurrava os vizinhos para baixo (visto no retrato
   do formulário de serviço: «Água» e «Troca de água» caíam para o pé da explicação da duração).
   Agora a MESMA grade do formulário migrado, com a largura declarada pelo que o campo É:
     · texto livre (nome, descrição): 8 de 12 — é uma frase;
     · número, data, escolha: 4 de 12 — três por linha;
     · área de texto, `.larga`, e tudo que não é campo (dica, aviso, título, caixas de marcar):
       a linha inteira;
     · botão: largura dele, em fila, no pé.
   A tela pode declarar outra largura com as mesmas classes `c2`…`c12` do `.t-form`. */
.reg-escritorio .br-form{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--t-e3) var(--t-e4);
  align-items:start;max-width:var(--t-col-form)}
.reg-escritorio .br-form > *{grid-column:1/-1}
.reg-escritorio .br-form > label{grid-column:span 4}
.reg-escritorio .br-form > label:has(> input:not([type])),
.reg-escritorio .br-form > label:has(> input[type="text"]),
.reg-escritorio .br-form > label:has(> input[type="email"]){grid-column:span 8}
.reg-escritorio .br-form > label:has(textarea),
.reg-escritorio .br-form > label.larga{grid-column:1/-1}
.reg-escritorio .br-form > button,.reg-escritorio .br-form > .acao{grid-column:span 4;justify-self:start;
  white-space:nowrap}
.reg-escritorio .br-form > .c12{grid-column:span 12}.reg-escritorio .br-form > .c8{grid-column:span 8}
.reg-escritorio .br-form > .c6{grid-column:span 6}.reg-escritorio .br-form > .c4{grid-column:span 4}
.reg-escritorio .br-form > .c3{grid-column:span 3}
@media (max-width:640px){
  .reg-escritorio .br-form > label{grid-column:1/-1!important}
  .reg-escritorio .br-form > button,.reg-escritorio .br-form > .acao{grid-column:span 6}
}

/* V-148 (23/09): a chave «preço na vitrine» da loja e o seletor por item; V-131: a linha dos CSV */
.preco-pub{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 10px}
.preco-pub .dica{margin:0}
.preco-pub label{display:inline-flex;gap:6px;align-items:center;margin:0}
.est-preco{display:block;margin:4px auto 0;font-size:11px;max-width:130px}
.csv-linha{margin-top:10px}

/* V-128 (23/09): a esteira de recepção do lote — o estágio é a cor E a palavra, nunca só a cor */
.esteira-resumo{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.esteira-etapa{display:inline-block;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;border:1px solid currentColor;white-space:nowrap}
.esteira-aclimatacao,.esteira-quarentena{color:var(--t-atencao);background:var(--t-atencao-cl)}
.esteira-tratamento{color:var(--t-perda);background:var(--t-perda-cl)}
.esteira-liberado{color:var(--t-acao);background:var(--t-acao-clara)}
.esteira-nao-sei{color:var(--t-tinta-2);background:var(--t-borda-sutil)}

/* V-129 (23/09): o laudo de perda — documento impresso, preto no branco em qualquer tema */
.laudo-linha{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:10px 0}
.laudo-linha .dica{margin:0}
.laudo{color:#000;background:#fff;font-size:11pt}
.laudo h1{font-size:16pt;margin:0 0 8px}
.laudo table{width:100%;border-collapse:collapse;margin:10px 0;font-size:9.5pt}
.laudo th,.laudo td{border:1px solid #999;padding:4px;vertical-align:top;text-align:left}
.laudo .num{text-align:right;white-space:nowrap}
.laudo-det{font-size:8.5pt}
.laudo-nota{font-size:9pt;color:#333}
.laudo-ass{margin-top:36px}

/* V-132 (23/09): a lista de reposição */
.repos{margin:0 0 16px}
.repos-escolha .repos-op{display:flex;gap:8px;align-items:flex-start;margin:8px 0}
.repos-escolha .repos-op input[type=number]{width:5em;display:inline-block}
.repos-cab{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0 8px}
.repos-cab .dica{margin:0}
.repos-filtro{display:inline-flex;gap:6px;align-items:center;margin:0}
.repos-min{width:5em}
.repos-rolagem{max-width:100%;overflow-x:auto}
/* 29/09 (V-258): tabela larga rola DENTRO da própria caixa, nunca a página. A 414 px a
   Movimentação (8 colunas, 819 px) fazia a tela inteira rolar 405 px para o lado, e o preço do
   vidro (983 px) 569 px — a conferência de tela passou a medir isso em toda tela do app. */
.t-rola{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.repos-tab{min-width:0}
.repos-tab .sub{color:var(--t-tinta-2);font-size:12px}


/* DICA CURTA (V-415, 02/10): a linha que diz o que fazer fica na tela; a explicação inteira,
   recolhida em «Por quê». O <summary> respeita o piso de alvo do registro (44 px). */
.dica-curta{display:block}
.dica-mais{margin:var(--t-e1,.25rem) 0 0}
.dica-mais>summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;font-weight:600;color:var(--t-acao,#2e7d4f)}
.dica-mais>div{margin-top:var(--t-e1,.25rem)}
/* V-503 (04/10): o estado do fornecedor no importador — cadastrado, novo declarado, ou a pergunta
   «é um destes?». Os botões da linha quebram (flex-wrap) para não estourar a 414 px. */
.imp-forn-estado{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0 0;font-size:13px;color:var(--t-tinta-2,#56676e)}
.imp-forn-estado[hidden]{display:none}
.imp-forn-ok{color:var(--t-tinta,#1d2a31)}
.imp-forn-alerta{color:var(--sev-atencao-tinta,#8a5300);font-weight:600}
/* V-504 (04/10): a busca do «outro produto ou item» na linha da importação (estilo fora do HTML — teto de style= só desce) */
.imp-alvo{margin-top:6px}
.imp-alvo label{font-size:12px;display:block}
.imp-alvo input{width:100%;max-width:260px}
.imp-alvo .dica{font-size:11px}
.imp-alvo .imp-alvo-falta{color:var(--sev-atencao-tinta,#8a5300)}
/* V-501 (08/10): o de-para do fornecedor — o tipo do alvo em tom secundário, o alvo morto dito em atenção
   e o campo de apontar na própria linha (a busca é a mesma datalist do importador, mais as espécies) */
.sub-tipo{color:var(--t-tinta-2,#56676e);font-weight:400;font-size:.85em}
.fdp-morto{color:var(--sev-atencao-tinta,#8a5300)}
.fdp-apontar{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-end}
.fdp-apontar label{font-size:12px;display:block;flex:1 1 220px}
.fdp-apontar input{width:100%;max-width:320px}
/* V-505: o «Ver todos os aquários» do filtro da tarefa na leitura, numa linha só dele */
.lei-ver-todos{display:block;margin-top:.5rem}
/* ==== V-1056 ==== */
/* §5ah (15/10): o desenho que estava em style= nos botões do painel, mudado para cá sem mudar a tela.
   Cada regra é escopada à tela do botão. Conferido com o estilo computado antes/depois (414 e 1280). */
#btnMenuCel{display:none;background:none;border:1px solid rgba(255,255,255,.4);color:#fff;font-size:19px;
  border-radius:8px;padding:4px 10px;cursor:pointer}
#avisoOrcamento button.acao{margin-left:6px}
#impPasso2 button.acao.sec{color:var(--azul-esc);border-color:#c3dfee}
#previaLogo + button.acao{align-self:flex-end}
#aba-config button.link-texto{background:none;border:0;padding:0;font:inherit;color:inherit;
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
#brGrCodSug button.acao.mini,#brAvCodSug button.acao.mini{padding:2px 10px}
#crmTagsSugestoes button.tagchip{border:0;cursor:pointer;font:inherit;font-size:11px}
#brVista .br-cel.br-fora{opacity:.42;filter:grayscale(1)}
/* Indicações (15/10): os botões seguem o secundário padrão do painel (acao mini sec) — o desenho à mão do `bs` saiu. */
/* ==== fim V-1056 ==== */
/* ==== V-1055 ==== */
/* §5ah regra 4: o convite mostra o resultado onde o olho está — a linha no recado do cliente salvo (#crmFeito)
   e o estado do último convite sob o nome do cliente. Cores da paleta do painel (conferir-telas.js). */
#aba-clientes .crm-feito-convite{margin:6px 0 0;padding:6px 10px;border:1px solid;border-radius:8px;font-size:13px;line-height:1.4}
#aba-clientes .crm-feito-ok{background:#e2efe8;color:#1f5c3a;border-color:#b9e3a4}
#aba-clientes .crm-feito-erro{background:#fdeceb;color:#a01f15;border-color:#f5c6c3}
#aba-clientes .crm-feito-atencao{background:#fdf3e2;color:#8a5200;border-color:#f0cf9a}
#aba-clientes .selo-convite{display:inline-block;margin-top:3px;border:1px solid;border-radius:8px;padding:2px 8px;
  font-size:11.5px;font-weight:600}
#aba-clientes .selo-convite-enviado{background:#f1f6f7;color:#56676e;border-color:#d2dde1}
#aba-clientes .selo-convite-aceito{background:#e2efe8;color:#1f5c3a;border-color:#b9e3a4}
#aba-clientes .selo-convite-vencido{background:#fdf3e2;color:#8a5200;border-color:#f0cf9a}
/* V-1494: aceitou e depois parou de compartilhar — mesmo tom do vencido: pede um passo da loja */
#aba-clientes .selo-convite-revogado{background:#fdf3e2;color:#8a5200;border-color:#f0cf9a}
/* ==== fim V-1055 ==== */

/* ==== V-1053 ==== o pedido que o link do e-mail abriu (app?indicacao=<id>, app?pedido_acesso=<id>):
   destacado no começo da lista de Indicações aquacalc e na de pedidos de acesso. A frase entra no lugar do cartão
   quando o pedido não é da loja, não existe mais ou já foi atendido. */
#indicacoesLista .ind-foco,#crmPedidos .ind-foco{border-radius:var(--t-r2,10px);
  box-shadow:0 0 0 2px var(--t-acao,#19847c);background:var(--t-acao-clara,#e6f5f2);
  padding:var(--t-e2,8px);margin:0 0 var(--t-e3,12px)}
#indicacoesLista .ind-foco > div:last-child{margin-bottom:0}
#aba-clientes #crmPedidos .crm-li.ind-foco{padding:var(--t-e2,8px) var(--t-e3,12px);margin:var(--t-e1,4px) 0 var(--t-e2,8px)}
#indicacoesLista .ind-foco-tit{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--t-tinta-2,#56676e);margin:0 0 var(--t-e2,8px)}
#indicacoesLista .ind-foco-frase,#crmPedidos .ind-foco-frase{font-size:.875rem;line-height:1.5;
  color:var(--t-tinta,#0e2430);padding:var(--t-e3,12px);
  box-shadow:0 0 0 1px var(--t-borda-sutil,#d2dde1);background:var(--t-fundo,#f1f6f7)}
#indicacoesLista .ind-foco-resto{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--t-tinta-2,#56676e);margin:var(--t-e3,12px) 0 var(--t-e2,8px)}
/* C-05: o teto que o aquarista escreveu na solicitação, no cartão da indicação */
#indicacoesLista .ind-teto{font-size:.8125rem;color:var(--t-tinta);margin:0 0 6px}
#indicacoesLista .ind-teto b{color:var(--t-profundo)}
/* ==== fim V-1053 ==== */
/* ==== V-1045 ==== o aquário compartilhado no prontuário: tipo/volume, habitantes e os últimos testes
   (V-1057 etapa 7: o prontuário mora numa casa só, a aba da ficha do cliente — #cliProntBox) */
#cliProntBox .pront-aq{margin-bottom:10px}
#cliProntBox .pront-aq-sub{color:var(--t-tinta-2,#56676e);font-size:12.5px}
#cliProntBox .pront-aq-hab{font-size:12.5px;padding:3px 0;overflow-wrap:anywhere}
#cliProntBox .pront-aq-rot{color:var(--t-tinta-2,#56676e);font-weight:600}
#cliProntBox .pront-aq-teste{font-size:12.5px;padding:3px 0;border-top:1px solid #e6eef2;overflow-wrap:anywhere}
#cliProntBox .pront-aq-vazio{font-size:12.5px;color:#7d8f96;padding:3px 0}
/* ==== fim V-1045 ==== */
/* ==== V-1051 ==== */
/* «Como sua loja assina» no cartão da página no diretório: largura mínima do campo e as duas dicas coladas nele */
#cartaoVitrine .v1051-nome{min-width:min(280px,100%)}
#cartaoVitrine .v1051-nome .dica{margin:2px 0 0}
#cartaoVitrine .v1051-nome .dica[hidden]{display:none}
/* ==== fim V-1051 ==== */
/* ==== V-1057 ==== onde estou (etapa 1) e a ação principal no cabeçalho (etapa 5)
   A ficha aberta (contrato, visita, cuba) troca a trilha do cabeçalho pela VOLTA: «Serviços › Contratos», com o nome
   da lista clicável; no celular, só «← Contratos». A busca e o filtro da lista somem enquanto a ficha está aberta
   (`data-so-lista` + `hidden`; o !important vence o `display:flex` escrito na linha). */
[data-so-lista][hidden]{display:none!important}
/* a ação principal do cabeçalho tem o alvo de toque da casa (44 px, alvo-nao-piora): o `button.acao` velho nasce com 36 */
#telaAcoes button.acao{min-height:2.75rem}
#telaAcoes button.acao[data-registro="campo"]{min-height:3.5rem;font-size:1.0625rem}   /* tela de campo (Leitura): 56 px, de pé */
#telaTrilha button.link-texto{background:none;border:0;padding:0;margin:0;font:inherit;letter-spacing:inherit;
  text-transform:inherit;color:var(--t-acao);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
#telaTrilha button.link-texto:hover{color:var(--t-tinta)}
#telaTrilha button.link-texto:focus-visible{outline:2px solid var(--t-acao);outline-offset:2px}
@media (max-width:640px){
  #telaTrilha .tela-dom{display:none}
  #telaTrilha button.link-texto{font-size:.875rem;min-height:2.75rem;text-decoration:none}
  #telaTrilha button.link-texto::before{content:"← "}
  #telaAcoes .acao{flex:1 1 auto;justify-content:center;text-align:center}
}
/* na ronda o verde é o bipe: a ação da linha da tarefa ficou em contorno e continua a 7:1 (V-351) — o texto e a
   borda no verde profundo do campo, sobre branco */
.reg-campo.reg-campo .t-linha-acao button.acao.sec{color:var(--t-acao-campo);border-color:var(--t-acao-campo)}
/* ==== fim V-1057 ==== */
/* ==== V-1068 ==== V-1057 etapa 8: o contrato em 4 passos, a ação presa no pé, o canal do envio, o selo da situação
   e o cartão «Contrato aceito» do Hoje. Escopado ao formulário (#ctrForm), à tela de contratos e ao Hoje. */
#ctrForm [hidden],#cartaoContratos [hidden]{display:none!important}   /* .br-form e button.acao têm display próprio */
#ctrForm .ctr-trilho{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
#ctrForm .ctr-trilho li{border-top:4px solid #d2dde1;padding-top:6px;font-size:12.5px;font-weight:600;color:#56676e;line-height:1.3}
#ctrForm .ctr-trilho li.feito{border-color:#2e7d4f;color:#1f5c3a}
#ctrForm .ctr-trilho li[aria-current]{border-color:#0e2430;color:#0e2430}
#ctrForm .ctr-raro{border:1px solid #d2dde1;border-radius:10px;padding:8px 12px}
#ctrForm .ctr-raro>summary{cursor:pointer;font-weight:600;color:#1f5c3a;min-height:2.75rem;display:flex;align-items:center}
#ctrForm .ctr-raro>.br-form{margin-top:8px}
#ctrForm .ctr-pe{position:sticky;bottom:0;z-index:5;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;
  margin:14px -16px -16px;padding:12px 16px;background:#ffffff;border-top:1px solid #d2dde1;border-radius:0 0 11px 11px}
#ctrForm .ctr-pe button.acao{min-height:2.75rem}
#ctrForm .ctr-pe [data-ctr-pe="voltar"]{margin-right:auto}
#ctrForm .ctr-resumo{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0 0 12px;font-size:14px}
#ctrForm .ctr-resumo dt{color:#56676e}
#ctrForm .ctr-resumo dd{margin:0;color:#0e2430}
#ctrForm .ctr-aviso-conta{border:1px solid #f0cf9a;background:#fdf3e2;color:#8a5200;border-radius:10px;padding:10px 12px;font-size:13.5px;margin:0 0 10px}
#ctrForm .ctr-aviso-conta b{color:#8a5200}
#ctrForm .ctr-aviso-conta.com-conta{border-color:#b9e3a4;background:#e2efe8;color:#1f5c3a}
#ctrForm .ctr-aviso-conta.com-conta b{color:#1f5c3a}
#ctrForm .ctr-canais{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
#ctrForm .ctr-canais legend{font-weight:700;font-size:13.5px;margin-bottom:6px;color:#0e2430}
#ctrForm .ctr-canal{display:flex;flex-direction:row;align-items:center;gap:8px;min-height:2.75rem;border:1px solid #d2dde1;border-radius:10px;padding:6px 12px;cursor:pointer;width:auto}
#ctrForm .ctr-canal input{width:auto;margin:0}
#ctrForm .ctr-canal.desligado{color:#56676e;cursor:default;background:#f1f6f7}
#cartaoContratos .ctr-selo{display:inline-block;border:1px solid;border-radius:8px;padding:1px 8px;margin-right:6px;font-size:12px;font-weight:700;vertical-align:1px}
#cartaoContratos .ctr-selo-rascunho{background:#f1f6f7;color:#56676e;border-color:#d2dde1}
#cartaoContratos .ctr-selo-enviado{background:#fdf3e2;color:#8a5200;border-color:#f0cf9a}
#cartaoContratos .ctr-selo-aceito{background:#e2efe8;color:#1f5c3a;border-color:#b9e3a4}
#cartaoContratos .ctr-selo-encerrado{background:#f1f6f7;color:#56676e;border-color:#d2dde1}
#cartaoContratos .ctr-situacao{margin:0 0 10px;font-size:14px}
#cartaoContratos .ctr-situacao span{color:#56676e}
#cartaoContratos .ctr-envio-acao{margin:-2px 0 12px}
#cartaoContratos .ctr-envio-acao button.acao{min-height:2.75rem}
#cartaoContratos .ctr-enviado{border:1px solid #b9e3a4;background:#e2efe8;border-radius:10px;padding:12px 14px;margin:0 0 12px}
#cartaoContratos .ctr-enviado h3{margin:0 0 4px;font-size:15px}
#cartaoContratos .ctr-enviado .nota{margin:0 0 8px}
#cartaoContratos .ctr-enviado h3{color:#1f5c3a}
#cartaoContratos .ctr-enviado-erro{border-color:#f5c6c3;background:#fdeceb}
#cartaoContratos .ctr-enviado-erro h3{color:#a01f15}
@media(max-width:999px){
  /* a barra de baixo do celular é fixa: o pé do formulário gruda logo acima dela */
  #ctrForm .ctr-pe{bottom:calc(62px + env(safe-area-inset-bottom))}
  #ctrForm .ctr-trilho li{font-size:11.5px}
  /* no celular o pé é uma grade: os secundários numa linha, a principal inteira embaixo — o pé não come a tela */
  #ctrForm .ctr-pe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:8px 12px;margin:14px -16px -16px}
  #ctrForm .ctr-pe button.acao{width:100%;padding-left:6px;padding-right:6px;line-height:1.15}
  #ctrForm .ctr-pe button.acao:not(.sec){grid-column:1/-1}
  #ctrForm .ctr-pe [data-ctr-pe="voltar"]{margin-right:0}
}
/* ==== fim V-1068 ==== */
/* ==== V-1065 ==== V-1057 etapa 7: a ficha do cliente com abas, e o convite como caixa do formulário de cliente novo
   As abas reusam o desenho das de Relatórios (.rel-abas/.rel-aba, app.html). Aqui: o nome da linha que abre a ficha, o
   Resumo (rótulo à esquerda no computador, empilhado no celular), os passos em contorno, e as duas marcas do formulário
   (autorizou contato · mandar o convite) em linha, com o alvo de 44 px da casa. */
/* o nome tem a região de toque da casa (44 px) sem engordar a linha: a margem negativa devolve à linha o que o alvo
   ganhou (a linha do cliente continua com a altura medida no V-275) */
#aba-clientes button.cli-nome{display:inline-flex;align-items:center;min-height:2.75rem;margin:-.75rem 0;background:none;border:0;padding:0;
  font:inherit;font-weight:700;color:var(--t-tinta,#0e2430);text-align:left;cursor:pointer;text-decoration:underline;
  text-decoration-color:#9fb2b8;text-underline-offset:3px}
/* o selo de aquário compartilhado e o «✓ autorizou» na paleta do painel (o stub não tinha cliente, e a conferência de cor
   nunca os tinha visto: #e8f5f1/#146b5f/#b9e0d6 e #1a7f4e eram de fora do manual) */
#aba-clientes .selo-compart{background:#e2efe8;color:#1f5c3a;border-color:#b9e3a4}
#aba-clientes span.consent-ok{color:#1f5c3a}
#aba-clientes button.cli-nome:hover{color:var(--t-acao)}
#aba-clientes button.cli-nome:focus-visible{outline:2px solid var(--t-acao);outline-offset:2px}
#aba-clientes .cli-abas{margin:0 0 12px}
#aba-clientes .cli-resumo{display:grid;grid-template-columns:minmax(140px,max-content) 1fr;gap:8px 18px;margin:0 0 14px;font-size:14px}
#aba-clientes .cli-resumo dt{color:var(--t-tinta-2,#56676e);font-weight:600}
#aba-clientes .cli-resumo dd{margin:0;overflow-wrap:anywhere}
#aba-clientes .cli-resumo a{color:#1f5c3a;font-weight:600}
#aba-clientes .cli-nada{color:#7d8f96}
#aba-clientes .cli-resumo button.link-texto{display:inline-flex;align-items:center;vertical-align:baseline;min-height:2.75rem;margin:-.75rem 0;
  background:none;border:0;padding:0 2px;font:inherit;color:#1f5c3a;font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
#aba-clientes .cli-passos{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
#aba-clientes .cli-passos .acao,#aba-clientes .cli-painel .acao{min-height:2.75rem}
#aba-clientes .cli-passos details.t-menu{position:relative}
#aba-clientes .cli-painel .mov-li{align-items:center}
#aba-clientes .crm-form label.crm-marca{flex-direction:row;align-items:center;gap:8px;font-size:13px;color:#0e2430;font-weight:600;min-height:2.75rem}
#aba-clientes .crm-form label.crm-marca input{width:20px;height:20px;padding:0;flex:none}
#aba-clientes .crm-form label.crm-marca[hidden]{display:none}
@media (max-width:640px){
  #aba-clientes .cli-resumo{grid-template-columns:1fr;gap:2px}
  #aba-clientes .cli-resumo dd{margin:0 0 8px}
  /* as cinco abas não cabem numa linha a 414: quebram em duas, à vista, em vez de esconder «Prontuário» e «Anotações» na rolagem */
  #aba-clientes .cli-abas{flex-wrap:wrap;overflow-x:visible;gap:0 2px}
  #aba-clientes .cli-abas button.rel-aba{padding:10px 10px}
}
/* ==== fim V-1065 ==== */

/* ==== V-1049 ==== */
/* O aviso do Meu aquacalc em Clientes, a 414 px: com a caixa de seleção, o WhatsApp e o «contatado» na mesma linha, o
   nome e o item ficavam numa coluna de 120 px, uma palavra por linha. No celular o texto ocupa a linha e as ações descem. */
@media (max-width:600px){
  #recompraLista .mov-li .oque{flex:1 1 calc(100% - 48px);min-width:0}
  #recompraLista .mov-li > div:last-child{flex:1 1 100%;justify-content:flex-end}
}
/* ==== fim V-1049 ==== */

/* ==== V-1135 ==== */
/* Condições de pagamento: as caixas do orçamento (Ajustes comerciais) e o cadastro em Ajustes › Dados da loja. Cada
   caixa é a linha inteira (alvo de 44 px, mão molhada); o valor de cada forma vem embaixo do texto, menor. */
#aba-orcamento .cpg-orc{border:1px solid #d2dde1;border-radius:10px;padding:10px 12px 6px;margin:4px 0 12px;max-width:920px}
#aba-orcamento .cpg-orc legend{font-size:12px;color:#56676e;font-weight:600;padding:0 4px}
#aba-orcamento .cpg-orc-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:4px 12px}
#aba-orcamento .cpg-orc-item{display:flex;gap:10px;align-items:flex-start;min-height:44px;padding:6px 0;cursor:pointer;font-size:14px;color:#0e2430}
#aba-orcamento .cpg-orc-item input{width:20px;height:20px;flex:none;margin:1px 0 0}
#aba-orcamento .cpg-orc-item span{display:flex;flex-direction:column;gap:1px;min-width:0;overflow-wrap:anywhere}
#aba-orcamento .cpg-orc-valor{font-size:12.5px;color:#56676e}
#aba-orcamento #cpgOutra{width:100%;max-width:520px;font:inherit;padding:8px 10px;border:1px solid #d2dde1;border-radius:8px;margin:0 0 4px}
#aba-orcamento #cpgOrcPrevia{margin:6px 0 4px}
#cpgCartao .cpg-busca-rot{display:block;font-size:12px;color:#56676e;font-weight:600;margin:6px 0 3px}
#cpgCartao #cpgBusca{width:100%;max-width:520px}
#cpgCartao .br-form label.cpg-padrao{flex-direction:row;align-items:center;gap:8px;min-height:44px;font-size:13px;color:#0e2430}
#cpgCartao .br-form label.cpg-padrao input{width:20px;height:20px;padding:0;flex:none}
#cpgCartao details.cpg-numeros{margin:4px 0 0}
#cpgCartao details.cpg-numeros summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;color:#1f5c3a}
#docImpressao ul.doc-pag{margin:0 0 4px;padding-left:18px}
/* ==== fim V-1135 ==== */

/* ==== V-929 ==== */
.ped-saida{margin:8px 0 12px;padding:10px;border:1px solid var(--t-borda-sutil);border-radius:8px;background:var(--t-fundo)}
.ped-saida h4{margin:0 0 6px;font-size:15px}
.ped-saida .aviso{margin:6px 0}
.ped-texto{display:block;width:100%;box-sizing:border-box;font:13px/1.4 ui-monospace,Menlo,Consolas,monospace;resize:vertical;margin:6px 0}
.ped-acoes{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ped-link{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--t-acao);border-radius:var(--t-e1);color:var(--t-acao-campo);font-weight:600;text-decoration:none;background:var(--t-superficie)}
/* ==== fim V-929 ==== */

/* ==== V-1042 — decisões de tela dos percursos 8 a 12 (03/11) ==== */
/* V-509: «Mais dados» do cliente — o essencial fica à vista, o resto recolhe; o sumário é alvo de toque (44 px) */
#aba-clientes details.crm-mais{border:1px solid var(--t-borda-sutil,#d2dde1);border-radius:10px;padding:0 10px;background:#fff}
#aba-clientes details.crm-mais > summary{cursor:pointer;min-height:2.75rem;display:flex;align-items:center;font-size:13px;font-weight:700;color:#0e2430}
#aba-clientes details.crm-mais[open] > summary{margin-bottom:6px}
/* percurso 12: no lote da olhada os cinco botões viravam cinco linhas de largura inteira (992 px a 1452) — a regra do
   registro de campo dá `width:100%` a todo `button.acao`. Os auxiliares dividem a linha (alvo de 56 px mantido); o gesto
   principal (Olhei/Alimentei/Fiz) fica inteiro na linha de baixo. */
.reg-campo.reg-campo .lote-acoes > button.acao{width:auto;flex:1 1 auto}
.reg-campo.reg-campo .lote-acoes > button.acao:not(.sec){flex:1 1 100%}
/* tarefa da ronda que passou da hora-limite: o selo em vermelho */
#cartaoBaterias .atrasado{color:#b3261e;font-weight:700}
/* a caixa de marcar do lote ficava numa linha só dela, em cima do nome (Serviços e Planos): ao lado do nome, no canto */
.reg-escritorio .t-item-bloco > .lote-marca{position:absolute;left:0;top:0;margin:0}
.reg-escritorio .t-item-bloco > .lote-marca + .t-item-oque{padding-left:2.25rem}
.pln-plano{position:relative}
.pln-plano > .lote-marca{position:absolute;left:0;top:2px;margin:0}
.pln-plano > .lote-marca + .oque{padding-left:2.25rem}
#aba-clientes details.crm-mais > summary::after{content:"⌄";margin-left:auto;padding-left:8px}
#aba-clientes details.crm-mais[open] > summary::after{content:"⌃"}

/* ==== V-1507 — TABELA → CARTÃO a 414 px (03/11/2026) ==============================================================
   Padrão reaproveitável, do desenho interno/desenhos/decisoes-de-tela-percursos-8-a-12.md (itens 5, 8 e 12): a lista de
   várias colunas (Histórico de orçamentos, Movimentação do estoque, Clientes) rolava para o lado dentro da `.t-rola` —
   a coluna Quantidade/Etapa/Contato só aparecia rolando, com a mão molhada. Abaixo de 640 px a UMA LINHA da tabela vira
   UM CARTÃO empilhado: rótulo em cima do valor, e as ações no fim. Acima disso continua tabela, como sempre foi.
   COMO USAR: `<table class="t-cartao">` dentro da `.t-rola`; cada `<td>` que precisa de rótulo leva `data-rot="Rótulo"`
   (sem `data-rot` a célula não ganha rótulo — a que é o título do cartão e a das ações); `t-cartao-larga` toma a linha
   inteira (as outras dividem a linha de duas em duas), `t-cartao-cab` sobe para o topo (tipo e data), e a célula da
   caixa de seleção leva `t-cartao-marca` e vai para o canto do cartão. A linha do cabeçalho (`<tr>` só com `<th>` ou
   `<thead>`) some no cartão: o rótulo de cada valor já está nele. Guarda: interno/testes/tabela-vira-cartao.test.js
   (as regras) e a seção «V-1507» do interno/render/conferir-telas.js (a tela a 414 px, sem rolagem para o lado). */
@media (max-width:640px){
  .t-rola table.t-cartao, .t-rola table.t-cartao tbody{display:block;width:100%}
  .t-rola table.t-cartao thead, .t-rola table.t-cartao tr:has(> th){display:none}
  /* o cartão é uma grade de duas colunas: o que é curto (Etapa e Valor, Origem e Quantidade) divide a linha e o cartão
     não vira uma torre de 300 px; `t-cartao-larga` ocupa a linha inteira; `t-cartao-cab` vai para o topo (tipo e data) */
  .t-rola table.t-cartao tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--t-e1) var(--t-e3);
    grid-auto-flow:dense;position:relative;background:var(--t-superficie);
    border:1px solid var(--t-borda-sutil);border-radius:var(--t-r2);padding:var(--t-e2) var(--t-e3);margin:0 0 var(--t-e2)}
  .t-rola table.t-cartao tr:hover{background:var(--t-superficie)}
  .t-rola table.t-cartao td{display:block;width:auto;height:auto;min-width:0;border:0;padding:0;
    text-align:left!important;overflow-wrap:anywhere}
  .t-rola table.t-cartao td.t-cartao-larga{grid-column:1 / -1}
  .t-rola table.t-cartao td.t-cartao-cab{order:-1;padding-right:3rem}
  .t-rola table.t-cartao td[data-rot]::before{content:attr(data-rot);display:block;font-size:.6875rem;font-weight:700;
    letter-spacing:.06em;text-transform:uppercase;color:var(--t-tinta-2)}
  .t-rola table.t-cartao td.t-cartao-marca{position:absolute;top:.125rem;right:.125rem;padding:0}
  .t-rola table.t-cartao td:empty, .t-rola table.t-cartao td.t-cartao-vazio{display:none}   /* célula sem nada a dizer («—») não ocupa o cartão */
  .t-rola table.t-cartao tr.riscada{opacity:.55}
}
/* ==== fim V-1507 ==== */