/* Capa de tema de eComm360 (references/theme.css) sin Tailwind: oscuro, lateral claro y alias. */
:root {
  --font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --overlay: rgba(20, 29, 58, 0.35); /* backdrop behind dialogs and the mobile drawer */
  --selected: var(--teal-soft);      /* selected row/card */
  --tag-orange: #fbe9dc; --tag-orange-t: #8f4a1c;
  --tag-pink: #f9e6ef;   --tag-pink-t: #8f2f5c;
  --tag-teal: #dcf1ec;   --tag-teal-t: #1d6656;
  /* Floating layers (menus, popovers, dialogs). Cards use --card-shadow. */
  --float: 0 0 0 1px rgba(20, 29, 58, 0.04), 0 12px 32px rgba(20, 29, 58, 0.14);
}

/* Dark mode: same token names, dark values. The sidebar is already navy, so it only gets a touch darker. */
.dark {
  --navy: #e6ebf5; --text: #c9d0db; --muted: #9aa6b8; --subtle: #6f7a8c;
  --bg: #161b26; --page: #0f131b; --side: #0c1424; --side-text: #d6deeb; --side-muted: #7f92b5;
  --hover: #1e2532; --active: #252d3b; --line: #252d3a; --tile-line: #2a3342; --tile-line-hover: #3a4558; --cyan-line: #1d4652;
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --teal: #5cc0d4; --teal-strong: #23809a; --teal-soft: #13303a; --teal-line: #2a6676;
  --fill-paper: #1a2030; --fill-cyan: #12303a; --fill-teal: #2a8aa0; --cyan-700: #5cc0d4; --column: #131925;
  --tag-gray: #262d3a;   --tag-gray-t: #c3cad6;
  --tag-blue: #16263f;   --tag-blue-t: #9cc0ee;
  --tag-purple: #251d3a; --tag-purple-t: #c4b2ec;
  --tag-green: #142e22;  --tag-green-t: #8fd3ae;
  --tag-amber: #33270f;  --tag-amber-t: #e8c27a;
  --tag-red: #3a1b18;    --tag-red-t: #eda39a;
  --tag-cyan: #12303a;   --tag-cyan-t: #8fd2e0;
  --overlay: rgba(0, 0, 0, 0.55);
  --tag-orange: #36210f; --tag-orange-t: #f0b182;
  --tag-pink: #371a28;   --tag-pink-t: #eda6c6;
  --tag-teal: #10302a;   --tag-teal-t: #86d3c1;
  --ok: #3fae7a; --warn: #e0a33a; --bad: #e06a5e; --idle: #6b7484; --info: #5cc0d4;
  --float: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.5);
}
/* Theme «Todo claro» (html.side-light, never together with .dark): white sidebar like Concepto A. */
.side-light {
  --side: #ffffff; --side-text: #2a3340; --side-muted: #6b7a90; --side-hover: #f1f5f9; --side-line: #e1e8f0;
  --side-title: #141d3a; --side-border: #e1e8f0;
  --side-active-bg: #e6f4f7; --side-active-text: #141d3a; --side-active-icon: #2a8aa0;
}
/* In dark mode navy is the light ink, so the filled pieces need their own dark surface. */
.dark .tile.navy { background: #1b2647; color: #c9d3e6; }
.dark .tile.cyan { border-color: transparent; }
.dark .ai-label { background: rgba(255, 255, 255, 0.08); }
.dark .check { border-color: var(--subtle); }
.dark .btn.primary { color: var(--bg); }
.dark .btn.primary svg.lucide { color: var(--bg); }
.dark .btn.primary:hover { background: #ffffff; }

/* The app's semantic names, pointed at the tokens. Every bg-, text- and border- utility follows. */
:root, .dark {
  --bg-subtle: var(--page);
  --bg-muted: var(--fill-paper);
  --bg-hover: var(--hover);
  --border: var(--line);
  --border-strong: var(--tile-line);
  --fg: var(--text);
  --fg-muted: var(--muted);
  --fg-subtle: var(--subtle);
  --accent: var(--navy);
  --accent-fg: #ffffff;
  --accent-soft: var(--teal-soft);
  --danger: var(--bad);
  --success: var(--ok);
}
.dark { --accent-fg: var(--bg); }