/* ==========================================================================
   PORTAL DO CLIENTE — folha própria · direção 7 "Clean" (dono, 06/10/2026)

   Quem entra aqui é o cliente, no celular, no corredor da fábrica, querendo
   saber uma coisa só: onde está o motor dele e quando fica pronto. Densidade de
   oficina atrapalharia — a folha de dentro empacota quarenta cards numa coluna
   porque quem responde pelo prazo precisa ver a oficina inteira; aqui ninguém
   precisa ver quarenta de nada.

   A mesma linguagem Clean da plataforma, mais simples e acolhedora (ux-lead,
   06/10/2026): a folha `#FAFBFC`, papel branco com UMA sombra e canto de 14 px,
   nenhuma borda decorativa; linha de 1 px só entre dados; título em Albert
   Sans; dado (OS, série, medição, valor) em Plex Mono tabular; estado é ponto
   de 6 px + palavra, nunca pílula colorida; a senoide do logotipo é a linha do
   tempo da máquina (contínua até onde andou, pontilhada adiante, um ponto por
   estágio); o motor em miniatura (`#motor-iso`, do sprite da oficina) acompanha
   a máquina. O topo é folha clara com o logotipo em tinta — a barra escura saiu.

   Coral em UM lugar por tela: o que depende do cliente — "N propostas estão
   esperando sua decisão" (`.por-chamada-atencao`) e, na OS, o botão da proposta
   parada com ele. Mais nada é coral: nem logotipo (só na porta de entrada, onde
   a senoide é a marca impressa), nem botão, nem link.

   O que esta folha **não** faz diferente de `estilo.css`, e é de propósito:
     · a mesma escala de texto — 12 · 13 · 15 · 18 · 22 · 28 · 34 · 44;
     · a mesma escala de espaço — 4 · 8 · 12 · 16 · 24 · 32 · 48;
     · o mesmo alvo de 44px, a mesma semântica de cor da Constituição §3,
       a mesma curva e os mesmos três tempos de movimento.

   Duas disciplinas próprias, as mesmas da folha da TV:
     · todo nome de classe começa com `por-`;
     · nenhuma classe definida duas vezes.
   `tests/test_portal_cliente.py` guarda as duas, e a escala.
   ========================================================================== */

:root{
  color-scheme:light;

  /* --- superfícies e tinta (os valores dos tokens Clean, copiados) -------- */
  --por-fundo:#FAFBFC; --por-painel:#FFFFFF; --por-painel2:#F3F5F7; --por-painel3:#ECEFF2;
  --por-linha:#E6EAEE; --por-linha-fraca:#EEF1F4;
  --por-borda-viva:rgba(14,22,32,.22);
  --por-sombra:0 1px 3px rgba(14,22,32,.09);
  --por-sombra-alta:0 1px 3px rgba(14,22,32,.09),0 0 0 1px rgba(14,22,32,.06);
  --por-tinta:#0E1620; --por-tinta2:#34465A; --por-tinta3:#52647A; --por-tinta4:#5A6B7F;
  --por-tinta-acao:#FFFFFF;
  --por-foco:var(--por-tinta);

  /* --- marca e alarme -------------------------------------------------------
     O coral tem dois ofícios que pedem coisas opostas: como preenchimento com
     branco em cima precisa ser claro o bastante para o branco passar; como
     texto sobre superfície clara precisa ser escuro o bastante para ele mesmo
     passar. Por isso são dois tokens. No portal o coral é o ALARME: o que
     depende do cliente. */
  --por-marca:#D2431F; --por-marca-forte:#B8371A; --por-marca-fraca:#FBEDE8;
  --por-alarme:var(--por-marca); --por-alarme-texto:var(--por-marca-forte);
  /* O fio salmão (dono, 07/10/2026), mais discreto que na oficina: o salmão da
     senoide a 55 % sobre o papel para o fio de repouso (topo, cabeçalho de
     tabela) e pleno onde carrega informação (traço do subtítulo, campo em
     foco). É marca, não alarme: nunca pinta número, texto ou botão. */
  --por-marca-fio:#F3ACA6; --por-marca-fio-forte:#E8685D;
  /* O azul de apoio (dono, 07/10/2026), os valores de `estilo.css` copiados:
     --por-azul o marinho da marca (15,6:1) — subtítulo de seção e número que
     não é alarme; --por-azul-acao o azul do dado e do "em andamento" (6,7:1);
     --por-azul-fundo a tinta suave de chip. O aço do dado medido virou o
     próprio azul-ação: um azul só para dado, não dois concorrendo. */
  --por-azul:#0E2440; --por-azul-acao:#255E96; --por-azul-fundo:#EAF1F8;
  --por-aco:var(--por-azul-acao); --por-aco-texto:var(--por-azul-acao);

  /* --- semântica (docs/CONSTITUICAO.md §3) --------------------------------
     "Processo" (em andamento) é o azul-ação desde 07/10/2026 — ponto e
     palavra, como na plataforma. */
  --por-ok:#0F6350;       --por-ok-fraco:#E2F1EC;
  --por-atencao:#7E5606;  --por-atencao-fraco:#FBF2DE;
  --por-falha:#B62E1B;    --por-falha-fraco:#FCEBE7;
  --por-processo:var(--por-azul-acao); --por-processo-fraco:var(--por-azul-fundo);
  --por-neutro:#52647A;   --por-neutro-fraco:#F3F5F7;

  /* --- tipo ---------------------------------------------------------------- */
  /* Placa & Prancha (dono, 02/11/2026): a mesma letra da plataforma. */
  --por-fonte-titulo:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --por-fonte-ui:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --por-fonte-mono:"Martian Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* --- escala de texto: oito degraus, piso em 12px ------------------------
     `--por-letra-micro` é o único com uso restrito: só caixa alta com
     entreletra, onde a forma da palavra já se perdeu e o tamanho é o que
     resta. Texto em caixa normal nunca desce abaixo de 13px — e aqui isso pesa
     ainda mais do que no galpão, porque do outro lado pode estar um gerente de
     manutenção de sessenta anos lendo no celular dentro de uma planta. */
  --por-letra-micro:12px;
  --por-letra-nota:13px;
  --por-letra-corpo:15px;
  --por-letra-forte:18px;
  --por-letra-secao:22px;
  --por-letra-tela:28px;
  --por-letra-numero:34px;

  /* Não é degrau da escala, e não é para ler: 16px é o limiar em que o Safari
     do iPhone para de dar zoom no campo ao receber foco. Campo menor que isso
     faz a página inteira saltar a cada toque, no meio de um cadastro. */
  --por-campo-toque:16px;

  /* --- escala de espaço: 4 · 8 · 12 · 16 · 24 · 32 · 48 ------------------- */
  --por-e1:4px; --por-e2:8px; --por-e3:12px; --por-e4:16px;
  --por-e5:24px; --por-e6:32px; --por-e7:48px;

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

  /* --- movimento: uma curva, três tempos ------------------------------------ */
  --por-curva:cubic-bezier(.2,.7,.2,1);
  --por-t1:120ms; --por-t2:200ms; --por-t3:320ms;

  /* Alvo de toque. Não é recomendação de plataforma copiada: é a largura do
     polegar. Vale no computador também — alvo que muda de tamanho por aparelho
     é mão que reaprende. */
  --por-toque:44px;
}

/*
  Não há `@media (prefers-color-scheme:dark)` nesta folha, e a ausência é
  deliberada — a mesma decisão de `estilo.css`. O claro é o padrão do produto
  inteiro: a proposta, o laudo e o termo que este mesmo cliente recebe são
  documentos claros, e o portal é a versão em tela deles. Enquanto não houver
  aqui um botão de tema com a escolha gravada, quem decidiria a aparência seria
  a configuração do aparelho de quem abre — que é justamente quem não sabe como
  o documento do outro lado foi desenhado.
*/

/* Quem pediu para não ver movimento não vê nenhum. Regra global, no topo, e não
   um `@media` por componente — o esquecimento de um componente é o que faz a
   promessa valer só em metade da tela. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}

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

.por-corpo{
  margin:0;background:var(--por-fundo);color:var(--por-tinta);
  font:400 var(--por-letra-corpo)/1.55 var(--por-fonte-ui);
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;
  /* Espaço para a barra inferior, mais a faixa do iPhone. */
  padding-bottom:calc(72px + env(safe-area-inset-bottom));
}

/* Dado técnico em mono, com algarismo de largura fixa: medição, número de OS e
   valor alinham em coluna, que é o que uma ficha de motor precisa. */
.por-mono{font-family:var(--por-fonte-mono);font-variant-numeric:tabular-nums;
  font-feature-settings:"zero" 1;letter-spacing:-.01em}

/* As superfícies que o navegador desenha e que nenhum projeto lembra de vestir:
   sem isto a seleção sai no azul de sistema, que não é desta paleta. */
::selection{background:var(--por-painel3);color:var(--por-tinta)}

/* Foco visível em tudo que recebe foco, sobre qualquer superfície: anel de tinta.
   Dá para atravessar o portal inteiro no teclado — e quem usa leitor de tela
   costuma estar exatamente aqui, do lado de fora, sem ninguém por perto. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--por-foco);outline-offset:2px;border-radius:var(--por-r1);
}
a{color:var(--por-tinta);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--por-linha);transition:text-decoration-color var(--por-t1) var(--por-curva)}
a:hover{text-decoration-color:currentColor}

/* ---- topo: folha clara, logotipo em tinta ---------------------------------
   Topo não é objeto: nenhuma sombra, só o filete de 1 px que separa do papel.
   À esquerda a INDU, à direita a empresa do cliente — o nome fica no topo de
   toda tela porque responde "estou vendo a carteira de quem?" sem perguntar. */
.por-topo{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;
  justify-content:space-between;gap:var(--por-e3);
  padding:calc(var(--por-e2) + env(safe-area-inset-top)) var(--por-e4) var(--por-e2);
  background:var(--por-painel);color:var(--por-tinta);border-bottom:1px solid var(--por-marca-fio);
}
.por-topo-marca{display:flex;align-items:center;gap:var(--por-e3);min-width:0}
.por-topo-logo{display:block;flex:0 0 auto;line-height:0;border-radius:var(--por-r1)}
.por-topo-logo .logo-indu{display:block;height:40px;width:auto}
.por-topo .logo-tinta{fill:var(--por-tinta)}
.por-topo .logo-apoio{fill:var(--por-tinta3)}
.por-topo .logo-ranhura{opacity:.35}
.por-topo .logo-senoide{stroke:var(--por-tinta)}
.por-topo-quem{display:flex;flex-direction:column;min-width:0;
  padding-left:var(--por-e3);border-left:1px solid var(--por-linha)}
.por-topo-selo{
  font-family:var(--por-fonte-mono);font-size:var(--por-letra-micro);
  font-weight:500;letter-spacing:.12em;color:var(--por-tinta3);text-transform:uppercase;
}
/* Duas linhas, e não reticências: "MONDELEZ NORTE N…" não diz de qual
   Mondelez é a carteira (teste no celular de 390 px, 23/09/2026). Passando de
   duas linhas, aí sim corta — nome de razão social inteiro não cabe no topo. */
.por-topo-empresa{
  font-size:var(--por-letra-corpo);font-weight:600;line-height:1.2;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;overflow-wrap:anywhere;max-width:52vw;
}
.por-topo-conta{
  min-height:44px;width:44px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:var(--por-painel3);color:var(--por-tinta);
  text-decoration:none;flex:0 0 auto;transition:background var(--por-t1) var(--por-curva);
}
.por-topo-conta:hover{background:var(--por-linha)}
.por-topo-inicial{font-family:var(--por-fonte-titulo);font-weight:500;font-size:var(--por-letra-forte)}

/* ---- tela -------------------------------------------------------------- */
.por-tela{max-width:640px;margin:0 auto;padding:var(--por-e4)}
.por-tela-larga{max-width:960px}

.por-titulo{margin:var(--por-e2) 0 var(--por-e3);font-family:var(--por-fonte-titulo);
  font-size:var(--por-letra-secao);line-height:1.15;font-weight:400;letter-spacing:-.02em;text-wrap:balance}
/* O subtítulo de seção em caixa normal, Albert 600: "Já entregues", "Ensaios". */
.por-subtitulo{
  margin:var(--por-e6) 0 var(--por-e3);font-family:var(--por-fonte-titulo);
  font-size:var(--por-letra-forte);font-weight:600;letter-spacing:-.01em;color:var(--por-azul);
}
/* O traço do subtítulo: 16 × 2 px em salmão antes do texto — o mesmo gesto do
   h2 de bloco da oficina, um degrau mais curto. */
.por-subtitulo::before{content:"";display:inline-block;vertical-align:middle;width:16px;height:2px;
  border-radius:1px;margin:-2px var(--por-e2) 0 0;background:var(--por-marca-fio-forte)}
/* O degrau abaixo do subtítulo: separa "como chegou" de "condição de entrega"
   dentro do mesmo bloco de ensaios. */
.por-rotulo-bloco{margin:var(--por-e5) 0 var(--por-e2);font-size:var(--por-letra-nota);
  font-weight:600;color:var(--por-tinta2)}
.por-chamada{margin:0 0 var(--por-e5);font-size:var(--por-letra-corpo);
  color:var(--por-tinta2);max-width:60ch}
/* O ALARME do portal: o que depende do cliente. Palavra em coral com o ponto,
   sem caixa — é o único coral da tela. */
.por-chamada-atencao{
  display:flex;align-items:flex-start;gap:var(--por-e2);
  color:var(--por-alarme-texto);font-weight:600;font-size:var(--por-letra-forte);
  line-height:1.35;background:none;padding:0;
}
.por-chamada-atencao::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;
  background:var(--por-alarme);margin-top:8px}
.por-texto{margin:0 0 var(--por-e3);font-size:var(--por-letra-corpo);
  color:var(--por-tinta2);max-width:60ch}
.por-texto-corrido{white-space:pre-wrap}
.por-nota{margin:var(--por-e3) 0 0;font-size:var(--por-letra-nota);
  color:var(--por-tinta3);max-width:60ch}
.por-opcional{font-weight:400;color:var(--por-tinta4);text-transform:none;letter-spacing:0}

.por-voltar{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--por-tinta3);text-decoration:none;font-size:var(--por-letra-corpo);
  transition:color var(--por-t1) var(--por-curva);
}
.por-voltar:hover{color:var(--por-tinta)}

/* O recado do topo: palavra com o ponto do estado, sem caixa colorida. */
.por-recado{
  display:flex;align-items:flex-start;gap:var(--por-e2);
  margin:0 0 var(--por-e4);padding:0;font-size:var(--por-letra-corpo);
  color:var(--por-tinta2);font-weight:500;
}
.por-recado::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--por-tinta3);margin-top:8px}
.por-recado-ok{color:var(--por-ok)}
.por-recado-ok::before{background:var(--por-ok)}
.por-recado-atencao{color:var(--por-atencao)}
.por-recado-atencao::before{background:var(--por-atencao)}
.por-recado-critico{color:var(--por-falha)}
.por-recado-critico::before{background:var(--por-falha)}

/* ---- o destaque: onde está e quando fica pronto ------------------------
   Papel com uma sombra, sem barra lateral: o estado é a palavra do selo. A
   miniatura do motor fica no canto, porque é da máquina que se fala. */
.por-destaque{
  position:relative;border-radius:var(--por-r3);padding:var(--por-e5);margin:var(--por-e2) 0 var(--por-e5);
  background:var(--por-painel);box-shadow:var(--por-sombra);
}
.por-destaque-ok .por-destaque-selo{color:var(--por-ok)}
.por-destaque-atencao .por-destaque-selo{color:var(--por-atencao)}
.por-destaque-processo .por-destaque-selo{color:var(--por-processo)}
/* O selo do destaque é o estado em palavra, com o ponto. Caixa normal. */
.por-destaque-selo{
  display:inline-flex;align-items:center;gap:var(--por-e2);
  font-size:var(--por-letra-nota);font-weight:600;color:var(--por-tinta2);
  margin-bottom:var(--por-e2);
}
.por-destaque-selo::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.por-destaque-maquina{margin:0 0 var(--por-e3);font-family:var(--por-fonte-titulo);
  font-size:var(--por-letra-secao);line-height:1.2;font-weight:400;letter-spacing:-.02em;
  padding-right:72px}
.por-destaque-previsao{margin:0 0 var(--por-e2);font-size:var(--por-letra-forte);
  font-weight:600;color:var(--por-tinta)}
.por-destaque-explica{margin:0;font-size:var(--por-letra-corpo);
  color:var(--por-tinta2);max-width:60ch}
.por-destaque .por-motor{position:absolute;top:var(--por-e5);right:var(--por-e5)}
/* A miniatura do motor (símbolo `#motor-iso`, do sprite da oficina). */
.por-motor{display:block;width:64px;height:44px;flex:none;opacity:.92}
.por-motor-mini{width:40px;height:28px}

/* ---- listas de cartão -------------------------------------------------- */
.por-lista{list-style:none;margin:0;padding:0;display:grid;gap:var(--por-e3)}
.por-lista-discreta{gap:var(--por-e2)}
.por-lista-simples{margin:0 0 var(--por-e3);padding-left:var(--por-e5);
  color:var(--por-tinta2);font-size:var(--por-letra-corpo)}
.por-item{margin:0}
.por-item-link{
  display:grid;gap:var(--por-e1);padding:var(--por-e4);border-radius:var(--por-r3);
  text-decoration:none;background:var(--por-painel);
  box-shadow:var(--por-sombra);color:var(--por-tinta);min-height:44px;
  transition:background var(--por-t1) var(--por-curva),transform var(--por-t2) var(--por-curva);
}
.por-item-link:hover{background:var(--por-painel2)}
.por-item-link:active{transform:translateY(1px)}
.por-item-link .por-motor-mini{position:absolute}
.por-item-com-motor{position:relative;padding-right:64px}
.por-item-com-motor .por-motor-mini{top:var(--por-e4);right:var(--por-e4)}
.por-item-maquina{font-size:var(--por-letra-corpo);font-weight:600;line-height:1.35}
.por-item-previsao{font-size:var(--por-letra-corpo);color:var(--por-tinta2)}
/* O valor fechado na linha da lista. Peso de dado, não de preço em vitrine:
   o cliente está conferindo o histórico dele, não comprando. */
.por-item-valor{font-size:var(--por-letra-corpo);font-weight:500;color:var(--por-tinta)}
.por-item-rodape{
  display:flex;gap:var(--por-e3);flex-wrap:wrap;font-size:var(--por-letra-nota);
  color:var(--por-tinta4);
}
.por-item-explica{font-size:var(--por-letra-nota);color:var(--por-tinta3)}

/* ---- selo de estado: ponto + palavra ------------------------------------
   Nunca caixa colorida: a palavra informa ("Aguardando sua decisão", "Em
   reparo"), o ponto ajuda. Cor nunca é o único sinal. */
.por-selo{
  display:inline-flex;align-items:center;gap:var(--por-e2);justify-self:start;
  font-size:var(--por-letra-nota);font-weight:600;line-height:1.4;
  color:var(--por-neutro);padding:0;background:none;border-radius:0;
}
.por-selo::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.por-selo-ok{color:var(--por-ok)}
.por-selo-atencao{color:var(--por-atencao)}
.por-selo-processo{color:var(--por-processo)}
.por-selo-falha{color:var(--por-falha)}
/* Vazado, e não cheio: é o ensaio que ninguém julgou porque não há norma
   aplicável. Dar ao "medição registrada" o mesmo ponto cheio dos outros seria
   fingir aprovação. */
.por-selo-neutro{color:var(--por-tinta3);font-weight:500}
.por-selo-neutro::before{background:transparent;box-shadow:inset 0 0 0 1px currentColor}

/* ---- ficha e cartões --------------------------------------------------- */
.por-cartao{
  background:var(--por-painel);border-radius:var(--por-r3);padding:var(--por-e4);
  box-shadow:var(--por-sombra);margin:0 0 var(--por-e4);
}
.por-cartao .por-subtitulo:first-child{margin-top:0}
.por-cartao-vazio{text-align:center;color:var(--por-tinta3);padding:var(--por-e6) var(--por-e4)}
.por-cartao-vazio .por-texto{margin-left:auto;margin-right:auto}

.por-ficha{margin:0 0 var(--por-e5);display:grid;gap:0;
  background:var(--por-painel);border-radius:var(--por-r3);overflow:hidden;box-shadow:var(--por-sombra)}
.por-ficha-linha{
  display:flex;justify-content:space-between;gap:var(--por-e4);
  padding:var(--por-e3) var(--por-e4);border-top:1px solid var(--por-linha-fraca);
}
.por-ficha-linha:first-child{border-top:0}
.por-ficha dt{font-size:var(--por-letra-nota);color:var(--por-tinta3);flex:0 1 auto;min-width:0}
.por-ficha dd{margin:0;font-size:var(--por-letra-corpo);text-align:right;color:var(--por-tinta);
  min-width:0;overflow-wrap:anywhere;display:flex;gap:var(--por-e2);align-items:center;
  justify-content:flex-end;flex-wrap:wrap}
.por-ficha a{color:var(--por-tinta)}

/* ---- ensaios ------------------------------------------------------------
   O número medido e o critério que julgou o número, sempre no mesmo bloco.
   "1200 MΩ" não diz nada a quem não é de máquina elétrica; "1200 MΩ, mínimo
   5 MΩ pela IEEE 43" diz tudo. Por isso o critério não é letra miúda: é a
   segunda linha, na tinta de leitura. O medido vai em aço, como na oficina.

   Sem tabela, de propósito. Quatro colunas num celular de 360px viram quatro
   colunas ilegíveis — e este é o bloco que mais vai ser lido em pé, na porta
   de uma planta, por quem quer saber se o motor volta bom. */
.por-ensaios{list-style:none;margin:0 0 var(--por-e4);padding:0;display:grid;gap:var(--por-e2)}
.por-ensaio{
  display:grid;gap:var(--por-e1);align-content:start;
  padding:var(--por-e3) var(--por-e4);
  background:var(--por-painel);border-radius:var(--por-r3);box-shadow:var(--por-sombra);
}
.por-ensaio-quem{display:flex;align-items:baseline;gap:var(--por-e2);flex-wrap:wrap}
.por-ensaio-grandeza{font-size:var(--por-letra-corpo);font-weight:600}
.por-ensaio-ponto{font-family:var(--por-fonte-mono);font-size:var(--por-letra-nota);color:var(--por-tinta3)}
.por-ensaio-medida{display:flex;align-items:center;justify-content:space-between;
  gap:var(--por-e3);flex-wrap:wrap}
.por-ensaio-valor{font-size:var(--por-letra-forte);font-weight:500;color:var(--por-aco-texto)}
.por-ensaio-criterio{margin:0;font-size:var(--por-letra-nota);
  color:var(--por-tinta3);max-width:60ch}
/* A norma citada. Fica junto do critério e não em rodapé: é dela que vem a
   autoridade da frase, e frase técnica sem fonte é opinião. */
.por-ensaio-norma{display:inline-block;margin-left:var(--por-e2);
  font-family:var(--por-fonte-mono);color:var(--por-tinta4)}
.por-ensaio-quando{margin:var(--por-e1) 0 0;font-size:var(--por-letra-nota);
  color:var(--por-tinta4)}

/* ---- busca e filtro por ano ---------------------------------------------
   A busca do acervo é um formulário GET: campo e botão lado a lado quando
   cabe. Os anos são links, com o ano escolhido em negrito. */
.por-busca{grid-template-columns:1fr auto;align-items:end;margin:0 0 var(--por-e4)}
.por-busca .por-rotulo{grid-column:1 / -1}
.por-busca .por-botao{margin-top:0;min-height:48px}
.por-anos a{color:var(--por-tinta2);font-weight:500;text-decoration:none;padding:0 var(--por-e2);
  display:inline-block;min-height:var(--por-toque);line-height:var(--por-toque)}
.por-anos a[aria-current]{color:var(--por-tinta);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---- as fotos da chegada -------------------------------------------------
   Três por linha no celular, quadradas, sem tabela. O rótulo é o momento da
   foto (Chegada, Placa, Pertences), escrito sobre a imagem no pé — a legenda
   do técnico não chega aqui. Alvo de toque é o quadro inteiro. */
.por-fotos{list-style:none;margin:0 0 var(--por-e3);padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--por-e2)}
.por-foto{margin:0}
.por-foto-link{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;
  border-radius:var(--por-r2);background:var(--por-painel2);text-decoration:none;box-shadow:var(--por-sombra)}
.por-foto-imagem{display:block;width:100%;height:100%;object-fit:cover}
.por-foto-rotulo{position:absolute;left:0;right:0;bottom:0;
  padding:var(--por-e1) var(--por-e2);font-size:var(--por-letra-nota);
  font-weight:500;color:var(--por-tinta-acao);background:rgba(14,22,32,.62)}
@media (min-width:600px){.por-fotos{grid-template-columns:repeat(4,1fr)}}

/* ---- a curva de isolação --------------------------------------------------
   Desenhada no servidor (app/dominio/curva.py). A folha só dá a tinta: a
   série em aço (dado medido), o mínimo da norma numa linha com o nome escrito
   e a faixa abaixo dele no tom fraco de falha — o estado está na faixa e no
   rótulo, nunca na cor do ponto sozinha. */
.por-curva{margin:0 0 var(--por-e5);padding:var(--por-e3) var(--por-e3) var(--por-e2);
  background:var(--por-painel);border-radius:var(--por-r3);box-shadow:var(--por-sombra)}
.por-curva-svg{display:block;width:100%;height:auto;font-family:var(--por-fonte-ui)}
.por-curva-svg text{font-size:var(--por-letra-corpo);fill:var(--por-tinta3)}
.por-curva-eixo{font-variant-numeric:tabular-nums}
.por-curva-unidade{fill:var(--por-tinta4)}
.por-curva-grade{stroke:var(--por-linha-fraca);stroke-width:1}
.por-curva-faixa{fill:var(--por-falha-fraco)}
.por-curva-minimo{stroke:var(--por-falha);stroke-width:1;opacity:.6}
.por-curva-minimo-rotulo{fill:var(--por-tinta3)}
.por-curva-linha{fill:none;stroke:var(--por-aco);stroke-width:2;
  stroke-linejoin:round;stroke-linecap:round}
.por-curva-ponto{fill:var(--por-aco);stroke:var(--por-painel);stroke-width:2}
.por-curva-alvo{fill:transparent}
.por-curva-marca:hover .por-curva-ponto{r:6}
.por-curva-rotulo-fim{font-weight:600;fill:var(--por-tinta)}
.por-curva-legenda{margin:var(--por-e2) 0 0;font-size:var(--por-letra-nota);
  color:var(--por-tinta3);line-height:1.5}

/* A passagem pela oficina, no histórico da máquina: um cabeçalho com a OS e a
   data, e os ensaios daquela vez embaixo. É o que põe a isolação de 2023 ao
   lado da de hoje. */
.por-passagem{margin:0 0 var(--por-e3);background:var(--por-painel);
  border-radius:var(--por-r3);box-shadow:var(--por-sombra);
  padding:0 var(--por-e4) var(--por-e1)}
/* A dobra é um alvo de 44px, como tudo que se toca aqui — e o dedo que a erra
   abre a passagem errada num histórico de dez anos. */
.por-passagem-cabeca{display:flex;justify-content:space-between;align-items:center;
  gap:var(--por-e3);min-height:48px;cursor:pointer;list-style:none;
  font-size:var(--por-letra-nota);color:var(--por-tinta2)}
/* O triângulo padrão some quando o `summary` vira flex, e a dobra fica sem
   dizer que é dobra. Este é desenhado pela folha — duas bordas giradas —, vira
   para baixo quando a passagem abre, e some junto com o resto do movimento para
   quem pediu para não ver movimento. */
.por-passagem-cabeca::-webkit-details-marker{display:none}
.por-passagem-cabeca::after{content:"";flex:0 0 auto;width:7px;height:7px;
  margin-right:2px;border-right:2px solid var(--por-tinta4);
  border-bottom:2px solid var(--por-tinta4);transform:rotate(-45deg);
  transition:transform var(--por-t1) var(--por-curva)}
.por-passagem[open] .por-passagem-cabeca::after{transform:rotate(45deg)}
.por-passagem-os{font-weight:600;color:var(--por-tinta)}
.por-passagem-quando{margin-left:auto;color:var(--por-tinta3);text-align:right}
.por-passagem .por-ensaios{margin-bottom:var(--por-e3)}
.por-passagem .por-ensaio{box-shadow:none;background:var(--por-painel2)}

/* ---- linha do tempo ---------------------------------------------------- */
.por-tempo{list-style:none;margin:0;padding:0}
.por-tempo-item{
  display:grid;grid-template-columns:12px 1fr auto;gap:var(--por-e3);
  align-items:baseline;padding:var(--por-e3) 0;border-bottom:1px solid var(--por-linha-fraca);
}
.por-tempo-item:last-child{border-bottom:0}
/* O ponto do marco, desenhado pela folha. Cheio e verde no que está concluído,
   vazado no que só aconteceu — e nunca um caractere de fonte, que muda de forma
   a cada aparelho. */
.por-tempo-marco{display:block;width:8px;height:8px;border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--por-tinta4);align-self:center}
.por-tempo-ok .por-tempo-marco{background:var(--por-ok);box-shadow:none}
.por-tempo-texto{font-size:var(--por-letra-corpo);color:var(--por-tinta)}
.por-tempo-quando{font-size:var(--por-letra-nota);color:var(--por-tinta4);white-space:nowrap;
  font-family:var(--por-fonte-mono);font-variant-numeric:tabular-nums}

/* ---- documentos -------------------------------------------------------- */
.por-documento{
  background:var(--por-painel);border-radius:var(--por-r3);padding:var(--por-e5);
  box-shadow:var(--por-sombra);
}
.por-documento-cabeca{border-bottom:1px solid var(--por-linha);
  padding-bottom:var(--por-e3);margin-bottom:var(--por-e4)}
.por-documento-selo{
  font-family:var(--por-fonte-mono);font-size:var(--por-letra-micro);
  font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--por-tinta3);
}
.por-documento-titulo{margin:var(--por-e2) 0 var(--por-e1);font-family:var(--por-fonte-titulo);
  font-size:var(--por-letra-secao);line-height:1.2;font-weight:400;letter-spacing:-.02em}
.por-documento-numero{margin:0;font-size:var(--por-letra-nota);color:var(--por-tinta3)}

.por-escopo{list-style:none;margin:0 0 var(--por-e5);padding:0;display:grid;gap:var(--por-e3)}
.por-escopo-item{
  display:grid;gap:var(--por-e1);padding:var(--por-e3) 0;
  border-bottom:1px solid var(--por-linha-fraca);
}
.por-escopo-item:last-child{border-bottom:0}
.por-escopo-nome{font-size:var(--por-letra-corpo);font-weight:600}
.por-escopo-texto{margin:0;font-size:var(--por-letra-corpo);color:var(--por-tinta2);max-width:60ch}
.por-escopo-valor{font-size:var(--por-letra-corpo);font-weight:500;color:var(--por-tinta)}

/* O total: número grande em Albert 300 sobre a linha, como o indicador da casa. */
.por-total{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--por-e4);flex-wrap:wrap;
  padding:var(--por-e4) 0;border-top:1px solid var(--por-linha);
}
.por-total-rotulo{font-size:var(--por-letra-nota);font-weight:500;color:var(--por-tinta3)}
.por-total-valor{font-family:var(--por-fonte-titulo);font-size:var(--por-letra-tela);
  font-weight:300;letter-spacing:-.02em;color:var(--por-tinta)}

.por-tabela{width:100%;border-collapse:collapse;font-size:var(--por-letra-corpo);
  margin:0 0 var(--por-e3)}
.por-tabela th{
  text-align:left;font-size:var(--por-letra-nota);font-weight:500;
  color:var(--por-tinta3);padding:var(--por-e2);
  border-bottom:1px solid var(--por-marca-fio);
}
.por-tabela td{padding:var(--por-e2);border-bottom:1px solid var(--por-linha-fraca);
  vertical-align:top}
.por-tabela-falha td:first-child{color:var(--por-falha);font-weight:600}
.por-tabela-alerta td:first-child{color:var(--por-atencao);font-weight:600}
.por-tabela-ok td:first-child{color:var(--por-ok)}
.por-tabela-neutro td{background:transparent}

/* ---- portão (entrar, pedir acesso, criar senha) ------------------------
   Na porta de entrada a marca aparece inteira, com a assinatura legível: é a
   primeira coisa que o cliente vê e a que diz que ele chegou ao lugar certo.
   Aqui — e só aqui — a senoide do logotipo é coral: a marca impressa na
   soleira, como na porta da equipe. */
.por-portao{max-width:400px;margin:var(--por-e5) auto;display:grid;gap:var(--por-e5)}
.por-portao-amplo{max-width:480px}
.por-portao-marca{text-align:center}
.por-portao-logo{display:block;width:min(220px,62vw);margin:0 auto var(--por-e2);line-height:0}
.por-portao-logo .logo-indu{display:block;width:100%;height:auto}
.por-portao .logo-tinta{fill:var(--por-tinta)}
.por-portao .logo-apoio{fill:var(--por-tinta3)}
.por-portao .logo-senoide{stroke:var(--por-marca)}
.por-portao-titulo{margin:var(--por-e2) 0 var(--por-e2);font-family:var(--por-fonte-titulo);
  font-size:var(--por-letra-secao);font-weight:400;letter-spacing:-.02em}
.por-portao-sub{margin:0;font-size:var(--por-letra-corpo);color:var(--por-tinta2);line-height:1.5}
.por-portao-quem{margin:0 0 var(--por-e2);font-size:var(--por-letra-corpo);
  font-weight:600;color:var(--por-tinta)}
.por-portao-pe{margin:0;text-align:center;font-size:var(--por-letra-corpo);color:var(--por-tinta3)}
.por-portao-pe a{color:var(--por-tinta);font-weight:500}

.por-formulario{display:grid;gap:var(--por-e1)}
/* Rótulo de formulário em caixa normal: ele carrega frase ("Como você chama
   este aparelho"), e frase em caixa alta tira do olho a forma da palavra. */
.por-rotulo{
  font-size:var(--por-letra-nota);font-weight:500;color:var(--por-tinta2);
  margin-top:var(--por-e3);
}
/* Campo cheio: identifica-se pelo preenchimento e pelo rótulo acima; hover e
   foco desenham o contorno. */
.por-campo{
  min-height:48px;border:1px solid var(--por-painel2);border-radius:var(--por-r2);
  padding:0 var(--por-e4);font:inherit;font-size:var(--por-campo-toque);
  background:var(--por-painel2);color:var(--por-tinta);width:100%;
  transition:border-color var(--por-t1) var(--por-curva),background var(--por-t1) var(--por-curva);
}
.por-campo:hover{border-color:var(--por-borda-viva)}
.por-campo:focus{outline:2px solid var(--por-foco);outline-offset:1px;background:var(--por-painel);
  border-color:transparent;box-shadow:inset 0 -2px 0 var(--por-marca-fio-forte)}
.por-campo::placeholder{color:var(--por-tinta4)}
.por-campo-codigo{
  font-family:var(--por-fonte-mono);font-size:var(--por-letra-secao);
  letter-spacing:.3em;text-align:center;
}
/* A ação é tinta. O coral é do alarme. */
.por-botao{
  min-height:48px;margin-top:var(--por-e4);border:0;border-radius:var(--por-r2);
  background:var(--por-tinta);color:var(--por-tinta-acao);font:inherit;
  font-size:var(--por-letra-corpo);font-weight:500;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;padding:0 var(--por-e5);
  transition:background var(--por-t1) var(--por-curva),transform var(--por-t1) var(--por-curva);
}
.por-botao:hover{background:var(--por-tinta2)}
.por-botao:active{transform:translateY(1px)}
.por-botao:disabled{opacity:.45;cursor:not-allowed}
.por-botao-fantasma{
  background:var(--por-painel2);color:var(--por-tinta);
}
.por-botao-fantasma:hover{background:var(--por-painel3)}
/* O botão que é o alarme da tela: a proposta parada com o cliente. */
.por-botao-alarme{background:var(--por-alarme)}
.por-botao-alarme:hover{background:var(--por-alarme-texto)}
/* O erro é palavra em falha, sem caixa. */
.por-erro{
  display:flex;align-items:flex-start;gap:var(--por-e2);
  margin-top:var(--por-e3);padding:0;font-size:var(--por-letra-corpo);
  color:var(--por-falha);font-weight:600;
}
.por-erro::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--por-falha);margin-top:8px}
/* Fundo branco fixo atrás do QR, e é uma das cores literais da folha:
   leitor de QR precisa de contraste para a câmera, não de harmonia com a tela. */
.por-qr{display:flex;justify-content:center;margin:var(--por-e3) 0;
  background:#fff;padding:var(--por-e3);border-radius:var(--por-r3);box-shadow:var(--por-sombra)}
.por-qr svg{width:180px;height:180px}

/* ---- barra inferior -----------------------------------------------------
   Sem ícone: o rótulo faz o trabalho, e o destino ativo se anuncia por tinta,
   peso e um período da senoide em cima — a assinatura da casa, como no menu da
   oficina. Papel com o anel de sombra alta, porque flutua sobre a folha. */
.por-barra-inferior{
  position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;
  grid-template-columns:repeat(4,1fr);
  background:var(--por-painel);box-shadow:var(--por-sombra-alta);
  padding-bottom:env(safe-area-inset-bottom);
}
.por-barra-item{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:56px;font-size:var(--por-letra-nota);font-weight:500;
  color:var(--por-tinta3);text-decoration:none;padding:var(--por-e2) var(--por-e1);
  text-align:center;transition:color var(--por-t1) var(--por-curva);
}
.por-barra-item:hover{color:var(--por-tinta)}
.por-barra-ativo{color:var(--por-tinta);font-weight:600}
.por-barra-ativo::before{content:"";position:absolute;top:0;left:50%;width:26px;height:6px;
  transform:translateX(-50%);background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 6'%3E%3Cpath d='M0 3 Q3.25 .5 6.5 3 T13 3 T19.5 3 T26 3' fill='none' stroke='%23000' stroke-width='1.6' 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 6'%3E%3Cpath d='M0 3 Q3.25 .5 6.5 3 T13 3 T19.5 3 T26 3' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}

.por-rodape{
  max-width:640px;margin:0 auto;padding:var(--por-e5) var(--por-e4);display:flex;
  justify-content:space-between;gap:var(--por-e4);font-size:var(--por-letra-nota);
  color:var(--por-tinta4);
}
.por-rodape a{color:var(--por-tinta3)}

/* ---- telas maiores ----------------------------------------------------- */
@media (min-width:760px){
  .por-corpo{padding-bottom:0}
  .por-topo{padding-left:var(--por-e5);padding-right:var(--por-e5)}
  .por-barra-inferior{
    position:static;grid-template-columns:repeat(4,auto);justify-content:center;
    gap:var(--por-e2);box-shadow:none;border-bottom:1px solid var(--por-linha);
    background:var(--por-painel);
  }
  .por-barra-item{font-size:var(--por-letra-corpo);padding:0 var(--por-e5);min-height:52px}
  .por-barra-ativo::before{top:auto;bottom:0}
  .por-tela{padding:var(--por-e6) var(--por-e5)}
  .por-titulo{font-size:var(--por-letra-tela)}
  .por-destaque{padding:var(--por-e6)}
  .por-destaque .por-motor{top:var(--por-e6);right:var(--por-e6);width:96px;height:66px}
  .por-destaque-maquina{font-size:var(--por-letra-tela);padding-right:112px}
  .por-lista-discreta{grid-template-columns:1fr}
}

/*
  Em tela de computador a coluna de leitura abre um pouco, e a lista de ordens
  passa a duas colunas. Não mais que isso: o portal continua sendo uma tela de
  resposta rápida, e não um painel — quem quer o painel é a oficina, e ela tem o
  dela.
*/
@media (min-width:1080px){
  .por-tela{max-width:920px}
  .por-rodape{max-width:920px}
  .por-lista{grid-template-columns:repeat(2,1fr)}
  .por-documento{padding:var(--por-e6) var(--por-e7)}
  .por-ensaios{grid-template-columns:repeat(2,1fr)}
}

/* --------------------------------------------------------------------------
   Passkey do cliente.

   Prefixo `por-`, como tudo aqui — o script que faz o trabalho é o mesmo da
   plataforma (`identidade.js`), mas ele se agarra a atributos `data-chave-*`,
   e não a nome de classe, justamente para que as duas folhas continuem donas
   dos próprios nomes.
   -------------------------------------------------------------------------- */
.por-chave{margin-top:var(--por-e5);text-align:left}
/* Largura cheia como o "Entrar" acima: dois botões da mesma decisão com larguras
   diferentes fazem o de baixo parecer secundário, e ele não é — é o melhor dos
   dois caminhos. */
.por-chave [data-chave-entrar],
.por-chave [data-chave-cadastrar],
.por-chave > .por-botao-fantasma{width:100%}
.por-chave-ou{display:block;margin-bottom:var(--por-e3);text-align:center;
  font-size:var(--por-letra-nota);letter-spacing:0;text-transform:none;
  color:var(--por-tinta4)}
.por-chave-nota{margin:var(--por-e3) 0 0;font-size:var(--por-letra-nota);
  line-height:1.55;color:var(--por-tinta3);max-width:60ch}
.por-chave-recado{margin:var(--por-e3) 0 0;font-size:var(--por-letra-corpo);
  line-height:1.5;color:var(--por-tinta2)}
.por-chave-recado[data-chave-tom="erro"]{color:var(--por-falha);font-weight:600}
.por-chave-lista{list-style:none;margin:0 0 var(--por-e4);padding:0}
.por-chave-lista li{display:flex;align-items:center;justify-content:space-between;
  gap:var(--por-e3);padding:var(--por-e3) 0;border-top:1px solid var(--por-linha-fraca)}
.por-chave-lista li:first-child{border-top:0}
.por-chave-lista b{display:block;font-size:var(--por-letra-corpo)}
.por-chave-lista span{display:block;margin-top:var(--por-e1);
  font-size:var(--por-letra-nota);color:var(--por-tinta3)}
.por-chave-lista .por-botao{margin-top:0;min-height:var(--por-toque)}

/* ---------------------------------------------------------------------------
   O passe por QR: o navegador mostra, o celular carimba.
   Fundo branco fixo atrás do QR, inclusive aqui — leitor de QR precisa de
   contraste, não de harmonia com a tela.
   -------------------------------------------------------------------------- */
.por-passe{text-align:center}
.por-passe-qr{display:flex;justify-content:center;margin:var(--por-e3) 0;
  padding:var(--por-e3);background:#fff;border-radius:var(--por-r3);box-shadow:var(--por-sombra)}
.por-passe-qr svg{width:190px;height:190px}
.por-passe-codigo{margin:0;font-family:var(--por-fonte-mono);
  font-size:var(--por-letra-numero);font-weight:500;letter-spacing:.12em;
  font-variant-numeric:tabular-nums;color:var(--por-tinta)}
.por-passe-rotulo{margin:var(--por-e4) 0 var(--por-e1);font-size:var(--por-letra-nota);
  color:var(--por-tinta3)}
.por-passe-espera{margin:var(--por-e4) 0 0;font-size:var(--por-letra-corpo);
  line-height:1.55;color:var(--por-tinta3)}
.por-passe-erro{margin:var(--por-e4) 0 0;font-size:var(--por-letra-corpo);
  font-weight:600;color:var(--por-falha)}

/* "Perdi meu aparelho" e "Esqueci minha senha": abaixo do botão, com peso de
   ação e alvo de 44 px. Sem sublinhado, como nas cartas. Os números aqui são
   literais de propósito — `tests/test_porta_unica.py` lê este bloco para
   garantir que o link não volte a encolher para tamanho de nota de rodapé. */
.por-ajuda{display:flex;align-items:center;justify-content:center;min-height:44px;
  margin-top:var(--por-e3);font-size:15px;font-weight:600;
  color:var(--por-tinta);text-decoration:none}
.por-ajuda-nota{margin:var(--por-e1) 0 0;font-size:var(--por-letra-nota);
  line-height:1.5;color:var(--por-tinta3);text-align:center}

/* A ficha da empresa que a Receita devolveu, para o cliente confirmar. */
.por-empresa{margin:0 0 var(--por-e5);padding:var(--por-e4);
  border-radius:var(--por-r3);background:var(--por-painel);box-shadow:var(--por-sombra)}
.por-empresa-nome{margin:0;font-family:var(--por-fonte-titulo);font-size:var(--por-letra-forte);
  line-height:1.3;font-weight:600}
.por-empresa-linha{margin:var(--por-e2) 0 0;font-size:var(--por-letra-nota);
  color:var(--por-tinta3)}

/* O bloco que cobra o cadastro do rosto de quem ainda entra por senha: papel
   como os outros, o título em Albert; a palavra "Falta" já pede a ação. */
.por-cobranca{margin:0 0 var(--por-e5);padding:var(--por-e4);
  border-radius:var(--por-r3);background:var(--por-painel);box-shadow:var(--por-sombra)}
.por-cobranca-titulo{margin:0 0 var(--por-e2);font-family:var(--por-fonte-titulo);
  font-size:var(--por-letra-forte);font-weight:600;color:var(--por-tinta)}
.por-cobranca-texto{margin:0 0 var(--por-e3);font-size:var(--por-letra-corpo);
  line-height:1.5;color:var(--por-tinta2);max-width:60ch}
.por-cobranca .por-botao{display:flex;align-items:center;justify-content:center;
  text-decoration:none;margin-top:0}

[hidden]{display:none !important}

/* ---------------------------------------------------------------------------
   Impressão do laudo e da proposta: o cliente leva o documento para a reunião
   de parada. Na folha sai só o documento — sem topo, sem barra inferior, sem
   botão, sem formulário, sem rodapé do portal —, em preto no branco. "Salvar
   em PDF" é o próprio diálogo de impressão do navegador: nada a instalar.
   -------------------------------------------------------------------------- */
.por-imprimir{margin:var(--por-e4) 0 0}
@media print{
  .por-topo,.por-barra-inferior,.por-rodape,.por-voltar,.por-imprimir,
  .por-recado,.por-cartao form,.por-formulario{display:none!important}
  .por-corpo{background:#fff!important}
  .por-tela{max-width:none;padding:0}
  .por-documento,.por-ficha{box-shadow:none!important;border:1px solid #999!important}
  .por-documento a{color:inherit;text-decoration:none}
}

/* ---------------------------------------------------------------------------
   Alvos de toque dos links soltos em texto (revisão de UX, 23/09/2026): "Sair",
   "Ver todas", "Peça o seu", o link da máquina na ficha. Link de 20 px de
   altura no celular é link que o polegar erra.
   -------------------------------------------------------------------------- */
.por-rodape a,.por-nota a,.por-portao-pe a,.por-destaque-explica a,.por-ficha dd a{
  display:inline-flex;align-items:center;min-height:var(--por-toque);padding:0 var(--por-e1)}
/* "Ir para o conteúdo": escondido até receber foco pelo teclado. */
.por-pular{position:absolute;left:-9999px;top:0}
.por-pular:focus{left:var(--por-e2);top:var(--por-e2);z-index:40;padding:var(--por-e2) var(--por-e3);
  background:var(--por-painel);color:var(--por-tinta);border-radius:var(--por-r2);box-shadow:var(--por-sombra-alta)}


/* ---- o caminho da máquina: a senoide como linha do tempo -----------------
   O rastreador de encomenda que o cliente já sabe ler, desenhado com a
   assinatura da casa: o fio da senoide corre contínuo até onde a máquina já
   andou e pontilhado adiante — forma, não só cor. Um ponto por estágio, para
   dar para contar; o atual é o anel em tinta. A frase "Passo 4 de 6: Execução"
   vem ANTES do fio e é a leitura principal; os seis rótulos ficam embaixo a
   partir de 560 px (ux-lead, 06/10/2026). */
.por-caminho{margin:0 0 var(--por-e5);padding:var(--por-e4);background:var(--por-painel);
  border-radius:var(--por-r3);box-shadow:var(--por-sombra)}
.por-passos-conta{margin:0 0 var(--por-e3);font-size:var(--por-letra-corpo);color:var(--por-tinta2)}
.por-passos-conta b{color:var(--por-tinta);font-weight:600}
.por-senoide{display:block;width:100%;height:auto;overflow:visible;color:var(--por-tinta)}
.por-senoide-trilho{fill:none;stroke:var(--por-tinta4);stroke-width:1.5;stroke-linecap:round;
  stroke-dasharray:3 5;opacity:.6}
/* `pathLength="1"` no caminho: o traço contínuo mede `--por-prog` (0…1). */
.por-senoide-feito{fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;
  stroke-dasharray:var(--por-prog,0) 1;transition:stroke-dasharray var(--por-t3) var(--por-curva)}
.por-senoide-ponto{fill:var(--por-painel);stroke:var(--por-tinta4);stroke-width:1.5}
.por-senoide-ponto-feito{fill:currentColor;stroke:currentColor}
.por-senoide-ponto-agora{fill:var(--por-painel);stroke:currentColor;stroke-width:3}
.por-passos{
  list-style:none;margin:var(--por-e2) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(6,1fr);gap:var(--por-e1);
}
.por-passo{display:grid;justify-items:center;min-width:0;text-align:center}
.por-passo:first-child{justify-items:start;text-align:left}
.por-passo:last-child{justify-items:end;text-align:right}
.por-passo-marca{display:none}
.por-passo-rotulo{
  font-size:var(--por-letra-nota);font-weight:500;color:var(--por-tinta4);line-height:1.25;
}
.por-passo-feito .por-passo-rotulo{color:var(--por-tinta3)}
.por-passo-agora .por-passo-rotulo{color:var(--por-tinta);font-weight:600}
/* Seis rótulos não cabem em 390px sem partir palavra. No celular ficam o fio
   e a frase; a partir de 560px os rótulos voltam. */
@media (max-width:559px){
  .por-passo-rotulo{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}
  .por-passos{margin:0}
}

/* ---- "precisa falar com a engenharia?" -----------------------------------
   O suporte visível, no fim da OS: o número a citar, em mono, copiável pela
   seleção. Sem telefone nem e-mail inventado — o canal é o contato que o
   cliente já tem com a INDUMOTOR. */
.por-contato{margin:var(--por-e6) 0 0;padding:var(--por-e4);background:var(--por-painel);
  border-radius:var(--por-r3);box-shadow:var(--por-sombra);display:grid;gap:var(--por-e2)}
.por-contato-titulo{margin:0;font-family:var(--por-fonte-titulo);font-size:var(--por-letra-forte);
  font-weight:600;letter-spacing:-.01em}
.por-contato-texto{margin:0;font-size:var(--por-letra-corpo);color:var(--por-tinta2);max-width:60ch}
.por-contato-os{display:inline-flex;align-items:center;min-height:var(--por-toque);
  padding:0 var(--por-e3);border-radius:var(--por-r2);background:var(--por-painel2);
  font-size:var(--por-letra-forte);font-weight:500;color:var(--por-tinta);user-select:all;justify-self:start}

/* ---- o assistente da OS ------------------------------------------------ */
.por-assistente{margin-top:var(--por-e5)}
.por-assistente .por-subtitulo{margin-top:0}
.por-conversa{display:grid;gap:var(--por-e3);margin:var(--por-e4) 0 0}
.por-conversa:empty{display:none}
.por-fala{
  max-width:92%;padding:var(--por-e3) var(--por-e4);border-radius:var(--por-r3);
  font-size:var(--por-letra-corpo);
}
.por-fala-cliente{
  justify-self:end;margin:0;background:var(--por-tinta);color:var(--por-tinta-acao);
}
.por-fala-cliente.por-fala-texto,.por-fala-cliente .por-fala-texto{color:var(--por-tinta-acao)}
.por-fala-assistente{
  justify-self:start;background:var(--por-painel2);
}
.por-fala-texto{margin:0;white-space:pre-wrap;color:var(--por-tinta)}
.por-fala-espera .por-fala-texto{color:var(--por-tinta3)}
.por-fala-selo{
  margin:var(--por-e2) 0 0;font-size:var(--por-letra-nota);color:var(--por-tinta3);
}
.por-fala-fontes{
  margin:var(--por-e2) 0 0;display:flex;flex-wrap:wrap;gap:var(--por-e2);
  font-size:var(--por-letra-nota);
}
.por-fala-fontes a{
  color:var(--por-tinta);font-weight:600;min-height:var(--por-toque);
  display:inline-flex;align-items:center;
}
.por-sugestoes{
  display:flex;flex-wrap:wrap;gap:var(--por-e2);margin:var(--por-e4) 0 0;
}
/* As perguntas prontas são filtros: texto em pílula de campo cheio. */
.por-sugestao{
  min-height:var(--por-toque);padding:0 var(--por-e4);border-radius:var(--por-r4);
  border:0;background:var(--por-painel2);color:var(--por-tinta2);
  font:inherit;font-size:var(--por-letra-nota);font-weight:500;cursor:pointer;
  transition:background var(--por-t1) var(--por-curva),color var(--por-t1) var(--por-curva);
}
.por-sugestao:hover{background:var(--por-painel3);color:var(--por-tinta)}
.por-pergunta{
  display:grid;grid-template-columns:1fr auto;gap:var(--por-e2);
  margin:var(--por-e4) 0 0;align-items:stretch;
}
.por-pergunta .por-botao{margin-top:0}
.por-oculto{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}