/* ===========================================================================
   Menu da conta: o dropdown do topo do /feed/ e das telas ligadas a ele.

   Veio do `<style>` de `core/feed.html`, sem mudar o desenho. Mora aqui
   porque agora abre de dois lugares -- o botao de menu do feed e o avatar do
   cabecalho das telas da conta (`partials/navbar_conta.html`) -- e tem de ser
   O MESMO menu nos dois.

   As variaveis `--tinta*`, `--linha`, `--azul` e `--fd-topo-altura` sao do
   `.fd` do feed. Fora dele valem os tokens da marca, pelo fallback de cada
   `var()`.
   =========================================================================== */

/* ---------- DROPDOWN DO MENU ----------
   Ancorado ao botao, e nao uma folha modal vinda de baixo. Navegar nao e
   tarefa modal: escurecer o card que o aluno esta lendo, prender o foco e
   exigir um gesto de fechar era caro para responder "para onde eu vou?".

   O envolucro e `position: relative` e o menu se prende a ele, entao a
   distancia ate o botao nao e numero cravado -- muda sozinha se a altura
   do topo mudar. */
.fd__menuwrap { position: relative; flex: none; }

/* O MENU E UM BALAO DE FALA DO BOTAO.
   O rabicho nao e enfeite: sem ele um retangulo flutuando no canto nao diz
   de onde saiu, e o aluno tem de inferir que aquilo pertence ao botao que
   acabou de tocar. Com a ponta apontando para o icone, a origem e visivel.

   Envolucro com `filter: drop-shadow`, caixa e rabicho brancos chapados
   dentro: um `drop-shadow` no envolucro segue o recorte dos DOIS juntos,
   enquanto `box-shadow` em cada um faria a ponta parecer um triangulo
   solto, colado por cima. Mesma tecnica de `.fd__sessao-fala` e de
   `.abre__fala` em `core/sessao_abertura.html`.

   Sem borda, de proposito: com borda, o rabicho precisaria de um segundo
   triangulo atras dele para a linha continuar na ponta -- e a sombra ja
   separa o balao do card. */
/* A CONTA DO CANTO, que e o que faz o rabicho pousar em superficie branca.
   O icone tem 27px e recuo negativo de 6px, entao o centro dele cai a
   13,5px da borda direita do envolucro. Com `right: 0` e raio de 16px, a
   base do rabicho caia exatamente sobre a CURVA do canto -- sem caixa
   branca atras de metade dela, a ponta parecia pendurada fora do balao.
   O balao avanca 10px para a direita (o cabecalho tem 16px de folga, entao
   sobram 6px de margem de tela) e o raio cai para 14px. O centro do icone
   passa a 23,5px da borda, e a base do rabicho -- 16px, de 15,5 a 31,5 --
   fica inteira no trecho RETO da aresta. */
.fd__menu {
  position: absolute;
  /* 10px deixam o rabicho caber entre o icone e a caixa. */
  top: calc(100% + 10px);
  right: -10px;
  z-index: 40;
  /* `100vw - 22px`: o balao encosta a 6px da borda direita, e a conta
     reserva 16px de folga do outro lado. */
  width: min(272px, calc(100vw - 22px));
  /* `.fd__topo` e `pointer-events: none` -- o cabecalho deixa passar o
     toque para o card atras dele, e so o botao do menu reativa. Sem esta
     linha o dropdown aparece e nenhum item aceita clique. */
  pointer-events: auto;
  filter:
    drop-shadow(0 12px 24px rgba(20, 20, 31, .18))
    drop-shadow(0 2px 6px rgba(20, 20, 31, .10));
  animation: fdMenuAbre .14s ease-out;
  /* Sem `overflow` aqui: quem rola e a caixa. Recortar o envolucro cortaria
     o rabicho, que vive fora dela. */
}
.fd__menu[hidden] { display: none; }
/* O balao nasce no botao e cresce: a origem da transformacao fica no
   rabicho, e nao no centro da caixa. */
@keyframes fdMenuAbre {
  from { opacity: 0; transform: scale(.96) translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fd__menu { animation: none; }
}
.fd__menu-caixa {
  /* A caixa rola quando nao cabe; a tela atras nao se mexe.
     `--fd-topo-altura` e a faixa do cabecalho, e os 28px sao a folga para
     o balao nao encostar no rodape. */
  max-height: calc(100dvh - var(--fd-topo-altura, 64px) - 28px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  border-radius: 14px;
  background: var(--fxm-white);
}
/* Posicionado pela aresta direita, sem `translate`: `right` e a distancia
   que a conta acima calcula, e uma transformacao no meio tornaria a
   verificacao indireta. 15,5px + 8px de meia-largura = 23,5px, o centro do
   icone. Sobrepoe a caixa em 1px para a junta sumir. */
.fd__menu-rabicho {
  position: absolute;
  top: -8px; right: 15.5px;
  width: 16px; height: 9px;
  background: var(--fxm-white);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* ---- Perfil no topo ---- */
.fd__menu-perfil {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--tinta, var(--fxm-gray-900));
}
.fd__menu-perfil:hover, .fd__menu-perfil:active { background: var(--fxm-gray-100); }
.fd__menu-avatar {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; background: var(--fxm-gray-100);
}
.fd__menu-avatar--iniciais {
  display: grid; place-items: center;
  background: var(--fxm-purple-soft); color: var(--fxm-purple-dark);
  font-size: 14px; font-weight: 800; letter-spacing: .02em;
}
.fd__menu-perfil-texto { display: grid; gap: 1px; min-width: 0; flex: 1; }
.fd__menu-perfil-texto b {
  font-size: 14.5px; font-weight: 700; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fd__menu-perfil-texto small { font-size: 12px; color: var(--tinta-3, var(--fxm-gray-500)); }
.fd__menu-seta { flex: none; width: 16px; height: 16px; color: var(--tinta-3, var(--fxm-gray-500)); }

/* ---- Destinos ---- */
/* O risco existe para separar identidade de navegacao: sao duas coisas
   diferentes, e sem ele o perfil leria como o primeiro item da lista. */
.fd__menu-lista {
  display: grid;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--linha, var(--fxm-gray-300));
}
.fd__menu-lista a {
  display: flex; align-items: center; gap: 12px;
  min-height: 44px;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 14.5px; font-weight: 600;
  color: var(--tinta, var(--fxm-gray-900));
  text-decoration: none;
}
/* O icone entra em cinza e o rotulo em preto: juntos no mesmo tom, os
   desenhos viram uma coluna de ruido a esquerda do texto. */
.fd__menu-icone {
  flex: none; display: grid; place-items: center;
  width: 22px; height: 22px;
  color: var(--tinta-3, var(--fxm-gray-500));
}
.fd__menu-icone svg { width: 22px; height: 22px; display: block; }
.fd__menu-lista a:hover, .fd__menu-lista a:active { background: var(--fxm-gray-100); }
.fd__menu-lista a:hover .fd__menu-icone,
.fd__menu-lista a:active .fd__menu-icone { color: var(--azul, var(--fxm-purple)); }
.fd__menu-lista a.fd__menu-assinar {
  color: var(--fxm-purple, #5b2ee5);
  font-weight: 800;
  background: var(--fxm-purple-soft, #efefef);
}
.fd__menu-lista a.fd__menu-assinar .fd__menu-icone { color: inherit; }
.fd__menu-lista a.fd__menu-assinar:hover,
.fd__menu-lista a.fd__menu-assinar:active { background: var(--fxm-purple-soft, #efefef); }

.fd__paywall[hidden] { display: none; }
.fd__paywall {
  position: fixed;
  inset: 0;
  z-index: 1200;
  /* O popup vive dentro do cabecalho do feed, que usa pointer-events:none
     para deixar os gestos passarem ao card. O aviso precisa ser uma excecao
     interativa: sem isto ele aparece, mas nenhum botao recebe toque. */
  pointer-events: auto;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(18, 15, 35, .48);
}
.fd__paywall-caixa {
  position: relative;
  width: min(100%, 390px);
  padding: 30px 24px 24px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 22px 70px rgba(18, 15, 35, .24);
  text-align: center;
}
.fd__paywall-selo {
  margin: 0 0 8px;
  color: var(--fxm-purple, #5b2ee5);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.fd__paywall-caixa h2 { margin: 0 0 10px; color: var(--fxm-ink, #211c32); font-size: 1.35rem; line-height: 1.18; }
.fd__paywall-caixa p:not(.fd__paywall-selo) { margin: 0 0 20px; color: var(--fxm-muted, #6e687d); line-height: 1.5; }
.fd__paywall-cta {
  display: block;
  padding: 13px 18px;
  border-radius: 12px;
  background: var(--fxm-purple, #5b2ee5);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}
.fd__paywall-secundario { margin-top: 12px; border: 0; background: transparent; color: #6e687d; cursor: pointer; font: inherit; }
.fd__paywall-fechar { position: absolute; top: 10px; right: 14px; border: 0; background: transparent; color: #6e687d; cursor: pointer; font-size: 1.7rem; line-height: 1; }

/* ---- Sair ---- */
/* ---------- INSTALAR O APP ----------
   Fica acima de "Sair", separado da lista de destinos por um risco: nao e
   lugar para onde ir, e uma acao. Nasce `hidden` no HTML -- so aparece quando
   da para instalar de fato (ver `static/js/pwa_instalar.js`). */
.fd__menu-instalar { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--linha, var(--fxm-gray-300)); }
.fd__menu-instalar-btn {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 44px;
  padding: 7px 10px;
  border: 0; border-radius: 10px;
  background: none;
  font: inherit; font-size: 14.5px; font-weight: 600;
  color: var(--fxm-purple, #5b2ee5); text-align: left; cursor: pointer;
}
.fd__menu-instalar-btn .fd__menu-icone { color: inherit; }
.fd__menu-instalar-btn:hover, .fd__menu-instalar-btn:active { background: var(--fxm-gray-100, #f2f4f7); }

.fd__menu-sair { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--linha, var(--fxm-gray-300)); }
.fd__menu-sair-btn {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 44px;
  padding: 7px 10px;
  border: 0; border-radius: 10px;
  background: none;
  font: inherit; font-size: 14.5px; font-weight: 600;
  color: var(--fxm-red); text-align: left; cursor: pointer;
}
.fd__menu-sair-btn .fd__menu-icone { color: var(--fxm-red); }
.fd__menu-sair-btn:hover, .fd__menu-sair-btn:active { background: var(--fxm-red-soft); }

/* ---------- CONFIRMACAO DE SAIDA ----------
   Esta SIM e modal, e a diferenca e proposital: sair e a unica acao do
   menu que o aluno nao desfaz com o botao de voltar, e uma confirmacao que
   nao prende a atencao nao confirma nada. */
.fd__confirma {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(20, 20, 31, .45);
}
.fd__confirma[hidden] { display: none; }
.fd__confirma-caixa {
  width: min(340px, 100%);
  padding: 20px;
  border-radius: 18px;
  background: var(--fxm-white);
  box-shadow: 0 20px 40px rgba(20, 20, 31, .28);
}
.fd__confirma-caixa h2 {
  margin: 0 0 8px; font-size: 17px; font-weight: 800; color: var(--tinta, var(--fxm-gray-900));
}
.fd__confirma-caixa p {
  margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--tinta-2, var(--fxm-gray-700));
}
/* Cancelar em cima e sair embaixo: a coluna cresce para baixo, entao o
   ULTIMO e o mais perto do dedo -- e aqui o mais perto do dedo deve ser a
   acao que o aluno pediu, nao a que desfaz o pedido. */
.fd__confirma-acoes { display: grid; gap: 8px; }
.fd__confirma-acoes form { display: grid; }
.fd__confirma-btn {
  width: 100%; min-height: 46px;
  padding: 12px 16px;
  border: 1px solid var(--linha, var(--fxm-gray-300)); border-radius: 999px;
  background: var(--fxm-white);
  font: inherit; font-size: 15px; font-weight: 700;
  color: var(--tinta, var(--fxm-gray-900)); cursor: pointer;
}
.fd__confirma-btn:hover { background: var(--fxm-gray-100); }
.fd__confirma-btn--sair {
  border-color: transparent; background: var(--fxm-red); color: var(--fxm-white);
}
.fd__confirma-btn--sair:hover { filter: brightness(.94); }
/* Confirmacao que nao e destrutiva (troca de objetivo): roxo da marca. */
.fd__confirma-btn--confirmar {
  border-color: transparent; background: var(--fxm-purple); color: var(--fxm-white);
}
.fd__confirma-btn--confirmar:hover { background: var(--fxm-purple-dark); }
.fd__confirma-btn:disabled { opacity: .6; cursor: default; }

/* ===========================================================================
   Cabecalho das telas da conta (`partials/navbar_conta.html`).

   O cabecalho de `/meu-objetivo/` (marca + avatar), com dois ajustes pedidos:
   a marca menor -- `.fxm-brand--app` chega a 44px de simbolo e 25px de texto,
   e numa tela de leitura ela virava o assunto -- e o avatar no desenho do
   menu, e nao o circulo em gradiente azul de `.avatar`.
   =========================================================================== */
.app-header--conta {
    padding: 12px 16px;
    border-bottom: 1px solid var(--fxm-gray-100);
}
/* Voltar (quando a tela pede) e marca, juntos a esquerda. */
.app-header--conta .conta-inicio {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.app-header--conta .jc-back:focus-visible {
    outline: 3px solid var(--fxm-purple);
    outline-offset: 2px;
}
.app-header--conta .fixar-brand .fixar-logo,
.app-header--conta .fxm-brand--app .fxm-logo__simbolo {
    width: 28px;
}
.app-header--conta .fxm-brand--app .fxm-logo__texto {
    font-size: 17px;
}

/* O gatilho e o proprio avatar do menu, em tamanho de cabecalho: foto, ou as
   iniciais no mesmo lilas claro do item de perfil do dropdown. */
.conta-gatilho {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
}
.conta-gatilho .fd__menu-avatar {
    width: 36px;
    height: 36px;
    font-size: 13px;
}
.conta-gatilho[aria-expanded="true"] .fd__menu-avatar {
    box-shadow: 0 0 0 2px var(--fxm-white), 0 0 0 4px var(--fxm-purple-soft);
}
.conta-gatilho:focus-visible {
    outline: 3px solid var(--fxm-purple);
    outline-offset: 2px;
}
/* O centro do avatar fica a 19px da borda direita do envolucro (e nao a
   23,5px do icone do feed): o rabicho acompanha. */
.app-header--conta .fd__menu { right: -6px; }
.app-header--conta .fd__menu-rabicho { right: 17px; }

/* A tela em que o aluno esta, marcada no menu. */
.fd__menu-lista a[aria-current="page"] { background: var(--fxm-gray-100); }
.fd__menu-lista a[aria-current="page"] .fd__menu-icone { color: var(--fxm-purple); }

/* ===========================================================================
   Corpo das telas da conta: Configuracoes, Perfil, Editar perfil, Senha.

   Idioma do Desempenho: rotulo de secao em caixa alta, um painel azul claro
   com um numero de destaque so, atalhos como a lista do menu (os mesmos
   icones de traco) e campos brancos com anel roxo no foco. Mora aqui, e nao
   no `<style>` de cada tela, porque sao quatro telas -- copiadas, divergiriam
   no primeiro ajuste.
   =========================================================================== */
.conta-tela { display: grid; gap: 12px; width: 100%; max-width: none; }
.conta-tela .screen-title { margin-bottom: 6px; }
.conta-tela .alert-success, .conta-tela .alert-error { margin-bottom: 0; }
.conta-secao {
  margin: 12px 0 0; font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fxm-gray-500);
}

/* ---- Painel de destaque ---- */
.conta-painel {
  display: grid; gap: 4px; padding: 18px;
  border-radius: var(--fxm-radius-lg); background: var(--fxm-blue-soft);
}
.conta-painel__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.conta-painel__rotulo {
  margin: 0; font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fxm-purple-dark);
}
.conta-painel__linha { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.conta-painel__destaque {
  font-size: 40px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em;
  color: var(--fxm-gray-900); font-variant-numeric: tabular-nums;
}
.conta-painel__frase { font-size: 15px; font-weight: 700; color: var(--fxm-gray-900); }
.conta-painel__legenda { margin: 2px 0 0; font-size: 13.5px; color: var(--fxm-gray-700); }
.conta-painel__acao {
  flex: none; padding: 6px 12px; border-radius: 999px; background: var(--fxm-white);
  font-size: 13px; font-weight: 700; color: var(--fxm-purple); text-decoration: none;
}
.conta-painel__acao:hover { background: var(--fxm-purple-soft); }

/* ---- Lista de atalhos, em card ---- */
.conta-lista { display: grid; padding: 6px; }
.conta-item {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px;
  padding: 8px 10px; border: 0; border-radius: 12px; background: none;
  font: inherit; text-align: left; text-decoration: none; color: var(--fxm-gray-900); cursor: pointer;
}
.conta-item:hover, .conta-item:active { background: var(--fxm-gray-100); }
.conta-item + .conta-item { position: relative; }
.conta-item + .conta-item::before {
  content: ""; position: absolute; top: 0; left: 58px; right: 10px;
  border-top: 1px solid var(--fxm-gray-100);
}
.conta-item__icone {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px;
  border-radius: 10px; background: var(--fxm-purple-soft); color: var(--fxm-purple);
}
.conta-item__icone svg { width: 20px; height: 20px; }
.conta-item__texto { display: grid; flex: 1; min-width: 0; }
.conta-item__texto b { font-size: 14.5px; font-weight: 700; }
.conta-item__texto small {
  font-size: 13px; color: var(--fxm-gray-500);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conta-item__seta { flex: none; width: 18px; height: 18px; color: var(--fxm-gray-500); }
.conta-item--sair { color: var(--fxm-red); }
.conta-item--sair .conta-item__icone { background: var(--fxm-red-soft); color: var(--fxm-red); }
.conta-item--sair:hover, .conta-item--sair:active { background: var(--fxm-red-soft); }

/* ---- Formulario ---- */
.conta-form { display: grid; gap: 16px; padding: 16px; }
.conta-form .btn-form-submit { margin-top: 2px; }
.conta-tela .btn-form-submit:disabled {
  background: var(--fxm-gray-300); color: var(--fxm-gray-500); cursor: default;
}
.conta-campo { display: grid; gap: 6px; min-width: 0; }
.conta-campo > label { font-size: 13.5px; font-weight: 700; color: var(--fxm-gray-700); }
.conta-input {
  display: block; width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1.5px solid var(--fxm-gray-300); border-radius: 14px; background: var(--fxm-white);
  font: inherit; font-size: 15px; color: var(--fxm-gray-900); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.conta-input::placeholder { color: var(--fxm-gray-500); }
.conta-input:focus { border-color: var(--fxm-purple); box-shadow: 0 0 0 4px var(--fxm-purple-soft); }
.conta-campo--erro .conta-input { border-color: var(--fxm-red); }
.conta-campo__dica { margin: 0; font-size: 12.5px; color: var(--fxm-gray-500); }
.conta-campo__erro { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--fxm-red); }

/* Senha com "mostrar": o botao fica dentro da caixa, a direita. */
.conta-senha { position: relative; }
.conta-senha .conta-input { padding-right: 84px; }
.conta-senha button {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  padding: 8px 10px; border: 0; border-radius: 10px; background: none;
  font: inherit; font-size: 13px; font-weight: 700; color: var(--fxm-purple); cursor: pointer;
}
.conta-senha button:hover { background: var(--fxm-purple-soft); }

.conta-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- INSTRUCAO DE INSTALACAO ----------
   So aparece onde NAO da para instalar num clique: iPhone (o iOS nao tem API
   de instalacao) e Android sem o pedido nativo. E modal de proposito -- e uma
   instrucao para seguir agora, com o app em segundo plano, e nao um aviso de
   canto que se perde. */
.pwa-folha { position: fixed; inset: 0; z-index: 80; display: grid; place-items: end center;
  background: rgba(16, 24, 40, 0.45); padding: 16px; }
/* `display: grid` acima VENCE o atributo `hidden` (que so vale como
   `display: none` da folha de estilo do navegador). Sem esta linha a folha
   fica permanentemente na tela, cobrindo o feed, e o botao de fechar parece
   nao funcionar -- o JS esconde, o CSS mostra de novo. Mesmo par que
   `.fd__menu[hidden]` ja usa neste arquivo. */
.pwa-folha[hidden] { display: none; }
body.pwa-folha-aberta { overflow: hidden; }
.pwa-folha__painel {
  position: relative;
  width: 100%; max-width: 420px;
  padding: 20px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  border-radius: 18px 18px 14px 14px;
  background: var(--fxm-white, #fff);
  box-shadow: 0 -6px 30px rgba(16, 24, 40, 0.18);
}
.pwa-folha__titulo { margin: 0 0 6px; font-size: 17px; font-weight: 800; color: var(--fxm-gray-900, #101828); }
.pwa-folha__texto { margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--fxm-gray-700, #475467); }
.pwa-folha__passos { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.pwa-folha__passos li {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 14px; line-height: 1.45; color: var(--fxm-gray-900, #101828);
}
.pwa-folha__num {
  flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 50%; background: var(--fxm-purple, #5b2ee5); color: #fff;
  font-size: 12px; font-weight: 800;
}
.pwa-folha__icone { width: 18px; height: 18px; vertical-align: -3px; color: var(--fxm-blue, #0668fc); }
.pwa-folha__acoes { display: grid; gap: 8px; }
.pwa-folha__ok {
  min-height: 46px; border: 0; border-radius: 999px;
  background: var(--fxm-purple, #5b2ee5); color: #fff;
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.pwa-folha__nao {
  min-height: 38px; border: 0; background: none;
  font: inherit; font-size: 13px; color: var(--fxm-gray-500, #667085); cursor: pointer;
}
.pwa-folha__logo { display: grid; place-items: center; margin-bottom: 10px; }
.pwa-folha__logo img { display: block; }
.pwa-folha__titulo { text-align: center; }
.pwa-folha__texto { text-align: center; }
.pwa-folha__passos li span:last-child { flex: 1; }
.pwa-folha__x {
  position: absolute; top: 10px; right: 10px;
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: none;
  color: var(--fxm-gray-500, #667085); cursor: pointer;
}
.pwa-folha__x:hover { background: var(--fxm-gray-100, #f2f4f7); }
.pwa-folha__x svg { width: 20px; height: 20px; }
.pwa-folha__opcional {
  margin: 0 0 12px; font-size: 12.5px; line-height: 1.45;
  color: var(--fxm-gray-500, #667085); text-align: center;
}


/* ===========================================================================
   Perfil e Configuracoes no idioma do /edital/ e do /feed/.

   O que vem de la: cabecalho com rotulo roxo em caixa alta e titulo grande
   (`.edv-cabecalho`), cards brancos com linha fina e sombra curta
   (`.edv-resumo`, `.edv-disc`), o numero dentro de uma pastilha lilas e a
   SophIA falando num balao em vez de uma legenda solta (`.fd__sessao-fala`).
   As linhas de atalho continuam sendo `.conta-item` -- so a caixa em volta
   muda --, entao editar perfil e senha, que ainda usam `.app-card`, nao
   divergem no desenho da linha.
   =========================================================================== */
.tc-page { gap: 14px; padding: 6px 0 30px; }

.tc-cabecalho { padding: 0 2px 2px; }
.tc-cabecalho__eyebrow {
  margin: 0 0 5px; font-size: 10px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--fxm-purple);
}
.tc-cabecalho .screen-title {
  margin: 0 0 7px; font-size: clamp(27px, 7vw, 36px); font-weight: 800;
  line-height: 1.1; letter-spacing: -.025em; color: var(--fxm-gray-900);
}
.tc-cabecalho__contexto { margin: 0; font-size: 14px; line-height: 1.45; color: var(--fxm-gray-700); }

/* Rotulo de secao: o mesmo da tela antiga, um pouco mais perto do card. */
.tc-page .conta-secao { margin: 8px 2px -4px; }

.tc-card {
  min-width: 0;
  border: 1px solid rgba(55, 65, 95, .08);
  border-radius: 14px;
  background: var(--fxm-white);
  box-shadow: 0 4px 14px rgba(20, 25, 45, .06);
}
.tc-card.conta-lista { padding: 6px; }
.tc-card--sair { box-shadow: none; }

/* ---- Identidade (Perfil) ----
   O botao Editar fica no alto, fora da coluna do texto: centralizado, ele
   caia por cima do e-mail em tela estreita. A coluna do texto e
   `minmax(0, 1fr)` para que o selo e o e-mail encolham com reticencias em
   vez de empurrar o card para fora da tela. */
.tc-id { display: flex; align-items: center; gap: 14px; padding: 16px; }
.tc-id__foto { flex: none; display: grid; place-items: center; }
.tc-id__foto .fd__menu-avatar { width: 60px; height: 60px; font-size: 20px; }
.tc-id__texto { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; flex: 1; min-width: 0; }
.tc-id__nome {
  margin: 0; font-size: 17px; font-weight: 800; line-height: 1.25; color: var(--fxm-gray-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tc-id__email {
  font-size: 13px; color: var(--fxm-gray-500);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Editar como icone: o texto "Editar" roubava a largura que o nome precisa. */
.tc-btn-icone {
  flex: none; align-self: flex-start; display: grid; place-items: center; width: 40px; height: 40px;
  border: 1.5px solid var(--fxm-gray-300); border-radius: 50%; color: var(--fxm-purple);
}
.tc-btn-icone svg { width: 19px; height: 19px; }
.tc-btn-icone:hover { border-color: var(--fxm-purple); background: var(--fxm-gray-100); }
.tc-btn-icone:focus-visible { outline: 3px solid var(--fxm-blue-bright); outline-offset: 2px; }
.tc-chip {
  justify-self: start; display: inline-block; max-width: 100%; margin-top: 4px; padding: 3px 9px;
  border-radius: 999px; background: var(--fxm-gray-100);
  font-size: 11px; font-weight: 800; color: var(--fxm-gray-700);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tc-chip--roxo { background: var(--fxm-purple-soft); color: var(--fxm-purple-dark); }

/* Botao de contorno roxo: o `.edv-verif__btn` do edital. */
.tc-btn-contorno {
  flex: none; display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px;
  border: 1.5px solid var(--fxm-purple); border-radius: 999px; background: transparent;
  font: inherit; font-size: 12.5px; font-weight: 800; color: var(--fxm-purple);
  text-decoration: none; cursor: pointer;
}
.tc-btn-contorno:hover { background: var(--fxm-purple); color: var(--fxm-white); }
.tc-btn-contorno:focus-visible { outline: 3px solid var(--fxm-blue-bright); outline-offset: 2px; }

/* ---- Objetivo (Perfil) ---- */
.tc-objetivo { display: grid; gap: 14px; padding: 16px; }
.tc-objetivo__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tc-objetivo__nome {
  margin: 0; font-size: 16px; font-weight: 800; line-height: 1.3; color: var(--fxm-gray-900);
  overflow-wrap: anywhere;
}

/* Um numero so por card, dentro da pastilha lilas: o anel do edital, em
   quadrado porque aqui o numero nao e porcentagem. */
.tc-destaque { display: flex; align-items: center; gap: 14px; }
.tc-destaque__num {
  flex: none; display: grid; place-items: center; min-width: 64px; height: 64px; padding: 0 10px;
  border-radius: 16px; background: var(--fxm-purple-soft);
  font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--fxm-purple-dark);
  font-variant-numeric: tabular-nums;
}
.tc-destaque__texto { display: grid; gap: 2px; min-width: 0; }
.tc-destaque__rotulo {
  margin: 0; font-size: 10px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--fxm-purple);
}
.tc-destaque__titulo { margin: 0; font-size: 15px; font-weight: 800; line-height: 1.35; color: var(--fxm-gray-900); }
.tc-destaque__grande {
  margin-right: 2px; font-size: 26px; letter-spacing: -.02em; color: var(--fxm-gray-900);
  font-variant-numeric: tabular-nums;
}
.tc-destaque__sub { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--fxm-gray-700); }

/* Os atalhos do plano dentro do proprio card: o `.edv-praticar__btn`. */
.tc-acoes { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--fxm-gray-100); }
.tc-acao {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px;
  border: 1px solid var(--fxm-purple-soft); border-radius: 11px; background: #f7f7f7;
  font-size: 13px; font-weight: 750; color: var(--fxm-purple-dark); text-decoration: none;
}
.tc-acao svg { flex: none; width: 19px; height: 19px; }
.tc-acao__texto { display: grid; flex: 1; min-width: 0; }
.tc-acao__texto small {
  font-size: 12px; font-weight: 600; color: var(--fxm-gray-500);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tc-acao__seta { margin-left: auto; font-size: 18px; }
.tc-acao:hover { border-color: var(--fxm-purple); background: var(--fxm-purple-soft); }
.tc-acao:focus-visible { outline: 3px solid var(--fxm-blue-bright); outline-offset: 2px; }

/* ---- Ritmo (Configuracoes) ---- */
.tc-ritmo { display: grid; gap: 18px; padding: 16px; }
.tc-ritmo .btn-form-submit { margin-top: 0; border-radius: 999px; }

/* A SophIA explica o numero em uma frase, no balao do feed em miniatura:
   foto a esquerda, rabicho apontando para ela. */
.tc-sophia { display: flex; align-items: flex-end; gap: 8px; }
.tc-sophia__foto { flex: none; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.tc-sophia__balao {
  position: relative; flex: 1; min-width: 0; padding: 9px 13px;
  border-radius: 14px 14px 14px 4px; background: var(--fxm-gray-100);
}
.tc-sophia__nome {
  display: block; margin-bottom: 2px; font-size: 10px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fxm-purple);
}
.tc-sophia__balao p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--fxm-gray-900); }

@media (min-width: 700px) {
  .tc-page { gap: 18px; padding: 8px 0 36px; }
  .tc-id, .tc-objetivo, .tc-ritmo { padding: 18px 20px; }
}


/* ---- Pecas extras da base /configuracoes/, para as outras telas do aluno ----
   Edital, Desempenho, Dossie, Objetivo e Perfil seguem o mesmo idioma: estas
   pecas cobrem o que elas tem e Configuracoes nao tinha. */
.tc-page .btn-form-submit { border-radius: 999px; }
.tc-pad { display: grid; gap: 14px; padding: 16px; }
.tc-sophia + .tc-sophia { margin-top: -6px; }

/* Rotulo de secao com um controle a direita (ex.: "Recolher tudo"). */
.tc-secao-linha { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin: 8px 2px -4px; }
.tc-secao-linha .conta-secao { margin: 0; }

/* Botao pequeno em pilula cinza, secundario ao botao roxo cheio. */
.tc-btn-leve {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 13px;
  border: 1px solid var(--fxm-gray-300); border-radius: 999px; background: var(--fxm-white);
  font: inherit; font-size: 12.5px; font-weight: 700; color: var(--fxm-gray-700);
  text-decoration: none; cursor: pointer;
}
.tc-btn-leve:hover { border-color: var(--fxm-gray-500); color: var(--fxm-gray-900); }

/* Abas em controle segmentado: trilho cinza, aba ativa branca e elevada. */
.tc-abas {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px;
  border-radius: 999px; background: var(--fxm-gray-100);
}
.tc-abas [role="tab"] {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 8px;
  border: 0; border-radius: 999px; background: transparent;
  font: inherit; font-size: 14px; font-weight: 750; color: var(--fxm-gray-500); cursor: pointer;
}
.tc-abas [role="tab"][aria-selected="true"] {
  background: var(--fxm-white); color: var(--fxm-gray-900);
  box-shadow: 0 2px 8px rgba(20, 25, 45, .10);
}
.tc-abas [role="tab"]:focus-visible { outline: 3px solid var(--fxm-blue-bright); outline-offset: 2px; }
.tc-abas [role="tab"] span {
  display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px; background: var(--fxm-gray-100); font-size: 11px; font-variant-numeric: tabular-nums;
}

/* Estado vazio: o mesmo card, com a SophIA contando o que falta. */
.tc-vazio { display: grid; gap: 12px; padding: 16px; }
.tc-vazio h2 { margin: 0; font-size: 16px; font-weight: 800; color: var(--fxm-gray-900); }