/* ==========================================================================
   Relatório "Análise de Métricas" — slides 842×595 (A4 paisagem, 1:1 Figma)
   Todas as classes têm prefixo rel- para não vazar no app.
   Fonte: Manrope (Google Fonts). O app deve carregar o <link> abaixo no <head>
   (o @import é só fallback para quando o CSS é aberto sozinho):
   https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=swap
   ========================================================================== */

.rel-slides, .rel-slide {
  /* tokens */
  --rel-tinta: #1a070e;          /* preto quente dos títulos */
  --rel-cinza: #555b58;          /* texto corrido */
  --rel-cinza-2: #4e5351;        /* números/labels */
  --rel-cinza-3: #454a47;        /* texto das pílulas */
  --rel-borda-cartao: #3d344d;
  --rel-borda-card: #949d96;
  --rel-card: #faf7f7;

  --rel-verde: #b3cfbb;  --rel-verde-borda: #949d96;
  --rel-lilas: #c3bee4;  --rel-lilas-borda: #998bb1;
  --rel-rosa:  #f4c2c5;  --rel-rosa-borda:  #bea1a3;
  --rel-azul:  #aad1d5;  --rel-azul-borda:  #8aa1a3;
  --rel-amarelo: #f4e8b0; --rel-amarelo-borda: #c7ba85;

  --rel-fundo-roxo: #7a669c;
  --rel-fundo-verde: #5f8068;
  --rel-fundo-escuro: #234537;

  --rel-fonte: "Manrope", "Inter", system-ui, sans-serif;
  --rel-img: /img/relatorio/;

  font-family: var(--rel-fonte);
  color: var(--rel-tinta);
  -webkit-font-smoothing: antialiased;
  line-height: 1.2;
}
.rel-slide, .rel-slide *, .rel-slide *::before, .rel-slide *::after { box-sizing: border-box; }
.rel-slide p { margin: 0; }
.rel-slide img { display: block; }
.rel-slide [contenteditable="true"] { outline: none; cursor: text; border-radius: 3px; }
.rel-slide [contenteditable="true"]:hover { box-shadow: 0 0 0 1.5px rgba(122, 102, 156, .35); }
.rel-slide [contenteditable="true"]:focus { box-shadow: 0 0 0 1.5px rgba(122, 102, 156, .9); background: rgba(195, 190, 228, .18); }

/* ---------- casca do slide ---------- */
.rel-slide {
  position: relative;
  width: 842px;
  height: 595px;
  overflow: hidden;
  background: var(--rel-fundo, var(--rel-fundo-verde));
  transform-origin: top left;
  flex: none;
}
.rel-cartao {
  position: absolute; left: 23px; top: 19.5px;
  width: 796px; height: 556px;
  background: #fff;
  border: 2px solid var(--rel-borda-cartao);
  border-radius: 36px;
}
.rel-slide--capa .rel-cartao, .rel-slide--contracapa .rel-cartao { background: #fffbfa; }
.rel-slide--divisor .rel-cartao { background: #79989c; border-color: #637c7f; }

.rel-flor   { position: absolute; left: 66px;  top: 46px;  width: 28px;  height: 28px; }
.rel-rotulo { position: absolute; right: 68px; top: 58px;  height: 8px;  width: auto; }
.rel-selos  { position: absolute; left: 66px;  top: 525px; width: 100px; height: 30px; }
.rel-logo   { position: absolute; left: 731px; top: 536px; width: 42px;  height: 16px; }
.rel-slide--divisor .rel-rotulo { filter: brightness(0) invert(1); }

/* textura de ruído por cima de tudo (soft-light, 30%) */
.rel-ruido {
  position: absolute; inset: 0; pointer-events: none;
  background: url("/img/relatorio/ruido.jpg") 0 0 / 380px 475px repeat;
  mix-blend-mode: soft-light; opacity: .3;
}

/* ---------- título com pílula + seta ---------- */
.rel-titulo {
  position: absolute; left: 0; right: 0; top: 56px;
  display: flex; justify-content: center; align-items: center; gap: 12px;
  font-weight: 800; font-size: 32.4px; color: var(--rel-tinta); white-space: nowrap;
}
.rel-titulo-pilula { display: flex; align-items: center; }
.rel-titulo-pilula > span {
  display: block; margin-right: -22px;
  padding: 7px 34px 9px 26px;
  border: 2.5px solid var(--rel-pb, var(--rel-verde-borda));
  background: var(--rel-pf, var(--rel-verde));
  border-radius: 999px; color: var(--rel-cinza-3);
}
.rel-titulo-pilula > img { width: 45px; height: 45px; position: relative; z-index: 1; }
.rel-titulo--mini { font-size: 21.6px; gap: 8px; }
.rel-titulo--mini .rel-titulo-pilula > span { padding: 5px 25px 6px 18px; margin-right: -16px; border-width: 1.7px; }
.rel-titulo--mini .rel-titulo-pilula > img { width: 30px; height: 30px; }

/* cores de pílula de título / card (--rel-pf fundo, --rel-pb borda) */
.rel-cor-verde   { --rel-pf: var(--rel-verde);   --rel-pb: var(--rel-verde-borda); }
.rel-cor-lilas   { --rel-pf: var(--rel-lilas);   --rel-pb: var(--rel-lilas-borda); }
.rel-cor-rosa    { --rel-pf: var(--rel-rosa);    --rel-pb: var(--rel-rosa-borda); }
.rel-cor-azul    { --rel-pf: var(--rel-azul);    --rel-pb: var(--rel-azul-borda); }
.rel-cor-amarelo { --rel-pf: var(--rel-amarelo); --rel-pb: var(--rel-amarelo-borda); }

/* pílulas pequenas: @arroba (lilás) e período (rosa) */
.rel-subs {
  position: absolute; left: 0; right: 0; display: flex; justify-content: center; gap: 6px;
  font-weight: 800; white-space: nowrap;
}
.rel-sub { border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
.rel-sub--arroba  { background: var(--rel-lilas); border: 2.25px solid #9688af; color: #4f475d; }
.rel-sub--periodo { background: #f4c1c4; border: 2.25px solid #b29395; color: #694e4f; }
.rel-subs--grande { font-size: 13.5px; }
.rel-subs--grande .rel-sub--arroba  { height: 39px; padding: 0 20px; }
.rel-subs--grande .rel-sub--periodo { height: 30px; padding: 0 20px; align-self: center; }
.rel-subs--mini { font-size: 9px; }
.rel-subs--mini .rel-sub { border-width: 1.5px; }
.rel-subs--mini .rel-sub--arroba  { height: 26px; padding: 0 12px; }
.rel-subs--mini .rel-sub--periodo { height: 20px; padding: 0 12px; align-self: center; }

.rel-intro {
  position: absolute; left: 60px; right: 60px; top: 132px;
  text-align: center; font-weight: 500; font-size: 12.5px; color: var(--rel-cinza); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- cards ---------- */
.rel-grade {
  position: absolute; display: grid; column-gap: 14px; row-gap: 16px;
}
.rel-grade--2 { left: 80px; top: 170px; grid-template-columns: 339px 339px; grid-auto-rows: 152px; }
.rel-grade--defs { left: 80px; top: 185px; grid-template-columns: 339px 339px; grid-auto-rows: 128px; row-gap: 12px; }
.rel-grade--gerais { left: 75px; top: 165px; grid-template-columns: 339px 339px; grid-auto-rows: 157px; }
.rel-grade--3 { left: 64px; top: 170px; grid-template-columns: repeat(3, 230px); grid-auto-rows: 158px; column-gap: 10px; row-gap: 12px; }

.rel-card {
  position: relative;
  background: var(--rel-card);
  border: 1.5px solid var(--rel-borda-card);
  border-radius: 15px;
}
.rel-card-pilula {
  position: absolute; left: -1.5px; top: -1.5px;
  display: inline-flex; align-items: center;
  padding: 7px 18px; border-radius: 999px;
  background: var(--rel-pf, var(--rel-verde)); border: 1.2px solid var(--rel-pb, var(--rel-verde-borda));
  color: var(--rel-cinza-3); font-weight: 800; font-size: 14px; white-space: nowrap; max-width: 100%;
}
.rel-card-pilula > span { overflow: hidden; text-overflow: ellipsis; }
.rel-grade--3 .rel-card-pilula { padding: 6px 14px; font-size: 12.5px; }
.rel-grade--defs .rel-card-pilula, .rel-grade--gerais .rel-card-pilula {
  padding: 0 12px; height: 33px; min-width: 146px; justify-content: center; font-size: 11.9px; color: var(--rel-cinza-2);
}
.rel-grade--gerais .rel-card-pilula { height: 30px; min-width: 128px; }

/* definições */
.rel-def-texto {
  position: absolute; left: 38px; top: 45px; width: 268px;
  font-weight: 500; font-size: 13.27px; line-height: 17.8px; color: var(--rel-cinza);
}

/* métricas gerais (gráfico + totais) */
.rel-grafico { position: absolute; left: 22px; top: 40px; width: 192px; height: 103px; }
.rel-grafico svg { width: 192px; height: 103px; display: block; }
.rel-grafico-vazio { position: absolute; left: 22px; top: 40px; width: 192px; height: 103px; display: flex; align-items: center; justify-content: center; color: #b4b9b6; font-size: 11px; font-weight: 600; }
.rel-totais {
  position: absolute; left: 222px; top: 33px; width: 108px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.rel-totais-rotulo { font-weight: 500; font-size: 11.9px; color: var(--rel-cinza); }
.rel-totais-valor { font-weight: 700; font-size: 19px; letter-spacing: .38px; color: var(--rel-cinza-2); margin: 6px 0 13px; white-space: nowrap; }
.rel-totais-valor:last-child { margin-bottom: 0; }

/* card numérico (ganho real, aprendemos, próximos passos) */
.rel-num-valor {
  position: absolute; left: 28px; top: 42px;
  font-weight: 800; font-size: 34px; line-height: 1; color: var(--rel-tinta); white-space: nowrap;
}
.rel-num-texto {
  position: absolute; left: 28px; top: 92px; width: 290px;
  font-weight: 500; font-size: 12.5px; line-height: 1.3; color: var(--rel-cinza);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.rel-card--thumb .rel-num-valor, .rel-card--thumb .rel-num-texto { left: 21px; }
.rel-card--thumb .rel-num-texto { width: 215px; font-size: 12px; line-height: 1.28; top: 90px; }
.rel-num-thumb {
  position: absolute; right: 16px; top: 38px; width: 78px; height: 98px;
  border-radius: 8px; object-fit: cover;
}
.rel-rodape {
  position: absolute; left: 60px; right: 60px; top: 504px;
  text-align: center; font-weight: 500; font-size: 11px; color: var(--rel-cinza); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* formatos testados */
.rel-fmt-thumb { position: absolute; left: 14px; top: 46px; width: 76px; height: 95px; border-radius: 8px; object-fit: cover; }
.rel-fmt-metrica { position: absolute; left: 102px; top: 46px; width: 116px; font-weight: 800; font-size: 9px; color: var(--rel-cinza-3); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rel-fmt-valor { position: absolute; left: 102px; top: 59px; font-weight: 800; font-size: 24px; line-height: 1.1; color: var(--rel-tinta); white-space: nowrap; }
.rel-fmt-texto {
  position: absolute; left: 102px; top: 93px; width: 116px;
  font-weight: 500; font-size: 10.5px; line-height: 1.25; color: var(--rel-cinza);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

/* o que disseram (comentários estilo Instagram) */
.rel-coments {
  position: absolute; left: 12px; right: 12px; top: 40px; bottom: 10px;
  background: #f1efee; border-radius: 8px; padding: 7px 9px;
  display: flex; flex-direction: column; justify-content: center; gap: 7px; overflow: hidden;
}
.rel-coment { display: flex; gap: 6px; align-items: flex-start; }
.rel-coment-avatar {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--rel-av, #9a8fb8); color: #fff; font-weight: 800; font-size: 9px;
  display: flex; align-items: center; justify-content: center; text-transform: uppercase;
}
.rel-coment-corpo { flex: 1; min-width: 0; font-size: 7.6px; line-height: 1.3; color: #262626; }
.rel-coment-usuario { font-weight: 800; }
.rel-coment-quando { color: #8e8e8e; margin-left: 4px; font-weight: 500; }
.rel-coment-texto { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-weight: 500; }
.rel-coment-acoes { margin-top: 3px; font-size: 6.4px; font-weight: 700; color: #8e8e8e; }
.rel-coment-acoes span + span { margin-left: 8px; }
.rel-coment-curtir { flex: none; width: 9px; height: 9px; margin-top: 6px; margin-right: 2px; }

/* ---------- slides de postagens ---------- */
.rel-post-titulo {
  position: absolute; left: 0; right: 0; top: 140px;
  display: flex; justify-content: center; align-items: center;
  font-weight: 800; font-size: 17.1px; white-space: nowrap;
}
.rel-post-titulo > img { width: 36px; height: 36px; margin-right: 6px; }
.rel-post-titulo .rel-pt-a, .rel-post-titulo .rel-pt-b {
  height: 34px; display: inline-flex; align-items: center; border-radius: 999px; border: 1.46px solid;
}
.rel-pt-a { background: #f0e4af; border-color: #cdc39a !important; color: #797359; padding: 0 20px 0 16px; position: relative; }
.rel-pt-b { background: #cdc9e9; border-color: #9c8eb5 !important; color: #50485f; padding: 0 16px; margin-left: -8px; position: relative; z-index: 1; }

.rel-posts {
  position: absolute; left: 110px; top: 203px;
  display: flex; gap: 20px;
}
.rel-slide--seguidores .rel-posts { top: 190px; left: 104px; }
.rel-post {
  position: relative; width: 199px; height: 274px;
  border: 1px solid var(--rel-post-borda, #b3aed4); border-radius: 21px;
}
.rel-post-img {
  position: absolute; left: 6px; top: 9px; width: 187px; height: 234px;
  border-radius: 20px; object-fit: cover; background: #e9e5f0;
}
.rel-post-vazio {
  position: absolute; left: 6px; top: 9px; width: 187px; height: 234px; border-radius: 20px;
  background: var(--rel-post-vazio, #e3dff0);
  display: flex; align-items: center; justify-content: center;
}
.rel-post-vazio img { width: 40px; height: 40px; opacity: .55; }
.rel-post-badge { position: absolute; left: -18px; top: -12px; width: 56px; height: 56px; }
.rel-post-barra { position: absolute; left: 33px; top: 258px; width: 132px; height: 9px; }
.rel-post-pilula {
  position: absolute; left: 76px; top: 252px;
  min-width: 60px; height: 20px; padding: 0 10px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  background: var(--rel-pp-fundo, #c3bee4); border: 1.27px solid var(--rel-pp-borda, #9688af);
  color: var(--rel-pp-texto, #4f475d); font-weight: 700; font-size: 10px; letter-spacing: .3px; line-height: 1;
}
.rel-post-pilula img { height: 8px; width: auto; }

/* cores por métrica */
.rel-m-comentarios { --rel-post-borda: #b3aed4; --rel-pp-fundo: #8cad95; --rel-pp-borda: #9688af; --rel-pp-texto: #4f475d; --rel-post-vazio: #dfe9e2; }
.rel-m-curtidas { --rel-post-borda: #b3aed4; --rel-pp-fundo: #c3bee4; --rel-pp-borda: #9688af; --rel-pp-texto: #4f475d; --rel-post-vazio: #e6e2f3; }
.rel-m-compartilhamentos { --rel-post-borda: #637c7f; --rel-pp-fundo: #a6cfd4; --rel-pp-borda: #678285; --rel-pp-texto: #59696b; --rel-post-vazio: #dfedef; }
.rel-m-salvamentos { --rel-post-borda: #817851; --rel-pp-fundo: #efe1ac; --rel-pp-borda: #91885f; --rel-pp-texto: #767057; --rel-post-vazio: #f5efd4; }
.rel-m-seguidores { --rel-post-borda: #b3aed4; --rel-pp-fundo: #c3bee4; --rel-pp-borda: #9688af; --rel-pp-texto: #4f475d; --rel-post-vazio: #e6e2f3; }

.rel-seg-texto {
  position: absolute; left: 112px; width: 620px; top: 476px;
  font-weight: 500; font-size: 10.5px; line-height: 1.35; color: #4f475d;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* divisor "pior desempenho" */
.rel-divisor-topo {
  position: absolute; left: 0; right: 0; top: 239px;
  display: flex; justify-content: center; align-items: center; gap: 12px;
}
.rel-divisor-topo img { width: 18px; height: 18px; }
.rel-divisor-titulo {
  position: absolute; left: 0; right: 0; top: 272px;
  display: flex; justify-content: center; align-items: center;
  font-weight: 800; font-size: 24.8px; white-space: nowrap;
}
.rel-divisor-titulo .rel-pt-a, .rel-divisor-titulo .rel-pt-b { height: 49px; border-radius: 999px; border: 2.12px solid; display: inline-flex; align-items: center; }
.rel-divisor-titulo .rel-pt-a { padding: 0 26px 0 24px; }
.rel-divisor-titulo .rel-pt-b { padding: 0 22px; margin-left: -10px; }

/* ---------- capa / contracapa ---------- */
.rel-capa-arte { position: absolute; left: 155px; top: 128px; width: 532px; height: 268px; }
.rel-capa-pilula {
  position: absolute; width: 228px; height: 46px; border-radius: 23px; border: 2px solid var(--rel-tinta);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #4f475d; background: #fff;
}
.rel-capa-sombra { position: absolute; width: 228px; height: 46px; border-radius: 23px; border: 2px solid var(--rel-tinta); background: var(--rel-fundo-roxo); }
.rel-capa-periodo { position: absolute; font-weight: 800; white-space: nowrap; color: #4f475d; }
.rel-capa-periodo b { color: #000; font-weight: 800; }
.rel-slide--capa .rel-capa-sombra { left: 222px; top: 402px; }
.rel-slide--capa .rel-capa-pilula { left: 228px; top: 396px; font-size: 16px; }
.rel-slide--capa .rel-capa-periodo { left: 493px; top: 408px; font-size: 20px; }
.rel-slide--contracapa .rel-capa-sombra { left: 253px; top: 274px; }
.rel-slide--contracapa .rel-capa-pilula { left: 258px; top: 268px; font-size: 13.5px; }
.rel-slide--contracapa .rel-capa-periodo { left: 510px; top: 283px; font-size: 20px; }

/* ---------- impressão ---------- */
@media print {
  /* o @page (842×595, sem margem) é posto só na hora de baixar o PDF (js/view-analise.js),
     pra não mudar a impressão das outras telas do sistema */
  body.imprimindo-relatorio { margin: 0 !important; padding: 0 !important; background: #fff !important; }
  body.imprimindo-relatorio > *:not(.rel-slides) { display: none !important; }
  body.imprimindo-relatorio .rel-slides { display: block !important; position: static !important; width: 842px; transform: none !important; }
  body.imprimindo-relatorio .rel-slide {
    transform: none !important; margin: 0 !important; box-shadow: none !important;
    page-break-after: always; break-after: page; page-break-inside: avoid; break-inside: avoid;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  body.imprimindo-relatorio .rel-slide:last-child { page-break-after: auto; break-after: auto; }
  body.imprimindo-relatorio .rel-slides * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.imprimindo-relatorio [contenteditable="true"] { box-shadow: none !important; background: transparent !important; }
}

/* miniatura clicável: abre o post no Instagram */
.rel-link { cursor: pointer; }
.rel-link:hover > img { filter: brightness(.94); }

/* nosso olhar (insights gravados em áudio): só texto, sem número grande */
.rel-card--texto .rel-num-texto { top: 50px; width: 292px; font-size: 13.4px; line-height: 1.42; -webkit-line-clamp: 5; color: var(--rel-cinza-2); }
.rel-grade--alta { grid-auto-rows: 320px; }
.rel-grade--alta .rel-card--texto .rel-num-texto { -webkit-line-clamp: 12; font-size: 14.5px; }