/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.0_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/.pnpm/next@16.2.6_@babel+core@7.29.0_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/app/fv/fv-skin.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Identidade Nutrends (glass) — passe visual do app de Força de Vendas.
 * RE-SKIN: só apresentação. Escopo .fv-skin re-colore os tokens --color-* que os
 * componentes JÁ usam (inline e em classe) + adiciona os materiais de vidro.
 *
 * Truque: como os componentes referenciam var(--color-*), basta sobrescrever os
 * tokens aqui que o app inteiro veste a paleta clara Nutrends. O cabeçalho
 * re-sobrescreve os tokens de texto p/ branco (gradiente da marca).
 */

.fv-skin {
  /* paleta CLARA Nutrends + ORBES de cor da marca (dão o que o vidro refrata —
     sobre fundo liso o glass fica fraco). As orbes ficam no var(--color-bg), que
     todos os componentes usam, então o backdrop-blur dos cards as fosca/vibra. */
  --color-bg:
    radial-gradient(58% 48% at 86% 4%, rgba(31, 165, 151, 0.42), transparent 70%),
    radial-gradient(52% 42% at 6% 14%, rgba(62, 135, 196, 0.38), transparent 70%),
    radial-gradient(70% 52% at 50% 108%, rgba(95, 191, 87, 0.36), transparent 72%),
    linear-gradient(165deg, #eaf3f9 0%, #eaf5f0 55%, #eff6e8 100%);
  --color-text-primary: #16252b;
  --color-text-secondary: #637076;
  --color-border: rgba(22, 37, 43, 0.1);
  --color-card: rgba(255, 255, 255, 0.44);
  --color-surface: rgba(255, 255, 255, 0.58);
  --color-accent: #0e7c72;
  --color-accent-foreground: #ffffff;
  --color-error: #dd5b4e;
  --color-success: #2fa84f;
  --color-success-fg: #1f8f43;
  --color-success-bg: rgba(47, 168, 79, 0.14);
  --color-warning: #e39a2e;
  --color-warning-fg: #b9781b;
  --color-warning-bg: rgba(227, 154, 46, 0.16);
  --color-danger-fg: #c0392b;
  --color-danger-bg: rgba(221, 91, 78, 0.14);

  /* materiais de vidro — blur forte + saturação (vibrancy, estilo Apple) */
  --fv-blur: blur(24px) saturate(185%);
  --fv-header-grad: linear-gradient(115deg, #3e87c4 0%, #22ac9f 55%, #5fbf57 100%);
  --fv-cta-bg: rgba(14, 124, 114, 0.88);
  --fv-tint-bg: rgba(31, 165, 151, 0.16);
  --fv-tint-border: rgba(31, 165, 151, 0.32);

  color-scheme: light;
  color: var(--color-text-primary);
  background: var(--color-bg);
  min-height: 100vh;
}

/* Vidro líquido: blur+vibrancy (var) + BRILHO de borda (specular highlight no topo
   + aro interno claro) + sombra de profundidade → o "lente" da Apple. A cor
   translúcida vem do bg inline (var(--color-card/surface)) já re-colorido; basta
   acrescentar a classe. */
.fv-glass {
  -webkit-backdrop-filter: var(--fv-blur);
  backdrop-filter: var(--fv-blur);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    0 10px 30px rgba(22, 37, 43, 0.13);
}

/* Cabeçalho — gradiente da marca + texto branco (re-sobrescreve os tokens de
   texto/borda no escopo do header, então os filhos que usam var(--color-text-*)
   ficam brancos sozinhos). */
.fv-header {
  /* gradiente da marca + sheen branco no topo (brilho "líquido") */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 46%),
    var(--fv-header-grad) !important;
  --color-text-primary: #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.9);
  --color-border: rgba(255, 255, 255, 0.35);
  color: #ffffff;
  border-color: transparent !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 8px 24px rgba(22, 37, 43, 0.2);
}

/* Botão CTA / "+" — vidro teal-tint (não gradiente cheio) + brilho. */
.fv-cta {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 50%),
    var(--fv-cta-bg) !important;
  color: #ffffff !important;
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 8px 20px rgba(14, 124, 114, 0.38);
}

/* Chip ativo / botão suave teal-tint. */
.fv-tint {
  background: var(--fv-tint-bg) !important;
  color: var(--color-accent) !important;
  border: 1px solid var(--fv-tint-border) !important;
}

/* Faixas horizontais de filtro (pílulas): mantém o scroll por arraste, mas esconde
   a barra de rolagem — senão sobra um traço cinza embaixo dos filtros. */
.fv-noscroll {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Edge antigo */
}
.fv-noscroll::-webkit-scrollbar {
  display: none; /* Chrome / Safari / Edge */
}

/* Fallback: sem backdrop-filter (Android simples) → vidro sólido translúcido. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .fv-skin {
    --color-card: rgba(255, 255, 255, 0.92);
    --color-surface: rgba(255, 255, 255, 0.95);
  }
  .fv-cta {
    background: #0e7c72 !important;
  }
}

/* Modo MASTER ("ver como representante"): a faixa fixa (MasterBar, h-11 = 2.75rem)
   ocupa o topo; os cabeçalhos das telas (.fv-header sticky top-0) recuam pra colar
   logo ABAIXO dela quando grudam, sem sobrepor. !important pra ganhar do utilitário
   top-0 do Tailwind. */
.fv-skin[data-master] .fv-header {
  top: 2.75rem !important;
}

/* TABLET — o app é mobile-first: cada tela é uma coluna `max-w-md` (28rem)
   centralizada. Em telas grandes (tablet) ela fica estreita no meio, com sobra
   dos lados ("não dimensiona pro tablet"). Aqui alargamos TODAS as colunas
   .max-w-md de uma vez — conteúdo, barras fixas (carrinho/CTA), BottomNav e a
   folha do pedido — pra ocuparem bem a tela E ficarem ALINHADAS entre si. O
   celular (≤767px) não muda: ali a coluna já é mais larga que a tela.
   Os diálogos pequenos usam max-w-sm e não são afetados. */
@media (min-width: 768px) {
  .fv-skin .max-w-md {
    /* Preenche a tela do tablet (qualquer tamanho), deixando só uma margem fina
       de ~2% de cada lado; o cap de 90rem evita ficar absurdo num monitor grande. */
    max-width: min(96vw, 90rem);
  }
}