/* ============================================================================
   studio.css — Turning Point Studio
   Sistema visual. Carregado DEPOIS do <style> de cada página, para vencer
   na cascata sem precisar reescrever o CSS existente.

   ── A ideia ────────────────────────────────────────────────────────────────
   O logo é um visor de câmera com uma bússola dentro: enquadrar e apontar
   direção. É o que o produto faz — planejar (direção) e criar (enquadramento).

   O elemento de assinatura é o COLCHETE DE VISOR, e ele tem função: marca o
   item ativo da navegação e o foco de teclado. A geometria da marca fazendo
   trabalho de interface, em vez de enfeitar cartões.

   ── O que foi deliberadamente cortado ──────────────────────────────────────
   Os radares decorativos dentro dos cards de KPI: competiam com o número, que
   é o conteúdo. Os colchetes em todo card: viram ruído quando repetidos.
   Os chips coloridos de ícone: seis focos de atenção onde deveria haver um.

   ── Tipografia ─────────────────────────────────────────────────────────────
   Orbitron é excelente como marca e ruim como interface — larga, com pouca
   distinção entre caracteres e números que atrapalham leitura de dados. Fica
   restrita a rótulos curtos em caixa alta, onde as quirks viram caráter.
   Texto e números ficam em Inter, com algarismos tabulares para que colunas
   de dados alinhem.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Tokens ───────────────────────────────────────────────────────────────
   As variáveis originais são redefinidas em vez de substituídas: as páginas
   continuam usando var(--green) e passam a receber o violeta da marca. Uma
   troca de paleta em um lugar só.
   ------------------------------------------------------------------------- */
:root{
  --tinta:#0B0B0F;          /* fundo base */
  --superficie:#12121A;     /* cartões */
  --superficie-alta:#191922;
  --linha:#24242F;
  --linha-forte:#32323F;

  --violeta:#6C3BFF;        /* ação, marca */
  --violeta-claro:#8B63FF;
  --ciano:#00D4FF;          /* dado, medição */
  --texto:#EDEDF2;
  --texto-suave:#9A9AAB;
  --texto-fraco:#6A6A7A;

  --ok:#3DD68C;
  --alerta:#FFB84D;
  --falha:#FF5C7A;

  /* Compatibilidade: o CSS das páginas usa estes nomes. */
  --bg:var(--tinta);
  --panel:var(--superficie);
  --line:var(--linha);
  --text:var(--texto);
  --muted:var(--texto-suave);
  --green:var(--violeta);
  --red:var(--falha);
  --amber:var(--alerta);
  --blue:var(--ciano);
  --violet:var(--violeta-claro);
  --pink:#FF6BC1;

  --r-sm:8px;
  --r:12px;
  --r-lg:18px;

  --sombra:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28);
}

body{
  background:
    radial-gradient(900px 500px at 88% -8%, rgba(108,59,255,.13), transparent 62%),
    radial-gradient(700px 420px at 4% 102%, rgba(0,212,255,.07), transparent 60%),
    var(--tinta) !important;
  color:var(--texto);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ── Rótulos de marca ─────────────────────────────────────────────────────
   Orbitron só aqui: caixa alta, corpo pequeno, muito espaçamento. É onde ela
   dá caráter sem custar legibilidade.
   ------------------------------------------------------------------------- */
.cardTit, .painelTit, .boxTitle, .kpi .l, .card .l,
.bloco h3, .grupoTit, .semanaCab div{
  font-family:Orbitron, Inter, sans-serif !important;
  font-weight:700 !important;
  letter-spacing:.14em !important;
  font-size:9.5px !important;
  text-transform:uppercase;
  color:var(--texto-fraco) !important;
}
.cardTit, .painelTit, .bloco h3{ color:var(--violeta-claro) !important; }

h1{ letter-spacing:-.035em; font-weight:800; }

/* Números: tabulares, para que colunas de dados alinhem verticalmente. */
.kpi .n, .item .dia b, .met b, .stat, table.orc td.v, .card .n{
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}

/* ── Navegação ────────────────────────────────────────────────────────────
   O logo entra por CSS, sem tocar no HTML de nenhuma página.
   ------------------------------------------------------------------------- */
/* ASSINATURA DO PRODUTO
   Símbolo e nome formam um bloco só, à esquerda da navegação. Antes o logo
   entrava solto por pseudo-elemento e o nome se repetia como título gigante
   logo abaixo — duas identificações da mesma coisa, competindo. */
.marcaStudio{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; flex:0 0 auto;
  padding-right:16px; margin-right:4px;
  border-right:1px solid var(--linha);
}
.marcaStudio img{
  width:32px; height:32px; flex:0 0 auto;
  filter:drop-shadow(0 0 10px rgba(108,59,255,.35));
}
.marcaStudio span{ display:grid; line-height:1.05; }
.marcaStudio b{
  font-family:Orbitron, Inter, sans-serif;
  font-size:12.5px; font-weight:700; letter-spacing:.02em;
  color:var(--texto);
}
.marcaStudio i{
  font-family:Orbitron, Inter, sans-serif;
  font-size:10px; font-weight:500; font-style:normal;
  letter-spacing:.34em; color:var(--violeta-claro);
}
.marcaStudio:hover img{ filter:drop-shadow(0 0 14px rgba(108,59,255,.6)); }
.marcaStudio:focus-visible{ outline:2px solid var(--violeta-claro); outline-offset:3px; border-radius:6px; }

@media (max-width:720px){
  .marcaStudio{ padding-right:10px; }
  .marcaStudio span{ display:none; }   /* no estreito, só o símbolo */
}

/* Saudação da Home: o nome do produto vive no header, não como título. */
.ola{
  font-size:26px !important; font-weight:800; letter-spacing:-.03em;
  margin:0 0 6px !important; color:var(--texto) !important;
}
.contexto{
  margin:0; font-size:13.5px; color:var(--texto-suave); line-height:1.55;
}

.nav{
  background:rgba(18,18,26,.72);
  border-color:var(--linha);
  backdrop-filter:blur(10px);
  padding:5px;
}
.nav a{
  color:var(--texto-suave);
  font-weight:600;
  letter-spacing:.01em;
  position:relative;
  transition:color .16s ease, background .16s ease;
}
.nav a:hover{ color:var(--texto); background:rgba(255,255,255,.05); }

/* ASSINATURA: o item ativo é enquadrado pelo visor da marca, em vez de
   preenchido de cor. Menos peso visual, mais identidade. */
.nav a[aria-current="page"]{
  background:rgba(108,59,255,.14) !important;
  color:var(--texto) !important;
  box-shadow:inset 0 0 0 1px rgba(108,59,255,.45);
}
.nav a[aria-current="page"]::before,
.nav a[aria-current="page"]::after{
  content:'';
  position:absolute;
  width:7px; height:7px;
  border:1.5px solid var(--violeta-claro);
  pointer-events:none;
}
.nav a[aria-current="page"]::before{
  top:3px; left:3px; border-right:0; border-bottom:0; border-radius:3px 0 0 0;
}
.nav a[aria-current="page"]::after{
  bottom:3px; right:3px; border-left:0; border-top:0; border-radius:0 0 3px 0;
}
.nav a[aria-current="page"] svg{ color:var(--violeta-claro); }

.userBox img{ border:1px solid var(--linha-forte); }
.userBox a.sair{ border-color:var(--linha); }
.userBox a.sair:hover{ border-color:var(--violeta); color:var(--violeta-claro); }

/* ── Bloco "Agora" ────────────────────────────────────────────────────────
   A pergunta que a Home responde é "o que preciso fazer agora". Este bloco
   fica logo abaixo dos indicadores, antes de qualquer detalhamento.
   ------------------------------------------------------------------------- */
.agora{ margin:20px 0 4px; }
.agoraTit{
  font-family:Orbitron, Inter, sans-serif;
  font-size:9.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--violeta-claro); margin-bottom:10px;
}
.agoraGrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.agoraCard{
  display:grid; gap:5px; align-content:start;
  padding:14px 15px; border-radius:14px; text-decoration:none;
  background:var(--superficie); border:1px solid var(--linha);
  border-left:3px solid var(--linha-forte);
  transition:border-color .16s ease, transform .16s ease, background .16s ease;
}
.agoraCard:hover{ background:var(--superficie-alta); transform:translateY(-1px); }
.agoraCard .r{
  font-size:9.5px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--texto-fraco); font-weight:700;
}
.agoraCard b{ font-size:14px; line-height:1.32; color:var(--texto); letter-spacing:-.01em; }
.agoraCard .a{ font-size:11.5px; color:var(--texto-suave); line-height:1.45; }

.agoraCard.destaque{ border-left-color:var(--violeta); }
.agoraCard.destaque:hover{ border-color:var(--violeta); }
.agoraCard.alerta{ border-left-color:var(--alerta); }
.agoraCard.alerta b{ color:var(--alerta); }

/* Separador entre dois números no mesmo KPI (publicadas · agendadas). */
.kpi .n .sep{ color:var(--texto-fraco); font-weight:400; margin:0 6px; font-size:22px; }

@media (max-width:900px){ .agoraGrid{ grid-template-columns:1fr; } }

/* ── Superfícies ──────────────────────────────────────────────────────────
   Um plano de fundo só, sem gradiente interno. Profundidade vem da borda e
   da sombra, não de decoração.
   ------------------------------------------------------------------------- */
.card, .kpi, .bloco, .painel, .acesso, .box, details.acc, .item, .diaCel{
  background:var(--superficie) !important;
  border-color:var(--linha) !important;
}
.card, .bloco, .painel{ box-shadow:var(--sombra); }

.kpi{ position:relative; overflow:hidden; }
/* Um fio de luz no topo do KPI substitui o radar decorativo: sinaliza a
   categoria do dado sem disputar com o número. */
.kpi::after{
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--violeta), transparent 72%);
  opacity:.6;
}
.kpi.g::after{ background:linear-gradient(90deg, var(--ciano), transparent 72%); }
.kpi.a::after{ background:linear-gradient(90deg, var(--alerta), transparent 72%); }
.kpi.r::after{ background:linear-gradient(90deg, var(--falha), transparent 72%); }

.kpi .n{ font-size:30px; font-weight:800; }
/* Os rótulos ficaram mais descritivos ("Ações de marketing este mês"), então
   precisam poder ocupar duas linhas sem apertar o número. */
.kpi .l{ line-height:1.35; }
.kpi .d{ min-height:1.4em; }
.kpi.g .n{ color:var(--ciano) !important; }
.kpi.a .n{ color:var(--alerta) !important; }
.kpi.r .n{ color:var(--falha) !important; }

.acesso{ transition:border-color .16s ease, background .16s ease, transform .16s ease; }
.acesso:hover{
  border-color:var(--violeta) !important;
  background:var(--superficie-alta) !important;
  transform:translateY(-1px);
}
.acesso svg{ stroke:var(--violeta-claro); }

/* ── Botões ───────────────────────────────────────────────────────────────
   Um botão primário por bloco. O resto é secundário — hierarquia se faz
   tirando peso, não somando cor.
   ------------------------------------------------------------------------- */
button{ font-family:inherit; }

button:not(.secondary):not(.ghost):not(.danger):not(.chip):not(.chipSel):not(.acaoChip):not(.thumbBtn){
  background:linear-gradient(180deg, var(--violeta-claro), var(--violeta)) !important;
  color:#fff !important;
  border:0;
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset, 0 6px 18px rgba(108,59,255,.3);
  letter-spacing:.01em;
}
button:not(.secondary):not(.ghost):not(.danger):hover{ filter:brightness(1.08); }

button.secondary, button.ghost{
  background:var(--superficie-alta) !important;
  border:1px solid var(--linha-forte) !important;
  color:var(--texto) !important;
}
button.secondary:hover, button.ghost:hover{
  border-color:var(--violeta) !important;
  color:#fff !important;
}
button.danger{ color:var(--falha) !important; border-color:rgba(255,92,122,.32) !important; }

/* Foco visível em tudo, com a cor da marca. */
:focus-visible{
  outline:2px solid var(--violeta-claro) !important;
  outline-offset:2px !important;
}

/* ── Formulários ──────────────────────────────────────────────────────────*/
input, textarea, select{
  background:var(--tinta) !important;
  border-color:var(--linha-forte) !important;
  color:var(--texto) !important;
}
input:focus, textarea:focus, select:focus{ border-color:var(--violeta) !important; }
input::placeholder, textarea::placeholder{ color:var(--texto-fraco); }

.chip[aria-pressed="true"], .chipSel[aria-pressed="true"]{
  border-color:var(--violeta) !important;
  color:var(--violeta-claro) !important;
  background:rgba(108,59,255,.1) !important;
}

/* ── Calendário ───────────────────────────────────────────────────────────*/
.diaCel{ background:rgba(18,18,26,.55) !important; }
.diaCel.fds{ background:rgba(11,11,15,.5) !important; }
.diaCel.hoje{
  border-color:var(--violeta) !important;
  box-shadow:inset 0 0 0 1px rgba(108,59,255,.25);
}
.diaCel.hoje .diaNum{ color:var(--violeta-claro) !important; }

.acaoChip{ background:rgba(255,255,255,.04); border-radius:var(--r-sm); }
.acaoChip:hover{ background:rgba(255,255,255,.09); }

.faseBox{
  background:rgba(108,59,255,.08) !important;
  border-color:rgba(108,59,255,.28) !important;
}
.faseBox .r{ color:var(--violeta-claro) !important; }

/* ── Barra de progresso ───────────────────────────────────────────────────*/
.barra{ background:rgba(255,255,255,.07); }
.barra i{ background:linear-gradient(90deg, var(--violeta), var(--ciano)); }

/* ── Diálogos ─────────────────────────────────────────────────────────────*/
dialog::backdrop{ background:rgba(6,6,10,.86); backdrop-filter:blur(3px); }
.modal, .agCard, .rmCard{
  background:var(--superficie) !important;
  border-color:var(--linha-forte) !important;
  box-shadow:0 30px 90px rgba(0,0,0,.7);
}

/* ── Selos de status ──────────────────────────────────────────────────────
   Cor com significado: violeta é a marca e as ações; estados usam a própria
   escala semântica e nunca a cor de marca.
   ------------------------------------------------------------------------- */
.b-pub, .selo.publicado{ background:rgba(61,214,140,.16) !important; color:var(--ok) !important; }
.b-age, .selo.agendado{ background:rgba(255,184,77,.16) !important; color:var(--alerta) !important; }
.b-err, .selo.erro{ background:rgba(255,92,122,.16) !important; color:var(--falha) !important; }
.b-pro, .selo.processando{ background:rgba(0,212,255,.14) !important; color:var(--ciano) !important; }
.selo.avulso{ background:rgba(255,255,255,.07) !important; color:var(--texto-fraco) !important; }

.errbox{ border-left-color:var(--falha) !important; color:#ffb0be !important; }
.status.erro, .error{ color:var(--falha) !important; }

/* ── Barra de rolagem ─────────────────────────────────────────────────────*/
aside::-webkit-scrollbar-thumb{ background:var(--linha-forte); background-clip:content-box; }
aside::-webkit-scrollbar-thumb:hover{ background:var(--violeta); background-clip:content-box; }
aside{ scrollbar-color:var(--linha-forte) transparent; }

/* ── Tela de criação ──────────────────────────────────────────────────────*/
.studioBar{ background:rgba(11,11,15,.92) !important; border-bottom-color:var(--linha) !important; }
aside{ background:rgba(11,11,15,.9) !important; border-right-color:var(--linha) !important; }
.accStep{ border-color:rgba(108,59,255,.4) !important; color:var(--violeta-claro) !important; }
details.acc.destaque{
  border-color:rgba(108,59,255,.4) !important;
  box-shadow:0 0 0 1px rgba(108,59,255,.05) inset;
}
canvas{ box-shadow:0 24px 70px rgba(0,0,0,.6); }

/* ── Login ────────────────────────────────────────────────────────────────*/
.pill{
  font-family:Orbitron, Inter, sans-serif;
  font-weight:700;
  letter-spacing:.14em;
  font-size:9px;
  border-color:rgba(108,59,255,.4) !important;
  color:var(--violeta-claro) !important;
}

/* ── Acessibilidade ───────────────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
}