/* Painel de Mídia — Mkt4edu / 4RevOps
   Tokens da skill mkt4edu-identidade: Poppins, rosa #FC019B como acento,
   base light, bordas sutis #E8E8E8, sem headers escuros dominantes. */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: light;

  --rosa-900: #C20077;
  --rosa-700: #FC019B;
  --rosa-500: #F545B1;
  --rosa-400: #DA66AD;
  --rosa-300: #E799C9;
  --rosa-200: #FFCCF1;
  --rosa-100: #F3CCE4;
  --rosa-050: #FEF2FA;
  --roxo-900: #64006E;
  --uva:      #8E2A6B;

  --neutro-900: #030303;
  --neutro-700: #231F20;
  --neutro-600: #7A7A7A;
  --neutro-500: #646464;
  --neutro-400: #AFAFAF;
  --neutro-300: #C2C2C2;
  --neutro-200: #E8E8E8;
  --neutro-100: #F3F3F3;
  --neutro-050: #FBFBFB;

  --positivo: #10B981;
  --alerta:   #F59E0B;
  --negativo: #EF4444;

  --fonte: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --u: 30px;          /* unidade de altura da grade, igual à do Grafana */
  --gap: 10px;
  --raio: 12px;
  --borda: 1px solid var(--neutro-200);
}

* { box-sizing: border-box; }

/* o atributo hidden precisa vencer as classes com display explícito */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--fonte);
  background: var(--neutro-100);
  color: var(--neutro-700);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* ===================== Topo ===================== */

.topo {
  background: #FFFFFF;
  border-bottom: var(--borda);
  position: sticky; top: 0; z-index: 50;
}
.topo__faixa { height: 3px; background: linear-gradient(90deg, #231F20 0%, #FC019B 100%); }
.topo__corpo {
  max-width: 1720px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.topo__logos { display: flex; align-items: center; gap: 14px; }
.topo__logos img { height: 30px; width: auto; display: block; }
.topo__divisor { width: 1px; height: 26px; background: var(--neutro-200); }
.cliente {
  font-size: 13px; font-weight: 600; color: var(--neutro-700);
  padding: 5px 11px; border-radius: 8px;
  background: var(--neutro-100); border: var(--borda); white-space: nowrap;
}
.topo__titulos { margin-right: auto; }
.topo__titulos h1 {
  margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.015em;
  color: var(--neutro-700);
}
.topo__titulos p { margin: 2px 0 0; font-size: 12.5px; color: var(--neutro-600); }
.topo__acoes { display: flex; align-items: center; gap: 10px; }

.selo {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
  background: var(--rosa-050); color: var(--rosa-900); border: 1px solid var(--rosa-100);
}
.selo--aviso { background: #FEF4E0; color: #8A5A00; border-color: #F6DFB0; }

.botao {
  font-family: var(--fonte); font-size: 13px; font-weight: 600;
  padding: 8px 14px; border-radius: 9px; cursor: pointer;
  border: var(--borda); background: #FFFFFF; color: var(--neutro-700);
  transition: background .15s, border-color .15s;
}
.botao:hover { background: var(--neutro-050); border-color: var(--neutro-300); }
.botao--rosa { background: var(--rosa-700); border-color: var(--rosa-700); color: #FFFFFF; }
.botao--rosa:hover { background: var(--rosa-900); border-color: var(--rosa-900); }

/* ===================== Filtros ===================== */

.filtros {
  max-width: 1720px; margin: 0 auto; padding: 14px 24px 0;
  display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
}
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 150px; }
.campo__rotulo {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--neutro-600);
}
.campo select, .campo input[type="date"] {
  font-family: var(--fonte); font-size: 13px; color: var(--neutro-700);
  padding: 8px 10px; border-radius: 9px; border: var(--borda); background: #FFFFFF;
  min-height: 37px;
}
.campo select:focus, .campo input:focus { outline: 2px solid var(--rosa-200); border-color: var(--rosa-400); }

/* multiselect em chips */
.multi { position: relative; }
.multi__botao {
  font-family: var(--fonte); font-size: 13px; text-align: left;
  padding: 8px 10px; border-radius: 9px; border: var(--borda); background: #FFFFFF;
  cursor: pointer; min-height: 37px; min-width: 190px; color: var(--neutro-700);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.multi__lista {
  display: none; position: absolute; top: calc(100% + 5px); left: 0; z-index: 60;
  background: #FFFFFF; border: var(--borda); border-radius: 11px; padding: 7px;
  min-width: 230px; max-height: 300px; overflow: auto;
  box-shadow: 0 10px 30px rgba(35,31,32,.12);
}
.multi--aberto .multi__lista { display: block; }
.multi__item {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px;
  border-radius: 7px; cursor: pointer; font-size: 13px;
}
.multi__item:hover { background: var(--neutro-100); }
.multi__item input { accent-color: var(--rosa-700); width: 15px; height: 15px; }
.multi__acoes { display: flex; gap: 6px; padding: 6px 4px 8px; border-bottom: var(--borda); margin-bottom: 5px; }
.multi__acoes button {
  font-family: var(--fonte); font-size: 11.5px; font-weight: 600; cursor: pointer;
  border: var(--borda); background: #FFFFFF; border-radius: 7px; padding: 5px 9px;
}

/* ===================== Grade ===================== */

.conteudo { max-width: 1720px; margin: 0 auto; padding: 14px 24px 48px; }

.secao {
  display: flex; align-items: center; gap: 10px;
  margin: 20px 0 10px; font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--neutro-600);
  cursor: default; user-select: none;
}
.secao::after { content: ''; flex: 1; height: 1px; background: var(--neutro-200); }
.secao--dobra { cursor: pointer; }
.secao--dobra:hover { color: var(--rosa-700); }
.secao__seta { transition: transform .18s; font-size: 10px; color: var(--neutro-400); }
.secao--fechada .secao__seta { transform: rotate(-90deg); }

.grade {
  display: grid; grid-template-columns: repeat(24, 1fr);
  grid-auto-rows: var(--u); gap: var(--gap);
}
.grade--fechada { display: none; }

.painel {
  background: #FFFFFF; border: var(--borda); border-radius: var(--raio);
  padding: 12px 14px; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
}
.painel--limpo { padding: 0; border: none; background: transparent; overflow: visible; }
.painel__titulo {
  font-size: 12.5px; font-weight: 600; color: var(--neutro-600);
  margin: 0 0 8px; display: flex; align-items: center; gap: 7px;
}
.painel__corpo { flex: 1; min-height: 0; position: relative; }
.dica {
  width: 15px; height: 15px; flex: 0 0 auto; border-radius: 50%;
  border: 1px solid var(--neutro-300); color: var(--neutro-500);
  font-size: 9.5px; font-weight: 700; line-height: 13px; text-align: center;
  cursor: help; background: #FFFFFF;
}

/* cards de número (stat do Grafana, colorMode background) */
.stat {
  height: 100%; border-radius: var(--raio); color: #FFFFFF;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 10px 14px; text-align: center; min-width: 0;
}
.stat__nome {
  font-size: 11px; font-weight: 500; letter-spacing: .02em;
  opacity: .88; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stat__valor { font-size: 27px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }

/* tabela */
.tabela-rolo { height: 100%; overflow: auto; }
table.dados { width: 100%; border-collapse: collapse; font-size: 11.5px; }
table.dados th {
  position: sticky; top: 0; background: #FFFFFF; z-index: 1;
  text-align: left; font-weight: 600; color: var(--neutro-600); font-size: 10px;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 6px 5px; border-bottom: 1px solid var(--neutro-200); white-space: nowrap;
}
table.dados td { padding: 5px 5px; border-bottom: 1px solid var(--neutro-100); vertical-align: middle; }
table.dados tfoot td {
  font-weight: 700; border-top: 2px solid var(--neutro-200); border-bottom: none;
  background: var(--neutro-050); position: sticky; bottom: 0;
}
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.centro { text-align: center; }
.pilula {
  display: inline-block; padding: 2.5px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; color: #FFFFFF; white-space: nowrap;
}
.celula-medidor { position: relative; width: 78px; min-width: 78px; }
.celula-medidor__trilho {
  position: relative; height: 17px; border-radius: 5px;
  background: var(--neutro-100); overflow: hidden;
}
.celula-medidor__barra { position: absolute; inset: 0 auto 0 0; border-radius: 5px; }
.celula-medidor__texto {
  position: relative; font-size: 11px; font-weight: 700;
  line-height: 17px; text-align: center; color: var(--neutro-700);
}

/* legenda das séries */
.legenda { width: 100%; font-size: 11.5px; border-collapse: collapse; margin-top: 6px; }
.legenda th {
  text-align: right; font-weight: 600; color: var(--neutro-500); font-size: 10px;
  letter-spacing: .06em; text-transform: uppercase; padding: 3px 6px;
}
.legenda th:first-child { text-align: left; }
.legenda td { padding: 3px 6px; text-align: right; font-variant-numeric: tabular-nums; }
.legenda td:first-child { text-align: left; }
.legenda__cor { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 7px; }

/* estados */
.carregando, .vazio {
  display: flex; align-items: center; justify-content: center; height: 100%;
  color: var(--neutro-400); font-size: 12.5px; gap: 9px;
}
.girando {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid var(--neutro-200); border-top-color: var(--rosa-700);
  animation: gira .8s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }
body.ocupado .grade { opacity: .5; pointer-events: none; transition: opacity .15s; }

.erro {
  margin: 16px 0; padding: 14px 16px; border-radius: var(--raio);
  background: #FDECEC; border: 1px solid #F5C2C2; color: #8A1F1F; font-size: 13px;
}
.erro code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px; font-size: 12px; }

/* tooltip dos gráficos */
.tooltip {
  position: fixed; pointer-events: none; z-index: 200; display: none;
  background: var(--neutro-700); color: #FFFFFF; font-size: 11.5px;
  padding: 8px 11px; border-radius: 9px; box-shadow: 0 8px 24px rgba(0,0,0,.22);
  max-width: 260px;
}
.tooltip b { font-weight: 600; }
.tooltip__linha { display: flex; align-items: center; gap: 7px; justify-content: space-between; margin-top: 3px; }

/* rodapé */
.rodape {
  max-width: 1720px; margin: 0 auto; padding: 8px 24px 32px;
  font-size: 11.5px; color: var(--neutro-500);
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
}

/* ===================== Login ===================== */

.login {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--neutro-100);
}
.login__caixa {
  width: 100%; max-width: 380px; background: #FFFFFF;
  border: var(--borda); border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(35,31,32,.09);
}
.login__faixa { height: 4px; background: linear-gradient(90deg, #231F20 0%, #FC019B 100%); }
.login__corpo { padding: 32px 30px 28px; }
.login__logo { height: 30px; margin-bottom: 22px; }
.login h1 { margin: 0 0 4px; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.login p.sub { margin: 0 0 22px; font-size: 12.5px; color: var(--neutro-600); }
.login label {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--neutro-600); margin-bottom: 6px;
}
.login input {
  width: 100%; font-family: var(--fonte); font-size: 15px;
  padding: 11px 13px; border-radius: 10px; border: var(--borda); background: #FFFFFF;
}
.login input:focus { outline: 2px solid var(--rosa-200); border-color: var(--rosa-400); }
.login button { width: 100%; margin-top: 16px; padding: 12px; font-size: 14px; }
.login__erro {
  margin-top: 13px; font-size: 12.5px; color: #8A1F1F;
  background: #FDECEC; border: 1px solid #F5C2C2; border-radius: 9px;
  padding: 9px 11px; display: none;
}
.login__rodape {
  margin-top: 20px; padding-top: 15px; border-top: var(--borda);
  font-size: 11px; color: var(--neutro-500); text-align: center;
}

/* ===================== Responsivo ===================== */

@media (max-width: 1180px) {
  .painel[data-col] { grid-column: span 12 !important; }
}
@media (max-width: 780px) {
  .topo__corpo, .filtros, .conteudo, .rodape { padding-left: 14px; padding-right: 14px; }
  .topo { position: static; }
  .topo__corpo { gap: 10px; padding-top: 12px; padding-bottom: 12px; }
  .topo__titulos { flex: 1 1 100%; }
  .topo__titulos h1 { font-size: 16px; }
  .topo__acoes { flex: 1 1 100%; flex-wrap: wrap; }
  .selo { font-size: 10px; padding: 4px 8px; }
  .grade { grid-auto-rows: 26px; }
  .painel[data-col] { grid-column: span 24 !important; }
  .campo, .multi__botao { min-width: 0; width: 100%; }
  .campo { flex: 1 1 100%; }
  .stat__valor { font-size: 23px; }
}

@media print {
  .topo { position: static; }
  .filtros, .topo__acoes { display: none; }
  .painel { break-inside: avoid; }
  body { background: #FFFFFF; }
}

/* ===================== Painéis próprios do Farol ===================== */

.painel__resumo {
  margin-left: auto; font-size: 11.5px; font-weight: 400;
  color: var(--neutro-500); white-space: nowrap;
}
.painel__resumo b { font-weight: 700; color: var(--neutro-700); }

.campanha-nome {
  width: 40%; font-weight: 500;
  white-space: normal; overflow-wrap: anywhere; line-height: 1.3;
}
/* prefixos de nomenclatura repetem em toda linha e roubam a leitura */
.campanha-nome .prefixo { color: var(--neutro-400); font-weight: 400; }

.pilula--vazia {
  background: transparent !important; color: var(--neutro-500);
  border: 1px dashed var(--neutro-300); font-style: italic;
}

.marca {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  border: 1px solid currentColor; font-size: 10.5px; font-weight: 700;
  white-space: nowrap; background: #FFFFFF;
}

.aviso {
  height: 100%; display: flex; flex-direction: column; gap: 10px;
  overflow: auto; padding-right: 2px;
}
.aviso--faixa { flex-direction: row; gap: 22px; align-items: stretch; }
.aviso--faixa .aviso__lado {
  flex: 0 0 220px; display: flex; flex-direction: column;
  gap: 10px; justify-content: space-between;
}
.aviso--faixa .aviso__texto { flex: 1 1 auto; display: flex; flex-direction: column; gap: 7px; }
.aviso--faixa .aviso__num { margin-top: 0; border-top: none; padding-top: 0; }
@media (max-width: 780px) { .aviso--faixa { flex-direction: column; } }
.aviso__tag {
  align-self: flex-start;
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
  background: #FEF4E0; color: #8A5A00; border: 1px solid #F6DFB0;
}
.aviso p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--neutro-600); }
.aviso p b { color: var(--neutro-700); font-weight: 600; }
.aviso code {
  background: var(--neutro-100); border: var(--borda); border-radius: 4px;
  padding: 1px 5px; font-size: 11.5px;
}
.aviso__num {
  margin-top: auto; padding-top: 10px; border-top: var(--borda);
  display: flex; flex-direction: column; gap: 2px;
}
.aviso__num span { font-size: 11px; color: var(--neutro-500); }
.aviso__num b { font-size: 15px; font-weight: 700; color: var(--neutro-700); }

/* o botão do plano aprovado é um link, precisa parecer botão */
a.botao { text-decoration: none; display: inline-flex; align-items: center; }

/* ===================== Antes e depois da nossa entrada ===================== */

.heranca { height: 100%; display: flex; flex-direction: column; gap: 14px; justify-content: center; }

.heranca__barra {
  display: flex; height: 30px; border-radius: 8px; overflow: hidden;
  background: var(--neutro-100); border: var(--borda);
}
.heranca__parte {
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700; color: #FFFFFF;
  transition: width .25s;
}
.heranca__parte--antes {
  background: repeating-linear-gradient(45deg,
    var(--neutro-400), var(--neutro-400) 6px,
    var(--neutro-300) 6px, var(--neutro-300) 12px);
}
.heranca__parte--nossa { background: linear-gradient(90deg, var(--rosa-900), var(--rosa-700)); }

.heranca__nums {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.heranca__num {
  display: flex; flex-direction: column; gap: 1px;
  padding: 9px 12px; border-radius: 10px;
  border: var(--borda); background: var(--neutro-050);
}
.heranca__num--destaque {
  background: var(--rosa-050); border-color: var(--rosa-100);
}
.heranca__chave {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--neutro-600);
}
.heranca__chave i { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.heranca__num b { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.heranca__num--destaque b { color: var(--rosa-900); }
.heranca__num small { font-size: 10.5px; color: var(--neutro-500); }

@media (max-width: 900px) { .heranca__nums { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .heranca__nums { grid-template-columns: 1fr; } }

/* ===================== Verba por mês ===================== */

.meses {
  display: grid; gap: 10px; height: 100%;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  align-content: start; overflow: auto; padding-right: 2px;
}
.mes {
  display: flex; flex-direction: column; gap: 5px;
  padding: 11px 12px; border-radius: 11px;
  border: var(--borda); background: var(--neutro-050);
}
.mes--corrente {
  border-color: var(--rosa-300); background: var(--rosa-050);
  box-shadow: 0 0 0 1px var(--rosa-100);
}
.mes__topo { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.mes__nome { font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
.mes__estado {
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.mes__verba {
  font-size: 15px; font-weight: 700; letter-spacing: -.02em;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.mes__fonte {
  font-size: 8.5px; font-weight: 700; font-style: normal;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 1.5px 5px; border-radius: 4px;
}
.mes__fonte--planilha { background: var(--rosa-100); color: var(--rosa-900); }
.mes__fonte--banco { background: var(--neutro-200); color: var(--neutro-600); }
.mes__trilho {
  height: 7px; border-radius: 4px; background: var(--neutro-200);
  overflow: hidden; margin: 2px 0 3px;
}
.mes__barra { height: 100%; border-radius: 4px; transition: width .25s; }
.mes__linha {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 11.5px; color: var(--neutro-600);
}
.mes__linha b { font-weight: 600; color: var(--neutro-700); font-variant-numeric: tabular-nums; }
.mes__pct { font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin-top: 2px; }
.mes__aviso {
  font-size: 9.5px; color: #8A5A00; background: #FEF4E0;
  border: 1px solid #F6DFB0; border-radius: 5px; padding: 2px 6px;
  cursor: help; align-self: flex-start;
}

/* ===================== Filtros por painel ===================== */

.chips {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 14px; margin: 0 0 9px;
}
.chips:empty { display: none; }

.chips__grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.chips__rotulo {
  font-size: 9.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--neutro-400); margin-right: 1px;
}

.chip {
  --chip-cor: var(--neutro-500);
  font-family: var(--fonte); font-size: 11px; font-weight: 600;
  line-height: 1; cursor: pointer; white-space: nowrap;
  padding: 5px 9px; border-radius: 999px;
  border: 1px solid var(--neutro-200); background: #FFFFFF;
  color: var(--neutro-600);
  display: inline-flex; align-items: center; gap: 5px;
  transition: background .13s, border-color .13s, color .13s;
}
.chip::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--chip-cor); flex: 0 0 auto;
}
.chip--todos::before { display: none; }
.chip:hover { border-color: var(--neutro-300); background: var(--neutro-050); }

.chip--ativo {
  background: var(--neutro-700); border-color: var(--neutro-700); color: #FFFFFF;
}
.chip--ativo:hover { background: var(--neutro-900); border-color: var(--neutro-900); }
.chip--ativo::before { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .55); }
.chip--todos.chip--ativo { background: var(--rosa-700); border-color: var(--rosa-700); }

@media (max-width: 780px) {
  .chips { gap: 5px 10px; }
  .chip { font-size: 10.5px; padding: 4px 8px; }
}

/* ===================== Marca do Farol ===================== */

.topo__marca { display: flex; align-items: center; gap: 9px; }
.topo__farol { width: 28px; height: 28px; flex: 0 0 auto; display: block; }

.login__marca { display: flex; align-items: center; gap: 15px; margin-bottom: 22px; }
.login__farol { width: 58px; height: 58px; flex: 0 0 auto; display: block; }
.login__marca h1 { margin: 0 0 3px; }
.login__marca .sub { margin: 0; line-height: 1.45; }

@media (max-width: 780px) { .topo__farol { width: 24px; height: 24px; } }

/* ===================== Biblioteca de criativos ===================== */

.galeria {
  display: grid; gap: 14px; height: 100%; overflow: auto; padding-right: 2px;
  grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
  align-content: start;
}

.peca {
  margin: 0; cursor: pointer; display: flex; flex-direction: column; gap: 7px;
  border-radius: 12px; outline: none;
}
.peca:focus-visible { box-shadow: 0 0 0 3px var(--rosa-200); }

.peca__arte {
  position: relative; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden;
  background: var(--neutro-100); border: var(--borda);
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.peca:hover .peca__arte {
  transform: translateY(-2px);
  border-color: var(--rosa-300);
  box-shadow: 0 8px 22px rgba(35, 31, 32, .14);
}
.peca__arte img { width: 100%; height: 100%; object-fit: cover; display: block; }
.peca__vazia {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--neutro-400);
}

.peca__formato {
  position: absolute; left: 7px; bottom: 7px;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #FFFFFF; padding: 3px 7px; border-radius: 999px;
}
.peca__uso {
  position: absolute; right: 7px; top: 7px;
  font-size: 10px; font-weight: 700; color: var(--neutro-700);
  background: rgba(255, 255, 255, .93); border-radius: 999px; padding: 2.5px 7px;
}

.peca figcaption { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.peca figcaption b {
  font-size: 12px; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.peca figcaption small {
  font-size: 10.5px; color: var(--neutro-500);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- lightbox --- */
.lightbox { position: fixed; inset: 0; z-index: 300; display: flex;
  align-items: center; justify-content: center; padding: 24px; }
.lightbox[hidden] { display: none; }
.lightbox__fundo { position: absolute; inset: 0; background: rgba(35, 31, 32, .62); }
.lightbox__caixa {
  position: relative; background: #FFFFFF; border-radius: 16px;
  max-width: 860px; width: 100%; max-height: 88vh; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}
.lightbox__x {
  position: absolute; right: 10px; top: 10px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  border: var(--borda); background: #FFFFFF; color: var(--neutro-600);
  font-size: 20px; line-height: 1; font-family: var(--fonte);
}
.lightbox__x:hover { background: var(--neutro-100); }
.lightbox__corpo { display: grid; grid-template-columns: 300px 1fr; max-height: 88vh; }
.lightbox__arte { background: var(--neutro-100); display: flex; align-items: center; }
.lightbox__arte img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox__info { padding: 26px 28px; overflow: auto; }
.lightbox__info h3 { margin: 10px 0 8px; font-size: 18px; font-weight: 700; letter-spacing: -.015em; }
.lightbox__copy {
  margin: 0 0 16px; font-size: 13px; line-height: 1.55; color: var(--neutro-600);
  white-space: pre-wrap;
}
.lightbox__info dl {
  margin: 0 0 16px; display: grid; grid-template-columns: auto 1fr;
  gap: 5px 14px; font-size: 12px;
}
.lightbox__info dt {
  color: var(--neutro-500); font-weight: 600; font-size: 10.5px;
  letter-spacing: .05em; text-transform: uppercase; padding-top: 1px;
}
.lightbox__info dd { margin: 0; color: var(--neutro-700); overflow-wrap: anywhere; }

@media (max-width: 720px) {
  .lightbox__corpo { grid-template-columns: 1fr; }
  .lightbox__arte { max-height: 34vh; }
  .lightbox__info { padding: 18px; }
}

/* Troca de plano: some com os números do plano anterior em vez de deixá-los
   na tela sob o nome do novo — contra o banco real a carga leva segundos. */
body.trocando .conteudo { position: relative; min-height: 300px; }
body.trocando .grade,
body.trocando .secao { visibility: hidden; }
body.trocando .conteudo::after {
  content: 'Carregando o plano…';
  position: absolute; inset: 0; padding-top: 80px;
  display: flex; align-items: flex-start; justify-content: center;
  font-size: 13px; color: var(--neutro-500);
}
body.trocando .conteudo::before {
  content: ''; position: absolute; left: 50%; top: 46px;
  width: 22px; height: 22px; margin-left: -11px; border-radius: 50%;
  border: 2.5px solid var(--neutro-200); border-top-color: var(--rosa-700);
  animation: gira .8s linear infinite;
}

/* estado vazio da biblioteca — voltado para o cliente, não para o time técnico */
.galeria-vazia {
  height: 100%; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; gap: 9px; padding: 20px;
  overflow: auto;
}
.galeria-vazia__icone {
  width: 54px; height: 54px; border-radius: 14px; display: flex;
  align-items: center; justify-content: center; font-size: 24px;
  background: var(--rosa-050); color: var(--rosa-400); border: 1px solid var(--rosa-100);
}
.galeria-vazia h3 { margin: 4px 0 0; font-size: 15.5px; font-weight: 700; }
.galeria-vazia p {
  margin: 0; font-size: 12.5px; color: var(--neutro-600);
  max-width: 460px; line-height: 1.5;
}
.galeria-vazia .botao { margin-top: 4px; }
.galeria-vazia small {
  font-size: 11px; color: var(--neutro-500); max-width: 440px; line-height: 1.45;
}
.galeria-vazia details { margin-top: 6px; font-size: 11.5px; color: var(--neutro-500); }
.galeria-vazia summary { cursor: pointer; color: var(--neutro-600); }
.galeria-vazia details p { margin-top: 7px; font-size: 11.5px; }
.galeria-vazia code {
  background: var(--neutro-100); border: var(--borda); border-radius: 4px;
  padding: 1px 5px; font-size: 11px;
}
.resumo__link { color: var(--rosa-700); text-decoration: none; font-weight: 600; }
.resumo__link:hover { text-decoration: underline; }

/* alerta de inconsistência entre as duas fontes de gasto do painel */
.alerta {
  margin: 16px 0; padding: 13px 16px; border-radius: var(--raio);
  background: #FEF4E0; border: 1px solid #F6DFB0; border-left: 5px solid #D9932B;
  color: #6B4405; font-size: 12.5px; line-height: 1.55;
}
.alerta code {
  background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px; font-size: 11.5px;
}

/* total somado no cabeçalho da seção de campanhas */
.secao__total {
  margin-left: auto; font-size: 11.5px; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--neutro-600);
  white-space: nowrap;
}
.secao__total b { font-weight: 600; color: var(--neutro-700); }
.secao__soma {
  background: var(--rosa-050); border: 1px solid var(--rosa-100);
  border-radius: 999px; padding: 2px 10px; color: var(--rosa-900); font-weight: 700;
}
.secao:has(.secao__total)::after { display: none; }

/* aviso de gasto misturado, em duas colunas comparáveis */
.alerta__par {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0;
}
.alerta__certo, .alerta__errado {
  display: flex; flex-direction: column; gap: 1px;
  padding: 9px 12px; border-radius: 9px; background: rgba(255,255,255,.75);
}
.alerta__certo { border: 1px solid var(--positivo); }
.alerta__errado { border: 1px solid #E0B24A; }
.alerta__par span { font-size: 10.5px; opacity: .8; }
.alerta__par b { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.alerta__par small { font-size: 10.5px; opacity: .8; }
@media (max-width: 760px) { .alerta__par { grid-template-columns: 1fr; } }

/* ===================== Backlog (uso interno) ===================== */

.regras { background: #FFFFFF; border: var(--borda); border-radius: var(--raio); padding: 18px 22px; }
.regras__nota {
  margin: 0 0 14px; font-size: 12.5px; color: var(--neutro-600);
  background: var(--rosa-050); border: 1px solid var(--rosa-100);
  border-radius: 9px; padding: 10px 13px; line-height: 1.55;
}
.regras__lista { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 11px; }
.regras__lista li { font-size: 13px; line-height: 1.55; color: var(--neutro-600); }
.regras__lista li b { color: var(--neutro-700); }

.achado {
  background: #FFFFFF; border: var(--borda); border-radius: var(--raio);
  padding: 15px 18px; margin-bottom: 10px; border-left-width: 5px;
}
.achado--grave { border-left-color: var(--negativo); }
.achado--atencao { border-left-color: var(--alerta); }
.achado--info { border-left-color: var(--neutro-300); }
.achado__topo { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 7px; }
.achado__regra, .achado__plano {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--neutro-500);
}
.achado__plano {
  background: var(--neutro-100); border-radius: 999px; padding: 3px 9px;
  letter-spacing: .02em; text-transform: none; font-weight: 600;
}
.achado h3 { margin: 0 0 5px; font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.achado p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--neutro-600); }
.achado details { margin-top: 9px; font-size: 12px; }
.achado summary { cursor: pointer; color: var(--rosa-900); font-weight: 600; }
.achado ul { margin: 8px 0 0; padding-left: 18px; color: var(--neutro-600); }
.achado li { margin-bottom: 3px; font-variant-numeric: tabular-nums; }

.tudo-certo {
  background: #E8F7F0; border: 1px solid #B7E4D0; color: #0B6B4F;
  border-radius: var(--raio); padding: 18px; font-size: 13.5px; font-weight: 600;
  text-align: center;
}

/* balão de ajuda das bolinhas "?" — imediato, legível, e some no Esc */
.ajuda {
  position: fixed; z-index: 400; display: none;
  max-width: 340px; padding: 11px 14px; border-radius: 10px;
  background: var(--neutro-700); color: #FFFFFF;
  font-size: 12px; line-height: 1.5;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .26);
  pointer-events: none;
}
.dica { transition: background .12s, color .12s, border-color .12s; }
.dica:hover, .dica:focus-visible {
  background: var(--neutro-700); color: #FFFFFF; border-color: var(--neutro-700);
  outline: none;
}

/* bolinha rosa: campanha que rodou no gerenciador de outro produto */
.dica--rosa {
  border-color: var(--rosa-400); color: var(--rosa-700);
  background: var(--rosa-050); font-weight: 700;
}
.dica--rosa:hover, .dica--rosa:focus-visible {
  background: var(--rosa-700); border-color: var(--rosa-700); color: #FFFFFF;
}

/* ===================== De onde vem a verba ===================== */

.contexto { height: 100%; display: flex; flex-direction: column; gap: 11px; justify-content: center; }
.contexto__funil { display: flex; align-items: stretch; gap: 10px; }
.contexto__etapa {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px;
  padding: 11px 14px; border-radius: 11px;
  border: var(--borda); background: var(--neutro-050);
}
.contexto__etapa--antes {
  background: repeating-linear-gradient(45deg, #FAFAFA, #FAFAFA 8px, #F1F1F1 8px, #F1F1F1 16px);
  border-color: var(--neutro-300);
}
.contexto__etapa--nossa { background: var(--rosa-050); border-color: var(--rosa-200); }
.contexto__etapa span {
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--neutro-600);
}
.contexto__etapa b { font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.contexto__etapa--nossa b { color: var(--rosa-900); }
.contexto__etapa small { font-size: 10.5px; color: var(--neutro-500); }
.contexto__seta {
  display: flex; align-items: center; color: var(--neutro-300);
  font-size: 19px; flex: 0 0 auto;
}
.contexto__nota { margin: 0; font-size: 12px; color: var(--neutro-600); line-height: 1.5; }
.contexto__alerta {
  font-size: 12px; line-height: 1.5; color: #6B4405;
  background: #FEF4E0; border: 1px solid #F6DFB0; border-radius: 9px; padding: 9px 12px;
}
@media (max-width: 860px) {
  .contexto__funil { flex-direction: column; }
  .contexto__seta { transform: rotate(90deg); align-self: center; }
}

/* ── Backlog: incidente de invasão (regra 6) ──────────────────────────────
   Fica em card próprio, separado dos achados do dia: é registro fechado de
   uma coisa que já aconteceu, não pendência que some quando alguém arruma. */
.incidente {
  background: #FFFFFF; border: var(--borda); border-left: 3px solid var(--negativo);
  border-radius: var(--raio); padding: 18px 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.incidente__topo { display: flex; align-items: flex-start; gap: 14px; }
.incidente__selo {
  flex: none; font-size: 11px; font-weight: 600; letter-spacing: .02em;
  padding: 4px 10px; border-radius: 999px;
  background: #E8F7F0; color: #0B6B4F; border: 1px solid #B7E4D0;
}
.incidente__titulo { font-size: 15px; line-height: 1.5; color: var(--neutro-700); }
.incidente__titulo b { color: var(--negativo); }
.incidente__sub {
  font-size: 12.5px; line-height: 1.6; color: var(--neutro-500); margin-top: 5px;
}
.incidente__tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.incidente__tabela th {
  text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--neutro-500);
  padding: 0 0 7px; border-bottom: var(--borda);
}
.incidente__tabela th.num, .incidente__tabela td.num { text-align: right; }
.incidente__tabela td { padding: 8px 0; border-bottom: 1px solid var(--neutro-100); color: var(--neutro-600); }
.incidente__soma td { font-weight: 600; color: var(--neutro-700); border-bottom: none; }
.incidente__nota { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--neutro-500); }
.incidente__nota b { color: var(--neutro-700); }
.incidente__nota code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  background: var(--neutro-100); padding: 1px 5px; border-radius: 4px;
}

/* Cauda do total de campanhas: declara o que falta para fechar com o líquido
   do plano, em vez de deixar a diferença sem nome na tela (regras 3 e 7). */
.secao__nota {
  display: inline-block; margin-left: 10px; font-size: 11.5px;
  font-weight: 400; color: var(--neutro-500);
}

/* Cobertura da conferência: sem ela, "0 graves" é confiança sem lastro. */
.placar__cobertura { color: var(--neutro-500); font-weight: 400; }

/* Última atualização no header: a data tem que ser a da carga, não a do clique. */
.topo__atualizacao {
  margin: 3px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--neutro-500);
}
.topo__atraso { color: var(--alerta); font-weight: 600; }

/* Falhar fechado: produto com grave em aberto avisa antes de mostrar número.
   Melhor o cliente ler "estamos conferindo" do que acreditar num valor errado. */
.conferindo {
  margin: 0 0 18px; padding: 14px 18px;
  background: #FFF6F6; border: 1px solid #F5C2C2; border-left: 3px solid var(--negativo);
  border-radius: var(--raio); font-size: 13px; line-height: 1.6; color: #7A2020;
}
.conferindo b { color: #5E1414; }
.conferindo ul { margin: 8px 0 0; padding-left: 20px; }
.conferindo li { margin: 2px 0; }

/* Mês encerrado: gasto congelado, não recalculado (regra da Gabriela, 28/08).
   O selo é discreto de propósito — informa a origem sem competir com o valor. */
.mes__fixo {
  font-style: normal; font-size: 9.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--neutro-500); background: var(--neutro-100);
  border-radius: 4px; padding: 1px 5px; margin-left: 5px; vertical-align: 1px;
}

/* ── Cofre do diagnóstico ─────────────────────────────────────────────────
   Decisão da Gabriela (01/09/2026): o cliente não vê o painel se
   contradizendo. Divergência entre fontes, achados da conferência e fonte
   atrasada são assunto do time — e o corte é no servidor, não aqui: para
   sessão de leitura esses dados nem chegam ao navegador. */
.cofre { margin: 0 0 18px; }
.cofre__trava {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; text-align: left; cursor: pointer;
  background: var(--neutro-050, #FAFAFA); border: 1px dashed var(--neutro-300, #D4D4D4);
  border-radius: var(--raio); color: var(--neutro-600); font-family: inherit;
  transition: border-color .15s, background .15s;
}
.cofre__trava:hover { border-color: var(--rosa-700); background: #FFF7FC; }
.cofre__cadeado { font-size: 15px; flex: none; opacity: .55; }
.cofre__trava b { display: block; font-size: 13px; color: var(--neutro-700); }
.cofre__trava small { display: block; font-size: 11.5px; color: var(--neutro-500); margin-top: 2px; }
.cofre__form {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 16px; background: #FFF7FC;
  border: 1px solid var(--rosa-200, #F8C8E6); border-radius: var(--raio);
}
.cofre__form label { font-size: 12px; color: var(--neutro-600); }
.cofre__form input {
  flex: 1; min-width: 180px; padding: 8px 11px; font-family: inherit; font-size: 13px;
  border: var(--borda); border-radius: 8px; background: #FFF;
}
.cofre__form input:focus { outline: 2px solid var(--rosa-700); outline-offset: -1px; }
.cofre__erro { font-size: 12px; color: var(--negativo); font-weight: 600; }