/*
 * Vetrx — painel B2B.
 *
 * Os tokens e a base vêm do design system (design-systems/vetrx) e estão
 * INLINE aqui de propósito: o Propshaft não reescreve `@import "nome.css"`,
 * só `url()`, e o arquivo separado dava 404 com o digest.
 * Regerar copiando de design-systems/vetrx/dist/.
 */

/* ===== design system: tokens ============================================ */
/* ==========================================================================
   Vetrx — Tokens
   ==========================================================================
   Clinica verde com quartos pastel. Canopy green domina as superficies de
   marca; os pasteis dao ritmo de secao; o coral e a UNICA cor de alta
   saturacao do sistema, reservada a acao primaria.

   Origem: DESIGN.md (style reference "Chat for impact").
   Desvio deliberado: --tracking-* saem em `em`, nao `px`. O DESIGN.md
   declarava -0.019px / -0.028px, o que e visualmente nulo; a tabela de
   tipografia do mesmo arquivo especifica em `em`. Em `em` o aperto
   acompanha o corpo, que e o que produz o display editorial.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&display=swap');

:root {
  /* ---- Cores — marca ---------------------------------------------------- */
  --color-canopy-green: #0a3922;   /* superficie dominante: hero, bandas escuras, headings */
  --color-coral-pulse: #ff643b;    /* acao primaria — unica cor quente saturada do sistema */
  --color-indigo-bloom: #460095;   /* ancora roxa das secoes lavanda */
  --color-leaf-bright: #1dbf73;    /* palavra destacada em headline, tags, bordas em foco */
  --color-deep-teal: #003642;      /* acento azul de contorno. NAO promover a CTA */
  --color-orchid-tint: #f3b3fe;    /* acento rosa decorativo */
  --color-sky-signal: #00b4dc;     /* ciano de icone e linha de grafico */
  --color-aubergine: #47264c;      /* ameixa para corpo sobre lavanda */

  /* ---- Cores — neutros -------------------------------------------------- */
  --color-ink-black: #000000;
  --color-paper-white: #ffffff;
  --color-ash: #a6a6a6;
  --color-slate: #7a7a7a;
  --color-graphite: #3d3d3d;
  --color-charcoal: #333333;
  --color-frost-gray: #e0e0e0;
  --color-cloud-gray: #f2f2f2;

  /* ---- Cores — pasteis (os "quartos") ----------------------------------- */
  --color-lavender-mist: #eee2ff;  /* canvas da pagina */
  --color-mint-wash: #d2f2e3;
  --color-sky-wash: #ccf0f8;
  --color-sage-wash: #e4f7ee;
  --color-lilac-wash: #fdf0ff;
  --color-peach-wash: #ffede8;     /* superficie tranquila. NAO promover a CTA */
  --color-cream: #faf7e8;
  --color-sand: #f4ece9;

  /* ---- Status (kit produto) --------------------------------------------- */
  --color-status-ok: #1dbf73;
  --color-status-attention: #ff643b;
  --color-status-critical: #b3261e;
  --color-status-neutral: #7a7a7a;

  /* ---- Tipografia ------------------------------------------------------- */
  --font-dm-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --text-caption: 12px;      --leading-caption: 1.2;
  --text-body-sm: 14px;      --leading-body-sm: 1.38;
  --text-body: 16px;         --leading-body: 1.38;
  --text-body-lg: 18px;      --leading-body-lg: 1.4;
  --text-subheading: 20px;   --leading-subheading: 1.33;
  --text-heading-sm: 24px;   --leading-heading-sm: 1.3;
  --text-heading: 32px;      --leading-heading: 1.2;    --tracking-heading: -0.019em;
  --text-heading-lg: 48px;   --leading-heading-lg: 1.14; --tracking-heading-lg: -0.019em;
  --text-display: 72px;      --leading-display: 1.05;   --tracking-display: -0.028em;
  --text-display-xl: 116px;  --leading-display-xl: 0.89; --tracking-display-xl: -0.028em;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ---- Espacamento (base 4px) ------------------------------------------- */
  --spacing-unit: 4px;
  --spacing-4: 4px;    --spacing-8: 8px;    --spacing-12: 12px;
  --spacing-16: 16px;  --spacing-20: 20px;  --spacing-24: 24px;
  --spacing-32: 32px;  --spacing-40: 40px;  --spacing-48: 48px;
  --spacing-56: 56px;  --spacing-64: 64px;  --spacing-80: 80px;
  --spacing-120: 120px;

  /* ---- Layout ----------------------------------------------------------- */
  --page-max-width: 1280px;
  --section-gap: 64px;
  --card-padding: 24px;
  --element-gap: 8px;

  /* ---- Raios ------------------------------------------------------------ */
  --radius-tags: 9999px;
  --radius-buttons: 40px;
  --radius-cards: 24px;
  --radius-cards-sm: 16px;
  --radius-icons: 8px;
  --radius-sm: 2px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  /* ---- Elevacao --------------------------------------------------------- */
  /* Sombra unica do sistema. O visual comunica por bloco de cor, nao por
     profundidade — nao adicionar uma segunda sombra. */
  --shadow-subtle: rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;

  /* ---- Superficies ------------------------------------------------------ */
  --surface-page-canvas: var(--color-lavender-mist);
  --surface-card: var(--color-paper-white);
  --surface-pastel: var(--color-mint-wash);
  --surface-dark-brand: var(--color-canopy-green);

  /* ---- Semanticos — o que os componentes consomem ----------------------- */
  --text-primary: var(--color-ink-black);
  --text-secondary: var(--color-graphite);
  --text-meta: var(--color-slate);
  --text-heading-color: var(--color-canopy-green);
  --text-on-dark: var(--color-paper-white);
  --text-on-dark-muted: var(--color-mint-wash);

  --border-hairline: var(--color-frost-gray);
  --border-mid: var(--color-ash);
  --border-strong: var(--color-ink-black);

  --action-primary-bg: var(--color-coral-pulse);
  --action-primary-fg: var(--color-paper-white);
  --action-ghost-border-dark: var(--color-paper-white);
  --action-ghost-border-light: var(--color-ink-black);
  --focus-ring: var(--color-leaf-bright);

  /* ---- Dataviz ----------------------------------------------------------
     Paleta categorica validada com o six-checks (banda de luminosidade, piso
     de croma, separacao CVD, piso de visao normal, contraste). NAO trocar
     estes valores no olho — revalidar com o script antes.

     Ordem FIXA: serie 1 sempre verde, 2 sempre roxo, 3 sempre ciano, 4 sempre
     magenta. Nunca ciclar, nunca reatribuir por ranking — a cor segue a
     entidade, nao a posicao. Uma 5a serie vira "Outros" ou small multiples.

     O coral NAO entra aqui: ele e exclusivo da acao primaria. Cores de status
     tambem sao reservadas e nunca viram "serie 4".

     Modo claro: pior par adjacente ΔE 8.1 (deutan) — acima do piso.
     Modo escuro: pior par adjacente ΔE 7.4 (deutan), dentro da banda de piso
     6–8 — por isso rotulo direto na marca e OBRIGATORIO sobre fundo escuro,
     nao opcional. */
  --viz-1: #12925a;
  --viz-2: #7a3fd6;
  --viz-3: #0e8fae;
  --viz-4: #b5407a;

  /* Rampa sequencial (magnitude): uma unica matiz, claro -> escuro. */
  --viz-seq-1: #d2f2e3;
  --viz-seq-2: #8fd9b8;
  --viz-seq-3: #3fb987;
  --viz-seq-4: #12925a;
  --viz-seq-5: #0a5c39;

  /* Superficie do grafico e cromo recessivo. */
  --viz-surface: var(--color-paper-white);
  --viz-grid: var(--color-frost-gray);
  --viz-axis: var(--color-ash);
}

/* Modo escuro do grafico: os mesmos quatro papeis, re-degrau na banda escura
   e revalidados contra a superficie escura — nao e inversao automatica. */
.vx-section--dark,
.vx-root--dark {
  --viz-1: #1fa96c;
  --viz-2: #9260e0;
  --viz-3: #1e9fbd;
  --viz-4: #cf5f92;
  --viz-surface: var(--color-canopy-green);
  --viz-grid: rgba(255, 255, 255, 0.14);
  --viz-axis: var(--color-ash);
}


/* ===== design system: base ============================================== */
/* ==========================================================================
   Vetrx — Base
   ==========================================================================
   Reset minimo + o canvas da pagina. DM Sans em tudo, do caption de 12px ao
   display de 116px: familia unica e a assinatura do sistema.
   ========================================================================== */

.vx-root,
.vx-root *,
.vx-root *::before,
.vx-root *::after {
  box-sizing: border-box;
}

.vx-root {
  font-family: var(--font-dm-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--font-weight-regular);
  font-feature-settings: "ss03";
  color: var(--text-primary);
  background: var(--surface-page-canvas);
  -webkit-font-smoothing: antialiased;
}

.vx-root :where(h1, h2, h3, h4, p, figure, blockquote) { margin: 0; }
.vx-root :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.vx-root :where(button, input, select, textarea) { font: inherit; color: inherit; }
.vx-root :where(img, svg) { display: block; max-width: 100%; }

/* Foco visivel unico, em Leaf Bright — vale para todo controle do sistema. */
.vx-root :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---- Utilitarios de escala tipografica ---------------------------------- */
.vx-display    { font-size: var(--text-display);     line-height: var(--leading-display);     letter-spacing: var(--tracking-display);    font-weight: var(--font-weight-medium); }
.vx-display-xl { font-size: var(--text-display-xl);  line-height: var(--leading-display-xl);  letter-spacing: var(--tracking-display-xl); font-weight: var(--font-weight-medium); }
.vx-heading-lg { font-size: var(--text-heading-lg);  line-height: var(--leading-heading-lg);  letter-spacing: var(--tracking-heading-lg); font-weight: var(--font-weight-medium); }
.vx-heading    { font-size: var(--text-heading);     line-height: var(--leading-heading);     letter-spacing: var(--tracking-heading);    font-weight: var(--font-weight-bold); }
.vx-heading-sm { font-size: var(--text-heading-sm);  line-height: var(--leading-heading-sm);  font-weight: var(--font-weight-semibold); }
.vx-subheading { font-size: var(--text-subheading);  line-height: var(--leading-subheading);  font-weight: var(--font-weight-medium); }
.vx-body-lg    { font-size: var(--text-body-lg);     line-height: var(--leading-body-lg); }
.vx-body       { font-size: var(--text-body);        line-height: var(--leading-body); }
.vx-body-sm    { font-size: var(--text-body-sm);     line-height: var(--leading-body-sm); }
.vx-caption    { font-size: var(--text-caption);     line-height: var(--leading-caption); }

/* A palavra destacada dentro de uma headline — Leaf Bright sobre fundo
   escuro. Uma por composicao. */
.vx-highlight { color: var(--color-leaf-bright); }

/* ---- Casca de secao ------------------------------------------------------ */
/* 56px, nao os 80px da referencia: ela e uma landing de mensagem unica,
   o Vetrx tem quatro publicos e telas de sistema competindo por espaco. */
.vx-section { padding-block: var(--spacing-56); }
.vx-section--roomy { padding-block: var(--spacing-80); }
.vx-section--dark { background: var(--surface-dark-brand); color: var(--text-on-dark); }
.vx-section--canvas { background: var(--surface-page-canvas); }
.vx-container { width: 100%; max-width: var(--page-max-width); margin-inline: auto; padding-inline: var(--spacing-24); }

/* ==========================================================================
   Modo operação
   ==========================================================================
   O canvas lavanda e a rotacao pastel sao a linguagem da vitrine — Tutor e
   marketing. Tela de trabalho de Pet Shop, Distribuicao e Industria roda
   neste modo: fundo neutro, densidade alta, pastel rebaixado a sinal de
   status. Ninguem aprova pedido de seis digitos numa tela cor-de-rosa.

   Uso: <div class="vx-root vx-root--ops">
   ========================================================================== */

.vx-root--ops {
  background: var(--color-cloud-gray);
  --surface-page-canvas: var(--color-cloud-gray);
  /* Corpo um degrau abaixo: mais linha visivel por tela sem perder leitura. */
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
}
.vx-root--ops .vx-section { padding-block: var(--spacing-24); }
.vx-root--ops .vx-container { padding-inline: var(--spacing-16); }
.vx-root--ops .vx-product-card { padding: var(--spacing-16); border-radius: var(--radius-cards-sm); }
.vx-root--ops .vx-table td { padding: var(--spacing-8) var(--spacing-12); }
.vx-root--ops .vx-table th { padding: var(--spacing-8) var(--spacing-12); }
.vx-root--ops .vx-field__control { padding: var(--spacing-8) var(--spacing-12); border-radius: var(--radius-lg); }
.vx-root--ops .vx-btn--coral,
.vx-root--ops .vx-btn--ghost { padding: var(--spacing-8) var(--spacing-16); font-size: var(--text-body-sm); }

/* No modo operacao o card pastel nao e superficie — vira faixa de destaque
   pontual. Um painel inteiro em pastel volta a ser vitrine. */
.vx-root--ops .vx-feature { padding: var(--spacing-16); border-radius: var(--radius-cards-sm); }


/* ===== tela de cotação ================================================== */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-dm-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-primary);
  background: var(--surface-page-canvas);
}

a { color: inherit; }

/* ---- casca ------------------------------------------------------------- */
.topo {
  background: var(--surface-dark-brand);
  color: var(--text-on-dark);
  padding: var(--spacing-16) var(--spacing-24);
  display: flex; align-items: center; gap: var(--spacing-24);
}
.topo__marca { font-weight: var(--font-weight-bold); font-size: var(--text-subheading); letter-spacing: -0.019em; }
.topo__loja { color: var(--text-on-dark-muted); font-size: var(--text-body-sm); }
.topo__direita {
  margin-left: auto; display: flex; align-items: center; gap: var(--spacing-16);
  /* A navegação rola em vez de empurrar a página: com "Pedidos em montagem",
     "Novo", "Enviados" e "Sair" numa tela estreita, ela vazava 7px pela direita
     e o corpo inteiro ganhava rolagem lateral. */
  overflow-x: auto; scrollbar-width: none; min-width: 0;
}
.topo__direita::-webkit-scrollbar { display: none; }
.topo__direita > * { flex: 0 0 auto; }
.topo a { color: var(--text-on-dark-muted); text-decoration: none; font-size: var(--text-body-sm); }
.topo a:hover { color: var(--text-on-dark); }

.pagina { max-width: var(--page-max-width); margin: 0 auto; padding: var(--spacing-32) var(--spacing-24) var(--spacing-120); }
/* Os 120px do rodapé existem para o gatilho do chat, que flutua a 92px do fim,
   não cobrir a última linha. Onde a barra de fechamento existe ela já ocupa esse
   espaço — e a sobra somada (80 + 120 = 200px, para uma barra de 67px) era o que
   deixava a barra flutuando acima de um vão vazio no fim da página. */
.pagina:has(.barra) { padding-bottom: var(--spacing-24); }

.cabecalho { display: flex; align-items: flex-start; gap: var(--spacing-24); margin-bottom: var(--spacing-24); }
.cabecalho h1 {
  font-size: var(--text-heading); line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading); color: var(--text-heading-color);
  margin: 0 0 var(--spacing-4);
}
.cabecalho__meta { color: var(--text-meta); font-size: var(--text-body-sm); }
.cabecalho__acoes { margin-left: auto; display: flex; gap: var(--spacing-8); align-items: center; }

/* ---- componentes básicos ------------------------------------------------ */
.cartao {
  background: var(--surface-card);
  border-radius: var(--radius-cards-sm);
  padding: var(--card-padding);
  box-shadow: var(--shadow-subtle);
}

.botao {
  display: inline-flex; align-items: center; gap: var(--spacing-8);
  border: 0; border-radius: var(--radius-buttons); cursor: pointer;
  font-family: inherit; font-size: var(--text-body-sm); font-weight: var(--font-weight-medium);
  padding: 10px var(--spacing-20); text-decoration: none; line-height: 1.2;
  /* Sem isto o input[type=submit] é espremido pelo flex do rodapé da oferta e
     o rótulo sai cortado ("Escolhe"). */
  white-space: nowrap; flex-shrink: 0; width: auto;
}
/* <input> não é contêiner flex: como caixa de bloco ele calcula a largura
   intrínseca a partir do rótulo. */
input.botao { display: inline-block; text-align: center; }
.botao--primario { background: var(--color-coral-pulse); color: var(--color-paper-white); }
.botao--primario:hover { filter: brightness(0.94); }
.botao--secundario { background: var(--color-paper-white); color: var(--color-canopy-green); box-shadow: inset 0 0 0 1px var(--border-hairline); }
.botao--secundario:hover { box-shadow: inset 0 0 0 1px var(--color-canopy-green); }
.botao--fantasma { background: transparent; color: var(--text-meta); padding: 6px var(--spacing-12); }
.botao--fantasma:hover { color: var(--text-primary); }
.botao[disabled] { opacity: 0.45; cursor: not-allowed; }
.botao--pequeno { padding: 6px var(--spacing-12); font-size: var(--text-caption); }

.etiqueta {
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: var(--radius-tags); padding: 3px 10px;
  font-size: var(--text-caption); font-weight: var(--font-weight-medium);
  background: var(--color-cloud-gray); color: var(--text-secondary);
  white-space: nowrap;
}
.etiqueta--ok { background: var(--color-mint-wash); color: #0a5c38; }
.etiqueta--atencao { background: var(--color-peach-wash); color: #a13312; }
.etiqueta--critico { background: #fde7e5; color: var(--color-status-critical); }
.etiqueta--neutro { background: var(--color-cloud-gray); color: var(--text-meta); }
.etiqueta--marca { background: var(--color-sky-wash); color: #005a6e; }

/* ---- painel de totais --------------------------------------------------- */
.resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--spacing-16); margin-bottom: var(--spacing-24); }
.resumo__item { background: var(--surface-card); border-radius: var(--radius-cards-sm); padding: var(--spacing-16) var(--spacing-20); }
.resumo__rotulo { font-size: var(--text-caption); color: var(--text-meta); text-transform: uppercase; letter-spacing: 0.04em; }
.resumo__valor { font-size: var(--text-heading-sm); font-weight: var(--font-weight-semibold); color: var(--text-heading-color); margin-top: 2px; }
.resumo__nota { font-size: var(--text-caption); color: var(--text-meta); }

/* ---- avisos ------------------------------------------------------------- */
.aviso { border-radius: var(--radius-cards-sm); padding: var(--spacing-12) var(--spacing-16); margin-bottom: var(--spacing-12); font-size: var(--text-body-sm); }
.aviso--erro { background: #fde7e5; color: var(--color-status-critical); }
.aviso--atencao { background: var(--color-peach-wash); color: #a13312; }
.aviso--ok { background: var(--color-mint-wash); color: #0a5c38; }
.aviso ul { margin: var(--spacing-8) 0 0; padding-left: var(--spacing-20); }

.secao__titulo {
  font-size: var(--text-subheading); font-weight: var(--font-weight-semibold);
  color: var(--text-heading-color); margin: var(--spacing-32) 0 var(--spacing-12);
}

.vazio { color: var(--text-meta); font-size: var(--text-body-sm); padding: var(--spacing-24); text-align: center; }

/* ---- a entrada do sistema ----------------------------------------------- */
/* A primeira tela do produto. Antes era um cartão pequeno no meio de uma
   página vazia, sem dizer o que o Vetrx faz — e com o aviso do Devise em
   inglês no topo. */
.entrada-do-sistema {
  min-height: 100dvh; display: grid; align-content: center; justify-items: center;
  gap: var(--spacing-32); padding: var(--spacing-32) var(--spacing-24);
}
.entrada-do-sistema__marca { text-align: center; max-width: 46ch; }
.entrada-do-sistema__logo {
  display: block; font-size: var(--text-heading);
  font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-heading);
  color: var(--color-canopy-green); margin-bottom: var(--spacing-8);
}
.entrada-do-sistema__promessa {
  margin: 0; color: var(--text-secondary); font-size: var(--text-body-sm);
  line-height: 1.5;
}
.entrada-do-sistema__cartao {
  width: 100%; max-width: 380px;
  background: var(--surface-card); border-radius: var(--radius-cards-sm);
  padding: var(--spacing-32) var(--spacing-24); box-shadow: var(--shadow-subtle);
}
.entrada-do-sistema__cartao h1 {
  font-size: var(--text-subheading); font-weight: var(--font-weight-semibold);
  color: var(--text-heading-color); margin: 0 0 var(--spacing-20);
}
/* Sem sessão a página não tem cabeçalho, e o aviso do layout ficava colado no
   topo, largo e solto. Aqui ele vira parte da coluna do login. */
.pagina:has(.entrada-do-sistema) { padding: 0; max-width: none; }
.pagina:has(.entrada-do-sistema) > .aviso {
  /* `-var(--x)` NÃO é CSS válido — a declaração inteira era descartada e o
     aviso ficava encostado no canto superior esquerdo, com a largura do
     conteúdo. O jeito certo de negar um token é `calc(… * -1)`. */
  position: fixed; top: var(--spacing-16); left: 50%;
  transform: translateX(-50%); z-index: 5;
  width: min(420px, calc(100% - var(--spacing-32)));
  margin: 0; text-align: center;
}

.entrada-do-sistema__erro {
  margin: 0 0 var(--spacing-16); padding: var(--spacing-8) var(--spacing-12);
  background: #fde7e5; color: var(--color-status-critical);
  border-radius: var(--radius-lg); font-size: var(--text-caption);
}
.entrada-do-sistema__enviar { width: 100%; justify-content: center; margin-top: var(--spacing-8); }

.login { max-width: 380px; margin: 12vh auto; }
.login h1 { font-size: var(--text-heading); color: var(--text-heading-color); letter-spacing: var(--tracking-heading); margin: 0 0 var(--spacing-24); }
.campo { margin-bottom: var(--spacing-16); }
.campo label { display: block; font-size: var(--text-body-sm); color: var(--text-secondary); margin-bottom: 4px; }
.campo input { width: 100%; padding: 10px var(--spacing-12); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); font-family: inherit; font-size: var(--text-body); }

/* ---- tabela de pedidos -------------------------------------------------- */
/* Tabela larga rola DENTRO da própria caixa; a página nunca rola de lado.
   Sem isto, a lista de pedidos (referência ULID + distribuidor + condição)
   empurrava o corpo inteiro para 572px numa janela de 487, e o cabeçalho e a
   barra de envio saíam pela direita. */
.rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Encosta nas bordas do cartão: o padding dele viraria uma faixa morta à
   direita, e a última coluna pareceria cortada mesmo com a rolagem no fim. */
.cartao > .rolagem { margin: calc(var(--card-padding) * -1); padding: var(--card-padding); }

.tabela { width: 100%; border-collapse: collapse; font-size: var(--text-body-sm); }
.tabela th { text-align: left; font-size: var(--text-caption); color: var(--text-meta); text-transform: uppercase; letter-spacing: 0.04em; padding: var(--spacing-8) var(--spacing-12); border-bottom: 1px solid var(--border-hairline); }
.tabela td { padding: var(--spacing-12); border-bottom: 1px solid var(--color-cloud-gray); }
.tabela td.numero { text-align: right; font-variant-numeric: tabular-nums; }
/* Nada de quebrar data, dinheiro e etiqueta no meio: é o que produzia
   "31 de / agosto, / 16:14" em três linhas e triplicava a altura da tabela. */
.tabela th, .tabela td { white-space: nowrap; }
/* A referência do pedido é longa e monoespaçada — ela pode quebrar. */
.tabela td.referencia { white-space: normal; word-break: break-all; min-width: 22ch; }

/* ==========================================================================
   O pedido
   ==========================================================================
   Mobile-first de propósito: o comprador de pet shop confere pedido no balcão,
   com o celular na mão. A coluna única é o padrão; o desktop é o caso que
   ganha colunas, não o contrário.

   A tela é agrupada por DISTRIBUIDOR, não por item. O comprador não decide
   "de quem compro esta ração" — ele decide "este pedido fecha o mínimo?".
   ========================================================================== */

/* Espaço para a barra de fechamento não cobrir a última linha. */
/* Sem sobra depois da barra: ela é `sticky bottom: 0`, e sticky para de grudar
   ao chegar no fim da CAIXA DO PAI. Com 80px de padding aqui, a barra descolava
   do rodapé 80px antes de a página acabar e ficava boiando no meio da tela. */
.pedido { padding-bottom: 0; }

.pedido__cabecalho {
  display: flex; align-items: flex-start; gap: var(--spacing-16);
  margin-bottom: var(--spacing-20);
}
.pedido__cabecalho h1 {
  font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm);
  color: var(--text-heading-color); margin: 0 0 2px;
}
.pedido__cabecalho form { margin-left: auto; }
.pedido__meta { color: var(--text-meta); font-size: var(--text-caption); margin: 0; }

/* ---- extrato: o que a otimização fez ------------------------------------ */
.extrato {
  background: var(--surface-card); border-radius: var(--radius-cards-sm);
  padding: var(--spacing-16); margin-bottom: var(--spacing-16);
  box-shadow: var(--shadow-subtle);
}
.extrato__numeros { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-8); }
.extrato__coluna {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--spacing-12); border-radius: var(--radius-lg);
}
.extrato__coluna--forte { background: var(--color-sage-wash); }
.extrato__rotulo {
  font-size: 11px; color: var(--text-meta); text-transform: uppercase;
  letter-spacing: 0.04em;
}
.extrato__valor {
  font-size: var(--text-subheading); font-weight: var(--font-weight-semibold);
  color: var(--text-heading-color); font-variant-numeric: tabular-nums;
}
.extrato__valor--fraco { color: var(--text-meta); font-weight: var(--font-weight-medium); }
.extrato__nota { font-size: 11px; color: var(--text-meta); }

.extrato__linhas { list-style: none; margin: var(--spacing-12) 0 0; padding: 0; }
.extrato__linhas li {
  display: flex; align-items: baseline; gap: var(--spacing-8);
  font-size: var(--text-caption); color: var(--text-secondary);
  padding: 5px 0; border-top: 1px solid var(--color-cloud-gray);
}
.extrato__linhas li strong { margin-left: auto; font-variant-numeric: tabular-nums; }
.extrato__delta--bom { color: #0a5c38; }
.extrato__delta--ruim { color: #a13312; }
.extrato__alerta {
  margin: var(--spacing-12) 0 0; padding: var(--spacing-8) var(--spacing-12);
  background: var(--color-peach-wash); color: #a13312;
  border-radius: var(--radius-lg); font-size: var(--text-caption);
}

/* ---- o mínimo de faturamento -------------------------------------------- */
/* A barra existe porque o número sozinho não diz se é "quase lá" ou "longe". */
.minimo { padding: 0 var(--spacing-16) var(--spacing-12); }
.minimo__barra {
  height: 4px; border-radius: 2px; background: var(--color-cloud-gray); overflow: hidden;
}
.minimo__preenchido { height: 100%; background: var(--color-leaf-bright); }
.grupo-pedido--travado .minimo__preenchido { background: var(--color-status-attention); }
.minimo__texto { margin: 5px 0 0; font-size: 11px; color: var(--text-meta); }
.minimo__texto--falta { color: #a13312; font-weight: var(--font-weight-medium); }

/* ---- uma linha do pedido ------------------------------------------------ */
.linhas { list-style: none; margin: 0; padding: 0; }
.linha {
  padding: var(--spacing-12) var(--spacing-16);
  border-top: 1px solid var(--color-cloud-gray);
}
.linha__topo { display: flex; align-items: flex-start; gap: var(--spacing-12); }
.linha__identidade { display: flex; flex-direction: column; min-width: 0; }
.linha__nome {
  font-size: var(--text-body-sm); font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}
.linha__codigo {
  font-size: 11px; color: var(--text-meta); font-variant-numeric: tabular-nums;
}
.linha__dinheiro {
  margin-left: auto; text-align: right; display: flex; flex-direction: column;
  white-space: nowrap;
}
.linha__total {
  font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold);
  color: var(--text-heading-color); font-variant-numeric: tabular-nums;
}
.linha__unitario { font-size: 11px; color: var(--text-meta); font-variant-numeric: tabular-nums; }

.linha__sinais { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--spacing-8); }
.linha__sinais:empty { display: none; }

.linha__acoes {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-8);
  margin-top: var(--spacing-8);
}
.linha__acoes form { margin: 0; }

/* ---- o passo de quantidade ---------------------------------------------- */
/* 40px de alvo: menos que isso não se acerta com o polegar. */
.passo {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--border-hairline); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--color-paper-white);
}
.passo form { display: flex; margin: 0; }
.passo__botao {
  width: 40px; min-height: 40px; border: 0; background: transparent;
  font-size: var(--text-body-lg); line-height: 1; color: var(--text-secondary);
  cursor: pointer; font-family: inherit;
}
.passo__botao:hover { background: var(--color-cloud-gray); color: var(--text-primary); }
.passo__campo {
  width: 56px; border: 0; border-inline: 1px solid var(--border-hairline);
  text-align: center; font-family: inherit; font-size: var(--text-body-sm);
  font-variant-numeric: tabular-nums; background: transparent;
  /* As setas nativas roubam o espaço do número em telas estreitas. */
  -moz-appearance: textfield;
}
.passo__campo::-webkit-outer-spin-button,
.passo__campo::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---- trocar de distribuidor --------------------------------------------- */
/* `<details>` em vez de modal: abre no lugar, funciona sem JS, e no celular
   não sequestra a tela inteira para uma decisão de uma linha. */
.troca { flex: 1 1 100%; }
.troca__gatilho {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: var(--text-caption); color: var(--color-canopy-green);
  font-weight: var(--font-weight-medium); padding: var(--spacing-8) 0;
  list-style: none;
}
.troca__gatilho::-webkit-details-marker { display: none; }
.troca__contagem {
  background: var(--color-cloud-gray); border-radius: var(--radius-tags);
  padding: 1px 7px; font-size: 11px; color: var(--text-meta);
}
.troca[open] .troca__gatilho { color: var(--text-primary); }
.troca__lista {
  list-style: none; margin: 0 0 var(--spacing-8); padding: var(--spacing-8);
  background: var(--color-cloud-gray); border-radius: var(--radius-lg);
}
.troca__opcao {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-8);
  padding: var(--spacing-8); background: var(--color-paper-white);
  border-radius: var(--radius-lg); margin-bottom: 6px;
}
.troca__opcao:last-child { margin-bottom: 0; }
.troca__opcao form { margin-left: auto; }
.troca__distribuidor {
  display: block; font-size: var(--text-body-sm); font-weight: var(--font-weight-medium);
}
.troca__condicao { font-size: 11px; color: var(--text-meta); }
.troca__preco {
  display: flex; flex-direction: column; align-items: flex-end;
  font-size: 11px; color: var(--text-meta); font-variant-numeric: tabular-nums;
}
.troca__delta { font-weight: var(--font-weight-medium); }
.troca__delta--bom { color: #0a5c38; }
.troca__delta--ruim { color: #a13312; }

/* ---- ficaram fora ------------------------------------------------------- */
.fora__grupo {
  background: var(--surface-card); border-radius: var(--radius-cards-sm);
  padding: var(--spacing-12) var(--spacing-16); margin-bottom: var(--spacing-8);
}
.fora__titulo {
  font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-meta); margin: 0 0 var(--spacing-8);
}
.fora__lista { list-style: none; margin: 0; padding: 0; }
.fora__item {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-8);
  padding: var(--spacing-8) 0; border-top: 1px solid var(--color-cloud-gray);
}
.fora__item:first-child { border-top: 0; }
.fora__item form { margin-left: auto; }
.fora__detalhe {
  margin: 4px 0 0; font-size: 11px; color: var(--text-meta); max-width: 52ch;
}
/* O que a IA leu no papel: monoespaçado porque é para conferir dígito a dígito
   contra a embalagem. */
.fora__leitura {
  margin: var(--spacing-4) 0 0; font-size: var(--text-caption);
  color: #a13312; font-variant-numeric: tabular-nums;
}

/* ---- o distribuidor e os blocos dele --------------------------------- */
/* A divisão em blocos é do negócio: cada condição comercial é uma nota fiscal,
   e o motor aloca item a item no melhor preço, então o mesmo distribuidor rende
   dois, três, quatro blocos. Aninhar sob um cabeçalho só é o que impede a tela
   de parecer duplicada. */
.fornecedor {
  background: var(--surface-card); border-radius: var(--radius-cards-sm);
  margin-bottom: var(--spacing-12); overflow: hidden;
  border-left: 4px solid var(--color-leaf-bright);
}
.fornecedor--travado { border-left-color: var(--color-status-attention); }

.fornecedor__cabecalho {
  display: flex; align-items: baseline; gap: var(--spacing-12);
  padding: var(--spacing-12) var(--spacing-16);
  background: var(--color-sage-wash);
}
.fornecedor--travado .fornecedor__cabecalho { background: var(--color-peach-wash); }
.fornecedor__nome {
  font-size: var(--text-body); font-weight: var(--font-weight-semibold);
  color: var(--text-heading-color); margin: 0;
}
.fornecedor__conta { margin-left: auto; text-align: right; display: flex; flex-direction: column; }
.fornecedor__total {
  font-size: var(--text-body-lg); font-weight: var(--font-weight-semibold);
  color: var(--text-heading-color); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fornecedor__nota { font-size: 11px; color: var(--text-meta); }

.fornecedor__rodape {
  display: flex; align-items: baseline; gap: var(--spacing-12);
  padding: var(--spacing-8) var(--spacing-16);
  border-top: 1px solid var(--border-hairline);
  font-size: var(--text-caption); color: var(--text-secondary);
}
.fornecedor__rodape strong {
  margin-left: auto; font-variant-numeric: tabular-nums;
  color: var(--text-heading-color); font-size: var(--text-body-sm);
}

/* ---- um bloco: uma condição, uma nota --------------------------------- */
.bloco { border-top: 1px solid var(--color-cloud-gray); }
.bloco:first-of-type { border-top: 0; }
.bloco__cabecalho {
  display: flex; align-items: center; gap: var(--spacing-8);
  padding: var(--spacing-8) var(--spacing-16) 0;
}
.bloco__itens { font-size: var(--text-caption); color: var(--text-meta); }
.bloco__total {
  margin-left: auto; font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium); color: var(--text-heading-color);
  font-variant-numeric: tabular-nums;
}
.bloco--travado .bloco__cabecalho .etiqueta {
  background: var(--color-peach-wash); color: #a13312;
}
.bloco__rodape {
  display: flex; align-items: baseline; gap: var(--spacing-8);
  padding: var(--spacing-8) var(--spacing-16);
  font-size: 11px; color: var(--text-meta);
  background: var(--color-cloud-gray);
}
.bloco__rodape strong {
  margin-left: auto; font-variant-numeric: tabular-nums;
  font-size: var(--text-body-sm); color: var(--text-heading-color);
}
.bloco__bloqueios {
  margin: 0; padding: var(--spacing-8) var(--spacing-16) var(--spacing-12) var(--spacing-32);
  font-size: var(--text-caption); color: var(--color-status-critical); list-style: disc;
}

/* ---- o selo da decisão e o balão que a conta -------------------------- */
.linha__sinais { position: relative; }
.selo {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  border: 0; border-radius: var(--radius-tags); padding: 3px 10px;
  font-family: inherit; font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  background: var(--color-sky-wash); color: #005a6e;
}
.selo:hover { filter: brightness(0.96); }
.selo__marca { font-size: 11px; }
.selo__delta { font-variant-numeric: tabular-nums; }
.selo__delta--bom { color: #0a5c38; }
.selo__delta--ruim { color: #a13312; }
.selo[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--color-sky-signal); }

/* O balão fica preso à linha e nunca sai da tela pela direita — no celular ele
   ocupa a largura toda em vez de tentar caber ao lado do selo. */
.balao {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20;
  background: var(--color-paper-white); border-radius: var(--radius-lg);
  padding: var(--spacing-12); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
  border: 1px solid var(--border-hairline);
}
.balao__texto {
  margin: 0; font-size: var(--text-body-sm); line-height: 1.45;
  color: var(--text-primary); max-width: 56ch;
}
.balao__precos {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-8);
  margin-top: var(--spacing-8); padding-top: var(--spacing-8);
  border-top: 1px solid var(--color-cloud-gray);
  font-size: 11px; color: var(--text-meta); font-variant-numeric: tabular-nums;
}
.balao__seta { color: var(--color-sky-signal); }

/* ---- o mercado na linha: média nos e-commerces e a margem --------------- */
/* Mesmo padrão do selo de pontos: número no selo, conta no balão. Verde-água
   quando a margem é positiva; pêssego quando a compra sai mais cara do que o
   e-commerce vende — o sinal que o comprador não pode deixar passar. */
.linha__mercado { display: inline-flex; }
.selo--mercado { background: var(--color-mint-wash); color: #0a5c38; }
.selo--mercado-negativa { background: var(--color-peach-wash); color: #a13312; }
.balao__nota { margin: var(--spacing-8) 0 0; font-size: 11px; color: var(--text-meta); }
.extrato__coluna--mercado { background: var(--color-mint-wash); }
.extrato__delta--bom { color: #0a5c38; }
.extrato__delta--ruim { color: #a13312; }

/* Pedido curto: a barra é `sticky bottom: 0` e só encosta no rodapé se a caixa
   do pai chegar lá. Num pedido de duas linhas ela parava no fim do conteúdo,
   com meia janela de canvas vazio embaixo. Esta corrente de flex estica
   `.pedido` até o fim da janela e joga a barra para baixo — em pedido longo o
   `auto` vira 0 e nada muda. (`turbo-frame` nasce `display: inline`: uma caixa
   inline embrulhando blocos, que não repassa altura nenhuma.) */
/* A corrente começa no `.quadro`, e não no `body`: desde o menu lateral o body
   é a LINHA [menu | quadro], e pedir coluna a ele empilhava o menu em cima do
   conteúdo — menu cortado e barra do topo rolando junto. O `.quadro` já é a
   coluna da tela; o que falta aqui é só o `min-height` para haver folga que o
   `margin-top: auto` da barra possa comer. */
.quadro:has(.barra) { min-height: 100dvh; }
/* Fora do layout com menu (uma tela de pedido sem menu, se um dia houver) a
   regra antiga continua valendo. */
body:not(.com-menu):has(.barra) { min-height: 100dvh; display: flex; flex-direction: column; }
/* `width: 100%` porque margem `auto` no eixo transversal de um flex container
   DESLIGA o stretch: sem isto a `.pagina` deixava de ocupar a largura e virava
   fit-content — 743px numa janela de 1451px. */
.quadro:has(.barra) .pagina, body:not(.com-menu):has(.barra) .pagina {
  width: 100%; flex: 1 1 auto; display: flex; flex-direction: column;
}
.quadro:has(.barra) .pagina > turbo-frame#pedido, body:not(.com-menu):has(.barra) .pagina > turbo-frame#pedido {
  display: flex; flex-direction: column; flex: 1 1 auto;
}
.quadro:has(.barra) .pedido, body:not(.com-menu):has(.barra) .pedido { flex: 1 1 auto; display: flex; flex-direction: column; }
.quadro:has(.barra) .barra, body:not(.com-menu):has(.barra) .barra { margin-top: auto; }
/* O `margin-top: auto` come o respiro de 16px quando não há folga; o bloco
   logo acima da barra devolve. */
.quadro:has(.barra) .pedido > :nth-last-child(2), body:not(.com-menu):has(.barra) .pedido > :nth-last-child(2) { margin-bottom: var(--spacing-16); }

/* ---- a barra de fechamento ---------------------------------------------- */
/* Grudada no rodapé: o total e o botão de enviar não podem depender de o
   comprador rolar até o fim de um pedido de 40 linhas. */
.barra {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: var(--spacing-16);
  margin-top: var(--spacing-16);
  padding: var(--spacing-12) var(--spacing-16);
  /* Instalado como app no iPhone, a barra encosta na faixa do gesto de voltar
     à home; sem o inset o botão de enviar fica embaixo dela. */
  padding-bottom: calc(var(--spacing-12) + env(safe-area-inset-bottom));
  background: var(--surface-dark-brand); color: var(--text-on-dark);
  border-radius: var(--radius-cards-sm);
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.12);
}
.barra__conta { display: flex; flex-direction: column; }
.barra__total {
  font-size: var(--text-subheading); font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.barra__nota { font-size: 11px; color: var(--text-on-dark-muted); }
.barra .botao { margin-left: auto; }

/* ---- desktop ------------------------------------------------------------ */
@media (min-width: 720px) {
  .pedido__cabecalho h1 { font-size: var(--text-heading); letter-spacing: var(--tracking-heading); }
  .extrato__numeros { grid-template-columns: repeat(3, 1fr); }

  /* Com espaço, a linha vira uma faixa só: nome à esquerda, dinheiro e
     controles à direita, sem a quebra que o celular exige. */
  .linha { display: grid; grid-template-columns: 1fr auto; gap: var(--spacing-8) var(--spacing-16); align-items: center; }
  .linha__topo { grid-column: 1; }
  .linha__sinais { grid-column: 1; margin-top: 0; }
  .linha__acoes { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; justify-content: flex-end; }
  /* Com espaço, o balão não precisa ocupar a linha inteira. */
  .balao { right: auto; min-width: 380px; max-width: 520px; }
  .troca { flex: 0 0 auto; }
  .troca__lista { position: static; }
}

@media (max-width: 480px) {
  .pagina { padding: var(--spacing-16) var(--spacing-12) var(--spacing-32); }
  .topo {
    padding: var(--spacing-8) var(--spacing-12); gap: var(--spacing-8);
    flex-wrap: wrap; row-gap: 2px;
  }
  .topo__marca { font-size: var(--text-body); }
  .topo__loja { flex: 1 1 100%; order: 3; font-size: 11px; }
  .topo__cnpj { display: none; }
  .topo__direita { gap: var(--spacing-12); }
  .topo a { font-size: var(--text-caption); }
}

/* ---- entrada da lista --------------------------------------------------- */
/* Abas roláveis: no celular quatro caixas empilhadas empurrariam o botão para
   fora da primeira dobra. */
.entradas {
  display: flex; gap: var(--spacing-8); margin-bottom: var(--spacing-16);
  overflow-x: auto; padding-bottom: 4px; scrollbar-width: none;
}
.entradas::-webkit-scrollbar { display: none; }
.entrada {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px;
  padding: var(--spacing-12) var(--spacing-16); border-radius: var(--radius-lg);
  background: var(--surface-card); text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--border-hairline); min-width: 150px;
}
.entrada--atual {
  background: var(--surface-dark-brand); color: var(--text-on-dark);
  box-shadow: none;
}
.entrada__titulo { font-size: var(--text-body-sm); font-weight: var(--font-weight-medium); }
.entrada__ajuda { font-size: 11px; color: var(--text-meta); }
.entrada--atual .entrada__ajuda { color: var(--text-on-dark-muted); }

/* O cartão da escolha de loja (só a plataforma vê) fica entre o cabeçalho e as
   abas — precisa de respiro antes das abas encostarem. */
.cartao--escolha { margin-bottom: var(--spacing-16); }

.forma__rotulo {
  display: block; font-size: var(--text-body-sm); font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-8);
}
.forma__area {
  width: 100%; padding: var(--spacing-12); border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-body-sm); line-height: 1.5; resize: vertical;
}
/* ---- a caixa de arquivo: clicar, arrastar ou colar ---------------------- */
.solta { position: relative; }
.solta__area {
  display: flex; flex-direction: column; align-items: center; gap: var(--spacing-4);
  padding: var(--spacing-32) var(--spacing-16); cursor: pointer; text-align: center;
  border: 1px dashed var(--border-mid); border-radius: var(--radius-cards-sm);
  background: var(--color-cloud-gray);
  transition: border-color 120ms ease, background-color 120ms ease;
}
.solta__area:hover { border-color: var(--color-canopy-green); }
/* O campo está escondido, então o anel de foco tem que aparecer na caixa —
   senão quem navega pelo teclado não vê onde está. */
.solta__area:focus-within {
  outline: 2px solid var(--focus-ring); outline-offset: 2px;
}
.solta--sobre .solta__area {
  border-color: var(--color-leaf-bright); border-style: solid;
  background: var(--color-sage-wash);
}
.solta__icone { font-size: var(--text-heading-sm); line-height: 1; }
.solta__chamada {
  font-size: var(--text-body-sm); font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}
.solta__atalho { font-size: var(--text-caption); color: var(--text-meta); }
.solta__atalho kbd {
  font-family: inherit; background: var(--surface-card); border-radius: 4px;
  border: 1px solid var(--border-hairline); padding: 0 4px;
}
/* Escondido da vista, NÃO do teclado nem do clique no rótulo: `display: none`
   tira o campo da ordem de tabulação e some com o anel de foco. */
.solta__campo {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.solta__escolhido {
  margin: var(--spacing-8) 0 0; font-size: var(--text-caption);
  color: var(--text-secondary);
}
.solta__aviso {
  margin: var(--spacing-8) 0 0; padding: var(--spacing-8) var(--spacing-12);
  background: var(--color-peach-wash); color: #a13312;
  border-radius: var(--radius-lg); font-size: var(--text-caption);
}
.solta__previa {
  display: block; margin-top: var(--spacing-8); max-height: 220px;
  border-radius: var(--radius-lg); border: 1px solid var(--border-hairline);
}
.forma__ajuda {
  margin: var(--spacing-8) 0 0; font-size: var(--text-caption);
  color: var(--text-meta); max-width: 62ch; line-height: 1.5;
}
.forma__ajuda code, .forma__aviso code {
  background: var(--color-cloud-gray); border-radius: 4px; padding: 1px 5px;
  font-size: 0.92em;
}
.forma__aviso {
  margin: var(--spacing-12) 0 0; padding: var(--spacing-8) var(--spacing-12);
  background: var(--color-peach-wash); color: #a13312;
  border-radius: var(--radius-lg); font-size: var(--text-caption);
}
.forma__acoes {
  display: flex; align-items: center; gap: var(--spacing-8);
  margin-top: var(--spacing-20);
}

/* ---- conferência do que a IA leu ---------------------------------------- */
.conferir {
  background: var(--color-peach-wash); border-radius: var(--radius-cards-sm);
  padding: var(--spacing-12) var(--spacing-16); margin-bottom: var(--spacing-16);
}
.conferir__titulo {
  font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold);
  color: #a13312; margin: 0 0 4px;
}
.conferir__texto { margin: 0; font-size: var(--text-caption); color: #a13312; max-width: 60ch; }

/* ---- a conversa sobre o pedido ----------------------------------------- */
/* No celular o painel sobe do rodapé e ocupa a tela; no desktop encosta no
   canto. O mesmo HTML, porque a conversa é a mesma — o que muda é o espaço. */
.conversa__gatilho {
  position: fixed; right: var(--spacing-16); bottom: 92px; z-index: 30;
  display: inline-flex; align-items: center; gap: var(--spacing-8);
  border: 0; border-radius: 999px; cursor: pointer; font-family: inherit;
  padding: 12px var(--spacing-20); font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  background: var(--color-canopy-green); color: var(--text-on-dark);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}
.conversa__gatilho:hover { filter: brightness(1.15); }
.conversa__gatilho-texto { display: none; }
.conversa__contagem {
  background: var(--color-coral-pulse); border-radius: 999px;
  padding: 1px 7px; font-size: 11px;
}

/* `display` no CSS vence o `hidden` do HTML (que é só o display:none do
   navegador, de especificidade menor). Sem esta regra o painel fica invisível
   mas continua na frente da tela, engolindo o clique do próprio botão que o
   abriria. */
.conversa__painel[hidden] { display: none; }
.conversa__painel {
  position: fixed; top: auto; right: 0; left: 0; z-index: 40;
  /* O teclado do celular não encolhe a `dvh` nem empurra elemento fixo: ele só
     cobre o rodapé da tela. Como o campo de mensagem mora exatamente ali, ele
     sumia atrás do teclado no instante em que era tocado — não dava para
     escrever no chat. O JS mede a faixa coberta pela `visualViewport` e
     escreve em `--teclado`; aqui o painel se apoia em cima dela. */
  bottom: var(--teclado, 0px);
  /* Altura FIXA (o histórico precisa de um limite para rolar dentro dele), mas
     modesta: 82dvh cobria a tela inteira e o pedido sumia atrás. Em conversa
     curta o painel encolhe até o conteúdo; em conversa longa para em 66dvh.
     `dvh` porque a barra do navegador do celular come parte da `vh`. */
  display: flex; flex-direction: column; height: fit-content; max-height: 66dvh;
  background: var(--surface-card);
  border-radius: var(--radius-cards-sm) var(--radius-cards-sm) 0 0;
  box-shadow: 0 -6px 32px rgba(0, 0, 0, 0.28);
  padding-bottom: env(safe-area-inset-bottom);
}
/* Com o teclado aberto sobra pouca tela, e 66dvh dela já não cabe. O painel
   passa a usar tudo o que restou — o cabeçalho continua visível, que é como se
   sabe de que conversa se trata. */
.conversa--teclado .conversa__painel {
  max-height: calc(100dvh - var(--teclado, 0px) - var(--spacing-12));
}
.conversa--teclado .conversa__historico { max-height: none; }
/* Sem transição a barra inteira salta quando o teclado abre. */
@media (prefers-reduced-motion: no-preference) {
  .conversa__painel { transition: bottom 120ms ease-out; }
}
.conversa__cabecalho {
  display: flex; align-items: flex-start; gap: var(--spacing-12);
  padding: var(--spacing-16); border-bottom: 1px solid var(--border-hairline);
}
.conversa__cabecalho strong { display: block; font-size: var(--text-body-sm); }
.conversa__ajuda { font-size: 11px; color: var(--text-meta); }
.conversa__fechar {
  margin-left: auto; border: 0; background: transparent; cursor: pointer;
  font-size: var(--text-heading-sm); line-height: 1; color: var(--text-meta);
  font-family: inherit;
}

.conversa__historico {
  flex: 1 1 auto; overflow-y: auto; padding: var(--spacing-16);
  display: flex; flex-direction: column; gap: var(--spacing-12);
  /* `min-height: 0` é o que faz o histórico rolar.
     Um item de flex não encolhe abaixo do tamanho do próprio conteúdo sem
     isto: o histórico crescia, o painel estourava a altura, nenhum overflow
     interno acontecia — e o dedo, sem nada para rolar ali, rolava a tela de
     produtos por trás. */
  min-height: 0;
  /* O painel agora se dimensiona pelo conteúdo, então o teto de rolagem é
     daqui: sem ele o histórico cresceria e empurraria o campo de mensagem para
     fora da tela — que é como o campo "sumia". */
  max-height: 52dvh;
  /* E o embalo não vaza para a página quando a rolagem chega ao fim. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* Conversa cresce de baixo para cima, como em qualquer chat: com duas falas
   numa coluna de tela inteira, o conteúdo grudava no topo e sobrava meia tela
   de vazio entre ele e o campo de escrever. `margin-top: auto` no primeiro
   filho empurra tudo para baixo quando há folga e vira 0 quando não há — ao
   contrário de `justify-content: flex-end`, que corta o começo da rolagem. */
.conversa__historico > *:first-child { margin-top: auto; }

.conversa__vazio { font-size: var(--text-caption); color: var(--text-meta); }
.conversa__vazio ul { margin: var(--spacing-8) 0 0; padding-left: var(--spacing-16); list-style: disc; }
.conversa__vazio li { margin-bottom: 4px; }

.fala { max-width: 88%; display: flex; flex-direction: column; gap: 4px; }
.fala--comprador { align-self: flex-end; align-items: flex-end; }
.fala__texto {
  margin: 0; padding: var(--spacing-8) var(--spacing-12);
  border-radius: var(--radius-lg); font-size: var(--text-body-sm); line-height: 1.45;
  background: var(--color-cloud-gray);
}
.fala--comprador .fala__texto {
  background: var(--color-canopy-green); color: var(--text-on-dark);
}
.fala__texto p { margin: 0 0 var(--spacing-8); }
.fala__texto p:last-child { margin-bottom: 0; }
/* O que o agente FEZ, separado do que ele disse: ação é fato, fala é conversa. */
.fala__acoes {
  margin: 0; padding: var(--spacing-8) var(--spacing-12); list-style: none;
  background: var(--color-sage-wash); border-radius: var(--radius-lg);
  font-size: var(--text-caption); color: #0a5c38;
}
/* A marca de confirmação virou ícone vetorial no ERB (ver icones.css): um
   `content` de texto é a última porta por onde um glifo volta ao sistema. */
.fala__acoes li { display: flex; align-items: flex-start; gap: 6px; }
.fala__hora { font-size: 10px; color: var(--text-meta); }

.conversa__forma {
  /* `flex-shrink: 0` — o campo de mensagem é a razão de o painel existir e não
     pode ser espremido pelo histórico. */
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--spacing-8);
  padding: var(--spacing-12) var(--spacing-16);
  border-top: 1px solid var(--border-hairline);
}
.conversa__campo {
  flex: 1 1 auto; min-width: 0; padding: 10px var(--spacing-12);
  border: 1px solid var(--border-hairline); border-radius: 999px;
  font-family: inherit; font-size: var(--text-body-sm);
}
.conversa__voz, .conversa__enviar {
  flex: 0 0 auto; width: 40px; height: 40px; border: 0; border-radius: 999px;
  cursor: pointer; font-family: inherit; font-size: var(--text-body);
  background: var(--color-cloud-gray); color: var(--text-primary);
}
.conversa__enviar { background: var(--color-coral-pulse); color: var(--color-paper-white); }
/* Ouvindo: o botão pulsa. Sem sinal, quem fala não sabe se foi ouvido. */
.conversa__voz--ouvindo {
  background: var(--color-coral-pulse); color: var(--color-paper-white);
  animation: pulso 1.2s ease-in-out infinite;
}
@keyframes pulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 100, 59, 0.5); }
  50% { box-shadow: 0 0 0 8px rgba(255, 100, 59, 0); }
}
.conversa__aviso {
  margin: 0; padding: 0 var(--spacing-16) var(--spacing-12);
  font-size: var(--text-caption); color: var(--text-meta);
}
.conversa__campo:disabled, .conversa__enviar:disabled {
  opacity: 0.5; cursor: not-allowed;
}

/* Com o painel aberto o gatilho não serve para nada e fica atrás dele.
   Some — o botão de fechar já está no cabeçalho. */
.conversa:has([data-conversa-target="painel"]:not([hidden])) .conversa__gatilho {
  display: none;
}

@media (min-width: 720px) {
  .conversa__gatilho-texto { display: inline; }
  /* Acima da barra de fechamento: ela é sticky no rodapé, e cobri-la esconde
     justamente o botão de enviar o pedido. */
  .conversa__painel {
    top: auto; left: auto; right: var(--spacing-24);
    bottom: calc(96px + var(--teclado, 0px));
    width: 420px; max-height: 66dvh;
    border-radius: var(--radius-cards-sm);
  }
}

/* Com espaço, o chat vira coluna: encosta na direita, do topo ao rodapé, e a
   página encolhe para caber ao lado. Flutuando por cima ele escondia justamente
   os controles de quantidade e o botão de trocar — o comprador teria que fechar
   o chat para fazer o que o chat acabou de sugerir. */
@media (min-width: 1100px) {
  .conversa__painel {
    top: 0; right: 0; bottom: auto; left: auto; width: 400px;
    /* Coluna cheia. O desconto do teclado continua aqui porque tablet em
       paisagem cai nesta faixa e tem teclado como qualquer celular. */
    height: calc(100dvh - var(--teclado, 0px)); max-height: none;
    border-radius: 0; border-left: 1px solid var(--border-hairline);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.10);
  }
  .conversa--teclado .conversa__painel { max-height: none; }
  /* A coluna do chat é `fixed`, fora do fluxo. Reservar o espaço com um
     `padding-right` na página não bastava: ela continuava CENTRADA na janela
     inteira (max-width 1280 + margin auto) e só depois era espremida — num
     monitor de 1451px sobrava uma faixa morta de 86px à esquerda e o conteúdo
     ficava com 856px. Reservando no `body`, a janela útil encolhe de verdade e
     tudo — topo inclusive — se recentra no que restou. */
  body.com-conversa { padding-right: 400px; }
  /* Coluna inteira: aqui o histórico usa o que sobrar, não um teto de 52dvh. */
  .conversa__historico { max-height: none; }
}

/* ======================================================================== */
/* CADASTROS — as fichas do portal: PDV, produto, indústria, distribuidor e  */
/* tutor. Lista com busca de um lado, formulário do outro; nada mais.        */
/* ======================================================================== */

/* A barra de abas. Rola na horizontal no celular, como o menu do topo: sete
   destinos empilhados comeriam a primeira dobra inteira. */
.abas {
  display: flex; gap: var(--spacing-4); margin-bottom: var(--spacing-24);
  overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.abas::-webkit-scrollbar { display: none; }
.aba {
  flex: 0 0 auto; text-decoration: none; white-space: nowrap;
  padding: var(--spacing-8) var(--spacing-16); border-radius: var(--radius-tags);
  font-size: var(--text-body-sm); color: var(--text-secondary);
  background: var(--surface-card); box-shadow: inset 0 0 0 1px var(--border-hairline);
}
.aba:hover { color: var(--text-heading-color); box-shadow: inset 0 0 0 1px var(--color-canopy-green); }
.aba--atual {
  background: var(--color-canopy-green); color: var(--color-paper-white);
  box-shadow: none; font-weight: var(--font-weight-medium);
}
.aba--atual:hover { color: var(--color-paper-white); }

/* O painel: o que existe e quanto tem de cada. */
.cadastros {
  display: grid; gap: var(--spacing-16);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.cadastros__cartao {
  display: flex; flex-direction: column; gap: var(--spacing-4);
  background: var(--surface-card); border-radius: var(--radius-cards-sm);
  padding: var(--spacing-20); text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--border-hairline);
  transition: box-shadow 120ms ease;
}
.cadastros__cartao:hover { box-shadow: inset 0 0 0 1px var(--color-canopy-green); }
.cadastros__titulo {
  font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-meta);
}
.cadastros__total {
  font-size: var(--text-heading-sm); font-weight: var(--font-weight-semibold);
  color: var(--text-heading-color); line-height: 1.1;
}
.cadastros__ajuda { font-size: var(--text-caption); color: var(--text-meta); line-height: 1.4; }

/* A busca. Fica entre as abas e a lista porque é o que se usa primeiro quando
   o cadastro passa de cem linhas. */
.busca { display: flex; gap: var(--spacing-8); margin-bottom: var(--spacing-16); }
.busca__campo {
  flex: 1 1 auto; min-width: 0; padding: 10px var(--spacing-16);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-buttons);
  font-family: inherit; font-size: var(--text-body-sm); background: var(--surface-card);
}
.busca__campo:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; }

.recorte {
  margin: var(--spacing-12) 0 0; font-size: var(--text-caption); color: var(--text-meta);
}

/* Navegação de página real (offset/limit), para a lista que não cabe mais no
   corte de cem do `recortar`. Mesma linguagem visual das abas: pílula com
   contorno, a atual vira sólida em canopy-green. */
.paginacao {
  display: flex; align-items: center; gap: var(--spacing-4);
  margin-top: var(--spacing-16); flex-wrap: wrap;
}
.paginacao__seta, .paginacao__numero, .paginacao__reticencias {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 28px; padding: 0 var(--spacing-8);
  border-radius: var(--radius-icons); font-size: var(--text-caption);
  font-variant-numeric: tabular-nums;
}
.paginacao__seta, .paginacao__numero {
  color: var(--text-secondary); background: var(--surface-card); text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--border-hairline); transition: box-shadow 0.12s, color 0.12s;
}
.paginacao__seta:hover, .paginacao__numero:hover {
  color: var(--text-heading-color); box-shadow: inset 0 0 0 1px var(--color-canopy-green);
}
.paginacao__seta--desabilitada { opacity: 0.35; box-shadow: none; }
.paginacao__numero--atual {
  background: var(--color-canopy-green); color: var(--color-paper-white);
  box-shadow: none; font-weight: var(--font-weight-medium);
}
.paginacao__reticencias { color: var(--text-meta); }
.paginacao__numeros { display: flex; align-items: center; gap: var(--spacing-4); list-style: none; margin: 0; padding: 0; }
.paginacao__legenda { margin-left: var(--spacing-8); font-size: var(--text-caption); color: var(--text-meta); white-space: nowrap; }

/* Tabela mais densa: menos respiro vertical na célula, para uma lista longa
   caber mais linha por tela sem perder a leitura. */
.tabela--densa td { padding: var(--spacing-8) var(--spacing-12); }

/* A descrição do produto pode passar de cem caracteres — sem teto ela puxa a
   tabela inteira pra largura dela. Uma linha, cortada com reticências; o nome
   inteiro fica no title (e sempre visível em Editar). */
.tabela__produto {
  max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Formulário de cadastro: grade que quebra sozinha, sem coluna fixa. */
.forma__bloco { border: 0; padding: 0; margin: 0 0 var(--spacing-24); }
.forma__legenda {
  padding: 0; margin-bottom: var(--spacing-12);
  font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-meta);
}
.forma__grade {
  display: grid; gap: var(--spacing-16);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: var(--spacing-24);
}
.forma__bloco .forma__grade { margin-bottom: 0; }
/* Nome e razão social não cabem em 180px: ocupam a linha quando há espaço. */
.campo--largo { grid-column: span 2; }
.campo--curto { max-width: 200px; }
@media (max-width: 480px) {
  .campo--largo { grid-column: span 1; }
  .campo--curto { max-width: none; }
}
.campo { margin-bottom: 0; }
.campo select, .campo textarea {
  width: 100%; padding: 10px var(--spacing-12);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-lg);
  font-family: inherit; font-size: var(--text-body); background: var(--surface-card);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 2px solid var(--focus-ring); outline-offset: 1px;
}
.campo__ajuda {
  margin: var(--spacing-4) 0 0; font-size: var(--text-caption);
  color: var(--text-meta); line-height: 1.4;
}

/* Remover fica na mesma linha, mas do outro lado: perto o bastante para ser
   achado, longe o bastante para não ser clicado no lugar de salvar. */
.forma__remover { margin-left: auto; }
.botao--perigo {
  background: transparent; color: var(--color-status-critical);
  box-shadow: inset 0 0 0 1px var(--color-status-critical);
}
.botao--perigo:hover { background: #fde7e5; }

/* Dois cartões seguidos (a lista de pets e o formulário que a alimenta)
   encostavam um no outro e viravam um bloco só. */
.cartao + .cartao { margin-top: var(--spacing-16); }

/* A linha da tabela de cadastro carrega duas informações: o nome e o que
   explica o nome (razão social, texto que veio da captura). */
.tabela__nota {
  display: block; font-size: var(--text-caption); color: var(--text-meta);
  font-weight: var(--font-weight-regular);
}
/* Endereço é a única coluna que pode quebrar: forçá-la em uma linha só empurra
   os botões para fora da tela. */
.tabela__endereco { white-space: normal; min-width: 24ch; max-width: 40ch; }
.tabela__acoes { text-align: right; }

/* Onde estou, no menu do topo. */
.topo a.topo__atual { color: var(--color-paper-white); font-weight: var(--font-weight-medium); }

/* ======================================================================== */
/* MENU LATERAL, BARRA, TRILHA E PERFIL                                     */
/* Coluna fixa no computador; gaveta no celular. A gaveta abre por CSS puro  */
/* — um Stimulus só para isso é peso que não se paga.                       */
/* ======================================================================== */

body.com-menu { display: flex; min-height: 100dvh; background: var(--surface-page-canvas); }

.menu {
  flex: 0 0 264px; width: 264px; display: flex; flex-direction: column;
  background: var(--color-canopy-green); color: var(--text-on-dark);
  position: sticky; top: 0; height: 100dvh; overflow-y: auto;
}
.menu__topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--spacing-20) var(--spacing-20) var(--spacing-12);
}
.menu__marca {
  font-weight: var(--font-weight-bold); font-size: var(--text-subheading);
  letter-spacing: -0.019em;
}
.menu__fechar { display: none; font-size: var(--text-heading-sm); cursor: pointer; line-height: 1; }
.menu__cortina { display: none; }
.gatilho-do-menu { display: none; }

/* Quem sou eu agora — sem isto, quem tem acesso a duas entidades não sabe de
   que lado da mesa está. */
.contexto {
  margin: 0 var(--spacing-12) var(--spacing-16); padding: var(--spacing-12);
  background: rgba(255, 255, 255, 0.08); border-radius: var(--radius-cards-sm);
  display: flex; flex-direction: column; gap: 2px;
}
.contexto__tipo {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-leaf-bright); font-weight: var(--font-weight-semibold);
}
.contexto__nome { font-size: var(--text-body-sm); font-weight: var(--font-weight-medium); }
.contexto__papel { font-size: var(--text-caption); color: var(--text-on-dark-muted); }
.contexto__troca { margin-top: var(--spacing-8); }
.contexto__troca summary {
  cursor: pointer; font-size: var(--text-caption); color: var(--color-leaf-bright);
  list-style: none;
}
.contexto__troca summary::-webkit-details-marker { display: none; }
.contexto__troca ul { margin-top: var(--spacing-8); display: grid; gap: 4px; }
.contexto__troca form { margin: 0; }
.contexto__opcao {
  display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left;
  padding: var(--spacing-8); border: 0; border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.06); color: var(--text-on-dark); cursor: pointer;
}
.contexto__opcao:hover { background: rgba(255, 255, 255, 0.14); }
.contexto__opcao--atual { box-shadow: inset 0 0 0 1px var(--color-leaf-bright); }
.contexto__opcao-nome { font-size: var(--text-body-sm); }
.contexto__opcao-papel { font-size: 11px; color: var(--text-on-dark-muted); }

.menu__navegacao { padding: 0 var(--spacing-12) var(--spacing-24); display: grid; gap: 2px; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.grupo > summary {
  display: flex; align-items: center; gap: var(--spacing-8); cursor: pointer;
  padding: var(--spacing-8) var(--spacing-12); border-radius: var(--radius-lg);
  font-size: var(--text-body-sm); color: var(--text-on-dark-muted);
  list-style: none; user-select: none;
}
.grupo > summary::-webkit-details-marker { display: none; }
.grupo > summary:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-on-dark); }
/* O atalho ocupa a linha de um título de grupo, mas é link: mesma métrica para
   não desalinhar a coluna do menu. */
.grupo__atalho {
  display: flex; align-items: center; gap: var(--spacing-8);
  padding: var(--spacing-8) var(--spacing-12); border-radius: var(--radius-lg);
  font-size: var(--text-body-sm); color: var(--text-on-dark-muted); text-decoration: none;
}
.grupo__atalho:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-on-dark); }
.grupo__atalho--atual {
  background: rgba(255, 255, 255, 0.16); color: var(--color-paper-white);
  font-weight: var(--font-weight-medium);
}
.grupo__icone { font-size: 14px; line-height: 1; }
.grupo__itens { margin: 2px 0 var(--spacing-8) var(--spacing-24); display: grid; gap: 1px; }
.grupo__item {
  display: block; padding: 7px var(--spacing-12); border-radius: var(--radius-lg);
  font-size: var(--text-body-sm); color: var(--text-on-dark-muted); text-decoration: none;
}
.grupo__item:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-on-dark); }
.grupo__item--atual {
  background: rgba(255, 255, 255, 0.16); color: var(--color-paper-white);
  font-weight: var(--font-weight-medium);
}

.quadro { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

/* O nome é `barra-do-topo` de propósito: `.barra` já é a barra de fechamento do
   pedido, e o `body:has(.barra)` dela põe a página inteira em coluna. */
.barra-do-topo {
  display: flex; align-items: center; gap: var(--spacing-16);
  padding: var(--spacing-12) var(--spacing-24);
  background: var(--surface-card); border-bottom: 1px solid var(--border-hairline);
  position: sticky; top: 0; z-index: 5;
}
.barra-do-topo__menu { display: none; font-size: var(--text-subheading); cursor: pointer; line-height: 1; }

.trilha { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px;
  font-size: var(--text-body-sm); overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.trilha::-webkit-scrollbar { display: none; }
.trilha__inicio, .trilha__passo { color: var(--text-meta); text-decoration: none; }
.trilha a:hover { color: var(--text-heading-color); }
.trilha__seta { color: var(--border-mid); }
.trilha__passo--atual { color: var(--text-heading-color); font-weight: var(--font-weight-medium); }

.perfil { position: relative; flex: 0 0 auto; }
.perfil__gatilho { list-style: none; cursor: pointer; display: block; }
.perfil__gatilho::-webkit-details-marker { display: none; }
.perfil__iniciais {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--color-canopy-green); color: var(--color-paper-white);
  font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold);
}
.perfil__painel {
  position: absolute; right: 0; top: calc(100% + 8px); width: 260px; z-index: 20;
  background: var(--surface-card); border-radius: var(--radius-cards-sm);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14); padding: var(--spacing-8);
  border: 1px solid var(--border-hairline);
}
.perfil__cabecalho {
  display: grid; gap: 2px; padding: var(--spacing-12);
  border-bottom: 1px solid var(--border-hairline); margin-bottom: var(--spacing-8);
}
.perfil__email, .perfil__papel { font-size: var(--text-caption); color: var(--text-meta); }
.perfil__link {
  display: block; width: 100%; text-align: left; padding: var(--spacing-8) var(--spacing-12);
  border: 0; background: transparent; border-radius: var(--radius-lg);
  font-size: var(--text-body-sm); color: var(--text-primary); text-decoration: none; cursor: pointer;
}
.perfil__link:hover { background: var(--color-cloud-gray); }
.perfil__link--sair { color: var(--color-status-critical); }
.perfil form { margin: 0; }

/* `margin: 0 auto` desliga o stretch do flex: sem `width: 100%` a página fica
   do tamanho do conteúdo e some para o meio da tela. */
body.com-menu .pagina {
  width: 100%; padding: var(--spacing-32) var(--spacing-24) var(--spacing-80);
}

@media (max-width: 900px) {
  .menu {
    position: fixed; left: 0; top: 0; z-index: 40; transform: translateX(-100%);
    transition: transform 180ms ease; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
  }
  .gatilho-do-menu:checked ~ .menu { transform: translateX(0); }
  .gatilho-do-menu:checked ~ .menu__cortina {
    display: block; position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, 0.4);
  }
  .menu__fechar, .barra-do-topo__menu { display: block; }
  body.com-menu .pagina { padding: var(--spacing-20) var(--spacing-16) var(--spacing-64); }
}

/* ---- painel inicial ----------------------------------------------------- */
.painel__numeros {
  display: grid; gap: var(--spacing-16); margin-bottom: var(--spacing-24);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.painel__numero {
  background: var(--surface-card); border-radius: var(--radius-cards-sm);
  padding: var(--spacing-16) var(--spacing-20);
}
.painel__rotulo {
  font-size: var(--text-caption); color: var(--text-meta);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.painel__valor {
  font-size: var(--text-heading-sm); font-weight: var(--font-weight-semibold);
  color: var(--text-heading-color); line-height: 1.15;
}
.painel__nota { font-size: var(--text-caption); color: var(--text-meta); }

/* ---- acesso negado ------------------------------------------------------ */
.negado { max-width: 60ch; margin: 8vh auto; text-align: center; }
.negado h1 { font-size: var(--text-heading); color: var(--text-heading-color); margin-bottom: var(--spacing-12); }
.negado__motivo {
  display: inline-block; margin: var(--spacing-16) 0; padding: var(--spacing-12) var(--spacing-16);
  background: var(--color-peach-wash); color: #a13312; border-radius: var(--radius-cards-sm);
  font-size: var(--text-body-sm);
}
.negado code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--text-caption); }

/* Permissão marcada uma a uma: caixa + rótulo na mesma linha. */
.campo--marcavel { display: flex; align-items: center; gap: var(--spacing-8); font-size: var(--text-body-sm); }
.campo--marcavel input { width: auto; }

/* ---- a ficha do produto (o que a coleta trouxe) e o filtro da lista ------ */
.busca__filtro { flex: 0 0 auto; max-width: 240px; }
.ficha { margin-top: var(--spacing-16); }
.ficha__titulo { margin: 0 0 4px; font-size: var(--text-subheading); }
.ficha__subtitulo {
  margin: var(--spacing-16) 0 var(--spacing-8); font-size: var(--text-body-sm);
  color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em;
}
.ficha__avaliacao { margin: var(--spacing-8) 0 0; font-size: var(--text-body-sm); color: var(--text-secondary); }
.ficha__texto { font-size: var(--text-body-sm); color: var(--text-primary); max-width: 72ch; }
.ficha__lista {
  display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 6px var(--spacing-16);
  margin: 0; font-size: var(--text-body-sm);
}
.ficha__lista dt { color: var(--text-meta); }
.ficha__lista dd { margin: 0; color: var(--text-primary); }
.ficha__valor { white-space: pre-line; max-width: 72ch; }
.ficha__irmaos { margin: 0; padding-left: var(--spacing-16); font-size: var(--text-body-sm); }
@media (max-width: 640px) { .ficha__lista { grid-template-columns: 1fr; gap: 2px; } .ficha__lista dd { margin-bottom: var(--spacing-8); } }