/* ============================================================================
   Klinnect — hub de escolha de porta (entrar.html / cadastro.html) e etiquetas
   de lado das portas. Carregado só nas páginas que usam. Reaproveita as
   variáveis de base.css; não repete o que já existe em app.css.
   ============================================================================ */

/* ---------- hub: dois cartões de escolha ---------- */
.portas {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4);
  margin: var(--e-5) 0;
}
@media (max-width: 640px) { .portas { grid-template-columns: 1fr; } }
/* três portas (cadastro): uma embaixo da outra, mais baixas */
.portas-3 { grid-template-columns: 1fr; gap: var(--e-3); }
.portas-3 .porta-cartao { padding: var(--e-4) var(--e-5); }

.porta-cartao {
  display: flex; flex-direction: column; gap: var(--e-2);
  border: 1.5px solid var(--cinza-300); border-radius: var(--r-lg);
  padding: var(--e-5); text-decoration: none; color: var(--texto);
  background: #fff; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.porta-cartao:hover { border-color: var(--roxo); box-shadow: var(--sombra-2); transform: translateY(-2px); }
.porta-cartao:focus-visible { outline: 3px solid var(--roxo-claro); outline-offset: 2px; }
.porta-cartao .icone { color: var(--roxo); }
.porta-cartao .icone svg { width: 32px; height: 32px; }
.porta-cartao h2 { font-size: var(--t-lg); margin: 0; }
.porta-cartao .sub { color: var(--texto-suave); font-size: var(--t-sm); margin: 0; }
.porta-cartao .leva { margin: 0; font-size: var(--t-xs); font-weight: 600; color: var(--roxo-escuro); }

.portas-rodape { font-size: var(--t-sm); color: var(--texto-suave); margin-top: var(--e-4); }

/* ---------- etiqueta de lado no painel lateral das portas ---------- */
.lado-etiqueta {
  display: inline-block; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #C9BEF9;
  border: 1px solid rgba(255,255,255,.3); border-radius: var(--r-full);
  padding: .25rem .75rem; margin-bottom: var(--e-4);
}

/* Gradiente próprio de cada porta, sobrepondo o padrão de .conta-lado. */
.conta-lado.lado-clinica { background: linear-gradient(160deg, var(--noite) 0%, var(--noite-2) 100%); }
.conta-lado.lado-profissional { background: linear-gradient(160deg, var(--roxo) 0%, var(--noite-2) 100%); }