/* ==========================================================================
   Stackapital — base.css · reset moderno, elementos base y prosa
   Sin clases de componente (viven en components.css); sin layout (layout.css).
   Todo el color/tipo sale de tokens.css.
   ========================================================================== */

@layer base {

  /* ---------- Reset ---------- */
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }

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

  body {
    background: var(--bg);
    color: var(--fg);
    font: 400 var(--text-md)/var(--leading) var(--f-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    min-height: 100svh;
  }

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

  h1, h2, h3, h4 { text-wrap: balance; overflow-wrap: break-word; }
  h1, h2 { font-family: var(--f-display); font-weight: 500; line-height: var(--leading-tight); letter-spacing: -0.02em; }
  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-xl); }
  h3, h4 { font-size: var(--text-md); font-weight: 600; }
  p, li { overflow-wrap: break-word; }

  a { color: var(--accent); text-decoration: none; }
  a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

  button, input, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: 0; padding: 0; color: inherit; }

  ul, ol { list-style: none; padding: 0; }

  table { border-collapse: collapse; }
  th, td { text-align: left; }

  code, kbd, samp, pre { font-family: var(--f-mono); font-size: 0.9em; }
  pre { overflow-x: auto; }
  code { background: var(--surface-2); padding: 0.1em 0.35em; border-radius: var(--radius-sm); }

  small { font-size: var(--text-sm); color: var(--fg-3); }
  hr { border: 0; border-top: 1px solid var(--line); }

  ::selection { background: var(--albero); color: var(--on-accent); }

  /* El `* { margin: 0 }` de arriba pisa el `margin: auto` del UA stylesheet
     que centra los <dialog> (los estilos de autor ganan a los del navegador
     aunque sea un selector sin especificidad). Sin él, el diálogo modal queda
     anclado a la esquina superior izquierda (inset 0 + width fija). Los que
     declaran su propio margen (`.modal:not(:modal)[open]`, `.app-nav-dialog`)
     siguen ganando por capa. */
  dialog { color: var(--fg); margin: auto; }

  /* El foco SIEMPRE visible y en albero legible (docs/06-sistema-diseno §Accesibilidad) */
  :focus-visible {
    outline: 2px solid var(--albero-ink);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
  :focus:not(:focus-visible) { outline: none; }

  /* ---------- Etiquetas mono de la interfaz (metadatos, «01 · PANEL») ---------- */
  .label-mono {
    font: 500 var(--text-xs)/1 var(--f-mono);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--fg-3);
  }

  /* ---------- Prosa (política de privacidad, textos legales) ---------- */
  .prose { max-width: 70ch; display: grid; gap: var(--space-4); }
  .prose h2 { margin-top: var(--space-4); }
  .prose h3 { margin-top: var(--space-3); }
  .prose p, .prose li { color: var(--fg-2); }
  .prose strong { color: var(--fg); }
  .prose ul { list-style: disc; padding-left: var(--space-5); display: grid; gap: var(--space-2); }
  .prose ol { list-style: decimal; padding-left: var(--space-5); display: grid; gap: var(--space-2); }
  .prose a { text-decoration: underline; text-underline-offset: 0.2em; }
  .prose > :first-child { margin-top: 0; }

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