/* ============================================================
   FÁBRICA DE SOLUÇÕES — DESIGN SYSTEM "LIQUID GLASS"
   Fonte única de verdade. Importado por index/hub/clientes/
   gerador/relatorio. Editar SÓ aqui garante consistência 100%
   entre as 5 telas — nunca duplicar estas regras nos arquivos.
   ============================================================ */

:root{
  --cor-cliente:#F9C000;
  --roxo:#4909B0;
  --amarelo:#F9C000;
  --verde:#10B981;
  --bg-deep:#080214;

  /* Vidro: refração alta, borda superior nítida, sombra volumétrica */
  --vidro-fundo:rgba(20, 16, 28, 0.42);
  --vidro-borda:rgba(255,255,255,0.14);
  --vidro-borda-topo:rgba(255,255,255,0.55);
  --vidro-blur:26px;
  --vidro-sat:200%;
}

*{-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}

body{
  background-color:var(--bg-deep);
  background-image:
    radial-gradient(65% 50% at 15% 0%, rgba(73,9,176,0.24) 0%, rgba(73,9,176,0) 72%);
  background-attachment:fixed;
  font-family:'Plus Jakarta Sans',sans-serif;
  color:#EEE9F7;
  min-height:100vh;
}
h1,h2,h3,.font-display,.num-display{font-family:'Outfit',sans-serif;}
::-webkit-scrollbar{height:0;width:0;}

/* ===== VIDRO — cards, modais, headers =====
   Superfície monocromática (frosted glass real, não "vidro colorido"),
   com uma camada de luz suave vindo de cima simulando profundidade —
   o roxo/amarelo da marca ficam reservados a botões, ícones e destaques. */
.liquid-glass{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0) 42%),
    var(--vidro-fundo);
  border:1px solid var(--vidro-borda);
  border-top:1.5px solid var(--vidro-borda-topo);
  backdrop-filter:blur(var(--vidro-blur)) saturate(var(--vidro-sat));
  -webkit-backdrop-filter:blur(var(--vidro-blur)) saturate(var(--vidro-sat));
  box-shadow:
    inset 0 1.5px 2px rgba(255,255,255,0.22),
    inset 0 0 30px rgba(255,255,255,0.025),
    0 18px 40px rgba(0,0,0,0.4);
}
.card-hover{transition:border-color .2s ease, transform .2s ease;}
.card-hover:hover{border-color:rgba(255,255,255,0.24);}

/* ===== INPUTS translúcidos ===== */
.input-glass{
  background:rgba(12,3,28,0.45);
  border:1px solid rgba(255,255,255,0.16);
  border-top-color:rgba(255,255,255,0.3);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:#FFFFFF;
  transition:all .2s ease;
}
.input-glass::placeholder{color:#6B5F8C;}
.input-glass:focus{
  outline:none;
  background:rgba(18,5,42,0.65);
  border-color:var(--cor-cliente);
  box-shadow:0 0 16px rgba(249,192,0,0.3);
}

/* ===== BOTÃO PRINCIPAL (ações douradas) ===== */
.btn-action{
  background:linear-gradient(160deg,var(--cor-cliente),#cf9d00);
  color:#1B0E00;
  box-shadow:0 4px 20px rgba(249,192,0,0.3);
  transition:all .22s ease;
}
.btn-action:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 6px 24px rgba(249,192,0,0.45);}
.btn-action:disabled{opacity:.6;filter:none;transform:none;cursor:not-allowed;}

/* ===== PÍLULAS / BADGES semânticos ===== */
.accent-text{color:var(--cor-cliente);}
.valor-sucesso{color:var(--verde);}
.pill-up{background:rgba(52,211,153,0.14);color:#4ADE80;border:1px solid rgba(74,222,128,0.28);}
.pill-down{background:rgba(248,113,113,0.14);color:#F87171;border:1px solid rgba(248,113,113,0.28);}
.pill-neutral{background:rgba(255,255,255,0.06);color:#B3A6D6;border:1px solid rgba(255,255,255,0.12);}

/* ===== ABAS ===== */
.tab-btn{transition:background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease;border:1px solid var(--vidro-borda);min-height:44px;}
.tab-btn.active{background:linear-gradient(160deg,var(--cor-cliente),#cf9d00);color:#1B0E00;border-color:transparent;font-weight:700;box-shadow:0 4px 18px rgba(249,192,0,0.25);}
.tab-btn:not(.active){color:#B3A6D6;}

/* ===== AVATAR com anel gradiente ===== */
.avatar-ring-purple{background:linear-gradient(135deg,#4909B0,#9B6BF2,#C7B0F9);padding:2.5px;border-radius:9999px;}

/* ===== SELO circular (veredito) ===== */
.seal{background:radial-gradient(circle at 30% 25%,rgba(255,255,255,0.3),transparent 55%),linear-gradient(155deg,var(--verde),#067a56);}

/* ===== MODAIS ===== */
.modal-overlay{transition:opacity .25s ease;}
.modal-window{transition:transform .25s ease, opacity .25s ease;}
.modal-overlay.hidden .modal-window{transform:scale(0.96);opacity:0;}

/* ===== BOTÃO WHATSAPP 3D COM SHIMMER + BOUNCE ===== */
.wa-float{min-height:48px;position:relative;overflow:hidden;box-shadow:0 6px 0 #1b9e4b,0 12px 24px rgba(0,0,0,0.5);transition:transform .12s ease,box-shadow .12s ease;animation:wa-bounce 3s ease-in-out infinite;}
.wa-float:active{transform:translateY(4px);box-shadow:0 2px 0 #1b9e4b,0 8px 16px rgba(0,0,0,0.4);}
.wa-float::after{content:'';position:absolute;top:0;left:-150%;width:55%;height:100%;background:linear-gradient(115deg,transparent,rgba(255,255,255,0.65),transparent);transform:skewX(-20deg);animation:shimmer 3s ease-in-out infinite;}
@keyframes wa-bounce{0%,78%,100%{transform:translateY(0);}84%{transform:translateY(-8px);}89%{transform:translateY(0);}92%{transform:translateY(-3px);}96%{transform:translateY(0);}}
@keyframes shimmer{0%{left:-150%;}28%{left:150%;}100%{left:150%;}}

/* ===== ENTRADA ESCALONADA ===== */
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
.fade-up{animation:fadeSlideUp .7s ease forwards;opacity:0;}

/* ============================================================
   ACORDEÃO FLUIDO — técnica CSS Grid (sem JS medindo altura,
   sem max-height "chutado"). Zero pulos, zero corte de texto,
   interrompível a qualquer momento sem travar.
   Markup esperado dentro de .card-retatil:
     <div class="conteudo-wrap">
       <div class="conteudo-inner">
         <div class="conteudo-oculto">...texto...</div>
       </div>
     </div>
   ============================================================ */
.card-retatil{cursor:pointer;transition:border-color .2s ease;}
.card-retatil .conteudo-wrap{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .28s cubic-bezier(.4,0,.2,1);
  will-change:grid-template-rows;
}
.card-retatil.aberto .conteudo-wrap{grid-template-rows:1fr;}
.card-retatil .conteudo-inner{overflow:hidden;min-height:0;}
.card-retatil .conteudo-oculto{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,0.1);
  opacity:0;
  transition:opacity .2s ease;
}
.card-retatil.aberto .conteudo-oculto{opacity:1;}
.card-chevron{transition:transform .28s cubic-bezier(.4,0,.2,1);will-change:transform;}
.card-retatil.aberto .card-chevron{transform:rotate(180deg);}

/* ===== BARRA DE PROGRESSO (meta de faturamento) ===== */
.progress-track{background:rgba(255,255,255,0.08);}
.progress-fill{background:linear-gradient(90deg,var(--verde),#34D399);transition:width .6s ease;}

/* ===== RÉGUA DE MERCADO — ROAS ===== */
.roas-track{background:linear-gradient(90deg,#F87171 0%,#F87171 20%,#FBBF24 20%,#FBBF24 40%,#60A5FA 40%,#60A5FA 66.6%,var(--verde) 66.6%,var(--verde) 100%);}
.roas-marker{box-shadow:0 0 0 3px rgba(8,2,20,0.9),0 0 12px rgba(16,185,129,0.7);}

/* ===== GRÁFICO "MELHOR DIA DA SEMANA" ===== */
.toggle-metrica{background:rgba(255,255,255,0.08);color:#B3A6D6;transition:background .2s ease,color .2s ease;}
.toggle-metrica.active{background:var(--cor-cliente);color:#1B0E00;font-weight:700;}
.tooltip-dia{transition:opacity .2s ease;}
.barra-dia{background:rgba(255,255,255,0.1);transition:height .4s cubic-bezier(.4,0,.2,1),opacity .3s ease,background .3s ease,box-shadow .3s ease;}
.barra-dia.ativo{background:rgba(16,185,129,.3);border:1px solid rgba(16,185,129,.2);}
.barra-dia.ativo.selecionada{background:#10B981;box-shadow:0 0 12px rgba(16,185,129,.5);border-color:transparent;}
.barra-dia.campeao{background:linear-gradient(180deg,#F9C000 0%,#D97706 100%);box-shadow:0 0 16px rgba(249,192,0,0.45);}
.barra-dia.pausado{background:rgba(255,255,255,0.1);opacity:.3;}