/* ==========================================================================
   COFFICE — sistema de qualidade e mercado de café · design system

   A referência não é painel administrativo genérico: é MESA DE CLASSIFICAÇÃO
   somada a TERMINAL DE MERCADO. As decisões que sustentam isso:

   · COR DA CASA, NÃO DO TEMPLATE — e, desde 15/09/2026, a cor da MARCA: toda
     a paleta abaixo foi MEDIDA no logo que o cliente mandou. Nada de azul de
     dashboard.
   · FUNDO QUENTE — saúde e café vivem cercados de branco clínico. O creme afasta
     a tela do laboratório e aproxima da mesa de prova, sem perder legibilidade.
   · NÚMERO É DADO — tudo tabular, alinhado à direita, para a coluna ser lida na
     vertical. Preço, pontuação e defeito se comparam de relance.
   · VERDE SOBE, VERMELHO CAI — e em nenhum outro lugar. Essas duas cores estão
     reservadas para variação de mercado; usá-las como enfeite quebra a leitura.
   · NADA ATRÁS DE HOVER — em tela de toque o hover nunca dispara. O que o hover
     revelaria nasce visível; o hover só enfeita, e vira :active no toque.

   Toda a paleta está neste bloco e em nenhum outro ponto do arquivo — foi
   assim que a identidade pôde entrar num lugar só.

   ================= DE ONDE VEM CADA COR (15/09/2026) =================

   O logo chegou em 14/09/2026 e está em `identidade/originais/`. As cores
   abaixo não foram escolhidas: foram MEDIDAS na arte, pixel a pixel, e o que
   saiu da medição está em `identidade/design-guide.md`. São quatro:

     grafite  #2c2e2d   o anel do emblema e as letras COFFICE
     sálvia   #3d5148   o grão de café no centro — verde acinzentado, não vivo
     cobre    #a9582b   o aro externo, na parte iluminada
     creme    #f6f3ec   o fundo sobre o qual a marca foi entregue

   O QUE ISSO MUDOU, e por quê: o verde da casa era um verde vivo de floresta
   (#14432f). O verde da MARCA é acinzentado e mais claro. Os tokens continuam
   se chamando `--verde-*` porque é o papel deles no sistema — a cor escura da
   casa —, mas o tom agora é o do grão. O cobre, que era alaranjado (#b87333),
   ficou queimado como o do aro.

   E ISSO MELHOROU A REGRA DO MERCADO: com o verde da marca dessaturado, o
   `--alta` (#10683f, verde vivo) não se confunde mais com botão nem com barra
   lateral. Verde vivo na tela passou a significar uma coisa só — subiu.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- verde Coffice: o grão do emblema ---- */
  /* O verde mais escuro mora aqui em CANAIS, e a cor sai deles: a faixa de
     patrocinadores precisa do mesmo verde com transparência para o degradê das
     bordas, e escrever "30, 43, 37" num segundo lugar seria a receita para as
     duas versões divergirem no dia em que a marca mudar. */
  --verde-0-rgb: 30, 43, 37;
  --verde-0:    rgb(var(--verde-0-rgb));   /* barra lateral, cabeçalho de laudo */
  --verde-1:    #2c4238;   /* o verde da marca */
  --verde-2:    #3d5a4c;   /* estados ativos */
  --verde-fraco: #e9efec;
  --verde-linha: #c8d4ce;

  /* ---- terra: creme, marrom e cobre ---- */
  --creme-0:    #f6f3ec;   /* fundo da aplicação — o creme do próprio logo */
  --creme-1:    #efeade;   /* faixas, cabeçalho de tabela */
  --creme-2:    #e4ded0;   /* divisórias em superfície creme */
  --marrom:     #44352a;   /* texto de destaque em ficha */
  --marrom-fraco: #efe8dc;
  --cobre:      #a85a28;   /* acento secundário: safra, selo, destaque */
  --cobre-fraco: #fbf1e6;

  /* ---- neutros: o grafite da marca, não um cinza qualquer ---- */
  /* ---- a barra lateral: a única superfície ESCURA da casa ----

     A paleta inteira foi medida sobre o creme, e nada dela serve aqui: texto
     sobre verde-0 precisa de tinta clara. Sem estes três, quem mexe no menu
     escreve hex na mão — foi o que aconteceu até 15/09/2026. */
  --menu-tinta:       #cfe0d7;
  --menu-tinta-forte: #ffffff;
  --menu-ativo:       rgba(255, 255, 255, .11);

  /* As letras COFFICE são grafite levemente frio (#2c2e2d), e é dele que sai
     toda a escala de texto — neutro quente aqui deixaria a tela marrom em
     volta de uma marca que não é. */
  /* A ESCALA INTEIRA LÊ, INCLUSIVE O ÚLTIMO DEGRAU. O terciário era #9c9089 e
     dava 2,5:1 sobre o fundo — "· 1 lote", "1 vigentes", a dica embaixo do
     campo e o subtítulo da linha do lote nasciam apagados, e é informação, não
     enfeite. A régua é o fundo MAIS ESCURO em que cada uma cai (o creme das
     faixas de tabela, #efeade), não o branco do cartão. */
  --tinta-0:  #1d201f;   /* 14,4:1 */
  --tinta-1:  #414745;   /*  7,9:1 */
  --tinta-2:  #565e5b;   /*  5,6:1 */
  --tinta-3:  #646c69;   /*  4,5:1 — o piso, e ainda assim um degrau abaixo */
  --linha-1:  #dcd6c9;
  --linha-2:  #eae5da;
  --papel:    #ffffff;

  /* ---- MERCADO: só aqui, e em mais lugar nenhum ---- */
  --alta:       #10683f;
  --alta-fundo: #e7f2ec;
  --baixa:      #a82820;
  --baixa-fundo: #fbebe9;

  /* ---- semânticas de laudo ---- */
  --atencao:  #8a5a06;
  --atencao-fundo: #fbf3e4;
  --bloqueio: #a82820;
  --bloqueio-fundo: #fbebe9;
  --info:     #1d4f91;
  --info-fundo: #eaf0f8;

  --raio:      7px;
  --raio-mini: 4px;
  --menu-larg: 232px;
  --topo-alt:  54px;

  /* O respiro da área de conteúdo vive aqui porque a faixa de patrocinadores
     precisa SANGRAR até as bordas: ela usa esta mesma medida em negativo. Com o
     valor escrito em dois lugares, mudar o respiro no celular descolaria a
     faixa da borda sem ninguém perceber. */
  --pad-lado: 26px;
  --pad-topo: 22px;

  /* O cobre da marca como TEXTO: #a85a28 sobre o creme dá 4,6:1, que serve para
     um selo mas é apertado para letra pequena. Este é o mesmo cobre escurecido
     até 6,1:1 sobre o creme. */
  --cobre-forte: #8c4a1c;
  /* E o mesmo cobre CLAREADO, para o caminho inverso: sobre a barra lateral o
     cobre da marca dá 2,9:1 e some; este dá 6,1:1. */
  --cobre-claro: #d99a52;

  --sombra-modal: 0 18px 50px -14px rgba(29, 32, 31, .34);
  --sombra-flutua: 0 8px 24px -8px rgba(29, 32, 31, .26);

  --fonte: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
           "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--tinta-0);
  background: var(--creme-0);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

body.travado { overflow: hidden; }

/* `hidden` PRECISA GANHAR DE `display`, e por isso vem com !important.

   O atributo sozinho vale `display: none` — mas qualquer regra de classe com
   `display` o atropela, e o elemento volta à tela sem ninguém ter pedido. Foi o
   que aconteceu com a tira de quem está espiando (`.espiando { display: flex }`):
   escondida pelo JavaScript, ela continuava ocupando a largura, e só apareceu na
   medição do papel — 759px numa página de 733px. Escondido é escondido. */
[hidden] { display: none !important; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.28; letter-spacing: -.012em; }
p { margin: 0 0 .55em; }
button { font: inherit; color: inherit; }
a { color: var(--verde-2); }

/* Todo número do sistema é tabular: peso de defeito, percentual de peneira,
   pontuação e preço precisam alinhar na vertical para poderem ser comparados. */
.tabela, .indicador__valor, .num, .ficha__linha strong, .cotacao__valor,
.entrada-mini, .peneira__pct, .menu__conta {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   ESTRUTURA
   ========================================================================== */

.topo {
  display: none;
  position: sticky; top: 0; z-index: 60;
  align-items: center; gap: 10px;
  height: var(--topo-alt); padding: 0 12px;
  background: var(--verde-1); color: #fff;
}
.topo__menu {
  display: grid; place-items: center;
  width: 36px; height: 36px; padding: 0;
  background: rgba(255, 255, 255, .1); color: #fff;
  border: 0; border-radius: var(--raio-mini); cursor: pointer;
}
.topo__menu svg { width: 18px; height: 18px; }
.topo__menu:active { background: rgba(255, 255, 255, .2); }
/* A marca da barra do celular é o mesmo botão de casa da lateral — ver
   `.lateral__marca`. Herda a cor e o corpo do topo para continuar parecendo o
   nome do sistema, não um botão colado ali. */
.topo__nome {
  padding: 5px 7px; margin-left: -3px;
  background: none; border: 0; border-radius: var(--raio-mini);
  color: inherit; font-family: inherit;
  font-weight: 600; font-size: 14.5px; letter-spacing: .02em;
  cursor: pointer; transition: background .15s;
}
/* O mesmo peso do botão do menu ao lado, que é o vizinho dela na barra. */
.topo__nome:active { background: rgba(255, 255, 255, .2); }
@media (hover: hover) {
  .topo__nome:hover { background: rgba(255, 255, 255, .1); }
}
.topo__alerta {
  margin-left: auto; padding: 4px 9px;
  background: var(--cobre); border-radius: 20px;
  font-size: 11px; font-weight: 600;
}

.cortina {
  display: none; position: fixed; inset: 0; z-index: 70;
  background: rgba(29, 32, 31, .45);
}

.estrutura { display: flex; min-height: 100vh; }

.lateral {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 80;
  width: var(--menu-larg);
  display: flex; flex-direction: column;
  background: var(--verde-0); color: #d8e5dd;
}

/* ================= a marca é o botão de casa =================

   Clicar no nome do sistema volta para a tela inicial de quem está logado —
   Painel na corretora, Minhas amostras no produtor. É o gesto que todo site
   ensinou, e sem ele a única saída de uma tela funda era caçar o item certo no
   menu. Sendo <button>, precisa devolver a aparência que o <div> tinha: fundo,
   borda, alinhamento e a fonte, que o botão não herda sozinho. */
.lateral__marca {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 17px 16px 15px;
  background: none; border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  color: inherit; font-family: inherit; text-align: left;
  cursor: pointer; transition: background .15s;
}
/* O realce não pode existir só para quem tem mouse: hover onde há mouse, toque
   onde não há — e o :active vale nos dois. A régua é a mesma do `.menu__item`
   logo abaixo: dois pesos diferentes de realce na mesma barra seriam ruído. */
.lateral__marca:active { background: rgba(255, 255, 255, .16); }
@media (hover: hover) {
  .lateral__marca:hover { background: rgba(255, 255, 255, .07); }
}
.lateral__marca:focus-visible {
  outline: 2px solid var(--cobre); outline-offset: -3px;
}
.marca__texto { min-width: 0; }
/* O EMBLEMA SOBRE A BARRA ESCURA, E POR QUE ELE VAI SEM MOLDURA.

   O disco do emblema é grafite (#2c2e2d) e a barra é o verde mais escuro da
   casa: entre os dois há 1,08:1, ou seja, silhueta nenhuma. A tentação é pôr um
   disco de creme atrás, e isso foi testado — em 34px fica pior. O anel de creme
   come 4px do diâmetro, o desenho encolhe dentro dele, e o resultado tem dois
   anéis claros concêntricos brigando: o de fora, inventado, e o que a arte já
   tem por dentro.

   Sem moldura, quem fecha o contorno é o próprio aro de cobre, e ele fica com o
   dobro da espessura. Aqui isso basta: o aro não é texto, é forma — e logo
   atrás dele vem o anel claro da arte, que é o que o olho pega. */
.marca__simbolo {
  width: 34px; height: 34px; flex: 0 0 34px;
  display: block;
}
.lateral__nome {
  display: block; font-size: 15px; font-weight: 600;
  letter-spacing: .13em; color: #fff;
}
.lateral__tipo {
  display: block; font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255, 255, 255, .5); margin-top: 2px;
}

.menu { flex: 1; overflow-y: auto; padding: 10px 8px 18px; }
.menu__grupo {
  padding: 14px 10px 5px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255, 255, 255, .52);
}
.menu__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; margin-bottom: 1px;
  background: none; border: 0; border-radius: var(--raio-mini);
  font-size: 13px; color: var(--menu-tinta); text-align: left; cursor: pointer;
  position: relative;
}
.menu__item.ativo { background: var(--menu-ativo); color: var(--menu-tinta-forte); font-weight: 600; }
.menu__item.ativo::before {
  content: ''; position: absolute; left: -8px; top: 7px; bottom: 7px;
  width: 3px; background: var(--cobre); border-radius: 0 3px 3px 0;
}
.menu__item:active { background: rgba(255, 255, 255, .16); }
@media (hover: hover) {
  .menu__item:hover:not(.ativo) { background: rgba(255, 255, 255, .07); color: #fff; }
}
.menu__icone { display: grid; place-items: center; width: 17px; flex: 0 0 17px; opacity: .85; }
.menu__icone svg { width: 16px; height: 16px; display: block; }
.menu__item.ativo .menu__icone { opacity: 1; color: var(--cobre); }
.menu__nome { flex: 1; }
.menu__conta {
  padding: 1px 6px; background: var(--cobre); color: #fff;
  border-radius: 20px; font-size: 10.5px; font-weight: 700;
}

.principal {
  flex: 1; margin-left: var(--menu-larg); min-width: 0;
  padding: var(--pad-topo) var(--pad-lado) 60px;
}

.cabecalho {
  display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
  padding-bottom: 15px; margin-bottom: 18px;
  border-bottom: 1px solid var(--linha-1);
}
.cabecalho__texto { flex: 1 1 280px; min-width: 0; }
.cabecalho__trilha {
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--tinta-3); margin-bottom: 3px;
}
.cabecalho h1 { font-size: 20px; }
.cabecalho p { margin: 4px 0 0; color: var(--tinta-2); font-size: 12.5px; }
.cabecalho__acoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* ==========================================================================
   BOTÕES
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 33px; padding: 0 14px;
  border: 1px solid transparent; border-radius: var(--raio-mini);
  font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.btn--marca  { background: var(--verde-1); color: #fff; }
.btn--cobre  { background: var(--cobre); color: #fff; }
.btn--neutro { background: var(--papel); color: var(--tinta-1); border-color: var(--linha-1); }
.btn--perigo { background: var(--papel); color: var(--bloqueio); border-color: #e6c3bf; }
.btn--mini   { height: 26px; padding: 0 10px; font-size: 12px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn--marca:active  { background: var(--verde-0); }
.btn--cobre:active  { background: #a1631c; }
.btn--neutro:active { background: var(--creme-1); }
.btn--perigo:active { background: var(--bloqueio-fundo); }
@media (hover: hover) {
  .btn--marca:hover  { background: var(--verde-2); }
  .btn--cobre:hover  { background: #a1631c; }
  .btn--neutro:hover { background: var(--creme-1); border-color: var(--linha-1); }
  .btn--perigo:hover { background: var(--bloqueio-fundo); }
}

.btn-icone {
  display: grid; place-items: center; width: 27px; height: 27px; padding: 0;
  background: none; border: 0; border-radius: var(--raio-mini);
  color: var(--tinta-2); cursor: pointer;
}
.btn-icone:active { background: var(--creme-1); color: var(--tinta-0); }
@media (hover: hover) { .btn-icone:hover { background: var(--creme-1); color: var(--tinta-0); } }

.botoes-linha { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 13px; }

/* ==========================================================================
   BARRA DE FERRAMENTAS
   ========================================================================== */

.barra-ferramentas {
  display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-bottom: 15px;
}
.busca, .filtro-select {
  height: 33px; padding: 0 11px;
  background: var(--papel); border: 1px solid var(--linha-1);
  border-radius: var(--raio-mini); font-family: inherit; font-size: 13px; color: var(--tinta-0);
}
.busca { flex: 1 1 240px; min-width: 0; }
.busca::placeholder { color: var(--tinta-3); }
.busca:focus, .filtro-select:focus {
  outline: none; border-color: var(--verde-2); box-shadow: 0 0 0 3px var(--verde-fraco);
}

/* A BARRA DO CLIMA — o seletor de estado e a busca de cidade, lado a lado.

   Cada controle leva o próprio rótulo em cima, porque um "Estado" e um "Ver
   outra cidade" sem legenda viram dois campos que a pessoa tem de adivinhar. No
   computador os dois cabem na mesma fila; no telefone a busca desce inteira,
   com o botão ao lado do campo — encolher os dois até o campo caber em 90 px
   seria entregar uma busca em que não dá para ler o que se digitou. */
.barra-ferramentas--clima { align-items: flex-end; }
.filtro-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.filtro-campo:last-child { flex: 1 1 260px; }
.filtro-rotulo {
  font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tinta-2);
}
.filtro-linha { display: flex; gap: 7px; align-items: center; min-width: 0; }
.filtro-linha .busca { flex: 1 1 auto; }

/* AS CIDADES PESQUISADAS, como etiqueta que se tira. O × é o caminho de volta:
   sem ele, cidade digitada por engano ficaria na tela para sempre, custando uma
   coordenada em toda coleta.

   O × nasce visível, e não no hover: em tela de toque o hover nunca dispara, e
   botão que só o mouse revela não existe no telefone. O realce vermelho, que é
   só enfeite, é que vira :active lá — o que o hover enfeita segue enfeitando
   onde há mouse, e a saída existe do mesmo jeito nos dois. */
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin: 11px 0 0; }
.etiqueta {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px 4px 3px 10px; border-radius: 20px;
  background: var(--creme-1); box-shadow: inset 0 0 0 1px var(--linha-1);
  font-size: 12px; font-weight: 600; color: var(--tinta-1); white-space: nowrap;
}
.etiqueta__x {
  border: 0; background: none; cursor: pointer; padding: 0;
  width: 19px; height: 19px; border-radius: 50%; line-height: 1;
  font-size: 15px; color: var(--tinta-3); font-family: inherit;
}
@media (hover: hover) {
  .etiqueta__x:hover { background: var(--bloqueio-fundo); color: var(--bloqueio); }
}
.etiqueta__x:active { background: var(--bloqueio-fundo); color: var(--bloqueio); }

.texto-apoio--erro { color: var(--bloqueio); margin-top: 9px; }

.alternador {
  display: inline-flex; flex-wrap: wrap; padding: 3px; gap: 2px;
  background: var(--creme-1); border: 1px solid var(--linha-2); border-radius: var(--raio-mini);
}
.alternador__btn {
  padding: 5px 12px; background: none; border: 0; border-radius: 3px;
  font-size: 12.5px; font-weight: 550; color: var(--tinta-2); cursor: pointer;
}
.alternador__btn.ativo { background: var(--papel); color: var(--verde-1); font-weight: 600;
                         box-shadow: 0 1px 2px rgba(29, 32, 31, .09); }
.alternador__btn:active { color: var(--tinta-0); }

/* ==========================================================================
   INDICADORES
   ========================================================================== */

.indicadores {
  display: grid; gap: 1px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  background: var(--linha-2);
  border: 1px solid var(--linha-1); border-radius: var(--raio); overflow: hidden;
}
.indicador { padding: 13px 15px; background: var(--papel); }
.indicador__rotulo {
  display: block; font-size: 10px; font-weight: 650; letter-spacing: .09em;
  text-transform: uppercase; color: var(--tinta-2); margin-bottom: 5px;
}
.indicador__valor { display: block; font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.indicador__apoio { display: block; font-size: 11.5px; color: var(--tinta-3); margin-top: 2px; }
.indicador--verde  .indicador__valor { color: var(--verde-2); }
.indicador--cobre  .indicador__valor { color: var(--cobre); }
.indicador--alerta .indicador__valor { color: var(--atencao); }
.indicador--alta   .indicador__valor { color: var(--alta); }
.indicador--baixa  .indicador__valor { color: var(--baixa); }

/* ==========================================================================
   BLOCOS E TABELAS
   ========================================================================== */

.bloco {
  background: var(--papel); border: 1px solid var(--linha-1);
  border-radius: var(--raio); margin-bottom: 16px; overflow: hidden;
}
.bloco__topo {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 15px; border-bottom: 1px solid var(--linha-2); background: var(--creme-1);
}
.bloco__topo h2 { flex: 1; font-size: 13.5px; font-weight: 650; }
.bloco__corpo > .vazio, .bloco__corpo > p, .bloco__corpo > .form-grade { padding: 15px; }
.bloco__corpo > .botoes-linha { padding: 0 15px 15px; margin-top: 0; }

.duas-colunas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.duas-colunas .bloco { margin-bottom: 0; }

.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela th {
  padding: 9px 13px; text-align: left; background: var(--creme-1);
  border-bottom: 1px solid var(--linha-1);
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinta-2); white-space: nowrap;
}
.tabela th.dir, .tabela td.dir { text-align: right; }
.tabela td { padding: 10px 13px; border-bottom: 1px solid var(--linha-2); vertical-align: middle; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela td strong { font-weight: 600; }
.tabela .sub { display: block; font-size: 11px; color: var(--tinta-3); margin-top: 1px; }
@media (hover: hover) { .tabela tbody tr:hover { background: var(--creme-0); } }
.tabela--compacta td, .tabela--compacta th { padding: 6px 10px; }

.vazio { padding: 32px 16px; text-align: center; }
.vazio p { margin: 0 0 4px; font-size: 13.5px; font-weight: 550; color: var(--tinta-1); }
.vazio small { font-size: 12px; color: var(--tinta-3); }

.texto-apoio { color: var(--tinta-2); font-size: 12.5px; line-height: 1.55; }
.texto-apoio strong { color: var(--tinta-1); font-weight: 600; }
/* O rodapé de uma tela: uma linha solta, fora dos blocos, que aponta para onde o
   assunto continua. O texto CORRE como frase — nada de flex aqui, que picaria a
   frase em pedaços e daria espaço até à pontuação. O botão é mais uma palavra
   dela, e desce sozinho para a linha seguinte quando não couber. */
.texto-apoio--pe {
  margin: 18px 0 4px; padding-top: 14px;
  border-top: 1px solid var(--linha-1);
}
.texto-apoio--pe .btn { margin: 2px 0 2px 8px; vertical-align: middle; }
.forte { font-weight: 600; }
.dir { text-align: right; }
.fraco { color: var(--tinta-3); }
.mono { font-family: var(--mono); font-size: .92em; }

/* MERCADO — as duas únicas cores reservadas */
.sobe { color: var(--alta); font-weight: 600; }
.cai  { color: var(--baixa); font-weight: 600; }

/* ==========================================================================
   SELOS
   ========================================================================== */

.selo {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 20px;
  font-size: 11px; font-weight: 650; white-space: nowrap;
}
.selo--cinza    { background: var(--creme-1); color: var(--tinta-2); box-shadow: inset 0 0 0 1px var(--linha-1); }
.selo--verde    { background: var(--verde-fraco); color: var(--verde-2); }
.selo--cobre    { background: var(--cobre-fraco); color: var(--cobre); }
.selo--atencao  { background: var(--atencao-fundo); color: var(--atencao); }
.selo--bloqueio { background: var(--bloqueio-fundo); color: var(--bloqueio); }
.selo--info     { background: var(--info-fundo); color: var(--info); }

.avatar {
  display: grid; place-items: center;
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
  background: var(--verde-fraco); color: var(--verde-1);
  font-size: 11px; font-weight: 700;
}
.avatar--grande { width: 38px; height: 38px; flex-basis: 38px; font-size: 12.5px; }

/* ==========================================================================
   FORMULÁRIOS
   ========================================================================== */

.form-grade { display: grid; gap: 13px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.campo--inteiro { grid-column: 1 / -1; }
.campo > label { font-size: 11.5px; font-weight: 600; color: var(--tinta-1); }
.obrig { color: var(--bloqueio); }

/* A SEÇÃO DENTRO DO FORMULÁRIO — o que separa "de quem é o café" de "como ele
   chegou" na entrada de lote. É uma faixa de rótulo, não um campo: ela ocupa a
   linha inteira, tem um filete em cima e não recebe foco nem valor. O primeiro
   título não leva filete nem respiro — ali não há nada para separar ainda. */
.form__secao {
  gap: 1px; margin-top: 7px; padding-top: 12px;
  border-top: 1px solid var(--linha-1);
}
.form__secao:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.form__secaoNome {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--verde-2);
}
.form__secaoDica { font-size: 11.5px; color: var(--tinta-2); }

.campo input, .campo select, .campo textarea {
  width: 100%; height: 35px; padding: 0 10px;
  background: var(--papel); color: var(--tinta-0);
  border: 1px solid var(--linha-1); border-radius: var(--raio-mini);
  font-family: inherit; font-size: 13px;
}
.campo textarea { height: auto; min-height: 66px; padding: 8px 10px; resize: vertical; }
.campo select { cursor: pointer; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--verde-2); box-shadow: 0 0 0 3px var(--verde-fraco);
}
.campo--erro input, .campo--erro select, .campo--erro textarea {
  border-color: var(--bloqueio); box-shadow: 0 0 0 3px var(--bloqueio-fundo);
}
.campo__dica { font-size: 11px; color: var(--tinta-3); line-height: 1.45; }
/* A dica que não é dica, é recado: o campo Cidade caiu para texto livre porque
   a lista de municípios não carregou. Precisa ser lida, não ignorada. */
.campo__dica--alerta { color: var(--atencao); font-weight: 600; }
.campo__check {
  display: flex; align-items: flex-start; gap: 8px; padding: 9px 11px;
  background: var(--creme-1); border: 1px solid var(--linha-1);
  border-radius: var(--raio-mini); font-size: 12.5px; color: var(--tinta-1); cursor: pointer;
}
.campo__check input { width: 16px; height: 16px; flex: 0 0 16px; margin: 1px 0 0; accent-color: var(--verde-2); }

.form__titulo {
  margin: 20px 0 11px; padding-bottom: 7px;
  border-bottom: 1px solid var(--linha-2);
  font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--tinta-2);
}
.modal__corpo > .form__titulo:first-child { margin-top: 0; }

.entrada-mini {
  width: 74px; height: 29px; padding: 0 8px; text-align: right;
  background: var(--papel); border: 1px solid var(--linha-1);
  border-radius: var(--raio-mini); font-family: inherit; font-size: 12.5px;
}
.entrada-mini:focus { outline: none; border-color: var(--verde-2); box-shadow: 0 0 0 2px var(--verde-fraco); }

/* ==========================================================================
   FICHA
   ========================================================================== */

.ficha { border: 1px solid var(--linha-1); border-radius: var(--raio-mini); overflow: hidden; margin-bottom: 15px; }
.ficha__linha { display: flex; gap: 12px; padding: 8px 13px; border-bottom: 1px solid var(--linha-2); font-size: 12.5px; }
.ficha__linha:nth-child(odd) { background: var(--creme-0); }
.ficha__linha:last-child { border-bottom: 0; }
.ficha__linha > span { flex: 0 0 148px; color: var(--tinta-2); }
.ficha__linha > strong { flex: 1; font-weight: 600; min-width: 0; }

/* ==========================================================================
   ASSINATURA DO LAUDO OFICIAL

   A linha em branco onde quem assina escreve o nome, carimba e põe o registro no
   MAPA. Existe desde 14/09/2026, quando o cadastro de classificadores saiu do
   sistema: antes o nome vinha impresso do cadastro.

   A altura é de caneta, não de texto: 62px na tela e 11mm no papel, o mesmo
   espaço que a folha sensorial reserva. Linha curta demais é o que faz alguém
   assinar por cima do rodapé.
   ========================================================================== */

.assina {
  display: flex; flex-direction: column; gap: 4px; justify-content: flex-end;
  min-height: 62px; max-width: 320px; margin: 4px 0 15px;
}
.assina__risco { display: block; height: 1px; background: var(--tinta-2); }
.assina__cargo { font-size: 11.5px; color: var(--tinta-2); }

/* ==========================================================================
   O PORTÃO — a tela de entrada

   Enquanto ninguém entrou, é só isto na tela: nem menu, nem faixa, nem
   cabeçalho. Um cartão no meio, largura de leitura, e o mesmo creme do resto do
   sistema no fundo — quem entra já chega no COFFICE, não numa tela de login
   genérica que podia ser de qualquer coisa.

   No celular o cartão ocupa a largura toda menos o respiro: caixa estreita com
   moldura dentro de uma tela estreita é margem gasta duas vezes.
   ========================================================================== */

.entrada {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 32px 18px; background: var(--creme-0);
}
.entrada__caixa {
  width: 100%; max-width: 430px;
  background: var(--papel); border: 1px solid var(--linha-1);
  border-radius: var(--raio); padding: 26px 24px 22px;
  box-shadow: 0 10px 34px rgba(29, 32, 31, .07);
}
/* A marca no portão fica INTEIRA e no meio: é o único lugar do sistema em que
   ela não está disputando espaço com trabalho. O tamanho é contido de
   propósito — 158px de largura deixa o formulário visível sem rolagem num
   telefone, que é onde o produtor vai entrar. */
.entrada__marca {
  display: flex; flex-direction: column; align-items: center;
  gap: 7px; margin-bottom: 22px;
}
.entrada__logo { width: 158px; height: auto; display: block; }
.entrada__assinatura {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-2); text-align: center;
}

.entrada__titulo { margin: 0 0 6px; font-size: 21px; color: var(--tinta-0); }
.entrada__linha { margin: 0 0 18px; font-size: 13px; line-height: 1.55; color: var(--tinta-2); }
.entrada__form { display: block; }
.entrada__botao { width: 100%; justify-content: center; margin-top: 4px; text-align: center; }

.entrada__troca {
  margin: 16px 0 0; font-size: 12.5px; color: var(--tinta-2); text-align: center;
}
.entrada__link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--verde-2); font-weight: 600; text-decoration: underline;
}
.entrada__link:hover, .entrada__link:focus-visible { color: var(--verde-1); }

.entrada__recado {
  margin: 0 0 14px; padding: 10px 12px; border-radius: var(--raio-mini);
  font-size: 12.5px; line-height: 1.5;
}
.entrada__recado--erro {
  background: var(--bloqueio-fundo); color: var(--bloqueio);
  border: 1px solid rgba(168, 40, 32, .25);
}

/* A porta de entrada da maquete: sai no dia em que o servidor entrar */
.entrada__demo {
  margin-top: 20px; padding: 12px 13px; border-radius: var(--raio-mini);
  background: var(--creme-1); border: 1px dashed var(--linha-1);
  display: flex; flex-direction: column; gap: 5px;
}
.entrada__demo strong { font-size: 12px; color: var(--marrom); }
.entrada__demo span { font-size: 12px; color: var(--tinta-2); line-height: 1.5; }
.entrada__demo code {
  background: var(--papel); border: 1px solid var(--linha-2); border-radius: 3px;
  padding: 1px 5px; font-size: 11.5px; color: var(--tinta-0);
}
.entrada__demoNota { font-size: 11px !important; color: var(--tinta-3) !important; }
.entrada__demo .btn { align-self: flex-start; margin-top: 3px; }

/* A espera pela aprovação é TELA, não alerta que some */
.entrada__espera { text-align: center; margin-bottom: 20px; }
.entrada__relogio {
  width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 14px;
  display: grid; place-items: center;
  background: var(--cobre-fraco); color: var(--cobre);
}
.entrada__relogio svg { width: 27px; height: 27px; }
.entrada__espera .entrada__titulo { font-size: 19px; }
.entrada__espera .entrada__linha { margin-bottom: 0; }

@media (max-width: 480px) {
  .entrada { padding: 20px 14px; align-items: flex-start; }
  .entrada__caixa { padding: 20px 16px 18px; }
  .entrada__titulo { font-size: 19px; }
}

/* ==========================================================================
   O QUE AINDA NÃO TEM SERVIDOR

   Só nas duas telas onde alguém poderia concluir errado que o cadastro já viaja
   entre aparelhos (decisão do Lucas em 14/09/2026). Listrado, para não se
   confundir com aviso de operação — este fala do sistema, não do café.
   ========================================================================== */

.semServidor {
  display: flex; flex-direction: column; gap: 4px;
  margin: 0 0 16px; padding: 12px 14px;
  border: 1px dashed var(--cobre); border-radius: var(--raio-mini);
  background: var(--cobre-fraco);
}
.semServidor strong { font-size: 12.5px; color: var(--marrom); }
.semServidor span { font-size: 12.5px; line-height: 1.55; color: var(--tinta-1); }

/* ==========================================================================
   A FILA DE APROVAÇÃO

   Cartão por pedido, não linha de tabela: a decisão é sobre uma PESSOA, e quem
   decide quer ver de uma vez quem é, como falar com ela e há quanto tempo
   espera. Numa linha de tabela isso vira cinco colunas que ninguém lê.
   ========================================================================== */

.pedidos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.pedido {
  border: 1px solid var(--linha-1); border-radius: var(--raio);
  padding: 14px 15px; background: var(--papel);
}
.pedido__topo {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  margin-bottom: 11px;
}
.pedido__topo strong { display: block; font-size: 14.5px; color: var(--tinta-0); }
.pedido__topo .sub { display: block; font-size: 11.5px; color: var(--tinta-2); }
.pedido .ficha { margin-bottom: 12px; }
.pedido__acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

@media (max-width: 480px) {
  .pedidos { grid-template-columns: 1fr; }
  /* Aprovar e recusar ficam lado a lado e dividem a largura: decisão de duas
     saídas não pode ter uma delas escondida embaixo da outra. */
  .pedido__acoes .btn { flex: 1 1 calc(50% - 4px); justify-content: center; }
}

/* ==========================================================================
   A TIRA DE QUEM ESTÁ ESPIANDO

   Um administrador vendo a tela do produtor precisa de duas certezas o tempo
   todo: que ele não é aquele produtor, e como voltar. Fica acima de tudo, em
   cobre — a cor que neste sistema quer dizer "olhe aqui" sem significar alta
   nem queda.
   ========================================================================== */

.espiando {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap;
  /* Sangra até as bordas E CONSOME O RESPIRO DO TOPO, igual à faixa de
     patrocinadores: as duas disputam o mesmo lugar, e sem isto a faixa subia por
     cima da tira e cortava o nome de quem está sendo espiado ao meio. */
  margin: calc(var(--pad-topo) * -1) calc(var(--pad-lado) * -1) 0;
  padding: 9px var(--pad-lado);
  background: var(--cobre-fraco); border-bottom: 1px solid var(--cobre);
  font-size: 12.5px; color: var(--marrom);
}
.espiando strong { color: var(--tinta-0); }

/* Com a tira no ar, a faixa não sobe: o topo já está ocupado. O `:not([hidden])`
   é obrigatório — irmão adjacente continua adjacente mesmo escondido. */
.espiando:not([hidden]) + .patrocinio { margin-top: 0; }

/* ==========================================================================
   MODAL
   ========================================================================== */

.modal-fundo {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center; padding: 22px;
  background: rgba(29, 32, 31, .5);
}
.modal {
  width: 100%; max-width: 560px; max-height: 92vh; display: flex; flex-direction: column;
  background: var(--papel); border-radius: var(--raio); box-shadow: var(--sombra-modal); overflow: hidden;
}
.modal--largo { max-width: 860px; }
.modal__topo {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--linha-2);
}
.modal__topo h2 { flex: 1; font-size: 15.5px; }
.modal__sub { padding: 10px 18px 0; margin: 0; font-size: 12.5px; color: var(--tinta-2); }
.modal__corpo { padding: 16px 18px; overflow-y: auto; }
.modal__rodape {
  display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
  padding: 13px 18px; border-top: 1px solid var(--linha-2); background: var(--creme-0);
}
/* Excluir vai para a ponta esquerda, longe de Salvar. Ação destrutiva ao lado
   da ação que se aperta o dia inteiro é acidente esperando acontecer. */
.modal__rodape .btn--perigo:first-child { margin-right: auto; }

/* ==========================================================================
   AVISOS
   ========================================================================== */

.avisos {
  position: fixed; z-index: 200; right: 18px; bottom: 18px;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none;
}
.aviso {
  max-width: 340px; padding: 11px 14px;
  background: var(--tinta-0); color: #fff; border-radius: var(--raio-mini);
  box-shadow: var(--sombra-flutua); font-size: 12.5px; font-weight: 500; line-height: 1.45;
  animation: entrar .16s ease;
}
.aviso--erro { background: var(--bloqueio); }
.aviso--saindo { opacity: 0; transition: opacity .4s ease; }
@keyframes entrar { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   BLOQUEIO DA NORMA — o que impede um laudo de ser liberado
   ========================================================================== */

.bloqueio {
  display: flex; gap: 11px; padding: 12px 14px; margin-bottom: 14px;
  border-radius: var(--raio-mini); font-size: 12.5px; line-height: 1.5;
}
.bloqueio--foraDeTipo { background: var(--atencao-fundo); color: var(--atencao); }
.bloqueio--desclassificadoTemporario,
.bloqueio--desclassificadoDefinitivo { background: var(--bloqueio-fundo); color: var(--bloqueio); }
.bloqueio strong { display: block; margin-bottom: 3px; font-weight: 700; }
.bloqueio ul { margin: 5px 0 0; padding-left: 17px; }
.bloqueio li { margin-bottom: 3px; }

/* O histórico dentro de Ajustes: trezentos eventos soltos empurrariam o resto da
   tela para longe, então a lista rola dentro da própria caixa. */
.historico__caixa {
  max-height: 520px; overflow-y: auto;
  border: 1px solid var(--linha-1); border-radius: var(--raio-mini);
}
.historico__caixa .tabela-rolagem { border: 0; }

@media (max-width: 620px) { .historico__caixa { max-height: 420px; } }

/* ==========================================================================
   A DECISÃO NA MESA

   A faixa que fica no cabeçalho da amostra, acima das abas, e por isso aparece
   em todas elas: quem termina a contagem está na aba de defeitos, não no
   resumo, e mandar procurar o botão em outra tela é como se perde amostra
   classificada sem decisão nenhuma.

   No celular os dois botões descem para uma linha inteira e dividem a largura —
   botão de aprovar espremido ao lado de um texto de três linhas é botão que
   ninguém acerta com o polegar.
   ========================================================================== */

/* O topo da mesa: a ficha da amostra e a faixa da decisão. Existe só para que a
   ordem entre as duas possa trocar no celular — sem duplicar botão nenhum. */
.mesa-topo { display: flex; flex-direction: column; }

.decisao {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  padding: 12px 14px; margin-bottom: 14px;
  background: var(--papel); border: 1px solid var(--linha-1);
  border-radius: var(--raio-mini);
  font-size: 12.5px; line-height: 1.5;
}
.decisao__texto { flex: 1 1 260px; min-width: 0; }
/* só o TÍTULO da faixa é bloco — `strong` no meio da frase continua em linha,
   senão "o laudo se emite em Laudos" quebra em três pedaços */
.decisao__texto > strong:first-child {
  display: block; margin-bottom: 3px; font-size: 13.5px; font-weight: 700;
}
.decisao__acoes { display: flex; gap: 8px; flex-wrap: wrap; }

.decisao--aprovada { background: var(--verde-fraco); border-color: var(--verde-linha); color: var(--verde-2); }
.decisao--recusada { background: var(--bloqueio-fundo); border-color: #e6c3bf; color: var(--bloqueio); }
.decisao--espera   { background: var(--cobre-fraco); border-color: #ecd6b6; color: var(--cobre-forte); }
.decisao--falta    { background: var(--creme-1); color: var(--tinta-2); }

@media (max-width: 620px) {
  .decisao__acoes { width: 100%; }
  .decisao__acoes .btn { flex: 1 1 0; min-width: 0; height: 40px; }
  /* a decisão sobe: é o que se veio fazer, e fica ao alcance sem rolar */
  .mesa-topo .decisao { order: -1; }
}

/* ==========================================================================
   CADASTROS — o produtor com as fazendas dele dentro

   Deixou de ser tabela porque o conteúdo deixou de ser plano: cada produtor
   carrega as fazendas, e fazenda tem nome, região, altitude, área e variedade.
   Isso numa célula de tabela vira sopa de texto; em cartão, cada coisa tem
   lugar e o celular só empilha.
   ========================================================================== */

.produtores { display: grid; gap: 14px; margin-bottom: 16px; }

.prod {
  display: grid; gap: 13px; padding: 15px 17px;
  background: var(--papel); border: 1px solid var(--linha-1); border-radius: var(--raio);
}

.prod__topo { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.prod__quem { flex: 1 1 220px; min-width: 0; display: grid; gap: 2px; }
.prod__nome { font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; }
.prod__doc { font-size: 12px; color: var(--tinta-2); }
.prod__contato { font-size: 12px; color: var(--tinta-3); }
.prod__acoes { display: flex; gap: 7px; flex-wrap: wrap; }

.prod__numeros {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 14px;
  padding: 11px 0; border-block: 1px solid var(--linha-2);
}
.prod__numeros > div { min-width: 0; }
.prod__numeros span {
  display: block; font-size: 9.5px; font-weight: 650; letter-spacing: .07em;
  text-transform: uppercase; color: var(--tinta-3);
}
.prod__numeros strong {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.prod__nota { font-size: 10.5px; font-style: normal; font-weight: 500; color: var(--tinta-3); }

.prod__obs { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--tinta-2); }

.prod__fazendas { display: grid; gap: 7px; justify-items: start; }
.prod__rotulo {
  font-size: 9.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--tinta-3);
}

.faz {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 12px; border-radius: var(--raio-mini);
  background: var(--creme-0); border-left: 3px solid var(--verde-2);
}
.faz__corpo { flex: 1; min-width: 0; display: grid; gap: 2px; }
.faz__nome {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 13px; font-weight: 600;
}
.faz__dados { font-size: 11.5px; line-height: 1.5; color: var(--tinta-2); }
/* Região e altitude saem impressas no laudo: faltando, a ficha diz na hora —
   é mais barato descobrir aqui do que na hora de emitir o documento. */
.faz__falta { font-size: 11px; color: var(--atencao); font-weight: 550; }
.faz__acoes { display: flex; gap: 6px; flex: 0 0 auto; }
.faz--vazia {
  display: block; border-left-color: var(--linha-1);
  font-size: 12px; line-height: 1.5; color: var(--tinta-3);
}

/* ==========================================================================
   MERCADO — terminal, não planilha

   Densidade alta, número grande e tabular, e as duas cores reservadas fazendo
   todo o trabalho de leitura. Nada aqui aparece só no hover: em tela de toque
   o hover não existe, e um preço que só aparece com o mouse em cima seria um
   preço invisível para metade dos usuários.
   ========================================================================== */

.cotacoes {
  display: grid; gap: 14px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}

.cotacao {
  display: flex; flex-direction: column; gap: 9px;
  padding: 14px 15px 11px;
  background: var(--papel); border: 1px solid var(--linha-1); border-radius: var(--raio);
}
/* Cotação que não atualizou na última coleta: fica na tela, mas não se veste de
   dado fresco. A borda e o rodapé dizem o que ela é. */
.cotacao--velha { border-style: dashed; background: var(--creme-0); }
.cotacao--velha .cotacao__pe { color: var(--atencao); font-weight: 600; }

.cotacao__topo { display: flex; align-items: flex-start; gap: 10px; }
.cotacao__topo > div { flex: 1; min-width: 0; }
.cotacao__nome {
  display: block; font-size: 13px; font-weight: 650; color: var(--tinta-0);
}
.cotacao__detalhe {
  display: block; margin-top: 2px; font-size: 11px; line-height: 1.4; color: var(--tinta-3);
}
.cotacao__mini { flex: 0 0 auto; opacity: .95; }

.cotacao__preco { display: flex; align-items: baseline; gap: 6px; }
.cotacao__valor {
  font-size: 30px; font-weight: 600; letter-spacing: -.025em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cotacao__unidade { font-size: 11.5px; font-weight: 600; color: var(--tinta-2); }
.cotacao__var { font-size: 13px; font-variant-numeric: tabular-nums; margin-top: -3px; }

.cotacao__aviso {
  padding: 7px 9px; border-radius: var(--raio-mini);
  background: var(--atencao-fundo); color: var(--atencao); font-size: 11.5px; line-height: 1.45;
}

.cotacao__grade {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px 10px;
  padding-top: 9px; border-top: 1px solid var(--linha-2);
}
.cotacao__grade > div { min-width: 0; }
.cotacao__grade span {
  display: block; font-size: 9.5px; font-weight: 650; letter-spacing: .07em;
  text-transform: uppercase; color: var(--tinta-3);
}
.cotacao__grade strong { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

.cotacao__linha {
  display: flex; justify-content: space-between; align-items: baseline; gap: 2px 10px;
  flex-wrap: wrap;
  padding-top: 7px; border-top: 1px solid var(--linha-2); font-size: 12.5px;
}
.cotacao__linha span { color: var(--tinta-2); }
.cotacao__linha strong { font-weight: 600; font-variant-numeric: tabular-nums; }

.cotacao__pe {
  padding-top: 8px; border-top: 1px solid var(--linha-2);
  font-size: 10.5px; line-height: 1.45; color: var(--tinta-3);
}

/* ---- o café escolhido: preço e tendência ----
   Esta é a parte que o produtor lê primeiro. Número grande, unidade do
   contrato em cima e REAL POR SACA embaixo, que é como ele pensa. */

.cafe-cabeca {
  display: grid; gap: 13px; margin-bottom: 16px; padding: 15px;
  background: var(--papel); border: 1px solid var(--linha-1); border-radius: var(--raio);
}
.cafe-escolha { display: grid; gap: 5px; }
.cafe-escolha label {
  font-size: 10px; font-weight: 650; letter-spacing: .09em;
  text-transform: uppercase; color: var(--tinta-2);
}
.cafe-escolha select { width: 100%; height: 40px; font-size: 14.5px; font-weight: 550; }

.cafe-nome strong { display: block; font-size: 17px; font-weight: 650; letter-spacing: -.015em; }
.cafe-nome span { display: block; font-size: 12.5px; color: var(--tinta-2); margin-top: 2px; }

.cafe-numeros {
  display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  background: var(--linha-2); border: 1px solid var(--linha-1); border-radius: var(--raio);
  overflow: hidden;
}
.cafe-preco, .cafe-tendencia { padding: 14px 16px; background: var(--creme-1); }
.cafe-preco > span, .cafe-tendencia > span {
  display: block; font-size: 10px; font-weight: 650; letter-spacing: .09em;
  text-transform: uppercase; color: var(--tinta-2); margin-bottom: 4px;
}
.cafe-preco > strong {
  display: block; font-size: 34px; font-weight: 600; line-height: 1.05;
  letter-spacing: -.028em; font-variant-numeric: tabular-nums;
}
.cafe-preco > strong em {
  font-size: 13px; font-style: normal; font-weight: 600; color: var(--tinta-2);
  letter-spacing: 0; margin-left: 3px;
}
.cafe-reais {
  display: block; margin-top: 5px; font-size: 17px; font-weight: 650;
  color: var(--verde-1); font-variant-numeric: tabular-nums;
}
.cafe-preco > i, .cafe-tendencia > i {
  display: block; margin-top: 6px; font-size: 11px; font-style: normal;
  line-height: 1.45; color: var(--tinta-3);
}
.cafe-tendencia > strong {
  display: block; font-size: 30px; font-weight: 600; line-height: 1.05;
  letter-spacing: -.025em; font-variant-numeric: tabular-nums;
}
.cafe-tendencia > b { display: block; margin-top: 2px; font-size: 14px; font-weight: 650; }
.cafe-tendencia--sobe > strong, .cafe-tendencia--sobe > b { color: var(--alta); }
.cafe-tendencia--cai  > strong, .cafe-tendencia--cai  > b { color: var(--baixa); }
.cafe-tendencia--fraco > b { color: var(--tinta-3); }

/* ---- a régua do tempo: ontem, 1 mês, 3, 6, 1 ano ---- */

.regua {
  display: grid; gap: 1px; padding: 1px;
  grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
  background: var(--linha-2);
}
.regua__cela {
  display: flex; flex-direction: column; gap: 3px;
  padding: 13px 15px; background: var(--papel);
}
.regua__quando {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--tinta-1);
}
.regua__quando em {
  display: block; font-size: 9.5px; font-style: normal; font-weight: 600;
  letter-spacing: .04em; color: var(--tinta-3); margin-top: 1px;
}
.regua__preco {
  font-size: 20px; font-weight: 600; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; margin-top: 3px;
}
.regua__data { font-size: 11.5px; color: var(--tinta-2); }
.regua__apoio { font-size: 11px; color: var(--tinta-3); line-height: 1.4; }
.regua__var { margin-top: 3px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

.regua__cela--vazia { background: var(--creme-0); }
.regua__cela--vazia .regua__preco { font-size: 15px; color: var(--tinta-3); font-weight: 550; }
.regua__cela--vazia .btn { margin-top: 7px; align-self: flex-start; }

/* ---- gráficos ---- */

.barra-ferramentas--periodo { padding: 13px 15px 0; margin-bottom: 0; }

.grafico-caixa {
  padding: 10px 12px 4px;
  /* o dedo lê o gráfico na horizontal e continua rolando a página na vertical */
  touch-action: pan-y;
}
.gr-svg { display: block; width: 100%; height: auto; }
.gr-grade { stroke: var(--linha-2); stroke-width: 1; }
.gr-eixo { font-size: 10.5px; fill: var(--tinta-3); font-variant-numeric: tabular-nums; }
.gr-valor { font-size: 11px; font-weight: 600; fill: var(--tinta-1); font-variant-numeric: tabular-nums; }
.gr-apoio { font-size: 9.5px; fill: var(--tinta-3); }
.gr-cursor { stroke: var(--tinta-3); stroke-width: 1; stroke-dasharray: 3 3; }
.gr-marco { stroke: var(--cobre); stroke-width: 1; stroke-dasharray: 2 4; opacity: .55; }
.gr-marco-rotulo {
  font-size: 10px; font-weight: 650; fill: var(--cobre);
  letter-spacing: .04em; text-transform: uppercase;
}
.gr-extremo {
  font-size: 10.5px; font-weight: 600; fill: var(--tinta-1);
  font-variant-numeric: tabular-nums; paint-order: stroke;
  stroke: var(--papel); stroke-width: 3px; stroke-linejoin: round;
}
.gr-captura { cursor: crosshair; }
.gr-mini { display: block; }

.gr-vazio {
  display: grid; place-items: center; gap: 4px; text-align: center;
  min-height: 150px; padding: 22px 16px; margin: 4px 0 10px;
  background: var(--creme-0); border: 1px dashed var(--linha-1); border-radius: var(--raio);
}
.gr-vazio strong { font-size: 13px; font-weight: 600; color: var(--tinta-1); }
.gr-vazio span { font-size: 12px; color: var(--tinta-3); max-width: 44ch; }

.gr-legenda { padding: 0 15px 12px; margin: 0; }
.gr-chave {
  display: inline-block; width: 14px; height: 0; margin-right: 5px;
  vertical-align: middle; border-top: 2px solid var(--chave, var(--tinta-3));
}
.gr-chave--tracejada { border-top-style: dashed; --chave: var(--tinta-2); }

/* O quadro do gráfico NASCE preenchido com o último ponto. O cursor só troca o
   que está escrito nele — no computador passando o mouse, no celular
   arrastando o dedo. */
.quadro-leitura {
  display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  background: var(--linha-2); border-bottom: 1px solid var(--linha-2);
}
.quadro-leitura > div { padding: 9px 15px; background: var(--creme-1); }
.quadro-leitura span {
  display: block; font-size: 9.5px; font-weight: 650; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinta-2);
}
.quadro-leitura strong {
  display: block; margin-top: 2px; font-size: 16px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.quadro-leitura em { font-size: 11px; font-style: normal; color: var(--tinta-2); font-weight: 500; }

/* ---- leitura e alertas ---- */

.leitura { padding: 15px; }
.leitura p { margin: 0 0 9px; font-size: 13.5px; line-height: 1.6; color: var(--tinta-0); }
.leitura p:last-child { margin-bottom: 0; }
.leitura__nota {
  padding-top: 10px; border-top: 1px solid var(--linha-2);
  font-size: 11.5px !important; line-height: 1.5 !important; color: var(--tinta-3) !important;
}

.alertas-mercado { display: grid; gap: 1px; background: var(--linha-2); }
.alerta-mercado {
  display: flex; flex-direction: column; gap: 2px;
  padding: 11px 15px; background: var(--papel); border-left: 3px solid var(--tinta-3);
}
.alerta-mercado strong { font-size: 13px; font-weight: 650; }
.alerta-mercado span { font-size: 12.5px; line-height: 1.5; color: var(--tinta-2); }
.alerta-mercado--forte   { border-left-color: var(--bloqueio); background: var(--bloqueio-fundo); }
.alerta-mercado--atencao { border-left-color: var(--atencao); background: var(--atencao-fundo); }
.alerta-mercado--cambio  { border-left-color: var(--info); background: var(--info-fundo); }
.alerta-mercado--clima   { border-left-color: var(--bloqueio); background: var(--bloqueio-fundo); }
.alerta-mercado--fisico  { border-left-color: var(--cobre); background: var(--cobre-fraco); }

/* ---- conversor: a conta em degraus ---- */

.degraus { padding: 4px 15px 15px; }
.degrau {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 9px 0; border-bottom: 1px dashed var(--linha-1);
}
.degrau:last-child { border-bottom: 0; }
.degrau__rotulo { font-size: 12.5px; color: var(--tinta-1); }
.degrau__rotulo em {
  display: block; font-size: 11px; font-style: normal; color: var(--tinta-3); margin-top: 1px;
}
.degrau__valor {
  font-size: 15px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.degrau--ajuste .degrau__valor { font-size: 13.5px; }
.degrau--total {
  margin-top: 4px; padding: 11px 12px; border-bottom: 0; border-radius: var(--raio-mini);
  background: var(--verde-fraco);
}
.degrau--total .degrau__valor { font-size: 19px; color: var(--verde-1); }
.degrau--bloqueio { color: var(--bloqueio); }
.degrau--vazio { color: var(--tinta-3); font-size: 12.5px; border-bottom: 0; }
.degrau--comparacao {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 10px; padding: 11px 12px; border-bottom: 0; border-radius: var(--raio-mini);
  background: var(--creme-1); font-size: 13px;
}

/* ---- clima por região ---- */

.regioes {
  display: grid; gap: 14px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.regiao {
  display: flex; flex-direction: column; gap: 10px; padding: 13px 15px;
  background: var(--papel); border: 1px solid var(--linha-1);
  border-left: 3px solid var(--verde-2); border-radius: var(--raio);
}
.regiao--atencao { border-left-color: var(--atencao); }
.regiao--risco   { border-left-color: var(--bloqueio); }
.regiao > header { display: flex; align-items: flex-start; gap: 10px; }
.regiao > header > div { flex: 1; min-width: 0; }
.regiao > header strong { display: block; font-size: 13px; font-weight: 650; }
.regiao > header span { display: block; font-size: 11px; margin-top: 1px; }

.regiao__agora {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 10px;
  padding: 10px 0; border-top: 1px solid var(--linha-2); border-bottom: 1px solid var(--linha-2);
}
.regiao__agora span {
  display: block; font-size: 9.5px; font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tinta-3);
}
.regiao__agora strong { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* A CIDADE DE QUEM ESTÁ OLHANDO vem primeiro e é marcada — as praças de
   referência são todas iguais entre si, e essa não é uma delas. O cobre já é o
   acento da casa para "isto é seu": é o mesmo da tira de quem está espiando. */
.regiao--minha {
  border-left-color: var(--cobre);
  box-shadow: 0 0 0 1px var(--cobre-fraco) inset;
}
.regiao--minha.regiao--atencao { border-left-color: var(--atencao); }
.regiao--minha.regiao--risco   { border-left-color: var(--bloqueio); }

/* A TIRA DE PREVISÃO — sete colunas, uma por dia da semana à frente.

   O que manda na largura aqui não é a tela, é o CARTÃO: as praças ficam lado a
   lado numa grade e o cartão tem cerca de 300 px no computador também. Sete
   colunas ali dão os ~40 px que "25°/14°" precisa para caber sem um número
   subir por cima do outro — e no telefone o cartão ocupa a fila inteira, então
   sobra ainda mais. Sem quebra de linha: a semana é uma fila só. */
.chuva { display: flex; gap: 4px; align-items: flex-end; }
.chuva__dia {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0;
}
.chuva__mm { font-size: 10px; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.chuva__barra {
  display: flex; align-items: flex-end; justify-content: center;
  width: 100%; height: 40px; background: var(--creme-1); border-radius: 3px; overflow: hidden;
}
.chuva__barra i { display: block; width: 100%; background: var(--info); opacity: .75; }

/* A TEMPERATURA COMO FAIXA, não como texto solto.

   Cada dia é um traço que vai da mínima à máxima, todos na mesma escala do
   trecho — é o que faz "a semana esquenta" aparecer sem ler catorze pares de
   números. O cobre é a cor de calor da casa, e não é verde nem vermelho: esses
   dois estão reservados para alta e baixa de preço em todo o sistema. */
.chuva__termo {
  position: relative; width: 100%; height: 22px;
  background: var(--creme-1); border-radius: 3px;
}
.chuva__termo i {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 3px; min-height: 3px; border-radius: 2px;
  background: var(--cobre); opacity: .85;
}
.chuva__nome { font-size: 10px; color: var(--tinta-3); text-transform: capitalize; }
.chuva__temp { font-size: 10px; color: var(--tinta-2); font-variant-numeric: tabular-nums; }

.regiao__achados { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.achado { font-size: 12px; line-height: 1.5; padding-left: 15px; position: relative; color: var(--tinta-2); }
.achado::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--verde-2);
}
.achado--atencao::before { background: var(--atencao); }
.achado--risco::before { background: var(--bloqueio); }
.achado--risco { color: var(--tinta-1); }

@media screen and (max-width: 900px) {
  .cotacoes, .regioes { grid-template-columns: 1fr; }
  .cotacao__valor { font-size: 27px; }
  .cafe-numeros { grid-template-columns: 1fr; }
  .cafe-preco > strong { font-size: 30px; }
  .cafe-tendencia > strong { font-size: 26px; }
  .cafe-escolha select { height: 44px; font-size: 16px; }
  /* Duas janelas por fila: cinco espremidas em 390 px viram borrão, e a régua é
     justamente o que o produtor abre o telefone para ver. */
  .regua { grid-template-columns: repeat(2, 1fr); }
  .regua__preco { font-size: 18px; }
  .barra-ferramentas--periodo { padding: 12px 13px 0; }
  .quadro-leitura { grid-template-columns: repeat(2, 1fr); }
  .quadro-leitura > div { padding: 8px 13px; }
  .quadro-leitura strong { font-size: 15px; }
  .grafico-caixa { padding: 8px 6px 2px; }
  .gr-legenda { padding: 0 13px 10px; }
  .degraus { padding: 4px 13px 13px; }
  .degrau { gap: 10px; }
  .degrau__valor { font-size: 14px; }
  .degrau--total .degrau__valor { font-size: 17px; }
  .chuva__barra { height: 32px; }
  .chuva__termo { height: 18px; }
  .chuva__mm, .chuva__nome, .chuva__temp { font-size: 9px; }
}

@media screen and (max-width: 420px) {
  /* Três colunas de 9,5 px espremidas em 320 px viram borrão: melhor duas. */
  .cotacao__grade, .regiao__agora { grid-template-columns: repeat(2, 1fr); }
  /* A régua fica em duas colunas mesmo aqui: cinco celas empilhadas viram uma
     rolagem que ninguém termina, e duas de 155 px ainda cabem o preço inteiro. */
  .regua__cela { padding: 12px 11px; }
  .regua__preco { font-size: 16.5px; }
}

/* ==========================================================================
   O PRIMEIRO CONTATO — o arábica na faixa inteira, o trio embaixo e as duas
   portas de venda

   A tela de Mercado responde uma pergunta antes de todas: quanto vale a saca
   hoje. Por isso o arábica deixou a fila de três cartões iguais e passou a
   ocupar a largura toda, com o REAL POR SACA em banner ao lado do número da
   bolsa — ele estava no rodapé do cartão, em letra de 12 px, que é onde um
   número importante vai para morrer.

   O VERDE DO BANNER É O DA MARCA, NÃO O DE ALTA. `--alta` e `--baixa` estão
   reservadas para variação de preço, sempre; um banner fixo em verde de alta
   diria "subiu" também nos dias de queda. O banner usa `--verde-1`, o mesmo
   verde da barra lateral e dos botões. Quem diz se subiu ou caiu é o número
   colorido logo acima — e só ele.
   ========================================================================== */

.destaque {
  display: grid; gap: 12px;
  margin-bottom: 14px; padding: 17px 19px 13px;
  background: var(--papel);
  border: 1px solid var(--linha-1); border-left: 4px solid var(--verde-1);
  border-radius: var(--raio);
}
/* Mesma regra do cartão: número que não atualizou não se veste de dado fresco */
.destaque--velha { border-style: dashed; border-left-color: var(--atencao); background: var(--creme-0); }

.destaque__topo { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.destaque__quem { flex: 1 1 260px; min-width: 0; }
.destaque__etiqueta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.destaque__fonte {
  font-size: 10.5px; font-weight: 650; letter-spacing: .07em;
  text-transform: uppercase; color: var(--tinta-3);
}
.destaque__nome {
  margin: 6px 0 0; font-size: 19px; font-weight: 650; letter-spacing: -.015em;
}
.destaque__detalhe { display: block; margin-top: 2px; font-size: 12px; color: var(--tinta-2); }
.destaque__mini { flex: 0 0 auto; display: grid; justify-items: end; gap: 3px; }
.destaque__miniRotulo { font-size: 10px; color: var(--tinta-3); }

/* O banner da saca PUXADO PARA A ESQUERDA (pedido do Lucas, 12/09/2026): ele
   ficava encostado na borda direita, com um vão morto de uns 300 px entre o
   preço e ele — e os dois números que a pessoa compara (o da bolsa e o da saca
   dela) estavam nas pontas opostas da faixa. Agora a coluna verde é quase do
   tamanho da do preço, então ela começa no meio e os dois ficam a uma olhada de
   distância. `0.78fr` em vez de largura fixa para a proporção se manter em
   qualquer monitor. */
.destaque__corpo {
  display: grid; gap: 16px;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.78fr);
  align-items: stretch;
}
.destaque__preco { display: flex; flex-direction: column; gap: 5px; }
.destaque__numero { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.destaque__valor {
  font-size: 44px; font-weight: 620; line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.destaque__unidade { font-size: 13px; font-weight: 650; color: var(--tinta-2); }
.destaque__var { font-size: 14.5px; font-variant-numeric: tabular-nums; }
.destaque__historia { font-size: 12px; color: var(--tinta-2); font-variant-numeric: tabular-nums; }

/* ---- o banner da saca ---- */
.saca {
  position: relative;
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  padding: 16px 19px;
  background: var(--verde-1); color: #fff; border-radius: var(--raio);
}
/* Um filete de cobre na aresta que encara o preço: amarra o bloco ao número que
   ele traduz, em vez de deixar os dois como duas caixas soltas. */
.saca::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--cobre);
}
.saca__rotulo {
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .76);
}
.saca__valor {
  margin-top: 4px; font-size: 34px; font-weight: 650; line-height: 1.02;
  letter-spacing: -.028em; font-variant-numeric: tabular-nums;
}
.saca__unidade { font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, .86); }
.saca__apoio {
  margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: 10.5px; line-height: 1.5; color: rgba(255, 255, 255, .72);
}
/* Sem câmbio não há conversão — e conversão faltando não se veste de verde. */
.saca--sem {
  background: var(--creme-1); color: var(--tinta-1);
  box-shadow: inset 0 0 0 1px var(--linha-1);
}
.saca--sem .saca__rotulo { color: var(--tinta-3); }
.saca--sem .saca__valor { font-size: 21px; color: var(--atencao); }
.saca--sem .saca__apoio { border-top-color: var(--linha-1); color: var(--tinta-2); }

/* ---- a frase do dia ---- */
.destaque__nota {
  padding: 10px 13px; border-radius: var(--raio-mini);
  background: var(--creme-1); color: var(--tinta-1);
  font-size: 12.5px; line-height: 1.55;
}
/* Aqui o verde PODE ser o de alta: a frase fala de variação, que é o único
   assunto que essas duas cores têm permissão de colorir. */
.destaque__nota--alta { background: var(--alta-fundo); }
.destaque__nota--alta strong { color: var(--alta); }
.destaque__nota--atencao { background: var(--atencao-fundo); color: var(--tinta-1); }
.destaque__nota--atencao strong { color: var(--atencao); }

/* `margin-top: auto` cola a grade no pé da coluna: o preço fica no alto, na
   mesma linha do rótulo do banner verde, e os dois blocos terminam juntos. */
.destaque__grade {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px 14px;
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--linha-2);
}
.destaque__grade > div { min-width: 0; }
.destaque__grade span {
  display: block; font-size: 9.5px; font-weight: 650; letter-spacing: .07em;
  text-transform: uppercase; color: var(--tinta-3);
}
.destaque__grade strong { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

.destaque__pe {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding-top: 9px; border-top: 1px solid var(--linha-2);
  font-size: 10.5px; line-height: 1.45; color: var(--tinta-3);
}
.destaque__frescor { font-weight: 650; color: var(--verde-2); white-space: nowrap; }
.destaque--velha .destaque__frescor { color: var(--atencao); }

/* ---- o trio: conilon, dólar e a bolsa ---- */
.cotacoes--trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cotacao__aviso--calmo {
  background: var(--creme-1); color: var(--tinta-2); font-size: 11px;
}

/* ---- fonte caída: aviso não mora no rodapé ---- */
.tira-falha {
  margin-bottom: 13px; padding: 10px 13px;
  border-left: 3px solid var(--baixa); border-radius: var(--raio-mini);
  background: var(--baixa-fundo); color: var(--tinta-1);
  font-size: 12.5px; line-height: 1.5;
}
.tira-falha strong { color: var(--baixa); }

/* ==========================================================================
   AS DUAS PORTAS DE VENDA

   São o destino da tela inteira, e por isso são âncoras de verdade — não botão
   que abre janela. O toque abre a conversa com a mensagem já escrita.

   O cobre da marca (#a85a28) reprova em contraste com letra branca; aqui entra
   `--cobre-forte`, que é o mesmo cobre com peso suficiente para carregar texto
   branco em superfície grande.
   ========================================================================== */

.venda { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin: 2px 0 16px; }

.venda__btn {
  display: flex; align-items: center; gap: 14px;
  min-height: 68px; padding: 13px 18px;
  border-radius: var(--raio); text-decoration: none; color: #fff;
  box-shadow: var(--sombra-flutua);
  transition: transform .12s ease, filter .12s ease;
}
.venda__btn--fisico { background: var(--cobre-forte); }
.venda__btn--futuro { background: var(--verde-1); }
.venda__texto { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.venda__acao { font-size: 15px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.venda__apoio { font-size: 11.5px; line-height: 1.4; color: rgba(255, 255, 255, .84); }
.venda__seta { flex: 0 0 auto; font-size: 21px; line-height: 1; opacity: .9; }

/* O toque também tem resposta: `:hover` sozinho deixaria metade dos usuários
   sem retorno nenhum ao apertar. */
.venda__btn:active { transform: translateY(1px); filter: brightness(.93); }
@media (hover: hover) {
  .venda__btn:hover { filter: brightness(1.08); }
}
.venda--sem {
  display: grid; gap: 10px; justify-items: start;
  margin: 2px 0 16px; padding: 13px 15px;
  background: var(--atencao-fundo); border-radius: var(--raio);
}
.venda--sem .texto-apoio { margin: 0; }

/* ==========================================================================
   O ESPAÇO DE BANNER — largura inteira, do monitor ao telefone

   REFEITO EM 13/09/2026 (pedido do Lucas): o banner passou a ocupar a LARGURA
   INTEIRA da tela nas duas telas. Sangra até as bordas da área principal com
   `--pad-lado` em negativo, a mesma técnica da faixa de patrocinadores — e como
   é a mesma medida que o conteúdo respira, ele continua colado nas bordas
   quando esse respiro encolhe no celular.

   A ALTURA É A DE SEMPRE; o que passou a crescer é a largura (pedido do Lucas).
   `min(480px, 52vh)` é a mesma fórmula de antes — o `52vh` cobre a tela baixa,
   onde 480 px fixos comeriam metade do monitor de um laptop:

   | tela                  | altura            | proporção que sobra |
   |-----------------------|-------------------|---------------------|
   | monitor (≥ 1200 px)   | 480 px (52vh)     | ~2,5:1 em 1440      |
   | laptop e tablet       | 480 px (52vh)     | ~1,6:1 em 760       |
   | telefone (≤ 620 px)   | 3:2 da largura    | 260 px em 390       |

   No telefone a altura continua saindo da PROPORÇÃO, como antes: lá a largura
   da tela já mandava, e travar 480 px daria um banner mais alto que meia tela.

   A ARTE É UMA SÓ — 2000 × 1000 (2:1) — e nunca distorce: `cover` preenche
   mantendo a proporção. Ela fica no meio do caminho entre a caixa larga do
   monitor e a caixa quase quadrada do telefone, então o corte é pequeno e muda
   de lado: topo e base no monitor, pontas no telefone. Daí a regra da arte, que
   cabe numa frase: o essencial mora no MIOLO.
   ========================================================================== */

.banner {
  margin: 0 calc(-1 * var(--pad-lado)) 18px;
  height: min(480px, 52vh);
  overflow: hidden;
  background: var(--creme-1);
  border-block: 1px solid var(--linha-1);
}
/* `cover` e não `contain`: sangrado até as bordas, o `contain` deixaria a arte
   boiando entre duas tarjas de creme do tamanho da tela. */
.banner__arte {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}

/* O ESPAÇO VAZIO TEM O TAMANHO DO CHEIO (decisão do Lucas, 13/09/2026): ele
   herda a mesma altura da regra acima, e o aviso fica centrado dentro dela.

   A razão é comercial, não estética: este espaço é um produto à venda, e quem
   olha precisa ver QUANTO é. Reduzido à altura do texto, ele virava uma tarja
   fina que não parecia caber banner nenhum — o convite dizia uma coisa e o
   desenho mostrava outra. Cheio ou vazio, o espaço é o mesmo. */
.banner--vazio {
  display: grid; place-items: center; padding: 26px var(--pad-lado);
  background: var(--creme-0);
  /* tracejado só em cima e embaixo: o espaço encosta nas bordas da tela, e
     borda lateral pontilhada ali vira sujeira, não moldura */
  border-block: 2px dashed var(--linha-1);
}
.banner__aviso { display: grid; gap: 7px; justify-items: center; max-width: 460px; text-align: center; }
.banner__aviso strong { font-size: 14px; color: var(--tinta-1); }
.banner__aviso span { font-size: 12.5px; line-height: 1.55; color: var(--tinta-2); }
/* Dois botões: um para quem quer comprar o espaço, outro para quem administra. */
.banner__acoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.banner__acoes .btn { text-decoration: none; }

@media (max-width: 620px) {
  /* no telefone quem manda é a proporção, como sempre foi: 480 px ali seriam
     mais de meia tela de banner */
  .banner { height: auto; aspect-ratio: 3 / 2; }
  /* no telefone o aviso encolhe junto: três linhas de texto num espaço de
     195 px não cabem sem espremer os botões contra as bordas */
  .banner--vazio { padding: 18px var(--pad-lado); }
  .banner__aviso { gap: 5px; }
  .banner__aviso span { font-size: 12px; }
}

/* ==========================================================================
   A FAIXA DE PATROCINADORES — no alto do conteúdo, sem invadir o menu

   Ela sangra até as bordas da área principal usando `--pad-lado`/`--pad-topo` em
   negativo: é a mesma medida que o conteúdo respira, então a faixa continua
   colada nas bordas quando esse respiro muda no celular.

   AS SETAS SÃO BOTÕES DE VERDADE E NASCEM VISÍVEIS. Carrossel que só se move
   com o mouse em cima não se move no telefone, onde `:hover` nunca dispara — e
   o trilho também arrasta com o dedo.
   ========================================================================== */

.patrocinio { margin: calc(-1 * var(--pad-topo)) calc(-1 * var(--pad-lado)) 18px; }

/* O FUNDO DA FAIXA É ESCURO, e isso é decisão de identidade, não de gosto: logo
   de marca chega quase sempre em versão CLARA (branca), feita para fundo escuro
   — as quatro que a Coffice recebeu são assim. Numa faixa branca elas
   desapareceriam, e a saída seria pedir uma versão nova de cada marca.
   Aqui a faixa usa `--verde-0`, o mesmo verde da barra lateral: no monitor as
   duas se encontram e o topo do sistema vira uma peça só. */
.patrocinio__faixa {
  position: relative; display: flex; align-items: stretch;
  background: var(--verde-0);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .09);
}

/* SEM `scroll-behavior: smooth` e SEM `scroll-snap` no CSS, de propósito: o
   desfile escreve `scrollLeft` a cada quadro, e qualquer um dos dois brigaria
   com isso — o smooth transformaria cada pixel numa animação própria, e o snap
   puxaria o trilho de volta para o logo mais próximo. As setas pedem o
   deslizamento explicitamente, no `scrollBy({ behavior: 'smooth' })`. */
/* O respiro cresceu junto com o logo: com 84 px de arte e apenas 20 px de gap,
   "Mendes Grupo Empresarial" encostava em "Expert. Expansão" e as duas marcas
   liam-se como uma só. */
.patrocinio__trilho {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 44px;
  padding: 11px 26px;
  overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.patrocinio__trilho::-webkit-scrollbar { display: none; }
/* Poucos logos não precisam de desfile: o trilho centraliza e as setas somem. */
.patrocinio__faixa--curta .patrocinio__trilho { justify-content: center; padding: 11px 16px; }

/* A altura da faixa é ditada pelo LOGO MAIS VERTICAL, não pelo mais largo.
   Marca com símbolo em cima e assinatura embaixo — "Mendes / Marketing em Geral",
   "Expert / Capacitação" — é quase quadrada: limitada pela altura, ela encolhe
   também na largura, e a linha de assinatura vira um borrão. 66 px de arte é o
   ponto em que essas artes se leem sem a faixa virar um segundo cabeçalho. */
.patrocinio__item {
  flex: 0 0 auto;
  display: grid; place-items: center; height: 82px; padding: 0 6px;
}
.patrocinio__item img {
  display: block; max-height: 68px; max-width: 190px;
  object-fit: contain; -webkit-user-drag: none; user-select: none;
}
/* O logo que leva a um perfil é âncora. O toque tem resposta própria: em tela
   sem mouse o `:hover` nunca dispara, e sem isto o clique não daria retorno
   nenhum. O logo sem link não ganha cursor de mão nem reação. */
.patrocinio__link {
  display: grid; place-items: center; border-radius: var(--raio-mini);
  padding: 4px 6px; transition: transform .14s ease, background-color .14s ease;
}
.patrocinio__link:active { transform: scale(.96); background: rgba(255, 255, 255, .1); }
@media (hover: hover) {
  .patrocinio__link:hover { background: rgba(255, 255, 255, .08); }
}
.patrocinio__link:focus-visible { outline: 2px solid var(--cobre); outline-offset: 1px; }

/* ---- A VAGA: "ANUNCIE AQUI" DESFILANDO JUNTO COM QUEM JÁ PAGA ----

   Quem abre o sistema vê quatro logos e entende que ali cabe marca — não que
   cabe A DELE. A vaga diz isso com todas as letras, e entra no trilho como mais
   um item em vez de ficar parada numa ponta: a faixa gira, então o convite passa
   na frente dos olhos sozinho.

   Moldura tracejada de propósito: é a convenção de espaço livre, e separa a vaga
   dos patrocinadores de verdade sem precisar de aviso escrito. */
.patrocinio__vaga {
  /* `align-content` explícito porque a vaga tem ALTURA DADA — a mesma do item,
     para a moldura bater com a linha dos logos. Sem isto as duas linhas do grid
     esticam pela altura inteira e o convite se parte em duas metades soltas, uma
     no topo e outra no pé da moldura. */
  display: grid; place-items: center; align-content: center; gap: 2px;
  height: 100%; min-width: 152px; padding: 0 18px;
  border: 1px dashed rgba(255, 255, 255, .34); border-radius: var(--raio-mini);
  text-align: center; text-decoration: none;
  transition: border-color .14s ease, background-color .14s ease;
}
.patrocinio__vaga strong {
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cobre-claro);
}
.patrocinio__vaga span { font-size: 10.5px; color: rgba(255, 255, 255, .66); }
/* A reação é só da vaga que É LINK — sem WhatsApp comercial em Ajustes ela nasce
   como texto, e texto não se acende ao toque. O `:active` cobre a tela sem
   mouse, onde o `:hover` nunca dispara. */
a.patrocinio__vaga:active,
a.patrocinio__vaga:focus-visible {
  background: rgba(255, 255, 255, .1); border-color: var(--cobre-claro);
}
a.patrocinio__vaga:focus-visible { outline: 2px solid var(--cobre); outline-offset: 1px; }
@media (hover: hover) {
  a.patrocinio__vaga:hover {
    background: rgba(255, 255, 255, .08); border-color: var(--cobre-claro);
  }
}

/* AS SETAS NÃO SÃO BLOCOS, SÃO BORDAS QUE SE DISSOLVEM.

   Em cobre chapado elas cortavam a faixa em três pedaços — dois tijolos marrons
   e o desfile no meio — e o logo ENTRAVA e SAÍA com um corte seco na beirada
   deles. Agora o fundo é o próprio verde da faixa esmaecendo para transparente:
   a faixa fica inteira de ponta a ponta, e o logo aparece e some diluído, que é
   o que faz o giro parecer não ter fim.

   O ícone é que carrega o cobre, na versão clara, para continuar visível e
   apertável sobre o verde. */
.patrocinio__seta {
  position: absolute; top: 0; bottom: 0; z-index: 2;
  width: 58px; display: grid; place-items: center;
  border: 0; padding: 0; cursor: pointer;
  color: var(--cobre-claro);
  background: linear-gradient(to right,
              rgb(var(--verde-0-rgb)) 34%, rgba(var(--verde-0-rgb), 0) 100%);
}
.patrocinio__seta svg { width: 17px; height: 17px; }
.patrocinio__seta--esq { left: 0; justify-items: start; padding-left: 9px; }
.patrocinio__seta--dir {
  right: 0; justify-items: end; padding-right: 9px;
  background: linear-gradient(to left,
              rgb(var(--verde-0-rgb)) 34%, rgba(var(--verde-0-rgb), 0) 100%);
}
/* `display: grid` ganha do atributo `hidden` — sem isto, a seta escondida
   continuaria desenhada na tela, e ela é escondida justamente quando não tem
   para onde rolar. */
.patrocinio__seta[hidden] { display: none; }
.patrocinio__seta:active { color: #fff; }
@media (hover: hover) { .patrocinio__seta:hover { color: #fff; } }

.patrocinio__vazio {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  padding: 9px var(--pad-lado);
  background: var(--verde-0); color: rgba(255, 255, 255, .8);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .09);
}
.patrocinio__rotulo {
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255, 255, 255, .55);
}
.patrocinio__convite { flex: 1 1 auto; font-size: 12px; color: rgba(255, 255, 255, .72); }
/* O botão dentro da faixa escura veste a faixa, não o fundo creme da tela. O
   "Quero anunciar" é âncora, e âncora chega sublinhada do navegador. */
.patrocinio__vazio .btn {
  background: transparent; color: #fff; border-color: rgba(255, 255, 255, .34);
  text-decoration: none;
}
.patrocinio__vazio .btn:active { background: rgba(255, 255, 255, .14); }
@media (hover: hover) {
  .patrocinio__vazio .btn:hover {
    background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .5);
  }
}

/* ---- escolher a arte, dentro do modal ---- */
.escolha-arte {
  display: grid; gap: 15px; grid-template-columns: 196px minmax(0, 1fr);
  align-items: start; margin-bottom: 16px;
}
.escolha-arte--coluna { grid-template-columns: minmax(0, 1fr); }
.escolha-arte__lado { display: grid; gap: 9px; align-content: start; min-width: 0; }
.escolha-arte__lado .texto-apoio { margin: 0; }
.escolha-arte__lado .botoes-linha { margin-top: 0; }
.escolha-arte__previa {
  display: grid; place-items: center; min-height: 92px; padding: 10px;
  background: var(--papel); border: 1px solid var(--linha-1); border-radius: var(--raio-mini);
}
.escolha-arte__previa img { max-width: 100%; max-height: 190px; object-fit: contain; display: block; }
/* A prévia do logo mostra o FUNDO REAL da faixa. Prévia sobre branco mentiria
   sobre o resultado — é justamente onde um logo claro parece sumido e um logo
   com fundo preto parece bem resolvido. */
.escolha-arte__previa--logo {
  background: var(--verde-0); border-color: var(--verde-0); min-height: 120px;
}
/* Precisa dos dois seletores: `--vazia` vem depois no arquivo e pintaria de
   creme o que aqui é verde. */
.escolha-arte__previa--logo.escolha-arte__previa--vazia {
  background: var(--verde-0); color: rgba(255, 255, 255, .6);
}
/* A prévia mostra o que a tela vai mostrar: mesma proporção do espaço no
   monitor (7:2) e o mesmo `cover`. Prévia em outro formato é prévia que mente. */
.escolha-arte__previa--banner { aspect-ratio: 7 / 2; padding: 0; overflow: hidden; }
.escolha-arte__previa--banner img {
  width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: center;
}
.escolha-arte__previa--vazia {
  background: var(--creme-1); color: var(--tinta-3); font-size: 12px; text-align: center;
}

/* ---- a vitrine dentro de Ajustes ---- */
/* A miniatura também mostra o fundo da faixa: logo claro sobre a tabela branca
   pareceria uma célula vazia. */
.logo-mini {
  display: inline-grid; place-items: center; padding: 5px 9px;
  background: var(--verde-0); border-radius: var(--raio-mini);
}
.logo-mini img { display: block; max-height: 26px; max-width: 104px; object-fit: contain; }
.banner-previa {
  width: 100%; max-width: 560px; aspect-ratio: 7 / 2; overflow: hidden;
  border: 1px solid var(--linha-1); border-radius: var(--raio-mini); background: var(--creme-1);
}
.banner-previa img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;
}

/* ---- as duas telas ---- */

@media screen and (max-width: 1080px) {
  /* Três cartões de mercado em 1000 px dão 300 px cada e a grade de seis
     números dentro deles começa a quebrar. Duas filas leem melhor. */
  .cotacoes--trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 900px) {
  .cotacoes--trio { grid-template-columns: 1fr; }

  /* O banner da saca desce para BAIXO do preço, inteiro — espremer os dois lado
     a lado em 390 px deixaria os dois ilegíveis. */
  .destaque { padding: 15px 14px 12px; }
  .destaque__valor { font-size: 38px; }
  .saca__valor { font-size: 28px; }
  .destaque__pe { font-size: 10px; }

  /* EMPILHADO, A ORDEM MUDA — não é só a largura que encolhe.
     No monitor a grade enche a coluna do preço para o banner verde encostar
     nele. Numa fila só isso jogaria a grade NA FRENTE do valor da saca, e quem
     abre no telefone teria de rolar seis números para chegar no que veio ver.
     `display: contents` dissolve a coluna do preço e devolve os filhos ao grid,
     onde `order` põe a saca logo abaixo da variação e a grade por último. */
  .destaque__corpo { grid-template-columns: 1fr; gap: 7px; }
  .destaque__preco { display: contents; }
  .destaque__numero  { order: 1; }
  .destaque__var     { order: 2; }
  .destaque__historia { order: 3; }
  .saca              { order: 4; margin-top: 5px; }
  .destaque__grade   { order: 5; margin-top: 5px; }

  /* Um botão por fila: dois de 180 px partiriam "VENDER MEU CAFÉ AGORA NO
     FÍSICO" em quatro linhas de duas palavras. */
  .venda { grid-template-columns: 1fr; }
  .venda__btn { min-height: 62px; }

  .patrocinio__trilho { gap: 26px; padding: 8px 18px; }
  /* No telefone a faixa cede altura, mas não tanto que a assinatura da marca
     desapareça: 54 px de arte contra 68 no monitor. */
  .patrocinio__item { height: 66px; }
  .patrocinio__item img { max-height: 54px; max-width: 140px; }
  .patrocinio__vaga { min-width: 128px; padding: 0 13px; }
  .patrocinio__vaga strong { font-size: 11px; letter-spacing: .08em; }
  .patrocinio__vaga span { font-size: 9.5px; }
  .patrocinio__seta { width: 44px; }
  .patrocinio__seta--esq { padding-left: 6px; }
  .patrocinio__seta--dir { padding-right: 6px; }

  /* O espaço reservado se explica em três linhas no telefone, e três linhas de
     aviso no alto de TODA tela roubam o lugar do trabalho. Aqui ele encolhe
     para uma linha: o rótulo e o botão bastam para dizer o que é e o que fazer,
     e a frase inteira continua no PC. */
  .patrocinio__vazio { flex-wrap: nowrap; padding: 6px var(--pad-lado); }
  .patrocinio__convite { display: none; }
  /* Com o "Quero anunciar" no ar são DOIS botões, e 390 px não seguram os dois
     mais o rótulo: "ANUNCIE AQUI" chegava cortado ao meio. O rótulo sai, porque
     é o botão que já diz a mesma frase — e ele só sai quando o botão existe
     (sem WhatsApp comercial sobra só "Cadastrar logos", e aí o rótulo é o único
     contexto que resta). */
  .patrocinio__vazio:has(a.btn) .patrocinio__rotulo { display: none; }

  .escolha-arte { grid-template-columns: minmax(0, 1fr); }

  /* ---- cadastros no telefone ---- */
  .prod { padding: 13px 14px; }
  .prod__acoes { width: 100%; }
  .prod__acoes .btn { flex: 1; }
  /* Quatro números em 390 px dão 90 px cada e "1.200" encosta no vizinho. */
  .prod__numeros { grid-template-columns: repeat(2, 1fr); }
  /* A fazenda empilha: nome, dados e botões um sob o outro. Espremer os botões
     ao lado de "Três Pontas/MG · 980 m · 12 ha · Catuaí, Mundo Novo" deixaria a
     linha de dados com 100 px e o texto ilegível. */
  .faz { flex-direction: column; align-items: stretch; gap: 9px; }
  .faz__acoes .btn { flex: 1; }
}

@media screen and (max-width: 420px) {
  .destaque__valor { font-size: 33px; }
  .destaque__grade { grid-template-columns: repeat(2, 1fr); }
  .saca { padding: 12px 14px; }
  .venda__acao { font-size: 14px; }
}

/* ==========================================================================
   RESPONSIVO — o classificador está no armazém, com o telefone na mão
   ========================================================================== */

@media screen and (max-width: 900px) {
  /* O respiro muda uma vez, aqui — e a faixa de patrocinadores, que sangra por
     esta mesma medida, acompanha sozinha. */
  :root { --pad-lado: 13px; --pad-topo: 16px; }

  .topo { display: flex; }
  .lateral { transform: translateX(-100%); transition: transform .2s ease; }
  body.menu-aberto .lateral { transform: none; }
  body.menu-aberto .cortina { display: block; }
  .principal { margin-left: 0; padding-bottom: 70px; }

  .cabecalho { padding-bottom: 12px; margin-bottom: 14px; }
  .cabecalho h1 { font-size: 18px; }
  .cabecalho__acoes { width: 100%; }
  .cabecalho__acoes .btn { flex: 1; }

  .indicadores { grid-template-columns: repeat(2, 1fr); }
  .indicador__valor { font-size: 19px; }

  /* 16px evita o zoom automático do iOS ao focar um campo */
  .campo input, .campo select, .campo textarea,
  .busca, .filtro-select, .entrada-mini { font-size: 16px; }
  .campo input, .campo select { height: 42px; }
  .busca, .filtro-select { height: 40px; }
  .entrada-mini { height: 38px; width: 88px; }
  .btn { height: 38px; padding: 0 15px; }
  .btn--mini { height: 32px; font-size: 13px; }

  .modal-fundo { padding: 0; align-items: stretch; }
  .modal { max-width: none; max-height: none; min-height: 100%; border-radius: 0; }
  .modal__corpo { flex: 1; }
  .modal__rodape { position: sticky; bottom: 0; }
  .modal__rodape .btn { flex: 1 1 auto; }

  /* Tabela vira lista: encolher coluna até a letra sumir conta como erro. */
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
  .tabela thead, .tabela .so-desktop { display: none; }
  .tabela-rolagem { overflow-x: visible; }
  .tabela tr { padding: 12px 13px; border-bottom: 1px solid var(--linha-2); }
  .tabela tbody tr:last-child { border-bottom: 0; }
  .tabela td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 3px 0; border: 0; text-align: right;
  }
  .tabela td::before {
    content: attr(data-rotulo); flex: 0 0 auto;
    font-size: 10.5px; font-weight: 650; letter-spacing: .06em;
    text-transform: uppercase; color: var(--tinta-3); text-align: left;
  }
  .tabela td[data-rotulo=""]::before { content: none; }
  .tabela td:first-child { display: block; text-align: left; margin-bottom: 5px; }
  .tabela td:first-child::before { display: none; }
  .tabela td .sub { text-align: left; }
  .tabela td:last-child { justify-content: flex-end; padding-top: 9px; }

  .ficha__linha { flex-direction: column; gap: 1px; }
  .ficha__linha > span { flex: none; }

  .avisos { right: 12px; left: 12px; bottom: 12px; align-items: stretch; }
  .aviso { max-width: none; }
}

@media screen and (max-width: 480px) {
  .indicadores { grid-template-columns: 1fr; }
  .alternador { width: 100%; }
  /* 28px de altura é alvo de ponteiro, não de polegar — a Apple pede 44 e o
     Google 48. A aba é o controle mais tocado do sistema: é por ela que se
     anda dentro de Mercado, Amostras e Laudos. O padding horizontal fica como
     está; quem cresce é só a altura. */
  .alternador__btn { flex: 1; min-height: 44px; }
}

/* ==========================================================================
   A FOLHA — o laudo de avaliação sensorial que o cliente recebe

   Isto não é tela: é PAPEL. As regras aqui existem para que a mesma marcação
   sirva ao monitor, ao celular e ao PDF sem virar três layouts diferentes.

   · LARGURA DE PAPEL, NÃO DE JANELA. A folha tem 820 px e para de crescer.
     Documento que acompanha monitor de 27" vira linha de 190 caracteres, que
     ninguém lê.
   · NO CELULAR MUDA O ARRANJO, NÃO SÓ O TAMANHO. As duas colunas (notas +
     escala, comentário + gráfico) empilham. Espremer a tabela de notas em
     metade de 390 px a deixaria ilegível, e ilegível conta como erro.
   · IMPRESSÃO NÃO DEPENDE DE FUNDO COLORIDO. A caixa "Gráficos de fundo" do
     Chrome vem DESMARCADA. Uma faixa de texto branco sobre verde vira texto
     branco sobre branco: a faixa some do documento. Por isso, no papel, toda
     faixa vira texto escuro entre dois filetes — legível com ou sem fundo.
   ========================================================================== */

/* o cabeçalho do laudo oficial: verde na tela, filete no papel */
.bloco__topo--doc { background: var(--verde-0); }
.bloco__topo--doc h2 { color: #fff; }

/* ==========================================================================
   A FOLHA — o laudo de avaliação sensorial, no modelo do cliente

   Esta seção NÃO usa a paleta da Coffice. Ela reproduz o laudo-modelo que o
   cliente trouxe: faixas em vermelho-tijolo, tabela de atributos com cabeçalho
   vermelho e letra amarela, escala indicativa sob faixa verde, células em
   amarelo-palha, tira de resultado final e hexágono com RESULT em azul e MAX em
   vermelho. O que muda de um laudo para outro são os NÚMEROS.

   Toda a paleta do documento está no bloco abaixo e em mais lugar nenhum —
   mexer ali muda a folha inteira.

   As três regras que o resto da seção obedece:

   · LARGURA DE PAPEL, NÃO DE JANELA. A folha tem 820px e para de crescer.
     Documento que acompanha monitor de 27" vira linha de 190 caracteres.
   · NO CELULAR MUDA O ARRANJO, NÃO SÓ O TAMANHO. As duas colunas (notas +
     escala, comentário + gráfico) empilham. Espremer a tabela de notas em
     metade de 390px a deixaria ilegível, e ilegível conta como erro.
   · A COR TEM DE CHEGAR AO PAPEL. Aqui a cor não é enfeite: é o documento. Por
     isso `print-color-adjust: exact` em tudo que carrega fundo, e o CSS de
     impressão mantém as faixas coloridas em vez de rebaixá-las a filete.
   ========================================================================== */

.folha--modelo {
  /* ---- a paleta do modelo ---- */
  --mod-vermelho:   #8e1b10;   /* faixas e cabeçalho da tabela de atributos */
  --mod-vermelho-2: #7a1710;   /* fio das células, texto vermelho */
  --mod-verde:      #1e7a1e;   /* escala indicativa e resultado final */
  --mod-verde-2:    #17601a;
  --mod-palha:      #ffffcc;   /* preenchimento das células */
  --mod-palha-2:    #fff59a;   /* caixas de destaque: nota, PQC, torra */
  --mod-amarelo:    #ffe14d;   /* letra amarela sobre vermelho */
  --mod-fio:        #c8b56a;   /* fio entre células */
  --mod-tinta:      #1a1a1a;
  --mod-azul:       #4f81bd;   /* a linha RESULT do hexágono */
  --mod-max:        #c0504d;   /* a linha MAX do hexágono */
  --mod-teia:       #cfcfcf;

  max-width: 820px;
  margin: 0 auto;
  padding: 26px 30px 22px;
  background: #fff;
  border: 1px solid var(--linha-1);
  border-radius: var(--raio);
  box-shadow: var(--sombra-flutua);
  color: var(--mod-tinta);
  font-size: 13px;
  line-height: 1.42;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* ---- topo ---- */

.folha__topo {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  align-items: flex-end; justify-content: space-between;
  padding-bottom: 10px;
}
.folha__marca { display: flex; flex-direction: column; gap: 1px; }
.folha__marcaNome {
  font-size: 20px; font-weight: 800; letter-spacing: .16em;
  color: var(--mod-vermelho); line-height: 1;
}
.folha__marcaTraco {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-2);
}
.folha__local { font-size: 12.5px; color: var(--mod-tinta); text-align: right; }
/* a identidade do documento — número, amostra, lote, safra — mora aqui em
   cima, discreta, para o corpo da folha ficar igual ao modelo do cliente */
.folha__protocolo {
  display: block; margin-top: 2px;
  font-size: 11px; color: #666; font-variant-numeric: tabular-nums;
}

.folha__aviso {
  margin: 0 0 10px; padding: 7px 11px;
  background: var(--mod-vermelho); color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
}

/* ---- identificação ---- */

.folha__id {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px 16px; margin: 0 0 13px; padding: 0;
}
.folha__linhaId {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px;
  min-width: 0; font-size: 12.5px;
}
.folha__linhaId--x2 { grid-column: span 2; }
.folha__linhaId--x3 { grid-column: span 3; }
.folha__linhaId dt { font-weight: 700; color: var(--mod-tinta); flex: 0 0 auto; }
.folha__linhaId dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ---- as faixas: a assinatura visual do modelo ---- */

.faixa {
  padding: 5px 12px;
  color: #fff;
  font-size: 11px; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
/* a faixa verde da escala tem de nascer na MESMA linha do cabeçalho vermelho
   da tabela ao lado — no modelo os dois topos se encostam */
.folha__par .faixa { padding: 3.6px 10px; font-size: 10.5px; letter-spacing: .2em; }
/* e a faixa seguinte precisa de ar depois da tira de resultado */
.folha__resultado + .faixa { margin-top: 10px; }

.faixa--vermelha { background: var(--mod-vermelho); }
.faixa--verde    { background: var(--mod-verde); }

/* ---- as duas colunas ---- */

.folha__par {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: 0 14px; align-items: start;
}

/* ---- os quadros ---- */

.quadro {
  width: 100%; border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.quadro th, .quadro td {
  border: 1px solid var(--mod-fio);
  padding: 3.5px 9px;
  background: var(--mod-palha);
}

.quadro--notas thead th {
  background: var(--mod-vermelho); color: var(--mod-amarelo);
  border-color: var(--mod-vermelho-2);
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  text-align: center;
}
.quadro--notas thead th:first-child { text-align: left; }

.quadro--notas tbody th {
  text-align: left; font-size: 12.5px; font-weight: 600;
  color: var(--mod-vermelho-2);
}
.quadro--notas tbody td {
  text-align: center; font-size: 12.5px; font-weight: 700; width: 22%;
}
.quadro--notas tbody td:last-child { font-weight: 500; }

.quadro__total th, .quadro__total td {
  background: var(--mod-verde) !important;
  border-color: var(--mod-verde-2);
  color: #fff !important;
  font-weight: 700 !important; font-size: 12.5px !important;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.quadro__total th { letter-spacing: .1em; text-transform: uppercase; }

.quadro--escala td {
  text-align: center; font-size: 11.5px; color: #333; width: 33.33%;
}
.quadro__grau--2 { font-weight: 650; color: var(--mod-tinta); }

/* ---- a ficha: rótulo e valor em caixa, a mesma língua das tabelas ----
   Grade e não tabela porque são muitos pares e eles precisam refluir de
   quatro colunas para duas e para uma. Tabela não reflui: ou rola de lado,
   ou espreme até ninguém ler. */

.folha__ficha {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0; margin-bottom: 14px;
  border: 1px solid var(--mod-fio); border-width: 1px 0 0 1px;
}
.folha__fichaItem {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
  padding: 4px 9px 5px;
  background: var(--mod-palha);
  border: 1px solid var(--mod-fio); border-width: 0 1px 1px 0;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.folha__fichaItem--x2 { grid-column: span 2; }
.folha__fichaItem--x3 { grid-column: span 3; }
.folha__fichaItem--largo { grid-column: 1 / -1; }
.folha__fichaRotulo {
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--mod-vermelho-2);
}
.folha__fichaValor {
  font-size: 12px; font-weight: 600; color: var(--mod-tinta);
  overflow-wrap: anywhere;
}
/* a ficha que vem logo depois de uma faixa encosta nela */
.faixa + .folha__ficha { border-top-width: 0; }

/* ---- O VERSO DA FOLHA ----

   Na tela ele é a continuação do documento, separado por um filete e um título
   discreto. No papel vira a SEGUNDA FOLHA: a frente é o laudo-modelo do cliente,
   que cabe numa A4 e termina na assinatura, e o verso leva a procedência. Quem
   imprime recebe duas folhas do mesmo laudo, com o número repetido no alto da
   segunda — folha solta sem identificação é folha perdida. */
.folha__verso { margin-top: 22px; padding-top: 16px; border-top: 2px solid var(--mod-fio); }
.folha__versoTopo {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  align-items: baseline; justify-content: space-between; margin-bottom: 10px;
}
.folha__versoNome {
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mod-vermelho-2);
}
.folha__versoRef { font-size: 10.5px; color: var(--mod-tinta); opacity: .72; }

/* ---- resultado final ---- */

.folha__resultado {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px;
  margin-top: 12px;
}
.folha__resultadoRotulo { letter-spacing: .2em; display: flex; align-items: center; }
.folha__resultadoFaixa {
  letter-spacing: .08em; display: flex; align-items: center;
  margin-left: auto; text-align: right;
}
.caixa {
  display: flex; align-items: center;
  padding: 5px 12px; border: 1px solid var(--mod-fio);
  background: var(--mod-palha); font-size: 12.5px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.caixa--nota {
  background: var(--mod-palha-2);
  font-size: 15px; font-weight: 800; color: var(--mod-vermelho-2);
  font-variant-numeric: tabular-nums;
}

/* ---- café torrado ---- */

.folha__pqc {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px;
  margin-top: 8px;
}
.caixa--rotulo { font-weight: 700; color: var(--mod-vermelho-2); }
.caixa--direita { margin-left: auto; }
.caixa--valor {
  background: var(--mod-palha-2);
  font-weight: 800; color: var(--mod-vermelho-2);
  font-variant-numeric: tabular-nums;
}

/* ---- comentários e hexágono ---- */

.folha__baixo {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 16px; margin-top: 14px; align-items: start;
}
.folha__comentariosRotulo {
  display: block; margin-bottom: 4px;
  font-size: 11.5px; font-weight: 700; color: var(--mod-vermelho-2);
  letter-spacing: .04em; text-transform: uppercase;
}
.folha__comentarios p { margin: 0 0 6px; font-size: 12.5px; line-height: 1.5; }
.folha__comentarios p:last-child { margin-bottom: 0; }
.folha__descritores { color: #444; }

.folha__grafico { border: 1px solid var(--mod-fio); padding: 6px; background: #fff; }
.folha__grafico .radar { display: block; width: 100%; height: auto; }

.folha__nota {
  margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: #444;
}

/* ---- o hexágono ---- */

.radar__anel, .radar__raio { fill: none; stroke: var(--mod-teia); stroke-width: 1; }
/* a regua fica DENTRO do desenho, onde as linhas passam por cima dela: o
   contorno branco por baixo da letra mantem o numero legivel no cruzamento */
.radar__regua {
  font-size: 11px; fill: #666; font-variant-numeric: tabular-nums;
  paint-order: stroke fill; stroke: #fff; stroke-width: 3px; stroke-linejoin: round;
}
.radar__max {
  fill: none; stroke: var(--mod-max); stroke-width: 1.8; stroke-linejoin: round;
}
.radar__result {
  fill: none; stroke: var(--mod-azul); stroke-width: 2.1; stroke-linejoin: round;
}
.radar__ponto { fill: var(--mod-azul); }
.radar__nome { font-size: 14px; font-weight: 650; fill: var(--mod-tinta); }
.radar__legenda { font-size: 12.5px; fill: #333; letter-spacing: .04em; }
.radar__chaveResult { stroke: var(--mod-azul); stroke-width: 2.2; }
.radar__chaveMax { stroke: var(--mod-max); stroke-width: 2.2; }

/* ---- rodapé e assinatura ----
   A assinatura fica EM BRANCO: o cliente ainda vai decidir nome e cargo. O
   espaço já está reservado no tamanho final para que, quando for preenchido,
   nada mais na folha se mexa. */

.folha__pe {
  display: flex; flex-wrap: wrap; gap: 22px 40px;
  align-items: flex-end; justify-content: space-between;
  margin-top: 26px;
}
/* Item de menu que SAI do sistema: a seta diz isso antes do clique. Ele não
   fica "ativo" nunca — não há tela para ficar. */
.menu__item--fora { text-decoration: none; }
.menu__fora { margin-left: auto; opacity: .55; font-size: 12px; }
/* A seta NASCE visível (.55) — é o que a faz existir no toque, onde o hover
   nunca dispara. O realce é só enfeite, então vale onde há mouse, e vira
   resposta ao toque onde não há. */
@media (hover: hover) {
  .menu__item--fora:hover .menu__fora { opacity: 1; }
}
.menu__item--fora:active .menu__fora { opacity: 1; }

/* Desde quando essa pessoa é cliente da plataforma */
.prod__desde { display: block; font-size: 11.5px; color: var(--tinta-3); margin-top: 3px; }
.prod__desde .selo { margin-left: 4px; }

.folha__assinatura, .folha__avaliacoes {
  flex: 1 1 240px; display: flex; flex-direction: column; gap: 4px;
  min-height: 62px; justify-content: flex-end;
}
.folha__avaliacoesRotulo { font-size: 12px; font-weight: 700; color: var(--mod-tinta); }
.folha__risco { display: block; height: 1px; background: #444; }
.folha__cargo { font-size: 11.5px; color: #777; }

.folha__rodape {
  margin: 16px 0 0; padding-top: 9px; border-top: 1px solid var(--mod-fio);
  font-size: 10px; line-height: 1.5; color: #666;
}

/* ---- celular: empilha, e nada encolhe até ficar ilegível ---- */

@media screen and (max-width: 900px) {
  .folha__id { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .folha__ficha { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .folha__par { grid-template-columns: 1fr; gap: 12px; }
  .folha__baixo { grid-template-columns: 1fr; }
  .folha__grafico { max-width: 460px; margin: 0 auto; width: 100%; }
  .folha__resultadoFaixa { margin-left: 0; }
  .caixa--direita { margin-left: 0; }
}

@media screen and (max-width: 640px) {
  .folha--modelo { padding: 18px 14px 16px; border-radius: 0; }
  .folha__topo { align-items: flex-start; }
  .folha__local { text-align: left; }
  .folha__id { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 12px; }
  .folha__linhaId--x2, .folha__linhaId--x3 { grid-column: 1 / -1; }
  .folha__ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .folha__fichaItem { padding: 5px 8px 6px; }
  .faixa { letter-spacing: .16em; font-size: 10.5px; padding: 5px 9px; }
  .quadro th, .quadro td { padding: 5px 7px; }
  .folha__resultado, .folha__pqc { gap: 6px; }
  .folha__resultado > *, .folha__pqc > * { flex: 1 1 100%; }
  .folha__pe { gap: 18px; }
  .folha__assinatura, .folha__avaliacoes { flex-basis: 100%; }
}

/* ==========================================================================
   IMPRESSÃO — A4, e o PDF que o produtor baixa

   O laudo oficial de classificação (modelo do item 17 da IN 8/2003) e a folha
   sensorial saem pela mesma porta: o diálogo de impressão do navegador, com
   "Salvar como PDF" no destino. Sem biblioteca de PDF de propósito — o PDF do
   navegador sai com texto de verdade (selecionável, pesquisável) e o desenho
   vetorial, e continua funcionando com o sistema aberto por duplo clique, sem
   internet. Biblioteca de CDN perderia as duas coisas.

   ATENÇÃO ÀS CORES: na folha sensorial a cor É o documento, então as faixas
   continuam vermelhas e verdes no papel, presas por `print-color-adjust:
   exact`. No laudo OFICIAL, que não tem esse compromisso, o cabeçalho vira
   texto escuro com filete — lá a cor é enfeite, e enfeite não vale o risco de
   sumir com "Gráficos de fundo" desmarcado.
   ========================================================================== */

@media print {
  .lateral, .topo, .cortina, .cabecalho__acoes, .barra-ferramentas,
  .avisos, .nao-imprime, .cabecalho { display: none !important; }
  /* Faixa de logos, botão de WhatsApp e banner são peças de tela: no papel um
     botão é uma mancha de tinta que ninguém aperta. */
  .patrocinio, .venda, .venda--sem, .banner { display: none !important; }
  .principal { margin: 0; padding: 0; }
  body { background: #fff; font-size: 10.5pt; }

  .bloco { border: 1px solid #000; break-inside: avoid; margin-bottom: 8pt; }
  .bloco__topo { background: #fff; border-bottom: 1px solid #000; }
  .bloco__topo--doc {
    background: transparent !important;
    border-bottom: 1.4pt solid var(--verde-0);
  }
  .bloco__topo--doc h2 { color: var(--verde-0) !important; }

  @page { size: A4; margin: 8mm; }

  /* ---- a folha sensorial no papel ---- */

  .folha--modelo {
    max-width: none; margin: 0; padding: 0;
    border: 0; border-radius: 0; box-shadow: none;
    font-size: 9.4pt; line-height: 1.36;
  }
  .folha__topo { padding-bottom: 4pt; }
  .folha__marcaNome { font-size: 15pt; }
  .folha__id { margin-bottom: 6pt; gap: 1.5pt 12pt; }
  /* A FRENTE CABE EM UMA FOLHA A4, e é isso que define estas medidas. Quando a
     colheita entrou na identificação e a cata na classificação física, a ficha
     ganhou uma linha e a assinatura foi empurrada para a segunda página — o
     modelo do cliente desmontado por dois campos. O aperto abaixo é de papel, e
     não aparece na tela: rótulo e valor um pouco menores, célula mais rasa. */
  .folha__ficha { margin-bottom: 7pt; break-inside: avoid; }
  .folha__fichaItem { padding: 1.6pt 5.5pt 2pt; }
  .folha__fichaRotulo { font-size: 6.4pt; }
  .folha__fichaValor { font-size: 8.2pt; }


  .faixa { padding: 3pt 9pt; font-size: 8.4pt; letter-spacing: .22em; margin-top: 5pt; }
  .folha__par .faixa { padding: 2.6pt 7pt; font-size: 7.8pt; }
  .folha__resultado + .faixa { margin-top: 7pt; }
  .quadro th, .quadro td { padding: 2pt 7pt; }
  .quadro--notas thead th { font-size: 7.8pt; }
  .quadro--notas tbody th, .quadro--notas tbody td { font-size: 9.2pt; }
  .quadro__total th, .quadro__total td { font-size: 9.6pt !important; }
  .quadro--escala td { font-size: 8.6pt; }

  .folha__resultado { margin-top: 8pt; break-inside: avoid; }
  .caixa { padding: 3.4pt 9pt; font-size: 9.2pt; }
  .caixa--nota { font-size: 11.5pt; }
  .folha__pqc { margin-top: 6pt; break-inside: avoid; }

  .folha__baixo {
    /* o hexágono cede 15 mm no papel: é o bloco mais alto da folha, e são
       esses 15 mm que mantêm a assinatura na primeira página */
    grid-template-columns: minmax(0, 1fr) 85mm; gap: 8pt;
    margin-top: 7pt; break-inside: avoid;
  }
  .folha__comentarios p { font-size: 8.6pt; }
  .folha__grafico { padding: 3pt; }

  .folha__pe { margin-top: 6pt; break-inside: avoid; }

  /* A SEGUNDA FOLHA COMEÇA AQUI, sempre: sem a quebra forçada o verso subia
     para a primeira página e empurrava o hexágono e a assinatura para a
     segunda, que é exatamente o modelo desmontado. */
  .folha__verso {
    break-before: page; margin-top: 0; padding-top: 0; border-top: 0;
  }
  .folha__versoTopo { margin-bottom: 7pt; }
  .folha__versoNome { font-size: 9pt; }
  .folha__versoRef { font-size: 8pt; }
  .folha__assinatura, .folha__avaliacoes { min-height: 11mm; }
  .folha__risco { background: #333; height: .8pt; }
  /* a assinatura do laudo oficial segue a mesma régua da folha no papel */
  .assina { min-height: 11mm; max-width: 78mm; margin-bottom: 6pt; }
  .assina__risco { background: #333; height: .8pt; }
  .assina__cargo { font-size: 7.5pt; color: #555; }
  .folha__rodape { margin-top: 4pt; padding-top: 4pt; font-size: 7.2pt; line-height: 1.4; }
  .folha__nota { font-size: 8pt; margin-top: 7pt; }
}