/* ============================================================
   dashboard-shared.css -- componentes reusaveis entre as 15
   paginas do dashboard interno. Nao gerado (nao e' derivado de
   design-system/tokens.json, [8j] nao se aplica aqui -- e' CSS de
   componente, so os VALORES de cor vem dos tokens via var()).
   Evolucao estrutural pedida pelo Diretor (Ciclo 611): consolida
   em 1 lugar o que antes seria duplicado em 15 <style> diferentes.
   Cada pagina linka este arquivo DEPOIS de design-tokens.css e
   ANTES do seu proprio <style> (que pode sobrescrever pontos
   especificos sem quebrar o que ja existia).
   ============================================================ */

/* ICONE DE NAVEGACAO (nav.js) */
.nav-icon{
  display:flex;align-items:center;justify-content:center;
  width:16px;height:16px;flex-shrink:0;
  color:inherit;opacity:0.75;
}
.nav-icon svg{width:16px;height:16px;display:block;}
.nav-item.active .nav-icon{opacity:1;color:var(--roxo-forte,var(--th-marca-teuhub-hover));}
.nav-item:hover .nav-icon{opacity:1;}
.mais-sheet a .nav-icon{width:18px;height:18px;opacity:0.7;}
.mais-sheet a .nav-icon svg{width:18px;height:18px;}
.mais-sheet a.active .nav-icon{opacity:1;color:var(--roxo-forte,var(--th-marca-teuhub-hover));}

/* PILL DE STATUS -- fundo solido + texto, substitui "bolinha + texto colorido"
   solto. Usa os tokens de estado ja existentes na fonte (cor.estado.*),
   nao inventa cor nova. Variantes: sucesso(verde) / atencao(amarelo) /
   perigo(vermelho) / neutro(cinza, ex: DESCONHECIDO). */
.status-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px 3px 8px;border-radius:9999px;
  font-size:10.5px;font-weight:700;letter-spacing:0.3px;
  white-space:nowrap;
}
.status-pill::before{content:'';width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.status-pill.sucesso{
  background:var(--th-estado-sucesso-fundo,rgba(16,185,129,0.15));
  color:var(--th-estado-sucesso-texto,#34d399);
}
.status-pill.sucesso::before{background:var(--th-estado-sucesso-texto,#34d399);box-shadow:0 0 6px 1px var(--th-estado-sucesso-texto,#34d399);}
.status-pill.atencao{
  background:var(--th-estado-atencao-fundo,rgba(217,158,44,0.15));
  color:var(--th-estado-atencao-texto,#e6b955);
}
.status-pill.atencao::before{background:var(--th-estado-atencao-texto,#e6b955);box-shadow:0 0 6px 1px var(--th-estado-atencao-texto,#e6b955);}
.status-pill.perigo{
  background:var(--th-estado-perigo-fundo,rgba(239,68,68,0.15));
  color:var(--th-estado-perigo-texto,#f87171);
}
.status-pill.perigo::before{background:var(--th-estado-perigo-texto,#f87171);box-shadow:0 0 6px 1px var(--th-estado-perigo-texto,#f87171);}
.status-pill.neutro{
  background:var(--th-chip-fundo,#2d2d38);
  color:var(--th-texto-secundario,#a1a1aa);
}
.status-pill.neutro::before{background:var(--th-texto-secundario,#a1a1aa);}
/* Aliases -- mesma nomenclatura de severidade ja usada em area-*.html
   (verde/amarelo/vermelho/cinza), pra nao precisar tocar o JS que gera
   o markup, so' a classe CSS aplicada. */
.status-pill.verde{background:var(--th-estado-sucesso-fundo,rgba(16,185,129,0.15));color:var(--th-estado-sucesso-texto,#34d399);}
.status-pill.verde::before{background:var(--th-estado-sucesso-texto,#34d399);box-shadow:0 0 6px 1px var(--th-estado-sucesso-texto,#34d399);}
.status-pill.amarelo{background:var(--th-estado-atencao-fundo,rgba(217,158,44,0.15));color:var(--th-estado-atencao-texto,#e6b955);}
.status-pill.amarelo::before{background:var(--th-estado-atencao-texto,#e6b955);box-shadow:0 0 6px 1px var(--th-estado-atencao-texto,#e6b955);}
.status-pill.vermelho{background:var(--th-estado-perigo-fundo,rgba(239,68,68,0.15));color:var(--th-estado-perigo-texto,#f87171);}
.status-pill.vermelho::before{background:var(--th-estado-perigo-texto,#f87171);box-shadow:0 0 6px 1px var(--th-estado-perigo-texto,#f87171);}
.status-pill.cinza{background:var(--th-chip-fundo,#2d2d38);color:var(--th-texto-secundario,#a1a1aa);}
.status-pill.cinza::before{background:var(--th-texto-secundario,#a1a1aa);}

/* HOVER GENERICO EM .card -- aplica nas 14 paginas que usam essa classe
   sem precisar editar cada uma. .card:hover tem especificidade maior que
   .card sozinho, entao sempre vence mesmo definido antes no cascade. */
.card{transition:background .15s,border-color .15s,box-shadow .15s,transform .15s;}
.card:hover{
  border-color:rgba(139,92,246,0.28);
  background:var(--surface-hover,var(--th-fundo-superficie-hover));
  box-shadow:0 14px 32px -16px rgba(0,0,0,0.65);
}

/* HOVER/ELEVACAO GENERICO -- qualquer card que ja usa var(--surface) e
   var(--border-soft) ganha reacao ao toque/hover so' adicionando esta
   classe, sem redefinir o card inteiro. */
.card-lift{transition:box-shadow .15s,transform .15s,border-color .15s,background .15s;}
.card-lift:hover{
  transform:translateY(-2px);
  border-color:rgba(139,92,246,0.28);
  background:var(--surface-hover,var(--th-fundo-superficie-hover));
  box-shadow:0 14px 32px -16px rgba(0,0,0,0.65);
}

/* TABELA ZEBRA -- listras sutis pra facilitar leitura de linha em telas
   longas (Leads, Implantacao Pendente, etc.), sem mudar estrutura da
   tabela existente. */
table.zebra tbody tr:nth-child(even){background:rgba(255,255,255,0.02);}
table.zebra tbody tr:hover{background:var(--surface-hover,var(--th-fundo-superficie-hover));}
table.zebra tbody tr{transition:background .1s;}

/* ACCORDION (<details>/<summary> nativo, sem JS) -- pra cards com texto
   corrido longo (Governanca, Custo, Fluxos, Inbox): mostra resumo de 1
   linha fechado, expande sob demanda. Zero dependencia nova. */
details.acc{border:1px solid var(--border-soft,var(--th-fundo-borda-suave));border-radius:12px;background:var(--surface,var(--th-fundo-superficie));overflow:hidden;}
details.acc + details.acc{margin-top:10px;}
details.acc summary{
  list-style:none;cursor:pointer;padding:14px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:12px;font-weight:600;color:var(--texto,var(--th-texto-principal));
}
details.acc summary::-webkit-details-marker{display:none;}
details.acc summary::after{
  content:'';width:8px;height:8px;flex-shrink:0;
  border-right:1.5px solid var(--muted,var(--th-texto-secundario));
  border-bottom:1.5px solid var(--muted,var(--th-texto-secundario));
  transform:rotate(45deg);transition:transform .15s;
}
details.acc[open] summary::after{transform:rotate(-135deg);}
details.acc summary:hover{background:var(--surface-hover,var(--th-fundo-superficie-hover));}
details.acc .acc-body{padding:0 16px 16px;font-size:11.5px;line-height:1.6;color:var(--muted,var(--th-texto-secundario));}
details.acc .acc-summary-line{font-size:11px;font-weight:400;color:var(--muted,var(--th-texto-secundario));margin-left:10px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* METRICA HERO -- numero principal de uma pagina (MRR, total, etc.) com
   o acento gradiente da marca em vez de branco puro, pra dar hierarquia
   sem redesenhar o card. Uso: <span class="metric-hero">R$ 0</span> */
.metric-hero{
  background:var(--th-acento-gradiente,linear-gradient(135deg,#00E5FF 0%,#8A2BE2 100%));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}