/* ==========================================================================
   INDU INTELLIGENCE — fundação visual · direção 7 "Clean" (dono, 06/10/2026)
   Uma folha bem organizada, não um painel. A hierarquia é feita só por
   espaço, peso tipográfico e UMA sombra curta: zero vidro, zero degradê, zero
   borda decorativa. Linha de 1px só onde separa dado. Coral num lugar só por
   tela — o alarme, o número que decide o dia. A ação principal é tinta. O aço
   é do dado medido. A senoide do logotipo é a assinatura: fio de estágio,
   divisor de seção, carregamento, item aceso do menu.
   Spec: docs/superpowers/specs/2026-10-06-redesign-clean-design.md

   Claro é o padrão, e não por gosto. O tablet do galpão é lido sob luz forte,
   e placa, etiqueta e papel de ordem são claros. Escuro existe para quem
   escolhe — e só por escolha: a preferência do sistema operacional não manda
   aqui.
   ========================================================================== */

:root{
  color-scheme:light;

  /* --- superfícies --------------------------------------------------------
     A folha (#FAFBFC) e o papel branco em cima dela. O painel2 é o campo
     cheio, o filtro aceso e o botão secundário; o painel3, o encaixe fundo
     (inicial de pessoa, tecla). Nenhuma moldura cinza em volta de nada. */
  --fundo:#FAFBFC; --painel:#FFFFFF; --painel2:#F3F5F7; --painel3:#ECEFF2;
  /* Linha de 1px só entre dados: placa, ensaio, quem faz, régua de
     indicadores, linha de tabela. Nunca em volta de bloco. */
  --linha:#E6EAEE; --linha-fraca:#EEF1F4;
  /* Contorno funcional — o do campo sob o ponteiro, o do urgente, o do alvo
     do arrasto. Não é borda de enfeite: só aparece quando diz alguma coisa. */
  --borda-viva:rgba(14,22,32,.22);
  /* --- a sombra: UMA, curta, de contato ------------------------------------
     O card branco sobre a folha se separa por ela e por nada mais. A
     `--sombra-alta` é a mesma sombra com um anel de 1px — o menu suspenso e a
     paleta flutuam sobre papel branco, e sem o anel sumiriam nele. A
     `--sombra-flutua` é a exceção declarada: o card no ar, durante o arrasto. */
  --sombra:0 1px 3px rgba(14,22,32,.09);
  --sombra-alta:0 1px 3px rgba(14,22,32,.09),0 0 0 1px rgba(14,22,32,.06);
  --sombra-flutua:0 24px 48px -16px rgba(14,22,32,.3),0 1px 3px rgba(14,22,32,.09);

  /* --- tinta: os quatro pesos passam em AA sobre a folha e sobre o painel2 --
     tinta 17,6:1 · tinta2 9,3:1 · tinta3 5,9:1 · tinta4 5,3:1. */
  --tinta:#0E1620; --tinta2:#34465A; --tinta3:#52647A; --tinta4:#5A6B7F;
  /* A tinta que vai EM CIMA de um preenchimento (botão em tinta, estado
     cheio). Branca no claro, quase preta no escuro: a mesma decisão. */
  --tinta-acao:#FFFFFF;
  /* O véu atrás de gaveta, modal e paleta: leve — a página continua lida. */
  --veu:rgba(14,22,32,.24);
  /* O foco de teclado é tinta: coral é do alarme, e aço é do dado. */
  --foco:var(--tinta);

  /* --- marca e alarme -------------------------------------------------------
     O coral tem UM lugar por tela: o alarme — o número que decide o dia
     ("185 fora do prazo"). Não é botão, não é link, não é logotipo.
     --indu       o coral da marca, preenchimento (branco em cima: 4,6:1)
     --indu-forte a tinta do coral, para texto pequeno (5,6:1 sobre a folha)
     --indu-fraco superfície de realce. Nunca é texto.
     --alarme     o papel: o número grande que decide o dia. Hoje é o coral. */
  --indu:#D2431F; --indu-forte:#B8371A; --indu-fraco:#FBEDE8;
  --alarme:var(--indu); --alarme-texto:var(--indu-forte);
  /* --- a marca: salmão e o marrom dela (dono, 06/10/2026) -------------------
     Marca é identidade; alarme é urgência. Os dois são quentes e por isso têm
     pesos opostos: a marca mora em TRAÇO FINO — a senoide do logotipo, o
     divisor de seção, o traço de 24px antes do título, o fio de estágio
     andando, a senoide do item aceso do menu —; o alarme mora em NÚMERO e
     TEXTO (`.ind.alarme`, `.perigo`), uma vez por tela. A marca nunca pinta
     número, texto nem botão.
     --marca        o salmão do logotipo (3,1:1 sobre a folha: é traço, não texto)
     --marca-escura o marrom puxado ao salmão (8,2:1) — divisor e fio de estágio,
                    que carregam informação e precisam dos 3:1 de um gráfico
     --marca-ambar  o âmbar quente do brilho que percorre o fio do logotipo */
  --marca:#E8685D; --marca-escura:#7A3A2A; --marca-ambar:#E8A33D;
  /* --- o fio salmão (dono, 07/10/2026: "traços finos na cor salmão, para
     não ficar tudo clean") ------------------------------------------------
     Um SISTEMA de fios de 1 px (2 no máximo), não enfeite espalhado. Dois
     pesos, e a diferença entre eles é o significado:
     --marca-fio        o salmão a 65 % sobre o papel (2,1:1): o fio de
                        REPOUSO, estrutural e fixo — sob a barra do topo,
                        sob o cabeçalho de tabela e de coluna. Ornamento:
                        nunca é o único sinal de nada.
     --marca-fio-forte  o salmão pleno (3,1:1, o piso de um gráfico): o fio
                        que CARREGA informação — aba ativa, campo em foco,
                        destino aceso do menu, traço do título, card sob o
                        ponteiro — e por isso sempre vem com um segundo
                        sinal (peso 600, fundo, anel de tinta).
     O fio nunca é coral (--alarme) e nunca pinta número, texto ou botão. */
  --marca-fio:#F09D96; --marca-fio-forte:var(--marca);
  /* A senoide do logotipo impresso é a marca — nome antigo, mesma cor. */
  --senoide:var(--marca);
  /* --- azul: a cor de apoio (dono, 07/10/2026: "está muito clean, precisa
     em algumas partes de tons de cores como azul") ---------------------------
     Três papéis, e nenhum deles é alarme, marca ou ação principal:
     --azul        o marinho da marca (o do relatório técnico impresso),
                   HIERARQUIA: título de bloco, aba acesa, número que não é
                   alarme, etiqueta neutra. 15,6:1 no papel · 15,1:1 na folha.
     --azul-acao   o azul do DADO e do ESTADO: série de gráfico (sparkline,
                   curva de isolação, barra), "em andamento" (ponto, palavra,
                   fio de estágio andando), leitura medida. 6,7:1 no papel ·
                   6,5:1 na folha · 5,9:1 sobre o --azul-fundo.
     --azul-fundo  a tinta suave do chip TÉCNICO (`.t-tecnico`: kV, polos,
                   ensaio). Nunca é texto; o fundo azul é exclusivo de dado
                   técnico — a tinta azul é hierarquia (ux-lead, 07/10/2026).
     O aço e o info deixaram de ser um segundo azul: viraram apelidos do
     --azul-acao, para não haver dois azuis concorrendo na mesma tela. */
  --azul:#0E2440; --azul-acao:#255E96; --azul-fundo:#EAF1F8;
  /* --- ação com cor (dono, 22/10/2026: "os botões têm que ter cores, algo
     premium, intuitivo de visualizar") -------------------------------------
     Três roupas de ação, cada uma com um significado fixo em toda a plataforma:
     --acao     marinho: o botão que GRAVA, MANDA, RECEBE — a ação principal.
                É o mesmo marinho da hierarquia (título de bloco, aba acesa):
                a ação é o topo da hierarquia. 15:1 com branco.
     --acao-ok  verde: a ação que FECHA — concluir, aprovar, liberar, aceitar.
                `.ok` no botão. 5,1:1 com branco.
     .perigo    coral (--alarme): recusar, excluir, perder. Já existia.
     .leve      neutro, sem cor: a secundária. Já existia.
     A tinta preta deixa de ser botão: preta é texto. Hover é um degrau mais
     claro da mesma cor, nunca outra cor. */
  --acao:var(--azul); --acao-hover:#1A3A63;
  --acao-ok:var(--ok); --acao-ok-hover:#0C6642;
  /* --- aço: só no dado medido -------------------------------------------
     Valor de placa, leitura de ensaio, curva de isolação. Nunca enfeite.
     Desde 07/10/2026 é o próprio --azul-acao (mesmo papel: dado). */
  --aco:var(--azul-acao); --aco-texto:var(--azul-acao); --aco-fraco:var(--azul-fundo);

  /* --- semântica operacional (docs/CONSTITUICAO.md §3) -------------------
     O significado é lei. Na Clean o estado vive na PALAVRA e na tinta dela —
     o -fraco virou exceção (aviso de página), não roupa de etiqueta. */
  --critico:#B62E1B;  --critico-fraco:#FCEBE7;
  --atencao:#8F5A00;  --atencao-fraco:#FBF2DE;
  --ok:#0F7A50;       --ok-fraco:#E3F2EC;
  --bloqueio:#59409A; --bloqueio-fraco:#EFEBF9;
  --info:var(--azul-acao); --info-fraco:var(--azul-fundo);
  --neutro:#52647A;   --neutro-fraco:#EEF1F4;

  /* --- tipo ---------------------------------------------------------------
     Placa & Prancha (dono, 02/11/2026): Archivo, a grotesca de oficina com eixo
     de largura, no título e na interface; Martian Mono só no que é medido ou é
     código (OS, Ω, MΩ, R$). */
  --fonte-titulo:"Archivo","Archivo Reserva",-apple-system,"Segoe UI",sans-serif;
  --fonte-ui:"Archivo","Archivo Reserva",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --fonte-mono:"Martian Mono",ui-monospace,Menlo,monospace;
  /* 12 · 13 · 15 · 18 · 22 · 28 · 34 · 44. Oito degraus, piso em 12px. */
  /* Escala subida em 22/10/2026 (dono: "tem muita letrinha pequena"): a base
     da escala sobe um degrau — micro 12→13, nota 13→14, corpo 15→16, forte
     18→19, seção 22→23. O topo (28 · 34 · 44) fica. No toque, nota e corpo
     sobem mais um (15 · 17): tablet em pé na bancada, a 50–80 cm. */
  --letra-micro:13px;   /* rótulo de grade, seção do menu, eixo de gráfico */
  --letra-nota:14px;    /* meta, nota, legenda, segunda linha do card */
  --letra-corpo:16px;   /* corpo, tabela, menu, botão, campo, chip */
  --letra-forte:19px;   /* título de bloco */
  --letra-secao:23px;   /* título de seção; h1 no celular */
  --letra-tela:28px;    /* indicador no celular */
  --letra-numero:34px;  /* h1 da tela, indicador, contador de coluna */
  --letra-placar:44px;  /* o número que se lê de longe; h1 do quadro */

  /* --- espaço: grade de 8 (com o 4 e o 12 de meio degrau) ----------------- */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px; --e7:48px;
  /* O topo que é do relógio e da bateria no iPhone com o app na tela inicial
     (`viewport-fit=cover`). Zero no computador e no Safari comum. */
  --topo-seguro:env(safe-area-inset-top,0px); --barra-alt:64px;

  /* --- raio: 6 marcador · 10 botão e campo · 14 card · 16 modal ----------- */
  --r1:6px; --r2:10px; --r3:14px; --r4:16px;

  /* --- alvo de toque: 44px em todo aparelho; 56px na fila do tablet ------- */
  --toque:44px; --toque-luva:56px;

  /* --- movimento: uma curva só, três tempos --------------------------------
     120ms estado no lugar (hover, foco, cor) · 200ms algo aparece ou se eleva
     (card, item da fila, contador) · 320ms superfície inteira (gaveta, véu,
     curva de ensaio). Sem mola. `prefers-reduced-motion` zera tudo. */
  --curva:cubic-bezier(.2,.7,.2,1);
  /* A segunda curva (22/10/2026): só para SUPERFÍCIE que desliga da borda —
     gaveta, trilho no toque, folha inferior. Saída forte, chegada lenta, sem
     mola (a curva de gaveta do iOS). Botão, card, popover e recado seguem na
     --curva. Nunca `ease`, `ease-in`, nem segundos soltos. */
  --curva-superficie:cubic-bezier(.32,.72,0,1);
  --t1:120ms; --t2:200ms; --t3:320ms;

  /* --- o trilho: marinho, a marca no alto (Placa & Prancha, 02/11/2026) -----
     O menu é a moldura escura da prancha: o marinho do relatório impresso,
     o INDU em branco e a senoide em salmão. Rótulo 8,4:1, seção 5,2:1. */
  --trilho:#0F1E30;
  --trilho2:#16283D;          /* o item sob o ponteiro */
  --trilho-linha:#22374F;
  --trilho-tinta:#A7B7C8;     /* rótulo em repouso */
  --trilho-tinta2:#8094A9;    /* seção, rodapé */
  --trilho-aceso:#F4F6F8;     /* o item aceso */
  --trilho-aceso-fundo:#16283D;
  --trilho-marca:#F4F6F8;     /* o logotipo */
  /* MASCOTE Christian Simon (06/11/2026): cores de ilustração, só para as peças do SVG. */
  --cs-pele:#DCA27E; --cs-pele-sombra:#C4865F; --cs-labio:#B8746A;
  --cs-cabelo:#29221F; --cs-grisalho:#A29D98; --cs-dente:#FFFFFF;
  --cs-carcaca:#155487; --cs-carcaca-escura:#0F3F66; --cs-carcaca-clara:#1C66A3;
  --cs-janela:#0A2E4C; --cs-eletroduto:#4A5866; --cs-ventoinha:#7FB6E6;
}

/* A reserva das fontes (densidade no Windows, 07/10/2026). Se o Google Fonts
   não chega ou demora (rede da fábrica, proxy, primeira visita), a página
   desenha com a fonte do sistema e troca depois (`display=swap`). Sem ajuste,
   no Windows essa troca era Segoe UI → Plex: outra largura, outra altura de
   linha, o card pulava de tamanho na frente da pessoa. Estas duas faces são o
   Arial (que existe no Windows e no Mac) com a MÉTRICA da Plex e da Albert:
   largura média do texto em português e ascendente/descendente medidos nos
   arquivos da própria fonte (fontTools, 07/10/2026). Com elas, o texto ocupa
   o mesmo espaço antes e depois de a fonte chegar. */
@font-face{font-family:"Archivo Reserva";font-weight:300 500;
  src:local("Arial"),local("ArialMT"),local("Liberation Sans");
  size-adjust:98.6%;ascent-override:89.1%;descent-override:21.3%;line-gap-override:0%}
@font-face{font-family:"Archivo Reserva";font-weight:600 800;
  src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold");
  size-adjust:98.6%;ascent-override:89.1%;descent-override:21.3%;line-gap-override:0%}

/* O escuro só existe quando alguém pede. Não há `prefers-color-scheme` nesta
   folha de propósito: o padrão do produto é claro. Na fase 1 do Clean o escuro
   só precisa não quebrar: os tokens novos ganham equivalentes aqui. */
:root[data-tema="escuro"]{
  color-scheme:dark;
  --fundo:#0B0F11; --painel:#151A1D; --painel2:#1C2327; --painel3:#242D32;
  --linha:#2C363B; --linha-fraca:#222B30;
  --borda-viva:rgba(234,239,241,.28);
  --sombra:0 1px 3px rgba(0,0,0,.5);
  --sombra-alta:0 1px 3px rgba(0,0,0,.5),0 0 0 1px rgba(234,239,241,.08);
  --sombra-flutua:0 24px 48px -16px rgba(0,0,0,.8),0 1px 3px rgba(0,0,0,.5);
  --tinta:#EAEFF1; --tinta2:#BAC7CD; --tinta3:#93A2AA; --tinta4:#88969E;
  /* Aqui os estados clareiam, porque precisam se ler sobre preto. Logo, a tinta
     que vai em cima deles escurece — é a mesma decisão, do outro lado. */
  --tinta-acao:#16100E;
  --veu:rgba(0,0,0,.6);
  --indu:#F2705A; --indu-forte:#FF8B76; --indu-fraco:#2E1813;
  /* O marrom da marca some sobre o painel escuro (2,3:1): aqui a "escura" é o
     salmão suave (5,2:1), e a marca clareia como os estados. */
  --marca:#F08A7E; --marca-escura:#B77466; --marca-ambar:#F0B766;
  /* O fio de repouso no escuro: o salmão claro a ~48 % sobre o papel escuro
     (2,7:1) — paridade visual com o claro; a 68 % virava parede salmão. */
  --marca-fio:#83524E;
  /* O azul no escuro clareia como os estados, e o marinho vira um azul de
     gelo (10,7:1 no painel): marinho sobre preto não se lê. */
  --azul:#B4CDE8; --azul-acao:#7FB6E6; --azul-fundo:#14263A;
  --acao:var(--azul); --acao-hover:#C9DCF0; --acao-ok:var(--ok); --acao-ok-hover:#62CDB0;
  --aco:var(--azul-acao); --aco-texto:var(--azul-acao); --aco-fraco:var(--azul-fundo);
  --critico:#F0705E;  --critico-fraco:#301613;
  --atencao:#E0AC4B;  --atencao-fraco:#2C2411;
  --ok:#4FBFA0;       --ok-fraco:#102821;
  --bloqueio:#B39BE0; --bloqueio-fraco:#201931;
  --info:var(--azul-acao); --info-fraco:var(--azul-fundo);
  --neutro:#8C9BA3;   --neutro-fraco:#1E262A;
  --trilho:#060809; --trilho2:#12181C; --trilho-linha:#1E262B;
  --trilho-tinta:#9AA8B0; --trilho-tinta2:#76848E; --trilho-aceso:#EAEFF1;
  --trilho-aceso-fundo:#12181C; --trilho-marca:#EAEFF1;
  --cs-pele:#DCA27E; --cs-pele-sombra:#C4865F; --cs-labio:#B8746A;
  --cs-cabelo:#29221F; --cs-grisalho:#B3AEA9; --cs-dente:#FFFFFF;
  --cs-carcaca:#1C66A3; --cs-carcaca-escura:#155487; --cs-carcaca-clara:#2A7BC0;
  --cs-janela:#0A2E4C; --cs-eletroduto:#6B7A88; --cs-ventoinha:#9CC8EE;
}

*{box-sizing:border-box}
html,body{height:100%}
/* Placa & Prancha (dono, 02/11/2026: "algo mais fininho, elegante"): a Archivo
   é variável, e o corpo fica em 380 — um pouco mais leve que o regular, sem
   perder leitura no tablet. Sem a fonte, a reserva arredonda para 400. */
body{margin:0;background:var(--fundo);color:var(--tinta);
  font-family:var(--fonte-ui);font-weight:380;
  font-size:var(--letra-corpo);line-height:1.55;-webkit-font-smoothing:antialiased;
  text-size-adjust:100%;-webkit-text-size-adjust:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
.mono,.num{font-family:var(--fonte-mono);
  font-variant-numeric:tabular-nums;font-feature-settings:"zero" 1}
/* Texto sem grito (dono, 02/11/2026: "muita letra com sublinhado e negrito,
   que se vê que é parte de IA"). O negrito no meio da frase cai para o peso
   médio e o sublinhado do link vira um fio de 1 px na cor da linha, que
   escurece sob o ponteiro. Zero especificidade (`:where`): todo componente
   que já decide o próprio peso ou o próprio link continua decidindo. */
:where(b,strong){font-weight:500}
:where(a){text-decoration-thickness:1px;text-underline-offset:.24em}
:where(p,li,small,td,dd,label) :where(a){text-decoration-color:var(--linha)}
:where(p,li,small,td,dd,label) :where(a):hover{text-decoration-color:currentColor}

/* As superfícies que o navegador desenha e que nenhum projeto lembra de vestir.
   Seleção, cursor, barra de rolagem e caixa de marcar saem de fábrica em azul
   de sistema — o único azul que esta paleta não reservou para característica
   técnica da máquina. */
/* Clean: a seleção, o cursor e a caixa de marcar são tinta — o coral é do
   alarme e não se gasta em superfície do navegador. */
::selection{background:var(--tinta);color:var(--painel)}
input,textarea{caret-color:var(--tinta)}
input[type=checkbox],input[type=radio],progress{accent-color:var(--tinta)}
*{scrollbar-color:var(--linha) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--linha);border-radius:99px;
  border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--tinta4);background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* Movimento é exceção nesta ferramenta, e quem pediu para não ver nenhum não vê
   nenhum — uma regra só, no topo, em vez de um `@media` por componente. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;
    animation-iteration-count:1 !important;transition-duration:.01ms !important;
    scroll-behavior:auto !important}
}

/* ---------- estrutura ---------- */
/* 232px: o rótulo mais longo ("Administração") ao lado de um ícone de 22px,
   com a folga da escala dos dois lados. Era 216 sem ícone. */
.app{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.trilho{background:var(--trilho);border-right:0;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;height:100dvh}
/* A marca é o logotipo oficial (templates/_logotipo.html), com as cores vindas
   dos tokens: segue o tema claro/escuro sem precisar de duas imagens. */
/* 12px em cima e embaixo: o trilho do administrador com um destino aberto tem
   nove destinos e até dez itens, e cada 4px aqui é um item a menos na tela. */
.marca{display:flex;align-items:center;padding:var(--e2) var(--e4);flex:none}
/* O fio só existe dentro do trilho, onde ele separa marca de navegação.
   `.marca` também veste o logotipo da tela de entrar, e lá o fio virava um
   risco atravessando o cartão de acesso, entre o nome e a assinatura. */
.trilho .marca{padding:var(--e5) var(--e5) var(--e2)}
.logo-indu{display:block;width:100%;max-width:160px;height:auto}
.logo-tinta{fill:var(--tinta)}
.logo-apoio{fill:var(--tinta3)}
.logo-senoide{stroke:var(--marca)}
/* A Ranhura — as nove barras de vibração cruzadas pela senoide — nasce a 42%
   de opacidade no arquivo da marca, que é o certo sobre papel branco. Sobre a
   Tinta 900 do trilho, 42% some. Sobe para 64% e as nove barras voltam a ser
   lidas como as nove barras, que é o gesto que se reconhece de longe.
   O atributo `opacity` do SVG é atributo de apresentação e perde para
   qualquer regra de folha — por isso o arquivo da marca continua intacto. */
.logo-ranhura{opacity:.42}
.trilho .logo-tinta{fill:var(--trilho-marca)}
.trilho .logo-apoio{fill:var(--trilho-tinta2)}
.trilho .logo-ranhura{opacity:.64}
/* "Intelligence" sob o INDU (dono, 02/11/2026): o apoio do arquivo oficial
   ("Engineering Intelligence") sai no trilho, e o nome fica em caixa alta
   espaçada, na tinta de seção do trilho. */
.trilho .marca{flex-direction:column;align-items:flex-start;gap:var(--e1)}
.trilho .logo-apoio{display:none}
.trilho .logo-indu{max-width:150px;margin-bottom:calc(-1 * var(--e4))}
.marca-apoio{font-size:var(--letra-micro);font-weight:500;letter-spacing:.34em;text-transform:uppercase;
  color:var(--trilho-tinta2);padding-left:2px}
/* A senoide do logotipo é salmão em toda superfície (dono, 06/10/2026, ao ver
   o Clean em produção): marca é traço fino e não disputa com o alarme, que é
   número. O gesto — desenhar ao carregar, brilho quente no hover e enquanto a
   página carrega — mora em templates/_marca_viva.html. */
.trilho .logo-senoide{stroke:var(--marca)}
/* O menu rola por dentro. O trilho tem a altura exata da tela e fica parado;
   sem esta rolagem, quem tem muitos módulos não alcançava o fim da lista
   (Comercial, Suprimentos) em nenhuma tela de computador. */
.trilho nav{display:flex;flex-direction:column;gap:0;padding:var(--e2) var(--e4) 0;flex:1;
  min-height:0;overflow-y:auto;overscroll-behavior:contain}
/* 44px por item de menu, e no computador também. Quem distribui serviço de
   manhã sentado é a mesma pessoa que abre o menu de luva à tarde; item de
   altura diferente por aparelho é a pessoa reaprendendo a mesma lista. */
.trilho nav a{display:flex;align-items:center;min-height:var(--toque);
  padding:var(--e2) var(--e3);border-radius:var(--r2);
  color:var(--trilho-tinta);font-size:var(--letra-corpo);font-weight:400;position:relative;
  transition:color var(--t1) var(--curva),background var(--t1) var(--curva)}
.trilho nav a:hover{background:var(--trilho2);color:var(--trilho-marca)}
/* Onde estou: três sinais, porque cor sozinha não é sinal. Superfície coral
   escura, tinta coral e peso. O item aceso se acha antes de ser lido. */
.trilho nav a.ativo{background:var(--trilho-aceso-fundo);color:var(--trilho-aceso);
  font-weight:600}
/* O fio salmão no destino aceso: 2 × 20 px à esquerda, DENTRO do item (16 px
   da borda da janela — a senoide colada na borda é que parecia defeito).
   Terceiro sinal, ao lado da tinta e do peso; os itens do destino continuam
   com a senoide marrom no recuo. */
.trilho nav a.trilho-destino.ativo::before{content:"";position:absolute;left:0;top:50%;
  width:2px;height:20px;transform:translateY(-50%);border-radius:1px;
  background:var(--marca-fio-forte)}
/* A assinatura: a página exata ganha um período da senoide à esquerda, no
   marrom da marca (`--marca-escura`), no recuo dos itens. É máscara sobre a
   cor da marca: segue o tema pelo token. O destino (com ícone) fica só com tinta e peso — a senoide
   colada na borda da janela parecia defeito, não assinatura. */
.trilho-itens a::before{content:"";position:absolute;left:calc(-1 * var(--e5));top:50%;
  width:14px;height:8px;background:var(--marca);opacity:0;
  transform:translate(-4px,-50%);pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12'%3E%3Cpath d='M1 6Q7 0 13 6T25 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12'%3E%3Cpath d='M1 6Q7 0 13 6T25 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:opacity var(--t1) var(--curva),transform var(--t1) var(--curva)}
.trilho-itens a[aria-current="page"]::before{opacity:1;transform:translate(0,-50%)}
.trilho nav a .bolha{margin-left:auto;background:var(--indu);color:var(--tinta-acao);
  font-size:var(--letra-micro);font-weight:700;border-radius:99px;padding:2px 8px;
  min-width:22px;text-align:center;line-height:1.4}
.trilho nav .secao{font-size:var(--letra-micro);text-transform:none;
  letter-spacing:.1em;color:var(--trilho-tinta2);font-weight:600;
  padding:var(--e5) var(--e3) var(--e1)}
/* ---------- ícones ----------
   Um conjunto só, desenhado com um traço (templates/_icones.html), incluído
   uma vez no body e usado por <use>. Herdam a cor de onde estão: no trilho a
   tinta do item, na barra a do botão. O tamanho é da folha, não do símbolo. */
svg.ic{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;overflow:visible}
/* O menu por destinos: o ícone e o rótulo são um alvo só; o destino aceso
   abre os itens dele logo abaixo, recuados até a coluna do texto. */
.trilho nav a.trilho-destino{gap:var(--e3)}
.trilho nav svg.ic{width:20px;height:20px;opacity:.85;color:var(--trilho-tinta2)}
.trilho nav a.ativo svg.ic{color:currentColor}
.trilho nav a.ativo svg.ic,.trilho nav a:hover svg.ic{opacity:1}
.trilho-itens{display:flex;flex-direction:column;gap:0;margin:0;
  padding-left:calc(22px + var(--e3))}
.trilho-itens a{font-weight:400;color:var(--trilho-tinta)}
.trilho-itens a.ativo{font-weight:600;color:var(--trilho-aceso)}
/* A barra de rolagem do menu também mora no escuro: a cinza-clara da folha
   virava um risco branco no meio da coluna. */
.trilho nav{scrollbar-color:var(--trilho-linha) transparent}
.trilho nav::-webkit-scrollbar-thumb{background:var(--trilho-linha)}
.trilho nav::-webkit-scrollbar-thumb:hover{background:var(--trilho-tinta2)}

.conteudo{min-width:0;display:flex;flex-direction:column}
.barra{position:sticky;top:0;z-index:20;background:var(--fundo);
  border-bottom:0;display:flex;align-items:center;gap:var(--e3);
  padding:var(--topo-seguro) var(--e5) 0;height:calc(var(--barra-alt) + var(--topo-seguro))}
/* O fio salmão (dono, 07/10/2026): um filete de 1 px sob a barra do topo, em
   toda tela — a assinatura mais barata e mais constante da ferramenta. Só no
   `header` da página: `.barra` solto também veste a barrinha do gargalo. */
header.barra{border-bottom:1px solid var(--marca-fio)}
/* `min-width:0` e o corte do texto não são enfeite: sem eles, a busca se recusa
   a encolher abaixo do próprio texto, e no tablet os indicadores de aviso
   empurrariam o nome do usuário para fora da barra — ou a frase quebraria em
   duas linhas e a barra inteira cresceria. Encolher e cortar é o certo: quem
   quer buscar clica, e o ⌕ continua visível. */
.busca-global{flex:1;min-width:0;max-width:440px;display:flex;align-items:center;
  gap:var(--e2);min-height:var(--toque);
  background:var(--painel2);border:1px solid var(--linha);border-radius:var(--r2);overflow:hidden;
  padding:0 var(--e3);color:var(--tinta3);font-size:var(--letra-corpo);cursor:pointer;
  transition:transform var(--t1) var(--curva),box-shadow var(--t1) var(--curva),
    border-color var(--t1) var(--curva),color var(--t1) var(--curva)}
.busca-global span:nth-child(2){min-width:0;overflow:hidden;white-space:nowrap;
  text-overflow:ellipsis}
.busca-global svg.ic{width:18px;height:18px;color:var(--tinta3)}
.busca-global:hover{color:var(--tinta2);border-color:var(--borda-viva);
  transform:translateY(-1px);box-shadow:var(--sombra)}
.busca-global kbd{margin-left:auto;font-family:var(--fonte-mono);
  font-size:var(--letra-micro);color:var(--tinta3);
  background:var(--painel);border:0;box-shadow:var(--sombra);border-radius:var(--r1);
  padding:2px 8px}
.quem{margin-left:auto;display:flex;align-items:center;gap:var(--e3);
  font-size:var(--letra-nota);color:var(--tinta3);white-space:nowrap}
.quem b{color:var(--tinta);font-weight:600}
/* O respiro da página é o que separa a leitura do amontoado. 32px no computador,
   16px no celular: a mesma folha de papel, margem proporcional à mesa. */
main{padding:var(--e6);flex:1;min-width:0}

/* No tablet o trilho vira gaveta. A barra horizontal deixava dezoito itens fora
   da tela sem rolagem visível — metade do sistema inalcançável de tablet. */
.botao-menu{display:none;width:var(--toque);height:var(--toque);padding:0;
  border-radius:var(--r2);background:transparent;border:0;
  color:var(--tinta2);font-size:18px;cursor:pointer;flex:none}
.botao-menu:hover{background:var(--painel2);color:var(--tinta)}
/* O atributo `hidden` vale mais que qualquer `display` de autor.
   Sem esta linha, a sombra do menu — que ganha `display:block` na media query de
   tablet — cobria a tela inteira com um retângulo invisível de z-index 60, e o
   mecânico não conseguia clicar em nada. O bug só aparecia em tela pequena, que
   é justamente onde ninguém do escritório testa. */
[hidden]{display:none !important}

.sombra-menu{display:none}
/* Os itens do destino atual, em faixa, só no toque — no computador o trilho
   já os mostra. Mesmo conteúdo, duas formas, escolhidas aqui e nunca pelo JS. */
.faixa-destino{display:none}
/* A barra inferior do toque: um toque para cada destino do dia, "Menu" para o
   resto. Só existe abaixo de 900px. */
.barra-toque{display:none}
/* A sigla só aparece no celular, onde o nome inteiro não cabe ao lado da busca;
   os itens `.quem-so-estreito` (ajuda e tema) idem. */
.quem-sigla{display:none}
.menu .lista .quem-so-estreito{display:none}
/* O logotipo da barra existe só no toque (ver o `@media` de 900px). */
.barra-marca{display:none}

/* A casca de celular — menu que desliza, faixa de atalhos, barra de baixo com
   a engrenagem — só em celular e tablet (dono, 30/09/2026): no computador
   nunca, nem com a janela estreita. Quem marca o aparelho é o servidor
   (User-Agent) e o script do <head> (iPad que se diz Mac), em
   `data-aparelho="toque"` no <html>. Antes era `@media(max-width:900px)`. */
  html[data-aparelho="toque"] .app{grid-template-columns:1fr}
  html[data-aparelho="toque"] .botao-menu{display:grid;place-items:center}
  html[data-aparelho="toque"] .trilho{position:fixed;left:0;top:0;bottom:0;width:min(280px,84vw);z-index:70;
    padding-top:var(--topo-seguro);
    transform:translateX(-102%);transition:transform var(--t3) var(--curva-superficie);
    overflow-y:auto;border-right:0;box-shadow:var(--sombra-alta)}
  html[data-aparelho="toque"] body[data-menu="aberto"] .trilho{transform:translateX(0)}
  html[data-aparelho="toque"] .sombra-menu{display:block;position:fixed;inset:0;z-index:60;
    background:var(--veu);animation:mov-veu var(--t2) var(--curva) backwards}
  html[data-aparelho="toque"] main{padding:var(--e4) var(--e4) calc(64px + var(--e6) + env(safe-area-inset-bottom))}
  html[data-aparelho="toque"] .faixa-destino{display:flex;gap:var(--e2);overflow-x:auto;scrollbar-width:none;
    padding:var(--e2) var(--e4);background:var(--fundo);border-bottom:0;
    position:sticky;top:calc(var(--barra-alt) + var(--topo-seguro));z-index:19}
  html[data-aparelho="toque"] .faixa-destino::-webkit-scrollbar{display:none}
  html[data-aparelho="toque"] .faixa-destino a{flex:none;display:inline-flex;align-items:center;gap:var(--e1);
    min-height:var(--toque);padding:0 var(--e4);border-radius:var(--r2);
    border:0;color:var(--tinta3);font-size:var(--letra-corpo);
    font-weight:400;white-space:nowrap}
  html[data-aparelho="toque"] .faixa-destino a.ativo{background:var(--painel2);
    color:var(--tinta);font-weight:600}
  html[data-aparelho="toque"] .faixa-destino .bolha{background:var(--indu);color:var(--tinta-acao);
    font-size:var(--letra-micro);border-radius:99px;padding:0 var(--e2);line-height:1.6}
  html[data-aparelho="toque"] .barra-toque{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--painel);
    border-top:0;box-shadow:var(--sombra-alta);padding-bottom:env(safe-area-inset-bottom)}
  html[data-aparelho="toque"] .barra-toque a,html[data-aparelho="toque"] .barra-toque button{position:relative;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:2px;min-height:64px;padding:var(--e2) var(--e1);
    background:transparent;border:0;border-radius:0;color:var(--tinta3);
    font-size:var(--letra-micro);font-weight:500;text-transform:none;
    letter-spacing:0;line-height:1;cursor:pointer;min-width:0}
  html[data-aparelho="toque"] .barra-toque a span,html[data-aparelho="toque"] .barra-toque button span{max-width:100%;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  html[data-aparelho="toque"] .barra-toque svg.ic{width:24px;height:24px}
  html[data-aparelho="toque"] .barra-toque a:hover,html[data-aparelho="toque"] .barra-toque button:hover{background:var(--painel2);color:var(--tinta)}
  /* Três sinais no destino aceso: tinta, peso e o fio de 2px em cima — em
     tinta, não coral (Clean: o coral da tela é o alarme). */
  html[data-aparelho="toque"] .barra-toque a.ativo{color:var(--tinta);font-weight:600}
  html[data-aparelho="toque"] .barra-toque a.ativo::before{content:"";position:absolute;left:var(--e3);right:var(--e3);
    top:0;height:2px;background:var(--tinta)}
  /* O logotipo oficial, recortado à palavra e à Ranhura: o "Engineering
     Intelligence" em 4 px seria mancha, não texto. */
  html[data-aparelho="toque"] .barra-marca{display:block;flex:none;width:104px;height:18px;overflow:hidden}
  /* Com a marca na barra, a busca era a primeira a ceder e chegava a 26 px:
     nunca menos que um alvo de toque. */
  html[data-aparelho="toque"] .busca-global{min-width:var(--toque)}
  html[data-aparelho="toque"] .barra-marca .logo-indu{width:104px;max-width:none;margin-top:-4px}
  html[data-aparelho="toque"] .barra-marca .logo-apoio{display:none}
  html[data-aparelho="toque"] .barra-marca .logo-senoide{stroke:var(--marca)}
  html[data-aparelho="toque"] .barra-toque .bolha{position:absolute;top:var(--e1);left:calc(50% + var(--e1));
    background:var(--indu);color:var(--tinta-acao);font-size:var(--letra-micro);
    border-radius:99px;padding:0 var(--e1);line-height:18px;min-width:18px;text-align:center}

@media (prefers-reduced-motion:reduce){.trilho{transition:none}}

/* ---------- tipografia de página ----------
   Quatro papéis e um salto de verdade entre o título da tela e o resto:
   34 → 18 → 15 → 12. Quem chega sabe onde está antes de ler a primeira linha.

   O título era 28 e o degrau seguinte, 18, ficava perto demais: a tela abria
   com um título discreto seguido de três linhas de cinza, e nada mandava. 34 é
   um degrau que já existe na escala (`--letra-numero`) e é o que dá ao nome da
   tela o peso que ele sempre teve na conversa da oficina — quem chega no
   quadro fala "o quadro", não "a terceira caixa da esquerda".

   No celular volta para 22, que é o que DESIGN.md já reservava para o h1 de
   tela estreita: 34px numa largura de 360px come duas linhas e meia. */
.cabecalho{display:flex;justify-content:space-between;align-items:flex-start;
  gap:var(--e4) var(--e5);flex-wrap:wrap;margin-bottom:var(--e5)}
h1{font-family:var(--fonte-titulo);font-size:var(--letra-numero);font-weight:340;
  letter-spacing:-.02em;margin:0;line-height:1.1;text-wrap:balance}
@media(max-width:900px){h1{font-size:var(--letra-secao);letter-spacing:-.02em}}
h2{font-family:var(--fonte-titulo);font-size:var(--letra-forte);font-weight:600;
  margin:0 0 var(--e2);letter-spacing:-.01em;line-height:1.3}
h3{font-size:var(--letra-nota);font-weight:600;margin:0 0 var(--e2);
  text-transform:none;letter-spacing:0;color:var(--tinta2)}
/* Medida de leitura: 65 a 75 caracteres por linha. Cuidado com o `ch` — na Plex
   Sans ele é a largura do zero, ~0,6em, e o caractere médio de um texto em
   português mede ~0,5em. Um `max-width:72ch` entrega 86 caracteres por linha,
   não 72. Aferido no navegador, e não no nome da unidade. */
.sub{color:var(--tinta3);font-size:var(--letra-corpo);margin:var(--e1) 0 0;max-width:56ch}
p{margin:0 0 var(--e3);max-width:60ch}
/* `<small>` é relativo, e relativo composto fura qualquer escala: dentro de um
   rótulo de 12px o navegador entrega 10px, e "(o nome correto, o da Receita)"
   ficava menor que tudo que esta folha permite. O `max()` guarda o piso sem
   tirar a proporção de onde o pai é grande. */
small{font-size:max(var(--letra-micro),.85em)}

/* ---------- botões e campos ----------
   44px de altura em tudo que se toca. Um botão de 34px é confortável para o
   mouse e é onde o dedo de luva erra — e errar aqui é concluir a tarefa da
   máquina errada. */
/* 22/10/2026 (dono): a ação principal é MARINHO (--acao); a que fecha é VERDE
   (`.ok`, --acao-ok); coral (`.perigo`) recusa ou destrói; `.leve` é a
   secundária neutra; `.fantasma` só texto. Tinta preta não é mais botão. */
button,.botao{background:var(--acao);color:var(--tinta-acao);border:0;border-radius:var(--r2);
  min-height:var(--toque);padding:var(--e2) var(--e4);font-size:var(--letra-corpo);
  font-weight:500;cursor:pointer;display:inline-flex;align-items:center;
  gap:var(--e2);line-height:1.25;letter-spacing:-.005em;
  transition:background var(--t1) var(--curva),color var(--t1) var(--curva),
    transform var(--t1) var(--curva)}
button:hover,.botao:hover{background:var(--acao-hover)}
/* Pressionar é escala (22/10/2026): o botão cede sob o dedo e volta em --t1.
   Nunca desloca: `translateY` lia como salto. */
button:active,.botao:active{transform:scale(.97)}
button:disabled,.botao:disabled{opacity:.45;cursor:not-allowed;transform:none}
button:disabled:hover,.botao:disabled:hover{background:var(--acao)}
button.leve,.botao.leve{background:var(--painel2);color:var(--tinta);border:0}
button.leve:hover,.botao.leve:hover{background:var(--painel3);color:var(--tinta)}
button.leve:disabled:hover{background:var(--painel2)}
button.fantasma{background:transparent;color:var(--tinta3);padding:0 var(--e2)}
button.fantasma:hover{background:var(--painel2);color:var(--tinta)}
button.ok,.botao.ok{background:var(--acao-ok);color:var(--tinta-acao)}
button.ok:hover,.botao.ok:hover{background:var(--acao-ok-hover)}
button.ok:disabled:hover,.botao.ok:disabled:hover{background:var(--acao-ok)}
button.perigo,.botao.perigo{background:var(--alarme);color:var(--tinta-acao)}
button.perigo:hover,.botao.perigo:hover{background:var(--indu-forte)}
/* Foco visível de teclado: dois pixels de coral, afastados, sobre qualquer
   superfície. É o que permite operar o sistema inteiro sem tocar no mouse. */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible,
.card:focus-visible{outline:2px solid var(--foco);outline-offset:2px;border-radius:var(--r1)}
/* Campo de texto (dono, 07/11/2026): moderno e arredondado em toda tela. `input` sem `type`
   é texto para o navegador e ficava de fora (a caixa quadrada da recepção): agora entra. */
input:not([type]),input[type=text],input[type=email],input[type=password],input[type=number],
input[type=search],input[type=tel],input[type=url],input[type=date],input[type=time],
select,textarea{
  background:var(--painel2);border:1px solid var(--painel2);border-radius:var(--r3);
  min-height:var(--toque);padding:var(--e2) var(--e3);font-size:var(--letra-corpo);
  width:100%;transition:border-color var(--t1) var(--curva),background var(--t1) var(--curva)}
textarea{min-height:88px;line-height:1.55}
/* O select é campo como os outros (22/10/2026, finish-reviewer: "select nativo
   com chevron do sistema e borda cinza dentro de um papel Clean"): sem a
   aparência do sistema, chevron de traço 1,75 em tinta3 à direita, campo cheio. */
select{appearance:none;-webkit-appearance:none;padding-right:calc(var(--e3) + 24px);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352647A' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right var(--e3) center;background-size:18px 18px}
:root[data-tema="escuro"] select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393A2AA' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>")}
select:disabled{opacity:.55}
/* Folha de tela ou regra antiga que redefine `padding` no select não pode
   cobrir o chevron: a reserva à direita vence por vir depois e por `:not`. */
select:not([multiple]):not([size]){padding-right:calc(var(--e3) + 24px) !important}
input::placeholder,textarea::placeholder{color:var(--tinta4)}
/* Hover do campo (dono, 06/11/2026: "caixa de texto de sistema antigo"): o
   preenchimento desce um degrau (--painel3), nunca uma borda cinza em volta. */
input:hover,select:hover,textarea:hover{background-color:var(--painel3);border-color:var(--painel3)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--foco);outline-offset:-1px;
  border-color:transparent;background-color:var(--painel)}
/* O fio salmão no campo em foco: um sublinhado de 2 px por DENTRO do anel de
   tinta — acento de "é aqui que você escreve", nunca um segundo anel. O anel
   continua tinta (17:1) porque foco é contrato de acessibilidade; 3 px de
   inset porque o anel de -1px cobre o primeiro. Caixa de marcar e botão de
   opção ficam de fora. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):focus,
select:focus,textarea:focus{box-shadow:inset 0 -3px 0 var(--marca-fio-forte)}
/* Piso de alvo, e o único `!important` de campo da folha.
   A regra de base acima já pede 44px, mas basta uma tela escrever
   `.expedir input{padding:8px}` para o campo voltar a 38 — e foi o que
   aconteceu em seis telas. Numa oficina, campo baixo é dedo de luva acertando
   o campo de baixo e a máquina errada saindo pelo portão. A altura mínima de
   um campo não é assunto de tela; largura, alinhamento e tudo mais continuam
   sendo. Caixa de marcar e botão de opção ficam de fora: neles o alvo é o
   `label` inteiro, que já nasce com 44px. */
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]),
select,textarea{min-height:var(--toque) !important}
label{font-size:var(--letra-nota);font-weight:500;color:var(--tinta2)}

/* ---------- o `summary` é um controle, e nascia com a altura do texto --------
   Na bancada é ele que guarda "não consigo continuar", "passar para alguém" e
   "uma foto" — justamente o que a pessoa procura quando está travada, de luva,
   com o motor aberto. Media 20px. O navegador não o dimensiona como botão ou
   campo, então cada tela vinha resolvendo por conta: `.pcp-aviso`, `.orc-recusa`,
   `.cli-novo` e `.vis-nova` já traziam o mesmo `min-height:44px` escrito à mão,
   e as outras dezessete esqueceram. Altura de controle não é assunto de tela —
   é a mesma decisão que a do campo, logo acima.

   O marcador vem junto pelo mesmo motivo: sem ele sobra texto cinza que não
   parece abrir nada, e com `display:flex` o triângulo nativo não é desenhado.
   Um chevron só, para todos. Quem já tem marcador próprio — o ⛔ do bloqueio, o
   ◍ de passar adiante — vence por especificidade e continua com o seu, porque
   ali o símbolo carrega significado e não só a dobra. */
summary{display:flex;align-items:center;gap:var(--e2);min-height:var(--toque);
  cursor:pointer}
summary::-webkit-details-marker{display:none}
/* O chevron é o "›" que a ferramenta já usa na fila, e não um triângulo do
   Unicode: ▸ ▾ ◂ mudam de forma a cada sistema e caem para fonte de recurso
   quando a Plex não os traz — foi por isso que os oito ícones do trilho saíram.
   Este glifo existe na Plex, mede igual em todo aparelho, e diz o que precisa
   dizer: aqui abre. */
summary::before{content:"›";color:var(--tinta4);font-size:var(--letra-forte);
  flex:none;line-height:1}

/* ---------- marcadores: a cor vem da categoria ----------
   Caixa alta com entreletra é o único lugar onde 12px se justifica: a palavra
   já perdeu a forma, e o que resta legível é o tamanho. */
/* `max-width` e quebra: a tag é marcador de duas ou três palavras, mas recebe
   valor vindo do banco — a lista de fotos que faltam na OS já chegou com
   setenta caracteres e esticou o cabeçalho do bloco por 1122px. Com teto, o
   valor longo quebra em duas linhas em vez de empurrar a tela. */
/* Clean: a etiqueta é PALAVRA, não caixa. O estado vive na tinta e num ponto
   de 6px antes dela — cor nunca é o único sinal, a palavra está escrita. */
.tag{display:inline-flex;align-items:center;gap:var(--e2);font-size:var(--letra-nota);
  font-weight:500;letter-spacing:0;text-transform:none;padding:0;
  background:none;color:var(--azul);
  border-radius:0;line-height:1.4;max-width:42ch;text-wrap:pretty}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;
  flex:none;opacity:.9}
.t-urgencia{color:var(--critico);font-weight:600}
.t-bloqueio{color:var(--bloqueio);font-weight:600}
/* Azul (dono, 07/10/2026): a etiqueta neutra ganhou a tinta do marinho — é
   informação, não estado, e não acende nada. O chip com fundo é SÓ do dado
   técnico (kV, polos, ensaio): o fundo azul quer dizer "característica da
   máquina", e por isso não vira roupa de toda etiqueta (ux-lead). "Em
   andamento" (`.t-processo`) é o azul do estado: ponto e palavra. */
.t-tecnico{color:var(--azul);background:var(--azul-fundo);padding:0 var(--e2);
  border-radius:var(--r1)}
.t-escopo{color:var(--tinta2)}
.t-processo{color:var(--azul-acao)}
.t-etiqueta,.t-origem,.t-situacao_origem{color:var(--tinta3)}
/* Tier é realce comercial, não estado: o par da marca, como .t-escopo
   (ux-lead, 04/10/2026). A situação de lá usa t-ok / t-bloqueio na tela. */
.t-tier{color:var(--tinta)}
.t-ok{color:var(--ok)}
.t-atencao{color:var(--atencao)}

/* ---------- indicadores de decisão ----------
   O número primeiro, grande, e o rótulo logo embaixo colado nele: o par se lê
   como uma coisa só. A nota fica separada por um respiro maior, porque é outra
   informação — mais espaço acima de um rótulo do que abaixo dele. */
/* Clean: o indicador NÃO tem caixa. Número grande em peso 300, rótulo colado
   embaixo, e uma linha de 1px separa a régua de indicadores do trabalho. */
.indicadores{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:var(--e5) var(--e6);margin-bottom:var(--e5);padding:var(--e2) 0 var(--e5);
  border-bottom:1px solid var(--linha)}
.ind{background:none;border:0;border-radius:0;position:relative;
  padding:0;display:flex;flex-direction:column;gap:var(--e1);min-width:0}
a.ind{transition:color var(--t1) var(--curva)}
a.ind:hover .rot{color:var(--tinta);text-decoration:underline;text-underline-offset:3px}
.ind .valor{font-family:var(--fonte-titulo);font-size:var(--letra-numero);font-weight:300;
  letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--azul)}
.ind .rot{font-size:var(--letra-nota);color:var(--tinta3)}
.ind .nota{font-size:var(--letra-nota);color:var(--tinta4);margin-top:var(--e2)}
/* ---- o posto do indicador ----------------------------------------------
   Onze indicadores na mesma fileira, todos caixa branca de 1px, e o número
   colorido era a única diferença entre "1695 clientes sem retorno" e "R$ 0".
   Em tela de 1440 isso é uma parede: quem olha tem de ler os onze para achar o
   um.

   Três postos, e a distância entre eles é de propósito:

   · `critico` leva a superfície inteira. Exige ação agora, e é raro — a tela
     do comercial tem um, a do almoxarifado tem zero na maior parte dos dias.
   · `atencao` leva borda e tinta, e mantém o fundo branco. Aqui a primeira
     tentativa foi superfície cheia também, e a tela de Oportunidades devolveu
     a resposta na hora: cinco de onze indicadores viraram bege e o resultado
     foi uma parede nova, da cor da areia. Vai estourar não é estourou.
   · `ok` e `bloqueio` ficam só com a tinta do número. `ok` é boa notícia, e
     boa notícia não é chamado.

   Nenhum indicador ganhou cor nova: o estado sempre veio da tela
   (`class="ind critico"`), e quem nunca teve classe continua branco e quieto. */
/* Clean: o posto mora na tinta do número e no peso do rótulo — nenhuma
   superfície. `.alarme` é o coral: UM por tela, o número que decide o dia. */
.ind.critico .rot{color:var(--tinta2);font-weight:600}
.ind.alarme .valor{color:var(--alarme)}
.ind.alarme .rot{color:var(--tinta2);font-weight:500}
.ind.critico .valor{color:var(--critico)}
.ind.atencao .valor{color:var(--atencao)}
.ind.bloqueio .valor{color:var(--bloqueio)}
.ind.ok .valor{color:var(--ok)}

/* ---------- Centro de Produção ---------- */
.pilhas{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--e4)}
.pilha{background:var(--painel);border:1px solid var(--linha);border-radius:var(--r3);
  display:flex;flex-direction:column;overflow:hidden;align-self:start}
.pilha > header{display:flex;align-items:center;gap:var(--e2);
  padding:var(--e3) var(--e4);border-bottom:1px solid var(--linha-fraca)}
.pilha .farol{width:8px;height:8px;border-radius:50%;flex:none}
.pilha .titulo{font-size:var(--letra-corpo);font-weight:650;letter-spacing:-.01em}
.pilha .total{margin-left:auto;font-family:"IBM Plex Mono",monospace;
  font-size:var(--letra-forte);font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums}
.pilha.critico .farol{background:var(--critico)} .pilha.critico .total{color:var(--critico)}
.pilha.atencao .farol{background:var(--atencao)} .pilha.atencao .total{color:var(--atencao)}
.pilha.bloqueio .farol{background:var(--bloqueio)} .pilha.bloqueio .total{color:var(--bloqueio)}
.pilha.ok .farol{background:var(--ok)}            .pilha.ok .total{color:var(--ok)}
.pilha.info .farol{background:var(--info)}        .pilha.info .total{color:var(--info)}
.pilha .lista{display:flex;flex-direction:column;max-height:300px;overflow-y:auto}
.pilha .linha{display:grid;grid-template-columns:1fr auto;gap:var(--e3);
  min-height:var(--toque);padding:var(--e2) var(--e4);
  border-bottom:1px solid var(--linha-fraca);align-items:center}
.pilha .linha:last-child{border-bottom:0}
.pilha .linha:hover{background:var(--painel2)}
.pilha .linha .m{font-size:var(--letra-corpo);font-weight:600;line-height:1.3;
  overflow-wrap:anywhere}
.pilha .linha .c{font-size:var(--letra-nota);color:var(--tinta3);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pilha .linha .d{font-family:"IBM Plex Mono",monospace;font-size:var(--letra-nota);
  font-weight:700;color:var(--tinta3);text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.pilha .mais{display:flex;align-items:center;min-height:var(--toque);
  padding:0 var(--e4);font-size:var(--letra-nota);font-weight:600;color:var(--indu-forte);
  border-top:1px solid var(--linha-fraca)}
.pilha .mais:hover{background:var(--indu-fraco)}
.pilha .vazio{padding:var(--e5) var(--e4);font-size:var(--letra-nota);
  color:var(--tinta4);text-align:center}

/* gargalo */
.gargalos{display:flex;flex-direction:column;gap:8px}
.gargalo{display:grid;grid-template-columns:120px 1fr 76px;gap:12px;align-items:center;
  font-size:13px}
.gargalo .barra{height:8px;border-radius:4px;background:var(--linha-fraca);overflow:hidden;
  display:flex}
.gargalo .barra i{display:block;height:100%;flex:none;min-width:0}
.gargalo .barra .no{background:var(--ok)}
.gargalo .barra .fora{background:var(--critico)}
.gargalo .n{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--tinta3);
  text-align:right}

/* ---------- blocos ----------
   O bloco é a unidade de leitura da ferramenta. Ele se separa do fundo por uma
   linha de um pixel, não por sombra: sob a luz do galpão, sombra em cartão
   branco vira sujeira na tela e some de qualquer jeito. Sombra aqui é só para o
   que flutua — gaveta, modal, menu suspenso, paleta. */
/* Clean: o bloco é papel branco sobre a folha — UMA sombra curta, canto de
   14px, nenhuma borda. É o card base de toda tela que não é o quadro. */
.bloco{background:var(--painel);border:0;border-radius:var(--r3);box-shadow:var(--sombra);
  margin-bottom:var(--e5);overflow:hidden}
.bloco > header{display:flex;align-items:center;gap:var(--e3);
  padding:var(--e4) var(--e5) 0;border-bottom:0;
  min-height:56px}
.bloco > header h2{margin:0;color:var(--azul)}
/* O fio salmão no título: o traço de 24 × 2 px do `.senoide-titulo` passa a
   ser de TODO h2 de bloco — o ritmo de leitura da folha. Inline-block (e não
   flex) para não mexer no que o h2 já tem dentro; o `:not` poupa o título
   que já traz o traço pela classe. */
.bloco > header h2:not(.senoide-titulo)::before{content:"";display:inline-block;
  vertical-align:middle;width:24px;height:2px;border-radius:1px;margin:-2px var(--e2) 0 0;
  background:var(--marca-fio-forte)}
.bloco > header .direita{margin-left:auto;display:flex;gap:var(--e2);align-items:center}
/* 24px de respiro dentro do corpo. Nenhum filho encosta na borda — e quando um
   `.corpo` recebe borda própria numa tela (peritagem faz isso), o respiro
   continua sendo dele, não da tela. */
.bloco .corpo{padding:var(--e5)}
.bloco .corpo.sem{padding:0}

.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--linha-fraca)}
.grade > div{background:var(--painel);padding:var(--e3) var(--e4)}
.grade .r{font-size:var(--letra-micro);text-transform:none;letter-spacing:0;
  color:var(--tinta3);font-weight:400;display:block;margin-bottom:var(--e1)}
.grade .v{font-size:var(--letra-corpo);font-weight:500;
  font-family:var(--fonte-mono);font-variant-numeric:tabular-nums}
.grade .v.vazio{color:var(--tinta4);font-weight:400}

table{border-collapse:collapse;width:100%;font-size:var(--letra-corpo)}
th{text-align:left;font-size:var(--letra-nota);text-transform:none;
  letter-spacing:0;color:var(--tinta3);font-weight:500;
  padding:var(--e3) var(--e4);border-bottom:1px solid var(--marca-fio);
  background:transparent;white-space:nowrap}
/* Linha de tabela é alvo de toque como qualquer outro: na listagem de máquinas
   a linha inteira abre a ficha. 12px em cima e embaixo já a leva a 44px. */
td{padding:var(--e3) var(--e4);border-bottom:1px solid var(--linha);
  vertical-align:top}
/* Coluna de número se lê em coluna, não palavra por palavra: algarismo de
   largura fixa é o que deixa o olho comparar de cima a baixo. */
td.num,th.num,td.mono{font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:0}
tbody tr{transition:background var(--t1) var(--curva)}
tbody tr:hover{background:var(--painel2)}
.rolar{overflow-x:auto}

/* ---------- linha do tempo do ativo ---------- */
.dna{position:relative;padding-left:24px}
.dna::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(var(--linha),var(--linha-fraca))}
.marco{position:relative;padding:0 0 16px}
.marco::before{content:"";position:absolute;left:-23px;top:4px;width:10px;height:10px;
  border-radius:50%;background:var(--painel);border:2px solid var(--indu)}
.marco.ok::before{border-color:var(--ok)}
.marco.critico::before{border-color:var(--critico);background:var(--critico)}
.marco .ano{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--tinta3);
  font-weight:600}
.marco .fato{font-size:15px;font-weight:600;margin-top:1px}
.marco .det{font-size:13px;color:var(--tinta3);margin-top:2px}

/* ---------- tarefas ---------- */
.tarefas{display:flex;flex-direction:column}
.tarefa{display:grid;grid-template-columns:var(--toque) 1fr auto;gap:var(--e3);
  padding:var(--e2) var(--e4);border-bottom:1px solid var(--linha-fraca);
  align-items:center;min-height:64px;position:relative}
.tarefa:last-child{border-bottom:0}
.tarefa:hover{background:var(--painel2)}
/* Alvo de toque: 20 px era inclicável de luva, e essa fila vive no tablet do
   galpão. Agora 44 px em toda tela, inclusive no computador — a mesma pessoa
   usa os dois, e alvo que muda de tamanho por aparelho é mão que reaprende. */
.tarefa .marca-check{width:var(--toque);height:var(--toque);min-width:var(--toque);
  padding:0;border-radius:var(--r2);border:1.5px solid var(--linha);display:grid;
  place-items:center;font-size:18px;color:transparent;background:var(--painel);
  cursor:pointer;flex:none}
.tarefa .marca-check:hover{border-color:var(--ok);color:var(--ok);background:var(--ok-fraco)}
.tarefa .marca-check:disabled{cursor:default}
.tarefa.feita .marca-check{background:var(--ok);border-color:var(--ok);color:var(--tinta-acao)}
.tarefa.feita .nome{color:var(--tinta3);text-decoration:line-through}
.tarefa .nome{font-size:var(--letra-corpo);line-height:1.4}
/* O nome da etapa é a porta da bancada, e como âncora de texto ele media 19px
   de altura: um quarto do alvo, num tablet operado de luva. Estender o link
   sobre a linha inteira dá 64px de alvo sem custar um pixel de altura — a fila
   continua com a mesma densidade e o dedo para de errar. O `::after` cobre a
   linha; quem precisa ficar por cima dele (o ✓, que é outra ação, e a ação do
   canto) sobe de camada logo abaixo. */
.tarefa a.nome::after{content:"";position:absolute;inset:0}
.tarefa form,.tarefa .marca-check,.tarefa .acao{position:relative;z-index:1}
.tarefa .meta{font-size:var(--letra-nota);color:var(--tinta4);margin-top:var(--e1);
  display:flex;gap:var(--e2);flex-wrap:wrap}
/* A ação do canto some no tablet (sem hover não há como revelá-la), então ela
   nunca pode ser o único caminho: quem toca a linha abre a etapa de qualquer
   jeito. */
.tarefa .acao{opacity:0}
.tarefa:hover .acao,.tarefa:focus-within .acao{opacity:1}
@media (pointer:coarse){.tarefa .acao{opacity:1}}

/* ---------- abas ---------- */
.abas{display:flex;gap:var(--e1);overflow-x:auto;border-bottom:1px solid var(--linha);
  margin-bottom:var(--e5)}
.abas a{display:inline-flex;align-items:center;min-height:var(--toque);
  padding:0 var(--e3);font-size:var(--letra-corpo);color:var(--tinta3);
  white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px;
  font-weight:500}
.abas a:hover{color:var(--tinta)}
.abas a{transition:color var(--t1) var(--curva),border-color var(--t1) var(--curva)}
.abas a.ativo{color:var(--azul);border-bottom-color:var(--azul);font-weight:600}

/* ---------- paleta de comandos ---------- */
.paleta{position:fixed;inset:0;background:var(--veu);
  display:none;align-items:flex-start;justify-content:center;
  padding-top:calc(11vh + var(--topo-seguro));z-index:100}
.paleta[open]{display:flex}
.paleta .caixa{width:min(640px,92vw);background:var(--painel);border:0;
  border-radius:var(--r4);box-shadow:var(--sombra-alta);overflow:hidden}
.paleta input{border:0;border-bottom:1px solid var(--linha-fraca);border-radius:0;
  min-height:60px;padding:0 var(--e5);font-size:var(--letra-forte);background:transparent}
.paleta input:focus{outline:0}
.paleta .resultados{max-height:56vh;overflow-y:auto}
.paleta .r{display:grid;grid-template-columns:auto 1fr auto;gap:var(--e3);
  min-height:var(--toque);padding:var(--e2) var(--e5);
  align-items:center;cursor:pointer;border-bottom:1px solid var(--linha-fraca)}
.paleta .r:last-child{border-bottom:0}
.paleta .r.sel,.paleta .r:hover{background:var(--painel2)}
.paleta .r .ic{width:26px;height:26px;border-radius:var(--r1);display:grid;
  place-items:center;background:var(--painel3);font-size:var(--letra-nota)}
.paleta .r .t{font-size:var(--letra-corpo);font-weight:600}
.paleta .r .s{font-size:var(--letra-nota);color:var(--tinta3)}
.paleta .r .k{font-size:var(--letra-micro);color:var(--tinta4);text-transform:uppercase;
  letter-spacing:.07em}
.paleta .grupo{font-size:var(--letra-micro);text-transform:uppercase;letter-spacing:.09em;
  color:var(--tinta3);font-weight:700;padding:var(--e3) var(--e5) var(--e1);
  background:var(--painel2);border-bottom:1px solid var(--linha-fraca)}
.paleta .dica{padding:var(--e3) var(--e5);font-size:var(--letra-nota);color:var(--tinta4);
  border-top:1px solid var(--linha-fraca);display:flex;gap:var(--e4)}

/* Pergunta na paleta (02/11/2026): campo + microfone na mesma linha; a resposta
   ocupa o lugar dos resultados. O número que responde vem em Albert 22; o resto
   é a lista curta de sempre, com o valor em mono. */
.paleta .paleta-linha{display:flex;align-items:center;border-bottom:1px solid var(--linha-fraca)}
.paleta .paleta-linha input{flex:1;min-width:0;border-bottom:0}
.paleta .paleta-microfone{min-width:var(--toque);min-height:var(--toque);margin-right:var(--e3);
  border-radius:var(--r2);color:var(--tinta2)}
.paleta .paleta-microfone[data-ouvindo]{background:var(--painel3);color:var(--tinta)}
.paleta .paleta-microfone[data-ouvindo] .ic{animation:paleta-ouvindo 1.2s var(--curva) infinite alternate}
@keyframes paleta-ouvindo{from{opacity:1}to{opacity:.45}}
.paleta .r .ic svg{width:16px;height:16px}
.paleta .paleta-resposta{padding:var(--e4) var(--e5);display:grid;gap:var(--e3)}
.paleta .paleta-resposta .paleta-ouvido{font-size:var(--letra-nota);color:var(--tinta3)}
.paleta .paleta-resposta h3{margin:0;font-family:var(--fonte-titulo);font-size:var(--letra-secao);
  font-weight:400;color:var(--azul);text-wrap:balance}
.paleta .paleta-resposta .paleta-frase{margin:0;font-size:var(--letra-forte);color:var(--tinta)}
.paleta .paleta-resposta ul{list-style:none;margin:0;padding:0}
.paleta .paleta-resposta li{display:grid;grid-template-columns:1fr auto;gap:var(--e1) var(--e3);
  padding:var(--e2) 0;border-bottom:1px solid var(--linha-fraca)}
.paleta .paleta-resposta li:last-child{border-bottom:0}
.paleta .paleta-resposta li .s{grid-column:1;font-size:var(--letra-nota);color:var(--tinta3)}
.paleta .paleta-resposta li .v{grid-row:1;grid-column:2;font-family:var(--fonte-mono);
  font-size:var(--letra-nota);color:var(--tinta)}
.paleta .paleta-resposta .paleta-acoes{display:flex;gap:var(--e2);flex-wrap:wrap}
.paleta .paleta-resposta .paleta-acoes .botao{min-height:var(--toque)}
.paleta .paleta-esperando{padding:var(--e4) var(--e5);color:var(--tinta3);font-size:var(--letra-corpo)}
@media (prefers-reduced-motion:reduce){
  .paleta .paleta-microfone[data-ouvindo] .ic{animation:none}
}

/* ---------- avisos e vazios ---------- */
.aviso{border-radius:var(--r2);padding:var(--e3) var(--e4);font-size:var(--letra-corpo);
  margin-bottom:var(--e4);display:flex;gap:var(--e3);align-items:flex-start;
  line-height:1.5}
.aviso.demo{background:var(--neutro-fraco);color:var(--tinta2);
  border:1px dashed var(--linha)}
.aviso.bloqueio{background:var(--bloqueio-fraco);color:var(--bloqueio)}
.aviso.critico{background:var(--critico-fraco);color:var(--critico)}
/* O recado de sucesso e o de atenção não tinham cor nenhuma: saíam em tinta
   sobre o fundo, com o mesmo ⚠ do erro. */
.aviso.ok{background:var(--ok-fraco);color:var(--ok)}
.aviso.atencao{background:var(--atencao-fraco);color:var(--atencao)}
/* Peritagem finalizada: o bloco vira leitura. O fieldset só existe para
   travar os campos de uma vez; não desenha moldura nenhuma. */
fieldset.vist-trava{border:0;padding:0;margin:0;min-width:0}
fieldset.vist-trava[disabled]{opacity:.75}
.vazio{padding:var(--e7) var(--e5);text-align:center;color:var(--tinta4);
  font-size:var(--letra-corpo)}
.rodape{font-size:var(--letra-nota);color:var(--tinta4);margin-top:var(--e4);
  max-width:64ch}
/* Rodapé de listagem paginada: quantas há, em que página estou, como ando. O
   acervo e as propostas usavam estilo inline duplicado — componente não se
   reescreve por tela (Constituição §7). */
.rodape-lista{display:flex;gap:var(--e3);justify-content:center;align-items:center;
  flex-wrap:wrap;font-size:var(--letra-nota);color:var(--tinta3);margin-top:var(--e5)}

/* ---------- login ---------- */
.entrada{min-height:100vh;display:grid;place-items:center;padding:var(--e5)}
.entrada .caixa{width:min(400px,100%);background:var(--painel);border:1px solid var(--linha);
  border-radius:var(--r4);padding:var(--e6);box-shadow:var(--sombra-alta)}
.entrada .marca{padding:0 0 var(--e4)}
.entrada .logo-indu{max-width:240px}
.entrada label{display:block;font-size:var(--letra-nota);font-weight:600;
  color:var(--tinta2);margin:var(--e4) 0 var(--e2)}
.entrada button{width:100%;margin-top:var(--e5);justify-content:center}
.erro{background:var(--critico-fraco);color:var(--critico);border-radius:var(--r2);
  padding:var(--e3) var(--e4);font-size:var(--letra-nota);margin-top:var(--e4)}

/* ---------- primeiro acesso da oficina: LGPD e rosto (05/10/2026) ----------
   Um passo por tela, no tablet do galpão. A caixa é mais larga que a da senha
   porque aqui se lê; o aceite é um alvo de 48px, não um quadradinho. */
.entrada .caixa.pa-caixa{width:min(560px,100%)}
.pa-passo{margin:0 0 var(--e3);font-size:var(--letra-nota);font-weight:600;color:var(--tinta3)}
.pa-titulo{margin:0 0 var(--e4);font-size:var(--letra-secao);line-height:1.25}
.pa-texto{margin:0 0 var(--e3);font-size:var(--letra-corpo);line-height:1.5}
.pa-lista{margin:var(--e2) 0 var(--e4);padding-left:var(--e5);line-height:1.5}
.pa-lista li{margin-bottom:var(--e2)}
.entrada .pa-aceite{display:flex;align-items:center;gap:var(--e3);min-height:48px;
  margin:var(--e5) 0 0;padding:var(--e2) var(--e4);border:1px solid var(--linha);
  border-radius:var(--r2);font-size:var(--letra-forte);color:var(--tinta);cursor:pointer}
.pa-aceite input{width:28px;height:28px;margin:0;flex:none}
.entrada .pa-saidas button{min-height:48px}
.pa-pronto{font-size:var(--letra-forte)}
.fila-aviso-rosto{margin:0 0 var(--e4)}

/* ---------- a porta com a marca (entrar, esqueci, primeiro acesso) ----------
   Pedido do dono (25/09/2026): a marca em toda superfície, com impacto. A porta
   é partida ao meio: à esquerda a coluna do trilho em tela cheia — a mesma
   silhueta que a pessoa encontra depois de entrar —, à direita a folha branca
   com o formulário. O impacto mora num lugar só, o sinal embaixo; o resto é
   quieto. No toque, a coluna vira faixa curta no topo e o formulário sobe:
   ninguém rola a tela para achar o campo de senha. */
.entrada.com-marca{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr);
  place-items:stretch;padding:0;background:var(--painel)}
.entrada.com-marca > .caixa{align-self:center;justify-self:center;width:min(420px,100%);
  border:0;box-shadow:none;background:transparent;padding:var(--e7) var(--e6)}
/* O logotipo já está grande do outro lado; repetir em cima do formulário era
   dizer o nome duas vezes na mesma porta. */
.entrada.com-marca > .caixa > .marca{display:none}
/* A porta de configuração vista do celular (so_no_computador.html). */
.so-computador-titulo{margin:0 0 var(--e3);font-size:var(--letra-secao)}
.so-computador-texto{margin:0 0 var(--e5);color:var(--tinta2)}
.entrada-marca{position:relative;display:flex;flex-direction:column;
  justify-content:space-between;gap:var(--e6);min-height:100vh;overflow:hidden;
  background:var(--trilho);color:var(--trilho-tinta);padding:var(--e7)}
.entrada-marca .logo-indu{max-width:300px}
.entrada-marca .logo-tinta{fill:var(--trilho-marca)}
.entrada-marca .logo-apoio{fill:var(--trilho-tinta2)}
.entrada-marca-corpo{max-width:26ch}
.entrada-marca-frase{margin:0;color:var(--trilho-marca);font-size:var(--letra-numero);
  font-weight:600;line-height:1.12;letter-spacing:-.02em;max-width:none}
.entrada-marca-apoio{margin:var(--e4) 0 0;color:var(--trilho-tinta2);
  font-size:var(--letra-corpo);line-height:1.5;max-width:34ch}
/* O sinal: ranhuras do estator e a senoide coral que as atravessa. As ranhuras
   acendem em sequência quando a onda passa, uma vez só. */
.entrada-sinal{display:block;width:100%;height:auto;max-height:180px}
.entrada-sinal-ranhuras rect{fill:var(--trilho-linha)}
.entrada-sinal-onda{fill:none;stroke:var(--indu);stroke-width:2.2;
  stroke-linecap:round;stroke-dasharray:1 2}
@keyframes entrada-onda{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes entrada-ranhura{0%{fill:var(--trilho-linha)}45%{fill:var(--trilho-aceso)}
  100%{fill:var(--trilho2)}}
@media (prefers-reduced-motion:no-preference){
  .entrada-sinal-onda{animation:entrada-onda 1.8s cubic-bezier(.6,0,.25,1) .3s both}
  .entrada-sinal-ranhuras rect{animation:entrada-ranhura 1.1s ease-out both;
    animation-delay:calc(.3s + var(--i) * 68ms)}
}
@media (prefers-reduced-motion:reduce){
  .entrada-sinal-onda{stroke-dasharray:none}
  .entrada-sinal-ranhuras rect{fill:var(--trilho2)}
}
@media (max-width:900px){
  .entrada.com-marca{grid-template-columns:1fr;align-content:start}
  .entrada-marca{min-height:0;padding:var(--e5) var(--e4) var(--e4);gap:var(--e4)}
  .entrada-marca .logo-indu{max-width:180px}
  .entrada-marca-frase{font-size:var(--letra-forte)}
  .entrada-marca-apoio{display:none}
  .entrada-sinal{max-height:none}
  .entrada.com-marca > .caixa{padding:var(--e5) var(--e4) var(--e6)}
}

/* ==========================================================================
   Tablet (≤1024): a barra do topo com onze alvos numa tela de 834
   ========================================================================== */
/* Medido a 834 (iPad, toque): ☰ 44 + marca 104 + "+ Novo" 79 + busca + três
   pílulas rotuladas 398 + ajuda 44 + tema 44 + nome e perfil 101, com 12 px
   entre eles, somavam 965 — e a página inteira ganhava rolagem lateral. O que
   cede, nesta ordem: a palavra da pílula (ícone + número; o texto segue no
   aria-label), o nome (fica a sigla; o nome inteiro abre no toque da conta),
   o segundo e o "Brasília" do relógio, a folga entre alvos (8 px) e, por
   último, a busca, que encolhe até o alvo de 44 e nunca menos. Nada some por
   `overflow:hidden`: ajuda e tema continuam alvos de 44 px na barra. */
@media (max-width:1024px){
  .barra{gap:var(--e2)}
  .busca-global{flex:1 1 0;min-width:0}
  .quem-menu small{display:none}
  /* O item flexível é o <details>, não o summary: com `min-width:auto` ele
     media o nome inteiro e a barra somava 426 numa tela de 390 — o Chrome do
     celular alarga o viewport de layout até o conteúdo, e a barra inferior
     (fixa, 0 a 0) ia junto. */
  .quem-menu,.quem-menu > summary.quem{min-width:0}
  .quem-menu > summary.quem b{display:none}
  /* Sob `.barra` porque a base da conta vem depois nesta folha e, com o mesmo
     peso, levaria o respiro de volta. */
  .barra .quem-menu > summary.quem{justify-content:center;padding:0}
  .quem-sigla{display:grid;place-items:center;width:var(--toque);height:var(--toque);
    border-radius:99px;background:var(--trilho);color:var(--trilho-marca);
    font-size:var(--letra-nota);font-weight:700;letter-spacing:.04em}
  /* Dentro do menu o nome inteiro e o perfil voltam, no mesmo toque da conta. */
  .menu .lista .quem-cabeca{display:flex;flex-direction:column;align-items:flex-start;gap:0;
    margin:0;padding:var(--e2) var(--e3);max-width:none;line-height:1.3}
  .quem-cabeca b{color:var(--tinta);font-size:var(--letra-corpo)}
  .quem-cabeca small{display:block;color:var(--tinta3);font-size:var(--letra-nota)}
}

/* ==========================================================================
   Chão de fábrica: celular ou tablet, muitas vezes com luva
   ========================================================================== */
@media (max-width:700px){
  .tarefa{grid-template-columns:var(--toque) 1fr;padding:var(--e3) var(--e4)}
  .tarefa .acao{display:none}
  .coluna{flex:0 0 86vw;max-height:none}
  .pilhas{grid-template-columns:1fr}
  .indicadores{grid-template-columns:repeat(2,1fr)}
  .bloco > header{flex-wrap:wrap;padding:var(--e4)}
  .bloco .corpo{padding:var(--e4)}
  /* O título da tela cede um degrau, não três: ele é o que diz onde a pessoa
     está, e no celular é a única âncora que sobra. */
  h1{font-size:var(--letra-secao)}
  .busca-global span:nth-child(2),.busca-global kbd{display:none}
  /* No celular a busca é um botão quadrado: a frase já estava escondida e o
     campo largo só empurrava a conta para fora da barra. */
  .busca-global{max-width:none;flex:none;width:var(--toque);padding:0;justify-content:center}
  :root{--barra-alt:60px}
  .barra{padding:var(--topo-seguro) var(--e4) 0;gap:var(--e2)}
  .faixa-destino{top:calc(var(--barra-alt) + var(--topo-seguro))}
  .novo-menu > summary.novo-botao{width:var(--toque);padding:0;justify-content:center}
  .novo-menu > summary.novo-botao span{display:none}
  /* Celular: ajuda e tema vão para dentro da conta (a sigla já veio do bloco
     do tablet). Eram seis botões e um nome numa barra de 390 px. */
  .barra > .botao-barra,.barra > .botao-tema{display:none}
  .barra-marca{width:88px;height:14px}
  .barra-marca .logo-indu{width:88px}
  .menu .lista .quem-so-estreito{display:flex}
  .menu .lista hr.quem-so-estreito{display:block}
  main{padding:var(--e4)}
  /* Numa tela de 390px, 16px de cada lado da célula custam mais do que valem:
     o nome da pessoa quebrava em duas linhas para caber. O texto fica; a folga
     lateral cede, que é a ordem certa de sacrificar. */
  td,th{padding:var(--e2) var(--e3)}
  /* O que fica à direita do título desce para a linha de baixo quando não
     cabe, em vez de sair do cartão — era como "Apagar perfil" sumia em /acessos. */
  .bloco > header .direita{flex-wrap:wrap;min-width:0}
  /* O traço do título cede 8 px: no celular o h2 quebra linha. */
  .bloco > header h2:not(.senoide-titulo)::before{width:16px}
}
/* A 390px a barra do topo tem sete alvos de 44: cinco fixos, a busca e a conta.
   Com 12px de folga entre eles sobravam 40px para o nome; com 8 sobram 72 e
   nada passa da tela. A folga cede antes do nome. */
@media (max-width:420px){
  .barra{gap:var(--e2);padding:var(--topo-seguro) var(--e3) 0}
}

/* ==========================================================================
   DESIGN SYSTEM — componentes
   Escala de espaço: 4 · 8 · 12 · 16 · 24 · 32 · 48
   Escala de texto:  12 · 13 · 15 · 18 · 22 · 28 · 34 · 44
   Alvo de toque:    44px, em todo aparelho
   ========================================================================== */

/* chips de filtro — o filtro é tocado, e tocado com luva: 44px como o resto */
.chips{display:flex;gap:var(--e2);flex-wrap:wrap;align-items:center}
/* Clean: o filtro é texto; o aceso vira pílula cheia em painel2 e peso. */
.chip{display:inline-flex;align-items:center;gap:var(--e2);background:transparent;
  border:1px solid transparent;border-radius:var(--r2);min-height:var(--toque);
  padding:0 var(--e3);font-size:var(--letra-corpo);color:var(--tinta3);cursor:pointer;
  white-space:nowrap;transition:color var(--t1) var(--curva),background var(--t1) var(--curva)}
.chip:hover{color:var(--tinta);background:var(--painel2)}
.chip.on{background:var(--painel2);border-color:transparent;color:var(--tinta);
  font-weight:600}
.chip .x{opacity:.6;font-size:18px}
.chip .x:hover{opacity:1}
.chip.add{border:1px dashed var(--borda-viva);color:var(--tinta3)}

/* Seletor segmentado. Sem folga interna: assim o segmento inteiro tem os 44px,
   e o controle todo também — em vez de um alvo de 38px dentro de uma caixa de
   50px, que é o jeito de parecer grande e ser pequeno. */
.segmentos{display:inline-flex;background:transparent;border:0;
  border-radius:var(--r2);padding:0;gap:var(--e1);overflow:hidden}
.segmentos a{display:inline-flex;align-items:center;min-height:var(--toque);padding:0 var(--e4);
  font-size:var(--letra-corpo);color:var(--tinta3);font-weight:500}
.segmentos a:hover{color:var(--tinta)}
.segmentos a{border-radius:var(--r2);transition:color var(--t1) var(--curva),background var(--t1) var(--curva)}
.segmentos a.on{background:var(--painel2);color:var(--tinta);font-weight:600}

/* menu suspenso */
.menu{position:relative;display:inline-block}
.menu > .lista{position:absolute;right:0;top:calc(100% + var(--e2));min-width:232px;
  background:var(--painel);border:0;border-radius:var(--r3);
  box-shadow:var(--sombra-alta);padding:var(--e2);z-index:40;display:none}
.menu[open] > .lista{display:block}
.menu .lista a,.menu .lista button{display:flex;align-items:center;gap:var(--e3);
  width:100%;min-height:var(--toque);padding:0 var(--e3);border-radius:var(--r1);
  font-size:var(--letra-corpo);background:transparent;color:var(--tinta2);
  border:0;text-align:left;font-weight:500}
.menu .lista a:hover,.menu .lista button:hover{background:var(--painel2);color:var(--tinta)}
.menu .lista hr{border:0;border-top:1px solid var(--linha-fraca);margin:var(--e2) 0}

/* gaveta lateral (quick preview sem perder o contexto) */
.gaveta{position:fixed;inset:0;background:var(--veu);z-index:90;display:none}
.gaveta[open]{display:block}
/* A gaveta entra pela direita, de onde ela vem: 100 % da própria largura, na
   curva de superfície, em --t3; o véu acende junto em --t2 (22/10/2026). Quem
   pediu menos movimento não vê nenhum (a regra global no topo desliga). */
.gaveta[open]{animation:mov-veu var(--t2) var(--curva) backwards}
.gaveta .folha{position:absolute;right:0;top:0;bottom:0;width:min(580px,94vw);
  background:var(--painel);border-left:0;overflow-y:auto;
  box-shadow:var(--sombra-alta);animation:mov-desliza-direita var(--t3) var(--curva-superficie) backwards}
.gaveta .cabeca{position:sticky;top:0;z-index:1;background:var(--painel);
  border-bottom:0;
  padding:calc(var(--e3) + var(--topo-seguro)) var(--e5) var(--e3);display:flex;
  align-items:center;gap:var(--e3);min-height:60px}
.gaveta .cabeca h2{margin:0;flex:1}
.gaveta .corpo-gaveta{padding:var(--e5)}

/* modal */
.modal{position:fixed;inset:0;background:var(--veu);z-index:95;display:none;
  align-items:center;justify-content:center;padding:var(--e5)}
.modal[open]{display:flex;animation:mov-veu var(--t2) var(--curva) backwards}
/* A caixa surge de .97 para 1 (nada nasce de zero), do centro — modal não tem
   gatilho a que se ancorar (22/10/2026). */
.modal .caixa{width:min(520px,100%);background:var(--painel);border:0;
  border-radius:var(--r4);box-shadow:var(--sombra-alta);padding:var(--e6);
  transform-origin:center;animation:mov-surge var(--t2) var(--curva) backwards}

/* dica */
[data-dica]{position:relative}
[data-dica]:hover::after{content:attr(data-dica);position:absolute;bottom:calc(100% + 6px);
  left:50%;transform:translateX(-50%);background:var(--tinta);color:var(--fundo);
  font-size:var(--letra-nota);padding:var(--e1) var(--e2);border-radius:var(--r1);
  white-space:nowrap;z-index:60;pointer-events:none}

/* esqueleto de carregamento */
/* Clean: sem degradê que corre. O esqueleto respira devagar; o carregamento
   que tem dono (o gêmeo, uma lista inteira) usa a senoide (`_senoide.html`). */
.esqueleto{background:var(--painel2);animation:respira 1.6s var(--curva) infinite;
  border-radius:var(--r1);height:14px}
@keyframes respira{50%{opacity:.55}}

/* estado vazio que ensina o próximo passo */
.vazio-util{padding:var(--e7) var(--e5);text-align:center;max-width:52ch;margin:0 auto}
.vazio-util .icone{font-size:28px;opacity:.4}
.vazio-util h3{margin:var(--e3) 0 var(--e2);text-transform:none;letter-spacing:-.015em;
  font-size:var(--letra-forte);color:var(--tinta)}
.vazio-util p{color:var(--tinta3);font-size:var(--letra-corpo);margin-bottom:var(--e4)}

/* barra de progresso genérica */
.barra-prog{height:4px;border-radius:99px;background:var(--linha-fraca);overflow:hidden}
.barra-prog i{display:block;height:100%;background:var(--ok);border-radius:99px}
.barra-prog.atencao i{background:var(--atencao)}
.barra-prog.critico i{background:var(--critico)}

/* medição com veredito de norma */
.medida{display:grid;grid-template-columns:1fr auto auto;gap:var(--e3);align-items:center;
  min-height:var(--toque);padding:var(--e2) var(--e4);
  border-bottom:1px solid var(--linha-fraca)}
.medida:last-child{border-bottom:0}
.medida .grandeza{font-size:var(--letra-corpo);font-weight:600}
.medida .criterio{font-size:var(--letra-nota);color:var(--tinta4)}
.medida .valor{font-family:"IBM Plex Mono",monospace;font-size:var(--letra-corpo);
  font-weight:600;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.medida.reprovado .valor{color:var(--critico)}
.medida.aprovado .valor{color:var(--ok)}
/* Resposta em texto ("Umidade ou contaminação do enrolamento") quebra linha no
   celular; número curto continua numa linha só, porque cabe. Fica depois da
   regra base de propósito: no bloco geral do celular, lá em cima, o nowrap
   daqui de cima vencia. */
@media (max-width:700px){
  .medida .valor{white-space:normal;min-width:0;overflow-wrap:anywhere;max-width:45vw}
}

/* Tabela densa: onde a tela precisa mostrar a oficina inteira de uma vez, a
   linha aperta na vertical — mas o texto não encolhe. Respiro que vira rolagem
   numa tela de produção é respiro que custa uma pergunta ao telefone. */
table.densa td,table.densa th{padding:var(--e2) var(--e3)}

/* ==========================================================================
   QUADRO DE PIPELINE
   PIPELINE → ESTÁGIOS (colunas) → card → ETAPAS (dentro do card)
   ========================================================================== */

/* faixa 1: identidade e números */
.quadro-topo{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:2px}
.seletor{position:relative}
.titulo-pipeline{background:transparent;color:var(--tinta);border:0;padding:4px 8px 4px 0;
  font-size:22px;font-weight:700;letter-spacing:-.025em;display:flex;align-items:center;gap:8px}
.titulo-pipeline:hover{background:transparent;color:var(--indu-forte)}
.titulo-pipeline .ic{font-size:18px;color:var(--indu-forte)}
.titulo-pipeline .chev{font-size:13px;color:var(--tinta3);margin-left:2px}
.popover{position:absolute;left:0;top:calc(100% + 6px);width:320px;background:var(--painel);
  border:1px solid var(--linha);border-radius:var(--r3);box-shadow:var(--sombra-alta);
  padding:8px;z-index:60;display:none}
.seletor[open] .popover{display:block}
.popover a{display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:center;
  padding:8px 12px;border-radius:var(--r2)}
.popover a:hover{background:var(--painel2)}
.popover a.on{background:var(--indu-fraco)}
.popover a.on b{color:var(--indu-forte)}
.popover .ic{font-size:15px;color:var(--tinta3);text-align:center}
.popover b{font-size:15px;font-weight:650;display:block}
.popover small{font-size:13px;color:var(--tinta3);display:block;line-height:1.35;margin-top:1px}
.popover .num{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--tinta3)}

.numeros{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--tinta3)}
.numeros .sep{opacity:.5}
.numeros .alerta{color:var(--critico);font-weight:600}
.numeros .oculto{color:var(--tinta4)}
.ferramentas{margin-left:auto;display:flex;align-items:center;gap:8px}

/* faixa 2: os quatro recortes fixos do quadro.
   "Salvar visao" saiu em 19/09/2026 — cada pessoa criava a sua e o quadro passou
   a ter tantas leituras quanto abas. Estes quatro sao iguais para todo mundo. */
.quadro-filtros{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border-bottom:1px solid var(--linha);padding-bottom:8px;margin-bottom:12px}
.quadro-recortes{display:flex;gap:2px;overflow-x:auto}
.quadro-recortes a{display:inline-flex;align-items:center;min-height:var(--toque);
  padding:0 12px 4px;font-size:15px;color:var(--tinta3);
  white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-8px}
.quadro-recortes a:hover{color:var(--tinta)}
.quadro-recortes a.on{color:var(--indu-forte);border-bottom-color:var(--indu);font-weight:650}
.quadro-filtros .chips{margin-left:auto}
/* A busca do quadro. Era um campo de 210px com 13px de fonte e 4px de folga,
   encostado depois dos recortes — existia e não se fazia encontrar, e o dono
   pediu que ela fosse acrescentada porque não a achou. Agora ocupa o lado
   direito da faixa de filtros, com ícone e alvo de 44px. */
.quadro-busca{display:flex;align-items:center;gap:8px;margin-left:auto;
  position:relative;flex:0 1 420px}
.quadro-busca-icone{position:absolute;left:8px;font-size:var(--letra-forte);
  color:var(--tinta4);pointer-events:none;line-height:1}
.quadro-busca input[type=search]{flex:1;min-height:44px;
  padding:8px 12px 8px 32px;font-size:var(--letra-corpo);
  border-radius:var(--r2);border:1px solid var(--painel2);background-color:var(--painel2)}
.quadro-busca input[type=search]:focus{outline:2px solid var(--foco);
  outline-offset:1px;border-color:var(--indu)}
.quadro-busca-limpa{position:absolute;right:104px;width:44px;min-height:44px;
  display:flex;align-items:center;justify-content:center;
  color:var(--tinta4);text-decoration:none;font-size:var(--letra-corpo)}
.quadro-busca-limpa:hover{color:var(--tinta)}
.quadro-busca button{min-height:44px;padding:8px 16px;white-space:nowrap}

/* colunas */
.quadro{display:flex;gap:12px;overflow-x:auto;padding-bottom:12px;align-items:flex-start}
/* 288px por coluna (spec de 23/09): numa tela de 1440 com o trilho aberto cabem
   quatro colunas inteiras em vez de três e meia. O card corta com reticências
   o que não couber — nenhuma linha de informação sai dele. A compacta fica em
   264; a detalhada continua a mais larga. O funil (`.quadro-compacto`) usava
   os 264 da compacta e voltou aos 288 quando a calha dos comandos cresceu. */
.coluna{flex:0 0 288px;min-width:0;background:var(--painel3);border:1px solid var(--linha);
  border-radius:var(--r3);display:flex;flex-direction:column;max-height:max(360px,calc(100vh - var(--quadro-inicio,260px)));
  transition:border-color var(--t1) var(--curva),box-shadow var(--t1) var(--curva)}
.quadro.d-compacta .coluna{flex:0 0 264px}
.quadro.d-detalhada .coluna{flex:0 0 360px}
.coluna > header{padding:var(--e2) var(--e3) var(--e2);position:relative}
.coluna .linha1{display:flex;align-items:baseline;gap:8px}
.coluna .nome{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--tinta3);flex:1;overflow-wrap:anywhere}
.coluna .conta{font-family:"IBM Plex Mono",monospace;font-size:15px;font-weight:700;
  color:var(--tinta)}
.coluna .linha2{display:flex;align-items:center;gap:4px;font-size:13px;
  color:var(--tinta4);margin-top:2px;flex-wrap:wrap;padding-bottom:8px}
.coluna .marca-espera{background:var(--bloqueio-fraco);color:var(--bloqueio);
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:1px 4px;border-radius:3px}
.coluna .marca-retrabalho{background:var(--critico-fraco);color:var(--critico);
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:1px 4px;border-radius:3px}
.coluna .pressao{color:var(--atencao);font-weight:600}
.coluna .saude{height:3px;background:var(--linha-fraca);border-radius:2px;overflow:hidden}
.coluna .saude i{display:block;height:100%;background:var(--critico)}
/* gargalo: só o cabeçalho ganha cor. Fundo colorido atrás de 14 cards mata a leitura */
.coluna.gargalo > header{background:var(--atencao-fraco);border-radius:var(--r3) var(--r3) 0 0}
.coluna.travado > header{background:var(--critico-fraco);border-radius:var(--r3) var(--r3) 0 0}
.coluna.travado .conta{color:var(--critico)}
/* Realce do destino: a COLUNA inteira acende, nao so a lista. O alvo e o que a
   pessoa ve — se o realce cobre meia coluna, ela mira na metade realcada. */
.coluna.sobre{border-color:var(--indu);box-shadow:0 0 0 2px var(--indu-fraco)}
.coluna.sobre .cards{background:var(--indu-fraco);transition:background-color var(--t1) var(--curva)}
.coluna.sobre .quadro-solte{opacity:1;border-color:var(--indu);color:var(--indu-forte);
  transform:scale(1.02)}
.coluna.recusa{opacity:.45}
.coluna.recusa .linha2{color:var(--critico)}
.coluna .cards{display:flex;flex-direction:column;gap:8px;padding:8px;overflow-y:auto;
  min-height:110px;flex:1 1 auto;border-radius:0 0 var(--r3) var(--r3)}
/* A area util que sobra embaixo da fila: cresce ate o pe da coluna e e o alvo
   grande que o dedo acerta. So aparece quando ha um card no ar. */
.quadro-solte{flex:1 1 auto;min-height:54px;display:none;align-items:center;
  justify-content:center;border:2px dashed var(--linha);border-radius:var(--r3);
  color:var(--tinta4);font-size:13px;opacity:.7;margin-top:2px;
  transition:transform var(--t2) var(--curva),border-color var(--t1) var(--curva),color var(--t1) var(--curva),opacity var(--t1) var(--curva)}
.quadro-arrastando .quadro-solte{display:flex}
.quadro-arrastando{user-select:none;-webkit-user-select:none}
.quadro-arrastando .card{cursor:grabbing}
.coluna .cards > *{flex:0 0 auto}
.coluna .carregar{display:block;text-align:center;padding:8px;font-size:13px;
  color:var(--indu-forte);border:1px dashed var(--linha);border-radius:var(--r2)}
.coluna-vazia{border:1px dashed var(--linha);border-radius:var(--r2);padding:16px 12px;
  text-align:center;display:flex;flex-direction:column;gap:4px}
.coluna-vazia strong{font-size:13px;color:var(--tinta2)}
.coluna-vazia span{font-size:13px;color:var(--tinta4);line-height:1.4}
.coluna-vazia a{font-size:13px;color:var(--indu-forte);margin-top:4px}
.linha-drop{height:2px;background:var(--indu);border-radius:2px;margin:2px 0}

/* ==========================================================================
   CARD
   Faixa de status só quando há exceção. Se tudo tem cor, nada tem cor.
   ========================================================================== */
/* O card é a exceção medida ao respiro: numa coluna do quadro cabem quarenta, e
   cada 4px de folga vertical some com um card do campo de visão. O texto subiu
   de escala — a máquina agora se lê de relance — e a folga vertical desceu para
   compensar. Quem precisa ver a oficina inteira continua vendo. */
.card{background:var(--painel);border:1px solid var(--linha);border-radius:var(--r2);
  position:relative;display:block;min-height:var(--toque);min-width:0;
  padding:var(--e2) var(--e3) var(--e2) var(--e4);
  transition:border-color .12s,box-shadow .12s}
.card:hover{border-color:var(--tinta4);box-shadow:var(--sombra)}
.card:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
/* O corpo do cartão é o link para a OS. Ele mora dentro da div e não é a div
   porque o espiar, ao lado dele, também é link — e link dentro de link faz o
   analisador fechar o primeiro e jogar metade do cartão para fora dele. */
/* O corpo herda 1.25 de entrelinha, não o 1.55 do corpo de texto: cada linha do
   cartão é uma só e corta com reticências, e o 1.55 é medida de parágrafo.
   Eram 5 linhas × 4px de ar a mais — 130px de cartão contra os 112 da spec de
   23/09. Mora aqui e não em `.card` porque `.card` também veste orçar, aprovação
   e distribuir, que carregam parágrafo. */
.cartao-abrir{display:block;color:inherit;text-decoration:none;min-width:0;
  line-height:1.25}
.cartao-abrir:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
/* Trilho de exceção: 3px na borda esquerda, a única cor que o card usa por
   padrão, e por isso a que se lê de relance numa coluna de quarenta.
   Não é enfeite de callout: cada cor aqui tem significado em
   docs/CONSTITUICAO.md §3, e card sem exceção não tem trilho nenhum. */
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  border-radius:var(--r2) 0 0 var(--r2);background:transparent}
.card.p-emergencia::before{background:var(--critico)}
.card.p-alta::before{background:var(--atencao)}
.card.g-atrasada::before,.card.g-abandonada::before{background:var(--critico)}
.card.travado::before{background:var(--bloqueio)}
/* `manipulation`: o dedo rola o quadro por cima do card, para os lados e para
   cima (dono, 25/09/2026). Arrastar o card é segurar e mover (quadro.js). */
.card[data-arrastavel]{cursor:grab;touch-action:manipulation}
/* A copia que segue o dedo. Fora do fluxo e sem eventos: e so a imagem do card,
   e quem decide o destino e o ponto sob o ponteiro. Posicao, inclinacao e
   escala vem do quadro.js a cada quadro (transform), com mola: o card flutua
   atras do ponteiro e inclina na direcao em que anda (04/10/2026). A copia voa
   dentro de um involucro `.coluna` sem moldura: as regras do card que dependem
   da coluna (botao Mandar, linhas) valem iguais no ar e no chao. */
.coluna.quadro-sombra{position:fixed;z-index:120;pointer-events:none;left:0;top:0;
  margin:0;padding:0;border:0;background:none;box-shadow:none;max-height:none;display:block;
  flex:none;will-change:transform;transition:none;
  transform-origin:var(--pega-x,50%) var(--pega-y,24px)}
.coluna.quadro-sombra > .card{box-shadow:var(--sombra-flutua);border-color:var(--indu);
  cursor:grabbing;transition:box-shadow var(--t2) var(--curva)}
.coluna.quadro-sombra.quadro-pousando > .card{box-shadow:var(--sombra);border-color:var(--linha)}
/* O lugar de onde o card saiu fica marcado, do tamanho dele: um vão tracejado,
   e não um card desbotado que parece desabilitado. */
.card.arrastando{background:transparent;border:2px dashed var(--linha);box-shadow:none;
  cursor:grabbing}
.card.arrastando > *,.card.arrastando::before{visibility:hidden}
/* Pousou: um respiro curto no destino, para o olho achar onde o card ficou. */
.card.quadro-pousou{animation:quadro-pousa calc(var(--t3) + var(--t2)) var(--curva)}
@keyframes quadro-pousa{
  0%{box-shadow:0 0 0 0 var(--indu-fraco),var(--sombra-alta);border-color:var(--indu)}
  60%{box-shadow:0 0 0 6px var(--indu-fraco),var(--sombra)}
  100%{box-shadow:var(--sombra)}}
.card.fantasma{opacity:.4}
/* Espelho do trabalho em paralelo (dono, 02/10/2026): a mesma OS com trabalho
   vivo em outra coluna. Amarelo por pedido do dono, e distinto do card de
   verdade por três coisas além da cor — borda tracejada, a marca "paralelo"
   escrita e "card em <coluna>" no pé —, para não ser lido como uma segunda
   máquina nem como gravidade "atenção". Não é `.card`: não arrasta, não conta
   no total da coluna e não leva comando. */
.card-paralelo{display:block;min-width:0;min-height:var(--toque);
  padding:var(--e2) var(--e3) var(--e2) var(--e4);
  background:var(--atencao-fraco);color:inherit;text-decoration:none;line-height:1.25;
  border:1px dashed var(--atencao);border-radius:var(--r2);cursor:pointer}
.card-paralelo:hover{box-shadow:var(--sombra)}
.card-paralelo:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.card-paralelo-topo{display:flex;align-items:baseline;gap:var(--e2)}
.card-paralelo-os{font-family:"IBM Plex Mono",monospace;font-weight:600;
  font-size:var(--letra-corpo);flex:none}
.card-paralelo-marca{font-size:var(--letra-micro);font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--atencao);margin-left:auto}
.card-paralelo-maquina,.card-paralelo-cliente,.card-paralelo-texto,.card-paralelo-onde{
  display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.card-paralelo-maquina{font-size:var(--letra-nota);font-weight:600}
.card-paralelo-cliente{font-size:var(--letra-nota);color:var(--tinta3)}
.card-paralelo-texto{font-size:var(--letra-nota);font-weight:700;color:var(--atencao);
  margin-top:var(--e1)}
.card-paralelo-onde{font-size:var(--letra-micro);color:var(--tinta3)}

/* linha 1: a máquina é a identidade, não o número da ordem */
.card .linha-topo{display:flex;align-items:baseline;gap:8px}
.card .maquina{font-size:15px;font-weight:650;letter-spacing:-.01em;line-height:1.25;
  flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .prazo{font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:700;
  padding:1px 4px;border-radius:4px;background:var(--neutro-fraco);color:var(--neutro);
  flex:none;font-variant-numeric:tabular-nums}
.card .prazo.atencao{background:var(--atencao-fraco);color:var(--atencao)}
.card .prazo.atrasada{background:var(--critico-fraco);color:var(--critico)}
.card .prazo.abandonada{background:var(--critico);color:var(--tinta-acao)}

/* linha 2: cliente e ordem dividem a linha; o cliente cede espaço primeiro */
.card .linha-quem{display:flex;align-items:baseline;gap:8px;margin-top:1px}
.card .linha-proposta{margin-top:4px}
.card .cliente{font-size:13px;color:var(--tinta3);flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .os{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--tinta4);
  flex:none;letter-spacing:.02em}

/* No tablet nao existe hover: a acao rapida fica sempre visivel e com alvo de
   dedo, e o cartao ganha respiro para o polegar. */
@media (pointer: coarse){
  /* A esquerda acompanha a base: o trilho de excecao ocupa 3px da borda e
     precisa dos 16px para nao encostar no texto. */
  .card{padding:12px 48px 12px 16px}
  .quadro-recortes a{padding:12px 16px}
  .coluna .cards{gap:12px}
}

/* O quadro no celular — pedido do dono, 25/09/2026, com o iPhone na mão: "os
   cards estão grandes demais" e a primeira máquina só aparecia depois de 361px
   de cabeçalho. Vem depois do bloco do toque de propósito, para vencer a
   fileira de comandos que ele desce para o pé do card.

   · Cabeçalho da tela: densidade e "+ Receber máquina" saem — no celular a
     densidade não muda nada que se veja, e receber já está no "+" da barra e no
     chip logo acima. A busca ocupa a linha e dispensa o botão: o teclado do
     telefone tem "Buscar".
   · Cabeçalho da coluna: o "⋯ estágio" (renomear, acrescentar, prazo) é
     configuração, feita no computador; no telefone só roubava 44px de cada
     coluna.
   · Card: a fileira de comandos sobe para a linha da próxima etapa, à direita,
     e o card perde a linha extra. Os alvos continuam com 44px. */
@media (max-width:700px){
  .quadro-topo .ferramentas{display:none}
  .quadro-topo{gap:var(--e2) var(--e3)}
  .quadro-filtros{gap:var(--e2)}
  .quadro-busca{flex:1 1 100%;margin-left:0}
  .quadro-busca button{display:none}
  .quadro-busca-limpa{right:0}
  .coluna > header{padding:var(--e2) var(--e3) 0}
  .coluna .pcp-coluna-menu{display:none}
  .coluna .linha2{padding-bottom:var(--e2)}
  .quadro .coluna .cards{gap:var(--e2);padding:var(--e2)}
  /* O funil comercial no celular: o quadro vinha depois de nove indicadores,
     validação e alertas — uns 6000px de rolagem até o primeiro negócio. Aqui o
     funil sobe e o painel do período desce para baixo dele; nada sai da tela,
     só muda a ordem. */
  main:has(> .quadro-compacto){display:flex;flex-direction:column}
  main:has(> .quadro-compacto) > .com-filtro,
  main:has(> .quadro-compacto) > .indicadores,
  main:has(> .quadro-compacto) > #com-validar,
  main:has(> .quadro-compacto) > #com-alertas{order:1}
  main:has(> .quadro-compacto) > .cabecalho .sub{display:none}
}

/* O Safari do iPhone (e o do iPad) dá zoom na página inteira quando o dedo toca
   num campo com letra menor que 16px — e não desfaz sozinho. Era o "entrei pelo
   iPhone e o layout não está para mobile" do dono (25/09/2026): a busca de 15px
   e o intervalo de datas de 13px ampliavam a tela, e daí em diante tudo parecia
   a versão do computador cortada. No toque, campo tem 16px, sem exceção — por
   isso o `!important`, que vence os campos que escolheram letra menor. */
@media (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{
    font-size:16px !important}
  /* Segurar o card para arrastar: sem isto o iPhone abre a pré-visualização do
     link e seleciona o texto por cima do gesto. */
  .card[data-arrastavel]{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
}

/* Configuração não se faz no toque (dono, 25/09/2026). A rota já recusa
   (app/web/aparelho.py); aqui somem as portas que ficavam na própria tela: o
   "⋯ estágio" da coluna, a densidade do quadro e a arrumação da tela inicial. */
:root[data-aparelho="toque"] .pcp-coluna-menu,
:root[data-aparelho="toque"] .quadro-topo .segmentos,
:root[data-aparelho="toque"] .ini-cabecalho-acoes a[href="/inicio/personalizar"],
:root[data-aparelho="toque"] .ini-widget-acoes{display:none}

/* cartão compacto */
/* Clean, fase 3a (06/10/2026): as telas comerciais carregam a folha própria
   `telas/comercial.css` (escopo `.com-tela`), que veste estas mesmas classes.
   O que ficou aqui é a anatomia que outras telas ainda usam; o coral que era
   ação/marca nas regras exclusivas do comercial (comandos do cartão, recortes,
   visitas, proposta, orçar) virou tinta — coral é alarme, uma vez por tela. */
/* O cartão do funil responde em dois segundos: que máquina, de quem, o que e
   há quanto tempo parada. Tudo o que é ação saiu para a gaveta — cartão que
   carrega formulário vira tela de trabalho e para de caber na coluna. */
.cartao-funil{background:var(--painel);border:1px solid var(--linha-fraca);
  border-radius:var(--r2);box-shadow:var(--sombra);position:relative;
  display:flex;flex-direction:column;gap:2px;
  /* A calha dos comandos. Eles flutuam sobre o cartão (position:absolute), e
     sem reservar a faixa o texto da primeira linha passa por baixo deles —
     "4914569 · potência não cadastrada" sumindo justamente atrás do botão.
     Quatro alvos de 28px (✎ ☎ ⏩ ⟩, dono 24/09/2026) mais o respiro entre
     eles e a borda: 6 + 4 × 28 + 3 × 4 = 130, e a calha para 6px antes. */
  --cartao-calha:124px;
  /* 1.25 de entrelinha: com o 1.55 herdado do corpo de texto, as quatro linhas
     e o pé somavam 101px de conteúdo e o cartão media 119 — o `min-height`
     de 104 nunca chegava a mandar. Com 1.25 o conteúdo fechava em 85.
     A quinta linha (o próximo passo, 24/09) levou a anatomia fixa a 128, e o
     mínimo acompanha: mínimo abaixo do conteúdo é desejo, não medida. A linha
     "OS · estágio · proposta" é a única que faz o cartão passar disso, e só
     quando existe. */
  line-height:1.25;
  min-height:128px;padding:8px 12px}
.cartao-funil:hover{border-color:var(--tinta4)}
.cartao-funil:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
/* o corpo é um link inteiro: sem isso o cartão herda azul e sublinhado do <a>.
   O ponteiro mora aqui, não em `.cartao-funil` — a faixa de baixo (`.cartao-pe`)
   fica fora do <a> e não navega para lugar nenhum. */
.cartao-corpo{display:flex;flex-direction:column;gap:2px;color:inherit;
  text-decoration:none;cursor:pointer}
/* as linhas do corpo cortam com reticências: a da máquina é a que fica debaixo
   dos comandos, e era a única sem corte.
   A calha só nas linhas que os comandos cobrem: eles flutuam de 6 a 34px, em
   cima da máquina e da placa. Reservar a faixa no corpo inteiro tirava 124px
   do serviço e da linha "OS · estágio · proposta", que é a mais comprida do
   cartão e não tem botão nenhum por cima. */
.cartao-maquina{font-size:13px;font-weight:600;color:var(--tinta);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding-right:var(--cartao-calha)}
.cartao-placa{font-size:11px;color:var(--tinta3);padding-right:var(--cartao-calha);
  display:flex;align-items:center;gap:4px;min-width:0}
/* o texto da placa cede e os selos não: um selo cortado pela metade não se lê,
   e "Marathon · 4 po…" ainda se lê */
.cartao-placa-texto{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cartao-placa .cartao-selo{flex:none}
.cartao-selo{font-size:10px;font-weight:700;letter-spacing:.04em;
  padding:0 4px;border-radius:4px;background:var(--info-fraco);color:var(--info)}
.cartao-cliente{font-size:12px;color:var(--tinta3);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cartao-servico{font-size:12px;color:var(--tinta2);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* Onde a máquina está e em que pé está a proposta (dono, 24/09/2026): uma
   linha, no tamanho da placa, porque é situação e não assunto — e porque 11px
   é o que mantém o cartão dentro de uma linha a mais (128 → 144). */
.cartao-onde{font-size:11px;color:var(--tinta3);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* A origem é característica, não estado: o neutro do `.cartao-dias` em
   repouso, para não disputar com o azul-aço do selo técnico ao lado. */
.cartao-origem{background:var(--painel3);color:var(--tinta3)}
/* `flex-wrap`: com dono, etapa, mês e espera o pé passou a ter sete peças e
   quebra em duas linhas quando aperta. O cartão cresce além da linha a mais —
   a informação vale mais que a medida (dono, 24/09/2026). */
.cartao-pe{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin-top:auto;
  font-size:11px;color:var(--tinta3)}
/* As duas cores do cartão: o tempo parado, só depois que estoura o alvo da
   etapa que o cabeçalho da coluna mostra; e a marca de espera de validação,
   porque valor sem validar não pode parecer valor contado. Fora isso é
   informação, não alarme. */
.cartao-dias{margin-left:auto;padding:1px 4px;border-radius:4px;
  background:var(--painel3);color:var(--tinta3);font-weight:600}
.cartao-dias.estourado{background:var(--critico-fraco);color:var(--critico)}
/* estado, não ação: o valor do pedido fechado ainda não conta em indicador
   nenhum, e o cartão precisa dizer isso mesmo sem os botões de validar. */
.cartao-marca{font-size:11px;padding:0 4px;border-radius:4px;
  background:var(--atencao-fraco);color:var(--atencao)}
.cartao-comandos{position:absolute;right:6px;top:6px;display:flex;gap:4px;opacity:0;
  transition:opacity .12s}
.cartao-funil:hover .cartao-comandos,.cartao-funil:focus-within .cartao-comandos{opacity:1}
/* o comando de avançar precisa de <form method="post">, não de <a>: some do
   fluxo do documento sem o wrapper, então o <form> vira o próprio item do
   flex — do tamanho do botão que carrega dentro, nada além disso */
.cartao-comandos form{display:contents}
/* um comando é <a>, não <button> — as duas tags precisam do mesmo tamanho e
   do mesmo alinhamento, e o link não pode carregar sublinhado nem cor de link */
.cartao-comandos button,.cartao-comandos a{width:28px;height:28px;padding:0;
  /* o piso de 44px do `button` da base vence `height`: sem zerar o mínimo o
     ⏩ saía com 44 de altura ao lado do ⟩ e do ☎ de 28. No toque os quatro
     voltam a 44 pela regra de densidade. */
  min-height:0;
  border-radius:var(--r2);border:1px solid var(--linha);background:var(--painel);
  color:var(--tinta3);font-size:13px;line-height:1;
  display:flex;align-items:center;justify-content:center;text-decoration:none}
.cartao-comandos button:hover,.cartao-comandos a:hover{background:var(--tinta);
  color:var(--tinta-acao);border-color:var(--tinta)}

/* --- o cartão em um toque (dono, 24/09/2026) --------------------------------
   Três gestos sem abrir a ficha: próximo passo, chance e contato. Cada um é
   um <details> ou um <form> de verdade — sem script a tela continua inteira.
   A quinta linha do cartão é o próximo passo; o pé ganhou a chance. */
.cartao-passo{font-size:12px;color:var(--tinta2);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;position:relative}
/* Sem próximo passo é âmbar e é o próprio botão: a ausência pede ação. */
.cartao-passo-sem,.cartao-agendar > summary{color:var(--atencao);font-weight:600}
.cartao-agendar > summary{min-height:20px;padding:0;gap:0;font-size:12px;
  cursor:pointer;display:inline-flex}
.cartao-agendar > summary::before{content:none}
/* O formulário abre no fluxo — a coluna rola e recortaria o que flutuasse. */
.cartao-agendar > form{display:flex;gap:var(--e1);margin-top:var(--e1);padding:var(--e1);
  background:var(--painel2);border:1px solid var(--linha);border-radius:var(--r2)}
.cartao-agendar > form button{flex:1;min-height:var(--toque);padding:0 var(--e2);
  font-size:var(--letra-nota);justify-content:center;text-align:center}
/* A chance: quatro pontos, um botão. Ponto cheio é degrau ganho. */
.cartao-chance{display:inline-flex;align-items:center;gap:3px;min-height:20px;
  height:auto;padding:0 var(--e1);background:transparent;border:0;border-radius:var(--r1);
  color:var(--tinta3);cursor:pointer;line-height:1}
.cartao-chance-form{display:contents}
.cartao-chance i{width:7px;height:7px;border-radius:99px;border:1px solid var(--tinta4);
  display:block;background:transparent}
.cartao-chance i.on{background:var(--tinta3);border-color:var(--tinta3)}
button.cartao-chance:hover{background:var(--painel2)}
button.cartao-chance:hover i.on{background:var(--tinta);border-color:var(--tinta)}
/* ✎ registrar contato: o comando abre um formulário de uma linha por cima do
   cartão. Mesma roupa dos outros comandos. */
.cartao-registrar > summary{width:28px;height:28px;min-height:0;padding:0;gap:0;
  border-radius:var(--r2);border:1px solid var(--linha);background:var(--painel);
  color:var(--tinta3);font-size:13px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  /* na calha, à esquerda do ⏩ e do ⟩: 2 × 28 + 2 folgas + a borda */
  position:absolute;top:6px;right:70px;opacity:0;transition:opacity .12s}
/* com o ☎ na calha (contato com telefone), o ✎ anda um alvo para a esquerda:
   3 × 28 + 3 folgas + a borda. A classe vem do template, que é quem sabe se
   há telefone — a folha não tem como contar irmãos absolutos. */
.cartao-liga .cartao-registrar > summary{right:102px}
.cartao-funil:hover .cartao-registrar > summary,
.cartao-funil:focus-within .cartao-registrar > summary,
.cartao-registrar[open] > summary{opacity:1}
.cartao-registrar > summary::before{content:none}
.cartao-registrar > summary:hover,.cartao-registrar[open] > summary{background:var(--tinta);
  color:var(--tinta-acao);border-color:var(--tinta)}
.cartao-registrar > form{display:flex;flex-direction:column;gap:var(--e2);
  margin-top:var(--e2);padding:var(--e2);background:var(--painel2);
  border:1px solid var(--linha);border-radius:var(--r2);text-align:left;cursor:auto}
.cartao-registrar-tipos{display:flex;flex-wrap:wrap;gap:var(--e1)}
.cartao-registrar-tipos label{display:inline-flex;align-items:center;gap:var(--e1);
  min-height:32px;padding:0 var(--e2);border:1px solid var(--linha);border-radius:99px;
  font-size:var(--letra-nota);color:var(--tinta2);cursor:pointer}
.cartao-registrar-tipos input{width:14px;height:14px;margin:0}
.cartao-registrar > form input[type=text]{width:100%}
.cartao-registrar > form button{min-height:var(--toque)}
/* A coluna paga a calha, não o texto: com quatro comandos (dono, 24/09/2026)
   a calha cresceu 32px e o funil volta aos 288 da coluna padrão — em 264 a
   linha da máquina ficava com 98px e "1232708 · 50 cv" saía "1232708 · 50 …"
   em todo cartão, inclusive nos que não têm telefone. Cabe meia coluna a
   menos na tela; a máquina inteira vale mais que ela. */
.quadro-compacto .coluna{width:288px;flex:0 0 288px}
/* --- quatro ações a mais no pé (dono, 24/09/2026) ---------------------------
   dono · etapa · mês · espera. O chip é o `summary`, com a roupa do `.cartao-
   dias` (a única peça do pé que já tinha caixa): 20px no ponteiro fino, 44 no
   toque. A lista abre NO FLUXO — a coluna rola e recorta o que flutua —, e o
   <details> aberto toma a linha inteira para a lista ter largura de cartão. */
.cartao-chip{display:inline-flex;align-items:center;gap:2px;min-height:20px;
  padding:1px var(--e1);border-radius:4px;background:var(--painel3);color:var(--tinta3);
  font-size:11px;font-weight:600;line-height:1;white-space:nowrap;max-width:100%;
  overflow:hidden;text-overflow:ellipsis}
summary.cartao-chip{cursor:pointer}
/* sem o chevron da base: a caixa já diz "aqui abre"; o › fica no fim, menor */
summary.cartao-chip::before{content:none}
summary.cartao-chip::after{content:"›";color:var(--tinta4);font-weight:400}
summary.cartao-chip:hover,.cartao-pe > details[open] > summary.cartao-chip{
  background:var(--painel2);color:var(--tinta);box-shadow:inset 0 0 0 1px var(--linha)}
/* venceu: o mês prometido passou e o negócio continua aberto — vai estourar */
.cartao-chip-atencao{background:var(--atencao-fraco);color:var(--atencao)}
/* espera: classificação sem urgência, sem cor livre */
.cartao-chip-neutro{background:var(--neutro-fraco);color:var(--neutro)}
/* sem dono, sem data, sem espera: o vazio que pede preenchimento, sem gritar */
.cartao-chip-vazio{background:transparent;color:var(--tinta4);
  box-shadow:inset 0 0 0 1px var(--linha-fraca)}
.cartao-pe > details[open]{flex-basis:100%}
.cartao-opcoes{display:flex;flex-wrap:wrap;gap:var(--e1);margin-top:var(--e1);
  padding:var(--e1);background:var(--painel2);border:1px solid var(--linha);
  border-radius:var(--r2);cursor:auto}
/* cada etapa é o seu <form>: o form some do fluxo e o botão vira o item */
.cartao-opcoes > form{display:contents}
.cartao-opcoes button{min-height:var(--toque);padding:0 var(--e2);
  font-size:var(--letra-nota);line-height:1.25;white-space:normal;text-align:center}
/* a etapa/dono/mês atual não é destino: fica na lista para dizer onde está */
.cartao-opcoes button[disabled]{opacity:.55;cursor:default;
  box-shadow:inset 0 0 0 2px var(--linha)}
/* "Perdida" pede motivo: campo e botão na mesma linha, com a linha inteira.
   Mais específico que o `> form{display:contents}` de cima — sem isso o form
   dissolvia e o campo virava um fio ao lado de "Em negociação". */
.cartao-opcoes > .cartao-perder{display:flex;gap:var(--e1);flex-basis:100%}
.cartao-perder input[type=text]{flex:1;min-width:0;font-size:var(--letra-nota)}
/* os chips do filtro por espera vivem na mesma barra de recortes do funil
   (`.funil-recortes .chip`); o embrulho só agrupa, não desenha */
.cartao-filtros-espera{display:contents}
@media (pointer: coarse){
  /* Mesma anatomia, outra densidade: no galpão o dedo com luva precisa de 44px,
     e o cartão cresce para caber o alvo sem cobrir o nome do cliente. */
  .cartao-funil{min-height:132px;padding:12px 12px;
    /* quatro alvos de toque e o respiro entre eles — aqui os comandos ficam
       sempre visíveis, então a calha nunca é opcional: 8 + 4 × 44 + 3 × 4 */
    --cartao-calha:calc(var(--toque) * 4 + 20px)}
  /* os comandos de 44px descem até 52px, e a linha do cliente começava em 46:
     as maiúsculas de "MONDELEZ NORTE NORDESTE" ficavam 6px por baixo dos
     botões. Pôr o cliente na calha cortava o nome em 100px ("MONDEL…"); os
     8px de respiro descem a linha para baixo dos botões e o nome fica inteiro */
  .cartao-cliente{margin-top:var(--e2)}
  .cartao-comandos{opacity:1;top:8px}
  .cartao-comandos button,.cartao-comandos a,.cartao-registrar > summary{
    width:var(--toque);height:var(--toque);font-size:15px}
  /* três comandos de 44 na calha: 2 × 44 + 2 folgas + a borda */
  .cartao-registrar > summary{opacity:1;top:8px;right:104px}
  /* e com o ☎: 3 × 44 + 3 folgas + a borda */
  .cartao-liga .cartao-registrar > summary{right:152px}
  .cartao-agendar > summary,.cartao-chance{min-height:var(--toque)}
  /* os chips do pé viram alvo de dedo; a chance e os chips se alinham */
  .cartao-pe .cartao-chip,.cartao-dias{min-height:var(--toque);
    display:inline-flex;align-items:center}
  .cartao-registrar-tipos label{min-height:var(--toque)}
  /* a calha do toque cresceu 48px (um alvo e a folga), e a coluna cresce
     40: em 300 sobravam 60px para a linha da máquina — "123270…" no tablet */
  .quadro-compacto .coluna{width:340px;flex:0 0 340px}
}
/* a ficha da oportunidade, aberta por URL — não confundir com `.gaveta`, a
   pré-visualização rápida de base.html, que só aparece com `[open]` ligado
   por JavaScript. Esta vem pronta no HTML sempre que `ficha` existe. */
.gaveta-ficha{position:fixed;right:0;top:0;bottom:0;width:min(420px,92vw);z-index:60;
  background:var(--painel);border-left:1px solid var(--linha);
  box-shadow:var(--sombra-alta);padding:calc(16px + var(--topo-seguro)) 16px 16px;overflow:auto}
.gaveta-ficha header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.gaveta-ficha-fechar{width:28px;height:28px;display:flex;align-items:center;
  justify-content:center;border-radius:var(--r2);color:var(--tinta3);
  text-decoration:none}
.gaveta-ficha-fechar:hover{background:var(--painel3);color:var(--tinta)}
.gaveta-ficha dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:16px 0}
.gaveta-ficha dt{font-size:12px;color:var(--tinta3)}
.gaveta-ficha dd{font-size:13px;color:var(--tinta);margin:0}
.gaveta-ficha-acoes{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap}
/* Mover é o comando que tira o negócio do quadro — inclusive para perdida, com
   o motivo ao lado, porque motivo pedido depois nunca é escrito. Fica abaixo
   das ações do dia a dia, e não junto delas: a ordem na tela é a ordem da
   frequência. */
.gaveta-ficha-mover{margin-top:12px;display:flex;gap:8px;align-items:center;
  flex-wrap:wrap}
.gaveta-ficha-mover label{font-size:12px;color:var(--tinta3)}
.gaveta-ficha-mover select{width:auto}
.gaveta-ficha-mover input{flex:1 1 140px;min-width:0}
/* No tablet, a gaveta inteira sobe para o alvo de dedo. Este bloco mora DEPOIS
   das regras acima de propósito: `@media` não soma especificidade, e o ajuste
   escrito antes da regra base perde da base na cascata — foi assim que o ✕
   ficou com 28 px medidos no navegador enquanto a folha dizia `var(--toque)`. */
@media (pointer: coarse){
  /* de luva, o seletor e o campo de motivo da gaveta pedem o mesmo alvo */
  .gaveta-ficha-acoes button,.gaveta-ficha-mover select,
  .gaveta-ficha-mover input,.gaveta-ficha-mover button{min-height:var(--toque)}
  /* o ✕ também: fechar um painel de min(420px,92vw) dependia de 28 px, e quem
     fecha está de luva no mesmo tablet que abriu */
  .gaveta-ficha-fechar{width:var(--toque);height:var(--toque)}
}
/* --- o funil do gerente (dono, 24/09/2026) ---------------------------------
   Soma ponderada no cabeçalho, recortes com contagem e seleção em lote. */
.funil-ponderado{color:var(--tinta3);font-weight:600}
.funil-recortes{display:flex;gap:var(--e2);flex-wrap:wrap;margin-bottom:var(--e4)}
.funil-recortes .chip{text-decoration:none;color:var(--tinta2)}
.funil-recortes .chip.on{color:var(--tinta)}
/* a contagem que o recorte traria: mono, para os quatro alinharem */
.funil-recortes .chip b{font-family:"IBM Plex Mono",monospace;font-size:var(--letra-nota);
  font-weight:600;color:var(--tinta3)}
.funil-recortes .chip.on b{color:var(--tinta)}
/* A caixa do lote, no canto superior esquerdo do cartão. O label é o alvo
   (28×44 no mouse, 44×44 no toque); o quadradinho continua com 18. Fica fraca
   até o mouse passar e SEMPRE visível quando há algo marcado — `:has` na
   folha, `.funil-selecao` no body para navegador sem `:has`. */
.funil-marcar{position:absolute;left:0;top:0;width:28px;height:var(--toque);z-index:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  opacity:.35;transition:opacity .12s}
.funil-marcar input{width:18px;height:18px;margin:0;cursor:pointer;accent-color:var(--tinta)}
.cartao-funil:hover .funil-marcar,.cartao-funil:focus-within .funil-marcar,
.funil-marcar:has(:checked),.funil-selecao .funil-marcar,
.quadro:has(.funil-marcar :checked) .funil-marcar{opacity:1}
/* A calha da caixa: as linhas do cartão recuam para não passar por baixo dela
   — a mesma ideia da calha dos comandos, do outro lado. */
.funil-marcar ~ .cartao-corpo,.funil-marcar ~ .cartao-passo,.funil-marcar ~ .cartao-pe{
  margin-left:var(--e4)}
/* A barra do lote: fixa embaixo, centrada. Sem script fica sempre à vista,
   baixa; com script (`.funil-js`) só com seleção. z-index abaixo da gaveta
   (60) e do `.movendo` (80): é ferramenta, não aviso. */
.funil-lote{position:fixed;left:var(--e4);right:var(--e4);bottom:var(--e4);z-index:45;
  /* `left:50%` + translate dava à barra só meia tela para se medir e ela
     quebrava em três linhas; com as duas bordas e `max-content` ela se mede
     inteira e a margem centra. */
  width:max-content;margin:0 auto;
  display:flex;align-items:center;justify-content:center;gap:var(--e3);flex-wrap:wrap;
  max-width:calc(100vw - var(--e6));padding:var(--e2) var(--e4);
  background:var(--painel);border:1px solid var(--linha);border-radius:var(--r3);
  box-shadow:var(--sombra-alta)}
.funil-js .funil-lote{display:none}
.funil-js .funil-lote.funil-lote-ativa{display:flex}
/* com seleção, a página ganha chão para rolar além da barra */
.funil-selecao main{padding-bottom:calc(var(--e7) + var(--e7))}
.funil-lote-n{font-size:var(--letra-corpo);color:var(--tinta2);white-space:nowrap}
.funil-lote-n b{font-family:"IBM Plex Mono",monospace;color:var(--tinta)}
.funil-lote-grupo{display:inline-flex;align-items:center;gap:var(--e2)}
.funil-lote-grupo > span{font-size:var(--letra-nota);color:var(--tinta3);white-space:nowrap}
.funil-lote select{width:auto;max-width:180px}
/* a tela de confirmar de quem não tem script */
.funil-confirmar-linha{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto;
  gap:var(--e3);align-items:center;min-height:var(--toque);
  padding:var(--e3) var(--e4);border-bottom:1px solid var(--linha-fraca)}
.funil-confirmar-titulo{color:var(--tinta2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.funil-confirmar-marca{font-size:var(--letra-nota);color:var(--tinta3);white-space:nowrap}
.funil-confirmar-acoes{display:flex;gap:var(--e2);padding:var(--e4);flex-wrap:wrap}
@media (pointer: coarse){
  /* de luva, a caixa é um alvo de 44; o texto recua só o que o quadradinho
     pede (ele acaba em 31 px), porque a calha dos comandos, do outro lado,
     já leva 148 px e cada pixel aqui é nome de cliente cortado */
  .funil-marcar{width:var(--toque);opacity:1}
  .funil-marcar ~ .cartao-corpo,.funil-marcar ~ .cartao-passo,.funil-marcar ~ .cartao-pe{
    margin-left:var(--e5)}
}
@media(max-width:900px){
  /* acima da barra do toque (64px + a área segura), de borda a borda */
  .funil-lote{bottom:calc(64px + env(safe-area-inset-bottom) + var(--e2));
    left:var(--e2);right:var(--e2);width:auto;max-width:none}
  .funil-confirmar-linha{grid-template-columns:1fr;gap:var(--e1)}
}
/* fim cartão compacto */

/* Celular: a busca ocupa a largura toda em vez de se espremer na direita. */
@media (max-width:680px){
  .quadro-filtros .chips{margin-left:0;width:100%}
  .quadro-busca{flex:1 1 100%;margin-left:0}
  .quadro-busca-limpa{right:104px}
  .coluna{flex:0 0 86vw;max-height:none}
  /* repetido com a mesma especificidade do funil compacto (0,2,0): sem isto
     a regra de mesa, mais forte, vence a de celular, e a coluna fica com
     264px numa tela de 360px */
  .quadro-compacto .coluna{width:auto;flex:0 0 86vw}
}

/* faixa de instrução do movimento por teclado */
.movendo{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:80;
  background:var(--tinta);color:var(--fundo);border-radius:var(--r2);padding:8px 16px;
  font-size:13px;display:none;gap:16px;align-items:center;box-shadow:var(--sombra-alta)}
/* No toque a barra inferior ocupa o rodapé; o aviso de "movendo" sobe. */
@media(max-width:900px){.movendo{bottom:calc(64px + var(--e4))}}
.movendo[open]{display:flex}
.movendo kbd{font-family:"IBM Plex Mono",monospace;font-size:12px;
  background:rgba(255,255,255,.14);border-radius:4px;padding:1px 4px}

@media (max-width:700px){
  .coluna,.quadro.d-compacta .coluna,.quadro.d-detalhada .coluna{flex:0 0 86vw;max-height:none}
  .quadro-topo{gap:8px}
  .ferramentas{margin-left:0;width:100%}
}

/* ---------- calendário ---------- */
.calendario{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--linha-fraca)}
.calendario .cab-dia{background:var(--painel2);padding:8px 8px;font-size:12px;
  text-transform:uppercase;letter-spacing:.07em;color:var(--tinta3);font-weight:600}
.calendario .dia{background:var(--painel);min-height:106px;padding:4px 8px;
  display:flex;flex-direction:column;gap:3px}
.calendario .dia.fora{background:var(--painel2)}
.calendario .dia.fora .numero{color:var(--tinta4)}
.calendario .dia.hoje{box-shadow:inset 0 0 0 2px var(--indu)}
.calendario .numero{font-family:"IBM Plex Mono",monospace;font-size:13px;
  color:var(--tinta3);font-weight:600}
.calendario .dia.hoje .numero{color:var(--indu-forte)}
.calendario .compromisso{display:flex;align-items:center;gap:4px;font-size:12px;
  line-height:1.3;padding:2px 4px;border-radius:4px;background:var(--painel2);
  color:var(--tinta2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calendario .compromisso:hover{background:var(--painel3);text-decoration:none}
.calendario .marca{width:5px;height:5px;border-radius:50%;flex:none}
.calendario .t-neutro .marca{background:var(--neutro)}
.calendario .t-atencao .marca{background:var(--atencao)}
.calendario .t-critico .marca{background:var(--critico)}
.calendario .t-critico{color:var(--critico)}
.calendario .t-bloqueio .marca{background:var(--bloqueio)}
.calendario .mais-dia{font-size:12px;color:var(--tinta4);padding-left:4px}
.ponto{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:4px}
.ponto.t-neutro{background:var(--neutro)} .ponto.t-atencao{background:var(--atencao)}
.ponto.t-critico{background:var(--critico)} .ponto.t-bloqueio{background:var(--bloqueio)}
@media (max-width:700px){.calendario .dia{min-height:74px}
  .calendario .compromisso{font-size:12px}}

/* ------------------------------------------------------------------ PCP */
.pcp-gargalo{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.pcp-gargalo .r{font-size:12px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--tinta3);font-weight:600;display:block}
.pcp-nome{font-size:28px;font-weight:700;letter-spacing:-.03em;margin-top:3px}
.pcp-nota{font-size:13px;color:var(--tinta3);margin:8px 0 0;max-width:62ch}
.pcp-numero{text-align:right;padding-left:24px;border-left:1px solid var(--linha-fraca);
  min-width:150px}
.pcp-numero .v{font-family:"IBM Plex Mono",monospace;font-size:34px;font-weight:700;
  letter-spacing:-.04em;line-height:1;display:block}
.pcp-numero .n{font-size:13px;color:var(--tinta3);display:block;margin-top:4px}
.pcp-numero.critico .v{color:var(--critico)}
.pcp-numero.atencao .v{color:var(--atencao)}
.pcp-numero.ok .v{color:var(--ok)}

.pcp-linha{display:grid;grid-template-columns:190px 1fr 84px;gap:12px;align-items:center;
  padding:8px 16px;border-bottom:1px solid var(--linha-fraca)}
.pcp-linha:last-of-type{border-bottom:0}
/* Clean 4a: o gargalo é a palavra em peso, sem fundo coral. */
.pcp-linha.e-gargalo{background:transparent}
/* `.quem` solto é o nome do usuário na barra do topo: flex, sem quebra e
   empurrado à direita. Aqui ele é o rótulo da linha e precisa desfazer as três
   coisas — herdadas, elas jogavam a receita para fora do cartão no /resultado. */
.pcp-linha .quem{display:block;margin-left:0;white-space:normal;min-width:0}
.pcp-linha .quem strong{font-size:13px;display:block}
.pcp-linha .quem span{font-size:12px;color:var(--tinta4)}
.pcp-linha .quem b{color:var(--tinta);font-weight:600}
.pcp-linha .barras{height:9px;position:relative}
.pcp-linha .barras .trilha{position:absolute;inset:0;border-radius:var(--r1);
  background:var(--linha-fraca);display:flex;overflow:hidden}
.pcp-linha .barras i{display:block;height:100%;flex:none;min-width:0}
.pcp-linha .barras .firme{background:var(--ok)}
.pcp-linha .barras .prov{background:var(--ok);opacity:.42}
.pcp-linha .barras .bloq{background:var(--bloqueio)}
.pcp-linha .barras .teto{position:absolute;top:-4px;bottom:-4px;width:2px;
  background:var(--tinta4)}
.pcp-linha .n{font-family:"IBM Plex Mono",monospace;font-size:15px;font-weight:600;
  text-align:right}
.pcp-linha .n em{display:block;font-style:normal;font-size:12px;font-weight:400;
  color:var(--tinta4)}
.pcp-linha .n.critico{color:var(--critico)}
.pcp-linha .n.atencao{color:var(--atencao)}
.pcp-linha.diag .barras{background:transparent}
/* A linha de diagnóstico responde "quanto DESTA fila está travado". A linha de
   simulação, logo acima, responde "quanto da capacidade está tomado". As duas
   reusam as mesmas classes e querem tintas opostas — e a de diagnóstico estava
   usando a da outra.

   O efeito na base real: `taxa_bloqueio` zero em todas as colunas, logo
   `.firme` em 100% e nove barras verdes cheias de ponta a ponta, uma embaixo
   da outra, sob um título que pergunta *por que a coluna está cheia*. Verde
   sólido ocupando a largura inteira é o desenho universal de **lotado**, e
   aqui ele queria dizer exatamente o contrário: nada travado em lugar nenhum.
   E as nove tinham o mesmo comprimento ao lado de números de 110 a 1.

   Aqui quem leva tinta é o bloqueio, que é o que a pergunta procura. O resto é
   trilha: fila sem travamento fica clara, e a coluna que tem 40% de bloqueio
   mostra 40% de roxo que se lê do outro lado da mesa. */
.pcp-linha.diag .barras .firme{background:var(--linha)}

.legenda{font-size:12px;color:var(--tinta3);display:inline-flex;align-items:center;gap:4px}
.legenda .sw{width:9px;height:9px;border-radius:3px;display:inline-block}
.legenda .sw.firme{background:var(--ok)}
.legenda .sw.prov{background:var(--ok);opacity:.42}
.legenda .sw.bloq{background:var(--bloqueio)}
.legenda .sw.cheio{background:var(--critico);opacity:.6}

.pcp-rodape{font-size:13px;color:var(--tinta4);padding:12px 16px 12px;margin:0;
  max-width:78ch;line-height:1.55}
.pcp-cli{color:var(--tinta4);font-size:13px;display:block}
.pcp-sem{color:var(--tinta4)}

.pcp-form{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;
  color:var(--tinta2)}
.pcp-form label{display:inline-flex;align-items:center;gap:8px}
.pcp-form input{width:82px;padding:8px 8px;font-family:"IBM Plex Mono",monospace;
  font-size:15px;border:1px solid var(--painel2);border-radius:var(--r2);
  background-color:var(--painel2);color:var(--tinta)}
.pcp-limpar{font-size:13px;color:var(--tinta4)}

.pcp-sim{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;
  margin-top:16px}
.pcp-sim .cx{border:1px solid var(--linha);border-radius:var(--r3);padding:12px 16px;
  background:var(--painel2)}
.pcp-sim .cx .r{font-size:12px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--tinta3);font-weight:600}
.pcp-sim .cx .v{font-family:"IBM Plex Mono",monospace;font-size:28px;font-weight:700;
  letter-spacing:-.03em;margin:4px 0 4px}
.pcp-sim .cx p{font-size:13px;color:var(--tinta3);margin:0;line-height:1.5}
.pcp-sim .cx.ok{background:var(--ok-fraco);border-color:var(--ok)}
.pcp-sim .cx.ok .v{color:var(--ok)}
.pcp-sim .cx.critico{background:var(--critico-fraco);border-color:var(--critico)}
.pcp-sim .cx.critico .v{color:var(--critico)}
.pcp-sim .cx.atencao .v{color:var(--atencao)}

@media (max-width:760px){
  .pcp-gargalo{grid-template-columns:1fr}
  .pcp-numero{padding:12px 0 0;border-left:0;border-top:1px solid var(--linha-fraca);
    text-align:left}
  .pcp-linha{grid-template-columns:1fr 64px;row-gap:8px}
  .pcp-linha .barras{grid-column:1/-1}
}

/* ------------------------------------------------------- BANCADA (celular) */
/* Alvos grandes, uma coluna, nada que dependa de precisão do dedo. A mão que
   toca esta tela está com luva ou com graxa. */
.bancada{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
/* A volta é o único caminho para fora da bancada no tablet, e media 20px de
   altura. Vira alvo de dedo sem ganhar peso visual: o respiro cresce à
   esquerda, para o toque, e o texto continua no seu lugar. */
.bancada .volta{font-size:13px;color:var(--tinta3);align-self:flex-start;
  display:inline-flex;align-items:center;min-height:var(--toque);
  padding-right:var(--e3)}
.bancada .volta:hover{color:var(--indu-forte)}
.bancada .cabeca .onde{display:flex;gap:8px;flex-wrap:wrap;font-size:13px;
  color:var(--tinta3);margin-bottom:4px}
.bancada .cabeca .onde a{color:var(--indu-forte)}
.bancada h1{font-size:22px;letter-spacing:-.02em;line-height:1.25;margin:0 0 12px;
  text-wrap:balance}
.bancada .maquina{display:flex;flex-direction:column;gap:2px;font-size:13px;
  color:var(--tinta3);border-top:1px solid var(--linha-fraca);padding-top:12px}
.bancada .maquina strong{font-size:15px;color:var(--tinta)}
.bancada .maquina .mono{font-size:13px;color:var(--tinta3)}

/* Sem sombra, de propósito. O botão da bancada está no fluxo da página, não
   flutuando sobre ela: sombra aqui é decoração, e o contrato da folha reserva
   elevação para gaveta, modal, menu e paleta. O que faz este botão ser o
   primeiro da tela é ele ser o único preenchido de coral e ocupar a largura
   toda — não um halo cinza que, sob a luz do galpão, vira sujeira no vidro. */
.acaogrande{width:100%;padding:16px;font-size:15px;font-weight:600;border:0;
  border-radius:var(--r3);background:var(--acao);color:var(--tinta-acao);cursor:pointer}
.acaogrande:hover{background:var(--acao-hover)}
.acaogrande.ok{background:var(--acao-ok)}
.acaogrande.ok:hover{background:var(--acao-ok-hover)}

.bancada .dica{font-size:13px;color:var(--tinta4);line-height:1.55;margin:0;
  padding:0 2px}
.bancada .bloco{margin-bottom:0}

.andamento{display:flex;align-items:center;gap:12px;background:var(--info-fraco);
  border:1px solid var(--info);border-radius:var(--r3);padding:12px 16px;font-size:13px;
  color:var(--info)}
.andamento .pulso{width:9px;height:9px;border-radius:50%;background:var(--info);
  flex:none;animation:pulsa 1.9s ease-in-out infinite}
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.andamento .pulso{animation:none}}

.feito{display:flex;align-items:center;gap:12px;background:var(--ok-fraco);
  border:1px solid var(--ok);border-radius:var(--r3);padding:12px 16px;color:var(--ok)}
.feito .ic{font-size:18px;flex:none}
.feito strong{display:block;font-size:15px}
.feito span{font-size:13px;opacity:.85}

.medir,.travar form{display:flex;flex-direction:column;gap:12px}
.medir label,.travar label{display:flex;flex-direction:column;gap:4px;font-size:13px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--tinta3);font-weight:600}
.medir input,.medir select,.travar input,.travar select{padding:12px;font-size:18px;
  border:1px solid var(--painel2);border-radius:var(--r3);background-color:var(--painel2);
  color:var(--tinta);text-transform:none;letter-spacing:0;font-weight:400}
.medir label.grande{position:relative}
.medir label.grande input{font-family:"IBM Plex Mono",monospace;font-size:28px;
  font-weight:600;padding:16px 48px 16px 16px;letter-spacing:-.02em}
.medir label.grande em{position:absolute;right:15px;bottom:20px;font-style:normal;
  font-size:15px;color:var(--tinta4);font-family:"IBM Plex Mono",monospace}
.medir button,.travar button{padding:16px;font-size:15px;font-weight:600;border:0;
  border-radius:var(--r3);background:var(--tinta);color:var(--painel);cursor:pointer}
.travar button.perigo{background:var(--bloqueio);color:var(--tinta-acao)}

.foto .camera{display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:24px;border:1.5px dashed var(--linha);border-radius:var(--r3);cursor:pointer;
  color:var(--tinta3);font-size:15px;text-align:center}
.foto .camera:hover{border-color:var(--indu);color:var(--indu-forte)}
.foto .camera input{position:absolute;width:1px;height:1px;opacity:0;
  clip:rect(0 0 0 0);overflow:hidden}
.foto .camera .ic{font-size:22px}

.tiras{display:flex;gap:8px;padding:0 16px 16px;overflow-x:auto}
.tira{flex:none;width:88px;height:88px;border-radius:var(--r2);overflow:hidden;
  border:1px solid var(--linha);background:var(--painel2)}
.tira img{width:100%;height:100%;object-fit:cover;display:block}

.trava{background:var(--atencao-fraco);border:1px solid var(--atencao);
  border-radius:var(--r3);padding:16px 16px;color:var(--atencao);font-size:13px}
.trava strong{display:block;margin-bottom:8px;font-size:15px}
.trava ul{margin:0 0 8px;padding-left:16px}
.trava li{margin:2px 0}
.trava > span{font-size:13px;opacity:.85;line-height:1.55;display:block}

details.travar{background:var(--painel);border:1px solid var(--linha);color:inherit}
details.travar summary{cursor:pointer;font-size:13px;color:var(--tinta3);
  font-weight:600;list-style:none}
details.travar summary::-webkit-details-marker{display:none}
details.travar summary::before{content:"⛔  "}
details.travar[open] summary{margin-bottom:12px;color:var(--bloqueio)}
details.travar form{margin-bottom:12px}
/* "Não consigo continuar" (13/10/2026): caixas grandes, de luva. */
.parar-motivos{border:0;margin:0;padding:0;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.parar-motivos legend{font-size:13px;font-weight:600;color:var(--tinta3);
  margin-bottom:8px;padding:0}
.travar label.parar-motivo{flex-direction:row;align-items:center;gap:12px;min-height:56px;
  padding:8px 16px;border:1.5px solid var(--linha);border-radius:var(--r3);cursor:pointer;
  font-size:16px;text-transform:none;letter-spacing:0;font-weight:600;color:var(--tinta);
  background:var(--painel)}
.travar label.parar-motivo input{width:24px;height:24px;padding:0;flex:none;
  accent-color:var(--bloqueio)}
.travar label.parar-motivo:has(input:checked){border-color:var(--bloqueio);
  background:var(--atencao-fraco)}
.travar .com-detalhe summary::before{content:"+  "}

@media (max-width:700px){
  .bancada{gap:12px}
  .bancada h1{font-size:18px}
  .tiras{padding:0 12px 12px}
}

/* fila: o que ainda falta na etapa, dito antes do toque e não depois */
.tarefa .meta .pendente{color:var(--atencao)}
.tarefa .meta .andando{color:var(--info);font-weight:600}
a.marca-check.pede{display:grid;place-items:center;text-decoration:none;
  color:var(--atencao);border-color:var(--atencao);font-size:15px}
a.marca-check.pede:hover{background:var(--atencao);color:var(--painel)}
a.nome{color:inherit}
a.nome:hover{color:var(--indu-forte)}

/* ------------------------------------------------------------- ACESSOS */
/* (Clean 4b, 06/10/2026) as regras exclusivas da Administração moram em telas/administracao.css */
/* Caixa de marcar em forma de chip. As declarações de direção e de caixa não são
   redundantes: `.chip-caixa` vive dentro de `.modelo-form`, que estiliza os
   próprios `label` — e o "É retorno" da tela de receber virava uma caixa larga
   com o quadradinho equilibrado em cima do texto. É a armadilha de cascata que
   o DESIGN.md descreve, vista de perto: ninguém erra, a regra certa só perde. */
.chip-caixa{display:inline-flex;flex-direction:row;align-items:center;gap:var(--e2);
  border:1px solid var(--linha);border-radius:99px;min-height:var(--toque);
  padding:0 var(--e4);font-size:var(--letra-corpo);text-transform:none;
  letter-spacing:0;cursor:pointer;color:var(--tinta2)}
.chip-caixa:has(input:checked){border-color:var(--indu);background:var(--indu-fraco);
  color:var(--indu-forte);font-weight:600}
.chip-caixa input{width:18px;height:18px;min-height:0;accent-color:var(--indu);flex:none}
.troca select{width:auto;padding:8px 8px;font-size:13px}
.tecnico{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--tinta4)}

.acaogrande.sair{background:var(--neutro)}
.acaogrande.sair:hover{filter:brightness(1.1)}
.passagem{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;
  padding:8px 16px;border-bottom:1px solid var(--linha-fraca);font-size:13px}
.passagem:last-of-type{border-bottom:0}
.passagem.aberta{background:var(--info-fraco)}
.passagem strong{display:block;font-size:15px}
.passagem span{font-size:13px;color:var(--tinta3)}
.passagem .quando{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--tinta3)}
.passagem .h{font-family:"IBM Plex Mono",monospace;font-weight:600;text-align:right}
.passagem .h em{display:block;font-style:normal;font-size:12px;font-weight:400;
  color:var(--atencao)}

/* tablet: onde a pessoa está agora abre a tela */
.onde-estou{display:flex;align-items:center;gap:12px;padding:16px 16px;
  border-radius:var(--r3);background:var(--info-fraco);border:1px solid var(--info);
  color:var(--info);margin-bottom:16px;text-decoration:none}
.onde-estou .pulso{width:10px;height:10px;border-radius:50%;background:var(--info);
  flex:none;animation:pulsa 1.9s ease-in-out infinite}
.onde-estou .rot{display:block;font-size:12px;text-transform:uppercase;
  letter-spacing:.08em;font-weight:700;opacity:.8}
.onde-estou strong{display:block;font-size:15px;letter-spacing:-.01em;margin:1px 0}
.onde-estou .onde{display:block;font-size:13px;opacity:.85}
.onde-estou .h{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:22px;
  font-weight:700;white-space:nowrap}
.onde-estou.vazio-ponto{background:var(--painel);border-color:var(--linha);
  color:var(--tinta3)}
.onde-estou.vazio-ponto strong{color:var(--tinta)}
.onde-estou .marca-nada{font-size:18px;opacity:.5}
/* Depois do check-out, o próximo da fila em coral: é trabalho que espera a
   pessoa, não o lugar onde ela está (dono, 27/09/2026). */
.onde-estou.fila-proximo{background:var(--indu-fraco);border-color:var(--indu);
  color:var(--indu-forte)}
.onde-estou.fila-proximo .pulso{background:var(--indu)}
.onde-estou.fila-proximo strong{font-size:var(--letra-forte);color:var(--tinta)}
.onde-estou.fila-proximo .h{font-family:inherit;font-size:var(--letra-corpo)}
a.passagem{text-decoration:none;color:inherit}
a.passagem:hover{background:var(--painel2)}

/* ------------------------------------------------------- PROGRAMAÇÃO */
table.prog th.quem{text-align:left;font-weight:600;font-size:13px;min-width:170px}
table.prog th.quem span{display:block;font-size:12px;color:var(--tinta4);
  font-weight:400}
table.prog thead th{text-align:center;font-size:12px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--tinta3);padding:8px 4px}
table.prog thead th span{display:block;font-family:"IBM Plex Mono",monospace;
  font-size:13px;color:var(--tinta4);letter-spacing:0;text-transform:none}
table.prog thead th.hoje{color:var(--tinta);font-weight:600}
table.prog tr.e-gargalo{background:transparent}
.celula{position:relative;height:38px;width:52px;padding:0;
  border-left:1px solid var(--linha-fraca);vertical-align:bottom;text-align:center}
.celula .preenche{position:absolute;left:3px;right:3px;bottom:0;border-radius:3px;
  background:var(--ok);opacity:.55}
.celula.cheia .preenche{background:var(--critico);opacity:.5}
.celula .h{position:relative;font-family:"IBM Plex Mono",monospace;font-size:13px;
  font-weight:600;line-height:38px;display:block}

.dias-lado{display:flex;gap:12px;padding:16px 16px}
.dia-col{flex:0 0 190px;display:flex;flex-direction:column;gap:8px}
.dia-col .topo{font-size:13px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--tinta3);font-weight:700;display:flex;justify-content:space-between;
  padding-bottom:4px;border-bottom:1px solid var(--linha)}
.dia-col .topo span{font-family:"IBM Plex Mono",monospace;color:var(--tinta4)}
/* Sem trilho por padrão. Ele era `--info`, que nesta paleta quer dizer
   *característica técnica da máquina* — não "bloco comum de programação". Cor
   emprestada de outro significado é pior que cor nenhuma. Agora o trilho só
   aparece no que é urgente, e por isso ele é visto. */
.bloco-prog{display:block;padding:8px 12px;border-radius:var(--r2);background:var(--painel2);
  border-left:3px solid transparent;text-decoration:none;color:inherit}
.bloco-prog:hover{background:var(--painel3)}
.bloco-prog.urgente{border-left-color:var(--critico)}
.bloco-prog strong{display:block;font-size:13px;letter-spacing:-.01em}
.bloco-prog .mono{font-size:12px;color:var(--tinta4)}
.bloco-prog .et{display:block;font-size:13px;color:var(--tinta3);margin-top:2px}
.bloco-prog .h{display:block;font-family:"IBM Plex Mono",monospace;font-size:13px;
  font-weight:600;margin-top:3px}

/* Botão de tema: dois estados, não três. O terceiro era "seguir o sistema", e
   ele existia enquanto a folha não tinha padrão próprio. Agora tem: claro é o
   padrão do produto, porque o tablet do galpão é lido sob luz forte. Quem quer
   escuro pede escuro — e o ícone mostra o que o toque vai acender, não o que
   já está aceso. */
.botao-tema{width:var(--toque);height:var(--toque);padding:0;border-radius:var(--r2);
  flex:none;background:transparent;border:0;color:var(--tinta2);
  cursor:pointer;display:grid;place-items:center;font-size:18px;line-height:1}
.botao-tema:hover{background:var(--painel2);color:var(--tinta)}
/* O botão de ajuda tem a mesma roupa do tema e é o primeiro à direita: é ele
   que empurra o grupo para a borda. */
.botao-barra{width:var(--toque);height:var(--toque);border-radius:var(--r2);flex:none;
  background:transparent;border:0;color:var(--tinta2);
  display:grid;place-items:center;margin-left:auto;
  transition:background var(--t1) var(--curva),color var(--t1) var(--curva)}
.botao-barra:hover{background:var(--painel2);color:var(--tinta)}
.botao-barra.ativo{color:var(--tinta);background:var(--painel2)}
/* "+ Novo": o que se cria todo dia, à esquerda da busca. É o único
   preenchimento coral da barra, e é por isso que se acha sem ler. */
/* Clean: "+ Novo" é secundário (campo cheio) — o primário da tela é dela. */
.novo-menu > summary.novo-botao{gap:var(--e1);padding:0 var(--e3) 0 var(--e2);
  cursor:pointer;font-weight:500;border-radius:var(--r2);min-height:var(--toque);
  background:var(--painel2);color:var(--tinta)}
.novo-menu > summary.novo-botao:hover{background:var(--painel3)}
.novo-menu > summary::before{content:none}
.novo-menu > .lista{left:0;right:auto}
.novo-menu .lista svg.ic{color:var(--tinta3)}
/* A conta da pessoa: nome em cima, perfil embaixo, e o que era rodapé do
   trilho (senha, aparelhos, sair) dentro do menu. */
.quem-menu > summary.quem{cursor:pointer;flex-direction:column;align-items:flex-end;
  gap:0;line-height:1.25;padding:0 var(--e2);border-radius:var(--r2);min-height:var(--toque)}
.quem-menu > summary::before{content:none}
.quem-menu > summary:hover{background:var(--painel2)}
.quem-menu small{color:var(--tinta3)}

.botao-tema span{display:none;grid-area:1/1}
.botao-tema span[data-quando="escuro"]{display:block}
:root[data-tema="escuro"] .botao-tema span[data-quando="escuro"]{display:none}
:root[data-tema="escuro"] .botao-tema span[data-quando="claro"]{display:block}
.barra .quem{margin-left:var(--e2)}

/* -------------------------------------------------------- CONFIGURAÇÃO */
/* (Clean 4b, 06/10/2026) as regras exclusivas da Administração moram em telas/administracao.css */
button.mini{padding:8px 12px;font-size:13px;font-weight:600;border:1px solid var(--linha);
  border-radius:var(--r2);background:var(--painel2);color:var(--tinta2);cursor:pointer}
button.mini:hover{background:var(--indu);color:var(--tinta-acao);border-color:var(--indu)}
.linha-form{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;
  padding:12px 16px;border-top:1px solid var(--linha-fraca)}
.linha-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--tinta3);font-weight:600}
.linha-form label.caixa{flex-direction:row;align-items:center;gap:8px;
  text-transform:none;letter-spacing:0;font-size:13px}
.linha-form input,.linha-form select{padding:var(--e2) var(--e3);font-size:var(--letra-corpo);
  border:1px solid var(--painel2);border-radius:var(--r2);background-color:var(--painel2);
  color:var(--tinta);text-transform:none;letter-spacing:0;font-weight:400}
.linha-form button{padding:8px 16px;font-size:13px;font-weight:600;border:0;
  border-radius:var(--r2);background:var(--indu);color:var(--tinta-acao);cursor:pointer}
details.servico-edit > summary{display:flex;align-items:center;gap:12px;
  padding:12px 16px;cursor:pointer;list-style:none;font-size:15px}
details.servico-edit > summary::-webkit-details-marker{display:none}
details.servico-edit > summary::before{content:"▸";color:var(--tinta4);font-size:13px}
details.servico-edit[open] > summary::before{content:"▾"}
details.servico-edit > summary .direita{margin-left:auto;display:flex;gap:8px}
details.servico-edit[open] > summary{border-bottom:1px solid var(--linha-fraca)}

/* aceite da atribuição: a primeira coisa que a pessoa vê no tablet */
.aceite{background:var(--indu-fraco);border:1.5px solid var(--indu);border-radius:var(--r3);
  padding:16px;display:flex;flex-direction:column;gap:12px}
.aceite .cabeca strong{display:block;font-size:15px;color:var(--indu-forte)}
.aceite .cabeca span{font-size:13px;color:var(--tinta3)}
.aceite details.recusa{background:transparent;border:0;padding:0}
.aceite details.recusa summary{cursor:pointer;font-size:13px;color:var(--tinta3);
  list-style:none;text-align:center}
.aceite details.recusa summary::-webkit-details-marker{display:none}
.aceite details.recusa[open] summary{margin-bottom:12px}
.aceite details.recusa form{display:flex;flex-direction:column;gap:12px}
.aceite details.recusa label{display:flex;flex-direction:column;gap:4px;font-size:13px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--tinta3);font-weight:600}
.aceite details.recusa input,.aceite details.recusa select{padding:12px;font-size:15px;
  border:1px solid var(--painel2);border-radius:var(--r2);background-color:var(--painel2);
  color:var(--tinta);text-transform:none;letter-spacing:0;font-weight:400}
.aceite details.recusa button{padding:12px;font-size:15px;font-weight:600;border:0;
  border-radius:var(--r2);background:var(--bloqueio);color:var(--tinta-acao);cursor:pointer}
.atribuida-a{display:flex;align-items:center;gap:12px;padding:12px 16px;
  border:1px solid var(--linha);border-radius:var(--r3);background:var(--painel)}
.atribuida-a .ic{color:var(--tinta4)}
.atribuida-a strong{display:block;font-size:15px}
.atribuida-a span{font-size:13px;color:var(--tinta3)}
details.travar.atribuir summary::before{content:"◍  "}
details.travar.atribuir[open] summary{color:var(--indu-forte)}
details.travar.atribuir button{background:var(--indu);color:var(--tinta-acao)}
.aceite.fila{margin-bottom:12px}
/* A faixa "chegou serviço para você", que `avisos.js` põe no topo do conteúdo
   quando o sino traz passagem nova — sem recarregar a página. Coral cheio,
   como o nome piscando na TV: é a mesma notícia nos dois lugares. */
.aviso-chegou{display:flex;align-items:center;gap:var(--e3);margin:0 0 var(--e4);
  padding:var(--e3) var(--e4);border-radius:var(--r3);background:var(--indu);color:#fff;
  font-size:15px;font-weight:600;box-shadow:var(--sombra-alta)}
.aviso-chegou a{color:#fff;text-decoration:underline;flex:1;min-width:0}
.aviso-chegou a small{display:block;font-weight:400;opacity:.9}
.aviso-chegou button{flex:none;min-width:44px;min-height:44px;border:0;border-radius:var(--r2);
  background:rgba(255,255,255,.18);color:#fff;font-size:18px;cursor:pointer}
.aviso-chegou button:hover{background:rgba(255,255,255,.3)}
.passagem.recusada{background:var(--atencao-fraco)}
.passagem.recusada .h{color:var(--atencao)}
.troca{display:flex;gap:8px;align-items:center}
.troca input{width:150px;padding:8px 8px;font-size:var(--letra-nota);border:1px solid var(--painel2);
  border-radius:var(--r2);background-color:var(--painel2);color:var(--tinta)}

/* modelo de proposta: formulário de texto longo */
.modelo-form{display:flex;flex-direction:column;gap:12px}
/* `:not(.chip-caixa)` porque o formulário veste os rótulos dele, não um
   componente que por acaso é um `label`. Sem a exceção, a regra do contêiner
   vence a do componente — e vence em silêncio, três telas adiante. */
/* Rótulo de campo sai da caixa alta. A caixa alta serve a rótulo de duas ou três
   palavras — `.tag`, `th`, cabeçalho de grade — onde a forma da palavra não faz
   falta. Aqui ela vinha caindo em frases: "COMO CHEGOU — UMA ETIQUETA PARA CADA
   MARCADA", cinquenta e dois caracteres sem maiúscula nem descida para o olho
   se apoiar. O que separa o rótulo do resto passa a ser peso e tinta, que é o
   que separava de qualquer jeito. */
.modelo-form label:not(.chip-caixa){display:flex;flex-direction:column;gap:4px;
  font-size:var(--letra-nota);letter-spacing:0;
  color:var(--tinta2);font-weight:600}
/* Campo cheio como a base (06/11/2026): a borda cinza + fundo branco daqui
   era a "cara de sistema antigo" (B-031) em toda tela que usa .modelo-form. */
.modelo-form input,.modelo-form textarea{padding:12px 12px;font-size:var(--letra-corpo);
  border:1px solid var(--painel2);border-radius:var(--r2);background-color:var(--painel2);
  color:var(--tinta);text-transform:none;letter-spacing:0;font-weight:400;
  font-family:inherit;line-height:1.5;resize:vertical}
.modelo-form textarea{min-height:64px}
.modelo-form label em{font-style:normal;text-transform:none;letter-spacing:0;
  font-weight:400;font-size:13px;color:var(--tinta4)}
.modelo-form .dupla{display:grid;grid-template-columns:1fr 140px;gap:12px}
.modelo-form .acoes{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding-top:4px}
.modelo-form .acoes button{padding:12px 24px;font-size:15px;font-weight:600;border:0;
  border-radius:var(--r2);background:var(--indu);color:var(--tinta-acao);cursor:pointer}
.barra-proposta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:16px}
.barra-proposta form{display:flex;gap:8px;align-items:center}
.barra-proposta select{width:auto;padding:8px 12px;font-size:13px}
.barra-proposta button{padding:8px 16px;font-size:13px;font-weight:600;border:0;
  border-radius:var(--r2);background:var(--painel2);color:var(--tinta2);cursor:pointer;
  border:1px solid var(--linha)}
.barra-proposta button:hover{background:var(--indu);color:var(--tinta-acao);border-color:var(--indu)}
.barra-proposta .tecnico{margin-left:auto}

/* ------------------------------------------------------------- METAS */
.meta-linha{display:grid;grid-template-columns:210px 1fr 140px 128px;gap:16px;
  align-items:center;padding:12px 16px;border-bottom:1px solid var(--linha-fraca)}
.meta-linha:last-of-type{border-bottom:0}
/* O `.quem` global é o nome na barra do topo (flex, sem quebra, à direita).
   Herdado aqui, "Indústria de alimentos e bebidas" e "Receita fechada" ficavam
   lado a lado numa linha só, e a barra passava por cima do rótulo. */
.meta-linha .quem{display:block;margin-left:0;white-space:normal;min-width:0}
.meta-linha .quem strong{font-size:15px;display:block}
.meta-linha .quem span{font-size:12px;color:var(--tinta4)}
.barra-meta{height:8px;border-radius:4px;background:var(--linha-fraca);overflow:hidden}
.barra-meta i{display:block;height:100%;background:var(--ok);border-radius:4px}
.meta-linha.atencao .barra-meta i{background:var(--atencao)}
.meta-linha.sem_funil .barra-meta i{background:var(--critico)}
.meta-linha.batida .barra-meta i{background:var(--ok)}
.meta-linha .n{text-align:right;font-family:"IBM Plex Mono",monospace}
.meta-linha .n strong{font-size:15px;font-variant-numeric:tabular-nums}
.meta-linha .n em{display:block;font-style:normal;font-size:12px;color:var(--tinta4);
  font-weight:400}
.meta-linha .acao-meta{text-align:right}
.meta-linha .ritmo{font-family:"IBM Plex Mono",monospace;font-size:15px;
  font-weight:600;display:block}
.meta-linha .ritmo em{display:block;font-style:normal;font-size:12px;
  font-family:"IBM Plex Sans",sans-serif;color:var(--tinta4);font-weight:400}
@media (max-width:820px){
  .meta-linha{grid-template-columns:1fr auto;row-gap:8px}
  .barra-meta{grid-column:1/-1}
}
.acoes-pessoa{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
button.mini.perigo{color:var(--critico);border-color:var(--critico-fraco)}
button.mini.perigo:hover{background:var(--critico);color:var(--tinta-acao);border-color:var(--critico)}
/* (Clean 4b, 06/10/2026) as regras exclusivas da Administração moram em telas/administracao.css */

/* Cadastro de pessoa e de perfil: grade que cabe numa linha no desktop e
   empilha no tablet. O cadastro é a primeira coisa da tela porque é a primeira
   coisa que se faz nela. */
.grade-cadastro{display:grid;gap:12px;align-items:end;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.grade-cadastro label{display:flex;flex-direction:column;gap:4px;font-size:13px;
  color:var(--tinta2);font-weight:600}
.grade-cadastro label small{font-weight:400;color:var(--tinta4)}
.grade-cadastro input,.grade-cadastro select{padding:var(--e2) var(--e3);border-radius:var(--r2);
  border:1px solid var(--painel2);background-color:var(--painel2);color:var(--tinta);
  font-size:var(--letra-corpo);font-family:inherit;width:100%}
.grade-cadastro button{align-self:end;min-height:var(--toque);white-space:nowrap}
/* Senha na própria linha da pessoa: campo estreito, sem quebrar a coluna. */
.senha-linha{display:flex;gap:4px;align-items:center}
.senha-linha input{width:120px;padding:4px 8px;border-radius:var(--r1);
  border:1px solid var(--painel2);background-color:var(--painel2);color:var(--tinta);
  font-size:13px;font-family:inherit}

/* "Não consigo continuar": um botão por motivo, grandes, sem digitar nada.
   Quem está parado com a luva na mão não escreve justificativa. */
.motivos-bloqueio{display:grid;gap:8px;margin:12px 0;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.motivos-bloqueio button.motivo{width:100%;min-height:52px;font-size:15px;
  background:var(--painel2);color:var(--tinta);border:1px solid var(--linha);
  font-weight:600}
.motivos-bloqueio button.motivo:hover{border-color:var(--critico);
  color:var(--critico)}
.com-detalhe summary{font-size:13px;color:var(--tinta4);cursor:pointer;padding:4px 0}
.uma-necessidade{display:flex;gap:16px;justify-content:space-between;
  align-items:flex-start;flex-wrap:wrap;padding:8px 0;
  border-bottom:1px solid var(--linha-fraca)}
.uma-necessidade:last-of-type{border-bottom:0}
.uma-necessidade.recusada{opacity:.55}
.uma-necessidade .o-que{flex:1;min-width:240px;display:flex;gap:8px;
  align-items:center;flex-wrap:wrap}
.uma-necessidade .o-que p{width:100%;margin:2px 0 0}
.uma-necessidade .decidir{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.uma-necessidade .recusa{display:flex;gap:4px}
.uma-necessidade .recusa input{padding:4px 8px;border-radius:var(--r1);font-size:13px;
  border:1px solid var(--painel2);background-color:var(--painel2);color:var(--tinta);
  font-family:inherit;width:150px}
.nova-necessidade summary{cursor:pointer;font-size:15px;font-weight:600;
  color:var(--indu-forte);padding:12px 0 4px}
.grade-necessidade{display:grid;gap:8px;align-items:end;margin-top:8px;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.grade-necessidade label{display:flex;flex-direction:column;gap:4px;font-size:13px;
  font-weight:600;color:var(--tinta2)}
.grade-necessidade label small{font-weight:400;color:var(--tinta4)}
.grade-necessidade input,.grade-necessidade select{padding:var(--e2);border-radius:var(--r2);
  border:1px solid var(--painel2);background-color:var(--painel2);color:var(--tinta);
  font-size:var(--letra-corpo);font-family:inherit;width:100%}
.chip-caixa.urgente span{font-weight:600}

/* ------------------------------------------------------------------------- *
   Peritagem no tablet. Desenhada para quem está de pé, ao lado do motor
   aberto, com a mão possivelmente suja. Alvo grande, pouco texto, um bloco
   por vez.
 * ------------------------------------------------------------------------- */
.topo-vistoria{margin-bottom:16px}
.topo-vistoria .voltar{font-size:15px;color:var(--tinta3);text-decoration:none;
  display:inline-block;padding:8px 0}
.topo-vistoria h1{margin:2px 0 4px;font-size:28px;line-height:1.15}
.topo-vistoria .quem-e{margin:0;font-size:15px;color:var(--tinta2)}
.tira-aceite{display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  font-size:13px;color:var(--tinta3);padding:8px 12px;border-radius:var(--r2);
  background:var(--painel2);margin-bottom:16px}
.bloco.aceite h2{margin:0 0 4px;font-size:18px}
button.grandao{width:100%;min-height:56px;font-size:18px;font-weight:600;
  border-radius:var(--r3);margin-top:8px}
button.grandao.pronto{background:var(--ok)}

/* Navegação por bloco: fita rolável, o passo atual sempre visível. */
/* Etapa salva, tela na etapa (30/10/2026, rolar_etapa.js): quem rola até uma
   etapa ou uma âncora para abaixo da barra fixa do topo, não embaixo dela. */
html{scroll-padding-top:calc(var(--barra-alt) + var(--topo-seguro) + var(--e3))}
.fita-passos{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;
  -webkit-overflow-scrolling:touch}
.fita-passos a{white-space:nowrap;padding:12px 16px;border-radius:99px;font-size:15px;
  text-decoration:none;background:var(--painel2);color:var(--tinta2);
  border:1px solid var(--linha);font-weight:500}
.fita-passos a.ativo{background:var(--indu);color:var(--tinta-acao);border-color:var(--indu)}

.corpo-vistoria{padding:16px}
.corpo-vistoria h2{margin:0 0 4px;font-size:18px}
.item-vistoria{padding:16px 0;border-bottom:1px solid var(--linha-fraca)}
.item-vistoria:last-of-type{border-bottom:0}
.item-vistoria.marcado{border-left:3px solid var(--atencao);padding-left:12px}
.nome-item{display:block;font-size:15px;font-weight:600;margin-bottom:8px}
.escala-condicao{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.escala-condicao .op{flex:1;min-width:88px}
.escala-condicao .op input{position:absolute;opacity:0;pointer-events:none}
.escala-condicao .op span{display:block;text-align:center;padding:12px 8px;border-radius:var(--r2);
  border:1px solid var(--linha);background:var(--painel2);font-size:15px;
  color:var(--tinta2);cursor:pointer;font-weight:500}
.escala-condicao .op.on span,.escala-condicao .op input:checked+span{background:var(--indu);
  color:var(--tinta-acao);border-color:var(--indu)}
/* A condição marcada tem a cor do estado, não a da marca: "Bom" saía no mesmo
   vermelho de "Danificado", e a leitura de relance do tablet se perdia.
   Semântica da Constituição §3 — ok é verde, desgaste vai estourar, danificado
   exige ação. */
.escala-condicao .op-ok.on span,.escala-condicao .op-ok input:checked+span{
  background:var(--ok);border-color:var(--ok);color:var(--tinta-acao)}
.escala-condicao .op-desgaste.on span,.escala-condicao .op-desgaste input:checked+span{
  background:var(--atencao);border-color:var(--atencao);color:var(--tinta-acao)}
.escala-condicao .op-danificado.on span,.escala-condicao .op-danificado input:checked+span{
  background:var(--critico);border-color:var(--critico);color:var(--tinta-acao)}
.escala-condicao .op-na.on span,.escala-condicao .op-na input:checked+span{
  background:var(--neutro);border-color:var(--neutro);color:var(--tinta-acao)}
.par-medidas{display:flex;gap:8px;margin-bottom:8px}
.par-medidas label{flex:1;display:flex;flex-direction:column;gap:3px;font-size:13px;
  font-weight:600;color:var(--tinta3)}
.par-medidas input,.item-vistoria input.obs,.campo-longo textarea,.campo-longo input:not([type=file]){width:100%;
  padding:12px;border-radius:var(--r2);border:1px solid var(--painel2);
  background-color:var(--painel2);color:var(--tinta);font-size:15px;font-family:inherit}
.item-vistoria input.obs{margin-bottom:8px}
.campo-longo{display:block;margin:16px 0}
.campo-longo span{display:block;font-size:13px;font-weight:600;color:var(--tinta2);
  margin-bottom:4px}

/* A câmera fica presa ao item. Sair da peritagem para anexar é o caminho que
   faz a foto nunca ser tirada. */
.foto-item{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;
  border-radius:var(--r2);border:1px dashed var(--linha);cursor:pointer;
  font-size:15px;font-weight:600;color:var(--tinta2);background:var(--painel2)}
.foto-item input{display:none}
.foto-item.enviando{opacity:.6}
.foto-item.enviada{border-style:solid;border-color:var(--ok);color:var(--ok)}
.foto-item.falhou{border-style:solid;border-color:var(--critico);color:var(--critico)}

.caixa-grande{display:flex;align-items:center;gap:12px;padding:16px 16px;
  border-radius:var(--r3);border:1px solid var(--linha);background:var(--painel2);
  cursor:pointer;font-size:15px;color:var(--tinta)}
.caixa-grande input{width:22px;height:22px;flex:none;accent-color:var(--indu)}
.caixa-grande.on,.caixa-grande.servico.on{border-color:var(--indu);
  background:var(--indu-fraco)}
.caixa-grande.servico b{font-family:"IBM Plex Mono",monospace;color:var(--indu-forte);
  margin-right:8px}
.grade-danos{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.um-dano{display:flex;gap:8px;align-items:stretch}
.um-dano .caixa-grande{flex:1}
.um-dano.on .caixa-grande{border-color:var(--critico);background:var(--critico-fraco)}
.grade-servicos{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}

.progresso-vistoria{display:grid;gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.passo-card{display:flex;flex-direction:column;gap:3px;padding:16px 16px;
  border-radius:var(--r3);border:1px solid var(--linha);text-decoration:none;
  background:var(--painel2);color:var(--tinta)}
.passo-card span{font-size:13px;color:var(--tinta4)}
.passo-card.parcial{border-color:var(--atencao)}
.passo-card.feito{border-color:var(--ok)}
.passo-card.feito span{color:var(--ok)}

/* Fila do comercial. */
.grade-orcar{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
.card-orcar{display:block;padding:16px;border-radius:var(--r3);border:1px solid var(--linha);
  background:var(--painel);text-decoration:none;color:var(--tinta)}
.card-orcar:hover{border-color:var(--indu);box-shadow:var(--sombra)}
.cabeca-orcar{display:flex;justify-content:space-between;align-items:center;gap:8px}
.cabeca-orcar b{font-size:15px}
.card-orcar .quem-e{margin:3px 0 0;font-size:15px;color:var(--tinta2)}
.ficha-orcar{margin:8px 0 8px;font-size:13px;color:var(--tinta3)}
.destaque-escopo{border:1px solid var(--indu)}
/* Fila do mecânico: cartões grandes, uma ação por cartão. */
.card-peritagem{display:block;padding:16px;border-radius:var(--r3);margin-bottom:8px;
  border:1px solid var(--linha);background:var(--painel);text-decoration:none;
  color:var(--tinta)}
.card-peritagem.nova{border-color:var(--indu);border-width:2px}
.card-peritagem .chamada{display:inline-block;margin-top:8px;font-size:15px;
  font-weight:600;color:var(--indu-forte)}
.bloco-sugestoes{margin-bottom:16px;padding:12px;border-radius:var(--r3);
  background:var(--painel2);border:1px dashed var(--linha)}
.caixa-grande.sugerida{margin-top:8px;border-color:var(--atencao)}
.caixa-grande.sugerida small{display:block;font-size:13px;color:var(--tinta4);
  font-weight:400;margin-top:2px}
.bloco.designar .linha-acao{margin:0}
/* Peritagem em cima, montagem embaixo: dois envios no mesmo bloco, com um fio
   entre eles. Sem o fio, "passar para outro" da peritagem encostava no
   "Designar a montagem para" e a pessoa trocava a errada. */
.designar-risco{margin:16px 0;border:0;border-top:1px solid var(--linha)}
.designar-nao-da{align-items:center}
.designar-nao-da .rodape{margin:0;max-width:60ch}
.designar-dividida{margin:8px 0 0}
/* Depois da peritagem, na ficha (dono, 27/09/2026): uma linha por trabalho —
   nome, estado, select e Mandar —, as quatro com o mesmo desenho do 👥 do card,
   separadas por um fio para a pessoa não mandar a linha de baixo. */
.pos-peritagem{margin-top:12px}
.bloco.designar .pos-peritagem-linha{align-items:center;margin:0;padding:12px 0;
  border-top:1px solid var(--linha)}
.pos-peritagem-linha strong{min-width:14ch}
.pos-peritagem-linha .rodape{margin:0;flex:1 1 24ch}
.bloco.designar .pos-peritagem-linha select{width:auto;flex:0 1 260px;min-width:180px}
/* Rótulo visível acima do campo "Quem faz" (22/10/2026): placeholder não é rótulo. */
.pos-peritagem-linha .pos-peritagem-quem{display:flex;flex-direction:column;gap:var(--e1);flex:0 1 260px;min-width:180px}
.pos-peritagem-linha .pos-peritagem-quem > span{font-size:var(--letra-nota);font-weight:500;color:var(--tinta3)}
.bloco.designar .pos-peritagem-linha .pos-peritagem-quem select{width:100%;flex:none;min-width:0}  /* vence o flex-basis de 260 da linha, que no rótulo em coluna virava altura */
/* Serviço sugerido, marcado na lista de baixo também. */
.vist-sugerido{display:inline-block;margin-left:8px;font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--atencao)}
/* Serviço do enrolamento na peritagem: decisão do controle de qualidade (03/11/2026). */
.caixa-grande.vist-do-cq{cursor:default;background:var(--painel2)}
.caixa-grande.vist-do-cq small{display:block;font-size:var(--letra-nota);color:var(--tinta3)}
/* "Nada aparente": resposta de quem olhou, sem vermelho de dano. */
.um-dano.vist-nada .caixa-grande{border-style:dashed}
.um-dano.vist-nada.on .caixa-grande{border-style:solid;border-color:var(--ok);
  background:var(--ok-fraco)}
/* Pergunta de finalizar a peritagem, com botões do tamanho de um dedo de luva. */
.vist-dialogo{border:0;border-radius:var(--r4);padding:24px;width:min(440px,calc(100vw - 32px));
  background:var(--painel);color:var(--tinta);box-shadow:var(--sombra-alta)}
/* Literal de propósito: `::backdrop` nem sempre herda variável de `:root`, e um
   véu que some deixa o diálogo boiando sem separação do que está atrás. */
.vist-dialogo::backdrop{background:rgba(0,0,0,.55)}
.vist-dialogo h2{margin:0 0 8px;font-size:18px}
.vist-dialogo p{margin:0 0 16px;font-size:15px;line-height:1.5;color:var(--tinta2)}
.vist-falta-estator{margin:0 0 var(--e3)}
.vist-falta-estator-fotos{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.vist-estator-obrigatorio[data-ok]{color:var(--ok)}
.grandao[disabled],.vist-sim[disabled]{opacity:.45;cursor:not-allowed}
.vist-dialogo-botoes{display:flex;flex-wrap:wrap;gap:12px}
.vist-dialogo-botoes button{flex:1 1 140px;min-height:56px;border:0;border-radius:var(--r3);
  font-size:18px;font-weight:700;color:var(--tinta-acao);cursor:pointer}
.vist-nao{background:var(--critico)}
.vist-sim{background:var(--ok)}
/* Tolerância ISO 286-2 do assento e do alojamento, com veredito na hora. */
.vist-tol-linha{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.vist-tol-linha label{flex:1 1 130px;display:flex;flex-direction:column;gap:3px;
  font-size:13px;font-weight:600;color:var(--tinta3)}
.vist-tol-linha select,.vist-tol-linha input{width:100%;min-height:44px;padding:12px;
  border-radius:var(--r2);border:1px solid var(--painel2);background-color:var(--painel2);
  color:var(--tinta);font-size:15px}
.vist-tol{margin:0 0 8px;padding:12px 12px;border-radius:var(--r2);border:1px solid var(--linha);
  background:var(--painel2);font-size:15px;line-height:1.45;color:var(--tinta2)}
.vist-tol b{display:block;margin-bottom:3px;color:var(--tinta)}
.vist-tol-ok{border-color:var(--ok);background:var(--ok-fraco)}
.vist-tol-atencao{border-color:var(--atencao);background:var(--atencao-fraco)}
.vist-tol-critico{border-color:var(--critico);background:var(--critico-fraco)}
/* Quem mandou e quando chegou, no cartão da fila do mecânico. */
.vist-envio{margin:4px 0 0;font-size:13px;color:var(--tinta3)}
.vist-envio b{color:var(--tinta2);font-weight:600}
/* Recebimento: potência com a unidade da placa ao lado. */
.rec-potencia{display:flex;gap:8px}
.rec-potencia input{flex:1;min-width:0}
.rec-potencia select{width:auto;flex:none}
/* PCP: renomear e acrescentar estágio no cabeçalho da coluna do quadro. */
/* Fechado, o menu do estágio é um "⋯" no canto do cabeçalho — a linha inteira
   de "⋯ estágio" custava 44px de cada coluna, todo dia, para uma configuração
   que se faz de vez em quando. Aberto, volta ao fluxo e mostra os campos. */
.pcp-coluna-menu{position:absolute;right:var(--e1);bottom:0;margin:0;font-size:13px}
.pcp-coluna-menu[open]{position:static;margin-top:var(--e2)}
.pcp-coluna-menu summary{cursor:pointer;color:var(--tinta3);font-weight:600;
  list-style:none;display:inline-flex;align-items:center;min-height:var(--toque)}
.pcp-coluna-menu summary::-webkit-details-marker{display:none}
.pcp-coluna-menu form{display:flex;gap:8px;margin-top:8px}
.pcp-coluna-menu select{width:auto}
.pcp-coluna-menu input{flex:1;min-width:0;padding:8px 8px;
  border-radius:var(--r2);border:1px solid var(--painel2);background-color:var(--painel2);color:var(--tinta)}
/* Mover a coluna (dono, 25/09/2026). As duas setas dividem a linha; o "para
   depois de…" é um select que ocupa o que sobra. Inserir estágio é um
   formulário de várias linhas dentro da coluna de 288px: quebra em linhas
   (nome+disciplina · prazo+unidade+espera · antes/depois). */
.pcp-coluna-mover button{flex:1}
/* Aberto, o menu não pode comer a coluna: acima de ~metade da tela ele rola
   por dentro, e os cards continuam visíveis embaixo. */
.pcp-coluna-menu[open]{max-height:min(520px,calc(100vh - 380px));overflow-y:auto;
  padding-right:8px}
.pcp-coluna-inserir{margin-top:8px;border-top:1px solid var(--linha-fraca);padding-top:4px}
.pcp-coluna-inserir summary{font-size:13px;font-weight:600;color:var(--tinta3);cursor:pointer}
.pcp-coluna-menu form select[name="depois_de"]{flex:1;min-width:0}
.pcp-coluna-novo{flex-wrap:wrap}
.pcp-coluna-novo input[name="nome"]{flex:1 1 100%}
.pcp-coluna-novo select[name="disciplina"]{flex:1 1 100%}
.pcp-coluna-novo input[name="quanto"]{flex:0 1 82px}
.pcp-coluna-espera{display:inline-flex;align-items:center;gap:8px;font-size:13px;
  color:var(--tinta3);min-height:var(--toque);white-space:nowrap}
.pcp-coluna-espera input{flex:none;width:18px;height:18px;accent-color:var(--indu)}
.pcp-coluna-onde{display:flex;gap:8px;flex:1 1 100%}
.pcp-coluna-onde button{flex:1}
/* O cabeçalho da coluna é a alça para reordenar os estágios — só com o mouse,
   só para quem planeja, e nunca nas pontas (`data-fixo`). A coluna em
   movimento fica translúcida e ganha um contorno; nada de sombra em tudo. */
:root:not([data-aparelho="toque"]) [data-arrastavel] .coluna:not([data-fixo]) > header{cursor:grab}
/* O que só existe na mesa (arrastar o cabeçalho, "⋯ estágio") não se anuncia
   no toque, onde a configuração não abre. */
:root[data-aparelho="toque"] .pcp-so-na-mesa{display:none}
.quadro-movendo-coluna{user-select:none;-webkit-user-select:none}
.quadro-movendo-coluna .coluna > header{cursor:grabbing}
.coluna-movendo{opacity:.6;outline:2px dashed var(--indu);outline-offset:-2px}
/* Configuração › Estágios: as setas de ordem ao lado do número da linha. */
.pcp-ordem-setas{display:flex;align-items:center;gap:4px;justify-content:flex-end}
.pcp-ordem-setas form{display:flex;gap:2px;margin:0}
.pcp-ordem-setas button.mini{padding:8px;min-width:32px}
.pcp-ordem-setas button.mini:disabled{opacity:.3;cursor:default}
.pcp-ordem-setas button.mini:disabled:hover{background:var(--painel);color:inherit;
  border-color:var(--linha)}
/* Rendimento: uma linha por pessoa, barra do dia, detalhe por trabalho. */
.ren-dia{display:flex;align-items:center;gap:8px;margin:0}
.ren-dia input{width:auto}
.ren-rot{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--tinta3)}
.ren-lista{list-style:none;margin:0;padding:0}
.ren-lista > li{border-bottom:1px solid var(--linha-fraca)}
.ren-lista > li:last-child{border-bottom:0}
.ren-linha{display:grid;grid-template-columns:minmax(140px,1.2fr) 2fr auto auto;gap:16px;
  align-items:center;padding:16px 16px;min-height:56px}
.ren-linha:hover{background:var(--painel2)}
.ren-nome b{display:block;font-size:15px}
.ren-nome small{font-size:13px;color:var(--tinta3)}
.ren-barra{display:block;height:10px;border-radius:var(--r1);background:var(--painel3);overflow:hidden}
.ren-barra i{display:block;height:100%;border-radius:var(--r1);
  background:var(--tinta3)}
.ren-num{font-size:13px;color:var(--tinta3);white-space:nowrap}
.ren-num b{font-family:"IBM Plex Mono",monospace;font-size:22px;color:var(--tinta)}
.ren-tempo{font-size:13px;color:var(--tinta3);white-space:nowrap}
.ren-tempo b{font-family:"IBM Plex Mono",monospace;color:var(--tinta)}
.ren-item{display:grid;grid-template-columns:1fr minmax(160px,260px);gap:16px;
  align-items:center;padding:16px 16px}
.ren-item-texto b{display:block;font-size:15px}
.ren-item-texto span{display:block;font-size:13px;color:var(--tinta2)}
.ren-item-texto small{font-size:13px;color:var(--tinta3)}
.ren-item-grafico{display:flex;align-items:center;gap:12px}
.ren-item-grafico .ren-barra{flex:1}
.ren-dur{font-family:"IBM Plex Mono",monospace;font-size:15px;white-space:nowrap}
.ren-telas{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.ren-tela{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:var(--r3);
  border:1px solid var(--linha);background:var(--painel);min-height:120px}
.ren-tela:hover{border-color:var(--borda-viva)}
.ren-tela b{font-size:18px}
.ren-tela span{font-size:13px;color:var(--tinta3)}
.ren-tela code{margin-top:auto;font-size:13px;color:var(--tinta2)}
@media (max-width:700px){
  .ren-linha{grid-template-columns:1fr auto;grid-template-areas:"nome num" "barra tempo"}
  .ren-nome{grid-area:nome}.ren-num{grid-area:num}
  .ren-linha .ren-barra{grid-area:barra}.ren-tempo{grid-area:tempo}
  .ren-item{grid-template-columns:1fr}
}
/* (Clean 4b, 06/10/2026) as regras exclusivas da Administração moram em telas/administracao.css */
/* PCP: mesa de distribuição, uma coluna por pessoa. */
.pcp-dist .coluna{flex:0 0 290px}
.pcp-dist-grupo{display:block;margin:4px 2px 0;font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;color:var(--tinta4)}
.pcp-dist-estado{margin:4px 0 0;font-size:13px;color:var(--tinta3)}
/* Recusa com motivo: é o problema do dia, e fica à vista no card. */
.pcp-dist-estado.pcp-dist-recusa{color:var(--atencao);background:var(--atencao-fraco);
  border-radius:var(--r2);padding:4px 8px}
.pcp-dist-form{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.pcp-dist-form input[name=motivo]{order:3;flex:1 1 100%}
.pcp-dist-form select{flex:1;min-width:0;min-height:44px}
.pcp-dist-form button{min-height:44px}
.pcp-dist-card[draggable]{cursor:grab}
.pcp-dist-card.arrastando{opacity:.45;cursor:grabbing}
.pcp-dist-alvo.sobre{border-color:var(--indu);background:var(--indu-fraco)}
/* Avisar na TV: o nome da pessoa pisca na parede até ela resolver no tablet. */
.pcp-aviso{margin:0 2px;padding:0;background:transparent;border:0}
.pcp-aviso summary{display:flex;align-items:center;min-height:44px;cursor:pointer;
  font-size:13px;font-weight:600;color:var(--indu-forte)}
.pcp-aviso-form{display:flex;gap:8px;margin-bottom:8px}
.pcp-aviso-form input{flex:1;min-width:0;min-height:44px}
.pcp-aviso-form button{min-height:44px}
.pcp-aviso-aberto{display:flex;align-items:center;gap:8px;margin:8px 2px 0;padding:4px 0 4px 8px;
  border-left:3px solid var(--critico);font-size:13px;color:var(--tinta2)}
.pcp-aviso-aberto span{flex:1;min-width:0}
.pcp-aviso-aberto button{min-height:44px}
@media (max-width:900px){
  .pcp-dist{flex-direction:column;align-items:stretch;overflow-x:visible}
  .pcp-dist .coluna{flex:1 1 auto;width:100%}
}
/* Como o equipamento chegou: quatro opções grandes, "sem nota" entre elas. */
.como-chegou{grid-column:1/-1;margin:8px 0}
/* Nota de remessa do cliente: largura cheia, como o "Como chegou" — na coluna
   estreita da `.dupla` os botões de foto e XML quebravam palavra a palavra. */
.nota-remessa{grid-column:1/-1;display:grid;gap:8px;margin:8px 0}
.nota-remessa .remessa-par{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.nota-remessa > button{justify-self:start}
@media (max-width:640px){ .nota-remessa .remessa-par{grid-template-columns:1fr} }
/* Cada item da remessa como o DANFE imprime (dono, 22/10/2026): a descrição ocupa a
   linha inteira; NCM, CFOP, quantidade, unidade e valores vêm embaixo, curtos. No
   tablet em pé cabem três por linha; no celular, dois. A foto preenche; o dedo confere. */
.nota-remessa,.nota-remessa > *{min-width:0}
.nota-remessa .remessa-resumo{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:12px}
.nota-remessa .remessa-item{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px 12px;padding:8px 0;border-top:1px solid var(--linha)}
.nota-remessa .remessa-item .ri-desc{grid-column:1/-1}
.nota-remessa .remessa-item input,.nota-remessa .remessa-resumo input{min-width:0;width:100%}
@media (max-width:900px){ .nota-remessa .remessa-item{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:640px){ .nota-remessa .remessa-item,.nota-remessa .remessa-resumo{grid-template-columns:repeat(2,minmax(0,1fr))} }
.opcoes-documento{display:grid;gap:8px;margin:8px 0 12px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.op-doc input{position:absolute;opacity:0;pointer-events:none}
.op-doc span{display:block;text-align:center;padding:12px 12px;border-radius:var(--r2);
  border:1px solid var(--linha);background:var(--painel2);font-size:15px;
  color:var(--tinta2);cursor:pointer;font-weight:500}
.op-doc input:checked+span{background:var(--indu);color:var(--tinta-acao);border-color:var(--indu)}
.dados-documento{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
@media (pointer:coarse){ .op-doc span{padding:16px 12px;font-size:15px} }
.lista-escopo{list-style:none;margin:0;padding:0}
.lista-escopo li{display:flex;gap:12px;align-items:center;padding:8px 0;
  border-bottom:1px solid var(--linha-fraca);font-size:15px}
.lista-escopo li:last-child{border-bottom:0}
.num-servico{font-family:"IBM Plex Mono",monospace;color:var(--indu-forte);
  background:var(--indu-fraco);padding:3px 8px;border-radius:var(--r1);font-size:13px}

@media (pointer:coarse){
  .escala-condicao .op span{padding:16px 8px;font-size:15px}
  .foto-item{padding:16px 24px;font-size:15px}
  .caixa-grande{padding:16px 16px}
  .par-medidas input,.item-vistoria input.obs{padding:16px;font-size:18px}
}
/* Galeria por momento do serviço. */
.grupo-foto{margin-bottom:16px}
.grupo-foto .rotulo-linha small{color:var(--tinta4);font-weight:400}
.fitas-foto{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.miniatura-foto{display:block;width:104px;height:78px;border-radius:var(--r2);overflow:hidden;
  border:1px solid var(--linha)}
.miniatura-foto img{width:100%;height:100%;object-fit:cover;display:block}
.miniatura-foto:hover{border-color:var(--indu)}
/* Cada foto com a hora embaixo e um jeito de tirar a que entrou errada. */
.cartao-foto{margin:0;display:flex;flex-direction:column;gap:3px}
.cartao-foto figcaption{display:flex;align-items:center;justify-content:space-between;
  gap:4px;font-size:12px;color:var(--tinta4);width:104px}
.cartao-foto figcaption form{margin:0}
.cartao-foto figcaption button{font-size:15px;line-height:1;padding:0 3px;
  color:var(--tinta4)}
.cartao-foto figcaption button:hover{color:var(--critico)}
.anexar-evidencia{flex-wrap:wrap;align-items:flex-end;margin-bottom:16px}
/* Correção fica fechada por padrão: a tela é para ler, não para editar. Mas
   existe em toda tela onde alguém digitou alguma coisa — o portão é o pior lugar
   do processo para digitar, e sem correção o erro de lá vira o dado definitivo. */
details.corrigir{border-top:1px solid var(--linha);margin-top:4px}
details.corrigir>summary{cursor:pointer;padding:12px 16px;font-size:13px;
  font-weight:600;color:var(--tinta3);list-style:none}
details.corrigir>summary::-webkit-details-marker{display:none}
details.corrigir>summary::before{content:"✎ ";color:var(--tinta4)}
details.corrigir>summary:hover{color:var(--indu-forte)}
details.corrigir[open]>summary{color:var(--indu-forte)}
/* Peritagem reaberta: cada correção numa linha, com nome, data e hora. */
.vist-correcoes ul{margin:8px 0 0;padding-left:16px;font-size:14px;line-height:1.5}
.vist-correcoes li{margin:2px 0}
/* Corrigir a foto da peritagem reaberta: legenda, categoria ou excluir. */
details.vist-foto-corrigir{margin-top:8px;border-top:1px solid var(--linha)}
details.vist-foto-corrigir>summary{cursor:pointer;padding:12px 0;min-height:44px;
  font-size:13px;font-weight:600;color:var(--tinta3)}
details.vist-foto-corrigir form{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;
  margin:0 0 8px}
details.vist-foto-corrigir label{flex:1 1 180px;min-width:0}
/* Cada passagem da máquina leva à passagem: peritagem, fotos, passo a passo.
   Passagem que é só texto obriga quem vai montar a procurar tudo de novo. */
.atalhos-marco{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
.atalhos-marco a{font-size:13px;color:var(--tinta3);text-decoration:none;
  border-bottom:1px solid var(--linha);padding-bottom:1px}
.atalhos-marco a:hover{color:var(--tinta);border-color:var(--tinta)}

/* --- Ficha de orçamento: o escopo com o preço praticado ao lado ----------- */
/* Preço praticado não é tabela de preço: é o que esta oficina já vendeu deste
   serviço em máquina de porte parecido. Fica na mesma linha do serviço porque a
   pergunta é "quanto isso costuma custar", e resposta que exige abrir outra
   tela não é consultada no meio de um orçamento. */
.linha-servico{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.linha-servico .nome-servico{font-weight:600}
.preco-sugerido{margin-left:auto;font-variant-numeric:tabular-nums;
  font-weight:700;color:var(--ok);font-size:15px}
.historico-preco{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:5px 0 0 var(--recuo-servico,0)}
.historico-preco .rot{font-size:12px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--tinta4);font-weight:700}
.historico-preco a{display:inline-flex;align-items:baseline;gap:4px;
  font-size:13px;font-variant-numeric:tabular-nums;color:var(--tinta2);
  text-decoration:none;border:1px solid var(--linha);border-radius:var(--r1);
  padding:2px 8px}
.historico-preco a small{color:var(--tinta4);font-size:12px}
.historico-preco a:hover{border-color:var(--indu);color:var(--indu-forte)}
.sem-referencia{margin-top:4px;font-size:13px;color:var(--tinta4);
  font-style:italic}
/* Tabela de precificação: item sem preço tem que se ver de longe, porque é
   exatamente ele que sai R$ 0,00 no PDF do cliente. */
.tabela-preco input{padding:4px 8px;font-size:15px;
  font-variant-numeric:tabular-nums}
.tabela-preco tr.sem-preco td:first-child{border-left:3px solid var(--atencao)}
.tabela-preco tr.sem-preco input[name^="valor"]{border-color:var(--atencao)}
.tabela-preco .historico-preco{margin:0}
.tirar-item{display:inline-flex;align-items:center;gap:4px;font-size:13px;
  color:var(--tinta4);cursor:pointer;white-space:nowrap}
.tirar-item input{margin:0}
.tirar-item:hover{color:var(--critico)}
.anexar-evidencia .camera-curta{padding:8px 16px;flex-direction:row;gap:8px}
/* Quatro fotos na chegada, cada uma já categorizada. Alvo grande: quem recebe
   está de pé, ao lado do caminhão. */
.quatro-fotos{display:grid;gap:8px;margin:8px 0;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.camera-curta{display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:16px 12px;border:1px dashed var(--linha);border-radius:var(--r3);
  cursor:pointer;font-size:13px;font-weight:600;color:var(--tinta2);
  background:var(--painel2);text-align:center}
.camera-curta:hover{border-color:var(--indu);color:var(--indu-forte)}
.camera-curta input{display:none}
/* Foto escolhida é foto que se vê escolhida. Quatro campos de câmera sem
   retorno nenhum fazem a pessoa enviar acreditando que mandou as quatro. */
.camera-curta .escolhida{display:block;margin-top:4px;font-size:13px;
  color:var(--tinta3);font-weight:400;word-break:break-all}
.camera-curta.tem{border-style:solid;border-color:var(--ok);color:var(--tinta)}
.camera-curta.recusada{border-color:var(--critico)}
.camera-curta.recusada .escolhida{color:var(--critico);font-weight:600}
/* Campo preenchido por conta — polos calculados da rotação. Fica claro que a
   máquina respondeu, e que dá para corrigir. */
input.sugerido{border-style:dashed;border-color:var(--indu);color:var(--indu-forte)}
/* Perguntas extras dentro do item da peritagem: o que fazer, veio pinada. */
.extra-item{margin-top:8px}
.extra-item .rot-extra{display:block;font-size:13px;font-weight:600;
  color:var(--tinta3);margin-bottom:4px;text-transform:uppercase;
  letter-spacing:.04em}
.camera-curta .ic{font-size:22px;color:var(--tinta4)}
.fotos-chegada em{display:block;font-size:13px;color:var(--tinta4);
  font-style:normal;line-height:1.5}
@media (pointer:coarse){ .camera-curta{padding:24px 12px} }
/* Trocar a categoria da foto: chips, um toque, sem recarregar. */
.trocar-categoria summary{cursor:pointer;font-size:13px;color:var(--tinta4);
  padding:8px 0;user-select:none}
.chips-categoria{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 4px}
.chip-categoria{background:var(--painel2);color:var(--tinta2);border:1px solid var(--linha);
  border-radius:99px;padding:8px 12px;font-size:13px;font-family:inherit;
  cursor:pointer;font-weight:500}
.chip-categoria.on{background:var(--indu);color:var(--tinta-acao);border-color:var(--indu)}
@media (pointer:coarse){ .chip-categoria{min-height:var(--toque)} }
/* Fila do almoxarifado: uma linha por peça, três respostas grandes. */
.para-separar{display:flex;gap:16px;justify-content:space-between;align-items:flex-start;
  flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--linha-fraca)}
.para-separar:last-child{border-bottom:0}
.para-separar.urgente{border-left:3px solid var(--critico);padding-left:12px}
.o-que-separar{flex:1;min-width:250px}
.o-que-separar strong{font-size:15px}
.o-que-separar .tecnico{margin-top:3px}
.tres-respostas{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
.tres-respostas button.resposta{min-height:46px;padding:0 16px;font-size:15px;
  font-weight:600}
.tres-respostas button.resposta.boa{background:var(--ok);color:var(--tinta-acao)}
.resposta-parcial summary,.resposta-falta summary{cursor:pointer;font-size:15px;
  padding:12px 16px;border-radius:var(--r2);border:1px solid var(--linha);
  color:var(--tinta2);user-select:none;white-space:nowrap}
.resposta-falta summary{color:var(--critico);border-color:var(--critico)}
.resposta-parcial form{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.resposta-parcial input,.resposta-parcial select{padding:var(--e2) var(--e3);border-radius:var(--r2);
  border:1px solid var(--painel2);background-color:var(--painel2);color:var(--tinta);
  font-size:var(--letra-corpo);font-family:inherit;max-width:150px}
.resposta-falta .motivos-bloqueio{margin-top:8px;min-width:260px}
@media (pointer:coarse){
  .tres-respostas button.resposta{min-height:54px}
  .resposta-parcial summary,.resposta-falta summary{min-height:54px;
    display:flex;align-items:center}
}
@media (pointer:coarse){
  .motivos-bloqueio button.motivo{min-height:60px;font-size:15px}
  .grade-necessidade input,.grade-necessidade select{min-height:44px;font-size:15px}
}

/* A linha do tempo da máquina. Lista, não stepper: o fluxo real tem ida e volta,
   e um stepper de dezesseis passos mente sobre isso. */
.fio-eventos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.fio-eventos li{display:grid;gap:12px;align-items:baseline;padding:8px 0;
  grid-template-columns:22px 92px 1fr auto;
  border-bottom:1px solid var(--linha-fraca);font-size:15px}
.fio-eventos li:last-child{border-bottom:0}
.fio-eventos .marca-fio{color:var(--tinta4);font-size:13px;text-align:center}
.fio-eventos .hora{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--tinta4)}
.fio-eventos .fato{color:var(--tinta)}
.fio-eventos .fato small{color:var(--tinta4);font-weight:400}
.fio-eventos .autor{font-size:13px;color:var(--tinta3);white-space:nowrap}
.fio-eventos li.ok .marca-fio{color:var(--ok)}
.fio-eventos li.atencao .marca-fio{color:var(--atencao)}
.fio-eventos li.critico .marca-fio{color:var(--critico)}
.fio-eventos li.critico .fato{font-weight:600}
/* As tres respostas de tres segundos da rastreabilidade. Vivem numa `.grade`,
   nao na fita de miniaturas de foto — ali a caixa e fixa em 88x88 e corta o
   texto que nao cabe, que era o caso de "Entregue ao cliente". */
.bloco.agora .grade b{display:block;font-size:15px;margin-top:4px}
.bloco.agora .grade b.mau{color:var(--critico)}
.bloco.agora .grade b.atencao-forte{color:var(--atencao)}
@media (max-width:700px){
  .fio-eventos li{grid-template-columns:20px 1fr;row-gap:2px}
  .fio-eventos .hora{grid-column:2}
  .fio-eventos .fato{grid-column:2}
  .fio-eventos .autor{grid-column:2}
}
/* (Clean 4b, 06/10/2026) as regras exclusivas da Administração moram em telas/administracao.css */

/* O copo: muitos campos, mas agrupados e com o crítico marcado. Sem os grupos,
   quarenta campos numa coluna só é um formulário que ninguém termina. */
.grade-copo{display:flex;flex-direction:column;gap:16px}
.grupo-copo{border:1px solid var(--linha-fraca);border-radius:var(--r2);padding:12px 16px;
  display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.grupo-copo legend{font-size:13px;font-weight:700;color:var(--tinta3);
  text-transform:uppercase;letter-spacing:.05em;padding:0 8px}
.grade-copo label{display:flex;flex-direction:column;gap:4px;font-size:13px;
  color:var(--tinta2);font-weight:600}
.grade-copo label small{font-weight:400;color:var(--tinta4)}
.grade-copo label b{color:var(--indu-forte)}
.grade-copo label.critico input,.grade-copo label.critico select{
  border-color:var(--indu-fraco)}
.grade-copo input,.grade-copo select{padding:var(--e2);border-radius:var(--r2);
  border:1px solid var(--painel2);background-color:var(--painel2);color:var(--tinta);
  font-size:var(--letra-corpo);font-family:inherit;width:100%}
.grade-copo input:disabled,.grade-copo select:disabled{opacity:.7;cursor:not-allowed}
.campo-largo{max-width:320px}
.pe-copo{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.linha-acao{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;
  margin-top:12px}
.linha-acao label{display:flex;flex-direction:column;gap:4px;font-size:13px;
  font-weight:600;color:var(--tinta2)}
/* 22/10/2026: campo cheio como o resto da base (a "caixa branca com borda cinza"
   era o sistema antigo, B-031); `background-color` para o chevron do select ficar. */
.linha-acao input,.linha-acao select{padding:var(--e2) var(--e3);border-radius:var(--r2);
  border:1px solid var(--painel2);background-color:var(--painel2);color:var(--tinta);
  font-size:var(--letra-corpo);font-family:inherit;min-width:210px}

@media (pointer:coarse){
  /* O levantamento é preenchido em pé, na bancada, muitas vezes com luva. */
  .grade-copo input,.grade-copo select{min-height:44px;font-size:15px}
  .senha-linha input{width:130px}
}

/* barra de filtros das listas */
.filtros{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.filtros input[type=text],.filtros input:not([type]){flex:1;min-width:200px;
  padding:8px 12px;font-size:15px;border:1px solid var(--painel2);border-radius:var(--r2);
  background-color:var(--painel2);color:var(--tinta)}
.filtros select{width:auto;padding:8px 12px;font-size:13px}
.filtros .chip{gap:8px}
.filtros .chip input{width:14px;height:14px;accent-color:var(--indu);margin:0}
.filtros button{padding:8px 16px;font-size:13px;font-weight:600;border:0;
  border-radius:var(--r2);background:var(--painel2);border:1px solid var(--linha);
  color:var(--tinta2);cursor:pointer}
.filtros button:hover{background:var(--indu);color:var(--tinta-acao);border-color:var(--indu)}
.filtros .limpar{font-size:13px;color:var(--tinta4)}
.filtros .limpar:hover{color:var(--indu-forte)}

/* caixa de saída */
.mensagem{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;
  padding:12px 16px;border-bottom:1px solid var(--linha-fraca)}
.mensagem:last-of-type{border-bottom:0}
.mensagem.falhou{background:var(--critico-fraco)}
.mensagem.simulado{background:var(--neutro-fraco)}
.mensagem .cabeca strong{display:block;font-size:15px}
.mensagem .cabeca span{font-size:13px;color:var(--tinta3)}
.mensagem .erro-envio{grid-column:1/-1;margin:0;font-size:13px;color:var(--critico);
  font-family:"IBM Plex Mono",monospace;line-height:1.5}
.cabecalho .volta{display:block;font-size:13px;color:var(--tinta3);margin-bottom:4px}
.cabecalho .volta:hover{color:var(--indu-forte)}

/* ------------------------------------------------------- ABERTURA DA HOME */
/* Cinco itens no máximo, cada um com destino. Item que não leva a lugar nenhum
   é enfeite, e a sexta linha ninguém lê. */
.abertura{display:grid;grid-template-columns:repeat(auto-fit,minmax(184px,1fr));
  gap:12px;margin-bottom:16px}
/* Duas correções de uma vez, e as duas são a mesma queixa: a caixa tinha borda
   de 1px, mais 3px de cinza na esquerda, mais sombra. Cinza na borda não diz
   nada — trilho que não carrega estado é risco decorativo — e sombra em caixa
   que não flutua é o que esta folha não faz desde o começo: bloco se separa do
   fundo por um fio, porque sob a luz do galpão sombra em cartão branco vira
   sujeira na tela. */
.abertura .cx{background:var(--painel);border:1px solid var(--linha);
  border-radius:var(--r3);padding:12px 16px;
  display:flex;flex-direction:column;gap:2px;text-decoration:none;
  transition:border-color .12s}
.abertura .cx:hover{border-color:var(--tinta4)}
.abertura .cx .r{font-size:12px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--tinta3);font-weight:700}
.abertura .cx .v{font-size:22px;font-weight:700;letter-spacing:-.03em;
  line-height:1.15;font-variant-numeric:tabular-nums}
.abertura .cx .d{font-size:13px;color:var(--tinta4);line-height:1.45}
.abertura .cx.critico{border-left-color:var(--critico)}
.abertura .cx.critico .v{color:var(--critico)}
.abertura .cx.atencao{border-left-color:var(--atencao)}
.abertura .cx.atencao .v{color:var(--atencao)}
.abertura .cx.bloqueio{border-left-color:var(--bloqueio)}
.abertura .cx.bloqueio .v{color:var(--bloqueio)}
.abertura .cx.ok{border-left-color:var(--ok)}
.abertura .cx.ok .v{color:var(--ok)}

/* ------------------------------------------------------ AVISOS DA BARRA */
/* Doze naturezas de aviso não cabem num botão só com o mesmo peso. A barra
   separa por **quem age e com que urgência**: decisão sua, seu trabalho, risco
   e prazo — e o geral para o que ainda não declarou natureza.

   A cor não é nova. `--critico` para a decisão que trava outra pessoa, `--indu`
   para o que é seu, `--atencao` para o que está esfriando: os mesmos três
   significados que a casa já usa em card, indicador e farol.

   Indicador vazio não é desenhado — quem não manda o grupo é o servidor. */
.avisos-barra{position:relative;flex:none;display:flex;align-items:center;gap:8px;
  min-width:0}
.avisos-barra .largo{display:flex;align-items:center;gap:8px}
.avisos-barra .grupo{position:relative}

/* Dono (06/10/2026): as pílulas tinham o mesmo cinza do menu lateral. Agora
   são campo cheio com fio de 1px — a mesma gramática da busca ao lado —, e
   ao passar o ponteiro levantam 1px com a sombra única. Nascem com um
   micro-movimento (200ms, uma de cada vez) depois que o servidor responde. */
.avisos-barra .gatilho{min-height:var(--toque);padding:0 var(--e3) 0 var(--e3);border-radius:var(--r2);
  background:var(--painel2);border:1px solid var(--linha);color:var(--tinta2);
  cursor:pointer;display:flex;align-items:center;gap:var(--e2);font-size:13px;
  font-weight:600;position:relative;white-space:nowrap;line-height:1;
  transition:transform var(--t1) var(--curva),box-shadow var(--t1) var(--curva),
    border-color var(--t1) var(--curva),color var(--t1) var(--curva)}
.avisos-barra .gatilho:hover{color:var(--tinta);border-color:var(--borda-viva);
  transform:translateY(-1px);box-shadow:var(--sombra)}
.avisos-barra .largo .grupo{animation:avisos-entra var(--t2) var(--curva) both}
.avisos-barra .largo .grupo:nth-child(2){animation-delay:60ms}
.avisos-barra .largo .grupo:nth-child(3){animation-delay:120ms}
.avisos-barra .largo .grupo:nth-child(4){animation-delay:180ms}
@keyframes avisos-entra{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* O ponto vivo do Trabalho: 6px na cor da marca (é o que é seu), e pulsa UMA
   vez quando o número mudou desde a última tela — nunca em laço. */
.avisos-barra .avisos-ponto{width:6px;height:6px;border-radius:50%;background:var(--marca);flex:none}
.avisos-barra .grupo.avisos-pulso .avisos-ponto{animation:avisos-pulsa 600ms var(--curva) 1}
@keyframes avisos-pulsa{50%{transform:scale(1.8);opacity:.55}}
.avisos-barra .gatilho:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.avisos-barra .gatilho .ic{font-size:15px;line-height:1}
.avisos-barra .gatilho .rot{font-size:13px;letter-spacing:-.01em}
/* Até 1200 px (tablet, ou janela de computador com o trilho aberto) as três
   palavras custam 180 px que a busca precisa: a pílula fica ícone + número, e
   a palavra segue no aria-label e no title. Abaixo de 680 vira o botão único. */
@media (max-width:1200px){
  .avisos-barra .largo .gatilho .rot{display:none}
  .avisos-barra .largo .gatilho{padding:0 var(--e2) 0 var(--e3)}
}
/* O número é o dado: pastilha branca sobre o campo cheio, monoespaçado para
   não dançar quando vai de 9 para 10. No escuro a pastilha é o painel3 — o
   painel sumia sobre o painel2. */
.avisos-barra .gatilho .conta{min-width:20px;height:20px;padding:0 var(--e1);border-radius:var(--r1);
  background:var(--painel);color:var(--tinta);font-size:13px;font-weight:600;
  display:grid;place-items:center;font-family:var(--fonte-mono);font-variant-numeric:tabular-nums;
  box-shadow:var(--sombra)}
:root[data-tema="escuro"] .avisos-barra .gatilho .conta{background:var(--painel3);box-shadow:none}

/* Cada natureza carrega a sua cor na borda e no número. Sem hover o tablet não
   ganha explicação nenhuma depois — então a diferença tem que estar parada na
   tela: ícone, rótulo e cor, os três ao mesmo tempo.

   A decisão é a única cheia, e isso é hierarquia, não enfeite: é a natureza em
   que alguém do outro lado está **parado esperando por você**. Cheia também
   resolve um problema real de leitura — `--critico` e `--indu` são dois
   vermelhos vizinhos, e lado a lado, ambos em fundo claro, passavam por um só.

   A tinta é `var(--painel)`, não `#fff`: no tema escuro o vermelho clareia, e
   branco sobre ele ficaria ilegível. `--painel` vira claro no claro e escuro no
   escuro — o contraste se mantém nos dois sem uma regra de tema a mais. */
/* Clean: a natureza mora na tinta do número e no peso, não em pílula cheia.
   A decisão (critico) ganha o contorno de 1px em tinta — é quem tem alguém
   parado esperando por você. O coral vai só no NÚMERO, e só quando ele é
   alarme: decisão pendente e risco (dono, 06/10/2026); o trabalho, que é seu,
   fica em tinta com o ponto vivo da marca. */
.avisos-barra .gatilho.critico{border-color:var(--tinta);color:var(--tinta)}
.avisos-barra .gatilho.critico .conta{color:var(--alarme-texto)}
.avisos-barra .gatilho.indu{color:var(--tinta2)}
.avisos-barra .gatilho.indu .conta{color:var(--tinta)}
.avisos-barra .gatilho.atencao{color:var(--tinta2)}
.avisos-barra .gatilho.atencao .conta{color:var(--alarme-texto)}

.avisos-barra .lista{position:absolute;right:0;top:38px;width:min(340px,86vw);
  background:var(--painel);border:0;border-radius:var(--r3);
  box-shadow:var(--sombra-alta);overflow:hidden;z-index:60;
  max-height:min(70vh,520px);overflow-y:auto}
.avisos-barra .lista .item{display:block;padding:12px 12px;text-decoration:none;
  border-bottom:1px solid var(--linha-fraca);border-left:3px solid transparent}
.avisos-barra .lista .item:last-child{border-bottom:0}
.avisos-barra .lista .item:hover{background:var(--painel2)}
.avisos-barra .lista .item strong{display:block;font-size:13px;line-height:1.3}
.avisos-barra .lista .item span{display:block;font-size:13px;color:var(--tinta4);margin-top:1px}
.avisos-barra .lista .item.critico{border-left-color:var(--critico)}
.avisos-barra .lista .item.atencao{border-left-color:var(--atencao)}
.avisos-barra .lista .item.bloqueio{border-left-color:var(--bloqueio)}
.avisos-barra .lista .item.ok{border-left-color:var(--ok)}

/* No painel estreito as naturezas viram seções — o mesmo rótulo, a mesma cor,
   só que empilhadas. Aba esconderia duas das três atrás de um toque, e a de
   cima é justamente a que trava outra pessoa. */
.avisos-barra .lista .secao{display:flex;align-items:center;gap:8px;padding:8px 12px 8px;
  background:var(--painel2);border-bottom:1px solid var(--linha);
  border-top:1px solid var(--linha);position:sticky;top:0}
.avisos-barra .lista .secao:first-child{border-top:0}
/* O título não encolhe; quem encolhe é a explicação. Ao contrário, numa tela de
   390px o nome da natureza — a única coisa que a pessoa precisa ler — seria o
   primeiro a virar reticências. */
.avisos-barra .lista .secao b{font-size:13px;font-weight:700;flex:none}
.avisos-barra .lista .secao i{font-size:12px;color:var(--tinta4);font-style:normal;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.avisos-barra .lista .secao .conta{margin-left:auto;background:var(--tinta3);
  color:var(--painel)}
.avisos-barra .lista .secao.decisao{color:var(--critico)}
.avisos-barra .lista .secao.decisao .conta{background:var(--critico);color:var(--painel)}
.avisos-barra .lista .secao.trabalho{color:var(--indu-forte)}
.avisos-barra .lista .secao.trabalho .conta{background:var(--indu);color:var(--painel)}
.avisos-barra .lista .secao.risco{color:var(--atencao)}
.avisos-barra .lista .secao.risco .conta{background:var(--atencao);color:var(--painel)}

/* Uma forma de cada vez, escolhida pelo CSS. A que não vale fica em
   `display:none`, e assim também sai da tabulação e do leitor de tela. */
.avisos-barra .estreito{display:none}
@media (max-width:680px){
  .avisos-barra .largo{display:none}
  .avisos-barra .estreito{display:block}
  /* Três pílulas rotuladas aqui empurrariam a busca e o nome para fora da
     barra. Um botão só, e a separação continua viva dentro do painel. */
  .avisos-barra .estreito .gatilho{width:44px;height:44px;padding:0;
    justify-content:center;font-size:15px}
  .avisos-barra .estreito .gatilho .conta{position:absolute;top:-5px;right:-5px;
    background:var(--critico);color:var(--painel)}
  /* Preso à tela, não ao botão. Ancorado no botão, um painel de 340px pendurado
     à direita de uma tela de 390px começava fora dela: metade de cada aviso
     ficava cortada na margem esquerda, e não havia como rolar para ver. */
  .avisos-barra .lista{position:fixed;top:calc(58px + var(--topo-seguro));left:10px;right:10px;width:auto;
    max-height:calc(100vh - 74px - var(--topo-seguro))}
}
/* Dedo não acerta alvo de 30px. Onde não há mouse, tudo cresce. */
@media (pointer:coarse){
  .avisos-barra .gatilho{min-height:44px;padding:0 12px 0 12px}
  .avisos-barra .lista .item{padding:12px}
  .avisos-barra .lista .item strong{font-size:15px}
}

/* biblioteca da máquina: o papel que viaja com o equipamento */
.biblioteca-maquina{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:8px;padding:16px 16px}
.biblioteca-maquina .doc{display:flex;align-items:center;gap:8px;background:var(--painel2);
  border:1px solid var(--linha);border-radius:var(--r3);padding:12px 12px}
.biblioteca-maquina .doc > a{flex:1;text-decoration:none;min-width:0}
.biblioteca-maquina .doc .cat{display:block;font-size:12px;text-transform:uppercase;
  letter-spacing:.07em;color:var(--tinta4);font-weight:700}
.biblioteca-maquina .doc strong{display:block;font-size:13px;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.biblioteca-maquina .doc .quando{font-size:12px;color:var(--tinta4)}
.biblioteca-maquina .doc form{flex:none}

/* --------------------------------------------------------- RECEBIMENTO */
form.receber .caixas{display:flex;flex-wrap:wrap;gap:8px}
form.receber .grade-placa{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px}
form.receber .acoes-receber{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-bottom:24px}
form.receber .acoes-receber button{padding:12px 24px;font-size:15px;font-weight:600;
  border:0;border-radius:var(--r3);background:var(--indu);color:var(--tinta-acao);cursor:pointer}
form.receber .acoes-receber button:hover{background:var(--indu-forte)}
form.receber input[type=file]{padding:8px;font-size:13px}

.barra-proposta form.expedir{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.barra-proposta form.expedir input{width:170px;padding:8px 12px;font-size:13px;
  border:1px solid var(--painel2);border-radius:var(--r2);background-color:var(--painel2);
  color:var(--tinta)}
.barra-proposta form.expedir button.perigo{background:var(--critico);color:var(--tinta-acao);border-color:var(--critico)}
details.nova-oportunidade > summary{cursor:pointer;padding:12px 16px;font-size:15px;
  font-weight:600;color:var(--indu-forte);list-style:none}
details.nova-oportunidade > summary::-webkit-details-marker{display:none}
details.nova-oportunidade[open] > summary{border-bottom:1px solid var(--linha-fraca)}

/* ---------------------------------------------------------- QR DA OS */
/* O QR fica sempre preto no branco, inclusive no tema escuro: leitor de câmera
   precisa de contraste, não de harmonia com a tela. O bloco do QR na ficha da
   OS (`.qr-os*`) saiu em 06/10/2026 — a ficha Clean o desenha em `os-qr`
   (telas/os.css); o `.qr-svg` continua para a etiqueta e o painel. */
.qr-svg{width:100%;height:100%;display:block}
.qr-link-fila{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  margin:-4px 0 12px 4px;padding:0 12px;font-size:15px;font-weight:600;
  color:var(--tinta2);border-radius:var(--r2)}
.qr-link-fila:hover{color:var(--indu-forte);background:var(--indu-fraco)}
.card .rapidas .qr-etiquetar{font-size:15px}

/* ---------------------------------------------------- PAINEL DA OS (o que o QR abre) */
/* Fichas grandes, de um toque, para quem está de pé com o celular na mão. A cor da
   borda esquerda nunca é o único sinal: a ficha sem dado diz "Falta: …" por escrito. */
.hub-cabeca .corpo{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;
  justify-content:space-between}
.hub-ident{min-width:0}
.hub-ident h1{margin:4px 0 2px}
.hub-codigo{font-size:15px;font-weight:600;letter-spacing:.06em;color:var(--tinta3)}
.hub-acoes{display:flex;gap:8px;flex-wrap:wrap}
.hub-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));
  gap:12px;margin-top:16px}
.hub-ficha{display:flex;flex-direction:column;gap:8px;min-height:124px;padding:16px;
  border:1px solid var(--linha);border-radius:var(--r3);
  background:var(--painel);color:var(--tinta);text-decoration:none}
a.hub-ficha:hover{border-color:var(--indu)}
a.hub-ficha:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.hub-icone{font-size:22px;line-height:1;color:var(--tinta3)}
.hub-titulo{font-size:15px;font-weight:600;line-height:1.25}
.hub-detalhe{font-size:13px;color:var(--tinta2);line-height:1.4}
.hub-nota{font-size:13px;font-weight:600;color:var(--atencao)}
.hub-ficha-vazia{background:var(--painel2);border-style:dashed}
.hub-ficha-vazia .hub-titulo,.hub-ficha-vazia .hub-icone{color:var(--tinta3)}
.hub-tom-ok{border-left-color:var(--ok)}
.hub-tom-processo{border-left-color:var(--info)}
.hub-tom-atencao{border-left-color:var(--atencao)}
.hub-tom-critico{border-left-color:var(--critico)}
.hub-digitar input{min-height:44px;font-size:18px;letter-spacing:.08em;max-width:220px;
  text-transform:uppercase}
@media(max-width:600px){
  .hub-grade{grid-template-columns:1fr 1fr}
  .hub-ficha{min-height:112px}
}

/* ==========================================================================
   COMERCIAL · da peritagem à aprovação
   Seis colunas sem arrastar: mudar de situação exige um dado. Abaixo de 900 px
   o quadro vira lista — seis colunas de 260 px não cabem num celular.
   ========================================================================== */
.orc-quadro .coluna{flex:0 0 260px}
.orc-card-pe{display:flex;align-items:baseline;gap:8px;margin-top:8px;font-size:13px;
  color:var(--tinta3)}
.orc-card-valor{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-weight:600;
  color:var(--tinta2);font-variant-numeric:tabular-nums}
.card.orc-card-alerta::before{background:var(--atencao)}
.orc-card-aviso{margin-top:4px;font-size:13px;font-weight:600;color:var(--atencao)}
.orc-card-motivo{margin-top:4px;font-size:13px;color:var(--critico);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:900px){
  .orc-quadro{flex-direction:column;align-items:stretch;overflow-x:visible}
  .orc-quadro .coluna{flex:1 1 auto;width:100%}
}

.orc-estados{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:8px;margin:0 0 12px;padding:0}
.orc-passo{padding:8px 4px 0;border-top:3px solid var(--linha);font-size:13px;
  line-height:1.25;color:var(--tinta4)}
.orc-passo-feito{border-top-color:var(--ok);color:var(--tinta3)}
.orc-passo-atual{border-top-color:var(--tinta);color:var(--tinta);font-weight:700}
.orc-passo-reprovada{border-top-color:var(--critico);color:var(--critico)}
.orc-passo-aprovada{border-top-color:var(--ok);color:var(--ok)}
@media (max-width:700px){
  .orc-estados{grid-template-columns:1fr}
  .orc-passo{display:none}
  .orc-passo-atual{display:block}
}

.orc-acao{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px 24px;margin-bottom:16px;padding:16px 16px;border:1px solid var(--linha);
  border-left-width:3px;border-radius:var(--r3);background:var(--painel)}
.orc-tom-processo{border-left-color:var(--tinta3)}
.orc-tom-atencao{border-left-color:var(--atencao)}
.orc-tom-ok{border-left-color:var(--ok)}
.orc-tom-critico{border-left-color:var(--critico)}
.orc-acao-texto{flex:1 1 280px;min-width:0}
.orc-acao-estado{display:block;font-size:18px;font-weight:700;letter-spacing:-.01em}
.orc-acao-detalhe{margin:3px 0 0;font-size:13px;color:var(--tinta3)}
.orc-acao-alerta{font-weight:600;color:var(--atencao)}
.orc-acao-botoes{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px}
.orc-acao-botoes .botao,.orc-acao-botoes button{min-height:44px}
.orc-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;margin:0}
.orc-form select,.orc-form input{width:auto;min-height:44px;max-width:100%}
.orc-rot{display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--tinta3)}
.orc-recusa summary{display:inline-flex;align-items:center;min-height:44px;
  list-style:none;cursor:pointer}
.orc-recusa summary::-webkit-details-marker{display:none}
.orc-recusa[open] .orc-form{margin-top:8px}
.orc-linha{margin:0 0 8px;font-size:15px;line-height:1.45}
.orc-linha .rotulo-linha{margin-right:8px}

/* ==========================================================================
   PÁGINAS PÚBLICAS DO APLICATIVO · privacidade, suporte, exclusão de conta
   Abertas sem login: quem revisa o app na loja não tem conta.
   ========================================================================== */
.app-legal{max-width:760px;margin:0 auto;padding:32px 24px 48px;box-sizing:border-box;
  font-size:15px;line-height:1.6;color:var(--tinta)}
.app-legal h1{font-size:28px;line-height:1.25;margin:12px 0 4px;text-wrap:balance}
.app-legal h2{font-size:18px;margin:32px 0 8px}
.app-legal p,.app-legal li{margin:0 0 12px}
.app-legal ul{padding-left:24px;margin:0 0 12px}
.app-legal a{color:var(--tinta);text-decoration:underline;text-underline-offset:3px}
.app-legal-data{font-size:15px;color:var(--tinta3);margin:0 0 16px}
.app-legal-rodape{margin-top:32px;padding-top:16px;border-top:1px solid var(--linha);
  display:flex;flex-wrap:wrap;gap:8px 16px;font-size:15px}

@media (pointer:coarse){
  /* Qualquer tela de toque, não só a estreita: o tablet do galpão tem 10 polegadas
     e continua sendo dedo com luva. */
  .tarefa .marca-check{width:44px;height:44px;min-width:44px;font-size:18px}
  .botao,button{min-height:44px}
  .chip{min-height:var(--toque)}
}

/* ==========================================================================
   OS, NF DE REMESSA E CNPJ · 16/09/2026
   O número da OS virou campo digitado e título do cartão; a NF de remessa
   ganhou campo próprio; o cliente passou a ser achado pelo CNPJ.
   ========================================================================== */

/* O número da OS no alto do cartão. É o que a pessoa procura no quadro — e
   procurar pelo número lendo modelo de motor era varrer a coluna inteira. */
.card .cartao-os{font-family:"IBM Plex Mono",monospace;font-weight:600;
  font-size:15px;letter-spacing:-.01em;color:var(--tinta);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .linha-quem .maquina{font-size:13px;font-weight:500;color:var(--tinta2);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Selo de exceção do cartão da oficina: palavra curta, não ponto. Quem está de
   luva não passa o mouse para descobrir que a máquina é Ex. */
/* `.cartao-selo` já define fundo, cor, peso e forma lá em cima. Aqui só o corpo
   da fonte muda: o cartão da oficina é lido de mais longe que o do funil.
   Repetir as outras cinco declarações fazia a cópia envelhecer calada. */
.card .cartao-selo{font-size:11px}
.card .cartao-selo.t-critico{background:var(--critico-fraco);color:var(--critico)}
.card .cartao-selo.t-atencao{background:var(--atencao-fraco);color:var(--atencao)}
.card .cartao-selo.t-ok{background:var(--ok-fraco);color:var(--ok)}
/* O que o "Aprovado" do vendedor disse sobre a máquina, no alto da OS. */
.os-autorizacao-linha{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e2);
  margin:0 0 var(--e2)}
.os-autorizacao-linha span{color:var(--tinta3);font-size:var(--letra-nota)}

/* O número da OS no recebimento: o campo principal da tela, com o tamanho que
   isso significa. Quem recebe digita este antes de qualquer outra coisa. */
.rec-os{display:grid;gap:8px;grid-template-columns:minmax(160px,220px) 1fr;
  align-items:end}
.rec-os input.rec-os-numero{font-family:"IBM Plex Mono",monospace;font-size:18px;
  font-weight:600;letter-spacing:.02em;min-height:48px}
.rec-os-dica{font-style:normal;font-size:13px;color:var(--tinta3);line-height:1.45}
@media (max-width:640px){ .rec-os{grid-template-columns:1fr} }

/* A nota que acompanha a máquina. Rotulada pelo nome que ela tem no papel: já
   foi só "Número", ao lado do número da OS, e os dois trocavam de lugar. */
.rec-nota{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.rec-nota input{min-height:44px}

/* "Recuperamos o que você tinha preenchido": o aviso que fecha o buraco entre a
   conexão cair e a pessoa perceber que perdeu o trabalho. */
.vist-rascunho{display:flex;align-items:flex-start;gap:12px;margin:0 0 12px;
  padding:12px 16px;border-radius:var(--r2);border-left:3px solid var(--atencao);
  background:var(--painel2);font-size:15px;line-height:1.5;color:var(--tinta2)}
.vist-rascunho b{color:var(--tinta)}
.vist-rascunho button{margin-left:auto;flex:none;min-height:44px;padding:0 16px;
  border:1px solid var(--linha);border-radius:var(--r2);background:var(--painel);
  color:var(--tinta2);font-size:13px;cursor:pointer}
.vist-rascunho-guardando{font-size:13px;color:var(--tinta4);margin:0 0 12px}

/* CNPJ: digita, procura em casa, e só então pergunta à Receita. */
.cli-cnpj{display:grid;gap:8px;grid-template-columns:minmax(180px,240px) auto 1fr;
  align-items:end}
.cli-cnpj input{font-family:"IBM Plex Mono",monospace;font-size:15px;min-height:44px}
.cli-cnpj button{min-height:44px;white-space:nowrap}
@media (max-width:640px){ .cli-cnpj{grid-template-columns:1fr} }
.cli-resposta{margin:12px 0 0;padding:12px 16px;border-radius:var(--r2);
  border-left:3px solid var(--linha);background:var(--painel2);font-size:15px;
  line-height:1.5;color:var(--tinta2)}
.cli-resposta[data-tom="ok"]{border-left-color:var(--ok)}
.cli-resposta[data-tom="atencao"]{border-left-color:var(--atencao)}
.cli-resposta[data-tom="critico"]{border-left-color:var(--critico)}
.cli-resposta strong{display:block;color:var(--tinta);margin-bottom:3px}
.cli-resposta a{color:var(--tinta)}
.cli-conferir{margin-top:8px;display:grid;gap:4px;font-size:13px}
.cli-conferir span{color:var(--tinta3)}
.cli-conferir b{color:var(--tinta);font-weight:600}
.cli-novo summary{display:inline-flex;align-items:center;min-height:44px;
  cursor:pointer;font-size:15px;font-weight:600;color:var(--indu-forte);list-style:none}
.cli-novo summary::-webkit-details-marker{display:none}
/* Pares de peso igual dentro do cadastro no portão. A `.dupla` da casa é
   larga + estreita (serve para Cidade + UF); nome e razão social, contato e
   cargo, telefone e e-mail merecem a mesma largura. */
.cli-novo .cli-par{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:640px){ .cli-novo .cli-par{grid-template-columns:1fr} }
/* ==========================================================================
   MONTAGEM E MATERIAL PARADO
   Prefixos `mont-` e `alm-`: nome de uma palavra pertence à folha base, e já
   pintou a tela errada três vezes (ver test_folha_de_estilo).
   ========================================================================== */

/* O atalho na bancada: quem vai montar precisa do que a desmontagem registrou. */
.mont-atalho{display:flex;align-items:center;gap:12px;padding:16px 16px;margin-bottom:12px;
  background:var(--painel);border:1px solid var(--linha);
  border-radius:var(--r3);color:inherit;text-decoration:none}
.mont-atalho strong{display:block;font-size:15px}
.mont-atalho span{color:var(--tinta3);font-size:13px}
.mont-atalho div{flex:1;min-width:0}
.mont-atalho-marca{font-size:22px;color:var(--indu-forte)}
.mont-atalho-seta{font-size:22px;color:var(--tinta4)}
.mont-atalho-parado{border-left-color:var(--bloqueio);background:var(--bloqueio-fraco)}

/* A montagem parada, no topo da tela dela. */
.mont-parada{display:flex;align-items:center;gap:16px;padding:16px;margin-bottom:8px;
  background:var(--bloqueio-fraco);border:1px solid var(--bloqueio);border-radius:var(--r3)}
.mont-parada-marca{font-size:22px}
.mont-parada-texto{flex:1;min-width:0}
.mont-parada-texto strong{display:block;font-size:15px}
.mont-parada-texto span{font-size:13px;color:var(--tinta2)}
.mont-parada-chegou{background:var(--ok-fraco);border-color:var(--ok)}

/* Os checkboxes do que falta. Já foi dito na desmontagem: aqui só se marca. */
.mont-pecas{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px}
.mont-falta summary{color:var(--bloqueio)}

/* Os quatro carimbos da montagem: recebida, aceita, iniciada, finalizada.
   Sem número de hora em lugar nenhum — o que se lê aqui é quem e quando. */
.mont-passos{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;padding:0;list-style:none}
.mont-passo{display:flex;align-items:center;gap:12px;flex:1 1 200px;min-width:0;
  padding:12px 12px;background:var(--painel);border:1px solid var(--linha);
  border-radius:var(--r3)}
.mont-passo-marca{font-size:18px;color:var(--tinta4)}
.mont-passo-texto{min-width:0}
.mont-passo-texto strong{display:block;font-size:15px}
.mont-passo-texto span{font-size:13px;color:var(--tinta3)}
.mont-passo-feito{border-color:var(--ok);background:var(--ok-fraco)}
.mont-passo-feito .mont-passo-marca{color:var(--ok)}

/* O trecho final da vida da máquina, para quem está com ela na mão. */
.mont-trilho{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0;padding:0;list-style:none}
.mont-trilho-passo{flex:1 1 130px;padding:8px 12px;border-radius:var(--r2);
  background:var(--painel);border:1px solid var(--linha)}
.mont-trilho-passo span{display:block;font-size:13px;font-weight:600}
.mont-trilho-passo em{font-style:normal;font-size:13px;color:var(--tinta3)}
.mont-trilho-feito{border-color:var(--ok);background:var(--ok-fraco)}
.mont-trilho-fora{opacity:.55}

/* Pintura barrada por ensaio reprovado, e o contrário dela. */
.mont-barrada{display:flex;align-items:flex-start;gap:16px;padding:16px;margin-bottom:12px;
  background:var(--critico-fraco);border:1px solid var(--critico);border-radius:var(--r3)}
.mont-barrada-marca{font-size:22px}
.mont-barrada strong{display:block;font-size:15px}
.mont-barrada span{display:block;font-size:13px;color:var(--tinta2);margin-top:2px}
.mont-barrada a{display:inline-block;margin-top:8px;font-size:13px}
.mont-liberada{display:flex;align-items:center;gap:16px;padding:16px 16px;margin-bottom:12px;
  background:var(--ok-fraco);border:1px solid var(--ok);border-radius:var(--r3)}
.mont-liberada-marca{font-size:22px;color:var(--ok)}
.mont-liberada strong{display:block;font-size:15px}
.mont-liberada span{font-size:13px;color:var(--tinta2)}

/* Finalizar a montagem, com a observação opcional do lado. */
.mont-fechar{margin-bottom:4px}
.mont-falta-fechar{padding:16px 16px;margin-bottom:12px;border-radius:var(--r3);
  background:var(--atencao-fraco);border:1px solid var(--atencao)}
.mont-falta-fechar strong{display:block;font-size:15px;margin-bottom:4px}
.mont-falta-fechar ul{margin:0;padding-left:16px;font-size:13px;color:var(--tinta2)}

/* Os hold points: o que não se monta sem. Cor nunca sozinha — cada linha tem
   ícone, título e a origem da exigência escrita ao lado. */
.mont-guarda{margin:0 0 12px;padding:0;list-style:none}
.mont-guarda-item{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;
  margin-bottom:8px;border-radius:var(--r3);border:1px solid var(--linha);
  background:var(--painel2)}
.mont-guarda-item div{flex:1;min-width:0}
.mont-guarda-item strong{display:block;font-size:15px}
.mont-guarda-item span{display:block;font-size:13px;color:var(--tinta2);margin-top:2px}
.mont-guarda-marca{font-size:18px}
.mont-guarda-fonte{display:block;margin-top:4px;font-style:normal;font-size:12px;
  font-weight:700;letter-spacing:.06em;color:var(--tinta4)}
.mont-guarda-bloqueio{border-color:var(--bloqueio);background:var(--bloqueio-fraco)}
.mont-guarda-atencao{border-color:var(--atencao);background:var(--atencao-fraco)}
.mont-guarda-ok{border-color:var(--ok);background:var(--ok-fraco)}

/* Entreferro, torque e alinhamento: leitura de instrumento, não frase solta. */
.mont-medidas{margin-top:16px}
.mont-medida-grupo{margin-bottom:12px}
.mont-medida-linhas{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.mont-medida{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:8px 12px;border-radius:var(--r2);background:var(--painel2)}
.mont-medida b{font-size:18px;font-variant-numeric:tabular-nums}
.mont-medida span{font-size:13px;color:var(--tinta2)}
.mont-medir{margin-top:8px}

/* Um ensaio obrigatório por linha, com o veredito da norma. */
.ensaio-linha{display:flex;align-items:center;gap:12px;padding:12px 16px;
  border-bottom:1px solid var(--linha-fraca);color:inherit;text-decoration:none}
.ensaio-marca{font-size:18px;color:var(--tinta4)}
.ensaio-texto{flex:1;min-width:0}
.ensaio-texto strong{display:block;font-size:15px}
.ensaio-texto span{font-size:13px;color:var(--tinta3)}
.ensaio-seta{font-size:18px;color:var(--tinta4)}
.ensaio-reprovado{background:var(--critico-fraco)}
.ensaio-reprovado .ensaio-marca{color:var(--critico)}
.ensaio-validar{background:var(--atencao-fraco)}

/* A frase que quem fechou a etapa quis deixar para quem vier depois. */
.bancada-observacao{display:block;font-size:13px;color:var(--tinta2);margin-top:4px;
  font-style:italic}

/* Material parado: uma linha por montagem que não fecha. */
.alm-linha{display:flex;gap:16px;justify-content:space-between;align-items:flex-start;
  flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--linha-fraca)}
.alm-linha:last-child{border-bottom:0}
.alm-linha-chegou{border-left:3px solid var(--ok);padding-left:12px}
.alm-oque{flex:1;min-width:250px}
.alm-oque strong{font-size:15px;margin-right:8px}
.alm-oque .tecnico{margin-top:3px}
.alm-resposta{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
.alm-esperando{font-size:13px;color:var(--tinta3);max-width:220px}

/* ==========================================================================
   CENTRO DE PRODUÇÃO — prefixo cp-
   Quatro faróis, quatro listas curtas, o detalhe no pé. Nada aqui é decorativo:
   toda caixa desta tela é um `<a>` com destino, e a cor vem do estado, nunca do
   gosto (Constituição §3). Lida em monitor de escritório (1440×900) e em tablet.
   ========================================================================== */
.cp-atalhos{display:flex;gap:8px;flex-wrap:wrap}

/* O tom define duas variáveis e só; cada componente pinta o que lhe cabe. Sem
   isto seriam seis regras por componente e a próxima cor esqueceria uma. */
.cp-tom-critico{--cp-cor:var(--critico);--cp-cor-fraca:var(--critico-fraco)}
.cp-tom-atencao{--cp-cor:var(--atencao);--cp-cor-fraca:var(--atencao-fraco)}
.cp-tom-bloqueio{--cp-cor:var(--bloqueio);--cp-cor-fraca:var(--bloqueio-fraco)}
.cp-tom-ok{--cp-cor:var(--ok);--cp-cor-fraca:var(--ok-fraco)}
.cp-tom-info{--cp-cor:var(--info);--cp-cor-fraca:var(--info-fraco)}
.cp-tom-neutro{--cp-cor:var(--tinta2);--cp-cor-fraca:var(--painel2)}

/* ---------- a faixa do alto: só o que muda decisão hoje ---------- */
.cp-faixa{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 16px}
/* Os quatro faróis vinham com 4px de cor na borda esquerda, e a cor já estava
   dita três vezes no mesmo cartão: no número de 44px, no verbo de ação e na
   borda que acende ao passar o ponteiro. A quarta vez era a menos lida e a
   mais genérica — e em `cp-tom-neutro` era um risco cinza escuro para dizer
   "nada a relatar", que é enfeite puro. Saiu. O posto passa a ser o mesmo dos
   indicadores: crítico leva a superfície, atenção leva a borda, o resto fica
   branco e quieto. */
.cp-farol{display:flex;flex-direction:column;gap:2px;padding:16px 16px 12px;
  background:var(--painel);border:1px solid var(--linha);
  border-radius:4px;text-decoration:none;color:inherit;min-height:118px}
.cp-farol.cp-tom-critico{background:var(--cp-cor-fraca);border-color:var(--cp-cor)}
.cp-farol.cp-tom-atencao{border-color:var(--cp-cor)}
.cp-farol:hover,.cp-farol:focus-visible{border-color:var(--cp-cor,var(--tinta2));
  box-shadow:0 0 0 1px var(--cp-cor,var(--tinta2)) inset}
.cp-farol-rotulo{font-size:12px;text-transform:uppercase;letter-spacing:.08em;
  font-weight:600;color:var(--tinta3)}
.cp-farol-valor{font-family:"IBM Plex Mono",monospace;font-size:44px;line-height:1.02;
  font-weight:700;letter-spacing:-.04em;color:var(--cp-cor,var(--tinta2));margin:2px 0 1px}
/* Nem todo farol tem número. Quando não há prazo prometido em nenhuma OS, o
   domínio responde "sem data" em vez de inventar um zero — e está certo: zero
   seria anunciar uma boa notícia que ninguém apurou. Errada estava a caixa,
   que punha a palavra em 44px de mono e a partia no meio, com "data" saindo
   por cima do rodapé do cartão. Palavra se compõe como palavra. */
.cp-farol-texto{font-family:inherit;font-size:22px;letter-spacing:-.015em;
  line-height:1.2;margin:4px 0 2px}
.cp-farol-detalhe{font-size:13px;color:var(--tinta2);line-height:1.34;flex:1}
.cp-farol-acao{font-size:13px;font-weight:600;color:var(--cp-cor,var(--tinta2));margin-top:8px}

/* ---------- as quatro listas ---------- */
.cp-grade{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.cp-bloco{background:var(--painel);border:1px solid var(--linha);border-radius:4px;
  overflow:hidden}
.cp-cabeca{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:12px 16px;border-bottom:1px solid var(--linha-fraca);background:var(--painel2)}
.cp-cabeca h2{font-size:15px;font-weight:700;margin:0;letter-spacing:-.01em}
.cp-conta{font-size:13px;color:var(--tinta3);text-align:right}

.cp-item{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;
  padding:12px 16px;border-bottom:1px solid var(--linha-fraca);
  text-decoration:none;color:inherit;min-height:56px}
.cp-item:last-child{border-bottom:0}
.cp-item:hover,.cp-item:focus-visible{background:var(--cp-cor-fraca,var(--painel2))}
.cp-item-num{font-family:"IBM Plex Mono",monospace;font-size:28px;font-weight:700;
  color:var(--cp-cor,var(--tinta2));letter-spacing:-.03em;text-align:right}
.cp-item-num i{font-style:normal;font-size:15px;color:var(--tinta4);font-weight:500}
.cp-item-texto strong{display:block;font-size:15px;font-weight:600;line-height:1.3}
.cp-item-texto em{display:block;font-style:normal;font-size:13px;color:var(--tinta3);
  line-height:1.35;margin-top:2px}
.cp-item-seta{font-size:13px;font-weight:600;color:var(--cp-cor,var(--tinta2));white-space:nowrap}
.cp-quieto{margin:0;padding:24px 16px;font-size:13px;color:var(--tinta3);
  line-height:1.45}
.cp-rodape-bloco{display:block;padding:12px 16px;font-size:13px;line-height:1.4;
  color:var(--tinta2);background:var(--painel2);border-top:1px solid var(--linha-fraca);
  text-decoration:none}
.cp-rodape-bloco:hover{color:var(--tinta)}

/* ---------- carga por recurso: a barra é a FILA LIBERADA ---------- */
/* Carga presa atrás de bloqueio fica de fora de propósito: ela não se resolve
   pondo mais gente, e misturar as duas faz contratar bobinador por causa de
   compras (ver docs/DECISOES.md e `pcp.CargaRecurso.fila_liberada`). */
.cp-recurso{display:grid;grid-template-columns:150px 1fr 108px;gap:12px;
  align-items:center;padding:12px 16px;border-bottom:1px solid var(--linha-fraca);
  text-decoration:none;color:inherit;min-height:52px}
.cp-recurso:last-of-type{border-bottom:0}
.cp-recurso:hover,.cp-recurso:focus-visible{background:var(--painel2)}
.cp-recurso-nome{font-size:13px;font-weight:600;line-height:1.25}
.cp-recurso-nome b{display:block;font-size:12px;text-transform:uppercase;
  letter-spacing:.07em;color:var(--tinta)}
.cp-recurso-num{font-family:"IBM Plex Mono",monospace;font-size:15px;font-weight:600;
  text-align:right}
.cp-recurso-num em{display:block;font-style:normal;font-family:"IBM Plex Sans",sans-serif;
  font-size:12px;font-weight:400;color:var(--tinta3);margin-top:1px}
.cp-barra{display:block;height:10px;border-radius:var(--r1);background:var(--painel3);
  overflow:hidden}
.cp-barra-carga{display:block;height:100%;background:var(--ok);border-radius:var(--r1)}
.cp-e-gargalo{background:transparent}
.cp-e-gargalo .cp-barra-carga{background:var(--tinta)}

/* ---------- o detalhe, no pé: em qual encostar primeiro ---------- */
.cp-sequencia{margin-top:12px}
.cp-tabela{display:block}
.cp-fila{display:grid;grid-template-columns:104px minmax(150px,1.2fr) minmax(120px,1fr) 78px 84px 92px;
  gap:12px;align-items:center;padding:8px 16px;
  border-bottom:1px solid var(--linha-fraca);text-decoration:none;color:inherit;
  border-left:3px solid var(--cp-cor,transparent)}
.cp-fila:last-child{border-bottom:0}
.cp-fila:hover,.cp-fila:focus-visible{background:var(--cp-cor-fraca,var(--painel2))}
.cp-fila-os{font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:600}
.cp-fila-maquina{font-size:13px;font-weight:500;line-height:1.25;min-width:0}
.cp-fila-maquina em{display:block;font-style:normal;font-size:12px;color:var(--tinta4);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Selo de exceção na fila de decidir onde encostar primeiro — mesma regra do
   `.cartao-selo` do Quadro: quem escolhe a próxima máquina não pode descobrir
   depois que ela é Ex. */
.cp-fila-selo{font-size:11px;font-weight:700;letter-spacing:.04em;padding:0 4px;
  margin-left:8px;border-radius:4px;background:var(--info-fraco);color:var(--info)}
.cp-fila-selo.t-critico{background:var(--critico-fraco);color:var(--critico)}
.cp-fila-motivo{font-size:13px;color:var(--tinta3);line-height:1.3}
.cp-fila-trabalho,.cp-fila-prazo{font-family:"IBM Plex Mono",monospace;font-size:15px;
  font-weight:600;text-align:right}
.cp-fila-prazo{color:var(--cp-cor,var(--tinta2))}
.cp-fila-trabalho em,.cp-fila-prazo em{display:block;font-style:normal;
  font-family:"IBM Plex Sans",sans-serif;font-size:12px;font-weight:400;
  color:var(--tinta4);margin-top:1px}
.cp-fila-marca{font-size:12px;text-transform:uppercase;letter-spacing:.06em;
  font-weight:600;color:var(--cp-cor,var(--tinta2));text-align:right}

.cp-regua{margin:16px 0 0;font-size:13px;line-height:1.6;color:var(--tinta3);
  max-width:64ch;border-top:1px solid var(--linha-fraca);padding-top:12px}
.cp-regua strong{color:var(--tinta2)}

/* Tablet do escritório e monitor estreito: os faróis passam a dois, as listas a
   uma coluna, e a tabela do pé vira três colunas — o que sobra do prazo é o que
   menos se olha em pé. */
@media (max-width:1180px){
  .cp-faixa{grid-template-columns:1fr 1fr}
  .cp-grade{grid-template-columns:1fr}
  .cp-fila{grid-template-columns:96px 1fr 84px 88px}
  .cp-fila-motivo,.cp-fila-trabalho{display:none}
}
@media (max-width:680px){
  .cp-faixa{grid-template-columns:1fr}
  .cp-farol{min-height:0}
  .cp-farol-valor{font-size:34px}
  .cp-recurso{grid-template-columns:1fr 92px}
  .cp-recurso .cp-barra{grid-column:1/-1}
  .cp-fila{grid-template-columns:1fr 84px}
  .cp-fila-prazo{display:none}
}

/* ==========================================================================
   VISITAS, COLETAS E ENTREGAS
   Prefixo `vis-`. A tela de quem visita é de celular, de uma mão só, muitas
   vezes no sol do pátio do cliente: alvo grande, contraste alto, um botão por
   vez. A tela de quem cobra é de computador e pode ser densa.
   ========================================================================== */

/* O cartão que come a tela: a visita de agora, ou a próxima. */
/* Sem trilho. Ele distinguia "agora" de "a próxima" por cor, e logo acima do
   texto há um rótulo em caixa alta que diz qual das duas é — por escrito. Há
   um cartão destes por vez na tela: não existe nada para varrer com o olho, e
   o trilho não comprava velocidade nenhuma. O rótulo continua com o coral. */
.vis-agora{background:var(--painel);border:1px solid var(--linha);
  border-radius:var(--r3);padding:16px 16px 16px;
  margin-bottom:16px;display:flex;flex-direction:column;gap:4px}
.vis-agora strong{font-size:22px;letter-spacing:-.015em;line-height:1.2}
.vis-agora form{margin-top:12px}
.vis-agora-rot{font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;color:var(--tinta)}
.vis-agora-proxima .vis-agora-rot{color:var(--tinta2)}
.vis-agora-tempo{font-family:"IBM Plex Mono",monospace;font-size:15px;font-weight:600;
  color:var(--ok)}
.vis-agora-desde{font-size:13px;color:var(--tinta3)}
.vis-agora-onde{font-size:13px;color:var(--tinta2)}
.vis-agora-link{margin-top:12px;font-size:13px;color:var(--tinta2);font-weight:600}

/* O botão que a pessoa aperta com luva, no sol, andando. 56 px de alvo. */
.vis-acao{width:100%;min-height:56px;font-size:18px;font-weight:700;border-radius:var(--r3);
  background:var(--ok);color:var(--tinta-acao);border:0;letter-spacing:-.01em}
.vis-acao:hover{filter:brightness(1.06)}
.vis-acao:disabled{opacity:.7}
.vis-acao-sai{background:var(--tinta)}

/* O aviso que precisa ser lido ANTES de gravar. */
.vis-nota{background:var(--painel2);border:1px solid var(--linha);border-radius:var(--r3);
  padding:12px 16px;font-size:13px;line-height:1.55;color:var(--tinta2);
  margin-bottom:16px}
.vis-nota b{color:var(--tinta)}
.vis-nota em{font-style:normal;font-weight:600;color:var(--tinta)}
.vis-nota form{margin-top:12px}
.vis-nota-forte{background:var(--atencao-fraco);border-color:var(--atencao)}

/* A lista de visitas. Uma linha por ida ao cliente. */
.vis-lista{display:flex;flex-direction:column}
.vis-linha{display:flex;gap:16px;align-items:flex-start;padding:12px 2px;
  border-bottom:1px solid var(--linha-fraca);cursor:pointer}
.vis-linha:last-child{border-bottom:0}
.vis-linha:hover{background:var(--painel2)}
.vis-linha-hora{min-width:52px;text-align:center;line-height:1.15}
.vis-linha-hora b{display:block;font-family:"IBM Plex Mono",monospace;font-size:15px;
  font-weight:700}
.vis-linha-hora span{font-size:12px;color:var(--tinta4)}
.vis-linha-quem{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.vis-linha-quem strong{font-size:15px;font-weight:650;letter-spacing:-.01em}
.vis-linha-marcas{display:flex;flex-wrap:wrap;gap:4px;align-items:center;
  justify-content:flex-end;max-width:46%}
.vis-linha-os .vis-linha-hora b{font-size:13px}

/* A ficha da visita: o que a pessoa precisa saber antes de descer do carro. */
.vis-ficha{display:grid;gap:8px;background:var(--painel);border:1px solid var(--linha);
  border-radius:var(--r3);padding:16px 16px;margin-bottom:16px}
.vis-ficha > div{display:flex;gap:12px;align-items:baseline;font-size:15px}
.vis-ficha span{min-width:112px;color:var(--tinta3);font-size:13px;
  text-transform:uppercase;letter-spacing:.06em}
.vis-ficha b{flex:1;font-weight:600}

/* Os dois carimbos: chegada e saída, com o que se soube da localização. */
.vis-carimbos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.vis-carimbo{background:var(--painel2);border:1px solid var(--linha-fraca);
  border-radius:var(--r3);padding:12px;display:flex;flex-direction:column;gap:2px}
.vis-carimbo span{font-size:12px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--tinta4);font-weight:700}
.vis-carimbo b{font-family:"IBM Plex Mono",monospace;font-size:15px}
.vis-carimbo em{font-style:normal;font-size:13px;color:var(--tinta3);line-height:1.4}
.vis-carimbo-feito{background:var(--ok-fraco);border-color:var(--ok)}

.vis-dica{font-size:13px;color:var(--tinta3);line-height:1.5;margin:8px 0 0}
.vis-dica-critica{color:var(--critico);font-weight:600}

/* Localização aproximada ou ausente: dita com o tamanho do erro, nunca escondida
   (28/09/2026). A ajuda por sistema é a mesma nota forte das outras visitas. */
.vis-carimbo em.vis-local-aprox,.vis-agora-desde .vis-local-aprox{color:var(--atencao);font-weight:600}
.vis-carimbo em.vis-local-falta{color:var(--atencao)}
.vis-gps-ajuda ul{margin:var(--e1) 0 var(--e1) var(--e4);padding:0}
.vis-gps-ajuda li{margin:2px 0}
.vis-gps-escolha{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.vis-gps-escolha button{flex:1 1 160px;min-height:var(--toque)}
.vis-gps-testar{min-height:var(--toque);width:100%;max-width:360px}
.vis-onde .vis-linha-quem a{color:inherit}

/* Fotos da coleta e da entrega. */
.vis-fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:12px;margin-bottom:16px}
.vis-foto{display:block;border:1px solid var(--linha);border-radius:var(--r3);
  overflow:hidden;background:var(--painel2);color:inherit;text-decoration:none}
.vis-foto img{display:block;width:100%;height:110px;object-fit:cover}
.vis-foto span{display:block;padding:8px 8px;font-size:12px;color:var(--tinta3)}
.vis-foto-forma{margin-bottom:12px}
.vis-camera{display:flex;align-items:center;justify-content:center;min-height:56px;
  border:1px dashed var(--borda-viva);border-radius:var(--r3);color:var(--tinta2);font-weight:650;
  font-size:15px;cursor:pointer;margin-bottom:8px;text-align:center;padding:12px}
.vis-camera input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.vis-camera-doc{border-color:var(--tinta4);color:var(--tinta2)}

/* O relato, que entra e não sai mais. */
.vis-relato{border-left:3px solid var(--linha);padding:2px 0 12px 12px;
  margin-bottom:12px}
.vis-relato p{margin:8px 0 0;font-size:15px;line-height:1.55;white-space:pre-wrap}
.vis-relato audio{margin-top:8px;width:100%;max-width:420px}
.vis-relato-cabeca{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
/* A transcrição fica recuada e acinzentada em relação ao relato: o que a pessoa
   disse tem peso de testemunho, o que a máquina ouviu tem peso de anotação. */
.vis-transcricao{margin-top:12px;padding:12px 12px;border-radius:var(--r2);
  background:var(--painel2);border:1px solid var(--linha-fraca)}
.vis-transcricao p{margin:8px 0;font-size:var(--letra-corpo);color:var(--tinta3)}
.vis-etiqueta-maquina{display:inline-block;font-size:var(--letra-micro);
  letter-spacing:.06em;text-transform:uppercase;font-weight:600;
  color:var(--info);background:var(--info-fraco);border-radius:99px;
  padding:2px 8px}
.vis-transcricao-falhou{margin-top:8px}
.vis-relato-cabeca b{font-size:13px}
.vis-relato-forma{margin-top:8px}

/* O gravador, no celular. */
.vis-gravador{display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  background:var(--painel2);border:1px solid var(--linha-fraca);border-radius:var(--r3);
  padding:12px;margin-bottom:12px}
.vis-gravador audio{flex:1 0 100%;margin-top:4px}
.vis-gravador p{flex:1 0 100%;margin:0}
/* Enquanto não grava, o recado está vazio — e um parágrafo vazio de largura
   inteira só faz o quadro cinza crescer sem nada dentro. */
.vis-gravador p:empty{display:none}
.vis-gravar{min-height:48px;padding:0 16px;border-radius:var(--r3);font-weight:700;
  font-size:15px;background:var(--indu);color:var(--tinta-acao);border:0}
.vis-gravar[data-gravando]{background:var(--critico);animation:vis-pulsar 1.4s infinite}
.vis-tempo{font-size:18px;font-weight:700;color:var(--tinta2)}
@keyframes vis-pulsar{0%,100%{opacity:1}50%{opacity:.65}}
@media (prefers-reduced-motion:reduce){.vis-gravar[data-gravando]{animation:none}}

/* A tela de quem cobra. */
.vis-pessoas{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:12px;margin-bottom:16px}
.vis-pessoa{display:flex;flex-direction:column;gap:2px;padding:12px 16px;
  background:var(--painel2);border:1px solid var(--linha);border-radius:var(--r3);
  color:inherit;text-decoration:none}
.vis-pessoa:hover{border-color:var(--indu)}
.vis-pessoa strong{font-size:15px}
.vis-pessoa .chamada{margin-top:8px;font-size:13px;color:var(--indu-forte);font-weight:600}

/* A agenda da equipe em dia, semana e mês (pedido do dono, 24/09/2026): o que
   vai ser feito e o que já foi, em cards. A barra de período vem antes de tudo,
   porque é ela que diz de quando é cada número abaixo dela. */
.vis-agenda-barra{display:flex;flex-wrap:wrap;gap:var(--e3);align-items:flex-end;
  margin-bottom:var(--e5)}
.vis-agenda-passo{display:flex;gap:var(--e2);align-items:center}
.vis-agenda-passo .botao{min-width:var(--toque);justify-content:center}
.vis-agenda-rotulo{font-size:var(--letra-corpo);font-weight:600;min-width:14ch;
  text-align:center;font-variant-numeric:tabular-nums}
.vis-agenda-filtro{display:flex;flex-wrap:wrap;gap:var(--e2);align-items:flex-end;
  margin-left:auto}
.vis-agenda-campo{display:flex;flex-direction:column;gap:var(--e1);
  font-size:var(--letra-nota);color:var(--tinta3)}

/* A semana: sete colunas na mesa. Cada coluna é um dia, e o card é a visita. */
.vis-semana{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--e2)}
.vis-semana-dia{display:flex;flex-direction:column;gap:var(--e2);min-width:0;
  padding:var(--e2);background:var(--painel2);border-radius:var(--r2)}
.vis-semana-dia.vis-hoje{box-shadow:inset 0 0 0 2px var(--indu)}
.vis-semana-cab{display:flex;align-items:baseline;gap:var(--e2);min-height:var(--toque);
  align-content:center;flex-wrap:wrap;padding:var(--e2) var(--e1);color:var(--tinta3);
  font-size:var(--letra-nota);text-decoration:none}
.vis-semana-cab:hover{color:var(--indu-forte);text-decoration:none}
.vis-semana-cab b{color:var(--tinta);font-size:var(--letra-corpo)}
.vis-hoje .vis-semana-cab span:first-child{color:var(--indu-forte);font-weight:600}
.vis-semana-conta{margin-left:auto;font-weight:600;color:var(--tinta2)}
.vis-semana-nada{margin:0;padding:0 var(--e1) var(--e2);font-size:var(--letra-nota);
  color:var(--tinta4)}

/* O card da visita: hora e situação em cima, o cliente no meio, quem e o quê
   embaixo. O cartão inteiro é o alvo — 44 px no mínimo, luva ou mouse. */
.vis-card{display:flex;flex-direction:column;gap:2px;min-width:0;min-height:var(--toque);
  padding:var(--e2) var(--e3);background:var(--painel);border:1px solid var(--linha);
  border-radius:var(--r2);color:inherit;text-decoration:none}
.vis-card:hover{border-color:var(--indu);text-decoration:none}
.vis-card strong{font-size:var(--letra-corpo);font-weight:650;line-height:1.25;
  overflow-wrap:anywhere}
.vis-card-topo{display:flex;flex-wrap:wrap;gap:var(--e1);align-items:center;
  justify-content:space-between}
.vis-card-topo b{font-size:var(--letra-nota);font-weight:700}
.vis-card-meta{font-size:var(--letra-nota);color:var(--tinta3);overflow-wrap:anywhere}
.vis-card-cancelada{opacity:.7}
.vis-card-cancelada strong{text-decoration:line-through}

/* O mês: a grade do calendário, com a contagem por dia. O dia inteiro é o link. */
.vis-mes .vis-mes-dia{color:inherit;text-decoration:none}
.vis-mes .vis-mes-dia:hover{background:var(--painel2);text-decoration:none}
.vis-mes-total{font-size:var(--letra-forte);font-weight:700;color:var(--tinta);
  line-height:1.2}
.vis-mes-palavra{font-size:var(--letra-nota);font-weight:500;color:var(--tinta3)}
.vis-mes-partes{display:flex;flex-direction:column;gap:2px;font-size:var(--letra-nota);
  color:var(--tinta2)}
.vis-mes-parte{display:flex;align-items:center;gap:var(--e1);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.vis-mes-alarme{display:none}
.ponto.t-ok{background:var(--ok)} .ponto.t-urgencia{background:var(--critico)}
.ponto.t-escopo{background:var(--indu)} .ponto.t-processo{background:var(--neutro)}
.calendario .t-ok .marca{background:var(--ok)}

/* O que as conversas estão dizendo: a contagem primeiro, e cada número desce
   até a sua lista. A cor é a do significado — zero fica apagado. */
.vis-conversa-contas{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:var(--e2);margin-bottom:var(--e3)}
.vis-conversa-conta{display:flex;flex-direction:column;gap:2px;min-height:var(--toque);
  padding:var(--e2) var(--e3);background:var(--painel);border:1px solid var(--linha);
  border-radius:var(--r2);color:inherit;text-decoration:none}
.vis-conversa-conta:hover{border-color:var(--indu);text-decoration:none}
.vis-conversa-conta b{font-size:var(--letra-secao);font-weight:700;line-height:1.2}
.vis-conversa-conta span{font-size:var(--letra-nota);color:var(--tinta3)}
.vis-conv-alertas b{color:var(--critico)}
.vis-conv-pedem_proposta b{color:var(--indu-forte)}
.vis-conv-riscos b,.vis-conv-negativos b{color:var(--atencao)}
.vis-conv-positivos b{color:var(--ok)}
.vis-conversa-zero b{color:var(--tinta4)}
.vis-conversa-grupo h3{display:flex;gap:var(--e2);align-items:baseline;
  font-size:var(--letra-corpo);font-weight:650;margin:var(--e4) 0 var(--e1)}
.vis-conversa-grupo h3 span{font-size:var(--letra-nota);color:var(--tinta3)}
.vis-conversa{display:flex;flex-direction:column;gap:2px;min-height:var(--toque);
  padding:var(--e3) 2px;border-bottom:1px solid var(--linha-fraca);color:inherit;
  text-decoration:none}
.vis-conversa:last-child{border-bottom:0}
.vis-conversa:hover{background:var(--painel2);text-decoration:none}
.vis-conversa .tag{align-self:flex-start}
.vis-conversa-texto{font-size:var(--letra-corpo);color:var(--tinta);line-height:1.45}

@media (max-width:1100px){
  /* Tablet: sete colunas de 90 px espremem o nome do cliente em três linhas. Os
     dias passam a quebrar em faixas, e a ordem de leitura continua a da semana. */
  .vis-semana{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
}
@media (max-width:640px){
  /* Celular: um dia embaixo do outro, e o dia sem visita vira uma linha só. */
  .vis-semana{grid-template-columns:1fr}
  .vis-semana-vazia .vis-semana-nada{display:none}
  .vis-agenda-barra{align-items:stretch}
  .vis-agenda-passo{width:100%}
  .vis-agenda-rotulo{flex:1;min-width:0}
  .vis-agenda-filtro{margin-left:0;width:100%}
  .vis-agenda-campo{flex:1 1 140px}
  .vis-mes-partes,.vis-mes-palavra{display:none}
  .vis-mes-alarme{display:inline-block}
  .vis-mes-total{font-size:var(--letra-corpo)}
}

/* Formulários de marcar e de mandar. */
.vis-nova summary{display:inline-flex;align-items:center;min-height:44px;
  cursor:pointer;font-size:15px;font-weight:600;color:var(--indu-forte);list-style:none;
  padding:0 16px}
.vis-nova summary::-webkit-details-marker{display:none}
.vis-par{display:grid;grid-template-columns:1fr 1fr;gap:12px}

@media (max-width:820px){
  /* Em tela estreita as marcas descem para baixo do nome, alinhadas com ele.
     Lado a lado, o nome do cliente quebrava em três linhas de duas letras —
     que é o que acontece quando um layout de mesa vai para o bolso sem olhar. */
  .vis-linha{flex-wrap:wrap}
  .vis-linha-marcas{flex-basis:100%;max-width:none;justify-content:flex-start;
    padding-left:48px}
  /* Gravar o relato e marcar a visita são ações de quem está em pé no pátio: no
     celular elas voltam a ocupar a linha inteira, com alvo de polegar. O recuo
     do `acoes` existe para a mesa, não para o bolso. */
  .vis-relato-forma .acoes button,.vis-nova .acoes button{width:100%;min-height:48px;
    font-size:15px}
}
@media (max-width:640px){
  .vis-par{grid-template-columns:1fr}
  .vis-carimbos{grid-template-columns:1fr}
  .vis-ficha > div{flex-direction:column;gap:2px}
  .vis-ficha span{min-width:0}
}
@media (pointer:coarse){
  .vis-linha{padding:16px 2px}
  .vis-acao{min-height:60px}
}
@media (min-width:821px){
  /* A mesma tela de campo, aberta no computador. O alvo de polegar continua
     sendo alvo de polegar — ele só deixa de virar uma faixa de 1.150 px
     atravessando o monitor. Um botão do tamanho da tela inteira não parece um
     botão: parece um erro de carregamento.

     As larguras aqui são três, e sempre as mesmas três, para a coluna não ficar
     serrilhada: 600 px para o que se lê e se escreve, 480 px para a moldura da
     câmera e do gravador, 320 px para a ação. */
  .vis-nota,.vis-dica,.vis-relato,.vis-relato-forma,.vis-carimbos{max-width:600px}
  .vis-camera,.vis-gravador{max-width:480px}
  .vis-acao{max-width:320px}
}

/* ==========================================================================
   SUPORTE — prefixo `aju-`
   Conversa escrita: pergunta em cima, resposta embaixo, e a origem sempre à
   vista. O trecho da documentação aparece como veio, em largura de leitura —
   resposta de suporte que não dá para conferir não dá para corrigir.
   ========================================================================== */
.aju-conversa{display:flex;flex-direction:column;gap:16px;max-width:760px}
.aju-vazio{margin:0;color:var(--tinta3);font-size:15px}
.aju-par{display:flex;flex-direction:column;gap:8px}
.aju-pergunta{margin:0;padding:12px 16px;border-radius:var(--r3);background:var(--painel2);
  font-size:15px;line-height:1.5}
.aju-pergunta b{color:var(--tinta)}
.aju-resposta{padding:12px 16px;border-radius:var(--r3);border-left:3px solid var(--indu);
  background:var(--painel);font-size:15px;line-height:1.55}
.aju-resposta.aju-sem{border-left-color:var(--atencao)}
.aju-resposta p{margin:0 0 8px}
.aju-quem{font-size:13px;color:var(--tinta3)}
.aju-origem{margin:8px 0;border-top:1px solid var(--linha-fraca);padding-top:8px}
.aju-origem summary{cursor:pointer;font-size:13px;color:var(--tinta2);min-height:var(--toque);
  display:flex;align-items:center}
.aju-trecho{margin:8px 0;padding:12px 12px;border-radius:var(--r2);background:var(--painel2);
  font-family:"IBM Plex Mono",monospace;font-size:13px;line-height:1.6;
  white-space:pre-wrap;word-break:break-word;max-height:340px;overflow:auto}
.aju-telas{margin:0;font-size:13px}
.aju-telas a{color:var(--indu-forte)}
.aju-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.aju-acoes form{margin:0}
.aju-forma{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;max-width:760px}
.aju-forma label{flex:1;min-width:260px;display:flex;flex-direction:column;gap:4px;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta3)}
.aju-forma textarea{padding:12px 12px;font-size:var(--letra-corpo);border:1px solid var(--painel2);
  border-radius:var(--r2);background-color:var(--painel2);color:var(--tinta);resize:vertical}
.aju-forma button{min-height:44px;padding:0 24px}
.aju-sugestoes{display:flex;flex-wrap:wrap;gap:8px;padding-top:0}
.aju-sugestoes form{margin:0}
/* Irmã das `.corpo` do bloco, e por isso com o mesmo recuo delas: sem os 16 px a
   nota encosta na borda do cartão e parece texto solto na página. */
.aju-nota{margin:0;padding:0 16px 16px;font-size:13px;color:var(--tinta3)}
@media (max-width:640px){ .aju-forma label{min-width:100%} }

/* Central de ajuda navegável — mesmo prefixo `aju-`. Leitura primeiro: largura
   de texto, sumário do lado no computador e em cima no celular. */
.aju-topo{display:flex;gap:8px;flex-wrap:wrap}
/* `align-items:start` porque as áreas têm tamanhos muito diferentes — "Começar"
   tem 6 assuntos e "Gestão" tem 34. Esticadas até a altura da mais alta da linha,
   as menores viram uma moldura com um palmo de vazio dentro, e quem olha procura
   o que estaria faltando ali. */
.aju-areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:16px;align-items:start}
.aju-area{margin:0}
.aju-area-desc{margin:0 0 12px;font-size:13px;color:var(--tinta3)}
.aju-doc{border-top:1px solid var(--linha-fraca);padding:8px 0}
.aju-doc summary{display:flex;align-items:center;justify-content:space-between;gap:8px;
  min-height:var(--toque);cursor:pointer;font-size:15px;font-weight:600}
.aju-doc summary a{color:var(--tinta);text-decoration:none}
.aju-perguntas{margin:4px 0 8px;padding-left:16px;font-size:15px;line-height:1.7}
.aju-perguntas a{color:var(--tinta2)}
.aju-tema{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px;align-items:start}
.aju-sumario{position:sticky;top:70px;padding:12px 16px;border:1px solid var(--linha);
  border-radius:var(--r3);background:var(--painel);font-size:13px}
.aju-sumario ol{margin:8px 0 0;padding-left:16px;line-height:1.7}
.aju-sumario a{color:var(--tinta2)}
.aju-leitura{display:flex;flex-direction:column;gap:12px;max-width:780px}
.aju-secao{margin:0;scroll-margin-top:70px}
.aju-texto{font-size:15px;line-height:1.65;color:var(--tinta)}
.aju-texto p{margin:0 0 12px}
.aju-texto ul,.aju-texto ol{margin:0 0 12px;padding-left:24px}
.aju-texto li{margin-bottom:4px}
.aju-texto code{font-family:"IBM Plex Mono",monospace;font-size:13px;padding:1px 4px;
  border-radius:var(--r1);background:var(--painel2)}
.aju-texto a code{color:var(--indu-forte)}
.aju-texto pre{padding:12px 12px;border-radius:var(--r2);background:var(--painel2);
  font-size:13px;white-space:pre-wrap}
.aju-texto blockquote{margin:0 0 12px;padding:8px 12px;border-left:3px solid var(--indu);
  background:var(--painel2)}
.aju-texto h4{margin:16px 0 8px;font-size:15px}
@media (max-width:900px){
  .aju-tema{grid-template-columns:1fr}
  .aju-sumario{position:static}
}

/* Mudar de estágio pela página da OS: alvo de dedo, e o motivo ao lado. */
.os-mover{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.os-mover select{width:auto;max-width:200px}
.os-mover input{min-width:180px;padding:0 12px}
.os-mover button{min-height:var(--toque)}
@media (min-width:821px){
  /* Uma frente por linha da tabela, e os seletores empilhados um sob o outro:
     com a largura livre, cada um começava num ponto diferente e a coluna ficava
     serrilhada. Largura fixa alinha os três. O campo do motivo cresce até caber
     o aviso inteiro — cortado em "obrigatório no retra" ele avisa pela metade,
     que é pior do que não avisar. */
  .os-mover select{width:200px}
  .os-mover input{min-width:230px}
}

/* ==========================================================================
   AS CINCO RESPOSTAS DA OS · 19/09/2026
   "Em qualquer OS deve ficar extremamente claro: onde ela esta, o que ja foi
   realizado, o que falta, quem precisa agir e qual e a proxima etapa."
   Cinco colunas, no alto da ficha, sem rolar. Nao ha sexta: a sexta seria o
   comeco da parede de informacao que estas cinco vieram substituir.
   ========================================================================== */
.historia-os{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
  background:var(--linha);border:1px solid var(--linha);border-radius:var(--r3);
  overflow:hidden;margin-bottom:16px}
.historia-item{background:var(--painel);padding:12px 12px;display:flex;
  flex-direction:column;gap:3px;min-width:0}
.historia-item strong{font-size:15px;font-weight:650;letter-spacing:-.01em;
  line-height:1.25;overflow-wrap:anywhere}
.historia-item.t-critico strong{color:var(--critico)}
.historia-item.t-bloqueio strong{color:var(--bloqueio)}
.historia-item.t-atencao strong{color:var(--atencao)}
.historia-item.t-ok strong{color:var(--tinta)}
.historia-rot{font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--tinta4)}
.historia-det{font-size:13px;color:var(--tinta3);line-height:1.35}
.historia-criterio{font-size:13px;color:var(--tinta4);line-height:1.35;
  border-left:2px solid var(--linha);padding-left:8px;margin-top:3px}
.historia-barra{height:3px;border-radius:2px;background:var(--linha);
  overflow:hidden;margin:2px 0}
.historia-barra i{display:block;height:100%;background:var(--ok);border-radius:2px}
.historia-paralelas{margin-top:-8px;margin-bottom:16px}
/* Na gaveta as cinco viram uma pilha: a largura ali e de um painel lateral. */
.historia-gaveta{grid-template-columns:1fr;margin:16px 0 4px}
@media (max-width:1100px){
  .historia-os{grid-template-columns:repeat(2,1fr)}
  .historia-item:last-child{grid-column:1 / -1}
}
@media (max-width:620px){
  .historia-os{grid-template-columns:1fr}
  .historia-item:last-child{grid-column:auto}
}

/* Renomear estagio: o aviso de que o nome e so rotulo. */
.pcp-coluna-nota{font-size:12px;color:var(--tinta4);line-height:1.4;margin:8px 0 2px}
/* ------------------------------------------------------------------ proposta
   A proposta da INDU é de valor fechado, e a tela precisa deixar isso óbvio:
   duas formas de preço lado a lado, o que é da casa marcado como da casa, e
   tudo alcançável com um polegar — o comercial fecha preço em pé, com o
   cliente na frente, no celular ou no tablet. */
.prop-forma{display:flex;flex-direction:column;gap:12px;
  border-bottom:1px solid var(--linha)}
.prop-forma-grade{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.prop-forma-op{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;
  border:1px solid var(--linha);border-radius:var(--r3);cursor:pointer;min-height:44px}
.prop-forma-op:hover{border-color:var(--borda-viva)}
.prop-forma-op input[type=radio]{margin:2px 0 0;width:20px;height:20px;flex:none}
.prop-forma-ativa{border-color:var(--tinta);background:var(--painel2)}
.prop-forma-texto{display:flex;flex-direction:column;gap:3px}
.prop-forma-texto b{font-size:15px}
.prop-forma-texto small{color:var(--tinta4);font-size:13px;line-height:1.4}
.prop-fechado-campo{display:flex;align-items:center;gap:8px;margin-top:8px;
  font-variant-numeric:tabular-nums;font-weight:700}
.prop-fechado-campo input{width:150px;min-height:44px;text-align:right;
  font-variant-numeric:tabular-nums;font-size:15px}
.prop-detalhe{display:flex;align-items:flex-start;gap:12px;font-size:13px;
  cursor:pointer;min-height:44px}
.prop-detalhe input{margin:2px 0 0;width:20px;height:20px;flex:none}
.prop-detalhe small{display:block;color:var(--tinta4);font-size:13px}
/* O que é conta da casa leva selo. Custo, margem e chão de mão de obra existem
   para ninguém vender abaixo da hora que a oficina vai gastar — e param aqui. */
.prop-interno{margin-top:4px;font-size:13px;color:var(--tinta4)}
.prop-selo-interno{display:inline-block;margin-right:4px;padding:1px 8px;border-radius:var(--r1);
  background:var(--painel2);border:1px solid var(--linha);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--tinta3)}
.prop-salvar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  position:sticky;bottom:0;z-index:3;background:var(--painel);
  border-top:1px solid var(--linha)}
.prop-salvar button{min-height:44px}
.prop-soma{font-variant-numeric:tabular-nums;font-weight:700;font-size:18px}
/* O rascunho da proposta: a lista do escopo e um valor total (dono,
   25/09/2026). Lista, não tabela — não há coluna para comparar. */
.prop-escopo{list-style:none;margin:0;padding:0}
.prop-escopo-item{display:flex;align-items:center;justify-content:space-between;
  gap:var(--e3);min-height:var(--toque);padding:var(--e2) var(--e5);
  border-bottom:1px solid var(--linha-fraca)}
.prop-escopo-nome{font-size:var(--letra-corpo);font-weight:600;color:var(--tinta)}
.prop-escopo-nome small{margin-left:var(--e2);color:var(--tinta3);font-weight:500}
/* Proposta aberta: o nome ocupa o espaço e os valores alinham na coluna. */
label.prop-escopo-nome{flex:1 1 220px;min-width:0}
@media (max-width:560px){
  .prop-escopo-item:has([data-preco-item]){flex-wrap:wrap}
  .prop-escopo-item:has([data-preco-item]) label.prop-escopo-nome{flex-basis:100%}
  .prop-escopo-item:has([data-preco-item]) .prop-total-campo{flex:1;min-width:0}
  .prop-escopo-item [data-preco-item]{flex:1;width:auto;min-width:0}
}
.prop-total label{display:flex;align-items:center;justify-content:space-between;
  gap:var(--e4);flex-wrap:wrap;margin:0}
.prop-total label > span:first-child{font-size:var(--letra-forte);font-weight:700;
  color:var(--tinta)}
.prop-total-campo{display:inline-flex;align-items:center;gap:var(--e2);
  font-size:var(--letra-forte);font-weight:700;color:var(--tinta2)}
.prop-total-campo input{width:200px;min-height:var(--toque);text-align:right;
  font-size:var(--letra-forte);font-weight:700;font-variant-numeric:tabular-nums}
.prop-acrescentar{display:flex;gap:8px;flex-wrap:wrap}
.prop-acrescentar select{width:auto;min-width:300px;flex:1;min-height:44px}
.prop-acrescentar input{width:150px;min-height:44px}
.prop-acrescentar button{min-height:44px}
/* Versões: a linha do tempo da proposta, da mais nova para a mais velha. */
.prop-versoes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.prop-versao{padding:12px 12px;border:1px solid var(--linha);border-radius:var(--r3)}
.prop-versao-atual{border-color:var(--tinta);background:var(--painel)}
.prop-versao-topo{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.prop-versao-topo a{color:var(--tinta);text-decoration:none}
.prop-versao-valor{margin-left:auto;font-weight:700}
.prop-versao-nada{margin:8px 0 0;font-size:13px;color:var(--tinta4)}
.prop-mudou{margin:8px 0 0;padding-left:16px;font-size:13px}
.prop-mudou li{margin-bottom:3px}
@media (max-width:760px){
  /* A tabela de preço vira pilha de cartões: seis colunas em 390 px é um
     polegar procurando célula. O rótulo de cada campo vem do `data-rot`. */
  .prop-tabela,.prop-tabela tbody,.prop-tabela tr,.prop-tabela td{display:block;width:auto}
  .prop-tabela thead{display:none}
  .prop-linha{margin:0 0 12px;padding:12px 12px;border:1px solid var(--linha);
    border-radius:var(--r3)}
  .prop-linha td{padding:4px 0;text-align:left !important;border:0}
  .prop-linha td[data-rot]::before{content:attr(data-rot) " · ";
    font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--tinta4);
    font-weight:700}
  .prop-linha input{width:100% !important;min-height:44px;text-align:left !important}
  .prop-salvar{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .prop-acrescentar select,.prop-acrescentar input,.prop-acrescentar button{width:100%;min-width:0}
  .prop-versao-valor{margin-left:0;width:100%}
}
.prop-nova{padding:0}
.prop-nova>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:12px;flex-wrap:wrap;padding:16px 16px;min-height:44px}
.prop-nova>summary::-webkit-details-marker{display:none}
.prop-nova>summary::before{content:"+";font-weight:700;color:var(--tinta3);font-size:18px}
.prop-nova[open]>summary::before{content:"−"}
/* Campo de preço sem `type` cai fora da regra base de `input[type=text]`: fica
   com fundo branco do navegador e a cor clara herdada do tema. No tema escuro
   isso é texto branco sobre branco — o preço digitado some, e ninguém digita
   duas vezes para conferir. */
.tabela-preco input:not([type]),.prop-fechado-campo input,
.prop-acrescentar input:not([type]){background-color:var(--painel2);color:var(--tinta);
  border:1px solid var(--painel2);border-radius:var(--r2);padding:8px 12px}
/* Campo que o escopo fechado desativou tem de parecer desativado: valor nítido
   num campo que não aceita digitação é convite a digitar e não entender. */
.tabela-preco input:disabled,.prop-detalhe input:disabled+span{opacity:.5}
.tabela-preco input:disabled{cursor:not-allowed}
/* Exemplo de preenchimento não pode parecer valor preenchido: num campo de
   preço, a diferença entre os dois é a proposta sair pelo número errado. */
.tabela-preco input::placeholder,.prop-fechado-campo input::placeholder{
  color:var(--tinta4);opacity:1;font-weight:400}

/* ==========================================================================
   Campo — agenda por dia, foto do check-in, janela do áudio e leitura de máquina
   (19/09/2026). Tudo pensado no celular de quem está no portão da fábrica: alvo
   grande, uma coisa por vez, e nada que dependa de cor para ser entendido.
   ========================================================================== */
.vis-chegada{display:flex;flex-direction:column;gap:12px;margin:12px 0}
.vis-chegada .vis-camera{margin:0}
.vis-camera[data-vis-pronta]{border-color:var(--ok);background:var(--ok-fraco);
  color:var(--ok);font-weight:700}

/* A janela do áudio tem hora para fechar — e por isso ela é dita antes do
   campo, não depois do envio falhar. */
.vis-janela{display:flex;flex-direction:column;gap:3px;padding:12px 12px;
  border-radius:var(--r3);border:1px solid var(--info);background:var(--info-fraco);
  margin-bottom:12px}
.vis-janela b{font-size:15px;color:var(--info)}
.vis-janela span{font-size:13px;color:var(--tinta2);line-height:1.5}
.vis-janela-fechada{border-color:var(--linha);background:var(--painel2)}
.vis-janela-fechada b{color:var(--tinta2)}
/* Na mesa ela entra na mesma coluna de 600 px do relato e do aviso logo abaixo —
   ver o bloco de `min-width:821px` lá em cima. Um recado de duas linhas com
   1.150 px de largura ao lado de um relato de 600 px deixa a coluna serrilhada. */
@media (min-width:821px){ .vis-janela{max-width:600px} }

/* Agenda agrupada por dia. */
.vis-dia-grupo{margin-bottom:16px}
.vis-dia-grupo h3{display:flex;align-items:baseline;gap:8px;margin:0 0 8px;
  font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--tinta3)}
.vis-dia-grupo h3 span{font-size:13px;letter-spacing:0;text-transform:none;
  color:var(--tinta4)}
.vis-dia-passado h3{color:var(--atencao)}

/* O que a máquina leu. Fica visivelmente ao lado do relato, nunca no lugar
   dele: borda tracejada, etiqueta na frente e o aviso antes do conteúdo. */
.vis-leitura{border:1px dashed var(--linha);
  border-radius:var(--r3);padding:12px 16px;margin-bottom:12px;background:var(--painel2)}
/* A borda tracejada já é o sinal, e é ela que diz "isto a máquina leu, não é
   o relato de ninguém". O trilho de 3px em `--info` era um quarto tratamento
   na mesma caixa, e `--info` quer dizer característica técnica da máquina —
   que não é o que este bloco é. Quando a leitura está errada, quem muda é a
   própria tracejada: o sinal que já existia passa a ser vermelho. */
.vis-leitura-errada{border-color:var(--critico);opacity:.72}
.vis-leitura-cabeca{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin-bottom:8px}
.vis-leitura-aviso{margin:0 0 8px;font-size:13px;line-height:1.5;
  color:var(--tinta3)}
.vis-leitura-resumo{margin:0 0 12px;font-size:15px;line-height:1.55;
  color:var(--tinta)}
.vis-leitura-campos{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:12px;margin:0}
.vis-leitura-campo dt{font-size:13px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--tinta3);margin-bottom:3px}
.vis-leitura-campo dd{margin:0}
.vis-leitura-campo ul{margin:0;padding-left:16px}
.vis-leitura-campo li{font-size:13px;line-height:1.5;color:var(--tinta2)}
.vis-campo-riscos dt,.vis-campo-alertas dt{color:var(--atencao)}
.vis-leitura-pe{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin-top:12px;padding-top:8px;border-top:1px solid var(--linha-fraca)}
.vis-leitura-pe a{font-size:13px;font-weight:600;color:var(--indu-forte)}
.vis-leitura-pe form{margin:0}
.vis-leitura-refazer{margin-top:4px}

/* Ficou de fazer, na ficha do cliente. */
.cli-acoes{margin-bottom:16px}
.cli-acoes h3{margin:0 0 8px;font-size:13px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--tinta3)}
.cli-acoes ul{margin:0;padding-left:16px}
.cli-acoes li{font-size:15px;line-height:1.6;color:var(--tinta)}
.cli-acoes li .tecnico{margin-left:8px}

@media (max-width:640px){
  .vis-leitura-campos{grid-template-columns:1fr}
}
   Consulta à Engenharia Elétrica — pedida na peritagem, respondida na OS.
   Prefixo `peng-`: a conversa aparece em quatro telas (tablet da peritagem,
   ficha lida, ficha do comercial e montagem) e não pode herdar regra de
   nenhuma delas.
   ========================================================================== */
.peng-conversa{margin:0 0 12px;padding:12px 16px;border-radius:var(--r3);
  border:1px solid var(--linha);background:var(--painel2)}
.peng-conversa:last-child{margin-bottom:0}
.peng-aberta{border-color:var(--atencao);background:var(--atencao-fraco)}
.peng-pedido{margin:0 0 8px;font-size:15px;line-height:1.5;color:var(--tinta)}
.peng-parecer{margin:8px 0 8px;padding:12px 12px;border-radius:var(--r2);
  border-left:3px solid var(--ok);background:var(--painel);font-size:15px;
  line-height:1.55;color:var(--tinta);white-space:pre-wrap}
.peng-assinatura{margin:0;font-size:13px;color:var(--tinta3)}
.peng-esperando{margin:8px 0 0;font-size:15px;color:var(--atencao)}
.peng-historico{margin-top:16px}
.peng-historico .rotulo-linha{display:block;margin-bottom:8px}
/* Alvo de tablet, em mão com luva: a chamada da engenharia é uma decisão, não
   um link discreto no rodapé. */
.peng-chamar{margin-top:8px}
.peng-responder{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.peng-responder label{font-size:13px;font-weight:600;color:var(--tinta2);
  text-transform:uppercase;letter-spacing:.04em}
.peng-responder textarea{width:100%;padding:12px 12px;border-radius:var(--r2);
  border:1px solid var(--painel2);background-color:var(--painel2);color:var(--tinta);
  font:inherit;font-size:15px;line-height:1.5}
.peng-enviar{align-self:flex-start;min-height:44px;padding:0 16px}
.peng-fila .tecnico{white-space:normal;max-width:420px;display:block}
/* Levantamento: a fonte do campo deduzido, o pedido de material e as fotos.
   Prefixo `lv-` porque o copo já usa os nomes curtos, e classe de uma palavra
   nova aqui atropelaria regra antiga em outra tela. */
.lv-fonte{font-size:12px;font-weight:400;font-style:normal;color:var(--tinta4);
  line-height:1.35}
.lv-observacao{display:flex;flex-direction:column;gap:4px;font-size:13px;
  font-weight:600;color:var(--tinta2)}
.lv-observacao textarea{padding:8px 12px;border-radius:var(--r2);border:1px solid var(--painel2);
  background-color:var(--painel2);color:var(--tinta);font-size:var(--letra-corpo);font-family:inherit;
  width:100%;resize:vertical}
.lv-pedido{display:flex;flex-direction:column;gap:8px}
.lv-item{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 12px;
  border:1px solid var(--linha-fraca);border-radius:var(--r2);background:var(--painel)}
.lv-item:hover{border-color:var(--indu-fraco)}
.lv-item input[type=checkbox]{width:20px;height:20px;accent-color:var(--indu);
  margin:0;flex:none}
.lv-item-texto{display:flex;flex-direction:column;gap:2px;flex:1;min-width:210px}
.lv-item-texto strong{font-size:15px;color:var(--tinta)}
.lv-item-texto em{font-size:13px;font-style:normal;color:var(--tinta4)}
.lv-qtd-pronta{font-size:13px;font-weight:700;color:var(--indu-forte);
  font-family:"IBM Plex Mono",monospace}
.lv-qtd{width:96px;padding:8px 12px;border-radius:var(--r2);border:1px solid var(--linha);
  background:var(--painel);color:var(--tinta);font-size:15px;font-family:inherit}
.lv-unidade{font-size:13px;color:var(--tinta4)}
.lv-pedidos{width:100%;border-collapse:collapse;margin-top:16px;font-size:13px}
.lv-pedidos th{text-align:left;font-size:12px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--tinta4);padding:8px 12px 8px 0}
.lv-pedidos td{padding:8px 12px 8px 0;border-top:1px solid var(--linha-fraca);
  vertical-align:top}
.lv-camera{cursor:pointer}
.lv-fotos{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
.lv-fotos img{width:100%;height:112px;object-fit:cover;border-radius:var(--r2);
  border:1px solid var(--linha);display:block}
.lv-origem{font-size:13px;color:var(--tinta4)}
.lv-origem a{color:var(--indu-forte)}

@media (pointer:coarse){
  /* Pedido de material é marcado em pé, na bancada, com luva. */
  .lv-item{padding:12px 12px}
  .lv-item input[type=checkbox]{width:24px;height:24px}
  .lv-qtd{min-height:44px;font-size:15px}
  .lv-observacao textarea{min-height:88px;font-size:15px}
}

/* ---------- Comercial: filtro rápido, fila de validação e alertas ----------
   Pedido do dono, 19/09/2026. Tudo com prefixo `com-`: a tela de Oportunidades
   já usa `.card`, `.coluna` e `.quadro` do quadro de produção, e um nome curto
   a mais aqui atropelaria o quadro inteiro três telas adiante.

   Os nove números reaproveitam `.indicadores`/`.ind`, que já é o componente de
   número-com-link da casa — criar um segundo faria dois cartões de número com
   comportamentos diferentes na mesma tela. */
.com-filtro{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.com-filtro-rotulo{font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tinta4)}
.com-filtro-intervalo{display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  padding-left:12px;border-left:1px solid var(--linha)}
.com-filtro-intervalo label{display:flex;align-items:center;gap:4px;margin:0;
  flex:1;min-width:0}
.com-filtro-intervalo label span{font-size:13px;color:var(--tinta4)}
.com-filtro-intervalo input{flex:1;min-width:128px;width:150px;padding:8px 8px;
  font-size:13px}
.com-filtro-quando{margin-left:auto;font-size:13px;color:var(--tinta4)}
@media (max-width:640px){
  /* No celular o intervalo é uma linha própria: com a borda e o recuo do lado
     esquerdo, o segundo campo de data saía da tela e levava a página inteira a
     rolar de lado. */
  .com-filtro-intervalo{width:100%;padding-left:0;border-left:0}
  /* Uma data por linha: lado a lado, o "até" ficava espremido entre os dois
     campos e a segunda data saía cortada dentro do próprio campo. */
  .com-filtro-intervalo label{flex:1 1 100%}
  .com-filtro-quando{margin-left:0}
  .com-validar-linha{grid-template-columns:minmax(0,1fr) auto}
  .com-validar-devolver{grid-column:1/-1}
  .com-validar-devolver input{flex:1;width:auto}
}

.com-validar-linha{display:grid;align-items:center;gap:12px;padding:12px 16px;
  grid-template-columns:minmax(0,1fr) auto auto auto;
  border-top:1px solid var(--linha-fraca)}
.com-validar-linha:first-child{border-top:0}
.com-validar-quem{min-width:0;display:flex;flex-direction:column;gap:2px}
.com-validar-quem strong{font-size:15px}
.com-validar-quem span{font-size:13px;color:var(--tinta3)}
.com-validar-marca{color:var(--tinta4)}
.com-validar-valor{text-align:right;font-size:18px;font-weight:700;line-height:1.1}
.com-validar-valor em{display:block;font-style:normal;font-size:13px;font-weight:500;
  color:var(--atencao)}
.com-validar-devolver{display:flex;gap:4px}
.com-validar-devolver input{width:170px;padding:8px 8px;font-size:13px}

/* Trilho transparente por padrão: numa lista de alertas, o que merece o risco
   vermelho é o crítico, e o cinza em todos os outros só servia para tirar
   força dele. Alerta sem exceção não tem trilho — a mesma regra do card. */
.com-alerta{display:flex;flex-direction:column;gap:2px;padding:12px 16px;
  border-top:1px solid var(--linha-fraca);border-left:3px solid transparent;
  color:inherit;text-decoration:none}
.com-alerta:first-child{border-top:0}
.com-alerta:hover{background:var(--painel2)}
.com-alerta strong{font-size:15px}
.com-alerta span{font-size:13px;color:var(--tinta3)}
.com-alerta-critico{border-left-color:var(--critico)}
.com-alerta-critico strong{color:var(--critico)}

/* O bloco de pedido fechado dentro do cartão do funil. */
.com-pedido{margin:0 12px 8px;padding:8px 12px;border-radius:var(--r2);
  border:1px solid var(--linha);background:var(--painel);font-size:13px}
.com-pedido summary{cursor:pointer;font-weight:700;color:var(--tinta3)}
.com-pedido strong{display:block;font-size:13px}
.com-pedido span{display:block;color:var(--tinta3)}
.com-pedido-nota{margin-top:3px;font-size:13px;color:var(--tinta4)}
.com-pedido-form{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.com-pedido-form input{flex:1;min-width:104px;padding:4px 8px;font-size:13px}
.com-pedido-acoes{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.com-pedido-espera{border-color:var(--atencao);background:var(--atencao-fraco)}
.com-pedido-espera strong{color:var(--atencao)}
.com-pedido-devolvido{border-color:var(--critico)}
.com-pedido-devolvido strong{color:var(--critico)}

/* Papelada da OS. Tabela, e não cartões: documento se procura pelo tipo e pela
   data, que é exatamente o que uma linha mostra melhor que um cartão. */
.doc-anexar{flex-wrap:wrap;gap:12px;align-items:flex-end}
.doc-anexar .rodape{flex-basis:100%;margin:0}
.doc-tabela{width:100%;margin-top:16px}
.doc-tabela td{vertical-align:top}
.doc-quem{color:var(--tinta3);font-size:13px;line-height:1.5}
.doc-quem small{color:var(--tinta4)}
.doc-interno{color:var(--tinta4);font-size:13px}
.doc-tirar{text-align:right;white-space:nowrap}
/* Histórico da papelada: quem anexou e quem tirou, com dia e hora (dono, 11/11/2026). */
.doc-historico-titulo{margin:var(--e5) 0 var(--e2);font-size:var(--letra-corpo);color:var(--tinta2)}
.doc-historico{list-style:none;margin:0;padding:0}
.doc-historico li{padding:var(--e2) 0;border-bottom:1px solid var(--linha-fraca);
  color:var(--tinta3);font-size:13px;line-height:1.5}
@media (max-width:680px){
  .doc-anexar label{flex:1 1 100%}
  /* "Quem e quando" fica até no celular: quem fez é o que nunca some. */
  .doc-tabela th:nth-child(4),.doc-tabela td:nth-child(4){display:none}
}
.aprovar-com-oc{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* Identificação forte por passkey. Prefixo `chave-` porque nome de uma palavra
   pertence à folha base (ver docs/DESIGN.md) — e porque `.aceite` e `.trava` já
   existem aqui com outro significado.

   Tudo dimensionado para o tablet do galpão, com luva: alvo de 44 px, texto de
   13,5 px, nada que dependa de precisão de mira. */
.chave-confirmar{margin:12px 0;padding:12px;border-radius:var(--r3);
  border:1px solid var(--indu);background:var(--indu-fraco)}
.chave-explica{margin:0 0 8px;font-size:15px;line-height:1.45;color:var(--tinta2)}
.chave-explica b{color:var(--tinta)}
.chave-alternativa label{display:block}
.chave-alternativa span{display:block;font-size:13px;font-weight:600;
  color:var(--tinta3);margin-bottom:4px}
.chave-alternativa input{width:100%;min-height:44px;padding:12px 12px;font-size:18px;
  border:1px solid var(--painel2);border-radius:var(--r2);background-color:var(--painel2);
  color:var(--tinta);box-sizing:border-box}
.chave-nota{margin:8px 0 0;font-size:13px;line-height:1.45;color:var(--tinta3)}
.chave-nota a{color:var(--indu-forte)}
.chave-recado{margin:8px 0 0;font-size:15px;line-height:1.45;color:var(--tinta2)}
.chave-recado[data-chave-tom="erro"]{color:var(--critico);font-weight:600}
.chave-recado[data-chave-tom="espera"]{color:var(--tinta3)}

/* A lista de aparelhos, em /minhas-chaves e na configuração. */
.chave-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.chave-lista li{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 0;border-top:1px solid var(--linha-fraca)}
.chave-lista li:first-child{border-top:0}
.chave-lista b{display:block;font-size:15px}
.chave-lista .sub{display:block;margin:2px 0 0;font-size:13px;color:var(--tinta3)}
.chave-remover{min-height:44px;background:transparent;color:var(--critico);
  border:1px solid var(--critico);border-radius:var(--r2);padding:0 16px;
  font-size:15px;font-weight:600;cursor:pointer}
.chave-remover:hover{background:var(--critico-fraco)}

.chave-apelido{display:block;margin-bottom:12px}
.chave-apelido span{display:block;font-size:13px;font-weight:600;
  color:var(--tinta3);margin-bottom:4px}
.chave-apelido input{width:100%;max-width:420px;min-height:44px;padding:12px 12px;
  font-size:18px;border:1px solid var(--painel2);border-radius:var(--r2);
  background-color:var(--painel2);color:var(--tinta);box-sizing:border-box}

/* A promessa sobre biometria. Caixa própria porque é a primeira coisa que a
   pessoa lê nesta tela — e é a pergunta que ela faria ao colega do lado. */
.chave-promessa h2{margin:0 0 8px;font-size:18px}
.chave-promessa p{margin:0 0 8px;font-size:15px;line-height:1.55;color:var(--tinta2)}
.chave-promessa ul{margin:0 0 12px;padding-left:24px;font-size:15px;
  line-height:1.6;color:var(--tinta2)}

.chave-gestos{list-style:none;margin:0 0 12px;padding:0;
  display:flex;flex-direction:column;gap:2px}
.chave-gestos li{padding:12px 0;border-top:1px solid var(--linha-fraca);font-size:15px}
.chave-gestos li:first-child{border-top:0}
.chave-gestos label{display:flex;align-items:center;gap:12px;min-height:44px;
  cursor:pointer}
.chave-gestos input[type=checkbox]{width:22px;height:22px;accent-color:var(--indu)}

/* A porta de entrada: passkey acima da senha, com a separação explícita. */
.chave-porta{margin-top:16px;text-align:center}
.chave-ou{display:block;margin-bottom:12px;font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tinta4)}
.chave-entrar{width:100%;min-height:48px;background:transparent;color:var(--indu-forte);
  border:1px solid var(--indu);border-radius:var(--r2);font-size:15px;font-weight:600;
  cursor:pointer}
.chave-entrar:hover{background:var(--indu-fraco)}
.chave-entrar[disabled]{opacity:.55;cursor:default}

/* Notificação neste aparelho (Web Push, 27/09/2026). O cartão mora em Meus
   aparelhos; a faixa, uma vez só, no topo da Minha fila. Prefixo `push-`
   pelo mesmo motivo do `chave-`. A faixa é clara com filete coral, e não coral
   cheio: coral cheio é a `.aviso-chegou`, que diz "chegou serviço" — esta só
   oferece, e não pode competir com a notícia. */
.push-estado{margin:0 0 var(--e3);font-size:var(--letra-corpo);font-weight:600;
  color:var(--tinta)}
.push-passos{margin:0 0 var(--e4);padding:var(--e3) var(--e4);border-radius:var(--r3);
  background:var(--painel2);font-size:var(--letra-corpo);line-height:1.5;color:var(--tinta2)}
.push-passos b{color:var(--tinta)}
.push-passos ol,.push-passos ul{margin:var(--e2) 0;padding-left:var(--e5)}
.push-passos li{margin:0 0 var(--e2)}
.push-nota{display:block;font-size:var(--letra-nota);color:var(--tinta3)}
.push-acoes{display:flex;flex-wrap:wrap;gap:var(--e3);align-items:center}
.push-acoes .acaogrande{width:auto;min-height:var(--toque)}
.push-acoes .botao{min-height:var(--toque)}
.push-titulo-lista{margin:var(--e5) 0 var(--e2);font-size:var(--letra-corpo)}
.push-faixa{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e3);margin:0 0 var(--e4);
  padding:var(--e3) var(--e4);border-radius:var(--r3);border:1px solid var(--linha);
  border-left:4px solid var(--indu);background:var(--painel)}
.push-faixa-texto{flex:1 1 220px;min-width:0;font-size:var(--letra-corpo);line-height:1.45}
.push-faixa-texto b{display:block}
.push-faixa-texto span{display:block;font-size:var(--letra-nota);color:var(--tinta3)}
.push-faixa-texto span b{display:inline}
.push-faixa .acaogrande{width:auto;flex:none;min-height:var(--toque);padding:0 var(--e4)}
.push-fechar{flex:none;min-width:var(--toque);min-height:var(--toque);border:0;
  border-radius:var(--r2);background:transparent;color:var(--tinta3);
  font-size:var(--letra-forte);cursor:pointer}
.push-fechar:hover{background:var(--painel2)}

/* (Clean 4b, 06/10/2026) as regras exclusivas da Administração moram em telas/administracao.css */

/* A porta única: "sou do time INDU" / "sou cliente".
   Dois `<input type=radio>` escondidos e o irmão `:checked ~` — sem JavaScript,
   porque a tela de login é a última que pode depender de script. */
.porta-caixa{position:relative}
/* Escondido para o olho, presente para o leitor de tela e para o teclado: o
   recorte de 1 px é o padrão que mantém o rádio na árvore de acessibilidade.
   `opacity:0` some dele em parte das tecnologias assistivas, e aí a escolha
   deixa de existir para quem navega sem ver a tela. */
.porta-radio{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.porta-escolha{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 24px}
/* Escopado sob `.porta-caixa` de propósito: `.entrada label` já existe e tem a
   mesma especificidade de uma classe solta — sem o pai, o `display:block` dela
   vence e as duas linhas da opção grudam numa só. */
.porta-caixa .porta-opcao{display:flex;flex-direction:column;justify-content:center;
  gap:3px;min-height:64px;padding:12px;border:1px solid var(--linha);
  border-radius:var(--r3);background:var(--painel2);cursor:pointer;text-align:center}
.porta-caixa .porta-opcao b{display:block;font-size:15px;font-weight:600;
  color:var(--tinta2)}
.porta-caixa .porta-opcao span{display:block;font-size:13px;line-height:1.3;
  color:var(--tinta4)}
.porta-painel{display:none}
.porta-texto{margin:0 0 16px;font-size:15px;line-height:1.55;color:var(--tinta2);
  text-align:left}
#quem-time:checked ~ .porta-escolha [for=quem-time],
#quem-cliente:checked ~ .porta-escolha [for=quem-cliente]{border-color:var(--indu);
  background:var(--indu-fraco)}
#quem-time:checked ~ .porta-escolha [for=quem-time] b,
#quem-cliente:checked ~ .porta-escolha [for=quem-cliente] b{color:var(--indu-forte)}
#quem-time:checked ~ .porta-time,
#quem-cliente:checked ~ .porta-cliente{display:block}
.porta-radio:focus-visible ~ .porta-escolha .porta-opcao{outline:2px solid var(--foco);
  outline-offset:2px}
/* "Esqueci minha senha" / "Perdi meu aparelho": logo abaixo do botão, com peso
   de ação e alvo de 44 px. Sem sublinhado, como nas cartas. Quem chega aqui já
   errou a senha uma vez — link de nota de rodapé é link que ele não acha. */
.porta-ajuda{display:flex;align-items:center;justify-content:center;
  min-height:44px;margin-top:16px;font-size:15px;font-weight:600;
  color:var(--indu-forte);text-decoration:none}
.porta-ajuda:hover{text-decoration:none;color:var(--indu-forte)}
.porta-ajuda-nota{margin:2px 0 0;font-size:15px;line-height:1.5;
  color:var(--tinta3);text-align:center}

/* (Clean 4b, 06/10/2026) as regras exclusivas da Administração moram em telas/administracao.css */

/* Os dois caminhos do cliente na porta de entrada. O cadastro vem primeiro e
   pesa igual ao login: hoje quase todo cliente que chega aqui é novo, e o botão
   do rosto sozinho fazia o navegador perguntar de chave no iCloud a quem nunca
   cadastrou nada. */
.porta-caminho{padding:16px 0;border-bottom:1px solid var(--linha-fraca)}
.porta-caminho:last-of-type{border-bottom:0}
.porta-titulo{margin:0 0 8px;font-size:15px;font-weight:700;color:var(--tinta)}
.porta-botao{display:block;min-height:46px;line-height:46px;margin-top:12px;
  text-align:center;border-radius:var(--r3);background:var(--indu);color:var(--tinta-acao);
  font-weight:600;font-size:15px;text-decoration:none}
.porta-botao:hover{background:var(--indu-forte)}
.porta-socorro{margin-top:16px;border-top:1px solid var(--linha-fraca);
  padding-top:12px}
.porta-socorro summary{cursor:pointer;font-size:15px;color:var(--tinta3);
  min-height:44px;line-height:44px;list-style:none}
.porta-socorro summary::-webkit-details-marker{display:none}
.porta-socorro summary::before{content:"?  ";color:var(--tinta4)}

/* ==========================================================================
   Aprovação de serviços
   Lista, não quadro. O quadro de /orcar responde "onde está cada máquina" e
   por isso é feito de colunas estreitas; esta aba responde "o que está travado
   e o que eu faço com isso", e a resposta é um botão dentro do card. Card de
   coluna de 260px não comporta botão de 44px sem virar duas linhas de texto
   quebrado, então aqui o card é largo e a lista é vertical.
   ========================================================================== */
.apr-lista{display:flex;flex-direction:column;gap:var(--e3)}
.apr-card{padding:var(--e3) var(--e4)}
.apr-card:hover{border-color:var(--linha);box-shadow:none}
/* Trilho só onde há exceção. Pintar um em cada bloco seria repetir em cor o
   que o cabeçalho já diz em palavra — e cor que todo mundo tem é cor que
   ninguém lê. Fica no que está travado do nosso lado e no que passou do
   prazo; o bloco de recusados não tem trilho, porque ali a decisão é do dono
   da máquina e o motivo já está escrito em vermelho no card. */
.apr-parado::before{background:var(--critico)}
.apr-alerta::before{background:var(--atencao)}
.apr-quem{display:flex;align-items:baseline;gap:var(--e2)}
.apr-maquina{font-size:var(--letra-corpo);font-weight:600;color:var(--tinta);
  text-decoration:none}
.apr-maquina:hover{color:var(--indu-forte)}
.apr-dias{margin-left:auto;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:var(--letra-nota);color:var(--tinta4);font-variant-numeric:tabular-nums}
.apr-linha2{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--e2) var(--e3);
  margin-top:var(--e1);font-size:var(--letra-nota);color:var(--tinta3)}
.apr-valor{margin-left:auto;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-weight:600;color:var(--tinta2);font-variant-numeric:tabular-nums}
.apr-motivo{margin:var(--e2) 0 0;font-size:var(--letra-nota);color:var(--tinta2);
  line-height:1.5;max-width:72ch}
.apr-aviso{color:var(--atencao);font-weight:600}
.apr-negado{color:var(--critico)}
.apr-falta{margin:var(--e1) 0 0;font-size:var(--letra-nota);color:var(--atencao);
  line-height:1.5;max-width:72ch}
/* Um caminho só, de 44px, e ele é o primeiro elemento tocável da linha. O que
   não é o caminho principal vira link discreto — mas continua com 44px de
   alvo, porque quem devolve máquina sem reparo também usa o tablet. */
.apr-acao{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e2);
  margin-top:var(--e3)}
.apr-secundaria{display:inline-flex;align-items:center;min-height:var(--toque);
  padding:0 var(--e2);font-size:var(--letra-nota);color:var(--tinta3)}
.apr-secundaria:hover{color:var(--indu-forte)}
/* A caixa de arquivo nasce alta e centrada, para receber foto de bancada. Aqui
   ela divide a linha com o botão que decide, e alta demais rouba o olho de
   quem só quer aprovar. */
.apr-acao .camera-curta{flex-direction:row;padding:var(--e2) var(--e3);gap:var(--e2);
  min-height:var(--toque);font-size:var(--letra-nota)}
.apr-acao .camera-curta .ic{font-size:var(--letra-corpo)}
@media (max-width:680px){
  .apr-acao{align-items:stretch;flex-direction:column}
  .apr-acao button,.apr-acao form,.apr-acao .camera-curta{width:100%}
  .apr-acao button{justify-content:center}
  .apr-valor,.apr-dias{margin-left:0}
}

/* ---------------------------------------------------------------------------
   O Portal do Cliente na porta única — o cartão com a cara da marca.
   Pedido do dono (22/09/2026). A senoide da Ranhura (o mesmo traçado do
   logotipo oficial, coral impresso) se desenha uma vez ao abrir a tela e de
   novo ao passar o mouse ou receber foco; as nove barras acendem quando a onda
   passa por elas. Tudo em CSS, sem JavaScript, e nada se move para quem pediu
   menos movimento. Escopado sob `.porta-caixa .porta-opcao`, como o irmão.
   -------------------------------------------------------------------------- */
@keyframes porta-portal-traco{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes porta-portal-barra{from{opacity:.15;transform:scaleY(.3)}to{opacity:.55;transform:none}}
.porta-caixa .porta-portal{gap:4px;padding:12px 12px 12px;
  background:linear-gradient(180deg,var(--painel2),var(--indu-fraco))}
.porta-portal-onda{display:block;width:64px;height:auto;margin:0 auto 4px;overflow:visible}
.porta-portal-ranhura rect{fill:var(--tinta);opacity:.55;
  transform-box:fill-box;transform-origin:50% 100%}
.porta-portal-senoide{fill:none;stroke:var(--senoide);stroke-width:2.1;
  stroke-linecap:round;stroke-dasharray:1 2;
  animation:porta-portal-traco 1.4s cubic-bezier(.6,0,.25,1) .2s both}
.porta-portal-ranhura rect{animation:porta-portal-barra .5s cubic-bezier(.2,.7,.2,1) both}
.porta-portal-ranhura rect:nth-child(1){animation-delay:.25s}
.porta-portal-ranhura rect:nth-child(2){animation-delay:.36s}
.porta-portal-ranhura rect:nth-child(3){animation-delay:.47s}
.porta-portal-ranhura rect:nth-child(4){animation-delay:.58s}
.porta-portal-ranhura rect:nth-child(5){animation-delay:.69s}
.porta-portal-ranhura rect:nth-child(6){animation-delay:.80s}
.porta-portal-ranhura rect:nth-child(7){animation-delay:.91s}
.porta-portal-ranhura rect:nth-child(8){animation-delay:1.02s}
.porta-portal-ranhura rect:nth-child(9){animation-delay:1.13s}
/* Passar o mouse (ou o foco do teclado) refaz só a senoide: a animação é
   trocada por outra de mesmo desenho, o que a reinicia sem JavaScript. */
.porta-caixa .porta-portal:hover .porta-portal-senoide,
.porta-radio:focus-visible ~ .porta-escolha .porta-portal .porta-portal-senoide{
  animation:porta-portal-traco 1.1s cubic-bezier(.6,0,.25,1) both}
.porta-caixa .porta-portal:hover{border-color:var(--senoide)}
#quem-cliente:checked ~ .porta-escolha .porta-portal{
  background:linear-gradient(180deg,var(--painel),var(--indu-fraco))}
@media (prefers-reduced-motion:reduce){
  .porta-portal-senoide,.porta-portal-ranhura rect{animation:none!important}
}

/* ==========================================================================
   REGISTRO DE INTERAÇÃO
   Prefixo `int-`. O mesmo bloco na ficha do cliente, no card do negócio e na
   OS. O caso principal é o celular de quem acabou de sair do cliente: tipo,
   texto, gravar e salvar, com o polegar. Gravador, câmera e relato vêm do
   módulo de visitas (`vis-`) — não há segundo componente para a mesma coisa.
   ========================================================================== */
.int-tipos{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:var(--e2)}
.int-tipos legend{font-size:var(--letra-forte);font-weight:650;margin-bottom:var(--e2);
  padding:0}
/* A dica da visita só aparece quando o tipo escolhido é visita. */
.int-dica-visita{display:none;margin:0}
.int-forma:has(input[value="visita"]:checked) .int-dica-visita{display:block}
.int-sugestoes{display:flex;flex-direction:column;border:1px solid var(--linha);
  border-radius:var(--r2);background:var(--painel);overflow:hidden;margin-top:calc(-1 * var(--e2))}
.int-sugestao{background:var(--painel);color:var(--tinta);border:0;border-radius:0;
  text-align:left;min-height:var(--toque);padding:0 var(--e3);font-weight:500}
.int-sugestao:hover,.int-sugestao.on{background:var(--indu-fraco);color:var(--indu-forte)}
.int-anexar{display:grid;gap:var(--e2);grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.int-anexar .vis-camera{margin-bottom:0;position:relative}
.int-anexar .vis-camera:focus-within{outline:2px solid var(--foco);outline-offset:2px}
.int-painel{margin:var(--e5) 0}
.int-painel .indicadores{margin-bottom:var(--e2)}
.int-filtros{display:flex;flex-wrap:wrap;gap:var(--e3);align-items:center;
  margin:var(--e5) 0 var(--e3)}
.int-filtros .segmentos{max-width:100%;overflow-x:auto}
/* O segmento é flex: o espaço entre o nome e a contagem some. */
.int-filtros .segmentos a .mono{margin-left:.4em}
.int-busca{display:flex;gap:var(--e2);flex:1 1 260px;align-items:center}
.int-busca label{flex:1}
.int-busca input{width:100%}
.int-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}
.int-lista{display:flex;flex-direction:column}
.int-item{scroll-margin-top:var(--e7)}
.int-item:target{background:var(--indu-fraco)}
/* Quem foi marcado vê que foi: o fio é coral, que é "está na sua mão". */
.int-me{border-left-color:var(--indu)}
.int-mencao{color:var(--indu-forte);font-weight:650}
.int-audio{display:flex;flex-wrap:wrap;gap:var(--e2);align-items:center;margin-top:var(--e2)}
.int-audio audio{flex:1 1 240px;max-width:420px}
.int-arquivos{list-style:none;margin:var(--e2) 0 0;padding:0;display:flex;
  flex-wrap:wrap;gap:var(--e2)}
.int-arquivos a{display:inline-flex;align-items:center;min-height:var(--toque);
  padding:0 var(--e3);border:1px solid var(--linha);border-radius:var(--r2);
  color:var(--indu-forte);font-size:var(--letra-nota);word-break:break-all}
.int-leitura{margin-top:var(--e3);padding:var(--e3);border-radius:var(--r2);
  background:var(--painel2);min-width:0}
.int-leitura .abas{margin:var(--e2) 0 var(--e3)}
.int-painel-aba p{margin:0 0 var(--e2)}
.int-grupo{font-size:var(--letra-nota);font-weight:650;margin:var(--e2) 0 var(--e1);
  color:var(--tinta2)}
.int-itens{margin:0;padding-left:var(--e4);font-size:var(--letra-corpo);line-height:1.5}
.int-positivos li::marker{color:var(--ok)}
.int-positivos{color:var(--ok)}
.int-negativos{color:var(--critico)}
.int-alertas{color:var(--atencao)}
.int-acoes{display:flex;flex-wrap:wrap;gap:var(--e2);align-items:flex-start;
  margin-top:var(--e3)}
.int-acoes details{flex:1 1 100%}
@media (max-width:680px){
  .int-busca{flex-basis:100%}
  .int-forma .acoes button{width:100%;min-height:56px}
}
/* Link dentro de linha de texto ainda é alvo de polegar. */
.int-painel .vis-dica a,.int-item .vis-relato-cabeca a{display:inline-flex;
  align-items:center;min-height:var(--toque)}
.int-leitura .abas a{gap:var(--e1)}

/* --------------------------------------------------------------------------
   Registro de interação dentro do card (`_interacoes_card.html`).
   Fechado é uma linha só — contagem e o último recado —, para a fila de
   quinze cards não virar quinze formulários. A linha inteira é alvo de
   polegar (luva no galpão). Aberto, reaproveita gravador e câmera da visita.
   -------------------------------------------------------------------------- */
.int-card{border-top:1px solid var(--linha-fraca);margin-top:var(--e2)}
.int-card>summary{display:flex;align-items:center;gap:var(--e2);min-height:var(--toque);
  cursor:pointer;list-style:none;font-size:var(--letra-nota);color:var(--tinta2)}
.int-card>summary::-webkit-details-marker{display:none}
.int-card>summary::before{transition:transform .15s}
.int-card[open]>summary::before{transform:rotate(90deg)}
.int-card>summary:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.int-card-rot{font-weight:650;color:var(--tinta)}
.int-card-n{min-width:22px;padding:0 var(--e2);border-radius:99px;text-align:center;
  background:var(--painel2);border:1px solid var(--linha-fraca);font-size:12px}
.int-card-ultima{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.int-card-corpo{padding:var(--e2) 0 var(--e3)}
.int-card-item{border-left:3px solid var(--linha);padding:2px 0 var(--e2) var(--e3);margin-bottom:var(--e2)}
.int-card-item p{margin:4px 0 0;font-size:14px;line-height:1.5;white-space:pre-wrap}
.int-card-item audio{margin-top:var(--e2);width:100%;max-width:360px}
.int-card-cabeca{display:flex;flex-wrap:wrap;gap:var(--e2);align-items:baseline;font-size:13px}
.int-card-cabeca time{color:var(--tinta3)}
.int-card-todas{margin:0 0 var(--e2)}
.int-card-todas a{display:inline-flex;align-items:center;min-height:var(--toque)}
.int-card-forma{display:flex;flex-direction:column;gap:var(--e2)}
.int-card-forma textarea{width:100%}
.int-card-tipo{display:flex;align-items:center;gap:var(--e2);font-size:13px}
.int-card-tipo select{width:auto}
.int-card-botoes{display:flex;flex-wrap:wrap;gap:var(--e2);align-items:stretch}
.int-card-botoes .vis-gravador{margin:0;padding:var(--e2);flex:1 1 100%}
.int-card-botoes .vis-camera{margin:0;min-height:48px;padding:8px 12px;flex:1 1 120px;font-size:14px}
.int-card-botoes button[type=submit]{min-height:48px;flex:1 1 120px}
.int-card-forma .vis-dica{margin:0}
.gaveta-ficha .int-card{margin-top:var(--e3)}
.int-card-no-bloco{padding-top:0}
/* Sob o card de peritagem, que é um link inteiro (formulário não entra em
   <a>): o registro vira o rodapé do próprio card, colado nele e com a mesma
   borda, para não parecer do card de baixo. */
.card-peritagem:has(+ .int-card-sob){margin-bottom:0;border-bottom-left-radius:0;
  border-bottom-right-radius:0;border-bottom-style:dashed}
.int-card-sob{margin:0 0 8px;padding:0 16px;background:var(--painel);
  border:1px solid var(--linha);border-top:0;border-radius:0 0 var(--r3) var(--r3)}
.card-peritagem.nova + .int-card-sob{border-color:var(--indu);border-width:0 2px 2px}
/* Na página (peritagem, bancada, montagem) o card é o último bloco: sem a
   linha de cima, que o `.bloco` já desenha. */
.int-card-pagina .int-card{border-top:0;margin-top:0}
/* Mesa do PCP: carga na mão por pessoa e sugestão de quem pega o serviço. */
.pcp-dist-carga{display:flex;flex-direction:column;gap:4px;margin-top:8px;
  font-size:13px;color:var(--tinta3)}
.pcp-dist-carga .barra-prog i{background:var(--indu)}
.pcp-dist .linha-topo{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pcp-dist-sugestao{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:8px}
.pcp-dist-sugestao button{min-height:44px}
.pcp-dist-sugestao span{font-size:13px;color:var(--tinta3)}
.pcp-dist-filtros .chips{flex-wrap:wrap}

/* DNA da máquina no topo da peritagem, da bancada e da montagem
   (`_dna_da_maquina.html`). O QR é o da etiqueta; tocar nele abre o painel. */
.dna-maquina{display:flex;gap:var(--e4);align-items:center;margin:0 0 var(--e4);
  padding:var(--e3) var(--e4);background:var(--painel);border:1px solid var(--linha);
  border-left:4px solid var(--indu);border-radius:var(--r3)}
.dna-maquina-qr{display:block;width:96px;height:96px;flex:none;background:#fff;
  padding:var(--e1);border-radius:var(--r2)}
.dna-maquina-qr svg{display:block;width:100%;height:100%}
.dna-maquina-qr:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.dna-maquina-texto{display:flex;flex-direction:column;gap:var(--e1);min-width:0}
.dna-maquina-rot{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--indu-forte)}
.dna-maquina-texto strong{font-size:18px;letter-spacing:.04em}
.dna-maquina-dica{font-size:13px;color:var(--tinta3)}
.dna-maquina-acoes{display:flex;flex-wrap:wrap;gap:var(--e2);margin-top:var(--e1)}
.dna-maquina-acoes .botao{min-height:48px;display:inline-flex;align-items:center}
@media (max-width:480px){
  .dna-maquina{align-items:flex-start}
  .dna-maquina-qr{width:72px;height:72px}
}
/* Ficha da OS: a aba abre na aba, descontando a barra fixa (o script refina). */
#abas{scroll-margin-top:calc(64px + var(--e4))}
/* Registro da OS: o fato do sistema entre as conversas — linha fina, sem card,
   para o recado de gente continuar sendo o que se lê primeiro. */
.int-fato{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;
  gap:var(--e1) var(--e3);padding:var(--e2) var(--e3);margin:var(--e2) 0;
  border-left:3px solid var(--linha);color:var(--tinta2);font-size:var(--letra-corpo)}
.int-fato p{margin:0;min-width:0}
.int-fato-grupo{font-size:var(--letra-micro);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tinta3)}
.int-fato-det{color:var(--tinta3)}
.int-fato-ok{border-left-color:var(--ok)}
.int-fato-atencao{border-left-color:var(--atencao)}
.int-fato-critico{border-left-color:var(--critico)}
.int-fato-processo{border-left-color:var(--indu)}
@media (max-width:600px){
  .int-fato{grid-template-columns:1fr}
}

/* ---------- administração: azulejos, não abas (24/09/2026; Clean 06/10) ---------- */
/* A porta do destino Administração é uma grade de azulejos — o ícone próprio
   da oficina (`#io-*`), título, uma linha do que responde e o número vivo
   quando houver. O dono pediu ícones para clicar, não uma lista horizontal.
   Clean: cada azulejo é papel com UMA sombra, sem borda (a caixa pesada de
   1 px saiu); o número em Albert 300; só a pendência pinta de atenção. Fase
   3b editou este trecho em vez de levá-lo para uma folha de tela, porque as
   páginas da Administração são da fase 4 — a regra é exclusiva delas. */
.adm-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--e4);align-items:stretch}
.adm-azulejo{display:flex;flex-direction:column;gap:var(--e3);position:relative;
  min-height:var(--toque);padding:var(--e5);background:var(--painel);
  border:0;border-radius:var(--r3);box-shadow:var(--sombra);color:var(--tinta);
  text-decoration:none;
  transition:background var(--t1) var(--curva),transform var(--t2) var(--curva)}
:root[data-tema="escuro"] .adm-azulejo{box-shadow:var(--sombra-alta)}
.adm-azulejo:hover{background:var(--painel2);text-decoration:none;transform:translateY(-1px)}
.adm-azulejo:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.adm-azulejo svg.ic.adm-azulejo-icone{width:28px;height:28px;color:var(--tinta2)}
.adm-azulejo-texto{display:flex;flex-direction:column;gap:var(--e1);min-width:0}
.adm-azulejo-titulo{font-family:var(--fonte-titulo);font-size:var(--letra-forte);font-weight:600;
  letter-spacing:-.01em;line-height:1.25;text-wrap:balance}
.adm-azulejo-resposta{font-size:var(--letra-nota);color:var(--tinta3);line-height:1.45}
.adm-azulejo-numero{position:absolute;top:var(--e5);right:var(--e5);
  font-family:var(--fonte-titulo);font-size:var(--letra-tela);font-weight:300;letter-spacing:-.03em;
  line-height:1;color:var(--tinta);font-variant-numeric:tabular-nums}
.adm-azulejo-numero.pendencia{color:var(--atencao);font-weight:400}
/* O número mora no canto onde o título nasce; o título abre espaço para ele. */
.adm-azulejo:has(.adm-azulejo-numero) .adm-azulejo-titulo{padding-right:var(--e7)}

/* A trilha "Administração › Página": o caminho de volta, em cima do h1. */
.adm-trilha{display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap;
  font-size:var(--letra-nota);color:var(--tinta3);margin-bottom:var(--e2)}
.adm-trilha a{display:inline-flex;align-items:center;min-height:var(--toque);
  color:var(--tinta);font-weight:500}
.adm-trilha a:hover{text-decoration:underline;text-underline-offset:3px}

/* Os irmãos em miniatura: ícone + nome, para pular entre as páginas da
   configuração. Texto; o atual vira pílula cheia em painel2, tinta e peso —
   como os recortes do quadro. Cabe numa linha no computador e rola no toque. */
.adm-irmaos{display:flex;gap:var(--e1);flex-wrap:wrap;margin-bottom:var(--e5)}
.adm-irmaos a{display:inline-flex;align-items:center;gap:var(--e2);
  min-height:var(--toque);padding:0 var(--e3);background:transparent;
  border:0;border-radius:var(--r2);color:var(--tinta3);
  font-size:var(--letra-corpo);font-weight:500;white-space:nowrap;text-decoration:none;
  transition:background var(--t1) var(--curva),color var(--t1) var(--curva)}
.adm-irmaos a:hover{color:var(--tinta);background:var(--painel2)}
.adm-irmaos a.ativo{color:var(--tinta);font-weight:600;background:var(--painel2)}
.adm-irmaos svg.ic{width:20px;height:20px}

@media (max-width:700px){
  /* Duas colunas no celular: o azulejo é para ser reconhecido pelo ícone e
     pelo nome, e dois por linha ainda se leem. */
  .adm-grade{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e3)}
  .adm-azulejo{padding:var(--e4)}
  .adm-azulejo-numero{top:var(--e4);right:var(--e4)}
  .adm-irmaos{flex-wrap:nowrap;overflow-x:auto;padding-bottom:var(--e1)}
}
@media (max-width:420px){
  /* A 390px duas colunas de 170px partem "Estágios dos pipelines" em três
     linhas e o número invade o título. Uma coluna, e o azulejo vira linha. */
  .adm-grade{grid-template-columns:1fr}
}

/* ===================================================================   Decisão do cliente — Aprovado ou Negado (`_decisao_proposta.html`)

   "O vendedor aprova de uma maneira bem intuitiva: aprovado ou negado, negado
   por quê, se explica" (dono, 24/09/2026). Dois botões do mesmo tamanho, lado a
   lado, cada um com a cor do que significa. Tocar não grava nada: abre o que
   falta dizer daquele lado, e só o "Confirmar" envia. Sem script — os botões
   são rótulos de dois `radio`, e o formulário aparece pelo irmão `~`.
   ========================================================================== */
.decisao-cliente{display:flex;flex-direction:column;gap:var(--e3);width:100%;
  margin:var(--e3) 0 0}
.decisao-radio{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.decisao-botoes{display:grid;grid-template-columns:1fr 1fr;gap:var(--e2)}
.decisao-sim,.decisao-nao{display:flex;align-items:center;justify-content:center;
  gap:var(--e2);min-height:56px;padding:0 var(--e4);border-radius:var(--r2);
  border:2px solid currentColor;background:var(--painel);cursor:pointer;
  font-size:var(--letra-forte);font-weight:700;text-align:center;user-select:none}
.decisao-sim{color:var(--ok)}
.decisao-nao{color:var(--critico)}
.decisao-sim:hover{background:var(--ok-fraco)}
.decisao-nao:hover{background:var(--critico-fraco)}
.decisao-radio-sim:checked ~ .decisao-botoes .decisao-sim{background:var(--ok);
  border-color:var(--ok);color:var(--tinta-acao)}
.decisao-radio-nao:checked ~ .decisao-botoes .decisao-nao{background:var(--critico);
  border-color:var(--critico);color:var(--tinta-acao)}
.decisao-radio-sim:focus-visible ~ .decisao-botoes .decisao-sim,
.decisao-radio-nao:focus-visible ~ .decisao-botoes .decisao-nao{
  outline:2px solid var(--foco);outline-offset:2px}
.decisao-form{display:none;flex-direction:column;gap:var(--e3);padding:var(--e4);
  border:1px solid var(--linha);border-radius:var(--r2);background:var(--painel2);
  min-width:0}
.decisao-radio-sim:checked ~ .decisao-form-sim,
.decisao-radio-nao:checked ~ .decisao-form-nao{display:flex}
.decisao-form-sim{border-color:var(--ok)}
.decisao-form-nao{border-color:var(--critico)}
.decisao-campos{display:flex;flex-wrap:wrap;gap:var(--e3);align-items:flex-end}
.decisao-campos .camera-curta{flex:1 1 220px;flex-direction:row;gap:var(--e2);
  min-height:var(--toque);padding:var(--e2) var(--e3)}
/* Como o cliente autorizou e o comprovante (dono, 25/09/2026): obrigatórios no
   "Aprovado". A data prometida só aparece quando é ela a escolhida. */
.decisao-autorizacao{border:0;margin:0 0 var(--e3);padding:0;display:flex;
  flex-wrap:wrap;gap:var(--e2)}
.decisao-autorizacao legend{font-size:var(--letra-nota);font-weight:600;
  color:var(--tinta2);margin-bottom:var(--e2);padding:0}
.decisao-prometida{display:none;flex:1 1 100%;flex-direction:column;gap:var(--e1);
  font-size:var(--letra-nota);font-weight:600;color:var(--tinta2)}
.decisao-prometida small{font-weight:500;color:var(--tinta3)}
.decisao-autorizacao:has(input[value="data_prometida"]:checked) .decisao-prometida{display:flex}
.decisao-comprovante{display:flex;flex-wrap:wrap;gap:var(--e3);align-items:flex-end;
  margin:0 0 var(--e3)}
.decisao-comprovante > label:first-child,.decisao-comprovante > label:last-child{display:flex;
  flex-direction:column;gap:var(--e1);font-size:var(--letra-nota);font-weight:600;color:var(--tinta2)}
/* Sem ordem de compra, o áudio do vendedor (ata do financeiro, 04/10/2026). */
.decisao-sem-oc{margin:0 0 var(--e3);padding:var(--e3);border:1px dashed var(--linha);
  border-radius:var(--r2);display:flex;flex-direction:column;gap:var(--e2)}
.decisao-comprovante b{color:var(--critico)}
.decisao-data,.decisao-explique{display:flex;flex-direction:column;gap:var(--e1);
  font-size:var(--letra-nota);font-weight:600;color:var(--tinta3)}
.decisao-data{flex:0 1 200px}
.decisao-depois{margin:0;font-size:var(--letra-nota);color:var(--tinta2);
  line-height:1.5;max-width:72ch}
.decisao-motivos{border:0;padding:0;margin:0;min-width:0}
.decisao-motivos legend{padding:0;margin:0 0 var(--e2);font-size:var(--letra-corpo);
  font-weight:700;color:var(--tinta)}
.decisao-confirmar{align-self:flex-start;min-height:var(--toque)}
.decisao-confirmar-nao{background:var(--critico)}
.decisao-confirmar-nao:hover{background:var(--critico);filter:brightness(.92)}
.orc-acao .decisao-cliente{flex:1 1 100%}
@media (max-width:680px){
  .decisao-confirmar{align-self:stretch;justify-content:center}
  .decisao-data{flex:1 1 100%}
  .decisao-form{padding:var(--e3)}
  .decisao-motivos .chip-caixa{flex:1 1 auto}
}

/* ---------- Marcar visita: busca, carteira e contato digitado — 24/09/2026 ----------
   O vendedor escolhe o cliente digitando, ou marca vários na carteira dele; o
   que está marcado é o que vira visita. No celular, de pé, com uma mão: toda
   linha da carteira é um alvo de 44px inteiro, não só o quadradinho. */
.vis-clientes{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;
  gap:var(--e3)}
.vis-clientes legend{padding:0;margin-bottom:var(--e2);font-size:var(--letra-nota);
  font-weight:600;color:var(--tinta2)}
.vis-busca{position:relative;display:flex;flex-direction:column;gap:var(--e1)}
.vis-busca-rotulo{font-size:var(--letra-nota);font-weight:600;color:var(--tinta2)}
.vis-busca-rotulo em{font-style:normal;font-weight:400;color:var(--tinta4)}
.vis-busca input{width:100%}
.vis-busca-lista{position:absolute;top:100%;left:0;right:0;z-index:5;margin:var(--e1) 0 0;
  padding:var(--e1) 0;list-style:none;background:var(--painel);border:1px solid var(--linha);
  border-radius:var(--r2);box-shadow:var(--sombra-alta);max-height:320px;overflow-y:auto}
.vis-busca-lista li{display:flex;flex-direction:column;justify-content:center;
  min-height:var(--toque);padding:var(--e2) var(--e3);cursor:pointer;
  font-size:var(--letra-corpo);color:var(--tinta)}
.vis-busca-lista li em{font-style:normal;font-size:var(--letra-nota);color:var(--tinta3)}
.vis-busca-lista li[aria-selected="true"]{background:var(--painel2);color:var(--tinta)}
.vis-busca-lista .vis-busca-nada{cursor:default;color:var(--tinta3)}
.vis-carteira{display:flex;flex-direction:column;gap:var(--e2)}
.vis-carteira-titulo{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--e2);margin:0;
  font-size:var(--letra-corpo);color:var(--tinta)}
.vis-carteira-titulo span{font-size:var(--letra-nota);color:var(--tinta3)}
.vis-carteira-lista{list-style:none;margin:0;padding:0;border:1px solid var(--linha);
  border-radius:var(--r2);max-height:320px;overflow-y:auto;background:var(--painel)}
.vis-carteira-item{display:flex;align-items:center;gap:var(--e2);padding:0 var(--e3) 0 0;
  border-bottom:1px solid var(--linha-fraca)}
.vis-carteira-item:last-child{border-bottom:0}
.vis-carteira-marcado{background:var(--painel2)}
/* `.vis-carteira-item label` precisa vencer `.modelo-form label:not(.chip-caixa)`,
   que empilha rótulo e campo em coluna. Mesma especificidade, declarado depois. */
.vis-carteira-item label.vis-marca{flex:1;min-width:0;display:flex;flex-direction:row;
  align-items:center;gap:var(--e3);min-height:var(--toque);padding:var(--e2) var(--e3);
  cursor:pointer;font-weight:400}
.vis-carteira-item label.vis-marca input{width:20px;height:20px;padding:0;margin:0;
  flex:none;accent-color:var(--indu)}
.vis-marca span{display:flex;flex-direction:column;min-width:0}
.vis-marca b{font-size:var(--letra-corpo);font-weight:600;color:var(--tinta);
  overflow-wrap:anywhere}
.vis-marca em{font-style:normal;font-size:var(--letra-nota);color:var(--tinta3)}
.vis-carteira-item input.vis-hora{width:112px;flex:none;padding:var(--e2)}
.vis-resumo{margin:0;font-size:var(--letra-nota);color:var(--tinta3);line-height:1.5}
.vis-resumo:empty{display:none}
.vis-um-cliente{display:flex;flex-direction:column;gap:var(--e3)}
.vis-contato{display:flex;flex-direction:column;gap:var(--e3)}

/* ---------- Agendar pela carteira — 27/09/2026 ----------
   A lista é a carteira, e a borda da esquerda diz há quanto tempo o cliente
   não recebe visita: vermelho (90 dias ou nunca), âmbar (30 a 89), verde. É o
   único enfeite da tela, e é informação: o olho desce a lista pelo vermelho.
   Marcou, a linha abre data, hora e objetivo embaixo dela; o endereço já vem
   escrito, e o "Editar endereço" fica fechado. */
/* `overflow:hidden` do `.bloco` faria dele o rolador da barra grudada, e ela
   subiria por cima da busca; `clip` recorta os cantos igual e deixa a barra
   grudar na janela. */
.bloco.vis-agendar{overflow:clip}
.vis-cart{display:flex;flex-direction:column;gap:var(--e3)}
.vis-cart-lista{list-style:none;margin:0;padding:0;border:1px solid var(--linha);
  border-radius:var(--r2);background:var(--painel);overflow:hidden}
.vis-cart-item{border-bottom:1px solid var(--linha-fraca);border-left:4px solid var(--linha)}
.vis-cart-item:last-child{border-bottom:0}
.vis-cart-frio{border-left-color:var(--critico)}
.vis-cart-morno{border-left-color:var(--atencao)}
.vis-cart-em-dia{border-left-color:var(--ok)}
.vis-cart-outro{border-left-color:var(--tinta3)}
.vis-cart-aberto,.vis-cart-item:has(.vis-cart-marca input:checked){background:var(--painel2)}
/* vence `.modelo-form label:not(.chip-caixa)` e o label comum da casa */
.vis-cart-item label.vis-cart-marca{display:flex;flex-direction:row;align-items:center;
  gap:var(--e3);min-height:var(--toque);padding:var(--e3) var(--e4) var(--e3) var(--e3);
  margin:0;cursor:pointer;font-weight:400}
.vis-cart-item label.vis-cart-marca input{width:22px;height:22px;margin:0;padding:0;flex:none;
  accent-color:var(--tinta)}
.vis-cart-nome{flex:1;min-width:0;display:flex;flex-direction:column}
.vis-cart-nome b{font-size:var(--letra-corpo);font-weight:600;color:var(--tinta);
  overflow-wrap:anywhere}
.vis-cart-nome em{font-style:normal;font-size:var(--letra-nota);color:var(--tinta3)}
.vis-cart-silencio{flex:none;display:flex;flex-direction:column;align-items:flex-end;
  font-size:var(--letra-nota);color:var(--tinta2);font-variant-numeric:tabular-nums;
  white-space:nowrap;text-align:right}
.vis-cart-frio .vis-cart-silencio{color:var(--critico);font-weight:600}
.vis-cart-silencio small{font-size:var(--letra-micro);font-weight:400;color:var(--tinta3)}
.vis-cart-detalhe{display:none;grid-template-columns:minmax(0,180px) minmax(0,140px) 1fr;
  gap:var(--e3);align-items:end;
  padding:0 var(--e4) var(--e4) calc(var(--e3) + 22px + var(--e3))}
.vis-cart-aberto .vis-cart-detalhe,
.vis-cart-item:has(.vis-cart-marca input:checked) .vis-cart-detalhe{display:grid}
.vis-cart label.vis-cart-campo{display:flex;flex-direction:column;gap:var(--e1);margin:0;
  font-size:var(--letra-nota);font-weight:600;color:var(--tinta2);min-width:0}
.vis-cart-campo em{font-style:normal;font-weight:400;color:var(--tinta4)}
.vis-cart-campo input,.vis-cart-campo select{width:100%;min-height:var(--toque)}
.vis-cart-objetivo{grid-column:auto}
.vis-cart-onde{grid-column:1 / -1;margin:0;font-size:var(--letra-nota);color:var(--tinta2);
  line-height:1.5}
.vis-cart-onde em{font-style:normal;color:var(--tinta3)}
.vis-cart-endereco{grid-column:1 / -1}
.vis-cart-endereco summary{display:inline-flex;align-items:center;min-height:var(--toque);
  cursor:pointer;font-size:var(--letra-nota);color:var(--tinta2)}
.vis-cart-endereco-campos{display:grid;grid-template-columns:1fr 80px;gap:var(--e3)}
.vis-cart-endereco-campos .vis-cart-campo:first-child{grid-column:1 / -1}
.vis-cart-uf input{text-transform:uppercase}
.vis-cart-vazia{margin:0;font-size:var(--letra-nota);color:var(--tinta3);line-height:1.5}
.vis-cart-busca h3{margin:var(--e2) 0 var(--e2);font-size:var(--letra-corpo);font-weight:600;
  color:var(--tinta);text-transform:none;letter-spacing:0}
.vis-cart-busca .vis-cart-lista{margin-top:var(--e3)}
/* O botão acompanha a rolagem: com trinta clientes na lista, "Agendar 3
   visitas" não pode ficar lá embaixo, depois do "Outro cliente". */
.vis-cart-barra{position:sticky;bottom:0;z-index:2;display:flex;align-items:center;
  justify-content:space-between;gap:var(--e3);flex-wrap:wrap;
  padding:var(--e3) 0;background:var(--painel);border-top:1px solid var(--linha)}
.vis-cart-resumo{font-size:var(--letra-nota);color:var(--tinta2)}
.vis-cart-barra button{min-height:var(--toque)}
/* No toque, a barra de navegação de baixo (64px, fixa) cobriria o botão. */
@media (max-width:900px){
  .vis-cart-barra{bottom:calc(64px + env(safe-area-inset-bottom))}
}
@media (max-width:680px){
  .vis-cart-detalhe{grid-template-columns:1fr 1fr;padding:0 var(--e3) var(--e3) var(--e3)}
  .vis-cart-objetivo{grid-column:1 / -1}
  .vis-cart-barra button{flex:1 1 100%}
}

/* A miniatura da foto escolhida: a prova de que ela está lá antes do toque. */
.vis-miniatura{width:48px;height:48px;object-fit:cover;border-radius:var(--r2);
  margin-right:var(--e3);flex:none}

/* O que ficou para trás: cada linha resolve ali mesmo. */
.vis-atras-item{display:flex;flex-direction:column;gap:var(--e2);padding:var(--e3) 0;
  border-bottom:1px solid var(--linha-fraca)}
.vis-atras-item:last-child{border-bottom:0}
.vis-atras-quem{display:flex;flex-direction:column;gap:2px}
.vis-atras-quem strong{font-size:var(--letra-corpo)}
.vis-atras-quem a{color:var(--tinta)}
.vis-atras-item .vis-chegada{margin:0}
.vis-atras-acoes{display:flex;flex-wrap:wrap;gap:var(--e2) var(--e4)}
.vis-atras-mais{flex:1 1 220px}
.vis-atras-mais summary{color:var(--tinta2);font-weight:600;cursor:pointer}
.vis-atras-mais form{margin-top:var(--e2)}
.vis-cadastrar{margin-top:var(--e2)}
.vis-cadastrar button{min-height:var(--toque);padding:var(--e2) var(--e3)}

/* Carteira na ficha do cliente: uma linha, só para a gestão. */
.cli-carteira{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--e2);
  margin-top:var(--e2)}
.cli-carteira label{display:flex;flex-direction:column;gap:var(--e1)}
.cli-carteira button{min-height:var(--toque);padding:0 var(--e4)}

@media (min-width:821px){
  .vis-clientes,.vis-atras-item{max-width:600px}
}
/* ---------------------------------------------------------------- carimbo
   O carimbo biométrico no início e no fim da execução (DECISOES 25/09). Tudo
   com prefixo `carimbo-` e sobre os tokens da folha: `.chave-confirmar` continua
   sendo a caixa; aqui entram só a faixa de falha, os chips de motivo, a dobra da
   senha, a segunda linha do botão, a faixa de troca de mão e a configuração por
   fase. Alvo de 44 px em tudo: é a tela de quem está de luva. */
.carimbo-sub{display:block;width:100%;font-size:var(--letra-nota);font-weight:400;opacity:.85;
  margin-top:var(--e1)}
/* O botão da casa é caixa flexível: sem isto a segunda linha vira item ao lado
   do verbo e o espreme. Com a linha embaixo, o verbo continua sendo o botão. */
button:has(.carimbo-sub){flex-wrap:wrap;justify-content:center;line-height:1.2}
.carimbo-faixa{display:flex;gap:var(--e2);flex-wrap:wrap;margin-top:var(--e2)}
.carimbo-faixa button{min-height:var(--toque);padding:0 var(--e4);border-radius:var(--r2);
  font-size:var(--letra-corpo);font-weight:600;cursor:pointer;flex:1 1 200px}
.carimbo-tentar{background:var(--indu);color:var(--tinta-acao);border:0}
.carimbo-tentar:hover{background:var(--indu-forte)}
.carimbo-seguir{background:transparent;color:var(--indu-forte);border:1px solid var(--indu)}
.carimbo-seguir:hover{background:var(--painel)}
.carimbo-motivos{margin:var(--e2) 0 0;padding:0;border:0;min-width:0}
.carimbo-motivos legend{padding:0;margin-bottom:var(--e2);font-size:var(--letra-nota);
  font-weight:600;color:var(--tinta3)}
.carimbo-motivos .chips{gap:var(--e2)}
/* Com três seletores de propósito: dentro do bloco do gesto, regras de tela
   (`.aceite`, `.modelo-form`) empilhavam o rádio em cima do texto. */
.chave-confirmar .carimbo-motivos .carimbo-chip{display:inline-flex;flex-direction:row;
  align-items:center;justify-content:flex-start;gap:var(--e2);min-height:var(--toque);
  padding:0 var(--e4);flex:1 1 160px;background:var(--painel);font-size:var(--letra-corpo);
  font-weight:600;letter-spacing:0;text-transform:none;color:var(--tinta2)}
/* O rádio do chip: `.linha-acao input` dava padding, borda e fundo ao rádio,
   e ele saía do tamanho de um botão. Aqui ele volta a ser o quadradinho. */
.chave-confirmar .carimbo-chip input{margin:0;padding:0;border:0;background:transparent;
  width:18px;height:18px;min-width:0;min-height:0;flex:none}
.carimbo-senha{margin-top:var(--e2)}
.carimbo-senha summary{min-height:var(--toque);display:flex;align-items:center;
  font-size:var(--letra-corpo);font-weight:600;color:var(--indu-forte);cursor:pointer;
  list-style:none}
.carimbo-senha summary::-webkit-details-marker{display:none}
.carimbo-senha summary::before{content:"›";display:inline-block;margin-right:var(--e2);
  transition:transform .15s}
.carimbo-senha[open] summary::before{transform:rotate(90deg)}
.carimbo-senha label{display:block;margin-top:var(--e1)}
button.carimbo-ok{background:var(--ok-fraco);color:var(--ok);border:1px solid var(--ok)}

/* A troca de mão, visível e persistente: quem olha o tablet sabe de quem é a
   sessão até ela acabar. Sem "voltar para Gabriel" sem prova. */
.carimbo-troca{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);
  flex-wrap:wrap;margin:0 0 var(--e3);padding:var(--e2) var(--e4);border-radius:var(--r2);
  background:var(--atencao-fraco);color:var(--atencao);font-size:var(--letra-corpo)}
.carimbo-troca b{color:inherit}
.carimbo-troca a{display:inline-flex;align-items:center;min-height:var(--toque);
  padding:0 var(--e3);border-radius:var(--r2);border:1px solid currentColor;
  color:inherit;text-decoration:none;font-weight:600}

/* Configuração · Identidade: uma linha por fase, três botões segmentados. */
.carimbo-niveis{list-style:none;margin:0 0 var(--e3);padding:0}
.carimbo-niveis li{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);
  flex-wrap:wrap;padding:var(--e3) 0;border-top:1px solid var(--linha-fraca)}
.carimbo-niveis li:first-child{border-top:0}
.carimbo-fase{display:flex;flex-direction:column;min-width:160px}
.carimbo-fase b{font-size:var(--letra-corpo)}
.carimbo-fase small{font-size:var(--letra-nota);color:var(--tinta3)}
.carimbo-nivel{display:inline-flex;border:1px solid var(--linha);border-radius:var(--r2);
  overflow:hidden}
.carimbo-nivel button{min-height:var(--toque);min-width:104px;padding:0 var(--e3);border:0;
  border-left:1px solid var(--linha);background:var(--painel);color:var(--tinta2);
  font-size:var(--letra-corpo);font-weight:600;cursor:pointer}
.carimbo-nivel button:first-child{border-left:0}
.carimbo-nivel button[aria-pressed="true"]{background:var(--indu);color:var(--tinta-acao)}
.carimbo-nivel button:disabled{color:var(--tinta4);cursor:not-allowed}
.carimbo-confirmar{margin-top:var(--e2);padding:var(--e3) var(--e4);border-radius:var(--r2);
  background:var(--atencao-fraco);color:var(--atencao);display:flex;gap:var(--e3);
  align-items:center;flex-wrap:wrap;width:100%}
.carimbo-confirmar button{min-height:var(--toque);padding:0 var(--e4);border-radius:var(--r2);
  border:1px solid var(--atencao);background:transparent;color:var(--atencao);
  font-weight:600;cursor:pointer}
.carimbo-adocao{width:100%;border-collapse:collapse;font-size:var(--letra-corpo)}
.carimbo-adocao th,.carimbo-adocao td{padding:var(--e2) var(--e3);text-align:left;
  border-top:1px solid var(--linha-fraca)}
.carimbo-adocao th{font-size:var(--letra-micro);text-transform:uppercase;
  letter-spacing:.06em;color:var(--tinta3);border-top:0}
.carimbo-adocao td.carimbo-pct{font-variant-numeric:tabular-nums;font-weight:600}
.carimbo-compartilhado{color:var(--atencao);font-weight:600}
.carimbo-selo{display:block;font-size:var(--letra-nota);color:var(--tinta3)}
.carimbo-selo-biometrico{color:var(--ok)}
.carimbo-selo-parcial{color:var(--atencao)}

/* A porta de entrada no celular cabe numa tela só (dono, 25/09/2026, print do
   iPhone: "login e senha têm que se resumir em uma tela só, sem arrastar para
   cima ou para baixo"). A faixa da marca fica curta — logotipo e o sinal lado a
   lado —, a escolha time/cliente vira uma linha, e "Esqueci minha senha" e
   "Entrar com digital ou rosto" dividem a última linha. As notas de apoio saem:
   a do "esqueci" aparece na tela seguinte, e a da digital, quando o botão é
   tocado sem aparelho cadastrado. `100dvh`, e não `100vh`: no iPhone o `vh`
   conta a barra do Safari e sempre sobrava rolagem. */
@media (max-width:700px){
  .entrada.com-marca{min-height:100dvh;grid-template-rows:auto 1fr}
  .entrada.com-marca .entrada-marca{flex-direction:row;flex-wrap:wrap;align-items:center;
    gap:var(--e3) var(--e4);padding:calc(env(safe-area-inset-top) + var(--e5)) var(--e4) var(--e5)}
  .entrada.com-marca .entrada-marca-logo{flex:none}
  .entrada.com-marca .entrada-marca .logo-indu{width:120px;max-width:none}
  .entrada.com-marca .entrada-marca-corpo{order:1;flex:1 1 100%;max-width:none}
  .entrada.com-marca .entrada-marca-frase{font-size:var(--letra-forte)}
  .entrada.com-marca .entrada-sinal{flex:1 1 auto;min-width:0;height:36px;max-height:none}
  .entrada.com-marca > .caixa{align-self:center;padding:var(--e4) var(--e4)
    calc(var(--e4) + env(safe-area-inset-bottom))}
  .porta-caixa > .sub{display:none}
  .porta-escolha{margin:0 0 var(--e2)}
  .porta-caixa .porta-opcao{min-height:var(--toque);padding:var(--e2)}
  .porta-caixa .porta-opcao span{display:none}
  /* A senoide do Portal do Cliente fica — é a marca (dono, 25/09/2026) —, ao
     lado do nome em vez de em cima, para a opção caber numa linha. */
  .porta-caixa .porta-opcao.porta-portal{flex-direction:row;align-items:center;
    justify-content:center;gap:var(--e2);padding:var(--e2)}
  .porta-caixa .porta-portal .porta-portal-onda{width:44px;margin:0;flex:none}
  .entrada.com-marca label{margin:var(--e3) 0 var(--e1)}
  .entrada.com-marca form button{margin-top:var(--e4)}
  #quem-time:checked ~ .porta-time{display:flex;flex-direction:column}
  .porta-time > .porta-ajuda{order:2;margin-top:var(--e2)}
  .porta-time > .porta-ajuda-nota,.chave-porta .chave-ou,.chave-porta .chave-nota{display:none}
  .porta-time > .chave-porta{order:1;margin-top:var(--e3)}
  .chave-porta .chave-entrar{min-height:var(--toque);margin-top:0}
}
/* iPhone pequeno (SE) ou teclado aberto: a frase sai e a faixa encolhe — o
   formulário inteiro continua à vista. */
@media (max-width:700px) and (max-height:680px){
  .entrada.com-marca .entrada-marca-corpo{display:none}
  .entrada.com-marca .entrada-marca{padding-top:calc(env(safe-area-inset-top) + var(--e3));
    padding-bottom:var(--e3)}
}
/* Receber máquina: quantas fotos já vão, de até 15. */
.fotos-chegada-conta{margin:var(--e1) 0 0;font-size:13px;color:var(--tinta3)}
.fotos-chegada-conta.no-limite{color:var(--atencao);font-weight:600}

/* Dados de bobinagem (`bobinagem.html`): cartão do bobinador, leitura a um braço
   de distância, e folha A4 para colar na bancada. */
.bob-comp .corpo{display:flex;flex-direction:column;gap:var(--e3)}
.bob-faixa{display:flex;flex-direction:column;gap:var(--e1);padding:var(--e3) var(--e4);
  border-radius:var(--r2);border:1px solid var(--linha)}
.bob-faixa-parar{background:var(--atencao-fraco);border-color:var(--atencao);color:var(--tinta)}
.bob-faixa-parar strong{color:var(--atencao)}
.bob-faixa-anterior{background:var(--painel2);border-style:dashed}
.bob-faixa .botao{align-self:flex-start;margin-top:var(--e2)}
.bob-cartao{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e2) var(--e4);margin:0}
.bob-linha{padding:var(--e2) 0;border-bottom:1px solid var(--linha-fraca);min-width:0}
.bob-linha dt{font-size:13px;color:var(--tinta3);margin-bottom:var(--e1)}
.bob-linha dd{margin:0;font-size:18px;font-weight:600;line-height:1.35;color:var(--tinta);
  overflow-wrap:anywhere}
.bob-critico dd{font-size:22px}
.bob-falta{color:var(--critico);font-weight:700}
.bob-vazio{color:var(--tinta4)}
.bob-mudou{display:block;margin-top:var(--e1);font-size:13px;font-weight:600;color:var(--atencao)}
.bob-foto{display:inline-block;margin-top:var(--e2)}
.bob-foto img,.bob-fotos img{width:120px;height:90px;object-fit:cover;border-radius:var(--r2);
  border:1px solid var(--linha);display:block}
.bob-fotos{display:flex;flex-wrap:wrap;gap:var(--e2)}
.bob-legenda,.bob-quem{margin:0;font-size:13px;color:var(--tinta3)}
.bob-detalhe h3{font-size:var(--letra-nota);margin:var(--e3) 0 var(--e1);color:var(--tinta2)}
.bob-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--e1) var(--e4);margin:0}
.bob-grade dt{font-size:12px;color:var(--tinta3)}
.bob-grade dd{margin:0 0 var(--e2);font-size:15px}
.bob-rodape-impresso{display:none}
@media (max-width:680px){ .bob-cartao{grid-template-columns:1fr} }
@media print{
  .bob-nao-imprime,.trilho,header.barra,.barra-toque,.faixa-destino{display:none!important}
  .bob-detalhe,.bob-obs{display:none}
  .bob-comp{break-inside:avoid;border:1px solid #999}
  .bob-nao-liberado::before{content:"NÃO LIBERADO — NÃO CORTAR COBRE";display:block;
    text-align:center;font-weight:800;font-size:20px;color:#b00;padding:8px;border:3px solid #b00;margin:8px}
  .bob-linha dd{font-size:16px}.bob-critico dd{font-size:19px}
  .bob-rodape-impresso{display:flex;gap:16px;align-items:center;margin-top:16px;font-size:12px}
  .bob-qr{width:90px;height:90px}.bob-qr svg{width:100%;height:100%}
}
.bob-motivo{margin:0;font-size:14px;color:var(--tinta2)}
.lv-fases{margin:var(--e3) 0}

/* (Clean 4b, 06/10/2026) as regras exclusivas da Administração moram em telas/administracao.css */
/* ---------- Indicadores do comercial (`comercial_indicadores.html`) — 27/09/2026 ----------
   O painel da TV da sala do comercial na tela de cada um. As cores são as do
   dono e são o próprio indicador: vermelho até 50%, roxo até 80%, verde até
   100%, verde piscando acima. A palavra ao lado repete o estado. */
.ind-pm{display:grid;gap:var(--e5);--pm-vermelho:#C8102E;--pm-roxo:#6B3FA0;--pm-verde:var(--ok)}
.ind-pct-vermelho{--pm-cor:var(--pm-vermelho)}
.ind-pct-roxo{--pm-cor:var(--pm-roxo)}
.ind-pct-verde,.ind-pct-acima{--pm-cor:var(--pm-verde)}
.ind-pct-sem{--pm-cor:var(--tinta3)}
.ind-pm-sub{font-style:normal;font-weight:500;font-size:13px;color:var(--tinta3);margin-left:var(--e2)}
.ind-pm-lin{display:grid;grid-template-columns:minmax(140px,1fr) minmax(0,2fr) auto;
  align-items:center;gap:var(--e4);padding:var(--e3) 0;border-top:1px solid var(--linha-fraca)}
.ind-pm-lin:first-child{border-top:0}
.ind-pm-quem{display:grid;gap:var(--e1)}
.ind-pm-quem b{font-size:17px}
.ind-pm-estado{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta3)}
.ind-pm-barra{display:block;height:12px;border-radius:var(--e1);background:var(--painel3);overflow:hidden}
.ind-pm-barra i{display:block;height:100%;background:var(--pm-cor)}
.ind-pm-num{min-width:96px;text-align:right;font-family:var(--mono,ui-monospace,monospace);
  font-size:32px;font-weight:700;line-height:1;color:var(--pm-cor)}
.ind-pct-acima .ind-pm-num,.ind-pct-acima .ind-pm-tot{animation:ind-pm-pisca 1.6s ease-in-out infinite}
@keyframes ind-pm-pisca{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.ind-pct-acima .ind-pm-num,.ind-pct-acima .ind-pm-tot{animation:none}}
.ind-pm-tabela{overflow-x:auto}
.ind-pm-tabela table{width:100%;border-collapse:collapse}
.ind-pm-tabela th,.ind-pm-tabela td{padding:var(--e3) var(--e2);border-top:1px solid var(--linha-fraca);text-align:left}
.ind-pm-tabela .num{text-align:center}
.ind-pm-tabela td:last-child,.ind-pm-tabela th:last-child{text-align:right}
.ind-pm-tot{font-size:22px;color:var(--pm-cor)}
.ind-pm-de{font-size:12px;color:var(--tinta3)}
.ind-pm-zero{color:var(--tinta4)}
.ind-pm-hoje{box-shadow:inset 0 -2px 0 var(--tinta)}
.ind-pm-lembra{font-size:12px;font-weight:600;color:var(--atencao)}
.ind-pm-passada{margin:0 0 var(--e3);color:var(--tinta3)}
@media (max-width:600px){
  .ind-pm-lin{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"quem num" "barra barra"}
  .ind-pm-quem{grid-area:quem}.ind-pm-num{grid-area:num;font-size:26px;min-width:0}
  .ind-pm-barra{grid-area:barra}
}

/* Programação por pessoa (dono, 27/09/2026). Um cartão por colaborador com a
   fila dele em palavra: agora, mandada (esperando o aceite), depois, hoje. O
   cartão com passagem esperando aceite ganha a borda coral — é o que o PCP
   precisa ver de longe, e a palavra "aguardando aceite" diz o mesmo sem cor. */
.prog-resumo{display:flex;flex-wrap:wrap;gap:var(--e2) var(--e5);margin:0 0 var(--e4);
  font-size:var(--letra-corpo);color:var(--tinta3)}
.prog-resumo b{color:var(--tinta);font-variant-numeric:tabular-nums}
.prog-resumo-alerta b{color:var(--alarme-texto)}
.prog-pessoas{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:var(--e3);margin-bottom:var(--e5)}
.prog-pessoa{background:var(--painel);border:1px solid var(--linha);border-radius:var(--r3);
  padding:var(--e3) var(--e4);display:flex;flex-direction:column;gap:var(--e2);min-width:0}
.prog-pessoa.prog-com-pendencia{border-color:var(--tinta);box-shadow:inset 3px 0 0 var(--tinta)}
.prog-pessoa-topo{display:flex;align-items:baseline;justify-content:space-between;gap:var(--e2)}
.prog-pessoa-topo strong{font-size:var(--letra-forte);letter-spacing:-.01em}
.prog-pessoa-topo span{font-size:var(--letra-nota);color:var(--tinta3);white-space:nowrap}
.prog-fila{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--e2)}
.prog-item{display:grid;grid-template-columns:auto 1fr;gap:var(--e1) var(--e2);align-items:center;
  padding:var(--e2) 0;border-top:1px solid var(--linha-fraca)}
.prog-item:first-child{border-top:0}
.prog-item-rot{grid-column:1/-1;font-size:var(--letra-micro);text-transform:uppercase;
  letter-spacing:.06em;color:var(--tinta4)}
.prog-item .tag{justify-self:start;white-space:nowrap}
.prog-item-os{min-width:0;color:var(--tinta);font-size:var(--letra-corpo)}
.prog-item-os .mono{white-space:nowrap}
.prog-item-maquina,.prog-item-quando{grid-column:1/-1;font-size:var(--letra-nota);
  color:var(--tinta3);min-width:0;overflow-wrap:anywhere}
.prog-urgente{color:var(--critico)}
.prog-item.prog-aguardando{background:var(--painel2);border-radius:var(--r2);
  padding:var(--e2);border-top:0}
.prog-item.prog-concluida .prog-item-os{color:var(--tinta3)}
.prog-barra{grid-column:1/-1;height:4px;border-radius:2px;background:var(--painel3);overflow:hidden}
.prog-barra i{display:block;height:100%;background:var(--info)}
.prog-livre{margin:0;font-size:var(--letra-nota);color:var(--tinta3)}
/* Editar um item da fila: passar para outra pessoa ou excluir (dono, 06/10/2026). */
.prog-editar{grid-column:1/-1}
.prog-editar>summary{display:inline-flex;align-items:center;min-height:var(--toque);
  cursor:pointer;color:var(--tinta);font-weight:600;font-size:var(--letra-nota)}
.prog-editar-form{display:flex;flex-direction:column;gap:var(--e2);margin-top:var(--e2)}
.prog-editar-form label{display:flex;flex-direction:column;gap:var(--e1);font-size:var(--letra-nota)}
.prog-editar-form select,.prog-editar-form input[type=text]{width:100%;min-height:var(--toque)}
.prog-editar-form .botao{align-self:flex-start;min-height:var(--toque)}
.prog-editar-form .prog-excluir{color:var(--critico);border-color:var(--critico)}
.prog-mandar{border-top:1px solid var(--linha-fraca);padding-top:var(--e2)}
.prog-mandar>summary{min-height:var(--toque);display:flex;align-items:center;cursor:pointer;
  color:var(--tinta);font-weight:600}
.prog-mandar form{display:flex;flex-direction:column;gap:var(--e2);margin-top:var(--e2)}
.prog-mandar label{display:flex;flex-direction:column;gap:var(--e1);font-size:var(--letra-nota)}
.prog-mandar select{width:100%;min-height:var(--toque)}
.prog-mandar .botao{align-self:flex-start;min-height:var(--toque)}
.prog-nota{margin:0;font-size:var(--letra-nota);color:var(--tinta3)}
/* Mandar com busca da rastreabilidade (dono, 01/10/2026): digita e a lista
   encolhe. Campo de 16 px para o iOS não dar zoom; cada linha com 44 px. */
.prog-busca-rotulo{font-size:var(--letra-nota);color:var(--tinta2)}
.prog-busca{display:flex;flex-direction:column;gap:var(--e1)}
input.prog-busca-campo{width:100%;min-height:var(--toque);padding:0 var(--e3);font-size:16px;
  border:1px solid var(--linha);border-radius:var(--r2);background:var(--painel);color:var(--tinta)}
input.prog-busca-campo:focus{outline:2px solid var(--foco);outline-offset:1px}
.prog-busca-conta{margin:0;min-height:1.2em;font-size:var(--letra-nota);color:var(--tinta3)}
.prog-busca-conta.prog-busca-nada{color:var(--tinta2);font-weight:600}
.prog-busca-lista{list-style:none;margin:0;padding:var(--e1);max-height:360px;overflow:auto;
  border:1px solid var(--linha);border-radius:var(--r2);background:var(--painel)}
.prog-busca-opcao{display:flex;flex-direction:column;justify-content:center;gap:2px;
  min-height:var(--toque);padding:var(--e2) var(--e3);border-radius:var(--r1);cursor:pointer}
.prog-busca-opcao:hover,.prog-busca-opcao.prog-busca-ativa{background:var(--painel3)}
.prog-busca-opcao.prog-busca-mandando{background:var(--painel2);box-shadow:inset 3px 0 0 var(--tinta)}
.prog-busca-topo{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--e1) var(--e2)}
.prog-busca-os{font-size:17px;color:var(--tinta)}
.prog-busca-cod{font-size:var(--letra-nota);color:var(--tinta3)}
.prog-busca-cliente{font-weight:600;color:var(--tinta2)}
.prog-busca-maquina{font-size:var(--letra-corpo);color:var(--tinta2)}
.prog-busca-servico{font-size:var(--letra-nota);color:var(--tinta3)}
.prog-busca-urgente .prog-busca-servico{color:var(--critico)}
.prog-busca-servico.prog-busca-inclui{color:var(--info);font-weight:600}
/* A faixa "Enviado: OS · Montagem → Rafael" com Desfazer (02/10/2026). */
.prog-enviado{align-items:center;flex-wrap:wrap}
.prog-enviado-texto{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.prog-enviado-texto span{font-size:var(--letra-nota)}
.prog-enviado-desfazer .botao{min-height:var(--toque)}
@media (max-width:680px){
  .prog-pessoas{grid-template-columns:1fr}
  .prog-mandar .botao{align-self:stretch;justify-content:center}
}

.ind-pm-reais{font-size:13px;font-weight:600;color:var(--tinta2);font-variant-numeric:tabular-nums}

/* Áudio da peritagem (`_audio_da_peritagem.html`, 27/09/2026). Aberto só a
   dúvida de escuta e até cinco pontos; áudio, transcrição e lista inteira
   atrás de um toque de 48px. Selo em texto e ícone, nunca só cor. */
.aud-item{display:flex;flex-direction:column;gap:var(--e2);padding:var(--e3) 0;
  border-top:1px solid var(--linha-fraca);min-width:0}
.aud-item:first-child{border-top:0;padding-top:0}
.aud-quem{margin:0;font-size:var(--letra-nota);color:var(--tinta3)}
.aud-nota{margin:0;overflow-wrap:anywhere}
.aud-confira{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e2);margin:0;
  font-weight:600;overflow-wrap:anywhere}
.aud-titulo{margin:0;font-size:var(--letra-corpo);font-weight:650}
.aud-grupo{margin:var(--e3) 0 var(--e1);font-size:var(--letra-nota);font-weight:650;
  color:var(--tinta2)}
.aud-pontos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:var(--e2)}
.aud-pontos li{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--e2);
  min-width:0;overflow-wrap:anywhere}
.aud-acoes{display:flex;flex-direction:column;gap:var(--e2)}
.aud-mais{border:1px solid var(--linha);border-radius:var(--r2);background:var(--painel);
  min-width:0}
.aud-mais > summary{min-height:48px;padding:0 var(--e3);cursor:pointer;font-weight:600}
.aud-mais[open] > summary{border-bottom:1px solid var(--linha-fraca)}
.aud-mais > :not(summary){margin:var(--e3)}
.aud-mais audio{display:block;width:calc(100% - 2 * var(--e3))}
.aud-transcricao{white-space:pre-wrap;overflow-wrap:anywhere;max-width:70ch}
.aud-trecho{flex:1 0 100%}
.aud-trecho > summary{min-height:48px;font-size:var(--letra-nota);color:var(--tinta3)}
.aud-trecho q{display:block;font-style:italic;color:var(--tinta2);overflow-wrap:anywhere}
.aud-reler{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e2)}
.aud-reler .botao{min-height:48px}
.aud-gravar{display:flex;flex-direction:column;gap:var(--e3);padding-top:var(--e3);
  border-top:1px solid var(--linha-fraca)}
.aud-gravar:first-child{border-top:0;padding-top:0}
.aud-gravar button[type=submit]{min-height:48px}

/* ---------- Pós-venda (28/09/2026) ---------------------------------------
   A carteira de quem já comprou. Na mesa, tabela densa; no tablet e no
   celular cada linha vira cartão — nada de rolagem horizontal — e o "Agir"
   abre os gestos em alvos de 44 px (DIRETRIZES §3). */
.posv-filtros .posv-situacoes{flex-wrap:wrap;max-width:100%}
.posv-situacoes a{gap:var(--e2)}
.posv-tabela{width:100%;border-collapse:collapse}
.posv-tabela th{text-align:left;font-size:var(--letra-nota);color:var(--tinta3);
  padding:var(--e2) var(--e3);border-bottom:1px solid var(--linha)}
.posv-linha td{padding:var(--e2) var(--e3);border-bottom:1px solid var(--linha);
  vertical-align:top}
.posv-nota{display:block;font-size:var(--letra-nota);color:var(--tinta4)}
.posv-atrasada{color:var(--critico);font-weight:600}
.posv-sugestao{font-size:var(--letra-nota);color:var(--tinta3);font-style:italic}
.posv-agir{width:1%;white-space:nowrap}
.posv-acoes{position:relative}
.posv-acoes > summary{display:inline-flex;align-items:center;min-height:var(--toque);
  padding:0 var(--e4);border:1px solid var(--linha);border-radius:var(--r2);
  cursor:pointer;font-weight:600;list-style:none}
.posv-acoes > summary::-webkit-details-marker{display:none}
.posv-acoes-corpo{position:absolute;right:0;top:calc(100% + var(--e2));z-index:30;
  width:320px;display:flex;flex-direction:column;gap:var(--e3);padding:var(--e3);
  background:var(--painel);border:1px solid var(--linha);border-radius:var(--r3);
  box-shadow:var(--sombra-alta);white-space:normal}
.posv-gesto{display:flex;flex-direction:column;gap:var(--e2);margin:0}
.posv-gesto label{display:flex;flex-direction:column;gap:var(--e1);
  font-size:var(--letra-nota);color:var(--tinta3)}
.posv-gesto input,.posv-gesto select,.posv-gesto button{min-height:var(--toque);width:100%}
@media (max-width:1024px){
  .posv-tabela,.posv-tabela tbody,.posv-tabela tr,.posv-tabela td{display:block;width:auto}
  .posv-tabela thead{display:none}
  .posv-linha{margin:0 0 var(--e3);padding:var(--e3);border:1px solid var(--linha);
    border-radius:var(--r3)}
  .posv-linha td{padding:var(--e1) 0;border:0}
  .posv-linha td[data-rot]::before{content:attr(data-rot);display:block;
    font-size:var(--letra-micro);text-transform:uppercase;letter-spacing:.07em;
    color:var(--tinta4);font-weight:700}
  .posv-linha a{display:inline-flex;align-items:center;min-height:var(--toque)}
  .posv-agir{width:auto;white-space:normal;padding-top:var(--e2)}
  .posv-acoes > summary{width:100%;justify-content:center}
  .posv-acoes-corpo{position:static;width:auto;box-shadow:none;margin-top:var(--e2)}
}

/* As peças de usinagem no 👥 do card (dono, 28/09/2026): cada uma vira item
   próprio que o torneiro aceita e fecha. Fechado, é uma linha. */
.card .rapidas .card-distribuir-pecas{grid-column:1 / -1;font-size:var(--letra-nota)}
.card-distribuir-pecas-titulo{display:block;color:var(--indu-forte);font-weight:600;
  padding-top:var(--e1)}
.card-distribuir-pecas-lista{display:grid;gap:var(--e1);padding:var(--e1) 0}
.card-distribuir-pecas-lista label{display:flex;align-items:center;gap:var(--e2);
  min-height:32px;color:var(--tinta2)}
.card-distribuir-pecas-lista input[name="outra_peca"]{width:100%;min-height:var(--toque)}

/* Ensaio final do controle de qualidade em passos (dono, 28/09/2026).
   Reaproveita a fita da peritagem, as escolhas grandes (.escala-condicao) e a
   medida da bancada; aqui só o que é do ensaio. */
.ef-fita a{display:inline-flex;align-items:center;gap:var(--e2)}
.ef-marca{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:99px;
  font-size:12px;font-weight:700;background:var(--painel);color:var(--tinta3)}
.ef-fita a.ef-feito .ef-marca{background:var(--ok);color:var(--tinta-acao)}
.ef-fita a.ef-reprovado .ef-marca{background:var(--critico);color:var(--tinta-acao)}
.ef-form{display:grid;gap:var(--e3)}
.ef-linha{display:grid;grid-template-columns:1fr auto;gap:var(--e3);align-items:end}
.ef-rotulo{display:block;font-size:13px;color:var(--tinta3);margin-bottom:var(--e1);font-weight:600}
.ef-rotulo em{font-style:normal;font-weight:400}
.ef-escolha .escala-condicao{margin-bottom:0}
.ef-cabos{border:0;padding:0;margin:0;min-width:0}
.ef-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--e2)}
.ef-grade-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ef-grade input{width:100%;min-height:var(--toque);font-size:16px}
.ef-acoes{display:flex;gap:var(--e3);align-items:center;flex-wrap:wrap}
.ef-resumo{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--e2);
  margin-bottom:var(--e4)}
.ef-resumo .passo-card{text-decoration:none;color:var(--tinta)}
.passo-card.ef-card-reprovado{border-color:var(--critico)}
.passo-card.ef-card-reprovado span{color:var(--critico)}
.ef-checkout{display:grid;gap:var(--e3)}
.ef-checkout .op small{display:block;font-size:12px;font-weight:400;opacity:.85}
.ef-checkout:has(input[name="veredito"][value="aprovado"]:checked) .ef-se-reprovado,
.ef-checkout:has(input[name="veredito"][value="reprovado"]:checked) .ef-se-aprovado{display:none}
@media (max-width:560px){
  .ef-linha{grid-template-columns:1fr}
  .ef-grade-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* A dica dentro do relato é frase corrida: o `pre-wrap` do relato (que guarda as
   quebras que a pessoa digitou) fazia a quebra de linha do template aparecer no
   meio da frase. */
.vis-relato p.vis-dica{white-space:normal}

/* O estágio real ao lado de "Em execução" (dono, 29/09/2026): verde quando há
   alguém trabalhando, âmbar quando a passagem espera aceite. */
.os-onde{background:var(--ok-fraco);color:var(--ok)}
.os-onde.os-onde-espera{background:var(--atencao-fraco);color:var(--atencao)}

/* O tablet do controle de qualidade (dono, 29/09/2026): uma linha por máquina,
   a que espera aceite com a borda coral. */
.cq-titulo{margin:0 0 var(--e4)}
.cq-lin{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--e3);align-items:center;
  padding:var(--e3) var(--e4);border-left:4px solid transparent;border-bottom:1px solid var(--linha)}
.cq-lin.cq-espera{border-left-color:var(--tinta)}
.cq-quem{display:grid;gap:var(--e1);min-width:0}
.cq-numero{font-size:22px;font-weight:700;color:var(--tinta);text-decoration:none}
.cq-recado{font-size:13px;color:var(--tinta3)}
.cq-acoes{display:grid;gap:var(--e2);justify-items:end}
.cq-concluir{display:grid;gap:var(--e2);min-width:280px}
.cq-concluir .escala-condicao{margin-bottom:0}
.cq-link{text-decoration:none;text-align:center}
.cq-vazio{padding:var(--e3) var(--e4)}
@media (max-width:640px){
  .cq-lin{grid-template-columns:1fr}
  .cq-acoes{justify-items:stretch}
  .cq-concluir{min-width:0}
}
.vist-chamar-cq{display:grid;gap:var(--e3)}
/* Enrolamento (13/10/2026): duas opções, uma só escolhida. Cartão inteiro é
   o alvo (luva), 72 px no mínimo; o escolhido acende em tinta. */
.vist-enrolamento{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--e3);margin:0;padding:0;border:0;min-width:0}
.vist-enrolamento legend{padding:0;margin-bottom:var(--e2);font-weight:600}
.vist-enrol-op{display:flex;align-items:flex-start;gap:var(--e3);min-height:72px;padding:var(--e3) var(--e4);
  border:2px solid var(--linha);border-radius:var(--r3);background:var(--painel);cursor:pointer}
.vist-enrol-op input{width:24px;height:24px;margin:2px 0 0;flex:none;accent-color:var(--tinta)}
.vist-enrol-op span{display:flex;flex-direction:column;gap:2px}
.vist-enrol-op b{font-size:18px}
.vist-enrol-op small{color:var(--tinta2);font-size:14px;line-height:1.35}
.vist-enrol-op:has(input:checked){border-color:var(--tinta);background:var(--painel2)}
.vist-enrol-op:has(input:focus-visible){outline:2px solid var(--tinta);outline-offset:2px}
.vist-curto-visivel{background:var(--critico-fraco);border-left-color:var(--critico)}
/* Curto visível (13/10/2026): onde e a tensão só aparecem com a opção marcada. */
.vist-curto-detalhe{display:none;flex-direction:column;gap:var(--e3)}
.vist-chamar-cq:has(input[value=rebobinar_curto]:checked) .vist-curto-detalhe{display:flex}
.vist-curto-onde{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--e2)}
.vist-curto-onde legend{padding:0;margin-bottom:var(--e2);font-weight:600}
.vist-curto-onde .chip-caixa{min-height:48px}
.vist-enrol-fora{opacity:.7;cursor:default}
.vist-falta-foto{margin:0;padding:var(--e2) var(--e3);border-radius:var(--r2);
  background:var(--atencao-fraco);color:var(--atencao);font-weight:600}


/* ------------------------------------------------ Fila sem rede (30/09/2026)
   O que foi feito sem internet e espera a rede: uma faixa no pé da tela, acima
   da barra de navegação do celular. Âmbar enquanto espera, verde quando subiu,
   vermelho quando a sessão venceu. O texto diz o que fazer, não o que deu erro. */
.fila-faixa{position:fixed;left:var(--e3);right:var(--e3);z-index:60;
  bottom:calc(var(--e3) + env(safe-area-inset-bottom, 0px));
  display:flex;align-items:center;gap:var(--e3);max-width:720px;margin:0 auto;
  padding:var(--e3) var(--e4);border-radius:var(--r3);border:1px solid var(--linha);
  background:var(--painel);box-shadow:0 8px 24px rgba(7,19,31,.18)}
.fila-faixa[hidden]{display:none}
.fila-icone{flex:none;width:12px;height:12px;border-radius:50%;background:var(--atencao)}
.fila-texto{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.fila-texto b{font-size:15px}
.fila-texto small{font-size:13px;color:var(--tinta3, inherit);overflow:hidden;
  text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.fila-botao{flex:none;min-height:var(--toque);padding:0 var(--e4);border-radius:var(--r2);
  border:1px solid var(--atencao);background:var(--atencao-fraco);color:var(--atencao);
  font-weight:600;text-decoration:none;display:inline-flex;align-items:center;cursor:pointer}
.fila-botao[hidden]{display:none}
.fila-espera{border-color:var(--atencao);background:var(--atencao-fraco)}
.fila-enviando .fila-icone{animation:fila-pulsar 1s ease-in-out infinite}
.fila-ok{border-color:var(--ok);background:var(--ok-fraco)}
.fila-ok .fila-icone{background:var(--ok)}
.fila-entrar,.fila-recusa{border-color:var(--critico);background:var(--critico-fraco)}
.fila-entrar .fila-icone,.fila-recusa .fila-icone{background:var(--critico)}
.fila-entrar .fila-botao{border-color:var(--critico);background:var(--critico);color:#fff}
@keyframes fila-pulsar{50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.fila-enviando .fila-icone{animation:none}}
/* A confirmação no lugar do botão tocado: o que ficou guardado e a hora. */
.fila-guardado{display:flex;flex-direction:column;gap:var(--e1);margin:var(--e2) 0;
  padding:var(--e3) var(--e4);border-radius:var(--r2);border-left:4px solid var(--atencao);
  background:var(--atencao-fraco);color:var(--atencao)}
.fila-guardado b{font-size:16px}
.fila-guardado span{color:var(--tinta2, inherit)}
@media (max-width:900px){
  /* Acima da barra de navegação inferior do celular. */
  .fila-faixa{bottom:calc(76px + env(safe-area-inset-bottom, 0px));left:var(--e2);right:var(--e2)}
}
.fila-guardado-ok{border-left-color:var(--ok);background:var(--ok-fraco);color:var(--ok)}
/* Foto que ficou no aparelho (fotos sem travar, 09/10/2026): aparece na hora,
   com "⏳ aguardando rede", e vira "✓ enviada" quando sobe. */
.fila-foto-espera{display:inline-flex;flex-direction:column;gap:var(--e1);margin:var(--e1);
  width:96px;vertical-align:top}
.fila-foto-espera img{width:96px;height:96px;object-fit:cover;border-radius:var(--r2);
  border:2px dashed var(--atencao)}
.fila-foto-espera figcaption{font-size:12px;color:var(--atencao);line-height:1.2}
.fila-foto-nome{display:flex;align-items:center;justify-content:center;width:96px;height:96px;
  border:2px dashed var(--atencao);border-radius:var(--r2);font-size:12px;text-align:center;
  overflow:hidden;color:var(--tinta2)}
.fila-foto-ok img,.fila-foto-ok .fila-foto-nome{border:2px solid var(--ok)}
.fila-foto-ok figcaption{color:var(--ok)}
[data-ofi-foto-estado][data-estado="espera"] span{color:var(--atencao)}

/* (Clean 4b, 06/10/2026) as regras exclusivas da Administração moram em telas/administracao.css */
/* --- Rosto no tablet (04/10/2026) ---------------------------------------- *
 * A câmera do aceite e do checkout. Tela cheia escura com a imagem espelhada,
 * oval de 70% da largura e anel que enche em 1,5 s; a borda clareia para
 * iluminar o rosto quando a luz do galpão vem por trás (ux-industrial).
 * Botões de 64px, nada no topo, onde a mão cobriria a câmera. */
.rosto-tela{position:fixed;inset:0;z-index:2000;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;gap:var(--e4);
  padding:calc(var(--e6) + var(--topo-seguro)) var(--e6) var(--e6);
  background:#0B0F12;color:#fff;box-shadow:inset 0 0 0 var(--e5) #F4F6F7;overflow-y:auto}
.rosto-palco{position:relative;width:min(100%,520px,40vh);aspect-ratio:3/4;flex-shrink:0;border-radius:var(--r4);
  overflow:hidden;background:#000;margin-top:var(--e6)}
.rosto-video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.rosto-oval{position:absolute;left:15%;top:10%;width:70%;height:78%;border-radius:50%;
  border:3px solid rgba(255,255,255,.85);box-shadow:0 0 0 999px rgba(0,0,0,.35)}
.rosto-anel{position:absolute;inset:-8px;border-radius:50%;border:6px solid transparent;
  border-top-color:var(--ok);opacity:0}
.rosto-enchendo .rosto-anel{opacity:1;animation:rosto-gira 1.5s linear forwards}
@keyframes rosto-gira{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.rosto-ok .rosto-oval{border-color:var(--ok);box-shadow:0 0 0 999px rgba(15,99,80,.45)}
.rosto-estado{margin:0;font-size:var(--letra-numero);font-weight:700;text-align:center;
  line-height:1.15}
.rosto-ok .rosto-estado{color:#8FE3C6}
.rosto-sub{margin:0;font-size:var(--letra-forte);color:#C9D3D8;text-align:center}
.rosto-acoes{display:flex;flex-direction:column;gap:var(--e3);width:min(100%,520px)}
.rosto-botao{min-height:64px;border-radius:var(--r3);border:0;font-size:var(--letra-forte);
  font-weight:700;background:var(--indu);color:#fff;padding:0 var(--e5)}
.rosto-botao.secundario{background:#fff;color:#0B0F12}
.rosto-botao.leve{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.45)}
.rosto-supervisor{display:flex;flex-direction:column;gap:var(--e2)}
.rosto-com-formulario .rosto-palco{width:min(100%,260px,26vh)}
.rosto-supervisor input{min-height:56px;border-radius:var(--r2);border:0;padding:0 var(--e4);
  font-size:var(--letra-forte)}
@media (prefers-reduced-motion:reduce){.rosto-enchendo .rosto-anel{animation:none}}

/* Rostos da equipe e o cadastro com ciência */
.rostos-lista td{vertical-align:middle}
.rosto-aviso{font-size:var(--letra-forte);line-height:1.5;max-width:60ch}
.rosto-aviso p{margin:0 0 var(--e3)}
.rosto-bolinhas{display:flex;gap:var(--e3);justify-content:center;margin:var(--e3) 0}
.rosto-bolinhas span{width:var(--e5);height:var(--e5);border-radius:50%;
  border:2px solid var(--tinta3, #888)}
.rosto-bolinhas span.feita{background:var(--ok);border-color:var(--ok)}
.rosto-cadastro-palco{position:relative;width:min(92vw,480px,48vh);aspect-ratio:3/4;margin:0 auto;
  border-radius:var(--r4);overflow:hidden;background:#000}

/* (Clean 4b, 06/10/2026) as regras exclusivas do Financeiro moram em telas/financeiro.css */
/* ---------- ficha do cliente: marcadores e compras (04/10/2026) ----------
   Marcadores como etiqueta, código do Omie copiável, e Compras compacto:
   20 no computador, 10 no celular, pedido · data · vínculo · valor numa linha
   e os itens recolhidos (ux-lead + crm-designer). */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.posv-nota.em-linha{display:inline}
.cli-marcadores{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e2);
  margin-top:var(--e2)}
/* No cabeçalho o fundo neutro some contra a página: cada marcador ganha
   contorno, e a tag de lá usa o par informativo (cor por categoria: tier na
   marca, tag em azul, situação no estado, origem neutra). */
.cli-marcadores .tag{box-shadow:inset 0 0 0 1px var(--linha)}
.cli-marcadores .t-etiqueta{background:var(--info-fraco);color:var(--info)}
.cli-marcadores .t-tier{font-weight:600}
.cli-omie{display:inline-flex;align-items:center;gap:var(--e2);
  font-size:var(--letra-nota);color:var(--tinta3)}
.cli-copiar{min-height:var(--toque);min-width:var(--toque);padding:0 var(--e3)}
.cli-compras-lista{list-style:none;margin:0;padding:0}
.cli-compra{border-bottom:1px solid var(--linha-fraca);padding:var(--e2) var(--e4)}
.cli-compra-linha{display:grid;align-items:baseline;gap:var(--e1) var(--e3);
  grid-template-columns:minmax(0,1fr) auto auto auto}
.cli-compras-todas .cli-compra-linha{grid-template-columns:minmax(0,1fr) auto auto auto minmax(0,14ch)}
.cli-compra-num{overflow-wrap:anywhere}
.cli-compra-data{font-variant-numeric:tabular-nums;color:var(--tinta3);white-space:nowrap}
.cli-compra-valor{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;
  min-width:9ch}
.cli-compra-valor .sem-valor{font-style:italic}
.cli-compra-vendedor{font-size:var(--letra-nota);color:var(--tinta2)}
.cli-compra-mais > summary{display:flex;align-items:center;min-height:var(--toque);
  cursor:pointer;font-size:var(--letra-nota);color:var(--tinta3)}
.cli-compra-detalhe{font-size:var(--letra-nota);color:var(--tinta2);padding-bottom:var(--e2)}
.cli-compra-detalhe p{margin:0 0 var(--e1)}
.cli-compra-detalhe ul{margin:0;padding-left:var(--e4)}
.cli-compras-rodape{text-align:right}
.cli-compras-rodape a,.cli-compras-paginas a{min-height:var(--toque);display:inline-flex;
  align-items:center}
.cli-compras-filtros{display:flex;flex-wrap:wrap;gap:var(--e3);align-items:center;
  margin-bottom:var(--e4)}
.cli-compras-filtros .segmentos{max-width:100%;overflow-x:auto}
.cli-compras-ano select{min-height:var(--toque)}
.cli-compras-paginas{display:flex;justify-content:space-between;align-items:center;
  gap:var(--e3);margin:var(--e4) 0}
@media (max-width:640px){
  /* Celular: as 10 mais recentes na ficha; a lista inteira está a um toque. */
  #compras .cli-compras-lista > .cli-compra:nth-child(n+11){display:none}
  .cli-compra-linha,.cli-compras-todas .cli-compra-linha{
    grid-template-columns:minmax(0,1fr) auto}
  .cli-compra-vinculo{grid-column:1}
}
/* Estágio que lá foi marcado "desfeito": o significado não foi confirmado
   [VALIDAR], então a tela não afirma nada — sem risco nem cor; só a dica
   (title) e o texto para leitor de tela (DECISOES 04/10/2026). */
.estagio-desfeito{cursor:help}
.linha-form button.leve{background:var(--painel);color:var(--tinta2);border:1px solid var(--linha)}

/* Ensaio inicial com leituras no tablet do CQ (05/10/2026). */
.cq-leituras{display:flex;flex-direction:column;gap:var(--e3);width:100%}
.cq-grupo{border:1px solid var(--linha);border-radius:var(--r2);padding:var(--e3);margin:0}
.cq-grupo legend{font-weight:600;padding:0 var(--e1)}
.cq-fases{display:flex;flex-wrap:wrap;gap:var(--e2)}
.cq-fases label{display:flex;flex-direction:column;gap:2px;font-size:13px}
.cq-fases input,.cq-fases select{min-height:var(--toque);width:110px;padding:0 var(--e2);
  border:1px solid var(--painel2);border-radius:var(--r1);font-size:16px}
.cq-obs{display:flex;flex-direction:column;gap:4px}
.cq-obs textarea{width:100%;border:1px solid var(--painel2);background-color:var(--painel2);border-radius:var(--r2);padding:var(--e2);font-size:var(--letra-corpo)}
.cq-potencia{font-family:var(--mono, monospace);font-size:13px;color:var(--tinta3, inherit)}

/* Peritagem (05/10/2026): primeira escolha — motor ou motor com bomba. */
.vist-tipo-opcoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--e3)}
.vist-tipo-op{display:flex;align-items:center;justify-content:center;gap:var(--e2);min-height:88px;
  border:2px solid var(--linha);border-radius:var(--r3);background:var(--painel);color:inherit;
  font-size:19px;font-weight:600;cursor:pointer}
.vist-tipo-op span{font-size:28px}
.vist-tipo-op.on,.vist-tipo-op:hover{border-color:var(--indu);background:var(--indu-fraco)}
.vist-subtitulo{margin:var(--e4) 0 var(--e2);font-size:16px}
.extra-texto{display:flex;flex-direction:column;gap:4px}
.vist-cq-resultado{display:flex;flex-direction:column;gap:4px;padding:var(--e3);border-radius:var(--r2);
  background:var(--ok-fraco);border-left:4px solid var(--ok)}
/* Ficha de orçar: quem fez a peritagem (05/10/2026). */
.orc-quem-lista{display:grid;grid-template-columns:max-content 1fr;gap:var(--e2) var(--e4);margin:0}
.orc-quem-lista dt{color:var(--tinta3, inherit);font-size:13px}
.orc-quem-lista dd{margin:0}
.orc-decisao-rebobinar{color:var(--critico)}
.orc-decisao-rejuvenescer,.orc-decisao-secar{color:var(--atencao)}
.orc-decisao-sem_intervencao{color:var(--ok)}
@media (max-width:600px){.orc-quem-lista{grid-template-columns:1fr}}
/* Com as leituras abertas, a linha empilha: a OS em cima, o formulário inteiro embaixo. */
.cq-lin.cq-lin-leituras{grid-template-columns:minmax(0,1fr);align-items:stretch}
.cq-lin.cq-lin-leituras .cq-acoes{justify-items:stretch;width:100%}

/* ---------------------------------------------------------------------------
   Relatório técnico pronto (05/10/2026). O selo que o comercial vê na OS, no
   cartão do funil e na fila da tela comercial, com as duas ações: baixar o
   PDF e enviar por e-mail. Verde de "pronto" — é a única faixa verde do topo
   da OS, para ser vista de relance; enviado volta ao neutro.
   --------------------------------------------------------------------------- */
.rtp-faixa{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e3) var(--e4);
  margin:0 0 var(--e4);padding:var(--e3) var(--e4);background:var(--ok-fraco);
  border:1px solid var(--ok);border-left:4px solid var(--ok);border-radius:var(--r3)}
.rtp-faixa.rtp-enviado{background:var(--painel);border-color:var(--linha);border-left-color:var(--ok)}
.rtp-texto{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--e1) var(--e3);flex:1;min-width:240px}
.rtp-selo{display:inline-flex;align-items:center;gap:var(--e2);font-weight:700;color:var(--ok);
  font-size:var(--letra-corpo)}
.rtp-selo::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--ok)}
.rtp-meta{font-size:var(--letra-nota);color:var(--tinta3)}
.rtp-sobre{font-size:var(--letra-micro);text-transform:uppercase;letter-spacing:.09em;color:var(--tinta3)}
.rtp-acoes{display:flex;flex-wrap:wrap;gap:var(--e2);align-items:flex-start}
.rtp-acoes .botao{min-height:var(--toque);display:inline-flex;align-items:center}
.rtp-envio{position:relative}
.rtp-envio>summary{list-style:none;cursor:pointer}
.rtp-envio>summary::-webkit-details-marker{display:none}
.rtp-form{display:grid;gap:var(--e2);margin-top:var(--e2);padding:var(--e3);min-width:min(360px,86vw);
  background:var(--painel);border:1px solid var(--linha);border-radius:var(--r2);box-shadow:var(--sombra-alta)}
.rtp-form label{display:grid;gap:var(--e1);font-size:var(--letra-nota);color:var(--tinta3)}
.rtp-form input{min-height:var(--toque)}
.rtp-form small{font-size:var(--letra-micro);color:var(--tinta3)}
.rtp-cartao{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e2);margin:var(--e1) 0;
  padding:var(--e1) var(--e2);background:var(--ok-fraco);border-radius:var(--r1)}
.rtp-cartao .rtp-selo{font-size:var(--letra-micro)}
.rtp-cartao .rtp-selo::before{width:8px;height:8px}
.rtp-cartao a{min-height:32px;display:inline-flex;align-items:center;padding:0 var(--e2);
  border-radius:var(--r1);background:var(--painel);color:var(--tinta);font-size:var(--letra-micro);
  font-weight:600;text-decoration:none;border:1px solid var(--linha)}
.rtp-cartao a:hover{border-color:var(--ok)}
.rtp-cartao.rtp-enviado{background:var(--painel2)}
.rtp-fila{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e2);margin:0 0 var(--e4);
  padding:var(--e3) var(--e4);background:var(--ok-fraco);border-left:4px solid var(--ok);border-radius:var(--r2)}
.rtp-fila-item{display:inline-flex;align-items:center;gap:var(--e2);min-height:var(--toque);
  padding:0 var(--e3);background:var(--painel);border:1px solid var(--linha);border-radius:var(--r2);
  color:var(--tinta);text-decoration:none;font-size:var(--letra-nota)}
.rtp-fila-item small{color:var(--tinta3)}
.rtp-fila-item:hover{border-color:var(--ok)}
.paleta .r .rtp-acoes-paleta{display:flex;gap:var(--e2);margin-top:var(--e1)}
.paleta .r .rtp-acoes-paleta a{min-height:32px;display:inline-flex;align-items:center;padding:0 var(--e3);
  border-radius:var(--r1);background:var(--ok);color:#fff;font-size:var(--letra-micro);font-weight:600;
  text-decoration:none}
.paleta .r .rtp-acoes-paleta a.leve{background:var(--painel);color:var(--tinta);border:1px solid var(--linha)}
.paleta .r .rtp-selo{font-size:var(--letra-micro)}

/* Fotos por tema dos ensaios (06/10/2026): até 15, várias de uma vez. */
.ft-area{border:1px dashed var(--linha);border-radius:var(--r2);padding:var(--e3);margin:var(--e3) 0;
  display:flex;flex-direction:column;gap:var(--e2)}
.ft-cab{display:flex;justify-content:space-between;align-items:baseline;gap:var(--e2)}
.ft-conta{font-family:var(--mono, monospace);font-size:13px;color:var(--tinta3, inherit)}
.ft-miniaturas{display:flex;flex-wrap:wrap;gap:var(--e2)}
.ft-mini img{width:72px;height:72px;object-fit:cover;border-radius:var(--r1);display:block}
.ft-botao{display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);
  min-height:var(--toque);padding:0 var(--e4);border-radius:var(--r2);
  border:1px solid var(--linha);background:var(--painel);font-weight:600;cursor:pointer;align-self:flex-start}
.ft-botao input{position:absolute;opacity:0;width:1px;height:1px}
.ft-botao:has(input:disabled){opacity:.5;cursor:not-allowed}
.ft-botoes{display:flex;flex-wrap:wrap;gap:var(--e2)}
.ft-aviso{margin:0;font-size:13px}
.ft-aviso-ok{color:var(--ok)}
.ft-aviso-atencao{color:var(--atencao)}


/* ==========================================================================
   CLEAN · FUNDAÇÃO (06/10/2026) — os componentes que a direção 7 trouxe e
   que nenhuma tela tinha. Contrato em
   docs/superpowers/specs/2026-10-06-redesign-clean-design.md §5. Toda classe
   daqui tem prefixo do componente: senoide-, spark-, vivo-, motor-. (O gêmeo
   3D saiu em 06/10/2026 — a ficha da OS mostra a máquina real, em fotos.)
   ========================================================================== */

/* ---- a senoide: fio de estágio (templates/_senoide.html, macro `fio`) ------
   Dez períodos do símbolo `#fio-senoide` (templates/_icones_oficina.html).
   O trilho é a senoide inteira em --linha; o progresso é a mesma senoide no
   azul de "em andamento", cortada por `stroke-dasharray` em `--prog` (0 a 1). A
   FORMA do fio diz o estado — cor nunca é o único sinal:
     andando   contínuo, --azul-acao (6,7:1 — o azul de "em andamento", 07/10)
     parado    pontilhado, tinta3
     bloqueado contínuo, âmbar (o card escreve "Bloqueado" em peso 600)
     alarme    contínuo, coral — só onde a tela não tem outro alarme */
.senoide-fio{display:block;width:100%;height:12px;overflow:visible;margin:0}
.senoide-fio use{fill:none;stroke-width:1.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.senoide-fio .senoide-trilho{stroke:var(--linha)}
.senoide-fio .senoide-prog{stroke:var(--azul-acao);stroke-dasharray:var(--prog,.25) 1;
  transition:stroke-dasharray var(--t3) var(--curva)}
.senoide-fio[data-estado="parado"] .senoide-prog{stroke:var(--tinta3);stroke-dasharray:.012 .012}
.senoide-fio[data-estado="bloqueado"] .senoide-prog{stroke:var(--atencao)}
.senoide-fio[data-estado="alarme"] .senoide-prog{stroke:var(--alarme)}

/* ---- a senoide: divisor de seção (macro `divisor`) -------------------------
   Quatro períodos no marrom da marca (salmão suave no escuro), no lugar da
   linha — "para não ficar tudo clean" (dono, 06/10/2026). Máscara sobre a cor
   da marca: segue o tema pelo token. Separa SEÇÕES (placa · ensaio · linha do
   tempo), nunca dado. */
.senoide-divisor{display:block;width:52px;height:12px;margin:var(--e5) 0 var(--e3);
  color:var(--marca-escura);background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 12'%3E%3Cpath d='M1 6Q7 0 13 6T26 6T39 6T51 6' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") left center/52px 12px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 12'%3E%3Cpath d='M1 6Q7 0 13 6T26 6T39 6T51 6' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") left center/52px 12px no-repeat}

/* ---- o marcador de título: traço de 24px na cor da marca -------------------
   Vai no `h2`/`h3` de seção (`<h2 class="os-secao-titulo senoide-titulo">`):
   um traço curto em salmão antes do texto, na linha do texto. Decorativo —
   o título continua tinta, 13px/600 — e por isso pode ser salmão puro. É
   item de flex: largura e altura explícitas para o gap não o esmagar. */
.senoide-titulo{display:flex;align-items:center;gap:var(--e2)}
.senoide-titulo::before{content:"";flex:none;width:24px;height:2px;border-radius:1px;
  background:var(--marca-fio-forte)}
/* No celular o traço cede 8 px, como o do h2 de bloco — aqui, e não no bloco de
   700 px lá em cima, porque a regra base acima vem depois dele na folha. */
@media (max-width:700px){.senoide-titulo::before{width:16px}}

/* ---- a senoide: carregamento (macro `carregando`) -------------------------
   Um quarto da senoide corre pelo fio. Com movimento reduzido fica parada,
   inteira: continua dizendo "carregando" sem se mexer. */
.senoide-carregando{display:block;width:129px;height:12px;overflow:visible;margin:0 auto}
.senoide-carregando use{fill:none;stroke:var(--tinta2);stroke-width:1.5;stroke-linecap:round;
  vector-effect:non-scaling-stroke;stroke-dasharray:.25 .75;animation:senoide-anda 1.6s linear infinite}
@keyframes senoide-anda{to{stroke-dashoffset:-1}}

/* ---- sparkline do indicador (templates/_sparkline.html) ------------------
   Linha fina, sem área, ponto no último valor, e a JANELA escrita ao lado —
   sem período, a curva é ornamento. Mora no canto do `.ind`, que já é
   position:relative. Alarme herda o coral do número. */
.spark-svg{position:absolute;right:0;bottom:var(--e5);width:80px;height:24px;overflow:visible;
  --spark:var(--azul-acao);pointer-events:none}
.ind.alarme .spark-svg{--spark:var(--alarme)}
.spark-linha{fill:none;stroke:var(--spark);stroke-width:1.25;stroke-linecap:round;
  stroke-linejoin:round;opacity:.6;vector-effect:non-scaling-stroke}
.spark-ponto{fill:var(--spark)}
.spark-janela{position:absolute;right:0;bottom:0;font:500 12px var(--fonte-mono);
  color:var(--tinta3);letter-spacing:.02em}
.spark-svg.spark-anda .spark-ponto{animation:spark-respira .9s var(--curva) 1}
@keyframes spark-respira{50%{opacity:.25}}
@media (max-width:480px){.spark-svg,.spark-janela{display:none}}

/* ---- relógio vivo (movimento.js, [data-vivo="relogio"]) -------------------
   Hora de Brasília em mono; o segundo anda, nada mais se mexe. */
.vivo-relogio{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1;
  color:var(--tinta3);font-size:var(--letra-micro)}
.vivo-relogio b{font:400 var(--letra-corpo) var(--fonte-mono);color:var(--tinta);
  letter-spacing:.02em;font-variant-numeric:tabular-nums}
/* Tablet (≤1024): só HH:MM — o segundo (`.vivo-seg`, que o movimento.js separa)
   e o "Brasília" cedem a largura à busca. Abaixo de 800 a hora some: a barra
   de 768 não tem 54 px sobrando. */
@media (max-width:1024px){.vivo-relogio small,.vivo-relogio .vivo-seg{display:none}}
@media (max-width:800px){.vivo-relogio{display:none}}

/* ---- miniatura isométrica do motor (símbolo #motor-iso) ------------------ */
.motor-mini{display:block;width:48px;height:48px;flex:none}
.motor-mini svg{width:100%;height:100%;overflow:visible}


/* ==========================================================================
   MOVIMENTO · entrada, aba, recado, enviando (dono, 07/10/2026: "animações
   simples e delicadas em toda a plataforma"). Decidido com ux-lead e
   design-system. A regra:
     · só transform e opacity; uma curva (--curva); 200 ms (--t2) — dentro dos
       150–250 ms pedidos; o que sai é mais rápido que o que entra (--t1);
     · a ENTRADA é da primeira pintura e só dela: o movimento.js põe
       `html.mov-pronto` meio segundo depois do `load`, e daí em diante nada
       mais entra animado — atualização automática (Centro de Produção, quadro,
       fila) e card que volta do arrasto não piscam;
     · nada nasce invisível sem a animação: sem script, a entrada roda uma vez e
       termina no estado normal; com movimento reduzido, nada se move;
     · nenhum laço — o único que gira é o "Enviando…", enquanto envia (a
       exceção do carregamento, como a senoide);
     · 22/10/2026 (revisão com a skill emil-design-eng): pressionar é escala
       .97, não deslocamento; modal e popover surgem de .97 (nada nasce de
       zero), o popover ancorado no gatilho; gaveta e trilho deslizam inteiros
       da borda na --curva-superficie; o véu acende em --t2; hover só onde há
       ponteiro; a paleta (⌘K) NÃO anima — ação de teclado, usada cem vezes
       por dia, abre no mesmo quadro;
     · no papel (impressão) nada anima.
   Prefixo `mov-`: keyframes e classes deste bloco. Cada tela herda; nenhuma
   folha de tela redeclara.
   ========================================================================== */

/* ---- entrada dos cards: fade + 6 px, escalonada em 30 ms, teto de 8 --------
   O papel (`.bloco`), o indicador (`.ind`) e o card (`.card`) da área de
   trabalho. Do 13º irmão em diante ninguém anima: lista longa não é coreografia.
   No toque (tablet da oficina) tudo entra junto — sem escalonar (ux-lead). */
@keyframes mov-entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media screen{
  :root:not(.mov-pronto) main :is(.bloco,.indicadores > .ind,.card):nth-child(-n+12){
    animation:mov-entra var(--t2) var(--curva) backwards;
    animation-delay:calc(var(--mov-i,0) * 30ms)}
  main :is(.bloco,.indicadores > .ind,.card):nth-child(2){--mov-i:1}
  main :is(.bloco,.indicadores > .ind,.card):nth-child(3){--mov-i:2}
  main :is(.bloco,.indicadores > .ind,.card):nth-child(4){--mov-i:3}
  main :is(.bloco,.indicadores > .ind,.card):nth-child(5){--mov-i:4}
  main :is(.bloco,.indicadores > .ind,.card):nth-child(6){--mov-i:5}
  main :is(.bloco,.indicadores > .ind,.card):nth-child(7){--mov-i:6}
  main :is(.bloco,.indicadores > .ind,.card):nth-child(n+8){--mov-i:7}
  :root[data-aparelho="toque"]:not(.mov-pronto) main :is(.bloco,.indicadores > .ind,.card){
    animation-delay:0ms}
  /* O card sendo arrastado não herda entrada nenhuma. */
  :root:not(.mov-pronto) main .card.arrastando{animation:none}
}

/* ---- o que mudou desde a última vez (dono, 26/10/2026) --------------------
   Na volta à mesma página (`html.mov-revisita`, posto no <head> do base.html),
   nada entra; o card cuja assinatura mudou acende uma vez, o contorno da marca
   que some em 3 × --t3 (movimento.js, `mudados`) — realce, como o
   `quadro-recebe`, não movimento: por isso fora do prefixo `mov-`. O número
   que mudou fica na cor da marca o mesmo tempo, enquanto anda do valor antigo
   ao novo. */
@keyframes realce-chegou{
  0%,35%{box-shadow:0 0 0 3px var(--indu-fraco),var(--sombra);border-color:var(--indu)}
  100%{box-shadow:var(--sombra)}}
.realce-chegou{animation:realce-chegou calc(var(--t3) * 3) var(--curva)}
/* Movimento reduzido: o realce é informação — o contorno fica parado o mesmo
   tempo, sem apagar devagar. */
@media (prefers-reduced-motion:reduce){
  .realce-chegou{animation:none !important;box-shadow:0 0 0 3px var(--indu-fraco),var(--sombra);
    border-color:var(--indu)}
}
[data-contar]{transition:color var(--t3) var(--curva)}
.mov-mudou{color:var(--indu)}

/* ---- de uma página para a outra: View Transitions entre documentos --------
   O navegador cruza a página que sai com a que entra em --t2; o trilho fica
   parado (é o mesmo nas duas). Da lista para a OS, o card clicado vira o
   cabeçalho da ficha (`os-alvo`, em --t3) e, no Voltar,
   o cabeçalho volta ao card. Navegador sem suporte troca a página como antes;
   quem pediu menos movimento não vê transição. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
/* No toque o trilho é uma folha fora da tela: não ganha nome. */
:root[data-aparelho="computador"] .trilho{view-transition-name:trilho}
.os-topo{view-transition-name:os-alvo}
::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){
  animation-duration:var(--t2);animation-timing-function:var(--curva)}
::view-transition-group(os-alvo){animation-duration:var(--t3)}

/* ---- hover e foco: o papel que abre alguma coisa sobe 1 px ----------------
   Só onde há ponteiro (`hover:hover`) e só em superfície que é link. Linha de
   tabela não sobe — ganha fundo, como já ganha. A sombra é a mesma do token. */
a.bloco{transition:transform var(--t1) var(--curva),box-shadow var(--t1) var(--curva)}
@media (hover:hover){
  a.bloco:hover{transform:translateY(-1px)}
}
a.bloco:focus-visible{transform:translateY(-1px);outline:2px solid var(--foco);outline-offset:2px}

/* ---- troca de aba: o painel novo surge (só opacidade, sem deslocar) --------
   As abas de leitura em página (`[role=tabpanel]`) acendem ao aparecer. As
   abas que são link (ficha da OS, Engenharia) apagam o painel que sai em --t1
   (`.mov-sai`, posto pelo movimento.js no clique), e a página nova entra pela
   entrada acima: a troca se lê como um cross-fade. */
@keyframes mov-aba{from{opacity:0}to{opacity:1}}

/* ---- superfícies (22/10/2026): véu, caixa que surge, folha que desliza -----
   `mov-veu`: o fundo escuro acende (modal, gaveta, menu do toque).
   `mov-surge`: popover e modal nascem de .97 e opacidade 0 — nada nasce de
   zero; o popover ancora no gatilho (`transform-origin` no canto do botão), o
   modal no centro. `mov-desliza-direita`: a gaveta vem inteira da borda, na
   curva de superfície. Tudo `backwards`: o estado final é o natural. */
@keyframes mov-veu{from{opacity:0}to{opacity:1}}
@keyframes mov-surge{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes mov-desliza-direita{from{transform:translateX(100%)}to{transform:none}}
/* Tudo que se toca cede sob o dedo: chip, filtro, botão de card, aba. */
.chip:active,.segmentos a:active,.segmentos button:active,summary.card-distribuir-botao:active,
.quadro-recortes a:active,.barra-toque a:active{transform:scale(.97);transition:transform var(--t1) var(--curva)}
/* Ação sem hover (tablet) ainda responde: o fundo escurece um degrau ao tocar. */
@media (hover:none){
  button:active,.botao:active{background:var(--acao-hover)}
  button.ok:active,.botao.ok:active{background:var(--acao-ok-hover)}
  .leve:active,.botao.leve:active{background:var(--painel3)}
}
[role="tabpanel"]:not([hidden]){animation:mov-aba var(--t2) var(--curva)}
.mov-sai{opacity:.35;transition:opacity var(--t1) var(--curva)}

/* ---- recado (toast): entra deslizando 8 px e, quando é só boa notícia, some -
   `.aviso` de topo de página e o `.movendo` do quadro. O recado de sucesso e o
   de demonstração saem sozinhos depois de seis segundos (`.mov-some`, posto
   pelo movimento.js); crítico, bloqueio e atenção ficam — são para ler. */
@keyframes mov-recado{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* `backwards`, não `both`: animação de transform que fica "ativa" depois de
   acabar cria contexto de empilhamento e prende popover do card atrás do
   vizinho. O estado final já é o natural. A barra `.movendo` é centrada por
   translateX(-50%): tem quadro próprio, senão o fim da animação a descentra. */
main > .aviso[role="status"]{animation:mov-recado var(--t2) var(--curva) backwards}
@keyframes mov-recado-centro{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translateX(-50%)}}
.movendo[open]{animation:mov-recado-centro var(--t2) var(--curva) backwards}
main > .aviso.mov-some{opacity:0;transform:translateY(-8px);
  transition:opacity var(--t1) var(--curva),transform var(--t1) var(--curva)}

/* ---- botão enviando ---------------------------------------------------------
   O movimento.js, no envio de um formulário POST: o formulário ganha
   `aria-busy="true"`, o botão `data-enviando`, o rótulo vira "Enviando…" com
   três pontos que se acendem em sequência, e a largura fica a mesma (o botão
   não pula). Segundo clique não envia de novo. Com movimento reduzido os
   pontos ficam parados — o texto já diz o que está acontecendo. */
form[aria-busy="true"] [data-enviando]{cursor:progress;opacity:.85}
form[aria-busy="true"] button,form[aria-busy="true"] .botao{pointer-events:none}
.mov-pontos{display:inline-flex;gap:3px;margin-left:var(--e2);vertical-align:middle}
.mov-pontos i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.3;
  animation:mov-ponto calc(3 * var(--t2)) var(--curva) infinite}
.mov-pontos i:nth-child(2){animation-delay:var(--t2)}
.mov-pontos i:nth-child(3){animation-delay:calc(2 * var(--t2))}
@keyframes mov-ponto{0%,100%{opacity:.3}33%{opacity:1}}

@media print{
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* Movimento reduzido: o que anda sozinho para. A regra global do topo já
   encurta transição e animação; estas param o que é laço infinito. */
@media (prefers-reduced-motion:reduce){
  .senoide-carregando use,.esqueleto,.spark-svg.spark-anda .spark-ponto{animation:none !important}
  .avisos-barra .largo .grupo,.avisos-barra .grupo.avisos-pulso .avisos-ponto{animation:none !important}
  .avisos-barra .gatilho:hover,.busca-global:hover{transform:none}
  .trilho-itens a::before{transition:none}
  /* movimento (07/10/2026): nada entra, nada sobe, nada pisca */
  main :is(.bloco,.indicadores > .ind,.card),[role="tabpanel"],main > .aviso,.movendo[open],
  .mov-pontos i{animation:none !important}
  a.bloco:hover,a.bloco:focus-visible,main > .aviso.mov-some{transform:none}
}

/* ---------- Engenharia em abas (06/10/2026) ----------
   Ensaio inicial, Ensaio final e Peritagens em andamento. As duas primeiras
   reaproveitam a linha do tablet do Controle de qualidade (oficina.css); aqui
   só o que é da Engenharia: o contador da aba e a OS na frente da máquina. */
.eng-abas{margin:var(--e4) 0}
.eng-aba-conta{display:inline-flex;align-items:center;justify-content:center;min-width:22px;
  height:20px;padding:0 var(--e1);margin-left:var(--e1);border-radius:999px;
  background:var(--painel2);color:var(--tinta3);font-size:12px;font-weight:650}
.eng-abas a.ativo .eng-aba-conta{background:var(--indu-fraco);color:var(--indu-forte)}
.eng-aba-conta.eng-aba-chama{background:var(--critico);color:var(--tinta-acao)}
.eng-explica{margin:0 0 var(--e3)}
/* Na Engenharia a lista ocupa a largura da tela; no tablet do CQ, a coluna estreita. */
.bancada.eng-cq{padding:0;max-width:none;margin:0}
.eng-os{font-weight:700;color:var(--indu-forte);text-decoration:none;white-space:nowrap}
.eng-maquina{display:block;font-weight:600}
.eng-cliente{display:block;color:var(--tinta3)}

/* ==========================================================================
   TELA BAIXA DO COMPUTADOR (dono, 07/10/2026: "no Chrome do Windows desktop a
   plataforma está com cards grandes, diferente do meu Mac; você tem que rolar")
   Medido com o Chrome no papel do Windows: nem a fonte, nem o reconhecimento
   de aparelho — o card tinha a mesma altura no Mac e no Windows. O que muda é
   a TELA: o Windows com escala de 125 % ou 150 % (o padrão de notebook e de
   monitor Full HD) entrega ao navegador 1280–1536 px de largura e só 630–730
   de altura útil; o Mac de 1440 entrega 790+. Tudo aqui é em px fixo, então
   a mesma cabeça (barra, título, régua de indicadores) comia meia tela.
   Em tela larga e BAIXA do computador, a casca aperta um degrau da escala:
   barra 52, título e indicador 28, respiro de 24 no lugar de 32. Alvos de
   44 px não mudam. O corte em 760 px de altura deixa o Mac de 1440 (789 úteis)
   e o Full HD a 100 % exatamente como estão. Tablet (toque) nunca entra: a regra exige
   `data-aparelho="computador"`, que só o aparelho com mouse ou touchpad
   recebe (base.html). As folhas de tela usam o mesmo corte com `hover:hover`.
   ========================================================================== */
/* Toque (tablet e celular): mais um degrau na base da escala (22/10/2026). */
html[data-aparelho="toque"]{--letra-nota:15px;--letra-corpo:17px}

@media (min-width:1101px) and (max-height:760px){
  html[data-aparelho="computador"]{--barra-alt:52px;--letra-numero:28px;--letra-placar:34px}
  html[data-aparelho="computador"] main{padding:var(--e5) var(--e6)}
  html[data-aparelho="computador"] .cabecalho{margin-bottom:var(--e4)}
  html[data-aparelho="computador"] .indicadores{gap:var(--e3) var(--e6);margin-bottom:var(--e4);
    padding:var(--e1) 0 var(--e4)}
  html[data-aparelho="computador"] .ind .nota{margin-top:var(--e1)}
}

/* ==========================================================================
   Registro de atividades — "Quem fez o quê" (22/10/2026)
   Mora dentro de cada setor. Hora à esquerda, quem em negrito, o gesto em
   frase, o setor numa pílula à direita. Prefixo reg- (ver DESIGN.md, "Nomes de
   classe genéricos são armadilha de cascata").
   ========================================================================== */
.reg-explica{margin:0 0 var(--e3);font-size:var(--letra-nota);color:var(--tinta3)}
.reg-carregando,.reg-vazio{margin:0;font-size:var(--letra-nota);color:var(--tinta3)}
.reg-dia-grupo + .reg-dia-grupo{margin-top:var(--e4)}
.reg-dia{margin:0 0 var(--e2);font-size:var(--letra-micro);font-weight:700;
  color:var(--tinta2);letter-spacing:.02em}
.reg-dia span{font-weight:400;color:var(--tinta4)}
.reg-lista{list-style:none;margin:0;padding:0}
.reg-linha{display:grid;grid-template-columns:52px 1fr auto;gap:var(--e3);
  align-items:baseline;padding:var(--e2) 0 var(--e2) var(--e2);
  border-bottom:1px solid var(--linha-fraca);border-left:2px solid transparent}
.reg-linha:last-child{border-bottom:0}
.reg-linha.reg-ok{border-left-color:var(--ok)}
.reg-linha.reg-critico{border-left-color:var(--critico)}
.reg-hora{font-family:"IBM Plex Mono",monospace;font-size:var(--letra-nota);
  color:var(--tinta3)}
.reg-frase{margin:0;font-size:var(--letra-corpo);color:var(--tinta);line-height:1.45}
.reg-frase b{font-weight:600}
.reg-frase .reg-sistema{font-weight:500;color:var(--tinta3);font-style:italic}
.reg-frase a{color:inherit;text-decoration:underline;text-decoration-color:var(--linha);
  text-underline-offset:3px}
.reg-frase a:hover{text-decoration-color:currentColor}
.reg-vezes{font-size:var(--letra-nota);color:var(--tinta3)}
.reg-detalhe{margin:2px 0 0;font-size:var(--letra-nota);color:var(--tinta3)}
.reg-citacao{margin:var(--e1) 0 0;padding:var(--e1) var(--e3);border-left:2px solid var(--linha);
  font-size:var(--letra-nota);color:var(--tinta2);white-space:pre-line}
.reg-setor{font-size:var(--letra-micro);color:var(--tinta3);background:var(--painel2);
  border-radius:99px;padding:2px var(--e2);white-space:nowrap}
.reg-mais{margin-top:var(--e3)}
.reg-filtros .corpo{display:flex;flex-direction:column;gap:var(--e3)}
.reg-filtro-linha{display:flex;gap:var(--e3);flex-wrap:wrap;align-items:end}
.reg-filtro-linha label{display:flex;flex-direction:column;gap:var(--e1);
  font-size:var(--letra-nota);color:var(--tinta3)}
@media (max-width:700px){
  .reg-linha{grid-template-columns:44px 1fr}
  .reg-setor{grid-column:2;justify-self:start}
}
/* O carimbo da decisão no cabeçalho da proposta: quem, dia e hora. */
.reg-carimbo{margin:var(--e1) 0 var(--e2);font-size:var(--letra-nota);color:var(--tinta3)}
.reg-carimbo b{color:var(--tinta);font-weight:600}
.reg-quem{display:block;margin-top:2px;font-size:var(--letra-micro);color:var(--tinta3);
  white-space:nowrap}

/* "Atípico apontado pelo mecânico" (_atipicos_peritagem.html, 22/10/2026):
   ficha de orçar, janela de serviços da OS, peritagem lida e montagem. */
.atip-destaque-lista{list-style:none;margin:var(--e2) 0 0;padding:0}
.atip-destaque-item{padding:var(--e2) 0;border-top:1px solid var(--linha)}
.atip-destaque-item:first-child{border-top:0}
.atip-destaque-quem,.atip-destaque-decisao{display:block;margin-top:var(--e1);
  font-size:var(--letra-nota);color:var(--tinta2)}
.atip-destaque-acoes{display:flex;flex-wrap:wrap;gap:var(--e2);margin-top:var(--e2)}
.atip-destaque-acoes form{display:flex;flex-wrap:wrap;gap:var(--e2);align-items:center}
.atip-destaque-acoes button{min-height:var(--toque)}
.atip-destaque-servico select{min-width:220px}
.dna-maquina-partic{margin:var(--e2) 0 0;font-size:var(--letra-nota);color:var(--atencao)}
.eqp-partic{margin:0;padding-left:var(--e4)}
.eqp-partic li{padding:var(--e1) 0}
.eqp-partic .rodape{display:block;margin:0}

/* ==========================================================================
   A PARTIDA — a marca se escreve ao entrar (dono, 02/11/2026)
   Uma vez por sessão do navegador (templates/_partida.html): o INDU
   Intelligence no marinho do trilho e a senoide de dez períodos atravessando a
   tela, o gesto da abertura dos vídeos de treinamento. Sai subindo, em
   --curva-superficie. Prefixo `partida-`.
   ========================================================================== */
.partida-tela{position:fixed;inset:0;z-index:200;background:var(--trilho);display:grid;place-items:center;
  clip-path:inset(0 0 0 0);transition:clip-path 700ms var(--curva)}
.partida-tela.sai{clip-path:inset(0 0 100% 0)}
.partida-centro{display:flex;flex-direction:column;align-items:flex-start;gap:var(--e3)}
.partida-marca .logo-indu{width:min(420px,70vw);max-width:none}
.partida-marca .logo-tinta{fill:var(--trilho-marca)}
.partida-marca .logo-apoio{display:none}
.partida-marca .logo-ranhura{opacity:.64}
.partida-marca .logo-ranhura rect{transform-box:fill-box;transform-origin:50% 100%;animation:partida-barra 520ms var(--curva) backwards}
.partida-marca .logo-ranhura rect:nth-child(2){animation-delay:95ms}.partida-marca .logo-ranhura rect:nth-child(3){animation-delay:190ms}
.partida-marca .logo-ranhura rect:nth-child(4){animation-delay:285ms}.partida-marca .logo-ranhura rect:nth-child(5){animation-delay:380ms}
.partida-marca .logo-ranhura rect:nth-child(6){animation-delay:475ms}.partida-marca .logo-ranhura rect:nth-child(7){animation-delay:570ms}
.partida-marca .logo-ranhura rect:nth-child(8){animation-delay:665ms}.partida-marca .logo-ranhura rect:nth-child(9){animation-delay:760ms}
.partida-marca .logo-senoide{stroke:var(--marca);stroke-dasharray:1 2;stroke-dashoffset:1;animation:partida-traco 1300ms var(--curva) 200ms forwards}
.partida-apoio{font-size:var(--letra-nota);letter-spacing:.42em;text-transform:uppercase;color:var(--trilho-tinta2);
  animation:partida-surge 700ms var(--curva) 1000ms backwards}
.partida-fio{position:absolute;left:0;bottom:22vh;width:100%;height:60px;overflow:visible}
.partida-fio path{fill:none;stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.partida-trilho{stroke:var(--trilho-linha)}
.partida-onda{stroke:var(--marca);stroke-dasharray:1 1;stroke-dashoffset:1;animation:partida-traco 1900ms var(--curva) 150ms forwards}
@keyframes partida-traco{to{stroke-dashoffset:0}}
@keyframes partida-barra{from{opacity:0;transform:scaleY(.25)}}
@keyframes partida-surge{from{opacity:0;transform:translateY(4px)}}
@media print{.partida-tela{display:none}}

/* ==========================================================================
   O CELULAR NA PLACA & PRANCHA (dono, 03/11/2026, do iPhone: "os cards estão
   grandes; tem que ativar para mobile também")
   O toque herdava a régua do tablet de luva (corpo 17, nota 15, Mandar de 56):
   no iPhone isso é letra de cartaz e meia tela por card. O celular é lido na
   mão, a 30 cm, sem luva: a escala desce um degrau inteiro e os alvos ficam
   em 44 (nunca menos). O campo continua em 16 px (o Safari dá zoom abaixo
   disso) — está na regra de `pointer:coarse` dos campos, que vem antes.
   A moldura marinha do trilho, que no toque vira gaveta, passa para a barra
   do topo e a de baixo: a mesma marca INDU Intelligence do computador.
   ========================================================================== */
html[data-aparelho="toque"] header.barra{background:var(--trilho);border-bottom:1px solid var(--trilho-linha);
  color:var(--trilho-tinta)}
html[data-aparelho="toque"] header.barra .botao-menu,
html[data-aparelho="toque"] header.barra .botao-barra,
html[data-aparelho="toque"] header.barra .botao-tema,
html[data-aparelho="toque"] header.barra .agt-gatilho,
html[data-aparelho="toque"] header.barra .busca-global,
html[data-aparelho="toque"] header.barra .novo-menu > summary.novo-botao,
html[data-aparelho="toque"] header.barra .avisos-barra .gatilho{background:transparent;border-color:transparent;
  color:var(--trilho-tinta);box-shadow:none}
html[data-aparelho="toque"] header.barra .busca-global svg.ic{color:var(--trilho-tinta)}
html[data-aparelho="toque"] header.barra .botao-menu:hover,
html[data-aparelho="toque"] header.barra .botao-barra:hover,
html[data-aparelho="toque"] header.barra .botao-barra.ativo,
html[data-aparelho="toque"] header.barra .botao-tema:hover,
html[data-aparelho="toque"] header.barra .agt-gatilho:hover,
html[data-aparelho="toque"] header.barra .busca-global:hover,
html[data-aparelho="toque"] header.barra .novo-menu > summary.novo-botao:hover,
html[data-aparelho="toque"] header.barra .novo-menu[open] > summary.novo-botao,
html[data-aparelho="toque"] header.barra .avisos-barra .gatilho:hover{background:var(--trilho2);
  color:var(--trilho-aceso);transform:none;box-shadow:none}
html[data-aparelho="toque"] header.barra .avisos-barra .gatilho .conta{background:var(--trilho2);color:var(--trilho-aceso)}
html[data-aparelho="toque"] header.barra .avisos-barra .gatilho.critico .conta,
html[data-aparelho="toque"] header.barra .avisos-barra .gatilho.atencao .conta{background:var(--marca);color:var(--trilho)}
html[data-aparelho="toque"] header.barra .vivo-relogio,html[data-aparelho="toque"] header.barra .vivo-relogio b{color:var(--trilho-tinta)}
html[data-aparelho="toque"] header.barra .busca-global kbd{display:none}
html[data-aparelho="toque"] header.barra .quem-sigla{background:var(--trilho2);color:var(--trilho-aceso);
  box-shadow:inset 0 0 0 1px var(--trilho-linha);font-weight:500}
/* A marca da barra: o INDU recortado e o "Intelligence" espaçado embaixo, como
   no trilho. É assinatura, não texto de leitura (o nome inteiro está no
   aria-label do link). */
html[data-aparelho="toque"] .barra-marca{display:flex;flex-direction:column;justify-content:center;gap:2px;
  width:auto;height:auto;overflow:visible;text-decoration:none}
html[data-aparelho="toque"] .barra-marca-logo{display:block;width:96px;height:16px;overflow:hidden}
html[data-aparelho="toque"] .barra-marca .logo-indu{width:96px;margin-top:-4px}
html[data-aparelho="toque"] .barra-marca .logo-tinta{fill:var(--trilho-marca)}
html[data-aparelho="toque"] .barra-marca .logo-ranhura{opacity:.64}
html[data-aparelho="toque"] .barra-marca .marca-apoio{font-size:10px;letter-spacing:.3em;line-height:1;
  color:var(--trilho-tinta2);padding-left:1px;white-space:nowrap}
/* A barra de baixo fecha a moldura: marinho, o destino aceso em branco com o
   traço da marca em cima (a mesma régua do trilho). */
html[data-aparelho="toque"] .barra-toque{background:var(--trilho);box-shadow:none;
  border-top:1px solid var(--trilho-linha)}
html[data-aparelho="toque"] .barra-toque a,html[data-aparelho="toque"] .barra-toque button{color:var(--trilho-tinta2);
  font-weight:400}
html[data-aparelho="toque"] .barra-toque a:hover,html[data-aparelho="toque"] .barra-toque button:hover{background:var(--trilho2);
  color:var(--trilho-aceso)}
html[data-aparelho="toque"] .barra-toque a.ativo{color:var(--trilho-aceso);font-weight:500}
html[data-aparelho="toque"] .barra-toque a.ativo::before{left:calc(50% - var(--e3));right:auto;width:var(--e5);
  background:var(--marca);border-radius:0 0 2px 2px}
html[data-aparelho="toque"] .barra-toque .bolha{background:var(--marca);color:var(--trilho)}
/* A faixa do destino: texto, não pílula. O aceso ganha tinta e o fio de 2 px
   embaixo — a mesma gramática da aba. */
html[data-aparelho="toque"] .faixa-destino{border-bottom:1px solid var(--linha);gap:0;padding:0 var(--e2)}
html[data-aparelho="toque"] .faixa-destino a{border-radius:0;padding:0 var(--e3);position:relative}
html[data-aparelho="toque"] .faixa-destino a.ativo{background:transparent;font-weight:500}
html[data-aparelho="toque"] .faixa-destino a.ativo::after{content:"";position:absolute;left:var(--e3);right:var(--e3);
  bottom:0;height:2px;background:var(--azul)}

@media (max-width:600px){
  html[data-aparelho="toque"]{--letra-nota:13px;--letra-corpo:15px;--letra-forte:17px;--letra-secao:22px;
    --letra-tela:24px;--letra-numero:28px;--letra-placar:34px;--toque-luva:48px;--barra-alt:56px}
  html[data-aparelho="toque"] body{line-height:1.5}
  html[data-aparelho="toque"] .barra{gap:var(--e1);padding:var(--topo-seguro) var(--e2) 0}
  html[data-aparelho="toque"] .barra-marca{margin-right:auto}
  html[data-aparelho="toque"] main{padding:var(--e4) var(--e4) calc(56px + var(--e6) + env(safe-area-inset-bottom))}
  html[data-aparelho="toque"] .faixa-destino a{min-height:var(--toque);font-size:var(--letra-nota)}
  html[data-aparelho="toque"] .barra-toque a,html[data-aparelho="toque"] .barra-toque button{min-height:56px;
    padding:var(--e1)}
  html[data-aparelho="toque"] .barra-toque svg.ic{width:22px;height:22px}
  /* A cabeça da tela: título, uma linha de apoio e a ação — sem parágrafo de
     três linhas empurrando o trabalho para baixo da dobra. */
  html[data-aparelho="toque"] .cabecalho{gap:var(--e3);margin-bottom:var(--e4)}
  html[data-aparelho="toque"] .sub{font-size:var(--letra-nota);line-height:1.45}
  html[data-aparelho="toque"] h2{font-size:var(--letra-forte)}
  /* Botão do celular: 44 de alvo, letra do corpo, folga lateral de 16. */
  html[data-aparelho="toque"] main button,html[data-aparelho="toque"] main .botao{padding:var(--e2) var(--e4)}
  /* Indicadores: dois por linha, número de 24, régua mais curta. */
  html[data-aparelho="toque"] .indicadores{gap:var(--e4) var(--e4);margin-bottom:var(--e4);padding:0 0 var(--e4)}
  html[data-aparelho="toque"] .ind .valor{font-size:var(--letra-tela)}
  html[data-aparelho="toque"] .ind .nota{margin-top:0}
  /* Bloco: papel com 16 de respiro, cabeçalho colado no corpo. */
  html[data-aparelho="toque"] .bloco > header{padding:var(--e3) var(--e4)}
  html[data-aparelho="toque"] .bloco .corpo{padding:var(--e3) var(--e4) var(--e4)}
  html[data-aparelho="toque"] .bloco + .bloco{margin-top:var(--e3)}
  /* Segmentos e abas correm de lado dentro de si; a página nunca. */
  html[data-aparelho="toque"] .segmentos{max-width:100%;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
  html[data-aparelho="toque"] .segmentos::-webkit-scrollbar{display:none}
  html[data-aparelho="toque"] .segmentos a{flex:none;white-space:nowrap;padding:0 var(--e3)}
}
/* O Assistente entrou na barra: no tablet em pé o relógio cede o lugar (a hora segue na
   barra de baixo e nas telas), senão a conta saía da tela e a página ganhava rolagem. */
@media (max-width:900px){
  html[data-aparelho="toque"] header.barra .vivo-relogio{display:none}
}
@media (max-width:430px){
  html[data-aparelho="toque"] .barra-marca .marca-apoio{display:none}
  html[data-aparelho="toque"] .barra-marca-logo,
  html[data-aparelho="toque"] .barra-marca .logo-indu{width:84px}
}
/* A contagem dos avisos encosta no ícone, dentro do alvo (o botão agora não
   tem caixa: a bolha pendurada fora dele parecia solta na barra). */
@media (max-width:680px){
  html[data-aparelho="toque"] header.barra .avisos-barra .estreito .gatilho .conta{top:var(--e1);right:var(--e1);
    min-width:18px;height:18px;font-size:var(--letra-micro)}
}

/* Escolha do visual Vidro × Clean (teste do dono, 05/11/2026; só aparece com VISUAL=vidro). */
.botao-visual{min-height:36px;padding:0 var(--e3);border-radius:999px;background:var(--painel2);color:var(--tinta2);
  font-size:var(--letra-nota);font-weight:500;gap:var(--e2);white-space:nowrap}
.botao-visual:hover{background:var(--painel3);color:var(--tinta)}
/* No toque e em tela estreita a barra não tem lugar: a escolha fica no menu da conta. */
html[data-aparelho="toque"] .barra > .botao-visual{display:none}
@media (max-width:1100px){.barra > .botao-visual{display:none}}
/* Telefone pequeno (iPhone SE, 375 px): seis alvos de 44 px e a marca não cabiam,
   e a conta encolhia até sumir. A folga cai para 4 px e a marca para 80 px. */
@media (max-width:400px){
  html[data-aparelho="toque"] header.barra{gap:var(--e1);padding-left:var(--e2);padding-right:var(--e2)}
  html[data-aparelho="toque"] .barra-marca-logo{width:80px}
  html[data-aparelho="toque"] .barra-marca .logo-indu{width:80px}
  html[data-aparelho="toque"] .barra-marca .marca-apoio{font-size:9px;letter-spacing:.28em}
}
/* Telefone de 320 px: a marca sai da barra (fica no menu), a conta não some. */
@media (max-width:340px){
  html[data-aparelho="toque"] header.barra .barra-marca{display:none}
}
/* Telefone: um <select> mede a opção mais longa ("todos os CNPJs · INDU
   RECUPERAÇÃO…") e alargava a página. Nunca passa da largura de quem o contém. */
@media (max-width:600px){
  select,input{max-width:100%;min-width:0}
  select{text-overflow:ellipsis}
}

/* Bobinagem — tela única e levantamento no formato do caderno (astec, 05/11/2026) */
.lv-mais-dados{margin:var(--e3) 0;border:1px solid var(--linha);border-radius:var(--r2);padding:var(--e2) var(--e3)}
.lv-mais-dados>summary{cursor:pointer;min-height:var(--toque);display:flex;align-items:center;font-weight:600}
.lv-momento{display:grid;gap:var(--e2);padding:var(--e3) 0;border-bottom:1px solid var(--linha)}
.lv-momento:last-child{border-bottom:0}
.lv-momento-texto{display:flex;flex-wrap:wrap;gap:var(--e2);align-items:center}
.lv-momento .lv-camera{justify-self:start}
.bob-abas{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:var(--e3);
  margin:var(--e4) 0 var(--e3)}
.bob-aba-bloco{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--e2);
  min-height:96px;padding:var(--e3);border-radius:var(--r2);background:var(--painel);
  box-shadow:var(--sombra);color:var(--tinta2);text-align:center;font-weight:500;text-decoration:none}
.bob-aba-bloco .ic{width:32px;height:32px}
.bob-aba-bloco:hover{color:var(--tinta);background:var(--painel2)}
.bob-aba-bloco.ativo{color:var(--azul);font-weight:600;box-shadow:inset 0 0 0 2px var(--azul)}
.bob-busca{display:flex;flex-wrap:wrap;gap:var(--e2);align-items:flex-end;margin-bottom:var(--e3)}
.bob-busca label{display:grid;gap:4px;flex:1 1 240px}
.bob-lista{list-style:none;margin:0;padding:0;display:grid;gap:var(--e3)}
.bob-item{border:1px solid var(--linha);border-radius:var(--r2);padding:var(--e3);display:grid;gap:var(--e2)}
.bob-item-cabeca{display:flex;flex-wrap:wrap;gap:var(--e2);align-items:center;justify-content:space-between}
.bob-item-acoes{display:flex;flex-wrap:wrap;gap:var(--e2);align-items:center}
.bob-fotos-mini{display:flex;gap:var(--e2);overflow-x:auto}
.bob-fotos-mini img{width:72px;height:72px;object-fit:cover;border-radius:var(--r2)}