/* VISTONANET — JHONBRAIN AI-FIRST OS DESIGN SYSTEM
   Tema: escuro por PADRÃO; fundo, superfície e texto trocam por cliente junto
   com o acento (bandeiras do gerador — ver o bloco :root abaixo).
   Tagline: VISION. PRECISION. FUTURE.
   Qualidade & Alinhamento: Regras do /revisar (Centralização por default, nada solto, tudo ancorado)
*/

/* Base de quebra de palavra: o body proíbe rolagem lateral (overflow-x hidden),
   então texto que não quebra não rola — é DECEPADO na borda, sem aviso. Esta
   regra faz a palavra comprida quebrar em vez de sumir. `break-word` (não
   `anywhere`): só quebra quando ia estourar, sem mexer em botão nem label. */
h1, h2, h3, h4, h5, h6, p, li, dd, dt, td, th, label, figcaption {
  overflow-wrap: break-word;
}

/* ═══ O TEMA DO CLIENTE ═════════════════════════════════════════════════════
   ⛔ ESTE BLOCO É ESCRITO PELO `gerar-painel-cliente.js`, a partir do `TEMA` do
   config.js. Não editar à mão num build: a próxima montagem sobrescreve.

   ⭐ O app é ESCURO POR PADRÃO; marca de paleta clara entra pelas bandeiras
   --fundo/--superficie/--texto/--texto-fraco do gerador (decisão do dono,
   06/08/2026, no painel da Sabores da Morena — revoga o "escuro sempre" de
   01/08/2026). Para isso funcionar, véu, borda e lavagem NUNCA assumem fundo
   escuro: derivam de --fundo-rgb/--fundo-2-rgb/--texto-rgb. Branco ou preto
   chumbado em superfície é o defeito que o rosa da Sabores flagrou.

   ⚠️ `--acento-rgb` é o MESMO acento em canal, e existe porque toda lavagem
   (`rgba(var(--acento-rgb), .12)`) precisa da cor com alfa próprio. A alternativa
   era `color-mix()`, e ela foi RECUSADA pelo modo de falha: onde não existe
   (Safari iOS ≤ 16.1) a declaração inteira é inválida e cai no valor anterior —
   o cliente receberia os sólidos na marca dele e todas as bordas em bronze da
   agência, e ninguém veria, porque acontece só naquele aparelho.
   ⛔ Trocar `--acento` sem regerar `--acento-rgb` faz sólido e transparência
   divergirem. Por isso quem escreve os dois é o gerador, nunca a mão.       */
:root {
  /* ⛔ PADRÃO NEUTRO, de propósito. Não é a cor de ninguém: é o sinal de que o
     TEMA do config.js não foi preenchido. Enquanto o padrão daqui era o bronze
     da Vistonanet, esquecer de configurar entregava um app com a cara da
     AGÊNCIA — e ninguém percebia, porque parecia acabado. */
  --acento: #FFD100;
  --acento-rgb: 255, 209, 0;
  --acento-claro: #FFE261;
  --acento-escuro: #947900;
  --texto-sobre-acento: #101010;

  --fundo: #000000;
  --fundo-rgb: 0, 0, 0;
  --fundo-2: #0E1013;
  --fundo-2-rgb: 14, 16, 19;
  --texto: #E8EAED;
  --texto-rgb: 232, 234, 237;
  --texto-fraco: #8A9099;
  --logo-fundo: #000000;
                               quando o cliente não declara cor própria */

  --fonte-titulo: 'Poppins', system-ui, sans-serif;
  --fonte-corpo: 'Inter', system-ui, sans-serif;

  /* ── DERIVADOS — compostos do acento, nunca escritos à mão ─────────────── */
  --superficie: rgba(var(--fundo-2-rgb), 0.95);
  --linha: rgba(var(--texto-rgb), 0.08);
  --linha-acento: rgba(var(--acento-rgb), 0.35);
  --brilho-acento: 0 0 15px rgba(var(--acento-rgb), 0.25);
  --sombra-acento: 0 4px 25px rgba(var(--acento-rgb), 0.25);
  --gradiente-marca: linear-gradient(135deg, var(--acento-escuro) 0%, var(--acento) 50%, var(--acento-claro) 100%);
  --gradiente-marca-hover: linear-gradient(135deg, var(--acento) 0%, var(--acento-claro) 50%, var(--acento-claro) 100%);
  --halo-fundo: radial-gradient(circle at 10% 20%, rgba(var(--acento-rgb), 0.08) 0%, transparent 40%),
                radial-gradient(circle at 90% 80%, rgba(var(--acento-rgb), 0.06) 0%, transparent 40%);

  /* ── ESTADO — convenção universal, NÃO acompanha a troca de tema ───────── */
  /* ⛔ --sucesso e --alerta saíram: nada no painel usa verde de sucesso nem
     âmbar de aviso hoje. Token declarado sem uso é como os 8 tokens mortos do
     molde anterior — o nome existe, ninguém chama, e o valor vive chumbado no
     ponto de uso. Voltam no dia em que houver um estado para colorir. */
  --erro: #ef4444;
  --whatsapp: #25d366;
  --whatsapp-escuro: #1eb956;

  /* ── PAPEL — o recibo impresso é MÍDIA, não tema. Recibo na cor da marca
       parece cupom promocional, não documento. ─────────────────────────────── */
  --papel: #ffffff;
  --papel-texto: #0f172a;
  --papel-linha: #94a3b8;
  --papel-fraco: #64748b;
  --papel-tracejado: #cbd5e1;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  --sombra: 0 20px 40px -15px rgba(0, 0, 0, 0.95);
  --glass-backdrop: blur(25px);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.hidden {
  display: none !important;
}

body {
  background-color: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-corpo);
  min-height: 100vh;
  display: flex;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  background-image: var(--halo-fundo);
  background-attachment: fixed;
}

/* Tipografia e Alinhamento /revisar */
h1, h2, h3, .titulo, .brand-title {
  font-family: var(--fonte-titulo);
  letter-spacing: 0.04em;
  font-weight: 700;
}

.text-center {
  text-align: center !important;
}

.align-center {
  align-items: center !important;
  justify-content: center !important;
}

.tagline {
  font-family: var(--fonte-corpo);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--texto-fraco);
  font-size: 0.72rem;
  font-weight: 500;
  text-align: center;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--fundo);
}
::-webkit-scrollbar-thumb {
  background: rgba(var(--acento-rgb), 0.3);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--acento);
}

/* Layout App */
#app {
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* Lock Screen Autenticação */
.auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(var(--fundo-rgb), 0.94);
  backdrop-filter: blur(25px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.auth-card {
  background: var(--fundo-2);
  border: 1px solid var(--linha-acento);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 440px;
  padding: 40px;
  box-shadow: var(--sombra), var(--sombra-acento);
  text-align: center;
  position: relative;
}

.auth-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradiente-marca);
}

/* ⭐ O chip atrás da logo é `--logo-fundo`, que o gerador iguala ao `--fundo`
   quando o cliente não declara cor própria — mantendo o padrão do site da marca
   clara (o `.logo-chip` da Sabores) e o layout de quem já estava no ar.
   ⛔ Logo de arquivo OPACO precisa da bandeira `--logo-fundo` com a cor do
   próprio arquivo: sem ela o chip vira uma moldura de outra cor em volta da
   marca (flagrante do dono em 07/08/2026, a logo azul-marinho da Digital Lock
   Soluções com borda preta). */
.auth-logo-img {
  max-width: 212px;
  height: auto;
  margin: 0 auto 16px auto;
  display: block;
  background: var(--logo-fundo);
  border-radius: 14px;
  padding: 10px 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

/* Sidebar */
.sidebar {
  width: 270px;
  background: var(--fundo-2);
  border-right: 1px solid var(--linha);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px 16px;
  z-index: 10;
}

.sidebar-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--linha);
  margin-bottom: 20px;
  text-align: center;
}

.company-logo-img {
  max-height: 56px;
  width: auto;
  object-fit: contain;
  margin-bottom: 8px;
  background: var(--logo-fundo);
  border-radius: 12px;
  padding: 6px 12px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  color: var(--texto-fraco);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.nav-item:hover {
  background: rgba(var(--acento-rgb), 0.08);
  color: var(--texto);
  border-color: rgba(var(--acento-rgb), 0.2);
}

.nav-item.active {
  background: var(--gradiente-marca);
  color: var(--texto-sobre-acento);
  font-weight: 600;
  box-shadow: var(--sombra-acento);
  border-color: var(--acento-claro);
}

.sidebar-footer {
  padding-top: 16px;
  border-top: 1px solid var(--linha);
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

.brain-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(var(--acento-rgb), 0.1);
  border: 1px solid var(--linha-acento);
  color: var(--acento-claro);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  /* nowrap num body sem rolagem lateral = corte seco; aqui trunca com "…" */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acento-claro);
  box-shadow: 0 0 10px var(--acento-claro);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

/* Área Principal & Top Navbar */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.top-navbar {
  height: 70px;
  border-bottom: 1px solid var(--linha);
  background: rgba(var(--fundo-2-rgb), 0.85);
  backdrop-filter: var(--glass-backdrop);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  z-index: 50;
}

.page-title-area h1 {
  font-size: 1.3rem;
  color: var(--texto);
}

.top-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  height: 100%;
}

/* Botões */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: var(--gradiente-marca);
  color: var(--texto-sobre-acento);
  box-shadow: var(--sombra-acento);
  border: 1px solid var(--acento-claro);
}

.btn-primary:hover {
  background: var(--gradiente-marca-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 25px rgba(var(--acento-rgb), 0.4);
}

.btn-secondary {
  background: rgba(var(--texto-rgb), 0.04);
  border: 1px solid var(--linha);
  color: var(--texto);
}

.btn-secondary:hover {
  background: rgba(var(--acento-rgb), 0.1);
  border-color: var(--linha-acento);
  color: var(--acento-claro);
}

.btn-whatsapp {
  background: var(--whatsapp);
  color: #ffffff;
  font-weight: 700;
}

.btn-whatsapp:hover {
  background: var(--whatsapp-escuro);
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
}

/* VISTONANET:INICIO — a única marca da agência autorizada no painel do cliente.
   Falar com a Vistonanet (pedido do dono, 04/08/2026 — o verde+fone lia como
   call center). ⛔ Bronze FIXO de propósito: a identidade da Vistonanet não
   troca com o acento do cliente — é ela que o botão representa. A guarda do
   gerador só aceita bronze DENTRO deste bloco; fora dele, derruba o build. */
.btn-suporte-vn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: #0E1013;  /* escuro FIXO: o bronze só se lê sobre ele, em qualquer tema */
  color: #E3AE79;
  font-weight: 700;
  border: 1px solid #C08043;
  border-radius: 20px;
  cursor: pointer;
}

.btn-suporte-vn:hover {
  background: rgba(192, 128, 67, 0.12);
  box-shadow: 0 4px 18px rgba(192, 128, 67, 0.25);
}

.suporte-vn-logo {
  width: 18px;
  height: 16px;
  object-fit: contain;
}
/* VISTONANET:FIM */

/* Containers de Visão */
.view-container {
  flex: 1;
  padding: 32px;
  overflow-y: auto;
  display: none;
}

.view-container.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Cards & Grades */
.card {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--sombra);
}

.card:hover {
  border-color: var(--linha-acento);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.card-title {
  font-size: 1.1rem;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--texto);
}

/* PACKAGE CARDS (CATÁLOGO DE PRODUTOS & SERVIÇOS — CENTRALIZADO) */
.package-card {
  background: var(--superficie);
  border: 1px solid var(--linha-acento);
  border-radius: var(--radius-lg);
  padding: 36px 24px 28px 24px;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.package-card:hover {
  transform: translateY(-4px);
  border-color: var(--acento-claro);
  box-shadow: 0 12px 30px rgba(var(--acento-rgb), 0.25);
}

.package-card.featured {
  background: linear-gradient(180deg, rgba(var(--acento-rgb), 0.14) 0%, rgba(var(--fundo-2-rgb), 0.96) 100%);
  border: 1px solid var(--acento-claro);
  box-shadow: var(--sombra-acento), 0 10px 35px rgba(var(--acento-rgb), 0.25);
}

/* FRASE 'MAIS VENDIDO' PERFEITAMENTE CENTRALIZADA NO TOPO DO CARD */
.package-card.featured::before {
  content: '⭐ MAIS VENDIDO';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gradiente-marca);
  color: var(--texto-sobre-acento);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 4px 18px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  box-shadow: 0 4px 15px rgba(var(--acento-rgb), 0.4);
  white-space: nowrap;
  text-align: center;
}

.package-title {
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--acento-claro);
  margin-bottom: 6px;
  text-align: center;
}

.package-price {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--texto);
  font-family: var(--fonte-corpo);
  letter-spacing: -0.02em;
  margin-top: 4px;
  text-align: center;
}

.package-parcel {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--acento-claro);
  margin-bottom: 14px;
  text-align: center;
}

.product-actions-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
  width: 100%;
}

.product-actions-group .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 28px;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 24px;
  margin-bottom: 28px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px;
}

.stat-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: rgba(var(--acento-rgb), 0.12);
  color: var(--acento-claro);
  border: 1px solid var(--linha-acento);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-info h3 {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--texto);
}

.stat-info p {
  font-size: 0.82rem;
  color: var(--texto-fraco);
  margin-top: 4px;
}

/* CARROSSEL & FORMAT PREVIEW STYLES */
.carousel-preview-box {
  background: var(--fundo);
  border: 1px solid var(--linha-acento);
  border-radius: var(--radius-lg);
  aspect-ratio: 1 / 1;
  max-width: 440px;
  margin: 0 auto;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  position: relative;
  box-shadow: var(--sombra-acento);
  transition: all 0.3s ease;
}

.carousel-preview-box.status-mode {
  aspect-ratio: 9 / 16;
  max-width: 320px;
  padding: 36px 20px;
}

.carousel-preview-box.gmb-mode {
  aspect-ratio: 16 / 9;
  max-width: 480px;
  padding: 24px 20px;
}

.carousel-slide-number {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--acento-claro);
  letter-spacing: 0.15em;
}

.carousel-slide-title {
  font-family: var(--fonte-titulo);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--acento-claro);
  line-height: 1.3;
  margin: 14px 0 10px 0;
}

.carousel-slide-body {
  font-size: 0.88rem;
  color: var(--texto);
  line-height: 1.6;
}

.carousel-controls-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
}

.carousel-indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(var(--texto-rgb), 0.2);
  transition: all 0.2s ease;
}

.carousel-indicator-dot.active {
  background: var(--acento-claro);
  transform: scale(1.3);
  box-shadow: 0 0 8px var(--acento-claro);
}

/* CARDS DE CONEXÃO DE APIS DE REDES SOCIAIS */
.api-connection-card {
  background: var(--fundo-2);
  border: 1px solid var(--linha);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.api-connection-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.api-connection-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: rgba(var(--acento-rgb), 0.1);
  border: 1px solid var(--linha-acento);
  color: var(--acento-claro);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Kanban CRM */
.kanban-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  min-height: 500px;
}

.kanban-column {
  min-width: 0; /* sem isto, um nome sem espaço estoura a coluna de 1fr */
  background: rgba(var(--fundo-2-rgb), 0.6);
  border: 1px solid var(--linha);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--linha);
}

.column-title {
  font-size: 0.85rem;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--acento-claro);
}

.lead-card {
  background: var(--fundo-2);
  border: 1px solid var(--linha);
  border-radius: var(--radius-md);
  padding: 16px;
  transition: all 0.2s ease;
}

.lead-card:hover {
  transform: translateY(-2px);
  border-color: var(--acento);
  box-shadow: var(--sombra-acento);
}

.lead-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--texto);
  overflow-wrap: break-word;
}

.lead-meta {
  font-size: 0.8rem;
  color: var(--texto-fraco);
  margin: 6px 0 10px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-wrap: break-word;
  min-width: 0;
}

.lead-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(var(--acento-rgb), 0.15);
  color: var(--acento-claro);
  border: 1px solid rgba(var(--acento-rgb), 0.3);
}

/* AGENDA & CALENDÁRIO VISUAL REVISADO */
.calendar-widget {
  background: var(--fundo-2);
  border: 1px solid var(--linha);
  border-radius: var(--radius-lg);
  padding: 20px;
  text-align: center;
}

.calendar-header-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.calendar-month-title {
  font-family: var(--fonte-titulo);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--acento-claro);
}

.calendar-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  text-align: center;
}

.day-name {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--texto-fraco);
  padding-bottom: 8px;
  text-transform: uppercase;
}

.day-cell {
  padding: 12px 6px;
  border-radius: var(--radius-md);
  border: 1px solid var(--linha);
  background: rgba(var(--texto-rgb), 0.02);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.day-cell:hover:not(.disabled) {
  border-color: var(--acento);
  background: rgba(var(--acento-rgb), 0.15);
  color: var(--acento-claro);
}

.day-cell.selected {
  background: var(--gradiente-marca) !important;
  color: var(--texto-sobre-acento) !important;
  border-color: var(--acento-claro) !important;
  box-shadow: var(--sombra-acento);
}

.day-cell.disabled {
  opacity: 0.3;
  cursor: not-allowed;
  border-color: transparent;
}

.day-cell.has-event::after {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acento-claro);
  margin-top: 4px;
}

/* STEPPER MODAL */
.booking-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--linha);
}

.step-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--texto-fraco);
}

.step-item.active {
  color: var(--acento-claro);
}

.step-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(var(--texto-rgb), 0.08);
  border: 1px solid var(--linha);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}

.step-item.active .step-number {
  background: var(--gradiente-marca);
  color: #fff;
  border-color: var(--acento-claro);
}

/* MODAL DE AGENDAMENTO PÚBLICO */
.booking-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(var(--fundo-rgb), 0.94);
  backdrop-filter: blur(20px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
}

.booking-card {
  background: var(--fundo-2);
  border: 1px solid var(--linha-acento);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 660px;
  padding: 40px;
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.95), var(--sombra-acento);
  position: relative;
  text-align: center;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.service-option {
  border: 1px solid var(--linha);
  border-radius: var(--radius-md);
  padding: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: rgba(var(--texto-rgb), 0.02);
  text-align: center;
}

.service-option:hover, .service-option.selected {
  border-color: var(--acento);
  background: rgba(var(--acento-rgb), 0.12);
  transform: translateY(-2px);
}

.time-slots-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.time-slot-btn {
  padding: 12px;
  text-align: center;
  border: 1px solid var(--linha);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  background: rgba(var(--texto-rgb), 0.03);
  transition: all 0.2s ease;
}

.time-slot-btn:hover, .time-slot-btn.selected {
  background: var(--gradiente-marca);
  color: var(--texto-sobre-acento);
  border-color: var(--acento-claro);
  box-shadow: var(--sombra-acento);
}

/* Chat UI */
.chat-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  height: calc(100vh - 150px);
}

.agent-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius-md);
  background: var(--superficie);
  border: 1px solid var(--linha);
  cursor: pointer;
  transition: all 0.2s ease;
}

.agent-item:hover, .agent-item.active {
  border-color: var(--acento);
  background: rgba(var(--acento-rgb), 0.1);
}

.agent-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--gradiente-marca);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
}

.chat-box {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-messages {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.chat-bubble {
  max-width: 75%;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  font-size: 0.92rem;
  line-height: 1.5;
}

.chat-bubble.user {
  align-self: flex-end;
  background: var(--gradiente-marca);
  color: var(--texto-sobre-acento);
  border-bottom-right-radius: 4px;
}

.chat-bubble.agent {
  align-self: flex-start;
  background: rgba(var(--texto-rgb), 0.05);
  border: 1px solid var(--linha);
  color: var(--texto);
  border-bottom-left-radius: 4px;
}

.chat-input-area {
  padding: 16px 20px;
  border-top: 1px solid var(--linha);
  display: flex;
  gap: 12px;
  background: rgba(var(--fundo-2-rgb), 0.9);
}

.form-input {
  width: 100%;
  padding: 12px 16px;
  background: rgba(var(--texto-rgb), 0.04);
  border: 1px solid var(--linha);
  border-radius: var(--radius-md);
  color: var(--texto);
  font-size: 0.9rem;
  outline: none;
  transition: all 0.2s ease;
}

.form-input:focus {
  border-color: var(--acento);
  box-shadow: var(--brilho-acento);
  background: rgba(var(--texto-rgb), 0.07);
}

/* Recibo Preview */
.receipt-preview {
  background: var(--papel);
  color: var(--papel-texto);
  padding: 32px;
  border-radius: var(--radius-md);
  font-family: 'Courier New', Courier, monospace;
  box-shadow: 0 15px 35px rgba(0,0,0,0.8);
}

.receipt-header {
  text-align: center;
  border-bottom: 2px dashed var(--papel-linha);
  padding-bottom: 15px;
  margin-bottom: 15px;
}

/* O banner da logo no PAPEL é lavagem do acento, nunca --fundo: papel é
   branco em todo tema, e o fundo de um cliente escuro imprimiria um bloco
   preto atrás da marca. */
.receipt-header img {
  background: rgba(var(--acento-rgb), 0.12);
  border-radius: 12px;
  padding: 8px 14px;
}

.receipt-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 0.9rem;
}

.receipt-total {
  border-top: 2px dashed var(--papel-linha);
  padding-top: 12px;
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

/* Nome de cliente comprido e valor por extenso QUEBRAM em vez de estourar o
   recibo — num celular sobram ~245px de Courier para a linha inteira. */
.receipt-line span,
.receipt-total span {
  min-width: 0;
  overflow-wrap: break-word;
}

/* ==========================================================================
   CELULAR — a sidebar vira barra horizontal no topo e as grades colapsam
   para 1 coluna. Sem este bloco o painel era usável só no desktop.
   ========================================================================== */
@media (max-width: 860px) {
  /* O recibo em Courier: 32px de padding num celular deixa ~245px para a
     linha "Cliente: <nome>" — no celular o padding encolhe. */
  .receipt-preview {
    padding: 16px;
  }

  #app {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    padding: 10px 12px;
    border-right: none;
    border-bottom: 1px solid var(--linha);
  }

  /* a marca já está na tela de senha; o bloquear volta ao fechar a aba,
     porque a senha é pedida de novo em toda abertura */
  .sidebar-header,
  .sidebar-footer {
    display: none;
  }

  .nav-group {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  .nav-item {
    white-space: nowrap;
    flex-shrink: 0;
  }

  .top-navbar {
    height: auto;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px;
  }

  /* ⭐ Empilhados no celular, os botões do topo ganham a MESMA largura e o
     mesmo alinhamento (04/08/2026 — o dono pegou os dois soltos, um mais
     largo que o outro, no vídeo de demonstração: "não sei se faz parte do
     design". Não fazia.) */
  .top-actions {
    flex-wrap: wrap;
    width: 100%;
  }
  .top-actions .btn {
    flex: 1 1 100%;
    justify-content: center;
  }

  .grid-2 {
    grid-template-columns: 1fr;
  }

  /* ⛔ Item de grid tem min-width AUTO: conteúdo largo (o calendário de 7
     colunas) força a coluna além da tela e o cartão VAZA pela direita —
     defeito pego pelo dono no vídeo de demonstração (04/08/2026), no primeiro
     build Precision revisado de olho (o Vision não tem agenda, então nenhuma
     régua tinha visto). O min-width: 0 devolve o encolhimento. */
  .grid-2 > *,
  .grid-3 > * {
    min-width: 0;
  }

  /* E o calendário aperta o passo no celular: menos respiro, dia inteiro. */
  .calendar-widget {
    padding: 12px 8px;
  }
  .calendar-days-grid {
    gap: 4px;
  }
  .day-cell {
    padding: 10px 2px;
    font-size: 0.8rem;
  }

  /* ⛔ A `.grid-3` é `repeat(3, 1fr)` FIXO, e ficou de fora deste bloco desde
     sempre: no celular ela mantinha 3 colunas, dando ~93px por cartão. O
     catálogo do cliente sai por ela, e o nome do serviço era decepado letra a
     letra. ⚠️ Só apareceu quando um cliente real entrou com 5 produtos — com o
     único "Serviço Exemplo" do molde a grade nunca chegava a encher, e a régua
     de telas carimbou "0 defeitos" em 01/08. Dado de molde esconde defeito de
     grade: o número de itens é parte do caso de teste. */
  .grid-3 {
    grid-template-columns: 1fr;
  }

  /* Mesmo motivo, um andar acima: `.card-header` é flex sem wrap, então o
     título e o botão de ação disputavam a largura e o botão saía da tela. */
  .card-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .kanban-board {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   IMPRESSÃO DO RECIBO — o Cmd/Ctrl+P (ou o botão Imprimir/PDF) sai só com a
   folha do recibo, em fundo branco. O resto do painel não vai para o papel.
   ========================================================================== */
@media print {
  body * {
    visibility: hidden;
  }

  #receiptPreviewBox,
  #receiptPreviewBox * {
    visibility: visible;
  }

  #receiptPreviewBox {
    position: fixed;
    inset: 0;
    margin: 0;
    padding: 40px;
    background: var(--papel);
    box-shadow: none;
    border: none;
  }
}

/* ==========================================================================
   MOLDE — módulo fora do plano: visível, com cadeado, sem clique "de verdade"
   (o clique vira a conversa de upsell; ver aplicarGate no app.js)
   ========================================================================== */
.nav-bloqueado {
  opacity: 0.55;
}

.nav-bloqueado .cadeado {
  margin-left: auto;
  font-size: 0.8rem;
}

/* A vitrine dos módulos bloqueados no dashboard e o modal de upsell */
.modulos-avancados-card {
  border-color: rgba(var(--acento-rgb), 0.4);
  background: rgba(var(--acento-rgb), 0.03);
  margin-top: 24px;
}

/* Flex, não grid: fileira incompleta centraliza sob o título centralizado
   (card sozinho pendurado à esquerda quebra o eixo — regra do /revisar) */
#modulosAvancadosGrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#modulosAvancadosGrid .modulo-bloqueado-card {
  flex: 1 1 260px;
  max-width: 340px;
}

.modulo-bloqueado-card {
  background: rgba(var(--fundo-rgb), 0.6);
  border: 1px solid var(--linha-acento);
  border-radius: var(--radius-md);
  padding: 18px;
  text-align: center;
  opacity: 0.9;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modulo-bloqueado-card:hover {
  opacity: 1;
  border-color: var(--acento-claro);
  transform: translateY(-2px);
}

.modulo-bloqueado-card h4 {
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.modulo-bloqueado-card p {
  font-size: 0.75rem;
  color: var(--texto-fraco);
  margin-bottom: 12px;
}

.modulo-bloqueado-lock {
  width: 40px;
  height: 40px;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--linha-acento);
  color: var(--acento-claro);
  background: rgba(var(--acento-rgb), 0.08);
}

.modulo-bloqueado-lock svg {
  width: 18px;
  height: 18px;
}

.modulo-bloqueado-tag {
  font-size: 0.68rem;
  background: rgba(var(--acento-rgb), 0.2);
  border-color: var(--acento-claro);
  color: var(--acento-claro);
}

/* MODAL DO SUPORTE — a tela de valores antes do WhatsApp da agência.
   BASE de todo plano (não é módulo): portado do painel da agência em
   30/07/2026, com os valores de comercial/pacotes.md */
.suporte-modal {
  z-index: 100001; /* acima da navegação fixa do celular */
}

.suporte-modal .booking-card {
  margin: auto; /* centrado quando cabe; rolável sem cortar o topo quando não cabe */
}

.suporte-itens {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.suporte-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(var(--fundo-rgb), 0.4);
  border: 1px solid var(--linha-acento);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}

.suporte-item > svg,
.suporte-item > i {
  color: var(--acento-claro);
  flex-shrink: 0;
  margin-top: 2px;
}

.suporte-item h4 {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--texto);
  margin-bottom: 3px;
}

.suporte-item p {
  font-size: 0.78rem;
  color: var(--texto-fraco);
  line-height: 1.5;
}

.suporte-item strong {
  color: var(--texto);
}

.suporte-acoes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.suporte-acoes .btn {
  width: 100%;
  justify-content: center;
  font-size: 0.8rem;
}

/* o texto longo do botão não pode esmagar o ícone a largura zero */
.suporte-acoes .btn svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

/* ============================================================
   MÓDULO AGENTES — o hub de botões (2026-08-01)
   ============================================================ */
.agentes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}

.agente-card {
  background: rgba(var(--fundo-rgb), 0.6);
  border: 1px solid var(--linha);
  border-radius: var(--radius-md);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.agente-card:hover {
  border-color: var(--acento);
  transform: translateY(-2px);
}

.agente-card h4 {
  font-size: 0.9rem;
  font-weight: 700;
}

.agente-card p {
  font-size: 0.76rem;
  color: var(--texto-fraco);
  line-height: 1.5;
  flex: 1;
}

.agente-card .agente-usar {
  width: 100%;
  font-size: 0.8rem;
}

.agente-icone {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: rgba(var(--acento-rgb), 0.14);
  color: var(--acento);
}

.agente-icone svg {
  width: 18px;
  height: 18px;
}

.agente-card-bloqueado {
  border-color: var(--linha-acento);
  opacity: 0.9;
  cursor: pointer;
  text-align: left;
}

.agente-card-bloqueado:hover {
  opacity: 1;
  border-color: var(--acento-claro);
}

.toast-aviso {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  background: var(--superficie);
  border: 1px solid var(--acento);
  color: var(--texto);
  padding: 11px 18px;
  border-radius: var(--radius-md);
  font-size: 0.82rem;
  font-weight: 600;
  z-index: 300;
  max-width: 88%;
  text-align: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   PÁGINA EVOLUIR — a venda dos degraus de cima (2026-08-01)
   ============================================================ */
.evoluir-precision {
  margin-bottom: 20px;
}

.evoluir-future {
  border-color: var(--linha-acento);
}

.evoluir-texto {
  font-size: 0.88rem;
  color: var(--texto);
  line-height: 1.65;
  margin-bottom: 16px;
}

.evoluir-vantagens {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.evoluir-vantagens li {
  display: flex;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--texto);
  line-height: 1.55;
}

.evoluir-vantagens li svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--acento);
  margin-top: 2px;
}

.evoluir-nota {
  font-size: 0.75rem;
  color: var(--texto-fraco);
  line-height: 1.6;
  border-left: 2px solid var(--linha-acento);
  padding-left: 12px;
  margin-bottom: 18px;
}

.evoluir-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.evoluir-preco {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--acento-claro);
}