/* Plataforma HORMONIA. Paleta do DESIGN.md: ameixa como palco, dourado só como metal (CTA, linha fina), marfim para respirar.
   Nova experiência (parte 1): cantos mais redondos, botões em pílula e cinco abas, como no protótipo aprovado. */
:root {
  --marfim: #faf5ec;
  --marfim-2: #f3ebdd;
  --branco: #fffdf9;
  --linha: #e6dccb;
  --linha-forte: #d4c5ad;
  --tinta: #221426;
  --tinta-2: #5e5063;
  --tinta-3: #6f6474; /* era #8c8190 (3,4:1); agora 5,2:1 sobre o marfim */
  --ameixa: #2a1330;
  --ameixa-2: #3a1d44;
  --ameixa-3: #190b1d;
  --dourado: #c79a4a;
  --dourado-claro: #e7cd8a;
  --enfase: #2a1330; /* ameixa como texto ou contorno sobre o fundo claro; na noite, dourado claro */
  --dourado-escuro: #7a5a1e; /* texto pequeno em dourado sobre o marfim, com contraste para ler */
  --verde: #2f7a53;
  --verde-suave: #e2f1e8;
  --vermelho: #b3261e;
  --vermelho-suave: #fbe4e2;
  --amarelo: #8a6100;
  --amarelo-suave: #fbf0cf;
  --raio: 16px;
  --raio-pequeno: 10px;
  --fonte: 'Jost', system-ui, sans-serif;
  --fonte-titulo: 'Plus Jakarta Sans', system-ui, sans-serif;
  --seguro-baixo: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--marfim); color: var(--tinta); font: 17px/1.55 var(--fonte); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 600; line-height: 1.25; margin: 0 0 .4em; }
h1 { font-size: 1.55rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.02rem; }
p { margin: 0 0 .8em; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }
.oculto { display: none !important; }
.fraco { color: var(--tinta-2); }
.pequeno { font-size: .94rem; }

/* ---------- Topo e navegação ---------- */
.topo { background: var(--ameixa); color: var(--marfim); padding: calc(10px + env(safe-area-inset-top, 0px)) 18px 12px; position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; }
.topo .marca { font-family: var(--fonte-titulo); font-weight: 700; letter-spacing: .16em; font-size: .95rem; text-decoration: none; color: var(--dourado-claro); }
.topo .voltar { background: none; border: 0; color: var(--marfim); font-size: 1.5rem; line-height: 1; padding: 0 6px 2px 0; cursor: pointer; text-decoration: none; }
.topo .titulo-topo { font-size: .95rem; opacity: .9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo .direita { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.topo .link-painel { font-size: .9rem; color: var(--dourado-claro); text-decoration: none; border: 1px solid rgba(231, 205, 138, .4); border-radius: 99px; padding: 3px 10px; }
.avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; font-family: var(--fonte-titulo); font-weight: 700; font-size: .85rem; color: var(--enfase); letter-spacing: .02em; }
.avatar-topo { display: block; border-radius: 50%; text-decoration: none; }
.avatar.com-foto { overflow: hidden; background: var(--marfim-2); }
.avatar.com-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-aluna { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 10px; }
.avatar-topo .avatar { width: 34px; height: 34px; font-size: .78rem; box-shadow: 0 0 0 2px rgba(231, 205, 138, .35); }

.conteudo { max-width: 760px; margin: 0 auto; padding: 22px 18px calc(96px + var(--seguro-baixo)); }

.abas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--branco); border-top: 1px solid var(--linha); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding-bottom: var(--seguro-baixo); }
.abas a { text-align: center; padding: 9px 2px 8px; text-decoration: none; color: #6e6272; font-size: .8rem; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.abas a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abas a svg { width: 23px; height: 23px; }
.abas a.ativo { color: var(--enfase); font-weight: 600; box-shadow: inset 0 3px 0 var(--dourado); }

/* ---------- Cartões (base; as variações vêm depois) ---------- */
.cartao { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px 18px; margin-bottom: 14px; }
.cartao h2 { font-size: 1.05rem; }

/* ---------- Biblioteca ---------- */
.cabecalho { margin-bottom: 18px; }
.sobre { font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dourado-escuro); font-weight: 600; margin-bottom: 4px; }
.programa { margin-bottom: 28px; }
.modulos { display: grid; gap: 10px; }
.modulo-card { display: flex; align-items: center; gap: 14px; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; text-decoration: none; }
.modulo-card:active { background: var(--marfim-2); }
.modulo-card .nome { font-weight: 500; line-height: 1.3; }
.modulo-card .info { font-size: .93rem; color: var(--tinta-2); }
.modulo-card .seta { margin-left: auto; color: var(--tinta-3); font-size: 1.3rem; }
.anel { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--dourado); display: grid; place-items: center; font-family: var(--fonte-titulo); font-weight: 600; font-size: .93rem; color: var(--enfase); }
.trancado { opacity: .62; }

.aviso { background: var(--branco); border: 1px solid var(--linha); border-left: 3px solid var(--dourado); border-radius: var(--raio-pequeno); padding: 14px 16px; margin-bottom: 18px; }
.aviso.erro { border-left-color: var(--vermelho); }
.aviso.ok { border-left-color: var(--verde); }
.sintoma-chave { margin: 12px 0 0; padding: 10px 14px; background: var(--branco); border-left: 3px solid var(--dourado); border-radius: var(--raio-pequeno); }
.sintoma-chave span { display: block; margin-bottom: 2px; }

/* ---------- Início e Jornada ---------- */
.barra { height: 6px; background: var(--marfim-2); border-radius: 99px; overflow: hidden; margin: 12px 0 8px; }
.barra span { display: block; height: 100%; min-width: 6px; background: var(--dourado); border-radius: 99px; }
.subtitulo { font-family: var(--fonte-titulo); color: var(--tinta-2); margin-top: -.2em; }
.linha { display: block; }
.oculto-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cartao.destaque { background: var(--ameixa); color: var(--marfim); border-color: var(--ameixa); padding: 18px 18px 20px; }
.cartao.destaque .sobre { color: var(--dourado-claro); }
.cartao.destaque h2 { font-size: 1.25rem; margin-top: 4px; }
.cartao.destaque .fraco { color: rgba(250, 245, 236, .72); }
.cartao.destaque a:not(.botao) { color: var(--dourado-claro); }
.cartao.destaque .botao.secundario { color: var(--marfim); border-color: rgba(231, 205, 138, .45); }
.cartao.destaque .botao.secundario:hover { background: rgba(255, 255, 255, .07); }
.cartao.destaque .botao.feito { background: transparent; border: 1px solid var(--dourado-claro); color: var(--dourado-claro); }
.semana { list-style: none; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 0; margin: 8px 0 10px; text-align: center; }
.semana .letra { display: block; font-size: .86rem; color: var(--tinta-3); margin-bottom: 4px; }
.semana .ponto { display: inline-block; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--linha-forte); background: var(--branco); }
.semana .feito .ponto { background: var(--dourado); border-color: var(--dourado); }
.semana .hoje .letra { color: var(--enfase); font-weight: 600; }
.semana .hoje .ponto { border-color: var(--enfase); box-shadow: 0 0 0 3px var(--marfim-2); }
.semana .futuro .ponto { border-style: dashed; opacity: .55; }
a.cartao { display: flex; align-items: center; gap: 14px; text-decoration: none; }
a.cartao:active { background: var(--marfim-2); }
.previa { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: .94rem; }
.previa input { width: 72px; padding: 5px 8px; border: 1px solid var(--linha-forte); border-radius: 6px; background: var(--branco); }
.previa .fraco { flex-basis: 100%; }
.calendario { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-top: 10px; }
.mes h3 { font-size: .94rem; color: var(--tinta-2); }
.mes .grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mes .grade span { height: 30px; border-radius: 6px; background: var(--marfim-2); font-size: .72rem; display: grid; place-items: center; color: var(--tinta-3); }
.mes .grade .cab { background: none; font-weight: 600; height: auto; padding-bottom: 2px; }
.mes .grade .vazio { background: none; }
.mes .grade .feito { background: var(--dourado); color: var(--ameixa-3); font-weight: 600; }
.mes .grade .hoje { box-shadow: inset 0 0 0 1.5px var(--enfase); color: var(--enfase); }
.mes .grade .futuro { opacity: .4; }

/* Início */
.titulo-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.titulo-linha h2 { margin-bottom: 6px; }
.titulo-linha a { font-weight: 600; text-decoration: none; color: var(--enfase); white-space: nowrap; }
.atalhos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 0 -4px 20px; }
.atalho { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; font-size: .84rem; line-height: 1.2; text-align: center; color: var(--tinta); }
.atalho .bola { position: relative; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--branco); border: 2px solid var(--dourado); color: var(--enfase); }
.atalho .bola svg { width: 24px; height: 24px; }
.atalho:active .bola { background: var(--marfim-2); }
.atalho .feito { position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; border-radius: 50%; background: var(--verde); color: #fff; display: grid; place-items: center; border: 2px solid var(--marfim); }
.atalho .feito svg { width: 13px; height: 13px; }
.proxima-aula { background: var(--ameixa); color: var(--marfim); border-color: var(--ameixa); border-radius: 18px; padding: 18px; }
.proxima-aula .sobre { color: var(--dourado-claro); }
.proxima-aula h2 { color: var(--branco); font-size: 1.22rem; margin: 6px 0 2px; }
.proxima-aula .meta { margin: 0 0 12px; font-size: .94rem; color: #d9cbd9; }
.proxima-aula a:not(.botao) { color: var(--dourado-claro); }
.proxima-aula .barra { background: #4a2c55; margin: 0 0 14px; }
.proxima-aula .barra span { background: var(--dourado-claro); }
.proxima-aula .botao { width: 100%; background: var(--dourado-claro); }
#dia-rapido .escala:first-of-type { border-top: 0; }
#dia-rapido .botao { margin-top: 10px; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.tile { display: flex; flex-direction: column; gap: 6px; border-radius: var(--raio); border: 1px solid; padding: 14px; }
.tile h2 { font-size: 1rem; line-height: 1.3; margin: 0 0 4px; }
.tile .sobre { margin: 0; }
.tile .botao { margin-top: auto; min-height: 42px; padding: 0 10px; font-size: .94rem; }
.tile.anamnese { background: #fbf0dc; border-color: #ecd9b0; }
.tile.emocoes { background: #f3e9f4; border-color: #e2cfe5; }
.tile.emocoes .sobre { color: #5b2a63; }
.secao-carrossel { margin: 18px 0 14px; }
.carrossel { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -18px; padding: 2px 18px 8px; scroll-padding-inline: 18px; scrollbar-width: none; }
.carrossel::-webkit-scrollbar { display: none; }
.material { flex: none; width: 138px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; text-decoration: none; background: var(--branco); border: 1px solid var(--linha); border-radius: 14px; padding: 12px; min-height: 132px; }
.material .icone-material { width: 40px; height: 40px; border-radius: 12px; background: #fbf0dc; color: var(--dourado-escuro); display: grid; place-items: center; }
.material .icone-material svg { width: 22px; height: 22px; }
.material .nome { font-size: .94rem; font-weight: 500; line-height: 1.3; }
.material:active { background: var(--marfim-2); }

/* Jornada */
.segmentos { display: flex; gap: 6px; margin: 12px 0 4px; }
.segmento { flex: 1; height: 8px; border-radius: 8px; background: var(--linha); overflow: hidden; }
.segmento span { display: block; height: 100%; background: var(--dourado); }
.segmentos-nomes { display: flex; justify-content: space-between; font-size: .84rem; color: var(--tinta-2); }
.segmentos-nomes span { flex: 1; text-align: center; }
.segmentos-nomes span:first-child { text-align: left; }
.segmentos-nomes span:last-child { text-align: right; }
.trilha-aulas { padding: 14px 12px; }
.trilha-aulas .titulo-linha { padding: 0 4px; }
.trilha-aulas > .fraco { margin: 0 4px 8px; }
.instrucoes-link { display: block; margin: 2px 4px 8px; color: var(--amarelo); font-weight: 500; text-decoration: none; font-size: .94rem; }
.lista-aulas { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lista-aulas.solta { gap: 6px; }
.lista-aulas.solta .aula { background: var(--branco); border: 1px solid var(--linha); }
.aula { width: 100%; display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; min-height: 58px; text-decoration: none; color: inherit; background: none; border: 0; text-align: left; font: inherit; cursor: pointer; }
.aula:active { background: var(--marfim-2); }
.aula .num { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: .94rem; background: var(--marfim-2); color: var(--tinta-2); }
.aula .num svg { width: 17px; height: 17px; }
.aula .texto { flex: 1; min-width: 0; line-height: 1.3; }
.aula .nome { display: block; font-weight: 500; }
.aula .meta { display: block; font-size: .88rem; color: var(--tinta-3); margin-top: 1px; }
.aula.feita .num { background: var(--verde-suave); color: var(--verde); }
.aula.atual, .lista-aulas.solta .aula.atual { background: var(--ameixa); color: var(--branco); border-color: var(--ameixa); margin: 4px 0; }
.aula.atual .num { background: var(--dourado-claro); color: var(--ameixa); }
.aula.atual .meta { color: #d9cbd9; }
.aula.trancada { color: #6e6272; }
.aula.trancada .num { background: var(--marfim-2); color: #6e6272; }
.aula .acao { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 99px; background: var(--dourado-claro); color: var(--ameixa); font-weight: 600; font-size: .94rem; }
.aula .acao svg { width: 14px; height: 14px; }
.linha-modulo .anel svg { width: 18px; height: 18px; }
.linha-modulo.fechado { background: transparent; border-style: dashed; }
.linha-modulo.fechado .anel { border-color: var(--linha-forte); color: #6e6272; }
.linha-modulo .seta, a.cartao .seta { margin-left: auto; color: var(--tinta-3); font-size: 1.3rem; }

/* Biblioteca */
.busca { display: flex; align-items: center; gap: 8px; background: var(--branco); border: 1.5px solid var(--linha-forte); border-radius: 99px; padding: 0 16px; margin-bottom: 16px; color: var(--tinta-3); }
.busca svg { width: 20px; height: 20px; flex: none; }
.busca input { flex: 1; min-width: 0; border: 0; background: none; padding: 12px 0; font-size: 1rem; color: var(--tinta); }
.busca input::-webkit-search-cancel-button { filter: grayscale(1); opacity: .5; }
.busca input:focus { outline: none; }
.busca:focus-within { border-color: var(--enfase); }
.registro-aviso { background: var(--verde-suave); border-color: #c4e2cf; color: #1d5c3c; }
.registro-aviso .sobre { color: #1d5c3c; }
.registro-aviso .anel { border-color: var(--verde); color: var(--verde); }
.registro-aviso .anel svg, a.cartao .anel svg { width: 20px; height: 20px; }
.titulo-secao { font-size: 1.05rem; margin: 22px 0 10px; }
.temas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tema { display: flex; flex-direction: column; gap: 6px; text-decoration: none; background: var(--branco); border: 1px solid var(--linha); border-radius: 14px; padding: 12px; min-height: 120px; }
.tema .anel { width: 36px; height: 36px; color: var(--dourado-escuro); }
.tema .anel svg { width: 16px; height: 16px; }
.tema .nome { font-weight: 500; line-height: 1.3; }
.tema .info { font-size: .88rem; color: var(--tinta-3); margin-top: auto; }
.tema:active { background: var(--marfim-2); }

/* Perfil */
.capa-perfil { text-align: center; margin: -22px -18px 12px; }
.capa-perfil .capa { height: 96px; background: radial-gradient(circle at 70% 20%, #4a2656 0, var(--ameixa) 60%, var(--ameixa-3) 100%); }
.capa-perfil .avatar.grande { width: 92px; height: 92px; font-size: 1.8rem; margin-top: -46px; box-shadow: 0 0 0 4px var(--marfim); }
.capa-perfil .trocar-foto { margin-top: 6px; font-size: .93rem; color: var(--tinta-2); }
.capa-perfil h1 { margin: 8px 18px 2px; }
.capa-perfil p { margin: 0 18px; }
.numeros-perfil { list-style: none; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; }
.numeros-perfil li { background: var(--branco); border: 1px solid var(--linha); border-radius: 14px; padding: 10px 4px; }
.numeros-perfil b { display: block; font-family: var(--fonte-titulo); font-size: 1.4rem; color: var(--enfase); line-height: 1.2; }
.numeros-perfil span { font-size: .84rem; color: var(--tinta-2); line-height: 1.2; display: block; }
details.conta h3 { margin-top: 16px; }

/* ---------- Aula ---------- */
.player { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--ameixa-3); border-radius: var(--raio); overflow: hidden; margin-bottom: 18px; }
.player iframe, .player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--ameixa-3); }
.player .vazio { position: absolute; inset: 0; display: grid; place-items: center; color: var(--dourado-claro); text-align: center; padding: 20px; font-size: .95rem; }
.player.fechado { display: grid; place-items: center; color: var(--dourado-claro); background: linear-gradient(135deg, var(--ameixa-3), var(--ameixa)); }
.player.fechado svg { width: 44px; height: 44px; opacity: .85; }
.aula-meta { font-size: .94rem; color: var(--tinta-2); margin-bottom: 16px; }
.pratica { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; margin: 18px 0; }
.pratica .contagem { font-size: .94rem; color: var(--tinta-2); }
.descricao { white-space: pre-wrap; }
.navegacao-aula { display: flex; justify-content: space-between; gap: 10px; margin-top: 26px; }
.navegacao-aula a { flex: 1; text-decoration: none; border: 1px solid var(--linha); border-radius: var(--raio); padding: 10px 12px; font-size: .94rem; background: var(--branco); }
.navegacao-aula a.prox, .navegacao-aula .prox { text-align: right; }
.navegacao-aula .trancada { flex: 1; border: 1px dashed var(--linha-forte); border-radius: var(--raio); padding: 10px 12px; font-size: .94rem; color: var(--tinta-3); }
.navegacao-aula small { display: block; color: var(--tinta-3); }

/* ---------- Botões e formulários ---------- */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; background: var(--dourado); color: var(--ameixa-3); border: 0; border-radius: 99px; padding: 0 22px; font-weight: 600; cursor: pointer; text-decoration: none; font-size: .95rem; line-height: 1.2; text-align: center; }
.botao svg { width: 18px; height: 18px; flex: none; }
.botao:hover { background: var(--dourado-claro); }
.botao:disabled { opacity: .55; cursor: default; }
.botao.secundario { background: transparent; border: 1.5px solid var(--linha-forte); color: var(--tinta); font-weight: 500; }
.botao.escuro { background: var(--ameixa); color: var(--branco); }
.botao.escuro:hover { background: var(--ameixa-2); }
.botao.secundario:hover { background: var(--marfim-2); }
.botao.feito { background: var(--ameixa); color: var(--dourado-claro); }
.botao.perigo { background: transparent; border: 1px solid var(--vermelho); color: var(--vermelho); font-weight: 500; }
.botao.pequeno { min-height: 36px; padding: 0 14px; font-size: .93rem; }
.botao.cheio { width: 100%; }
.link-botao { background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; color: var(--tinta-2); font-size: .94rem; }

.campo { display: block; margin-bottom: 14px; }
.campo > span { display: block; font-size: .93rem; color: var(--tinta-2); margin-bottom: 4px; font-weight: 500; }
.campo input, .campo select, .campo textarea { width: 100%; background: var(--branco); border: 1px solid var(--linha-forte); border-radius: var(--raio-pequeno); padding: 10px 12px; font-size: 1rem; }
.campo textarea { min-height: 110px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--dourado); outline-offset: 1px; border-color: transparent; }
.campo input[type=checkbox] { width: auto; padding: 0; margin: 0 6px 0 0; vertical-align: -2px; accent-color: var(--ameixa); }
.campo small { display: block; color: var(--tinta-3); font-size: .88rem; margin-top: 4px; }
.campo > span small { display: inline; margin: 0; font-weight: 400; }
.campo small.antes { margin: 0 0 8px; }
.linha-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 14px; }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 6px; }

/* ---------- Entrada (login, primeiro acesso) ---------- */
.entrada { min-height: 100vh; background: var(--ameixa); color: var(--marfim); display: grid; place-items: center; padding: 28px 20px; }
.entrada .caixa { width: 100%; max-width: 380px; }
.entrada .marca-grande { font-family: var(--fonte-titulo); font-weight: 700; letter-spacing: .22em; font-size: 1.6rem; color: var(--dourado-claro); text-align: center; margin-bottom: 6px; }
.entrada .sub { text-align: center; opacity: .8; margin-bottom: 28px; font-size: .95rem; }
.entrada .linha-dourada { width: 48px; height: 1px; background: var(--dourado); margin: 0 auto 26px; }
.entrada .campo > span { color: var(--dourado-claro); }
.entrada .campo input { background: rgba(255, 255, 255, .06); border-color: rgba(231, 205, 138, .35); color: var(--marfim); }
.entrada .erro { background: rgba(179, 38, 30, .18); border: 1px solid rgba(251, 228, 226, .3); border-radius: 6px; padding: 10px 12px; margin-bottom: 14px; font-size: .94rem; }
.entrada .ajuda { text-align: center; margin-top: 22px; font-size: .94rem; opacity: .75; }

/* ---------- Conta ---------- */
.instalar ol { margin: .4em 0 0; padding-left: 1.2em; }

/* ---------- Painel ---------- */
.painel .conteudo { max-width: 1040px; }
.painel-abas { display: flex; gap: 4px; overflow-x: auto; background: var(--ameixa-2); padding: 0 12px; position: sticky; top: 52px; z-index: 29; }
.painel-abas a { color: #eadbe3; text-decoration: none; padding: 10px 14px; font-size: .94rem; white-space: nowrap; border-bottom: 2px solid transparent; }
.painel-abas a.ativo { color: #fff; border-bottom-color: var(--dourado); }
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 20px; }
.numero { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; }
.numero b { display: block; font-family: var(--fonte-titulo); font-size: 1.5rem; color: var(--enfase); }
.numero span { font-size: .93rem; color: var(--tinta-2); }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
.filtros input, .filtros select { background: var(--branco); border: 1px solid var(--linha-forte); border-radius: 6px; padding: 8px 10px; }
.filtros input[type=search] { flex: 1; min-width: 180px; }
.tabela { width: 100%; border-collapse: collapse; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; font-size: .94rem; }
.tabela th { text-align: left; font-weight: 500; color: var(--tinta-2); font-size: .88rem; text-transform: uppercase; letter-spacing: .05em; padding: 10px 12px; background: var(--marfim-2); }
.tabela td { padding: 10px 12px; border-top: 1px solid var(--linha); vertical-align: top; }
.tabela tr.clicavel { cursor: pointer; }
.tabela tr.clicavel:hover td { background: var(--marfim); }
.tabela .sub { display: block; font-size: .88rem; color: var(--tinta-3); }
.rolagem { overflow-x: auto; }
.selo { display: inline-block; font-size: .83rem; padding: 1px 8px; border-radius: 99px; background: var(--marfim-2); color: var(--tinta-2); white-space: nowrap; }
.selo.publicada, .selo.ativo { background: var(--verde-suave); color: var(--verde); }
.selo.rascunho { background: var(--amarelo-suave); color: var(--amarelo); }
.selo.arquivada, .selo.inativo { background: var(--vermelho-suave); color: var(--vermelho); }
.lista-ordem { list-style: none; margin: 0 0 14px; padding: 0; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); }
.lista-ordem li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--linha); }
.lista-ordem li:first-child { border-top: 0; }
.lista-ordem .nome { flex: 1; min-width: 0; }
.lista-ordem .nome a { text-decoration: none; }
.lista-ordem button { background: none; border: 1px solid var(--linha); border-radius: 6px; width: 32px; height: 32px; cursor: pointer; color: var(--tinta-2); }
.lista-ordem button:hover { background: var(--marfim-2); }
.caixa-link { background: var(--marfim-2); border: 1px dashed var(--linha-forte); border-radius: 6px; padding: 10px 12px; word-break: break-all; font-size: .94rem; margin: 8px 0 10px; }
.grade-2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 800px) { .grade-2 { grid-template-columns: minmax(0, 1fr); } }

#toast { position: fixed; left: 50%; bottom: calc(84px + var(--seguro-baixo)); transform: translateX(-50%); background: var(--ameixa); color: var(--marfim); padding: 10px 18px; border-radius: 8px; font-size: .94rem; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 60; max-width: calc(100% - 32px); }
#toast.visivel { opacity: 1; }
#toast.erro { background: var(--vermelho); }
.carregando { padding: 40px 0; text-align: center; color: var(--tinta-3); }

/* ---------- Instruções, anamnese, registro e check emocional ---------- */
.cartao.chamada { border-color: var(--dourado); box-shadow: inset 3px 0 0 var(--dourado); }
.cartao.chamada .anel, .anel.feito { background: var(--dourado); border-color: var(--dourado); color: var(--ameixa-3); }
.cartao .nome { font-family: var(--fonte-titulo); font-size: 1.02rem; font-weight: 600; }
a.cartao .sobre, a.cartao .nome { display: block; }
a.cartao .sobre { margin-bottom: 2px; }
details.cartao > summary, details.protocolo > summary { cursor: pointer; font-weight: 600; font-family: var(--fonte-titulo); list-style-position: inside; }
details.cartao[open] > summary { margin-bottom: 10px; }
details.instrucoes .descricao { font-size: .95rem; }
.destaque-texto { color: var(--amarelo); font-weight: 500; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.chip { display: inline-block; font-size: .9rem; padding: 3px 10px; border-radius: 99px; background: var(--marfim-2); color: var(--tinta-2); text-decoration: none; }
.chip.escolha { border: 1px solid var(--linha-forte); background: var(--branco); color: var(--tinta); padding: 7px 14px; font-size: .94rem; cursor: pointer; }
.chip.escolha[aria-pressed="true"] { background: var(--ameixa); border-color: var(--ameixa); color: var(--dourado-claro); }
.chip.n0, .chip.n1 { background: var(--vermelho-suave); color: var(--vermelho); }
.chip.n2 { background: var(--amarelo-suave); color: var(--amarelo); }
.chip.n3, .chip.n4 { background: var(--verde-suave); color: var(--verde); }

.cartao.pilula { border-color: var(--dourado-claro); background: #fffaf0; }
.texto-pilula { font-size: 1rem; line-height: 1.5; margin-bottom: 6px; }
.cuidado { font-size: .9rem; color: var(--amarelo); background: var(--amarelo-suave); border-radius: 6px; padding: 6px 10px; margin: 6px 0 0; }

.termos { padding-left: 1.1em; margin: 0 0 16px; display: grid; gap: 8px; }
.marcar { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; cursor: pointer; }
.marcar input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--ameixa); flex: none; }

/* Anamnese */
.painel-quiz { position: sticky; top: 50px; z-index: 5; background: var(--marfim); padding: 8px 0 2px; margin: 0 0 8px; border-bottom: 1px solid var(--linha); }
.placar { list-style: none; padding: 0; margin: 0 0 6px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.placar a { display: flex; flex-direction: column; align-items: center; text-decoration: none; border: 1px solid var(--linha); border-radius: 8px; background: var(--branco); padding: 4px 0 3px; line-height: 1.2; }
.placar b { font-family: var(--fonte-titulo); font-size: .86rem; color: var(--tinta-3); }
.placar span { font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.05rem; }
.placar .atual a { border-color: var(--ameixa); box-shadow: 0 0 0 1px var(--ameixa); }
.placar .atencao a { background: var(--amarelo-suave); border-color: #e9cf86; }
.placar .atencao span { color: var(--amarelo); }
.placar .destaque a { background: var(--ameixa); border-color: var(--ameixa); }
.placar .destaque span, .placar .destaque b { color: var(--dourado-claro); }
.sintomas { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.sintoma { width: 100%; display: flex; gap: 12px; align-items: flex-start; text-align: left; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px 14px; cursor: pointer; line-height: 1.4; }
.sintoma .caixa { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--linha-forte); margin-top: 1px; display: grid; place-items: center; }
.sintoma[aria-pressed="true"] { border-color: var(--ameixa); background: #f7f0f8; }
.sintoma[aria-pressed="true"] .caixa { background: var(--ameixa); border-color: var(--ameixa); }
.sintoma[aria-pressed="true"] .caixa::after { content: '✓'; color: var(--dourado-claro); font-size: .93rem; font-weight: 700; }
.nivel-parte { font-size: .94rem; min-height: 1.5em; margin: 0 0 4px; }
.selo-nivel { display: inline-block; font-size: .88rem; padding: 1px 9px; border-radius: 99px; }
.selo-nivel.atencao { background: var(--amarelo-suave); color: var(--amarelo); }
.selo-nivel.destaque { background: var(--ameixa); color: var(--dourado-claro); }
.passos { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; position: sticky; bottom: calc(64px + var(--seguro-baixo)); background: var(--marfim); padding: 10px 0; }

/* Resultado */
.cartao.alerta { border-color: var(--vermelho); box-shadow: inset 3px 0 0 var(--vermelho); }
.cartao.alerta h2 { color: var(--vermelho); }
.cartao.alerta ul { margin: 0; padding-left: 1.1em; }
.barras { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 9px; }
.barras li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr) auto; gap: 10px; align-items: center; font-size: .94rem; }
.barras .trilho { height: 10px; background: var(--marfim-2); border-radius: 99px; overflow: hidden; }
.barras .trilho span { display: block; height: 100%; background: var(--linha-forte); border-radius: 99px; }
.barras .atencao .trilho span { background: #e2b53e; }
.barras .destaque .trilho span { background: var(--ameixa); }
.barras .destaque .rotulo { font-weight: 600; }
.barras .conta { font-family: var(--fonte-titulo); font-size: .93rem; color: var(--tinta-2); min-width: 52px; text-align: right; }
.legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.cartao.foco { border-color: var(--enfase); }
.cartao.foco h3 { margin-top: 16px; }
details.protocolo { border-top: 1px solid var(--linha); padding-top: 10px; margin-top: 10px; }
details.protocolo .descricao { font-size: .94rem; margin: 10px 0; }
.pilulas { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.pilulas li { display: grid; gap: 3px; border-left: 2px solid var(--dourado); padding-left: 12px; }
.sintoma-pilula { font-size: .92rem; color: var(--tinta-3); }

/* Registro */
.escala { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--linha); }
.cartao h2 + .escala { border-top: 0; }
.escala .rotulo { font-weight: 500; }
.escala .rotulo small { display: block; font-weight: 400; color: var(--tinta-3); font-size: .88rem; }
.opcoes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.opcoes.duas { grid-template-columns: repeat(2, minmax(0, 110px)); }
.opcoes button { border: 1px solid var(--linha-forte); background: var(--branco); border-radius: 6px; padding: 7px 1px; font-size: clamp(.68rem, 3.1vw, .8rem); line-height: 1.15; cursor: pointer; color: var(--tinta-2); min-height: 40px; }
.opcoes button[aria-pressed="true"] { color: var(--branco); font-weight: 600; border-color: transparent; }
.opcoes button.n0[aria-pressed="true"] { background: #a8423b; }
.opcoes button.n1[aria-pressed="true"] { background: #c7743a; }
.opcoes button.n2[aria-pressed="true"] { background: #b89231; }
.opcoes button.n3[aria-pressed="true"] { background: #6f8f4e; }
.opcoes button.n4[aria-pressed="true"] { background: var(--verde); }
.opcoes.duas button[aria-pressed="true"] { background: var(--ameixa); color: var(--dourado-claro); }
h2.separa { margin-top: 18px; }
.dias { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 6px 0; font-size: .94rem; }
.dias > :last-child { text-align: right; }
.dias a { text-decoration: none; color: var(--tinta-2); }
.salvo { text-align: right; min-height: 1.4em; margin: 0 0 6px; }

/* Evolução */
.tendencias { list-style: none; padding: 0; margin: 4px 0 10px; display: grid; gap: 4px; }
.tendencias .melhor .seta-tend { color: var(--verde); font-weight: 700; }
.tendencias .pior .seta-tend { color: var(--vermelho); font-weight: 700; }
.insight { background: var(--marfim-2); border-radius: 6px; padding: 8px 12px; font-size: .94rem; }
.pontos { border-collapse: separate; border-spacing: 2px; font-size: .78rem; margin: 6px 0; }
.pontos th { font-weight: 500; color: var(--tinta-3); text-align: center; padding: 0; }
.pontos tbody th { text-align: left; color: var(--tinta-2); padding-right: 6px; white-space: nowrap; font-size: .82rem; }
.pontos thead th.praticou { color: var(--dourado); font-weight: 700; }
.pontos td { padding: 0; text-align: center; }
.ponto { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; }
.ponto.vazio { background: transparent; border: 1px dashed var(--linha-forte); }
.ponto.n0 { background: #a8423b; }
.ponto.n1 { background: #d29a72; }
.ponto.n2 { background: #e2cf8f; }
.ponto.n3 { background: #a9c18f; }
.ponto.n4 { background: var(--verde); }
.dourado { color: var(--dourado); }

/* Check emocional */
.cartao.mantra { text-align: center; }
.frase-mantra { font-family: var(--fonte-titulo); font-size: 1.25rem; line-height: 1.4; margin: 8px 0; color: var(--dourado-claro); }
.lista-acoes { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; }
.danca { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 6px 0 0; }
.danca dt { color: var(--tinta-3); font-size: .94rem; }
.danca dd { margin: 0; }
.observar h3 { font-size: .94rem; color: var(--tinta-2); margin: 10px 0 2px; }
.citacao { text-align: center; font-family: var(--fonte-titulo); color: var(--tinta-2); margin-top: 22px; }
.citacao span { display: block; font-size: .88rem; color: var(--tinta-3); }

/* mandala do resultado: cores validadas para pétalas vizinhas (também entre a G e a A, que se tocam) */
.mandala { display: block; width: 100%; max-width: 360px; margin: 4px auto 6px; }
.mandala .A, .legenda-mandala .A, .tempo .A { --cor: #eb6834; }
.mandala .B, .legenda-mandala .B, .tempo .B { --cor: #6250d6; }
.mandala .C, .legenda-mandala .C, .tempo .C { --cor: #e87ba4; }
.mandala .D, .legenda-mandala .D, .tempo .D { --cor: #eda100; }
.mandala .E, .legenda-mandala .E, .tempo .E { --cor: #008300; }
.mandala .F, .legenda-mandala .F, .tempo .F { --cor: #1baf7a; }
.mandala .G, .legenda-mandala .G, .tempo .G { --cor: #2a78d6; }
.mandala .trilha { fill: var(--cor); opacity: .13; stroke: var(--branco); stroke-width: 2; }
.mandala .petala { fill: var(--cor); stroke: var(--branco); stroke-width: 2; stroke-linejoin: round; }
.mandala .sem-nivel .petala { opacity: .5; }
.mandala .limiar { fill: none; stroke: var(--tinta-2); stroke-width: 1.3; stroke-dasharray: 1.5 4; stroke-linecap: round; opacity: .7; }
.mandala .antes { fill: none; stroke: var(--tinta); stroke-width: 2; stroke-dasharray: 5 4; }
.mandala text { font-family: var(--fonte-titulo); font-size: 17px; font-weight: 600; fill: var(--tinta-2); text-anchor: middle; dominant-baseline: central; }
.mandala .destaque text, .mandala .atencao text { fill: var(--tinta); }
.mandala .miolo { fill: var(--branco); stroke: var(--dourado); stroke-width: 2; }
.legenda-mandala { list-style: none; padding: 0; margin: 6px 0 4px; display: grid; gap: 6px; }
.legenda-mandala li { display: grid; grid-template-columns: 14px 1.1em minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: .94rem; }
.legenda-mandala .cor { width: 14px; height: 14px; border-radius: 4px; background: var(--cor); flex: none; }
.legenda-mandala li:not(.atencao):not(.destaque) .cor { opacity: .5; }
.legenda-mandala .letra { font-family: var(--fonte-titulo); }
.legenda-mandala .rotulo .selo-nivel { margin-left: 2px; font-weight: 400; }
.legenda-mandala .destaque .rotulo { font-weight: 600; }
.legenda-mandala .conta { font-family: var(--fonte-titulo); font-size: .93rem; color: var(--tinta-2); }

/* Minha saúde */
a.cartao.minha-saude .mandala, .anamnese-atual .mandala { flex: none; margin: 0; }
a.cartao.minha-saude .mandala { width: 64px; }
.anamnese-atual { display: flex; gap: 14px; align-items: center; margin-bottom: 4px; }
.anamnese-atual .mandala { width: 108px; }
.anamnese-atual p { margin: 0 0 4px; }
a.cartao.minha-saude .mandala text, .anamnese-atual .mandala text { display: none; }
.rolagem-tabela { overflow-x: auto; }
.tempo { border-collapse: separate; border-spacing: 3px; font-size: .85rem; margin: 2px 0 4px; }
.tempo thead th { font-weight: 500; color: var(--tinta-3); font-size: .74rem; text-align: center; padding: 0 2px; white-space: nowrap; }
.tempo tbody th { text-align: left; font-weight: 400; font-size: .84rem; padding-right: 6px; line-height: 1.25; }
.tempo tbody th .parte { display: flex; gap: 6px; align-items: baseline; }
.tempo tbody th .cor { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--cor); }
.tempo td { text-align: center; font-family: var(--fonte-titulo); font-weight: 600; border-radius: 6px; padding: 3px 0; min-width: 44px; background: var(--marfim-2); color: var(--tinta-2); }
.tempo td.atencao { background: var(--amarelo-suave); color: var(--amarelo); }
.tempo td.destaque { background: var(--ameixa); color: var(--dourado-claro); }
.anamnese-atual ~ h3, .resumo h3 { margin: 20px 0 6px; }
.vezes { list-style: none; padding: 0; margin: 4px 0 8px; display: grid; gap: 6px; line-height: 1.35; }
.vezes .fraco { display: block; }
.ficha { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 4px 0 12px; font-size: .94rem; }
.ficha dt { color: var(--tinta-3); }
.ficha dd { margin: 0; white-space: pre-wrap; }
@media (max-width: 480px) { .ficha { grid-template-columns: 1fr; gap: 0; } .ficha dt { font-size: .9rem; } .ficha dd { margin-bottom: 8px; } }
.exames { list-style: none; padding: 0; margin: 4px 0 12px; display: grid; gap: 8px; }
.exames a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 12px; text-decoration: none; color: inherit; border: 1px solid var(--linha); border-radius: var(--raio); padding: 10px 12px; }
.exames a:active { background: var(--marfim-2); }
.exames .data-exame { grid-row: span 2; align-self: center; font-family: var(--fonte-titulo); font-size: .88rem; color: var(--tinta-2); }
.exames .nome-exame { font-weight: 500; }
.valores-tempo { list-style: none; padding: 0; margin: 4px 0 12px; display: grid; gap: 6px; font-size: .94rem; }
.valores-tempo small { color: var(--tinta-3); }
.ponto-valor { white-space: nowrap; }
.dupla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 10px; }
.dupla.tipo-data { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.marcas .marcar { margin-bottom: 9px; }
.campo input[type=file] { border-style: dashed; padding: 12px; }
.linha-valor { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 28px; gap: 6px; margin-bottom: 6px; }
.linha-valor input { width: 100%; min-width: 0; background: var(--branco); border: 1px solid var(--linha-forte); border-radius: 6px; padding: 8px 9px; font-size: .95rem; }
.linha-valor .tirar { border: 0; background: none; font-size: 1.3rem; color: var(--tinta-3); cursor: pointer; padding: 0; }
.arquivos { list-style: none; padding: 0; margin: 4px 0 4px; display: grid; gap: 10px; }
.arquivos img { display: block; max-width: 100%; max-height: 260px; border-radius: 6px; border: 1px solid var(--linha); margin-bottom: 4px; }
table.valores { border-collapse: collapse; width: 100%; font-size: .94rem; margin: 4px 0 8px; }
table.valores th { text-align: left; font-weight: 500; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--linha); }
table.valores td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--linha); }
.comparar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 6px; }
.comparar select { background: var(--branco); border: 1px solid var(--linha-forte); border-radius: 6px; padding: 6px 8px; font-size: .94rem; }
.sintomas-resumo { margin: 4px 0 10px; padding-left: 1.1em; display: grid; gap: 4px; font-size: .94rem; }
.exame-resumo + .exame-resumo { border-top: 1px solid var(--linha); padding-top: 8px; }
.exame-resumo p { margin: 0 0 4px; }

@media print {
  body { background: #fff; font-size: 11pt; }
  .topo, .abas, .nao-imprime, .toast { display: none !important; }
  .conteudo { max-width: none; padding: 0; }
  .cartao { border: 1px solid #ccc; box-shadow: none; }
  .rolagem-tabela, tr, li, dl, .exame-resumo { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
  .tempo td, .tempo .cor { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a { color: inherit; text-decoration: none; }
}

/* ---------- Início novo: sua semana, prática do dia, avisos, desafio e comunidade ---------- */
.sua-semana .semana a { display: block; text-decoration: none; color: inherit; border-radius: 12px; padding: 2px 0 4px; }
.sua-semana .semana a:active { background: var(--marfim-2); }
.semana .ponto { display: inline-grid; place-items: center; color: var(--ameixa-3); }
.semana .ponto svg { width: 15px; height: 15px; }
.sua-semana > p { margin: 0; }
.feita-hoje { display: flex; align-items: center; gap: 6px; margin: -4px 0 12px; font-size: .94rem; color: var(--dourado-claro); }
.feita-hoje svg { width: 16px; height: 16px; flex: none; }
.aula-nova { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: #3d1f47; text-decoration: none; color: var(--marfim); }
.aula-nova .sobre { grid-column: 1; margin: 0; }
.aula-nova b { grid-column: 1; font-weight: 500; line-height: 1.3; }
.aula-nova .fraco { grid-column: 1; font-size: .88rem; color: #d9cbd9; }
.aula-nova .seta { grid-column: 2; grid-row: 1 / span 3; align-self: center; font-size: 1.3rem; color: var(--dourado-claro); }

.avisos h2 { margin-bottom: 10px; }
.avisos ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.aviso-item { display: flex; gap: 12px; align-items: flex-start; }
.aviso-item + .aviso-item { border-top: 1px solid var(--linha); padding-top: 12px; }
.aviso-item .anel svg { width: 19px; height: 19px; }
.aviso-item.live .anel { background: var(--ameixa); border-color: var(--ameixa); color: var(--dourado-claro); }
.aviso-item .texto { min-width: 0; }
.aviso-item .sobre { margin-bottom: 1px; }
.aviso-item .nome { display: block; }
.aviso-item .botao { margin-top: 8px; }

.desafio { background: #fbf0dc; border-color: #ecd9b0; }
.desafio .sobre { display: flex; align-items: center; gap: 6px; }
.desafio .sobre svg { width: 16px; height: 16px; }
.desafio h2 { margin-top: 4px; }
.desafio .barra { background: #f0e0bd; }
.desafio #desafio-conta { margin-bottom: 10px; }

.secao-comunidade { margin: 22px 0 14px; }
.cartao.escrever { padding: 10px 14px; border-radius: 99px; }
.cartao.escrever .avatar { width: 34px; height: 34px; font-size: .86rem; }
.cartao.escrever .fraco { flex: 1; min-width: 0; font-size: .95rem; }
.cartao.escrever svg { width: 22px; height: 22px; color: var(--dourado-escuro); flex: none; }
.post { padding: 14px 16px 10px; }
.post-autor { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; line-height: 1.25; }
.post-autor b { font-weight: 600; }
.post-autor .icone-botao { margin-left: auto; }
.selo.equipe { background: var(--ameixa); color: var(--dourado-claro); }
.selo.pratica { background: #fbf0dc; color: var(--dourado-escuro); }
.aula.atual .selo.pratica { background: var(--dourado-claro); color: var(--ameixa); }
.post-texto { white-space: pre-wrap; overflow-wrap: anywhere; margin-bottom: 10px; }
.post-foto { display: block; width: calc(100% + 32px); max-width: none; margin: 0 -16px 10px; max-height: 520px; object-fit: cover; background: var(--marfim-2); }
.post-acoes { display: flex; gap: 6px; border-top: 1px solid var(--linha); padding-top: 6px; }
.post-acoes .curtir, .post-acoes .comentar { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px; border-radius: 99px; background: none; border: 0; cursor: pointer; color: var(--tinta-2); text-decoration: none; font-size: .94rem; }
.post-acoes svg { width: 21px; height: 21px; }
.post-acoes .curtir[aria-pressed="true"] { color: #c2185b; }
.post-acoes .curtir:active, .post-acoes a.comentar:active { background: var(--marfim-2); }
.icone-botao { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: none; border: 0; cursor: pointer; color: var(--tinta-3); }
.icone-botao:hover { background: var(--marfim-2); color: var(--vermelho); }
.icone-botao svg { width: 18px; height: 18px; }
.conversa { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.conversa li { display: flex; gap: 8px; align-items: flex-start; }
.avatar.pequeno { width: 30px; height: 30px; font-size: .7rem; }
.conversa .balao { flex: 1; min-width: 0; background: var(--marfim); border-radius: 14px; padding: 7px 12px; font-size: .94rem; line-height: 1.4; overflow-wrap: anywhere; }
.conversa .balao b { font-weight: 600; }
.comentar-form { display: flex; gap: 8px; margin: 10px 0 4px; }
.comentar-form input { flex: 1; min-width: 0; border: 1px solid var(--linha-forte); border-radius: 99px; padding: 8px 14px; background: var(--branco); }
.comentar-form input:focus { outline: 2px solid var(--dourado); outline-offset: 1px; border-color: transparent; }
.publicar-linha { display: flex; gap: 10px; align-items: flex-start; }
.publicar-linha textarea { flex: 1; min-width: 0; border: 1px solid var(--linha-forte); border-radius: var(--raio-pequeno); padding: 10px 12px; background: var(--branco); resize: vertical; min-height: 84px; }
.publicar-linha textarea:focus { outline: 2px solid var(--dourado); outline-offset: 1px; border-color: transparent; }
.publicar .acoes { justify-content: flex-end; margin-top: 10px; }
.publicar label.botao { cursor: pointer; }
.previa-foto { margin: 10px 0 0 50px; }
.previa-foto img { display: block; max-height: 220px; border-radius: var(--raio-pequeno); margin-bottom: 4px; }
details.regras > summary { font-size: .95rem; }

/* Jornada: a prática de todo dia */
.pratica-ciclo .botao { margin-top: 4px; }

/* Anamnese mensal e Minha saúde mês a mês */
.convite-exame { border-color: var(--dourado-claro); background: #fffaf0; }
.convite-exame .botao { margin: 2px 0 10px; }
.meses { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 14px; }
.meses h3 { font-size: .95rem; margin: 0 0 6px; color: var(--tinta-2); }
.meses h3::first-letter { text-transform: uppercase; }
.linha-mes { display: flex; gap: 12px; align-items: center; padding: 8px 10px; margin-bottom: 6px; border: 1px solid var(--linha); border-radius: 14px; text-decoration: none; color: inherit; line-height: 1.3; }
.linha-mes:active { background: var(--marfim-2); }
.linha-mes b { font-weight: 500; }
.anel.pequeno { width: 32px; height: 32px; }
.anel.pequeno svg { width: 16px; height: 16px; }

/* Painel: saúde da aluna */
.tabela.evolucao td, .tabela.evolucao th { text-align: center; padding: 8px 6px; }
.tabela.evolucao td:first-child, .tabela.evolucao td:nth-child(2), .tabela.evolucao th:first-child, .tabela.evolucao th:nth-child(2) { text-align: left; }
.tabela.evolucao td.atencao { background: var(--amarelo-suave); color: var(--amarelo); }
.tabela.evolucao td.destaque { background: #ecd9b0; color: var(--dourado-escuro); font-weight: 600; }
.tabela.evolucao td.foco { background: var(--ameixa); color: var(--dourado-claro); font-weight: 600; }
.exames-admin { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 10px; }
.exames-admin li { border-top: 1px solid var(--linha); padding-top: 8px; }
.aviso-item .quando { display: block; font-size: .94rem; font-weight: 500; color: var(--enfase); margin-top: 1px; }
.aviso-item .quando::first-letter { text-transform: uppercase; }

/* ---------- Visor de PDF e foto (visor.js): por cima de tudo, com Voltar sempre à vista ---------- */
body.com-visor { overflow: hidden; }
.visor { position: fixed; inset: 0; z-index: 100; background: #3b3340; display: flex; flex-direction: column; }
.visor-barra { flex: none; background: var(--ameixa); color: var(--marfim); padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px; display: flex; align-items: center; gap: 10px; }
.visor-voltar { flex: none; background: var(--dourado); color: var(--ameixa-3); border: 0; border-radius: 99px; padding: 8px 16px; font-weight: 600; cursor: pointer; }
.visor-titulo { flex: 1; min-width: 0; font-size: .94rem; opacity: .9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visor-baixar { flex: none; color: var(--dourado-claro); font-size: .94rem; text-decoration: none; border: 1px solid rgba(231, 205, 138, .45); border-radius: 99px; padding: 6px 12px; }
.visor-corpo { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-x pan-y; }
.visor-paginas { width: max-content; min-width: 100%; padding: 8px 8px calc(84px + var(--seguro-baixo)); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.visor-pagina { position: relative; width: var(--largura, 100%); background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.visor-pagina canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.visor-pagina.imagem { background: none; }
.visor-pagina.imagem img { display: block; width: 100%; height: auto; }
.visor-zoom { position: fixed; right: 14px; bottom: calc(16px + var(--seguro-baixo)); display: flex; gap: 8px; }
.visor-zoom button { width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(25, 11, 29, .85); color: var(--marfim); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.visor-zoom button:disabled { opacity: .35; }
.visor-msg { color: var(--marfim); padding: 32px 20px; text-align: center; max-width: 520px; margin: 0 auto; }
.visor-carregando { position: absolute; left: 0; right: 0; top: 40%; text-align: center; color: var(--tinta-3); font-size: .94rem; }

/* ---------- Fim da aula: próxima, anterior, favoritar e avaliação (27/10) ---------- */
.titulo-aula { display: flex; align-items: flex-start; gap: 6px; }
.titulo-aula h1 { flex: 1; }
.titulo-aula .favoritar { margin-top: 2px; width: 42px; height: 42px; }
.titulo-aula .favoritar svg { width: 24px; height: 24px; }
.favoritar.ativa, .titulo-aula .favoritar.ativa:hover { color: var(--dourado); }
.titulo-aula .favoritar:hover { color: var(--dourado-escuro); }
.fim-aula { display: grid; gap: 8px; border-color: var(--dourado-claro); margin-top: 6px; }
.fim-topo { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 4px; }
.fim-topo b { font-family: var(--fonte-titulo); }
.selo-feito { width: 28px; height: 28px; border-radius: 50%; background: var(--verde-suave); color: var(--verde); display: grid; place-items: center; }
.selo-feito svg { width: 16px; height: 16px; }
.botao.largo { width: 100%; }
.proxima-nome { text-align: center; margin-top: -2px; }
.fim-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.fim-acoes .botao { flex: 1 1 140px; }
.fim-acoes .favoritar svg { width: 18px; height: 18px; }
.botao.secundario.favoritar.ativa { border-color: var(--dourado); color: var(--dourado-escuro); }
.avaliar { margin-top: 22px; }
.avaliar h2 { font-size: 1.08rem; }
.carinhas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 8px; }
.carinha { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 8px; background: var(--marfim); border: 1.5px solid var(--linha); border-radius: var(--raio-pequeno); cursor: pointer; color: var(--tinta-2); font-size: .93rem; }
.carinha svg { width: 40px; height: 40px; }
.carinha:hover { border-color: var(--linha-forte); }
.carinha.escolhida { background: #fbf0dc; border-color: var(--dourado); color: var(--ameixa); font-weight: 600; }
.carinha.escolhida svg { color: var(--dourado-escuro); }
#comentar-aula { display: grid; gap: 8px; justify-items: start; margin-top: 8px; }
#comentar-aula .campo { width: 100%; margin: 0; }
.fav-meta svg { width: 12px; height: 12px; color: var(--dourado); vertical-align: -1px; }
.favoritas { margin-bottom: 18px; }
.lista-avaliacoes { list-style: none; padding: 0; margin: 0; }
.lista-avaliacoes .descricao { margin: 6px 0 0; }

/* ---------- Acervo de dores no painel: tags das aulas (27/10) ---------- */
.tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag { display: inline-flex; align-items: center; gap: 4px; background: #fbf0dc; color: var(--dourado-escuro); border-radius: 99px; padding: 2px 10px; font-size: .88rem; line-height: 1.5; white-space: nowrap; }
.tag button { background: none; border: 0; padding: 0 0 0 2px; font-size: 1rem; line-height: 1; color: inherit; cursor: pointer; }
.campo-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; background: var(--branco); border: 1px solid var(--linha-forte); border-radius: var(--raio-pequeno); padding: 8px 10px; cursor: text; }
.campo-tags:focus-within { outline: 2px solid var(--dourado); outline-offset: 1px; border-color: transparent; }
.campo .campo-tags input { flex: 1 1 140px; width: auto; border: 0; padding: 4px 2px; background: none; outline: none; }
.tabela .sub.serve, .lista-simples .serve { color: var(--tinta-2); font-style: italic; }
.lista-simples { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 10px; }
.lista-simples .sub { display: block; font-size: .93rem; }

/* Painel: enviar o acesso pelo WhatsApp */
.envio-todas { margin: 14px 0 8px; }
.lista-envio { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.cartao.envio { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; margin: 0; }
.envio .sub { display: block; font-size: .9rem; color: var(--tinta-3); }
.envio-quem b { display: block; }
.envio-estado { text-align: right; }
.envio .acoes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.envio-reserva { grid-column: 1 / -1; }
.envio-reserva:empty { display: none; }
.envio .caixa-link { white-space: pre-wrap; word-break: break-word; }
.alerta-texto { color: var(--vermelho); }
@media (max-width: 560px) { .cartao.envio { grid-template-columns: 1fr; } .envio-estado { text-align: left; } }

/* Validade do acesso e renovação */
.cartao.renovar { border-color: var(--dourado, #c79a4a); background: linear-gradient(180deg, var(--marfim-2), var(--branco)); }
.cartao.renovar h2 { margin: 4px 0 6px; }
.renovar .sobre { display: flex; align-items: center; gap: 6px; }
.renovar .sobre svg { width: 16px; height: 16px; }
.cartao.renovar .botao { margin-top: 6px; }
.programa-perfil + .programa-perfil { border-top: 1px solid var(--linha); padding-top: 10px; margin-top: 10px; }
.programa-perfil p { margin: 0 0 8px; }

/* Blog do site dentro do app */
a.cartao.artigo-novo { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: center; text-decoration: none; color: inherit; }
.artigo-novo img { width: 84px; height: 84px; object-fit: cover; border-radius: 12px; }
.artigo-novo .nome { display: block; line-height: 1.3; margin: 2px 0 4px; }
.artigo { flex: none; width: 200px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; }
.capa-artigo { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: var(--marfim-2); color: var(--dourado-escuro); }
.capa-artigo img { width: 100%; height: 100%; object-fit: cover; }
.capa-artigo svg { width: 28px; height: 28px; }
.capa-artigo .selo.novo { position: absolute; top: 8px; left: 8px; background: var(--dourado); color: var(--ameixa-3); font-weight: 600; }
.artigo .sobre { margin: 0; }
.artigo .nome { font-size: .94rem; font-weight: 600; line-height: 1.3; }
.grade-artigos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 18px 14px; }
.grade-artigos .artigo { width: auto; }
.leitura { max-width: 680px; margin: 0 auto; }
.leitura-capa { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--raio); margin-bottom: 16px; }
.leitura h1 { font-size: 1.6rem; line-height: 1.25; margin: 4px 0 10px; }
.leitura-lede { font-size: 1.08rem; color: var(--tinta-2); line-height: 1.55; }
.leitura-texto { font-size: 1.02rem; line-height: 1.7; overflow-wrap: break-word; }
.leitura-texto h2 { font-size: 1.25rem; margin: 1.6em 0 .5em; }
.leitura-texto h3 { font-size: 1.08rem; margin: 1.3em 0 .4em; }
.leitura-texto img { max-width: 100%; height: auto; border-radius: 12px; margin: 10px 0; }
.leitura-texto blockquote { margin: 1em 0; padding: 4px 0 4px 16px; border-left: 3px solid var(--dourado); color: var(--tinta-2); font-style: italic; }
.leitura-texto table { display: block; overflow-x: auto; border-collapse: collapse; font-size: .94rem; }
.leitura-texto th, .leitura-texto td { border: 1px solid var(--linha); padding: 6px 8px; text-align: left; vertical-align: top; }
.leitura-texto a { color: var(--enfase); }
.leitura-fonte { margin: 28px 0 8px; }

/* ---------- Comunidade viva: mural com tipos, alunas, praticar junto, encontros e sininho ---------- */
.sub-abas { display: flex; gap: 4px; background: var(--marfim-2); border-radius: 99px; padding: 4px; margin: -6px 0 18px; }
.sub-abas a { flex: 1; text-align: center; padding: 8px 6px; border-radius: 99px; text-decoration: none; color: var(--tinta-2); font-size: .94rem; font-weight: 500; white-space: nowrap; }
.sub-abas a.ativo { background: var(--branco); color: var(--enfase); box-shadow: 0 1px 3px rgba(42, 19, 48, .12); font-weight: 600; }
.sino { position: relative; display: grid; place-items: center; width: 34px; height: 34px; color: var(--dourado-claro); text-decoration: none; }
.sino svg { width: 23px; height: 23px; }
.sino .bolinha { position: absolute; top: -3px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--dourado); color: var(--ameixa); font-size: .76rem; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--ameixa); }
a.cartao.convite-perfil { flex-direction: column; align-items: flex-start; gap: 2px; border-color: var(--dourado); box-shadow: inset 3px 0 0 var(--dourado); color: var(--tinta); }
.pergunta-dia { background: var(--ameixa); color: var(--marfim); border-color: var(--ameixa); }
.pergunta-dia .sobre { color: var(--dourado-claro); }
.pergunta-dia p { font-family: var(--fonte-titulo); font-size: 1.15rem; margin: 4px 0 12px; line-height: 1.35; }
.pergunta-dia .botao.secundario { background: transparent; color: var(--dourado-claro); border-color: rgba(231, 205, 138, .5); }
.tipos-post { margin: 0 0 10px; }
.respondendo { font-size: .94rem; color: var(--tinta-2); margin: 0 0 8px; }
.filtros-post { margin: 4px 0 14px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; scrollbar-width: none; }
.filtros-post .chip { flex: none; }
.post-pergunta { font-size: .94rem; color: var(--dourado-escuro); margin: 0 0 4px; }
.selo.tipo-vitoria { background: #fbf0cf; color: #7a5a1e; }
.selo.tipo-desafio { background: #fbe0cf; color: #8a3d12; }
.selo.tipo-sonho { background: #e4dff7; color: #3d2f7a; }
.selo.tipo-talento { background: #d9ecdf; color: #2f6a4a; }
.post-autor b a, .balao b a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--tinta-3); }
a.cartao.pessoa { align-items: flex-start; color: var(--tinta); }
.avatar.medio { width: 52px; height: 52px; font-size: 1rem; }
.pessoa-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pessoa-info svg, .capa-perfil p svg, .encontro svg, .lugar-encontro svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; }
.pessoa-frase { font-size: .94rem; color: var(--tinta-2); }
.pessoa-info .chips { margin: 4px 0 0; }
.chips.centro { justify-content: center; margin-top: 10px; }
.texto-perfil { white-space: pre-wrap; margin: 0; }
.campo textarea.curto { min-height: 68px; }
.interruptor { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; cursor: pointer; }
.interruptor input { width: 22px; height: 22px; accent-color: var(--ameixa); flex: none; margin: 2px 0 0; }
.interruptor small { display: block; color: var(--tinta-3); font-size: .9rem; }
.interruptor + .interruptor { border-top: 1px solid var(--linha); }
.para-quem { border: 0; padding: 0; margin: 0 0 14px; }
.para-quem legend { font-size: .93rem; color: var(--tinta-2); font-weight: 500; margin-bottom: 4px; padding: 0; }
.opcao { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; cursor: pointer; }
.para-quem.campo .opcao input, .para-quem.campo .pessoa-check input { width: 18px; height: 18px; padding: 0; border: 0; accent-color: var(--ameixa); flex: none; }
.opcao input { margin-top: 4px; }
.opcao small { display: block; color: var(--tinta-3); font-size: .9rem; }
.lista-convidar { display: grid; gap: 6px; margin: 4px 0 0 26px; }
.pessoa-check { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid var(--linha); border-radius: var(--raio-pequeno); background: var(--branco); cursor: pointer; }
.pessoa-check input { accent-color: var(--ameixa); width: 18px; height: 18px; }
.como-funciona p { margin: 0 0 12px; }
a.cartao.pratica-junto, a.cartao.encontro { flex-direction: column; align-items: flex-start; gap: 2px; color: var(--tinta); }
.quando-pratica { display: block; font-size: .88rem; font-weight: 600; color: var(--dourado-escuro); }
.quando-pratica::first-letter, .quando-grande::first-letter { text-transform: uppercase; }
a.cartao.pratica-junto.agora, .pratica-estado.agora { border-color: var(--dourado); box-shadow: inset 3px 0 0 var(--dourado); }
.rostos { display: flex; align-items: center; margin-top: 6px; min-height: 30px; }
.rostos .avatar { margin-right: -6px; box-shadow: 0 0 0 2px var(--branco); }
.rostos .selo { margin-left: 14px; }
.selo.ao-vivo { background: var(--vermelho-suave); color: var(--vermelho); font-weight: 600; }
.selo.convite { background: var(--amarelo-suave); color: var(--amarelo); }
.quando-grande { color: var(--tinta-2); margin: 4px 0 0; }
.pratica-estado p { margin: 0 0 6px; }
.pratica-estado .botao { margin-top: 8px; }
.botao.desligado { opacity: .45; pointer-events: none; }
.recado { font-style: italic; color: var(--tinta-2); border-left: 3px solid var(--linha-forte); padding-left: 10px; margin: 6px 0 12px; }
.lista-pessoas { list-style: none; padding: 0; margin: 6px 0 14px; display: grid; gap: 8px; }
.lista-pessoas li { display: flex; align-items: center; gap: 10px; }
.link-botao.perigo { color: var(--vermelho); }
.lista-sininho { list-style: none; padding: 0; margin: 0; }
.lista-sininho a { display: flex; gap: 12px; align-items: flex-start; padding: 12px 8px; border-bottom: 1px solid var(--linha); text-decoration: none; color: var(--tinta); }
.lista-sininho li.nova a { background: var(--branco); font-weight: 500; }
.icone-sininho { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--marfim-2); display: grid; place-items: center; color: var(--enfase); }
.icone-sininho svg { width: 19px; height: 19px; }
.cartao.junto { border-color: var(--dourado); box-shadow: inset 3px 0 0 var(--dourado); }
.cartao.junto p { margin: 0 0 6px; }
.cartao.junto .botao { margin: 4px 6px 0 0; }
.pergunta-dia-campo { width: 100%; background: var(--branco); border: 1px solid var(--linha-forte); border-radius: 8px; padding: 6px 10px; }

/* ---------- convite com aula experimental ---------- */
.pagina-convite { min-height: 100vh; background: var(--marfim); }
.topo-convite { background: var(--ameixa); padding: calc(12px + env(safe-area-inset-top, 0px)) 18px 12px; display: flex; align-items: center; justify-content: space-between; }
.topo-convite .marca { font-family: var(--fonte-titulo); font-weight: 700; letter-spacing: .16em; font-size: .95rem; color: var(--dourado-claro); }
.topo-convite .link-botao { color: var(--dourado-claro); font-size: .94rem; }
.pagina-convite .conteudo { padding-bottom: 48px; }
.texto-convite { white-space: pre-line; font-size: 1.02rem; margin: 0 0 18px; }
.chamada-convite { margin-top: 22px; border-color: var(--dourado); box-shadow: inset 3px 0 0 var(--dourado); }
.chamada-convite h2 { margin-top: 0; }
.link-convite { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.link-convite input { flex: 1; min-width: 0; background: var(--marfim); border: 1px solid var(--linha-forte); border-radius: 8px; padding: 9px 10px; font-size: .94rem; color: var(--tinta-2); }
.botoes-convite { display: grid; gap: 8px; }

/* ---------- pontos do mês e selos ---------- */
.total-pontos { text-align: center; }
.total-pontos > b { display: block; font-family: var(--fonte-titulo); font-size: 3rem; line-height: 1; color: var(--enfase); }
.total-pontos > span { display: block; margin-top: 4px; color: var(--tinta-2); }
.total-pontos p { margin: 10px 0 0; }
.lista-pontos { list-style: none; padding: 0; margin: 0; }
.lista-pontos li { display: grid; grid-template-columns: 1fr auto 3.2em; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.lista-pontos li:last-child { border-bottom: 0; }
.lista-pontos .quantos { color: var(--tinta-2); font-size: .94rem; }
.lista-pontos .quantos::after { content: '×'; margin-left: 2px; opacity: .6; }
.lista-pontos b { text-align: right; color: var(--enfase); }
.selos { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.selos li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 14px 10px; border: 1px dashed var(--linha-forte); border-radius: var(--raio); color: var(--tinta-2); }
.selos .medalha { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--marfim-2); color: var(--linha-forte); }
.selos .medalha svg { width: 22px; height: 22px; }
.selos li.ganho { border-style: solid; border-color: var(--dourado); background: var(--branco); color: var(--tinta); }
.selos li.ganho .medalha { background: var(--ameixa); color: var(--dourado-claro); }

/* ---------- aulas baixadas para ver sem internet ---------- */
.baixar { margin: 0 0 14px; }
.baixando { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--linha); border-radius: var(--raio-pequeno); background: var(--branco); }
.baixando .barra { grid-column: 1 / -1; margin: 0; }
.baixando-texto { font-size: .94rem; color: var(--tinta-2); }
.baixada { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; font-size: .94rem; color: var(--tinta-2); }
.baixada svg { width: 18px; height: 18px; color: var(--verde, var(--ameixa)); flex: none; }
.lista-baixadas { list-style: none; padding: 0; margin: 0 0 12px; }
.lista-baixadas li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.lista-baixadas a { flex: 1; min-width: 0; display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--tinta); }
.lista-baixadas a > svg { width: 22px; height: 22px; flex: none; color: var(--enfase); }

/* ---------- versão leve: escolha da qualidade, logo abaixo do vídeo ---------- */
.qualidade { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -8px 0 16px; font-size: .93rem; }
.qualidade[hidden] { display: none; }
.qualidade .rotulo { color: var(--tinta-2); margin-right: 2px; }
.qualidade .chip.escolha { padding: 4px 12px; font-size: .9rem; }
.qualidade small { font-size: .86rem; opacity: .8; }
.baixar #baixar-normal { display: block; margin-top: 8px; }

/* ---------- sala de vídeo do app ---------- */
.sala { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--ameixa-3); z-index: 40; }
.sala .topo { position: static; }
.sala-video { flex: 1; min-height: 0; position: relative; }
.sala-video rtk-meeting { display: block; width: 100%; height: 100%; }
.sala-video .carregando { color: var(--marfim); }
.sala-video .conteudo { color: var(--marfim); }
.botao.gravar { background: transparent; border: 1px solid rgba(231, 205, 138, .5); color: var(--dourado-claro); min-height: 32px; }
.botao.gravar.gravando { background: var(--vermelho); border-color: var(--vermelho); color: var(--branco); }
.sala-opcao { margin: 4px 0 14px; }
#convite h3, #sala h3 { margin-top: 24px; }

/* Painel > Atividade */
.periodo { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
.periodo a { padding: 6px 14px; border: 1px solid var(--linha); border-radius: 99px; text-decoration: none; color: var(--tinta-2); font-size: .94rem; background: var(--branco); }
.periodo a.ativo { background: var(--ameixa); border-color: var(--ameixa); color: #fff; }
.numero small { color: var(--tinta-3); }
.lista-sumidas li { margin-bottom: 4px; }
.linha-botoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chamada-painel { display: block; text-decoration: none; color: inherit; margin-bottom: 18px; }
.chamada-painel b { display: block; font-family: var(--fonte-titulo); font-size: 1.1rem; color: var(--enfase); margin-bottom: 2px; }
/* Guias da Biblioteca na própria tela da aula (o estilo do guia vem junto, dentro de article.guia) */
.guia-baixar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.guia-baixar .botao svg { width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; }
.guia-tela { margin: 18px 0 24px; }
.guia-tela .guia { max-width: 760px; }

/* ---------- design e navegação (02/11): voltar maior, perfis como nas redes sociais, recorte da foto ---------- */
.topo .voltar { display: inline-grid; place-items: center; width: 40px; height: 40px; margin: -6px 0 -6px -10px; padding: 0; border-radius: 50%; flex: none; }
.topo .voltar svg { width: 24px; height: 24px; }
.topo .voltar:active { background: rgba(255, 255, 255, .12); }
.topo .titulo-topo { font-family: var(--fonte-titulo); font-weight: 600; font-size: 1rem; opacity: 1; min-width: 0; }

.perfil-rede { margin: 0 0 16px; }
.perfil-rede-topo { display: flex; align-items: center; gap: 18px; margin-bottom: 12px; }
.perfil-rede .avatar.grande { width: 88px; height: 88px; font-size: 1.7rem; box-shadow: 0 0 0 3px var(--marfim), 0 0 0 5px var(--dourado-claro); }
.perfil-rede-numeros { list-style: none; padding: 0; margin: 0; flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: center; gap: 4px; }
.perfil-rede-numeros b { display: block; font-family: var(--fonte-titulo); font-size: 1.3rem; color: var(--enfase); line-height: 1.2; }
.perfil-rede-numeros span { display: block; font-size: .82rem; color: var(--tinta-2); line-height: 1.2; }
.perfil-rede-nome { font-size: 1.25rem; margin: 0 0 2px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.perfil-rede > p { margin: 0 0 4px; }
.perfil-rede-bio { margin: 10px 0 6px; display: grid; gap: 8px; }
.perfil-rede-bio div { margin: 0; }
.perfil-rede-bio dt { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dourado-escuro); font-weight: 600; }
.perfil-rede-bio dd { margin: 0; white-space: pre-line; }
.perfil-rede-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.perfil-rede-acoes .botao { flex: 1 1 auto; }
.perfil-rede-acoes label.botao { cursor: pointer; }
.foto-editavel { position: relative; flex: none; }
.trocar-foto-botao { position: absolute; right: -2px; bottom: -2px; width: 32px; height: 32px; border-radius: 50%; background: var(--dourado); color: var(--ameixa-3); display: grid; place-items: center; cursor: pointer; box-shadow: 0 0 0 3px var(--marfim); }
.trocar-foto-botao svg { width: 17px; height: 17px; }

.perfil-rede-vistas { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--linha); margin: 6px 0 10px; }
.perfil-rede-vistas button { background: none; border: 0; border-top: 2px solid transparent; margin-top: -1px; padding: 10px 0; color: var(--tinta-3); cursor: pointer; display: grid; place-items: center; }
.perfil-rede-vistas button svg { width: 22px; height: 22px; }
.perfil-rede-vistas button[aria-pressed="true"] { color: var(--enfase); border-top-color: var(--ameixa); }
.grade-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin: 0 -18px 14px; }
@media (min-width: 600px) { .grade-posts { margin: 0 0 14px; gap: 6px; } }
.bloco-post { position: relative; aspect-ratio: 1; overflow: hidden; display: grid; place-items: center; text-decoration: none; background: var(--marfim-2); color: var(--tinta); }
.bloco-post img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bloco-post > span:first-child { padding: 10px; font-size: .86rem; line-height: 1.3; text-align: center; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.bloco-post.tipo-vitoria { background: #f6ecd2; }
.bloco-post.tipo-sonho { background: #ece6f6; }
.bloco-post.tipo-desafio { background: #f8e3dc; }
.bloco-post.tipo-talento { background: #e2f1e8; }
.bloco-contas { position: absolute; left: 6px; bottom: 5px; display: flex; gap: 6px; align-items: center; font-size: .8rem; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.bloco-post:not(.com-foto) .bloco-contas { color: var(--tinta-2); text-shadow: none; }
.bloco-contas svg { width: 13px; height: 13px; margin-right: 1px; }
.avatar-link { display: inline-flex; border-radius: 50%; text-decoration: none; flex: none; }
.centro { text-align: center; }

.cartao.progresso .progresso-ciclo { margin: 4px 0 8px; font-size: .95rem; }
.cartao.progresso .barra { margin: 8px 0 10px; }
.cartao.progresso .barra.fina { height: 4px; margin-top: 4px; }
.cartao.progresso .titulo-linha.pequeno { font-size: .93rem; }
.cartao.progresso .botao { width: 100%; margin-top: 4px; }
.registro-hoje.feito { border-color: var(--verde); box-shadow: inset 3px 0 0 var(--verde); }
.registro-hoje.feito .anel { background: var(--verde-suave); border-color: var(--verde); color: var(--verde); }
.meus-dados dl { margin: 0 0 8px; display: grid; gap: 10px; }
.meus-dados dl div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 10px; border-bottom: 1px solid var(--linha); padding-bottom: 8px; }
.meus-dados dl div:last-child { border-bottom: 0; padding-bottom: 0; }
.meus-dados dt { color: var(--tinta-2); font-size: .94rem; }
.meus-dados dd { margin: 0; font-size: .94rem; overflow-wrap: anywhere; }

/* recorte da foto */
.recorte { position: fixed; inset: 0; z-index: 110; background: #120814; color: var(--marfim); display: flex; flex-direction: column; align-items: center; }
.recorte-barra { margin-bottom: auto; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px; }
.recorte-barra b { font-family: var(--fonte-titulo); font-weight: 600; }
.recorte-barra button { background: none; border: 0; color: var(--marfim); font-size: 1rem; padding: 8px 6px; cursor: pointer; }
.recorte-barra .recorte-usar { color: var(--ameixa-3); background: var(--dourado); border-radius: 99px; padding: 8px 18px; font-weight: 600; }
.recorte-palco { position: relative; width: min(92vw, 420px, calc(100vh - 260px)); aspect-ratio: 1; margin: 0 0 16px; touch-action: none; cursor: grab; overflow: hidden; border-radius: 6px; }
.recorte-palco canvas { width: 100%; height: 100%; display: block; }
.recorte-mascara { position: absolute; inset: 0; pointer-events: none; border-radius: 50%; box-shadow: 0 0 0 999px rgba(18, 8, 20, .62); outline: 2px solid rgba(231, 205, 138, .9); outline-offset: -2px; }
.recorte-dica { font-size: .93rem; opacity: .75; margin: 0 16px 12px; text-align: center; }
.recorte-controles { display: flex; align-items: center; gap: 10px; width: min(92vw, 420px); margin-bottom: auto; padding-bottom: calc(24px + var(--seguro-baixo)); }
.recorte-controles input[type=range] { flex: 1; accent-color: var(--dourado); }
.recorte-controles button { background: rgba(255, 255, 255, .1); color: var(--marfim); border: 0; border-radius: 99px; min-width: 40px; height: 40px; font-size: 1.1rem; cursor: pointer; padding: 0 12px; }
.recorte-controles .recorte-girar { font-size: .94rem; white-space: nowrap; }
.perfil-rede p svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: 3px; }
.botao[hidden] { display: none; }
.secao-comunidade .post-foto { max-height: 320px; }
.publicar:not(.aberto) .tipos-post, .publicar:not(.aberto) .acoes { display: none; }
.publicar:not(.aberto) textarea { min-height: 0; height: 46px; resize: none; }
.publicar:not(.aberto) .publicar-linha { align-items: center; margin: 0; }
.publicar:not(.aberto) textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* avisos no celular (05/11) */
.convite-avisos { display: flex; gap: 14px; align-items: flex-start; border-color: var(--dourado); box-shadow: inset 3px 0 0 var(--dourado); }
.convite-avisos .anel { flex: none; }
.convite-avisos .acoes { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.estado-avisos { display: flex; align-items: center; gap: 8px; }
.estado-avisos.ok { color: var(--verde); }
.estado-avisos svg { width: 20px; height: 20px; }
#prefs-avisos select { width: 100%; }
#prefs-avisos select:disabled { opacity: .5; }

/* Registro do dia: outras atividades (026), dentro do cartão Seu dia */
.outras-atividades { padding: 10px 0; border-top: 1px solid var(--linha); }
.outras-atividades .rotulo { font-weight: 500; }
.outras-atividades .chips { margin: 8px 0 2px; }
.chip.escolha.mais { border-style: dashed; color: var(--tinta-2); }
.nova-atividade { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.nova-atividade input { flex: 1; min-width: 0; background: var(--branco); border: 1px solid var(--linha-forte); border-radius: var(--raio-pequeno); padding: 9px 12px; font-size: 1rem; }
.nova-atividade .botao { flex: none; }
.atividades-resumo { margin: 4px 0 12px; }
.nova-atividade[hidden], .outras-atividades .chip[hidden] { display: none; }

/* Continuar o vídeo de onde parou */
.continuar-video { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: -6px 0 14px; padding: 10px 14px; border-radius: var(--raio-pequeno); background: var(--marfim-2); font-size: .94rem; color: var(--tinta-2); }

/* Primeiros passos (Início, nas duas primeiras semanas) */
.primeiros-passos .barra { margin: 4px 0 10px; }
.lista-passos { list-style: none; margin: 0 0 6px; padding: 0; }
.lista-passos li { border-top: 1px solid var(--linha); }
.lista-passos li:first-child { border-top: 0; }
.lista-passos li > a, .lista-passos li.feito { display: flex; align-items: center; gap: 12px; padding: 11px 0; text-decoration: none; min-height: 52px; }
.lista-passos .marca { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--linha-forte); display: grid; place-items: center; }
.lista-passos .feito .marca { background: var(--dourado); border-color: var(--dourado); color: var(--branco); }
.lista-passos .feito .marca svg { width: 15px; height: 15px; }
.lista-passos .feito .nome { color: var(--tinta-3); text-decoration: line-through; }
.lista-passos .nome { display: block; font-weight: 500; }
.lista-passos a > span:nth-child(2) { flex: 1; }
.lista-passos .seta { color: var(--tinta-3); font-size: 1.3rem; }

/* Instalar no celular */
.passos-instalar { margin: 4px 0 12px; padding-left: 1.3em; }
.passos-instalar li { margin-bottom: 12px; }
.passos-instalar li b { display: block; }
.passos-instalar li .fraco { display: block; font-size: .94rem; }
.novo-endereco { background: var(--amarelo-suave); }

/* O que você sente hoje? (Biblioteca) */
.o-que-sente { margin: 4px 0 18px; }
.chips-dores { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-dor { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--linha-forte); background: var(--branco); text-decoration: none; font-weight: 500; }
.chip-dor:active { background: var(--marfim-2); }
.pilula-dor { background: var(--verde-suave); border-color: transparent; }

/* Letra maior (Perfil > Tela e leitura) */
html.letra-grande { font-size: 112.5%; }
html.letra-grande body { font-size: 19px; }

/* Modo noite (Perfil > Tela e leitura): automático segue o celular; "noite" força */
html[data-tema="noite"] {
  color-scheme: dark;
  --marfim: #170e1a; --marfim-2: #2a1d30; --branco: #21152a; --linha: #3a2c42; --linha-forte: #554560;
  --tinta: #f3ecf4; --tinta-2: #d3c6d6; --tinta-3: #b3a5b6;
  --enfase: #e7cd8a; --dourado-escuro: #e2c27c;
  --verde: #7fd1a3; --verde-suave: #183326; --vermelho: #f2a39d; --vermelho-suave: #3a1917; --amarelo: #f0cf6e; --amarelo-suave: #33290f;
  --ameixa-3: #0d0710;
}
html[data-tema="noite"] .tag, html[data-tema="noite"] .chip, html[data-tema="noite"] .selo { background: var(--marfim-2); color: var(--tinta-2); }
html[data-tema="noite"] .abas a { color: var(--tinta-3); }
html[data-tema="noite"] .abas a.ativo { color: var(--enfase); }
html[data-tema="noite"] .cartao.destaque, html[data-tema="noite"] .proxima-aula, html[data-tema="noite"] .pergunta-dia { border-color: var(--linha); }
html[data-tema="noite"] .tile, html[data-tema="noite"] .tile.anamnese, html[data-tema="noite"] .tile.emocoes { background: var(--branco); }
html[data-tema="noite"] img { filter: brightness(.92); }

/* Tela e leitura (Perfil) */
.preferencias .opcoes-tela { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 14px; }
.preferencias .opcoes-tela button { min-height: 44px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--linha-forte); background: var(--branco); cursor: pointer; }
.preferencias .opcoes-tela button[aria-pressed="true"] { background: var(--ameixa); color: var(--dourado-claro); border-color: var(--ameixa); }
.preferencias h3 { margin-top: 4px; }

/* Modo áudio na aula */
.modo-audio { margin: -6px 0 16px; }
.player.so-audio { aspect-ratio: auto; min-height: 220px; }
.capa-audio { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 18px; color: var(--marfim); text-align: center; }
.capa-audio img { border-radius: 50%; }
.capa-audio span { font-size: .94rem; color: #d9cbd9; }
.capa-audio audio { width: 100%; margin-top: 6px; }
.rolar { overflow-x: auto; }
.tabela.quadro td { white-space: nowrap; }

/* Teste hormonal gratuito */
.perguntas-teste { list-style: none; margin: 0 0 18px; padding: 0; }
.perguntas-teste li { border-bottom: 1px solid var(--linha); }
.perguntas-teste label { display: flex; gap: 12px; align-items: flex-start; padding: 13px 2px; cursor: pointer; }
.perguntas-teste input { width: 24px; height: 24px; margin: 2px 0 0; flex: none; accent-color: var(--ameixa); }
.foco-teste .pilula-dor { border-radius: var(--raio-pequeno); padding: 12px 14px; margin-top: 8px; }
.foco-teste .pilula-dor p { margin: 0; }
.convite-metodo .botao { margin-top: 6px; }

/* Olhinho para ver a senha (senha.js) */
.com-olho { position: relative; display: block; }
.com-olho input { padding-right: 48px; }
.olho { position: absolute; top: 0; right: 0; bottom: 0; width: 46px; display: flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--tinta-2); cursor: pointer; border-radius: var(--raio-pequeno); }
.olho:focus-visible { outline: 2px solid var(--dourado); outline-offset: -2px; }
.entrada .olho { color: var(--dourado-claro); }
.entrada .aviso { background: rgba(255, 255, 255, .08); border-color: rgba(231, 205, 138, .35); border-left-color: var(--dourado); color: var(--marfim); text-align: left; }
.entrada .aviso b { color: var(--dourado-claro); }