/* RUNN League · wireframe base. Solo grises. Carlos reemplaza valores, no nombres. */
:root {
  /* Escala neutra */
  --gray-0: #ffffff;
  --gray-50: #f7f7f7;
  --gray-100: #efefef;
  --gray-200: #e2e2e2;
  --gray-300: #cfcfcf;
  --gray-400: #adadad;
  --gray-500: #8a8a8a;
  --gray-600: #6b6b6b;
  --gray-700: #4d4d4d;
  --gray-800: #333333;
  --gray-900: #1f1f1f;
  --gray-950: #111111;

  /* Semánticos (los componentes usan solo estos) */
  --color-bg: var(--gray-50);
  --color-surface: var(--gray-0);
  --color-surface-subtle: var(--gray-100);
  --color-surface-strong: var(--gray-200);
  --color-surface-inverse: var(--gray-950);
  --color-border: var(--gray-200);
  --color-border-strong: var(--gray-400);
  --color-text: var(--gray-950);
  --color-text-muted: var(--gray-600);
  --color-text-subtle: var(--gray-500);
  --color-text-inverse: var(--gray-0);
  --color-action: var(--gray-950);
  --color-action-hover: var(--gray-800);
  --color-action-disabled: var(--gray-300);
  --color-focus: var(--gray-950);
  /* Estados: en marca serán colores; en wireframe se distinguen por patrón y etiqueta */
  --color-positive: var(--gray-800);
  --color-negative: var(--gray-900);
  --color-warning: var(--gray-700);

  /* Tipografía */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --text-xs: 11px;
  --text-sm: 13px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 44px;
  --text-display: 64px;

  /* Espacio, base 4 */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;

  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.12);
  --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-md); line-height: 1.45; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Documentación del lienzo ---------- */
.banda { padding: 52px 56px; background: var(--color-surface-inverse); color: var(--color-text-inverse); }
.banda .etiqueta { color: var(--gray-400); }
.banda h1 { margin: 16px 0 0; font-size: 44px; font-weight: 600; letter-spacing: -0.02em; }
.banda p { margin: 12px 0 0; max-width: 820px; font-size: 16px; line-height: 1.6; color: var(--gray-300); }
.etiqueta { font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 600; }
.seccion { padding: 44px 56px; border-bottom: 1px solid var(--color-border); }
.titulo { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -0.01em; }
.lede { margin: 8px 0 0; max-width: 860px; font-size: 14.5px; line-height: 1.6; color: var(--color-text-muted); }
.nota { font-size: 12.5px; line-height: 1.5; color: var(--color-text-muted); }
.confirmar { display: inline-block; padding: 2px 8px; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-sm); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); white-space: nowrap; }
.codigo { font-family: var(--font-mono); font-size: 11.5px; color: var(--color-text-muted); }
.pin { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--gray-950); color: #fff; font-size: 11px; font-weight: 700; flex-shrink: 0; }

table.doc { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 13.5px; }
table.doc th { text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--color-border-strong); }
table.doc td { padding: 12px; border-bottom: 1px solid var(--color-border); vertical-align: top; line-height: 1.5; }

/* Placeholder rayado para mapas e imágenes */
.ph { display: flex; align-items: center; justify-content: center; color: var(--color-text-subtle); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  background: repeating-linear-gradient(135deg, var(--gray-100) 0 10px, var(--gray-200) 10px 20px); }

/* Marco de teléfono para pantallas de app */
.phone { width: 390px; height: 844px; background: var(--color-surface); border-radius: 44px; box-shadow: 0 0 0 10px var(--gray-900), var(--shadow-lg); overflow: hidden; position: relative; display: flex; flex-direction: column; }
.phone .status { height: 47px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; font-size: 14px; font-weight: 600; }
.phone .home-ind { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 134px; height: 5px; border-radius: 3px; background: var(--gray-950); }