/* Componentes do Maano. Só o que se repete em mais de um ecrã vive aqui;
   o resto fica em utilitários Tailwind na própria página. */

:root {
  --esp-xs:4px; --esp-sm:8px; --esp-md:16px; --esp-lg:24px; --esp-xl:32px;
  --raio-cartao:24px; --raio-cartao-2:20px; --raio-input:16px; --raio-pilula:999px;
  --f-titulo-sistema:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --txt-display:32px; --txt-titulo:24px; --txt-seccao:19px;
  --txt-corpo:15px; --txt-aux:13px; --txt-etiqueta:11px;
  --elev-0:none;
  --elev-1:0 1px 2px rgba(28,43,34,.05),0 6px 14px -8px rgba(28,43,34,.12);
  --elev-2:0 8px 16px rgba(28,43,34,.12),0 24px 48px -12px rgba(28,43,34,.24);
  --floresta: #2E4A3B;
  --pinho: #4A6B54;
  --salvia: #7FA88C;
  --menta: #DDEBE0;
  --esmeralda: #2FA36B;
  --papel: #F5F7F2;
  --tinta: #1C2B22;
  --muted: #5F6E64;
  --muted-dark: #9FBBA8;
  --perigo: #BA1A1A;
  --aviso: #8A5A1B;

  --portugues:#D97652; --portugues-dark:#4A2013;
  --historia:#E0A339; --historia-dark:#4A3208;
  --matematica:#4E7CA1; --matematica-dark:#14293A;
  --quimica:#2FA39A; --quimica-dark:#0E3B36;
  --fisica:#8A5FA6; --fisica-dark:#2C1740;
  --biologia:#6DA65B; --biologia-dark:#1E3A14;
  --ingles:#CE6E86; --ingles-dark:#4A1528;
  --geografia:#A8894A; --geografia-dark:#3A2D10;
  --educacao-fisica:#C1443A; --educacao-fisica-dark:#3D140F;
  --artes:#8B9A46; --artes-dark:#2E340F;
  --ciencias:#3F9B6E; --ciencias-dark:#123322;
  --informatica:#5CAE8E; --informatica-dark:#1C3A2E;
  --espanhol:#3F94A0; --espanhol-dark:#123337;
  --economia:#2E6B78; --economia-dark:#0E2429;
  --musica:#6E7FC2; --musica-dark:#1E2340;
  --filosofia:#5C57A6; --filosofia-dark:#1C1940;
  --sociologia:#8A3B54; --sociologia-dark:#2E1119;
  --frances:#B57A94; --frances-dark:#3D2530;
  --direito:#5C6B78; --direito-dark:#1C2329;
  --redacao:#9C7A5C; --redacao-dark:#332619;
  --paper1:#EDE6D8; --paper2:#D9E4EC; --paper3:#EAD5DC;

  /* Fundo do sistema: 50%/50% branco e --menta
     (2%→4%→9%→19%→39%→50%, a pedido). A esta proporção já é a própria
     --menta a meio caminho para branco, não um "quase branco" com um
     toque — deixou de imitar papel e passou a ser um fundo verde claro
     a sério. Calculado a partir do token, não fixado num hex. */
  --fundo:color-mix(in srgb, #fff 50%, var(--menta) 50%);
  --superficie:#fff;
  --superficie-elevada:#fff;
  --texto:var(--tinta);
  --texto-secundario:var(--muted);
  --acento:var(--floresta);
  --primaria:var(--floresta);
  --sobre-primaria:#fff;
  --contorno:#5F8F70;
  --realce:var(--menta);
  color-scheme:light;

  /* Textura de fundo: grelha de pontos sobre --fundo, à la Stitch.
     Fica atrás de tudo o que tem superfície própria (cartões, sidebar,
     titlebar), por isso só se vê nas goteiras. --floresta a 13% lê-se
     como grelha calma sem virar ruído. Aplicada no <body> e no
     .auth-scene; o onboarding é a exceção (fundo limpo).
     Para regular: mexe na opacidade (.13) e no espaçamento (22px). */
  --pontos-fundo:radial-gradient(circle, rgba(46,74,59,.13) 1.2px, transparent 1.7px);
  --pontos-espaco:16px 16px;

  --sh-soft:var(--elev-1);
  --sh-ambient:var(--elev-1);
  --sh-lift:var(--elev-2);
}

* { -webkit-font-smoothing: antialiased; }

/* Semantic surfaces also cover markup generated by the page scripts. */
.bg-white { background-color:var(--superficie) !important; }
.text-floresta { color:var(--acento) !important; }
.bg-menta .text-floresta, .bg-menta.text-floresta { color:var(--floresta) !important; }
.bg-menta, .uncertain, .wizard__choice.is-selected, .palette__item.is-active {
  --texto:var(--tinta);
  --texto-secundario:var(--muted);
  --acento:var(--floresta);
  color:var(--tinta);
}
.bg-floresta { background-color:var(--floresta); }
.titlebar, .auth-window__titlebar, .auth-window__foot,
.wizard__foot, .palette__foot { background:var(--fundo) !important; }
.titlebar__search { background:var(--superficie) !important; }
.titlebar__brand, .titlebar__btn, .auth-window__brand,
.palette__item-icon { color:var(--acento) !important; }
.palette__item.is-active { color:var(--tinta); }
.palette__item.is-active .palette__item-title { color:var(--floresta); }
.palette__item.is-active .palette__item-icon { color:var(--acento); }
.palette__foot kbd { color:var(--acento) !important; }
.shell input { min-width:0; }
.offline-banner, .offline-banner__retry { color:var(--texto) !important; }
.offline-banner__retry { background:var(--superficie) !important; }

body {
  background-color: var(--fundo);
  background-image: var(--pontos-fundo);
  background-size: var(--pontos-espaco);
  background-position: center;
  /* fixed: prende a grelha ao ecrã, para o cabeçalho (.titlebar) partilhar
     a mesma origem e os pontos continuarem alinhados por baixo dele. */
  background-attachment: fixed;
  color: var(--texto);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  margin:0;
}
body[data-nav="onboarding"] { background-image: none; }

h1, h2, h3, .display {
  font-family: 'Newsreader', system-ui, sans-serif;
  letter-spacing: -.4px;
  margin:0;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}

/* ---------- Seletor de cor das pastas (2026-10-01) ---------- */
.paleta-dialogo { padding:0; border:0; background:transparent; }
.paleta-dialogo::backdrop { background:rgba(20,37,28,.42); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.paleta-dialogo__caixa { width:min(520px, calc(100vw - 32px)); box-sizing:border-box; padding:28px 28px 24px; border-radius:28px; background:#fff;
  box-shadow:0 30px 70px -30px rgba(20,37,28,.55); }
.paleta-dialogo h2 { margin:0; font:800 21px/1.2 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing:-.02em; color:var(--texto); }
.paleta-dialogo__sub { margin:6px 0 0; font-size:14px; color:var(--texto-secundario); }
.paleta-dialogo__nome { width:100%; box-sizing:border-box; height:50px; margin-top:16px; padding:0 16px; border:0; border-radius:16px; outline:none;
  background:#f3f5f3; box-shadow:inset 0 0 0 1.5px transparent; font:600 16px 'Plus Jakarta Sans', system-ui, sans-serif; color:var(--texto);
  transition:box-shadow .15s ease, background-color .15s ease; }
.paleta-dialogo__nome:focus { background:#fff; box-shadow:inset 0 0 0 2px var(--esmeralda); }
.paleta-dialogo__acoes { display:flex; justify-content:flex-end; gap:8px; margin-top:22px; }
.paleta { display:grid; gap:14px; margin-top:18px; }
.paleta__titulo { margin:0 0 8px; font:800 11px/1 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-secundario); }
.paleta__amostras { display:grid; grid-template-columns:repeat(8, minmax(0, 1fr)); gap:8px; }
.paleta__cor { position:relative; display:grid; place-items:center; aspect-ratio:1; min-width:0; min-height:0; border:0; border-radius:12px; cursor:pointer;
  background:var(--cor); color:var(--tinta); box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
  transition:transform .15s cubic-bezier(.2,.9,.24,1.1), box-shadow .15s ease; }
.paleta__cor .material-symbols-outlined { opacity:0; transform:scale(.6); transition:opacity .15s ease, transform .2s cubic-bezier(.2,.9,.24,1.2); font-variation-settings:'wght' 700; }
.paleta__cor:hover { transform:translateY(-2px); }
.paleta__cor[aria-pressed="true"] { box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--cor); }
.paleta__cor[aria-pressed="true"] .material-symbols-outlined { opacity:1; transform:none; }
.paleta__cor:focus-visible { outline:3px solid var(--esmeralda); outline-offset:3px; }
@media (prefers-reduced-motion:reduce) { .paleta__cor, .paleta__cor .material-symbols-outlined { transition:none; } }

/* ---------- Sidebar ---------- */

.sb-item {
  display: flex; align-items: center; gap:var(--esp-md);
  width: 192px; height: 44px; margin-left:var(--esp-lg);
  padding:0 var(--esp-md); border-radius:var(--raio-input);
  color: var(--muted-dark); font-size:15px; font-weight: 400;
  text-decoration: none; position: relative;
  
}
.sb-item:hover { background: rgba(255, 255, 255, .06); color: var(--menta); }
.sb-item.is-active {
  background: var(--menta); color: var(--floresta); font-weight: 600;
}
/* A barrinha esmeralda encostada à margem da sidebar, não ao item. */
.sb-item.is-active::before {
  content: ''; position: absolute; left: -24px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 20px; border-radius:var(--raio-pilula); background: var(--esmeralda);
}
.sb-item .material-symbols-outlined { font-size:19px; }

/* ---------- Sidebar ajustável ----------
   A borda direita funciona como um puxador de janela. A largura é aplicada
   por JS numa variável CSS para o resto da shell (o <main flex-1>) recuperar
   imediatamente o espaço libertado. */
#sidebar {
  --sidebar-largura:240px;
  width:var(--sidebar-largura) !important;
  flex:0 0 var(--sidebar-largura) !important;
  min-width:var(--sidebar-largura);
  position:sticky;
  overflow:visible;
  transition:width .18s ease, flex-basis .18s ease;
}
#sidebar.sidebar--a-ajustar { transition:none; }
.sidebar-a-ajustar, .sidebar-a-ajustar * { cursor:col-resize !important; user-select:none; }

#sidebar .sidebar-ajuste {
  position:absolute; z-index:60; top:0; right:-7px; bottom:0; width:14px;
  display:grid; place-items:center; color:var(--floresta); cursor:col-resize;
  opacity:0; touch-action:none; transition:opacity .16s ease;
}
#sidebar .sidebar-ajuste::before {
  content:''; position:absolute; width:4px; height:48px; border-radius:999px;
  background:color-mix(in srgb, var(--salvia) 68%, transparent);
  box-shadow:0 1px 4px rgba(28,43,34,.16);
}
#sidebar .sidebar-ajuste .material-symbols-outlined {
  position:relative; z-index:1; font-size:16px !important; color:var(--floresta);
  opacity:0; transition:opacity .16s ease;
}
#sidebar:hover .sidebar-ajuste,
#sidebar .sidebar-ajuste:focus-visible,
#sidebar.sidebar--a-ajustar .sidebar-ajuste { opacity:1; }
#sidebar .sidebar-ajuste:hover .material-symbols-outlined,
#sidebar .sidebar-ajuste:focus-visible .material-symbols-outlined,
#sidebar.sidebar--a-ajustar .sidebar-ajuste .material-symbols-outlined { opacity:1; }

#sidebar .sb-item { width:calc(100% - 48px); max-width:192px; }
#sidebar .sb-adicionar { width:calc(100% - 48px) !important; max-width:192px; }
/* O cartão de conta vive dentro de um rodapé com 24 px de margem em cada
   lado. 100% aqui é a largura útil desse rodapé, não uma largura fixa que
   possa sair pela lateral quando a barra vai encolhendo. */
#sidebar .sb-rodape { width:100%; box-sizing:border-box; }
#sidebar .sb-perfil { width:100% !important; max-width:192px; min-width:0; overflow:hidden; }
#sidebar .sb-perfil__texto { min-width:0; overflow:hidden; }
#sidebar .sb-perfil__texto > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Abaixo de 164 px só os ícones ficam: não encurtamos palavras nem
   empurramos o conteúdo; a navegação continua com alvos de 44 px. */
#sidebar.sidebar--compacta .sb-item {
  width:44px; margin-inline:auto; padding-inline:0; justify-content:center; gap:0;
}
#sidebar.sidebar--compacta .sb-item__rotulo,
#sidebar.sidebar--compacta .sb-adicionar__rotulo,
#sidebar.sidebar--compacta .sb-perfil__texto { display:none; }
#sidebar.sidebar--compacta .sb-adicionar {
  width:44px !important; min-width:44px; margin-inline:auto; padding-inline:0;
  justify-content:center; gap:0;
}
#sidebar.sidebar--compacta > .h-px { margin-inline:14px !important; }
#sidebar.sidebar--compacta .sb-rodape { padding:14px 0; }
#sidebar.sidebar--compacta .sb-perfil {
  width:44px; height:44px; margin-inline:auto; padding:0; justify-content:center; gap:0;
}

/* O botão de encolher/alargar (2026-10-01): no canto de cima da barra; com a
   barra encolhida, centrado por cima do "+". */
#sidebar .sb-cabeca { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 18px 10px 24px; }
/* A marca (2026-10-02): o limão de boné e o nome, como abre qualquer app. O
   limão é a imagem sem fundo, cortada em baixo de propósito; leva sombra no
   contorno e não numa caixa, para assentar no floresta sem moldura. */
#sidebar .sb-marca {
  display:flex; align-items:center; gap:10px; min-width:0; border-radius:12px; text-decoration:none;
  color:#fff; font-family:'Newsreader', system-ui, sans-serif; font-weight:800; font-size:22px; letter-spacing:-.4px;
}
#sidebar .sb-marca:focus-visible { outline:2px solid var(--menta); outline-offset:4px; }
#sidebar .sb-marca__logo { flex-shrink:0; width:46px; height:34px; object-fit:contain; filter:drop-shadow(0 2px 4px rgba(0,0,0,.28)); }
#sidebar .sb-marca__nome { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#sidebar .sb-recolher {
  display:grid; place-items:center; width:40px; height:40px; border:0; border-radius:12px; cursor:pointer;
  background:transparent; color:var(--muted-dark); transition:background-color .15s ease, color .15s ease;
}
#sidebar .sb-recolher:hover { background:rgba(255,255,255,.08); color:var(--menta); }
#sidebar .sb-recolher:focus-visible { outline:2px solid var(--menta); outline-offset:2px; }
#sidebar .sb-recolher .material-symbols-outlined { font-size:21px; }
#sidebar.sidebar--compacta .sb-cabeca { flex-direction:column; justify-content:center; gap:6px; padding-inline:0; }
#sidebar.sidebar--compacta .sb-marca__nome { display:none; }

/* O convite e as linhas de baixo (2026-10-20), no lugar de Perfil e
   Definições. O cartão é o único sítio claro da barra: o verde menta das
   ferramentas do leitor (o do Chat), com o Maano a acenar do canto, cortado
   pela borda. Baixo e largo (quase de borda a borda), para não pesar na
   barra. O botão é branco, em pílula, com a seta num círculo. */
#sidebar .sb-convite {
  position:relative; isolation:isolate; overflow:hidden; flex-shrink:0;
  width:calc(100% - 20px); margin:0 10px 10px;
  padding:12px 14px; border-radius:20px; box-sizing:border-box;
  background:linear-gradient(160deg, color-mix(in srgb, #A9E0C1 78%, #fff) 0%, #A9E0C1 70%);
  box-shadow:0 18px 32px -18px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.5);
  color:#004120;
}
#sidebar .sb-convite__titulo {
  position:relative; z-index:1; margin:0;
  font:700 15px/1.2 'Unbounded', system-ui, sans-serif;
  letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* A frase ocupa até duas linhas (o cartão cresce para ela); a segunda
   acaba antes da cabeça do Maano. */
#sidebar .sb-convite__sub {
  position:relative; z-index:1; margin:4px 0 0; max-width:150px;
  font:500 12.5px/1.3 'DM Sans', system-ui, sans-serif; color:#1F5A3A;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
#sidebar .sb-convite__botao {
  position:relative; z-index:2; display:inline-flex; align-items:center; gap:8px;
  height:32px; margin-top:8px; padding:0 3px 0 13px; border:0; border-radius:var(--raio-pilula);
  background:#fff; color:#004120; font:inherit; font-size:13px; font-weight:700;
  cursor:pointer; box-shadow:0 6px 14px -6px rgba(46,74,59,.45);
  transition:transform .18s ease, box-shadow .18s ease;
}
#sidebar .sb-convite__seta {
  display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:var(--floresta); color:#fff; transition:transform .18s ease;
}
#sidebar .sb-convite__icone { display:none; }
#sidebar .sb-convite__botao:hover { transform:translateY(-1px); box-shadow:0 10px 18px -8px rgba(46,74,59,.5); }
#sidebar .sb-convite__botao:hover .sb-convite__seta { transform:translateX(2px); }
#sidebar .sb-convite__botao:active { transform:translateY(0) scale(.97); }
#sidebar .sb-convite__botao:focus-visible { outline:2px solid var(--floresta); outline-offset:2px; }
#sidebar .sb-convite__mascote {
  position:absolute; z-index:0; right:-4px; bottom:-16px; width:58px; height:auto;
  transform:rotate(-8deg); transform-origin:70% 100%; pointer-events:none;
  filter:drop-shadow(0 6px 10px rgba(46,74,59,.22));
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
#sidebar .sb-convite:hover .sb-convite__mascote { transform:rotate(-2deg) translateY(-4px); }

/* As linhas de baixo são botões com a cara dos itens da navegação. */
#sidebar .sb-extras { margin-top:6px; }
#sidebar .sb-item--botao {
  border:0; background:transparent; font:inherit; font-size:15px; text-align:left; cursor:pointer;
  padding-right:8px;
}
#sidebar .sb-item--botao .sb-item__rotulo { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#sidebar .sb-item--botao:focus-visible { outline:2px solid var(--menta); outline-offset:2px; }

/* Barra encolhida: o cartão vira um círculo pastel só com o ícone (redondo,
   para não se confundir com o item escolhido, que é quadrado). */
#sidebar.sidebar--compacta .sb-convite {
  width:44px; min-height:0; height:44px; margin:0 auto 8px; padding:0; border-radius:50%;
}
#sidebar.sidebar--compacta .sb-convite__titulo,
#sidebar.sidebar--compacta .sb-convite__sub,
#sidebar.sidebar--compacta .sb-convite__mascote,
#sidebar.sidebar--compacta .sb-convite__rotulo,
#sidebar.sidebar--compacta .sb-convite__seta { display:none; }
#sidebar.sidebar--compacta .sb-convite__botao {
  width:44px; height:44px; margin:0; padding:0; justify-content:center;
  background:transparent; box-shadow:none;
}
#sidebar.sidebar--compacta .sb-convite__icone { display:grid; place-items:center; }

/* Ecrã baixo (um portátil a 125% já tem ~710 px): o cartão fica inteiro,
   como foi acertado (2026-10-21; antes sumia abaixo de 725 px e o Jeremy
   deixou de o ver). Quem aperta são os espaços à volta: a margem do
   "Adicionar", o espaço entre os itens, o separador e o rodapé. Os itens
   continuam com 44 px para o dedo. Assim cabe com o Cronograma. */
@media (max-height:760px) {
  #sidebar:not(.sidebar--compacta) > nav.mt-6 { margin-top:14px !important; gap:4px !important; }
  #sidebar:not(.sidebar--compacta) > .h-px { margin-block:12px !important; }
  #sidebar:not(.sidebar--compacta) .sb-convite { margin-bottom:6px; }
  #sidebar:not(.sidebar--compacta) .sb-extras { margin-top:2px; }
  #sidebar:not(.sidebar--compacta) .sb-rodape { padding-top:10px; padding-bottom:14px; }
}
/* Só num ecrã mesmo baixo (menos de 690 px, medido com o Cronograma) o
   convite sai, para o cartão da conta não passar do fundo. */
@media (max-height:689px) {
  #sidebar:not(.sidebar--compacta) .sb-convite { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  #sidebar .sb-convite__botao, #sidebar .sb-convite__seta, #sidebar .sb-convite__mascote { transition:none; }
}

@media (max-width:899px) {
  #sidebar .sidebar-ajuste { display:none; }
}

/* Two columns start only when both reading and instructor fit comfortably. */

.pagina { min-width:0; }
.pagina__coluna { width:100%; max-width:720px; margin-inline:auto; }
.shell { display: flex; flex-direction: column; gap:var(--esp-lg); min-height:0; }
.shell__scroll { min-width: 0; flex: 1; }
.shell__fixed { width: 100%; }

/* The titlebar is outside the shell and keeps its full row. */
@media (min-width: 1440px) {
  .pagina:has(> .shell) { height:100dvh; display:flex; flex-direction:column; }
  .pagina > .titlebar, .pagina > .offline-banner { flex:none; }
  .pagina > .shell { flex:1; overflow:hidden; }
  .shell { flex-direction: row; }
  /* scrollbar-gutter reserva o espaço da barra: o conteúdo não salta quando
     ela aparece. */
  .shell__scroll { height: 100%; overflow-y: auto; padding-inline:var(--esp-sm); scrollbar-gutter: stable both-edges; }
  /* Num portátil baixo (768 px de altura dá ~600 px úteis) a coluna parada
     pode não caber toda. Rola por dentro dela própria em vez de ser cortada. */
  .shell__fixed {
    height: 100%; min-height: 0; overflow-y: auto;
    width: var(--fixed-w, 320px); flex: none;
  }
}

/* Padding do conteúdo por tamanho de janela. Num portátil de 1366 px, 40 px
   de cada lado comem largura que faz falta às duas colunas. */
main { padding-inline:var(--esp-lg); }
@media (min-width: 1280px) { main { padding-inline:var(--esp-xl); } }
@media (min-width: 1024px) and (max-width: 1279px) { main { padding-inline:var(--esp-xl); } }

/* Barra de scroll discreta, para não cortar o ecrã com uma faixa cinzenta. */
.shell__scroll::-webkit-scrollbar, .shell__fixed::-webkit-scrollbar { width: 10px; }
.shell__scroll::-webkit-scrollbar-thumb, .shell__fixed::-webkit-scrollbar-thumb {
  background: rgba(127, 168, 140, .45); border-radius:var(--raio-pilula);
}
.shell__scroll::-webkit-scrollbar-track, .shell__fixed::-webkit-scrollbar-track { background: transparent; }

.shell { position:relative; }
.scroll-curto { display:none; }
.scroll-personalizado { scrollbar-width:none; }
.scroll-personalizado::-webkit-scrollbar { display:none; }
.scroll-curto:not([hidden]) { display:block; position:fixed; z-index:85; touch-action:none; cursor:pointer; }
.scroll-curto__indicador { position:absolute; border-radius:999px; background:rgba(127,168,140,.45); cursor:grab; }
.scroll-curto--y .scroll-curto__indicador { width:100%; height:5%; }
.scroll-curto--x .scroll-curto__indicador { width:5%; height:100%; }
.scroll-curto:active .scroll-curto__indicador { cursor:grabbing; }

/* ---------- Cartões ---------- */

.card { background: var(--superficie); border:1px solid var(--contorno); border-radius:var(--raio-cartao-2); box-shadow: var(--sh-ambient); }
.card-lg { background: var(--superficie); border:1px solid var(--contorno); border-radius:var(--raio-cartao); box-shadow: var(--sh-soft); }
/* Cartão "em linha": contorno em vez de sombra, nunca os dois. */
.card-outline { background: var(--superficie); border-radius:var(--raio-input); border: 1.5px solid var(--contorno); box-shadow: none; }
.hoverable {  }
.hoverable:hover { box-shadow: var(--sh-lift); }

.pill { border-radius:var(--raio-pilula); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap:var(--esp-sm);
  border-radius:var(--raio-pilula); border: 0; cursor: pointer;
  font-family: inherit; font-size:15px; font-weight: 600;
  
}
.btn:hover { filter: brightness(.94); }
.btn-primary { background: var(--primaria); color: var(--sobre-primaria); }
.bg-floresta .btn-primary, #sidebar .btn-primary { border:1px solid var(--menta); }
.btn-ghost { background: var(--superficie); color: var(--texto); border: 1.5px solid var(--salvia); }




.overline {
  font-size:11px; font-weight: 600; letter-spacing: .6px;
  text-transform: uppercase;
}

/* ---------- Barra de progresso ---------- */

.bar { height: 6px; border-radius:var(--raio-pilula); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius:var(--raio-pilula); }

/* ---------- Cartão de pasta (a alma da Biblioteca) ---------- */

.folder { position: relative; width: 100%; display: block; text-decoration: none; }
/* Lombo: espessura física da pasta a espreitar por trás. */

/* Aba trapezoidal: reta à esquerda, inclinada à direita. */


/* Brilho diagonal por cima do gradiente: a capa a apanhar luz. */




/* ---------- Anel de domínio ---------- */

.anel { position: relative; width: 48px; height: 48px; flex: none; }
.anel svg { transform: rotate(-90deg); display: block; }
.anel__label {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size:11px; font-weight: 600; color: var(--texto);
}
.anel__badge {
  position: absolute; top: -2px; right: -2px;
  width: 16px; height: 16px; border-radius:var(--raio-pilula);
  background: var(--menta); border: 1.5px solid #fff;
  display: grid; place-items: center; color: var(--floresta);
}
.anel__badge .material-symbols-outlined { font-size:11px; }

/* ---------- Zona de largar ficheiros (substitui a câmara) ---------- */

.dropzone {
  background: var(--superficie); border: 1.5px dashed var(--salvia); border-radius:var(--raio-cartao);
  
}
.dropzone.is-over { background: var(--menta); border-color: var(--esmeralda); }

/* ---------- Adicionar (todos os passos: escolha, nota, YouTube, progresso, feito) ----------
   Um só cartão que cabe sempre no ecrã, sem scroll: os espaços encolhem com a
   altura (clamp com vh) e a caixa da nota é a única peça que cede. A app zera
   as bordas (responsive.css), por isso os contornos são box-shadow inset ou
   um SVG tracejado. */

dialog.adicionar {
  width:min(540px, calc(100vw - 24px)); max-width:none;
  max-height:calc(100dvh - 24px); overflow:visible; color:var(--tinta);
}
dialog.adicionar::backdrop {
  background:rgba(22,36,28,.42);
  -webkit-backdrop-filter:blur(8px) saturate(1.1); backdrop-filter:blur(8px) saturate(1.1);
}
dialog.adicionar[open] { animation:adicionar-entrar .3s cubic-bezier(.2,.9,.3,1); }
dialog.adicionar[open]::backdrop { animation:adicionar-fundo .3s ease; }
@keyframes adicionar-entrar { from { opacity:0; transform:translateY(12px) scale(.985); } to { opacity:1; transform:none; } }
@keyframes adicionar-fundo { from { opacity:0; } to { opacity:1; } }

.adicionar__conteudo {
  display:flex; flex-direction:column; gap:clamp(10px, 1.9vh, 16px);
  max-height:calc(100dvh - 24px); overflow:auto; overscroll-behavior:contain; box-sizing:border-box;
  padding:clamp(18px, 3.6vh, 30px) clamp(18px, 4.5vw, 30px);
  border-radius:32px;
  background:
    radial-gradient(110% 65% at 0% 0%, rgba(205,232,212,.95), transparent 62%),
    radial-gradient(80% 55% at 100% 0%, rgba(255,226,204,.75), transparent 60%),
    radial-gradient(90% 60% at 85% 100%, rgba(232,243,206,.85), transparent 65%),
    radial-gradient(70% 50% at 0% 100%, rgba(214,232,244,.7), transparent 60%),
    #FAFCF8;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8), 0 0 0 1px rgba(46,74,59,.08),
    0 50px 90px -34px rgba(22,36,28,.55), 0 14px 32px -18px rgba(22,36,28,.3);
  scrollbar-width:none;
}
.adicionar__conteudo::-webkit-scrollbar { display:none; }
.adicionar__conteudo > * { flex-shrink:0; }
.adicionar__conteudo.is-abanar { animation:adicionar-abanar .38s cubic-bezier(.36,.07,.19,.97); }
@keyframes adicionar-abanar { 20%,60% { transform:translateX(-6px); } 40%,80% { transform:translateX(6px); } }

.adicionar__fechar {
  position:absolute; top:12px; right:12px; z-index:2; display:grid; place-items:center;
  width:44px; height:44px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.72); color:var(--floresta);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9), 0 6px 16px -10px rgba(22,36,28,.5);
  transition:transform .2s ease, background .18s ease;
}
.adicionar__fechar:hover { background:#fff; transform:rotate(90deg); }
.adicionar__fechar:active { transform:scale(.94); }

.adicionar__cabeca { padding-right:44px; }

/* ---------- Convite (2026-10-20) ----------
   A concha do "Adicionar" com a ilustração dos dois limões, os dois prémios
   em cartões de vidro e o link com um só botão forte (Copiar o link). */
dialog.adicionar.convite { width:min(600px, calc(100vw - 24px)); }
/* A janela recebe o foco ao abrir só para o link não vir selecionado; não
   é um controlo, por isso não leva o anel (a regra geral usa !important). */
dialog.adicionar.convite:focus { outline:none !important; }
/* O título na letra da app (escolha do Jeremy, 2026-10-20), não na serifa. */
dialog.convite .adicionar__titulo, dialog.ajuda .adicionar__titulo {
  font:800 clamp(22px, 3.2vh, 27px)/1.15 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing:-.02em;
}
.convite__arte {
  position:relative; display:grid; place-items:center;
  height:clamp(150px, 30vh, 270px); margin:-4px 0 -2px;
}
.convite__arte::before {
  content:''; position:absolute; left:14%; right:14%; bottom:2%; height:20%;
  border-radius:50%; background:radial-gradient(closest-side, rgba(127,168,140,.3), transparent);
}
.convite__arte img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  animation:convite-chegar .55s cubic-bezier(.34,1.4,.64,1) .05s both;
}
@keyframes convite-chegar { from { opacity:0; transform:translateY(10px) scale(.96); } to { opacity:1; transform:none; } }

.convite__premios { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0; padding:0; list-style:none; }
.convite__premio {
  display:flex; align-items:center; gap:12px; min-width:0; padding:14px; border-radius:20px;
  background:rgba(255,255,255,.74);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.95), 0 0 0 1px rgba(46,74,59,.07), 0 12px 24px -18px rgba(22,36,28,.4);
}
.convite__premio-icone {
  display:grid; place-items:center; flex-shrink:0; width:42px; height:42px; border-radius:14px;
  background:linear-gradient(160deg, color-mix(in srgb, #A9E0C1 70%, #fff), #A9E0C1); color:#004120;
}
.convite__premio-texto { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.convite__premio-texto strong { font-size:14px; line-height:1.25; color:var(--tinta); }
.convite__premio-texto small { font-size:12.5px; line-height:1.3; color:var(--muted); }
.convite__selo {
  flex-shrink:0; align-self:flex-start; padding:4px 9px; border-radius:var(--raio-pilula);
  background:#E2F3E8; color:#1F6B43; font-size:11.5px; font-weight:800; white-space:nowrap;
}
.convite__nota { margin:-2px 0 0 4px; font-size:12.5px; line-height:1.4; color:var(--muted); }

.convite__link { display:flex; flex-direction:column; gap:12px; }
.convite__linha { display:flex; gap:10px; }
.convite__campo {
  flex:1; min-width:0; height:48px; padding:0 16px; border-radius:var(--raio-input);
  background:#fff; color:var(--tinta); font:inherit; font-size:14px; text-overflow:ellipsis;
  box-shadow:inset 0 0 0 1px rgba(46,74,59,.14);
}
.convite__campo:focus-visible { outline:2px solid var(--esmeralda); outline-offset:1px; }
.convite__copiar { height:48px; padding:0 20px; gap:8px; flex-shrink:0; font-size:14px; justify-content:center; }
.convite__copiar[data-feito] { background:var(--esmeralda); }
.convite__erro { margin:-4px 0 0 4px; font-size:13px; color:var(--perigo); }

@media (max-width:560px) {
  .convite__premios { grid-template-columns:1fr; }
  .convite__linha { flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) { .convite__arte img { animation:none; } }

/* ---------- Ajuda e feedback (2026-10-20) ----------
   A concha do "Adicionar", com dois ecrãs na mesma janela. Um só botão forte
   por ecrã ("Enviar"); o "Pedir ajuda" vive num cartão de vidro à parte, com
   a seta num círculo como o "Convidar" da barra. A categoria escolhida fica
   a amarelo. */
dialog.adicionar.ajuda { width:min(560px, calc(100vw - 24px)); }
.af__area {
  display:block; width:100%; min-height:132px; box-sizing:border-box; resize:none;
  padding:14px 16px; border-radius:18px; background:#fff; color:var(--tinta);
  font:inherit; font-size:15px; line-height:1.5;
  box-shadow:inset 0 0 0 1px rgba(46,74,59,.14);
  transition:box-shadow .15s ease;
}
.af__area::placeholder { color:color-mix(in srgb, var(--muted) 80%, transparent); }
.af__area:focus { outline:none !important; box-shadow:inset 0 0 0 2px var(--esmeralda), 0 0 0 4px rgba(47,163,107,.12); }

.af__anexos { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.af__anexar {
  display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px 0 12px; border:0; border-radius:var(--raio-pilula);
  background:rgba(255,255,255,.78); color:var(--floresta); font:inherit; font-size:14px; font-weight:700; cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(46,74,59,.12); transition:background .15s ease, transform .15s ease;
}
.af__anexar:hover { background:#fff; }
.af__anexar:active { transform:scale(.97); }
.af__miniatura {
  position:relative; width:64px; height:64px; border-radius:14px; overflow:hidden; flex-shrink:0;
  box-shadow:0 0 0 1px rgba(46,74,59,.12), 0 8px 16px -10px rgba(22,36,28,.4);
}
.af__miniatura img { width:100%; height:100%; object-fit:cover; display:block; }
.af__tirar {
  position:absolute; top:4px; right:4px; display:grid; place-items:center; width:24px; height:24px;
  border:0; border-radius:50%; background:rgba(16,37,27,.72); color:#fff; cursor:pointer;
}
.af__tirar::after { content:''; position:absolute; inset:-10px; }
.af__dica { margin:-4px 0 0 4px; font-size:12.5px; color:var(--muted); }
.af__erro { margin:0 0 0 4px; font-size:13px; line-height:1.4; color:var(--perigo); }
.af__acoes { display:flex; justify-content:flex-end; }
.af__enviar { height:48px; min-width:140px; padding:0 26px; justify-content:center; font-size:14px; }
.af__enviar:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; transform:none; }
.af__enviar.is-a-enviar { opacity:.75; cursor:progress; }

.af__ajuda {
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px;
  padding:14px 14px 14px 16px; border-radius:20px; background:rgba(255,255,255,.74);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.95), 0 0 0 1px rgba(46,74,59,.07), 0 12px 24px -18px rgba(22,36,28,.4);
}
.af__ajuda-icone {
  display:grid; place-items:center; width:44px; height:44px; border-radius:14px;
  background:linear-gradient(160deg, color-mix(in srgb, #A9E0C1 70%, #fff), #A9E0C1); color:#004120;
}
.af__ajuda-texto { display:flex; flex-direction:column; gap:2px; min-width:0; }
.af__ajuda-texto strong { font-size:14px; color:var(--tinta); }
.af__ajuda-texto small { font-size:12.5px; line-height:1.35; color:var(--muted); }
.af__pedir {
  display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 4px 0 16px; border:0; border-radius:var(--raio-pilula);
  background:#fff; color:var(--floresta); font:inherit; font-size:14px; font-weight:700; white-space:nowrap; cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(46,74,59,.12), 0 6px 14px -8px rgba(22,36,28,.35);
  transition:transform .18s ease, box-shadow .18s ease;
}
.af__pedir-seta {
  display:grid; place-items:center; width:32px; height:32px; border-radius:50%;
  background:var(--floresta); color:#fff; transition:transform .18s ease;
}
.af__pedir:hover { transform:translateY(-1px); }
.af__pedir:hover .af__pedir-seta { transform:translateX(2px); }
.af__pedir:active { transform:scale(.97); }

.af__cabeca { display:flex; align-items:flex-start; gap:12px; }
.af__voltar {
  display:grid; place-items:center; flex-shrink:0; width:40px; height:40px; margin-top:-2px; border:0; border-radius:50%;
  background:rgba(255,255,255,.78); color:var(--floresta); cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(46,74,59,.12); transition:background .15s ease, transform .15s ease;
}
.af__voltar:hover { background:#fff; transform:translateX(-2px); }
.af__chips { display:flex; flex-wrap:wrap; gap:8px; }
.af__chip {
  height:40px; padding:0 16px; border:0; border-radius:var(--raio-pilula); cursor:pointer;
  background:rgba(255,255,255,.8); color:var(--tinta); font:inherit; font-size:14px; font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(46,74,59,.12); transition:background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.af__chip:hover { background:#fff; }
.af__chip:active { transform:scale(.97); }
.af__chip[aria-checked="true"] { background:#F7E27A; color:#3A3300; box-shadow:inset 0 0 0 1.5px #D9B92A; }

@media (max-width:560px) {
  .af__ajuda { grid-template-columns:auto minmax(0,1fr); }
  .af__pedir { grid-column:1 / -1; justify-content:space-between; }
  .af__enviar { width:100%; }
}
@media (prefers-reduced-motion:reduce) {
  .af__pedir, .af__pedir-seta, .af__chip, .af__anexar, .af__voltar { transition:none; }
}

.adicionar__titulo {
  margin:0; font:800 clamp(23px, 3.4vh, 28px)/1.12 'Newsreader', Georgia, serif;
  letter-spacing:-.02em; color:var(--tinta); overflow-wrap:anywhere;
}
.adicionar__sub { margin:6px 0 0; font-size:14px; line-height:1.45; color:var(--muted); }
.adicionar__sub strong { color:var(--tinta); }
.adicionar__cabeca--passo { display:flex; align-items:center; gap:14px; padding-right:0; }
.adicionar__cabeca--passo .adicionar-forma__icone { width:52px; height:52px; border-radius:18px; }
.adicionar__cabeca--passo .adicionar__titulo { font-size:clamp(21px, 3vh, 25px); }

.adicionar__rotulo {
  display:block; margin:0 0 -6px 4px; font:800 11px/1 'Plus Jakarta Sans', system-ui, sans-serif;
  letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
}
.adicionar .campo-pasta {
  height:clamp(46px, 6.4vh, 52px); border-radius:18px;
  background-color:rgba(255,255,255,.82);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.95), 0 10px 22px -16px rgba(22,36,28,.45);
}
.adicionar .campo-pasta:hover { box-shadow:inset 0 0 0 1.5px rgba(46,74,59,.22), 0 12px 24px -16px rgba(22,36,28,.5); }
.adicionar .campo-pasta:focus-visible { box-shadow:inset 0 0 0 2px var(--esmeralda), 0 0 0 4px rgba(47,163,107,.14); }

/* Zona de largar: horizontal e baixa, com tracejado desenhado em SVG para
   seguir os cantos redondos (metade do traço fica fora e não se vê). */
.adicionar__zona {
  position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:14px; padding:clamp(14px, 2.4vh, 20px) 18px; border-radius:24px;
  background-color:rgba(255,255,255,.6);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' rx='24' ry='24' fill='none' stroke='%237FA88C' stroke-width='3.2' stroke-dasharray='7 8'/%3E%3C/svg%3E");
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.adicionar__zona.is-over {
  background-color:rgba(221,235,224,.95); transform:scale(1.012);
  box-shadow:inset 0 0 0 2px var(--esmeralda), 0 18px 36px -22px rgba(47,163,107,.7);
}
.adicionar__zona-icone {
  display:grid; place-items:center; width:52px; height:52px; border-radius:18px;
  background:var(--menta); color:var(--floresta);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8);
  transition:transform .25s cubic-bezier(.2,.9,.3,1.3), background .2s ease, color .2s ease;
}
.adicionar__zona.is-over .adicionar__zona-icone { transform:translateY(-3px); background:var(--esmeralda); color:#fff; }
.adicionar__zona-texto { display:grid; gap:3px; min-width:0; }
.adicionar__zona-texto strong { font-size:16px; font-weight:800; color:var(--tinta); letter-spacing:-.01em; }
.adicionar__zona-texto small { font-size:12.5px; line-height:1.4; color:var(--muted); }
.adicionar__zona-botao { height:46px; padding:0 20px; font-size:14px; white-space:nowrap; }

/* As outras formas de trazer conteúdo: dois cartões lado a lado, cada um com
   a sua cor pastel. */
.adicionar__formas { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.adicionar-forma {
  --forma-fundo:#FFF1C9; --forma-tinta:#7A5300;
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:clamp(8px, 1.4vh, 12px);
  min-height:44px; padding:clamp(14px, 2.2vh, 18px) 16px; border:0; border-radius:24px; cursor:pointer;
  text-align:left; color:var(--tinta); font:inherit;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.95), 0 14px 28px -22px rgba(22,36,28,.55);
  transition:transform .2s cubic-bezier(.2,.9,.3,1.2), box-shadow .2s ease, background .2s ease;
}
.adicionar-forma--youtube { --forma-fundo:#FFE2DD; --forma-tinta:#A3352A; }
.adicionar-forma:hover { transform:translateY(-2px); background:rgba(255,255,255,.92);
  box-shadow:inset 0 0 0 1px #fff, 0 20px 34px -22px rgba(22,36,28,.6); }
.adicionar-forma:active { transform:translateY(1px) scale(.99); }
.adicionar-forma__icone {
  display:grid; place-items:center; width:42px; height:42px; flex:none; border-radius:15px;
  background:var(--forma-fundo, #FFF1C9); color:var(--forma-tinta, #7A5300);
}
.adicionar-forma__icone.adicionar-forma--youtube { --forma-fundo:#FFE2DD; --forma-tinta:#A3352A; }
/* Lei seca (2026-10-13): a escolha de uma das leis mais pedidas. */
.adicionar-forma--lei, .adicionar-forma__icone.adicionar-forma--lei { --forma-fundo:#E4E7F4; --forma-tinta:#34407A; }
.lei-catalogo { display:grid; grid-template-columns:1fr 1fr; gap:8px; max-height:236px; overflow:auto; padding:2px; }
.lei-catalogo__item { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-radius:12px; cursor:pointer; background:var(--superficie);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--floresta) 14%, transparent); }
.lei-catalogo__item:has(input:checked) { box-shadow:inset 0 0 0 2px var(--floresta); }
.lei-catalogo__item input { margin-top:3px; accent-color:var(--floresta); }
.lei-catalogo__item strong { display:block; font-size:14px; }
.lei-catalogo__item small { display:block; color:var(--texto-suave, #5f6b63); font-size:12.5px; line-height:1.35; }
.adicionar-forma__texto { display:grid; gap:3px; min-width:0; padding-right:18px; }
.adicionar-forma__texto strong { font-size:15px; font-weight:800; letter-spacing:-.01em; line-height:1.25; }
.adicionar-forma__texto small { font-size:12.5px; line-height:1.4; color:var(--muted); }
.adicionar-forma__seta { position:absolute; top:14px; right:14px; color:var(--muted); transition:transform .2s ease, color .2s ease; }
.adicionar-forma:hover .adicionar-forma__seta { transform:translate(2px,-2px); color:var(--forma-tinta); }

/* Passos da nota e do YouTube. */
.adicionar-voltar {
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start; min-height:40px;
  margin:-6px 0 0 -6px; padding:0 14px 0 8px; border:0; border-radius:999px; cursor:pointer;
  color:var(--floresta); background:rgba(255,255,255,.6); font:700 13px 'Plus Jakarta Sans', system-ui, sans-serif;
  transition:background .18s ease;
}
.adicionar-voltar:hover { background:#fff; }
.adicionar__form { display:flex; flex-direction:column; gap:clamp(10px, 1.9vh, 16px); min-height:0; }
.adicionar__form > * { flex-shrink:0; }
.adicionar__form--nota { flex:1 1 auto; }
.adicionar__campo {
  display:block; width:100%; box-sizing:border-box; min-height:48px; padding:0 16px; border:0; border-radius:18px;
  background:rgba(255,255,255,.86); color:var(--tinta); font:500 15px 'Plus Jakarta Sans', system-ui, sans-serif;
  box-shadow:inset 0 0 0 1.5px rgba(46,74,59,.14), 0 10px 22px -18px rgba(22,36,28,.45);
  transition:box-shadow .18s ease, background .18s ease;
}
.adicionar__campo::placeholder { color:#7C8A82; }
.adicionar__campo:hover { box-shadow:inset 0 0 0 1.5px rgba(46,74,59,.28), 0 10px 22px -18px rgba(22,36,28,.45); }
.adicionar__campo:focus { outline:none; background:#fff; box-shadow:inset 0 0 0 2px var(--esmeralda), 0 0 0 4px rgba(47,163,107,.14); }
.adicionar__form > .adicionar__campo--nota {
  flex:1 1 auto; height:clamp(120px, 30vh, 260px); min-height:84px;
  padding:14px 16px; resize:none; line-height:1.55;
}
.adicionar__ajuda { margin:-6px 0 0 4px; font-size:12.5px; line-height:1.45; color:var(--muted); }
.adicionar__erro {
  margin:0; padding:10px 14px; border-radius:14px;
  background:#FDECEA; color:var(--perigo); font-size:13px; font-weight:600; line-height:1.45;
}
.adicionar__erro[hidden] { display:none; }
.adicionar__acoes { display:flex; justify-content:flex-end; align-items:center; gap:10px; flex-wrap:wrap; margin-top:2px; }
.adicionar__acoes .btn, .captura-progresso__acoes .btn { height:46px; padding:0 22px; font-size:14px; }

.adicionar :is(.adicionar-forma, .adicionar__fechar, .adicionar-voltar, .adicionar__zona-botao, .btn):focus-visible {
  outline:3px solid color-mix(in srgb, var(--esmeralda) 55%, transparent); outline-offset:3px;
}
.adicionar-youtube__spinner, .captura-progresso__spinner, .pt__spinner {
  /* Anel em gradiente com máscara: a app zera as bordas, por isso um spinner
     feito de border ficava invisível. */
  --anel:#fff; --anel-fundo:rgba(255,255,255,.35);
  display:inline-block; flex:0 0 auto; width:16px; height:16px; border-radius:50%;
  background:conic-gradient(var(--anel) 0 100deg, var(--anel-fundo) 100deg 360deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  animation:adicionar-girar .7s linear infinite;
}
@keyframes adicionar-girar { to { transform:rotate(360deg); } }

/* Feito (a nota guardada). */
.adicionar__feito { display:flex; flex-direction:column; align-items:flex-start; gap:clamp(10px, 1.9vh, 14px); }
.adicionar__feito .adicionar__titulo { padding-right:44px; }
.adicionar__feito-icone {
  display:grid; place-items:center; width:56px; height:56px; border-radius:50%;
  background:var(--esmeralda); color:#fff; box-shadow:0 0 0 8px rgba(47,163,107,.14);
  animation:adicionar-pop .45s cubic-bezier(.2,.9,.3,1.4);
}
.adicionar__feito .adicionar__acoes { align-self:stretch; }
@keyframes adicionar-pop { from { transform:scale(.6); opacity:0; } to { transform:none; opacity:1; } }

/* ---------- Partilhar e descarregar (leitor da nota, assets/partilhar.js) ----------
   A mesma concha do "Adicionar". O link em cima, num cartão de vidro com o
   interruptor; por baixo, o que se descarrega ou copia em cartões de duas
   colunas. Um botão bloqueado (transcrição numa nota de PDF) fica à vista,
   esbatido. */
.titlebar__partilhar .material-symbols-outlined { font-variation-settings:'FILL' 0, 'wght' 500; }
/* No telemóvel e no tablet de pé: pílula ao lado do menu, à direita (na nota
   é o "Podcast", assets/podcast.js; o "Partilhar" fica na visita e, na nota
   do aluno, dentro do menu). */
.mobile-header .btn.mobile-partilhar,
.mobile-header .btn.mobile-podcast {
  width:auto; min-width:44px; margin-left:auto; padding:0 16px 0 13px; gap:6px;
  font-size:14px; font-weight:700; color:var(--floresta);
}

/* O menu do hambúrguer (telemóvel e tablet de pé): ícone + nome, linhas
   de 48 px com cantos redondos, e o toque pinta a linha de menta. */
.mobile-account nav .mobile-account__item {
  display:flex; align-items:center; gap:12px; width:100%; min-height:48px; padding:0 14px;
  border-radius:14px; background:none; color:var(--texto); font:inherit; font-size:15px; font-weight:600;
  text-align:left; text-decoration:none; cursor:pointer; transition:background-color .15s ease;
}
.mobile-account nav .mobile-account__item .material-symbols-outlined { color:var(--pinho); flex:none; }
.mobile-account nav .mobile-account__item:is(:hover, :active, :focus-visible) {
  background:color-mix(in srgb, var(--menta) 70%, transparent);
}
.mobile-account nav .mobile-account__item:focus-visible { outline:2px solid var(--esmeralda); outline-offset:-2px; }

dialog.pt { width:min(560px, calc(100vw - 24px)); }
.pt__link {
  display:flex; flex-direction:column; gap:12px; padding:14px; border-radius:24px;
  background:rgba(255,255,255,.62); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.95), 0 14px 28px -22px rgba(22,36,28,.55);
}
.pt__visivel { display:flex; align-items:center; gap:12px; min-height:44px; padding:0 4px; cursor:pointer; }
.pt__visivel-icone {
  display:grid; place-items:center; width:42px; height:42px; flex:none; border-radius:15px;
  background:#DCEBFA; color:#2C5A86;
}
.pt__visivel-texto { display:grid; gap:2px; min-width:0; flex:1; }
.pt__visivel-texto strong { font-size:15px; font-weight:800; letter-spacing:-.01em; color:var(--tinta); }
.pt__visivel-texto small { font-size:12.5px; color:var(--muted); }

/* Interruptor: a bola desliza, o trilho ganha a cor de destaque. */
.pt__interruptor {
  appearance:none; -webkit-appearance:none; position:relative; flex:none; margin:0;
  width:52px; height:30px; border-radius:999px; cursor:pointer;
  background:rgba(46,74,59,.18); box-shadow:inset 0 1px 2px rgba(22,36,28,.18);
  transition:background .22s ease;
}
.pt__interruptor::after {
  content:''; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%;
  background:#fff; box-shadow:0 2px 6px rgba(22,36,28,.3);
  transition:transform .26s cubic-bezier(.3,1.4,.5,1);
}
.pt__interruptor:checked { background:var(--esmeralda); }
.pt__interruptor:checked::after { transform:translateX(22px); }
.pt__interruptor:focus-visible { outline:3px solid color-mix(in srgb, var(--esmeralda) 55%, transparent); outline-offset:3px; }

.pt__original, .pt__copia { padding-top:10px; box-shadow:inset 0 1px 0 rgba(46,74,59,.08); }
.pt__original[hidden], .pt__copia[hidden] { display:none; }
.pt__visivel-icone--copia { background:var(--menta); color:var(--floresta); }
.pt__visivel-icone--original { background:#FFE7D6; color:#8A4513; }
.pt__copiar-link { height:48px; justify-content:center; font-size:14px; gap:8px; }
.pt__copiar-link:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; transform:none; }

.pt__rotulo { margin:4px 0 -4px 4px; }
.pt__grelha { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pt__acao {
  display:flex; align-items:center; gap:12px; width:100%; min-height:60px; box-sizing:border-box;
  padding:10px 14px 10px 10px; border:0; border-radius:20px; cursor:pointer; text-align:left;
  font:700 14px/1.3 'Plus Jakarta Sans', system-ui, sans-serif; color:var(--tinta);
  background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.95), 0 12px 24px -20px rgba(22,36,28,.55);
  transition:transform .2s cubic-bezier(.2,.9,.3,1.2), box-shadow .2s ease, background .2s ease, opacity .2s ease;
}
.pt__acao:hover:not(:disabled) { transform:translateY(-2px); background:rgba(255,255,255,.94);
  box-shadow:inset 0 0 0 1px #fff, 0 18px 30px -20px rgba(22,36,28,.6); }
.pt__acao:active:not(:disabled) { transform:translateY(1px) scale(.99); }
.pt__acao:disabled { opacity:.42; cursor:not-allowed; filter:saturate(.4); }
.pt__acao-icone {
  display:grid; place-items:center; width:40px; height:40px; flex:none; border-radius:14px;
  background:var(--menta); color:var(--floresta);
}
.pt__acao[data-pt$="pdf"] .pt__acao-icone { background:#FFE7D6; color:#8A4513; }
.pt__spinner { --anel:currentColor; --anel-fundo:color-mix(in srgb, currentColor 22%, transparent); width:18px; height:18px; }
.pt__acao[data-feito] .pt__acao-icone { background:var(--esmeralda); color:#fff; transition:background .2s ease; }
.pt__copiar-link[data-feito] { background:var(--esmeralda); }
.pt__link:is([data-pt-link="a_ver"], [data-pt-link="a_guardar"]) .pt__interruptor { opacity:.55; cursor:progress; }
.pt__link[data-pt-link="sem"] { opacity:.55; }
.pt__acao[data-pt^="copiar"] .pt__acao-icone { background:#EDE4FA; color:#5B3E8C; }

/* "Copiar texto da nota" com a seta dos formatos colada à direita. */
.pt__dividido { position:relative; display:flex; }
.pt__dividido > .pt__acao { border-radius:20px 0 0 20px; padding-right:8px; }
.pt__mais {
  display:grid; place-items:center; flex:none; width:44px; border:0; cursor:pointer;
  border-radius:0 20px 20px 0; color:var(--muted);
  background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:inset 1px 0 0 rgba(46,74,59,.1), inset 0 0 0 1px rgba(255,255,255,.95), 0 12px 24px -20px rgba(22,36,28,.55);
  transition:background .2s ease, color .2s ease;
}
.pt__mais:hover, .pt__mais[aria-expanded="true"] { background:#fff; color:var(--floresta); }
.pt__mais .material-symbols-outlined { transition:transform .2s ease; }
.pt__mais[aria-expanded="true"] .material-symbols-outlined { transform:rotate(180deg); }
.pt__menu {
  position:absolute; top:calc(100% + 6px); right:0; z-index:3; display:grid; gap:2px; min-width:190px;
  padding:6px; border-radius:18px; background:#fff;
  box-shadow:0 0 0 1px rgba(46,74,59,.08), 0 22px 40px -18px rgba(22,36,28,.45);
  animation:adicionar-entrar .18s ease;
}
.pt__menu[hidden] { display:none; }
.pt__menu button {
  display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:44px; padding:0 12px;
  border:0; border-radius:12px; background:transparent; cursor:pointer; text-align:left;
  font:600 14px 'Plus Jakarta Sans', system-ui, sans-serif; color:var(--tinta);
}
.pt__menu button:hover, .pt__menu button:focus-visible { background:var(--menta); outline:none; }
.pt__menu button[aria-checked="true"]::after {
  content:'check'; font-family:'Material Symbols Outlined'; font-size:18px; color:var(--esmeralda);
}
.pt__nota { display:flex; align-items:center; gap:6px; margin:-2px 0 0 4px; font-size:12.5px; color:var(--muted); }

dialog.pt :is(.pt__acao, .pt__mais, .pt__visivel):focus-visible {
  outline:3px solid color-mix(in srgb, var(--esmeralda) 55%, transparent); outline-offset:3px;
}

@media (max-width:480px) {
  .pt__grelha { grid-template-columns:1fr; }
}
@media (max-height:500px) {
  .pt__visivel-texto small, .pt__nota { display:none; }
  .pt__acao { min-height:48px; }
  .pt__acao-icone { width:32px; height:32px; border-radius:11px; }
  .pt__link { padding:10px; gap:8px; }
}
@media (prefers-reduced-motion: reduce) {
  .pt__interruptor, .pt__interruptor::after, .pt__acao, .pt__menu { transition:none; animation:none; }
  .pt__acao:hover:not(:disabled) { transform:none; }
}

/* No tema Escuro do leitor, a janela de partilha acompanha o papel escuro. */
body[data-leitor-tema="Escuro"] dialog.pt { color:#E8EFEA; }
body[data-leitor-tema="Escuro"] dialog.pt .adicionar__conteudo {
  background:
    radial-gradient(110% 65% at 0% 0%, rgba(47,163,107,.22), transparent 62%),
    radial-gradient(80% 55% at 100% 0%, rgba(120,90,160,.2), transparent 60%),
    #17211B;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 50px 90px -34px rgba(0,0,0,.8);
}
body[data-leitor-tema="Escuro"] dialog.pt::backdrop { background:rgba(0,0,0,.6); }
body[data-leitor-tema="Escuro"] dialog.pt :is(.adicionar__titulo, .pt__visivel-texto strong, .pt__acao, .pt__menu button) { color:#E8EFEA; }
body[data-leitor-tema="Escuro"] dialog.pt :is(.pt__visivel-texto small, .pt__nota, .adicionar__rotulo, .pt__mais) { color:#A9BCB0; }
body[data-leitor-tema="Escuro"] dialog.pt :is(.pt__link, .pt__acao, .pt__mais, .adicionar__fechar) {
  background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
body[data-leitor-tema="Escuro"] dialog.pt .adicionar__fechar { color:#E8EFEA; }
body[data-leitor-tema="Escuro"] dialog.pt :is(.pt__acao:hover:not(:disabled), .pt__mais:hover, .pt__mais[aria-expanded="true"]) { background:rgba(255,255,255,.11); }
body[data-leitor-tema="Escuro"] dialog.pt .pt__menu { background:#22302A; box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 22px 40px -18px rgba(0,0,0,.8); }
body[data-leitor-tema="Escuro"] dialog.pt .pt__menu button:hover { background:rgba(255,255,255,.08); }
body[data-leitor-tema="Escuro"] dialog.pt .pt__interruptor:not(:checked) { background:rgba(255,255,255,.18); }
body[data-leitor-tema="Escuro"] dialog.pt .pt__visivel-icone { background:rgba(110,160,220,.2); color:#A9CCF2; }
body[data-leitor-tema="Escuro"] dialog.pt .pt__visivel-icone--original { background:rgba(240,150,90,.18); color:#F4B98E; }
body[data-leitor-tema="Escuro"] dialog.pt .pt__original { box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
body[data-leitor-tema="Escuro"] dialog.pt .pt__acao-icone { background:rgba(47,163,107,.2); color:#9FD9BC; }
body[data-leitor-tema="Escuro"] dialog.pt .pt__acao[data-pt$="pdf"] .pt__acao-icone { background:rgba(240,150,90,.18); color:#F4B98E; }
body[data-leitor-tema="Escuro"] dialog.pt .pt__acao[data-pt^="copiar"] .pt__acao-icone { background:rgba(170,130,230,.2); color:#CDB5F2; }

/* ---------- Nota partilhada em modo visita (assets/visita.js) ----------
   O menu lateral vira a apresentação do Maano (como o Kiwi AI); no telemóvel,
   uma faixa em baixo. O que pede conta fica igual: tocar abre a janela. */
#sidebar.vs-lado { --sidebar-largura:300px; padding:24px 22px calc(22px + env(safe-area-inset-bottom,0px)); gap:18px; overflow-y:auto; }
.vs-lado__topo .sb-marca { padding:0; }
.vs-lado__corpo { display:flex; flex-direction:column; gap:12px; margin-top:8px; }
.vs-lado__selo { display:inline-flex; align-items:center; gap:6px; align-self:flex-start; margin:0; padding:6px 12px 6px 9px; border-radius:999px;
  background:rgba(221,235,224,.14); color:var(--menta); font-size:12px; font-weight:700; letter-spacing:.02em; }
.vs-lado__titulo { margin:6px 0 0; font:800 26px/1.15 'Newsreader', Georgia, serif; letter-spacing:-.02em; color:#fff; }
.vs-lado__texto { margin:0; color:rgba(221,235,224,.86); font-size:14.5px; line-height:1.55; }
.vs-lado__texto strong { color:#fff; }
.vs-lado__lista { display:grid; gap:8px; margin:6px 0 0; padding:0; list-style:none; }
.vs-lado__lista li { display:flex; align-items:center; gap:10px; min-height:40px; padding:0 12px; border-radius:14px;
  background:rgba(255,255,255,.07); color:#fff; font-size:14px; font-weight:600; }
.vs-lado__lista .material-symbols-outlined { color:var(--menta); }
.vs-lado__fim { margin-top:auto; display:grid; gap:10px; }
.vs-lado__convite { margin:0 0 4px; color:rgba(221,235,224,.8); font-size:13.5px; line-height:1.5; }
.vs-lado__cta, .vs-lado__entrar { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 18px;
  border:0; border-radius:999px; cursor:pointer; text-decoration:none; font:700 15px 'Plus Jakarta Sans', system-ui, sans-serif;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease; }
.vs-lado__cta { background:var(--menta); color:var(--floresta); box-shadow:0 12px 26px -14px rgba(0,0,0,.6); }
.vs-lado__cta:hover { transform:translateY(-1px); background:#fff; }
.vs-lado__entrar { background:transparent; color:var(--menta); box-shadow:inset 0 0 0 1.5px rgba(221,235,224,.4); }
.vs-lado__entrar:hover { background:rgba(255,255,255,.08); }
.vs-lado :is(.vs-lado__cta, .vs-lado__entrar, .sb-marca):focus-visible { outline:3px solid rgba(221,235,224,.7); outline-offset:3px; }

.vs-conta { display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:6px 4px 2px; }
.vs-conta .adicionar__titulo { padding:0 30px; }
.vs-conta .adicionar__sub { max-width:380px; margin:0; }
.vs-conta__mascote { width:104px; height:104px; object-fit:contain; }
.vs-conta__icone { display:grid; place-items:center; width:60px; height:60px; border-radius:20px; background:var(--menta); color:var(--floresta); }
.vs-conta__acoes { display:grid; gap:10px; width:100%; max-width:340px; margin-top:8px; }
.vs-conta__acoes .btn { height:48px; justify-content:center; font-size:15px; }
.vs-conta .adicionar__acoes { justify-content:center; }

/* "Em que pasta fica?" (ficar com a nota partilhada, 2026-10-19). */
.vs-ficar__corpo { display:flex; flex-direction:column; gap:14px; }
.vs-ficar__corpo > .adicionar__cabeca { padding-right:44px; }
.vs-ficar__form { display:flex; flex-direction:column; gap:14px; }
.vs-ficar__lista { display:grid; gap:8px; max-height:min(46vh, 360px); overflow-y:auto; padding:2px; margin:-2px; }
.vs-ficar__pasta { position:relative; display:flex; align-items:center; gap:12px; min-height:52px; padding:0 14px; border-radius:16px;
  background:var(--relevo-vidro, rgba(255,255,255,.8)); box-shadow:var(--elev-1); cursor:pointer;
  transition:box-shadow .18s ease, background-color .18s ease; }
.vs-ficar__pasta:hover { box-shadow:var(--relevo-levantado, var(--elev-1)); }
.vs-ficar__pasta input { position:absolute; opacity:0; pointer-events:none; }
.vs-ficar__pasta:has(input:checked) { background:var(--menta); box-shadow:inset 0 0 0 2px var(--esmeralda), var(--elev-1); }
.vs-ficar__pasta:has(input:focus-visible) { outline:3px solid rgba(47,163,107,.5); outline-offset:2px; }
.vs-ficar__pasta:has(input:disabled) { cursor:default; opacity:.7; }
.vs-ficar__cor { width:14px; height:14px; flex:none; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
.vs-ficar__cor--nova { display:grid; place-items:center; width:24px; height:24px; margin:0 -5px; background:transparent; box-shadow:none; color:var(--esmeralda); }
.vs-ficar__nome { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--tinta); font-size:15px; font-weight:700; }
.vs-ficar__marca { display:grid; place-items:center; width:26px; height:26px; flex:none; border-radius:50%;
  background:var(--esmeralda); color:#fff; opacity:0; transform:scale(.6); transition:opacity .18s ease, transform .18s ease; }
.vs-ficar__pasta:has(input:checked) .vs-ficar__marca { opacity:1; transform:none; }
.vs-ficar__novo-nome { width:100%; min-height:48px; box-sizing:border-box; padding:0 16px; border-radius:14px; border:0;
  background:var(--superficie, #fff); color:var(--tinta); font:600 15px 'Plus Jakarta Sans', system-ui, sans-serif;
  box-shadow:inset 0 0 0 2px var(--esmeralda), var(--elev-1); }
.vs-ficar__novo-nome:focus, .vs-ficar__novo-nome:focus-visible { outline:none !important; }
.vs-ficar__erro { margin:0; color:var(--perigo); font-size:14px; font-weight:700; text-align:center; }
.vs-ficar__acoes { justify-self:center; align-self:center; margin-top:2px; }
.vs-ficar__acoes .btn { width:100%; }
.vs-ficar__esqueleto { display:block; height:52px; border-radius:16px;
  background:linear-gradient(90deg, rgba(46,74,59,.06), rgba(46,74,59,.12), rgba(46,74,59,.06)); background-size:200% 100%;
  animation:vs-ficar-brilho 1.2s ease-in-out infinite; }
@keyframes vs-ficar-brilho { from { background-position:100% 0; } to { background-position:-100% 0; } }
@media (prefers-reduced-motion: reduce) {
  .vs-ficar__esqueleto { animation:none; }
  .vs-ficar__pasta, .vs-ficar__marca { transition:none; }
}

/* Na visita não há para onde voltar: a nota é de outra pessoa. */
body.em-visita #leitor #voltar { display:none !important; }
.vs-estado { margin:8px 0 0; color:var(--l-mutado, var(--muted)); font-size:17px; line-height:1.6; }
.vs-estado__botao { margin-top:18px; height:48px; padding:0 22px; }

.vs-barra { display:none; }
.vs-topo__marca { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px 0 10px; border-radius:999px;
  background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:var(--floresta);
  font:800 17px/1 'Newsreader', Georgia, serif; text-decoration:none; box-shadow:0 8px 22px -10px rgba(28,43,34,.45), 0 0 0 1px rgba(28,43,34,.06); }
.vs-topo__marca img { width:34px; height:25px; object-fit:contain; }
.vs-topo__acoes { display:flex; align-items:center; gap:8px; }
@media (max-width:899px) {
  .vs-barra { position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px)); z-index:55;
    display:flex; align-items:center; gap:8px; padding:8px 8px 8px 16px; border-radius:24px;
    background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    box-shadow:0 0 0 1px rgba(46,74,59,.08), 0 18px 40px -18px rgba(22,36,28,.55); }
  .vs-barra__texto { display:grid; gap:1px; min-width:0; flex:1; font-size:12.5px; line-height:1.3; color:var(--muted); }
  .vs-barra__texto strong { font:800 16px/1.1 'Newsreader', Georgia, serif; color:var(--floresta); }
  .vs-barra__entrar, .vs-barra__cta { min-height:44px; padding:0 16px; border:0; border-radius:999px; cursor:pointer; white-space:nowrap;
    font:700 14px 'Plus Jakarta Sans', system-ui, sans-serif; }
  .vs-barra__entrar { background:transparent; color:var(--floresta); }
  .vs-barra__cta { background:var(--floresta); color:#fff; }
  .vs-barra :is(button):focus-visible { outline:3px solid rgba(47,163,107,.5); outline-offset:2px; }
  /* A barra do chat e do índice da nota sobe para cima da faixa. */
  body.em-visita #leitor .nota-dock { bottom:calc(94px + env(safe-area-inset-bottom,0px)); }
}
@media (max-width:360px) { .vs-barra__texto span { display:none; } }
@media (prefers-reduced-motion: reduce) { .vs-lado__cta, .vs-lado__entrar { transition:none; } }

/* ---------- Progresso de capturas ---------- */
.captura-progresso { display:flex; flex-direction:column; gap:clamp(12px, 2vh, 16px); }
.captura-progresso__cabeca { display:flex; align-items:center; gap:14px; padding-right:44px; }
.captura-progresso__cabeca > div { min-width:0; }
.captura-progresso__icone {
  display:grid; place-items:center; width:52px; height:52px; flex:none; border-radius:18px;
  background:var(--menta); color:var(--floresta); box-shadow:inset 0 0 0 1px rgba(255,255,255,.8);
}
.captura-progresso__sobre { margin:0 0 4px; color:var(--esmeralda); font-size:11px; font-weight:800; letter-spacing:.1em; }
.captura-progresso h2 {
  margin:0; color:var(--tinta); font:800 clamp(19px, 2.8vh, 23px)/1.2 'Newsreader', Georgia, serif; letter-spacing:-.015em;
  overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.captura-progresso__estado {
  position:relative; overflow:hidden; display:flex; align-items:center; gap:12px; min-height:56px; box-sizing:border-box;
  padding:14px 16px; border-radius:18px; color:var(--tinta); font-size:14px; font-weight:700;
  background:rgba(255,255,255,.78); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.95), 0 12px 26px -20px rgba(22,36,28,.5);
}
.captura-progresso__barra {
  position:absolute; left:0; right:0; bottom:0; height:3px; overflow:hidden; background:rgba(47,163,107,.12);
}
.captura-progresso__barra::after {
  content:''; position:absolute; top:0; bottom:0; left:-38%; width:38%; border-radius:3px; background:var(--esmeralda);
  animation:captura-barra 1.4s cubic-bezier(.45,0,.4,1) infinite;
}
@keyframes captura-barra { from { left:-38%; } to { left:100%; } }
.captura-progresso__estado:is([data-captura-estado="pronto"], [data-captura-estado="erro"]) .captura-progresso__barra { display:none; }
.captura-progresso__estado[data-captura-estado="pronto"] { background:rgba(221,235,224,.95); color:var(--floresta); }
.captura-progresso__estado[data-captura-estado="erro"] { background:#FDECEA; color:var(--perigo); }
.captura-progresso__estado:is([data-captura-estado="pronto"], [data-captura-estado="erro"])::before {
  font-family:'Material Symbols Outlined'; font-size:22px; font-weight:400; line-height:1;
  font-variation-settings:'FILL' 1; flex:none;
}
.captura-progresso__estado[data-captura-estado="pronto"]::before { content:'check_circle'; color:var(--esmeralda); }
.captura-progresso__estado[data-captura-estado="erro"]::before { content:'error'; }
.captura-progresso__spinner { --anel:var(--esmeralda); --anel-fundo:color-mix(in srgb,var(--esmeralda) 18%,transparent); width:18px; height:18px; }
.captura-progresso__ajuda { margin:0; color:var(--muted); font-size:13px; line-height:1.55; }
.captura-progresso__ajuda strong { color:var(--tinta); }
.captura-progresso__acoes { display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
.captura-progresso__acoes:empty { display:none; }

/* Telemóvel: a zona empilha e o botão ocupa a largura; as formas viram linhas. */
@media (max-width:480px) {
  .adicionar__conteudo { border-radius:28px; }
  .adicionar__zona { grid-template-columns:auto 1fr; }
  .adicionar__zona-botao { grid-column:1 / -1; width:100%; justify-content:center; }
  .adicionar__formas { grid-template-columns:1fr; gap:10px; }
  .adicionar-forma { flex-direction:row; align-items:center; gap:12px; padding:12px 14px; }
  .adicionar-forma__seta { position:static; margin-left:auto; }
  .adicionar-forma__texto { padding-right:0; }
  .adicionar__acoes .btn, .captura-progresso__acoes .btn { flex:1 1 auto; justify-content:center; }
}
/* Ecrãs muito baixos (portátil pequeno com zoom, telemóvel deitado): tira-se
   o que é só ajuda, nunca o que se carrega. */
@media (max-height:500px) {
  .adicionar__cabeca .adicionar__sub, .adicionar__zona-texto small, .adicionar-forma__texto small, .adicionar__ajuda { display:none; }
  .adicionar-forma { flex-direction:row; align-items:center; gap:12px; }
  .adicionar-forma__seta { position:static; margin-left:auto; }
  .adicionar-forma__texto { padding-right:0; }
  .adicionar__zona-icone, .captura-progresso__icone { width:42px; height:42px; border-radius:14px; }
  .adicionar__cabeca--passo .adicionar-forma__icone { display:none; }
  .adicionar__conteudo, .adicionar__form, .captura-progresso { gap:8px; }
  .adicionar__conteudo { padding:14px 20px; }
  .adicionar__rotulo { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .adicionar__form > .adicionar__campo--nota { min-height:64px; }
  .adicionar__erro { padding:8px 12px; }
  .adicionar__acoes .btn, .captura-progresso__acoes .btn, .adicionar__zona-botao { height:44px; }
}
@media (prefers-reduced-motion: reduce) {
  dialog.adicionar[open], dialog.adicionar[open]::backdrop, .adicionar__conteudo.is-abanar,
  .adicionar__feito-icone, .captura-progresso__spinner, .adicionar-youtube__spinner { animation:none; }
  .captura-progresso__barra::after { animation:none; left:0; width:100%; opacity:.5; }
  .adicionar-forma, .adicionar__zona, .adicionar__fechar, .adicionar__zona-icone { transition:none; }
  .adicionar-forma:hover, .adicionar__zona.is-over, .adicionar__fechar:hover { transform:none; }
}

/* ---------- Texto de estudo: serifada, e só aqui ---------- */

.reading { font-family: 'Newsreader', Georgia, serif; font-size:19px; line-height: 28px; color: var(--texto); }
.reading li { display: flex; gap:var(--esp-md); align-items: flex-start; }
.reading li::before {
  content: ''; flex: none; width: 6px; height: 6px; border-radius:var(--raio-pilula);
  background: var(--salvia); margin-top:var(--esp-sm);
}
/* Palavra que o reconhecimento não teve a certeza. Nunca vermelho. */
.uncertain {
  background: var(--menta); border-radius:var(--raio-input); padding:0 var(--esp-xs);
  border-bottom: 1px dotted var(--salvia); cursor: help;
}

/* ---------- Segmentos e chips ---------- */

.seg { display: inline-flex; padding:var(--esp-xs); background: var(--superficie); border-radius:var(--raio-pilula); box-shadow: var(--sh-ambient); }
.seg button {
  border: 0; background: transparent; cursor: pointer; font-family: inherit;
  font-size:15px; font-weight: 600; color: var(--texto-secundario);
  padding:var(--esp-sm) var(--esp-lg); border-radius:var(--raio-pilula); 
}
.seg button.is-active { background: var(--floresta); color: var(--menta); }

.chip {
  border: 0; cursor: pointer; font-family: inherit; font-size:11px; font-weight: 600;
  padding:var(--esp-sm) var(--esp-md); border-radius:var(--raio-pilula); background: var(--superficie); color: var(--texto);
  
}
.chip.is-active { background: var(--primaria); color: var(--sobre-primaria); }

/* ---------- Toast ---------- */

#toast-host { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 60; display: grid; gap:var(--esp-sm); }
.toast {
  background: var(--floresta); color: var(--menta); padding:var(--esp-sm) var(--esp-md);
  border-radius:var(--raio-pilula); font-size:13px; box-shadow: var(--sh-lift);
  
}


/* ---------- Diálogo ---------- */

dialog { border: 0; padding:0; background: transparent; }
dialog::backdrop { background: rgba(28, 43, 34, .5); }
/* Seletor de pasta com aspeto de cartão/botão — para se perceber que é
   clicável (pedido do Jeremy), não um campo de formulário apagado. */
.campo-pasta { appearance:none; -webkit-appearance:none; box-sizing:border-box; height:52px; padding:0 44px 0 16px; border-radius:14px; border:1.5px solid var(--contorno); background:var(--superficie); color:var(--texto); font:600 15px inherit; cursor:pointer; box-shadow:var(--sh-ambient); background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%235F6E64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat:no-repeat; background-position:right 14px center; background-size:18px; transition:border-color .15s ease, box-shadow .15s ease, transform .08s ease; }
.campo-pasta:hover { border-color:var(--salvia); box-shadow:var(--sh-lift); }
.campo-pasta:active { transform:scale(.995); }
.campo-pasta:focus-visible { outline:none; border-color:var(--esmeralda); box-shadow:0 0 0 4px color-mix(in srgb, var(--esmeralda) 14%, transparent); }
/* Ecrã de fim da sessão de flashcards: blocos centrados e botões para
   continuar a treinar (quiz / desenvolvimento) sobre o fundo escuro. */
.sessao-fim__larg { width:100%; max-width:680px; margin-inline:auto; }
.sessao-stat { padding:20px 12px; }
.sessao-cont { display:flex; align-items:center; gap:12px; min-height:70px; padding:16px 20px; border-radius:16px; background:var(--esmeralda); color:#fff; text-align:left; text-decoration:none; font-weight:700; font-size:14px; line-height:1.25; box-shadow:0 6px 18px -6px rgba(47,163,107,.5); transition:transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.sessao-cont:hover { transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 10px 24px -6px rgba(47,163,107,.6); }
.sessao-cont__ic { flex:0 0 36px; width:36px; height:36px; display:grid; place-items:center; border-radius:10px; background:rgba(255,255,255,.22); color:#fff; }
.sessao-cont__ic .material-symbols-outlined { font-size:20px; }

/* ---------- Acessibilidade ---------- */

:focus-visible { outline: 2px solid var(--esmeralda); outline-offset: 2px; border-radius:var(--raio-input); }
@media (prefers-reduced-motion: reduce) { * {   } }

/* ---------- Banner offline ----------
   Aparece no topo da página, abaixo da titlebar, com fundo âmbar suave.
   Não é vermelho: o problema é de ligação, não de erro. */

.offline-banner {
  display: flex; align-items: center; gap:var(--esp-sm);
  padding:var(--esp-sm) var(--esp-md);
  background: rgba(224, 163, 57, .14);
  border-bottom: 1px solid rgba(224, 163, 57, .35);
  color: #6B4814;
  font: 500 13px 'Plus Jakarta Sans';
  
}
.offline-banner .material-symbols-outlined { font-size:19px; color: var(--historia); }
.offline-banner__retry {
  margin-left:auto;
  background: rgba(255, 255, 255, .6); border: 1px solid rgba(224, 163, 57, .4);
  border-radius:var(--raio-input); padding:var(--esp-xs) var(--esp-sm); font: 600 11px 'Plus Jakarta Sans';
  color: #6B4814; cursor: pointer;
  
}
.offline-banner__retry:hover { background: var(--superficie); }


/* ---------- Estado de erro por ecrã ----------
   Cartão centrado com ícone, mensagem e ação. Não usa vermelho como
   "alarme", mas sim cinza neutro + ícone âmbar (a ler "atenção", não
   "urgência"). */

.error-state {
  max-width: 480px; margin:var(--esp-xl) auto;
  background: var(--superficie); border-radius:var(--raio-cartao-2); padding:var(--esp-xl) var(--esp-xl);
  box-shadow: var(--sh-soft);
  text-align: center;
}
.error-state__icon {
  width: 56px; height: 56px; border-radius:var(--raio-pilula);
  background: var(--menta); color: var(--floresta);
  display: grid; place-items: center; margin:0 auto var(--esp-md);
}
.error-state__icon .material-symbols-outlined { font-size:24px; }
.error-state__title {
  font: 700 19px 'Newsreader'; color: var(--texto); letter-spacing: -.2px;
}
.error-state__msg {
  margin-top:var(--esp-sm);
  font: 500 13px 'Plus Jakarta Sans'; color: var(--texto-secundario);
}
.error-state__actions {
  margin-top:var(--esp-md); display: flex; gap:var(--esp-sm); justify-content: center;
}
.error-state__actions .btn { height: 40px; padding:0 var(--esp-md); }

/* Quando a leitura inicial falha, a navegacao continua visivel. O conteudo
   proprio da pagina nao: ainda e apenas o HTML estatico, sem os dados que o
   tornam legivel. */
.pagina--com-erro > :not(#titlebar):not(.error-state) { display:none !important; }
.pagina--com-erro { min-height:100dvh; display:flex; flex-direction:column; }
.pagina--com-erro .error-state { width:min(480px, calc(100% - 48px)); margin:auto; }

/* ---------- Chrome da aplicação desktop ----------
   Uma barra fina no topo (40 px) que se lê como titlebar nativa: marca à
   esquerda, vista atual no meio, ações à direita. Substitui a primeira
   impressão de "isto é um site" por "isto é uma aplicação". Não é uma
   tab bar de browser: é o topo da janela. */

.titlebar {
  height: 40px;
  padding:0 var(--esp-md) 0 var(--esp-sm);
  display: flex; align-items: center; gap:var(--esp-md);
  background: rgba(245, 247, 242, 0.85);
  -webkit-backdrop-filter: saturate(140%) blur(20px);
          backdrop-filter: saturate(140%) blur(20px);
  border-bottom: 1px solid rgba(127, 168, 140, .25);
  position: sticky; top: 0; z-index: 40;
  user-select: none;
  flex-shrink:0;
  margin-bottom:var(--esp-lg);
}
.titlebar__brand {
  display: flex; align-items: center; gap:var(--esp-sm);
  font-family: 'Newsreader', sans-serif; font-weight: 800; font-size:15px;
  color: var(--floresta);
  letter-spacing: -.3px;
}

.titlebar__view {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap:var(--esp-sm);
  font-size:13px; color: var(--texto-secundario); font-weight: 500;
}
.titlebar__view .material-symbols-outlined { font-size:15px; color: var(--salvia); }
.titlebar__view-name { color: var(--texto); font-weight: 600; }
.titlebar__actions { display: flex; align-items: center; gap:var(--esp-xs); }
.titlebar__btn {
  display: inline-flex; align-items: center; gap:var(--esp-xs);
  height: 30px; padding:0 var(--esp-sm); border-radius:var(--raio-input);
  background: transparent; border: 0; cursor: pointer;
  font: 500 13px 'Plus Jakarta Sans'; color: var(--floresta);
  
}
.titlebar__btn:hover { background: rgba(46, 74, 59, .08); }
.titlebar__btn .material-symbols-outlined { font-size:19px; }

/* Trigger de pesquisa no centro da titlebar: parece widget nativo, abre um
   command palette quando clicado ou com Ctrl K. */
.titlebar__search {
  display: flex; align-items: center; gap:var(--esp-sm);
  width: 420px; height: 30px; padding:0 var(--esp-sm) 0 var(--esp-sm);
  border-radius:var(--raio-input);
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(127, 168, 140, .3);
  color: var(--texto-secundario);
  font: 500 13px 'Plus Jakarta Sans';
  cursor: pointer; text-align: left;
  
}
.titlebar__search:hover {
  background: var(--superficie); border-color: var(--salvia);
  box-shadow: 0 0 0 4px rgba(47, 163, 107, .08);
}
.titlebar__search .material-symbols-outlined { font-size:15px; color: var(--salvia); }
.titlebar__search-typing { flex: 1; }
.titlebar__search-kbd {
  display: inline-flex; gap:var(--esp-xs);
}

/* Indicador de sync no canto direito: verde = sincronizado, âmbar = a
   sincronizar, cinzento = offline. É uma bolinha de 8 px, não um spinner. */
.sync-dot {
  width: 8px; height: 8px; border-radius:var(--raio-pilula);
  background: var(--esmeralda);
  box-shadow: 0 0 0 3px rgba(47, 163, 107, .18);
}
.sync-dot.is-pending { background: var(--historia); box-shadow: 0 0 0 3px rgba(224, 163, 57, .2);  }
.sync-dot.is-offline { background: var(--muted); box-shadow: 0 0 0 3px rgba(95, 110, 100, .15); }


/* Avatar pequeno no canto direito da titlebar (ciclo curto: vai ao perfil). */
.titlebar__avatar {
  width: 28px; height: 28px; border-radius:var(--raio-pilula);
  background: var(--floresta); color: var(--menta);
  display: grid; place-items: center;
  font: 600 11px 'Plus Jakarta Sans';
  cursor: pointer; border: 0;
  
}
.titlebar__avatar:hover { box-shadow: 0 0 0 4px rgba(47, 163, 107, .15); }

/* ---------- Command palette (Ctrl K) ----------
   O coração da navegação por teclado em desktop. Não é uma modal genérica:
   é uma janela flutuante estreita, com input sempre focado, agrupamento por
   tipo, atalhos numerados, e ↑↓ para navegar. */

.palette-backdrop {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(28, 43, 34, .35);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: grid; place-items: start center;
  padding-top:12vh;
  
}
.palette {
  width: 640px; max-width: calc(100vw - 32px);
  background: var(--superficie); border-radius:var(--raio-input);
  box-shadow: 0 24px 60px rgba(28, 43, 34, .28),
              0 8px 24px rgba(28, 43, 34, .18);
  overflow: hidden;
  display: flex; flex-direction: column;
  
}


.palette__input-row {
  display: flex; align-items: center; gap:var(--esp-sm);
  padding:var(--esp-md) var(--esp-md);
  border-bottom: 1px solid rgba(127, 168, 140, .25);
}
.palette__input-row .material-symbols-outlined { font-size:24px; color: var(--salvia); }
.palette__input {
  flex: 1; border: 0; outline: none; background: transparent;
  font: 500 15px 'Plus Jakarta Sans'; color: var(--texto);
  font-family: inherit;
}
.palette__input::placeholder { color: var(--texto-secundario); }
.palette__esc { display: inline-flex; gap:var(--esp-xs); }
.palette__list {
  max-height: 420px; overflow-y: auto;
  padding:var(--esp-sm) var(--esp-sm) var(--esp-sm);
}
.palette__group-label {
  font: 600 11px 'Plus Jakarta Sans';
  letter-spacing: .6px; text-transform: uppercase;
  color: var(--texto-secundario);
  padding:var(--esp-sm) var(--esp-sm) var(--esp-xs);
}
.palette__item {
  display: flex; align-items: center; gap:var(--esp-sm);
  padding:var(--esp-sm) var(--esp-sm); border-radius:var(--raio-input);
  cursor: pointer; user-select: none;
  color: var(--texto);
}
.palette__item.is-active { background: var(--menta); }
.palette__item-icon {
  width: 32px; height: 32px; border-radius:var(--raio-input);
  display: grid; place-items: center;
  background: var(--fundo); color: var(--floresta); flex: none;
}
.palette__item.is-active .palette__item-icon { background: var(--superficie); }
.palette__item-icon .material-symbols-outlined { font-size:19px; }
.palette__item-main { flex: 1; min-width: 0; }
.palette__item-title {
  font: 500 13px 'Plus Jakarta Sans'; color: var(--texto);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.palette__item.is-active .palette__item-title { color: var(--floresta); font-weight: 600; }
.palette__item-sub { font: 400 11px 'Plus Jakarta Sans'; color: var(--texto-secundario); }
.palette__item-key {
  font: 600 11px 'Plus Jakarta Sans'; color: var(--texto-secundario);
  padding:var(--esp-xs) var(--esp-sm); border-radius:var(--raio-input);
  background: var(--fundo); border: 1px solid rgba(127, 168, 140, .3);
  font-family: inherit;
}
.palette__item.is-active .palette__item-key { background: var(--superficie); border-color: var(--salvia); }
.palette__empty {
  padding:var(--esp-xl) var(--esp-md); text-align: center; color: var(--texto-secundario);
  font: 500 13px 'Plus Jakarta Sans';
}
.palette__foot {
  display: flex; align-items: center; gap:var(--esp-md);
  padding:var(--esp-sm) var(--esp-md);
  border-top: 1px solid rgba(127, 168, 140, .25);
  background: rgba(245, 247, 242, .7);
  font: 500 11px 'Plus Jakarta Sans'; color: var(--texto-secundario);
}
.palette__foot-item { display: inline-flex; align-items: center; gap:var(--esp-xs); }
.palette__foot kbd {
  font: 600 11px 'Plus Jakarta Sans';
  padding:var(--esp-xs) var(--esp-xs); border-radius:var(--raio-input);
  background: var(--superficie); border: 1px solid rgba(127, 168, 140, .3);
  color: var(--floresta);
  font-family: inherit;
}

/* ---------- Janela de autenticação ----------
   Janela centrada, com cantos arredondados, sombra "chrome", e o desktop
   desfocado por trás. É isto que dá a primeira impressão de "isto é uma
   aplicação, não um site". O backdrop blur é nativo (CSS), não requer JS. */

.auth-scene {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background:var(--fundo);
  padding:var(--esp-xl);
}






.auth-window {
  position: relative; z-index: 2;
  width: 480px; max-width: 100%;
  background: var(--superficie); border-radius:var(--raio-input);
  box-shadow: 0 0 0 1px rgba(46, 74, 59, .08),
              0 24px 80px rgba(46, 74, 59, .22);
  overflow: hidden;
  
}

.auth-window__titlebar {
  height: 40px;
  display: flex; align-items: center; gap:var(--esp-sm);
  padding:0 var(--esp-md);
  background: rgba(245, 247, 242, .85);
  border-bottom: 1px solid rgba(127, 168, 140, .25);
}





.auth-window__title {
  flex: 1; text-align: center;
  font: 600 11px 'Plus Jakarta Sans'; color: var(--texto-secundario);
}
.auth-window__brand {
  display: flex; align-items: center; gap:var(--esp-sm);
  font: 800 13px 'Newsreader'; color: var(--floresta);
  letter-spacing: -.2px;
}

.auth-window__body { padding:var(--esp-xl) var(--esp-xl) var(--esp-xl); }
.auth-window__heading {
  font: 800 24px 'Newsreader'; color: var(--texto);
  letter-spacing: -.5px; line-height: 1.1; margin:0;
}
.auth-window__sub {
  margin-top:var(--esp-sm);
  font: 500 13px 'Plus Jakarta Sans'; color: var(--texto-secundario);
}
.auth-window__foot {
  padding:var(--esp-md) var(--esp-xl) var(--esp-lg);
  background: rgba(245, 247, 242, .7);
  border-top: 1px solid rgba(127, 168, 140, .2);
  display: flex; align-items: center; justify-content: space-between;
  font: 500 13px 'Plus Jakarta Sans'; color: var(--texto-secundario);
}

/* Campos de formulário com label flutuante: o label começa dentro do campo
   e sobe quando há foco ou valor. É o padrão de macOS / iOS / Material, e
   mantém o campo limpo quando vazio. */
.field {
  position: relative; margin-top:var(--esp-lg);
}
.field__label {
  position: absolute; left: 16px; top: 14px;
  font: 500 15px 'Plus Jakarta Sans'; color: var(--texto-secundario);
  pointer-events: none;
  
  background: transparent;
}
.field__input {
  width: 100%; height: 54px;
  padding:var(--esp-lg) var(--esp-md) var(--esp-sm);
  border: 1.5px solid rgba(127, 168, 140, .5);
  border-radius:var(--raio-input);
  background: var(--superficie); color: var(--texto);
  font: 500 15px 'Plus Jakarta Sans';
  
  outline: none;
}
.field__input:hover { border-color: var(--salvia); }
.field__input:focus { border-color: var(--esmeralda); box-shadow: 0 0 0 4px rgba(47, 163, 107, .15); }
.field__input:focus + .field__label,
.field__input:not(:placeholder-shown) + .field__label {
  transform: translateY(-10px);
  font-size:11px; color: var(--acento); font-weight: 600;
  letter-spacing: .3px; text-transform: uppercase;
}
.field__hint {
  margin-top:var(--esp-sm);
  font: 500 11px 'Plus Jakarta Sans'; color: var(--texto-secundario);
  display: flex; align-items: center; gap:var(--esp-xs);
}
.field.is-invalid .field__input { border-color: var(--perigo); box-shadow: 0 0 0 4px rgba(186, 26, 26, .12); }
.field.is-invalid .field__label { color: var(--perigo); }
.field.is-invalid .field__hint { color: var(--perigo); }

/* Login desktop: composição horizontal curta e inteira na viewport. */
.login-page { overflow:hidden; }
.login-page .auth-scene {
  width:100%; height:100dvh; min-height:100dvh;
  padding:24px; overflow:hidden;
}
.login-page .auth-window {
  width:min(920px, calc(100vw - 48px));
  height:min(620px, calc(100dvh - 48px));
  min-height:min(560px, calc(100dvh - 48px));
  display:grid; grid-template-columns:minmax(320px, .86fr) minmax(460px, 1.14fr);
  border:1px solid var(--contorno); border-radius:28px;
  background:var(--superficie); overflow:hidden;
  box-shadow:0 24px 64px rgba(46,74,59,.16);
}
.auth-window__intro {
  position:relative; isolation:isolate;
  display:flex; flex-direction:column; min-width:0;
  padding:32px 40px 36px;
  background:var(--floresta); color:var(--fundo);
  overflow:hidden;
}
.auth-window__intro::after {
  content:""; position:absolute; z-index:-1;
  width:360px; aspect-ratio:1; border-radius:50%;
  right:-190px; bottom:-210px;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 0 0 42px rgba(255,255,255,.035), 0 0 0 84px rgba(255,255,255,.025);
}
.auth-window__eyebrow {
  display:flex; align-items:center; gap:8px;
  font:700 11px 'Plus Jakarta Sans'; letter-spacing:1.2px;
  text-transform:uppercase; color:rgba(245,247,242,.72);
}
.auth-window__eyebrow span {
  width:7px; height:7px; border-radius:50%; background:var(--menta);
  box-shadow:0 0 0 4px rgba(126,221,161,.12);
}
.login-page .auth-window .mascote {
  flex:1; min-height:220px; padding:8px 0 4px;
  align-items:center; justify-content:center; overflow:visible;
}
.login-page .auth-window .auth-window__heading {
  max-width:9ch; margin:0;
  font:800 38px/1.02 'Newsreader'; letter-spacing:-1.2px;
  color:var(--fundo);
}
.login-page .auth-window .auth-window__sub {
  max-width:32ch; margin:12px 0 0;
  font:600 14px/1.55 'Plus Jakarta Sans'; color:rgba(245,247,242,.9);
}
.auth-window__note {
  max-width:34ch; margin:16px 0 0; padding-top:16px;
  border-top:1px solid rgba(255,255,255,.16);
  font:500 11px/1.55 'Plus Jakarta Sans'; color:rgba(245,247,242,.62);
}
.auth-window__panel {
  min-width:0; min-height:0; display:flex; flex-direction:column;
  background:var(--superficie);
}
.login-page .auth-window .auth-window__body {
  flex:1; display:flex; flex-direction:column;
  padding:42px 48px 28px;
}
.login-page .auth-window .field { margin-top:20px; }
.login-page .auth-window .field:first-child { margin-top:0; }
.login-page .auth-window .field__label {
  position:static; display:block; margin:0 0 8px;
  font:700 12px/1.2 'Plus Jakarta Sans'; color:var(--texto);
  pointer-events:auto; text-transform:none; letter-spacing:0;
  transform:none;
}
.login-page .auth-window .field__input {
  height:50px; padding:0 15px;
  border:1.5px solid color-mix(in srgb,var(--salvia) 58%,var(--contorno));
  border-radius:12px;
  background:color-mix(in srgb,var(--fundo) 55%,var(--superficie));
  font-size:14px;
  box-shadow:inset 0 0 0 1px var(--contorno), 0 1px 2px rgba(46,74,59,.04);
}
.login-page .auth-window .field__input::placeholder { color:color-mix(in srgb,var(--texto-secundario) 70%,transparent); }
.login-page .auth-window .field__input:focus {
  border-color:var(--esmeralda); background:var(--superficie);
  box-shadow:0 0 0 4px rgba(47,163,107,.12);
}
.login-page .auth-window .field__hint { margin-top:6px; font-size:10px; line-height:1.4; }
.auth-options {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-top:18px;
  font:600 11px/1.4 'Plus Jakarta Sans'; color:var(--texto-secundario);
}
.auth-options__remember { display:inline-flex; align-items:center; gap:8px; cursor:pointer; white-space:nowrap; }
.auth-options__remember input { width:16px; height:16px; margin:0; accent-color:var(--esmeralda); }
.auth-options a { text-decoration:none; }
.auth-options a:hover { text-decoration:underline; text-underline-offset:3px; }
.login-page .auth-window .auth-submit { width:100%; height:50px; margin-top:22px; border-radius:12px; }
.auth-divider {
  display:flex; align-items:center; gap:12px; margin:16px 0;
  color:var(--texto-secundario);
  font:700 10px/1 'Plus Jakarta Sans'; letter-spacing:.8px; text-transform:uppercase;
}
.auth-divider::before, .auth-divider::after { content:""; flex:1; height:1px; background:var(--contorno); }
.auth-google {
  width:100%; height:48px; gap:10px;
  border:1.5px solid var(--contorno); border-radius:12px;
  background:var(--superficie); color:var(--texto);
  font:700 13px 'Plus Jakarta Sans';
  box-shadow:inset 0 0 0 1px var(--contorno);
}
.auth-google:hover { border-color:var(--salvia); background:var(--fundo); box-shadow:inset 0 0 0 1px var(--salvia); }
.login-page .auth-window .auth-window__foot {
  min-height:68px; padding:16px 48px;
  background:var(--fundo) !important;
  border-top:1px solid var(--contorno); border-radius:0;
  font-size:12px;
  box-shadow:inset 0 1px 0 var(--contorno);
}
.login-page .auth-window .auth-window__foot a {
  display:inline-flex; align-items:center; gap:6px;
  color:var(--esmeralda) !important; font-weight:700; text-decoration:none;
}
.login-page .auth-window .auth-window__foot a:hover { gap:9px; }

/* Botão primário largo com estado de loading inline. */
.btn-xl {
  display: inline-flex; align-items: center; justify-content: center; gap:var(--esp-sm);
  width: 100%; height: 50px; padding:0 var(--esp-md);
  border-radius:var(--raio-input); border: 0; cursor: pointer;
  background: var(--primaria); color: var(--sobre-primaria);
  font: 600 15px 'Plus Jakarta Sans';
  
}
.btn-xl:hover { filter: brightness(.94); }
.btn-xl:active { transform: translateY(1px); }
.btn-xl[disabled] { opacity: .65; cursor: progress; }
.btn-xl .spinner {
  width: 16px; height: 16px; border-radius:var(--raio-pilula);
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  
}


/* ---------- Boot screen ----------
   Aparece por 280 ms enquanto a "aplicação" carrega. Faz parte da
   ilusão de native: nunca se vê o browser a pintar o fundo branco. */






/* ---------- Onboarding wizard ----------
   Ecrã-a-ecrã, com progress dots, ilustrações SVG inline, e micro-celebrações
   entre passos. O background é o mesmo da auth scene (blur orgânico). */

.wizard {
  position: relative; z-index: 2;
  width: 720px; max-width: 100%;
  background: var(--superficie); border-radius:var(--raio-cartao-2);
  box-shadow: 0 0 0 1px rgba(46, 74, 59, .08),
              0 24px 80px rgba(46, 74, 59, .22);
  overflow: hidden;
  
}
.wizard__progress {
  display: flex; gap:var(--esp-xs);
  padding:var(--esp-md) var(--esp-lg);
  border-bottom: 1px solid rgba(127, 168, 140, .25);
}
.wizard__progress-dot {
  flex: 1; height: 4px; border-radius:var(--raio-pilula);
  background: rgba(127, 168, 140, .3);
  
}
.wizard__progress-dot.is-done { background: var(--esmeralda); }
.wizard__progress-dot.is-current {
  background: var(--esmeralda);
  position: relative; overflow: hidden;
}
.wizard__progress-dot.is-current::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.5), transparent);
  
}

.wizard__body { padding:var(--esp-xl) var(--esp-xl) var(--esp-lg); }
.wizard__step {
  font: 600 11px 'Plus Jakarta Sans'; letter-spacing: .6px;
  text-transform: uppercase; color: var(--esmeralda);
}
.wizard__heading {
  margin-top:var(--esp-sm);
  font: 800 32px 'Newsreader'; color: var(--texto);
  letter-spacing: -.6px; line-height: 1.1;
}
.wizard__sub {
  margin-top:var(--esp-sm);
  font: 500 15px 'Plus Jakarta Sans'; color: var(--texto-secundario);
  max-width: 56ch;
}
.wizard__illustration {
  margin:var(--esp-lg) auto var(--esp-sm);
  display: block;
}
.wizard__choices {
  display: grid; gap:var(--esp-sm);
  margin-top:var(--esp-lg);
}
.wizard__choice {
  display: flex; align-items: center; gap:var(--esp-md);
  padding:var(--esp-md) var(--esp-md);
  background: var(--superficie-elevada); box-shadow: var(--sh-ambient);
  border-radius:var(--raio-input);
  cursor: pointer;
  text-align: left; width: 100%;
}
.wizard__choice:hover { box-shadow: var(--sh-lift); }
.wizard__choice.is-selected {
  background: var(--menta);
  box-shadow: var(--sh-lift), 0 0 0 2px var(--esmeralda) inset;
}
.wizard__choice-mark {
  width: 22px; height: 22px; border-radius:var(--raio-pilula);
  display: grid; place-items: center; flex: none;
  background: var(--superficie);
}
.wizard__choice.is-selected .wizard__choice-mark {
  background: var(--esmeralda); border-color: var(--esmeralda); color: #fff;
}
.wizard__choice-mark .material-symbols-outlined { font-size:15px; }
.wizard__choice-text { flex: 1; }
.wizard__choice-title {
  font: 600 15px 'Plus Jakarta Sans'; color: var(--texto);
}
.wizard__choice-sub {
  margin-top:var(--esp-xs);
  font: 500 13px 'Plus Jakarta Sans'; color: var(--texto-secundario);
}
.wizard__foot {
  padding:var(--esp-md) var(--esp-lg) var(--esp-lg);
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(245, 247, 242, .7);
  border-top: 1px solid rgba(127, 168, 140, .2);
}
.wizard__foot-skip {
  font: 500 13px 'Plus Jakarta Sans'; color: var(--texto-secundario);
  background: transparent; border: 0; cursor: pointer;
  padding:var(--esp-sm) var(--esp-xs);
}
.wizard__foot-skip:hover { color: var(--floresta); }

/* Celebração: confete SVG inline por cima do wizard. Não usa libs externas. */
.celebration {
  position: absolute; inset: 0; pointer-events: none;
  display: grid; place-items: center;
  z-index: 3;
  
}
.celebration__check {
  width: 72px; height: 72px; border-radius:var(--raio-pilula);
  background: var(--primaria); color: var(--sobre-primaria);
  display: grid; place-items: center;
  box-shadow: 0 12px 32px rgba(47, 163, 107, .35);
  
}
.celebration__check .material-symbols-outlined { font-size:32px; font-variation-settings: 'wght' 600; }

/* ---------- Onboarding v3: réplica fiel do mobile ----------
   Barra contínua em vez de pontos (aguenta 10 passos sem virar ruído),
   opções de um toque com emoji em vez de ícone Material (como no mobile),
   e o botão "apagado" em vez de erro por toque inválido. */

.wizard__header {
  display: flex; align-items: center; gap:var(--esp-sm);
  padding:var(--esp-sm) var(--esp-md) var(--esp-sm) var(--esp-xs);
  border-bottom: 1px solid rgba(127, 168, 140, .25);
}
.wizard__back {
  width: 40px; height: 40px; flex: none; border: 0; background: transparent;
  border-radius:var(--raio-pilula); cursor: pointer; color: var(--texto);
  display: grid; place-items: center;
}
.wizard__back:hover { background: rgba(127, 168, 140, .15); }
.wizard__back[hidden] { visibility: hidden; }
.wizard__progress-track {
  flex: 1; height: 4px; border-radius:var(--raio-pilula);
  background: rgba(127, 168, 140, .3); overflow: hidden;
}
.wizard__progress-fill {
  height: 100%; border-radius:var(--raio-pilula); background: var(--esmeralda);
  transition: width .32s cubic-bezier(.33,1,.68,1);
}

.wizard__mascote { height:100px; display:flex; align-items:flex-end; justify-content:center; }

.wizard__choice-mark.is-emoji { font-size:19px; background:transparent; border-color:transparent; }

/* Pastilha (chip) de disciplina: por escolher vs. escolhida-com-remover.
   O app inteiro define forma por SUPERFÍCIE + sombra, nunca por contorno
   (responsive.css força border-width:0 em tudo de propósito — ver o
   comentário lá). Uma pastilha sobre um cartão da mesma cor que ela só se
   lê se tiver um tom de superfície diferente do fundo onde está. */
.pastilha {
  cursor: pointer; font-family: inherit;
  font-size:13px; font-weight: 600; padding:var(--esp-sm) var(--esp-md);
  border-radius:var(--raio-pilula); background: var(--superficie-elevada); color: var(--texto);
  box-shadow: var(--sh-ambient);
  display: inline-flex; align-items: center; gap:6px;
}
.pastilha:hover { box-shadow: var(--sh-lift); }
.pastilha.is-active { background: var(--menta); color: var(--floresta); box-shadow: var(--sh-lift); }
.pastilha__remover {
  border: 0; background: transparent; cursor: pointer; color: inherit; opacity: .6;
  display: grid; place-items: center; padding: 0; font-size:15px; line-height: 1;
}
.pastilha__remover:hover { opacity: 1; }

.wizard__campo {
  width: 100%; border-radius:var(--raio-input);
  background: var(--superficie-elevada); box-shadow: var(--sh-ambient); padding:var(--esp-md);
  font: 500 15px 'Plus Jakarta Sans'; color: var(--texto); outline: none;
}
.wizard__campo:focus { box-shadow: var(--sh-lift), 0 0 0 2px var(--esmeralda) inset; }

/* Botão "apagado": nunca some, só deixa de responder — não há toast de erro. */
.btn[disabled] { opacity:.4; cursor:not-allowed; filter:none; pointer-events:none; }

/* ---------- Questões: estudo ativo, sem cartões panorâmicos ---------- */
.questoes-main { min-height:0; }
/* Grelha de três faixas: um espaçador à esquerda com a mesma largura da coluna
   lateral mantém a coluna de conteúdo (perguntas/opções) opticamente ao centro
   do ecrã, e a coluna lateral vive à direita. As áreas mudam por ecrã: no quiz
   a lateral alinha com o primeiro cartão de opção; no desenvolvimento alinha
   com a barra verde de progresso. */
.questoes-layout { width:100%; display:grid; grid-template-columns:232px minmax(0, 660px) 232px; column-gap:36px; justify-content:center; align-items:start; }
.questoes-layout--aside-opcoes { grid-template-areas:". topo ." ". barra ." ". head ." ". body aside"; }
.questoes-layout--aside-barra { grid-template-areas:". topo ." ". barra aside" ". body aside"; }
.questoes-layout--solo { grid-template-columns:minmax(0, 640px); grid-template-areas:"topo" "body"; }
.questoes-topo { grid-area:topo; }
.questoes-progresso { grid-area:barra; }
.questoes-head { grid-area:head; margin-bottom:22px; min-width:0; }
.questoes-body { grid-area:body; min-width:0; }
.questoes-aside { grid-area:aside; align-self:start; }
.questoes-topo { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.questoes-voltar { width:36px; height:36px; display:grid; place-items:center; color:var(--texto); background:var(--superficie); border:1px solid var(--contorno); border-radius:50%; text-decoration:none; transition:box-shadow .2s ease, transform .2s ease; }
.questoes-voltar:hover { box-shadow:var(--sh-lift); transform:translateY(-1px); }
.questoes-disciplina { min-width:0; flex:1; }
.questoes-disciplina small { display:block; font-size:11px; color:var(--texto-secundario); margin-bottom:2px; }
.questoes-disciplina strong { font-size:15px; font-weight:700; }
.questoes-fechar { width:36px; height:36px; display:grid; place-items:center; border:0; background:transparent; color:var(--texto-secundario); border-radius:50%; cursor:pointer; }
.questoes-fechar:hover { background:var(--menta); color:var(--floresta); }
.questoes-progresso { height:5px; border-radius:999px; background:var(--menta); overflow:hidden; margin-bottom:22px; }
.questoes-progresso i { display:block; height:100%; background:var(--esmeralda); border-radius:inherit; transition:width .35s ease; }
.questoes-pergunta { font-family:'Newsreader', Georgia, serif; font-size:clamp(25px, 3vw, 33px); line-height:1.23; font-weight:500; letter-spacing:-.2px; color:var(--texto); margin:0; }
.questoes-vale { margin:8px 0 20px; color:var(--texto-secundario); font-size:13px; }
.quiz-opcoes { display:grid; gap:10px; }
.quiz-opcao { display:flex; align-items:center; text-align:left; width:100%; min-height:58px; padding:11px 16px; gap:14px; background:var(--superficie); border:1.5px solid transparent; border-radius:16px; color:var(--texto); cursor:pointer; font-family:inherit; font-size:15px; line-height:1.42; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .18s ease, background .18s ease; }
.quiz-opcao:hover:not(:disabled) { transform:translateY(-2px); border-color:var(--salvia); box-shadow:var(--sh-ambient); }
.quiz-opcao:focus-visible { outline:3px solid color-mix(in srgb, var(--esmeralda) 28%, transparent); outline-offset:2px; }
.quiz-letra { flex:0 0 30px; width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:var(--menta); color:var(--floresta); font-size:12px; font-weight:800; }
.quiz-opcao.is-certa { background:var(--esmeralda); color:#fff; border-color:var(--esmeralda); }
.quiz-opcao.is-certa .quiz-letra { background:rgba(255,255,255,.2); color:#fff; }
.quiz-opcao.is-errada { border-color:var(--perigo); background:color-mix(in srgb, var(--perigo) 9%, var(--superficie)); color:var(--texto); opacity:1; }
.quiz-opcao.is-errada .quiz-letra { background:var(--perigo); color:#fff; }
.quiz-opcao.is-apagada { opacity:.45; }
.quiz-feedback { margin-top:16px; padding:15px 18px; display:flex; align-items:flex-start; gap:12px; border-radius:16px; background:var(--menta); color:var(--floresta); animation:questoes-entra .25s ease both; }
.quiz-feedback--certo { align-items:center; }
.quiz-feedback--erro { background:color-mix(in srgb, var(--papel) 68%, var(--menta)); }
.quiz-feedback .material-symbols-outlined { font-size:20px; margin-top:1px; }
.quiz-feedback strong { display:block; font-size:14px; margin-bottom:3px; }
.quiz-feedback--certo p { margin:0; font-family:'Newsreader', Georgia, serif; font-size:16px; line-height:1.3; color:var(--texto-secundario); }
/* Traço fino que se enche em 3s: o aluno vê que a próxima pergunta está a chegar. */
.quiz-avanco { margin-left:auto; align-self:center; flex:0 0 auto; width:46px; height:4px; border-radius:999px; background:color-mix(in srgb, var(--floresta) 16%, transparent); overflow:hidden; }
.quiz-avanco i { display:block; height:100%; width:0; background:var(--esmeralda); border-radius:inherit; animation:quiz-avanco 3s linear forwards; }
@keyframes quiz-avanco { from { width:0; } to { width:100%; } }
.quiz-explica { min-width:0; }
.quiz-explica strong { display:block; font-size:13px; color:var(--floresta); margin-bottom:8px; }
.quiz-explica__certa { margin:0 0 8px; font-family:'Newsreader', Georgia, serif; font-size:18px; line-height:1.3; font-weight:600; color:var(--floresta); }
.quiz-explica__texto { margin:0; font-size:14px; line-height:1.5; color:var(--texto); }
.questoes-aside__acao:empty { display:none; }
.questoes-aside__acao .quiz-continuar { width:100%; margin:0; animation:questoes-entra .25s ease both; }
.questoes-aside { position:sticky; top:24px; }
.questoes-aside__bloco { padding:18px; background:var(--superficie); border:1px solid var(--contorno); border-radius:18px; margin-bottom:12px; }
.questoes-aside__kicker { display:block; color:var(--texto-secundario); font-size:11px; margin-bottom:6px; }
.questoes-aside__valor { color:var(--texto); font-size:18px; font-weight:800; }
.questoes-aside__nota { color:var(--texto-secundario); font-size:12px; line-height:1.4; margin:8px 0 0; }
.questoes-aside kbd { display:inline-grid; place-items:center; min-width:22px; height:20px; padding:0 5px; margin-right:4px; border:1px solid var(--contorno); border-radius:6px; background:var(--papel); color:var(--texto-secundario); font-size:10px; font-family:inherit; }
.questoes-config { max-width:560px; margin:36px auto 0; }
.questoes-config h1, .questoes-fecho h1 { font-size:28px; line-height:1.15; margin:0; }
.questoes-config > p { margin:9px 0 26px; color:var(--texto-secundario); font-size:14px; }
.questoes-escolhas { display:grid; gap:10px; }
.questoes-escolha { display:flex; align-items:center; gap:14px; padding:17px 18px; text-align:left; color:var(--texto); background:var(--superficie); border:1.5px solid var(--contorno); border-radius:18px; cursor:pointer; font-family:inherit; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.questoes-escolha:hover { transform:translateY(-2px); box-shadow:var(--sh-ambient); border-color:var(--salvia); }
.questoes-escolha__icone { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:var(--menta); color:var(--floresta); }
.questoes-escolha strong { display:block; font-size:15px; }
.questoes-escolha small { display:block; color:var(--texto-secundario); font-size:12px; margin-top:3px; }
.questoes-escolha .material-symbols-outlined:last-child { margin-left:auto; color:var(--texto-secundario); }
.desenvolvimento-resposta { width:100%; height:clamp(200px, 40vh, 340px); box-sizing:border-box; padding:20px; resize:none; font:400 19px/1.48 'Newsreader', Georgia, serif; color:var(--texto); background:var(--superficie); border:1.5px solid var(--contorno); border-radius:18px; outline:none; transition:border-color .18s ease, box-shadow .18s ease; }
.desenvolvimento-resposta:focus { border-color:var(--esmeralda); box-shadow:0 0 0 4px color-mix(in srgb, var(--esmeralda) 14%, transparent); }
.desenvolvimento-resposta::placeholder { color:var(--texto-secundario); opacity:.72; }
.desenvolvimento-acoes { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:16px; }
.desenvolvimento-dica { color:var(--texto-secundario); font-size:12px; }
.desenvolvimento-dica kbd { display:inline-grid; place-items:center; min-width:22px; height:20px; padding:0 5px; margin:0 2px; border:1px solid var(--contorno); border-radius:6px; background:var(--papel); color:var(--texto-secundario); font-size:10px; font-family:inherit; }

/* Prova de desenvolvimento: é uma vista de trabalho, não um artigo. No
   desktop a pergunta, o campo e a ação dividem a altura útil da janela para
   o aluno nunca ter de rolar a página antes de responder. Se escrever uma
   resposta muito longa, apenas o próprio campo rola. */
@media (min-width:900px) {
  body[data-questoes="desenvolvimento"] .questoes-main .shell__scroll { overflow:hidden; }
  body[data-questoes="desenvolvimento"] #questoes-app { height:100%; box-sizing:border-box; padding:16px 32px !important; }
  body[data-questoes="desenvolvimento"] .questoes-layout--aside-barra { height:100%; grid-template-rows:auto 5px minmax(0,1fr); row-gap:0; }
  body[data-questoes="desenvolvimento"] .questoes-layout--aside-barra .questoes-topo { margin-bottom:12px; }
  body[data-questoes="desenvolvimento"] .questoes-layout--aside-barra .questoes-progresso { margin-bottom:12px; }
  body[data-questoes="desenvolvimento"] .questoes-layout--aside-barra .questoes-body { min-height:0; display:grid; grid-template-rows:auto auto minmax(130px,1fr) auto; row-gap:10px; }
  body[data-questoes="desenvolvimento"] .questoes-layout--aside-barra .questoes-pergunta { font-size:clamp(22px, 2vw, 29px); line-height:1.16; }
  body[data-questoes="desenvolvimento"] .questoes-layout--aside-barra .questoes-vale { margin:0; }
  body[data-questoes="desenvolvimento"] .questoes-layout--aside-barra .desenvolvimento-resposta { height:100%; min-height:130px; padding:16px 20px; font-size:18px; }
  body[data-questoes="desenvolvimento"] .questoes-layout--aside-barra .desenvolvimento-acoes { margin-top:0; }
}
.questoes-fecho { max-width:580px; margin:60px auto 0; text-align:center; }
.questoes-fecho__nota { width:120px; height:120px; margin:26px auto 20px; display:grid; place-items:center; border-radius:50%; background:var(--menta); color:var(--floresta); font-size:33px; font-weight:800; box-shadow:var(--sh-soft); }
.questoes-fecho--corrigir .questoes-fecho__nota { margin:0 auto 24px; }
.questoes-fecho--corrigir .questoes-fecho__nota .material-symbols-outlined { animation:questoes-spin 1s linear infinite; }
.questoes-fecho__medalha { width:96px; height:96px; margin:0 auto 24px; display:grid; place-items:center; border-radius:50%; background:var(--esmeralda); color:#fff; box-shadow:var(--sh-soft); }
.questoes-fecho__pontos { margin:4px 0 14px; font-size:40px; font-weight:800; color:var(--texto); }
.questoes-fecho__pontos span { font-size:22px; font-weight:600; color:var(--texto-secundario); }
.questoes-fecho > p { max-width:390px; margin:0 auto; color:var(--texto-secundario); font-size:14px; line-height:1.5; }
.questoes-fecho__acoes { display:flex; justify-content:center; gap:10px; margin-top:28px; }
.questoes-fecho__acoes--fim { margin-top:24px; }
/* Correção da prova de desenvolvimento — cartões com veredito por cor, no mesmo
   idioma visual do mobile (verde/terracota/vermelho). */
.questoes-correcao { max-width:660px; margin:6px auto 0; }
.questoes-correcao__topo { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.questoes-correcao__topo h1 { margin:0; font-size:26px; }
.questoes-correcao__nota { flex:0 0 auto; padding:6px 12px; border-radius:999px; background:var(--menta); color:var(--floresta); font-size:14px; font-weight:700; }
.correcao-lista { display:grid; gap:16px; }
.correcao-cartao { border:2px solid var(--estado); border-radius:18px; overflow:hidden; background:var(--superficie); }
.correcao-cartao--cheia { --estado:var(--esmeralda); }
.correcao-cartao--parcial { --estado:var(--portugues); }
.correcao-cartao--zero { --estado:var(--perigo); }
.correcao-cartao__topo { display:flex; align-items:flex-start; gap:12px; padding:14px 16px; background:var(--estado); color:#fff; }
.correcao-cartao__pergunta { flex:1; min-width:0; margin:0; font-size:15px; font-weight:700; line-height:1.35; }
.correcao-cartao__nota { flex:0 0 auto; text-align:center; padding:6px 10px; border-radius:12px; background:#fff; color:var(--estado); }
.correcao-cartao__nota strong { display:block; font-size:14px; }
.correcao-cartao__nota span { display:block; margin-top:2px; font-size:10px; font-weight:700; }
.correcao-cartao__corpo { padding:16px; }
.correcao-linha { margin-bottom:12px; }
.correcao-linha__rotulo { display:block; margin-bottom:4px; font-size:11px; font-weight:700; color:var(--texto-secundario); }
.correcao-linha__rotulo--certa { color:var(--esmeralda); }
.correcao-linha p { margin:0; font-size:14px; line-height:1.5; color:var(--texto); }
.correcao-linha__certa { color:var(--esmeralda); font-weight:600; }
.correcao-cartao__comentario { margin:4px 0 0; font-size:13px; line-height:1.45; color:var(--texto-secundario); }
.questoes-modal { width:min(420px, calc(100vw - 32px)); padding:28px; border-radius:22px; background:var(--superficie); color:var(--texto); box-sizing:border-box; }
.questoes-modal h2 { margin:0; font-size:20px; }
.questoes-modal p { margin:8px 0 22px; color:var(--texto-secundario); font-size:13px; line-height:1.45; }
.questoes-modal__acoes { display:flex; justify-content:flex-end; gap:10px; }
@keyframes questoes-entra { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@keyframes questoes-spin { to { transform:rotate(360deg); } }
@media (max-width:1040px) { .questoes-aside { display:none; } }
@media (max-width:760px) {
  .questoes-layout { grid-template-columns:minmax(0, 1fr); column-gap:0; grid-template-areas:"topo" "barra" "head" "body"; }
  .questoes-pergunta { font-size:26px; }
  .questoes-config { margin-top:24px; }
}


/* ---------- Chat do Maano ----------
   Réplica do chat real (CHAT_SPEC.md), sem proatividade: o Maano só fala
   quando é chamado. Bolha do aluno em caixa verde; a resposta do instrutor
   é só texto sobre o fundo (nota do próprio chat_screen.dart: "sem bolha,
   de propósito... como no concorrente de referência"). */

.chat-avatar {
  width:32px; height:32px; border-radius:var(--raio-pilula); background:var(--floresta);
  display:grid; place-items:center; overflow:hidden; flex:none;
}
.chat-avatar img { width:44px; height:auto; transform:translateY(4px); }

.chat-bolha-aluno {
  max-width:75%; margin-left:auto;
  background:var(--floresta); color:#fff;
  padding:12px 16px; border-radius:20px 20px 4px 20px;
  font-family:'Plus Jakarta Sans Chat', 'Plus Jakarta Sans', system-ui, sans-serif; font-weight:400;
  font-size:15px; line-height:22px; white-space:pre-wrap;
}
.chat-corpo-instrutor {
  max-width:85%; font-family:'Plus Jakarta Sans Chat', 'Plus Jakarta Sans', system-ui, sans-serif; font-weight:400;
  font-size:15px; line-height:22px; color:var(--texto);
}
.chat-corpo-instrutor p, .chat-corpo-instrutor div { color:inherit; }
.chat-corpo-instrutor strong { font-weight:700; }
.chat-boas-vindas { font-family:'Plus Jakarta Sans Chat', 'Plus Jakarta Sans', system-ui, sans-serif; font-weight:400; }

.chat-linha { margin-bottom:24px; }
.chat-acoes-mensagem { display:flex; gap:4px; margin-top:4px; }
.chat-acoes-mensagem.is-aluno { justify-content:flex-end; }
.chat-icone-acao {
  width:28px; height:28px; border-radius:var(--raio-pilula); border:0; background:transparent;
  color:var(--texto-secundario); cursor:pointer; display:grid; place-items:center;
}
.chat-icone-acao:hover { background:var(--superficie-elevada); color:var(--texto); }

.chat-pastilha-fonte {
  display:inline-flex; align-items:center; gap:6px; margin-top:8px;
  padding:4px 8px; border-radius:var(--raio-pilula); background:var(--menta); color:var(--floresta);
  font-size:11px; font-weight:600; border:0; cursor:default;
}
.chat-pastilha-fonte.is-clicavel { cursor:pointer; }
.chat-pastilha-fonte.is-clicavel:hover { filter:brightness(.96); }
.chat-pastilha-fonte .material-symbols-outlined { font-size:14px; }

.chat-cartao-acao {
  display:inline-flex; align-items:center; gap:6px; margin-top:8px;
  padding:8px 12px; border-radius:12px; background:var(--menta); color:var(--floresta);
  font-size:13px; font-weight:600;
}

.chat-linha-extras { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.chat-chip-acao {
  display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:var(--raio-pilula);
  background:var(--menta); color:var(--floresta); font-size:13px; font-weight:600; border:0; cursor:pointer;
}
.chat-chip-acao:disabled { cursor:progress; opacity:.7; }
.chat-nota-extra { margin-top:8px; margin-left:4px; font-size:11px; color:var(--texto-secundario); }

.chat-escrever { display:flex; align-items:center; gap:4px; }
.chat-pontos { display:inline-flex; gap:3px; align-items:center; }
.chat-pontos span {
  width:5px; height:5px; border-radius:var(--raio-pilula); background:var(--texto-secundario);
  animation: chat-saltar 1.1s ease-in-out infinite;
}
.chat-pontos span:nth-child(2) { animation-delay:.15s; }
.chat-pontos span:nth-child(3) { animation-delay:.3s; }
/* O cursor da resposta a escrever-se. Na cor do texto, para servir também
   ao Escuro do leitor. Sem movimento pedido, a resposta aparece inteira e o
   cursor nem chega a existir. */
.chat-cursor-escrita {
  display:inline-block; width:2px; height:1.05em; margin-left:2px; vertical-align:-.15em;
  background:currentColor; opacity:.55; border-radius:1px;
  animation: chat-cursor-piscar 1s linear infinite;
}
@keyframes chat-cursor-piscar { 0%, 49% { opacity:.55; } 50%, 100% { opacity:0; } }
@keyframes chat-saltar { 0%, 60%, 100% { transform:translateY(0); opacity:.5; } 30% { transform:translateY(-3px); opacity:1; } }

.chat-erro { display:flex; align-items:center; gap:10px; }
.chat-erro-texto { color:var(--texto-secundario); font-size:15px; }
.chat-erro-retry {
  width:28px; height:28px; border-radius:var(--raio-pilula); border:0; background:var(--menta);
  color:var(--floresta); display:grid; place-items:center; cursor:pointer; flex:none;
}

.chat-vazio { display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 24px; }
.chat-vazio-titulo { margin-top:16px; color:var(--texto-secundario); font-size:15px; }
.chat-sugestoes { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:20px; }
.chat-chip-sugestao {
  padding:10px 14px; border-radius:var(--raio-pilula); background:var(--superficie-elevada);
  box-shadow:var(--sh-ambient); color:var(--texto); font-size:13px; border:0; cursor:pointer;
}

.chat-pastilha-quiz-min {
  display:flex; align-items:center; gap:8px; margin:0 24px 8px; padding:12px 16px;
  border-radius:var(--raio-pilula); background:var(--floresta); color:#fff; cursor:pointer;
}
.chat-pastilha-quiz-min .material-symbols-outlined:first-child { color:var(--menta); font-size:16px; }

/* position:fixed, não absolute (achado 20 da auditoria): dentro de <main>
   o overlay só cobria a coluna de conteúdo — a barra lateral ficava de
   fora, visível e clicável, com o quiz "modal" aberto por cima. Fixo ao
   viewport cobre a página inteira, sidebar incluída. */
.chat-quiz-backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:50;
  opacity:0; pointer-events:none; transition:opacity .28s ease-out;
}
.chat-quiz-backdrop.is-aberto { opacity:1; pointer-events:auto; }
.chat-quiz-overlay {
  position:fixed; left:0; right:0; bottom:0; z-index:51;
  max-height:85vh; display:flex; flex-direction:column;
  background:var(--superficie); border-radius:24px 24px 0 0; box-shadow:var(--elev-2);
  transform:translateY(120%); transition:transform .28s ease-out;
}
.chat-quiz-overlay.is-aberto { transform:translateY(0); }
.chat-quiz-faixa {
  flex:none;
  padding:16px 12px 16px 20px; background:var(--floresta); border-radius:24px 24px 0 0;
  display:flex; flex-direction:column; gap:12px; color:#fff;
}
.chat-quiz-faixa-topo { display:flex; align-items:center; gap:8px; }
.chat-quiz-faixa-titulo { flex:1; font:700 16px 'Newsreader'; }
.chat-quiz-progresso { font-size:11px; color:var(--muted-dark); }
.chat-quiz-faixa button { background:transparent; border:0; color:#fff; cursor:pointer; display:grid; place-items:center; }
.chat-quiz-barra { height:4px; border-radius:var(--raio-pilula); background:var(--pinho); overflow:hidden; }
.chat-quiz-barra i { display:block; height:100%; background:var(--menta); border-radius:inherit; }
/* Rola por conta própria numa janela baixa (achado 20): o enunciado mais
   as 4 opções não ficam cortados sem hipótese de os ver todos. */
.chat-quiz-corpo { padding:20px; overflow-y:auto; }
.chat-quiz-enunciado { font-family:'Newsreader', Georgia, serif; font-size:19px; line-height:27px; color:var(--texto); margin-bottom:20px; }
.chat-opcao {
  display:flex; align-items:center; gap:12px; width:100%; padding:12px 14px; margin-bottom:10px;
  border-radius:14px; border:1.5px solid transparent; background:rgba(127,168,140,.1);
  cursor:pointer; text-align:left; font:600 15px 'Plus Jakarta Sans'; color:var(--texto);
}
.chat-opcao.is-certa { background:var(--esmeralda); color:#fff; }
.chat-opcao.is-errada { background:var(--superficie-elevada); color:var(--texto-secundario); box-shadow:0 0 0 1.5px var(--texto-secundario) inset; }
.chat-opcao.is-desativada { background:var(--superficie-elevada); color:var(--texto-secundario); opacity:.55; box-shadow:0 0 0 1.5px var(--menta) inset; }
.chat-badge-letra {
  width:28px; height:28px; border-radius:var(--raio-pilula); flex:none; display:grid; place-items:center;
  color:#fff; font-weight:700; font-size:14px;
}
.chat-quiz-resultado { display:flex; align-items:center; gap:16px; }
.chat-quiz-resultado-icone {
  width:44px; height:44px; border-radius:var(--raio-pilula); display:grid; place-items:center; flex:none;
}

.chat-gravacao { display:flex; align-items:center; gap:8px; width:100%; }
.chat-onda { display:flex; align-items:center; gap:2px; height:32px; }
.chat-onda span { width:3px; border-radius:2px; background:var(--esmeralda); transition:height .1s linear; }
/* Editor da anotacao: superficie propria, controlos visiveis e texto cru em
   textarea. O HTML persistido nunca entra aqui. */
.editor-anotacao { display:grid; gap:18px; }
.editor-anotacao__topo { position:sticky; top:0; z-index:5; display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px; border:1px solid var(--contorno); border-radius:14px; background:var(--superficie); box-shadow:var(--elev-1); }
.editor-anotacao__topo .cresce { flex:1; }
.editor-anotacao__formato { min-width:38px; height:38px; border:1px solid var(--contorno); border-radius:10px; background:var(--superficie-elevada); color:var(--texto); cursor:pointer; font-weight:800; }
.editor-anotacao__cor { width:26px; height:26px; border:2px solid var(--superficie); border-radius:50%; box-shadow:0 0 0 1px var(--contorno); cursor:pointer; }
.editor-anotacao__secao { display:grid; gap:8px; }
.editor-anotacao__secao label { color:var(--esmeralda); font:700 15px/1.3 'Plus Jakarta Sans',system-ui,sans-serif; }
.editor-anotacao__campo { width:100%; min-height:132px; resize:vertical; border:1px solid var(--contorno); border-radius:14px; padding:14px 16px; background:var(--superficie); color:var(--texto); font:400 16px/1.65 'Newsreader',Georgia,serif; outline:none; }
.editor-anotacao__campo:focus { border-color:var(--esmeralda); box-shadow:0 0 0 3px rgba(47,163,107,.15); }
.editor-anotacao__erro { color:var(--texto); background:var(--superficie-elevada); border-left:3px solid var(--historia); border-radius:8px; padding:10px 12px; font-size:13px; }
.realce-fixado::after { content:'push_pin'; font-family:'Material Symbols Outlined'; font-size:.9em; color:var(--esmeralda); margin-left:.2em; vertical-align:.08em; }
/* ---------- primeira entrada ---------- */
.welcome-page {
  min-height: 100dvh;
  padding: 32px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 15%, rgba(109, 198, 143, .18), transparent 30%),
    radial-gradient(circle at 88% 84%, rgba(240, 198, 62, .16), transparent 28%),
    var(--fundo);
}
.welcome-card {
  width: min(1040px, 100%);
  min-height: min(650px, calc(100dvh - 64px));
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  overflow: hidden;
  border-radius: 30px;
  background: var(--superficie-elevada);
  box-shadow: 0 30px 80px rgba(28, 55, 42, .18), 0 0 0 1px rgba(46, 74, 59, .08);
}
.welcome-card__visual {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(145deg, #173f30, #2e5e48);
}
.welcome-card__glow {
  position: absolute;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 248, 220, .34), rgba(133, 200, 145, .11) 52%, transparent 70%);
}
.welcome-card__mascote { position: relative; z-index: 1; transform: translateY(8px); }
.welcome-card__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(44px, 6vw, 78px);
}
.welcome-card__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--texto-secundario);
  font: 700 12px 'Plus Jakarta Sans';
  letter-spacing: .09em;
  text-transform: uppercase;
}
.welcome-card__brand i { width: 8px; height: 8px; border-radius: 50%; background: var(--esmeralda); }
.welcome-card h1 {
  margin: 26px 0 0;
  color: var(--texto);
  font: 800 clamp(38px, 4.2vw, 58px)/1.02 'Newsreader';
  letter-spacing: -.035em;
}
.welcome-card h1 em { color: var(--esmeralda); font-style: normal; }
.welcome-card__content > p {
  max-width: 420px;
  margin: 22px 0 38px;
  color: var(--texto-secundario);
  font: 500 16px/1.65 'Plus Jakarta Sans';
}
.welcome-card__primary { text-decoration: none; text-align: center; }
.welcome-card__login {
  margin-top: 12px;
  padding: 13px;
  text-align: center;
  color: var(--texto-secundario);
  font: 700 14px 'Plus Jakarta Sans';
  text-decoration: none;
}
.welcome-card__login:hover { color: var(--floresta); }
.auth-back {
  margin: -8px 0 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--texto-secundario);
  font: 700 13px 'Plus Jakarta Sans';
  cursor: pointer;
}
.auth-error {
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: 12px;
  background: #fff1ef;
  color: #9d3129;
  font: 600 12px/1.45 'Plus Jakarta Sans';
}
.auth-confirmacao, .auth-loading {
  text-align: center;
  color: var(--texto);
}
.auth-confirmacao .material-symbols-outlined, .auth-loading > .material-symbols-outlined {
  font-size: 42px;
  color: var(--esmeralda);
}
.auth-confirmacao h2, .auth-loading h1 { margin: 18px 0 8px; font: 800 30px 'Newsreader'; }
.auth-confirmacao p, .auth-loading p { color: var(--texto-secundario); font: 500 14px/1.6 'Plus Jakarta Sans'; }
.auth-loading {
  width: min(440px, calc(100% - 40px));
  padding: 46px;
  border-radius: 24px;
  background: var(--superficie-elevada);
  box-shadow: var(--sh-soft);
}

/* ---- Caderno de erros (fase 6) ----
   Cada erro é um papel colorido, preso por um selo do limão. A cor diz a
   causa, não a matéria: as cores das matérias ficam só nas pastas. Os tons
   são claros de propósito (papel, não botão); o texto usa o escuro do
   próprio tom, como nas pastas. */
.tom-amarelo { --c-papel:#FBE7A8; --c-tinta:#4A3A0C; --c-linha:#C9A63F; --c-dobra:#EDCF74; --c-chip:#FCEFC4; --c-borda:#E8C45C; }
.tom-azul    { --c-papel:#CFE1EE; --c-tinta:#173244; --c-linha:#86AAC4; --c-dobra:#AFCADF; --c-chip:#E1EDF5; --c-borda:#9EC0D8; }
.tom-rosa    { --c-papel:#F5D3DD; --c-tinta:#4A1A2A; --c-linha:#C98DA0; --c-dobra:#E4B4C3; --c-chip:#F9E1E8; --c-borda:#E7A9BC; }
.tom-verde   { --c-papel:#CFE8D2; --c-tinta:#1E3A24; --c-linha:#8FBF97; --c-dobra:#A9D2B0; --c-chip:#E0F0E2; --c-borda:#A7CFAE; }
.tom-areia   { --c-papel:#F1DCC3; --c-tinta:#4A2E14; --c-linha:#C9A27A; --c-dobra:#E2C4A0; --c-chip:#F7EAD9; --c-borda:#DDB98E; }
.tom-lilas   { --c-papel:#E3DAF0; --c-tinta:#2C1740; --c-linha:#A892C4; --c-dobra:#CDBFE2; --c-chip:#EEE8F6; --c-borda:#C4B4DC; }
.tom-papel   { --c-papel:#ECE6DA; --c-tinta:#3A342A; --c-linha:#B3A992; --c-dobra:#D8CFBD; --c-chip:#F1ECE2; --c-borda:#CFC6B4; }

.cabecalho-caderno { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 16px; margin-right:8px; border-radius:999px; background:var(--superficie); border:1px solid rgba(127, 168, 140, .35); color:var(--floresta); text-decoration:none; font:600 13px 'Plus Jakarta Sans', system-ui, sans-serif; white-space:nowrap; box-shadow:var(--elev-1); }
.cabecalho-caderno:hover { box-shadow:0 0 0 4px rgba(47, 163, 107, .15); }
.cabecalho-caderno:focus-visible { outline:2px solid var(--esmeralda); outline-offset:2px; }
.cabecalho-caderno .chip__conta { margin-left:2px; }
.mobile-header .cabecalho-caderno { margin-left:auto; min-height:44px; }
.chip__conta { display:inline-block; margin-left:7px; padding:1px 7px; border-radius:999px; font-size:12px; font-weight:700; line-height:18px; background:var(--menta); color:var(--floresta); }
.chip.is-active .chip__conta { background:var(--papel); }

.causa-chip { display:inline-flex; align-items:center; gap:5px; max-width:100%; min-height:36px; padding:7px 14px; border-radius:999px; border:1px solid var(--c-borda, var(--contorno)); background:var(--c-chip, var(--superficie)); color:var(--c-tinta, var(--floresta)); font:600 13px/1.3 'Plus Jakarta Sans', system-ui, sans-serif; text-align:left; cursor:pointer; transition:filter .15s ease; }
.causa-chip:hover { filter:brightness(.97); }
.causa-chip:disabled { cursor:progress; opacity:.7; }
.causa-chip[aria-pressed="true"] { border:2px solid var(--c-tinta, var(--floresta)); padding:6px 13px; font-weight:700; }
.causa-chip .material-symbols-outlined { font-size:15px; }
.causa-chip--todos[aria-pressed="true"] { background:var(--floresta); border-color:var(--floresta); color:var(--papel); }
.causa-chip--mini { min-height:32px; padding:5px 11px; font-size:12px; }
.causa-chip--mini[aria-pressed="true"] { padding:4px 10px; }

.caderno { display:flex; flex-direction:column; gap:20px; min-width:0; max-width:100%; }
.caderno-padrao { display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:16px 20px; border-radius:16px; background:var(--superficie); border:1px solid color-mix(in srgb, var(--menta) 70%, #fff); }
.caderno-padrao__texto { flex:1 1 320px; min-width:0; }
.caderno-padrao__kicker { display:block; margin-bottom:4px; font-size:11px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; color:var(--texto-secundario); }
.caderno-padrao__texto p { margin:0; font-size:16px; line-height:1.45; font-weight:600; color:var(--texto); }
.caderno-padrao__barra { display:flex; gap:2px; width:220px; height:12px; border-radius:999px; overflow:hidden; }
.caderno-padrao__barra i { display:block; background:var(--c-papel); }
.caderno-filtros { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.caderno-filtros__espaco { flex:1 1 0; }
.caderno-ligacao { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:6px 8px; border:0; background:transparent; color:var(--floresta); font:600 13px 'Plus Jakarta Sans', system-ui, sans-serif; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.caderno-ligacao .material-symbols-outlined { font-size:18px; }
.caderno-barra { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; }
.caderno-barra__nota { margin:0; font-size:14px; color:var(--texto-secundario); }

/* A parede: colunas de alturas diferentes, como papéis num quadro. */
.caderno-parede { column-count:3; column-gap:30px; padding:0 4px 8px; }
.erro-cartao-lugar { break-inside:avoid; padding:20px 0 16px; }
.erro-cartao { --rot-escala:1; position:relative; display:block; margin:0; padding:30px 24px 24px; border-radius:4px; background:var(--c-papel); color:var(--c-tinta); transform:rotate(calc(var(--rot, 0deg) * var(--rot-escala))); box-shadow:0 1px 0 rgba(28,43,34,.06), 0 14px 26px -14px rgba(28,43,34,.28); cursor:pointer; transition:transform .16s ease, box-shadow .2s ease; }
.erro-cartao:hover { box-shadow:0 1px 0 rgba(28,43,34,.06), 0 18px 30px -14px rgba(28,43,34,.34); }
.erro-cartao.is-a-virar { transform:rotate(calc(var(--rot, 0deg) * var(--rot-escala))) scaleX(.02); transition:transform .16s ease-in; }
.erro-cartao.is-a-voltar { animation:erro-cartao-volta .18s ease-out; }
@keyframes erro-cartao-volta { from { transform:rotate(calc(var(--rot, 0deg) * var(--rot-escala))) scaleX(.02); } }
.erro-cartao.is-resolvido { opacity:.8; }
.erro-cartao__selo { position:absolute; top:-16px; left:50%; width:34px; height:34px; margin-left:-17px; display:grid; place-items:center; border-radius:50%; background:#fff; box-shadow:0 3px 8px rgba(28,43,34,.18); }
.erro-cartao__selo img { width:20px; height:24px; object-fit:contain; }
.erro-cartao__face { display:flex; flex-direction:column; gap:12px; }
.erro-cartao__face[hidden] { display:none; }
.erro-cartao__topo { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.erro-cartao__causa { font-size:11px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; }
.erro-cartao__quando { font-size:12px; opacity:.78; white-space:nowrap; }
.erro-cartao__pergunta { margin:0; font-family:'Newsreader', Georgia, serif; font-size:18px; line-height:1.45; overflow-wrap:anywhere; }
.erro-cartao__resposta { display:flex; flex-direction:column; gap:3px; padding-top:10px; border-top:1px dashed var(--c-linha); }
.erro-cartao__rotulo { font-size:11px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; opacity:.75; }
.erro-cartao__resposta s { font-family:'Newsreader', Georgia, serif; font-size:16px; text-decoration-thickness:1px; opacity:.85; overflow-wrap:anywhere; }
.erro-cartao__nota { font-family:'Newsreader', Georgia, serif; font-size:16px; opacity:.85; }
.erro-cartao__pe { display:flex; justify-content:space-between; align-items:center; gap:10px; padding-top:2px; padding-right:18px; }
.erro-cartao__topico { min-width:0; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.55); font-size:12px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.erro-cartao__marcas { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.erro-cartao__vezes { font-size:12px; font-weight:600; opacity:.8; }
.erro-cartao__bolas { display:flex; gap:5px; }
.erro-cartao__bolas i { display:block; box-sizing:border-box; width:10px; height:10px; border-radius:50%; border:1.5px solid var(--c-tinta); }
.erro-cartao__bolas i.is-cheia { background:var(--c-tinta); }
.erro-cartao__certa { margin:0; font-family:'Newsreader', Georgia, serif; font-size:19px; line-height:1.4; font-weight:500; overflow-wrap:anywhere; }
.erro-cartao__explica { margin:0; font-family:'Newsreader', Georgia, serif; font-size:16px; line-height:1.55; overflow-wrap:anywhere; }
.erro-cartao__maano { display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.72); font-size:14px; line-height:1.5; }
.erro-cartao__maano img { width:30px; height:22px; object-fit:contain; flex-shrink:0; }
.erro-cartao__acoes { display:flex; flex-wrap:wrap; gap:10px; }
.erro-cartao__btn { flex:1 1 140px; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:0 14px; border-radius:12px; border:1px solid var(--c-linha); color:var(--c-tinta); background:rgba(255,255,255,.4); text-decoration:none; font-size:14px; font-weight:600; }
.erro-cartao__btn .material-symbols-outlined { font-size:18px; }
.erro-cartao__btn--primario { border-color:var(--esmeralda); background:var(--esmeralda); color:#fff; }
.erro-cartao__causas { display:flex; flex-direction:column; gap:8px; padding-top:10px; border-top:1px dashed var(--c-linha); }
.erro-cartao__chips { display:flex; flex-wrap:wrap; gap:6px; }
.erro-cartao__estado { margin:0; font-size:13px; }
.erro-cartao__estado:empty { display:none; }
/* O canto dobrado é o botão de virar (teclado e leitores de ecrã); o resto
   do cartão também vira ao clique, para o rato. */
.erro-cartao__virar { position:absolute; right:0; bottom:0; width:30px; height:30px; padding:0; border:0; border-top-left-radius:7px; background:linear-gradient(135deg, var(--c-papel) 50%, var(--c-dobra) 50%); box-shadow:-2px -2px 4px rgba(28,43,34,.08); cursor:pointer; }
.erro-cartao__virar:focus-visible { outline:2px solid var(--c-tinta); outline-offset:2px; }

.caderno-vazio { display:flex; flex-direction:column; align-items:center; gap:14px; max-width:420px; margin:24px auto 0; text-align:center; }
.caderno-vazio__limao { display:flex; justify-content:center; min-height:150px; }
.caderno-vazio h2 { margin:0; font-size:22px; font-weight:800; }
.caderno-vazio p { margin:0; font-size:15px; line-height:1.55; color:var(--texto-secundario); }

/* "O que entra no teu caderno?": abre na 1.ª visita e em "Ajustar". */
.caderno-config { width:min(440px, calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:0; border:0; border-radius:24px; background:var(--superficie); color:var(--texto); box-shadow:0 24px 60px -12px rgba(28,43,34,.35); }
.caderno-config::backdrop { background:rgba(28,43,34,.38); }
.caderno-config__caixa { position:relative; display:flex; flex-direction:column; gap:14px; padding:28px 24px 24px; }
.caderno-config__x { position:absolute; top:12px; right:12px; width:40px; height:40px; display:grid; place-items:center; border:0; border-radius:50%; background:transparent; color:var(--texto-secundario); cursor:pointer; }
.caderno-config__x:hover { background:var(--menta); }
.caderno-config__limao { width:56px; height:41px; object-fit:contain; }
.caderno-config h2 { margin:0; font-size:21px; font-weight:800; line-height:1.25; }
.caderno-config__sub { margin:0; font-size:14px; line-height:1.5; color:var(--texto-secundario); }
.caderno-config__lista { display:flex; flex-direction:column; gap:8px; }
.caderno-config__fonte { display:flex; align-items:center; gap:12px; width:100%; min-height:64px; padding:10px 14px; border-radius:16px; border:1px solid color-mix(in srgb, var(--menta) 60%, var(--salvia)); background:var(--superficie); color:var(--texto); text-align:left; cursor:pointer; font-family:inherit; transition:background .15s ease, border-color .15s ease; }
.caderno-config__fonte[aria-checked="true"] { background:color-mix(in srgb, var(--menta) 55%, #fff); border-color:var(--salvia); }
.caderno-config__fonte:focus-visible { outline:2px solid var(--esmeralda); outline-offset:2px; }
.caderno-config__icone { width:36px; height:36px; display:grid; place-items:center; flex:none; border-radius:12px; background:var(--menta); color:var(--floresta); font-size:20px; }
.caderno-config__texto { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.caderno-config__texto strong { font-size:15px; font-weight:600; }
.caderno-config__texto small { font-size:13px; color:var(--texto-secundario); }
.caderno-config__interruptor { position:relative; flex:none; width:44px; height:26px; border-radius:999px; background:#C9D3CC; transition:background .18s ease; }
.caderno-config__interruptor i { position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(28,43,34,.25); transition:transform .18s ease; }
.caderno-config__fonte[aria-checked="true"] .caderno-config__interruptor { background:var(--esmeralda); }
.caderno-config__fonte[aria-checked="true"] .caderno-config__interruptor i { transform:translateX(18px); }
.caderno-config__aviso { margin:0; font-size:13px; color:var(--aviso); }
.caderno-config__aviso:empty { display:none; }
@media (prefers-reduced-motion: reduce) { .caderno-config__interruptor, .caderno-config__interruptor i, .caderno-config__fonte { transition:none; } }

/* Depois de errar no quiz: a causa, opcional. */
.quiz-causa { margin-top:12px; padding:14px 18px; border-radius:16px; background:var(--superficie); border:1px solid color-mix(in srgb, var(--menta) 70%, #fff); animation:questoes-entra .25s ease both; }
.quiz-causa__titulo { display:flex; align-items:center; gap:8px; margin:0 0 10px; font-size:14px; font-weight:600; color:var(--texto); }
.quiz-causa__titulo img { width:26px; height:19px; object-fit:contain; }
.quiz-causa__titulo small { font-weight:400; color:var(--texto-secundario); }
.quiz-causa__opcoes { display:flex; flex-wrap:wrap; gap:8px; }
.quiz-causa__estado { margin:8px 0 0; font-size:13px; color:var(--texto-secundario); }
.quiz-causa__estado:empty { display:none; }

@media (max-width:1100px) { .caderno-parede { column-count:2; } }
@media (max-width:640px) {
  .caderno-parede { column-count:1; padding:0 2px 8px; }
  .erro-cartao { --rot-escala:.5; padding:28px 20px 22px; }
  .caderno-padrao { padding:14px 16px; gap:12px; }
  .caderno-padrao__barra { width:100%; }
  .caderno-padrao__treinar { width:100%; }
  .caderno-filtros__espaco { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .erro-cartao, .erro-cartao.is-a-virar { transition:none; }
  .erro-cartao.is-a-voltar, .quiz-causa { animation:none; }
}

/* ---- Cronograma ----
   O desenho do cronograma (o bloco de agora e a agenda) vive em
   cronograma.html desde 2026-10-13. Aqui fica o que o topo e os avisos dos
   dias partilham. */
.crono-dia-aviso { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:14px 0 4px; padding:14px 18px; border-radius:4px; outline:1.5px dashed #CFC6B4; outline-offset:-1.5px; color:#5F5848; font-size:14px; line-height:1.4; }
.crono-dia-aviso--descanso { background:#FBF7EC; outline-color:#E4D7B0; }
.crono-ligacao { border:0; background:none; padding:0; color:var(--floresta); font:600 14px 'Plus Jakarta Sans', system-ui, sans-serif; text-decoration:underline; text-underline-offset:3px; cursor:pointer; min-height:32px; }

.crono-resumo { margin:0 0 18px; font-size:14px; color:var(--texto-secundario); }
.crono-resumo strong { color:var(--texto); }
.crono-resumo__reta { font-weight:700; color:#B5452F; }
.crono-vazio { display:flex; flex-direction:column; align-items:center; gap:10px; padding:40px 0; color:var(--texto-secundario); }

/* O cartão do Estudo: o bloco de agora (refeito a 2026-10-15, pedido do
   Jeremy). Amarelo da mascote (#F9D035, medido nas poses), claro em cima e
   mais quente em baixo, texto escuro. O "agora" numa pílula branca com um
   ponto a pulsar; os botões são retângulos arredondados com a aresta de
   baixo mais escura: Começar cheio em amarelo, Ver a semana em branco, os
   dois com a seta a seguir ao texto. O "depois" num vidro branco. As bordas esfumam-se no fundo. */
.crono-estudo {
  --ce-tinta:#3B2F07; --ce-tinta-2:rgba(59,47,7,.72); --ce-amarelo:#F9D035; --ce-aresta:#C99A0E;
  position:relative; overflow:hidden; isolation:isolate; display:flex; gap:20px; align-items:stretch;
  margin-bottom:20px; padding:24px 26px; border-radius:14px; color:var(--ce-tinta);
  background:
    radial-gradient(80% 110% at 100% 100%, rgba(249,208,53,.38), transparent 70%),
    linear-gradient(150deg, #FFFAE8 0%, #FFF1C4 60%, #FDE7A0 100%);
  /* Bordas esfumadas, como no cartão de referência: aresta limpa, sem
     sombra por baixo, e um halo largo e muito claro da cor do cartão que
     se desfaz no fundo. */
  box-shadow:0 0 18px 8px rgba(253,236,168,.32);
}
.crono-estudo__texto { display:flex; flex-direction:column; gap:8px; flex:1; min-width:0; }
.crono-estudo__kicker { font-size:11px; font-weight:800; letter-spacing:.09em; color:#8A6A0C; text-transform:uppercase; }
.crono-estudo__kicker--pilula {
  align-self:flex-start; display:inline-flex; align-items:center; gap:8px; padding:7px 12px 7px 10px; border-radius:999px;
  background:#fff; box-shadow:0 1px 2px rgba(140,104,6,.12); color:#6B5208;
}
.crono-estudo__kicker--pilula::before { content:''; width:8px; height:8px; border-radius:50%; background:#2FA36B; }
.crono-estudo.is-agora .crono-estudo__kicker--pilula::before { animation:crono-pulso 1.8s ease-out infinite; }
@keyframes crono-pulso { 0% { box-shadow:0 0 0 0 rgba(47,163,107,.55); } 100% { box-shadow:0 0 0 9px rgba(47,163,107,0); } }
.crono-estudo__titulo { margin-top:4px; font:800 clamp(22px, 1.4vw + 12px, 28px)/1.12 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing:-.025em; overflow-wrap:anywhere; }
.crono-estudo__sub { font-size:14.5px; line-height:1.45; color:var(--ce-tinta-2); overflow-wrap:anywhere; }
.crono-estudo__acoes { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:12px; }
/* Começar: cheio no amarelo da mascote, com a aresta de baixo mais escura. */
.crono-estudo__comecar {
  display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:0 18px; border-radius:14px;
  background:var(--ce-amarelo); color:var(--ce-tinta); text-decoration:none; font:800 15px/1 'Plus Jakarta Sans', system-ui, sans-serif;
  box-shadow:0 4px 0 var(--ce-aresta); transition:transform .12s ease, box-shadow .12s ease, background-color .15s ease; align-self:center;
}
.crono-estudo__comecar:hover { background:#FAD64C; color:var(--ce-tinta); }
.crono-estudo__comecar:active { transform:translateY(3px); box-shadow:0 1px 0 var(--ce-aresta); }
.crono-estudo__comecar:focus-visible { outline:3px solid var(--ce-tinta); outline-offset:3px; }
.crono-estudo__seta { display:inline-flex; align-items:center; transition:transform .2s ease; }
.crono-estudo__comecar:hover .crono-estudo__seta,
.crono-estudo__semana:hover .crono-estudo__seta { transform:translateX(2px); }
/* Ver a semana: branco, com a mesma aresta em cinza quente. */
.crono-estudo__semana {
  display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:0 18px; border-radius:14px;
  background:#fff; color:var(--ce-tinta); text-decoration:none; font:800 15px/1 'Plus Jakarta Sans', system-ui, sans-serif; align-self:center;
  box-shadow:inset 0 0 0 1px #EADFC0, 0 4px 0 #E3D6B2; transition:transform .12s ease, box-shadow .12s ease;
}
.crono-estudo__semana:hover { color:var(--ce-tinta); background:#FFFDF6; }
.crono-estudo__semana:active { transform:translateY(3px); box-shadow:inset 0 0 0 1px #EADFC0, 0 1px 0 #E3D6B2; }
.crono-estudo__semana:focus-visible { outline:3px solid var(--ce-tinta); outline-offset:3px; }
/* O que vem depois: um vidro branco à direita. */
.crono-estudo__depois {
  width:210px; flex:none; align-self:stretch; display:flex; flex-direction:column; justify-content:center; gap:5px;
  padding:16px 18px; border-radius:18px; font-size:14px;
  background:rgba(255,255,255,.6); box-shadow:inset 0 0 0 1px rgba(255,255,255,.8);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.crono-estudo__depois strong { font-size:16px; font-weight:800; letter-spacing:-.01em; }
.crono-estudo__depois span:last-child { font-size:13px; color:var(--ce-tinta-2); overflow-wrap:anywhere; }
.crono-estudo--convite { align-items:center; }
@media (prefers-reduced-motion:reduce) { .crono-estudo.is-agora .crono-estudo__kicker--pilula::before { animation:none; } .crono-estudo__comecar, .crono-estudo__semana, .crono-estudo__seta { transition:none; } }

@media (max-width:899px) {
  .crono-grelha { --crono-horas:44px; }
  .crono-linha { column-gap:12px; }
  .crono-cartao { --rot-escala:.5; padding:28px 20px 22px; }
  .crono-ocupado__nota { display:none; }
  .crono-ocupado { padding:14px 16px; }
  .crono-estudo { flex-direction:column; padding:20px; }
  .crono-estudo__depois { width:auto; }
}
@media (prefers-reduced-motion: reduce) {
  .crono-cartao, .crono-cartao.is-a-virar { transition:none; }
}

/* ---------- Gravação longa (assets/gravacao.js) ----------
   O botão do micro no cabeçalho e o diálogo da gravação. A app zera as
   bordas (responsive.css), por isso os contornos são box-shadow inset. */
.titlebar__gravar {
  display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 16px;
  border:0; border-radius:var(--raio-pilula); cursor:pointer;
  background:linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.88));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9), inset 0 -3px 0 color-mix(in srgb, #2E4A3B 32%, #fff),
    0 10px 24px -18px rgba(28,43,34,.45), 0 1px 3px rgba(28,43,34,.04);
  color:var(--floresta); font:600 13px 'Plus Jakarta Sans', system-ui, sans-serif; white-space:nowrap;
  position:relative; transition:transform .18s ease;
}
.titlebar__gravar:hover { transform:translateY(-1px); }
.titlebar__gravar:active { transform:translateY(1px); }
.titlebar__gravar .material-symbols-outlined { font-size:19px; }
.titlebar__gravar[data-estado="a_gravar"], .titlebar__gravar[data-estado="pausada"] {
  background:var(--perigo); color:#fff; font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--perigo) 18%, transparent);
}
.titlebar__gravar[data-estado="pausada"] { background:color-mix(in srgb, var(--perigo) 62%, #fff); }
.titlebar__gravar[data-estado="a_gravar"] .material-symbols-outlined { animation:gravacao-pulsar 1.4s ease-in-out infinite; }
.titlebar__gravar[data-estado="por_acabar"]::after {
  content:""; position:absolute; top:8px; right:10px; width:8px; height:8px; border-radius:50%;
  background:var(--historia, #E0A339); box-shadow:0 0 0 2px #fff;
}
@keyframes gravacao-pulsar { 50% { opacity:.35; } }

.gravacao-dialogo .gravacao {
  width:760px; max-width:calc(100vw - 32px); max-height:calc(100dvh - 32px); overflow:auto;
  padding:28px 32px; border-radius:var(--raio-cartao);
  box-shadow:0 30px 80px -30px rgba(28,43,34,.45), 0 2px 8px rgba(28,43,34,.06);
}
.gv-carregar { display:grid; place-items:center; min-height:160px; }
.gv-cabeca { display:flex; align-items:center; gap:12px; min-height:40px; }
.gv-cabeca h2 { flex:1; margin:0; font:600 24px/1.25 'Newsreader', Georgia, serif; letter-spacing:-.3px; color:var(--texto); }
.gv-etiqueta {
  padding:4px 12px; border-radius:var(--raio-pilula); background:var(--menta); color:var(--floresta);
  font:600 12px 'Plus Jakarta Sans', system-ui, sans-serif; white-space:nowrap;
}
.gv-icone {
  display:grid; place-items:center; width:40px; height:40px; flex:none; border:0; border-radius:50%;
  background:transparent; color:var(--texto-secundario); cursor:pointer; transition:background .15s ease, color .15s ease;
}
.gv-icone:hover { background:var(--menta); color:var(--floresta); }
.gv-icone--perigo:hover { background:color-mix(in srgb, var(--perigo) 10%, #fff); color:var(--perigo); }
.gv-texto { margin:8px 0 0; color:var(--texto-secundario); font-size:15px; line-height:1.5; }

.gv-fontes { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin-top:24px; }
.gv-fonte {
  display:flex; align-items:center; gap:12px; min-height:68px; padding:12px 14px; text-align:left; cursor:pointer;
  border:0; border-radius:18px; background:var(--superficie); color:var(--texto); font-family:inherit;
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--salvia) 40%, transparent);
  transition:background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.gv-fonte:hover:not([disabled]) { background:color-mix(in srgb, var(--menta) 55%, #fff); transform:translateY(-1px); }
.gv-fonte[aria-checked="true"] { background:var(--menta); box-shadow:inset 0 0 0 2px var(--esmeralda), 0 10px 24px -18px rgba(28,43,34,.5); }
.gv-fonte[disabled] { opacity:.5; cursor:not-allowed; }
.gv-fonte__icone {
  display:grid; place-items:center; width:40px; height:40px; flex:none; border-radius:50%;
  background:#fff; color:var(--floresta); box-shadow:0 1px 3px rgba(28,43,34,.08);
}
.gv-fonte[aria-checked="true"] .gv-fonte__icone { background:var(--floresta); color:var(--menta); }
.gv-fonte__texto { display:grid; gap:2px; flex:1; min-width:0; }
.gv-fonte__texto strong { font-size:14px; font-weight:700; line-height:1.3; }
.gv-fonte__texto small { color:var(--texto-secundario); font-size:11px; }
.gv-fonte__visto { color:var(--esmeralda); opacity:0; transition:opacity .15s ease; }
.gv-fonte[aria-checked="true"] .gv-fonte__visto { opacity:1; }

.gv-campos { display:flex; gap:16px; margin-top:20px; }
.gv-campo { flex:1; min-width:0; display:grid; gap:6px; }
.gv-campo[hidden] { display:none; }
.gv-campo label { color:var(--texto-secundario); font-size:12px; font-weight:600; }
.gv-campo .campo-pasta { width:100%; }
.gv-micro { display:flex; align-items:center; gap:12px; }
.gv-micro .campo-pasta { flex:1; min-width:0; }
.gv-medidor { display:flex; align-items:flex-end; gap:3px; height:24px; flex:none; }
.gv-medidor i { width:5px; border-radius:3px; background:color-mix(in srgb, var(--salvia) 35%, transparent); transition:background .08s linear; }
.gv-medidor i:nth-child(1) { height:30%; } .gv-medidor i:nth-child(2) { height:48%; } .gv-medidor i:nth-child(3) { height:66%; }
.gv-medidor i:nth-child(4) { height:84%; } .gv-medidor i:nth-child(5) { height:100%; }
.gv-medidor i.is-aceso { background:var(--esmeralda); }
.gv-dica { display:flex; align-items:center; gap:8px; margin:14px 0 0; color:var(--texto-secundario); font-size:13px; }
.gv-dica[hidden] { display:none; }
.gv-dica .material-symbols-outlined { color:var(--salvia); }
.gravacao__erro { margin:12px 0 0; color:var(--perigo); font-size:13px; line-height:1.45; }
.gravacao__erro[hidden] { display:none; }

.gv-rodape { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; margin-top:28px; }
.gv-quota { margin-right:auto; color:var(--texto-secundario); font-size:13px; font-variant-numeric:tabular-nums; }
.gv-gravar { gap:10px; padding-inline:22px; }
.gv-gravar__ponto { width:10px; height:10px; border-radius:50%; background:#F0624F; box-shadow:0 0 0 3px rgba(240,98,79,.25); }

.gv-ponto {
  width:12px; height:12px; flex:none; border-radius:50%; background:var(--perigo);
  box-shadow:0 0 0 5px color-mix(in srgb, var(--perigo) 16%, transparent);
  animation:gravacao-pulsar 1.4s ease-in-out infinite;
}
.gv-ponto.is-pausado { animation:none; background:var(--muted); box-shadow:none; }
.gv-palco {
  display:grid; justify-items:center; gap:14px; margin-top:20px; padding:28px 24px 22px; border-radius:22px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--menta) 70%, #fff), var(--superficie));
}
.gv-relogio { margin:0; font:700 64px/1 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing:-2px; color:var(--floresta); font-variant-numeric:tabular-nums; }
.gv-onda { display:flex; align-items:center; gap:3px; width:100%; max-width:600px; height:64px; }
.gv-onda i {
  flex:1; height:100%; border-radius:3px; background:var(--esmeralda); transform:scaleY(.06);
  transition:transform .09s linear; opacity:.85;
}
.gv-onda i:nth-last-child(-n+8) { opacity:1; }
.gv-estado { min-height:20px; margin:0; color:var(--texto); font-size:13px; font-weight:600; }
.gv-estado:empty { display:none; }
.gv-aviso {
  display:flex; align-items:center; gap:12px; padding:10px 10px 10px 16px; border-radius:var(--raio-pilula);
  background:color-mix(in srgb, var(--historia) 18%, #fff); font-size:13px; font-weight:600;
}
.gv-aviso[hidden] { display:none; }
.gv-controlos { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:20px; }
.gv-pilula {
  background:linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.88)); color:var(--texto);
  box-shadow:inset 0 0 0 1px rgba(127,168,140,.35), inset 0 -3px 0 color-mix(in srgb, #2E4A3B 22%, #fff), 0 10px 24px -18px rgba(28,43,34,.45);
}
.gv-pilula:hover:not([disabled]) { background:var(--menta); }
.gv-pilula[disabled] { opacity:.5; cursor:not-allowed; }
.gv-conta {
  display:grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:var(--raio-pilula);
  background:var(--floresta); color:var(--menta); font-size:12px; font-weight:700;
}
.gv-conta[hidden] { display:none; }
.btn-perigo { background:var(--perigo); color:#fff; }
.gv-fontes[hidden] { display:none; }
.mobile-header__esquerda { display:flex; align-items:center; gap:8px; }
.mobile-header .btn.mobile-gravar { width:auto; min-width:44px; padding:0 12px; gap:6px; font-variant-numeric:tabular-nums; font-size:14px; }
.mobile-gravar [data-gravar-rotulo]:empty { display:none; }
.mobile-gravar[data-estado="a_gravar"], .mobile-gravar[data-estado="pausada"] { background:var(--perigo); color:#fff; }
.mobile-gravar[data-estado="pausada"] { background:color-mix(in srgb, var(--perigo) 62%, #fff); }
.mobile-gravar[data-estado="a_gravar"] .material-symbols-outlined { animation:gravacao-pulsar 1.4s ease-in-out infinite; }
.mobile-gravar[data-estado="por_acabar"] { position:relative; }
.mobile-gravar[data-estado="por_acabar"]::after {
  content:""; position:absolute; top:7px; right:7px; width:8px; height:8px; border-radius:50%;
  background:var(--historia); box-shadow:0 0 0 2px #fff;
}
@media (max-width:720px) {
  .gravacao-dialogo .gravacao { padding:20px; }
  .gv-fontes { grid-template-columns:1fr; gap:8px; margin-top:16px; }
  .gv-fonte { min-height:56px; }
  .gv-campos { flex-direction:column; }
  .gv-palco { padding:22px 14px 18px; }
  .gv-relogio { font-size:48px; }
  .gv-controlos .btn { flex:1; min-width:0; padding-inline:12px; }
  .gv-rodape .gv-quota { flex-basis:100%; }
  .gv-rodape .btn { flex:1; }
}
@media (prefers-reduced-motion: reduce) {
  .gv-ponto, .titlebar__gravar[data-estado="a_gravar"] .material-symbols-outlined { animation:none; }
  .gv-onda i { transition:none; }
}


/* O aviso de primeira vez (app.js, mostrarDica). */
.dica { width:min(380px, calc(100vw - 32px)); padding:0; border:0; border-radius:24px; background:var(--superficie); color:var(--texto); box-shadow:0 24px 60px -12px rgba(28,43,34,.35); }
.dica::backdrop { background:rgba(28,43,34,.32); }
.dica__caixa { display:flex; flex-direction:column; align-items:center; gap:10px; padding:26px 24px 20px; text-align:center; font-family:'Plus Jakarta Sans', system-ui, sans-serif; }
.dica__caixa img { width:84px; height:84px; object-fit:contain; }
.dica h2 { margin:0; font-size:19px; font-weight:800; line-height:1.3; }
.dica p { margin:0; color:var(--texto-secundario); font-size:14.5px; line-height:1.5; }
.dica__ok { margin-top:8px; width:100%; height:48px; border:0; border-radius:999px; background:var(--floresta); color:var(--papel); font:700 15px 'Plus Jakarta Sans', system-ui, sans-serif; cursor:pointer; box-shadow:inset 0 -3px 0 rgba(0,0,0,.22); }
.dica__ok:hover { filter:brightness(1.08); }
.dica__ok:focus-visible { outline:2px solid var(--esmeralda); outline-offset:3px; }
.erro-cartao__fonte { display:inline-flex; align-items:center; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:3px 9px; border-radius:999px; background:rgba(255,255,255,.65); color:var(--c-tinta, var(--floresta)); font-size:11.5px; font-weight:700; }
   Perfil e Definições (2026-10-15, pedido do Jeremy: "como a app nativa")
   --------------------------------------------------------------------------
   O desenho de definicoes_screen.dart e perfil_screen.dart do Maano_PT: cada
   secção é UM cartão, com as linhas separadas por um fio; a linha inteira é o
   botão (ícone, título, o valor por baixo e a seta), sem botões "Mudar" a
   espremer o texto. A app zera as bordas: os contornos fazem-se com
   box-shadow.
   ========================================================================== */
.def { max-width:640px; margin-inline:auto; padding-bottom:var(--esp-xl); }
.def-grupo { margin-top:28px; }
/* Na letra da interface, não na de títulos: é uma etiqueta, como na app nativa. */
.def-grupo__titulo { margin:0 4px 10px; font:600 13px/1.3 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing:.02em; color:var(--muted); }
.def-cartao {
  background:var(--superficie); border-radius:20px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(28,43,34,.07), 0 1px 2px rgba(28,43,34,.05), 0 12px 28px -18px rgba(28,43,34,.22);
}
.def-linha {
  position:relative; display:flex; align-items:center; gap:14px; width:100%; min-height:60px;
  padding:12px 16px; border:0; background:transparent; color:var(--tinta); text-align:left;
  text-decoration:none; font:inherit; cursor:default;
}
button.def-linha, a.def-linha { cursor:pointer; transition:background-color .15s ease; }
button.def-linha:hover, a.def-linha:hover { background:color-mix(in srgb, var(--menta) 45%, transparent); }
button.def-linha:active, a.def-linha:active { background:color-mix(in srgb, var(--menta) 80%, transparent); }
.def-linha:focus-visible { outline:2px solid var(--esmeralda); outline-offset:-2px; border-radius:20px; }
/* O fio entre linhas começa onde começa o texto, como nas listas nativas. */
.def-linha + .def-linha::before {
  content:''; position:absolute; top:0; left:52px; right:0; height:1px; background:rgba(28,43,34,.08);
}
.def-linha__icone { flex:none; display:grid; place-items:center; width:24px; color:var(--pinho); }
.def-linha__icone .material-symbols-outlined { font-size:22px; }
.def-linha__texto { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.def-linha__titulo { font-size:15px; font-weight:500; line-height:1.3; }
.def-linha__valor { font-size:13px; line-height:1.35; color:var(--muted); overflow-wrap:anywhere; }
.def-linha__fim { flex:none; display:flex; align-items:center; gap:6px; color:var(--muted); }
.def-linha__fim .material-symbols-outlined { font-size:20px; }
.def-linha--perigo, .def-linha--perigo .def-linha__icone { color:var(--perigo); }

/* Perfil: o cabeçalho (avatar, nome, email e plano). */
.perfil-topo { display:flex; align-items:center; gap:16px; padding:20px; }
.perfil-topo__avatar {
  flex:none; display:grid; place-items:center; width:64px; height:64px; border-radius:50%;
  background:var(--floresta); color:var(--menta); font-family:'Newsreader', Georgia, serif; font-size:24px; font-weight:700;
}
.perfil-topo__texto { flex:1; min-width:0; }
.perfil-topo__nome {
  display:flex; align-items:center; gap:6px; max-width:100%; padding:0; border:0; background:none; color:var(--tinta);
  font:700 22px/1.2 'Newsreader', Georgia, serif; cursor:pointer; text-align:left;
}
.perfil-topo__nome span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.perfil-topo__nome .material-symbols-outlined { flex:none; font-size:16px; color:var(--muted); }
.perfil-topo__nome:hover span:first-child { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.perfil-topo__nome:focus-visible { outline:2px solid var(--esmeralda); outline-offset:3px; border-radius:6px; }
.perfil-topo__email { margin-top:2px; font-size:13px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.perfil-topo__plano {
  display:inline-flex; margin-top:8px; padding:4px 10px; border-radius:999px;
  background:var(--menta); color:var(--floresta); font-size:12px; font-weight:600;
}

/* "Como o Maano fala": um seletor segmentado. */
.def-ajuda { margin:-4px 4px 10px; font-size:13px; color:var(--muted); }
.def-segmentos { display:grid; grid-template-columns:repeat(3, 1fr); gap:4px; padding:4px; border-radius:16px; background:color-mix(in srgb, var(--menta) 70%, #fff); }
.def-segmentos button {
  min-height:44px; padding:0 8px; border:0; border-radius:12px; background:transparent; color:var(--tinta);
  font:600 14px/1.2 inherit; font-family:inherit; cursor:pointer; transition:background-color .15s ease, color .15s ease;
}
.def-segmentos button:hover { background:rgba(255,255,255,.6); }
.def-segmentos button[aria-checked="true"] { background:var(--floresta); color:var(--menta); box-shadow:0 4px 10px -6px rgba(28,43,34,.5); }
.def-segmentos button:focus-visible { outline:2px solid var(--esmeralda); outline-offset:2px; }
.def-espelho { display:flex; align-items:flex-start; gap:14px; padding:16px; font-size:15px; line-height:1.5; }
.def-espelho .material-symbols-outlined { flex:none; margin-top:2px; font-size:20px; color:var(--muted); }

@media (prefers-reduced-motion: reduce) {
  button.def-linha, a.def-linha, .def-segmentos button { transition:none; }
}

/* As janelas das Definições (assets/definicoes.js): a concha de `escolher`,
   um pouco mais larga, e uma lista com scroll próprio quando não cabe. */
/* `.disciplina-dialog` limita a 360px em responsive.css (carrega depois):
   a classe dupla ganha-lhe. */
.disciplina-dialog.def-janela { max-width:min(460px, calc(100vw - 32px)); width:100%; }
.disciplina-dialog.def-janela--larga { max-width:min(560px, calc(100vw - 32px)); }
.def-janela .disciplina-dialog__card { display:flex; flex-direction:column; max-height:min(80vh, 720px); padding:18px; }
.def-janela__corpo { display:flex; flex-direction:column; gap:12px; min-height:0; overflow:auto; padding:2px 4px 4px; }
.def-janela__perigo { color:var(--perigo); }
.def-janela__texto { margin:0; font-size:14px; line-height:1.5; color:var(--muted); }
.def-janela__alerta { margin:0; font-size:15px; font-weight:700; color:var(--perigo); }
.def-janela__erro { margin:0; font-size:13px; line-height:1.4; color:var(--perigo); }
.def-janela__vazio { margin:8px 0; font-size:14px; color:var(--muted); text-align:center; }
.def-janela__acoes { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin-top:4px; }
.def-janela__campo { margin-top:0; }
.def-janela__campo .field__input { padding-right:48px; box-shadow:0 0 0 1px rgba(28,43,34,.14); }
.def-janela__olho {
  position:absolute; right:6px; top:7px; display:grid; place-items:center; width:40px; height:40px; min-height:40px; min-width:40px;
  border:0; border-radius:12px; background:transparent; color:var(--muted); cursor:pointer;
}
.def-janela__olho:hover { background:color-mix(in srgb, var(--menta) 60%, transparent); }
.def-janela__olho:focus-visible { outline:2px solid var(--esmeralda); outline-offset:0; }
.def-janela__area, .def-janela__linha {
  width:100%; padding:12px 14px; border:0; border-radius:14px; background:var(--superficie); color:var(--tinta);
  font:500 15px/1.5 'Plus Jakarta Sans', system-ui, sans-serif; box-shadow:0 0 0 1px rgba(28,43,34,.14); outline:none; resize:vertical;
}
.def-janela__area:focus, .def-janela__linha:focus { box-shadow:0 0 0 1.5px var(--esmeralda), 0 0 0 5px rgba(47,163,107,.15); }
.def-janela__linha { height:48px; letter-spacing:.08em; text-transform:uppercase; }
.def-janela__rotulo { font-size:14px; font-weight:600; color:var(--tinta); }
.def-janela__apagar { background:var(--perigo); color:#fff; }
.def-janela__apagar:disabled { opacity:.45; cursor:not-allowed; }

.def-datas, .def-descartadas { display:flex; flex-direction:column; border-radius:16px; box-shadow:0 0 0 1px rgba(28,43,34,.08); overflow:hidden; }
.def-data, .def-descartada { position:relative; display:flex; align-items:center; gap:12px; padding:12px 14px; }
.def-data + .def-data::before, .def-descartada + .def-descartada::before { content:''; position:absolute; top:0; left:14px; right:0; height:1px; background:rgba(28,43,34,.08); }
.def-data__cor { flex:none; width:10px; height:10px; border-radius:50%; }
.def-data__texto, .def-descartada__texto { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.def-data__nome { font-size:15px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.def-data__quando, .def-descartada__onde { margin:0; font-size:13px; color:var(--muted); }
.def-data__campo {
  flex:none; width:44px; height:40px; padding:0 8px; border:0; border-radius:12px; color:transparent;
  background:color-mix(in srgb, var(--menta) 60%, transparent); cursor:pointer;
}
.def-data__campo::-webkit-calendar-picker-indicator { margin:0 auto; cursor:pointer; }
.def-data__campo:focus-visible { outline:2px solid var(--esmeralda); outline-offset:2px; }
.def-data__limpar { flex:none; padding:8px 10px; border:0; border-radius:10px; background:transparent; color:var(--muted); font:600 13px 'Plus Jakarta Sans', system-ui, sans-serif; cursor:pointer; }
.def-data__limpar:hover { background:color-mix(in srgb, var(--menta) 60%, transparent); color:var(--tinta); }
.def-descartada__enunciado { margin:0; font-size:14px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
@media (max-width:520px) {
  .def-janela__acoes { flex-direction:column-reverse; }
  .def-janela__acoes .btn { width:100%; }
}
=======
.erro-cartao__selo--aluno { background:var(--floresta); color:var(--papel); font:800 12px/1 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing:.3px; }

/* ===================================================================
/* ---------- "Obtenha o Pro" no cabeçalho (Jeremy, 2026-10-20) ----------
   O verde do paywall (assets/paywall.js) em vidro: verde vivo mas não
   opaco (deixa passar, desfocado, o que está por trás), um brilho forte na
   metade de cima, o anel de contorno em degradê (a app zera as bordas: é
   uma máscara) e o flash de luz, três passagens e pára. */
.botao-pro {
  position:relative; isolation:isolate; overflow:hidden; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 16px;
  border-radius:var(--raio-pilula); text-decoration:none; white-space:nowrap; cursor:pointer;
  color:#fff; font:700 13px 'Plus Jakarta Sans', system-ui, sans-serif; text-shadow:0 1px 2px rgba(10,50,28,.35);
  background:linear-gradient(180deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.12) 46%, rgba(255,255,255,0) 50%),
             linear-gradient(180deg, rgba(52,174,114,.86) 0%, rgba(38,140,90,.90) 100%);
  -webkit-backdrop-filter:blur(14px) saturate(180%); backdrop-filter:blur(14px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 6px rgba(10,60,32,.25),
    0 10px 24px -12px rgba(38,140,90,.75), 0 1px 3px rgba(28,43,34,.08);
  transition:transform .18s ease, box-shadow .18s ease;
}
.botao-pro::before {
  content:''; position:absolute; inset:0; z-index:-1; padding:1.5px; border-radius:inherit; pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.2) 55%, rgba(255,255,255,.6) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* O flash: uma faixa de luz na diagonal, por baixo das letras. Só na
   primeira vez que o cabeçalho se pinta nesta abertura (app.js), não a cada
   navegação. */
.botao-pro--flash::after {
  content:''; position:absolute; z-index:-1; top:-100%; height:300%; width:36px; left:-80px; pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.9), rgba(255,255,255,0)); transform:rotate(20deg);
  animation:botao-pro-flash 3s ease-in-out .6s 3;
}
@keyframes botao-pro-flash { 0%, 20% { left:-80px; } 55%, 100% { left:calc(100% + 40px); } }
.botao-pro:hover { transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 6px rgba(10,60,32,.25),
  0 14px 28px -12px rgba(38,140,90,.85), 0 1px 3px rgba(28,43,34,.08); }
.botao-pro:active { transform:translateY(1px); }
.botao-pro:focus-visible { outline:2px solid var(--floresta); outline-offset:3px; }
.botao-pro--movel { margin-left:auto; padding:0 14px; font-size:14px; }
/* No Estudo o menu (hambúrguer) está fixo à direita (estudo.html): o Pro
   fixa-se logo antes dele, à mesma altura. */
body[data-nav="estudo"] .botao-pro--movel { position:fixed; z-index:56; top:calc(10px + env(safe-area-inset-top,0px)); right:70px; margin:0; }
/* Na nota e na matéria, o Pro junto do Podcast e do Caderno de erros. */
.mobile-header .botao-pro--movel ~ .btn.mobile-podcast,
.mobile-header .botao-pro--movel ~ .cabecalho-caderno { margin-left:0; }
@media (prefers-reduced-motion: reduce) { .botao-pro { transition:none; } .botao-pro--flash::after { animation:none; display:none; } }