/* ==========================================================================
   Serviços em Foco — base compartilhada (tokens + componentes)
   Direção: "radar operacional" — marinho profundo + âmbar da marca, fundo areia,
   títulos e números em Space Grotesk, texto na fonte do aparelho (carrega na hora).
   Régua de medidas: Mercado Livre (CÉREBRO: referencia-css-mercado-livre).
   O que muda por tela fica em painel-desktop.css e painel-mobile.css (separados).
   ========================================================================== */

@font-face { font-family: "Space Grotesk"; src: url("../fonts/SpaceGrotesk-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("../fonts/SpaceGrotesk-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-titulo: "Space Grotesk", var(--fonte);

  --tinta: #14162b;          /* marinho da marca: menu, botão escuro, texto forte */
  --tinta-2: #23264a;
  --marca: #f0b638;          /* âmbar: identidade e destaque */
  --marca-forte: #d99a12;
  --marca-suave: #fdf3dc;
  --sobre-marca: #14162b;    /* texto em cima do âmbar: branco não passa de 1.8:1 */

  --fundo: #f5f4f0;          /* areia: menos frio que cinza puro */
  --cartao: #ffffff;
  --borda: #e6e3da;
  --divisor: #efece4;
  --texto-1: #1b1d2e;
  --texto-2: #64677a;
  --acao: #2858d6;           /* link */
  --acao-suave: #ecf1fd;

  --ok: #0d8a4e;    --ok-suave: #e2f5ea;
  --medio: #a65f00; --medio-suave: #fff0d4;
  --baixo: #64677a; --baixo-suave: #efeee9;
  --erro: #c8332f;  --erro-suave: #fdecea;
  --info: #2858d6;  --info-suave: #ecf1fd;

  --raio: 8px;
  --raio-pequeno: 6px;
  --sombra: 0 1px 2px rgba(20, 22, 43, .05), 0 1px 1px rgba(20, 22, 43, .03);
  --sombra-alta: 0 12px 32px rgba(20, 22, 43, .14);
  --foco: 0 0 0 3px rgba(240, 182, 56, .45);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 400 14px/1.43 var(--fonte); color: var(--texto-1); background: var(--fundo); -webkit-font-smoothing: antialiased; }
a { color: var(--acao); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 12px; }
h1, h2, h3 { margin: 0; }
p { margin: 0 0 8px; }
:focus-visible { outline: none; box-shadow: var(--foco); border-radius: var(--raio-pequeno); }

.icone { width: 18px; height: 18px; flex: 0 0 auto; vertical-align: -3px; }

/* Tipografia */
.titulo-pagina { font: 700 28px/1.15 var(--fonte-titulo); letter-spacing: -.02em; }
.titulo-secao { font: 700 16px/1.3 var(--fonte-titulo); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.secundario { color: var(--texto-2); font-size: 12px; }
.rotulo { display: block; color: var(--texto-2); font-size: 12px; font-weight: 600; margin: 12px 0 4px; }
.trilha { margin-bottom: 8px; font-size: 13px; }
.trilha a { display: inline-flex; align-items: center; gap: 4px; color: var(--texto-2); }
.vazio { color: var(--texto-2); }
.numero-grande { font: 700 32px/1.1 var(--fonte-titulo); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* Cartão */
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 20px; }
.cartao.sem-padding { padding: 0; overflow: hidden; }
.com-padding { padding: 20px 20px 0; }
.pilha { display: flex; flex-direction: column; gap: 16px; }
.cabecalho-pagina { display: flex; gap: 16px; }
.cabecalho-pagina .secundario { font-size: 13px; margin-top: 4px; }

/* Botões */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px; border-radius: var(--raio-pequeno);
  border: 1px solid transparent; font: 600 14px var(--fonte); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .15s, border-color .15s, transform .05s; }
.botao:hover { text-decoration: none; }
.botao:active { transform: translateY(1px); }
.botao-primario { background: var(--marca); color: var(--sobre-marca); }
.botao-primario:hover { background: var(--marca-forte); }
.botao-secundario { background: var(--cartao); color: var(--texto-1); border-color: var(--borda); }
.botao-secundario:hover { border-color: #cfcabc; background: #fbfaf7; }
.botao-escuro { background: var(--tinta); color: #fff; }
.botao-escuro:hover { background: var(--tinta-2); }
.botao-link { background: none; border: 0; padding: 0; color: var(--acao); font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.botao-link:hover { text-decoration: underline; }
.botao-link.perigo { color: var(--erro); }
.botao-icone { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--raio-pequeno); border: 0; background: transparent; color: inherit; cursor: pointer; }
.acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* Campos */
label { display: block; font-size: 12px; font-weight: 600; color: var(--texto-2); }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=url], input[type=number], select, textarea {
  display: block; width: 100%; margin-top: 6px; padding: 9px 12px; border: 1px solid var(--borda); border-radius: var(--raio-pequeno);
  background: #fff; color: var(--texto-1); font: 400 14px/1.4 var(--fonte); transition: border-color .15s, box-shadow .15s; }
input::placeholder, textarea::placeholder { color: #a3a5b2; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--marca-forte); box-shadow: var(--foco); }
label.caixa { display: flex; gap: 8px; align-items: center; color: var(--texto-1); font-size: 14px; font-weight: 400; }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--tinta); }
.form-pilha { display: flex; flex-direction: column; gap: 14px; }
.linha-copiar { display: flex; gap: 8px; align-items: stretch; }
.linha-copiar input { margin: 0; font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
details > summary { cursor: pointer; }

/* Selos: o ponto colorido diz a relevância antes de ler a palavra */
.selo { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1.4; }
.selo-alta::before, .selo-media::before, .selo-baixa::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.selo-alta { color: var(--ok); background: var(--ok-suave); }
.selo-media { color: var(--medio); background: var(--medio-suave); }
.selo-baixa, .selo-status-nunca-rodou { color: var(--baixo); background: var(--baixo-suave); }
.selo-etapa, .selo-status-pendente { color: var(--tinta); background: #eceaf6; }
.selo-status-concluida { color: var(--ok); background: var(--ok-suave); }
.selo-erro, .selo-status-erro { color: var(--erro); background: var(--erro-suave); }
.selo-status-rodando { color: var(--medio); background: var(--medio-suave); }
.selo-status-rodando::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulso 1.2s ease-in-out infinite; }
@keyframes pulso { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { .selo-status-rodando::before { animation: none; } }
.selos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }

/* Ícone em quadradinho (fonte da oportunidade, número do início) */
.ladrilho { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--raio-pequeno); background: var(--marca-suave); color: #8a5a00; flex: 0 0 auto; }
.ladrilho .icone { width: 18px; height: 18px; }
.ladrilho-pncp { background: #eceaf6; color: var(--tinta); }
.ladrilho-cno { background: #e8f2ee; color: #1d6b4b; }
.ladrilho-internet { background: var(--acao-suave); color: var(--acao); }

/* Avisos */
.aviso { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--raio); margin-bottom: 20px; font-size: 14px; border: 1px solid transparent; }
.aviso .icone { margin-top: 1px; }
.aviso ul { margin: 4px 0 0; padding-left: 20px; }
.aviso-ok { color: #0a6b3c; background: var(--ok-suave); border-color: #c6ead6; }
.aviso-erro { color: #9a211d; background: var(--erro-suave); border-color: #f6cfcb; }

/* Tabela */
.tabela { width: 100%; border-collapse: collapse; }
.tabela th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-2);
  padding: 12px 16px; background: #faf9f5; border-bottom: 1px solid var(--borda); }
.tabela td { padding: 14px 16px; border-bottom: 1px solid var(--divisor); vertical-align: middle; }
.tabela tbody tr { transition: background-color .12s; }
.tabela tbody tr:hover { background: #fcfbf8; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela.compacta th { background: none; padding: 8px 4px; }
.tabela.compacta td { padding: 10px 4px; }
.celula-titulo { display: flex; gap: 12px; align-items: center; }
.celula-titulo .texto { min-width: 0; }
.celula-titulo a { font-weight: 600; color: var(--texto-1); }
.celula-titulo a:hover { color: var(--acao); }
.celula-titulo .secundario { display: block; margin-top: 2px; }
tr.apagado td { opacity: .5; }
tr.linha-suspeita td { background: var(--erro-suave); }
pre { white-space: pre-wrap; word-break: break-word; font-size: 12px; margin: 6px 0 0; padding: 8px; background: #faf9f5; border-radius: var(--raio-pequeno); }

/* Ficha */
.dados { margin: 0; display: grid; grid-template-columns: 1fr; }
.dados dt { color: var(--texto-2); font-size: 12px; font-weight: 600; margin-top: 12px; }
.dados dd { margin: 2px 0 0; word-break: break-word; }
.lista-simples { list-style: none; margin: 0; padding: 0; }
.lista-simples li { padding: 12px 0; border-bottom: 1px solid var(--divisor); display: flex; gap: 12px; align-items: center; }
.lista-simples li:last-child { border-bottom: 0; }
.lista-simples .texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lista-simples a { font-weight: 600; color: var(--texto-1); }
.lista-simples a:hover { color: var(--acao); }
.historico { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 2px solid var(--divisor); }
.historico li { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 0 0 16px; }
.historico li::before { content: ""; position: absolute; left: -22px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--marca); border: 2px solid var(--cartao); }
.cuidados { margin: 16px 0 0; padding: 12px 12px 12px 32px; background: #faf9f5; border-radius: var(--raio-pequeno); color: var(--texto-2); font-size: 12px; }
.cuidados li + li { margin-top: 4px; }
.destaque-token { border-left: 4px solid var(--marca); margin-bottom: 20px; }
.paginacao { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 20px; }
.link-pequeno { display: inline-block; margin-top: 16px; font-size: 13px; }

/* Funil (barras em SVG: CSP não deixa style="" no HTML) */
.funil { display: flex; flex-direction: column; gap: 10px; }
.funil-linha { display: grid; grid-template-columns: 130px 1fr 40px; gap: 10px; align-items: center; font-size: 13px; }
.funil-linha svg { width: 100%; height: 10px; display: block; }
.funil-linha .trilho { fill: var(--divisor); }
.funil-linha .barra { fill: var(--marca); }
.funil-linha.final .barra { fill: var(--ok); }
.funil-linha strong { text-align: right; font-family: var(--fonte-titulo); font-variant-numeric: tabular-nums; }

/* Telas de entrada (login, recuperar, redefinir) */
.tela-entrada { min-height: 100vh; display: grid; background: var(--fundo); }
.entrada-marca { background: var(--tinta); color: #fff; position: relative; overflow: hidden; }
.entrada-marca::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 78% 38%, transparent 0 58px, rgba(240,182,56,.18) 59px 60px, transparent 61px 118px, rgba(240,182,56,.12) 119px 120px,
              transparent 121px 188px, rgba(240,182,56,.08) 189px 190px, transparent 191px 268px, rgba(240,182,56,.05) 269px 270px, transparent 271px); }
.entrada-marca .logo { display: flex; align-items: center; gap: 12px; font: 700 20px var(--fonte-titulo); }
.entrada-marca h2 { font: 700 30px/1.15 var(--fonte-titulo); letter-spacing: -.02em; margin-top: 32px; max-width: 420px; }
.entrada-marca h2 em { font-style: normal; color: var(--marca); }
.entrada-marca ul { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 14px; color: rgba(255,255,255,.78); }
.entrada-marca li { display: flex; gap: 12px; align-items: center; }
.entrada-marca li .icone { color: var(--marca); }
.caixa-entrada { width: 100%; max-width: 380px; }
.caixa-entrada h1 { font: 700 24px var(--fonte-titulo); letter-spacing: -.01em; }
.form-entrada { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.form-entrada input { font-size: 16px; min-height: 46px; }
.form-entrada .botao { width: 100%; min-height: 46px; margin-top: 4px; }
.cabecalho-ficha { display: flex; gap: 14px; align-items: flex-start; }
.cabecalho-ficha .ladrilho { width: 44px; height: 44px; margin-top: 2px; }
.cabecalho-ficha .ladrilho .icone { width: 22px; height: 22px; }
.titulo-secao .ladrilho { width: 32px; height: 32px; }
.contador { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--erro); color: #fff; font: 700 11px/20px var(--fonte); text-align: center; }
.barra-inferior .contador { position: absolute; margin: 0 0 0 18px; top: 6px; }
.barra-inferior > a { position: relative; }

/* Configurações em lista vertical: cada item fechado mostra o nome e a situação; abre ao clicar */
.sanfona { display: flex; flex-direction: column; gap: 10px; max-width: 860px; }
.sanfona-item { padding: 0; }
.sanfona-item > summary { display: flex; align-items: center; gap: 14px; padding: 16px 20px; list-style: none; cursor: pointer; }
.sanfona-item > summary::-webkit-details-marker { display: none; }
.sanfona-item > summary .texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sanfona-item > summary .seta { font: 700 22px/1 var(--fonte-titulo); color: var(--texto-2); transition: transform .15s; }
.sanfona-item[open] > summary .seta { transform: rotate(90deg); }
.sanfona-item[open] > summary { border-bottom: 1px solid var(--divisor); }
.sanfona-corpo { padding: 20px; }
.sanfona-corpo .avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--marca); color: var(--sobre-marca); font: 700 12px var(--fonte-titulo); flex: 0 0 auto; }

/* Abas no topo (Configurações) e botões de escolha lado a lado (provedor do WhatsApp) */
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); margin: 0 0 20px; overflow-x: auto; }
.abas a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; color: var(--texto-2); font-weight: 600; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.abas a:hover { color: var(--texto-1); text-decoration: none; }
.abas a.ativo { color: var(--tinta); border-bottom-color: var(--marca-forte); }
.largura-form { max-width: 860px; }
.provedor { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.provedor > div { display: flex; flex-direction: column; gap: 2px; }
.segmentado { display: inline-flex; padding: 4px; gap: 4px; background: var(--fundo); border: 1px solid var(--borda); border-radius: var(--raio); }
.segmentado a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--raio-pequeno); color: var(--texto-2); font-weight: 600; }
.segmentado a:hover { text-decoration: none; color: var(--texto-1); }
.segmentado a.ativo { background: var(--tinta); color: #fff; }

/* Conexão WhatsApp */
.area-qr { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 280px; margin: 0 0 12px; padding: 20px;
  border: 1px dashed var(--borda); border-radius: var(--raio); text-align: center; }
.area-qr img { width: 220px; height: 220px; padding: 8px; background: #fff; border: 2px solid var(--ok); border-radius: var(--raio); }
.area-qr.com-qr .ladrilho, .area-qr.conectado .ladrilho { display: none; }
.area-qr.conectado { border-style: solid; border-color: var(--ok); background: var(--ok-suave); }
.botao.largo { width: 100%; }
.conexao form + .acoes, .conexao .acoes { margin-top: 10px; }
.caixa-webhook { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--fundo); }
.caixa-webhook .rotulo { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.selo-estado { font-size: 13px; padding: 5px 12px; }
/* Chave e token: mascarados sem ser campo "password" (o navegador colaria o login salvo no campo anterior) */
.campo-segredo { -webkit-text-security: disc; font-family: ui-monospace, Menlo, Consolas, monospace; }

/* Habilidades: o texto em Markdown desenhado */
.md { line-height: 1.6; }
.md h3, .md h4, .md h5 { margin: 18px 0 6px; font-family: var(--fonte-titulo); }
.md h3 { font-size: 18px; } .md h4 { font-size: 16px; } .md h5 { font-size: 14px; }
.md ul, .md ol { margin: 0 0 10px; padding-left: 22px; }
.md li { margin: 2px 0; }
.md code { background: var(--fundo); padding: 1px 5px; border-radius: 4px; }
.md .tabela-rolagem { overflow-x: auto; margin: 0 0 12px; }
.md table { min-width: 100%; }
.sanfona-item.inativa > summary { opacity: .6; }
.texto-longo { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.5; }
.barra-inferior .folha .contador { position: static; margin: 0 0 0 auto; }