/* Clerk conserva su tarjeta oficial; estos estilos cubren sus estados y el aviso privado. */
.access { width: 100%; min-width: 0; max-width: 25rem; justify-self: end; }
.sign-in { width: 100%; min-width: 0; }

.auth-status, .session {
  padding: 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  box-shadow: 0 24px 64px -16px var(--color-shadow), 0 2px 8px var(--color-shadow-close);
}

.auth-status { color: var(--color-text-secondary); font-size: 0.9375rem; }
.auth-status p { margin: 0 0 1rem; }
.auth-status p:last-child { margin-bottom: 0; }
.auth-status.is-error { color: var(--color-error); }

.private-access {
  margin: 1.5rem 0 0;
  padding-inline: 0.5rem;
  color: var(--color-presentation-secondary);
  font-size: 0.8125rem;
  line-height: 1.75;
}

.private-access a { color: var(--color-presentation-text); }

.session h2 {
  margin: 0 0 1.75rem;
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.03em;
}

.user-name { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.user-email {
  margin: 0.25rem 0 0;
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

.session-actions { display: grid; gap: 0.75rem; margin-top: 2rem; }

.site-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}

.site-button--primary { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-surface); }
.site-button--primary:hover:not(:disabled) { border-color: var(--color-accent-hover); background: var(--color-accent-hover); }
.site-button--secondary { background: var(--color-surface); color: var(--color-text); }
.site-button--secondary:hover:not(:disabled) { background: var(--color-subtle); }
.site-button:disabled { border-color: var(--color-border); background: var(--color-subtle); color: var(--color-disabled); cursor: default; }

.connection-message {
  margin: 1rem 0 0;
  padding: 1rem;
  border-radius: 5px;
  background: var(--color-surface);
  color: var(--color-error);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

@media (max-width: 52rem) {
  .access { justify-self: center; }
}

@media (max-width: 30rem) {
  .auth-status, .session { padding: 2rem 1.25rem; border-radius: 10px; }
}

@media (forced-colors: active) {
  .auth-status, .session { box-shadow: none; }
}