/* Tokens de diseño de Ordenao: los comparten la app (styles.css) y las páginas públicas
   (sitio.css). Antes de escribir un valor suelto, usar uno de estos. */
:root {
  /* Color: marca y neutros */
  --brand: #5B4BDB;
  --brand-strong: #4A3BC4;
  --brand-hover: #35289A;
  --brand-soft: #EEEBFD;
  --brand-tint: #DAD5FA;
  --brand-line: #8B7FE8;
  --brand-dash: #C9C3F5;
  --brand-wash: #FAF9FF;
  --bg: #F7F7FB;
  --surface: #FFFFFF;
  --border: #E6E6EF;
  --border-soft: #F0F0F5;
  --border-control: #8A8CA0; /* bordes de campos: 3:1 sobre blanco */
  --dashed: #B9B9C9; /* solo líneas punteadas y bordes; no pasa contraste como texto */
  --text: #1B1B2F;
  --text-2: #3F4156;
  --muted: #5F6177;
  --on-brand: #FFFFFF; /* texto sobre la marca, el oscuro o el peligro */
  --dark: #1B1B2F;
  --dark-chip: #3A2F8F;
  --dark-chip-text: #CFC8FF;
  --dark-line: #34344D;
  --dark-text: #E4E4EE;
  --fondo: #0E8A7A; /* bolsillo "fondo común"; solo relleno: el texto blanco encima no pasa contraste */
  --fondo-soft: #E2F4F1;
  --fondo-text: #0A6E62;

  /* Color: estados (fondo, texto y borde de cada uno) */
  --ok: #1B6E45; /* 5,4:1 sobre --ok-bg */
  --ok-bg: #E6F4EC;
  --ok-line: #A6D8BD;
  --ok-soft: #7BC8A4; /* relleno de barras: lo que queda */
  --warn: #9A3F06;
  --warn-bg: #FDEEE3;
  --warn-line: #F2B98B;
  --warn-strong: #C2570C; /* puntos de estado */
  --warn-amber: #E0A43A; /* barra "cerca del presupuesto" */
  --danger: #B42318;
  --danger-strong: #912018;
  --danger-bg: #FEF3F2;
  --danger-line: #F4B5AE;
  --info: #0B4F82;
  --info-bg: #E3F1FB;
  /* Nombres anteriores (se siguen usando en la app) */
  --pos: var(--ok);
  --warm-bg: var(--warn-bg);
  --warm-text: var(--warn);
  --cool-bg: var(--info-bg);
  --cool-text: var(--info);

  /* Espaciado (base 4) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* Tipografía */
  --fs-xs: 12px;   /* leyendas, ayudas, barra inferior */
  --fs-sm: 13px;   /* etiquetas, datos secundarios */
  --fs-ui: 14px;   /* botones chicos, tablas densas */
  --fs-md: 15px;   /* cuerpo */
  --fs-lg: 17px;   /* títulos de tarjeta */
  --fs-xl: 20px;   /* títulos de diálogo, cifras de lista */
  --fs-2xl: 24px;  /* cifras de KPI, respuesta */
  --fs-3xl: 30px;  /* título de pantalla */
  --fs-4xl: 36px;  /* cifra principal en celular, título del onboarding */
  --fs-display: 44px;    /* cifra principal */
  --fs-display-xl: 64px; /* la revelación del onboarding */

  /* Radios */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;  /* controles, avisos */
  --r-lg: 16px;  /* KPI, menús */
  --r-xl: 20px;  /* tarjetas, diálogos */
  --r-pill: 999px;

  /* Sombras: la interfaz es plana; solo se eleva lo que flota */
  --sh-2: 0 10px 30px rgba(27, 27, 47, .16); /* menús, avisos flotantes */
  --sh-3: 0 24px 60px rgba(27, 27, 47, .30); /* diálogos */
  --sh-brand: 0 10px 24px rgba(74, 59, 196, .35); /* botón flotante */
  --scrim: rgba(27, 27, 47, .45);

  /* Alturas de controles */
  --h-sm: 36px;
  --h-md: 44px;
  --h-lg: 48px;

  /* Capas */
  --z-sticky: 20;
  --z-fab: 22;
  --z-aviso: 25;
  --z-menu: 30;
  --z-toast: 50;
  --z-salto: 60;

  --dur: .15s;
  --ancho-max: 1200px;
}