/* ==========================================================================
   ChatISP: /campanhas

   So o que e EXCLUSIVO desta pagina. Capa, painel, painel-dados, passos,
   comparativo, citacao, aviso, fita, dupla, relacionadas e chamada vivem em
   css/pagina.css; grade, cartao, selo e nota vivem em css/site.css.

   Quatro pecas proprias:
     .campanha-mock  cartao de uma campanha em andamento, no painel da capa
     .fala           moldura da citacao de abertura (#numero)
     .ritmo-mock     a escala de 1 a 60 mensagens por minuto (#ritmo)
     .negativas      lista do que a campanha NAO faz (#premium)

   Mais um respiro (.apos-bloco / .nota-apos) que o kit compartilhado nao
   tem: .grade, .painel-dados e .tabela-rolo nao trazem margem, entao dois
   blocos irmaos dentro da mesma secao encostam um no outro. Fica aqui,
   prefixado por .pagina-campanhas, porque css/site.css nao e meu.

   Nenhum valor escrito a mao: so var(). Porcentagem de maquete e a unica
   excecao, e ela existe porque a barra desenha uma fracao, nao um tamanho.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. Maquete de campanha (capa)

   Um cartao de campanha em andamento: nome, conexao, tres medidas, barra de
   progresso, tres destinatarios e os controles. A terceira linha e um erro
   de propósito. A tela real mostra numero invalido, e esconder isso aqui
   seria vender outra coisa.
   -------------------------------------------------------------------------- */

.campanha-mock {
  display: grid;
  gap: var(--e4);
  padding: var(--e4);
  border-radius: var(--r-lg);
  background: var(--sup-1);
  border: 1px solid var(--borda);
  box-shadow: var(--sombra-2);
}

.campanha-topo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e3);
  padding-bottom: var(--e4);
  border-bottom: 1px solid var(--borda);
}

.campanha-quem {
  display: grid;
  gap: var(--e1);
  min-width: 0;
}

.campanha-quem strong {
  color: var(--texto);
  font-size: var(--c2);
  font-weight: var(--p-medio);
  letter-spacing: var(--tk3);
}

.campanha-quem small {
  color: var(--tenue);
  font-size: var(--c5);
  letter-spacing: var(--tk-micro);
}

.campanha-estado {
  flex: none;
  border-color: var(--verde-linha);
  background: var(--verde-vidro);
  color: var(--verde);
}

/* --- Medidas ------------------------------------------------------------
   Rotulo miudo em cima, valor embaixo. Sao as tres decisoes que o texto da
   pagina destrincha: lista, ritmo e conteudo. */
.campanha-medidas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e3);
}

.campanha-medidas .medida {
  display: grid;
  gap: var(--e1);
  min-width: 0;
  padding: var(--e3);
  border-radius: var(--r-md);
  background: var(--sup-2);
  border: 1px solid var(--borda);
}

.campanha-medidas i {
  font-style: normal;
  font-size: var(--c5);
  letter-spacing: var(--tk-largo);
  text-transform: uppercase;
  color: var(--tenue);
}

.campanha-medidas b {
  font-size: var(--c4);
  font-weight: var(--p-medio);
  line-height: 1.4;
  color: var(--texto);
}

.campanha-medidas b em {
  font-style: normal;
  color: var(--verde);
}

/* --- Progresso ----------------------------------------------------------
   A fracao e de ENVIO, nao de entrega: por isso a legenda fala em enviadas e
   pendentes, e nenhum numero de entrega aparece na maquete. */
.campanha-progresso {
  display: grid;
  gap: var(--e2);
}

.campanha-trilho {
  display: block;
  overflow: hidden;
  height: var(--e2);
  border-radius: var(--r-full);
  background: var(--sup-3);
}

.campanha-trilho i {
  display: block;
  width: 41%;
  height: 100%;
  border-radius: inherit;
  background: var(--verde);
}

.campanha-legenda {
  display: flex;
  justify-content: space-between;
  gap: var(--e3);
}

.campanha-legenda b {
  font-size: var(--c5);
  font-weight: var(--p-normal);
  letter-spacing: var(--tk-micro);
  color: var(--tenue);
}

.campanha-legenda b:first-child {
  color: var(--verde);
}

/* --- Destinatarios ------------------------------------------------------- */
.campanha-linhas {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--borda);
}

.campanha-linhas li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e3);
  padding-block: var(--e3);
  border-bottom: 1px solid var(--borda);
  font-size: var(--c4);
  color: var(--suave);
}

.campanha-marca {
  font-size: var(--c5);
  letter-spacing: var(--tk-micro);
  color: var(--tenue);
}

.campanha-marca--saiu {
  color: var(--verde);
}

/* O erro nao e vermelho: o sistema visual nao tem essa cor, e a folha de
   pagina.css ja decidiu que nenhuma coluna de comparacao se pinta de
   vermelho. Aqui ele se distingue pelo tracejado. */
.campanha-marca--erro {
  padding: 0 var(--e2);
  border: 1px dashed var(--borda-forte);
  border-radius: var(--r-full);
  color: var(--suave);
}

.campanha-rodape {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
}

.campanha-acao {
  padding: var(--e2) var(--e3);
  border-radius: var(--r-full);
  border: 1px solid var(--borda-forte);
  font-size: var(--c5);
  letter-spacing: var(--tk-micro);
  color: var(--suave);
}

/* Pausar e a acao em destaque da tela inteira. Ela existe para ser usada. */
.campanha-acao:first-child {
  border-color: var(--verde-linha);
  background: var(--verde-vidro);
  color: var(--verde);
}

/* --------------------------------------------------------------------------
   02. Citacao de abertura (#numero)

   A .citacao ja vem pronta de css/pagina.css; aqui so a moldura <figure>,
   que nasce com margem do navegador, e um recuo vertical para ela nao
   alinhar rente ao sobretitulo da coluna da esquerda.
   -------------------------------------------------------------------------- */

.fala {
  margin: 0;
  padding-top: var(--e6);
}

/* --------------------------------------------------------------------------
   03. Maquete do ritmo (#ritmo)

   A escala e LINEAR: 1, 15, 30, 45 e 60 em intervalos iguais, e o
   preenchimento para em 15% porque 10 de 60 e isso mesmo. Desenhar o padrao
   no meio da barra seria mentir a favor do proprio argumento.
   -------------------------------------------------------------------------- */

.ritmo-mock {
  display: grid;
  gap: var(--e4);
  padding: var(--e6);
  border-radius: var(--r-xl);
  background: var(--sup-1);
  border: 1px solid var(--borda);
  box-shadow: var(--sombra-2);
}

.ritmo-titulo {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--c5);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk-largo);
  text-transform: uppercase;
  color: var(--verde);
}

.ritmo-valor {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e3);
  margin: 0;
  font-family: var(--titulo);
  font-size: var(--t3);
  font-weight: var(--p-max);
  line-height: 1;
  letter-spacing: var(--tk1);
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

.ritmo-valor span {
  font-family: var(--fonte);
  font-size: var(--c4);
  font-weight: var(--p-normal);
  letter-spacing: var(--tk3);
  color: var(--suave);
}

.ritmo-trilho {
  position: relative;
  display: block;
  height: var(--e2);
  border-radius: var(--r-full);
  background: var(--sup-3);
}

.ritmo-preenche {
  display: block;
  width: 15%;
  height: 100%;
  border-radius: inherit;
  background: var(--verde);
}

.ritmo-pino {
  position: absolute;
  top: 50%;
  left: 15%;
  width: var(--e5);
  height: var(--e5);
  translate: -50% -50%;
  border-radius: var(--r-full);
  background: var(--sup-2);
  border: 1px solid var(--verde);
  box-shadow: var(--brilho-verde);
}

.ritmo-escala {
  display: flex;
  justify-content: space-between;
  gap: var(--e2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--c5);
  letter-spacing: var(--tk-micro);
  color: var(--tenue);
  font-variant-numeric: tabular-nums;
}

.ritmo-nota {
  margin: 0;
  padding-top: var(--e4);
  border-top: 1px solid var(--borda);
  font-size: var(--c4);
  line-height: 1.6;
  color: var(--suave);
}

/* --------------------------------------------------------------------------
   04. Lista de negativas (#premium)

   Uma .lista-marcada nao serve: o check verde diria "temos isso" na frente
   de quatro frases que dizem exatamente o contrario. A marca reaproveitada e
   a .marca-nao do comparativo, que ja e neutra por projeto.
   -------------------------------------------------------------------------- */

.negativas {
  display: grid;
  gap: var(--e4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.negativas li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e3);
  align-items: start;
  font-size: var(--c3);
  line-height: 1.7;
  color: var(--suave);
}

.negativas .marca-nao {
  margin-top: var(--e1);
}

.negativas strong {
  color: var(--texto);
  font-weight: var(--p-medio);
}

/* --------------------------------------------------------------------------
   05. Respiro entre blocos irmaos

   .grade, .painel-dados e .tabela-rolo nao trazem margem propria: o kit
   supoe um bloco por secao. Onde esta pagina poe dois, o espaco vem daqui.
   -------------------------------------------------------------------------- */

.pagina-campanhas .apos-bloco {
  margin-top: var(--esp-bloco);
}

.pagina-campanhas .nota-apos {
  max-width: 62ch;
  margin-top: var(--e5);
}

/* --------------------------------------------------------------------------
   06. Responsivo
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  /* Coluna unica: a citacao deixa de ser vizinha do texto e nao precisa mais
     do recuo que a alinhava com ele. */
  .fala {
    padding-top: 0;
  }
}

@media (max-width: 680px) {
  .campanha-medidas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .campanha-medidas .medida:last-child {
    grid-column: 1 / -1;
  }

  .ritmo-mock {
    padding: var(--e5);
  }
}

@media (max-width: 380px) {
  .campanha-medidas,
  .campanha-linhas li {
    grid-template-columns: minmax(0, 1fr);
  }

  .campanha-linhas li {
    gap: var(--e1);
    justify-items: start;
  }

  .campanha-medidas .medida:last-child {
    grid-column: auto;
  }
}