/* Painel administrativo OP!S
   Cores e tipografia conforme OPIS-Design-System.md (tokens oficiais, p.36-37 e p.40). */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=DM+Sans:wght@400;500;700;800&display=swap');

:root{
  /* CORES OFICIAIS */
  --opis-verde-lemon:#89f336;
  --opis-verde-apoio:#87c864;
  --opis-preto:#000000;
  --opis-cinza-chumbo:#586061;
  --opis-cinza-claro:#c4cdcc;
  --opis-offwhite:#ebefe5;
  --opis-verde-texto-claro:#4c8a1d;

  /* TIPOGRAFIA OFICIAL */
  --font-display:"Anton",sans-serif;
  --font-texto:"DM Sans",system-ui,sans-serif;

  /* GEOMETRIA (recomendação técnica do design system) */
  --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px;
  --space-6:48px; --space-8:64px;
  --radius-card:24px; --radius-media:16px; --radius-pill:999px;
  --transicao:200ms ease-out;

  /* TEMA ESCURO — o painel administrativo usa as superfícies escuras oficiais */
  --bg:var(--opis-preto);
  --bg-alt:#0b0d0d;
  --superficie:#111414;
  --superficie-2:#181c1c;
  --borda:#262b2b;
  --borda-forte:#3a4242;
  --texto:var(--opis-offwhite);
  --texto-2:var(--opis-cinza-claro);
  --texto-3:#7d8788;
  --acento:var(--opis-verde-lemon);
  --sobre-acento:var(--opis-preto);
  --acento-fraco:rgba(137,243,54,.12);
  --ok:var(--opis-verde-apoio); --ok-fraco:rgba(135,200,100,.14);
  --alerta:#ffc043; --alerta-fraco:rgba(255,192,67,.13);
  --perigo:#ff6b6b; --perigo-fraco:rgba(255,107,107,.13);
  --sombra:0 1px 2px rgba(0,0,0,.6), 0 8px 32px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--texto);
  font:16px/1.6 var(--font-texto); -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(950px 480px at 10% -12%, rgba(137,243,54,.07), transparent 62%);
  background-attachment:fixed;
}
a{color:var(--acento); text-decoration:none}

/* Anton é a fonte de display e, no material da marca, aparece sempre em caixa alta */
h1,h2,h3{font-family:var(--font-display); font-weight:400; text-transform:uppercase; margin:0}
h1{font-size:48px; line-height:1.05; letter-spacing:.01em}
h2{font-size:36px; line-height:1.1}
h3{font-size:24px; line-height:1.25}

/* ---------- login ---------- */
.login-tela{min-height:100%; display:grid; place-items:center; padding:var(--space-3)}
.login-caixa{
  width:100%; max-width:410px; background:var(--superficie); border:1px solid var(--borda);
  border-radius:var(--radius-card); padding:40px 34px; box-shadow:var(--sombra);
  position:relative; overflow:hidden;
}
.login-caixa::before{
  content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,transparent,var(--opis-verde-lemon),var(--opis-verde-apoio),transparent);
}
.marca{display:flex; align-items:center; gap:12px}
.login-caixa .marca{margin-bottom:28px}
.marca-logo{height:30px; width:auto; display:block}
.marca-sub{
  font-family:var(--font-texto); font-size:11px; font-weight:700; color:var(--texto-3);
  letter-spacing:.16em; text-transform:uppercase; padding-left:13px; border-left:1px solid var(--borda-forte);
}

/* ---------- formulários ---------- */
.campo{margin-bottom:var(--space-2)}
.campo label{
  display:block; font-size:13px; font-weight:700; color:var(--texto-2);
  margin-bottom:7px; letter-spacing:.01em;
}
input[type=text],input[type=email],input[type=password],select,textarea{
  width:100%; padding:11px 14px; background:var(--bg-alt); color:var(--texto);
  border:1px solid var(--borda-forte); border-radius:10px;
  font:inherit; font-size:15px; transition:border-color var(--transicao), box-shadow var(--transicao);
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--acento); box-shadow:0 0 0 3px var(--acento-fraco);
}
input::placeholder{color:var(--texto-3)}
textarea{resize:vertical; min-height:78px; font-family:ui-monospace,Consolas,monospace; font-size:13px}
.dica{font-size:13px; color:var(--texto-3); margin-top:6px; line-height:1.5}

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:var(--radius-pill); border:1px solid transparent;
  font-family:var(--font-texto); font-size:15px; font-weight:700; line-height:1;
  cursor:pointer; transition:filter var(--transicao), background var(--transicao), border-color var(--transicao);
  white-space:nowrap;
}
.btn:disabled{opacity:.5; cursor:not-allowed}
/* verde sobre preto: contraste 13,8:1 (cap.14 do design system) */
.btn-principal{background:var(--opis-verde-lemon); color:var(--sobre-acento)}
.btn-principal:hover:not(:disabled){filter:brightness(1.1)}
.btn-fantasma{background:transparent; border-color:var(--borda-forte); color:var(--texto-2)}
.btn-fantasma:hover:not(:disabled){border-color:var(--acento); color:var(--texto)}
.btn-perigo{background:var(--perigo-fraco); border-color:rgba(255,107,107,.35); color:var(--perigo)}
.btn-perigo:hover:not(:disabled){background:rgba(255,107,107,.2)}
.btn-largo{width:100%}
.btn-p{padding:7px 14px; font-size:13px}

/* ---------- avisos ---------- */
.aviso{
  padding:12px 15px; border-radius:12px; font-size:14px; margin-bottom:var(--space-2);
  border:1px solid transparent; line-height:1.5;
}
.aviso-erro{background:var(--perigo-fraco); border-color:rgba(255,107,107,.3); color:#ffa3a3}
.aviso-ok{background:var(--ok-fraco); border-color:rgba(135,200,100,.3); color:#a9e089}
.aviso-atencao{background:var(--alerta-fraco); border-color:rgba(255,192,67,.3); color:#ffd684}
.escondido{display:none !important}

/* ---------- layout do painel ---------- */
.topo{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:var(--space-2);
  padding:14px var(--space-3); background:rgba(0,0,0,.88); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--borda);
}
.topo .espaco{flex:1}
.usuario-chip{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--texto-2)}
.usuario-avatar{
  width:32px; height:32px; border-radius:var(--radius-pill); display:grid; place-items:center; flex:none;
  background:var(--acento-fraco); border:1px solid rgba(137,243,54,.35);
  font-weight:700; font-size:12px; color:var(--acento);
}
.conteudo{max-width:1240px; margin:0 auto; padding:var(--space-4) var(--space-3) var(--space-8)}
.abas{display:flex; gap:4px; border-bottom:1px solid var(--borda); margin-bottom:var(--space-3); overflow-x:auto}
.aba{
  padding:11px 18px; background:none; border:none; border-bottom:2px solid transparent;
  color:var(--texto-2); font-family:var(--font-texto); font-size:15px; font-weight:700;
  cursor:pointer; white-space:nowrap; transition:color var(--transicao);
}
.aba:hover{color:var(--texto)}
.aba.ativa{color:var(--acento); border-bottom-color:var(--acento)}
.secao-topo{display:flex; align-items:center; gap:var(--space-2); margin-bottom:var(--space-2); flex-wrap:wrap}
.secao-topo .espaco{flex:1}
.subtitulo{color:var(--texto-2); font-size:15px; margin:6px 0 0; max-width:62ch}

/* ---------- cartões e tabela ---------- */
.cartao{
  background:var(--superficie); border:1px solid var(--borda);
  border-radius:var(--radius-media); box-shadow:var(--sombra);
}
.tabela-caixa{overflow-x:auto; border-radius:var(--radius-media)}
table{width:100%; border-collapse:collapse; font-size:15px}
th{
  text-align:left; padding:12px 15px; background:var(--bg-alt); color:var(--texto-3);
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  border-bottom:1px solid var(--borda); white-space:nowrap;
}
td{padding:13px 15px; border-bottom:1px solid var(--borda); vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:rgba(137,243,54,.04)}
.celula-principal{font-weight:700}
.celula-secundaria{font-size:13px; color:var(--texto-3)}
.acoes{display:flex; gap:7px; justify-content:flex-end}
.vazio{padding:48px 20px; text-align:center; color:var(--texto-3)}

.etiqueta{
  display:inline-block; padding:4px 11px; border-radius:var(--radius-pill);
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.et-admin{background:var(--opis-verde-lemon); color:var(--opis-preto)}
.et-gestor{background:var(--alerta-fraco); color:var(--alerta)}
.et-cliente{background:rgba(196,205,204,.14); color:var(--texto-2)}
.et-ativo{background:var(--ok-fraco); color:#a9e089}
.et-inativo{background:var(--perigo-fraco); color:var(--perigo)}

/* ---------- modal ---------- */
.modal-fundo{
  position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.8);
  backdrop-filter:blur(4px); display:grid; place-items:center; padding:22px; overflow-y:auto;
}
.modal{
  width:100%; max-width:540px; background:var(--superficie); border:1px solid var(--borda-forte);
  border-radius:var(--radius-card); box-shadow:var(--sombra); margin:auto;
}
.modal-topo{padding:24px 26px 0}
.modal-topo h2{font-size:28px}
.modal-corpo{padding:18px 26px}
.modal-rodape{display:flex; gap:10px; justify-content:flex-end; padding:16px 26px 24px; flex-wrap:wrap}
.lista-check{
  max-height:200px; overflow-y:auto; border:1px solid var(--borda-forte);
  border-radius:10px; padding:10px; background:var(--bg-alt);
}
.lista-check label{
  display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:8px;
  cursor:pointer; font-size:15px; color:var(--texto); font-weight:500;
}
.lista-check label:hover{background:var(--superficie-2)}
.lista-check input{width:auto; margin:0; accent-color:var(--opis-verde-lemon)}

.senha-caixa{
  font-family:ui-monospace,Consolas,monospace; font-size:20px; font-weight:700; letter-spacing:.07em;
  background:var(--bg-alt); border:1px dashed var(--borda-forte); border-radius:12px;
  padding:16px; text-align:center; margin:14px 0; color:var(--acento); user-select:all; word-break:break-all;
}
.carregando{padding:48px; text-align:center; color:var(--texto-3); font-size:15px}

@media (max-width:640px){
  .conteudo{padding:var(--space-3) var(--space-2) var(--space-6)}
  .topo{padding:12px var(--space-2)}
  h1{font-size:32px}
  h2{font-size:26px}
  .modal-topo h2{font-size:24px}
  .usuario-chip span.nome{display:none}
}

/* linha de cor: amostra + hexadecimal */
.linha-cor{display:flex; gap:9px; align-items:center; margin-bottom:7px}
.linha-cor input[type=color]{
  width:44px; height:42px; flex:none; padding:3px; cursor:pointer;
  background:var(--bg-alt); border:1px solid var(--borda-forte); border-radius:10px;
}
.linha-cor input[type=color]::-webkit-color-swatch{border:none; border-radius:6px}
.linha-cor input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.linha-cor input[type=text]{flex:1; min-width:0}

/* cartoes de conexao de API */
.con-cartao{
  border:1px solid var(--borda-forte); border-radius:var(--radius-media);
  padding:16px 18px; margin-bottom:12px; background:var(--bg-alt);
}
.con-cartao:last-child{margin-bottom:0}
.con-topo{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.con-topo .celula-secundaria{margin-top:2px; line-height:1.45}

/* ============ efeitos animados (login e painel) ============ */
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

/* luz neon que percorre a borda (estilo originkit neon-border) */
.login-caixa { --neon-cor: var(--opis-verde-lemon); }
.login-caixa::before { display: none; }              /* substitui a linha estatica do topo */
.login-caixa::after,
.login-caixa .neon-bloom {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--ang),
    transparent 0 72%, var(--neon-cor) 86%, #eaffd6 91%, var(--neon-cor) 95%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: neon-gira 7s linear infinite; pointer-events: none;
}
.login-caixa .neon-bloom { filter: blur(12px); opacity: .55; padding: 3px; }
@keyframes neon-gira { to { --ang: 360deg; } }

/* orbes flutuantes atras do login */
.login-tela { position: relative; overflow: hidden; }
.login-tela::before, .login-tela::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(70px);
  pointer-events: none; z-index: 0;
}
.login-tela::before {
  width: 420px; height: 420px; background: rgba(137,243,54,.10);
  top: -120px; left: -80px; animation: orbita 16s ease-in-out infinite alternate;
}
.login-tela::after {
  width: 360px; height: 360px; background: rgba(135,200,100,.08);
  bottom: -110px; right: -60px; animation: orbita 19s ease-in-out infinite alternate-reverse;
}
@keyframes orbita { to { transform: translate(60px, 40px) scale(1.15); } }
.login-caixa { z-index: 1; }

/* entrada suave das secoes e cartoes do painel */
.secao:not(.escondido) { animation: sobe .4s ease both; }
.cartao { transition: border-color .25s ease, box-shadow .25s ease; }
.cartao:hover { border-color: rgba(137,243,54,.35); box-shadow: var(--sombra), 0 0 24px rgba(137,243,54,.07); }
@keyframes sobe { from { opacity: 0; transform: translateY(10px); } }

/* modal entra animado */
.modal { animation: modal-entra .28s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes modal-entra { from { opacity: 0; transform: translateY(14px) scale(.97); } }

/* aba ativa com brilho; icones alinhados */
.aba { display: inline-flex; align-items: center; gap: 7px; }
.aba svg { width: 15px; height: 15px; flex: none }
.aba.ativa { text-shadow: 0 0 18px rgba(137,243,54,.55); }

/* botao principal pulsa de leve no hover */
.btn-principal:hover:not(:disabled) { box-shadow: 0 0 18px rgba(137,243,54,.35); }

/* anel sutil no avatar */
.usuario-avatar { position: relative; }
.usuario-avatar::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  border: 1px solid rgba(137,243,54,.4); animation: pulso 2.6s ease-out infinite;
}
@keyframes pulso { 0% { opacity: .7; transform: scale(.9); } 70%, 100% { opacity: 0; transform: scale(1.25); } }

/* conexoes: cartao acende no hover */
.con-cartao { transition: border-color .25s ease, box-shadow .25s ease; }
.con-cartao:hover { border-color: rgba(137,243,54,.4); box-shadow: 0 0 20px rgba(137,243,54,.06); }

@media (prefers-reduced-motion: reduce) {
  .login-caixa::after, .login-caixa .neon-bloom, .login-tela::before, .login-tela::after,
  .usuario-avatar::after { animation: none; }
  .secao:not(.escondido), .modal { animation: none; }
}

/* guia passo a passo dentro do formulario de conexao */
.guia{
  margin-bottom:var(--space-2); border:1px solid var(--borda-forte);
  border-radius:var(--radius-media); background:var(--bg-alt); overflow:hidden;
}
.guia summary{
  padding:13px 16px; cursor:pointer; font-size:14px; font-weight:700; color:var(--acento);
  list-style:none; display:flex; align-items:center; gap:9px; user-select:none;
}
.guia summary::before{content:'?'; display:grid; place-items:center; width:20px; height:20px;
  border-radius:50%; background:var(--acento); color:var(--opis-preto); font-size:13px; flex:none}
.guia summary:hover{background:var(--superficie-2)}
.guia[open] summary{border-bottom:1px solid var(--borda)}
.guia-bloco{padding:12px 16px 4px}
.guia-bloco + .guia-bloco{border-top:1px dashed var(--borda)}
.guia-titulo{font-weight:700; font-size:13.5px; margin-bottom:6px; color:var(--texto)}
.guia ol{margin:0 0 10px; padding-left:20px; color:var(--texto-2); font-size:13.5px}
.guia li{margin-bottom:5px; line-height:1.5}

/* campo de imagem com previa */
.img-linha{display:flex; gap:14px; align-items:flex-start}
.img-previa{
  width:104px; height:76px; flex:none; border-radius:10px; overflow:hidden;
  border:1px dashed var(--borda-forte); background:var(--bg-alt);
  display:grid; place-items:center; color:var(--texto-3); font-size:11px;
}
.img-previa img{max-width:100%; max-height:100%; object-fit:contain}
.img-acoes{flex:1; display:flex; flex-direction:column; gap:6px; align-items:flex-start}
.img-acoes input[type=text]{width:100%}

/* mapeamento clicavel das etapas do funil */
.mapa-funil{margin-top:10px; padding-top:8px; border-top:1px dashed var(--borda)}
.mapa-titulo{font-weight:700; margin-bottom:6px}
.mapa-titulo span{color:var(--texto-3); font-weight:400; font-size:12px}
.mapa-linha{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:5px}
.mapa-linha span{font-size:13px; color:var(--texto)}
.mapa-linha select{width:190px; flex:none; padding:5px 8px; font-size:12.5px}
.p-colunas{margin:0 0 12px 12px; padding:10px 12px; border-left:2px solid var(--borda); background:var(--bg-2); border-radius:0 8px 8px 0}
.col-linha{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px}
.col-check{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--texto); flex:1; min-width:0}
.col-check input{flex:none}
.col-linha select{width:160px; flex:none; padding:4px 8px; font-size:12px}

/* construtor do funil no assistente do CRM */
.fz-linha{display:flex; align-items:center; gap:8px; margin-bottom:7px}
.fz-pos{
  width:26px; height:26px; flex:none; display:grid; place-items:center;
  border-radius:50%; background:var(--acento-fraco); color:var(--acento);
  font-size:12px; font-weight:800; border:1px solid rgba(137,243,54,.3);
}
.fz-linha select{flex:1.2; min-width:0; padding:8px 10px; font-size:13px}
.fz-linha input{flex:1; min-width:0; padding:8px 10px; font-size:13px}
.fz-remover{
  width:28px; height:28px; flex:none; border-radius:8px; border:1px solid var(--borda-forte);
  background:none; color:var(--texto-3); font-size:15px; cursor:pointer; line-height:1;
}
.fz-remover:hover{color:var(--perigo); border-color:var(--perigo)}
.fz-final{margin-top:10px; padding-top:10px; border-top:1px dashed var(--borda-forte)}
.fz-final .fz-pos{background:var(--ok-fraco); color:var(--ok); border-color:rgba(135,200,100,.35)}
.fz-fixa{flex:1.2; font-size:13px; color:var(--texto-2)}