/* Obstetrícia EPM — mobile-first, alvo de toque grande (uso em pé, na enfermaria). */
:root{
  /* Direção C, decisão do Dr. em 27/08: o VERDE DO BRASÃO é a cor principal do
     departamento — cabeçalhos, ações e estados marcados. A tinta azul vira
     apoio e texto. Degradê sempre a 135° em superfície sólida; manchas radiais
     só ao fundo. As linhas de aluno ficam LISAS de propósito: variação atrás de
     nome e nota atrapalha a leitura em pé, na enfermaria, com luz ruim. */
  --verde:#1f7a4d; --verde-claro:#2a8d5c; --verde-escuro:#176040;
  --verde-lavado:#e3f1e9; --verde-borda:#b9dcc8;
  --tinta:#12435c; --tinta-clara:#1c6c93; --fundo:#eef4f0; --carta:#fff;
  --texto:#16232b; --suave:#55666f; --borda:#d3ded8;   /* --suave escurecido:
     sobre as lavagens novas o #6b7c85 caía para 3,9–4,0:1. Medido. */
  --ok:#1f7a4d; --alerta:#b3541e; --erro:#a8262b; --destaque:#fff4d6;
  --alerta-lavado:#fff4dc; --alerta-borda:#eed9a3;
  --erro-lavado:#fdefef; --erro-borda:#f3c7c7;
  --raio:14px; --sombra:0 1px 3px rgba(18,67,92,.10);
  --grad-tinta:linear-gradient(135deg,#1b5d7e 0%,#0d3245 100%);
  --grad-verde:linear-gradient(135deg,#2a8d5c 0%,#176040 100%);
  --grad-erro:linear-gradient(135deg,#c0343a 0%,#8f1f26 100%);
  /* lavagem clara para caixa que ainda precisa ser lida por cima */
  --lav-verde:linear-gradient(135deg,#ffffff 0%,#d9eee3 100%);
  --lav-alerta:linear-gradient(135deg,#fffdf6 0%,#ffeec4 100%);
  --lav-erro:linear-gradient(135deg,#fffafa 0%,#fbdede 100%);
  /* lavagem de fundo dos cartões de leitura — clara onde o texto começa */
  --lav-carta:linear-gradient(135deg,#ffffff 0%,#eef6f1 100%);
  --lav-botao:linear-gradient(135deg,#ffffff 0%,#f1f8f4 100%);
}
*{box-sizing:border-box}
/* o atributo hidden tem de vencer o display:flex do header e do menu */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  /* Três manchas em vez de duas, e bem mais fortes: a pedido do Dr. em 27/08 o
     fundo deixa de ser cinza quase liso. Só o fundo — texto nenhum se apoia nelas. */
  background:
    radial-gradient(880px 600px at 92% 0%, rgba(31,122,77,.16), transparent 58%),
    radial-gradient(720px 540px at 0% 32%, rgba(18,67,92,.10), transparent 60%),
    radial-gradient(640px 500px at 88% 82%, rgba(31,122,77,.12), transparent 62%),
    var(--fundo);
  background-attachment:fixed; color:var(--texto);
  -webkit-text-size-adjust:100%; padding-bottom:env(safe-area-inset-bottom);
  /* Tela curta deixava o menu parado no meio da página — invisível enquanto o
     fundo era quase branco, evidente agora que ele é tingido. */
  min-height:100dvh; display:flex; flex-direction:column;
}
main#tela{flex:1 0 auto}
header{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:8px;
  /* Começo igual (o título branco vive ali e já foi medido em 5,56:1); o fim vai
     mais fundo, para o degradê aparecer de verdade. */
  background:linear-gradient(135deg,#2a8d5c 0%,#0f4b31 100%); color:#fff;
  padding:calc(env(safe-area-inset-top) + 10px) 12px 10px;
  box-shadow:0 1px 12px rgba(9,53,35,.24);
}
/* Brasão colorido, com contorno branco só na silhueta — três sombras de 1 px.
   ⚠️ Filtro de silhueta branca vira mancha, e o brasão original tinha ~50% de
   margem transparente na largura: este arquivo já vem recortado no bbox. */
header img.brasao{
  height:30px; width:auto; display:block; flex-shrink:0;
  filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
}
header h1{flex:1; margin:0; font-size:17px; font-weight:600; letter-spacing:.2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.icone{
  background:rgba(255,255,255,.14); color:#fff; border:0; border-radius:10px;
  width:40px; height:40px; font-size:20px; line-height:1; cursor:pointer;
}
main{padding:12px; max-width:820px; margin:0 auto}
nav#menu{
  position:sticky; bottom:0; display:flex;
  background:linear-gradient(180deg,#f0f8f3 0%,#ffffff 60%);
  border-top:1px solid var(--verde-borda); padding-bottom:env(safe-area-inset-bottom);
}
nav#menu button{
  flex:1; background:none; border:0; padding:10px 4px 12px; font-size:11px;
  color:var(--suave); cursor:pointer;
}
nav#menu button b{display:block; font-size:19px; font-weight:400; line-height:1.3}
nav#menu button.ativo{color:var(--verde-escuro); font-weight:600}

/* Degradê nas caixas (pedido do Dr., 27/08): 135°, claro onde o texto começa.
   ⚠️ A tabela de notas é exceção e fica branca — variação atrás de nome e nota
   atrapalha a leitura, que é a regra do quadro "o que não muda". */
.carta{background:var(--lav-carta); border:1px solid var(--borda); border-radius:var(--raio);
  padding:14px; margin-bottom:12px; box-shadow:var(--sombra)}
.carta:has(> table){background:var(--carta)}
.carta h2{margin:0 0 4px; font-size:16px}
.carta p.sub{margin:0; color:var(--suave); font-size:13px}
.linha{display:flex; align-items:center; gap:10px; justify-content:space-between}
.rotulo{font-size:12px; color:var(--suave); text-transform:uppercase; letter-spacing:.5px; margin:14px 0 6px}

button.primario{
  background:var(--grad-verde); color:#fff; border:0; border-radius:12px;
  box-shadow:0 2px 8px rgba(23,96,64,.26);
  padding:14px 16px; font-size:16px; width:100%; cursor:pointer; font-weight:600;
}
button.secundario{background:var(--lav-botao); color:var(--verde-escuro);
  border:1px solid var(--verde-borda); border-radius:12px; padding:12px 14px;
  font-size:15px; font-weight:600; cursor:pointer}
input,select,textarea{
  width:100%; padding:13px; font-size:16px; border:1px solid var(--borda);
  border-radius:12px; background:var(--carta); color:var(--texto);
  /* 🔴 04/10 — sem isto o textarea cai no monospace do navegador: foi o que
     deixou o quadro da direita com cara de terminal e difícil de ler. */
  font-family: inherit;
}
label{display:block; font-size:13px; color:var(--suave); margin:10px 0 4px}

/* -------- caderneta -------- */
.aluno{background:var(--carta); border:1px solid var(--borda); border-radius:var(--raio);
  margin-bottom:8px; overflow:hidden}
/* Recolhido, o aluno é uma linha só. Esta tela serve para ESCOLHER o aluno
   dentro do grupo; as notas aparecem só em quem está sendo avaliado. */
.aluno .cabecalho{display:flex; align-items:center; gap:10px; width:100%;
  background:none; border:0; padding:14px 12px; text-align:left; cursor:pointer;
  font:inherit; color:inherit; min-height:52px}
.aluno .cabecalho:focus-visible{outline:2px solid var(--tinta-clara); outline-offset:-2px}
.aluno .nome{font-weight:600; font-size:15px; flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.aluno .chip{font-size:12px; font-weight:700; color:var(--verde-escuro); background:#e8f5ee;
  border:1px solid var(--borda); border-radius:999px; padding:3px 9px;
  font-variant-numeric:tabular-nums; flex-shrink:0}
.aluno .chip.vazio{color:var(--suave); background:var(--fundo); font-weight:400}
.aluno .chip.falta{color:var(--erro); border-color:#f3c7c7; background:#fdeaea}
.aluno .seta{color:var(--borda); font-size:20px; line-height:1; flex-shrink:0;
  transition:transform .18s ease}
.aluno.aberto .seta{transform:rotate(90deg); color:var(--suave)}
.aluno .corpo{display:none; padding:0 12px 12px}
.aluno.aberto .corpo{display:block}
/* Aluno em avaliação: a única linha que sai do branco liso — e sai de leve, com
   a lavagem só no topo, para o nome e a nota continuarem sobre branco. */
.aluno.aberto{border-color:var(--verde); border-width:2px;
  background:linear-gradient(180deg,#e4f2ea 0%,var(--carta) 32%);
  box-shadow:0 2px 10px rgba(18,67,92,.10)}
.aluno .corpo .rotulo{margin:8px 0 6px}
@media (prefers-reduced-motion: reduce){.aluno .seta{transition:none}}
.aluno .media{font-variant-numeric:tabular-nums; font-weight:700; color:var(--tinta); font-size:18px}
.aluno .media.vazia{color:var(--borda)}
.slots{display:flex; flex-wrap:wrap; gap:6px}
.slots button{background:var(--lav-botao);
  border:1px solid var(--borda); background:var(--carta); color:var(--suave);
  border-radius:999px; padding:8px 11px; font-size:13px; min-width:56px; cursor:pointer;
}
/* 🔴 06/10/2026: esta regra estava sem seletor (`""{`) — a chegada marcada nunca ficava
   verde; só o selo ao lado do nome mostrava. */
.slots button.marcado{background:var(--grad-verde); color:#fff; border-color:transparent;
  box-shadow:0 2px 6px rgba(13,50,69,.22)}
.slots button.falta.marcado{background:var(--grad-erro); border-color:transparent}
.grupos{display:flex; gap:6px; flex-wrap:wrap}
.grupos button{width:38px; height:38px; border-radius:50%; border:1px solid var(--borda);
  background:var(--lav-botao);
  background:var(--carta); font-size:15px; cursor:pointer}
.grupos button.marcado{background:var(--grad-verde); color:#fff; border-color:transparent;
  box-shadow:0 2px 7px rgba(23,96,64,.28)}
.criterio{margin-top:10px}
.criterio .titulo{font-size:13px; display:flex; justify-content:space-between; color:var(--suave)}
.notas{display:flex; gap:3px; margin-top:5px}          /* 9 botões cabem em uma linha no iPhone */
.notas button{flex:1 1 0; min-width:0; padding:10px 0; border:1px solid var(--borda);
  background:var(--lav-botao); border-radius:9px; font-size:14px; cursor:pointer}
.notas button.marcado{background:var(--grad-verde); color:#fff; border-color:transparent;
  box-shadow:0 2px 6px rgba(23,96,64,.24)}
/* Régua do departamento: cinco conceitos em palavra, não em número (decisão do
   Dr., 27/08). O marcado vem no verde do brasão — é a cor principal daqui. */
/* Largura proporcional ao rótulo, não fatia igual: com cinco colunas iguais o
   "Insuficiente" quebra no meio da palavra num iPhone de 375 px (medido). */
.conceitos{display:flex; flex-wrap:wrap; gap:4px; margin-top:5px}
.conceitos button{flex:1 1 auto; min-height:44px; padding:0 6px; white-space:nowrap;
  border:1px solid var(--borda); background:var(--lav-botao); color:var(--suave);
  border-radius:8px; font-size:11px; font-weight:700; line-height:1.1;
  letter-spacing:-.2px; cursor:pointer}
.conceitos button.marcado{background:var(--grad-verde); color:#fff; border-color:transparent;
  font-weight:800; box-shadow:0 2px 7px rgba(23,96,64,.28)}
/* Nota lançada antes da régua atual: aparece em voz alta, não vira conceito por conta própria. */
.fora-da-regua{margin:6px 0 0; font-size:12px; color:var(--alerta);
  background:var(--destaque); border-radius:8px; padding:6px 9px}

/* Carimbo de gravação. O toque já salva; o que faltava era o app DIZER isso —
   no ensaio de 27/08 o Dr. procurou um botão "Salvar" que não existe. Discreto
   de propósito: é confirmação, não aviso. */
.salvo{margin:12px 0 0; font-size:12px; color:var(--suave); text-align:right;
  font-variant-numeric:tabular-nums}
.salvo::before{content:"✓ "; color:var(--ok); font-weight:700}
.salvo.agora{animation:piscasalvo 1.4s ease-out}
@keyframes piscasalvo{ from{color:var(--ok)} to{color:var(--suave)} }
@media (prefers-reduced-motion: reduce){ .salvo.agora{animation:none} }

/* Fim da aula: a saída para fechar a turma aparece onde o docente está, e não
   só na tela da turma — que foi onde o Dr. não a encontrou. */
.carta.remate{border-color:var(--ok); background:
  linear-gradient(180deg, #f1f8f4 0%, var(--carta) 42%)}
.carta.remate h2{color:var(--ok)}

/* -------- avisos -------- */
#aviso{position:fixed; left:12px; right:12px; bottom:74px; z-index:50;
  background:var(--texto); color:#fff; padding:12px 14px; border-radius:12px; font-size:14px}
#aviso.erro{background:var(--erro)}
#aviso.ok{background:var(--ok)}
.pendente{background:var(--destaque); border-left:4px solid var(--alerta); padding:10px 12px;
  border-radius:8px; font-size:13px; margin-bottom:12px}
/* Semáforo de estado com fundo tingido — o Dr. gostou do da tela de anamnese e
   pediu que ficasse mais presente. Vale em toda tela que mostra estado. */
/* Pílula é rótulo curto e NÃO quebra linha: em duas linhas o raio de 999px vira
   um borrão oval. Frase inteira usa `.selo`, logo abaixo. */
.tag{display:inline-block; font-size:11px; font-weight:700; padding:3px 9px;
  white-space:nowrap; flex-shrink:0;
  border-radius:999px; background:var(--fundo); border:1px solid var(--borda); color:var(--suave)}
.tag.ok{background:#e8f5ee; color:var(--ok); border-color:#bfe3cd}
.tag.aviso{background:var(--alerta-lavado); color:var(--alerta); border-color:var(--alerta-borda)}
.tag.bloq{background:var(--erro-lavado); color:var(--erro); border-color:var(--erro-borda)}
/* Alerta de situação é FRASE, não etiqueta: numa pílula de raio 999px o texto de
   duas linhas vira um borrão oval. Bloco de canto suave, com o mesmo semáforo. */
.selo{display:block; margin-top:5px; font-size:11.5px; font-weight:700; line-height:1.35;
  padding:5px 9px; border-radius:7px; border:1px solid var(--borda);
  background:var(--fundo); color:var(--suave)}
.selo.aviso{background:var(--alerta-lavado); color:var(--alerta); border-color:var(--alerta-borda)}
.selo.bloq{background:var(--erro-lavado); color:var(--erro); border-color:var(--erro-borda)}
table{width:100%; border-collapse:collapse; font-size:14px}
th,td{text-align:left; padding:8px 6px; border-bottom:1px solid var(--borda)}
th{font-size:12px; color:var(--verde-escuro); text-transform:uppercase; letter-spacing:.4px;
  background:var(--verde-lavado); font-weight:800}
/* As colunas de número ficam do tamanho do número; a sobra vai para o nome —
   senão o alerta de situação é espremido em cinco linhas. */
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums;
  white-space:nowrap; width:1%}
.vazio{color:var(--suave); text-align:center; padding:26px 10px; font-size:14px}

/* A capa é de bordo a bordo: a largura máxima do main serve às telas internas,
   não à página de entrada. */
main#tela.cheio { max-width: none; padding: 0 }

/* ================= PÁGINA DE ENTRADA (visitante sem sessão) =================
   Uma página só, fluida: o que no desenho eram dois artboards (tela grande e
   celular) aqui é a mesma marcação com uma quebra em 900px. */
.entrada { min-height: 100vh; background: var(--fundo); }
.entrada .capa {
  position: relative;
  /* Celular: o texto ocupa a largura toda, então o véu é vertical.
     No computador ele vira horizontal (regra dos 900px, mais abaixo): escurece
     a ESQUERDA, onde está o texto, e deixa o meio quase limpo — é onde está o
     busto de Lemos Torres, que não pode sumir no escuro. */
  background-image:
    linear-gradient(180deg, rgba(7,28,38,.82) 0%, rgba(7,28,38,.60) 44%, rgba(7,28,38,.90) 100%),
    url("/static/escadaria.jpg");
  background-size: cover, cover;
  background-position: center 28%, center 34%;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;   /* a escadaria fica parada; o texto sobe */
  padding: 0 20px 34px;
}
/* iOS ignora background-attachment: fixed — sem isto a foto "pula" ao rolar */
@supports (-webkit-touch-callout: none) { .entrada .capa { background-attachment: scroll, scroll; } }

.entrada .marca { display: flex; align-items: center; gap: 14px; padding: 20px 0 16px;
  border-bottom: 1px solid rgba(255,255,255,.14); }
/* O brasão RECORTADO, não o ícone do PWA: aquele tem ~50% de margem transparente
   na largura, então 40px de caixa rendiam uns 20px de brasão — daí parecer pequeno. */
.entrada .marca img { height: 56px; width: auto; display: block; flex-shrink: 0;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.45)) }
.entrada .marca b { display: block; font-size: 19px; color: #fff; font-weight: 600;
  text-shadow: 0 1px 4px rgba(0,0,0,.5) }
.entrada .marca span { font-size: 13px; color: rgba(255,255,255,.82);
  text-shadow: 0 1px 4px rgba(0,0,0,.5) }
.entrada .selo { display: inline-block; margin-top: 28px; font-size: 11px; letter-spacing: 1.4px;
  text-transform: uppercase; color: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.38); border-radius: 999px; padding: 5px 12px;
  background: rgba(7,28,38,.35) }
/* Sombra no texto da capa: o véu já dá a base, e a sombra é o seguro para a
   faixa em que a foto tem folha clara atrás da letra. */
.entrada .texto { text-shadow: 0 1px 4px rgba(0,0,0,.55) }
.entrada h1 { font-size: 38px; line-height: 1.1; font-weight: 400; color: #fff; margin: 18px 0 0;
  font-family: "Source Serif 4", Georgia, serif; text-wrap: pretty;
  text-shadow: 0 2px 8px rgba(0,0,0,.6) }
.entrada .lema { display: flex; align-items: flex-start; gap: 12px; margin-top: 20px }
.entrada .lema i { width: 32px; height: 2px; background: var(--ok); flex-shrink: 0; margin-top: 12px }
.entrada .lema span { font-family: "Source Serif 4", Georgia, serif; font-size: 21px;
  line-height: 1.28; color: #fff; font-style: normal }
.entrada .chamada { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.94); margin: 16px 0 0 }
.entrada .valores { display: flex; flex-direction: column; gap: 12px; margin-top: 26px;
  padding-top: 20px; border-top: 1px solid rgba(255,255,255,.16) }
.entrada .valores div { flex: 1 1 0 }
.entrada .valores b { font-family: "Source Serif 4", Georgia, serif;
  font-size: 18px; font-weight: 400; color: #fff }
.entrada .valores span { font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.80) }
/* No celular cada destaque ocupa uma linha: em três colunas de 375px o texto quebrava feio. */
.entrada .valores b::after { content: " — "; color: rgba(255,255,255,.38) }

.entrada form.acesso { background: var(--carta); border-radius: 16px; padding: 22px; margin-top: 26px;
  box-shadow: 0 14px 36px rgba(4,20,28,.40) }
.entrada form.acesso h2 { margin: 0; font-size: 18px }
.entrada form.acesso button.primario{background:var(--grad-verde)}   /* verde do brasão, com profundidade */
.entrada form.acesso p.sub { margin: 3px 0 0; font-size: 13px; color: var(--suave) }
.entrada form.acesso .ajuda { font-size: 12px; color: var(--suave); line-height: 1.5;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid #eef2f4 }

.entrada .modulos { padding: 34px 20px 30px; position: relative;
  background: radial-gradient(720px 420px at 92% 0%, rgba(31,122,77,.07), transparent 62%); }
.entrada .modulos h2 { font-family: "Source Serif 4", Georgia, serif; font-size: 26px;
  font-weight: 400; margin: 0; color: var(--tinta) }
.entrada .modulos p.sub { font-size: 15px; line-height: 1.55; color: #4a5b64; margin: 10px 0 0 }
.entrada .grade { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 12px; margin-top: 22px }
.entrada .grade article { background: var(--carta); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 18px }
.entrada .grade h3 { font-size: 16px; font-weight: 600; margin: 10px 0 0 }
.entrada .grade p { font-size: 14px; line-height: 1.5; color: #4a5b64; margin: 6px 0 0 }
.entrada .grade svg { stroke: var(--verde) }
/* Cartão de recurso que ainda não existe: aparece, mas dizendo que não existe.
   Anunciar como pronto o que está por vir é o tipo de mentira que só aparece
   na frente dos colegas. */
.entrada .grade article .tag { display: inline-block; margin-top: 8px }
.entrada .grade article:has(.tag) { border-style: dashed; background: transparent;
  box-shadow: none }

/* Convite final: o app pede sugestão, e isso é parte do que ele é. */
.entrada .convite { margin-top: 26px; padding: 20px 22px; border-radius: var(--raio);
  background: var(--lav-verde); border: 1px solid var(--verde-borda) }
.entrada .convite p { margin: 0; font-size: 16px; line-height: 1.5; color: #24424f }
.entrada .convite p + p { margin-top: 6px; color: #4a5b64; font-size: 15px }
.entrada .convite b { font-family: "Source Serif 4", Georgia, serif; font-size: 20px;
  font-weight: 600; color: var(--verde-escuro) }
.entrada footer { background: var(--grad-tinta); color: rgba(255,255,255,.78);
  padding: 24px 20px; font-size: 12px; line-height: 1.6 }
.entrada footer div { margin-top: 6px; color: rgba(255,255,255,.5) }
.entrada footer .tecnico { color: rgba(255,255,255,.78) }   /* responsável técnico: mesma força da 1ª linha */

@media (min-width: 900px) {
  .entrada .capa { padding: 0 64px 72px }
  /* Véu HORIZONTAL: escuro na esquerda (onde está o texto), quase limpo do meio
     em diante. O busto de Lemos Torres fica por volta dos 48% da largura — ali o
     véu já caiu para ~0,45, então ele aparece. A caixa de login é branca e opaca:
     não precisa de escuro atrás, e por isso a direita pode ficar clara. */
  .entrada .capa {
    background-image:
      linear-gradient(100deg,
        rgba(7,28,38,.93) 0%, rgba(7,28,38,.88) 26%, rgba(7,28,38,.66) 40%,
        rgba(7,28,38,.34) 52%, rgba(7,28,38,.14) 64%, rgba(7,28,38,.10) 100%),
      linear-gradient(180deg,
        rgba(7,28,38,.40) 0%, rgba(7,28,38,0) 26%,
        rgba(7,28,38,0) 74%, rgba(7,28,38,.46) 100%),
      url("/static/escadaria.jpg");
  }
  .entrada .marca img { height: 76px }
  .entrada .marca b { font-size: 22px }
  .entrada .marca span { font-size: 14px }
  .entrada .duas { display: flex; gap: 48px; align-items: flex-start; padding-top: 72px }
  .entrada .duas > .texto { flex: 0 1 auto; max-width: 540px }
  .entrada h1 { font-size: 56px }
  .entrada .lema span { font-size: 26px }
  .entrada .lema i { width: 44px; margin-top: 15px }
  .entrada .chamada { font-size: 18px; max-width: 520px }
  .entrada .valores { flex-direction: row; gap: 28px }
  .entrada .valores b { display: block; font-size: 24px }
  .entrada .valores b::after { content: none }
  .entrada .valores span { font-size: 13px }
  /* `margin-left:auto` empurra a caixa para a borda direita — fora do busto. */
  .entrada form.acesso { width: 372px; flex-shrink: 0; margin-top: 0; margin-left: auto; padding: 30px }
  .entrada .modulos { padding: 72px 64px 64px }
  .entrada .modulos h2 { font-size: 34px }
  .entrada .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px }
  .entrada .grade article { padding: 24px }
  /* São 7 cartões: o sétimo é o que ainda vai existir, e ocupa a última linha
     inteira — sozinho na ponta ele pareceria sobra de grade. */
  .entrada .grade article:has(.tag) { grid-column: 1 / -1 }
  .entrada .convite { margin-top: 34px; padding: 26px 30px }
  .entrada footer { padding: 34px 64px }
}

/* -------- lista agrupada da caderneta --------
   Os alunos do mesmo grupo atendem a mesma paciente e são avaliados juntos:
   a lista se reorganiza por grupo assim que o docente distribui. */
section.grupo { margin-bottom: 18px }
section.grupo[hidden] { display: none }
/* Faixa do grupo tingida (pedido do Dr., 27/08): a caixa ganha degradê, a linha
   do aluno continua branca e lisa. */
section.grupo h3 {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 8px; padding: 7px 10px; font-size: 12px; letter-spacing: .6px;
  text-transform: uppercase; color: var(--verde-escuro); font-weight: 800;
  background: linear-gradient(135deg, #cbe7d8 0%, #f2faf6 100%);
  border: 1px solid #b0d7c1; border-radius: 8px;
}
section.grupo h3 span {
  margin-left: auto; font-size: 11px; font-weight: 800; color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
section.grupo[data-secao=""] h3 {
  color: var(--alerta); background: var(--lav-alerta); border-color: var(--alerta-borda);
}
.aluno.mudou { animation: chegou 1.2s ease-out }
@keyframes chegou {
  0%   { box-shadow: 0 0 0 3px rgba(31,122,77,.45); transform: scale(1.012) }
  100% { box-shadow: 0 0 0 3px rgba(31,122,77,0);   transform: scale(1) }
}
@media (prefers-reduced-motion: reduce) {
  .aluno.mudou { animation: none; outline: 2px solid var(--ok) }
}
/* Critério calculado pelo sistema: mostra o valor e de onde veio, sem botões. */
.criterio.calculado .derivado{display:flex; align-items:center; gap:10px; margin-top:5px;
  background:var(--fundo); border:1px dashed var(--borda); border-radius:9px; padding:9px 12px}
.criterio.calculado .derivado b{font-size:18px; color:var(--tinta); font-variant-numeric:tabular-nums}
.criterio.calculado .derivado span{font-size:12px; color:var(--suave)}

/* -------- átrio: minhas atividades + os anos do departamento -------- */
.ladrilho{background:linear-gradient(135deg,#ffffff 0%,#cfe9dc 100%); border:1px solid var(--verde-borda); border-radius:var(--raio);
  padding:14px; box-shadow:var(--sombra); cursor:pointer; text-align:left;
  display:flex; flex-direction:column; gap:5px; min-height:104px}
.ladrilho b{font-size:16px; font-weight:700; color:var(--tinta);
  display:flex; align-items:center; gap:7px}
/* Pastilha de estado: o mesmo semáforo do resto do app, do tamanho de um ponto. */
.ladrilho b::before{content:""; width:8px; height:8px; border-radius:50%;
  background:var(--verde); flex-shrink:0}
.ladrilho.preparo b::before{background:var(--borda)}
/* #4a5b64 e não --suave: sobre a lavagem verde o cinza claro fica em 4,06:1. */
.ladrilho span{font-size:12.5px; color:#4a5b64; line-height:1.3}
.ladrilho .conta{font-size:18px; font-weight:800; color:var(--texto); margin-top:auto;
  font-variant-numeric:tabular-nums}
.ladrilho .conta i{font-size:12px; font-style:normal; color:var(--suave); font-weight:600}
.ladrilho .barra{height:5px; border-radius:999px; background:#eef2f4; overflow:hidden}
.ladrilho .barra i{display:block; height:100%; background:var(--grad-verde)}
/* A próxima atividade é cartão CLARO com barra verde à esquerda — verde sobre o
   cabeçalho verde vira uma mancha só, e é justamente o que o docente procura primeiro. */
.ladrilho.principal{background:var(--lav-verde); border-color:var(--verde-borda);
  border-left:4px solid var(--verde); margin-bottom:4px; min-height:76px;
  justify-content:center; box-shadow:var(--sombra)}
.ladrilho.principal b{color:var(--tinta); font-size:17px}
.ladrilho.principal b::before{content:none}   /* aqui a pastilha não diz estado nenhum */
.ladrilho.principal span{color:#4a5b64}
/* Atalho para fora do app: o Prova-Show roda em outro endereço, com conta
   própria. A seta e o texto dizem isso antes do toque — chegar num login
   desconhecido sem aviso é o que faz o docente desistir. */
.ladrilho.externo{margin-bottom:12px; min-height:0; text-decoration:none; color:inherit;
  border-left:4px solid var(--verde)}
.ladrilho.externo b::after{content:" ↗"; font-size:14px; color:var(--verde)}
.ladrilho.externo b::before{content:none}
.ladrilho.externo span b{font-weight:600; color:var(--verde-escuro)}
.ladrilhos{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px}
/* Ano ainda não configurado: secundário, mas legível — apagado demais vira defeito. */
.ladrilho.preparo{background:transparent; border-style:dashed; border-color:var(--borda);
  box-shadow:none; cursor:default; justify-content:flex-start}
.ladrilho.preparo b{color:var(--suave)}
.ladrilho.preparo span{color:var(--suave); opacity:.85}

/* A aula que é MINHA: cartão grande, tocável inteiro, com a data em destaque.
   A primeira da lista é a que importa — ganha borda verde e sombra. */
.carta.aula-minha{cursor:pointer}
.carta.aula-minha .quando{margin:0 0 3px; font-size:11px; font-weight:800;
  letter-spacing:.7px; text-transform:uppercase; color:var(--verde-escuro)}
.carta.aula-minha h2{font-size:17px}
.carta.aula-minha .seta{color:var(--borda); font-size:22px; line-height:1; flex-shrink:0}
.carta.aula-minha.agora{border:2px solid var(--verde); box-shadow:0 3px 14px rgba(23,96,64,.18);
  background:linear-gradient(135deg,#ffffff 0%,#dcefe4 100%)}
.carta.aula-minha.agora .seta{color:var(--verde)}

/* Elo: o caminho secundário. Existe, é achável, e não disputa a atenção com a
   aula do dia — que é o que o docente veio fazer. */
button.elo{display:block; width:100%; margin:0 0 12px; padding:12px 14px;
  background:none; border:0; border-bottom:1px solid var(--borda);
  color:var(--verde-escuro); font-size:14px; font-weight:600; text-align:left;
  cursor:pointer; font-family:inherit}
button.elo::after{content:" →"}
button.elo:hover{color:var(--verde)}

/* -------- painel de contadores: o cockpit, colado ao cabeçalho -------- */
/* O painel continua o degradê do cabeçalho, mas mais escuro: sobre o verde claro
   do topo o rótulo de 10 px ficava em 3,55:1 — abaixo do mínimo de 4,5. Medido. */
.painel{display:flex; gap:8px; background:linear-gradient(135deg,#218050 0%,#0d422b 100%);
  margin:-12px -12px 14px; padding:0 12px 14px}
/* A caixa do contador escurece o verde em vez de clarear: caixa clara sobre verde
   claro empurrava o rótulo de 10 px para 3,5:1. Assim fica em ~5,9:1 — medido. */
.painel div{flex:1 1 0; min-width:0;
  background:linear-gradient(135deg,rgba(4,38,25,.10) 0%,rgba(4,38,25,.30) 100%);
  border:1px solid rgba(255,255,255,.18); border-radius:10px; padding:9px 10px}
.painel b{display:block; font-size:19px; font-weight:800; color:#fff;
  font-variant-numeric:tabular-nums; line-height:1.15}
.painel b i{font-size:12px; font-style:normal; font-weight:600; color:rgba(255,255,255,.85)}
.painel span{display:block; font-size:10px; letter-spacing:.6px; text-transform:uppercase;
  color:#fff; margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* Senha provisória: aparece UMA vez, para ser entregue na mão. Não vai por
   e-mail, não fica guardada, e o primeiro acesso obriga a troca. */
.provisoria{margin-top:10px; padding:12px 14px; border-radius:10px;
  background:var(--lav-alerta); border:1px solid var(--alerta-borda)}
.provisoria b{display:block; font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:19px; letter-spacing:.5px; color:var(--texto); user-select:all;
  word-break:break-all}
.provisoria span{display:block; margin-top:6px; font-size:12px; color:var(--alerta)}

/* -------- escolha por toque: escala da aula -------- */
.opcoes{display:flex; flex-direction:column; gap:8px}
.opcao{display:flex; align-items:center; gap:12px; width:100%; min-height:56px;
  padding:10px 14px; text-align:left; cursor:pointer;
  background:var(--lav-botao); border:1px solid var(--borda); border-radius:var(--raio);
  box-shadow:var(--sombra); font-size:15px; color:var(--texto)}
.opcao .marca{width:28px; height:28px; flex-shrink:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px;
  background:var(--fundo); color:var(--suave); border:1px solid var(--borda)}
.opcao .quem{flex:1; min-width:0; font-weight:600}
.opcao .quem .sem-acesso{display:block; font-style:normal; font-weight:400;
  font-size:11.5px; color:var(--alerta); margin-top:2px}
.opcao .estado{font-size:12px; color:var(--suave)}
.opcao.dentro{background:var(--lav-verde); border-color:var(--verde-borda)}
.opcao.dentro .marca{background:var(--grad-verde); color:#fff; border-color:transparent}
.opcao.dentro .estado{color:var(--verde-escuro); font-weight:700}
/* Aula sem ninguém escalado é buraco de operação, não detalhe: aparece em âmbar. */
.carta .sub.docentes{color:var(--verde-escuro); font-weight:600}

/* -------- cartão de pendência: semáforo tingido, pedido do Dr. -------- */
.carta.pendencia{border-left:4px solid var(--alerta); background:var(--lav-alerta);
  border-color:var(--alerta-borda)}
.carta.pendencia.grave{border-left-color:var(--erro); background:var(--lav-erro);
  border-color:var(--erro-borda)}
.carta.pendencia h2{color:var(--alerta)}
.carta.pendencia.grave h2{color:var(--erro)}
@media (min-width:700px){ .ladrilhos{grid-template-columns:repeat(3, minmax(0,1fr))} }

/* --- Prova-Show dentro das notas da turma (28/08) --------------------------
   A pendência é um cartão DENTRO do cartão da partida: quem jogou e não foi
   reconhecido tem de saltar aos olhos, sem virar uma tela à parte. */
.carta.interna{background:var(--carta); border:1px solid var(--alerta-borda);
  border-radius:10px; padding:10px 12px; margin:8px 0}
.carta.interna p{margin:0 0 8px; font-size:14px}
.carta.interna button{margin:0}
.carta.aviso-caixa{border-color:var(--alerta-borda); background:var(--alerta-lavado)}
.carta.aviso-caixa p.sub{color:var(--alerta)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px;
  letter-spacing:.5px; background:var(--lav-carta); border:1px solid var(--borda);
  border-radius:5px; padding:1px 5px}

/* Revisão da anamnese (02/10/2026): Parcial e Ausente marcados têm a cor do que
   significam — o professor bate o olho e vê onde o aluno falhou. */
.conceitos button.m-parcial.marcado{background:var(--alerta); box-shadow:none}
.conceitos button.m-ausente.marcado{background:var(--grad-erro); box-shadow:none}
button:disabled{opacity:.45; cursor:not-allowed}

/* -------- anamnese em blocos coloridos (02/10/2026) --------
   Cada seção do roteiro tem a sua cor, no texto do aluno e na correção — o professor bate o
   olho e sabe onde está, como nos quadros do ClinicIA. Celular: empilhado, letra própria.
   Computador (.largo, ≥1000 px): tela larga, letra grande, texto à esquerda e itens à direita. */
.cor-id{--sec:#2f6fb3; --sec-bg:#eef4fb}      .cor-qd{--sec:#c46a1d; --sec-bg:#fdf3ea}
.cor-hpma{--sec:#b8325a; --sec-bg:#fcedf1}    .cor-isda{--sec:#3f8a3a; --sec-bg:#eef7ec}
.cor-ap{--sec:#7a4bb3; --sec-bg:#f4eefb}      .cor-af{--sec:#1f8a8a; --sec-bg:#e9f6f6}
.cor-ag{--sec:#b04594; --sec-bg:#fbeef7}      .cor-as{--sec:#a8860f; --sec-bg:#fdf8e3}
.cor-ao{--sec:#3e55b5; --sec-bg:#edf0fb}      .cor-hv{--sec:#8a5a2b; --sec-bg:#f7f0e8}
.cor-csec{--sec:#4f6b7d; --sec-bg:#eef3f6}    .cor-forma{--sec:#5b6470; --sec-bg:#f3f4f5}
.cor-cabecalho,.cor-outro{--sec:#6b7280; --sec-bg:#f4f5f6}
.carta.secao{border-left:5px solid var(--sec); background:linear-gradient(180deg, var(--sec-bg) 0%, var(--carta) 70%)}
.carta.secao > .linha h2, .carta.secao > h2{color:var(--sec)}
.bloco-texto{white-space:pre-wrap; background:var(--sec-bg); border-left:3px solid var(--sec);
  border-radius:8px; padding:10px 12px; margin:8px 0; font-size:15px; line-height:1.5; color:var(--texto)}
.bloco-texto b{display:block; color:var(--sec); font-size:12px; text-transform:uppercase;
  letter-spacing:.4px; margin-bottom:4px}
.aviso-trocas{background:var(--destaque); border-radius:8px; padding:8px 12px; margin:0 0 12px}
@media (min-width:1000px){
  main#tela.largo{max-width:1440px; padding:16px 28px}
  .largo .bloco-texto{font-size:18px; line-height:1.6; padding:14px 18px}
  .largo .carta.secao > .linha h2, .largo .carta.secao > h2{font-size:20px}
  .largo .secao-grade{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:24px; align-items:start}
  .largo .secao-texto{position:sticky; top:12px}
  .largo .criterio .titulo{font-size:15px; color:var(--texto)}
  .largo .carta p.sub{font-size:14px}
  .largo .conceitos button{font-size:13px}
}

/* -------- uso de IA pelo aluno: cor do nível + trecho destacado no texto (02/10/2026) -------- */
.carta.indicios{border-left:6px solid var(--niv, #9aa3ad); background:linear-gradient(180deg, var(--niv-bg, #f4f5f6) 0%, var(--carta) 75%)}
.carta.indicios h2{color:var(--niv, #4b5563)}
.nivel-nenhum{--niv:#1f7a4d; --niv-bg:#e8f5ee}   .nivel-baixo{--niv:#a8860f; --niv-bg:#fdf8e3}
.nivel-moderado{--niv:#c2410c; --niv-bg:#fff1e6} .nivel-alto{--niv:#b91c1c; --niv-bg:#fdecec}
.selo-nivel{background:var(--niv); color:#fff; font-weight:800; font-size:12px; letter-spacing:.6px;
  padding:5px 12px; border-radius:999px; white-space:nowrap}
.carta.indicios .sentido{font-weight:700; color:var(--niv); margin:6px 0 2px}
.indicio{background:#fff; border:1px solid var(--borda); border-left:4px solid var(--niv); border-radius:8px;
  padding:8px 12px; margin:8px 0}
.indicio p{margin:3px 0}
mark.indicio-ia{background:#fde2e2; color:#7f1d1d; border-bottom:2px solid #dc2626; padding:0 2px; border-radius:3px}
.tag.ia-baixo{background:#fdf8e3; color:#8a6d0b; border-color:#f1dc93}
.tag.ia-moderado{background:#fff1e6; color:#c2410c; border-color:#fdc9a3}
.tag.ia-alto{background:#fdecec; color:#b91c1c; border-color:#f5b5b5}
@media (min-width:1000px){ .largo .carta.indicios .sentido{font-size:17px} .largo .indicio{font-size:16px} }

/* --- Caixa de comentário (03/10/2026) ------------------------------------
   O Dr.: "a janela de comentários está muito pequena para visualizar o texto;
   tem que ser grande". E, antes disso, nada gravava. A caixa é grande, cresce
   com o texto e fica visualmente separada das notas — é texto, não botão. */
.comentario-caixa{margin-top:14px; padding-top:12px; border-top:1px solid var(--borda)}
.comentario-caixa label{display:block; font-size:12px; font-weight:700; letter-spacing:.3px;
  text-transform:uppercase; color:var(--verde-escuro); margin-bottom:6px}
.comentario-caixa textarea{width:100%; min-height:140px; resize:vertical;
  font-family:inherit; font-size:15px; line-height:1.5; padding:10px 12px;
  border:1px solid var(--borda); border-radius:10px; background:var(--carta);
  color:var(--tinta); box-sizing:border-box}
.comentario-caixa textarea:focus{outline:none; border-color:var(--verde);
  box-shadow:0 0 0 3px var(--verde-lavado)}
.comentario-caixa [data-rascunho]{margin-top:6px; color:var(--alerta); font-weight:600}

/* ===================================================================== */
/* CORRIGIR LENDO (03/10/2026) — texto do aluno à esquerda, devolutiva à  */
/* direita, e os três níveis numa barra que acompanha a rolagem.          */
/* No celular as colunas viram uma só: o texto vem primeiro, depois os    */
/* apontamentos daquela seção — a ordem de leitura continua certa.        */
/* ===================================================================== */
.barra-correcao {
  position: sticky; top: 0; z-index: 20;
  background: var(--lav-fundo, #f7f6fb); border: 1px solid var(--verde-borda, #cfe0d5);
  border-radius: 14px; padding: 10px 12px; margin-bottom: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.barra-correcao .dials { display: flex; gap: 10px; flex-wrap: wrap; }
.barra-correcao .dial { flex: 1 1 210px; min-width: 190px; }
.barra-correcao .dial .linha { display: flex; justify-content: space-between; align-items: baseline; }
.barra-correcao .niveis { display: flex; gap: 4px; margin: 4px 0 2px; }
/* ≥15px de alvo em todo botão: regra do Dr. para a tela do celular. */
.barra-correcao .niveis button {
  flex: 1; padding: 9px 2px; font-size: 13px; border-radius: 9px;
  border: 1px solid var(--verde-borda, #cfe0d5); background: #fff; cursor: pointer;
}
.barra-correcao .niveis button.ativo {
  background: var(--verde-escuro, #2f6b4f); color: #fff; border-color: var(--verde-escuro, #2f6b4f);
}
.barra-correcao .fecho {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--verde-borda, #cfe0d5);
}
.barra-correcao .fecho label { margin: 0; }
.barra-correcao .fecho select { width: auto; min-width: 120px; }
.nota-viva { display: flex; align-items: baseline; gap: 6px; margin-left: auto; }
.nota-viva b { font-size: 26px; color: var(--verde-escuro, #2f6b4f); }
[data-salvo].agora { animation: pisca 1.1s ease-out; }
[data-salvo].ruim { color: #a4262c; font-weight: 600; }
@keyframes pisca { from { opacity: .25 } to { opacity: 1 } }

.par { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; align-items: start; }
.par .lado-texto { position: sticky; top: 150px; }
.par .lado-texto h2 { margin-top: 0; }
.par .forte { color: var(--verde-escuro, #2f6b4f); font-size: 14px; margin: 6px 0 0; }
.carta.apont { padding: 12px; margin-bottom: 10px; }
.carta.apont.desconta { border-left: 4px solid #a4262c; }
.carta.apont.meu { border-left: 4px solid var(--verde-escuro, #2f6b4f); }
.carta.apont .titulo-ap { font-weight: 600; border: none; border-bottom: 1px solid var(--verde-borda, #cfe0d5);
  border-radius: 0; padding: 4px 0; background: transparent; }
.carta.apont blockquote {
  margin: 8px 0; padding: 6px 10px; border-left: 3px solid var(--verde-borda, #cfe0d5);
  background: #fbfbfd; font-size: 14px; color: #444;
}
.carta.apont .chaves { display: flex; gap: 14px; flex-wrap: wrap; margin: 8px 0 4px; }
.carta.apont .chave { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; cursor: pointer; }
.carta.apont .chave input { width: 18px; height: 18px; }
.carta.apont .miudos { display: flex; gap: 6px; flex-wrap: wrap; }
.carta.apont .miudos select { width: auto; flex: 1 1 110px; font-size: 13px; padding: 7px; }
.tag.tag-meu { background: var(--verde-escuro, #2f6b4f); color: #fff; }
.carta.destacada { border: 2px solid var(--verde-escuro, #2f6b4f); }

@media (max-width: 820px) {
  .par { grid-template-columns: 1fr; }
  .par .lado-texto { position: static; }
  .nota-viva { margin-left: 0; }
}
/* A sugestão da IA nasce em PONTILHADO — não é marca do professor até ele clicar. */
.barra-correcao .niveis button.sugerido {
  border: 2px dashed var(--verde-escuro, #2f6b4f);
  color: var(--verde-escuro, #2f6b4f); font-weight: 600;
}

/* ===================================================================== */
/* CORES E EXPLICAÇÃO DOS CRITÉRIOS (Dr., 04/10/2026)                    */
/* "os critérios não estão claros… tem que ser explicado para o docente  */
/*  dar a nota e tem que ser colorido. Eu tive dificuldade de entender." */
/* Régua que o corretor não entende não é régua.                         */
/* ===================================================================== */
:root {
  --tipo-arquitetura: #6b4fa8;   /* é o que mais vale: 4 pontos */
  --tipo-erro:        #a4262c;
  --tipo-falta:       #b3541e;
  --tipo-notacao:     #4a6fa5;   /* vale 1: a cor mais discreta */
}
.carta.apont.tipo-arquitetura { border-left: 5px solid var(--tipo-arquitetura); }
.carta.apont.tipo-erro        { border-left: 5px solid var(--tipo-erro); }
.carta.apont.tipo-falta       { border-left: 5px solid var(--tipo-falta); }
.carta.apont.tipo-notacao     { border-left: 5px solid var(--tipo-notacao); }
/* "pesou na nota" deixa de roubar a borda do tipo: vira fundo. */
.carta.apont.desconta { background: #fdf6f6; }
.carta.apont.meu      { box-shadow: inset 3px 0 0 0 var(--verde-escuro, #2f6b4f); }

.selo-tipo {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 999px; color: #fff; white-space: nowrap; margin-right: 8px;
}
.selo-tipo.tipo-arquitetura { background: var(--tipo-arquitetura); }
.selo-tipo.tipo-erro        { background: var(--tipo-erro); }
.selo-tipo.tipo-falta       { background: var(--tipo-falta); }
.selo-tipo.tipo-notacao     { background: var(--tipo-notacao); }
.carta.apont .oque-e { margin: 2px 0 8px; font-style: italic; }
.carta.apont select.tipo-arquitetura { border-color: var(--tipo-arquitetura); }
.carta.apont select.tipo-erro        { border-color: var(--tipo-erro); }
.carta.apont select.tipo-falta       { border-color: var(--tipo-falta); }
.carta.apont select.tipo-notacao     { border-color: var(--tipo-notacao); }

/* O descritor do nível: o que "Bom" quer dizer NESTA dimensão. */
.barra-correcao .descritor {
  margin: 2px 0 0; line-height: 1.35; min-height: 2.4em;
  border-left: 2px solid var(--verde-borda, #cfe0d5); padding-left: 7px;
}
.barra-correcao .descritor b { color: var(--verde-escuro, #2f6b4f); }

/* A legenda, para quem está corrigindo pela primeira vez. */
.legenda-criterios summary {
  cursor: pointer; font-weight: 600; color: var(--verde-escuro, #2f6b4f); padding: 4px 0;
}
.legenda-criterios .linha-legenda { display: flex; gap: 8px; align-items: baseline; margin: 6px 0; }
.legenda-criterios .linha-legenda .selo-tipo { flex: 0 0 auto; }

/* O mostrador que ainda não foi decidido PEDE o clique — sem ele não há nota. */
.barra-correcao .dial.falta .niveis { outline: 2px dashed #b3541e; outline-offset: 3px; border-radius: 10px; }
.barra-correcao .pede { color: #b3541e; font-weight: 700; }

/* ===================================================================== */
/* A CONTA ABERTA (Dr., 04/10/2026)                                      */
/* "Não adianta tirar um ponto várias vezes e a nota final ser 7. Tem    */
/*  que explicar o porquê. Os docentes vão questionar."                  */
/* ===================================================================== */
.carta.conta-aberta { border: 2px solid var(--verde-escuro, #2f6b4f); }
.conta-linha {
  display: grid; align-items: center; gap: 4px 10px; margin: 10px 0;
  grid-template-columns: 1fr 120px 92px 96px;
  grid-template-areas: "nome barra nivel pontos" "evid evid evid evid";
}
.conta-nome   { grid-area: nome; font-weight: 600; }
.conta-barra  { grid-area: barra; height: 12px; border-radius: 999px; background: #ecebf2;
                overflow: hidden; display: block; }
.conta-barra i { display: block; height: 100%; background: var(--verde-escuro, #2f6b4f); border-radius: 999px; }
.conta-nivel  { grid-area: nivel; font-size: 13px; color: #555; }
.conta-pontos { grid-area: pontos; text-align: right; white-space: nowrap; }
.conta-pontos b { font-size: 16px; color: var(--verde-escuro, #2f6b4f); }
.conta-evid   { grid-area: evid; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
                margin: 0 0 4px; }
.conta-evid .selo-tipo { font-size: 10px; padding: 2px 6px; margin: 0; }

.conta-soma { display: flex; justify-content: space-between; align-items: baseline;
              padding: 6px 0; border-top: 1px dashed var(--verde-borda, #cfe0d5); }
.conta-soma.bonus b { color: #1f7a4d; }
.conta-soma.total { border-top: 2px solid var(--verde-escuro, #2f6b4f); margin-top: 4px; }
.conta-soma.total span { font-weight: 700; letter-spacing: .04em; }
.conta-soma.total b { font-size: 26px; color: var(--verde-escuro, #2f6b4f); }

/* A frase que responde ao docente que vai questionar. */
.porque-nao-desconta {
  margin-top: 10px; padding: 9px 11px; border-radius: 10px;
  background: #fff8e8; border: 1px solid #e8d9b0; line-height: 1.45;
}
.carta.conta-aberta.vazia { border-style: dashed; }

@media (max-width: 820px) {
  .conta-linha { grid-template-columns: 1fr 86px; 
                 grid-template-areas: "nome pontos" "barra barra" "nivel nivel" "evid evid"; }
  .conta-nivel { margin-top: 2px; }
}

/* ===================================================================== */
/* AS CHAVES COLORIDAS (Dr., 04/10/2026)                                 */
/* "As chaves abaixo deveriam estar mais coloridas para que o docente    */
/*  confira a nota" — correndo a coluna, ele vê de relance o que pesou.  */
/* ===================================================================== */
.carta.apont .chave {
  border: 1.5px solid #d8d8e0; border-radius: 999px; padding: 6px 12px 6px 9px;
  background: #fff; transition: background .12s, border-color .12s, color .12s;
}
.carta.apont .chave .sub { font-size: 11px; opacity: .75; }
.carta.apont .chave.ensina.on {
  background: #e8f5ee; border-color: #1f7a4d; color: #15543a;
}
.carta.apont .chave.ensina.on .sub { color: #15543a; }
.carta.apont .chave.pesa.on {
  background: var(--tipo-erro, #a4262c); border-color: var(--tipo-erro, #a4262c); color: #fff;
}
.carta.apont .chave.pesa.on .sub { color: #fff; opacity: .85; }
.carta.apont .chave input { accent-color: currentColor; }
.selo-ensino {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; padding: 4px 9px; border-radius: 999px;
  background: #eef3fb; color: var(--tipo-notacao, #4a6fa5); border: 1px solid #c9d8ef;
}

/* A nota que ainda é da IA: existe desde que se abre, mas se anuncia como dela. */
.nota-viva b.da-ia { color: #4a6fa5; }
.carta.conta-aberta.da-ia { border-style: dashed; border-color: #4a6fa5; }
.carta.conta-aberta.da-ia .conta-soma.total b { color: #4a6fa5; }

/* Quem manda em cada mostrador: a evidência ou ele. */
.barra-correcao .quem-manda { margin: 2px 0 0; }
.barra-correcao .segue { color: #4a6fa5; font-weight: 600; }
.barra-correcao .dele  { color: var(--verde-escuro, #2f6b4f); font-weight: 700; }
.barra-correcao .quem-manda a { color: #777; text-decoration: underline; }

/* Peso que não age, porque o professor decidiu o nível à mão: a tela admite. */
.carta.apont select.inerte { opacity: .45; }
.aviso-inerte { color: #b3541e; font-style: normal; font-weight: 600; }

/* O mostrador virou LEITURA (04/10): mostra o nível lido da evidência. */
.barra-correcao .dial.leitura .niveis { gap: 3px; }
.nivel-leitura {
  flex: 1; padding: 9px 2px; font-size: 13px; text-align: center; border-radius: 9px;
  border: 1px solid #e6e6ee; background: #fafafc; color: #9a9aa8;
}
.nivel-leitura.ativo {
  background: var(--verde-escuro, #2f6b4f); color: #fff; border-color: var(--verde-escuro, #2f6b4f);
  font-weight: 700;
}
.nota-dele { display: flex; align-items: center; gap: 6px; }
.nota-dele label { margin: 0; font-weight: 600; color: var(--verde-escuro, #2f6b4f); }
.nota-dele input { width: 92px; font-size: 20px; font-weight: 700; text-align: center; padding: 6px; }
.nota-viva b.superada { font-size: 18px; color: #9a9aa8; text-decoration: line-through; }
.conta-soma.total.sua b { color: var(--tipo-arquitetura, #6b4fa8); }

/* ===================================================================== */
/* A RÉGUA DA SEÇÃO (04/10) — o controle que faltava.                    */
/* Escala global por domínio com âncoras, que é o que a evidência apoia  */
/* (α 0,85–0,89 contra 0,79 do checklist binário).                       */
/* ===================================================================== */
.reguas { margin: 0 0 10px; }
.regua-secao { display: flex; align-items: center; gap: 4px; margin: 5px 0; flex-wrap: wrap; }
.regua-secao .rs-nome { flex: 0 0 80px; font-size: 13px; font-weight: 600; color: #555; }
.regua-secao button {
  padding: 6px 9px; font-size: 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--verde-borda, #cfe0d5); background: #fff;
}
.regua-secao button.ativo {
  background: var(--verde-escuro, #2f6b4f); color: #fff; border-color: var(--verde-escuro, #2f6b4f);
}
.regua-secao.meu button.ativo { background: var(--tipo-arquitetura, #6b4fa8);
  border-color: var(--tipo-arquitetura, #6b4fa8); }
.regua-secao .rs-quem { flex: 0 0 auto; font-size: 11px; }
.regua-secao .rs-quem a { color: var(--tipo-arquitetura, #6b4fa8); text-decoration: underline; }
@media (max-width: 820px) { .regua-secao .rs-nome { flex-basis: 100%; } }
/* Seção que a IA não tocou: a régua existe, apagada, esperando o julgamento dele. */
.regua-secao.vazia button { opacity: .5; }
.regua-secao.vazia .rs-nome { color: #9a9aa8; }
/* Quem define o nível da seção — o "pior achado manda" fica visível. */
.carta.apont .manda { margin: 0 0 8px; line-height: 1.4; }
.manda-sim { color: var(--verde-escuro, #2f6b4f); font-weight: 700; }

/* ===================================================================== */
/* BARRA COMPACTA (04/10) — "preciso de tela para ler o texto e as       */
/* correções". Os cinco botões saíram: o controle agora é a régua de     */
/* cada seção, ao lado do texto. Aqui ficou leitura, numa linha.         */
/* ===================================================================== */
.barra-correcao.compacta { padding: 7px 12px; }
.barra-correcao .fita {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px;
}
.barra-correcao .fita .sep { color: #c9c9d4; }
.dim-compacta { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.dim-compacta b { font-weight: 600; }
.dc-nivel {
  font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  background: var(--verde-escuro, #2f6b4f); color: #fff;
}
.dc-pontos { font-weight: 700; color: var(--verde-escuro, #2f6b4f); }
.barra-correcao .fita select { width: auto; padding: 5px 8px; font-size: 13px; }
.barra-correcao .fita .nota-viva { margin-left: auto; }
.barra-correcao .fita .nota-viva b { font-size: 22px; }
.barra-correcao .fita .nota-dele input { width: 72px; font-size: 17px; padding: 4px; }
.barra-correcao .fita .nota-dele label { font-size: 12px; }
.barra-correcao .fita #abre-barra { padding: 4px 9px; }
.barra-correcao .fita #limpa-nota { padding: 4px 8px; }
.dc-detalhe { flex-basis: 100%; margin: 2px 0 0; }
.barra-correcao.compacta .dials, .barra-correcao.compacta .fecho { display: none; }
@media (max-width: 820px) {
  .barra-correcao .fita .nota-viva { margin-left: 0; }
  .dim-compacta { font-size: 13px; }
}

/* ===================================================================== */
/* UM GRUPO, UMA DEVOLUTIVA (04/10)                                      */
/* "Não posso ler 4 vezes problemas na arquitetura na HPMA e despontuar  */
/*  4 vezes. Tem que ser uma vez só e uma devolutiva só."                */
/* ===================================================================== */
.grupo-ap {
  border: 1px solid var(--verde-borda, #cfe0d5); border-radius: 14px;
  padding: 10px 12px; margin-bottom: 12px; background: #fff;
}
.grupo-ap.tipo-arquitetura { border-left: 5px solid var(--tipo-arquitetura); }
.grupo-ap.tipo-erro        { border-left: 5px solid var(--tipo-erro); }
.grupo-ap.tipo-falta       { border-left: 5px solid var(--tipo-falta); }
.grupo-ap.tipo-notacao     { border-left: 5px solid var(--tipo-notacao); }
.cab-grupo { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.selo-dim { font-weight: 700; color: var(--verde-escuro, #2f6b4f); }
.peso-grupo { width: auto; margin-left: auto; font-size: 13px; padding: 6px 8px;
              border: 2px solid var(--verde-escuro, #2f6b4f); }
.item-ap { border-top: 1px dashed var(--verde-borda, #cfe0d5); padding-top: 9px; margin-top: 9px; }
.item-ap:first-of-type { border-top: none; }
.item-ap.meu { box-shadow: inset 3px 0 0 0 var(--verde-escuro, #2f6b4f); padding-left: 9px; }
.item-ap blockquote {
  margin: 6px 0; padding: 5px 9px; border-left: 3px solid var(--verde-borda, #cfe0d5);
  background: #fbfbfd; font-size: 14px; color: #444;
}
/* Nome do nível por extenso: as réguas quebram em duas linhas se precisar. */
.regua-secao { row-gap: 4px; }
.regua-secao button { padding: 6px 8px; font-size: 12px; }
.dc-nivel { font-size: 11px; padding: 2px 8px; }
@media (max-width: 1100px) { .regua-secao .rs-nome { flex-basis: 100%; } }

/* 🔴 04/10 — "quando eu coloco um apontamento, sai em arquitetura e não consigo
   mudar". O tipo passa a ser escolhido NA CRIAÇÃO (quatro botões, sem popup) e
   trocável depois, no próprio cartão. Cor em tudo, para conferir de relance. */
.item-ap .chaves { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.item-ap .chaves select.tipo-ap {
  font-size: 12px; padding: 4px 6px; border-radius: 6px;
  border: 2px solid #cfe0d5; background: #fff; font-weight: 600;
}
.item-ap .chaves select.tipo-ap.tipo-arquitetura { border-color: var(--tipo-arquitetura); color: var(--tipo-arquitetura); }
.item-ap .chaves select.tipo-ap.tipo-erro        { border-color: var(--tipo-erro);        color: var(--tipo-erro); }
.item-ap .chaves select.tipo-ap.tipo-falta       { border-color: var(--tipo-falta);       color: var(--tipo-falta); }
.item-ap .chaves select.tipo-ap.tipo-notacao     { border-color: var(--tipo-notacao);     color: var(--tipo-notacao); }

.novos-ap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.novos-ap .sub { flex: 0 0 100%; margin: 0 0 2px; }
button.novo-ap {
  font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 8px;
  color: #fff; border: none;
}
button.novo-ap.tipo-arquitetura { background: var(--tipo-arquitetura); }
button.novo-ap.tipo-erro        { background: var(--tipo-erro); }
button.novo-ap.tipo-falta       { background: var(--tipo-falta); }
button.novo-ap.tipo-notacao     { background: var(--tipo-notacao); }
button.novo-ap::before { content: "+ "; }


/* 🔴 04/10 — o Dr.: *"no quadro da direita, há um grande espaço de cabeçalho e
   pouco para ler e digitar"*. A coluna da correção é onde ele passa a tarde:
   cabeçalho de uma linha, caixas altas, texto legível. */
.grupo-ap { padding: 7px 10px 9px; margin-bottom: 9px; }
.cab-grupo { gap: 6px; margin-bottom: 2px; }
.selo-dim { font-size: 14px; }
.cab-grupo .selo-tipo { margin: 0; }
.cab-grupo .sub { font-size: 11px; opacity: .75; }
.peso-grupo { padding: 4px 7px; font-size: 12px; }
.item-ap { padding-top: 7px; margin-top: 7px; }
.item-ap .titulo-ap { font-size: 14px; padding: 6px 8px; }
.item-ap textarea {
  font-size: 14px; line-height: 1.5; padding: 9px 11px; margin-top: 5px;
  resize: vertical; overflow: hidden;      /* a altura vem do conteúdo (JS) */
}
.item-ap blockquote { margin: 5px 0; font-size: 13px; }
.lado-apont .carta.apont .chaves { margin: 4px 0 0; }


/* 🔴 04/10 — "se eu tirei 1,5 na HPMA, por que ele está com 8,5?". A conta passa
   a morar na régua: quanto a seção vale e quanto ela está rendendo. */
.regua-secao .rs-vale {
  font-size: 11px; color: var(--verde-escuro, #2f6b4f); white-space: nowrap;
  background: #eef5f0; border-radius: 6px; padding: 2px 7px; margin-left: 4px;
}
.regua-secao .rs-vale b { font-weight: 800; }

/* ============================================ gravação confiável (Pacote 1, 05/10/2026)
   Verde = o servidor confirmou. PENDENTE = guardado no aparelho, ainda viajando: borda
   tracejada e ampulheta, nunca a mesma cor do confirmado. PROBLEMA = precisa de decisão.
   Cor nunca é o único sinal: sempre há texto ou ícone junto. */
.slots button.pendente, .grupos button.pendente, .conceitos button.pendente, .notas button.pendente{
  border:2px dashed var(--verde); background:var(--verde-lavado); color:var(--verde-escuro); font-weight:700}
.slots button.pendente::after, .grupos button.pendente::after,
.conceitos button.pendente::after, .notas button.pendente::after{content:" ⏳"; font-size:11px}
.slots button.problema, .grupos button.problema, .conceitos button.problema, .notas button.problema{
  border:2px solid #b3261e; background:#fdecea; color:#8c1d18; font-weight:700}
.aluno .gravacao{font-size:13px; margin:10px 0 2px; min-height:18px}
.aluno .gravacao.ok{color:var(--verde-escuro)}
.aluno .gravacao.pendente{color:#7a5a00}
.aluno .gravacao.problema{color:#8c1d18; font-weight:600}
.aluno .gravacao .acoes, [data-rascunho] .acoes{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.aluno .gravacao .acoes button, [data-rascunho] .acoes button{padding:8px 12px; font-size:14px; min-height:44px}
.aluno.tem-pendente .cabecalho .nome::after{content:" ⏳"; font-size:12px}
.aluno.tem-problema .cabecalho .nome::after{content:" ⚠"; color:#b3261e}
.aluno.tem-problema{border-color:#b3261e}
#faixa{position:sticky; top:0; z-index:40; padding:10px 14px; font-size:14px; font-weight:600;
  cursor:pointer; border-bottom:1px solid var(--borda)}
#faixa.pendente{background:#fff4d6; color:#5c4300}
#faixa.alerta{background:#fdecea; color:#8c1d18}
#versao-nova{position:sticky; top:0; z-index:41; width:100%; border:0; padding:12px 14px;
  background:var(--verde); color:#fff; font-size:14px; font-weight:600}
#folha-senha{position:fixed; inset:0; z-index:100; background:rgba(16,32,24,.55);
  display:flex; align-items:center; justify-content:center; padding:16px}
#folha-senha form{max-width:420px; width:100%}
#folha-senha .erro{color:#8c1d18; margin-top:8px}


/* ======================================= situação da turma (06/10/2026)
   Fechada = aviso grande no lugar onde o docente tenta trabalhar, com o botão que
   resolve. Confirmação em verde depois de reabrir/fechar. */
.carta.situacao h2{font-size:18px; margin:0 0 6px}
.carta.situacao p{margin:0 0 10px; font-size:15px; line-height:1.45}
.carta.situacao.fechada{border:2px solid #b3261e; background:#fdf1ef}
.carta.situacao.fechada h2{color:#8c1d18}
.carta.situacao.aberta{border:1px solid var(--verde-borda)}
.carta.situacao.aberta h2{color:var(--verde-escuro)}
.carta.situacao button{width:100%; min-height:48px; font-size:16px}
.carta.recado-ok{border:2px solid var(--verde); background:var(--verde-lavado)}
.carta.recado-ok h2{color:var(--verde-escuro); font-size:18px; margin:0 0 4px}
.carta.recado-ok p{margin:0; font-size:15px}
#lista.travada button[disabled]{opacity:.45; cursor:not-allowed; filter:grayscale(1)}
#lista.travada textarea[readonly]{background:#f3f3f3; color:var(--suave)}
/* 06/10/2026: a tabela de notas era mais larga que o celular e alargava a PÁGINA toda
   (cartões e botões cortados na borda). Agora ela rola dentro do próprio cartão. */
.carta:has(> table){overflow-x:auto; -webkit-overflow-scrolling:touch;
  /* rolar por dentro não basta: o celular alarga a tela até caber a largura MÍNIMA
     do conteúdo. O teto de largura e a contenção tiram a tabela dessa conta. */
  max-width:calc(100vw - 24px); contain:inline-size}

/* "Precisa da sua atenção" (Pacote 2, 06/10/2026): aula já dada com aluno sem presença
   ou sem nota. Âmbar = pendência do docente, não erro. */
.carta.pendencia{border:2px solid #d9a400; background:#fff8e1}
.carta.pendencia .quando{margin:0 0 3px; font-size:11px; font-weight:800; color:#7a5a00}
.carta.pendencia h2{font-size:17px; margin:0 0 6px}
.carta.pendencia p{margin:0 0 10px; font-size:15px}
.carta.pendencia .acoes{display:flex; flex-direction:column; gap:8px}
.carta.pendencia .acoes button{width:100%; min-height:48px}


/* Pacote 3 (08/10/2026) — a correção pela fila: a nota da tela espera o recibo, e o
   que precisa de decisão aparece no alto, com o botão que resolve. */
.barra-correcao [data-nota].recalculando { opacity: .55; }
.barra-correcao [data-nota].recalculando::after { content: " ⏳"; font-size: .8em; }
.barra-correcao .estado-correcao { flex: 1 1 220px; }
.problemas-correcao { border: 2px solid #a4262c; }
.problemas-correcao .gravacao { margin: 6px 0; }
[data-homolog] { margin-top: 8px; font-weight: 600; }
[data-homolog].ruim { color: #a4262c; }
.problemas-correcao .gravacao.problema { color: #8c1d18; font-weight: 600; font-size: 14px; }
.problemas-correcao .acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
[data-prob-ap] .gravacao.problema { color: #8c1d18; font-weight: 600; font-size: 14px; margin: 10px 0 2px;
  padding: 8px 10px; border: 2px solid #a4262c; border-radius: 10px; background: #fff6f5; }
[data-prob-ap] .acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.barra-correcao .estado-correcao.ruim { cursor: pointer; text-decoration: underline; }

/* Pacote 4 (08/10/2026) — a revisão oficial e a proposta de abertura da IA */
.revisao-oficial { border: 2px solid var(--verde); }
.revisao-oficial.rascunho { border-color: #b7791f; background: #fffaf0; }
.revisao-oficial p { margin: 0 0 8px; }
.revisao-oficial .ruim, [data-homolog].ruim { color: #a4262c; }
.botao-pdf { display: block; text-align: center; padding: 12px; border-radius: 12px; margin-top: 6px;
  background: #fff; border: 1px solid var(--verde-borda); color: var(--verde-escuro);
  font-weight: 700; text-decoration: none; }
.proposta-ia { border: 1px dashed var(--verde-borda); border-radius: 12px; padding: 10px 12px; margin: 8px 0; }
.proposta-ia blockquote { margin: 6px 0 10px; white-space: pre-wrap; }
[data-origem-abertura] { color: var(--verde-escuro); font-weight: 600; }

/* Passo 2 (08/10/2026) — o efeito do peso e o "não se aplica" */
.efeito-grupo { margin: 2px 0 6px; }
.nao-se-aplica { padding: 8px 10px; border: 1px dashed var(--verde-borda); border-radius: 10px; }
.reguas [data-nao-aplica] { display: inline-block; margin-top: 4px; }
.proposta-ia .ruim { color: #a4262c; font-weight: 600; }

/* 09/10/2026 — turmas em botões, no estilo do dashboard do ClinicIA (Dr.): faixa lateral
   forte na cor + caixa em degradê com cor visível; a escolhida em cor cheia. */
.rotulo-campo { margin: 0 0 6px; font-size: 14px; color: var(--cinza, #4b5563); }
.turmas-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.turmas-botoes .botao-turma {
  flex: 1 1 120px; width: auto; min-height: 48px; margin: 0; padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--c1) 45%, #fff); border-left: 6px solid var(--c2);
  border-radius: 12px; text-align: left; font-size: 16px; font-weight: 700; cursor: pointer;
  color: var(--c2); box-shadow: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 24%, #fff),
                                      color-mix(in srgb, var(--c1) 8%, #fff));
}
.turmas-botoes .botao-turma:hover { background: linear-gradient(135deg,
  color-mix(in srgb, var(--c1) 34%, #fff), color-mix(in srgb, var(--c1) 14%, #fff)); }
.turmas-botoes .botao-turma.ativa {
  color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow: 0 3px 10px color-mix(in srgb, var(--c2) 35%, transparent);
}
.efeito-grupo.nivel-manual { color: #7E63A8; }

/* =====================================================================================
   IDENTIDADE VISUAL (09/10/2026) — a linguagem do dashboard do ClinicIA, pedida pelo Dr.:
   "Os botões que você coloca no dash são com linhas laterais fortes e caixas degradê".
   · cartão = faixa lateral de 6px na cor + caixa em degradê com cor VISÍVEL (não "claro");
   · cada turma tem a sua cor (--c1/--c2, ver corDaTurma em app.js); sem turma = verde;
   · pendência = âmbar; problema = vermelho;
   · botão comum = suave com faixa lateral; o FORTE fica para o que é fundamental;
   · lista curta de opções = botões (ver botoesNosSelects). */
.carta {
  border-left: 6px solid var(--c2, #2a8d5c);
  background: linear-gradient(135deg, color-mix(in srgb, var(--c1, #2FA36B) 13%, #fff) 0%, #ffffff 72%);
}
.carta.com-cor { border-color: color-mix(in srgb, var(--c1) 35%, #fff); border-left-color: var(--c2); }
.carta.com-cor h2 { color: var(--c2); }
.carta.com-cor[role="button"]:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 24%, #fff) 0%, #ffffff 80%); }
.carta.pendencia { --c1: #F5A623; --c2: #E2920C;
  background: linear-gradient(135deg, color-mix(in srgb, #F5A623 24%, #fff) 0%, #fffaf0 75%); }
.carta.problemas-correcao, .carta.tem-problema { --c1: #E2445C; --c2: #B91C1C;
  background: linear-gradient(135deg, color-mix(in srgb, #E2445C 16%, #fff) 0%, #fff6f5 75%); }
.carta:has(> table) { background: var(--carta); }

button.secundario {
  border-left: 5px solid var(--c2, #17784A);
  background: linear-gradient(135deg, color-mix(in srgb, var(--c1, #2FA36B) 16%, #fff) 0%, #ffffff 85%);
}
button.secundario:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--c1, #2FA36B) 28%, #fff) 0%, #ffffff 85%); }

/* listas curtas viradas botões */
.botoes-select { display: flex; flex-wrap: wrap; gap: 6px; }
.botoes-select .op {
  width: auto; min-width: 44px; min-height: 40px; margin: 0; padding: 8px 12px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--c1, #2FA36B) 40%, #fff);
  border-left: 4px solid var(--c2, #17784A); border-radius: 10px;
  color: var(--c2, #17784A); font-size: 15px; font-weight: 700;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c1, #2FA36B) 16%, #fff), #fff);
}
.botoes-select .op.ativo { color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--c1, #2FA36B), var(--c2, #17784A)); }
.botoes-select .op:disabled { opacity: .45; cursor: not-allowed; }
/* tipo do apontamento: cada um na cor do seu tipo */
.botoes-select.tipos .op-arquitetura { --c1: var(--tipo-arquitetura); --c2: var(--tipo-arquitetura); }
.botoes-select.tipos .op-erro        { --c1: var(--tipo-erro);        --c2: var(--tipo-erro); }
.botoes-select.tipos .op-falta       { --c1: var(--tipo-falta);       --c2: var(--tipo-falta); }
.botoes-select.tipos .op-notacao     { --c1: var(--tipo-notacao);     --c2: var(--tipo-notacao); }
/* bônus e peso, compactos dentro da barra e do grupo */
.barra-correcao .botoes-select .op { min-height: 32px; padding: 4px 10px; font-size: 14px; }
.grupo-ap .botoes-select.pesos { margin-left: auto; }
.grupo-ap .botoes-select.pesos .op { min-width: 40px; min-height: 32px; padding: 4px 8px; font-size: 14px; }
.botoes-select.desconto { --c1: #E2445C; --c2: #B91C1C; }
/* regras antigas que punham borda inteira de 2–4px: a faixa lateral de 6px vence */
.carta.aula-minha.agora, .carta.pendencia, .carta.destacada, .carta.remate,
.carta.interna, .carta.aviso-caixa { border-left-width: 6px; border-left-style: solid; }
.carta.pendencia { border-left-color: #E2920C; }
.carta.pendencia.grave { border-left-color: #B91C1C; }
.carta.aula-minha.agora.com-cor { border-color: var(--c2); border-left-color: var(--c2); }
/* degradê com cor VISÍVEL (regra do Dr., 25/09: "suave não é claro" — ~15–25%) */
.carta { background: linear-gradient(135deg, color-mix(in srgb, var(--c1, #2FA36B) 16%, #fff) 0%, #ffffff 78%); }
.carta.com-cor { background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 24%, #fff) 0%, #ffffff 80%); }
.carta.com-cor[role="button"]:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 34%, #fff) 0%, #ffffff 85%); }
.carta.pendencia { background: linear-gradient(135deg, color-mix(in srgb, #F5A623 26%, #fff) 0%, #fffaf0 78%); }
.barra-correcao .rotulo-bonus { margin-right: -2px; }
.barra-correcao .botoes-select.bonus { flex-wrap: nowrap; gap: 4px; }
.barra-correcao .botoes-select.bonus .op { min-width: 38px; padding: 3px 8px; }

/* =====================================================================================
   MENU (09/10/2026) — "pouco destacados e muito simples"; "o design do computador deve ser
   diferente do mobile" (Dr.). Cada seção com cor e ícone desenhado.
   · CELULAR/TABLET (< 1000px): barra de baixo; ícone numa pastilha na cor da seção; o ativo
     em cor cheia, com traço em cima.
   · COMPUTADOR (≥ 1000px): menu LATERAL fixo, cada item um cartão do dashboard (faixa
     lateral + degradê); o ativo em cor cheia. */
nav#menu {
  background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
  border-top: 1px solid var(--verde-borda); box-shadow: 0 -4px 18px rgba(9,53,35,.10);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); gap: 2px; z-index: 15;
}
nav#menu button {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 2px 4px; font-size: 12px; color: #4b5563; border-radius: 12px;
}
nav#menu button .ic {
  display: grid; place-items: center; width: 40px; height: 32px; border-radius: 10px;
  color: var(--c2); border: 1px solid color-mix(in srgb, var(--c1) 35%, #fff);
  background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 22%, #fff), color-mix(in srgb, var(--c1) 8%, #fff));
}
nav#menu button .rot { font-weight: 600; letter-spacing: .1px; }
nav#menu button.ativo { color: var(--c2); font-weight: 700; }
nav#menu button.ativo .ic { color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow: 0 3px 10px color-mix(in srgb, var(--c2) 40%, transparent); }
nav#menu button.ativo::before { content: ""; position: absolute; top: -6px; left: 28%; right: 28%;
  height: 3px; border-radius: 0 0 3px 3px; background: var(--c2); }
nav#menu button:hover:not(.ativo) .ic { background: linear-gradient(135deg,
  color-mix(in srgb, var(--c1) 34%, #fff), color-mix(in srgb, var(--c1) 14%, #fff)); }

@media (min-width: 1000px) {
  nav#menu {
    position: fixed; top: 60px; left: 0; bottom: 0; width: 232px; flex-direction: column;
    gap: 10px; padding: 18px 14px; border-top: 0; border-right: 1px solid var(--verde-borda);
    background: linear-gradient(180deg, #f3f9f5 0%, #ffffff 70%); box-shadow: 4px 0 18px rgba(9,53,35,.06);
    overflow-y: auto;
  }
  nav#menu button {
    flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 12px; width: 100%;
    padding: 10px 12px; font-size: 16px; color: var(--c2); text-align: left;
    border: 1px solid color-mix(in srgb, var(--c1) 35%, #fff); border-left: 6px solid var(--c2);
    background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 20%, #fff), #ffffff 85%);
  }
  nav#menu button .ic { width: 36px; height: 36px; flex: 0 0 36px; }
  nav#menu button:hover:not(.ativo) { background: linear-gradient(135deg,
    color-mix(in srgb, var(--c1) 32%, #fff), #ffffff 90%); }
  nav#menu button.ativo { color: #fff; border-color: transparent;
    background: linear-gradient(135deg, var(--c1), var(--c2));
    box-shadow: 0 4px 14px color-mix(in srgb, var(--c2) 35%, transparent); }
  nav#menu button.ativo .ic { background: rgba(255,255,255,.22); box-shadow: none; }
  nav#menu button.ativo::before { display: none; }
  /* o conteúdo abre espaço para o menu lateral */
  /* (margem automática num corpo em coluna encolhia o conteúdo: largura explícita, e o
     centro é feito pelo preenchimento lateral) */
  body:has(nav#menu:not([hidden])) main#tela {
    margin: 0 0 0 232px; width: calc(100% - 232px); max-width: none; box-sizing: border-box;
    padding-left: max(16px, calc((100% - 820px) / 2)); padding-right: max(16px, calc((100% - 820px) / 2)); }
  body:has(nav#menu:not([hidden])) main#tela.largo { padding-left: 28px; padding-right: 28px; }
  body:has(nav#menu:not([hidden])) #faixa { margin-left: 232px; }
}

/* 09/10/2026 — o Dr.: "Aulas que já foram poderiam ter cores diferentes das que ainda irão
   acontecer". Aula passada = CINZA, com "✓ realizada"; hoje e futuras = cor da turma.
   (A passada que ainda pede lançamento continua em âmbar, em "Precisa da sua atenção".) */
.carta.com-cor.passada { --c1: #94a3b8 !important; --c2: #64748b !important; }
.carta.com-cor.passada h2 { color: #475569; }
.carta.com-cor.passada h2::after {
  content: "✓ realizada"; display: inline-block; margin-left: 8px; padding: 1px 8px; vertical-align: 2px;
  font-size: 12px; font-weight: 700; color: #475569; background: #e2e8f0; border-radius: 999px; }

/* =====================================================================================
   🔴 Passo 3A (09/10/2026) — o CASO: a lista de anamneses por caso (grupo do dia da
   anamnese), o selo do caso na correção e o aviso quando a DUM do texto destoa. */
.caso-bloco { margin: 6px 0 18px; }
.caso-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 8px; }
.selo-caso, .caso-faixa .selo-caso {
  display: inline-block; padding: 5px 12px; border-radius: 999px; font-weight: 800; font-size: 14px;
  color: #fff; background: linear-gradient(135deg, var(--c1, #2FA36B), var(--c2, #17784A));
  letter-spacing: .2px;
}
.caso-bloco.sem-caso .selo-caso { background: linear-gradient(135deg, #94a3b8, #64748b); }
.caso-faixa { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 10px; }
.tag.comece { background: linear-gradient(135deg, #00AFA6, #007F78); color: #fff; border-color: transparent; }
.aviso-dum { margin: 8px 0 0; padding: 6px 10px; border-radius: 8px; font-size: 13px; font-weight: 600;
  color: #7a4b00; background: color-mix(in srgb, #F5A623 22%, #fff); border-left: 4px solid #E2920C; }
.dica-casos { margin: 0 0 6px; }
.botoes-select.dias .op { font-size: 14px; }

/* =====================================================================================
   🔴 09/10/2026 — A JORNADA DA TURMA (Dr.: "tudo em uma tela para facilitar para o
   professor"). Etapas numeradas numa linha do tempo, na ordem do calendário: feita = cinza
   com ✓, falta lançar = âmbar, hoje e futuras = cor da turma. */
.jornada { position: relative; margin: 4px 0 18px; }
.jornada .etapa { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px; align-items: start; }
.jornada .etapa::before { content: ""; position: absolute; left: 18px; top: 34px; bottom: -6px;
  width: 3px; border-radius: 2px; background: color-mix(in srgb, #94a3b8 45%, #fff); }
.jornada .etapa:last-child::before { display: none; }
.jornada .etapa-num { position: relative; z-index: 1; width: 36px; height: 36px; margin-top: 10px;
  border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 16px; color: #fff;
  background: linear-gradient(135deg, var(--c1, #2FA36B), var(--c2, #17784A)); box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.jornada .etapa.passada .etapa-num { background: linear-gradient(135deg, #94a3b8, #64748b); }
.jornada .etapa.pendencia .etapa-num { background: linear-gradient(135deg, #F5A623, #E2920C); }
.jornada .etapa.hoje .etapa-num { outline: 3px solid color-mix(in srgb, #2FA36B 40%, #fff); }
.jornada .etapa > .carta { margin-bottom: 12px; }
.jornada .carta .quando { margin: 0 0 3px; font-size: 11px; font-weight: 800; letter-spacing: .3px;
  text-transform: uppercase; color: var(--c2, #17784A); }
.jornada .carta.passada .quando { color: #64748b; }
.jornada .carta.pendencia .quando { color: #a16207; }
.jornada .carta h2 { margin-right: 8px; }
.jornada .falta { margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; font-size: 14px; font-weight: 600;
  color: #7a4b00; background: color-mix(in srgb, #F5A623 20%, #fff); border-left: 4px solid #E2920C;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.jornada .falta button { width: auto; margin: 0; }
.jornada .etapa-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.jornada .etapa-botoes > button, .jornada .etapa-botoes > a { width: auto; margin: 0; flex: 0 1 auto; }
.botao-link { display: inline-block; text-align: center; text-decoration: none; padding: 10px 14px;
  border-radius: 12px; font-weight: 600; color: var(--verde-escuro, #17784A);
  border: 1px solid color-mix(in srgb, #2FA36B 40%, #fff); }
.jornada .envio-arquivos { margin-top: 10px; display: grid; gap: 8px; }
.jornada .envio-arquivos label { margin: 0; }
.jornada details > summary { cursor: pointer; font-weight: 700; margin: 10px 0 6px; color: var(--c2, #17784A); }
.jornada .carta.passada details > summary { color: #475569; }
.jornada .lista-casos .caso-bloco .carta { margin-bottom: 8px; }
/* o "✓ realizada" é do título da ETAPA, não de cada anamnese da lista dentro dela */
.jornada .lista-casos h2::after { content: none !important; }
.carta.alunos-da-turma > summary { cursor: pointer; font-weight: 800; font-size: 16px; }
.carta.alunos-da-turma[open] > summary { margin-bottom: 10px; }
@media (min-width: 1000px) {
  .jornada .etapa { grid-template-columns: 46px minmax(0, 1fr); gap: 14px; }
  .jornada .etapa::before { left: 22px; top: 40px; }
  .jornada .etapa-num { width: 44px; height: 44px; font-size: 18px; }
}

/* =====================================================================================
   🔴 Passo 3B (09/10/2026) — o CATÁLOGO DA CASA: o recado no cartão do apontamento
   (sugere, nunca trava) e a tela "Critérios da casa". Lilás = a cor das Anamneses. */
.recado-casa { margin: 8px 0; padding: 8px 10px; border-radius: 10px; font-size: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, #9E86C2 18%, #fff), #fff);
  border: 1px solid color-mix(in srgb, #9E86C2 40%, #fff); border-left: 5px solid #7E63A8; }
.recado-casa p { margin: 0 0 4px; }
.recado-casa.diverge { border-left-color: #E2920C; }
.recado-casa.nao-e { color: #475569; background: #f1f5f9; border-color: #cbd5e1; border-left-color: #94a3b8; }
.botoes-recado { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.botoes-recado button { width: auto; margin: 0; padding: 6px 12px; min-height: 36px; font-size: 14px; }
button.link { width: auto; display: inline; padding: 0; margin: 0 0 0 4px; border: 0; background: none;
  color: #7E63A8; font-weight: 700; text-decoration: underline; cursor: pointer; min-height: 0; }
.liga-criterio { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0;
  font-size: 13px; color: #6b5a8a; }
.liga-criterio select { width: auto; max-width: 100%; font-size: 13px; padding: 4px 8px; }
@keyframes chama-peso { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 4px color-mix(in srgb, #F5A623 60%, #fff); } }
.cab-grupo.chama { animation: chama-peso 1.4s ease 2; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { .cab-grupo.chama { animation: none; outline: 3px solid #F5A623; } }
.carta.criterio h2 { margin-right: 8px; }
.carta.criterio.so-ensino { --c1: #94a3b8; --c2: #64748b; }
.carta.criterio .uso { margin-top: 6px; }
.por-docente { margin: 4px 0 0; padding-left: 18px; font-size: 13px; color: #475569; }
.carta details.mudar > summary { cursor: pointer; font-weight: 700; color: #7E63A8; margin-top: 8px; }
.form-criterio { display: grid; gap: 6px; margin-top: 8px; }
.form-criterio label { margin: 4px 0 0; }
.form-criterio .duas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.form-criterio .tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.form-criterio .marca { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; }
.form-criterio .marca input { width: auto; margin-top: 3px; }
.carta.historico ul { margin: 8px 0 0; padding-left: 18px; font-size: 13px; }

/* =====================================================================================
   🔴 Passo 3C (10/10/2026) — o app aprende NO CASO: a ficha do caso, "procurar o mesmo"
   e o painel em que o docente marca onde aplicar (nunca aplica sozinho). */
.ficha-caso { margin: 6px 0 10px; padding: 10px 12px; border-radius: 12px; font-size: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c1, #2FA36B) 14%, #fff), #fff);
  border: 1px solid color-mix(in srgb, var(--c1, #2FA36B) 35%, #fff); border-left: 5px solid var(--c2, #17784A); }
.ficha-caso.proposta { border-left-color: #E2920C; }
.ficha-caso p { margin: 0 0 6px; }
.ficha-caso summary { cursor: pointer; font-weight: 700; color: var(--c2, #17784A); }
.ficha-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-top: 6px; }
.ficha-form label { margin: 0; font-size: 12px; font-weight: 700; color: #475569; }
.ficha-form input { margin-top: 2px; font-size: 14px; }
.ficha-form button { grid-column: 1 / -1; }
.busca-caso { margin: 6px 0; }
.busca-caso.propostas-caso { padding: 10px 12px; border-radius: 10px; font-size: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, #31b5e8 16%, #fff), #fff);
  border: 1px solid color-mix(in srgb, #31b5e8 40%, #fff); border-left: 5px solid #2C7AB0; }
.busca-caso.propostas-caso p { margin: 0 0 6px; }
.linha-proposta { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0; font-weight: 400; }
.linha-proposta input { width: auto; margin-top: 3px; }
.busca-caso.propostas-caso button { margin-top: 6px; width: auto; }
.veio-do-caso { margin: 4px 0; color: #2C7AB0; font-weight: 600; }
button.link.procura-caso { display: inline-block; margin: 2px 0 6px; color: #2C7AB0; }

/* 🔴 Passo 4 (10/10/2026) — conduta a conferir: a frase da IA que afirma conduta ou fato
   clínico pede o "conferi" do docente antes de ir ao aluno (âmbar = falta você). */
.conduta-conferir { margin: 8px 0; padding: 8px 10px; border-radius: 10px; font-size: 14px;
  color: #7a4b00; background: color-mix(in srgb, #F5A623 22%, #fff); border: 1px solid color-mix(in srgb, #F5A623 50%, #fff);
  border-left: 5px solid #E2920C; }
.conduta-conferir p { margin: 0 0 4px; }
.conduta-conferir .sub { align-self: center; }
.conduta-ok { color: #17784A; font-weight: 600; margin: 4px 0; }

/* 🔴 10/10/2026 — a correção da anamnese NA SEQUÊNCIA DE AULAS (Dr.): o cartão vem logo
   abaixo da aula de coleta, recuado e ligado a ela por um traço. */
.carta.correcao-da-aula { margin-left: 22px; position: relative; }
.carta.correcao-da-aula::before { content: ""; position: absolute; left: -16px; top: -10px; bottom: 50%;
  width: 12px; border-left: 3px solid color-mix(in srgb, var(--c2, #17784A) 55%, #fff);
  border-bottom: 3px solid color-mix(in srgb, var(--c2, #17784A) 55%, #fff); border-bottom-left-radius: 8px; }
.carta.correcao-da-aula .quando { margin: 0 0 3px; font-size: 11px; font-weight: 800; letter-spacing: .3px;
  text-transform: uppercase; color: var(--c2, #17784A); }
.carta.correcao-da-aula.pendencia .quando { color: #a16207; }
.carta.correcao-da-aula.solta { margin-left: 0; }
.carta.correcao-da-aula.solta::before { display: none; }
.jornada .etapa[data-etapa-correcao] { scroll-margin-top: 84px; }