/* Consulta de Stocks — o CSS, em cinco camadas.
 *
 *   1. tokens        as decisões: cor, tipo, espaço, raio, sombra, profundidade
 *   2. base          o reset e o corpo
 *   3. componentes   botão, chip, selo, etiqueta, crachá, janela, quadro, aviso
 *   4. ecrãs         o que é só do cabeçalho, do catálogo, da ficha, dos pedidos…
 *   5. impressão     as duas folhas que saem da casa
 *
 * A ordem é semântica: o que vem depois ganha, por isso os ecrãs vêm depois dos
 * componentes e podem ajustá-los, e nunca ao contrário. Até 15-09-2026 o ficheiro
 * estava organizado por ordem de chegada, com dez estilos de botão para três
 * papéis e uma secção "correcções" no fim — foi assim que uma regra genérica de
 * um ecrã ganhou à de outro e cortou o "só activos".
 *
 * Tema único, claro, de propósito: é uma ferramenta de trabalho usada de dia.
 *
 * Os valores de cor vêm de G:\My Drive\LOGOS E DESIGN SYSTEM\DESIGN SYSTEM\EDICARE\tokens\edicare.css
 * e estão aqui copiados porque a pasta online não tem acesso ao Drive.
 */

/* =========================================================================
   1. TOKENS
   ========================================================================= */

:root {
  /* cor da marca */
  --ink: #232021;
  --grey: #575756;
  --paper: #FFFFFF;
  --teal: #03D0B6;
  --teal-dark: #02A892;
  --teal-claro: #2FE0C8;     /* hover do botão de destaque sobre fundo escuro */
  --teal-texto: #0B6E62;     /* teal legível como texto pequeno sobre branco */
  --teal-fundo: #E3F6F2;

  --fundo: #F7F7F6;
  --linha: #E6E5E3;

  /* Semáforo. Verde, âmbar e vermelho sóbrios — a app é uma ferramenta de
     trabalho, não uma montra. Os mesmos pares servem de "ok / atenção / erro"
     em tudo o que tem estado: acções, propostas, pedidos. */
  --ok-texto: #1B6B4E;        --ok-fundo: #E6F4EE;
  --limitado-texto: #B45309;  --limitado-fundo: #FDF3E3;
  --esgotado-texto: #9B1C1C;  --esgotado-fundo: #FBEAEA;
  --lancamento-texto: #4C3B8F; --lancamento-fundo: #EDEAF7;

  /* só do gráfico das vendas */
  --barra-sede-texto: #01776A;   /* o verde das barras, a 8px sobre branco, lê-se mal */
  --barra-lojas: #AFC3D0;

  /* tipo */
  --font-display: 'Baloo 2', system-ui, sans-serif;
  --font-body: 'Montserrat', 'Calibri', system-ui, sans-serif;

  /* A escala. Nove degraus e mais nenhum; os 8 e 9 px do gráfico são a
     excepção documentada no sítio onde se usam. */
  --t-xxs: 10px;
  --t-xs: 11px;
  --t-s: 12px;
  --t-m: 13px;
  --t-base: 14px;
  --t-l: 16px;
  --t-xl: 18px;
  --t-2xl: 20px;
  --t-3xl: 24px;

  /* espaço e forma */
  --xs: 4px;  --sm: 8px;  --md: 16px;  --lg: 24px;  --xl: 40px;
  --radius: 12px;
  --radius-s: 8px;
  --radius-round: 999px;

  --sombra-1: 0 1px 3px rgba(35,32,33,.08);
  --sombra-2: 0 4px 16px rgba(35,32,33,.10);
  --sombra-3: 0 12px 32px rgba(35,32,33,.14);

  /* profundidade, por ordem: barra da selecção < cabeçalho < janelas < avisos */
  --z-barra: 9;
  --z-cabecalho: 10;
  --z-janela: 20;
  --z-avisos: 40;

  /* Pontos de quebra: 560 (telemóvel), 820 (tablet), 1100 (secretária estreita).
     Não dá para os pôr em variáveis — as media queries não as lêem — por isso
     ficam aqui escritos e repetidos à letra lá em baixo. */
}

/* =========================================================================
   2. BASE
   ========================================================================= */

* { box-sizing: border-box; }

/* O atributo `hidden` esconde com `display: none`, mas qualquer regra de classe
   com `display` lhe ganha em especificidade — e o ecrã de entrada tem
   `display: flex`. Sem esta linha, quem já tinha sessão via o formulário de
   entrada e o catálogo ao mesmo tempo. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-l);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Quem navega por teclado vê onde está. O mesmo anel em tudo; os campos de
   texto têm o seu próprio, mais abaixo. */
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

button { font-family: inherit; }

/* =========================================================================
   3. COMPONENTES
   ========================================================================= */

/* ---------- botão ----------
   Três papéis: secundário (o `.botao` a seco), primário e discreto. Tamanhos
   por modificador. Um botão que muda dados parece diferente de um que só abre. */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  font-family: inherit;
  font-size: var(--t-base);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--linha);
  border-radius: var(--radius-round);
  cursor: pointer;
  white-space: nowrap;
}

.botao:hover:not(:disabled) { border-color: var(--teal); color: var(--ink); }
.botao:disabled { opacity: .5; cursor: default; }

.botao--primario {
  font-weight: 600;
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}

.botao--primario:hover:not(:disabled) { background: var(--teal-dark); border-color: var(--teal-dark); color: var(--paper); }

.botao--discreto {
  padding-inline: 8px;
  color: var(--grey);
  background: none;
  border-color: transparent;
}

.botao--discreto:hover:not(:disabled) { color: var(--ink); border-color: transparent; background: var(--fundo); }

/* Apagar e afins: em texto, a vermelho, longe do botão de gravar. */
.botao--perigo { color: var(--esgotado-texto); }
.botao--perigo:hover:not(:disabled) { color: var(--esgotado-texto); background: var(--esgotado-fundo); border-color: var(--esgotado-texto); }

/* Sobre fundo escuro (a barra da selecção). */
.botao--destaque { font-weight: 600; color: var(--ink); background: var(--teal); border-color: var(--teal); }
.botao--destaque:hover:not(:disabled) { background: var(--teal-claro); border-color: var(--teal-claro); }
.botao--inverso { color: rgba(255,255,255,.85); background: transparent; border-color: rgba(255,255,255,.35); }
.botao--inverso:hover:not(:disabled) { color: var(--paper); border-color: var(--paper); }

.botao--largo  { padding: 11px var(--md); font-size: var(--t-l); font-weight: 600; }
.botao--pequeno { padding: 5px 12px; font-size: var(--t-s); }
.botao--mini    { padding: 3px 9px; font-size: var(--t-xs); }

/* O de fechar uma janela: redondo, no canto. */
.janela__fechar {
  position: absolute;
  top: var(--md);
  right: var(--md);
  width: 32px;
  height: 32px;
  padding: 0;
  font-family: inherit;
  font-size: 15px;
  color: var(--grey);
  background: var(--fundo);
  border: none;
  border-radius: var(--radius-round);
  cursor: pointer;
}

.janela__fechar:hover { background: var(--linha); color: var(--ink); }

/* Um botão que parece texto: a referência que abre a ficha, o número que abre
   a proposta. Assim até se lhe passar por cima, para não encher os quadros. */
.ligacao {
  padding: 0;
  font-family: inherit;
  font-size: var(--t-m);
  font-weight: 600;
  color: var(--ink);
  background: none;
  border: none;
  border-bottom: 1px dotted var(--grey);
  cursor: pointer;
}

.ligacao:hover { color: var(--teal-dark); border-bottom-color: var(--teal); }

/* ---------- chip ----------
   Os filtros. Um chip aceso é preto; a contagem vai em número tabular. */

.chip {
  padding: 7px 14px;
  font-family: inherit;
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--grey);
  background: var(--paper);
  border: 1px solid var(--linha);
  border-radius: var(--radius-round);
  cursor: pointer;
}

.chip:hover { border-color: var(--teal); color: var(--ink); }

.chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* A contagem em elemento próprio para poder ser reescrita: o número de "Fora das
   listagens" muda enquanto a app está aberta. */
.chip .n { font-variant-numeric: tabular-nums; }

/* Uma palavra a dizer de que eixo são os chips da linha. Com dois eixos
   seguidos sem rótulo, não se percebia onde acabava um e começava o outro. */
.rotulo-eixo {
  flex: 0 0 auto;
  min-width: 52px;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--grey);
}

@media (max-width: 560px) {
  .rotulo-eixo { min-width: 0; width: 100%; }
}

/* O crachá que se tira: "Coleção: X ×", "limpar filtros ×". */
.cracha {
  margin-right: var(--sm);
  padding: 3px 10px;
  font-family: inherit;
  font-size: var(--t-s);
  color: var(--ink);
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: var(--radius-round);
  cursor: pointer;
}

.cracha:hover { border-color: var(--esgotado-texto); color: var(--esgotado-texto); }
.cracha--limpar { color: var(--grey); }

/* ---------- selo ----------
   Um estado. A forma diz "isto é um estado"; a cor diz qual. O semáforo dos
   artigos, o funil das propostas, as acções e a conclusão dos pedidos usam
   todos esta pílula — e as mesmas cinco cores. */

.selo {
  display: inline-block;
  flex: 0 0 auto;
  padding: 2px 10px;
  font-size: var(--t-s);
  font-weight: 600;
  line-height: 1.5;
  border-radius: var(--radius-round);
  white-space: nowrap;
  vertical-align: middle;
}

.selo--ok,      .selo--DISPONIVEL     { color: var(--ok-texto);         background: var(--ok-fundo); }
.selo--atencao, .selo--LIMITADO       { color: var(--limitado-texto);   background: var(--limitado-fundo); }
.selo--erro,    .selo--ESGOTADO       { color: var(--esgotado-texto);   background: var(--esgotado-fundo); }
.selo--roxo,    .selo--PRE_LANCAMENTO { color: var(--lancamento-texto); background: var(--lancamento-fundo); }
.selo--info                           { color: var(--teal-texto);       background: var(--teal-fundo); }
.selo--neutro                         { color: var(--grey);             background: var(--fundo); }

/* ---------- etiqueta ----------
   As marcas pequenas do cartão: novidade, essencial, a descontinuar, produção
   própria. Mais pequenas do que um selo porque não são estado — são adjectivos. */

.etiqueta {
  padding: 1px 6px;
  font-size: var(--t-xxs);
  font-weight: 600;
  border-radius: var(--radius-round);
  background: var(--fundo);
  color: var(--grey);
}

.etiqueta--nov  { background: var(--ok-fundo);       color: var(--ok-texto); }
.etiqueta--desc { background: var(--limitado-fundo); color: var(--limitado-texto); }
/* Produção própria: o eixo de análise da casa. Verde-água, para não se
   confundir com o semáforo nem com os avisos. */
.etiqueta--prop { background: var(--teal-fundo);     color: var(--teal-dark); }
/* A gama da Eureka: Core em verde-água (é a gama permanente), Delivery em
   âmbar (entra e sai). A idade é um adjectivo neutro: cinzento, com contorno,
   para não competir com as outras. */
.etiqueta--core  { background: var(--teal-fundo);     color: var(--teal-dark); }
.etiqueta--deliv { background: var(--limitado-fundo); color: var(--limitado-texto); }
.etiqueta--idade { background: transparent; border: 1px solid var(--linha); color: var(--grey); }
/* Saiu do catálogo: o artigo deixou de vir no export do PHC mas ficou na
   nuvem porque está numa campanha (060). Vermelho, como esgotado: já não
   existe para vender. */
.etiqueta--saiu  { background: var(--esgotado-fundo); color: var(--esgotado-texto); font-weight: 700; }

/* ---------- janela ----------
   O véu e a caixa. Quem gere a pilha, o Escape e o foco é o janela.js. */

.janela {
  position: fixed;
  inset: 0;
  z-index: var(--z-janela);
  background: rgba(35, 32, 33, .45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--lg);
  overflow-y: auto;
}

.janela__caixa {
  position: relative;
  width: 100%;
  max-width: 720px;
  padding: var(--lg);
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--sombra-3);
}

.janela__caixa--media { max-width: 560px; }
.janela__caixa--larga { max-width: 760px; display: grid; gap: var(--md); }

.janela__caixa--espera {
  padding: var(--xl);
  text-align: center;
  color: var(--grey);
}

@media (max-width: 560px) {
  .janela { padding: 0; }
  .janela__caixa { border-radius: 0; min-height: 100%; }
}

/* ---------- quadro ----------
   Uma tabela numa caixa branca, com cabeçalho em maiúsculas pequenas. Serve os
   pedidos, as acções e as propostas. */

.quadro {
  overflow-x: auto;
  background: var(--paper);
  border: 1px solid var(--linha);
  border-radius: var(--radius);
  box-shadow: var(--sombra-1);
}

.quadro table { width: 100%; border-collapse: collapse; font-size: var(--t-m); }

.quadro th {
  padding: var(--sm) var(--md);
  text-align: left;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--grey);
  border-bottom: 1px solid var(--linha);
  white-space: nowrap;
}

.quadro td {
  padding: var(--sm) var(--md);
  vertical-align: top;
  border-bottom: 1px solid var(--fundo);
}

.quadro tr:last-child td { border-bottom: none; }

/* Num ecrã largo o cabeçalho da tabela fica preso por baixo do cabeçalho da
   app enquanto se faz scroll: numa lista de 127 parados perdia-se o que era
   cada coluna (a Mafalda, 30-09-2026). O `overflow-x: auto` da caixa é o que
   impede o `sticky` de pegar — cria um contentor de scroll próprio — por isso
   só se abre em ecrãs onde a tabela cabe; no telemóvel fica como estava, com
   o deslize lateral. A altura do cabeçalho vem do app.js. */
@media (min-width: 1000px) {
  .quadro { overflow-x: visible; }
  .quadro thead th {
    position: sticky;
    top: var(--altura-cabecalho, 64px);
    z-index: 1;
    background: var(--paper);
    box-shadow: 0 1px 0 var(--linha);
  }
  .quadro thead th:first-child { border-top-left-radius: var(--radius); }
  .quadro thead th:last-child { border-top-right-radius: var(--radius); }
}

/* ---------- aviso (em bloco): estados vazios e erros ---------- */

.aviso {
  background: var(--paper);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius);
  padding: var(--lg);
  color: var(--grey);
}

.aviso--erro { border-left-color: var(--esgotado-texto); }

.aviso h2 {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  color: var(--ink);
  margin: 0 0 var(--sm);
}

.aviso p { margin: 0 0 var(--sm); }
.aviso p:last-child { margin-bottom: 0; }

.aviso code {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: var(--t-m);
  background: var(--fundo);
  padding: 2px 6px;
  border-radius: 4px;
}

/* O travão: impede uma coisa de sair sem decisão. Mesmo filete âmbar das
   quebras — é a cor que nesta app quer dizer "pára e olha". */
.pd__travao {
  margin: 0 0 var(--md);
  padding: var(--md);
  font-size: var(--t-base);
  line-height: 1.5;
  background: var(--limitado-fundo);
  border-left: 4px solid var(--limitado-texto);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.pd__travao b { display: block; margin-bottom: var(--xs); color: var(--limitado-texto); }
.pd__travao div + div { margin-top: var(--xs); }

/* ---------- aviso (flutuante): os que ficam até serem lidos ----------
   No canto de baixo, por cima de tudo. Um erro fica até se fechar; um
   "gravado" sai sozinho. Ver aviso.js. */

.avisos {
  position: fixed;
  right: var(--md);
  bottom: var(--md);
  z-index: var(--z-avisos);
  display: flex;
  flex-direction: column;
  gap: var(--sm);
  max-width: min(420px, calc(100vw - 2 * var(--md)));
  pointer-events: none;
}

.aviso-flutuante {
  pointer-events: auto;
  display: flex;
  gap: var(--sm);
  align-items: flex-start;
  padding: 12px 14px;
  font-size: var(--t-m);
  line-height: 1.45;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--linha);
  border-left: 4px solid var(--grey);
  border-radius: var(--radius);
  box-shadow: var(--sombra-2);
}

.aviso-flutuante--erro { border-left-color: var(--esgotado-texto); }
.aviso-flutuante--ok   { border-left-color: var(--ok-texto); }
.aviso-flutuante--info { border-left-color: var(--teal); }

.aviso-flutuante__fechar {
  flex: 0 0 auto;
  margin: -4px -6px 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: var(--t-s);
  color: var(--grey);
  background: none;
  border: none;
  border-radius: var(--radius-round);
  cursor: pointer;
}

.aviso-flutuante__fechar:hover { background: var(--fundo); color: var(--ink); }

/* ---------- campos de texto ---------- */

.pesquisa {
  flex: 1 1 320px;
  min-width: 0;
  padding: 10px var(--md);
  font-family: inherit;
  font-size: var(--t-l);           /* abaixo de 16px o iPhone faz zoom ao tocar no campo */
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--linha);
  border-radius: var(--radius-round);
  box-shadow: var(--sombra-1);
}

.pesquisa:focus,
.entrada__caixa input:focus,
.pd__caixa:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
  border-color: transparent;
}

.pesquisa:disabled { opacity: .6; }

/* =========================================================================
   4. ECRÃS
   ========================================================================= */

/* ---------- cabeçalho ---------- */

.cabecalho {
  background: var(--paper);
  border-bottom: 1px solid var(--linha);
  box-shadow: var(--sombra-1);
  position: sticky;
  top: 0;
  z-index: var(--z-cabecalho);
}

.cabecalho__interior {
  max-width: 1500px;
  margin: 0 auto;
  padding: 12px var(--lg) 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md);
  flex-wrap: wrap;
}

.cabecalho h1 {
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: var(--md);
}

/* O logo e o título separados por um filete: são duas coisas — a editora e a
   ferramenta —, não um logotipo composto. */
.cabecalho__logo {
  height: 32px;
  width: auto;
  padding-right: var(--md);
  border-right: 1px solid var(--linha);
}

.cabecalho__nota {
  margin: 0;
  font-size: var(--t-base);
  color: var(--grey);
}

/* Stock velho: o mesmo âmbar que nesta app quer dizer "pára e olha". */
.cabecalho__nota--velha { color: var(--limitado-texto); font-weight: 600; }

.cabecalho__lado {
  display: flex;
  align-items: center;
  gap: var(--sm) var(--md);
  /* Com os oito separadores e o email, num ecrã de 1280 px não cabia numa linha
     e a página ganhava scroll para o lado (09-10-2026): parte em duas. */
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}

/* O email é o que encolhe, com reticências à direita. O botão é um flex, e
   o `text-overflow` no próprio botão cortava o texto pelos dois lados
   («ir (mafalda.amaral@edicare.»): a reticência tem de estar no span. */
.sair { color: var(--grey); max-width: 100%; }
.sair__quem { display: inline-block; max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* ---------- as áreas (16-10-2026) ----------
   Quatro áreas, cada uma com a sua cor da camada 2 do design system (fixadas
   aqui pela Mafalda: não mudam com as campanhas). A cor marca a faixa do topo,
   o sublinhado da área aberta e o fundo da linha dos separadores. O nome está
   sempre escrito: a cor ajuda, não é a única pista. */
:root {
  --cor-area: var(--grey);       --fundo-area: #F1F0EE;
}
:root[data-area="hoje"]      { --cor-area: #03D0B6; --fundo-area: #E8FAF7; }
:root[data-area="catalogo"]  { --cor-area: #575756; --fundo-area: #F1F0EE; }
:root[data-area="comercial"] { --cor-area: #F29359; --fundo-area: #FDF0E6; }
:root[data-area="armazem"]   { --cor-area: #F9D671; --fundo-area: #FDF7E2; }
:root[data-area="lojas"]     { --cor-area: #AFC3D0; --fundo-area: #EEF3F6; }

.cabecalho__faixa { height: 4px; background: var(--cor-area); transition: background .2s; }
@media (prefers-reduced-motion: reduce) { .cabecalho__faixa { transition: none; } }

.areas {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 var(--lg);
  display: flex;
  align-items: stretch;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.areas[hidden] { display: none; }
.areas button, .areas__fora a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px 8px;
  font-family: inherit;
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--grey);
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.areas button::before, .areas__fora a::before {
  content: "";
  width: 9px; height: 9px; flex: 0 0 9px;
  border-radius: 50%;
  background: var(--c);
}
.areas [data-area="hoje"]      { --c: #03D0B6; }
.areas [data-area="catalogo"]  { --c: #575756; }
.areas [data-area="comercial"] { --c: #F29359; }
.areas [data-area="armazem"]   { --c: #F9D671; }
.areas [data-area="lojas"]     { --c: #AFC3D0; }
.areas button:hover { color: var(--ink); }
.areas button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--c); }
.areas button:focus-visible, .areas__fora a:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.areas .aba__n {
  display: inline-block; min-width: 1.6em; padding: 0 5px;
  border-radius: var(--radius-round); font-size: var(--t-xs); font-weight: 700; line-height: 1.6; text-align: center;
  color: var(--paper); background: var(--limitado-texto);
}

/* As outras apps, no fim da barra, com ↗. */
.areas__fora { display: flex; align-items: stretch; margin-left: var(--sm); padding-left: var(--sm); border-left: 1px solid var(--linha); }
.areas__fora[hidden] { display: none; }
.areas__fora a { font-weight: 500; }
.areas__fora a::after { content: "↗"; font-size: var(--t-xs); }
.areas__fora a[data-fora="marketing"] { --c: #F494B1; }
.areas__fora a:hover { color: var(--ink); }

/* Os separadores da área aberta: uma linha com o fundo da área. */
.abas {
  display: flex;
  gap: 6px;
  padding: 8px max(var(--lg), calc((100% - 1500px) / 2 + var(--lg)));
  background: var(--fundo-area);
  border-top: 1px solid var(--linha);
  overflow-x: auto;
  scrollbar-width: none;
}
.abas[hidden] { display: none; }
.abas button {
  padding: 5px 14px;
  font-family: inherit;
  font-size: var(--t-m);
  font-weight: 500;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid rgba(35, 32, 33, .12);
  border-radius: var(--radius-round);
  cursor: pointer;
  white-space: nowrap;
}
.abas button[hidden] { display: none; }

/* O número de pedidos e sugestões das lojas à espera, no separador Lojas. */
.abas .aba__n {
  display: inline-block; min-width: 1.6em; padding: 0 5px; margin-left: 2px;
  border-radius: var(--radius-round); font-size: var(--t-xs); font-weight: 700; line-height: 1.6; text-align: center;
  color: var(--paper); background: var(--limitado-texto);
}
.abas button[aria-pressed="true"] .aba__n { background: var(--paper); color: var(--ink); }
.abas button:hover { border-color: var(--ink); }
.abas button:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }

.abas button[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* ---------- a procura no cabeçalho ---------- */
.procura-global {
  position: relative;
  flex: 1 1 340px;
  max-width: 560px;
  display: flex;
  align-items: center;
  gap: 6px;
  align-self: center;
  min-width: 0;
}
.procura-global[hidden] { display: none; }
.procura-global .pesquisa { flex: 1 1 auto; padding: 8px var(--md); }
.procura-global .leitor__camara { width: 40px; height: 40px; font-size: 18px; }
.procura-global__lista {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: var(--z-janela);
  background: var(--paper);
  border: 1px solid var(--linha);
  border-radius: var(--radius);
  box-shadow: var(--sombra-3);
  padding: 6px;
  display: grid;
  gap: 2px;
  max-height: min(70vh, 480px);
  overflow-y: auto;
}
.procura-global__lista[hidden] { display: none; }
.procura-global__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 4px 12px;
  align-items: baseline;
  width: 100%;
  padding: 8px 10px;
  font-family: inherit;
  font-size: var(--t-base);
  text-align: left;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: var(--radius-s);
  cursor: pointer;
}
.procura-global__item:hover, .procura-global__item:focus-visible { background: var(--fundo); outline: none; }
.procura-global__ref { font-size: var(--t-s); color: var(--grey); font-variant-numeric: tabular-nums; }
.procura-global__nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.procura-global__estado { font-size: var(--t-s); color: var(--grey); white-space: nowrap; }
.procura-global__mais {
  padding: 8px 10px; font-family: inherit; font-size: var(--t-m); font-weight: 600;
  color: var(--teal-texto); background: none; border: 0; border-top: 1px solid var(--linha); cursor: pointer; text-align: left;
}
.procura-global__nada { margin: 0; padding: 10px; color: var(--grey); }

/* No telemóvel as abas ganham uma linha inteira, com os botões a dividir a
   largura; o email de quem está sai do "Sair"; a data encolhe. */
@media (max-width: 560px) {
  .cabecalho h1 { font-size: var(--t-2xl); gap: var(--sm); }
  .cabecalho__logo { height: 26px; padding-right: var(--sm); }
  .cabecalho__interior { padding: 10px var(--md) 12px; gap: var(--sm) var(--md); }
  .cabecalho__lado { flex: 1 1 100%; flex-wrap: wrap; gap: var(--sm); justify-content: flex-start; }
  .cabecalho__nota { flex: 1 1 auto; font-size: var(--t-s); }
  /* A procura ganha a linha inteira; as áreas e os separadores deslizam para o lado. */
  .procura-global { order: 5; flex: 1 1 100%; max-width: none; }
  .areas { padding: 0 var(--sm); }
  .areas button, .areas__fora a { padding: 8px 9px 7px; font-size: var(--t-m); }
  .abas { padding: 8px var(--md); }
  .sair__quem { display: none; }
}

/* ---------- entrar ---------- */

.entrada {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--xl) var(--lg);
  display: flex;
  justify-content: center;
}

.entrada__caixa {
  width: 100%;
  max-width: 380px;
  background: var(--paper);
  border: 1px solid var(--linha);
  border-radius: var(--radius);
  box-shadow: var(--sombra-2);
  padding: var(--lg);
  display: flex;
  flex-direction: column;
  gap: var(--sm);
}

.entrada__logo {
  height: 48px;
  width: auto;
  align-self: center;
  margin-bottom: var(--sm);
}

.entrada__caixa h2 {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  margin: 0;
}

.entrada__nota {
  margin: 0 0 var(--sm);
  font-size: var(--t-base);
  color: var(--grey);
}

.entrada__caixa label {
  font-size: var(--t-m);
  font-weight: 600;
  margin-top: var(--xs);
}

.entrada__caixa input {
  padding: 10px var(--md);
  font-family: inherit;
  font-size: var(--t-l);           /* abaixo de 16px o iPhone faz zoom ao tocar no campo */
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--linha);
  border-radius: var(--radius);
}

.entrada__erro {
  margin: var(--xs) 0 0;
  padding: var(--sm) var(--md);
  font-size: var(--t-base);
  color: var(--esgotado-texto);
  background: var(--esgotado-fundo);
  border-radius: var(--radius);
}

.entrada__caixa .botao--largo { margin-top: var(--md); }

.entrada__ajuda {
  margin: var(--sm) 0 0;
  font-size: var(--t-m);
  line-height: 1.45;
  color: var(--grey);
}

/* ---------- conteúdo e filtros ---------- */

.conteudo {
  max-width: 1500px;
  margin: 0 auto;
  padding: var(--lg);
}

.filtros {
  display: flex;
  gap: var(--md);
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--md);
}

/* As linhas de filtros com rótulo ficam mais juntas do que a da pesquisa. */
.filtros--eixo, .filtros--marcas, .filtros--marcadores { margin-top: calc(var(--md) * -0.5); }

.estados { display: flex; gap: var(--xs); flex-wrap: wrap; }

.contagem {
  margin: 0 0 var(--md);
  font-size: var(--t-base);
  color: var(--grey);
}

.pd__contas { margin: 0 0 var(--md); font-size: var(--t-base); color: var(--grey); }

/* Quantas colunas: 4 / 5 / 6. */
.colunas { display: flex; gap: 2px; }

.colunas button {
  width: 30px;
  padding: 7px 0;
  font-family: inherit;
  font-size: var(--t-m);
  color: var(--grey);
  background: var(--paper);
  border: 1px solid var(--linha);
  cursor: pointer;
}

.colunas button:first-child { border-radius: var(--radius-round) 0 0 var(--radius-round); }
.colunas button:last-child  { border-radius: 0 var(--radius-round) var(--radius-round) 0; }
.colunas button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* O controlo de colunas não serve de nada num telemóvel: cabe um cartão. */
@media (max-width: 560px) { .colunas { display: none; } }

/* ---------- a lista e o cartão ---------- */

.lista {
  display: grid;
  /* Exactamente o número de colunas pedido — carregar em 6 tem de dar 6. Nos
     ecrãs estreitos as media queries abaixo mandam, senão seis cartões num
     telemóvel ficavam com 50px cada. */
  grid-template-columns: repeat(var(--colunas, 4), minmax(0, 1fr));
  gap: var(--md);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* A escolha de colunas vale nos ecrãs largos. Abaixo disso manda o espaço. */
@media (max-width: 1100px) { .lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .lista { grid-template-columns: 1fr; } }

.ct {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--linha);
  border-radius: var(--radius);
  box-shadow: var(--sombra-1);
  overflow: hidden;
}

.ct:hover { border-color: var(--teal); box-shadow: var(--sombra-2); }

/* Um artigo marcado ganha contorno teal: vê-se de longe o que está na
   selecção, mesmo com seis cartões por linha. */
.ct--sel { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal), var(--sombra-1); }

/* O visto no canto da capa. */
.ct__visto {
  position: absolute;
  top: var(--sm);
  left: var(--sm);
  z-index: 1;
  width: 24px;
  height: 24px;
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--paper);
  border: 1.5px solid var(--grey);
  border-radius: 6px;
  box-shadow: var(--sombra-1);
  cursor: pointer;
}

.ct__visto svg { width: 14px; height: 14px; fill: none; stroke: var(--ink);
                 stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
                 opacity: 0; }
.ct__visto:hover { border-color: var(--teal-dark); }
.ct__visto[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); }
.ct__visto[aria-pressed="true"] svg { opacity: 1; }

/* Proporção fixa para a grelha não saltar enquanto as capas carregam. */
.ct__capa {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fundo);
  border-bottom: 1px solid var(--linha);
  padding: var(--sm);
}

.ct__capa img { max-width: 100%; max-height: 100%; object-fit: contain; }

.ct__semcapa { font-size: var(--t-m); font-weight: 600; color: var(--grey); }

.ct__corpo {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--xs);
  padding: var(--sm) var(--md) var(--md);
  min-width: 0;
}

.ct__titulo {
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: 600;
  line-height: 1.25;
  margin: var(--xs) 0 0;
}

.ct__meta { margin: 0; font-size: var(--t-xs); color: var(--grey); }

/* A colecção e o ano de edição, lado a lado: os dois filtram com um clique. */
.ct__col-ano { margin: 0; display: flex; gap: var(--sm); align-items: baseline; flex-wrap: wrap; }
.ct__ano {
  padding: 0;
  font-family: inherit;
  font-size: var(--t-xs);
  color: var(--grey);
  background: none;
  border: none;
  border-bottom: 1px dotted currentColor;
  cursor: pointer;
}
.ct__ano:hover { color: var(--ink); }

.ct__colecao {
  align-self: flex-start;
  padding: 0;
  font-family: inherit;
  font-size: var(--t-xs);
  color: var(--teal-dark);
  background: none;
  border: none;
  border-bottom: 1px dotted currentColor;
  cursor: pointer;
}

.ct__etiquetas { margin: 0; display: flex; gap: 3px; flex-wrap: wrap; }

.ct__fundo {
  margin: var(--xs) 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--xs);
  flex-wrap: wrap;
}

.ct__preco { font-size: var(--t-m); font-weight: 600; }

.ct__qtd { margin: 0; font-size: var(--t-xs); color: var(--grey); }
/* Numa conta de loja (29-10-2026): o que a loja tem e vendeu, por baixo do central. */
.ct__loja { margin: 2px 0 0; font-size: var(--t-xs); color: var(--grey); display: flex; gap: 4px 10px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.ct__loja b { color: var(--ink); font-weight: 600; }
.ct__selo { align-self: center; font-size: var(--t-xxs); }

/* Era um botão "onde está", que abria a mesma ficha do botão "ficha". O botão
   saiu; o sinal ficou. */
.ct__fora { color: var(--grey); }
/* A campanha, interna: o preço de campanha e o desconto, numa linha discreta. */
.ct__campanha { margin: 2px 0 0; font-size: var(--t-xs); color: var(--grey); display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
/* O «Pr. Feiras» (PVP5) passou a cinzento a 03-11-2026: a cor de campanha é da campanha a sério. */
.ct__campanha-rotulo { text-transform: uppercase; letter-spacing: .05em; font-weight: 600; font-size: var(--t-xxs); color: var(--grey); }
.ct__campanha b { color: var(--ink); }
.ct__campanha-desc { color: var(--grey); font-weight: 600; }
/* A campanha a decorrer (091): à vista, com o nome e as datas por baixo. */
.ct__emcampanha { margin: 6px 0 0; padding: 5px 8px; border-radius: 8px; background: var(--limitado-fundo); font-size: var(--t-xs);
  display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.ct__emcampanha-rotulo { text-transform: uppercase; letter-spacing: .05em; font-weight: 700; font-size: var(--t-xxs); color: var(--limitado-texto); }
.ct__emcampanha b { color: var(--ink); }
.ct__emcampanha-desc { color: var(--limitado-texto); font-weight: 700; }
.ct__emcampanha-quando { flex-basis: 100%; color: var(--grey); font-size: var(--t-xxs); }
.ct__botao--ver { border-color: var(--limitado-texto); color: var(--limitado-texto); }
.ct__fora i { font-style: normal; color: var(--limitado-texto); }

.ct__accoes {
  margin: auto 0 0;
  padding-top: var(--sm);
  display: flex;
  gap: var(--xs);
  flex-wrap: wrap;
}

.ct__botao { color: var(--grey); }
.ct__botao i { font-style: normal; color: var(--limitado-texto); }

/* O botão das acções, aceso quando há alguma por fechar. */
.ct__botao--acc {
  color: var(--lancamento-texto);
  background: var(--lancamento-fundo);
  border-color: transparent;
}

/* O interruptor das listagens: aceso quando o artigo entra, apagado quando não. */
.ct__botao--lst[aria-pressed="true"]  { color: var(--ok-texto);       background: var(--ok-fundo);       border-color: transparent; }
.ct__botao--lst[aria-pressed="false"] { color: var(--esgotado-texto); background: var(--esgotado-fundo); border-color: transparent; }

/* ---------- a barra da selecção ----------
   Preta como o cabeçalho, presa ao fundo do ecrã enquanto houver selecção. */

.sel {
  position: sticky;
  bottom: 0;
  z-index: var(--z-barra);
  margin: var(--md) calc(-1 * var(--lg)) calc(-1 * var(--lg));
  padding: 12px var(--lg);
  background: var(--ink);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md);
  flex-wrap: wrap;
  box-shadow: 0 -4px 16px rgba(35,32,33,.18);
}

.sel__n { margin: 0; font-family: var(--font-display); font-size: var(--t-xl); font-weight: 700; }
.sel__refs { margin: 0; font-size: var(--t-s); color: rgba(255,255,255,.72); }
.sel__botoes { display: flex; gap: var(--sm); align-items: center; flex-wrap: wrap; }

@media (max-width: 560px) {
  .sel { margin-inline: calc(-1 * var(--md)); padding-inline: var(--md); }
}

/* ---------- rodapé ---------- */

.rodape {
  max-width: 1500px;
  margin: 0 auto;
  padding: var(--lg);
  border-top: 1px solid var(--linha);
  font-size: var(--t-m);
  color: var(--grey);
}

.rodape p { margin: 0 0 var(--xs); }
.rodape__interno { font-weight: 600; }

/* ---------- ficha do artigo ---------- */

.fi__topo {
  display: flex;
  gap: var(--md);
  align-items: flex-start;
  padding-right: var(--xl);
  margin-bottom: var(--lg);
}

.fi__capa {
  flex: 0 0 auto;
  width: 96px;
  height: 128px;
  object-fit: contain;
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: 6px;
}

.fi__topo h3 {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  margin: 0 0 var(--xs);
  line-height: 1.2;
}

.fi__ref { margin: 0 0 var(--sm); font-size: var(--t-m); color: var(--grey); }

.fi__marcas { margin: var(--sm) 0 0; display: flex; gap: var(--xs); flex-wrap: wrap; }

.fi__marcas span {
  padding: 2px 8px;
  font-size: var(--t-xs);
  color: var(--grey);
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: var(--radius-round);
}

.fi__ferramentas {
  display: flex;
  gap: var(--xs);
  flex-wrap: wrap;
  align-items: center;
  margin: calc(var(--lg) * -0.5) 0 var(--lg);
}

.fi__corpo > section { margin-bottom: var(--lg); }

.fi__corpo h4 {
  font-family: var(--font-display);
  font-size: var(--t-l);
  margin: 0 0 var(--sm);
  padding-bottom: var(--xs);
  border-bottom: 1px solid var(--linha);
}

.fi__campos {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--xs) var(--md);
}

.fi__campo { display: flex; justify-content: space-between; gap: var(--sm); font-size: var(--t-base); }
.fi__campo dt { color: var(--grey); }
.fi__campo dd { margin: 0; font-weight: 600; text-align: right; }

.fi__nota, .fi__vazio {
  margin: var(--sm) 0 0;
  font-size: var(--t-s);
  color: var(--grey);
  line-height: 1.45;
}

.fi__nota--atencao {
  margin-top: var(--md);
  padding: var(--sm) var(--md);
  color: var(--limitado-texto);
  background: var(--limitado-fundo);
  border-radius: var(--radius);
  font-size: var(--t-m);
}

.fi__texto { margin: 0; font-size: var(--t-base); line-height: 1.55; }

.fi__rodape {
  margin-top: var(--lg);
  padding-top: var(--md);
  border-top: 1px solid var(--linha);
  font-size: var(--t-s);
  font-weight: 600;
  color: var(--grey);
  line-height: 1.45;
}

/* Só aparece na impressão em versão de cliente, onde substitui o aviso interno. */
.fi__rodape--cliente { display: none; }

/* O cabeçalho da folha impressa. No ecrã não existe. */
.fi__folha { display: none; }

.fi__listagem { padding-top: var(--sm); }

.fi__troca {
  display: flex;
  align-items: center;
  gap: var(--sm);
  font-size: var(--t-base);
  cursor: pointer;
}

.fi__troca input { width: 18px; height: 18px; accent-color: var(--teal-dark); cursor: pointer; }
.fi__troca input:disabled { cursor: default; }
.fi__troca:has(input:disabled) { color: var(--grey); cursor: default; }

/* -- vendas -- */

.fi__ano {
  padding: var(--md) 0;
  border-bottom: 1px solid var(--linha);
}

.fi__ano:last-child { border-bottom: none; }

/* Só o ano mais recente aberto; os anteriores dobrados na linha do total, com o
   triângulo a dizer que abrem (24-09-2026). */
details.fi__ano > summary { cursor: pointer; list-style: none; }
details.fi__ano > summary::-webkit-details-marker { display: none; }
details.fi__ano > summary h4::before { content: "▸"; display: inline-block; width: 16px; color: var(--grey); font-size: var(--t-m); }
details.fi__ano[open] > summary h4::before { content: "▾"; }
details.fi__ano > summary:hover h4 { color: var(--teal-texto); }

.fi__anotopo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sm);
  flex-wrap: wrap;
  margin-bottom: var(--sm);
}

.fi__anotopo h4 { border: none; margin: 0; padding: 0; font-size: var(--t-xl); }

.fi__totais { display: flex; gap: var(--md); flex-wrap: wrap; font-size: var(--t-m); }
.fi__total b { font-weight: 600; color: var(--grey); font-size: var(--t-xs);
               text-transform: uppercase; letter-spacing: .04em; }

/* Barras a partir da base, escala do próprio ano. Serve para ver a forma do ano,
   não para comparar anos entre si — isso enganaria. */
.fi__grafico {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3px;
  /* 72px de barras mais a linha das unidades por cima. */
  height: 86px;
  margin-bottom: var(--md);
}

.fi__mes { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.fi__barras {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1px;
}

/* Uma coluna do mês: as unidades por cima da sua barra. A barra enche a coluna. */
.fi__col {
  width: 44%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Pequenas de propósito: são para consultar, não para competir com as barras.
   8px é o tamanho a que "81" e "25" cabem lado a lado em todos os meses — a
   excepção à escala, documentada. */
.fi__colqtd {
  font-size: 8px;
  line-height: 1.1;
  min-height: 9px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
}

.fi__colqtd--sede      { color: var(--barra-sede-texto); }
.fi__colqtd--lojas     { color: var(--grey); }
.fi__colqtd--devolucao { color: var(--esgotado-texto); }

.fi__barra { width: 100%; border-radius: 2px 2px 0 0; min-height: 1px; }
.fi__barra--sede      { background: var(--teal-dark); }
.fi__barra--lojas     { background: var(--barra-lojas); }
/* Devoluções. Vermelho porque a altura usa o valor absoluto: sem cor distinta,
   uma nota de crédito grande lia-se como o melhor mês do ano. */
.fi__barra--devolucao { background: var(--esgotado-texto); }

.fi__legenda {
  display: flex;
  gap: var(--md);
  flex-wrap: wrap;
  margin: 0 0 var(--md);
  font-size: var(--t-xs);
  color: var(--grey);
}

.fi__legenda span { display: flex; align-items: center; gap: 5px; }

.fi__cor { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

.fi__mesnome { font-size: 9px; color: var(--grey); text-align: center; overflow: hidden; }

.fi__detalhes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--md);
}

.fi__detalhes h5, .fi__sitio h5 {
  margin: 0 0 var(--xs);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--grey);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.fi__lista { list-style: none; margin: 0; padding: 0; font-size: var(--t-m); }

.fi__lista li {
  display: flex;
  justify-content: space-between;
  gap: var(--sm);
  padding: 3px 0;
  border-bottom: 1px solid var(--fundo);
}

.fi__lista li span:first-child { color: var(--grey); min-width: 0;
                                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fi__lista li span:last-child { flex: 0 0 auto; }

/* As tiragens na ficha do artigo (u_edicoes). Uma por ler leva o texto do PHC ao lado. */
.fi__edicoes li span:first-child { color: var(--ink); }
.fi__edicao--por-ler i { font-style: italic; color: var(--grey); }
/* As entradas de fornecedor além das primeiras ficam dobradas (28-09-2026). */
.fi__mais > summary { cursor: pointer; color: var(--grey); font-size: var(--t-xs); margin: 4px 0; }
.fi__mais > summary:hover { color: var(--ink); }

/* -- onde está o stock -- */

.fi__sitios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--md);
}

.fi__sitio h5 { display: flex; justify-content: space-between; gap: var(--sm); align-items: baseline; }
.fi__sitio h5 b { font-size: var(--t-m); color: var(--ink); text-transform: none; letter-spacing: 0; }

/* As quebras ganham um filete âmbar. Não é alarme — é para não passarem
   despercebidas numa ficha com muita informação. */
.fi__sitio--QUEBRAS { padding-left: var(--sm); border-left: 2px solid var(--limitado-texto); }
.fi__sitio--RECUPERADOS { padding-left: var(--sm); border-left: 2px solid var(--barra-lojas); }
.fi__sitio--QUEBRAS h5 b { color: var(--limitado-texto); }

/* ---------- listagens ---------- */

.lst__titulo { font-family: var(--font-display); font-size: var(--t-2xl); margin: 0 0 var(--xs); }

.lst__intro, .lst__vazio { font-size: var(--t-m); color: var(--grey); line-height: 1.5; }
.lst__intro { margin: 0 0 var(--lg); }

.lst__grupo { margin-bottom: var(--lg); }

.lst__grupo h4 {
  font-family: var(--font-display);
  font-size: var(--t-l);
  margin: 0 0 2px;
  padding-bottom: var(--xs);
  border-bottom: 1px solid var(--linha);
}

.lst__nota { margin: var(--xs) 0 var(--sm); font-size: var(--t-s); color: var(--grey); }

.lst__grupo ul { list-style: none; margin: 0; padding: 0; }

.lst__grupo li {
  display: flex;
  align-items: center;
  gap: var(--sm);
  flex-wrap: wrap;
  padding: var(--sm) 0;
  border-bottom: 1px solid var(--fundo);
}

.lst__nome { flex: 1 1 240px; min-width: 0; font-size: var(--t-base); }

/* «Quem usa a app» (056): o quadro dos acessos, por conta. */
.lst__quadro { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.lst__quadro th {
  text-align: left; font-size: var(--t-xs); letter-spacing: .04em; text-transform: uppercase;
  color: var(--grey); padding: var(--xs) var(--sm) var(--xs) 0; border-bottom: 1px solid var(--linha);
}
.lst__quadro td { padding: var(--xs) var(--sm) var(--xs) 0; border-bottom: 1px solid var(--fundo); vertical-align: top; }
.lst__quadro td:first-child { word-break: break-all; }
.lst__quadro .n { text-align: right; font-variant-numeric: tabular-nums; }
.lst__ligada { color: var(--teal-dark, #02A892); font-weight: 600; }
.lst__meta { font-size: var(--t-s); color: var(--grey); white-space: nowrap; }
.lst__botao { flex: 0 0 auto; }

/* O grupo interno leva o mesmo filete âmbar das quebras: é o sinal, nesta app,
   de "isto não sai da Edicare". */
.lst__grupo:last-child { padding-left: var(--sm); border-left: 2px solid var(--limitado-texto); }

/* ---------- topo dos separadores (pedidos, acções, propostas) ---------- */

.pd__topo {
  display: flex;
  gap: var(--lg);
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: var(--md);
}

.pd__titulo {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  margin: 0 0 var(--xs);
}

.pd__intro { margin: 0; max-width: 62ch; font-size: var(--t-base); color: var(--grey); line-height: 1.5; }

.pd__nota {
  margin: 0;
  padding: var(--sm) var(--md);
  font-size: var(--t-m);
  color: var(--limitado-texto);
  background: var(--limitado-fundo);
  border-radius: var(--radius);
}

/* ---------- separador Pedidos ---------- */

.pd__caixa {
  width: 100%;
  padding: var(--md);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--t-m);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--linha);
  border-radius: var(--radius);
  box-shadow: var(--sombra-1);
  resize: vertical;
}

.pd__accoes { display: flex; gap: var(--sm); align-items: center; margin: var(--md) 0 var(--lg); }
.pd__analisar { padding-inline: 28px; }

.pd__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd__ref { font-size: var(--t-xs); color: var(--grey); }

.pd__saidas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--md);
  margin-top: var(--lg);
}

.pd__saidas h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sm);
  margin: 0 0 var(--sm);
  font-family: var(--font-display);
  font-size: var(--t-l);
}

.pd__texto {
  margin: 0;
  padding: var(--md);
  max-height: 460px;
  overflow: auto;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--t-s);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--paper);
  border: 1px solid var(--linha);
  border-radius: var(--radius);
}

.pd__ignoradas { margin-top: var(--lg); font-size: var(--t-m); color: var(--grey); }
.pd__ignoradas summary { cursor: pointer; }
.pd__ignoradas ul { margin: var(--sm) 0 0; padding-left: var(--lg); line-height: 1.6; }

@media (max-width: 820px) {
  .pd__saidas { grid-template-columns: 1fr; }
}

/* ---------- separador Acções ---------- */

.ac__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sm); }

.ac__item {
  padding: var(--sm) var(--md);
  background: var(--paper);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--linha);
  border-radius: var(--radius);
  font-size: var(--t-m);
}

/* O filete à esquerda diz o estado sem ser preciso ler. */
.ac__item--ABERTA    { border-left-color: var(--teal); }
.ac__item--EM_CURSO  { border-left-color: var(--limitado-texto); }
.ac__item--FEITA     { border-left-color: var(--ok-texto); opacity: .72; }
.ac__item--DESISTIDA { border-left-color: var(--linha); opacity: .6; }
/* O filete a vermelho ganha ao do estado: um prazo passado é a informação mais
   urgente da linha, e tem de se ver sem ler. */
.ac__item--atraso    { border-left-color: var(--esgotado-texto) !important; }

.ac__cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sm);
}

.ac__tipo { font-weight: 600; }
.ac__artigo { margin: var(--xs) 0 0; }
.ac__ref { font-size: var(--t-xs); color: var(--grey); }
.ac__obs-texto { margin: var(--xs) 0 0; line-height: 1.5; white-space: pre-wrap; }
.ac__meta { margin: var(--xs) 0 0; font-size: var(--t-xs); color: var(--grey); }
.ac__atrasada { color: var(--esgotado-texto); font-weight: 600; }

.ac__botoes { display: flex; gap: var(--xs); margin: var(--sm) 0 0; }

.ac__selo-atraso {
  display: inline-block;
  margin-top: 2px;
  padding: 0 7px;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--esgotado-texto);
  background: var(--esgotado-fundo);
  border-radius: var(--radius-round);
  white-space: nowrap;
}

/* -- o formulário -- */

.ac__nova, .ac__historico { margin-top: var(--sm); font-size: var(--t-m); }
.ac__nova summary, .ac__historico summary { cursor: pointer; color: var(--grey); }
.ac__nova summary:hover, .ac__historico summary:hover { color: var(--ink); }
.ac__historico .ac__lista { margin-top: var(--sm); }

.ac__forma {
  margin-top: var(--sm);
  padding: var(--md);
  background: var(--fundo);
  border-radius: var(--radius);
}

.ac__campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sm);
}

.ac__forma label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--t-xs);
  color: var(--grey);
}

.ac__forma select,
.ac__forma input,
.ac__forma textarea {
  padding: 6px 10px;
  font-family: inherit;
  font-size: var(--t-m);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--linha);
  border-radius: var(--radius-s);
}

.ac__forma textarea { resize: vertical; line-height: 1.5; }
.ac__obs { margin-top: var(--sm); }

/* V4, frente 3: movimentos e contagens. */
.ac__movimento { margin-top: var(--sm); }
.ac__legado {
  font-size: var(--t-xxs); text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
  color: var(--grey); border: 1px solid var(--linha); border-radius: 4px; padding: 0 4px; vertical-align: middle;
}
/* «verificação pedida»: uma contagem num armazém de quebras ou recuperados, e o
   botão que a abre da própria linha (30-09-2026). */
.ac__legado--verif { color: var(--limitado-texto); border-color: currentColor; }
.ac__verificar { font-weight: 600; }
.ac__onde { font-weight: 500; }
.ac__pedido-por { display: block; font-size: var(--t-xs); color: var(--grey); }
.ac__cel-onde { white-space: nowrap; }
.ac__eixo-separador { width: 1px; align-self: stretch; background: var(--linha); margin: 0 var(--xs); }
.ac__onde-esta {
  margin: 0 0 var(--sm); padding: 8px 12px; border: 1px solid var(--linha); border-radius: var(--radius-s);
  background: var(--fundo); font-size: var(--t-s);
}
.ac__onde-titulo { margin: 0; }
.ac__onde-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ac__onde-chip { background: var(--paper); border: 1px solid var(--linha); border-radius: 6px; padding: 1px 8px; white-space: nowrap; }
.ac__onde-chip b { font-variant-numeric: tabular-nums; }
.ac__onde-chip--QUEBRAS { border-color: var(--limitado-texto); }
.ac__onde-chip--CENTRAL { border-color: var(--teal-dark); }
.ac__registar { margin-top: var(--sm); }

.ac__erro {
  margin: var(--sm) 0 0;
  font-size: var(--t-s);
  color: var(--esgotado-texto);
}

/* -- sugestões -- */

.ac__titulo-sugestoes {
  margin: var(--xl) 0 var(--xs);
  font-family: var(--font-display);
  font-size: var(--t-2xl);
}

.ac__intro-sugestoes { margin-bottom: var(--md); }
.ac__sugestoes { margin-bottom: var(--lg); }

.ac__sugestoes h3 {
  display: flex;
  align-items: center;
  gap: var(--sm);
  margin: 0 0 var(--sm);
  font-family: var(--font-display);
  font-size: var(--t-l);
}

.ac__conta {
  padding: 1px 9px;
  font-family: var(--font-body);
  font-size: var(--t-s);
  font-weight: 500;
  color: var(--grey);
  background: var(--fundo);
  border-radius: var(--radius-round);
}

.ac__sugestao {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--md);
  padding: var(--sm) var(--md);
  font-size: var(--t-m);
  background: var(--paper);
  border: 1px solid var(--linha);
  border-radius: var(--radius);
}

.ac__porque { margin: 2px 0 0; font-size: var(--t-s); color: var(--grey); }
.ac__criar { flex: 0 0 auto; }
.ac__mais { margin: var(--sm) 0 0; font-size: var(--t-s); color: var(--grey); }
.ac__nova-sugestao { width: 100%; }
.ac__nova-sugestao > p { margin: 0 0 var(--sm); }

/* A sugestão segue o desenho do quadro: capa, código, título. */
.ac__sugestao-artigo { display: flex; gap: var(--sm); align-items: flex-start; }
.ac__sugestao-ref { margin-right: var(--xs); }

@media (max-width: 560px) {
  .ac__sugestao { flex-direction: column; }
}

/* -- a janela das acções -- */

.ac__janela-topo {
  display: flex;
  gap: var(--md);
  align-items: flex-start;
  padding-right: var(--xl);
  margin-bottom: var(--md);
}

.ac__janela-topo h3 {
  margin: 0 0 2px;
  font-family: var(--font-display);
  font-size: var(--t-xl);
  line-height: 1.25;
}

.ac__capa {
  flex: 0 0 auto;
  width: 54px;
  height: 72px;
  object-fit: contain;
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: 4px;
}

.ac__capa--vazia {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-xxs);
  color: var(--grey);
  text-align: center;
}

/* -- o quadro do separador -- */

/* O filete à esquerda diz o estado sem ser preciso ler a coluna. */
.ac__linha td:first-child { border-left: 3px solid transparent; }
.ac__linha--ABERTA    td:first-child { border-left-color: var(--teal); }
.ac__linha--EM_CURSO  td:first-child { border-left-color: var(--limitado-texto); }
.ac__linha--FEITA     td:first-child { border-left-color: var(--ok-texto); }
.ac__linha--DESISTIDA td:first-child { border-left-color: var(--linha); }
.ac__linha--atraso    td:first-child { border-left-color: var(--esgotado-texto) !important; }
.ac__linha--FEITA, .ac__linha--DESISTIDA { opacity: .68; }

.ac__cel-ref { white-space: nowrap; }
.ac__cel-artigo { display: flex; gap: var(--sm); align-items: flex-start; min-width: 260px; }
.ac__cel-titulo { display: block; line-height: 1.35; }

.ac__mini {
  flex: 0 0 auto;
  width: 30px;
  height: 40px;
  object-fit: contain;
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: 3px;
}

.ac__mini--vazia {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  color: var(--grey);
  text-align: center;
  overflow: hidden;
}

/* Os três botões lado a lado. Sem isto empilhavam-se numa coluna estreita e o
   quadro ficava com o dobro da altura por nada. */
.ac__cel-botoes { min-width: 210px; }
.ac__cel-botoes .ac__botoes { margin: 0; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- separador Propostas ---------- */

/* Colar uma lista do Excel numa proposta (30-09-2026). */
.pr__nova { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sm); margin: 0 0 var(--sm); }
.pr__colar-abrir { margin: var(--xs) 0 0; font-size: var(--t-xs); }
.pr__colar { margin-top: var(--xs); }
.pr__colar textarea { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: var(--t-xs); }
.pr__colar-botoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sm); margin: var(--xs) 0 0; }
.pr__colar-resultado { margin: var(--xs) 0 0; font-size: var(--t-xs); color: var(--grey); }
.pr__colar-resultado--aviso { color: var(--limitado-texto); }

/* O potencial cliente: ainda não existe no PHC (30-09-2026). */
.pr__potencial { margin: var(--xs) 0 0; font-size: var(--t-xs); }
.pr__potencial-campo { margin-top: var(--xs); }
.pr__potencial-campo input { width: 100%; }
.pr__potencial-selo {
  font-size: var(--t-xxs); text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
  color: var(--limitado-texto); border: 1px solid currentColor; border-radius: 4px; padding: 0 4px;
}

.pr__titulo {
  margin: 0;
  padding-right: var(--xl);
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  display: flex;
  align-items: center;
  gap: var(--sm);
  flex-wrap: wrap;
}

.pr__titulo small { font-family: var(--font-body); font-size: var(--t-m); font-weight: 500; color: var(--grey); }

.pr__meta { margin: var(--xs) 0 0; font-size: var(--t-m); color: var(--grey); line-height: 1.5; }
.pr__meta b { color: var(--ink); }
.pr__espera { color: var(--limitado-texto); font-weight: 600; }

.pr__campo label {
  display: block;
  font-size: var(--t-s);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: var(--xs);
}

.pr__ajuda { text-transform: none; letter-spacing: 0; font-weight: 500; }
.pr__ajuda-nota { margin: 4px 0 0; font-size: var(--t-s); color: var(--grey); }

.pr__campo textarea, .pr__procura input {
  width: 100%;
  padding: 9px 14px;
  font-family: inherit;
  font-size: var(--t-base);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--linha);
  border-radius: var(--radius);
  resize: vertical;
  line-height: 1.5;
}

.pr__campo textarea:disabled { background: var(--fundo); color: var(--grey); }

/* As observações internas levam o filete âmbar: é a cor que nesta app quer
   dizer "isto não sai daqui". */
.pr__campo--interno textarea { border-left: 3px solid var(--limitado-texto); }

.pr__procura { display: flex; gap: var(--md); align-items: center; }
.pr__procura input { flex: 1 1 auto; }

/* O interruptor dentro de um campo: mais específico do que `.pr__campo label`,
   senão apanhava as maiúsculas e o bloco do rótulo e ficava cortado. */
.pr__campo .pr__interruptor {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin: 0;
  font-size: var(--t-s);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  color: var(--grey);
}

.pr__interruptor input { accent-color: var(--teal-dark); }
.pr__interruptor--bloco { align-self: flex-end; padding-bottom: 8px; }

.pr__condicoes { display: flex; gap: var(--lg); align-items: flex-end; flex-wrap: wrap; }
.pr__desconto { display: inline-flex; align-items: center; gap: 6px; }

.pr__desconto input {
  width: 88px;
  padding: 7px 10px;
  font-family: inherit;
  font-size: var(--t-base);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--linha);
  border-radius: var(--radius);
  font-variant-numeric: tabular-nums;
}

.pr__desconto input:disabled { background: var(--fundo); color: var(--grey); }

.pr__resultados {
  margin-top: -6px;
  border: 1px solid var(--linha);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden;
  max-height: 280px;
  overflow-y: auto;
}

.pr__resultado {
  width: 100%;
  padding: 8px 14px;
  display: flex;
  gap: var(--sm);
  align-items: baseline;
  flex-wrap: wrap;
  font-family: inherit;
  font-size: var(--t-m);
  text-align: left;
  color: var(--ink);
  background: var(--paper);
  border: none;
  border-top: 1px solid var(--fundo);
  cursor: pointer;
}

.pr__resultado:hover, .pr__resultado--on { background: var(--ok-fundo); }
.pr__resultado b { font-weight: 600; }
.pr__resultado-num { font-variant-numeric: tabular-nums; color: var(--grey); min-width: 6ch; }
.pr__resultado-meta { color: var(--grey); font-size: var(--t-s); }
.pr__nada { margin: 0; padding: 8px 14px; font-size: var(--t-m); color: var(--grey); }

.pr__cliente {
  margin-top: var(--sm);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sm) var(--md);
  padding: 12px 14px;
  background: var(--fundo);
  border-radius: var(--radius);
  font-size: var(--t-m);
}

.pr__cliente-nome { margin: 0; font-weight: 600; font-size: var(--t-base); }
.pr__cliente-meta { margin: 2px 0 0; color: var(--grey); }
.pr__cond { margin: 0; display: grid; grid-template-columns: auto auto; gap: 2px 10px; font-size: var(--t-s); }
.pr__cond dt { color: var(--grey); }
.pr__cond dd { margin: 0; font-weight: 500; }

.pr__aviso-cobranca {
  grid-column: 1 / -1;
  margin: 0;
  padding: 6px 10px;
  font-size: var(--t-s);
  color: var(--limitado-texto);
  background: var(--limitado-fundo);
  border-radius: var(--radius-s);
}

.pr__linhas { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linha); border-radius: var(--radius); overflow: hidden; }

/* Flex e não grelha: em simulação a linha tem seis coisas (capa, texto, selo,
   PVP, quantidade, ×) e a grelha de cinco colunas mandava o × para a linha de
   baixo e cortava a quantidade (visto pela Mafalda a 24-09-2026). */
.pr__linha {
  display: flex;
  gap: var(--md);
  align-items: center;
  padding: 8px 12px;
  border-top: 1px solid var(--fundo);
  font-size: var(--t-m);
}

.pr__linha:first-child { border-top: none; }
.pr__linha-texto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.pr__linha > .selo, .pr__linha-pvp, .pr__qtd, .pr__tirar { flex: 0 0 auto; }
.pr__linha-titulo { font-family: var(--font-display); font-weight: 600; font-size: var(--t-m); line-height: 1.2; }
.pr__linha-meta { font-size: var(--t-xs); color: var(--grey); }
.pr__linha-pvp { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.pr__mini {
  width: 44px;
  height: 36px;
  object-fit: contain;
  background: var(--fundo);
  border-radius: 4px;
  display: inline-grid;
  place-items: center;
  font-size: 9px;
  color: var(--grey);
}

.pr__tirar {
  width: 26px;
  height: 26px;
  padding: 0;
  font-family: inherit;
  font-size: var(--t-l);
  line-height: 1;
  color: var(--grey);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-round);
  cursor: pointer;
}

.pr__tirar:hover { color: var(--esgotado-texto); border-color: var(--esgotado-texto); }

.pr__botoes { margin: 0; display: flex; gap: var(--sm); align-items: center; flex-wrap: wrap; }
.pr__apagar { margin-left: auto; }
.pr__gravado { font-size: var(--t-s); color: var(--ok-texto); }
.pr__separador { flex: 1 1 auto; }
.pr__filtro-cliente { flex: 0 1 320px; }

/* V4, frente 2: nome, modo, quantidades e versões. */
.pr__modos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sm); }
.pr__modo {
  display: flex; gap: var(--sm); align-items: flex-start;
  padding: 8px 12px; border: 1px solid var(--linha); border-radius: var(--radius-s);
  cursor: pointer; font-size: var(--t-m); text-transform: none; letter-spacing: 0; font-weight: 500;
}
.pr__modo input { accent-color: var(--teal-dark); margin-top: 3px; }
.pr__modo b { display: block; font-family: var(--font-display); font-size: var(--t-base); }
.pr__modo span { color: var(--grey); font-size: var(--t-s); }
.pr__modo:has(input:checked) { border-color: var(--teal-dark); background: var(--teal-fundo); }
.pr__modo:has(input:disabled) { cursor: default; opacity: .75; }
@media (max-width: 600px) { .pr__modos { grid-template-columns: 1fr; } }

.pr__campo input[type="text"].pr__nome {
  width: 100%; padding: 8px 12px; font: inherit; font-size: var(--t-base);
  border: 1px solid var(--linha); border-radius: var(--radius-s); background: var(--paper); color: var(--ink);
}
.pr__campo input.pr__nome:disabled { background: var(--fundo); color: var(--grey); }

.pr__qtd {
  width: 62px; padding: 3px 6px; font: inherit; font-size: var(--t-m); text-align: right;
  font-variant-numeric: tabular-nums; border: 1px solid var(--linha); border-radius: 4px;
  background: var(--paper); color: var(--ink);
}
.pr__qtd:disabled { background: var(--fundo); color: var(--grey); }

.pr__versao {
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-s);
  padding: 1px 8px; border: 1px solid var(--linha); border-radius: var(--radius-round);
  background: var(--fundo); color: var(--ink); vertical-align: middle;
}
.pr__faixa {
  margin: var(--sm) 0 0; padding: 8px 12px; border-radius: var(--radius-s);
  background: var(--limitado-fundo); color: var(--limitado-texto); font-size: var(--t-m);
}
.pr__versoes { margin: var(--md) 0 0; border: 1px solid var(--linha); border-radius: var(--radius-s); padding: 8px 12px; font-size: var(--t-m); }
.pr__versoes summary { cursor: pointer; font-weight: 600; }
.pr__versoes ul { list-style: none; margin: 6px 0 0; padding: 0; }
.pr__versoes li { display: flex; gap: var(--sm); align-items: center; flex-wrap: wrap; padding: 4px 0; border-top: 1px solid var(--linha); }

.pr__juntar { margin-top: var(--sm); }
.pr__juntar-lista { margin-top: 6px; }
.pr__folha-tit .pr__folha-nome { display: block; font-family: var(--font-display); font-size: var(--t-l); color: var(--teal-texto); line-height: 1.2; }
.pr__totais {
  display: grid; grid-template-columns: auto auto; gap: 2px 20px; justify-content: end;
  margin-left: auto; font-variant-numeric: tabular-nums; font-size: var(--t-m); padding: 4px 6px 0;
}
.pr__totais b { font-family: var(--font-display); font-size: var(--t-xl); }
.pr__folha .etiqueta { margin-left: 4px; vertical-align: middle; }
.pr__escolha { display: flex; flex-direction: column; gap: 6px; }
.pr__escolha .botao { justify-content: flex-start; text-align: left; }

@media (max-width: 560px) {
  .pr__cliente { grid-template-columns: 1fr; }
  .pr__procura { flex-wrap: wrap; }
  .pr__linha { flex-wrap: wrap; gap: var(--xs) var(--sm); }
  .pr__linha-texto { flex-basis: calc(100% - 44px - var(--sm)); }
}

/* A janela da proposta é larga: leva a folha (uma tabela com sete colunas e as
   etiquetas ao lado do título) e o formulário por baixo. A 760 px o título
   dobrava em três linhas e o resto empilhava (visto pela Mafalda a 24-09-2026). */
.janela--proposta .janela__caixa { max-width: 1120px; }
/* O título é o que estica; os números ficam na largura deles. */
.pr__tabela td:nth-child(2) { width: 100%; min-width: 220px; }

/* -- a folha (o que o cliente recebe) -- */

.pr__folha {
  border: 1px solid var(--linha);
  border-radius: var(--radius);
  padding: var(--lg);
  display: grid;
  gap: var(--md);
  font-size: var(--t-m);
}

.pr__folha-cab {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--md);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--linha);
}

.pr__folha-cab img { height: 30px; width: auto; }
.pr__folha-tit { text-align: right; }
.pr__folha-tit b { display: block; font-family: var(--font-display); font-size: var(--t-2xl); line-height: 1.1; }
.pr__folha-tit span { color: var(--grey); font-size: var(--t-s); }

.pr__folha-para { display: grid; grid-template-columns: 1fr 1fr; gap: var(--md); }
.pr__folha-para p { margin: 2px 0 0; line-height: 1.45; }
.pr__rot { font-size: var(--t-xxs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--grey); }

.pr__tabela { width: 100%; border-collapse: collapse; }
.pr__tabela th {
  padding: 6px;
  text-align: left;
  font-size: var(--t-xxs);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--grey);
  border-bottom: 1px solid var(--ink);
}
.pr__tabela th small { display: block; font-weight: 500; text-transform: none; letter-spacing: 0; }
.pr__tabela td { padding: 8px 6px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.pr__tabela .pr__mini { width: 46px; height: 40px; }
.pr__num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pr__tabela td.pr__num { font-weight: 600; }
.pr__qty { display: inline-block; width: 54px; height: 26px; border: 1px solid var(--grey); border-radius: 4px; }

.pr__folha-nota { margin: 0; padding: 8px 10px; background: var(--fundo); border-radius: 6px; }
.pr__folha-rodape { font-size: var(--t-xs); color: var(--grey); border-top: 1px solid var(--linha); padding-top: 10px; line-height: 1.45; }

@media (max-width: 560px) {
  .pr__folha { padding: var(--md); }
  .pr__folha-para { grid-template-columns: 1fr; }
}

/* -- o quadro das propostas -- */

.pr__linha-quadro td:first-child { border-left: 3px solid transparent; }
.pr__linha-quadro--RASCUNHO     td:first-child { border-left-color: var(--grey); }
.pr__linha-quadro--ENVIADA      td:first-child { border-left-color: var(--teal); }
.pr__linha-quadro--ACEITE       td:first-child { border-left-color: var(--ok-texto); }
.pr__linha-quadro--RECUSADA     td:first-child { border-left-color: var(--esgotado-texto); }
.pr__linha-quadro--SEM_RESPOSTA td:first-child { border-left-color: var(--limitado-texto); }
.pr__linha-quadro--espera       td:first-child { border-left-color: var(--limitado-texto); }
.pr__linha-quadro--ACEITE, .pr__linha-quadro--RECUSADA { opacity: .72; }

.pr__cel-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pr__cel-cliente b, .pr__cel-cliente .ligacao { display: block; font-weight: 600; text-align: left; }

/* Um resultado do selector é um botão que escolhe, com o botão «ficha» ao
   lado: um botão não pode viver dentro de outro. */
.pr__resultado-linha { display: flex; align-items: center; gap: var(--sm); padding-right: 10px; border-top: 1px solid var(--fundo); }
.pr__resultado-linha:first-child { border-top: none; }
.pr__resultado-linha .pr__resultado { flex: 1 1 auto; min-width: 0; border-top: none; }

/* ---------- ficha de cliente e separador Clientes ----------
   Tudo interno. A ficha reutiliza a janela, os KPI em tiles, o gráfico das
   vendas da ficha do artigo (fi__) e o quadro; o que é só daqui leva cl__. */

.cl__topo {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sm) var(--lg);
  align-items: start;
  padding-right: var(--xl);
  margin-bottom: var(--md);
}

.cl__topo h3 { font-family: var(--font-display); font-size: var(--t-2xl); margin: 0 0 var(--xs); line-height: 1.2; }
.cl__selos { margin: 0; display: flex; gap: var(--xs); flex-wrap: wrap; }
.cl__cond { align-self: start; padding: 10px 14px; background: var(--fundo); border-radius: var(--radius); }
.cl__cond dd { max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Os sete KPI do ano. Só os números são o ponto desta secção, por isso tiles. */
.cl__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sm);
  margin-bottom: var(--sm);
}

.cl__kpi { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--fundo); border-radius: var(--radius-s); min-width: 0; }
.cl__kpi-rotulo { font-size: var(--t-xs); font-weight: 600; color: var(--grey); text-transform: uppercase; letter-spacing: .04em; }
.cl__kpi-valor { font-family: var(--font-display); font-size: var(--t-3xl); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cl__kpi-nota { font-size: var(--t-xs); color: var(--grey); line-height: 1.35; }

/* Semântico, não de marca: negativo a vermelho, positivo a verde. */
.cl__neg { color: var(--esgotado-texto); }
.cl__pos { color: var(--ok-texto); }
.cl__cinza { color: var(--grey); }
.cl__var { font-weight: 600; }
.cl__var small { font-weight: 400; color: var(--grey); }
.cl__anos td small, .cl__anos b + small { color: var(--grey); font-size: var(--t-xs); }

.cl__dobrado summary { cursor: pointer; margin-top: var(--sm); }
.cl__dobrado .fi__ano:first-of-type { border-top: 1px solid var(--linha); margin-top: var(--sm); }

/* Os títulos com a miniatura da capa; o nome abre a ficha do artigo. */
.cl__titulos li { align-items: center; }
.cl__mini { flex: 0 0 auto; width: 26px; height: 32px; object-fit: contain; background: var(--fundo); border: 1px solid var(--linha); border-radius: 3px; }
.cl__mini--vazia { display: inline-block; }
.fi__lista li .cl__titulo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; color: var(--ink); }
.cl__titulo .ligacao { display: block; max-width: 100%; font-weight: 500; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl__titulo i { font-style: normal; color: var(--grey); font-size: var(--t-xs); }
.fi__lista em { font-style: normal; color: var(--grey); font-size: var(--t-xs); margin-left: 4px; }
.fi__legenda-nota { margin-left: auto; }

/* O diário. */
.cl__nova { display: grid; gap: var(--sm); padding: 12px 14px; background: var(--fundo); border-radius: var(--radius); margin-bottom: var(--md); }
.cl__rotulo { font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--grey); }
.cl__nova textarea { width: 100%; padding: 8px 10px; font: inherit; font-size: var(--t-m); color: var(--ink); border: 1px solid var(--linha); border-radius: var(--radius-s); background: var(--paper); resize: vertical; }
.cl__nova textarea:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: transparent; }
.cl__nova-linha { display: flex; gap: var(--md); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cl__nova-botoes { display: flex; gap: var(--xs); align-items: center; }
.cl__satisfacao { border: none; margin: 0; padding: 0; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.cl__satisfacao legend { float: left; font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--grey); margin-right: 6px; }
.cl__satisfacao label { position: relative; }
.cl__satisfacao input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cl__satisfacao span { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border: 1px solid var(--linha); border-radius: 50%; background: var(--paper); font-size: var(--t-s); font-weight: 600; }
.cl__satisfacao input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cl__satisfacao input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; }
.cl__sat-ajuda { flex: 1 1 100%; font-size: var(--t-xs); color: var(--grey); }
.cl__diario { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sm); }
.cl__diario li { padding: 10px 14px; border: 1px solid var(--linha); border-radius: var(--radius); }
.cl__diario li .cl__nova { margin: 0; padding: 0; background: none; }
.cl__diario p { margin: 4px 0 0; font-size: var(--t-m); line-height: 1.5; white-space: pre-wrap; }
.cl__nota-topo { display: flex; gap: var(--sm); align-items: center; flex-wrap: wrap; font-size: var(--t-s); color: var(--grey); }
.cl__nota-topo b { color: var(--ink); }
.cl__editar { margin-left: auto; }

/* Os envios da VASP: a referência tal como a VASP a escreveu, sem crescer. */
.cl__cel-ref { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cl__envios .quadro { margin-top: var(--sm); }
.cl__envios + .cl__envios { margin-top: var(--sm); }

/* O cabeçalho da folha impressa: logo, data e o carimbo INTERNO. No ecrã não existe. */
.cl__folha { display: none; }

/* O quadro do separador. */
.cl__linha--inactivo { opacity: .6; }
.cl__cel-selos { white-space: nowrap; }
.cl__cel-selos .selo + .selo { margin-left: 4px; }

@media (max-width: 560px) {
  .cl__topo { grid-template-columns: 1fr; padding-right: var(--lg); }
  .fi__legenda-nota { margin-left: 0; }
}
.pr__cel-obs { max-width: 28ch; font-size: var(--t-s); color: var(--grey); white-space: pre-wrap; }
.pr__dias { display: block; margin-top: 2px; font-size: var(--t-xs); color: var(--grey); }
.pr__dias--espera { color: var(--limitado-texto); font-weight: 600; }

/* ---------- separador Quebras (V4, frente 4) ----------
   Os armazéns de quebras e a verificação. Tudo interno. Reutiliza os KPI em
   tiles da ficha de cliente (cl__kpi), os chips, o quadro, a capa e a
   miniatura das acções (ac__); o que é só daqui leva qb__. */

.qb__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--sm);
  margin-bottom: var(--md);
}

/* O âmbar é «pára e olha», o vermelho é «não bateu». */
.qb__kpi--aviso { border-left: 3px solid var(--limitado-texto); }
.qb__kpi--erro  { border-left: 3px solid var(--esgotado-texto); }

.qb__procura {
  flex: 0 1 320px;
  margin-left: auto;
  padding: 7px 14px;
  font-family: inherit;
  font-size: var(--t-base);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--linha);
  border-radius: var(--radius-round);
}

.qb__procura:focus { outline: none; border-color: var(--teal); }

/* -- o quadro -- */

/* O filete à esquerda diz o estado sem ser preciso ler a coluna. */
.qb__linha td:first-child { border-left: 3px solid transparent; }
.qb__linha--POR_VERIFICAR td:first-child { border-left-color: var(--limitado-texto); }
.qb__linha--VERIFICADA    td:first-child { border-left-color: var(--teal); }
.qb__linha--EXECUTADA     td:first-child,
.qb__linha--CONFERIDA     td:first-child { border-left-color: var(--ok-texto); }
.qb__linha--AVISO         td:first-child { border-left-color: var(--esgotado-texto); }
.qb__linha--EXECUTADA, .qb__linha--CONFERIDA { opacity: .78; }

.qb__cel-artigo { display: flex; gap: var(--sm); align-items: flex-start; min-width: 240px; }
.qb__cel-titulo { display: block; line-height: 1.35; }
.qb__cel-armazem { white-space: nowrap; }
.qb__cel-verif { min-width: 150px; }
.qb__cel-decisao { min-width: 220px; }
.qb__cel-botoes { white-space: nowrap; }
.qb__sub { display: block; font-size: var(--t-xs); color: var(--grey); line-height: 1.4; }
.qb__sub-inline { font-size: var(--t-xs); color: var(--grey); }
.qb__num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
td.qb__num { font-weight: 600; }
td.qb__num--custo { font-weight: 500; color: var(--grey); }
.qb__aviso-texto { color: var(--esgotado-texto); font-weight: 600; }

.qb__desc {
  font-size: var(--t-xxs); text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
  color: var(--grey); border: 1px solid var(--linha); border-radius: 4px; padding: 0 4px; vertical-align: middle;
}

/* -- a verificação -- */

.qb__onde {
  margin: 0 0 var(--md);
  padding: 8px 12px;
  border: 1px solid var(--linha);
  border-radius: var(--radius-s);
  background: var(--fundo);
  font-size: var(--t-s);
}

.qb__forma { display: grid; gap: var(--md); }

.qb__sistema { display: flex; gap: var(--sm); align-items: baseline; font-size: var(--t-m); color: var(--grey); flex-wrap: wrap; }
.qb__sistema b { font-family: var(--font-display); font-size: var(--t-3xl); color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }

.qb__campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sm); }

.qb__forma label { display: flex; flex-direction: column; gap: 2px; font-size: var(--t-xs); color: var(--grey); }
.qb__forma input, .qb__forma select, .qb__forma textarea {
  padding: 6px 10px;
  font-family: inherit;
  font-size: var(--t-m);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--linha);
  border-radius: var(--radius-s);
}
.qb__forma input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }
.qb__forma textarea { resize: vertical; line-height: 1.5; }
.qb__dif { font-size: var(--t-xs); color: var(--grey); }

.qb__repartir { border: 1px solid var(--linha); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.qb__rep {
  display: grid;
  grid-template-columns: 180px 100px 1fr;
  gap: var(--sm);
  align-items: center;
  padding: var(--sm) var(--md);
  border-top: 1px solid var(--linha);
}
.qb__rep:first-child { border-top: 0; }
.qb__rep--cabeca { background: var(--fundo); font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--grey); }
.qb__rep--cabeca span:nth-child(2) { text-align: right; }
.qb__rep--fica { background: var(--fundo); }
.qb__rep-nome { font-weight: 600; font-size: var(--t-m); }
.qb__rep-nome small { display: block; font-weight: 400; font-size: var(--t-xs); color: var(--grey); }
.qb__rep-nota { font-size: var(--t-xs); color: var(--grey); }
.qb__fica { font-family: var(--font-display); font-size: var(--t-xl); text-align: right; font-variant-numeric: tabular-nums; }
.qb__fica--erro { color: var(--esgotado-texto); }
.qb__fica-nota { font-size: var(--t-xs); color: var(--grey); }
.qb__falta { font-family: var(--font-display); font-size: var(--t-xl); text-align: right; font-variant-numeric: tabular-nums; }
.qb__falta-nota { font-size: var(--t-xs); color: var(--grey); }

.qb__rotulo { margin: 0 0 var(--xs); font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--grey); }
.qb__fotos { display: flex; flex-wrap: wrap; gap: var(--sm); align-items: center; }
.qb__fotos-lista { display: contents; }
.qb__foto {
  position: relative;
  width: 84px; height: 84px;
  border-radius: var(--radius-s);
  overflow: hidden;
  border: 1px solid var(--linha);
  background: var(--fundo);
}
.qb__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qb__foto button {
  position: absolute; top: 2px; right: 2px;
  width: 22px; height: 22px;
  border-radius: 50%; border: 0;
  background: rgba(35,32,33,.7); color: #fff;
  font-size: 12px; line-height: 1; cursor: pointer;
}
.qb__foto--grande { width: 150px; height: 150px; cursor: zoom-in; }
.qb__foto-erro { display: flex; align-items: center; justify-content: center; height: 100%; font-size: var(--t-xs); color: var(--grey); }
.qb__tirar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 84px; height: 84px;
  border: 1px dashed var(--linha); border-radius: var(--radius-s);
  background: var(--paper);
  font-size: var(--t-xs); color: var(--grey); text-align: center; line-height: 1.3;
  cursor: pointer;
}
.qb__tirar:hover { border-color: var(--teal); color: var(--ink); }
.qb__tirar input, .qb__juntar input { display: none; }
.qb__juntar { display: inline-block; margin-top: var(--sm); cursor: pointer; }
.qb__fotos-nota { font-size: var(--t-xs); color: var(--grey); margin: 0; }

.qb__erro { margin: 0; font-size: var(--t-s); color: var(--esgotado-texto); }
.qb__botoes { display: flex; gap: var(--sm); align-items: center; flex-wrap: wrap; margin: 0; }
.qb__botoes--ver { margin-top: var(--md); }
.qb__nota { font-size: var(--t-xs); color: var(--grey); }

/* Marcar linhas e pedir verificação a alguém (24-09-2026). */
.qb__cel-sel { width: 28px; }
.qb__cel-sel input { width: 16px; height: 16px; accent-color: var(--teal-dark); cursor: pointer; }
.qb__sel {
  display: flex; gap: var(--sm); align-items: center; flex-wrap: wrap;
  margin: 0 0 var(--sm); padding: var(--sm) var(--md);
  background: var(--teal-fundo); border-radius: var(--radius-s); font-size: var(--t-m);
}
.qb__pedido-titulo { font-family: var(--font-display); font-size: var(--t-2xl); margin: 0 0 var(--xs); padding-right: var(--xl); }
.qb__pedido-lista { margin: 0 0 var(--md); font-size: var(--t-s); color: var(--grey); }

/* -- a janela «ver» -- */

.qb__ver-estado { margin: var(--xs) 0 0; font-size: var(--t-s); color: var(--grey); display: flex; gap: var(--xs); align-items: center; flex-wrap: wrap; }
.qb__faixa { margin: 0 0 var(--md); padding: var(--sm) var(--md); font-size: var(--t-m); background: var(--fundo); border-radius: var(--radius-s); }
.qb__faixa--erro { color: var(--esgotado-texto); background: var(--esgotado-fundo); }
.qb__faixa--ok { color: var(--ok-texto); background: var(--ok-fundo); }
.qb__resumo { display: grid; grid-template-columns: 150px 1fr; gap: 4px 12px; margin: 0 0 var(--md); font-size: var(--t-m); }
.qb__resumo dt { color: var(--grey); }
.qb__resumo dd { margin: 0; white-space: pre-wrap; }
.qb__historico { margin-top: var(--md); font-size: var(--t-m); }
.qb__historico summary { cursor: pointer; color: var(--grey); }
.qb__historico summary:hover { color: var(--ink); }
.qb__historico ul { list-style: none; margin: var(--sm) 0 0; padding: 0; }
.qb__historico li { padding: var(--xs) 0; border-top: 1px solid var(--linha); }

/* -- o painel na ficha do artigo -- */

.qb__ficha { margin-top: var(--md); font-size: var(--t-m); }
.qb__ficha h5 { margin: 0 0 var(--xs); font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--grey); }
.qb__ficha ul { list-style: none; margin: 0; padding: 0; }
.qb__ficha li { display: flex; flex-wrap: wrap; gap: var(--xs) var(--sm); align-items: center; padding: 6px 0; border-top: 1px solid var(--linha); }
.qb__ficha li > span { flex: 1 1 260px; color: var(--grey); font-size: var(--t-s); }

@media (max-width: 560px) {
  .qb__rep { grid-template-columns: 1fr 90px; }
  .qb__rep > :last-child { grid-column: 1 / -1; }
  .qb__rep--fica > :last-child { grid-column: auto; }
  .qb__rep--cabeca { display: none; }
  .qb__procura { margin-left: 0; flex-basis: 100%; }
  .qb__resumo { grid-template-columns: 1fr; gap: 0 0; }
  .qb__resumo dt { margin-top: var(--xs); }
}

/* ---------- ficha de marca e de colecção (V4, frente 5) ----------
   A mesma janela com um nível de diferença. Reutiliza os KPI em tiles da
   ficha de cliente (cl__), o gráfico das vendas da ficha do artigo (fi__) e o
   quadro; o que é só daqui leva co__. Tudo interno. */

.janela--colecao .janela__caixa { max-width: 1120px; }
.co__topo { padding-right: var(--xl); margin-bottom: var(--md); }
.co__topo h3 { font-family: var(--font-display); font-size: var(--t-2xl); margin: 0; line-height: 1.2; }
.co__caminho { margin: 0 0 2px; font-size: var(--t-s); color: var(--grey); }
.co__sub { display: block; margin: 0; font-size: var(--t-xs); color: var(--grey); line-height: 1.4; }
.co__sub-inline { font-size: var(--t-xs); color: var(--grey); font-weight: 400; }
.co__kpis { margin-bottom: var(--md); }
.co__kpi--aviso { border-left: 3px solid var(--limitado-texto); }
.co__fora {
  margin: 0 0 var(--md);
  padding: var(--sm) var(--md);
  font-size: var(--t-m);
  color: var(--limitado-texto);
  background: var(--limitado-fundo);
  border-radius: var(--radius-s);
}
.co__vendas { margin-bottom: var(--md); }
.co__vistas { margin-top: var(--md); }
.co__num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
td.co__num { font-weight: 600; }
.co__cel-ref { white-space: nowrap; }
.co__titulo { display: block; line-height: 1.35; }
.co__quebras-altas { color: var(--limitado-texto); }
.co__sinal { margin-right: 2px; }
.co__contas { margin: 0 0 var(--sm); font-size: var(--t-s); color: var(--grey); }
.co__nota { margin: var(--sm) 0 0; font-size: var(--t-xs); color: var(--grey); }
.co__botoes { display: flex; gap: var(--sm); align-items: center; flex-wrap: wrap; margin: var(--md) 0 0; }
.janela--colecao .fi__rodape { margin-top: var(--md); }

/* =========================================================================
   5. IMPRESSÃO
   ========================================================================= */

/* Imprime-se pelos botões, e só por eles: o `imprimir()` põe `.a-imprimir` na
   raiz e tira-a no `afterprint`. Sem essa marca, um Ctrl+P na lista mandava
   2338 cartões para a impressora. A ficha acrescenta `--cliente` para a versão
   que sai da casa; a proposta acrescenta `--proposta`. */
@media print {
  @page { margin: 14mm; }

  .a-imprimir body { background: var(--paper); overflow: visible !important; }

  .a-imprimir .cabecalho,
  .a-imprimir .conteudo,
  .a-imprimir .rodape,
  .a-imprimir .entrada,
  .a-imprimir .avisos { display: none !important; }

  .a-imprimir .janela {
    position: static;
    display: block;
    padding: 0;
    background: none;
    overflow: visible;
  }

  /* Largura de página, e não largura de ecrã. Sem isto o `auto-fit` da grelha
     dos campos abria quatro colunas e "Marca / Coleção / Classe / Categoria"
     ficavam esticados de margem a margem. */
  .a-imprimir .janela__caixa {
    max-width: 17cm;
    margin: 0 auto;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    display: block;
  }

  /* **Os browsers descartam fundos ao imprimir.** O semáforo perdia a cor, e o
     gráfico dos meses desaparecia por completo — as barras são fundos coloridos.
     Vai a tudo o que está dentro da janela, e não a uma lista de classes, para
     não voltar a acontecer com a próxima coisa colorida que lá entre. */
  .a-imprimir .janela__caixa,
  .a-imprimir .janela__caixa * {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .a-imprimir .janela__fechar,
  .a-imprimir .fi__ferramentas { display: none !important; }

  /* -- a ficha -- */

  .a-imprimir .fi__folha {
    display: block;
    margin-bottom: var(--md);
    padding-bottom: var(--sm);
    border-bottom: 1px solid var(--linha);
  }

  /* Numa folha para cliente a capa é metade do argumento. */
  .a-imprimir--cliente .fi__capa { width: 150px; height: 200px; }

  .fi__ano, .fi__campo, .fi__sitio, .fi__rodape { break-inside: avoid; }

  /* Versão de cliente: sai tudo o que é interno — quantidades, onde está o resto,
     preço de revenda, vendas, o interruptor das listagens e as notas de gestão. */
  .a-imprimir--cliente [data-interno],
  .a-imprimir--cliente .fi__campo--interno,
  .a-imprimir--cliente .fi__rodape:not(.fi__rodape--cliente) { display: none !important; }
  .a-imprimir--cliente .fi__rodape--cliente { display: block !important; }

  /* -- a proposta: sai só a folha. O resto da janela tem `data-interno`. -- */

  .a-imprimir--proposta [data-interno],
  .a-imprimir--proposta .janela:not(.janela--proposta) { display: none !important; }
  .a-imprimir--proposta .pr__folha { border: none; padding: 0; }
  .pr__tabela tr, .pr__folha-para, .pr__folha-rodape { break-inside: avoid; }

  /* -- a ficha de cliente: só interna. Sai a janela dela e mais nenhuma; o
        formulário e os botões ficam de fora; os anos dobrados abrem-se. -- */

  .a-imprimir--ficha-cliente .janela:not(.janela--cliente),
  .a-imprimir--ficha-cliente [data-nao-imprimir] { display: none !important; }

  .a-imprimir--ficha-cliente .cl__folha {
    display: flex;
    align-items: center;
    gap: var(--md);
    margin-bottom: var(--md);
    padding-bottom: var(--sm);
    border-bottom: 2px solid var(--ink);
  }
  .a-imprimir--ficha-cliente .cl__folha img { height: 30px; width: auto; }
  .cl__folha-meta { flex: 1 1 auto; font-size: var(--t-xs); color: var(--grey); }
  .cl__carimbo {
    padding: 4px 12px;
    border: 2px solid var(--esgotado-texto);
    color: var(--esgotado-texto);
    font-weight: 700;
    font-size: var(--t-xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    border-radius: 4px;
    transform: rotate(-3deg);
  }
  .a-imprimir--ficha-cliente .cl__topo { padding-right: 0; }
  .a-imprimir--ficha-cliente .cl__kpis { grid-template-columns: repeat(4, 1fr); }
  .a-imprimir--ficha-cliente .cl__kpi-valor { font-size: var(--t-xl); }
  .a-imprimir--ficha-cliente .cl__dobrado summary { display: none; }
  .a-imprimir--ficha-cliente .cl__dobrado > * { display: block; }
  .cl__kpi, .cl__diario li, .quadro tr { break-inside: avoid; }
}

/* ---------- esqueleto de carregamento (catálogo) ---------- */

/* Seis cartões vazios com um brilho a passar. Só existem até o catálogo chegar. */
.ct--esqueleto {
  min-height: 300px;
  background: linear-gradient(90deg, var(--paper) 0%, var(--fundo) 45%, var(--paper) 90%);
  background-size: 200% 100%;
  animation: esqueleto 1.4s ease-in-out infinite;
}

@keyframes esqueleto { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .ct--esqueleto { animation: none; } }

/* ---------- rodapé: a versão ---------- */

.rodape__versao { font-size: var(--t-xs); color: var(--grey); opacity: .8; }

/* ---------- a conta e o código no telemóvel ---------- */

.entrada__credenciais { display: flex; flex-direction: column; gap: var(--sm); }

.sg__bloco { margin-top: var(--md); }

.sg__bloco h4 {
  font-family: var(--font-display);
  font-size: var(--t-l);
  margin: 0 0 var(--sm);
  padding-bottom: var(--xs);
  border-bottom: 1px solid var(--linha);
}

.sg__estado { margin: 0 0 var(--sm); font-size: var(--t-base); }
.sg__estado--on { color: var(--ok-texto); }
.sg__estado--on b { color: var(--limitado-texto); }
.sg__passo { margin: var(--sm) 0; font-size: var(--t-base); }
.sg__nota { margin: var(--md) 0 0; font-size: var(--t-s); color: var(--grey); }
.pr__intro-curta { margin: 0 0 var(--sm); font-size: var(--t-m); color: var(--grey); }

/* O QR vem do Supabase como SVG. 200 px chega para o telemóvel ler. */
.sg__qr { width: 200px; height: 200px; margin: var(--sm) 0; }
.sg__qr svg, .sg__qr img { width: 100%; height: 100%; }

.sg__segredo { margin: 0 0 var(--sm); font-size: var(--t-s); color: var(--grey); }
.sg__segredo code { font-family: ui-monospace, Consolas, monospace; font-size: var(--t-m); letter-spacing: .08em; color: var(--ink); }

.sg__forma { display: flex; gap: var(--sm); align-items: center; flex-wrap: wrap; }

/* Trocar a palavra-passe: três campos em coluna, como no ecrã de entrada. */
.sg__senha { display: flex; flex-direction: column; gap: var(--xs); max-width: 380px; }
.sg__senha label { font-size: var(--t-m); font-weight: 600; margin-top: var(--xs); }
.sg__senha input {
  padding: 9px 12px;
  font-family: inherit;
  font-size: var(--t-l);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--linha);
  border-radius: var(--radius);
}
.sg__senha input:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: transparent; }
.sg__senha .pr__botoes { margin-top: var(--sm); }

.sg__forma input, #codigo {
  width: 130px;
  padding: 9px 12px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: var(--t-xl);
  letter-spacing: .15em;
  text-align: center;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--linha);
  border-radius: var(--radius);
}

#codigo { width: 100%; }

/* ---------- separador Lojas (V5, frente 6) ----------
   O quadro das lojas e a loja aberta. Reutiliza os KPI em tiles (cl__kpi), os
   chips, o quadro e as células das quebras (qb__); o que é só daqui leva lj__. */

.lj__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--sm);
  margin-bottom: var(--md);
}
.lj__num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
td.lj__num { font-weight: 600; }
td.lj__num .qb__sub { font-weight: 400; }
.lj__queda { color: var(--limitado-texto); }
.lj__nota { font-size: var(--t-xs); color: var(--grey); margin: var(--sm) 0 var(--md); max-width: 80ch; }

/* -- o quadro das lojas: as linhas abrem a loja -- */
.lj__linha { cursor: pointer; }
.lj__linha:hover td, .lj__linha:focus-visible td { background: var(--fundo); }
.lj__linha:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.lj__linha--sel td { background: var(--teal-fundo); }
.lj__linha--sel:hover td { background: var(--teal-fundo); }
.lj__linha--fraca td { color: var(--grey); }
.lj__quadro--encolhido { margin-bottom: var(--lg); }
.lj__spark { display: block; }
.lj__spark-area { fill: var(--teal-fundo); }
.lj__spark-linha { fill: none; stroke: var(--teal-texto); stroke-width: 1.5; }
.lj__spark-ponto { fill: var(--teal-texto); }

/* -- a loja aberta -- */
.lj__cab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sm) var(--md); margin: var(--lg) 0 var(--md); }
.lj__titulo { font-family: var(--font-display); font-size: var(--t-2xl); margin: 0; }
.lj__chips { display: flex; flex-wrap: wrap; gap: 4px; }
.lj__mix { font-size: var(--t-s); color: var(--grey); margin: 0 0 var(--md); }
.lj__acoes-lista { display: flex; align-items: center; gap: var(--sm); margin: 0 0 var(--sm); }
.lj__th { cursor: pointer; user-select: none; white-space: nowrap; }
.lj__th:hover { color: var(--ink); }
.lj__th[aria-sort="ascending"], .lj__th[aria-sort="descending"] { color: var(--teal-texto); }
/* Um ano parado é encarnado; «nunca» vendeu é âmbar. Cores semânticas, não de marca. */
td.lj__dias--velho { color: var(--esgotado-texto); font-weight: 700; }
.lj__nunca { color: var(--limitado-texto); font-weight: 600; }
.lj__estado { margin-right: 6px; }
/* Nas listas das lojas a última coluna junta selos e botões (09-10-2026): numa
   só linha passava a margem da página. Parte em linhas; cada botão fica inteiro. */
#lj-lista .qb__cel-botoes { white-space: normal; min-width: 19em; }
#lj-lista .qb__cel-botoes > .botao, #lj-lista .qb__cel-botoes > button { white-space: nowrap; margin: 2px 4px 2px 0; }
#lj-lista .qb__cel-botoes > .selo { white-space: normal; display: inline-block; margin: 2px 6px 2px 0; }
/* A sugestão de uma loja: destaque ou desconto. */
.lj__sugerir { display: grid; gap: var(--sm); margin: 0 0 var(--md); }
.lj__opcao { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sm); }
.lj__opcao select, .lj__opcao input[type="number"], .lj__opcao input[type="text"] { max-width: 9em; }
.lj__previa { font-weight: 600; color: var(--teal-texto); }
/* Dentro de um formulário, a opção é uma linha (o `label` do formulário é uma coluna). */
.qb__forma .lj__opcao, .qb__forma .cp__origem, .qb__forma .cp__familia { flex-direction: row; font-size: var(--t-m); color: var(--ink); text-align: left; }
.qb__forma .lj__opcao input[type="radio"], .qb__forma .cp__origem input[type="radio"], .qb__forma .cp__familia input[type="radio"] { width: auto; flex: none; }
.cp__porque { font-size: var(--t-xs); color: var(--limitado-texto); max-width: 34em; }
/* O «não queremos trabalhar esta referência», na verificação numa loja. */
.qb__nao-trabalhar { margin: 0 0 var(--md); padding: var(--sm) var(--md); border-radius: 10px; background: var(--limitado-fundo); }
.qb__nao-trabalhar .qb__troca { display: flex; gap: var(--sm); align-items: center; cursor: pointer; }
.qb__nao-trabalhar-campos { margin-top: var(--sm); }
/* Os pedidos de reposição das lojas por aprovar, por cima do quadro. */
.lj__pedidos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sm); margin: 0 0 var(--md);
  padding: var(--sm) var(--md); border-radius: 10px; background: var(--limitado-fundo); color: var(--limitado-texto); }

/* -- o painel «Por decidir»: as sugestões das lojas, por loja (29-10-2026) -- */
.lj__decidir { background: var(--paper); border: 1px solid var(--linha); border-radius: var(--radius); margin: 0 0 var(--md);
  padding: var(--md); display: grid; gap: var(--sm); }
.lj__dec-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--sm); flex-wrap: wrap; }
.lj__dec-titulo { margin: 0; font-family: var(--font-display); font-size: var(--t-xl); display: flex; align-items: baseline; gap: var(--sm); flex-wrap: wrap; }
.lj__dec-n { background: var(--limitado-fundo); color: var(--limitado-texto); border-radius: var(--radius-round); padding: 0 10px;
  font-family: var(--font-body); font-size: var(--t-m); font-weight: 700; font-variant-numeric: tabular-nums; }
.lj__dec-enc { margin: 0; font-size: var(--t-m); color: var(--grey); }
.lj__dec-loja { border-top: 1px solid var(--linha); }
.lj__dec-loja-cab { display: flex; align-items: center; gap: var(--sm); flex-wrap: wrap; padding: var(--sm) 0; }
.lj__dec-loja-cab b { font-family: var(--font-display); font-size: var(--t-l); }
.lj__dec-loja-cab [data-aceitar-loja] { margin-left: auto; }
.lj__dec-linha { display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1.1fr) auto; gap: var(--md); align-items: start;
  padding: var(--sm) 0; border-top: 1px dashed var(--linha); }
.lj__dec-capa { width: 48px; height: 48px; object-fit: contain; border-radius: var(--radius-s); background: var(--fundo); border: 1px solid var(--linha); }
.lj__dec-capa--vazia { display: grid; place-items: center; font-size: var(--t-xxs); color: var(--grey); overflow: hidden; }
.lj__dec-art, .lj__dec-pede { display: grid; gap: 3px; min-width: 0; font-size: var(--t-m); }
.lj__dec-ref { font-size: var(--t-s); justify-self: start; }
.lj__dec-factos { display: flex; flex-wrap: wrap; gap: 2px var(--sm); font-size: var(--t-s); color: var(--grey); font-variant-numeric: tabular-nums; }
.lj__dec-factos b { color: var(--ink); font-weight: 600; }
.lj__dec-nota { background: #FFFBEA; border: 1px solid #EFE3B0; border-radius: var(--radius-s); padding: 3px 8px; justify-self: start; }
.lj__dec-botoes { display: flex; flex-direction: column; gap: var(--xs); }
@media (max-width: 760px) {
  .lj__dec-linha { grid-template-columns: 40px minmax(0, 1fr); }
  .lj__dec-capa { width: 40px; height: 40px; }
  .lj__dec-pede, .lj__dec-botoes { grid-column: 2; }
  .lj__dec-botoes { flex-direction: row; }
}

/* -- o ritmo -- */
.lj__grafico-caixa { background: var(--paper); border: 1px solid var(--linha); border-radius: var(--radius-s); padding: var(--sm); overflow-x: auto; }
.lj__grafico { width: 100%; height: auto; display: block; min-width: 520px; }
.lj__grelha { stroke: var(--linha); stroke-dasharray: 2 3; }
.lj__grelha--base { stroke-dasharray: none; }
.lj__eixo { font-size: 10px; fill: var(--grey); }
.lj__barra--actual { fill: var(--teal-texto); }
.lj__barra--anterior { fill: var(--barra-lojas); }

/* -- a matriz das lojas na ficha do artigo -- */
.fi__lojas { margin-top: var(--md); }
.fi__lojas h5 { display: flex; justify-content: space-between; gap: var(--sm); align-items: baseline; }
.fi__lojas h5 b { font-size: var(--t-m); color: var(--ink); text-transform: none; letter-spacing: 0; }
.fi__lojas-quadro { overflow-x: auto; }
.fi__lojas table { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.fi__lojas th { text-align: left; font-size: var(--t-xxs); text-transform: uppercase; letter-spacing: .05em; color: var(--grey); font-weight: 600; padding: 3px 6px; border-bottom: 1px solid var(--linha); }
.fi__lojas td { padding: 3px 6px; border-bottom: 1px solid var(--linha); }
.fi__lojas tr:last-child td { border-bottom: none; }
.fi__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media print { .fi__lojas { display: none; } }

/* ---------- separador Campanhas (29-09-2026) ----------
   A lista, a campanha aberta e a grelha por artigo e loja: as três linhas da
   app das encomendas. Reutiliza os KPI (cl__kpi), os chips, o quadro, a
   miniatura (ac__mini) e as células das quebras (qb__); o que é só daqui
   leva cp__. */

.cp__botoes { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.cp__familias { display: grid; gap: 4px; margin: 0 0 var(--sm); font-size: var(--t-m); }
.cp__familia { display: flex; gap: 8px; align-items: center; }
.cp__familia--breve { color: var(--grey); }
/* As origens de uma campanha nova (09-10-2026): três cartões, e os campos da escolhida por baixo. */
.cp__origens { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin: 0 0 var(--sm); }
.cp__origem { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--linha); border-radius: 10px; padding: 10px; cursor: pointer; font-size: var(--t-m); }
.cp__origem:has(input:checked) { border-color: var(--ink); }
.cp__origem b { display: block; }
.cp__origem-campos { margin: 0 0 var(--sm); }
/* Numa campanha com o stock das lojas, as lojas em campanha destacam-se na grelha. */
.cp__grelha .cp__na { font-weight: 700; }
.cp__grelha thead th.cp__na { text-decoration: underline; text-underline-offset: 3px; }

/* o quadro das lojas em cima */
.cp__lojas { overflow-x: auto; margin: 0 0 var(--md); background: var(--paper); border: 1px solid var(--linha); border-radius: var(--radius-s); padding: var(--sm) var(--md); }
.cp__lojas-tabela, .cp__grelha { border-collapse: collapse; width: 100%; font-size: var(--t-s); font-variant-numeric: tabular-nums; }
.cp__lojas-tabela th, .cp__grelha th { text-align: right; font-size: var(--t-xxs); text-transform: uppercase; letter-spacing: .05em; color: var(--grey); font-weight: 600; padding: 3px 6px; border-bottom: 1px solid var(--linha); }
.cp__lojas-tabela th:first-child, .cp__grelha th:first-child { text-align: left; }
.cp__lojas-tabela td, .cp__grelha td { text-align: right; padding: 3px 6px; white-space: nowrap; }
.cp__lojas-tabela td:first-child, .cp__grelha td:first-child { text-align: left; color: var(--grey); }
.cp__sug td { color: var(--lancamento-texto); font-weight: 600; background: var(--lancamento-fundo); }
.cp__cen td { font-weight: 700; }
.cp__ped td { color: var(--grey); }
.cp__ped td.cp__dif { color: var(--limitado-texto); font-weight: 700; background: var(--limitado-fundo); }
.cp__aceita { color: var(--grey); opacity: .7; }
/* A caixa do pedido ou do comentário, um instante depois de gravar (a loja não via nada). */
.cpl__gravado { border-color: var(--ok-texto) !important; background: var(--ok-fundo) !important; transition: background .3s, border-color .3s; }
.cp__ctx td { color: var(--grey); font-size: var(--t-xs); }
.cp__barra td { padding-top: 0; }
.cp__b { display: block; height: 6px; background: var(--fundo); border-radius: 3px; position: relative; }
.cp__b i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--teal-texto); border-radius: 3px; }

/* a grelha de um artigo */
.cp__art { background: var(--paper); border: 1px solid var(--linha); border-radius: var(--radius-s); padding: var(--sm) var(--md); margin: 0 0 var(--sm); }
.cp__art--fora { opacity: .6; }
.cp__art-topo { display: flex; flex-wrap: wrap; gap: var(--sm) var(--md); align-items: flex-start; }
.cp__art-nome { min-width: 220px; flex: 1 1 260px; }
.cp__art-etq { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.cp__art-estado { margin-left: auto; }
.etiqueta--camp { background: var(--limitado-fundo); color: var(--limitado-texto); font-weight: 700; }
.cp__grelha-caixa { overflow-x: auto; margin-top: var(--sm); }
.cp__grelha td:not(:first-child) { min-width: 44px; }
/* Tirar ou pôr uma loja, e o preço de campanha (30-10-2026, 087) */
.cp__editar { border-color: var(--teal); color: var(--teal-texto); background: var(--teal-fundo); font-weight: 600; }
.cp__editar:hover { background: var(--teal); color: var(--ink); }
.cp__ordem { display: inline-flex; flex-wrap: wrap; gap: var(--xs); align-items: center; margin-left: var(--sm); }
.cp__loja-sim { font: inherit; font-weight: 700; min-width: 28px; padding: 2px 6px; border-radius: var(--radius-s);
  border: 1px dashed var(--linha); background: var(--paper); color: var(--grey); cursor: pointer; }
.cp__na .cp__loja-sim { border-style: solid; border-color: var(--teal); background: var(--teal-fundo); color: var(--teal-texto); }
.cp__loja-sim:hover { border-color: var(--teal-dark); }
.cp__loja-sim:focus-visible { outline: 2px solid var(--teal-dark); outline-offset: 2px; }
.cp__preco-form { display: grid; gap: var(--md); }
.cp__preco-grupo { border: 1px solid var(--linha); border-radius: var(--radius-s); padding: var(--sm) var(--md);
  display: flex; flex-wrap: wrap; gap: var(--sm) var(--md); align-items: center; }
.cp__preco-grupo legend { font-weight: 700; padding: 0 4px; }
.cp__preco-grupo input { width: 7ch; font: inherit; padding: 4px 6px; border: 1px solid var(--linha); border-radius: 6px; text-align: right; }
.cp__preco-loja { display: inline-flex; gap: 6px; align-items: center; }
/* O campo calculado (o outro do que se escreveu) e os exemplos, mais apagados (01-11-2026) */
.cp__preco-grupo input.cp__calculado { background: var(--limitado-fundo); border-color: #F3D9A8; color: var(--limitado-texto); }
.cp__preco-grupo input::placeholder { color: #B9B7B3; font-style: italic; opacity: 1; }
.cp__preco-dica { flex-basis: 100%; }
.cp__in { width: 52px; padding: 2px 4px; text-align: right; font: inherit; font-weight: 700; color: var(--ink); background: var(--ok-fundo); border: 1px solid #b7cf8f; border-radius: 4px; }
.cp__in:focus { outline: 2px solid var(--teal); outline-offset: 0; }
.cp__total { font-weight: 700; }
.cp__art-pe { display: flex; flex-wrap: wrap; gap: var(--sm); align-items: center; margin: var(--sm) 0 0; }
@media (max-width: 640px) { .cp__art-estado { margin-left: 0; } }

/* -- o que a loja vê (campanha-loja.js) -- */
.cpl__camp { color: var(--limitado-texto); font-weight: 700; }
.cpl__sug { color: var(--lancamento-texto); }
.cpl__prop { font-weight: 700; }
.cpl__in { width: 64px; }
.cpl__coment { width: 100%; min-width: 140px; padding: 3px 6px; font: inherit; font-size: var(--t-s); border: 1px solid var(--linha); border-radius: 4px; }
.cpl__coment:focus { outline: none; border-color: var(--teal); }
.cpl__linha--dif td:first-child { border-left: 3px solid var(--limitado-texto); }

/* O painel da campanha com o stock da loja (03-11-2026): filtros, grupos, desconto, etiquetas. */
#cpl-saida .quadro th.lj__num { text-align: right; }
.cpl__filtros { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sm); margin: var(--md) 0; }
.cpl__filtros select, .cpl__procura { font: inherit; font-size: var(--t-s); padding: 5px 8px; border: 1px solid var(--linha); border-radius: 6px; background: var(--paper); }
.cpl__procura { flex: 1 1 220px; min-width: 0; }
.cpl__filtros select { max-width: 220px; }
.cpl__lote { margin-left: auto; }
/* O cabeçalho anda com o scroll pelo campanha-loja.js (translateY medido), também no
   tablet, onde o sticky não pega por causa do deslize lateral do quadro. */
#cpl-saida .cpl__quadro thead th { position: relative; top: auto; z-index: 2; background: var(--paper); box-shadow: 0 1px 0 var(--linha); }
.cpl__grupo th { background: var(--fundo-area, #F1F0EE); color: var(--ink); text-transform: none; letter-spacing: 0; font-size: var(--t-s); padding: 6px var(--md); }
.cpl__grupo-col { font-weight: 400; }
.cpl__desc { display: inline-block; padding: 1px 6px; border-radius: 4px; background: var(--limitado-texto); color: #fff; font-size: var(--t-xs); font-weight: 700; }
.cpl__et { white-space: nowrap; }
.cpl__impresso { color: var(--ok-texto); font-weight: 700; font-size: var(--t-s); margin-right: 4px; cursor: help; }
.cpl__impresso--parte { color: var(--limitado-texto); }
.cpl__linha--impressa td:first-child { border-left: 3px solid var(--ok-texto); }
@media (max-width: 640px) {
  .cpl__filtros select { flex: 1 1 140px; max-width: none; }
  .cpl__lote { margin-left: 0; width: 100%; }
}


/* =========================================================================
   O PDF visual das propostas (30-09-2026, D75–D81)
   =========================================================================
   Folhas A4 montadas fora da janela, só para a impressora. As medidas são em
   cqw: a folha é o contentor, e 1cqw = 2,1 mm ≈ 6 pt. O desenho é o aprovado
   pela Mafalda à terceira: branco, uma só fonte, sem cor atrás dos livros. */

.pv { display: none; }

@page visual { size: A4 portrait; margin: 0; }

@media print {
  .a-imprimir--visual body > *:not(#pv-raiz) { display: none !important; }
  .a-imprimir--visual .pv { display: block; }
  .a-imprimir--visual .pv, .a-imprimir--visual .pv * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

.pv {
  --pv-ink: #1d1d1f; --pv-grey: #5b5b60; --pv-grey-2: #86868b; --pv-tile: #f8f8fa; --pv-line: #e5e5ea; --pv-accent: #028a78;
  font-family: 'Inter', -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  color: var(--pv-ink); background: #fff;
}
.pv__folha {
  page: visual; break-after: page; break-inside: avoid;
  container-type: inline-size; width: 210mm; height: 297mm; overflow: hidden; position: relative;
  display: flex; flex-direction: column; background: #fff; font-size: 1.3cqw; line-height: 1.4;
}
.pv__folha:last-child { break-after: auto; }
.pv__folha p, .pv__folha h2, .pv__folha h3, .pv__folha h4 { margin: 0; font-family: inherit; color: inherit; }
.pv__folha img { max-width: none; }

.pv__cabeca { display: flex; align-items: center; justify-content: space-between; padding: 4.4cqw 7cqw 0; color: var(--pv-grey-2); font-size: 1.15cqw; }
.pv__cabeca img { height: 3cqw; width: auto; display: block; }
.pv__corpo { flex: 1; min-height: 0; padding: 3cqw 7cqw 0; display: flex; flex-direction: column; gap: 3.4cqw; }
.pv__pe { display: flex; justify-content: space-between; padding: 0 7cqw 4cqw; color: var(--pv-grey-2); font-size: 1.05cqw; }

.pv__faixa-tit { display: flex; align-items: baseline; gap: 1.2cqw; margin: 0 0 1.6cqw; padding-bottom: 1.1cqw; border-bottom: .12cqw solid var(--pv-line); }
.pv__faixa-tit h3 { font-weight: 600; font-size: 2.3cqw; line-height: 1; letter-spacing: -.02em; }
.pv__faixa-tit span { color: var(--pv-grey-2); font-size: 1.15cqw; }
.pv__grelha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqw; }

.pv__art { min-width: 0; display: flex; flex-direction: column; }
.pv__tela { height: 18.8cqw; border-radius: 1.8cqw; background: var(--pv-tile); display: flex; align-items: center; justify-content: center; padding: 2cqw; }
.pv__tela img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.pv__sem-capa { color: var(--pv-grey-2); font-size: 1.4cqw; font-weight: 600; }
.pv__novo { color: var(--pv-accent); font-size: 1.05cqw; font-weight: 600; margin-top: 1.3cqw !important; min-height: 1.5cqw; }
.pv__tit { font-weight: 600; font-size: 1.5cqw; line-height: 1.25; letter-spacing: -.01em; margin-top: .2cqw !important;
           display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.75cqw; }
.pv__meta { color: var(--pv-grey-2); font-size: 1.08cqw; margin-top: .3cqw !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv__preco { display: flex; align-items: baseline; gap: 1.2cqw; margin-top: .9cqw !important; font-variant-numeric: tabular-nums; }
.pv__preco b { font-weight: 600; font-size: 1.5cqw; }
.pv__preco b small { font-weight: 400; font-size: 1.05cqw; color: var(--pv-grey-2); margin-left: .35cqw; }
.pv__preco span { color: var(--pv-grey-2); font-size: 1.05cqw; }
.pv__meta--2 { margin-top: .1cqw !important; }
.pv__url { margin-top: .35cqw !important; font-size: 1cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv__url a { color: var(--pv-accent); text-decoration: none; }
.pv__cond a { color: inherit; text-decoration: none; }

/* a capa */
.pv__capa-topo { display: flex; align-items: center; justify-content: space-between; padding: 6cqw 8cqw 0; color: var(--pv-grey-2); font-size: 1.2cqw; }
.pv__capa-topo img { height: 3.8cqw; width: auto; display: block; }
.pv__capa-meio { padding: 23cqw 8cqw 0; text-align: center; }
.pv__capa-para { color: var(--pv-grey-2); font-size: 1.7cqw; font-weight: 500; }
.pv__capa-tit { font-weight: 600; font-size: 7.4cqw; line-height: 1.04; letter-spacing: -.035em; margin: 1.8cqw auto 0 !important; max-width: 78cqw; text-wrap: balance; }
.pv__capa-gancho { margin: 2.6cqw auto 0 !important; font-size: 2.35cqw; line-height: 1.3; letter-spacing: -.01em; color: var(--pv-grey); max-width: 60cqw; text-wrap: balance; }
/* As capas vêm como o PHC as tem, muitas com margem branca de fotografia. O
   `multiply` faz o branco desaparecer no papel; por isso aqui não há sombra,
   que desenharia o rectângulo da fotografia. */
.pv__estante { position: absolute; left: 0; right: 0; bottom: 25cqw; display: flex; justify-content: center; align-items: flex-end; gap: 2cqw; padding: 0 4cqw; }
.pv__estante img { height: 21cqw; width: auto; max-width: 16cqw; object-fit: contain; object-position: bottom; mix-blend-mode: multiply; }
.pv__estante img:nth-child(3) { height: 25cqw; max-width: 18cqw; }
.pv__estante img:nth-child(2), .pv__estante img:nth-child(4) { height: 23cqw; max-width: 17cqw; }
.pv__assina { position: absolute; left: 8cqw; right: 8cqw; bottom: 5cqw; display: flex; justify-content: space-between; color: var(--pv-grey-2); font-size: 1.2cqw; padding-top: 1.6cqw; border-top: .12cqw solid var(--pv-line); }

/* a folha de fecho */
.pv__fim { gap: 0; padding-top: 11cqw; }
.pv__fim-tit { font-weight: 600; font-size: 5.2cqw; line-height: 1.06; letter-spacing: -.03em; max-width: 62cqw; text-wrap: balance; }
.pv__fim-tit span { color: var(--pv-grey-2); }
.pv__fim-nota { margin-top: 3cqw !important; font-size: 1.7cqw; line-height: 1.5; max-width: 62cqw; color: var(--pv-grey); white-space: pre-line; }
.pv__passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqw; margin-top: 7cqw; }
.pv__passo { background: var(--pv-tile); border-radius: 1.8cqw; padding: 2.4cqw 2.4cqw 2.8cqw; }
.pv__passo i { font-style: normal; font-weight: 600; font-size: 1.2cqw; color: var(--pv-grey-2); display: block; }
.pv__passo b { display: block; font-weight: 600; font-size: 1.8cqw; letter-spacing: -.01em; margin-top: 1.8cqw; }
.pv__passo p { color: var(--pv-grey); margin-top: .5cqw !important; font-size: 1.25cqw; }
.pv__cond { margin-top: 5cqw; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqw; border-top: .12cqw solid var(--pv-line); padding-top: 2.6cqw; }
.pv__cond small { display: block; color: var(--pv-grey-2); font-size: 1.1cqw; }
.pv__cond b { font-weight: 600; font-size: 2.2cqw; letter-spacing: -.02em; display: block; margin-top: .3cqw; }
.pv__cond p { color: var(--pv-grey-2); font-size: 1.1cqw; margin-top: .2cqw !important; }
.pv__contacto { margin-top: auto; padding: 0 0 4.4cqw; display: flex; justify-content: space-between; align-items: flex-end; gap: 3cqw; }
.pv__contacto b { font-weight: 600; font-size: 1.8cqw; letter-spacing: -.01em; display: block; }
.pv__contacto p { color: var(--pv-grey); font-size: 1.25cqw; }
.pv__rodape { color: var(--pv-grey-2) !important; font-size: 1.05cqw !important; max-width: 36cqw; text-align: right; }

/* ---------------------------------------------------------------------------
   O PDF visual de uma campanha (09-10-2026): a montra de como a campanha fica
   nas lojas. A linguagem é a do PDF visual das propostas (branco, uma só
   fonte, a cor é a das capas); o desenho foi aprovado pela Mafalda sobre a
   Black Friday 26. As folhas partem-se no browser pela altura real
   (`paginarMontra`), por isso a raiz tem de estar desenhada — fora do ecrã —
   antes de imprimir. Medidas em cqw: a folha é o contentor.
   --------------------------------------------------------------------------- */

.mc { position: absolute; left: -10000px; top: 0; width: 210mm; pointer-events: none; }

@media print {
  .a-imprimir--montra body > *:not(#mc-raiz) { display: none !important; }
  .a-imprimir--montra .mc { position: static; left: auto; width: auto; }
  .a-imprimir--montra .mc, .a-imprimir--montra .mc * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

.mc {
  --mc-tinta: #1d1d1f; --mc-cinza: #6e6e73; --mc-claro: #a1a1a6; --mc-linha: #e5e5ea; --mc-quadro: #f8f8fa;
  --mc-verde: #1f7a4d; --mc-ambar: #a05a00; --mc-vazio: #d2d2d7;
  font-family: 'Inter', -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  color: var(--mc-tinta); background: #fff;
}
.mc__folha {
  page: visual; break-after: page; break-inside: avoid;
  container-type: inline-size; width: 210mm; height: 297mm; overflow: hidden; position: relative;
  display: flex; flex-direction: column; background: #fff; padding: 6cqw 6.5cqw 7cqw; line-height: 1.4;
}
.mc__folha:last-child { break-after: auto; }
.mc__folha p, .mc__folha h2, .mc__folha h3, .mc__folha h4 { margin: 0; font-family: inherit; color: inherit; }
.mc__folha img { max-width: none; }
.mc__corpo { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.mc__pe { position: absolute; left: 6.5cqw; right: 6.5cqw; bottom: 3cqw; display: flex; justify-content: space-between; font-size: 1.25cqw; color: var(--mc-claro); }
.mc__sobre { font-size: 1.35cqw; color: var(--mc-cinza); letter-spacing: .02em; }
.mc__sub { font-size: 1.7cqw; color: var(--mc-cinza); margin-top: 1cqw !important; }

/* a capa */
.mc__folha--capa { padding-top: 7cqw; }
.mc__logo { width: 17cqw; height: auto; display: block; }
.mc__capa-meio { text-align: center; margin-top: 13cqw; }
.mc__capa-meio .mc__sobre { font-size: 1.7cqw; margin-bottom: 1.6cqw !important; }
.mc__capa-tit { font-size: 6cqw; font-weight: 600; letter-spacing: -.02em; line-height: 1.05; text-wrap: balance; max-width: 78cqw; margin: 0 auto !important; }
.mc__capa-sub { font-size: 1.9cqw; color: var(--mc-cinza); margin-top: 1.4cqw !important; }
.mc__estante { display: flex; justify-content: center; align-items: flex-end; gap: 3cqw; margin-top: 10cqw; height: 28cqw; }
.mc__estante img { max-height: 26cqw; max-width: 15cqw; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.mc__numeros { display: flex; justify-content: space-around; margin-top: auto; border-top: .12cqw solid var(--mc-linha); padding-top: 3cqw; }
.mc__numeros div { text-align: center; }
.mc__numeros b { display: block; font-size: 3.2cqw; font-weight: 600; }
.mc__numeros span { font-size: 1.4cqw; color: var(--mc-cinza); }
.mc__capa-pe { font-size: 1.25cqw; color: var(--mc-claro); text-align: center; margin-top: 3cqw !important; }

/* o resumo */
.mc__cab { margin-bottom: 4cqw; }
.mc__cab h3, .mc__loja h3 { font-size: 3.2cqw; font-weight: 600; letter-spacing: -.01em; margin-top: .6cqw !important; }
.mc__resumo { width: 100%; border-collapse: collapse; font-size: 1.65cqw; font-variant-numeric: tabular-nums; }
.mc__resumo th { font-weight: 500; color: var(--mc-cinza); font-size: 1.35cqw; text-align: right; padding: 0 0 1.2cqw; border-bottom: .12cqw solid var(--mc-linha); }
.mc__resumo td { text-align: right; padding: 1.55cqw 0; border-bottom: .12cqw solid var(--mc-linha); }
.mc__resumo th:first-child, .mc__resumo td:first-child { text-align: left; }
.mc__resumo tfoot td { font-weight: 600; border-bottom: 0; }
.mc__barra { width: 24%; padding-left: 3cqw !important; }
.mc__barra span { display: block; height: .9cqw; background: var(--mc-tinta); border-radius: 1cqw; opacity: .85; }
.mc__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6cqw; margin-top: 5cqw; }
.mc__kpis div { background: var(--mc-quadro); border-radius: 1.4cqw; padding: 2.2cqw; }
.mc__kpis b { display: block; font-size: 3cqw; font-weight: 600; }
.mc__kpis span { font-size: 1.35cqw; color: var(--mc-cinza); }
.mc__partes { display: grid; grid-template-columns: 1fr 1fr; gap: 4cqw; margin-top: auto; border-top: .12cqw solid var(--mc-linha); padding-top: 3cqw; font-size: 1.6cqw; }
.mc__partes p + p { margin-top: .5cqw !important; }

/* as partes 1 e 2 */
.mc__loja { display: flex; justify-content: space-between; align-items: flex-end; gap: 2cqw; border-bottom: .12cqw solid var(--mc-linha); padding-bottom: 2cqw; margin-bottom: 1.5cqw; }
.mc__loja--cont { padding-bottom: 1.2cqw; }
.mc__loja-n { font-size: 1.45cqw; color: var(--mc-cinza); text-align: right; }
.mc__loja-n b { color: var(--mc-tinta); font-weight: 600; }
.mc__faixa { font-size: 1.4cqw; font-weight: 600; margin: 1cqw 0 1.2cqw !important; }
.mc__fila { display: grid; gap: 2.2cqw; margin-bottom: 2cqw; }
.mc__fila--4 { grid-template-columns: repeat(4, 1fr); }
.mc__fila--3 { grid-template-columns: repeat(3, 1fr); gap: 3cqw; margin-bottom: 2.6cqw; }
.mc__m, .mc__a { position: relative; min-width: 0; }
.mc__tela { background: var(--mc-quadro); border-radius: 1.2cqw; height: 14cqw; display: flex; align-items: center; justify-content: center; padding: 1.6cqw; }
.mc__tela--a { height: 15.5cqw; }
.mc__tela img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.mc__tela--sem span { font-size: 1.4cqw; color: var(--mc-claro); }
.mc__selos { position: absolute; top: .9cqw; right: .9cqw; display: flex; gap: .5cqw; }
.mc__selos .mc__q { position: static; }
.mc__q { position: absolute; top: .9cqw; right: .9cqw; background: #fff; border-radius: 2cqw; font-size: 1.35cqw; font-weight: 600; padding: .25cqw 1cqw; }
.mc__q--tem { background: #ffe08a; color: #5c3b00; font-weight: 600; }
/* `.mc__folha` à frente: o `.mc__folha p { color: inherit }` ganhava às cores. */
.mc__folha .mc__ritmo { font-size: 1.1cqw; color: var(--mc-cinza); margin-top: .2cqw !important; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc__ritmo b { color: var(--mc-tinta); font-weight: 600; }
.mc__folha .mc__parado--alerta { color: #c62828; font-weight: 600; }
.mc__tit { font-size: 1.4cqw; font-weight: 500; line-height: 1.3; margin-top: 1cqw !important; min-height: 3.64cqw;
           display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mc__a .mc__tit { font-size: 1.55cqw; min-height: 4cqw; }
.mc__meta { font-size: 1.15cqw; color: var(--mc-cinza); margin-top: .3cqw !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc__preco { font-size: 1.3cqw; margin-top: .4cqw !important; font-variant-numeric: tabular-nums; }
.mc__preco b { font-weight: 600; }
.mc__preco s { color: var(--mc-claro); }
.mc__preco i { font-style: normal; color: var(--mc-verde); font-weight: 500; }
.mc__falta { font-size: 1.1cqw; color: var(--mc-ambar); }
.mc__lojas { display: grid; grid-template-columns: 4.6cqw repeat(9, 1fr); align-items: baseline; row-gap: .25cqw;
             margin-top: 1cqw; border-top: .12cqw solid var(--mc-linha); padding-top: .7cqw; }
.mc__lojas em { font-style: normal; font-size: 1.05cqw; color: var(--mc-claro); letter-spacing: .02em; text-align: center; }
.mc__lojas b { font-weight: 400; font-size: 1.05cqw; color: var(--mc-cinza); }
.mc__lojas span { text-align: center; font-size: 1.3cqw; color: var(--mc-vazio); font-variant-numeric: tabular-nums; line-height: 1.2; }
.mc__lojas .mc__on { color: var(--mc-tinta); font-weight: 600; }
.mc__lojas .mc__tem { color: var(--mc-cinza); }
.mc__a-tot { display: flex; justify-content: space-between; gap: 1cqw; font-size: 1.15cqw; color: var(--mc-cinza); margin-top: .5cqw !important; }
.mc__a-tot b { color: var(--mc-tinta); font-weight: 600; }
.mc__aviso { font-style: normal; color: var(--mc-ambar); }

/* ---------------------------------------------------------------------------
   Documentos (12-10-2026): as acções juntas por caminho, como guias do PHC.
   Por loja, um cartão por documento; o escolhido abre dentro da loja.
   --------------------------------------------------------------------------- */
.dc__titulo { font-family: var(--font-display); font-size: var(--t-xl); margin: 0; }
.dc__espera { background: var(--limitado-fundo); border-radius: 12px; padding: var(--md); margin: 0 0 var(--md); display: grid; gap: var(--sm); }
.dc__encomenda { background: var(--paper); border: 1px solid var(--linha); border-radius: 10px; padding: var(--sm) var(--md); }
.dc__encomenda-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sm); margin-bottom: var(--sm); }
.dc__loja { background: var(--paper); border: 1px solid var(--linha); border-radius: 12px; padding: var(--md); margin: 0 0 var(--md); }
.dc__loja-cab { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sm); flex-wrap: wrap; margin-bottom: var(--sm); }
.dc__loja-cab b { font-family: var(--font-display); font-size: var(--t-xl); }
.dc__docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sm); }
.dc__doc { text-align: left; font: inherit; background: var(--paper); border: 1px solid var(--linha); border-radius: 10px; padding: 10px 12px; cursor: pointer; display: grid; gap: 2px; color: var(--ink); }
.dc__doc:hover { border-color: var(--teal); }
.dc__doc[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.dc__doc--fora { border-style: dashed; }
.dc__doc-tipo { font-weight: 600; display: flex; justify-content: space-between; gap: 6px; align-items: center; }
/* Um selo comprido («à espera da tecla») desce para a linha de baixo em vez de sair do cartão (a Mafalda, 03-11-2026). */
.dc__doc-tipo { flex-wrap: wrap; min-width: 0; }
.dc__doc-tipo .selo { max-width: 100%; white-space: normal; }
.dc__doc-via { font-size: var(--t-s); color: var(--grey); }
.dc__doc-n { margin-top: 4px; }
.dc__doc-de { font-size: var(--t-xs); color: var(--grey); }
.dc__detalhe { margin-top: var(--md); border-top: 1px solid var(--linha); padding-top: var(--md); }
.dc__detalhe-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--md); flex-wrap: wrap; margin-bottom: var(--sm); }
.dc__menos { display: block; color: var(--limitado-texto); font-weight: 600; font-size: var(--t-xs); white-space: nowrap; }
.dc__aviso { background: var(--limitado-fundo); color: var(--limitado-texto); border-radius: 10px; padding: 10px 12px; margin: var(--sm) 0 0; }

/* Colar encomenda (12-10-2026): a tabela cabe na janela; o aviso vai por baixo do artigo. */
.lj__enc { max-width: 920px; grid-template-columns: minmax(0, 1fr); }
.lj__enc [data-enc-quadro] { overflow-x: auto; }
.lj__enc .qb__obs { display: grid; gap: 4px; }
.lj__enc textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: var(--t-sm); }
.lj__enc-aviso { display: block; margin-top: 4px; font-size: var(--t-xs); color: var(--limitado-texto, #9a5b00); }
/* «Não trabalhamos» (085): o aviso numa encomenda, a encarnado. */
.lj__enc-aviso--nt { color: var(--esgotado-texto); font-weight: 600; }
.lj__enc .quadro th { position: static; }

/* A conferência do motor por linha (062). */
.dc__phc { display: block; font-size: var(--t-xs); color: var(--limitado-texto); }
.dc__phc--ok { color: var(--ok-texto); }

/* Quem está ao balcão (063). */
.vd__botao { border-color: var(--teal, #0f9b8e); }
.vd__caixa { max-width: 480px; display: grid; gap: var(--md); align-content: start; grid-auto-rows: max-content; }
.vd__caixa .qb__pedido-lista { margin: 0; }
.vd__nomes { display: flex; flex-wrap: wrap; gap: var(--sm); }
.vd__forma { display: grid; gap: var(--md); margin: 0; align-content: start; }
.vd__forma .qb__obs { display: grid; gap: 6px; margin: 0; font-size: var(--t-sm); color: var(--grey); }
.vd__forma input { width: 100%; box-sizing: border-box; font: inherit; font-size: var(--t-md, 1rem); color: var(--ink, inherit);
  padding: 10px 12px; border: 1px solid var(--linha); border-radius: var(--radius, 10px); background: var(--paper, #fff); }
.vd__forma input:focus { outline: 2px solid var(--teal, #0f9b8e); outline-offset: 1px; border-color: transparent; }
.vd__forma .qb__botoes { margin: 0; }
.lj__enc-campos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--md); }
.lj__enc-campos select, .lj__enc-campos input { width: 100%; box-sizing: border-box; }
.lj__enc-campos select, .lj__enc-campos input { font: inherit; font-size: var(--t-sm); padding: 8px 10px; border: 1px solid var(--linha); border-radius: var(--radius, 10px); background: var(--paper, #fff); }

/* A ficha numa conta de loja (064): a linha da própria loja. */
.fi__lojas-minha td { font-weight: 600; background: var(--teal-fundo, #e6f6f4); }

/* A análise de vendas da campanha (065), na linguagem do PDF visual. */
.mc__resumo--an { font-size: 1.5cqw; }
.mc__resumo--an td { padding-left: 1cqw; }
.mc__resumo--an .mc__barra { width: 14%; }
.mc__kpis--an { grid-template-columns: repeat(4, 1fr); margin-top: 2cqw; }
.mc__q--sobra { color: var(--mc-ambar); }
.mc__an-lojas { font-size: 1.1cqw; color: var(--mc-cinza); margin-top: .35cqw !important; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc__an-l { display: grid; grid-template-columns: 30% repeat(var(--n, 9), minmax(0, 1fr)) 7% 7% 6%; align-items: baseline;
  font-size: 1.12cqw; font-variant-numeric: tabular-nums; border-bottom: .1cqw solid var(--mc-linha); padding: .6cqw 0; }
.mc__an-l > span { text-align: center; white-space: nowrap; padding: .15cqw .2cqw; border-radius: .5cqw; }
.mc__an-l > .mc__an-a { text-align: left; overflow: hidden; text-overflow: ellipsis; padding-right: 1cqw; }
.mc__an-a i { font-style: normal; color: var(--mc-cinza); }
.mc__an-l small { color: var(--mc-claro); font-size: .92cqw; }
.mc__an-l b { font-weight: 600; }
.mc__an-l--cab { color: var(--mc-cinza); font-size: 1cqw; font-weight: 500; border-bottom-width: .12cqw; }
.mc__an-l--loja { grid-template-columns: 37% repeat(7, minmax(0, 1fr)); font-size: 1.3cqw; padding: .8cqw 0; }
.mc__an-vazio { color: var(--mc-vazio); }
.mc__an-bom { background: #e7f4ec; color: var(--mc-verde); }
.mc__an-zero, .mc__an-zero b { color: var(--mc-claro); font-weight: 500; }
.mc__an-t { font-weight: 500; }
.mc__resumo--an td:first-child { padding-left: 0; }

/* ---------- Abates: os autos de abate (066, 15-10-2026) ----------
   Dentro do separador Quebras. Reutiliza os KPI (cl__kpi), os formulários e
   os selos das quebras (qb__), os cartões dos documentos (dc__); o que é só
   daqui leva ab__. Tudo interno. */

.qb__vistas { display: flex; gap: var(--xs); margin: 0 0 var(--md); }
.qb__vistas button {
  font: 600 var(--t-s) var(--font-body); padding: 6px 14px; border-radius: var(--radius-round);
  border: 1px solid var(--linha); background: var(--paper); color: var(--grey); cursor: pointer;
}
.qb__vistas button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.qb__rep--auto select { grid-column: 3; }

.ab__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sm); margin: 0 0 var(--md); }
.ab__auto { text-align: left; font: inherit; background: var(--paper); border: 1px solid var(--linha); border-radius: 12px; padding: 12px 14px; cursor: pointer; display: grid; gap: 3px; color: var(--ink); }
.ab__auto:hover { border-color: var(--teal); }
.ab__auto[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ab__auto--vazio { border-style: dashed; }
.ab__auto-num { font-family: var(--font-display); font-size: var(--t-xl); line-height: 1.1; }
.ab__auto-tit { font-weight: 600; }
.ab__auto-sub { font-size: var(--t-xs); color: var(--grey); }
.ab__auto-estado { margin-top: 4px; display: flex; gap: 4px; flex-wrap: wrap; }
.ab__novo { margin: 0 0 var(--md); padding: var(--md); background: var(--fundo); border-radius: var(--radius); }

.ab__detalhe { background: var(--paper); border: 1px solid var(--linha); border-radius: 12px; padding: var(--md); display: grid; gap: var(--md); }
/* Um filho de grelha mede-se pelo conteúdo: sem isto o quadro das linhas esticava a página para o lado. */
.ab__detalhe > * { min-width: 0; }
/* O quadro das linhas tem doze colunas e desliza para o lado; esse contentor de
   scroll deslocava o cabeçalho fixo (sticky) da tabela, por isso aqui ele não é fixo. */
.ab__detalhe .quadro { overflow-x: auto; }
.ab__detalhe .quadro thead th { position: static; }
.ab__descricao { margin: var(--xs) 0 0; font-size: var(--t-m); color: var(--grey); max-width: 80ch; }
.ab__editar { padding: var(--md); background: var(--fundo); border-radius: var(--radius-s); }
.ab__avisos { display: grid; gap: var(--xs); }
.ab__aviso { margin: 0; padding: 8px 12px; border-radius: 0 var(--radius-s) var(--radius-s) 0; border-left: 4px solid var(--teal); background: var(--teal-fundo); font-size: var(--t-m); }
.ab__aviso--erro { border-left-color: var(--esgotado-texto); background: var(--esgotado-fundo); color: var(--esgotado-texto); }
.ab__aviso--aviso { border-left-color: var(--limitado-texto); background: var(--limitado-fundo); color: var(--limitado-texto); }
.ab__aviso--info { color: var(--teal-texto); }
.ab__linha--tirada { opacity: .5; text-decoration: line-through; }
.ab__linha--tirada .qb__sub { text-decoration: none; }
.ab__total td { font-weight: 700; background: var(--fundo); }
.ab__sem-foto { color: var(--esgotado-texto); border-color: var(--esgotado-texto); }
.ab__botoes { padding: var(--sm) 0 0; border-top: 1px solid var(--linha); }
.ab__bloco { border: 1px solid var(--linha); border-radius: var(--radius-s); padding: var(--sm) var(--md); }
.ab__bloco > summary { cursor: pointer; display: flex; gap: var(--sm); align-items: baseline; flex-wrap: wrap; }
.ab__bloco > summary::marker { color: var(--grey); }
.ab__bloco[open] > summary { margin-bottom: var(--sm); }
.ab__forma { gap: var(--sm); }
.ab__ficheiros { list-style: none; margin: 0 0 var(--sm); padding: 0; display: grid; gap: 4px; font-size: var(--t-m); }
.ab__juntar { display: flex; gap: var(--sm); align-items: center; flex-wrap: wrap; }
.ab__juntar select { padding: 4px 8px; font: inherit; font-size: var(--t-s); border: 1px solid var(--linha); border-radius: var(--radius-s); background: var(--paper); color: var(--ink); }
.ab__juntar .botao { cursor: pointer; }
.ab__check { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--t-m); }
.ab__check li { display: grid; grid-template-columns: 20px 1fr auto; gap: var(--sm); align-items: baseline; }
.ab__check input { width: 15px; height: 15px; accent-color: var(--teal-dark); }
.ab__check-marca { display: inline-block; width: 13px; height: 13px; border: 1.5px solid var(--grey); border-radius: 3px; vertical-align: middle; }
.ab__check--ok .ab__check-marca { background: var(--teal); border-color: var(--teal); }
.ab__check--na { color: var(--grey); } .ab__check--na .ab__check-marca { border-style: dashed; }
.dc__guia { width: 150px; margin-right: var(--xs); }

/* O auto em PDF (o Anexo A do guia): folhas A4 brancas, fora do ecrã até imprimir. */
.ab { position: absolute; left: -10000px; top: 0; width: 210mm; pointer-events: none; }
@media print {
  .a-imprimir--auto body > *:not(#ab-raiz) { display: none !important; }
  .a-imprimir--auto .ab { position: static; left: auto; width: auto; }
  .a-imprimir--auto .ab, .a-imprimir--auto .ab * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}
.ab__pdf { color: #232021; background: #fff; font-family: var(--font-body); }
.ab__folha {
  page: visual; break-after: page; break-inside: avoid;
  container-type: inline-size; width: 210mm; height: 297mm; overflow: hidden; position: relative;
  display: flex; flex-direction: column; background: #fff; padding: 6cqw 6.5cqw 7cqw; font-size: 1.55cqw; line-height: 1.45;
}
.ab__folha:last-child { break-after: auto; }
.ab__folha p, .ab__folha h1, .ab__folha h2 { margin: 0; color: inherit; }
.ab__pdf-cab { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: .3cqw solid #03D0B6; padding-bottom: 1.2cqw; margin-bottom: 2.4cqw; }
.ab__pdf-cab b { font-family: var(--font-display); font-size: 2.6cqw; display: block; line-height: 1.1; }
.ab__pdf-cab small { display: block; font-size: 1.25cqw; color: #575756; }
.ab__pdf-num { font-family: var(--font-display); font-size: 2.2cqw; color: #575756; }
.ab__pdf-titulo { font-family: var(--font-display); font-size: 2.9cqw; text-align: center; margin: 0 0 2.4cqw !important; }
.ab__pdf-dados { display: grid; grid-template-columns: 22cqw 1fr; gap: .9cqw 2cqw; margin: 0 0 2cqw; }
.ab__pdf-dados dt { color: #575756; } .ab__pdf-dados dd { margin: 0; }
.ab__pdf-campo { display: inline-block; border-bottom: .15cqw dotted #8a8886; min-width: 8cqw; height: 1.4em; vertical-align: bottom; }
.ab__pdf-declara { margin: 1.5cqw 0 1cqw !important; }
.ab__pdf-assin { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3cqw; margin-top: 7cqw; }
.ab__pdf-assin div { border-top: .15cqw solid #232021; padding-top: .8cqw; font-size: 1.4cqw; min-height: 6cqw; }
.ab__pdf-assin b { display: block; } .ab__pdf-assin small { display: block; color: #575756; }
.ab__pdf-nota { margin-top: 1.6cqw !important; font-size: 1.25cqw; color: #575756; }
.ab__pdf-notas { margin-top: 1.2cqw !important; font-size: 1.4cqw; }
.ab__pdf-pe { position: absolute; left: 6.5cqw; right: 6.5cqw; bottom: 3cqw; display: flex; justify-content: space-between; font-size: 1.2cqw; color: #8a8886; }
.ab__pdf-h2 { font-family: var(--font-display); font-size: 2.2cqw; margin: 0 0 1.4cqw !important; }
.ab__pdf-tabela { width: 100%; border-collapse: collapse; font-size: 1.35cqw; }
.ab__pdf-tabela th { text-align: left; font-size: 1.15cqw; text-transform: uppercase; letter-spacing: .05em; color: #575756; border-bottom: .15cqw solid #c9c5c0; padding: .6cqw .7cqw; }
.ab__pdf-tabela td { padding: .55cqw .7cqw; border-bottom: .1cqw solid #e3e1dd; vertical-align: top; }
.ab__pdf-tabela .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ab__pdf-ref { font-family: ui-monospace, Consolas, monospace; font-size: 1.25cqw; }
.ab__pdf-total td { font-weight: 700; border-bottom: none; background: #f6f5f3; }
.ab__pdf-check { list-style: none; margin: 0; padding: 0; font-size: 1.35cqw; }
.ab__pdf-check li { padding: .4cqw 0 .4cqw 3cqw; position: relative; border-bottom: .1cqw solid #e3e1dd; }
.ab__pdf-check li::before { content: ""; position: absolute; left: .4cqw; top: .8cqw; width: 1.5cqw; height: 1.5cqw; border: .15cqw solid #575756; border-radius: .3cqw; }
.ab__pdf-check--ok::before { background: #03D0B6; border-color: #03D0B6; }
.ab__pdf-check--na { color: #8a8886; } .ab__pdf-check--na::before { border-style: dashed; }
.ab__pdf-fecho { margin-top: 3cqw; background: #f6f5f3; border-radius: 1cqw; padding: 1.4cqw 1.6cqw; font-size: 1.4cqw; }

@media (max-width: 560px) {
  .ab__check li { grid-template-columns: 20px 1fr; }
  .ab__check li > :last-child { grid-column: 2; }
}

/* =========================================================================
   O leitor de códigos (leitor.js): o botão 📷 ao lado dos campos de procura
   e a janela da câmara.
   ========================================================================= */

/* Nas quebras e nas campanhas o campo vivia sozinho, encostado à direita:
   agora vai com o botão, e quem encosta é o par. */
.leitor { display: flex; gap: 6px; align-items: center; flex: 0 1 380px; margin-left: auto; min-width: 0; }
.leitor .qb__procura { flex: 1 1 auto; margin-left: 0; min-width: 0; }

.leitor__camara {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  background: var(--paper);
  border: 1px solid var(--linha);
  border-radius: var(--radius-round);
  cursor: pointer;
}
.leitor .leitor__camara { width: 36px; height: 36px; font-size: 17px; }
.leitor__camara:hover { border-color: var(--teal); }
.leitor__camara:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }

.leitor__titulo { margin: 0 40px var(--md) 0; font-family: var(--font-display); color: var(--teal-texto); }
.leitor__visor {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #111;
  border-radius: var(--radius);
}
.leitor__video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A moldura: a faixa onde o ZXing procura (60% da altura ao meio). */
.leitor__moldura {
  position: absolute;
  inset: 20% 8%;
  border: 2px solid rgba(255, 255, 255, .85);
  border-radius: 10px;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, .35);
}
.leitor__moldura::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 50%;
  border-top: 2px solid rgba(232, 80, 70, .9);
}
.leitor__estado { margin: var(--md) 0 0; color: var(--grey); }
.leitor__estado--aviso { color: var(--ink); font-weight: 600; }
/* No catálogo o botão é irmão do campo: no telemóvel não pode cair para baixo. */
.filtros:has(> .pesquisa + .leitor__camara) { flex-wrap: nowrap; }
.pesquisa + .leitor__camara { align-self: center; }

/* ---------- o Hoje (17-10-2026, migração 067) ----------
   Em cima «À tua espera»; por baixo, ontem: blocos com a cor da área de onde
   vêm (lojas azul-acinzentado, comercial laranja, armazém amarelo). */
.hj-topo { display: grid; gap: 2px; margin-bottom: var(--md); }
.hj-sub { color: var(--grey); font-size: var(--t-m); margin: 0; }
.hj-sub::first-letter { text-transform: uppercase; }
.hj-aviso { margin: var(--sm) 0 0; padding: 8px 12px; border-radius: var(--radius-s); background: var(--limitado-fundo); color: var(--limitado-texto); font-size: var(--t-m); font-weight: 600; }
#hj-saida { display: grid; gap: var(--md); }
.hj-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: var(--md); align-items: start; }
.hj-pilha { display: grid; gap: var(--md); min-width: 0; }
.hj-bloco { background: var(--paper); border: 1px solid var(--linha); border-radius: var(--radius); overflow: hidden; min-width: 0; }
.hj-bloco__titulo { margin: 0; padding: 10px 14px; font-family: var(--font-body); font-size: var(--t-s); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-bottom: 1px solid #F0EFED; }
.hj-bloco__titulo i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.hj-bloco__titulo small { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--grey); }
.hj-miolo { padding: 12px 14px; display: grid; gap: 12px; }
.hj-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.hj-kpi b { display: block; font-family: var(--font-display); font-size: var(--t-3xl); line-height: 1.05; font-variant-numeric: tabular-nums; }
.hj-kpi span { font-size: var(--t-xs); color: var(--grey); }
.hj-nota { margin: 0; font-size: var(--t-s); color: var(--grey); }
.hj-sobe { color: var(--ok-texto); font-weight: 600; }
.hj-desce { color: var(--esgotado-texto); font-weight: 600; }
.hj-vazio { margin: 0; padding: 12px 14px; color: var(--grey); font-size: var(--t-m); }
.hj-miolo .hj-vazio { border: 1px dashed #D2CFCB; border-radius: var(--radius-s); padding: 10px 12px; }
.hj-lista { display: grid; }
.hj-linha { display: flex; gap: 12px; padding: 10px 14px; border-top: 1px solid #F0EFED; align-items: baseline; }
.hj-bloco__titulo + .hj-lista .hj-linha:first-child { border-top: 0; }
.hj-linha--ir { cursor: pointer; }
.hj-linha--ir:hover { background: var(--fundo); }
.hj-linha--ir:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.hj-num { font-family: var(--font-display); font-size: var(--t-2xl); line-height: 1; min-width: 56px; text-align: right; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.hj-linha div { min-width: 0; }
.hj-linha p { margin: 0; font-weight: 600; font-size: var(--t-base); }
.hj-linha span { display: block; font-size: var(--t-s); color: var(--grey); }
.hj-linha .hj-selo, .hj-nota .hj-selo { display: inline-block; }
.hj-selo { font-size: var(--t-xxs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 8px; border-radius: var(--radius-round); margin-left: 6px; vertical-align: 1px; }
.hj-nota .hj-selo { margin: 0 4px 0 0; }
.hj-selo--urgente { background: var(--esgotado-fundo); color: var(--esgotado-texto); }
.hj-selo--atencao { background: var(--limitado-fundo); color: var(--limitado-texto); }
.hj-selo--ok { background: var(--ok-fundo); color: var(--ok-texto); }
.hj-selo--info { background: #EFEDEA; color: var(--ink); }
.hj-tabela { overflow-x: auto; }
.hj-tabela table { border-collapse: collapse; width: 100%; font-size: var(--t-s); min-width: 460px; }
.hj-tabela th, .hj-tabela td { padding: 6px 8px; text-align: right; border-bottom: 1px solid #F0EFED; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hj-tabela th { font-size: var(--t-xxs); text-transform: uppercase; letter-spacing: .05em; color: var(--grey); font-weight: 600; }
.hj-tabela th:first-child, .hj-tabela td:first-child, .hj-tabela .hj-balcao { text-align: left; }
.hj-balcao { color: var(--grey); }
.hj-tabela tr.hj-total td { font-weight: 700; border-bottom: 0; }
.hj-barra7 { display: inline-block; height: 7px; border-radius: 4px; background: var(--barra-lojas); vertical-align: middle; margin-right: 6px; }
.hj-marcas { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: #F0EFED; }
.hj-marcas i { display: block; height: 100%; }
.hj-legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--t-xs); color: var(--grey); }
.hj-legenda i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; }
.hj-grafico { width: 100%; max-width: 640px; height: auto; display: block; }
.hj-grelha { stroke: #F0EFED; }
.hj-eixo { font-size: 9px; fill: #8A8784; font-family: var(--font-body); }
.hj-eixo--ontem { fill: var(--ink); font-weight: 700; }
.hj-barra { fill: #DCE5EB; }
.hj-barra--sete { fill: var(--barra-lojas); }
.hj-barra--ontem { fill: var(--teal); }

/* ---------- o inventário (17-10-2026, migração 068) ----------
   Usa os blocos do Hoje; aqui só o que é dele. */
#iv-saida { display: grid; gap: var(--md); }
.iv-mais { color: var(--ok-texto); }
.iv-menos { color: var(--esgotado-texto); }
.iv-clicavel { cursor: pointer; }
.iv-clicavel:hover td { background: var(--fundo); }
.iv-clicavel:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.iv-nome { text-align: left !important; white-space: normal !important; min-width: 180px; }
.iv-filtros { display: flex; flex-wrap: wrap; gap: var(--sm) var(--md); font-size: var(--t-s); color: var(--grey); }
.iv-filtros label { display: flex; align-items: center; gap: 6px; }
.iv-filtros select { font: inherit; font-size: var(--t-m); padding: 4px 8px; border: 1px solid var(--linha); border-radius: var(--radius-s); background: var(--paper); color: var(--ink); max-width: 260px; }
.iv-fechados { padding: 0 14px 12px; }
.iv-fechados summary { cursor: pointer; font-size: var(--t-s); color: var(--teal-texto); font-weight: 600; padding: 8px 0; }
.iv-ficha .iv-grupo td { background: var(--fundo); font-weight: 700; text-align: left; }
.iv-ficha .iv-grupo span { font-weight: 500; color: var(--grey); margin-left: 8px; }

/* ---------- as consignações (18-10-2026, migração 069) ----------
   Usa os blocos do Hoje e do inventário; aqui só o que é delas. */
#cs-saida { display: grid; gap: var(--md); }
.cs-tabela td .cs-sub2 { display: block; font-size: var(--t-xs); color: var(--grey); }
.cs-tabela tr.cs-aberto td { background: var(--fundo-area, #FDF0E6); }
.cs-grupos { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.cs-grupo { font: inherit; font-size: var(--t-s); display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border: 1px solid var(--linha); border-radius: var(--radius-round); background: var(--paper); cursor: pointer; color: var(--ink); }
.cs-grupo .hj-selo { margin-left: 0; }
.cs-grupo--on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.cs-grupo:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.cs-comunicou { display: flex !important; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
.cs-comunicou input { font: inherit; font-size: var(--t-s); padding: 4px 8px; border: 1px solid var(--linha); border-radius: var(--radius-s); min-width: 0; flex: 1 1 180px; max-width: 320px; }
.cs-sub { margin: 0; padding: 10px 14px; font-family: var(--font-body); font-size: var(--t-s); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-top: 1px solid #F0EFED; display: flex; gap: 8px; flex-wrap: wrap; }
.cs-sub small { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--grey); }

/* ---------- a posição da consignação (19-10-2026, migração 070) ---------- */
.csp { display: grid; gap: var(--md); }
.csp-botoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.csp-pos { background: var(--teal-fundo); border-radius: var(--radius-s); padding: 6px 8px; }
.csp-hist { list-style: none; margin: 0; padding: 0 14px; display: grid; }
.csp-hist li { display: grid; grid-template-columns: 86px 16px 1fr; gap: 8px; padding: 3px 0; align-items: start; font-size: var(--t-m); }
.csp-hist .d { color: var(--grey); text-align: right; font-variant-numeric: tabular-nums; }
.csp-hist i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); margin-top: 5px; justify-self: center; }
.csp-hist span { color: var(--grey); }
.csp-topo { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 0 14px; }
.csp-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-left: auto; }
.csp-chips select { font: inherit; font-size: var(--t-s); padding: 3px 8px; border: 1px solid var(--linha); border-radius: var(--radius-s); max-width: 280px; background: var(--paper); }
.csp-check { font-size: var(--t-s); display: inline-flex; gap: 4px; align-items: center; }
.csp-rolar { max-height: 70vh; overflow: auto; border-top: 1px solid var(--linha); }
.csp-tab { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 860px; font-size: var(--t-s); }
.csp-tab th { position: sticky; top: 0; z-index: 2; background: #FDF0E6; font-size: var(--t-xxs); text-transform: uppercase; letter-spacing: .04em; padding: 7px 8px; text-align: right; border-bottom: 2px solid #F29359; white-space: nowrap; vertical-align: bottom; }
.csp-tab th small, .csp-tab td small { display: block; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--grey); font-size: var(--t-xxs); }
.csp-tab th.l, .csp-tab td.l { text-align: left; }
.csp-tab td { padding: 5px 8px; border-bottom: 1px solid #F0EFED; text-align: right; font-variant-numeric: tabular-nums; vertical-align: middle; white-space: nowrap; }
.csp-tab td.des { white-space: normal; min-width: 220px; }
.csp-tab td.cap { width: 44px; padding: 3px 6px; }
.csp-tab td.cap img, .csp-sem { width: 34px; height: 46px; object-fit: contain; display: block; border-radius: 3px; background: #F4F3F1; }
.csp-tab td.pos { font-weight: 700; background: #E8FAF7; }
.csp-tab tr.csp-saiu td { color: #9A9794; }
.csp-tab tr.csp-saiu td.pos { background: transparent; }
.csp-tab tr.csp-saiu td.cap img { opacity: .45; }
.csp-tab .csp-grupo td { background: #FBF7F2; font-weight: 700; text-align: left; position: sticky; top: 33px; z-index: 1; }
.csp-tab .csp-grupo span { font-weight: 500; color: var(--grey); margin-left: 10px; }
.csp-tab tfoot td { position: sticky; bottom: 0; background: var(--paper); font-weight: 700; border-top: 2px solid var(--ink); }

/* O PDF da posição: folhas A4 só para a impressora. */
#csp-pdf { display: none; }
@page consig { size: A4 portrait; margin: 12mm; }
@media print {
  .a-imprimir--consig body > *:not(#csp-pdf) { display: none !important; }
  .a-imprimir--consig #csp-pdf { display: block; }
  .a-imprimir--consig #csp-pdf, .a-imprimir--consig #csp-pdf * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}
.cspp { page: consig; font-family: var(--font-body); color: #232021; font-size: 9pt; }
.cspp-cab { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 3px solid #03D0B6; padding-bottom: 6pt; margin-bottom: 8pt; }
.cspp-cab div { display: grid; text-align: right; }
.cspp-cab b { font-family: var(--font-display); font-size: 16pt; }
.cspp-cab span { color: #575756; }
.cspp-res { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5pt; margin-bottom: 6pt; }
.cspp-res div { background: #F7F7F6; border-radius: 4pt; padding: 4pt 6pt; font-size: 8pt; color: #575756; }
.cspp-res div.pos { background: #E8FAF7; }
.cspp-res b { display: block; font-family: var(--font-display); font-size: 12pt; color: #232021; }
.cspp-guias { color: #575756; margin: 0 0 8pt; }
.cspp-tab { width: 100%; border-collapse: collapse; font-size: 7.5pt; }
.cspp-tab thead { display: table-header-group; }
.cspp-tab th { background: #FDF0E6; text-align: right; padding: 3pt 4pt; border-bottom: 1.5pt solid #F29359; }
.cspp-tab td { text-align: right; padding: 2.5pt 4pt; border-bottom: .5pt solid #E6E5E3; }
.cspp-tab th:nth-child(-n+3), .cspp-tab td:nth-child(-n+3), .cspp-tab .l { text-align: left; }
.cspp-tab tr { break-inside: avoid; }
.cspp-tab td.pos { font-weight: 700; background: #E8FAF7; }
.cspp-grelha { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6pt; }
.cspp-cartao { border: .5pt solid #E6E5E3; border-radius: 4pt; padding: 4pt; display: grid; gap: 2pt; text-align: center; break-inside: avoid; font-size: 7.5pt; }
.cspp-cartao img, .cspp-cartao .csp-sem { width: 100%; height: 34mm; object-fit: contain; }
.cspp-cartao b { font-size: 7.5pt; line-height: 1.2; }
.cspp-cartao span { color: #7A7876; }
.cspp-cartao em { font-style: normal; font-weight: 700; color: #0B6E62; }
.cspp-rod { margin-top: 10pt; color: #7A7876; font-size: 7.5pt; border-top: .5pt solid #E6E5E3; padding-top: 4pt; }

/* ---------- o diário do cliente (19-10-2026, migração 071) ---------- */
.dr__tipos { border: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dr__tipos legend { float: left; width: 100%; font-size: var(--t-s); font-weight: 600; margin-bottom: 6px; }
.dr__chip { position: relative; }
.dr__chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.dr__chip span { display: inline-flex; gap: 5px; align-items: center; padding: 4px 11px; border: 1px solid var(--linha); border-radius: 999px; background: var(--paper); font-size: var(--t-s); }
.dr__chip i { font-style: normal; opacity: .7; }
.dr__chip input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.dr__chip input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; }
.dr__largar { border: 2px dashed #03D0B6; border-radius: var(--radius-s); padding: 10px 12px; text-align: center; color: #0B6E62; background: #F1FCFA; font-size: var(--t-s); cursor: pointer; }
.dr__largar b { font-weight: 700; }
.dr__largar--em-cima { background: #D7F7F2; border-style: solid; }
.dr__previa { display: grid; gap: 6px; justify-items: start; }
.dr__lembrete { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: var(--t-s); color: var(--grey); }
.dr__lembrete input, .dr__lembrete select, .dr__adiar { font: inherit; font-size: var(--t-s); padding: 3px 6px; border: 1px solid var(--linha); border-radius: var(--radius-s); background: var(--paper); color: var(--ink); }
.cl__diario > li { display: grid; gap: 8px; }
.dr__nota { display: grid; gap: 6px; min-width: 0; }
.dr__fio { display: grid; gap: 8px; margin-left: 18px; padding-left: 12px; border-left: 2px solid var(--linha); }
.dr__tipo { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 2px 9px; border-radius: 999px; background: #F0EFED; color: #575756; }
.dr__tipo--email { background: #E7F0FB; color: #1F4E8C; }
.dr__tipo--telefone, .dr__tipo--whatsapp { background: #FDF0E6; color: #9A4A12; }
.dr__tipo--video { background: #EFE9FB; color: #5B3A9E; }
.dr__tipo--visita, .dr__tipo--feira { background: #E8FAF7; color: #0B6E62; }
.dr__tipo--cobranca { background: #FBE9E9; color: #9B1C1C; }
.dr__tipo--consignacao, .dr__tipo--potencial { background: #FFF6D6; color: #7A5A00; }
.dr__tipo--fatura { background: #EEF2F5; color: #3C5568; }
.dr__lem { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #FFF6D6; color: #7A5A00; }
.dr__lem--atraso { background: #FBE9E9; color: #9B1C1C; }
.dr__lem--feito { background: #F0EFED; color: #7A7876; text-decoration: line-through; }
.dr__lem-botoes { display: inline-flex; gap: 2px; align-items: center; }
.dr__mail { border-left: 3px solid #1F4E8C; background: #F7F9FC; border-radius: 0 var(--radius-s) var(--radius-s) 0; padding: 8px 12px; display: grid; gap: 6px; font-size: var(--t-s); min-width: 0; color: #232021; }
.dr__mail--enviado { border-left-color: #03D0B6; background: #F1FCFA; }
.dr__mail--int { border-left-color: #C9C6C2; background: #F7F7F6; }
.dr__mail-cab { display: grid; grid-template-columns: 60px 1fr; gap: 2px 8px; color: #575756; }
.dr__mail-cab b { color: #232021; font-weight: 600; overflow-wrap: anywhere; }
.cl__diario .dr__mail-txt, .dr__mail-txt { margin: 0; white-space: pre-line; font-size: var(--t-s); }
.dr__mail-todo summary { cursor: pointer; color: #1F4E8C; font-weight: 600; }
.dr__mail-todo p { white-space: pre-wrap; max-height: 420px; overflow: auto; font-size: var(--t-s); }
.dr__anexos { display: flex; flex-wrap: wrap; gap: 6px; }
.dr__anexo { font: inherit; font-size: var(--t-xs); border: 1px solid #DCE4EF; background: #fff; border-radius: 6px; padding: 3px 8px; cursor: pointer; color: #232021; display: inline-flex; gap: 6px; align-items: baseline; }
.dr__anexo small { color: #7A7876; }
.dr__anexo:hover { border-color: #1F4E8C; }

.hj-diario { display: grid; gap: 6px; margin-top: var(--sm); }
.hj-diario__tit { margin: 6px 0 0; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--grey); }
.hj-diario__linha { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--linha); }
.hj-diario__linha > div { display: grid; gap: 2px; min-width: 0; flex: 1 1 260px; }
.hj-diario__linha span { color: var(--grey); font-size: var(--t-s); }
.hj-diario__botoes { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.hj-diario__botoes input { font: inherit; font-size: var(--t-s); padding: 3px 6px; border: 1px solid var(--linha); border-radius: var(--radius-s); width: 9em; }
.hj-diario__sug { flex-basis: 100%; font-size: var(--t-xs); }
@media print { .dr__largar, .dr__lembrete, .dr__lem-botoes { display: none !important; } }

/* ---------- o que não cabe (19-10-2026) ----------
   Uma tabela mais larga do que a sua caixa rola dentro dela (largura.js marca
   o .quadro); numa janela (fichas, propostas) é sempre assim, que a janela não
   tem cabeçalho a que prender. */
.quadro.quadro--rola, .janela .quadro { overflow-x: auto; }
.quadro.quadro--rola thead th, .janela .quadro thead th { position: static; box-shadow: none; }
/* Nos Documentos (encomendas das lojas e o documento aberto) o cabeçalho fica
   sempre à vista, mesmo quando a tabela não cabe ou o ecrã é estreito: a caixa
   rola por dentro, com a altura do ecrã, e o cabeçalho prende-se ao cimo dela
   (a Mafalda, 02-11-2026). Os títulos das colunas partem a linha, para a tabela
   caber mais vezes sem rolar de lado. */
#dc-saida .quadro th { white-space: normal; min-width: 4.5em; }
#dc-saida .dc__qtd { width: 64px; }
.dc__linha-botoes { display: inline-flex; gap: 4px; white-space: nowrap; }
#dc-saida .quadro.quadro--rola { max-height: calc(100vh - var(--altura-cabecalho, 64px) - 16px); overflow: auto; }
#dc-saida .quadro.quadro--rola thead th { position: sticky; top: 0; z-index: 1; background: var(--paper); box-shadow: 0 1px 0 var(--linha); }
@media (max-width: 999px) {
  #dc-saida .quadro { max-height: calc(100vh - var(--altura-cabecalho, 64px) - 16px); overflow: auto; }
  #dc-saida .quadro thead th { position: sticky; top: 0; z-index: 1; background: var(--paper); box-shadow: 0 1px 0 var(--linha); }
}
/* Um endereço comprido num email (links da assinatura) parte a linha em vez de alargar a nota. */
.cl__diario p, .dr__mail, .dr__mail-todo p { overflow-wrap: anywhere; }
/* A ficha de cliente um pouco mais larga: a «Ano a ano» (9 colunas) cabe inteira num computador. */
.janela--cliente .janela__caixa { max-width: 880px; }

/* ---------- Lojas › Consumíveis (19-10-2026, migração 072) ---------- */
#cn-saida { display: grid; gap: var(--md); }
.cn__bloco { display: grid; gap: 4px; }
.cn__grupo { margin: 10px 0 2px; font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--grey); }
.cn__linha { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 14px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--linha); }
.cn__linha small { display: block; color: var(--grey); font-size: var(--t-xs); }
.cn__sem { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.cn__sem--ok { background: var(--ok-fundo); color: var(--ok-texto); }
.cn__sem--pouco { background: var(--limitado-fundo); color: var(--limitado-texto); }
.cn__sem--nao { background: var(--esgotado-fundo); color: var(--esgotado-texto); }
.cn__qtd { display: inline-flex; align-items: center; border: 1px solid var(--linha); border-radius: 999px; overflow: hidden; background: var(--paper); }
.cn__qtd button { font: inherit; border: 0; background: var(--fundo); color: var(--ink); width: 30px; height: 30px; cursor: pointer; }
.cn__qtd input { width: 44px; border: 0; text-align: center; font: inherit; font-variant-numeric: tabular-nums; background: transparent; color: var(--ink); -moz-appearance: textfield; }
.cn__qtd input::-webkit-inner-spin-button { -webkit-appearance: none; }
.cn__qtd--on { border-color: var(--ink); }
.cn__qtd--on input { font-weight: 700; }
.cn__form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 12px; align-items: end; }
.cn__form label { display: grid; gap: 3px; font-size: var(--t-xs); color: var(--grey); }
.cn__form input, .cn__form select, .cn__acoes input, .cn__edita input, .cn__edita select { font: inherit; font-size: var(--t-s); padding: 5px 8px; border: 1px solid var(--linha); border-radius: var(--radius-s); background: var(--paper); color: var(--ink); min-width: 0; }
.cn__form .cn__largo { grid-column: span 2; }
.cn__form .cn__check { display: flex; gap: 6px; align-items: center; font-size: var(--t-s); color: var(--ink); }
.cn__cesto { display: grid; gap: 6px; background: var(--ink); color: var(--paper); border-radius: var(--radius); padding: 12px 16px; box-shadow: var(--sombra-3); }
.cn__cesto-l { display: flex; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; align-items: center; font-size: var(--t-s); }
.cn__cesto-l span { opacity: .75; }
.cn__cesto-item span { opacity: 1; }
.cn__cesto-fim { justify-content: flex-end; }
.cn__cesto .botao--primario { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.cn__cesto .botao--discreto { color: var(--paper); }
.cn__compra, .cn__carrinho { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.cn__compra:last-child, .cn__carrinho:last-child { border-bottom: 0; }
.cn__compra--urgente { box-shadow: inset 3px 0 0 #C0392B; padding-left: 10px; }
.cn__compra p, .cn__carrinho p { margin: 0; font-size: var(--t-s); overflow-wrap: anywhere; }
.cn__compra-cab { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: var(--t-s); color: var(--grey); }
.cn__compra-cab b { color: var(--ink); }
.cn__nota { color: var(--grey); font-size: var(--t-xs); margin: 0; }
.cn__acoes { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 4px; }
.cn__mini { display: inline-flex; gap: 6px; align-items: center; font-size: var(--t-xs); color: var(--grey); }
.cn__mini input { width: 9em; }
.cn__nota-in { flex: 1 1 200px; }
.cn__item { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; font-size: var(--t-s); padding: 3px 0; }
.cn__aviso { margin: 0; padding: 10px 14px; border-radius: var(--radius); background: var(--limitado-fundo); color: var(--limitado-texto); font-size: var(--t-s); }
.cn__inactiva td { color: var(--grey); }
.cn__edita input[name="nome"], .cn__edita input[name="link"] { width: 100%; }
@media (max-width: 600px) { .cn__form .cn__largo { grid-column: auto; } .cn__linha { grid-template-columns: minmax(0, 1fr) auto; } .cn__linha .cn__qtd { grid-column: 1 / -1; justify-self: end; } }
/* O cesto fica preso em baixo só quando tem alguma coisa (num ecrã baixo, vazio, tapava a lista). */
.cn__cesto--cheio { position: sticky; bottom: 8px; z-index: 2; }
/* O miolo dos blocos dos consumíveis com a margem dos outros blocos do Hoje. */
.cn__bloco { padding-bottom: 8px; }
.cn__bloco > :not(.hj-bloco__titulo):not(.quadro):not(.hj-vazio) { margin-left: 14px; margin-right: 14px; }
.cn__bloco > .quadro { margin: 8px 14px 0; }
/* Dentro de um bloco (.hj-bloco tem overflow: hidden, que prende o sticky) o
   cabeçalho preso descia 64 px e tapava a primeira linha da tabela: a linha
   «+ Acrescentar» das compras habituais ficava escondida (Mafalda, 19-10-2026). */
.hj-bloco .quadro thead th { position: static; box-shadow: none; }
/* As compras habituais com a imagem da Amazon (072b). */
.cn__habituais { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-top: 10px; }
.cn__habitual { font: inherit; display: grid; gap: 4px; justify-items: center; text-align: center; padding: 8px; border: 1px solid var(--linha); border-radius: var(--radius); background: var(--paper); color: var(--ink); cursor: pointer; }
.cn__habitual:hover { border-color: var(--grey); }
.cn__habitual--on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.cn__habitual img, .cn__habitual .cn__sem-img { width: 84px; height: 84px; object-fit: contain; border-radius: 6px; background: #fff; }
.cn__habitual b { font-size: var(--t-xs); font-weight: 600; line-height: 1.25; }
.cn__habitual span { font-size: var(--t-xs); color: var(--grey); }
.cn__sem-img { display: inline-block; background: var(--fundo) !important; }
.cn__mini-img { width: 36px; height: 36px; object-fit: contain; border-radius: 4px; background: #fff; vertical-align: middle; margin-right: 8px; border: 1px solid var(--linha); }
.cn__td-img { width: 48px; }

/* ---------- Lojas › Manutenções (19-10-2026, migração 073) ---------- */
#mn-saida { display: grid; gap: var(--md); }
.mn__bloco { padding-bottom: 8px; }
.mn__bloco > :not(.hj-bloco__titulo):not(.hj-vazio) { margin-left: 14px; margin-right: 14px; }
.mn__form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 14px; align-items: end; padding-top: 10px; }
.mn__form label, .mn__acoes--form label { display: grid; gap: 3px; font-size: var(--t-xs); color: var(--grey); }
.mn__form input, .mn__form select, .mn__form textarea, .mn__acoes input, .mn__acoes select, .mn__plano input, .mn__plano select { font: inherit; font-size: var(--t-s); padding: 6px 8px; border: 1px solid var(--linha); border-radius: var(--radius-s); background: var(--paper); color: var(--ink); min-width: 0; }
.mn__form textarea { resize: vertical; }
.mn__largo { grid-column: 1 / -1; }
.mn__chips { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mn__chips legend { font-size: var(--t-xs); color: var(--grey); margin-bottom: 4px; }
.mn__fotos-novas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mn__foto-nova { position: relative; }
.mn__foto-nova img, .mn__fotos img, .mn__foto-espera { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--linha); display: block; }
.mn__foto-espera { background: var(--fundo); }
.mn__foto-nova button { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--ink); color: var(--paper); font-size: 11px; cursor: pointer; }
.mn__mais-foto { width: 72px; height: 72px; border: 2px dashed #AFC3D0; border-radius: 8px; display: grid !important; place-items: center; text-align: center; color: #3C5568 !important; cursor: pointer; font-size: var(--t-xs) !important; }
.mn__fim { display: flex; justify-content: flex-end; }
.mn__avaria { display: grid; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.mn__avaria:last-child { border-bottom: 0; }
.mn__avaria--urgente { box-shadow: inset 3px 0 0 #C0392B; padding-left: 10px; }
.mn__avaria p { margin: 0; font-size: var(--t-s); overflow-wrap: anywhere; }
.mn__cab { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: var(--t-s); color: var(--grey); }
.mn__cab b { color: var(--ink); }
.mn__nota { color: var(--grey); font-size: var(--t-xs); margin: 0; }
.mn__fotos { display: flex; flex-wrap: wrap; gap: 6px; }
.mn__est { display: flex; flex-wrap: wrap; gap: 2px; font-size: 11.5px; }
.mn__est span { padding: 3px 10px; background: var(--fundo); color: var(--grey); }
.mn__est span:first-child { border-radius: 999px 0 0 999px; }
.mn__est span:last-child { border-radius: 0 999px 999px 0; }
.mn__est .mn__est--feito { background: var(--ok-fundo); color: var(--ok-texto); }
.mn__est .mn__est--agora { background: var(--ink); color: var(--paper); font-weight: 700; }
.mn__acoes { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: end; }
.mn__acoes--form { background: var(--fundo); border-radius: var(--radius-s); padding: 10px; }
.mn__nota-in { flex: 1 1 220px; }
.mn__check { display: flex !important; gap: 6px; align-items: center; color: var(--ink) !important; }
.mn__antigas summary { cursor: pointer; padding: 10px 14px; font-size: var(--t-s); color: var(--grey); }
.mn__antigas > .mn__avaria { margin: 0 14px; }
.mn__linha { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--linha); font-size: var(--t-s); }
.mn__data, .mn__celula { font-variant-numeric: tabular-nums; font-weight: 600; }
.mn__celula { font: inherit; font-size: var(--t-s); font-weight: 600; display: grid; gap: 1px; text-align: left; border: 1px solid transparent; border-radius: 6px; padding: 4px 8px; background: transparent; cursor: pointer; color: inherit; }
.mn__celula small { font-weight: 400; font-size: var(--t-xs); color: var(--grey); }
.mn__celula:hover, .mn__celula--on { border-color: var(--ink); }
.mn__data--ok { color: var(--ok-texto); }
.mn__data--perto { color: var(--limitado-texto); background: var(--limitado-fundo); }
.mn__data--passou { color: var(--esgotado-texto); background: var(--esgotado-fundo); }
.mn__data--sem_data { color: var(--grey); font-style: italic; }
.mn__data--fora { color: var(--grey); font-weight: 400; }
.mn__plano { display: grid; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linha); }
.mn__plano h4 { margin: 0; font-size: var(--t-s); }
.mn__cal td { vertical-align: middle; }

/* ---------- Lojas › Folhas de caixa (074) ---------- */
#fc-saida { display: grid; gap: 14px; }
#fc-saida .hj-bloco > :not(.hj-bloco__titulo):not(.hj-vazio) { margin-left: 14px; margin-right: 14px; }
#fc-saida .hj-bloco { padding-bottom: 12px; }
.fc__chip { font: inherit; font-size: var(--t-s); padding: 4px 12px; border: 1px solid var(--linha); border-radius: 999px; background: var(--paper); color: var(--ink); cursor: pointer; }
.fc__chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.fc__dia { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.fc__dia label { display: inline-flex; gap: 6px; align-items: center; font-size: var(--t-s); color: var(--grey); }
.fc__dia b { font-size: var(--t-m, 1rem); display: inline-block; }
.fc__dia b::first-letter { text-transform: uppercase; }
.fc__duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 14px; align-items: start; }
.fc__valores { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 12px; padding-top: 10px; align-items: end; }
.fc__campo { display: grid; gap: 3px; font-size: var(--t-xs); color: var(--grey); min-width: 0; }
.fc__campo small { font-size: var(--t-xs); color: var(--grey); opacity: .85; }
.fc__campo input, .fc__campo select, .fc__obs, .fc__terminal select, .fc__taloes select, .fc__dia input {
  font: inherit; font-size: var(--t-s); padding: 7px 9px; border: 1px solid var(--linha); border-radius: var(--radius-s); background: var(--paper); color: var(--ink); min-width: 0; }
.fc__campo input[inputmode="decimal"] { text-align: right; font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.fc__campo--a input { font-weight: 700; }
.fc__terminal { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px 12px; align-items: end;
  border: 1px solid var(--linha); border-radius: var(--radius-s); padding: 8px 10px; margin: 0; }
.fc__terminal legend { font-size: var(--t-xs); font-weight: 700; padding: 0 4px; }
.fc__check { display: inline-flex; gap: 6px; align-items: center; font-size: var(--t-s); color: var(--ink); }
.fc__extra { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.fc__conta { width: 100%; border-collapse: collapse; font-size: var(--t-s); margin-top: 10px; }
.fc__conta td { padding: 4px 6px; border-bottom: 1px solid var(--linha); }
.fc__conta-tot td { font-weight: 700; border-top: 2px solid var(--ink); }
.fc__conta small { color: var(--grey); font-weight: 400; }
.fc__fecha { display: inline-block; font-weight: 800; font-size: var(--t-xs); padding: 3px 10px; border-radius: 999px; background: #E8FAF7; color: #0B6E62; }
.fc__naofecha { display: inline-block; font-weight: 800; font-size: var(--t-xs); padding: 3px 10px; border-radius: 999px; background: #FBE9E9; color: #9B1C1C; }
.fc__dif { margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-s); background: #FFF8F2; border: 1px solid #F6D3BC; display: grid; gap: 8px; font-size: var(--t-s); color: var(--ink); }
.fc__linha { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; }
.fc__linha--caixa { padding: 8px 0; border-bottom: 1px solid var(--linha); }
.fc__largo { flex: 1 1 240px; }
.fc__taloes { display: grid; gap: 0; padding-top: 6px; }
.fc__talao { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--linha); font-size: var(--t-s); }
.fc__talao small { display: block; color: #9A4A12; }
.fc__talao--mais { cursor: pointer; color: var(--grey); }
.fc__mais-foto { width: 64px; height: 64px; border-radius: var(--radius-s); border: 2px dashed #AFC3D0; display: grid; place-items: center; font-size: 22px; color: #3C5568; cursor: pointer; background: var(--paper); }
.fc__mais-foto--peq { width: auto; height: auto; padding: 6px 10px; font-size: var(--t-s); }
.fc__foto { width: 64px; height: 64px; border-radius: var(--radius-s); overflow: hidden; display: block; background: #EDEBE8; }
.fc__foto img { width: 100%; height: 100%; object-fit: cover; }
.fc__foto--espera { background: repeating-linear-gradient(45deg, #EDEBE8, #EDEBE8 6px, #F5F4F2 6px, #F5F4F2 12px); }
.fc__foto--falta { display: grid; place-items: center; font-size: var(--t-xs); color: #9B1C1C; background: #FBE9E9; }
.fc__fotos { display: flex; flex-wrap: wrap; gap: 10px; }
.fc__fotos figure { margin: 0; display: grid; gap: 3px; width: 96px; }
.fc__fotos .fc__foto { width: 96px; height: 96px; }
.fc__fotos figcaption { font-size: var(--t-xs); color: var(--grey); }
.fc__lista { display: grid; gap: 6px; padding-top: 6px; justify-items: start; }
.fc__lista > .fc__linha { justify-self: stretch; }
.fc__obs { width: 100%; margin-top: 8px; }
.fc__nota { font-size: var(--t-xs); color: var(--grey); }
.fc__ocorr { margin: 2px 0 0; padding-left: 18px; }
.fc__cons tfoot td { border-top: 2px solid var(--ink); }
.fc__cons td { white-space: nowrap; }
.fc__cons-tit { margin: 14px 0 0; font-size: var(--t-m, 1rem); }
.fc__fim { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid var(--linha); border-radius: var(--radius); background: var(--paper); position: sticky; bottom: 8px; }
.fc__botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.fc__faltas { font-size: var(--t-s); color: #9A4A12; max-width: 70ch; }
.fc__faltas--ok { color: #0B6E62; }
.fc__devolvida { padding: 10px 12px; border-radius: var(--radius-s); background: #FBE9E9; color: #9B1C1C; font-size: var(--t-s); }
.fc__folha { display: grid; gap: 14px; }
.fc__resumo { display: grid; gap: 10px; padding-top: 10px; }
.fc__accoes { display: grid; gap: 8px; padding-top: 8px; border-top: 1px solid var(--linha); }
.fc__dia-linha, .fc__hist-linha { cursor: pointer; }
.fc__dia-linha:hover, .fc__hist-linha:hover { background: var(--fundo-suave, rgba(0,0,0,.03)); }
.fc__dia-linha--on { background: #F1FCFA; }
.fc__avisos { font-size: var(--t-xs); color: #9A4A12; white-space: normal; }
.fc__espera { padding: 10px 0; border-bottom: 1px solid var(--linha); }
.fc__deposito { display: grid; gap: 8px; }
.fc__deposito > .botao { justify-self: start; }
.fc__fazer { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 12px 0 4px; }
.fc__fazer label { display: inline-flex; gap: 6px; align-items: center; font-size: var(--t-s); color: var(--grey); }
.fc__fazer select { font: inherit; font-size: var(--t-s); padding: 6px 8px; border: 1px solid var(--linha); border-radius: var(--radius-s); background: var(--paper); color: var(--ink); }
.fc__titulo-ed { margin: 8px 0 0; font-size: 1.1rem; }
.fc__mal summary { padding: 12px 14px; cursor: pointer; font-weight: 600; }
.fc__resumo { scroll-margin-top: 170px; }
.fc__zero td { color: var(--grey); opacity: .65; }
.fc__phc-info p + p { margin-top: 4px; }
.fc__difs td, .fc__difs th { white-space: nowrap; }
.fc__difs small { display: block; font-size: var(--t-xs); color: var(--grey); }
.fc__dif-cel { font: inherit; font-variant-numeric: tabular-nums; background: none; border: 1px solid transparent; border-radius: var(--radius-s); padding: 2px 6px; cursor: pointer; color: var(--ink); text-align: right; }
.fc__dif-cel:hover, .fc__dif-cel.on { border-color: var(--linha); background: var(--paper); }
.fc__difs small.falta { color: #9B1C1C; }
.fc__difs small.sobra { color: #0B6E62; }
.fc__difs { font-size: 12px; }
.fc__difs td, .fc__difs th { padding: 5px 6px; }
.fc__difs td:first-child { white-space: normal; min-width: 90px; }
.fc__dif-cel { padding: 1px 3px; }
#fc-saida .quadro th.lj__num { text-align: right; }
.fc__formas { padding-top: 10px; }
.fc__total td { border-top: 2px solid var(--ink); background: var(--fundo-suave, rgba(0,0,0,.02)); }
.fc__sem { display: inline-block; font-weight: 700; font-size: var(--t-xs); padding: 1px 7px; border-radius: 999px; background: #FFF6D6; color: #7A5A00; }
.fc__chip--aviso { border-style: dashed; }

/* ---------- Lojas › Horários (076) ---------- */
#hr-saida { display: grid; gap: 14px; }
#hr-saida .hj-bloco > :not(.hj-bloco__titulo):not(.hj-vazio):not(.quadro) { margin-left: 14px; margin-right: 14px; }
#hr-saida .hj-bloco { padding-bottom: 12px; }
#hr-saida .quadro th.lj__num { text-align: right; }
.hr__topo { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.hr__mes { display: inline-flex; gap: 8px; align-items: center; }
.hr__mes b { min-width: 9em; text-align: center; font-size: var(--t-m, 1rem); }
.hr__largar { display: block; padding: 14px 16px; font-size: var(--t-s); color: var(--grey); cursor: pointer; }
.hr__largar b { color: var(--ink); }
.hr__accoes { align-items: center; margin-bottom: 10px; }
.hr__turno { display: inline-flex; gap: 6px; align-items: baseline; margin: 2px 6px 2px 0; padding: 2px 9px; border-radius: 999px;
  background: var(--f); color: var(--t); font-size: var(--t-s); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hr__turno b { font-weight: 700; }
.hr__cal td { vertical-align: middle; padding-top: 4px; padding-bottom: 4px; }
.hr__dia { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); }
.hr__fds td { background: rgba(0,0,0,.025); }
.hr__ninguem { color: var(--grey); font-style: italic; font-size: var(--t-s); }
.hr__hoje { display: grid; gap: 6px; padding: 10px 14px 0; }
.hr__hoje-linha { display: grid; grid-template-columns: minmax(170px, max-content) 1fr; gap: 10px; align-items: center; }
.hr__barra { position: relative; height: 10px; border-radius: 999px; background: var(--fundo, #F4F3F1); }
.hr__barra i { position: absolute; top: 0; bottom: 0; border-radius: 999px; opacity: .75; }
.hr__pessoas td { vertical-align: top; }
.hr__aviso { color: var(--limitado-texto); }
.hr__in { font: inherit; font-size: var(--t-s); padding: 5px 7px; border: 1px solid var(--linha); border-radius: var(--radius-s); background: var(--paper); color: var(--ink); min-width: 0; width: 100%; }
.hr__lista td { padding: 3px 4px; }
/* A lista das colaboradoras é mais larga do que o ecrã: a caixa rola por dentro (nos dois
   sentidos), com o cabeçalho e as colunas N.º e Nome presas (a Mafalda, 03-11-2026). O
   `overflow: hidden` do .hj-bloco cortava a última coluna e não deixava o cabeçalho pegar. */
.hj-bloco .quadro.hr__caixa { overflow: auto; max-height: calc(100vh - var(--altura-cabecalho, 64px) - 24px); border: none; border-radius: 0; box-shadow: none; }
.hj-bloco .hr__caixa thead th { position: sticky; top: 0; z-index: 2; background: var(--paper); box-shadow: 0 1px 0 var(--linha); }
.hr__caixa .hr__lista { width: max-content; min-width: 100%; }
.hr__caixa .hr__lista th:nth-child(1), .hr__caixa .hr__lista td:nth-child(1) { position: sticky; left: 0; z-index: 1; background: var(--paper); width: 40px; min-width: 40px; }
.hr__caixa .hr__lista tr:not(.hr__sec) > :nth-child(2) { position: sticky; left: 40px; z-index: 1; background: var(--paper); box-shadow: 1px 0 0 var(--linha); }
.hr__caixa .hr__lista thead tr:not(.hr__sec) > th:nth-child(1), .hr__caixa .hr__lista thead tr:not(.hr__sec) > th:nth-child(2) { z-index: 3; }
.hr__caixa .hr__lista tr.hr__sec td { position: sticky; left: 0; }
.hr__caixa .hr__lista td:nth-child(2) .hr__in { min-width: 230px; }
.hr__lista select { font: inherit; font-size: var(--t-s); }
.hr__inactiva td { opacity: .55; }
.hr__nova { margin-top: 10px; align-items: center; }
.hr__nova .hr__in { width: auto; }
.hr__ficha { display: grid; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.hr__ficha:last-child { border-bottom: 0; }
@media (max-width: 600px) { .hr__hoje-linha { grid-template-columns: 1fr; } }
.hr__pessoas td:first-child b, .hr__pessoas td:first-child .qb__sub { white-space: nowrap; }
.hr__rv .selo { white-space: normal; } .hr__rv td:first-child { min-width: 150px; }
/* Horários, segunda volta (077) */
.hr__cal .hr__quem { width: 1%; white-space: nowrap; }
.hr__cal td, .hr__cal th { white-space: nowrap; }
.hr__tempo { font-size: var(--t-s); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hr__tempo small { color: #1F4E8C; }
.hr__tempo--forte { font-weight: 700; }
.hr__total td { border-top: 2px solid var(--ink); font-weight: 700; background: var(--fundo-suave, rgba(0,0,0,.02)); }
.hr__sub-titulo { margin: 14px 14px 6px; font-size: var(--t-s); text-transform: uppercase; letter-spacing: .04em; color: var(--grey); }
.hr__clicavel { cursor: pointer; }
.hr__clicavel:hover td, td.hr__clicavel:hover { background: #F0FBF9; }
.hr__separa td { border-top: 2px solid var(--linha); }
.hr__rv-tag { display: inline-block; margin-top: 2px; padding: 1px 8px; border-radius: 999px; background: #E3F5E1; color: #2E6B27; font-size: var(--t-xs); font-weight: 700; }
.hr__tipo--RECIBO_VERDE { background: #E3F5E1; color: #2E6B27; font-weight: 700; border-color: #B9E2B4; }
.hr__tipo--MOVEL { background: #EFE9FB; color: #5B3A9E; }
.hr__tel { white-space: nowrap; }
.hr__tel a { margin-left: 4px; text-decoration: none; }
.hr__recibo { display: inline-flex; gap: 6px; align-items: center; margin-right: 6px; font-size: var(--t-s); }
.hr__tempo--previsto { font-style: italic; opacity: .7; }
/* Horários › Custos (078) */
.hr__custos th[scope="row"] { text-align: left; font-weight: 600; min-width: 240px; }
.hr__custos th[scope="row"] .qb__sub { font-weight: 400; }
.hr__sec td { padding-top: 14px; font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--grey); }
.hr__forte th, .hr__forte td { font-weight: 800; }
.hr__alvo th, .hr__alvo td { background: #E8FAF7; color: #0B6E62; font-weight: 800; }
.hr__params { margin-bottom: 8px; }
.hr__bom { color: var(--ok-texto, #0B6E62); font-weight: 700; }
.hr__mau { color: var(--esgotado-texto, #9B1C1C); font-weight: 700; }
.hr__custos th[scope="row"] { text-transform: none; letter-spacing: normal; font-size: var(--t-s); color: var(--ink); }
.hr__rv-tag { white-space: nowrap; }
/* Manutenções (22-10-2026): menos largo; «Por tratar» e «Comunicar uma avaria» lado a lado. */
#mn-saida { max-width: 1180px; }
.mn__duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: var(--md); align-items: start; }
.mc__logo--didatic { width: 22cqw; }
/* As dobras dos Horários (22-10-2026): grupos que abrem e fecham. */
.hr__dobra { margin: 8px 14px 4px; border: 1px solid var(--linha); border-radius: var(--radius-s); background: var(--paper); }
.hr__dobra > summary { cursor: pointer; padding: 10px 12px; font-size: var(--t-s); list-style: revert; }
.hr__dobra[open] > summary { border-bottom: 1px solid var(--linha); }
.hr__dobra > .quadro { border: 0; margin: 0; }
/* Pessoas e processamento (22-10-2026): cabe sem scroll lateral, o cabeçalho fica preso, a zona das vendas sombreada. */
#hr-saida .hj-bloco.hr__fixo { overflow: visible; }
.hr__pessoas { font-size: var(--t-s); }
.hr__pessoas th, .hr__pessoas td { padding: 7px 6px; }
.hr__pessoas th { white-space: normal; line-height: 1.2; vertical-align: bottom; }
.hr__pessoas td.lj__num { white-space: nowrap; }
.hr__pessoas td:first-child { min-width: 150px; }
.hr__pessoas .hr__zv { background: rgba(3, 208, 182, .07); }
.hr__confere { white-space: nowrap; }
.hr__confere .selo { margin-right: 3px; }
.hr__quemlinha { display: flex; gap: 6px; align-items: center; }
.hr__lapis { border: 0; background: none; cursor: pointer; color: var(--grey); font-size: 13px; padding: 0 2px; opacity: .55; }
.hr__lapis:hover, .hr__lapis.on { opacity: 1; color: #9A4A12; }
.hr__nota-linha td { background: #FFF8F2; padding-top: 4px; }
.hr__nota-linha label { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; font-size: var(--t-xs); color: var(--grey); }
@media (min-width: 1000px) {
  #hr-saida .hr__fixo .quadro { overflow-x: visible; }
  #hr-saida .hr__fixo .quadro thead th { position: sticky; top: var(--altura-cabecalho, 64px); z-index: 2; background: var(--paper); box-shadow: 0 1px 0 var(--linha); }
  #hr-saida .hr__fixo .quadro thead th.hr__zv { background: #EEFBF8; }
}
/* Os mapas para PDF (mapas.js, 22-10-2026): só o mapa vai para o papel. */
#mapa-raiz { display: none; }
@media print {
  .a-imprimir--mapa body > *:not(#mapa-raiz) { display: none !important; }
  .a-imprimir--mapa #mapa-raiz { display: block; }
  .a-imprimir--mapa #mapa-raiz * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .a-imprimir--mapa #mapa-raiz .mp { page: mapa; break-after: page; }
  .a-imprimir--mapa #mapa-raiz .mp:last-child { break-after: auto; }
  .a-imprimir--mapa #mapa-raiz .mp--vertical { page: mapaVertical; }
}
@page mapa { size: A4 landscape; margin: 10mm; }
@page mapaVertical { size: A4 portrait; margin: 12mm; }
.mp { font-family: var(--body, 'Montserrat', sans-serif); color: #1D2422; font-size: 8.5pt; }
.mp__cab { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.mp__cab img { height: 34px; width: auto; }
.mp__cab h1 { margin: 0; font-size: 15pt; font-weight: 800; }
.mp__cab p { margin: 2px 0 0; color: #5E6A67; font-size: 9pt; }
.mp__t { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mp__t th { background: #1D2422; color: #fff; font-weight: 700; text-align: left; padding: 5px 5px; vertical-align: bottom; }
.mp__t th.z { background: #0B6E62; }
.mp__t td { padding: 4px 5px; border-bottom: 1px solid #DFE6E4; vertical-align: top; }
.mp__t .n { text-align: right; white-space: nowrap; }
.mp__t tbody tr:nth-child(even) td { background: #F7F9F8; }
.mp__t td.z { background: #E8FAF7 !important; }
.mp__t td.bom { color: #0B6E62; font-weight: 700; background: #E3F5E1 !important; }
.mp__t td.mau { color: #9B1C1C; font-weight: 700; background: #FBE9E9 !important; }
.mp__t tr.g td { background: #fff !important; color: #0B6E62; font-weight: 700; padding-top: 10px; border-bottom: 1px solid #0B6E62; }
.mp__t tr.t td { font-weight: 700; border-top: 1px solid #1D2422; background: #EDF1EF !important; }
.mp__t tr.tt td { border-top: 2px solid #1D2422; }
.mp__t tr { break-inside: avoid; }
.mp__t thead { display: table-header-group; }
.mp__nota { color: #5E6A67; font-size: 7.5pt; margin: 6px 0 0; }
.hr__subtotal td { font-weight: 700; background: var(--fundo-suave, rgba(0,0,0,.025)); border-top: 1px solid var(--ink); border-bottom: 2px solid var(--linha); }
.mp__resumo { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; margin: 0 0 10px; }
.mp__resumo div { border: 1px solid #DFE6E4; border-radius: 6px; padding: 5px 7px; }
.mp__resumo span { display: block; font-size: 7pt; color: #5E6A67; text-transform: uppercase; letter-spacing: .04em; }
.mp__resumo b { font-size: 10pt; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mp--compacto .mp__t td, .mp--compacto .mp__t th { padding: 3px 4px; }
.mp--compacto { font-size: 8pt; }
.mp__t td.fds { background: #F1F3F2 !important; }
.mp__t td.tur { white-space: nowrap; }
.mp__t td.fol { color: #8A9491; }
.mp__t td.fer { background: #EFE9FB !important; color: #5B3A9E; font-weight: 700; }
.mp__t td.aus { background: #FDF0E6 !important; color: #9A4A12; font-weight: 700; }
.mp__t td.fe { background: #E7F0FB !important; color: #1F4E8C; }
.mp__legenda { display: flex; gap: 14px; flex-wrap: wrap; margin: 8px 0 0; font-size: 7.5pt; color: #5E6A67; }
.mp__legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.mp__legenda i.fer { background: #EFE9FB; } .mp__legenda i.aus { background: #FDF0E6; } .mp__legenda i.fe { background: #E7F0FB; } .mp__legenda i.fds { background: #F1F3F2; }
.mp--vertical.mp--compacto .mp__t td { padding: 2.5px 4px; }
/* Lojas › Registo de ponto (080); os Protocolos (086, #pc-saida) partilham o mesmo arranjo */
#pt-saida, #pc-saida, #mk-saida, #aq-saida { display: grid; gap: var(--md); max-width: 1180px; }
#pt-saida .hj-bloco > :not(.hj-bloco__titulo):not(.hj-vazio):not(.quadro), #pc-saida .hj-bloco > :not(.hj-bloco__titulo):not(.hj-vazio):not(.quadro), #mk-saida .hj-bloco > :not(.hj-bloco__titulo):not(.hj-vazio):not(.quadro):not(summary),
#aq-saida .hj-bloco > :not(.hj-bloco__titulo):not(.hj-vazio):not(.quadro):not(summary) { margin-left: 14px; margin-right: 14px; }
#pt-saida .hj-bloco, #pc-saida .hj-bloco, #mk-saida .hj-bloco, #aq-saida .hj-bloco { padding-bottom: 12px; }
.pt__largar { display: block; padding: 16px; font-size: var(--t-s); color: var(--grey); cursor: pointer; margin-top: 10px; }
.pt__largar b { color: var(--ink); }
.pt__fotos { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.pt__foto { margin: 0; display: grid; gap: 4px; width: 150px; }
.pt__foto figcaption { font-size: var(--t-xs); color: var(--grey); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pt__img, .pt__pdf { width: 150px; height: 190px; border: 1px solid var(--linha); border-radius: 8px; background: var(--fundo); padding: 0; cursor: zoom-in; overflow: hidden; }
.pt__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt__pdf { font-weight: 800; color: #9B1C1C; font-size: 18px; }
.pt__pdf small { font-weight: 400; font-size: 10px; color: var(--grey); word-break: break-all; }
.pt__meses { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pt__mes { display: grid; gap: 1px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--linha); background: var(--paper); cursor: pointer; font: inherit; font-size: var(--t-xs); text-align: center; min-width: 70px; }
.pt__mes b { font-size: var(--t-s); text-transform: capitalize; }
.pt__mes.on, .pt__cel.on { outline: 2px solid var(--ink); }
.pt__cel { font: inherit; font-size: var(--t-xs); font-weight: 700; padding: 3px 10px; border-radius: 999px; border: 0; cursor: pointer; }
.pt__ok { background: #E3F5E1; color: #2E6B27; }
.pt__espera { background: #FFF6D6; color: #7A5A00; }
.pt__falta { background: #FBE9E9; color: #9B1C1C; }
small.pt__ok, small.pt__espera, small.pt__falta { padding: 2px 9px; border-radius: 999px; font-weight: 700; }
.pt__quadro td:first-child { white-space: nowrap; }
.pt__ver { display: flex; flex-wrap: wrap; margin-bottom: 10px; }
.pt__sub { margin: 14px 14px 0; font-size: var(--t-s); }
/* Lojas › Marketing de lojas e Arquivo (080) */
.aq__zonas { margin-bottom: 2px; }
.aq__seccao > summary { cursor: pointer; list-style: none; }
.aq__seccao > summary::-webkit-details-marker { display: none; }
.aq__seccao > summary::after { content: "▾"; margin-left: 8px; color: var(--grey); }
.aq__seccao:not([open]) > summary::after { content: "▸"; }
.aq__lista { list-style: none; margin: 8px 14px 0; padding: 0; display: grid; gap: 2px; }
.aq__lista--grelha { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.aq__ficheiro { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--linha); }
.aq__lista--grelha .aq__ficheiro { border: 1px solid var(--linha); border-radius: 8px; padding: 8px; }
.aq__mini, .aq__icone { width: 54px; height: 54px; border-radius: 6px; border: 1px solid var(--linha); background: var(--fundo); padding: 0; overflow: hidden; cursor: pointer; font-weight: 800; font-size: 11px; color: #1F4E8C; }
.aq__mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aq__info { min-width: 0; display: grid; gap: 2px; }
.aq__titulo { border: 0; background: none; padding: 0; text-align: left; font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; overflow-wrap: anywhere; }
.aq__titulo:hover { text-decoration: underline; }
.aq__accoes { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.aq__form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 14px; padding-top: 10px; }
.aq__form label { display: grid; gap: 3px; font-size: var(--t-xs); color: var(--grey); }
.aq__form input, .aq__form select { font: inherit; font-size: var(--t-s); padding: 6px 8px; border: 1px solid var(--linha); border-radius: var(--radius-s); background: var(--paper); color: var(--ink); min-width: 0; }
.aq__largo { grid-column: 1 / -1; }
.aq__largar { display: block !important; padding: 16px; font-size: var(--t-s) !important; cursor: pointer; }
.aq__largar b { color: var(--ink); }
.aq__fim { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.aq__afix td:first-child { min-width: 240px; }
.aq__sim { color: #2E6B27; font-weight: 800; }
.aq__nao { color: #C9C6C2; }
/* O link para as encomendas da Eureka, na barra das Lojas */
.abas__fora { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; border: 1px dashed #F29359; color: #9A4A12; font-size: var(--t-s); font-weight: 600; text-decoration: none; white-space: nowrap; }
.abas__fora:hover { background: #FDF0E6; }
.pt__antes { background: var(--fundo); color: var(--grey); }
.aq__mini img { object-fit: contain; background: #fff; }
.aq__editar { display: grid; grid-template-columns: 2fr 1fr; gap: 6px 10px; }
.aq__editar label { display: grid; gap: 2px; font-size: var(--t-xs); color: var(--grey); }
.aq__editar label:last-child { grid-column: 1 / -1; }

/* Os documentos de RH (081): o formulário ao lado da prévia do texto, o registo. */
.rhd__topo { margin: 4px 0 14px; }
.rhd__modelos { padding: 10px 14px 0; }
.rhd__dois { display: grid; grid-template-columns: minmax(280px, 5fr) minmax(320px, 6fr); gap: 18px; padding: 0 14px 14px; align-items: start; }
@media (max-width: 900px) { .rhd__dois { grid-template-columns: 1fr; } }
.rhd__form textarea { font: inherit; font-size: var(--t-s); padding: 6px 8px; border: 1px solid var(--linha); border-radius: var(--radius-s); background: var(--paper); color: var(--ink); resize: vertical; }
.rhd__form small { color: var(--grey); font-size: var(--t-xs); }
.rhd__caixa { display: flex !important; align-items: center; gap: 6px; color: var(--ink) !important; font-size: var(--t-s) !important; }
.rhd__lado { position: sticky; top: 12px; display: grid; gap: 10px; padding-top: 10px; }
.rhd__folha { background: var(--paper); border: 1px solid var(--linha); border-radius: var(--radius-s); padding: 22px 26px; max-height: 70vh; overflow: auto;
  font-family: Arial, Helvetica, sans-serif; font-size: 12.5px; line-height: 1.5; color: #222; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.rhd__folha p { margin: 0 0 8px; text-align: justify; }
.rhd__titulo { text-align: center; margin: 4px 0 14px; font-size: 13px; }
.rhd__clausula { text-align: center; margin: 14px 0 6px; font-size: 12.5px; text-transform: uppercase; }
.rhd__clausula small { display: block; text-transform: none; font-weight: 400; font-style: italic; }
.rhd__dest { margin-left: 45% !important; text-align: left !important; }
.rhd__ass { margin-top: 18px !important; text-align: left !important; }
.rhd__tab { border-collapse: collapse; width: 100%; margin: 6px 0 10px; font-size: 11.5px; }
.rhd__tab th, .rhd__tab td { border: 1px solid #ccc; padding: 3px 6px; text-align: left; }
.rhd__falta { background: #FFF27A; padding: 0 2px; }
.rhd__aviso { display: block; white-space: normal; margin: 0; }
.rhd__lista td { vertical-align: top; }
.rhd__num { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.rhd__accoes { white-space: nowrap; text-align: right; }
.rhd__accoes .botao { margin: 2px 0 2px 4px; }
.rhd__painel td { background: var(--fundo); }

/* A ficha de entrada de uma pessoa nova (082): a página do link, pensada para o telemóvel. */
body.en { background: var(--fundo); }
.en__cabeca { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--paper); border-bottom: 1px solid var(--linha); position: sticky; top: 0; z-index: 2; }
.en__cabeca span { font-family: var(--font-display, inherit); font-weight: 600; color: var(--grey); }
.en__corpo { max-width: 560px; margin: 0 auto; padding: 16px 16px 40px; }
.en__ola { background: var(--teal-fundo); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; font-size: var(--t-s); line-height: 1.5; }
.en__nota { background: var(--limitado-fundo); color: var(--limitado-texto); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; font-size: var(--t-s); }
.en__passos { display: flex; gap: 5px; } .en__passos i { flex: 1; height: 5px; border-radius: 3px; background: var(--linha); } .en__passos i.on { background: var(--teal); }
.en__passo { margin: 6px 0 12px; font-size: var(--t-xs); color: var(--grey); }
.en__ficha { background: var(--paper); border: 1px solid var(--linha); border-radius: 14px; padding: 16px; }
.en__ficha h2 { margin: 0 0 12px; font-size: 1.25rem; }
.en__sub { margin: 14px 0 8px; font-size: var(--t-s); color: var(--grey); font-weight: 600; }
.en__grelha { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.en__largo { grid-column: 1 / -1; }
@media (max-width: 420px) { .en__grelha { grid-template-columns: 1fr; } }
.en__campo { display: grid; gap: 4px; font-size: var(--t-xs); color: var(--grey); }
.en__campo input, .en__campo select { font: inherit; font-size: 16px; padding: 10px 11px; border: 1px solid var(--linha); border-radius: 10px; background: var(--paper); color: var(--ink); min-width: 0; }
.en__campo small, .en__caixa small, .en__fic-txt small { display: block; font-size: var(--t-xs); color: var(--grey); line-height: 1.4; }
.en__caixa { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-s); margin: 4px 0; }
.en__caixa input { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--teal-dark); }
.en__simnao { border: 0; padding: 0; margin: 4px 0; display: flex; gap: 18px; flex-wrap: wrap; font-size: var(--t-s); }
.en__simnao legend { width: 100%; font-size: var(--t-xs); color: var(--grey); margin-bottom: 6px; }
.en__simnao input { width: 18px; height: 18px; accent-color: var(--teal-dark); vertical-align: -3px; }
.en__ficheiro { display: flex; gap: 12px; align-items: center; border: 1px dashed #C9C6C2; border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.en__ficheiro--feito { border-style: solid; border-color: #9ED9CF; background: var(--teal-fundo); }
.en__fic-txt { flex: 1; min-width: 0; } .en__fic-txt b { font-size: var(--t-s); }
.en__ok { color: var(--teal-dark) !important; font-weight: 600; word-break: break-all; }
.en__off { opacity: .45; pointer-events: none; }
.en__a-subir { font-size: var(--t-xs); color: var(--grey); }
.en__rever { display: grid; grid-template-columns: 110px 1fr auto; gap: 8px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--linha); font-size: var(--t-s); }
.en__rever span { color: var(--grey); } .en__rever b { font-weight: 500; word-break: break-word; }
.en__ir { background: none; border: 0; color: var(--teal-dark); font: inherit; font-size: var(--t-xs); text-decoration: underline; cursor: pointer; }
.en__dados { background: var(--fundo); border-radius: 10px; padding: 12px; margin: 14px 0 8px; font-size: var(--t-xs); color: var(--grey); line-height: 1.5; }
.en__dados summary { cursor: pointer; color: var(--teal-dark); margin-top: 6px; } .en__dados p { margin: 6px 0 0; }
.en__falta { background: var(--esgotado-fundo); color: var(--esgotado-texto); border-radius: 10px; padding: 10px 12px; margin-top: 12px; font-size: var(--t-s); }
.en__botoes { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }
.en__botoes .botao { min-width: 130px; padding: 11px 18px; }
.en__fim { background: var(--paper); border: 1px solid var(--linha); border-radius: 14px; padding: 24px 20px; text-align: center; }

/* As entradas, do lado do RH (082). */
.en-rh__grelha { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, 1fr); gap: 0; }
.en-rh__grelha--so { grid-template-columns: 1fr; }
@media (max-width: 980px) { .en-rh__grelha { grid-template-columns: 1fr; } }
.en-rh__tab td { vertical-align: top; cursor: pointer; } .en-rh__tab td small { display: block; color: var(--grey); font-size: var(--t-xs); }
.en-rh__sel td { background: var(--teal-fundo); }
.en-rh__lado { border-left: 1px solid var(--linha); padding: 12px 16px 16px; font-size: var(--t-s); }
@media (max-width: 980px) { .en-rh__lado { border-left: 0; border-top: 1px solid var(--linha); } }
.en-rh__lado h3 { margin: 0 0 4px; font-size: 1rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.en-rh__lado h4 { margin: 16px 0 6px; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--grey); }
.en-rh__lado h4 small { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; }
.en-rh__link { background: var(--fundo); border-radius: 8px; padding: 8px 10px; font-family: Consolas, monospace; font-size: 11px; word-break: break-all; margin: 4px 0 8px; }
.en-rh__dados { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; margin: 0; }
.en-rh__dados dt { color: var(--grey); } .en-rh__dados dd { margin: 0; word-break: break-word; }
.en-rh__fics, .en-rh__lista { list-style: none; padding: 0; margin: 0 0 8px; }
.en-rh__fics li { padding: 4px 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.en-rh__lista li { padding: 5px 0; border-bottom: 1px dashed var(--linha); }
.en-rh__lista label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.en-rh__lista small { display: block; }
.en-rh__bloco { margin: 10px 0; display: block; white-space: normal; }

/* O espaço dentro dos quadros do RH (Entradas e Documentos de RH): nada encostado à moldura. */
.rh-bloco > .fc__extra { padding: 12px 18px 4px; }
.rh-bloco > .quadro, .rh-bloco > .en-rh__grelha { margin: 10px 18px 18px; }
.rh-bloco > .en-rh__grelha { border: 1px solid var(--linha); border-radius: var(--radius-s, 8px); overflow: hidden; }
.rh-bloco > .en-rh__grelha > .quadro { border: 0; border-radius: 0; box-shadow: none; }
.rh-bloco > .aq__form { padding: 16px 18px 18px; }
.rh-bloco > .hj-vazio, .rh-bloco > .en-rh__grelha .hj-vazio { padding: 14px 18px; }
.rh-bloco > .en-rh__fics { padding: 10px 18px 14px; }
/* A ficha da loja (083). */
.fl__lojas { margin-bottom: 8px; }
.fl__cabeca { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 10px 0 12px; }
.fl__cabeca h2 { margin: 0; font-family: var(--font-display); font-size: 1.35rem; }
.fl__prog { min-width: 220px; } .fl__prog > div { height: 8px; border-radius: 4px; background: var(--linha); overflow: hidden; }
.fl__prog i { display: block; height: 100%; background: var(--teal); } .fl__prog small { color: var(--grey); font-size: var(--t-xs); }
.fl__grelha { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 520px) { .fl__grelha { grid-template-columns: 1fr; } }
.fl__largo { grid-column: 1 / -1; }
.fl__bloco { margin: 0; }
.fl__bloco .hj-bloco__titulo { display: flex; align-items: center; gap: 8px; }
.fl__editar { margin-left: 10px; background: none; border: 0; color: var(--teal-dark); font: inherit; font-weight: 700; font-size: var(--t-xs); text-transform: none; letter-spacing: 0; cursor: pointer; }
.fl__dl { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; margin: 0; padding: 12px 18px 16px; font-size: var(--t-s); }
.fl__dl dt { color: var(--grey); } .fl__dl dd { margin: 0; word-break: break-word; }
.fl__falta { color: var(--limitado-texto); background: var(--limitado-fundo); border-radius: 6px; padding: 0 6px; font-size: var(--t-xs); }
.fl__confirmar { margin: 12px 18px 0; background: var(--limitado-fundo); color: var(--limitado-texto); border-radius: 8px; padding: 8px 10px; font-size: var(--t-xs); }
.fl__nota, .fl__112 { margin: 0 18px 14px; font-size: var(--t-xs); color: var(--grey); } .fl__112 { margin-top: 10px; color: var(--ink); }
.fl__tab { width: calc(100% - 36px); margin: 10px 18px 14px; border-collapse: collapse; font-size: var(--t-s); }
.fl__tab th { text-align: left; color: var(--grey); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; padding: 5px 6px; border-bottom: 1px solid var(--linha); }
.fl__tab td { padding: 6px; border-bottom: 1px solid var(--linha); vertical-align: top; } .fl__tab tr:last-child td { border-bottom: 0; }
.fl__tab input { width: 100%; font: inherit; font-size: var(--t-s); padding: 5px 7px; border: 1px solid var(--linha); border-radius: 6px; min-width: 0; }
.fl__x { border: 0; background: none; color: var(--esgotado-texto); font-size: 18px; cursor: pointer; }
.fl__form { padding: 14px 18px 16px; }
.fl__form textarea { font: inherit; font-size: var(--t-s); padding: 6px 8px; border: 1px solid var(--linha); border-radius: var(--radius-s); resize: vertical; }
.fl__lista-form .aq__fim { padding: 0 18px 14px; }
.fl__linha { display: flex; gap: 8px; align-items: center; margin: 12px 18px 0; font-size: var(--t-s); color: var(--grey); }
.fl__linha input { font: inherit; padding: 5px 7px; border: 1px solid var(--linha); border-radius: 6px; }
.fl__quadro { margin: 10px 18px 6px; } .fl__quadro .fl__tab { width: 100%; margin: 0; }
.fl__sub { display: block; color: var(--grey); font-size: var(--t-xs); font-weight: 400; }
.fl__pontos { letter-spacing: 2px; color: var(--grey); }
.fl__revelado { background: #FFF6D6; padding: 1px 6px; border-radius: 4px; font-size: var(--t-s); }
.fl__accoes { white-space: nowrap; text-align: right; } .fl__accoes .botao { margin-left: 3px; }
.fl__acesso-ed td { background: var(--fundo); }
.fl__registo { margin: 4px 18px 10px; font-size: var(--t-xs); color: var(--grey); } .fl__registo summary { cursor: pointer; color: var(--teal-dark); }
.fl__registo ul { margin: 6px 0 0; padding-left: 18px; } .fl__registo b { color: var(--ink); font-weight: 600; }
/* Lojas › Protocolos (086) */
.pt__filtros { display: flex; flex-wrap: wrap; gap: var(--md); margin-bottom: var(--md); font-size: var(--t-s); color: var(--grey); }
.pt__filtros label { display: inline-flex; gap: 6px; align-items: center; }
.pt__filtros select { font: inherit; font-size: var(--t-m); padding: 4px 8px; border: 1px solid var(--linha); border-radius: var(--radius-s); background: var(--paper); color: var(--ink); }
.pt__kpis { margin-bottom: var(--md); background: var(--paper); border: 1px solid var(--linha); border-radius: var(--radius); padding: 12px 14px; }
.pt__corpo { display: grid; gap: var(--md); }
.pt__talao > td { background: var(--fundo); padding: 8px 10px; }
.pt__talao .quadro { margin: 0; }
.pt__meses { display: flex; align-items: flex-end; gap: 3px; height: 96px; padding-top: 6px; overflow: hidden; }
.pt__mes { border: 0; padding: 0; background: none; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 2px; }
.pt__mes i { display: block; width: 100%; flex: 0 0 auto; background: #7A4FB5; border-radius: 2px 2px 0 0; min-height: 1px; }
.pt__mes span { font-size: 9px; color: var(--grey); white-space: nowrap; }
.pt__acordos > summary { cursor: pointer; list-style: none; }
.pt__regras { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: var(--t-m); }
.pt__nota-visto { display: flex; gap: 6px; margin: 6px 0 0; }
.pt__nota-visto input { flex: 1; font: inherit; font-size: var(--t-s); padding: 4px 8px; border: 1px solid var(--linha); border-radius: var(--radius-s); }

/* --- A etiqueta de preço na Phomemo M110 (etiqueta.js, 03-11-2026) --- */
.janela--etiqueta .janela__caixa { max-width: 440px; }
.et__titulo { margin: 0 0 2px; }
.et__sub { margin: 0 0 var(--md); color: var(--grey); font-size: 14px; }
.et__tipo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.et__tipo label { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.et__tipo label:has(input:disabled) { color: var(--grey); font-weight: 400; }
.et__promo-nota { flex-basis: 100%; font-size: 13px; color: var(--grey); }
.et__campo { display: grid; gap: 4px; font-size: 13px; color: var(--grey); }
.et__campo input, .et__campo select { font: inherit; font-size: 16px; color: var(--ink); padding: 8px 10px;
  border: 1px solid var(--linha); border-radius: 8px; background: var(--paper); }
.et__grupo { margin-top: var(--sm); }
.et__campo select { width: 100%; min-width: 0; text-overflow: ellipsis; }
.et__previsao { display: flex; justify-content: center; margin: var(--md) 0; padding: var(--md);
  background: var(--fundo); border-radius: var(--radius); }
.et__previsao canvas { width: 240px; height: 200px; image-rendering: pixelated; background: #fff;
  border-radius: 4px; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
.et__linha { display: flex; flex-wrap: wrap; align-items: end; gap: var(--sm) var(--md); }
.et__linha .et__campo { flex: 1 1 120px; }
.et__quantas { max-width: 110px; }
.et__imprimir { min-width: 150px; }
.et__estado { min-height: 1.4em; margin: var(--sm) 0 0; font-size: 14px; color: var(--teal-texto); }
.et__estado--erro { color: var(--esgotado-texto); }
.et__afinar { margin-top: var(--md); font-size: 14px; }
.et__afinar summary { cursor: pointer; color: var(--grey); }
.et__afinar > * + * { margin-top: var(--sm); }
.et__ajuda { color: var(--grey); font-size: 13px; }
.et__registo { white-space: pre-wrap; font-size: 12px; max-height: 140px; overflow: auto; background: var(--fundo);
  padding: 8px; border-radius: 6px; }
.et__registo:empty { display: none; }

/* O «voltar» da campanha, à vista (Mafalda, 03-11-2026): o discreto não se via. */
.cp__voltar { font-weight: 700; border: 1.5px solid var(--ink, currentColor); background: var(--paper, #fff); }
.cp__voltar:hover { background: var(--ink, #222); color: var(--paper, #fff); }

/* Novidades da equipa (092, 04-11-2026). A lista à esquerda, o aviso à direita; empilham no tablet. */
.aba--coruja { display: inline-flex; align-items: center; gap: 6px; }
.aba--coruja svg { flex-shrink: 0; }
.nv__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--md); flex-wrap: wrap; margin-bottom: var(--md); }
.nv__filtros { display: flex; gap: 8px; flex-wrap: wrap; }
.nv__grelha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .nv__grelha { grid-template-columns: minmax(0, 1fr); } }
.nv__lista { display: flex; flex-direction: column; gap: 10px; }
.nv__cartao { display: flex; flex-direction: column; gap: 6px; text-align: left; font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--linha); border-radius: 14px; padding: 14px 16px; cursor: pointer; }
.nv__cartao:hover { border-color: var(--teal); }
.nv__cartao--aberta { border: 2px solid var(--teal); padding: 13px 15px; }
.nv__cartao-cima { display: flex; align-items: center; gap: 8px; }
.nv__cartao-titulo { font-size: 15px; }
.nv__cartao-sub { font-size: var(--t-s); color: var(--grey); }
.nv__ponto { width: 9px; height: 9px; border-radius: 50%; background: #F29359; flex-shrink: 0; }
.nv__etq { align-self: flex-start; background: var(--teal-fundo); color: var(--teal-texto); font-size: var(--t-xs); font-weight: 700; border-radius: 999px; padding: 2px 8px; }
.nv__etq--geral { background: #F0EEEB; color: var(--grey); }
.nv__aviso { background: var(--paper); border-radius: 16px; box-shadow: 0 1px 3px rgba(35,32,33,.08); padding: 24px 32px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.nv__aviso--vazio { color: var(--grey); }
.nv__aviso-cima { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nv__aviso-quem { font-size: var(--t-s); color: var(--grey); }
.nv__aviso-titulo { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.15; }
.nv__corpo { font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.nv__corpo p { margin: 0 0 10px; }
.nv__corpo ul, .nv__corpo ol { margin: 0 0 10px; padding-left: 22px; }
.nv__anexos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.nv__video { margin: 0; border: 1px solid var(--linha); border-radius: 12px; overflow: hidden; background: var(--ink); }
.nv__video video { display: block; width: 100%; max-height: 360px; background: var(--ink); }
.nv__video figcaption { background: var(--paper); padding: 8px 12px; font-size: var(--t-m); font-weight: 600; }
.nv__ficheiro { font-weight: 600; }
.nv__confirmar { border-top: 1px solid #F0EEEB; padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.nv__duvida, .nv__responder { display: flex; flex-direction: column; gap: 6px; font-size: var(--t-m); font-weight: 600; }
.nv__duvida textarea, .nv__responder textarea { font: inherit; font-weight: 400; font-size: 14px; border: 1px solid #D6D2CD; border-radius: 10px; padding: 10px 12px; resize: vertical; }
.nv__lido { align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
.nv__lido-ok { margin: 0; display: flex; align-items: center; gap: 10px; background: var(--teal-fundo); border-radius: 10px; padding: 12px 16px; font-size: 14px; }
.nv__lido-ok svg { flex-shrink: 0; }
.nv__dv { background: #FFF6EE; border-radius: 10px; padding: 10px 14px; font-size: var(--t-m); line-height: 1.45; display: flex; flex-direction: column; gap: 8px; }
.nv__resp { margin: 0; }
.nv__resp--espera { color: var(--grey); }
.nv__leituras { border-top: 1px solid #F0EEEB; padding-top: 14px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.nv__leituras p { margin: 0; }
.nv__barra { height: 10px; background: #EFEDEA; border-radius: 999px; overflow: hidden; }
.nv__barra span { display: block; height: 100%; background: var(--teal); }
.nv__janela { max-width: 760px; }
.nv__colar { min-height: 140px; max-height: 320px; overflow: auto; border: 2px dashed var(--teal); border-radius: 12px; padding: 12px 16px; margin-bottom: var(--md); font-size: 14px; line-height: 1.5; }
.nv__colar:focus { outline: none; border-style: solid; }
.nv__colar-dica { color: var(--grey); margin: 0; }
.nv__lista-anexos { margin: 0; padding-left: 18px; font-size: var(--t-m); }
.nv__lojas { border: 1px solid var(--linha); border-radius: 10px; padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.nv__lojas legend { font-size: var(--t-xs); color: var(--grey); padding: 0 4px; }
.nv__check { flex-direction: row !important; align-items: center; gap: 6px !important; color: var(--ink) !important; font-size: var(--t-m) !important; }
.nv__colar:empty::before { content: attr(data-dica); color: var(--grey); }
.nv__rascunho { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; background: var(--limitado-fundo); border-radius: 10px; padding: 10px 14px; font-size: var(--t-m); }

/* As medalhas das campanhas (094, 04-11-2026). */
@keyframes md-brilho { 0% { transform: translateX(-70px) rotate(25deg); } 60%, 100% { transform: translateX(90px) rotate(25deg); } }
@keyframes md-salto { 0%, 100% { transform: translateY(0); } 12% { transform: translateY(-7px); } 24% { transform: translateY(0); } }
.md--viva { animation: md-salto 3.2s ease-in-out infinite; }
.md--viva .md__reflexo { animation: md-brilho 3.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .md--viva, .md--viva .md__reflexo { animation: none; } }
.md__quadro { background: var(--paper); border-radius: 16px; box-shadow: 0 1px 3px rgba(35,32,33,.08); padding: 20px 24px; margin: 14px 0; display: flex; flex-direction: column; gap: 16px; }
.md__quadro--sem { color: var(--grey); font-size: var(--t-m); }
.md__quadro--sem p { margin: 0; }
.md__topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.md__titulo { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 22px; }
.md__nota { font-size: var(--t-s); color: var(--grey); margin: 0; }
.md__cartoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 700px) { .md__cartoes { grid-template-columns: minmax(0, 1fr); } }
.md__cartao { display: flex; align-items: center; gap: 12px; border-radius: 14px; padding: 12px 14px; }
.md__cartao--feita { border: 2px solid #E3B788; background: #FBF3EA; }
.md__cartao--feita.md__cartao--prata { border-color: #AEB6BF; background: #F2F4F6; }
.md__cartao--feita.md__cartao--ouro { border-color: #E5C463; background: #FFF8E1; }
.md__cartao--proxima { border: 2px dashed #AEB6BF; }
.md__cartao--longe { border: 2px dashed var(--linha); opacity: .8; }
.md__cartao svg { flex-shrink: 0; }
.md__cartao-titulo { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.15; }
.md__cartao-sub { font-size: var(--t-s); color: var(--grey); }
.md__cartao-sub b { color: var(--ink); }
.md__barra { position: relative; height: 18px; background: #EFEDEA; border-radius: 999px; overflow: hidden; }
.md__barra-feito { position: absolute; inset: 0 auto 0 0; background: var(--teal); border-radius: 999px; }
.md__marca { position: absolute; top: 0; bottom: 0; width: 2px; }
.md__marca--bronze { background: #C47F45; }
.md__marca--prata { background: #8E98A2; }
.md__numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 700px) { .md__numeros { grid-template-columns: minmax(0, 1fr); } }
.md__numeros > div { background: var(--fundo); border-radius: 12px; padding: 10px 14px; font-size: var(--t-m); color: var(--grey); }
.md__numeros b { display: block; font-family: var(--font-display); font-size: 30px; line-height: 1.1; color: var(--ink); }
.md__rotulo { display: block; font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--grey); margin-bottom: 4px; }
.md__rede-lojas { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.md__rede-loja { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-m); }
.md__rede-loja--eu { font-weight: 700; }
.md__sede { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.md__celula { display: inline-flex; align-items: center; gap: 6px; }
.md__editar { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.md__editar input { width: 64px; font: inherit; font-size: var(--t-m); padding: 4px 6px; border: 1px solid var(--linha); border-radius: 6px; text-align: right; }
.md__hoje { display: inline-flex; vertical-align: middle; margin-right: 4px; }

/* A imagem da campanha (096, 04-11-2026). */
.cp__titulo-imagem { width: 52px; height: 52px; object-fit: cover; border-radius: 12px; flex-shrink: 0; }
.cp__imagem-linha { display: flex; gap: 14px; align-items: center; justify-content: space-between; border: 1px solid var(--linha); border-radius: 10px; padding: 10px 12px; }
.cp__imagem-linha > div { display: flex; flex-direction: column; gap: 4px; }
.cp__imagem-ver { width: 84px; height: 84px; object-fit: contain; border-radius: 8px; background: var(--fundo); }
.md__imagem { width: 56px; height: 56px; object-fit: cover; border-radius: 12px; order: -1; }
.md__topo:has(.md__imagem) { align-items: center; justify-content: flex-start; }
.nv__imagem { width: 96px; height: 96px; object-fit: cover; border-radius: 14px; }
.mc__capa-imagem { width: 46mm; height: 46mm; object-fit: cover; border-radius: 6mm; margin-bottom: 4mm; }
.md__ritmo { margin: 0; background: var(--teal-fundo); border-radius: 10px; padding: 10px 14px; font-size: var(--t-m); }
.md__ritmo--ouro { background: #FFF8E1; }
.cpl__vendeu { color: var(--teal-texto); }
/* As vendas da loja num período (099, 05-11-2026). */
.hj-periodo { border-top: 1px solid var(--linha); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.hj-per-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.hj-per-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.hj-per-datas { margin: 0; display: flex; gap: 12px; flex-wrap: wrap; font-size: var(--t-m); }
.hj-per-datas input { font: inherit; padding: 4px 6px; border: 1px solid var(--linha); border-radius: 6px; }
.hj-per-media { display: block; font-size: var(--t-xs); color: var(--grey); margin-top: 2px; }
.hj-per-mais { color: var(--ok-texto); }
.hj-per-menos { color: var(--limitado-texto); }
/* O quadro de artigos de uma novidade (100, 05-11-2026). */
.nv__artigos table { width: 100%; }
.nv__capa { width: 52px; height: 52px; object-fit: contain; border-radius: 8px; background: var(--fundo); display: block; }
.nv__dif { font-weight: 700; border-radius: 999px; padding: 2px 8px; background: var(--fundo); }
.nv__dif--sobe { background: var(--limitado-fundo); color: var(--limitado-texto); }
.nv__dif--desce { background: var(--ok-fundo); color: var(--ok-texto); }

/* A lista da sede (05-11-2026): por publicar a laranja, em cima; selos de leitura. */
.nv__filtros--sede { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.nv__grupo { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.nv__loja-filtro { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-m); }
.nv__loja-filtro select { font: inherit; padding: 4px 6px; border: 1px solid var(--linha); border-radius: 6px; }
.nv__seccao { margin: 6px 0 0; font-size: var(--t-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--grey); }
.nv__seccao--rascunho { color: var(--limitado-texto); }
.nv__cartao--rascunho { background: var(--limitado-fundo); border-color: #F2C59A; }
.nv__selo { margin-left: auto; font-size: var(--t-xs); font-weight: 700; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.nv__selo--rascunho { background: #F29359; color: #fff; }
.nv__selo--faltam { background: var(--limitado-fundo); color: var(--limitado-texto); }
.nv__selo--lidas { background: var(--ok-fundo); color: var(--ok-texto); }

/* A «Alteração de preços» (102, 05-11-2026). */
.nv__tipos { border: 1px solid var(--linha); border-radius: 10px; padding: 8px 12px; display: flex; gap: 6px 16px; flex-wrap: wrap; }
.nv__tipos legend { font-size: var(--t-xs); color: var(--grey); padding: 0 4px; }
.nv__precos { display: flex; flex-direction: column; gap: 8px; }
.nv__precos textarea { font: inherit; font-size: var(--t-m); border: 2px dashed var(--teal); border-radius: 10px; padding: 8px 10px; }
.nv__previa-resumo { margin: 0; font-size: var(--t-m); }
.nv__erro-txt { color: var(--esgotado-texto); }
.nv__etq--precos { background: var(--lancamento-fundo); color: var(--lancamento-texto); }

/* O resumo das campanhas a decorrer (06-11-2026): na loja, um cartão por campanha; na sede, um quadro por loja. */
.cr__cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--md); margin-bottom: var(--lg); }
.cr__cartao { background: var(--paper); border: 1px solid var(--linha); border-radius: 10px; padding: var(--md); display: grid; gap: var(--sm); align-content: start; }
.cr__cab { display: flex; align-items: center; gap: var(--sm); flex-wrap: wrap; }
.cr__imagem { height: 34px; width: auto; border-radius: 4px; }
.cr__nome { margin: 0; font-size: var(--t-l, 15px); }
.cr__prazo { margin-left: auto; font-size: var(--t-s); font-weight: 600; color: var(--teal-texto); }
.cr__prazo--aviso { color: var(--limitado-texto); }
.cr__linha { display: grid; grid-template-columns: 84px 1fr; gap: var(--sm); align-items: start; font-size: var(--t-m); }
.cr__linha b { font-variant-numeric: tabular-nums; }
.cr__rot { font-size: var(--t-s); color: var(--grey); padding-top: 1px; }
.cr__barra { display: block; height: 6px; border-radius: 3px; background: var(--linha); overflow: hidden; margin: 4px 0; max-width: 260px; }
.cr__barra i { display: block; height: 100%; background: var(--teal); }
.cr__barra--etiq i { background: var(--limitado-texto); }
.cr__barra--mini { display: inline-block; width: 80px; vertical-align: middle; margin: 0 6px 0 0; }
.cr__falta { color: var(--limitado-texto); font-weight: 600; }
.cr__botoes { display: flex; gap: var(--sm); flex-wrap: wrap; margin-top: 2px; }
.cr__sede { margin-bottom: var(--lg); }
.cr__sede .cr__topo { display: flex; align-items: baseline; gap: var(--sm); flex-wrap: wrap; margin-bottom: var(--sm); }
.cr__sede tr.cr__atrasada td { background: var(--limitado-fundo); }
.cr__sede tr.cr__total td { font-weight: 700; }
.cr__sede tr[data-cr-loja] { cursor: pointer; }
.cr__sede tr[data-cr-loja]:hover td { background: var(--teal-fundo); }
.cr__lista { margin: var(--sm) 0 var(--md); }