/* =========================================================
   CLICK&SKI — folha de estilo do aplicativo
   =========================================================

   Como está organizada:

   1.  Tokens          variáveis de cor e tipografia
   2.  Base            reset e corpo do documento
   3.  Estrutura       aparelho, telas, barras de topo e de abas
   4.  Tipografia      títulos, olho, legendas
   5.  Formulários     fichas, campos, contadores, seletores
   6.  Níveis          cores das pistas francesas
   7.  Cartões         professores, pedidos, orçamentos, aulas
   8.  Valores         euro, real, repartição da comissão
   9.  Marca           logo e retratos
   10. Modo app        tela cheia e áreas seguras do aparelho

   Convenção de nomes: em português, descrevendo a função e não
   a aparência. `.pista` continua fazendo sentido se a cor mudar;
   `.verde` não.

   Todas as cores saem das variáveis do bloco :root. Trocar a
   identidade visual é trocar aquelas linhas, não caçar valores
   espalhados pelo arquivo.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@100..125,500..800&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --noite:#06090F;
  --grafite:#1B2733;
  --neve:#EDF2F7;
  --branco:#FFFFFF;
  --gelo:#78899B;
  --linha:#DFE7EE;
  --glacial:#0E7C86;
  --verde:#1E9E57;
  --azul:#2A6FD6;
  --vermelho:#D6382F;
  --preto:#06090F;
  --display:'Archivo',system-ui,sans-serif;
  --corpo:'Public Sans',system-ui,sans-serif;
  --dados:'IBM Plex Mono',ui-monospace,monospace;
  --logo:url(data:image/png;base64,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);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

body{
  font-family:var(--corpo);
  background:
    radial-gradient(1200px 600px at 50% -10%, #DCE8F2 0%, #C9D8E6 45%, #B6C8DA 100%);
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;
  padding:28px 16px 56px;
  color:var(--noite);
}

/* ═══════════════ ESTRUTURA ═══════════════ */

/* ---------- aparelho ---------- */
/* A moldura de computador. Os três valores abaixo — altura, arredondado
   e recheio — vinham de uma segunda definição perdida no meio da seção
   das abas, que sobrescrevia esta. Os 800px, 46px e 10px que estavam
   escritos aqui nunca chegaram à tela. Em modo aplicativo tudo isto é
   substituído por tela cheia, mais abaixo. */
.aparelho{
  width:390px;max-width:100%;height:760px;
  background:var(--noite);border-radius:38px;padding:7px;
  box-shadow:0 40px 70px -30px rgba(6,9,15,.55), 0 0 0 1px rgba(255,255,255,.25) inset;
  position:relative;
}
/* 32px e não 37px, pelo mesmo motivo da moldura acima. */
.vidro{
  width:100%;height:100%;background:var(--neve);
  border-radius:32px;overflow:hidden;position:relative;
  display:flex;flex-direction:column;
}

/* ---------- telas ---------- */
.tela{display:none;flex:1;overflow-y:auto;padding-bottom:84px;scrollbar-width:none}
.tela::-webkit-scrollbar{display:none}
.tela[data-on="1"]{display:block}
.barra-topo{
  position:sticky;top:0;z-index:40;background:rgba(237,242,247,.92);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--linha);
  padding:38px 20px 12px;display:flex;align-items:center;gap:12px;
}
/* .marca/.marca-grande saíram daqui (11/9/2026): eram o título de
   "Orçamentos"/"Minhas aulas"/"Perfil", que passaram a usar
   .titulo-barra — mesmo topo do lado do professor, pedido de
   Gabrielle. Sem mais ninguém usando as duas classes, ficaram para
   trás. */
.barra-topo .direita{margin-left:auto;display:flex;align-items:center;gap:8px}
.menu-idioma{position:relative}
.chip-idioma{
  cursor:pointer;font-family:var(--dados);
  font-family:var(--dados);font-size:10px;font-weight:600;
  border:1px solid var(--linha);background:#fff;border-radius:6px;padding:4px 7px;
}
.avatar-topo{
  width:30px;height:30px;border-radius:50%;background:var(--grafite);color:#fff;
  display:grid;place-items:center;font-size:11px;font-weight:700;
}
.voltar{
  width:32px;height:32px;border-radius:50%;border:1px solid var(--linha);
  background:#fff;display:grid;place-items:center;cursor:pointer;flex-shrink:0;
}
/* A seta está no centro MATEMÁTICO do círculo — o desenho vai de x=9 a
   x=15 num viewBox de 0 a 24 — e mesmo assim parecia empurrada para a
   direita. Não era defeito de medida: um chevron tem a ponta fina de um
   lado e as duas hastes abertas do outro, e o olho pesa a área aberta.
   O centroide da forma cai perto de x=13, e não de 12.

   1px para a esquerda resolve. É o mesmo ajuste que todo botão de
   "play" leva para a direita dentro de um círculo, e pela mesma razão.
   Mexer no `d` do path faria o desenho mentir sobre onde está; o
   deslocamento fica aqui, onde se lê o porquê. */
.voltar svg{transform:translateX(-1px)}
.titulo-barra{font-family:var(--display);font-variation-settings:'wdth' 112,'wght' 700;font-size:15px;line-height:1.15}
.sub-barra{font-family:var(--dados);font-size:10px;color:var(--gelo);margin-top:2px}
/* O código do pedido, logo abaixo de quem pediu. Mais apagado que o
   nome de propósito: é o que se cita ao falar com a Click&Ski ou com o
   cliente, não o que se lê primeiro. Vazio, não ocupa altura nenhuma —
   pedido sem protocolo não deixa um buraco no cabeçalho. */
#resp-protocolo{letter-spacing:.04em;opacity:.75;margin-top:1px}
#resp-protocolo:empty{display:none}
.bloco{padding:20px}
.olho{
  font-family:var(--dados);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--glacial);font-weight:600;
}
h1.titulo{
  font-family:var(--display);font-variation-settings:'wdth' 108,'wght' 800;
  font-size:29px;line-height:1.05;letter-spacing:-.015em;margin-top:8px;
}
h2.secao{
  font-family:var(--display);font-variation-settings:'wdth' 112,'wght' 700;
  font-size:16px;letter-spacing:-.01em;
}
.legenda{font-size:13px;color:#4B5B69;line-height:1.5;margin-top:8px}

/* ---------- abas ---------- */
.abas{
  position:absolute;left:0;right:0;bottom:0;z-index:50;
  background:rgba(255,255,255,.94);backdrop-filter:blur(14px);
  border-top:1px solid var(--linha);display:flex;padding:9px 4px 18px;
}
.aba{
  flex:1;background:none;border:0;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;gap:4px;color:#93A3B2;font-family:var(--dados);font-size:9px;letter-spacing:.03em;
}
.aba[data-on="1"]{color:var(--noite)}
.aba svg{width:20px;height:20px}

/* ═══════════════ ENTRADA ═══════════════ */

/* ---------- entrada e escolha de conta ---------- */
#entrar{background:var(--noite);padding:78px 24px 40px}
#entrar .logo{height:27px;width:126px;margin:0 auto}
/* Os dois esportes, logo abaixo do logo. Dizem o que o app é antes de
   qualquer texto, e valem igual nas três línguas — por isso ficam no
   HTML e não no dicionário. aria-hidden: o leitor de tela já anuncia o
   logo e o título em seguida. */
#entrar .esportes{font-size:34px;line-height:1;text-align:center;margin-top:16px}
#entrar h1{
  font-family:var(--display);font-variation-settings:'wdth' 106,'wght' 800;
  font-size:27px;line-height:1.15;color:#fff;text-align:center;
  /* 16px, e não os 32 de antes: a linha dos esportes agora ocupa o
     espaço que este respiro preenchia quando o título vinha direto
     depois do logo. */
  margin-top:16px;letter-spacing:-.02em;text-wrap:balance;
}
#entrar .pergunta{
  font-family:var(--corpo);font-size:15px;font-weight:600;
  color:#9FB0BE;text-align:center;margin-top:20px;line-height:1.4;
}
.papel{
  width:100%;text-align:left;background:rgba(255,255,255,.06);color:#fff;
  border:1px solid rgba(255,255,255,.15);border-radius:16px;
  padding:17px 18px;cursor:pointer;margin-top:11px;
}
.papel b{
  display:block;font-family:var(--display);
  font-variation-settings:'wdth' 110,'wght' 700;font-size:17px;
}
.papel span{display:block;font-size:12.5px;color:#9FB0BE;margin-top:5px;line-height:1.45}
.papel-acoes{display:flex;gap:8px;margin-top:14px}
/* os dois caminhos têm o mesmo peso: nenhum parece já escolhido */
.papel-acoes button{
  flex:1;border-radius:10px;padding:11px;cursor:pointer;
  background:rgba(255,255,255,.08);color:#fff;
  border:1px solid rgba(255,255,255,.24);
  font-family:var(--corpo);font-size:13.5px;font-weight:600;
}
.papel-acoes button:active{background:rgba(255,255,255,.2)}
.miudo{
  /* "TEMPORADA 2026/27 ❄️" no rodapé da entrada — maior, a pedido, e
     única usuária desta classe, então o ajuste não mexe em mais nada.
     margin-bottom abre o respiro antes do CNPJ logo abaixo (.doc-empresa
     nasce com margin-top:0 — os dois ficavam colados). */
  font-family:var(--dados);font-size:13px;color:#6E8090;text-align:center;
  line-height:1.7;margin:26px 0 12px;letter-spacing:.03em;
}
.sair{color:var(--vermelho);border-color:#F2D5D3}

/* ═══════════════ BUSCA ═══════════════ */

/* ---------- ficha de busca ---------- */
.ficha{
  background:var(--branco);border-radius:18px;border:1px solid var(--linha);
  box-shadow:0 18px 34px -26px rgba(6,9,15,.5);overflow:hidden;margin-top:18px;
}
.ficha-linha{padding:14px 16px;border-bottom:1px solid var(--linha)}
.ficha-linha:last-of-type{border-bottom:0}
.rotulo{
  font-family:var(--dados);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gelo);font-weight:500;
}
.campo{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:6px;font-size:15px;font-weight:600;cursor:pointer;
}
.campo small{font-weight:400;color:var(--gelo);font-size:12px;font-family:var(--dados)}
.par{display:flex;gap:8px;margin-top:8px}
.opcao{
  flex:1;border:1px solid var(--linha);background:#fff;border-radius:10px;
  padding:9px;font-family:var(--corpo);font-size:13px;font-weight:600;color:#41525F;
  cursor:pointer;transition:.15s;
}
.opcao[data-on="1"]{background:var(--noite);color:#fff;border-color:var(--noite)}
.opcao[data-fora="1"]{
  opacity:.4;cursor:not-allowed;background:#F7FAFC;
  text-decoration:line-through;text-decoration-thickness:1px;
}
.opcao[data-fora="1"] i{text-decoration:none}
/* níveis = cores de pista francesa */
.pistas{display:flex;gap:6px;margin-top:8px}
.pista{
  flex:1;border:1px solid var(--linha);background:#fff;border-radius:10px;
  padding:9px 4px;cursor:pointer;text-align:center;transition:.15s;
}
.pista .bolinha{width:11px;height:11px;border-radius:50%;margin:0 auto 6px}
.pista b{display:block;font-size:11px;font-weight:700;letter-spacing:-.01em}
.pista i{display:block;font-style:normal;font-family:var(--dados);font-size:8.5px;color:var(--gelo);margin-top:2px}
.pista[data-on="1"]{border-color:var(--noite);box-shadow:0 0 0 1px var(--noite) inset}
.n-verde .bolinha{background:var(--verde)}
.n-azul .bolinha{background:var(--azul)}
.n-vermelho .bolinha{background:var(--vermelho)}
.n-preto .bolinha{background:var(--preto)}
.legenda-pista{
  font-family:var(--dados);font-size:9px;color:var(--gelo);
  margin-top:10px;line-height:1.5;
}
.cta{
  width:100%;background:var(--noite);color:#fff;border:0;border-radius:12px;
  padding:15px;font-family:var(--display);font-variation-settings:'wdth' 110,'wght' 700;
  font-size:15px;cursor:pointer;letter-spacing:.01em;
}
.cta:active{transform:scale(.99)}
.cta.claro{background:#fff;color:var(--noite);border:1px solid var(--linha)}
.ficha-pe{padding:14px 16px;background:#F6F9FB;border-top:1px solid var(--linha)}

/* ---------- idioma dentro da conta ---------- */
.item-idioma{margin-bottom:8px}
.linguas-conta{display:none;gap:6px;margin-top:6px}
.linguas-conta[data-on="1"]{display:flex}
.linguas-conta button{
  flex:1;border:1px solid var(--linha);background:#fff;border-radius:10px;
  padding:10px 6px;cursor:pointer;
  font-family:var(--corpo);font-size:12.5px;font-weight:600;color:#41525F;
}
.linguas-conta button[data-on="1"]{background:var(--noite);color:#fff;border-color:var(--noite)}

/* ---------- menu de idioma ---------- */
.menu-lista{
  position:absolute;top:calc(100% + 7px);right:0;z-index:70;
  background:#fff;border:1px solid var(--linha);border-radius:12px;
  box-shadow:0 14px 30px -12px rgba(6,9,15,.35);
  padding:5px;min-width:142px;display:none;
}
.menu-lista[data-on="1"]{display:block}
.menu-lista button{
  display:flex;align-items:center;gap:9px;width:100%;
  border:0;background:none;border-radius:8px;padding:9px 10px;cursor:pointer;
  font-family:var(--corpo);font-size:13.5px;font-weight:500;color:var(--noite);
  text-align:left;
}
.menu-lista button:hover{background:#F1F5F9}
.menu-lista button[data-on="1"]{font-weight:700}
.menu-lista button i{
  margin-left:auto;font-style:normal;color:var(--glacial);opacity:0;font-size:13px;
}
.menu-lista button[data-on="1"] i{opacity:1}

/* ---------- seletor de idioma ---------- */
.linguas-topo{display:flex;gap:6px;justify-content:center;margin-top:28px}
.lingua-btn{
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);
  color:#9FB0BE;border-radius:999px;padding:7px 15px;cursor:pointer;
  font-family:var(--corpo);font-size:12.5px;font-weight:600;transition:.15s;
}
.lingua-btn[data-on="1"]{background:#fff;color:var(--noite);border-color:#fff}

/* ---------- cadastro ---------- */
.tel-pais{
  position:relative;flex-shrink:0;display:flex;align-items:center;gap:3px;
  font-family:var(--corpo);font-size:16px;font-weight:600;color:var(--noite);
}
.tel-pais::after{content:'›';transform:rotate(90deg);color:var(--gelo);font-size:14px}
.tel-pais select{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;
  -webkit-appearance:none;appearance:none;font-size:16px;
}
.tel-risco{width:1px;align-self:stretch;background:var(--linha);margin:2px 0}

.campo-form{padding:14px 16px;border-bottom:1px solid var(--linha)}
.campo-form:last-of-type{border-bottom:0}
.campo-form input{
  width:100%;border:0;background:none;padding:0;margin-top:5px;
  font-family:var(--corpo);font-size:16px;font-weight:600;color:var(--noite);
}
.campo-form input::placeholder{color:#B6C3CE;font-weight:500}
.campo-form input:focus{outline:none}
.campo-form:focus-within{background:#F8FBFD}
.erro-campo{
  font-family:var(--dados);font-size:9px;letter-spacing:.06em;
  color:var(--vermelho);font-weight:600;margin-top:7px;display:none;
}
/* O aviso vale em qualquer bloco que possa ter erro, não só nos campos
   de texto. As três declarações do professor e o aceite dos termos
   vivem dentro de .ficha: a mensagem existia, estava escrita e traduzida,
   e nunca aparecia — a pessoa só via o botão não fazer nada. */
.campo-form[data-erro="1"] .erro-campo,
.ficha[data-erro="1"] .erro-campo,
[data-erro="1"] > .erro-campo{display:block}
.idade-check{
  display:flex;align-items:flex-start;gap:11px;padding:15px 16px;cursor:pointer;
}
.caixa{
  width:22px;height:22px;border-radius:6px;border:1.5px solid var(--linha);
  background:#fff;flex-shrink:0;display:grid;place-items:center;margin-top:1px;
}
.caixa svg{opacity:0}
.idade-check[data-on="1"] .caixa{background:var(--noite);border-color:var(--noite)}
.idade-check[data-on="1"] .caixa svg{opacity:1}
.idade-check span{font-size:13px;line-height:1.45;color:#41525F}

/* Havia uma segunda definição destas duas mais acima, com
   align-items:center, e ela nunca chegava a valer — esta vem depois e
   vence. Baseline é o que alinha o DDI com o número digitado; center
   deixava o '+55' flutuando acima da linha do texto. */
.tel-linha{display:flex;align-items:baseline;gap:10px;margin-top:5px}
.tel-linha input{flex:1;min-width:0;margin-top:0}

/* Primeiro nome + Sobrenome, lado a lado — mesma régua do .tel-linha
   aqui em cima (dois campos do mesmo tamanho, um só gap entre eles).
   Pedido de Gabrielle (12/9/2026), ver o comentário em #c-nome/#p-nome
   no HTML. */
.nome-linha{display:flex;gap:10px;margin-top:5px}
.nome-linha input{flex:1;min-width:0;margin-top:0}

/* ---------- período ---------- */
.datas{display:flex;align-items:center;gap:12px;margin-top:8px}
.data-campo{flex:1;min-width:0}
.data-campo small{
  display:block;font-family:var(--dados);font-size:8.5px;
  letter-spacing:.1em;color:var(--gelo);
}
.data-campo input{
  width:100%;border:0;background:none;padding:0;margin-top:4px;
  font-family:var(--corpo);font-size:14.5px;font-weight:600;color:var(--noite);
}
.data-campo input:focus{outline:none}
.data-seta{color:#C3CED8;font-size:15px;padding-top:13px;flex-shrink:0}

/* ---------- quem vai esquiar ---------- */
.contador-linha{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;
}
.contador-linha span{font-family:var(--dados);font-size:10px;color:var(--gelo);letter-spacing:.05em}
.stepper{display:flex;align-items:center;gap:13px;flex-shrink:0}
.stepper button{
  width:31px;height:31px;border-radius:50%;border:1px solid var(--linha);background:#fff;
  font-family:var(--corpo);font-size:18px;line-height:1;color:var(--noite);cursor:pointer;
}
.stepper button:disabled{color:#C8D3DC;cursor:not-allowed;background:#F7FAFC}
.stepper b{font-family:var(--dados);font-size:15px;font-weight:600;min-width:15px;text-align:center}
.idade-linha{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--linha);
}
.idade-linha label{font-size:13px;font-weight:500}
.idade-linha select{
  border:1px solid var(--linha);border-radius:9px;padding:7px 10px;background:#fff;
  font-family:var(--dados);font-size:12px;font-weight:600;color:var(--noite);cursor:pointer;
}
.idade-linha select:focus{outline:none;border-color:var(--noite)}

/* ---------- campo de escolha ---------- */
.linha-escolha{position:relative}
.linha-escolha::after{
  content:'›';position:absolute;right:2px;top:4px;color:var(--gelo);
  font-size:16px;pointer-events:none;
}
.escolha{
  width:100%;border:0;background:none;padding:0 18px 0 0;margin-top:6px;
  -webkit-appearance:none;appearance:none;cursor:pointer;
  font-family:var(--corpo);font-size:15px;font-weight:600;color:var(--noite);
}
.escolha:focus{outline:none}

.reservado{
  display:flex;gap:7px;margin-top:12px;padding:10px 12px;
  background:#F1F5F9;border-radius:10px;
  font-size:11.5px;line-height:1.45;color:#5A6B79;
}
.reservado::before{content:'🔒';flex-shrink:0;font-size:12px}
/* O aviso do arrependimento legal não é uma trava, é um alerta: ele
   avisa o professor de que a escolha dele só vale DEPOIS do prazo da
   lei. Cadeado dizia a coisa errada. A variante existe porque
   `.reservado` é usada em muitos outros lugares, onde o cadeado está
   certo. */
.reservado.alerta::before{content:'⚠️'}
.reservado.alerta{white-space:pre-line;margin-bottom:10px}
.reservado.fim{background:#FCE8E7;color:#8A423C}
.reservado.fim::before{content:'✕'}
/* PEDIDO DE LUKE, 18/9/2026: a confirmação de "Conta criada..." usava o
   `.reservado` padrão — cadeado, cinza — a mesma cara de um aviso
   qualquer. Sem destaque, ficava fácil de não notar (e foi lida como
   "não aparece nenhuma mensagem", quando na verdade aparecia, só sem
   chamar atenção). As cores são as MESMAS de `.aviso-sucesso` (ver mais
   abaixo) — o app já tinha um verde de confirmação padronizado, então
   esta variante reaproveita a paleta em vez de inventar um segundo
   verde. */
.reservado.sucesso{background:#E9F7EF;color:#146A3B}
.reservado.sucesso::before{content:'✓'}
/* Pedido de Gabrielle (11/9/2026): o prazo do saldo ("Pague até...")
   precisa se destacar mais do que o resto do texto pequeno de
   `.reservado` — maior e em negrito, só aqui. */
#saldo-prazo{font-size:13.5px;font-weight:700;color:var(--noite)}

.relogio .vencido,[data-prazo].vencido{color:var(--vermelho)}

.clausula{
  padding:15px 0;border-bottom:1px solid var(--linha);
}
.clausula:last-child{border-bottom:0}
.clausula b{
  display:block;font-family:var(--display);
  font-variation-settings:'wdth' 112,'wght' 700;font-size:14px;
}
.clausula p{
  font-size:13px;line-height:1.55;color:#41525F;margin-top:7px;
}

/* ---------- data de nascimento ---------- */
.nasc-linha{display:flex;gap:8px;margin-top:6px}
.nasc-linha select{
  flex:1;min-width:0;border:1px solid var(--linha);border-radius:9px;
  padding:9px 22px 9px 10px;background:#fff;cursor:pointer;
  font-family:var(--corpo);font-size:15px;font-weight:600;color:var(--noite);
  -webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#8899A8 50%),linear-gradient(135deg,#8899A8 50%,transparent 50%);
  background-position:calc(100% - 13px) 17px,calc(100% - 9px) 17px;
  background-size:4px 4px,4px 4px;background-repeat:no-repeat;
}
.nasc-linha select:focus{outline:none;border-color:var(--noite)}
.nasc-linha #nasc-mes{flex:1.5}

/* ---------- senha ---------- */
.senha-linha{display:flex;align-items:center;gap:10px}
.senha-linha input{flex:1;min-width:0}
.ver-senha{
  border:0;background:none;padding:4px;cursor:pointer;color:#B6C3CE;
  flex-shrink:0;display:grid;place-items:center;
}
.ver-senha[data-on="1"]{color:var(--noite)}
.forca{height:3px;background:#E7EDF3;border-radius:2px;margin-top:9px;overflow:hidden}
.forca i{display:block;height:100%;width:0;border-radius:2px;transition:width .2s,background .2s}

/* ---------- fale conosco ---------- */
.canal{
  display:flex;align-items:center;gap:14px;margin-top:12px;
  background:#fff;border:1px solid var(--linha);border-radius:16px;
  padding:15px 16px;text-decoration:none;color:inherit;
}
.canal:active{border-color:var(--noite)}
.canal-icone{
  width:42px;height:42px;border-radius:13px;flex-shrink:0;
  display:grid;place-items:center;color:#fff;
}
.canal-icone.zap{background:#25D366}
.canal-icone.mail{background:var(--grafite)}
.canal b{
  display:block;font-family:var(--display);
  font-variation-settings:'wdth' 110,'wght' 700;font-size:15px;
}
.canal span{
  display:block;font-family:var(--dados);font-size:12px;
  color:var(--gelo);margin-top:3px;word-break:break-all;
}
.canal i{margin-left:auto;font-style:normal;font-size:17px;color:var(--glacial);flex-shrink:0}

.bandeiras-card{font-size:15px;letter-spacing:3px;line-height:1;margin-top:11px}

/* As disciplinas herdam o tamanho das bandeiras: são a mesma classe de
   informação, lidas na mesma passada de olho, e tamanhos diferentes
   fariam uma parecer mais importante que a outra. */
.disc-card{font-size:15px;letter-spacing:3px;line-height:1;margin-top:7px}

/* A rapidez é frase, não símbolo — precisa ser lida, não só reconhecida.
   Fica no verde do selo de taxa alta, porque é a mesma notícia boa. */
.rapidez-card{
  display:inline-block;margin-top:8px;
  font-family:var(--dados);font-size:9.5px;font-weight:600;letter-spacing:.05em;
  background:#E8F5EE;color:#1F7A4D;border-radius:5px;padding:4px 8px;
}

.taxa{
  display:inline-block;margin-top:6px;
  font-family:var(--dados);font-size:9px;font-weight:600;letter-spacing:.07em;
  background:#F1F5F9;color:#5A6B79;border-radius:5px;padding:3px 7px;
}
.taxa.alta{background:#E4F5EA;color:#177A44}

.est .pesa{
  display:block;font-style:normal;font-family:var(--dados);font-size:8px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--glacial);
  font-weight:600;margin-top:4px;
}

.selo-feito{
  width:64px;height:64px;border-radius:50%;margin:0 auto;
  display:grid;place-items:center;background:var(--verde);
  box-shadow:0 12px 26px -12px rgba(30,158,87,.6);
}


/* ---------- avaliar professor ---------- */
.aula-antiga .mini-cta{margin-left:auto;flex-shrink:0}
.avaliar-topo{display:flex;align-items:center;gap:13px}
.avaliar-topo .retrato{width:48px;height:48px;border-radius:14px;background-color:#243447;flex-shrink:0}
.avaliar-topo h2{font-size:19px}
.avaliar-topo .caixa-sub{margin-top:4px}
/* As avaliações escritas: no perfil público (o aluno lê) e no cartão da
   aula dada (o professor lê o que recebeu). Mesmo desenho nos dois, de
   propósito — é a mesma coisa vista de dois lados. */
.avaliacao{
  border-top:1px solid var(--linha);padding:13px 0;
}
.avaliacao:first-child{border-top:0;padding-top:4px}
.avaliacao-topo{display:flex;align-items:center;gap:8px}
.avaliacao-topo b{
  font-family:var(--display);font-variation-settings:'wdth' 110,'wght' 700;font-size:13.5px;
}
.avaliacao-estrelas{color:#E8B33A;font-size:12px;letter-spacing:1px}
.avaliacao p{font-size:13px;line-height:1.5;margin-top:5px;color:#33454F}
.avaliacao small{
  display:block;margin-top:5px;font-family:var(--dados);
  font-size:10px;letter-spacing:.1em;color:var(--gelo);
}

.aval-recebida{
  margin-top:12px;padding:11px 13px;border-radius:12px;
  background:#FBF6EA;border:1px solid #EFE0C0;
}
.aval-recebida-topo{display:flex;align-items:center;gap:8px}
.aval-recebida-topo small{
  font-family:var(--dados);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:#8A7549;
}
.aval-recebida p{font-size:13px;line-height:1.5;margin-top:6px;color:#4A3F28}
.aval-recebida p.sem-texto{color:#9A8A66;font-style:italic}

.estrelas-escolha{display:flex;gap:6px;justify-content:center;margin-top:20px}

/* Dois modos na mesma caixa: avaliar e reler.
   Relendo, as estrelas viram registro — sem cursor de clique e sem o
   afundar do toque, que prometeriam uma edição que não acontece. */
.caixa-modal[data-lendo="1"] .estrelas-escolha button{cursor:default}
.caixa-modal[data-lendo="1"] .estrelas-escolha button:active{transform:none}
.caixa-modal[data-lendo="1"] textarea{background:#F6F9FB;color:#4B6B70}
.caixa-modal[data-lendo="1"] .ajuda,
.caixa-modal[data-lendo="1"] .erro-campo{display:none}
.caixa-modal[data-lendo="1"] [data-so-avaliando]{display:none}
.caixa-modal:not([data-lendo="1"]) [data-so-lendo]{display:none}
#avaliar-quando{opacity:.7}
#avaliar-quando:empty{display:none}
.estrelas-escolha button{
  border:0;background:none;cursor:pointer;padding:2px 4px;
  font-size:34px;line-height:1;color:#DDE5EC;transition:color .12s,transform .12s;
}
.estrelas-escolha button[data-on="1"]{color:#E8B33A}
.estrelas-escolha button:active{transform:scale(.9)}
.estrelas-rotulo{
  text-align:center;margin-top:8px;
  font-family:var(--dados);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gelo);
}
#avaliar-texto{
  width:100%;margin-top:18px;border:1px solid var(--linha);border-radius:12px;
  padding:12px;resize:none;
  font-family:var(--corpo);font-size:14.5px;line-height:1.5;color:var(--noite);
}
#avaliar-texto:focus{outline:none;border-color:var(--noite)}
#avaliar-texto::placeholder{color:#B6C3CE}
.caixa-modal[data-erro="1"] #avaliar-erro{display:block}
#avaliar-erro{display:none;margin-top:10px}

/* ---------- cancelar aula ---------- */
.proxima-cancelar{
  width:100%;margin-top:9px;border:0;background:none;cursor:pointer;
  padding:9px;color:#8FA2B2;position:relative;z-index:1;
  font-family:var(--corpo);font-size:12.5px;font-weight:600;
}
.proxima-cancelar:active{color:#fff}

.cortina{
  position:fixed;inset:0;z-index:90;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(6,9,15,.55);backdrop-filter:blur(3px);
}
.cortina[data-on="1"]{display:flex}
.caixa-modal{
  width:100%;max-width:400px;background:#fff;
  border-radius:20px;padding:24px 20px;
  max-height:82vh;overflow-y:auto;
  box-shadow:0 30px 60px -20px rgba(6,9,15,.6);
  animation:subir .18s ease-out;
}
@keyframes subir{
  from{ opacity:0; transform:translateY(10px) scale(.97) }
  to  { opacity:1; transform:none }
}
.caixa-modal h2{
  font-family:var(--display);font-variation-settings:'wdth' 108,'wght' 800;
  font-size:21px;line-height:1.2;letter-spacing:-.015em;
}
.caixa-sub{
  font-family:var(--dados);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gelo);margin-top:8px;
}
.devolucao{
  margin-top:18px;padding:16px;border-radius:14px;
  background:#E4F5EA;border:1px solid #BFE5CD;
}
.devolucao[data-tipo="sem"]{background:#FCE8E7;border-color:#F3C9C6}
.devolucao .rotulo{
  font-family:var(--dados);font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:#177A44;font-weight:600;
}
.devolucao[data-tipo="sem"] .rotulo{color:#B32B22}
.devolucao .valor{
  font-family:var(--display);font-variation-settings:'wdth' 106,'wght' 800;
  font-size:30px;letter-spacing:-.02em;color:#0F5C33;margin-top:5px;
}
.devolucao[data-tipo="sem"] .valor{color:#9A231C}
.devolucao .conversao{
  font-family:var(--dados);font-size:9px;letter-spacing:.07em;
  color:#3D6B50;margin-top:7px;line-height:1.5;
}
.devolucao[data-tipo="sem"] .conversao{color:#8A423C}
.caixa-nota{font-size:13px;line-height:1.55;color:#41525F;margin-top:16px}
.caixa-acoes{display:flex;gap:9px;margin-top:20px}
.caixa-acoes .cta{margin:0}

/* ---------- idiomas ---------- */
.idiomas{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.lingua{
  border:1px solid var(--linha);background:#fff;border-radius:999px;padding:7px 12px;
  font-family:var(--corpo);font-size:12.5px;font-weight:500;color:#41525F;
  cursor:pointer;transition:.15s;
}
.lingua[data-on="1"]{background:var(--noite);color:#fff;border-color:var(--noite)}
.bandeiras{font-size:20px;letter-spacing:4px;line-height:1;margin-top:10px}

/* Disciplinas e línguas no perfil, cada uma com o rótulo antes dos
   emojis. O rótulo fica no tamanho do resto do cabeçalho; os emojis
   maiores, porque são o conteúdo. `margin-top` menor que o das bandeiras
   soltas de antes, já que agora são duas linhas seguidas. */
.perfil-atributo{
  display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px;
}
.perfil-atributo b{font-weight:400;margin-top:0}

/* ---------- cartão de professor ---------- */
.contagem{padding:2px 20px 12px;font-family:var(--dados);font-size:10.5px;color:var(--gelo)}
/* mesma aparência de .contagem, mas para dentro de um contêiner que já
   tem padding lateral próprio (a lista de orçamentos) — sem isto o
   espaçamento das bordas dobrava. */
.contagem-secao{padding:2px 0 12px;font-family:var(--dados);font-size:10.5px;color:var(--gelo)}
.cartao{
  background:#fff;border:1px solid var(--linha);border-radius:16px;padding:14px;
  margin-bottom:12px;cursor:pointer;transition:.15s;
}
.cartao:active{border-color:var(--noite)}
.inst-topo{display:flex;gap:12px;align-items:flex-start}
.retrato{
  width:52px;height:52px;border-radius:14px;flex-shrink:0;
  display:grid;place-items:center;color:#fff;
  font-family:var(--display);font-variation-settings:'wdth' 110,'wght' 700;font-size:17px;
}

.r4{background:linear-gradient(140deg,#3A3A52,#6E6E8F)}
.inst-nome{font-family:var(--display);font-variation-settings:'wdth' 110,'wght' 700;font-size:16px;line-height:1.1}
.inst-cred{font-family:var(--dados);font-size:9.5px;color:var(--gelo);margin-top:4px;letter-spacing:.03em}
.ponto{width:9px;height:9px;border-radius:50%}
.p-verde{background:var(--verde)}
.p-azul{background:var(--azul)}
.p-vermelho{background:var(--vermelho)}
.p-preto{background:var(--preto)}
.inst-pe{
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-top:12px;padding-top:11px;border-top:1px solid var(--linha);
}

/* ---------- seleção para orçamento ---------- */
.cartao.travado{opacity:.55;cursor:default}
.cartao.travado .marcador{opacity:.35}
/* Era maiúsculas de 9,5px: cabia "PEDIDO EM ANDAMENTO" e mais nada.
   Agora carrega a explicação e o que fazer, então precisa ser lido. */
.aviso-trava{
  display:flex;align-items:flex-start;gap:7px;margin-top:11px;padding-top:11px;
  border-top:1px solid var(--linha);
  font-family:var(--dados);font-size:11.5px;line-height:1.45;
  color:var(--gelo);font-weight:500;
}
.aviso-trava.fim{color:var(--vermelho)}
.cartao.escolhido{border-color:var(--noite);box-shadow:0 0 0 1px var(--noite) inset}
.link-perfil{
  border:0;background:none;padding:0;cursor:pointer;
  font-family:var(--corpo);font-size:12px;font-weight:600;color:var(--glacial);
}
.marcador{
  width:26px;height:26px;border-radius:50%;border:1.5px solid var(--linha);background:#fff;
  display:grid;place-items:center;flex-shrink:0;transition:.15s;
}
.marcador svg{opacity:0;transition:.15s}
.cartao.escolhido .marcador{background:var(--noite);border-color:var(--noite)}
.cartao.escolhido .marcador svg{opacity:1}
.barra-selecao{
  position:absolute;left:0;right:0;bottom:0;z-index:48;
  background:rgba(255,255,255,.96);backdrop-filter:blur(12px);
  border-top:1px solid var(--linha);padding:12px 20px 18px;
}
.barra-selecao[data-on="0"]{display:none}
.tela.com-rodape{padding-bottom:120px}

/* ---------- a partir de ---------- */
.minimo{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-top:11px;padding-top:11px;border-top:1px solid rgba(11,90,98,.22);
}
.minimo span{
  font-family:var(--dados);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;opacity:.75;
}
.minimo b{
  font-family:var(--display);font-variation-settings:'wdth' 108,'wght' 800;font-size:17px;
}

/* ═══════════════ PROFESSOR VISTO PELO ALUNO ═══════════════ */

/* ---------- perfil do professor ---------- */
.capa{
  height:150px;background:linear-gradient(150deg,#0E2436 0%,#1E4A6B 55%,#3E7FA5 100%);
  position:relative;overflow:hidden;
}
.capa svg{position:absolute;bottom:0;left:0;width:100%;opacity:.32}
.perfil-cabeca{padding:0 20px;margin-top:-32px;position:relative;z-index:2}
.retrato-g{
  width:76px;height:76px;border-radius:20px;border:3px solid var(--neve);
  display:grid;place-items:center;color:#fff;
  font-family:var(--display);font-variation-settings:'wdth' 110,'wght' 700;font-size:25px;
}
.estatisticas{
  display:flex;background:#fff;border:1px solid var(--linha);border-radius:14px;
  margin:16px 20px 0;overflow:hidden;
}
.est{flex:1;min-width:0;padding:12px 8px;text-align:center;border-right:1px solid var(--linha)}
.est:last-child{border-right:0}
.est b{display:block;font-family:var(--dados);font-size:16px;font-weight:600}
.est small{display:block;font-size:9.5px;color:var(--gelo);margin-top:3px;line-height:1.3}
.rodape-fixo{
  position:absolute;left:0;right:0;bottom:0;z-index:45;
  background:rgba(255,255,255,.95);backdrop-filter:blur(12px);
  border-top:1px solid var(--linha);padding:12px 20px 18px;
  display:flex;align-items:center;gap:14px;
}
.rodape-fixo .cta{flex:1}

/* ---------- foto do professor ---------- */
/* As vinte regras .f-p01 a .f-p20 saíram daqui. Eram os desenhos dos
   professores inventados, pintados por `f-${p.id}` no cartão da busca —
   e a busca lê `professores_publico` desde que ligou ao banco. A foto
   agora é `foto_url`, e quem não mandou nenhuma aparece com a inicial.
   Deixá-las seria vinte regras que ninguém alcança, e a varredura as
   acusaria a cada execução até alguém parar de ler o relatório. */
.foto{background-size:contain;background-position:center bottom;background-repeat:no-repeat}
/* Fotografia de verdade, vinda do balde. As regras de cima foram feitas
   para os desenhos dos professores de exemplo — `contain` e ancorado
   embaixo, que numa foto de gente deixa tarja dos dois lados e corta a
   cabeça. Vem depois de .foto de propósito: as duas classes andam
   juntas no mesmo elemento, e a última vence. */
.foto-real{background-size:cover;background-position:center}

/* As duas parcelas, na tela de pagamento. Some quando a reserva é de
   última hora e o pagamento é único — quem decide é `parcelas()`, pelo
   saldo ser zero. */
.parcelas{display:none;margin-top:14px;padding-top:12px;border-top:1px solid var(--linha)}
.parcelas[data-on="1"]{display:block}
.parcelas .resumo-linha b{color:var(--gelo)}
.retrato.grande{width:82px;height:82px;border-radius:18px}
.retrato,.retrato-g{background-color:#243447}
/* PEDIDO DE LUKE, 19/9/2026: tags de "Minhas especialidades" no cartão de
   busca, no lugar do texto livre que morava aqui — a classe `.sobre`
   (parágrafo com clamp de 3 linhas) saiu junto com o textarea que ela
   mostrava. */
.especialidades-card{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.especialidades-card span{
  font-family:var(--dados);font-size:9.5px;font-weight:600;letter-spacing:.02em;
  background:#F1F5F9;color:#41525F;border-radius:5px;padding:3px 7px;
}

/* Mesma tag, no perfil completo — maior, porque ali é a única informação
   da fileira (no cartão ela concorre com nota, taxa e disciplinas). O
   estado vazio ("ainda não marcou nenhuma") é frase corrida, não tag —
   por isso o `display:block` própio em `.vazio`. */
.perfil-especialidades{display:flex;flex-wrap:wrap;gap:6px}
.perfil-especialidades span{
  font-family:var(--dados);font-size:11px;font-weight:600;letter-spacing:.02em;
  background:#F1F5F9;color:#41525F;border-radius:6px;padding:5px 10px;
}
.perfil-especialidades.vazio{
  display:block;font-family:var(--corpo);font-size:13px;font-weight:400;color:var(--gelo);
}
.area{
  width:100%;border:0;background:none;padding:0;margin-top:4px;resize:none;
  font-family:var(--corpo);font-size:14px;line-height:1.5;color:var(--noite);
}
.area:focus{outline:none}

/* ═══════════════ ORÇAMENTO E PAGAMENTO ═══════════════ */

/* ---------- orçamentos ---------- */
.prazo-aceitar{
  background:#FEF3E2;border:1px solid #F3DFBC;border-radius:12px;
  padding:12px 14px;margin-top:12px;
}
.prazo-aceitar > div:first-child{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.prazo-aceitar span{font-size:12.5px;color:#8A6414;line-height:1.4}
.prazo-aceitar b{
  font-family:var(--display);font-variation-settings:'wdth' 108,'wght' 800;
  font-size:19px;color:#9A6412;white-space:nowrap;
}
.prazo-aceitar .trilha{background:#F0DCB6;margin-top:9px}
.prazo-aceitar .trilha i{background:#E0A93A}
.status{
  display:inline-flex;align-items:center;gap:5px;margin-top:6px;
  font-family:var(--dados);font-size:8.5px;font-weight:600;letter-spacing:.08em;
  padding:3px 7px;border-radius:5px;
}
.s-recebido{background:#E4F5EA;color:#177A44}
.s-espera{background:#FEF3E2;color:#9A6412}
.s-fim{background:#F1F5F9;color:#7A8B9C}
.oferta{
  background:#F6F9FB;border:1px solid var(--linha);border-radius:12px;
  padding:13px 14px;margin-top:12px;
}
.oferta .valor{
  font-family:var(--display);font-variation-settings:'wdth' 106,'wght' 800;
  font-size:27px;line-height:1;margin-top:5px;
}
.oferta .conversao{font-family:var(--dados);font-size:9px;color:var(--gelo);margin-top:6px;letter-spacing:.03em}

.vencido{color:var(--vermelho)}
.relogio{font-family:var(--dados);font-size:9.5px;font-weight:600;color:var(--gelo);letter-spacing:.06em}
.trilha{height:3px;background:#E7EDF3;border-radius:2px;margin-top:8px;overflow:hidden}
.trilha i{display:block;height:100%;background:#E0A93A;border-radius:2px}
.mini-cta{
  border:0;background:var(--noite);color:#fff;border-radius:10px;padding:11px 18px;
  font-family:var(--display);font-variation-settings:'wdth' 110,'wght' 700;font-size:13px;cursor:pointer;
}
.mini-cta.claro{background:#fff;color:var(--noite);border:1px solid var(--linha)}
.prazo{
  background:var(--noite);color:#fff;border-radius:16px;padding:18px;
}
.prazo .num{
  font-family:var(--display);font-variation-settings:'wdth' 106,'wght' 800;
  font-size:38px;line-height:1;margin-top:6px;
}
.prazo p{font-size:12px;color:#9FB0BE;line-height:1.5;margin-top:10px}
.selo-aba{
  position:absolute;top:2px;right:calc(50% - 20px);background:var(--vermelho);color:#fff;
  font-family:var(--dados);font-size:8px;font-weight:600;
  min-width:15px;height:15px;border-radius:8px;display:grid;place-items:center;padding:0 4px;
}

/* ---------- reserva ---------- */
.resumo{
  background:#fff;border:1px solid var(--linha);border-radius:16px;overflow:hidden;
}
.resumo-linha{
  display:flex;justify-content:space-between;align-items:center;
  padding:13px 16px;border-bottom:1px solid var(--linha);font-size:13.5px;
}
.resumo-linha:last-child{border-bottom:0}
.resumo-linha span{color:var(--gelo)}
.resumo-linha b{font-family:var(--dados);font-size:13px;font-weight:600}
.total{background:var(--noite);color:#fff;padding:16px}
.total .brl{font-family:var(--display);font-variation-settings:'wdth' 108,'wght' 800;font-size:26px}
.total .eur{font-family:var(--dados);font-size:10px;color:#93A6B6;margin-top:4px;line-height:1.5}
.pagamento{display:flex;gap:8px;margin-top:10px}
.pag{
  flex:1;border:1px solid var(--linha);background:#fff;border-radius:12px;padding:13px;
  cursor:pointer;text-align:left;
}
.pag b{display:block;font-size:13.5px;font-weight:700}
.pag small{display:block;font-family:var(--dados);font-size:9.5px;color:var(--gelo);margin-top:3px}
.pag[data-on="1"]{border-color:var(--noite);box-shadow:0 0 0 1px var(--noite) inset}
.aviso{
  font-size:11.5px;color:#5A6B79;line-height:1.5;background:#F6F9FB;
  border:1px solid var(--linha);border-radius:12px;padding:12px;margin-top:12px;
  white-space:pre-line; /* alguns avisos trazem \n de propósito — textContent
                            não quebra sozinho, e sem isto a segunda linha
                            gruda na primeira */
}
/* ADICIONADO — pedido de Luke (21/9/2026): link de WhatsApp dentro de um
   `.aviso` (entre orçamentos ativos e inativos) — sem isto herdava o azul
   padrão do navegador, fora da paleta do app. */
.aviso a{color:var(--glacial);font-weight:600;text-decoration:underline}

/* Variante positiva do .aviso — confirmação, não instrução neutra. Usada
   pela confirmação de conta criada (tela de busca) e pelo botão "Ativar
   avisos push" (#contaprof/#perfil) quando a ativação dá certo — o nome
   já nasceu genérico de propósito, para qualquer confirmação futura. */
.aviso-sucesso{
  color:#146A3B;background:#E9F7EF;border-color:#BFE6CE;font-weight:600;
}

/* Variante negativa do .aviso — algo que a pessoa precisa corrigir, e não
   só uma instrução neutra. Mesma paleta de vermelho de `.aviso-todos`,
   aqui genérica porque quem usa hoje (botão "Ativar avisos push") pode
   crescer para outros erros de ação, e um nome específico obrigaria a
   inventar outro depois. */
.aviso-erro{
  color:#B32B22;background:#FFF7F6;border-color:#F0D2CF;font-weight:600;
}

/* Aviso curto sobre o câmbio, logo abaixo do título "Como você quer
   pagar os €X" — pedido de Gabrielle (10/9/2026), depois de o sinal
   passar a perguntar o câmbio comercial ao banco em vez de calcular
   sozinho (`quantoEmReaisDoOrcamento`). O câmbio ainda pode se mexer de
   um boletim do dia para o outro; isto avisa sem prometer um número que
   já não muda (essa promessa falsa é a mesma razão pela qual "CÂMBIO
   TRAVADO POR 30 MIN" saiu da tela). */
.nota-cambio{
  margin:4px 0 0;font-family:var(--dados);font-size:10px;letter-spacing:.03em;
  color:var(--gelo);line-height:1.4;
}

/* ---------- valor em reais ---------- */
.em-reais{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--linha);border-radius:14px;
  padding:14px 16px;margin-top:10px;
}
.em-reais span{
  font-family:var(--dados);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gelo);
}
.em-reais b{
  font-family:var(--display);font-variation-settings:'wdth' 108,'wght' 800;font-size:23px;
}
.em-reais small{
  width:100%;font-family:var(--dados);font-size:9px;color:var(--gelo);
  letter-spacing:.05em;margin-top:5px;
}

/* ---------- confirmado ---------- */
.selo-ok{
  width:64px;height:64px;border-radius:50%;background:var(--verde);
  display:grid;place-items:center;margin:36px auto 0;
}
.centro{text-align:center}
.codigo{
  font-family:var(--dados);font-size:11px;letter-spacing:.18em;color:var(--gelo);
  border:1px dashed var(--linha);border-radius:8px;padding:9px;margin-top:16px;text-align:center;
}

/* ═══════════════ ÁREA DO PROFESSOR ═══════════════ */

.onde-quando{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;
  margin:-2px 0 11px;padding-bottom:10px;border-bottom:1px solid var(--linha);
}
.onde-quando b{
  font-family:var(--display);font-variation-settings:'wdth' 112,'wght' 700;
  font-size:14px;letter-spacing:-.01em;
}
.onde-quando span{
  font-family:var(--dados);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gelo);
}

/* ---------- caixa de pedidos do professor ---------- */
.barra-topo.escura .titulo-barra{color:#fff}
.barra-topo.escura .sub-barra{color:#8FA2B2}
/* Segunda linha do cabeçalho do chat (estação · datas) — PEDIDO DE LUKE,
   19/9/2026. Sem margem própria (herdaria os mesmos 2px de `.sub-barra`,
   dobrando o respiro entre as duas linhas) e um tom mais apagado que o
   nome: é o dado de apoio, não o principal. */
.chat-detalhe{margin-top:0;color:#71879A}
.barra-topo.escura .voltar{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22)}
.pedido-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.pedido-topo .status{margin-top:0;white-space:nowrap;flex-shrink:0}
.s-urgente{background:#FCE8E7;color:#B32B22}
.dados{display:grid;grid-template-columns:1fr 1fr;gap:12px 10px;margin-top:13px}
.dados small{
  display:block;font-family:var(--dados);font-size:8.5px;
  letter-spacing:.1em;color:var(--gelo);
}
.dados b{display:block;font-size:12.5px;font-weight:600;margin-top:3px;line-height:1.3}
.dados b .ponto{display:inline-block;vertical-align:middle;margin-right:5px}
/* A regra do cancelamento dentro de um `.cartao` normal (lista "Canceladas"
   do professor, PARTE 48 do banco, 15/9/2026) — MESMA aparência que
   `.aula-cancelada .regra-cancel` já tem no cartão do aluno, só que este
   cartão não é um `.aula-cancelada` (layout diferente, com retrato e
   coluna de ações) e por isso precisa da própria regra, em vez de herdar
   dali. Em voz baixa, de propósito: é para quem for conferir depois por
   que o valor foi aquele, não para ler de passagem. */
.cartao .regra-cancel{
  display:block;font-family:var(--dados);font-size:10px;
  color:var(--gelo);margin-top:8px;letter-spacing:.03em;
}
.grupo-titulo{
  display:flex;align-items:center;gap:9px;margin:26px 0 12px;
  font-family:var(--display);font-variation-settings:'wdth' 112,'wght' 700;
  font-size:15px;letter-spacing:-.01em;color:var(--noite);
}
.grupo-titulo::before{
  content:'';width:9px;height:9px;border-radius:50%;flex-shrink:0;
  background:var(--gelo);
}
.grupo-titulo .conta{
  font-family:var(--dados);font-size:11px;font-weight:600;
  background:#E7EDF3;color:#41525F;border-radius:999px;
  padding:3px 9px;margin-left:auto;flex-shrink:0;
}
/* cada estado tem sua cor, igual à do selo dos cartões */
.grupo-titulo.g-responder::before{background:var(--vermelho)}
.grupo-titulo.g-responder .conta{background:#FCE8E7;color:#B32B22}
.grupo-titulo.g-aguardando::before{background:#E0A93A}
.grupo-titulo.g-aguardando .conta{background:#FEF3E2;color:#9A6412}
.grupo-titulo.g-pago::before{background:var(--verde)}
.grupo-titulo.g-pago .conta{background:#E4F5EA;color:#177A44}
.cartao.fechado{opacity:.6}
.explica{
  margin:2px 20px 14px;padding:12px 14px;background:#E4F2F3;border-radius:12px;
  font-size:12.5px;line-height:1.5;color:#0B5A62;
}
.explica b{font-weight:700}

/* ---------- onde e quando o professor atende ---------- */
.mes{
  font-family:var(--dados);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gelo);margin-top:18px;
}
.semanas{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}
.semana-btn{
  border:1px solid var(--linha);background:#fff;border-radius:10px;padding:11px 8px;
  font-family:var(--dados);font-size:11px;font-weight:500;color:#41525F;cursor:pointer;transition:.15s;
}
.semana-btn[data-on="1"]{background:var(--noite);color:#fff;border-color:var(--noite)}
.estacoes{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.est-chip{
  border:1px solid var(--linha);background:#fff;border-radius:999px;padding:8px 14px;
  font-size:12.5px;font-weight:500;color:#41525F;cursor:pointer;transition:.15s;
}
.est-chip[data-on="1"]{background:var(--noite);color:#fff;border-color:var(--noite)}
.resumo-prof{
  background:var(--noite);color:#fff;border-radius:14px;padding:15px 16px;margin-top:16px;
  font-size:13.5px;line-height:1.45;
}
.resumo-prof b{font-family:var(--dados);font-weight:600}
.resumo-prof.vazio{background:var(--vermelho)}

/* ---------- campo de valor do professor ---------- */
.valor-campo{display:flex;align-items:baseline;gap:7px;margin-top:8px}
.valor-campo span,.valor-campo input{
  font-family:var(--display);font-variation-settings:'wdth' 108,'wght' 800;
  font-size:24px;color:var(--glacial);
}
.valor-campo input{
  border:0;background:none;padding:0;width:100%;
  -moz-appearance:textfield;appearance:textfield;
}
.valor-campo input:focus{outline:none}
.valor-campo input::-webkit-outer-spin-button,
.valor-campo input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ---------- repartição do valor ---------- */
.reparte{margin-top:13px;border-top:1px solid var(--linha);padding-top:11px}
.reparte div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:7px}
.reparte span{
  font-family:var(--dados);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gelo);
}
.reparte b{font-family:var(--dados);font-size:13px;font-weight:600}
.reparte .soma{border-top:1px solid var(--linha);margin-top:10px;padding-top:10px}
.reparte .soma b{font-size:16px}
.reparte .soma span{color:var(--noite);font-weight:600}
.cta:disabled{background:#CBD6DF;color:#fff;cursor:not-allowed}

/* ═══════════════ OUTRAS TELAS ═══════════════ */

/* ---------- minhas aulas: cartão da próxima ---------- */
.proxima{
  background:var(--noite);border-radius:20px;padding:18px;color:#fff;
  position:relative;overflow:hidden;
  box-shadow:0 20px 40px -24px rgba(6,9,15,.7);
}
/* montanha discreta ao fundo */
.proxima::after{
  content:'';position:absolute;right:-30px;bottom:-40px;
  width:190px;height:190px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(111,197,232,.22), transparent 68%);
  pointer-events:none;
}
.proxima-topo{display:flex;align-items:center;justify-content:space-between;gap:12px}
.etiqueta-viva{
  font-family:var(--dados);font-size:9px;font-weight:600;letter-spacing:.12em;
  background:rgba(30,158,87,.2);color:#5FD497;
  border:1px solid rgba(95,212,151,.35);border-radius:999px;padding:4px 10px;
}
.proxima-conta{font-family:var(--dados);font-size:11px;color:#8FA2B2;letter-spacing:.06em}
.proxima-conta b{
  font-family:var(--display);font-variation-settings:'wdth' 106,'wght' 800;
  font-size:26px;color:#fff;letter-spacing:-.02em;
}
.proxima-corpo{display:flex;align-items:center;gap:13px;margin-top:16px;position:relative;z-index:1}
.proxima-corpo .retrato{
  width:52px;height:52px;border-radius:15px;background-color:#243447;flex-shrink:0;
}
.proxima-nome{
  font-family:var(--display);font-variation-settings:'wdth' 110,'wght' 700;font-size:18px;
}
.proxima-onde{font-family:var(--dados);font-size:10.5px;color:#8FA2B2;margin-top:4px;letter-spacing:.05em}
.proxima-linhas{
  margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.13);
  position:relative;z-index:1;
}
.proxima-linhas div{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:9px;
}
.proxima-linhas div:first-child{margin-top:0}
.proxima-linhas span{
  font-family:var(--dados);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#7A8EA0;flex-shrink:0;
}
.proxima-linhas b{font-size:13.5px;font-weight:600;text-align:right}
.proxima-cta{
  width:100%;margin-top:17px;border:0;border-radius:12px;cursor:pointer;
  background:rgba(255,255,255,.1);color:#fff;padding:13px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--corpo);font-size:14px;font-weight:600;
  position:relative;z-index:1;
}
.proxima-cta i{font-style:normal;font-size:16px;color:#8FA2B2}
.proxima-cta:active{background:rgba(255,255,255,.16)}

/* ---------- faixa da operadora ---------- */
.banner-viagem{
  display:flex;align-items:center;gap:13px;margin-top:14px;
  background:linear-gradient(120deg,#E4F2F3,#EDF4F8);
  border:1px solid #CBE3E6;border-radius:16px;padding:15px 16px;
  text-decoration:none;color:var(--noite);
}
.banner-viagem b{
  display:block;font-family:var(--display);
  font-variation-settings:'wdth' 110,'wght' 700;font-size:14.5px;line-height:1.25;
}
.banner-viagem span{
  display:block;font-size:12px;color:#4B6B70;margin-top:4px;line-height:1.4;
}
.banner-viagem i{
  margin-left:auto;font-style:normal;font-size:17px;color:var(--glacial);flex-shrink:0;
}

/* ---------- aula de temporada anterior ---------- */
.aula-antiga{
  display:flex;align-items:center;gap:12px;
  background:#fff;border:1px solid var(--linha);border-radius:14px;padding:12px 14px;
}
.aula-antiga .retrato{width:40px;height:40px;border-radius:12px;background-color:#243447;flex-shrink:0}
.aula-antiga b{display:block;font-size:14px;font-weight:600}
.aula-antiga span{
  display:block;font-family:var(--dados);font-size:10px;color:var(--gelo);margin-top:3px;
}

/* ---------- outras aulas confirmadas ---------- */
/* Claro, e não escuro como `.proxima`. O cartão escuro é o da PRÓXIMA —
   um só, e é o destaque da tela. Repetir o mesmo peso visual em três
   cartões tiraria o sentido de "a próxima é esta" e deixaria a tela
   pesada de ler. */
.outra-aula{
  background:#fff;border:1px solid var(--linha);border-radius:16px;padding:14px;
}
.outra-aula + .outra-aula{margin-top:10px}
.outra-aula-topo{display:flex;align-items:center;gap:12px}
.outra-aula-topo .retrato{
  width:44px;height:44px;border-radius:13px;background-color:#243447;flex-shrink:0;
  display:grid;place-items:center;color:#fff;
  font-family:var(--display);font-weight:700;font-size:17px;
}
.outra-aula-nome{
  font-family:var(--display);font-variation-settings:'wdth' 108,'wght' 700;font-size:15.5px;
}
.outra-aula-onde{
  font-family:var(--dados);font-size:10px;color:var(--gelo);margin-top:3px;letter-spacing:.05em;
}
.outra-aula-falta{
  margin-left:auto;flex-shrink:0;
  font-family:var(--dados);font-size:10.5px;color:var(--gelo);letter-spacing:.05em;
}
.outra-aula-falta b{
  font-family:var(--display);font-variation-settings:'wght' 700;
  font-size:15px;color:var(--noite);
}
.outra-aula-linhas{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.outra-aula-linhas div{display:flex;justify-content:space-between;gap:12px}
.outra-aula-linhas span{
  font-family:var(--dados);font-size:10px;color:var(--gelo);letter-spacing:.06em;
  text-transform:uppercase;
}
.outra-aula-linhas b{font-size:13px;font-weight:600;text-align:right}
.outra-aula-acoes{display:flex;gap:8px;margin-top:13px;flex-wrap:wrap}
.outra-aula-acoes .mini-cta{flex:1;min-width:140px}

/* ---------- escolher com qual professor falar ---------- */
.escolher-aula{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:#fff;border:1px solid var(--linha);border-radius:14px;
  padding:13px 14px;cursor:pointer;
}
.escolher-aula + .escolher-aula{margin-top:8px}
.escolher-aula i{margin-left:auto;color:var(--gelo);font-style:normal;font-size:18px}
.escolher-aula-nome{
  font-family:var(--display);font-variation-settings:'wdth' 108,'wght' 700;font-size:15px;
}
.escolher-aula-onde{
  font-family:var(--dados);font-size:10px;color:var(--gelo);margin-top:3px;letter-spacing:.05em;
}

/* ---------- aulas / chat / perfil ---------- */
.contagem-regressiva{
  background:var(--noite);color:#fff;border-radius:18px;padding:18px;overflow:hidden;position:relative;
}
.contagem-regressiva .num{
  font-family:var(--display);font-variation-settings:'wdth' 106,'wght' 800;font-size:44px;line-height:1;
}
/* resumo da próxima aula (dias, alunos, valor) */
.neve-info{display:flex;gap:16px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14)}
.neve-info div b{display:block;font-family:var(--dados);font-size:13px}
.neve-info div small{display:block;font-size:9px;color:#8FA2B2;margin-top:2px}
.balao{max-width:78%;padding:10px 13px;border-radius:14px;font-size:13.5px;line-height:1.45;margin-bottom:9px}
.dele{background:#fff;border:1px solid var(--linha);border-top-left-radius:4px}
.meu{background:var(--noite);color:#fff;margin-left:auto;border-bottom-right-radius:4px}
.hora{font-family:var(--dados);font-size:8.5px;color:var(--gelo);display:block;margin-top:5px}
.meu .hora{color:#8FA2B2}
/* "Eu" ou o primeiro nome de quem escreveu, no topo da bolha — pedido de
   Gabrielle (11/9/2026): alinhamento e cor já diferenciavam as duas
   pontas da conversa, mas nada dizia quem é quem numa bolha isolada.
   Mesma família/tamanho de .hora, só em negrito, por vir primeiro. */
.quem{font-family:var(--dados);font-size:8.5px;font-weight:700;color:var(--gelo);display:block;margin-bottom:4px}
.meu .quem{color:#8FA2B2}
.item-lista{
  display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--linha);
  border-radius:12px;padding:13px 14px;margin-bottom:8px;cursor:pointer;font-size:14px;font-weight:500;
}
.item-lista small{margin-left:auto;font-family:var(--dados);font-size:10px;color:var(--gelo)}
a.item-lista{text-decoration:none;color:inherit}
a.item-lista small{color:var(--glacial);font-weight:600}
/* E-mail, WhatsApp, senha: sem sessão não há conta para editar. Mesma
   régua do .cartao.travado — opacidade menor, cursor normal — para
   dizer "isto existe, mas agora não" em vez de sumir ou ficar mudo. */
.item-lista.travado{opacity:.55;cursor:default}
/* Apagar a conta / sair dela, sem sessão: mesma régua de cima — pedido
   de Gabrielle (12/9/2026). Botão, não item de lista, por isso a classe
   própria em vez de reaproveitar .item-lista.travado. */
.cta.travado{opacity:.55;cursor:default}
.entrada-texto{
  width:100%;border:0;background:none;padding:0;margin-top:6px;
  font-family:var(--corpo);font-size:15px;font-weight:600;color:var(--noite);
}
.entrada-texto::placeholder{color:#B6C3CE;font-weight:500}
.entrada-texto:focus{outline:none}
.ficha-linha:focus-within{background:#F8FBFD}
.ajuda{
  display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:8px;
  font-family:var(--dados);font-size:9px;color:var(--gelo);letter-spacing:.05em;
}
.ajuda .alerta{color:var(--vermelho);font-weight:600}
/* "APARECE NA BUSCA" saiu daqui (pedido de Gabrielle, 11/9/2026) e
   sobrou só o contador de caracteres — sozinho, `space-between` jogava
   ele para a esquerda (é o item único, sem outro para abrir vão entre
   os dois). Margem automática vence `justify-content` e devolve o
   contador para a direita, onde sempre esteve. */
#sobre-conta{margin-left:auto}
.empilhado{display:flex;flex-direction:column;gap:7px;margin-top:8px}
.opcao.alinhada{text-align:left;padding:11px 13px}
.opcao.alinhada b{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.01em}
.opcao.alinhada i{
  display:block;font-style:normal;font-family:var(--dados);font-size:9px;
  color:var(--gelo);margin-top:3px;letter-spacing:.03em;
}
.opcao.alinhada[data-on="1"] i{color:rgba(255,255,255,.62)}

/* ═══════════════ MARCA ═══════════════ */

/* ---------- marca ---------- */
.logo{height:25px;width:116px}
.logo,.marca-capa,.logo-fim{background:var(--logo) left center/contain no-repeat}
.barra-topo.escura{background:var(--noite);border-bottom-color:#16202B}
.barra-topo.escura .chip-idioma{
  background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.18);color:#D5E1EC;
}
.barra-topo.escura .avatar-topo{background:#fff;color:var(--noite)}
.marca-capa{position:absolute;top:47px;right:20px;height:15px;width:70px;opacity:.6;z-index:4}
.logo-fim{height:19px;width:88px;margin:0 auto;opacity:.45;background-position:center}

/* ================= modo aplicativo ================= */
html,body{height:100%;overscroll-behavior-y:none}
body{
  padding:0;background:var(--neve);min-height:100dvh;display:block;
  -webkit-user-select:none;user-select:none;
}
.aparelho{
  width:100%;max-width:none;height:100dvh;height:100svh;
  border-radius:0;padding:0;box-shadow:none;background:var(--neve);
}
.vidro{border-radius:0;height:100%}

.barra-topo{padding:calc(14px + env(safe-area-inset-top)) 20px 12px}
#entrar{padding:calc(56px + env(safe-area-inset-top)) 24px 40px}
.capa .voltar{top:calc(16px + env(safe-area-inset-top))}
.selo-ok{margin-top:calc(30px + env(safe-area-inset-top))}

.abas{padding:9px 4px calc(10px + env(safe-area-inset-bottom))}
.tela{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
.tela.com-rodape{padding-bottom:calc(126px + env(safe-area-inset-bottom))}
.rodape-fixo,.barra-selecao{padding-bottom:calc(14px + env(safe-area-inset-bottom))}

/* alvos de toque e campos legíveis no celular */
input,textarea,select{font-size:16px}
.entrada-texto,.escolha,.data-campo input{font-size:16px}
.area{font-size:15px}
button{touch-action:manipulation}
@media (min-width:520px){
  .aparelho{max-width:480px;margin:0 auto;box-shadow:0 0 0 1px var(--linha)}
}

/* ---------- conta: trocar contato e apagar ---------- */
/* Texto explicativo dentro das janelas. Menor e mais claro que o corpo:
   é contexto, não instrução. */
.nota-modal{
  margin-top:14px;font-family:var(--dados);font-size:12.5px;
  line-height:1.5;color:var(--gelo);
}

/* O botão que apaga não pode parecer igual ao que salva. */
/* A cor vem escrita e não da variável --vermelho: havia uma primeira
   definição usando a variável, mais acima, que esta sobrescrevia. O
   #B32B22 é o que sempre apareceu na tela; o --vermelho (#D6382F) nunca
   chegou a ser visto num botão de perigo. */
.cta.perigo{background:#B32B22;color:#fff;border:0}
.cta.perigo:active{background:#8F2019}
.cta.perigo:disabled{background:#E3B5B1}

/* "Apagar minha conta" fica na conta, junto de "Sair" — discreto, porque
   ninguém procura por ele com pressa. */
.cta.claro.apagar{color:#B32B22;border-color:#F0D2CF;margin-bottom:9px}

/* Avaliação já enviada: vira registro, não continua sendo convite. */
.mini-cta.feito{
  background:#EDF2F7;color:var(--gelo);border-color:var(--linha);
  cursor:default;letter-spacing:.02em;
}

/* ---------- aula cancelada ---------- */
/* Não é uma aula anterior: é uma que não vai acontecer. Precisa parecer
   diferente sem gritar — quem chega aqui já levou a má notícia.
   Serve para as duas listas, a do professor e a do próprio aluno. */
.aula-cancelada{
  display:flex;align-items:flex-start;gap:12px;padding:14px;
  border:1px solid #F0D2CF;border-radius:14px;background:#FFF7F6;
  margin-bottom:9px;
}
.aula-cancelada .retrato{
  width:40px;height:40px;border-radius:12px;background-color:#243447;
  flex-shrink:0;filter:grayscale(1);opacity:.55;
}
.aula-cancelada b{display:block;font-size:14px;font-weight:600;color:var(--noite)}
.aula-cancelada span{
  display:block;font-family:var(--dados);font-size:11.5px;
  color:var(--gelo);margin-top:2px;
}
/* O selo e o botão dividem a coluna da direita. A regra do selo abaixo
   precisa zerar o margin-left:auto que ele tinha quando era filho direto
   do cartão — agora quem empurra para a direita é a coluna. */
.aula-cancelada .acoes-aula{
  display:flex;flex-direction:column;align-items:flex-end;gap:7px;
  margin-left:auto;flex-shrink:0;
}
.aula-cancelada .selo{
  margin-left:0;flex-shrink:0;
  font-family:var(--dados);font-size:10px;font-weight:700;
  color:#B32B22;letter-spacing:.06em;white-space:nowrap;
}
.aula-cancelada .acoes-aula .mini-cta{margin-left:0;white-space:nowrap}
.aula-cancelada .devolvido{
  display:block;font-family:var(--dados);font-size:11px;
  color:#1E7A4B;margin-top:4px;font-weight:600;
}
/* Sem devolução não é uma variação do verde: é o contrário dele. Ficar
   verde-claro faria a pessoa ler rápido e entender que recebeu algo. */
.aula-cancelada .devolvido.nada{color:#B32B22}
/* A ORIGEM — pedido de Luke, 15/9/2026: professor / saldo não pago /
   cliente dentro do prazo / cliente fora do prazo. Mais peso que a regra
   crua abaixo (é a pergunta que a pessoa faz primeiro, "por que foi
   cancelada"), mas menos que o valor devolvido — por isso var(--noite),
   não uma cor de estado como o verde/vermelho do devolvido. */
.aula-cancelada .origem-cancel{
  display:block;font-family:var(--dados);font-size:11px;font-weight:600;
  color:var(--noite);margin-top:4px;
}
/* A regra que valeu, em voz baixa. Ela existe para quem for conferir
   depois por que o valor foi aquele — não para ser lida de passagem. */
.aula-cancelada .regra-cancel{
  display:block;font-family:var(--dados);font-size:10px;
  color:var(--gelo);margin-top:3px;letter-spacing:.03em;
}

/* ---------- semana com dias já vendidos ---------- */
/* Continua clicável: marcar ou desmarcar só diz se ele quer receber
   pedido. O que muda é a cor de fundo, como em qualquer semana — o
   verde fica no número e na borda, contando quantos dias já vendeu.

   As duas regras abaixo precisam citar data-on. Sem isso o verde vencia
   a regra de "marcada" por vir depois no arquivo, e o professor clicava
   sem ver nada mudar. */

/* desmarcada, com dias vendidos */
.semana-btn[data-vendidos][data-on="0"]{
  background:#EAF4EE;color:#1E7A4B;border-color:#BFE0CC;
}
/* marcada, com dias vendidos: escura como as outras marcadas */
.semana-btn[data-vendidos][data-on="1"]{
  background:var(--noite);color:#fff;border-color:var(--noite);
}
.semana-btn[data-vendidos]{position:relative}
.semana-btn[data-vendidos]::after{
  content:attr(data-vendidos);
  position:absolute;top:2px;right:5px;
  font-family:var(--dados);font-size:9px;font-weight:700;
}
.semana-btn[data-vendidos][data-on="0"]::after{color:#1E7A4B}
.semana-btn[data-vendidos][data-on="1"]::after{color:#7FD1A3}

/* semana cheia: os sete dias vendidos, nada sobra */
.semana-btn[data-vendidos="7"][data-on="0"]{
  background:#CFE6DA;color:#14603A;border-color:#A9D4BE;
}

.aviso-vendidas{
  display:none;margin-top:12px;padding:11px 13px;border-radius:12px;
  background:#EAF4EE;border:1px solid #BFE0CC;
  font-family:var(--dados);font-size:12px;line-height:1.5;color:#1E7A4B;
  white-space:pre-line; /* mesmo motivo do .aviso: preserva o \n do texto fr */
}
.aviso-vendidas[data-on="1"]{display:block}

/* ---------- comprovante da reserva ---------- */
/* Parece documento, não tela de app: fundo branco, borda seca, sem
   sombra e sem canto muito arredondado. Quem recebe isso por e-mail
   precisa reconhecer como papel. */
.documento{
  background:#fff;border:1px solid var(--linha);border-radius:10px;
  padding:20px 18px;
}
.doc-topo{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;padding-bottom:14px;margin-bottom:6px;
  border-bottom:2px solid var(--noite);
}
.doc-marca{font:800 18px/1 Georgia,serif;color:var(--noite)}
.doc-marca span{color:#3FA8DC}
.doc-tipo{
  font-family:var(--dados);font-size:9.5px;font-weight:700;
  letter-spacing:.09em;color:var(--gelo);text-align:right;
}
.doc-secao{
  /* Maior — pedido de Gabrielle (11/9/2026): "deixa os titulos maior:
     quem contratou, o serviço, o pagamento, politica de cancelamento".
     Era 9.5px, do tamanho do rótulo do CNPJ no topo — pequeno demais
     para separar as quatro seções do comprovante. */
  font-family:var(--dados);font-size:12.5px;font-weight:700;
  letter-spacing:.09em;color:var(--gelo);
  margin-top:18px;padding-bottom:5px;border-bottom:1px solid var(--linha);
}
.doc-linha{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:9px 0;border-bottom:1px solid #F0F3F6;
}
.doc-linha span{
  font-family:var(--dados);font-size:11px;color:var(--gelo);
  white-space:nowrap;
}
.doc-linha b{font-size:13.5px;font-weight:600;text-align:right;color:var(--noite)}

/* "Valor total" e "Valor pago" em negrito — pedido de Gabrielle
   (11/9/2026), só essas duas frases, não todo rótulo do comprovante.
   `[data-i18n=...]` e não uma classe nova: o atributo já existe, fica em
   português mesmo em francês/inglês (é a CHAVE de tradução, idiomas.js
   troca só o texto visível), e a seleção não depende de mexer no HTML. */
.doc-linha span[data-i18n="Valor total"],
.doc-linha span[data-i18n="Valor pago"]{
  font-weight:700;
}

/* SINAL E SALDO, dentro de "Valor pago" — menor e sem a linha divisória
   própria, porque são o DETALHE do total logo acima, não uma pergunta
   nova. Repetir o mesmo peso visual do total faria a lista parecer um
   segundo bloco de perguntas, quando é a mesma. */
.doc-linha-sub{border-bottom:none;padding:2px 0}
.doc-linha-sub span{font-size:10px}
.doc-linha-sub b{font-size:11.5px;font-weight:500;color:var(--gelo)}
/* O real ao lado do euro, em cada parcela — menor e mais apagado: o
   euro é o valor combinado, o real é só a conferência de quanto saiu do
   cartão/PIX naquele câmbio do dia. Pedido de Gabrielle (10/9/2026,
   terceira rodada). */
.doc-parcela-brl{font-size:9.5px;font-weight:400;opacity:.72}
.doc-parcela-forma{font-size:9.5px;font-weight:400;opacity:.72}

/* A política de cancelamento por extenso, embaixo do pagamento — texto
   corrido, não par de rótulo/valor como .doc-linha, porque a frase tem
   duas linhas com <br> dentro. */
.doc-politica{
  font-family:var(--dados);font-size:11px;line-height:1.6;
  color:var(--noite);margin:6px 0 0;
}

.doc-rodape{margin-top:18px;padding-top:14px;border-top:1px solid var(--linha)}
.doc-rodape p{
  font-family:var(--dados);font-size:10.5px;line-height:1.5;
  color:var(--gelo);margin:0 0 6px;
}

/* Quem emitiu o documento: razão social, CNPJ e endereço.
   `pre-line` porque o extrato manda as duas linhas num textContent só, e
   o comprovante usa <span> separados — os dois caem aqui.
   Um pouco mais apagado que o resto do rodapé: identifica, não compete
   com o conteúdo do papel. */
.doc-empresa{
  font-family:var(--dados);font-size:10px;line-height:1.55;
  color:var(--gelo);opacity:.85;margin:0 0 6px;white-space:pre-line;
}
/* MAIS RESPIRO ANTES DO CNPJ/NOME — pedido de Gabrielle (10/9/2026,
   segunda rodada): no comprovante, `.doc-empresa` vem logo colado no
   parágrafo de cima (`.doc-rodape p`, que reseta o margin-top). Precisa
   de `.doc-rodape .doc-empresa` — duas classes — para ganhar de
   `.doc-rodape p` (classe + tag), senão o margin-top daqui não vencia.
   Só dentro do rodapé do documento: a mesma classe na tela de entrar
   (`#entrar-empresa`) já tem respiro de sobra vindo do `.miudo` acima,
   e não é o caso que ela pediu. */
.doc-rodape .doc-empresa{margin-top:16px}

/* O COMENTÁRIO ACIMA DIZIA "no comprovante e no extrato" e só cobria o
   comprovante — pedido de Gabrielle, 11/9/2026, com print: no extrato do
   professor (`#ext-empresa`) o texto continuava colado. O extrato NUNCA
   embrulhou `.doc-empresa` num `.doc-rodape` (não tem o traço divisório
   nem o resto do rodapé do documento, só a legenda e o rodapé da
   empresa soltos em `.bloco`) — por isso a regra de cima nunca alcançava
   ali. Regra própria, pelo mesmo valor, para o único outro lugar onde
   isto aparece perto de texto: */
#ext-empresa{margin-top:16px}
.doc-empresa b{display:block;font-weight:600}
.doc-empresa span{display:block}

/* ---------- linha do extrato ---------- */
/* cursor:pointer porque a linha abre o extrato daquela aula. Estava numa
   segunda definição, 180 linhas abaixo, e ninguém que lesse esta regra
   saberia que a linha era clicável. */
.linha-extrato{
  cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 14px;border:1px solid var(--linha);border-radius:12px;
  background:#fff;margin-bottom:8px;
}
.linha-extrato b{display:block;font-size:13.5px;font-weight:600}
.linha-extrato span{
  display:block;font-family:var(--dados);font-size:11px;
  color:var(--gelo);margin-top:2px;
}
.linha-extrato .direita{text-align:right;flex-shrink:0}
.linha-extrato .direita span{font-weight:700;letter-spacing:.04em}
.linha-extrato .direita span.pago{color:#1E7A4B}

/* =====================================================================
   ESTADOS DE ESPERA
   =====================================================================
   Esqueleto em vez de roda girando: os cartões deste app têm forma
   conhecida, então dá para reservar o espaço exato. Assim nada salta
   quando os dados chegam, e a pessoa já entende o que vai aparecer.
   ===================================================================== */

[data-estado="carregando"] .esq{
  border:1px solid var(--linha);border-radius:14px;background:#fff;
  padding:14px;margin-bottom:9px;display:flex;gap:12px;align-items:center;
}
.esq-bloco{
  background:linear-gradient(90deg,#EDF2F7 25%,#E1E8EF 37%,#EDF2F7 63%);
  background-size:400% 100%;
  animation:esqueleto 1.4s ease infinite;
  border-radius:6px;
}
/* respeita quem pediu menos animação no sistema */
@media (prefers-reduced-motion: reduce){
  .esq-bloco{animation:none;background:#EDF2F7}
}
@keyframes esqueleto{
  0%{background-position:100% 50%}
  100%{background-position:0 50%}
}
.esq-foto{width:46px;height:46px;border-radius:14px;flex-shrink:0}
.esq-texto{flex:1;display:flex;flex-direction:column;gap:7px}
.esq-linha{height:11px}
.esq-linha.larga{width:62%}
.esq-linha.media{width:84%}
.esq-linha.curta{width:38%}

/* a falha: um esqueleto que gira para sempre é pior que erro nenhum,
   porque a pessoa não sabe se espera ou desiste */
.falha{
  border:1px solid #F0D2CF;border-radius:14px;background:#FFF7F6;
  padding:18px 16px;text-align:center;
}
.falha p{
  margin:0 0 12px;font-family:var(--dados);font-size:12.5px;
  line-height:1.5;color:#B32B22;
}
.falha button{
  border:1px solid #E3B5B1;background:#fff;color:#B32B22;
  border-radius:10px;padding:9px 18px;
  font-family:var(--dados);font-size:12px;font-weight:700;cursor:pointer;
}
.falha button:active{background:#FFF0EE}

/* ---------- busca sem resultado ---------- */
/* Não é um erro: é uma combinação que não existe. O tom é de ajuda,
   não de aviso vermelho. */
.sem-resultado{
  margin-top:4px;padding:18px 16px;border-radius:14px;
  background:#F4F8FB;border:1px solid var(--linha);
}
/* SEM O ".titulo" DE ANTES — pedido de Luke, 15/9/2026: a frase que
   usava essa classe ("Ninguém atende essa combinação.") saiu do
   telaSemResultado() por repetir o título da tela, fora desta função.
   Sem outro `<p class="titulo">` dentro de `.sem-resultado`, a regra
   ficaria sem nada para estilizar. */
.sem-resultado p{
  margin:0 0 4px;font-family:var(--dados);font-size:12.5px;
  line-height:1.55;color:var(--gelo);
}

/* o mesmo aviso, na tela de perfil: ali ele precisa de fundo, porque
   não está dentro de um cartão */
#perfil-trava{display:none}
#perfil-trava[data-on="1"]{
  display:block;margin:0 0 10px;padding:11px 13px;border-radius:12px;
  background:#FFF7F6;border:1px solid #F0D2CF;color:#B32B22;
}

/* ADICIONADO — pedido de Luke (21/9/2026): frase de confiança na busca
   ("todos os professores são certificados"), logo abaixo da contagem.
   Mesma paleta verde de `.aviso-sucesso`/`.reservado.sucesso` — reforço
   positivo, não instrução nem alerta. */
.selo-certificados{
  margin:0 20px 10px;padding:9px 13px;border-radius:12px;
  background:#E9F7EF;border:1px solid #BFE6CE;color:#146A3B;
  font-family:var(--dados);font-size:11.5px;font-weight:600;line-height:1.4;
}

/* todos os resultados bloqueados pelo limite */
.aviso-todos{display:none}
.aviso-todos[data-on="1"]{
  display:block;margin:4px 20px 12px;padding:13px 15px;border-radius:12px;
  background:#FFF7F6;border:1px solid #F0D2CF;
  font-family:var(--dados);font-size:12.5px;line-height:1.5;color:#B32B22;
}

/* quem ficou de fora do pedido por causa do limite */
.aviso-barrados{display:none}
.aviso-barrados[data-on="1"]{
  display:block;margin-top:14px;padding:11px 13px;border-radius:12px;
  background:#FFF8F1;border:1px solid #F0DCC4;
  font-family:var(--dados);font-size:12px;line-height:1.5;color:#8A6414;
  text-align:left;
}

/* ---------- nota do professor ---------- */
/* No cartão do aluno, ao lado da taxa de resposta. */
.nota-card{
  display:inline-flex;align-items:center;gap:4px;margin-left:8px;
  font-family:var(--dados);font-size:11px;font-weight:700;color:var(--noite);
}
.nota-card i{font-style:normal;font-weight:500;color:var(--gelo)}

/* Do lado do professor: quantas avaliações faltam para ela ficar visível. */
.nota-aviso{display:none}
.nota-aviso[data-on="1"]{
  display:block;margin-top:10px;padding:10px 12px;border-radius:11px;
  background:#F4F8FB;border:1px solid var(--linha);
  font-family:var(--dados);font-size:11.5px;line-height:1.45;color:var(--gelo);
}

/* ---------- um bloco por pedido ---------- */
/* Com dois pedidos correndo, a pessoa precisa ver onde um termina e o
   outro começa — senão os cartões viram uma lista sem sentido. */
/* ---------- um bloco por pedido ---------- */
/* Antes os pedidos eram separados só por uma linha fina, e com dois
   correndo os cartões viravam uma lista só. Agora cada pedido é um
   painel: os cartões brancos ficam DENTRO dele, e fica claro onde um
   termina e o outro começa. */
.bloco-pedido{
  display:block;margin-bottom:18px;padding:14px 12px 4px;
  background:#EEF3F8;border:1px solid #DCE5EE;border-radius:18px;
}
.bloco-pedido:last-child{margin-bottom:4px}

/* ---------- cabeçalho de cada bloco de pedido ---------- */
/* Ele separa um pedido do outro numa tela que pode ter três correndo ao
   mesmo tempo. Era do tamanho de uma legenda, e com dois pedidos abertos
   ninguém via onde um terminava e o outro começava. Agora tem o corpo de
   um título: a estação e a data em fonte de display, e a contagem
   embaixo. */
.cabeca-pedido{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:0 4px 13px;margin-bottom:14px;
  border-bottom:2px solid #C4D3E1;
}
/* O número do pedido, acima da estação. É o que o cliente lê ao
   telefone, então precisa ser copiável e legível — mas não disputa com o
   nome da estação, que é o que ele reconhece de relance. */
.protocolo-pedido{
  display:block;font-family:var(--dados);font-size:10px;
  letter-spacing:.11em;color:var(--gelo);margin-bottom:3px;
  text-transform:uppercase;
}
.cabeca-pedido b{
  display:block;font-family:var(--display);
  font-variation-settings:'wdth' 112,'wght' 700;
  font-size:16.5px;letter-spacing:-.01em;text-transform:none;
  color:var(--noite);line-height:1.25;
}
.cabeca-pedido span{
  display:block;font-family:var(--dados);font-size:11.5px;
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--gelo);margin-top:5px;
}
.cabeca-pedido .mini-cta{flex-shrink:0;margin-top:2px}

/* E um respiro maior entre blocos, para o segundo pedido não parecer
   continuação do primeiro. Substitui o margin-bottom de 18px em vez de
   somar com ele: dois espaçamentos concorrentes é como se acaba com um
   vão diferente conforme a posição do bloco na lista. */
.bloco-pedido + .bloco-pedido{margin-top:12px}

/* dentro do painel o cartão precisa de contorno mais firme, senão o
   branco sobre cinza claro perde a borda. E o último não leva margem,
   senão sobra um vão embaixo. */
.bloco-pedido .cartao{border-color:#CFDBE7}
.bloco-pedido .cartao:last-child{margin-bottom:10px}

/* ---------- grupo "orçamentos fechados" ---------- */
/* Retirado, recusado e vencido têm em comum a mesma coisa: nenhuma ação
   sobra para o aluno tomar ali. Cada um virava cartão inteiro, do
   tamanho de um cartão normal, só para dizer "isto acabou" — e é essa
   repetição de espaço que o grupo resolve. Os três juntos viram uma
   linha de botão, o tamanho de UM item comum para o grupo inteiro. */
.grupo-fechados-cabeca{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;margin:0 0 8px;padding:11px 13px;
  background:#fff;border:1px solid var(--linha);border-radius:12px;
  font-family:var(--dados);font-size:12.5px;letter-spacing:.03em;
  color:var(--gelo);text-align:left;cursor:pointer;
}
.grupo-fechados-cabeca span{text-transform:uppercase}
.seta-grupo{width:16px;height:16px;flex-shrink:0;transition:transform .15s}
.seta-grupo.aberta{transform:rotate(180deg)}

/* A lista aberta: só o nome, um por linha — nada de retrato, taxa ou
   nota. É o mesmo motivo de o grupo existir: informação que não muda a
   decisão de ninguém não precisa do espaço de quem muda. */
.grupo-fechados-lista{
  margin:-4px 0 8px;padding:2px 13px;
  background:#fff;border:1px solid var(--linha);border-radius:12px;
}
.fechado-linha{
  padding:9px 0;font-family:var(--display);font-size:14px;
  color:var(--noite);
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.fechado-linha + .fechado-linha{border-top:1px solid var(--linha)}
/* o que aconteceu com aquele professor, do lado do nome: o valor que
   ele mandou (mesmo cálculo do cartão ativo — com a taxa embutida, não
   o valor_prof cru), ou por que não há valor nenhum. */
.fechado-status{font-family:var(--dados);font-size:11.5px;color:var(--gelo);white-space:nowrap}
.fechado-status.valor{font-family:var(--display);font-size:14px;font-weight:600;color:var(--noite)}
/* "Pago" — PEDIDO DE LUKE, 19/9/2026. O único dos quatro rótulos que é
   uma notícia boa, então não usa o cinza neutro dos outros três — o
   mesmo verde de `.reservado.sucesso` (a confirmação de conta criada),
   reaproveitado em vez de inventar um terceiro tom de verde no app. */
.fechado-status.pago{font-family:var(--display);font-size:14px;font-weight:600;color:#146A3B}

/* dois botões na aula anterior: comprovante e avaliar */
.aula-antiga .acoes-aula{
  display:flex;flex-direction:column;gap:6px;margin-left:auto;flex-shrink:0;
}
.aula-antiga .acoes-aula .mini-cta{margin-left:0;white-space:nowrap}

.linha-extrato:active{background:#F4F8FB}
.linha-extrato .seta{
  font-style:normal;color:var(--gelo);font-size:19px;
  margin-left:6px;flex-shrink:0;
}

/* ---------- modalidade ---------- */
/* Antes ela era um texto cinza ao lado da estação, do mesmo tamanho de
   tudo. Ski e snowboard são aulas diferentes, com equipamento e cabeça
   diferentes — ele precisa ver de relance qual é.
   Um tamanho só, em todo lugar: havia 10,5px no cartão e 12px no pé da
   aula, e ver a mesma informação em dois tamanhos faz parecer que uma
   das duas está errada. */
.selo-disc{
  display:inline-block;padding:4px 10px;border-radius:7px;
  font-family:var(--dados);font-size:12px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
}
.selo-disc.ski{background:#E7F0FA;color:#1D5B93}
.selo-disc.snowboard{background:#F3EAFB;color:#6B3B9E}

/* A faixa "onde e quando" pinta todo span de cinza 10px, e essa regra
   tem mais peso que .selo-disc — dois seletores contra um. Sem esta
   linha a etiqueta entra na faixa com fundo colorido e letra cinza
   miúda, que é pior do que os dois estados que ela substituiu.
   É o mesmo tropeço das mensagens de erro do cadastro e da semana
   verde: o JavaScript certo, engolido pelo CSS. */
.onde-quando .selo-disc{
  font-size:12px;letter-spacing:.04em;
  color:inherit;
}
.onde-quando .selo-disc.ski{color:#1D5B93}
.onde-quando .selo-disc.snowboard{color:#6B3B9E}

/* a política escolhida, no pé do cartão */
.linha-politica{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-top:11px;padding-top:11px;border-top:1px solid var(--linha);
}
.linha-politica span{
  font-family:var(--dados);font-size:10px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--gelo);
}
.linha-politica b{font-size:12.5px;font-weight:600;text-align:right}

/* modalidade acima do nível, no pé da aula do professor */
/* Não ajusta mais o tamanho da etiqueta: os 12px que este bloco pedia
   viraram o padrão, e repetir aqui só criaria dois lugares para mudar. */
.disc-nivel{display:flex;flex-direction:column;gap:4px;align-items:flex-start}

/* aula em andamento: não se cancela, mostra o estado */
.em-curso{
  font-family:var(--dados);font-size:10px;font-weight:700;
  letter-spacing:.06em;color:#1D5B93;background:#E7F0FA;
  padding:5px 10px;border-radius:8px;white-space:nowrap;
}

/* busca sem resultado: a contagem deixa de ser legenda e vira a notícia */
.contagem.nenhum{
  font-family:var(--corpo);font-size:15px;font-weight:600;
  color:var(--noite);letter-spacing:0;text-transform:none;
  padding-bottom:4px;
}

/* orçamento já alterado: o botão vira registro */
.ja-alterado{
  font-family:var(--dados);font-size:9.5px;font-weight:700;
  letter-spacing:.06em;color:var(--gelo);
  padding:5px 9px;border:1px solid var(--linha);border-radius:8px;
  white-space:nowrap;
}

/* ---------- foto de perfil ---------- */
/* ---------- conta bancária ---------- */
/* O IBAN é lido caractere a caractere quando se confere com o extrato.
   Fonte de largura fixa e mais espaço entre as letras, para o 0 não
   virar O e o 1 não virar l. */
#cb-iban, #cb-bic{
  font-family:var(--dados);letter-spacing:.08em;text-transform:uppercase;
}

/* A faixa de estado do perfil do professor. Entrar no ar é automático
   quando o cadastro fecha; sem esta faixa, "automático" seria o mesmo
   que invisível. O data-no diz se ele está aparecendo. */
.faixa-no-ar{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:12px 14px;border-radius:12px;margin-top:16px;
  background:#3A2A2A;color:#E8C9C9;font-size:13px;font-weight:600}
.faixa-no-ar[data-no="1"]{background:#22352B;color:#BCE3CB}
.faixa-no-ar .cta{width:auto;margin:0;padding:9px 16px;font-size:13px;flex-shrink:0}

/* Some depois de gravar. Vermelho fica, porque erro que some não é aviso. */
.salvo-aviso{font-size:12px;color:#8FA3B3;margin-top:8px;text-align:right;
  opacity:0;transition:opacity .25s}
.salvo-aviso[data-estado="salvando"]{opacity:1}
.salvo-aviso[data-estado="erro"]{opacity:1;color:#E88}

/* MENOS VÃO ANTES DO QUADRO, NA CONTA DO PROFESSOR — pedido de
   Gabrielle (11/9/2026, com print): `#sobre-salvo` fica com opacity:0 o
   tempo todo, exceto gravando/com erro — mas continua ocupando uma linha
   inteira de altura ali embaixo da legenda, de propósito (o "Some depois
   de gravar" ali em cima: reservar o espaço evita que o quadro pule
   quando ele aparece com fade). Nesta tela em especial, sozinho entre a
   legenda e o quadro, os 8px de margem dele mais essa linha invisível
   mais os 12px de margem do quadro somavam um vão grande demais. Só
   aqui — `.salvo-aviso` e `.ficha` valem para outras telas também
   (ex.: `#perfil-salvo`, que não teve essa queixa).
   O ID ERA `#sobre-salvo` — órfão desde que o "Sobre mim" (textarea
   livre) virou "Minhas especialidades" (PARTE de 19/9/2026, tags
   fechadas) e o aviso de salvar ganhou o id `#especialidades-salvo`. A
   regra parou de bater em qualquer elemento, mas continuou no CSS sem
   dar erro — achado só agora, quando Luke reclamou de vão grande demais
   entre "Visível para os clientes." e o quadro branco, na MESMA tela
   que esta regra sempre foi pensada para. */
#especialidades-salvo{margin-top:2px}
#especialidades-salvo + .ficha{margin-top:6px}

/* O campo de escrever do chat. Fica fora do bloco que rola, colado
   embaixo, para não sumir quando a conversa fica longa. */
.chat-escrever{display:flex;gap:8px;align-items:flex-end;padding:10px 14px;
  border-top:1px solid var(--linha);background:var(--papel)}
.chat-escrever textarea{flex:1;resize:none;max-height:96px;padding:10px 12px;
  border:1px solid var(--linha);border-radius:12px;font:inherit;font-size:14px;
  line-height:1.4;background:#fff;color:var(--noite)}
.chat-escrever textarea:focus{outline:none;border-color:var(--noite)}
.chat-enviar{flex-shrink:0;width:40px;height:40px;border:0;border-radius:12px;
  background:var(--noite);color:#fff;display:flex;align-items:center;
  justify-content:center;cursor:pointer}
.chat-enviar:disabled{opacity:.45;cursor:default}

/* Quando a janela fecha, o lugar do campo diz por quê. Tela sem onde
   escrever e sem explicação parece defeito. */
.chat-fechado{padding:14px;border-top:1px solid var(--linha);
  font-size:12.5px;line-height:1.5;color:var(--gelo);text-align:center}

/* Quantas mensagens esperam naquela conversa. Fica no botão de falar,
   dentro do cartão da aula — a lista de aulas é a lista de conversas. */
.selo-msg{display:inline-grid;place-items:center;min-width:18px;height:18px;
  padding:0 5px;margin-left:7px;border-radius:9px;background:var(--alerta,#C4453C);
  color:#fff;font-family:var(--dados);font-size:11px;font-weight:700;line-height:1}

/* O grupo da aula que está acontecendo agora, no topo das aulas do
   professor. Verde-noite para se distinguir de "próximas" sem gritar. */
.grupo-titulo.g-agora::before{background:#3E8E5A}

/* Pelo menos um idioma é obrigatório, e o banco exige o mesmo. Por isso
   este aviso é vermelho: ele impede de entrar no ar, ao contrário da
   versão anterior, que só dizia de quais buscas ele saía. */
.aviso-idioma{margin-top:8px;font-size:12.5px;line-height:1.5;
  color:var(--gelo);font-family:var(--dados)}
.aviso-idioma[data-obrigatorio="1"]{color:#C4453C;font-weight:600}

/* =====================================================================
   O FORMULÁRIO DO CARTÃO
   =====================================================================
   `.pagamento-cartao`, e NÃO `.cartao` — `.cartao` já é o nome da classe
   do cartão de professor na busca, do cartão de pedido e do de aula (ao
   menos oito lugares no index.html). A primeira versão deste bloco usava
   `.cartao`, e a regra `display:none` daqui embaixo apagava TODOS eles:
   a busca mostrava "1 professor atende esse período" e nenhum cartão
   aparecia, porque os cartões de professor não têm `data-on` nenhum — só
   o `[data-on="1"]` reacende, e eles nunca tinham esse atributo para
   começar. A contagem vinha certa porque ela lê o mesmo array que o
   `.map()` usa para desenhar; só o CSS é que escondia o resultado.
   Achado testando `criar_aula` pelo app, não por leitura de código — é a
   mesma família de "a tela diz uma coisa, o sistema faz outra", só que
   ao contrário: aqui o JS estava certo, e uma classe reaproveitada
   silenciou o resultado.

   O bloco inteiro some quando a forma escolhida é PIX, em vez de ficar
   esmaecido: campo de cartão visível numa compra por PIX é convite a
   digitar à toa. Quem escreve o `data-on` é atualizarPagamento(), a
   mesma função que troca os números da tela quando a forma muda. */
.pagamento-cartao{display:none;margin-top:16px;border:1px solid var(--linha);border-radius:14px}
.pagamento-cartao[data-on="1"]{display:block}

/* Validade e CVV lado a lado: são curtos, e ficam na mesma linha do
   cartão físico. A borda de baixo do primeiro sai, senão haveria duas
   linhas empilhadas onde o desenho pede uma. */
.pagamento-cartao .dupla{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--linha)}
.pagamento-cartao .dupla .campo-form{border-bottom:0}
.pagamento-cartao .dupla .campo-form:first-child{border-right:1px solid var(--linha)}

/* O CPF some quando a conta já tem um gravado. `data-cpf` e não
   `data-on`: a mesma div carrega o `data-erro` que marcarErro() escreve,
   e dois atributos de estado com nomes parecidos na mesma tag foi como
   telas de erro já se confundiram aqui antes.

   O CAMPO VALE PARA AS DUAS FORMAS DE PAGAR — Pix incluso — e por isso
   a regra não fica presa a `.pagamento-cartao`: o campo mora fora do
   bloco do cartão. Ver o comentário no HTML, em cima do campo, sobre o
   porquê: o PagBank recusa QUALQUER cobrança sem `customer.tax_id`. */
#cc-cpf-erro[data-cpf="0"], #s-cc-cpf-erro[data-cpf="0"]{display:none}

/* O bloco em si FICA sempre visível quando o cartão está escolhido —
   é o CONTEÚDO dele que troca: uma dica ("aparece assim que você
   digitar o cartão") até o BIN trazer a tabela do PagBank, e só então
   o seletor de verdade. Achado de Gabrielle (10/9/2026): o bloco virou
   o PRIMEIRO da tela (comentário no HTML), e escondê-lo inteiro,
   como antes, deixava um vazio logo no topo do cartão — parecia tela
   quebrada, não "ainda não deu tempo".

   BORDA EMBAIXO, não em cima: separa do próximo campo (o número do
   cartão), não do anterior (o nome no cartão, de quando o bloco vinha
   por último). */
.parcelas-escolha{display:block;padding:14px 16px;border-bottom:1px solid var(--linha)}
.parcelas-escolha .parcelas-preenchida{display:none}
.parcelas-escolha[data-on="1"] .parcelas-vazio{display:none}
.parcelas-escolha[data-on="1"] .parcelas-preenchida{display:block}
.parcelas-escolha label{
  font-family:var(--dados);font-size:9px;letter-spacing:.06em;
  color:var(--gelo);font-weight:600;display:block;
}
/* A SETA, pedido de Gabrielle (13/9/2026): sem ela, o campo parecia só
   um texto em negrito, não algo clicável — nada dizia "isto abre".
   Mesmo desenho da seta dos grupos fechados (`.seta-grupo`, acima: mesmo
   path, mesma cor `--gelo`), só que aqui via `background-image` — um
   `<select>` nativo não aceita um `<svg>` filho posicionado por cima. */
.parcelas-escolha select{
  width:100%;border:0;padding:0 24px 0 0;margin-top:7px;
  font-family:var(--corpo);font-size:16px;font-weight:600;color:var(--noite);
  -webkit-appearance:none;appearance:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2378899B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right center/16px 16px;
}
.parcelas-escolha select:focus{outline:none}
.parcelas-escolha small{
  display:block;margin-top:6px;font-family:var(--dados);font-size:10px;
  letter-spacing:.04em;color:var(--gelo);font-weight:600;
}