/* Páginas de formulário e texto: entrar, primeiro acesso, minhas notas, como funciona. */
body.pagina { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; background: var(--fundo); }

.pagina-topo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4); background: var(--superficie); border-bottom: 1px solid var(--linha);
}
.pagina-topo .logo { --logo-w: 128px; }
.pagina-links { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.link-simples {
  display: inline-flex; align-items: center; min-height: var(--alvo-minimo); padding: 0 var(--esp-2);
  color: var(--texto); font-weight: 600; text-underline-offset: 3px;
}

.pagina-main { flex: 1; display: grid; align-content: start; justify-items: center; gap: var(--esp-4); padding: var(--esp-5) var(--esp-4) var(--esp-7); }
.cartao-form, .cartao-texto {
  width: min(100%, 520px);
  background: var(--cartao-fundo); border: 1px solid var(--cartao-borda); border-radius: var(--raio-3);
  box-shadow: var(--cartao-sombra); padding: var(--esp-6) var(--esp-5);
  display: grid; gap: var(--esp-4); position: relative; overflow: hidden;
}
.cartao-form::before, .cartao-texto::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 6px;
  background: linear-gradient(90deg, var(--marinho-500), var(--azul-circulo-500) 45%, var(--verde-500) 75%, var(--verde-300));
}
.cartao-texto { width: min(100%, 760px); }
.cartao-form h1, .cartao-texto h1 { font-size: var(--tam-5); line-height: 1.15; color: var(--texto-forte); letter-spacing: -0.01em; }
.cartao-texto h2 { font-size: var(--tam-4); color: var(--texto-forte); margin-top: var(--esp-3); }
.cartao-texto p, .cartao-texto li { max-width: 68ch; }
.cartao-texto ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--esp-2); }
.sub { color: var(--texto-suave); }

.formulario { display: grid; gap: var(--esp-4); }
.formulario label { display: grid; gap: 6px; font-weight: 600; color: var(--texto-forte); }
.formulario .dica { font-weight: 400; font-size: var(--tam-1); color: var(--texto-suave); }
.formulario .botao { width: 100%; min-height: 52px; font-size: var(--tam-3); }
.campo-pin { letter-spacing: 0.35em; font-size: 1.5rem; text-align: center; font-family: var(--fonte-numero); }
.formulario .mostrar-senha { display: inline-flex; }  /* vence ".formulario label { display: grid }": caixa e texto na mesma linha */
.mostrar-senha { display: inline-flex; flex-direction: row !important; align-items: center; gap: var(--esp-2) !important; font-weight: 500 !important; min-height: var(--alvo-minimo); }
.mostrar-senha input { width: 22px; height: 22px; margin: 0; }

.ajuda-viva {
  padding: var(--esp-3); border-radius: var(--raio-1); font-size: var(--tam-2); font-weight: 600;
  background: var(--superficie-suave); color: var(--texto-forte);
}
.ajuda-viva[data-ok="true"] { background: var(--positivo-fundo); color: var(--positivo-texto); }

.msg-form {
  padding: var(--esp-3) var(--esp-4); border-radius: var(--raio-1); font-weight: 600;
  background: var(--negativo-tom); color: var(--coral-700); border: 1px solid var(--coral-700);
}
.msg-form--ok { background: var(--positivo-fundo); color: var(--positivo-texto); border-color: var(--positivo-borda); }

/* ---- Minhas notas ---- */
.meses-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-3); }
.mes-cartao { border: 1px solid var(--linha); border-radius: var(--raio-2); background: var(--superficie); padding: var(--esp-4); display: grid; gap: var(--esp-3); }
.mes-cabeca { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--esp-2); }
.mes-cabeca h2 { margin: 0; font-size: var(--tam-3); }
.mes-total { font-size: 1.75rem; font-weight: 700; color: var(--texto-forte); }
.mes-total[data-sinal="neg"] { color: var(--negativo-tinta); }
.mes-aguardando { color: var(--texto-suave); font-weight: 600; }
.mes-notas { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; background: var(--linha); border: 1px solid var(--linha); border-radius: var(--raio-1); overflow: hidden; }
.mes-notas li { display: flex; justify-content: space-between; gap: var(--esp-3); background: var(--superficie); padding: var(--esp-2) var(--esp-3); align-items: center; }
.nota-valor {
  min-width: 3.2ch; text-align: center; padding: 0 var(--esp-2); border-radius: 6px; font-weight: 700; font-family: var(--fonte-numero);
}
.nota-valor[data-v="1"] { background: var(--positivo-fundo); color: var(--positivo-texto); }
.nota-valor[data-v="0"] { background: var(--neutra-fundo); color: var(--neutra-texto); }
.nota-valor[data-v="-1"] { background: var(--negativo-fundo); color: var(--negativo-texto); }
.nota-valor[data-v="vazio"] { border: 1px dashed var(--borda-controle); color: var(--texto-suave); font-weight: 500; }
.regua-nota { font-size: var(--tam-1); color: var(--texto-suave); }

.rodape-pagina { text-align: center; padding: var(--esp-4); color: var(--texto-suave); font-size: var(--tam-1); }

@media (max-width: 480px) {
  .cartao-form, .cartao-texto { padding: var(--esp-5) var(--esp-4); }
}

.cartao-largura { width: min(100%, 520px); }
.cartao-largura:empty { display: none; }
.regua-corpo { display: grid; gap: var(--esp-3); margin-top: var(--esp-3); }
.regua-corpo h3 { margin: 0; font-size: var(--tam-2); color: var(--texto-forte); }
#titulo-notas:focus { outline: none; }

/* Listas de Minhas notas: sem o recuo das listas de texto (a regra .cartao-texto ul é mais específica) */
.cartao-texto .meses-lista, .cartao-texto .mes-notas { padding: 0; margin: 0; list-style: none; }
.cartao-texto .mes-notas li, .cartao-texto .meses-lista > li { max-width: none; }