:root {
  color-scheme: light;
  --layout-max-width: 82rem;
  --color-background: #19364d;
  --color-surface: #ffffff;
  --color-text: #102c48;
  --color-text-secondary: #526578;
  --color-presentation-text: #f7fafc;
  --color-presentation-secondary: #e4edf4;
  --color-border: #ced9e3;
  --color-accent: #164c7e;
  --color-accent-hover: #103b64;
  --color-focus: #1764c0;
  --color-subtle: #f0f4f8;
  --color-disabled: #667181;
  --color-error: #a12b35;
  --color-shadow: #071a2b40;
  --color-shadow-close: #071a2b14;
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* El ajuste de caja se limita a nuestros elementos; Clerk conserva sus estilos. */
.portal, .presentation, .presentation__brand, .presentation__copy, .brand-logo,
.access, .sign-in, .auth-status, .session, .site-button, .connection-message, .private-access {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

#auth-status[hidden], #retry-button[hidden], #sign-in[hidden],
#signed-in[hidden], #user-email[hidden], #connection-message[hidden] {
  display: none !important;
}

.portal {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 25rem;
  align-items: start;
  align-content: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  width: 100%;
  max-width: var(--layout-max-width);
  min-height: 100vh;
  min-height: 100svh;
  margin-inline: auto;
  padding: clamp(2.5rem, 5vw, 5rem) clamp(1.5rem, 4vw, 4rem);
  padding-top: max(clamp(2.5rem, 5vw, 5rem), env(safe-area-inset-top));
  padding-bottom: max(clamp(2.5rem, 5vw, 5rem), env(safe-area-inset-bottom));
  padding-left: max(clamp(1.5rem, 4vw, 4rem), env(safe-area-inset-left));
  padding-right: max(clamp(1.5rem, 4vw, 4rem), env(safe-area-inset-right));
}

.private-access a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
}

.site-button:focus-visible, .private-access a:focus-visible, .session h2:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

@media (max-width: 52rem) {
  .portal {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    max-width: 36rem;
    padding-inline: max(1.5rem, env(safe-area-inset-left)) max(1.5rem, env(safe-area-inset-right));
  }
}

@media (max-width: 30rem) {
  .portal {
    gap: 1.75rem;
    padding-block: max(2rem, env(safe-area-inset-top)) max(2rem, env(safe-area-inset-bottom));
    padding-inline: max(1.25rem, env(safe-area-inset-left)) max(1.25rem, env(safe-area-inset-right));
  }
}