/* ==========================================================================
   Ducor · o app. Fase 5, entrega B (08/10, pedidos do Victor):
   5 abas (Caminho · Rotina · Objetivos · Insights · Comunidade), o "Hoje" logo abaixo da contagem do cérebro,
   o Perfil no avatar (foto, descrição, insígnias), Insights, "Estudar com a Ducor", "De onde veio isso?" e o tutorial.
   Usa as peças de ducor.css (fase 1) e o cartão de cerebro.css (fase 2).
   09/10 (proposta do Victor): Caminho · Rotina · Objetivos · Chat · Comunidade. O Chat é a conversa com a Ducor; os
   Insights foram morar na Comunidade, que virou a biblioteca (Insights, a escola e as conquistas, cada um na sua parte).
   13/10 (as ideias do Felipe): Rotina · Objetivos · Cérebro · Chat · Comunidade, o "Hoje" vira um lembrete com X por cima
   do cérebro, o resumo para copiar (folha de caderno), o cronômetro e os grupos com o ranking saudável.
   ========================================================================== */
[hidden] { display: none !important; } /* nada que o app esconde volta a aparecer por causa de um display de classe */

.app { overflow: hidden; }
.tela { position: fixed; inset: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--fundo); }
.tela[hidden] { display: none; }
.tela-corpo { padding: 16px var(--margem) calc(env(safe-area-inset-bottom, 0px) + 140px); }
.espaco-abas { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 104px); }
.formulario { display: grid; gap: 22px; align-content: start; }

/* O pé da tela: o botão principal fica sempre ao alcance do polegar. */
.tela-pe {
  position: fixed; z-index: 4; left: 0; right: 0; bottom: 0;
  padding: 22px var(--margem) calc(env(safe-area-inset-bottom, 0px) + 18px);
  background: linear-gradient(180deg, rgba(17, 11, 8, 0) 0%, var(--fundo) 34%);
}
.botao:disabled { opacity: .38; cursor: default; transform: none; }
.botao svg { width: 20px; height: 20px; flex: none; }
.nota-prototipo {
  margin-top: 14px; text-align: center;
  font: 500 10.5px/1.4 var(--f-texto); letter-spacing: .18em; text-transform: uppercase; color: var(--texto-3);
}
button.link-pe { width: 100%; border: 0; background: none; font-family: var(--f-texto); cursor: pointer; }
.link-pe { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 4px; font-size: 14.5px; font-weight: 500; color: var(--texto-2); text-decoration: none; }

/* Topo com volta */
.topo-voltar { display: grid; place-items: center; width: 44px; height: 44px; margin-left: -12px; color: var(--linho); }
.topo-voltar svg { width: 24px; height: 24px; }

/* Os passos da entrada (1 de 4 ... 4 de 4) */
.passos { display: flex; gap: 5px; }
.passos i { width: 22px; height: 4px; border-radius: 2px; background: rgba(241, 233, 220, .16); transition: background-color .4s ease; }
.passos i.on { background: var(--linho); }
.passos[hidden], .plano-atualizado[hidden] { display: none; }

/* ---------- Campos da conta ---------- */
.erro { min-height: 0; font-size: 13px; line-height: 1.35; color: #EC9A6B; }
.erro:empty { display: none; }
.erro a { display: inline-block; margin: -13px -4px; padding: 13px 4px; color: var(--linho); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* link dentro da frase, com área de toque de dedo */
.entrada[aria-invalid="true"] { border-color: rgba(236, 154, 107, .7); }
.entrada-senha { position: relative; display: block; }
.entrada-senha .entrada { padding-right: 52px; }
.ver-senha { position: absolute; top: 5px; right: 4px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: var(--texto-3); cursor: pointer; }
.ver-senha svg { width: 21px; height: 21px; }
.ver-senha[aria-pressed="true"] { color: var(--linho); }
input[type="date"].entrada, input[type="time"].entrada, select.entrada { appearance: none; -webkit-appearance: none; line-height: 52px; }
input[type="date"].entrada::-webkit-calendar-picker-indicator, input[type="time"].entrada::-webkit-calendar-picker-indicator { filter: invert(.85); opacity: .6; }
select.entrada { padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--texto-2) 50%), linear-gradient(135deg, var(--texto-2) 50%, transparent 50%); background-position: calc(100% - 17px) 24px, calc(100% - 12px) 24px; background-size: 5px 5px; background-repeat: no-repeat; }
.opcional { letter-spacing: .08em; color: var(--texto-3); text-transform: none; font-size: 11px; }
.dica-campo { margin-top: -2px; font-size: 13px; color: var(--texto-3); }
.aviso-prototipo { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: 13px; line-height: 1.45; color: var(--texto-2); }
.aviso-prototipo svg { width: 19px; height: 19px; margin-top: 1px; color: var(--couro); }
.responsavel { display: grid; gap: 12px; padding: 14px; border: 1px solid rgba(169, 128, 89, .35); border-radius: 18px; background: rgba(169, 128, 89, .07); }
.responsavel[hidden] { display: none; }
.responsavel:not([hidden]) { animation: cascata .45s cubic-bezier(.2, .8, .2, 1) both; }
.opcoes-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.opcoes-dias .opcao { padding: 0; }
.opcoes-materias .opcao { min-height: 44px; padding: 0 14px; font-size: 14px; }

/* ---------- Abertura ---------- */
.tela-abertura {
  display: grid; grid-template-rows: auto 1fr auto;
  background: radial-gradient(110% 62% at 50% 44%, rgba(74, 45, 28, .5) 0%, rgba(17, 11, 8, 0) 62%), var(--fundo);
}
.tela-abertura .topo { justify-content: flex-end; }
.abertura-centro { display: grid; justify-items: center; align-content: center; gap: 26px; padding: 0 30px 40px; text-align: center; }
.abertura-centro .logotipo { width: 210px; height: auto; aspect-ratio: 723.28 / 236; color: var(--linho); }
.abertura-centro .titulo-grande { font-size: 36px; }
.abertura-centro .subtitulo { max-width: 300px; margin-top: -10px; }
.tela-pe-solto { position: static; background: none; }
.abertura-pe { display: grid; gap: 10px; }

/* ---------- Lendo o seu contexto ---------- */
.constelacao { display: block; width: 64%; height: auto; margin: 26px 0 18px 30%; overflow: visible; }
.constelacao .linhas path { fill: none; stroke: rgba(241, 233, 220, .55); stroke-width: .6; }
.constelacao circle { fill: var(--linho); }
.constelacao .brasa { fill: var(--brasa); filter: drop-shadow(0 0 3px rgba(224, 122, 63, .8)); }
.constelacao path[data-passo] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s cubic-bezier(.65, 0, .35, 1); }
.constelacao path[data-passo].on { stroke-dashoffset: 0; }
.constelacao circle[data-passo] { transform-box: fill-box; transform-origin: 50% 50%; transform: scale(0); transition: transform .55s cubic-bezier(.2, 1.6, .4, 1) .35s; }
.constelacao circle[data-passo].on { transform: scale(1); }
.constelacao .brasa { transform-box: fill-box; transform-origin: 50% 50%; animation: brasa-respira 1.8s ease-in-out infinite; }
@keyframes brasa-respira { 50% { transform: scale(1.35); } }

/* ---------- Aba Cérebro: o cérebro e a contagem; o "Hoje" é um lembrete por cima dele (13/10, pedido do Felipe) ---------- */
.tela-cerebro { overflow: hidden; overscroll-behavior: none; }
.tela-cerebro #cerebro { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.topo-sobre {
  position: absolute; z-index: 9; top: 0; left: 0; right: 0;
  background: linear-gradient(180deg, var(--fundo) 0%, rgba(17, 11, 8, .88) 62%, rgba(17, 11, 8, 0) 100%);
}
/* O avatar fica no alto de todas as abas: tocar nele abre o perfil, como em qualquer app. */
.avatar-toque { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-right: -8px; border-radius: 50%; text-decoration: none; }
.avatar {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(180deg, #4A3221, #2C1F15); border: 1px solid rgba(241, 233, 220, .22);
  font: 600 15px/1 var(--f-titulo); color: var(--linho); text-decoration: none;
}
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar.com-foto { border-color: rgba(241, 233, 220, .45); }
.inicio-topo {
  position: absolute; z-index: 8; top: calc(env(safe-area-inset-top, 0px) + 52px); left: 10px; right: 10px;
  max-width: 460px; margin: 0 auto; display: grid; gap: 12px; pointer-events: none;
}
.inicio-cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-left: calc(var(--margem) - 10px); }
.saudacao { font: 600 22px/1.15 var(--f-titulo); letter-spacing: -0.03em; margin-bottom: 4px; }
.caminho-contagem { font-size: 13px; color: var(--texto-2); }
.caminho-contagem .rotulo { margin-right: 10px; }
.caminho-contagem b { font: 600 19px/1 var(--f-titulo); letter-spacing: -0.03em; color: var(--texto); margin-right: 2px; }
.inicio-cabeca .botao-redondo { pointer-events: auto; width: 44px; height: 44px; }
.inicio-cabeca .botao-redondo svg { width: 20px; height: 20px; }

.hoje {
  pointer-events: auto; padding: 12px 14px 6px;
  background: linear-gradient(180deg, #1F160F 0%, #18110D 100%);
  border: 1px solid rgba(241, 233, 220, .12); border-radius: 22px; box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
  transition: transform .62s cubic-bezier(.2, .8, .2, 1), opacity .4s ease;
}
.hoje.escondida { transform: translateY(-16px); opacity: 0; pointer-events: none; }
.com-cartao .hoje { transform: translateY(-10px); opacity: 0; pointer-events: none; transition-duration: .3s; }
/* O lembrete do dia (13/10, pedido do Felipe): o mesmo cartão "Hoje", agora por cima do cérebro, que não encolhe por ele.
   Fecha no X, com Esc, deslizando para cima ou tocando fora. Desce quando um aviso do alto chega (--empurra). */
.hoje.lembrete { position: relative; transform: translate(var(--dx, 0px), calc(var(--dy, 0px) + var(--empurra, 0px))); touch-action: none; padding-bottom: 12px; cursor: grab; }
.hoje.lembrete.escondida { transform: translate(var(--dx, 0px), calc(var(--dy, 0px) + var(--empurra, 0px) - 16px)); opacity: 0; }
.hoje.lembrete.arrastando { cursor: grabbing; box-shadow: 0 22px 46px rgba(0, 0, 0, .55); }
.lembrete-solto .lembrete-fundo { pointer-events: none; }
.hoje.lembrete.arrastando { transition: none; }
.lembrete .hoje-topo { gap: 4px; }
.lembrete .hoje-topo h2 { margin-right: auto; }
.lembrete .hoje-link { margin-right: 0; }
.lembrete-fechar { margin-right: -10px; }
.lembrete-puxador { display: block; width: 36px; height: 4px; margin: 6px auto 0; border-radius: 999px; background: var(--linha-forte); }
.lembrete-fundo { position: absolute; inset: 0; z-index: 7; background: rgba(17, 11, 8, .5); opacity: 0; transition: opacity .4s ease; }
.lembrete-fundo.visivel { opacity: 1; }
.hoje-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; }
.hoje-topo h2 { display: flex; align-items: baseline; gap: 10px; font: 500 14px/1.2 var(--f-texto); color: var(--texto-2); }
.hoje-link { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin-right: -6px; padding: 0 6px; font-size: 13.5px; font-weight: 500; color: var(--texto); text-decoration: none; }
.hoje-link svg { width: 16px; height: 16px; color: var(--texto-3); }
.tela-cerebro .cerebro-cartao { bottom: calc(env(safe-area-inset-bottom, 0px) + 76px); max-height: 54vh; }
.cartao-acao { margin: 6px 0 2px; min-height: 48px; font-size: 15px; }
.cartao-acao svg { width: 20px; height: 20px; }

/* ---------- As tarefas (no Hoje, na Rotina e no Destino) ---------- */
.lista-tarefas > li { overflow: hidden; }
.tarefa-linha { display: grid; grid-template-columns: 44px 1fr; align-items: center; border-top: 1px solid var(--linha); }
.hoje .lista-tarefas > li:first-child, .dia-bloco .lista-tarefas > li:first-child { border-top: 0; }
.feito { display: grid; place-items: center; width: 44px; height: 48px; margin-left: -10px; border: 0; background: none; cursor: pointer; }
.feito > span {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid rgba(241, 233, 220, .38); color: transparent; transition: background-color .2s ease, border-color .2s ease;
}
.feito svg { width: 12px; height: 12px; }
.feito[aria-pressed="true"] > span { background: var(--linho); border-color: var(--linho); color: var(--ebano); animation: estoura .38s cubic-bezier(.2, 1.6, .4, 1); }
.feito-espaco { width: 44px; }
.tarefa-abrir {
  display: grid; grid-template-columns: 46px 1fr auto; align-items: center; column-gap: 8px; min-height: 52px; padding: 7px 0;
  border: 0; background: none; text-align: left; color: inherit; font: inherit; cursor: pointer;
}
.tarefa-abrir:active { background: rgba(241, 233, 220, .04); }
.tarefa-abrir .hora { font: 500 13px/1 var(--f-texto); color: var(--texto-2); }
.tarefa-abrir .hora small { display: block; margin-bottom: 4px; font-size: 11px; letter-spacing: .06em; color: var(--rotulo); }
.tarefa-abrir .o-que { min-width: 0; font-size: 13px; line-height: 1.35; color: var(--texto-2); }
.tarefa-abrir .o-que b { display: block; font-size: 14.5px; font-weight: 600; color: var(--texto); }
.tarefa-linha.vida .o-que b::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 7px 2px 0; border-radius: 50%;
  background: var(--couro); vertical-align: middle;
}
.tarefa-linha.prova .hora { color: var(--brasa); }
.selo-prova { font: 600 11px/1 var(--f-texto); color: var(--ebano); background: var(--brasa); border-radius: 999px; padding: 5px 9px; }
.tarefa-linha.feita .o-que b, .tarefa-linha.feita .o-que span { text-decoration: line-through; text-decoration-color: rgba(241, 233, 220, .35); color: var(--texto-3); }
.tarefa-vazia { padding: 12px 0 10px; font-size: 13.5px; color: var(--texto-3); }
.hoje .tarefa-vazia { padding: 6px 0 12px; }
.tarefa-mais { display: flex; align-items: center; justify-content: center; min-height: 44px; font-size: 13px; color: var(--texto-2); text-decoration: none; border-top: 1px solid var(--linha); }

/* ---------- Aba Rotina ---------- */
.rotina-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.horarios {
  display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; width: 100%; min-height: 66px; margin-top: 18px;
  padding: 10px 14px 10px 10px; border: 1px solid var(--linha); border-radius: 18px; background: var(--cartao);
  text-align: left; color: inherit; font: inherit; cursor: pointer;
}
.horarios:active { background: #20170F; }
.horarios b { display: block; font-size: 15px; font-weight: 600; }
.horarios small { display: block; font-size: 13px; line-height: 1.35; color: var(--texto-2); }
.horarios-editar { font-size: 13.5px; font-weight: 500; color: var(--couro); }
.dias { display: grid; gap: 12px; margin-top: 22px; }
.dia-bloco { padding: 6px 14px 4px; border: 1px solid var(--linha); border-radius: 20px; background: var(--cartao); }
.dia-bloco.hoje-bloco { border-color: rgba(224, 122, 63, .32); }
.dia-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; border-bottom: 1px solid var(--linha); }
.dia-topo h3 { display: flex; align-items: baseline; gap: 8px; font: 600 15px/1.2 var(--f-texto); }
.dia-topo h3 small { font-size: 13px; font-weight: 400; color: var(--texto-2); }
.hoje-bloco .dia-topo h3 { color: var(--brasa); }
.dia-somar { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -12px; border: 0; background: none; color: var(--texto-2); cursor: pointer; }
.dia-somar svg { width: 20px; height: 20px; }
.refazer { margin-top: 22px; }

/* ---------- Aba Objetivos e o Destino ---------- */
.objetivos { display: grid; gap: 14px; margin-top: 22px; }
a.objetivo { display: block; color: inherit; text-decoration: none; }
a.objetivo:active { filter: brightness(1.08); }
.objetivo .titulo-tela { margin-top: 8px; font-size: 26px; }
.objetivo .subtitulo { margin-top: 4px; font-size: 14px; }
.objetivo-vida { background: linear-gradient(180deg, #2A1D13 0%, #1E150E 100%); }
.objetivo-vida .trilha-h .feita > .marco, .objetivo-vida .trilha-h .fim > .marco { background: var(--couro); border-color: var(--couro); }
.objetivo-ver { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linha); font-size: 14px; font-weight: 500; color: var(--texto); }
.objetivo-ver svg { width: 18px; height: 18px; color: var(--texto-3); }

.secao-titulo { margin-top: 38px; font: 600 21px/1.2 var(--f-titulo); letter-spacing: -0.03em; }
.lista-areas { display: grid; gap: 8px; margin-top: 16px; }
.linha-area {
  display: grid; grid-template-columns: 40px 1fr 20px; align-items: center; gap: 12px; width: 100%; min-height: 66px;
  padding: 10px 12px 10px 10px; border: 1px solid var(--linha); border-radius: 18px; background: var(--cartao);
  text-align: left; color: inherit; font: inherit; text-decoration: none; cursor: pointer;
}
.linha-area:active { background: #20170F; }
.linha-area b { display: block; font-size: 15px; font-weight: 600; }
.linha-area small { display: block; font-size: 13px; line-height: 1.35; color: var(--texto-2); }
.linha-area > svg { width: 18px; height: 18px; color: var(--texto-3); }
.linha-area.vida .icone-caixa, .area-opcao .icone-caixa, .aviso .icone-caixa.vida { color: var(--couro); background: rgba(169, 128, 89, .13); }
.linha-area.nova { border-style: dashed; border-color: rgba(169, 128, 89, .5); background: transparent; }
.linha-area.nova .icone-caixa { color: var(--linho); background: rgba(169, 128, 89, .2); }

.destino-corpo { display: grid; gap: 26px; align-content: start; }
button.destino { width: 100%; text-align: left; color: inherit; font: inherit; cursor: pointer; }
button.destino:active { filter: brightness(1.08); }
.destino-vida { background: linear-gradient(180deg, #2A1D13 0%, #1E150E 100%); }
.destino-vida .simbolo { color: var(--couro); }
.bloco { display: grid; gap: 12px; }
.bloco-titulo { font: 600 17px/1.2 var(--f-titulo); letter-spacing: -0.02em; }
.etapa-toque { position: absolute; left: -8px; right: 0; top: -8px; bottom: 6px; border: 0; background: none; cursor: pointer; border-radius: 12px; }
.etapa-toque:active { background: rgba(241, 233, 220, .05); }
.etapa:last-child .etapa-toque { bottom: -8px; }

/* ---------- Insights (entrega B; desde 09/10, uma parte da Comunidade): cada ideia com o seu porquê ---------- */
.insights { display: grid; gap: 4px; }
.insight-secao { display: grid; gap: 10px; }
.insight-secao .secao-titulo { margin-top: 28px; }
.insight { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--linha); border-radius: 20px; background: var(--cartao); }
.insight-topo { display: flex; align-items: center; gap: 10px; }
.insight-topo .icone-caixa { width: 34px; height: 34px; border-radius: 10px; color: var(--couro); background: rgba(169, 128, 89, .13); }
.insight-topo .icone-caixa svg { width: 18px; height: 18px; }
.insight h3 { margin-top: 2px; font: 600 18px/1.25 var(--f-titulo); letter-spacing: -0.02em; }
.insight-autor { margin-top: -4px; font-size: 13px; color: var(--texto-3); }
.insight-texto { font-size: 14.5px; line-height: 1.45; }
.insight-porque { font-size: 14px; line-height: 1.45; color: var(--texto-2); }
.insight-porque b { display: block; margin-bottom: 3px; font: 500 11px/1.2 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--brasa); }
.insight-acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; margin-top: 4px; }
.botao-curto { width: auto; min-height: 44px; padding: 0 16px; border-radius: 14px; font-size: 14.5px; }
.botao-curto svg { width: 18px; height: 18px; }
.botao.aplicado { opacity: 1; border-color: var(--brasa-borda); color: var(--brasa); }
.origem-botao {
  min-height: 44px; padding: 0 2px; border: 0; background: none; cursor: pointer;
  font: 500 13.5px/1.2 var(--f-texto); color: var(--texto-2); text-decoration: underline; text-decoration-color: rgba(180, 154, 126, .45); text-underline-offset: 3px;
}
.origem-botao[aria-expanded="true"] { color: var(--linho); }
.origem { display: grid; gap: 10px; padding: 12px; border: 1px dashed rgba(241, 233, 220, .16); border-radius: 14px; background: rgba(241, 233, 220, .035); }
.origem:not([hidden]) { animation: cascata .35s cubic-bezier(.2, .8, .2, 1) both; }
.origem-linha { display: grid; gap: 5px; font-size: 13.5px; line-height: 1.4; }
.origem-selo { justify-self: start; padding: 4px 8px; border-radius: 999px; font: 600 10.5px/1 var(--f-texto); letter-spacing: .08em; text-transform: uppercase; }
.origem-selo.escola { color: var(--areia); background: rgba(169, 128, 89, .16); border: 1px solid rgba(169, 128, 89, .42); }
.origem-selo.ducor { color: var(--brasa); background: var(--brasa-fundo); border: 1px solid var(--brasa-borda); }
.origem-selo.voce { color: var(--linho); background: rgba(241, 233, 220, .08); border: 1px solid var(--linha-forte); }

/* ---------- Aba Comunidade: a biblioteca (09/10), em três partes ---------- */
.tela[data-tela="comunidade"] .titulo-grande { margin-top: 6px; }
.partes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 18px; }
.partes .opcao { padding: 0 6px; font-size: 14px; }
.partes .opcao[aria-selected="true"] { background: var(--linho); border-color: var(--linho); color: var(--ebano); }
.parte { margin-top: 18px; }
.parte:not([hidden]) { animation: cascata .35s cubic-bezier(.2, .8, .2, 1) both; }
.parte-sub { font-size: 14px; line-height: 1.45; color: var(--texto-2); }
.parte-cartao { margin-top: 28px; }
.parte-cartao h3 { margin-top: 14px; font: 600 20px/1.15 var(--f-titulo); letter-spacing: -0.03em; }
.parte-cartao .desc { margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--texto-2); }
.conversa-grupo { justify-self: start; margin-bottom: 2px; font: 500 11px/1.2 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--rotulo); }
.conquistas li.falta { color: var(--texto-3); }
.conquistas li.falta .ponto-check { background: transparent; border: 1.5px dashed rgba(241, 233, 220, .3); }
.alem-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-top: 6px; font-size: 14px; font-weight: 500; color: var(--texto); text-decoration: none; }
.alem-link svg { width: 16px; height: 16px; color: var(--texto-3); }

/* ---------- Nova área ---------- */
.grade-areas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.area-opcao {
  display: flex; align-items: center; gap: 10px; min-height: 62px; padding: 8px 10px;
  border: 1px solid var(--linha); border-radius: 16px; background: var(--cartao);
  text-align: left; color: var(--texto); font: inherit; cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.area-opcao .icone-caixa { width: 38px; height: 38px; flex: none; }
.area-opcao .icone-caixa svg { width: 20px; height: 20px; }
.area-opcao b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.25; }
.area-opcao small { display: block; font-size: 11.5px; line-height: 1.3; color: var(--texto-3); }
.area-opcao[aria-checked="true"] { border-color: var(--couro); background: rgba(169, 128, 89, .15); box-shadow: inset 0 0 0 1px var(--couro); }
.area-opcao:disabled { opacity: .5; cursor: default; }
.area-campos { display: grid; gap: 22px; }
.area-campos[hidden], [data-campo-nome][hidden] { display: none; }

/* ---------- Seu perfil: a sua página (o que os outros vão ver) e, embaixo, o que só você vê ---------- */
.perfil-corpo { display: grid; gap: 30px; align-content: start; }
.perfil-capa {
  display: grid; justify-items: center; gap: 6px; padding: 22px 18px 18px; text-align: center;
  border: 1px solid var(--linha); border-radius: 24px;
  background: radial-gradient(120% 80% at 50% 0%, rgba(74, 45, 28, .55) 0%, rgba(24, 17, 14, 0) 70%), var(--cartao);
}
.perfil-foto { position: relative; margin-bottom: 8px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.avatar-grande { width: 92px; height: 92px; font-size: 36px; }
.perfil-camera { position: absolute; right: -2px; bottom: 2px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--linho); color: var(--ebano); box-shadow: 0 0 0 3px var(--cartao); }
.perfil-camera svg { width: 15px; height: 15px; }
.perfil-capa .titulo-tela { font-size: 26px; }
.perfil-linha { font-size: 14px; color: var(--texto-2); }
.perfil-bio { max-width: 310px; margin-top: 6px; font-size: 15px; line-height: 1.45; }
.perfil-bio.vazia { font-size: 14px; font-style: italic; color: var(--texto-3); }
.perfil-destino { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 12px; border: 1px solid var(--brasa-borda); border-radius: 999px; background: var(--brasa-fundo); font-size: 13px; font-weight: 500; }
.perfil-destino svg { width: 14px; height: 14px; color: var(--brasa); }
.perfil-vitrine { display: flex; gap: 8px; margin: 10px 0 2px; }
.perfil-vitrine:empty { display: none; }
.vitrine-item, .insignia.ganha .insignia-icone {
  color: var(--ebano); background: radial-gradient(circle at 35% 30%, #F2B184, var(--brasa)); box-shadow: 0 0 14px rgba(224, 122, 63, .42);
}
.vitrine-item { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; }
.vitrine-item svg { width: 18px; height: 18px; }
.perfil-capa .botao-curto { margin-top: 10px; }
.bloco-cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bloco-conta { font-size: 13.5px; color: var(--texto-2); }
.bloco-sub { margin-top: -6px; font-size: 13.5px; color: var(--texto-3); }
.insignias { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.insignia { display: grid; justify-items: start; align-content: start; gap: 4px; padding: 14px 12px; border: 1px dashed rgba(241, 233, 220, .14); border-radius: 18px; }
.insignia b { font-size: 14.5px; font-weight: 600; line-height: 1.25; color: var(--texto-2); }
.insignia small { font-size: 12px; line-height: 1.35; color: var(--texto-3); }
.insignia .insignia-progresso { color: var(--couro); }
.insignia-icone { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 4px; border-radius: 50%; border: 1.5px dashed rgba(241, 233, 220, .22); color: var(--texto-3); }
.insignia-icone svg { width: 19px; height: 19px; }
.insignia.ganha { border-style: solid; border-color: var(--brasa-borda); background: linear-gradient(180deg, rgba(224, 122, 63, .12), rgba(224, 122, 63, .03)); }
.insignia.ganha b { color: var(--linho); }
.insignia.ganha small { color: var(--texto-2); }
.insignia.ganha .insignia-icone { border: 0; }
.dados { display: grid; margin: 4px 0 0; padding: 4px 16px; border: 1px solid var(--linha); border-radius: 18px; background: var(--cartao); }
.dados div { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--linha); font-size: 14.5px; }
.dados div:first-child { border-top: 0; }
.dados dt { color: var(--texto-2); }
.dados dd { margin: 0; text-align: right; font-weight: 500; overflow-wrap: anywhere; }
.responsavel-cartao { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 12px; padding: 12px 14px 12px 10px; border: 1px solid rgba(169, 128, 89, .35); border-radius: 18px; background: rgba(169, 128, 89, .07); }
.responsavel-cartao .icone-caixa { color: var(--couro); background: rgba(169, 128, 89, .13); }
.responsavel-cartao b { display: block; font-size: 15px; font-weight: 600; }
.responsavel-cartao small { display: block; font-size: 13px; line-height: 1.4; color: var(--texto-2); }
.sair { margin-top: 6px; }
.apagar-conta { justify-content: center; width: 100%; }

/* Editar o perfil (uma folha, como a da tarefa) */
.foto-campo { display: flex; align-items: center; gap: 16px; }
.foto-campo .avatar-grande { width: 76px; height: 76px; font-size: 30px; }
.foto-botoes { display: grid; justify-items: start; gap: 2px; }
.foto-escolher { position: relative; overflow: hidden; }
.so-leitor { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.entrada-texto { height: auto; min-height: 96px; padding: 14px 16px; line-height: 1.45; resize: none; font-family: var(--f-texto); }

/* ---------- A folha da tarefa (editar, criar, apagar) ---------- */
.folha-fundo { position: fixed; inset: 0; z-index: 31; background: rgba(5, 3, 2, .58); opacity: 0; transition: opacity .3s ease; }
.folha-fundo.visivel { opacity: 1; }
.folha-fundo[hidden] { display: none; }
.folha {
  position: fixed; z-index: 32; left: 0; right: 0; bottom: 0; max-width: 520px; max-height: 88vh; margin: 0 auto; overflow-y: auto;
  display: grid; gap: 16px; padding: 10px var(--margem) calc(env(safe-area-inset-bottom, 0px) + 18px);
  background: #1E150F; border: 1px solid rgba(241, 233, 220, .14); border-bottom: 0; border-radius: 26px 26px 0 0;
  box-shadow: 0 -18px 50px rgba(0, 0, 0, .55);
  transform: translateY(105%); visibility: hidden; transition: transform .38s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .38s;
}
.folha.aberta { transform: none; visibility: visible; transition: transform .42s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
.folha-cabeca { display: flex; align-items: center; justify-content: space-between; margin-right: -10px; }
.folha-linha { display: grid; grid-template-columns: 1.45fr 1fr .9fr; gap: 8px; }
.folha-linha .entrada { padding: 0 10px; }
.folha-linha select.entrada { padding-right: 24px; background-position: calc(100% - 15px) 24px, calc(100% - 10px) 24px; }
.folha-acoes { display: grid; gap: 4px; }
.folha-mais { display: flex; justify-content: space-between; }
.folha-mais .botao-texto { padding: 0 6px; gap: 6px; }
.folha-mais [hidden] { display: none; }
.perigo { color: #EC9A6B; }
.estudar-cartao {
  display: grid; grid-template-columns: 40px 1fr 18px; align-items: center; gap: 12px; width: 100%; min-height: 64px;
  padding: 10px 12px 10px 10px; border: 1px solid var(--brasa-borda); border-radius: 18px;
  background: linear-gradient(180deg, rgba(224, 122, 63, .16), rgba(224, 122, 63, .06)); color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.estudar-cartao:active { filter: brightness(1.1); }
.estudar-cartao .icone-caixa { color: var(--brasa); background: rgba(224, 122, 63, .16); }
.estudar-cartao b { display: block; font-size: 15px; font-weight: 600; }
.estudar-cartao small { display: block; font-size: 13px; line-height: 1.35; color: var(--texto-2); }
.estudar-cartao > svg { width: 18px; height: 18px; color: var(--brasa); }
.origem-bloco { display: grid; gap: 6px; margin-top: -6px; }

/* ---------- Avisos que descem do alto ---------- */
.aviso-topo {
  position: fixed; z-index: 30; left: 10px; right: 10px; top: calc(env(safe-area-inset-top, 0px) + 8px);
  max-width: 440px; margin: 0 auto; pointer-events: none;
  transform: translateY(calc(-100% - 24px)); transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.aviso-topo.visivel { transform: none; pointer-events: auto; }
.aviso-topo .aviso { width: 100%; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.aviso .aviso-texto { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: var(--texto-2); }

/* ---------- A barra de abas: 5 abas, só nas telas do dia a dia ---------- */
body:not(.com-abas) .abas { display: none; }
.abas { z-index: 20; grid-template-columns: repeat(5, 1fr); padding-left: 4px; padding-right: 4px; }
.aba { font-size: 10.5px; letter-spacing: 0; }
.aba svg { width: 23px; height: 23px; }
.aba-novidade { position: absolute; top: 7px; left: calc(50% + 8px); width: 8px; height: 8px; border-radius: 50%; background: var(--brasa); box-shadow: 0 0 0 2px var(--fundo), 0 0 10px var(--brasa-brilho); }
.aba-novidade[hidden] { display: none; }

/* Sem barra de rolagem aparente (no celular ela já some; no computador ela cortava o cartão). */
.tela, .cerebro-cartao, .folha { scrollbar-width: none; }
.tela::-webkit-scrollbar, .cerebro-cartao::-webkit-scrollbar, .folha::-webkit-scrollbar { display: none; }

/* ---------- Vinheta de abertura (pedido do Victor, 08/10: "como é com os sites que produzimos") ----------
   0,0 s  acende o Você (a brasa do filme)
   0,3 s  o anel se risca em volta dele
   0,85 s a agulha gira e para apontando o caminho; a brasa se apaga embaixo dela (o logo não tem brasa)
   1,3 s  "Ducor", letra por letra
   1,85 s "Cada aluno, guiado."
   2,45 s sai, esmaecendo e crescendo um pouco (0,62 s) */
.pular-vinheta { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.vinheta {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; cursor: pointer;
  background: radial-gradient(90% 55% at 50% 46%, rgba(59, 36, 23, .55) 0%, rgba(15, 10, 7, 0) 70%), var(--ebano);
  color: var(--linho); -webkit-tap-highlight-color: transparent;
  animation: v-sai .62s cubic-bezier(.4, 0, .2, 1) 2.45s forwards;
}
.pular-vinheta:checked + .vinheta { display: none; }
.vinheta-centro { display: grid; justify-items: center; gap: 22px; margin-top: -8vh; }
.vinheta-marca { width: 236px; height: auto; aspect-ratio: 723.28 / 236; overflow: visible; }
.vinheta .v-brasa { transform-box: fill-box; transform-origin: 50% 50%; animation: v-nasce .38s cubic-bezier(.2, .8, .2, 1) both, v-apaga .32s ease 1.12s forwards; }
.vinheta .v-anel { stroke-dasharray: 1; stroke-dashoffset: 1; animation: v-risca .78s cubic-bezier(.65, 0, .35, 1) .3s forwards; }
.vinheta .v-agulha { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; animation: v-aponta .78s cubic-bezier(.22, 1.3, .42, 1) .85s forwards; }
.vinheta .v-letra { opacity: 0; animation: v-letra-svg .42s cubic-bezier(.2, .8, .2, 1) calc(1.3s + var(--i) * 85ms) forwards; }
.vinheta-frase { font: 600 25px/1.1 var(--f-titulo); letter-spacing: -0.035em; opacity: 0; animation: v-letra .5s ease 1.85s forwards; }
.vinheta-nota {
  position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 28px); text-align: center;
  font: 500 10.5px/1 var(--f-texto); letter-spacing: .18em; text-transform: uppercase; color: var(--texto-3);
  opacity: 0; animation: v-letra .5s ease 1.9s forwards;
}
@keyframes v-nasce { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes v-apaga { to { opacity: 0; } }
@keyframes v-risca { to { stroke-dashoffset: 0; } }
@keyframes v-aponta { 0% { opacity: 0; transform: rotate(-300deg) scale(.6); } 25% { opacity: 1; } 100% { opacity: 1; transform: rotate(0) scale(1); } }
@keyframes v-letra { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes v-letra-svg { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } /* dentro do desenho a unidade é a do logo: 26 ≈ 8 px na tela */
@keyframes v-sai { to { opacity: 0; transform: scale(1.04); visibility: hidden; } }
/* Vinheta é enfeite: quem pede menos movimento vai direto ao app, sem perder nada (a abertura repete nome e frase). */
@media (prefers-reduced-motion: reduce) { .vinheta { display: none; } }

/* ==========================================================================
   O movimento (fase 4). Tudo some para quem desliga animação no celular
   (a regra geral está em ducor.css; o que depende de JS checa a mesma preferência).
   ========================================================================== */

/* As telas entram em cascata: cada bloco marcado com data-cascata sobe um pouco depois do anterior. */
.entrando [data-cascata] > * { animation: cascata .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(80ms + var(--i, 0) * 55ms); }
@keyframes cascata { from { opacity: 0; transform: translateY(14px); } }

/* A leitura: a barra corre, o ✓ estoura. */
.progresso-trilho i { transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.estado-ok { animation: estoura .42s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes estoura { from { transform: scale(.3); opacity: 0; } }

/* A brasa que voa da constelação até o Você do Cérebro. */
.voo-brasa {
  position: fixed; z-index: 40; width: 10px; height: 10px; border-radius: 50%; pointer-events: none;
  background: var(--brasa); box-shadow: 0 0 0 6px rgba(224, 122, 63, .18), 0 0 26px 6px rgba(224, 122, 63, .55);
}

/* "Você está aqui": a etapa atual respira, na trilha e nos objetivos. */
.agora > .marco { animation: voce-respira 2.6s ease-in-out infinite; }
@keyframes voce-respira {
  0%, 100% { box-shadow: 0 0 0 5px var(--brasa-halo), 0 0 18px var(--brasa-brilho); }
  50% { box-shadow: 0 0 0 10px rgba(224, 122, 63, .06), 0 0 30px rgba(224, 122, 63, .62); }
}
/* A aba escolhida: o ponto de brasa nasce estourando. A novidade na Rotina pisca devagar. */
.aba.ativa::after { animation: estoura .4s cubic-bezier(.2, 1.6, .4, 1) both; }
.aba-novidade:not([hidden]) { animation: estoura .5s cubic-bezier(.2, 1.6, .4, 1) both, novidade 2.4s ease-in-out .6s infinite; }
@keyframes novidade { 50% { box-shadow: 0 0 0 2px var(--fundo), 0 0 16px rgba(224, 122, 63, .8); } }

/* O aviso desce com mola e sobe rápido. */
.aviso-topo { transition: transform .32s cubic-bezier(.4, 0, 1, 1); }
.aviso-topo.visivel { transition: transform .62s cubic-bezier(.18, 1.32, .4, 1); }
.aviso-topo.visivel .icone-caixa svg { animation: balanca .7s ease .5s both; }
@keyframes balanca { 20% { transform: rotate(-12deg); } 45% { transform: rotate(9deg); } 70% { transform: rotate(-5deg); } 100% { transform: none; } }

/* O plano se refaz na frente do aluno: o que saiu encolhe, o que entrou chega com um brilho de brasa. */
.lista-tarefas > li.chegou { animation: tarefa-chega .55s cubic-bezier(.2, .8, .2, 1) both; }
.lista-tarefas > li.chegou .tarefa-abrir { animation: tarefa-brilha 2.2s ease .35s both; }
.lista-tarefas > li.saindo { animation: tarefa-sai .32s ease forwards; }
@keyframes tarefa-chega { from { max-height: 0; opacity: 0; } to { max-height: 90px; opacity: 1; } }
@keyframes tarefa-brilha { from { background: rgba(224, 122, 63, .16); } to { background: transparent; } }
@keyframes tarefa-sai { from { max-height: 90px; } to { max-height: 0; opacity: 0; } }
.plano-atualizado.chegou { animation: estoura .5s cubic-bezier(.2, 1.6, .4, 1) .3s both; }

/* Nova área: o que foi escolhido estoura e os campos chegam deslizando. */
.area-opcao[aria-checked="true"] .icone-caixa { animation: estoura .4s cubic-bezier(.2, 1.6, .4, 1); }
.area-campos:not([hidden]) { animation: cascata .45s cubic-bezier(.2, .8, .2, 1) both; }

/* ==========================================================================
   Entrega B (08/10): a sessão com a Ducor, o tutorial e a marca da conta de exemplo.
   ========================================================================== */

/* ---------- Estudar com a Ducor: uma conversa curta, roteirizada, que acaba no cérebro ---------- */
.estudo-corpo { display: grid; gap: 18px; align-content: start; }
.estudo-cabeca { display: grid; gap: 8px; }
.estudo-cabeca .titulo-tela { font-size: 30px; }
.estudo-conversa { display: grid; gap: 10px; }
.estudo-fala { max-width: 88%; padding: 11px 14px; border-radius: 18px; font-size: 15px; line-height: 1.45; }
.estudo-fala.ducor { justify-self: start; background: rgba(241, 233, 220, .07); border: 1px solid var(--linha); border-bottom-left-radius: 6px; }
.estudo-fala.voce { justify-self: end; background: var(--linho); color: var(--ebano); border-bottom-right-radius: 6px; font-weight: 500; }
.estudo-fala:not(.espera) { animation: cascata .4s cubic-bezier(.2, .8, .2, 1) both; }
.estudo-fala.espera { padding: 14px 16px; }
.estudo-num { display: block; margin-bottom: 4px; font: 500 11px/1.2 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--rotulo); }
.digitando { display: inline-flex; gap: 5px; }
.digitando i { width: 6px; height: 6px; border-radius: 50%; background: var(--texto-2); animation: digita 1s ease-in-out infinite; }
.digitando i:nth-child(2) { animation-delay: .15s; }
.digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes digita { 0%, 80%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
.estudo-opcoes { display: grid; gap: 8px; margin: 2px 0 4px; animation: cascata .4s cubic-bezier(.2, .8, .2, 1) both; }
.estudo-opcao {
  display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px 10px 10px;
  border: 1px solid var(--linha-forte); border-radius: 16px; background: var(--campo); color: var(--texto);
  font: 500 15px/1.35 var(--f-texto); text-align: left; cursor: pointer; transition: border-color .2s ease, background-color .2s ease;
}
.estudo-opcao:active { background: var(--campo-foco); }
.estudo-letra { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(241, 233, 220, .08); font: 600 13px/1 var(--f-texto); color: var(--texto-2); }
.estudo-opcao:disabled { cursor: default; opacity: .5; }
.estudo-opcao.certa { opacity: 1; border-color: var(--brasa); background: var(--brasa-fundo); }
.estudo-opcao.certa .estudo-letra { background: var(--brasa); color: var(--ebano); }
.estudo-opcao.errada { opacity: 1; border-color: rgba(236, 154, 107, .5); }
.estudo-opcao.errada span:last-child { text-decoration: line-through; text-decoration-color: rgba(241, 233, 220, .45); }
.estudo-fala.resultado { justify-self: stretch; max-width: none; display: grid; gap: 6px; padding: 16px; }
.estudo-fala.resultado.passou { border-color: var(--brasa-borda); background: linear-gradient(180deg, rgba(224, 122, 63, .15), rgba(224, 122, 63, .05)); }
.estudo-placar { font: 600 34px/1 var(--f-titulo); letter-spacing: -0.02em; word-spacing: .12em; color: var(--linho); }
.tela-estudo .topo { position: sticky; top: 0; z-index: 5; background: linear-gradient(180deg, var(--fundo) 0%, var(--fundo) 78%, rgba(17, 11, 8, 0) 100%); }
.estudo-duvida { display: grid; gap: 8px; margin-top: 10px; }
.estudo-erro-link { justify-self: start; min-height: 40px; padding: 6px 2px; border: 0; background: none; font-family: var(--f-texto); font-size: 14px; color: var(--texto-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.estudo-duvida-linha { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.estudo-pe { display: grid; gap: 4px; }

/* ---------- O tutorial do aluno novo: um foco no que tocar, o resto escurecido, e um balão curto ---------- */
.tutorial { position: fixed; inset: 0; z-index: 26; pointer-events: none; }
.tutorial-bloco { position: fixed; left: 0; top: 0; pointer-events: auto; }
.tutorial-foco {
  position: fixed; left: 0; top: 0; pointer-events: none; border-radius: 22px;
  box-shadow: 0 0 0 200vmax rgba(8, 5, 3, .68), inset 0 0 0 1.5px rgba(224, 122, 63, .9), 0 0 24px 2px rgba(224, 122, 63, .35);
  transition: transform .42s cubic-bezier(.2, .8, .2, 1), width .42s cubic-bezier(.2, .8, .2, 1), height .42s cubic-bezier(.2, .8, .2, 1), border-radius .42s ease;
}
.tutorial.so-olhar .tutorial-foco { pointer-events: auto; }
.tutorial-balao {
  position: fixed; left: 0; top: 0; pointer-events: auto; display: grid; gap: 10px;
  padding: 14px 16px 8px; border: 1px solid rgba(241, 233, 220, .16); border-radius: 20px;
  background: #241911; box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
  transition: transform .42s cubic-bezier(.2, .8, .2, 1);
}
.tutorial.parado .tutorial-foco, .tutorial.parado .tutorial-balao { transition: none; }
.tutorial-balao.chegou { animation: tutorial-chega .4s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes tutorial-chega { from { opacity: 0; translate: 0 8px; } }
.tutorial-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tutorial-pontos { display: flex; align-items: center; gap: 5px; }
.tutorial-pontos i { width: 6px; height: 6px; border-radius: 3px; background: rgba(241, 233, 220, .18); transition: width .3s ease; }
.tutorial-pontos i.foi { background: var(--couro); }
.tutorial-pontos i.agora { width: 16px; background: var(--brasa); }
.tutorial-texto { font-size: 15.5px; line-height: 1.45; }
.tutorial-texto b { font-weight: 600; color: var(--linho); }
.tutorial-dica { display: flex; align-items: center; gap: 10px; font: 600 14px/1.3 var(--f-texto); color: var(--brasa); }
.tutorial-toque { position: relative; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--brasa); box-shadow: 0 0 0 4px rgba(224, 122, 63, .22); }
.tutorial-toque::after { content: ""; position: absolute; inset: -4px; border: 2px solid var(--brasa); border-radius: 50%; animation: toque 1.4s ease-out infinite; }
@keyframes toque { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.1); opacity: 0; } }
.tutorial-acoes { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; }
.tutorial-pular { min-height: 44px; padding: 0 4px; border: 0; background: none; font: 500 14px/1 var(--f-texto); color: var(--texto-2); cursor: pointer; }

/* ---------- A conta de exemplo nunca se passa por outra: o selo diz que é exemplo ---------- */
.modo-exemplo .selo-prototipo::after { content: " · exemplo"; }

/* ===== Fase 5 · depois da entrega B: entrar só uma vez, sair com 2 toques, esqueci a senha (08/10) ===== */
.esqueci { margin-top: -6px; }
.esqueci-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; border: 0; background: none; font: 500 14px/1 var(--f-texto); color: var(--texto-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.esqueci-link[aria-expanded="true"] { color: var(--texto); }
.esqueci-caixa { display: grid; gap: 14px; margin-top: 4px; padding: 14px; border: 1px solid var(--linha-forte); border-radius: 14px; background: var(--cartao); }
.esqueci-caixa > p { font-size: 13.5px; line-height: 1.5; color: var(--texto-2); }
.sair-dica { margin-top: -2px; font-size: 13px; line-height: 1.45; text-align: center; color: var(--texto-2); }
.medidor-app { position: fixed; top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); right: 12px; }
body:not([data-tela-atual="cerebro"]) .medidor-app { display: none; }
/* A IA de verdade (etapa 1, 09/10): a espera enquanto a sessão é criada */
.estudo-fala.espera .estudo-preparo { display: block; margin-top: 6px; font-size: 13.5px; color: var(--texto-2); }

/* ---------- Aba Chat (09/10): a conversa com a Ducor, com as mesmas falas da sessão de estudo ---------- */
.chat-corpo { display: grid; gap: 16px; align-content: start; }
.chat-cabeca { display: grid; gap: 8px; }
.chat-cabeca .titulo-grande { margin-top: 6px; }
.chat-cabeca .subtitulo { margin-top: 0; }
.chat-texto { white-space: pre-line; overflow-wrap: anywhere; }
.estudo-fala.sem-cascata { animation: none; }
.estudo-fala.chat-erro { border-style: dashed; color: var(--texto-2); }
.chat-estudar {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-top: 10px; padding: 0 14px;
  border: 1px solid var(--brasa-borda); border-radius: 999px; background: var(--brasa-fundo);
  font: 600 14px/1.2 var(--f-texto); color: var(--linho); text-align: left; cursor: pointer;
}
.chat-estudar svg { width: 18px; height: 18px; flex: none; color: var(--brasa); }
.chat-estudar:active { filter: brightness(1.1); }
.chat-sugestoes .opcao { min-height: 40px; padding: 8px 14px; line-height: 1.25; text-align: left; color: var(--texto); }
.chat-sugestoes:empty { display: none; }
.chat-limpar { justify-self: center; font-size: 14px; }
.chat-limpar.confirmar { color: #EC9A6B; }

/* ---------- Chat, 2ª versão (09/10, noite): a resposta com negrito e listas, o erro anotado, o "Ficou ruim?" e a caixa que cresce ---------- */
.chat-md { white-space: normal; }
.chat-md p { margin: 0; }
.chat-md > * + * { margin-top: 8px; }
.chat-md ul, .chat-md ol { margin-bottom: 0; padding-left: 22px; display: grid; gap: 4px; }
.chat-md ul { list-style: disc; }
.chat-md ol { list-style: decimal; }
.chat-md li { padding-left: 2px; }
.chat-md li::marker { color: var(--texto-2); }
.chat-md strong { font-weight: 650; color: var(--texto); }
.chat-md code { padding: 1px 5px; border-radius: 6px; background: rgba(241, 233, 220, .08); font-size: 14px; }
.chat-anotou { display: flex; gap: 7px; align-items: flex-start; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--linha); font-size: 13px; line-height: 1.35; color: var(--texto-2); }
.chat-anotou svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--brasa); }
.chat-ruim { display: block; margin: 4px -2px -6px auto; min-height: 36px; padding: 6px 2px; border: 0; background: none; font: 13px/1.2 var(--f-texto); color: var(--texto-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.chat-ruim-ok { margin-top: 8px; font-size: 13px; line-height: 1.35; color: var(--texto-2); }
.chat-ruim-form { animation: cascata .3s ease both; }
.chat-nota { justify-self: center; max-width: 88%; font-size: 13px; line-height: 1.35; color: var(--texto-2); text-align: center; }
.chat-entrada { height: auto; min-height: 54px; max-height: 168px; padding: 15px 16px; line-height: 1.4; resize: none; overflow-y: auto; font-family: var(--f-texto); }
.chat-form .estudo-duvida-linha { align-items: end; }

/* ---------- Resumo para a prova (pedido do Victor, 09/10) ----------
   A apostila da véspera, na paleta da Ducor: na tela, o escuro do app; no PDF, a folha clara (linho e branco), com o
   charuto no texto e a brasa nos destaques. As caixas: brasa = os erros dele; couro = pegadinha; areia = exemplo e atalho. */
.resumo-corpo { padding-top: 8px; }
.resumo-escolha { display: grid; gap: 24px; }
.resumo-bloco { display: grid; gap: 10px; }
.resumo-bloco .rotulo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.resumo-quantos { letter-spacing: .06em; color: var(--texto-3); }
.resumo-opcoes .opcao { min-height: 40px; padding: 8px 14px; border-radius: 14px; font-size: 14px; line-height: 1.3; text-align: left; }
.resumo-opcoes .opcao small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--brasa); }
.resumo-opcoes .opcao[aria-pressed="true"] small { color: var(--tabaco); }
.resumo-outro { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.resumo-custo { font-size: 13px; line-height: 1.45; color: var(--texto-2); }
.resumo-salvos { display: grid; gap: 8px; }
.resumo-salvo { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid var(--linha-forte); border-radius: 14px; background: var(--cartao); color: var(--texto); text-decoration: none; }
.resumo-salvo strong { font: 600 15px/1.3 var(--f-titulo); }
.resumo-salvo span { font-size: 12.5px; color: var(--texto-2); }

.resumo-doc { display: grid; gap: 18px; font-size: 15px; line-height: 1.55; color: var(--texto); }
.resumo-capa { padding: 18px 18px 16px; border-top: 4px solid var(--brasa); border-radius: var(--raio-cartao); background: linear-gradient(160deg, var(--cartao-destaque-1), var(--cartao-destaque-2)); }
.resumo-sobre { font: 500 11px/1.2 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--couro); }
.resumo-capa h1 { margin-top: 8px; font: 600 30px/1.08 var(--f-titulo); letter-spacing: -0.03em; color: var(--linho); }
.resumo-capa h1 .enfase { color: var(--brasa); }
.resumo-quando { margin-top: 10px; font-weight: 600; color: var(--areia); }
.resumo-quem { margin-top: 2px; font-size: 13px; color: var(--texto-2); }
.resumo-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.resumo-chips li { padding: 4px 10px; border: 1px solid var(--brasa-borda); border-radius: 999px; font: 600 10.5px/1.3 var(--f-texto); letter-spacing: .06em; text-transform: uppercase; color: var(--areia); }
.resumo-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.resumo-acoes .botao-texto.confirmar { color: var(--brasa); }

.resumo-faixa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 10px; padding: 11px 14px; border-left: 4px solid var(--brasa); border-radius: 12px; background: var(--charuto); }
.resumo-faixa-n { font: 600 10.5px/1.2 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--couro); }
.resumo-faixa h2 { flex: 1 1 60%; font: 600 19px/1.25 var(--f-titulo); color: var(--linho); }
.resumo-selo { font-size: 12px; color: var(--areia); }
.resumo-parte { display: grid; gap: 12px; }
.resumo-md { display: grid; gap: 10px; }
.resumo-md h3 { margin-top: 8px; padding-bottom: 5px; border-bottom: 1px solid var(--linha-forte); font: 600 17px/1.3 var(--f-titulo); color: var(--linho); }
.resumo-md p, .resumo-caixa p { margin: 0; }
.resumo-md ul, .resumo-md ol, .resumo-caixa ul, .resumo-caixa ol { display: grid; gap: 5px; padding-left: 22px; }
.resumo-md ul, .resumo-caixa ul { list-style: disc; }
.resumo-md ol, .resumo-caixa ol { list-style: decimal; }
.resumo-md li::marker, .resumo-caixa li::marker { color: var(--brasa); }
.resumo-doc strong { font-weight: 650; color: var(--linho); }
.resumo-tabela-caixa { overflow-x: auto; border-radius: 12px; border: 1px solid var(--linha-forte); }
.resumo-tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.4; }
.resumo-tabela th { padding: 8px 10px; background: var(--tabaco); text-align: left; font: 600 12.5px/1.3 var(--f-titulo); color: var(--linho); }
.resumo-tabela td { padding: 8px 10px; border-top: 1px solid var(--linha); vertical-align: top; }
.resumo-tabela td:first-child { font-weight: 600; color: var(--areia); }
.resumo-formulas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.resumo-formula { display: grid; gap: 3px; padding: 12px 12px 11px; border: 1px solid var(--brasa-borda); border-radius: 14px; background: var(--campo); text-align: center; }
.resumo-formula b { font: 600 19px/1.3 var(--f-titulo); color: var(--brasa); }
.resumo-formula span { font-size: 12.5px; line-height: 1.4; color: var(--texto-2); }
.resumo-caixa { display: grid; gap: 7px; padding: 12px 14px; border-left: 4px solid var(--areia); border-radius: 12px; background: rgba(205, 189, 166, .07); }
.resumo-caixa-rotulo { font: 700 10.5px/1.3 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--areia); }
.resumo-caixa.c-erros { border-left-color: var(--brasa); background: var(--brasa-fundo); }
.resumo-caixa.c-erros .resumo-caixa-rotulo { color: var(--brasa); }
.resumo-caixa.c-pegadinha, .resumo-caixa.c-atencao { border-left-color: var(--couro); background: rgba(169, 128, 89, .13); }
.resumo-caixa.c-pegadinha .resumo-caixa-rotulo, .resumo-caixa.c-atencao .resumo-caixa-rotulo { color: var(--couro); }
.resumo-caixa.c-exemplo { border: 1px solid var(--linha-forte); border-left: 4px solid var(--areia); background: var(--cartao); }
.resumo-caixa.c-guia { border-left-color: var(--tabaco); background: rgba(106, 70, 48, .22); }
.resumo-caixa.c-guia .resumo-caixa-rotulo { color: var(--couro); }
.resumo-caixa.c-plano { border-left-color: var(--linho); background: var(--cartao); }
.resumo-caixa.c-plano .resumo-caixa-rotulo { color: var(--linho); }
.resumo-contas { padding: 6px 10px; border-radius: 8px; background: var(--campo); font: 13.5px/1.45 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--linho); white-space: pre-wrap; }
.resumo-caixa.c-teste details { border-top: 1px solid var(--linha); padding-top: 7px; }
.resumo-caixa.c-teste details:first-of-type { border-top: 0; padding-top: 0; }
.resumo-caixa.c-teste summary { cursor: pointer; font-weight: 500; color: var(--texto); }
.resumo-caixa.c-teste summary::marker { color: var(--brasa); }
.resumo-caixa.c-teste details p { margin-top: 5px; padding-left: 16px; color: var(--areia); }
.resumo-escrevendo { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--texto-2); }
.resumo-aviso { font-size: 14px; color: var(--texto-2); }
.resumo-aviso .botao-texto { display: inline; width: auto; min-height: 0; padding: 0; color: var(--brasa); }
.resumo-relampago:empty { display: none; }
.resumo-relampago { margin-top: 10px; padding: 16px 16px 14px; border: 1px solid var(--brasa-borda); border-radius: var(--raio-cartao); background: var(--cartao); }
.resumo-relampago h2 { font: 600 20px/1.2 var(--f-titulo); color: var(--brasa); }
.resumo-relampago-sub { margin-top: 2px; font-size: 13px; color: var(--texto-2); }
.resumo-relampago ol { display: grid; gap: 6px; margin-top: 12px; padding-left: 26px; list-style: decimal; font-size: 14px; line-height: 1.45; }
.resumo-relampago li::marker { font-weight: 700; color: var(--brasa); }
.resumo-rodape { font-size: 12px; line-height: 1.45; color: var(--texto-3); }
.resumo-dica { flex-basis: 100%; font-size: 12px; line-height: 1.4; color: var(--texto-3); }
/* 13/10: o "Como usar" virou uma linha; o aviso de conteúdo fora do banco; o refazer de cada parte. */
.resumo-uso { font-size: 13.5px; line-height: 1.5; color: var(--texto-2); }
.resumo-uso strong { color: var(--texto); }
.resumo-fora { padding: 8px 12px; border: 1px dashed var(--linha-forte); border-radius: 10px; font-size: 13px; line-height: 1.45; color: var(--texto-2); }
.resumo-refazer { justify-self: start; width: auto; min-height: 36px; padding: 4px 2px; font-size: 13px; color: var(--texto-3); text-decoration: underline; text-underline-offset: 3px; }
.resumo-refazer.confirmar { color: var(--brasa); }
.so-papel, .resumo-gabarito { display: none; }
/* As perguntas do Teste-se numeradas em toda a folha: o gabarito do fim segue a mesma ordem. */
.resumo-doc { counter-reset: teste; }
.resumo-caixa.c-teste summary::before { counter-increment: teste; content: counter(teste) ". "; font-weight: 650; color: var(--brasa); }

@media print {
  @page { size: A4; margin: 14mm 13mm 15mm; }
  :root { color-scheme: light !important; } /* o app é escuro (color-scheme: dark): no papel, a margem da folha ficava preta */
  html, body { background: #fff !important; }
  body[data-tela-atual="resumo"] > *:not(.tela-resumo) { display: none !important; }
  .tela-resumo { position: static !important; inset: auto !important; overflow: visible !important; height: auto !important; background: #fff !important; transform: none !important; }
  .tela-resumo .topo, .resumo-acoes, .resumo-refazer { display: none !important; }
  .resumo-uso { font-size: 9.5pt; color: #6A4630; }
  .resumo-uso strong { color: #3B2417; }
  .resumo-fora { border-color: #CDBDA6; color: #6A4630; font-size: 9.5pt; }
  .tela-resumo .tela-corpo { padding: 0 !important; }
  .tela-resumo *, .tela-resumo *::before, .tela-resumo *::after { animation: none !important; transition: none !important; }
  .resumo-doc { gap: 12px; font-size: 10.5pt; line-height: 1.42; color: #2a1c13; } /* 19/10, à noite: a densidade dos resumos em PDF de 19/10 e 21/10 (10,4 pt) */
  .resumo-doc strong { color: #0F0A07; }
  .resumo-capa { background: #F1E9DC !important; border-top-color: #E07A3F; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .resumo-capa h1 { color: #3B2417; }
  .resumo-sobre, .resumo-faixa-n { color: #6A4630; }
  .resumo-quando { color: #3B2417; }
  .resumo-quem, .resumo-rodape, .resumo-relampago-sub { color: #6A4630; }
  .resumo-chips li { border-color: #E07A3F; color: #6A4630; }
  .resumo-faixa { background: #3B2417 !important; break-after: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .resumo-faixa h2 { color: #F1E9DC; }
  .resumo-faixa-n { color: #CDBDA6; }
  .resumo-selo { color: #CDBDA6; }
  .resumo-md h3 { color: #3B2417; border-bottom-color: #CDBDA6; break-after: avoid; }
  .resumo-md, .resumo-caixa p, .resumo-caixa li { color: #2a1c13; }
  .resumo-caixa, .resumo-formula, .resumo-tabela-caixa { break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .resumo-caixa { background: #FAF6F0 !important; border-left-color: #CDBDA6; }
  .resumo-caixa-rotulo { color: #6A4630 !important; }
  .resumo-caixa.c-erros { background: #FCEBDD !important; border-left-color: #E07A3F; }
  .resumo-caixa.c-erros .resumo-caixa-rotulo { color: #B4551C !important; }
  .resumo-caixa.c-pegadinha, .resumo-caixa.c-atencao { background: #F5ECE1 !important; border-left-color: #A98059; }
  .resumo-caixa.c-exemplo { background: #fff !important; border-color: #CDBDA6; border-left-color: #A98059; }
  .resumo-caixa.c-guia { background: #F1E9DC !important; border-left-color: #6A4630; }
  .resumo-caixa.c-plano { background: #fff !important; border: 1px solid #CDBDA6; border-left: 4px solid #3B2417; }
  .resumo-contas { background: #F1E9DC !important; color: #0F0A07; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .resumo-formula { background: #FAF6F0 !important; border-color: #E8C8AE; }
  .resumo-formula b { color: #B4551C; }
  .resumo-formula span { color: #6A4630; }
  .resumo-tabela-caixa { border-color: #CDBDA6; overflow: visible; }
  .resumo-tabela th { background: #6A4630 !important; color: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .resumo-tabela td { border-top-color: #E6DCCD; color: #2a1c13; }
  .resumo-tabela th, .resumo-tabela td { padding: 4px 8px; } /* 19/10, à noite: no papel, a tabela não precisa do respiro da tela */
  .resumo-tabela td:first-child { color: #3B2417; }
  .resumo-caixa.c-teste summary { color: #2a1c13; }
  .resumo-caixa.c-teste details p { color: #6A4630; }
  .resumo-relampago { background: #fff !important; border: 1.5px solid #E07A3F; }
  .resumo-relampago h2 { color: #B4551C; }
  .resumo-relampago li { color: #2a1c13; break-inside: avoid; }
  /* Aproveitar a folha (13/10: o resumo de 1 conteúdo saiu em 4 páginas, com 2/3 da 1ª em branco). No papel, nada de
     grade: o Chrome empurrava o conteúdo inteiro para a página seguinte. Tudo vira bloco, com margens curtas; só as caixas
     pequenas não se partem; a revisão relâmpago e o gabarito correm em 2 colunas, sem página só para eles. */
  .resumo-doc, .resumo-parte, .resumo-md, .resumo-caixa, .resumo-md ul, .resumo-md ol, .resumo-caixa ul, .resumo-caixa ol, .resumo-relampago ol { display: block !important; }
  .resumo-relampago li + li, .resumo-gabarito li + li { margin-top: 3px; }
  .resumo-doc > * + * { margin-top: 9px; }
  .resumo-parte > * + *, .resumo-md > * + * { margin-top: 6px; }
  .resumo-caixa > * + * { margin-top: 4px; }
  .resumo-md li + li, .resumo-caixa li + li { margin-top: 2px; }
  .resumo-md h3 { margin-top: 10px; font-size: 12.5pt; }
  .resumo-faixa { margin-top: 14px; padding: 8px 12px; }
  .resumo-faixa h2 { font-size: 14pt; }
  .resumo-capa { padding: 14px 16px 12px; }
  .resumo-capa h1 { font-size: 22pt; }
  .resumo-caixa { padding: 8px 12px; }
  .resumo-caixa.c-erros, .resumo-caixa.c-exemplo, .resumo-caixa.c-plano { break-inside: auto; }
  .resumo-caixa-rotulo, .resumo-relampago h2, .resumo-gabarito h2 { break-after: avoid; }
  .resumo-md li, .resumo-caixa li { break-inside: avoid; }
  .so-tela { display: none !important; }
  .so-papel { display: inline !important; }
  .resumo-caixa.c-teste details > :not(summary) { display: none !important; }
  .resumo-caixa.c-teste summary { list-style: none; }
  .resumo-caixa.c-teste summary::-webkit-details-marker { display: none; }
  .resumo-relampago { padding: 12px 14px; }
  .resumo-relampago ol, .resumo-gabarito ol { columns: 2; column-gap: 9mm; margin-top: 8px; font-size: 10pt; }
  .resumo-gabarito { display: block !important; padding: 10px 14px; border: 1px solid #CDBDA6; border-radius: 12px; break-inside: avoid; }
  .resumo-gabarito h2 { font: 600 12.5pt/1.2 var(--f-titulo); color: #3B2417; }
  .resumo-gabarito ol { padding-left: 22px; list-style: decimal; color: #2a1c13; }
  .resumo-gabarito li::marker { font-weight: 700; color: #B4551C; }
}

/* ---------- O tom da conversa e o cuidado (13/10, ideia do Felipe) ---------- */
.topo-icone { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-right: -6px; border: 0; background: none; color: var(--texto-2); cursor: pointer; border-radius: 50%; }
.topo-icone svg { width: 22px; height: 22px; }
.topo-icone:active { background: rgba(241, 233, 220, .06); }
.selo-prototipo + .topo-icone { margin-left: 2px; }
.tom-opcoes { display: grid; gap: 10px; }
.tom-opcao { display: grid; gap: 4px; min-height: 0; padding: 14px 16px; border-radius: 18px; text-align: left; color: var(--texto); font-weight: 400; }
.tom-opcao b { font: 600 16px/1.2 var(--f-titulo); letter-spacing: -0.01em; }
.tom-opcao small { font-size: 13px; line-height: 1.35; color: var(--texto-2); }
.tom-opcao .tom-exemplo { margin-top: 4px; font: italic 400 15px/1.4 var(--f-acento); color: var(--areia); }
.tom-opcao[aria-checked="true"] { border-color: var(--brasa-borda); background: var(--brasa-fundo); }
.tom-opcao[aria-checked="true"] b::after { content: " · o seu"; font: 500 12px/1 var(--f-texto); color: var(--brasa); }
.estudo-fala.chat-tom { max-width: 100%; justify-self: stretch; display: grid; gap: 10px; }
.chat-tom-sub { font-size: 13.5px; color: var(--texto-2); }
.escolhendo-tom .chat-form { opacity: .5; }
.escolhendo-tom .chat-limpar { display: none; }
.estudo-fala.chat-seguranca { border-color: var(--brasa-borda); background: linear-gradient(180deg, rgba(224, 122, 63, .12), rgba(224, 122, 63, .04)); }
.seguranca-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.seguranca-acoes .botao { width: auto; min-height: 44px; padding: 0 14px; font-size: 14px; text-decoration: none; }

/* ---------- Os botões de resumo no Chat e o fluxo com toques (13/10, ideia do Felipe) ---------- */
.chat-resumos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chat-resumos .botao { width: 100%; gap: 8px; padding: 0 10px; font-size: 14px; }
.chat-resumos .botao svg { width: 18px; height: 18px; flex: none; color: var(--brasa); }
.estudo-fala.chat-fluxo.ducor { max-width: 100%; justify-self: stretch; display: grid; gap: 10px; }
.chat-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chat-chips .opcao { min-height: 40px; padding: 8px 14px; line-height: 1.25; text-align: left; color: var(--texto); }
.chat-chips .opcao:disabled, .chat-fluxo .botao:disabled { opacity: .45; cursor: default; }
.chat-fluxo-outro { display: flex; gap: 8px; }
.chat-fluxo-outro .entrada { flex: 1; min-width: 0; }
.chat-fluxo-custo { font-size: 13px; line-height: 1.4; color: var(--texto-2); }
.chat-chips .opcao[aria-pressed="true"] { color: var(--ebano); }
.chat-seus-resumos { grid-column: 1 / -1; justify-self: end; display: inline-flex; align-items: center; gap: 2px; min-height: 36px; font-size: 13.5px; color: var(--texto-2); text-decoration: none; }
.chat-seus-resumos svg { width: 16px; height: 16px; }

/* ---------- O cronômetro inteligente (13/10, ideia do Felipe) ---------- */
.crono-cartao { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--brasa-borda); border-radius: 18px; background: var(--brasa-fundo); }
.crono-cartao-topo { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; }
.crono-cartao-topo b { display: block; font-size: 15px; font-weight: 600; }
.crono-cartao-topo small { display: block; font-size: 13.5px; color: var(--texto); }
.crono-cartao .icone-caixa, .crono-oferta .icone-caixa { color: var(--brasa); }
.crono-porque { font-size: 13px; line-height: 1.4; color: var(--texto-2); }
.crono-feito { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--texto); }
.crono-feito svg { width: 16px; height: 16px; color: var(--brasa); }
.crono-cartao-acoes, .crono-oferta-acoes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.crono-cartao-acoes .botao-principal, .crono-oferta-acoes .botao-principal { width: auto; padding: 0 22px; }
.crono-ajuste { display: grid; gap: 6px; }
.crono-ajuste small { font-size: 12.5px; color: var(--texto-2); }
.crono-ajuste-linha { display: grid; grid-template-columns: 1fr 44px 78px 44px; align-items: center; gap: 6px; font-size: 14px; }
.crono-ajuste-linha b { text-align: center; font-size: 15px; }
.crono-ajuste-linha .botao-redondo { width: 44px; height: 44px; font-size: 20px; color: var(--texto); }
.crono-corpo { display: grid; justify-items: center; align-content: start; gap: 18px; padding-top: 8px; text-align: center; }
.crono-tarefa { max-width: 32ch; }
.crono-mostrador { position: relative; width: min(78vw, 320px); aspect-ratio: 1; }
.crono-anel { position: absolute; inset: 0; width: 100%; height: 100%; }
.crono-anel path[data-crono-arco] { transition: stroke-dasharray .45s linear; }
.crono-mostrador.parado .crono-anel { opacity: .55; }
.crono-centro { position: absolute; inset: 0; display: grid; place-content: center; gap: 4px; }
.crono-fase { color: var(--brasa); }
.crono-mostrador.em-pausa .crono-fase { color: var(--couro); }
.crono-tempo { font: 600 clamp(48px, 15vw, 64px)/1 var(--f-titulo); letter-spacing: -0.03em; color: var(--linho); }
.crono-bloco { font-size: 14px; color: var(--texto-2); }
.crono-dica { max-width: 32ch; font: italic 400 19px/1.35 var(--f-acento); color: var(--areia); }
.crono-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.crono-acoes .botao { width: auto; min-width: 140px; gap: 8px; padding: 0 20px; }
.crono-acoes .botao svg { width: 18px; height: 18px; }
.crono-acoes .botao-texto.confirmar { color: var(--brasa); }
.crono-etapas { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 4px; }
.crono-etapas li { display: grid; place-items: center; min-width: 46px; padding: 6px 8px; border: 1px solid var(--linha-forte); border-radius: 12px; font: 600 15px/1 var(--f-titulo); color: var(--texto-2); }
.crono-etapas li small { margin-top: 3px; font: 500 10px/1 var(--f-texto); letter-spacing: .06em; text-transform: uppercase; }
.crono-etapas li.p { border-style: dashed; }
.crono-etapas li.foi { opacity: .45; }
.crono-etapas li.agora { border-color: var(--brasa); color: var(--linho); box-shadow: 0 0 0 3px var(--brasa-halo); }
.crono-nota { max-width: 34ch; font-size: 12.5px; color: var(--texto-3); }
.crono-fim, .crono-vazio { display: grid; justify-items: center; gap: 12px; padding-top: 24px; }
.crono-fim .icone-caixa, .crono-vazio .icone-caixa { width: 56px; height: 56px; color: var(--brasa); }
.crono-pergunta { margin-top: 6px; }
/* Na sessão com a Ducor: compacto no topo; na pausa, a conversa some e fica só a dica. */
.crono-mini { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 56px); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 var(--margem); padding: 8px 10px; border: 1px solid var(--linha-forte); border-radius: 16px; background: var(--vidro); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.crono-mini:has(.crono-oferta) { padding: 12px; }
.crono-mini-abrir { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 44px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.crono-mini-anel { width: 34px; height: 34px; flex: none; }
.crono-mini-fase { font: 500 11px/1 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--brasa); }
.crono-mini-tempo { font: 600 19px/1 var(--f-titulo); }
.crono-mini-bloco { font-size: 12.5px; color: var(--texto-2); }
.crono-mini .botao-redondo { width: 44px; height: 44px; }
.crono-mini .botao-redondo svg { width: 20px; height: 20px; }
.crono-mini-dica { flex-basis: 100%; font: italic 400 18px/1.35 var(--f-acento); color: var(--areia); }
.crono-mini-pular { width: auto; }
.tela-estudo.em-pausa .estudo-corpo, .tela-estudo.em-pausa .estudo-pe { visibility: hidden; }
.crono-oferta { flex: 1; display: grid; grid-template-columns: 40px 1fr; gap: 10px 12px; align-items: start; }
.crono-oferta b { display: block; font-size: 15px; font-weight: 600; }
.crono-oferta small { display: block; font-size: 13px; line-height: 1.4; color: var(--texto); }
.crono-oferta small.crono-porque { color: var(--texto-2); }
.crono-oferta-acoes { grid-column: 1 / -1; }
/* A pílula: o cronômetro andando enquanto o aluno usa outra tela. */
.crono-pilula { position: fixed; z-index: 19; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--brasa-borda); border-radius: 999px; background: var(--vidro); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: var(--linho); font-size: 14px; text-decoration: none; box-shadow: 0 10px 28px rgba(0, 0, 0, .4); }
body:not(.com-abas) .crono-pilula { bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); }
.crono-pilula svg { width: 18px; height: 18px; color: var(--brasa); }
.crono-pilula.pausa svg { color: var(--couro); }
.crono-pilula b { font: 600 15px/1 var(--f-titulo); }
.crono-pref .opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
@media (prefers-reduced-motion: reduce) { .crono-anel path[data-crono-arco] { transition: none; } }

/* ---------- Grupos e o ranking saudável (13/10, ideias do Felipe) ---------- */
.parte.grupos { display: grid; gap: 14px; }
.parte.grupos [data-grupos] { display: grid; gap: 14px; }
.g-carregando, .g-vazio { font-size: 14px; color: var(--texto-2); }
.g-cartao { display: grid; grid-template-columns: 12px 1fr 18px; align-items: center; gap: 12px; width: 100%; min-height: 66px; padding: 12px 14px; border: 1px solid var(--linha); border-radius: 18px; background: var(--cartao); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.g-cartao b { display: block; font-size: 15px; font-weight: 600; }
.g-cartao small { display: block; font-size: 13px; color: var(--texto-2); }
.g-cartao > svg { width: 18px; height: 18px; color: var(--texto-3); }
.g-cor { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--cor); box-shadow: 0 0 0 3px rgba(241, 233, 220, .08); }
.g-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.g-acoes .botao { width: auto; gap: 8px; padding: 0 16px; }
.g-acoes .botao svg { width: 18px; height: 18px; }
.g-seguro { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.4; color: var(--texto-2); }
.g-seguro svg { width: 18px; height: 18px; flex: none; color: var(--brasa); }
.g-menu .g-seguro { padding: 2px 10px 6px; }
.g-regras { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--brasa-borda); border-radius: 18px; background: var(--brasa-fundo); }
.g-regras ol { display: grid; gap: 8px; padding-left: 20px; list-style: decimal; font-size: 14px; line-height: 1.45; }
.g-aceite, .g-check, .g-chave { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14.5px; cursor: pointer; }
.g-aceite input, .g-check input, .g-chave input { width: 20px; height: 20px; accent-color: var(--brasa); }
.g-form { display: grid; gap: 14px; }
.g-cores { display: flex; flex-wrap: wrap; gap: 10px; }
.g-cor-opcao { width: 44px; height: 44px; border-radius: 50%; border: 2px solid transparent; background: var(--cor); cursor: pointer; }
.g-cor-opcao[aria-checked="true"] { border-color: var(--linho); box-shadow: 0 0 0 3px var(--brasa-halo); }
.g-convidar { display: grid; gap: 12px; }
.g-codigo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; border: 1px dashed var(--linha-forte); border-radius: 16px; }
.g-codigo b { font: 600 20px/1 var(--f-titulo); letter-spacing: .06em; }
.g-codigo .botao { width: auto; gap: 8px; }
.g-codigo .botao svg { width: 18px; height: 18px; }
.g-colegas { display: grid; gap: 6px; }
.g-colega { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 12px; border: 1px solid var(--linha); border-radius: 14px; background: var(--cartao); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.g-colega[aria-pressed="true"] { border-color: var(--brasa-borda); background: var(--brasa-fundo); }
.g-avatar { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: #2C1F15; border: 2px solid var(--cor); font: 600 14px/1 var(--f-titulo); color: var(--linho); }
.g-topo { display: grid; grid-template-columns: 44px 12px 1fr 44px; align-items: center; gap: 10px; }
.g-topo .topo-voltar { margin-left: -10px; border: 0; background: none; cursor: pointer; }
.g-topo h3 { font: 600 18px/1.2 var(--f-titulo); letter-spacing: -0.02em; }
.g-topo small { display: block; font-size: 12.5px; color: var(--texto-2); }
.g-menu { display: grid; gap: 2px; padding: 6px; border: 1px solid var(--linha-forte); border-radius: 16px; background: var(--cartao); }
.linha-g { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: var(--texto); font: inherit; font-size: 14.5px; text-align: left; cursor: pointer; }
.linha-g svg { width: 18px; height: 18px; color: var(--texto-2); }
.linha-g:active { background: rgba(241, 233, 220, .06); }
.linha-g.perigo, .linha-g.perigo svg { color: #EC9A6B; }
.g-abas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.g-abas .opcao { padding: 0 6px; font-size: 14px; }
.g-abas .opcao[aria-selected="true"] { background: var(--linho); border-color: var(--linho); color: var(--ebano); }
.g-conversa { display: grid; gap: 10px; max-height: 52vh; overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
.g-msg { display: flex; gap: 8px; align-items: flex-start; }
.g-msg.minha { justify-content: flex-end; }
.g-bolha { position: relative; max-width: 84%; padding: 10px 44px 10px 12px; border: 1px solid var(--linha); border-radius: 16px; border-top-left-radius: 6px; background: rgba(241, 233, 220, .06); font-size: 14.5px; line-height: 1.45; }
.g-msg.minha .g-bolha { padding-right: 12px; border-radius: 16px; border-top-right-radius: 6px; background: rgba(224, 122, 63, .12); border-color: var(--brasa-borda); }
.g-msg-de { font-size: 12px; color: var(--texto-2); margin-bottom: 2px; }
.g-selo { display: inline-block; margin-bottom: 4px; padding: 3px 8px; border-radius: 999px; background: var(--brasa-fundo); color: var(--brasa); font-size: 11.5px; }
.g-resumo { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding: 8px 10px; border: 1px dashed var(--linha-forte); border-radius: 12px; font-size: 13px; color: var(--texto); }
.g-resumo svg { width: 16px; height: 16px; flex: none; color: var(--brasa); }
.g-msg-mais { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: var(--texto-3); cursor: pointer; }
.g-msg-mais svg { width: 17px; height: 17px; }
.g-denuncia { display: grid; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linha); font-size: 14px; }
.g-denuncia label { display: flex; gap: 8px; align-items: center; min-height: 36px; }
.g-denuncia input { accent-color: var(--brasa); }
.g-escrever { display: grid; gap: 8px; }
.g-escrever textarea { min-height: 64px; padding: 12px 14px; resize: none; font-family: var(--f-texto); }
.g-escrever-op { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.g-escrever-op .botao { width: auto; margin-left: auto; padding: 0 20px; }
.g-materia { width: auto; min-width: 0; height: 44px; padding: 0 30px 0 12px; font-size: 14px; }
.g-barra { display: block; height: 8px; border-radius: 999px; background: rgba(241, 233, 220, .1); overflow: hidden; }
.g-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--couro), var(--brasa)); }
.g-ranking { display: grid; gap: 14px; }
.g-chaves { display: grid; gap: 2px; padding: 10px 14px; border: 1px solid var(--linha); border-radius: 16px; }
.g-chaves small { font-size: 12.5px; color: var(--texto-2); }
.g-chave input:disabled + span { opacity: .45; }
.g-temporada { display: grid; gap: 6px; }
.g-regra { font-size: 13px; line-height: 1.45; color: var(--texto-2); }
.g-regra b { color: var(--texto); font-weight: 600; }
.g-placar { display: grid; gap: 6px; }
.g-placar li { display: grid; grid-template-columns: 30px 32px minmax(0, 1fr) 64px 48px; align-items: center; gap: 8px; min-height: 48px; padding: 6px 10px; border: 1px solid var(--linha); border-radius: 14px; background: var(--cartao); font-size: 14px; }
.g-placar li.eu { border-color: var(--brasa-borda); background: var(--brasa-fundo); }
.g-pos { font: 600 15px/1 var(--f-titulo); color: var(--texto-2); }
.g-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-placar b { text-align: right; font: 600 15px/1 var(--f-titulo); }
.g-voce { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--linha-forte); border-radius: 16px; font-size: 14px; line-height: 1.45; }
.g-voce b.sobe { color: #9CCB8E; }
.g-voce b.desce { color: #EC9A6B; }
.g-atividades { display: grid; gap: 6px; }
.g-atividades li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 6px; border: 1px solid var(--linha); border-radius: 14px; background: var(--cartao); }
.g-ativ { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; min-height: 52px; padding: 8px 10px; border: 0; background: none; color: inherit; font: inherit; font-size: 13.5px; line-height: 1.35; text-align: left; cursor: pointer; }
.g-verdade + .g-voce .g-ativ { grid-template-columns: 1fr auto; }
.g-ativ small { display: block; font-size: 12px; color: var(--texto-2); }
.g-nota { min-width: 42px; padding: 6px 8px; border-radius: 10px; background: var(--brasa-fundo); color: var(--brasa); font: 600 15px/1 var(--f-titulo); text-align: center; }
.g-porque { grid-column: 1 / -1; display: grid; gap: 4px; padding: 0 12px 12px; font-size: 13px; line-height: 1.45; color: var(--texto); }
.g-apoio, .g-apoio-meu { display: inline-flex; align-items: center; gap: 4px; min-width: 44px; min-height: 44px; padding: 0 10px; border: 0; background: none; color: var(--texto-2); font: inherit; font-size: 13px; cursor: pointer; }
.g-apoio svg, .g-apoio-meu svg { width: 18px; height: 18px; }
.g-apoio[aria-pressed="true"] { color: var(--brasa); }
.g-apoio[aria-pressed="true"] svg { fill: var(--brasa); }
.g-apoio-meu { cursor: default; color: var(--texto-3); }
.g-historico { display: grid; gap: 6px; font-size: 13.5px; color: var(--texto-2); }
.g-historico li { display: flex; align-items: center; gap: 8px; }
.g-historico svg { width: 18px; height: 18px; color: var(--couro); }
.g-verdade { display: grid; gap: 10px; }
.g-verdade .botao { width: auto; justify-self: start; }
.partes { grid-template-columns: repeat(3, 1fr); } /* 13/10: Escola · Grupos · Insights (as conquistas foram para o Perfil) */

/* ---------- Chat, 13/10 (pedidos do Victor): conversa nova no alto, o cronômetro à vista e o resumo pela conversa ---------- */
.topo-acao { display: inline-flex; align-items: center; gap: 7px; flex: none; min-height: 40px; padding: 0 14px; border: 1px solid var(--linha-forte); border-radius: 999px; background: none; color: var(--texto); font: 500 14px/1 var(--f-texto); cursor: pointer; }
.topo-acao svg { width: 18px; height: 18px; flex: none; color: var(--brasa); }
.topo-acao:active { background: rgba(241, 233, 220, .06); }
.topo-acao:disabled { opacity: .45; cursor: default; }
.selo-prototipo + .topo-acao { margin-left: 4px; }
.topo-acao[hidden] + .topo-icone { margin-left: 2px; }
/* No celular estreito, só o ícone (44 × 44), com o nome para o leitor de tela e na dica. */
@media (max-width: 480px) {
  .topo-acao { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; border-color: transparent; }
  .topo-acao span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .topo-acao svg { width: 22px; height: 22px; }
}
.chat-topo { display: grid; gap: 14px; }
@media (min-width: 900px) {
  .chat-topo { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); align-items: start; gap: 28px; }
  .chat-topo .crono-chat { margin-top: 10px; }
}
.crono-chat { padding: 14px; border: 1px solid var(--brasa-borda); border-radius: 20px; background: linear-gradient(180deg, rgba(224, 122, 63, .1), rgba(224, 122, 63, .03)); }
.crono-chat[hidden] { display: none; }
.crono-chat .crono-oferta { flex: none; }
.crono-chat-andando { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.crono-chat-abrir { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.crono-chat-anel { width: 60px; height: 60px; flex: none; }
.crono-chat-txt { display: grid; gap: 4px; min-width: 0; }
.crono-chat-tempo { font: 600 30px/1 var(--f-titulo); letter-spacing: -0.02em; }
.crono-chat-txt .crono-mini-bloco { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crono-chat-andando .botao-redondo { width: 48px; height: 48px; }
.crono-chat-andando .botao-redondo svg { width: 22px; height: 22px; }
.crono-chat-andando.em-pausa .crono-mini-fase { color: var(--areia); }
.crono-chat-fim { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; }
.crono-chat-fim b { display: block; font-size: 15px; font-weight: 600; }
.crono-chat-fim small { display: block; font-size: 13px; color: var(--texto-2); }
.crono-chat-fim .icone-caixa { color: var(--brasa); }
.crono-chat-fim .botao { width: auto; padding: 0 18px; }
.chat-sugestoes { align-items: center; }
.chat-sugestoes .opcao { display: inline-flex; align-items: center; gap: 8px; }
.chat-sugestoes .opcao svg { width: 17px; height: 17px; flex: none; color: var(--brasa); }
.chat-sugestoes .chat-seus-resumos { margin-left: auto; }
.resumo-vazio { font-size: 14.5px; color: var(--texto-2); }
.resumo-pedir { gap: 10px; }
.resumo-pedir svg { width: 20px; height: 20px; flex: none; }

/* As tabelas curtas do Chat (13/10): a tutora compara "X, não Y" como no Obsidian. Rolam de lado no celular. */
.chat-tabela-caixa { max-width: 100%; overflow-x: auto; border: 1px solid var(--linha); border-radius: 12px; }
.chat-tabela { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.35; }
.chat-tabela th, .chat-tabela td { padding: 7px 10px; border-bottom: 1px solid var(--linha); text-align: left; vertical-align: top; }
.chat-tabela th { font-weight: 600; color: var(--texto); background: rgba(241, 233, 220, .05); }
.chat-tabela tr:last-child td { border-bottom: 0; }

/* ==========================================================================
   13/10 (pedidos do Victor): os Objetivos de cada um e os Insights feitos dos dados do aluno.
   Fixo é só o destino do cadastro; os outros o aluno cria (a folha do objetivo), marca etapa por etapa, muda e apaga.
   Os Insights saem dos dados dele, e o vazio diz de onde eles vão sair. A brasa fica só no "agora".
   ========================================================================== */
/* A aba Objetivos: os cartões do aluno mostram as etapas como bolinhas e o "Agora" com a próxima. */
.objetivo-novo { margin-top: 2px; }
.objetivo-novo[aria-disabled="true"] { opacity: .55; cursor: default; }
.objetivo-meu .titulo-tela { overflow-wrap: anywhere; }
.trilha-meus { margin: 18px -6px 2px; }
.trilha-meus li { min-height: 22px; }
.objetivo-agora { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; font-size: 14.5px; font-weight: 500; line-height: 1.35; color: var(--texto); }
.objetivo-agora .rotulo { flex: none; color: var(--brasa); }
.objetivo-agora span:last-child { min-width: 0; overflow-wrap: anywhere; }
.objetivo-agora.cumprido { align-items: center; gap: 8px; font-weight: 400; color: var(--texto-2); }
.objetivo-agora svg { width: 16px; height: 16px; flex: none; color: var(--linho); }

/* O Destino de um objetivo do aluno: o porquê nas palavras dele, as etapas que se marcam, Editar e Apagar. */
.destino > div { min-width: 0; }
.destino h2, .meu-passo > div > b { overflow-wrap: anywhere; }
.destino-porque { font: italic 400 20px/1.35 var(--f-acento); color: var(--areia); overflow-wrap: anywhere; }
.bloco-cabeca .bloco-acao { align-self: center; margin: -8px -10px -8px 0; padding: 0 10px; gap: 6px; }
.bloco-acao svg { width: 18px; height: 18px; }
.meu-passo > div > span:empty { display: none; }
.meu-passo.feita > div > b { color: var(--texto-2); }
.meu-passo.agora > div > span { color: var(--brasa); }
.meu-passo.acabou > .marco { animation: estoura .42s cubic-bezier(.2, 1.6, .4, 1) both; }
.trilha-vazia { font-size: 14px; line-height: 1.45; color: var(--texto-2); }
.destino-fixo { display: grid; justify-items: start; gap: 2px; }
.destino-fixo .bloco-sub { margin-top: 0; }
.destino-fixo .botao-texto, .destino-apagar { gap: 8px; padding: 0 8px; margin-left: -8px; }
.destino-fixo svg, .destino-apagar svg { width: 18px; height: 18px; }
.destino-apagar { justify-self: start; }
.destino-apagar.confirmar { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* A folha do objetivo: título, área, por que importa, prazo e as etapas (a última, a meta, ganha o círculo cheio). */
.folha-objetivo { gap: 18px; }
.folha-objetivo .opcoes .opcao { padding: 0 14px; font-size: 14px; }
.entrada-curta { min-height: 76px; }
.prazo-linha { display: flex; align-items: center; gap: 8px; }
.prazo-linha .entrada { flex: 1; min-width: 0; }
.prazo-linha .botao-texto { flex: none; padding: 0 8px; }
.passos-campos { display: grid; gap: 8px; }
.passo-campo { display: grid; grid-template-columns: 26px minmax(0, 1fr) 44px; align-items: center; gap: 8px; }
.passo-num { display: grid; place-items: center; width: 26px; height: 26px; border: 1.5px solid rgba(241, 233, 220, .38); border-radius: 50%; font: 600 12.5px/1 var(--f-texto); color: var(--texto-2); }
.passo-campo:last-child:not(:first-child) .passo-num { border-color: var(--linho); background: var(--linho); color: var(--ebano); }
.passo-tirar { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: none; color: var(--texto-3); cursor: pointer; }
.passo-tirar:active { background: rgba(241, 233, 220, .06); }
.passo-tirar svg { width: 18px; height: 18px; }
.passo-mais { justify-self: start; gap: 6px; padding: 0 8px; margin-left: -8px; }
.passo-mais svg { width: 18px; height: 18px; }

/* Os Insights: o vazio, a linha dos livros (em preparo) e, no computador, duas colunas de ideias. */
.insights-vazio { display: grid; grid-template-columns: 40px 1fr; gap: 12px 14px; align-items: start; margin-top: 22px; padding: 16px; border: 1px dashed rgba(169, 128, 89, .5); border-radius: 20px; }
.insights-vazio .icone-caixa { color: var(--couro); background: rgba(169, 128, 89, .13); }
.insights-vazio b { display: block; font: 600 17px/1.25 var(--f-titulo); letter-spacing: -0.02em; }
.insights-vazio p { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--texto-2); }
.insights-vazio .botao { grid-column: 2; justify-self: start; }
/* 29/10: os livros de volta, com a linha pequena e honesta de que a lista é de exemplo */
.insights-livros[hidden] { display: none; }
.livros-nota { grid-column: 1 / -1; margin-top: -4px; font-size: 13px; line-height: 1.4; color: var(--texto-3); }
.insight h3, .insight-texto { overflow-wrap: anywhere; }
@media (min-width: 900px) {
  .insight-secao { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .insight-secao .secao-titulo { grid-column: 1 / -1; }
}

/* ---------- A régua (14/10, pedidos do Victor): o tempo por dia, de 30 em 30 min até 5 h, e o tempo do cronômetro ---------- */
/* Um <input type="range"> de verdade, transparente, por cima do trilho desenhado; os pontos são as paradas ("checkpoints"). */
.campo-regua { gap: 4px; max-width: 640px; } /* no computador, uma régua de tela inteira pede um arrasto comprido demais */
.campo-regua > .dica-campo { margin-top: 6px; }
.regua-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.regua-valor { font: 600 22px/1 var(--f-titulo); letter-spacing: -0.02em; color: var(--linho); white-space: nowrap; }
.regua-trilho { --polegar: 30px; position: relative; padding-bottom: 18px; }
.regua-fundo { position: absolute; left: 0; right: 0; top: 19px; height: 6px; border-radius: 999px; background: rgba(241, 233, 220, .14); pointer-events: none; }
.regua-cheio { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--polegar) / 2 + (100% - var(--polegar)) * var(--p)); border-radius: inherit; background: linear-gradient(90deg, rgba(224, 122, 63, .5), var(--brasa)); }
.regua-ponto { position: absolute; top: 50%; left: calc(var(--polegar) / 2 + (100% - var(--polegar)) * var(--q)); box-sizing: border-box; width: 10px; height: 10px; border: 2px solid rgba(241, 233, 220, .38); border-radius: 50%; background: var(--fundo); transform: translate(-50%, -50%); transition: background-color .15s ease, border-color .15s ease; }
.regua-ponto.feito { border-color: var(--linho); background: var(--linho); }
.regua-barra { position: relative; z-index: 1; display: block; width: 100%; height: 44px; margin: 0; padding: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.regua-barra:focus { outline: none; }
.regua-barra::-webkit-slider-runnable-track { height: 44px; border: 0; background: transparent; }
.regua-barra::-moz-range-track { height: 44px; border: 0; background: transparent; }
.regua-barra::-moz-range-progress { background: transparent; }
.regua-barra::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: var(--polegar); height: var(--polegar); margin-top: calc((44px - var(--polegar)) / 2); border: 3px solid var(--brasa); border-radius: 50%; background: var(--linho); box-shadow: 0 3px 12px rgba(0, 0, 0, .5); transition: transform .12s ease, box-shadow .2s ease; }
.regua-barra::-moz-range-thumb { box-sizing: border-box; width: var(--polegar); height: var(--polegar); border: 3px solid var(--brasa); border-radius: 50%; background: var(--linho); box-shadow: 0 3px 12px rgba(0, 0, 0, .5); }
.regua-barra:active::-webkit-slider-thumb { transform: scale(1.1); }
.regua-barra:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 6px var(--brasa-halo), 0 3px 12px rgba(0, 0, 0, .5); }
.regua-barra:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 6px var(--brasa-halo), 0 3px 12px rgba(0, 0, 0, .5); }
.regua-rotulos { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; pointer-events: none; }
.regua-rotulos span { position: absolute; top: 0; left: calc(var(--polegar) / 2 + (100% - var(--polegar)) * var(--q)); transform: translateX(-50%); font: 500 11.5px/16px var(--f-texto); color: var(--texto-3); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .regua-ponto, .regua-barra::-webkit-slider-thumb { transition: none; } }
/* No cronômetro: a régua dentro das ofertas (a folha da tarefa, o Chat, a sessão) e o estudo livre na tela dele. O cartão do
   estudo livre tem largura fixa: se ela acompanhasse o texto do plano, a barra andaria embaixo do dedo enquanto ele arrasta. */
.crono-escolha { display: grid; gap: 2px; }
.crono-escolha .regua-valor { font-size: 19px; }
.crono-oferta .crono-escolha, .crono-oferta .crono-ajuste { grid-column: 1 / -1; }
.crono-oferta-acoes .botao-texto { padding: 0 12px; } /* Começar, Ajustar e Agora não numa linha só, no celular */
/* Antes da sessão, a oferta (com a régua, mais alta) rola com a conversa; presa no alto fica só o cronômetro andando. */
.crono-mini:has(.crono-oferta) { position: relative; top: auto; }
.crono-livre { display: grid; gap: 10px; width: min(100%, 440px); margin-top: 6px; padding: 16px; border: 1px solid var(--brasa-borda); border-radius: 20px; background: var(--brasa-fundo); text-align: left; }
.crono-livre-plano { font-size: 15px; font-weight: 600; color: var(--texto); }
.crono-vazio { width: 100%; } /* a largura da tela, não a do texto: assim o cartão abaixo tem uma largura que não muda */
.crono-vazio .subtitulo { max-width: 36ch; }
.botao-link { display: inline; padding: 0; border: 0; background: none; color: var(--brasa); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* ---------- O revezamento (14/10, 2º pedido do Victor: "estudar 30min e descansar 10min [...] sem parar") ---------- */
/* Em cima da régua do cronômetro: "Tempo total | Revezar sem parar", lado a lado. Revezando, as réguas são o foco e a
   pausa; andando, a tela mostra o par foco e pausa (o que está agora, em destaque) e o foco feito até ali. */
.crono-modos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
.crono-modos .opcao { min-height: 40px; padding: 0 8px; font-size: 14px; line-height: 1.2; }
.crono-rev + .crono-rev { margin-top: 10px; } /* os números da régua do foco não encostam no "Pausa" */
.crono-revezando { display: grid; justify-items: center; gap: 8px; }
.crono-revezando-txt { font-size: 14px; color: var(--texto-2); }

/* ---------- O histórico das conversas (14/10, pedido do Victor: "quero que a Ducor também tenha um histórico de chats") ---------- */
/* No alto do Chat, "Histórico" ao lado de "Nova conversa". No celular, os dois viram só o ícone (até 640 px, para os
   nomes não empurrarem o resto), o nome "Ducor" sai dessa barra (o título logo abaixo já diz) e o símbolo não encolhe. */
.topo .simbolo { flex: none; }
.selo-prototipo + .topo-acao[hidden] + .topo-acao { margin-left: 4px; }
@media (max-width: 640px) {
  .tela-chat .topo-acao { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; border-color: transparent; }
  .tela-chat .topo-acao span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tela-chat .topo-acao svg { width: 22px; height: 22px; }
}
@media (max-width: 480px) {
  .tela-chat .topo { gap: 6px; }
  .tela-chat .topo .nome { display: none; }
}
@media (max-width: 340px) { /* o celular mais estreito: o selo sai só desta barra (o aviso do Chat, logo abaixo, diz que é teste) */
  .tela-chat .selo-prototipo { display: none; }
  .tela-chat .topo .simbolo { margin-right: auto; }
}
.folha-conversas { gap: 12px; }
.conversas-busca[hidden] { display: none; }
.conversas-lista { display: grid; gap: 8px; }
.conversa { display: grid; grid-template-columns: minmax(0, 1fr) auto; border: 1px solid var(--linha-forte); border-radius: 16px; overflow: hidden; }
.conversa.aberta { border-color: var(--brasa-borda); background: var(--brasa-fundo); }
.conversa-abrir { display: grid; gap: 4px; min-width: 0; min-height: 64px; padding: 12px 6px 12px 14px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.conversa-abrir:active { background: rgba(241, 233, 220, .05); }
.conversa-abrir b { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--texto); overflow-wrap: anywhere; }
.conversa-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12.5px; line-height: 1.3; color: var(--texto-2); }
.conversa-agora { font-style: normal; font-weight: 600; color: var(--brasa); }
.conversa-assuntos { overflow: hidden; font-size: 12.5px; line-height: 1.3; color: var(--couro); text-overflow: ellipsis; white-space: nowrap; }
.conversa-apagar { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 48px; padding: 0 12px; border: 0; background: none; color: var(--texto-3); font: 600 13px/1 var(--f-texto); cursor: pointer; }
.conversa-apagar svg { width: 18px; height: 18px; flex: none; }
.conversa-apagar span { display: none; }
.conversa-apagar.confirmar { color: #EC9A6B; background: rgba(236, 154, 107, .1); }
.conversa-apagar.confirmar span { display: inline; }
.conversa-apagada { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 0 14px; border-style: dashed; font-size: 14px; color: var(--texto-2); }
.conversas-vazio { padding: 14px; border: 1px dashed var(--linha-forte); border-radius: 16px; font-size: 14px; line-height: 1.45; color: var(--texto-2); }
.conversas-nota { font-size: 12.5px; line-height: 1.4; color: var(--texto-3); }

/* Acender o que você já sabe (o nivelamento, 14/10, noite) */
.nivelar-link { position: absolute; z-index: 2; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 86px); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 16px; border: 1px solid var(--brasa-borda); border-radius: 999px; background: var(--vidro); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 14px; font-weight: 500; white-space: nowrap; color: var(--linho); text-decoration: none; }
.nivelar-link svg { color: var(--brasa); }
.nivelar-link[hidden] { display: none; }
.nivelar-link svg { width: 15px; height: 15px; flex: none; }
.nivelar-corpo { display: grid; gap: 18px; align-content: start; }
.nivelar-materias { display: flex; flex-wrap: wrap; gap: 8px; }
.nivelar-materias .opcao { flex: none; min-height: 40px; padding: 0 14px; font-size: 14px; }
.nivelar-materias .opcao .num { margin-left: 6px; color: var(--texto-3); font-size: 12.5px; }
.nivelar-materias .opcao[aria-pressed="true"] .num { color: inherit; opacity: .8; }
.nivelar-lista { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.nivelar-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 10px 14px; border: 1px solid var(--linha); border-radius: 14px; background: var(--cartao); color: var(--texto); font: 500 15px/1.3 var(--f-texto); text-align: left; cursor: pointer; }
.nivelar-item small { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 400; color: var(--texto-3); }
.nivelar-item[aria-pressed="true"] { border-color: var(--brasa-borda); background: var(--brasa-fundo); }
.nivelar-item:disabled { cursor: default; opacity: .62; }
.nivelar-caixa { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border: 1.5px solid var(--linha-forte); border-radius: 7px; color: var(--fundo); }
.nivelar-item[aria-pressed="true"] .nivelar-caixa { border-color: var(--brasa); background: var(--brasa); }
.nivelar-caixa svg { width: 15px; height: 15px; }
.nivelar-vazio { padding: 18px 4px; color: var(--texto-2); font-size: 14.5px; line-height: 1.45; }
.nivelar-nota { margin: 0; color: var(--texto-3); font-size: 13px; line-height: 1.45; }

/* O mini chat do cérebro e os documentos da escola (15/10, ideia do Felipe): a barra embaixo do cérebro (no lugar da
   pílula do nivelamento) e o painel que sobe até a metade da tela, no mesmo vidro do cartão de um ponto. */
.mini-barra {
  position: absolute; z-index: 3; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 86px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; width: min(calc(100% - 32px), 420px); min-height: 50px; padding: 0 14px 0 16px;
  border: 1px solid var(--linha-forte); border-radius: 999px; background: var(--vidro);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  font: 500 15px/1.2 var(--f-texto); color: var(--texto-2); text-align: left; cursor: pointer;
  transition: opacity .25s ease, transform .25s ease;
}
.mini-barra span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-barra svg { width: 19px; height: 19px; flex: none; color: var(--brasa); }
.mini-barra .mini-barra-clipe { color: var(--texto-3); }
.mini-barra:active { transform: translateX(-50%) scale(.98); }
.com-cartao .mini-barra, .com-mini .mini-barra { opacity: 0; pointer-events: none; }
.com-mini .inicio-topo { opacity: 0; pointer-events: none; }
.inicio-topo { transition: opacity .25s ease; }

.mini {
  position: absolute; z-index: 11; left: 10px; right: 10px; bottom: calc(env(safe-area-inset-bottom, 0px) + 76px);
  max-width: 480px; height: min(54vh, 560px); margin: 0 auto;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 8px; padding: 6px 12px 12px;
  border-radius: 24px; background: rgba(33, 23, 16, .9); border: 1px solid rgba(241, 233, 220, .14);
  -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  animation: mini-sobe .34s cubic-bezier(.2, .8, .2, 1) both;
}
.mini[hidden] { display: none; }
@keyframes mini-sobe { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mini { animation: none; } }
@media (min-height: 860px) { .mini { height: min(50vh, 600px); } }
.mini-cabeca { display: flex; align-items: center; gap: 6px; margin-right: -8px; padding-left: 4px; }
.mini-cabeca .rotulo { display: flex; align-items: center; gap: 8px; margin-right: auto; }
.mini-cabeca .rotulo svg { width: 16px; height: 16px; color: var(--brasa); }
.mini-limpar { min-height: 40px; padding: 0 10px; border: 0; background: none; font: 500 13.5px/1 var(--f-texto); color: var(--texto-2); cursor: pointer; }
.mini-conversa { overflow-y: auto; overscroll-behavior: contain; align-content: start; padding: 2px 2px 6px; scrollbar-width: none; }
.mini-conversa::-webkit-scrollbar { display: none; }
.mini-conversa .estudo-fala { font-size: 14.5px; }
.mini-conversa .estudo-fala.ducor { max-width: 94%; }
.mini-sugestoes { flex-wrap: nowrap; overflow-x: auto; gap: 6px; margin: 0 -12px; padding: 0 12px; scrollbar-width: none; }
.mini-sugestoes::-webkit-scrollbar { display: none; }
.mini-sugestoes:empty { display: none; }
.mini-sugestoes .opcao { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 13px; font-size: 13.5px; color: var(--texto); white-space: nowrap; }
.mini-sugestoes .opcao svg { width: 16px; height: 16px; flex: none; color: var(--brasa); }
.mini-form { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 6px; }
.mini-anexo { display: grid; place-items: center; width: 44px; height: 48px; border: 1px solid var(--linha-forte); border-radius: 14px; background: transparent; color: var(--texto-2); cursor: pointer; }
.mini-anexo svg { width: 21px; height: 21px; }
.mini-anexo:disabled { opacity: .4; cursor: default; }
.mini-entrada { height: auto; min-height: 48px; max-height: 120px; padding: 13px 14px; line-height: 1.35; resize: none; overflow-y: auto; font-family: var(--f-texto); }
.mini-form .botao-curto { min-height: 48px; padding: 0 14px; }
.mini-pontos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.mini-ponto { min-height: 32px; padding: 0 11px; border: 1px solid var(--brasa-borda); border-radius: 999px; background: var(--brasa-fundo); font: 500 13px/1 var(--f-texto); color: var(--linho); cursor: pointer; }
.mini-arquivo { display: inline-flex; align-items: center; gap: 8px; }
.mini-arquivo svg { width: 17px; height: 17px; flex: none; }
.mini-espera-txt { display: block; margin-top: 6px; font-size: 13px; color: var(--texto-2); }

/* O que a Ducor achou num documento: o aluno confere, desmarca, corrige a data e põe no cérebro. */
.estudo-fala.mini-achados { justify-self: stretch; max-width: none; display: grid; gap: 10px; padding: 14px; }
.mini-achados h3 { font: 600 15px/1.25 var(--f-titulo); }
.mini-achados .mini-sub { font-size: 13px; line-height: 1.4; color: var(--texto-2); }
.mini-grupo { display: grid; gap: 6px; }
.mini-grupo > .rotulo { margin-top: 2px; }
.mini-item { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 10px; border: 1px solid var(--linha); border-radius: 12px; background: rgba(241, 233, 220, .03); cursor: pointer; }
.mini-item input[type="checkbox"] { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--brasa); cursor: pointer; }
.mini-item.desmarcado { opacity: .5; }
.mini-item b { font-weight: 600; }
.mini-item small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.35; color: var(--texto-2); }
.mini-item small.novo { color: var(--brasa); }
.mini-data { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mini-data input { height: 36px; padding: 0 8px; border: 1px solid var(--linha-forte); border-radius: 10px; background: var(--campo); font: 14px/1 var(--f-texto); color: var(--texto); color-scheme: dark; }
.mini-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mini-acoes .botao { width: auto; flex: 1; min-height: 46px; }
.mini-acoes .link-pe { min-height: 44px; }
.mini-docs { display: grid; gap: 6px; }
.mini-doc { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 6px 8px 12px; border: 1px solid var(--linha); border-radius: 12px; }
.mini-doc small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--texto-2); }
.mini-doc-tirar { min-height: 40px; padding: 0 10px; border: 0; border-radius: 10px; background: none; font: 600 13px/1 var(--f-texto); color: var(--texto-2); cursor: pointer; }
.mini-doc-tirar.confirmar { color: #EC9A6B; background: rgba(236, 154, 107, .1); }
/* O cronômetro andando: a pílula dele fica no lugar da barra do mini chat, que sobe; com o mini chat aberto, a pílula sai. */
.com-pilula .mini-barra { bottom: calc(env(safe-area-inset-bottom, 0px) + 138px); }
.mini-aberto .crono-pilula { display: none; }
.mini-acoes-pe { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: -4px; }
.mini-descartar { min-height: 40px; padding: 0 4px; border: 0; background: none; font: 600 14px/1 var(--f-texto); color: var(--texto-2); cursor: pointer; }
.mini-acoes-pe .chat-ruim { margin: 0; }
.mini-sugestoes .opcao:disabled { opacity: .45; cursor: default; }

/* Vários documentos de uma vez (18/10): o andamento, cada documento que se abre e o que ficou de fora */
.mini-nomes { display: block; margin-top: 4px; font-size: 12px; line-height: 1.35; opacity: .8; }
.lote-barra { height: 6px; border-radius: 3px; background: var(--linha); overflow: hidden; }
.lote-barra i { display: block; height: 100%; background: var(--brasa); transition: width .4s ease; }
.lote-atual { overflow-wrap: anywhere; }
.lote-parou { color: var(--brasa) !important; }
.lote-docs { display: grid; gap: 8px; }
.lote-doc { border: 1px solid var(--linha); border-radius: 12px; background: rgba(241, 233, 220, .03); }
.lote-doc > summary { display: grid; grid-template-columns: 24px minmax(0, 1fr) 14px; gap: 10px; align-items: start; padding: 10px; cursor: pointer; list-style: none; }
.lote-doc > summary::-webkit-details-marker { display: none; }
.lote-doc > summary::after { content: '▾'; color: var(--texto-2); line-height: 20px; transition: transform .2s ease; }
.lote-doc[open] > summary::after { transform: rotate(180deg); }
.lote-doc > summary input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--brasa); cursor: pointer; }
.lote-doc > summary b { font-weight: 600; overflow-wrap: anywhere; }
.lote-doc > summary small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.35; color: var(--texto-2); overflow-wrap: anywhere; }
.lote-doc.desmarcado > summary { opacity: .5; }
.lote-corpo { display: grid; gap: 10px; padding: 0 10px 10px; }
.lote-corpo .chat-ruim { justify-self: start; margin: 0; }
.lote-lista { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.4; color: var(--texto-2); }
.lote-lista b { color: var(--texto); font-weight: 600; overflow-wrap: anywhere; }
.mini-lote .mini-acoes { flex-direction: column; align-items: stretch; }
.mini-lote .mini-acoes .botao { width: 100%; flex: none; }
/* 18/10: as caixas de reclamação ("Ficou ruim?", "A leitura errou?", "Achei um erro"), sem limite de letras e crescendo com o texto */
.nota-livre { min-height: 76px; max-height: 300px; resize: vertical; overflow-y: auto; line-height: 1.4; font-family: var(--f-texto); padding-top: 12px; padding-bottom: 12px; } /* 30/10: a caixa de texto vinha na letra de máquina do navegador */
.estudo-duvida-linha:has(.nota-livre) { align-items: end; }

/* ==========================================================================
   27/10 (o filme novo, decisões do Victor): o caminho em 5 degraus em Objetivos, os cartões "Seu cérebro lembrou" no
   lembrete do dia, a escola dentro do Cérebro (o cartão de cada ponto e a folha do comunicado) e os 2 botões do Chat.
   ========================================================================== */
/* (29/10: o caminho em 5 degraus saiu de Objetivos, e as regras dele, .rumo e .degrau, saíram junto.) */

/* "Seu cérebro lembrou": até 3 cartões calmos embaixo das tarefas do dia */
.lembrou { display: grid; gap: 6px; margin-top: 2px; padding-top: 8px; border-top: 1px solid var(--linha); }
.lembrou-rotulo { display: flex; align-items: center; gap: 7px; color: var(--brasa); }
.lembrou-rotulo svg { width: 13px; height: 13px; flex: none; }
.lembrou-lista { display: grid; gap: 6px; }
.lembrou-cartao {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 16px; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 5px 8px 5px 7px;
  border: 1px solid var(--linha); border-radius: 14px; background: rgba(241, 233, 220, .035); text-align: left; color: inherit; font: inherit; cursor: pointer;
}
.lembrou-cartao:active { background: rgba(241, 233, 220, .08); }
.lembrou-cartao .icone-caixa { width: 34px; height: 34px; border-radius: 10px; color: var(--brasa); background: var(--brasa-fundo); }
.lembrou-cartao .icone-caixa svg { width: 18px; height: 18px; }
.lembrou-txt { display: grid; gap: 0; min-width: 0; }
.lembrou-txt b { font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lembrou-txt span { font-size: 12.5px; line-height: 1.25; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lembrou-txt em { font-style: normal; font-size: 12.5px; font-weight: 600; line-height: 1.25; color: var(--areia); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lembrou-cartao > svg { width: 16px; height: 16px; color: var(--texto-3); }

/* A escola no cartão do ponto (Calendário, Comunicados, Suas anotações): cada item com a fonte */
.arquivos-escola .arquivo { align-items: start; padding-top: 8px; padding-bottom: 8px; }
.arquivos-escola div.arquivo { cursor: default; }
.arquivos-escola .arquivo > span:last-child { display: grid; gap: 2px; min-width: 0; }
.arquivo-fonte { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 4px; font-size: 12px; line-height: 1.35; color: var(--texto-3); }
.arquivo-fonte .origem-selo { padding: 3px 6px; font-size: 9.5px; }
.arquivo-aviso { border-color: var(--brasa-borda); }
.arquivo-aviso .icone-caixa { color: var(--brasa); background: var(--brasa-fundo); }

/* A folha do comunicado */
.comunicado-titulo { font: 600 24px/1.15 var(--f-titulo); letter-spacing: -0.03em; }
.comunicado-quando { margin-top: -8px; font-size: 13.5px; color: var(--texto-2); }
.comunicado-texto { font-size: 15.5px; line-height: 1.55; color: var(--texto); }

/* O Chat: "Pergunte ao Ducor" e os 2 botões rápidos embaixo da última explicação */
.chat-rotulo { margin-top: 2px; }
.chat-cabeca .chat-rotulo + .titulo-grande { margin-top: 2px; }
.chat-rapidos { display: flex; flex-wrap: wrap; gap: 8px; justify-self: start; margin-top: -2px; }
.chat-rapido {
  min-height: 40px; padding: 8px 14px; border: 1px solid var(--brasa-borda); border-radius: 999px; background: var(--brasa-fundo);
  font: 600 14px/1.2 var(--f-texto); color: var(--linho); cursor: pointer;
}
.chat-rapido:active { filter: brightness(1.12); }
@media (prefers-reduced-motion: reduce) { .lembrou-cartao, .chat-rapido { transition: none; } }

/* ==========================================================================
   29/10 (para a reunião com o Sigma): o sino (a central de notificações) no topo do Cérebro, o selo de pontos ao lado da
   saudação e a folha "Seus pontos" (os pontos saíram dos Grupos). E a linha dos Grupos que leva a eles.
   ========================================================================== */
/* O sino, à esquerda da foto do perfil: alvo de 44 px; a bolinha de brasa com o número de não lidas (até "9+") */
.sino { position: relative; margin-right: -4px; color: var(--linho); }
.selo-prototipo + .sino { margin-left: 2px; }
.sino svg { width: 23px; height: 23px; }
.sino[aria-expanded="true"] { background: rgba(241, 233, 220, .08); }
.sino-bolinha {
  position: absolute; top: 4px; right: 3px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: var(--brasa); color: var(--ebano); font: 700 10.5px/1 var(--f-texto); box-shadow: 0 0 0 2px var(--fundo);
}
.sino-bolinha[hidden] { display: none; }
@media (max-width: 420px) { /* no celular, o selo "Protótipo · exemplo" aperta um pouco para o sino caber */
  .tela-cerebro .topo { gap: 8px; }
  .tela-cerebro .selo-prototipo { letter-spacing: .1em; padding: 6px 8px; }
}

/* O selo de pontos, na linha da saudação (sem espaço novo): a pílula de 28 px dentro de um alvo de 44 px */
.inicio-txt { flex: 1; min-width: 0; }
.saudacao-linha { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.saudacao-linha .saudacao { margin-bottom: 0; min-width: 0; }
.pontos-selo {
  pointer-events: auto; flex: none; display: inline-flex; align-items: center; min-height: 44px; margin: -9px 0; padding: 0;
  border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
}
.pontos-selo[hidden] { display: none; }
.pontos-pilula {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 9px; border: 1px solid var(--brasa-borda); border-radius: 999px;
  background: rgba(31, 22, 15, .78); font: 500 12.5px/1 var(--f-texto); color: var(--texto-2); white-space: nowrap;
}
.pontos-pilula svg { width: 14px; height: 14px; flex: none; color: var(--brasa); }
.pontos-pilula b { font: 600 14px/1 var(--f-texto); color: var(--texto); }
.pontos-selo:active .pontos-pilula { background: var(--brasa-fundo); }
@media (max-width: 420px) { .pontos-na-semana { display: none; } }

/* A folha "Seus pontos" */
.pontos-corpo { display: grid; gap: 14px; }
.pontos-numero { font-size: 15px; color: var(--texto-2); }
.pontos-numero b { margin-right: 4px; font: 600 42px/1 var(--f-titulo); letter-spacing: -0.03em; color: var(--texto); }
.pontos-compara { margin-top: 8px; font-size: 14px; color: var(--texto-2); }
.pontos-compara .num { font-weight: 600; color: var(--texto); }
/* lote 8 (03/11, D19): os dias com estudo da semana, na folha Seus pontos */
.pontos-dias-estudo { margin-top: 8px; font-size: 14px; color: var(--texto-2); }
.pontos-dias-estudo .num { font-weight: 600; color: var(--texto); }
.pontos-dif { margin-left: 6px; padding: 3px 8px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--texto); background: rgba(241, 233, 220, .08); }
.pontos-dif.sobe { color: var(--brasa); background: var(--brasa-fundo); }
.pontos-quando { margin-top: 4px; font-size: 12.5px; color: var(--texto-3); }
.pontos-dias { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; height: 150px; padding-top: 20px; }
.pontos-teto { position: absolute; left: 0; right: 0; top: 20px; border-top: 1px dashed rgba(241, 233, 220, .3); pointer-events: none; }
.pontos-teto span { position: absolute; right: 0; bottom: 4px; font-size: 11.5px; color: var(--texto-3); white-space: nowrap; }
.pontos-dia { display: grid; grid-template-rows: minmax(0, 1fr) 16px 16px; gap: 3px; min-width: 0; text-align: center; }
.pontos-barra { position: relative; display: block; border-radius: 7px; background: rgba(241, 233, 220, .06); }
.pontos-barra i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 7px; background: linear-gradient(180deg, #F2B184, var(--brasa)); }
.pontos-dia small { order: 2; font-size: 12px; line-height: 16px; color: var(--texto-2); }
.pontos-dia .pontos-barra { order: 1; }
.pontos-nome { order: 3; font-size: 12px; line-height: 16px; color: var(--texto-3); }
.pontos-dia.dia-hoje .pontos-nome { font-weight: 600; color: var(--brasa); }
.pontos-dia.dia-futuro .pontos-barra { background: none; border: 1px dashed rgba(241, 233, 220, .14); }
.pontos-sub { margin-top: 6px; font: 600 18px/1.2 var(--f-titulo); letter-spacing: -0.02em; }
.pontos-como { display: grid; gap: 8px; padding-left: 18px; list-style: disc; font-size: 14.5px; line-height: 1.45; }
.pontos-como li::marker { color: var(--brasa); }
.pontos-conta, .pontos-nota { font-size: 12.5px; line-height: 1.45; color: var(--texto-3); }
.pontos-falta { font-size: 14px; line-height: 1.45; color: var(--texto-2); }
.pontos-ativs { display: grid; gap: 6px; }
.pontos-ativs summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 6px 12px;
  border: 1px solid var(--linha); border-radius: 14px; cursor: pointer; list-style: none;
}
.pontos-ativs summary::-webkit-details-marker { display: none; }
.pontos-ativs summary > span:first-child { display: grid; gap: 2px; min-width: 0; }
.pontos-ativs summary b { font-size: 14px; font-weight: 600; line-height: 1.3; }
.pontos-ativs summary small { font-size: 12px; color: var(--texto-3); }
.pontos-ativs summary .num { flex: none; font: 600 17px/1 var(--f-titulo); color: var(--brasa); }
.pontos-porque { display: grid; gap: 4px; padding: 8px 12px 4px; font-size: 13px; line-height: 1.45; color: var(--texto-2); }
.pontos-ranking { width: 100%; }

/* Nos Grupos: a linha que leva aos pontos, no Cérebro */
.g-pontos-cerebro { margin-top: 16px; }
.g-link {
  display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; padding: 0 2px; border: 0; background: none;
  font: inherit; font-weight: 600; color: var(--brasa); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* O painel do sino: no celular, uma folha que sobe; no computador, preso embaixo do sino, com 360 px */
.folha-avisos { gap: 10px; }
.folha-avisos .folha-cabeca { gap: 4px; }
.folha-avisos .folha-cabeca .rotulo { margin-right: auto; }
.avisos-ler { min-height: 44px; padding: 0 8px; font-size: 13.5px; color: var(--brasa); }
.avisos-ler:disabled { color: var(--texto-3); }
.avisos-grupo { margin: 4px 0 6px; font: 500 11px/1.2 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--rotulo); }
.avisos-ul { display: grid; gap: 6px; }
.aviso-item {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) 10px; align-items: start; gap: 12px; width: 100%; min-height: 56px; padding: 10px 12px 10px 10px;
  border: 1px solid var(--linha); border-radius: 16px; background: rgba(241, 233, 220, .03); text-align: left; color: inherit; font: inherit; cursor: pointer;
}
.aviso-item.nova { border-color: var(--brasa-borda); background: rgba(224, 122, 63, .06); }
.aviso-item:active { background: rgba(241, 233, 220, .08); }
.aviso-item .icone-caixa { width: 36px; height: 36px; border-radius: 11px; color: var(--couro); background: rgba(169, 128, 89, .13); }
.aviso-item.nova .icone-caixa { color: var(--brasa); background: var(--brasa-fundo); }
.aviso-item .icone-caixa svg { width: 18px; height: 18px; }
.aviso-txt { display: grid; gap: 2px; min-width: 0; }
.aviso-txt b { font-size: 14.5px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.aviso-txt span { font-size: 13.5px; line-height: 1.4; color: var(--texto-2); overflow-wrap: anywhere; }
.aviso-txt small { font-size: 12px; color: var(--texto-3); }
.aviso-ponto { width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--brasa); box-shadow: 0 0 8px var(--brasa-brilho); }
.avisos-vazio { display: grid; grid-template-columns: 20px 1fr; gap: 10px; padding: 14px; border: 1px dashed rgba(169, 128, 89, .45); border-radius: 16px; font-size: 14px; line-height: 1.45; color: var(--texto-2); }
.avisos-vazio svg { width: 18px; height: 18px; margin-top: 1px; color: var(--couro); }
.avisos-pe { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--linha); font-size: 12.5px; line-height: 1.4; color: var(--texto-3); }
.avisos-pe svg { width: 16px; height: 16px; flex: none; }
/* 29/10: o aviso no celular, com o app fechado (ligar neste aparelho, o teste e o desligar) */
.avisos-pe { align-items: flex-start; }
.avisos-pe svg { margin-top: 1px; }
.avisos-pe-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.avisos-pe-txt b { color: var(--texto-2); font-weight: 600; }
.avisos-pe .botao-texto { width: auto; min-height: 36px; padding: 0; color: var(--brasa); font-size: 13.5px; }
.avisos-pe-botoes { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.avisos-pe-msg { color: var(--texto-2); font-size: 12.5px; }
@media (min-width: 900px) {
  .folha.folha-avisos {
    top: var(--av-topo, 64px); right: var(--av-direita, 16px); left: auto; bottom: auto; width: 360px; max-width: calc(100vw - 24px);
    max-height: min(600px, calc(100vh - var(--av-topo, 64px) - 24px)); margin: 0; padding: 10px 16px 14px;
    border: 1px solid rgba(241, 233, 220, .16); border-radius: 20px; box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
    transform: translateY(-6px); opacity: 0; transition: transform .2s ease, opacity .2s ease, visibility 0s linear .2s;
  }
  .folha.folha-avisos.aberta { transform: none; opacity: 1; transition: transform .2s ease, opacity .2s ease, visibility 0s; }
  .folha-fundo.leve { background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .folha.folha-avisos, .folha.folha-avisos.aberta { transition: none; } }

/* 30/10: o "Achei um erro nesta tela", no fim das telas que não têm um próprio (a sessão, o Chat e o mini chat já têm). */
.erro-tela { display: grid; gap: 6px; margin: 28px 0 8px; padding-top: 14px; border-top: 1px solid var(--linha, rgba(255,255,255,.08)); }
.erro-tela[hidden] { display: none; }
.erro-tela-link { justify-self: start; min-height: 44px; padding: 6px 2px; border: 0; background: none; font-family: var(--f-texto); font-size: 14px; color: var(--texto-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.erro-tela-dica { margin: 0; font-size: 13px; line-height: 1.35; color: var(--texto-2); }
.erro-tela-falhou { color: var(--brasa, #e8743b); }
@media print { .erro-tela { display: none !important; } }
/* 30/10: as datas oficiais do caminho (PAS, vestibular da UnB, ENEM) no Calendário do Cérebro */
.origem-selo.oficial { color: var(--linho); background: rgba(120, 160, 200, .12); border: 1px solid rgba(120, 160, 200, .38); }

/* ---------- 30/10: a rotina fixa, a troca Lista/Semana e a grade da semana (o filme: "Sua semana") ---------- */
.fixos-botao { margin-top: 10px; }
.fixos-botao .icone-caixa { color: var(--brasa); background: var(--brasa-fundo); border-color: var(--brasa-borda); }
.rotina-vista { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 16px; padding: 4px; border: 1px solid var(--linha); border-radius: 14px; background: var(--cartao); }
.rotina-vista-opcao { min-height: 40px; border: 0; border-radius: 10px; background: none; font: 600 14px/1 var(--f-texto); color: var(--texto-2); cursor: pointer; }
.rotina-vista-opcao[aria-selected="true"] { background: rgba(241, 233, 220, .1); color: var(--linho); }
.rotina-refeito { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 13.5px; color: var(--linho); }
.rotina-refeito[hidden] { display: none; }
.rotina-refeito.chegou { animation: estoura .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.dia-fixos { display: grid; gap: 6px; padding: 10px 0 2px; }
.dia-fixos[hidden] { display: none; }
.dia-fixo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--brasa-borda); border-radius: 12px; background: var(--brasa-fundo); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.dia-fixo b { font-size: 14px; font-weight: 600; color: var(--brasa); }
.dia-fixo span { font-size: 12.5px; color: var(--texto-2); }
.grade-semana { margin-top: 18px; }
.grade-semana[hidden], .dias[hidden] { display: none; }
.grade-topo .secao-titulo { margin: 0; }
.grade-sub { margin: 4px 0 12px; font-size: 13.5px; color: var(--texto-2); }
.grade-quadro { --gutter: 34px; padding: 8px 8px 10px; border: 1px solid var(--linha); border-radius: 20px; background: var(--cartao); }
.grade-cab { display: grid; grid-template-columns: var(--gutter) repeat(7, 1fr); margin-bottom: 6px; }
.grade-cab::before { content: ''; }
.grade-dia { display: grid; justify-items: center; gap: 2px; padding: 4px 0 6px; border-bottom: 1px solid var(--linha); font-size: 12px; color: var(--texto-2); }
.grade-dia b { font-size: 12.5px; font-weight: 600; color: var(--linho); }
.grade-dia small { font-size: 11px; }
.grade-dia.grade-hoje b { color: var(--brasa); }
.grade-prova { min-height: 22px; padding: 2px 5px; border: 1px solid var(--brasa-borda); border-radius: 999px; background: var(--brasa-fundo); font: 600 9.5px/1 var(--f-texto); letter-spacing: .04em; text-transform: uppercase; color: var(--brasa); cursor: pointer; }
.grade-corpo { position: relative; margin-left: var(--gutter); }
.grade-hora { position: absolute; left: calc(-1 * var(--gutter)); right: 0; height: 0; border-top: 1px dashed rgba(241, 233, 220, .07); }
.grade-hora span { position: absolute; left: 0; top: -7px; font-size: 10.5px; color: var(--texto-3); }
.grade-bloco { position: absolute; left: calc(var(--col) * (100% / 7) + 2px); width: calc(100% / 7 - 4px); overflow: hidden; margin: 0; padding: 0; border-radius: 8px; border: 1px solid transparent; font: 600 10.5px/1.15 var(--f-texto); }
.grade-bloco > button { display: flex; align-items: flex-start; justify-content: center; width: 100%; height: 100%; padding: 3px 2px; border: 0; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; }
button.grade-bloco { display: flex; align-items: flex-start; justify-content: center; padding: 3px 2px; text-align: center; cursor: pointer; }
.grade-bloco span { overflow: hidden; overflow-wrap: anywhere; }
.grade-bloco.estudo { background: rgba(205, 189, 166, .16); border-color: rgba(205, 189, 166, .34); color: var(--linho); }
.grade-bloco.vida { background: rgba(140, 170, 120, .16); border-color: rgba(140, 170, 120, .36); color: #D6E3CB; }
.grade-bloco.fixo { background: var(--brasa-fundo); border-color: var(--brasa-borda); color: var(--brasa); }
.grade-bloco.feita { opacity: .45; }
.grade-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 10px 2px 0; font-size: 12px; color: var(--texto-2); }
.leg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.leg.estudo { background: rgba(205, 189, 166, .45); }
.leg.vida { background: rgba(140, 170, 120, .5); }
.leg.fixo { background: var(--brasa); }
.folha-texto { margin: -4px 0 0; font-size: 14px; line-height: 1.45; color: var(--texto-2); }
.fixos-lista { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fixos-lista[hidden] { display: none; }
.fixo-item { display: grid; gap: 2px; width: 100%; min-height: 48px; padding: 8px 12px; border: 1px solid var(--brasa-borda); border-radius: 12px; background: var(--brasa-fundo); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.fixo-item.atual { border-color: var(--brasa); }
.fixo-item b { font-size: 14.5px; color: var(--brasa); }
.fixo-item span { font-size: 12.5px; color: var(--texto-2); }
.fixo-form { display: grid; gap: 14px; padding-top: 6px; border-top: 1px solid var(--linha); }
.fixo-form-cabeca { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.fixo-form-cabeca .botao-texto { gap: 6px; padding: 0 6px; }
.fixo-sugestoes { display: flex; flex-wrap: wrap; gap: 6px; }
.fixo-sugestoes[hidden] { display: none; }
.folha-linha-2 { grid-template-columns: 1fr 1fr; }
@media (prefers-reduced-motion: reduce) { .rotina-refeito.chegou { animation: none; } }

/* ---------- 30/10: as notas e a meta por matéria ---------- */
.objetivo-notas { display: grid; gap: 6px; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.objetivo-notas .titulo-tela { margin-top: 4px; font-size: 22px; }
.objetivo-notas .subtitulo { margin-top: 2px; font-size: 13.5px; }
.objetivo-notas .objetivo-ver { margin-top: 8px; }
.notas-risco { display: grid; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.notas-risco li { display: grid; gap: 1px; }
.notas-risco b { font-size: 14.5px; }
.notas-risco span { font-size: 13px; line-height: 1.35; color: var(--texto-2); }
.opcoes-coluna { display: grid; gap: 6px; }
.opcoes-coluna .opcao { justify-content: flex-start; text-align: left; }
.notas-tabela { display: grid; gap: 2px; }
.nota-cab, .nota-linha { display: grid; grid-template-columns: minmax(70px, 1fr) repeat(5, 46px); gap: 4px; align-items: center; }
.nota-cab span { font-size: 11.5px; font-weight: 600; text-align: center; color: var(--texto-2); }
.nota-linha { padding: 8px 0; border-top: 1px solid var(--linha); }
.nota-nome { font-size: 13.5px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.nota-campo { height: 44px; padding: 0 4px; text-align: center; font-size: 15px; }
.nota-campo[aria-invalid="true"] { border-color: var(--brasa); }
.nota-meta { border-style: dashed; }
.nota-txt { grid-column: 1 / -1; margin: 2px 0 0; font-size: 12.5px; line-height: 1.35; color: var(--texto-2); }
.notas-exemplo[hidden] { display: none; }

/* ---------- 30/10 (item 4): o "Achei um erro" nas partes do Cérebro ---------- */
.erro-parte { margin: 10px 0 0; padding: 0; border: 0; }
.erro-parte .erro-tela-link { font-size: 12.5px; }
.cerebro-cartao .erro-parte, .hoje .erro-parte { margin-top: 8px; }
.folha-avisos .erro-parte { margin: 4px 0 10px; text-align: center; }

/* ---------- 30/10 (item 5): a conta criada pela escola, no Perfil ---------- */
.formulario-curto { display: grid; gap: 12px; margin-top: 14px; max-width: 440px; }
.formulario-curto .botao { justify-self: start; }

/* 31/10 (lote 1, E7): o aviso da matéria mais atrás no boletim (só na sessão de estudo e na tarefa dela, sem pontos)
   e o período ainda aberto na folha das notas (lido do boletim do Atlas). */
.aviso-boletim { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--cartao); border-left: 3px solid var(--brasa); font-size: 14px; line-height: 1.4; color: var(--texto); }
.aviso-boletim[hidden] { display: none; }
.nota-campo.nota-aberta { border-style: dashed; }
.notas-lidas { padding: 10px 12px; border-radius: 12px; background: var(--cartao); border-left: 3px solid var(--brasa); }
.notas-lidas[hidden] { display: none; }
/* 31/10 (lote 2, D11): a diferença do Retake numa linha à parte, embaixo dos períodos */
.nota-retake { grid-column: 1 / -1; margin: 2px 0 0; font-size: 12.5px; font-weight: 600; color: var(--texto); }

/* 03/11 (lote 7b): a entrada única. Os cartões de quem está entrando (Aluno, Professor, Coordenação, Direção), como no
   protótipo de gestão do Felipe, e o selo da conta de demonstração (demo.aluno). */
.papeis { display: grid; gap: 10px; }
.papel-cartao {
  display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 12px 14px;
  border: 1px solid var(--linha); border-radius: 18px; background: var(--cartao);
  text-align: left; color: var(--texto); font: inherit; cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.papel-cartao:hover { border-color: rgba(224, 122, 63, .5); }
.papel-cartao:active { transform: scale(.99); background: rgba(241, 233, 220, .06); }
.papel-cartao .icone-caixa { width: 42px; height: 42px; flex: none; border-radius: 13px; color: var(--brasa); background: var(--brasa-fundo); }
.papel-cartao .icone-caixa svg { width: 21px; height: 21px; }
.papel-txt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.papel-txt b { font-size: 16px; font-weight: 600; line-height: 1.2; }
.papel-txt span { font-size: 13px; line-height: 1.35; color: var(--texto-2); }
.papel-seta { width: 18px; height: 18px; flex: none; color: var(--texto-3); }
.papel-escolhido { margin-bottom: 4px; }
.link-erro { display: inline; padding: 0; border: 0; background: none; color: var(--brasa); font: inherit; text-decoration: underline; cursor: pointer; }
.modo-demo .selo-prototipo::after { content: " · demonstração"; }