/* ============================================================================
   Klinnect — área logada e formulários de conta
   ============================================================================ */
.barra-app { border-bottom: 1px solid var(--cinza-200); }
.menu-app a { padding: .5rem .2rem; border-bottom: 2px solid transparent; }
.menu-app a[aria-current="page"] { color: var(--roxo-escuro); border-bottom-color: var(--roxo); }
.menu-app .btn { padding: .55rem 1rem; font-size: var(--t-sm); }
@media (max-width: 760px) {
  .menu-app { gap: var(--e-3); font-size: var(--t-xs); flex-wrap: wrap; justify-content: flex-end; }
  .barra-app .container { min-height: 64px; padding-top: .5rem; padding-bottom: .5rem; }
}

/* ---------- páginas de conta (entrar, cadastro) ---------- */
.conta { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .conta { grid-template-columns: 1fr; } }
.conta-lado {
  background: linear-gradient(160deg, var(--noite) 0%, #2A1394 100%);
  color: #D9D3F7; padding: clamp(2rem, 5vw, 4rem); display: flex; flex-direction: column; justify-content: center;
}
.conta-lado h2 { color: #fff; max-width: 18ch; }
.conta-lado img { height: 34px; width: auto; margin-bottom: var(--e-6); }
.conta-lado ul { list-style: none; padding: 0; margin: var(--e-5) 0 0; }
.conta-lado li { position: relative; padding-left: 1.8rem; margin-bottom: .7rem; font-size: var(--t-sm); }
.conta-lado li::before { content: "✓"; position: absolute; left: 0; color: #9C8BFF; font-weight: 700; }
@media (max-width: 900px) { .conta-lado { display: none; } }
.conta-form { padding: clamp(2rem, 5vw, 4rem) clamp(1.2rem, 5vw, 3rem); display: flex; flex-direction: column; justify-content: center; }
.conta-form .caixa { width: 100%; max-width: 440px; margin: 0 auto; }
.conta-form .voltar { font-size: var(--t-sm); display: inline-block; margin-bottom: var(--e-5); }
.conta-form h1 { font-size: var(--t-2xl); margin-bottom: var(--e-2); }
.conta-form .sub { color: var(--texto-suave); margin-bottom: var(--e-5); }

/* ---------- escolha do tipo de conta ---------- */
.escolha { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); margin-bottom: var(--e-5); }
.escolha label {
  border: 1.5px solid var(--cinza-300); border-radius: var(--r-md); padding: var(--e-3);
  cursor: pointer; text-align: center; font-size: var(--t-sm); font-weight: 600;
}
.escolha input { position: absolute; opacity: 0; pointer-events: none; }
.escolha input:checked + span { color: var(--roxo-escuro); }
.escolha label:has(input:checked) { border-color: var(--roxo); background: var(--roxo-suave); }
.escolha label small { display: block; font-weight: 400; color: var(--texto-suave); margin-top: .2rem; }

/* ---------- formulários maiores ---------- */
.form-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--e-4); }
@media (max-width: 700px) { .form-grade { grid-template-columns: 1fr; } }
.form-grade .largo { grid-column: 1 / -1; }
.caixa-form { background: #fff; border: 1px solid var(--cinza-200); border-radius: var(--r-lg); padding: var(--e-5); margin-bottom: var(--e-5); box-shadow: var(--sombra-1); }
.caixa-form > h2 { font-size: var(--t-lg); margin-bottom: var(--e-1); }
.caixa-form > .sub { color: var(--texto-suave); font-size: var(--t-sm); margin-bottom: var(--e-5); }
.opcoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.opcoes label {
  border: 1.5px solid var(--cinza-300); border-radius: var(--r-full); padding: .45rem .9rem;
  font-size: var(--t-sm); cursor: pointer; user-select: none;
}
.opcoes input { position: absolute; opacity: 0; pointer-events: none; }
.opcoes label:has(input:checked) { border-color: var(--roxo); background: var(--roxo-suave); color: var(--roxo-escuro); font-weight: 600; }
.barra-salvar {
  position: sticky; bottom: 0; background: rgba(255,255,255,.95); backdrop-filter: blur(6px);
  border-top: 1px solid var(--cinza-200); padding: var(--e-3) 0; margin-top: var(--e-5);
  display: flex; gap: var(--e-3); align-items: center; flex-wrap: wrap;
}
.barra-salvar .estado { font-size: var(--t-sm); color: var(--texto-suave); }

/* ---------- painel de completude ---------- */
.completude { display: flex; align-items: center; gap: var(--e-3); font-size: var(--t-sm); }
.completude .trilho { flex: 1; height: 8px; border-radius: var(--r-full); background: var(--cinza-200); overflow: hidden; min-width: 120px; }
.completude .barra { height: 100%; background: var(--roxo); border-radius: var(--r-full); transition: width .4s ease; }

.pagina { padding: var(--e-6) 0 var(--e-8); }
.pagina > .container { max-width: 900px; }
.titulo-pagina { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap; margin-bottom: var(--e-5); }
.titulo-pagina h1 { font-size: var(--t-2xl); margin: 0 0 var(--e-1); }
.titulo-pagina p { color: var(--texto-suave); margin: 0; font-size: var(--t-sm); }
.carregando { color: var(--texto-suave); font-size: var(--t-sm); padding: var(--e-6) 0; text-align: center; }