/* Painel comercial (administrador): visual proprio, sobrio, sofisticado e elegante -
   diferente do tema "gamer" roxo/magenta vibrante usado no resto do app para os alunos.
   Paleta: grafite profundo, acento em roxo clarinho (lilas), sombras suaves com leve elevacao.
   Escopado inteiro em .painel-comercial para nao afetar nenhuma outra tela. */
.painel-comercial {
  --pc-bg: #121216;
  --pc-card: #17171c;
  --pc-card-2: #1b1b21;
  --pc-borda: rgba(255,255,255,.07);
  --pc-borda-forte: rgba(200,168,255,.32);
  --pc-ouro: #c9a8ff;
  --pc-sombra: 0 6px 18px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.03) inset;
  --pc-sombra-hover: 0 10px 26px rgba(124,92,255,.16), 0 1px 0 rgba(255,255,255,.04) inset;
  --pc-texto: #eeeceb;
  --pc-muted: #9a97a3;
  font-variant-numeric: tabular-nums;
}

/* Cabecalho */
.painel-comercial .pc-hero {
  display: flex; flex-direction: column; gap: 18px;
  padding: 26px 28px; border-radius: 16px; margin-bottom: 22px;
  background: var(--pc-card); border: 1px solid var(--pc-borda); box-shadow: var(--pc-sombra);
  position: relative; overflow: hidden;
}
.painel-comercial .pc-hero::before {
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--pc-ouro) 30%, var(--pc-ouro) 70%, transparent);
  opacity: .55;
}
.painel-comercial .pc-hero-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 20px; }
.painel-comercial .pc-kicker { font-size: .68rem; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--pc-ouro); flex: 1 0 100%; }
.painel-comercial .pc-hero-main h1 { margin: 0; font-size: 1.7rem; font-weight: 700; color: var(--pc-texto); letter-spacing: -.01em; }
.painel-comercial .pc-tags { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.painel-comercial .pc-receita { display: flex; flex-direction: column; align-items: flex-end; font-size: 1.3rem; font-weight: 700; color: var(--pc-texto); line-height: 1.15; }
.painel-comercial .pc-receita small { font-size: .66rem; font-weight: 500; letter-spacing: .4px; text-transform: uppercase; color: var(--pc-muted); }
.painel-comercial .pc-hora { font-size: .78rem; color: var(--pc-muted); }
.painel-comercial .adm-atualizar { border-color: var(--pc-borda); color: var(--pc-texto); }
.painel-comercial .adm-atualizar:hover { border-color: var(--pc-borda-forte); }
.painel-comercial .pc-conversao { padding-top: 4px; border-top: 1px solid var(--pc-borda); }
.painel-comercial .dp-top { display: flex; justify-content: space-between; align-items: baseline; font-size: .82rem; color: var(--pc-muted); margin-bottom: 8px; }
.painel-comercial .dp-top b { color: var(--pc-texto); font-size: 1.05rem; font-weight: 700; }
.painel-comercial .bar.big { height: 6px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.painel-comercial .bar.big i { display: block; height: 100%; background: var(--pc-ouro); border-radius: 999px; }
.painel-comercial .pc-conversao small { display: block; margin-top: 6px; font-size: .74rem; color: var(--pc-muted); }

/* Titulos de secao: discretos, sem faixa colorida */
.painel-comercial .pc-sec { margin: 26px 2px 12px; font-size: .74rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--pc-muted); }
.painel-comercial .pc-sec::after { content: ""; display: block; margin-top: 8px; height: 1px; background: var(--pc-borda); }

/* KPIs: cartoes finos e concisos, um unico acento roxo claro, sem cores por tipo.
   auto-fit com base pequena: cabe 6 numa linha so em telas normais, sem quebrar 5+1. */
.painel-comercial .pc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; margin-bottom: 4px; }
.painel-comercial .dash-kpi {
  --c1: var(--pc-ouro); --c2: var(--pc-ouro);
  background: var(--pc-card); border: 1px solid var(--pc-borda); border-radius: 12px;
  box-shadow: var(--pc-sombra); padding: 12px 13px; gap: 10px; min-width: 0;
}
.painel-comercial .dash-kpi::before { display: none; }
.painel-comercial .dash-kpi:hover { transform: none; box-shadow: var(--pc-sombra-hover), 0 0 0 1px var(--pc-borda-forte); border-color: transparent; }
.painel-comercial .dk-ic { width: 30px; height: 30px; border-radius: 8px; background: rgba(201,168,255,.12); color: var(--pc-ouro); box-shadow: none; flex: none; }
.painel-comercial .dk-ic svg { width: 15px; height: 15px; }
.painel-comercial .dk-txt { min-width: 0; }
.painel-comercial .dk-txt b { font-size: 1.15rem; font-weight: 700; color: var(--pc-texto); }
.painel-comercial .dk-txt span { font-size: .6rem; font-weight: 600; letter-spacing: .4px; color: var(--pc-muted); opacity: 1; white-space: nowrap; }
.painel-comercial .dk-txt small { color: var(--pc-muted); opacity: .8; font-size: .66rem; }
@media (max-width: 640px) { .painel-comercial .pc-kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; } .painel-comercial .dash-kpi { padding: 10px 11px; } }

/* Paineis (graficos, tabelas, formularios): mesmo grafite sobrio, cabecalho neutro */
.painel-comercial .panel.dash-card,
.painel-comercial .dash-card {
  background: var(--pc-card) !important; border: 1px solid var(--pc-borda) !important;
  border-radius: 14px; box-shadow: var(--pc-sombra) !important;
}
.painel-comercial .dash-card .panel-h {
  background: linear-gradient(90deg, rgba(124,92,255,.16), rgba(201,168,255,.06) 55%, var(--pc-card-2) 100%) !important;
  border-bottom: 1px solid var(--pc-borda-forte) !important;
  border-radius: 14px 14px 0 0; padding: 14px 18px;
}
.painel-comercial .dash-card .panel-h h2 { color: var(--pc-texto); text-shadow: none; font-size: .92rem; font-weight: 700; }
.painel-comercial .panel-b { padding: 18px; }
.painel-comercial .chart-panel .gx { stroke: var(--pc-borda); }
.painel-comercial .chart-panel .gt { fill: var(--pc-muted); }
.painel-comercial .chart-panel rect[fill^="url"] { fill: var(--pc-ouro) !important; }

/* Tabelas: linhas finas, cabecalho discreto, zebra sutil */
.painel-comercial .tbl { width: 100%; border-collapse: collapse; }
.painel-comercial .tbl th {
  text-align: left; font-size: .66rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--pc-muted); padding: 10px 14px; border-bottom: 1px solid var(--pc-borda-forte);
  background: linear-gradient(90deg, rgba(201,168,255,.12), rgba(124,92,255,.05) 60%, transparent);
}
.painel-comercial .tbl td { padding: 11px 14px; border-bottom: 1px solid var(--pc-borda); font-size: .86rem; color: var(--pc-texto); }
.painel-comercial .tbl tr:last-child td { border-bottom: none; }
.painel-comercial .tbl tr:hover td { background: rgba(255,255,255,.02); }
.painel-comercial .tbl small { color: var(--pc-muted); }
.painel-comercial .chip { background: rgba(255,255,255,.06); border: 1px solid var(--pc-borda); color: var(--pc-muted); }
.painel-comercial .chip.mg { background: rgba(201,168,255,.14); border-color: rgba(201,168,255,.32); color: var(--pc-ouro); }
.painel-comercial .chip.ko { background: rgba(220,38,38,.14); border-color: rgba(220,38,38,.32); color: #ff9d9d; }
.painel-comercial .chip.ok { background: rgba(47,191,104,.14); border-color: rgba(47,191,104,.32); color: #7fe3a4; }

/* Busca e formulario de bonus: mesmos tons neutros */
.painel-comercial .adm-busca input,
.painel-comercial .bonus-form input,
.painel-comercial .bonus-form textarea {
  background: var(--pc-bg); border: 1px solid var(--pc-borda); color: var(--pc-texto);
}
.painel-comercial .adm-busca input:focus,
.painel-comercial .bonus-form input:focus,
.painel-comercial .bonus-form textarea:focus { border-color: var(--pc-borda-forte); }
.painel-comercial .bonus-dias .filtro.on { background: var(--pc-ouro); color: #241b3a; border-color: var(--pc-ouro); }
.painel-comercial .btn.primary { background: var(--pc-ouro); color: #241b3a; border-color: var(--pc-ouro); box-shadow: 0 4px 14px rgba(124,92,255,.28); }
.painel-comercial .btn.primary:hover { filter: brightness(1.08); }
.painel-comercial .bonus-txt { color: var(--pc-muted); font-size: .86rem; line-height: 1.55; }

@media (max-width: 640px) {
  .painel-comercial .pc-hero { padding: 18px; }
  .painel-comercial .pc-hero-main h1 { font-size: 1.35rem; }
  .painel-comercial .pc-tags { width: 100%; margin-left: 0; justify-content: space-between; }
}
.painel-comercial .adm-prods { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.painel-comercial .adm-prod { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 12px; border: 1px solid var(--pc-borda, rgba(255,255,255,.1)); border-radius: 10px; }
.painel-comercial .adm-prod b { font-weight: 600; }
.painel-comercial .adm-prod small { color: var(--pc-muted); margin-left: auto; }

/* Deck Anki (admin): arvore de selecao e barra de exportacao */
.anki-tela .anki-aviso { margin: 0 0 14px; color: var(--mut, #a9a9b3); line-height: 1.55; }
.anki-opcoes { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; margin-bottom: 14px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.02); }
.anki-opcoes label { display: flex; align-items: center; gap: 9px; }
.anki-pref input[type="text"] { width: 150px; margin-left: 4px; }
.anki-busca { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.anki-busca { flex-wrap: wrap; }
.anki-busca input[type="search"] { flex: 1 1 220px; min-width: 0; min-height: 46px; font-size: 16px; padding: 11px 14px; border-radius: 12px; border: 1px solid rgba(176,135,247,.4); background: rgba(255,255,255,.04); color: inherit; font-family: inherit; }
.anki-busca input[type="search"]:focus { outline: none; border-color: #B087F7; box-shadow: 0 0 0 3px rgba(176,135,247,.22); }
.anki-busca small { flex: none; color: #cdbdf3; font-size: .78rem; white-space: nowrap; }
.anki-arvore [hidden] { display: none !important; }
.anki-arvore { max-height: 62vh; overflow: auto; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 8px; background: rgba(255,255,255,.02); }
.anki-arvore input[type="checkbox"], .anki-opcoes input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; width: 19px; height: 19px; margin: 0; border: 1.5px solid rgba(176,135,247,.65); border-radius: 6px; background: rgba(255,255,255,.04); cursor: pointer; display: inline-grid; place-content: center; transition: background .12s, border-color .12s; }
.anki-arvore input[type="checkbox"]::after, .anki-opcoes input[type="checkbox"]::after { content: ""; width: 9px; height: 5px; border-left: 2.4px solid #0b0b0f; border-bottom: 2.4px solid #0b0b0f; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.anki-arvore input[type="checkbox"]:checked, .anki-opcoes input[type="checkbox"]:checked { background: #B087F7; border-color: #B087F7; }
.anki-arvore input[type="checkbox"]:checked::after, .anki-opcoes input[type="checkbox"]:checked::after { opacity: 1; }
.anki-grupo > summary { list-style: none; cursor: pointer; }
.anki-grupo > summary::-webkit-details-marker { display: none; }
.anki-no { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; cursor: pointer; flex-wrap: wrap; }
.anki-no:hover { background: rgba(176,135,247,.1); }
.anki-no span { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; line-height: 1.3; }
.anki-no small { flex: none; color: #cdbdf3; font-size: .74rem; white-space: nowrap; padding: 2px 9px; border-radius: 999px; background: rgba(176,135,247,.14); }
.anki-grupo > summary .anki-no::before { content: ""; flex: none; width: 0; height: 0; border-left: 6px solid #B087F7; border-top: 5px solid transparent; border-bottom: 5px solid transparent; transition: transform .15s; margin-right: 2px; }
.anki-grupo[open] > summary .anki-no::before { transform: rotate(90deg); }
.anki-folha .anki-no::before { content: ""; flex: none; width: 11px; }
.anki-grupo.n0 > summary .anki-no { font-weight: 700; font-size: 1.02rem; padding: 12px 12px; background: linear-gradient(90deg, rgba(124,92,255,.18), rgba(255,255,255,.02)); border: 1px solid rgba(176,135,247,.22); margin: 4px 0; }
.anki-grupo.n1 > summary .anki-no { font-weight: 600; }
.anki-filhos { margin-left: 14px; padding-left: 8px; border-left: 1px solid rgba(176,135,247,.28); }
.anki-barra { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 14px; }
.anki-resumo { color: #E9DDFF; font-weight: 600; }
.anki-prog { margin-top: 12px; }
.anki-prog-b { height: 8px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.anki-prog-b i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #7C5CFF, #B087F7); transition: width .2s; }
.anki-prog small { display: block; margin-top: 6px; color: var(--mut, #a9a9b3); }
.anki-log { margin-top: 12px; padding: 10px 12px; border: 1px solid rgba(255,120,120,.4); border-radius: 10px; font-size: .85rem; }
.anki-log ul { margin: 6px 0 0 18px; padding: 0; }
@media (max-width: 640px) { .anki-arvore { max-height: 55vh; padding: 6px; } .anki-no { padding: 10px 8px; gap: 8px; } .anki-no span { flex-basis: 100px; } .anki-no small { font-size: .7rem; } .anki-filhos { margin-left: 8px; padding-left: 6px; } .anki-barra .btn { width: 100%; } .anki-pref input[type="text"] { width: 110px; } }

/* painel comercial: faturamento (mensais + plano anual cheio) em linha propria, com o valor do plano anual em destaque */
.painel-comercial .pc-tags-fat { width: 100%; margin-left: 0; justify-content: flex-end; gap: 14px 26px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); }
.painel-comercial .pc-tags-fat .pc-receita small { max-width: 240px; text-align: right; }
.painel-comercial .pc-anual { color: #F2B84B; }
.painel-comercial .pc-tags-acao { width: 100%; margin-left: 0; justify-content: flex-end; }
@media (max-width: 700px) { .painel-comercial .pc-tags-fat { justify-content: space-between; } .painel-comercial .pc-tags-fat .pc-receita { align-items: flex-start; } .painel-comercial .pc-tags-fat .pc-receita small { text-align: left; max-width: none; } .painel-comercial .pc-tags-acao { justify-content: space-between; } }

/* painel comercial: cabecalho em duas linhas (titulo e atualizar; depois cartoes de valores alinhados) */
.painel-comercial .pc-hero-main { display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; }
.painel-comercial .pc-hero-tit { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.painel-comercial .pc-hero-acao { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; padding-top: 2px; }
.painel-comercial .pc-valores { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 10px; margin-top: 16px; }
.painel-comercial .pc-val { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.03); }
.painel-comercial .pc-val small { color: var(--pc-muted); font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.painel-comercial .pc-val b { font-size: 1.45rem; line-height: 1.15; font-weight: 700; color: var(--pc-texto); font-variant-numeric: tabular-nums; }
.painel-comercial .pc-val span { color: var(--pc-muted); font-size: .76rem; line-height: 1.35; }
.painel-comercial .pc-val-fat { border-color: rgba(176,135,247,.3); background: linear-gradient(180deg, rgba(176,135,247,.1), rgba(255,255,255,.02)); }
.painel-comercial .pc-val-anual { border-color: rgba(242,184,75,.4); background: linear-gradient(180deg, rgba(242,184,75,.12), rgba(255,255,255,.02)); }
.painel-comercial .pc-val-anual b { color: #F2B84B; }
@media (max-width: 700px) {
  .painel-comercial .pc-hero-main { flex-wrap: wrap; }
  .painel-comercial .pc-hero-acao { width: 100%; justify-content: space-between; }
  .painel-comercial .pc-valores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .painel-comercial .pc-val b { font-size: 1.2rem; }
}
@media (max-width: 380px) { .painel-comercial .pc-valores { grid-template-columns: 1fr; } }