/* Fichaje360ia — Design Tokens (per BRIEF spec)
   Palette: sky primary + slate text + emerald/amber/red functional + stone bg
   Type: Inter (system stack as fallback while iterating)
*/
:root {
  /* Primary — sky */
  --sky-50:  #f0f9ff;
  --sky-100: #e0f2fe;
  --sky-200: #bae6fd;
  --sky-300: #7dd3fc;
  --sky-400: #38bdf8;
  --sky-500: #0ea5e9;
  --sky-600: #0284c7;
  --sky-700: #0369a1;
  --sky-800: #075985;
  --sky-900: #0c4a6e;

  /* Neutrals — slate */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  /* Stone (PWA bg) */
  --stone-50:  #fafaf9;
  --stone-100: #f5f5f4;
  --stone-200: #e7e5e4;

  /* Functional */
  --emerald-50:  #ecfdf5;
  --emerald-100: #d1fae5;
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --emerald-700: #047857;

  --amber-50:  #fffbeb;
  --amber-100: #fef3c7;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --amber-700: #b45309;

  --red-50:  #fef2f2;
  --red-100: #fee2e2;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 24px;
  --r-full: 9999px;

  /* Shadows */
  --sh-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 1px rgba(15,23,42,.03);
  --sh-md: 0 4px 12px rgba(15,23,42,.06), 0 2px 4px rgba(15,23,42,.04);
  --sh-lg: 0 12px 32px rgba(15,23,42,.08), 0 4px 12px rgba(15,23,42,.05);

  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
}

/* PWA base — scoped to .pwa */
.pwa {
  font-family: var(--font-sans);
  background: var(--stone-50);
  color: var(--slate-900);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
.pwa * { box-sizing: border-box; }
.pwa button { font-family: inherit; cursor: pointer; }

/* Tabular numbers for clocks/counters */
.tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Reusable pieces */
.pwa .card {
  background: #fff;
  border-radius: var(--r-lg);
  border: 1px solid var(--slate-200);
  box-shadow: var(--sh-sm);
}

.pwa .badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  padding: 3px 8px; border-radius: var(--r-full);
  text-transform: uppercase;
}
.pwa .badge.ok      { background: var(--emerald-50);  color: var(--emerald-700); }
.pwa .badge.warn    { background: var(--amber-50);    color: var(--amber-700); }
.pwa .badge.danger  { background: var(--red-50);      color: var(--red-700); }
.pwa .badge.info    { background: var(--sky-50);      color: var(--sky-700); }
.pwa .badge.neutral { background: var(--slate-100);   color: var(--slate-600); }