* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  font-family: "Fredoka", sans-serif;
  background-color: #ffffff;
  color: #333333;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.topo {
  width: 100%;
  padding: 24px 6%;
}

.logo-texto {
  color: #e0bbe4;
  font-size: 30px;
  font-weight: 700;
  text-decoration: none;
}

/* =====================================================================
   01 | PÁGINA INICIAL
   Layout da capa, logotipo e botões de entrada.
   ===================================================================== */
.pagina-inicial {
  width: 100%;
}

.apresentacao {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 70px;
  padding: 40px 8%;
}

.area-logo {
  width: 40%;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-150px, -25px);
}

.logo-animada {
  width: 280px;
  height: auto;
  animation: flutuar 3s ease-in-out infinite;
}

@keyframes flutuar {
  0% {
    transform: translateY(0) rotate(0deg);
  }

  25% {
    transform: translateY(-8px) rotate(-1deg);
  }

  50% {
    transform: translateY(-14px) rotate(0deg);
  }

  75% {
    transform: translateY(-8px) rotate(1deg);
  }

  100% {
    transform: translateY(0) rotate(0deg);
  }
}

.conteudo-apresentacao {
  width: 45%;
  max-width: 480px;
  text-align: center;
}

.conteudo-apresentacao h1 {
  max-width: 500px;
  margin: 0 auto 24px;
  color: #333333;
  font-family: "Fredoka", sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}

.conteudo-apresentacao p {
  max-width: 420px;
  margin: 0 auto 28px;
  color: #777777;
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
}

.opcoes-entrada {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.botao-entrada {
  width: 100%;
  max-width: 330px;
  min-height: 48px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #ffffff;
  color: #88a7d0;
  border: 2px solid #e5e5e5;
  border-radius: 12px;
  box-shadow: 0 4px 0 #d8d8d8;
  font-family: "Fredoka", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: 0.2s ease;
}

/* Botão principal - aluno */

.botao-aluno {
  background-color: #e0bbe4;
  color: #ffffff;
  border-color: #e0bbe4;
  box-shadow: 0 4px 0 #c79bcc;
}

.botao-entrada {
  background-color: #fafafa;
}

.botao-aluno {
  background-color: #e0bbe4;
}

.botao-entrada {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #d8d8d8;
}

.botao-aluno {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #c79bcc;
}

@media (max-width: 768px) {
  .topo {
    padding: 20px;
  }

  .apresentacao {
    flex-direction: column;
    gap: 20px;
    padding: 30px 20px;
  }

  .area-logo {
    width: 100%;
    min-height: 180px;
  }

  .logo-animada {
    width: 250px;
  }

  .conteudo-apresentacao {
    width: 100%;
    max-width: 500px;
    text-align: center;
  }

  .conteudo-apresentacao h1 {
    font-size: 26px;
  }

  .botao-entrada {
    min-height: 50px;
  }
}

/* =====================================================================
   02 | SECRETARIA
   Página inicial da secretaria e seus cartões.
   ===================================================================== */
.pagina-secretaria {
  margin: 0;
  min-height: 100vh;
  font-family: "Fredoka", sans-serif;
  background-color: #ffffff;
  color: #4a3b52;
}

.cabecalho-secretaria {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 8%;
  background-color: transparent;
  border-bottom: 4px solid #e5e5e5;
}

.cabecalho-secretaria h1 {
  margin: 0;
  color: #7b5c8e;
  font-size: 28px;
}

.cabecalho-secretaria p {
  margin: 4px 0 0;
  font-weight: bold;
  color: #6c5874;
}

.botao-sair {
  font-family: "Fredoka", sans-serif;
  padding: 12px 24px;
  background-color: #ffffff;
  color: #88a7d0;
  border: 2px solid #e5e5e5;
  border-bottom: 5px solid #d8d8d8;
  border-radius: 14px;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  transition: 0.15s;
}

.botao-sair {
  background-color: #f7f7f7;
}

.botao-sair {
  transform: translateY(2px);
  border-bottom-width: 3px;
}

.painel-secretaria {
  width: 90%;
  max-width: 1000px;
  margin: 40px auto;
}

.boas-vindas {
  margin-bottom: 32px;
}

.boas-vindas h2 {
  margin-bottom: 8px;
  font-size: 30px;
}

.boas-vindas p {
  color: #7d6d84;
  font-size: 18px;
}

.opcoes-secretaria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
}

.card-secretaria {
  min-height: 220px;
  padding: 28px 20px;
  border: 2px solid #d7b7dd;
  border-bottom: 6px solid #b996c5;
  border-radius: 22px;
  background-color: white;
  text-align: left;
  cursor: pointer;
  transition: 0.2s;
  font-family: "Fredoka", sans-serif;
}

.card-secretaria {
  transform: translateY(-3px);
  background-color: #fcf8fd;
}

.card-secretaria {
  transform: translateY(2px);
  border-bottom-width: 3px;
}

.icone-card {
  display: block;
  margin-bottom: 18px;
  font-size: 42px;
}

.card-secretaria h3 {
  margin: 0 0 10px;
  color: #7b5c8e;
  font-size: 22px;
}

.card-secretaria p {
  margin: 0;
  color: #7b6f80;
  line-height: 1.5;
}

@media (max-width: 600px) {
  .cabecalho-secretaria {
    padding: 20px;
  }

  .cabecalho-secretaria h1 {
    font-size: 22px;
  }

  .painel-secretaria {
    margin-top: 28px;
  }
}

.pagina-secretaria .logo-texto {
  margin: 0;
  color: #e0bbe4;
  font-size: 27px;
  font-weight: 900;
  text-decoration: none;
}

/* =====================================================================
   03 | LOGIN DA SECRETARIA
   Formulários e apresentação do acesso.
   ===================================================================== */
.pagina-login-secretario {
  margin: 0;
  min-height: 100vh;
  font-family: "Fredoka", sans-serif;
  background-color: #f7f1fa;
  color: #4b4b4b;
}

.fechar-login {
  position: absolute;
  top: 24px;
  left: 28px;
  color: #afafaf;
  font-size: 36px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
}

.fechar-login {
  color: #888888;
}

.area-login-secretario {
  width: 90%;
  max-width: 350px;
  margin: 0 auto;
  padding-top: 40px;
}

.titulo-login-secretario {
  margin: 0 0 28px;
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  color: #4b4b4b;
}

.form-secretario {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.campo-login-secretario {
  width: 100%;
  padding: 15px 16px;
  border: 2px solid #e5e5e5;
  border-radius: 14px;
  background-color: #f7f7f7;
  font-family: "Fredoka", sans-serif;
  font-size: 17px;
  color: #4b4b4b;
  outline: none;
}

.campo-login-secretario {
  border-color: #c7b2d6;
  background-color: #ffffff;
}

.campo-login-secretario::placeholder {
  color: #9e9e9e;
}

.mensagem-login-secretario {
  min-height: 20px;
  margin: 2px 0 4px;
  color: #e45b5b;
  font-size: 15px;
  font-weight: 600;
}

.botao-entrar-secretario {
  width: 100%;
  padding: 14px;
  border: none;
  border-bottom: 5px solid #806897;
  border-radius: 14px;
  background-color: #957dad;
  color: #ffffff;
  font-family: "Fredoka", sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.15s;
}

.botao-entrar-secretario {
  background-color: #a38bb9;
}

.botao-entrar-secretario {
  transform: translateY(2px);
  border-bottom-width: 3px;
}

.termos-login {
  margin-top: 34px;
  text-align: center;
  font-family: "Fredoka", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #b8b8b8;
}

.termos-login p {
  margin: 0 0 18px;
}

.termos-login a {
  color: #9d9d9d;
  font-weight: 600;
  text-decoration: none;
}

.termos-login a {
  text-decoration: underline;
}

#senha-secretario {
  font-size: 16px;
  letter-spacing: 0px;
}

body.pagina-carregada {
  opacity: 1;
}

body.pagina-saindo {
  opacity: 0;
}

/* =====================================================================
   04 | TURMAS E CADASTROS
   Turmas, alunos, professores e formulários relacionados.
   ===================================================================== */
.pagina-turmas {
  min-height: 100vh;
  font-family: "Fredoka", sans-serif;
}

.cabecalho-turmas {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 40px;
  border-bottom: 1px solid #e5e5e5;
}

.botao-voltar {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #957dad;
  border-radius: 12px;
  text-decoration: none;
  transition: 0.2s ease;
}

.seta-voltar {
  width: 14px;
  height: 14px;
  border-left: 3px solid #957dad;
  border-bottom: 3px solid #957dad;
  transform: rotate(45deg);
  margin-left: 5px;
}

.botao-voltar {
  background-color: #957dad;
}

.botao-voltar .seta-voltar {
  border-color: white;
}

.titulo-turmas {
  font-size: 26px;
  color: #957dad;
}

.conteudo-turmas {
  width: 90%;
  max-width: 1100px;
  margin: 40px auto;
}

.topo-turmas {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 35px;
}

.topo-turmas h2 {
  font-size: 26px;
  color: #5b5b5b;
  margin-bottom: 6px;
}

.topo-turmas p {
  font-size: 15px;
  color: #777777;
}

.botao-nova-turma {
  border: none;
  border-radius: 14px;
  padding: 14px 22px;
  background-color: #957dad;
  color: white;
  font-family: "Fredoka", sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  padding-top: 14px;
}

.botao-nova-turma {
  opacity: 0.9;
}

.lista-series {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card-serie {
  background-color: white;
  border: 2px solid #e5e5e5;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 4px 0 #dddddd;
}

.card-serie h3 {
  font-size: 22px;
  color: #957dad;
  margin-bottom: 14px;
}

.turmas-da-serie {
  font-size: 15px;
  color: #888888;
}

.fundo-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.45);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.fundo-modal.ativo {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.formulario-nova-turma {
  width: 100%;
  max-width: 430px;
  padding: 28px;
  background-color: #ffffff;
  border: 2px solid #e5e5e5;
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: translateY(20px) scale(0.98);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.fundo-modal.ativo .formulario-nova-turma {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.formulario-nova-turma h3 {
  margin-bottom: 20px;
  color: #957dad;
  font-size: 24px;
}

.formulario-nova-turma label {
  display: block;
  margin-top: 14px;
  margin-bottom: 7px;
  color: #5b5b5b;
  font-weight: 600;
}

.formulario-nova-turma select,
.formulario-nova-turma input {
  display: block;
  width: 100%;
  padding: 13px;
  border: 2px solid #dddddd;
  border-radius: 12px;
  background-color: #ffffff;
  color: #5b5b5b;
  font-family: "Fredoka", sans-serif;
  font-size: 16px;
  outline: none;
  transition: border-color 0.2s ease;
}

.formulario-nova-turma select,
.formulario-nova-turma input {
  border-color: #957dad;
}

.botao-salvar-turma {
  width: 100%;
  margin-top: 22px;
  padding: 13px;
  border: none;
  border-radius: 12px;
  background-color: #957dad;
  color: #ffffff;
  font-family: "Fredoka", sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s ease;
}

.botao-salvar-turma {
  opacity: 0.9;
}

.botao-salvar-turma {
  transform: translateY(2px);
}

@media (max-width: 600px) {
  .fundo-modal {
    padding: 16px;
  }

  .formulario-nova-turma {
    padding: 22px;
    border-radius: 18px;
  }
}

.item-turma {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  margin-top: 10px;
  background-color: #faf8fc;
  border: 2px solid #e5e5e5;
  border-radius: 14px;
  transition: 0.2s ease;
}

.item-turma {
  border-color: #957dad;
  background-color: #f8f3fb;
}

.nome-item-turma {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #5b5b5b;
  font-size: 16px;
  font-weight: 600;
}

.nome-item-turma::after {
  content: "›";
  color: #957dad;
  font-size: 22px;
  font-weight: 600;
  transition: 0.2s ease;
}

.item-turma .nome-item-turma::after {
  transform: translateX(3px);
}

.acoes-turma {
  display: flex;
  align-items: center;
  gap: 7px;
}

.botao-editar-turma,
.botao-excluir-turma {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #e5e5e5;
  border-radius: 10px;
  background-color: #ffffff;
  font-size: 15px;
  cursor: pointer;
  transition: 0.2s ease;
}

.botao-editar-turma {
  border-color: #957dad;
  background-color: #f5eff8;
}

.botao-excluir-turma {
  border-color: #e59a9a;
  background-color: #fff2f2;
}

.botao-editar-turma,
.botao-excluir-turma {
  transform: translateY(2px);
}

.cabecalho-pagina {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 40px;
  border-bottom: 1px solid #e5e5e5;
}

.cabecalho-pagina h1 {
  font-size: 26px;
  color: #957dad;
}

.conteudo-alunos {
  width: 90%;
  max-width: 1100px;
  margin: 40px auto;
}

.topo-alunos {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 35px;
}

.topo-alunos h2 {
  font-size: 26px;
  color: #5b5b5b;
  margin-bottom: 6px;
}

.topo-alunos p {
  font-size: 15px;
  color: #777777;
}

.botao-novo-aluno {
  border: none;
  border-radius: 14px;
  padding: 14px 22px;
  background-color: #957dad;
  color: #ffffff;
  font-family: "Fredoka", sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s ease;
}

.botao-novo-aluno {
  opacity: 0.9;
}

.botao-novo-aluno {
  transform: translateY(2px);
}

.card-lista-alunos {
  padding: 22px;
  background-color: #ffffff;
  border: 2px solid #e5e5e5;
  border-radius: 18px;
  box-shadow: 0 4px 0 #dddddd;
}

.card-lista-alunos h3 {
  margin-bottom: 14px;
  color: #957dad;
  font-size: 22px;
}

.lista-alunos {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mensagem-sem-alunos {
  margin: 0;
  padding: 18px;
  color: #888888;
  background-color: #faf8fc;
  border: 2px solid #e5e5e5;
  border-radius: 14px;
  text-align: center;
}

.item-aluno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background-color: #faf8fc;
  border: 2px solid #e5e5e5;
  border-radius: 14px;
  transition: 0.2s ease;
}

.item-aluno {
  border-color: #957dad;
  background-color: #f8f3fb;
}

.nome-aluno {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #5b5b5b;
  font-size: 16px;
  font-weight: 600;
}

.nome-aluno::after {
  content: "›";
  color: #957dad;
  font-size: 22px;
  font-weight: 600;
  transition: 0.2s ease;
}

.item-aluno .nome-aluno::after {
  transform: translateX(3px);
}

.acoes-aluno {
  display: flex;
  align-items: center;
  gap: 7px;
}

.botao-editar-aluno,
.botao-excluir-aluno {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #e5e5e5;
  border-radius: 10px;
  background-color: #ffffff;
  font-size: 15px;
  cursor: pointer;
  transition: 0.2s ease;
}

.botao-editar-aluno {
  border-color: #957dad;
  background-color: #f5eff8;
}

.botao-excluir-aluno {
  border-color: #e59a9a;
  background-color: #fff2f2;
}

.botao-editar-aluno,
.botao-excluir-aluno {
  transform: translateY(2px);
}

.formulario-novo-aluno {
  font-family: "Fredoka", sans-serif;
}

.botao-salvar-aluno {
  width: 100%;
  margin-top: 22px;
  padding: 13px;
  border: none;
  border-radius: 12px;
  background-color: #957dad;
  color: #ffffff;
  font-family: "Fredoka", sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s ease;
}

.botao-salvar-aluno {
  opacity: 0.9;
}

.botao-salvar-aluno {
  transform: translateY(2px);
}

@media (max-width: 650px) {
  .cabecalho-pagina {
    padding: 20px;
  }

  .conteudo-alunos {
    width: 90%;
    margin-top: 28px;
  }

  .topo-alunos {
    flex-direction: column;
    align-items: stretch;
  }

  .botao-novo-aluno {
    width: 100%;
  }
}

.matricula-aluno {
  color: #888888;
  font-size: 14px;
  font-weight: 500;
}

.grupo-turma-alunos {
  margin-bottom: 25px;
}

.titulo-turma-alunos {
  margin: 18px 4px 10px;
  color: #957dad;
  font-size: 20px;
  font-weight: 700;
}

.cabecalho-turma-alunos {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  margin-top: 12px;
  border: 2px solid #e5e5e5;
  border-radius: 14px;
  background-color: #ffffff;
  color: #5b5b5b;
  font-family: "Fredoka", sans-serif;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.2s ease;
}

.cabecalho-turma-alunos {
  border-color: #957dad;
  background-color: #f8f3fb;
}

.quantidade-alunos-turma {
  color: #957dad;
  font-size: 15px;
  font-weight: 600;
}

.lista-alunos-turma {
  display: none;
  margin-top: 8px;
}

.lista-alunos-turma.aberta {
  display: block;
}

.botao-vinculos-professor {
  padding: 9px 14px;
  border: 2px solid #957dad;
  border-radius: 10px;
  background-color: #ffffff;
  color: #957dad;
  font-family: "fredoka", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s ease;
}

.botao-vinculos-professor {
  background-color: #f5eff8;
}

.botao-vinculos-professor {
  transform: translateY(2px);
}

#nome-professor-vinculos {
  display: inline-block;
  margin: 8px 0 22px;
  padding: 8px 12px;
  border-radius: 10px;
  background-color: #f5eff8;
  color: #957dad;
  font-family: "Fredoka", sans-serif;
  font-size: 16px;
  font-weight: 600;
}

.titulo-vinculos-atuais {
  margin-top: 24px;
  margin-bottom: 10px;
  font-family: "Fredoka", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #5b5b5b;
}

.item-vinculo-professor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background-color: #f8f4fa;
  border: 1px solid #e4d9eb;
  border-radius: 8px;
  font-family: "Fredoka", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #5b5b5b;
  transition: 0.2s ease;
}

.item-vinculo-professor {
  border-color: #cbb6d8;
  background-color: #f5eff8;
}

.botao-excluir-vinculo {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 9px;
  background: #fff0f0;
  color: #d66565;
  font-family: "Fredoka", sans-serif;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s ease;
}

.botao-excluir-vinculo {
  background-color: #ffdede;
  transform: scale(1.05);
}

.botao-excluir-vinculo {
  transform: scale(0.95);
}

.formulario-vinculos-professor {
  width: 90vw;
  max-width: 850px;
}

.conteudo-vinculos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 20px;
}

/* LADO ESQUERDO */

.area-novo-vinculo {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* LADO DIREITO */

.area-vinculos-atuais {
  min-width: 0;
  padding: 18px;
  background-color: #faf8fb;
  border: 1px solid #e4d9eb;
  border-radius: 16px;
}

.area-vinculos-atuais h4 {
  margin-top: 0;
  margin-bottom: 14px;
  color: #5b5b5b;
  font-family: "Fredoka", sans-serif;
  font-size: 17px;
  font-weight: 600;
}

#lista-vinculos-professor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  max-height: 290px;
  overflow-y: auto;
  padding-right: 4px;
}

@media (max-width: 700px) {
  .formulario-vinculos-professor {
    width: 95vw;
    max-width: 95vw;
  }

  .conteudo-vinculos {
    grid-template-columns: 1fr;
  }

  #lista-vinculos-professor {
    max-height: 220px;
  }
}

/* =====================================================================
   05 | HORÁRIOS
   Grades de aulas, ações e formulários de horários.
   ===================================================================== */
.conteudo-horarios {
  width: 94%;
  max-width: 1400px;
  margin: 40px auto;
}

.topo-horarios {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}

.topo-horarios h2 {
  margin-bottom: 6px;
  color: #5b5b5b;
  font-size: 26px;
}

.topo-horarios p {
  color: #777777;
  font-size: 15px;
}

.filtro-horarios {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

.filtro-horarios label {
  color: #5b5b5b;
  font-size: 16px;
  font-weight: 600;
}

.filtro-horarios select {
  width: 260px;
  padding: 12px 14px;
  border: 2px solid #e5e5e5;
  border-radius: 12px;
  background-color: #ffffff;
  color: #5b5b5b;
  font-family: "Fredoka", sans-serif;
  font-size: 15px;
  outline: none;
  cursor: pointer;
  transition: 0.2s ease;
}

.filtro-horarios select {
  border-color: #957dad;
}

.grade-semanal {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.dia-horario {
  min-width: 0;
  padding: 14px;
  background-color: #ffffff;
  border: 2px solid #e5e5e5;
  border-radius: 18px;
  box-shadow: 0 4px 0 #dddddd;
}

.dia-horario h3 {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 2px solid #f0e8f3;
  color: #957dad;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
}

.aulas-do-dia {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mensagem-sem-horario {
  padding: 16px 8px;
  color: #999999;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

.card-aula {
  padding: 12px;
  background-color: #faf8fc;
  border: 1px solid #e4d9eb;
  border-radius: 12px;
  transition: 0.2s ease;
}

.card-aula {
  border-color: #cbb6d8;
  background-color: #f7f2f9;
  transform: translateY(-1px);
}

.numero-aula {
  display: inline-block;
  margin-bottom: 7px;
  color: #957dad;
  font-size: 13px;
  font-weight: 700;
}

.nome-disciplina-aula {
  display: block;
  margin-bottom: 4px;
  color: #4f4f4f;
  font-size: 15px;
  font-weight: 700;
}

.nome-professor-aula {
  display: block;
  margin-bottom: 8px;
  color: #777777;
  font-size: 13px;
}

.hora-aula {
  display: block;
  color: #888888;
  font-size: 12px;
  font-weight: 500;
}

.acoes-horario {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 10px;
}

.botao-editar-horario,
.botao-excluir-horario {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  background-color: #ffffff;
  font-size: 13px;
  cursor: pointer;
  transition: 0.2s ease;
}

.botao-editar-horario {
  border-color: #957dad;
  background-color: #f5eff8;
}

.botao-excluir-horario {
  border-color: #e59a9a;
  background-color: #fff2f2;
}

.linha-horarios-modal {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.linha-horarios-modal > div {
  min-width: 0;
}

@media (max-width: 1100px) {
  .grade-semanal {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .grade-semanal {
    grid-template-columns: 1fr;
  }

  .topo-horarios {
    flex-direction: column;
    align-items: stretch;
  }

  #botao-novo-horario {
    width: 100%;
  }

  .filtro-horarios {
    flex-direction: column;
    align-items: stretch;
  }

  .filtro-horarios select {
    width: 100%;
  }
}

@media (max-width: 500px) {
  .conteudo-horarios {
    width: 90%;
    margin-top: 28px;
  }

  .linha-horarios-modal {
    grid-template-columns: 1fr;
  }
}

.horario-aula-selecionada {
  margin-top: 16px;
  padding: 14px 16px;
  background-color: #f8f4fa;
  border: 1px solid #e4d9eb;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.titulo-horario-selecionado {
  color: #777777;
  font-size: 13px;
  font-weight: 500;
}

#texto-horario-aula {
  color: #957dad;
  font-size: 17px;
  font-weight: 700;
}

.campo-horarios-aula {
  margin-top: 18px;
}

.titulo-campo-horarios {
  display: block;
  margin-bottom: 10px;
  color: #5b5b5b;
  font-size: 16px;
  font-weight: 600;
}

.opcoes-horarios-aula {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.opcao-horario-aula {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 2px solid #e5e5e5;
  border-radius: 14px;
  background-color: #ffffff;
  cursor: pointer;
  transition: 0.2s ease;
}

.opcao-horario-aula {
  border-color: #cbb6d8;
  background-color: #faf7fc;
}

.checkbox-horario {
  appearance: none;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 2px solid #d8d8d8;
  border-radius: 50%;
  background-color: #ffffff;
  cursor: pointer;
  position: relative;
  transition: 0.2s ease;
}

.checkbox-horario {
  border-color: #29b765;
  background-color: #29b765;
}

.checkbox-horario:checked::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -54%);
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
}

.opcao-horario-aula div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.opcao-horario-aula strong {
  color: #5b5b5b;
  font-size: 14px;
  font-weight: 600;
}

.opcao-horario-aula span {
  color: #888888;
  font-size: 11px;
}

.opcao-horario-aula:has(.checkbox-horario:checked) {
  border-color: #9bd5b3;
  background-color: #f1fbf5;
}

@media (max-width: 600px) {
  .opcoes-horarios-aula {
    grid-template-columns: repeat(2, 1fr);
  }
}

.formulario-novo-horario {
  width: 92vw;
  max-width: 900px;
  max-height: 90vh;
  overflow-y: auto;
}

.conteudo-novo-horario {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 24px;
  align-items: start;
}

.area-dados-horario {
  min-width: 0;
}

.area-horarios-checkbox {
  min-width: 0;
  padding: 18px;
  background-color: #faf8fb;
  border: 1px solid #e4d9eb;
  border-radius: 16px;
}

.area-horarios-checkbox h4 {
  margin-bottom: 14px;
  color: #5b5b5b;
  font-size: 17px;
  font-weight: 600;
}

.area-horarios-checkbox .opcoes-horarios-aula {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 760px) {
  .formulario-novo-horario {
    width: 95vw;
    max-width: 95vw;
  }

  .conteudo-novo-horario {
    grid-template-columns: 1fr;
  }

  .area-horarios-checkbox .opcoes-horarios-aula {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
PÁGINA DO PROFESSOR
========================================================= */

/* LISTAS */

/* =====================================================================
   06 | COMPONENTES DO PROFESSOR
   Vínculos, atividades, modais e materiais.
   ===================================================================== */
.lista-vinculos-professor,
.lista-atividades-professor {
  width: 100%;
  min-height: 120px;
  padding: 20px;
  background-color: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 18px;
  box-sizing: border-box;
}

/* MENSAGENS VAZIAS */

.mensagem-sem-vinculos,
.mensagem-sem-atividades {
  margin: 0;
  color: #999999;
  text-align: center;
  font-size: 14px;
}

/* ========================================
FUTUROS CARDS DE ATIVIDADE
======================================== */

.card-atividade-professor {
  padding: 17px;
  margin-bottom: 12px;
  background-color: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 15px;
  transition: 0.2s ease;
}

.card-atividade-professor {
  transform: translateY(-2px);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.05);
}

.card-atividade-professor {
  margin-bottom: 0;
}

/* Modal de atividade */
.formulario-nova-atividade {
  width: 90vw;
  max-width: 560px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 28px;
}

.formulario-nova-atividade label {
  display: block;
  margin-top: 13px;
  margin-bottom: 6px;
  color: #5b5b5b;
  font-size: 14px;
  font-weight: 600;
}

.formulario-nova-atividade input,
.formulario-nova-atividade select,
.formulario-nova-atividade textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #dddddd;
  border-radius: 12px;
  box-sizing: border-box;
  font-family: "Fredoka", sans-serif;
  font-size: 14px;
  outline: none;
  transition: 0.2s ease;
}

.formulario-nova-atividade textarea {
  resize: vertical;
}

.formulario-nova-atividade input,
.formulario-nova-atividade select,
.formulario-nova-atividade textarea {
  border-color: #957dad;
  box-shadow: 0 0 0 3px rgba(149, 125, 173, 0.12);
}

.formulario-nova-atividade #salvar-atividade {
  margin-top: 18px;
  margin-bottom: 2px;
}

#descricao-atividade {
  display: block;
  width: 100%;
  min-height: 85px;
  max-height: 180px;
  padding: 13px 14px;
  box-sizing: border-box;
  border: 1px solid #dddddd;
  border-radius: 12px;
  background-color: #ffffff;
  color: #5b5b5b;
  font-family: "Fredoka", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  outline: none;
  resize: vertical;
  transition: 0.2s ease;
}

#descricao-atividade {
  border-color: #957dad;
  box-shadow: 0 0 0 3px rgba(149, 125, 173, 0.12);
}

#descricao-atividade::placeholder {
  color: #999999;
  font-family: "Fredoka", sans-serif;
}

/* ========================================
MATERIAIS DA ATIVIDADE
======================================== */

.campo-opcional {
  color: #999999;
  font-size: 12px;
  font-weight: 400;
}

/* ÁREA DE UPLOAD */

.campo-arquivos-atividade {
  width: 100%;
  padding: 14px;
  box-sizing: border-box;
  border: 2px dashed #ded4e5;
  border-radius: 14px;
  background-color: #faf8fc;
  text-align: center;
}

/* ESCONDE O INPUT PADRÃO */

#materiais-atividade {
  display: none;
}

/* BOTÃO DE ADICIONAR */

.botao-adicionar-arquivo {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0 !important;
  padding: 10px 16px;
  border-radius: 10px;
  background-color: #957dad;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: 0.2s ease;
}

.botao-adicionar-arquivo {
  transform: translateY(-1px);
  opacity: 0.92;
}

/* SÍMBOLO + */

.icone-adicionar-arquivo {
  font-size: 19px;
  line-height: 1;
}

/* TEXTO ABAIXO */

.texto-arquivos-atividade {
  margin: 8px 0 0;
  color: #999999;
  font-size: 12px;
}

/* LISTA DOS ARQUIVOS ESCOLHIDOS */

.lista-arquivos-atividade {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 10px;
}

/* CADA ARQUIVO */

.arquivo-atividade-selecionado {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #e7e0eb;
  border-radius: 9px;
  background-color: #ffffff;
  color: #666666;
  font-size: 12px;
  text-align: left;
}

/* =====================================================================
   07 | LOGIN DO PROFESSOR
   Acesso do professor.
   ===================================================================== */
.pagina-login-professor {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  background-color: #faf8fc;
  font-family: "Fredoka", sans-serif;
}

.area-login-professor {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 30px 20px;
  box-sizing: border-box;
}

.card-login-professor {
  width: 100%;
  max-width: 430px;
  padding: 32px;
  box-sizing: border-box;
  background-color: #ffffff;
  border: 1px solid #e8e1ec;
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
}

.card-login-professor .logo-texto {
  margin: 15px 0 30px;
  text-align: center;
}

.card-login-professor h2 {
  margin: 0 0 7px;
  color: #5b5b5b;
  font-size: 25px;
  font-weight: 700;
  text-align: center;
}

.descricao-login-professor {
  margin: 0 0 25px;
  color: #999999;
  font-size: 14px;
  text-align: center;
}

.card-login-professor label {
  display: block;
  margin: 15px 0 6px;
  color: #5b5b5b;
  font-size: 14px;
  font-weight: 600;
}

.card-login-professor input {
  width: 100%;
  padding: 14px;
  box-sizing: border-box;
  border: 1px solid #dddddd;
  border-radius: 12px;
  font-family: "Fredoka", sans-serif;
  font-size: 15px;
  outline: none;
  transition: 0.2s ease;
}

.card-login-professor input {
  border-color: #957dad;
  box-shadow: 0 0 0 3px rgba(149, 125, 173, 0.12);
}

.botao-login-professor {
  width: 100%;
  margin-top: 18px;
  padding: 14px;
  border: none;
  border-radius: 12px;
  background-color: #957dad;
  color: #ffffff;
  font-family: "Fredoka", sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s ease;
}

.botao-login-professor {
  transform: translateY(-1px);
  opacity: 0.93;
}

.mensagem-login {
  min-height: 18px;
  margin: 10px 0 0;
  color: #d45555;
  font-size: 13px;
  text-align: center;
}

.acoes-card-atividade {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.botao-excluir-atividade {
  padding: 9px 15px;
  border: 1px solid #e6b8b8;
  border-radius: 10px;
  background-color: #fff7f7;
  color: #c95d5d;
  font-family: "Fredoka", sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s ease;
}

.botao-excluir-atividade {
  background-color: #c95d5d;
  color: #ffffff;
  border-color: #c95d5d;
}

.botao-excluir-atividade {
  opacity: 0.6;
  cursor: pointer;
}

.botao-editar-atividade {
  padding: 9px 15px;
  border: 1px solid #d8c9e2;
  border-radius: 10px;
  background-color: #faf7fc;
  color: #957dad;
  font-family: "Fredoka", sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s ease;
}

.botao-editar-atividade {
  background-color: #957dad;
  color: #ffffff;
  border-color: #957dad;
}

.modal-materiais-atividade {
  width: 100%;
  max-width: 550px;
  max-height: calc(100vh - 40px);
  padding: 25px;
  box-sizing: border-box;
  overflow-y: auto;
  background-color: #ffffff;
  border-radius: 18px;
  font-family: "Fredoka", sans-serif;
}

.topo-modal-materiais {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.topo-modal-materiais h3 {
  margin: 0;
  color: #5b5b5b;
  font-size: 22px;
}

.topo-modal-materiais p {
  margin: 5px 0 0;
  color: #999999;
  font-size: 14px;
}

.fechar-modal-materiais {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  flex-shrink: 0;
  border: none;
  border-radius: 10px;
  background-color: #f5f2f7;
  color: #777777;
  font-size: 23px;
  cursor: pointer;
}

.lista-materiais-publicados {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.material-publicado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 13px 15px;
  border: 1px solid #ebe5ef;
  border-radius: 12px;
  background-color: #faf8fc;
}

.info-material-publicado {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.icone-material-publicado {
  flex-shrink: 0;
}

.nome-material-publicado {
  overflow: hidden;
  color: #5b5b5b;
  font-size: 14px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.botao-abrir-material {
  padding: 8px 13px;
  flex-shrink: 0;
  border-radius: 9px;
  background-color: #957dad;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.botao-materiais-atividade {
  padding: 9px 15px;
  border: 1px solid #c9d8ea;
  border-radius: 10px;
  background-color: #f7faff;
  color: #6f91bd;
  font-family: "Fredoka", sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s ease;
}

.botao-materiais-atividade {
  border-color: #88a7d0;
  background-color: #88a7d0;
  color: #ffffff;
}

.mensagem-sem-materiais {
  color: #999999;
  font-size: 14px;
  text-align: center;
}

.acoes-material-publicado {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.botao-excluir-material {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #e6b8b8;
  border-radius: 9px;
  background-color: #fff7f7;
  color: #c95d5d;
  font-family: "Fredoka", sans-serif;
  font-size: 20px;
  font-weight: 500;
  cursor: pointer;
  transition: 0.2s ease;
}

.botao-excluir-material {
  border-color: #c95d5d;
  background-color: #c95d5d;
  color: #ffffff;
}

.botao-excluir-material {
  opacity: 0.6;
  cursor: not-allowed;
}

/* =====================================================================
   08 | PAINEL DO PROFESSOR — BASE
   Menu lateral, cabeçalho, perfil, linha do tempo e responsividade.
   ===================================================================== */
.pagina-professor-nova {
  min-height: 100vh;
  margin: 0;
  background-color: #ffffff;
  font-family: "Fredoka", sans-serif;
}

/* MENU LATERAL */

.menu-professor {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 245px;
  padding: 32px 20px;
  box-sizing: border-box;
  background-color: #ffffff;
  border-right: 1px solid #e7e7e7;
  z-index: 20;
}

.marca-professor {
  margin: 0 12px 42px;
  color: #957dad;
  font-size: 25px;
  font-weight: 700;
}

.marca-professor span {
  display: block;
  font-size: 15px;
  font-weight: 500;
  opacity: 0.75;
}

/* NAVEGAÇÃO */

.navegacao-professor {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.item-menu-professor {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 13px 15px;
  border: 2px solid transparent;
  border-radius: 14px;
  background-color: transparent;
  color: #5f6368;
  font-family: "Fredoka", sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: 0.2s ease;
}

.item-menu-professor {
  background-color: #f8f5fa;
}

.item-menu-professor.ativo {
  border-color: #dfd0e8;
  background-color: #f8f3fb;
  color: #957dad;
}

.icone-menu-professor {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 12px;
  background-color: #ede3f2;
  color: #957dad;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.icone-menu-professor svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.item-menu-professor .icone-menu-professor {
  transform: translateY(-1px);
  background-color: #e4d5ec;
}

.item-menu-professor.ativo .icone-menu-professor {
  background-color: #957dad;
  color: #ffffff;
}

/* CONTEÚDO */

.area-principal-professor {
  min-height: 100vh;
  margin-left: 245px;
}

.topo-novo-professor {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 850px;
  margin: 0 auto;
  padding: 27px 35px 18px;
  box-sizing: border-box;
}

.saudacao-professor p {
  margin: 0 0 3px;
  color: #aaaaaa;
  font-size: 13px;
  font-weight: 500;
}

.saudacao-professor h1 {
  margin: 0;
  color: #4f4f4f;
  font-size: 25px;
  font-weight: 700;
}

/* PERFIL */

.botao-perfil-professor {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: none;
  border-radius: 14px;
  background-color: transparent;
  font-family: "Fredoka", sans-serif;
  cursor: pointer;
  transition: 0.2s ease;
}

.botao-perfil-professor {
  background-color: #f7f5f8;
}

.foto-perfil-professor {
  position: relative;
  width: 43px;
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid #e0d4e7;
  border-radius: 50%;
  background-color: #f0e8f4;
  color: #957dad;
  font-weight: 700;
}

.foto-perfil-professor img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.texto-perfil-professor {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.texto-perfil-professor strong {
  color: #555555;
  font-size: 14px;
}

.texto-perfil-professor span {
  color: #999999;
  font-size: 12px;
}

.seta-perfil-professor {
  color: #aaaaaa;
  font-size: 13px;
}

/* MENU DO PERFIL */

.menu-perfil-professor {
  position: absolute;
  top: 83px;
  right: 35px;
  width: min(250px, calc(100vw - 25px));
  padding: 15px;
  box-sizing: border-box;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  border: 1px solid #e6e1e8;
  border-radius: 16px;
  background-color: #ffffff;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
  transition: 0.2s ease;
  z-index: 30;
}

.menu-perfil-professor.ativo {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.cabecalho-menu-perfil {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 5px 4px 14px;
}

.foto-perfil-menu {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #f0e8f4;
  color: #957dad;
  font-weight: 700;
}

.cabecalho-menu-perfil div {
  display: flex;
  flex-direction: column;
}

.cabecalho-menu-perfil strong {
  color: #555555;
  font-size: 14px;
}

.cabecalho-menu-perfil span {
  color: #999999;
  font-size: 12px;
}

.menu-perfil-professor > button {
  width: 100%;
  padding: 11px;
  border: none;
  border-radius: 10px;
  background-color: transparent;
  color: #666666;
  font-family: "Fredoka", sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.menu-perfil-professor > button {
  background-color: #f7f5f8;
}

.divisor-menu-perfil {
  height: 1px;
  margin: 8px 0;
  background-color: #eeeeee;
}

.menu-perfil-professor .opcao-sair-perfil {
  color: #c76262;
}

/* ÁREA CENTRAL */

.conteudo-inicio-professor {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 35px;
  box-sizing: border-box;
}

.cabecalho-linha-tempo {
  margin-bottom: 35px;
}

.rotulo-hoje {
  color: #957dad;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
}

.cabecalho-linha-tempo h2 {
  margin: 7px 0 5px;
  color: #4f4f4f;
  font-size: 25px;
}

.cabecalho-linha-tempo p {
  margin: 0;
  color: #999999;
  font-size: 14px;
}

/* A LISTA VAI VIRAR A TRILHA */

.linha-tempo-professor {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 15px 0 70px;
}

.lista-vinculos-professor-oculta {
  display: none;
}

/* RESPONSIVO */

@media (max-width: 800px) {
  .menu-professor {
    top: auto;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 74px;
    display: flex;
    padding: 8px 15px;
    border-top: 1px solid #e7e7e7;
    border-right: none;
  }

  .marca-professor {
    display: none;
  }

  .navegacao-professor {
    width: 100%;
    flex-direction: row;
    justify-content: space-around;
    gap: 5px;
  }

  .item-menu-professor {
    width: auto;
    flex: 1;
    flex-direction: column;
    gap: 1px;
    padding: 5px;
    font-size: 11px;
    text-align: center;
  }

  .icone-menu-professor {
    width: auto;
    height: auto;
    font-size: 21px;
  }

  .area-principal-professor {
    margin-left: 0;
    padding-bottom: 80px;
  }

  .topo-novo-professor {
    padding: 20px 18px 12px;
  }

  .saudacao-professor p {
    display: none;
  }

  .saudacao-professor h1 {
    font-size: 21px;
  }

  .texto-perfil-professor {
    display: none;
  }

  .seta-perfil-professor {
    display: none;
  }

  .menu-perfil-professor {
    top: 75px;
    right: 18px;
    width: 230px;
  }

  .conteudo-inicio-professor {
    padding: 25px 20px 40px;
  }

  .conteudo-publicar-professor {
    padding: 25px 20px 40px;
  }

  .topo-area-publicar {
    align-items: flex-start;
    flex-direction: column;
  }
}

.area-professor-oculta {
  display: none !important;
}

.conteudo-publicar-professor {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 35px;
  box-sizing: border-box;
}

.topo-area-publicar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 32px;
}

.topo-area-publicar h2 {
  margin: 7px 0 5px;
  color: #4f4f4f;
  font-size: 25px;
}

.topo-area-publicar p {
  margin: 0;
  color: #999999;
  font-size: 14px;
}

.grupo-dia-trilha {
  width: 100%;
  max-width: 650px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 35px auto 65px;
  padding: 0 20px;
  box-sizing: border-box;
  background: transparent;
  border: none;
}

.titulo-dia-trilha {
  position: static;
  width: fit-content;
  margin: 0 auto 35px;
  padding: 8px 18px;
  transform: none;
  border: none;
  border-radius: 20px;
  background-color: #f1e9f5;
  color: #957dad;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
}

/* CADA PUBLICAÇÃO */

.item-trilha-professor {
  width: 365px;
  display: block;
  margin-bottom: 28px;
  transform: none;
}

.posicao-esquerda {
  transform: translateX(-70px);
}

.posicao-centro {
  transform: translateX(0);
}

.posicao-direita {
  transform: translateX(70px);
}

/* NÃO USAREMOS MAIS A TRILHA DESENHADA */

.ponto-trilha-professor,
.conector-trilha {
  display: none;
}

/* CARD */

.cartao-trilha-professor {
  position: relative;
  width: 100%;
  min-height: 145px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 38px 24px 22px;
  box-sizing: border-box;
  border: 2px solid #ece5f0;
  border-bottom: 5px solid #dfd2e6;
  border-radius: 22px;
  background-color: #ffffff;
  box-shadow: 0 8px 22px rgba(69, 50, 80, 0.05);
  text-align: left;
}

/* MAIS RECENTE */

.atividade-mais-recente .cartao-trilha-professor {
  min-height: 170px;
  padding-top: 58px;
  border-color: #cdb8d9;
  border-bottom-color: #a98abb;
  background-color: #fdfafd;
  box-shadow: 0 10px 25px rgba(149, 125, 173, 0.12);
}

/* ETIQUETA */

.selo-mais-recente {
  position: absolute;
  top: 18px;
  left: 22px;
  margin: 0;
  padding: 5px 9px;
  border-radius: 9px;
  background-color: #eee3f3;
  color: #957dad;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.7px;
}

/* HORÁRIO */

.hora-trilha-professor {
  position: absolute;
  top: 19px;
  right: 22px;
  margin: 0;
  color: #aaaaaa;
  font-size: 11px;
  font-weight: 600;
}

/* DISCIPLINA */

.disciplina-trilha-professor {
  order: 1;
  color: #957dad;
  font-size: 15px;
  font-weight: 700;
}

/* TURMA */

.turma-trilha-professor {
  order: 2;
  margin-top: 3px;
  color: #999999;
  font-size: 12px;
  font-weight: 500;
}

/* TÍTULO DA ATIVIDADE */

.titulo-atividade-trilha {
  order: 3;
  margin: 20px 0 0;
  color: #4f4f4f;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

@media (max-width: 800px) {
  .grupo-dia-trilha {
    padding: 0 5px;
  }

  .item-trilha-professor {
    width: min(100%, 315px);
  }

  .posicao-esquerda {
    transform: translateX(-18px);
  }

  .posicao-centro {
    transform: translateX(0);
  }

  .posicao-direita {
    transform: translateX(18px);
  }

  .cartao-trilha-professor {
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 19px;
  }

  .selo-mais-recente {
    left: 19px;
  }

  .hora-trilha-professor {
    right: 19px;
  }
}

.cartao-trilha-professor::before {
  content: "";

  position: absolute;

  top: 27px;
  left: 24px;

  width: 42px;
  height: 5px;

  border-radius: 999px;

  background-color: #d9c8e3;
}

.atividade-mais-recente .cartao-trilha-professor::before {
  top: 46px;
}

.topo-novo-professor {
  width: 100%;
  max-width: 1100px;

  margin: 0 auto;

  padding: 32px 42px 22px;

  gap: 30px;

  box-sizing: border-box;
}

.cabecalho-inicio-professor {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.cabecalho-inicio-professor h1 {
  margin: 7px 0 5px;

  color: #4f4f4f;

  font-size: 27px;
  font-weight: 700;
}

.cabecalho-inicio-professor p {
  margin: 0;

  color: #999999;

  font-size: 14px;
}

.conteudo-inicio-professor {
  width: 100%;
  max-width: 1100px;

  margin: 0 auto;

  padding: 15px 42px 55px;

  box-sizing: border-box;
}

.linha-tempo-professor {
  width: 100%;
}

/* GRUPO DE CADA DIA */

.grupo-dia-trilha {
  width: 100%;
  max-width: 900px;

  margin: 35px auto 55px;
}

/* CARDS */

.item-trilha-professor {
  width: min(100%, 760px);

  margin: 0 auto 30px;
}

/* alternância bem mais discreta */

.posicao-esquerda {
  transform: translateX(-28px);
}

.posicao-centro {
  transform: translateX(0);
}

.posicao-direita {
  transform: translateX(28px);
}

.cartao-trilha-professor {
  width: 100%;
  min-height: 175px;

  padding: 48px 30px 27px;

  border-radius: 23px;
}

.atividade-mais-recente .cartao-trilha-professor {
  min-height: 190px;

  padding: 58px 30px 27px;
}

/* textos também crescem um pouquinho */

.disciplina-trilha-professor {
  font-size: 16px;
}

.turma-trilha-professor {
  font-size: 13px;
}

.titulo-atividade-trilha {
  margin-top: 20px;

  font-size: 18px;
}

.hora-trilha-professor {
  right: 28px;

  font-size: 12px;
}

@media (max-width: 800px) {
  .topo-novo-professor {
    padding: 22px 20px 15px;
  }

  .cabecalho-inicio-professor h1 {
    font-size: 23px;
  }

  .cabecalho-inicio-professor p {
    max-width: 280px;

    font-size: 13px;
  }

  .conteudo-inicio-professor {
    padding: 15px 20px 45px;
  }

  .grupo-dia-trilha {
    width: 100%;
  }

  .item-trilha-professor {
    width: 100%;
  }

  .posicao-esquerda,
  .posicao-centro,
  .posicao-direita {
    transform: none;
  }

  .cartao-trilha-professor {
    min-height: 160px;

    padding: 45px 22px 24px;
  }

  .atividade-mais-recente .cartao-trilha-professor {
    min-height: 175px;

    padding: 56px 22px 24px;
  }
}

.rotulo-publicar {
  color: #88a7d0;

  font-size: 12px;
  font-weight: 700;

  letter-spacing: 1px;
}

/* ========================================
   PUBLICAR - GERENCIAMENTO DE ATIVIDADES
======================================== */

.conteudo-publicar-professor {
  width: 100%;
  max-width: 1100px;

  margin: 0 auto;

  padding: 15px 42px 55px;

  box-sizing: border-box;
}

.topo-area-publicar {
  display: flex;
  justify-content: flex-end;

  margin-bottom: 25px;
}

/* remove o "card gigante" em volta da lista */

.conteudo-publicar-professor .lista-atividades-professor {
  width: 100%;

  min-height: 0;

  padding: 0;

  border: none;
  border-radius: 0;

  background-color: transparent;
}

/* cada atividade vira uma linha de gerenciamento */

.conteudo-publicar-professor .card-atividade-professor {
  position: relative;

  width: 100%;

  margin: 0;

  padding: 25px 5px;

  box-sizing: border-box;

  border: none;
  border-bottom: 1px solid #ece8ee;
  border-radius: 0;

  background-color: transparent;

  box-shadow: none;

  transition: 0.2s ease;
}

.conteudo-publicar-professor .card-atividade-professor:first-child {
  border-top: 1px solid #ece8ee;
}

.conteudo-publicar-professor .card-atividade-professor:hover {
  transform: none;

  background-color: #fcfafd;
}

/* TÍTULO + TURMA */

.conteudo-publicar-professor .topo-card-atividade {
  display: flex;
  flex-direction: column;

  gap: 5px;
}

.conteudo-publicar-professor .topo-card-atividade h4 {
  margin: 0;

  color: #4f4f4f;

  font-size: 19px;
  font-weight: 700;
}

.conteudo-publicar-professor .turma-disciplina-atividade {
  color: #957dad;

  font-size: 14px;
  font-weight: 600;
}

/* DESCRIÇÃO */

.conteudo-publicar-professor .descricao-card-atividade {
  max-width: 700px;

  margin: 14px 0 13px;

  color: #707070;

  font-size: 14px;

  line-height: 1.5;
}

/* DATAS */

.conteudo-publicar-professor .datas-card-atividade {
  display: flex;
  flex-wrap: wrap;

  gap: 8px 22px;

  color: #a0a0a0;

  font-size: 12px;
}

/* AÇÕES */

.conteudo-publicar-professor .acoes-card-atividade {
  display: flex;
  justify-content: flex-end;

  gap: 9px;

  margin-top: 18px;
}

/* deixa os botões mais discretos */

.conteudo-publicar-professor .botao-materiais-atividade,
.conteudo-publicar-professor .botao-editar-atividade,
.conteudo-publicar-professor .botao-excluir-atividade {
  padding: 9px 15px;

  border-radius: 10px;

  font-size: 13px;
}

@media (max-width: 800px) {
  .conteudo-publicar-professor {
    padding: 15px 20px 100px;
  }

  .topo-area-publicar .botao-nova-turma {
    width: 100%;
  }

  .conteudo-publicar-professor .card-atividade-professor {
    padding: 22px 3px;
  }

  .conteudo-publicar-professor .acoes-card-atividade {
    justify-content: flex-start;

    flex-wrap: wrap;
  }
}

/* ========================================
   PROFESSOR - PLANEJAMENTO
======================================== */

.conteudo-planejamento-professor {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 15px 42px 55px;
  box-sizing: border-box;
}

.controles-planejamento {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
}

.campo-turma-planejamento {
  width: 100%;
  max-width: 300px;
  margin-top: 30px;
}

.campo-turma-planejamento label {
  display: block;
  margin-bottom: 8px;
  color: #777777;
  font-size: 13px;
  font-weight: 600;
}

.campo-turma-planejamento select {
  width: 100%;
  min-height: 48px;
  padding: 0 15px;
  border: 2px solid #e7e2ea;
  border-radius: 14px;
  background-color: #ffffff;
  color: #555555;
  font-family: "Fredoka", sans-serif;
  font-size: 15px;
  font-weight: 600;
  outline: none;
  cursor: pointer;
}

.campo-turma-planejamento select:focus {
  border-color: #957dad;
}

.controle-semana-planejamento {
  display: flex;
  align-items: center;
  gap: 14px;
}

.controle-semana-planejamento button {
  width: 42px;
  height: 42px;
  border: 2px solid #e7e2ea;
  border-bottom: 4px solid #d7ccdd;
  border-radius: 12px;
  background-color: #ffffff;
  color: #957dad;
  font-family: "Fredoka", sans-serif;
  font-size: 24px;
  font-weight: 600;
  cursor: pointer;
}

.controle-semana-planejamento button:active {
  transform: translateY(2px);
  border-bottom-width: 2px;
}

#periodo-planejamento {
  min-width: 160px;
  color: #5b5b5b;
  font-size: 14px;
  text-align: center;
}

.grade-planejamento {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 14px;
}

.dia-planejamento {
  min-height: 360px;
  overflow: hidden;
  border: 2px solid #ece8ee;
  border-radius: 18px;
  background-color: #ffffff;
}

.dia-planejamento-hoje {
  border-color: #cdb8d9;
  box-shadow: 0 7px 18px rgba(149, 125, 173, 0.1);
}

.topo-dia-planejamento {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  padding: 16px;
  border-bottom: 1px solid #eee9f0;
  background-color: #fcfafd;
}

.topo-dia-planejamento strong {
  color: #957dad;
  font-size: 13px;
  letter-spacing: 0.5px;
}

.topo-dia-planejamento > span:not(.contador-dia-planejamento) {
  color: #5b5b5b;
  font-size: 15px;
  font-weight: 700;
}

.contador-dia-planejamento {
  grid-column: 1 / -1;
  color: #aaaaaa;
  font-size: 11px;
  font-weight: 500;
}

.lista-dia-planejamento {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}

.atividade-planejamento {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 13px;
  border: 1px solid #e6dce9;
  border-left: 4px solid #957dad;
  border-radius: 12px;
  background-color: #fdfafd;
}

.atividade-planejamento strong {
  color: #555555;
  font-size: 13px;
  line-height: 1.35;
}

.horario-atividade-planejamento {
  color: #aaaaaa;
  font-size: 10px;
  font-weight: 600;
}

.disciplina-atividade-planejamento {
  color: #957dad;
  font-size: 11px;
  font-weight: 600;
}

.dia-planejamento-vazio {
  padding: 16px 4px;
  color: #bbbbbb;
  font-size: 12px;
  text-align: center;
}

.mensagem-planejamento {
  grid-column: 1 / -1;
  padding: 40px 20px;
  color: #999999;
  font-size: 14px;
  text-align: center;
}

@media (max-width: 800px) {
  .conteudo-planejamento-professor {
    padding: 15px 20px 105px;
  }

  .controles-planejamento {
    align-items: stretch;
    flex-direction: column;
  }

  .campo-turma-planejamento {
    max-width: none;
  }

  .controle-semana-planejamento {
    justify-content: space-between;
  }

  .grade-planejamento {
    grid-template-columns: repeat(5, 230px);
    overflow-x: auto;
    padding-bottom: 10px;
  }

  .dia-planejamento {
    min-height: 330px;
  }
}

.foto-perfil-menu {
  position: relative;
  overflow: hidden;
}

.foto-perfil-menu img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

#inicial-menu-perfil {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.perfil-carregando {
  visibility: hidden;
  opacity: 0;
}

.foto-perfil-professor {
  cursor: pointer;
}

.modal-foto-perfil {
  position: fixed;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 25px;

  background-color: rgba(25, 22, 28, 0.72);

  backdrop-filter: blur(5px);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 0.25s ease,
    visibility 0.25s ease;

  z-index: 3000;
}

.modal-foto-perfil.ativo {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.conteudo-modal-foto {
  position: relative;

  width: min(82vw, 440px);

  aspect-ratio: 1;

  transform: scale(0.92);

  transition: transform 0.25s ease;
}

.modal-foto-perfil.ativo .conteudo-modal-foto {
  transform: scale(1);
}

#foto-perfil-ampliada {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  border-radius: 50%;

  background-color: #ffffff;

  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
}

.fechar-modal-foto {
  position: absolute;

  top: -48px;
  right: 0;

  width: 40px;
  height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: none;
  border-radius: 50%;

  background-color: rgba(255, 255, 255, 0.15);

  color: #ffffff;

  font-family: "Fredoka", sans-serif;

  font-size: 29px;
  font-weight: 400;

  cursor: pointer;

  transition: 0.2s ease;
}

.fechar-modal-foto:hover {
  background-color: rgba(255, 255, 255, 0.25);
}

@media (max-width: 600px) {
  .conteudo-modal-foto {
    width: min(88vw, 390px);
  }
}

@media (max-width: 768px) {
  .esconder-logo-mobile {
    margin-left: 290px;
  }
}

/* =====================================================================
   09 | PAINEL DO ALUNO
   Área do aluno e visualizações de atividades.
   ===================================================================== */
.pagina-aluno {
  min-height: 100vh;
  margin: 0;
  background-color: #ffffff;
  font-family: "Fredoka", sans-serif;
}

.menu-aluno {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 245px;
  padding: 32px 20px;
  box-sizing: border-box;
  background-color: #ffffff;
  border-right: 1px solid #e7e7e7;
  z-index: 20;
}

.marca-aluno {
  margin: 0 12px 42px;
  color: #957dad;
  font-size: 25px;
  font-weight: 700;
}

.marca-aluno span {
  display: block;
  font-size: 15px;
  font-weight: 500;
  opacity: 0.75;
}

.navegacao-aluno {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.item-menu-aluno {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 13px 15px;
  border: 2px solid transparent;
  border-radius: 14px;
  background-color: #f8f5fa;
  color: #5f6368;
  font-family: "Fredoka", sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: 0.2s ease;
}

.item-menu-aluno.ativo {
  border-color: #dfd0e8;
  background-color: #f8f3fb;
  color: #957dad;
}

.icone-menu-aluno {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 12px;
  background-color: #e4d5ec;
  color: #957dad;
}

.icone-menu-aluno svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.item-menu-aluno.ativo .icone-menu-aluno {
  background-color: #957dad;
  color: #ffffff;
}

.area-principal-aluno {
  min-height: 100vh;
  margin-left: 245px;
}

.topo-aluno {
  position: relative;
  width: 100%;
  max-width: 1100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin: 0 auto;
  padding: 32px 42px 22px;
  box-sizing: border-box;
}

.cabecalho-area-aluno {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.rotulo-area-aluno {
  color: #957dad;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
}

.cabecalho-area-aluno h1 {
  margin: 7px 0 5px;
  color: #4f4f4f;
  font-size: 27px;
}

.cabecalho-area-aluno p {
  margin: 0;
  color: #999999;
  font-size: 14px;
}

.botao-perfil-aluno {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: none;
  border-radius: 14px;
  background-color: #f7f5f8;
  font-family: "Fredoka", sans-serif;
  cursor: pointer;
}

.foto-perfil-aluno,
.foto-menu-aluno {
  width: 43px;
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #e0d4e7;
  border-radius: 50%;
  background-color: #f0e8f4;
  color: #957dad;
  font-weight: 700;
  box-sizing: border-box;
}

.texto-perfil-aluno {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.texto-perfil-aluno strong {
  color: #555555;
  font-size: 14px;
}

.texto-perfil-aluno span {
  color: #999999;
  font-size: 12px;
}

.seta-perfil-aluno {
  color: #aaaaaa;
}

.menu-perfil-aluno {
  position: absolute;
  top: 88px;
  right: 42px;
  width: 245px;
  padding: 15px;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  box-sizing: border-box;
  border: 1px solid #e6e1e8;
  border-radius: 16px;
  background-color: #ffffff;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
  transition: 0.2s ease;
  z-index: 30;
}

.menu-perfil-aluno.ativo {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.cabecalho-menu-perfil-aluno {
  display: flex;
  align-items: center;
  gap: 11px;
}

.cabecalho-menu-perfil-aluno > div:last-child {
  display: flex;
  flex-direction: column;
}

.cabecalho-menu-perfil-aluno strong {
  color: #555555;
  font-size: 14px;
}

.cabecalho-menu-perfil-aluno span {
  color: #999999;
  font-size: 12px;
}

.divisor-menu-aluno {
  height: 1px;
  margin: 13px 0 8px;
  background-color: #eeeeee;
}

.opcao-sair-aluno {
  width: 100%;
  padding: 11px;
  border: none;
  border-radius: 10px;
  background-color: #f7f5f8;
  color: #c76262;
  font-family: "Fredoka", sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.conteudo-inicio-aluno,
.conteudo-atividades-aluno,
.conteudo-planejamento-aluno {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 42px 55px;
  box-sizing: border-box;
}

.area-aluno-oculta {
  display: none !important;
}

.boas-vindas-aluno {
  padding: 28px 30px;
  border: 2px solid #ece5f0;
  border-bottom: 5px solid #dfd2e6;
  border-radius: 23px;
  background-color: #fdfafd;
}

.boas-vindas-aluno h2 {
  margin: 7px 0 5px;
  color: #4f4f4f;
  font-size: 24px;
}

.boas-vindas-aluno p {
  margin: 0;
  color: #999999;
}

.resumo-aluno {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.cartao-resumo-aluno {
  display: flex;
  flex-direction: column;
  padding: 22px;
  border: 2px solid #ece5f0;
  border-radius: 18px;
  background-color: #ffffff;
}

.cartao-resumo-aluno strong {
  color: #957dad;
  font-size: 28px;
}

.cartao-resumo-aluno span {
  margin-top: 5px;
  color: #888888;
  font-size: 13px;
}

.area-proximas-atividades {
  margin-top: 38px;
}

.cabecalho-secao-aluno h2,
.topo-atividades-aluno h2,
.topo-planejamento-aluno h2 {
  margin: 7px 0 5px;
  color: #4f4f4f;
  font-size: 25px;
}

.topo-atividades-aluno p,
.topo-planejamento-aluno p {
  margin: 0;
  color: #999999;
}

.lista-proximas-atividades,
.lista-atividades-aluno,
.grade-planejamento-aluno {
  margin-top: 25px;
}

.mensagem-carregamento-aluno {
  padding: 25px;
  border: 2px dashed #e3d8e9;
  border-radius: 18px;
  color: #999999;
  text-align: center;
}

.filtros-atividades-aluno {
  display: flex;
  gap: 9px;
  margin-top: 25px;
}

.filtro-atividade-aluno {
  padding: 9px 14px;
  border: 1px solid #e3d8e9;
  border-radius: 999px;
  background-color: #ffffff;
  color: #777777;
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  cursor: pointer;
}

.filtro-atividade-aluno.ativo {
  background-color: #957dad;
  color: #ffffff;
}

@media (max-width: 800px) {
  .menu-aluno {
    top: auto;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 74px;
    display: flex;
    padding: 8px 12px;
    border-top: 1px solid #e7e7e7;
    border-right: none;
  }

  .marca-aluno {
    display: none;
  }

  .navegacao-aluno {
    width: 100%;
    flex-direction: row;
    justify-content: space-around;
    gap: 5px;
  }

  .item-menu-aluno {
    width: auto;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    padding: 5px;
    font-size: 11px;
    text-align: center;
  }

  .icone-menu-aluno {
    width: auto;
    height: auto;
    background-color: transparent;
  }

  .item-menu-aluno.ativo .icone-menu-aluno {
    background-color: transparent;
    color: #957dad;
  }

  .area-principal-aluno {
    margin-left: 0;
    padding-bottom: 85px;
  }

  .topo-aluno {
    padding: 22px 20px 15px;
  }

  .cabecalho-area-aluno h1 {
    font-size: 23px;
  }

  .cabecalho-area-aluno p {
    max-width: 220px;
    font-size: 13px;
  }

  .texto-perfil-aluno,
  .seta-perfil-aluno {
    display: none;
  }

  .menu-perfil-aluno {
    top: 76px;
    right: 18px;
    width: 230px;
  }

  .conteudo-inicio-aluno,
  .conteudo-atividades-aluno,
  .conteudo-planejamento-aluno {
    padding: 15px 20px 40px;
  }

  .resumo-aluno {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .cartao-resumo-aluno {
    padding: 16px 10px;
    text-align: center;
  }

  .cartao-resumo-aluno strong {
    font-size: 24px;
  }

  .cartao-resumo-aluno span {
    font-size: 11px;
  }
}

/* =====================================================================
   10 | LOGIN DO ALUNO
   Login e autenticação do aluno.
   ===================================================================== */
.pagina-login-aluno {
  min-height: 100vh;
  margin: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 30px 20px;

  box-sizing: border-box;

  background-color: #faf8fc;

  font-family: "Fredoka", sans-serif;
}

.area-login-aluno {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
}

.cartao-login-aluno {
  width: 100%;
  max-width: 430px;

  padding: 38px 38px 30px;

  box-sizing: border-box;

  border: 2px solid #ece5f0;
  border-bottom: 5px solid #dfd2e6;

  border-radius: 25px;

  background-color: #ffffff;

  box-shadow: 0 12px 35px rgba(69, 50, 80, 0.07);
}

.marca-login-aluno {
  display: flex;
  flex-direction: column;

  margin-bottom: 34px;
}

.nome-marca-login-aluno {
  color: #957dad;

  font-size: 23px;
  font-weight: 700;
}

.tipo-login-aluno {
  margin-top: 2px;

  color: #aaa0af;

  font-size: 13px;
  font-weight: 500;
}

.cabecalho-login-aluno {
  margin-bottom: 28px;
}

.cabecalho-login-aluno h1 {
  margin: 0 0 8px;

  color: #4f4f4f;

  font-size: 28px;
  font-weight: 700;
}

.cabecalho-login-aluno p {
  margin: 0;

  color: #969696;

  font-size: 14px;
  line-height: 1.55;
}

.formulario-login-aluno {
  display: flex;
  flex-direction: column;

  gap: 18px;
}

.campo-login-aluno {
  display: flex;
  flex-direction: column;

  gap: 7px;
}

.campo-login-aluno label {
  color: #606060;

  font-size: 14px;
  font-weight: 600;
}

.campo-login-aluno input {
  width: 100%;

  padding: 14px 15px;

  box-sizing: border-box;

  border: 2px solid #e6e2e8;
  border-radius: 13px;

  background-color: #fafafa;

  color: #4f4f4f;

  font-family: "Fredoka", sans-serif;

  font-size: 15px;

  outline: none;

  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

.campo-login-aluno input:focus {
  border-color: #cbb8d7;

  background-color: #ffffff;

  box-shadow: 0 0 0 4px rgba(149, 125, 173, 0.08);
}

.campo-login-aluno input::placeholder {
  color: #b0b0b0;
}

.mensagem-login-aluno {
  min-height: 19px;

  margin: -3px 0 0;

  font-size: 13px;
  font-weight: 600;
}

.mensagem-login-aluno[data-tipo="erro"] {
  color: #d86565;
}

.mensagem-login-aluno[data-tipo="sucesso"] {
  color: #6e9c75;
}

.mensagem-login-aluno[data-tipo="carregando"] {
  color: #957dad;
}

.botao-entrar-aluno {
  width: 100%;

  padding: 14px;

  border: none;
  border-bottom: 5px solid #806897;

  border-radius: 14px;

  background-color: #957dad;

  color: #ffffff;

  font-family: "Fredoka", sans-serif;

  font-size: 15px;
  font-weight: 700;

  cursor: pointer;

  transition:
    background-color 0.2s ease,
    transform 0.1s ease,
    border-bottom-width 0.1s ease;
}

.botao-entrar-aluno:hover {
  background-color: #a38bb9;
}

.botao-entrar-aluno:active {
  transform: translateY(2px);

  border-bottom-width: 3px;
}

.botao-entrar-aluno:disabled {
  opacity: 0.65;

  cursor: wait;
}

.separador-login-aluno {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 28px 0;
}

.separador-login-aluno::before {
  content: "";

  position: absolute;

  left: 0;
  right: 0;

  height: 1px;

  background-color: #ece8ee;
}

.separador-login-aluno span {
  position: relative;

  padding: 0 12px;

  background-color: #ffffff;

  color: #aaaaaa;

  font-size: 13px;
}

.area-google-aluno {
  text-align: center;
}

.area-google-aluno p {
  margin: 0 0 12px;

  color: #8e8e8e;

  font-size: 13px;
}

.botao-google-aluno,
.botao-vincular-google {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  padding: 13px 15px;

  border: 2px solid #e4e1e6;
  border-bottom: 4px solid #d8d4da;

  border-radius: 14px;

  background-color: #ffffff;

  color: #555555;

  font-family: "Fredoka", sans-serif;

  font-size: 14px;
  font-weight: 600;

  cursor: pointer;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.1s ease;
}

.botao-google-aluno:hover,
.botao-vincular-google:hover {
  border-color: #d4c8da;

  background-color: #faf8fb;
}

.botao-google-aluno:active,
.botao-vincular-google:active {
  transform: translateY(2px);
}

.etapa-vincular-google {
  padding: 10px 0 4px;

  text-align: center;
}

.etapa-vincular-google[hidden] {
  display: none !important;
}

.icone-confirmacao-aluno {
  width: 55px;
  height: 55px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0 auto 18px;

  border-radius: 50%;

  background-color: #eee5f3;

  color: #957dad;

  font-size: 25px;
  font-weight: 700;
}

.etapa-vincular-google h2 {
  margin: 0 0 9px;

  color: #4f4f4f;

  font-size: 22px;
}

.etapa-vincular-google p {
  margin: 0 0 22px;

  color: #969696;

  font-size: 14px;
  line-height: 1.5;
}

.voltar-login-aluno {
  display: block;

  margin-top: 28px;

  color: #9b8ba6;

  font-size: 13px;
  font-weight: 600;

  text-align: center;

  text-decoration: none;
}

.voltar-login-aluno:hover {
  color: #957dad;

  text-decoration: underline;
}

@media (max-width: 600px) {
  .pagina-login-aluno {
    align-items: flex-start;

    padding: 28px 17px;
  }

  .cartao-login-aluno {
    max-width: 100%;

    padding: 30px 23px 26px;

    border-radius: 21px;
  }

  .marca-login-aluno {
    margin-bottom: 29px;
  }

  .nome-marca-login-aluno {
    font-size: 21px;
  }

  .cabecalho-login-aluno h1 {
    font-size: 25px;
  }

  .cabecalho-login-aluno p {
    font-size: 13px;
  }

  .campo-login-aluno input {
    font-size: 16px;
  }
}

/* ========================================================================
   CEMSA ACTIVITIES | PADRONIZACAO VISUAL — PAINEL DO PROFESSOR
   Referencia: painel do proprietario (lilas, superficies claras, cards suaves).
   Esta secao foi adicionada SEM remover os estilos anteriores.
   Escopo: body.pagina-professor-nova, para nao interferir em outras paginas.
   ======================================================================== */

/* =====================================================================
   11 | PADRONIZAÇÃO DO PROFESSOR
   Paleta lilás e primeira rodada de adaptação ao proprietário.
   ===================================================================== */
body.pagina-professor-nova {
  --cemsa-lilas: #957dad;
  --cemsa-lilas-escuro: #71588c;
  --cemsa-azul: #88a7d0;
  --cemsa-fundo: #f8f6fb;
  --cemsa-texto: #4c425a;
  --cemsa-cinza: #776f81;
  --cemsa-borda: #ede6f3;
  background: var(--cemsa-fundo);
  color: var(--cemsa-texto);
}

/* Navegacao lateral: reproduz os cartoes do proprietario. */
body.pagina-professor-nova .menu-professor {
  width: 260px;
  padding: 29px 18px 22px;
  background: #ffffff;
  border-right: 1px solid var(--cemsa-borda);
}

body.pagina-professor-nova .marca-professor {
  margin: 2px 12px 38px;
  color: var(--cemsa-lilas);
  font-size: 24px;
  line-height: 1.13;
}

body.pagina-professor-nova .marca-professor span {
  color: var(--cemsa-azul);
  font-size: 15px;
  opacity: 1;
}

body.pagina-professor-nova .navegacao-professor {
  gap: 10px;
}

body.pagina-professor-nova .item-menu-professor {
  min-height: 62px;
  padding: 10px 13px;
  gap: 14px;
  border: 2px solid transparent;
  border-radius: 16px;
  background: #f7f4fa;
  color: #62596d;
  font-size: 15px;
  font-weight: 600;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

body.pagina-professor-nova .item-menu-professor:hover {
  background: #f0e9f5;
  transform: translateY(-1px);
}

body.pagina-professor-nova .item-menu-professor.ativo {
  background: #fbf7fd;
  border-color: #dcc4e8;
  color: var(--cemsa-lilas);
  font-weight: 700;
}

body.pagina-professor-nova .icone-menu-professor {
  width: 40px;
  height: 40px;
  background: #e9ddf1;
  color: var(--cemsa-lilas);
  border-radius: 12px;
  transform: none;
}

body.pagina-professor-nova .item-menu-professor:hover .icone-menu-professor {
  background: #e4d5ec;
}

body.pagina-professor-nova .item-menu-professor.ativo .icone-menu-professor {
  background: var(--cemsa-lilas);
  color: #ffffff;
}

body.pagina-professor-nova .icone-menu-professor svg {
  width: 21px;
  height: 21px;
}

/* Área principal e cabecalho, como no proprietario. */
body.pagina-professor-nova .area-principal-professor {
  margin-left: 260px;
  background: var(--cemsa-fundo);
  min-width: 0;
}

body.pagina-professor-nova .topo-novo-professor {
  width: 100%;
  max-width: none;
  min-height: 102px;
  margin: 0;
  padding: 24px clamp(18px, 4vw, 50px);
  background: #ffffff;
  border-bottom: 1px solid var(--cemsa-borda);
}

body.pagina-professor-nova .rotulo-hoje,
body.pagina-professor-nova .rotulo-publicar {
  color: var(--cemsa-lilas);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.25px;
}

body.pagina-professor-nova .cabecalho-inicio-professor h1 {
  color: var(--cemsa-texto);
  font-size: clamp(23px, 2.3vw, 28px);
  font-weight: 600;
}

body.pagina-professor-nova .cabecalho-inicio-professor p {
  color: var(--cemsa-cinza);
}

body.pagina-professor-nova .botao-perfil-professor {
  padding: 7px 11px;
  background: #f7f4fa;
  border: 1px solid var(--cemsa-borda);
  border-radius: 16px;
}

body.pagina-professor-nova .botao-perfil-professor:hover {
  background: #f0e9f5;
}

body.pagina-professor-nova .texto-perfil-professor strong,
body.pagina-professor-nova .cabecalho-menu-perfil strong {
  color: var(--cemsa-texto);
}

body.pagina-professor-nova .texto-perfil-professor span,
body.pagina-professor-nova .cabecalho-menu-perfil span {
  color: var(--cemsa-cinza);
}

body.pagina-professor-nova .menu-perfil-professor {
  top: calc(100% - 5px);
  right: clamp(18px, 4vw, 50px);
  border: 1px solid var(--cemsa-borda);
  border-radius: 18px;
  box-shadow: 0 16px 35px rgba(89, 53, 109, 0.13);
}

body.pagina-professor-nova .menu-perfil-professor > button {
  border-radius: 11px;
  background: #f7f4fa;
  color: var(--cemsa-texto);
}

body.pagina-professor-nova .menu-perfil-professor > button:hover {
  background: #eee5f3;
}

body.pagina-professor-nova .menu-perfil-professor .opcao-sair-perfil {
  color: #b8525d;
}

/* Mesma largura e respiro usados na area principal do proprietario. */
body.pagina-professor-nova .conteudo-inicio-professor,
body.pagina-professor-nova .conteudo-publicar-professor,
body.pagina-professor-nova .conteudo-planejamento-professor {
  max-width: 1170px;
  margin-inline: auto;
  padding: 30px clamp(18px, 4vw, 50px) 55px;
}

body.pagina-professor-nova .topo-area-publicar h2,
body.pagina-professor-nova .cabecalho-linha-tempo h2,
body.pagina-professor-nova .topo-planejamento-professor h2 {
  color: var(--cemsa-texto);
  font-weight: 600;
}

body.pagina-professor-nova .topo-area-publicar p,
body.pagina-professor-nova .cabecalho-linha-tempo p,
body.pagina-professor-nova .topo-planejamento-professor p {
  color: var(--cemsa-cinza);
}

/* Cartoes das atividades e materiais, com bordas e sombra do proprietario. */
body.pagina-professor-nova .cartao-trilha-professor,
body.pagina-professor-nova .card-atividade-professor,
body.pagina-professor-nova .lista-vinculos-professor,
body.pagina-professor-nova .dia-planejamento,
body.pagina-professor-nova .modal-materiais-atividade {
  background: #ffffff;
  border: 1px solid var(--cemsa-borda);
  border-radius: 18px;
  box-shadow: 0 4px 18px rgba(95, 68, 114, 0.06);
}

body.pagina-professor-nova .cartao-trilha-professor {
  border-bottom: 3px solid #e3d8eb;
}

body.pagina-professor-nova .atividade-mais-recente .cartao-trilha-professor {
  border-color: #dcc4e8;
  background: #fdfbfe;
  box-shadow: 0 10px 24px rgba(149, 125, 173, 0.11);
}

body.pagina-professor-nova
  .conteudo-publicar-professor
  .card-atividade-professor {
  margin: 0 0 14px;
  padding: 21px 22px;
  border: 1px solid var(--cemsa-borda);
  border-radius: 18px;
  background: #ffffff;
}

body.pagina-professor-nova .titulo-dia-trilha,
body.pagina-professor-nova .selo-mais-recente {
  background: #f0e8f6;
  color: var(--cemsa-lilas-escuro);
}

/* Formularios e pop-ups com o mesmo acabamento. */
body.pagina-professor-nova .formulario-nova-atividade {
  border: 1px solid var(--cemsa-borda);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(89, 53, 109, 0.14);
}

body.pagina-professor-nova
  .formulario-nova-atividade
  :is(input, select, textarea),
body.pagina-professor-nova .campo-turma-planejamento :is(input, select) {
  border: 1px solid #ded4e8;
  border-radius: 12px;
  background: #ffffff;
  color: var(--cemsa-texto);
}

body.pagina-professor-nova :is(input, select, textarea):focus-visible,
body.pagina-professor-nova button:focus-visible {
  outline: 3px solid #88a7d0;
  outline-offset: 2px;
}

body.pagina-professor-nova
  :is(.botao-editar-atividade, .botao-materiais-atividade):hover {
  filter: brightness(0.97);
}

/* Na tela pequena, preserva o menu inferior ja usado no painel. */
@media (max-width: 800px) {
  body.pagina-professor-nova .menu-professor {
    top: auto;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 78px;
    padding: 7px 10px;
    border-right: none;
    border-top: 1px solid var(--cemsa-borda);
  }

  body.pagina-professor-nova .navegacao-professor {
    flex-direction: row;
    gap: 5px;
  }

  body.pagina-professor-nova .item-menu-professor {
    min-width: 0;
    min-height: 58px;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    padding: 4px 5px;
    font-size: 11px;
    border-radius: 12px;
  }

  body.pagina-professor-nova .icone-menu-professor {
    width: 26px;
    height: 26px;
    border-radius: 8px;
  }

  body.pagina-professor-nova .icone-menu-professor svg {
    width: 18px;
    height: 18px;
  }

  body.pagina-professor-nova .area-principal-professor {
    margin-left: 0;
    padding-bottom: 80px;
  }

  body.pagina-professor-nova .topo-novo-professor {
    min-height: 83px;
    padding: 18px 20px;
  }

  body.pagina-professor-nova .menu-perfil-professor {
    top: calc(100% - 2px);
    right: 18px;
  }

  body.pagina-professor-nova .conteudo-inicio-professor,
  body.pagina-professor-nova .conteudo-publicar-professor,
  body.pagina-professor-nova .conteudo-planejamento-professor {
    padding: 24px 20px 45px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.pagina-professor-nova .item-menu-professor,
  body.pagina-professor-nova .menu-perfil-professor {
    transition: none;
  }
}

/* =========================================================
   PROFESSOR — visual inspirado no proprietário
   ========================================================= */

/* =====================================================================
   12 | PERSONALIZAÇÕES E AJUSTES VISUAIS
   Regras posteriores; são prioritárias na cascata e NÃO foram removidas.
   ===================================================================== */
body.pagina-professor-nova {
  background: #f7f4f8;
  color: #4f4a57;
  font-family: "Fredoka", sans-serif;
}

/* Sidebar */
body.pagina-professor-nova .menu-professor {
  position: fixed;
  top: 0;
  left: 0;
  width: 290px;
  height: 100vh;
  padding: 28px 18px;
  background: #fcfbfd;
  border-right: 1px solid #ece3f1;
  display: flex;
  flex-direction: column;
  z-index: 20;
}

/* NÃO ALTERAR — personalização minha */
body.pagina-professor-nova .marca-professor {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 2px 12px 34px;
  font-size: 21px;
  font-weight: 600;
  color: var(--lilas);
  line-height: 1.12;
}

/* NÃO ALTERAR — personalização minha */
.marca-professor strong {
  color: var(--azul);
}

body.pagina-professor-nova .marca-icone-professor {
  font-size: 30px;
  color: var(--lilas);
  line-height: 1;
}

body.pagina-professor-nova .marca-texto-professor {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

body.pagina-professor-nova .marca-linha-principal {
  font-size: 18px;
  font-weight: 700;
  color: #957dad;
}

body.pagina-professor-nova .marca-linha-principal strong {
  color: #88a7d0;
  font-weight: 700;
}

body.pagina-professor-nova .marca-texto-professor small {
  margin-top: 5px;
  color: #7e7587;
  font-size: 14px;
  font-weight: 500;
}

body.pagina-professor-nova .legenda-menu-professor {
  margin: 20 0 16px;
  padding: 0 12px;
  color: #9a8fa2;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
}

body.pagina-professor-nova .navegacao-professor {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

body.pagina-professor-nova .item-menu-professor {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 20px;
  background: #f4eef7;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  font-family: "Fredoka", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #5f5569;
  transition: 0.2s ease;
  text-align: left;
}

body.pagina-professor-nova .item-menu-professor:hover {
  transform: translateY(-1px);
  background: #f1eaf5;
}

body.pagina-professor-nova .item-menu-professor.ativo {
  background: #fbf8fc;
  border: 2px solid #d7bddf;
  color: #755d87;
}

body.pagina-professor-nova .icone-menu-professor {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #eadff1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8c74a3;
  flex-shrink: 0;
}

body.pagina-professor-nova .item-menu-professor.ativo .icone-menu-professor {
  background: #957dad;
  color: #ffffff;
}

body.pagina-professor-nova .icone-menu-professor svg {
  width: 22px;
  height: 22px;
}

body.pagina-professor-nova .texto-item-menu-professor {
  font-size: 16px;
  font-weight: 600;
}

/* Área principal */
body.pagina-professor-nova .area-principal-professor {
  margin-left: 290px;
  min-height: 100vh;
  background: #f7f4f8;
}

/* Topo do professor: mantém sua conta onde já está */
body.pagina-professor-nova .topo-novo-professor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 34px 18px;
  background: #ffffff;
  border-bottom: 1px solid #ece3f1;
}

/* Banner igual ao proprietário */
body.pagina-professor-nova .banner-professor {
  margin: 28px 34px 24px;
  padding: 40px 42px;
  border-radius: 30px;
  background: linear-gradient(135deg, #9d85b8 0%, #b49bd1 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

body.pagina-professor-nova .banner-professor-texto {
  max-width: 640px;
}

body.pagina-professor-nova .micro-titulo-banner-professor {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  opacity: 0.95;
}

body.pagina-professor-nova .banner-professor h1 {
  margin: 0 0 12px;
  font-size: 48px;
  line-height: 1.05;
  font-weight: 700;
  color: #ffffff;
}

body.pagina-professor-nova .banner-professor p {
  margin: 0;
  max-width: 560px;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.95);
}

body.pagina-professor-nova .banner-professor-ilustracao {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 42px;
  flex-shrink: 0;
}

body.pagina-professor-nova .banner-professor-ilustracao span:first-child,
body.pagina-professor-nova .banner-professor-ilustracao span:last-child {
  font-size: 36px;
}

/* Blocos e títulos */
body.pagina-professor-nova .conteudo-inicio-professor,
body.pagina-professor-nova .conteudo-publicar-professor,
body.pagina-professor-nova .conteudo-planejamento-professor {
  padding: 0 34px 40px;
}

body.pagina-professor-nova .cabecalho-bloco-professor,
body.pagina-professor-nova .topo-publicar-professor,
body.pagina-professor-nova .topo-planejamento-professor {
  margin-bottom: 20px;
}

body.pagina-professor-nova .sobretitulo-bloco-professor {
  color: #9b8fa7;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

body.pagina-professor-nova .titulo-bloco-professor {
  color: #483f55;
  font-size: 36px;
  font-weight: 700;
  margin: 0;
}

/* Cartões inspirados no proprietário */
body.pagina-professor-nova .card-atividade-professor,
body.pagina-professor-nova .dia-planejamento,
body.pagina-professor-nova .modal-materiais-atividade,
body.pagina-professor-nova .formulario-nova-atividade {
  background: #ffffff;
  border: 1px solid #e8deee;
  border-radius: 22px;
  box-shadow: 0 6px 24px rgba(95, 68, 114, 0.06);
}

/* Publicar: cartões das atividades com cara da 3ª imagem */
body.pagina-professor-nova
  .conteudo-publicar-professor
  .card-atividade-professor {
  margin: 0 0 18px;
  padding: 26px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid #e8deee;
  box-shadow: 0 6px 22px rgba(95, 68, 114, 0.05);
}

body.pagina-professor-nova
  .conteudo-publicar-professor
  .card-atividade-professor:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(95, 68, 114, 0.09);
}

body.pagina-professor-nova
  .conteudo-publicar-professor
  .card-atividade-professor
  h3,
body.pagina-professor-nova
  .conteudo-publicar-professor
  .titulo-atividade-professor {
  color: #483f55;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
}

body.pagina-professor-nova
  .conteudo-publicar-professor
  .card-atividade-professor
  p,
body.pagina-professor-nova
  .conteudo-publicar-professor
  .descricao-atividade-professor {
  color: #73697c;
  line-height: 1.6;
  font-size: 15px;
}

body.pagina-professor-nova .conteudo-publicar-professor .botao-editar-atividade,
body.pagina-professor-nova
  .conteudo-publicar-professor
  .botao-materiais-atividade,
body.pagina-professor-nova
  .conteudo-publicar-professor
  .botao-excluir-atividade {
  border: none;
  border-radius: 14px;
  padding: 11px 16px;
  font-family: "Fredoka", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

body.pagina-professor-nova
  .conteudo-publicar-professor
  .botao-editar-atividade {
  background: #efe6f5;
  color: #7b618f;
}

body.pagina-professor-nova
  .conteudo-publicar-professor
  .botao-materiais-atividade {
  background: #edf3fb;
  color: #587aa5;
}

body.pagina-professor-nova
  .conteudo-publicar-professor
  .botao-excluir-atividade {
  background: #fbe9eb;
  color: #bf5a67;
}

/* Formulário publicar */
body.pagina-professor-nova .formulario-nova-atividade {
  padding: 26px;
  box-shadow: 0 18px 42px rgba(89, 53, 109, 0.1);
}

body.pagina-professor-nova .formulario-nova-atividade input,
body.pagina-professor-nova .formulario-nova-atividade select,
body.pagina-professor-nova .formulario-nova-atividade textarea {
  border: 1px solid #ded4e8;
  border-radius: 14px;
  background: #ffffff;
  color: #4f4a57;
  font-family: "Fredoka", sans-serif;
}

body.pagina-professor-nova
  .formulario-nova-atividade
  :is(input, select, textarea):focus {
  outline: none;
  border-color: #b99dca;
  box-shadow: 0 0 0 3px rgba(136, 167, 208, 0.18);
}

/* Responsivo */
@media (max-width: 1000px) {
  body.pagina-professor-nova .menu-professor {
    width: 250px;
  }

  body.pagina-professor-nova .area-principal-professor {
    margin-left: 250px;
  }

  body.pagina-professor-nova .banner-professor h1 {
    font-size: 38px;
  }
}

@media (max-width: 800px) {
  body.pagina-professor-nova .menu-professor {
    top: auto;
    bottom: 0;
    width: 100%;
    height: 82px;
    padding: 8px 10px;
    border-right: none;
    border-top: 1px solid #ece3f1;
    background: #fcfbfd;
  }

  body.pagina-professor-nova .marca-professor,
  body.pagina-professor-nova .legenda-menu-professor {
    display: none;
  }

  body.pagina-professor-nova .navegacao-professor {
    flex-direction: row;
    gap: 8px;
  }

  body.pagina-professor-nova .item-menu-professor {
    flex: 1;
    min-width: 0;
    min-height: 60px;
    flex-direction: column;
    justify-content: center;
    padding: 6px;
    border-radius: 14px;
    gap: 4px;
  }

  body.pagina-professor-nova .icone-menu-professor {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }

  body.pagina-professor-nova .icone-menu-professor svg {
    width: 18px;
    height: 18px;
  }

  body.pagina-professor-nova .texto-item-menu-professor {
    font-size: 11px;
  }

  body.pagina-professor-nova .area-principal-professor {
    margin-left: 0;
    padding-bottom: 90px;
  }

  body.pagina-professor-nova .topo-novo-professor {
    padding: 18px 20px;
  }

  body.pagina-professor-nova .banner-professor {
    margin: 20px;
    padding: 28px 24px;
    border-radius: 24px;
    flex-direction: column;
    align-items: flex-start;
  }

  body.pagina-professor-nova .banner-professor h1 {
    font-size: 30px;
  }

  body.pagina-professor-nova .conteudo-inicio-professor,
  body.pagina-professor-nova .conteudo-publicar-professor,
  body.pagina-professor-nova .conteudo-planejamento-professor {
    padding: 0 20px 34px;
  }
}

/* Logotipo igual ao painel do proprietário */

body.pagina-professor-nova .marca-linha-principal {
  display: block;
  line-height: 1.1;
}

body.pagina-professor-nova .marca-linha-principal strong {
  display: block;
  color: #88a7d0;
}

body.pagina-professor-nova .marca-icone-professor {
  color: #957dad;
  font-size: 30px;
}

/* Ajustes do banner na página inicial */

body.pagina-professor-nova .conteudo-inicio-professor .banner-professor {
  margin: 28px 0 30px;
}

body.pagina-professor-nova .banner-professor h2 {
  margin: 12px 0;
  color: #ffffff;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 700;
  line-height: 1.2;
}

@media (max-width: 800px) {
  body.pagina-professor-nova .conteudo-inicio-professor .banner-professor {
    margin: 20px 0 26px;
  }
}

/* ==========================================
   CEMSA — AJUSTE FIEL AO PROPRIETÁRIO
   ========================================== */

/* Barra lateral: mesma largura do proprietário */
body.pagina-professor-nova .menu-professor {
  width: 260px;
  padding: 29px 18px 22px;
}

/* Marca CEMSA Activities */
body.pagina-professor-nova .marca-professor {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 12px 0;
  padding: 2px 0 30px;
  font-family: "Fredoka", sans-serif;
}

/* Corrige a regra antiga que encolhia o símbolo */
body.pagina-professor-nova .marca-professor .marca-icone-professor {
  display: block;
  flex-shrink: 0;
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  color: #957dad;
  opacity: 1;
}

/* Letras iguais às do proprietário */
body.pagina-professor-nova .marca-professor .marca-linha-principal {
  display: block;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.12;
  color: #957dad;
  opacity: 1;
}

body.pagina-professor-nova .marca-linha-principal strong {
  display: block;
  color: #88a7d0;
  font-weight: 600;
}

body.pagina-professor-nova .marca-texto-professor small {
  display: block;
  margin-top: 7px;
  font-size: 11px;
  font-weight: 500;
  color: #8a8093;
}

/* Legenda igual à do proprietário */
body.pagina-professor-nova .legenda-menu-professor {
  margin: 7px 0 12px;
  padding: 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.25px;
}

/* Menu com as proporções corretas */
body.pagina-professor-nova .navegacao-professor {
  gap: 10px;
}

body.pagina-professor-nova .item-menu-professor {
  min-height: 62px;
  padding: 10px 13px;
  gap: 14px;
  border-radius: 16px;
  font-size: 15px;
}

body.pagina-professor-nova .icone-menu-professor {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

body.pagina-professor-nova .icone-menu-professor svg {
  width: 21px;
  height: 21px;
}

/* Área principal */
body.pagina-professor-nova .area-principal-professor {
  margin-left: 260px;
}

/* Cabeçalho mais compacto */
body.pagina-professor-nova .topo-novo-professor {
  min-height: 88px;
  padding: 20px clamp(18px, 4vw, 50px);
}

body.pagina-professor-nova .cabecalho-inicio-professor h1 {
  font-size: 25px;
  font-weight: 600;
}

/* Banner: medidas do proprietário */
body.pagina-professor-nova .conteudo-inicio-professor .banner-professor {
  width: 100%;
  margin: 0 0 28px;
  padding: 36px 40px;
  border-radius: 24px;
  background: linear-gradient(110deg, #957dad, #baa5d2);
  box-shadow: 0 12px 30px #81669722;
}

body.pagina-professor-nova .banner-professor h2 {
  font-size: clamp(23px, 3vw, 31px);
  font-weight: 600;
  line-height: 1.2;
}

body.pagina-professor-nova .banner-professor p {
  font-size: 15px;
  line-height: 1.5;
}

/* Ilustração organizada como a do proprietário */
body.pagina-professor-nova .banner-professor-ilustracao {
  position: relative;
  display: block;
  width: 150px;
  height: 120px;
  flex-shrink: 0;
}

body.pagina-professor-nova .banner-professor-ilustracao span:first-child {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 37px;
}

body.pagina-professor-nova .banner-professor-ilustracao span:nth-child(2) {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 60px;
}

body.pagina-professor-nova .banner-professor-ilustracao span:last-child {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 35px;
}

/* Mantém o menu inferior no celular */
@media (max-width: 800px) {
  body.pagina-professor-nova .menu-professor {
    top: auto;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 78px;
  }

  body.pagina-professor-nova .marca-professor,
  body.pagina-professor-nova .legenda-menu-professor {
    display: none;
  }

  body.pagina-professor-nova .navegacao-professor {
    flex-direction: row;
    gap: 5px;
  }

  body.pagina-professor-nova .item-menu-professor {
    min-height: 58px;
    flex-direction: column;
    gap: 2px;
    padding: 4px 5px;
  }

  body.pagina-professor-nova .icone-menu-professor {
    width: 26px;
    height: 26px;
  }

  body.pagina-professor-nova .area-principal-professor {
    margin-left: 0;
    padding-bottom: 80px;
  }

  body.pagina-professor-nova .conteudo-inicio-professor .banner-professor {
    padding: 27px 22px;
  }

  body.pagina-professor-nova .banner-professor-ilustracao {
    display: none;
  }
}

/* CEMSA — linha do tempo mais compacta */

body.pagina-professor-nova .grupo-dia-trilha {
  max-width: 900px;
  margin: 24px auto 30px;
}

body.pagina-professor-nova .titulo-dia-trilha {
  margin: 0 auto 20px;
}

body.pagina-professor-nova .item-trilha-professor {
  width: min(100%, 620px);
  margin: 0 auto 16px;
  transform: none;
}

body.pagina-professor-nova .cartao-trilha-professor {
  min-height: 130px;
  padding: 36px 23px 20px;
  border: 1px solid #ede6f3;
  border-bottom: 3px solid #e3d8eb;
  border-radius: 18px;
}

body.pagina-professor-nova .atividade-mais-recente .cartao-trilha-professor {
  min-height: 145px;
  padding: 50px 23px 20px;
}

body.pagina-professor-nova .disciplina-trilha-professor {
  font-size: 14px;
}

body.pagina-professor-nova .turma-trilha-professor {
  font-size: 12px;
}

body.pagina-professor-nova .titulo-atividade-trilha {
  font-size: 15px;
  margin-top: 14px;
}

body.pagina-professor-nova
  #lista-vinculos-professor.lista-vinculos-professor-oculta {
  display: none !important;
}

body.pagina-professor-nova .conteudo-inicio-professor .banner-professor {
  width: calc(100% - 30px);
  margin: 0 auto 28px;
  padding: 30px 40px;
  box-sizing: border-box;
}

@media (max-width: 800px) {
  body.pagina-professor-nova .conteudo-inicio-professor .banner-professor {
    width: 100%;
    padding: 27px 22px;
  }
}

/* TESTE TEMPORÁRIO */

body.pagina-professor-nova .conteudo-inicio-professor {
  padding-top: 30px !important;
}

.botao-nova-turma {
  margin-top: 30px;
}

/* =====================================================================
   13 | PUBLICAR — CARTÕES EM GRADE
   Cards menores em três colunas; alterações mais recentes.
   ===================================================================== */
/* ===== PUBLICAR: atividades em cards menores, no estilo do proprietário ===== */

body.pagina-professor-nova .lista-atividades-professor {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

body.pagina-professor-nova
  .conteudo-publicar-professor
  .card-atividade-professor {
  margin: 0 !important;
  padding: 22px 20px !important;
  border: 1px solid var(--cemsa-borda) !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  box-shadow: 0 4px 18px rgba(95, 68, 114, 0.06) !important;
  min-height: 230px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

body.pagina-professor-nova
  .conteudo-publicar-professor
  .card-atividade-professor
  h3,
body.pagina-professor-nova
  .conteudo-publicar-professor
  .titulo-atividade-professor {
  margin: 0 0 6px;
  font-size: 18px;
  line-height: 1.3;
  color: var(--cemsa-texto);
}

body.pagina-professor-nova
  .conteudo-publicar-professor
  .card-atividade-professor
  .subtitulo-atividade-professor,
body.pagina-professor-nova
  .conteudo-publicar-professor
  .disciplina-atividade-professor {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cemsa-lilas-escuro);
}

body.pagina-professor-nova
  .conteudo-publicar-professor
  .card-atividade-professor
  p,
body.pagina-professor-nova
  .conteudo-publicar-professor
  .descricao-atividade-professor {
  font-size: 14px;
  line-height: 1.5;
  color: #6f6a78;
  margin: 0 0 14px;
}

body.pagina-professor-nova
  .conteudo-publicar-professor
  .informacoes-atividade-professor,
body.pagina-professor-nova
  .conteudo-publicar-professor
  .rodape-informacoes-atividade {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
  font-size: 12px;
  color: #9a93a5;
}

body.pagina-professor-nova
  .conteudo-publicar-professor
  .acoes-atividade-professor {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

body.pagina-professor-nova
  .conteudo-publicar-professor
  .acoes-atividade-professor
  button,
body.pagina-professor-nova
  .conteudo-publicar-professor
  .acoes-atividade-professor
  a {
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
}

/* responsivo */
@media (max-width: 1100px) {
  body.pagina-professor-nova .lista-atividades-professor {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  body.pagina-professor-nova .lista-atividades-professor {
    grid-template-columns: 1fr;
  }
}

/* NÃO ALTERAR — personalização minha */
.marca-professor small {
  display: block;
  font-size: 11px;
  color: #8a8093;
  font-weight: 900;
  letter-spacing: 0.5px;
  margin-top: 5px;
}

/* ========================================
   ESTILIZAÇÃO — PAINEL DO ALUNO
======================================== */

/* Estilos do aluno aqui */

body.pagina-aluno {
  --aluno-lilas: #957dad;
  --aluno-lilas-escuro: #71588c;
  --aluno-azul: #88a7d0;
  --aluno-fundo: #f8f6fb;
  --aluno-borda: #ede6f3;
  --aluno-texto: #4c425a;
  --aluno-cinza: #776f81;
  background: var(--aluno-fundo);
  color: var(--aluno-texto);
  font-family: "Fredoka", sans-serif;
}

/* Marca e menu lateral com as proporções do proprietário */
body.pagina-aluno .menu-aluno {
  width: 260px;
  padding: 29px 18px 22px;
  border-right: 1px solid var(--aluno-borda);
  background: #fff;
}

body.pagina-aluno .marca-aluno {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 12px 0;
  padding: 2px 0 30px;
  color: var(--aluno-lilas);
}

body.pagina-aluno .marca-aluno .marca-icone-aluno {
  display: block;
  flex: 0 0 auto;
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  color: var(--aluno-lilas);
  opacity: 1;
}

body.pagina-aluno .marca-aluno .marca-linha-aluno {
  display: block;
  font-size: 21px;
  line-height: 1.12;
  font-weight: 600;
  opacity: 1;
}

body.pagina-aluno .marca-linha-aluno strong {
  display: block;
  color: var(--aluno-azul);
  font-weight: 600;
}

body.pagina-aluno .marca-texto-aluno small {
  display: block;
  margin-top: 7px;
  color: #8a8093;
  font-size: 11px;
  font-weight: 500;
}

body.pagina-aluno .legenda-menu-aluno {
  margin: 4px 0 12px;
  padding: 0 14px;
  color: #9c94a4;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.25px;
}

body.pagina-aluno .navegacao-aluno {
  gap: 10px;
}

body.pagina-aluno .item-menu-aluno {
  width: 100%;
  min-height: 62px;
  gap: 14px;
  padding: 10px 13px;
  border: 2px solid transparent;
  border-radius: 16px;
  background: #f7f4fa;
  color: #62596d;
  font-family: "Fredoka", sans-serif;
  font-size: 15px;
  font-weight: 600;
  transition:
    background 0.2s ease,
    transform 0.2s ease,
    border-color 0.2s ease;
}

body.pagina-aluno .item-menu-aluno:hover {
  background: #f0e9f5;
  transform: translateY(-1px);
}

body.pagina-aluno .item-menu-aluno.ativo {
  border-color: #dcc4e8;
  background: #fbf7fd;
  color: var(--aluno-lilas-escuro);
}

body.pagina-aluno .icone-menu-aluno {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #e9ddf1;
  color: var(--aluno-lilas);
}

body.pagina-aluno .icone-menu-aluno svg {
  width: 21px;
  height: 21px;
}

body.pagina-aluno .item-menu-aluno.ativo .icone-menu-aluno {
  color: #fff;
  background: var(--aluno-lilas);
}

/* Cabeçalho: branco, compacto, perfil mantido no canto direito */
body.pagina-aluno .area-principal-aluno {
  margin-left: 260px;
  background: var(--aluno-fundo);
}

body.pagina-aluno .topo-aluno {
  max-width: none;
  min-height: 88px;
  margin: 0;
  padding: 20px clamp(18px, 4vw, 50px);
  background: #fff;
  border-bottom: 1px solid var(--aluno-borda);
}

body.pagina-aluno .rotulo-area-aluno {
  color: #9c94a4;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.25px;
}

body.pagina-aluno .cabecalho-area-aluno h1 {
  margin: 5px 0 4px;
  color: var(--aluno-texto);
  font-size: 25px;
  font-weight: 600;
}

body.pagina-aluno .cabecalho-area-aluno p {
  color: var(--aluno-cinza);
}

body.pagina-aluno .botao-perfil-aluno {
  flex-shrink: 0;
  padding: 7px 10px;
  background: #f7f5f9;
  border: 1px solid var(--aluno-borda);
  border-radius: 14px;
}

body.pagina-aluno .menu-perfil-aluno {
  top: calc(100% - 2px);
  right: clamp(18px, 4vw, 50px);
}

/* Largura e respiro da área de trabalho */
body.pagina-aluno
  :is(
    .conteudo-inicio-aluno,
    .conteudo-atividades-aluno,
    .conteudo-horario-aluno
  ) {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
  padding: 30px clamp(18px, 4vw, 50px) 45px;
  box-sizing: border-box;
}

/* Banner lilás do aluno, seguindo o do proprietário */
body.pagina-aluno .boas-vindas-aluno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 190px;
  padding: 36px 40px;
  border: 0;
  border-radius: 24px;
  background: linear-gradient(110deg, #957dad, #baa5d2);
  box-shadow: 0 12px 30px #81669722;
  color: #fff;
}

body.pagina-aluno .boas-vindas-aluno .banner-texto-aluno {
  max-width: 560px;
}

body.pagina-aluno .boas-vindas-aluno .rotulo-area-aluno {
  color: #f5eafc;
}

body.pagina-aluno .boas-vindas-aluno h2 {
  margin: 14px 0 9px;
  color: #fff;
  font-size: clamp(23px, 3vw, 31px);
  font-weight: 600;
  line-height: 1.2;
}

body.pagina-aluno .boas-vindas-aluno p {
  color: #f8f0ff;
  font-size: 15px;
  line-height: 1.5;
}

body.pagina-aluno .banner-ilustracao-aluno {
  flex: 0 0 150px;
  position: relative;
  display: grid;
  place-items: center;
  width: 150px;
  height: 120px;
  font-size: 60px;
}

body.pagina-aluno .banner-ilustracao-aluno span:first-child {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 37px;
}

body.pagina-aluno .banner-ilustracao-aluno span:last-child {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 35px;
}

/* Resumo: três cartões no acabamento do proprietário */
body.pagina-aluno .resumo-aluno {
  gap: 17px;
  margin-top: 34px;
}

body.pagina-aluno .cartao-resumo-aluno {
  min-height: 145px;
  padding: 23px;
  border: 1px solid var(--aluno-borda);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 4px 18px #5f44720a;
}

body.pagina-aluno .cartao-resumo-aluno strong {
  color: var(--aluno-lilas-escuro);
  font-size: 29px;
  font-weight: 600;
}

body.pagina-aluno .cartao-resumo-aluno span {
  color: var(--aluno-cinza);
  font-size: 14px;
}

body.pagina-aluno .area-proximas-atividades {
  margin-top: 34px;
}

body.pagina-aluno
  :is(
    .cabecalho-secao-aluno h2,
    .topo-atividades-aluno h2,
    .topo-horario-aluno h2
  ) {
  color: var(--aluno-texto);
  font-size: 21px;
  font-weight: 600;
}

/* Listas geradas pelo JS: sem alterar seu conteúdo ou estado */
body.pagina-aluno .mensagem-carregamento-aluno {
  border: 1px dashed #ded3e8;
  background: #fff;
  border-radius: 18px;
}

body.pagina-aluno .filtro-atividade-aluno.ativo {
  background: var(--aluno-lilas);
  color: #fff;
}

/* Agenda semanal, preservando IDs de navegação */
body.pagina-aluno .controles-semana-aluno {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* Celulares: mantém o menu inferior existente */
@media (max-width: 800px) {
  body.pagina-aluno .menu-aluno {
    top: auto;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 78px;
    padding: 7px 10px;
    border-right: none;
    border-top: 1px solid var(--aluno-borda);
  }

  body.pagina-aluno .marca-aluno,
  body.pagina-aluno .legenda-menu-aluno {
    display: none;
  }

  body.pagina-aluno .navegacao-aluno {
    flex-direction: row;
    gap: 5px;
  }

  body.pagina-aluno .item-menu-aluno {
    width: auto;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    min-height: 58px;
    gap: 2px;
    padding: 4px 5px;
    font-size: 11px;
    border-radius: 12px;
  }

  body.pagina-aluno .icone-menu-aluno {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    border-radius: 8px;
    background: #e9ddf1;
  }

  body.pagina-aluno .icone-menu-aluno svg {
    width: 18px;
    height: 18px;
  }

  body.pagina-aluno .item-menu-aluno.ativo .icone-menu-aluno {
    background: var(--aluno-lilas);
    color: #fff;
  }

  body.pagina-aluno .area-principal-aluno {
    margin-left: 0;
    padding-bottom: 80px;
  }

  body.pagina-aluno .topo-aluno {
    padding: 18px 20px;
  }

  body.pagina-aluno .menu-perfil-aluno {
    top: calc(100% - 2px);
    right: 18px;
  }

  body.pagina-aluno
    :is(
      .conteudo-inicio-aluno,
      .conteudo-atividades-aluno,
      .conteudo-horario-aluno
    ) {
    padding: 23px 20px 38px;
  }

  body.pagina-aluno .boas-vindas-aluno {
    min-height: 0;
    padding: 27px 22px;
  }

  body.pagina-aluno .banner-ilustracao-aluno {
    display: none;
  }

  body.pagina-aluno .resumo-aluno {
    gap: 8px;
    margin-top: 24px;
  }

  body.pagina-aluno .cartao-resumo-aluno {
    min-height: 115px;
    padding: 16px 10px;
  }
}

@media (max-width: 520px) {
  body.pagina-aluno .cabecalho-area-aluno h1 {
    font-size: 22px;
  }

  body.pagina-aluno .boas-vindas-aluno h2 {
    font-size: 25px;
  }

  body.pagina-aluno .resumo-aluno {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.pagina-aluno .cartao-resumo-aluno strong {
    font-size: 24px;
  }

  body.pagina-aluno .cartao-resumo-aluno span {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.pagina-aluno .item-menu-aluno {
    transition: none;
  }
}

/* =========================================
   ALUNO — ATIVIDADES EM DUAS COLUNAS
   ========================================= */

body.pagina-aluno .lista-atividades-aluno {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

/* Adapta os cartões ao espaço das colunas */
body.pagina-aluno .lista-atividades-aluno > * {
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
}

/* Mensagens de carregamento ocupam a linha inteira */
body.pagina-aluno .lista-atividades-aluno > p {
  grid-column: 1 / -1;
}

/* Uma coluna em telas menores */
@media (max-width: 1000px) {
  body.pagina-aluno .lista-atividades-aluno {
    grid-template-columns: 1fr;
  }
}

/* ===============================================================
   CEMSA ACTIVITIES — PAINEL DA SECRETARIA | VISUAL PADRONIZADO
   Cole este bloco UMA VEZ no final do seu style.css ATUAL.
   Nenhuma regra anterior precisa ser apagada.
   Prefixo .pagina-secretaria-nova protege as outras páginas.
   =============================================================== */

body.pagina-secretaria-nova {
  --secretaria-lilas: #957dad;
  --secretaria-lilas-escuro: #71588c;
  --secretaria-azul: #88a7d0;
  --secretaria-fundo: #f8f6fb;
  --secretaria-borda: #ede6f3;
  --secretaria-texto: #4c425a;
  margin: 0;
  min-height: 100vh;
  background: var(--secretaria-fundo);
  color: var(--secretaria-texto);
  font-family: "Fredoka", sans-serif;
}

/* Menu fixo, largura de 260 px, como o painel do proprietário. */
body.pagina-secretaria-nova .menu-lateral-secretaria {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  width: 260px;
  min-height: 100vh;
  padding: 30px 18px 20px;
  background: #ffffff;
  border-right: 1px solid var(--secretaria-borda);
  overflow-y: auto;
}

body.pagina-secretaria-nova .marca-secretaria {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 12px;
  padding: 0 0 32px;
}

body.pagina-secretaria-nova .simbolo-marca-secretaria {
  flex: 0 0 auto;
  color: var(--secretaria-lilas);
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
}

body.pagina-secretaria-nova .texto-marca-secretaria {
  min-width: 0;
  color: var(--secretaria-lilas);
  line-height: 1.12;
  font-size: 21px;
  font-weight: 600;
}

body.pagina-secretaria-nova .texto-marca-secretaria strong {
  display: block;
  color: var(--secretaria-azul);
  font-weight: 600;
}

body.pagina-secretaria-nova .texto-marca-secretaria small {
  display: block;
  margin-top: 7px;
  color: #8a8093;
  font-size: 11px;
  font-weight: 500;
}

body.pagina-secretaria-nova .legenda-menu-secretaria {
  padding: 0 14px;
  margin: 0 0 12px;
  color: #9c94a4;
  letter-spacing: 1.25px;
  font-size: 11px;
  font-weight: 700;
}

body.pagina-secretaria-nova .navegacao-secretaria {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.pagina-secretaria-nova .item-menu-secretaria {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 62px;
  padding: 10px 13px;
  border: 2px solid transparent;
  border-radius: 16px;
  background: #f7f4fa;
  color: #62596d;
  font-family: "Fredoka", sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.2s ease,
    transform 0.2s ease,
    border-color 0.2s ease;
}

body.pagina-secretaria-nova .item-menu-secretaria:hover {
  background: #f0e9f5;
  transform: translateY(-1px);
}

body.pagina-secretaria-nova .item-menu-secretaria:focus-visible,
body.pagina-secretaria-nova .botao-sair:focus-visible {
  outline: 3px solid #88a7d0;
  outline-offset: 3px;
}

body.pagina-secretaria-nova .item-menu-secretaria.ativo {
  background: #fbf7fd;
  border-color: #dcc4e8;
  color: var(--secretaria-lilas-escuro);
}

body.pagina-secretaria-nova .icone-item-secretaria {
  display: grid;
  flex: 0 0 40px;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #e9ddf1;
  color: var(--secretaria-lilas);
}

body.pagina-secretaria-nova .icone-item-secretaria svg {
  display: block;
  width: 21px;
  height: 21px;
}

body.pagina-secretaria-nova .item-menu-secretaria.ativo .icone-item-secretaria {
  background: var(--secretaria-lilas);
  color: #ffffff;
}

body.pagina-secretaria-nova .rodape-menu-secretaria {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 25px 14px 4px;
  color: #9c94a4;
  font-size: 12px;
}

body.pagina-secretaria-nova .ponto-rodape-secretaria {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--secretaria-lilas);
}

/* Área principal e cabeçalho: conta e saída permanecem à direita. */
body.pagina-secretaria-nova .estrutura-conteudo-secretaria {
  min-height: 100vh;
  margin-left: 260px;
  background: var(--secretaria-fundo);
}

body.pagina-secretaria-nova .cabecalho-secretaria {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 108px;
  padding: 19px clamp(20px, 4vw, 50px);
  border: 0;
  border-bottom: 1px solid var(--secretaria-borda);
  background: #ffffff;
}

body.pagina-secretaria-nova .rotulo-cabecalho-secretaria {
  display: block;
  color: #9c94a4;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
}

body.pagina-secretaria-nova .titulo-cabecalho-secretaria h1 {
  margin: 5px 0 3px;
  color: var(--secretaria-texto);
  font-size: 25px;
  font-weight: 600;
  line-height: 1.25;
}

body.pagina-secretaria-nova .titulo-cabecalho-secretaria p {
  margin: 0;
  color: #827a8b;
  font-size: 13px;
  font-weight: 400;
}

body.pagina-secretaria-nova .acoes-cabecalho-secretaria {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
}

body.pagina-secretaria-nova .identificacao-secretaria {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 11px;
  border: 1px solid var(--secretaria-borda);
  border-radius: 15px;
  background: #f8f6fa;
}

body.pagina-secretaria-nova .avatar-secretaria {
  display: grid;
  place-items: center;
  width: 37px;
  height: 37px;
  border-radius: 12px;
  background: #e9ddf1;
  color: var(--secretaria-lilas);
  font-size: 18px;
  font-weight: 600;
}

body.pagina-secretaria-nova .texto-conta-secretaria strong,
body.pagina-secretaria-nova .texto-conta-secretaria small {
  display: block;
  white-space: nowrap;
}

body.pagina-secretaria-nova .texto-conta-secretaria strong {
  color: var(--secretaria-texto);
  font-size: 13px;
  font-weight: 600;
}

body.pagina-secretaria-nova .texto-conta-secretaria small {
  color: #9c94a4;
  font-size: 11px;
}

body.pagina-secretaria-nova .botao-sair {
  margin: 0;
  padding: 10px 16px;
  border: 1px solid var(--secretaria-borda);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: none;
  transform: none;
  color: var(--secretaria-azul);
  font-family: "Fredoka", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

body.pagina-secretaria-nova .botao-sair:hover {
  background: #f7f4fa;
}

body.pagina-secretaria-nova .botao-sair:active {
  transform: translateY(1px);
}

/* Banner lilás de boas-vindas, sem os cartões antigos. */
body.pagina-secretaria-nova .painel-secretaria {
  width: 100%;
  max-width: 1260px;
  margin: 0 auto;
  padding: 30px clamp(20px, 4vw, 50px) 60px;
}

body.pagina-secretaria-nova .boas-vindas.banner-secretaria {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  min-height: 197px;
  margin: 0;
  padding: 34px 40px;
  border: none;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(110deg, #957dad, #baa5d2);
  box-shadow: 0 12px 30px rgba(129, 102, 151, 0.12);
  color: #ffffff;
}

body.pagina-secretaria-nova .conteudo-banner-secretaria {
  position: relative;
  z-index: 1;
  max-width: 660px;
  min-width: 0;
}

body.pagina-secretaria-nova .rotulo-banner-secretaria {
  display: block;
  color: #f3e9fb;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
}

body.pagina-secretaria-nova .banner-secretaria h2 {
  margin: 12px 0 9px;
  color: #ffffff;
  font-size: clamp(24px, 3vw, 31px);
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

body.pagina-secretaria-nova .banner-secretaria p {
  max-width: 580px;
  margin: 0;
  color: #faf4ff;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
}

body.pagina-secretaria-nova .ilustracao-banner-secretaria {
  position: relative;
  display: grid;
  flex: 0 0 150px;
  place-items: center;
  width: 150px;
  height: 130px;
}

body.pagina-secretaria-nova .icone-banner-secretaria {
  font-size: 68px;
  line-height: 1;
  filter: drop-shadow(0 9px 5px rgba(75, 45, 92, 0.15));
}

body.pagina-secretaria-nova .estrela-banner-secretaria {
  position: absolute;
  color: #ffffff;
  line-height: 1;
}

body.pagina-secretaria-nova .estrela-um {
  top: 0;
  left: 2px;
  font-size: 27px;
}

body.pagina-secretaria-nova .estrela-dois {
  right: 1px;
  bottom: 0;
  font-size: 37px;
}

/* Textos abaixo do banner; não há cartões de navegação duplicados. */
body.pagina-secretaria-nova .orientacao-secretaria {
  padding: 36px 6px;
}

body.pagina-secretaria-nova .identificacao-secao-secretaria {
  color: #9c94a4;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.35px;
}

body.pagina-secretaria-nova .orientacao-secretaria h2 {
  margin: 8px 0;
  color: var(--secretaria-texto);
  font-size: 24px;
  font-weight: 600;
}

body.pagina-secretaria-nova .orientacao-secretaria p {
  max-width: 660px;
  color: #797182;
  font-size: 15px;
  line-height: 1.6;
}

body.pagina-secretaria-nova .linha-divisoria-secretaria {
  height: 1px;
  margin: 30px 0 18px;
  background: var(--secretaria-borda);
}

body.pagina-secretaria-nova .dica-secretaria {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #8e8499;
  font-size: 13px;
  line-height: 1.4;
}

body.pagina-secretaria-nova .dica-secretaria svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  color: var(--secretaria-lilas);
}

/* A animação fica pronta com o banner na classe .boas-vindas. */
@keyframes entradaBoasVindasSecretaria {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes flutuarIlustracaoSecretaria {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  body.pagina-secretaria-nova .boas-vindas.banner-secretaria {
    animation: entradaBoasVindasSecretaria 0.7s ease-out both;
  }

  body.pagina-secretaria-nova .icone-banner-secretaria {
    display: block;
    animation: flutuarIlustracaoSecretaria 3s ease-in-out infinite;
  }
}

/* Tablet e celular. */
@media (max-width: 1000px) {
  body.pagina-secretaria-nova .identificacao-secretaria {
    display: none;
  }
}

@media (max-width: 800px) {
  body.pagina-secretaria-nova .menu-lateral-secretaria {
    position: fixed;
    inset: auto 0 0;
    width: 100%;
    min-height: 0;
    height: calc(82px + env(safe-area-inset-bottom, 0px));
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px));
    border-right: none;
    border-top: 1px solid var(--secretaria-borda);
    overflow: visible;
  }

  body.pagina-secretaria-nova .marca-secretaria,
  body.pagina-secretaria-nova .legenda-menu-secretaria,
  body.pagina-secretaria-nova .rodape-menu-secretaria {
    display: none;
  }

  body.pagina-secretaria-nova .navegacao-secretaria {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
    gap: 4px;
    width: 100%;
    height: 100%;
  }

  body.pagina-secretaria-nova .item-menu-secretaria {
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 0;
    padding: 4px 2px;
    border-radius: 11px;
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
  }

  body.pagina-secretaria-nova .icone-item-secretaria {
    flex: 0 0 26px;
    width: 27px;
    height: 27px;
    border-radius: 8px;
  }

  body.pagina-secretaria-nova .icone-item-secretaria svg {
    width: 17px;
    height: 17px;
  }

  body.pagina-secretaria-nova .estrutura-conteudo-secretaria {
    margin-left: 0;
    padding-bottom: calc(95px + env(safe-area-inset-bottom, 0px));
  }

  body.pagina-secretaria-nova .cabecalho-secretaria {
    min-height: 84px;
    padding: 15px 20px;
  }

  body.pagina-secretaria-nova .titulo-cabecalho-secretaria h1 {
    font-size: 21px;
  }

  body.pagina-secretaria-nova .titulo-cabecalho-secretaria p {
    display: none;
  }

  body.pagina-secretaria-nova .painel-secretaria {
    padding: 22px 20px 38px;
  }

  body.pagina-secretaria-nova .boas-vindas.banner-secretaria {
    min-height: 0;
    padding: 30px 26px;
    border-radius: 20px;
  }

  body.pagina-secretaria-nova .ilustracao-banner-secretaria {
    flex-basis: 80px;
    width: 80px;
  }

  body.pagina-secretaria-nova .icone-banner-secretaria {
    font-size: 48px;
  }
}

@media (max-width: 430px) {
  body.pagina-secretaria-nova .item-menu-secretaria {
    font-size: 10px;
  }

  body.pagina-secretaria-nova .rotulo-cabecalho-secretaria {
    font-size: 10px;
  }

  body.pagina-secretaria-nova .banner-secretaria h2 {
    font-size: 24px;
  }

  body.pagina-secretaria-nova .ilustracao-banner-secretaria {
    display: none;
  }

  body.pagina-secretaria-nova .orientacao-secretaria h2 {
    font-size: 21px;
  }
}

/* ================================================================
   CEMSA — SECRETARIA | PÁGINAS INTEGRADAS E MENU DE PERFIL
   ACRESCENTAR AO FINAL DO style.css ATUAL (não substituir seu CSS).
   Mantém todas as suas personalizações anteriores.
   ================================================================ */

/* Preserva ocultação mesmo quando CSS antigo atribui display a elementos. */
body.pagina-secretaria-nova [hidden] {
  display: none !important;
}

body.pagina-secretaria-nova.secretaria-verificando
  .estrutura-conteudo-secretaria,
body.pagina-secretaria-nova.secretaria-verificando .menu-lateral-secretaria {
  visibility: hidden;
}

/* Perfil como no professor, no canto superior direito. */
body.pagina-secretaria-nova .acoes-cabecalho-secretaria {
  position: relative;
}

body.pagina-secretaria-nova .botao-perfil-secretaria {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid #ede6f3;
  border-radius: 15px;
  background: #f8f6fa;
  color: #4c425a;
  font:
    600 13px "Fredoka",
    sans-serif;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

body.pagina-secretaria-nova .botao-perfil-secretaria:hover {
  background: #f1eaf6;
  border-color: #dcc4e8;
}

body.pagina-secretaria-nova .botao-perfil-secretaria:focus-visible,
body.pagina-secretaria-nova .menu-perfil-secretaria button:focus-visible {
  outline: 3px solid #88a7d0;
  outline-offset: 2px;
}

body.pagina-secretaria-nova .foto-perfil-secretaria {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 39px;
  width: 39px;
  height: 39px;
  overflow: hidden;
  border-radius: 50%;
  background: #e9ddf1;
  color: #957dad;
  font-size: 17px;
  font-weight: 600;
}

body.pagina-secretaria-nova .foto-perfil-secretaria img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.pagina-secretaria-nova .texto-conta-secretaria {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

body.pagina-secretaria-nova .texto-conta-secretaria strong {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  color: #4c425a;
}

body.pagina-secretaria-nova .texto-conta-secretaria small {
  margin-top: 2px;
  color: #91899b;
  font-size: 11px;
}

body.pagina-secretaria-nova .seta-perfil-secretaria {
  margin-left: 3px;
  color: #92879c;
  font-size: 11px;
}

body.pagina-secretaria-nova .menu-perfil-secretaria {
  position: absolute;
  z-index: 90;
  top: calc(100% + 12px);
  right: 0;
  width: min(250px, calc(100vw - 25px));

  padding: 14px;
  border: 1px solid #ede6f3;
  border-bottom: 3px solid #d9c6e2;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(68, 46, 88, 0.16);
}

body.pagina-secretaria-nova .cabecalho-menu-perfil-secretaria {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 6px 4px 14px;
}

body.pagina-secretaria-nova .texto-menu-secretaria {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

body.pagina-secretaria-nova .texto-menu-secretaria strong {
  color: #4c425a;
  font-size: 14px;
  overflow-wrap: anywhere;
}

body.pagina-secretaria-nova .texto-menu-secretaria small {
  color: #968b9e;
  font-size: 12px;
}

body.pagina-secretaria-nova .opcoes-menu-perfil-secretaria {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.pagina-secretaria-nova .opcoes-menu-perfil-secretaria button {
  width: 100%;
  border: 0;
  padding: 12px 13px;
  border-radius: 12px;
  background: #f8f6fa;
  color: #62556d;
  font:
    500 13px "Fredoka",
    sans-serif;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease;
}

body.pagina-secretaria-nova .opcoes-menu-perfil-secretaria button:hover {
  background: #efe6f5;
}

body.pagina-secretaria-nova .opcoes-menu-perfil-secretaria hr {
  margin: 6px 0 0;
  border: 0;
  border-top: 1px solid #ede6f3;
}

body.pagina-secretaria-nova
  .opcoes-menu-perfil-secretaria
  .opcao-sair-secretaria {
  color: #b34858;
  font-weight: 600;
}

/* Os módulos ficam no lugar dos cartões da página inicial. */
body.pagina-secretaria-nova .area-modulo-secretaria {
  width: 100%;
  max-width: 1260px;
  margin: 0 auto;
  padding: 20px clamp(20px, 4vw, 50px) 35px;
  box-sizing: border-box;
}

body.pagina-secretaria-nova .area-modulo-secretaria-acoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 26px;
  margin-bottom: 8px;
  color: #8d8298;
  font-size: 12px;
}

body.pagina-secretaria-nova .area-modulo-secretaria-acoes a {
  color: #957dad;
  font-size: 12px;
  text-decoration: none;
}

body.pagina-secretaria-nova .area-modulo-secretaria-acoes a:hover {
  text-decoration: underline;
}

body.pagina-secretaria-nova #frame-modulo-secretaria {
  display: block;
  width: 100%;
  height: max(610px, calc(100dvh - 197px));
  border: 0;
  border-radius: 14px;
  background: #f8f6fb;
}

/* Modal de edição de nome: mesma identidade do professor. */
body.pagina-secretaria-nova .modal-nome-secretario {
  width: min(480px, calc(100vw - 28px));
  max-width: none;
  padding: 27px;
  border: 1px solid #ede6f3;
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(40, 27, 50, 0.24);
  font-family: "Fredoka", sans-serif;
  color: #4c425a;
}

body.pagina-secretaria-nova .modal-nome-secretario::backdrop {
  background: rgba(29, 18, 39, 0.45);
}

body.pagina-secretaria-nova .cabecalho-modal-secretaria {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 23px;
}

body.pagina-secretaria-nova .cabecalho-modal-secretaria h2 {
  margin: 0 0 6px;
  font-size: 24px;
  color: #71588c;
}

body.pagina-secretaria-nova .cabecalho-modal-secretaria p {
  margin: 0;
  color: #8a8191;
  font-size: 13px;
}

body.pagina-secretaria-nova #fechar-modal-nome-secretario {
  align-self: start;
  padding: 2px 9px;
  border: 0;
  border-radius: 10px;
  background: #f7f1fa;
  color: #806897;
  font-size: 24px;
  cursor: pointer;
}

body.pagina-secretaria-nova .modal-nome-secretario label {
  display: block;
  margin-bottom: 9px;
  font-size: 14px;
  font-weight: 600;
}

body.pagina-secretaria-nova .modal-nome-secretario input {
  display: block;
  width: 100%;
  padding: 13px;
  border: 2px solid #e9dfed;
  border-radius: 12px;
  font:
    500 15px "Fredoka",
    sans-serif;
  outline: none;
}

body.pagina-secretaria-nova .modal-nome-secretario input:focus {
  border-color: #957dad;
}

body.pagina-secretaria-nova .ajuda-nome-secretario {
  margin: 9px 0;
  font-size: 12px;
  color: #8a8191;
}

body.pagina-secretaria-nova #mensagem-nome-secretario {
  min-height: 19px;
  margin: 12px 0;
  font-size: 13px;
}

body.pagina-secretaria-nova .salvar-nome-secretario {
  width: 100%;
  padding: 13px;
  border: 0;
  border-radius: 12px;
  background: #957dad;
  color: white;
  font:
    600 14px "Fredoka",
    sans-serif;
  cursor: pointer;
}

body.pagina-secretaria-nova .salvar-nome-secretario:disabled {
  opacity: 0.5;
  cursor: wait;
}

@media (max-width: 800px) {
  body.pagina-secretaria-nova .area-modulo-secretaria {
    padding: 14px 14px 25px;
  }

  body.pagina-secretaria-nova #frame-modulo-secretaria {
    height: max(380px, calc(100dvh - 235px));
  }

  body.pagina-secretaria-nova .botao-perfil-secretaria {
    padding: 6px;
  }

  body.pagina-secretaria-nova .texto-conta-secretaria strong {
    max-width: 95px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.pagina-secretaria-nova .botao-perfil-secretaria,
  body.pagina-secretaria-nova .opcoes-menu-perfil-secretaria button {
    transition: none;
  }
}

.menu-perfil-aluno .opcao-editar-perfil-aluno {
  display: block;
  width: 100%;
  margin-bottom: 5px;
  padding: 11px;

  border: none;
  border-radius: 10px;
  background-color: #f7f5f8;

  color: #66556f;
  font-family: "Fredoka", sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-align: left;

  cursor: pointer;
  transition: background-color 0.2s ease;
}

.menu-perfil-aluno .opcao-editar-perfil-aluno:hover {
  background-color: #eee5f3;
}

.foto-perfil-aluno,
.foto-menu-aluno {
  overflow: hidden;
  flex-shrink: 0;
}

.imagem-perfil-aluno {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 50%;
}

.imagem-perfil-aluno[hidden],
.foto-perfil-aluno span[hidden],
.foto-menu-aluno span[hidden] {
  display: none !important;
}

.fundo-editar-perfil-aluno {
  position: fixed;
  inset: 0;
  z-index: 10000;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;

  background-color: rgba(42, 30, 50, 0.52);
  box-sizing: border-box;
}

.fundo-editar-perfil-aluno[hidden],
.fundo-editar-perfil-aluno form[hidden] {
  display: none !important;
}

.janela-editar-perfil-aluno {
  width: 100%;
  max-width: 430px;
  padding: 26px;

  background-color: #ffffff;
  border: 1px solid #e6dcec;
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(45, 30, 55, 0.15);
  box-sizing: border-box;

  font-family: "Fredoka", sans-serif;
}

.cabecalho-editar-perfil-aluno {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
}

.cabecalho-editar-perfil-aluno h2 {
  margin: 0 0 6px;
  color: #5b4b66;
  font-size: 24px;
}

.cabecalho-editar-perfil-aluno p {
  margin: 0;
  color: #929099;
  font-size: 13px;
  line-height: 1.5;
}

.fechar-editar-perfil-aluno {
  width: 36px;
  height: 36px;
  flex-shrink: 0;

  border: none;
  border-radius: 10px;
  background-color: #f4edf7;
  color: #806897;

  font-size: 23px;
  cursor: pointer;
}

.janela-editar-perfil-aluno label {
  display: block;
  margin-bottom: 9px;

  color: #5f5464;
  font-size: 14px;
  font-weight: 600;
}

.janela-editar-perfil-aluno input {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 12px;

  border: 2px solid #e9dfed;
  border-radius: 12px;
  background-color: #ffffff;
  box-sizing: border-box;

  color: #514659;
  font-family: "Fredoka", sans-serif;
  font-size: 14px;
}

.janela-editar-perfil-aluno input:focus {
  outline: none;
  border-color: #957dad;
}

.janela-editar-perfil-aluno input[type="file"] {
  padding: 10px;
  font-size: 13px;
}

.ajuda-editar-perfil-aluno {
  margin: 9px 0 18px;
  color: #999099;
  font-size: 12px;
  line-height: 1.5;
}

.salvar-editar-perfil-aluno {
  width: 100%;
  min-height: 46px;
  padding: 11px;

  border: none;
  border-radius: 12px;
  background-color: #957dad;

  color: #ffffff;
  font-family: "Fredoka", sans-serif;
  font-size: 14px;
  font-weight: 600;

  cursor: pointer;
}

.salvar-editar-perfil-aluno:hover:not(:disabled) {
  background-color: #83699d;
}

.salvar-editar-perfil-aluno:disabled {
  opacity: 0.6;
  cursor: wait;
}

.mensagem-editar-perfil-aluno {
  min-height: 19px;
  margin: 14px 0 0;

  color: #745b87;
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 480px) {
  .janela-editar-perfil-aluno {
    padding: 22px 19px;
  }
}