/* Firma Raw · Painel de audiência
   Identidade: papel e tinta, Neue Montreal nos textos, MondWest (pixel) em números e rótulos técnicos.
   A interface é toda papel e tinta. Cor só em dois papéis: status (sempre com rótulo) e a identidade
   de cada rede nos gráficos e marcas: YouTube vermelho, Instagram roxo-magenta, TikTok verde-água
   com a textura pontilhada da marca. Paleta validada (separação para daltonismo e contraste) no claro e no escuro. */

@font-face { font-family: "FR Montreal"; src: url("fonts/montreal-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "FR Montreal"; src: url("fonts/montreal-500.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "FR MondWest"; src: url("fonts/mondwest.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --paper: #F2F2F0; --soft: #E4E4E1; --panel: #D8D8D6; --ink: #0A0A0A; --on-ink: #F2F2F0;
  --grey: #595957; --grey2: #8A8A88; --grey3: #C4C4C1; --line: rgba(10,10,10,.12); --line2: rgba(10,10,10,.22); --dot: rgba(10,10,10,.14);
  --yt: #E5202E; --ig: #A33BB8; --tt: #0E9AA0; --tt-dot: rgba(10,10,10,.30);
  --ok: #1E7A4C; --ok-bg: rgba(30,122,76,.12); --warn: #8F5D0E; --warn-bg: rgba(242,184,75,.22); --bad: #B42318; --bad-bg: rgba(180,35,24,.10);
  --side: #0A0A0A; --side-tx: #F2F2F0; --side-tx2: #8A8A88; --side-line: #222220; --side-hover: #161615;
  --f: "FR Montreal", "Neue Montreal", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --px: "FR MondWest", "PP MondWest", "Courier New", ui-monospace, monospace;
  --r: 18px; --r-s: 12px;
  --sombra: 0 1px 2px rgba(10,10,10,.04), 0 12px 32px rgba(10,10,10,.06);
  color-scheme: light;
}
:root[data-tema="escuro"] {
  --paper: #121211; --soft: #0A0A0A; --panel: #1A1A19; --ink: #F2F2F0; --on-ink: #0A0A0A;
  --grey: #A3A3A0; --grey2: #737371; --grey3: #3A3A38; --line: rgba(242,242,240,.12); --line2: rgba(242,242,240,.22); --dot: rgba(242,242,240,.10);
  --yt: #F5454B; --ig: #B26BE3; --tt: #1BA8A8; --tt-dot: rgba(10,10,10,.34);
  --ok: #5BD69A; --ok-bg: rgba(91,214,154,.12); --warn: #F2B84B; --warn-bg: rgba(242,184,75,.13); --bad: #FF7A6B; --bad-bg: rgba(255,122,107,.12);
  --side: #050505; --side-line: #1C1C1B; --side-hover: #121211;
  --sombra: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--soft); color: var(--ink); font-family: var(--f); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -.02em; line-height: 1.08; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--grey2); }
a:hover { text-decoration-color: var(--ink); }
button, input, select, textarea { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
svg.ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
.px { font-family: var(--px); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.mut { color: var(--grey); }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bullet::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 8px; vertical-align: 2px; }

/* ---------- estrutura ---------- */
.app { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.lado { background: var(--side); color: var(--side-tx); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 22px; padding: 22px 14px 16px; overflow-y: auto; z-index: 30; }
.lado-logo { display: flex; flex-direction: column; gap: 8px; padding: 2px 10px 4px; color: var(--side-tx); text-decoration: none; }
.lado-logo svg { width: 150px; height: auto; fill: currentColor; }
.lado-logo .px { color: var(--side-tx2); font-size: 11px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--side-tx2); text-decoration: none; font-weight: 500; font-size: 14.5px; transition: background .15s, color .15s; }
.nav a:hover { background: var(--side-hover); color: var(--side-tx); }
.nav a[aria-current="page"] { background: #1A1A19; color: var(--side-tx); box-shadow: inset 0 0 0 1px #2A2A28; }
.nav a svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav .cont { margin-left: auto; font-family: var(--px); font-size: 11px; background: var(--side-tx); color: var(--side); border-radius: 999px; padding: 0 7px; line-height: 18px; }
.nav .cont:empty { display: none; }
.lado-sep { height: 1px; background: var(--side-line); margin: 0 6px; }
.lado-pe { margin-top: auto; display: flex; flex-direction: column; gap: 14px; padding: 0 6px; }
.lado-rot { font-family: var(--px); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--side-tx2); }
.ws { display: grid; grid-template-columns: 1fr 1fr; background: #141413; border: 1px solid var(--side-line); border-radius: 999px; padding: 3px; }
.ws button { border: 0; background: none; color: var(--side-tx2); border-radius: 999px; padding: 7px 8px; font-size: 13px; font-weight: 500; cursor: pointer; }
.ws button[aria-pressed="true"] { background: var(--side-tx); color: var(--side); }
.sinais { display: flex; flex-direction: column; gap: 6px; }
.sinal { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; font-size: 12.5px; color: var(--side-tx2); }
.sinal i { width: 7px; height: 7px; border-radius: 50%; background: #444; }
.sinal i.ok { background: #5BD69A; } .sinal i.warn { background: #F2B84B; } .sinal i.bad { background: #FF7A6B; } .sinal i.man { background: #8A8A88; }
.sinal b { color: var(--side-tx); font-weight: 500; }
.lado-acoes { display: flex; gap: 8px; }
.lado-acoes button { flex: 1; border: 1px solid var(--side-line); background: none; color: var(--side-tx2); border-radius: 999px; padding: 7px 10px; font-size: 12.5px; cursor: pointer; }
.lado-acoes button:hover { color: var(--side-tx); border-color: #333; }

.principal { min-width: 0; display: flex; flex-direction: column; }
.topo-movel { display: none; }
.conteudo { padding: clamp(16px, 2.6vw, 34px); padding-bottom: 64px; display: flex; flex-direction: column; gap: 18px; max-width: 1480px; width: 100%; margin: 0 auto; }

/* tarja de demonstração */
.tarja { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 9px clamp(16px, 2.6vw, 34px); background: var(--ink); color: var(--on-ink);
  background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgba(127,127,127,.18) 14px 16px); font-size: 13.5px; }
.tarja .px { background: var(--on-ink); color: var(--ink); padding: 2px 8px; border-radius: 4px; }
.tarja-curto { display: none; }
.tarja button { margin-left: auto; border: 1px solid currentColor; background: none; color: inherit; border-radius: 999px; padding: 4px 12px; font-size: 12.5px; cursor: pointer; }
.aviso { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line2); background: var(--paper); border-radius: var(--r-s); padding: 12px 14px; font-size: 14px; }
.aviso.warn { border-color: transparent; background: var(--warn-bg); }
.aviso.bad { border-color: transparent; background: var(--bad-bg); }
.aviso .ac { margin-left: auto; white-space: nowrap; }

/* cabeçalho de página */
.cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.cab-txt { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cab h1 { font-size: clamp(30px, 4.2vw, 48px); letter-spacing: -.035em; }
.cab .lead { font-size: 15.5px; color: var(--grey); max-width: 68ch; }
.cab-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.coletas-pilulas { display: flex; gap: 6px; flex-wrap: wrap; }
.pilula { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line2); border-radius: 999px; padding: 5px 11px; font-size: 12.5px; white-space: nowrap; background: var(--paper); }
.pilula i { width: 7px; height: 7px; border-radius: 50%; background: var(--grey2); }
.pilula i.ok { background: var(--ok); } .pilula i.warn { background: #D69A2D; } .pilula i.bad { background: var(--bad); }
.pilula.solida { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }

/* botões e campos */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--ink); background: var(--ink); color: var(--on-ink); border-radius: 999px; padding: 9px 16px; font-size: 13.5px; font-weight: 500; cursor: pointer; white-space: nowrap; text-decoration: none; transition: opacity .15s, background .15s; }
.btn:hover { opacity: .88; }
.btn.sec { background: transparent; color: var(--ink); border-color: var(--line2); }
.btn.sec:hover { border-color: var(--ink); opacity: 1; }
.btn.min { padding: 6px 12px; font-size: 12.5px; }
.btn[disabled], .btn.carregando { opacity: .45; cursor: not-allowed; }
.btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.link-btn { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--grey2); }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo > span { font-family: var(--px); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--grey); }
.inp, .sel { width: 100%; border: 1px solid var(--line2); background: var(--paper); border-radius: 10px; padding: 9px 12px; min-height: 40px; }
.sel { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
.inp:focus, .sel:focus { outline: none; border-color: var(--ink); }
textarea.inp { min-height: 84px; resize: vertical; }
.ajuda { font-size: 12.5px; color: var(--grey); line-height: 1.45; }

/* segmentados e chips */
.seg { display: inline-flex; background: var(--paper); border: 1px solid var(--line2); border-radius: 999px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: none; border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 500; color: var(--grey); cursor: pointer; white-space: nowrap; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line2); background: var(--paper); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 500; cursor: pointer; color: var(--grey); }
.chip[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); }
.chip .marca { width: 10px; height: 10px; border-radius: 3px; }

/* barra de filtros */
.filtros { position: sticky; top: 0; z-index: 12; display: flex; flex-direction: column; gap: 10px; background: color-mix(in srgb, var(--soft) 92%, transparent); backdrop-filter: blur(8px); padding: 10px 0; margin: -6px 0 -4px; }
.com-tarja .filtros { top: 40px; }
.filtros-linha { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filtros .sel { width: auto; min-width: 150px; min-height: 36px; padding-top: 6px; padding-bottom: 6px; font-size: 13.5px; border-radius: 999px; }
.filtros .inp-data { min-height: 36px; padding: 5px 10px; border-radius: 999px; font-size: 13px; }
.filtros-limpar { font-size: 13px; }
.leitura { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.leitura-expl { font-size: 13px; color: var(--grey); max-width: 70ch; }
.filtros-movel { display: none; }

/* grade e cartões */
.grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.s12 { grid-column: span 12; } .s8 { grid-column: span 8; } .s7 { grid-column: span 7; } .s6 { grid-column: span 6; } .s5 { grid-column: span 5; } .s4 { grid-column: span 4; } .s3 { grid-column: span 3; }
.cartao { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cartao-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.cartao-cab h2 { font-size: 21px; }
.cartao-cab .px { color: var(--grey); }
.etq { font-family: var(--px); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--grey); border: 1px solid var(--grey3); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.nota { font-size: 12.5px; color: var(--grey); line-height: 1.5; }
.nota b { color: var(--ink); font-weight: 500; }

/* visor (destaque) */
.visor { position: relative; background: var(--panel); border-radius: var(--r); padding: 46px 22px 22px; background-image: radial-gradient(circle at center, var(--dot) 1.1px, transparent 1.6px); background-size: 12px 12px; min-width: 0; }
.visor .c { position: absolute; width: 18px; height: 18px; border: 0 solid var(--ink); }
.visor .c.tl { left: 10px; top: 10px; border-left-width: 2px; border-top-width: 2px; }
.visor .c.tr { right: 10px; top: 10px; border-right-width: 2px; border-top-width: 2px; }
.visor .c.bl { left: 10px; bottom: 10px; border-left-width: 2px; border-bottom-width: 2px; }
.visor .c.br { right: 10px; bottom: 10px; border-right-width: 2px; border-bottom-width: 2px; }
.visor-meta { position: absolute; left: 36px; right: 36px; top: 12px; display: flex; gap: 10px; color: var(--grey); flex-wrap: wrap; align-items: center; }
.visor-meta b { font-weight: 400; color: var(--ink); background: var(--paper); padding: 1px 6px; }
.rec { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--bad); animation: pisca 1.6s steps(2, start) infinite; }
@keyframes pisca { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .rec { animation: none; } }
.lider { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; align-items: center; }
.lider-capa { border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--soft); box-shadow: var(--sombra); }
.lider-capa img, .lider-capa svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.lider-txt { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lider-txt h2 { font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -.03em; }
.lider-txt .conv { font-size: 16px; }
.big { font-family: var(--px); font-size: clamp(38px, 4.4vw, 58px); line-height: .95; letter-spacing: -.02em; }
.big small { display: block; font-family: var(--px); font-size: 12px; letter-spacing: .04em; color: var(--grey); margin-top: 8px; text-transform: uppercase; }

/* indicadores */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.kpi { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.kpi.tinta { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.kpi.tinta .px, .kpi.tinta .nota, .kpi.tinta .mut { color: var(--on-ink); opacity: .72; }
.kpi-rot { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.kpi-val { font-family: var(--px); font-size: clamp(30px, 3vw, 40px); line-height: 1; letter-spacing: -.01em; overflow-wrap: anywhere; }
.kpi-val.nd { font-size: 22px; color: var(--grey); }
.kpi-delta { font-family: var(--px); font-size: 12.5px; letter-spacing: .02em; }
.kpi-delta.sobe::before { content: "+ "; }
.kpi-split { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--grey); }
.kpi.tinta .kpi-split { color: var(--on-ink); opacity: .75; }
.kpi-split span { display: inline-flex; gap: 5px; align-items: center; }
.mini-kpis { display: flex; gap: 8px; flex-wrap: wrap; }
.mini-kpi { display: inline-flex; gap: 8px; align-items: baseline; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 13px; }
.mini-kpi b { font-family: var(--px); font-weight: 400; font-size: 14px; }

/* respostas rápidas */
.respostas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.resp { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.resp:not(:nth-child(3n+1)) { padding-left: 16px; border-left: 1px solid var(--line); }
.resp .q { font-size: 12.5px; color: var(--grey); }
.resp .a { font-size: 16px; font-weight: 500; letter-spacing: -.01em; line-height: 1.25; }
.resp .a a { text-decoration: none; }
.resp .a a:hover { text-decoration: underline; }
.resp .v { font-family: var(--px); font-size: 13px; color: var(--grey); }

/* listas com capa */
.lista { display: flex; flex-direction: column; }
.item { display: grid; grid-template-columns: 26px 96px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.item:last-child { border-bottom: 0; }
.item:hover .item-tit { text-decoration: underline; text-underline-offset: 3px; }
.item-pos { font-family: var(--px); font-size: 15px; color: var(--grey); }
.item-capa { width: 96px; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--soft); }
.item-capa img, .item-capa svg { width: 100%; height: 100%; object-fit: cover; }
.item-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.item-tit { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-sub { font-size: 12.5px; color: var(--grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-val { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.item-val b { font-family: var(--px); font-weight: 400; font-size: 17px; }
.barra-dist { display: flex; height: 6px; width: 120px; border-radius: 999px; overflow: hidden; background: var(--soft); }
.barra-dist span { height: 100%; }
.fx-yt { background: var(--yt); } .fx-ig { background: var(--ig); }
.fx-tt { background-color: var(--tt); background-image: radial-gradient(circle, var(--tt-dot) .9px, transparent 1.2px); background-size: 4px 4px; }

/* cards de conteúdo */
.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
.post { display: flex; flex-direction: column; gap: 8px; min-width: 0; text-decoration: none; }
.post-mid { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 9 / 13; background: var(--soft); }
.post-mid img, .post-mid svg { width: 100%; height: 100%; object-fit: cover; }
.post-mid .tag { position: absolute; left: 8px; top: 8px; }
.post-mid .rank { position: absolute; right: 8px; top: 8px; font-family: var(--px); background: var(--paper); color: var(--ink); border-radius: 4px; padding: 0 6px; font-size: 13px; }
.post-tit { font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-num { display: flex; gap: 10px; font-size: 12px; color: var(--grey); flex-wrap: wrap; }
.post-num b { font-family: var(--px); font-weight: 400; color: var(--ink); font-size: 15px; }
.tag-rede { display: inline-flex; align-items: center; gap: 5px; background: var(--paper); color: var(--ink); border-radius: 999px; padding: 2px 8px 2px 4px; font-size: 11.5px; font-weight: 500; }
.ico-rede { width: 16px; height: 16px; flex: none; display: inline-grid; place-items: center; border-radius: 5px; background: var(--ink); color: var(--on-ink); }
.ico-rede svg { width: 10px; height: 10px; fill: currentColor; }
.ico-rede.r-youtube { background: var(--yt); color: #FFF; }
.ico-rede.r-instagram { background: var(--ig); color: #FFF; }
.ico-rede.r-tiktok { background: var(--tt); color: #FFF; }

/* tabelas */
.tab-caixa { overflow-x: auto; border-radius: 12px; }
.tab { width: 100%; border-collapse: collapse; font-size: 14px; }
.tab th { position: sticky; top: 0; z-index: 1; background: var(--paper); text-align: left; padding: 0; border-bottom: 1px solid var(--ink); white-space: nowrap; }
.tab th button, .tab th .th { display: flex; gap: 6px; align-items: center; width: 100%; background: none; border: 0; padding: 10px 10px; font-family: var(--px); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--grey); cursor: pointer; text-align: inherit; }
.tab th.n button, .tab th.n .th { justify-content: flex-end; }
.tab th[aria-sort] button { color: var(--ink); }
.tab th[aria-sort="descending"] button::after { content: "↓"; }
.tab th[aria-sort="ascending"] button::after { content: "↑"; }
.tab td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tab tr.clic { cursor: pointer; }
.tab tr.clic:hover td { background: color-mix(in srgb, var(--soft) 55%, transparent); }
.tab .n { text-align: right; font-family: var(--px); font-size: 14.5px; white-space: nowrap; }
.tab .n.forte { font-size: 17px; }
.tab .pos { font-family: var(--px); font-size: 16px; color: var(--grey); width: 36px; }
.tab .ep { display: flex; gap: 12px; align-items: center; min-width: 240px; }
.tab .ep .item-capa { width: 88px; flex: none; }
.tab td.rede { width: 112px; }
.tab .pend-mid { flex: none; }
.tab .tit { font-weight: 500; line-height: 1.25; }
.tab .sub { font-size: 12.5px; color: var(--grey); }
.tab .nd { color: var(--grey2); font-family: var(--f); font-size: 12px; }
.tab .bar-cel { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.tab .bar-cel .trilho { width: 100%; min-width: 80px; height: 4px; background: var(--soft); border-radius: 999px; overflow: hidden; }
.tab .bar-cel .trilho span { display: block; height: 100%; background: var(--ink); }
.coroa { font-size: 11.5px; color: var(--grey); white-space: nowrap; }
.coroa b { color: var(--ink); font-weight: 500; }
.acoes-cel { display: flex; gap: 6px; justify-content: flex-end; }
.btn.ico { padding: 7px; width: 32px; height: 32px; }
.cob { font-family: var(--px); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.cob.parcial { background: var(--warn-bg); color: var(--warn); }
.cob.sem { background: var(--soft); color: var(--grey); }
.cob.and { background: var(--soft); color: var(--ink); }
.cob.ok { background: var(--ok-bg); color: var(--ok); }
.cards-movel { display: none; }

/* ranking: controles */
.controles { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.busca { position: relative; flex: 1 1 220px; max-width: 340px; }
.busca .inp { padding-left: 36px; border-radius: 999px; min-height: 38px; }
.busca svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; stroke: var(--grey); fill: none; stroke-width: 2; }

/* episódio */
.ep-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.ep-hero .lider-capa { box-shadow: var(--sombra); }
.ep-titulo { display: flex; flex-direction: column; gap: 12px; }
.ep-titulo h1 { font-size: clamp(30px, 4vw, 50px); letter-spacing: -.035em; }
.ep-titulo .conv { font-size: 18px; }
.voltar { display: inline-flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--grey); text-decoration: none; }
.voltar:hover { color: var(--ink); }
.plat-linhas { display: flex; flex-direction: column; gap: 14px; }
.plat-linha { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.rede-bloco { display: flex; flex-direction: column; gap: 6px; }
.rede-bloco .topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rede-bloco .topo b { font-family: var(--px); font-weight: 400; font-size: 18px; }
.rede-bloco .trilho { height: 10px; background: var(--soft); border-radius: 999px; overflow: hidden; }
.rede-bloco .trilho span { display: block; height: 100%; border-radius: 999px; }
.plat-linha .trilho { height: 10px; background: var(--soft); border-radius: 999px; overflow: hidden; }
.plat-linha .trilho span { display: block; height: 100%; border-radius: 999px; }
.plat-linha .v { font-family: var(--px); font-size: 15px; text-align: right; min-width: 84px; }
.plat-linha .det { grid-column: 2 / -1; font-size: 12px; color: var(--grey); margin-top: -8px; }

/* gráficos */
.graf { position: relative; width: 100%; min-height: 220px; }
.graf svg { display: block; width: 100%; height: auto; overflow: visible; }
.graf .eixo text, .graf text.rot { font-family: var(--px); font-size: 11px; fill: var(--grey); }
.graf .grade-l line { stroke: var(--line); }
.graf .base { stroke: var(--line2); }
.graf-leg { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--grey); }
.graf-leg span { display: inline-flex; gap: 6px; align-items: center; }
.graf-leg i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.dica { position: absolute; z-index: 40; pointer-events: none; background: var(--ink); color: var(--on-ink); border-radius: 10px; padding: 9px 11px; font-size: 12.5px; line-height: 1.45; min-width: 150px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.dica .h { font-family: var(--px); text-transform: uppercase; letter-spacing: .04em; opacity: .7; font-size: 11px; margin-bottom: 4px; }
.dica .l { display: flex; justify-content: space-between; gap: 14px; }
.dica .l b { font-family: var(--px); font-weight: 400; }
.dica .l span { display: inline-flex; align-items: center; gap: 6px; }
.dica .l i { width: 8px; height: 8px; border-radius: 2px; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.graf-vazio { display: grid; place-items: center; min-height: 200px; text-align: center; color: var(--grey); font-size: 13.5px; border: 1px dashed var(--line2); border-radius: 12px; padding: 20px; }

/* pendências */
.pend { display: grid; grid-template-columns: 74px minmax(0, 1fr) minmax(260px, auto); gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.pend-mid { width: 74px; aspect-ratio: 9 / 13; border-radius: 8px; overflow: hidden; background: var(--soft); }
.pend-mid img, .pend-mid svg { width: 100%; height: 100%; object-fit: cover; }
.pend-txt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pend-txt .tit { font-weight: 500; line-height: 1.3; }
.sug { display: flex; flex-direction: column; gap: 4px; background: var(--soft); border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.sug .forca { font-family: var(--px); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.sug .forca.forte { color: var(--ok); }
.pend-acoes { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.pend-acoes .linha { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.pend-acoes .sel { width: 210px; min-height: 34px; padding-top: 5px; padding-bottom: 5px; font-size: 13px; }

/* conexões */
.conexoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.con { display: flex; flex-direction: column; gap: 14px; }
.con-cab { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.con-cab h2 { font-size: 22px; display: flex; gap: 10px; align-items: center; }
.estado { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.estado i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.estado.ok { background: var(--ok-bg); color: var(--ok); }
.estado.warn { background: var(--warn-bg); color: var(--warn); }
.estado.bad { background: var(--bad-bg); color: var(--bad); }
.estado.neutro { background: var(--soft); color: var(--grey); }
.dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; font-size: 13.5px; }
.dl dt { color: var(--grey); }
.dl dd { margin: 0; text-align: right; font-weight: 500; overflow-wrap: anywhere; }
.metr { display: flex; flex-wrap: wrap; gap: 6px; }
.metr span { font-size: 12px; border-radius: 999px; padding: 3px 9px; border: 1px solid var(--line2); }
.metr span.nao { color: var(--grey2); text-decoration: line-through; border-style: dashed; }
.passos { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.passos li::marker { font-family: var(--px); color: var(--grey); }
.copiavel { display: flex; gap: 6px; align-items: center; background: var(--soft); border-radius: 8px; padding: 6px 8px; font-family: var(--px); font-size: 12px; overflow-wrap: anywhere; }
.copiavel button { margin-left: auto; flex: none; }
details.guia { border-top: 1px solid var(--line); padding-top: 10px; }
details.guia summary { cursor: pointer; font-weight: 500; font-size: 14px; list-style: none; display: flex; justify-content: space-between; }
details.guia summary::after { content: "+"; font-family: var(--px); }
details.guia[open] summary::after { content: "−"; }
details.guia > div { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; }

/* importar */
.solta { border: 1.5px dashed var(--line2); border-radius: 14px; padding: 26px; text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; cursor: pointer; background: var(--paper); }
.solta.sobre { border-color: var(--ink); background: var(--soft); }
.mapa { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.form-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }

/* modal / gaveta */
.fundo { position: fixed; inset: 0; background: rgba(10,10,10,.42); z-index: 60; display: flex; justify-content: flex-end; }
.gaveta { width: min(560px, 100%); height: 100%; background: var(--paper); overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 16px; box-shadow: -12px 0 40px rgba(0,0,0,.15); }
.gaveta-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.gaveta-cab h2 { font-size: 24px; }
.gaveta-pe { display: flex; gap: 8px; justify-content: space-between; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.x { border: 0; background: var(--soft); border-radius: 999px; width: 34px; height: 34px; cursor: pointer; font-size: 18px; line-height: 1; }

/* avisos flutuantes */
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 80; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 36px)); }
.toast { background: var(--ink); color: var(--on-ink); border-radius: 12px; padding: 11px 14px; font-size: 13.5px; box-shadow: 0 10px 30px rgba(0,0,0,.2); display: flex; gap: 10px; align-items: flex-start; }
.toast.bad { background: var(--bad); color: #fff; }

/* estados */
.esq { background: linear-gradient(90deg, var(--soft) 0%, color-mix(in srgb, var(--soft) 40%, var(--paper)) 50%, var(--soft) 100%); background-size: 200% 100%; animation: brilho 1.3s linear infinite; border-radius: 10px; }
@keyframes brilho { to { background-position: -200% 0; } }
.vazio { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding: 26px; border: 1px dashed var(--line2); border-radius: var(--r); background: var(--paper); }
.vazio h3 { font-size: 20px; }
.vazio p { color: var(--grey); max-width: 60ch; }
.erro-pag { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding: 28px; border-radius: var(--r); background: var(--bad-bg); }

/* entrada: tela cheia, marca à esquerda (visor de câmera), formulário à direita */
.entrada { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(400px, 1fr); background: var(--paper); }
.entrada-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: clamp(56px, 6vw, 88px) clamp(32px, 5vw, 80px) clamp(40px, 5vw, 72px); background-color: #0A0A0A; color: #F2F2F0; background-image: radial-gradient(circle at center, rgba(242,242,240,.11) 1.1px, transparent 1.6px); background-size: 14px 14px; }
.entrada-hero .c { position: absolute; width: 30px; height: 30px; border: 0 solid #F2F2F0; }
.entrada-hero .c.tl { left: 22px; top: 22px; border-left-width: 2px; border-top-width: 2px; }
.entrada-hero .c.tr { right: 22px; top: 22px; border-right-width: 2px; border-top-width: 2px; }
.entrada-hero .c.bl { left: 22px; bottom: 22px; border-left-width: 2px; border-bottom-width: 2px; }
.entrada-hero .c.br { right: 22px; bottom: 22px; border-right-width: 2px; border-bottom-width: 2px; }
.entrada-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: #8A8A88; }
.entrada-meta .rec { width: 9px; height: 9px; background: #FF5A4A; }
.entrada-meta b { font-weight: 400; color: #0A0A0A; background: #F2F2F0; padding: 1px 7px; }
.entrada-marca { display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 32px); max-width: 760px; }
.entrada-marca svg.logo { width: min(100%, 620px); height: auto; fill: #F2F2F0; }
.entrada-titulo { font-size: clamp(24px, 2.5vw, 38px); line-height: 1.12; letter-spacing: -.02em; max-width: 21ch; text-wrap: balance; }
.entrada-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 12.5px; }
.entrada-lista li { border: 1px solid rgba(242,242,240,.26); border-radius: 999px; padding: 5px 12px; color: #D8D8D6; }

.entrada-painel { display: flex; flex-direction: column; align-items: center; padding: 40px clamp(24px, 4vw, 64px) 28px; background: var(--paper); }
.entrada-caixa { width: min(380px, 100%); margin: auto 0; display: flex; flex-direction: column; gap: 10px; padding: 24px 0; }
.entrada-caixa > .px { font-size: 12.5px; }
.entrada-caixa h1 { font-size: clamp(32px, 3vw, 42px); }
.entrada-form { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.entrada-rot { font-size: 12px; color: var(--grey); }
.entrada-senha { position: relative; }
.entrada-senha .inp { min-height: 54px; font-size: 16px; padding: 12px 54px 12px 16px; border-radius: 14px; background: var(--paper); border-color: var(--line2); }
.entrada-senha .inp:hover { border-color: var(--grey2); }
.entrada-senha .inp:focus { border-color: var(--ink); box-shadow: 0 0 0 4px var(--line); }
.entrada-senha .inp[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 4px var(--bad-bg); }
.entrada-olho { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: none; border-radius: 10px; color: var(--grey); cursor: pointer; }
.entrada-olho:hover { color: var(--ink); background: var(--soft); }
.entrada-olho svg.ic { width: 20px; height: 20px; }
.entrada-caps { font-size: 12px; color: var(--warn); }
.entrada-erro { font-size: 13.5px; color: var(--bad); background: var(--bad-bg); border-radius: 10px; padding: 10px 12px; }
.entrada-btn { min-height: 54px; font-size: 15.5px; margin-top: 8px; gap: 10px; }
.entrada-btn svg.ic { width: 18px; height: 18px; transition: transform .15s; }
.entrada-btn:hover:not([disabled]) svg.ic { transform: translateX(3px); }
.entrada-btn[disabled] { opacity: .72; cursor: progress; }
.entrada-ajuda { margin-top: 14px; }
.entrada-rodape { width: min(380px, 100%); display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--grey); }
.entrada-rodape .px { font-size: 11.5px; }
.treme { animation: treme .34s ease; }
@keyframes treme { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .treme { animation: none; } .entrada-btn svg.ic { transition: none; } }
@media (max-width: 900px) {
  .entrada { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .entrada-hero { padding: 46px 22px 26px; gap: 18px; }
  .entrada-hero .c { width: 18px; height: 18px; }
  .entrada-hero .c.tl, .entrada-hero .c.bl { left: 10px; }
  .entrada-hero .c.tr, .entrada-hero .c.br { right: 10px; }
  .entrada-hero .c.tl, .entrada-hero .c.tr { top: 10px; }
  .entrada-hero .c.bl, .entrada-hero .c.br { bottom: 10px; }
  .entrada-meta { font-size: 11.5px; gap: 9px; }
  .entrada-marca { gap: 14px; }
  .entrada-marca svg.logo { width: min(100%, 320px); }
  .entrada-titulo { font-size: 20px; }
  .entrada-lista { display: none; }
  .entrada-painel { padding: 8px 16px 20px; }
  .entrada-caixa { margin: 0 0 auto; padding: 22px 0 28px; }
  .entrada-caixa h1 { font-size: 30px; }
  .entrada-rodape { margin-top: auto; }
}

.rodape { font-size: 12.5px; color: var(--grey); line-height: 1.6; max-width: 90ch; padding-top: 6px; }
.rodape b { color: var(--ink); font-weight: 500; }

/* ---------- responsivo ---------- */
@media (max-width: 1180px) {
  .s8, .s7, .s5, .s4 { grid-column: span 12; }
  .s6 { grid-column: span 12; }
  .respostas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resp:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .resp:nth-child(2n) { padding-left: 16px; border-left: 1px solid var(--line); }
  .conexoes { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .lado { position: fixed; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); transform: translateX(-102%); transition: transform .22s ease; box-shadow: 12px 0 40px rgba(0,0,0,.3); }
  .app.menu-aberto .lado { transform: none; }
  .app.menu-aberto::after { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 25; }
  .topo-movel { display: flex; position: sticky; top: 0; z-index: 22; align-items: center; justify-content: space-between; gap: 10px; background: var(--side); color: var(--side-tx); padding: 12px 16px; }
  .topo-movel svg.logo { width: 112px; fill: currentColor; }
  .topo-movel button { border: 1px solid #2A2A28; background: none; color: inherit; border-radius: 999px; padding: 6px 12px; font-size: 13px; }
  .tarja { top: 52px; padding: 8px 16px; }
  .com-tarja .filtros { top: 92px; }
  .filtros { top: 52px; }
  .lider, .ep-hero { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .conteudo { padding: 16px; gap: 14px; }
  .tarja-longo { display: none; }
  .tarja-curto { display: inline; }
  .tarja { flex-wrap: nowrap; }
  .com-tarja .filtros { top: 94px; }
  .seg { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .visor { padding: 42px 16px 18px; }
  .visor-meta .lente { display: none; }
  .coletas-pilulas { gap: 4px; }
  .pilula { padding: 4px 9px; font-size: 12px; }
  .cab h1 { font-size: 32px; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi { padding: 14px; }
  .kpi-val { font-size: 28px; }
  .respostas { grid-template-columns: 1fr; }
  .resp, .resp:nth-child(2n) { padding-left: 0 !important; border-left: 0 !important; }
  .filtros-completos { display: none; }
  .filtros.aberto .filtros-completos { display: flex; }
  .filtros-movel { display: flex; gap: 8px; align-items: center; }
  .filtros .sel { min-width: 0; flex: 1 1 140px; }
  .tab-desk { display: none; }
  .cards-movel { display: flex; flex-direction: column; }
  .item { grid-template-columns: 22px 78px minmax(0, 1fr); }
  .item .item-val { grid-column: 3; align-items: flex-start; flex-direction: row; gap: 10px; }
  .item-capa { width: 78px; }
  .pend { grid-template-columns: 64px minmax(0, 1fr); }
  .pend-acoes { grid-column: 1 / -1; }
  .pend-acoes .linha { justify-content: flex-start; }
  .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cartao { padding: 16px; }
  .gaveta { padding: 18px; }
  .plat-linha { grid-template-columns: 86px minmax(0, 1fr) auto; }
}