/* Estilos de prosa para las paginas de /docs generadas desde markdown.
 *
 * NO es diseño nuevo: cada valor esta TRANSCRITO de una pieza del kit, para que una
 * pagina de markdown y el CreditsPage de React se vean como la misma cosa.
 *   h1/h2/p/lede  <- design-system/ui_kits/docs/DocsPages.jsx (primitivas H1,H2,P,Lede)
 *   table         <- design-system/components/data/RateTable.jsx
 *   pre           <- design-system/components/data/CodeBlock.jsx
 *   blockquote    <- design-system/components/core/Callout.jsx (tono "note")
 * Lo unico sin origen en el kit es .dy-shot, el marcador de captura pendiente: el kit
 * no traia ninguno porque las capturas las pone Jorge.
 *
 * Nota: tokens/base.css pone a 0 los margenes de h1..h4 y p, asi que aqui se declaran
 * explicitos; son los mismos numeros que usan las primitivas del kit.
 */

.dy-prose { max-width: var(--container-prose); }

.dy-prose h1 { margin: 14px 0 0; font: var(--type-h1); letter-spacing: var(--tracking-heading); color: var(--text-primary); }
.dy-prose h2 { margin: 44px 0 0; font: var(--type-h2); letter-spacing: var(--tracking-heading); color: var(--text-primary); scroll-margin-top: 88px; }
.dy-prose h3 { margin: 28px 0 0; font: var(--type-h3); letter-spacing: var(--tracking-heading); color: var(--text-primary); scroll-margin-top: 88px; }

.dy-prose p  { margin: 16px 0 0; font: var(--type-body); color: var(--text-secondary); text-wrap: pretty; }
.dy-prose h1 + p { font: var(--weight-regular) var(--text-lg)/1.55 var(--font-sans); }

.dy-prose strong { font-weight: var(--weight-semibold); color: var(--text-primary); }
.dy-prose em { font-style: normal; color: var(--text-primary); }

.dy-prose ul, .dy-prose ol { margin: 16px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 9px; }
.dy-prose li { font: var(--type-body); color: var(--text-secondary); }
.dy-prose li::marker { color: var(--text-muted); }
.dy-prose li > ul, .dy-prose li > ol { margin-top: 9px; }

/* Codigo en linea y paneles — CodeBlock.jsx */
.dy-prose code {
  font: var(--weight-regular) var(--text-xs)/1.5 var(--font-mono);
  background: var(--surface-sunken); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm); padding: 1px 5px; color: var(--text-numeric);
}
.dy-prose pre {
  margin: 20px 0 0; padding: 14px 16px; overflow-x: auto;
  background: var(--surface-code); border: 1px solid var(--neutral-800);
  border-radius: var(--radius-lg);
  font: var(--weight-regular) var(--text-xs)/1.7 var(--font-mono); color: var(--neutral-100);
}
.dy-prose pre code { background: none; border: none; padding: 0; color: inherit; font-size: inherit; }

/* Tablas — RateTable.jsx: hairlines, sin zebra, sin reglas verticales, cifras tabulares */
.dy-prose table { width: 100%; border-collapse: collapse; margin: 24px 0 0; }
.dy-prose th {
  text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--border-default);
  font: var(--type-eyebrow); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-muted); white-space: nowrap;
}
.dy-prose td {
  text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--border-subtle);
  font: var(--weight-regular) var(--text-sm)/1.4 var(--font-sans);
  color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.dy-prose td code { font-size: var(--text-xs); }

/* Citas — Callout.jsx, tono "note" */
.dy-prose blockquote {
  margin: 20px 0 0; padding: 14px 16px;
  background: var(--state-info-bg);
  border: 1px solid color-mix(in oklab, var(--state-info-fg) 18%, transparent);
  border-radius: var(--radius-md);
}
.dy-prose blockquote p { margin: 0; font: var(--type-body-sm); color: var(--text-secondary); }
.dy-prose blockquote p + p { margin-top: 8px; }

.dy-prose hr { margin: 40px 0 0; border: none; border-top: 1px solid var(--border-subtle); }

/* ---------------------------------------------------------------------------
   Marcador de captura pendiente. Lo unico de este archivo que no se transcribe del
   kit. Ocupa el sitio real de la imagen y dice que falta, en lugar de fingir que no
   se necesitaba. Se va solo cuando Jorge sustituya el [Screenshot: ...] por la imagen.
--------------------------------------------------------------------------- */
.dy-shot {
  margin: 20px 0 0; padding: 16px 18px;
  background: var(--surface-sunken);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  display: grid; grid-template-columns: 20px 1fr; column-gap: 12px; row-gap: 4px;
}
.dy-shot::before {
  content: ""; width: 18px; height: 18px; grid-row: 1 / span 2; margin-top: 1px;
  background: var(--text-muted);
  -webkit-mask: url(/assets/icons/file-text.svg) no-repeat center / contain;
          mask: url(/assets/icons/file-text.svg) no-repeat center / contain;
}
.dy-shot-tag {
  font: var(--type-eyebrow); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-muted);
}
.dy-shot-desc { font: var(--type-body-sm); color: var(--text-secondary); }

@media (max-width: 860px) {
  .dy-prose table { display: block; overflow-x: auto; }
}