/* Espaciado. El onboarding NO usa una rejilla de 4/8: usa 7, 9, 13, 18, 26.
   Estos son los valores reales; no los redondees. */
:root {
  --sp-1:  4px;   /* gap de label a ayuda */
  --sp-2:  6px;   /* gap de ícono a texto de error */
  --sp-3:  7px;   /* gap interno de control */
  --sp-4:  8px;   /* gap de chips, gap de días */
  --sp-5:  9px;
  --sp-6:  10px;
  --sp-7:  12px;
  --sp-8:  14px;
  --sp-9:  16px;  /* gap entre tarjetas de la rejilla */
  --sp-10: 18px;
  --sp-11: 20px;
  --sp-12: 22px;
  --sp-13: 24px;
  --sp-14: 26px;
  --sp-15: 28px;  /* padding de tarjeta grande */
  --sp-16: 36px;
  --sp-17: 40px;  /* padding lateral del header y del main */
  --sp-18: 64px;  /* separación intro / aside */

  /* Padding canónico por pieza */
  --pad-card:      26px 28px;   /* tarjeta de paso / documento */
  --pad-card-lg:   28px;        /* tarjeta de formulario */
  --pad-field:     11px 14px;   /* input */
  --pad-field-sm:  9px 12px;    /* input compacto (buscador) */
  --pad-btn:       14px 28px;   /* botón primario */
  --pad-btn-sm:    13px 18px;   /* botón secundario */
  --pad-btn-xs:    8px 12px;    /* botón terciario / quitar */
  --pad-pill:      8px 13px;    /* pastilla del stepper */
  --pad-chip:      9px 14px;    /* chip de categoría */
  --pad-badge:     3px 10px;    /* estado */
  --pad-header:    10px 40px;
  --pad-main:      40px 40px 96px;
  --pad-footbar:   16px 40px;

  /* Medidas fijas */
  --w-content:     1000px;  /* columna del hub */
  --w-content-wide:1180px;  /* columna de la barra de acciones */
  --w-side:        236px;   /* aside de progreso / nav de secciones */
  --h-header:      72px;
  --h-track:       36px;    /* riel del deslizador de horario */
  --h-meter:       5px;
  --tap-min:       44px;    /* área táctil mínima en móvil */

  /* Cortes responsivos reales del onboarding */
  --bp-xl: 1180px;  /* el stepper baja a su propia fila */
  --bp-lg: 1100px;  /* la barra lateral pasa arriba */
  --bp-md: 900px;   /* intro en una columna, rejilla a 1 */
  --bp-sm: 820px;   /* header y barra de acciones se apilan */
  --bp-xs: 560px;   /* pastillas a solo número, días envuelven */
}