:root {
  --azul: #244b76;
  --azul-claro: #eaf1f8;
  --cinza: #f4f5f7;
  --borda: #d8dde4;
  --texto: #20262e;
  --muted: #6b7280;
  --verde: #2f7d4d;
  --vermelho: #a43838;
  --amarelo: #9a7212;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--texto);
  background: var(--cinza);
}

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

button, .botao-link {
  border: 0;
  border-radius: 5px;
  padding: 10px 14px;
  background: var(--azul);
  color: white;
  cursor: pointer;
  text-decoration: none;
}

button:hover, .botao-link:hover { opacity: .9; }
button:disabled { opacity: .55; cursor: wait; }
button.secundario { background: #687788; }
button.perigo { background: var(--vermelho); }
button.mini { padding: 6px 8px; }

input, textarea, select {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--borda);
  border-radius: 4px;
  background: white;
}

textarea { resize: vertical; line-height: 1.45; }

label {
  display: block;
  font-weight: 600;
  margin-bottom: 12px;
}

label input, label textarea, label select { margin-top: 6px; }

.topo {
  min-height: 64px;
  padding: 12px 28px;
  background: var(--azul);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topo > div { display: flex; gap: 16px; align-items: center; }
.topo strong { font-size: 20px; }
.topo span { font-size: 14px; opacity: .9; }
.botao-texto { background: transparent; border: 1px solid rgba(255,255,255,.5); }

.container {
  width: min(1280px, calc(100% - 32px));
  margin: 28px auto;
}

.container.estreito { max-width: 920px; }

.card {
  background: white;
  border: 1px solid var(--borda);
  border-radius: 7px;
  padding: 22px;
  margin-bottom: 20px;
}

.card h1, .card h2, .card h3 { margin-top: 0; }

.pagina-login { background: white; }

.login-grid {
  width: min(1050px, calc(100% - 32px));
  min-height: 100vh;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 430px;
  gap: 70px;
  align-items: center;
}

.apresentacao h1 { font-size: 44px; color: var(--azul); margin-bottom: 12px; }
.apresentacao > p { font-size: 20px; line-height: 1.5; color: #48515c; }

.aviso-simples {
  margin-top: 18px;
  padding: 14px;
  border-left: 4px solid var(--azul);
  background: var(--azul-claro);
  font-size: 14px;
  line-height: 1.45;
}

.aviso-simples p { margin-bottom: 0; }

hr { border: 0; border-top: 1px solid var(--borda); margin: 24px 0; }

.grid-painel {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 22px;
}

.linha-form { display: flex; gap: 8px; }
.linha-form input { flex: 1; }

.lista-turmas {
  margin-top: 16px;
  display: grid;
  gap: 8px;
}

.turma-card {
  width: 100%;
  text-align: left;
  background: #f8fafc;
  color: var(--texto);
  border: 1px solid var(--borda);
}

.turma-card strong, .turma-card span { display: block; }
.turma-card span { margin-top: 4px; font-size: 12px; color: var(--muted); }
.turma-card.ativo { border-color: var(--azul); background: var(--azul-claro); }

.cabecalho-secao {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 18px;
}

.cabecalho-secao h1, .cabecalho-secao h2 { margin: 0 0 5px; }

.duas-colunas-painel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.linha {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid #edf0f2;
}

.linha small { color: var(--muted); }

.atividade-card, .atividade-aluno {
  padding: 13px 0;
  border-bottom: 1px solid #edf0f2;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}

.atividade-card > div:first-child { display: grid; gap: 6px; }
.atividade-acoes { display: flex; gap: 6px; }

.atividade-aluno p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.status, .entregue, .risco {
  width: fit-content;
  display: inline-block;
  padding: 4px 7px;
  border-radius: 4px;
  font-size: 12px;
}

.status.publicada, .entregue, .risco.normal { background: #e5f4ea; color: var(--verde); }
.status.rascunho, .risco.atencao { background: #fff3ce; color: var(--amarelo); }
.risco.revisar { background: #f8dddd; color: var(--vermelho); }

.form-grid, .duas-colunas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.questao-editor {
  border: 1px solid var(--borda);
  padding: 16px;
  margin-bottom: 14px;
  background: #fbfcfd;
}

.questao-editor-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.opcoes-editor { margin-top: 15px; }

.opcao-editor {
  display: grid;
  grid-template-columns: 24px 32px 1fr 34px;
  gap: 7px;
  align-items: center;
  margin-bottom: 7px;
}

.opcao-editor input[type="radio"] { width: auto; }

.configuracoes {
  margin-top: 18px;
  padding: 14px;
  background: var(--cinza);
}

.check {
  font-weight: normal;
  display: flex;
  align-items: center;
  gap: 8px;
}

.check input { width: auto; margin: 0; }

.acoes-finais { margin-top: 20px; text-align: right; }

.mensagem {
  padding: 9px 11px;
  margin: 10px 0;
  border-radius: 4px;
  background: #eef2f7;
}

.mensagem.erro { background: #f8dddd; color: var(--vermelho); }
.mensagem.ok { background: #e5f4ea; color: var(--verde); }

.vazio, .texto-menor { color: var(--muted); font-size: 14px; }
.centralizado { text-align: center; padding: 50px 20px; }

.turma-aluno-card {
  background: white;
  border: 1px solid var(--borda);
  border-radius: 7px;
  padding: 20px;
  margin-bottom: 18px;
}

.turma-aluno-topo h2 { margin: 0 0 4px; }

.questao-resposta {
  background: white;
  border: 1px solid var(--borda);
  border-radius: 7px;
  padding: 22px;
  margin-bottom: 18px;
}

.questao-resposta h3 { line-height: 1.45; }

.alternativas {
  display: grid;
  gap: 8px;
  margin-top: 15px;
}

.alternativas label {
  margin: 0;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px;
  border: 1px solid var(--borda);
  font-weight: normal;
}

.alternativas input { width: auto; margin-top: 3px; }

.botao-grande {
  width: 100%;
  padding: 15px;
  margin-bottom: 40px;
  font-size: 17px;
}

.anti-copy .texto-protegido {
  user-select: none;
  -webkit-user-select: none;
}

.resultado-card {
  border: 1px solid var(--borda);
  padding: 12px;
  margin: 10px 0;
}

.resultado-card summary {
  cursor: pointer;
  display: flex;
  gap: 14px;
  align-items: center;
}

.resultado-card summary strong { flex: 1; }

.resultado-meta {
  margin: 14px 0;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}

.resposta-card {
  padding: 12px;
  background: var(--cinza);
  margin: 8px 0;
}

.resposta-card p { white-space: pre-wrap; }
.resposta-card small { color: var(--muted); }

@media (max-width: 850px) {
  .login-grid, .grid-painel, .duas-colunas-painel, .form-grid, .duas-colunas {
    grid-template-columns: 1fr;
  }
  .login-grid { padding: 30px 0; }
  .grid-painel { gap: 0; }
  .topo { padding: 12px 16px; }
}

/* CHAT DAS TURMAS */
.chat-panel {margin-top:20px;}
.chat-heading {display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;}
.chat-heading h2 {margin-bottom:4px;}
.chat-tools {display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin:15px 0;}
.chat-tools label {flex:1;min-width:180px;}
.chat-tools select {width:100%;margin-top:6px;padding:10px;}
#chat-private-chooser:not([hidden]) {max-width:250px;}
.chat-feed {min-height:240px;max-height:390px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:16px;background:#edf1f5;border:1px solid #d4dce5;border-radius:7px;}
.chat-bubble {align-self:flex-start;max-width:83%;padding:10px 14px;background:white;border-radius:10px;box-shadow:0 1px 3px #00000012;overflow-wrap:anywhere;}
.chat-bubble.mine {align-self:flex-end;background:#d7e8f6;}
.chat-author {font-size:12px;font-weight:700;color:#244c77;margin-bottom:4px;}
.chat-content {white-space:pre-wrap;}
.chat-meta {font-size:11px;color:#667;display:flex;gap:10px;margin-top:5px;justify-content:flex-end;}
.chat-remove {border:0;background:none;color:#9b3030;padding:0;font-size:11px;cursor:pointer;}
.chat-compose {display:flex;gap:8px;margin-top:12px;}
.chat-compose input {flex:1;min-width:0;}
@media(max-width:600px){.chat-bubble{max-width:95%;}.chat-compose{flex-wrap:wrap;}.chat-compose button{width:100%;}}

/* JANELA FLUTUANTE DO CHAT V2: nunca ocupa espaço no fluxo da página. */
.chat-panel { position:fixed; inset:auto 20px 20px auto; z-index:1200; width:min(390px,calc(100vw - 24px)); margin:0; padding:0; border:0; background:transparent; box-shadow:none; }
.chat-panel[hidden], .chat-window[hidden], .chat-launcher[hidden], .chat-history-filters[hidden], .chat-history-pager[hidden], .chat-teacher-row[hidden], #chat-private-label[hidden] { display:none!important; }
.chat-launcher { display:flex; align-items:center; gap:10px; min-height:53px; margin-left:auto; border-radius:50px; padding:11px 17px; background:#244b76; color:white; box-shadow:0 6px 26px #101e3155; font-weight:bold; }
/* Quando recolhido, o botão fica acima do selo "Powered by Netlify".
   A janela aberta e a janela maximizada mantêm o posicionamento original. */
.chat-launcher { transform: translateY(-82px); }
.chat-launcher-icon { width:23px; height:23px; flex-shrink:0; }
.chat-launcher { background:linear-gradient(135deg,#2b6096,#1e4068); border:1px solid #ffffff30; box-shadow:0 6px 20px #101e3140,inset 0 1px 0 #ffffff24; transition:background .18s,box-shadow .18s; }
.chat-launcher:hover { opacity:1; background:linear-gradient(135deg,#326da8,#244b76); box-shadow:0 8px 24px #101e3155,inset 0 1px 0 #ffffff30; }
.chat-launcher:focus-visible { outline:3px solid #71b5ef; outline-offset:4px; }
.chat-class-label { margin:0; font-size:12px; }
.chat-class-label[hidden] { display:none; }
.chat-class-label select { margin-top:4px; padding:7px; }
.chat-badge { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; min-width:20px; height:20px; padding:0 5px; font-weight:700; font-size:11px; line-height:1; color:#fff; background:#c52d35; border-radius:100px; }
.chat-badge[hidden] { display:none!important; }
.chat-window { display:flex; flex-direction:column; overflow:hidden; width:100%; height:min(620px,calc(100dvh - 36px)); background:white; border-radius:12px; box-shadow:0 9px 40px #0b172754; border:1px solid #cfd9e6; }
.chat-bar { flex:0 0 auto; display:flex; justify-content:space-between; align-items:center; padding:12px 13px; gap:8px; background:#244b76; color:white; }
.chat-bar-text { min-width:0; flex:1; display:grid; gap:3px; }
.chat-bar-text strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.chat-bar-text small { font-size:11px; opacity:.85; }
.chat-window-buttons { display:flex; align-items:center; gap:5px; }
.chat-icon-button { width:31px; height:31px; display:grid; place-items:center; padding:0; border:1px solid #ffffff60; background:transparent; font-size:20px; color:#fff; }
.chat-icon-button:hover { background:#ffffff28; }
.chat-body { min-height:0; flex:1; padding:12px; display:flex; flex-direction:column; gap:10px; }
.chat-toolbar { display:flex; gap:10px; align-items:end; }
.chat-toolbar label { flex:1; min-width:0; margin:0; font-size:12px; }
.chat-toolbar select { padding:7px; margin:4px 0 0; min-width:0; }
.chat-teacher-row { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12px; }
.chat-check { display:flex; gap:5px; align-items:center; margin:0; font-size:12px; font-weight:normal; }
.chat-check input { width:auto; margin:0; }
.chat-subtle-button { padding:6px 8px; border:1px solid #c6d4e2; color:#244b76; background:#f6f9fc; font-size:12px; }
.chat-history-filters { padding:9px; background:#f5f8fc; border:1px solid #dae2ec; border-radius:7px; display:grid; gap:6px; }
.chat-history-filters label { margin:0; font-size:11px; }
.chat-history-filters input, .chat-history-filters select { padding:5px; margin:3px 0 0; font-size:12px; }
.chat-filter-dates { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.chat-filter-actions { display:flex; gap:8px; }
.chat-filter-actions button { flex:1; padding:7px; font-size:12px; }
.chat-feed { flex:1; min-height:0; max-height:none; overflow:auto; padding:12px; margin:0; border-radius:7px; }
.chat-bubble { flex-shrink:0; font-size:13px; }
.chat-deleted { border:1px solid #bb4545; }
.chat-deleted-label { display:inline-block; font-size:11px; color:#a32929; font-weight:bold; margin-bottom:5px; }
.chat-author { display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.chat-author-id { opacity:.65; font-weight:400; font-size:10px; }
.chat-compose { flex:0 0 auto; margin:0; }
.chat-compose input { padding:9px; min-width:0; }
.chat-compose button { padding:9px 12px; }
.chat-notice { margin:0; padding:7px; background:#fff5e6; font-size:12px; border-radius:5px; }
.chat-notice[hidden] { display:none; }
.chat-history-pager { display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:12px; }
.chat-panel.chat-maximized { width:min(790px,calc(100vw - 32px)); bottom:16px; right:16px; }
.chat-maximized .chat-window { height:calc(100dvh - 32px); }
@media(max-width:600px) {
  .chat-panel {right:8px;bottom:8px;width:calc(100vw - 16px)}
  .chat-panel.chat-maximized {right:0;bottom:0;width:100vw;}
  .chat-maximized .chat-window {height:100dvh;border-radius:0;}
  .chat-window {height:min(600px,calc(100dvh - 16px));}
  .chat-compose {flex-wrap:nowrap;}
  .chat-compose button {width:auto;}
  .chat-toolbar { flex-wrap:wrap; }
  .chat-toolbar label {flex-basis:140px;}
}