/* CEI Hello — mensageiro da escola.
   Tema escuro em vermelho: lateral e cabeçalho em vinho, conversa sobre fundo
   quase preto, texto branco. Todas as cores saem daqui — para mudar o tom
   inteiro do aplicativo, mexa só nestas linhas. */

:root {
  --tinta:    #5C1015;   /* lateral e cabeçalho */
  --tinta-2:  #74161C;   /* mesma família, um tom acima */
  --tinta-3:  #93242B;   /* bordas e realces sobre o vinho */
  --fundo:    #141011;   /* fundo da conversa */
  --papel:    #241C1D;   /* cartões e bolhas recebidas */
  --papel-2:  #2E2425;   /* campos e áreas um pouco acima do papel */
  --postit:   #7E1A22;   /* minhas mensagens */
  --postit-2: #A02730;
  --giz:      #37B6A0;
  --carimbo:  #FF6B81;
  --traco:    #453536;   /* bordas */
  --texto:    #F2E9E9;   /* texto principal */
  --apagado:  #B09A9B;   /* texto secundário */
  --ambar:    #E0A526;

  --ui: Verdana, "DejaVu Sans", "Segoe UI", Tahoma, sans-serif;
  --corpo: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --mono: ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;

  --raio: 10px;
  --sombra: 0 1px 2px rgba(0, 0, 0, .45), 0 6px 16px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }

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

body {
  font-family: var(--corpo);
  background: var(--fundo);
  color: var(--texto);
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

button, input, textarea, select { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--carimbo);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- entrada */

.entrada {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 12% 18%, rgba(224, 165, 38, .16), transparent 45%),
    #2A0A0D;
}

.ficha {
  width: min(420px, 100%);
  background: var(--papel);
  color: var(--texto);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .3);
  overflow: hidden;
}

.ficha header {
  background: var(--tinta);
  color: #fff;
  padding: 26px 26px 22px;
  border-bottom: 6px solid var(--ambar);
}

.ficha h1 {
  font-family: var(--ui);
  font-size: 28px;
  letter-spacing: -.4px;
  margin: 0 0 6px;
}

.ficha header p {
  margin: 0;
  font-size: 14px;
  color: #EBC9CB;
  line-height: 1.5;
}

.ficha form { padding: 22px 26px 26px; }

.ficha label {
  display: block;
  font-family: var(--ui);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .9px;
  color: var(--ambar);
  margin: 0 0 6px;
}

.campo {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 2px solid var(--traco);
  border-radius: var(--raio);
  background: var(--papel-2);
  color: var(--texto);
}

.campo:focus {
  border-color: var(--ambar);
  outline: none;
  background: var(--papel);
}

.dica {
  font-size: 13px;
  color: var(--apagado);
  margin: -10px 0 16px;
}

.botao {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: var(--raio);
  background: var(--tinta-2);
  color: #fff;
  font-family: var(--ui);
  font-size: 15px;
  cursor: pointer;
}

.botao:hover { background: var(--tinta-3); }

.alerta {
  background: #3A222A;
  border-left: 4px solid var(--carimbo);
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 16px;
}

.revelar {
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 14px;
  color: var(--ambar);
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}

.oculto { display: none !important; }

/* ------------------------------------------------------------------ carimbo
   O aviso de que o professor lê tudo. Aparece na entrada e no topo do chat. */

.carimbo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--ui);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--carimbo);
  border: 2px solid var(--carimbo);
  border-radius: 4px;
  padding: 4px 9px;
  transform: rotate(-1.2deg);
}

.carimbo.claro { color: #FFA8B6; border-color: #FFA8B6; }

/* --------------------------------------------------------------------- app */

.app {
  height: 100dvh;
  display: grid;
  grid-template-columns: 296px 1fr;
}

.lateral {
  background: var(--tinta);
  color: #F2E1E1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.lateral > header {
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--tinta-3);
}

.eu {
  display: flex;
  align-items: center;
  gap: 10px;
}

.marca {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-family: var(--ui);
  font-size: 16px;
  color: #2A0A0D;
  background: var(--ambar);
  flex: none;
}

.eu strong {
  font-family: var(--ui);
  font-size: 15px;
  color: #fff;
  display: block;
  line-height: 1.2;
}

.eu span {
  font-size: 12px;
  color: #D6A9AC;
}

.lateral nav {
  overflow-y: auto;
  flex: 1;
  padding: 8px 0 20px;
  min-height: 0;
}

.titulo-grupo {
  font-family: var(--ui);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #C79A9D;
  padding: 16px 18px 8px;
}

.canal {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  color: #F2E1E1;
  text-align: left;
  cursor: pointer;
}

.canal:hover { background: var(--tinta-2); }

.canal[aria-current="true"] {
  background: var(--tinta-2);
  border-left-color: var(--ambar);
  color: #fff;
}

.canal .nome {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}

.canal .sub {
  display: block;
  font-size: 11.5px;
  color: #CBA1A4;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ponto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #7A5A5C;
  flex: none;
}

.ponto.on { background: #4ED8B0; box-shadow: 0 0 0 3px rgba(78, 216, 176, .18); }

.inicial {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex: none;
  display: grid;
  place-items: center;
  color: #1A1112;
  font-family: var(--ui);
  font-size: 13px;
  font-weight: bold;
}

.selo {
  font-family: var(--mono);
  font-size: 11px;
  background: var(--carimbo);
  color: #fff;
  border-radius: 20px;
  padding: 2px 7px;
  flex: none;
}

.etiqueta-prof {
  font-family: var(--ui);
  font-size: 9.5px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #FFA8B6;
  border: 1px solid #FF9CC0;
  border-radius: 3px;
  padding: 1px 4px;
}

.lateral footer {
  padding: 12px 18px;
  border-top: 1px solid var(--tinta-3);
  display: flex;
  gap: 10px;
  font-size: 13px;
}

.lateral footer a {
  color: #E0B8BB;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.lateral footer a:hover { border-bottom-color: #E0B8BB; }

/* ------------------------------------------------------------------ conversa */

.conversa {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--fundo);
}

.conversa > header {
  background: var(--papel);
  border-bottom: 1px solid var(--traco);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  row-gap: 6px;
  flex-wrap: wrap;
  flex: none;
}

.voltar {
  display: none;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--tinta);
  padding: 4px 6px;
}

.conversa h2 {
  font-family: var(--ui);
  font-size: 17px;
  margin: 0;
  line-height: 1.25;
}

.conversa header .sub {
  font-size: 12.5px;
  color: var(--apagado);
}

.linha-mensagens {
  flex: 1;
  overflow-y: auto;
  padding: 20px 20px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 0;
}

.linha-mensagens > :first-child { margin-top: auto; }

.dia {
  align-self: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--apagado);
  background: var(--papel-2);
  border-radius: 20px;
  padding: 3px 12px;
  margin: 14px 0 10px;
}

.bolha {
  max-width: min(620px, 82%);
  background: var(--papel);
  border-radius: 4px 12px 12px 12px;
  padding: 9px 13px 7px;
  box-shadow: var(--sombra);
  margin-top: 9px;
  animation: chegou .16s ease-out;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.bolha + .bolha { margin-top: 3px; }

.bolha.minha {
  align-self: flex-end;
  background: var(--postit);
  color: #FFFFFF;
  border-radius: 12px 4px 12px 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 14px rgba(0, 0, 0, .25);
}

.bolha.professor { border-left: 3px solid var(--carimbo); }

@keyframes chegou {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.autor {
  font-family: var(--ui);
  font-size: 12.5px;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.texto {
  white-space: pre-wrap;
  line-height: 1.45;
  font-size: 15.5px;
}

.hora {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--apagado);
  text-align: right;
  margin-top: 3px;
}

.bolha.minha .hora { color: #F0C3C8; }

.bolha.removida {
  background: var(--papel-2);
  box-shadow: none;
  border: 1px dashed var(--traco);
}

.bolha.removida .texto {
  color: var(--apagado);
  font-style: italic;
  font-size: 14px;
}

.anexo-imagem {
  display: block;
  max-width: 100%;
  max-height: 320px;
  border-radius: 6px;
  margin: 4px 0;
}

.anexo-arquivo {
  color: var(--texto);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  margin: 4px 0;
  background: var(--papel-2);
  border: 1px solid var(--traco);
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
}

.anexo-arquivo:hover { background: var(--tinta-2); }
.bolha.minha .anexo-arquivo {
  color: var(--texto); background: rgba(255, 255, 255, .12); border-color: var(--postit-2); color: #FFF; }

audio { width: 100%; max-width: 320px; margin: 4px 0; }

.vazio {
  margin: auto;
  text-align: center;
  color: var(--apagado);
  max-width: 320px;
  line-height: 1.6;
}

.vazio strong {
  display: block;
  font-family: var(--ui);
  color: var(--tinta);
  font-size: 17px;
  margin-bottom: 6px;
}

/* ------------------------------------------------------------------ escrita */

.digitando {
  height: 20px;
  padding: 0 22px;
  font-size: 12.5px;
  color: var(--apagado);
  font-style: italic;
  flex: none;
}

.escrita {
  flex: none;
  background: var(--papel);
  border-top: 1px solid var(--traco);
  padding: 12px 16px 14px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.escrita textarea {
  flex: 1;
  resize: none;
  border: 2px solid var(--traco);
  border-radius: var(--raio);
  padding: 11px 13px;
  max-height: 140px;
  min-height: 46px;
  line-height: 1.4;
  background: var(--papel-2);
  color: var(--texto);
}

.escrita textarea::placeholder { color: var(--apagado); }

.escrita textarea:focus {
  border-color: var(--tinta-3);
  outline: none;
  background: var(--papel);
}

.icone {
  width: 46px;
  height: 46px;
  flex: none;
  border: 2px solid var(--traco);
  background: var(--papel-2);
  color: var(--texto);
  border-radius: var(--raio);
  cursor: pointer;
  font-size: 19px;
  display: grid;
  place-items: center;
}

.icone:hover { border-color: var(--tinta-3); }

.enviar {
  height: 46px;
  padding: 0 20px;
  flex: none;
  border: none;
  border-radius: var(--raio);
  background: var(--tinta-2);
  color: #fff;
  font-family: var(--ui);
  cursor: pointer;
}

.enviar:hover { background: var(--tinta-3); }
.enviar:disabled, .icone:disabled { opacity: .45; cursor: not-allowed; }

.aviso-barra {
  flex: none;
  background: #3A222A;
  border-top: 2px solid var(--carimbo);
  color: #FF9CB0;
  padding: 9px 18px;
  font-size: 14px;
  text-align: center;
}

.recado {
  position: fixed;
  left: 50%;
  bottom: 92px;
  transform: translateX(-50%);
  background: var(--tinta);
  color: #fff;
  padding: 10px 18px;
  border-radius: 22px;
  font-size: 14px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
  z-index: 40;
}

/* ------------------------------------------------------------------- painel */

.painel {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.painel > header {
  background: var(--tinta);
  color: #fff;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.painel h1 {
  font-family: var(--ui);
  font-size: 19px;
  margin: 0;
}

.painel header a {
  color: #EBC9CB;
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.painel header a:hover { border-bottom-color: #EBC9CB; }
.espaco { flex: 1; }

.controles {
  background: var(--papel);
  border-bottom: 1px solid var(--traco);
  padding: 12px 22px;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  align-items: center;
}

.chave {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}

.chave input { width: 18px; height: 18px; accent-color: var(--carimbo); }

.colunas {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 340px;
  grid-auto-rows: min-content;
  gap: 18px;
  padding: 18px 22px 24px;
  min-height: 0;
  align-items: start;
}

/* a coluna larga empilha mensagens e atividades; a estreita, o resto */
.colunas > .cartao { grid-column: 1; }
.colunas > div { grid-column: 2; grid-row: 1 / span 9; }

.cartao {
  background: var(--papel);
  border: 1px solid var(--traco);
  border-radius: 12px;
  overflow: hidden;
}

.cartao > h2 {
  font-family: var(--ui);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ambar);
  margin: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--traco);
  background: var(--papel-2);
  display: flex;
  align-items: center;
  gap: 10px;
}

.rolagem { max-height: 62vh; overflow-y: auto; }

.registro {
  display: flex;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--traco);
  font-size: 14.5px;
}

.registro:hover { background: var(--papel-2); }
.registro.privada { background: #2C1B20; }
.registro.privada:hover { background: #3A222A; }
.registro.morta { opacity: .5; }

.registro .quando {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--apagado);
  flex: none;
  padding-top: 3px;
  width: 42px;
}

.registro .corpo { flex: 1; min-width: 0; }

.registro .onde {
  font-family: var(--ui);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--apagado);
}

.registro .onde.priv { color: var(--carimbo); }

.mini {
  border: 1px solid var(--traco);
  background: var(--papel-2);
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 12.5px;
  cursor: pointer;
  color: var(--texto);
}

.mini:hover { background: var(--papel-2); }
.mini.perigo { color: var(--carimbo); border-color: #7A3340; }
.mini.perigo:hover { background: #4A2028; }

.pessoa {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--traco);
  font-size: 14px;
}

/* a lista de códigos é a que o professor mais lê de perto: fica mais clara */
#pessoas { background: #372B2C; }
#pessoas .pessoa { border-bottom-color: #4E3D3E; }
#pessoas .pessoa:nth-child(odd) { background: #3E3031; }
#pessoas .quem { min-width: 0; }
#pessoas .quem b { color: #FFFFFF; overflow-wrap: anywhere; }
#pessoas .quem span { color: #D9C6C7; }

.pessoa .quem { flex: 1; min-width: 0; }
.pessoa.bloco { flex-wrap: wrap; }
.pessoa.bloco .quem { flex: 1 0 100%; margin-bottom: 8px; }
.pessoa.bloco .quem span { margin-top: 2px; }
.pessoa .quem b { font-family: var(--ui); font-size: 14px; font-weight: 400; }
.pessoa .quem span { display: block; font-size: 11.5px; color: var(--apagado); }

.espaco { flex: 1; }

.barra-acoes { display: flex; gap: 6px; padding: 12px 16px; flex-wrap: wrap; }

.linha-form { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--traco); }
.linha-form .campo { margin: 0; padding: 9px 11px; font-size: 14px; }

.busca::placeholder, .campo::placeholder { color: var(--apagado); }

.busca {
  border: 2px solid var(--traco);
  border-radius: var(--raio);
  padding: 8px 12px;
  background: var(--papel-2);
  color: var(--texto);
  min-width: 220px;
}

/* -------------------------------------------------------------------- móvel */

@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .lateral, .conversa { grid-column: 1; grid-row: 1; }
  body[data-vista="conversa"] .lateral { display: none; }
  body[data-vista="lista"] .conversa { display: none; }
  .voltar { display: block; }
  .conversa > header .carimbo { font-size: 9.5px; padding: 3px 7px; letter-spacing: .7px; }
  .conversa > header .espaco { display: none; }
  .bolha { max-width: 88%; }
  .linha-mensagens { padding: 14px 12px 6px; }
  .escrita { padding: 10px 10px 12px; }
  .enviar { padding: 0 14px; }
  .colunas { grid-template-columns: 1fr; padding: 12px; }
  .rolagem { max-height: none; }
}

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


/* ------------------------------------------------------- CEI Hello: envio */

.campo.codigo {
  font-family: var(--mono);
  font-size: 26px;
  letter-spacing: 4px;
  text-align: center;
  text-transform: uppercase;
}

.envio {
  flex: none;
  background: var(--papel-2);
  border-top: 1px solid var(--traco);
  padding: 9px 16px 11px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.envio-corpo { flex: 1; min-width: 0; }

.envio-info {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}

.envio-info > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mono { font-family: var(--mono); font-size: 11.5px; color: var(--apagado); }

.barra-progresso {
  height: 7px;
  background: var(--papel-2);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 5px;
}

.barra-progresso i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--giz), var(--tinta-3));
  transition: width .2s;
}

.envio .mini { flex: none; }

.icone.gravando {
  background: var(--carimbo);
  border-color: var(--carimbo);
  animation: pulsar-voz 1s steps(2) infinite;
}

@keyframes pulsar-voz { 50% { opacity: .45; } }

video.anexo-imagem { background: #000; }

/* horário e códigos no painel */

.linha-horario {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 12px 16px;
  font-size: 13px;
}

.dia {
  border: 1px solid var(--traco);
  border-radius: 6px;
  padding: 5px 9px;
  cursor: pointer;
  background: var(--papel-2);
  color: var(--texto);
  font-size: 12px;
}

.dia.on { background: var(--tinta); color: #fff; border-color: var(--tinta); }

.pessoa.bloco .linha-pessoa {
  flex: 1 0 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  min-width: 0;
}

/* dentro da linha, o nome cede espaço para o código caber inteiro */
.pessoa.bloco .linha-pessoa .quem {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}

.codigo-cela {
  flex: none;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 13.5px;
  font-weight: bold;
  letter-spacing: .5px;
  background: #F3E7C8;
  border: 1px solid #E0A526;
  border-radius: 5px;
  padding: 3px 9px;
  color: #2A1C05;
}

.codigo-cela.novo { background: #FFF3D0; border-color: #FFC94A; }

.aviso-disco {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--apagado);
  padding: 10px 16px;
}


/* ==========================================================================
   Moeda animada, atividades e loja
   ========================================================================== */

.palco-moeda {
  position: relative;
  display: grid;
  place-items: center;
  perspective: 700px;
  flex: none;
}

.palco-moeda .halo {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 224, 130, .95) 0%,
              rgba(255, 200, 60, .55) 32%, rgba(255, 200, 60, 0) 70%);
  filter: blur(2px);
  animation: moeda-pulsar 2.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes moeda-pulsar {
  0%, 100% { opacity: .45; transform: scale(.86); }
  50%      { opacity: 1;   transform: scale(1.18); }
}

.palco-moeda .raios {
  position: absolute;
  inset: -26%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg,
              rgba(255, 230, 150, .35) 0deg 4deg, transparent 4deg 18deg);
  animation: moeda-raios 9s linear infinite;
  pointer-events: none;
  opacity: .75;
}

@keyframes moeda-raios {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.moeda-cei {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: moeda-girar 3.6s linear infinite;
}

@keyframes moeda-girar {
  from { transform: rotateX(8deg) rotateY(0deg); }
  to   { transform: rotateX(8deg) rotateY(360deg); }
}

.moeda-cei .face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  backface-visibility: hidden;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 34% 30%, #FFE9A8 0%, #E0A526 55%, #8A5A00 100%);
  box-shadow: inset 0 0 0 3px rgba(255, 245, 210, .55),
              inset 0 0 12px rgba(120, 70, 0, .5),
              0 4px 12px rgba(0, 0, 0, .45);
}

.moeda-cei .face.verso { transform: rotateY(180deg); }
.moeda-cei .face svg { width: 56%; height: 56%; opacity: .9; }

@media (prefers-reduced-motion: reduce) {
  .moeda-cei, .palco-moeda .halo, .palco-moeda .raios { animation: none; }
}

/* ------------------------------------------------- saldo fixo na lateral */

.saldo-lateral {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--tinta-3);
  border-bottom: 1px solid var(--tinta-3);
}

.saldo-lateral .palco-moeda { width: 38px; height: 38px; }
.saldo-lateral .numero { font-family: var(--ui); font-size: 21px; color: var(--ambar); }
.saldo-lateral .rotulo { font-size: 10.5px; letter-spacing: 1.4px; color: #C79A9D;
                         text-transform: uppercase; }

/* ------------------------------------------------------------- painéis */

.painel-aluno {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px 30px;
  min-height: 0;
}

.painel-aluno h2 {
  font-family: var(--ui);
  font-size: 19px;
  margin: 0 0 4px;
}

.painel-aluno .intro { color: var(--apagado); font-size: 13.5px; margin: 0 0 18px; }

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

.tarefa, .produto {
  background: var(--papel);
  border: 1px solid var(--traco);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tarefa.feita { border-color: var(--giz); }
.tarefa.avaliada { border-color: var(--ambar); }

.tarefa h3, .produto h3 {
  margin: 0;
  font-family: var(--ui);
  font-size: 16px;
  color: var(--texto);
}

.tarefa .desc, .produto .desc { font-size: 13px; color: var(--apagado); flex: 1; }

.tarefa .selo-estado {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: 20px;
  align-self: flex-start;
}

.selo-estado.pendente { background: #3A2D14; color: #FFD98A; }
.selo-estado.entregue { background: #14352E; color: #7FE0A8; }
.selo-estado.avaliada { background: #3A2D14; color: var(--ambar); }
.selo-estado.recusado { background: #3A222A; color: #FF9CB0; }

.tarefa .prazo { font-family: var(--mono); font-size: 11.5px; color: var(--apagado); }

.preco {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ui);
  font-size: 17px;
  color: var(--ambar);
}

.preco .palco-moeda { width: 26px; height: 26px; }

.forma-entrega { display: flex; flex-direction: column; gap: 8px; }
.forma-entrega textarea { min-height: 64px; }

.aba-lateral {
  display: flex;
  gap: 6px;
  padding: 10px 18px 4px;
}

.aba-lateral button {
  flex: 1;
  background: none;
  border: 1px solid var(--tinta-3);
  border-radius: 8px;
  color: #E0B8BB;
  padding: 8px 4px;
  font-size: 12px;
  font-family: var(--ui);
  cursor: pointer;
}

.aba-lateral button[aria-current="true"] {
  background: var(--ambar);
  border-color: var(--ambar);
  color: #2A1C05;
}

.recibo {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--traco);
  font-size: 13.5px;
}

.recibo:last-child { border-bottom: none; }


/* -------------------------------------------------- busca com lupa embutida */

.campo-lupa {
  position: relative;
  flex: 1;
  min-width: 0;
}

.campo-lupa::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 13px;
  height: 13px;
  margin-top: -8px;
  border: 2px solid var(--apagado);
  border-radius: 50%;
  pointer-events: none;
}

.campo-lupa::after {
  content: "";
  position: absolute;
  left: 22px;
  top: 50%;
  width: 6px;
  height: 2px;
  margin-top: 3px;
  background: var(--apagado);
  border-radius: 1px;
  transform: rotate(45deg);
  pointer-events: none;
}

.campo-lupa .campo {
  width: 100%;
  margin: 0;
  padding-left: 34px;
}


/* ----------------------------------------------- filtro de pessoas no chat */

.filtro-pessoas {
  padding: 4px 18px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filtro-pessoas .campo-lupa::before { border-color: #C79A9D; }
.filtro-pessoas .campo-lupa::after { background: #C79A9D; }

.filtro-pessoas .campo {
  background: var(--tinta-2);
  border: 1px solid var(--tinta-3);
  color: #F2E1E1;
  font-size: 13px;
  padding: 7px 10px 7px 32px;
}

.filtro-pessoas select.campo { padding-left: 10px; }
.filtro-pessoas .campo::placeholder { color: #C79A9D; }

/* ==========================================================================
   Carteira do aluno — acrescentado em setembro de 2026
   ========================================================================== */

/* A barra de abas agora tem 4 botões: um pouco menor para caber sem apertar */
.aba-lateral button {
  flex: 1;
  background: none;
  border: 1px solid var(--tinta-3);
  border-radius: 8px;
  color: #E0B8BB;
  padding: 8px 2px;
  font-size: 11.5px;
  font-family: var(--ui);
  cursor: pointer;
  letter-spacing: -0.2px;
}

.carteira-resumo {
  background: var(--papel);
  border: 1px solid var(--traco);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 22px;
  display: grid;
  gap: 8px;
  max-width: 480px;
}

.carteira-linha {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.carteira-linha .rotulo { color: var(--apagado); }

.forma-carteira {
  background: var(--papel);
  border: 1px solid var(--traco);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
  max-width: 480px;
}

.forma-carteira .campo { margin: 0; }

.carteira-aviso {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  border-left: 3px solid var(--traco);
  background: var(--papel-2);
  color: var(--texto);
}

.carteira-aviso.ok {
  border-left-color: var(--giz);
  color: #7FE0A8;
  background: #14352E;
}

.carteira-aviso.erro {
  border-left-color: var(--carimbo);
  color: #FF9CB0;
  background: #3A222A;
}

.painel-aluno h3 {
  font-family: var(--ui);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ambar);
  margin: 22px 0 8px;
}

@media (max-width: 760px) {
  .carteira-resumo, .forma-carteira { max-width: none; }
}

/* ==========================================================================
   Redação do aluno — editor simples em tela cheia
   ========================================================================== */

:root {
  --azul: #4A9EFF;
}

.redacao-overlay {
  position: fixed;
  inset: 0;
  background: var(--fundo);
  z-index: 200;
  display: flex;
  flex-direction: column;
}

.redacao-overlay.oculto { display: none; }

.redacao-cabecalho {
  background: var(--papel);
  border-bottom: 1px solid var(--traco);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  flex-wrap: wrap;
}

.redacao-cabecalho h2 {
  font-family: var(--ui);
  font-size: 17px;
  margin: 0;
  line-height: 1.2;
}

.redacao-cabecalho .sub {
  font-size: 12px;
  color: var(--apagado);
}

.redacao-cabecalho .espaco { flex: 1; }

.redacao-estado {
  font-family: var(--ui);
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 12px;
  letter-spacing: .3px;
}

.redacao-estado.salvo    { background: rgba(74, 158, 255, .16); color: var(--azul); }
.redacao-estado.pendente { background: rgba(224, 165, 38, .16); color: var(--ambar); }

.redacao-area {
  flex: 1;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.redacao-editor {
  flex: 1;
  resize: none;
  border: 2px solid var(--traco);
  border-radius: var(--raio);
  padding: 20px 22px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.6;
  background: var(--papel);
  color: var(--texto);
  min-height: 0;
}

.redacao-editor:focus {
  border-color: var(--azul);
  outline: none;
}

.redacao-editor::placeholder { color: var(--apagado); }

.redacao-rodape {
  flex: none;
  background: var(--papel);
  border-top: 1px solid var(--traco);
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.redacao-rodape .contador {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--apagado);
}

.redacao-rodape .espaco { flex: 1; }

.mini.com-rascunho {
  background: var(--azul);
  border-color: var(--azul);
  color: #fff;
}

.mini.com-rascunho:hover {
  background: #6BB0FF;
  border-color: #6BB0FF;
}

@media (max-width: 760px) {
  .redacao-cabecalho { padding: 10px 12px; gap: 8px; }
  .redacao-cabecalho h2 { font-size: 15px; }
  .redacao-cabecalho .sub { display: none; }
  .redacao-area { padding: 10px 12px; }
  .redacao-editor { padding: 14px; font-size: 15px; }
  .redacao-rodape { padding: 10px 12px; gap: 8px; }
  .redacao-rodape .contador { font-size: 11px; width: 100%; }
}

/* ==========================================================================
   Redação da entrega — visão do professor
   ========================================================================== */

.redacao-entrega {
  margin: 8px 0;
  border: 1px solid var(--traco);
  border-radius: 8px;
  background: var(--papel-2);
  overflow: hidden;
}

.redacao-entrega-cabec {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 12px;
  background: rgba(74, 158, 255, .12);
  border-bottom: 1px solid var(--traco);
  font-family: var(--ui);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #8FC4FF;
}

.redacao-entrega-cabec .mini {
  margin-left: auto;
  text-transform: none;
  letter-spacing: 0;
}

.redacao-entrega-texto {
  padding: 12px 14px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 140px;
  overflow: hidden;
  position: relative;
  color: var(--texto);
}

.redacao-entrega-texto::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 28px;
  background: linear-gradient(to bottom, transparent, var(--papel-2));
  pointer-events: none;
}

.redacao-entrega.aberta .redacao-entrega-texto {
  max-height: none;
}

.redacao-entrega.aberta .redacao-entrega-texto::after {
  display: none;
}

@media (max-width: 760px) {
  .redacao-entrega-texto { font-size: 14px; padding: 10px 12px; }
}

/* Aviso de fora do horário na tela de login.
   Antes usava fundo claro com texto claro, ficando invisível.
   Agora segue o esquema do resto do sistema: fundo âmbar escuro,
   texto âmbar claro. */
.alerta.alerta-horario {
  background: #3A2D14;
  border-left-color: var(--ambar);
  color: #FFD98A;
}

/* ==========================================================================
   Landing Page pública
   ========================================================================== */

.landing .landing-corpo {
  padding: 24px 26px 30px;
  text-align: center;
}

.landing .landing-icones {
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 28px;
  margin: 0 0 20px;
  opacity: 0.85;
}

.landing .landing-texto {
  font-size: 15px;
  line-height: 1.6;
  color: var(--texto);
  margin: 0 0 22px;
}

.landing .landing-texto strong {
  color: var(--ambar);
}

.landing .botao {
  display: inline-block;
  width: auto;
  padding: 14px 30px;
  text-decoration: none;
  font-size: 16px;
}

.landing .landing-rodape {
  font-size: 12px;
  color: var(--apagado);
  margin-top: 26px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ==========================================================================
   Jogos
   ========================================================================== */

.jogo-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 300;
  display: flex;
  flex-direction: column;
}

.jogo-overlay.oculto { display: none; }

.jogo-cabecalho {
  background: var(--tinta);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
}

.jogo-cabecalho h2 { margin: 0; font-family: var(--ui); font-size: 17px; }
.jogo-cabecalho .sub { font-size: 12px; color: #CBA1A4; }
.jogo-cabecalho .espaco { flex: 1; }

.jogo-cronometro {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: bold;
  color: var(--ambar);
  background: rgba(0,0,0,0.3);
  padding: 4px 10px;
  border-radius: 6px;
}

.jogo-area {
  flex: 1;
  position: relative;
  background: #111;
}

.jogo-area iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.jogo-area .oculto { display: none; }

.jogo-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  background: var(--fundo);
  padding: 20px;
}

.jogo-fallback p { margin-bottom: 20px; font-size: 16px; }