/* Frigopaiva: tokens do atendimento (vermelho carne #C8102E do site frigopaiva.com, neutros frios).
   Os nomes --e6-* vêm do app da Estação 6, de onde este foi feito: o CSS do app usa só estes papéis. Claro e escuro. */
:root {
  --fp-vermelho: #C8102E;
  --fp-vermelho-escuro: #8B0A1F;
  --fp-vermelho-claro: #E63946;
  --fp-grafite: #222222;
  --fp-cinza: #F5F5F5;
  --e6-verde: var(--fp-vermelho);    /* fundo do avatar sem foto */
  --e6-carvao: #26262B;              /* fundo do aviso (toast) */
  --e6-amarelo: #FFD9DE;             /* chip/etiqueta ligada */
  --e6-azul: #2F6FED;                /* contorno de foco */
  --e6-terra: var(--fp-vermelho-escuro);
  --e6-terroso: var(--fp-vermelho-claro);

  /* papéis semânticos — CLARO (padrão) */
  --e6-fundo: #F4F4F5;
  --e6-fundo-2: #FAFAFA;
  --e6-superficie: #FFFFFF;
  --e6-superficie-2: #ECECEE;
  --e6-linha: #E2E2E5;
  --e6-tinta: var(--fp-grafite);
  --e6-tinta-suave: #62646B;
  --e6-marca: var(--fp-vermelho);
  --e6-acento: var(--fp-vermelho);
  --e6-acento-tinta: #FFFFFF;
  --e6-sombra: 0 10px 30px rgba(20, 20, 24, .10);
  --e6-sombra-sm: 0 2px 10px rgba(20, 20, 24, .08);

  /* tipografia */
  --e6-fonte-titulo: "Archivo", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --e6-fonte-texto: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --e6-raio: 14px;
  --e6-raio-sm: 10px;
  --e6-raio-lg: 22px;

  /* scroll fino na cor da marca */
  --scroll-trilho: transparent;
  --scroll-polegar: #C9C9CE;
  --scroll-polegar-hover: var(--fp-vermelho);
}

/* ESCURO: grafite, nunca preto puro */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --e6-fundo: #17171A;
    --e6-fundo-2: #1B1B1F;
    --e6-superficie: #222226;
    --e6-superficie-2: #2B2B30;
    --e6-linha: #34343A;
    --e6-tinta: #F2F2F3;
    --e6-tinta-suave: #A9A9B1;
    --e6-marca: #EF4458;
    --e6-acento: #E0283F;
    --e6-acento-tinta: #FFFFFF;
    --e6-sombra: 0 14px 40px rgba(0, 0, 0, .5);
    --e6-sombra-sm: 0 2px 12px rgba(0, 0, 0, .4);
    --scroll-polegar: #45454C;
  }
}
:root[data-tema="escuro"] {
  --e6-fundo: #17171A;
  --e6-fundo-2: #1B1B1F;
  --e6-superficie: #222226;
  --e6-superficie-2: #2B2B30;
  --e6-linha: #34343A;
  --e6-tinta: #F2F2F3;
  --e6-tinta-suave: #A9A9B1;
  --e6-marca: #EF4458;
  --e6-acento: #E0283F;
  --e6-acento-tinta: #FFFFFF;
  --e6-sombra: 0 14px 40px rgba(0, 0, 0, .5);
  --e6-sombra-sm: 0 2px 12px rgba(0, 0, 0, .4);
  --scroll-polegar: #45454C;
}

html { scrollbar-width: thin; scrollbar-color: var(--scroll-polegar) var(--scroll-trilho); }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: var(--scroll-trilho); }
::-webkit-scrollbar-thumb { background: var(--scroll-polegar); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-polegar-hover); }

/* logo raster (PNG): a versão clara do logo no tema escuro */
.marca-logo { width: min(220px, 70%); height: auto; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .marca-logo { content: url("../img/logo-escuro.png"); } }
:root[data-tema="escuro"] .marca-logo { content: url("../img/logo-escuro.png"); }

/* chip do número (linha) em que o cliente escreveu */
.linha-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--e6-marca) 12%, transparent); color: var(--e6-marca); white-space: nowrap; }
.filtro-linha { margin: 0 12px 8px; }
.wa-grade { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.wa-grade .card-p h3 { margin: 0 0 6px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
.wa-grade .wa-caixa{min-height:120px}