/* =============================================================================
 * aluno-pele-viva.css — a pele das telas laterais da área do aluno.
 *
 * Por que existe: a área do aluno é vidro tingido sobre a pintura (hero, cartões
 * do plano, colunas), mas as telas que abrem do lado (Meu jeito, Recursos,
 * Caderno, Jogos, Mapa, Responder, 2ª fase, Cobertura) eram uma chapa preta de
 * rgba(7,4,6,.96) por cima de tudo. Ordem do dono em 10/08/2026: deixar essas
 * telas bonitas, decoradas, vivas, com transparência.
 *
 * A linguagem é a que a casa já usa, e vem do .hero-big e do .plano-col do
 * próprio aluno.html: camadas de cor sobre base escura transparente, mais
 * backdrop-filter, para a pintura aparecer borrada por trás sem comer o texto.
 * Cada tela tem a sua cor (--dr-tint), como as pools já têm (questões azul,
 * flashcards verde, diagnóstico vermelho).
 *
 * ADITIVO E REVERSÍVEL: tirar a linha do <link> no aluno.html devolve tudo ao
 * que era. Nada aqui muda comportamento, só aparência.
 * ============================================================================= */

/* ---------------------------------------------------------------------------
 * 1. A TELA LATERAL (drawer): vidro tingido no lugar da chapa preta.
 * ------------------------------------------------------------------------- */
.drawer {
  /* ⚠️ A TINTA DENTRO DA TELA LATERAL.
     O aluno.html só redefine --ink, --ink-dim, --ink-faint e --line em
     `main.telos-main, .aluno-dock, .cob-torre`. O drawer ficou de fora, então
     todo componente montado aqui dentro que escreve com var(--ink) caía no
     valor do telos-design.css, que é AZUL-ESCURO de tema claro, e sumia no
     fundo escuro. Foi assim que "Você ainda não declarou domínio de nenhuma
     matéria." saiu ilegível. Declarar os tokens aqui conserta a CLASSE inteira:
     vale para o que já existe e para o que for montado aqui depois. */
  --ink: #f5f0e8;
  --ink-dim: #d6ccbe;
  --ink-faint: #a89e90;
  --line: rgba(212,168,87,.22);
  /* Mesma história dos acentos: o telos-design.css tem um dourado para
     superfície CLARA (--accent: #8a5e1f) e outro para superfície escura
     (#d4a857). O drawer é escuro e herdava o claro, então link e ênfase saíam
     em marrom sem contraste. Medido em 10/08/2026: "console.groq.com" na 2ª
     fase dava 2.94. Os três acentos vêm para a versão de superfície escura. */
  --accent: #d4a857;
  --accent-warm: #fbe8b4;
  --accent-deep: #a87930;

  --dr-tint: #d4a857;                     /* dourado da casa, o padrão */
  --dr-tint2: #b45309;
  background:
    radial-gradient(130% 62% at 100% 0%,
      color-mix(in srgb, var(--dr-tint) 34%, transparent), transparent 66%),
    radial-gradient(110% 55% at 0% 100%,
      color-mix(in srgb, var(--dr-tint2) 34%, transparent), transparent 64%),
    radial-gradient(80% 40% at 100% 100%,
      color-mix(in srgb, var(--dr-tint) 16%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(24,14,12,.34) 0%, rgba(10,6,8,.44) 55%, rgba(7,4,6,.50) 100%);
  border-left: 1px solid color-mix(in srgb, var(--dr-tint) 60%, transparent);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
}
.drawer.from-left {
  border-left: none;
  border-right: 1px solid color-mix(in srgb, var(--dr-tint) 60%, transparent);
}
.drawer.is-open {
  box-shadow:
    -22px 0 60px rgba(0,0,0,.50),
    0 0 90px -20px color-mix(in srgb, var(--dr-tint) 40%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--dr-tint) 28%, transparent);
}
.drawer.from-left.is-open {
  box-shadow:
    22px 0 60px rgba(0,0,0,.50),
    0 0 90px -20px color-mix(in srgb, var(--dr-tint) 40%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--dr-tint) 28%, transparent);
}

/* O fio de luz que corre no alto da tela lateral, como a barra de estágio do
   plano. Decoração pura, e por isso não recebe clique. */
.drawer::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--dr-tint) 85%, transparent) 22%,
    #fff5da 50%,
    color-mix(in srgb, var(--dr-tint2) 85%, transparent) 78%,
    transparent);
  opacity: .85;
}
/* Brilho de canto, bem baixo, que dá a sensação de luz vindo de fora da tela.
   Ele respira devagar, e só enquanto a tela está aberta: fechada, nada anima. */
.drawer::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(70% 40% at 92% -6%,
      color-mix(in srgb, var(--dr-tint) 26%, transparent), transparent 70%),
    radial-gradient(85% 45% at 18% 96%,
      color-mix(in srgb, var(--dr-tint2) 45%, transparent), transparent 72%),
    radial-gradient(55% 28% at 88% 78%,
      color-mix(in srgb, var(--dr-tint) 14%, transparent), transparent 72%);
}
/* A luz entra UMA vez, quando a tela abre, e para. Antes isto era um laço de 18 s
   sem fim; sobre uma lâmina de tela inteira com desfoque de 22 px, o navegador
   recompõe a camada o tempo todo, e a máquina paga por isso enquanto a tela
   estiver aberta. Medido em 10/08/2026: com o laço ligado, o navegador de teste
   passou a estourar 30 s até para tirar um print. */
.drawer.is-open::after { animation: dr-acende .9s ease-out both; }
@keyframes dr-acende {
  from { opacity: .6; transform: translateY(10px); }
  to   { opacity: 1;  transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .drawer.is-open::after { animation: none; }
}
.drawer > * { position: relative; z-index: 1; }

/* Cada tela com a sua cor. */
#drawerPersonalizacao { --dr-tint: #f59e0b; --dr-tint2: #c2410c; }
#drawerRecursos       { --dr-tint: #5eead4; --dr-tint2: #0f766e; }
#drawerCaderno        { --dr-tint: #86efac; --dr-tint2: #15803d; }
#drawerJogos          { --dr-tint: #c4b5fd; --dr-tint2: #7c3aed; }
#drawerMapa           { --dr-tint: #7dd3fc; --dr-tint2: #1d4ed8; }
#drawerPool           { --dr-tint: #93c5fd; --dr-tint2: #1e40af; }
#drawerSegundafase    { --dr-tint: #fda4af; --dr-tint2: #be123c; }
#drawerCobertura      { --dr-tint: #fcd34d; --dr-tint2: #a16207; }

/* ---------------------------------------------------------------------------
 * 1-B. OS CARTÕES DE DENTRO.
 *
 * É isto que faz a tela lateral ter a mesma riqueza do resto do site: a lâmina
 * do lado deixa de ser uma chapa e vira PÁGINA (a pintura aparece por trás,
 * borrada), e o conteúdo mora em cartões de vidro tingido, na medida exata que
 * o .hero-big e o .pool-card já usam aqui: raio de 22, borda de 1px na cor com
 * meia opacidade, sombra colorida e um fio de luz por dentro.
 * ------------------------------------------------------------------------- */
.drawer .pele-cartao,
#drawerPersonalizacao .mj-field,
#drawerPersonalizacao .mj-painel,
#drawerRecursos .drawer-panel[data-rec-panel] > .rec-full {
  position: relative;
  border-radius: 22px;
  padding: 16px 18px;
  margin-bottom: 14px;
  background:
    radial-gradient(circle at 12% 0%,
      color-mix(in srgb, var(--dr-tint) 20%, transparent), transparent 55%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--dr-tint2) 24%, transparent) 0%,
      color-mix(in srgb, var(--dr-tint2) 16%, transparent) 70%,
      rgba(6,4,8,.24) 100%),
    rgba(9,6,10,.46);
  border: 1px solid color-mix(in srgb, var(--dr-tint) 45%, transparent);
  box-shadow:
    0 18px 48px -18px color-mix(in srgb, var(--dr-tint2) 70%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--dr-tint) 30%, transparent);
  /* Sem backdrop-filter aqui de propósito: a lâmina já desfoca o que está atrás,
     e desfoque dentro de desfoque custa caro na máquina sem mudar o que se vê. */
}

/* ---------------------------------------------------------------------------
 * 2. O CABEÇALHO da tela lateral.
 * ------------------------------------------------------------------------- */
.drawer .drawer-head {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--dr-tint) 14%, transparent), transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--dr-tint) 32%, transparent);
}
.drawer .drawer-head h2 {
  font-family: Inter, system-ui, sans-serif;
  font-variant-numeric: lining-nums;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -.01em;
  background: linear-gradient(100deg, #fff6e2, var(--dr-tint) 70%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.drawer .drawer-close {
  background: color-mix(in srgb, var(--dr-tint) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--dr-tint) 38%, transparent);
  transition: background .15s, transform .15s;
}
.drawer .drawer-close:hover {
  background: color-mix(in srgb, var(--dr-tint) 26%, transparent);
  transform: rotate(90deg);
}

/* Abas: pílulas de vidro, com a cor da tela na aba ligada. */
.drawer .drawer-tab {
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--dr-tint) 24%, transparent);
  background: rgba(255,255,255,.04);
  transition: background .15s, border-color .15s, color .15s;
}
.drawer .drawer-tab:hover { border-color: color-mix(in srgb, var(--dr-tint) 55%, transparent); }
.drawer .drawer-tab.is-on {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--dr-tint) 34%, transparent),
    color-mix(in srgb, var(--dr-tint2) 26%, transparent));
  border-color: color-mix(in srgb, var(--dr-tint) 70%, transparent);
  color: #fff6e2;
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--dr-tint) 60%, transparent);
}

/* A barra de rolagem do corpo, na cor da tela. */
.drawer .drawer-body { scrollbar-color: color-mix(in srgb, var(--dr-tint) 45%, transparent) transparent; }
.drawer .drawer-body::-webkit-scrollbar { width: 10px; }
.drawer .drawer-body::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--dr-tint) 40%, transparent);
  border-radius: 999px; border: 3px solid transparent; background-clip: content-box;
}

/* ---------------------------------------------------------------------------
 * 3. VER EM TELA CHEIA — a faixa que abre o recurso na página inteira dele.
 *    O destino é sempre a página que JÁ existe (a apostila de lei seca, a de
 *    prazos, o glossário, as fórmulas), nunca uma tela nova.
 * ------------------------------------------------------------------------- */
.rec-full {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 12px 14px; border-radius: 14px;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--dr-tint) 16%, transparent),
    rgba(10,6,8,.42));
  border: 1px solid color-mix(in srgb, var(--dr-tint) 32%, transparent);
}
.rec-full__tx { flex: 1 1 100%; font-size: 16px; color: var(--ink-dim); margin: 0; }
.rec-full__go {
  flex: 0 0 auto; text-decoration: none; white-space: nowrap;
  padding: 10px 18px; border-radius: 999px;
  font: 800 16px/1 Inter, sans-serif; font-variant-numeric: lining-nums;
  color: #1a1008;
  background: linear-gradient(160deg, #fff0c9, var(--dr-tint) 55%, var(--dr-tint2));
  border: 1px solid color-mix(in srgb, var(--dr-tint) 70%, transparent);
  box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--dr-tint) 70%, transparent);
  transition: transform .12s, filter .12s;
}
.rec-full__go:hover { transform: translateY(-1px); filter: brightness(1.06); }
.drawer .rec-iframe {
  border: 1px solid color-mix(in srgb, var(--dr-tint) 30%, transparent);
  border-radius: 14px;
  box-shadow: 0 18px 44px -18px rgba(0,0,0,.7);
}

/* ---------------------------------------------------------------------------
 * 4. MEU JEITO — a tela da frase, que é o cartão de visitas do produto.
 * ------------------------------------------------------------------------- */
#drawerPersonalizacao .drawer-sub { color: #f7e8c8; opacity: .92; }

/* O campo da frase: vidro âmbar, com foco que acende. */
#drawerPersonalizacao .mj-frase,
#drawerPersonalizacao .mj-field textarea.mj-frase {
  min-height: 168px; font-size: 17px; line-height: 1.6;
  border-radius: 16px; padding: 14px 16px;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(245,158,11,.10), transparent 60%),
    rgba(12,7,6,.52);
  border: 1px solid rgba(245,158,11,.32);
  box-shadow: inset 0 1px 0 rgba(255,240,201,.10);
  transition: border-color .15s, box-shadow .15s;
}
#drawerPersonalizacao .mj-frase:focus {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245,158,11,.18), inset 0 1px 0 rgba(255,240,201,.14);
}

/* Os modos prontos: cartõezinhos com brilho no alto e ícone que cresce. */
#drawerPersonalizacao .mj-modes { gap: 12px; }
#drawerPersonalizacao .mj-mode {
  position: relative; overflow: hidden;
  border-radius: 16px; padding: 16px 10px 14px;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(245,158,11,.20), transparent 65%),
    linear-gradient(180deg, rgba(30,18,12,.55), rgba(12,7,6,.55));
  border: 1px solid rgba(245,158,11,.26);
  box-shadow: inset 0 1px 0 rgba(255,240,201,.10);
}
#drawerPersonalizacao .mj-mode::before {
  content: ""; position: absolute; inset: -40% -40% auto -40%; height: 80%;
  background: radial-gradient(50% 60% at 50% 100%, rgba(255,231,168,.22), transparent 70%);
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
#drawerPersonalizacao .mj-mode:hover {
  transform: translateY(-3px);
  border-color: #f59e0b;
  box-shadow: 0 16px 34px -14px rgba(245,158,11,.6), inset 0 1px 0 rgba(255,240,201,.18);
}
#drawerPersonalizacao .mj-mode:hover::before { opacity: 1; }
#drawerPersonalizacao .mj-mode__ico { font-size: 30px; transition: transform .2s; }
#drawerPersonalizacao .mj-mode:hover .mj-mode__ico { transform: scale(1.12) rotate(-4deg); }

/* Botão de arrumar: o mesmo âmbar, com um pouco mais de presença. */
#drawerPersonalizacao .mj-go {
  border-radius: 999px; padding: 13px 26px;
  box-shadow: 0 10px 28px -10px rgba(245,158,11,.85), 0 0 20px rgba(245,158,11,.25);
  transition: transform .12s, filter .12s;
}
#drawerPersonalizacao .mj-go:hover:not([disabled]) { transform: translateY(-1px); filter: brightness(1.06); }
#drawerPersonalizacao .mj-mic { border-radius: 999px; background: rgba(255,255,255,.05); }

/* O painel dos controles, depois que a IA responde. */
#drawerPersonalizacao .mj-painel {
  border-top: 1px solid rgba(245,158,11,.28);
  margin-top: 20px; padding-top: 18px;
}
#drawerPersonalizacao .mj-resumo {
  font-size: 18px; font-style: normal; font-weight: 600; color: #fff3d6;
  padding: 12px 14px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(245,158,11,.18), rgba(12,7,6,.35));
  border: 1px solid rgba(245,158,11,.3);
}
#drawerPersonalizacao .mj-ctrl--tog,
#drawerPersonalizacao .mj-ctrl select,
#drawerPersonalizacao .mj-ctrl input[type=text] {
  border-radius: 12px;
  background: rgba(12,7,6,.48);
  border: 1px solid rgba(245,158,11,.22);
}
#drawerPersonalizacao .mj-fmt { border: 1px solid rgba(245,158,11,.24); background: rgba(12,7,6,.48); }
#drawerPersonalizacao .mj-aplicar {
  border-radius: 999px; padding: 15px 24px;
  box-shadow: 0 12px 30px -10px rgba(245,158,11,.85);
}

/* A frase da privacidade fica na linha de baixo, não colada no título. */
.mj-hint--bloco {
  display: block; margin-top: 4px;
  text-transform: none; letter-spacing: 0; font-weight: 400;
}

/* O "?" ao lado de "Descreva como você quer". Abre no passar do mouse, no
   clique e no foco pelo teclado, e some ao clicar fora. */
.mj-ajuda { position: relative; display: inline-block; margin-left: 8px; vertical-align: middle; }
.mj-ajuda__btn {
  appearance: none; cursor: help;
  width: 24px; height: 24px; border-radius: 999px; padding: 0;
  font: 800 16px/1 Inter, sans-serif;
  color: #1a1008;
  background: linear-gradient(160deg, #fff0c9, var(--dr-tint, #f59e0b));
  border: 1px solid color-mix(in srgb, var(--dr-tint, #f59e0b) 70%, transparent);
}
.mj-ajuda__balao {
  /* Cresce para a ESQUERDA: o "?" fica no meio da lâmina, e um balão que cresce
     para a direita sai pela borda da tela. */
  position: absolute; z-index: 30; right: 0; left: auto; top: calc(100% + 8px);
  width: min(320px, 72vw);
  display: none;
  padding: 12px 14px; border-radius: 14px;
  font: 400 16px/1.5 Inter, sans-serif; text-transform: none; letter-spacing: 0;
  color: #fff6e6;
  background: rgba(24,14,10,.97);
  border: 1px solid color-mix(in srgb, var(--dr-tint, #f59e0b) 55%, transparent);
  box-shadow: 0 18px 40px -14px rgba(0,0,0,.8);
}
.mj-ajuda:hover .mj-ajuda__balao,
.mj-ajuda__btn:focus-visible + .mj-ajuda__balao,
.mj-ajuda__balao.is-on { display: block; }

/* A linha de ajuda da chave: onde criar, com o vídeo e o endereço da Mistral. */
.mj-chave-ajuda {
  margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink-dim);
}
.mj-chave-ajuda a { color: #fcd34d; text-decoration: underline; text-underline-offset: 2px; }
.mj-chave-ajuda a:hover { color: #fff3d6; }

/* ---------------------------------------------------------------------------
 * 4-B. A TELA LATERAL NÃO SE DEIXA REPINTAR POR NINGUÉM.
 *
 * Quando a pessoa estuda sem pintura, o site inteiro entra em
 * html[data-skin="clean"], que é azul-marinho: campo #1e293b e link #60a5fa.
 * Dentro do Meu jeito isso saía azul sobre o cartão âmbar, que é o defeito que
 * mais irrita o dono. A tela lateral tem paleta própria e ela manda aqui, nas
 * duas peles. O !important existe porque a régua da pele clean vem com
 * html[data-skin=...] na frente e ganharia de qualquer seletor honesto.
 * ⚠️ E o seletor NÃO pode exigir html[data-skin]: quando a pessoa escolhe uma
 * pintura, o seletor de tema REMOVE esse atributo, e aí a regra deixava de valer
 * justamente na pele bonita. Medido em 10/08/2026: com pintura, o link "aqui"
 * saía em rgb(138,94,31), contraste 3.6.
 * ------------------------------------------------------------------------- */
.drawer .mj-chave-ajuda a { color: #fcd34d !important; }
.drawer .mj-chave-ajuda a:hover { color: #fff3d6 !important; }
.drawer .mj-field input[type=text],
.drawer .mj-field textarea,
.drawer .mj-ctrl select,
.drawer .mj-ctrl input[type=text] {
  background: rgba(12,7,6,.55) !important;
  color: var(--ink) !important;
  border-color: color-mix(in srgb, var(--dr-tint) 32%, transparent) !important;
}
.drawer .mj-ctrl--tog { background: rgba(12,7,6,.42) !important; }
.drawer .mjc,
.drawer .mjc * { color: var(--ink); }
.drawer .mjc a { color: #fcd34d !important; }
/* O bloco do "o que você declarou saber" traz superfícies de tema CLARO
   (--mjc-campo é quase branco quando não há data-theme). Dentro da tela lateral
   a tinta é clara, e claro sobre claro some: então a superfície dele também vem
   para o escuro, que é o par certo. Fundo e tinta andam sempre juntos. */
.drawer .mjc {
  --mjc-campo: rgba(12,7,6,.55);
  --mjc-linha: color-mix(in srgb, var(--dr-tint) 32%, transparent);
  --mjc-ac: #fcd34d;
}
.drawer .mjc .mjc-btn { color: #2a1a06 !important; }

/* ---------------------------------------------------------------------------
 * 4-C. O CARTÃO "RESPONDER NORMAL" DA TELA DE JOGOS.
 *
 * Dos 17 cartões da grade, 16 têm capa desenhada e este tem um emoji no lugar,
 * centralizado na altura inteira do cartão. Medido em 10/08/2026: o emoji ia de
 * 366 a 503 e o título de 410 a 503, ou seja, 93 px em cima da palavra
 * "Responder normal". O emoji sobe para a metade de cima, que é onde as capas
 * dos outros também não têm texto.
 * ------------------------------------------------------------------------- */
#drawerJogos .jogo-tile__icon {
  align-items: start;
  padding-top: 14px;
  font-size: 34px;
}

/* ---------------------------------------------------------------------------
 * 5. O PLACEHOLDER QUE ALTERNA (meu-jeito-placeholder.js escreve aqui dentro).
 *    Fica por cima do campo, apagado, e some no primeiro caractere.
 * ------------------------------------------------------------------------- */
.mj-frase-wrap { position: relative; }
.mj-ghost {
  position: absolute; inset: 14px 18px auto 17px;
  pointer-events: none;
  font: 500 17px/1.6 Inter, system-ui, sans-serif;
  color: var(--ink-faint, #a89e90);
  opacity: .82;
  transition: opacity .45s ease, transform .45s ease;
}
.mj-ghost.is-indo { opacity: 0; transform: translateY(-6px); }
.mj-ghost__cursor {
  display: inline-block; width: 2px; height: 1.05em; margin-left: 2px;
  vertical-align: -2px; background: currentColor;
  animation: mj-pisca 1.05s steps(2, start) infinite;
}
@keyframes mj-pisca { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .mj-ghost, .mj-ghost.is-indo { transition: none; }
  .mj-ghost__cursor { animation: none; }
  .drawer::before { opacity: .6; }
}