/* Painel do professor (assets/js/professor.js): moderação, fila de materiais, questões e flashcards do time e Loja.
   Só tokens de tokens.css (letra: 16 texto, 15 botões e filtros, 14 metadados e selos, 13 rótulos em maiúsculas),
   com claro e escuro pelos mesmos tokens. Mobile first; a tabela da Loja vira cartões abaixo de 720 px. */

.prof-ferramentas{display:grid;gap:var(--space-4);min-width:0}
.prof-intro{color:var(--muted);max-width:80ch}
.prof-meta{font-size:var(--fs-meta);color:var(--muted)}
.dica{font-size:var(--fs-meta);font-weight:var(--fw-regular);color:var(--muted)}
.dica.aviso{color:var(--orange-deep);font-weight:var(--fw-semibold)}
.dica.aviso:empty{display:none}
/* Campos com dica embaixo: o rótulo fica no topo da célula, sem esticar */
#professor-app .campo{align-content:start}
.prof-ferramentas code{font-size:var(--fs-meta);background:var(--surface-2);padding:.05rem .35rem;border-radius:6px;overflow-wrap:anywhere}

/* Abas: número de pendências ao lado do nome */
.prof-tabs .tab{display:inline-flex;align-items:center;gap:.4rem}
.tab-n{display:inline-grid;place-items:center;min-width:1.6rem;height:1.6rem;padding:0 .45rem;border-radius:var(--r-pill);background:var(--orange);color:var(--navy-deep);font-size:var(--fs-meta);font-weight:var(--fw-black);font-variant-numeric:tabular-nums;line-height:1}
/* Celular: as cinco abas em duas colunas, sem rolagem lateral */
@media (max-width:559.98px){
  .prof-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 .25rem}
  .prof-tabs .tab{justify-content:flex-start;text-align:left;padding-inline:.6rem;min-width:0}
}

/* Barra acima das listas: filtro ou título à esquerda, ação à direita */
.prof-barra{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.6rem var(--space-4);min-width:0}
.prof-barra .sec-label{margin:0}
.prof-barra .count{margin:0}
.prof-filtro{flex:1 1 240px;max-width:380px}
.prof-filtro select{font:inherit;font-size:var(--fs-small)}

/* Listas de itens (ocultos, materiais, questões, flashcards) */
.prof-lista{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3);min-width:0}
.prof-lista:focus{outline:none}
.prof-lista > .vazio{background:var(--surface);border:1px dashed var(--line);border-radius:var(--r);padding:var(--space-6);text-align:center;color:var(--muted)}
.prof-item{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);border-left:4px solid var(--line);padding:var(--space-4);display:grid;gap:.5rem;min-width:0;overflow-wrap:anywhere}
.prof-item[data-estado="aguardando"]{border-left-color:var(--orange)}
.prof-item[data-estado="correcao"]{border-left-color:var(--erro)}
.prof-item[data-estado="aprovado"]{border-left-color:var(--ok)}
.prof-item[data-estado="oculto"]{border-left-color:var(--orange-deep)}
.prof-item-topo{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .5rem;min-width:0}
.prof-item-topo .harrison{white-space:normal}
.prof-titulo{font-size:var(--fs-h3);color:var(--heading-on-surface)}
.prof-desc{color:var(--fg)}
.prof-trecho{font-style:italic}
.prof-enunciado{font-weight:var(--fw-semibold);white-space:pre-line}
.prof-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;min-width:0}
.pillbtn.perigo{color:var(--erro)}
.pillbtn.prof-aprovar{background:var(--ok-bg);color:var(--ok)}
.selo.prof-ok{background:var(--ok-bg);color:var(--ok)}
.prof-correcao{margin-top:.25rem}
.prof-correcao label{font-weight:var(--fw-semibold);font-size:var(--fs-small)}

/* Flashcards do time: frente em destaque, verso abaixo */
.prof-frente{font-weight:var(--fw-black);color:var(--heading-on-surface)}
.prof-verso{border-top:1px dashed var(--line);padding-top:.45rem}

/* Questões do time: alternativas com a justificativa embaixo */
.prof-detalhe summary{cursor:pointer;font-weight:var(--fw-semibold);font-size:var(--fs-small);color:var(--link);min-height:36px;display:flex;align-items:center}
.prof-alts{margin:.25rem 0 0;padding:0;list-style:none;display:grid;gap:.45rem}
.prof-alts li{background:var(--bg);border-radius:var(--r-md);padding:.5rem .7rem;display:grid;gap:.15rem}
.prof-alts li.certa{background:var(--ok-bg)}
.prof-alts li.certa b{color:var(--ok)}
.prof-alts b{margin-right:.25rem}
.prof-porque{color:var(--muted)}

/* Formulário de questão: cada alternativa num quadro, duas por linha a partir de 720 px */
.prof-alt{margin:0;padding:.75rem .85rem .85rem;border:1px solid var(--line);border-radius:var(--r-md);display:grid;gap:.6rem;min-width:0}
.prof-alt legend{padding:0 .3rem;font-weight:var(--fw-black)}
.prof-gabarito{display:flex;flex-wrap:wrap;gap:0 var(--space-6)}
.prof-gabarito .opcao{font-weight:var(--fw-black)}

/* ---------- Loja: tabela (a partir de 720 px) ou cartões (celular) ---------- */
.loja-tabela th{white-space:nowrap}
.loja-tabela td{vertical-align:middle}
.loja-tabela td:not(.loja-item){overflow-wrap:normal}
.loja-tabela .selo{white-space:nowrap}
.loja-tabela td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.loja-tabela .loja-titulo{display:block;font-size:var(--fs-body);color:var(--heading-on-surface)}
.loja-tabela .loja-item .pill{margin-top:.25rem}
.loja-tabela tr.rascunho .loja-titulo{color:var(--muted)}
.loja-tabela td.vazio{text-align:center;color:var(--muted);padding:var(--space-6)}
@media (max-width:719.98px){
  .loja-tabela thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .loja-tabela,.loja-tabela tbody{display:block}
  .loja-tabela tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:1px solid var(--line)}
  .loja-tabela tr:last-child{border-bottom:0}
  .loja-tabela td{display:block;border-bottom:0;padding:.45rem .8rem;min-width:0}
  .loja-tabela td::before{content:attr(data-rotulo);display:block;font-size:var(--fs-label);font-weight:var(--fw-black);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:.1rem}
  .loja-tabela td.loja-item,.loja-tabela td.loja-acoes,.loja-tabela td.vazio{grid-column:1/-1}
  .loja-tabela td.loja-item{background:var(--surface-2);padding-block:.6rem}
  .loja-tabela td.loja-item::before,.loja-tabela td.loja-acoes::before,.loja-tabela td.vazio::before{content:none}
  .loja-tabela td.loja-acoes{padding-bottom:.7rem}
}