/* =====================================================================
   MOBILE — o painel num Galaxy Fold, dobrado e aberto (27/09/2026)
   =====================================================================
   Pedido do Super: usar o painel no Galaxy Fold 8, em pé e deitado. As
   dimensões exatas do Fold 8 não foram medidas; os Folds recentes caem em
   três faixas, e todas foram auditadas nas 34 telas, emulando toque:

     tela de fora, em pé      344 e 412 px de largura
     tela de fora, deitada    882×344 e 915×412 — larga e MUITO baixa
     tela de dentro           800×900 e 960×860 — quase quadrada

   O QUE A AUDITORIA ACHOU, antes de uma linha daqui:
     · em 344 e 412 px, AS 34 TELAS CORTADAS NA BORDA DIREITA. Não rolavam
       — o `body` tem overflow-x hidden e escondia a sobra. Na tela de
       vendas a coluna do conteúdo resolvia para 763 px numa tela de 412, e
       o botão "Buscar" sumia. O cabeçalho media 698 px em todas.
     · na tela de fora deitada, o conteúdo só começava em 157 de 344 px:
       cabeçalho preso no topo (60 px) + menu (49 px) + margens.
     · 409 alvos de toque abaixo de 32 px — os piores, ✎ e ✕ de 21×19 px
       lado a lado, onde errar o editar é acertar o excluir.
     · 548 textos abaixo de 11 px — o maior grupo, os eixos dos gráficos
       a 9 px.

   Tudo o que muda o TAMANHO de letra e de toque está preso a
   `(pointer: coarse)`: o computador continua exatamente como era.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. A COLUNA DO CONTEÚDO PODE ENCOLHER
   Uma coluna `1fr` cresce até caber o filho mais largo (o mínimo automático
   de item de grade é o conteúdo). Foi o que deu 763 px de coluna numa tela
   de 412. Com `minmax(0, 1fr)` e `min-width: 0` a coluna tem o tamanho da
   tela, e quem é largo quebra linha ou rola dentro da própria caixa.
   Medido com isto injetado: a coluna parou de vazar nas 34 telas.
   --------------------------------------------------------------------- */
.shell { grid-template-columns: 216px minmax(0, 1fr); }
main { min-width: 0; }
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------
   2. MENU EM FILEIRA TAMBÉM NA TELA DE DENTRO
   O corte da fileira era 900 px, pensado para janela de computador. A tela
   de dentro do Fold deitada tem ~960 px: o menu lateral de 216 px voltava e
   comia 22% da largura. Em aparelho de toque, a fileira vale até 1100 px.
   São as mesmas regras de app.css para ≤ 900 px.
   --------------------------------------------------------------------- */
@media (pointer: coarse) and (max-width: 1100px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidenav {
    position: static; display: flex; gap: 6px; overflow-x: auto;
    padding-bottom: 8px; border-bottom: 1px solid var(--border);
  }
  .sidenav-grp { display: none; }
  #sidenav a.beru { margin: 0; }
  .sidenav a { white-space: nowrap; margin-bottom: 0; }
}

/* ---------------------------------------------------------------------
   3. CABEÇALHO NUMA LINHA SÓ EM TELA ESTREITA
   Havia `@media (max-width: 620px) { .hd { flex-wrap: wrap } }`, mas mais
   abaixo no mesmo app.css um `.hd { flex-wrap: nowrap }` de mesma
   especificidade vencia por vir depois — o lado direito saía da tela.
   Quebrar em duas linhas dobraria a altura de algo que fica preso no topo;
   em vez disso, os botões perdem o rótulo e ficam com o ícone (o `title`
   continua dizendo o que fazem) e a marca empilha "JERICO" sobre o nome do
   Jerico, que não some: é o que diz em qual deles se está.
   A conta, em 344 px: 12+12 de margem, ~130 da marca, 10 de vão, três
   ícones de 38 px com 6 de vão e o avatar de 34 = 332 px.
   --------------------------------------------------------------------- */
/* O rótulo em span NÃO pode virar um item flex à parte. `.btn` é
   inline-flex com gap de 8 px: com "◉" e o span como dois itens, o gap
   entrava no lugar do espaço e cada botão ficava 4–5 px mais largo NO
   COMPUTADOR — medido elemento a elemento contra a produção. Com
   `display: contents` o texto volta a ser um item só, igual a antes. */
.hd-rot { display: contents; }

/* ATÉ 840 px: botões só com ícone, e o relógio sai.
   O primeiro corte foi 620 px, pensado nas capas antigas (344–412). A
   auditoria nos tamanhos do Fold 8 (ficha: tela de dentro 1.848 × 2.448, de
   fora 1.248 × 1.972) pegou o buraco: em 704 px — a de dentro em pé com
   densidade 2,625 — o cabeçalho cortava em 24 das 34 telas. Completo, com
   rótulos e relógio, ele precisa de ~820 px (medido em 882: 294 da marca,
   463 da direita, mais margens). A de fora deitada (~657–751) cai na mesma
   faixa. */
@media (max-width: 840px) {
  .hd-clock { display: none; }
  .hd-rot { display: none; }
  .hd-right { gap: 6px; }
  /* `!important` só por causa do botão "Versão V1": o guard.js o cria com
     estilo embutido (font-size 12px, padding 5px 12px) */
  .hd-right .btn {
    min-width: 38px; min-height: 38px; padding: 0 8px !important;
    justify-content: center; font-size: 16px !important;
  }
}

/* ATÉ 620 px: além disso, a marca empilha e as margens encolhem */
@media (max-width: 620px) {
  .hd { padding: 10px 12px; gap: 10px; flex-wrap: nowrap; }
  .hd-brand {
    flex-direction: column; align-items: flex-start; gap: 1px;
    padding: 2px 6px 2px 2px;
  }
  .hd-brand b { font-size: 19px; line-height: 1.05; }
  .hd-brand span { letter-spacing: .14em; }
  .hd-brand .sw { display: none; }
}

/* ---------------------------------------------------------------------
   4. TELA DEITADA E BAIXA
   882×344: o conteúdo começava em 157 px, e o cabeçalho de 60 px ficava
   preso no topo ao rolar — sobravam ~280 px de leitura. Aqui ele rola junto
   com a página, e as margens do topo encolhem.
   --------------------------------------------------------------------- */
@media (orientation: landscape) and (max-height: 500px) {
  .hd { position: static; padding-top: 6px; padding-bottom: 6px; }
  .shell { padding-top: 10px; gap: 12px; }
  .sidenav { padding-bottom: 4px; }
  .scr-head h1 { font-size: 22px; margin-bottom: 4px; }
}

/* ---------------------------------------------------------------------
   5. ALVOS DE TOQUE
   Medido em 412 px nas 34 telas: abas de fonte e chips de escopo com 24 px
   de altura, chips de tabela e botões pequenos com 29, e o ✎/✕ das listas
   do Private e do 3D com 21×19 px — um ao lado do outro. ~40 px é o que um
   dedo acerta sem mirar.
   --------------------------------------------------------------------- */
@media (pointer: coarse) {
  .fonte-aba, .escopo-chip, .tbl-chip, .btn-sm, .tab { min-height: 38px; }
  .act-x { min-width: 38px; min-height: 38px; font-size: 17px; }
  .pv-check { min-width: 32px; min-height: 32px; }
  .pv-lnk { min-height: 32px; display: inline-flex; align-items: center; }
  .vg-nav a { min-height: 38px; display: flex; align-items: center; }
}

/* ---------------------------------------------------------------------
   6. LETRA — gerado a partir das próprias folhas do painel
   548 textos abaixo de 11 px nas 34 telas, o maior grupo nos eixos dos
   gráficos (178, a 9 px). A primeira versão desta seção usava seletores
   genéricos (`th`, `label`, `small`) e NÃO FUNCIONARIA: `th` sozinho perde
   para `table.tbl thead th` e não o aumenta — o mesmo motivo que impede
   `label` de encolher o `.pay-pop label` de 12 px.

   Por isso as regras abaixo foram GERADAS: toda regra de base, components,
   app, private e tres-d.css que define letra abaixo de 11 px ganhou aqui
   uma cópia com o MESMO seletor. Mesma especificidade e vindo depois, a
   cópia vence; e como só existe onde o original era menor que 11, ela
   só aumenta. O que era 8–9,5 px vai a 10,5 (selos que moram dentro de
   linha), o resto a 11. Se uma folha ganhar letra miúda nova, gerar de novo.
   --------------------------------------------------------------------- */
@media (pointer: coarse) {
  .act-time small,
  .admin-only,
  .chart-svg .axis-lbl,
  .crew-role,
  .dep-badge,
  .fonte-tag,
  .kit-nav .grp,
  .kit-sec > h2 .tag,
  .pay-dia .nt,
  .perd-cap,
  .pv-cal-h,
  .pv-ev,
  .pv-ev-mais,
  .seg .off-tag,
  .selo-calc,
  .selo-fonte,
  .sidenav-grp,
  .sig-conf small,
  .sig-kind,
  .td-legenda,
  .tl-state,
  table.tbl thead th .ord { font-size: 10.5px; }
  #sidenav a.beru,
  .act-kind,
  .badge,
  .cg-dep,
  .cg-lanc,
  .cg-loja,
  .chart-tip .t-d,
  .crew-live,
  .crew-turno,
  .derived-lbl,
  .dpt-abrir,
  .dpt-grupo,
  .dpt-prods-tit,
  .escopo-chip,
  .escopo-datas label,
  .fonte-aba,
  .hd-brand span,
  .hd-clock i,
  .hd-left span,
  .hd-modos .sb,
  .kit-nav-title,
  .kpi-label,
  .pay-cab,
  .pay-selo,
  .perd-op-s,
  .perd-val i,
  .pill,
  .pv-esc,
  .pv-f label,
  .pv-fatura-linha .vl i,
  .pv-outros-lbl,
  .pv-pago-em,
  .pv-tbl thead th,
  .quota-win,
  .sidenav a .ct,
  .td-f label,
  .td-porta-sub,
  .td-prod-foto .sem,
  .td-prod-sku,
  .td-socio-pct,
  .td-socio-sem,
  .td-sub,
  .td-tbl th,
  .vt-estado,
  .vt-toggle,
  table.tbl thead th { font-size: 11px; }
}