/* =====================================================================
   PROJETO BETÂNIA — estilos
   Direção: ciclorama de estúdio. O fundo em ameixa curva até ao chão
   em osso; o cartão assenta na linha, sobre a marca de fita no chão.
   ===================================================================== */

:root {
  --ameixa:  #33243A;
  --ameixa-alta: #463350;
  --osso:    #EDEAE3;
  --tinta:   #1C1720;
  --fumo:    #857C86;
  --ambar:   #E0A33C;
  --erro:    #A8412F;

  --display: "Bodoni Moda", Georgia, serif;
  --corpo:   "Karla", system-ui, sans-serif;
  --util:    "Space Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--osso);
  color: var(--tinta);
  font-family: var(--corpo);
  font-size: 16px;
  line-height: 1.55;
  position: relative;
  overflow-x: hidden;
}

/* --- o papel de fundo que curva até ao chão --- */
.sweep {
  position: absolute;
  top: 0;
  left: -10vw;
  width: 120vw;
  height: 460px;
  background: linear-gradient(180deg, var(--ameixa-alta) 0%, var(--ameixa) 70%);
  border-radius: 0 0 50% 50% / 0 0 14% 14%;
  z-index: 0;
}

/* --- a marca de posição no chão, onde o aluno se coloca --- */
.mark {
  position: absolute;
  top: 412px;
  left: 50%;
  width: 104px;
  height: 64px;
  transform: translateX(-50%);
  z-index: 0;
  opacity: .5;
}

.mark::before,
.mark::after {
  content: "";
  position: absolute;
  background: var(--ambar);
  border-radius: 1px;
}

.mark::before {
  top: 0;
  left: 0;
  width: 100%;
  height: 7px;
}

.mark::after {
  top: 0;
  left: 50%;
  width: 7px;
  height: 100%;
  transform: translateX(-50%);
}

.stage {
  position: relative;
  z-index: 1;
  max-width: 460px;
  margin: 0 auto;
  padding: 56px 20px 80px;
}

/* Áreas com conteúdo (responsável, aluno, sala) precisam de largura:
   a coluna estreita foi desenhada para o cartão de login. */
.stage.largo { max-width: 900px; }

.stage.largo .masthead { margin-bottom: 4px; }
.stage.largo .wordmark { font-size: clamp(38px, 7vw, 52px); }
.stage.largo .tagline  { font-size: 13px; }

/* --- cabeçalho --- */
.masthead { text-align: center; color: var(--osso); }

.eyebrow {
  font-family: var(--util);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ambar);
  margin: 0 0 14px;
}

.wordmark {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(52px, 13vw, 76px);
  line-height: .95;
  letter-spacing: .01em;
  margin: 0;
}

.tagline {
  font-size: 14px;
  color: #C9BFCC;
  margin: 12px 0 0;
}

/* --- cartão --- */
.card {
  background: #FFFFFF;
  border: 1px solid rgba(28,23,32,.10);
  border-radius: 3px;
  box-shadow: 0 24px 50px -28px rgba(28,23,32,.55);
  padding: 30px 26px 26px;
  margin-top: 54px;
}

.card-label {
  font-family: var(--util);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fumo);
  margin: 0 0 22px;
}

.frame { color: var(--ambar); margin-right: 8px; }

.intro {
  font-size: 15px;
  color: #4A424E;
  margin: -10px 0 22px;
}

/* --- botão Google --- */
.btn-google {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px;
  font-family: var(--corpo);
  font-size: 15px;
  font-weight: 500;
  color: var(--tinta);
  background: #fff;
  border: 1px solid rgba(28,23,32,.22);
  border-radius: 2px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.btn-google:hover { background: #F6F4F1; border-color: rgba(28,23,32,.4); }

/* --- divisor --- */
.divisor {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0;
  color: var(--fumo);
  font-family: var(--util);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .18em;
}
.divisor::before, .divisor::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(28,23,32,.14);
}

/* --- campos --- */
.campo { display: block; margin-bottom: 16px; }

.campo > span {
  display: block;
  font-family: var(--util);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fumo);
  margin-bottom: 6px;
}

.campo input {
  width: 100%;
  padding: 12px 13px;
  font-family: var(--corpo);
  font-size: 15px;
  color: var(--tinta);
  background: #FBFAF8;
  border: 1px solid rgba(28,23,32,.18);
  border-radius: 2px;
}
.campo input::placeholder { color: #B4ADB6; }
.campo input:focus {
  outline: 2px solid var(--ambar);
  outline-offset: 1px;
  border-color: transparent;
  background: #fff;
}

/* --- escolha de tipo de conta --- */
.escolha {
  border: 0;
  padding: 0;
  margin: 0 0 22px;
}

.escolha legend {
  font-family: var(--util);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fumo);
  padding: 0;
  margin-bottom: 10px;
}

.opcao {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 13px;
  margin-bottom: 8px;
  border: 1px solid rgba(28,23,32,.16);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.opcao:hover { background: #FBFAF8; }
.opcao:has(input:checked) {
  border-color: var(--ameixa);
  background: #FAF7FB;
}
.opcao input { margin-top: 4px; accent-color: var(--ameixa); }

.opcao-corpo { display: block; }
.opcao-corpo strong { display: block; font-size: 15px; font-weight: 600; }
.opcao-corpo em {
  display: block;
  font-style: normal;
  font-size: 13px;
  color: var(--fumo);
  margin-top: 2px;
}

/* --- botão principal --- */
.btn-principal {
  width: 100%;
  padding: 14px;
  margin-top: 6px;
  font-family: var(--corpo);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--osso);
  background: var(--ameixa);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  transition: background .15s ease;
}
.btn-principal:hover { background: var(--ameixa-alta); }
.btn-principal[disabled] { opacity: .55; cursor: default; }

/* --- avisos --- */
.aviso {
  font-size: 14px;
  color: var(--erro);
  background: #FBF0ED;
  border-left: 2px solid var(--erro);
  padding: 10px 12px;
  margin: 0 0 14px;
}
.aviso.ok {
  color: #2C5F3F;
  background: #EEF5F0;
  border-left-color: #2C5F3F;
}

/* --- rodapé do cartão --- */
.rodape-card {
  font-size: 14px;
  color: var(--fumo);
  text-align: center;
  margin: 20px 0 0;
}

.link {
  font-family: var(--corpo);
  font-size: 14px;
  font-weight: 600;
  color: var(--ameixa);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- foco visível transversal --- */
:focus-visible {
  outline: 2px solid var(--ambar);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

@media (max-width: 420px) {
  .sweep { height: 400px; }
  .mark  { top: 358px; width: 84px; height: 52px; }
  .stage { padding-top: 44px; }
}

/* =====================================================================
   ÁREA DO RESPONSÁVEL
   ===================================================================== */

.btn-secundario {
  width: 100%;
  padding: 13px;
  font-family: var(--corpo);
  font-size: 15px;
  font-weight: 500;
  color: var(--ameixa);
  background: #fff;
  border: 1px solid var(--ameixa);
  border-radius: 2px;
  cursor: pointer;
  transition: background .15s ease;
}
.btn-secundario:hover { background: #FAF7FB; }

.separador {
  height: 1px;
  background: rgba(28,23,32,.12);
  margin: 24px 0;
}

.link.bloco {
  display: block;
  width: 100%;
  margin-top: 12px;
  text-align: center;
}

.nota-campo {
  font-size: 13px;
  color: var(--fumo);
  margin: -8px 0 18px;
}

/* --- lista de educandos --- */
.educando {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(28,23,32,.10);
}
.educando:first-child { border-top: 1px solid rgba(28,23,32,.10); }

.educando-nome { font-size: 15px; font-weight: 600; }

.educando-meta {
  font-family: var(--util);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--fumo);
  white-space: nowrap;
}

.vazio {
  font-size: 14px;
  color: var(--fumo);
  padding: 16px 0 20px;
}

/* --- credenciais (mostradas uma única vez) --- */
.credencial {
  background: #FAF7FB;
  border: 1px solid rgba(51,36,58,.18);
  border-radius: 2px;
  padding: 11px 13px;
  margin-bottom: 10px;
}

.cred-etiqueta {
  display: block;
  font-family: var(--util);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fumo);
  margin-bottom: 4px;
}

.credencial code {
  font-family: var(--util);
  font-size: 15px;
  color: var(--tinta);
  word-break: break-all;
}

/* =====================================================================
   SALA DE AULA DO EDUCANDO
   ===================================================================== */

.sala { padding-bottom: 22px; }

/* --- barra de progresso --- */
.barra-wrap { margin: -6px 0 24px; }

.barra {
  height: 4px;
  background: rgba(28,23,32,.10);
  border-radius: 2px;
  overflow: hidden;
}

.barra-cheia {
  height: 100%;
  background: var(--ambar);
  width: 0;
  transition: width .3s ease;
}

.barra-texto {
  font-family: var(--util);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fumo);
  margin: 8px 0 0;
}

/* --- áreas de ensino --- */
.area-titulo {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 400;
  margin: 26px 0 4px;
}
.area-titulo:first-child { margin-top: 0; }

.area-contagem {
  font-family: var(--util);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fumo);
  margin: 0 0 12px;
}

/* --- aula --- */
.aula {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-top: 1px solid rgba(28,23,32,.10);
  cursor: pointer;
}
.aula:hover .aula-titulo { color: var(--ameixa); }

.aula-num {
  font-family: var(--util);
  font-size: 11px;
  color: var(--fumo);
  padding-top: 3px;
  min-width: 22px;
}

.aula-corpo { flex: 1; }

.aula-titulo {
  font-size: 15px;
  font-weight: 600;
  transition: color .15s ease;
}

.aula-desc {
  font-size: 13px;
  color: var(--fumo);
  margin-top: 2px;
}

.aula-check {
  font-size: 15px;
  color: var(--ambar);
  padding-top: 2px;
  min-width: 16px;
  text-align: right;
}

.aula.feita .aula-titulo { color: var(--fumo); }

/* --- fim de semana presencial (informativo: sem local) --- */
.presencial-bloco {
  margin-top: 30px;
  padding: 18px;
  background: #FAF7FB;
  border: 1px solid rgba(51,36,58,.16);
  border-radius: 2px;
}

.presencial-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
}

.presencial-tipo { font-size: 15px; font-weight: 600; text-transform: capitalize; }

.presencial-data {
  font-family: var(--util);
  font-size: 11px;
  color: var(--fumo);
  white-space: nowrap;
}

.presencial-nota {
  font-size: 13px;
  color: var(--fumo);
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(51,36,58,.14);
}

/* =====================================================================
   ÁREA DO RESPONSÁVEL — progresso, presenciais, contacto
   ===================================================================== */

/* --- progresso por educando na lista --- */
.educando { flex-wrap: wrap; }

.educando-progresso {
  flex-basis: 100%;
  margin-top: 8px;
}

.educando-progresso .barra { height: 3px; }

.educando-progresso .barra-texto {
  font-size: 10px;
  margin-top: 5px;
}

/* --- presenciais com local (só adulto/responsável) --- */
.presencial-local {
  font-size: 13px;
  color: var(--tinta);
  margin: 2px 0 0;
}

.presencial-quem {
  font-family: var(--util);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fumo);
  margin-bottom: 2px;
}

.presencial-linha {
  padding: 12px 0;
  border-top: 1px solid rgba(51,36,58,.14);
}
.presencial-linha:first-of-type { border-top: 0; }

.btn-consentir {
  margin-top: 9px;
  padding: 8px 14px;
  font-family: var(--corpo);
  font-size: 13px;
  font-weight: 600;
  color: var(--osso);
  background: var(--ameixa);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
}
.btn-consentir:hover { background: var(--ameixa-alta); }
.btn-consentir[disabled] { opacity: .5; cursor: default; }

.consentido {
  display: inline-block;
  margin-top: 9px;
  font-family: var(--util);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #2C5F3F;
}

/* --- mensagens --- */
.mensagens { margin-bottom: 18px; }

.msg {
  padding: 11px 13px;
  margin-bottom: 8px;
  border-radius: 2px;
  font-size: 14px;
  line-height: 1.5;
}

.msg.minha {
  background: #FAF7FB;
  border: 1px solid rgba(51,36,58,.16);
}

.msg.dela {
  background: #fff;
  border: 1px solid rgba(28,23,32,.14);
  border-left: 2px solid var(--ambar);
}

.msg-quando {
  display: block;
  font-family: var(--util);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--fumo);
  margin-top: 6px;
}

textarea {
  width: 100%;
  padding: 12px 13px;
  font-family: var(--corpo);
  font-size: 15px;
  color: var(--tinta);
  background: #FBFAF8;
  border: 1px solid rgba(28,23,32,.18);
  border-radius: 2px;
  resize: vertical;
}
textarea::placeholder { color: #B4ADB6; }
textarea:focus {
  outline: 2px solid var(--ambar);
  outline-offset: 1px;
  border-color: transparent;
  background: #fff;
}

/* =====================================================================
   ADMINISTRAÇÃO
   Sem o ciclorama: isto é bastidor, não montra.
   ===================================================================== */

.admin-body { background: var(--osso); }

.admin-topo {
  background: var(--ameixa);
  padding: 20px;
}

.admin-topo-interno {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.admin-topo .eyebrow { margin-bottom: 6px; }

.admin-marca {
  font-family: var(--display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  color: var(--osso);
  margin: 0;
}

.admin-topo .link { color: #C9BFCC; }

.admin-stage {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 20px 80px;
}

.admin-stage .card { margin-top: 0; margin-bottom: 20px; }

.bloco-link {
  display: block;
  text-align: center;
  text-decoration: none;
}

/* --- abas --- */
.abas {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(28,23,32,.16);
  overflow-x: auto;
}

.aba {
  font-family: var(--util);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fumo);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 10px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.aba:hover { color: var(--tinta); }
.aba.ativa { color: var(--ameixa); border-bottom-color: var(--ambar); }

.painel { display: none; }
.painel.ativo { display: block; }

/* --- formulário --- */
.linha-dupla { display: flex; gap: 12px; }
.linha-dupla .campo { flex: 1; }

select {
  width: 100%;
  padding: 12px 13px;
  font-family: var(--corpo);
  font-size: 15px;
  color: var(--tinta);
  background: #FBFAF8;
  border: 1px solid rgba(28,23,32,.18);
  border-radius: 2px;
}

input[type="file"] {
  width: 100%;
  padding: 10px;
  font-family: var(--corpo);
  font-size: 14px;
  background: #FBFAF8;
  border: 1px dashed rgba(28,23,32,.28);
  border-radius: 2px;
}

.progresso-upload { margin-bottom: 14px; }

/* --- lista de aulas --- */
.admin-aula {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid rgba(28,23,32,.10);
}
.admin-aula:first-child { border-top: 0; }

.admin-aula-corpo { flex: 1; }

.admin-aula-titulo { font-size: 15px; font-weight: 600; }

.admin-aula-meta {
  font-family: var(--util);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fumo);
  margin-top: 3px;
}

.tem-video { color: #2C5F3F; }
.sem-video { color: var(--erro); }

.admin-acoes { display: flex; gap: 10px; flex-shrink: 0; }

.acao {
  font-family: var(--util);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: none;
  border: 0;
  padding: 2px;
  cursor: pointer;
  color: var(--ameixa);
}
.acao.perigo { color: var(--erro); }
.acao:hover { text-decoration: underline; }

/* --- checkboxes em linha (planos) --- */
.opcao-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 15px;
  cursor: pointer;
}
.opcao-linha input { accent-color: var(--ameixa); width: 16px; height: 16px; }

.opcao-linha.destaque {
  margin: 4px 0 18px;
  padding: 11px 13px;
  background: #FAF7FB;
  border: 1px solid rgba(51,36,58,.16);
  border-radius: 2px;
  font-weight: 600;
}

/* --- lista de planos --- */
.admin-plano {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid rgba(28,23,32,.10);
}
.admin-plano:first-child { border-top: 0; }

.admin-plano-corpo { flex: 1; }

.admin-plano-nome { font-size: 15px; font-weight: 600; }

.admin-plano-preco {
  font-family: var(--display);
  font-size: 19px;
  margin-top: 1px;
}

.admin-plano-inclui {
  font-size: 13px;
  color: var(--fumo);
  margin-top: 4px;
}

.etiqueta-off {
  display: inline-block;
  font-family: var(--util);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--erro);
  border: 1px solid var(--erro);
  border-radius: 2px;
  padding: 1px 5px;
  margin-left: 7px;
  vertical-align: 2px;
}

/* --- pedido de remoção (área do responsável) --- */
.pedir-remocao {
  flex-basis: 100%;
  text-align: left;
  margin-top: 10px;
}

.nota-pedido {
  flex-basis: 100%;
  font-size: 13px;
  color: var(--erro);
  background: #FBF0ED;
  border-left: 2px solid var(--erro);
  padding: 9px 11px;
  margin: 10px 0 0;
}

/* --- pedidos de remoção (admin) --- */
.pedido {
  padding: 15px 0;
  border-top: 1px solid rgba(28,23,32,.10);
}
.pedido:first-child { border-top: 0; }

.pedido-quem { font-size: 15px; font-weight: 600; }

.pedido-meta {
  font-family: var(--util);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fumo);
  margin-top: 3px;
}

.pedido-motivo {
  font-size: 14px;
  color: #4A424E;
  background: #FAF7FB;
  border-left: 2px solid rgba(51,36,58,.3);
  padding: 9px 11px;
  margin: 9px 0 0;
}

.pedido-acoes { display: flex; gap: 9px; margin-top: 12px; }

.btn-aprovar, .btn-recusar {
  padding: 8px 14px;
  font-family: var(--corpo);
  font-size: 13px;
  font-weight: 600;
  border-radius: 2px;
  cursor: pointer;
}
.btn-aprovar {
  color: #fff;
  background: var(--erro);
  border: 0;
}
.btn-recusar {
  color: var(--ameixa);
  background: #fff;
  border: 1px solid var(--ameixa);
}
.btn-aprovar[disabled], .btn-recusar[disabled] { opacity: .5; cursor: default; }

.pedido-decidido {
  display: inline-block;
  margin-top: 9px;
  font-family: var(--util);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fumo);
}

/* --- livro de turmas --- */
.registo {
  padding: 12px 0;
  border-top: 1px solid rgba(28,23,32,.10);
}
.registo:first-child { border-top: 0; }

.registo-linha { font-size: 15px; font-weight: 600; }

.registo-meta {
  font-family: var(--util);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fumo);
  margin-top: 3px;
}

.registo-resp {
  font-size: 13px;
  color: var(--fumo);
  margin-top: 3px;
}

/* =====================================================================
   PLANOS À VENDA
   ===================================================================== */

.banner { margin-bottom: 0; margin-top: 20px; }

.planos-bloco { margin-top: 26px; }

.plano-cartao {
  border: 1px solid rgba(28,23,32,.16);
  border-radius: 3px;
  padding: 18px;
  margin-bottom: 12px;
  transition: border-color .15s ease;
}
.plano-cartao:hover { border-color: var(--ameixa); }

.plano-topo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.plano-nome { font-size: 16px; font-weight: 600; }

.plano-preco {
  font-family: var(--display);
  font-size: 26px;
  line-height: 1;
  white-space: nowrap;
}

.plano-desc {
  font-size: 14px;
  color: var(--fumo);
  margin: 8px 0 0;
}

.plano-lista {
  list-style: none;
  padding: 0;
  margin: 13px 0 0;
}

.plano-lista li {
  font-size: 14px;
  padding: 3px 0 3px 20px;
  position: relative;
}
.plano-lista li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--ambar);
  font-weight: 700;
}

.plano-educandos {
  font-family: var(--util);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ameixa);
  margin-top: 11px;
}

.escolher-educandos {
  margin: 14px 0 0;
  padding: 12px;
  background: #FAF7FB;
  border-radius: 2px;
}

.escolher-educandos p {
  font-family: var(--util);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fumo);
  margin: 0 0 8px;
}

.btn-comprar {
  width: 100%;
  margin-top: 14px;
  padding: 13px;
  font-family: var(--corpo);
  font-size: 15px;
  font-weight: 600;
  color: var(--osso);
  background: var(--ameixa);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
}
.btn-comprar:hover { background: var(--ameixa-alta); }
.btn-comprar[disabled] { opacity: .55; cursor: default; }

.matricula-ativa {
  padding: 13px;
  background: #EEF5F0;
  border-left: 2px solid #2C5F3F;
  border-radius: 2px;
  font-size: 14px;
  margin-bottom: 10px;
}

/* --- pacote recomendado --- */
.plano-cartao.recomendado {
  border-color: var(--ameixa);
  border-width: 2px;
  padding: 16px 17px;
  background: #FCFAFC;
}

.fita-recomendado {
  display: inline-block;
  font-family: var(--util);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--osso);
  background: var(--ameixa);
  border-radius: 2px;
  padding: 4px 9px;
  margin: 0 0 12px;
}

.plano-poupanca {
  font-size: 13px;
  font-weight: 600;
  color: #2C5F3F;
  margin: 7px 0 0;
}

/* =====================================================================
   LEITOR DE VÍDEO
   ===================================================================== */

.leitor-fundo {
  position: fixed;
  inset: 0;
  background: rgba(20,15,23,.94);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.leitor-caixa {
  width: 100%;
  max-width: 880px;
}

.leitor-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.leitor-titulo {
  font-family: var(--display);
  font-size: 23px;
  font-weight: 400;
  color: var(--osso);
  margin: 0;
}

.leitor-area {
  font-family: var(--util);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ambar);
  margin: 0 0 5px;
}

.leitor-fechar {
  font-family: var(--util);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--osso);
  background: none;
  border: 1px solid rgba(237,234,227,.4);
  border-radius: 2px;
  padding: 7px 13px;
  cursor: pointer;
  flex-shrink: 0;
}
.leitor-fechar:hover { background: rgba(237,234,227,.12); }

.leitor-video {
  width: 100%;
  max-height: 65vh;
  background: #000;
  border-radius: 3px;
  display: block;
}

.leitor-desc {
  font-size: 14px;
  color: #C9BFCC;
  margin: 13px 0 0;
}

.leitor-sem-video {
  padding: 44px 20px;
  text-align: center;
  color: #C9BFCC;
  background: rgba(237,234,227,.06);
  border: 1px dashed rgba(237,234,227,.28);
  border-radius: 3px;
  font-size: 15px;
}

.leitor-acoes {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.btn-concluir {
  flex: 1;
  padding: 13px;
  font-family: var(--corpo);
  font-size: 15px;
  font-weight: 600;
  color: var(--tinta);
  background: var(--ambar);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
}
.btn-concluir.feito {
  color: var(--osso);
  background: none;
  border: 1px solid rgba(237,234,227,.4);
}

/* o ✓ deixa de ser o botão de marcar: agora abre-se a aula */
.aula { align-items: center; }

/* =====================================================================
   PAINEL DE RESUMO
   ===================================================================== */

.numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px;
  background: rgba(28,23,32,.10);
  border: 1px solid rgba(28,23,32,.10);
}

.numero {
  background: #fff;
  padding: 16px 14px;
}

.numero-valor {
  font-family: var(--display);
  font-size: 30px;
  line-height: 1;
  color: var(--ameixa);
}

.numero-etiqueta {
  font-family: var(--util);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fumo);
  margin-top: 7px;
}

.numero-nota {
  font-size: 12px;
  color: var(--fumo);
  margin-top: 4px;
}

/* --- linhas de receita e inscrições --- */
.linha-dados {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid rgba(28,23,32,.10);
}
.linha-dados:first-child { border-top: 0; }

.linha-nome { font-size: 15px; }

.linha-valor {
  font-family: var(--display);
  font-size: 18px;
  white-space: nowrap;
}

.linha-sub {
  font-family: var(--util);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fumo);
  margin-top: 2px;
}

.conferencia-ok {
  padding: 12px 13px;
  background: #EEF5F0;
  border-left: 2px solid #2C5F3F;
  border-radius: 2px;
  font-size: 14px;
}

.conferencia-total {
  font-family: var(--display);
  font-size: 34px;
  color: var(--ameixa);
  margin-bottom: 4px;
}

/* =====================================================================
   CONVERSAS (admin)
   ===================================================================== */

.conversa {
  border-top: 1px solid rgba(28,23,32,.10);
  padding: 15px 0;
}
.conversa:first-child { border-top: 0; }

.conversa-topo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  cursor: pointer;
}

.conversa-quem { font-size: 15px; font-weight: 600; }

.conversa-email {
  font-family: var(--util);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--fumo);
  margin-top: 2px;
}

.conversa-quando {
  font-family: var(--util);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--fumo);
  white-space: nowrap;
}

.conversa-previa {
  font-size: 14px;
  color: var(--fumo);
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.por-responder {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ambar);
  margin-right: 7px;
  vertical-align: 1px;
}

.conversa-corpo { margin-top: 13px; }

.conversa-corpo .msg { font-size: 14px; }

.responder-caixa { margin-top: 12px; }

.responder-caixa textarea { min-height: 72px; }

/* contador de pendentes nas abas */
.aba-conta {
  display: inline-block;
  min-width: 17px;
  padding: 1px 5px;
  margin-left: 6px;
  font-size: 10px;
  line-height: 15px;
  text-align: center;
  color: var(--osso);
  background: var(--erro);
  border-radius: 9px;
  vertical-align: 1px;
}

/* --- contador de caracteres --- */
.contador {
  font-family: var(--util);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--fumo);
  text-align: right;
  margin: -10px 0 14px;
}
.contador.perto { color: var(--erro); }

/* --- contactos por converter --- */
.converter {
  padding: 13px 0;
  border-top: 1px solid rgba(28,23,32,.10);
}
.converter:first-child { border-top: 0; }

.converter-topo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.converter-nome { font-size: 15px; font-weight: 600; }

.converter-ha {
  font-family: var(--util);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--fumo);
  white-space: nowrap;
}

.converter-contactos {
  font-size: 13px;
  color: var(--fumo);
  margin-top: 3px;
}

.converter-contactos a {
  color: var(--ameixa);
  text-decoration: none;
}
.converter-contactos a:hover { text-decoration: underline; }

.converter-detalhe {
  font-family: var(--util);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fumo);
  margin-top: 5px;
}

.sem-telefone { color: var(--erro); }

.perigo-link { color: var(--erro); }

/* =====================================================================
   TURMAS
   ===================================================================== */

.turma {
  border: 1px solid rgba(28,23,32,.16);
  border-radius: 3px;
  padding: 16px;
  margin-bottom: 12px;
}

.turma-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.turma-nome { font-size: 16px; font-weight: 600; }

.turma-estado {
  font-family: var(--util);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
  white-space: nowrap;
}
.estado-rascunho { color: var(--fumo);  border: 1px solid var(--fumo); }
.estado-aberta   { color: var(--osso);  background: #2C5F3F; }
.estado-fechada  { color: var(--osso);  background: var(--fumo); }
.estado-realizada{ color: var(--osso);  background: var(--ameixa); }

.turma-dias {
  font-size: 14px;
  margin-top: 9px;
}

.turma-dia {
  display: flex;
  gap: 8px;
  padding: 2px 0;
}

.turma-dia-tipo {
  font-weight: 600;
  text-transform: capitalize;
  min-width: 88px;
}

.turma-local {
  font-size: 13px;
  color: var(--fumo);
  margin-top: 7px;
}

.turma-vagas {
  font-family: var(--util);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ameixa);
  margin-top: 9px;
}

.turma-vagas.cheia { color: var(--erro); }

.turma-alunos {
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid rgba(28,23,32,.10);
}

.turma-aluno {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  padding: 4px 0;
}

.turma-aluno-resp { color: var(--fumo); }

.turma-acoes { display: flex; gap: 10px; margin-top: 12px; }

.btn-inscrever {
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  font-family: var(--corpo);
  font-size: 15px;
  font-weight: 600;
  color: var(--osso);
  background: var(--ameixa);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
}
.btn-inscrever:hover { background: var(--ameixa-alta); }
.btn-inscrever[disabled] { opacity: .5; cursor: default; }

.inscrito-em {
  padding: 12px 13px;
  background: #EEF5F0;
  border-left: 2px solid #2C5F3F;
  border-radius: 2px;
  margin-bottom: 10px;
}

.inscrito-quem { font-size: 14px; font-weight: 600; }

.inscrito-detalhe {
  font-size: 13px;
  color: var(--fumo);
  margin-top: 3px;
}


/* =====================================================================
   ÁREAS COM ABAS (responsável / aluno)
   ===================================================================== */

.area-topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 40px 0 18px;
  color: var(--osso);
}

.area-nome {
  font-family: var(--display);
  font-weight: 400;
  font-size: 27px;
  line-height: 1.1;
  margin: 4px 0 0;
}

.area-topo .link { color: #C9BFCC; }

.abas-area {
  border-bottom-color: rgba(237,234,227,.25);
  margin-bottom: 22px;
}

.abas-area .aba { color: #B3A7B6; }
.abas-area .aba:hover { color: var(--osso); }
.abas-area .aba.ativa {
  color: var(--osso);
  border-bottom-color: var(--ambar);
}

.painel-area { display: none; }
.painel-area.ativo { display: block; }

/* grelha para os cartões respirarem em ecrã largo */
@media (min-width: 720px) {
  .painel-area .card { padding: 26px 28px; }

  .grelha-dois {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

/* --- lista de educandos mais compacta --- */
.educando {
  padding: 15px 0;
}

.educando-nome { font-size: 16px; }

/* --- turmas em grelha quando há espaço --- */
@media (min-width: 720px) {
  .turmas-grelha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
  }
  .turmas-grelha .turma,
  .turmas-grelha .inscrito-em { margin-bottom: 0; }

  .planos-grelha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 14px;
    align-items: start;
  }
  .planos-grelha .plano-cartao { margin-bottom: 0; }
}

/* --- estado vazio com mais presença --- */
.vazio-grande {
  text-align: center;
  padding: 36px 20px;
  color: var(--fumo);
}

.vazio-grande p { margin: 0 0 6px; font-size: 15px; }

.vazio-grande .sugestao {
  font-family: var(--util);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* --- inscrição ativa na aba Planos --- */
.inscricao {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid rgba(28,23,32,.10);
}
.inscricao:first-child { border-top: 0; }

.inscricao-quem { font-size: 16px; font-weight: 600; }

.inscricao-plano {
  font-family: var(--display);
  font-size: 18px;
  color: var(--ameixa);
  margin-top: 2px;
}

.inscricao-inclui {
  font-size: 13px;
  color: var(--fumo);
  margin-top: 4px;
}

.inscricao-desde {
  font-family: var(--util);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--fumo);
  white-space: nowrap;
  text-align: right;
}

/* --- educando sem plano --- */
.sem-plano {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--fumo);
}

.btn-ver-planos {
  font-family: var(--util);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ameixa);
  background: none;
  border: 1px solid var(--ameixa);
  border-radius: 2px;
  padding: 4px 9px;
  cursor: pointer;
}
.btn-ver-planos:hover { background: #FAF7FB; }

.plano-do-educando {
  flex-basis: 100%;
  font-family: var(--util);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #2C5F3F;
  margin-top: 6px;
}

/* --- dias da turma --- */
.dia-sessao {
  border: 1px solid rgba(28,23,32,.14);
  border-radius: 2px;
  padding: 12px 14px 2px;
  margin: 0 0 16px;
}

.dia-sessao legend {
  font-family: var(--util);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ameixa);
  padding: 0 6px;
}

.linha-tripla { display: flex; gap: 12px; }
.linha-tripla .campo:first-child { flex: 1.6; }
.linha-tripla .campo { flex: 1; }

@media (max-width: 520px) {
  .linha-tripla { flex-wrap: wrap; }
  .linha-tripla .campo:first-child { flex-basis: 100%; }
}

/* --- dias da turma: dia em destaque, horas por baixo --- */
.dia-bloco {
  padding: 10px 0;
  border-top: 1px solid rgba(28,23,32,.08);
}
.dia-bloco:first-child { border-top: 0; }

.dia-tipo {
  font-family: var(--util);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ambar);
  margin-bottom: 2px;
}

.dia-data {
  font-size: 15px;
  font-weight: 600;
  text-transform: capitalize;
}

.dia-horas {
  display: flex;
  gap: 20px;
  margin-top: 5px;
}

.dia-hora {
  font-size: 13px;
  color: var(--fumo);
}

.dia-hora strong {
  display: block;
  font-family: var(--util);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 400;
  margin-bottom: 1px;
}

.dia-hora span {
  font-family: var(--corpo);
  font-size: 15px;
  color: var(--tinta);
}

/* nas caixas escuras (sala do educando) inverter o contraste */
.presencial-bloco .dia-hora span,
.inscrito-em .dia-hora span { color: var(--tinta); }

/* --- voltar à montra, a partir do login --- */
.voltar-montra {
  text-align: center;
  margin: 0 0 26px;
}

.voltar-montra a {
  font-family: var(--util);
  font-size: 11px;
  letter-spacing: .12em;
  color: #B3A7B6;
  text-decoration: none;
}
.voltar-montra a:hover { color: var(--osso); }