/* =========================================================================
   CONSCIENTE UI — Design Tokens v2 (identidade +ComCiência)
   Paleta: Azul Consciência / Verde Evolução / Amarelo Atenção / Coral Cuidado
   Tipografia de produto: Source Sans 3 (UI) + Newsreader (momentos de sentido) + JetBrains Mono (técnico)
   Marca (logo): Rubik — ativo fixo, não segue os tokens de UI abaixo
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;500;700&family=Source+Sans+3:wght@400;500;600;700&family=Newsreader:ital,wght@0,500;0,600;1,500&family=Atkinson+Hyperlegible:wght@400;700&family=JetBrains+Mono:wght@500;600&display=swap');

:root {
  --cui-bg: #F7F6F2; --cui-surface: #FFFFFF; --cui-surface-2: #EFEDE6;
  --cui-ink: #202431; --cui-ink-soft: #626878; --cui-ink-faint: #8A8FA0;
  --cui-line: #D9DBE2;
  --cui-primary: #4054A3; --cui-primary-ink: #26366F; --cui-primary-soft: #E8EBF7;
  --cui-positive: #26366F; --cui-positive-bg: #E8EBF7;
  --cui-attention: #C96745; --cui-attention-bg: #F5E3DD;
  --cui-critical: #C96745; --cui-critical-bg: #F5E3DD;
  --cui-v1: #3C8B61; --cui-v1-bg: #E4F1E9;
  --cui-v2: #D89A3D; --cui-v2-bg: #F7ECD9;
  --cui-shadow: 0 1px 2px rgba(32,36,49,.06), 0 8px 20px -10px rgba(32,36,49,.16);
  --cui-radius-sm: 12px; --cui-radius-md: 11px; --cui-radius-lg: 16px; --cui-radius-modal: 20px;
  --cui-focus-ring: 0 0 0 2px var(--cui-bg), 0 0 0 4px var(--cui-primary);
  --cui-font-display: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --cui-font-body: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --cui-font-personality: 'Newsreader', Georgia, serif;
  --cui-font-accessible: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;
  --cui-font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --cui-font-brand: 'Rubik', 'Segoe UI', system-ui, sans-serif;
  --cui-text-xs: 0.78rem; --cui-text-sm: 0.88rem; --cui-text-base: 1rem;
  --cui-text-lg: 1.15rem; --cui-text-xl: 1.5rem; --cui-text-2xl: 2rem;
  --cui-space-1: 4px; --cui-space-2: 8px; --cui-space-3: 12px; --cui-space-4: 16px;
  --cui-space-5: 24px; --cui-space-6: 32px; --cui-space-7: 48px;
  --cui-tap-min: 48px;
  --brand-bg: #FFFFFF; --brand-word: #09090B; --brand-plus: #00A06A;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cui-bg: #14161B; --cui-surface: #1C1E27; --cui-surface-2: #242730;
    --cui-ink: #ECEDEE; --cui-ink-soft: #A7ADBB; --cui-ink-faint: #767C8A;
    --cui-line: #2C2F3D;
    --cui-primary: #97A6DE; --cui-primary-ink: #C2CBEF; --cui-primary-soft: #232A45;
    --cui-positive: #C2CBEF; --cui-positive-bg: #232A45;
    --cui-attention: #E29A82; --cui-attention-bg: #33231D;
    --cui-critical: #E29A82; --cui-critical-bg: #33231D;
    --cui-v1: #7FC49B; --cui-v1-bg: #1C2A22;
    --cui-v2: #E8BE7D; --cui-v2-bg: #332A19;
    --cui-shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 20px -10px rgba(0,0,0,.5);
    --brand-bg: #18181B; --brand-word: #FFFFFF; --brand-plus: #00BC7D;
  }
}
:root[data-theme="dark"] {
  --cui-bg: #14161B; --cui-surface: #1C1E27; --cui-surface-2: #242730;
  --cui-ink: #ECEDEE; --cui-ink-soft: #A7ADBB; --cui-ink-faint: #767C8A;
  --cui-line: #2C2F3D;
  --cui-primary: #97A6DE; --cui-primary-ink: #C2CBEF; --cui-primary-soft: #232A45;
  --cui-positive: #C2CBEF; --cui-positive-bg: #232A45;
  --cui-attention: #E29A82; --cui-attention-bg: #33231D;
  --cui-critical: #E29A82; --cui-critical-bg: #33231D;
  --cui-v1: #7FC49B; --cui-v1-bg: #1C2A22;
  --cui-v2: #E8BE7D; --cui-v2-bg: #332A19;
  --cui-shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 20px -10px rgba(0,0,0,.5);
  --brand-bg: #18181B; --brand-word: #FFFFFF; --brand-plus: #00BC7D;
}
[data-reading-mode="facilitada"] { font-family: var(--cui-font-accessible); }
[data-reading-mode="facilitada"] body { font-size: 1.08em; line-height: 1.7; }
* { box-sizing: border-box; }
body {
  background: var(--cui-bg); color: var(--cui-ink);
  font-family: var(--cui-font-body); font-size: var(--cui-text-base); line-height: 1.55;
}
h1, h2, h3, h4 { font-family: var(--cui-font-display); font-weight:700; color: var(--cui-ink); margin: 0; }
:focus-visible { outline: none; box-shadow: var(--cui-focus-ring); border-radius: var(--cui-radius-sm); }
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }

.ic-svg{ width:18px; height:18px; display:inline-block; vertical-align:middle; flex:none; }

.cui-btn {
  font-family: var(--cui-font-body); font-weight: 600; font-size: var(--cui-text-sm);
  min-height: var(--cui-tap-min); min-width: var(--cui-tap-min);
  padding: 10px 20px; border-radius: var(--cui-radius-md); border: 1.5px solid transparent;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .08s ease, opacity .12s ease;
}
.cui-btn:active { transform: scale(0.97); }
.cui-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.cui-btn--primary { background: var(--cui-primary); color: #FFFFFF; border-color: var(--cui-primary); }
.cui-btn--secondary { background: var(--cui-primary-soft); color: var(--cui-primary-ink); border-color: transparent; }
.cui-btn--success { background: var(--cui-v1); color: #FFFFFF; border-color: var(--cui-v1); }
.cui-btn--ghost { background: transparent; color: var(--cui-ink-soft); border-color: transparent; }
.cui-btn--destructive { background: var(--cui-critical-bg); color: var(--cui-critical); border-color: var(--cui-critical); }

.cui-card { background: var(--cui-surface); border: 1px solid var(--cui-line); border-radius: var(--cui-radius-lg); box-shadow: var(--cui-shadow); padding: var(--cui-space-5); }
.cui-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--cui-font-mono); font-size: var(--cui-text-xs); font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.cui-pill--v1 { background: var(--cui-v1-bg); color: var(--cui-v1); }
.cui-pill--v2 { background: var(--cui-v2-bg); color: var(--cui-v2); }
.cui-pill--positive { background: var(--cui-positive-bg); color: var(--cui-positive); }
.cui-pill--attention { background: var(--cui-attention-bg); color: var(--cui-attention); }

/* ---- sistema de status (4 estados) ---- */
.status-pill{ display:inline-flex; align-items:center; gap:6px; font-family:var(--cui-font-mono); font-size:.7rem; font-weight:600; padding:4px 11px; border-radius:999px; white-space:nowrap; }
.status-pill::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.status-programada{ background:var(--cui-primary-soft); color:var(--cui-primary-ink); }
.status-ativa{ background:var(--cui-v1-bg); color:var(--cui-v1); }
.status-concluida{ background:var(--cui-v2-bg); color:var(--cui-v2); }
.status-encerrada{ background:var(--cui-surface-2); color:var(--cui-ink-faint); }

.cui-input {
  width: 100%; min-height: var(--cui-tap-min); font-family: var(--cui-font-body); font-size: var(--cui-text-base);
  padding: 10px 14px; border-radius: var(--cui-radius-sm); border: 1.5px solid var(--cui-line);
  background: var(--cui-surface); color: var(--cui-ink);
}
.cui-input:focus-visible { border-color: var(--cui-primary); }

.cui-toggle { display: inline-flex; align-items: center; gap: var(--cui-space-3); min-height: var(--cui-tap-min); }
.cui-toggle-track { width: 44px; height: 24px; border-radius: 999px; background: var(--cui-surface-2); border: 1.5px solid var(--cui-line); position: relative; cursor: pointer; }
.cui-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--cui-primary); transition: transform .15s ease; }
.cui-toggle[aria-checked="true"] .cui-toggle-thumb { transform: translateX(20px); }

.cui-ring { --pct: 1; width: 96px; height: 96px; border-radius: 50%; position: relative;
  background: conic-gradient(var(--cui-v1) calc(var(--pct) * 360deg), var(--cui-surface-2) 0);
  display: flex; align-items: center; justify-content: center; transition: background .3s linear;
}
.cui-ring::before {
  content: attr(data-label); position: absolute; inset: 8px; border-radius: 50%; background: var(--cui-surface);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--cui-font-mono); font-size: var(--cui-text-lg); font-weight: 600; color: var(--cui-ink);
}
.cui-stat { display: flex; flex-direction: column; gap: 2px; }
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; }
.stat-grid .cui-stat{ background:var(--cui-surface); border:1px solid var(--cui-line); border-radius:var(--cui-radius-lg); box-shadow:var(--cui-shadow); padding:var(--cui-space-5); }
.cui-stat .v { font-family: var(--cui-font-mono); font-weight: 600; font-size: var(--cui-text-2xl); color: var(--cui-ink); font-variant-numeric: tabular-nums; }
.cui-stat .l { font-size: var(--cui-text-xs); color: var(--cui-ink-faint); }
.cui-empty, .cui-error { display: flex; flex-direction: column; align-items: center; gap: var(--cui-space-3); padding: var(--cui-space-6); text-align: center; color: var(--cui-ink-soft); }
.cui-error { color: var(--cui-critical); }

body{ margin:0; }
.shell{ max-width:480px; margin:0 auto; min-height:100vh; background:var(--cui-bg); display:flex; flex-direction:column; }
.shell.shell--wide{ max-width:760px; }

/* ---- splash de abertura ---- */
.splash{ position:fixed; inset:0; z-index:999; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; background:var(--brand-bg); padding:24px; text-align:center; transition:opacity .4s ease, visibility .4s ease; }
.splash.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.splash-mark{ width:56px; height:56px; animation:splash-pop .55s cubic-bezier(.2,.9,.3,1.2); }
.splash-word{ font-family:var(--cui-font-brand); font-size:2rem; display:flex; align-items:baseline; gap:1px; animation:splash-fade .5s ease .1s both; }
.splash-word .plus{ color:var(--brand-plus); font-weight:700; }
.splash-word .w-com{ color:var(--brand-word); font-weight:300; }
.splash-word .w-ciencia{ color:var(--brand-word); font-weight:700; }
.splash-tagline{ font-family:var(--cui-font-personality); font-style:italic; font-size:.98rem; line-height:1.55; color:var(--cui-ink-soft); max-width:320px; animation:splash-fade .6s ease .2s both; }
@keyframes splash-pop{ from{ opacity:0; transform:scale(.8); } to{ opacity:1; transform:scale(1); } }
@keyframes splash-fade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){ .splash-mark, .splash-word, .splash-tagline{ animation:none; } }

/* ---- barra de topo global: troca de persona + tema + fonte ---- */
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 14px; border-bottom:1px solid var(--cui-line); background:var(--cui-surface); position:sticky; top:0; z-index:10; }
.persona-switch{ display:flex; gap:4px; background:var(--cui-surface-2); border-radius:999px; padding:3px; }
.persona-switch button{ font-family:var(--cui-font-body); font-size:.76rem; font-weight:600; padding:6px 12px; border-radius:999px; border:none; background:transparent; color:var(--cui-ink-faint); cursor:pointer; min-height:32px; }
.persona-switch button[aria-pressed="true"]{ background:var(--cui-primary); color:#fff; }
.topbar-actions{ display:flex; gap:6px; }
.icon-btn{ width:36px; height:36px; border-radius:var(--cui-radius-sm); border:1px solid var(--cui-line); background:var(--cui-surface); color:var(--cui-ink-soft); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1rem; }

/* ---- header de tela ---- */
.screen-head{ padding:18px 18px 6px; }
.eyebrow{ font-family:var(--cui-font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--cui-ink-faint); }
.screen-body{ padding:0 18px 90px; display:flex; flex-direction:column; gap:14px; flex:1; }

/* ---- app container ---- */
.app{ display:none; flex-direction:column; min-height:calc(100vh - 53px); position:relative; }
.app.is-active{ display:flex; }
.screen{ display:none; flex-direction:column; flex:1; animation:fadein .18s ease; }
.screen.is-active{ display:flex; }
@keyframes fadein{ from{opacity:0} to{opacity:1} }

/* ---- bottom nav ---- */
.bottomnav{ position:sticky; bottom:0; display:flex; border-top:1px solid var(--cui-line); background:var(--cui-surface); }
.bottomnav button{ flex:1; min-height:56px; border:none; background:transparent; color:var(--cui-ink-faint); font-family:var(--cui-font-body); font-size:.72rem; font-weight:600; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px; justify-content:center; }
.bottomnav button[aria-current="page"]{ color:var(--cui-primary); }
.bottomnav button .ic{ display:flex; }

/* ---- utilitários de conteúdo ---- */
.row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.stack{ display:flex; flex-direction:column; gap:10px; }
.list-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 0; border-bottom:1px solid var(--cui-line); }
.list-item:last-child{ border-bottom:none; }
.muted{ color:var(--cui-ink-soft); font-size:.9rem; }
.faint{ color:var(--cui-ink-faint); font-size:.78rem; }
.divider{ height:1px; background:var(--cui-line); border:none; margin:2px 0; }
select.cui-input{ appearance:none; }
textarea.cui-input{ min-height:90px; resize:vertical; font-family:var(--cui-font-body); }
.toast{ position:fixed; left:50%; bottom:90px; transform:translateX(-50%); background:var(--cui-ink); color:var(--cui-bg); padding:10px 18px; border-radius:999px; font-size:.85rem; opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:50; max-width:88vw; text-align:center; }
.toast.show{ opacity:1; }
table.escola-table{ width:100%; border-collapse:collapse; font-size:.85rem; }
table.escola-table th{ text-align:left; font-family:var(--cui-font-mono); font-size:.66rem; text-transform:uppercase; color:var(--cui-ink-faint); padding:8px 6px; border-bottom:1px solid var(--cui-line); }
table.escola-table td{ padding:9px 6px; border-bottom:1px solid var(--cui-line); }
.checkbox-row{ display:flex; align-items:flex-start; gap:10px; padding:8px 0; }
.checkbox-row input{ margin-top:3px; width:18px; height:18px; }

/* ---- Agentes de estudo (chat escopado por disciplina) ---- */
.scope-banner{ display:flex; align-items:center; gap:8px; border-radius:var(--cui-radius-sm); padding:8px 12px; font-size:.78rem; }
.scope-banner.on{ background:var(--cui-v1-bg); border:1px solid var(--cui-v1); color:var(--cui-v1); }
.scope-banner.off{ background:var(--cui-v2-bg); border:1px solid var(--cui-v2); color:var(--cui-v2); }
.chat-log{ flex:1; display:flex; flex-direction:column; gap:10px; overflow-y:auto; padding:4px 0; min-height:160px; }
.bubble{ max-width:86%; padding:10px 13px; border-radius:14px; font-size:.88rem; line-height:1.4; }
.bubble--aluno{ align-self:flex-end; background:var(--cui-primary); color:#fff; border-bottom-right-radius:4px; }
.bubble--agente{ align-self:flex-start; background:var(--cui-surface); border:1px solid var(--cui-line); color:var(--cui-ink); border-bottom-left-radius:4px; }
.bubble--agente .who{ display:block; font-family:var(--cui-font-mono); font-size:.64rem; color:var(--cui-v1); margin-bottom:4px; text-transform:uppercase; letter-spacing:.04em; }
.bubble--redirect{ background:var(--cui-attention-bg); border-color:var(--cui-attention); }
.bubble--redirect .who{ color:var(--cui-attention); }
.read-more{ margin-top:8px; padding-top:8px; border-top:1px dashed var(--cui-line); font-size:.8rem; color:var(--cui-ink-soft); }
.read-more b{ color:var(--cui-ink); }
.chat-input-row{ display:flex; gap:8px; padding-top:8px; }
.chat-input-row input{ flex:1; }
.chat-input-row button{ min-width:44px; padding:10px 14px; }
.chip-row{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{ font-size:.76rem; border:1px solid var(--cui-line); background:var(--cui-surface-2); color:var(--cui-ink-soft); border-radius:999px; padding:6px 12px; cursor:pointer; }
.chip:hover{ border-color:var(--cui-primary); color:var(--cui-primary-ink); }

/* ---- indicadores / gráficos simples (painel da escola e do professor) ---- */
.hbar-row{ display:grid; grid-template-columns:1fr; gap:4px; padding:8px 0; border-bottom:1px solid var(--cui-line); }
.hbar-row:last-child{ border-bottom:none; }
.hbar-label{ display:flex; justify-content:space-between; font-size:.84rem; }
.hbar-track{ height:10px; background:var(--cui-surface-2); border-radius:999px; overflow:hidden; }
.hbar-fill{ height:100%; background:var(--cui-v2); border-radius:999px; }
.vbars{ display:flex; align-items:flex-end; gap:14px; height:120px; }
.vbars .pair{ display:flex; align-items:flex-end; gap:4px; flex:1; height:100%; }
.bar-col{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; flex:1; height:100%; gap:4px; }
.bar-val{ font-size:.64rem; font-family:var(--cui-font-mono); color:var(--cui-ink-soft); }
.vbars .bar{ width:100%; border-radius:4px 4px 0 0; min-height:4px; }
.vbars .bar.v1{ background:var(--cui-v1); }
.vbars .bar.v2{ background:var(--cui-v2); }
.vbars-labels{ display:flex; gap:14px; }
.vbars-labels span{ flex:1; text-align:center; font-size:.68rem; color:var(--cui-ink-faint); }
.legend{ display:flex; gap:14px; font-size:.76rem; color:var(--cui-ink-soft); }
.legend .dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:5px; }

/* ---- validação com justificativa inline ---- */
.reject-form{ display:flex; flex-direction:column; gap:8px; width:100%; padding:10px 0; }
.status-banner{ display:flex; flex-direction:column; gap:4px; padding:10px 12px; border-radius:var(--cui-radius-sm); font-size:.82rem; }
.status-banner.aprovado{ background:var(--cui-v1-bg); color:var(--cui-v1); }
.status-banner.rejeitado{ background:var(--cui-attention-bg); color:var(--cui-attention); }

/* ---- extrato com status (aluno.pontos) ---- */
.extrato-item{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:12px 0; border-bottom:1px solid var(--cui-line); }
.extrato-item:last-child{ border-bottom:none; }
.extrato-item .titulo{ font-size:.92rem; color:var(--cui-ink); font-weight:600; display:block; margin-bottom:4px; }
.extrato-item .quando{ font-size:.76rem; color:var(--cui-ink-faint); display:block; margin-bottom:6px; }
.extrato-item .valor{ font-family:var(--cui-font-mono); font-weight:600; font-size:.92rem; color:var(--cui-ink); white-space:nowrap; }
.extrato-item .valor.pendente{ color:var(--cui-ink-faint); }

/* ---- logomarca (ícone + wordmark), reutilizada fora do splash ---- */
.brand-lockup{ display:inline-flex; align-items:center; gap:8px; justify-content:center; }
.brand-lockup-mark{ width:22px; height:22px; flex:none; }
.brand-lockup-word{ font-family:var(--cui-font-brand); font-size:1.05rem; display:inline-flex; gap:1px; align-items:baseline; }
.brand-lockup-word .plus{ color:var(--brand-plus); font-weight:700; }
.brand-lockup-word .w-com{ color:var(--brand-word); font-weight:300; }
.brand-lockup-word .w-ciencia{ color:var(--brand-word); font-weight:700; }