:root {
  --azul: #124E5D;
  --laranja: #FA8057;
  --verde: #1D6577;
  --fundo: #F8F6EF;
  --cartao: #FFFFFF;
  --texto: #1F2933;
  --suave: #52606D;
  --linha: #E4E0D8;
  --bom: #1A7F4B;
  --ruim: #B42318;
  --atencao: #B9770E;
  --raio: 14px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--verde); }
button, select, input { font: inherit; }

/* topo e menu */
.topo {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  background: var(--azul); color: #fff;
}
.marca { font-weight: 700; letter-spacing: .2px; flex: 1; }
.marca::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--laranja); margin-right: 8px; vertical-align: middle; }
.seletor select { background: #12465C; color: #fff; border: 0; border-radius: 8px; padding: 6px 8px; }
.empresa { opacity: .85; font-size: 14px; }
.sair { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35);
  border-radius: 8px; padding: 5px 10px; cursor: pointer; }
.menu {
  display: flex; gap: 4px; overflow-x: auto; padding: 0 12px; background: var(--azul);
  scrollbar-width: none; position: sticky; top: 0; z-index: 5;
}
.menu a {
  color: rgba(255,255,255,.75); text-decoration: none; padding: 10px 12px; white-space: nowrap;
  border-bottom: 3px solid transparent; font-weight: 500;
}
.menu a.ativo { color: #fff; border-bottom-color: var(--laranja); }

main { max-width: 1200px; margin: 0 auto; padding: 16px; }
.cabecalho { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 14px; }
h1 { font-size: 22px; margin: 0; color: var(--azul); }
h2 { font-size: 14px; margin: 0 0 8px; color: var(--suave); font-weight: 600; }
.sub, .nota { color: var(--suave); font-size: 13px; margin: 4px 0 14px; }
.vazio { color: var(--suave); padding: 18px; text-align: center; }

/* abas de período */
.abas { display: inline-flex; background: #E6ECF0; border-radius: 10px; padding: 3px; }
.abas button { border: 0; background: transparent; padding: 6px 12px; border-radius: 8px; cursor: pointer; color: var(--suave); }
.abas button.ativo { background: #fff; color: var(--azul); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.abas-form select { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--linha); background: #fff; }

/* cartões */
.cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 8px; }
.cartao { background: var(--cartao); border-radius: var(--raio); padding: 14px 16px; border: 1px solid var(--linha); }
.cartao p { margin: 4px 0; }
.cartao.destaque { border-top: 4px solid var(--laranja); }
.valor { font-size: 28px; font-weight: 700; color: var(--azul); margin: 2px 0; }
.valor.vazio { color: var(--linha); padding: 0; text-align: left; }
.rodape { color: var(--suave); font-size: 12px; }
.anterior { color: var(--suave); font-size: 12px; margin-left: 4px; }
.var { font-weight: 600; font-size: 13px; }
.var.bom { color: var(--bom); } .var.ruim { color: var(--ruim); } .var.neutro { color: var(--suave); font-weight: 400; }

.painel { background: var(--cartao); border-radius: var(--raio); padding: 14px 16px; border: 1px solid var(--linha); margin: 14px 0; }
.grafico { position: relative; height: 280px; }
.grafico.mini { height: 110px; margin-top: 6px; }
.duas-colunas { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
@media (min-width: 860px) { .duas-colunas { grid-template-columns: 1fr 1fr; } }

/* filtros e formulários */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.filtros input, .filtros select { padding: 8px 10px; border: 1px solid var(--linha); border-radius: 8px; background: #fff; min-width: 0; }
.filtros input[type=search], .filtros input[name=termo] { flex: 1 1 220px; }
.filtros button, .caixa-login button {
  background: var(--azul); color: #fff; border: 0; border-radius: 8px; padding: 8px 16px; cursor: pointer; font-weight: 600;
}

/* tabelas */
.tabela-rolagem { overflow-x: auto; background: var(--cartao); border-radius: var(--raio); border: 1px solid var(--linha); }
.painel .tabela-rolagem { border: 0; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; font-size: 12px; color: var(--suave); font-weight: 600; padding: 10px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.tabela td { padding: 9px 10px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela .n { text-align: right; white-space: nowrap; }
.tabela .forte { font-weight: 700; color: var(--azul); }
.tabela .pagina { font-size: 13px; word-break: break-all; min-width: 160px; }
.tabela .detalhe { font-size: 12px; color: var(--suave); max-width: 420px; }
.tabela.compacta td { padding: 7px 8px; }
.link-termo { background: none; border: 0; padding: 0; color: var(--azul); cursor: pointer; text-align: left; font-weight: 500; }
.link-termo:hover { color: var(--verde); text-decoration: underline; }
.selo { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 99px; background: #E8F4F4; color: #23716F; margin-left: 4px; white-space: nowrap; }
.selo.foco { background: #FFF1DC; color: #9A5A00; }
.selo.alerta, .selo.atencao { background: #FDF0DD; color: var(--atencao); }
.selo.ruim { background: #FBE6E2; color: var(--ruim); }
.selo.ok { background: #E3F4EC; color: var(--bom); }
.selo.neutro { background: #EEF1F4; color: var(--suave); }

/* em foco */
.lista-foco { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.cartao.foco.alerta { border-color: var(--ruim); }
.cartao.foco.atingida { border-top: 4px solid var(--bom); }
.foco-topo { display: flex; justify-content: space-between; gap: 8px; }
.foco-topo h2 { color: var(--azul); font-size: 16px; }
.remover { background: none; border: 0; font-size: 20px; color: var(--suave); cursor: pointer; line-height: 1; }
.foco-numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 0; }
.foco-numeros .rotulo { display: block; font-size: 11px; color: var(--suave); text-transform: uppercase; letter-spacing: .4px; }
.foco-numeros .valor { font-size: 24px; }
.foco-numeros .meta { color: var(--laranja); }
.barra { height: 8px; background: #E6ECF0; border-radius: 99px; overflow: hidden; margin: 6px 0 8px; }
.barra span { display: block; height: 100%; background: linear-gradient(90deg, var(--verde), var(--laranja)); }

/* saúde */
.cartao.etapa { border-left: 5px solid var(--linha); }
.cartao.etapa.ok { border-left-color: var(--bom); }
.cartao.etapa.ruim { border-left-color: var(--ruim); }
.cartao.etapa.atencao { border-left-color: var(--atencao); }
.estado { font-weight: 700; font-size: 18px; color: var(--azul); }
.erro { color: var(--ruim); font-size: 13px; }
.lista-simples { margin: 0; padding-left: 18px; }

/* login */
.tela-login { min-height: 100vh; display: grid; place-items: center; background: var(--azul); padding: 16px; }
.caixa-login { background: #fff; border-radius: var(--raio); padding: 28px 24px; width: 100%; max-width: 360px; display: grid; gap: 14px; }
.caixa-login h1 { text-align: center; }
.caixa-login label { display: grid; gap: 4px; font-size: 13px; color: var(--suave); }
.caixa-login input { padding: 10px; border: 1px solid var(--linha); border-radius: 8px; font-size: 15px; }
.caixa-login button { padding: 11px; background: var(--laranja); color: var(--azul); }

@media (max-width: 600px) {
  main { padding: 12px 16px; }
  .valor { font-size: 24px; }
  .cartoes { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cartao { padding: 12px; }
  .grafico { height: 230px; }
  h1 { font-size: 19px; }
  .marca { font-size: 14px; }
  .empresa { display: none; }
}

/* Configurações */
.config .campos { display: grid; gap: 10px; max-width: 560px; }
.config label { display: grid; gap: 4px; font-size: 13px; color: var(--suave); }
.config input { padding: 9px 10px; border: 1px solid var(--linha); border-radius: 8px; background: #fff; color: var(--texto); }
.config button, .botao {
  justify-self: start; background: var(--azul); color: #fff; border: 0; border-radius: 8px; padding: 9px 16px;
  cursor: pointer; font-weight: 600; text-decoration: none; display: inline-block; margin-top: 4px; }
.config button.secundario { background: #fff; color: var(--azul); border: 1px solid var(--linha); }
.config form + form { margin-top: 8px; }
.codigo code { display: inline-block; background: var(--fundo); border: 1px solid var(--linha); border-radius: 8px;
  padding: 6px 10px; word-break: break-all; font-size: 13px; }
.aviso { border-radius: var(--raio); padding: 10px 14px; margin: 10px 0; border: 1px solid var(--linha); background: #fff; }
.aviso.ok { border-left: 4px solid var(--bom); }
.aviso.ruim { border-left: 4px solid var(--ruim); }
.plataforma { border-style: dashed; }


/* Visão geral (painel da segunda) */
.resumo { display: grid; gap: 8px; background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 16px 18px; margin: 4px 0 16px; border-left: 4px solid var(--laranja); }
.frase { margin: 0; display: flex; gap: 10px; align-items: baseline; font-size: 15px; line-height: 1.45; }
.frase .bola { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--suave); transform: translateY(-1px); }
.frase.bom .bola { background: var(--bom); } .frase.ruim .bola { background: var(--ruim); }
.frase.acao { font-weight: 600; color: var(--azul); } .frase.acao .bola { background: var(--laranja); }
.placar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.placar .falta { color: var(--suave); }
.painel-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.painel-cab h2 { margin: 0; }
.legenda { font-size: 12px; color: var(--suave); display: flex; gap: 6px 14px; align-items: center; flex-wrap: wrap; }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.l-vis { background: var(--azul); } .l-wa { background: var(--laranja); } .l-post { background: #CFC9BE; width: 3px !important; }
.grafico.alto { height: 280px; }
.duas-colunas { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; }
.duas-colunas .painel { margin: 0; }
.pag { font-size: 12px; color: var(--suave); text-decoration: none; }
.pag:hover { text-decoration: underline; }
.videos { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.videos li { display: flex; gap: 12px; align-items: center; }
.videos img { width: 96px; height: 54px; object-fit: cover; border-radius: 6px; flex: none; background: var(--fundo); }
.videos p { margin: 0; font-size: 14px; line-height: 1.35; }
.videos a { color: var(--texto); text-decoration: none; font-weight: 600; }
.videos a:hover { color: var(--verde); }
.videos small { display: block; color: var(--suave); font-size: 12px; margin-top: 2px; }
.sub-h { font-size: 13px; color: var(--suave); margin: 16px 0 8px; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.chip { font-size: 12px; background: var(--fundo); border: 1px solid var(--linha); border-radius: 999px; padding: 3px 10px; }
@media (max-width: 900px) { .placar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .duas-colunas { grid-template-columns: minmax(0, 1fr); } }

/* Pauta */
.modo { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.modo h2 { margin: 0 0 4px; } .modo p { margin: 0; }
.botao-sec, .sug-acoes button { border: 1px solid var(--linha); background: #fff; color: var(--azul); border-radius: 8px;
  padding: 8px 14px; font-weight: 600; cursor: pointer; }
.sug-acoes button:not(.botao-sec) { background: var(--azul); color: #fff; border-color: var(--azul); }
.pauta { display: grid; gap: 12px; margin-bottom: 14px; }
.sugestao { display: grid; gap: 10px; }
.sugestao.descartada { opacity: .6; }
.sugestao.aprovada, .sugestao.publicada { border-left: 4px solid var(--bom); }
.sug-topo { display: flex; gap: 14px; align-items: flex-start; }
.sug-topo .num { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--laranja); color: #2A1209;
  font-weight: 750; display: grid; place-items: center; }
.sug-tit h2 { font-size: 18px; color: var(--texto); margin: 2px 0 0; font-weight: 700; }
.tipo { margin: 0; font-size: 12px; color: var(--suave); }
.motivo { margin: 0; background: var(--fundo); border-radius: 8px; padding: 10px 12px; font-size: 14px; }
.ficha { display: grid; grid-template-columns: 210px 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.ficha dt { color: var(--suave); }
.ficha dd { margin: 0; }
.ficha ul { margin: 0; padding-left: 18px; }
.ficha small { color: var(--suave); }
.sug-acoes { display: flex; gap: 8px; }
.alertas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; }
.alertas small { color: var(--suave); margin-left: 6px; }
@media (max-width: 700px) { .ficha { grid-template-columns: 1fr; } .ficha dt { margin-top: 6px; } }


/* Pino, o mascote: no topo e nas telas sem dado */
.marca img { width: 26px; height: 26px; border-radius: 7px; vertical-align: middle; margin-right: 8px; }
.vazio { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.vazio::before { content: ""; width: 56px; height: 64px; background: url("pino.svg") center / contain no-repeat; opacity: .9; }
.valor.vazio::before, .placar .vazio::before { display: none; }
.marca::before { display: none; }


/* Sugestões de palavras de negócio (Em foco) */
.sugestoes-kw { border-left: 4px solid var(--laranja); }
.sug-lista { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 0; }
.sug-lista li { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--linha); }
.sug-info strong { font-size: 15px; }
.sug-num { margin-left: 8px; font-size: 12px; color: var(--suave); }
.sug-info p { margin: 2px 0 0; font-size: 13px; color: var(--suave); }
@media (max-width: 700px) { .sug-lista li { flex-direction: column; align-items: flex-start; } }

.config textarea { padding: 9px 10px; border: 1px solid var(--linha); border-radius: 8px; background: #fff; color: var(--texto); font: inherit; resize: vertical; }
.config label.check { display: flex; gap: 8px; align-items: center; color: var(--texto); font-size: 14px; }
.config label.check input { width: auto; }

/* Pauta do Instagram */
.insta-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cartao.insta { display: flex; flex-direction: column; gap: 8px; }
.cartao.insta h3 { margin: 0; font-size: 17px; }
.cartao.insta .tipo { font-size: 13px; color: var(--suave); margin: 0; }
.cartao.insta.descartada { opacity: .6; }
.cartao.insta.publicada { border-top: 4px solid var(--bom); }
.cartao.insta details summary { cursor: pointer; font-size: 14px; color: var(--azul); }
.cartao.insta .legenda { width: 100%; margin: 8px 0; font: inherit; font-size: 13px; border: 1px solid var(--linha); border-radius: 8px; padding: 8px; resize: vertical; }
.cartao.insta .sug-acoes { margin-top: auto; flex-wrap: wrap; }
@media (max-width: 900px) { .insta-lista { grid-template-columns: 1fr; } }
.cartao.insta .motivo { white-space: pre-line; }

/* SEO para IA */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--linha); border-radius: 10px; padding: 10px 12px; }
.checklist li p { margin: 4px 0 0; font-size: 14px; }
.checklist li small { color: var(--suave); }
.checklist .marca { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; }
.checklist li.ok .marca { background: #E3F4EC; color: var(--bom); }
.checklist li.ruim .marca { background: #FBE6E2; color: var(--ruim); }
.checklist li.neutro .marca { background: #EEF1F4; color: var(--suave); }
.checklist .como { color: var(--azul); }
.robos h3 { font-size: 14px; margin: 10px 0 6px; }
.robos ul { margin: 0; padding-left: 18px; font-size: 14px; }
details > summary { cursor: pointer; margin-top: 12px; color: var(--azul); }
tr.fraca td:last-child { color: var(--atencao); font-weight: 600; }
.valor small { font-size: 50%; color: var(--suave); font-weight: 500; }