:root {
  --azul: #0D47A1;
  --azul-escuro: #062B63;
  --amarelo: #FFC107;
  --cinza-claro: #F0F2F5;
  --grafite: #212529;
  --branco: #FFFFFF;
  --erro: #C62828;
}

* { box-sizing: border-box; }

/* Sempre por cima de qualquer "display" fixo declarado num elemento — sem
   isso, um elemento com `hidden` no HTML mas com `display: flex/grid` numa
   regra específica (ex: #carregando-geracao, .ev-painel-aba) fica visível do
   mesmo jeito, porque a regra específica "ganha" do estilo padrão do
   navegador pro atributo hidden. Descoberto em 18/09/2026: a caixa de
   "Gerando..." ficava aparecendo na tela mesmo antes de clicar em gerar.
   Alternar visibilidade sempre via `elemento.hidden = true/false`, nunca
   via `style.display` direto — é essa regra que faz isso funcionar. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: 'Poppins', -apple-system, sans-serif;
  background: var(--cinza-claro);
  color: var(--grafite);
}

h1, h2, h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  color: var(--azul-escuro);
}

a { color: var(--azul); }

/* ---------- Login ---------- */

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-card {
  background: var(--branco);
  border-radius: 8px;
  padding: 40px 32px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 4px 24px rgba(6, 43, 99, 0.12);
}

.login-card h1 {
  font-size: 22px;
  margin: 0 0 4px;
  text-align: center;
}

.login-card .subtitulo {
  text-align: center;
  color: #667;
  font-size: 13px;
  margin-bottom: 28px;
}

.campo {
  margin-bottom: 16px;
}

.campo label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

.campo input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccd2db;
  border-radius: 6px;
  font-size: 15px;
  font-family: inherit;
}

.campo input:focus {
  outline: none;
  border-color: var(--azul);
}

.btn-primario {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 6px;
  background: var(--azul);
  color: var(--branco);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  margin-top: 8px;
}

.btn-primario:hover { background: var(--azul-escuro); }
.btn-primario:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-perigo {
  width: auto;
  padding: 9px 14px;
  border: 1.5px solid #f0c4c4;
  border-radius: 6px;
  background: var(--branco);
  color: var(--erro);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.btn-perigo:hover { border-color: var(--erro); background: #FDECEA; }
.btn-perigo:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-excluir-item {
  border: none;
  background: transparent;
  color: #aab;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  line-height: 1;
}

.btn-excluir-item:hover { background: #FDECEA; color: var(--erro); }

.erro-msg {
  background: #FDECEA;
  color: var(--erro);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 16px;
  display: none;
}

.erro-msg.visivel { display: block; }

/* ---------- Menu lateral (visual mais parecido com dashboard SaaS) ---------- */

.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 230px;
  flex-shrink: 0;
  background: var(--azul-escuro);
  color: var(--branco);
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
}

.sidebar-logo {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 17px;
  color: var(--branco);
  margin: 0 0 32px;
  padding: 0 10px;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-logo img {
  height: 30px;
  width: 30px;
  object-fit: contain;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
}

.sidebar-nav a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--branco);
}

.sidebar-nav a.ativo {
  background: var(--amarelo);
  color: var(--azul-escuro);
}

.sidebar-sair {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--branco);
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  margin-top: 16px;
  font-family: inherit;
}

.sidebar-sair:hover { background: rgba(255, 255, 255, 0.1); }

.app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.app-header {
  background: var(--branco);
  padding: 18px 32px;
  border-bottom: 1px solid #e6e9ee;
}

.app-header h1 {
  font-size: 20px;
  margin: 0;
}

@media (max-width: 860px) {
  .app-shell { flex-direction: column; }
  .sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; row-gap: 10px; padding: 12px 16px; }
  .sidebar-logo { margin: 0; }
  .sidebar-sair { margin: 0 0 0 auto; white-space: nowrap; }
  /* Menu numa linha própria e quebrando se não couber — com flex:none ele
     não encolhia e deixava a página ~2x mais larga que o celular. */
  .sidebar-nav { order: 3; flex: 1 1 100%; min-width: 0; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .sidebar-nav a { padding: 8px 12px; font-size: 13px; }
  /* margin:auto dentro de flex em coluna faz a caixa medir pelo conteúdo
     mais largo em vez da tela — no celular isso vazava a página pro lado. */
  .app-main > .conteudo { width: 100%; }
}

/* ---------- Dashboard ---------- */

.topo {
  background: var(--azul);
  color: var(--branco);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topo h1 {
  color: var(--branco);
  font-size: 18px;
  margin: 0;
}

.topo button {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.4);
  color: var(--branco);
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}

.conteudo {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

/* minmax(0, …): sem isso a coluna não fica mais estreita que o gráfico
   dentro dela, e no celular pequeno a página vazava pro lado. */
.grade-2col {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.grade-2col .painel-secao { margin-bottom: 0; }

.painel-secao canvas { max-width: 100%; }

@media (max-width: 760px) {
  .grade-2col { grid-template-columns: minmax(0, 1fr); }
}

.card {
  background: var(--branco);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 2px 10px rgba(6, 43, 99, 0.07);
}

.card .valor {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  color: var(--azul);
  line-height: 1;
}

.card .rotulo {
  font-size: 13px;
  color: #667;
  margin-top: 4px;
}

.painel-secao {
  background: var(--branco);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(6, 43, 99, 0.07);
}

.painel-secao h2 {
  font-size: 15px;
  margin: 0 0 14px;
}

#proximos-passos-secao,
#secao-site,
#secao-instagram,
#secao-facebook {
  scroll-margin-top: 16px;
}

#proximos-passos-secao {
  margin-bottom: 24px;
}

.resumo-30d {
  margin-bottom: 24px;
}

.resumo-30d h2 {
  font-size: 15px;
  margin: 0 0 10px;
}

.resumo-redes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.resumo-card {
  background: var(--branco);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 2px 10px rgba(6, 43, 99, 0.07);
  border-top: 4px solid var(--azul);
  display: block;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s, transform 0.15s;
}

.resumo-card:hover {
  box-shadow: 0 4px 14px rgba(6, 43, 99, 0.16);
  transform: translateY(-1px);
}

.resumo-card.instagram { border-top-color: var(--amarelo); }
.resumo-card.facebook { border-top-color: var(--azul); }
.resumo-card.site { border-top-color: var(--azul-escuro); }

.resumo-card .rede-nome {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #667;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.resumo-card .metrica-principal {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 34px;
  color: var(--azul-escuro);
  line-height: 1;
}

.resumo-card .metrica-rotulo {
  font-size: 12px;
  color: #667;
  margin: 2px 0 12px;
}

.resumo-card .delta {
  font-size: 13px;
  font-weight: 700;
  min-height: 16px;
}

.resumo-card .delta.up { color: #2E7D32; }
.resumo-card .delta.down { color: var(--erro); }

.resumo-card .metrica-secundaria {
  font-size: 12.5px;
  color: #445;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #eee;
  min-height: 16px;
}

@media (max-width: 720px) {
  .resumo-redes { grid-template-columns: 1fr; }
}

#proximos-passos-secao h2 {
  font-size: 15px;
  margin: 0 0 10px;
}

#proximos-passos {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.card-acao {
  background: var(--branco);
  border-left: 4px solid var(--amarelo);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(6, 43, 99, 0.07);
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}

.card-acao.urgente {
  border-left-color: var(--erro);
}

.card-acao p {
  margin: 0;
  font-size: 14px;
}

.card-acao .btn-primario {
  display: inline-block;
  width: auto;
  align-self: flex-start;
  text-decoration: none;
  font-size: 13px;
  padding: 8px 14px;
  margin-top: 0;
}

.lista-item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}

.lista-item:last-child { border-bottom: none; }

.fila-esquerda {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  /* Sem isso, numa tela estreita a coluna de tags/botões da direita não tem
     pra onde encolher e empurra a linha inteira pra fora da tela em vez de
     descer pra segunda linha. */
  flex: 1 1 240px;
  min-width: 0;
}

.fila-miniaturas {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.fila-miniaturas img {
  width: 56px;
  height: 70px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(6, 43, 99, 0.15);
}

.fila-textos { min-width: 0; }

.fila-tema {
  font-weight: 700;
  line-height: 1.35;
  /* Sem isso, um tema longo numa coluna estreita (celular) quebra em muitas
     linhas e deixa o card bem mais alto que as miniaturas ao lado, abrindo um
     vão vazio entre a imagem (curta) e a linha de tags/botões (lá embaixo). */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Legenda pode ter vários parágrafos — sem truncar, cada item da fila vira
   uma parede de texto do tamanho de um post inteiro. 2 linhas bastam pra
   reconhecer do que se trata; o texto completo dá pra ver no editor. */
.fila-resumo {
  font-size: 12px;
  color: #667;
  line-height: 1.4;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fila-direita {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .lista-item { flex-direction: column; align-items: stretch; }
  /* O "240px" do flex-basis é largura mínima na linha (desktop) — virando
     coluna aqui, o mesmo valor passaria a valer como ALTURA mínima e abriria
     um vão vazio enorme embaixo das miniaturas. */
  .fila-esquerda { flex: none; }
  .fila-direita { width: 100%; padding-top: 10px; border-top: 1px dashed #E1E5EB; }
}

.tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 10px;
  margin-right: 8px;
}

.tag.post { background: #E3F2FD; color: var(--azul); }
.tag.story { background: #FFF8E1; color: #8a6800; }
.tag.chat { background: #E3F2FD; color: var(--azul); }
.tag.trabalhe-conosco { background: #EDE7F6; color: #4527A0; }
.tag.cupom-sorteio { background: #FFF8E1; color: #8a6800; }

/* Aprovar/agendar (Fase 4) */
.fila-agendar {
  display: flex;
  align-items: center;
  gap: 6px;
}

.input-agendar {
  border: 1px solid #ccd3dd;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
  font-family: inherit;
  color: var(--azul-escuro);
}

.btn-aprovar {
  border: none;
  border-radius: 6px;
  background: #E8F5E9;
  color: #1b6b2e;
  font-weight: 700;
  font-size: 12px;
  padding: 7px 12px;
  cursor: pointer;
  white-space: nowrap;
}

.btn-aprovar:hover { background: #d3ecd6; }
.btn-aprovar:disabled { opacity: 0.6; cursor: not-allowed; }

.fila-data-agendada {
  font-size: 12px;
  color: #667;
  font-weight: 600;
  white-space: nowrap;
}

.fila-impulsionar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.fila-impulsionar .btn-secundario,
.fila-impulsionar .btn-perigo {
  font-size: 12px;
  padding: 7px 12px;
  white-space: nowrap;
}

.impulsionar-form {
  display: flex;
  align-items: center;
  gap: 6px;
}

.impulsionar-form .input-agendar {
  width: 130px;
}

.link-publicado {
  font-size: 12px;
  font-weight: 700;
  color: var(--azul);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 6px;
  background: #E3F2FD;
  white-space: nowrap;
}

.link-publicado:hover { background: #cfe8fd; }

.dica {
  font-size: 12px;
  color: #778;
  margin-top: 6px;
}

#preview-referencia {
  margin-top: 10px;
  max-width: 120px;
  border-radius: 6px;
  display: block;
}

#carregando-geracao {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 13px;
  color: #667;
}

.spinner {
  width: 18px;
  height: 18px;
  border: 3px solid #ccd2db;
  border-top-color: var(--azul);
  border-radius: 50%;
  animation: girando 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes girando {
  to { transform: rotate(360deg); }
}

.carregando, .vazio {
  color: #889;
  font-size: 13px;
  text-align: center;
  padding: 20px 0;
}

/* Formato, cor e estilo cabem numa linha só em tela larga e empilham no
   celular — são escolhas rápidas, não merecem um campo inteiro cada. */
.campos-lado-a-lado {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.campo select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccd2db;
  border-radius: 6px;
  font-size: 15px;
  font-family: inherit;
  background: var(--branco);
  color: var(--grafite);
}

.campo select:focus {
  outline: none;
  border-color: var(--azul);
}

/* Editor de rascunho — campos de um lado, prévia ao vivo do outro. Empilha no
   celular porque não cabe lado a lado numa tela pequena. */
.editor-grade {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
}

@media (max-width: 760px) {
  .editor-grade { grid-template-columns: 1fr; }
}

.editor-campos textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccd2db;
  border-radius: 6px;
  font-size: 15px;
  font-family: inherit;
  resize: vertical;
}

.editor-prevista {
  background: #ddd;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  position: relative;
}

.editor-prevista iframe {
  position: absolute;
  top: 0; left: 0;
  border: none;
  transform-origin: top left;
  pointer-events: none;
}

.lista-item {
  cursor: pointer;
}

/* Chips de formato e cor — troca os <select> por controles visuais, no
   estilo Canva/Figma: você vê o resultado antes de escolher, não lê texto. */
.chips-formato, .chips-cor {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip-formato {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1.5px solid #ccd2db;
  border-radius: 999px;
  background: var(--branco);
  font-size: 13px;
  font-weight: 600;
  color: var(--grafite);
  cursor: pointer;
  font-family: inherit;
}

.chip-formato.ativo {
  border-color: var(--azul);
  background: #E3F2FD;
  color: var(--azul);
}

.ico-formato {
  display: inline-block;
  border: 1.5px solid currentColor;
  border-radius: 2px;
}

.ico-feed { width: 12px; height: 15px; }
.ico-quadrado { width: 13px; height: 13px; }
.ico-story { width: 9px; height: 16px; }

.chip-cor {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--cor);
  cursor: pointer;
  padding: 0;
  position: relative;
}

.chip-cor-branco {
  border-color: #ccd2db;
}

.chip-cor.ativo {
  box-shadow: 0 0 0 2px var(--branco), 0 0 0 4px var(--azul);
}

.aviso-sutil {
  color: #8a6800 !important;
  background: #FFF8E1;
  padding: 6px 10px;
  border-radius: 6px;
  margin-top: 6px !important;
}

/* Botão de sugestão por IA e o cartão de opções que ele abre. */
.btn-sugerir {
  border: 1.5px solid var(--azul);
  background: var(--branco);
  color: var(--azul);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-sugerir:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sugestoes {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sugestao-opcao {
  text-align: left;
  background: #F0F2F5;
  border: 1px solid #dfe3e8;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--grafite);
  cursor: pointer;
  font-family: inherit;
}

.sugestao-opcao:hover {
  border-color: var(--azul);
  background: #E3F2FD;
}

.sugestao-opcao b {
  color: var(--azul);
}

.link-editor-visual {
  font-size: 12px;
  font-weight: 700;
  color: var(--azul);
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 10px;
  border: 1px solid var(--azul);
  border-radius: 999px;
}

.link-editor-visual:hover { background: #E3F2FD; }

/* Bloco "gerar 2 ideias com IA" no topo da tela de criação */
.bloco-conceitos {
  background: linear-gradient(135deg, #F0F6FF 0%, #FFFDF0 100%);
  border: 1.5px solid #cfe0f7;
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 22px;
}

.bloco-rotulo {
  font-weight: 700;
  font-size: 14px;
}

.bloco-conceitos > .bloco-rotulo + .dica {
  margin: 2px 0 10px;
}

/* Label de um campo com um botão de ação colado do lado (ex: "Tema
   sorteado", "Sugerir com IA") — quebra em telas estreitas em vez de
   espremer os dois. */
.linha-label-acao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

/* Pauta é o jeito opcional/secundário de começar um post — visual mais
   discreto que o Briefing (que é o caminho principal), pra ficar claro que
   são duas alternativas, não dois blocos soltos parecidos. */
.pauta-bloco--secundario {
  background: var(--branco);
  border: 1px solid #E1E5EB;
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 16px;
}

.pauta-bloco--secundario .bloco-rotulo {
  font-size: 13px;
  color: #556;
}

.pauta-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--branco);
  border: 1px solid #E1E5EB;
  border-radius: 8px;
  padding: 10px 12px;
}

.pauta-item-usar {
  width: auto;
  margin-top: 0;
  padding: 8px 16px;
  white-space: nowrap;
}

/* Linha pequena acima de Pauta+Briefing, só aparece quando a Pauta está
   visível — deixa explícito que dali pra baixo são duas formas diferentes
   de começar o mesmo post. */
.bloco-intro-escolha {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--azul);
  margin: 0 0 10px;
}

.divisor-ou {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  color: #99a;
  font-size: 12px;
  font-weight: 700;
}

.divisor-ou::before,
.divisor-ou::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #E1E5EB;
}

.btn-secundario {
  width: auto;
  margin-top: 0;
  padding: 12px;
  border: none;
  border-radius: 6px;
  background: #889;
  color: var(--branco);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}

.btn-secundario:hover { background: #778; }

#briefing-loja-bloco,
#carrossel-opcoes {
  margin-top: 8px;
}

#briefing-status {
  margin-top: 8px;
}

.conceitos-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 14px;
}

.conceito-card {
  background: var(--branco);
  border: 1.5px solid #dfe3e8;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.conceito-card .conceito-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #ddd;
}

.conceito-card .conceito-preview iframe {
  position: absolute;
  top: 0; left: 0;
  border: none;
  transform-origin: top left;
  pointer-events: none;
}

.conceito-card .conceito-corpo {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.conceito-card .conceito-angulo {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--azul);
}

.conceito-card .conceito-legenda {
  font-size: 12px;
  color: #556;
  line-height: 1.4;
  max-height: 54px;
  overflow: hidden;
}

.conceito-card .btn-primario {
  margin-top: 4px;
}

/* O briefing gera 1 post só (não 2 como o gerador de conceitos antigo) — sem
   isso, o card único herda 100% da largura do bloco e o preview de 4:5 fica
   gigantesco na tela. */
#briefing-resultado {
  margin-top: 14px;
  display: flex;
}

#briefing-resultado .conceito-card {
  width: 100%;
  max-width: 320px;
}

/* Swatch de "qualquer cor" — um input[type=color] nativo, estilizado pra
   parecer um botão de roda de cores (borda em degradê), do mesmo tamanho dos
   chips de cor da marca, mas visualmente marcado como "diferente/mais opções". */
.chip-cor-espectro {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
  -webkit-appearance: none;
  appearance: none;
}

.chip-cor-espectro::-webkit-color-swatch-wrapper { padding: 3px; }
.chip-cor-espectro::-webkit-color-swatch { border: 2px solid var(--branco); border-radius: 50%; }
.chip-cor-espectro::-moz-color-swatch { border: 2px solid var(--branco); border-radius: 50%; }

/* Tráfego pago: filtros de período e de campanhas */
.filtro-periodo-barra {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.filtro-rotulo {
  font-size: 13px;
  font-weight: 600;
  color: #667;
}

.filtro-botoes {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.filtro-botoes button {
  font-family: inherit;
  font-size: 13px;
  padding: 7px 14px;
  border: 1px solid #d5dbe4;
  border-radius: 999px;
  background: var(--branco);
  color: var(--grafite);
  cursor: pointer;
}

.filtro-botoes button:hover { border-color: var(--azul); }

.filtro-botoes button.ativo {
  background: var(--azul);
  border-color: var(--azul);
  color: var(--branco);
}

.resumo-selecao {
  font-size: 13px;
  color: var(--azul);
  margin: -4px 0 12px;
}

.campanhas-ajuda {
  font-size: 13px;
  color: #667;
  margin: -6px 0 12px;
}

#filtro-situacao { margin-bottom: 12px; }

body.recarregando .resumo-30d,
body.recarregando #grafico-gasto,
body.recarregando #tabela-campanhas {
  opacity: 0.5;
  transition: opacity 0.15s;
}

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Fila: filtros e par de stories ---------- */
.fila-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 12px 0 4px;
}

.fila-grupo-story {
  border: 1.5px solid #FFE082;
  background: #FFFDF5;
  border-radius: 12px;
  padding: 12px 14px 4px;
  margin: 12px 0;
}

.fila-grupo-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #F0D98A;
}

.fila-grupo-titulo {
  font-weight: 700;
  color: var(--azul-escuro);
  font-size: 14px;
}

.fila-grupo-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fila-grupo-story .lista-item { padding: 10px 0; }

.fila-miniaturas.story img {
  width: 54px;
  height: 96px;
}

.btn-baixar {
  border: 1.5px solid var(--azul);
  background: #fff;
  color: var(--azul);
  border-radius: 8px;
  padding: 8px 12px;
  font: 600 13px/1 'Poppins', sans-serif;
  cursor: pointer;
  min-height: 40px;
}

.btn-baixar:hover { background: #E3F2FD; }
.btn-baixar:disabled { opacity: 0.6; cursor: not-allowed; }

.fila-aviso-story {
  font-size: 12px;
  color: #8a6800;
}

/* ---------- Chat da programação ---------- */







.chat-mensagens {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 420px;
  overflow-y: auto;
  padding: 4px 2px 12px;
}

.chat-balao {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.45;
}

.chat-balao p { margin: 0; white-space: pre-line; }

.chat-balao.do-kevin {
  align-self: flex-end;
  background: var(--azul);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.chat-balao.da-ia {
  align-self: flex-start;
  background: #F0F2F5;
  color: #212529;
  border-bottom-left-radius: 4px;
}

.chat-alteracoes {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 13px;
}

.chat-confirmar {
  align-self: flex-start;
  border: 1.5px solid #F5C2C0;
  background: #FFF6F5;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
}

.chat-confirmar p { margin: 0 0 8px; }

.chat-confirmar-botoes { display: flex; gap: 8px; }

.chat-form {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  border-top: 1px solid #eee;
  padding-top: 12px;
}

.chat-form textarea {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  resize: vertical;
  min-height: 44px;
  border: 1px solid #ccd3dd;
  border-radius: 10px;
  padding: 10px 12px;
  font: 400 15px/1.4 'Poppins', sans-serif;
}

.chat-form .btn-primario { min-height: 44px; margin-top: 0; width: auto; flex: 0 0 auto; padding: 12px 18px; }

/* ---------- Suas tarefas (dashboard) ---------- */
.lista-tarefas {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tarefa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid #eee;
}

.tarefa:last-child { border-bottom: none; }

.tarefa-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 8px 0;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.45;
}

.tarefa-check input {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin: 0;
  accent-color: #2e7d32;
  cursor: pointer;
}

.tarefa.feita .tarefa-texto {
  text-decoration: line-through;
  color: #8a94a3;
}

.form-tarefa {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.form-tarefa input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  border: 1px solid #ccd3dd;
  border-radius: 10px;
  padding: 10px 12px;
  font: 400 15px/1.4 'Poppins', sans-serif;
}

.form-tarefa .btn-primario { width: auto; flex: 0 0 auto; margin-top: 0; padding: 12px 18px; }

@media (max-width: 640px) {
  .chat-balao { max-width: 92%; }
}

/* ---------- Página Conteúdo: barra de ações do topo ---------- */
.acoes-conteudo {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.acao-conteudo {
  flex: 1 1 200px;
  min-height: 52px;
  padding: 12px 16px;
  border: 1.5px solid var(--azul);
  border-radius: 12px;
  background: var(--azul);
  color: #fff;
  font: 600 15px/1.2 'Poppins', sans-serif;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.acao-conteudo:hover { background: var(--azul-escuro); border-color: var(--azul-escuro); }
.acao-conteudo.ativo { background: var(--amarelo); border-color: var(--amarelo); color: var(--azul-escuro); }
.acao-conteudo.secundaria { background: #fff; color: var(--azul); flex: 0 1 auto; }
.acao-conteudo.secundaria:hover { background: #E3F2FD; }

.btn-fechar-painel {
  border: none;
  background: #F0F2F5;
  color: #445;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
}

.btn-fechar-painel:hover { background: #E1E5EB; }

/* ---------- Programação (agenda dia a dia) ---------- */
.resumo-pendencias {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.chip-pendencia {
  border: 1.5px solid #FFE082;
  background: #FFF8E1;
  color: #5c4500;
  border-radius: 999px;
  padding: 8px 14px;
  min-height: 40px;
  font: 600 13px/1.2 'Poppins', sans-serif;
  cursor: pointer;
}

.chip-pendencia:hover { background: #FFECB3; }

.agenda { display: flex; flex-direction: column; gap: 12px; }

.agenda-dia {
  border: 1px solid #E6E9EE;
  border-radius: 12px;
  padding: 10px 14px;
  background: #fff;
}

.agenda-dia.hoje { border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul) inset; }
.agenda-dia.atrasado { border-color: #F5C2C0; background: #FFF8F7; }

.agenda-dia-titulo {
  font: 700 13px/1.3 'Poppins', sans-serif;
  color: var(--azul-escuro);
  padding-bottom: 6px;
}

.agenda-dia.atrasado .agenda-dia-titulo { color: #b3261e; }

.agenda-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  width: 100%;
  padding: 8px 0;
  border: none;
  border-top: 1px solid #F0F2F5;
  background: none;
  text-align: left;
  font: inherit;
  color: inherit;
}

button.agenda-item { cursor: pointer; }
button.agenda-item:hover .agenda-titulo { color: var(--azul); }

.agenda-miniatura {
  width: 32px;
  height: 46px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.agenda-textos { flex: 1 1 220px; min-width: 0; }

.agenda-titulo { font-weight: 600; font-size: 14px; line-height: 1.35; }

.agenda-detalhe { font-size: 12px; color: #667; margin-top: 2px; }

.agenda-item.postado .agenda-titulo { color: #2e7d32; }

.agenda-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.agenda-acoes .btn-aprovar,
.agenda-acoes .btn-baixar { min-height: 40px; }

.btn-icone {
  width: 40px;
  height: 40px;
  border: 1px solid #DDE2E9;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 15px;
}

.btn-icone:hover { background: #F0F2F5; }
.btn-icone:disabled { opacity: 0.5; cursor: not-allowed; }

.agenda-vazio {
  width: 100%;
  min-height: 40px;
  border: 1.5px dashed #CCD3DD;
  border-radius: 8px;
  background: none;
  color: #778;
  font: 400 13px/1.2 'Poppins', sans-serif;
  cursor: pointer;
}

.agenda-vazio:hover { border-color: var(--azul); color: var(--azul); }

.agenda-form {
  display: grid;
  grid-template-columns: 1fr 170px;
  gap: 8px 12px;
  padding: 10px 0;
  border-top: 1px solid #F0F2F5;
}

.agenda-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #556;
}

.agenda-form label:nth-of-type(3) { grid-column: 1 / -1; }

.agenda-form input,
.agenda-form textarea {
  border: 1px solid #ccd3dd;
  border-radius: 8px;
  padding: 9px 10px;
  min-height: 40px;
  font: 400 14px/1.4 'Poppins', sans-serif;
}

.agenda-form-botoes { grid-column: 1 / -1; display: flex; gap: 8px; }

/* Destaque rápido quando a Programação leva até um post da lista */
.lista-item.destacado {
  background: #FFF8E1;
  transition: background 0.3s;
}

/* ---------- Editor em janela (por cima da lista) ---------- */
body.com-modal { overflow: hidden; }

.editor-modal:not([hidden]) {
  position: fixed;
  z-index: 100;
  top: 24px;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1040px, calc(100% - 32px));
  margin: 0;
  overflow-y: auto;
  box-shadow: 0 0 0 100vmax rgba(6, 43, 99, 0.55), 0 12px 40px rgba(0, 0, 0, 0.25);
}

@media (max-width: 640px) {
  .acao-conteudo { flex: 1 1 100%; }
  .agenda-form { grid-template-columns: 1fr; }
  .agenda-acoes { width: 100%; }
  .editor-modal:not([hidden]) {
    top: 0;
    bottom: 0;
    width: 100%;
    border-radius: 0;
  }
}