:root {
  /* Colores (inspirado en la paleta real de monday.com / Vibe design system) */
  --primary: #0073ea;
  --primary-dark: #0060b9;
  --secondary: #fdab3d;
  --success: #00c875;
  --warning: #fdab3d;
  --danger: #df2f4a;

  /* Fondos */
  --bg-dark: #f6f7fb;
  --bg-darker: #eceefa;
  --bg-light: #fcfcfd;
  --bg-lighter: #ffffff;

  /* Texto */
  --text-primary: #323338;
  --text-secondary: #676879;
  --text-muted: #9699a6;

  /* Bordes */
  --border-color: #d0d4e4;
  --border-light: #e6e9ef;

  /* Espaciado (ya coincidia con la escala de monday: 4/8/16/24/32) */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;

  /* Sombras (tinte azulado oscuro en vez de negro puro, como monday) */
  --shadow-sm: 0 2px 4px rgba(9, 11, 37, 0.1);
  --shadow-md: 0 4px 10px rgba(9, 11, 37, 0.12);
  --shadow-lg: 0 8px 24px rgba(9, 11, 37, 0.16);

  /* Radios */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* Line-height de botones (unifica <a> y <button>, que por defecto no
     heredan el line-height:1.5 del body igual). Ajustar aqui para probar
     otros valores sin tocar formas.css */
  --btn-line-height: 1.1;

  /* Tipografia: Figtree para texto, Poppins para titulos (misma combinacion que monday) */
  --font-family: 'Figtree', 'Segoe UI', Roboto, Arial, sans-serif;
  --font-family-titulos: 'Poppins', 'Segoe UI', Roboto, Arial, sans-serif;

/* Paleta pastel (pills / badges categoricos) */
  --pastel-rosa-bg: #fde2e7;
  --pastel-rosa-texto: #9d174d;

  --pastel-verde-bg: #dcf5e3;
  --pastel-verde-texto: #166534;

  --pastel-celeste-bg: #dceefd;
  --pastel-celeste-texto: #1d4ed8;

  --pastel-amarillo-bg: #fef6d8;
  --pastel-amarillo-texto: #92700c;

  --pastel-lila-bg: #ece4fb;
  --pastel-lila-texto: #6b21a8;

  --pastel-gris-bg: #eceff1;
  --pastel-gris-texto: #455a64;

  --pastel-naranja-bg: #fde8d8;
  --pastel-naranja-texto: #9a3b12;

  --pastel-rojo-bg: #fde0e0;
  --pastel-rojo-texto: #b91c1c;

  /* Paleta decorativa para los puntos de color de Etapa (se asigna por hash del
     nombre, las etapas no tienen columna color propia en la BD) */
  --paleta-etapa-1: #f472b6;
  --paleta-etapa-2: #34d399;
  --paleta-etapa-3: #60a5fa;
  --paleta-etapa-4: #fbbf24;
  --paleta-etapa-5: #a78bfa;
  --paleta-etapa-6: #94a3b8;
  --paleta-etapa-7: #fb923c;
  --paleta-etapa-8: #4ade80;

  /* Gris de respaldo cuando no se encuentra el color real (prioridad/etapa) */
  --color-fallback-etiqueta: #94a3b8;

  /* Alertas (fondo semitransparente + texto, el borde ya usa --danger/--success) */
  --alerta-error-bg: rgba(218, 68, 83, 0.12);
  --alerta-error-texto: #7a1a24;
  --alerta-exito-bg: rgba(39, 174, 96, 0.12);
  --alerta-exito-texto: #155d34;

  /* Botones de accion con icono (PDF/Excel/Correo): fondo base blanco/tema,
     borde+texto de color, y variantes hover/active mas intensas */
  --btn-pdf-texto: #b03a3a;
  --btn-pdf-borde: #e8c4c4;
  --btn-pdf-hover-bg: #fdf2f2;
  --btn-pdf-hover-borde: #d98c8c;
  --btn-pdf-hover-texto: #9a2f2f;
  --btn-pdf-hover-sombra: rgba(176, 58, 58, 0.15);
  --btn-pdf-active-bg: #fbe4e4;
  --btn-pdf-active-borde: #c47272;

  --btn-excel-texto: #1d6f42;
  --btn-excel-borde: #b9dcc7;
  --btn-excel-hover-bg: #f0f9f4;
  --btn-excel-hover-borde: #8ec7a5;
  --btn-excel-hover-texto: #145a33;
  --btn-excel-hover-sombra: rgba(29, 111, 66, 0.15);
  --btn-excel-active-bg: #dcf0e4;
  --btn-excel-active-borde: #6fb589;

  --btn-correo-texto: #1d4ed8;
  --btn-correo-borde: #bfdbfe;
  --btn-correo-hover-bg: #eff6ff;
  --btn-correo-hover-borde: #93c5fd;
  --btn-correo-hover-texto: #1e40af;
  --btn-correo-hover-sombra: rgba(29, 78, 216, 0.15);
  --btn-correo-active-bg: #dbeafe;
  --btn-correo-active-borde: #60a5fa;
}