/* ============================================================
   NEUREN — CAMADA DE REFINO PREMIUM  (premium.css)  ·  v2
   ------------------------------------------------------------
   Eleva o acabamento dos painéis (Professor · Coordenação ·
   Responsável · Admin) ao nível de produtos SaaS de referência
   (Stripe / Linear / Notion), SEM rebranding.

   PRINCÍPIOS (inalterados em relação à v1, agora ampliados):
   • NENHUMA cor nova. Apenas tokens já definidos em panel.css /
     tokens.css (--brand, --surface, --line, --ink-*, --sage-*,
     --clay-*, --shadow-*, --r-*, --s-*, --f-display, etc.).
   • Carregada por ÚLTIMO no <head> dos painéis → vence a cascata
     por ordem para os primitivos compartilhados (.card/.btn/...).
   • Para componentes cujo CSS é INJETADO em runtime por módulos
     (academics.js → #acad-styles, comms.js → #comm-styles), o
     <style> injetado fica no <body> e venceria por ordem. Por
     isso aqui esses seletores são ESCOPADOS sob `.view`
     (especificidade 0,2,0 > 0,1,0 do bloco injetado), garantindo
     o override sem !important e sem tocar em uma linha de JS.
     → Efeito colateral importante: o BOLETIM, que é reusado pelo
       painel do Responsável SEM injeção de estilo, finalmente
       renderiza estilizado (corrige números/pílulas "colados").
   • 100% aditiva e reversível. Respeita prefers-reduced-motion.

   IDENTIDADE: o numeral serifado (Fraunces) é o protagonista do
   dado — notas, médias e estatísticas ganham peso editorial; o
   sage é o único acento de ação; superfícies de papel quente,
   filetes finos e sombras suaves em camadas dão a profundidade.
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   0 · FUNDAÇÃO — ritmo tipográfico e de espaço do cabeçalho
   ════════════════════════════════════════════════════════════ */
.view-head{margin-bottom:var(--s-7)}
.view-head .eyebrow{letter-spacing:.12em;font-size:11.5px}
.view-head h1{letter-spacing:-.02em;line-height:1.1}
.view-head p.sub{font-size:15px;color:var(--ink-2);line-height:1.55}

/* Numerais tabulares por padrão onde há dado (alinha colunas). */
.kpi .val,.acad-avg,.acad-att-num,.act-grade,.stat-tile .n,
.hbar-row .val,.rank-item .xp2,.dim .dv{font-variant-numeric:tabular-nums}

/* ════════════════════════════════════════════════════════════
   1 · CARDS — profundidade intencional, repouso e hover vivos
   ════════════════════════════════════════════════════════════ */
.card,.qa,.kpi{
  transition:box-shadow var(--t-med) var(--ease),
             transform var(--t-med) var(--ease),
             border-color var(--t-med) var(--ease),
             background var(--t-med) var(--ease);
}
.card{box-shadow:var(--shadow-sm)}
.view .card.pad{padding:var(--s-6)}           /* respiro maior — só nos painéis */

@media (hover:hover){
  .card.hover:hover,.kpi.hover:hover{
    box-shadow:var(--shadow-lg);
    transform:translateY(-3px);
    border-color:var(--sage-200);
  }
  .qa:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:var(--sage-200)}
}
.card.hover:active,.qa:active{transform:translateY(-1px)}

/* Cabeçalho de card mais legível. */
.card-t h3{font-size:16.5px;letter-spacing:-.01em}
.card-t .ic{box-shadow:inset 0 0 0 1px var(--line-soft)}

/* ════════════════════════════════════════════════════════════
   2 · KPI — número como protagonista (estilo executivo)
   ════════════════════════════════════════════════════════════ */
.kpi{position:relative;isolation:isolate}
.kpi::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:linear-gradient(90deg,var(--brand),var(--sage-300));
  opacity:.55;z-index:0;transition:opacity var(--t-med) var(--ease);
}
@media (hover:hover){.kpi.hover:hover::before{opacity:1}}
.kpi .val{position:relative;z-index:1;font-size:36px;letter-spacing:-.025em}
.kpi .lbl{font-weight:500}

/* ════════════════════════════════════════════════════════════
   3 · BOTÕES — feedback de profundidade refinado
   ════════════════════════════════════════════════════════════ */
.btn{
  border-radius:var(--r-sm);letter-spacing:.005em;
  transition:transform var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),
             filter var(--t-fast) var(--ease);
}
.btn.primary{
  background:linear-gradient(180deg,var(--brand),var(--brand-strong));
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset,
             0 2px 8px rgba(93,125,75,.28);
}
@media (hover:hover){
  .btn.primary:hover{
    box-shadow:0 1px 0 rgba(255,255,255,.12) inset,
               0 8px 20px rgba(93,125,75,.32),
               0 2px 6px rgba(93,125,75,.22);
    transform:translateY(-1px);
  }
  .btn.ghost:hover{border-color:var(--sage-300);background:var(--surface-2)}
  .btn.soft:hover{box-shadow:var(--shadow-sm);background:var(--sage-100)}
}
.btn.primary:active{transform:translateY(0) scale(.985);
  box-shadow:0 1px 4px rgba(93,125,75,.30) inset}
.btn.ghost:active,.btn.soft:active{transform:translateY(0) scale(.985)}

@media (hover:hover){
  .icon-btn:hover{box-shadow:inset 0 0 0 1px var(--line)}
}

/* ════════════════════════════════════════════════════════════
   4 · CAMPOS — inputs/selects/áreas com repouso e foco premium
   ════════════════════════════════════════════════════════════ */
.inp,select,textarea{
  transition:border-color var(--t-fast) var(--ease),
  box-shadow var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
@media (hover:hover){
  .inp:hover,select:hover,textarea:hover{border-color:var(--ink-4)}
}
.inp:focus,select:focus,textarea:focus{
  outline:0;border-color:var(--sage-300);box-shadow:var(--focus-ring);
  background:var(--surface);
}
/* Seta customizada nos <select> (aparência nativa varia por SO). */
select{
  -webkit-appearance:none;appearance:none;padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23968d7e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;
}
:root[data-theme="dark"] select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a89f8c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
/* Barra de busca da topbar: foco/realce mais nítidos. */
@media (hover:hover){.search:hover{border-color:var(--ink-4)}}
.search:focus-within{border-color:var(--sage-300);box-shadow:var(--focus-ring);background:var(--surface)}

/* ════════════════════════════════════════════════════════════
   5 · SIDEBAR — item ativo com presença, hover legível
   ════════════════════════════════════════════════════════════ */
.nav-item{transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
@media (hover:hover){
  .nav-item:hover{box-shadow:inset 0 0 0 1px var(--line-soft)}
}
.nav-item.active{box-shadow:inset 0 0 0 1px var(--sage-200)}
.nav-item.active::before{height:20px;box-shadow:0 0 0 3px var(--brand-soft)}
.nav-group-t{letter-spacing:.12em}
/* Logo da marca: leve brilho de profundidade. */
.logo{box-shadow:0 2px 10px rgba(93,125,75,.35),inset 0 1px 0 rgba(255,255,255,.18)}

/* ════════════════════════════════════════════════════════════
   6 · LISTAS / LINHAS — hover com filete de marca (clicável)
   ════════════════════════════════════════════════════════════ */
.ai-item,.row.clickable,.tbl tr.clickable{position:relative}
@media (hover:hover){
  .ai-item:hover,.row.clickable:hover{box-shadow:inset 2px 0 0 var(--brand);border-radius:var(--r-sm)}
}

/* ════════════════════════════════════════════════════════════
   7 · CHIPS / BADGES / TABS-pílula — coesão e foco
   ════════════════════════════════════════════════════════════ */
.chip,.tab,.kid-tab,.role-pill,.status-badge,.comm-chip{
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),
  border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.tab:focus-visible,.chip:focus-visible{box-shadow:var(--focus-ring);outline:0}
.tab.active{box-shadow:var(--shadow-sm),inset 0 0 0 1px var(--line-soft)}
.status-badge{box-shadow:inset 0 0 0 1px var(--line-soft)}
.role-pill{box-shadow:inset 0 0 0 1px var(--line-soft)}

/* ════════════════════════════════════════════════════════════
   8 · EMPTY STATES — premium ≠ vazio cru
   ════════════════════════════════════════════════════════════ */
.empty{margin-top:6vh}
.empty .glyph{box-shadow:0 6px 20px rgba(93,125,75,.12),inset 0 0 0 1px var(--sage-100)}
.empty h2{font-size:23px}

/* ════════════════════════════════════════════════════════════
   9 · SUB-ABAS (.comm-tab) — indicador suave e hover em pílula
   (CSS injetado por academics.js/comms.js → escopo .view p/ vencer)
   ════════════════════════════════════════════════════════════ */
.view .comm-tabs{gap:2px;margin:2px 0 var(--s-6)}
.view .comm-tab{
  position:relative;padding:9px 14px;border-radius:var(--r-sm) var(--r-sm) 0 0;
  font-weight:600;color:var(--ink-3);border-bottom:2px solid transparent;
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
@media (hover:hover){.view .comm-tab:hover{color:var(--ink-1);background:var(--surface-2)}}
.view .comm-tab.active{color:var(--ink-0);border-bottom-color:var(--brand)}
.view .comm-tab.active::after{
  content:"";position:absolute;left:14px;right:14px;bottom:-2px;height:2px;
  background:var(--brand);border-radius:2px;
}

/* ════════════════════════════════════════════════════════════
   10 · TABELAS (.acad-table / .tbl) — leitura limpa e numérica
   ════════════════════════════════════════════════════════════ */
.view .acad-table,.tbl{font-size:13.5px}
.view .acad-table th,.tbl th{
  font-weight:600;color:var(--ink-3);font-size:11px;text-transform:uppercase;
  letter-spacing:.06em;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.view .acad-table td,.tbl td{padding:12px;border-bottom:1px solid var(--line-soft);color:var(--ink-1);vertical-align:middle}
.view .acad-table tbody tr,.tbl tr.clickable{transition:background var(--t-fast) var(--ease)}
@media (hover:hover){
  .view .acad-table tbody tr:hover,.tbl tr.clickable:hover{background:var(--surface-2)}
}
.view .acad-table tbody tr:last-child td,.tbl tr:last-child td{border-bottom:0}
.view .acad-table td strong{color:var(--ink-0);font-weight:600}
.view .acad-table input.acad-score{text-align:center;font-variant-numeric:tabular-nums}

/* Toolbar acadêmica: respiro consistente. */
.view .acad-toolbar{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin-bottom:var(--s-6)}
.view .acad-field{display:flex;flex-direction:column;gap:6px}
.view .acad-field label{font-size:12px;color:var(--ink-3);font-weight:600;letter-spacing:.01em}
.view .acad-field .inp,.view .acad-field select{min-width:172px}

/* ════════════════════════════════════════════════════════════
   11 · BOLETIM — o protagonista (correção de raiz + premium)
   ------------------------------------------------------------
   O bloco injetado por academics.js NÃO chega ao painel do
   Responsável → sem isto os números/pílulas apareciam colados
   ("94%presença", "8.5/10Lista..."). Aqui o boletim ganha um
   layout editorial: médias em Fraunces, pílulas suaves, resumo
   de presença em mini-tiles. Escopo .view cobre TODOS os painéis.
   ════════════════════════════════════════════════════════════ */
.view .acad-boletim{display:flex;flex-direction:column;gap:var(--s-5)}
.view .acad-boletim-name{
  display:flex;align-items:center;gap:10px;
  font-family:var(--f-sans);font-size:13px;font-weight:600;letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:2px;
}
.view .acad-boletim-name svg{
  width:18px;height:18px;padding:7px;box-sizing:content-box;flex:0 0 auto;
  border-radius:var(--r-sm);background:var(--brand-soft);color:var(--brand-strong);
}

/* Cartão de período */
.view .acad-term{border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.view .acad-term-head{display:flex;align-items:center;gap:10px;margin-bottom:var(--s-4)}
.view .acad-term-head h3{margin:0;font-size:18px;letter-spacing:-.01em}

/* Lista de matérias */
.view .acad-subjects{display:flex;flex-direction:column;gap:10px}
.view .acad-subj{
  border:1px solid var(--line);border-radius:var(--r-md);padding:13px 15px;
  background:var(--surface-2);transition:border-color var(--t-fast) var(--ease);
}
@media (hover:hover){.view .acad-subj:hover{border-color:var(--sage-200)}}
.view .acad-subj-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.view .acad-subj-name{font-family:var(--f-sans);font-weight:600;font-size:14.5px;color:var(--ink-0)}

/* Média: numeral serifado, cor por desempenho via tokens */
.view .acad-avg{
  font-family:var(--f-display);font-size:23px;font-weight:600;line-height:1;
  color:var(--ink-1);letter-spacing:-.02em;display:inline-flex;align-items:baseline;gap:1px;
}
.view .acad-avg small{font-family:var(--f-sans);font-size:12px;font-weight:500;color:var(--ink-3);margin-left:1px}
.view .acad-avg.ok{color:var(--success)}
.view .acad-avg.low{color:var(--danger)}

/* Pílulas de avaliação (corrige o "8.5/10Lista...") */
.view .acad-pills{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
.view .acad-pill{
  font-size:12px;font-weight:500;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--line);
  padding:4px 11px;border-radius:var(--r-full);white-space:nowrap;
}
.view .acad-pill strong{color:var(--ink-0);font-weight:600;font-variant-numeric:tabular-nums}

/* Resumo de frequência: mini-tiles (corrige o "94%presença") */
.view .acad-att-summary{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  margin-top:var(--s-5);padding-top:var(--s-5);border-top:1px solid var(--line-soft);
}
.view .acad-att-stat{
  display:flex;flex-direction:column;gap:3px;align-items:flex-start;
  background:var(--surface-2);border:1px solid var(--line-soft);
  border-radius:var(--r-md);padding:12px 14px;
}
.view .acad-att-num{
  font-family:var(--f-display);font-size:24px;font-weight:600;line-height:1;
  color:var(--ink-0);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.view .acad-att-stat .comm-meta{
  font-size:11px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-3);
}
@media (max-width:720px){.view .acad-att-summary{grid-template-columns:repeat(2,1fr)}}

/* ════════════════════════════════════════════════════════════
   12 · LANÇAMENTO DE NOTAS / FREQUÊNCIA (.acad-split, .acad-asmt…)
   Escopo .view → vence o bloco injetado por academics.js.
   ════════════════════════════════════════════════════════════ */
.view .acad-split{display:grid;grid-template-columns:320px 1fr;gap:var(--s-5)}
@media (max-width:900px){.view .acad-split{grid-template-columns:1fr}}
.view .acad-list{display:flex;flex-direction:column;gap:8px}
.view .acad-asmt{
  display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:12px 14px;cursor:pointer;width:100%;font:inherit;
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
@media (hover:hover){.view .acad-asmt:hover{border-color:var(--sage-300);box-shadow:var(--shadow-sm)}}
.view .acad-asmt.active{border-color:var(--brand);background:var(--brand-soft);box-shadow:inset 2px 0 0 var(--brand)}
.view .acad-asmt-title{font-weight:600;font-size:14px;color:var(--ink-0)}
.view .acad-asmt svg{width:16px;height:16px;opacity:.45;transform:rotate(180deg)}

.view .acad-detail{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s-5);min-height:220px;box-shadow:var(--shadow-sm);
}
.view .acad-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:var(--s-4)}
.view .acad-hint{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  color:var(--ink-3);padding:var(--s-9) var(--s-4);text-align:center;min-height:200px;
}
.view .acad-hint svg{width:30px;height:30px;opacity:.4}
.view .acad-hint p{font-size:13.5px;color:var(--ink-3);max-width:34ch}

/* Botões de presença (segmento por aluno) */
.view .acad-att-group{display:flex;gap:6px;flex-wrap:wrap}
.view .acad-att-btn{
  border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);
  padding:6px 12px;font:inherit;font-size:12.5px;cursor:pointer;color:var(--ink-2);font-weight:500;
  transition:all var(--t-fast) var(--ease);
}
@media (hover:hover){.view .acad-att-btn:hover{border-color:var(--ink-4);color:var(--ink-0)}}
.view .acad-att-btn.on{background:var(--c,var(--brand));border-color:var(--c,var(--brand));color:#fff;font-weight:600;box-shadow:var(--shadow-sm)}

/* "Período fechado" e "fechado" — chips tematizados e crocantes */
.view .comm-chip{
  font-size:11px;font-weight:600;letter-spacing:.02em;background:var(--surface-3);
  color:var(--ink-2);padding:4px 10px;border-radius:var(--r-full);
  display:inline-flex;align-items:center;gap:6px;box-shadow:inset 0 0 0 1px var(--line-soft);
}
.view .comm-chip.is-closed{background:var(--danger-soft);color:var(--danger);box-shadow:inset 0 0 0 1px var(--danger-border)}

/* ════════════════════════════════════════════════════════════
   13 · COMUNICAÇÃO — mural e mensagens (CSS injetado por comms.js)
   Escopo .view → vence o bloco injetado. Pinned/"Fixado" sai do
   amarelo fixo hardcoded para um destaque quente via tokens.
   ════════════════════════════════════════════════════════════ */
.view .comm-list{display:flex;flex-direction:column;gap:12px}
.view .comm-card{
  text-align:left;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:16px 18px;cursor:pointer;width:100%;font:inherit;
  box-shadow:var(--shadow-sm);
  transition:border-color var(--t-med) var(--ease),transform var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease);
}
@media (hover:hover){
  .view .comm-card:hover{border-color:var(--sage-200);transform:translateY(-2px);box-shadow:var(--shadow-md)}
}
.view .comm-card:active{transform:translateY(0)}
.view .comm-card-top{display:flex;align-items:center;gap:11px;margin-bottom:9px}
.view .comm-card-title{font-family:var(--f-sans);font-weight:600;color:var(--ink-0);font-size:15px;letter-spacing:-.005em}
.view .comm-card-body{color:var(--ink-2);font-size:13.5px;margin:0 0 11px;line-height:1.55}
.view .comm-card-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* Avatar com inicial — leve gradiente e contorno */
.view .mini-av{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 1px 3px rgba(0,0,0,.12)}

/* "Fixado": destaque quente (clay/butter) via tokens, não #fff3d6 */
.view .comm-chip.pin{
  margin-left:auto;background:var(--warn-soft);color:var(--warn);
  box-shadow:inset 0 0 0 1px var(--clay-200);
}
:root[data-theme="dark"] .view .comm-chip.pin{box-shadow:inset 0 0 0 1px rgba(184,128,82,.4)}

/* Detalhe / thread / bolhas de mensagem */
.view .comm-detail{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-5);box-shadow:var(--shadow-sm)}
.view .comm-conv{border-radius:var(--r-md);transition:background var(--t-fast) var(--ease)}
@media (hover:hover){.view .comm-conv:hover{background:var(--surface-2)}}
.view .comm-bubble{background:var(--surface-2);color:var(--ink-0);border:1px solid var(--line-soft);padding:9px 13px;border-radius:14px;font-size:14px;line-height:1.45}
.view .comm-msg.mine .comm-bubble{background:var(--brand);color:#fff;border-color:transparent}
.view .comm-badge{background:var(--brand);color:#fff;box-shadow:var(--shadow-sm)}

/* ════════════════════════════════════════════════════════════
   ACESSIBILIDADE / MOTION — nada "salta" para quem pediu menos
   ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .card,.qa,.kpi,.btn,.chip,.tab,.ai-item,.row.clickable,.nav-item,.icon-btn,
  .view .comm-card,.view .acad-subj,.view .acad-asmt,.view .acad-att-btn{
    transition:none !important;
  }
  .card.hover:hover,.kpi.hover:hover,.qa:hover,.btn.primary:hover,
  .view .comm-card:hover{transform:none !important}
}
body.reduce-motion .card.hover:hover,
body.reduce-motion .kpi.hover:hover,
body.reduce-motion .qa:hover,
body.reduce-motion .btn.primary:hover,
body.reduce-motion .view .comm-card:hover{transform:none !important}
