/* ═══════════════════════════════════════════════════════════════
   YO PLAY · Camada visual global
   Carregada por último em todas as páginas (injectada pelo framework).
   Tipografia única e compacta, ícones de linha, títulos discretos,
   cartões e gráficos mais contidos.
   ═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --yp-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --yp-accent: #c4b5fd;
}

/* ── Escala base mais pequena: tudo o que está em rem encolhe por igual ── */
html { font-size: 14.5px; -webkit-text-size-adjust: 100%; }
body { font-size: .95rem; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ── Uma só família tipográfica (excepto ícones de marcas) ── */
*:not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.ypi):not(.ypi *):not(.hero):not(.hero *) {
  font-family: var(--yp-font) !important;
}

/* ── Títulos: discretos, sem gradientes, sem letras gigantes ── */
h1:not(.hero-title), .h1 { font-size: clamp(1.15rem, .9rem + .6vw, 1.4rem) !important; font-weight: 700 !important; letter-spacing: -.015em !important; line-height: 1.25 !important; }
h2, .h2 { font-size: clamp(1rem, .9rem + .3vw, 1.12rem) !important; font-weight: 650 !important; letter-spacing: -.01em !important; line-height: 1.3 !important; }
h3, .h3 { font-size: .98rem !important; font-weight: 600 !important; letter-spacing: -.005em !important; }
h4, .h4, h5, .h5, h6 { font-size: .9rem !important; font-weight: 600 !important; }
h1:not(.hero-title) span, h2 span, h3 span, [class*="hdr-h1"] span {
  background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important; color: var(--yp-accent) !important;
}
[class*="headline"], [class*="pg-title"], [class*="page-title"], .hdr-h1 {
  font-size: clamp(1.15rem, .9rem + .6vw, 1.4rem) !important; letter-spacing: -.015em !important; line-height: 1.25 !important;
}
small, .small { font-size: .78rem; }
p { line-height: 1.55; }

/* ── Ícones (Lucide, linha fina) ── */
.ypi { display: inline-flex; align-items: center; justify-content: center; width: 1.05em; height: 1.05em; line-height: 1; vertical-align: -.16em; flex-shrink: 0; font-style: normal; }
.ypi::before, .ypi::after { content: none !important; display: none !important; }
.ypi svg { width: 100%; height: 100%; display: block; }
.ypi-spin svg { animation: ypi-spin 1s linear infinite; }
@keyframes ypi-spin { to { transform: rotate(360deg); } }

/* ── Números grandes dos cartões (KPIs): mais contidos ── */
[class*="stat-val"], [class*="stat-value"], [class*="kpi-val"], [class*="kpi-value"], [class*="stat-num"], [class*="card-value"],
[class*="big-num"], [class*="saldo-value"], [class*="valor-grande"], .stat-card h2, .stat-card .h2 {
  font-size: clamp(1.05rem, .9rem + .45vw, 1.35rem) !important; letter-spacing: -.01em !important; line-height: 1.2 !important;
}
[class*="stat-label"], [class*="kpi-label"], [class*="stat-lbl"] { font-size: .68rem !important; letter-spacing: .06em !important; }

/* ── Gráficos: nunca demasiado altos ── */
canvas { max-height: 260px; }

/* ── Detalhes ── */
::selection { background: rgba(124, 58, 237, .35); }
button, .btn, [class*="btn-"] { letter-spacing: 0 !important; }

/* ═══════════════════════════════════════════════════════════════
   PAINÉIS (dashboards): cartões compactos, sem decoração a mais
   ═══════════════════════════════════════════════════════════════ */
.stats-grid, .stats-row, .kpi-grid, .kpis {
  gap: 10px !important; margin-bottom: 16px !important;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)) !important; align-items: stretch !important;
}
.stat-card, .kpi-card, .kpi {
  padding: 13px 15px !important; border-radius: 12px !important; min-height: 0 !important;
}
.stat-card:hover { transform: none !important; box-shadow: none !important; }
.stat-card::before, .stat-card::after, .kpi-card::before { display: none !important; }   /* círculos decorativos */
.stat-card .s-icon, .stat-icon, .s-icon, .kpi-icon, [class*="stat-ic"] {
  width: 30px !important; height: 30px !important; min-width: 30px !important; border-radius: 8px !important;
  font-size: .85rem !important; margin-bottom: 8px !important;
}
.stat-card .s-val, .s-val, .stat-val, .stat-value, .kpi-val, .kpi-value {
  font-size: 1.22rem !important; font-weight: 700 !important; line-height: 1.15 !important; margin-bottom: 2px !important;
}
.stat-card .s-lbl, .s-lbl, .stat-lbl, .stat-label, .kpi-lbl, .kpi-label {
  font-size: .66rem !important; letter-spacing: .06em !important; margin-bottom: 0 !important;
}
.stat-card .s-foot, .s-foot, .stat-sub, .stat-foot, .kpi-sub {
  font-size: .7rem !important; margin-top: 6px !important; padding-top: 6px !important;
}

/* Cabeçalhos de página e faixas de boas-vindas: menos altura */
.pg-hdr, .page-header, .dash-header, [class*="hero-greeting"], [class*="welcome"], .top-banner, .hero-banner {
  padding-top: 16px !important; padding-bottom: 16px !important; min-height: 0 !important;
}
.pg-body, .page-body, .dash-body { padding-top: 16px !important; }

/* Gráficos e respectivos cartões */
.chart-wrap, .chart-box, .chart-container, [class*="chart-area"] { max-height: 220px !important; }   /* sem alterar a altura usada pelo Chart.js */
.charts-row, .chart-col3, .charts-grid { gap: 12px !important; margin-bottom: 14px !important; }
.chart-card, .chart-panel { padding: 14px 16px !important; }
canvas { max-height: 230px; }

/* Cartões genéricos (bootstrap e páginas antigas) */
.card { border-radius: 12px; }
.card-body { padding: 14px 16px; }
.card-header { padding: 10px 16px; }

/* Tabelas: linhas mais finas */
table td, table th { padding-top: 9px; padding-bottom: 9px; }
th { font-size: .66rem; letter-spacing: .07em; }


/* Etiqueta do tipo de conta: discreta */
.nav-user-badge { text-transform: none !important; letter-spacing: .02em !important; font-size: .64rem !important; }

/* ── Sino de notificações ── */
.btn-notif-nav.yp-ring i, .btn-notif-nav.yp-ring svg { animation: ypRing .9s ease; transform-origin: 50% 0; }
@keyframes ypRing { 0%,100%{transform:rotate(0)} 15%{transform:rotate(14deg)} 30%{transform:rotate(-12deg)} 45%{transform:rotate(9deg)} 60%{transform:rotate(-6deg)} 75%{transform:rotate(3deg)} }
.notif-badge { border-radius: 999px !important; box-shadow: 0 0 0 2px var(--bg, #0b0b12); }
#notifBody .yp-nt { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-bottom: 1px solid var(--border, rgba(255,255,255,.07)); text-decoration: none; color: inherit; transition: background .15s; }
#notifBody .yp-nt:hover { background: rgba(255,255,255,.04); }
#notifBody .yp-nt.novo { background: rgba(124,58,237,.08); }
#notifBody .yp-nt-ic { flex: 0 0 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); font-size: .85rem; }
#notifBody .yp-nt-ic svg { width: 16px; height: 16px; }
#notifBody .yp-nt-tx { flex: 1; min-width: 0; display: block; }
#notifBody .yp-nt-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
#notifBody .yp-nt-top strong { font-size: .84rem; font-weight: 600; }
#notifBody .yp-nt-top small { font-size: .7rem; color: var(--text3, #888); white-space: nowrap; }
#notifBody .yp-nt.novo .yp-nt-top strong::after { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--primary, #7c3aed); margin-left: 6px; vertical-align: middle; }
#notifBody .yp-nt-msg { display: block; font-size: .78rem; color: var(--text2, #aaa); line-height: 1.45; margin-top: 2px; }
#notifBody .yp-nt-vazio { padding: 40px 20px; text-align: center; color: var(--text3, #888); font-size: .85rem; }
#notifBody .yp-nt-vazio i, #notifBody .yp-nt-vazio svg { font-size: 1.6rem; width: 28px; height: 28px; opacity: .5; margin-bottom: 8px; }

/* ── Página inicial: faixa de destaque com o tamanho original (base 16px) ── */
.hero .hero-eyebrow { font-size: 11.5px; }
.hero .hero-title   { font-size: 48px; }
.hero .hero-sub     { font-size: 15.2px; }
.hero .btn-hero     { font-size: 14px; }
@media (max-width: 900px) { .hero .hero-title { font-size: 35px; } }
@media (max-width: 640px) { .hero .hero-title { font-size: 27px; } .hero .hero-sub { font-size: 13px; } }