/* Tokens do Design System IPPO: claro (cursos) e escuro */
:root, [data-theme="claro"] {
  --fundo: #eff2f4; --superficie: #ffffff; --superficie-suave: #eef2f5;
  --tinta: #001522; --tinta-suave: #46525e; --borda: #e2e8ec;
  --verde-ippo: #03c5a9; --sobre-verde: #001522; --verde-claro: #d6f2eb; --escudo: #cbe3e2;
  --lateral: #001522; --lateral-tinta: #eff2f4; --lateral-suave: #a9b8c6; --lateral-ativo: #0b2533;
  --grade: #e6ebee;
}
[data-theme="escuro"] {
  --fundo: #001522; --superficie: #0b2533; --superficie-suave: #102d3c;
  --tinta: #eff2f4; --tinta-suave: #a9b8c6; --borda: #183746;
  --verde-claro: #0e3a3f; --escudo: #013138;
  --lateral: #000d15; --lateral-ativo: #0b2533;
  --grade: #183746;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: "Plus Jakarta Sans", system-ui, sans-serif; background: var(--fundo); color: var(--tinta); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
.rotulo { font-size: 11px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; color: var(--tinta-suave); }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Estrutura: lateral + conteúdo */
.app { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.lateral { background: var(--lateral); color: var(--lateral-tinta); padding: 22px 16px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; height: 100vh; }
.lateral .marca { display: flex; align-items: center; gap: 10px; padding: 4px 10px 22px; }
.lateral .marca img { height: 34px; width: auto; }
.lateral .grupo { font-size: 10.5px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; color: var(--lateral-suave); padding: 16px 12px 6px; }
.item { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; border-radius: 12px; color: var(--lateral-suave); font-weight: 500; }
.item i { font-size: 20px; }
.item:hover { color: var(--lateral-tinta); background: rgba(239, 242, 244, .06); }
.item.ativo { background: var(--lateral-ativo); color: var(--lateral-tinta); box-shadow: inset 3px 0 0 var(--verde-ippo); }
.item .contador { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--verde-ippo); color: var(--sobre-verde); font-size: 11.5px; font-weight: 700; display: grid; place-items: center; }
.lateral .rodape { margin-top: auto; display: grid; gap: 8px; }
.tema { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border-radius: 12px; background: rgba(239, 242, 244, .06); border: 0; color: var(--lateral-tinta); cursor: pointer; font-weight: 500; }
.tema .chave { margin-left: auto; width: 36px; height: 20px; border-radius: 99px; background: rgba(239, 242, 244, .2); position: relative; }
.tema .chave::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--lateral-tinta); transition: transform .2s; }
[data-theme="escuro"] .tema .chave { background: var(--verde-ippo); }
[data-theme="escuro"] .tema .chave::after { transform: translateX(16px); background: var(--sobre-verde); }
.pessoa { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--verde-ippo); color: var(--sobre-verde); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.pessoa small { display: block; color: var(--lateral-suave); font-size: 12px; }

/* Topo */
.conteudo { padding: 24px 32px 48px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-content: start; min-width: 0; }
.topo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.topo h1 { font-size: 26px; font-weight: 600; letter-spacing: -.6px; }
.topo .sub { color: var(--tinta-suave); font-size: 13px; margin-top: 2px; }
.topo .acoes { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.busca { display: flex; align-items: center; gap: 8px; height: 42px; width: 260px; padding: 0 14px; border-radius: 12px; background: var(--superficie); color: var(--tinta-suave); }
.busca input { border: 0; outline: 0; background: transparent; width: 100%; }
.icone { width: 42px; height: 42px; border-radius: 12px; border: 0; background: var(--superficie); display: grid; place-items: center; cursor: pointer; position: relative; }
.icone i { font-size: 20px; }
.icone .ponto { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--verde-ippo); box-shadow: 0 0 0 2px var(--superficie); }
.seletor { height: 42px; border: 0; border-radius: 12px; background: var(--superficie); padding: 0 12px; font-weight: 500; }
.botao { height: 42px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--verde-ippo); color: var(--sobre-verde); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }

/* Cartões */
.cartao { background: var(--superficie); border-radius: 20px; padding: 20px 22px; min-width: 0; }
.cartao-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.cartao-topo h2 { font-size: 16px; font-weight: 600; letter-spacing: -.2px; }
.link { font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--borda); }
.link:hover { border-color: var(--verde-ippo); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kpi { display: grid; gap: 10px; }
.kpi .linha1 { display: flex; justify-content: space-between; align-items: center; color: var(--tinta-suave); font-weight: 500; font-size: 13px; }
.kpi .chip-icone { width: 36px; height: 36px; border-radius: 12px; background: var(--verde-claro); color: var(--tinta); display: grid; place-items: center; font-size: 19px; }
.kpi .valor { font-size: 28px; font-weight: 600; letter-spacing: -.8px; }
.kpi .linha3 { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--tinta-suave); }
.delta { display: inline-flex; align-items: center; gap: 2px; height: 22px; padding: 0 8px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--verde-claro); color: var(--tinta); }
.delta.baixa { background: var(--superficie-suave); color: var(--tinta-suave); }
.kpi.destaque { background: var(--inverso, #001522); color: #eff2f4; }
.kpi.destaque .linha1, .kpi.destaque .linha3 { color: #a9b8c6; }
.kpi.destaque .valor { color: var(--verde-ippo); }
.kpi.destaque .chip-icone { background: rgba(3, 197, 169, .16); color: var(--verde-ippo); }
.kpi.destaque .delta { background: rgba(3, 197, 169, .16); color: #eff2f4; }
[data-theme="escuro"] .kpi.destaque { background: #013138; }

.grade-1 { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; }
.grade-2 { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.receita-total { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.receita-total strong { font-size: 30px; font-weight: 600; letter-spacing: -.8px; }
.grafico { position: relative; height: 240px; margin-top: 12px; }
.rosca { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 18px; align-items: center; }
.rosca .area { position: relative; height: 180px; }
.rosca .centro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.rosca .centro strong { font-size: 26px; font-weight: 600; letter-spacing: -.6px; }
.legenda { display: grid; gap: 12px; }
.mini { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.mini > * { background: var(--superficie-suave); border-radius: 14px; padding: 12px 14px; display: grid; gap: 2px; }
.mini > * b { font-size: 22px; font-weight: 600; letter-spacing: -.4px; }
.mini > * small { color: var(--tinta-suave); font-size: 12px; }
.legenda div { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-weight: 500; }
.legenda span.cor { width: 12px; height: 12px; border-radius: 3px; }
.legenda span:not(.cor) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legenda b { font-weight: 600; }

/* Fechamentos recentes */
.tabela { width: 100%; border-collapse: collapse; }
.tabela th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--tinta-suave); padding: 0 8px 10px; }
.tabela td { padding: 11px 8px; border-top: 1px solid var(--borda); vertical-align: middle; }
.tabela td.valor { text-align: right; font-weight: 600; white-space: nowrap; }
.forma-sub { display: block; font-weight: 400; font-size: 12px; color: var(--tinta-suave); }
.tabela td.status-cel { text-align: right; }
.tabela th.valor { text-align: right; }
.aluno { display: flex; align-items: center; gap: 10px; }
.aluno .ini { width: 32px; height: 32px; border-radius: 50%; background: var(--superficie-suave); display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.aluno small { display: block; color: var(--tinta-suave); font-size: 12px; }
.status { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.status.pago { background: var(--verde-claro); color: var(--tinta); }
.status.parcelado { border: 1.5px solid var(--verde-ippo); }
.status.cancelado { background: var(--superficie-suave); color: var(--tinta-suave); }

.turma-linha { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--borda); }
.turma-linha:first-child { border-top: 0; padding-top: 0; }
.turma-linha .cab { display: flex; justify-content: space-between; gap: 10px; }
.turma-linha .cab b { font-weight: 600; }
.turma-linha .cab small { color: var(--tinta-suave); font-size: 12px; }
.barra { height: 8px; border-radius: 99px; background: var(--superficie-suave); overflow: hidden; }
.barra span { display: block; height: 100%; background: var(--verde-ippo); border-radius: 99px; }
.barra.cheia span { background: var(--tinta); }
.origem { display: grid; gap: 16px; }
.origem .cab { display: flex; justify-content: space-between; font-weight: 500; margin-bottom: 7px; }
.origem .cab b { font-weight: 600; }
.nota { font-size: 12px; color: var(--tinta-suave); margin-top: 14px; }

/* Barra de abas do celular */
.abas { display: none; }

/* Tablet: lateral só com ícones */
@media (max-width: 1240px) {
  .app { grid-template-columns: 84px minmax(0, 1fr); }
  .lateral { padding: 22px 12px; align-items: center; }
  .lateral .marca { padding: 4px 0 22px; }
  .lateral .marca img.horizontal { display: none; }
  .lateral .marca img.simbolo { display: block !important; height: 38px; }
  .item { width: 52px; justify-content: center; padding: 0; }
  .item span, .lateral .grupo, .tema span, .tema .chave, .pessoa div { display: none; }
  .item .contador { position: absolute; margin: -22px -26px 0 0; min-width: 18px; height: 18px; font-size: 10.5px; }
  .item { position: relative; }
  .tema { width: 52px; justify-content: center; padding: 0; }
  .pessoa { padding: 8px 0; justify-content: center; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .grade-2 .recentes { grid-column: 1 / -1; }
  .busca { width: 200px; }
  .rosca { grid-template-columns: 140px minmax(0, 1fr); gap: 14px; }
  .rosca .area { height: 140px; }
  .rosca .centro strong { font-size: 22px; }
}
@media (max-width: 960px) {
  .grade-1 { grid-template-columns: minmax(0, 1fr); }
}
/* Celular: sem lateral; topo enxuto e abas embaixo */
@media (max-width: 760px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral { display: none; }
  .conteudo { padding: 16px 16px 96px; gap: 14px; }
  .topo { flex-wrap: nowrap; gap: 10px; }
  .topo > div:not(.acoes) { flex: 1; min-width: 0; }
  .topo h1 { font-size: 22px; }
  .topo .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .busca, .topo .seletor, .topo .botao span { display: none; }
  .topo .botao { width: 42px; padding: 0; justify-content: center; }
  .topo .acoes { gap: 8px; }
  .marca-celular { display: flex !important; }
  .kpis { gap: 10px; }
  .cartao { padding: 16px; border-radius: 18px; }
  .kpi .valor { font-size: 22px; }
  .kpi .chip-icone { width: 32px; height: 32px; font-size: 17px; }
  .kpi .linha3 { flex-wrap: wrap; gap: 4px 8px; }
  .grade-2 { grid-template-columns: minmax(0, 1fr); }
  .rosca { grid-template-columns: 130px minmax(0, 1fr); gap: 14px; }
  .rosca .area { height: 130px; }
  .rosca .centro strong { font-size: 20px; }
  .grafico { height: 200px; }
  .tabela thead { display: none; }
  .tabela tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 12px 0; border-top: 1px solid var(--borda); }
  .tabela tr:first-child { border-top: 0; }
  .tabela td { border: 0; padding: 0; }
  .tabela td.valor { grid-column: 2; grid-row: 1; align-self: center; }
  .tabela td.status-cel { display: none; }
  .tabela td.forma { display: none; }
  .abas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: var(--lateral); padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); }
  .abas a { display: grid; justify-items: center; gap: 2px; color: var(--lateral-suave); font-size: 10.5px; font-weight: 600; padding: 4px 0; border-radius: 12px; position: relative; }
  .abas a i { font-size: 22px; }
  .abas a.ativo { color: var(--lateral-tinta); }
  .abas a.ativo i { color: var(--verde-ippo); }
  .abas .contador { position: absolute; top: 0; left: calc(50% + 6px); min-width: 16px; height: 16px; border-radius: 99px; background: var(--verde-ippo); color: var(--sobre-verde); font-size: 10px; font-weight: 700; display: grid; place-items: center; padding: 0 4px; }
}

/* ---------- Componentes das telas de Turmas e Fechamentos ---------- */
.barra-ferramentas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.barra-ferramentas .busca { width: 240px; background: var(--superficie-suave); height: 38px; }
.chip-filtro { height: 34px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--borda); background: transparent; font-weight: 600; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.chip-filtro b { font-weight: 700; color: var(--tinta-suave); }
.chip-filtro.on { background: var(--tinta); border-color: var(--tinta); color: var(--fundo); }
.chip-filtro.on b { color: inherit; opacity: .7; }
.seletor.pequeno { height: 34px; background: var(--superficie-suave); font-size: 13px; }
.botao.contorno { background: transparent; border: 1.5px solid var(--verde-ippo); color: var(--tinta); }
.botao.texto { background: transparent; padding: 0 6px; height: auto; border-radius: 6px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--borda); }
.botao.pequeno { height: 34px; padding: 0 14px; font-size: 13px; }

.lista { width: 100%; border-collapse: collapse; }
.lista th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--tinta-suave); padding: 0 10px 10px; white-space: nowrap; }
.lista td { padding: 12px 10px; border-top: 1px solid var(--borda); vertical-align: middle; }
.lista tbody tr { cursor: pointer; }
.lista tbody tr:hover td { background: var(--superficie-suave); }
.lista tbody tr.sel td { background: var(--verde-claro); }
.lista tbody tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--verde-ippo); }
.lista td:first-child { border-radius: 0; }
.lista .t-nome b { font-weight: 600; display: block; }
.lista .t-nome small { color: var(--tinta-suave); font-size: 12px; }
.pilula-data { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; background: var(--verde-ippo); color: var(--sobre-verde); font-size: 12px; font-weight: 600; white-space: nowrap; }
.pilula-contorno { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; border: 1.5px solid var(--verde-ippo); font-size: 12px; font-weight: 600; white-space: nowrap; }
.pilula-suave { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--superficie-suave); color: var(--tinta-suave); font-size: 12px; font-weight: 600; white-space: nowrap; }
.pilula-escura { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--tinta); color: var(--fundo); font-size: 12px; font-weight: 600; white-space: nowrap; }
.ocup { display: grid; gap: 5px; min-width: 110px; }
.ocup .cab { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.ocup .cab b { font-weight: 700; }
.ocup .cab small { color: var(--tinta-suave); }

/* Painel lateral de edição */
.com-lateral { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 16px; align-items: start; }
.gaveta { position: sticky; top: 20px; display: grid; gap: 0; padding: 0; overflow: hidden; max-height: calc(100vh - 40px); grid-template-rows: auto minmax(0, 1fr) auto; }
.gaveta-topo { padding: 18px 20px 14px; border-bottom: 1px solid var(--borda); display: flex; gap: 12px; align-items: start; }
.gaveta-topo h2 { font-size: 20px; font-weight: 600; letter-spacing: -.4px; margin-top: 2px; }
.gaveta-topo .fechar { margin-left: auto; display: none; }
.gaveta-corpo { overflow: auto; padding: 4px 20px 16px; }
.gaveta-rodape { padding: 14px 20px; border-top: 1px solid var(--borda); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; background: var(--superficie); }
.secao { padding: 16px 0; border-top: 1px solid var(--borda); display: grid; gap: 10px; }
.secao:first-child { border-top: 0; }
.secao > .rotulo { display: flex; justify-content: space-between; align-items: center; }
.campos2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.campo { display: grid; gap: 5px; font-size: 12.5px; font-weight: 600; }
.campo input, .campo select, .entrada { height: 40px; border: 1.5px solid var(--borda); border-radius: 12px; background: var(--superficie); padding: 0 12px; font-weight: 500; width: 100%; color: var(--tinta); }
.campo input:focus, .campo select:focus { outline: 2px solid var(--tinta); outline-offset: 1px; }
.segmentos { display: flex; flex-wrap: wrap; gap: 6px; }
.segmentos button { height: 34px; padding: 0 13px; border-radius: 999px; border: 1.5px solid var(--borda); background: var(--superficie); font-weight: 600; font-size: 13px; cursor: pointer; }
.segmentos button.on { background: var(--tinta); border-color: var(--tinta); color: var(--fundo); }
.interruptor { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 600; font-size: 13.5px; cursor: pointer; }
.interruptor input { appearance: none; width: 40px; height: 22px; border-radius: 99px; background: var(--borda); position: relative; cursor: pointer; transition: background .2s; flex: none; }
.interruptor input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--superficie); transition: transform .2s; }
.interruptor input:checked { background: var(--verde-ippo); }
.interruptor input:checked::after { transform: translateX(18px); }
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.etiqueta { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 5px 0 12px; border-radius: 999px; background: var(--tinta); color: var(--fundo); font-size: 12.5px; font-weight: 600; }
.etiqueta button { width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(239, 242, 244, .2); color: inherit; cursor: pointer; display: grid; place-items: center; font-size: 13px; }
.aviso-linha { display: flex; gap: 8px; align-items: center; background: var(--superficie-suave); border-radius: 12px; padding: 10px 12px; font-size: 12.5px; color: var(--tinta-suave); }
.aviso-linha b { color: var(--tinta); font-weight: 600; }
.aviso-linha.forte { background: var(--verde-claro); color: var(--tinta); }

/* Prévia do card do site */
.previa-card { border: 1px solid var(--borda); border-radius: 16px; overflow: hidden; background: #eff2f4; color: #001522; }
.previa-card .foto { height: 92px; background: #cbe3e2; display: flex; justify-content: space-between; align-items: start; padding: 10px; }
.previa-card .foto span { background: #fff; color: #001522; height: 22px; padding: 0 9px; border-radius: 6px; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; }
.previa-card .info { padding: 12px 14px; }
.previa-card .meta { display: flex; justify-content: space-between; font-size: 11px; color: #46525e; font-weight: 500; }
.previa-card h3 { font-size: 17px; font-weight: 600; letter-spacing: -.3px; margin: 6px 0 2px; }
.previa-card .prof { font-size: 12px; color: #46525e; }
.previa-card .base { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #d7dee3; margin-top: 10px; padding-top: 10px; font-size: 12.5px; font-weight: 600; }
.previa-card .base span.cta { background: #03c5a9; color: #001522; height: 30px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }

/* Folha que desliza (registrar fechamento; edição no tablet/celular) */
.fundo-escuro { position: fixed; inset: 0; background: rgba(0, 21, 34, .5); z-index: 30; display: none; }
.folha { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100%); background: var(--superficie); z-index: 31; transform: translateX(100%); transition: transform .25s ease; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.folha.aberta { transform: none; }
.folha.aberta + .fundo-escuro, .fundo-escuro.visivel { display: block; }
.icone.pequeno { width: 36px; height: 36px; border-radius: 50%; background: var(--superficie-suave); }
.aviso-flutuante { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--tinta); color: var(--fundo); padding: 12px 20px; border-radius: 999px; font-weight: 600; z-index: 40; display: none; }
.aviso-flutuante.visivel { display: block; }

.ranking { display: grid; gap: 14px; }
.ranking .linha { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: center; }
.ranking .linha .cab { display: flex; justify-content: space-between; margin-bottom: 6px; font-weight: 500; }
.ranking .linha .cab b { font-weight: 600; }

@media (max-width: 1240px) {
  .com-lateral { grid-template-columns: minmax(0, 1fr); }
  .com-lateral .gaveta { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100%); max-height: none; border-radius: 0; z-index: 31; transform: translateX(100%); transition: transform .25s ease; }
  .com-lateral .gaveta.aberta { transform: none; }
  .gaveta-topo .fechar { display: grid; }
  .col-preco { display: none; }
}
@media (max-width: 760px) {
  .barra-ferramentas .busca { width: 100%; order: -1; }
  .lista thead { display: none; }
  .lista, .lista tbody { display: block; }
  .lista tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 14px 4px; border-top: 1px solid var(--borda); }
  .lista tbody tr:first-child { border-top: 0; }
  .lista td { border: 0; padding: 0; background: transparent !important; box-shadow: none !important; }
  .lista td.col-data { grid-column: 2; grid-row: 1; justify-self: end; }
  .lista td.col-ocup { grid-column: 1 / -1; }
  .lista td.col-site { grid-column: 1; }
  .lista td.col-seta { grid-column: 2; justify-self: end; }
  .lista-turmas td.col-seta { display: none; }
  .lista tbody tr.sel { background: var(--verde-claro); border-radius: 14px; padding-left: 10px; padding-right: 10px; }
  .campos2 { grid-template-columns: 1fr; }
  .com-lateral .gaveta, .folha { width: 100%; }
}

@media (max-width: 1500px) { .lista-turmas .col-preco { display: none; } }

@media (max-width: 760px) { .aviso-flutuante { bottom: 92px; } .gaveta-rodape .botao.texto { display: none; } }

/* ---------- Painel real: login, estados e confirmações ---------- */
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--verde-ippo); outline-offset: 2px; }
.tela-entrada { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--fundo); }
.entrada-cartao { width: min(420px, 100%); background: var(--superficie); border-radius: 22px; padding: 36px 30px; display: grid; gap: 20px; }
.entrada-cartao img { height: 44px; width: auto; justify-self: start; }
[data-theme="escuro"] .entrada-cartao img.claro { display: none; }
.entrada-cartao img.escuro { display: none; }
[data-theme="escuro"] .entrada-cartao img.escuro { display: block; }
.entrada-cartao h1 { font-size: 28px; font-weight: 600; letter-spacing: -.6px; margin-top: 4px; }
.erro-caixa { background: var(--tinta); color: var(--fundo); border-radius: 12px; padding: 11px 14px; font-weight: 500; font-size: 13.5px; }
.vazio { background: var(--verde-claro); border-radius: 14px; padding: 16px 18px; font-weight: 500; color: var(--tinta); }
.carregando { color: var(--tinta-suave); padding: 24px 4px; }
.botao[disabled] { opacity: .55; cursor: wait; }
.botao.escuro { background: var(--tinta); color: var(--fundo); }
.acoes-linha { display: flex; gap: 6px; justify-content: flex-end; }
.botao-mini { height: 30px; padding: 0 11px; border-radius: 999px; border: 1.5px solid var(--borda); background: transparent; font-weight: 600; font-size: 12px; cursor: pointer; white-space: nowrap; }
.botao-mini:hover { border-color: var(--verde-ippo); }
.modal-fundo { position: fixed; inset: 0; background: rgba(0, 21, 34, .55); z-index: 50; display: grid; place-items: center; padding: 16px; }
.modal { width: min(420px, 100%); background: var(--superficie); border-radius: 20px; padding: 24px; display: grid; gap: 14px; }
.modal h2 { font-size: 18px; font-weight: 600; letter-spacing: -.3px; }
.modal p { color: var(--tinta-suave); }
.modal .acoes { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.aviso-flutuante { display: none; align-items: center; gap: 14px; }
.aviso-flutuante.visivel { display: flex; }
.aviso-flutuante button { background: transparent; border: 0; color: var(--verde-ippo); font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.pendencia { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 16px 0; border-top: 1px solid var(--borda); }
.pendencia:first-child { border-top: 0; padding-top: 0; }
.pendencia ul { margin: 4px 0 0; padding-left: 18px; color: var(--tinta-suave); font-size: 13.5px; }
.pendencia b { font-weight: 600; }
.lugares { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12.5px; font-weight: 600; }
.lugares a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--borda); }
.texto-suave { color: var(--tinta-suave); }
.inline { display: flex; gap: 8px; align-items: center; }
.inline .entrada { flex: 1; }
@media (max-width: 760px) {
  .pendencia { grid-template-columns: minmax(0, 1fr); }
  .pendencia > .pilula-escura, .pendencia > .pilula-contorno, .pendencia > .botao-mini { justify-self: start; }
  .acoes-linha { justify-content: flex-start; }
}

/* Alunos */
.cursos-mini { display: flex; flex-wrap: wrap; gap: 4px; }
.historico-cursos { display: grid; gap: 8px; }
.curso-card { border: 1.5px solid var(--borda); border-radius: 14px; padding: 12px 14px; display: grid; gap: 4px; }
a.curso-card:hover { border-color: var(--verde-ippo); }
.curso-card .linha { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.curso-card b { font-weight: 600; }
.curso-card small { color: var(--tinta-suave); font-size: 12px; }
.ficha-topo { display: flex; gap: 14px; align-items: center; min-width: 0; }
.ficha-topo .avatar { width: 52px; height: 52px; font-size: 17px; }
.sugestoes { border: 1.5px solid var(--borda); border-radius: 12px; overflow: hidden; display: grid; }
.sugestoes button { display: flex; justify-content: space-between; gap: 10px; text-align: left; padding: 10px 12px; border: 0; border-top: 1px solid var(--borda); background: var(--superficie); cursor: pointer; font-size: 13.5px; }
.sugestoes button:first-child { border-top: 0; }
.sugestoes button:hover, .sugestoes button:focus-visible { background: var(--verde-claro); }
.sugestoes small { color: var(--tinta-suave); }
.escolhido { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--verde-ippo); border-radius: 12px; padding: 8px 10px; }
.escolhido b { font-weight: 600; }
.mais-lista { display: grid; gap: 8px; }
.mais-lista a, .mais-lista button { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 16px; background: var(--superficie); border: 0; font-weight: 600; font-size: 15px; text-align: left; cursor: pointer; color: var(--tinta); }
.mais-lista i { font-size: 20px; }
.mais-lista .contador { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--verde-ippo); color: var(--sobre-verde); font-size: 11.5px; font-weight: 700; display: grid; place-items: center; }

/* Financeiro: seleção de parcelas e plano de pagamento no registro */
.faixa-selecao { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 12px; border-radius: 12px; background: var(--escudo); color: #001522; font-weight: 600; font-size: 13.5px; }
.faixa-selecao[hidden] { display: none; }
.faixa-selecao span { margin-right: auto; }
.plano { display: grid; gap: 6px; }
.plano-linha { display: grid; grid-template-columns: 40px minmax(140px, 1.3fr) minmax(0, 1fr); gap: 8px; align-items: center; }
.plano-linha.com-extra { grid-template-columns: 40px minmax(140px, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
.plano-linha > span { font-size: 12.5px; font-weight: 700; color: var(--tinta-suave); }
.plano-linha input { height: 38px; border-radius: 10px; border: 1.5px solid var(--borda); background: var(--superficie); padding: 0 10px; font-size: 13.5px; min-width: 0; width: 100%; }
.plano-soma { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; padding-top: 6px; border-top: 1px solid var(--borda); }
.plano-soma.erro { color: #b42318; }
:root[data-theme="escuro"] .plano-soma.erro { color: #ff8a80; }
/* Editor do plano (registro e "Parcelas" de um fechamento) */
.editor-plano { display: grid; gap: 10px; }
.plano-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--tinta-suave); }
.plano-linha.com-marca { grid-template-columns: 40px minmax(130px, 1.3fr) minmax(0, 1fr) 108px; }
.plano-linha.com-marca.com-extra [data-c="extra"] { grid-column: 2 / 4; grid-row: 2; }
.plano-linha .marca { height: 38px; border-radius: 10px; border: 1.5px solid var(--borda); background: var(--superficie); padding: 0 8px; font-size: 12.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; }
.plano-linha.recebida .marca { background: var(--verde-claro); border-color: var(--verde-ippo); }
.plano-linha .receb { grid-column: 2 / -1; display: none; align-items: center; gap: 8px; font-size: 12.5px; color: var(--tinta-suave); }
.plano-linha.recebida .receb { display: flex; }
.plano-linha .receb input { max-width: 170px; height: 34px; }
.resumo3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.resumo3 > div { border: 1.5px solid var(--borda); border-radius: 12px; padding: 8px 10px; min-width: 0; }
.resumo3 small { display: block; font-size: 11.5px; color: var(--tinta-suave); }
.resumo3 b { font-size: 15px; font-weight: 700; }
.resumo3 .falta { border-color: var(--verde-ippo); }
.fixa { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; padding: 7px 0; border-top: 1px solid var(--borda); }
.fixa:first-child { border-top: 0; }
.fixa .n { font-weight: 700; color: var(--tinta-suave); font-size: 12.5px; }
.fixa small { display: block; color: var(--tinta-suave); font-size: 12px; }
.fixa.sai > div, .fixa.sai .n, .fixa.sai .num { text-decoration: line-through; text-decoration-color: var(--tinta-suave); opacity: .75; }
@media (max-width: 760px) {
  .resumo3 b { font-size: 13.5px; }
  .plano-linha.com-marca, .plano-linha.com-marca.com-extra { grid-template-columns: 34px minmax(0, 1.2fr) minmax(0, 1fr); }
  .plano-linha.com-marca .marca, .plano-linha.com-marca.com-extra [data-c="extra"] { grid-column: 2 / -1; grid-row: auto; }
}
@media (max-width: 760px) { .topo .seletor.sempre { display: block; max-width: 116px; font-size: 13.5px; padding: 0 8px; } .plano-linha.com-extra { grid-template-columns: 40px minmax(0, 1.3fr) minmax(0, 1fr); } .plano-linha.com-extra input:last-child { grid-column: 2 / -1; } }

/* Margem por turma (etapa 2) */
:root, [data-theme="claro"] { --cor-taxas: #9fc9c6; }
[data-theme="escuro"] { --cor-taxas: #2f6670; }
.folha.larga { width: min(600px, 100%); }
.lista-margem td.dir, .lista-margem th.dir { text-align: right; white-space: nowrap; }
.lista-margem .m-margem { width: 150px; }
.lista-margem .m-margem .linha { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; font-weight: 600; margin-bottom: 5px; }
.lista-margem small.sub { display: block; color: var(--tinta-suave); font-size: 11.5px; font-weight: 500; }
.resultado { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.resultado > div { background: var(--superficie-suave); border-radius: 12px; padding: 10px 12px; }
.resultado small { display: block; font-size: 11.5px; color: var(--tinta-suave); font-weight: 600; }
.resultado b { display: block; font-size: 18px; font-weight: 700; margin-top: 2px; }
.resultado .lucro { background: var(--verde-claro); }
.divisao { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--superficie-suave); }
.divisao .c { background: var(--tinta-suave); }
.divisao .t { background: var(--cor-taxas); }
.divisao .l { background: var(--verde-ippo); }
.legenda-mini { display: flex; gap: 14px; font-size: 12px; color: var(--tinta-suave); flex-wrap: wrap; }
.legenda-mini i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.custo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px; padding: 10px; border: 1.5px solid var(--borda); border-radius: 14px; }
.custo .baixo { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.custo input, .custo select { height: 36px; border: 1.5px solid var(--borda); border-radius: 10px; background: var(--superficie); padding: 0 10px; width: 100%; font: inherit; font-size: 13px; color: var(--tinta); }
.custo .total, .taxas-auto .total { font-weight: 700; white-space: nowrap; min-width: 84px; text-align: right; }
.custo .total small { display: block; font-size: 11px; font-weight: 500; color: var(--tinta-suave); }
.lista-custos { display: grid; gap: 8px; }
.taxas-auto { border: 1.5px dashed var(--borda); border-radius: 14px; padding: 4px 12px; }
.taxas-auto .linha { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--borda); font-size: 13px; }
.taxas-auto .linha:first-child { border-top: 0; }
.taxas-auto .linha span { flex: 1; }
.taxas-auto .linha small { display: block; color: var(--tinta-suave); font-size: 11.5px; }
@media (max-width: 760px) {
  .lista-margem .m-oculta { display: none; }
  .lista-margem td.m-lucro { grid-column: 2; grid-row: 1; justify-self: end; text-align: right; }
  .lista-margem td.m-margem { grid-column: 1 / -1; width: auto; }
  .lista-margem td.m-estado { grid-column: 1; }
  .resultado { grid-template-columns: 1fr 1fr; }
  .resultado .lucro { grid-column: 1 / -1; }
  .custo, .custo .baixo { grid-template-columns: 1fr 1fr; }
  .custo .baixo .total { text-align: left; }
}

/* Lista de espera */
.alertas { display: grid; gap: 10px; }
.alerta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--verde-claro); }
.alerta > i { font-size: 22px; }
.alerta b { font-weight: 600; display: block; }
.alerta small { color: var(--tinta-suave); font-size: 12.5px; }
.selo { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--escudo); color: var(--tinta); font-size: 11px; font-weight: 600; margin-left: 6px; vertical-align: 1px; white-space: nowrap; }
.origens { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.origem-pil { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; border: 1.5px solid var(--borda); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.lista-espera .sit { font-size: 12.5px; white-space: nowrap; }
.lista-espera .sit small { display: block; color: var(--tinta-suave); font-size: 11.5px; }
.lista-espera .aluno small { display: block; color: var(--tinta-suave); font-size: 12px; }
.lista-espera td.e-pos, .lista-espera th.e-pos { width: 30px; color: var(--tinta-suave); font-weight: 700; }
.botao-zap { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 0; background: var(--verde-ippo); color: var(--sobre-verde); font-weight: 600; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.botao-zap i { font-size: 16px; }
.botao-zap.grande { height: 42px; padding: 0 16px; font-size: 14px; }
.mensagem { width: 100%; min-height: 140px; border: 1.5px solid var(--borda); border-radius: 12px; background: var(--superficie); color: var(--tinta); padding: 10px 12px; font: inherit; font-size: 13.5px; line-height: 1.45; resize: vertical; }
.linha-tempo div { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; padding: 6px 0; font-size: 13px; }
.linha-tempo i { color: var(--tinta-suave); margin-top: 2px; }
.linha-tempo small { display: block; color: var(--tinta-suave); font-size: 11.5px; }
.dados { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dados div { background: var(--superficie-suave); border-radius: 12px; padding: 9px 12px; min-width: 0; }
.dados small { display: block; font-size: 11px; color: var(--tinta-suave); font-weight: 600; }
.dados b { font-weight: 600; font-size: 13.5px; overflow-wrap: anywhere; }
@media (max-width: 1500px) { .lista-espera .e-larga, .lista-espera .col-preco { display: none; } }
@media (max-width: 760px) {
  .lista-espera td.e-pos { display: none; }
  .lista-espera td.col-data .botao-zap span { display: none; }
  .alerta { grid-template-columns: minmax(0, 1fr); }
  .alerta > i { display: none; }
  .e-pil { display: none; }
}