:root {
  --laranja: #E8720C;
  --laranja-escuro: #C25E00;
  --cinza-texto: #4B4B4B;
  --cinza-claro: #6E6E6E;
  --fundo: #F7F6F3;
  --branco: #FFFFFF;
  --borda: #E4E1DA;
  --verde: #2E8B57;
  --verde-fundo: #E7F5EC;
  --ambar: #B8860B;
  --ambar-fundo: #FBF1DA;
  --azul: #2F6FBF;
  --azul-fundo: #E9F1FB;
  --roxo: #7C4FD1;
  --roxo-fundo: #F1EAFC;
  --vermelho: #C0392B;
  --vermelho-fundo: #FBEAE8;
  --sombra: 0 1px 3px rgba(30, 30, 30, 0.08), 0 1px 2px rgba(30, 30, 30, 0.06);
  --raio: 10px;
}

* { box-sizing: border-box; }

/* Regra global: garante que o atributo "hidden" sempre vença, mesmo
   quando o elemento tem alguma classe com "display" próprio (flex,
   inline-flex, grid...) que empataria em especificidade com o [hidden]
   nativo do navegador e poderia vencer por ordem de declaração. Sem
   isso, cada elemento escondido com uma classe assim precisaria de uma
   regra específica só pra isso — já aconteceu 3 vezes nesse arquivo. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--cinza-texto);
  background: var(--fundo);
}

/* ---------- Autenticação ---------- */
.pagina-auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.cartao-auth {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 40px;
  width: 100%;
  max-width: 400px;
  text-align: center;
}

.logo-auth { width: 220px; margin-bottom: 24px; }

.cartao-auth h1 { font-size: 22px; margin: 0 0 8px; color: var(--cinza-texto); }
.destaque-teste-gratis {
  font-size: 22px;
  font-weight: 800;
  color: var(--verde);
  margin: 4px 0 4px;
  line-height: 1.2;
}
.nota-cobranca-futura {
  font-size: 12px;
  color: var(--cinza-claro);
  margin: 0 0 18px;
}
.subtitulo-auth { font-size: 14px; color: var(--cinza-claro); margin: 0 0 28px; line-height: 1.5; }

.cartao-auth form { text-align: left; display: flex; flex-direction: column; gap: 6px; }
.cartao-auth label { font-size: 13px; font-weight: 600; margin-top: 12px; }
.cartao-auth input, .cartao-auth select, .cartao-auth textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
}
.cartao-auth input:focus, .cartao-auth select:focus, .cartao-auth textarea:focus {
  outline: 2px solid var(--laranja);
  outline-offset: 1px;
  border-color: var(--laranja);
}

/* ---------- Campo de senha com botão de mostrar/ocultar ---------- */
.campo-senha { position: relative; }
.campo-senha input { width: 100%; padding-right: 40px; }
.botao-alternar-senha {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--cinza-claro);
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.botao-alternar-senha:hover { color: var(--laranja-escuro); }
.botao-alternar-senha .icone { width: 17px; height: 17px; }

#bloco-aula-cpf-aluno { display: flex; flex-direction: column; gap: 4px; }
#bloco-aula-cpf-aluno[hidden] { display: none !important; }

/* Lista de sugestões de cidade construída na mão — o <datalist> nativo
   do navegador tem comportamento inconsistente dentro de modais com
   rolagem (e suporte fraco no Safari), então preferimos controlar
   isso 100% por conta própria. Usa position:fixed com a posição
   calculada via JS (getBoundingClientRect do campo) — position:absolute
   comum seria cortado pelo overflow:auto do modal, mesmo com z-index alto. */
.lista-sugestoes-cidade {
  position: fixed; z-index: 300;
  background: var(--branco); border: 1px solid var(--borda); border-radius: 8px;
  max-height: 220px; overflow-y: auto;
  box-shadow: 0 10px 28px rgba(0,0,0,0.16);
}
.lista-sugestoes-cidade[hidden] { display: none !important; }
.item-sugestao-cidade {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 10px 14px; font-size: 14px; font-family: inherit; cursor: pointer; color: var(--cinza-texto);
}
.item-sugestao-cidade:hover, .item-sugestao-cidade.ativo { background: var(--fundo); }

.opcao-lembrar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--cinza-texto);
  cursor: pointer;
}
.opcao-lembrar input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--laranja);
  cursor: pointer;
}

.link-secundario { margin-top: 20px; font-size: 13px; color: var(--cinza-claro); }
.link-esqueci-senha { margin: 4px 0 0; text-align: right; font-size: 12px; }
.link-esqueci-senha a { color: var(--cinza-claro); text-decoration: none; }
.link-esqueci-senha a:hover { color: var(--laranja-escuro); text-decoration: underline; }
.link-secundario a { color: var(--laranja-escuro); font-weight: 600; text-decoration: none; }
.link-secundario a:hover { text-decoration: underline; }

.mensagem-erro { color: var(--vermelho); font-size: 13px; margin: 10px 0 0; }
.mensagem-sucesso { color: var(--verde); font-size: 13px; margin: 10px 0 0; font-weight: 600; }

.topo-acoes-admin { display: flex; align-items: center; gap: 12px; }
.selo-admin {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--cinza-texto);
  color: #fff;
  padding: 4px 10px;
  border-radius: 999px;
}

.botao-link { display: inline-block; text-decoration: none; margin-top: 8px; }

/* ---------- Ícones ---------- */
.icone {
  width: 15px;
  height: 15px;
  vertical-align: -2px;
  flex-shrink: 0;
}
.aba .icone { width: 15px; height: 15px; vertical-align: -3px; margin-right: 2px; }

/* ---------- Botões ---------- */
.botao-primario {
  background: var(--laranja);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.botao-primario:hover { background: var(--laranja-escuro); }

.botao-secundario {
  background: var(--branco);
  color: var(--cinza-texto);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.botao-secundario:hover { background: var(--fundo); }

.botao-icone {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--cinza-claro);
  padding: 4px 6px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.botao-icone:hover { color: var(--laranja-escuro); }
.botao-icone .icone { width: 16px; height: 16px; }

.botao-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #25d366;
  flex-shrink: 0;
  margin-left: 6px;
  vertical-align: middle;
  opacity: 0.85;
}
.botao-whatsapp:hover { opacity: 1; }
.botao-whatsapp .icone { width: 16px; height: 16px; }

/* ---------- Topo ---------- */
.faixa-atendente {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--laranja); color: #fff; font-size: 13.5px; font-weight: 600;
  padding: 10px 16px; text-align: center;
}
/* Precisa ficar DEPOIS (e com especificidade maior, por combinar classe
   + atributo) que a regra acima — senão "display: flex" ali em cima
   empata em especificidade com o [hidden] nativo do navegador e vence
   por vir depois no CSS, ignorando o atributo "hidden" por completo e
   deixando a faixa aparecer mesmo escondida. */
.faixa-atendente[hidden] { display: none !important; }
.faixa-atendente .icone { width: 16px; height: 16px; flex-shrink: 0; }
.faixa-atendente button {
  background: rgba(255,255,255,0.18); color: #fff; border: 1px solid rgba(255,255,255,0.4);
  border-radius: 6px; padding: 4px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer;
  margin-left: 6px;
}
.faixa-atendente button:hover { background: rgba(255,255,255,0.3); }

.topo {
  background: var(--branco);
  border-bottom: 1px solid var(--borda);
}
.topo-conteudo {
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo-topo { height: 44px; }

/* ---------- Menu de perfil (sanduíche) ---------- */
.menu-perfil { position: relative; }
.botao-perfil {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--borda);
  border-radius: 999px;
  padding: 5px 12px 5px 5px;
  cursor: pointer;
  font-family: inherit;
}
.botao-perfil:hover { background: var(--fundo); }
.avatar-perfil-wrap { position: relative; flex-shrink: 0; }
.avatar-perfil {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--azul-fundo);
  color: var(--azul);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.avatar-perfil .icone { width: 15px; height: 15px; }
.badge-alerta-perfil {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--vermelho);
  border: 1.5px solid var(--branco);
}
.nome-instrutor { font-size: 14px; font-weight: 600; color: var(--cinza-texto); }
.icone-chevron { width: 13px; height: 13px; color: var(--cinza-claro); transition: transform 0.15s ease; }
.botao-perfil[aria-expanded="true"] .icone-chevron { transform: rotate(180deg); }

.badge-dias-restantes {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--verde-fundo);
  color: var(--verde);
  white-space: nowrap;
}
.badge-dias-restantes.badge-dias-alerta { background: var(--ambar-fundo); color: var(--ambar); }
.badge-dias-restantes.badge-dias-critico { background: var(--vermelho-fundo); color: var(--vermelho); }

.dropdown-perfil {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: 0 8px 24px rgba(30,30,30,0.12), 0 2px 6px rgba(30,30,30,0.08);
  padding: 8px;
  z-index: 60;
}
.dropdown-perfil-assinatura {
  padding: 12px;
  display: flex;
  justify-content: center;
}
.dropdown-perfil-assinatura .badge-dias-restantes {
  font-size: 13px;
  padding: 6px 16px;
}
.dropdown-perfil-divisor { height: 1px; background: var(--borda); margin: 4px 0; }

.item-dropdown {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--cinza-texto);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.item-dropdown:hover { background: var(--fundo); }
.item-dropdown .icone { width: 16px; height: 16px; color: var(--cinza-claro); }
.item-dropdown-sair { color: var(--vermelho); }
.item-dropdown-sair .icone { color: var(--vermelho); }
.badge-contador-dropdown {
  margin-left: auto;
  background: var(--vermelho);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
}

.aviso-assinatura {
  background: var(--ambar-fundo);
  color: var(--ambar);
  text-align: center;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
}
.link-reabrir-cobranca {
  color: inherit;
  text-decoration: underline;
  font-weight: 700;
  cursor: pointer;
}
.link-reabrir-cobranca:hover { opacity: 0.8; }

/* ---------- Layout principal ---------- */
.conteudo { max-width: 1100px; margin: 0 auto; padding: 24px; }

.abas {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--borda);
  margin-bottom: 20px;
}
.aba {
  background: none;
  border: none;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cinza-claro);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.aba.ativa { color: var(--laranja-escuro); border-bottom-color: var(--laranja); }

.barra-acoes {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
  align-items: center;
}
.barra-acoes-inline { display: flex; gap: 8px; flex-wrap: wrap; }
.barra-acoes input[type="search"], .barra-acoes select {
  padding: 9px 12px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  font-size: 14px;
}
.campo-busca { position: relative; flex: 1; min-width: 220px; }
.campo-busca .icone { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--cinza-claro); }
.campo-busca input[type="search"] { width: 100%; padding-left: 34px; }
.barra-acoes .botao-primario { margin-left: auto; }

/* ---------- Cartões de aluno ---------- */
.grade-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.cartao-aluno {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 16px;
  box-shadow: var(--sombra);
}
.cartao-aluno-topo { display: flex; justify-content: space-between; align-items: flex-start; }
.cartao-aluno h3 { margin: 0 0 4px; font-size: 15px; }
.cartao-aluno .detalhe { font-size: 13px; color: var(--cinza-claro); margin: 2px 0; }
.cartao-aluno .acoes { display: flex; gap: 4px; }

.selo {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.selo-lead { background: var(--roxo-fundo); color: var(--roxo); }
.selo-entrou_em_contato, .selo-agendada { background: var(--azul-fundo); color: var(--azul); }
.selo-em_andamento { background: var(--ambar-fundo); color: var(--ambar); }
.selo-concluido, .selo-realizada, .selo-pago { background: var(--verde-fundo); color: var(--verde); }
.selo-trancado, .selo-cancelada { background: var(--vermelho-fundo); color: var(--vermelho); }
.selo-pendente { background: var(--vermelho-fundo); color: var(--vermelho); }

.selo-assinatura-ativa { background: var(--verde-fundo); color: var(--verde); }
.selo-assinatura-pendente { background: var(--ambar-fundo); color: var(--ambar); }
.selo-assinatura-atrasada { background: var(--vermelho-fundo); color: var(--vermelho); }
.selo-assinatura-cancelada { background: var(--vermelho-fundo); color: var(--vermelho); }
.selo-bloqueio { background: var(--borda); color: var(--cinza-claro); }

.selo-resultado-pendente { background: var(--ambar-fundo); color: var(--ambar); }
.selo-resultado-aprovado { background: var(--verde-fundo); color: var(--verde); }
.selo-resultado-reprovado { background: var(--vermelho-fundo); color: var(--vermelho); }

/* ---------- Agenda: calendário ---------- */
.agenda-layout {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: 20px;
  align-items: start;
}

.calendario {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 16px;
}
.calendario-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.calendario-cabecalho h3 { margin: 0; font-size: 15px; }
.calendario-cabecalho .botao-icone { border: 1px solid var(--borda); border-radius: 6px; padding: 2px 10px; font-size: 16px; }
.botao-hoje { font-size: 12px; padding: 5px 10px; margin-bottom: 10px; }

.calendario-dias-semana {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  font-size: 11px;
  font-weight: 700;
  color: var(--cinza-claro);
  text-align: center;
  padding: 4px 0;
}

.calendario-grade {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.dia-calendario {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--cinza-texto);
  font-family: inherit;
}
.dia-calendario:hover { background: var(--fundo); }
.dia-calendario.outro-mes { color: var(--borda); }
.dia-calendario.hoje { border-color: var(--laranja); font-weight: 700; }
.dia-calendario.selecionado { background: var(--laranja); color: #fff; }
.dia-calendario.selecionado.hoje { border-color: var(--laranja-escuro); }
.dia-calendario.feriado::after,
.dia-calendario.feriado-bloqueado::after {
  content: '';
  position: absolute;
  bottom: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--vermelho);
}
.dia-calendario.selecionado.feriado::after,
.dia-calendario.selecionado.feriado-bloqueado::after { background: #fff; }
.legenda-feriado-calendario { margin-top: 8px; display: flex; align-items: center; }
.ponto-legenda-feriado {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vermelho);
  margin-right: 6px;
  flex-shrink: 0;
}
/* Feriado em que o instrutor optou por NÃO permitir agendamento —
   fundo cinza igual ao hover, pra já sinalizar visualmente que esse
   dia tem restrição, mesmo antes de tentar clicar. O ponto continua
   vermelho igual o feriado normal, só o fundo muda. */
.dia-calendario.feriado-bloqueado { background: var(--fundo); }

.contador-dia {
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--azul-fundo);
  color: var(--azul);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dia-calendario.selecionado .contador-dia { background: rgba(255,255,255,0.3); color: #fff; }

.agenda-dia {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 18px;
  min-height: 200px;
  overflow: hidden;
}
.agenda-dia h3 { margin: 0 0 14px; font-size: 15px; }

.item-aula-dia {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--borda);
}
.item-aula-dia:last-child { border-bottom: none; }
.item-aula-dia .horario-aula {
  font-weight: 700;
  font-size: 13px;
  min-width: 52px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.3;
}
.item-aula-dia .horario-aula small {
  font-weight: 400;
  font-size: 10px;
  color: var(--cinza-claro);
  line-height: 1.3;
}
.item-aula-dia .info-aula { flex: 1; min-width: 0; }
.item-aula-dia .info-aula strong { display: block; font-size: 14px; }
.item-aula-dia .info-aula span { font-size: 12px; color: var(--cinza-claro); }
.item-aula-dia .selecao-status { flex-shrink: 0; }

.info-local-encontro {
  display: flex !important;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.info-local-encontro .icone { width: 11px; height: 11px; flex-shrink: 0; }

.area-upload-capa {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 110px; border: 1.5px dashed var(--borda); border-radius: 10px;
  background-color: var(--fundo); background-size: cover; background-position: center; background-repeat: no-repeat;
  cursor: pointer; overflow: hidden;
  color: var(--cinza-claro); font-size: 13px; font-weight: 600; font-family: inherit;
  padding: 0; box-sizing: border-box; position: relative;
}
.area-upload-capa:hover { border-color: var(--laranja); }
.area-upload-capa.tem-imagem { border-style: solid; border-color: var(--borda); }

.area-upload-plano {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 100%; height: 90px; border: 1.5px dashed var(--borda); border-radius: 10px;
  background-color: var(--fundo); background-size: cover; background-position: center; background-repeat: no-repeat;
  cursor: pointer; overflow: hidden;
  color: var(--cinza-claro); font-size: 12px; font-weight: 600; font-family: inherit;
  padding: 8px; box-sizing: border-box; position: relative;
}
.area-upload-plano:hover { border-color: var(--laranja); }
.area-upload-plano.tem-imagem { border-style: solid; border-color: var(--borda); }
.area-upload-plano .opcional { display: block; font-weight: 400; }
#placeholder-plano-imagem[hidden] { display: none !important; }

.area-upload-perfil {
  display: flex; align-items: center; justify-content: center;
  width: 128px; height: 128px; border: 1.5px dashed var(--borda); border-radius: 50%;
  background-color: var(--fundo); background-size: cover; background-position: center; background-repeat: no-repeat;
  cursor: pointer; overflow: hidden; color: var(--cinza-claro); font-family: inherit;
  padding: 0; box-sizing: border-box; position: relative; margin: 0 auto;
}
.area-upload-perfil:hover { border-color: var(--laranja); }
.area-upload-perfil.tem-imagem { border-style: solid; border-color: var(--borda); }
#placeholder-capa[hidden] { display: none !important; }
#placeholder-perfil-icone[hidden] { display: none !important; }

.envolucro-upload-imagem { position: relative; display: inline-block; align-self: center; }
.envolucro-upload-imagem.envolucro-capa { display: block; align-self: stretch; width: 100%; }
.botao-excluir-imagem {
  position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--vermelho); color: #fff; border: 2px solid var(--branco); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0; z-index: 1;
}
.botao-excluir-imagem .icone { width: 12px; height: 12px; }
.botao-excluir-imagem:hover { background: #b8271f; }
.botao-excluir-imagem[hidden] { display: none !important; }

.barra-editor-bio {
  display: flex; align-items: center; gap: 6px; margin-top: 4px;
  padding: 6px; border: 1px solid var(--borda); border-radius: 8px 8px 0 0; background: var(--fundo);
}
.botao-editor-bio {
  width: 30px; height: 30px; border-radius: 6px; border: 1px solid transparent; background: none;
  cursor: pointer; font-size: 14px; color: var(--cinza-texto); font-family: inherit;
}
.botao-editor-bio:hover { background: var(--branco); border-color: var(--borda); }
.barra-editor-bio select { padding: 5px 6px; border: 1px solid var(--borda); border-radius: 6px; font-size: 12px; }
.barra-editor-bio input[type="color"] { width: 30px; height: 30px; padding: 2px; border: 1px solid var(--borda); border-radius: 6px; cursor: pointer; }
.editor-bio-conteudo {
  min-height: 100px; max-height: 220px; overflow-y: auto; padding: 10px 11px; border: 1px solid var(--borda);
  border-top: none; border-radius: 0 0 8px 8px; font-size: 14px; line-height: 1.5; color: var(--cinza-texto);
}
.editor-bio-conteudo:empty::before { content: attr(data-placeholder); color: var(--cinza-claro); }
.contador-caracteres { font-size: 11px; color: var(--cinza-claro); text-align: right; margin: 4px 0 0; }
.contador-caracteres.acima-limite { color: var(--vermelho); font-weight: 600; }

.duas-colunas { display: flex; gap: 14px; }
.duas-colunas > div { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.duas-colunas > div[hidden] { display: none !important; }
.duas-colunas input[type="color"] { width: 100%; height: 40px; padding: 3px; border: 1px solid var(--borda); border-radius: 8px; cursor: pointer; }

.grade-templates-perfil { display: flex; gap: 10px; margin-top: 4px; }
.cartao-template-perfil {
  flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  padding: 10px; border: 1.5px solid var(--borda); border-radius: 10px; background: var(--branco);
  cursor: pointer; font-family: inherit;
}
.cartao-template-perfil:hover { border-color: var(--laranja); }
.cartao-template-perfil.selecionado { border-color: var(--laranja); background: var(--fundo); }
.cartao-template-perfil strong { font-size: 12px; color: var(--cinza-texto); }
.cartao-template-perfil span:last-child { font-size: 10px; color: var(--cinza-claro); line-height: 1.3; }

.preview-template {
  width: 100%; height: 58px; border-radius: 6px; display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 6px;
}
.preview-template-avatar { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; }
.preview-template-impacto { background: linear-gradient(160deg, #2b2b2b, #111); }
.preview-template-impacto .preview-template-avatar { background: var(--laranja); }
.preview-template-consultor { background: linear-gradient(160deg, #f3f5f8, #e4e9f0); }
.preview-template-consultor .preview-template-avatar { background: var(--azul); }
.preview-template-editorial { background: linear-gradient(160deg, #3a2b2b, #1a1010); }
.preview-template-editorial .preview-template-avatar { background: #d94f6b; }

.aviso-triagem {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--roxo-fundo);
  color: var(--roxo);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}
.aviso-triagem[hidden] { display: none; }
.aviso-triagem .icone { flex-shrink: 0; margin-top: 1px; }

.aviso-pendencia {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  color: var(--vermelho) !important;
  font-size: 12px;
  font-weight: 700;
  background: var(--vermelho-fundo);
  border: 1.5px solid var(--vermelho);
  border-radius: 999px;
  padding: 4px 10px 4px 8px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: filter 0.15s ease;
}
.aviso-pendencia:hover { filter: brightness(0.94); }
.aviso-pendencia .icone { width: 13px; height: 13px; flex-shrink: 0; color: var(--vermelho) !important; }

.nome-aluno-aula {
  display: block; background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit;
  cursor: pointer; text-align: left; text-decoration: underline; text-decoration-color: transparent;
  transition: text-decoration-color 0.15s ease;
}
.nome-aluno-aula:hover { text-decoration-color: currentColor; }
.cpf-aluno-aula { display: block; font-size: 12px; font-weight: 400; color: var(--cinza-claro); margin-top: 1px; }

.item-bloqueio-dia {
  position: relative;
  z-index: 0;
  padding-top: 10px;
  padding-bottom: 10px;
}
.item-bloqueio-dia::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1000px;
  right: -1000px;
  background: var(--fundo);
  z-index: -1;
}
.item-bloqueio-dia .horario-aula { color: var(--cinza-claro); }
.item-bloqueio-dia .info-aula strong {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--cinza-texto);
  font-size: 13px;
}
.item-bloqueio-dia .info-aula strong .icone { width: 13px; height: 13px; color: var(--cinza-claro); }

@media (max-width: 780px) {
  .agenda-layout { grid-template-columns: 1fr; }
  .opcoes-tipo-agendamento { flex-direction: column; }
}

.opcoes-tipo-agendamento { display: flex; gap: 12px; margin-top: 4px; }
.opcao-tipo-agendamento {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 20px 14px;
  border: 1.5px solid var(--borda);
  border-radius: 10px;
  background: var(--branco);
  cursor: pointer;
  font-family: inherit;
}
.opcao-tipo-agendamento:hover { border-color: var(--laranja); background: var(--fundo); }
.opcao-tipo-agendamento .icone { width: 28px; height: 28px; color: var(--laranja); }
.opcao-tipo-agendamento strong { font-size: 14px; color: var(--cinza-texto); }
.opcao-tipo-agendamento span { font-size: 12px; color: var(--cinza-claro); }

/* ---------- Tabelas ---------- */
.tabela {
  width: 100%;
  border-collapse: collapse;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
}
.tabela th, .tabela td {
  text-align: left;
  padding: 12px 14px;
  font-size: 13px;
  border-bottom: 1px solid var(--borda);
}
.tabela th { background: var(--fundo); font-weight: 700; color: var(--cinza-claro); }
.tabela tr:last-child td { border-bottom: none; }
.tabela-centralizada th, .tabela-centralizada td { text-align: center; }
.tabela tbody td:last-child { white-space: nowrap; }
.tabela td .botao-icone + .botao-icone { margin-left: 2px; }
.tabela tr.linha-mes-atual td { background: var(--azul-fundo); font-weight: 600; }
.tabela td.valor-negativo { color: var(--vermelho); font-weight: 600; }
.tabela select.selecao-status {
  border: 1px solid var(--borda);
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 12px;
}

/* ---------- Painel Início ---------- */
.grade-links-publicos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: 16px; }
.cartao-link-publico { background: var(--branco); border-radius: var(--raio); padding: 14px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.cartao-link-publico-cabecalho { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--cinza-texto); }
.cartao-link-publico-cabecalho .icone { width: 17px; height: 17px; color: var(--laranja); flex-shrink: 0; }
.cartao-link-publico-cabecalho strong { font-size: 14px; }
.cartao-link-publico .campo-com-botao input { font-size: 12px; }

.grade-kpi {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 20px;
}
.cartao-kpi {
  flex: 1 1 220px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cartao-kpi:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(30,30,30,0.10), 0 2px 4px rgba(30,30,30,0.06); }
.cartao-kpi-icone {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cartao-kpi-icone .icone { width: 20px; height: 20px; }
.cartao-kpi-icone-azul { background: var(--azul-fundo); color: var(--azul); }
.cartao-kpi-icone-laranja { background: #FDECD9; color: var(--laranja-escuro); }
.cartao-kpi-icone-verde { background: var(--verde-fundo); color: var(--verde); }
.cartao-kpi-icone-ambar { background: var(--ambar-fundo); color: var(--ambar); }
.cartao-kpi-texto { display: flex; flex-direction: column; min-width: 0; }
.cartao-kpi-valor { font-size: 20px; font-weight: 700; color: var(--cinza-texto); line-height: 1.2; }
.cartao-kpi-rotulo { font-size: 12px; color: var(--cinza-claro); white-space: nowrap; }

.painel-inicio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.cartao-painel {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 20px 24px;
  margin-bottom: 16px;
  transition: box-shadow 0.15s ease;
  overflow: hidden;
}
.cartao-painel h3 {
  margin: 0 0 14px;
  font-size: 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 7px;
}
.cartao-painel h3 .icone { width: 15px; height: 15px; color: var(--laranja); flex-shrink: 0; }
#inicio-aulas-hoje-data { font-weight: 400; color: var(--cinza-claro); font-size: 13px; }
.cartao-painel-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 14px;
}
.cartao-painel-cabecalho h3 { margin: 0; }
.legenda-cartao { margin: -8px 0 12px; font-size: 12px; color: var(--cinza-claro); }
.botao-pequeno { font-size: 12px; padding: 6px 12px; }

.area-grafico { position: relative; height: 220px; }
.area-grafico-doughnut { height: 220px; }

.cartao-indice-aprovacao {
  height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
}
.indice-aprovacao-valor { font-size: 48px; font-weight: 800; color: var(--verde); line-height: 1; }
.indice-aprovacao-valor.indice-alerta { color: var(--ambar); }
.indice-aprovacao-valor.indice-critico { color: var(--vermelho); }
.indice-aprovacao-detalhe { font-size: 13px; color: var(--cinza-claro); }

#lista-aulas-hoje .item-aula-dia { padding: 8px 0; }
#lista-aulas-hoje .selo { flex-shrink: 0; }

@media (max-width: 900px) {
  .grade-kpi { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 780px) {
  .painel-inicio-grid { grid-template-columns: 1fr; }
}

/* ---------- Detalhe do aluno ---------- */
.botao-voltar { margin-bottom: 18px; }

.detalhe-aluno-cabecalho { margin-bottom: 18px; }
.detalhe-aluno-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.detalhe-aluno-topo h2 { margin: 0 0 6px; font-size: 20px; }
.detalhe-aluno-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

.detalhe-aluno-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--borda);
}
.detalhe-aluno-info-grid strong { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--cinza-claro); margin-bottom: 3px; }
.detalhe-aluno-info-grid span { font-size: 14px; color: var(--cinza-texto); }

.detalhe-aluno-observacoes {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--borda);
  font-size: 13px;
  color: var(--cinza-claro);
  line-height: 1.5;
}

.lista-historico { display: flex; flex-direction: column; max-height: 360px; overflow-y: auto; }
.item-historico {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--borda);
}
.item-historico:last-child { border-bottom: none; }
.item-historico-coluna { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.item-historico-coluna strong { font-size: 13px; }
/* Card de plano/valor — usado no painel, no perfil público e na
   triagem: imagem em cima, número de aulas e valor em destaque numa
   linha com separador pontilhado, e a descrição discreta embaixo. */
.cartao-plano-valor { border-radius: var(--raio); overflow: hidden; flex: 1; min-width: 0; }
.cartao-plano-valor-imagem { width: 100%; height: 130px; object-fit: cover; display: block; border-radius: var(--raio); margin-bottom: 8px; }
.cartao-plano-valor-linha { display: flex; align-items: center; gap: 8px; }
.cartao-plano-valor-linha strong { font-size: 15px; white-space: nowrap; }
.cartao-plano-valor-pontilhada { flex: 1; border-bottom: 1px dashed var(--borda); height: 1px; }
.cartao-plano-valor-descricao { font-size: 13px; color: var(--cinza-claro); margin-top: 4px; line-height: 1.4; }
.cartao-plano-valor-descricao p { margin: 0; }
.cartao-plano-valor-linha strong:last-child { color: var(--laranja-escuro); }
.item-plano-valor { align-items: flex-start; }
.item-plano-valor .botao-icone { margin-top: 2px; }
.item-historico-coluna span { font-size: 12px; color: var(--cinza-claro); }

@media (max-width: 480px) {
  .cartao-plano-valor-linha { flex-direction: column; align-items: flex-start; gap: 2px; }
  .cartao-plano-valor-linha strong { white-space: normal; }
  .cartao-plano-valor-pontilhada { display: none; }
  .duas-colunas { flex-direction: column; gap: 10px; }
}
.item-historico-meio { font-size: 12px; color: var(--cinza-claro); flex-shrink: 0; }
.item-historico-valor { font-size: 13px; flex-shrink: 0; }
.item-historico .selo { flex-shrink: 0; }

/* ---------- Financeiro: sub-abas e navegação de período ---------- */
.sub-abas {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
}
.sub-aba {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cinza-claro);
  cursor: pointer;
}
.sub-aba.ativa { background: var(--laranja); color: #fff; border-color: var(--laranja); }

.navegador-periodo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.navegador-periodo h3 {
  margin: 0;
  font-size: 15px;
  min-width: 150px;
  text-align: center;
}
.navegador-periodo .botao-icone { border: 1px solid var(--borda); border-radius: 6px; padding: 2px 10px; font-size: 16px; }
.botao-periodo-atual { margin-left: auto; font-size: 12px; padding: 6px 12px; }

/* ---------- Financeiro ---------- */
.cartoes-totais { display: flex; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.cartoes-totais-4 .cartao-total { min-width: 160px; }
.cartao-total {
  flex: 1;
  min-width: 200px;
  border-radius: var(--raio);
  padding: 18px 44px 18px 20px;
  box-shadow: var(--sombra);
  position: relative;
}
.cartao-total-pago { background: var(--verde-fundo); }
.cartao-total-pendente { background: var(--ambar-fundo); }
.cartao-total-custo { background: var(--vermelho-fundo); }
.cartao-total-saldo { background: var(--azul-fundo); }
.rotulo-total { display: block; font-size: 13px; font-weight: 600; opacity: 0.8; }
.cartao-total-pago .rotulo-total, .cartao-total-pago .valor-total, .cartao-total-pago .botao-alternar-valor { color: var(--verde); }
.cartao-total-pendente .rotulo-total, .cartao-total-pendente .valor-total, .cartao-total-pendente .botao-alternar-valor { color: var(--ambar); }
.cartao-total-custo .rotulo-total, .cartao-total-custo .valor-total, .cartao-total-custo .botao-alternar-valor { color: var(--vermelho); }
.cartao-total-saldo .rotulo-total, .cartao-total-saldo .valor-total, .cartao-total-saldo .botao-alternar-valor { color: var(--azul); }
.valor-total { display: block; font-size: 26px; font-weight: 700; }

/* ---------- Botão de olho embutido (cards de valores e KPIs) ---------- */
.cartao-total .botao-alternar-valor,
.cartao-kpi .botao-alternar-valor {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  opacity: 0.55;
  z-index: 1;
}
.cartao-total .botao-alternar-valor:hover,
.cartao-kpi .botao-alternar-valor:hover { opacity: 1; background: rgba(0, 0, 0, 0.06); }
.cartao-total .botao-alternar-valor .icone,
.cartao-kpi .botao-alternar-valor .icone { width: 15px; height: 15px; }
.cartao-kpi .botao-alternar-valor { color: var(--cinza-claro); }
.cartao-kpi { padding-right: 42px; }

.titulo-secao-financeiro { font-size: 14px; margin: 24px 0 12px; color: var(--cinza-texto); }
.titulo-secao-financeiro:first-of-type { margin-top: 0; }

/* ---------- Modal ---------- */
.sobreposicao-modal {
  position: fixed;
  inset: 0;
  background: rgba(30, 30, 30, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
}
.sobreposicao-modal[hidden] { display: none; }
#modal-cropper { z-index: 60; }
/* Esses dois abrem por cima de outro modal já aberto (repasses,
   organização) — precisam ficar acima na pilha, senão o de trás
   desenha por cima já que teriam o mesmo z-index. */
#modal-pagamento-repasse,
#modal-pagamento-organizacao { z-index: 60; }
.modal {
  background: var(--branco);
  border-radius: var(--raio);
  padding: 28px;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
}
.modal.modal-grande { max-width: 720px; }
.modal h2 { margin: 0; font-size: 18px; }
.cabecalho-modal { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.cabecalho-modal .botao-icone { color: var(--cinza-claro); }
.cabecalho-modal .icone { width: 18px; height: 18px; }
.descricao-modal { font-size: 13px; color: var(--cinza-claro); margin: -8px 0 4px; }

.cartao-preco-renovacao {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 18px;
  margin: 14px 0 10px;
}
.cartao-preco-valor { font-size: 28px; font-weight: 700; color: var(--laranja-escuro); }
.cartao-preco-legenda { font-size: 13px; color: var(--cinza-claro); }
.modal-pagamento { max-width: 460px; }

.cartao-preco-renovacao {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 18px;
  margin: 14px 0 10px;
}
.cartao-preco-valor-original {
  font-size: 14px;
  color: var(--cinza-claro);
  text-decoration: line-through;
}
.cartao-preco-valor { font-size: 28px; font-weight: 700; color: var(--laranja-escuro); }
.cartao-preco-legenda { font-size: 13px; color: var(--cinza-claro); }
.selo-cupom-aplicado {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--verde);
  background: var(--verde-fundo);
  padding: 3px 10px;
  border-radius: 999px;
}

.campo-com-botao { display: flex; gap: 8px; }
.campo-com-botao input { flex: 1; min-width: 0; }
.campo-com-botao .botao-secundario { flex-shrink: 0; white-space: nowrap; }

.rotulo-forma-pagamento { font-size: 13px; font-weight: 600; margin: 16px 0 8px; }
.botoes-forma-pagamento { display: flex; gap: 10px; }
.botao-forma-pagamento {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 12px;
  border-radius: var(--raio);
  border: 2px solid var(--borda);
  background: var(--branco);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  color: var(--cinza-texto);
  transition: transform 0.1s ease, border-color 0.15s ease;
}
.botao-forma-pagamento:hover { transform: translateY(-2px); border-color: var(--laranja); color: var(--laranja-escuro); }
.botao-forma-pagamento .icone { width: 18px; height: 18px; }
.botao-forma-pagamento:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.botao-voltar-etapa {
  background: none;
  border: none;
  color: var(--cinza-claro);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 0 12px;
}
.botao-voltar-etapa:hover { color: var(--laranja-escuro); }

.instrucao-pix { font-size: 13px; color: var(--cinza-claro); margin: 0 0 12px; text-align: center; }
.area-qrcode {
  display: flex;
  justify-content: center;
  padding: 12px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  margin-bottom: 14px;
}
.area-qrcode img { width: 180px; height: 180px; }

.status-aguardando {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ambar);
  margin: 16px 0 0;
}
.ponto-pulsante {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ambar);
  animation: pulsar-ponto 1.2s ease-in-out infinite;
}
@keyframes pulsar-ponto {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.1); }
}

.linha-dois-campos { display: flex; gap: 10px; }
.linha-dois-campos > div { flex: 1; }
.linha-dois-campos label { display: block; }
.linha-dois-campos input { width: 100%; }

.modal-disponibilidade { max-width: 460px; }
.etapa-agendar { display: none; }
.etapa-agendar.ativa { display: flex; flex-direction: column; gap: 4px; }
#bloco-afiliado-aluno-existente, #bloco-afiliado-aluno-novo { display: flex; flex-direction: column; gap: 4px; }
#bloco-afiliado-aluno-existente[hidden], #bloco-afiliado-aluno-novo[hidden] { display: none; }
#doc-bloco-recibo, #doc-bloco-contrato { display: flex; flex-direction: column; gap: 4px; }
#doc-bloco-recibo[hidden], #doc-bloco-contrato[hidden] { display: none; }
.progresso-agendamento {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--fundo); border-radius: var(--raio); padding: 12px 16px; margin-bottom: 16px;
}
.progresso-agendamento strong { font-size: 14px; color: var(--cinza-texto); }
.progresso-agendamento span { font-size: 13px; color: var(--cinza-claro); }
.lista-aulas-escolhidas { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.item-aula-escolhida {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--branco); border: 1px solid var(--borda); border-radius: 8px; padding: 10px 14px;
}
.item-aula-escolhida strong { font-size: 13px; }
.item-aula-escolhida button {
  background: none; border: none; color: var(--vermelho); font-size: 13px; font-weight: 600; cursor: pointer;
}
.botao-link-simples { background: none; border: none; cursor: pointer; color: var(--laranja-escuro); padding: 0; font-size: 13px; font-weight: 600; margin-bottom: 14px; }
#botao-tentar-outro-instrutor[hidden] { display: none !important; }

.grade-horarios { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.botao-horario {
  padding: 10px 14px; border: 1.5px solid var(--borda); border-radius: 8px; background: var(--branco);
  cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--cinza-texto);
}
.botao-horario:hover { border-color: var(--laranja); color: var(--laranja-escuro); }
.botao-horario.selecionado { background: var(--laranja); border-color: var(--laranja); color: #fff; }

.botoes-quantidade { display: flex; gap: 10px; margin: 6px 0 18px; }
.botao-quantidade {
  flex: 1; padding: 12px; border: 1.5px solid var(--borda); border-radius: 8px; background: var(--branco);
  cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--cinza-texto);
}
.botao-quantidade.selecionado { background: var(--fundo); border-color: var(--laranja); color: var(--laranja-escuro); }
.linha-disponibilidade-dia {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--borda);
  flex-wrap: wrap;
}
.linha-disponibilidade-dia:last-of-type { border-bottom: none; }
.campo-dia-disponibilidade { flex: 1 1 140px; margin: 0; font-size: 13px; }
.campos-horario-disponibilidade {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 200px;
}
.campos-horario-disponibilidade input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
}
.campos-horario-disponibilidade input:disabled { background: var(--fundo); color: var(--cinza-claro); }
.separador-horario { font-size: 12px; color: var(--cinza-claro); flex-shrink: 0; }

.area-sucesso { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 10px 0 4px; }
.icone-sucesso-grande { width: 56px; height: 56px; color: var(--verde); }
.area-sucesso p { font-size: 14px; color: var(--cinza-texto); margin: 0; }
.area-sucesso .botao-primario { width: 100%; justify-content: center; }

.botoes-resultado-prova { display: flex; gap: 10px; margin: 18px 0 12px; }
.botao-resultado {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 12px;
  border-radius: var(--raio);
  border: 2px solid var(--borda);
  background: var(--branco);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  transition: transform 0.1s ease, border-color 0.15s ease;
}
.botao-resultado:hover { transform: translateY(-2px); }
.botao-resultado .icone { width: 26px; height: 26px; }
.botao-resultado-aprovado { color: var(--verde); }
.botao-resultado-aprovado:hover { border-color: var(--verde); background: var(--verde-fundo); }
.botao-resultado-reprovado { color: var(--vermelho); }
.botao-resultado-reprovado:hover { border-color: var(--vermelho); background: var(--vermelho-fundo); }
.botao-perguntar-depois { width: 100%; justify-content: center; }
.modal form { display: flex; flex-direction: column; gap: 4px; }
.modal label { font-size: 13px; font-weight: 600; margin-top: 10px; }
.modal label .opcional { font-weight: 400; color: var(--cinza-claro); }
.modal input, .modal select, .modal textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
}
/* iOS/Safari dá aos campos de data e hora uma altura interna própria,
   maior que a dos outros campos, mesmo com o mesmo padding — trava
   isso numa altura fixa e consistente com o resto do formulário. */
.modal input[type="date"],
.modal input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  height: 38px;
  line-height: 20px;
  padding-top: 0;
  padding-bottom: 0;
}
.acoes-modal { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.acoes-modal-com-excluir { justify-content: space-between; align-items: center; }
.acoes-modal-direita { display: flex; gap: 10px; }
.botao-excluir-item {
  background: none;
  border: none;
  color: var(--vermelho);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.botao-excluir-item:hover { text-decoration: underline; }
.botao-excluir-item .icone { width: 15px; height: 15px; }

.vazio { color: var(--cinza-claro); font-size: 14px; padding: 30px 0; text-align: center; }
.icone-vazio {
  width: 28px;
  height: 28px;
  stroke-width: 1.5;
  color: var(--borda);
  margin-bottom: 8px;
}

@media (max-width: 640px) {
  .barra-acoes .botao-primario { margin-left: 0; width: 100%; }
  .cartoes-totais { flex-direction: column; }
  .grade-kpi { grid-template-columns: 1fr; gap: 10px; }
  .cartao-kpi { padding: 14px; }

  /* Card "Aulas de hoje": em telas estreitas, se o selo de status não
     couber ao lado do horário/nome, ele quebra para a linha de baixo em
     vez de espremer ou estourar a largura do card. */
  #lista-aulas-hoje .item-aula-dia {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  #lista-aulas-hoje .item-aula-dia .info-aula { min-width: 140px; }
  #lista-aulas-hoje .item-aula-dia .selo { margin-left: auto; }

  /* Tabelas responsivas (Lançamentos, Custos extras): cada linha vira um
     cartão empilhado, com o rótulo da coluna ao lado do valor, sem nunca
     estourar a largura da página. */
  .tabela-responsiva { border: none; box-shadow: none; background: none; }
  .tabela-responsiva thead { display: none; }
  .tabela-responsiva, .tabela-responsiva tbody { display: block; width: 100%; }
  .tabela-responsiva tr {
    display: block;
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 12px 14px;
    margin-bottom: 10px;
  }
  .tabela-responsiva tr:last-child { margin-bottom: 0; }
  .tabela-responsiva td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    border-bottom: none;
    white-space: normal;
  }
  .tabela-responsiva td[data-label]::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--cinza-claro);
    flex-shrink: 0;
  }
  .tabela-responsiva td.celula-acoes {
    justify-content: flex-end;
    gap: 4px;
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px solid var(--borda);
  }
  .tabela-responsiva .vazio,
  .tabela-responsiva td.vazio {
    display: block;
    text-align: center;
    padding: 20px 0;
  }
}