/* ═══════════════════════════════════════════════════════════════════
   muda-components.css — MUDA v1 · componentes
   ═══════════════════════════════════════════════════════════════════
   Depende de: muda-tokens.css (cargar SIEMPRE antes)
   Versión: 1.1 · 2026-07-13

   LEY DE ESTE ARCHIVO — cero hex. Todo pasa por token.
   Si necesitas un color que no está en muda-tokens.css, NO lo escribas
   aquí: falta un token. Se añade allí.

   Prefijo único `.muda-`. No hay alias `.ks-` (poda F3 ejecutada).
   ═══════════════════════════════════════════════════════════════════ */

/* ── BASE ────────────────────────────────────────────────────────── */
.muda {
  font-family: var(--muda-typography-family-sans);
  color: var(--muda-color-text-87);
  background: var(--muda-surface-bg);
  line-height: var(--muda-typography-leading-sans);
}

/* ── PROSA EDITORIAL ─────────────────────────────────────────────── */
.muda-prose {
  font-family: var(--muda-typography-family-serif);
  font-size: var(--muda-typography-prose-size);
  line-height: var(--muda-typography-prose-line);
  max-width: var(--muda-typography-prose-max);
  color: var(--muda-color-text-87);
}
.muda-prose h2 {
  font-size: var(--muda-typography-size-h2);
  line-height: var(--muda-typography-leading-tight);
  margin: var(--muda-space-3xl) 0 var(--muda-space-lg);
}
.muda-prose h3 {
  font-size: var(--muda-typography-size-h3);
  line-height: var(--muda-typography-leading-tight);
  margin: var(--muda-space-2xl) 0 var(--muda-space-sm);
}
.muda-prose p { margin: 0 0 var(--muda-space-lg); }
.muda-prose a {
  color: var(--muda-color-scale-goetita-800);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── TIPOS DE VOZ ────────────────────────────────────────────────── */
.muda-fira { font-family: var(--muda-typography-family-fira); }
.muda-mono      { font-family: var(--muda-typography-family-mono); }

/* ── BREADCRUMBS ─────────────────────────────────────────────────── */
.muda-breadcrumbs {
  font-family: var(--muda-typography-family-fira);
  font-size: var(--muda-typography-size-meta-m);
  color: var(--muda-color-text-55);
}
.muda-breadcrumbs a { color: var(--muda-color-text-72); text-decoration: none; }
.muda-breadcrumbs a:hover { color: var(--muda-color-ink); }
.muda-bc-sep { margin: 0 var(--muda-space-xs); color: var(--muda-color-text-38); }

/* ── META DE ARTÍCULO · TIEMPO DE LECTURA ────────────────────────── */
.muda-article-meta,
.muda-reading-time {
  font-family: var(--muda-typography-family-fira);
  font-size: var(--muda-typography-size-meta-m);
  color: var(--muda-color-text-55);
}

/* ── TAG ─────────────────────────────────────────────────────────── */
.muda-tag {
  display: inline-block;
  font-family: var(--muda-typography-family-fira);
  font-size: var(--muda-typography-size-meta-s);
  padding: 2px var(--muda-space-xs);
  border-radius: var(--muda-radius-sm);
  background: var(--muda-color-tint-beige-10);
  color: var(--muda-color-text-72);
}
.muda-tag--node {
  background: var(--muda-color-tint-teal-05);
  color: var(--muda-color-scale-teal-900);
}

/* ── CHIP (filtro) · NUNCA ovalado ───────────────────────────────── */
.muda-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--muda-typography-family-fira);
  font-size: var(--muda-typography-size-meta-l);
  padding: var(--muda-space-xs) var(--muda-space-sm);
  border: 1px solid var(--muda-color-border-default);
  border-radius: var(--muda-radius-sm);   /* 5px. NUNCA 999px */
  background: var(--muda-surface-elevated);
  color: var(--muda-color-text-72);
  cursor: pointer;
  transition: all var(--muda-motion-duration-default) var(--muda-motion-easing-default);
}
.muda-chip:hover { border-color: var(--muda-color-border-strong); }
.muda-chip[aria-pressed="true"],
.muda-chip.is-active {
  background: var(--muda-color-ink);       /* contraste ~21:1 */
  border-color: var(--muda-color-ink);
  color: var(--muda-color-paper);
}

/* ── BOTÓN ───────────────────────────────────────────────────────── */
.muda-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--muda-space-xs);
  font-family: var(--muda-typography-family-sans);
  font-size: var(--muda-typography-size-body-s);
  padding: var(--muda-space-sm) var(--muda-space-md);
  border-radius: var(--muda-radius-sm);
  border: 1px solid var(--muda-color-border-strong);
  background: transparent;
  color: var(--muda-color-ink);
  cursor: pointer;
  transition: all var(--muda-motion-duration-default) var(--muda-motion-easing-default);
}
.muda-btn:hover  { background: var(--muda-surface-muted); }
.muda-btn:active { transform: scale(0.98); }

/* Primario · acción. NO usa el turquesa de marca: no pasa 3:1 sobre blanco */
.muda-btn--primary {
  background: var(--muda-color-action);
  border-color: var(--muda-color-action);
  color: var(--muda-color-white);
}
.muda-btn--primary:hover { background: var(--muda-color-scale-teal-700); border-color: var(--muda-color-scale-teal-700); }

.muda-btn--secondary {
  background: var(--muda-color-scale-cobalto-500);
  border-color: var(--muda-color-scale-cobalto-500);
  color: var(--muda-color-white);
}
.muda-btn--secondary:hover { background: var(--muda-color-scale-cobalto-700); border-color: var(--muda-color-scale-cobalto-700); }

.muda-btn[disabled],
.muda-btn.is-disabled {
  background: var(--muda-color-scale-teal-100);   /* disabled = stop 100 */
  border-color: transparent;
  color: var(--muda-color-text-38);
  cursor: not-allowed;
}

/* ── CARD ────────────────────────────────────────────────────────── */
.muda-card {
  background: var(--muda-surface-elevated);
  border-radius: var(--muda-radius-md);
  box-shadow: var(--muda-shadow-card);
  overflow: hidden;
}
.muda-card-body     { padding: var(--muda-space-lg); }
.muda-card-overline {
  font-family: var(--muda-typography-family-fira);
  font-size: var(--muda-typography-size-meta-s);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muda-color-text-55);       /* nunca color de categoría en texto */
  margin-bottom: var(--muda-space-xs);
}
.muda-card-title {
  font-family: var(--muda-typography-family-serif);
  font-size: var(--muda-typography-size-h3);
  line-height: var(--muda-typography-leading-tight);
  color: var(--muda-color-ink);
  margin: 0 0 var(--muda-space-xs);
}
.muda-card-desc {
  font-size: var(--muda-typography-size-body-s);
  color: var(--muda-color-text-72);
  margin: 0;
}
.muda-card-meta {
  font-family: var(--muda-typography-family-fira);
  font-size: var(--muda-typography-size-meta-m);
  color: var(--muda-color-text-55);
  margin-top: var(--muda-space-sm);
}

/* El color de categoría vive en el ACENTO GRÁFICO, nunca en el texto */
.muda-card--accent { border-top: 3px solid var(--muda-color-scale-teal-500); }

/* ── GRID 3/2/1 ──────────────────────────────────────────────────── */
.muda-grid-3-2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--muda-space-lg);
}

/* ── NOTICE ──────────────────────────────────────────────────────── */
.muda-notice {
  padding: var(--muda-space-md);
  border-radius: var(--muda-radius-sm);
  border-left: 3px solid var(--muda-color-scale-teal-500);
  border-radius: 0;                       /* borde de un solo lado → sin radio */
  background: var(--muda-color-tint-teal-05);
  font-size: var(--muda-typography-size-body-s);
  color: var(--muda-color-text-87);
}
.muda-notice--red {
  border-left-color: var(--muda-color-scale-rojo-500);
  background: var(--muda-color-tint-red-05);
}
.muda-notice--beige {
  border-left-color: var(--muda-color-piece-caliza);
  background: var(--muda-color-tint-beige-10);
}
.muda-notice--warning {
  border-left-color: var(--muda-color-scale-goetita-800);
  background: var(--muda-color-scale-goetita-50);
}
.muda-notice--success {
  border-left-color: var(--muda-color-scale-verde-niquel-700);
  background: var(--muda-color-scale-verde-niquel-50);
}

/* ── CALLOUT ─────────────────────────────────────────────────────── */
.muda-callout {
  padding: var(--muda-space-lg);
  border-radius: var(--muda-radius-md);
  background: var(--muda-surface-muted);
  border: 1px solid var(--muda-color-border-default);
}
.muda-callout--brand   { background: var(--muda-color-tint-teal-05); border-color: var(--muda-color-tint-teal-22); }
.muda-callout--note    { background: var(--muda-surface-muted); }
.muda-callout--related { background: var(--muda-color-tint-beige-10); }

/* ── MARGINALIA · ASIDES ─────────────────────────────────────────── */
.muda-aside-card,
.muda-aside-note,
.muda-aside-concept {
  font-family: var(--muda-typography-family-fira);
  font-size: var(--muda-typography-size-body-s);
  line-height: 1.5;
  padding: var(--muda-space-md);
  border-radius: var(--muda-radius-sm);
  background: var(--muda-surface-muted);
  color: var(--muda-color-text-78);
}
.muda-aside-concept { background: var(--muda-color-tint-teal-05); }
.muda-aside-label {
  display: block;
  font-size: var(--muda-typography-size-meta-s);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muda-color-text-55);
  margin-bottom: var(--muda-space-xs);
}
/* Derivada · el cobre es FUNCIÓN (procedencia), no énfasis */
.muda-aside-derivada {
  font-family: var(--muda-typography-family-fira);
  font-size: var(--muda-typography-size-body-s);
  padding: var(--muda-space-md);
  background: var(--muda-color-copper-surface);
  border-left: 3px solid var(--muda-color-copper-rule);
  color: var(--muda-color-text-78);
}
.muda-aside-derivada .muda-aside-label { color: var(--muda-color-copper-label); }
.muda-aside-derivada a { color: var(--muda-color-copper-link); }
.muda-aside-derivada a:hover { color: var(--muda-color-copper-hover); }

/* ── PULLQUOTE · CITA ────────────────────────────────────────────── */
/* REGLA FIRMADA: blockquote y pullquote van SIEMPRE en el cuerpo,
   NUNCA anidados dentro de una columna lateral. */
.muda-pullquote {
  /* La cara itálica AUTÉNTICA, invocada por su nombre. Sin font-style:italic
     encima: hasta la v1.0 esta regla pedía la serif redonda y le mandaba
     inclinarse, y el navegador se la sintetizaba a base de cizalla. Faux.
     Corregido el 14-jul con las fuentes ya cargadas de verdad. */
  font-family: var(--muda-typography-family-serif-italic);
  font-size: var(--muda-size-display);
  line-height: var(--muda-typography-leading-tight);
  font-style: normal;
  color: var(--muda-color-ink);
  margin: var(--muda-space-3xl) 0;
  padding-left: var(--muda-space-lg);
  border-left: 2px solid var(--muda-color-piece-caliza);
}

/* ── HIGHLIGHT · ROTULADOR ───────────────────────────────────────── */
.muda-hl,
.muda-quote-hl {
  background: var(--muda-color-scale-goetita-100);
  padding: 0 2px;
  box-decoration-break: clone;
}

/* ── TABLAS ──────────────────────────────────────────────────────── */
.muda-table-prose {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--muda-typography-family-serif);
  font-size: var(--muda-typography-size-body-s);
}
.muda-table-data {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--muda-typography-family-fira);
  font-size: var(--muda-typography-size-body-s);
  font-variant-numeric: tabular-nums;
}
.muda-table-prose th,
.muda-table-data th {
  text-align: left;
  font-weight: 500;
  color: var(--muda-color-text-62);
  border-bottom: 1px solid var(--muda-color-border-strong);
  padding: var(--muda-space-xs) var(--muda-space-sm);
}
.muda-table-prose td,
.muda-table-data td {
  border-bottom: 1px solid var(--muda-color-border-default);
  padding: var(--muda-space-xs) var(--muda-space-sm);
}
.muda-table-data td.muda-num { text-align: right; font-family: var(--muda-typography-family-mono); }

/* ── FUENTES ─────────────────────────────────────────────────────── */
.muda-sources {
  font-family: var(--muda-typography-family-fira);
  font-size: var(--muda-typography-size-meta-l);
  color: var(--muda-color-text-62);
  padding-left: var(--muda-space-md);
}
.muda-sources li { margin-bottom: var(--muda-space-xs); }

/* ── STRIP DE REVISIÓN ───────────────────────────────────────────── */
.muda-revisado-strip {
  font-family: var(--muda-typography-family-fira);
  font-size: var(--muda-typography-size-meta-m);
  padding: var(--muda-space-xs) var(--muda-space-sm);
  background: var(--muda-color-tint-beige-10);
  color: var(--muda-color-text-62);
  border-radius: var(--muda-radius-sm);
}

/* ── FAQ ─────────────────────────────────────────────────────────── */
.muda-faq-item {
  border-bottom: 1px solid var(--muda-color-border-default);
  padding: var(--muda-space-md) 0;
}
.muda-faq-titulo {
  font-family: var(--muda-typography-family-sans);
  font-size: var(--muda-typography-size-body-m);
  color: var(--muda-color-ink);
  margin: 0 0 var(--muda-space-xs);
}
.muda-faq-answer {
  font-size: var(--muda-typography-size-body-s);
  color: var(--muda-color-text-72);
}

/* ── ARTEFACTO EMBEBIDO ──────────────────────────────────────────── */
.muda-artefacto-placeholder {
  min-height: var(--muda-size-embed-min);
  display: grid;
  place-items: center;
  background: var(--muda-surface-muted);
  border: 1px dashed var(--muda-color-border-strong);
  border-radius: var(--muda-radius-md);
  color: var(--muda-color-text-45);
  font-family: var(--muda-typography-family-fira);
}

/* ── FOOTER ──────────────────────────────────────────────────────── */
.muda-footer {
  font-family: var(--muda-typography-family-fira);
  font-size: var(--muda-typography-size-meta-l);
  color: var(--muda-color-text-55);
  border-top: 1px solid var(--muda-color-border-default);
  padding-top: var(--muda-space-lg);
  margin-top: var(--muda-space-3xl);
}

/* ── SHELL DE APLICACIÓN (nuevo en v1) ───────────────────────────── */
/* Para artefactos que NO deben respirar a web: altura fija, sin scroll
   de documento, scroll dentro de los paneles. Es lo que convierte un
   documento en una aplicación. */
.muda-app {
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  background: var(--muda-surface-bg);
}
.muda-app-bar {
  display: flex;
  align-items: center;
  gap: var(--muda-space-sm);
  padding: var(--muda-space-sm) var(--muda-space-md);
  border-bottom: 1px solid var(--muda-color-border-default);
  background: var(--muda-surface-elevated);
}
.muda-app-body {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 300px;
  overflow: hidden;
}
.muda-app-panel { overflow-y: auto; padding: var(--muda-space-md); }
.muda-app-panel + .muda-app-panel { border-left: 1px solid var(--muda-color-border-default); }

@media (max-width: 900px) {
  /* En móvil los paneles no se apretujan: se convierten en pasos */
  .muda-app-body { grid-template-columns: 1fr; }
  .muda-app-panel:not([data-active]) { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   LA ITÁLICA DEL CUERPO — v1.1
   ═══════════════════════════════════════════════════════════════════
   El navegador, por defecto, pinta <em> poniéndole font-style:italic a
   la fuente que haya. Si esa fuente solo tiene cara redonda cargada, se
   la inclina él con una cizalla: faux italic, la `a` de dos pisos torcida.

   En la prosa de MUDA los anglicismos van constantemente en cursiva
   (*testing*, *growth*, *aha moment*), así que esto no es un caso raro:
   es el caso normal. Aquí se le da a cada registro su archivo real.

   El eje `opsz` de Newsreader hace el resto sin que haya que tocar nada:
   en cuerpo pequeño la itálica se ensancha y acompaña el renglón; grande
   y sola (una cita) se ciñe y saca gesto. Una fuente, dos funciones,
   cero piezas nuevas en el sistema. Eso es cosmología generativa.
   ═══════════════════════════════════════════════════════════════════ */

.muda-prose em,
.muda-prose i,
.muda-prose cite,
.muda-prose dfn {
  font-family: var(--muda-typography-family-serif-italic);
  font-style: normal;   /* ← NO es una errata. Ver el bloque de arriba. */
}

/* En interfaz y en marginalia manda la sans y la Fira, cada una con su cara. */
.muda-fira em,
.muda-fira i {
  font-family: var(--muda-typography-family-fira-italic);
  font-style: normal;
}