/* Escala: agenda (calendário), biblioteca, scrap, templates e contas. Usa os tokens do app.css. */
.ec-aviso { border-left: 4px solid var(--amarelo, #e8a200); padding: var(--e-3) var(--e-4); margin-bottom: var(--e-4); }
.ec-falhas { margin-bottom: var(--e-4); border-left: 4px solid var(--verm-texto, #c33); }
.ec-falhas p { margin: 4px 0; }
.ec-link { background: none; border: 0; padding: 0; color: var(--acao, #2B54F4); cursor: pointer; font: inherit; text-decoration: underline; }
.ec-cal-cab { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; margin: var(--e-4) 0 var(--e-3); }
.ec-cal-cab h2 { margin: 0; min-width: 190px; text-align: center; }
.ec-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.ec-sem { text-align: center; font-size: 12px; color: var(--tinta-2, #888); padding: 4px 0; }
.ec-dia { min-height: 96px; background: var(--papel-2, #f5f5f5); border: 1px solid var(--linha, #e3e3e3); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 3px; }
.ec-dia.vazio { background: transparent; border-color: transparent; }
.ec-dia.hoje { outline: 2px solid var(--acao, #2B54F4); }
.ec-dn { font-size: 12px; color: var(--tinta-2, #888); font-weight: 600; }
.ec-post { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; border-radius: 6px; padding: 2px 6px; border: 0; cursor: pointer;
  background: var(--papel-3, #e9e9e9); color: var(--tinta, #222); text-align: left; }
.ec-post.st-agendado { background: color-mix(in srgb, #2B54F4 18%, transparent); }
.ec-post.st-publicando { background: color-mix(in srgb, #e8a200 25%, transparent); }
.ec-post.st-publicado { background: color-mix(in srgb, #1f9d55 22%, transparent); }
.ec-post.st-falhou, .ec-post.st-parcial, .ec-post.st-atrasado { background: color-mix(in srgb, #d23 22%, transparent); }
.ec-post.st-cancelado { opacity: .5; text-decoration: line-through; }
.ec-legenda { margin-top: var(--e-3); display: flex; gap: 8px; flex-wrap: wrap; }
.ec-rede { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #888; vertical-align: middle; margin-right: 2px; }
.ec-rede.r-instagram { background: #e1306c; } .ec-rede.r-tiktok { background: #111; box-shadow: 0 0 0 1px #25f4ee; }
.ec-rede.r-youtube { background: #f00; } .ec-rede.r-facebook { background: #1877f2; }
.ec-dlg-post { width: min(820px, calc(100vw - 24px)); }
.ec-post-corpo { display: grid; grid-template-columns: 220px 1fr; gap: var(--e-4); }
.ec-post-corpo video { width: 100%; border-radius: 10px; background: #000; aspect-ratio: 9/16; }
.ec-leg { white-space: pre-wrap; font: inherit; font-size: 13px; background: var(--papel-2, #f5f5f5); padding: 8px; border-radius: 8px; max-height: 220px; overflow: auto; }
.ec-redes { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 4px; }
.ruim-txt { color: var(--verm-texto, #c33); }
.ec-dlg-agendar { width: min(900px, calc(100vw - 24px)); }
.ec-linha { display: flex; gap: var(--e-3); flex-wrap: wrap; }
.ec-linha .campo { flex: 1 1 160px; }
.ec-contas { border: 0; padding: 0; margin: var(--e-3) 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ec-contas legend { font-weight: 600; margin-bottom: 4px; }
.ec-contas .chip.desl { opacity: .55; }
.ec-grade-sel { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; max-height: 46vh; overflow: auto; padding: 2px; }
.ec-sel { position: relative; display: flex; flex-direction: column; gap: 4px; font-size: 12px; cursor: pointer; border-radius: 10px; padding: 4px; border: 2px solid transparent; }
.ec-sel.on { border-color: var(--acao, #2B54F4); }
.ec-sel input { position: absolute; top: 8px; left: 8px; z-index: 1; }
.ec-sel video, .ec-sel img { width: 100%; aspect-ratio: 9/16; object-fit: cover; border-radius: 8px; background: #000; }
.ec-sel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-previa { min-height: 1.4em; }
.ec-bib { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--e-4) var(--e-3); }
.ec-mid { display: flex; flex-direction: column; gap: 6px; border-radius: 12px; padding: 4px; border: 2px solid transparent; }
.ec-mid.on { border-color: var(--acao, #2B54F4); }
.ec-mid-tela { position: relative; display: block; cursor: pointer; }
.ec-mid-tela input { position: absolute; top: 8px; left: 8px; z-index: 1; width: 18px; height: 18px; }
.ec-mid-tela video, .ec-mid-tela img { width: 100%; aspect-ratio: 9/16; object-fit: cover; border-radius: 10px; background: #000; display: block; }
.ec-mid-txt p { margin: 0 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-mid-acoes { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.ec-mid .ec-mid-acoes .btn { padding: 0 10px; }
.ec-chk { display: flex; gap: 8px; align-items: center; margin: var(--e-2) 0; }
.ec-conectar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ec-conectar p { flex-basis: 100%; margin: 4px 0 0; }
.ec-perfis { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--e-4); margin-top: var(--e-4); }
.ec-perfil { padding: var(--e-4); }
.ec-perfil-cab { display: flex; align-items: center; gap: var(--e-3); }
.ec-perfil-cab > div { flex: 1; } .ec-perfil-cab h2 { margin: 0; font-size: 18px; }
.ec-perfil-cab img, .ec-av-vazio { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--papel-3, #ddd); display: grid; place-items: center; font-weight: 700; }
.ec-verif { color: #1d9bf0; font-size: 14px; }
/* scrap */
.ec-scrap-form { display: flex; gap: var(--e-3); flex-wrap: wrap; align-items: end; margin-bottom: var(--e-4); }
.ec-scrap-form .campo { flex: 1 1 280px; }
.ec-scrap-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--e-3); }
.ec-scrap-item { position: relative; border-radius: 12px; padding: 4px; border: 2px solid transparent; cursor: pointer; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.ec-scrap-item.on { border-color: var(--acao, #2B54F4); }
.ec-scrap-item img { width: 100%; aspect-ratio: 9/16; object-fit: cover; border-radius: 10px; background: #000; }
.ec-scrap-item input { position: absolute; top: 10px; left: 10px; width: 18px; height: 18px; }
.ec-scrap-item .ec-nums { display: flex; gap: 8px; color: var(--tinta-2, #777); }
/* templates */
.ec-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--e-4); }
.ec-tpl { padding: var(--e-4); display: flex; flex-direction: column; gap: 8px; }
.ec-tpl img.ec-prev { width: 100%; aspect-ratio: 9/16; object-fit: cover; border-radius: 10px; background: #111; }
.ec-dlg-tpl { width: min(1000px, calc(100vw - 24px)); }
.ec-tpl-ed { display: grid; grid-template-columns: 1fr 300px; gap: var(--e-4); }
.ec-tpl-ed .ec-prev { width: 100%; aspect-ratio: 9/16; border-radius: 12px; background: #111; object-fit: contain; }
.ec-estilos { display: flex; gap: 8px; flex-wrap: wrap; }
.ec-var-prog { margin: var(--e-3) 0; }
@media (max-width: 720px) {
  .ec-dia { min-height: 64px; padding: 3px; } .ec-post .num { display: none; }
  .ec-post-corpo, .ec-tpl-ed { grid-template-columns: 1fr; }
}
.ec-scrap-item.ja { opacity: .6; }
.ec-scrap-leg { color: var(--tinta-2, #888); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ec-sem-thumb { aspect-ratio: 9/16; display: grid; place-items: center; background: #111; border-radius: 10px; }
.ec-nums svg { width: 12px; height: 12px; vertical-align: -1px; }

/* ---------------------------------------------------------------- GTA por Dentro (menu, Hoje, Achar viral, Agendar, No ar) */
.lat-passos .lat-sub { gap: 8px; }
.lat-passos .lat-sub svg { width: 14px; height: 14px; }
.lat-n { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--papel-3); color: var(--tinta-2); font: 700 11px/1 var(--f-texto); font-style: normal; }
.lat-sub.on .lat-n { background: var(--azul); color: #fff; }
.gta-num { display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; margin-right: 10px; border-radius: 50%; background: var(--azul); color: #fff; font-size: .7em; vertical-align: .15em; }
.gta-passos { gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 0 0 var(--e-3); padding-bottom: 2px; }
.gta-passos::-webkit-scrollbar { display: none; }
.gta-passos a { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; text-decoration: none; color: var(--tinta-3); font: 600 13px/1 var(--f-texto);
  padding: 8px 12px; border-radius: var(--r-full); border: 1px solid var(--linha); min-height: 36px; }
.gta-passos a i { font-style: normal; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--papel-3); font-size: 11px; }
.gta-passos a.on { color: var(--chip-on-tinta); background: var(--chip-on-fundo); border-color: var(--chip-on-fundo); }
.gta-passos a.on i { background: var(--azul); color: #fff; }
.gta-passos a svg { width: 16px; height: 16px; }
.gta-atual { display: inline-flex; align-items: center; gap: 6px; font: 600 var(--t-13) var(--f-texto); color: var(--verde-texto); padding: 6px 10px; border-radius: var(--r-full); background: color-mix(in srgb, var(--verde) 10%, var(--papel)); }
.gta-atual svg { width: 14px; height: 14px; }
.gta-atual.ruim { color: var(--verm-texto); background: var(--verm-claro); }
.gta-alerta { border: 1px solid var(--verm); background: var(--verm-claro); padding: var(--e-3) var(--e-4); margin-bottom: var(--e-4); }
.gta-alerta p { margin: 2px 0; display: flex; gap: 8px; align-items: center; }
.gta-alerta b { color: var(--verm-texto); }
.gta-alerta svg { color: var(--verm-texto); flex: none; }
.gta-tres { align-items: start; }
.gta-bloco h2 { display: flex; align-items: center; gap: 8px; }
.gta-cont { font: 700 12px/1 var(--f-texto); padding: 3px 8px; border-radius: var(--r-full); background: var(--papel-3); color: var(--tinta-2); }
.gta-bloco.saiu .gta-cont { background: color-mix(in srgb, var(--verde) 14%, var(--papel)); color: var(--verde-texto); }
.gta-bloco.falhou .gta-cont { background: var(--verm-claro); color: var(--verm-texto); }
.gta-bloco.falhou { border-top: 3px solid var(--verm); }
.gta-bloco.saiu { border-top: 3px solid var(--verde); }
.gta-bloco.sai { border-top: 3px solid var(--azul); }
.gta-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gta-lista.compacta { gap: 6px; margin-bottom: var(--e-3); }
.gta-vid { padding-bottom: 10px; border-bottom: 1px solid var(--linha); }
.gta-vid:last-child { border-bottom: 0; padding-bottom: 0; }
.gta-vid-cab { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; }
.gta-vid-cab span { font-weight: 600; text-transform: capitalize; }
.gta-redes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.gta-rede { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-13); flex-wrap: wrap; }
.gta-rn { font-weight: 600; color: var(--tinta-2); }
.gta-rn::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; background: #888; vertical-align: 1px; }
.gta-rn.r-tiktok::before { background: #111; box-shadow: 0 0 0 1px #25f4ee; } .gta-rn.r-youtube::before { background: #f00; }
.gta-rn.r-kwai::before { background: #ff7a00; } .gta-rn.r-x::before { background: #555; } .gta-rn.r-instagram::before { background: #e1306c; }
.ec-rede.r-kwai { background: #ff7a00; } .ec-rede.r-x { background: #555; }
.gta-motivo { flex-basis: 100%; font-size: 12px; margin: 2px 0 0; }
.gta-pulados { margin: var(--e-3) 0 0; }
.gta-baixo { margin-top: var(--e-4); align-items: start; }
.gta-dia { font: 700 var(--t-13) var(--f-texto); text-transform: capitalize; color: var(--tinta-2); margin: var(--e-2) 0 6px; }
.gta-medidor { list-style: none; margin: 0 0 var(--e-2); padding: 0; display: grid; gap: 10px; }
.gta-medidor li { display: grid; grid-template-columns: 92px minmax(0, 1fr) 64px auto; gap: 10px; align-items: center; }
.gta-barra { position: relative; height: 10px; border-radius: 6px; background: var(--papel-3); }
.gta-barra i { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: var(--verde); }
.gta-barra b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--tinta-3); }
.gta-medidor li.alerta .gta-barra i { background: var(--verm); }
.gta-medidor li.alerta .num { color: var(--verm-texto); font-weight: 700; }
.gta-fila-alerta { border: 1px solid var(--verm); }
.gta-inicio .painel-cab h2 { display: flex; align-items: center; gap: 8px; }
.gta-inicio .painel-cab h2 svg { width: 18px; height: 18px; }
.gta-inicio.ruim { border: 1px solid var(--verm); }
.gta-ini-alerta { display: flex; gap: 8px; align-items: center; color: var(--verm-texto); font-weight: 600; margin: 0 0 var(--e-3); }
.gta-ini-nums { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: var(--e-2); }
.gta-ini-nums a { display: flex; flex-direction: column; text-decoration: none; color: inherit; padding: 8px 10px; border-radius: var(--r-sm); background: var(--papel-2, var(--papel-3)); }
.gta-ini-nums b { font-size: 22px; line-height: 28px; }
.gta-ini-nums span { font-size: 12px; color: var(--tinta-3); }
.gta-ini-nums a.ruim b { color: var(--verm-texto); }
.gta-buscas { margin-bottom: var(--e-4); align-items: start; }
.gta-form { display: flex; gap: var(--e-3); align-items: end; flex-wrap: wrap; }
.gta-form .campo { flex: 1 1 220px; margin: 0; }
.gta-buscando, .gta-pc-off { display: flex; gap: 10px; align-items: center; margin: var(--e-3) 0 0; font-weight: 600; }
.gta-pc-off { color: var(--amarelo-texto); background: var(--amarelo-claro); padding: 10px 12px; border-radius: var(--r-sm); }
.gta-gira { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--linha); border-top-color: var(--azul); animation: gta-gira 1s linear infinite; }
@keyframes gta-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gta-gira { animation: none; } }
.gta-res { margin-bottom: var(--e-4); }
.gta-res-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.ec-scrap-item.viral { outline: 2px solid var(--verde); }
.gta-viral { position: absolute; top: 8px; right: 8px; }
.ec-scrap-item { position: relative; }
.gta-baixar { display: flex; gap: var(--e-3); align-items: center; flex-wrap: wrap; justify-content: space-between; margin-top: var(--e-4);
  position: sticky; bottom: 0; background: var(--papel); padding: var(--e-3) 0; border-top: 1px solid var(--linha); }
.gta-marca-sel { border: 0; padding: 0; margin: 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.gta-marca-sel legend { float: left; margin-right: 8px; font-weight: 600; }
.gta-marca { display: inline-flex; gap: 4px; }
.gta-marca .chip.peq { padding: 2px 8px; font-size: 12px; min-height: 0; }
.gta-marca .chip.on.m-gente { background: var(--amarelo-claro); color: var(--amarelo-texto); border-color: var(--amarelo-texto); }
.gta-radar-linha { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--linha); }
.gta-radar-linha:last-child { border-bottom: 0; }
.gta-fontes { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--e-3); }
.gta-fontes .chip { display: inline-flex; align-items: center; gap: 4px; }
.gta-fontes .icone-btn.peq { width: 22px; height: 22px; }
.gta-chave { margin-bottom: var(--e-4); }
.gta-chave.falta { border: 1px solid var(--amarelo-texto); background: var(--amarelo-claro); }
.gta-chave h2 { display: flex; align-items: center; gap: 8px; }
.gta-chave-form { display: flex; gap: var(--e-3); align-items: end; flex-wrap: wrap; margin-top: var(--e-3); }
.gta-chave-form .campo { flex: 1 1 260px; margin: 0; }
.ec-post.gta-f-celular { border-left: 3px solid var(--tinta-3); }
.ec-post.gta-f-vicescale { border-left: 3px solid #e1306c; }
.ec-post.gta-f-painel { border-left: 3px solid var(--azul); }
span.ec-post { cursor: default; }
.gta-plano { margin-top: var(--e-3); }
.gta-plano-lista { margin: 4px 0 var(--e-3); padding-left: 18px; max-height: 30vh; overflow: auto; }
.gta-rank { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.gta-rank li { display: flex; gap: 8px; align-items: baseline; }
.gta-rank li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gta-noar { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.gta-noar > li { padding-bottom: 12px; border-bottom: 1px solid var(--linha); }
.gta-noar-cab { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.gta-noar-cab > span:nth-child(2) { font-weight: 600; text-transform: capitalize; flex: 1 1 160px; }
.gta-tot { display: inline-flex; gap: 4px; align-items: baseline; }
.gta-tot small { color: var(--tinta-3); margin-right: 8px; }
.gta-nota { padding: var(--e-3) var(--e-4); margin-bottom: var(--e-4); }
.gta-nota p { display: flex; gap: 8px; margin: 0; }
@media (max-width: 760px) {
  .gta-ini-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gta-medidor li { grid-template-columns: 76px minmax(0, 1fr) 56px; }
  .gta-medidor li small { display: none; }
  .gta-num { display: none; }
  .gta-cal .ec-dia { min-height: 64px; }
}
main .painel-cab h2 > svg { width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; flex: none; }
.gta-sec { margin-bottom: var(--e-4); }
dialog.ec-dlg > form { padding: var(--e-5) var(--e-6); }
/* fase 3 GTA: marca Jogo/Gente real, ajuste do vídeo (corte), opções de fonte/proteção */
.ec-cat-jogo { background: color-mix(in srgb, #2B54F4 18%, transparent); }
.ec-cat-gente { background: color-mix(in srgb, #FF6A34 25%, transparent); }
.ec-dlg-midia { width: min(900px, calc(100vw - 24px)); }
.ec-sub { margin: var(--e-4) 0 var(--e-2); font-size: 15px; }
.ec-dica { margin: 0 0 var(--e-3); font-size: 13px; }
.ec-chk-campo { align-self: end; flex: 1 1 200px; }
.ec-dlg-midia .ec-prev { width: 100%; max-height: 60vh; object-fit: contain; border-radius: 12px; background: #111; }
/* `dialog.es-dlg` (app.css, 560px) ganhava das larguras abaixo: repete com o mesmo peso */
dialog.ec-dlg-tpl { width: min(1000px, calc(100vw - 24px)); }
dialog.ec-dlg-midia, dialog.ec-dlg-agendar { width: min(900px, calc(100vw - 24px)); }
dialog.ec-dlg-post { width: min(820px, calc(100vw - 24px)); }
.gta-pc-off svg, .gta-ini-alerta svg, .gta-nota svg, .gta-alerta svg { width: 18px; height: 18px; flex: none; }

/* capa do vídeo do GTA (clica e assiste) */
.gta-vid { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; }
.gta-vid > :not(.gta-capa) { grid-column: 2; }
.gta-capa { grid-row: 1 / span 3; position: relative; width: 54px; aspect-ratio: 9 / 16; padding: 0; border: 1px solid var(--linha); border-radius: 6px; overflow: hidden; background: #000; cursor: pointer; }
.gta-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gta-capa span { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 18px; text-shadow: 0 1px 4px #000; opacity: .85; }
.gta-capa:hover span { opacity: 1; }
dialog.gta-player { width: fit-content; max-width: 96vw; max-height: 96vh; overflow: hidden; padding: 12px; border: 0; border-radius: 12px; background: #000; display: grid; gap: 10px; justify-items: center; }
dialog.gta-player::backdrop { background: rgb(0 0 0 / .75); }
dialog.gta-player video { height: min(calc(100dvh - 110px), calc((96vw - 24px) * 16 / 9)); width: auto; aspect-ratio: 9 / 16; object-fit: contain; background: #000; display: block; }

/* ================= GTA · Métricas ================= */
/* cor por rede (identidade, ordem fixa; validada no dataviz: CVD adjacente ≥ 8,4 claro/escuro). Contraste baixo no claro
   em 3 cores -> a tela tem legenda + "Ver em tabela" + números escritos ao lado de cada barra. */
:root { --gm-tiktok: #2a78d6; --gm-instagram: #eb6834; --gm-youtube: #1baf7a; --gm-kwai: #eda100; --gm-x: #e87ba4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { --gm-tiktok: #3987e5; --gm-instagram: #d95926; --gm-youtube: #199e70; --gm-kwai: #c98500; --gm-x: #d55181; } }
:root[data-theme="dark"] { --gm-tiktok: #3987e5; --gm-instagram: #d95926; --gm-youtube: #199e70; --gm-kwai: #c98500; --gm-x: #d55181; }

.gm-topo { display: grid; grid-template-columns: minmax(220px, 1fr) 3fr; gap: var(--e-4); margin-bottom: var(--e-4); align-items: stretch; }
.gm-total { padding: var(--e-4) var(--e-5); display: flex; flex-direction: column; gap: 6px; }
.gm-heroi { font: 700 var(--t-32) var(--f-num); letter-spacing: -.04em; }
.gm-grande { font: 700 var(--t-24) var(--f-num); letter-spacing: -.04em; }
.gm-v { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.gm-lin { margin: 0; font-size: 13px; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.gm-como { margin: auto 0 0; padding-top: 6px; }
.gm-var { font: 600 12px/1 var(--f-num); white-space: nowrap; }
.gm-var.sobe { color: var(--verde-texto); } .gm-var.desce { color: var(--verm-texto); }
.gm-redes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--e-3); }
.gm-rede { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-md); box-shadow: var(--s-1), var(--realce); padding: var(--e-3) var(--e-4); display: flex; flex-direction: column; gap: 4px; position: relative; min-width: 0; }
.gm-rede-cab { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tinta-2); }
.gm-pt { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.gm-spark-c { position: absolute; top: 10px; right: 10px; opacity: .9; }
.gm-spark { display: block; }
.gm-filtros { display: flex; gap: var(--e-3); align-items: center; flex-wrap: wrap; margin: 0 0 var(--e-3); }
.gm-sel select { min-height: 32px; border: 1px solid var(--linha); border-radius: var(--r-sm); background: var(--campo-fundo); color: var(--tinta); font: 600 13px var(--f-texto); padding: 0 8px; }
.gm-passo { margin-bottom: var(--e-4); border-left: 4px solid var(--azul); }
.gm-passo h2 svg { width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; color: var(--azul-texto); }
.gm-passos { margin: 0 0 var(--e-3); padding-left: 22px; display: grid; gap: var(--e-3); }
.gm-passo-t { margin: 0; font: 600 var(--t-16) var(--f-texto); }
.gm-base { margin: 2px 0 0; font-size: 13px; color: var(--tinta-3); }
.gm-faltas { margin: 0 0 var(--e-2); font-size: 13px; }
.gm-faltas summary { cursor: pointer; font-weight: 600; color: var(--tinta-2); }
.gm-faltas ul { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; color: var(--tinta-2); }
.gm-leg { margin-bottom: var(--e-2); }
.gm-leg i { width: 14px; height: 3px; border-radius: 2px; }
.gm-graf { height: 260px; }
.gm-tab-dados { margin-top: var(--e-3); font-size: 13px; }
.gm-tab-dados summary { cursor: pointer; color: var(--tinta-2); font-weight: 600; }
.gm-tab-dados .tabela-rolo { max-height: 280px; overflow: auto; margin-top: 6px; }
.gm-vazio { margin: var(--e-4) 0; }
.gm-h { margin: var(--e-6) 0 var(--e-3); font: 700 var(--t-20) var(--f-titulo); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.gm-h small { font: 400 13px var(--f-texto); }
.gm-ranks { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--e-4); margin-bottom: var(--e-4); }
.gm-rank ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gm-rank li { display: grid; grid-template-columns: minmax(70px, 7.5em) 1fr auto auto; gap: 8px; align-items: center; font-size: 13px; }
.gm-rank li .tag { grid-column: 1 / -1; justify-self: start; margin-top: -4px; font-size: 11px; padding: 0 6px; }
.gm-rank li.poucos .gm-barra i { opacity: .45; }
.gm-rk-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.gm-barra { height: 10px; background: var(--papel-3); border-radius: 0 4px 4px 0; overflow: hidden; }
.gm-barra i { display: block; height: 100%; background: var(--azul); border-radius: 0 4px 4px 0; }
.gm-rank .num { font-size: 13px; }
.gm-tab td { padding-top: 6px; padding-bottom: 6px; vertical-align: top; }
.gm-tab .gta-capa { width: 40px; display: block; }
.gm-sem-capa { display: block; width: 40px; aspect-ratio: 9 / 16; border-radius: 6px; background: var(--papel-3); border: 1px dashed var(--linha-forte); }
.gm-c-frase { white-space: normal !important; min-width: 220px; max-width: 340px; }
.gm-frase { display: block; font-weight: 600; }
.gm-marcas { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 2px; font-size: 12px; }
.gm-marcas .tag { font-size: 11px; padding: 0 6px; }
.gm-c-redes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 12px; }
.gm-c-redes li { display: grid; grid-template-columns: 82px 92px auto; gap: 6px; align-items: baseline; }
.gm-ord { background: none; border: 0; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.gm-ord:hover { color: var(--tinta); }
@media (max-width: 760px) {
  .gm-topo { grid-template-columns: minmax(0, 1fr); }
  .gm-redes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .gm-rede { padding: 10px 12px; }
  .gm-spark-c { display: none; }
  .gm-graf { height: 220px; }
  .gm-ranks { grid-template-columns: minmax(0, 1fr); }
  .gm-filtros .dica { flex-basis: 100%; }
}
.gm-mais { text-align: center; }
@media (max-width: 760px) {
  /* tabela vira cartão: capa | data + frase, e os 4 números numa linha (sem rolar de lado) */
  .gm-tab thead { display: none; }
  .gm-tab, .gm-tab tbody { display: block; }
  .gm-tab tr { display: grid; grid-template-columns: 48px repeat(4, minmax(0, 1fr)); column-gap: 8px; row-gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--linha); }
  .gm-tab td { display: block; border: 0 !important; padding: 0 !important; white-space: normal; }
  .gm-tab .gm-c-capa { grid-row: 1 / span 3; }
  .gm-tab .gm-c-data, .gm-tab .gm-c-frase { grid-column: 2 / -1; min-width: 0; max-width: none; }
  .gm-tab .gm-n { text-align: left !important; font-size: 13px; }
  .gm-tab .gm-n::before { content: attr(data-rot); display: block; font: 600 11px var(--f-texto); color: var(--tinta-3); }
  .gm-tab .gm-c-redes { grid-column: 1 / -1; margin-top: 4px; }
  .gm-c-redes li { grid-template-columns: 82px 1fr auto; }
}
/* na tela Métricas a bolinha da rede usa a MESMA cor do gráfico (cor = rede em toda a tela) */
.gm-tab .gta-rn::before { box-shadow: none !important; }
.gm-tab .gta-rn.r-tiktok::before { background: var(--gm-tiktok); } .gm-tab .gta-rn.r-instagram::before { background: var(--gm-instagram); }
.gm-tab .gta-rn.r-youtube::before { background: var(--gm-youtube); } .gm-tab .gta-rn.r-kwai::before { background: var(--gm-kwai); }
.gm-tab .gta-rn.r-x::before { background: var(--gm-x); }