/* LANGRIS — Prévias de post (.pv-ig, .pv-x, .pv-avatar)
 *
 * O cartão imita a rede, por isso as cores do interior são as das redes
 * (fixas), não as variáveis do tema. O tema do app só escolhe a variante:
 * escuro (padrão) ou claro via body[data-op-tema="claro"]. As classes
 * .pv--claro / .pv--escuro forçam uma variante por cartão.
 */

/* ------------------------------------------------------------ base */
.pv-ig, .pv-x, .pv-avatar {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
.pv-ig *, .pv-x *, .pv-avatar * { box-sizing: border-box; }
.pv-ig svg, .pv-x svg, .pv-avatar svg { display: block; width: 100%; height: 100%; }

.pv-ig, .pv-x {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--pv-fundo);
  color: var(--pv-texto);
  border: 1px solid var(--pv-borda);
  text-align: left;
  line-height: 1.3;
}

/* Selo discreto de estado (Agendado, Publicado...) no canto superior direito. */
.pv-selo {
  position: absolute; top: 8px; right: 8px; z-index: 4;
  font: 600 10px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 7px; border-radius: 999px;
  background: rgba(107, 114, 128, .88); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  pointer-events: none;
}
/* Texto branco de 10 px maiúsculo: tons escuros e quase opacos para ≥ 4,5:1
 * também sobre o cartão claro. */
.pv-selo[data-estado="published"] { background: rgba(21, 128, 61, .95); }
.pv-selo[data-estado="scheduled"], .pv-selo[data-estado="publishing"] { background: rgba(29, 78, 216, .95); }
.pv-selo[data-estado="failed"], .pv-selo[data-estado="deleted"] { background: rgba(185, 28, 28, .95); }
.pv-selo[data-estado="partial"], .pv-selo[data-estado="unknown"] { background: rgba(180, 83, 9, .95); }
.pv-selo[data-estado="draft"], .pv-selo[data-estado="pending"], .pv-selo[data-estado="canceled"], .pv-selo[data-estado="outro"] { background: rgba(75, 85, 99, .95); }

/* Texto só para leitor de tela (nome da métrica antes do número no X). */
.pv-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pv-ig--feed .pv-selo { top: 12px; right: 48px; }
.pv-x .pv-selo { top: 14px; right: 50px; }

/* Ícone de ação genérico */
.pv-acao { display: inline-block; flex: none; color: inherit; }

/* Mídia que não carregou: o Chrome desenha ::after na <img> quebrada; o
 * fundo liso cobre o ícone partido (o play, quando há, fica por cima). */
.pv-ig__midia__img::after, .pv-x__midia__img::after, .pv-ig__tela__img::after {
  content: ""; position: absolute; inset: 0; background: var(--pv-midia, #121212);
}

/* Placeholder de mídia e play */
.pv-ig__midia__vazio, .pv-x__midia__vazio, .pv-ig__tela__vazio {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--pv-cinza);
}
.pv-ig__midia__vazio svg, .pv-x__midia__vazio svg, .pv-ig__tela__vazio svg { width: 48px; height: 48px; opacity: .55; }
.pv-ig__midia__play, .pv-x__midia__play, .pv-ig__tela__play {
  position: absolute; left: 50%; top: 50%; width: 56px; height: 56px;
  transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(0, 0, 0, .45); color: #fff;
  pointer-events: none;
}
.pv-ig__midia__play svg, .pv-x__midia__play svg, .pv-ig__tela__play svg { width: 28px; height: 28px; margin-left: 3px; }

/* ------------------------------------------------------------ avatar */
.pv-avatar {
  --pv-av: 32px;
  position: relative; display: inline-block; flex: none;
  width: var(--pv-av); height: var(--pv-av);
  border-radius: 50%; vertical-align: middle;
  background: #dbdbdb; color: #262626;
}
.pv-avatar--x { background: #cfd9de; color: #0f1419; }
.pv-avatar { --pv-tom: 210; overflow: hidden; }
/* Tamanho e tom por classe (a CSP da página não deixa style="--pv-av:…" inline). */
.pv-avatar--t20 { --pv-av: 20px; } .pv-avatar--t24 { --pv-av: 24px; } .pv-avatar--t28 { --pv-av: 28px; } .pv-avatar--t32 { --pv-av: 32px; }
.pv-avatar--t40 { --pv-av: 40px; } .pv-avatar--t48 { --pv-av: 48px; } .pv-avatar--t56 { --pv-av: 56px; } .pv-avatar--t64 { --pv-av: 64px; }
.pv-tom-0 { --pv-tom: 0; } .pv-tom-1 { --pv-tom: 30; } .pv-tom-2 { --pv-tom: 60; } .pv-tom-3 { --pv-tom: 90; } .pv-tom-4 { --pv-tom: 120; } .pv-tom-5 { --pv-tom: 150; }
.pv-tom-6 { --pv-tom: 180; } .pv-tom-7 { --pv-tom: 210; } .pv-tom-8 { --pv-tom: 240; } .pv-tom-9 { --pv-tom: 270; } .pv-tom-10 { --pv-tom: 300; } .pv-tom-11 { --pv-tom: 330; }
.pv-avatar__img { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
/* Foto que não carregou: o Chrome desenha ::after na <img> quebrada — a
 * inicial cobre o ícone de imagem partida (Firefox/Safari já não mostram
 * nada com alt=""). Numa foto carregada o pseudo-elemento não existe. */
.pv-avatar__img::after {
  content: attr(data-inicial); position: absolute; inset: 0;
  display: grid; place-items: center; border-radius: 50%;
  font-weight: 600; font-size: calc(var(--pv-av) * .44); line-height: 1; text-transform: uppercase;
  background: linear-gradient(145deg, hsl(var(--pv-tom), 62%, 62%), hsl(calc(var(--pv-tom) + 28), 58%, 44%));
  color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
}
.pv-avatar--x .pv-avatar__img::after { background: linear-gradient(145deg, hsl(var(--pv-tom), 38%, 56%), hsl(calc(var(--pv-tom) + 28), 36%, 40%)); }
.pv-avatar__inicial {
  display: grid; place-items: center; width: 100%; height: 100%;
  border-radius: 50%;
  font-weight: 600; font-size: calc(var(--pv-av) * .44); line-height: 1;
  background: linear-gradient(145deg, hsl(var(--pv-tom), 62%, 62%), hsl(calc(var(--pv-tom) + 28), 58%, 44%));
  color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
  text-transform: uppercase;
}
.pv-avatar--x .pv-avatar__inicial { background: linear-gradient(145deg, hsl(var(--pv-tom), 38%, 56%), hsl(calc(var(--pv-tom) + 28), 36%, 40%)); }
.pv-avatar__rede {
  position: absolute; right: -2px; bottom: -2px;
  width: calc(var(--pv-av) * .42); height: calc(var(--pv-av) * .42);
  min-width: 14px; min-height: 14px;
  padding: 2px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid var(--exp-paper, #fff);
}
.pv-avatar__rede--instagram { background: linear-gradient(45deg, #f9ce34, #ee2a7b 55%, #6228d7); color: #fff; }
.pv-avatar__rede--x { background: #000; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.pv-avatar__rede--x svg { width: 62%; height: 62%; }

/* Tema escuro (padrão do produto desde 26/09/2026): a inicial branca pede um
 * degradê mais fechado. A luz de cada tom foi medida para o branco ficar
 * ≥ 4,5:1 do início ao fim do degradê — amarelo e verde precisam de menos luz
 * que azul e violeta — e o círculo não sumir no fundo preto (≈ 4:1). Vale
 * também para a inicial que cobre a foto que não carregou. O claro fica como
 * estava. */
body:not([data-op-tema="claro"]) .pv-avatar { --pv-luz-ig: 45%; --pv-luz-x: 45%; }
body:not([data-op-tema="claro"]) .pv-tom-0 { --pv-luz-ig: 51%; --pv-luz-x: 51%; }
body:not([data-op-tema="claro"]) .pv-tom-1 { --pv-luz-ig: 38%; --pv-luz-x: 41%; }
body:not([data-op-tema="claro"]) .pv-tom-2 { --pv-luz-ig: 28%; --pv-luz-x: 32%; }
body:not([data-op-tema="claro"]) .pv-tom-3 { --pv-luz-ig: 30%; --pv-luz-x: 34%; }
body:not([data-op-tema="claro"]) .pv-tom-4 { --pv-luz-ig: 31%; --pv-luz-x: 36%; }
body:not([data-op-tema="claro"]) .pv-tom-5 { --pv-luz-ig: 31%; --pv-luz-x: 35%; }
body:not([data-op-tema="claro"]) .pv-tom-6 { --pv-luz-ig: 30%; --pv-luz-x: 35%; }
body:not([data-op-tema="claro"]) .pv-tom-7 { --pv-luz-ig: 45%; --pv-luz-x: 45%; }
body:not([data-op-tema="claro"]) .pv-tom-8 { --pv-luz-ig: 62%; --pv-luz-x: 56%; }
body:not([data-op-tema="claro"]) .pv-tom-9 { --pv-luz-ig: 57%; --pv-luz-x: 53%; }
body:not([data-op-tema="claro"]) .pv-tom-10 { --pv-luz-ig: 45%; --pv-luz-x: 47%; }
body:not([data-op-tema="claro"]) .pv-tom-11 { --pv-luz-ig: 49%; --pv-luz-x: 50%; }
body:not([data-op-tema="claro"]) .pv-avatar__inicial,
body:not([data-op-tema="claro"]) .pv-avatar__img::after {
  background: linear-gradient(145deg, hsl(var(--pv-tom), 62%, var(--pv-luz-ig)), hsl(calc(var(--pv-tom) + 28), 58%, calc(var(--pv-luz-ig) - 12%)));
}
body:not([data-op-tema="claro"]) .pv-avatar--x .pv-avatar__inicial,
body:not([data-op-tema="claro"]) .pv-avatar--x .pv-avatar__img::after {
  background: linear-gradient(145deg, hsl(var(--pv-tom), 38%, var(--pv-luz-x)), hsl(calc(var(--pv-tom) + 28), 36%, calc(var(--pv-luz-x) - 12%)));
}

/* ---------------------------------------------------------- Instagram */
.pv-ig {
  --pv-fundo: #000; --pv-borda: #262626; --pv-texto: #f5f5f5; --pv-cinza: #a8a8a8;
  --pv-azul: #e0f1ff; --pv-midia: #121212;
  max-width: 470px;
  border-radius: 4px;
  font-size: 14px;
}
body[data-op-tema="claro"] .pv-ig, .pv-ig.pv--claro {
  --pv-fundo: #fff; --pv-borda: #dbdbdb; --pv-texto: #262626; --pv-cinza: #737373;
  --pv-azul: #00376b; --pv-midia: #efefef;
}
.pv-ig.pv--escuro {
  --pv-fundo: #000; --pv-borda: #262626; --pv-texto: #f5f5f5; --pv-cinza: #a8a8a8;
  --pv-azul: #e0f1ff; --pv-midia: #121212;
}

.pv-ig__cab { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; }
.pv-ig__anel {
  display: inline-grid; place-items: center; flex: none;
  padding: 2px; border-radius: 50%;
  background: linear-gradient(45deg, #f9ce34 0%, #ee2a7b 50%, #6228d7 100%);
}
.pv-ig__anel .pv-avatar { border: 2px solid var(--pv-fundo); box-sizing: content-box; }
.pv-ig__anel--fino { padding: 0; background: none; }
.pv-ig__anel--fino .pv-avatar { border: 1.5px solid #fff; }
.pv-ig__quem { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.pv-ig__user { font-weight: 600; font-size: 14px; color: var(--pv-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-ig__sub { font-size: 12px; color: var(--pv-cinza); }
.pv-ig__mais { width: 24px; height: 24px; color: var(--pv-texto); flex: none; }

.pv-ig__midia {
  position: relative; width: 100%; overflow: hidden;
  background: var(--pv-midia);
}
.pv-ig__midia--1x1 { aspect-ratio: 1 / 1; }
.pv-ig__midia--4x5 { aspect-ratio: 4 / 5; }
.pv-ig__midia__img, .pv-ig__midia__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.pv-ig__acoes { display: flex; align-items: center; gap: 14px; padding: 8px 12px 4px 14px; }
.pv-ig__acoes .pv-acao { width: 24px; height: 24px; }
.pv-ig__espaco { flex: 1; }
.pv-ig__curtidas { padding: 4px 14px 2px; font-size: 14px; }
.pv-ig__curtidas strong { font-weight: 600; }

.pv-ig__legenda { position: relative; padding: 0 14px; font-size: 14px; line-height: 18px; }
.pv-ig__legenda-texto { display: block; white-space: pre-line; overflow-wrap: anywhere; min-width: 0; }
/* Longa: duas linhas e "… mais" colado no fim da segunda, como o Instagram. */
.pv-ig__legenda--longa .pv-ig__legenda-texto { max-height: 36px; overflow: hidden; }
.pv-ig__mais-legenda {
  position: absolute; right: 14px; bottom: 0; line-height: 18px;
  padding-left: 32px; color: var(--pv-cinza); white-space: nowrap;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--pv-fundo) 40%);
}
.pv-ig__realce { color: var(--pv-azul); }
.pv-ig__realce--claro { color: #fff; font-weight: 500; }
.pv-ig__comentarios { padding: 4px 14px 0; color: var(--pv-cinza); font-size: 14px; }
.pv-ig__data { display: block; padding: 6px 14px 14px; color: var(--pv-cinza); font-size: 10px; letter-spacing: .2px; }

/* Compacto: para listas. Mesmo esqueleto, menos linhas. */
.pv-ig--compacto { max-width: 240px; font-size: 12px; border-radius: 6px; }
.pv-ig--compacto .pv-ig__cab { padding: 7px 8px 7px 10px; gap: 8px; }
.pv-ig--compacto .pv-ig__user { font-size: 12px; }
.pv-ig--compacto .pv-ig__mais { width: 18px; height: 18px; }
.pv-ig--compacto .pv-ig__acoes { gap: 10px; padding: 6px 8px 2px 10px; }
.pv-ig--compacto .pv-ig__acoes .pv-acao { width: 18px; height: 18px; }
.pv-ig--compacto .pv-ig__curtidas { padding: 2px 10px 0; font-size: 12px; }
.pv-ig--compacto .pv-ig__legenda { padding: 0 10px; font-size: 12px; line-height: 16px; }
.pv-ig--compacto .pv-ig__legenda-texto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-ig--compacto .pv-ig__legenda--longa .pv-ig__legenda-texto { max-height: 16px; }
.pv-ig--compacto .pv-ig__mais-legenda { display: none; }
.pv-ig--compacto .pv-ig__data { padding: 4px 10px 8px; font-size: 9px; }
.pv-ig--compacto .pv-selo { top: 6px; right: 30px; font-size: 9px; padding: 4px 6px; }

/* Reel 9:16 */
.pv-ig--reelv {
  max-width: 320px; border-radius: 12px; background: #000; color: #fff;
  border-color: var(--pv-borda);
}
.pv-ig__tela { position: relative; width: 100%; aspect-ratio: 9 / 16; overflow: hidden; background: #111; }
.pv-ig__tela-midia { position: absolute; inset: 0; }
.pv-ig__tela__img, .pv-ig__tela__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-ig__tela::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 55%, rgba(0,0,0,.62) 100%);
}
.pv-ig__reel-topo {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; color: #fff;
}
.pv-ig__reel-titulo { font-size: 20px; font-weight: 700; letter-spacing: -.01em; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.pv-ig__reel-cam { width: 26px; height: 26px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.pv-ig__reel-rodape {
  position: absolute; left: 0; right: 58px; bottom: 0; z-index: 2;
  padding: 0 12px 16px 14px; color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.55);
}
.pv-ig__reel-quem { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pv-ig__reel-quem .pv-ig__user { color: #fff; font-size: 14px; }
.pv-ig__seguir {
  font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,.9); text-shadow: none;
}
.pv-ig__reel-legenda {
  font-size: 14px; line-height: 18px; white-space: pre-line;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  overflow-wrap: anywhere;
}
.pv-ig__reel-audio { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; white-space: nowrap; overflow: hidden; }
.pv-ig__reel-audio span:last-child { overflow: hidden; text-overflow: ellipsis; }
.pv-ig__reel-nota { width: 14px; height: 14px; flex: none; }
.pv-ig__reel-coluna {
  position: absolute; right: 0; bottom: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 0 10px 16px; color: #fff;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.55));
}
.pv-ig__reel-acao { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pv-ig__reel-acao .pv-acao { width: 26px; height: 26px; }
.pv-ig__reel-acao--mais { width: 22px; height: 22px; }
.pv-ig__reel-num { font-size: 12px; font-weight: 500; }
.pv-ig__reel-capa .pv-avatar { border: 2px solid #fff; border-radius: 6px; box-sizing: content-box; }
.pv-ig__reel-capa .pv-avatar__img, .pv-ig__reel-capa .pv-avatar__inicial { border-radius: 4px; }
.pv-ig__data--reel { background: #000; color: #a8a8a8; }
.pv-ig--reelv .pv-selo { top: 16px; right: 52px; }
.pv-ig--reelv.pv-ig--compacto { max-width: 160px; }
.pv-ig--reelv.pv-ig--compacto .pv-ig__reel-titulo { font-size: 14px; }
.pv-ig--reelv.pv-ig--compacto .pv-ig__reel-cam, .pv-ig--reelv.pv-ig--compacto .pv-ig__reel-coluna { display: none; }
.pv-ig--reelv.pv-ig--compacto .pv-ig__reel-rodape { right: 0; padding: 0 8px 10px 10px; }
.pv-ig--reelv.pv-ig--compacto .pv-ig__reel-legenda { font-size: 11px; line-height: 14px; }
.pv-ig--reelv.pv-ig--compacto .pv-ig__reel-audio, .pv-ig--reelv.pv-ig--compacto .pv-ig__seguir { display: none; }
.pv-ig--reelv.pv-ig--compacto .pv-ig__reel-quem .pv-ig__user { font-size: 11px; }

/* ------------------------------------------------------------------ X */
.pv-x {
  --pv-fundo: #000; --pv-borda: #2f3336; --pv-texto: #e7e9ea; --pv-cinza: #71767b;
  --pv-azul: #1d9bf0; --pv-midia: #16181c;
  max-width: 600px;
  border-radius: 16px;
  font-size: 15px;
  padding: 12px 16px 6px;
}
body[data-op-tema="claro"] .pv-x, .pv-x.pv--claro {
  --pv-fundo: #fff; --pv-borda: #eff3f4; --pv-texto: #0f1419; --pv-cinza: #536471;
  --pv-azul: #1d9bf0; --pv-midia: #f7f9f9;
}
.pv-x.pv--escuro {
  --pv-fundo: #000; --pv-borda: #2f3336; --pv-texto: #e7e9ea; --pv-cinza: #71767b;
  --pv-azul: #1d9bf0; --pv-midia: #16181c;
}
body[data-op-tema="claro"] .pv-x, .pv-x.pv--claro { border-color: #cfd9de; }

.pv-x__post { display: flex; gap: 10px; align-items: stretch; }
.pv-x__post + .pv-x__post { margin-top: 2px; }
.pv-x__lateral { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; width: 40px; }
.pv-x__post--fio .pv-x__lateral { width: 40px; }
.pv-x__linha {
  flex: 1; width: 2px; min-height: 12px; margin-top: 4px;
  background: var(--pv-borda);
  border-radius: 1px;
}
body[data-op-tema="claro"] .pv-x .pv-x__linha, .pv-x.pv--claro .pv-x__linha { background: #cfd9de; }
.pv-x__corpo { flex: 1; min-width: 0; padding-bottom: 6px; }
.pv-x__post--fio .pv-x__corpo { padding-top: 2px; }

.pv-x__quem { display: flex; align-items: baseline; gap: 4px; min-width: 0; line-height: 20px; }
.pv-x__nome { font-weight: 700; color: var(--pv-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pv-x__user, .pv-x__sep, .pv-x__data { color: var(--pv-cinza); white-space: nowrap; }
.pv-x__user { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 1; }
.pv-x__mais { margin-left: auto; width: 20px; height: 20px; color: var(--pv-cinza); align-self: center; flex: none; }

.pv-x__texto {
  font-size: 15px; line-height: 20px; margin-top: 2px;
  white-space: pre-wrap; overflow-wrap: anywhere; color: var(--pv-texto);
}
.pv-x__realce { color: var(--pv-azul); }
.pv-x__conf {
  display: inline-block; vertical-align: -3px; width: 15px; height: 15px; margin-left: 5px;
  color: var(--pv-cinza);
}
.pv-x__conf--ok { color: #00ba7c; }

.pv-x__midia {
  position: relative; margin-top: 12px; overflow: hidden;
  border-radius: 16px; border: 1px solid var(--pv-borda);
  background: var(--pv-midia);
  aspect-ratio: 16 / 9;
}
body[data-op-tema="claro"] .pv-x .pv-x__midia, .pv-x.pv--claro .pv-x__midia { border-color: #cfd9de; }
.pv-x__midia__img, .pv-x__midia__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.pv-x__acoes {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; max-width: 425px; color: var(--pv-cinza);
}
.pv-x__acao { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; line-height: 1; color: var(--pv-cinza); }
.pv-x__acao-icone { width: 18.75px; height: 18.75px; display: inline-block; }
.pv-x__acao-num { min-width: 1ch; font-variant-numeric: tabular-nums; }
.pv-x__acoes-fim { display: inline-flex; align-items: center; gap: 12px; }
.pv-x__fio-resumo {
  display: flex; align-items: center; gap: 6px; margin: 2px 0 6px 50px;
  color: var(--pv-azul); font-size: 13px;
}
.pv-x__fio-resumo svg { width: 16px; height: 16px; }

/* Compacto */
.pv-x--compacto { padding: 10px 12px 4px; border-radius: 12px; font-size: 13px; }
.pv-x--compacto .pv-x__lateral { width: 32px; }
.pv-x--compacto .pv-x__quem { line-height: 18px; font-size: 13px; }
.pv-x--compacto .pv-x__texto {
  font-size: 13px; line-height: 18px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.pv-x--compacto .pv-x__midia { margin-top: 8px; border-radius: 10px; aspect-ratio: 16 / 9; }
.pv-x--compacto .pv-x__acoes { margin-top: 6px; max-width: 320px; }
.pv-x--compacto .pv-x__acao { font-size: 12px; }
.pv-x--compacto .pv-x__acao-icone { width: 16px; height: 16px; }
.pv-x--compacto .pv-x__fio-resumo { margin-left: 42px; font-size: 12px; }
.pv-x--compacto .pv-x__linha { display: none; }
.pv-x--compacto .pv-selo { top: 8px; right: 32px; font-size: 9px; padding: 4px 6px; }

/* Ações do fio: só ícones, sem números (o X não mede antes de publicar). */
.pv-x__post--fio .pv-x__acoes { margin-top: 6px; }

/* ------------------------------------------------------------ estreito */
@media (max-width: 520px) {
  .pv-ig--feed:not(.pv-ig--compacto), .pv-x { max-width: 100%; }
  .pv-x { padding: 10px 12px 4px; }
  .pv-x__acoes { max-width: none; }
}