/* css/estilo.css — sistema de design da Equilíbra v2. Paleta, tipografia
   (Encode Sans) e ícones (Font Awesome) fornecidos pelo cliente em
   2026-09-18 — ver conversa de design para o mapeamento completo.
   Nomes de classe/variável antigos (--eq-teal, .badge-blue etc.) foram
   mantidos por compatibilidade — só a COR por trás de cada um mudou,
   pra não precisar tocar em todas as páginas que os referenciam. */

@import url('https://fonts.googleapis.com/css2?family=Encode+Sans:wght@400;500;600;700&family=Encode+Sans+Condensed:wght@500;600;700&family=Encode+Sans+Expanded:wght@600;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css');

:root {
  --eq-blue: #279DC3;
  --eq-blue-dark: #1F7A98;
  --eq-blue-light: #CCE9FB;
  --eq-logo-blue: #279dc3; /* mesma cor do azul principal agora — mantido por compatibilidade */
  --eq-teal: #774FA7; /* secundário/roxo — nome antigo mantido, cor agora é a secundária da marca */
  --eq-purple: #774FA7;
  --eq-purple-light: #FDE7FF;
  --eq-purple-dark: #5B3980;
  --eq-yellow: #D4944A;
  --eq-yellow-light: #FFF6BF;
  --eq-yellow-dark: #8C5A11;
  --eq-navy: #002134;
  --eq-bg: #FBFCFC;
  --eq-border: #E7EDEF;
  --eq-muted: #4C6672;
  --eq-red: #E54257;
  --eq-red-bg: #FFD7D7;
  --eq-green-bg: #CCE9FB; /* "sucesso" não tem verde na paleta — usa o azul principal */
  --eq-green-text: #14607D;

  --eq-radius: 10px;
  --eq-shadow: 0 1px 4px rgba(0,33,52,.09);

  --eq-font-body: 'Encode Sans', Arial, Helvetica, sans-serif;
  --eq-font-heading: 'Encode Sans Expanded', 'Encode Sans', Arial, sans-serif;
  --eq-font-label: 'Encode Sans Condensed', 'Encode Sans', Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--eq-font-body);
  background: var(--eq-bg);
  color: var(--eq-navy);
}

h1, h2, h3, h4 { font-family: var(--eq-font-heading); font-weight: 700; }

a { color: var(--eq-blue); }

/* tela de login / troca de senha */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ffffff 0%, #eef6fb 100%);
  padding: 24px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* balão decorativo atrás do card, aproximadamente a mesma altura dele */
.auth-balloon-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 500px;
  width: auto;
  z-index: -1;
  pointer-events: none;
}
.auth-card {
  position: relative;
  background: var(--eq-logo-blue);
  border-radius: 20px;
  padding: 40px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.auth-card h1 { text-align: center; font-size: 22px; margin: 0 0 4px; color: white; }
.auth-logo { display: block; max-width: 220px; margin: 0 auto 8px; }
.auth-card .subtitle { text-align: center; color: rgba(255,255,255,0.85); font-size: 14px; margin: 0 0 24px; }
.auth-card .field label { color: rgba(255,255,255,0.85); }
.auth-card .btn-primary { background: #cce9fb; color: var(--eq-logo-blue); }
.auth-card .btn-primary:hover { background: #94c8d1; color: white; }

/* variante sem o quadro azul e sem logo/título, usada no login — só os campos.
   Mais compacta e estreita pra caber dentro do balão SVG de fundo; o conjunto
   sobe 50px (margin-top negativa) sem mexer no balão, que é posicionado à parte. */
.auth-card.auth-card--plain {
  background: transparent;
  box-shadow: none;
  padding: 24px 0;
  max-width: 340px;
  margin-top: -126px;
}
.auth-card.auth-card--plain .field label { color: white; }
.auth-card.auth-card--plain .auth-logo { max-width: 300px; margin-bottom: 4px; }
.auth-card.auth-card--plain .field { margin-bottom: 8px; }
.auth-card.auth-card--plain .field label { margin-bottom: 2px; font-size: 12px; }
.auth-card.auth-card--plain input[type=text],
.auth-card.auth-card--plain input[type=password] { padding-top: 8px; padding-bottom: 8px; padding-left: 12px; font-size: 13px; }
/* posicionado fora do fluxo pra não empurrar o card (que é centralizado
   verticalmente) quando o alerta aparece — logo/formulário/fundo ficam fixos */
.auth-card.auth-card--plain form + .alert {
  position: absolute;
  top: 400px;
  left: 80px;
  right: -50px;
  margin-top: 8px;
  margin-bottom: 0;
  font-size: 11px;
}

/* linha compacta: campo de senha + botão de enviar (seta) lado a lado,
   em vez do botão "Entrar" numa linha própria — economiza uma linha no login. */
.campo-senha-submit { display: flex; align-items: flex-end; gap: 8px; }
.campo-senha-submit .field { flex: 1; min-width: 0; margin-bottom: 0; }
.btn-seta {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--eq-blue-light);
  color: var(--eq-blue-dark);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  margin-bottom: 8px;
}
.btn-seta:hover { background: white; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--eq-muted); margin-bottom: 4px; }

input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=file], select {
  width: 100%;
  border: 1.5px solid var(--eq-border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--eq-navy);
  background: white;
  outline: none;
}
input:focus, select:focus { border-color: var(--eq-blue); }
input:disabled, select:disabled { background: var(--eq-bg); color: var(--eq-muted); cursor: not-allowed; }

.btn-primary {
  background: var(--eq-blue);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  width: 100%;
}
.btn-primary:hover { background: var(--eq-blue-dark); }
.btn-primary.btn-inline { width: auto; padding: 10px 18px; }

.btn-secondary {
  display: inline-block;
  background: white;
  color: var(--eq-blue);
  border: 1.5px solid var(--eq-blue);
  border-radius: 8px;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
}
.btn-secondary:hover { background: var(--eq-blue-light); }
.btn-small { padding: 4px 10px; font-size: 12px; }

/* botão só com borda, usado pra nomes de turma clicáveis dentro de tabela
   (ex.: turmas ativas do professor) — mesmo padrão de hover do .btn-icon. */
.btn-contorno {
  display: inline-block; border: 1px solid var(--eq-border); background: white;
  color: var(--eq-navy); padding: 4px 10px; border-radius: 6px; font-size: 12.5px;
  font-weight: 600; text-decoration: none; cursor: pointer;
}
.btn-contorno:hover { background: var(--eq-blue-light); color: var(--eq-blue-dark); border-color: var(--eq-blue); }

.btn-link { background: none; border: none; cursor: pointer; padding: 0; font-size: 14px; }

/* botão de ação em linha de tabela (Editar/Ver/Resetar senha/Ativar-Desativar)
   — só o ícone, com `title` fazendo o papel de legenda ao passar o mouse. */
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--eq-border);
  background: white; color: var(--eq-muted); cursor: pointer; font-size: 13px;
  text-decoration: none; padding: 0; font-family: inherit; vertical-align: middle;
}
.btn-icon:hover { background: var(--eq-blue-light); color: var(--eq-blue-dark); border-color: var(--eq-blue); }
.btn-icon.btn-icon-danger { color: var(--eq-red); }
.btn-icon.btn-icon-danger:hover { background: var(--eq-red-bg); border-color: var(--eq-red); }
.btn-icon.btn-icon-ativo { color: var(--eq-blue); }

/* senha mascarada com ícones de olho e copiar (listas de escolas/alunos) */
.senha-toggle { display: inline-flex; align-items: center; gap: 6px; }
.senha-toggle .btn-olho, .senha-toggle .btn-copiar { background: none; border: none; cursor: pointer; padding: 2px; display: inline-flex; color: var(--eq-muted); }
.senha-toggle .btn-olho:hover, .senha-toggle .btn-copiar:hover { color: var(--eq-blue-dark); }
.senha-toggle .icone-aberto { display: none; }
.senha-toggle.visivel .icone-fechado { display: none; }
.senha-toggle.visivel .icone-aberto { display: inline; }
.senha-toggle .btn-copiar .icone-copiado { display: none; }
.senha-toggle .btn-copiar.copiado { color: var(--eq-green-text); }
.senha-toggle .btn-copiar.copiado .icone-copiar { display: none; }
.senha-toggle .btn-copiar.copiado .icone-copiado { display: inline; }

/* olho pra mostrar/ocultar o que foi digitado num campo de senha (login, trocar senha) */
.senha-input-wrap { position: relative; }
.senha-input-wrap input { padding-right: 36px; }
.senha-input-wrap .btn-olho-input {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; padding: 4px; display: inline-flex; color: var(--eq-muted);
}
.senha-input-wrap .btn-olho-input:hover { color: var(--eq-blue-dark); }
.senha-input-wrap .icone-aberto { display: none; }
.senha-input-wrap.visivel .icone-fechado { display: none; }
.senha-input-wrap.visivel .icone-aberto { display: inline; }

.alert { border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; font-size: 14px; }
.alert-error   { background: var(--eq-red-bg); color: var(--eq-red); }
.alert-success { background: var(--eq-green-bg); color: var(--eq-green-text); }
.alert-info    { background: var(--eq-blue-light); color: var(--eq-blue-dark); }

/* área logada */
/* .shell é um grid: linha 1 = topo (logo + usuário), com uma linha fina
   embaixo que atravessa as duas colunas porque as duas células da linha 1
   têm a mesma borda-inferior; linha 2 = sidebar + conteúdo. */
.shell { display: grid; grid-template-columns: 230px 1fr; grid-template-rows: auto 1fr; min-height: 100vh; transition: grid-template-columns .15s ease; }
.shell.recolhido { grid-template-columns: 72px 1fr; }

/* Logo + botão ficam sempre na mesma linha, mesmo alinhamento à esquerda,
   nos dois estados — só o que troca é qual <img> aparece (mesma altura
   nos dois) e a largura da coluna. Assim o símbolo da logo não se desloca
   ao abrir/fechar, só o texto ao lado dele some. */
.topo-logo {
  grid-column: 1; grid-row: 1; background: white; border-bottom: 1px solid var(--eq-border);
  border-right: 1px solid var(--eq-border); display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 12px 16px;
}
.shell.recolhido .topo-logo { padding: 12px 10px; gap: 4px; justify-content: center; }
.topo-logo img { height: 30px; width: auto; display: block; }
.shell.recolhido .topo-logo img.logo-completo { display: none; }

/* versão recolhida: a logo vira o próprio botão de abrir (sem <img> — fundo
   via CSS pra poder trocar de imagem no hover sem precisar de outro
   elemento, que só ia ocupar espaço à toa na sidebar). */
.logo-icone { display: none; }
.shell.recolhido .logo-icone {
  display: block; width: 32px; height: 30px; flex-shrink: 0; cursor: pointer;
  background: url('../imagens/icone_P_transp.png') center / contain no-repeat;
}
.shell.recolhido .logo-icone:hover { background-image: url('../imagens/icone_P_hover.png'); }

/* só existe (e só faz sentido) com o menu aberto — pra fechar. Recolhido, é
   a própria logo-icone que abre de novo, sem precisar de botão separado. */
.recolher-menu-botao {
  border: none; background: none; cursor: pointer; color: #28a4cb; font-size: 16px;
  padding: 0; border-radius: 6px; flex-shrink: 0; line-height: 1;
}
.shell.recolhido .recolher-menu-botao { display: none; }

.topo-usuario {
  grid-column: 2; grid-row: 1; background: white; border-bottom: 1px solid var(--eq-border);
  display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 12px 32px;
}
.topo-usuario .saudacao { text-align: right; line-height: 1.3; }
.topo-usuario .saudacao .oi { font-size: 12px; color: var(--eq-muted); }
.topo-usuario .saudacao .nome { font-size: 14px; font-weight: 700; color: var(--eq-navy); }

.avatar-usuario { position: relative; }
.avatar-usuario-botao {
  width: 38px; height: 38px; border-radius: 50%; background: var(--eq-purple); color: white;
  border: none; cursor: pointer; font-family: var(--eq-font-heading); font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.avatar-usuario-botao.tem-foto { padding: 0; overflow: hidden; }
.avatar-usuario-botao.tem-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.avatar-usuario-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 50; width: 190px;
  background: white; border: 1px solid var(--eq-border); border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,33,52,.16); padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.avatar-usuario-menu[hidden] { display: none; }
.avatar-usuario-menu a {
  display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 7px;
  font-size: 13.5px; font-weight: 500; color: var(--eq-navy); text-decoration: none;
}
.avatar-usuario-menu a:hover { background: var(--eq-bg); }
.avatar-usuario-menu a i { width: 14px; text-align: center; color: var(--eq-muted); font-size: 12px; }
.avatar-usuario-menu a.sair { color: var(--eq-red); border-top: 1px solid var(--eq-border); margin-top: 4px; padding-top: 9px; }
.avatar-usuario-menu a.sair i { color: var(--eq-red); }

.sidebar { grid-column: 1; grid-row: 2; width: 230px; background: white; border-right: 1px solid var(--eq-border); padding: 20px 16px; }
.shell.recolhido .sidebar { width: 72px; padding: 20px 10px; }
.shell.recolhido .texto-menu { display: none; }
.shell.recolhido .sidebar nav .navgrupo i.chev { display: none; }
.shell.recolhido .sidebar .subnav { max-height: 0 !important; }

.sidebar nav a, .sidebar nav .navgrupo, .sidebar a.logout {
  display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 14px; font-weight: 600;
  padding: 8px 10px; min-height: 20px; border-radius: 8px; border: none; background: none; width: 100%; text-align: left;
  cursor: pointer; font-family: var(--eq-font-body); color: var(--eq-navy); box-sizing: border-box;
}
/* recolhido: o destaque vira um quadrado justo em volta do ícone, em vez de
   uma faixa larga do tamanho da coluna toda. */
.shell.recolhido .sidebar nav a, .shell.recolhido .sidebar nav .navgrupo, .shell.recolhido .sidebar a.logout {
  width: 36px; height: 36px; padding: 0; margin: 0 auto; justify-content: center;
}
.sidebar nav a i, .sidebar nav .navgrupo i.lead, .sidebar a.logout i { width: 16px; flex-shrink: 0; text-align: center; font-size: 13px; line-height: 20px; color: var(--eq-muted); }
.sidebar nav a.ativo, .sidebar nav a:hover { background: var(--eq-blue-light); color: var(--eq-blue-dark); }
.sidebar nav a.ativo i, .sidebar nav a:hover i { color: var(--eq-blue-dark); }
.sidebar nav .navgrupo i.chev { margin-left: auto; font-size: 10px; color: var(--eq-muted); transition: transform .15s; }
.sidebar nav .navgrupo[aria-expanded="true"] i.chev { transform: rotate(90deg); }
.sidebar nav .navgrupo.ativo { color: var(--eq-blue-dark); }
.sidebar nav .navgrupo.ativo i.lead { color: var(--eq-blue-dark); }
.sidebar .subnav { display: flex; flex-direction: column; gap: 1px; padding-left: 28px; overflow: hidden; max-height: 0; transition: max-height .2s ease; }
.sidebar .subnav.aberto { max-height: 200px; }
.sidebar .subnav a { font-size: 13px; padding: 6px 10px; font-weight: 500; }

.sidebar a.logout { color: var(--eq-red); }
.sidebar a.logout i { color: var(--eq-red); }
.sidebar a.logout:hover { background: var(--eq-red-bg); }

main.content { grid-column: 2; grid-row: 2; padding: 32px; min-width: 0; }

@media (max-width: 760px) {
  .shell, .shell.recolhido { grid-template-columns: 1fr; grid-template-rows: auto auto auto 1fr; }
  .topo-logo { grid-column: 1; grid-row: 1; flex-direction: row; border-right: none; }
  .topo-logo .logo-icone { display: none; }
  .topo-logo img.logo-completo { display: block; }
  .recolher-menu-botao { display: none; }
  .topo-usuario { grid-column: 1; grid-row: 2; }
  .sidebar, .shell.recolhido .sidebar { grid-column: 1; grid-row: 3; width: auto; padding: 20px 16px; }
  .shell.recolhido .sidebar nav a, .shell.recolhido .sidebar nav .navgrupo, .shell.recolhido .sidebar a.logout {
    justify-content: flex-start; padding: 8px 10px; width: 100%; height: auto; margin: 0;
  }
  .shell.recolhido .texto-menu { display: inline; }
  main.content { grid-column: 1; grid-row: 4; padding: 20px; }
}

.card { background: white; border-radius: 12px; border: 1px solid var(--eq-border); box-shadow: 0 1px 4px rgba(26,58,92,0.08); padding: 24px; }

.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.page-header h1 { margin: 0; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.form-grid .field-full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.form-section-title { font-size: 15px; font-weight: 700; color: var(--eq-navy); margin: 24px 0 12px; padding-top: 16px; border-top: 1px solid var(--eq-border); }
.form-section-title:first-child { margin-top: 0; padding-top: 0; border-top: none; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 16px 14px; border-bottom: 1px solid var(--eq-border); }
th { color: var(--eq-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .3px; font-weight: 700; white-space: nowrap; }
th.col-acao { text-align: center; }
td.col-acao { text-align: center; white-space: nowrap; }
tr:hover td { background: var(--eq-blue-light); }

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge-green { background: var(--eq-green-bg); color: var(--eq-green-text); } /* status positivo — usa o azul principal */
.badge-red { background: var(--eq-red-bg); color: var(--eq-red); }
.badge-blue { background: var(--eq-purple-light); color: var(--eq-purple-dark); } /* status intermediário/"parcial" — usa o roxo, não o azul (evita confundir com "completo") */
.badge-neutro { background: var(--eq-border); color: var(--eq-navy); }

.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--eq-border); border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer; user-select: none; }
.chip input { margin: 0; }

.empty-state { text-align: center; color: var(--eq-muted); padding: 40px 20px; }

.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card { background: white; border-radius: 12px; border: 1px solid var(--eq-border); box-shadow: 0 1px 4px rgba(26,58,92,0.08); padding: 20px; }
.stat-value { display: block; font-size: 28px; font-weight: 700; color: var(--eq-blue-dark); }

/* cartão-diário + próxima aula lado a lado (em vez de empilhados) — os
   quadros com link (stat-cards acima) continuam em linha, sem mudar. */
.info-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-bottom: 24px; }
.info-card { display: flex; flex-direction: column; align-items: flex-start; }
.info-card-titulo { font-size: 18px; font-weight: 700; color: var(--eq-navy); margin: 0 0 8px; }
.info-card-texto { font-size: 15px; font-weight: 600; color: var(--eq-navy); margin: 0 0 8px; }
.info-card-subtexto { font-size: 13px; color: var(--eq-muted); margin: 0; }
/* atalho no canto inferior direito — deixa claro que o quadro é um resumo
   clicável, não só informativo, mesmo sem o cartão inteiro ser um link. */
.info-card-link { align-self: flex-end; margin-top: auto; padding-top: 12px; font-size: 13px; font-weight: 700; color: var(--eq-blue); text-decoration: none; }
.info-card-link:hover { color: var(--eq-blue-dark); text-decoration: underline; }
.stat-label { display: block; font-size: 13px; color: var(--eq-muted); margin-top: 4px; }

.lesson-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.lesson-card { display: flex; flex-direction: column; gap: 6px; background: white; border: 1px solid var(--eq-border); border-left: 4px solid var(--eq-blue); border-radius: 10px; padding: 12px 14px; text-decoration: none; color: inherit; }
.lesson-card:hover { background: var(--eq-blue-light); }
.lesson-number { font-size: 12px; font-weight: 700; color: var(--eq-muted); }
.lesson-title { font-size: 14px; font-weight: 600; color: var(--eq-navy); }

.cartao-status-card { gap: 4px; padding: 14px 16px; }
.cartao-status-card .lesson-title { margin-bottom: 4px; }
.cartao-status-card .badge { margin-top: 4px; margin-bottom: 8px; align-self: flex-start; }

/* barra dos 7 dias da semana, cumulativa da esquerda pra direita:
   preenchido (azul) -> a preencher (amarelo) -> ainda bloqueado (cinza). */
.cartao-progresso { display: flex; gap: 3px; }
.cartao-progresso-dia { flex: 1; height: 10px; border-radius: 4px; background: var(--eq-border); }
.cartao-progresso-dia.preenchido { background: var(--eq-blue); }
.cartao-progresso-dia.pendente { background: var(--eq-yellow); }
.cartao-progresso-dia.bloqueado { background: var(--eq-border); }
.cartao-progresso-legenda { font-size: 11px; color: var(--eq-muted); margin-top: 6px; }

/* grade do cartão-diário */
.diary-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.diary-table th, .diary-table td { padding: 6px 4px; text-align: center; border-bottom: 1px solid var(--eq-border); }
.diary-table th { background: var(--eq-blue); color: white; position: sticky; top: 0; }
.diary-table td:first-child, .diary-table th:first-child { text-align: left; padding-left: 10px; min-width: 160px; }
.diary-module-row td { background: var(--eq-blue-light); font-weight: 700; color: var(--eq-blue-dark); text-align: left; padding: 8px 10px; }
.diary-module-row td:not(:first-child) { text-align: center; padding: 4px; }

/* legenda Não/Sim — some uma vez por módulo (linha azul), não em cada botão */
.escala-legenda { display: flex; justify-content: center; gap: 7px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .2px; }
.escala-legenda span { min-width: 30px; text-align: center; position: relative; }
.escala-legenda span:last-child::before { content: ''; position: absolute; left: -4px; top: 1px; bottom: 1px; width: 1px; background: var(--eq-border); }

/* seleção Sim/Não por botões em vez de <select> — um toque só, mais rápido
   pro aluno preencher do que abrir a lista e escolher. Sem texto no botão
   (o rótulo já apareceu uma vez na linha do módulo, acima) — só a posição
   (esquerda=Não, direita=Sim) e a cor ao marcar. Uma linha bem fina entre
   as duas colunas ajuda a separar visualmente Não de Sim. */
.escala-botoes { display: flex; justify-content: center; gap: 7px; }
.escala-botoes label:last-of-type { position: relative; }
.escala-botoes label:last-of-type::before { content: ''; position: absolute; left: -4px; top: 50%; transform: translateY(-50%); width: 1px; height: 22px; background: var(--eq-border); }
.escala-botoes input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.escala-botoes label {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border: 1.5px solid var(--eq-border); border-radius: 50%; background: var(--eq-border);
  cursor: pointer;
}
.escala-botoes label:hover { background: var(--eq-blue-light); border-color: var(--eq-blue); }
.escala-botoes input[type=radio]:checked + label { background: var(--eq-blue); border-color: var(--eq-blue); }
.escala-botoes input[type=radio]:focus-visible + label { outline: 2px solid var(--eq-blue); outline-offset: 1px; }
.escala-botoes input[type=radio]:disabled + label { opacity: 0.4; cursor: not-allowed; background: var(--eq-bg); }

/* coluna de um dia fora do período liberado pelo evento */
.diary-table .coluna-desabilitada { opacity: 0.35; background: var(--eq-bg); }
.diary-table th.coluna-desabilitada { background: var(--eq-blue-dark); }

.btn-dia-salvar {
  margin-top: 4px; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px;
  border: none; cursor: pointer; background: white; color: var(--eq-blue-dark);
}
.btn-dia-salvar:hover { background: var(--eq-blue-light); }
.btn-dia-salvar:disabled { background: transparent; color: rgba(255,255,255,0.6); cursor: not-allowed; }

/* barra de progresso (SDQ e outros formulários longos) */
.progress-bar { width: 100%; height: 10px; border-radius: 999px; background: var(--eq-border); overflow: hidden; margin: 8px 0 4px; }
.progress-bar-fill { height: 100%; border-radius: 999px; background: var(--eq-teal); }
.progress-label { font-size: 13px; color: var(--eq-muted); margin: 0; }

/* itens de escala Likert (SDQ) */
.likert-item { padding: 14px 0; border-bottom: 1px solid var(--eq-border); }
.likert-item:last-child { border-bottom: none; }
.likert-header { font-size: 14px; color: var(--eq-navy); margin-bottom: 10px; }
.likert-header .likert-n { display: inline-block; min-width: 22px; font-weight: 700; color: var(--eq-muted); margin-right: 4px; }
.likert-options { display: flex; gap: 16px; flex-wrap: wrap; }
.likert-option { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--eq-navy); cursor: pointer; }
.likert-option input { margin: 0; }

/* hero de boas-vindas (painel do aluno) */
.dash-hero { border-radius: 16px; background: linear-gradient(135deg, var(--eq-blue), var(--eq-teal)); padding: 24px 28px; margin-bottom: 24px; color: white; }
.dash-hero-name { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.dash-hero-sub { opacity: 0.9; font-size: 14px; }

/* continuum de objetivos (sliders) */
.goal-card { background: white; border-radius: 14px; padding: 20px; border: 1px solid var(--eq-border); margin-bottom: 16px; }
.goal-header { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.goal-header h3 { margin: 0; font-size: 16px; }
.goal-value { margin-left: auto; padding: 4px 14px; border-radius: 20px; font-weight: 700; font-size: 14px; background: var(--eq-blue-light); color: var(--eq-blue-dark); }
/* duas linhas: os textos-âncora em cima (cada um na sua ponta), o slider
   com as carinhas embaixo — mais alto que uma linha só, mas deixa o slider
   inteiro livre pras carinhas ficarem coladas nas pontas dele, não do texto. */
.goal-row { display: flex; flex-direction: column; gap: 8px; }
.goal-anchors { display: flex; justify-content: space-between; gap: 14px; }
.goal-anchor { font-size: 12px; color: var(--eq-muted); line-height: 1.4; }
.goal-anchor.right { text-align: right; }
.goal-anchor.left { text-align: left; }
.goal-slider { display: flex; align-items: center; gap: 10px; }
.goal-slider input[type=range] { flex: 1; }
/* carinhas nas pontas do slider — deixa óbvio que valor baixo (esquerda) é
   melhor controle e valor alto (direita) é mais desregulado, sem precisar
   ler o texto-âncora pra entender a direção. */
.goal-smile { font-size: 50px; margin: 30px; flex-shrink: 0; }
.goal-smile-bom { color: #2E9E5B; }
.goal-smile-ruim { color: var(--eq-red); }

/* filtro de módulos (cronograma do aluno) */
.module-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.module-chip {
  border: 2px solid var(--eq-border);
  border-radius: 20px;
  padding: 6px 16px;
  background: white;
  color: var(--eq-muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
}
.module-chip.active { background: var(--eq-blue-light); color: var(--eq-blue-dark); border-color: var(--eq-blue); }

/* seletor de avatar (perfil do aluno): círculo com a imagem atual, clique
   abre uma grade das 10 opções por cima do resto da tela (z-index). */
.avatar-picker { position: relative; display: inline-block; }
.avatar-picker-atual {
  width: 84px; height: 84px; border-radius: 50%; padding: 0; overflow: hidden;
  border: 3px solid var(--eq-blue); cursor: pointer; background: var(--eq-blue-light);
}
.avatar-picker-atual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-picker-dica { font-size: 12px; color: var(--eq-muted); margin-top: 6px; }
.avatar-opcoes {
  position: absolute; top: 0; left: 100px; z-index: 50;
  background: white; border: 1px solid var(--eq-border); border-radius: 14px;
  box-shadow: 0 8px 28px rgba(26,58,92,0.18); padding: 16px;
  width: 300px;
}
.avatar-opcoes-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.avatar-opcoes-header span { font-size: 13px; font-weight: 700; color: var(--eq-navy); }
.avatar-opcoes-fechar {
  width: 24px; height: 24px; border-radius: 50%; border: none; background: var(--eq-bg);
  color: var(--eq-muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 0;
}
.avatar-opcoes-fechar:hover { background: var(--eq-border); color: var(--eq-navy); }
.avatar-opcoes-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; justify-items: center; }
.avatar-opcao { padding: 0; border: 3px solid transparent; border-radius: 50%; width: 44px; height: 44px; overflow: hidden; cursor: pointer; background: var(--eq-bg); flex-shrink: 0; }
.avatar-opcao img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-opcao.selecionada { border-color: var(--eq-blue); }
.avatar-opcoes-backdrop { position: fixed; inset: 0; z-index: 40; background: transparent; }
@media (max-width: 600px) {
  .avatar-opcoes { left: 0; top: 96px; width: 100%; }
}