/* Painel de PRÉ-VENDAS — layout próprio (redesenhado 11/07/2026), seguindo o MESMO design
   system do painel de vendas (tokens de :root em styles.css: --abyss, --cream, --stone, --cyan,
   --tan). Cor de identidade da área = --cyan (azul), distinta do laranja de vendas — sem
   inventar paleta nova. Tudo escopado sob .pv-mural pra não colidir com .kpi-row/.rank-* de
   dashboard-sport.jsx (painel de vendas).
   Fontes aumentadas em 12/07/2026 (Hugo testou na TV e achou pequeno) — comparar com os
   tamanhos do painel de vendas (dashboard-sport.jsx/styles-sport.css) se for mexer de novo:
   lá os números do ranking já rodam bem maiores que o que a gente tinha aqui. */

.pv-mural { background: radial-gradient(ellipse at 70% 0%, #0d1442 0%, var(--abyss) 60%); }

/* Tema Copa: o mesmo `.mural.sport.theme-copa` global (styles.css/theme-copa.css) já troca o
   fundo pro gramado verde — só falta a cor de identidade da área (--cyan) virar amarelo Brasil.
   Como todo o CSS abaixo usa var(--cyan), essa única linha já propaga pra tudo (barra, %,
   avatar líder, sort-pill ativo, etc.). */
.pv-mural.theme-copa { --cyan: #FFDF00; }

.pv-mural .pv-body { position: absolute; inset: 88px 48px 0; display: flex; flex-direction: column; gap: 18px; padding-top: 24px; }

/* ── KPI strip: 2 indicadores do dia + 3 do mês (fixos, não seguem o filtro de período), em
   grade 4 colunas x 2 linhas — cada card tem grid-column/grid-row explícito no JSX. Linha 2 usa
   .kpi-card.compact (menor) — o ranking embaixo precisa do espaço pra caber todos os SDRs (essa
   2ª linha comeu espaço do ranking e cortava a partir do 5º SDR, achado pelo Hugo em
   12/07/2026). ── */
.pv-mural .kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pv-mural .kpi-card { background: rgba(213,217,231,0.05); border: 1px solid rgba(213,217,231,0.1); border-radius: 12px; padding: 20px 22px 18px; }
.pv-mural .kpi-card.group-start { border-left: 2px solid rgba(213,217,231,0.18); }
.pv-mural .kpi-label { font-family: 'Geist Mono', monospace; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); display: flex; align-items: center; gap: 7px; margin-bottom: 12px; }
.pv-mural .kpi-label .sw { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.pv-mural .kpi-val { font-family: 'Anybody', sans-serif; font-style: italic; font-weight: 900; font-size: 44px; letter-spacing: -0.01em; line-height: 1; }
.pv-mural .kpi-sub { font-family: 'Geist Mono', monospace; font-size: 13px; color: rgba(213,217,231,0.55); margin-top: 8px; }
.pv-mural .kpi-card.today .kpi-val { color: var(--cyan); }
.pv-mural .kpi-card.warn .kpi-val { color: var(--tan); }
.pv-mural .kpi-card.bad .kpi-val { color: #FF5C7A; }

/* Quadrante Reunião x Planos e valores — metade do card pra cada, com um separador vertical. */
.pv-mural .kpi-card.split { display: flex; flex-direction: column; }
.pv-mural .kpi-split-row { display: flex; align-items: center; flex: 1; }
.pv-mural .kpi-split-half { flex: 1; text-align: center; }
.pv-mural .kpi-split-val { font-family: 'Anybody', sans-serif; font-style: italic; font-weight: 900; font-size: 38px; color: var(--cyan); line-height: 1; }
.pv-mural .kpi-split-cap { font-family: 'Geist Mono', monospace; font-size: 12px; color: rgba(213,217,231,0.55); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.pv-mural .kpi-split-sep { width: 1px; align-self: stretch; background: rgba(213,217,231,0.14); margin: 0 14px; }

/* Cards da linha 2 (Reunião/PV, Reagendadas, Desqualif.) — menores, pra sobrar altura pro
   ranking (essa linha existe só de apoio; os KPIs principais continuam grandes na linha 1). */
.pv-mural .kpi-card.compact { padding: 12px 18px 10px; }
.pv-mural .kpi-card.compact .kpi-label { margin-bottom: 6px; }
.pv-mural .kpi-card.compact .kpi-val { font-size: 30px; }
.pv-mural .kpi-card.compact .kpi-sub { margin-top: 4px; }
.pv-mural .kpi-card.compact.split .kpi-split-val { font-size: 28px; }
.pv-mural .kpi-card.compact.split .kpi-split-cap { margin-top: 4px; }

/* ── Ranking ── */
.pv-mural .rank-panel { flex: 1; background: rgba(213,217,231,0.03); border: 1px solid rgba(213,217,231,0.1); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.pv-mural .rank-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 26px; border-bottom: 1px solid rgba(213,217,231,0.1); }
.pv-mural .rank-head h2 { margin: 0; font-family: 'Anybody', sans-serif; font-style: italic; font-weight: 900; font-size: 24px; color: var(--cream); }
.pv-mural .rank-head-left { display: flex; align-items: baseline; gap: 14px; }
.pv-mural .rank-tag { font-family: 'Geist Mono', monospace; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); }

.pv-mural .sort-group { display: flex; align-items: center; gap: 10px; }
.pv-mural .sort-label { font-family: 'Geist Mono', monospace; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(213,217,231,0.55); }
.pv-mural .sort-pills { display: inline-flex; background: rgba(213,217,231,0.05); border: 1px solid rgba(213,217,231,0.16); border-radius: 9px; padding: 3px; }
.pv-mural .sort-pill { font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: 0.02em; padding: 8px 13px; border-radius: 6px; color: var(--stone); background: transparent; border: 0; cursor: pointer; white-space: nowrap; }
.pv-mural .sort-pill.active { background: var(--cyan); color: var(--abyss); font-weight: 700; }

.pv-mural .rank-cols, .pv-mural .rank-row2 {
  display: grid; grid-template-columns: 56px 240px 1fr 112px 118px 128px 110px 118px 176px;
  gap: 16px; align-items: center; padding: 10px 26px;
}
.pv-mural .rank-cols { border-bottom: 1px solid rgba(213,217,231,0.1); font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(213,217,231,0.5); }
.pv-mural .rank-cols .num { text-align: right; }

.pv-mural .rank-body { flex: 1; overflow: hidden; }
.pv-mural .rank-row2 { border-bottom: 1px solid rgba(213,217,231,0.08); }
.pv-mural .rank-row2:last-child { border-bottom: none; }
.pv-mural .rank-row2.leader { background: linear-gradient(90deg, rgba(0,159,227,0.1), transparent 65%); }

.pv-mural .r-num { font-family: 'Geist Mono', monospace; font-size: 20px; color: rgba(213,217,231,0.4); }
.pv-mural .rank-row2.leader .r-num { color: var(--cyan); }

.pv-mural .r-sdr2 { display: flex; align-items: center; gap: 14px; min-width: 0; }
.pv-mural .r-avatar2 { width: 50px; height: 50px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-family: 'Anybody', sans-serif; font-style: italic; font-weight: 900; font-size: 16px; color: var(--cream); overflow: hidden; }
.pv-mural .r-avatar2 img { width: 100%; height: 100%; object-fit: cover; }
.pv-mural .r-name2 { font-size: 18px; font-weight: 600; color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pv-mural .r-agenda { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.pv-mural .r-agenda-top { display: flex; justify-content: space-between; align-items: baseline; font-family: 'Geist Mono', monospace; }
.pv-mural .r-agenda-top .cur { font-size: 27px; font-weight: 700; color: var(--cream); }
.pv-mural .r-agenda-top .meta { font-size: 15px; color: rgba(213,217,231,0.55); }
.pv-mural .r-agenda-bar { height: 9px; background: rgba(213,217,231,0.08); border-radius: 4px; overflow: hidden; }
.pv-mural .r-agenda-bar-fill { height: 100%; background: linear-gradient(90deg, var(--cyan), #5fc4ee); border-radius: 4px; }
.pv-mural .r-agenda-pct { font-family: 'Geist Mono', monospace; font-size: 14px; color: var(--cyan); text-align: right; }

.pv-mural .r-stack2 { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-family: 'Geist Mono', monospace; }
.pv-mural .r-stack2 .n { font-size: 25px; font-weight: 700; }
.pv-mural .r-stack2 .p { font-size: 14px; color: rgba(213,217,231,0.5); }
.pv-mural .r-stack2.pos .n { color: var(--cyan); }
.pv-mural .r-stack2.neutral .n { color: var(--stone); }
.pv-mural .r-stack2.amber .n { color: var(--tan); }
.pv-mural .r-stack2.rose .n { color: #FF5C7A; }
.pv-mural .r-stack2.violet .n { color: var(--indigo); }

.pv-mural .r-booking2 { text-align: right; font-family: 'Geist Mono', monospace; }
.pv-mural .r-booking2 .val { font-size: 25px; font-weight: 700; color: var(--cyan); }
.pv-mural .r-booking2 .cap { font-size: 12.5px; color: rgba(213,217,231,0.5); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 3px; }

.pv-mural .rank-foot2 {
  display: grid; grid-template-columns: 56px 240px 1fr 112px 118px 128px 110px 118px 176px; gap: 16px; align-items: center;
  padding: 14px 26px; background: rgba(213,217,231,0.02); font-family: 'Geist Mono', monospace; border-top: 1px solid rgba(213,217,231,0.1);
}
.pv-mural .rank-foot2 .foot-label2 { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); grid-column: 1 / 3; }
.pv-mural .rank-foot2 .foot-val2 { text-align: right; font-size: 30px; font-weight: 700; color: var(--cream); }
.pv-mural .rank-foot2 .foot-pct { display: block; font-size: 14px; font-weight: 500; color: rgba(213,217,231,0.55); margin-top: 3px; }

/* ── Card de comemoração de agendamento (sino) — richer, com cliente/vendedor/data ── */
.pv-bell-overlay { position: absolute; inset: 0; z-index: 220; display: grid; place-items: center; background: rgba(3,4,25,0.6); animation: pv-fade 0.25s ease; }
.pv-bell-card { background: #0b0c24; border: 1px solid rgba(213,217,231,0.16); border-radius: 20px; padding: 40px 56px; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.5); animation: pv-pop 0.4s cubic-bezier(.34,1.56,.64,1); min-width: 480px; }
.pv-bell-icon { font-size: 56px; animation: pv-swing 0.9s ease-in-out 2; }
.pv-bell-eyebrow { font-family: 'Geist Mono', monospace; font-size: 13px; letter-spacing: 0.2em; color: var(--c, #009FE3); margin: 10px 0 6px; text-transform: uppercase; }
.pv-bell-headline { font-family: 'Anybody', sans-serif; font-style: italic; font-weight: 900; font-size: 40px; color: #FFF5EB; margin-bottom: 18px; }
.pv-bell-seller { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 20px; color: #FFF5EB; font-weight: 600; }
.pv-bell-avatar { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-family: 'Anybody', sans-serif; font-style: italic; font-weight: 900; color: var(--cream); overflow: hidden; }
.pv-bell-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pv-bell-detail { margin-top: 12px; font-size: 15px; color: rgba(255,245,235,0.75); }
.pv-bell-detail b { color: #FFF5EB; }