/**
 * Shell dos dois apps — extraído dos estilos inline do protótipo do Claude Design.
 *
 * O protótipo põe tudo inline porque é um arquivo só; aqui as mesmas regras viram
 * classes para não repetir 40 vezes a mesma declaração. Os VALORES são os do
 * design: nada foi "melhorado" no caminho — quando algo aqui diverge do protótipo
 * é bug, não gosto.
 */

@import url('tokens/fonts.css');
@import url('tokens/colors.css');
@import url('tokens/typography.css');
@import url('tokens/spacing.css');
@import url('tokens/effects.css');

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-background);      /* o overscroll móvel mostra o body */
  font-family: var(--font-body);
  color: var(--color-on-surface);
}
body.ceb-dark { background: #131514; }

/* ── Shell mobile-first ──────────────────────────────────────────────────
   O app ocupa a viewport inteira — sem moldura desenhada: moldura é coisa do
   /canvas.html (demo). Em tela larga ele vira uma coluna central de 520px,
   como web app móvel se comporta em desktop. */
.ceb-app {
  --on-tonal: #7a2900;
  min-height: 100dvh;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  display: flex; flex-direction: column;
  background: var(--color-background);
  color: var(--color-on-surface);
  font-family: var(--font-body);
  position: relative;
}
@media (min-width: 521px) {
  /* Desktop: a coluna do app se destaca do fundo — sem fingir ser um celular. */
  body.pagina-app { background: #f0eee9; }
  body.pagina-app.ceb-dark { background: #0c0e0d; }   /* o dark vence o fundo claro */
  body.pagina-app .ceb-app { box-shadow: 0 0 48px rgba(26, 28, 28, 0.10); }
}
.ceb-app *::-webkit-scrollbar { display: none; }

/* Modo escuro — valores idênticos aos do protótipo. */
.ceb-dark {
  --color-background: #131514; --color-surface: #131514;
  --color-surface-container-lowest: #1e2120; --color-surface-container-low: #272a29;
  --color-surface-container: #2c2f2e; --color-surface-container-high: #343736;
  --color-on-surface: #f0efed; --color-on-surface-variant: #d3bdb3;
  --color-outline-variant: #4a3d38; --color-primary: #ff946c; --color-primary-fixed: #3d2317;
  --badge-brand-bg: #3d2317; --badge-brand-fg: #ffb59a;
  --badge-active-bg: #0d2b21; --badge-active-fg: #4ade80;
  --badge-info-bg: #16233d; --badge-info-fg: #8fb8ff;
  --badge-error-bg: #3d1715; --badge-error-fg: #ff9a92;
  --badge-inactive-bg: #2c2f2e; --badge-inactive-fg: #8a8a86;
  --nav-active-bg: rgba(61, 35, 23, 0.6);
  --shadow-ambient: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* ── Estrutura ───────────────────────────────────────────────────────── */
.tela { flex: 1; overflow-y: auto; padding: 16px 16px 24px; display: flex; flex-direction: column; gap: 14px; font-size: 15px; }
.topo {
  display: flex; align-items: center; gap: 12px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 10px;
  background: var(--color-surface); border-bottom: 1px solid var(--color-outline-variant);
}
.topo .titulo { font-family: var(--font-headline); font-size: 19px; font-weight: 800; letter-spacing: -0.015em; }

/* ── Cards ───────────────────────────────────────────────────────────── */
.cartao {
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-card);
  padding: 16px;
  box-shadow: var(--shadow-ambient);
  border: none;                              /* manual: card CEB não tem borda */
}
.cartao-tonal { background: var(--color-primary-fixed); color: var(--on-tonal); }
.cartao-hero { background: var(--gradient-hero); color: #fff; }

/* ── Botões ──────────────────────────────────────────────────────────── */
.btn {
  border: none; border-radius: var(--radius-button);
  padding: 12px 20px;
  min-height: 44px;                               /* alvo de toque */
  font-family: var(--font-headline); font-weight: 700; font-size: 15px;
  cursor: pointer;
  transition: box-shadow .15s ease, opacity .15s ease;
}

/* Chips de filtro (aba Atividades do aluno — o design original os tinha). */
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.chips button {
  border: none; border-radius: var(--radius-full);
  padding: 8px 14px; min-height: 36px;
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  background: var(--color-surface-container); color: var(--color-on-surface-variant);
  cursor: pointer; white-space: nowrap;
}
.chips button[aria-pressed='true'] { background: var(--badge-brand-bg); color: var(--badge-brand-fg); }

/* Avatar clicável do topo (perfil do professor, como no design). */
.avatar-btn { border: none; padding: 0; background: transparent; cursor: pointer; }
.btn-primario { background: var(--gradient-hero); color: #fff; padding: 15px 20px; }
.btn-primario:hover { box-shadow: var(--shadow-tonal-hover); }
.btn-secundario { background: var(--color-surface-container-lowest); color: var(--color-on-surface); box-shadow: var(--shadow-ambient); }
.btn-fantasma { background: transparent; color: var(--color-primary); font-family: var(--font-body); font-weight: 600; font-size: 13px; padding: 8px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Campos ──────────────────────────────────────────────────────────── */
.campo {
  width: 100%;
  background: var(--color-surface-container-low);
  border: none; border-radius: var(--radius-input);
  padding: 14px 16px;
  font-family: var(--font-body); font-weight: 600; font-size: 16px;
  color: var(--color-on-surface);
  outline: none;
}
.campo:focus { background: var(--color-surface-container-lowest); box-shadow: var(--focus-ring); }

/* ── Badges ──────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700;
  padding: 4px 12px; border-radius: var(--radius-full);
  font-family: var(--font-body); white-space: nowrap;
}
.badge-marca { background: var(--badge-brand-bg); color: var(--badge-brand-fg); }
.badge-ok { background: var(--badge-active-bg); color: var(--badge-active-fg); }
.badge-info { background: var(--badge-info-bg); color: var(--badge-info-fg); }
.badge-erro { background: var(--badge-error-bg); color: var(--badge-error-fg); }
.badge-neutro { background: var(--badge-inactive-bg); color: var(--badge-inactive-fg); }

/* ── Avatar ──────────────────────────────────────────────────────────── */
.avatar {
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: var(--radius-full);
  background: var(--color-primary-fixed); color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-headline); font-weight: 800; font-size: 14px;
}

/* ── Navegação inferior ──────────────────────────────────────────────── */
.nav {
  display: flex; justify-content: space-around; align-items: center;
  padding: 8px 6px calc(10px + env(safe-area-inset-bottom, 4px));
  background: var(--color-surface);
  border-top: 1px solid var(--color-outline-variant);
}
.nav button {
  background: transparent; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 56px; min-height: 48px;              /* alvo de toque real */
  justify-content: center;
  padding: 6px 12px; border-radius: var(--radius-2xl);
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  color: var(--color-on-surface-variant);
}
.nav button[aria-current='page'] {
  background: var(--nav-active-bg); color: var(--color-primary); font-weight: 700;
}

/* ── Utilitários ─────────────────────────────────────────────────────── */
.linha { display: flex; align-items: center; gap: 10px; }
.entre { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.col { display: flex; flex-direction: column; }
.muted { color: var(--color-on-surface-variant); }
.cap { font-size: var(--text-caption-size); }
.h4 { font-family: var(--font-headline); font-size: var(--text-h4-size); font-weight: 700; letter-spacing: -0.015em; }
.clicavel { cursor: pointer; text-align: left; width: 100%; }
.clicavel:hover { box-shadow: var(--shadow-tonal); }

/* ── Barra de nota ───────────────────────────────────────────────────── */
.barra { height: 6px; border-radius: var(--radius-full); background: var(--color-surface-container-high); overflow: hidden; }
.barra > i { display: block; height: 100%; border-radius: var(--radius-full); background: var(--gradient-hero); }

/* Aviso de dado não confiável — existe para NÃO passar despercebido. */
.ressalva {
  background: var(--badge-error-bg); color: var(--badge-error-fg);
  border-radius: var(--radius-2xl); padding: 12px 14px;
  font-size: 12px; line-height: 1.5; font-weight: 600;
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }