/* ══════════════════════════════════════════════════════════════════════════════
   painel.css — a folha de estilo do painel Serv-Sol
   ══════════════════════════════════════════════════════════════════════════════

   Vivia dentro do `panel.html`, em mil linhas de `<style>`. Saiu daqui em
   16/09/2026, por dois motivos concretos:

   ⚠️ O NAVEGADOR NAO CONSEGUIA GUARDAR. O `panel.html` e servido com
   `Cache-Control: no-cache` de proposito — ele tem o HTML E o JS, e uma versao
   nova precisa aparecer na hora. So que o CSS ia junto no mesmo pacote: trinta
   e poucos KB rebaixados a cada F5, todo dia, em quatro lojas. Agora ele tem
   URL propria com hash no nome — o navegador guarda de verdade, e a troca de
   versao muda o nome do arquivo.

   ⚠️ E MIL LINHAS DENTRO DE OUTRO ARQUIVO NAO SE ACHA. Procurar uma regra
   exigia saber que ela estava entre a linha 8 e a 1038 de um arquivo de doze
   mil — e todo editor tratava tudo como HTML.

   A ORDEM AQUI E DELIBERADA, e vale manter:
     1. tokens (`:root`)      — a fonte de toda cor, raio e curva
     2. base e tipografia
     3. estrutura (areas, abas, cartoes)
     4. componentes
     5. media queries de cada componente, junto dele

   ⚠️ COR NOVA NASCE NO `:root`, NUNCA NO COMPONENTE. Os contrastes estao
   medidos e anotados ao lado de cada token; um `#888` escrito direto numa regra
   passa por fora dessa conta e ninguem descobre ate alguem nao conseguir ler.
*/
/* ══════════════════════════════════════════════════════════════════════════════
   Painel Serv-Sol — sistema visual "sala de controle"
   Reescrito em 27/ago/2026. A identidade é a mesma (vermelho Serv-Sol, base
   escura); o que mudou é a estrutura: superfícies em camadas, hierarquia
   tipográfica de verdade, foco visível e um sistema de movimento com valores
   escolhidos, não aproximados.

   TRÊS COISAS QUE NÃO SE DEVE DESFAZER:

   1. ⚠️ ESTE ITEM MUDOU EM 19/09/2026, com a identidade Ordane. Ele dizia que
      `--accent` era o vermelho #CC0000, cor de PREENCHIMENTO, e que texto e
      ícone usavam um segundo vermelho. Nada disso vale mais: o vermelho saiu
      da paleta ativa e `--accent` é o Âmbar #F5A524, que serve aos dois usos
      (8,9:1 como texto sobre o cartão).
      O que continua valendo, e é a parte que importa: TEXTO SOBRE ÂMBAR É
      TINTA #111113 (9,3:1). Branco sobre Âmbar dá 1,9:1 e o rótulo some.
      Fica o método: todo par de cor aqui foi medido, e o número está do lado.
   2. Nada de `transition: all`. Toda transição nomeia a propriedade, e só
      transform/opacity/color/background/border/box-shadow entram — as demais
      forçam layout e derrubam quadro.
   3. Os nomes de classe e as variáveis abaixo são contrato: o JavaScript monta
      HTML em string com `class="btn btn-secondary"`, `var(--muted)` e companhia.
      Renomear qualquer um quebra tela que não aparece aqui.
   4. Botão tem TRÊS papéis, e a cor é a consequência da ação: `btn-primary`
      compromete, `btn-secondary` não compromete, `btn-danger` destrói. Antes
      eram oito estilos, e a cor não queria dizer nada — "Salvar" era verde em 6
      telas e vermelho em 5, e havia um "Cancelar" pintado de destrutivo. Os
      nomes antigos continuam definidos no CSS como apelidos, apontando para o
      papel certo: são 508 KB de arquivo, e uma ocorrência esquecida num
      template montado em JS viraria um botão sem estilo nenhum — pior do que um
      botão da cor errada.
   ══════════════════════════════════════════════════════════════════════════ */

*{margin:0;padding:0;box-sizing:border-box}

/* ═════════════════════════════════════════════════════════════════════════════
   ORDANE — identidade. Etapa 1 do HANDOFF-CLAUDE-CODE.md (19/09/2026).
   ═════════════════════════════════════════════════════════════════════════════

   ⚠️ O CSS NAO FOI REESCRITO — a identidade foi ACRESCENTADA, e os nomes
   antigos viraram apelidos apontando para os novos. E o que o handoff manda,
   e a razao esta no proprio arquivo: os nomes de classe e de variavel sao
   CONTRATO. Ha 532 KB de JavaScript montando HTML em string com
   `var(--muted)` e `class="btn btn-secondary"` dentro. Renomear quebra tela
   que nao aparece aqui.

   O criterio de aceite desta etapa e visual e estreito: mesma estrutura,
   ambar onde era vermelho, Osso onde era branco, Archivo nos titulos.

   ⚠️ AS FONTES AINDA NAO ESTAO NO DISCO. As declaracoes abaixo apontam para
   `fontes/`, e enquanto os arquivos nao chegarem o navegador cai sozinho na
   pilha do sistema — sem quebrar nada. O arquivo do design system passa de
   256 KB e vem truncado pela ferramenta de leitura; ver a pendencia anotada
   no fim desta secao.
   ════════════════════════════════════════════════════════════════════════════ */

/* ⚠️ WOFF2 E NAO TTF, E A CONTA E DE QUEM ABRE O PAINEL NA LOJA.
 *
 * O pacote do design declara `.ttf`. O arquivo do Archivo variavel passa de
 * 500 KB nesse formato; em WOFF2, os quatro subconjuntos somam **103 KB**. O
 * painel e aberto todo dia, no telefone, no salao — e a diferenca e meio
 * megabyte por aparelho por dia.
 *
 * ⚠️ E OS SUBCONJUNTOS IMPORTAM: o navegador so baixa `latin-ext` quando a
 * tela tem um caractere que mora la. Numa tela so de numeros e nomes de
 * produto, ele baixa 35 KB e para.
 *
 * Fonte: Google Fonts (Archivo e Archivo Narrow, licenca SIL OFL — a mesma
 * familia que o design system embarcou). Conferido com `file`: Web Open Font
 * Format 2, TrueType. */
@font-face{font-family:"Archivo";font-weight:100 900;font-display:swap;
  src:url(fontes/Archivo-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-weight:100 900;font-display:swap;
  src:url(fontes/Archivo-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Archivo Narrow";font-weight:100 700;font-display:swap;
  src:url(fontes/ArchivoNarrow-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo Narrow";font-weight:100 700;font-display:swap;
  src:url(fontes/ArchivoNarrow-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* ── ORDANE — paleta (tokens/colors.css do design system) ──────────────
   * Codigos preservados do manual. Nenhuma cor inventada aqui. */
  --ord-ambar:#F5A524;
  --ord-ambar-fundo:#D97A1A;
  --ord-ambar-claro:#FFD98A;
  --ord-osso:#F5F3EF;
  --ord-nevoa:#B8B4AE;
  --ord-tinta:#111113;
  --ord-preto:#000000;
  --ord-grafite:#1C1C1E;
  --ord-grafite-alto:#2C2C2E;
  --ord-filete:#3A3A3C;
  --ord-verde:#3DDC97;
  /* ⚠️ #FF4D4D dava 4,26:1 no cartao elevado e 3,47:1 sobre controle — abaixo
     do minimo justamente na cor que avisa que algo deu errado. #FF7B72 sobe
     para 5,53:1 e 4,50:1 e continua lendo como vermelho. */
  --ord-alerta:#FF7B72;
  --ord-branco:#FFFFFF;
  --ord-creme:#F2EEE6;

  --ord-envolvente:linear-gradient(45deg,#D97A1A 0%,#F5A524 45%,#FFD98A 100%);
  --ord-ambiencia:linear-gradient(180deg,#2C2C2E 0%,#1C1C1E 55%,#000000 100%);

  --surface-fundo:var(--ord-preto);
  --surface-poco:#0C0C0E;
  --surface-cartao:var(--ord-grafite);
  --surface-elevada:var(--ord-grafite-alto);
  --surface-controle:#3A3A3C;
  --surface-ambar-suave:rgba(245,165,36,.14);
  --surface-verde-suave:rgba(61,220,151,.14);
  --surface-alerta-suave:rgba(255,77,77,.14);

  --linha-decorativa:1px solid var(--ord-filete);
  --borda-funcional:2px solid var(--ord-nevoa);
  --destaque-haste:3px solid var(--ord-ambar);
  --borda-cor:var(--ord-filete);
  --borda-cor-forte:#48484A;
  /* ⚠️ DIVISORIA E CONTORNO NAO SAO A MESMA COISA.
     `--borda-cor` (o Filete, #3A3A3C) dava 1,50:1 sobre o cartao e 1,23:1 sobre
     o cartao elevado: a borda existia no CSS e sumia na tela — era a queixa de
     "falta de bordas/agrupamento" voltando pela porta dos fundos.
     A WCAG 1.4.11 pede 3:1 para o contorno que IDENTIFICA um componente (campo,
     cartao, tabela). Para a linha que apenas SEPARA duas coisas, nao pede nada —
     e uma divisoria em 3:1 fica pesada. Por isso sao dois tokens:
       --borda-cor      -> divisoria, continua discreta
       --borda-contorno -> contorno de componente, 3,03:1 no pior caso
       --borda-contorno-forte -> o mesmo contorno em estado interativo */
  --borda-contorno:#757577;
  --borda-contorno-forte:#8E8E93;

  --text-forte:var(--ord-osso);
  --text-corrente:#DEDBD5;
  --text-apoio:var(--ord-nevoa);
  /* ⚠️ O ALFA E CONTRASTE, NAO ENFEITE. Em .55 este cinza compunha 3,12:1 sobre
     o cartao elevado — e ele carrega a hora das mensagens, em 10,5px. Texto
     abaixo de 18pt precisa de 4,5:1 (Acessibilidade > Visao). Em .76 da 4,58:1
     no pior caso. Baixar daqui exige refazer a conta. */
  --text-tenue:rgba(184,180,174,.76);
  --text-marca:var(--ord-ambar);
  --text-sobre-ambar:var(--ord-tinta);
  --text-numero:var(--ord-ambar);

  --sinal-ok:var(--ord-verde);
  --sinal-atencao:var(--ord-ambar);
  --sinal-alerta:var(--ord-alerta);
  --sinal-sem-dado:var(--ord-nevoa);
  --ord-foco:var(--ord-ambar);

  /* ── ORDANE — tipografia (tokens/typography.css) ────────────────── */
  --ord-f-display:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --ord-f-narrow:"Archivo Narrow","Archivo","Arial Narrow",sans-serif;
  --ord-f-texto:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --ord-f-sistema:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --ord-f-num:ui-monospace,Menlo,monospace;

  --fs-micro:11px;      --fs-etiqueta:12px;   --fs-apoio:13px;
  --fs-corpo:15px;      --fs-corpo-g:16px;    --fs-subtitulo:19px;
  --fs-titulo:24px;     --fs-titulo-g:32px;
  --fs-display-p:44px;  --fs-display:64px;    --fs-display-g:88px;

  --lh-titulo:1.08;  --lh-subtitulo:1.2;  --lh-corpo:1.5;  --lh-apoio:1.45;
  --fw-texto:400;    --fw-medio:500;      --fw-forte:600;  --fw-titulo:700;
  --ls-etiqueta:.08em; --ls-titulo:-.01em; --ls-display:-.02em;

  /* ── ORDANE — espaco e estrutura (tokens/spacing.css) ────────────── */
  --ord-M:8px;
  --ord-sp-atomo:4px;   --ord-sp-junto:8px;   --ord-sp-campo:16px;
  --ord-sp-cartao:20px; --ord-sp-bloco:24px;  --ord-sp-secao:48px;
  --ord-toque:48px;
  --ord-icone:24px;     --ord-icone-g:32px;   --ord-icone-gg:48px;
  --ord-D:48px;         --ord-max:1440px;     --ord-max-leitura:72ch;

  /* ── ORDANE — casca do ecossistema (ord-tokens.css do pacote de redesenho) ──
   * ⚠️ `--e-1..--e-6` sao ESPACO e nao se confundem com `--e1..--e3`, que sao
   * SOMBRA e ja existiam. Nomes parecidos, papeis opostos: manter os dois. */
  --e-1:4px; --e-2:8px; --e-3:16px; --e-4:20px; --e-5:24px; --e-6:48px;
  --alvo-toque:48px;
  --trilho-largura:76px;
  --painel-telas:216px;
  --nav-larga:264px;    --nav-estreita:72px;  --topo-altura:56px;
  --indice-largura:208px; --gutter-mesa:24px; --gutter-celular:16px;

  /* ── ORDANE — forma (tokens/shape.css) ─────────────────────── */
  --ord-r-ctl:10px;  --ord-r-sup:14px;  --ord-r-folha:20px;  --ord-r-pill:999px;
  --ord-filete-l:1px; --ord-fio:2px;    --ord-haste:3px;
  --e-foco:0 0 0 2px var(--ord-foco);

  /* ── ORDANE — movimento (tokens/motion.css) ──────────────────── */
  --ord-ease-out:cubic-bezier(.22,1,.36,1);
  --ord-ease-sweep:cubic-bezier(.65,.02,.32,1);
  --ord-ease-gaveta:cubic-bezier(.32,.72,0,1);
  --ord-t-toque:120ms;   --ord-t-aba:160ms;   --ord-t-menu:180ms;
  --ord-t-modal:220ms;   --ord-t-assinatura:320ms; --ord-t-grafismo:560ms;


  /* ══════════════════════════════════════════════════════════════════════════
   * SISTEMA VISUAL — linguagem da Apple, marca da Serv-Sol
   *
   * Refeito em 07/09 contra a HIG (skill `apple-design`, 53 documentos), e não
   * de memória. O sistema anterior já era coerente; o que ele não era é Apple.
   * As quatro diferenças de fundo:
   *
   *   1. A tipografia era IBM Plex. Agora é a FONTE DO SISTEMA — SF Pro em
   *      aparelho da Apple, e a nativa em cada outro. É o que mais muda a
   *      sensação, e a HIG é explícita: "access all system fonts".
   *   2. A elevação era feita com SOMBRA. No modo escuro a Apple eleva com
   *      SUPERFÍCIE MAIS CLARA — "base colors are dimmer, making background
   *      interfaces recede; elevated colors are brighter, making foreground
   *      interfaces advance". Sombra pesada é idioma de outro sistema.
   *   3. Os rótulos eram hex opaco. Agora são BRANCO COM ALFA, que é como a
   *      Apple os define — assim o mesmo token funciona sobre qualquer
   *      superfície, em vez de precisar de um hex por fundo.
   *   4. Os raios eram de 6px. A linguagem da Apple é mais arredondada:
   *      controle 10, cartão 14, folha 20.
   *
   * TODO PAR DE COR AQUI FOI MEDIDO. A HIG pede 4,5:1 e recomenda 7:1 para
   * texto pequeno no escuro; os valores estão anotados linha a linha.
   * ══════════════════════════════════════════════════════════════════════════ */

  /* ── Superfícies: os fundos do modo escuro do iOS ───────────────────────────
   * Base escura que RECUA, elevadas mais claras que AVANÇAM. A hierarquia é a
   * própria cor, e não uma sombra por cima. */
  --bg:var(--ord-preto);          /* base — a página */
  --well:var(--surface-poco);     /* poço: campo, cabeçalho de tabela */
  --card:var(--ord-grafite);      /* cartão */
  --card2:var(--ord-grafite-alto);/* cartão elevado, linha em foco */
  --card3:var(--surface-controle);/* folha, menu, popover */
  --border:var(--ord-filete);     /* separador — unificado no Filete da identidade */
  --border-2:var(--borda-contorno-forte); /* borda de elemento interativo — 4,27:1 */

  /* ── Rótulos: branco com alfa, como a Apple define ──────────────────────────
   * Medido sobre --card. A Apple usa 0,60 e 0,30 para secundário e terciário;
   * 0,30 dá 2,48:1 e reprova. Subimos para 0,72 e 0,60 — 7,99:1 e 5,94:1 —
   * porque a mesma HIG recomenda 7:1 no escuro. Desvio deliberado, e para o
   * lado de enxergar.
   *
   * O terciário nasceu em 0,52 e subiu para 0,60 na auditoria: 0,52 passava
   * sobre o cartão (4,83:1) e REPROVAVA sobre a superfície elevada (4,33:1),
   * onde ele também aparece. Medir sobre um fundo só é como se erra isso. */
  --text:var(--ord-osso);                  /* Osso #F5F3EF, nao branco puro — 13,6:1 */
  --muted:var(--text-corrente);            /* #DEDBD5 — opacidade virou cor solida */
  --text-3:var(--ord-nevoa);               /* #B8B4AE — Nevoa */
  --text-4:var(--text-tenue);              /* so decoracao, nunca texto */

  /* ── Marca e cores de sistema ───────────────────────────────────────────────
   * O vermelho da Serv-Sol fica, aplicado como a HIG manda aplicar um accent:
   * "interface icons, buttons, and text", e nada além disso.
   *
   * ⚠️ ERAM DOIS VERMELHOS, UM PARA TEXTO E OUTRO PARA PREENCHIMENTO. Com o
   * Âmbar isso deixou de ser necessário: ele passa nos dois usos. Os dois
   * nomes continuam existindo porque são contrato do JavaScript, e os dois
   * apontam para a mesma cor. */
  --accent:var(--ord-ambar);      /* ⚠️ TEXTO POR CIMA E TINTA (#111113), nunca Osso */
  --accent-text:var(--ord-ambar); /* texto e icone da marca — sobre cartao: 8,9:1 */
  --accent-soft:var(--surface-ambar-suave);

  /* Cores de sistema do modo escuro da Apple. O índigo ficou de fora de
   * propósito: 3,36:1 como texto, reprova. */
  --blue:#0A84FF;        --blue-text:#64B5FF;   /* 4,66:1 e 7,4:1 sobre cartão */
  --blue-deep:#0A84FF;
  --green:var(--ord-verde);   --green-text:var(--ord-verde);   /* Verde Evolucao #3DDC97 */
  --yellow:var(--ord-ambar);  --yellow-text:var(--ord-ambar);  /* duas familias bastam */
  --orange:var(--ord-ambar-fundo); --orange-text:var(--ord-ambar); /* duas familias bastam */

  /* ── Elevação: superfície primeiro, sombra só onde algo FLUTUA ──────────────
   * Cartão não tem sombra: ele já é mais claro que o fundo, e isso basta.
   * Sombra fica para o que realmente paira sobre o conteúdo. */
  /* ⚠️ `none` NÃO serve aqui. Cinco regras compõem duas sombras
   * (`box-shadow:var(--e1),var(--lustro)`), e `none` não entra em lista: o
   * resultado seria `none,none`, declaração inválida que o navegador descarta
   * inteira — inclusive a sombra do modal, que é a única que ainda importa.
   * Sombra nula VÁLIDA resolve sem tocar nas cinco. */
  --e1:0 0 0 0 transparent;
  --e2:0 4px 16px rgba(0,0,0,.40);
  --e3:0 20px 60px rgba(0,0,0,.55);
  --lustro:0 0 0 0 transparent;   /* o brilho de topo era truque de sombra */

  /* ── Raio ───────────────────────────────────────────────────────────────── */
  --r-ctl:10px;          /* botão, campo */
  --r-sup:14px;          /* cartão */
  --r-folha:20px;        /* folha e modal */
  --r-pill:999px;

  /* ── Movimento — inalterado: os valores já vinham de tabela ─────────────── */
  --ease-out:var(--ord-ease-out);   /* ajuste fino: cubic-bezier(.22,1,.36,1) */
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:var(--ord-ease-gaveta);
  --t-toque:120ms;
  --t-aba:160ms;
  --t-menu:180ms;
  --t-modal:220ms;
}

/* Movimento reduzido: mais suave e menos, não zero. O que ajuda a entender
   (cor, opacidade) fica; o que desloca sai. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .tab-entra,.card-entra,#bootScreen .boot-item{animation:none !important;opacity:1 !important;transform:none !important}
}
/* Transparência reduzida: as camadas viram sólidas */
@media (prefers-reduced-transparency: reduce){
  header,.tabs{backdrop-filter:none;background:var(--card)}
  .modal-bg{backdrop-filter:none}
}

body{
  background:var(--bg);color:var(--text);
  /* A FONTE DO SISTEMA, e nao uma embarcada. Em aparelho da Apple isto
     resolve para SF Pro; no Windows, Segoe UI; no Android, Roboto. A HIG e
     direta: "access all system fonts - don't embed system fonts". Foi a
     troca que mais mudou a sensacao do painel. */
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display',
    'Segoe UI',system-ui,Roboto,'Helvetica Neue',sans-serif;
  font-size:13px;line-height:1.55;min-height:100vh;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* Todo número que muda usa largura fixa de dígito: sem isso a coluna dança a
   cada atualização de 10 s. */
.num,.mono,.gps-text,.stat-val,td .num{font-variant-numeric:tabular-nums}

/* ── TELA DE ENTRADA ──────────────────────────────────────────────────────────
   O único momento com movimento de verdade. As ondas saem do centro como o som
   sai do carro; a barra é o carregamento real, não teatro. */
#bootScreen{position:fixed;inset:0;z-index:10000;background:var(--bg);
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  transition:opacity 320ms var(--ease-out),visibility 0s linear 320ms}
#bootScreen.saiu{opacity:0;visibility:hidden;pointer-events:none}
#bootScreen::before{content:'';position:absolute;inset:0;
  background:radial-gradient(620px 520px at 50% 44%,rgba(245,165,36,.08),rgba(10,11,13,0) 70%)}
.boot-wrap{position:relative;display:flex;flex-direction:column;align-items:center}
@keyframes boot-onda{0%{transform:scale(.35);opacity:0}12%{opacity:.55}100%{transform:scale(1);opacity:0}}
.boot-onda{animation:boot-onda 2400ms var(--ease-out) infinite;transform-origin:center}
.boot-onda-2{animation-delay:800ms}
.boot-onda-3{animation-delay:1600ms}
@keyframes boot-barra{0%{transform:scaleX(.04)}55%{transform:scaleX(.62)}100%{transform:scaleX(1)}}
.boot-barra{height:100%;border-radius:var(--r-pill);transform-origin:left center;
  background:linear-gradient(90deg,var(--accent),var(--accent-text));
  animation:boot-barra 2600ms var(--ease-out) infinite}
@keyframes boot-sobe{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.boot-item{animation:boot-sobe 480ms var(--ease-out) both}

/* ── REVELAÇÃO DE ENTRADA ────────────────────────────────────────────────────
   Uma vez por sessão, encadeada de cima para baixo. Em troca de aba isso não
   se repete: lá o custo de esperar não se paga. */
@keyframes entra-sobe{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
body.revelar header{animation:entra-sobe 420ms var(--ease-out) both}
body.revelar .stats{animation:entra-sobe 420ms var(--ease-out) 60ms both}
body.revelar .tabs{animation:entra-sobe 420ms var(--ease-out) 120ms both}
body.revelar .content{animation:entra-sobe 420ms var(--ease-out) 180ms both}

/* ── CABEÇALHO — camada translúcida, conteúdo corre por baixo ────────────── */
header{
  background:rgba(18,19,22,.72);backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid var(--border);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  padding:0 28px;min-height:60px;display:flex;align-items:center;
  justify-content:space-between;position:sticky;top:0;z-index:500;gap:16px;flex-wrap:wrap}
.header-left{display:flex;align-items:center;gap:12px}
header h1{font-size:15px;font-weight:600;color:var(--text);letter-spacing:-.01em;
  display:flex;align-items:center;gap:11px}
header h1 svg{flex-shrink:0}
.sync-info{color:var(--text-3);font-size:12px}

.rot-curto{display:none}
.areaswitch{display:flex;gap:4px;background:var(--well);border:1px solid var(--border);
  border-radius:var(--r-sup);padding:4px}
.area-btn{padding:7px 16px;border:none;background:none;color:var(--muted);cursor:pointer;
  font-size:13px;font-weight:500;font-family:inherit;border-radius:7px;
  display:inline-flex;align-items:center;gap:7px;
  transition:color var(--t-toque) var(--ease-out),background-color var(--t-toque) var(--ease-out)}
.area-btn svg{flex-shrink:0}
.area-btn:hover{color:var(--text)}
.area-btn:active{transform:scale(.98)}
/* ── A área ativa ─────────────────────────────────────────────────────────
   Antes, cada área pintava o botão de uma cor cheia: vermelho, azul, verde,
   roxo. Isso resolvia "onde estou" e destruía "de quem é isto" — quatro cores
   de marca é nenhuma cor de marca, e o sistema mudava de identidade a cada
   clique.

   Agora a marca é constante (o logo e as ações principais são vermelhos,
   sempre) e a área virou CONTEXTO: superfície elevada, texto legível, e uma
   barra fina embaixo na cor daquela área. Continua-se sabendo onde se está,
   sem que o cabeçalho troque de dono. */
.area-btn{position:relative}
.area-btn.active{background:var(--card2);color:var(--text);font-weight:600;
  box-shadow:var(--e1),var(--lustro)}
.area-btn.active::after{content:'';position:absolute;left:12px;right:12px;bottom:3px;
  height:2px;border-radius:2px;background:var(--accent)}
.area-btn.active.frota::after{background:var(--blue)}
.area-btn.active.logistica::after{background:var(--green)}
.area-btn.active.tarefas::after{background:#9B7BD4}

/* O ponto acompanha o botão mesmo inativo: a cor da área passa a ser algo que
   se aprende olhando a lista, não só depois de clicar. */
.area-btn::before{content:'';width:6px;height:6px;border-radius:50%;flex-shrink:0;
  background:var(--accent);opacity:.55;transition:opacity var(--t-toque) var(--ease-out)}
.area-btn.frota::before{background:var(--blue)}
.area-btn.logistica::before{background:var(--green)}
.area-btn.tarefas::before{background:#9B7BD4}
.area-btn.agente::before{background:var(--blue-deep)}
.area-btn.equipe::before{background:#D48A3A}
.area-btn.gestao::before{background:#6FA8A0}
.area-btn.active::before,.area-btn:hover::before{opacity:1}

/* ── KPIs ─────────────────────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:12px;
  padding:20px 28px 16px}
.stat{background:var(--card);border:1px solid var(--border);border-radius:var(--r-sup);
  padding:15px 17px;box-shadow:var(--lustro);min-width:0;
  transition:border-color var(--t-toque) var(--ease-out)}
.stat:hover{border-color:var(--border-2)}
.stat-val{font-size:34px;font-weight:600;line-height:1;letter-spacing:-.03em;
  font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace}
.stat-lbl{font-size:11px;color:var(--text-3);text-transform:uppercase;
  margin-top:9px;letter-spacing:.07em;font-weight:600}
.c-text{color:var(--text)}.c-green{color:var(--green)}.c-yellow{color:var(--yellow)}
.c-blue{color:var(--blue)}.c-red{color:var(--accent-text)}.c-orange{color:var(--orange)}
.c-muted{color:var(--muted)}

/* ── ABAS ─────────────────────────────────────────────────────────────────── */
.tabs{display:flex;background:rgba(14,15,18,.6);backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);padding:0 22px;overflow-x:auto;
  scrollbar-width:thin;position:sticky;top:60px;z-index:400}
.tabs::-webkit-scrollbar{height:6px}
.tabs::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
/* O `top:60px` acima só vale enquanto o cabeçalho couber em uma linha. Em tela
   estreita ele quebra em duas e as abas grudariam por cima dele — então lá
   elas deixam de ser fixas. */
@media (max-width:1000px){.tabs{position:static}}

/* ══════════════════════════════════════════════════════════════════════════
 * CELULAR — layout próprio, não o de mesa espremido
 * ══════════════════════════════════════════════════════════════════════════
 *
 * A primeira tentativa (07/09, manhã) foi um breakpoint de ajustes soltos:
 * botão um pouco maior, padding um pouco menor. O retorno de quem usa foi
 * "melhorou 50% e continua muito ruim, botões e textos ainda muito pequenos" —
 * e estava certo. Espremer o layout de mesa não vira layout de celular.
 *
 * Isto aqui segue as Human Interface Guidelines da Apple nos pontos que
 * importam para um painel dado em pé, com uma mão, dentro de uma loja:
 *
 *   TOQUE     44×44pt é o mínimo, e não uma meta. Abaixo disso o erro de toque
 *             deixa de ser exceção. Vale para botão, aba, chip e linha de lista.
 *   TIPO      Corpo em 17px, secundário em 15px, e NADA abaixo de 13px. O
 *             painel usava 12–13px, que é tamanho de legenda de mesa.
 *   POLEGAR   A navegação principal vai para BAIXO. O topo de um telefone de
 *             6 polegadas não se alcança sem trocar a mão de posição — e trocar
 *             a mão segurando um celular em pé, no corredor, é como se derruba.
 *   RESPIRO   Espaço é hierarquia. Cartão colado em cartão vira parede de texto.
 *   BORDAS    `env(safe-area-inset-*)` para o notch e a barra de gestos.
 */
/* ── QUALQUER TELA DE TOQUE ────────────────────────────────────────────────
 *
 * Alvo de toque é função do PONTEIRO, não da largura. Um telefone deitado tem
 * ~844px e cairia no layout de mesa — com botão de 27px e o dedo do mesmo
 * tamanho de sempre. O mesmo vale para tablet.
 *
 * `pointer:coarse` é o teste certo: pergunta se quem aponta é dedo ou mouse.
 * O layout (barra embaixo, uma coluna) continua governado pela largura, porque
 * aí a pergunta é outra — quanto espaço existe.
 */
@media (pointer:coarse){
  .btn{padding:12px 16px;font-size:15px;min-height:44px}
  .chip{padding:10px 15px;font-size:14px;min-height:44px}
  .tab-btn{padding:14px 15px;font-size:15px;min-height:48px}
  .area-btn{min-height:44px}
  input,select,textarea,button{min-height:44px}
  /* 16px no campo evita o zoom do iOS ao focar, em qualquer largura. */
  input,select,textarea{font-size:16px}
  td{padding:13px 14px}
}

@media (max-width:640px){

  /* ── Tipo ────────────────────────────────────────────────────────────────
   * 17px é o corpo do iOS. Parece grande num monitor e é exatamente o certo a
   * 30 cm do rosto, com a tela tremendo na mão. */
  /* 17px é o CORPO padrão de celular na HIG (o mínimo é 11). Eu tinha posto 16,
   * que é o limiar do zoom do iOS em campo — limiar de campo não é escala de
   * texto, e usar um pelo outro deixa o corpo um degrau abaixo do devido. */
  body{font-size:17px;line-height:1.5}
  .hint{font-size:15px;line-height:1.55}
  h1,h2{font-size:20px}
  .card h3{font-size:17px}
  td{font-size:15px;padding:14px 14px}
  th{font-size:13px;padding:12px 14px}

  /* ── Toque: 44px em tudo que se aperta ───────────────────────────────── */
  .btn{padding:13px 18px;font-size:16px;min-height:46px;border-radius:11px}
  .chip{padding:11px 16px;font-size:15px;min-height:44px}
  .tab-btn{padding:15px 16px;font-size:16px;min-height:50px}
  input,select,textarea,button{min-height:46px}
  /* 16px NO CAMPO É REGRA, NÃO ESTILO: abaixo disso o iOS dá zoom ao focar e a
   * página não volta ao lugar sozinha. */
  input,select,textarea{font-size:16px;padding:12px 14px;border-radius:11px}

  /* ── Cabeçalho: só a marca ─────────────────────────────────────────────
   *
   * ⚠️ O `backdrop-filter` PRECISA SAIR AQUI, e não é escolha estética.
   *
   * A `.areaswitch` mora dentro do `<header>`. Um elemento com `backdrop-filter`
   * (ou `filter`, `transform`, `perspective`, `contain`, `will-change`) vira o
   * **bloco de contenção** dos descendentes `position:fixed` — que passam a se
   * posicionar em relação a ELE, não à janela. Com o blur no lugar, a barra de
   * navegação "fixa no rodapé" apareceria colada logo abaixo do cabeçalho, no
   * TOPO da tela.
   *
   * Descoberto na revisão, antes de alguém abrir no telefone. O `position:sticky`
   * do cabeçalho não causa isso; só o filtro. Trocado por fundo sólido, que no
   * celular fica igual — não há nada atrás dele para desfocar. */
  header{padding:0 16px;min-height:56px;gap:10px;flex-wrap:nowrap;
    padding-top:env(safe-area-inset-top);
    backdrop-filter:none;-webkit-backdrop-filter:none;
    background:var(--card)}
  header h1{font-size:16px}
  header h1 span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sync-info{display:none}

  /* ── Navegação principal EMBAIXO ─────────────────────────────────────────
   * A `.areaswitch` sai do cabeçalho e vira barra fixa no rodapé. É a mudança
   * que mais muda o uso: as cinco áreas passam a ficar onde o polegar chega. */
  .areaswitch{position:fixed;left:0;right:0;bottom:0;z-index:600;
    display:flex;gap:0;padding:0;border:none;border-radius:0;
    border-top:1px solid var(--border);
    background:rgba(18,19,22,.94);backdrop-filter:blur(24px) saturate(180%);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
    padding-bottom:env(safe-area-inset-bottom)}
  /* 11px aqui é a ÚNICA exceção à regra de "nada abaixo de 13px", e é
   * deliberada: rótulo de barra de aba no iOS é 10pt. O que faz o alvo ser
   * seguro não é a letra, é a área — 56px de altura por um quinto da largura da
   * tela, e o ícone de 22px acima carregando o reconhecimento. Aumentar a fonte
   * aqui quebraria "Gestão de Frotas" em três linhas e encolheria o alvo. */
  .area-btn{flex:1 1 0;min-width:0;flex-direction:column;gap:3px;
    padding:9px 2px 8px;font-size:11px;line-height:1.15;border-radius:0;
    min-height:56px;text-align:center;white-space:normal}
  .area-btn svg{width:22px;height:22px}
  /* Rótulo curto no celular. "Gestão de Frotas" em 11px precisa de ~88px e o
   * slot tem 78 — quebraria em duas linhas e desalinharia a barra inteira, com
   * um item de duas linhas ao lado de quatro de uma. Barra de aba de celular
   * usa nome curto; os dois textos existem no HTML, então o leitor de tela e a
   * busca da página continuam achando o nome inteiro. */
  .rot-longo{display:none}
  .rot-curto{display:inline}
  /* ── O item ativo se mostra por COR, não por caixa ───────────────────────
   *
   * No layout de mesa a área ativa é uma pílula: fundo `--card2`, sombra e um
   * risco de 2px embaixo. Dentro de uma barra de aba isso vira um retângulo
   * sólido de canto vivo — o botão de mesa colado num lugar onde ele não é
   * botão. Barra de aba de celular indica o item aberto **tingindo o ícone e o
   * rótulo**, e é só.
   *
   * O ponto colorido da área também sai: ele existia para ensinar a cor de cada
   * área na lista horizontal, e aqui o ícone já faz esse trabalho. */
  .area-btn::before{display:none}
  .area-btn.active{background:none;box-shadow:none;font-weight:600;
    color:var(--accent-text)}
  .area-btn.active svg{opacity:1}
  /* ⚠️ COR SOZINHA NÃO BASTA — e a primeira versão desta barra dependia só dela.
   *
   * A HIG é explícita: "convey information with more than color alone… offer
   * visual indicators, like distinct shapes or icons, in addition to color".
   * Quem não distingue vermelho de cinza não veria qual área está aberta.
   *
   * Ficam TRÊS sinais: a cor, o peso da fonte (600) e este traço no topo do
   * item — que é onde a barra de aba põe o indicador, já que a borda de baixo
   * fica na margem do aparelho. O contraste dos dois rótulos foi medido:
   * inativo 7,78:1 e ativo 6,09:1 sobre o fundo da barra, contra o mínimo de
   * 4,5:1. */
  .area-btn.active::after{content:'';display:block;position:absolute;
    left:22%;right:22%;top:0;height:3px;border-radius:0 0 3px 3px;
    background:var(--accent-text)}
  .area-btn{position:relative}

  /* O aviso ocupa a largura da tela menos a margem; o `max-width` de mesa o
   * deixaria estreito e encostado à direita. */
  #adminToast{max-width:none}

  /* O conteúdo não pode terminar embaixo da barra. */
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}

  /* ── Abas: rolam, e com folga para o dedo ────────────────────────────── */
  .tabs{padding:0 10px;position:static}
  .tabs::-webkit-scrollbar{display:none}

  /* ── Respiro ─────────────────────────────────────────────────────────── */
  .card{padding:16px;margin-bottom:14px;border-radius:14px}
  .stats{grid-template-columns:1fr 1fr;gap:10px;padding:14px 12px 10px}
  .stat{padding:14px 15px}
  .empty{padding:32px 16px;font-size:15px}
  .action-row{gap:10px}

  /* ── Modal vira folha que sobe ─────────────────────────────────────────
   * O `padding:48px 16px` do fundo é o que impede a folha de encostar embaixo —
   * sem zerá-lo ela fica boiando com uma faixa escura por baixo, que é o modal
   * de mesa disfarçado. */
  .modal-bg{align-items:flex-end;padding:0}
  .modal{width:100%;max-width:none;max-height:90vh;overflow-y:auto;
    border-radius:18px 18px 0 0;padding-bottom:calc(20px + env(safe-area-inset-bottom))}

  /* ── O aviso não pode sumir atrás da barra ───────────────────────────────
   * `#adminToast` é fixo em `bottom:24px` — exatamente onde a barra de navegação
   * passou a ficar. É por ele que o painel diz "salvo" e "erro"; escondê-lo
   * atrás da barra faria a pessoa repetir a ação achando que não pegou. */
  #adminToast{left:12px;right:12px;bottom:calc(72px + env(safe-area-inset-bottom));
    font-size:15px;padding:14px 18px;text-align:center}

  /* ── O que ainda estava em 12px ──────────────────────────────────────────
   * 12px é tamanho de legenda de monitor. Estes são rótulos e metadados que a
   * operação lê de relance, em pé, com a tela tremendo. */
  .legend,.tar-meta,.tar-coluna h5,.alert-params,.alert-main,
  .toolbar label,.alert-checks label,.chips-acoes button{font-size:14px}
  .sync-info{font-size:14px}

  /* ── Tabela: rola dentro da caixa, nunca arrasta a página ──────────────
   * O `overflow-x` da página é definido uma vez só, lá em cima, com `clip` —
   * `hidden` aqui criaria um contêiner de rolagem e derrubaria o `sticky` do
   * cabeçalho. Duas regras para a mesma coisa é como uma delas fica errada. */
  .table-wrap{border-radius:var(--r-sup)}
  .table-wrap table{min-width:560px}
}


.tab-btn{padding:12px 13px;background:none;border:none;color:var(--muted);cursor:pointer;
  font-size:13px;font-weight:500;font-family:inherit;white-space:nowrap;position:relative;
  display:inline-flex;align-items:center;gap:8px;
  transition:color var(--t-aba) var(--ease-out)}
.tab-btn svg{flex-shrink:0;opacity:.85;transition:opacity var(--t-aba) var(--ease-out)}
.tab-btn:hover{color:var(--text)}
.tab-btn:hover svg{opacity:1}
/* O sublinhado cresce do centro em 160 ms. Trocar de aba acontece dezenas de
   vezes por dia — movimento aqui é quase imperceptível, de propósito. */
.tab-btn::after{content:'';position:absolute;left:8px;right:8px;bottom:0;height:2px;
  border-radius:2px 2px 0 0;background:var(--accent);
  transform:scaleX(0);transition:transform var(--t-aba) var(--ease-out)}
.tab-btn.active{color:var(--text);font-weight:600}
.tab-btn.active svg{opacity:1;color:var(--accent-text)}
.tab-btn.active::after{transform:scaleX(1)}
#area-frota .tab-btn::after{background:var(--blue)}
#area-frota .tab-btn.active svg{color:var(--blue-text)}

.content{padding:20px 28px 32px}
/* Painel que entra: sobe 8 px e aparece. Sem escalonar cartão por cartão — a
   troca de aba precisa parecer instantânea, não coreografada. */
@keyframes tab-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tab-entra{animation:tab-entra var(--t-aba) var(--ease-out) both}

.empty{padding:44px;text-align:center;color:var(--text-3)}

/* ── ESQUELETO DE CARREGAMENTO ───────────────────────────────────────────── */
@keyframes brilho{from{background-position:-200% 0}to{background-position:200% 0}}
.esqueleto{border-radius:var(--r-ctl);background:linear-gradient(90deg,
  var(--card2) 25%,#20242A 50%,var(--card2) 75%);background-size:200% 100%;
  animation:brilho 1400ms linear infinite;color:transparent !important;user-select:none}

/* ── TABELAS ──────────────────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;border-radius:12px;border:1px solid var(--borda-contorno);
  background:var(--card);box-shadow:var(--e1),var(--lustro)}
table{width:100%;border-collapse:collapse;background:transparent}
/* Em tela estreita, deixar a coluna espremer quebrava "Carro 01 — Mirassol" em
   três linhas. Melhor a tabela rolar dentro da própria caixa — a página em si
   nunca rola de lado. */
.table-wrap table{min-width:680px}
thead{background:var(--well)}
th{padding:11px 14px;text-align:left;font-size:11px;text-transform:uppercase;
  color:var(--text-3);font-weight:600;white-space:nowrap;letter-spacing:.07em;
  border-bottom:1px solid var(--border)}
td{padding:12px 14px;border-bottom:1px solid #1B1E23;vertical-align:middle;font-size:13px}
tr:last-child td{border-bottom:none}
tbody tr{transition:background-color var(--t-toque) var(--ease-out)}
tbody tr:hover td{background:var(--card2)}

/* ── SELOS E PONTOS ───────────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;
  border-radius:var(--r-pill);font-size:11px;font-weight:600;white-space:nowrap}
.badge-store{background:rgba(76,154,255,.13);color:var(--blue-text);border:1px solid rgba(76,154,255,.3)}
.badge-listener{background:rgba(63,185,80,.13);color:var(--green-text);border:1px solid rgba(63,185,80,.3)}
.badge-driver{background:rgba(255,122,69,.13);color:var(--orange-text);border:1px solid rgba(255,122,69,.3)}
.badge-unknown{background:rgba(162,168,180,.09);color:var(--muted);border:1px solid var(--border-2)}
.badge-movimento{background:rgba(63,185,80,.13);color:var(--green-text);border:1px solid rgba(63,185,80,.3)}
.badge-parado{background:rgba(162,168,180,.09);color:var(--muted);border:1px solid var(--border-2)}
.badge-ocioso{background:rgba(227,179,65,.13);color:var(--yellow-text);border:1px solid rgba(227,179,65,.32)}
.badge-offline{background:var(--surface-alerta-suave);color:var(--ord-alerta);border:1px solid rgba(255,77,77,.34)}
.sev-alta{color:#FF8C8F;font-weight:600}
.sev-media{color:var(--yellow-text);font-weight:600}
.sev-info{color:var(--blue-text)}

.dot-wrap{display:flex;align-items:center;gap:7px;white-space:nowrap}
.dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.dot-on{background:var(--green);box-shadow:0 0 0 3px rgba(63,185,80,.15)}
.dot-off{background:#3A3F48}

/* ══════════════════════════════════════════════════════════════════════════
 * ROLAGEM HORIZONTAL — três problemas diferentes, três soluções diferentes
 *
 * Barra de rolagem lateral na PÁGINA é sempre defeito. Ela tira o começo da
 * linha de vista, aparece no rodapé longe do elemento que a causou, e quebra a
 * expectativa: rolar para baixo se aprende, rolar para o lado não.
 *
 * Mas "proibir rolagem horizontal" seria a solução errada, porque há conteúdo
 * que é largo de verdade — uma tabela de 22 colunas não vira uma de 3 por
 * decreto. A separação que resolve:
 *
 *   1. O QUE NÃO PRECISA SER LARGO, REFLUI.
 *      Grades com `minmax(210px,1fr)` exigiam 210px por coluna e transbordavam
 *      em container menor. Viraram `minmax(min(210px,100%),1fr)`: a coluna
 *      encolhe até a largura disponível e a grade cai para uma coluna. Cinco
 *      grades e quatro controles de formulário corrigidos assim.
 *
 *   2. O QUE É LARGO DE VERDADE ROLA DENTRO DA PRÓPRIA CAIXA.
 *      Nunca na página. É o `.table-wrap`, que já existia — 18 tabelas estavam
 *      fora dele e foram envolvidas.
 *
 *   3. O QUE ROLA PRECISA DIZER QUE ROLA. ← era isto que faltava
 *      Uma caixa que rola sem sinal nenhum parece uma tabela cortada. A barra
 *      de rolagem some quando não se toca nela (é assim em toda plataforma
 *      moderna), então o único aviso de que há mais à direita era... nenhum.
 *      Abaixo, um esmaecido na borda direita que some quando se chega ao fim.
 * ══════════════════════════════════════════════════════════════════════════ */

/* A página NUNCA rola de lado. `clip` em vez de `hidden` porque `hidden` cria
   contexto de rolagem e quebra `position:sticky` dos filhos — que é o que
   segura o cabeçalho e as abas no topo. */
html{overflow-x:clip}
body{overflow-x:clip}

/* O esmaecido de borda.
 *
 * `background-attachment:local` nas duas camadas internas e `scroll` nas duas
 * de sombra é o truque clássico: as sombras ficam paradas na borda da caixa
 * enquanto as camadas brancas rolam junto com o conteúdo e as cobrem quando se
 * chega ao fim. Resultado: o esmaecido aparece só do lado em que ainda há
 * conteúdo escondido, e some sozinho ao terminar. Nenhum JavaScript.
 *
 * Como o fundo do cartão é sólido, as camadas de cobertura usam a MESMA cor —
 * senão a emenda aparece. */
.rola-lado,.table-wrap,.tabs,.tar-quadro{
  background-image:
    linear-gradient(to right, var(--card) 30%, rgba(28,28,30,0)),
    linear-gradient(to left,  var(--card) 30%, rgba(28,28,30,0)),
    linear-gradient(to right, rgba(0,0,0,.45), rgba(0,0,0,0) 14px),
    linear-gradient(to left,  rgba(0,0,0,.45), rgba(0,0,0,0) 14px);
  background-position:left center,right center,left center,right center;
  background-repeat:no-repeat;
  background-size:34px 100%,34px 100%,16px 100%,16px 100%;
  background-attachment:local,local,scroll,scroll}

/* A barra de abas tem o fundo da própria barra, não o do cartão. */
.tabs{background-image:
    linear-gradient(to right, var(--bg) 30%, rgba(0,0,0,0)),
    linear-gradient(to left,  var(--bg) 30%, rgba(0,0,0,0)),
    linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,0) 14px),
    linear-gradient(to left,  rgba(0,0,0,.5), rgba(0,0,0,0) 14px)}

/* Barra fina e discreta, no lugar da barra grossa do sistema. Ela ainda aparece
   ao rolar — o esmaecido avisa que dá para rolar, a barra mostra onde se está. */
.rola-lado::-webkit-scrollbar,.table-wrap::-webkit-scrollbar,
.tar-quadro::-webkit-scrollbar{height:8px}
.rola-lado::-webkit-scrollbar-thumb,.table-wrap::-webkit-scrollbar-thumb,
.tar-quadro::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:4px}
.rola-lado::-webkit-scrollbar-track,.table-wrap::-webkit-scrollbar-track{background:transparent}

/* Movimento reduzido não desliga o aviso — ele não é animação, é informação. */

/* ── BOTÕES ───────────────────────────────────────────────────────────────── */
.btn{padding:8px 16px;border-radius:var(--r-ctl);border:1px solid transparent;cursor:pointer;
  font-size:12px;font-weight:500;font-family:inherit;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;
  transition:background-color var(--t-toque) var(--ease-out),
             border-color var(--t-toque) var(--ease-out),
             color var(--t-toque) var(--ease-out),
             transform var(--t-toque) var(--ease-out)}
/* Resposta no apertar, não no soltar: esperar o clique parece morto. */
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
/* TRÊS PAPÉIS, E NÃO OITO ESTILOS.
 *
 * Eram oito, e o problema não era o número — era que a cor deixara de
 * significar coisa alguma. Levantado em 07/09 no HTML de verdade:
 *
 *   "Salvar"   aparecia 6x em VERDE (.btn-add) e 5x em VERMELHO (.btn-save)
 *   "Cancelar" aparecia 13x neutro e 1x em VERMELHO DESTRUTIVO (.btn-del)
 *
 * A mesma palavra em duas cores ensina que a cor não quer dizer nada; e um
 * "Cancelar" vermelho ensina algo pior, que é hesitar diante do botão que não
 * destrói nada.
 *
 * Agora a cor é a CONSEQUÊNCIA da ação:
 *
 *   .btn-primary    compromete alguma coisa: Salvar, Entrar, Enviar, Lançar
 *   .btn-secondary  não compromete: Cancelar, Editar, "+ Nova loja", Exportar
 *   .btn-danger     destrói: Excluir, Apagar, Remover
 *
 * "+ Nova loja" é SECUNDÁRIO de propósito: ele abre um formulário, e quem
 * compromete é o "Salvar" lá dentro. Um primário por tela — se dois botões
 * disputam o vermelho, um deles não é o principal.
 */
/* ⚠️ TEXTO SOBRE AMBAR E TINTA, NUNCA BRANCO. Branco sobre #F5A524 da 1,9:1
   e o rotulo do botao primario simplesmente some. Tinta da 9,3:1. */
.btn-primary{background:var(--accent);color:var(--text-sobre-ambar);border-color:var(--accent);font-weight:600}
/* ⚠️ #E00000 e VERMELHO PURO, sobra da paleta anterior ao Ordane. O botao de
   acao principal — inclusive o de salvar — ficava vermelho sob o mouse, num
   sistema onde vermelho quer dizer alerta. "Evite usar a mesma cor para
   significar coisas diferentes" (Cor > Boas praticas). O ambar escuro da
   identidade ja existia como token. */
.btn-primary:hover{background:var(--ord-ambar-fundo)}
/* Secundario da Apple: preenchimento suave e SEM borda, nao um contorno vazio.
   A borda dura em volta de tudo e o que faz uma tela parecer um formulario. */
.btn-secondary{background:var(--card2);color:var(--text);border-color:transparent}
.btn-secondary:hover{background:var(--card3)}
/* ⚠️ DESTRUTIVO TEM COR PROPRIA, e ela nao e a da marca. Enquanto o accent
   era vermelho, `--accent-soft` servia aos dois; com a marca em Ambar, herdar
   dela pintaria o botao de EXCLUIR de cor de aviso. Alerta #FF4D4D da 5,3:1. */
.btn-danger{background:var(--surface-alerta-suave);color:var(--ord-alerta);border-color:#3A2427}
.btn-danger:hover{background:rgba(255,77,77,.22);border-color:#5A2E31}

/* Aliases dos nomes antigos, mapeados pelo PESO VISUAL que cada um tinha —
 * sólido = primário, suave/transparente = secundário, vermelho suave = perigo.
 * O HTML foi migrado junto; ficam porque são 508 KB e uma ocorrência esquecida
 * num template gerado em JS viraria um botão SEM ESTILO NENHUM, pior do que um
 * botão da cor errada. */
.btn-save,.btn-blue{background:var(--accent);color:var(--text-sobre-ambar);border-color:var(--accent);
  font-weight:600;box-shadow:var(--e1),inset 0 1px 0 rgba(255,255,255,.16)}
.btn-save:hover,.btn-blue:hover{background:var(--ord-ambar-fundo)}
.btn-cancel,.btn-ghost,.btn-edit,.btn-add{background:transparent;color:var(--muted);
  border-color:var(--border-2)}
.btn-cancel:hover,.btn-ghost:hover,.btn-edit:hover,.btn-add:hover{background:var(--card2);color:var(--text)}
.btn-del{background:var(--surface-alerta-suave);color:var(--ord-alerta);border-color:#3A2427}
.btn-del:hover{background:rgba(255,77,77,.22);border-color:#5A2E31}
.action-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* ⚠️ O FOCO PRECISA VALER PARA TUDO, e a regra abaixo so alcancava botao,
   aba, chip e link — campo, select e textarea ficavam sem. O handoff pede um
   apanhador, e ele vem ANTES da regra especifica para nao vencer dela. */
:focus-visible{outline:2px solid var(--ord-ambar);outline-offset:3px}

/* Foco visível em tudo que se alcança pelo teclado. O painel não tinha nenhum. */
.btn:focus-visible,.tab-btn:focus-visible,.area-btn:focus-visible,.chip:focus-visible,
button:focus-visible,a:focus-visible{outline:none;
  box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent-text)}

/* ── CAMPOS ───────────────────────────────────────────────────────────────── */
input[type=text],input[type=number],input[type=date],input[type=time],
input[type=password],select,textarea{
  background:var(--well);border:1px solid var(--borda-contorno);color:var(--text);
  padding:8px 11px;border-radius:var(--r-ctl);font-size:13px;font-family:inherit;
  transition:border-color var(--t-toque) var(--ease-out),box-shadow var(--t-toque) var(--ease-out)}
input::placeholder,textarea::placeholder{color:var(--text-4)}
input:hover,select:hover,textarea:hover{border-color:var(--border-2)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent-text);
  box-shadow:0 0 0 3px rgba(245,165,36,.18)}
input[type=checkbox]{width:16px;height:16px;accent-color:var(--blue);cursor:pointer;vertical-align:middle}
input[type=color]{background:var(--well);border:1px solid var(--borda-contorno);border-radius:var(--r-ctl);cursor:pointer}

.mono,.gps-text{font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,'Courier New',monospace;
  font-size:11px;color:var(--text-3);line-height:1.45}
.na{color:var(--text-4);font-size:12px}

/* ── MAPAS ────────────────────────────────────────────────────────────────── */
.map-full{height:calc(100vh - 260px);min-height:380px;border-radius:12px;
  border:1px solid var(--border);overflow:hidden;box-shadow:var(--e1)}
.map-mid{height:420px;border-radius:12px;border:1px solid var(--border);overflow:hidden}

/* ── FICHAS DE VEÍCULO ────────────────────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;
  border-radius:var(--r-pill);border:1px solid var(--border);background:var(--card);
  color:var(--muted);font-size:12px;cursor:pointer;user-select:none;white-space:nowrap;
  transition:background-color var(--t-toque) var(--ease-out),
             border-color var(--t-toque) var(--ease-out),color var(--t-toque) var(--ease-out),
             transform var(--t-toque) var(--ease-out)}
.chip:hover{border-color:var(--border-2);color:var(--text)}
.chip:active{transform:scale(.97)}
/* ⚠️ SOBRAVA VERMELHO AQUI, e ele escapou da varredura: `rgba(255,90,95)` e
 * outro número do mesmo vermelho antigo. Com a marca em âmbar, o chip ativo
 * ficava de uma cor que não existe mais na paleta. */
.chip.on{background:var(--surface-ambar-suave);border-color:rgba(245,165,36,.35);
  color:var(--ord-ambar);font-weight:600}
.chip .pt{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0}
.chip.off-line{opacity:.5}
.chips-acoes{display:flex;gap:6px;margin-right:4px}
.chips-acoes button{padding:6px 12px;font-size:12px;border-radius:var(--r-pill);
  border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;
  font-family:inherit;transition:color var(--t-toque) var(--ease-out),border-color var(--t-toque) var(--ease-out)}
.chips-acoes button:hover{color:var(--text);border-color:var(--border-2)}

/* ── ROTAS EM DUAS COLUNAS ────────────────────────────────────────────────── */
.rotas-split{display:flex;gap:0;align-items:flex-start;--lado:40%}
.rotas-lado{flex:0 0 var(--lado);max-width:var(--lado);max-height:calc(100vh - 210px);
  overflow-y:auto;padding-right:8px;scrollbar-width:thin}
.rotas-lado::-webkit-scrollbar{width:8px}
.rotas-lado::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.rotas-lado::-webkit-scrollbar-thumb:hover{background:var(--border-2)}
.rotas-mapa{flex:1 1 auto;min-width:0;position:sticky;top:12px}
.rotas-mapa .map-full{height:calc(100vh - 210px)}
.rotas-alca{flex:0 0 14px;align-self:stretch;cursor:col-resize;position:relative;
  display:flex;align-items:center;justify-content:center;touch-action:none}
.rotas-alca::before{content:'';width:3px;height:100%;background:var(--border);border-radius:2px;
  transition:background-color var(--t-toque) var(--ease-out)}
.rotas-alca:hover::before,.rotas-alca.arrastando::before{background:var(--accent)}
.rotas-alca::after{content:'';position:absolute;width:14px;height:32px;border-radius:5px;
  background:var(--card);border:1px solid var(--border);
  transition:border-color var(--t-toque) var(--ease-out)}
.rotas-alca:hover::after{border-color:var(--accent)}
body.arrastando-alca{cursor:col-resize;user-select:none}
body.arrastando-alca iframe,body.arrastando-alca .leaflet-container{pointer-events:none}
.rotas-split.empilhado{flex-direction:column;--lado:100%}
.rotas-split.empilhado .rotas-lado{flex:1 1 auto;max-width:100%;width:100%;max-height:none;
  overflow:visible;margin-top:14px;padding-right:0}
.rotas-split.empilhado .rotas-mapa{flex:1 1 auto;width:100%;position:static}
.rotas-split.empilhado .rotas-alca{display:none}
@media (max-width:1100px){
  .rotas-split{flex-direction:column}
  .rotas-lado,.rotas-mapa{flex:1 1 auto;max-width:100%;width:100%;position:static;
    max-height:none;overflow:visible}
  .rotas-mapa .map-full{height:60vh}
  .rotas-alca{display:none}
}

/* ── CARTÕES E FORMULÁRIOS ────────────────────────────────────────────────── */
.toolbar{display:flex;gap:12px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.toolbar label{font-size:12px;color:var(--text-3);display:flex;align-items:center;gap:8px;
  font-weight:500}
.toolbar select{min-width:min(170px,100%)}
/* ⚠️ `border:none` ERA A CAUSA LITERAL DE "FALTA DE BORDAS E AGRUPAMENTO".
 *
 * O bloco se distinguia do fundo só pela cor — Grafite #1C1C1E sobre Preto —,
 * que dá 1,3:1 de diferença. Numa tela de loja, com brilho baixo e luz de
 * galpão em cima, dois blocos colados viram um só. O filete de 1 px em
 * #3A3A3C é o que a identidade chama de "traço decorativo", e é ele que diz
 * onde um assunto termina e o outro começa.
 *
 * ⚠️ E O TÍTULO ERA MENOR QUE O TEXTO: 14 px de `h3` contra 15 px de corpo.
 * Hierarquia invertida não é questão de gosto — quem varre a tela procurando
 * o assunto certo lê primeiro o que é maior, e aqui o maior era o parágrafo.
 * Sobe para o subtítulo da escala (19 px) na fonte de display. */
.card{background:var(--card);border:1px solid var(--borda-contorno);border-radius:var(--r-sup);
  padding:20px;margin-bottom:16px}
.card h3{font-family:var(--ord-f-display);font-size:var(--fs-subtitulo);font-weight:var(--fw-forte);
  margin-bottom:8px;color:var(--text);letter-spacing:var(--ls-titulo);
  display:flex;align-items:center;gap:8px}
.card p.hint,.hint{font-size:12px;color:var(--muted);margin-bottom:14px;line-height:1.6}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:14px}
.field{display:flex;flex-direction:column;gap:5px}
  /* ⚠️ CAIXA ALTA + 10,5px + espacamento e a combinacao mais dificil de ler, e
     este e o rotulo que DIZ O QUE VAI NO CAMPO. Caixa normal, 11,5px, peso 600. */
.field label{font-size:11.5px;color:var(--text-3);text-transform:none;font-weight:600;
  letter-spacing:.07em;font-weight:600}
.field input,.field select,.field textarea{width:100%}
#phoneList,#fleetPhoneList{list-style:none;margin-bottom:12px;min-height:30px}
#phoneList li,#fleetPhoneList li{display:flex;align-items:center;gap:10px;padding:7px 0;
  border-bottom:1px solid #1B1E23;font-size:13px}
.play-ev{color:var(--green);font-weight:600}
.pause-ev{color:var(--yellow);font-weight:600}

/* ── AVISO FLUTUANTE ─────────────────────────────────────────────────────────
   Transição, não keyframes: o aviso pode disparar duas vezes em um segundo e
   a transição reaproveita o valor atual em vez de recomeçar do zero. */
#adminToast{position:fixed;bottom:24px;right:24px;background:var(--card2);color:var(--text);
  padding:12px 20px;border-radius:var(--r-sup);border:1px solid var(--border-2);
  box-shadow:var(--e3);opacity:0;transform:translateY(10px);z-index:9999;font-size:13px;
  pointer-events:none;max-width:min(420px,calc(100vw - 48px));
  transition:opacity var(--t-menu) var(--ease-out),transform var(--t-menu) var(--ease-out)}
#adminToast.visivel{opacity:1;transform:none}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ── REGRAS DE ALERTA ─────────────────────────────────────────────────────── */
.alert-grupo{margin-bottom:10px;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--blue-text);font-weight:700;border-bottom:1px solid var(--border);padding-bottom:7px}
.alert-row{display:flex;gap:16px;align-items:flex-start;padding:14px 0;
  border-bottom:1px solid #1B1E23;flex-wrap:wrap}
.alert-row:last-child{border-bottom:none}
.alert-checks{display:flex;flex-direction:column;gap:9px;min-width:min(150px,100%)}
.alert-checks label{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);
  cursor:pointer;white-space:nowrap}
.alert-main{flex:1;min-width:min(240px,100%)}
.alert-main b{font-size:13.5px;font-weight:600}
.alert-main .d{font-size:12px;color:var(--text-3);margin-top:3px}
.alert-params{display:flex;gap:10px;flex-wrap:wrap;margin-top:11px;align-items:center}
.alert-params .p{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);
  background:var(--well);border:1px solid var(--border);border-radius:var(--r-ctl);padding:5px 9px}
.alert-params input[type=number]{width:74px}
.alert-params input[type=time]{width:96px}

/* ── MODAL ────────────────────────────────────────────────────────────────────
   Escurece para focar e empurra o fundo para trás. O painel não é ancorado em
   um gatilho, então cresce do centro — não de um canto. Nunca de scale(0):
   nada no mundo real aparece do nada. */
@keyframes modal-fundo{from{opacity:0}to{opacity:1}}
@keyframes modal-sobe{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}
.modal-bg{position:fixed;inset:0;background:rgba(6,7,9,.68);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);z-index:2000;display:flex;align-items:flex-start;
  justify-content:center;padding:48px 16px;overflow:auto;
  animation:modal-fundo var(--t-modal) var(--ease-out) both}
.modal{background:var(--card);border:1px solid var(--border-2);border-radius:14px;padding:26px;
  width:100%;max-width:720px;box-shadow:var(--e3),var(--lustro);
  animation:modal-sobe var(--t-modal) var(--ease-out) both}
.modal h3{margin-bottom:16px;font-size:17px;font-weight:600;letter-spacing:-.02em}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}

/* ── MIUDEZAS ─────────────────────────────────────────────────────────────── */
.kpi-alertas{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.pill{padding:3px 10px;border-radius:var(--r-pill);font-size:11px;font-weight:600;
  background:var(--well);border:1px solid var(--border)}
.replay{display:flex;gap:12px;align-items:center;margin-top:12px;flex-wrap:wrap}
.replay input[type=range]{flex:1;min-width:min(220px,100%);accent-color:var(--blue)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:10px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;
  vertical-align:-1px}

/* Leaflet no escuro: o painel de controle padrão é branco e brigava com tudo */
.leaflet-container{background:#101215}
.leaflet-bar a,.leaflet-control-attribution{background:var(--card) !important;color:var(--muted) !important;
  border-color:var(--border) !important}
.leaflet-bar a:hover{background:var(--card2) !important}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--card2);color:var(--text);
  box-shadow:var(--e3);border-radius:var(--r-sup)}
.leaflet-popup-content{font-size:12.5px;line-height:1.55}
.leaflet-popup-content a{color:var(--blue-text)}

/* -- Cartoes de tarefa -----------------------------------------------------
   A tabela serve para procurar; o cartao serve para AGIR. Os botoes de passo
   ficam no proprio cartao para o caminho mais comum nao exigir abrir a ficha. */
.tar-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(310px,100%),1fr));gap:14px}
.tar-quadro{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;align-items:flex-start}
.tar-coluna{flex:0 0 300px;display:flex;flex-direction:column;gap:12px;
  border-radius:10px;padding:6px;transition:background .12s,box-shadow .12s}
/* O destino possivel acende no comeco do gesto, nao no fim: a pessoa precisa
   saber para onde pode ir enquanto ainda esta decidindo. */
.tar-coluna.pode-soltar{background:rgba(120,170,255,.07);box-shadow:inset 0 0 0 1px rgba(120,170,255,.28)}
.tar-coluna.sobre{background:rgba(120,170,255,.16);box-shadow:inset 0 0 0 2px rgba(120,170,255,.55)}
.tar-card.arrastavel{cursor:grab}
.tar-card.arrastavel:active{cursor:grabbing}
.tar-card.arrastando{opacity:.45;transform:rotate(1.2deg)}
.tar-coluna h5{margin:0 0 2px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-3);font-weight:600;display:flex;gap:7px;align-items:baseline}
.tar-vazia{color:var(--text-4);font-size:13px;padding:10px 2px}

.tar-card{background:var(--card);border:1px solid var(--border);border-radius:12px;
  padding:13px 14px 11px;box-shadow:var(--e1);display:flex;flex-direction:column;gap:8px}
.tar-card.atrasado{border-left:3px solid var(--accent);padding-left:11px}
.tar-card.fim{opacity:.62}
.tar-card header{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tar-cod{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.tar-prio{font-size:11px;font-weight:600;margin-left:auto}
.tar-card h4{margin:0;font-size:15px;line-height:1.35;font-weight:600;color:var(--text)}
.tar-desc{margin:0;font-size:13px;color:var(--muted);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tar-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.tar-meta .na{font-style:normal}
.tar-prog{display:flex;gap:8px;align-items:center;font-size:11.5px;color:var(--muted)}
.tar-prog-barra{flex:1;height:5px;border-radius:3px;background:var(--well);overflow:hidden}
.tar-prog-barra i{display:block;height:100%;background:var(--green);border-radius:3px}
.tar-card footer{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px;
  border-top:1px solid var(--border);padding-top:9px}
.tar-card footer .tar-abrir{margin-left:auto}

/* -- Cobranca ------------------------------------------------------------- */
.efi-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:20px}
.efi-grade > div{background:var(--card);padding:15px 16px 17px}
.efi-grade .v{font-size:30px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:var(--text)}
.efi-grade .k{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.35}
.efi-grade .alerta .v{color:var(--accent-text)}
.efi-barra{height:7px;border-radius:4px;background:var(--well);overflow:hidden;min-width:70px}
.efi-barra i{display:block;height:100%;border-radius:4px}
.efi-sem{color:var(--text-4);font-size:12.5px}


/* ══════════════════════════════════════════════════════════════════════════
   PAINEL DE SEÇÕES — o fim do scroll de três metros
   ══════════════════════════════════════════════════════════════════════════
   Ajustes empilhava 6 cartões e 25 campos numa coluna só; Acesso ao painel e
   Cargos faziam o mesmo. Rolar não é navegar: quem procura um parâmetro passa
   por todos os outros antes de achar, e perde o lugar ao voltar.

   A HIG de settings no desktop é explícita — "uma janela de ajustes contém uma
   barra com botões para alternar entre PAINÉIS, cada um com um grupo de
   ajustes relacionados". É isso: índice à esquerda, um painel por vez à
   direita, e a rolagem acontece DENTRO do painel, nunca na página.

   Abaixo de 860px vira uma coluna: o índice vira uma faixa horizontal de
   pílulas, que é o equivalente móvel do mesmo padrão. */
.secoes{display:grid;grid-template-columns:232px 1fr;gap:18px;align-items:start}
.secoes-indice{display:flex;flex-direction:column;gap:2px;position:sticky;top:8px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-sup);padding:6px}
.secoes-indice button{display:flex;align-items:center;gap:10px;width:100%;
  /* 40px de altura: acima do mínimo de 24pt para alvo de ponteiro, e confortável
     para quem usa o painel no tablet da loja. */
  min-height:40px;padding:9px 12px;background:none;border:none;border-radius:10px;
  color:var(--muted);font:inherit;font-size:14px;text-align:left;cursor:pointer;
  transition:background var(--t-aba) var(--ease-out),color var(--t-aba) var(--ease-out)}
.secoes-indice button:hover{background:var(--well);color:var(--text)}
.secoes-indice button.on{background:var(--accent-soft);color:var(--accent-text);font-weight:600}
.secoes-indice button .n{margin-left:auto;font-size:12px;color:var(--text-4);font-variant-numeric:tabular-nums}
.secoes-indice button.on .n{color:var(--accent-text)}
.secoes-painel{min-width:0}
.secoes-painel > section{display:none}
.secoes-painel > section.on{display:block}
/* ⚠️ A ROLAGEM MORA AQUI, e não na página. Sem o limite de altura o painel
   volta a empurrar o rodapé para baixo e o problema reaparece por dentro. */
.secoes-corpo{max-height:calc(100vh - 210px);overflow-y:auto;overscroll-behavior:contain;
  padding-right:4px}
.secoes-corpo::-webkit-scrollbar{width:10px}
.secoes-corpo::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px;
  border:3px solid transparent;background-clip:content-box}
@media (max-width:860px){
  .secoes{grid-template-columns:1fr}
  .secoes-indice{position:static;flex-direction:row;overflow-x:auto;gap:6px}
  .secoes-indice button{width:auto;white-space:nowrap;min-height:36px}
  .secoes-corpo{max-height:none;overflow:visible}
}

/* ══════════════════════════════════════════════════════════════════════════
   LISTA AGRUPADA — o que faltava quando a tela parecia "sem bordas"
   ══════════════════════════════════════════════════════════════════════════
   Campos soltos num grid não dizem o que pertence a quê. A HIG de layout pede
   exatamente isto: "agrupe itens relacionados … use espaço negativo, formas de
   fundo, cores ou linhas separadoras para mostrar quando elementos estão
   relacionados".

   Um contêiner arredondado, linhas com separador entre elas e nenhuma borda
   externa por linha — é a lista agrupada do iOS/macOS, e é o que transforma
   uma pilha de inputs numa tela legível. */
.lag{background:var(--card);border:1px solid var(--border);border-radius:var(--r-sup);
  overflow:hidden}
.lag + .lag{margin-top:16px}
.lag-topo{padding:13px 16px;border-bottom:1px solid var(--border);background:var(--well)}
.lag-topo h4{margin:0;font-size:14px;letter-spacing:-.01em}
.lag-topo .hint{margin:4px 0 0}
.lag-item{display:flex;align-items:center;gap:14px;padding:12px 16px;min-height:52px}
/* O separador é entre itens, nunca depois do último: borda no último item
   duplica a borda do contêiner e vira uma linha grossa. */
.lag-item + .lag-item{border-top:1px solid var(--border)}
.lag-item:hover{background:rgba(255,255,255,.028)}
.lag-rot{flex:1;min-width:0}
.lag-rot b{display:block;font-weight:500;font-size:14px}
.lag-rot .hint{margin:3px 0 0;font-size:12.5px;line-height:1.45}
.lag-val{flex-shrink:0;display:flex;align-items:center;gap:8px;justify-content:flex-end}
.lag-val input[type=text],.lag-val input[type=number],.lag-val select{max-width:220px}
.lag-vazio{padding:26px 16px;text-align:center;color:var(--text-4);font-size:13.5px}
@media (max-width:640px){
  .lag-item{flex-direction:column;align-items:stretch;gap:9px}
  .lag-val{justify-content:flex-start}
  .lag-val input,.lag-val select{max-width:none;width:100%}
}

/* ══════════════════════════════════════════════════════════════════════════
   PAINEL DE ABA DO AGENTE — a moldura que a modal dava e a aba não
   ══════════════════════════════════════════════════════════════════════════ */
.ag-painel{padding:20px 22px}
.ag-painel > h3:first-child{margin:0 0 4px}
.ag-painel h4{margin:20px 0 8px;font-size:14px;letter-spacing:-.01em}
.ag-painel > .card{border:1px solid var(--border);background:var(--well)}
.ag-painel .table-wrap{border:1px solid var(--border);border-radius:var(--r-ctl);overflow:hidden}
.ag-painel .toolbar{margin-bottom:14px}
@media (max-width:640px){ .ag-painel{padding:16px 14px} }

/* ══════════════════════════════════════════════════════════════════════════
   TABELA COM ROLAGEM PRÓPRIA — cabeçalho que não foge
   ══════════════════════════════════════════════════════════════════════════
   Cargos e Acesso ao painel cresciam para baixo sem limite: quarenta linhas
   empurravam o rodapé, e ao rolar o cabeçalho sumia — a partir da linha vinte
   ninguém sabia mais qual coluna era qual. A rolagem passa para dentro da
   tabela e o cabeçalho gruda. */
.table-rolo{max-height:calc(100vh - 330px);overflow:auto;overscroll-behavior:contain}
.table-rolo thead th{position:sticky;top:0;z-index:2;background:var(--well)}
@media (max-width:860px){ .table-rolo{max-height:none} }

/* ══════════════════════════════════════════════════════════════════════════
   CONVERSAS — duas colunas, como todo mundo já sabe usar
   ══════════════════════════════════════════════════════════════════════════
   A lista e a conversa moravam uma embaixo da outra: escolher um contato
   empurrava as mensagens para fora da tela, e voltar para a lista era rolar de
   novo. Quem usa WhatsApp Web, Umbler ou OwlZap já tem o modelo mental pronto
   — lista à esquerda, conversa à direita, as duas rolando por conta própria.
   Inventar outro arranjo aqui só criaria uma coisa nova para aprender. */
.wa{display:grid;grid-template-columns:330px 1fr;gap:0;height:calc(100vh - 196px);
  min-height:460px;background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-sup);overflow:hidden}
.wa-lista{border-right:1px solid var(--border);display:flex;flex-direction:column;min-width:0}
.wa-busca{padding:10px;border-bottom:1px solid var(--border);background:var(--well)}
.wa-busca input{width:100%}
.wa-rolo{flex:1;overflow-y:auto;overscroll-behavior:contain}
.wa-item{display:flex;gap:11px;padding:11px 13px;cursor:pointer;border-bottom:1px solid var(--border);
  transition:background var(--t-aba) var(--ease-out)}
.wa-item:hover{background:var(--well)}
.wa-item.on{background:var(--accent-soft)}
.wa-ava{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:flex;
  align-items:center;justify-content:center;background:var(--well);border:1px solid var(--border);
  font-size:14px;font-weight:600;color:var(--muted)}
.wa-meio{flex:1;min-width:0}
.wa-nome{display:flex;align-items:baseline;gap:8px}
.wa-nome b{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-nome time{margin-left:auto;font-size:11px;color:var(--text-4);white-space:nowrap}
.wa-previa{margin:2px 0 0;font-size:12.5px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-fio{display:flex;flex-direction:column;min-width:0}
.wa-cabeca{padding:12px 16px;border-bottom:1px solid var(--border);background:var(--well);
  display:flex;align-items:center;gap:12px}
.wa-msgs{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:18px;
  display:flex;flex-direction:column;gap:9px;background:var(--bg)}
/* A bolha nunca passa de 74%: linha longa demais perde a próxima ao voltar,
   e é o mesmo motivo por que a HIG limita a largura de texto. */
.wa-bolha{max-width:74%;padding:9px 13px;border-radius:14px;font-size:14px;line-height:1.5;
  white-space:pre-wrap;word-break:break-word}
.wa-bolha.dele{align-self:flex-start;background:var(--card);border:1px solid var(--border);
  border-bottom-left-radius:5px}
.wa-bolha.nossa{align-self:flex-end;background:#0B3D2E;border:1px solid #14624A;
  border-bottom-right-radius:5px}
.wa-bolha time{display:block;margin-top:4px;font-size:10.5px;color:var(--text-4);text-align:right}
.wa-nada{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;
  gap:10px;color:var(--text-4);font-size:14px;padding:30px;text-align:center}
@media (max-width:860px){
  .wa{grid-template-columns:1fr;height:auto}
  .wa-lista{border-right:none;border-bottom:1px solid var(--border);max-height:44vh}
  .wa-fio{min-height:56vh}
  .wa-msgs{min-height:40vh}
  /* No celular só uma das duas aparece por vez — duas colunas espremidas não
     servem a nenhuma das duas. */
  .wa.vendo .wa-lista{display:none}
  .wa:not(.vendo) .wa-fio{display:none}
}

/* ══════════════════════════════════════════════════════════════════════════════
   ORDANE — casca do ecossistema e componentes
   Etapas 3, 4 e 5 do `design_handoff_painel_ordane/IMPLEMENTACAO.md`.
   Vem NO FIM de propósito: as regras antigas continuam valendo para as telas
   que ainda não foram redesenhadas, e estas só alcançam os elementos novos,
   todos prefixados `ord-`. Nenhum seletor antigo foi apagado.
   ══════════════════════════════════════════════════════════════════════════ */

.ord-app{display:flex;flex-direction:column;height:100vh;min-height:0;position:relative;overflow:hidden}

/* ---------- topo fixo ---------- */
.ord-topo{flex:0 0 var(--topo-altura);display:flex;align-items:center;gap:12px;padding:0 14px;
  background:var(--surface-poco);border-bottom:1px solid var(--borda-cor)}
.ord-topo__marca{height:44px;display:flex;align-items:center;gap:8px;border:none;background:transparent;
  color:var(--ord-ambar);border-radius:var(--ord-r-ctl);cursor:pointer;padding:0 6px}
.ord-topo__ferramenta{font-family:var(--ord-f-display);font-weight:var(--fw-forte);font-size:15px;color:var(--text-forte);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ord-topo__busca{flex:1;max-width:440px;height:38px;display:flex;align-items:center;gap:9px;padding:0 12px;
  background:var(--surface-cartao);border:1px solid var(--borda-contorno);border-radius:var(--ord-r-ctl);
  color:var(--text-apoio);font-size:var(--fs-apoio);cursor:pointer;text-align:left}
.ord-topo__busca kbd{font-family:var(--ord-f-num);font-size:10px;padding:2px 6px;border:1px solid var(--borda-cor);border-radius:6px}
.ord-topo__carimbo{display:flex;align-items:center;gap:7px;height:30px;padding:0 11px;border:1px solid var(--borda-cor);
  border-radius:var(--ord-r-pill);color:var(--text-apoio);font-size:12px;white-space:nowrap}
.ord-topo__carimbo i{width:7px;height:7px;border-radius:var(--ord-r-pill);background:var(--ord-verde)}
.ord-topo__carimbo.velho{color:var(--ord-ambar)} .ord-topo__carimbo.velho i{background:var(--ord-ambar)}
.ord-icone-btn{width:44px;height:44px;display:grid;place-items:center;border:none;background:transparent;
  color:var(--text-apoio);border-radius:var(--ord-r-ctl);cursor:pointer}
.ord-icone-btn:hover{background:var(--surface-elevada);color:var(--text-forte)}

.ord-corpo{flex:1;display:flex;min-height:0}

/* ---------- trilho de ferramentas ---------- */
.ord-trilho{flex:0 0 var(--trilho-largura);background:var(--surface-poco);border-right:1px solid var(--borda-cor);
  padding:10px 0;display:flex;flex-direction:column;align-items:center;gap:3px;overflow-y:auto}
.ord-trilho__sep{width:44px;height:1px;background:var(--borda-cor);margin:7px 0;flex:none}
.ord-ferramenta{position:relative;width:62px;padding:9px 2px;border:none;border-radius:12px;background:transparent;
  color:var(--text-apoio);display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;flex:none;
  /* ⚠️ 9,5px fica abaixo do minimo de celular (11pt) E do de desktop (10pt), e
     este e o rotulo da navegacao principal — o que diz onde a pessoa esta. */
  font-family:var(--ord-f-texto);font-size:11px;font-weight:var(--fw-forte);line-height:1.1;text-align:center;
  transition:background var(--t-toque) var(--ord-ease-out),color var(--t-toque) var(--ord-ease-out)}
.ord-ferramenta:hover{background:var(--surface-elevada);color:var(--text-forte)}
.ord-ferramenta[aria-current="page"]{background:var(--surface-ambar-suave);color:var(--ord-ambar);
  box-shadow:inset 3px 0 0 var(--ord-ambar)}
.ord-ferramenta__selo{position:absolute;top:4px;right:6px;min-width:18px;height:18px;border-radius:var(--ord-r-pill);
  background:var(--ord-ambar);color:var(--text-sobre-ambar);font-size:11px;font-weight:700;display:grid;place-items:center}
.ord-ferramenta--externa{opacity:.62}

/* ---------- painel de telas ---------- */
.ord-telas{flex:0 0 var(--painel-telas);background:var(--surface-fundo);border-right:1px solid var(--borda-cor);
  padding:18px 10px 12px;display:flex;flex-direction:column;overflow-y:auto}
.ord-telas__cabeca{padding:2px 10px 14px}
.ord-telas__cabeca h2{font-size:17px;font-family:var(--ord-f-display);color:var(--text-forte);margin:0}
.ord-telas__cabeca p{margin:3px 0 0;font-size:12px;color:var(--text-apoio)}
.ord-telas__grupo{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.ord-eti{font-size:var(--fs-etiqueta);font-weight:var(--fw-forte);letter-spacing:var(--ls-etiqueta);
  text-transform:uppercase;color:var(--text-tenue);padding:0 10px 4px}
.ord-tela-btn{display:flex;align-items:center;gap:8px;width:100%;min-height:38px;padding:0 10px;border:none;border-radius:9px;
  background:transparent;color:var(--text-corrente);text-align:left;cursor:pointer;
  font-family:var(--ord-f-texto);font-size:14px;transition:background var(--t-aba) var(--ord-ease-out)}
.ord-tela-btn:hover{background:var(--surface-elevada);color:var(--text-forte)}
.ord-tela-btn[aria-current="page"]{background:var(--surface-ambar-suave);color:var(--ord-ambar);
  font-weight:var(--fw-forte);box-shadow:inset 3px 0 0 var(--ord-ambar)}
.ord-telas__rodape{margin-top:auto;padding:12px 10px 0;border-top:1px solid var(--borda-cor);
  display:flex;flex-direction:column;gap:4px;font-size:var(--fs-micro);color:var(--text-tenue)}

/* ---------- contêiner de tela ---------- */
.ord-tela{flex:1;min-width:0;display:flex;flex-direction:column;overflow-y:auto;overflow-x:clip}
.ord-cabecalho{padding:20px 24px 0;display:flex;flex-direction:column;align-items:stretch;gap:12px}
/* ⚠️ 29/09/2026: `.ord-tela` e coluna flex COM rolagem, e filho de flex encolhe
   por padrao. Em tela longa (Agente > Redes sociais: 1.175 px de conteudo em
   840 de janela) o cabecalho foi espremido para 60 px e o titulo, o carimbo e o
   botao Salvar vazaram por cima do primeiro card. Nada aqui dentro encolhe:
   quem rola e a `.ord-tela`. */
.ord-tela > *{flex-shrink:0}
.ord-cabecalho__linha{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ord-cabecalho h1{font-size:var(--fs-titulo);font-family:var(--ord-f-display);color:var(--text-forte);margin:0}
.ord-cabecalho__acoes{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ---------- índice lateral ---------- */
.ord-indice{width:var(--indice-largura);flex:0 0 auto;display:flex;flex-direction:column;gap:2px;position:sticky;top:0}
.ord-indice button{display:flex;align-items:center;min-height:36px;padding:0 10px;text-align:left;background:transparent;
  border:none;border-left:2px solid var(--borda-cor);color:var(--text-apoio);cursor:pointer;
  font-family:var(--ord-f-texto);font-size:var(--fs-apoio)}
.ord-indice button[aria-current="true"]{border-left-color:var(--ord-ambar);color:var(--ord-ambar);font-weight:var(--fw-forte)}

/* ---------- busca global ---------- */
.ord-veu{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;justify-content:center;
  align-items:flex-start;padding-top:88px;z-index:4000}
.ord-veu[hidden]{display:none}
.ord-paleta{width:min(620px,92%);background:var(--surface-cartao);border:1px solid var(--borda-cor-forte);
  border-radius:var(--ord-r-folha);box-shadow:var(--e3);overflow:hidden}
.ord-paleta__campo{display:flex;align-items:center;gap:11px;padding:14px 18px;border-bottom:1px solid var(--borda-cor)}
.ord-paleta__campo input{flex:1;background:transparent;border:none;color:var(--text-forte);
  font-family:var(--ord-f-texto);font-size:16px;outline:none}
.ord-paleta__campo kbd{font-family:var(--ord-f-num);font-size:10px;padding:2px 6px;border:1px solid var(--borda-cor);border-radius:6px;color:var(--text-tenue)}
.ord-paleta__lista{max-height:340px;overflow-y:auto;padding:8px}
.ord-paleta__item{display:flex;align-items:center;gap:11px;width:100%;min-height:var(--alvo-toque);padding:0 12px;
  background:transparent;border:none;border-radius:var(--ord-r-ctl);color:var(--text-forte);
  font-family:var(--ord-f-texto);font-size:14px;text-align:left;cursor:pointer}
.ord-paleta__item:hover,.ord-paleta__item[aria-selected="true"]{background:var(--surface-elevada)}
.ord-paleta__rodape{display:flex;gap:16px;padding:11px 18px;border-top:1px solid var(--borda-cor);
  font-size:var(--fs-micro);color:var(--text-tenue)}

/* ---------- componentes ---------- */
.ord-card{background:var(--surface-cartao);border:1px solid var(--borda-contorno);border-radius:var(--ord-r-sup);
  padding:var(--e-4);display:flex;flex-direction:column;gap:12px;min-width:0}
.ord-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;background:var(--surface-cartao);
  border:1px solid var(--borda-cor);border-radius:var(--ord-r-ctl)}
.ord-filtro-dito{font-size:var(--fs-apoio);color:var(--ord-ambar)}
.ord-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--alvo-toque);padding:0 20px;
  font-family:var(--ord-f-display);font-weight:var(--fw-forte);font-size:16px;border:1px solid transparent;
  border-radius:var(--ord-r-ctl);cursor:pointer;white-space:nowrap;background:var(--ord-ambar);color:var(--text-sobre-ambar);
  transition:background var(--t-toque) var(--ord-ease-out)}
.ord-btn:hover{background:var(--ord-ambar-claro)}
.ord-btn--m{min-height:40px;padding:0 16px;font-size:15px}
.ord-btn--p{min-height:32px;padding:0 12px;font-size:13px}
.ord-btn--secundario{background:var(--surface-elevada);color:var(--text-forte);border-color:var(--borda-cor)}
.ord-selo{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--ord-r-pill);
  font-size:var(--fs-etiqueta);font-weight:var(--fw-medio);line-height:1;white-space:nowrap;
  background:var(--surface-controle);color:var(--text-forte);border:1px solid var(--borda-cor-forte)}
.ord-selo--ambar{background:var(--surface-ambar-suave);color:var(--ord-ambar);border-color:rgba(245,165,36,.35)}
.ord-selo--verde{background:var(--surface-verde-suave);color:var(--ord-verde);border-color:rgba(61,220,151,.35)}
.ord-selo--alerta{background:var(--surface-alerta-suave);color:var(--ord-alerta);border-color:rgba(255,77,77,.35)}
.ord-selo--semdado{background:transparent;color:var(--text-apoio);border-color:var(--borda-cor)}
.ord-carimbo{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-micro);color:var(--text-apoio);
  font-variant-numeric:tabular-nums}
.ord-carimbo--velho{color:var(--ord-ambar)}
.ord-vazio{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:32px 24px;
  background:var(--surface-cartao);border:1px solid var(--borda-cor);border-radius:var(--ord-r-sup)}
.ord-vazio p{margin:0;font-size:var(--fs-apoio);color:var(--text-apoio);max-width:58ch}
.ord-sem-permissao{display:flex;flex-direction:column;gap:14px;padding:24px;background:var(--surface-cartao);
  border:1px solid var(--borda-cor);border-left:3px solid var(--ord-nevoa);border-radius:var(--ord-r-sup)}
.ord-esqueleto{background:linear-gradient(90deg,var(--surface-elevada) 0%,var(--surface-controle) 50%,var(--surface-elevada) 100%);
  background-size:200% 100%;border-radius:var(--ord-r-ctl);animation:ord-esq 1.2s linear infinite}
@keyframes ord-esq{from{background-position:200% 0}to{background-position:-200% 0}}
.ord-ico{display:block;flex:none;width:24px;height:24px}
.ord-ico--p{width:20px;height:20px}
.ord-num,td.num,.tabular{font-variant-numeric:tabular-nums}

/* ---------- celular ---------- */
.ord-barra-inferior{display:none}
.ord-gaveta{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;z-index:4100}
.ord-gaveta[hidden]{display:none}
.ord-gaveta__painel{width:min(300px,84%);background:var(--surface-poco);border-right:1px solid var(--borda-cor);
  box-shadow:var(--e3);padding:14px 10px;overflow-y:auto;display:flex;flex-direction:column;align-items:stretch;
  animation:ord-entra-gaveta var(--t-menu) var(--ord-ease-gaveta)}
.ord-gaveta__painel .ord-ferramenta{flex-direction:row;width:100%;gap:11px;justify-content:flex-start;
  min-height:var(--alvo-toque);padding:0 10px;font-size:15px;text-align:left}
@keyframes ord-entra-gaveta{from{transform:translateX(-12px);opacity:0}to{transform:none;opacity:1}}
.ord-abas-moveis{display:none}   /* so no celular — ver o bloco abaixo */
@media (max-width:760px){
  .ord-trilho,.ord-telas{display:none}
  .ord-barra-inferior{flex:0 0 68px;display:flex;align-items:stretch;padding:0 4px;
    background:var(--surface-poco);border-top:1px solid var(--borda-cor)}
  .ord-barra-inferior button{flex:1;min-height:var(--alvo-toque);display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:5px;border:none;background:transparent;color:var(--text-apoio);
    font-family:var(--ord-f-texto);font-size:10px;font-weight:var(--fw-forte);cursor:pointer}
  .ord-barra-inferior button[aria-current="page"]{color:var(--ord-ambar)}
  .ord-cabecalho{padding-left:16px;padding-right:16px}
  .ord-topo__busca{max-width:none;min-width:0}
  /* 29/09/2026: no celular o texto da busca quebrava em 4 linhas e vazava do
     botao de 38 px. Uma linha, reticencias, e sem o atalho de teclado. */
  .ord-topo__busca > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .ord-topo__busca kbd{display:none}
  .ord-topo__carimbo,.ord-topo__ferramenta{display:none}
  /* 29/09/2026, dono: "o layout em celular esta horrivel". O cabecalho ocupava
     108 px fixos (etiqueta + titulo + carimbo). A etiqueta da area ja esta na
     barra de baixo; o titulo diminui; o carimbo fica numa linha pequena. */
  .ord-cabecalho{padding-top:8px;gap:8px}
  .ord-cabecalho #ordEtiqueta{display:none}
  .ord-cabecalho h1{font-size:20px;line-height:1.2}
  .ord-cabecalho .ord-carimbo{font-size:11px;margin:2px 0 0}
  /* As telas da area (ord-casca.js `pintarAbasMoveis`). */
  .ord-abas-moveis{display:flex;gap:6px;overflow-x:auto;margin:0 -16px;padding:0 16px 2px;scrollbar-width:none;
    -webkit-overflow-scrolling:touch}
  .ord-abas-moveis::-webkit-scrollbar{display:none}
  .ord-abas-moveis[hidden]{display:none}
  .ord-abas-moveis button{flex:none;min-height:36px;padding:0 14px;border-radius:18px;border:1px solid var(--borda-cor);
    background:var(--surface-cartao);color:var(--text-apoio);font-family:var(--ord-f-texto);font-size:13px;
    font-weight:var(--fw-forte);white-space:nowrap;cursor:pointer}
  .ord-abas-moveis button[aria-current="page"]{background:var(--surface-ambar-suave);color:var(--ord-ambar);border-color:var(--ord-ambar)}
  /* O indice de secoes vira uma segunda fila de chips: no celular, as abas
     de tela valem mais que ele, e duas filas fixas comem a tela. */
  .ord-cabecalho #ordIndiceChips{display:none}
  /* Recuo lateral igual em todas as areas: `.content` (Frota, Tarefas…) tinha
     28 px de cada lado — 56 px de 390 — e o Agente, zero (cartao na borda). */
  .ord-tela .content{padding-left:12px;padding-right:12px}
  #area-agente{padding:10px 12px 0}
  .ord-tela .card{padding-left:16px;padding-right:16px}
}
@media (prefers-reduced-transparency:reduce){.ord-vidro{background:var(--surface-cartao)!important;backdrop-filter:none!important}}

/* ---------- índice de tela longa, na variante de chips ----------
   Ver `ord-casca.js`: a coluna de 208 px do desenho exige reorganizar o
   layout de cada tela, e as duas piores não têm conteúdo no HTML — são
   montadas por JS. Esta é a mesma navegação de seção, na forma que o próprio
   desenho define para tela estreita. */
.ord-indice-chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
.ord-indice-chips button{flex:none;height:34px;display:inline-flex;align-items:center;padding:0 13px;
  border-radius:var(--ord-r-pill);border:1px solid var(--borda-cor);background:transparent;
  color:var(--text-apoio);font-family:var(--ord-f-texto);font-size:var(--fs-apoio);cursor:pointer;
  white-space:nowrap;transition:background var(--t-toque) var(--ord-ease-out),color var(--t-toque) var(--ord-ease-out)}
.ord-indice-chips button:hover{background:var(--surface-elevada);color:var(--text-forte)}
.ord-indice-chips button[aria-current="true"]{background:var(--surface-ambar-suave);color:var(--ord-ambar);
  border-color:rgba(245,165,36,.35);font-weight:var(--fw-forte)}

/* ---------- os cinco estados ----------
   Ver `ord-estados.js`: o painel usa `.empty` para quatro situações com
   conclusões opostas. Aqui cada uma ganha a cara que merece, sem que nenhuma
   das 131 chamadas tenha sido tocada. O padrão continua sendo o neutro. */
.ord-e{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.ord-e__ico{width:28px;height:28px;opacity:.85}
.ord-e__ultima{font-size:var(--fs-micro);color:var(--text-tenue);font-variant-numeric:tabular-nums}

/* carregando — barras com a forma de uma lista. O símbolo da marca nunca gira. */
.ord-e--carregando{color:transparent;padding:24px 16px;gap:0;position:relative}
.ord-e--carregando .ord-e__barras{display:flex;flex-direction:column;gap:10px;width:min(420px,100%)}
.ord-e--carregando .ord-e__barras i{display:block;height:12px;border-radius:6px;
  background:linear-gradient(90deg,var(--surface-elevada) 0%,var(--surface-controle) 50%,var(--surface-elevada) 100%);
  background-size:200% 100%;animation:ord-esq 1.2s linear infinite}
.ord-e--carregando .ord-e__barras i:nth-child(1){width:100%}
.ord-e--carregando .ord-e__barras i:nth-child(2){width:78%;align-self:center}
.ord-e--carregando .ord-e__barras i:nth-child(3){width:54%;align-self:center}

/* vazio — não há registro. Neutro: ausência não é erro. */
.ord-e--vazio{color:var(--text-apoio)}
.ord-e--vazio .ord-e__ico{color:var(--text-tenue)}

/* espera — falta uma escolha para mostrar algo. Mais apagado que o vazio. */
.ord-e--espera{color:var(--text-apoio)}
.ord-e--espera .ord-e__ico{color:var(--text-tenue);opacity:.6}

/* falha de leitura — é alerta, e diz quando foi a última leitura boa. */
.ord-e--falha{color:var(--ord-alerta);background:var(--surface-alerta-suave);
  border:1px solid rgba(255,77,77,.35);border-radius:var(--ord-r-sup);padding:20px 16px;margin:8px 0}
.ord-e--falha .ord-e__ico{color:var(--ord-alerta)}

/* alçada — é recusa, NÃO é erro. Nunca usa a cor de alerta. */
.ord-e--alcada{color:var(--text-corrente);background:var(--surface-cartao);
  border:1px solid var(--borda-cor);border-left:3px solid var(--ord-nevoa);
  border-radius:var(--ord-r-sup);padding:20px 16px;margin:8px 0;text-align:left;align-items:flex-start}
.ord-e--alcada .ord-e__ico{color:var(--ord-nevoa)}
@media (prefers-reduced-motion:reduce){.ord-e--carregando .ord-e__barras i{animation:none;opacity:.5}}

/* ---------- etapa 8 · alvo de toque no celular ----------
   ⚠️ NO CELULAR TODO ALVO TEM 48 px, e a razão está no briefing: quem mais usa
   o painel está no salão, DE PÉ, com o telefone na mão e o cliente esperando.
   Chip de 34 px é confortável com mouse e é erro de toque com o polegar.

   No desktop eles ficam como estão: 34 px de chip e 38 px de item de tela dão
   densidade, e densidade ali é a favor de quem varre 45 telas com o olho.

   Conferido: `.btn` 44, `.chip` 44 e `.tab-btn` 48 já estavam de pé — os dois
   que faltavam são os que eu mesmo acrescentei esta noite. */
@media (max-width:760px){
  .ord-indice-chips button{height:var(--alvo-toque);padding:0 16px}
  .ord-tela-btn{min-height:var(--alvo-toque)}
  .btn,.chip{min-height:var(--alvo-toque)}
}

/* ---------- a regra de ouro, em destaque ----------
   Ela governa o sistema inteiro e vivia num parágrafo cinza do mesmo tamanho
   do resto da tela. Haste âmbar de 3 px: a identidade reserva esse traço ao
   item ativo e ao bloco em foco — e nada tem mais foco que isto. */
.ord-regra{font-family:var(--ord-f-display);font-size:var(--fs-subtitulo);font-weight:var(--fw-forte);
  line-height:var(--lh-subtitulo);color:var(--text-forte);margin:0 0 14px;padding:10px 0 10px 16px;
  border-left:var(--destaque-haste)}

/* ---------- habilidades como selos, no lugar de 31 linhas de tabela ---------- */
.ag-habs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.ag-hab{cursor:pointer;height:auto;min-height:32px;padding:5px 11px;transition:
  background var(--t-toque) var(--ord-ease-out),border-color var(--t-toque) var(--ord-ease-out)}
.ag-hab:hover{border-color:var(--ord-ambar);color:var(--ord-ambar)}
.ag-hab__altera{margin-left:7px;padding:1px 6px;border-radius:var(--ord-r-pill);
  background:var(--ord-ambar);color:var(--text-sobre-ambar);font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em}
@media (max-width:760px){.ag-hab{min-height:var(--alvo-toque)}}

/* ---------- o nível de quem fala, na lista de conversas ----------
   A lista dizia "cadastrado" com um ponto verde e "particular" com um cinza,
   e o `title` só aparece com o mouse em cima — que no celular não existe.
   Quem abre a triagem no telefone via dois pontos e nenhuma palavra. */
.wa-tags{display:flex;gap:5px;margin-top:3px}
.wa-nivel{display:inline-flex;align-items:center;height:18px;padding:0 7px;
  border-radius:var(--ord-r-pill);background:var(--surface-controle);
  color:var(--text-apoio);font-size:10px;font-weight:var(--fw-forte);
  text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.wa-nivel--fora{background:transparent;border:1px solid var(--borda-cor);color:var(--text-tenue)}