/* =========================================================
   MAVIMAR — tema do painel
   Identidade tirada do logo e dos banners: verde-limão sobre
   preto, tipografia condensada pesada em caixa alta, pílulas.
   ========================================================= */

:root {
  /* marca — manual da Mavimar */
  --fucsia: #CC00A9;
  --fucsia-claro: #F42BCE;
  --fucsia-escuro: #9B0080;
  --roxo: #7B2FFF;
  --menta: #00C8B4;
  --ambar: #E88F00;
  --limao: #B5FF2D;
  --off-white: #FFF0FC;

  /* superficies: preto puxado para o violeta, que e onde a fucsia canta */
  --bg: #0B0710;
  --bg-2: #120C1A;
  --card: #17101F;
  --card-2: #1E1529;
  --borda: #2A1F38;
  --borda-forte: #3B2C4E;

  /* texto */
  --txt: #FFF0FC;
  --txt-2: #B9A8C4;
  --txt-3: #7D6E8A;

  /*
   * Semantica separada da marca de proposito: a fucsia identifica a Mavimar,
   * nao "coisa boa". Verde-menta e resultado positivo, ambar e atencao e
   * vermelho e problema — senao o rosa da marca viraria sinal de alerta.
   */
  --ok: var(--menta);
  --atencao: var(--ambar);
  --ruim: #FF4D6D;
  --info: var(--roxo);

  --r: 16px;
  --r-sm: 10px;
  --sombra: 0 1px 2px rgba(0,0,0,.5), 0 8px 28px rgba(0,0,0,.4);
  --brilho: 0 0 0 1px rgba(204,0,169,.28), 0 8px 32px rgba(204,0,169,.14);
  --brilho-ok: 0 0 0 1px rgba(0,200,180,.30), 0 8px 32px rgba(0,200,180,.14);

  --fonte-titulo: "Nunito", ui-sans-serif, system-ui, sans-serif;
  --fonte: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(900px 500px at 88% -8%, rgba(204,0,169,.10), transparent 60%),
    radial-gradient(700px 420px at -8% 104%, rgba(204,0,169,.06), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--txt);
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.tit {
  font-family: var(--fonte-titulo);
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: .95;
}

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ---------- barra superior ---------- */

.barra {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(8,9,11,.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borda);
}



/* topo: identidade à esquerda, filtros e ações à direita */
.barra-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.conta-nome { font-size: 13px; color: var(--txt-3); }
.grupo-filtros,
.grupo-acoes { display: flex; align-items: center; gap: 8px; }
.grupo-filtros { margin-left: auto; }

/* seletor de período */
.periodos {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 999px;
}
.periodos .btn {
  --bs-btn-padding-y: .3rem;
  --bs-btn-padding-x: .85rem;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--txt-2);
  border: 0;
}
.periodos .btn:hover { color: var(--txt); }
.periodos .btn[aria-pressed="true"] {
  background: var(--fucsia);
  color: #04140A;
}


/*
 * Logotipo. O manual usa a palavra MAVIMAR em caixa alta e peso alto, com o
 * descritor "moda fitness" logo abaixo, menor e em fucsia. Sem simbolo: a
 * marca se apoia na tipografia.
 */
.logo-mavimar {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
}

.logo-mavimar b {
  font-family: var(--fonte-titulo);
  font-weight: 900;
  font-size: 20px;
  color: var(--off-white);
  letter-spacing: .14em;
}

.logo-mavimar i {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .34em;
  color: var(--fucsia);
  margin-top: 4px;
}

.btn-marca {
  background: var(--fucsia);
  color: var(--off-white);
  font-weight: 700;
  border: 0;
  border-radius: 999px;
  padding: .45rem 1.1rem;
}
.btn-marca:hover { background: var(--fucsia-claro); color: #12000E; }
.btn-marca:disabled { opacity: .55; }

.btn-fantasma {
  background: transparent;
  color: var(--txt-2);
  border: 1px solid var(--borda-forte);
  border-radius: 999px;
  padding: .45rem 1rem;
  font-weight: 600;
  font-size: 14px;
}
.btn-fantasma:hover { color: var(--txt); border-color: var(--fucsia); }

/* ---------- cartões ---------- */

.cartao {
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid var(--borda);
  border-radius: var(--r);
  box-shadow: var(--sombra);
}

.cartao-metrica {
  padding: 18px;
  position: relative;
  overflow: hidden;
  height: 100%;
}
.cartao-metrica::after {
  /* traço diagonal do banner, discreto */
  content: "";
  position: absolute;
  right: -34px; top: -34px;
  width: 96px; height: 96px;
  background: var(--fucsia);
  opacity: .07;
  clip-path: polygon(28% 0, 100% 0, 72% 100%, 0 100%);
}
.cartao-metrica.destaque { box-shadow: var(--brilho-ok); border-color: rgba(0,200,180,.38); }

.m-rotulo {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--txt-3);
}
.m-valor {
  font-family: var(--fonte-titulo);
  font-size: 30px;
  margin: 8px 0 2px;
  line-height: 1;
}
/* "verde" aqui e resultado positivo — menta, nao a fucsia da marca. */
.m-valor.verde { color: var(--menta); }
.m-apoio { font-size: 13px; color: var(--txt-2); }

/* a frase que explica o número em português simples */
.explica {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px dashed var(--borda-forte);
  font-size: 13px;
  line-height: 1.5;
  color: var(--txt-2);
}
.explica b { color: var(--txt); font-weight: 600; }

.secao-tit {
  font-family: var(--fonte-titulo);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--txt);
  margin: 0;
}
.secao-sub { font-size: 13px; color: var(--txt-3); margin: 2px 0 0; }

/* ---------- funil ---------- */

.funil-linha {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--borda);
}
.funil-linha:last-child { border-bottom: 0; }
.funil-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.funil-nome { font-size: 14px; font-weight: 600; }
.funil-qtd { font-family: var(--fonte-titulo); font-size: 19px; }
.funil-trilho {
  height: 12px;
  background: var(--bg-2);
  border: 1px solid var(--borda);
  border-radius: 999px;
  overflow: hidden;
}
.funil-trilho > span {
  display: block; height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--fucsia-escuro), var(--fucsia));
  border-radius: 999px;
  /*
   * A barra cresce por scaleX, não por width: animar largura força
   * recálculo de layout a cada quadro. O resultado visual é o mesmo.
   */
  transform-origin: left center;
  transform: scaleX(var(--preenchido, 0));
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.funil-nota { font-size: 12px; color: var(--txt-3); }
.funil-nota b { color: var(--ruim); }

/* ---------- tabelas ---------- */

.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--txt-3);
  padding: 0 12px 10px;
  white-space: nowrap;
}
.tabela td { padding: 12px; border-top: 1px solid var(--borda); }
.tabela tbody tr:hover { background: rgba(255,255,255,.02); }
.tabela .dir { text-align: right; }
.tabela .forte { font-weight: 600; }

.mini {
  width: 46px; height: 46px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--bg-2);
  border: 1px solid var(--borda);
}

.chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: var(--card-2);
  border: 1px solid var(--borda-forte);
  color: var(--txt-2);
}
.chip.on { background: rgba(204,0,169,.14); border-color: rgba(204,0,169,.4); color: var(--fucsia); }

/* barra dentro da célula, para comparar visualmente */
.mini-barra {
  height: 6px;
  border-radius: 999px;
  background: var(--bg-2);
  overflow: hidden;
  margin-top: 5px;
}
.mini-barra > span { display: block; height: 100%; background: var(--fucsia); border-radius: 999px; }

/* ---------- avisos ---------- */

.aviso {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  font-size: 14px;
  border: 1px solid;
  margin-bottom: 12px;
}
.aviso .ic { font-size: 17px; line-height: 1.2; }
.aviso.atencao { background: rgba(232,143,0,.10); border-color: rgba(232,143,0,.38); color: #F5C77A; }
.aviso.ruim { background: rgba(255,77,109,.10); border-color: rgba(255,77,109,.38); color: #FFA8B9; }
.aviso.bom { background: rgba(0,200,180,.10); border-color: rgba(0,200,180,.38); color: #7EE8DB; }

/* ---------- gráfico ---------- */

.caixa-grafico { position: relative; height: 300px; }
.caixa-grafico canvas { max-height: 300px; }

.vazio {
  padding: 40px 20px;
  text-align: center;
  color: var(--txt-3);
  font-size: 14px;
}

/* ---------- login ---------- */

.login-fundo {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-caixa {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid var(--borda);
  border-radius: 20px;
  /* brilho contido: o cartão não deve competir com o campo em foco */
  box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.45);
  padding: 36px 32px 32px;
}

.login-caixa .logo-mavimar { margin-bottom: 26px; align-items: center; }

.login-caixa h1 {
  font-family: var(--fonte-titulo);
  font-size: clamp(24px, 6vw, 30px);
  text-transform: uppercase;
  /* o título tem duas linhas: sem isto elas ficam soltas uma da outra */
  line-height: 1.06;
  letter-spacing: -.015em;
  margin: 0 0 10px;
}

.login-caixa .apoio {
  color: var(--txt-2);
  font-size: 14.5px;
  line-height: 1.5;
  margin: 0 0 24px;
}

.campo {
  width: 100%;
  padding: 13px 16px;
  font-family: inherit;
  font-size: 15px;
  color: var(--txt);
  background: var(--bg-2);
  border: 1px solid var(--borda-forte);
  border-radius: 12px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.campo::placeholder { color: var(--txt-3); }
.campo:focus {
  border-color: var(--fucsia);
  box-shadow: 0 0 0 3px rgba(204,0,169,.16);
}

/* o botão precisa da mesma largura do campo — sem Bootstrap aqui */
.login-caixa 
/*
 * Logotipo. O manual usa a palavra MAVIMAR em caixa alta e peso alto, com o
 * descritor "moda fitness" logo abaixo, menor e em fucsia. Sem simbolo: a
 * marca se apoia na tipografia.
 */
.logo-mavimar {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
}

.logo-mavimar b {
  font-family: var(--fonte-titulo);
  font-weight: 900;
  font-size: 20px;
  color: var(--off-white);
  letter-spacing: .14em;
}

.logo-mavimar i {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .34em;
  color: var(--fucsia);
  margin-top: 4px;
}

.btn-marca {
  width: 100%;
  margin-top: 12px;
  padding: 13px 16px;
  font-size: 15px;
  border-radius: 12px;
}

/* espaço reservado: a caixa não pode pular de altura ao errar a senha */
.erro {
  margin-top: 10px;
  min-height: 20px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ruim);
}

.login-rodape {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--borda);
  font-size: 12px;
  color: var(--txt-3);
  text-align: center;
}

/* ---------- rodapé ---------- */

.rodape {
  padding: 30px 20px 48px;
  text-align: center;
  color: var(--txt-3);
  font-size: 12px;
}

.carregando { opacity: .4; transition: opacity .2s; }

@media (max-width: 576px) {
  .m-valor { font-size: 26px; }
  .caixa-grafico { height: 240px; }
}

/* =========================================================
   Camadas de decisão — abas, veredito e plano de ação
   ========================================================= */

.aba b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--txt-2);
}
.aba span { display: block; font-size: 11.5px; color: var(--txt-3); }
.aba:hover b { color: var(--txt); }
.aba.ativa b { color: var(--fucsia); }
.aba.ativa span { color: var(--txt-2); }

/* campo de margem */
.campo-margem {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--txt-3);
  cursor: text;
}
.campo-margem input {
  width: 46px;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--fucsia);
  font-weight: 700;
  font-size: 14px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/*
 * Veredito: a resposta antes de qualquer gráfico.
 * O estado é comunicado pelo selo e por um brilho de fundo na cor
 * correspondente. Antes havia também uma tarja lateral grossa — era
 * redundante com o selo e é um clichê visual de painel genérico.
 */
.veredito { position: relative; overflow: hidden; }
.veredito::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 140% at 0% 0%, var(--tom-estado, transparent), transparent 58%);
  opacity: .16;
  pointer-events: none;
}
.veredito.bom { --tom-estado: var(--menta); }
.veredito.atencao { --tom-estado: var(--atencao); }
.veredito.ruim { --tom-estado: var(--ruim); }
.veredito.neutro { --tom-estado: var(--info); }

.veredito .selo {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.veredito.bom .selo { background: rgba(0,200,180,.15); color: var(--menta); }
.veredito.atencao .selo { background: rgba(232,143,0,.15); color: var(--atencao); }
.veredito.ruim .selo { background: rgba(255,77,109,.15); color: var(--ruim); }
.veredito.neutro .selo { background: rgba(123,47,255,.18); color: #A882FF; }

.veredito h2 {
  font-family: var(--fonte-titulo);
  font-size: 24px;
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0 0 12px;
}
.veredito p { font-size: 15.5px; line-height: 1.65; color: var(--txt-2); margin: 0; }
.veredito p b { color: var(--txt); }

/* plano de ação numerado */
.plano { list-style: none; counter-reset: p; padding: 0; margin: 0; }
.plano li {
  counter-increment: p;
  position: relative;
  padding: 14px 0 14px 46px;
  border-top: 1px solid var(--borda);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--txt-2);
}
.plano li:first-child { border-top: 0; }
.plano li::before {
  content: counter(p);
  position: absolute;
  left: 0; top: 13px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: var(--fucsia);
  color: #04140A;
  border-radius: 50%;
  font-weight: 800;
  font-size: 13px;
}
.plano li b { color: var(--txt); }
.plano li .porque { display: block; margin-top: 4px; font-size: 13px; color: var(--txt-3); }

/* barra de meta: onde estamos contra o mínimo para dar lucro */
.meta-barra {
  position: relative;
  height: 30px;
  background: var(--bg-2);
  border: 1px solid var(--borda);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 10px;
}
.meta-barra .preench { height: 100%; background: linear-gradient(90deg, var(--fucsia-escuro), var(--fucsia)); }
.meta-barra .preench.abaixo { background: linear-gradient(90deg, #B33A30, var(--ruim)); }
.meta-barra .corte {
  position: absolute; top: -2px; bottom: -2px;
  width: 2px; background: var(--txt);
}
.meta-barra .corte::after {
  content: attr(data-txt);
  position: absolute;
  top: 50%; left: 7px;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 700;
  color: var(--txt);
  white-space: nowrap;
}

/* ---------- mídia de criativos e produtos ---------- */

.thumb {
  width: 62px; height: 62px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--bg-2);
  border: 1px solid var(--borda);
  cursor: zoom-in;
  transition: transform .15s, border-color .15s;
}
.thumb:hover { transform: scale(1.06); border-color: var(--fucsia); }
.thumb.vazia { cursor: default; }

.thumb-caixa { position: relative; display: inline-block; line-height: 0; }
.selo-video {
  position: absolute;
  right: -5px; bottom: -5px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: var(--fucsia);
  color: #04140A;
  border-radius: 50%;
  font-size: 10px;
  border: 2px solid var(--card);
}

.esgotado {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ruim);
}

/* ampliação */
.lupa {
  position: fixed; inset: 0;
  z-index: 2000;
  display: none;
  place-items: center;
  padding: 28px;
  background: rgba(4,6,8,.9);
  backdrop-filter: blur(6px);
}
.lupa.aberta { display: grid; }
.lupa img, .lupa video {
  max-width: min(720px, 92vw);
  max-height: 86vh;
  border-radius: 14px;
  border: 1px solid var(--borda-forte);
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.lupa .legenda {
  margin-top: 14px;
  text-align: center;
  color: var(--txt-2);
  font-size: 14px;
}
.lupa .legenda b { color: var(--txt); display: block; font-size: 15px; margin-bottom: 3px; }
.lupa .fechar {
  position: absolute; top: 18px; right: 22px;
  background: transparent; border: 0;
  color: var(--txt-2); font-size: 30px; line-height: 1; cursor: pointer;
}
.lupa .fechar:hover { color: var(--txt); }

/* =========================================================
   CELULAR
   O painel é consultado no telefone com frequência. O que
   estraga a leitura ali não é largura — é o cabeçalho fixo
   comendo metade da tela e a tipografia em escala de desktop.
   ========================================================= */

@media (max-width: 768px) {

  body { font-size: 14.5px; }

  /*
   * O cabeçalho inteiro deixa de ser fixo: só a faixa de abas gruda.
   * Assim a navegação continua a um toque, mas o topo não rouba
   * 40% da tela em cada rolagem.
   */
  /*
   * A barra continua grudada, mas desliza para cima até restar só o
   * índice. Deixá-la estática fazia as abas saírem da tela junto com o
   * cabeçalho (sticky não escapa do próprio pai); e mantê-la inteira
   * comeria 40% do celular.
   */
  .barra { top: calc(-1 * var(--h-topo, 96px)); }
  .barra > .container-xl:first-child { padding: 12px 16px 10px; gap: 10px !important; }


  /*
   * Duas linhas: identidade e ações em cima, filtros embaixo.
   * Tentei antes ordenar os controles soltos com `display: contents`,
   * mas o logo somado aos botões não cabia em 375px e o topo virava
   * três linhas. Agrupar no HTML resolve de vez.
   */
  .barra-topo { padding: 12px 16px 10px; gap: 8px 10px; }
  .conta-nome { display: none; }

  .grupo-acoes { margin-left: auto; }
  .grupo-filtros {
    order: 3;
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;   /* se não couber lado a lado, cai para a linha seguinte */
  }
  /* min-width 0 deixa o grupo encolher: sem isso o flex respeita o
     tamanho do conteúdo e os botões vazam para fora da tela */
  .periodos { flex: 1 1 190px; min-width: 0; justify-content: space-between; }
  .periodos .btn { flex: 1 1 auto; padding: 5px 6px; font-size: 12px; }

  /* abas: uma linha só, roláveis, grudadas no topo */
  .abas {
    position: relative;
    z-index: 1031;
    background: rgba(8,9,11,.94);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--borda);
    /*
     * A faixa precisa encostar nas bordas da tela, mas está dentro de um
     * .container-xl que já tem recuo. Usar um valor fixo aqui estoura a
     * largura: a compensação tem de ser exatamente o gutter do Bootstrap.
     */
    margin-inline: calc(var(--bs-gutter-x, 1.5rem) / -2);
    padding-inline: calc(var(--bs-gutter-x, 1.5rem) / 2);
    scrollbar-width: none;
  }
  .abas::-webkit-scrollbar { display: none; }
  .aba { padding: 9px 14px 10px; }
  .aba b { font-size: 13px; }
  .aba span { display: none; } /* o subtítulo não cabe e não é essencial */

  main { padding: 16px 16px 8px !important; }
  section { margin-bottom: 18px !important; }
  .cartao { border-radius: 14px; }
  .p-4 { padding: 16px !important; }

  /* veredito: a peça mais importante da tela */
  .veredito h2 { font-size: 19px; }
  .veredito p { font-size: 14.5px; line-height: 1.55; }
  .veredito .selo { font-size: 10px; padding: 3px 10px; }

  /* números: 2 por linha continuam legíveis com o corpo menor */
  .cartao-metrica { padding: 14px; }
  .m-rotulo { font-size: 10.5px; letter-spacing: .05em; }
  .m-valor { font-size: 21px; margin: 6px 0 2px; }
  .m-apoio { font-size: 11.5px; line-height: 1.35; }
  .explica { font-size: 12px; margin-top: 9px; padding-top: 8px; }
  .cartao-metrica::after { width: 62px; height: 62px; right: -22px; top: -22px; }

  .secao-tit { font-size: 13.5px; }
  .secao-sub { font-size: 12px; }

  .caixa-grafico { height: 240px !important; }

  /* funil: rótulo e número em cima, barra embaixo — não espreme */
  .funil-nome { font-size: 13px; }
  .funil-qtd { font-size: 16px; }
  .funil-nota { font-size: 11px; }

  /* plano de ação */
  .plano li { padding: 12px 0 12px 38px; font-size: 13.5px; }
  .plano li::before { width: 24px; height: 24px; font-size: 12px; top: 11px; }
  .plano li .porque { font-size: 12px; }

  /*
   * Tabelas rolam na horizontal. A sombra à direita avisa que há
   * mais coluna — sem ela o dedo não descobre sozinho.
   */
  .table-responsive, .rolagem {
    background:
      linear-gradient(to right, var(--card) 30%, rgba(20,23,28,0)),
      linear-gradient(to left, var(--card) 30%, rgba(20,23,28,0)) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.4), transparent),
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.4), transparent) 100% 0;
    background-repeat: no-repeat;
    background-size: 32px 100%, 32px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
  }
  .tabela { font-size: 13px; }
  .tabela th { font-size: 10px; padding: 0 8px 8px; }
  .tabela td { padding: 9px 8px; }
  .thumb { width: 46px; height: 46px; }

  .rodape { padding: 18px 16px 30px; font-size: 11.5px; }

  /* ampliação ocupa a tela toda no celular */
  .lupa { padding: 16px; }
  .lupa img, .lupa video { max-width: 96vw; max-height: 72vh; }
  .lupa .fechar { top: 10px; right: 14px; font-size: 34px; }
}

/* telas bem estreitas: um número por linha lê melhor que dois espremidos */
@media (max-width: 400px) {
  .m-valor { font-size: 19px; }
  .aba b { font-size: 12.5px; }
  .veredito h2 { font-size: 17.5px; }
}

/* =========================================================
   Blocos numa página só
   As três camadas continuam separadas, mas por hierarquia
   visual em vez de abas: nada fica escondido atrás de um
   clique que o leitor talvez nunca dê.
   ========================================================= */

.bloco { margin-bottom: 44px; scroll-margin-top: 70px; }

.bloco-cab {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 0 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--borda);
}
.bloco-num {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--fucsia);
  color: #04140A;
  font-family: var(--fonte-titulo);
  font-size: 15px;
}
.bloco-cab h2 {
  font-family: var(--fonte-titulo);
  font-size: 21px;
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin: 0 0 3px;
  line-height: 1.1;
}
.bloco-cab p { margin: 0; font-size: 13.5px; color: var(--txt-3); line-height: 1.45; }

/* o primeiro bloco começa colado no topo: já é o assunto da página */
.bloco:first-child .bloco-cab { padding-top: 4px; }

/* índice de atalho */
.abas .aba { padding: 11px 16px 12px; }
.abas .aba b { font-size: 14px; }

@media (max-width: 768px) {
  .bloco { margin-bottom: 30px; scroll-margin-top: 56px; }
  .bloco-cab { padding: 16px 0 14px; margin-bottom: 14px; gap: 11px; }
  .bloco-cab h2 { font-size: 17px; }
  .bloco-cab p { font-size: 12.5px; }
  .bloco-num { width: 28px; height: 28px; font-size: 13px; }
}

/* ==========================================================================
   DETALHAMENTO DE CAMPANHA  —  campanha › conjunto › anúncio

   A régua muda a cada nível, porque a pergunta muda. Na campanha, a
   referência é o ponto de equilíbrio: "isso paga?". No anúncio, é a mediana
   do próprio conjunto: "qual criativo ganha, com a audiência constante?".
   Comparar anúncio contra a conta inteira confundiria criativo com público.

   É o único lugar da tela com peso visual. Todo o resto aqui é contido de
   propósito — a régua só se destaca porque nada ao redor disputa com ela.
   ========================================================================== */

.drill-cab {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.drill-conta {
  font-size: 12.5px;
  color: var(--txt-3);
  text-align: right;
  line-height: 1.5;
  padding-top: 2px;
}

.drill-conta b { color: var(--txt-2); font-weight: 600; }
.drill-conta .parado { color: var(--atencao); }

/* ---------- linha de campanha ---------- */

.drill-item { border-top: 1px solid var(--borda); }
.drill-item:first-child { border-top: 0; }

/*
 * A linha inteira é o botão. Alvo grande vale mais que um chevron pequeno,
 * sobretudo no celular, onde esta tabela era o pior bloco do painel.
 */
.drill-linha {
  width: 100%;
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 16px 4px;
  background: none;
  border: 0;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.drill-linha:hover { background: rgba(204, 0, 169, .05); }
.drill-linha:focus-visible {
  outline: 2px solid var(--fucsia);
  outline-offset: -2px;
  border-radius: var(--r-sm);
}

.drill-seta {
  width: 18px;
  color: var(--txt-3);
  font-size: 11px;
  transition: transform .18s ease, color .18s ease;
}

.drill-linha[aria-expanded="true"] .drill-seta {
  transform: rotate(90deg);
  color: var(--fucsia);
}

.drill-nome {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--txt);
  line-height: 1.35;
  /* Nome de campanha aqui tem 46 caracteres com colchetes; quebrar é melhor
     que truncar, porque a data no fim do nome é o que distingue duas. */
  overflow-wrap: anywhere;
}

.drill-sub {
  font-size: 12.5px;
  color: var(--txt-3);
  margin-top: 4px;
  line-height: 1.5;
}

.drill-sub .sep { opacity: .4; padding: 0 2px; }

/* ---------- a régua ---------- */

.regua {
  display: grid;
  grid-template-columns: auto 132px;
  align-items: center;
  gap: 12px;
  justify-items: end;
}

.regua-valor {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 19px;
  line-height: 1;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.regua-valor.acima { color: var(--menta); }
.regua-valor.abaixo { color: var(--ruim); }
.regua-valor.neutro { color: var(--txt-3); }

.regua-legenda {
  display: block;
  font-family: var(--fonte);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--txt-3);
  margin-top: 5px;
}

.regua-trilho {
  position: relative;
  width: 132px;
  height: 6px;
  background: var(--card-2);
  border-radius: 999px;
  overflow: visible;
}

.regua-preench {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: var(--menta);
}

.regua-preench.abaixo { background: var(--ruim); }

/* O corte é a referência. Fica acima do preenchimento para nunca sumir. */
.regua-corte {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--off-white);
  opacity: .55;
}

.regua-corte::after {
  content: attr(data-txt);
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--txt-3);
  white-space: nowrap;
}

/* ---------- níveis internos ---------- */

.drill-dentro {
  padding: 4px 0 22px 32px;
  /* Fio vertical: mostra que o que está aqui pertence à linha acima. */
  border-left: 1px solid var(--borda);
  margin-left: 8px;
}

.drill-rotulo {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--txt-3);
  margin: 10px 0 8px;
}

.drill-rotulo em {
  font-style: normal;
  color: var(--menta);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

.drill-conjunto { border-top: 1px solid var(--borda); }
.drill-conjunto:first-of-type { border-top: 0; }

.drill-conjunto .drill-linha { padding: 12px 4px; }
.drill-conjunto .drill-nome { font-size: 13.5px; font-weight: 500; }
.drill-conjunto .regua-valor { font-size: 16px; }

/* ---------- anúncios ---------- */

.anuncio {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 9px 4px;
}

.anuncio + .anuncio { border-top: 1px solid rgba(42, 31, 56, .55); }

.anuncio-foto {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--card-2);
  border: 1px solid var(--borda);
}

.anuncio-nome {
  font-size: 13px;
  color: var(--txt-2);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.anuncio-dados { font-size: 11.5px; color: var(--txt-3); margin-top: 3px; }

/*
 * O índice contra a mediana é o número que decide qual criativo recebe mais
 * verba, então é ele que ganha destaque — não o gasto, que só diz onde o
 * dinheiro já foi.
 */
.anuncio-indice {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 15px;
  text-align: right;
  white-space: nowrap;
}

.anuncio-indice.acima { color: var(--menta); }
.anuncio-indice.abaixo { color: var(--ruim); }
.anuncio-indice.medio { color: var(--txt-2); }
.anuncio-indice small {
  display: block;
  font-family: var(--fonte);
  font-size: 10px;
  font-weight: 500;
  color: var(--txt-3);
  margin-top: 2px;
  letter-spacing: .03em;
}

/* ---------- campanhas no ar que não entregaram ---------- */

/*
 * Grupo próprio, e não uma linha cinza no meio da lista: "no ar e sem
 * entregar" é um problema de operação, não um desempenho ruim. Misturar as
 * duas coisas faria a pessoa procurar o motivo no criativo.
 */
.drill-paradas {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px dashed rgba(232, 143, 0, .32);
  border-radius: var(--r-sm);
  background: rgba(232, 143, 0, .04);
}

.drill-paradas h3 {
  font-family: var(--fonte);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--atencao);
  margin: 0 0 4px;
}

.drill-paradas p { font-size: 12px; color: var(--txt-3); margin: 0 0 10px; }
.drill-paradas ul { margin: 0; padding: 0; list-style: none; }

.drill-paradas li {
  font-size: 12.5px;
  color: var(--txt-2);
  padding: 5px 0;
  border-top: 1px solid rgba(232, 143, 0, .14);
  overflow-wrap: anywhere;
}

.drill-paradas li:first-child { border-top: 0; }
.drill-paradas li span { color: var(--txt-3); }

.drill-carregando { font-size: 12.5px; color: var(--txt-3); padding: 12px 4px; }

@media (max-width: 720px) {
  .drill-linha { grid-template-columns: 16px 1fr; gap: 10px; row-gap: 10px; }
  /* A régua desce para a linha de baixo e ocupa a largura toda: espremê-la
     em 132px ao lado do nome tornaria o corte ilegível. */
  .regua { grid-column: 1 / -1; justify-items: start; grid-template-columns: auto 1fr; }
  .regua-trilho { width: 100%; }
  .drill-dentro { padding-left: 16px; }
  .drill-conta { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .drill-seta { transition: none; }
}

/* ==========================================================================
   ABAS  —  cinco assuntos, um de cada vez

   A objeção clássica a abas é que ninguém lê o que está fechado. Ela vale, e
   é respondida de duas formas aqui:

   1. A receita paga NÃO é uma aba. Fica na faixa acima delas, sempre visível,
      porque é o número que o relatório existe para corrigir.
   2. Uma aba com pendência ganha marcador. Não é enfeite: só aparece quando
      há decisão a tomar ali dentro — campanha no ar sem entregar, retorno
      abaixo do equilíbrio. Sem pendência, sem marcador.
   ========================================================================== */

/* ---------- faixa da tese ---------- */

.tese {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 26px;
  padding: 12px 0 14px;
  border-top: 1px solid var(--borda);
}

.tese-item { display: flex; align-items: baseline; gap: 8px; }

.tese-valor {
  font-family: var(--fonte-titulo);
  font-weight: 900;
  font-size: 21px;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--menta);
}

.tese-item.perdido .tese-valor { color: var(--ruim); font-size: 17px; font-weight: 800; }
.tese-item.neutro  .tese-valor { color: var(--txt-2); font-size: 17px; font-weight: 800; }

.tese-rotulo {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--txt-3);
}

.tese-vazio { font-size: 12.5px; color: var(--txt-3); }

/* ---------- barra de abas ---------- */

.abas {
  display: flex;
  gap: 2px;
  border-top: 1px solid var(--borda);
  overflow-x: auto;
  scrollbar-width: none;
}

.abas::-webkit-scrollbar { display: none; }

.aba {
  position: relative;
  flex: 0 0 auto;
  background: none;
  border: 0;
  color: var(--txt-3);
  font-family: var(--fonte);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 13px 16px 12px;
  cursor: pointer;
  white-space: nowrap;
  /* A borda existe sempre, transparente: sem ela o texto pularia 2px ao
     trocar de aba. */
  border-bottom: 2px solid transparent;
  transition: color .15s ease;
}

.aba:hover { color: var(--txt-2); }

.aba[aria-selected="true"] {
  color: var(--off-white);
  border-bottom-color: var(--fucsia);
}

.aba:focus-visible {
  outline: 2px solid var(--fucsia);
  outline-offset: -3px;
  border-radius: 4px 4px 0 0;
}

/*
 * Marcador de pendência. Âmbar, e não fúcsia: fúcsia é a marca e marca o que
 * está selecionado; misturar as duas faria a aba ativa parecer um alerta.
 */
.aba .pendencia {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--atencao);
  margin-left: 7px;
  vertical-align: 2px;
}

/* ---------- painéis ---------- */

.painel[hidden] { display: none; }

.painel {
  /* Sem animação de entrada: trocar de aba dez vezes por dia com um fade de
     200ms em cada troca vira ruído, não polimento. */
  outline: none;
}

.painel > section:first-child { margin-top: 0; }

@media (max-width: 720px) {
  .tese { gap: 4px 18px; padding: 10px 0 12px; }
  .tese-valor { font-size: 18px; }
  .tese-item.perdido .tese-valor,
  .tese-item.neutro .tese-valor { font-size: 15px; }
  .aba { padding: 12px 12px 11px; font-size: 13px; }
}

/* ---------- jornada ---------- */

.faixa-tempo { display: grid; gap: 10px; }

.faixa-linha {
  display: grid;
  grid-template-columns: 120px 1fr 52px;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.faixa-rotulo { color: var(--txt-2); }

.faixa-trilho {
  height: 10px;
  background: var(--card-2);
  border-radius: 999px;
  overflow: hidden;
}

.faixa-preench { height: 100%; background: var(--roxo); border-radius: 999px; }
.faixa-num { text-align: right; color: var(--txt-3); font-size: 12.5px; }

.caminho {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 11px 0;
  border-top: 1px solid var(--borda);
  font-size: 12.5px;
}

.caminho:first-child { border-top: 0; }

.caminho-passo {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--card-2);
  border: 1px solid var(--borda);
  color: var(--txt-2);
}

.caminho-passo.pago { border-color: rgba(204, 0, 169, .4); color: var(--fucsia-claro); }
.caminho-seta { color: var(--txt-3); font-size: 11px; }

.caminho-fim {
  margin-left: auto;
  color: var(--menta);
  font-weight: 700;
  white-space: nowrap;
}

.caminho-dias { color: var(--txt-3); font-weight: 400; margin-left: 8px; }

@media (max-width: 720px) {
  .faixa-linha { grid-template-columns: 92px 1fr 44px; font-size: 12px; }
  .caminho-fim { margin-left: 0; width: 100%; }
}

/* Aviso na faixa da tese: o número mais visível do painel não pode aparecer
   subestimado sem dizer. */
.tese-alerta {
  color: var(--atencao);
  font-weight: 700;
  letter-spacing: .06em;
}

/* ==========================================================================
   PERÍODO ESCOLHIDO À MÃO
   ========================================================================== */

.btn-escolher { white-space: nowrap; }

/*
 * Quando um período à mão está ativo, o botão passa a mostrar as datas. Um
 * "Escolher…" genérico ao lado de quatro atalhos apagados esconderia qual
 * recorte está no ar — e o relatório inteiro depende disso.
 */
.btn-escolher[aria-pressed="true"] { font-variant-numeric: tabular-nums; }

.escolher {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
  gap: 10px;
  padding: 14px;
  background: var(--card);
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-sm);
  box-shadow: var(--sombra);
}

.escolher[hidden] { display: none; }

.escolher label {
  display: grid;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--txt-3);
}

.escolher input[type="date"] {
  background: var(--bg-2);
  border: 1px solid var(--borda);
  border-radius: 8px;
  color: var(--txt);
  font-family: var(--fonte);
  font-size: 13.5px;
  padding: 8px 10px;
  color-scheme: dark; /* faz o seletor nativo do navegador vir escuro também */
}

.escolher input[type="date"]:focus-visible {
  outline: 2px solid var(--fucsia);
  outline-offset: 1px;
  border-color: transparent;
}

.escolher .btn-marca { padding: 9px 16px; }

.escolher-recado {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12px;
  color: var(--atencao);
  min-height: 0;
}

.escolher-recado:empty { display: none; }

.grupo-filtros { position: relative; }

@media (max-width: 720px) {
  .escolher {
    left: 0;
    right: 0;
    grid-template-columns: 1fr 1fr;
  }
  .escolher .btn-marca { grid-column: 1 / -1; }
}

/*
 * Métrica em que não dá para confiar agora. Apagada de propósito: um número
 * grande e nítido ao lado de um aviso pequeno é lido como verdade, e o aviso
 * some. Aqui o próprio número recua até a explicação ser lida.
 */
.cartao-metrica.sem-confianca { border-style: dashed; border-color: rgba(232, 143, 0, .38); }
.cartao-metrica.sem-confianca .m-valor { color: var(--txt-3); }

.m-suspeito {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--atencao);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(232, 143, 0, .2);
}