/* Tema do painel base (Julian Lee): escuro, destaque verde #99cc66, fonte Jost, titulos em minusculas.
   Vale so para as areas logadas do professor e do aluno (body.tema-base). Carregado depois de app.css.
   Mobile primeiro: no celular o professor continua com a barra de abas embaixo; a partir de 761px (mesmo ponto do painel base)
   a barra vira o menu lateral. Se o painel base trocar de tema, e so mexer nas variaveis abaixo. */

body.tema-base {
  --tinta: #f4f6f2;
  --tinta-2: #b4bdb4;
  --mudo: #9ba79e;
  --papel: #202326;
  --branco: #272c30;
  --linha: #3b4245;
  --linha-forte: #4a5354;
  --quadra: #9acd65;
  --quadra-esc: #b0dd7d;
  --quadra-clara: rgba(154, 205, 101, .13);
  --verde: #7fc48f;
  --verde-clara: rgba(120, 200, 140, .14);
  --ambar: #e6c36a;
  --ambar-clara: rgba(230, 195, 106, .12);
  --vermelho: #f2b8b8;
  --vermelho-clara: rgba(220, 80, 80, .14);
  --chuva: #5d7488;
  --chuva-clara: rgba(130, 160, 190, .14);
  --raio: 12px; --lateral: #1a1e21; --campo: #202528;
  --fonte: "Jost", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: dark;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(153, 204, 102, .18);
}

/* ---------- Tipografia: titulos e rotulos em minusculas, como no painel base ---------- */
.tema-base h1 { font-weight: 500; letter-spacing: 0; }
.tema-base h2 { font-weight: 500; letter-spacing: 0; }
.tema-base h3 { font-weight: 500; }
.tema-base .campo label, .tema-base legend { font-size: .9rem; font-weight: 500; color: var(--mudo); }
.tema-base a { color: var(--quadra); }
.tema-base :focus-visible { outline-color: var(--quadra); }
.tema-base strong { font-weight: 600; }

/* ---------- Topo ---------- */
.tema-base .topo { background: var(--lateral); color: var(--tinta); border-bottom: 1px solid var(--linha); }
.tema-base .marca { color: var(--tinta); font-weight: 600; letter-spacing: 0; }
.tema-base .topo-nav a, .tema-base .topo-nav .link { color: var(--mudo); }
.tema-base .topo-nav a:hover, .tema-base .topo-nav .link:hover { color: var(--tinta); background: rgba(255, 255, 255, .04); }
.tema-base .topo-nav a[aria-current="page"] { background: var(--quadra); color: #192315; font-weight: 600; }
.tema-base .topo-trilha { display: none; }

/* ---------- Avisos ---------- */
.tema-base .aviso-flash { background: var(--quadra-clara); color: var(--tinta); border-color: rgba(153, 204, 102, .35); }
.tema-base .aviso-flash.ok { background: var(--verde-clara); color: #b8e6c4; border-color: rgba(120, 200, 140, .35); }
.tema-base .aviso-flash.erro { background: var(--vermelho-clara); color: #f2b8b8; border-color: rgba(220, 80, 80, .35); }
.tema-base .aviso-flash.aviso { background: var(--ambar-clara); color: var(--ambar); border-color: rgba(230, 195, 106, .35); }

/* ---------- Botoes ---------- */
.tema-base .btn { border-radius: 8px; font-weight: 600; background: var(--branco); color: var(--tinta); border: 1px solid var(--linha-forte); }
.tema-base .btn.primario { background: var(--quadra); color: #192315; border-color: var(--quadra); }
.tema-base .btn.primario:hover { background: var(--quadra-esc); border-color: var(--quadra-esc); }
.tema-base .btn.sec { background: transparent; color: var(--tinta); border: 1px solid var(--linha-forte); }
.tema-base .btn.sec:hover { border-color: var(--quadra); color: var(--quadra); }
.tema-base .btn.perigo-sec { background: transparent; color: var(--vermelho); border: 1px solid rgba(220, 80, 80, .5); }
.tema-base .btn.chuva-btn { background: var(--chuva); color: #fff; border-color: var(--chuva); }
.tema-base .mini { border-radius: 8px; background: transparent; border: 1px solid var(--linha-forte); color: var(--tinta); font-weight: 500; }
.tema-base .mini:hover { border-color: var(--quadra); color: var(--quadra); }
.tema-base .mini.ok { background: var(--quadra); border-color: var(--quadra); color: #192315; font-weight: 600; }
.tema-base .mini.perigo { color: var(--vermelho); border-color: rgba(220, 80, 80, .5); }
.tema-base button.link { color: var(--quadra); }
.tema-base .acoes.sticky { background: var(--papel); }

/* ---------- Formularios ---------- */
.tema-base input, .tema-base select, .tema-base textarea { background: var(--campo); color: var(--tinta); border: 1px solid var(--linha-forte); border-radius: 8px; }
.tema-base input:focus, .tema-base select:focus, .tema-base textarea:focus { outline: none; border-color: var(--quadra); }
.tema-base input[type="checkbox"], .tema-base input[type="radio"] { accent-color: var(--quadra); }
.tema-base .ficha span { background: transparent; border: 1px solid var(--linha-forte); font-weight: 500; }
.tema-base .ficha input:checked + span { background: var(--quadra); border-color: var(--quadra); color: #192315; font-weight: 600; }
.tema-base .filtros a { background: transparent; border: 1px solid var(--linha-forte); color: var(--tinta); font-weight: 500; }
.tema-base .filtros a[aria-current="true"] { background: var(--quadra); border-color: var(--quadra); color: #192315; font-weight: 600; }

/* ---------- Cards e listas ---------- */
.tema-base .painel, .tema-base .numero, .tema-base .reserva, .tema-base .horario, .tema-base .linha-marcar, .tema-base .tabela, .tema-base .vazio { border-radius: 12px; border-color: var(--linha); }
.tema-base .painel.destaque { background: var(--quadra-clara); border-color: rgba(153, 204, 102, .4); }
.tema-base .painel.aviso, .tema-base .pedido { background: var(--ambar-clara); border-color: rgba(230, 195, 106, .35); }
.tema-base .pedido { border-radius: 12px; }
.tema-base .alunos-dia { border-color: var(--linha); border-left-color: var(--linha-forte); }
.tema-base .alunos-dia li, .tema-base .lista-simples li, .tema-base .lista-alunos li { border-bottom-color: var(--linha); }
.tema-base .obs { background: var(--ambar-clara); color: var(--ambar); }
.tema-base .resumo { color: #b8e6c4; }
.tema-base h2.dia { border-bottom: 1px solid var(--linha-forte); font-weight: 500; }
.tema-base h2.dia small { color: var(--quadra); }
.tema-base .horario-mod { font-weight: 600; }
.tema-base .horario-hora strong, .tema-base .detalhe-hora strong { font-weight: 500; }
.tema-base .linha-marcar:has(input:checked) { border-color: var(--chuva); background: var(--chuva-clara); }
.tema-base .tabela th { background: rgba(255, 255, 255, .04); font-weight: 500; }
.tema-base .corpo-email { background: var(--papel); }
.tema-base .bola.cheia { background: var(--bola); border-color: var(--bola-borda); }

/* ---------- Etiquetas ---------- */
.tema-base .etq { background: rgba(255, 255, 255, .08); color: var(--tinta-2); font-weight: 600; }
.tema-base .etq.ok { background: var(--verde-clara); color: #b8e6c4; }
.tema-base .etq.aviso { background: var(--ambar-clara); color: var(--ambar); }
.tema-base .etq.perigo { background: var(--vermelho-clara); color: #f2b8b8; }
.tema-base .etq.info { background: var(--quadra-clara); color: #c3e5a0; }
.tema-base .etq.neutra { background: rgba(255, 255, 255, .06); color: var(--mudo); }
.tema-base .etq.chuva { background: var(--chuva-clara); color: #b9cddd; }
.tema-base .etq.tipo-feminino { background: rgba(222, 140, 200, .16); color: #f0b6e0; }
.tema-base .etq.tipo-masculino { background: rgba(110, 160, 220, .16); color: #b4d0f2; }
.tema-base .etq.tipo-misto { background: var(--quadra-clara); color: #c3e5a0; }
.tema-base .etq.tipo-indefinido { background: transparent; color: var(--mudo); border: 1px dashed var(--linha-forte); }
.tema-base .contador { background: var(--ambar-clara); color: var(--ambar); }
.tema-base .selo { background: #d9534f; color: #fff; }

/* ---------- Topo "quadra" (cabecalho de destaque) ---------- */
.tema-base .quadra-topo { background: var(--branco); color: var(--tinta); border: 1px solid var(--linha); border-radius: 12px; }
.tema-base .quadra-linhas g { stroke: var(--quadra); }

/* ---------- Barra de abas (celular) ---------- */
.tema-base .abas { background: var(--lateral); border-top: 1px solid var(--linha); }
.tema-base .abas a { color: var(--mudo); font-weight: 500; }
.tema-base .abas a[aria-current="page"] { color: var(--quadra); }
.tema-base .abas a[aria-current="page"]::before { background: var(--quadra); }
.tema-base .abas-marca, .tema-base .abas-rodape { display: none; }

/* ---------- Professor no computador: menu lateral, como no painel base ---------- */
@media (min-width: 761px) {
  body.tema-base.area-professor { padding-left: 254px; }
  .tema-base.area-professor .abas {
    position: fixed; display: flex; flex-direction: column; gap: 4px;
    top: 0; bottom: 0; left: 0; right: auto; width: 254px;
    padding: 24px 16px; overflow-y: auto; background: var(--lateral);
    border-top: 0; border-right: 1px solid var(--linha);
  }
  .tema-base.area-professor .abas-marca { display: flex; align-items: center; gap: 8px; margin: 0 0 28px; color: var(--tinta); font-weight: 600; font-size: 1.1rem; text-decoration: none; min-height: 0; }
  .tema-base.area-professor .abas-marca svg { width: 28px; height: 28px; fill: initial; stroke: initial; stroke-width: initial; }
  .tema-base.area-professor .abas a:not(.abas-marca) {
    flex-direction: row; justify-content: flex-start; gap: 10px;
    min-height: 44px; padding: 10px 12px; border-radius: 8px;
    font-size: .98rem; position: relative;
  }
  .tema-base.area-professor .abas a:not(.abas-marca) svg { width: 19px; height: 19px; }
  .tema-base.area-professor .abas a:not(.abas-marca):hover { color: var(--tinta); background: rgba(255, 255, 255, .04); }
  .tema-base.area-professor .abas a[aria-current="page"]:not(.abas-marca) { background: var(--quadra); color: #192315; font-weight: 600; }
  .tema-base.area-professor .abas a[aria-current="page"]::before { display: none; }
  .tema-base.area-professor .selo { position: static; margin-left: auto; }
  .tema-base.area-professor .abas-rodape { display: flex; flex-direction: column; gap: 14px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--linha); }
  .tema-base.area-professor .abas-usuario { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .tema-base.area-professor .avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--quadra); color: #192315; font-weight: 600; }
  .tema-base.area-professor .abas-usuario p { margin: 0; font-size: .9rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tema-base.area-professor .abas-usuario span { font-size: .78rem; color: var(--mudo); }
  .tema-base.area-professor .abas-usuario > div { min-width: 0; flex: 1; }
  .tema-base.area-professor .abas-usuario form { margin: 0; }
  .tema-base.area-professor .abas-sair { background: none; border: 0; color: var(--mudo); cursor: pointer; padding: 8px; border-radius: 8px; display: grid; place-items: center; }
  .tema-base.area-professor .abas-sair:hover { color: var(--quadra); }
  .tema-base.area-professor .abas-sair svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .tema-base.area-professor .abas-dev { display: flex; flex-direction: column; gap: 4px; font-size: .72rem; color: var(--mudo); }
  .tema-base.area-professor .abas-dev img { height: 18px; width: auto; align-self: flex-start; object-fit: contain; flex: none; }

  .tema-base.area-professor .topo-in { max-width: none; min-height: 78px; padding: 0 48px; }
  .tema-base.area-professor .topo .marca, .tema-base.area-professor .topo .topo-nav { display: none; }
  .tema-base.area-professor .topo-trilha { display: block; margin: 0; font-size: .9rem; color: var(--mudo); }
  .tema-base.area-professor .topo-trilha strong { color: var(--tinta); font-weight: 500; }
  .tema-base.area-professor .miolo { margin: 0; padding: 32px 48px 48px; }
  .tema-base.area-professor .miolo.estreita { max-width: 820px; }
  .tema-base.area-professor .acoes.sticky { bottom: 0; }
}

/* ---------- Aluno logado: barra do topo, sem menu lateral ---------- */
.tema-base.area-aluno .topo-trilha { display: none; }
.tema-base.area-aluno .miolo { padding-top: 24px; }

/* Tablet em pe (720 a 760px): o app.css esconderia a barra de abas e o menu lateral ainda nao existe; mantem a barra de baixo. */
@media (min-width: 720px) and (max-width: 760px) {
  .tema-base.area-professor .abas { position: fixed; display: grid; }
  .tema-base.area-professor .miolo { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* ---------- Dinamico: fichas, quantidade, sugestoes, avisos ---------- */
.tema-base .passo { background: var(--campo); border-color: var(--linha-forte); border-radius: 8px; }
.tema-base .passo button { color: var(--quadra); }
.tema-base .passo button:active { background: var(--quadra-clara); }
.tema-base .sugestao { background: var(--campo); border-color: var(--linha-forte); border-radius: 8px; }
.tema-base .sugestao:hover, .tema-base .sugestao:active { border-color: var(--quadra); }
.tema-base .ficha-aluno { background: var(--branco); border-color: var(--linha); }
.tema-base .toast { background: #20262b; color: var(--tinta); border: 1px solid var(--linha); border-left: 5px solid var(--quadra); }
.tema-base .toast.erro { border-left-color: #e0645c; }
.tema-base .toast.aviso { border-left-color: var(--ambar); }
.tema-base .progresso { background: var(--quadra); }
@media (min-width: 761px) { .tema-base.area-professor .toasts { left: 278px; } }


/* ---------- Dashboard: cabecalho de pagina, estatisticas, listas clicaveis (padrao do painel base) ---------- */
.tema-base .cab { margin: 4px 0 20px; }
.tema-base .cab .olho { margin: 0 0 6px; font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--quadra); font-weight: 600; }
.tema-base .cab h1 { font-size: clamp(1.625rem, 3vw, 2.125rem); margin: 0 0 4px; }
.tema-base .cab p { margin: 0; color: var(--tinta-2); }
.tema-base .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0 0 20px; }
.tema-base .stat { background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; padding: 16px 18px; min-width: 0; }
.tema-base .stat b { display: block; font-size: 2rem; font-weight: 500; line-height: 1.05; }
.tema-base .stat span { display: block; margin-top: 4px; font-size: .85rem; color: var(--tinta-2); }
.tema-base .stat.alerta b { color: var(--ambar); }
.tema-base .stat.ok b { color: var(--quadra); }
.tema-base .cartao { background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; padding: 20px; margin: 0 0 16px; }
.tema-base .cartao > h2:first-child { margin-top: 0; font-size: 1.05rem; }
.tema-base .duas { display: grid; gap: 16px; }
.tema-base .item { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--linha); color: var(--tinta); text-decoration: none; }
.tema-base .item:last-child { border-bottom: 0; }
.tema-base .item .seta { margin-left: auto; color: var(--mudo); }
@media (min-width: 761px) {
  .tema-base .stats { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .tema-base .duas { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
}
.tema-base .abas-grupo, .tema-base .abas-so-desktop { display: none; }
@media (min-width: 761px) {
  .tema-base .abas-grupo { display: block; margin: 18px 12px 6px; font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mudo); }
  .tema-base.area-professor .abas a.abas-so-desktop { display: flex; }
}
/* pill de status com ponto, como no painel base */
.tema-base .etq.ok::before, .tema-base .etq.aviso::before, .tema-base .etq.perigo::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: middle; }
.tema-base .etq { border-radius: 99px; }
@media (max-width: 760px) { .tema-base.area-professor .abas a[data-mobile-ativo] { color: var(--quadra); } }
.tema-base .duas:has(> :only-child) { grid-template-columns: 1fr; }

/* Telas de fora do painel (entrar, cadastro, agenda publica, instalacao): mesmo visual, coluna estreita e centrada */
.tema-base .topo-in { max-width: 1040px; }
.tema-base .miolo.estreita { max-width: 520px; }
.tema-base.area-publico .miolo, .tema-base.area-aluno .miolo, .tema-base.area-admin .miolo { padding-top: 28px; }
.tema-base .form, .tema-base form.form { max-width: 100%; }
.tema-base h1 { font-size: clamp(1.625rem, 3vw, 2.125rem); }
.tema-base .campo > label, .tema-base .campo legend { display: block; margin-bottom: 6px; }
.tema-base input::placeholder, .tema-base textarea::placeholder { color: var(--mudo); opacity: .8; }
.tema-base .opcao { display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 0; }
.tema-base .opcao input { margin: 0; flex: none; width: 22px; height: 22px; }

/* Chuva: um bloco por dia, com atalho para marcar tudo */
.tema-base .chuva-dia { border: 1px solid var(--linha); border-radius: 12px; background: var(--branco); padding: 12px 14px; margin: 0 0 14px; min-width: 0; }
.tema-base .chuva-dia-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.tema-base .chuva-dia-topo h3 { margin: 0; border: 0; padding: 0; }
.tema-base .chuva-dia-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tema-base .chuva-dia-acoes .btn { flex: 1 1 200px; }
.tema-base .lista-alunos .etq, .tema-base .alunos-dia .etq { white-space: normal; text-align: left; }

/* Busca de alunos e ofertas */
.tema-base .sg-texto { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.tema-base .sg-caract { color: var(--mudo); font-size: .82rem; }
.tema-base [data-filtros-busca], .tema-base [data-filtros-lista] .fichas { margin-bottom: 8px; }
.tema-base .oferta-saida { margin-top: 12px; }
.tema-base .oferta-saida .acoes { margin-top: 12px; }

/* Etiquetas que se editam ali mesmo */
.tema-base .etq.editavel { cursor: pointer; font: inherit; font-size: .82rem; font-weight: 600; border: 1px dashed var(--linha-forte); display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 12px; }
.tema-base .etq.editavel:hover, .tema-base .etq.editavel.aberto { border-color: var(--quadra); border-style: solid; }
.tema-base .etq.editavel .lapis { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.tema-base .edita-painel { background: var(--branco); border: 1px solid var(--quadra); border-radius: 12px; padding: 14px; margin: 10px 0; }
.tema-base .edita-painel[hidden] { display: none; }
.tema-base .edita-painel .campo { margin-bottom: 10px; }
.tema-base .sg-semana { font-size: .8rem; }
.tema-base .sg-semana.sg-perigo { color: #f2b8b8; }
.tema-base .sg-semana.sg-aviso { color: var(--ambar); }
.tema-base .sg-semana.sg-neutra, .tema-base .sg-semana.sg-info { color: var(--mudo); }
.tema-base .oferta-resumo { margin: 10px 0 6px; color: var(--tinta-2); font-size: .92rem; }
.tema-base .etq.info { white-space: normal; }

/* Busca com filtros escondidos, um grupo por linha */
.tema-base .busca-linha { display: flex; gap: 8px; align-items: stretch; margin: 0 0 10px; }
.tema-base .busca-linha input { flex: 1 1 auto; min-width: 0; }
.tema-base .busca-linha .btn { flex: none; min-height: 48px; padding: 0 16px; }
.tema-base .busca-linha .btn.ativo { border-color: var(--quadra); color: var(--quadra); }
.tema-base .filtros-painel { background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; padding: 12px 14px; margin: 0 0 12px; display: grid; gap: 12px; }
.tema-base .filtros-painel[hidden] { display: none; }
.tema-base .filtro-linha { display: grid; gap: 6px; }
.tema-base .filtro-rotulo { font-size: .8rem; font-weight: 600; color: var(--mudo); }
.tema-base .filtro-rotulo::after { content: ":"; }
.tema-base .filtros-painel .mini { justify-self: start; }

/* Horarios fixos: alunos fixos */
.fixos{margin-top:12px;padding-top:12px;border-top:1px solid var(--border,#3b4245)}
.ficha-fixo{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0}
.linha-botoes{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.linha-botoes select{flex:1;min-width:0}

/* Acao principal do horario: Incluir aluno */
.tema-base .acao-principal { padding: 0; background: transparent; border: 0; }
.tema-base .acao-principal > summary {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 12px 16px; cursor: pointer; list-style: none;
  background: var(--quadra); color: #192315; border-radius: 12px; font-weight: 700; font-size: 1.05rem;
}
.tema-base .acao-principal > summary::-webkit-details-marker { display: none; }
.tema-base .acao-principal > summary svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; flex: none; }
.tema-base .acao-principal[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.tema-base .acao-principal > :not(summary) { margin-left: 0; margin-right: 0; }
.tema-base .acao-principal[open] { background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; }
.tema-base .acao-principal[open] > :not(summary) { margin-left: 14px; margin-right: 14px; }
.tema-base .acao-principal[open] > form { margin-bottom: 14px; }

/* "Cadastrar aluno novo": parece botao, nao texto solto */
.tema-base details.aluno-novo { margin: 10px 0 0; border: 1.5px dashed var(--linha-forte); border-radius: 10px; padding: 0 12px 12px; }
.tema-base details.aluno-novo > summary { display: flex; align-items: center; gap: 8px; min-height: 48px; cursor: pointer; font-weight: 600; color: var(--quadra); list-style: none; }
.tema-base details.aluno-novo > summary::-webkit-details-marker { display: none; }
.tema-base details.aluno-novo > summary svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tema-base details.aluno-novo[open] { border-style: solid; }

/* Financeiro */
.tema-base .tabela-precos { display: grid; gap: 8px; margin: 8px 0 14px; }
.tema-base .preco-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tema-base .preco-campo { display: flex; align-items: center; gap: 6px; width: 150px; flex: none; }
.tema-base .preco-campo b { font-weight: 600; }
.tema-base .preco-campo input { text-align: right; }
.tema-base .aula-fechar { padding: 12px 0; border-top: 1px solid var(--linha); }
.tema-base .aula-fechar:first-of-type { border-top: 0; }
.tema-base .aula-total { margin: 8px 0; font-weight: 600; color: var(--quadra); }
.tema-base .tabela-valores li.atual { font-weight: 700; color: var(--quadra); }
.tema-base .stats.quatro { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 761px) { .tema-base .stats.quatro { grid-template-columns: repeat(4, 1fr); } }
.tema-base .stat b { white-space: nowrap; font-size: clamp(1.3rem, 6vw, 2rem); }
.tema-base a.stat, .tema-base a.stat * { text-decoration: none; }

/* Menu lateral (gaveta) do celular */
.tema-base .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; margin-right: -8px; flex: none; background: transparent; border: 0; color: var(--tinta); border-radius: 10px; cursor: pointer; }
.tema-base .menu-btn svg, .tema-base .gaveta-x svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tema-base .topo-in:has(.menu-btn) { justify-content: flex-start; }
.tema-base.area-professor .topo-in:has(.menu-btn) .topo-nav { display: none; }
.tema-base .gaveta-fundo { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 60; }
.tema-base .gaveta {
  position: fixed; top: 0; bottom: 0; right: 0; width: min(84vw, 320px); z-index: 70; overflow-y: auto;
  background: var(--lateral); color: var(--tinta); border-left: 1px solid var(--linha);
  padding: calc(14px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom));
  transform: translateX(102%); transition: transform .22s ease; visibility: hidden; display: flex; flex-direction: column; gap: 2px;
}
.tema-base.gaveta-aberta .gaveta { transform: none; visibility: visible; }
.tema-base.gaveta-aberta { overflow: hidden; }
.tema-base .gaveta-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; font-weight: 600; font-size: 1.1rem; }
.tema-base .gaveta-topo > svg, .tema-base .gaveta-topo .bola-logo { flex: none; }
.tema-base .gaveta-x { background: none; border: 0; color: var(--tinta); width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; margin-left: auto; }
.tema-base .gaveta-grupo { display: block !important; margin: 14px 0 4px; }
.tema-base .gaveta a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 12px; border-radius: 10px; color: var(--tinta-2); text-decoration: none; font-weight: 500; position: relative; }
.tema-base .gaveta a svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tema-base .gaveta a[aria-current="page"] { background: var(--quadra); color: #192315; font-weight: 700; }
.tema-base .gaveta .selo { position: static; margin-left: auto; }
.tema-base .gaveta-rodape { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--linha); display: grid; gap: 12px; }
.tema-base .gaveta-rodape p { margin: 0; display: flex; flex-direction: column; }
.tema-base .gaveta-rodape span { font-size: .8rem; color: var(--mudo); }
@media (min-width: 761px) {
  .tema-base .menu-btn, .tema-base .gaveta, .tema-base .gaveta-fundo { display: none !important; }
}

/* Ranking de alunos */
.tema-base .ranking .filtros { margin: 10px 0; }
.tema-base .rank-lista { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.tema-base .rank-lista li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--linha); border-radius: 10px; min-width: 0; }
.tema-base .rank-pos { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; background: var(--linha); color: var(--tinta); }
.tema-base .rank-lista li:nth-child(1) .rank-pos { background: #D1E944; color: #183F32; }
.tema-base .rank-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tema-base .rank-lista strong { flex: none; white-space: nowrap; }

/* Aluno: card resumido com seta */
.tema-base .aluno-card > summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; min-height: 44px; }
.tema-base .aluno-card > summary::-webkit-details-marker { display: none; }
.tema-base .aluno-resumo { flex: 1; min-width: 0; display: grid; gap: 2px; }
.tema-base .aluno-resumo strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tema-base .aluno-resumo .mudo { font-size: .85rem; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.tema-base .aluno-card .seta { flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.tema-base .aluno-card[open] .seta { transform: rotate(180deg); }
.tema-base .aluno-corpo { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linha); display: grid; gap: 10px; }
.tema-base .aluno-corpo .linha-espaco p { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.tema-base .conf-aulas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tema-base .conf-aulas li { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--linha); }
.tema-base .conf-acoes { display: flex; gap: 8px; margin: 0; }
.tema-base .conf-acoes .mini { min-height: 40px; padding: 0 14px; }

/* Icone do WhatsApp (mascara recolorivel) + botoes de WhatsApp em saibro */
.ico-wa { display: inline-block; width: 1.15em; height: 1.15em; margin-right: .4em; vertical-align: -.2em; background: currentColor; -webkit-mask: url("../img/whatsapp.png") center / contain no-repeat; mask: url("../img/whatsapp.png") center / contain no-repeat; flex: none; }
.tema-base a:is(.mini, .btn):has(> .ico-wa) { display: inline-flex; align-items: center; justify-content: center; }

/* Tela inicial: titulo solto + duas entradas em linha, no mesmo estilo dos cartoes do painel */
.home-titulo { text-align: center; margin: 28px 0 6px; font-size: clamp(1.5rem, 6vw, 2rem); line-height: 1.15; }
.home-sub { text-align: center; margin: 0 0 22px; font-size: .95rem; opacity: .85; }
.entradas { display: grid; gap: 10px; }
.entrada { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; text-decoration: none; background: #F4EADF; color: #183F32; border: 1px solid #C8B79F; }
.entrada-ico { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #A95135; }
.entrada-ico svg { width: 22px; height: 22px; fill: none; stroke: #FFF7EA; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.entrada-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.entrada-txt strong { font-family: var(--fonte-titulo, inherit); font-size: 1.1rem; line-height: 1.2; }
.entrada-txt small { font-size: .84rem; color: #5E6F64; line-height: 1.3; }
.entrada-seta { flex: none; width: 18px; height: 18px; fill: none; stroke: #5E6F64; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.entrada:hover, .entrada:focus-visible { background: #FFF7EA; }
@media (min-width: 720px) { .entradas { max-width: 460px; margin: 0 auto; } }

.rodape-dev { margin: 40px 0 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: .8rem; opacity: .9; }
.rodape-dev img { max-height: 44px; max-width: 60%; height: auto; width: auto; }

/* Local do horario: informacao de apoio, abaixo da reserva, sem destaque */
.local-discreto { margin: 22px 4px 8px; padding-top: 12px; border-top: 1px solid rgba(255, 247, 234, .25); font-size: .82rem; line-height: 1.4; }
.local-discreto p { margin: 0 0 2px; }
.local-discreto .local-nome { font-weight: 600; opacity: .9; }
.local-discreto .local-end { opacity: .75; }
.local-discreto a { color: inherit; text-decoration: underline; }

.horario-prof { font-weight: 600; font-size: .9rem; margin: 2px 0 0; }

/* ---------- Celular: marca encolhe para so o simbolo depois de alguns segundos ---------- */
@media (max-width: 760px) {
  .topo .marca-nome { display: inline-block; overflow: hidden; max-width: 240px; white-space: nowrap; animation: marca-recolher .6s ease 3.5s forwards; }
  .topo .marca { gap: 10px; }
}
@keyframes marca-recolher { to { max-width: 0; opacity: 0; margin-left: -10px; } }
@media (prefers-reduced-motion: reduce) { .topo .marca-nome { animation-duration: .01s; } }

/* ---------- Aluno no celular: menu de ícones embaixo, como o do professor ---------- */
.abas-aluno { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 719px) {
  .tema-base.com-abas-aluno .topo-nav a { display: none; } /* so o Sair fica no topo; o resto esta nas abas de baixo */
  .tema-base.com-abas-aluno .topo-in { justify-content: space-between; }
  .tema-base.com-abas-aluno .miolo { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}
@media (min-width: 720px) { .abas-aluno { display: none; } }

/* Chuva: aviso em destaque na pagina do horario */
.aviso-chuva { margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; background: #FFF1C9; color: #5A3B00; border: 1px solid #E3BE62; font-size: .92rem; line-height: 1.4; }
.tema-t2c .painel .aviso-chuva { margin-top: 0; }
.detalhe .vagas.grande { margin-bottom: 16px; }

/* Aprovar pedido: botoes empilhados com respiro; com tipo a definir, Recusar vai para baixo */
.acoes.dupla form { display: flex; flex-direction: column; gap: 8px; }
.acoes.dupla.com-tipo { grid-template-columns: 1fr; }
.acoes.dupla .dica { margin: 0; }
.aviso-nivel { margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; background: #F6DDD2; color: #6B2A16; border: 1px solid #D9A58E; font-size: .92rem; line-height: 1.4; }

/* Termos e Privacidade: modal e texto */
.modal-legal { width: min(640px, calc(100vw - 24px)); max-height: 86vh; padding: 0; border: 0; border-radius: 14px; background: var(--branco, #F4EADF); color: var(--tinta, #183F32); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.modal-legal::backdrop { background: rgba(10, 20, 15, .6); }
.modal-legal-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--linha, #DCCDB8); position: sticky; top: 0; background: inherit; }
.modal-legal-corpo { padding: 12px 18px 22px; overflow-y: auto; max-height: calc(86vh - 56px); }
.legal-corpo h2 { font-size: 1.3rem; margin: .2em 0 .6em; }
.legal-corpo h3 { font-size: 1.02rem; margin: 1.2em 0 .3em; }
.legal-corpo p, .legal-corpo li { line-height: 1.55; }
.legal-corpo ul { padding-left: 1.2em; }
.legal-versao { font-size: .85rem; }
.legal-rodape { text-align: center; font-size: .85rem; margin: 18px 0 6px; }
.legal-lista li { padding: 6px 0; }
.entrada-aluno .form .dica { margin-bottom: 12px; }

.avisos-lista .enviado { opacity: .6; }
.presenca-pedido { margin: 8px 0; }
.presenca-pedido .acoes { margin-top: 8px; }

/* Selecao em lote de horarios */
.lote-item { position: relative; }
.modo-lote .lote-item { padding-left: 38px; }
.modo-lote .lote-item a { pointer-events: none; }
.lote-check { position: absolute; left: 4px; top: 0; bottom: 0; display: flex; align-items: center; }
.lote-check[hidden], .lote-so[hidden], .lote-barra[hidden] { display: none; }
.lote-check input { width: 24px; height: 24px; }
.lote-so { margin-left: 8px; }
.lote-item.painel { position: relative; }
.modo-lote > .lote-item.painel { padding-left: 44px; }
.modo-lote > .lote-item .fixos { pointer-events: none; opacity: .6; }
.caixa-desfazer { background: #fff7d6; border: 1px solid #e0c85a; border-radius: 12px; padding: 10px 12px; margin: 0 0 12px; color: #4a3d00; gap: 10px; align-items: center; }
/* Selecao de alunos: etiqueta curta e motivo em linha propria */
.sugestao .etq { flex: 0 0 auto; white-space: nowrap; }
.sugestao .sg-texto { min-width: 0; flex: 1 1 auto; }
.sg-motivo { display: block; color: #8a5a00; font-size: .78rem; line-height: 1.25; margin-top: 2px; white-space: normal; }
/* Janela de cadastro (dialog) */
.dialogo { width: min(92vw, 520px); max-height: 90vh; overflow: auto; border: 0; border-radius: 16px; padding: 16px; background: #FFF7EA; color: #2b2118; box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.dialogo::backdrop { background: rgba(0,0,0,.55); }
.aluno-novo-destaque { outline: 3px solid #D1E944; outline-offset: 2px; }

/* Foto e apresentacao do professor */
.avatar-prof{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;object-fit:cover;flex:none;background:var(--cor-primaria,#24533D);color:#fff;font-weight:700}
.avatar-prof.sem{font-size:1.2rem}
.quadra-texto .avatar-prof{margin-bottom:.4rem;border:2px solid #fff}
.ver-mais{margin-top:.5rem}
.ver-mais summary{cursor:pointer;font-weight:600}
.ver-mais .foto-grande{display:block;width:min(100%,240px);border-radius:12px;margin:.6rem 0}
.linha-espaco .grow{flex:1;min-width:0}

/* Assinatura "Desenvolvido por" no menu lateral do celular: texto e logo centralizados */
.tema-base .gaveta-rodape .abas-dev { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: .72rem; color: var(--mudo); text-align: center; padding-top: 4px; }
.tema-base .gaveta-rodape .abas-dev span { display: block; font-size: .72rem; }
.tema-base .gaveta-rodape .abas-dev img { display: block; height: 18px; width: auto; max-width: 100%; margin: 0 auto; object-fit: contain; }
.rodape-dev img { height: 30px; max-height: 44px; width: auto; }

.dev-link{display:block;line-height:0;max-width:100%}
.abas-dev .dev-link{align-self:flex-start}
.gaveta-rodape .dev-link{align-self:center}
.rodape-dev .dev-link{display:flex;justify-content:center}

.tema-base .dev-link{flex:none;width:max-content;max-width:none}
.tema-base .dev-link img{max-width:none !important;width:auto !important;object-fit:contain}