/* Plus Ézer — Variables globales.
   REGLA: en el resto del CSS usar siempre var(--…), nunca valores fijos. */
:root {
  /* Paleta oficial Plus Ézer, tomada del logo: morado + naranja. */
  --color-primario: #6B4E9E;         /* morado del corazón/logo */
  --color-primario-oscuro: #4A3570;  /* morado oscuro: barra superior, menú */
  --color-primario-claro: #A88FC9;
  --color-acento: #F0982E;           /* naranja de la rama de olivo del logo */
  --color-acento-oscuro: #C97A1A;
  --color-peligro: #c62828;
  --color-exito: #2e7d32;

  --color-texto: #241c30;
  --color-texto-suave: #665d76;
  --color-fondo: #ffffff;
  --color-fondo-alt: #f2eff7;
  --color-borde: #ddd5e8;

  /* Tipografía: legible para adultos mayores pero sin exagerar */
  --fuente-base: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --texto-xs: 0.8125rem;
  --texto-sm: 0.9375rem;
  --texto-md: 1rem;
  --texto-lg: 1.125rem;
  --texto-xl: 1.375rem;
  --texto-xxl: 1.75rem;

  /* Espaciado */
  --esp-1: 0.5rem;
  --esp-2: 0.875rem;
  --esp-3: 1.25rem;
  --esp-4: 1.75rem;
  --esp-5: 2.5rem;

  /* Formas */
  --radio: 10px;
  --radio-lg: 16px;
  --sombra: 0 1px 4px rgba(0, 0, 0, 0.08), 0 2px 12px rgba(0, 0, 0, 0.06);

  /* Medidas de layout */
  --boton-min-alto: 54px;
  --ancho-ayuda: 30rem;        /* columna del flujo público /ayuda */
  --ancho-contenido: 72rem;    /* zona central de los paneles */
  --ancho-angosto: 46rem;      /* páginas de formulario/detalle */
  --sidebar-ancho: 13.5rem;
}