/* Lead Intelligence OS — design tokens (single source of truth).
   Coolors palette: 03045e-023e8a-0077b6-0096c7-00b4d8-48cae4-90e0ef-ade8f4-caf0f8 */
:root {
  /* Brand blue scale (Coolors) */
  --blue-900:#03045e; --blue-800:#023e8a; --blue-700:#0077b6; --blue-600:#0096c7;
  --blue-500:#00b4d8; --blue-400:#48cae4; --blue-300:#90e0ef; --blue-200:#ade8f4; --blue-100:#caf0f8;
  --brand-gradient: linear-gradient(135deg, #03045e 0%, #0077b6 55%, #00b4d8 100%);

  /* Surfaces + text */
  --bg:#f6f7f9; --surface:#ffffff; --surface-2:#f3f4f6;
  --text:#0c0d0e; --text-muted:#5b616e; --text-subtle:#8a909c; --muted:#5b616e;
  --border:#e7e9ee; --border-strong:#d6d9e0;

  /* Primary (role-mapped from the palette) */
  --primary:#0077b6; --primary-hover:#023e8a; --primary-tint:#caf0f8; --primary-bd:#90e0ef;

  /* Semantic (status — kept independent from brand) */
  --ok:#15803d; --ok-bg:#eafaf0; --ok-bd:#bfe6cc;
  --warn:#b45309; --warn-bg:#fdf5e9; --warn-bd:#f0dcb8;
  --bad:#b42318; --bad-bg:#fdf0ee; --bad-bd:#f2c9c3;
  --neutral:#5b616e; --neutral-bg:#f1f3f6; --neutral-bd:#e0e3ea;

  /* Shape + type */
  --radius:10px; --radius-sm:7px;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --shadow-lg: 0 1px 2px rgba(16,24,40,.04), 0 12px 32px rgba(16,24,40,.10);

  /* Motion (custom easing, never linear/ease-in-out) */
  --ease: cubic-bezier(.32,.72,0,1);
  --ease-out: cubic-bezier(.22,1,.36,1);
  --dur: .55s; --dur-fast: .22s;
}

/* Premium variable font (self-hosted, SIL OFL) */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/static/fonts/pjs.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}

/* Dark theme — its own neutral scale (not an inversion) */
[data-theme="dark"] {
  --bg:#0b0f17; --surface:#111826; --surface-2:#0e1420;
  --text:#eef2f7; --text-muted:#9fb0c3; --text-subtle:#7b8ca1; --muted:#9fb0c3;
  --border:#1e2a3d; --border-strong:#2a3a52;
  --primary:#48cae4; --primary-hover:#90e0ef; --primary-tint:rgba(72,202,228,.14); --primary-bd:#1e4b63;
  --ok:#4ade80; --ok-bg:rgba(74,222,128,.12); --ok-bd:#255c39;
  --warn:#fbbf24; --warn-bg:rgba(251,191,36,.12); --warn-bd:#5c4a1e;
  --bad:#f87171; --bad-bg:rgba(248,113,113,.12); --bad-bd:#5c2626;
  --neutral:#9fb0c3; --neutral-bg:rgba(159,176,195,.12); --neutral-bd:#2a3a52;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.5);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.5);
  color-scheme: dark;
}

/* Double-Bezel surface: outer shell + inner core (concentric radii) */
.bez {
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 8px);
  padding: 6px;
}
.bez > .bez-core {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
/* Let existing panels/tables sit inside a bezel without double borders */
.bez > .bez-core > .panel, .bez > .bez-core > .tablewrap, .bez > .bez-core > .kpis {
  border: none; box-shadow: none; background: transparent; border-radius: 0;
}

/* "Double-Bezel" shell without DOM changes: outer tinted ring + hairline + deep shadow */
.shell {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--text) 5%, transparent),
              0 0 0 6px var(--border),
              var(--shadow-lg);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.shell:hover { transform: translateY(-1px); }

/* Section header: coloured chip + accent line per section (--sec) */
.page-head { position:relative; padding-bottom:13px; }
.page-head::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--sec, var(--primary)) 0%,
             color-mix(in srgb, var(--sec, var(--primary)) 22%, transparent) 45%, transparent 100%); }
.page-head h1 { color:color-mix(in srgb, var(--sec, var(--text)) 38%, var(--text)); }
.sec-chip { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none;
  background:linear-gradient(140deg, var(--sec, var(--primary)), color-mix(in srgb, var(--sec, var(--primary)) 62%, #03045e));
  box-shadow:0 4px 12px color-mix(in srgb, var(--sec, var(--primary)) 32%, transparent); }
.sec-chip svg { width:17px; height:17px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* Thin share/progress track (phase tiles, share bars) */
.track { height:6px; border-radius:999px; overflow:hidden; background:color-mix(in srgb, var(--text) 8%, transparent); }
.track > i { display:block; height:100%; border-radius:999px; transition:width .5s var(--ease); }

/* Upload progress bar */
.prog { height:18px; border-radius:999px; overflow:hidden; background:color-mix(in srgb, var(--text) 8%, transparent);
        border:1px solid var(--border); }
.prog > i { display:block; height:100%; width:0; font-size:11px; font-style:normal; color:#fff; text-align:center;
            line-height:16px; background:linear-gradient(90deg, #00b4d8, #0077b6); transition:width .2s var(--ease); }

/* Grouped settings (Conexiones / Criterios) */
.grp-head { display:flex; align-items:center; gap:11px; padding:10px 13px; margin:18px 0 0;
             border-radius:var(--radius) var(--radius) 0 0; border:1px solid var(--border); border-bottom:none; }
.grp-head .ttl { font-weight:700; font-size:13.5px; }
.grp-head .sub { font-size:11.5px; color:var(--text-subtle); margin-top:1px; }
.grp-head .chip { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; flex:none; }
.grp-head .chip svg { width:14px; height:14px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.grp-sum { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 6px; }
.grp-sum a { display:flex; align-items:center; gap:7px; font-size:12px; text-decoration:none;
              color:var(--text); padding:5px 10px; border-radius:999px; border:1px solid var(--border); }
.grp-sum .sw { width:9px; height:9px; border-radius:50%; flex:none; }
.grp-sum .n { color:var(--text-subtle); }

/* Section tabs (merge related pages without new menu entries) */
.tabs { display:flex; gap:6px; flex-wrap:wrap; border-bottom:1px solid var(--border); margin:0 0 14px; }
.tabs .tab { font-size:13px; font-weight:600; color:var(--text-muted); text-decoration:none;
             padding:7px 12px; border:1px solid transparent; border-bottom:none; border-radius:8px 8px 0 0; }
.tabs .tab:hover { color:var(--text); background:color-mix(in srgb, var(--text) 4%, transparent); }
.tabs .tab.on { color:var(--primary-hover); background:var(--primary-tint); border-color:var(--primary-bd); }

/* Sidebar group labels (reduce menu scan cost) */
.nav .grp { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
            color:var(--text-subtle); padding:12px 12px 4px; }
.nav a { padding-top:7px; padding-bottom:7px; }

/* --- Widgets (DashSpace-inspired, palette-native) --- */
.delta { display:inline-flex; align-items:center; gap:3px; font-size:11.5px; font-weight:700;
         padding:2px 7px; border-radius:999px; }
.delta.up { color:var(--ok); background:var(--ok-bg); border:1px solid var(--ok-bd); }
.delta.down { color:var(--bad); background:var(--bad-bg); border:1px solid var(--bad-bd); }
.delta.flat { color:var(--text-muted); background:color-mix(in srgb, var(--text) 6%, transparent); border:1px solid var(--border); }
.kpi .spark { height:34px; margin-top:8px; }
.kpi .spark svg { display:block; width:100%; height:100%; }
.panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:14px 16px 0; }
.panel-head .ttl { font-weight:700; font-size:14px; }
.panel-head .sub { font-size:11.5px; color:var(--text-subtle); margin-top:2px; }
.timeline { display:flex; flex-direction:column; }
.timeline .ev { display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); }
.timeline .ev:last-child { border-bottom:none; }
.timeline .dot { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; flex:none;
                background:var(--primary-tint); color:var(--primary-hover); }
.timeline .ev .t { font-size:12.5px; }
.timeline .ev .m { font-size:11px; color:var(--text-subtle); }
.tasklist { display:flex; flex-direction:column; gap:8px; }
.tasklist .task { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--border);
                  border-radius:var(--radius-sm); background:var(--surface); }
.tasklist .task .k { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); }
.tasklist .task .c { font-size:13px; font-weight:600; }
.tasklist .task .due { margin-left:auto; font-size:11px; color:var(--text-muted); }
.tasklist .task.overdue { border-color:var(--bad-bd); background:var(--bad-bg); }
.tasklist .task.overdue .due { color:var(--bad); font-weight:600; }
.avatar { width:26px; height:26px; border-radius:50%; display:inline-grid; place-items:center;
          font-size:10.5px; font-weight:700; color:#023e8a; background:#caf0f8; flex:none; }
.kpi { position:relative; }
.kpi-chip { position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:50%;
            display:grid; place-items:center; color:#fff; box-shadow:0 4px 10px color-mix(in srgb, #03045e 22%, transparent); }
.kpi-chip svg { width:15px; height:15px; fill:none; stroke:#fff; }
.minis { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px; }
.mini { text-align:center; padding:8px 6px; border:1px solid var(--border); border-radius:var(--radius-sm); }
.mini .n { font-size:15px; font-weight:700; }
.mini .l { font-size:10.5px; color:var(--text-subtle); margin-top:2px; }
.donut-legend { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:8px; }
.donut-legend .lg { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-muted); }
.donut-legend .sw { width:10px; height:10px; border-radius:3px; flex:none; }
.lrow { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); }
.lrow:last-child { border-bottom:none; }
.lrow .nm { font-size:13px; font-weight:600; }
.lrow .em { font-size:11px; color:var(--text-subtle); }
.lrow .rt { margin-left:auto; text-align:right; font-size:12.5px; font-weight:700; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(14px); filter: blur(4px);
          transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), filter var(--dur) var(--ease); }
.reveal.in { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
@media print {
  .sidebar, .actions, form { display: none !important; }
  body { display: block; background: #fff; }
  .page { max-width: none; padding: 0; }
}