/* =============================================================================
   PROFILE — CSS da tela. Medidas em px CSS para a viewport de 430x932.
   Tokens globais em css/app.css; os tokens NOVOS desta tela ficam abaixo.

   Geometria (frames 21 e 23; y = coordenada do DOCUMENTO rolavel):

       0   ->  59   .pf__safe    faixa #1441C1 (a .safe-top do app pinta por cima)
       59  -> 192   .pf__header  header #085DE6, altura 133, cantos retos
       192 -> ...   .pf__main    corpo #F0F0F0 (a <section> pinta o fundo)

   A carteirinha comeca em y=176 (sobrepoe 16 px do header) e tem altura
   201 (recolhida) -> 372 (expandida). O delta de 171 px empurra TUDO que vem
   abaixo dela; isso e feito por uma unica variavel animada `--p` (0..1):

       --shift: calc(171px * var(--p))

   `--p` e registrada com @property para poder ser animada em 300 ms; os
   elementos que existem nos dois estados interpolam `top` via calc(), e os que
   so existem no estado expandido entram por opacidade (`.pcard__x`). Sem
   suporte a @property o valor simplesmente troca de uma vez — o layout final e
   o mesmo, so nao ha animacao.
   ============================================================================= */

@property --p {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

:root {
  /* --- tokens NOVOS, exclusivos do Perfil (medidos nos frames 21 e 23) ----- */
  --card-label:   #D2D5DC;              /* labels da carteirinha (13 px 600) — medido #CBCDD3..#D5D5D7 */
  --card-dim:     #D5D5D5;              /* valor "Dez 2026" (15 px 700), cinza-claro e nao branco */
  --card-rule-1:  rgba(255,255,255,.775);  /* 1a divisoria da carteirinha expandida (medido #C6CEDC) */
  --card-rule-2:  rgba(255,255,255,.13);   /* 2a e 3a divisorias (medido #254575 / #1A365D) */
  --avatar-bg:    #121212;              /* circulo do avatar (53 px) */
  --star-ink:     #46474B;              /* estrela em contorno de "Conquistas e recompensas" */
  --achv-ink:     #171717;              /* texto de "Conquistas e recompensas" e "Minha conta" */
  --list-ink:     #212121;              /* itens da lista do Perfil */
  --dur-expand:   300ms;                /* animacao de expansao da carteirinha */
  --ease-expand:  cubic-bezier(.4,0,.2,1);  /* o frame 22 (inicio da transicao) e quase
                                              igual ao 21 => a curva NAO e front-loaded */
}

/* ============================== Tela / raiz =============================== */

.screen[data-screen="profile"] {
  background: var(--bg-profile);
}

.pf {
  --p: 0;
  --shift: calc(171px * var(--p));
  position: relative;
  transition: --p var(--dur-expand) var(--ease-expand);
}

/* Reset instantaneo (voltar para a tela ja expandida) e reduced-motion. */
.pf.is-instant { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .pf { transition: none; }
}

/* ================================ Header ================================== */
/* AVISO do esqueleto: a faixa azul de 59 px e pintada AQUI DENTRO da <section>
   — durante o slide a tela que entra vai a z-index 6 e nao pode depender da
   .safe-top do app. */
.pf__safe {
  height: var(--safe-top);
  background: var(--blue-splash);
}

.pf__header {
  position: relative;
  height: 133px;                 /* 59 -> 192 */
  background: var(--blue-primary);
}

/* Chevron "‹" sem haste: tinta 8,7 x 15 em (21,3 / 78). Area de toque 44x44. */
.pf__back {
  position: absolute;
  left: 3.6px;
  top: 4.5px;                    /* 59 + 4,5 + 22 - 7,5 = 78 */
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--white);
}
.pf__back svg { width: 8.7px; height: 15px; }

/* "Perfil": 20 px humanista (Inter) 500 — NAO Montserrat. Baseline em y=93. */
.pf__title {
  position: absolute;
  left: 0;
  right: 0;
  top: 16.7px;                   /* 59 + 16,7 = 75,7 -> topo da caixa de linha */
  font: 500 20px/20px var(--font-ui);
  color: var(--white);
  text-align: center;
  letter-spacing: -.1px;
  padding-left: 5px;             /* o titulo do frame esta 2,5 px a direita do centro */
  /* CRITICO: a caixa do <h1> vai de x=0 a x=430 e cobre INTEIRO o glifo do "‹"
     (.pf__back, 44x44 em 3,6/63,5). Como os dois sao posicionados e o titulo vem
     depois no DOM, ele ganhava o hit-test e um toque no centro do chevron nao
     navegava (45 % da area do botao morta). O <h1> nao e interativo: sai do
     hit-test. Nao muda um pixel do desenho. */
  pointer-events: none;
}

/* Logo Estacio em contorno branco vazado: 112,3 x 31,7 em (159, 128). */
.pf__logo {
  position: absolute;
  left: 158px;
  top: 69px;                     /* 59 + 69 = 128 */
  width: auto;
  height: 31.7px;
  pointer-events: none;          /* mesmo motivo do .pf__title: decorativo e absoluto
                                    dentro do header — hoje nao colide com o "‹"
                                    (y=128..159,7 vs botao ate 107,5), mas em 360 px
                                    ele e centrado por transform e nao ha razao para
                                    disputar hit-test com nada. */
}
.pf__logo--inline { display: block; width: 114.3px; }
.pf__logo--inline svg { width: 100%; height: 31.7px; }

/* ================================= Corpo ================================== */
/* Tudo posicionado em absoluto a partir de y=192; o `--shift` da carteirinha
   empurra os blocos de baixo exatamente 171 px (medido entre os frames 21/23). */
.pf__main {
  position: relative;
  height: calc(706px + 159px * var(--p));   /* 192+706 = 898 (recolhida) / 1057 (expandida) */
}

/* ============================== Carteirinha =============================== */
/* Caixa externa 16..414 x 176..(176+H), raio 24, SEM sombra. A borda dupla de
   ~3,4 px em dois aneis de #A7C7F7 e desenhada por `.pcard__skin` (abaixo). */
.pcard {
  position: absolute;
  left: 16px;
  top: -16px;                    /* 192 - 16 = 176 */
  width: 398px;
  height: calc(201px + 171px * var(--p));
  border-radius: 24px;
  background: var(--card-gradient);
  overflow: hidden;              /* esconde o conteudo do estado expandido enquanto o card e baixo */
  color: var(--white);
}
/* Os quatro limites do anel duplo sao pintados como retangulos arredondados
   EMPILHADOS (nada de `border`: o Chromium arredonda larguras fracionarias de
   borda para px CSS inteiros). Cada camada e um preenchimento com inset e raio
   proprios. RECALIBRADOS (Achado 3 da revisao) contra as duas colunas medidas no
   frame 21 — a reta do topo (x=215) e o canto (x=24):

                        reta (x=215)         canto (x=24)
     L1 inset 0    r 24   externo   176,0     externo        182,1  (ref 182,0)
     L2 inset 1,7  r 21,5 fresta    177,7     fresta abre    184,0  (ref 184,0)
     L3 inset 2    r 22,2 anel int. 178,0     fresta fecha   185,0  (ref 185,0)
     L4 inset 3,7  r 21   face      179,7     face           188,0  (ref 188,0)

   Como L3 tem raio MAIOR que L2, a fresta fica em 0,3 px nas retas e se abre
   para 1,0 px nos cantos, exatamente como no app.

   O que mudou nesta rodada: L4 de inset 3,35 -> 3,7 (o anel media 3,0-3,35 px
   contra os 3,3-3,7 do frame, e o canto fechava 2,0 px cedo demais) e L3 de
   raio 22,6 -> 22,2 (a fresta do canto media 1,27 px contra 1,0 do frame).
   Aritmetica do canto, para quem for recalibrar: com centro em (16+i+r, 176+i+r)
   e raio r, a camada cruza a coluna x=24 em y = 176+i+r - sqrt(r^2 - (i+r-8)^2). */
.pcard__skin {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: var(--card-border);
  pointer-events: none;
}
.pcard__skin::before,
.pcard__skin::after {
  content: '';
  position: absolute;
  display: block;
}
.pcard__skin::before { inset: 1.7px; border-radius: 21.5px; background: var(--card-gradient); }
.pcard__skin-in      { position: absolute; inset: 2px;  border-radius: 22.2px; background: var(--card-border); }
.pcard__skin::after  { inset: 3.7px; border-radius: 21px; background: var(--card-gradient); }

/* --- avatar 53 px + iniciais 21 px 600 ---------------------------------- */
.pcard__avatar {
  position: absolute;
  left: 21.3px;                  /* 16 + 21,3 = 37,3 */
  top: calc(21.3px + 8.7px * var(--p));   /* 197,3 -> 206 */
  width: 53px;
  height: 53px;
  border-radius: 50%;
  background: var(--avatar-bg);
  display: grid;
  place-items: center;
  font: 600 21px/53px var(--font-ui);
  letter-spacing: .2px;
}

/* --- nome: 19 px Montserrat 400 / lh 24, 2 linhas, x=110 ----------------- */
.pcard__name {
  position: absolute;
  left: 92.3px;                  /* 16 + 92,3 = 108,3 (tinta do D cai em x=110,3) */
  top: 19.5px;                   /* cap-top da 1a linha em y=201 */
  /* Antes: 302px fixos, que em 430 terminavam em x=410,3 — a 0,3 px da face da
     carteirinha (que comeca em 3,7 do bordo). A mesma formula que a media query
     ja usava abaixo de 430 (100% - 106) deixa 10,0 px de respiro do anel em
     TODA a faixa 360..430. Conferido em 430: a quebra de linha e identica nos
     quatro perfis (2 linhas em daiane/alexandre, 1 em chen/dominick, com os
     mesmos rects de 279,8 / 280,3 / 146,2 / 176,0 px). */
  width: calc(100% - 106px);
  font: 400 19px/24px var(--font-display);
  letter-spacing: -.55px;        /* Montserrat e mais larga que a SF Pro: casa os 277 px medidos */
  color: var(--white);
}

/* --- badge ATIVO 52x24 raio 4 (so no estado expandido) ------------------- */
.pcard__badge {
  position: absolute;
  left: 92.3px;                  /* 16 + 92,3 = 108,3 */
  top: 75.3px;                   /* 176 + 75,3 = 251,3 */
  width: 51.7px;
  height: 24px;
  border-radius: 4px;
  background: var(--green-ativo);
  color: var(--green-ativo-ink);
  font: 500 13px/24px var(--font-ui);
  text-align: center;
  letter-spacing: -.1px;
}

/* --- divisorias internas ------------------------------------------------- */
.pcard__rule {
  position: absolute;
  height: 1px;
  display: block;
}
.pcard__rule--1 { left: 4px;   width: 390.7px; top: 110px;   background: var(--card-rule-1); }
.pcard__rule--2 { left: 3.7px; width: 390.6px; top: 162.3px; background: var(--card-rule-2); }
/* BUG DO APP REAL, reproduzido de proposito: a 3a divisoria para em x=398 e
   ATRAVESSA o valor de "Campus" (frame 23, y=477). */
.pcard__rule--3 { left: 3.7px; width: 378.3px; top: 301px;   background: var(--card-rule-2); }

/* --- labels e valores ---------------------------------------------------- */
.pcard__lb {
  position: absolute;
  font: 600 13px/13px var(--font-ui);
  color: var(--card-label);
  letter-spacing: -.5px;         /* compensa a largura maior da Inter vs SF Pro */
  white-space: nowrap;
}
.pcard__vl {
  position: absolute;
  font: 400 15px/15px var(--font-ui);
  color: var(--white);
  letter-spacing: -.2px;
  white-space: nowrap;
}

/* Colunas / linhas medidas (recolhida -> expandida). */
/* Campos com texto corrido precisam de mais compensacao que os numericos. */
.pcard__vl--curso,
.pcard__vl--tipo,
.pcard__vl--modelo,
.pcard__vl--campus { letter-spacing: -.55px; }

.pcard__lb--cpf    { left: 19.7px;  top: 125.5px; }
.pcard__lb--nasc   { left: 142.3px; top: 125.5px; }
.pcard__vl--cpf    { left: 20px;    top: 144px;   }
.pcard__vl--nasc   { left: 142.7px; top: 144px;   }

.pcard__lb--curso  { left: 20px;    top: calc(95.2px + 83.3px * var(--p)); }
.pcard__vl--curso  { left: 19.4px;  top: calc(113.3px + 82.7px * var(--p)); }

/* Par "Tipo de curso" / "Modelo de ensino": grade 2x2 ancorada em (19,7 / 228,2).
   A 1a coluna tem 88,6 px + 8 de gap = 96,6 -> a 2a comeca em x=132,3, como no
   frame (essa coluna NAO alinha com a de "Nascimento", em 158,3), mas cresce
   quando o valor e mais longo, em vez de sobrepor. */
.pcard__pair {
  position: absolute;
  display: grid;
  align-items: start;
  column-gap: 8px;
}
.pcard__pair > * { position: static; }
.pcard__pair--curso {
  left: 19.7px;
  top: 228.2px;
  grid-template-columns: minmax(88.6px, max-content) max-content;
  grid-template-rows: 18.1px auto;
}

.pcard__lb--campus { left: 19.7px;  top: 278.5px; }
.pcard__vl--campus { left: 19.4px;  top: 296.3px; }

.pcard__lb--val    { left: 19.7px;  top: calc(148.9px + 171.6px * var(--p)); }
.pcard__lb--mat    { left: 232.7px; top: calc(148.9px + 171.6px * var(--p)); }
.pcard__vl--val    { left: 20px;    top: calc(167.3px + 171.4px * var(--p)); font-weight: 700; color: var(--card-dim); }
.pcard__vl--mat    { left: 233px;   top: calc(167.3px + 171.4px * var(--p)); }

/* Elementos que so existem no estado expandido. A opacidade entra na SEGUNDA
   metade da animacao (0 ate p=0,3; cheia em p=0,86) para nao cruzar com os
   campos que ainda estao deslizando para a posicao final. */
.pcard__x { opacity: calc(var(--p) * 1.8 - .55); }

/* --- botao copiar matricula (content_copy 15 px em 374,3 / 334) ---------- */
.pcard__copy {
  position: absolute;
  left: 358.3px;                 /* 16 + 358,3 = 374,3 */
  top: calc(158px + 171.7px * var(--p));
  width: 15px;
  height: 15px;
  color: var(--white);
}
.pcard__copy::before {           /* alvo de toque de 39 px sem mexer no desenho */
  content: '';
  position: absolute;
  inset: -12px;
}
.pcard__copy svg { width: 15px; height: 15px; }
.pcard__copy:active { opacity: .7; }
.pcard__copy.is-copied { color: var(--green-ativo-ink); }

/* ===================== Link Expandir / Recolher =========================== */
/* Grupo icone+texto centrado (x=137..293,3), topo em y=408 (+31 do card). */
.pf__toggle {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(216px + var(--shift));      /* 192 + 216 = 408 */
  height: 14.3px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--blue-primary);
}
/* Alvo de toque: o grupo tem so 14,3 px de altura (a tinta). O ::before estende a
   area sensivel para 44,3 px sem mexer no desenho — mesma solucao ja usada em
   .pcard__copy. Nada ocupa a faixa: a carteirinha recolhida termina em y=377 e
   "Minha conta" comeca em y=466; o alvo vai de y=393 a y=437. */
.pf__toggle::before {
  content: '';
  position: absolute;
  inset: -15px 0;
}
.pf__toggle:active { opacity: .7; }
.pf__toggle-ico { display: block; width: 13.7px; height: 13.7px; }
.pf__toggle-ico svg { width: 13.7px; height: 13.7px; }
.pf__toggle-txt {
  position: relative;
  top: -1px;
  font: 500 15px/15px var(--font-ui);
  letter-spacing: -.58px;               /* casa os 132,6 px medidos no frame */
  white-space: nowrap;
}

/* ============================= "Minha conta" ============================== */
.pf__section {
  position: absolute;
  left: 16px;                           /* a tinta do M cai em x=18 */
  top: calc(272.5px + var(--shift));    /* cap-top em y=466 */
  font: 400 18px/18px var(--font-display);
  color: var(--achv-ink);
  letter-spacing: -.1px;
}

/* ==================== Card "Conquistas e recompensas" ===================== */
/* 16..414 x 505..553, raio 8, borda 1 px #A7C7F7, SEM sombra. A borda e um
   inset box-shadow para que o bloco de posicionamento dos filhos coincida
   com a caixa externa do card. */
.pf__achv {
  position: absolute;
  left: 16px;
  top: calc(313px + var(--shift));      /* 192 + 313 = 505 */
  width: 398px;
  height: 48px;
  border-radius: 8px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--tile-border);
  text-align: left;
}
.pf__achv:active { opacity: .7; }
.pf__achv-sq {
  position: absolute;
  left: 11px;                    /* 16 + 11 = 27 */
  top: 7.7px;
  width: 28px;
  height: 28px;
  border-radius: 4.5px;
  background: var(--blue-pill);
  display: grid;
  place-items: center;
  color: var(--star-ink);
}
.pf__achv-sq svg { width: 12px; height: 12px; }
.pf__achv-txt {
  position: absolute;
  left: 47.1px;                  /* 16 + 47,1 -> tinta do C em x=63,7 */
  top: 15.7px;
  font: 500 15px/15px var(--font-ui);
  color: var(--achv-ink);
  letter-spacing: -.57px;
}

/* ========================= Card da lista (4 linhas) ======================= */
/* 16..414 x 565..738, borda 1 px #CCCCCC, raio 8, linhas 44/40/40/44 com
   divisorias de 1 px inset 13 (x=29..401). */
.pf__list {
  position: absolute;
  left: 16px;
  top: calc(373px + var(--shift));      /* 192 + 373 = 565 */
  width: 398px;
  height: 173px;
  border-radius: 8px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--list-border);
}
.pf__list li { position: static; }
.pf__list button {
  position: absolute;
  left: 20.7px;                  /* 16 + 20,7 -> tinta em x=38 */
  font: 400 15px/15px var(--font-ui);
  color: var(--list-ink);
  letter-spacing: -.4px;
  text-align: left;
}
.pf__list button:active { opacity: .7; }
.pf__list li:nth-child(1) button { top: 17px; }
.pf__list li:nth-child(2) button { top: 57.2px; }
.pf__list li:nth-child(3) button { top: 98.6px; }
.pf__list li:nth-child(4) button { top: 139.6px; }
.pf__list li:nth-child(-n+3)::after {
  content: '';
  position: absolute;
  left: 13px;                    /* 16 + 13 = 29 ... 401 (inset de 13 px dos dois lados) */
  right: 13px;
  height: 1px;
  background: var(--divider);
}
.pf__list li:nth-child(1)::after { top: 44.7px; }
.pf__list li:nth-child(2)::after { top: 85.7px; }
.pf__list li:nth-child(3)::after { top: 126.7px; }

/* ============================ "Sair" + versao ============================= */
/* Alvo de toque: o botão media 430 x 15 px (`left:0; right:0`) — um toque em QUALQUER
   ponto da linha deslogava, e na vertical sobravam 15 px contra os 44 recomendados.
   `width: max-content` centrado no mesmo eixo deixa a caixa do tamanho da tinta (a
   posição visual não muda: `text-align: center` sobre 0..430 já punha o "Sair" em
   x≈215) e o ::before de `inset: -15px -24px` dá um alvo de ~74 x 45 px — mesma
   técnica de .pf__toggle e .pcard__copy. Medido no browser: tinta em x=201,3..228,7
   (centro 215, igual a antes) e alvo em x=177,3..252,7 / y=772,3..817,3. Nada ocupa
   essa folga: a lista termina em y=738 e "Versão do aplicativo" começa em y=837,4. */
.pf__logout {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  top: calc(595.3px + var(--shift));    /* cap-top em y=789,3 */
  font: 500 15px/15px var(--font-ui);
  color: var(--blue-primary);
  text-align: center;
  letter-spacing: -.1px;
}
.pf__logout::before {
  content: '';
  position: absolute;
  inset: -15px -24px;
}
.pf__logout:active { opacity: .7; }

.pf__version {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(645.4px + var(--shift));    /* cap-top em y=838,3 */
  font: 400 14px/14px var(--font-ui);
  color: var(--tile-label);
  text-align: center;
  letter-spacing: 0;
}

/* ============================ Fluido 360..430 ============================= */
/* Larguras/posicoes sao medidas para 430 px. Abaixo disso a tela e escalada
   horizontalmente pelos mesmos 16 px de margem, sem overflow. */
@media (max-width: 429px) {
  .pcard,
  .pf__achv,
  .pf__list { width: calc(100% - 32px); }
  .pcard__copy { left: auto; right: 24.7px; }
  .pcard__rule--1 { width: calc(100% - 8px); }
  .pcard__rule--2 { width: calc(100% - 7.4px); }
  .pcard__rule--3 { width: calc(100% - 19.7px); }
  /* A coluna da matricula fica ancorada na MESMA referencia do icone de copiar
     (a borda direita do card), e nao em % da largura. Misturar `%` com
     `right: <px>` fazia a folga encolher junto com o card: +12,3 px em 430,
     -4,5 em 390 e -16,9 em 360, com o `content_copy` em cima dos digitos
     "1523". Com `100% - <px>` a folga vira constante em toda a faixa 360..430:
       icone:  left = W - 24,7 - 15   |  valor: left = W - 165
       folga = (W - 39,7) - (W - 165 + 113) = 12,3 px, independente de W.
     Em 430 esta media query nao se aplica e os valores absolutos de referencia
     (232,7 / 233) continuam valendo — 398 - 165,3 = 232,7 e 398 - 165 = 233,
     ou seja, a regra abaixo e a continuacao exata da medida do frame. */
  .pcard__lb--mat { left: calc(100% - 165.3px); }
  .pcard__vl--mat { left: calc(100% - 165px); }
  .pf__logo { left: auto; right: 50%; transform: translateX(50%); }
}