/* ==========================================================================
   proratto-tokens.css — Tokens de marca ProRatto
   Paleta y modo claro/oscuro copiados del repo RattoDev/Presupuesto.
   ========================================================================== */
:root {
  --jd-green: #367C2B; --jd-green-dark: #2A6322; --jd-green-darker: #1F4B19;
  --jd-yellow: #FFDE00; --jd-yellow-dark: #E6C700; --jd-yellow-soft: #FFF4B0;
  --jd-black: #1A1A1A; --jd-gray-900: #2D2D2D; --jd-gray-700: #4F4F4F;
  --jd-gray-500: #828282; --jd-gray-400: #B0B0B0; --jd-gray-300: #D9D9D9;
  --jd-gray-200: #E8E8E8; --jd-gray-100: #F2F2F2; --jd-gray-50: #F9F9F9;
  --jd-white: #FFFFFF; --jd-danger: #C8102E;

  /* Estados de resultado de auditoría */
  --res-ok: #367C2B; --res-ok-bg: #EAF5E6;
  --res-warn: #C88A1E; --res-warn-bg: #FDF4E1;
  --res-bad: #C8102E; --res-bad-bg: #FCEDEC;
  --res-na: #828282; --res-na-bg: #F0F0F0;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.14);
  --radius: 10px; --radius-sm: 6px;
}

/* ===== 🌙 DARK MODE — acento oro suave (igual que Presupuesto) ===== */
html[data-theme="dark"] {
  --jd-gray-50:#0f1114; --jd-gray-100:#16181d; --jd-gray-200:#20242b; --jd-gray-300:#2c3138;
  --jd-gray-400:#3e444c; --jd-gray-500:#8a929b; --jd-gray-700:#c2c8cf; --jd-gray-900:#e6eaef;
  --jd-black:#f2f5f8; --jd-white:#181b20;
  --jd-green:#D6B95C; --jd-green-dark:#cbad4f; --jd-green-darker:#e6d49a;
  --jd-yellow:#D6B95C; --jd-yellow-dark:#cbad4f; --jd-yellow-soft:#272316;
  --jd-danger:#e5576f;

  --res-ok:#7fbf6f; --res-ok-bg:#1c2a17;
  --res-warn:#d8b45e; --res-warn-bg:#2a2416;
  --res-bad:#e5576f; --res-bad-bg:#2c1a1d;
  --res-na:#8a929b; --res-na-bg:#20242b;

  --shadow-md:0 4px 18px rgba(0,0,0,.5); --shadow-sm:0 2px 8px rgba(0,0,0,.45);
  --shadow-lg:0 12px 32px rgba(0,0,0,.6);
}
html[data-theme="dark"] body { background: var(--jd-gray-50); }
/* La marca (topbar) se queda VERDE en oscuro */
html[data-theme="dark"] header.topbar { background:#2f6b27; color:#fff; }
html[data-theme="dark"] header.topbar h1,
html[data-theme="dark"] header.topbar .subtitle { color:#fff; }
html[data-theme="dark"] .card,
html[data-theme="dark"] .detail-card { border:1px solid #24272d; }