/* Vitrine — carrossel, capas e o encaixe do shell do app dentro de cada slide.
   O resto (painéis, gráficos, cores por domínio) vem intacto do CSS do app. */

html, body { height: 100%; overflow: hidden; }
/* Transparente: o iframe some no fundo da página e o que aparece são os painéis.
   (O site e o app declaram o mesmo color-scheme escuro; com esquemas diferentes o
   navegador pintaria um fundo opaco por baixo.) */
html, body { background: transparent; }

/* ---------- Carrossel sem fim ----------
   Os quatro painéis ficam empilhados no mesmo lugar e o JS só os desloca de lado
   (--larg e a posição vêm de vitrine.js). O do centro fica nítido; os vizinhos
   aparecem nas laterais desfocados e apagados, e as pontas somem no fundo: é o
   que diz "dá para arrastar" sem botão nenhum. */
.vt {
  position: relative; height: 100%; overflow: hidden; touch-action: pan-y;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade, 0px), #000 calc(100% - var(--fade, 0px)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--fade, 0px), #000 calc(100% - var(--fade, 0px)), transparent 100%);
}
.vt img { -webkit-user-drag: none; user-select: none; }
.vt.is-arrastando { cursor: grabbing; user-select: none; }
.vt.is-arrastando .vt-slide { pointer-events: none; }
.vt-trilho { position: absolute; inset: 0; }
.vt-slide {
  position: absolute; top: 0; left: calc(50% - var(--larg, 100%) / 2); width: var(--larg, 100%); height: 100%;
  border-radius: 14px; overflow: hidden; background: #0a0a0b; will-change: transform, opacity;
  transition: filter .35s ease;
}
/* Borda por cima do conteúdo, sem mexer no layout da tela do app. */
.vt-slide::after { content: ""; position: absolute; inset: 0; z-index: 6; border: 1px solid #242424; border-radius: inherit; pointer-events: none; }
.vt-slide.is-vizinho { filter: blur(2px) saturate(.85); }
.vt-slide.is-longe { visibility: hidden; }
.vt-slide-corpo { display: flex; width: 100%; height: 100%; }
/* O vizinho inteiro é um botão: clicar nele traz o painel para o centro. Fica por
   cima do conteúdo, que está inerte enquanto o painel não é o da vez. */
.vt-vizinho { display: none; position: absolute; inset: 0; z-index: 5; border: 0; padding: 0; background: transparent; cursor: pointer; }
.vt-slide.is-vizinho .vt-vizinho { display: block; }
.vt-slide.is-vizinho:hover { filter: blur(1px) saturate(.95) brightness(1.12); }
.vt-vizinho:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 14px; }

/* ---------- Slide: capa inteira OU menu do painel + tela ---------- */
.vt-tela-capa { height: 100%; overflow-y: auto; background: #0d0d0e; }
.vt-tela-capa[hidden], .vt-painel[hidden] { display: none; }
.vt-painel { display: grid; grid-template-columns: 224px minmax(0, 1fr); height: 100%; min-height: 0; }

/* A tela do app cabe na altura do slide, como no app (regra da dobra); as que o
   próprio app marca como roláveis (Financeiro) rolam por dentro. */
.vt-conteudo { min-height: 0; overflow-x: hidden; }

/* Toda tela ocupa o slide inteiro, 16:9 como nos prints, e aparece inteira de uma
   vez. Quando o conteúdo passa da altura, o painel é montado maior (--e < 1) e
   reduzido por transform até caber; vitrine.js acha o --e de cada tela. */
.vt-tela-capa { width: 100%; }
.vt-painel {
  --e: 1;
  flex: 0 0 auto; width: calc(100% / var(--e)); height: calc(100% / var(--e));
  transform: scale(var(--e)); transform-origin: 0 0;
}
.vt-filtro-fixo { cursor: default; }

/* ---------- Menu lateral de cada painel (como nos prints) ---------- */
.vt-menu { min-height: 0; overflow-y: auto; background: #151515; border-right: 1px solid #262626; scrollbar-width: thin; }
.vt-menu-quadro { min-height: 100%; display: flex; flex-direction: column; }
.vt-menu-topo { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 26px 18px 20px; border-bottom: 1px solid #262626; }
.vt-menu-logo { width: 118px; height: auto; }
.vt-menu-home { display: inline-flex; padding: 4px; border-radius: 6px; color: #8a8a8a; }
.vt-menu-home:hover, .vt-menu-home.is-ativa { color: var(--accent); }
.vt-menu-casa { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vt-menu-lista { list-style: none; margin: 0; padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; }
.vt-menu-item {
  display: flex; align-items: center; gap: 11px; padding: 10px 14px; border-radius: 6px;
  color: #a3a3a3; font-size: 14px; line-height: 1.3; text-decoration: none; position: relative;
  transition: background .15s, color .15s;
}
.vt-menu-item:hover { color: #f2f2f2; background: rgba(255, 255, 255, .04); }
.vt-menu-item:focus-visible, .vt-menu-home:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.vt-menu-marca { width: 5px; height: 5px; border-radius: 50%; background: #5a5a5a; flex-shrink: 0; }

/* E-commerce e Logística: lista com marcador; o ativo ganha faixa na cor do painel. */
.vt-menu--lista .vt-menu-item.is-ativa { color: #fff; font-weight: 600; background: color-mix(in srgb, var(--accent) 16%, #151515); }
.vt-menu--lista .vt-menu-item.is-ativa::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--accent); }
.vt-menu--lista .vt-menu-item.is-ativa .vt-menu-marca { background: var(--accent); }

/* Financeiro: ícones e o ativo em pílula cheia. */
.vt-menu--icones .vt-menu-item { font-weight: 600; color: #d6d6d6; }
.vt-menu-icone { width: 17px; height: 17px; flex-shrink: 0; }
.vt-menu--icones .vt-menu-item.is-ativa { background: #cbf41c; color: #141414; }

/* People Analytics: o menu mora numa moldura arredondada. */
.vt-menu--moldura { background: var(--bg-canvas, #121212); border-right: 0; padding: 10px 0 10px 10px; }
.vt-menu--moldura .vt-menu-quadro { background: #151515; border: 1px solid color-mix(in srgb, var(--accent) 45%, #262626); border-radius: 10px; }
.vt-menu--moldura .vt-menu-marca { width: 7px; height: 7px; border-radius: 2px; }
.vt-menu--moldura .vt-menu-item.is-ativa { color: #fff; font-weight: 600; background: #262626; }
.vt-menu--moldura .vt-menu-item.is-ativa::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 2px; background: var(--accent); }
.vt-menu--moldura .vt-menu-item.is-ativa .vt-menu-marca { background: var(--accent); }

/* ---------- Capa ---------- */
.vt-capa { position: relative; height: 100%; min-height: 420px; display: grid; grid-template-columns: minmax(0, 52%) 1fr; }
.vt-capa-foto {
  position: absolute; right: 0; top: 0; width: 60%; height: 100%; object-fit: cover; object-position: center;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 38%);
  mask-image: linear-gradient(to right, transparent 0, #000 38%);
  /* cor viva, sem gritar: a foto inteira (antes 80% de opacidade, o fundo escuro apagava as cores) e um pouco
     mais de saturação e contraste, nas mesmas cores */
  filter: saturate(1.2) contrast(1.04);
}
.vt-capa-texto { position: relative; z-index: 1; padding: clamp(28px, 6vh, 64px) clamp(24px, 4vw, 52px); display: flex; flex-direction: column; justify-content: center; }
.vt-capa-logo { position: absolute; left: clamp(24px, 4vw, 52px); bottom: clamp(18px, 4vh, 32px); width: 96px; height: auto; opacity: .9; }
.vt-capa-linha { position: absolute; left: clamp(24px, 4vw, 52px); top: clamp(18px, 4vh, 36px); width: 140px; height: 44px; border-top: 1px solid var(--accent); border-right: 1px solid var(--accent); }
.vt-capa-linha::before, .vt-capa-linha::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.vt-capa-linha::before { left: -3px; top: -4px; }
.vt-capa-linha::after { right: -4px; bottom: -3px; }
.vt-capa-sobre { font-size: clamp(14px, 1.4vw, 18px); color: var(--text-secondary); margin-top: 36px; }
.vt-capa-titulo { white-space: nowrap; font-size: clamp(28px, 3.9vw, 52px); font-weight: 800; letter-spacing: -.01em; line-height: 1.05; text-transform: uppercase; color: #fff; margin: 4px 0 18px; }
.vt-capa-desc { font-size: clamp(12.5px, 1.05vw, 14.5px); line-height: 1.65; color: var(--text-secondary); max-width: 560px; }
.vt-capa-desc strong { color: var(--text-primary); }
.vt-capa-convite { margin: 26px 0 12px; font-size: 13px; color: var(--text-secondary); }
.vt-capa-botoes { display: flex; flex-wrap: wrap; gap: 10px; max-width: 560px; }
.vt-pilula {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 9px 16px;
  border-radius: 999px; border: 1px solid var(--border-color-light); background: rgba(20, 20, 22, .82);
  color: var(--text-primary); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast);
}
.vt-pilula:hover { border-color: var(--accent); background: var(--accent-soft); }
.vt-pilula:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vt-pilula-icone { width: 14px; height: 14px; color: var(--accent); flex-shrink: 0; }
.vt-capa-lema {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl;
  font-size: 10px; letter-spacing: .32em; text-transform: uppercase; color: var(--text-muted); z-index: 1;
}

/* ---------- Celular: o menu do painel vira faixa no topo ---------- */
@media (max-width: 720px) {
  .vt-painel { width: 100%; height: 100%; transform: none; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .vt-conteudo, .vt-conteudo:has(.analise) { overflow-y: auto; }
  .vt-conteudo .analise { height: auto; }
  .vt-menu, .vt-menu--moldura { overflow: visible; border-right: 0; border-bottom: 1px solid #262626; padding: 0; background: #151515; }
  .vt-menu-quadro, .vt-menu--moldura .vt-menu-quadro { flex-direction: row; align-items: center; border: 0; border-radius: 0; min-height: 0; }
  .vt-menu-topo { flex-direction: row; padding: 8px 10px; border-bottom: 0; border-right: 1px solid #262626; }
  .vt-menu-logo { display: none; }
  .vt-menu nav { min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .vt-menu nav::-webkit-scrollbar { display: none; }
  .vt-menu-lista { flex-direction: row; padding: 8px; gap: 4px; }
  .vt-menu-item { white-space: nowrap; padding: 8px 12px; }
  .vt-capa { grid-template-columns: 1fr; }
  .vt-capa-foto { width: 100%; opacity: .28; -webkit-mask-image: none; mask-image: none; }
  .vt-capa-lema, .vt-capa-logo { display: none; }
  .vt-slide { border-radius: 10px; }
}

/* Exportar para Excel não faz sentido numa demonstração com números fixos, e a
   biblioteca nem é carregada: o botão sai em vez de aparecer desabilitado. */
#dre-excel, #qp-excel, .g-tabela-excel { display: none; }

@media (prefers-reduced-motion: reduce) {
  .vt-slide { transition: none; }
}