/* Ícones próprios (pasta ICONES do usuário) + botão de sair padrão.
   Técnica: mask-image usa só a SILHUETA do SVG — a cor real vem do CSS
   (background-color/currentColor), então o MESMO arquivo funciona branco
   no cabeçalho azul, dourado no painel do chefe, escuro nos cards claros. */

.icone-svg {
  display: inline-block;
  width: 1em; height: 1em;
  background-color: currentColor;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  vertical-align: -0.15em;
  flex-shrink: 0;
}
.ic-acompanhar        { -webkit-mask-image: url(/static/icones/acompanhar.svg); mask-image: url(/static/icones/acompanhar.svg); }
.ic-calandra          { -webkit-mask-image: url(/static/icones/calandra.svg); mask-image: url(/static/icones/calandra.svg); }
.ic-corte             { -webkit-mask-image: url(/static/icones/corte.svg); mask-image: url(/static/icones/corte.svg); }
.ic-costura           { -webkit-mask-image: url(/static/icones/costura.svg); mask-image: url(/static/icones/costura.svg); }
.ic-engrenagem        { -webkit-mask-image: url(/static/icones/engrenagem.svg); mask-image: url(/static/icones/engrenagem.svg); }
.ic-estoque           { -webkit-mask-image: url(/static/icones/estoque.svg); mask-image: url(/static/icones/estoque.svg); }
.ic-expedicao         { -webkit-mask-image: url(/static/icones/expedicao.svg); mask-image: url(/static/icones/expedicao.svg); }
.ic-funcionarios      { -webkit-mask-image: url(/static/icones/funcionarios.svg); mask-image: url(/static/icones/funcionarios.svg); }
.ic-impressao         { -webkit-mask-image: url(/static/icones/impressao.svg); mask-image: url(/static/icones/impressao.svg); }
.ic-logout            { -webkit-mask-image: url(/static/icones/logout.svg); mask-image: url(/static/icones/logout.svg); }
.ic-picklist          { -webkit-mask-image: url(/static/icones/picklist.svg); mask-image: url(/static/icones/picklist.svg); }
.ic-problemas         { -webkit-mask-image: url(/static/icones/problemas.svg); mask-image: url(/static/icones/problemas.svg); }
.ic-refacao           { -webkit-mask-image: url(/static/icones/refacao.svg); mask-image: url(/static/icones/refacao.svg); }
.ic-saude             { -webkit-mask-image: url(/static/icones/saude.svg); mask-image: url(/static/icones/saude.svg); }

/* Botão de SAIR padrão do app inteiro: tarja vermelha, cantos arredondados.
   !important de propósito — cada tela tem seu próprio ".header a{...}"
   genérico (fundo transparente etc) que, sem isso, ganharia da regra daqui
   por especificidade CSS. Esse componente deve SEMPRE parecer igual. */
.sair-pill {
  display: inline-flex !important; align-items: center; justify-content: center;
  gap: 6px !important;
  background: #C0392B !important; color: #fff !important;
  text-decoration: none !important;
  border: none !important; border-radius: 999px !important;
  padding: 8px 16px !important;
  font-size: 13px !important; font-weight: 800 !important; cursor: pointer;
  box-shadow: 0 2px 6px rgba(192,57,43,.35);
  line-height: 1.1;
}
.sair-pill:active { transform: scale(.96); }
.sair-pill .icone-svg { width: .95em; height: .95em; background-color: #fff; }
/* variante só-ícone (cabeçalhos apertados) */
.sair-pill.compacto { padding: 8px 10px !important; }

/* ==========================================================================
   TAMANHO DA LETRA (controle "A+" no cabeçalho) — ver static/tamanho.js
   ========================================================================== */

/* O aumento é feito com `zoom` no documento. Estas regras deixam o conteúdo
   QUEBRAR LINHA em vez de estourar a largura do celular — e só valem quando
   está aumentado, então em 100% a tela continua exatamente como era.
   Cada uma corresponde a um estouro MEDIDO num celular de 375px:
     .acoes-topo/.linha1 -> os botões do topo (Urgência/Problema/Refação)
     .tp                 -> o selo "X/Y impressos" no cabeçalho do card
     .tipo-head .cnt     -> a contagem "N lote(s)" das seções de tipo
   Com elas, dá pra chegar em 2.5x sem barra horizontal (sem elas, 1.6x). */
:root[data-fonte-grande="1"] .linha1,
:root[data-fonte-grande="1"] .acoes-topo,
:root[data-fonte-grande="1"] .tp,
:root[data-fonte-grande="1"] .tipo-head { flex-wrap: wrap; }
/* O TÍTULO pega a linha inteira e os botões descem pra linha de baixo.
   Cuidado: NÃO usar `min-width:0` nele — deixando o h1 encolher, o texto
   quebra uma letra por linha ("I/m/p/r/e/s/s/ã/o", 34px de largura e 280 de
   altura — vi acontecer ao testar). Deixar wrap fazer o trabalho. */
:root[data-fonte-grande="1"] .linha1 h1 { flex: 1 1 100%; }
:root[data-fonte-grande="1"] .tipo-head .cnt { margin-left: 0; }
/* só onde o conteúdo é longo de verdade (nome de produto), nunca em título */
:root[data-fonte-grande="1"] .info,
:root[data-fonte-grande="1"] .cat,
:root[data-fonte-grande="1"] .it-nome { overflow-wrap: anywhere; }

/* Os dois botões: A−  e  A+ . Um toque = um degrau. */
.jn-fonte-bt {
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.35);
  color: inherit; border-radius: 10px; padding: 7px 11px; cursor: pointer;
  font: 700 16px system-ui, Arial, sans-serif; line-height: 1; flex-shrink: 0;
  min-width: 42px;   /* alvo de toque confortável mesmo em letra normal */
}
.jn-fonte-bt small { font-size: .8em; margin-left: 1px; }
.jn-fonte-bt:active { transform: scale(.94); }
.jn-fonte-bt:disabled { opacity: .35; cursor: default; }   /* chegou no limite */
.jn-fonte-bt.mais { margin-left: 2px; }

/* telas sem cabeçalho (entrar): os dois flutuam juntos num canto */
.jn-fonte-flutua {
  position: fixed; right: 12px; bottom: 12px; z-index: 60; display: flex; gap: 6px;
}
.jn-fonte-flutua .jn-fonte-bt {
  background: #1a1a1d; color: #fff; border-color: #4a4a52;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}