/* componentes.css — cartões, botões, campos, selos, abas, tabela, progresso. */

/* ───────────────────────────────── cartão ──────────────────────────────── */
.cartao{
  background:var(--superficie);
  border:1px solid var(--linha);
  border-radius:var(--r);
  box-shadow:var(--sombra);
  overflow:hidden;
}
.cartao-cabeca{
  display:flex;align-items:flex-start;gap:12px;
  padding:15px 17px 13px;border-bottom:1px solid var(--linha-2);
}
.cartao-cabeca h3{flex:1;min-width:0}
.cartao-cabeca p{font-size:12.5px;color:var(--tinta-2);margin-top:3px}
.cartao-corpo{padding:16px 17px}
.cartao-corpo.sem-topo{padding-top:0}
.cartao-pe{padding:12px 17px;border-top:1px solid var(--linha-2);background:var(--superficie-2)}
.cartao.destaque{border-color:var(--marca);box-shadow:0 0 0 3px var(--marca-suave),var(--sombra)}

/* indicador numérico */
.metrica{padding:15px 16px}
.metrica .rotulo{display:block;margin-bottom:7px}
.metrica .valor{font-family:var(--f-titulo);font-size:23px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.metrica .nota{font-size:12px;color:var(--tinta-2);margin-top:4px;line-height:1.35}

/* ───────────────────────────────── botões ──────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--superficie);border:1px solid var(--linha);
  border-radius:var(--r-sm);padding:8px 13px;
  font-size:13px;font-weight:500;color:var(--tinta-2);
  transition:background var(--t),border-color var(--t),color var(--t),transform var(--t);
  white-space:nowrap;
}
.btn:hover:not(:disabled){background:var(--superficie-3);color:var(--tinta);border-color:var(--superficie-4)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.principal{background:var(--btn-marca);border-color:var(--btn-marca);color:#fff;font-weight:600}
.btn.principal:hover:not(:disabled){background:var(--btn-marca-hover);border-color:var(--btn-marca-hover);color:#fff}
.btn.fantasma{border-color:transparent;background:transparent}
.btn.fantasma:hover:not(:disabled){background:var(--superficie-3)}
.btn.pequeno{padding:5px 9px;font-size:12px;border-radius:var(--r-xs)}
.btn.grande{padding:11px 22px;font-size:14.5px}
.btn.bloco{width:100%}
.btn.copiado{background:var(--ok-suave);border-color:var(--ok);color:var(--ok-texto)}

/* ───────────────────────────────── campos ──────────────────────────────── */
.campo{display:grid;gap:5px}
.campo > label{font-size:12.5px;font-weight:600;color:var(--tinta-2)}
.campo .ajuda{font-size:11.5px;color:var(--tinta-3);line-height:1.4}
.campo input,.campo select,.campo textarea{
  background:var(--superficie);border:1px solid var(--linha);
  border-radius:var(--r-sm);padding:9px 11px;font-size:13.5px;width:100%;
  transition:border-color var(--t),box-shadow var(--t);
}
.campo textarea{resize:vertical;min-height:84px;line-height:1.5;font-family:var(--f-texto)}
.campo input:hover,.campo select:hover,.campo textarea:hover{border-color:var(--superficie-4)}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--marca);box-shadow:0 0 0 3px var(--marca-suave);
}
.campo input::placeholder,.campo textarea::placeholder{color:var(--tinta-3)}
.campo.erro input{border-color:var(--alerta);box-shadow:0 0 0 3px var(--alerta-suave)}
.campo .msg-erro{font-size:12px;color:var(--alerta);font-weight:500}
.campo-grande input{font-size:15.5px;padding:13px 15px}

.opcionais{border:1px solid var(--linha);border-radius:var(--r-sm);overflow:hidden}
.opcionais summary{
  padding:10px 13px;font-size:13px;font-weight:500;color:var(--tinta-2);
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;
  background:var(--superficie-2);transition:background var(--t);
}
.opcionais summary::-webkit-details-marker{display:none}
.opcionais summary:hover{background:var(--superficie-3);color:var(--tinta)}
.opcionais summary .seta{transition:transform var(--t);color:var(--tinta-3)}
.opcionais[open] summary .seta{transform:rotate(90deg)}
.opcionais .interior{padding:15px 13px;border-top:1px solid var(--linha-2)}

/* ───────────────────────────────── selos ───────────────────────────────── */
.selo{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:99px;
  font-size:11.5px;font-weight:600;line-height:1.5;white-space:nowrap;
  background:var(--neutro-suave);color:var(--tinta-2);
  border:1px solid transparent;
}
.selo.ok{background:var(--ok-suave);color:var(--ok-texto)}
.selo.atencao{background:var(--atencao-suave);color:var(--atencao)}
.selo.neutro{background:var(--neutro-suave);color:var(--tinta-2)}
.selo.duvida{background:var(--duvida-suave);color:var(--duvida)}
.selo.alerta{background:var(--alerta-suave);color:var(--alerta)}
.selo.contorno{background:transparent;border-color:var(--linha);color:var(--tinta-2)}
.selo .bolinha{width:6px;height:6px;border-radius:99px;background:currentColor}

/* Selo que carrega frase, não rótulo. O nowrap do selo comum serve para "Cliente"
   e "Confirmada"; numa oportunidade inteira ("As informações da empresa só
   existem dentro do Instagram") ele força a largura do conteúdo e empurra o
   cartão para fora da coluna, cortando tudo o que está dentro dele. */
.selo.frase{
  display:inline-block;white-space:normal;text-align:left;
  line-height:1.45;padding:4px 10px;border-radius:var(--r-sm);
  overflow-wrap:anywhere;max-width:100%;
}

.fonte-dado{
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.04em;
  color:var(--tinta-3);background:var(--superficie-3);
  padding:1px 6px;border-radius:var(--r-xs);white-space:nowrap;
}

/* ───────────────────────────────── abas ────────────────────────────────── */
.abas{
  display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;
  border-bottom:1px solid var(--linha);margin-bottom:20px;
}
.abas::-webkit-scrollbar{display:none}
.abas button{
  padding:10px 14px 11px;font-size:13.5px;font-weight:500;color:var(--tinta-2);
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;
  transition:color var(--t),border-color var(--t);
  display:inline-flex;align-items:center;gap:7px;
}
.abas button:hover{color:var(--tinta)}
.abas button.ativa{color:var(--marca-3);border-bottom-color:var(--marca);font-weight:600}
.abas button .conta{
  font-family:var(--f-mono);font-size:10px;background:var(--superficie-3);
  color:var(--tinta-3);padding:1px 5px;border-radius:99px;
}
.abas button.ativa .conta{background:var(--marca-suave);color:var(--marca-2)}

.painel{display:none}
.painel.ativo{display:block;animation:surge .2s ease}

/* ─────────────────────────────── diagnóstico ───────────────────────────── */
.item-diagnostico{
  display:grid;grid-template-columns:24px 1fr;gap:11px;
  padding:12px 0;border-bottom:1px solid var(--linha-2);
}
.item-diagnostico:last-child{border-bottom:0}
.item-diagnostico .marca-estado{font-size:14px;line-height:1.5;text-align:center}
.item-diagnostico .canal{font-size:12.5px;font-weight:700;color:var(--tinta);letter-spacing:-.005em}
.item-diagnostico .texto{font-size:13.5px;color:var(--tinta);margin-top:2px}
.item-diagnostico .evidencia{font-size:12.5px;color:var(--tinta-2);margin-top:4px;line-height:1.45}

/* ────────────────────────────── oportunidade ───────────────────────────── */
.oportunidade{
  border:1px solid var(--linha);border-radius:var(--r);
  background:var(--superficie);overflow:hidden;
}
.oportunidade > header{
  display:flex;align-items:flex-start;gap:10px;padding:14px 16px 12px;
  border-bottom:1px solid var(--linha-2);
}
.oportunidade > header h4{flex:1;min-width:0;font-size:14.5px}
.oportunidade .campos{display:grid;gap:11px;padding:14px 16px}
.oportunidade .bloco .rotulo{display:block;margin-bottom:3px}
.oportunidade .bloco p{font-size:13px;color:var(--tinta);line-height:1.5}
.oportunidade .bloco.solucao p{color:var(--marca-3);font-weight:500}
.oportunidade.forca-alta{border-left:3px solid var(--ok)}
.oportunidade.forca-media{border-left:3px solid var(--atencao)}
.oportunidade.forca-potencial{border-left:3px solid var(--neutro)}

/* ──────────────────────────────── solução ──────────────────────────────── */
.solucao-cartao > header{
  display:flex;align-items:center;gap:10px;padding:14px 16px;
  border-bottom:1px solid var(--linha-2);
}
.solucao-cartao > header h4{flex:1;font-size:15px}
.solucao-cartao .corpo{padding:14px 16px;display:grid;gap:11px}
.solucao-cartao .uso{
  background:var(--superficie-2);border:1px solid var(--linha-2);
  border-radius:var(--r-sm);padding:11px 13px;font-size:13px;line-height:1.5;
}
.solucao-cartao .ressalva{
  font-size:12.5px;color:var(--atencao);background:var(--atencao-suave);
  border-radius:var(--r-sm);padding:9px 11px;line-height:1.45;
}
.lista-motivos{margin:0;padding-left:17px;font-size:13px;color:var(--tinta-2);display:grid;gap:3px}
.lista-motivos li::marker{color:var(--tinta-3)}

/* ──────────────────────────────── mini site ────────────────────────────── */
.amostras{display:flex;gap:8px;flex-wrap:wrap}
.amostra{
  border:1px solid var(--linha);border-radius:var(--r-sm);
  overflow:hidden;width:112px;background:var(--superficie);
}
.amostra .chapa{height:52px}
.amostra .info{padding:7px 9px}
.amostra .nome{font-size:11px;font-weight:600;color:var(--tinta-2)}
.amostra .hex{font-family:var(--f-mono);font-size:11px;color:var(--tinta-3);margin-top:1px}

.wireframe{
  font-family:var(--f-mono);font-size:12px;line-height:1.75;
  background:var(--superficie-2);border:1px solid var(--linha);
  border-radius:var(--r-sm);padding:16px 18px;
  white-space:pre;overflow-x:auto;color:var(--tinta);
}

.secao-mini{
  display:grid;grid-template-columns:30px 1fr;gap:11px;
  padding:12px 0;border-bottom:1px solid var(--linha-2);
}
.secao-mini:last-child{border-bottom:0}
.secao-mini .num{font-family:var(--f-mono);font-size:12px;color:var(--tinta-3);padding-top:1px}
.secao-mini .nome{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.secao-mini .origem{font-size:12.5px;color:var(--tinta-2);margin-top:3px;line-height:1.45}
.secao-mini .conteudo{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.secao-mini .conteudo span{
  font-size:12px;background:var(--superficie-3);color:var(--tinta-2);
  padding:2px 8px;border-radius:99px;
}

/* ─────────────────────────────── abordagem ─────────────────────────────── */
.mensagem{
  background:var(--superficie-2);border:1px solid var(--linha);
  border-radius:var(--r-sm);padding:15px 17px;
  font-size:13.5px;line-height:1.62;white-space:pre-wrap;
  overflow-wrap:anywhere;color:var(--tinta);
}
.contador{font-family:var(--f-mono);font-size:11px;color:var(--tinta-3)}
.contador.fora{color:var(--atencao)}

/* ──────────────────────────────── tabela ───────────────────────────────── */
.tabela-caixa{
  border:1px solid var(--linha);border-radius:var(--r);
  overflow:auto;background:var(--superficie);box-shadow:var(--sombra);
}
table.tabela{width:100%;border-collapse:collapse;font-size:13px}
table.tabela th{
  text-align:left;padding:10px 13px;font-size:11px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--tinta-3);
  background:var(--superficie-2);border-bottom:1px solid var(--linha);
  position:sticky;top:0;z-index:1;white-space:nowrap;
}
table.tabela td{padding:10px 13px;border-bottom:1px solid var(--linha-2);vertical-align:top}
table.tabela tr:last-child td{border-bottom:0}
table.tabela tbody tr:hover{background:var(--superficie-2)}
table.tabela td.acoes{white-space:nowrap;text-align:right}
table.tabela select{
  background:var(--superficie);border:1px solid var(--linha);
  border-radius:var(--r-xs);padding:4px 7px;font-size:12px;max-width:170px;
}

/* ─────────────────────────────── progresso ─────────────────────────────── */
.progresso{display:grid;gap:9px;padding:6px 0}
.etapa{
  display:flex;align-items:center;gap:11px;
  font-size:13.5px;color:var(--tinta-3);
  transition:color var(--t);
}
.etapa .disco{
  width:18px;height:18px;border-radius:99px;flex:none;
  border:2px solid var(--linha);display:grid;place-items:center;
  transition:border-color var(--t),background var(--t);
}
.etapa.corrente{color:var(--tinta);font-weight:500}
.etapa.corrente .disco{border-color:var(--marca);border-right-color:transparent;animation:girar .7s linear infinite}
.etapa.pronta{color:var(--tinta-2)}
.etapa.pronta .disco{border-color:var(--marca);background:var(--marca)}
.etapa.pronta .disco::after{content:"";width:5px;height:9px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(42deg) translate(-1px,-1px)}
@keyframes girar{to{transform:rotate(360deg)}}

.barra{height:3px;background:var(--superficie-3);border-radius:99px;overflow:hidden}
.barra i{display:block;height:100%;background:var(--marca);border-radius:99px;transition:width .35s ease}

/* ─────────────────────────────── avisos ───────────────────────────────── */
.aviso{
  display:flex;gap:10px;align-items:flex-start;
  border-radius:var(--r-sm);padding:12px 14px;font-size:13px;line-height:1.5;
  background:var(--atencao-suave);color:var(--atencao);
}
.aviso.info{background:var(--duvida-suave);color:var(--duvida)}
.aviso.grave{background:var(--alerta-suave);color:var(--alerta)}
.aviso.neutro{background:var(--superficie-3);color:var(--tinta-2)}
.aviso strong{font-weight:700}

.vazio{
  text-align:center;padding:46px 22px;color:var(--tinta-3);
  border:1px dashed var(--linha);border-radius:var(--r);background:var(--superficie-2);
}
.vazio h3{color:var(--tinta-2);margin-bottom:5px}
.vazio p{font-size:13px;max-width:50ch;margin:0 auto}

/* ─────────────────────────────── notificação ───────────────────────────── */
.avisos-flutuantes{
  position:fixed;bottom:22px;right:22px;z-index:200;
  display:grid;gap:8px;max-width:340px;
}
.toast{
  background:var(--tinta);color:var(--superficie);
  border-radius:var(--r-sm);padding:11px 15px;font-size:13px;
  box-shadow:var(--sombra-2);animation:entrar .22s ease;
  display:flex;align-items:center;gap:9px;
}
.toast.ok{background:#0B6144;color:#fff}
.toast.erro{background:var(--alerta);color:#fff}
@keyframes entrar{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ──────────────────────────── linha de dados ───────────────────────────── */
.dados{display:grid;gap:0}
.dado{
  display:grid;grid-template-columns:150px 1fr auto;gap:12px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--linha-2);font-size:13.5px;
}
.dado:last-child{border-bottom:0}
.dado .chave{font-size:12px;color:var(--tinta-3);font-weight:500}
.dado .valor{color:var(--tinta);overflow-wrap:anywhere}
.dado .valor.ausente{color:var(--tinta-3);font-style:italic}
@media (max-width:640px){
  .dado{grid-template-columns:1fr;gap:2px}
  .dado .chave{font-size:11px;text-transform:uppercase;letter-spacing:.06em}
}