/* =====================================================================
   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;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.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: 1080px;
  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: 1080px;
  margin: 0 auto;
  padding: 28px 20px 80px;
}

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

/* Com 1080px há espaço para os formulários e as listas respirarem. */
@media (min-width: 900px) {
  .admin-stage .card { padding: 28px 30px; }

  /* o painel de resumo ganha mais colunas */
  .numeros { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

.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: .12em;
  text-transform: uppercase;
  color: var(--fumo);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 10px 13px;
  cursor: pointer;
  white-space: nowrap;
}

/* Oito abas não cabem em ecrãs médios: deslizam sem barra visível. */
.abas {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.abas::-webkit-scrollbar { display: none; }

@media (max-width: 1120px) {
  .aba { font-size: 10px; letter-spacing: .06em; padding: 10px 8px; }
}
.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;
  max-width: 100%;
}

.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;
  max-width: 340px;
  margin: 0 auto;
  line-height: 1.6;
}

.vazio-grande .btn-secundario {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* --- 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); }

/* --- faixa do plano no topo das aulas --- */
.plano-topo-faixa {
  padding: 13px 15px;
  margin: -6px 0 22px;
  background: #FAF7FB;
  border-left: 2px solid var(--ambar);
  border-radius: 2px;
}

.plano-topo-nome {
  font-family: var(--display);
  font-size: 19px;
  color: var(--ameixa);
}

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

/* --- plano já adquirido, na lista de compra --- */
.ja-tens {
  margin: 14px 0 0;
  padding: 11px;
  text-align: center;
  font-family: var(--util);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #2C5F3F;
  background: #EEF5F0;
  border-radius: 2px;
}

/* =====================================================================
   MONTRA (admin)
   ===================================================================== */

.retrato-atual {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.retrato-atual img {
  width: 120px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid rgba(28,23,32,.16);
}

.retrato-nota {
  font-size: 13px;
  color: var(--fumo);
}

.galeria-admin {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.foto-item {
  border: 1px solid rgba(28,23,32,.14);
  border-radius: 2px;
  overflow: hidden;
}

.foto-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.foto-info {
  padding: 9px 11px;
}

.foto-legenda {
  font-size: 13px;
  color: var(--tinta);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.foto-ordem {
  font-family: var(--util);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--fumo);
  margin-top: 2px;
}

.foto-item .acao { margin-top: 6px; }

/* --- ações do cabeçalho da administração --- */
.admin-acoes {
  display: flex;
  gap: 18px;
  align-items: center;
}

.admin-acoes a.link { text-decoration: none; }
.admin-acoes a.link:hover { text-decoration: underline; }

/* --- repor palavra-passe do educando --- */
.repor-pass {
  flex-basis: 100%;
  text-align: left;
  margin-top: 8px;
  color: var(--ameixa);
}

/* =====================================================================
   MONTRA — sub-abas e blocos
   ===================================================================== */

.sub-abas {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.sub-aba {
  font-family: var(--corpo);
  font-size: 13px;
  font-weight: 500;
  color: var(--fumo);
  background: #fff;
  border: 1px solid rgba(28,23,32,.16);
  border-radius: 2px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.sub-aba:hover { background: #FAF7FB; }
.sub-aba.ativa {
  color: var(--osso);
  background: var(--ameixa);
  border-color: var(--ameixa);
}

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

/* --- grupos de campos --- */
.grupo-textos {
  padding: 16px 0 4px;
  border-top: 1px solid rgba(28,23,32,.10);
}
.grupo-textos:first-of-type { border-top: 0; padding-top: 0; }

.grupo-nome {
  font-family: var(--util);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ameixa);
  margin: 0 0 12px;
}

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

.bloco-num {
  font-family: var(--util);
  font-size: 11px;
  color: var(--ambar);
  padding-top: 3px;
  min-width: 24px;
}

.bloco-corpo { flex: 1; }

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

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

.bloco.oculto .bloco-titulo,
.bloco.oculto .bloco-texto { opacity: .45; }

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

/* --- aceitação dos termos --- */
.opcao-linha.aceitar {
  align-items: flex-start;
  gap: 11px;
  margin: 4px 0 18px;
  font-size: 14px;
  line-height: 1.5;
  color: #4A424E;
}

.opcao-linha.aceitar input { margin-top: 3px; flex-shrink: 0; }

.opcao-linha.aceitar a {
  color: var(--ameixa);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- rodapé discreto na entrada --- */
.rodape-legal-mini {
  text-align: center;
  margin: 26px 0 0;
  font-family: var(--util);
  font-size: 10px;
  letter-spacing: .12em;
}

.rodape-legal-mini a {
  color: #B3A7B6;
  text-decoration: none;
}
.rodape-legal-mini a:hover { color: var(--osso); }

/* =====================================================================
   CONTACTOS DO SITE (admin)
   ===================================================================== */

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

.contacto.novo {
  border-left: 2px solid var(--ambar);
  padding-left: 14px;
}

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

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

.contacto-estado {
  display: inline-block;
  font-family: var(--util);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 2px 7px;
  margin-left: 9px;
  vertical-align: 2px;
}

.estado-novo       { color: var(--tinta); background: var(--ambar); }
.estado-respondido { color: #2C5F3F; border: 1px solid #2C5F3F; }
.estado-arquivado  { color: var(--fumo); border: 1px solid var(--fumo); }

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

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

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

.contacto-mensagem {
  font-size: 15px;
  line-height: 1.6;
  margin: 12px 0 0;
  padding: 12px 14px;
  background: #FAF7FB;
  border-radius: 2px;
  white-space: pre-wrap;
  /* Palavras longas sem espaços saíam para fora do cartão. */
  overflow-wrap: anywhere;
  word-break: break-word;
}

.contacto-nota {
  font-size: 13px;
  color: #4A424E;
  margin: 9px 0 0;
  padding: 9px 12px;
  background: #F5F2EC;
  border-left: 2px solid var(--fumo);
  border-radius: 2px;
}

.contacto-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
}

.contacto-acoes a.acao { text-decoration: none; }
.contacto-acoes a.acao:hover { text-decoration: underline; }

/* --- campo desativado (email do perfil) --- */
.campo input:disabled {
  background: #F0EDF1;
  color: var(--fumo);
  cursor: not-allowed;
}

/* --- conversa marcada como resolvida --- */
.etiqueta-resolvida {
  display: inline-block;
  font-family: var(--util);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #2C5F3F;
  border: 1px solid #2C5F3F;
  border-radius: 2px;
  padding: 1px 6px;
  margin-left: 8px;
  vertical-align: 2px;
}

/* =====================================================================
   DIÁLOGO (inscrição por telefone)
   ===================================================================== */

.modal-fundo {
  position: fixed;
  inset: 0;
  background: rgba(20,15,23,.6);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}

.modal-caixa {
  width: 100%;
  max-width: 480px;
  background: #fff;
  border-radius: 3px;
  padding: 28px 26px 24px;
  box-shadow: 0 24px 60px -20px rgba(20,15,23,.6);
}

/* --- inscritos: origem e ações --- */
.turma-aluno {
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid rgba(28,23,32,.06);
}
.turma-aluno:last-child { border-bottom: 0; }

.turma-aluno-dir {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-shrink: 0;
}

.etiqueta-telefone {
  display: inline-block;
  font-family: var(--util);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ameixa);
  border: 1px solid var(--ameixa);
  border-radius: 2px;
  padding: 1px 6px;
  margin-left: 8px;
  vertical-align: 1px;
}

.inscricao-nota {
  font-size: 12px;
  color: var(--fumo);
  margin-top: 3px;
  max-width: 420px;
}

/* =====================================================================
   PRESENÇAS
   ===================================================================== */

.presenca-opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.presenca-opcao {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 5px 10px;
  border: 1px solid rgba(28,23,32,.18);
  border-radius: 2px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.presenca-opcao:hover { background: #FAF7FB; }

.presenca-opcao input { margin: 0; accent-color: var(--ameixa); }

.presenca-opcao.escolhida {
  border-color: var(--ameixa);
  background: #FAF7FB;
  font-weight: 600;
}

.destaque-acao {
  color: var(--osso);
  background: var(--ameixa);
  border-radius: 2px;
  padding: 5px 12px;
}
.destaque-acao:hover { background: var(--ameixa-alta); }

.acao[disabled] {
  opacity: .4;
  cursor: not-allowed;
  text-decoration: none;
}

/* --- estado no livro de turmas --- */
.presenca-etiqueta {
  display: inline-block;
  font-family: var(--util);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 1px 7px;
  margin-left: 9px;
  vertical-align: 2px;
}

.pres-presente    { color: #2C5F3F; border: 1px solid #2C5F3F; }
.pres-ausente     { color: var(--erro); border: 1px solid var(--erro); }
.pres-justificado { color: var(--fumo); border: 1px solid var(--fumo); }

/* =====================================================================
   PERFIL DE TALENTO
   ===================================================================== */

.estado-perfil {
  display: inline-block;
  font-family: var(--util);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 2px 8px;
  margin-left: 9px;
  vertical-align: 2px;
}

.est-rascunho     { color: var(--fumo);  border: 1px solid var(--fumo); }
.est-em_validacao { color: var(--tinta); background: var(--ambar); }
.est-aprovado     { color: #2C5F3F;      border: 1px solid #2C5F3F; }
.est-recusado     { color: var(--erro);  border: 1px solid var(--erro); }

/* o estado sozinho, na área do aluno */
#talento-estado .estado-perfil,
#al-talento-estado .estado-perfil {
  margin: 0 0 14px;
}

.foto-talento {
  width: 140px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid rgba(28,23,32,.16);
  display: block;
  margin-bottom: 14px;
}

/* --- lista no painel --- */
.talento {
  padding: 18px 0;
  border-top: 1px solid rgba(28,23,32,.10);
}
.talento:first-child { border-top: 0; }

.talento.a-decidir {
  border-left: 2px solid var(--ambar);
  padding-left: 16px;
}

.talento-topo {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.talento-check { margin-top: 5px; accent-color: var(--ameixa); }

.talento-foto {
  width: 90px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
}

.talento-corpo { flex: 1; }

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

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

.talento-ficha {
  font-family: var(--util);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--fumo);
  margin-top: 5px;
}

.talento-apresentacao {
  font-size: 14px;
  line-height: 1.6;
  color: #4A424E;
  margin: 9px 0 0;
  max-width: 560px;
}

.talento-nota {
  font-size: 13px;
  color: #4A424E;
  margin: 9px 0 0;
  padding: 9px 12px;
  background: #F5F2EC;
  border-left: 2px solid var(--fumo);
  border-radius: 2px;
  max-width: 560px;
}

.talento-acoes {
  display: flex;
  gap: 14px;
  margin-top: 12px;
}

#acoes-lote { margin-bottom: 18px; }

/* =====================================================================
   ÁREA PROFISSIONAL
   ===================================================================== */

.talentos-grelha {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}

.talento-cartao {
  border: 1px solid rgba(28,23,32,.14);
  border-radius: 3px;
  overflow: hidden;
  background: #fff;
}

.talento-cartao-foto {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

.talento-cartao-corpo { padding: 14px 15px 16px; }

.talento-cartao .talento-ficha { margin-top: 0; }
.talento-cartao .talento-ficha + .talento-ficha { margin-top: 4px; }

.talento-cartao .talento-apresentacao {
  font-size: 13px;
  margin-top: 9px;
}

.talento-cartao .btn-secundario {
  font-size: 13px;
  padding: 9px;
}

.talento-cartao .ja-tens {
  font-size: 10px;
  padding: 9px;
}