/* ══════════ Kaleizu — padrão visual das ferramentas ══════════
   Base: o Kaleizu Metrics (lancamento.html). Carregado depois do <style> de cada página,
   veste as classes antigas (page-header, kpi, metric, chart-card, table-card...) com a mesma
   linguagem: Manrope nos textos, Inter nos números, DM Mono nos rótulos; superfícies de vidro
   sobre manchas de luz; entalhe dourado curto no topo dos cards; abas sublinhadas; hover sem
   mover nada (transform desfocava o texto).
   Cada página precisa da fonte: Inter, Manrope e DM Mono (Google Fonts). */

:root {
  --f-num: 'Inter', sans-serif;
  --f-txt: 'Manrope', sans-serif;
  --f-rot: 'DM Mono', monospace;
  --font: var(--f-txt);           /* as páginas antigas usam --font e --mono */
  --mono: var(--f-rot);
  --r-lg: 16px; --r-sm: 9px;
  --gold: #CDA04C; --gold-light: #e8c97a;   /* iguais em todas as páginas; a Central de Links não os define */
  --glass-bg: linear-gradient(180deg, rgba(30,40,88,.46), rgba(14,20,50,.36));
  --glass-borda: rgba(255,255,255,.09);
  --glass-brilho: inset 0 1px 0 rgba(255,255,255,.07);
  --glass-blur: blur(18px) saturate(150%);
}

body { font-family: var(--f-txt); font-variant-numeric: tabular-nums; line-height: 1.5; }
button, input, select, textarea { font-family: inherit; }

/* fundo: manchas de luz fixas atrás do vidro */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38vw 38vw at 8% 12%, rgba(205,160,76,.10), transparent 70%),
    radial-gradient(42vw 42vw at 92% 18%, rgba(169,139,255,.11), transparent 70%),
    radial-gradient(46vw 46vw at 70% 92%, rgba(91,138,255,.09), transparent 70%),
    radial-gradient(30vw 30vw at 22% 78%, rgba(84,214,194,.05), transparent 70%);
}

/* ── barra superior ── */
.topbar { border-bottom: 1px solid var(--glass-borda); }
.topbar-count { font-family: var(--f-txt); }
.btn-topbar { border-radius: 6px; padding: 6px 14px; font-family: var(--f-txt); }

/* ── cabeçalho da página: título em texto, linha embaixo, sem caixa ── */
.page-header {
  background: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important;
  padding: 0 0 20px !important; margin-bottom: 22px !important; border-bottom: 1px solid var(--border) !important;
  overflow: visible !important; align-items: center !important;
}
.page-header::before, .page-header::after { display: none !important; }
.page-title, .page-header h1 {
  font-family: var(--f-txt); font-size: 30px !important; font-weight: 700; letter-spacing: -.025em; line-height: 1.15;
  background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--text) !important; margin-bottom: 0 !important;
}
.page-sub, .page-header > div > p, .page-header > p { font-size: 13px !important; color: var(--muted); margin-top: 6px !important; }

/* ── títulos de seção: texto com linha ── */
.section-label, .lanc-sec-t, .secao-titulo {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--f-txt) !important; font-size: 17px !important; font-weight: 600; letter-spacing: -.01em !important;
  text-transform: none !important; color: var(--text) !important; margin: 18px 0 14px !important;
}
.section-label::after, .lanc-sec-t::after, .secao-titulo::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.lanc-sec-t span { font-family: var(--f-rot); font-size: 11px; font-weight: 500; }

/* ── cards: entalhe dourado curto no topo, cantos de 12px ── */
.chart-card, .table-card, .det-sec, .inv-card, .lanc-card, .table-wrap, .kpi, .metric, .metric-card, .health-box, .curso-card {
  position: relative; border-radius: 12px !important; border: 1px solid var(--border); border-top: 1px solid var(--border) !important;
}
.chart-card::before, .table-card::before, .det-sec::before, .inv-card::before, .lanc-card::before, .kpi::before, .metric::before,
.metric-card::before, .health-box::before, .curso-card::before {
  content: "" !important; position: absolute; top: 0 !important; left: 20px !important; right: auto !important;
  width: 28px !important; height: 2px !important; border-radius: 0 0 2px 2px; background: var(--kc, var(--c, var(--gold))) !important;
  display: block !important;
}
/* sem as bolas de luz nos cantos */
.kpi::after, .metric::after, .metric-card::after, .lanc-card::after { display: none !important; }

/* ── indicadores (como o .k do Kaleizu Metrics) ── */
.kpi, .metric, .metric-card { padding: 18px 20px !important; }
.kpi-label, .kpi-lbl, .metric-label, .metric-card .label {
  font-family: var(--f-rot) !important; font-size: 10px !important; text-transform: uppercase; letter-spacing: .12em !important; color: var(--muted) !important;
}
.kpi-value, .kpi-num, .metric-value, .metric-card .value, .ck-val, .ck-value, .curso-kpis .k-value, .lanc-num, .inv-total-val {
  font-family: var(--f-num) !important; font-weight: 500 !important; letter-spacing: -.02em !important; line-height: 1.1 !important;
}
.kpi-value, .kpi-num, .metric-value, .metric-card .value { font-size: 26px !important; margin-top: 12px !important; }
.kpi-value, .kpi-num, .metric-value, .metric-card .value:not(.warn):not(.danger):not(.zero) { color: var(--text) !important; }
.kpi-sub, .metric-sub, .metric-card .sub { font-family: var(--f-txt) !important; font-size: 12px !important; color: var(--muted) !important; margin-top: 4px; }
.lanc-num { font-size: 30px !important; }
.lanc-lbl { font-family: var(--f-txt) !important; font-size: 12px !important; color: var(--muted) !important; }
.lanc-nome { font-size: 15px !important; font-weight: 600 !important; letter-spacing: -.01em; }

/* ── botões ── */
.btn, .btn-ghost, .btn-lanc, .chip, .pagination button {
  border-radius: var(--r-sm) !important; font-family: var(--f-txt) !important;
  transition: border-color .15s ease, color .15s ease, background .15s ease, transform .1s ease;
}
/* cor só nos botões neutros: as variantes coloridas (ouro, perigo...) mantêm a sua */
.btn:where(:not(.btn-primary, .primario, .btn-ouro, .btn-confirm, .btn-danger, .btn-perigo, .btn-cancel, .btn-sec)), .btn-ghost {
  background: var(--surface); color: #c3c9e6;
}
.btn:where(:not(.btn-primary, .primario, .btn-ouro, .btn-confirm, .btn-danger, .btn-perigo, .btn-cancel, .btn-sec)):hover, .btn-ghost:hover {
  border-color: var(--gold); color: var(--gold-light); background: #151d45;
}
/* tamanho só nos botões normais: os pequenos (btn-sm, btn-p) mantêm o seu */
.btn:where(:not(.btn-sm, .btn-p)) { padding: 8px 14px; font-size: 13px; }
.btn:active:not(:disabled), .btn-lanc:active, .chip:active { transform: scale(.97); }
.btn-primary { border-radius: var(--r-sm) !important; color: #060B1F !important; font-weight: 600 !important; }
.btn-danger { background: transparent; color: var(--danger, #F07A7A); border-color: rgba(240,122,122,.3); }
.btn-danger:hover { background: rgba(240,122,122,.1); color: var(--danger, #F07A7A); border-color: var(--danger, #F07A7A); }

/* ── abas: sublinhadas, como as do Kaleizu Metrics ── */
.tabs { gap: 2px !important; border-bottom: 1px solid var(--border); margin-bottom: 22px !important;
  flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs > .tab { white-space: nowrap; flex-shrink: 0; }
.tabs > .tab {
  background: none !important; border: none !important; border-radius: 0 !important; padding: 11px 14px !important;
  font-size: 13.5px !important; font-weight: 500; color: var(--muted) !important; box-shadow: none;
  transition: color .25s ease, box-shadow .25s ease;
}
.tabs > .tab:hover { color: var(--text) !important; }
.tabs > .tab.active { color: var(--text) !important; box-shadow: inset 0 -2px 0 var(--gold), 0 8px 14px -12px rgba(205,160,76,.7); }

/* pílulas de escolha (lançamentos, filtros) */
.ptab, .chip { background: var(--surface); }
.ptab.active, .chip[aria-pressed="true"] {
  background: var(--gold) !important; border-color: var(--gold) !important; color: #060B1F !important; font-weight: 600;
  box-shadow: 0 4px 16px rgba(205,160,76,.3) !important;
}

/* ── campos ── */
select, input[type=text], input[type=search], input[type=email], input[type=number], input[type=date], input[type=password], textarea {
  border-radius: var(--r-sm); transition: border-color .15s ease, box-shadow .15s ease;
}
select:focus, input:focus, textarea:focus { border-color: var(--gold) !important; box-shadow: 0 0 0 3px rgba(205,160,76,.14); outline: none; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── tabelas ── */
.table-card th, .table-wrap th, .preview-wrap th {
  font-family: var(--f-rot) !important; font-size: 10px !important; font-weight: 500 !important; text-transform: uppercase;
  letter-spacing: .1em !important; color: var(--muted) !important;
}
.table-wrap td, .preview-wrap td { font-family: var(--f-num); }
.table-card td { font-family: var(--f-num) !important; font-size: 13px !important; }
.table-card td:first-child { font-family: var(--f-txt) !important; }
.table-card tbody td, .table-wrap tbody td { transition: background .12s ease; }
.table-card tbody tr:nth-child(even) td, .table-wrap tbody tr:nth-child(even) td { background: transparent; }
.table-card tbody tr:hover td, .table-wrap tbody tr:hover td { background: rgba(205,160,76,.04) !important; }
tr.sel td { background: var(--gold-dim, rgba(205,160,76,.12)) !important; }

/* ── modais (como o dialog do Kaleizu Metrics) ── */
.overlay { background: rgba(6,11,31,.78) !important; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.overlay .modal, .modal { border-radius: 16px !important; }
.overlay.open .modal { animation: kzModalIn .18s ease; }
@keyframes kzModalIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-title { font-family: var(--f-txt); font-size: 17px !important; font-weight: 600 !important; color: var(--text) !important; letter-spacing: -.01em; }
.modal-sub { color: var(--muted); }

/* ── listas com faixa lateral (avisos) ── */
.selbar { border: none !important; border-left: 2px solid var(--gold) !important; border-radius: 0 var(--r-sm) var(--r-sm) 0 !important; background: rgba(205,160,76,.06) !important; }

/* ── hover dos cards: só borda e sombra, nunca mover ── */
.kpi, .metric, .app-card, .card.mini, .fx-tilt, .lanc-card, .lanc { transform: none !important; }
.lanc-card:hover { border-color: rgba(205,160,76,.45) !important; }

/* ── vidro (só na tela: na impressão cada página usa o próprio estilo) ── */
@media screen {
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar { background: rgba(8,12,32,.55) !important; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
  .card, .chart-card, .table-card, .det-sec, .inv-card, .lanc-card, .table-wrap, .kpi, .metric, .tipo-abas, .dados-switch {
    background: var(--glass-bg) !important;
    border-color: var(--glass-borda) !important;
    box-shadow: var(--glass-brilho), 0 10px 30px rgba(0,0,0,.22);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  }
  .card:hover, .chart-card:hover, .lanc-card:hover, .kpi:hover, .metric:hover { box-shadow: var(--glass-brilho), 0 14px 36px rgba(0,0,0,.32); }
  /* dentro de outra superfície de vidro: só translúcido, sem desfocar de novo */
  .card .card, .table-card .table-wrap, .card .table-wrap { background: rgba(255,255,255,.025) !important; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
  .table-card th, .table-wrap th { background: rgba(10,14,36,.82) !important; }
}
}

.btn-topbar { white-space: nowrap; }
@media (max-width: 640px) {
  .page-title { font-size: 24px !important; }
  .kpi-value, .kpi-num, .metric-value { font-size: 20px !important; }
  .kpi, .metric { padding: 16px !important; }
}
@media (max-width: 520px) {
  .topbar { padding: 0 12px; gap: 10px; }
  .topbar .topbar-name, .topbar-count { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .table-card tbody td, .table-wrap tbody td, .tabs > .tab, .btn { transition: none; }
  .overlay.open .modal { animation: none; }
}
/* PDF (Debriefing): sem as manchas de luz do fundo */
@media print { body::before { display: none; } }

/* ══ Barra superior div.sidebar (Alunos, Clube do Vet, Encurtador) e RH ══
   Na Central de Links, aside.sidebar é a coluna de grupos: não entra aqui. */
/* barra superior de vidro, como a do Kaleizu Metrics */
div.sidebar { background: rgba(8,12,32,.55) !important; border-bottom: 1px solid var(--glass-borda) !important; padding: 10px 24px !important; }
div.sidebar .brand-title { font-family: var(--f-txt); font-size: 14px; font-weight: 600; }
div.sidebar .brand-sub { font-family: var(--f-rot); }
div.sidebar .brand-logo { margin-bottom: 0 !important; }
:where(.nav-group) .nav-item { font-family: var(--f-txt); font-weight: 600; }
.sidebar-footer button { border-radius: 6px !important; font-family: var(--f-txt) !important; white-space: nowrap; }
/* celular: logo e botões numa linha, abas na linha de baixo rolando para o lado */
@media (max-width: 640px) {
  div.sidebar { gap: 10px 12px !important; padding: 10px 16px !important; }
  div.sidebar .brand { flex: 1; min-width: 0; }
  .sidebar-footer #user-email-label { display: none; }
  .nav-group { order: 3; width: 100%; flex-wrap: nowrap !important; gap: 4px !important; overflow-x: auto; scrollbar-width: none; }
  .nav-group::-webkit-scrollbar { display: none; }
  .nav-group .nav-item { white-space: nowrap; flex-shrink: 0; padding: 8px 14px !important; }
}
/* títulos dos blocos: texto, não rótulo */
.chart-card h3, .health-box h3, .curso-card h3, .curso-card > h3, .curso-head h3 {
  font-family: var(--f-txt) !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: -.01em !important;
  text-transform: none !important; color: var(--text) !important;
}
.curso-sec-t, .curso-sec-title, .ck-label, .curso-kpis .k-label { color: var(--muted, #9BA3C9) !important; letter-spacing: .12em !important; }
.ck-val, .ck-value, .curso-kpis .k-value { font-size: 24px !important; }
.ck-value:not(.warn) { color: var(--text) !important; }
.curso-card { border-top: 1px solid var(--border) !important; }
/* avisos com faixa lateral */
.alert-box { border: none !important; border-left: 2px solid var(--gold) !important; border-radius: 0 var(--r-sm) var(--r-sm) 0 !important; background: rgba(205,160,76,.06) !important; }
/* modais dos Alunos e do Clube */
.modal-overlay { background: rgba(6,11,31,.78) !important; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.modal-overlay.open .modal { animation: kzModalIn .18s ease; }
.modal h2 { font-family: var(--f-txt); font-size: 17px !important; font-weight: 600 !important; color: var(--text) !important; letter-spacing: -.01em; }
/* coluna de ações fixa à direita: fundo sólido, senão o conteúdo aparece por baixo ao rolar */
.table-wrap td.col-acoes { background: #0e1434 !important; }
.table-wrap tbody tr:hover td.col-acoes { background: #151b3d !important; }
.table-wrap th.col-acoes { background: #0a0e24 !important; }

/* RH: o cabeçalho segue a barra de Alunos e Clube (estilo no próprio rh.html) */
.topbar-in .titulo { font-family: var(--f-txt); }
.tabela { border-radius: 12px; }
.secao { display: flex; align-items: center; gap: 16px; font-weight: 600 !important; letter-spacing: -.01em; }
.secao::after { content: ""; flex: 1; height: 1px; background: var(--border); }
@media screen {
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .metric-card, .health-box, .curso-card, .tabela, .linha {
    background: var(--glass-bg) !important; border-color: var(--glass-borda) !important;
    box-shadow: var(--glass-brilho), 0 10px 30px rgba(0,0,0,.22);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  }
  .metric-card:hover, .curso-card:hover { box-shadow: var(--glass-brilho), 0 14px 36px rgba(0,0,0,.32); }
  .curso-card .chip, .curso-card .pill, .curso-card .stat-chip { background: rgba(255,255,255,.03) !important; }
}
}
@media (prefers-reduced-motion: reduce) { .modal-overlay.open .modal { animation: none; } }

/* ══ Infra ══ */
/* Encurtador: card de formulário com entalhe no lugar da barra em degradê */
.page > .card { border-top: 1px solid var(--border) !important; border-radius: 12px !important; }
.page > .card::before { left: 20px !important; right: auto !important; width: 28px !important; height: 2px !important; border-radius: 0 0 2px 2px !important; background: var(--gold) !important; }
.card-title { font-family: var(--f-txt); font-size: 16px !important; font-weight: 600 !important; color: var(--text) !important; letter-spacing: -.01em; }
.seg { border-radius: 99px !important; padding: 4px !important; }
.seg button { border-radius: 99px !important; font-family: var(--f-txt) !important; font-weight: 600; transition: color .2s, background .2s; }
.seg button.active { background: var(--gold) !important; color: #060B1F !important; box-shadow: 0 4px 16px rgba(205,160,76,.3); }
.chip.on { background: var(--gold) !important; border-color: var(--gold) !important; color: #060B1F !important; box-shadow: 0 4px 16px rgba(205,160,76,.3) !important; }
.chip.on small { opacity: .6; }
.sidebar-domain { border-radius: var(--r-sm) !important; }

/* Central de Links: cabeçalho como a barra do Kaleizu Metrics */
#app > header { background: rgba(8,12,32,.55) !important; padding: 10px 24px !important; border-bottom: 1px solid var(--glass-borda) !important; }
#app > header .header-inner { max-width: none !important; gap: 14px !important; }
#app > header .logo-wrap img { height: 32px !important; }
#app > header .logo-sep { display: none; }
#app > header .logo-title {
  font-size: 14px !important; font-weight: 500 !important; background: none !important; -webkit-text-fill-color: currentColor !important;
  color: var(--gold) !important; padding-left: 10px; border-left: 1px solid var(--border); letter-spacing: 0 !important;
}
#app > header #search { border-radius: 99px !important; background: var(--surface) !important; font-family: var(--f-txt) !important; font-size: 13px !important; padding: 8px 14px 8px 36px !important; }
#app > header #search:focus { border-color: var(--gold) !important; }
#app > header .count-badge { font-family: var(--f-rot); font-size: 12px; }
#app > header .header-inner > button { border-radius: 6px !important; font-family: var(--f-txt) !important; font-size: 12px !important; white-space: nowrap; }
#app > header .header-inner > button:last-of-type:not(#lote-btn) { color: var(--muted, #9BA3C9); }
#app > header .header-inner > button[onclick^="goToSelector"] { color: var(--gold) !important; border-color: rgba(205,160,76,.4) !important; }
/* coluna de grupos: ativo em dourado, como o resto do app */
aside.sidebar .sidebar-title { font-family: var(--f-rot); font-size: 10px; font-weight: 500; letter-spacing: .12em; color: var(--muted, #9BA3C9); }
aside.sidebar .nav-item { border-radius: 8px; font-family: var(--f-txt); }
aside.sidebar .nav-item.active { background: rgba(205,160,76,.12) !important; color: var(--gold-light, #e8c97a) !important; font-weight: 600; box-shadow: inset 2px 0 0 var(--gold); }
aside.sidebar .nav-item.active .nav-count { background: var(--gold) !important; color: #060B1F !important; }
aside.sidebar .nav-count { font-family: var(--f-rot); }
/* grupos: título em texto, como as seções do Kaleizu Metrics */
.section-name { font-family: var(--f-txt); font-size: 17px !important; font-weight: 600 !important; letter-spacing: -.01em !important; text-transform: none !important; color: var(--text) !important; }
.section-total { font-family: var(--f-rot); }
/* cards de link: vidro e hover sem mover */
.card-wrap .card { transform: none !important; }
.card-label { font-family: var(--f-txt); font-weight: 600; }
.card-url { font-family: var(--f-rot); }
@media screen {
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #app > header { backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
    .card-wrap .card { background: var(--glass-bg) !important; border-color: var(--glass-borda); box-shadow: var(--glass-brilho); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
    .card-wrap .card:hover { border-color: rgba(205,160,76,.55); box-shadow: var(--glass-brilho), 0 10px 28px rgba(0,0,0,.3); }
  }
}
/* Central de Links no celular: logo, Voltar e Sair numa linha; a busca inteira embaixo */
@media (max-width: 640px) {
  #app > header { padding: 10px 16px !important; }
  #app > header .header-inner { gap: 10px !important; }
  #app > header .logo-wrap { flex: 1; min-width: 0; }
  #app > header .search-wrap { order: 9; flex-basis: 100%; }
  #app > header .count-badge { display: none; }
}

/* ══ Transição entre páginas ══
   Navegador com View Transitions (Chrome/Edge 126+, Safari 18.2+): a troca de página
   vira um crossfade curto; a barra de cima fica parada e a pílula da Central de Dados
   desliza de Leads para Pesquisas. Nos outros, a navegação segue como antes. */
@view-transition { navigation: auto; }
.topbar { view-transition-name: kz-topbar; }
.dados-switch a.on { view-transition-name: kz-dados-on; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; animation-timing-function: ease; }
::view-transition-group(kz-dados-on) { animation-duration: .32s; animation-timing-function: cubic-bezier(.34,1.3,.5,1); }
/* com a transição, o fade de entrada da página inteira sobra (fazia a barra piscar) */
@supports (view-transition-name: none) { body { animation: none !important; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Cards da Central de Dados entram como os da seleção de ferramentas: sobem em
   sequência (translate, não transform, que aqui fica preso em none) */
.lanc-grid > .lanc-card { animation: kzCardRise .5s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(min(var(--i, 0), 12) * .05s + .05s); }
@keyframes kzCardRise { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .lanc-grid > .lanc-card { animation: none; } }