@import url('https://fonts.googleapis.com/css2?family=Tenor+Sans&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --rosa: #E01949; --rosa-claro: #EE7D90; --fundo: #FCF1F3; --trilho: #F3DDE2; --linha: #F6E6E9;
  --preto: #0B0B0B; --cinza: #5E5559; --vinho: #8A0F2D; --verde: #1D5E3D; --laranja: #A3460A;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--preto); font-family: 'Plus Jakarta Sans', sans-serif;
  font-variant-numeric: tabular-nums; }
a { color: var(--rosa); }
button, input, select { font-family: inherit; }
.tenor { font-family: 'Tenor Sans', sans-serif; }
.cartao { background: #FFF; border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.rotulo { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--cinza); text-transform: uppercase; }
.miudo { font-size: 12px; color: var(--cinza); }
.barra { height: 10px; border-radius: 999px; background: var(--trilho); overflow: hidden; }
.barra > div { height: 100%; border-radius: 999px; background: var(--rosa); max-width: 100%; }
.entre { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.verde { color: var(--verde); } .laranja { color: var(--laranja); } .rosa { color: var(--rosa); }
.selo { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px;
  background: #E3F1E9; color: var(--verde); font-size: 12px; font-weight: 600; white-space: nowrap; }
.selo::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #1D7048; }
.selo.atrasado { background: #FBE9DC; color: var(--laranja); }
.selo.atrasado::before { background: var(--laranja); }
.abas { display: flex; gap: 6px; padding: 4px; background: var(--trilho); border-radius: 12px; flex-wrap: wrap; }
.abas button { flex-grow: 1; height: 44px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent;
  font-weight: 600; font-size: 14px; color: var(--cinza); cursor: pointer; }
.abas button.ativa { background: #FFF; font-weight: 700; color: var(--preto); }
.botao { height: 48px; padding: 0 28px; border: 0; border-radius: 12px; background: var(--rosa); color: #FFF;
  font-weight: 700; font-size: 15px; cursor: pointer; }
.botao.claro { background: #FFF; color: var(--preto); border: 1px solid #EBCFD5; }
.campo { height: 44px; width: 100%; padding: 0 12px; border: 1px solid #EBCFD5; border-radius: 10px;
  background: #FFF; font-weight: 600; font-size: 15px; color: var(--preto); }
.login { max-width: 380px; margin: 12vh auto; padding: 28px 24px; }
.erro { color: var(--vinho); font-weight: 600; font-size: 14px; min-height: 20px; }