/* flowpest.css — a identidade v2 em código.
   Os valores abaixo são a MESMA tabela que está no STATUS.md. Toda cor do
   sistema sai daqui: nenhuma tela deve escrever um hex na mão outra vez (foi o
   que produziu os 317 hexes espalhados pelo Streamlit).

   Os dois temas são automáticos: claro por padrão, escuro quando o aparelho do
   visitante está em modo escuro. O lead abre o link no celular dele e recebe o
   tema que ele já escolheu.

   ── COMO ISTO ESTÁ ORGANIZADO (mudou em 17/08, para o painel admin) ──

   Antes as cores escuras moravam DENTRO do `@media (prefers-color-scheme:dark)`,
   e por isso a única coisa capaz de trocar o tema era o aparelho. O painel admin
   precisa de um BOTÃO de trocar, e um botão não consegue mentir sobre o modo do
   sistema operacional — ele só consegue marcar o HTML.

   Então agora são três blocos, nesta ordem:

     1. `--l-*` e `--d-*`  → os VALORES. Cada hex existe uma vez só, aqui.
     2. mapeamento padrão  → `--fundo` aponta para o claro.
     3. duas exceções      → o aparelho está no escuro (e o usuário não pediu
                             claro), OU o usuário marcou `data-tema="escuro"`
                             no `<html>`.

   O mapeamento aparece repetido nos blocos 2 e 3 — isso é CSS puro, não existe
   forma de reaproveitar uma lista de regras. O que importa é que os HEX não se
   repetem: mudar uma cor continua sendo mudar um lugar só. */

:root {
  /* ── Os valores: tema claro ── */
  --l-fundo:        #F7F8F9;
  --l-superficie:   #FFFFFF;
  --l-barra:        #FFFFFF;
  --l-borda:        #E3E7EA;
  --l-borda-forte:  #CBD3D9;
  --l-texto:        #14181B;
  /* #6B747B dava 4,48:1 sobre --l-fundo (#F7F8F9) — abaixo do 4,5 da
     WCAG AA. #666F76 dá 4,82:1 sobre o fundo e 5,12:1 sobre a
     superfície. Medido em 28/08. */
  --l-texto-fraco:  #666F76;
  /* #B87A00 falhava nos DOIS sentidos no tema claro: branco em cima dele
     dava 3,61:1 (botão "Novo cliente", marca do "hoje" na Agenda, avatar
     da Equipe — todos texto de 10,5 a 13,5px, que não conta como texto
     grande), e ele COMO texto sobre o fundo dava 3,39:1. #996600 dá
     4,94:1 e 4,64:1. O ouro da marca (#FFC53D) é o do tema escuro e não
     mudou; a landing tem paleta própria e não é tocada. Medido em 28/08. */
  --l-ouro:         #996600;
  --l-ouro-contra:  #FFFFFF;
  --l-azul:         #3550E0;
  --l-azul-fundo:   #EBEEFE;
  --l-azul-borda:   #C3CCFA;
  --l-violeta:      #7C3AED;
  --l-violeta-txt:  #6B21A8;
  --l-violeta-fundo:#F7F3FE;
  --l-violeta-borda:#E7DBFB;
  --l-verde:        #00875A;
  --l-verde-txt:    #00694A;
  --l-verde-fundo:  #E6F7EF;
  --l-verde-borda:  #B7E8CE;
  --l-laranja:      #C2610A;
  --l-laranja-txt:  #92490A;
  --l-laranja-fundo:#FEF1E3;
  --l-laranja-borda:#F6D8B8;
  --l-vermelho:     #D92D20;
  --l-vermelho-txt: #A81E14;
  --l-vermelho-fundo:#FEE9E7;
  --l-vermelho-borda:#F7C7C2;

  /* ── Os valores: tema escuro ── */
  --d-fundo:        #0F1214;
  --d-superficie:   #191D20;
  --d-barra:        #14181C;
  --d-borda:        #282E33;
  --d-borda-forte:  #3C454D;
  --d-texto:        #E9EDF0;
  --d-texto-fraco:  #8B959C;
  --d-ouro:         #FFC53D;
  --d-ouro-contra:  #0F1214;
  --d-azul:         #8AA2FF;
  --d-azul-fundo:   #101838;
  --d-azul-borda:   #26356F;
  --d-violeta:      #A855F7;
  --d-violeta-txt:  #C79BFA;
  --d-violeta-fundo:#17111F;
  --d-violeta-borda:#2E1E44;
  --d-verde:        #00E676;
  --d-verde-txt:    #4BEE9B;
  --d-verde-fundo:  #102A1C;
  --d-verde-borda:  #1F4F36;
  --d-laranja:      #FF9A3D;
  --d-laranja-txt:  #FFB067;
  --d-laranja-fundo:#2A1A0A;
  --d-laranja-borda:#5C3A14;
  --d-vermelho:     #FF5A5A;
  --d-vermelho-txt: #FF8A8A;
  --d-vermelho-fundo:#2E1010;
  --d-vermelho-borda:#5C2020;

  /* ── Mapeamento padrão: claro ── */
  --fundo:        var(--l-fundo);
  --superficie:   var(--l-superficie);
  --barra:        var(--l-barra);
  --borda:        var(--l-borda);
  --borda-forte:  var(--l-borda-forte);
  --texto:        var(--l-texto);
  --texto-fraco:  var(--l-texto-fraco);
  --ouro:         var(--l-ouro);
  --ouro-contra:  var(--l-ouro-contra);
  --azul:         var(--l-azul);
  --azul-fundo:   var(--l-azul-fundo);
  --azul-borda:   var(--l-azul-borda);
  --violeta:      var(--l-violeta);
  --violeta-txt:  var(--l-violeta-txt);
  --violeta-fundo:var(--l-violeta-fundo);
  --violeta-borda:var(--l-violeta-borda);
  --verde:        var(--l-verde);
  --verde-txt:    var(--l-verde-txt);
  --verde-fundo:  var(--l-verde-fundo);
  --verde-borda:  var(--l-verde-borda);
  --laranja:      var(--l-laranja);
  --laranja-txt:  var(--l-laranja-txt);
  --laranja-fundo:var(--l-laranja-fundo);
  --laranja-borda:var(--l-laranja-borda);
  --vermelho:     var(--l-vermelho);
  --vermelho-txt: var(--l-vermelho-txt);
  --vermelho-fundo:var(--l-vermelho-fundo);
  --vermelho-borda:var(--l-vermelho-borda);

  --raio:   10px;
  --raio-g: 14px;
  --transicao: .16s ease;

  /* Diz ao NAVEGADOR em que tema a página está. Sem esta linha, ele desenha os
     controles que são dele — bolinha de escolha, caixa de marcar, lista
     suspensa, barra de rolagem, calendário de data, fundo do preenchimento
     automático — sempre no estilo claro, mesmo com a página inteira escura.
     Nossos tokens de cor não alcançam esses desenhos; só esta propriedade
     alcança. (Achado medindo o portal escuro, 23/08.) */
  color-scheme: light;
}

/* Exceção 1 — o APARELHO está no escuro. O `:not([data-tema="claro"])` é o que
   permite alguém forçar claro num celular escuro: sem ele, o botão de trocar
   funcionaria só num sentido. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --fundo:        var(--d-fundo);
    --superficie:   var(--d-superficie);
    --barra:        var(--d-barra);
    --borda:        var(--d-borda);
    --borda-forte:  var(--d-borda-forte);
    --texto:        var(--d-texto);
    --texto-fraco:  var(--d-texto-fraco);
    --ouro:         var(--d-ouro);
    --ouro-contra:  var(--d-ouro-contra);
    --azul:         var(--d-azul);
    --azul-fundo:   var(--d-azul-fundo);
    --azul-borda:   var(--d-azul-borda);
    --violeta:      var(--d-violeta);
    --violeta-txt:  var(--d-violeta-txt);
    --violeta-fundo:var(--d-violeta-fundo);
    --violeta-borda:var(--d-violeta-borda);
    --verde:        var(--d-verde);
    --verde-txt:    var(--d-verde-txt);
    --verde-fundo:  var(--d-verde-fundo);
    --verde-borda:  var(--d-verde-borda);
    --laranja:      var(--d-laranja);
    --laranja-txt:  var(--d-laranja-txt);
    --laranja-fundo:var(--d-laranja-fundo);
    --laranja-borda:var(--d-laranja-borda);
    --vermelho:     var(--d-vermelho);
    --vermelho-txt: var(--d-vermelho-txt);
    --vermelho-fundo:var(--d-vermelho-fundo);
    --vermelho-borda:var(--d-vermelho-borda);
  }
}

/* Exceção 2 — o USUÁRIO pediu escuro no botão. Vem depois da media query de
   propósito: quem escolhe na mão ganha do aparelho. */
:root[data-tema="escuro"] {
  color-scheme: dark;
  --fundo:        var(--d-fundo);
  --superficie:   var(--d-superficie);
  --barra:        var(--d-barra);
  --borda:        var(--d-borda);
  --borda-forte:  var(--d-borda-forte);
  --texto:        var(--d-texto);
  --texto-fraco:  var(--d-texto-fraco);
  --ouro:         var(--d-ouro);
  --ouro-contra:  var(--d-ouro-contra);
  --azul:         var(--d-azul);
  --azul-fundo:   var(--d-azul-fundo);
  --azul-borda:   var(--d-azul-borda);
  --violeta:      var(--d-violeta);
  --violeta-txt:  var(--d-violeta-txt);
  --violeta-fundo:var(--d-violeta-fundo);
  --violeta-borda:var(--d-violeta-borda);
  --verde:        var(--d-verde);
  --verde-txt:    var(--d-verde-txt);
  --verde-fundo:  var(--d-verde-fundo);
  --verde-borda:  var(--d-verde-borda);
  --laranja:      var(--d-laranja);
  --laranja-txt:  var(--d-laranja-txt);
  --laranja-fundo:var(--d-laranja-fundo);
  --laranja-borda:var(--d-laranja-borda);
  --vermelho:     var(--d-vermelho);
  --vermelho-txt: var(--d-vermelho-txt);
  --vermelho-fundo:var(--d-vermelho-fundo);
  --vermelho-borda:var(--d-vermelho-borda);
}

* { box-sizing: border-box; }

/* `hidden` tem que ganhar de tudo. O navegador esconde com `[hidden]
   { display: none }`, que é a regra mais FRACA que existe — qualquer
   `label.campo { display: block }` ou `.marca-item { display: flex }` nosso a
   derruba, e o elemento fica na tela mesmo depois de o JavaScript mandar
   escondê-lo.

   Custou um bug de campo: na ficha de execução o "Vencimento" aparecia no Pix e
   no dinheiro (só boleto é faturado), o "Cliente pagou agora" aparecia em forma
   faturada, e o "Finalizar sem a assinatura" continuava lá depois de o cliente
   assinar. O JavaScript estava certo o tempo todo — era o CSS que ignorava. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Barra superior ─────────────────────────────────────────────── */
.topo {
  background: var(--barra);
  border-bottom: 1px solid var(--borda);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 9px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.marca { font-size: 17px; letter-spacing: -.01em; font-weight: 500; }
.marca .ponto { color: var(--ouro); }
.marca-sub { font-size: 12.5px; color: var(--texto-fraco); margin-top: 1px; }

.envelope { max-width: 560px; margin: 0 auto; padding: 18px 16px 40px; }

/* ── Passos — os 4 do fluxo, com o atual em ouro ────────────────── */
.passos { display: flex; gap: 8px; margin-bottom: 20px; }
.passo {
  flex: 1;
  font-size: 11.5px;
  color: var(--texto-fraco);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.passo i {
  display: block; height: 3px; border-radius: 999px;
  background: var(--borda); margin-bottom: 6px;
  transition: background var(--transicao);
}
.passo.atual { color: var(--texto); }
.passo.atual i { background: var(--ouro); }

/* Passo já vencido: ouro apagado. Diz "isto está feito" sem competir com o
   passo atual, que é onde o olho tem de cair. */
.passo.feito { color: var(--texto-fraco); }
.passo.feito i { background: var(--ouro); opacity: .4; }

/* ── Privacidade (LGPD) — <details> nativo, sem JavaScript ──────── */
.privacidade { margin-top: 18px; border-top: 1px solid var(--borda); padding-top: 14px; }
.privacidade summary {
  font-size: 13px; color: var(--texto-fraco); cursor: pointer;
  list-style: none; display: flex; align-items: center; gap: 7px;
  transition: color var(--transicao);
}
.privacidade summary::-webkit-details-marker { display: none; }
.privacidade summary::before {
  content: ""; width: 6px; height: 6px; flex: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--transicao);
}
.privacidade[open] summary::before { transform: rotate(45deg); }
.privacidade summary:hover { color: var(--texto); }
/* 44px de toque (medido em 30/09: 21). No celular é o cliente que toca. */
.privacidade summary { min-height: 44px; }
.privacidade p { font-size: 13px; color: var(--texto-fraco); margin: 10px 0 0; line-height: 1.6; }

/* ── Rodapé ─────────────────────────────────────────────────────── */
.rodape {
  text-align: center; font-size: 12px; color: var(--texto-fraco);
  padding: 8px 16px 32px;
}

/* ── Cartão ─────────────────────────────────────────────────────── */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  padding: 20px;
}
h1 { font-size: 21px; font-weight: 500; margin: 0 0 6px; letter-spacing: -.01em; }
.sub { color: var(--texto-fraco); font-size: 14px; margin: 0 0 18px; }

/* ── Os 3 modos de entrada ──────────────────────────────────────────
   Foto / Descrição / Foto + descrição — os mesmos do portal Streamlit. É um
   grupo de rádio de verdade por baixo (o teclado e o leitor de tela navegam
   nele normalmente); o CSS só troca a aparência por um controle segmentado. */
.modos {
  display: flex;
  gap: 3px;
  margin: 16px 0 14px;
  padding: 3px;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.modo { flex: 1; min-width: 0; position: relative; display: flex; }
.modo input {
  position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer;
}
/* Centralizado nos DOIS eixos. "Foto + descrição" quebra em duas linhas e é
   ela que define a altura dos três; sem o alinhamento vertical, "Foto" e
   "Descrição" ficavam grudados no topo enquanto a vizinha ocupava o bloco
   inteiro — desalinhamento que salta aos olhos no celular. */
.modo span {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 4px;
  border-radius: 7px;
  font-size: 12.5px;
  line-height: 1.25;
  text-align: center;
  color: var(--texto-fraco);
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}
.modo input:checked + span {
  background: var(--superficie);
  color: var(--texto);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .09);
}
.modo input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 1px; }

.titulo-bloco { font-size: 16px; font-weight: 500; margin: 0 0 4px; letter-spacing: -.01em; }
.entrada .sub { margin-bottom: 0; }

/* ── Área de envio da foto ──────────────────────────────────────── */
.envio { position: relative; }
.envio input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.alvo {
  border: 2px dashed var(--borda-forte);
  border-radius: var(--raio);
  padding: 30px 16px;
  text-align: center;
  color: var(--texto-fraco);
  font-size: 14px;
  transition: border-color var(--transicao), color var(--transicao), background var(--transicao);
}
.envio:hover .alvo, .envio input:focus-visible + .alvo {
  border-color: var(--ouro);
  color: var(--texto);
}
.envio.tem-foto .alvo { border-style: solid; border-color: var(--ouro); }
.alvo .icone { display: block; margin: 0 auto 6px; opacity: .75; }
.previa { max-width: 100%; max-height: 200px; border-radius: var(--raio); display: block; margin: 0 auto 8px; }

label.campo { display: block; font-size: 13px; color: var(--texto-fraco); margin: 18px 0 6px; }

/* ── Campos de texto do passo 2 ─────────────────────────────────────
   16px no mínimo: abaixo disso o Safari do iPhone DÁ ZOOM ao focar o campo,
   e a tela inteira sai do lugar no meio do preenchimento. */
.entrada-texto {
  width: 100%;
  background: var(--fundo); color: var(--texto);
  border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 11px 12px; font: inherit; font-size: 16px;
  transition: border-color var(--transicao);
}
.entrada-texto:focus { outline: none; border-color: var(--azul); }
select.entrada-texto { appearance: none; padding-right: 30px; }

/* Duas colunas que viram uma só quando não cabem. */
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 380px) { .dupla { grid-template-columns: 1fr; gap: 0; } }

.titulo-secao {
  font-size: 13px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .04em; color: var(--texto-fraco);
  margin: 26px 0 0; padding-top: 16px; border-top: 1px solid var(--borda);
}
.dica { margin: 6px 0 0; font-size: 12.5px; color: var(--texto-fraco); }

/* ── O cliente que volta ────────────────────────────────────────────
   Discreto de propósito: é uma boa notícia, não um alerta. */
.reencontro {
  margin-top: 18px; padding: 14px;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.reencontro .saudacao { margin: 0; font-size: 15px; }
.reencontro .dica { margin-top: 2px; }

.lista-imoveis { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.imovel { position: relative; display: flex; }
.imovel input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.imovel span {
  flex: 1; display: flex; flex-direction: column; gap: 1px;
  padding: 11px 13px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  font-size: 14.5px;
  cursor: pointer;
  transition: border-color var(--transicao);
}
.imovel span small { font-size: 12.5px; color: var(--texto-fraco); }
.imovel input:checked + span { border-color: var(--ouro); box-shadow: inset 0 0 0 1px var(--ouro); }
.imovel input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 2px; }
/* 104px, e não 76px: o texto de exemplo tem três linhas na largura de um
   celular, e a última ficava cortada pela metade — o que faz o campo parecer
   quebrado logo na primeira tela do fluxo. */
textarea {
  width: 100%; min-height: 104px; resize: vertical;
  background: var(--fundo); color: var(--texto);
  border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 10px 12px; font: inherit; font-size: 15px;
  transition: border-color var(--transicao);
}
textarea:focus { outline: none; border-color: var(--azul); }

/* ── Botões ─────────────────────────────────────────────────────────
   O primário nasce vazado em OURO — borda e escrita — e só se preenche no
   hover, quando o texto inverte para o fundo. Assim a marca aparece sem que
   uma área dourada permanente brigue com o laranja de "atenção". */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 13px 20px; margin-top: 20px;
  border-radius: var(--raio);
  font: inherit; font-size: 15px; font-weight: 500;
  cursor: pointer;
  background: transparent;
  border: 1.5px solid var(--ouro);
  color: var(--ouro);
  transition: background var(--transicao), color var(--transicao),
              transform var(--transicao), border-color var(--transicao);
}
.btn:hover:not(:disabled) { background: var(--ouro); color: var(--ouro-contra); transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.99); }
.btn:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.btn:disabled { opacity: .5; cursor: progress; }

/* Secundário: fica no azul, para nunca competir com a ação principal. */
.btn.secundario { border-color: var(--azul-borda); color: var(--azul); }
.btn.secundario:hover { background: var(--azul-fundo); color: var(--azul); transform: none; }

/* Terciário: "Adicionar 2ª praga" e "Remover". É uma ação secundária de
   verdade — não pode ter o peso de um botão, senão disputa com "Analisar". */
.btn-texto {
  display: inline-block;
  margin-top: 14px;
  padding: 6px 0;
  background: none; border: none;
  font: inherit; font-size: 13.5px;
  color: var(--azul);
  cursor: pointer;
  transition: color var(--transicao);
}
.btn-texto:hover { text-decoration: underline; }
.btn-texto:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; border-radius: 4px; }
/* "Adicionar 2ª praga" (portal) e "Limpar assinatura" (app): 34px medidos em
   30/09. Mais folga de toque, e a distância até o de cima quase igual. */
#abrir-2a, #limpar-assinatura { min-height: 44px; padding: 12px 0; margin-top: 6px; }

/* ── Caixa da 2ª praga ──────────────────────────────────────────────
   Recuada de propósito: fica claro que é um anexo da tela, e não um segundo
   formulário concorrente. */
#caixa-2a {
  margin-top: 14px;
  padding: 16px;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
#caixa-2a .modos { background: var(--superficie); }
#caixa-2a .modo input:checked + span { background: var(--fundo); }

/* Aviso informativo (azul) — o "no máximo 2 pragas" e o recado de quando a
   segunda praga não sai. É informação, não erro. */
.aviso {
  margin: 0 0 14px;
  padding: 10px 12px;
  background: var(--azul-fundo);
  border: 1px solid var(--azul-borda);
  border-radius: var(--raio);
  color: var(--azul);
  font-size: 13px;
  line-height: 1.5;
}
/* O aviso de cidade fora da área carrega um atalho para o WhatsApp. Dentro de
   uma caixa de 10px, o botão não precisa dos 20px de respiro que ele tem solto
   no meio da página. */
.aviso .btn { margin-top: 10px; }

/* Nota discreta antes do botão: o diagnóstico é preliminar (CLAUDE.md §7). */
.nota { margin: 18px 0 0; font-size: 12.5px; color: var(--texto-fraco); line-height: 1.5; }

/* Recusa de campo. Texto, não caixa: ela aparece colada no bloco que errou. */
.erro-campo { margin: 10px 0 0; font-size: 13px; color: var(--vermelho-txt); }

/* ── Resultado ──────────────────────────────────────────────────── */
.resultado { margin-top: 18px; }
.praga { font-size: 20px; font-weight: 500; margin: 0; letter-spacing: -.01em; }
.linha-praga { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }

.selo {
  font-size: 12px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid; white-space: nowrap;
}
/* Dois níveis, não cinco: o cliente lê "Baixa"/"Alta infestação". */
.selo.grau-baixo { color: var(--verde-txt);   border-color: var(--verde-borda);   background: var(--verde-fundo); }
.selo.grau-alto  { color: var(--vermelho-txt);border-color: var(--vermelho-borda);background: var(--vermelho-fundo); }

.bloco { margin-top: 14px; }
.bloco .rotulo { font-size: 12px; color: var(--texto-fraco); margin-bottom: 3px; }
.bloco .corpo { font-size: 15px; }

/* A segunda praga no resultado: mesma forma da primeira, separada por uma
   linha. Sem card à parte — as duas viram um serviço só. */
.segunda-praga { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--borda); }
.rotulo-praga { flex-basis: 100%; font-size: 12px; color: var(--texto-fraco); margin-bottom: -6px; }

/* Zona de IA — violeta DISCRETO: fundo quase imperceptível e um ponto na
   etiqueta. O sinal está lá para quem procura, sem gritar na tela. */
.ia {
  margin-top: 18px;
  background: var(--violeta-fundo);
  border: 1px solid var(--violeta-borda);
  border-radius: var(--raio);
  padding: 12px 14px;
}
.ia .etiqueta {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--violeta-txt); margin-bottom: 4px;
}
.ia .etiqueta::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--violeta); flex: none;
}
.ia .corpo { font-size: 13.5px; color: var(--texto-fraco); line-height: 1.55; }

/* ── Estimativa (resultado incerto) ─────────────────────────────────
   Laranja é "atenção" na paleta, e é exatamente o que este bloco é: uma
   resposta útil que NÃO é um diagnóstico. O verde daria confiança que não
   existe; o vermelho assustaria por um resultado que ainda pode estar certo. */
.estimativa {
  background: var(--laranja-fundo);
  border: 1px solid var(--laranja-borda);
  border-radius: var(--raio);
  padding: 14px 16px;
}
.estimativa .rotulo { font-size: 12px; color: var(--laranja-txt); margin-bottom: 6px; }
.estimativa p { margin: 0 0 8px; font-size: 15px; }
.estimativa .tratamento { color: var(--texto); }
.estimativa .ressalva { margin: 0; font-size: 13.5px; color: var(--laranja-txt); line-height: 1.5; }

.pergunta { margin: 22px 0 0; font-size: 15px; font-weight: 500; }

/* ── O preço (passo 3) ──────────────────────────────────────────────
   O valor é a informação mais importante da tela, então ganha tamanho — e
   NADA de cor de sinal: verde diria "aprovado", vermelho diria "caro". Um
   preço é um fato, não um alerta. */
.preco-caixa {
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 16px;
  text-align: center;
}
.preco-caixa .rotulo { font-size: 12px; color: var(--texto-fraco); }
.preco-caixa .preco {
  font-size: 30px; font-weight: 500; letter-spacing: -.02em;
  margin-top: 2px; line-height: 1.2;
}
.preco-caixa .itens {
  list-style: none; margin: 14px 0 0; padding: 12px 0 0;
  border-top: 1px solid var(--borda);
  font-size: 13.5px; color: var(--texto-fraco); text-align: left;
}
.preco-caixa .itens li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }

.corpo-fraco { color: var(--texto-fraco); font-size: 13.5px; }

/* ── Grades de horário e data (passo 4) ─────────────────────────────
   Envolve em vez de rolar na horizontal: no celular, grade que rola some com
   metade das opções sem avisar que elas existem. */
.grade { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.ficha {
  flex: 1 1 82px;
  min-height: 46px;              /* alvo de toque confortável */
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 8px 6px;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  color: var(--texto);
  font: inherit; font-size: 14px;
  cursor: pointer;
  transition: border-color var(--transicao), background var(--transicao);
}
.ficha:hover { border-color: var(--ouro); }
.ficha:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.ficha.escolhida {
  border-color: var(--ouro);
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--ouro);
}
/* Sugestão: dois andares — o dia em cima, o horário que cabe embaixo. */
.ficha.sugestao small { font-size: 11.5px; color: var(--texto-fraco); margin-top: 1px; }
/* Tracejado AZUL. Só a mudança de estilo da borda não se via no celular — o
   tracejado na cor da borda comum se perdia no meio da grade, e o botão que
   troca dia E horário de uma vez é justamente o que precisa se anunciar. */
.ficha.sugestao { border-style: dashed; border-color: var(--azul); }
.ficha.discreta { color: var(--texto-fraco); font-size: 13px; border-style: dashed; }

/* A legenda do botão de dois andares. Ela existe porque ele não se explica
   sozinho — sem ela o cliente lê "13/08 08:00" como se o dia só tivesse
   aquele horário. */
.legenda {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; font-size: 12.5px; color: var(--texto-fraco);
}
.legenda .amostra {
  flex: none; width: 62px; min-height: 40px; pointer-events: none;
  font-size: 12px;
}

.resumo {
  margin: 16px 0 0; padding: 10px 12px;
  background: var(--verde-fundo);
  border: 1px solid var(--verde-borda);
  border-radius: var(--raio);
  color: var(--verde-txt);
  font-size: 14px;
}

.titulo-bloco.espacado { margin-top: 26px; }

/* Confirmação (passo 5) */
.preco-caixa .quando { font-size: 19px; font-weight: 500; margin-top: 2px; }
.preco-caixa .horario { font-size: 14px; color: var(--texto-fraco); margin-top: 2px; }

/* ── A proposta comercial (passo 5) ─────────────────────────────────
   Duas colunas de rótulo+valor. No celular estreito vira uma coluna: seis
   pares espremidos lado a lado ficam ilegíveis justo no aparelho onde o
   cliente vai ler. */
.proposta {
  margin-top: 20px; padding: 14px 16px;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.linha-proposta {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; flex-wrap: wrap;
  padding-bottom: 10px; margin-bottom: 10px;
  border-bottom: 1px solid var(--borda);
}
.linha-proposta .numero { font-size: 14px; font-weight: 500; }
.linha-proposta .validade { font-size: 12.5px; color: var(--texto-fraco); }

.grade-proposta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
@media (max-width: 380px) { .grade-proposta { grid-template-columns: 1fr; } }
.grade-proposta span { display: flex; flex-direction: column; font-size: 14px; }
.grade-proposta em {
  font-style: normal; font-size: 11.5px; color: var(--texto-fraco);
  text-transform: uppercase; letter-spacing: .04em;
}

/* O atalho do WhatsApp é um link, mas veste o mesmo botão — senão ele
   pareceria uma opção de segunda classe ao lado das outras duas. */
a.btn { text-decoration: none; }

/* ── Estados de espera e erro ───────────────────────────────────── */
.pensando { text-align: center; padding: 30px 10px; color: var(--texto-fraco); font-size: 14px; }
.pensando .pulso {
  width: 30px; height: 30px; margin: 0 auto 12px;
  border-radius: 50%; background: var(--violeta);
  animation: pulsar 1.4s ease-in-out infinite;
}
@keyframes pulsar { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.82); } }

.erro {
  background: var(--vermelho-fundo);
  border: 1px solid var(--vermelho-borda);
  color: var(--vermelho-txt);
  border-radius: var(--raio);
  padding: 12px 14px; font-size: 14px;
}

.entra { animation: entrar .28s ease both; }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   APP DO TÉCNICO
   Mesma linguagem do portal — o que muda é o contexto de uso: uma mão
   só, na rua, sol na tela, às vezes de luva. Daí alvos de toque
   maiores e menos texto por bloco.
   ═══════════════════════════════════════════════════════════════════ */

/* A barra do técnico carrega uma ação à direita (Sair), então o topo
   distribui os dois lados. O `.topo` do portal não precisava disso. */
/* Barra do técnico: logo CENTRALIZADA, com a ação por cima.
   `absolute` e não uma coluna do flex — assim "Sair" e "← Visitas", que têm
   larguras diferentes, não deslocam a logo do centro de uma tela para outra. */
.topo { justify-content: center; position: relative; }
.topo-marca { text-align: center; line-height: 0; }
.topo-marca .marca-sub { line-height: 1.3; margin-top: 2px; }
.topo-acao {
  position: absolute; right: 16px; top: 50%;
  transform: translateY(-50%);
  margin: 0;
}
.topo-acao .btn-texto { margin: 0; }

.tec-titulo {
  margin: 4px 0 18px;
  font-size: 22px; font-weight: 600; letter-spacing: -.01em;
}

.tec-form { display: flex; flex-direction: column; gap: 14px; }

/* Campo rotulado. O rótulo fica ACIMA, não como placeholder: placeholder
   some quando se começa a digitar, e quem está conferindo um código na
   rua precisa continuar vendo o que o campo pede. */
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo > span { font-size: 13.5px; color: var(--texto-fraco); }
.campo input, .campo select {
  /* `max-width` e `min-width` pelo mesmo motivo da navegação de dia: o
     `input[type=date]` do celular tem largura mínima própria e, sem o freio,
     o campo de Vencimento vazava para fora da tela quando aparecia. */
  width: 100%; max-width: 100%; min-width: 0;
  /* 46px de altura: alvo de toque confortável com o polegar, acima do
     mínimo de 44px que as diretrizes de acessibilidade pedem. */
  min-height: 46px;
  background: var(--fundo); color: var(--texto);
  border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 10px 12px; font: inherit; font-size: 16px;
  transition: border-color var(--transicao);
}
/* 16px no font-size acima não é estética: abaixo disso o Safari do iPhone
   dá zoom automático ao focar o campo, e a tela "pula" na mão do técnico. */
.campo input:focus, .campo select:focus { outline: none; border-color: var(--azul); }

.tec-dica {
  margin: 16px 0 0;
  font-size: 12.5px; color: var(--texto-fraco); line-height: 1.5;
  text-align: center;
}

/* Variantes do aviso. O `.aviso` sozinho segue azul (informativo), como
   no portal; estas duas só trocam as cores. */
.aviso-erro {
  background: var(--vermelho-fundo);
  border-color: var(--vermelho-borda);
  color: var(--vermelho-txt);
}
.aviso-atencao {
  background: var(--laranja-fundo);
  border-color: var(--laranja-borda);
  color: var(--laranja-txt);
}

/* ── Navegação de dia ────────────────────────────────────────────── */
.dia-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
/* `min-width: 0` não é enfeite: item de flex não encolhe abaixo do conteúdo por
   padrão, e `input[type=date]` no celular tem uma largura mínima própria (o
   controle nativo de calendário). Sem isto o campo estourava o espaço e a seta
   da direita ficava POR CIMA da data — relatado pelo dono em campo, 16/08. */
.dia-form { flex: 1; min-width: 0; margin: 0; }
.dia-form input {
  width: 100%; max-width: 100%; min-width: 0; min-height: 46px;
  background: var(--fundo); color: var(--texto);
  border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 10px 12px; font: inherit; font-size: 16px;
  text-align: center;
}
/* Setas grandes: são o alvo mais tocado da tela, e o técnico usa uma mão só. */
.dia-seta {
  display: flex; align-items: center; justify-content: center;
  width: 46px; min-height: 46px; flex: none;
  background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio);
  color: var(--texto); text-decoration: none;
  font-size: 22px; line-height: 1;
}
.dia-seta:hover { border-color: var(--ouro); color: var(--ouro); }
.dia-hoje { margin: 0 0 12px; font-size: 13px; text-align: center; }
.dia-hoje a { color: var(--azul); }
.dia-resumo { margin: 12px 0 14px; font-size: 13px; color: var(--texto-fraco); }

/* ── Card de visita ──────────────────────────────────────────────── */
.visita {
  background: var(--superficie);
  border: 1px solid var(--borda);
  /* A faixa lateral é o estado da visita lido de relance, sem ler o selo. */
  border-left: 4px solid var(--verde);
  border-radius: var(--raio-g);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.visita.em-andamento { border-left-color: var(--laranja); }
/* Concluída fica apagada de propósito: já saiu da fila de trabalho dele. */
.visita.concluido { border-left-color: var(--borda-forte); opacity: .72; }

.visita-topo {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 10px; margin-bottom: 8px; font-size: 15px;
}
/* Rótulo escrito em vez de emoji (premissa do app). Duas colunas: o rótulo
   numa largura fixa para os valores alinharem e a leitura descer em coluna —
   com emoji o olho tinha de decifrar cada ícone antes de achar o dado. */
.visita-corpo { margin: 0; font-size: 13.5px; line-height: 1.55; }
.visita-corpo .linha {
  display: grid; grid-template-columns: 78px 1fr; gap: 8px;
  padding: 2px 0;
}
.visita-corpo dt {
  color: var(--texto-fraco);
  font-weight: 600; font-size: 12px;
  padding-top: 1px;
}
.visita-corpo dd { margin: 0; color: var(--texto); }
.visita-corpo a { color: var(--azul); }
.visita-corpo small { font-size: 12px; color: var(--texto-fraco); }
.visita .grau { color: var(--laranja-txt); font-weight: 600; }
.visita .visita-tec {
  margin: 10px 0 0; padding: 7px 10px;
  background: var(--laranja-fundo);
  border: 1px solid var(--laranja-borda);
  border-radius: var(--raio);
  color: var(--laranja-txt);
  font-size: 12.5px; font-weight: 600;
}

/* Em tela estreita o rótulo sobe e o valor desce: 78px de coluna deixariam
   endereço e observação com três palavras por linha. */
@media (max-width: 359px) {
  .visita-corpo .linha,
  .dados .linha { grid-template-columns: 1fr; gap: 0; }
  .visita-corpo dt,
  .dados dt { padding-top: 4px; }
}

/* ── Ordem de Serviço ────────────────────────────────────────────── */
/* Blocos empilhados em vez de uma página corrida: na rua ele procura UMA
   informação por vez (endereço agora, produto depois), e o título do bloco
   é o que o olho usa para saltar. */
.bloco {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.bloco-titulo {
  margin: 0 0 10px;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-fraco);
}
.bloco-dica { margin: 0 0 10px; font-size: 12.5px; color: var(--texto-fraco); line-height: 1.5; }
.bloco-equipe { border-left: 3px solid var(--violeta); }
.cliente-nome { margin: 0 0 10px; font-size: 18px; font-weight: 600; }
.vazio { margin: 0; font-size: 13.5px; color: var(--texto-fraco); }

/* Mesma grade de rótulo|valor do card da lista. */
.dados { margin: 0; font-size: 13.5px; line-height: 1.55; }
.dados .linha { display: grid; grid-template-columns: 78px 1fr; gap: 8px; padding: 2px 0; }
.dados dt { color: var(--texto-fraco); font-weight: 600; font-size: 12px; padding-top: 1px; }
.dados dd { margin: 0; color: var(--texto); }
.dados dd a { color: var(--azul); }
.dados small { color: var(--texto-fraco); font-size: 12px; }

.servicos { margin: 0; padding: 0; list-style: none; font-size: 14px; }
.servicos li { padding: 4px 0; }
.servicos .grau { color: var(--laranja-txt); font-weight: 600; }
.tratamento {
  margin-top: 3px;
  font-size: 12.5px; line-height: 1.5;
  color: var(--texto-fraco);
}

.fachada { margin: 12px 0 0; }
.fachada img {
  width: 100%; max-width: 260px;
  border-radius: var(--raio); border: 1px solid var(--borda);
  display: block;
}
.fachada figcaption { margin-top: 4px; font-size: 12px; color: var(--texto-fraco); }

/* Galeria: três colunas no celular. A miniatura é o que carrega; tocar abre a
   foto inteira em aba própria. */
.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.foto { display: block; text-decoration: none; }
.foto img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--raio); border: 1px solid var(--borda);
  display: block;
}
.foto span { display: block; margin-top: 3px; font-size: 11px; color: var(--texto-fraco); }
.foto:hover img { border-color: var(--ouro); }

.hist {
  padding: 10px 0;
  border-top: 1px solid var(--borda);
}
.hist:first-of-type { border-top: none; padding-top: 0; }
.hist-topo { font-size: 13.5px; margin-bottom: 4px; }

.checkin-ok {
  margin: 0 0 8px; padding: 9px 12px;
  background: var(--verde-fundo);
  border: 1px solid var(--verde-borda);
  border-radius: var(--raio);
  color: var(--verde-txt); font-size: 13.5px;
}

/* ── Ficha de execução ───────────────────────────────────────────── */
.dobra {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  padding: 12px 16px;
  margin-bottom: 12px;
}
.dobra > summary {
  cursor: pointer; font-size: 14px; font-weight: 600;
  list-style: none;
  /* O toque vale no cartão INTEIRO, e não só na linha de texto (medido em
     30/09: 22px de altura, no app que o técnico usa de luva). A margem
     negativa devolve o mesmo desenho: o cartão não muda de tamanho. */
  margin: -12px -16px -10px; padding: 12px 16px 10px;
}
.dobra > summary::before { content: "+ "; color: var(--ouro); font-weight: 700; }
.dobra[open] > summary::before { content: "− "; }
.dobra > summary::-webkit-details-marker { display: none; }
.dobra > *:not(summary) { margin-top: 10px; }

/* "O cliente já pagou?" — pergunta diferente das formas de pagamento, então
   aparência diferente. Com o mesmo visual dos rádios acima, o técnico lia como
   se fosse mais uma forma. */
.recebido {
  margin-top: 12px;
  padding: 4px 12px;
  background: var(--verde-fundo);
  border: 1px solid var(--verde-borda);
  border-radius: var(--raio);
}
.recebido .marca-item { align-items: flex-start; }
.recebido small { color: var(--texto-fraco); font-size: 12px; line-height: 1.4; }

/* Confirmação depois de fechar uma OS ou uma visita. Aparece no topo da lista,
   onde o técnico cai depois do toque — no 4G da rua, silêncio depois de um
   toque é o que faz alguém tocar de novo. */
.feito {
  margin: 0 0 12px;
  padding: 11px 14px;
  border-radius: var(--raio);
  font-size: 14px; font-weight: 600;
}
.feito-ok {
  background: var(--verde-fundo);
  border: 1px solid var(--verde-borda);
  color: var(--verde-txt);
}
/* Laranja, não verde: fechou, mas ainda depende do gestor. */
.feito-espera {
  background: var(--laranja-fundo);
  border: 1px solid var(--laranja-borda);
  color: var(--laranja-txt);
}

/* Campo de busca das listas longas. A lupa é um SVG embutido, não emoji: o app
   do técnico não usa emoji (premissa de 15/08), e aqui não é rótulo decorativo
   — é a marca que faz o campo ser lido como busca sem precisar de legenda.
   O desenho vai duas vezes porque o `stroke` de um SVG em `background-image`
   não herda `currentColor`: uma versão para o tema claro, outra para o escuro. */
.filtro {
  width: 100%;
  min-height: 44px;                 /* alvo de toque, igual aos outros campos */
  margin-bottom: 10px;
  padding: 9px 12px 9px 38px;
  background: var(--fundo) no-repeat 12px center / 16px 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666F76' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
  color: var(--texto);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  font: inherit; font-size: 16px;   /* abaixo de 16px o iPhone dá zoom ao focar */
  -webkit-appearance: none;         /* mata o campo cru do Safari/Chrome */
  appearance: none;
}
.filtro::placeholder { color: var(--texto-fraco); }
.filtro:focus { outline: none; border-color: var(--azul); }
/* O X de limpar do WebKit é minúsculo e some no tema escuro; o campo já limpa
   sozinho ao apagar o texto. */
.filtro::-webkit-search-cancel-button { -webkit-appearance: none; }

@media (prefers-color-scheme: dark) {
  .filtro {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B959D' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
  }
}

.praga-extra {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 0;
}
.praga-extra .marca-item { flex: 1; margin: 0; }
.praga-extra select {
  flex: none; width: 92px; min-height: 40px;
  background: var(--fundo); color: var(--texto);
  border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 6px 8px; font: inherit; font-size: 15px;
}

/* Alvo de toque inteiro na linha, não só na caixinha: de luva, acertar um
   quadradinho de 13px é o que faz o técnico xingar o app. */
.marca-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 2px; margin: 0;
  font-size: 14px; cursor: pointer;
}
.marca-item input { width: 20px; height: 20px; flex: none; accent-color: var(--ouro); }
.marcas { display: flex; flex-direction: column; }

.grupo { border: none; padding: 0; margin: 12px 0 0; }
.grupo legend {
  padding: 0; margin-bottom: 2px;
  font-size: 12px; font-weight: 600; color: var(--texto-fraco);
}

.produto {
  display: grid; grid-template-columns: 1fr 96px; gap: 10px;
  align-items: center;
  padding: 7px 0;
  border-top: 1px solid var(--borda);
}
.produto:first-of-type { border-top: none; }
.produto-nome { font-size: 14px; line-height: 1.35; }
.produto-nome small { display: block; font-size: 11.5px; color: var(--texto-fraco); }
.produto input {
  width: 100%; min-height: 44px;
  background: var(--fundo); color: var(--texto);
  border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 8px 10px; font: inherit; font-size: 16px; text-align: right;
}
.produto input:focus { outline: none; border-color: var(--azul); }

.bloco textarea, .bloco input[type=file] {
  width: 100%;
  background: var(--fundo); color: var(--texto);
  border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 10px 12px; font: inherit; font-size: 16px;
}
.bloco textarea { min-height: 96px; resize: vertical; }

.previa { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.previa img {
  width: 72px; height: 72px; object-fit: cover;
  border-radius: var(--raio); border: 1px solid var(--borda);
}

/* O quadro é BRANCO sempre, inclusive no tema escuro: assinatura é tinta
   preta sobre papel, e o cliente precisa reconhecer isso como um papel. */
.quadro {
  background: #FFFFFF;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  padding: 6px;
}
.quadro canvas {
  display: block; width: 100%; height: 220px;
  touch-action: none;      /* sem isto, arrastar o dedo rola a página */
  cursor: crosshair;
}

/* ── Resumo da OS concluída ──────────────────────────────────────── */
/* Produto à esquerda, quantidade à direita: a coluna de números alinhada é o
   que ele confere de relance ("usei 500 ou 50?"). */
.itens { margin: 0; padding: 0; list-style: none; font-size: 14px; }
.itens li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0;
  border-top: 1px solid var(--borda);
}
.itens li:first-child { border-top: none; padding-top: 0; }
.itens b { flex: none; }

.dados-resumo { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--borda); }

/* `pre-line` preserva as quebras que o técnico digitou: ele escreve em linhas
   ("cozinha: gel / quintal: pulverização") e um parágrafo corrido perderia isso. */
.observacao {
  margin: 0;
  font-size: 13.5px; line-height: 1.6;
  white-space: pre-line;
}

/* Assinatura arquivada: quadro branco como o da coleta — é tinta preta, e no
   tema escuro sumiria contra a superfície. */
.quadro-assinado { padding: 8px; }
.quadro-assinado img { display: block; width: 100%; max-width: 320px; }

.hist-estado {
  margin-left: 6px;
  font-size: 11px; font-weight: 600;
  color: var(--texto-fraco);
}

/* Saída de emergência ("não consegui executar hoje"). Discreta de propósito:
   é o caminho raro, não pode competir com a ficha. */
.escape { margin: 0 0 12px; text-align: center; font-size: 13px; }
.escape a { color: var(--texto-fraco); }
.escape a:hover { color: var(--laranja-txt); }

/* Ritual da visita: miniatura ao lado da caixa "na proposta". */
.marca-item .mini {
  width: 40px; height: 40px; object-fit: cover;
  border-radius: 6px; border: 1px solid var(--borda);
}
#bloco-agendar select, .campo select { cursor: pointer; }

/* ── A agenda limpa do ritual (Couto, 25/09) ─────────────────────────
   "Quando o comercial está no cliente e quer agendar, mostrar a agenda limpa
   no celular, e ele toca direto no horário livre." Os dias numa fileira que
   rola para o LADO (a página não cresce com 45 dias), e os horários do dia
   escolhido em botões de 48px: com o cliente olhando, é um toque, não quatro. */
.ritual-dupla {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  align-items: end;
}
.ritual-estimativa {
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--raio);
  background: var(--fundo);
  font-size: 12px; line-height: 1.35;
  color: var(--texto-fraco);
}
.ritual-estimativa b { display: block; font-size: 16px; color: var(--texto); }
.ritual-estimativa small { display: block; font-size: 11px; }

.marcas-lado { flex-direction: row; flex-wrap: wrap; column-gap: 18px; }

.agenda-limpa { margin-top: 12px; }
.agenda-limpa .bloco-dica { margin: 0; }
.agenda-dias {
  display: flex; gap: 6px;
  overflow-x: auto;
  /* O rolar para o lado não pode puxar a página junto no celular. */
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: 6px;
}
.agenda-dia {
  flex: none;
  scroll-snap-align: start;
  min-width: 78px; min-height: 48px;
  padding: 6px 10px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--fundo);
  color: var(--texto);
  font: inherit; text-align: center;
  cursor: pointer;
}
.agenda-dia b { display: block; font-size: 13.5px; }
.agenda-dia small { display: block; font-size: 11px; color: var(--texto-fraco); }
.agenda-dia[aria-selected="true"] {
  border-color: var(--ouro);
  background: var(--ouro);
  color: var(--ouro-contra);
}
.agenda-dia[aria-selected="true"] small { color: inherit; opacity: .8; }

.agenda-slots { margin-top: 8px; }
.agenda-grade {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 6px;
}
/* `position: relative` segura o rádio escondido DENTRO do botão: sem isso ele
   se posiciona pela página, e tocar num horário faz o navegador rolar até o
   rádio, longe dali. Foi o "fundo preto infinito" do painel em 25/09. */
.agenda-slot {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 48px;
  padding: 6px 10px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  font-size: 14.5px; font-weight: 600; text-align: center;
  cursor: pointer;
}
.agenda-slot input {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.agenda-slot small { font-size: 11px; font-weight: 400; color: var(--texto-fraco); }
.agenda-slot:has(input:focus-visible) { outline: 2px solid var(--azul); outline-offset: 2px; }
.agenda-slot:has(input:checked) {
  border-color: var(--azul);
  background: var(--azul-fundo);
  color: var(--azul);
}
/* Só aparece com "não considerar o deslocamento": dá para escolher, mas não
   passa por um horário comum. */
.agenda-slot.apertado { border-style: dashed; border-color: var(--laranja-borda); }
.agenda-slot.apertado small { color: var(--laranja-txt); }

.ritual-escolhido {
  margin: 0 0 10px;
  font-size: 13.5px; font-weight: 600;
  color: var(--azul);
}

/* O botão do card é um link: menos margem que o botão solto de formulário. */
.visita .btn { margin-top: 12px; text-decoration: none; }

/* ── Selos de estado ─────────────────────────────────────────────── */
/* ATENÇÃO ao seletor: estas regras valem só para o selo de ESTADO (verde,
   laranja, cinza, vermelho), do app do técnico e do painel do gestor.

   Já valeram para `.selo` puro, e isso quebrou o portal em silêncio: o selo de
   grau de infestação que o CLIENTE lê nasceu antes (13/08), a 12px em caixa
   normal, e ao chegar esta regra — escrita dois dias depois para o app do
   técnico — ele passou a sair em CAIXA ALTA a 10,5px, sem ninguém decidir
   isso. Ficou assim em produção até 19/08. Selo novo entra somando uma classe
   `selo-*`, nunca mexendo no `.selo` sozinho. */
.selo-verde, .selo-laranja, .selo-cinza, .selo-vermelho {
  flex: none;
  padding: 3px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  border: 1px solid transparent;
}
.selo-verde   { background: var(--verde-fundo);   color: var(--verde-txt);   border-color: var(--verde-borda); }
.selo-laranja { background: var(--laranja-fundo); color: var(--laranja-txt); border-color: var(--laranja-borda); }
.selo-cinza   { background: var(--fundo);         color: var(--texto-fraco); border-color: var(--borda); }
/* Vermelho entrou com a visita ATRASADA no painel do gestor: sem ele, atraso
   caía no cinza e ficava com a mesma cara de "ainda vai acontecer". */
.selo-vermelho{ background: var(--vermelho-fundo);color: var(--vermelho-txt);border-color: var(--vermelho-borda); }

/* ── App do técnico: as abas da OS e os porta-iscas (09/10/2026) ──────────
   As abas só existem na OS de imóvel com porta-iscas. Esconder é por CLASSE,
   e não pelo atributo `hidden`: o painel de marcação usa `hidden` para abrir
   e fechar, e trocar de aba o abriria sozinho. */
.fora-da-aba { display: none !important; }

/* A barra de baixo, FIXA no pé da tela, como a de um aplicativo. Fixa e não
   "grudenta": numa OS curta, a grudenta ficava logo abaixo do conteúdo, com
   um vazio embaixo (medido na demo, antes do check-in). A página reserva o
   espaço dela no fim, para o último bloco não ficar escondido atrás. */
.abas-os {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  width: 100%; max-width: 560px; margin: 0 auto;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
  background: var(--barra);
  border-top: 1px solid var(--borda);
}
.envelope:has(.abas-os) { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.aba-os {
  min-height: 52px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  border-top: 2px solid transparent;
  font-size: 12.5px; font-weight: 600;
  color: var(--texto-fraco); text-decoration: none; text-align: center;
}
.aba-os small { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.aba-os.ativa { color: var(--ouro); border-top-color: var(--ouro); }

.pi-bolinha {
  display: inline-block; flex: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--cor, #888);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
}
.pi-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.pi-progresso { margin: 0; font-size: 14px; }
.pi-progresso b { font-variant-numeric: tabular-nums; }
/* O `.btn` nasce com largura cheia e margem em cima (é o botão de formulário
   de uma coluna só): aqui ele é um botão ao lado do contador. */
.pi-topo .pi-btn-mapa {
  width: auto; margin-top: 0;
  min-height: 44px; padding: 0 18px;
  display: inline-flex; align-items: center;
}
.pi-pendentes {
  margin: 10px 0 0; padding: 8px 10px;
  border: 1px solid var(--laranja-borda); border-radius: var(--raio);
  background: var(--laranja-fundo); color: var(--laranja-txt);
  font-size: 12.5px; line-height: 1.45;
}

/* Uma fileira que rola de lado: quebrada em linhas, ela empurrava a lista
   para baixo da dobra no celular. */
.pi-filtros {
  display: flex; flex-wrap: nowrap; gap: 8px; margin: 12px 0 4px;
  overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px;
}
.pi-filtro {
  flex: none; white-space: nowrap;
  min-height: 44px; padding: 0 14px;
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--borda); border-radius: 999px;
  background: var(--fundo); color: var(--texto-fraco);
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.pi-filtro.ativo { border-color: var(--ouro); background: var(--ouro); color: var(--ouro-contra); }

.pi-setor { margin-top: 14px; }
.pi-setor-nome {
  margin: 0 0 8px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 14px; font-weight: 800;
}
.pi-setor-conta { font-size: 12px; font-weight: 600; color: var(--texto-fraco); font-variant-numeric: tabular-nums; }
.pi-pontos { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.pi-ponto {
  min-height: 50px;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--fundo); color: var(--texto); text-decoration: none;
}
.pi-ponto.feito { border-color: var(--verde-borda); background: var(--verde-fundo); }
.pi-ponto.aberto { outline: 2px solid var(--ouro); outline-offset: 1px; }
.pi-num { font-size: 16px; font-variant-numeric: tabular-nums; }
/* O tipo e, embaixo, a marca da última visita (12/10/2026). */
.pi-meio { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pi-tipo {
  min-width: 0;
  font-size: 13px; color: var(--texto-fraco);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pi-antes { font-size: 11.5px; color: var(--texto-fraco); white-space: nowrap; }
.pi-antes.ativ { color: var(--vermelho-txt); font-weight: 700; }
.pi-siglas { font-size: 13px; font-weight: 800; color: var(--verde-txt); white-space: nowrap; }
.pi-ponto:not(.feito) .pi-siglas { color: var(--texto-fraco); font-weight: 600; }
/* A marca que ainda está só no celular (sem sinal). */
.pi-ponto.pendente .pi-siglas { color: var(--laranja-txt); }

/* O painel de marcação: sobe de baixo, por cima da lista, e cabe no polegar.
   Com ele aberto, a página ganha espaço embaixo para o ponto escolhido não
   ficar escondido atrás do painel. */
.pi-folha {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  width: 100%; max-width: 560px; margin: 0 auto;
  max-height: 74vh; overflow-y: auto;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  background: var(--superficie);
  border: 1px solid var(--borda-forte); border-bottom: 0;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -10px 28px rgba(0, 0, 0, .4);
}
body.pi-folha-aberta { padding-bottom: 62vh; }
.pi-folha-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pi-folha-topo .btn-texto { min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px; }
.pi-folha-titulo { margin: 0; font-size: 15px; font-weight: 800; }
.pi-folha-antes { margin: 2px 0 0; font-size: 12.5px; color: var(--texto-fraco); }
.pi-folha-antes.ativ, .pi-folha-antes.ativ b { color: var(--vermelho-txt); }
/* O resumo da última visita, no topo da aba: por onde começar a volta. */
.pi-anterior { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--texto-fraco); }
.pi-anterior b { color: var(--vermelho-txt); }
.pi-coluna { margin-top: 10px; }
.pi-coluna-nome {
  margin: 0 0 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto-fraco);
}
.pi-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pi-chip {
  min-height: 54px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 1px;
  padding: 6px 10px;
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--fundo); color: var(--texto);
  font: inherit; text-align: left;
  cursor: pointer;
}
.pi-chip b { font-size: 15px; }
.pi-chip span { font-size: 11.5px; line-height: 1.25; color: var(--texto-fraco); }
.pi-chip.sel { border-color: var(--ouro); background: var(--ouro); color: var(--ouro-contra); }
.pi-chip.sel span { color: inherit; opacity: .85; }
/* "Desfazer" e "Próximo" PRESOS no pé do painel: com as 17 siglas da Couto
   o painel rola, e o "Próximo" é o toque que ele mais dá (medido na demo:
   sem isto, ficava abaixo da dobra). */
.pi-folha-acoes {
  position: sticky; bottom: calc(-14px - env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 14px -16px calc(-14px - env(safe-area-inset-bottom));
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--superficie);
  border-top: 1px solid var(--borda);
}
.pi-folha-acoes .btn-texto { min-height: 44px; padding: 0 4px; }
.pi-folha-acoes .btn { width: auto; margin-top: 0; min-height: 48px; padding: 0 26px; }

/* O mapa em tela cheia. */
.mapa-barra {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: -18px -16px 0; padding: 6px 16px;
  background: var(--barra); border-bottom: 1px solid var(--borda);
}
.mapa-barra .btn-texto { min-height: 44px; display: inline-flex; align-items: center; }
.mapa-rev { font-size: 12.5px; color: var(--texto-fraco); }
.mapa-dica { margin-top: 10px; }
.mapa-cheio {
  display: block; width: 100%; height: auto;
  border-radius: var(--raio); background: #fff;
}

/* "Mudou algo nos porta-iscas?" (09/10): três formulários curtos. */
.pi-mudar { margin-top: 18px; }
.pi-mudar-form {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--borda);
}
.pi-mudar-form .btn { margin-top: 4px; }
/* Tirar o porta-isca do imóvel: a cor de quem tira algo (a regra do dono:
   ação que remove é vermelha). O app não tinha `.btn.perigo`; só o painel. */
.pi-mudar-form .btn.perigo { border-color: var(--vermelho-borda); color: var(--vermelho-txt); }
.pi-mudar-form .btn.perigo:hover { background: var(--vermelho-fundo); color: var(--vermelho-txt); transform: none; }
.pi-recado {
  margin: 10px 0 0; padding: 8px 10px;
  border: 1px solid var(--verde-borda); border-radius: var(--raio);
  background: var(--verde-fundo); color: var(--verde-txt);
  font-size: 12.5px;
}