/* =============================================================================
   Mormaii — o visual compartilhado dos apps
   =============================================================================

   FONTE ÚNICA. Este arquivo mora no hub e é SERVIDO pelos apps (rota /design.css),
   nunca copiado para dentro deles. Cópia envelhece e diverge — foi assim que a
   mesma regra de negócio acabou escrita em cinco lugares neste projeto.

   DE ONDE VEM CADA COISA:

   estrutura   os nomes de token do 360 (dashboard/app/globals.css e
               04-agentes/contratos/engine.py): canvas, surface, hairline e a
               escala ink → charcoal → slate → steel → stone. Quem conhece o 360
               reconhece a página.

   marca       `--brand: #F36B21`, o laranja Mormaii — declarado em
               app-professor-mormaii/frontend/index.html, o app que já está na
               mão de gente de verdade. Não inventei cor de marca.

   MODO CLARO, e a inversão não é trocar preto por branco:

   - o canvas é levemente cinza (#F7F8FA) e o CARD é branco. No escuro é o
     contrário — card mais claro que o fundo. Card branco sobre branco some.
   - o laranja de marca em TEXTO sobre branco dá ~3:1 de contraste, abaixo do
     mínimo legível. Por isso existem dois: `--brand` para preenchimento (barra,
     botão, marcador) e `--brand-ink` para texto e link.
   - a sombra substitui parte do trabalho que a hairline fazia no escuro.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   TEMAS
   -----------------------------------------------------------------------------
   Um bloco de tokens por tema. Nada além daqui muda: todo o resto do arquivo e
   dos apps usa var(--...), então trocar de tema é trocar um atributo no <html>.

   `mormaii` (30/10/2026) a cara do app do professor — o "visual TIM" de
             aula.html: fundo cinza-quente, cartão branco SEM borda com sombra
             leve, verde TIM, Plus Jakarta Sans, faixa preta no topo. É o PADRÃO
             de toda página que adere (ver ADESÃO abaixo).
   `claro`   o "Clássico" no seletor: canvas levemente cinza, card branco, laranja.
   `escuro`  a paleta EXATA do 360 (dashboard/app/globals.css). Desde 30/10 o
             escuro sai do seletor das páginas que aderem — fica no 360, que
             nasceu escuro (no tablet do professor o escuro já era veto do dono).
   `auto`    segue o sistema operacional — só nas páginas que ainda não aderiram.

   ADESÃO. O tema `mormaii` e a barra do topo só valem na página que declara
   `<html data-temas="mormaii claro">`. Sem o atributo, tema.js e este arquivo
   fazem exatamente o que faziam antes (Auto/Claro/Escuro, conta e seletor
   flutuando no canto). É por app, de propósito: o painel do gestor restiliza o
   seletor e a conta antigos com paleta própria, e virar a chave para todos de
   uma vez misturaria as duas paletas na tela dele.
   -------------------------------------------------------------------------- */

:root, html[data-tema="claro"] {
  --canvas:#f7f8fa; --surface:#ffffff; --surface-2:#f2f4f7; --surface-3:#e8ebf0;
  --hairline:#e2e5ea; --hairline-soft:#eef0f4;
  --ink:#14161a; --charcoal:#2b2f36; --slate:#474d56; --steel:#6b7280; --stone:#949aa3;
  --brand:#f36b21; --brand-ink:#c04a0e; --brand-hover:#d95a15; --brand-soft:#fdf0e8;
  --menta:#00a57e; --menta-soft:#e4f7f1;
  --info:#2e6fd9; --info-soft:#e8f0fd;
  --warn:#b7791f; --warn-soft:#fdf4e3; --warn-ink:#8a5a12;
  --erro:#c53030; --erro-soft:#fdeaea; --erro-borda:#f3c9c9;
  --sombra:0 1px 2px rgba(20,22,26,.04), 0 1px 3px rgba(20,22,26,.06);
  --sombra-alta:0 4px 12px rgba(20,22,26,.10);
  --scroll:#cfd4db;
  /* a barra do topo no Clássico: branca, marca em laranja (18px negrito = texto
     grande, 3,0:1 basta); o botão ativo usa o laranja de TEXTO (5,2:1) */
  --faixa:#ffffff; --faixa-2:#f2f4f7; --faixa-borda:#e2e5ea;
  --faixa-tinta:#14161a; --faixa-sub:#6b7280; --vivo:#f36b21;
  --faixa-ativo:#c04a0e; --faixa-ativo-tinta:#ffffff;
  /* laranja de CATEGORIA (Vender no consultor, anotação na atividade): nos temas
     antigos é igual à marca; no Mormaii a marca vira verde e ele continua laranja,
     senão Vender e Cuidar ficariam da mesma cor. O Mormaii herda estes do :root. */
  --cat-laranja:#f36b21; --cat-laranja-ink:#c04a0e; --cat-laranja-soft:#fdf0e8;
  color-scheme: light;
}

html[data-tema="escuro"] {
  /* os tokens do 360, nome por nome */
  --canvas:#0a0a0a; --surface:#141416; --surface-2:#1a1a1d; --surface-3:#232326;
  --hairline:#232326; --hairline-soft:#1a1a1c;
  --ink:#ffffff; --charcoal:#ededed; --slate:#c7c7ca; --steel:#a0a0a3; --stone:#7a7a7d;
  --brand:#f36b21; --brand-ink:#ff8b4d; --brand-hover:#ff7a2e; --brand-soft:#2a1409;
  --menta:#00d4a4; --menta-soft:#0c2a24;
  --info:#5a95e8; --info-soft:#12203a;
  --warn:#e0a340; --warn-soft:#2c2312; --warn-ink:#e0a340;
  --erro:#e57373; --erro-soft:#2e1616; --erro-borda:#4a2020;
  --sombra:none; --sombra-alta:0 8px 24px rgba(0,0,0,.5);
  --scroll:#2b2b30;
  --faixa:#141416; --faixa-2:#1a1a1d; --faixa-borda:#232326;
  --faixa-tinta:#ffffff; --faixa-sub:#a0a0a3; --vivo:#00d4a4;
  --faixa-ativo:#00d4a4; --faixa-ativo-tinta:#0a0a0a;
  --cat-laranja:#f36b21; --cat-laranja-ink:#ff8b4d; --cat-laranja-soft:#2a1409;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  html[data-tema="auto"] {
    --canvas:#0a0a0a; --surface:#141416; --surface-2:#1a1a1d; --surface-3:#232326;
    --hairline:#232326; --hairline-soft:#1a1a1c;
    --ink:#ffffff; --charcoal:#ededed; --slate:#c7c7ca; --steel:#a0a0a3; --stone:#7a7a7d;
    --brand:#f36b21; --brand-ink:#ff8b4d; --brand-hover:#ff7a2e; --brand-soft:#2a1409;
    --menta:#00d4a4; --menta-soft:#0c2a24;
    --info:#5a95e8; --info-soft:#12203a;
    --warn:#e0a340; --warn-soft:#2c2312; --warn-ink:#e0a340;
    --erro:#e57373; --erro-soft:#2e1616; --erro-borda:#4a2020;
    --sombra:none; --sombra-alta:0 8px 24px rgba(0,0,0,.5);
    --scroll:#2b2b30;
    --faixa:#141416; --faixa-2:#1a1a1d; --faixa-borda:#232326;
    --faixa-tinta:#ffffff; --faixa-sub:#a0a0a3; --vivo:#00d4a4;
    --faixa-ativo:#00d4a4; --faixa-ativo-tinta:#0a0a0a;
  --cat-laranja:#f36b21; --cat-laranja-ink:#ff8b4d; --cat-laranja-soft:#2a1409;
    color-scheme: dark;
  }
}

:root {
  --r-sm:6px; --r-md:9px; --r-lg:14px;
  --font:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* MORMAII. Vale quando escolhido E, nas páginas que aderem, quando nada foi
   escolhido ainda — o `:not([data-tema="claro"])` deixa o padrão certo pintar
   ANTES de tema.js rodar (ele é `defer`), sem piscar o Clássico a cada carga.
   Especificidade (0,2,1): vence o `:root` acima sem depender de ordem.

   Valores do aula.html, com UMA troca medida: o cinza de texto de lá
   (#6b7472) dá 4,32:1 sobre este fundo, abaixo dos 4,5 — aqui é #646c69
   (4,85:1). Verde TIM: 5,33:1 como texto e como fundo de botão. `--menta` é o
   mesmo verde: no professor "bom" e "marca" já são a mesma cor. */
html[data-tema="mormaii"],
html[data-temas]:not([data-tema="claro"]) {
  --canvas:#f2f3f0; --surface:#ffffff; --surface-2:#f2f3f0; --surface-3:#e4e7e2;
  --hairline:#e4e7e2; --hairline-soft:#eceeea;
  --ink:#0b0f0d; --charcoal:#2b312e; --slate:#474d4a; --steel:#646c69; --stone:#9aa39d;
  --brand:#0e7a57; --brand-ink:#0e7a57; --brand-hover:#0a6648; --brand-soft:#d9f5ec;
  --menta:#0e7a57; --menta-soft:#d9f5ec;
  --info:#2e6fd9; --info-soft:#e3edfd;
  --warn:#b7791f; --warn-soft:#fdefd2; --warn-ink:#8a5a12;
  --erro:#c53030; --erro-soft:#fdeaea; --erro-borda:#f3c9c9;
  --sombra:0 2px 10px rgba(11,15,13,.06); --sombra-alta:0 12px 30px rgba(11,15,13,.12);
  --scroll:#cfd4cd;
  --card-borda:transparent;
  --faixa:#0b0f0d; --faixa-2:#161b18; --faixa-borda:#2a302c;
  --faixa-tinta:#ffffff; --faixa-sub:#9aa39d; --vivo:#00e09a;
  --faixa-ativo:#00e09a; --faixa-ativo-tinta:#0b0f0d;
  --r-md:12px; --r-lg:18px;
  /* sem rede (sala de aula) a fonte não chega e cai na do sistema; nada quebra */
  --font:"Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--slate);
  font: 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-ink); text-decoration: none }
a:hover { text-decoration: underline }

.wrap { max-width: 1240px; margin: 0 auto; padding: 22px 20px 72px }

/* ---------------------------------------------------------------- cabeçalho */
.topo { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap }
.topo h1 { margin: 0; font-size: 21px; font-weight: 650; letter-spacing: -.2px; color: var(--ink) }
.topo h1 b { color: var(--brand-ink); font-weight: 650 }
.sub { color: var(--steel); font-size: 13px }

/* eyebrow: a marca do 360 no topo da seção */
.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase;
  color: var(--stone); margin: 28px 0 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--hairline);
}

/* ---------------------------------------------------------------- controles */
select, input, textarea {
  background: var(--surface); color: var(--charcoal);
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  padding: 8px 12px; font: 500 14px/1.4 var(--font);
}
select:focus, input:focus, textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}
label.campo {
  display: block; margin: 12px 0 5px; font-size: 11px; font-weight: 600;
  letter-spacing: .5px; text-transform: uppercase; color: var(--steel);
}

.bt {
  border: 1px solid transparent; border-radius: var(--r-md); padding: 8px 15px;
  font: 600 13.5px var(--font); cursor: pointer;
}
.bt.p { background: var(--brand); color: #fff }
.bt.p:hover { background: var(--brand-hover) }
.bt.s { background: var(--surface); color: var(--charcoal); border-color: var(--hairline) }
.bt.s:hover { background: var(--surface-2) }

/* ---------------------------------------------------------------- cartão */
.card {
  background: var(--surface); border: 1px solid var(--card-borda, var(--hairline));
  border-radius: var(--r-lg); padding: 16px; box-shadow: var(--sombra);
}
.card h3 { margin: 0 0 12px; font-size: 14px; font-weight: 650; color: var(--ink); line-height: 1.3 }
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px }

/* ---------------------------------------------------------------- números */
.kpis { display: flex; gap: 22px; flex-wrap: wrap }
.kpi .v { font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--ink) }
.kpi .l {
  font-size: 11px; color: var(--steel); text-transform: uppercase;
  letter-spacing: .4px; margin-top: 3px;
}
.tabular, .n { font-variant-numeric: tabular-nums }

/* ---------------------------------------------------------------- listas */
.linha {
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
  font-size: 13.5px; padding: 4px 0; color: var(--charcoal);
}
.linha .n { color: var(--steel); white-space: nowrap }
.barra {
  grid-column: 1/-1; height: 5px; border-radius: 3px;
  background: var(--surface-3); overflow: hidden; margin: -1px 0 6px;
}
.barra i { display: block; height: 100%; background: var(--brand); border-radius: 3px }

/* ---------------------------------------------------------------- avisos */
.tag {
  display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2px 8px;
  border-radius: 20px; background: var(--surface-2); color: var(--steel);
}
.tag.ok { background: var(--menta-soft); color: var(--menta) }
.tag.al { background: var(--erro-soft); color: var(--erro) }
.tag.at { background: var(--warn-soft); color: var(--warn) }

.aviso {
  border-radius: var(--r-md); padding: 10px 12px; font-size: 13px; margin: 10px 0;
  background: var(--erro-soft); border: 1px solid var(--erro-borda); color: var(--erro);
}
.nota {
  border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 9px 12px; font-size: 12.5px;
  background: var(--warn-soft); border-left: 3px solid var(--warn); color: var(--warn-ink);
  line-height: 1.45;
}
.vazio { color: var(--stone); font-size: 13px; padding: 10px 0 }

/* ---------------------------------------------------------------- diálogo */
dialog {
  background: var(--surface); color: var(--slate); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: 20px; max-width: 460px; width: 92%;
  box-shadow: var(--sombra-alta);
}
dialog::backdrop { background: rgba(10, 10, 12, .45) }
dialog h3 { margin: 0 0 4px; font-size: 16px; color: var(--ink) }
.acoes { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px }

/* ---------------------------------------------------------------- rolagem */
::-webkit-scrollbar { width: 10px; height: 10px }
::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 8px }
::-webkit-scrollbar-track { background: transparent }

/* ---------------------------------------------------------------- seletor de tema */
.tema {
  position: fixed; top: 14px; right: 16px; z-index: 50; display: flex; gap: 2px;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 20px; padding: 3px; box-shadow: var(--sombra);
}
.tema button {
  border: 0; background: none; cursor: pointer; border-radius: 16px;
  padding: 4px 11px; font: 600 11.5px var(--font); color: var(--steel);
}
.tema button[aria-pressed="true"] { background: var(--brand); color: #fff }
@media print { .tema { display: none } }

/* Quem está logado e o botão de sair — montados por tema.js.
   Ficam à ESQUERDA do seletor de tema, na mesma linha. O `right` calculado
   (largura do seletor + folga) evita que os dois se sobreponham. */
.conta {
  position: fixed; top: 14px; right: 190px; z-index: 50;
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 20px; padding: 4px 6px 4px 13px; box-shadow: var(--sombra);
  max-width: 42vw;
}
.conta-quem {
  font: 600 11.5px var(--font); color: var(--steel);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.conta-portal {
  font: 600 11.5px var(--font); color: var(--steel); text-decoration: none;
  white-space: nowrap;
}
.conta-portal:hover { color: var(--brand-ink); text-decoration: underline }
.conta-sair {
  font: 600 11.5px var(--font); color: var(--brand-ink); text-decoration: none;
  background: var(--surface-2); border-radius: 16px; padding: 4px 11px;
  white-space: nowrap;
}
.conta-sair:hover { background: var(--brand); color: #fff }
/* Em tela estreita os dois não cabem lado a lado: a conta desce uma linha. */
@media (max-width: 620px) {
  .conta { right: 16px; top: 52px; max-width: calc(100vw - 32px) }
}
@media print { .conta { display: none } }

/* ---------------------------------------------------------------- barra Mormaii
   Só nas páginas que aderem (`html[data-temas]`), montada por tema.js. Junta o
   que antes flutuava no canto (conta + seletor de tema) numa faixa no topo,
   com a marca — a mesma em todo app, que é o que faz parecer UM sistema.

   A barra é ABSOLUTA e o body reserva a altura dela ANTES de ela existir:
   tema.js roda depois do HTML (defer), e inserir 56px no topo a essa altura
   empurraria a página inteira para baixo a cada carga. */
html[data-temas] body { padding-top: 56px }
/* E o recuo que os apps davam para a conta flutuante (atividade 60px, fichas
   58px) deixa de ter o que desviar: volta ao do .wrap. */
html[data-temas] .wrap { padding-top: 22px }
.mm-barra {
  position: absolute; top: 0; left: 0; right: 0; z-index: 40; height: 56px;
  background: var(--faixa); color: var(--faixa-tinta);
  border-bottom: 1px solid var(--faixa-borda);
}
.mm-barra-in {
  max-width: 1240px; height: 100%; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 14px;
}
.mm-marca {
  font: 700 18px/1 var(--font); letter-spacing: -.01em; color: var(--faixa-tinta);
  white-space: nowrap; text-decoration: none;
}
.mm-marca b { color: var(--vivo); font-weight: 700 }
.mm-marca:hover { text-decoration: none; opacity: .85 }
.mm-espaco { flex: 1 }
.mm-quem {
  font: 600 12.5px var(--font); color: var(--faixa-sub);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 28vw;
}
.mm-link { font: 600 12.5px var(--font); color: var(--faixa-sub); white-space: nowrap }
.mm-link:hover { color: var(--faixa-tinta) }
.mm-tema {
  display: flex; gap: 2px; padding: 3px; border-radius: 999px;
  background: var(--faixa-2); border: 1px solid var(--faixa-borda);
}
.mm-tema button {
  border: 0; background: none; cursor: pointer; border-radius: 999px;
  padding: 4px 11px; font: 600 11.5px var(--font); color: var(--faixa-sub);
}
.mm-tema button[aria-pressed="true"] { background: var(--faixa-ativo); color: var(--faixa-ativo-tinta) }
.mm-sair {
  font: 600 12.5px var(--font); color: var(--faixa-tinta); white-space: nowrap;
  background: var(--faixa-2); border: 1px solid var(--faixa-borda);
  border-radius: 999px; padding: 5px 13px;
}
.mm-sair:hover { border-color: var(--vivo); text-decoration: none }
.mm-barra a:focus-visible, .mm-tema button:focus-visible { outline: 2px solid var(--vivo); outline-offset: 2px }
@media (max-width: 620px) {
  .mm-barra-in { padding: 0 12px; gap: 8px }
  .mm-quem { display: none }
  .mm-marca { font-size: 16px }
  .mm-tema button { padding: 4px 8px }
}
/* Em 360px nao cabe tudo: o "Painéis" sai — a marca ja leva ao portal. */
@media (max-width: 420px) { .mm-link { display: none } }
@media print {
  html[data-temas] body { padding-top: 0 }
  .mm-barra { display: none }
}