/**
 * Reset moderado, tipografía y utilidades.
 * Depende de tokens.css.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-base);
  line-height: var(--ds-leading-normal);
  color: var(--ds-text);
  background: var(--ds-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
}

img, svg, video {
  display: block;
  max-width: 100%;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

a {
  color: var(--ds-accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Anillo de foco consistente en todo el sistema. Solo teclado. */
:focus-visible {
  outline: 2px solid var(--ds-accent);
  outline-offset: 2px;
  border-radius: var(--ds-radius-sm);
}

:focus:not(:focus-visible) {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Títulos ---------- */

.ds-title {
  font-weight: var(--ds-weight-semibold);
  line-height: var(--ds-leading-tight);
  color: var(--ds-text);
  letter-spacing: -0.011em;
}

.ds-title--xl { font-size: var(--ds-text-3xl); letter-spacing: -0.02em; }
.ds-title--lg { font-size: var(--ds-text-2xl); letter-spacing: -0.015em; }
.ds-title--md { font-size: var(--ds-text-xl); }
.ds-title--sm { font-size: var(--ds-text-lg); }

/* Título de sección: pequeño, en mayúsculas, para agrupar bloques. */
.ds-title--eyebrow {
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ds-text-subtle);
}

.ds-subtitle {
  font-size: var(--ds-text-md);
  color: var(--ds-text-muted);
  font-weight: var(--ds-weight-normal);
}

/* ---------- Utilidades ---------- */

.ds-text-muted { color: var(--ds-text-muted); }
.ds-text-subtle { color: var(--ds-text-subtle); }
.ds-text-sm { font-size: var(--ds-text-sm); }
.ds-text-xs { font-size: var(--ds-text-xs); }
.ds-mono { font-family: var(--ds-font-mono); font-size: 0.9em; }
.ds-nowrap { white-space: nowrap; }

.ds-stack { display: grid; gap: var(--ds-space-4); }
.ds-stack--sm { gap: var(--ds-space-2); }
.ds-stack--lg { gap: var(--ds-space-6); }

.ds-row {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  flex-wrap: wrap;
}

.ds-row--between { justify-content: space-between; }
.ds-row--end { justify-content: flex-end; }
.ds-row--tight { gap: var(--ds-space-2); }

.ds-grid {
  display: grid;
  gap: var(--ds-space-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.ds-hidden { display: none !important; }

/*
 * Ocultar por ancho. Es para lo que **sobra** en un tamaño, no para tener dos
 * versiones del mismo contenido: si algo hace falta en el teléfono y en el
 * escritorio, va una vez y se adapta.
 */
@media (max-width: 767.98px) {
  .ds-hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
  .ds-hide-desktop { display: none !important; }
}

/* Visible solo para lectores de pantalla. */
.ds-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Enlace de salto al contenido, visible al enfocarlo con teclado. */
.ds-skip-link {
  position: absolute;
  top: var(--ds-space-2);
  left: var(--ds-space-2);
  z-index: var(--ds-z-toast);
  padding: var(--ds-space-2) var(--ds-space-4);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-md);
  transform: translateY(-200%);
  transition: transform var(--ds-duration-fast) var(--ds-ease);
}

.ds-skip-link:focus {
  transform: translateY(0);
}

/* ==================== Cubierta de arranque ==================== */

/*
 * Lo que se ve entre que se abre la aplicación y que se dibuja la primera
 * pantalla. Su marcado está en el HTML de cada aplicación —ver `ds/js/boot.js`
 * para el porqué— y estos estilos viven en `base.css`, que es una hoja
 * bloqueante: tienen que estar aplicados en el primer pintado, antes de que
 * exista un solo módulo de JavaScript.
 */

.ds-boot {
  position: fixed;
  inset: 0;
  z-index: var(--ds-z-toast);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--ds-space-4);
  padding: var(--ds-space-6);
  background: var(--ds-bg);
  text-align: center;
  transition: opacity var(--ds-duration-base) var(--ds-ease);
}

.ds-boot[data-dismissed="true"] {
  opacity: 0;
  /* Deja de existir para el dedo en el acto, aunque el desvanecido siga. */
  pointer-events: none;
}

.ds-boot__spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--ds-text-subtle);
  border-top-color: transparent;
  border-radius: var(--ds-radius-full);
  animation: ds-spin 700ms linear infinite;
}

.ds-boot__label {
  margin: 0;
  color: var(--ds-text-muted);
  font-size: var(--ds-text-sm);
}

/*
 * El aviso de que está tardando aparece solo, a los ocho segundos, y sin
 * JavaScript: si la aplicación se colgó antes de arrancar, no hay JavaScript que
 * lo muestre. No se esconde el problema con un desvanecido automático —eso haría
 * creer que abrió—: se dice que está tardando y qué hacer.
 */
.ds-boot__slow {
  margin: 0;
  max-width: 32ch;
  color: var(--ds-text-subtle);
  font-size: var(--ds-text-xs);
  opacity: 0;
  animation: ds-boot-slow 1ms linear 8s forwards;
}

@keyframes ds-boot-slow {
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-boot { transition: none; }
  .ds-boot__spinner { animation: none; border-top-color: currentcolor; }
}