/* Tokens copiados de mintii-context-web/src/app/globals.css (@theme, main 3 nov 2026). Modo claro de la app; el oscuro es una propuesta del prototipo en tema.css. No inventar valores fuera de esta lista; un token nuevo se propone, no se agrega. */
:root {
  /* Konos Grotesk es aspiracional (licencia pendiente, decisión de Juan): no se carga; hoy se ve Inter si está instalada. */
  --font-sans: 'Konos Grotesk', 'Inter Variable', Inter, system-ui, sans-serif;
  --font-display: 'Konos Grotesk', 'Inter Variable', Inter, sans-serif;
  --font-mono: 'JetBrains Mono Variable', ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-2xs: 10.5px; --text-xs: 11.5px; --text-sm: 12.5px; --text-base: 13.5px;
  --text-lg: 16px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 30px;
  --color-bg: #ffffff; --color-bg2: #f7f7f4; --color-surface: #ffffff; --color-surface2: #f2f2ee;
  --color-line: #e8e8e3; --color-line2: #dcdcd5; --color-grid: #f0f0ec;
  --color-ink: #0d0d10; --color-text: #3d3d46; --color-muted: #66666f; --color-dim: #6b6b74;
  --color-accent: #4a42d8; --color-accent-hover: #3b34bf; --color-accent-soft: #eceafc; --color-accent-line: #d8d5f7;
  --color-side: #f7f7f4; --color-side-text: #3d3d46; --color-side-dim: #66666f; --color-side-line: #e8e8e3;
  --color-deep: #141419; --color-deep2: #23232a; --color-deep-text: #c9c9d1; --color-deep-dim: #9a9aa6; --color-deep-accent: #8f88ff;
  --color-green: #087a53; --color-green-soft: #eef6f2; --color-red: #b91c1c; --color-red-soft: #fdecec;
  --color-amber: #92400e; --color-amber-soft: #fdf3e3;
  /* Escala de documentos (propuesta del prototipo; nombres nuevos, no tocan los tokens de la app). */
  --doc-body: 15px; --doc-body-lh: 1.6; --doc-small: 13px; --doc-small-lh: 1.5; --doc-meta: 12px; --doc-nav: 13.5px;
  --doc-h1: 30px; --doc-h2: 21px; --doc-h3: 17px; --doc-h4: 15px; --doc-mono: 0.9em;
  --radius-btn: 10px; --radius-card: 18px; --radius-widget: 12px;
  --tracking-tight2: -0.03em; --tracking-tight3: -0.04em;
  --shadow-ring: 0 0 0 3px rgba(74, 66, 216, 0.1);
  --shadow-lift: 0 1px 2px rgba(13, 13, 16, 0.05), 0 4px 14px rgba(13, 13, 16, 0.06);
  --shadow-pop: 0 30px 70px rgba(13, 13, 16, 0.16), 0 4px 12px rgba(13, 13, 16, 0.06);
}
html { background: var(--color-bg2); color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.5; -webkit-font-smoothing: antialiased; }
body { margin: 0; background: var(--color-bg2); }
h1, h2, h3 { font-family: var(--font-display); color: var(--color-ink); letter-spacing: var(--tracking-tight2); font-weight: 600; margin: 0 0 8px; }
h1 { font-size: var(--text-3xl); line-height: 1.1; } h2 { font-size: var(--text-xl); line-height: 1.25; } h3 { font-size: var(--text-lg); line-height: 1.35; }
.page { max-width: 1200px; margin: 0 auto; padding: 24px 16px 64px; }
.card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-widget); padding: 16px; }
.widget { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-widget); padding: 14px 16px; }
.eyebrow { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); }
.muted { color: var(--color-muted); } .dim { color: var(--color-dim); } .mono { font-family: var(--font-mono); }
.pill { display: inline-block; font-size: var(--text-xs); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--color-line2); color: var(--color-text); }
/* Bloques de decisión (prd-etapas.md §7) */
.dx { border: 1px solid var(--color-accent-line); background: var(--color-accent-soft); border-radius: var(--radius-card); padding: 16px; margin: 24px 0; }
.dx > .dx-title { font-weight: 600; color: var(--color-accent); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.dx-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.dx-option { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-widget); padding: 12px; position: relative; }
.dx-option.rec { border-color: var(--color-accent); box-shadow: var(--shadow-ring); }
.dx-option .badge { position: absolute; top: 10px; right: 10px; font-size: var(--text-2xs); background: var(--color-accent); color: #fff; border-radius: 999px; padding: 2px 8px; text-transform: uppercase; letter-spacing: .06em; }
.dx-ask { margin-top: 12px; font-weight: 600; color: var(--color-ink); }
.decided { display: inline-block; font-size: var(--text-2xs); color: var(--color-dim); border: 1px solid var(--color-line2); border-radius: 999px; padding: 1px 8px; text-transform: uppercase; letter-spacing: .06em; }
.index-dx { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-widget); padding: 12px 16px; margin-bottom: 24px; }
.index-dx a { color: var(--color-accent); }
.grid { display: grid; gap: 16px; } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); } th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--color-line); } th { color: var(--color-muted); font-weight: 500; }
@media (max-width: 480px) { .page { padding: 16px 16px 48px; } h1 { font-size: var(--text-2xl); } }