/* ══════════════════════════════════════════════════════════════════════════════
   kwm-base.css — KWM Hub · base mobile (FASE A)
   Criado em 21/08/2026.

   COMO ESTE ARQUIVO NÃO QUEBRA NADA
   Três garantias, nesta ordem de importância:

   1. OPT-IN. Toda regra visual exige `body.kwm-r`. Uma página que linke este
      arquivo sem essa classe não muda um pixel. É o que permite ligar módulo
      por módulo e reverter apagando uma palavra.
   2. TOKENS DERIVADOS, NUNCA REDEFINIDOS. Os nomes daqui são `--kwm-*` e são
      alimentados por fallback: `var(--accent, #3d8ef0)`. Nenhuma variável
      existente da página é sobrescrita — logística continua âmbar, SGI
      esmeralda, DHO violeta, sem uma linha de exceção.
   3. NENHUM SELETOR DE ELEMENTO NU e NENHUM `!important`. O `responsive.css`
      declara `table { min-width:480px }` sem escopo; aqui isso não se repete.
      Sem seletor nu e com opt-in, `!important` deixa de ser necessário.

   BREAKPOINTS DO PROJETO: 640 (mobile) · 900 (sidebar/tablet) · 1200 (desktop
   largo). CSS não aceita `var()` dentro de `@media`, então os valores aparecem
   literais — esta linha é a fonte da verdade deles.

   MEDIDO EM 21/08/2026, viewport de 360 px: 24 das 32 páginas rolam
   horizontalmente. As duas primeiras seções deste arquivo (HEADER e TABELA)
   cobrem 19 delas. Por isso vêm antes de qualquer utilitário.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── TOKENS ──────────────────────────────────────────────────────────────────
   Ficam em :root (fora do opt-in) porque declarar variável não pinta nada:
   sem ninguém consumindo, o efeito visual é zero. Isso permite que o CSS
   inline de uma página já use `var(--kwm-*)` antes de a página ser migrada. */
:root{
  /* identidade KWM — valores fixos, não derivam de nada */
  --kwm-brand:#1d5068;
  --kwm-brand-ink:#123a4d;
  --kwm-lime:#8dc03f;

  /* derivados: o segundo argumento só vale se a página não definir o token */
  --kwm-accent: var(--accent, #3d8ef0);
  --kwm-bg:     var(--bg, #eef1f6);
  --kwm-surf:   var(--surf, #ffffff);
  --kwm-surf2:  var(--surf2, #f6f8fb);
  --kwm-text:   var(--text, #16202b);
  --kwm-muted:  var(--muted, #64748b);
  --kwm-border: var(--border, #dde3ec);

  /* estados — fixos de propósito: vermelho de alerta não muda por módulo */
  --kwm-danger:#c8322b;   --kwm-danger-bg:#fdeceb;
  --kwm-warn:#b06a06;     --kwm-warn-bg:#fdf3e2;
  --kwm-ok:#1c7a45;       --kwm-ok-bg:#e8f5ed;

  /* safe-area. O fallback 0px é o que torna isto inócuo em tela sem recorte.
     ATENÇÃO: sem `viewport-fit=cover` no <meta viewport> da página, env()
     devolve 0 em qualquer aparelho — a meta tag é parte da correção. */
  --kwm-sat: env(safe-area-inset-top, 0px);
  --kwm-sab: env(safe-area-inset-bottom, 0px);
  --kwm-sal: env(safe-area-inset-left, 0px);
  --kwm-sar: env(safe-area-inset-right, 0px);

  --kwm-hdr-h:56px;
  --kwm-r:10px;
  --kwm-r-lg:14px;

  /* escala de z-index. Hoje o sistema tem 23 valores soltos, de 0 a 99999;
     estes quatro degraus são o alvo para quem for escrever camada nova. */
  --kwm-z-sticky:100;
  --kwm-z-drawer:500;
  --kwm-z-overlay:1000;
  --kwm-z-toast:2000;

  --kwm-fs-input:16px;

  /* ── TIPOGRAFIA ────────────────────────────────────────────────────────────
     Corpo: pilha do sistema. Custo de rede ZERO e sem FOUT — o texto nasce na
     fonte final. No Android resolve para Roboto, no iOS para SF Pro.
     Números: Barlow Condensed 600, a única webfont do sistema. Condensada, cabe
     "1.247" onde a fonte do sistema quebraria; e é o dado que se lê de longe,
     com o aparelho na mão.
     Medido em 21/08/2026: a combinação mais comum hoje pesa 364,3 KB de woff2
     (subset latin); só o Condensed pesa 21,8 KB — 94% menos.
     A URL canônica do sistema, uma só para o cache valer entre módulos:
       fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600
                                &family=Syne:wght@700;800&display=swap        */
  --kwm-font: system-ui, -apple-system, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, sans-serif;
  --kwm-font-num: "Barlow Condensed", var(--kwm-font);
}

/* ══════════════════════════════════════════════════════════════════════════════
   NÚCLEO 1 — HEADER EM DUAS LINHAS
   Causa medida do estouro: o lado direito do header é um flex SEM wrap cujos
   filhos herdam `min-width:auto` e por isso não encolhem. Na logística isso
   soma 644 px de conteúdo dentro de uma viewport de 360 — e são os 494 px de
   deslocamento horizontal da página. `min-width:0` é a correção; `flex-wrap`
   é o que deixa o contexto descer para a segunda linha em vez de esticar.
   ══════════════════════════════════════════════════════════════════════════════ */
body.kwm-r .hdr{
  position:sticky; top:0;
  z-index:var(--kwm-z-sticky);
  background:var(--kwm-brand);
  color:#fff;
  /* o padding-top afasta do notch; sem recorte, env() = 0 e nada muda */
  padding-top:var(--kwm-sat);
  padding-left:var(--kwm-sal);
  padding-right:var(--kwm-sar);
}

/* linha 1: título e ações. Não recebe wrap — quem desce é o contexto (.hdr-ctx),
   não os botões, para o alvo de toque nunca sair do lugar esperado. */
body.kwm-r .hdr-row{
  display:flex; align-items:center;
  gap:10px; min-height:56px;
  padding:6px 12px;
}

body.kwm-r .hdr-title{
  flex:1;
  min-width:0;                 /* <-- a correção: sem isto o flex não encolhe */
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:16px; font-weight:600; line-height:1.2;
  color:inherit;
}

/* linha 2: contexto (unidade, papel, filtros). Aqui o wrap é o comportamento
   desejado — as pills quebram para baixo em vez de empurrar a viewport. */
body.kwm-r .hdr-ctx{
  display:flex; flex-wrap:wrap;
  gap:6px;
  padding:0 12px 9px;
}

body.kwm-r .hdr-ctx .pill,
body.kwm-r .pill{
  min-width:0; max-width:100%;
  border-radius:99px;
  font-size:12px; line-height:1.5;
  padding:3px 10px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  background:rgba(255,255,255,.14);
  color:inherit;
}

/* alvo de toque: 44 px é o mínimo do iOS HIG; o Material pede 48 dp. 44 é o
   piso adotado. `manipulation` remove o atraso de ~300 ms do duplo-toque. */
body.kwm-r .icon-btn{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px;
  padding:0; border:0; border-radius:var(--kwm-r);
  background:transparent; color:inherit;
  font-size:18px; line-height:1;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
body.kwm-r .icon-btn:hover{ background:rgba(255,255,255,.12); }

/* ── PONTE PARA A ESTRUTURA LEGADA DO HEADER ─────────────────────────────────
   As classes acima (.hdr-row, .hdr-title, .hdr-ctx) valem para tela nova. As 32
   páginas existentes têm outra nomenclatura, com cinco nomes concorrentes para
   o mesmo lado direito do header: .hdr-right (12 páginas), .hdr-r, .topbar-right,
   .navbar-right, .hdr-actions.

   Esta seção aplica a MESMA correção à estrutura que já existe, sem exigir
   reescrita de HTML: wrap no contêiner e min-width:0 nos filhos. É a "camada 3"
   da proposta — comportamento sobre estrutura existente, atrás do opt-in.

   Medido em 21/08/2026 (viewport 360): .hdr-right chega a 644 px na logística,
   622 em operações e aterrozero, 597 em documentos e sst. Em manutencao-interna
   são 148 px terminando em right=398 — os 38 px que hoje ficam cortados.
   O culpado é sempre `min-width:auto` herdado, que impede o flex de encolher. */
/* ⚠️ POR QUE NÃO HÁ `flex-wrap` AQUI — COLISÃO COM O responsive.css
   O responsive.css (11 páginas, entre elas as duas de manutenção) declara,
   em `@media (max-width:600px)`:
       header, .navbar, .cad-header { flex-wrap: nowrap !important; }
   São 84 `!important` em 118 declarações naquele arquivo. Sem usar `!important`
   aqui — e não vamos usar — o wrap não tem como vencer.

   Testado em 21/08/2026 e registrado porque o resultado foi contraintuitivo: o
   wrap PARCIAL é pior que nenhum. Com `header{height:52px}` de altura usada e
   `align-items:center`, o `.hdr-right` que envolve vira uma coluna e o bloco
   centraliza, VAZANDO por cima do conteúdo — medi 61 px de vazamento com wrap
   nos filhos, 27 px depois de o título ceder largura, e 0 px sem wrap algum.

   E o essencial: `min-width:0` sozinho já resolve. Medido a 360 px, o
   `.hdr-right` foi de 159 px para 87 px e o conteúdo escondido de 49 px para 0.
   O wrap era o refinamento; a correção é o min-width. Enquanto o responsive.css
   estiver carregado nestas páginas, ficamos só com a correção. */
/* O header é flex item do `body` em coluna (`display:flex;flex-direction:column`).
   Com o `flex-shrink:1` que vem por padrão, ele é comprimido até `min-height`
   e o conteúdo transborda para cima e para baixo — foi a causa medida do
   vazamento de 27 px, não o wrap em si. `flex-shrink:0` deixa a casca crescer
   com o conteúdo, e não disputa com nenhum `!important` do responsive.css. */
body.kwm-r header,
body.kwm-r .hdr,
body.kwm-r .topbar,
body.kwm-r .navbar,
body.kwm-r .cad-header{
  flex-shrink:0;
}

body.kwm-r .logo,
body.kwm-r .hdr-title,
body.kwm-r .topbar-title{
  min-width:0;
  overflow:hidden;
  /* sem isto o corte é seco no meio da palavra ("Ma"); com ellipsis fica "Man…" */
  text-overflow:ellipsis; white-space:nowrap;
}

body.kwm-r .hdr-right,
body.kwm-r .hdr-r,
body.kwm-r .hdr-actions,
body.kwm-r .topbar-right,
body.kwm-r .navbar-right,
body.kwm-r .cad-hdr-right,   /* cadastros, clientes, controles */
body.kwm-r .nav-r{           /* universidade */
  min-width:0;
}
/* filhos diretos: é aqui que o min-width:auto trava o encolhimento */
body.kwm-r .hdr-right > *,
body.kwm-r .hdr-r > *,
body.kwm-r .hdr-actions > *,
body.kwm-r .topbar-right > *,
body.kwm-r .navbar-right > *,
body.kwm-r .cad-hdr-right > *,
body.kwm-r .nav-r > *{
  min-width:0;
}
/* o chip de usuário é o pior caso: nome + unidade + papel numa linha só */
body.kwm-r .user-chip,
body.kwm-r .navbar-user{
  min-width:0;
  overflow:hidden;
}
body.kwm-r .user-chip > span,
body.kwm-r .navbar-user > span,
body.kwm-r .unit-pill,
body.kwm-r .role-pill{
  min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════════
   NÚCLEO 2 — TABELA COM SCROLL PRÓPRIO
   9 das 24 páginas que rolam têm uma <table> larga sem contêiner: medi 1.356 px
   em carregamento, 1.162 em ifat, 1.040 em cadastros. Com o wrapper, quem rola
   é a tabela; sem ele, é a página inteira.

   Nenhum `min-width` em table aqui, de propósito: o responsive.css já impõe
   `table{min-width:480px}` com seletor nu, e repetir criaria duas fontes de
   verdade para a mesma medida.
   ══════════════════════════════════════════════════════════════════════════════ */
body.kwm-r .tbl-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--kwm-border);
  border-radius:var(--kwm-r);
  background:var(--kwm-surf);
}

/* ── GRADE DE INDICADORES ────────────────────────────────────────────────────
   O `min(100%, 150px)` é o que impede o estouro: `minmax(150px, 1fr)` puro não
   encolhe abaixo de 150 px e vaza em telas estreitas. É exatamente o defeito
   dos dois manutencao, que usam `minmax(420px, 1fr)` e estouram sozinhos. */
body.kwm-r .grade{
  display:grid; gap:10px;
  padding:0 12px;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 150px), 1fr));
}

body.kwm-r .kpi{
  min-width:0;
  background:var(--kwm-surf);
  border:1px solid var(--kwm-border);
  border-top:3px solid var(--kwm-accent);
  border-radius:var(--kwm-r-lg);
  padding:12px 13px 13px;
}
/* variantes: mudam só a cor da borda superior */
body.kwm-r .kpi--alerta{  border-top-color:var(--kwm-danger); }
body.kwm-r .kpi--atencao{ border-top-color:var(--kwm-warn); }
body.kwm-r .kpi--ok{      border-top-color:var(--kwm-ok); }

body.kwm-r .kpi-val{
  font-size:34px; font-weight:600; line-height:.95;
  font-variant-numeric:tabular-nums;   /* número não "dança" ao atualizar */
  color:var(--kwm-text);
}
body.kwm-r .kpi-lbl{
  margin-top:4px;
  font-size:12px; font-weight:500;
  color:var(--kwm-muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ── FAIXA DE CRÍTICOS ───────────────────────────────────────────────────────
   O que precisa de ação vem ANTES dos indicadores. Borda só à esquerda, então
   sem raio nesse lado — canto arredondado com borda de um lado só deixa um
   degrau visível no encontro. */
body.kwm-r .alerta{
  display:flex; align-items:center; gap:12px;
  margin:12px;
  padding:12px 14px;
  background:var(--kwm-danger-bg);
  border:1px solid #f2c9c6;
  border-left:4px solid var(--kwm-danger);
  border-radius:0 var(--kwm-r) var(--kwm-r) 0;
}
body.kwm-r .alerta-num{
  flex:0 0 auto;
  font-size:40px; font-weight:600; line-height:.9;
  font-variant-numeric:tabular-nums;
  color:var(--kwm-danger);
}
body.kwm-r .alerta-corpo{ min-width:0; }
body.kwm-r .alerta-tit{
  font-size:14px; font-weight:600; color:var(--kwm-text);
}
body.kwm-r .alerta-sub{
  margin-top:2px;
  font-size:12px; color:var(--kwm-muted);
}

/* ── LISTA ───────────────────────────────────────────────────────────────────
   Linhas com borda inferior, não cards arredondados: em tela estreita o card
   gasta 2 bordas + 2 raios + margem por item, e a lista fica curta demais. */
body.kwm-r .os{
  display:flex; gap:12px; align-items:center;
  padding:13px 12px; min-height:56px;
  border-bottom:1px solid var(--kwm-border);
}
body.kwm-r .os-marca{
  flex:0 0 4px; align-self:stretch;
  border-radius:2px;
  background:var(--kwm-border);
}
body.kwm-r .os-marca--alerta{  background:var(--kwm-danger); }
body.kwm-r .os-marca--atencao{ background:var(--kwm-warn); }
body.kwm-r .os-marca--ok{      background:var(--kwm-ok); }

body.kwm-r .os-corpo{ min-width:0; flex:1; }
body.kwm-r .os-tit{
  font-size:14px; font-weight:500; color:var(--kwm-text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
body.kwm-r .os-meta{
  margin-top:2px;
  font-size:12px; color:var(--kwm-muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
body.kwm-r .tag{
  flex:0 0 auto;
  font-size:11px; font-weight:600;
  padding:3px 8px; border-radius:6px;
  white-space:nowrap;
  background:var(--kwm-surf2); color:var(--kwm-muted);
}
body.kwm-r .tag--alerta{  background:var(--kwm-danger-bg); color:var(--kwm-danger); }
body.kwm-r .tag--atencao{ background:var(--kwm-warn-bg);   color:var(--kwm-warn); }
body.kwm-r .tag--ok{      background:var(--kwm-ok-bg);     color:var(--kwm-ok); }

/* ── FAB ─────────────────────────────────────────────────────────────────────
   Nada de position:fixed sem safe-area: em aparelho com barra de gestos, 16px
   puro cai debaixo dela. */
body.kwm-r .fab{
  position:fixed;
  right:calc(16px + var(--kwm-sar));
  bottom:calc(16px + var(--kwm-sab));
  z-index:var(--kwm-z-sticky);
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px;
  border:0; border-radius:50%;
  background:var(--kwm-accent); color:#fff;
  font-size:24px; line-height:1;
  box-shadow:0 6px 18px rgba(11,26,35,.28);
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
/* respiro no fim da lista: sem isto o FAB cobre o último item, que é
   justamente o mais recente. */
body.kwm-r .fim{ height:calc(84px + var(--kwm-sab)); }

/* ── DRAWER ──────────────────────────────────────────────────────────────────
   Aberto por atributo (`data-aberto`), não por classe, para o estado ficar
   legível no inspetor e no HTML. */
body.kwm-r .veu{
  position:fixed; inset:0;
  z-index:var(--kwm-z-overlay);
  background:rgba(11,26,35,.5);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
}
body.kwm-r .veu[data-aberto]{ opacity:1; pointer-events:auto; }

body.kwm-r .drawer{
  position:fixed; left:0; top:0; bottom:0;
  z-index:var(--kwm-z-drawer);
  width:min(86vw, 320px);
  background:var(--kwm-surf);
  border-right:1px solid var(--kwm-border);
  transform:translateX(-100%);
  transition:transform .25s ease;
  overflow-y:auto;
  overscroll-behavior:contain;      /* o scroll do drawer não vaza para a página */
  padding-top:var(--kwm-sat);
  padding-bottom:var(--kwm-sab);
  padding-left:var(--kwm-sal);
}
body.kwm-r .drawer[data-aberto]{ transform:translateX(0); }

body.kwm-r .drawer-item{
  display:flex; align-items:center; gap:10px;
  min-height:48px; padding:0 16px;
  border-left:3px solid transparent;
  color:var(--kwm-text);
  font-size:14px;
  text-decoration:none;
  touch-action:manipulation;
}
/* o item ativo é marcado por aria-current no HTML — o CSS segue a semântica,
   em vez de exigir uma classe que o JS teria de manter em sincronia. */
body.kwm-r .drawer-item[aria-current]{
  border-left-color:var(--kwm-accent);
  background:var(--kwm-surf2);
  font-weight:600;
}

/* ── CAMPOS ──────────────────────────────────────────────────────────────────
   16 px não é estética: abaixo disso o iOS aplica zoom automático ao focar o
   campo e o layout salta, sem voltar sozinho. Medido: 30 das 32 páginas hoje
   têm fonte menor que 16 px em input. */
body.kwm-r input,
body.kwm-r select,
body.kwm-r textarea{
  font-size:var(--kwm-fs-input);
}

/* ── ACESSIBILIDADE ──────────────────────────────────────────────────────────
   :focus-visible em vez de :focus — o anel aparece para quem navega por
   teclado, sem poluir o clique de mouse. */
body.kwm-r :focus-visible{
  outline:2px solid var(--kwm-accent);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  body.kwm-r .veu,
  body.kwm-r .drawer{ transition:none; }
}

/* ── ≥ 640 px ────────────────────────────────────────────────────────────────
   Único ajuste por largura nesta fase: cartão mínimo maior e mais respiro
   lateral. Abaixo de 640 vale tudo o que está acima, sem exceção. */
@media (min-width:640px){
  body.kwm-r .grade{
    grid-template-columns:repeat(auto-fill, minmax(min(100%, 180px), 1fr));
    padding:0 20px;
  }
  body.kwm-r .alerta{ margin:20px; }
  body.kwm-r .os{ padding:13px 20px; }
  body.kwm-r .hdr-row{ padding:6px 20px; }
  body.kwm-r .hdr-ctx{ padding:0 20px 9px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   CASCA LEGADA EM MOBILE — substitui o responsive.css nas páginas migradas

   REGRA DE OURO: uma página carrega o responsive.css OU o kwm-base.css, nunca
   os dois. O responsive.css usa 84 `!important` em 118 declarações e venceria
   qualquer regra daqui. A migração é por página.

   O CONTRATO COM O JAVASCRIPT (importante, e não pode mudar sozinho):
   o `mobile.js` — carregado pelas páginas migradas — cria o `.mob-hamburger` e
   o `.mob-sb-backdrop` em tempo de execução e alterna a classe `.mob-sb-open`
   na sidebar. Nada disso está no HTML: uma busca por "mob-hamburger" no arquivo
   não encontra nada. Por isso os seletores abaixo usam `.mob-sb-open` (classe),
   e não o `[data-aberto]` que o `.drawer` novo usa — é o contrato que o JS já
   fala, e mudá-lo exigiria tocar em JavaScript.

   Se algum dia o `mobile.js` sair, estas regras saem com ele.

   Medido em 21/08/2026, comparando a mesma página com e sem responsive.css a
   360 px: sem cobertura, a sidebar volta a `static` com 64 px permanentes (18%
   da tela), o hambúrguer continua na tela mas fica sem efeito, o modal deixa de
   ser folha inferior e o `.app` volta a `overflow:hidden`.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── O BOTÃO E O VÉU DA GAVETA ───────────────────────────────────────────────
   Estes dois elementos NÃO existem no HTML de página nenhuma: o `mobile.js` os
   cria em tempo de execução. Quem os desenhava era o `responsive.css`; ao sair
   dele, a página migrada ficava com o botão em `4 × 4 px` — medido em 22/08 no
   `manutencao.html` e no `manutencao-interna.html`, os dois já aprovados. A
   gaveta funcionava; o que não havia era como abri-la com o dedo.

   O `display` mora aqui na base (`none`) e não dentro do @media, por dois
   motivos: acima de 640 px o `<button>` apareceria como `inline-block`, e o véu
   com `position:fixed; inset:0` cobriria a tela inteira o tempo todo.
   Quem liga e desliga o véu é o `mobile.js`, por estilo inline
   (`bd.style.display='block'`) — estilo inline vence folha, então a base em
   `none` não atrapalha. */
body.kwm-r .mob-hamburger{
  display:none;                     /* ≤640 vira flex, mais abaixo */
  flex-direction:column;
  align-items:center; justify-content:center;
  gap:4px;
  /* 44 px é o piso de alvo de toque do iOS HIG — o mesmo já adotado no
     `.icon-btn` deste arquivo. O `responsive.css` usava 34. */
  width:44px; height:44px;
  flex:0 0 auto;
  padding:5px; border:0; border-radius:var(--kwm-r);
  background:transparent; color:inherit;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
body.kwm-r .mob-hamburger:hover{ background:rgba(127,127,127,.14); }
/* as três barras são <span> vazios criados pelo mobile.js */
body.kwm-r .mob-hamburger span{
  display:block;
  width:20px; height:2px;
  border-radius:2px;
  background:currentColor;
}

body.kwm-r .mob-sb-backdrop{
  display:none;                     /* o mobile.js liga por estilo inline */
  position:fixed; inset:0;
  background:rgba(11,26,35,.5);     /* mesmo véu do `.veu` deste arquivo */
  /* um degrau abaixo da gaveta: 500 − 1 */
  z-index:calc(var(--kwm-z-drawer) - 1);
  cursor:pointer;
}

/* ── ≤ 900 px: sidebar reduzida a ícones ─────────────────────────────────── */
@media (max-width:900px){
  /* `display:flex` explícito: várias páginas escondem a própria sidebar em
     @media (a logística faz isso em 900 e em 600). Aquela regra é `.sidebar`,
     especificidade (0,1,0); esta é `body.kwm-r .sidebar`, (0,2,1) — vence por
     especificidade, sem `!important` e sem depender da ordem dos arquivos.
     Media query não soma especificidade; a versão anterior não perdia a
     disputa, ela simplesmente não declarava `display` e deixava o `none` da
     página passar. */
  body.kwm-r .sidebar,
  body.kwm-r .cad-sidebar{ display:flex; width:64px; }
  body.kwm-r .sidebar .sb-text,
  body.kwm-r .sidebar .sb-label,
  body.kwm-r .sidebar .sb-count,
  body.kwm-r .sidebar .sb-toggle-label,
  body.kwm-r .cad-sidebar .cad-sb-lbl,
  body.kwm-r .cad-sidebar .cad-sb-section,
  body.kwm-r .cad-sidebar .nav-btn span{ display:none; }
  body.kwm-r .sidebar .sb-item{ padding:10px 0; justify-content:center; gap:0; }
  body.kwm-r .cad-sidebar .nav-btn{ padding:10px 0; justify-content:center; gap:0; }
  body.kwm-r .dash-grid{ grid-template-columns:1fr; }
}

/* ── ≤ 640 px: sidebar vira gaveta ───────────────────────────────────────── */
@media (max-width:640px){
  body.kwm-r .mob-hamburger{ display:flex; }

  /* `.cad-sidebar` entra junto com `.sidebar`: o `mobile.js` aceita as duas
     (`mobile.js:9`), e sem ela as três páginas que usam esse nome —
     `cadastros`, `clientes` e `controles` — ficavam com 220 px de navegação
     fixa numa tela de 360. O `responsive.css` tinha 9 regras para
     `.cad-sidebar`; ao sair, elas não tinham par aqui. Medido em 23/08 no
     `controles`: só trocar a folha levava de 555 px para 602 px, PIOR. */
  body.kwm-r .sidebar,
  body.kwm-r .cad-sidebar{
    display:flex;                 /* ver a nota de especificidade em ≤900 */
    position:fixed; left:0; top:0; bottom:0;
    width:min(86vw, 240px);
    height:100dvh;              /* dvh: a barra do Chrome Android muda a altura */
    z-index:var(--kwm-z-drawer);
    transform:translateX(-100%);
    transition:transform .25s ease;
    overflow-y:auto;
    overscroll-behavior:contain; /* o scroll da gaveta não vaza para a página */
    padding-top:var(--kwm-sat);
    padding-bottom:var(--kwm-sab);
  }
  body.kwm-r .sidebar.mob-sb-open,
  body.kwm-r .cad-sidebar.mob-sb-open{ transform:translateX(0); }

  /* com a gaveta aberta há largura de sobra: os rótulos voltam */
  body.kwm-r .sidebar .sb-text,
  body.kwm-r .sidebar .sb-label,
  body.kwm-r .sidebar .sb-count,
  body.kwm-r .sidebar .sb-toggle-label,
  body.kwm-r .cad-sidebar .cad-sb-lbl,
  body.kwm-r .cad-sidebar .cad-sb-section,
  body.kwm-r .cad-sidebar .nav-btn span{ display:block; }
  body.kwm-r .sidebar .sb-item{ padding:9px 16px; justify-content:flex-start; gap:8px; }
  body.kwm-r .cad-sidebar .nav-btn{ padding:9px 16px; justify-content:flex-start; gap:8px; }

  /* nada de `display:block` aqui: o véu é ligado e desligado pelo mobile.js
     por estilo inline. Declarar `block` no @media o deixaria cobrindo a tela
     permanentemente abaixo de 640, porque a base agora tem position:fixed. */

  /* modal como folha inferior. O padding-bottom com safe-area é o detalhe que
     o responsive.css não tinha: sem ele o fim do formulário fica sob a barra
     de gestos do Android e o último campo não é alcançável. */
  body.kwm-r .overlay{ align-items:flex-end; padding:0; }
  body.kwm-r .modal{
    width:100%; max-width:100%;
    max-height:92dvh;
    border-radius:18px 18px 0 0;
    margin:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding-bottom:var(--kwm-sab);
  }

  /* .app{overflow:hidden} corta o conteúdo do mesmo jeito que o overflow-x do
     body cortava — aqui ele é liberado. */
  body.kwm-r .app{ overflow:visible; }

  /* a tabela mantém largura legível e rola DENTRO do wrapper. Seletor
     qualificado, nunca `table` nu como no responsive.css. */
  body.kwm-r .tbl-wrap table{ min-width:480px; }
}

@media (prefers-reduced-motion: reduce){
  body.kwm-r .sidebar,
  body.kwm-r .cad-sidebar{ transition:none; }
}