/* ============================================================
   WORKING DUCKS — Design System v2.0 "Glass"
   Tokens extraídos del SVG design-system-glass-v2.svg
   Uso: cargar antes que cualquier otra hoja de estilo.
   ============================================================ */

:root {
  /* ---- Colores de marca ---- */
  --wd-yellow:   #FFC309;  /* Amarillo / Primario  */
  --wd-orange:   #FF9400;  /* Naranja / Secundario */
  --wd-purple:   #3D358A;  /* Púrpura / Accent     */
  --wd-lavender: #A0A1DA;  /* Lavanda / Soft       */
  --wd-grad:     linear-gradient(135deg, #FFC309 0%, #FF9400 100%);
  --wd-grad-purple: linear-gradient(135deg, #4B429E 0%, #3D358A 100%);

  /* ---- Neutros ---- */
  --wd-white:    #FFFFFF;
  --wd-bg:       #FAFAFA;
  --wd-surface:  #F5F5F5;
  --wd-border:   #E5E7EB;
  --wd-text-3:   #9E9E9E;  /* Texto terciario  */
  --wd-text-2:   #6B7280;  /* Texto secundario */
  --wd-text-1:   #1A1A1A;  /* Texto primario   */

  /* ---- Semánticos ---- */
  --wd-success:  #16A34A;  /* Éxito / Activo   */
  --wd-warning:  #FF9400;  /* Advertencia      */
  --wd-error:    #EF4444;  /* Error / Atrasado */
  --wd-progress: #CA8A04;  /* En progreso      */

  /* ---- Ambiente / fondo ---- */
  --wd-header-grad: linear-gradient(120deg, #EDE9F7 0%, #F4F1FA 55%, #F3F1FA 100%);
  --wd-page-grad:   linear-gradient(160deg, #F7F5FC 0%, #FAFAFA 55%, #F4F2FB 100%);

  /* ---- Glass (vidrio esmerilado) ---- */
  --glass-nav:   rgba(255,255,255,0.80);
  --glass-card:  rgba(255,255,255,0.70);
  --glass-col:   rgba(255,255,255,0.65);
  --glass-pill:  rgba(255,255,255,0.50);
  --glass-blur:  blur(16px);
  --glass-border: 1px solid rgba(255,255,255,0.55);
  --glass-stroke: 1px solid var(--wd-border);

  /* ---- Sombras ---- */
  --shadow-low:  0 1px 3px rgba(26,26,26,0.06), 0 1px 2px rgba(26,26,26,0.04);
  --shadow-md:   0 6px 24px rgba(61,53,138,0.08);
  --shadow-halo: 0 8px 30px rgba(255,148,0,0.18);

  /* ---- Espaciado ---- */
  --sp-page:   28px;
  --sp-card:   24px;
  --sp-section:20px;
  --sp-col:    16px;
  --sp-item:   12px;

  /* ---- Radios ---- */
  --r-card:  20px;
  --r-inner: 16px;
  --r-btn:   12px;
  --r-pill:  999px;

  /* ---- Tipografía ---- */
  --font-sans: "Google Sans", "Product Sans", "Inter", system-ui, -apple-system, sans-serif;
  --font-logo: "Archivo Black", "Google Sans", system-ui, sans-serif;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--wd-text-1);
  background: var(--wd-page-grad);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Blobs de ambiente (decorativos) */
.wd-blob {
  position: fixed; border-radius: 50%; filter: blur(100px);
  z-index: -1; pointer-events: none;
}
.wd-blob--yellow { width: 420px; height: 420px; background: #DAD8F0; opacity: .35; top: -140px; right: -100px; }
.wd-blob--purple { width: 420px; height: 420px; background: #C7C3EC; opacity: .30; bottom: -140px; left: -100px; }

/* ---------- Tipografía ---------- */
.h-xl { font-size: 34px; font-weight: 300; letter-spacing: -.5px; margin: 0; }
.h-l  { font-size: 28px; font-weight: 600; margin: 0; }
.h-m  { font-size: 15px; font-weight: 600; margin: 0; }
.body { font-size: 13px; font-weight: 400; }
.caption { font-size: 11px; font-weight: 400; color: var(--wd-text-3); }
.eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--wd-text-3); }

/* ---------- Glass card ---------- */
.glass {
  background: var(--glass-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-md);
}
.glass-solid {
  background: var(--wd-white);
  border: var(--glass-stroke);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-low);
}

/* ---------- Botones ---------- */
.btn { font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  border: none; border-radius: var(--r-btn); padding: .55rem 1.1rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem; transition: transform .1s, box-shadow .15s; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--wd-grad); color: #2A2400; box-shadow: var(--shadow-halo); }
.btn--secondary { background: var(--wd-grad); color: #fff; }
.btn--dark { background: var(--wd-text-1); color: #fff; border-radius: var(--r-pill); }
.btn--ghost { background: transparent; color: var(--wd-purple); box-shadow: none; }
.btn--fab { background: var(--wd-grad); color: #fff; width: 44px; height: 44px; border-radius: 50%;
  justify-content: center; font-size: 20px; box-shadow: var(--shadow-halo); padding: 0; }

/* ---------- Status pills ---------- */
.pill { display: inline-flex; align-items: center; border-radius: var(--r-pill);
  padding: .22em .7em; font-size: 11px; font-weight: 700; }
.pill--activo      { background: #E6F7ED; color: var(--wd-success); }
.pill--progreso    { background: var(--wd-text-1); color: var(--wd-yellow); }
.pill--pausado     { background: #FFF6DE; color: var(--wd-progress); }
.pill--pendiente   { background: var(--wd-surface); color: var(--wd-text-2); }
.pill--atrasado    { background: #FDE7E7; color: var(--wd-error); }

/* ---------- Avatar ---------- */
.avatar { width: 34px; height: 34px; border-radius: 50%;
  background: var(--wd-grad-purple); color: #fff; font-weight: 700; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--wd-yellow); box-shadow: var(--shadow-low); }
.avatar--sm { width: 26px; height: 26px; font-size: 10px; border-width: 1.5px; }

/* ---------- Progress bar ---------- */
.progress { height: 6px; background: var(--wd-surface); border-radius: var(--r-pill); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--wd-grad); border-radius: var(--r-pill); }