/* Base: reset, tipografía y estructura de la página. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; min-height: 100%; background: var(--color-bg); }
body {
  font-family: var(--font-ui);
  font-size: var(--text-md);
  line-height: 1.45;
  color: var(--color-text);
  min-height: 100vh;
  min-height: 100dvh;
}
body.has-modal { overflow: hidden; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; }
p { margin: 0; }
a { color: var(--color-brand); }
img, video { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
h1:focus { outline: none; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.app-shell {
  max-width: var(--shell-max);
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom);
}

.screen { padding: var(--space-4); display: grid; gap: var(--space-4); align-content: start; }
.screen--center { min-height: 80vh; align-content: center; }
.stack { display: grid; gap: var(--space-2); }
.grid-2 { display: grid; gap: var(--space-3); }
.muted { color: var(--color-muted); }
.small { font-size: var(--text-sm); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; }

.icon { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@media (min-width: 390px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .grid-2 > .field--full { grid-column: 1 / -1; }
}
@media (min-width: 600px) {
  .screen { padding: var(--space-5); gap: var(--space-5); }
}
@media (min-width: 820px) {
  :root { --shell-max: 640px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Zonas de contenido de cada pantalla: mismo ritmo vertical que .screen */
.screen > [data-slot], .screen > [data-body], .screen [data-body] > section { display: grid; gap: var(--space-4); align-content: start; }
.screen > [data-slot][hidden] { display: none; }