/* ===========================================================================
   A JANELA DA CAMPANHA ("Ver campanha"), redesenhada em 24/09/2026.

   O Luiz, com o print da Cobrança SMS: "deixe mais bonito de visualizar, as
   informações são importantes, mas precisa ficar melhor na tela, talvez uma
   janela de expandir". O topo tinha sete parágrafos seguidos e ficava GRUDADO
   (sticky) enquanto a lista rolava: numa tela de notebook sobrava uma faixa de
   duas pessoas para a lista, passando por baixo do texto.

   Agora: o topo rola junto e quem fica grudado são as ABAS; a conta vira
   quadros; as linhas viram etiquetas com a cor do semáforo da tela de Linhas;
   o porquê de cada coisa abre em "ver mais"; "Tela cheia" aumenta a janela.
   Prefixo `cj-` (livre em todo o painel): nenhuma regra daqui muda outra tela.
   Carregado depois de evolucao.css e nao-enviados.css (index.html).
   =========================================================================== */

/* O topo deixa de ser grudado; as abas é que ficam. */
.cartao.cj header{position:static;padding:20px 24px 16px}
.cartao.cj .abas-cartao{position:sticky;top:0;z-index:3;background:var(--papel)}
/* Tela cheia só no computador: no celular a janela já é a folha que sobe do pé da tela (celular.css). */
@media (min-width: 721px) {
  .cartao.cj.cj-cheia{width:min(1320px,100%);max-height:calc(100vh - 32px)}
  .gaveta:has(.cartao.cj.cj-cheia){padding:16px}
}

.cj-cabeca{display:flex;gap:14px;align-items:flex-start;justify-content:space-between}
.cj-titulos{min-width:0}
.cj .cj-titulos h3{margin:0 0 4px}
.cj-expandir{display:inline-flex;align-items:center;gap:6px;flex:none;font-size:12px;margin:-2px -6px 0 0}
.cj-expandir svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ------------------------------------------------------------ os quadros */
.cj .cj-resumo{margin:14px 0 0;font-size:12.5px;color:var(--grafite)}
/* evolucao.css pinta `.camp-origem.nao-fecha` inteira de vermelho: aqui o vermelho é só da frase. */
.cj .cj-resumo.nao-fecha{color:var(--grafite);font-weight:400}
.cj-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:8px}
.cj-num{min-width:0;display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:10px;
  background:var(--papel2);border:1px solid var(--linha2);text-align:left;font:inherit;color:inherit}
.cj-num b{font-family:var(--mono);font-size:22px;font-weight:600;letter-spacing:-.04em;line-height:1.05;color:var(--grafite)}
.cj-num em{font-style:normal;font-size:11.5px;line-height:1.3;color:var(--aco)}
.cj-num.ok b{color:var(--menta)}
.cj-num-botao{cursor:pointer;transition:border-color .12s,background .12s}
.cj-num-botao:hover{border-color:var(--linha);background:var(--papel)}
.cj-num-botao em{text-decoration:underline;text-decoration-color:var(--linha);text-underline-offset:3px}
.cj .cj-alerta{margin:10px 0 0;padding:9px 12px;border-radius:8px;background:var(--carmim-suave);color:var(--carmim);font-weight:600;font-size:12.5px;line-height:1.5}

/* ---------------------------------------------------------- o "ver mais" */
.cj-mais{margin-top:8px}
.cj-mais summary{display:inline-flex;align-items:center;gap:7px;cursor:pointer;list-style:none;padding:3px 0;
  font-size:12px;font-weight:600;color:var(--aco)}
.cj-mais summary::-webkit-details-marker{display:none}
.cj-mais summary::before{content:"";width:5px;height:5px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(-45deg);transition:transform .15s var(--curva,ease)}
.cj-mais[open] summary::before{transform:rotate(45deg)}
.cj-mais summary:hover{color:var(--grafite)}
.cj .cj-mais p,.cj .cj-mais ul{margin:6px 0 0;padding-left:12px;border-left:2px solid var(--linha);font-size:12.5px;line-height:1.55;color:var(--aco)}
.cj .cj-mais .cj-regra{color:var(--aco)}

/* ------------------------------------------------------------ a previsão */
.cj .cj-previsao{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:var(--papel2);border:1px solid var(--linha2)}
.cj .cj-previsao > p{display:flex;gap:9px;align-items:flex-start;margin:0;font-size:13px;font-weight:600;line-height:1.45;color:var(--grafite)}
.cj-relogio{position:relative;flex:none;width:14px;height:14px;margin-top:2px;border:1.6px solid var(--aco);border-radius:50%}
.cj-relogio::before,.cj-relogio::after{content:"";position:absolute;left:50%;top:50%;width:1.6px;background:var(--aco);transform-origin:50% 0;border-radius:1px}
.cj-relogio::before{height:4px;transform:translate(-50%,-.5px) rotate(180deg)}
.cj-relogio::after{height:3.5px;transform:translate(-50%,-.5px) rotate(-90deg)}
.cj .cj-previsao .cj-mais{margin:4px 0 0 23px}

/* ------------------------------------------------------ por onde sai */
.cj-linhas{margin:12px 0 0;padding:12px 14px;border:1px solid var(--linha2);border-radius:12px;background:var(--papel)}
.cj-linhas-topo{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.cj-linhas-topo .olho{color:var(--aco)}
.cj-linhas-topo .camp-rodizio{margin:0;font-size:12px;color:var(--aco)}
.cj-fila{display:grid;grid-template-columns:128px minmax(0,1fr);gap:10px;align-items:start;margin-top:9px}
.cj-fila > em{font-style:normal;font-size:12px;color:var(--aco);padding-top:5px}
.cj-chips{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.cj-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:4px 10px;border-radius:99px;
  background:var(--papel2);border:1px solid var(--linha2);font-size:12.5px;line-height:1.35;color:var(--grafite)}
.cj-chip b{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--aco)}
.cj-chip small{font-size:11.5px;color:var(--aco)}
.cj-chip small::before{content:"· "}
.cj-cor-amarelo small{color:#8a5f08}
.cj-cor-vermelho small{color:#b3261e}
.cj-cor-aquecimento small{color:#2d5a94}
.cj-bola{flex:none;width:8px;height:8px;border-radius:99px;background:var(--aco2)}
/* As mesmas cores do semáforo da tela de Linhas (estilo.css, `.semaforo`): aquecendo é AZUL, precaução e não defeito. */
.cj-cor-verde .cj-bola{background:#1f9d5b}
.cj-cor-amarelo .cj-bola{background:#c98a12}
.cj-cor-vermelho .cj-bola{background:#b3261e}
.cj-cor-aquecimento .cj-bola{background:#3b6fb5}
.cj-nao-pode{background:transparent;border-style:dashed;border-color:var(--linha)}
.cj-nada{font-size:12px;color:var(--aco);padding-top:5px}

.cj-aviso{margin-top:11px;padding:9px 12px;border-radius:9px;border-left:3px solid #c98a12;background:var(--papel2);color:var(--grafite)}
.cj-aviso > b{display:block;font-size:12.5px;line-height:1.45}
.cj-aviso.grave{border-left-color:var(--carmim);background:var(--carmim-suave);color:var(--carmim)}
.cj .cj-aviso > p{margin:4px 0 0;font-size:12px;line-height:1.5;color:var(--aco)}
.cj .cj-aviso .cj-mais summary{color:var(--aco)}
.cj .cj-aviso.grave .cj-mais summary{color:var(--carmim)}
.cj .cj-aviso .cj-mais ul{list-style:none;border-left-color:var(--linha)}
.cj .cj-aviso .cj-mais li{margin:0 0 6px}
.cj .cj-aviso .cj-mais li b{color:var(--grafite);margin-right:4px}

/* A aba "O que sai" da campanha do copiloto (25/09): quem escreve, em letra de ler. */
.cj .cj-quem-escreve{margin:6px 0 10px;font-size:14px;line-height:1.55;color:var(--grafite)}

/* A cruzada e o "Parada" já têm cara própria; aqui só o espaço entre os blocos. */
.cj .ne-parada{margin:12px 0 0}
.cj .camp-cruzada{margin:12px 0 0}

/* ---------------------------------------------------------------- celular */
@media (max-width: 720px) {
  .cartao.cj header{padding:16px 16px 14px}
  .cj-expandir{display:none}
  .cj-nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cj-num b{font-size:19px}
  .cj-fila{grid-template-columns:minmax(0,1fr);gap:4px}
  .cj-fila > em{padding-top:0}
}