/* ============================================================
   DASHBOARD INTERNO — "Acompanhamento" (Etapa 3)
   ------------------------------------------------------------
   Sem biblioteca de gráficos (decisão do desenho da Etapa 3): as
   barras do funil/distribuições são <div> com largura em % + CSS.
   ============================================================ */

.dash-conteudo {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 20px 16px 48px;
  background: var(--cor-branco);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra-cartao);
  padding: 28px 20px 40px;
}

@media (min-width: 900px) {
  .dash-conteudo {
    margin: 40px auto 64px;
    padding: 48px 56px 64px;
  }
}

.dash-titulo {
  margin-bottom: 12px;
}

.dash-status {
  color: var(--cor-texto-corpo);
}

.dash-aviso-coleta {
  background: var(--cor-destaque-suave);
  color: var(--cor-primaria);
  border-radius: var(--raio-medio);
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 24px;
}

.dash-erro {
  color: #b3261e;
  font-size: 14px;
  margin: 12px 0;
}

/* ---------------- Filtros ---------------- */

.dash-filtros {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  padding: 20px;
  background: #f8f9fb;
  border-radius: var(--raio-medio);
  margin-bottom: 28px;
}

.dash-filtro-grupo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--cor-texto-corpo);
}

.dash-filtro-grupo label {
  font-weight: 600;
  color: var(--cor-primaria);
}

.dash-filtro-grupo select,
.dash-filtro-grupo input {
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: var(--fonte-corpo);
  background: var(--cor-branco);
  color: var(--cor-primaria);
}

.dash-filtro-acoes {
  grid-column: 1 / -1;
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

.dash-botao-primario,
.dash-botao-secundario {
  border: none;
  border-radius: var(--raio-total);
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.dash-botao-primario {
  background: var(--cor-destaque);
  color: var(--cor-branco);
}

.dash-botao-primario:hover {
  filter: brightness(1.05);
}

.dash-botao-secundario {
  background: var(--cor-fundo-chip);
  color: var(--cor-primaria);
}

/* ---------------- Seções ---------------- */

.dash-secao {
  margin-bottom: 32px;
}

.dash-secao-titulo {
  font-family: var(--fonte-titulo);
  font-size: 20px;
  color: var(--cor-primaria);
  margin-bottom: 14px;
}

.dash-secao-dupla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

@media (min-width: 900px) {
  .dash-secao-dupla {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------------- Cartões de KPI ---------------- */

.dash-kpis,
.dash-qualidade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}

.dash-cartao {
  background: #f8f9fb;
  border-radius: var(--raio-medio);
  padding: 16px 18px;
}

.dash-cartao-titulo {
  font-size: 13px;
  color: var(--cor-texto-corpo);
  margin-bottom: 6px;
}

.dash-cartao-valor {
  font-family: var(--fonte-titulo);
  font-size: 26px;
  font-weight: 700;
  color: var(--cor-primaria);
}

.dash-cartao-legenda {
  font-size: 12px;
  color: var(--cor-texto-corpo);
  margin-top: 6px;
}

/* ---------------- Funil / barras de faixa ---------------- */

.dash-funil,
.dash-barras {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dash-funil-linha {
  display: grid;
  grid-template-columns: 160px 1fr 120px;
  align-items: center;
  gap: 12px;
}

.dash-funil-rotulo {
  font-size: 13px;
  color: var(--cor-primaria);
}

.dash-barra-fundo {
  background: var(--cor-fundo-chip);
  border-radius: var(--raio-total);
  overflow: hidden;
  height: 14px;
}

.dash-funil-barra {
  width: 100%;
}

.dash-barra-preenchimento {
  height: 100%;
  background: var(--cor-destaque);
  border-radius: var(--raio-total);
  transition: width 0.3s ease;
}

.dash-funil-valor {
  font-size: 13px;
  font-weight: 600;
  color: var(--cor-primaria);
  text-align: right;
}

@media (max-width: 640px) {
  .dash-funil-linha {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .dash-funil-valor {
    text-align: left;
  }
}

/* ---------------- Página "Marketing" (Fase 1A) ----------------
   Página curta (sem filtros/seções extras acima do título) — o título
   ficava colado no cabeçalho fixo/sticky. Reforça só aqui a distância
   do topo, sem mexer no espaçamento padrão usado em Analytics. */

.pagina-marketing .dash-conteudo {
  margin-top: 96px;
}

@media (min-width: 900px) {
  .pagina-marketing .dash-conteudo {
    margin-top: 112px;
  }
}

/* ---------------- Abas da página Marketing ---------------- */

.mkt-abas {
  display: flex;
  flex-wrap: wrap; /* 4 abas não cabem numa linha no celular */
  gap: 10px;
  margin-bottom: 24px;
}

.mkt-aba-botao {
  border: none;
  background: var(--cor-fundo-chip);
  color: var(--cor-primaria);
  border-radius: var(--raio-total);
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.mkt-aba-botao.ativa {
  background: var(--cor-destaque);
  color: var(--cor-branco);
}

/* ---------------- Formulário do kit de marca ---------------- */

.mkt-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 720px;
}

.mkt-campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--cor-texto-corpo);
}

.mkt-campo span {
  font-weight: 600;
  color: var(--cor-primaria);
}

.mkt-campo textarea {
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: var(--fonte-corpo);
  color: var(--cor-primaria);
  resize: vertical;
}

.mkt-form-aviso {
  font-size: 13px;
  color: var(--cor-destaque);
}

.mkt-form-aviso.erro {
  color: #b3261e;
}

/* ---------------- Cores / logos / fontes / modelos ---------------- */

.mkt-cores,
.mkt-logos,
.mkt-fontes {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.mkt-cor-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8f9fb;
  border-radius: var(--raio-medio);
  padding: 10px 16px;
  font-size: 13px;
  color: var(--cor-primaria);
}

.mkt-cor-amostra {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--cor-borda);
  flex-shrink: 0;
}

.mkt-cartao-upload {
  background: #f8f9fb;
  border-radius: var(--raio-medio);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 220px;
}

.mkt-cartao-upload-titulo {
  font-size: 13px;
  font-weight: 600;
  color: var(--cor-primaria);
}

.mkt-cartao-upload img {
  max-width: 160px;
  max-height: 60px;
  object-fit: contain;
  background: repeating-conic-gradient(#e2e5ea 0% 25%, #f8f9fb 0% 50%) 50% / 16px 16px;
  border-radius: 8px;
  padding: 8px;
}

.mkt-cartao-upload input[type="file"] {
  font-size: 12px;
}

.mkt-modelos {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mkt-modelo-linha {
  background: #f8f9fb;
  border-radius: var(--raio-medio);
  padding: 16px 18px;
}

.mkt-modelo-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.mkt-modelo-nome {
  font-weight: 600;
  color: var(--cor-primaria);
  font-size: 14px;
}

.mkt-modelo-medida {
  font-size: 12px;
  color: var(--cor-texto-corpo);
}

.mkt-modelo-previa {
  margin-top: 12px;
  max-width: 240px;
  border-radius: 8px;
  display: block;
}

/* Cartão com valor longo (ex.: e-mail) — fonte menor que o padrão
   numérico de KPI, numa linha só. Uso opt-in via classe, não muda o
   padrão dos outros cartões. */
.dash-cartao-valor-longo {
  font-size: 16px;
  white-space: nowrap;
}

/* Cartão que ocupa a linha inteira do grid (em vez de dividir espaço
   com os vizinhos) — dá a largura extra que um valor longo precisa. */
.dash-cartao-largura-total {
  grid-column: 1 / -1;
}

/* ---------------- Fila de aprovação (Fase 1C) ---------------- */

.mkt-exemplo-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}

.mkt-peca-cartao {
  background: #f8f9fb;
  border-radius: var(--raio-medio);
  padding: 16px 18px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

@media (min-width: 640px) {
  .mkt-peca-cartao {
    flex-direction: row;
    align-items: flex-start;
  }
}

.mkt-peca-imagem {
  width: 100%;
  max-width: 220px;
  border-radius: 8px;
  display: block;
  flex-shrink: 0;
}

.mkt-peca-corpo {
  flex: 1;
  min-width: 0;
}

.mkt-peca-cabecalho {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--cor-destaque);
  margin-bottom: 4px;
}

.mkt-peca-tema {
  font-family: var(--fonte-titulo);
  font-size: 17px;
  color: var(--cor-primaria);
  margin-bottom: 6px;
}

.mkt-peca-legenda {
  font-size: 13px;
  color: var(--cor-texto-corpo);
  margin-bottom: 6px;
  white-space: pre-line;
}

.mkt-peca-link {
  display: block;
  font-size: 12px;
  color: var(--cor-destaque);
  word-break: break-all;
  margin-top: 6px;
}

.mkt-peca-motivo {
  font-size: 13px;
  color: #b3261e;
  margin-top: 6px;
}

.mkt-peca-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}

@media (min-width: 640px) {
  .mkt-peca-acoes {
    flex-direction: column;
  }
}

.mkt-peca-form-edicao {
  margin-top: 14px;
  max-width: none;
}

.mkt-peca-form-botoes {
  display: flex;
  gap: 12px;
}

/* ---------------- Alterar horário (Fila de aprovação) ---------------- */

/* Ocupa a linha inteira do cartão (no desktop o cartão é uma linha:
   imagem | corpo | ações — sem isso o formulário ficaria espremido
   numa quarta coluna). */
.mkt-form-horario {
  flex-basis: 100%;
}

@media (min-width: 640px) {
  .mkt-peca-cartao:has(.mkt-form-horario:not(.oculto)) {
    flex-wrap: wrap;
  }
}

.mkt-horario-campos {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.mkt-horario-campos .mkt-campo {
  flex: 1 1 160px;
}

/* 16px evita o zoom automático do iPhone ao tocar no campo; altura
   mínima de 44px = alvo de toque confortável no celular. */
.mkt-campo input {
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
  padding: 10px 12px;
  min-height: 44px;
  font-size: 16px;
  font-family: var(--fonte-corpo);
  color: var(--cor-primaria);
  background: var(--cor-branco, #fff);
  width: 100%;
  box-sizing: border-box;
}

/* Aviso que não bloqueia (intervalo/limite diário) — âmbar, pra não
   parecer mensagem de sucesso (a cor padrão do aviso é a de destaque). */
.mkt-form-aviso.alerta {
  color: #8a5300;
  background: #fff4e0;
  border-radius: 10px;
  padding: 10px 12px;
}

.mkt-form-horario .mkt-peca-form-botoes {
  flex-wrap: wrap;
}

.mkt-form-horario .mkt-peca-form-botoes button {
  min-height: 44px;
}

.mkt-regras-arte {
  list-style: disc;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: var(--cor-primaria);
}

.mkt-alertas {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mkt-alertas li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #fdecea;
  border-left: 4px solid #b3261e;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px;
  color: #6a1a14;
}

/* Aviso informativo (ex.: post não encontrado na rede) — âmbar, não o
   vermelho de erro de tarefa. */
.mkt-alertas li.mkt-alerta-aviso {
  background: #fff4e0;
  border-left-color: #a15c00;
  color: #5c3500;
}

.mkt-alertas li span {
  flex: 1 1 240px;
}

.mkt-alerta-dispensar {
  min-height: 44px;
  flex-shrink: 0;
}

.mkt-cartao-rede {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mkt-cartao-rede-cabecalho {
  display: flex;
  flex-wrap: wrap; /* em cartão estreito, o selo desce pra baixo do nome da rede */
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
}

.mkt-badge-simulacao {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Os dois modos são válidos (não é certo/errado): simulação é o estado
   inofensivo (cinza neutro); ao vivo é o que exige atenção ao aprovar
   (destaque forte na cor da marca). O âmbar de alerta fica reservado
   para o processamento pausado, esse sim um estado excepcional. */
.mkt-badge-simulacao--sim {
  background: var(--cor-fundo-chip);
  color: var(--cor-texto-corpo);
}

/* Texto marinho sobre turquesa (7:1) — branco sobre turquesa ficaria
   ilegível em letra pequena (2,4:1). */
.mkt-badge-simulacao--real {
  background: var(--cor-destaque);
  color: var(--cor-primaria);
}

/* Publicação manual (LinkedIn, 01/10/2026): marinho da marca com texto
   branco — distinto do cinza da simulação e do turquesa do "ao vivo". */
.mkt-badge-simulacao--manual {
  background: var(--cor-primaria);
  color: var(--cor-branco);
}

/* "Baixar peça" é um link (atributo download) com cara de botão. */
.mkt-botao-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Turquesa escurecido: o turquesa puro da marca sobre branco não tem
   contraste suficiente (2,4:1); este tem 4,5:1. */
.mkt-estado-ativado {
  color: #1a857d;
}

.mkt-estado-pausado {
  color: #a15c00;
}

.mkt-botao-simulacao {
  margin-top: 10px;
  align-self: flex-start;
}

/* ---------------- Aba "Desempenho" (Fase 3) ---------------- */

.mkt-referencia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 0 24px;
}

.mkt-referencia-rotulo {
  font-size: 13px;
  color: var(--cor-texto-corpo);
}

.mkt-referencia-botao {
  border: 1px solid var(--cor-borda);
  background: var(--cor-branco);
  color: var(--cor-primaria);
  border-radius: var(--raio-total);
  padding: 8px 16px;
  min-height: 40px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.mkt-referencia-botao.ativa {
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: var(--cor-branco);
}

.mkt-valor-quebra {
  white-space: normal;
}

.mkt-grupo-bloco {
  margin-bottom: 20px;
}

.mkt-grupo-titulo {
  font-size: 15px;
  font-weight: 700;
  color: var(--cor-primaria);
  margin: 0 0 8px;
}

.mkt-grupo-item {
  background: #f8f9fb;
  border-radius: var(--raio-medio);
  padding: 12px 16px;
  margin-bottom: 10px;
}

.mkt-grupo-cabecalho {
  font-weight: 600;
  color: var(--cor-primaria);
  margin: 0 0 8px;
}

.mkt-amostra-insuficiente {
  font-size: 13px;
  color: var(--cor-texto-corpo);
  font-style: italic;
  margin: 4px 0;
}

.mkt-metricas-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.mkt-metrica {
  display: flex;
  flex-direction: column;
  background: var(--cor-branco);
  border-radius: 10px;
  padding: 8px 10px;
}

.mkt-metrica-destaque {
  background: var(--cor-destaque-suave);
}

.mkt-metrica-rotulo {
  font-size: 12px;
  color: var(--cor-texto-corpo);
}

.mkt-metrica-valor {
  font-size: 18px;
  font-weight: 700;
  color: var(--cor-primaria);
}

.mkt-metrica-detalhe {
  font-size: 11px;
  color: var(--cor-texto-corpo);
}

.mkt-desempenho-tema {
  font-weight: 600;
  color: var(--cor-primaria);
  margin: 4px 0;
}

.mkt-desempenho-miniatura {
  max-width: 160px;
}

/* Análise do Gemini (aba Desempenho, Fase 3) */
.mkt-analise-resumo {
  font-weight: 600;
  color: var(--cor-primaria);
  margin: 8px 0 12px;
}

.mkt-analise-bloco {
  margin-top: 12px;
}

.mkt-analise-subtitulo {
  font-size: 14px;
  margin: 0 0 6px;
  color: var(--cor-primaria);
}

.mkt-analise-lista {
  margin: 0;
  padding-left: 18px;
}

.mkt-analise-lista li {
  margin-bottom: 8px;
}

.mkt-analise-detalhe {
  display: block;
  font-size: 13px;
  color: var(--cor-texto-corpo);
}

/* Prévia do e-mail diário (aba Status, só owner — Fase 4 do marketing).
   O e-mail vem pronto do servidor e é mostrado num iframe, na largura
   da tela (no celular, é exatamente como o e-mail aparece). */
.mkt-previa-email {
  margin-top: 16px;
}

.mkt-previa-email-assunto {
  font-weight: 600;
  color: var(--cor-primaria);
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}

.mkt-previa-email iframe {
  display: block;
  width: 100%;
  min-height: 400px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  background: var(--cor-fundo-chip);
}

/* Entrega de e-mails (aba Status, só owner — 23/09/2026). */
.mkt-alertas li.mkt-alerta-ok {
  background: var(--cor-destaque-suave);
  border-left-color: var(--cor-destaque);
  color: var(--cor-primaria);
}

.mkt-entregas-subtitulo {
  font-size: 14px;
  color: var(--cor-primaria);
  margin: 18px 0 8px;
}

.mkt-entregas-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mkt-entregas-lista li {
  background: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--cor-primaria);
  overflow-wrap: anywhere;
}

.mkt-entregas-lista li.vazio {
  color: var(--cor-texto-corpo);
}

.mkt-entregas-lista strong {
  font-weight: 600;
}

.mkt-entregas-motivo {
  display: block;
  margin-top: 4px;
  color: #6a1a14;
}

.mkt-entregas-lista details {
  margin-top: 6px;
  color: var(--cor-texto-corpo);
}

.mkt-entregas-lista summary {
  cursor: pointer;
}

.mkt-entregas-nota {
  font-size: 12px;
  color: var(--cor-texto-corpo);
  margin-top: 12px;
}

/* ---------------- Aba "Espaços criados" (marketing) ---------------- */

.mkt-tabela-rolagem {
  overflow-x: auto;
  margin-top: 20px;
}

.mkt-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--cor-primaria);
}

.mkt-tabela th,
.mkt-tabela td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--cor-borda);
  white-space: nowrap;
}

.mkt-tabela th {
  font-weight: 600;
  background: #f8f9fb;
}