@import url("assets/tokens.css");

@keyframes dotpulse { 0%,100%{opacity:.3} 50%{opacity:1} }
.dot-pulse { display:inline-block; animation: dotpulse 1.2s ease-in-out infinite; color:#F47920; font-size:18px; vertical-align:middle; margin-right:6px; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* ── Theme + density tokens (driven by Tweaks panel) ───── */
body {
  /* DARK theme defaults — overridden by [data-theme="light"] below */
  --app-bg:          var(--mx-bg-dark);
  --app-surface:     hsl(210 18% 16%);
  --app-surface-2:   #0D1826;
  --app-border:      hsl(210 15% 22%);
  --app-border-soft: var(--app-tint-3);
  --app-fg-1:        var(--mx-fg-dark-1);
  --app-fg-2:        rgba(255,255,255,.72);
  --app-fg-3:        var(--app-fg-3);
  --app-fg-4:        rgba(255,255,255,.35);
  --app-fg-5:        rgba(255,255,255,.22);
  --app-hover:       var(--app-tint-2);
  --app-row-hover:   rgba(255,255,255,.02);
  --app-shadow:      0 20px 60px rgba(0,0,0,.5);
  /* Surface tint scale — used to replace hardcoded rgba(255,255,255,.X)
     literals so theming flips work across the whole UI. Each step is a
     subtle accumulation of "fog" over the base surface. */
  --app-tint-1: rgba(255,255,255,.025);
  --app-tint-2: var(--app-tint-2);
  --app-tint-3: rgba(255,255,255,.07);
  --app-tint-4: var(--app-tint-4);
  --app-tint-5: var(--app-tint-5);
  --app-tint-6: rgba(255,255,255,.18);
  /* Density vars (default = comfortable) */
  --d-pad-y:        14px;
  --d-pad-x:        24px;
  --d-card-pad:     18px 20px;
  --d-kpi-pad:      14px 16px 16px;
  --d-row-pad:      12px;
  --d-row-pad-th:   10px 12px;
  --d-gap:          12px;
  --d-section-mt:   24px;
  --d-fs-body:      var(--mx-fs-body-sm);  /* 14px */
  --d-fs-table:     12.5px;
  --d-fs-kpi-val:   28px;
  --d-fs-kpi-label: 11px;
  --d-fs-card-h:    14px;
  --d-nav-pad:      9px 10px;
  --d-nav-fs:       13px;
}
body[data-density="compact"] {
  --d-pad-y:        9px;
  --d-pad-x:        18px;
  --d-card-pad:     12px 14px;
  --d-kpi-pad:      10px 12px 12px;
  --d-row-pad:      7px 9px;
  --d-row-pad-th:   7px 9px;
  --d-gap:          8px;
  --d-section-mt:   16px;
  --d-fs-body:      12.5px;
  --d-fs-table:     11.5px;
  --d-fs-kpi-val:   24px;
  --d-fs-kpi-label: 10px;
  --d-fs-card-h:    13px;
  --d-nav-pad:      6px 9px;
  --d-nav-fs:       12px;
}
body[data-density="cozy"] {
  --d-pad-y:        20px;
  --d-pad-x:        32px;
  --d-card-pad:     24px 26px;
  --d-kpi-pad:      18px 20px 20px;
  --d-row-pad:      16px 14px;
  --d-row-pad-th:   13px 14px;
  --d-gap:          16px;
  --d-section-mt:   32px;
  --d-fs-body:      15px;
  --d-fs-table:     13.5px;
  --d-fs-kpi-val:   32px;
  --d-fs-kpi-label: 12px;
  --d-fs-card-h:    15px;
  --d-nav-pad:      12px 12px;
  --d-nav-fs:       14px;
}
/* LIGHT theme — warm cream palette (approved via mockup). Keeps the same
   orange accent as dark; uses off-white instead of pure white so the platform
   feels less clinical during long sessions. */
body[data-theme="light"] {
  --app-bg:          #F7F6F3;   /* warm off-white */
  --app-surface:     #FFFFFF;   /* cards on top of bg */
  --app-surface-2:   #FAF8F4;   /* table headers, subtle panels */
  --app-border:      #E8E5DF;   /* primary border */
  --app-border-soft: rgba(26,22,20,.06);
  --app-fg-1:        #1A1614;   /* primary text — warm near-black */
  --app-fg-2:        #3D3833;   /* secondary text */
  --app-fg-3:        #6B655D;   /* muted text */
  --app-fg-4:        #9A9388;   /* placeholder / disabled */
  --app-fg-5:        #B5AFA1;   /* ultra-faded */
  --app-hover:       #F2EFEA;   /* button + nav hover */
  --app-row-hover:   #F2EFEA;   /* table row hover */
  --app-shadow:      0 8px 24px rgba(26,22,20,.08);
  /* Surface tint scale — solid warm beiges that mirror the dark theme's
     fog accumulation. Each step is a step darker on cream. */
  --app-tint-1: #FAF8F4;
  --app-tint-2: #F2EFEA;
  --app-tint-3: #E8E5DF;
  --app-tint-4: #DBD6CC;
  --app-tint-5: #CBC5B9;
  --app-tint-6: #B5AFA1;
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT THEME · polish overrides
   These tackle the cases that need MORE than a CSS variable flip —
   shadows that are heavy-handed in light, gradients tied to dark
   backgrounds, KAI fox styling, and accent colors that need darker
   hues for contrast on white.
   ═══════════════════════════════════════════════════════════════════ */

/* Status pill colors — darker variants of the accents for legible
   contrast on the cream/white backgrounds. */
body[data-theme="light"] .tag.green,
body[data-theme="light"] .status-pill.sent {
  background: rgba(22,163,74,.10); color: #15803D;
}
body[data-theme="light"] .tag.red {
  background: rgba(220,38,38,.10); color: #B91C1C;
}
body[data-theme="light"] .tag.amber,
body[data-theme="light"] .status-pill.pending {
  background: rgba(217,119,6,.10); color: #B45309;
}
body[data-theme="light"] .tag.orange {
  background: rgba(244,121,32,.12); color: #C9610C;
}
body[data-theme="light"] .tag.blue {
  background: rgba(37,99,235,.10); color: #1D4ED8;
}

/* "up"/"down" delta indicators — same idea, darker hues for white bg. */
body[data-theme="light"] .up,
body[data-theme="light"] .kpi .delta.up    { color: #15803D; }
body[data-theme="light"] .down,
body[data-theme="light"] .kpi .delta.down  { color: #B91C1C; }

/* KAI fox in light mode — the transparent PNG drop-shadow is too dark.
   Soften it AND wrap with a subtle white ring so the fox doesn't appear
   to float disconnected on the cream background. */
body[data-theme="light"] .kai-avatar {
  filter: drop-shadow(0 2px 5px rgba(26,22,20,.18));
}
body[data-theme="light"] .kai-hero__avatar,
body[data-theme="light"] .kai-float .kai-avatar {
  background: var(--app-fg-2);
  border-radius: 50%;
  padding: 4px;
  box-shadow: 0 4px 14px -4px rgba(244,121,32,.35),
              inset 0 0 0 1px rgba(244,121,32,.12);
}

/* KAI aura rings — softer on white. */
body[data-theme="light"] .kai-hero__aura {
  border-color: rgba(244,121,32,.20);
  opacity: .8;
}
body[data-theme="light"] .kai-hero__aura--2 {
  border-color: rgba(244,121,32,.28);
}

/* Sparkle accent — gold on white reads better than pure orange. */
body[data-theme="light"] .kai-hero__spark {
  color: rgba(244,121,32,.55);
  text-shadow: 0 0 4px rgba(244,121,32,.20);
}

/* Modal backdrop — the dark mode uses heavy black blur. Light needs less. */
body[data-theme="light"] .modal-overlay {
  background: rgba(26,22,20,.30);
  backdrop-filter: blur(4px);
}

/* Scrollbars — match the cream surface. */
body[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(26,22,20,.18);
}
body[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(26,22,20,.30);
}

/* Boot splash + login screen — these have dark gradient backgrounds tied
   to the brand mood. Keep them dark even in light mode so the entry
   point feels cinematic; the app itself flips after auth. */
body[data-theme="light"] .login-screen,
body[data-theme="light"] .boot-splash {
  /* explicitly opt out — uses its own dark colors */
}

/* KPI tiles — the orange-tinted gradient overlay in dark looks great but
   washes out on cream. Tone it down for light. */
body[data-theme="light"] .kpi::before {
  background: linear-gradient(135deg, rgba(244,121,32,.05), transparent 60%);
}

/* Sidebar nav-item active — make orange tint readable on cream. */
body[data-theme="light"] .nav-item.active,
body[data-theme="light"] .nav-item.is-active {
  background: rgba(244,121,32,.12);
  color: #C9610C;
}
body[data-theme="light"] .nav-item:hover { color: var(--app-fg-1); background: var(--app-hover); }

/* Sparkline & chart bar colors — dark uses near-white grids; light needs
   darker grid + slightly darker bars so they read. */
body[data-theme="light"] .spark-grid,
body[data-theme="light"] svg .grid-line {
  stroke: rgba(26,22,20,.10);
}

/* Topbar shadow — light mode wants a subtler hairline instead of the
   dark mode's heavy bottom shadow. */
body[data-theme="light"] .topbar,
body[data-theme="light"] .page-header {
  box-shadow: 0 1px 0 var(--app-border);
}

body {
  background: var(--app-bg);
  color: var(--app-fg-1);
  font-family: var(--mx-font-sans);
  font-size: var(--d-fs-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button { font-family: inherit; cursor: pointer; border: 0; }
input, textarea, select { font-family: inherit; }

/* ── App shell ─────────────────────────── */
.app {
  display: flex;
  min-height: 100vh;
  /* No zoom here — the sidebar stays at native viewport scale so its
     `height: 100vh` matches reality exactly. Zoom is applied to .main only.
     This is what makes the independent sidebar scroll work properly. */
}
.main {
  flex: 1;
  min-width: 0;
  /* Scale main content for readability. The sidebar stays at native scale. */
  zoom: 1.18;
}
.app.is-presenting .main { zoom: 1.36; }

/* ── Sidebar collapsed mode ──────────────────────────────────────
   Activated when the user clicks the toggle button in the brand header.
   Narrows the sidebar to ~64px, hides labels, shows just icons + the
   "M" mini logo. Persists in localStorage. */
.app.is-sidebar-collapsed .sidebar-brand { padding: 14px 6px; justify-content: center; }

/* Logo swap: mini "M" shown only when collapsed, full logo otherwise.
   Doubled-class selectors (.brand-logo.brand-logo--mini) keep these rules
   one level above the generic `.sidebar-brand .brand-logo` block, which
   otherwise wins by source order and forces display:block on the mini. */
.sidebar-brand .brand-logo.brand-logo--mini { display: none; }
.app.is-sidebar-collapsed .sidebar-brand .brand-logo.brand-logo--full { display: none; }
.app.is-sidebar-collapsed .sidebar-brand .brand-logo.brand-logo--mini {
  display: block;
  height: 56px;
  width: 56px;
  margin: 0 auto;
  object-fit: contain;
  background: transparent;
}
.app.is-sidebar-collapsed .sidebar-brand {
  flex-direction: column;
  gap: 8px;
  padding: 6px 4px 18px;
  position: relative;
}
.app.is-sidebar-collapsed .sidebar-brand-tag { display: none; }
.app.is-sidebar-collapsed .nav-section { display: none; }
.app.is-sidebar-collapsed .nav-item {
  justify-content: center;
  padding: 12px 6px;
  position: relative;
}
.app.is-sidebar-collapsed .nav-item__label { display: none; }
.app.is-sidebar-collapsed .nav-item .badge {
  margin: 0;
  position: absolute;
  top: 4px; right: 4px;
  min-width: 18px;
  padding: 0 5px;
  height: 16px;
  display: grid;
  place-items: center;
  font-size: 9.5px;
}
/* Note: in collapsed mode we rely on the native `title` attribute for
   tooltips (set in JSX when collapsed). A CSS pseudo-tooltip would
   force `overflow-x: visible` on the sidebar, which then breaks the
   independent vertical scroll. Native tooltip is the cleaner trade. */

/* User card in collapsed mode → avatar only, stacked controls. */
.app.is-sidebar-collapsed .user-card {
  flex-direction: column;
  padding: 8px 4px;
  gap: 8px;
}
.app.is-sidebar-collapsed .user-card__info { display: none; }

/* Collapse/expand toggle — lives in the user-card alongside other controls.
   Mirrors the styling of .user-logout / .user-present so the three buttons
   read as a row of related actions. */
.user-collapse {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--app-tint-3);
  color: var(--app-fg-3);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  flex-shrink: 0;
}
.user-collapse:hover {
  background: rgba(244,121,32,.1);
  color: #F47920;
  border-color: rgba(244,121,32,.3);
}
.rot270 { transform: rotate(90deg); }

/* Scroll is owned by .sidebar-scroll (the middle region between brand
   and user-card). The .sidebar itself has overflow:hidden so the brand
   row and the user-card stay pinned to top/bottom respectively. */

/* Toggle button in the sidebar user card */
.user-present {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--app-tint-3);
  color: var(--app-fg-3);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  flex-shrink: 0;
}
.user-present:hover {
  background: rgba(244,121,32,.1);
  color: #F47920;
  border-color: rgba(244,121,32,.3);
}
.user-present.is-active {
  background: linear-gradient(135deg, #F47920, #C4541A);
  color: #fff;
  border-color: rgba(244,121,32,.7);
  box-shadow: 0 2px 8px rgba(244,121,32,.3);
}

/* ── Sidebar ──────────────────────────── */
.sidebar {
  background: var(--app-surface-2);
  border-right: 1px solid var(--app-border-soft);
  flex: 0 0 244px;
  width: 244px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 0;
  /* Sidebar height locked to viewport so internal scroll works. The
     parent `.app` flex container lets sidebar's `height: 100vh` resolve
     correctly (no grid row stretching to the height of main). */
  height: 100vh;
  max-height: 100vh;
  /* Internal scroll context: vertical only, horizontal never overflows. */
  overflow: hidden;
  /* All padding goes on inner regions so the sticky brand + user-card
     can have their own backgrounds when needed. */
  padding: 0;
}
.app.is-sidebar-collapsed .sidebar { flex: 0 0 72px; width: 72px; }

/* ── Sidebar RAIL mode ──────────────────────────────────────────────
   Sidebar lives in fixed position at the left edge. The main content
   reserves a 72px gutter so it never shifts. When the user hovers the
   rail, the .is-sidebar-collapsed class is removed via JS and the
   sidebar visually expands to its full 244px width, overlaying the
   content (without pushing it). */
.app.is-sidebar-rail .sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 80;
  flex: 0 0 72px;             /* keep the flex slot stable for collapsed state */
  transition: width .18s ease, box-shadow .18s ease;
}
.app.is-sidebar-rail .main {
  margin-left: 72px;          /* permanent gutter — content never reflows */
}
/* While hovered (no .is-sidebar-collapsed), the sidebar grows to its base
   244px width and casts a soft elevation shadow so it reads as floating. */
.app.is-sidebar-rail:not(.is-sidebar-collapsed) .sidebar {
  box-shadow: var(--app-shadow), 0 12px 32px rgba(0,0,0,.25);
}
body[data-theme="light"] .app.is-sidebar-rail:not(.is-sidebar-collapsed) .sidebar {
  box-shadow: 0 12px 28px rgba(26,22,20,.16), 0 2px 6px rgba(26,22,20,.06);
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px 16px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--app-tint-2);
}

/* Scrollable nav section — the middle of the sidebar between brand
   and user-card. This is THE scroll container; sidebar itself doesn't
   scroll. Independent from the main page scroll. */
.sidebar-scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(244,121,32,.3) transparent;
}
.sidebar-scroll::-webkit-scrollbar { width: 6px; }
.sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb {
  background: var(--app-tint-4);
  border-radius: 999px;
}
.sidebar-scroll::-webkit-scrollbar-thumb:hover { background: rgba(244,121,32,.45); }
.app.is-sidebar-collapsed .sidebar-scroll { padding: 8px 8px 10px; }
.sidebar-brand img { height: 24px; }   /* legacy fallback */
.sidebar-brand .brand-logo {
  height: 30px;
  width: 149px;        /* fixed width matched to viewBox aspect 248:50 */
  color: var(--mx-orange);
  display: block;
  overflow: visible;   /* allow arrows to translate outside the box during animation */
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.sidebar-brand:hover .brand-logo { transform: scale(1.03); }

/* Entrance + continuous float for the upper-right arrows */
.brand-arrows {
  animation: brandArrowsFadeIn 0.7s cubic-bezier(.22, 1, .36, 1) backwards;
}
.brand-arrow {
  transform-box: fill-box;
  transform-origin: 50% 80%;
  animation: brandArrowEnter 0.65s cubic-bezier(.22, 1.4, .36, 1) backwards,
             brandArrowFloat 1.8s cubic-bezier(.4, 0, .2, 1) 0.65s infinite;
  transition: transform .2s cubic-bezier(.22, 1, .36, 1), opacity .2s ease;
}
.brand-arrow-back  { opacity: 0.55; animation-delay: 0s,    0.8s; }
.brand-arrow-front { opacity: 1;    animation-delay: 0.14s, 0.65s; }

/* Hover: arrows shoot up-right hard. Pause float to honor hover. */
.sidebar-brand:hover .brand-arrow         { animation-play-state: paused; }
.sidebar-brand:hover .brand-arrow-front   { transform: translate(10px, -14px); }
.sidebar-brand:hover .brand-arrow-back    { transform: translate(5px, -7px); opacity: 0.8; }

/* Subtle glow when hovering */
.sidebar-brand:hover .brand-text          { filter: drop-shadow(0 0 8px rgba(244, 121, 32, 0.35)); }

@keyframes brandArrowsFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes brandArrowEnter {
  from { transform: translate(-14px, 14px) scale(0.6); }
  to   { transform: translate(0, 0) scale(1); }
}
@keyframes brandArrowFloat {
  0%, 100%  { transform: translate(0, 0); }
  40%, 55%  { transform: translate(7px, -9px); }
}

.sidebar-brand-tag {
  font-family: var(--mx-font-display);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--mx-orange);
  text-transform: uppercase;
  font-weight: 700;
  padding: 2px 6px;
  border: 1px solid rgba(244, 121, 32, 0.35);
  border-radius: 4px;
  background: rgba(244, 121, 32, 0.08);
}
.nav-section {
  font-family: var(--mx-font-display);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--app-fg-4);
  text-transform: uppercase;
  font-weight: 700;
  padding: 14px 10px 6px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--d-nav-pad);
  border-radius: 6px;
  color: var(--app-fg-2);
  font-size: var(--d-nav-fs);
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: background .15s, color .15s;
  background: transparent;
  text-align: left;
  width: 100%;
}
.nav-item:hover { background: var(--app-hover); color: var(--app-fg-1); }
.nav-item.active {
  background: rgba(244,121,32,.12);
  color: var(--mx-orange);
  box-shadow: inset 2px 0 0 var(--mx-orange);
}
.nav-item .ico { width: 16px; height: 16px; flex: 0 0 16px; }
.nav-item .badge {
  margin-left: auto;
  background: var(--mx-orange);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
}
.nav-item .badge.muted { background: var(--app-tint-4); color: var(--app-fg-2); }

.user-card {
  flex-shrink: 0;
  margin: 8px 14px 14px;
  display: flex;
  flex-direction: column;     /* row 1: avatar+name · row 2: action icons */
  align-items: stretch;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  background: var(--app-tint-1);
  border: 1px solid var(--app-tint-3);
}
.user-card__top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.user-card__actions {
  display: flex; align-items: center; gap: 6px;
  padding-top: 9px;
  border-top: 1px solid var(--app-tint-3);
}
.user-card__actions > * { flex: 1; }   /* evenly share the row, no cramming */
.app.is-sidebar-collapsed .user-card { margin: 8px 8px 14px; padding: 8px 4px; gap: 8px; }
.app.is-sidebar-collapsed .user-card__top { justify-content: center; }
/* In the narrow rail, stack the icons vertically and drop the divider. */
.app.is-sidebar-collapsed .user-card__actions { flex-direction: column; gap: 8px; padding-top: 0; border-top: 0; }
.app.is-sidebar-collapsed .user-card__actions > * { flex: none; }
.user-card .avatar {
  width: 32px; height: 32px; border-radius: 999px;
  background: linear-gradient(135deg, #F47920, #E56A15);
  color: #fff; font-weight: 700; font-size: 12px;
  display: grid; place-items: center;
  font-family: var(--mx-font-display);
}
.user-card .name { font-size: 12px; font-weight: 600; color: var(--app-fg-1); }
.user-card .role { font-size: 10px; color: var(--app-fg-3); text-transform: uppercase; letter-spacing: 1px; }

/* ── Main area ───────────────────────── */
.main { display: flex; flex-direction: column; }

/* Page header (topbar + filter rail). Both stick together as a single
   block at the top of the main column, so brand + period stay visible
   while you scroll the content below. */
.page-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--app-surface-2) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.topbar {
  border-bottom: 1px solid var(--app-border-soft);
  padding: var(--d-pad-y) var(--d-pad-x);
  display: flex;
  align-items: center;
  gap: 14px;
}
.topbar .crumbs {
  font-family: var(--mx-font-display);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--app-fg-3);
  text-transform: uppercase;
}
.topbar .title {
  font-family: var(--mx-font-display);
  font-size: 22px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 2px 0 0;
}
.topbar-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.icon-btn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 6px;
  background: transparent;
  color: var(--app-fg-2);
  border: 1px solid var(--app-tint-4);
  position: relative;
}
.icon-btn:hover { background: var(--app-tint-2); color: var(--app-fg-1); }
.icon-btn .dot {
  position: absolute; top: 7px; right: 7px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--mx-orange); box-shadow: 0 0 0 2px var(--app-surface);
}

/* ── Filter rail ─────────────────────── */
.filter-rail {
  display: flex; align-items: center; gap: 10px;
  padding: var(--d-pad-y) var(--d-pad-x);
  border-bottom: 1px solid var(--app-border-soft);
  flex-wrap: wrap;
}
.brand-pill {
  display: flex; align-items: center; gap: 10px;
  background: var(--app-tint-2);
  border: 1px solid var(--app-tint-4);
  border-radius: 999px;
  padding: 5px 14px 5px 14px;
  font-size: 13px; font-weight: 600;
  color: var(--app-fg-1);
  cursor: pointer;
  transition: background .15s;
  /* Fixed width so the pill doesn't reshape when switching brands.
     Wide enough for the longest current name + comfortable room for future brands. */
  width: 260px;
  min-width: 260px;
  flex: 0 0 260px;
  justify-content: space-between;
}
.brand-pill:hover { background: var(--app-tint-3); }
/* Inner text column truncates long brand names cleanly. */
.brand-pill > div {
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
.brand-pill > div > span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-pill .swatch {
  width: 26px; height: 26px; border-radius: 999px;
  display: grid; place-items: center;
  color: var(--app-fg-1); font-weight: 700; font-size: 10px;
  font-family: var(--mx-font-display);
}
.brand-pill .chev { color: var(--app-fg-4); margin-left: 4px; flex: 0 0 auto; }

.seg {
  display: flex; gap: 0;
  background: var(--app-tint-2);
  border: 1px solid var(--app-tint-4);
  border-radius: 6px;
  padding: 3px;
}
.seg button {
  background: transparent; color: var(--app-fg-2);
  font-size: 12px; font-weight: 600;
  padding: 6px 12px;
  border-radius: 4px;
  display: flex; gap: 6px; align-items: center;
}
.seg button.active { background: var(--mx-orange); color: #fff; }
.seg button:not(.active):hover { color: var(--app-fg-1); }
.seg .seg-sub {
  font-family: var(--mx-font-display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--app-tint-4);
  color: var(--app-fg-2);
}
.seg button.active .seg-sub { background: rgba(0,0,0,.18); color: var(--app-fg-1); }

.period-pick {
  display: flex; align-items: center; gap: 8px;
  background: var(--app-tint-2);
  border: 1px solid var(--app-tint-4);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px; color: var(--app-fg-1);
  font-weight: 500;
}
.period-pick .label { color: var(--app-fg-3); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; font-family: var(--mx-font-display); }

.btn {
  background: var(--mx-orange);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 6px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s, transform .1s, box-shadow .15s;
}
.btn:hover { background: var(--mx-orange-hover); box-shadow: var(--mx-shadow-orange); }
.btn:active { transform: translateY(1px); }
.btn.ghost {
  background: transparent;
  color: var(--app-fg-1);
  border: 1px solid var(--app-tint-5);
}
.btn.ghost:hover { background: var(--app-tint-2); box-shadow: none; color: var(--app-fg-1); }
.btn.sm { padding: 5px 10px; font-size: 12px; }

/* ── Content ─────────────────────────── */
.content { padding: var(--d-pad-y) var(--d-pad-x) 80px; flex: 1; }

/* ── PeriodPicker calendar dropdown ─────────────────────────────── */
.period-dropdown {
  min-width: 420px;
  padding: 0;
  overflow: hidden;
  /* Override the generic .dropdown max-height so all presets fit without
     scrolling — the calendar + 7 presets need ~720px total. */
  max-height: none;
}
.cal {
  padding: 18px 18px 10px;
  border-bottom: 1px solid var(--app-tint-3);
}
.cal-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.cal-nav-btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--app-tint-4);
  border-radius: 6px;
  color: var(--app-fg-2);
  font-size: 18px; font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.cal-nav-btn:hover:not(:disabled) { background: var(--app-tint-2); border-color: var(--app-tint-6); color: var(--app-fg-1); }
.cal-nav-btn:disabled { opacity: 0.25; cursor: not-allowed; }
.cal-title {
  font-family: var(--mx-font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--app-fg-1);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
  width: 100%;
}
.cal-wd {
  font-family: var(--mx-font-display);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--app-fg-3);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  text-align: center;
  padding: 8px 0 6px;
  min-width: 0;
}
.cal-cell {
  height: 34px;
  display: grid; place-items: center;
  font-family: var(--mx-font-mono);
  font-size: 12.5px;
  border-radius: 6px;
  user-select: none;
  transition: background .12s, color .12s;
  min-width: 0;
}
/* Days from prev/next month — visible but grayed, not interactive. */
.cal-cell.outmonth {
  color: var(--app-tint-6);
  cursor: default;
}
.cal-cell.disabled {
  color: var(--app-fg-5);
  cursor: not-allowed;
  background: var(--app-tint-1);
}
/* Latest day in the dataset — orange striped overlay to flag it as the
   freshest (potentially still-syncing) day. Still fully selectable. */
.cal-cell.partial-bg {
  background: repeating-linear-gradient(
    -45deg,
    rgba(244,121,32,.10),
    rgba(244,121,32,.10) 4px,
    rgba(244,121,32,.20) 4px,
    rgba(244,121,32,.20) 8px
  ) !important;
  color: var(--mx-orange) !important;
  font-weight: 700;
}
/* Boundary/inrange overrides for partial day so selected state is still visible */
.cal-cell.bound.partial-bg { color: #fff !important; }
/* Section-lag day: this section hasn't received data for this calendar day yet
   (e.g. Vendor 1P arrives ~4 days late). Struck through in orange, not clickable. */
.cal-cell.nodata-strike {
  color: var(--mx-orange,#F47920) !important;
  opacity: .85;
  position: relative;
  cursor: not-allowed;
}
.cal-cell.nodata-strike::after {
  content: "";
  position: absolute;
  left: 16%; right: 16%; top: 50%;
  height: 2px;
  background: var(--mx-orange,#F47920);
  transform: rotate(-16deg);
  border-radius: 2px;
}
.cal-cell.day {
  color: var(--app-fg-1);
  cursor: pointer;
}
.cal-cell.day:hover { background: rgba(244,121,32,.18); color: var(--app-fg-1); }
.cal-cell.inrange {
  background: rgba(244,121,32,.16);
  color: var(--app-fg-1);
  cursor: pointer;
  border-radius: 0;
}
.cal-cell.bound {
  background: var(--mx-orange);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.cal-foot {
  margin-top: 8px;
  padding: 6px 4px 4px;
  font-size: 11px;
  color: var(--app-fg-3);
  font-family: var(--mx-font-mono);
}
.cal-foot strong { color: var(--app-fg-1); font-weight: 600; }
.cal-divider {
  position: relative;
  text-align: center;
  margin: 4px 0;
  padding: 8px 0 6px;
}
.cal-divider span {
  background: var(--app-surface);
  padding: 0 10px;
  font-family: var(--mx-font-display);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--app-fg-4);
  position: relative; z-index: 1;
}
.cal-divider::before {
  content: "";
  position: absolute;
  top: 50%; left: 14px; right: 14px;
  height: 1px;
  background: var(--app-tint-4);
}
.period-presets {
  padding: 4px 0 8px;
  /* No inner scroll — let the dropdown grow to show all presets at once. */
}

/* ── Trend panel (4 weekly line charts in 3P Sellers) ────────────── */
.trend-panel {
  background: var(--app-surface);
  border: 1px solid var(--app-border-soft);
  border-radius: 10px;
  padding: 14px 16px 10px;
}
.trend-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.trend-head h3 {
  font-family: var(--mx-font-display);
  font-size: 15px;
  font-weight: 800;
  color: var(--app-fg-1);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}
.trend-head .meta {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--app-fg-4);
  font-family: var(--mx-font-mono);
}
.trend-filters {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.trend-filters button {
  background: var(--app-tint-2);
  border: 1px solid var(--app-tint-4);
  border-radius: 999px;
  padding: 6px 12px;
  color: var(--app-fg-2);
  font-size: 11.5px;
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.trend-filters button:hover { background: var(--app-tint-3); color: var(--app-fg-1); }
.trend-filters button.active {
  background: var(--mx-orange);
  border-color: var(--mx-orange);
  color: #fff;
}
.trend-filters button .dot {
  width: 7px; height: 7px; border-radius: 50%;
  display: inline-block;
}
.trend-grid {
  display: grid;
  gap: 10px;
}
.trend-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.trend-grid.cols-1 { grid-template-columns: 1fr; }
@media (max-width: 1100px) {
  .trend-grid.cols-2 { grid-template-columns: 1fr; }
}
.trend-chart {
  background: var(--app-tint-1);
  border: 1px solid var(--app-tint-2);
  border-radius: 8px;
  padding: 8px 12px 6px;
  position: relative;
}
.trend-chart-title {
  font-family: var(--mx-font-display);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 2px;
}
/* Wider aspect ratio (18:5 instead of 12:5) so the 4 mini-charts in a
   2-col grid take ~half the vertical space — all four fit in a single
   viewport on a normal laptop screen. */
.trend-chart svg {
  width: 100%;
  aspect-ratio: 18 / 5;
  height: auto;
}
/* Click-popover floating above a selected dot */
.trend-popover {
  position: absolute;
  transform: translate(-50%, calc(-100% - 12px));
  background: var(--app-surface);
  border: 1px solid rgba(244,121,32,.35);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
  pointer-events: auto;
  z-index: 5;
  min-width: 150px;
}
.trend-popover .tp-week {
  font-family: var(--mx-font-mono);
  font-size: 10.5px;
  color: var(--app-fg-3);
  margin-bottom: 4px;
}
.trend-popover .tp-metric {
  font-family: var(--mx-font-display);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  margin-bottom: 2px;
}
.trend-popover .tp-value {
  font-family: var(--mx-font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--app-fg-1);
  white-space: nowrap;
}
.trend-popover::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  width: 10px; height: 10px;
  background: var(--app-surface);
  border-right: 1px solid rgba(244,121,32,.35);
  border-bottom: 1px solid rgba(244,121,32,.35);
  transform: translateX(-50%) rotate(45deg);
}

/* ── MTD range banner (sits above the budget bars) ────────────── */
.mtd-range-banner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  margin-bottom: 10px;
  background: linear-gradient(135deg, rgba(244,121,32,.10), rgba(244,121,32,.02) 70%, transparent);
  border: 1px solid rgba(244,121,32,.25);
  border-radius: 10px;
  flex-wrap: wrap;
}
.mtd-range-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mx-font-display);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--mx-orange);
  padding-right: 14px;
  border-right: 1px solid rgba(244,121,32,.18);
}
.mtd-range-dates {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mx-font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--app-fg-1);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.mtd-range-dates .arrow {
  color: var(--mx-orange);
  font-size: 16px;
  font-weight: 600;
}
.mtd-range-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.mtd-range-meta .days-pill {
  padding: 4px 10px;
  background: var(--mx-orange);
  color: #fff;
  border-radius: 999px;
  font-family: var(--mx-font-display);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.mtd-range-meta .hint {
  font-size: 11px;
  color: var(--app-fg-4);
  font-family: var(--mx-font-mono);
}

/* ── 3P Sellers context strip (brand · selected dates · comparison) ── */
.sales-context {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  padding: 16px 20px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(244,121,32,.06), rgba(244,121,32,.02) 60%, transparent);
  border: 1px solid rgba(244,121,32,.18);
  border-radius: 10px;
}
.sales-context-brand .brand-name {
  font-family: var(--mx-font-display);
  font-size: 26px;
  font-weight: 800;
  color: var(--app-fg-1);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 1.05;
}
.sales-context-brand .brand-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--app-fg-3);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: var(--mx-font-display);
  font-weight: 700;
}
.sales-context-brand .dot-sep { color: var(--app-fg-5); }
.sales-context-brand .mk-chip {
  display: inline-block;
  padding: 1px 7px;
  background: var(--app-tint-3);
  border-radius: 999px;
  font-size: 10px;
  color: var(--app-fg-2);
  letter-spacing: 1.2px;
}

.sales-context-dates {
  display: flex;
  align-items: stretch;
  gap: 24px;
}
.sales-context-dates .dates-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 180px;
}
.sales-context-dates .dates-block.compare {
  padding-left: 24px;
  border-left: 1px solid var(--app-tint-4);
}
.sales-context-dates .dates-label {
  font-family: var(--mx-font-display);
  font-size: 9.5px;
  color: var(--app-fg-4);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
}
.sales-context-dates .dates-period {
  font-family: var(--mx-font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--app-fg-1);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sales-context-dates .compare .dates-period { color: var(--app-fg-2); }
.sales-context-dates .dates-range {
  font-family: var(--mx-font-mono);
  font-size: 11.5px;
  color: var(--app-fg-2);
  margin-top: 2px;
}
.sales-context-dates .compare .dates-range { color: var(--app-fg-4); }
.sales-context-dates .dates-days { color: var(--app-fg-4); }
@media (max-width: 1080px) {
  .sales-context { grid-template-columns: 1fr; gap: 16px; }
  .sales-context-dates .dates-block.compare { padding-left: 0; border-left: 0; padding-top: 14px; border-top: 1px solid var(--app-tint-3); }
}

.section-h {
  display: flex; align-items: baseline; gap: 12px;
  margin: var(--d-section-mt) 0 12px;
}
.section-h h3 {
  font-family: var(--mx-font-display);
  font-size: 16px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--app-fg-1);
  font-weight: 700;
}
.section-h .meta { font-size: 11px; color: var(--app-fg-4); text-transform: uppercase; letter-spacing: 1px; }
.section-h .actions { margin-left: auto; display: flex; gap: 6px; }

/* ── KPI tiles ──────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--d-gap);
}
.kpi {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-top: 3px solid var(--mx-orange);
  border-radius: 9px;
  padding: var(--d-kpi-pad);
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
  transition: transform .2s, border-color .2s;
}
.kpi:hover { transform: translateY(-2px); border-color: hsl(210 15% 30%); border-top-color: var(--mx-orange); }
.kpi .label-row { display: flex; justify-content: space-between; align-items: baseline; }
.kpi .label { font-size: var(--d-fs-kpi-label); font-weight: 600; color: var(--app-fg-3); text-transform: uppercase; letter-spacing: .5px; }
.kpi .prev { font-size: 10px; color: var(--app-fg-4); font-family: var(--mx-font-mono); }
.kpi .value { font-family: var(--mx-font-display); font-size: var(--d-fs-kpi-val); font-weight: 800; line-height: 1; letter-spacing: -.01em; color: var(--app-fg-1); }
.kpi .delta { font-size: 12px; font-weight: 600; display: inline-flex; gap: 4px; align-items: center; }
.kpi .delta.up { color: hsl(142 71% 60%); }
.kpi .delta.down { color: hsl(0 72% 64%); }
.kpi .delta.neutral { color: var(--app-fg-3); }
.kpi .spark { height: 24px; margin-top: 4px; }

/* ── Card ─────────────────────────── */
.card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 10px;
  padding: var(--d-card-pad);
}
.card.padless { padding: 0; }
.card-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.card-head h4 {
  font-family: var(--mx-font-display);
  font-size: var(--d-fs-card-h); font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--app-fg-1);
}
.card-head .sub { font-size: 11px; color: var(--app-fg-3); }
.card-head .actions { margin-left: auto; display: flex; gap: 6px; }

/* ── Tables ─────────────────────────── */
.tbl { width: 100%; border-collapse: collapse; font-size: var(--d-fs-table); }
.tbl th {
  text-align: left; padding: var(--d-row-pad-th);
  font-family: var(--mx-font-display); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700;
  color: var(--app-fg-3);
  border-bottom: 1px solid var(--app-border);
  background: var(--app-row-hover);
}
.tbl td {
  padding: var(--d-row-pad);
  border-bottom: 1px solid var(--app-border-soft);
  color: var(--app-fg-1);
}
.tbl tr:hover td { background: var(--app-row-hover); }
.tbl .num { font-family: var(--mx-font-mono); text-align: right; }
.tbl .pct { font-family: var(--mx-font-mono); text-align: right; }

.up { color: hsl(142 71% 60%); }
.down { color: hsl(0 72% 64%); }

/* Light-theme sidebar — uses a slightly cooler beige than the main bg so
   it visually separates from the content area without being a hard
   contrast. The brand mark, nav, badges and user card all use themed
   variables instead of the old dark-only literals. */
body[data-theme="light"] .sidebar {
  background: #EFECE5;
  border-right: 1px solid var(--app-border);
}
body[data-theme="light"] .sidebar-brand {
  border-bottom-color: var(--app-border);
}
body[data-theme="light"] .nav-section { color: var(--app-fg-4); }
body[data-theme="light"] .nav-item { color: var(--app-fg-2); }
body[data-theme="light"] .nav-item:hover {
  background: rgba(26,22,20,.05);
  color: var(--app-fg-1);
}
body[data-theme="light"] .nav-item.active,
body[data-theme="light"] .nav-item.is-active {
  background: rgba(244,121,32,.14);
  color: #C9610C;
}
body[data-theme="light"] .nav-item .badge {
  background: var(--mx-orange);
  color: #fff;
}
body[data-theme="light"] .nav-item .ic { color: var(--app-fg-3); }
body[data-theme="light"] .nav-item.active .ic,
body[data-theme="light"] .nav-item.is-active .ic { color: #C9610C; }
body[data-theme="light"] .sidebar .user-card {
  background: #FFFFFF;
  border-top: 1px solid var(--app-border);
}
body[data-theme="light"] .sidebar .user-card .name { color: var(--app-fg-1); }
body[data-theme="light"] .sidebar .user-card .role { color: var(--app-fg-3); }
body[data-theme="light"] .sidebar .user-card .avatar {
  background: linear-gradient(135deg, var(--mx-orange), #D85F0E);
  color: #fff;
}
body[data-theme="light"] .sidebar .user-collapse,
body[data-theme="light"] .sidebar .user-logout,
body[data-theme="light"] .sidebar .user-present {
  color: var(--app-fg-3);
  border-color: var(--app-border);
}
body[data-theme="light"] .sidebar .user-collapse:hover,
body[data-theme="light"] .sidebar .user-present:hover {
  color: var(--mx-orange);
  border-color: rgba(244,121,32,.35);
  background: rgba(244,121,32,.06);
}
/* "Coming Soon" / "PRONTO" tags inside nav */
body[data-theme="light"] .nav-item .tag,
body[data-theme="light"] .nav-item .coming-soon {
  background: rgba(26,22,20,.06);
  color: var(--app-fg-3);
}
/* Light theme: the topbar inherits the page-header's cream blur background
   (the old design forced a dark bar with white text — removed so the header
   matches the rest of the light palette). Title + crumbs use the normal
   dark-on-light text tokens. */
body[data-theme="light"] .topbar { background: transparent; }
body[data-theme="light"] .topbar .title  { color: var(--app-fg-1); }
body[data-theme="light"] .topbar .crumbs { color: var(--app-fg-3); }
body[data-theme="light"] .icon-btn { color: var(--mx-gray); border-color: var(--mx-gray-border); }
body[data-theme="light"] .icon-btn:hover { color: var(--mx-navy); }
body[data-theme="light"] .icon-btn .dot { box-shadow: 0 0 0 2px #fff; }
body[data-theme="light"] .seg { background: var(--mx-off-white); border-color: var(--mx-gray-border); }
body[data-theme="light"] .seg button { color: var(--mx-gray); }
body[data-theme="light"] .seg button:not(.active):hover { color: var(--mx-navy); }
body[data-theme="light"] .btn.ghost { color: var(--mx-gray); border-color: var(--mx-gray-border); }
body[data-theme="light"] .btn.ghost:hover { color: var(--mx-navy); background: var(--mx-off-white); }
body[data-theme="light"] .kpi:hover { border-color: #cbd5e1; }
body[data-theme="light"] .kpi .prev { color: var(--mx-gray-light); }
body[data-theme="light"] .kpi .delta.neutral { color: var(--mx-gray-light); }

/* ── Misc ─────────────────────────── */
.tag {
  display: inline-flex; gap: 4px; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  font-family: var(--mx-font-display);
}
.tag.orange { background: rgba(244,121,32,.18); color: var(--mx-orange); }
.tag.green { background: rgba(37,211,102,.16); color: hsl(142 71% 60%); }
.tag.red { background: rgba(239,68,68,.16); color: hsl(0 72% 64%); }
.tag.blue { background: rgba(59,130,246,.16); color: #60A5FA; }
.tag.gray { background: var(--app-tint-3); color: var(--app-fg-2); }

/* Brand swatch — hidden globally per design decision (keep brand-name only). */
.bswatch { display: none !important; }

/* Brand switcher dropdown */
.dropdown {
  position: absolute; top: calc(100% + 6px); left: 0;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 10px;
  padding: 8px;
  min-width: 320px;
  max-height: 480px; overflow-y: auto;
  box-shadow: var(--app-shadow);
  z-index: 100;
}
.dropdown .search {
  background: var(--app-tint-2);
  border: 1px solid var(--app-tint-4);
  border-radius: 6px;
  padding: 8px 12px;
  color: var(--app-fg-1);
  font-size: 12.5px;
  width: 100%;
  outline: none;
  margin-bottom: 6px;
}
.dropdown .row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 6px;
  cursor: pointer;
}
.dropdown .row:hover { background: var(--app-tint-2); }
.dropdown .row.active { background: rgba(244,121,32,.12); }
.dropdown .row .name { font-size: 13px; font-weight: 600; color: var(--app-fg-1); }
.dropdown .row .meta { font-size: 10.5px; color: var(--app-fg-4); }
.dropdown .row .markets { margin-left: auto; display: flex; gap: 3px; }
.dropdown .row .mflag {
  font-size: 10px; padding: 1px 6px; border-radius: 999px;
  background: var(--app-tint-3); color: var(--app-fg-2);
  font-family: var(--mx-font-display); letter-spacing: 1px; font-weight: 700;
}

/* Charts */
.chart-wrap { padding: 6px 0; }
.bars {
  display: flex; align-items: flex-end; gap: 6px;
  height: 220px; padding: 8px 0;
}
.bars .bar {
  flex: 1; min-width: 0;
  background: linear-gradient(180deg, #F47920, rgba(244,121,32,.4));
  border-radius: 4px 4px 0 0;
  position: relative;
  transition: filter .2s;
  cursor: pointer;
}
.bars .bar:hover { filter: brightness(1.2); }
.bars .bar .lab {
  position: absolute; bottom: -22px; left: 0; right: 0;
  font-size: 9.5px; color: var(--app-fg-4); text-align: center;
  font-family: var(--mx-font-mono);
}
.bars .bar .v {
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  font-size: 9.5px; color: var(--app-fg-2);
  font-family: var(--mx-font-mono);
  white-space: nowrap;
}

/* AI panel */
.ai-msg {
  display: flex; gap: 10px; padding: 10px 0;
}
.ai-msg .av {
  width: 28px; height: 28px; border-radius: 6px;
  display: grid; place-items: center; flex: 0 0 28px;
  font-family: var(--mx-font-display); font-size: 11px; font-weight: 700;
}
.ai-msg .av.ai { background: linear-gradient(135deg, #F47920, #C4541A); color: #fff; }
.ai-msg .av.you { background: var(--app-tint-4); color: var(--app-fg-1); }
.ai-msg .body { font-size: 13px; line-height: 1.55; color: var(--app-fg-1); padding-top: 4px; }
.ai-msg .body .meta { font-size: 10.5px; color: var(--app-fg-4); margin-top: 6px; font-family: var(--mx-font-display); letter-spacing: 1px; text-transform: uppercase; }

/* ── Top SKUs table — title + IDs + expand for parent rollups ─── */
.sku-tbl td { vertical-align: top; padding-top: 14px; padding-bottom: 14px; }
.sku-tbl td.num, .sku-tbl td.pct { vertical-align: middle; padding-top: 14px; padding-bottom: 14px; }

.sku-row.sku-row--expanded {
  background: rgba(244,121,32,.05);
  border-bottom: 0;
}

.sku-title-cell { max-width: 360px; }
.sku-title {
  font-size: 13px;
  color: var(--app-fg-1);
  font-weight: 600;
  line-height: 1.35;
  /* Wrap up to 2 lines, then ellipsis on the 2nd. Almost all Amazon titles
     fit fully — but if not, you still see the first 2 lines. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.sku-title--child {
  font-size: 12.5px;
  color: var(--app-fg-1);
  font-weight: 500;
}

.sku-ids {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 5px;
  font-size: 10.5px;
}
.sku-id-tag {
  font-family: var(--mx-font-display);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--app-fg-4);
  padding: 1px 5px;
  background: var(--app-tint-2);
  border-radius: 3px;
}
.sku-id-code {
  font-family: var(--mx-font-mono);
  font-size: 10.5px;
  color: var(--app-fg-2);
  letter-spacing: 0.2px;
}
.sku-id-sep {
  color: var(--app-fg-5);
  font-family: var(--mx-font-mono);
}
.sku-id-meta {
  font-family: var(--mx-font-display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #F47920;
  padding: 1px 6px;
  background: rgba(244,121,32,.12);
  border-radius: 3px;
}


/* Expand chevron — orange outline so it's obvious this row has children */
.sku-expand {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  background: transparent;
  border: 1.5px solid #F47920;
  border-radius: 6px;
  color: #F47920;
  cursor: pointer;
  transition: background .12s, color .12s, transform .15s, box-shadow .15s;
}
.sku-expand:hover {
  background: rgba(244,121,32,.12);
  color: var(--app-fg-1);
  box-shadow: 0 0 0 3px rgba(244,121,32,.12);
}
.sku-expand.is-open {
  background: linear-gradient(135deg, #F47920, #C4541A);
  border-color: #F47920;
  color: #fff;
  transform: rotate(180deg);
}

/* Child rows (variations under a parent) */
.sku-child-row {
  background: rgba(244,121,32,.025);
  border-top: 1px dashed var(--app-tint-2);
}
.sku-child-row:hover { background: rgba(244,121,32,.05); }
.sku-child-row td:nth-child(2) { padding-left: 10px; }
.sku-title-cell--child { max-width: 340px; }

/* ── Daily sales bar chart (between KPIs and weekly trend) ──────── */
.daily-chart { padding: 16px 18px; }
.daily-chart__wrap {
  background: rgba(0,0,0,.18);
  border: 1px solid var(--app-tint-2);
  border-radius: 9px;
  padding: 8px 10px;
}
.daily-chart__svg {
  width: 100%;
  height: auto;
  display: block;
}
.daily-chart__svg rect[cursor="pointer"]:hover + rect {
  fill: #ffaa5c !important;
}

/* Detail panel that appears when a day is clicked */
.daily-detail {
  margin-top: 14px;
  padding: 14px 16px 16px;
  background: linear-gradient(135deg, rgba(244,121,32,.10), rgba(244,121,32,.03));
  border: 1px solid rgba(244,121,32,.3);
  border-radius: 10px;
  animation: daily-detail-in .2s cubic-bezier(.22, 1.1, .36, 1);
}
@keyframes daily-detail-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.daily-detail__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--app-tint-3);
  margin-bottom: 12px;
}
.daily-detail__day {
  font-family: var(--mx-font-display);
  font-size: 16px;
  font-weight: 800;
  color: var(--app-fg-1);
  text-transform: capitalize;
  letter-spacing: 0.3px;
}
.daily-detail__sub {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.daily-detail__weekend {
  font-family: var(--mx-font-display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 7px;
  background: rgba(244,121,32,.18);
  color: #F47920;
  border-radius: 999px;
}
.daily-detail__cmp {
  font-size: 11px;
  color: var(--app-fg-3);
}
.daily-detail__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.daily-detail__cell {
  padding: 10px 12px;
  background: var(--app-tint-1);
  border: 1px solid var(--app-tint-2);
  border-radius: 7px;
}
.daily-detail__cell-label {
  font-family: var(--mx-font-display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--app-fg-3);
}
.daily-detail__cell-value {
  font-family: var(--mx-font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--app-fg-1);
  margin-top: 4px;
  line-height: 1;
}
.daily-detail__cell-delta { margin-top: 5px; }
.daily-detail__delta {
  font-family: var(--mx-font-mono);
  font-size: 11px;
  font-weight: 700;
}
.daily-detail__delta.up { color: #22c55e; }
.daily-detail__delta.down { color: #ef4444; }

/* ── Trend popup (clickable sparkline → full chart) ─────────────── */
.trend-spark-btn {
  display: block;
  width: 100%;
  padding: 6px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.trend-spark-btn--up   { background: rgba(34,197,94,.06); border-color: rgba(34,197,94,.2); }
.trend-spark-btn--up:hover { background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.45); box-shadow: 0 0 0 2px rgba(34,197,94,.08); }
.trend-spark-btn--down { background: rgba(239,68,68,.06); border-color: rgba(239,68,68,.2); }
.trend-spark-btn--down:hover { background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.45); box-shadow: 0 0 0 2px rgba(239,68,68,.08); }
.trend-spark-btn--flat:hover { background: var(--app-tint-3); border-color: var(--app-tint-6); }

/* ── Agency Tower — multi-brand control dashboard ────────────────── */
.agency-tower {
  margin-top: 22px;
  padding: 22px 24px;
  background:
    radial-gradient(circle at top right, rgba(244,121,32,.06), transparent 60%),
    linear-gradient(180deg, var(--app-tint-1), rgba(255,255,255,.005));
  border: 1px solid var(--app-tint-3);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}
.agency-tower::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #F47920 50%, transparent);
  opacity: 0.5;
}

.agency-tower__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.agency-tower__eyebrow {
  font-family: var(--mx-font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(244,121,32,.85);
}
.agency-tower__title {
  font-family: var(--mx-font-display);
  font-size: 20px;
  font-weight: 800;
  color: var(--app-fg-1);
  margin-top: 4px;
  letter-spacing: 0.3px;
}
.agency-tower__period {
  font-family: var(--mx-font-mono);
  font-size: 11px;
  color: var(--app-fg-3);
  padding: 5px 10px;
  background: var(--app-tint-2);
  border: 1px solid var(--app-tint-3);
  border-radius: 999px;
}

/* Hero KPI strip */
.agency-kpis {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
@media (max-width: 1400px) { .agency-kpis { grid-template-columns: repeat(3, 1fr); } }
.agency-kpi {
  padding: 14px 16px;
  background: var(--app-tint-1);
  border: 1px solid var(--app-tint-3);
  border-radius: 11px;
  transition: background .15s, border-color .15s, transform .12s;
}
.agency-kpi:hover {
  background: var(--app-tint-2);
  border-color: var(--app-tint-4);
}
.agency-kpi--primary {
  background: linear-gradient(135deg, rgba(244,121,32,.15), rgba(244,121,32,.04));
  border-color: rgba(244,121,32,.35);
}
.agency-kpi--accent {
  background: linear-gradient(135deg, rgba(34,197,94,.10), rgba(34,197,94,.02));
  border-color: rgba(34,197,94,.25);
}
.agency-kpi__label {
  font-family: var(--mx-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--app-fg-3);
}
.agency-kpi__value {
  font-family: var(--mx-font-display);
  font-size: 26px;
  font-weight: 800;
  color: var(--app-fg-1);
  margin-top: 6px;
  letter-spacing: -0.5px;
  line-height: 1;
}
.agency-kpi--primary .agency-kpi__value { color: #F47920; }
.agency-kpi--accent .agency-kpi__value { color: #22c55e; }
.agency-kpi__delta {
  font-family: var(--mx-font-mono);
  font-size: 11px;
  font-weight: 700;
  margin-top: 6px;
}
.agency-kpi__delta.up   { color: #22c55e; }
.agency-kpi__delta.down { color: #ef4444; }
.agency-kpi__sub {
  font-size: 11px;
  color: var(--app-fg-3);
  margin-top: 6px;
  font-family: var(--mx-font-mono);
}
.agency-kpi__markets {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.agency-kpi__market-tag {
  font-size: 10px;
  font-family: var(--mx-font-display);
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  background: rgba(34,197,94,.15);
  color: #4ade80;
  border-radius: 999px;
}

/* 3-column grid */
.agency-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 1200px) { .agency-grid { grid-template-columns: 1fr; } }

.agency-card {
  padding: 14px 16px 16px;
  background: var(--app-tint-1);
  border: 1px solid var(--app-tint-2);
  border-radius: 11px;
}
.agency-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--app-tint-2);
}
.agency-card__title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mx-font-display);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--app-fg-1);
}
.agency-card__sub {
  font-size: 11px;
  color: var(--app-fg-4);
  margin-left: auto;
  font-family: var(--mx-font-mono);
}
.agency-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Ranked rows (top sales / top profit) */
.agency-rank {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  cursor: pointer;
  border-radius: 7px;
  transition: background .12s;
}
.agency-rank:hover { background: rgba(244,121,32,.05); }
.agency-rank__num {
  font-family: var(--mx-font-display);
  font-size: 13px;
  font-weight: 800;
  color: var(--app-fg-3);
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}
.agency-rank__body {
  flex: 1;
  min-width: 0;
}
.agency-rank__name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--app-fg-1);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agency-rank__bar {
  height: 4px;
  background: var(--app-tint-3);
  border-radius: 999px;
  overflow: hidden;
}
.agency-rank__bar > div {
  height: 100%;
  border-radius: 999px;
  transition: width .35s ease;
}
.agency-rank__value {
  text-align: right;
  flex-shrink: 0;
}
.agency-rank__value > div:first-child {
  font-family: var(--mx-font-mono);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--app-fg-1);
}
.agency-rank__pct {
  font-size: 10.5px;
  color: var(--app-fg-4);
  font-family: var(--mx-font-mono);
  margin-top: 2px;
}

/* Marketplace rows */
.agency-market {
  padding: 8px 4px;
  border-bottom: 1px solid var(--app-tint-2);
}
.agency-market:last-child { border-bottom: 0; }
.agency-market__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.agency-market__flag {
  font-size: 13px;
  color: var(--app-fg-1);
  font-weight: 600;
}
.agency-market__pct {
  font-family: var(--mx-font-mono);
  font-size: 12.5px;
  color: var(--app-fg-1);
  font-weight: 700;
}
.agency-market__bar {
  height: 6px;
  background: var(--app-tint-3);
  border-radius: 999px;
  overflow: hidden;
}
.agency-market__bar > div {
  height: 100%;
  border-radius: 999px;
  transition: width .4s ease;
}
.agency-market__values {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-family: var(--mx-font-mono);
  font-size: 11px;
}
.agency-market__local { color: var(--app-fg-1); font-weight: 600; }
.agency-market__usd { color: var(--app-fg-4); }

/* Bottom row: Alerts + aggregate trend */
.agency-bottom {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 12px;
}
@media (max-width: 1200px) { .agency-bottom { grid-template-columns: 1fr; } }

.agency-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 6px;
  cursor: pointer;
  border-radius: 7px;
  transition: background .12s;
  border-bottom: 1px solid var(--app-tint-2);
}
.agency-alert:last-child { border-bottom: 0; }
.agency-alert:hover { background: rgba(244,121,32,.04); }
.agency-alert__body { flex: 1; min-width: 0; }
.agency-alert__brand {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--app-fg-1);
  margin-bottom: 2px;
}
.agency-alert__text {
  font-size: 11.5px;
  color: var(--app-fg-2);
  line-height: 1.4;
}

.agency-empty {
  padding: 20px 8px;
  text-align: center;
  color: var(--app-fg-4);
  font-size: 12px;
}
.agency-empty--ok {
  color: #22c55e;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
}



.trend-metric-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding: 4px;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--app-tint-3);
  border-radius: 9px;
  margin-bottom: 14px;
}
.trend-metric-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--app-fg-3);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.trend-metric-tab:hover { background: var(--app-tint-2); color: var(--app-fg-1); }
.trend-metric-tab.is-active {
  background: var(--app-tint-3);
  color: var(--app-fg-1);
}
.trend-metric-tab__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.trend-chart-wrap {
  background: rgba(0,0,0,.18);
  border: 1px solid var(--app-tint-2);
  border-radius: 9px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.trend-chart {
  width: 100%;
  height: auto;
  display: block;
}

.trend-table-wrap {
  max-height: 240px;
  overflow-y: auto;
  background: rgba(0,0,0,.12);
  border: 1px solid var(--app-tint-2);
  border-radius: 9px;
}
.trend-table {
  width: 100%;
  border-collapse: collapse;
}
.trend-table th {
  text-align: left;
  padding: 8px 14px;
  font-family: var(--mx-font-display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--app-fg-4);
  border-bottom: 1px solid var(--app-tint-3);
  background: rgba(0,0,0,.15);
  position: sticky;
  top: 0;
}
.trend-table th.num { text-align: right; }
.trend-table td {
  padding: 8px 14px;
  font-size: 12px;
  color: var(--app-fg-1);
  border-bottom: 1px solid var(--app-tint-2);
}
.trend-table td.num { text-align: right; font-family: var(--mx-font-mono); font-size: 11.5px; }
.trend-table td.pct.up { color: hsl(142 71% 60%); }
.trend-table td.pct.down { color: hsl(0 72% 65%); }
.trend-table tr:last-child td { border-bottom: 0; }

/* ── Reports redesign ───────────────────────────────────────────── */

/* Legacy migration banner (Mon-Fri → Mon-Sun) */
.legacy-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(244,121,32,.12), rgba(244,121,32,.04));
  border: 1px solid rgba(244,121,32,.4);
  border-radius: 12px;
  margin-bottom: 16px;
  animation: legacyIn .3s cubic-bezier(.22,1.1,.36,1);
}
@keyframes legacyIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.legacy-banner__icon {
  width: 38px; height: 38px;
  border-radius: 9px;
  background: rgba(244,121,32,.2);
  color: #F47920;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.legacy-banner__body { flex: 1; min-width: 0; }
.legacy-banner__title {
  font-family: var(--mx-font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--app-fg-1);
}
.legacy-banner__desc {
  font-size: 12px;
  color: var(--app-fg-2);
  margin-top: 3px;
  line-height: 1.4;
}

/* Top tabs */
.reports-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--app-tint-3);
  border-radius: 10px;
  margin-bottom: 16px;
  width: fit-content;
}
.reports-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: var(--app-fg-3);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.reports-tab:hover { color: var(--app-fg-1); }
.reports-tab.is-active {
  background: linear-gradient(135deg, #F47920, #C4541A);
  color: #fff;
  box-shadow: 0 2px 8px rgba(244,121,32,.25);
}
.reports-tab__count {
  font-family: var(--mx-font-mono);
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  background: var(--app-tint-4);
  border-radius: 999px;
  color: var(--app-fg-1);
  margin-left: 2px;
}
.reports-tab.is-active .reports-tab__count {
  background: rgba(0,0,0,.25);
  color: var(--app-fg-1);
}

/* Hero banner — current period status */
.reports-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background:
    radial-gradient(circle at top right, rgba(244,121,32,.08), transparent 70%),
    linear-gradient(135deg, rgba(244,121,32,.10), rgba(244,121,32,.02));
  border: 1px solid rgba(244,121,32,.3);
  border-radius: 14px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
.reports-hero.is-done {
  background:
    radial-gradient(circle at top right, rgba(34,197,94,.08), transparent 70%),
    linear-gradient(135deg, rgba(34,197,94,.08), rgba(34,197,94,.02));
  border-color: rgba(34,197,94,.3);
}
.reports-hero__icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, #F47920, #C4541A);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 6px 14px rgba(244,121,32,.3);
}
.reports-hero.is-done .reports-hero__icon {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  box-shadow: 0 6px 14px rgba(34,197,94,.25);
}
.reports-hero__body { flex: 1; min-width: 0; }
.reports-hero__label {
  font-family: var(--mx-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--app-fg-3);
}
.reports-hero__title {
  font-family: var(--mx-font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--app-fg-1);
  margin-top: 4px;
  text-transform: capitalize;
}
.reports-hero__progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  max-width: 380px;
}
.reports-hero__progress-bar {
  flex: 1;
  height: 5px;
  background: var(--app-tint-4);
  border-radius: 999px;
  overflow: hidden;
}
.reports-hero__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #F47920, #FBBF24);
  border-radius: 999px;
  transition: width .4s ease;
}
.reports-hero.is-done .reports-hero__progress-fill {
  background: linear-gradient(90deg, #22c55e, #4ade80);
}
.reports-hero__progress-text {
  font-family: var(--mx-font-mono);
  font-size: 11px;
  color: var(--app-fg-2);
  white-space: nowrap;
}

/* Filter bar */
.reports-filterbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.reports-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--app-tint-4);
  border-radius: 8px;
  min-width: 220px;
  flex: 1;
  max-width: 320px;
  color: var(--app-fg-4);
}
.reports-search input {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--app-fg-1);
  outline: none;
  font-family: inherit;
  font-size: 12.5px;
}
.reports-search input::placeholder { color: var(--app-fg-4); }
.reports-status-chips {
  display: inline-flex;
  background: rgba(0,0,0,.2);
  border: 1px solid var(--app-tint-3);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}
.reports-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--app-fg-2);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.reports-status-chip:hover { color: var(--app-fg-1); }
.reports-status-chip.is-active {
  background: var(--app-tint-4);
  color: var(--app-fg-1);
}
.reports-status-chip__count {
  font-family: var(--mx-font-mono);
  font-size: 10px;
  padding: 1px 5px;
  background: var(--app-tint-4);
  border-radius: 999px;
  color: var(--app-fg-2);
}
.reports-status-chip.is-active .reports-status-chip__count {
  background: rgba(244,121,32,.25);
  color: var(--app-fg-1);
}

/* Empty state */
.reports-empty {
  text-align: center;
  padding: 56px 24px;
  background: var(--app-tint-1);
  border: 1px dashed var(--app-tint-4);
  border-radius: 12px;
}
.reports-empty__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--app-tint-2);
  color: var(--app-fg-3);
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
}
.reports-empty__title {
  font-size: 14px;
  color: var(--app-fg-1);
  font-weight: 700;
}
.reports-empty__sub {
  font-size: 12px;
  color: var(--app-fg-3);
  margin-top: 6px;
  line-height: 1.5;
}

/* Bulk expand/collapse toolbar */
.reports-bulkexp {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.reports-bulkexp__label {
  font-family: var(--mx-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--app-fg-4);
  margin-right: 4px;
}

/* Group by period — collapsible */
.reports-group {
  margin-bottom: 12px;
  border: 1px solid var(--app-tint-2);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .15s;
}
.reports-group.is-open { border-color: rgba(244,121,32,.2); }
.reports-group__head {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--app-tint-1);
  transition: background .12s;
}
.reports-group:hover .reports-group__head { background: var(--app-tint-2); }
.reports-group.is-open .reports-group__head { background: rgba(244,121,32,.08); }
/* The toggle button is the big clickable area on the left (everything
   except the download CTA). The download button sits next to it as a
   sibling so its click doesn't bubble through the parent. */
.reports-group__toggle {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  min-width: 0;
}
.reports-group__toggle:focus-visible {
  outline: 2px solid rgba(244,121,32,.5);
  outline-offset: -2px;
}
.reports-group__dl {
  margin: 8px 12px 8px 0;
  flex-shrink: 0;
}
.reports-group__chev {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: var(--app-tint-2);
  color: var(--app-fg-2);
  transition: transform .2s ease, background .15s, color .15s;
  flex-shrink: 0;
}
.reports-group.is-open .reports-group__chev,
.reports-group__chev.is-open {
  transform: rotate(90deg);
  background: rgba(244,121,32,.2);
  color: #F47920;
}
.reports-group__dl {
  margin-left: auto;
}
.reports-group__period {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  color: rgba(244,121,32,.9);
}
.reports-group__period-label {
  font-family: var(--mx-font-display);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--app-fg-1);
}
.reports-group__period-meta {
  font-size: 11px;
  color: var(--app-fg-3);
  font-family: var(--mx-font-mono);
}
.reports-group__drafts {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  font-family: var(--mx-font-display);
  padding: 2px 7px;
  background: rgba(244,121,32,.18);
  color: #F47920;
  border-radius: 999px;
  margin-left: 4px;
}
.reports-group__statpill {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-family: var(--mx-font-display);
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: 4px;
  border: 1px solid transparent;
}
.reports-group__statpill--sent  { background: rgba(59,130,246,.15); color:#93c5fd; border-color: rgba(59,130,246,.30); }
.reports-group__statpill--dl    { background: rgba(34,197,94,.15);  color:#86efac; border-color: rgba(34,197,94,.30); }
.reports-group__statpill--draft { background: rgba(244,121,32,.15); color:#F47920; border-color: rgba(244,121,32,.30); }
.reports-group__statpill--disc  { background: rgba(148,163,184,.15); color:#cbd5e1; border-color: rgba(148,163,184,.30); }

/* Discarded report row — dim it */
.report-row--discarded {
  opacity: 0.55;
  filter: grayscale(0.4);
}
.report-row--discarded:hover { opacity: 0.75; }

/* Kebab menu on each report row */
.report-row__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  width: 240px;
  background: rgba(20, 18, 24, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(244,121,32,.30);
  border-radius: 10px;
  box-shadow: 0 14px 32px rgba(0,0,0,0.50);
  overflow: hidden;
  padding: 4px 0;
  animation: picker-in 0.14s ease-out;
}
.report-row__menu-head {
  padding: 8px 14px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--app-fg-4);
  font-family: var(--mx-font-display);
}
.report-row__menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 14px;
  background: transparent;
  border: none;
  color: var(--app-fg-1);
  cursor: pointer;
  text-align: left;
  font-size: 12.5px;
  transition: background 0.10s;
}
.report-row__menu-item:hover { background: var(--app-tint-2); }
.report-row__menu-item > span:first-child { width: 16px; text-align: center; }
.report-row__menu-hint {
  margin-left: auto;
  font-size: 10px;
  color: var(--app-fg-4);
  font-family: var(--mx-font-mono);
}
.report-row__menu-item--danger { color: #fca5a5; }
.report-row__menu-item--danger:hover { background: rgba(239,68,68,.10); }
.report-row__menu-sep {
  height: 1px;
  background: var(--app-tint-2);
  margin: 4px 0;
}
.reports-group__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: var(--app-tint-1);
  border-top: 1px solid var(--app-tint-2);
  animation: reports-group-open .2s ease;
}
@keyframes reports-group-open {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Sortable table headers (Inventory) ─────────────────────────── */
.sort-th {
  cursor: pointer;
  user-select: none;
  transition: background .12s, color .12s;
  position: relative;
}
.sort-th:hover { background: rgba(244,121,32,.06); color: var(--app-fg-1); }
.sort-th.is-active { color: #F47920; }

.sort-th__label { display: inline-block; }
.sort-th__arrow {
  display: inline-block;
  margin-left: 5px;
  font-size: 9px;
  font-family: var(--mx-font-mono);
  transition: color .15s, opacity .15s;
}
.sort-th__arrow.inactive {
  color: var(--app-fg-5);
}
.sort-th:hover .sort-th__arrow.inactive { color: var(--app-fg-4); }
.sort-th__arrow.asc, .sort-th__arrow.desc { color: #F47920; }

/* When th has num class, the arrow should be inline next to the right-
   aligned label. */
.sort-th.num { text-align: right; }
.sort-th.num .sort-th__arrow { margin-left: 4px; }

/* ── Inventory filter rules ──────────────────────────────────────── */
.inv-filters {
  margin: 16px 0 14px;
  padding: 12px 14px;
  background: var(--app-tint-1);
  border: 1px solid var(--app-tint-2);
  border-radius: 10px;
}
.inv-filters__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}
.inv-filters__label {
  font-family: var(--mx-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--app-fg-4);
  flex: 1;
}

.inv-filters__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.inv-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  background: var(--app-tint-2);
  border: 1px solid var(--app-tint-3);
  border-radius: 999px;
  color: var(--app-fg-2);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.inv-chip:hover { background: var(--app-tint-4); color: var(--app-fg-1); }
.inv-chip.is-active {
  background: rgba(244,121,32,.10);
  border-color: rgba(244,121,32,.4);
  color: var(--app-fg-1);
}
.inv-chip__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
}
.inv-chip__count {
  font-family: var(--mx-font-mono);
  font-size: 10px;
  padding: 1px 6px;
  background: var(--app-tint-3);
  border-radius: 999px;
  color: var(--app-fg-2);
  font-weight: 700;
}
.inv-chip.is-active .inv-chip__count {
  background: rgba(244,121,32,.25);
  color: var(--app-fg-1);
}

.inv-filters__custom {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--app-tint-3);
}
.inv-customchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px 4px 9px;
  background: rgba(168,85,247,.10);
  border: 1px solid rgba(168,85,247,.3);
  border-radius: 999px;
  font-size: 11px;
}
.inv-customchip__field {
  color: #c4a4f8;
  font-weight: 700;
}
.inv-customchip__op {
  color: var(--app-fg-3);
  font-family: var(--mx-font-mono);
  font-weight: 700;
}
.inv-customchip__value {
  color: var(--app-fg-1);
  font-family: var(--mx-font-mono);
  font-weight: 700;
}
.inv-customchip__rm {
  display: grid;
  place-items: center;
  width: 16px; height: 16px;
  background: var(--app-tint-3);
  border: 0;
  border-radius: 50%;
  color: var(--app-fg-2);
  cursor: pointer;
  margin-left: 2px;
}
.inv-customchip__rm:hover { background: rgba(239,68,68,.3); color: var(--app-fg-1); }

/* ── Inventory v2 — reimbursements + storage watchlist ─────────── */
.inv-reimb {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(34,197,94,.10), rgba(34,197,94,.02));
  border: 1px solid rgba(34,197,94,.3);
  border-radius: 12px;
  margin-bottom: 16px;
}
.inv-reimb__icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 4px 12px rgba(34,197,94,.3);
  flex-shrink: 0;
}
.inv-reimb__body { flex: 1; min-width: 0; }
.inv-reimb__label {
  font-family: var(--mx-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--app-fg-3);
}
.inv-reimb__value {
  font-family: var(--mx-font-display);
  font-size: 24px;
  font-weight: 800;
  color: #4ade80;
  margin-top: 3px;
  letter-spacing: -0.3px;
}
.inv-reimb__sub {
  font-size: 11.5px;
  color: var(--app-fg-3);
  margin-top: 4px;
  line-height: 1.45;
  max-width: 720px;
}

.inv-watchlist {
  padding: 12px 16px;
  margin-bottom: 14px;
  background: rgba(244,121,32,.06);
  border: 1px solid rgba(244,121,32,.25);
  border-radius: 10px;
}
.inv-watchlist__head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--app-fg-1);
  font-size: 12.5px;
  margin-bottom: 8px;
}
.inv-watchlist__head svg { color: #F47920; }
.inv-watchlist__chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.inv-watchlist__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--app-tint-2);
  border: 1px solid rgba(244,121,32,.3);
  border-radius: 999px;
  font-size: 11px;
}
.inv-watchlist__chip code {
  font-family: var(--mx-font-mono);
  color: var(--app-fg-1);
  font-weight: 600;
}
.inv-watchlist__chip > span {
  color: #F47920;
  font-weight: 700;
  font-family: var(--mx-font-mono);
}
.inv-watchlist__more {
  font-size: 11px;
  color: var(--app-fg-3);
  align-self: center;
  margin-left: 4px;
}

/* ── FBA Replenish v2 — hero shipment plan ─────────────────────── */
.fba-hero {
  padding: 18px 22px;
  background:
    radial-gradient(circle at top right, rgba(244,121,32,.08), transparent 60%),
    linear-gradient(180deg, rgba(244,121,32,.06), rgba(244,121,32,.02));
  border: 1px solid rgba(244,121,32,.3);
  border-radius: 14px;
  margin-bottom: 14px;
}
.fba-hero__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.fba-hero__eyebrow {
  font-family: var(--mx-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(244,121,32,.9);
}
.fba-hero__title {
  font-family: var(--mx-font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--app-fg-1);
  margin-top: 4px;
  letter-spacing: 0.3px;
}
.fba-hero__date {
  font-size: 11.5px;
  color: var(--app-fg-3);
  margin-top: 4px;
  font-family: var(--mx-font-mono);
}
.fba-hero__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.fba-hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 800px) { .fba-hero__stats { grid-template-columns: repeat(2, 1fr); } }
.fba-hero__stat {
  padding: 12px 14px;
  background: rgba(0,0,0,.2);
  border: 1px solid var(--app-tint-2);
  border-radius: 10px;
}
.fba-hero__stat-label {
  font-family: var(--mx-font-display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--app-fg-3);
}
.fba-hero__stat-value {
  font-family: var(--mx-font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--app-fg-1);
  margin-top: 4px;
  letter-spacing: -0.3px;
}
.fba-hero__stat-unit {
  font-size: 13px;
  color: var(--app-fg-3);
  font-weight: 600;
}

/* Settings collapsible */
.fba-settings {
  margin-bottom: 14px;
}
.fba-settings summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--app-tint-1);
  border: 1px solid var(--app-tint-2);
  border-radius: 9px;
  color: var(--app-fg-2);
  font-size: 12px;
  transition: background .12s, border-color .12s;
}
.fba-settings summary::-webkit-details-marker { display: none; }
.fba-settings summary:hover { background: var(--app-tint-2); border-color: var(--app-tint-4); }
.fba-settings[open] summary { background: rgba(244,121,32,.06); border-color: rgba(244,121,32,.3); }
.fba-settings summary strong { color: var(--app-fg-1); font-weight: 700; }
.fba-settings__body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 16px;
  background: var(--app-tint-1);
  border: 1px solid var(--app-tint-2);
  border-top: 0;
  border-radius: 0 0 9px 9px;
}
@media (max-width: 800px) { .fba-settings__body { grid-template-columns: 1fr; } }
.fba-settings__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fba-settings__field label {
  font-family: var(--mx-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--app-fg-3);
}
.fba-settings__field input {
  padding: 9px 12px;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--app-tint-4);
  border-radius: 7px;
  color: var(--app-fg-1);
  font-family: var(--mx-font-mono);
  font-size: 14px;
  font-weight: 700;
  outline: none;
}
.fba-settings__field input:focus { border-color: rgba(244,121,32,.5); }
.fba-settings__hint {
  font-size: 10.5px;
  color: var(--app-fg-3);
  line-height: 1.4;
}

/* Group cards (urgent / soon / watch / ok) */
.fba-group { margin-bottom: 12px; }
.fba-group__head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: var(--app-tint-1);
  border: 1px solid var(--app-tint-2);
  border-left: 4px solid;
  border-radius: 8px;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background .12s;
}
.fba-group__head:hover { background: var(--app-tint-2); }
.fba-group.is-open .fba-group__head { border-radius: 8px 8px 0 0; }
.fba-group__icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.fba-group__title {
  font-family: var(--mx-font-display);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--app-fg-1);
  flex: 1;
}
.fba-group__count {
  font-family: var(--mx-font-mono);
  font-size: 12px;
  padding: 2px 9px;
  background: var(--app-tint-3);
  color: var(--app-fg-1);
  border-radius: 999px;
  font-weight: 700;
}
.fba-group__chev {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  color: var(--app-fg-3);
  transition: transform .2s ease;
}
.fba-group__chev.is-open { transform: rotate(90deg); color: #F47920; }
.fba-group__empty {
  padding: 18px;
  text-align: center;
  color: var(--app-fg-4);
  font-size: 12px;
  background: var(--app-tint-1);
  border: 1px solid var(--app-tint-2);
  border-top: 0;
  border-radius: 0 0 8px 8px;
}
.fba-tbl tr.is-approved { background: rgba(34,197,94,.04); }
.fba-tbl tr.is-approved:hover { background: rgba(34,197,94,.07); }

.fba-qty {
  width: 80px;
  padding: 6px 10px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(244,121,32,.4);
  border-radius: 6px;
  color: var(--app-fg-1);
  font-family: var(--mx-font-mono);
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  outline: none;
}
.fba-qty:focus { border-color: #F47920; background: rgba(244,121,32,.08); }

/* ── SKU grouping toggle (Parent ASIN vs Child SKU) ─────────────── */
.sku-grouping-toggle {
  display: inline-flex;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--app-tint-4);
  border-radius: 7px;
  padding: 2px;
  gap: 0;
}
.sku-grouping-toggle__btn {
  padding: 5px 12px;
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: var(--app-fg-3);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.sku-grouping-toggle__btn:hover { color: var(--app-fg-1); }
.sku-grouping-toggle__btn.is-active {
  background: linear-gradient(135deg, #F47920, #C4541A);
  color: #fff;
  box-shadow: 0 2px 6px rgba(244,121,32,.25);
}

/* ── KPI section header + configurator ──────────────────────────── */
.kpi-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.kpi-section-label {
  font-family: var(--mx-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--app-fg-4);
}
.kpi-section-head .btn { margin-left: auto; }

.kpi-toggle {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  background: var(--app-tint-1);
  border: 1px solid var(--app-tint-3);
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.kpi-toggle:hover { background: var(--app-tint-3); }
.kpi-toggle.is-on {
  background: rgba(244,121,32,.08);
  border-color: rgba(244,121,32,.35);
}
.kpi-toggle input[type="checkbox"] {
  margin-top: 2px;
  accent-color: #F47920;
  cursor: pointer;
  flex-shrink: 0;
}
.kpi-toggle__body { flex: 1; min-width: 0; }
.kpi-toggle__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--app-fg-1);
  line-height: 1.3;
}
.kpi-toggle__hint {
  font-size: 11px;
  color: var(--app-fg-3);
  margin-top: 2px;
  line-height: 1.4;
}
.kpi-toggle.is-on .kpi-toggle__label { color: var(--app-fg-1); }

/* ── Bandeja IA (AI inbox) ──────────────────────────────────────── */
.task-mode {
  display: inline-flex;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--app-tint-3);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  margin-bottom: 14px;
}
.task-mode__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: var(--app-fg-2);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s;
  position: relative;
}
.task-mode__btn:hover { color: var(--app-fg-1); }
.task-mode__btn.is-active {
  background: linear-gradient(135deg, #F47920, #C4541A);
  color: #fff;
}
.task-mode__btn--ai .task-mode__badge {
  background: var(--app-tint-6);
  color: var(--app-fg-1);
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 999px;
  font-family: var(--mx-font-mono);
  font-weight: 700;
  margin-left: 2px;
}

.bandeja { display: flex; flex-direction: column; gap: 14px; }

.bandeja-hero {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 22px;
  background:
    radial-gradient(circle at top right, rgba(168,85,247,.08), transparent 60%),
    linear-gradient(180deg, var(--app-tint-1), var(--app-tint-1));
  border: 1px solid rgba(168,85,247,.25);
  border-radius: 14px;
}
.bandeja-hero__icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: var(--app-fg-1);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(168,85,247,.35);
}
.bandeja-hero__body { flex: 1; min-width: 0; }
.bandeja-hero__title {
  font-family: var(--mx-font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--app-fg-1);
  letter-spacing: 0.3px;
}
.bandeja-hero__sub {
  font-size: 12.5px;
  color: var(--app-fg-2);
  margin-top: 5px;
  line-height: 1.5;
}
.bandeja-hero__stats {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--app-fg-3);
  font-family: var(--mx-font-mono);
  flex-wrap: wrap;
}
.bandeja-hero__stats strong { color: var(--app-fg-1); font-weight: 700; }

.bandeja-scanmsg {
  margin: -8px 0 14px;
  padding: 10px 14px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  border: 1px solid var(--app-tint-4);
}
.bandeja-scanmsg--info    { background: rgba(59,130,246,.12); color: #93c5fd; border-color: rgba(59,130,246,.30); }
.bandeja-scanmsg--success { background: rgba(34,197,94,.12);  color: #86efac; border-color: rgba(34,197,94,.30); }
.bandeja-scanmsg--error   { background: rgba(239,68,68,.12);  color: #fca5a5; border-color: rgba(239,68,68,.30); }

/* ── Scanning card ─────────────────────────────────────────────── */
.bandeja-scanning {
  margin: -8px 0 18px;
  padding: 22px 24px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 22px;
  background: linear-gradient(135deg, rgba(244,121,32,0.12), rgba(244,121,32,0.04));
  border: 1px solid rgba(244,121,32,0.30);
  position: relative;
  overflow: hidden;
}
.bandeja-scanning::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(244,121,32,0.08), transparent);
  animation: bandeja-shimmer 2.4s ease-in-out infinite;
}
@keyframes bandeja-shimmer {
  0%   { left: -100%; }
  100% { left: 100%; }
}

.bandeja-scanning__fox {
  position: relative;
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bandeja-scanning__fox img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: bandeja-fox-breathe 2.6s ease-in-out infinite;
  position: relative;
  z-index: 2;
}
@keyframes bandeja-fox-breathe {
  0%, 100% { transform: scale(1) rotate(-3deg); }
  50%      { transform: scale(1.06) rotate(3deg); }
}
.bandeja-scanning__pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244,121,32,0.45) 0%, transparent 60%);
  animation: bandeja-pulse 2s ease-in-out infinite;
  z-index: 1;
}
@keyframes bandeja-pulse {
  0%, 100% { transform: scale(0.85); opacity: 0.4; }
  50%      { transform: scale(1.15); opacity: 0.8; }
}

.bandeja-scanning__body {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 2;
}
.bandeja-scanning__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--app-fg-1);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
}
.bandeja-scanning__dots {
  display: inline-flex;
  gap: 3px;
  margin-left: 2px;
}
.bandeja-scanning__dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #F47920;
  animation: bandeja-dot 1.4s ease-in-out infinite;
}
.bandeja-scanning__dots span:nth-child(2) { animation-delay: 0.2s; }
.bandeja-scanning__dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bandeja-dot {
  0%, 80%, 100% { opacity: 0.2; transform: translateY(0); }
  40%           { opacity: 1;   transform: translateY(-3px); }
}

.bandeja-scanning__status {
  font-size: 13px;
  color: #fbbf85;
  margin-bottom: 12px;
  min-height: 18px;
  transition: opacity 0.3s;
}
.bandeja-scanning__bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--app-tint-4);
  overflow: hidden;
  margin-bottom: 8px;
}
.bandeja-scanning__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #F47920, #fbbf85);
  border-radius: 999px;
  transition: width 1.2s ease-out;
  box-shadow: 0 0 12px rgba(244,121,32,0.55);
}
.bandeja-scanning__meta {
  font-size: 11px;
  color: var(--app-fg-3);
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.bandeja-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.bandeja-empty {
  text-align: center;
  padding: 56px 24px;
  background: var(--app-tint-1);
  border: 1px dashed var(--app-tint-4);
  border-radius: 12px;
}
.bandeja-empty__icon {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: rgba(168,85,247,.15);
  color: #c4a4f8;
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
}
.bandeja-empty__title {
  font-family: var(--mx-font-display);
  font-size: 15px;
  font-weight: 800;
  color: var(--app-fg-1);
}
.bandeja-empty__sub {
  font-size: 12.5px;
  color: var(--app-fg-3);
  margin-top: 6px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

.bandeja-group {
  background: var(--app-tint-1);
  border: 1px solid var(--app-tint-2);
  border-radius: 12px;
  /* overflow must stay visible so a per-task brand dropdown opening near the
     bottom of the group isn't clipped. Rounded corners are preserved via the
     head's own border-radius below. */
  overflow: visible;
}
.bandeja-group__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--app-tint-1);
  border-bottom: 1px solid var(--app-tint-2);
  border-radius: 12px 12px 0 0;   /* keep top corners rounded now that the group is overflow:visible */
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.bandeja-group__head:hover { background: var(--app-tint-2); }
.bandeja-group__head:focus-visible { outline: 2px solid rgba(244,121,32,.6); outline-offset: -2px; }
.bandeja-group__head svg { color: rgba(168,85,247,.85); }
.bandeja-group__chev {
  color: var(--app-fg-3) !important;
  transition: transform 0.18s ease-out;
}
.bandeja-group--collapsed .bandeja-group__head { border-bottom: none; border-radius: 12px; }
.bandeja-group--collapsed { background: var(--app-tint-1); }

.bandeja-bulkbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 4px;
  margin-bottom: 8px;
}

/* Custom checkbox — naranja MEXUS */
.bandeja-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--app-fg-4);
  background: var(--app-tint-2);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: all 0.15s;
  margin: 0;
}
.bandeja-checkbox:hover { border-color: rgba(244,121,32,.6); }
.bandeja-checkbox:checked {
  background: #F47920;
  border-color: #F47920;
}
.bandeja-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 0px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.bandeja-checkbox:indeterminate {
  background: #F47920;
  border-color: #F47920;
}
.bandeja-checkbox:indeterminate::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 6px;
  width: 9px;
  height: 2px;
  background: #fff;
  border-radius: 1px;
}

.pending-card__cb {
  align-self: flex-start;
  margin-top: 3px;
}
.pending-card--selected {
  background: rgba(244,121,32,0.06) !important;
  border-color: rgba(244,121,32,0.40) !important;
  box-shadow: 0 0 0 1px rgba(244,121,32,0.20);
}

/* Floating bulk action bar */
.bandeja-bulkactions {
  position: sticky;
  bottom: 16px;
  margin-top: 16px;
  margin-left: auto;
  margin-right: auto;
  max-width: 720px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  background: rgba(20, 18, 24, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(244,121,32,0.40);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(244,121,32,0.15);
  z-index: 50;
  animation: bulkbar-in 0.22s ease-out;
}
@keyframes bulkbar-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bandeja-bulkactions__count {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--app-fg-1);
  font-size: 13px;
}
.bandeja-bulkactions__count strong { color: #F47920; font-size: 15px; font-weight: 800; }
.bandeja-bulkactions__count svg { color: #F47920; }
.bandeja-bulkactions__buttons {
  display: flex;
  gap: 8px;
  align-items: center;
}
.bandeja-group__title {
  font-family: var(--mx-font-display);
  font-size: 13px;
  font-weight: 800;
  color: var(--app-fg-1);
  letter-spacing: 0.3px;
}
.bandeja-group__meta {
  font-size: 11px;
  color: var(--app-fg-3);
  display: flex;
  gap: 6px;
  align-items: center;
  flex: 1;
}
.dot-sep { color: var(--app-fg-5); }

.bandeja-group__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
}

.pending-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--app-tint-1);
  border: 1px solid var(--app-tint-2);
  border-radius: 9px;
  transition: background .12s, border-color .12s;
}
.pending-card:hover { background: var(--app-tint-2); }
.pending-card--approved { opacity: 0.6; border-color: rgba(34,197,94,.2); background: rgba(34,197,94,.04); }
.pending-card--modified { opacity: 0.65; border-color: rgba(244,121,32,.2); background: rgba(244,121,32,.04); }
.pending-card--discarded { opacity: 0.4; border-style: dashed; }

.pending-card__main { flex: 1; min-width: 0; }
.pending-card__title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--app-fg-1);
  line-height: 1.35;
}
.pending-card__desc {
  font-size: 12px;
  color: var(--app-fg-2);
  margin-top: 4px;
  line-height: 1.4;
}
.pending-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.pending-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  background: var(--app-tint-2);
  border: 1px solid var(--app-tint-4);
  border-radius: 999px;
  font-size: 11px;
  color: var(--app-fg-1);
}
.pending-chip__av {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2a3548, #1a2433);
  color: var(--app-fg-1);
  display: grid;
  place-items: center;
  font-family: var(--mx-font-display);
  font-weight: 800;
  font-size: 8px;
}
.pending-chip--missing {
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.35);
  color: #fca5a5;
  font-weight: 700;
}
.pending-chip--pri-high {
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.35);
  color: #fca5a5;
}
.pending-chip--pri-medium {
  background: rgba(244,121,32,.10);
  border-color: rgba(244,121,32,.35);
  color: #F47920;
}
.pending-chip--pri-low {
  color: var(--app-fg-2);
}
.pending-card__ai-notes {
  margin-top: 8px;
  font-size: 11px;
  color: rgba(168,85,247,.8);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pending-card__actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.pending-card__badge {
  font-family: var(--mx-font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 6px;
  white-space: nowrap;
}
.pending-card__badge--approved,
.pending-card__badge--modified {
  background: rgba(34,197,94,.15);
  color: #4ade80;
}
.pending-card__badge--discarded {
  background: rgba(239,68,68,.10);
  color: #fca5a5;
}

/* Assignee multi-select grid (used in TaskEditModal + PendingEditModal) */
.assignee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 6px;
}
.assignee-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  background: var(--app-tint-1);
  border: 1px solid var(--app-tint-3);
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  transition: background .12s, border-color .12s;
}
.assignee-chip:hover { background: var(--app-tint-3); }
.assignee-chip.is-on {
  background: rgba(244,121,32,.08);
  border-color: rgba(244,121,32,.4);
  color: var(--app-fg-1);
}
.assignee-chip input[type="checkbox"] {
  accent-color: #F47920;
  margin: 0;
}
.assignee-chip__av {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2a3548, #1a2433);
  color: var(--app-fg-1);
  display: grid;
  place-items: center;
  font-family: var(--mx-font-display);
  font-weight: 800;
  font-size: 9.5px;
}

/* Pro assignee cards — used in TaskEditModal. Bigger avatars, full names,
   role subtitle, check badge in the corner of the selected card. */
.assignee-grid--pro {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px;
}
.assignee-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  background: var(--app-tint-1);
  border: 1px solid var(--app-tint-4);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  text-align: left;
  outline: none;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .12s;
}
.assignee-card:hover {
  background: var(--app-tint-3);
  border-color: var(--app-tint-6);
  transform: translateY(-1px);
}
.assignee-card.is-on {
  background: linear-gradient(135deg, rgba(244,121,32,.16), rgba(244,121,32,.04));
  border-color: rgba(244,121,32,.55);
  box-shadow: 0 0 0 1px rgba(244,121,32,.20), 0 6px 18px -10px rgba(244,121,32,.40);
}
.assignee-card__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3a4a64, #1a2433);
  color: var(--app-fg-1);
  display: grid; place-items: center;
  font-family: var(--mx-font-display);
  font-weight: 800;
  font-size: 12px;
  flex-shrink: 0;
  letter-spacing: .5px;
  box-shadow: inset 0 -2px 6px rgba(0,0,0,.25);
}
.assignee-card__info { flex: 1; min-width: 0; }
.assignee-card__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--app-fg-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.assignee-card__role {
  font-family: var(--mx-font-display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--app-fg-4);
  margin-top: 3px;
}
.assignee-card.is-on .assignee-card__role { color: rgba(244,121,32,.85); }
.assignee-card__check {
  position: absolute;
  top: -7px; right: -7px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #F47920;
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 0 0 3px var(--app-surface, #0f1422), 0 2px 6px rgba(244,121,32,.4);
}

/* "Nueva tarea" CTA in the tasks header — keep it visually anchored even
   when the row gets crowded by the audit/trash icons. */
.task-new-btn {
  font-weight: 700;
  letter-spacing: .3px;
  box-shadow: 0 2px 8px -2px rgba(244,121,32,.45);
}
.task-new-btn:hover { transform: translateY(-1px); }

/* Multi-assignee stack in TaskRow */
.task-row__assignees-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.task-row__assignees {
  display: inline-flex;
  align-items: center;
  padding: 2px 4px;
  border-radius: 999px;
  transition: background 0.12s, box-shadow 0.12s;
}
.task-row__assignees.is-clickable { cursor: pointer; }
.task-row__assignees.is-clickable:hover {
  background: rgba(244,121,32,.10);
  box-shadow: 0 0 0 1px rgba(244,121,32,.30);
}
.task-row__assignees-more {
  font-size: 10px;
  color: var(--app-fg-3);
  font-family: var(--mx-font-mono);
  margin-left: 4px;
}
.task-row__assign-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 10.5px;
  font-weight: 600;
  background: rgba(244,121,32,.08);
  color: #fbbf85;
  border: 1px dashed rgba(244,121,32,.35);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.12s;
}
.task-row__assign-btn:hover {
  background: rgba(244,121,32,.18);
  border-style: solid;
  color: var(--app-fg-1);
}
.task-row__assign-btn svg { color: currentColor !important; }

/* Inline picker popover */
.assignee-quickpicker {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 100;
  width: 280px;
  max-width: calc(100vw - 40px);
  background: rgba(20, 18, 24, 0.98);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(244,121,32,.30);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.55);
  overflow: hidden;
  animation: picker-in 0.16s ease-out;
}
@keyframes picker-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.assignee-quickpicker__head {
  padding: 10px 14px;
  font-size: 11px;
  color: var(--app-fg-2);
  border-bottom: 1px solid var(--app-tint-2);
  background: rgba(244,121,32,.06);
}
.assignee-quickpicker__head strong { color: #F47920; font-weight: 800; }
.assignee-quickpicker__list {
  max-height: 320px;
  overflow-y: auto;
  padding: 4px 0;
}
.assignee-quickpicker__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.10s;
  width: 100%;
  background: transparent;
  border: none;
  color: inherit;
  font-family: inherit;
  text-align: left;
}
.assignee-quickpicker__row:hover { background: var(--app-tint-2); }
.assignee-quickpicker__row.is-on { background: rgba(244,121,32,.08); }
.assignee-quickpicker__row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--app-fg-4);
  background: var(--app-tint-2);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  margin: 0;
}
.assignee-quickpicker__row input[type="checkbox"]:checked {
  background: #F47920;
  border-color: #F47920;
}
.assignee-quickpicker__row input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 0px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.assignee-quickpicker__av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F47920, #c14d10);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mx-font-display);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
.assignee-quickpicker__name {
  flex: 1;
  min-width: 0;
}
.assignee-quickpicker__name > div:first-child {
  color: var(--app-fg-1);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.assignee-quickpicker__role {
  font-size: 10px;
  color: var(--app-fg-4);
  font-family: var(--mx-font-mono);
}
.assignee-quickpicker__tick {
  color: #22c55e !important;
  flex-shrink: 0;
}
.assignee-quickpicker__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 9px;
  font-size: 10.5px;
  color: var(--app-fg-4);
  line-height: 1.4;
  border-top: 1px solid var(--app-tint-2);
}

/* ── Tasks V2.1 (redesigned for speed) ──────────────────────────── */
/* Presenter row — for call walkthroughs, person by person */
.task-presenter-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.task-presenter {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 8px;
  background: var(--app-tint-1);
  border: 1px solid var(--app-tint-3);
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
  text-align: left;
  font-family: inherit;
  color: inherit;
  min-width: 110px;
  position: relative;
}
.task-presenter:hover {
  background: var(--app-tint-3);
  border-color: var(--app-tint-5);
}
.task-presenter:active { transform: scale(0.98); }
.task-presenter.is-active {
  background: linear-gradient(135deg, rgba(244,121,32,.18), rgba(244,121,32,.06));
  border-color: rgba(244,121,32,.5);
  box-shadow: 0 6px 18px rgba(244,121,32,.18), inset 0 1px 0 var(--app-tint-2);
}

.task-presenter__avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2a3548, #1a2433);
  color: var(--app-fg-1);
  font-family: var(--mx-font-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.3px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform .2s;
}
.task-presenter.is-active .task-presenter__avatar {
  background: linear-gradient(135deg, #F47920, #C4541A);
  box-shadow: 0 2px 10px rgba(244,121,32,.4);
}
.task-presenter__avatar--meta {
  background: linear-gradient(135deg, #3a3a3a, #2a2a2a);
  font-size: 10px;
  color: var(--app-fg-1);
}

.task-presenter__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.task-presenter__name {
  font-family: var(--mx-font-display);
  font-size: 11.5px;
  font-weight: 800;
  color: var(--app-fg-1);
  letter-spacing: 0.2px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.task-presenter__me-tag {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: 1px 5px;
  background: rgba(34,197,94,.18);
  color: #4ade80;
  border-radius: 999px;
  text-transform: uppercase;
}
.task-presenter__stats {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 11px;
  color: var(--app-fg-2);
}
.task-presenter__count {
  font-family: var(--mx-font-mono);
  font-size: 15px;
  font-weight: 800;
  color: var(--app-fg-1);
  line-height: 1;
}
.task-presenter.is-active .task-presenter__count { color: #F47920; }
.task-presenter__count-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-family: var(--mx-font-display);
  color: var(--app-fg-3);
  font-weight: 700;
}
.task-presenter__overdue {
  font-family: var(--mx-font-mono);
  font-size: 10.5px;
  font-weight: 800;
  color: var(--app-fg-1);
  background: #ef4444;
  padding: 2px 6px;
  border-radius: 999px;
  margin-left: 4px;
  box-shadow: 0 0 8px rgba(239,68,68,.4);
}
.task-presenter-actions {
  display: flex;
  gap: 6px;
  align-self: center;
}

/* Quick-add bar */
.task-quickadd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 4px 14px;
  background: linear-gradient(135deg, rgba(244,121,32,.06), rgba(244,121,32,.02));
  border: 1px solid rgba(244,121,32,.2);
  border-radius: 10px;
  margin-bottom: 14px;
  transition: border-color .15s, background .15s;
}
.task-quickadd:focus-within {
  border-color: rgba(244,121,32,.5);
  background: linear-gradient(135deg, rgba(244,121,32,.10), rgba(244,121,32,.04));
}
.task-quickadd__plus {
  color: rgba(244,121,32,.8);
  display: grid; place-items: center;
  width: 22px; height: 22px;
  flex-shrink: 0;
}
.task-quickadd__input {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--app-fg-1);
  font-family: inherit;
  font-size: 13.5px;
  padding: 12px 4px;
  outline: none;
}
.task-quickadd__input::placeholder { color: var(--app-fg-4); }
.task-quickadd__expand, .task-quickadd__submit {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  background: transparent;
  border: 1px solid var(--app-tint-4);
  border-radius: 6px;
  color: var(--app-fg-2);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  flex-shrink: 0;
}
.task-quickadd__expand:hover { color: var(--app-fg-1); background: var(--app-tint-2); }
.task-quickadd__submit {
  background: linear-gradient(135deg, #F47920, #C4541A);
  border: 0; color: #fff;
}
.task-quickadd__submit:hover { transform: translateY(-1px); }

/* Chip row */
.task-chiprow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.task-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  background: var(--app-tint-2);
  border: 1px solid var(--app-tint-4);
  border-radius: 999px;
  color: var(--app-fg-2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.task-chip:hover { background: var(--app-tint-3); color: var(--app-fg-1); }
.task-chip.is-active {
  background: var(--app-tint-4);
  border-color: var(--app-fg-5);
  color: var(--app-fg-1);
}
.task-chip__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.task-chip__count {
  font-family: var(--mx-font-mono);
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  background: var(--app-tint-3);
  border-radius: 999px;
  color: var(--app-fg-1);
}
.task-chip.is-active .task-chip__count { background: rgba(0,0,0,.25); }

.is-active-toggle {
  background: rgba(244,121,32,.12) !important;
  border-color: rgba(244,121,32,.3) !important;
  color: var(--app-fg-1) !important;
}

/* Task list groups */
.task-list { display: flex; flex-direction: column; gap: 16px; }
.task-group { display: flex; flex-direction: column; gap: 2px; }
.task-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  border-bottom: 1px solid;
  margin-bottom: 4px;
}
.task-group-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}
.task-group-label {
  font-family: var(--mx-font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--app-fg-1);
}
.task-group-count {
  font-family: var(--mx-font-mono);
  font-size: 11px;
  color: var(--app-fg-3);
}

/* Task row — dense, static (no hover animations per user request) */
.task-row {
  display: grid;
  /* rail | body (flex 1) | actions */
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  padding: 12px 14px 12px 4px;
  background: var(--app-tint-1);
  border: 1px solid var(--app-tint-3);
  border-radius: 10px;
  position: relative;
  cursor: default;
  transition: border-color .14s, background .14s;
}
.task-row + .task-row { margin-top: 6px; }
.task-row:hover { border-color: rgba(244,121,32,.20); background: var(--app-tint-1); }

/* Left rail: stripe + check + select */
.task-row__rail {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

/* Body column: title + description + meta row + expanded details */
.task-row__body {
  min-width: 0;
  cursor: pointer;
  padding: 2px 0;
}
.task-row__body:hover .task-row__title { color: #F47920; }

/* Overdue pill near title */
.task-row__overdue-pill {
  display: inline-block;
  font-family: var(--mx-font-display);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(239,68,68,.18);
  color: #ef4444;
  border: 1px solid rgba(239,68,68,.35);
  margin-left: 8px;
  vertical-align: 2px;
}

/* Horizontal meta row — replaces the vertical right sidebar */
.task-row__metarow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  margin-top: 12px;
}
/* Wrapper around each pill + its picker, so the picker positions correctly */
.metapill__wrap {
  position: relative;
  display: flex;
}
.metapill {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 9px 16px;
  min-width: 145px;
  background: var(--app-tint-2);
  border: 1px solid var(--app-tint-4);
  border-radius: 9px;
  transition: border-color .12s, background .12s;
}
.metapill--click {
  cursor: pointer;
  padding-right: 30px;        /* room for caret */
  position: relative;
}
.metapill--click::after {
  content: '▾';
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(244,121,32,.7);
  font-size: 11px;
  pointer-events: none;
}
.metapill--click:hover {
  border-color: rgba(244,121,32,.45);
  background: rgba(244,121,32,.07);
}
.metapill--click:hover::after { color: #F47920; }
.metapill__label {
  font-family: var(--mx-font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: var(--app-fg-3);
  text-transform: uppercase;
  line-height: 1;
}
.metapill__value {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mx-font-display);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .4px;
  color: var(--app-fg-1);
  line-height: 1.15;
  white-space: nowrap;
}
.metapill__value svg { opacity: .85; }
.metapill__value .trchip__swatch {
  width: 20px; height: 20px; font-size: 10px;
}
.metapill__dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--app-tint-4);
}
.metapill__more {
  margin-left: 4px;
  padding: 1px 6px;
  background: var(--app-tint-5);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
}
.metapill__empty {
  color: var(--app-fg-4);
  font-style: italic;
  font-weight: 500;
}
.metapill--muted .metapill__value {
  color: var(--app-fg-2);
  font-weight: 600;
}
.metapill--toggle {
  background: rgba(244,121,32,.08);
  border-color: rgba(244,121,32,.30);
  cursor: pointer;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  padding: 6px 14px;
}
.metapill--toggle:hover {
  background: rgba(244,121,32,.18);
  border-color: rgba(244,121,32,.55);
}
.metapill--toggle .metapill__label {
  color: rgba(244,121,32,.95);
  font-size: 11px;
  letter-spacing: 1.5px;
}
/* Hover removed — user requested no movement/animation on rows */
.task-row.is-selected { background: rgba(244,121,32,.06); border-color: rgba(244,121,32,.25); }
.task-row.is-completed { opacity: 0.6; }
.task-row__pri-wrap {
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
}
/* Priority stripe — vertical bar at the start of the rail. Explicit
   width/height so it stays a thin colored line and never expands to fill
   the parent (which would paint the whole row in the priority color). */
.task-row__pri {
  width: 4px;
  min-height: 36px;
  align-self: stretch;
  border: none;
  padding: 0;
  border-radius: 2px;
  flex-shrink: 0;
  display: block;
  transition: width 0.12s, box-shadow 0.12s;
}
.task-row__pri.is-clickable { cursor: pointer; }
.task-row__pri.is-clickable:hover {
  width: 7px;
  box-shadow: 0 0 8px currentColor;
}
.task-row__pri.is-clickable:focus-visible {
  outline: 2px solid rgba(244,121,32,.6);
  outline-offset: 1px;
}
.task-row__select {
  margin-left: 4px;
  accent-color: #F47920;
  opacity: 0.3;
  cursor: pointer;
  transition: opacity .12s;
}
.task-row:hover .task-row__select { opacity: 0.7; }
.task-row__select:checked { opacity: 1; }

.task-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--app-fg-5);
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 4px;
  color: transparent;
  transition: border-color .12s, background .12s, color .12s, transform .15s;
}
.task-check:hover { border-color: #22c55e; }
.task-check.is-checked {
  background: #22c55e;
  border-color: #22c55e;
  color: #fff;
}

.task-row__main {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.task-row__title-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.task-row__title {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--app-fg-1);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.task-row__title.is-strike { text-decoration: line-through; color: var(--app-fg-3); }
.task-row__statebadge {
  font-size: 9.5px;
  font-weight: 700;
  font-family: var(--mx-font-display);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  flex-shrink: 0;
}
.task-row__desc {
  font-size: 13.2px;
  color: var(--app-fg-3);
  line-height: 1.45;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Chip row under the title — marca / responsable / estatus / creada / más */
.task-row__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  cursor: pointer;            /* whole row opens the editor on click */
}
.trchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--mx-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--app-fg-1);
  background: var(--app-tint-2);
  border: 1px solid var(--app-tint-4);
  line-height: 1;
  white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.trchip svg { opacity: .8; }
.trchip__swatch {
  display: inline-grid;
  place-items: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  font-size: 8.5px;
  font-weight: 800;
  color: #0A111A;
  font-family: var(--mx-font-display);
  letter-spacing: .3px;
}
.trchip__more {
  margin-left: 4px;
  padding: 1px 6px;
  background: var(--app-tint-5);
  border-radius: 8px;
  font-size: 11px;
}
.trchip--ghost {
  background: transparent;
  border-color: var(--app-tint-3);
  color: var(--app-fg-3);
}
.trchip--toggle {
  cursor: pointer;
  background: rgba(244,121,32,.06);
  border-color: rgba(244,121,32,.25);
  color: rgba(244,121,32,.95);
  font-family: var(--mx-font-display);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 10.5px;
  font-weight: 800;
  padding: 6px 12px;
  margin-top: 4px;
  justify-content: center;
  border-radius: 6px;
}
.trchip--toggle:hover { background: rgba(244,121,32,.16); color: #F47920; border-color: rgba(244,121,32,.5); }

/* Expanded details panel */
.task-row__details {
  margin-top: 9px;
  padding: 10px 12px;
  background: var(--app-tint-1);
  border: 1px solid var(--app-tint-3);
  border-radius: 6px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 7px 16px;
  font-size: 12.6px;
}
.task-row__details-k {
  display: inline-block;
  min-width: 105px;
  color: var(--app-fg-4);
  font-family: var(--mx-font-display);
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  font-size: 11px;
}
.task-row__details-v {
  color: var(--app-fg-1);
  font-weight: 500;
}
.task-row__details-v em { color: var(--app-fg-4); font-style: normal; }

.task-row__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.task-row__brand { display: flex; align-items: center; }
.task-row__avatar {
  width: 25px; height: 25px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2a3548, #1a2433);
  color: var(--app-fg-1);
  font-weight: 700;
  font-size: 11px;
  display: grid;
  place-items: center;
  font-family: var(--mx-font-display);
  letter-spacing: 0.3px;
}
.task-row__avatar--legacy {
  background: linear-gradient(135deg, #3a3a3a, #2a2a2a);
  color: var(--app-fg-3);
  font-style: italic;
}
.task-row__due-wrap {
  position: relative;
  display: inline-flex;
}
.task-row__due {
  font-family: var(--mx-font-mono);
  font-size: 12.6px;
  color: var(--app-fg-2);
  min-width: 90px;
  text-align: right;
  background: transparent;
  border: 1px solid transparent;
  padding: 4px 10px;
  border-radius: 6px;
  transition: all 0.12s;
}
.task-row__due.is-clickable { cursor: pointer; }
.task-row__due.is-clickable:hover {
  background: rgba(244,121,32,.10);
  border-color: rgba(244,121,32,.30);
  color: var(--app-fg-1);
}
.task-row__due.is-overdue {
  color: #ef4444;
  font-weight: 700;
}
.task-row__due.is-overdue.is-clickable:hover {
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.35);
}
.task-row__due.is-nodate {
  color: var(--app-fg-4);
  font-style: italic;
}
.task-row__due:disabled { cursor: default; opacity: 1; }

/* Provenance badge — "extracted from meeting X" */
.task-row__provenance {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 600;
  color: #c4a4f8;
  background: rgba(168,85,247,.10);
  border: 1px solid rgba(168,85,247,.25);
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.12s;
  white-space: nowrap;
}
.task-row__provenance:hover {
  background: rgba(168,85,247,.20);
  color: var(--app-fg-1);
  border-color: rgba(168,85,247,.50);
}
.task-row__provenance svg { color: currentColor !important; }

/* DueDate quick popover */
.duedate-quickpicker {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 100;
  width: 280px;
  background: rgba(20, 18, 24, 0.98);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(244,121,32,.30);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.55);
  overflow: hidden;
  animation: picker-in 0.16s ease-out;
}
.duedate-quickpicker__head {
  padding: 10px 14px;
  font-size: 11px;
  color: var(--app-fg-2);
  border-bottom: 1px solid var(--app-tint-2);
  background: rgba(244,121,32,.06);
}
.duedate-quickpicker__head strong { color: #F47920; font-weight: 800; }
.duedate-quickpicker__shortcuts {
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}
.duedate-quickpicker__chip {
  background: var(--app-tint-2);
  border: 1px solid var(--app-tint-3);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--app-fg-1);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  transition: all 0.12s;
}
.duedate-quickpicker__chip:hover {
  background: rgba(244,121,32,.15);
  border-color: rgba(244,121,32,.40);
}
.duedate-quickpicker__chip-date {
  font-size: 10px;
  color: var(--app-fg-3);
  font-family: var(--mx-font-mono);
  font-weight: 500;
}
.duedate-quickpicker__custom {
  padding: 8px 14px;
  border-top: 1px solid var(--app-tint-2);
}
.duedate-quickpicker__custom label {
  display: block;
  font-size: 10px;
  color: var(--app-fg-3);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
  font-family: var(--mx-font-display);
  font-weight: 700;
}
.duedate-quickpicker__custom input[type="date"] {
  width: 100%;
  background: var(--app-tint-2);
  border: 1px solid var(--app-tint-4);
  color: var(--app-fg-1);
  padding: 6px 8px;
  border-radius: 6px;
  font-family: var(--mx-font-mono);
  font-size: 12px;
  color-scheme: dark;
}
.duedate-quickpicker__foot {
  padding: 8px 14px 10px;
  border-top: 1px solid var(--app-tint-2);
  display: flex;
  justify-content: flex-end;
}

/* Priority quick popover */
.pri-quickpicker {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 100;
  width: 220px;
  background: rgba(20, 18, 24, 0.98);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(244,121,32,.30);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.55);
  overflow: hidden auto;        /* scroll vertically when there are many brands */
  max-height: min(320px, 60vh);
  animation: picker-in 0.16s ease-out;
}
.pri-quickpicker__head {
  padding: 8px 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--app-fg-3);
  font-family: var(--mx-font-display);
  background: rgba(244,121,32,.06);
  border-bottom: 1px solid var(--app-tint-2);
}
.pri-quickpicker__row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  color: var(--app-fg-1);
  cursor: pointer;
  text-align: left;
  transition: background 0.10s;
}
.pri-quickpicker__row:hover { background: var(--app-tint-2); }
.pri-quickpicker__row.is-on { background: rgba(244,121,32,.08); }
.pri-quickpicker__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}
.pri-quickpicker__label { flex: 1; min-width: 0; }
.pri-quickpicker__label > div:first-child {
  font-size: 13px;
  font-weight: 600;
}
.pri-quickpicker__hint {
  font-size: 10px;
  color: var(--app-fg-4);
}
.pri-quickpicker__tick { color: #22c55e !important; flex-shrink: 0; }

.task-row__actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity .15s;
  flex-shrink: 0;
}
.task-row:hover .task-row__actions { opacity: 1; }
.task-row__act {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  background: transparent;
  border: 1px solid var(--app-tint-4);
  border-radius: 6px;
  color: var(--app-fg-2);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.task-row__act:hover { background: var(--app-tint-3); color: var(--app-fg-1); }
.task-row__act--danger:hover {
  background: rgba(239,68,68,.1);
  color: #fca5a5;
  border-color: rgba(239,68,68,.3);
}

/* Empty state */
.task-empty {
  text-align: center;
  padding: 56px 24px;
  background: var(--app-tint-1);
  border: 1px dashed var(--app-tint-4);
  border-radius: 12px;
}
.task-empty__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(34,197,94,.1);
  color: #22c55e;
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
}
.task-empty__title {
  font-size: 14px;
  color: var(--app-fg-2);
  font-weight: 600;
}

/* Reuse existing styles below ── */

.task-kpi-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.task-kpi {
  padding: 10px 14px;
  background: var(--app-tint-1);
  border: 1px solid var(--app-tint-3);
  border-radius: 8px;
  min-width: 90px;
}
.task-kpi--alert { border-color: rgba(239,68,68,.3); background: rgba(239,68,68,.06); }
.task-kpi__label {
  font-family: var(--mx-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--app-fg-3);
}
.task-kpi__value {
  font-size: 20px;
  font-weight: 800;
  color: var(--app-fg-1);
  margin-top: 2px;
  font-family: var(--mx-font-display);
}
.task-kpi--alert .task-kpi__value { color: #ef4444; }

.task-filterbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.task-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--app-tint-4);
  border-radius: 7px;
  min-width: 200px;
  max-width: 280px;
  color: var(--app-fg-4);
}
.task-search input {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--app-fg-1);
  outline: none;
  font-family: inherit;
  font-size: 12.5px;
}
.task-search input::placeholder { color: var(--app-fg-4); }
.task-filter-select {
  padding: 7px 10px;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--app-tint-4);
  border-radius: 7px;
  color: var(--app-fg-1);
  font-family: inherit;
  font-size: 12px;
  outline: none;
  cursor: pointer;
}
.task-filter-select:focus { border-color: rgba(244,121,32,.4); }

.task-bulkbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(244,121,32,.12), rgba(244,121,32,.05));
  border: 1px solid rgba(244,121,32,.3);
  border-radius: 8px;
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--app-fg-1);
  animation: bulkbarIn .2s;
}
@keyframes bulkbarIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

.task-completed-section { margin-top: 20px; }
.task-completed-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--app-tint-1);
  border: 1px solid var(--app-tint-3);
  border-radius: 7px;
  color: var(--app-fg-2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s;
}
.task-completed-toggle:hover { background: var(--app-tint-3); color: var(--app-fg-1); }

/* Drawer */
.drawer-card {
  width: 100%;
  max-width: 540px;
  height: 100%;
  max-height: calc(100vh - 48px);
  background: var(--app-surface);
  border: 1px solid var(--app-tint-4);
  border-radius: 14px;
  box-shadow: 0 32px 70px rgba(0,0,0,.6), 0 12px 24px rgba(0,0,0,.3);
  display: flex;
  flex-direction: column;
  animation: modalIn .2s cubic-bezier(.22,1.1,.36,1);
}

/* ── Login screen ────────────────────────────────────────────────── */
.task-kpi-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.task-kpi {
  padding: 10px 14px;
  background: var(--app-tint-1);
  border: 1px solid var(--app-tint-3);
  border-radius: 8px;
  min-width: 90px;
}
.task-kpi--alert { border-color: rgba(239,68,68,.3); background: rgba(239,68,68,.06); }
.task-kpi__label {
  font-family: var(--mx-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--app-fg-3);
}
.task-kpi__value {
  font-size: 20px;
  font-weight: 800;
  color: var(--app-fg-1);
  margin-top: 2px;
  font-family: var(--mx-font-display);
}
.task-kpi--alert .task-kpi__value { color: #ef4444; }

.task-filterbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.task-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--app-tint-4);
  border-radius: 7px;
  min-width: 240px;
  flex: 1;
  max-width: 320px;
  color: var(--app-fg-4);
}
.task-search input {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--app-fg-1);
  outline: none;
  font-family: inherit;
  font-size: 12.5px;
}
.task-search input::placeholder { color: var(--app-fg-4); }
.task-filter-select {
  padding: 7px 10px;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--app-tint-4);
  border-radius: 7px;
  color: var(--app-fg-1);
  font-family: inherit;
  font-size: 12px;
  outline: none;
  cursor: pointer;
}
.task-filter-select:focus { border-color: rgba(244,121,32,.4); }

.task-quickperson {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.task-quickperson__label {
  font-family: var(--mx-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--app-fg-4);
  margin-right: 4px;
}
.task-person-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--app-tint-2);
  border: 1px solid var(--app-tint-4);
  border-radius: 999px;
  color: var(--app-fg-2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.task-person-pill:hover { background: var(--app-tint-4); color: var(--app-fg-1); }
.task-person-pill.is-active {
  background: rgba(244,121,32,.15);
  border-color: rgba(244,121,32,.5);
  color: var(--app-fg-1);
}
.task-person-pill__count {
  font-family: var(--mx-font-mono);
  font-size: 10px;
  padding: 1px 6px;
  background: var(--app-tint-4);
  border-radius: 999px;
  color: var(--app-fg-1);
}
.task-person-pill.is-active .task-person-pill__count {
  background: rgba(244,121,32,.3);
}

.task-bulkbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(244,121,32,.12), rgba(244,121,32,.05));
  border: 1px solid rgba(244,121,32,.3);
  border-radius: 8px;
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--app-fg-1);
  animation: bulkbarIn .2s;
}
@keyframes bulkbarIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

.tasks-tbl tr.is-selected { background: rgba(244,121,32,.06); }
.tasks-tbl input[type="checkbox"] { cursor: pointer; accent-color: #F47920; }
.tasks-tbl tr:hover { background: var(--app-tint-1); }

.task-title-cell { cursor: pointer; max-width: 480px; }
.task-title { font-size: 13px; font-weight: 600; color: var(--app-fg-1); line-height: 1.4; }
.task-desc { font-size: 11px; color: var(--app-fg-3); margin-top: 3px; line-height: 1.4; max-height: 32px; overflow: hidden; }
.task-group-badge {
  display: inline-block;
  margin-top: 4px;
  font-size: 9.5px;
  font-family: var(--mx-font-display);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 2px 7px;
  background: rgba(168,85,247,.15);
  color: #c4a4f8;
  border-radius: 999px;
}

.task-status-select {
  padding: 4px 8px;
  background: transparent;
  border: 1px solid;
  border-radius: 5px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  outline: none;
}
.task-status-select:disabled { cursor: not-allowed; opacity: 0.6; }

.task-brand-cell { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.task-user-cell { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.task-user-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2a3548, #1a2433);
  color: var(--app-fg-1); font-weight: 700; font-size: 9.5px;
  display: grid; place-items: center;
  font-family: var(--mx-font-display);
  letter-spacing: 0.3px;
}
.task-due { font-family: var(--mx-font-mono); font-size: 11.5px; color: var(--app-fg-2); }
.task-due--overdue { color: #ef4444; font-weight: 700; }

.task-completed-section { margin-top: 18px; }
.task-completed-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--app-tint-1);
  border: 1px solid var(--app-tint-3);
  border-radius: 7px;
  color: var(--app-fg-2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s;
}
.task-completed-toggle:hover { background: var(--app-tint-3); color: var(--app-fg-1); }

/* Drawer (used for papelera + audit) — wider than normal modal */
.drawer-card {
  width: 100%;
  max-width: 540px;
  height: 100%;
  max-height: calc(100vh - 48px);
  background: var(--app-surface);
  border: 1px solid var(--app-tint-4);
  border-radius: 14px;
  box-shadow: 0 32px 70px rgba(0,0,0,.6), 0 12px 24px rgba(0,0,0,.3);
  display: flex;
  flex-direction: column;
  animation: modalIn .2s cubic-bezier(.22,1.1,.36,1);
}

/* ── Login screen ────────────────────────────────────────────────── */
.login-screen {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at top, #131D2C 0%, #0A111A 60%);
  display: grid;
  place-items: center;
  padding: 24px;
  z-index: 100;
  overflow: hidden;
}
.login-bg-glow {
  position: absolute;
  top: -10%; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(244,121,32,.15) 0%, transparent 60%);
  filter: blur(40px);
  pointer-events: none;
}
.login-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: linear-gradient(180deg, var(--app-tint-2), var(--app-tint-1));
  border: 1px solid var(--app-tint-4);
  border-radius: 16px;
  padding: 36px 28px 28px;
  box-shadow:
    0 32px 60px rgba(0,0,0,.5),
    0 12px 24px rgba(0,0,0,.3),
    inset 0 1px 0 var(--app-tint-3);
  backdrop-filter: blur(20px);
  animation: loginIn .4s cubic-bezier(.22, 1.1, .36, 1);
}
@keyframes loginIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.login-logo {
  width: 240px;
  height: auto;
  color: var(--app-fg-1);
  display: block;
  margin: 0 auto 6px;
}
.login-tagline {
  text-align: center;
  font-family: var(--mx-font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--app-fg-4);
  margin-bottom: 28px;
}
.login-field { margin-bottom: 14px; }
.login-field label {
  display: block;
  font-family: var(--mx-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--app-fg-3);
  margin-bottom: 6px;
}
.login-field input {
  width: 100%;
  padding: 12px 14px;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--app-tint-4);
  border-radius: 8px;
  color: var(--app-fg-1);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color .15s, background .15s;
}
.login-field input:focus {
  border-color: rgba(244,121,32,.5);
  background: rgba(0,0,0,.35);
}
.login-field input::placeholder { color: var(--app-fg-5); }
.login-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.3);
  border-radius: 8px;
  color: #fca5a5;
  font-size: 12.5px;
  margin: 6px 0 14px;
  animation: shake .3s;
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-4px); }
  75%     { transform: translateX(4px); }
}
.login-cta {
  width: 100%;
  margin-top: 8px;
  padding: 13px;
  background: linear-gradient(135deg, #F47920, #C4541A);
  border: 0;
  border-radius: 9px;
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  letter-spacing: 0.3px;
  box-shadow: 0 6px 14px rgba(244,121,32,.3);
  transition: transform .12s, box-shadow .15s, opacity .15s;
}
.login-cta:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(244,121,32,.45);
}
.login-cta:active:not(:disabled) { transform: translateY(0); }
.login-cta:disabled { opacity: .5; cursor: not-allowed; }
.login-hint {
  margin-top: 18px;
  font-size: 11px;
  color: var(--app-fg-4);
  text-align: center;
  line-height: 1.5;
}
.login-footer {
  position: absolute;
  bottom: 18px;
  left: 0; right: 0;
  text-align: center;
  font-size: 10.5px;
  color: var(--app-fg-5);
  font-family: var(--mx-font-mono);
  letter-spacing: 0.3px;
}

/* ── Logout confirmation modal ─────────────────────────────────── */
.logout-modal { text-align: center; }
.logout-modal__body {
  padding: 28px 24px 18px;
}
.logout-modal__icon {
  width: 64px; height: 64px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(239,68,68,.18), rgba(239,68,68,.06));
  border: 1px solid rgba(239,68,68,.3);
  color: #ef4444;
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
}
.logout-modal__title {
  font-family: var(--mx-font-display);
  font-size: 20px;
  font-weight: 800;
  color: var(--app-fg-1);
  letter-spacing: 0.3px;
}
.logout-modal__sub {
  font-size: 13px;
  color: var(--app-fg-2);
  margin-top: 10px;
  line-height: 1.5;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
.logout-modal__actions {
  display: flex;
  gap: 10px;
  padding: 14px 22px 20px;
  border-top: 1px solid var(--app-tint-2);
  justify-content: stretch;
}
.logout-modal__actions .btn {
  flex: 1;
  padding: 11px;
  justify-content: center;
}
.logout-modal__confirm {
  background: linear-gradient(135deg, #ef4444, #c63030);
  color: var(--app-fg-1);
  border: 0;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .12s, box-shadow .15s;
  box-shadow: 0 4px 12px rgba(239,68,68,.3);
}
.logout-modal__confirm:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(239,68,68,.45);
}

/* ── Sidebar user logout button ─────────────────────────────────── */
.user-logout {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--app-tint-3);
  color: var(--app-fg-3);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  flex-shrink: 0;
}
.user-logout:hover {
  background: rgba(239,68,68,.1);
  color: #fca5a5;
  border-color: rgba(239,68,68,.3);
}

/* ── Env banner (shown only on localhost) ────────────────────────────
   A thin bar pinned to the very top of the viewport so it's impossible
   to miss. The proxy variant is neutral-blue (you're touching real data
   safely), the local variant is alarm-orange (your changes are stuck
   on this machine). Production renders nothing — see EnvBanner.jsx. */
.env-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 16px;
  font-family: var(--mx-font-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: #fff;
  pointer-events: none;     /* never blocks clicks on the app below */
}
.env-banner code {
  font-family: var(--mx-font-mono);
  font-weight: 600;
  background: rgba(0,0,0,.25);
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: 0;
}
.env-banner__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,.25);
  flex-shrink: 0;
  animation: env-banner-pulse 1.6s ease-in-out infinite;
}
.env-banner__sub {
  font-family: var(--mx-font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  opacity: .92;
}
@keyframes env-banner-pulse {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.35; }
}
.env-banner--proxy {
  background: linear-gradient(90deg, #1d4ed8, #3b82f6);
}
.env-banner--local {
  background: linear-gradient(90deg, #b91c1c, #ef4444);
}
/* Push the app down so the banner doesn't cover the topbar. ~24px tall. */
body:has(.env-banner) .app { padding-top: 26px; }

/* ── Theme toggle (sidebar user-card) ─────────────────────────────── */
.theme-toggle {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--app-border-soft);
  color: var(--app-fg-3);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s, transform .12s;
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: var(--app-hover);
  color: var(--mx-orange);
  border-color: rgba(244,121,32,.35);
  transform: rotate(-10deg);
}
.theme-toggle svg { display: block; }

/* ── Modal (user create/edit, etc.) ─────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  display: grid;
  /* Top-align + allow the overlay itself to scroll: guarantees a tall modal's
     footer (e.g. the Crear button) is always reachable even if the card's own
     max-height/scroll doesn't kick in. */
  align-items: start;
  justify-items: center;
  overflow-y: auto;
  z-index: 200;
  padding: 24px;
  animation: modalFade .15s;
}
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  width: 100%;
  background: var(--app-surface);
  border: 1px solid var(--app-tint-4);
  border-radius: 14px;
  box-shadow: 0 32px 70px rgba(0,0,0,.6), 0 12px 24px rgba(0,0,0,.3);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 48px);
  animation: modalIn .2s cubic-bezier(.22,1.1,.36,1);
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--app-tint-2);
}
.modal-body {
  padding: 18px 22px;
  overflow-y: auto;
  flex: 1 1 auto;        /* take remaining space inside the flex card */
  min-height: 0;         /* required for flex children to actually scroll */
}
.modal-header, .modal-footer { flex-shrink: 0; }
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--app-tint-2);
}

/* ── Form row ───────────────────────────────────────────────────── */
.form-row { margin-bottom: 14px; }
.form-row label {
  display: block;
  font-family: var(--mx-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--app-fg-3);
  margin-bottom: 6px;
}
.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 10px 12px;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--app-tint-4);
  border-radius: 7px;
  color: var(--app-fg-1);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color .15s;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: rgba(244,121,32,.5);
}

/* ── btn primary variant ────────────────────────────────────────── */
.btn.primary {
  background: linear-gradient(135deg, #F47920, #C4541A);
  color: #fff;
  border: 0;
  font-weight: 700;
}
.btn.primary:hover { transform: translateY(-1px); }

/* ── Sync status pill + dropdown (topbar) ────────────────────────── */
.sync-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 11px;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 999px;
  color: var(--app-fg-1);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, border-color .15s, transform .12s;
  white-space: nowrap;
  position: relative;
}
.sync-pill:hover { background: rgba(34, 197, 94, 0.14); border-color: rgba(34, 197, 94, 0.5); }
.sync-pill:active { transform: scale(0.97); }
.sync-pill.sync-pill--open {
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(34, 197, 94, 0.7);
}
.sync-pill.sync-pill--warn {
  background: rgba(244, 121, 32, 0.10);
  border-color: rgba(244, 121, 32, 0.4);
}
.sync-pill.sync-pill--warn:hover { background: rgba(244, 121, 32, 0.18); }
.sync-pill.sync-pill--bad {
  background: rgba(239, 68, 68, 0.10);
  border-color: rgba(239, 68, 68, 0.4);
}
.sync-pill.sync-pill--bad:hover { background: rgba(239, 68, 68, 0.18); }

.sync-pill__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 8px currentColor;
  position: relative;
}
.sync-pill--ok .sync-pill__dot {
  animation: syncPulse 2.2s ease-in-out infinite;
}
@keyframes syncPulse {
  0%, 100% { box-shadow: 0 0 4px rgba(34, 197, 94, 0.5); }
  50%      { box-shadow: 0 0 10px rgba(34, 197, 94, 0.85); }
}
.sync-pill__primary {
  font-weight: 700;
  color: var(--app-fg-1);
}
/* When synced, read the status as green ("Actualizado") at a glance. */
.sync-pill--ok .sync-pill__primary { color: #22c55e; }

/* KAI Playbook editor modal */
.kai-playbook__overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: versionToastIn .2s ease;
}
.kai-playbook__modal {
  width: min(760px, 100%); max-height: 86vh;
  display: flex; flex-direction: column;
  background: var(--app-surface);
  border: 1px solid var(--app-tint-4);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.kai-playbook__head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--app-tint-3);
}
.kai-playbook__title { font-family: var(--mx-font-display); font-weight: 800; font-size: 15px; color: var(--app-fg-1); }
.kai-playbook__sub { font-size: 12px; color: var(--app-fg-3); margin-top: 3px; line-height: 1.45; max-width: 600px; }
.kai-playbook__x { margin-left: auto; background: none; border: none; color: var(--app-fg-3); font-size: 15px; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.kai-playbook__x:hover { background: var(--app-tint-3); color: var(--app-fg-1); }
.kai-playbook__textarea {
  flex: 1; min-height: 320px; resize: vertical;
  margin: 14px 18px;
  background: var(--app-tint-1);
  border: 1px solid var(--app-tint-3);
  border-radius: 10px;
  padding: 14px;
  color: var(--app-fg-1);
  font-family: var(--mx-font-mono); font-size: 13px; line-height: 1.55;
  outline: none;
}
.kai-playbook__textarea:focus { border-color: rgba(244, 121, 32, 0.6); }
.kai-playbook__foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; border-top: 1px solid var(--app-tint-3);
}
.kai-playbook__count { font-size: 11px; color: var(--app-fg-4); font-family: var(--mx-font-mono); }

/* "Nueva versión disponible" toast (Fase 2) — top-center, accent orange so it
   reads as an action, distinct from the green sync pill. */
.version-toast {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 8px 8px 16px;
  background: var(--app-surface);
  border: 1px solid rgba(244, 121, 32, 0.55);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  font-size: 13px;
  font-weight: 600;
  color: var(--app-fg-1);
  animation: versionToastIn .3s ease;
}
@keyframes versionToastIn {
  from { opacity: 0; transform: translate(-50%, -10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.version-toast__btn {
  border: none;
  background: #F47920;
  color: #fff;
  font-weight: 700;
  font-size: 12.5px;
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
.version-toast__btn:hover { background: #e06d18; }
.sync-pill__sep {
  color: var(--app-fg-4);
  margin: 0 1px;
}
.sync-pill__secondary {
  color: var(--app-fg-2);
  font-weight: 500;
}
.sync-pill__chev {
  margin-left: 4px;
  color: var(--app-fg-3);
  transition: transform .2s ease;
}
.sync-pill__chev.rot { transform: rotate(180deg); }

/* Dropdown panel */
.sync-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  background: var(--app-surface);
  border: 1px solid var(--app-tint-4);
  border-radius: 12px;
  box-shadow:
    0 24px 50px rgba(0, 0, 0, 0.5),
    0 8px 16px rgba(0, 0, 0, 0.3);
  z-index: 50;
  padding: 8px;
  animation: syncDropdownIn .2s cubic-bezier(.22, 1.1, .36, 1);
}
@keyframes syncDropdownIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.sync-block {
  padding: 10px 12px;
  border-bottom: 1px solid var(--app-tint-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sync-block:last-of-type { border-bottom: none; }
.sync-block--head {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 14px;
}
.sync-block__icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.sync-block__title {
  font-family: var(--mx-font-display);
  font-size: 14px;
  font-weight: 800;
  color: var(--app-fg-1);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.sync-block__sub {
  font-size: 11.5px;
  color: var(--app-fg-3);
  font-family: var(--mx-font-mono);
  margin-top: 2px;
}
.sync-block__label {
  font-family: var(--mx-font-display);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--app-fg-4);
}
.sync-block__value {
  font-size: 13px;
  color: var(--app-fg-1);
  font-weight: 600;
  font-family: var(--mx-font-sans);
  margin-top: 4px;
}
.sync-block__meta {
  font-size: 11px;
  color: var(--app-fg-4);
  font-family: var(--mx-font-mono);
  margin-top: 4px;
}

.sync-dropdown__cta {
  margin-top: 8px;
  width: 100%;
  background: linear-gradient(135deg, #F47920, #C4541A);
  color: #fff;
  border: 0;
  padding: 11px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: transform .12s, opacity .12s;
}
.sync-dropdown__cta:hover:not(:disabled) { transform: translateY(-1px); }
.sync-dropdown__cta:disabled { opacity: 0.6; cursor: not-allowed; }
.sync-dropdown__cta--ghost {
  background: var(--app-tint-3);
  border: 1px solid var(--app-tint-4);
  color: var(--app-fg-1);
}
.sync-dropdown__cta--ghost:hover:not(:disabled) {
  background: rgba(244,121,32,.10);
  border-color: rgba(244,121,32,.30);
}
.sync-dropdown__hint {
  font-size: 10.5px;
  color: var(--app-fg-4);
  text-align: center;
  padding: 8px 12px 4px;
  line-height: 1.45;
}
.sync-dropdown__hint code {
  font-family: var(--mx-font-mono);
  background: var(--app-tint-2);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--app-fg-2);
}

/* Blinking cursor shown while KAI is streaming */
.cursor-blink { display: inline-block; color: var(--mx-orange); margin-left: 2px; animation: kaiBlink 1s steps(2, start) infinite; }
@keyframes kaiBlink { to { visibility: hidden; } }

/* ── KAI full-screen layout (no page scroll) ─────────────────────── */
/* Body class applied while KAI is mounted. Prevents the body scrollbar.
   The grid below sizes itself to fill the visible space below the
   page-header (topbar + filter rail), accounting for the .app zoom factor
   so it doesn't push the page taller than the viewport. */
body.kai-fullscreen {
  overflow: hidden !important;
}
body.kai-fullscreen .content {
  overflow: hidden !important;
  padding-bottom: 14px !important;
}
.kai-grid {
  /* Zoom on .main is 1.18 — unzoom the height calc so we fill the viewport
     without forcing a page scroll. Header areas above eat ~180 zoomed px. */
  height: calc((100vh - 180px) / 1.18);
  min-height: 520px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 14px;
  position: relative;
}
@media (max-width: 1100px) {
  .kai-grid { grid-template-columns: 1fr 260px; }
}
@media (max-width: 900px) {
  .kai-grid { grid-template-columns: 1fr; height: auto; min-height: 0; }
  body.kai-fullscreen { overflow: auto !important; }
}

/* ── KAI · Opción B — full-screen, slim strip, collapsible right panel ── */
.content--ai { padding: 0 !important; min-height: 0; display: flex; overflow: hidden; }
.content--ai > .kai-grid {
  flex: 1;
  /* Pin to the viewport (the /1.18 undoes the zoom on .main) so the input bar
     is ALWAYS visible at the bottom and the conversation scrolls inside, not
     the page. A little top/bottom inset keeps the header strip + hub header
     from being clipped against the viewport edge. */
  height: calc((100vh - 18px) / 1.18);
  min-height: 0;
  grid-template-columns: 1fr;   /* right panel collapsed by default */
  gap: 0;
  padding-top: 6px;
}
.content--ai > .kai-grid.kai-grid--side { grid-template-columns: 1fr 320px; gap: 12px; padding: 6px 12px 0 0; }
.content--ai .kai-chat { border-radius: 0; border: 0; }
.content--ai .kai-grid--side .kai-sidebar { padding-top: 14px; }

/* Slim header — engine selector + actions (replaces the bulky hero header) */
.kai-strip {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 18px;
  border-bottom: 1px solid var(--app-tint-3);
  background: linear-gradient(180deg, var(--app-tint-2), var(--app-tint-1));
  position: relative; z-index: 2; flex-shrink: 0;
}
.kai-strip__spacer { flex: 1; }
.kai-strip__engine { display: flex; align-items: center; gap: 9px; min-width: 0; }
.kai-strip__label {
  font: 700 10px/1 var(--mx-font-display); letter-spacing: 1px; text-transform: uppercase;
  color: var(--app-fg-4); flex-shrink: 0;
}
.kai-strip__actions { display: flex; align-items: center; gap: 7px; }
.kai-strip__btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 33px; padding: 0 12px;
  border: 1px solid var(--app-tint-4); border-radius: 9px;
  background: rgba(255,255,255,.05); color: var(--app-fg-2);
  font: 600 12.5px/1 var(--mx-font-display); cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.kai-strip__ico { font-size: 13px; line-height: 1; }
.kai-strip__btn:hover { background: rgba(255,255,255,.1); color: var(--app-fg-1); border-color: var(--app-tint-4); }
.kai-strip__btn.is-active { border-color: rgba(244,121,32,.55); color: #F47920; background: rgba(244,121,32,.12); }
.kai-strip__btn:disabled { opacity: .5; cursor: default; }
.kai-strip__btn--accent { border-color: rgba(244,121,32,.45); color: #F47920; }
.kai-strip__btn--accent:hover { background: rgba(244,121,32,.16); border-color: rgba(244,121,32,.7); }
.kai-strip__btn--toggle { padding: 0 10px; font-size: 13px; }
.kai-strip__count { font: 700 10px/1 var(--mx-font-mono); background: rgba(244,121,32,.22); color: #F47920; padding: 2px 6px; border-radius: 6px; margin-left: 1px; }

/* Widen + center the conversation (Opción B) */
.content--ai .kai-stream { padding: 28px 24px 20px; }
.content--ai .kai-stream > .kai-msg,
.content--ai .kai-stream > .kai-toolchip,
.content--ai .kai-stream > .kai-confirm,
.content--ai .kai-stream > .kai-welcome { width: 100%; max-width: 880px; margin-left: auto; margin-right: auto; }
.content--ai .kai-inputbar__inner,
.content--ai .kai-inputbar__hint { max-width: 880px; margin-left: auto; margin-right: auto; }

/* "↓ Ir al final" — only shows when scrolled up while streaming */
.kai-jump {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 104px; z-index: 6;
  border: 1px solid var(--app-tint-4); border-radius: 999px;
  background: var(--app-surface); color: var(--app-fg-1);
  font: 600 12px/1 var(--mx-font-display); letter-spacing: .3px;
  padding: 9px 15px; cursor: pointer; box-shadow: 0 6px 22px rgba(0,0,0,.4);
  animation: versionToastIn .2s ease;
}
.kai-jump:hover { border-color: rgba(244,121,32,.55); color: #F47920; }

/* ── KAI redesign · main chat column ────────────────────────────── */
.kai-chat {
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at top right, rgba(244,121,32,.05), transparent 60%),
    linear-gradient(180deg, #131D2C, #0d1623);
  border: 1px solid var(--app-tint-3);
  border-radius: 16px;
  overflow: hidden;
  min-height: 0;
  position: relative;
}
/* "preliminar" tag — recent day(s) included but still estimated (3P · hoy). */
.prelim-tag {
  display: inline-block; margin-left: 6px; vertical-align: middle;
  font-family: var(--mx-font-mono); font-size: 8.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px;
  color: #fbbf24; background: rgba(251,191,36,.15);
  border: 1px solid rgba(251,191,36,.32); padding: 1px 6px; border-radius: 999px;
}

.kai-chat.is-dragover { border-color: rgba(244,121,32,.6); }
/* Drag-and-drop overlay: drop an image/document anywhere on the conversation. */
.kai-dropzone {
  position: absolute; inset: 0; z-index: 20;
  display: grid; place-items: center;
  background: rgba(11,17,26,.78);
  backdrop-filter: blur(2px);
  pointer-events: none;
  animation: kaiFadeIn .12s ease;
}
.kai-dropzone__card {
  text-align: center;
  border: 2px dashed rgba(244,121,32,.6);
  border-radius: 16px;
  padding: 28px 44px;
  background: rgba(244,121,32,.06);
}
.kai-dropzone__ic { font-size: 30px; color: var(--mx-orange); line-height: 1; }
.kai-dropzone__t { font-family: var(--mx-font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 1px; font-size: 18px; color: var(--app-fg-1); margin-top: 8px; }
.kai-dropzone__s { font-size: 12px; color: var(--app-fg-3); margin-top: 3px; }
.kai-bg-glow {
  position: absolute;
  top: -30%; left: 50%;
  transform: translateX(-50%);
  width: 80%; height: 60%;
  background: radial-gradient(ellipse, rgba(244,121,32,.08), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

/* Hero header */
.kai-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--app-tint-2);
  position: relative;
  z-index: 1;
  background: var(--app-tint-1);
  backdrop-filter: blur(6px);
}
.kai-logo-wrap { position: relative; flex-shrink: 0; }
/* Legacy logo wrap (kept for the floating panel which still uses .kai-logo) */
.kai-logo {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(244,121,32,.25), rgba(244,121,32,.08));
  border: 1.5px solid rgba(244,121,32,.55);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 14px rgba(244,121,32,.3);
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.kai-logo .kai-avatar { width: 100%; height: 100%; box-shadow: none; }

/* Inside the header, the KaiHero gets smaller margins so it sits tight. */
.kai-header .kai-hero { margin: 0; }
.kai-header .kai-hero__spark { font-size: 10px !important; }
.kai-header .kai-hero__spark--1 { font-size: 12px !important; }
.kai-header .kai-hero__avatar .kai-avatar { width: 86%; height: 86%; }

/* KAI nav icon — uses dedicated brand PNGs (kai-icon / mexus-mark).
   These have their own visual treatment so we don't add a circular
   container; just subtle effects on hover/active for affordance. */
.nav-item__kai-icon {
  display: block;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
  transition: filter .15s ease, transform .15s ease;
}
.nav-item--kai:hover .nav-item__kai-icon {
  transform: scale(1.08);
  filter: drop-shadow(0 0 6px rgba(244, 121, 32, 0.45));
}
.nav-item--kai.active .nav-item__kai-icon {
  filter: drop-shadow(0 0 8px rgba(244, 121, 32, 0.6));
}
.app.is-sidebar-collapsed .nav-item__kai-icon { margin: 0 auto; }
.kai-logo__pulse {
  position: absolute;
  inset: -4px;
  border-radius: 14px;
  border: 2px solid rgba(244,121,32,.4);
  animation: kaiPulse 2.4s ease-in-out infinite;
}
@keyframes kaiPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 0; transform: scale(1.18); }
}
.kai-header__body { flex: 1; min-width: 0; }
.kai-header__title {
  font-family: var(--mx-font-display);
  font-size: 15px;
  font-weight: 800;
  color: var(--app-fg-1);
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.kai-header__online {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-family: var(--mx-font-display);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 8px;
  background: rgba(34,197,94,.15);
  color: #4ade80;
  border-radius: 999px;
}
.kai-header__beta {
  font-family: var(--mx-font-display);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.4px;
  padding: 2px 7px;
  background: rgba(244,121,32,.18);
  color: #F47920;
  border-radius: 4px;
  border: 1px solid rgba(244,121,32,.4);
  margin-left: 2px;
}

/* Fox avatar — render the PNG natively (transparent bg), no circular crop.
   We let the fox "float" with just a soft drop-shadow, matching the boot
   splash treatment. */
.kai-avatar {
  border-radius: 0;
  object-fit: contain;
  background: transparent;
  border: none;
  box-shadow: none;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.35));
}
.kai-header__online-dot {
  width: 6px; height: 6px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 6px #22c55e;
  animation: kaiBlinkDot 2s ease-in-out infinite;
}
@keyframes kaiBlinkDot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.kai-header__sub {
  font-size: 10.5px;
  color: var(--app-fg-3);
  margin-top: 3px;
  font-family: var(--mx-font-mono);
}
.kai-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Model pills */
.kai-model-pills {
  display: inline-flex;
  background: rgba(0,0,0,.3);
  border: 1px solid var(--app-tint-3);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.kai-model-pill {
  padding: 6px 11px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--app-fg-3);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.kai-model-pill:hover:not(:disabled) { color: var(--app-fg-1); }
.kai-model-pill.is-active {
  background: linear-gradient(135deg, #F47920, #C4541A);
  color: #fff;
  box-shadow: 0 2px 6px rgba(244,121,32,.3);
}
.kai-model-pill:disabled { opacity: 0.6; cursor: not-allowed; }

/* Stream / message area */
.kai-stream {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 22px 14px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.kai-stream::-webkit-scrollbar { width: 6px; }
.kai-stream::-webkit-scrollbar-thumb { background: var(--app-tint-3); border-radius: 999px; }
.kai-stream::-webkit-scrollbar-thumb:hover { background: rgba(244,121,32,.3); }

/* Welcome / empty state */
.kai-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0 12px;
  animation: kaiFadeIn .4s ease;
}
@keyframes kaiFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.kai-welcome__hero { text-align: center; margin-bottom: 4px; }
.kai-welcome__avatar { margin: 0 auto 2px; }
/* Old static brand container — kept for legacy fallback if KaiHero not loaded */
.kai-welcome__brand {
  width: 80px; height: 80px;
  border-radius: 0;
  background: transparent;
  border: none;
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  box-shadow: none;
  animation: kaiHover 3s ease-in-out infinite;
  overflow: hidden;
}
.kai-welcome__brand .kai-avatar { width: 100%; height: 100%; box-shadow: none; }

/* ── KAI Hero — the animated living avatar ─────────────────────── */
.kai-hero {
  position: relative;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  /* Subtle float of the whole composition. Slow + organic. */
  animation: kaiHeroFloat 5.5s ease-in-out infinite;
}
@keyframes kaiHeroFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Subtle dashed orbits rotating around the fox — same treatment as the
   boot splash. No more pulsing rings (that gave the "encajonado" look). */
.kai-hero__aura {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  border: 1px dashed rgba(244, 121, 32, 0.22);
  opacity: 1;
  animation: kaiOrbitSpin linear infinite;
}
.kai-hero__aura--1 { inset: -10%; animation-duration: 28s; }
.kai-hero__aura--2 { inset:  4%;  animation-duration: 18s; animation-direction: reverse; border-color: rgba(244,121,32,0.32); }
.kai-hero__aura--3 { inset: 18%;  animation-duration: 22s; opacity: 0; }   /* hidden — keep the slot for the 3rd marker so JSX doesn't break */
@keyframes kaiOrbitSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Drifting sparkles — small orange glyphs orbiting the fox.
   Each one has slightly different drift + opacity timing. */
.kai-hero__spark {
  position: absolute;
  color: #F47920;
  text-shadow: 0 0 8px rgba(244, 121, 32, 0.6);
  pointer-events: none;
  font-size: 14px;
  opacity: 0;
  animation: kaiSparkle 4.5s ease-in-out infinite;
}
.kai-hero__spark--1 { top: 4%;  left: -2%; animation-delay: 0s;   font-size: 16px; }
.kai-hero__spark--2 { top: 12%; right: -4%; animation-delay: 0.8s; font-size: 13px; }
.kai-hero__spark--3 { bottom: 14%; right: 4%; animation-delay: 1.6s; font-size: 11px; }
.kai-hero__spark--4 { bottom: -2%; left: 18%; animation-delay: 2.4s; font-size: 14px; }
.kai-hero__spark--5 { top: 32%; left: -6%; animation-delay: 3.2s; font-size: 10px; }
@keyframes kaiSparkle {
  0%, 100%  { opacity: 0;    transform: translate(0, 0) scale(0.6) rotate(0deg); }
  20%       { opacity: 0.95; transform: translate(-4px, -6px) scale(1) rotate(20deg); }
  60%       { opacity: 0.4;  transform: translate(-10px, -14px) scale(1.2) rotate(60deg); }
}

/* The fox floats freely — no disc behind it, no border, no fill. Just
   breathing scale + drop-shadow glow that pulses subtly. */
.kai-hero__avatar {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: transparent;
  border-radius: 0;
  animation: kaiBreathe 3.6s ease-in-out infinite;
  transition: transform .25s cubic-bezier(.22, 1, .36, 1);
  z-index: 2;
}
@keyframes kaiBreathe {
  0%, 100% { transform: scale(1)    translateY(0); }
  50%      { transform: scale(1.03) translateY(-4px); }
}
.kai-hero__avatar .kai-avatar {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  filter:
    drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 22px rgba(244, 121, 32, 0.30));
  transition: filter .4s cubic-bezier(.22, 1, .36, 1);
}
.kai-hero:hover .kai-hero__avatar .kai-avatar {
  filter:
    drop-shadow(0 14px 22px rgba(0, 0, 0, 0.50))
    drop-shadow(0 0 30px rgba(244, 121, 32, 0.45));
}

/* ── Speech bubble for the welcome greeting ─────────────────────── */
.kai-welcome__bubble {
  position: relative;
  margin: 6px auto 0;
  max-width: 500px;
  padding: 14px 20px 16px;
  background: linear-gradient(180deg, var(--app-tint-2), var(--app-tint-1));
  border: 1px solid rgba(244, 121, 32, 0.25);
  border-radius: 16px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35);
  animation: kaiBubbleIn .5s cubic-bezier(.22, 1.1, .36, 1) backwards .15s;
}
@keyframes kaiBubbleIn {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.kai-welcome__bubble-tail {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 16px; height: 16px;
  background: linear-gradient(135deg, rgba(244,121,32,.18), var(--app-tint-2));
  border-left: 1px solid rgba(244, 121, 32, 0.25);
  border-top: 1px solid rgba(244, 121, 32, 0.25);
}
.kai-welcome__name {
  color: #F47920;
  font-weight: 800;
}
@keyframes kaiHover {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.kai-welcome__title {
  font-family: var(--mx-font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--app-fg-1);
  letter-spacing: 0.3px;
}
.kai-welcome__sub {
  font-size: 12px;
  color: var(--app-fg-2);
  margin-top: 8px;
  line-height: 1.5;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* Prompt grid (categorized) */
.kai-promptgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}
@media (max-width: 800px) { .kai-promptgrid { grid-template-columns: 1fr; } }
.kai-promptcat {
  background: var(--app-tint-1);
  border: 1px solid var(--app-tint-3);
  border-radius: 12px;
  padding: 12px;
  transition: border-color .15s, background .15s;
}
.kai-promptcat:hover { background: var(--app-tint-2); border-color: var(--app-tint-4); }
.kai-promptcat__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.kai-promptcat__icon {
  width: 26px; height: 26px;
  border-radius: 7px;
  display: grid;
  place-items: center;
}
.kai-promptcat__label {
  font-family: var(--mx-font-display);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--app-fg-1);
}
.kai-promptcat__items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kai-promptcat__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  background: var(--app-tint-1);
  border: 1px solid var(--app-tint-2);
  border-radius: 6px;
  color: var(--app-fg-1);
  font-family: inherit;
  font-size: 11.5px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s, transform .12s;
}
.kai-promptcat__item:hover:not(:disabled) {
  background: rgba(244,121,32,.08);
  border-color: rgba(244,121,32,.3);
  color: var(--app-fg-1);
  transform: translateX(2px);
}
.kai-promptcat__item:disabled { opacity: 0.5; cursor: not-allowed; }
.kai-promptcat__item svg { color: rgba(244,121,32,.7); flex-shrink: 0; }

/* Messages */
.kai-msg {
  display: flex;
  gap: 12px;
  animation: kaiMsgIn .25s ease-out;
}
@keyframes kaiMsgIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.kai-msg--you { flex-direction: row-reverse; }
.kai-msg__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-family: var(--mx-font-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.3px;
}
.kai-msg--ai .kai-msg__avatar {
  background: radial-gradient(circle at 50% 40%, #1E2C40, #0E1825);
  border: 1px solid rgba(244,121,32,.4);
  color: var(--app-fg-1);
  box-shadow: 0 2px 8px rgba(244,121,32,.25);
  overflow: hidden;
}
.kai-msg--you .kai-msg__avatar {
  background: linear-gradient(135deg, #2a3548, #1a2433);
  color: var(--app-fg-1);
}
.kai-msg__bubble {
  max-width: 88%;
  padding: 12px 16px;
  border-radius: 14px;
  position: relative;
}
.kai-msg--ai .kai-msg__bubble {
  background: var(--app-tint-2);
  border: 1px solid var(--app-tint-3);
  border-top-left-radius: 4px;
}
.kai-msg--you .kai-msg__bubble {
  background: linear-gradient(135deg, rgba(244,121,32,.18), rgba(244,121,32,.08));
  border: 1px solid rgba(244,121,32,.3);
  border-top-right-radius: 4px;
}
.kai-msg__author {
  font-family: var(--mx-font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--app-fg-3);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.kai-msg__status {
  font-family: var(--mx-font-mono);
  text-transform: none;
  letter-spacing: 0;
  font-size: 10.5px;
  color: rgba(244,121,32,.8);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
}
.kai-msg__status-dot {
  width: 6px; height: 6px;
  background: #F47920;
  border-radius: 50%;
  animation: kaiBlinkDot 1s ease-in-out infinite;
}
.kai-msg__body {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--app-fg-1);
}
.kai-msg__body p { margin: 0 0 8px; }
.kai-msg__body p:last-child { margin-bottom: 0; }
.kai-msg__meta {
  font-family: var(--mx-font-mono);
  font-size: 10.5px;
  color: var(--app-fg-4);
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed var(--app-tint-3);
}

/* Thinking indicator (3 dots) */
.kai-thinking { display: inline-flex; align-items: center; gap: 4px; }
.kai-thinking__dot {
  width: 6px; height: 6px;
  background: rgba(244,121,32,.7);
  border-radius: 50%;
  animation: kaiThink 1.2s ease-in-out infinite;
}
.kai-thinking__dot:nth-child(2) { animation-delay: 0.15s; }
.kai-thinking__dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes kaiThink {
  0%, 80%, 100% { opacity: 0.3; transform: scale(1); }
  40%           { opacity: 1; transform: scale(1.3); }
}

/* Error banner */
.kai-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(239,68,68,.08);
  border-top: 1px solid rgba(239,68,68,.3);
  color: #fca5a5;
  font-size: 12px;
  flex-wrap: wrap;
}
.kai-error__hint {
  font-size: 11px;
  color: var(--app-fg-3);
  flex: 1;
  min-width: 240px;
}
.kai-error code {
  font-family: var(--mx-font-mono);
  background: rgba(0,0,0,.3);
  padding: 1px 5px;
  border-radius: 3px;
}

/* Input bar */
.kai-inputbar {
  border-top: 1px solid var(--app-tint-2);
  padding: 12px 20px 14px;
  background: transparent;
  position: relative;
  z-index: 1;
}
.kai-inputbar__inner {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  /* Clean solid surface (no see-through tint over the orange glow). */
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 12px;
  padding: 5px 6px 5px 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.16);
  transition: border-color .15s, box-shadow .15s;
}
.kai-inputbar__inner:focus-within {
  border-color: rgba(244,121,32,.55);
  box-shadow: 0 2px 12px rgba(244,121,32,.14);
}
.kai-input::placeholder { color: var(--app-fg-3) !important; }
.kai-input {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--app-fg-1);
  font-family: inherit;
  font-size: 13.5px;
  padding: 9px 0;
  outline: none;
  resize: none;
  min-height: 22px;
  /* Grows with content up to ~3x (auto-grow in JS), then scrolls internally. */
  max-height: 184px;
  overflow-y: auto;
  line-height: 1.5;
}
.kai-input::placeholder { color: var(--app-fg-4); }
.kai-input:disabled { opacity: 0.6; }
.kai-send {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #F47920, #C4541A);
  border: 0;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, opacity .15s;
  box-shadow: 0 3px 10px rgba(244,121,32,.35);
  flex-shrink: 0;
}
.kai-send:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(244,121,32,.5); }
.kai-send:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.kai-send__loading {
  font-family: var(--mx-font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  animation: kaiThink 1s linear infinite;
}
.kai-inputbar__hint {
  margin-top: 8px;
  font-size: 10.5px;
  color: var(--app-fg-4);
  text-align: center;
}
.kai-inputbar__hint kbd {
  font-family: var(--mx-font-mono);
  font-size: 9.5px;
  padding: 1px 5px;
  background: var(--app-tint-3);
  border: 1px solid var(--app-tint-4);
  border-radius: 3px;
  color: var(--app-fg-2);
}

/* ── KAI redesign · sidebar ─────────────────────────────────────── */
.kai-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
}
.kai-sidebar::-webkit-scrollbar { width: 5px; }
.kai-sidebar::-webkit-scrollbar-thumb { background: var(--app-tint-3); border-radius: 999px; }

/* ── KAI right-hand HUB: conversations + engine + capabilities ───────── */
.kai-strip__title { display: flex; flex-direction: column; min-width: 0; }
.kai-strip__convname { font-family: var(--mx-font-display); font-weight: 700; font-size: 15.5px; letter-spacing: .3px; color: var(--app-fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; }
.kai-strip__convsub { font-family: var(--mx-font-mono); font-size: 10px; color: var(--app-fg-4); margin-top: 1px; }
.kai-strip__export { display: flex; align-items: center; gap: 7px; }
.kai-strip__export-lbl { font-family: var(--mx-font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--app-fg-4); }
@media (max-width: 1100px) { .kai-strip__export-lbl { display: none; } }

.kai-hub { gap: 0; overflow: hidden; background: var(--app-surface-2); border: 1px solid var(--app-border-soft); border-radius: 12px; }
.kai-hub__head { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-bottom: 1px solid var(--app-tint-2); flex: 0 0 auto; }
.kai-hub__face { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; }
.kai-hub__face img { display: block; }
.kai-hub__ttl { font-family: var(--mx-font-display); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; font-size: 17px; }
.kai-hub__collapse { margin-left: auto; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--app-border); background: var(--app-surface); color: var(--app-fg-3); cursor: pointer; }
.kai-hub__collapse:hover { color: var(--app-fg-1); }
/* No frame scroll: only the conversations list scrolls internally if there are
   many; the New button, Motor and Playbook stay fixed. */
.kai-hub__scroll { flex: 1; overflow: hidden; padding: 12px; min-height: 0; display: flex; flex-direction: column; }
.kai-hub__convs::-webkit-scrollbar { width: 5px; }
.kai-hub__convs::-webkit-scrollbar-thumb { background: var(--app-tint-3); border-radius: 999px; }
.kai-hub__new { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--mx-orange); color: #1a120a; font-weight: 700; font-size: 13.5px; border: 0; border-radius: 10px; padding: 11px; cursor: pointer; box-shadow: 0 4px 14px rgba(244,121,32,.22); }
.kai-hub__new:hover:not(:disabled) { background: var(--mx-orange-hover); }
.kai-hub__new:disabled { opacity: .55; cursor: not-allowed; }
.kai-hub__label { font-family: var(--mx-font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--app-fg-4); font-weight: 600; margin: 18px 2px 8px; display: flex; align-items: center; gap: 8px; }
.kai-hub__label::after { content: ""; flex: 1; height: 1px; background: var(--app-tint-2); }
.kai-hub__count { background: var(--app-surface); border-radius: 999px; padding: 1px 7px; color: var(--app-fg-3); font-size: 9px; }
.kai-hub__empty { font-size: 11.5px; color: var(--app-fg-4); padding: 4px 2px; line-height: 1.4; flex: 1 1 auto; }
.kai-hub__convs { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.kai-conv { display: flex; align-items: flex-start; gap: 9px; padding: 9px 10px; border-radius: 9px; cursor: pointer; border: 1px solid transparent; }
.kai-conv:hover { background: var(--app-surface); }
.kai-conv:hover .kai-conv__del { opacity: 1; }
.kai-conv.is-active { background: rgba(244,121,32,.08); border-color: rgba(244,121,32,.25); }
.kai-conv__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--app-fg-4); margin-top: 5px; flex: 0 0 auto; }
.kai-conv.is-active .kai-conv__dot { background: var(--mx-orange); }
.kai-conv__body { min-width: 0; flex: 1; }
.kai-conv__t { font-size: 12.5px; font-weight: 600; color: var(--app-fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kai-conv.is-active .kai-conv__t { color: #fff; }
.kai-conv__d { font-family: var(--mx-font-mono); font-size: 10px; color: var(--app-fg-4); margin-top: 2px; }
.kai-conv__del { opacity: 0; border: 0; background: none; color: var(--app-fg-4); cursor: pointer; font-size: 12px; padding: 2px; flex: 0 0 auto; transition: .12s; }
.kai-conv__del:hover { color: #f87171; }
.kai-hub__motor { display: flex; flex-wrap: wrap; gap: 6px; }
.kai-motor-pill { flex: 1 1 calc(50% - 3px); display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 6px; border-radius: 8px; border: 1px solid var(--app-border); background: var(--app-surface); color: var(--app-fg-2); cursor: pointer; }
.kai-motor-pill:hover:not(:disabled) { color: var(--app-fg-1); border-color: var(--app-fg-4); }
.kai-motor-pill.is-active { border-color: var(--mx-orange); background: rgba(244,121,32,.10); color: #fff; }
.kai-motor-pill:disabled { opacity: .6; cursor: not-allowed; }
.kai-motor-pill__name { font-size: 12px; font-weight: 600; }
.kai-motor-pill__tag { font-size: 9px; color: var(--app-fg-4); }
.kai-motor-pill.is-active .kai-motor-pill__tag { color: rgba(255,255,255,.6); }
.kai-hub__motorwrap { flex: 0 0 auto; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--app-tint-2); }
.kai-hub__motorwrap .kai-hub__label:first-child { margin-top: 0; }
.kai-hub__status { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--app-tint-2); }
.kai-hub__playbook { width: 100%; display: flex; align-items: center; gap: 9px; justify-content: center; background: var(--app-surface); border: 1px solid var(--app-border); color: var(--app-fg-2); border-radius: 9px; padding: 10px 12px; cursor: pointer; font-size: 12.5px; font-weight: 600; margin-top: 16px; }
.kai-hub__playbook:hover { border-color: var(--app-fg-4); color: var(--app-fg-1); }

.kai-side-card {
  background: linear-gradient(180deg, var(--app-tint-1), var(--app-tint-1));
  border: 1px solid var(--app-tint-2);
  border-radius: 12px;
  padding: 14px;
}
.kai-side-card__head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--app-tint-2);
}
.kai-side-card__icon {
  width: 26px; height: 26px;
  border-radius: 7px;
  display: grid;
  place-items: center;
}
.kai-side-card__title {
  font-family: var(--mx-font-display);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--app-fg-1);
}

.kai-cap-list { display: flex; flex-direction: column; gap: 9px; }
.kai-cap {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  color: var(--app-fg-1);
}
.kai-cap svg { color: rgba(244,121,32,.85); flex-shrink: 0; margin-top: 2px; }
.kai-cap__label { font-size: 11.5px; font-weight: 700; color: var(--app-fg-1); }
.kai-cap__meta { font-size: 10px; color: var(--app-fg-3); margin-top: 1px; line-height: 1.35; }

.kai-status { display: flex; flex-direction: column; gap: 8px; }
.kai-status__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.kai-status__label {
  font-family: var(--mx-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--app-fg-3);
}
.kai-status__value {
  font-family: var(--mx-font-mono);
  font-size: 10.5px;
  color: var(--app-fg-1);
  font-weight: 600;
  text-align: right;
}

.kai-models { display: flex; flex-direction: column; gap: 4px; }
.kai-model-row {
  padding: 8px 10px;
  background: var(--app-tint-1);
  border: 1px solid var(--app-tint-2);
  border-radius: 7px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  align-items: baseline;
}
.kai-model-row.is-active {
  background: rgba(244,121,32,.08);
  border-color: rgba(244,121,32,.3);
}
.kai-model-row__name { font-size: 11px; font-weight: 700; color: var(--app-fg-1); }
.kai-model-row__tag { font-size: 10px; color: var(--app-fg-3); }
.kai-model-row__cost {
  grid-column: 1 / -1;
  font-family: var(--mx-font-mono);
  font-size: 10px;
  color: var(--app-fg-4);
  margin-top: 2px;
}
.kai-model-row.is-active .kai-model-row__cost { color: rgba(244,121,32,.8); }


/* ────────────────────────────────────────────────────────────────
   KAI floating button + side panel (global, persists across views)
   ──────────────────────────────────────────────────────────────── */

/* Floating action button — dark obsidian with the orange sparkle as the hero */
/* Floating KAI launcher — fox PNG floats on its own, no dark disc or
   orange ring. Soft drop-shadows give it depth and a faint orange glow. */
.kai-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 200;
  width: 72px;
  height: 72px;
  border-radius: 0;
  background: transparent;
  border: none;
  color: var(--mx-orange);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  box-shadow: none;
  transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.kai-fab .kai-avatar {
  width: 100%;
  height: 100%;
  filter:
    drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 16px rgba(244, 121, 32, 0.30));
  transition: filter .25s ease;
}
.kai-fab:hover {
  transform: translateY(-3px) scale(1.06);
}
.kai-fab:hover .kai-avatar {
  filter:
    drop-shadow(0 14px 22px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 26px rgba(244, 121, 32, 0.55));
}
.kai-fab:active { transform: scale(0.96); }
.kai-fab.kai-fab--open {
  background: rgba(20, 24, 36, 0.85);
  border: 1px solid var(--app-tint-4);
  border-radius: 50%;
  color: var(--app-fg-1);
  width: 56px;
  height: 56px;
}
/* Sparkle icon: orange glow + slow rotation breathe */
.kai-fab svg {
  filter: drop-shadow(0 0 8px rgba(244, 121, 32, 0.45)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
  animation: kaiSparkleBreathe 3.6s cubic-bezier(.4, 0, .2, 1) infinite;
  transform-origin: center;
}
.kai-fab:hover svg {
  animation: none;
  transform: scale(1.08) rotate(20deg);
  transition: transform .25s cubic-bezier(.22, 1.2, .36, 1);
  filter: drop-shadow(0 0 14px rgba(244, 121, 32, 0.7)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
}
.kai-fab.kai-fab--open svg { animation: none; filter: none; }
@keyframes kaiSparkleBreathe {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50%      { transform: scale(1.06) rotate(8deg); opacity: 0.9; }
}
/* Pulsing ring that radiates outward (orange echo) */
.kai-fab__pulse {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1px dashed rgba(244, 121, 32, 0.30);
  pointer-events: none;
  inset: 6px;
  animation: kaiFabPulse 6s linear infinite;
}
@keyframes kaiFabPulse {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* The chat panel that slides up from the corner */
.kai-panel {
  position: fixed;
  right: 24px;
  bottom: 104px;
  z-index: 199;
  width: 460px;
  max-width: calc(100vw - 48px);
  height: min(680px, calc(100vh - 140px));
  background: linear-gradient(180deg, #131d2c 0%, #0B121C 100%);
  border: 1px solid rgba(244, 121, 32, 0.22);
  border-radius: 18px;
  box-shadow:
    0 40px 80px -20px rgba(0, 0, 0, 0.65),
    0 12px 24px -6px rgba(0, 0, 0, 0.5),
    0 0 0 1px var(--app-tint-1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: kaiPanelIn .26s cubic-bezier(.22, 1.1, .36, 1);
  transform-origin: bottom right;
}
@keyframes kaiPanelIn {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.kai-panel__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--app-tint-3);
  background: linear-gradient(180deg, rgba(244, 121, 32, 0.06), transparent);
}
.kai-panel__brand { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.kai-panel__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #1E2C40, #0E1825);
  border: 1.5px solid rgba(244, 121, 32, 0.5);
  display: grid; place-items: center;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(244, 121, 32, 0.3);
  flex-shrink: 0;
}
.kai-panel__title {
  font-family: var(--mx-font-display);
  font-size: 16px;
  font-weight: 800;
  color: var(--app-fg-1);
  letter-spacing: 0.4px;
  line-height: 1.1;
}
.kai-panel__sub {
  font-size: 10.5px;
  color: var(--app-fg-3);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: var(--mx-font-display);
  font-weight: 700;
  margin-top: 3px;
}
.kai-panel__actions { display: flex; align-items: center; gap: 6px; }
.kai-panel__model {
  background: var(--app-tint-2);
  border: 1px solid var(--app-tint-4);
  color: var(--app-fg-1);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 8px;
  border-radius: 6px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
}
.kai-panel__model:hover { background: var(--app-tint-4); }
.kai-panel__iconbtn {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--app-tint-4);
  border-radius: 6px;
  color: var(--app-fg-2);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.kai-panel__iconbtn:hover { background: var(--app-tint-3); color: var(--app-fg-1); }

.kai-panel__stream {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px 6px;
}

.kai-panel__error {
  padding: 8px 14px;
  background: rgba(220, 38, 38, 0.08);
  border-top: 1px solid rgba(220, 38, 38, 0.25);
  color: hsl(0 72% 72%);
  font-size: 11.5px;
}

.kai-panel__input {
  padding: 10px 12px 12px;
  border-top: 1px solid var(--app-tint-3);
  display: flex;
  gap: 8px;
  align-items: flex-end;
  background: var(--app-tint-1);
}
.kai-panel__input textarea {
  flex: 1;
  background: var(--app-tint-2);
  border: 1px solid var(--app-tint-4);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--app-fg-1);
  font-size: 13px;
  font-family: inherit;
  resize: none;
  outline: none;
  line-height: 1.45;
  transition: border-color .15s, background .15s;
}
.kai-panel__input textarea:focus {
  border-color: rgba(244, 121, 32, 0.5);
  background: var(--app-tint-3);
}
.kai-panel__send {
  width: 42px; height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, #F47920, #C4541A);
  color: #fff;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px rgba(244, 121, 32, 0.35);
  transition: transform .15s, opacity .15s;
}
.kai-panel__send:hover:not(:disabled) { transform: translateY(-1px); }
.kai-panel__send:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }

/* ── KAI file attachments (clip + staged chips) ────────────── */
.kai-panel__input { flex-direction: column; align-items: stretch; }
.kai-panel__inputrow { display: flex; gap: 8px; align-items: flex-end; }
.kai-atts { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 8px; }
.kai-att {
  display: inline-flex; align-items: center; gap: 5px; max-width: 200px;
  padding: 4px 6px 4px 8px; border-radius: 8px; font-size: 11px;
  background: var(--app-tint-3); border: 1px solid var(--app-tint-4); color: var(--app-fg-2);
}
.kai-att--error { border-color: rgba(239,68,68,.5); color: #ef4444; }
.kai-att--loading { opacity: .7; }
.kai-att__ic { flex-shrink: 0; }
.kai-att__nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kai-att__x { background: none; border: 0; color: inherit; cursor: pointer; opacity: .55; font-size: 11px; padding: 0 1px; line-height: 1; }
.kai-att__x:hover { opacity: 1; }
.kai-msg__atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.kai-clip {
  flex-shrink: 0; width: 34px; height: 34px; display: grid; place-items: center;
  background: transparent; border: 0; border-radius: 8px; color: var(--app-fg-3); cursor: pointer;
  align-self: flex-end; transition: color .15s, background .15s;
}
.kai-clip:hover:not(:disabled) { color: var(--app-fg-1); background: var(--app-tint-3); }
.kai-clip:disabled { opacity: .4; cursor: not-allowed; }

/* ── Messages inside the floating panel ────────────────────── */
.kai-msg {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  align-items: flex-start;
}
.kai-msg--you { flex-direction: row-reverse; }
.kai-msg__av {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #1E2C40, #0E1825);
  border: 1px solid rgba(244,121,32,.4);
  color: var(--app-fg-1);
  display: grid; place-items: center;
  overflow: hidden;
  font-family: var(--mx-font-display);
  font-weight: 800;
  font-size: 11px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(244, 121, 32, 0.3);
}
.kai-msg__body {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--app-fg-1);
  letter-spacing: 0.003em;
  max-width: 100%;
  min-width: 0;
}
.kai-msg--you .kai-msg__body {
  background: rgba(244, 121, 32, 0.10);
  border: 1px solid rgba(244, 121, 32, 0.20);
  padding: 10px 14px;
  border-radius: 12px 12px 4px 12px;
  color: var(--app-fg-1);
  max-width: 80%;
}
.kai-msg--ai .kai-msg__body {
  /* Option 1 "terminal / data-dense" card: subtle panel + orange left accent. */
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-left: 3px solid var(--mx-orange);
  padding: 13px 16px;
  border-radius: 8px;
  flex: 1;
}
.kai-msg__meta {
  margin-top: 10px;
  font-size: 11px;
  color: var(--app-fg-4);
  font-family: inherit;
  letter-spacing: 0.4px;
  text-transform: none;
  font-weight: 500;
}

/* ── Markdown rendering for KAI — editorial, calm, breathable ─────── */
.kai-md > *:first-child { margin-top: 0 !important; }
.kai-md > *:last-child  { margin-bottom: 0 !important; }
.kai-md .kai-p {
  margin: 12px 0;
  line-height: 1.72;
  color: var(--app-fg-1);
}
.kai-md .kai-h1 {
  font-family: var(--mx-font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--app-fg-1);
  margin: 26px 0 12px;
  padding-bottom: 0;
  border-bottom: none;
}
.kai-md .kai-h1:first-child { margin-top: 0; }
.kai-md .kai-h2 {
  font-family: var(--mx-font-display);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-transform: none;
  color: rgba(244, 121, 32, 0.92);
  margin: 22px 0 8px;
}
.kai-md .kai-h2:first-child { margin-top: 0; }
.kai-md .kai-h3 {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--app-fg-1);
  margin: 18px 0 6px;
}
.kai-md .kai-h3:first-child { margin-top: 0; }
.kai-md .kai-list {
  margin: 10px 0;
  padding-left: 22px;
  color: var(--app-fg-1);
}
.kai-md .kai-list li {
  margin: 6px 0;
  line-height: 1.68;
  padding-left: 4px;
}
.kai-md .kai-list.ul li::marker {
  color: rgba(244, 121, 32, 0.55);
}
.kai-md .kai-list.ol li::marker {
  color: rgba(244, 121, 32, 0.65);
  font-family: inherit;
  font-weight: 600;
}
.kai-md .kai-quote {
  margin: 14px 0;
  padding: 2px 0 2px 16px;
  border-left: 2px solid rgba(244, 121, 32, 0.35);
  background: transparent;
  color: var(--app-fg-2);
  font-size: 14px;
  font-style: italic;
  border-radius: 0;
  line-height: 1.7;
}
.kai-md .kai-code {
  margin: 12px 0;
  padding: 12px 14px;
  background: var(--app-tint-1);
  border: 1px solid var(--app-tint-2);
  border-radius: 8px;
  overflow-x: auto;
  font-family: var(--mx-font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--app-fg-1);
}
.kai-md .kai-code code { color: inherit; }
.kai-md .kai-inline-code {
  font-family: var(--mx-font-mono);
  font-size: 12.5px;
  padding: 1px 7px;
  background: var(--app-tint-2);
  border: none;
  border-radius: 4px;
  color: rgba(251, 191, 133, 0.95);
}
.kai-md .kai-hr {
  border: 0;
  border-top: 1px solid var(--app-tint-3);
  margin: 20px 0;
}
.kai-md strong {
  color: var(--app-fg-1);
  font-weight: 600;
}
.kai-md em {
  color: var(--app-fg-2);
  font-style: italic;
}
.kai-md a {
  color: rgba(251, 191, 133, 0.95);
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 121, 32, 0.30);
}
.kai-md a:hover {
  color: #F47920;
  border-bottom-color: rgba(244, 121, 32, 0.60);
}

/* Responsive: collapse to full width on small screens */
@media (max-width: 540px) {
  .kai-panel {
    right: 12px; left: 12px;
    width: auto;
    max-width: none;
    bottom: 88px;
    height: min(620px, calc(100vh - 120px));
  }
  .kai-fab { right: 18px; bottom: 18px; width: 58px; height: 58px; font-size: 15px; }
}

/* Empty / placeholder */
.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 24px;
  border: 1.5px dashed var(--app-tint-4);
  border-radius: 10px;
  text-align: center;
  gap: 8px;
}
.empty .ic {
  width: 48px; height: 48px; border-radius: 12px;
  background: rgba(244,121,32,.12); color: var(--mx-orange);
  display: grid; place-items: center;
  margin-bottom: 4px;
}
.empty h4 { font-family: var(--mx-font-display); font-size: 15px; text-transform: uppercase; color: var(--app-fg-1); }
.empty p { font-size: 12.5px; color: var(--app-fg-3); max-width: 360px; }

/* Status pill */
.status-pill {
  display: inline-flex; gap: 6px; align-items: center;
  font-size: 10.5px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .8px;
  font-family: var(--mx-font-display);
}
.status-pill .dot { width: 6px; height: 6px; border-radius: 50%; }
.status-pill.draft { background: var(--app-tint-3); color: var(--app-fg-2); }
.status-pill.draft .dot { background: var(--app-fg-3); }
.status-pill.approved { background: rgba(59,130,246,.16); color: #60A5FA; }
.status-pill.approved .dot { background: #60A5FA; }
.status-pill.sent { background: rgba(37,211,102,.16); color: hsl(142 71% 60%); }
.status-pill.sent .dot { background: hsl(142 71% 60%); }
.status-pill.pending { background: rgba(244,121,32,.14); color: var(--mx-orange); }
.status-pill.pending .dot { background: var(--mx-orange); }

/* ── Readability minimums (screen-share friendly) ─────────────────
   Globally bumps the smallest fonts so nothing is unreadable when
   sharing on Google Meet / Zoom. Applies via the .app root selector
   to keep specificity high without using !important. */
.app .meta              { font-size: 12px; }
.app .role              { font-size: 11px; letter-spacing: 0.8px; }
.app .sub               { font-size: 12px; }
.app .tag               { font-size: 11px; }
.app .name              { font-size: 13px; }
.app .badge             { font-size: 11px; }
.app .user-card .role   { font-size: 11px; }
.app .user-card .name   { font-size: 13px; }
.app .kpi .prev         { font-size: 11.5px; }
.app .nav-section       { font-size: 10.5px; }
.app th                 { font-size: 11.5px; letter-spacing: 1.1px; }
.app .pct, .app .num    { font-size: 12.5px; }
.app .sku-id-tag        { font-size: 10.5px; padding: 2px 7px; }
.app .sku-id-code       { font-size: 12px; }
.app .sku-id-meta       { font-size: 11px; padding: 2px 8px; }
.app .mflag             { font-size: 11px; padding: 2px 8px; }
.app .dates-label       { font-size: 10.5px; }
.app .dates-range       { font-size: 12px; }
.app .dates-days        { font-size: 11px; }
.app .dates-period      { font-size: 13px; }
.app .reports-tab__count,
.app .reports-status-chip__count,
.app .task-presenter__count-label,
.app .task-presenter__me-tag,
.app .task-row__statebadge,
.app .task-row__due,
.app .task-row__avatar,
.app .task-group-badge,
.app .task-person-pill__count,
.app .task-kpi__label,
.app .kpi-section-label,
.app .kpi-toggle__hint        { font-size: 11px; }
.app .kpi-toggle__label,
.app .task-row__title         { font-size: 15.5px; }
.app .sync-pill__primary,
.app .sync-pill__secondary,
.app .sync-block__label,
.app .sync-block__sub         { font-size: 12px; }

/* Brand-name labels in the leaderboard (was 10.5px subtitle) */
.app .brand-meta              { font-size: 11.5px; }

/* In presentation mode bump everything one more step — extra safety
   for cases where audience screens are small or low-res. */
.app.is-presenting .meta,
.app.is-presenting .role,
.app.is-presenting .sub,
.app.is-presenting .tag       { font-size: 13px; }

/* KAI tool-use chip (inline message showing "🔧 KAI consultando…") */
.kai-toolchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 4px 44px;
  padding: 6px 12px;
  font-family: var(--mx-font-mono);
  font-size: 11.5px;
  border-radius: 999px;
  background: rgba(168, 85, 247, .08);
  border: 1px solid rgba(168, 85, 247, .25);
  color: rgba(196, 164, 248, 0.95);
  align-self: flex-start;
  max-width: fit-content;
  animation: kai-toolchip-in 0.18s ease-out;
}
@keyframes kai-toolchip-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}
.kai-toolchip.is-running { background: rgba(244,121,32,.08); border-color: rgba(244,121,32,.30); color: #fbbf85; }
.kai-toolchip.is-done    { background: rgba(34,197,94,.08);  border-color: rgba(34,197,94,.30);  color: #86efac; }
.kai-toolchip.is-error   { background: rgba(239,68,68,.08);  border-color: rgba(239,68,68,.30);  color: #fca5a5; }
.kai-toolchip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kai-toolchip__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 560px;
}
.kai-toolchip__spinner {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid rgba(244,121,32,.30);
  border-top-color: #F47920;
  animation: kai-toolchip-rot 0.7s linear infinite;
}
@keyframes kai-toolchip-rot { to { transform: rotate(360deg); } }

/* ── KAI confirmation card (Phase 4 — write actions) ──────────── */
.kai-confirm {
  align-self: flex-start;
  margin: 6px 0 6px 44px;
  max-width: 420px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(244,121,32,.06);
  border: 1px solid rgba(244,121,32,.28);
}
.kai-confirm.is-done      { background: rgba(34,197,94,.06);  border-color: rgba(34,197,94,.30); }
.kai-confirm.is-cancelled { background: rgba(148,163,184,.06); border-color: rgba(148,163,184,.25); opacity: .8; }
.kai-confirm.is-error     { background: rgba(239,68,68,.06);  border-color: rgba(239,68,68,.30); }
.kai-confirm__head {
  font-weight: 700;
  font-size: 13px;
  color: #fbbf85;
  margin-bottom: 10px;
}
.kai-confirm__rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.kai-confirm__row { display: flex; gap: 10px; font-size: 12.5px; }
.kai-confirm__k { flex: 0 0 88px; color: var(--mx-text-dim, #9CA3AF); text-transform: uppercase; letter-spacing: .4px; font-size: 10.5px; padding-top: 1px; }
.kai-confirm__v { flex: 1; color: var(--mx-text, #e5e7eb); font-weight: 500; }
.kai-confirm__actions { display: flex; gap: 8px; }
.kai-confirm__btn {
  flex: 1;
  padding: 8px 14px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: filter .12s ease;
}
.kai-confirm__btn:hover { filter: brightness(1.1); }
.kai-confirm__btn--ok { background: #F47920; color: #fff; }
.kai-confirm__btn--no { background: transparent; border-color: rgba(148,163,184,.35); color: var(--mx-text-dim, #9CA3AF); }
.kai-confirm__result { font-size: 12.5px; font-weight: 600; }
.kai-confirm__result.is-done      { color: #86efac; }
.kai-confirm__result.is-cancelled { color: #9CA3AF; }
.kai-confirm__result.is-error     { color: #fca5a5; }

/* ── KAI markdown tables (Phase 5) ────────────────────────────── */
/* ── Option 1 "terminal / data-dense" tables ──────────────────────
   Monospaced tabular numbers, uppercase mono headers, tight rows; the
   first column reads as a label (sans, emphasized). Numeric columns are
   right-aligned inline by the renderer. Kept in sync with the export doc
   style in data.js (_kaiDocStyle). */
.kai-table-wrap { overflow-x: auto; margin: 12px 0 4px; }
.kai-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
}
.kai-table th, .kai-table td {
  padding: 6px 11px;
}
.kai-table th {
  font-family: var(--mx-font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .8px;
  font-weight: 500;
  color: var(--app-fg-4);
  border-bottom: 1px solid var(--app-tint-6);
  white-space: nowrap;
}
.kai-table td {
  font-family: var(--mx-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--app-fg-2);
  border-bottom: 1px solid var(--app-tint-2);
}
/* first column = the label (SKU/campaña/etc.): readable sans, emphasized */
.kai-table th:first-child { font-family: var(--mx-font-display); letter-spacing: 1px; }
.kai-table td:first-child { font-family: var(--mx-font-sans); color: var(--app-fg-1); font-weight: 600; }
.kai-table tbody tr:last-child td { border-bottom: none; }
.kai-table tbody tr:hover td { background: rgba(255,255,255,.025); }
/* signed-delta coloring (▲/+ green, ▼/− red) — set by the renderers */
.kai-table td.kai-cell-pos { color: #34d399; }
.kai-table td.kai-cell-neg { color: #f87171; }

/* ── KAI message export actions (Phase 5) ─────────────────────── */
.kai-msg__export { display: flex; gap: 6px; margin-top: 8px; }
.kai-msg__export button {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  font-size: 10.5px; font-weight: 600;
  border-radius: 7px;
  border: 1px solid rgba(148,163,184,.25);
  background: transparent;
  color: var(--mx-text-dim, #9CA3AF);
  cursor: pointer;
  transition: filter .12s ease, color .12s ease;
}
.kai-msg__export button:hover { color: #fbbf85; border-color: rgba(244,121,32,.35); }
.kai-msg__export button:disabled { opacity: .5; cursor: default; }

/* ── Resumen de los lunes (Phase 6) ───────────────────────────── */
.digest-view { padding: 28px 32px; max-width: 1100px; margin: 0 auto; }
.digest-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.digest-title { font-size: 24px; font-weight: 800; margin: 0; color: var(--mx-text, #e5e7eb); }
.digest-sub { font-size: 13px; color: var(--mx-text-dim, #9CA3AF); margin-top: 2px; }
.digest-head__actions { display: flex; gap: 8px; }
.digest-btn { padding: 9px 18px; border-radius: 9px; border: none; background: #F47920; color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; }
.digest-btn:disabled { opacity: .6; cursor: default; }
.digest-btn-ghost { padding: 9px 14px; border-radius: 9px; border: 1px solid rgba(148,163,184,.3); background: transparent; color: var(--mx-text-dim, #9CA3AF); font-weight: 600; font-size: 13px; cursor: pointer; }
.digest-scope { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; padding: 14px 16px; border-radius: 12px; background: rgba(148,163,184,.05); border: 1px solid rgba(148,163,184,.12); }
.digest-scope__row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.digest-scope__label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--mx-text-dim, #9CA3AF); width: 92px; flex-shrink: 0; }
.digest-pill { padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(148,163,184,.25); background: transparent; color: var(--mx-text-dim, #9CA3AF); font-size: 12px; font-weight: 600; cursor: pointer; }
.digest-pill.is-active { background: rgba(244,121,32,.14); border-color: rgba(244,121,32,.4); color: #fbbf85; }
.digest-empty { font-size: 12px; color: var(--mx-text-dim, #9CA3AF); }
.digest-progress { padding: 12px 16px; border-radius: 10px; background: rgba(244,121,32,.08); border: 1px solid rgba(244,121,32,.25); color: #fbbf85; font-size: 13px; margin-bottom: 14px; }
.digest-error { padding: 10px 14px; border-radius: 9px; background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.3); color: #fca5a5; font-size: 12.5px; margin: 8px 0; }
.digest-placeholder { padding: 40px 24px; text-align: center; color: var(--mx-text-dim, #9CA3AF); font-size: 13.5px; border: 1px dashed rgba(148,163,184,.25); border-radius: 12px; }
.digest-cards { display: flex; flex-direction: column; gap: 16px; }
.digest-card { padding: 18px 20px; border-radius: 14px; background: var(--app-tint-1, rgba(148,163,184,.05)); border: 1px solid rgba(148,163,184,.14); }
.digest-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.digest-card__brand { font-size: 16px; font-weight: 800; color: var(--mx-text, #e5e7eb); }
.digest-card__delta { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.digest-card__delta.up { color: #86efac; background: rgba(34,197,94,.12); }
.digest-card__delta.down { color: #fca5a5; background: rgba(239,68,68,.12); }
.digest-card__headline { font-size: 13.5px; font-weight: 600; color: #fbbf85; margin-bottom: 12px; }
.digest-kpis { display: flex; flex-wrap: wrap; gap: 18px; padding: 12px 0; border-top: 1px solid rgba(148,163,184,.1); border-bottom: 1px solid rgba(148,163,184,.1); margin-bottom: 12px; }
.digest-kpis > div { display: flex; flex-direction: column; }
.digest-kpis span { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--mx-text-dim, #9CA3AF); }
.digest-kpis b { font-size: 16px; color: var(--mx-text, #e5e7eb); }
.digest-card__analysis { font-size: 13px; line-height: 1.55; color: var(--mx-text, #cbd5e1); margin: 0 0 10px; }
.digest-note { font-size: 12.5px; color: var(--mx-text-dim, #9CA3AF); margin: 4px 0; }
.digest-note b { color: var(--mx-text, #cbd5e1); }
.digest-rec { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(148,163,184,.08); }
.digest-rec__main { display: flex; gap: 10px; align-items: flex-start; }
.digest-rec__prio { font-size: 9.5px; font-weight: 800; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; flex-shrink: 0; margin-top: 2px; }
.digest-rec__prio.is-high { background: rgba(239,68,68,.16); color: #fca5a5; }
.digest-rec__prio.is-medium { background: rgba(244,121,32,.16); color: #fbbf85; }
.digest-rec__prio.is-low { background: rgba(148,163,184,.16); color: #cbd5e1; }
.digest-rec__title { font-size: 13px; font-weight: 600; color: var(--mx-text, #e5e7eb); }
.digest-rec__why { font-size: 11.5px; color: var(--mx-text-dim, #9CA3AF); margin-top: 1px; }
.digest-rec__btn { flex-shrink: 0; padding: 5px 12px; border-radius: 8px; border: 1px solid rgba(244,121,32,.35); background: transparent; color: #fbbf85; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.digest-rec__confirm { display: flex; gap: 6px; flex-shrink: 0; }
.digest-rec__ok { padding: 5px 12px; border-radius: 8px; border: none; background: #F47920; color: #fff; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.digest-rec__no { padding: 5px 12px; border-radius: 8px; border: 1px solid rgba(148,163,184,.3); background: transparent; color: var(--mx-text-dim, #9CA3AF); font-size: 11.5px; cursor: pointer; }
.digest-rec__done { font-size: 12px; font-weight: 600; color: #86efac; flex-shrink: 0; }
.digest-rec__muted { font-size: 12px; color: var(--mx-text-dim, #9CA3AF); flex-shrink: 0; }
.digest-rec__err { font-size: 11.5px; color: #fca5a5; flex-shrink: 0; }

/* ── KAI conversation history ─────────────────────────────────── */
.kai-hist-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 11px; border-radius: 8px;
  border: 1px solid rgba(148,163,184,.25); background: transparent;
  color: var(--mx-text-dim, #9CA3AF); font-size: 12px; font-weight: 600; cursor: pointer;
  white-space: nowrap;
}
.kai-hist-btn:hover { color: #fbbf85; border-color: rgba(244,121,32,.35); }
.kai-hist-btn.is-active { color: #fbbf85; border-color: rgba(244,121,32,.45); background: rgba(244,121,32,.10); }
.kai-hist-btn:disabled { opacity: .5; cursor: default; }
.kai-history {
  margin: 0 16px 12px; border-radius: 12px;
  background: var(--app-tint-1, rgba(15,23,42,.6));
  border: 1px solid rgba(148,163,184,.16);
  max-height: 340px; display: flex; flex-direction: column; overflow: hidden;
}
.kai-history__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px; border-bottom: 1px solid rgba(148,163,184,.12);
  font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--mx-text-dim, #9CA3AF);
}
.kai-history__close, .kai-history__del {
  background: transparent; border: none; color: var(--mx-text-dim, #9CA3AF); cursor: pointer; font-size: 12px; padding: 4px;
}
.kai-history__del:hover { color: #fca5a5; }
.kai-history__empty { padding: 22px 16px; text-align: center; font-size: 12.5px; color: var(--mx-text-dim, #9CA3AF); }
.kai-history__list { overflow-y: auto; }
.kai-history__item {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; cursor: pointer; border-bottom: 1px solid rgba(148,163,184,.06);
}
.kai-history__item:hover { background: rgba(148,163,184,.06); }
.kai-history__item.is-active { background: rgba(244,121,32,.08); }
.kai-history__item-body { flex: 1; min-width: 0; }
.kai-history__item-title { font-size: 13px; color: var(--mx-text, #e5e7eb); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kai-history__item-date { font-size: 10.5px; color: var(--mx-text-dim, #9CA3AF); margin-top: 1px; }
.kai-history__del { flex-shrink: 0; opacity: 0; }
.kai-history__item:hover .kai-history__del { opacity: 1; }

/* ── KAI live working indicator ───────────────────────────────── */
.kai-working {
  display: flex; align-items: center; gap: 12px;
  margin: 6px 16px 10px;
  padding: 12px 16px; border-radius: 14px;
  background: linear-gradient(90deg, rgba(244,121,32,.11), rgba(244,121,32,.03));
  border: 1px solid rgba(244,121,32,.22);
  animation: kai-working-in .25s ease;
}
@keyframes kai-working-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.kai-working__avatar { flex-shrink: 0; line-height: 0; filter: drop-shadow(0 0 8px rgba(244,121,32,.45)); animation: kai-working-bob 1.6s ease-in-out infinite; }
@keyframes kai-working-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.kai-working__body { flex: 1; min-width: 0; }
.kai-working__cancel {
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: var(--app-fg-2);
  font: 600 12px/1 var(--mx-font-display);
  padding: 8px 13px; border-radius: 9px; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.kai-working__cancel:hover { background: rgba(239,68,68,.16); border-color: rgba(239,68,68,.55); color: #fca5a5; }
.kai-working__row { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.kai-working__dotpulse { width: 8px; height: 8px; border-radius: 50%; background: #F47920; flex-shrink: 0; animation: kai-working-pulse 1.1s ease-in-out infinite; }
@keyframes kai-working-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(244,121,32,.5); opacity: 1; }
  50% { box-shadow: 0 0 0 6px rgba(244,121,32,0); opacity: .55; }
}
.kai-working__label {
  flex: 1; font-size: 13.5px; font-weight: 600;
  background: linear-gradient(90deg, #fbbf85 0%, #ffffff 50%, #fbbf85 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: kai-working-shimmer 2s linear infinite;
}
@keyframes kai-working-shimmer { to { background-position: -200% 0; } }
.kai-working__time { flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--mx-text-dim, #9CA3AF); font-variant-numeric: tabular-nums; }
.kai-working__bar { height: 3px; border-radius: 2px; overflow: hidden; background: rgba(244,121,32,.15); position: relative; }
.kai-working__bar span {
  position: absolute; top: 0; left: -40%; height: 100%; width: 40%; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #F47920, transparent);
  animation: kai-working-slide 1.3s ease-in-out infinite;
}
@keyframes kai-working-slide { 0% { left: -40%; } 100% { left: 100%; } }

/* ── Admin → Gasto IA (token usage panel) ─────────────────────── */
.usage-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.usage-card { padding: 14px 16px; border-radius: 12px; background: var(--app-tint-1, rgba(148,163,184,.05)); border: 1px solid rgba(148,163,184,.14); display: flex; flex-direction: column; gap: 3px; }
.usage-card__k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--app-fg-3, #9CA3AF); }
.usage-card__v { font-size: 22px; font-weight: 800; color: var(--app-fg-1, #e5e7eb); line-height: 1.1; }
.usage-card small { font-size: 11px; color: var(--app-fg-4, #6b7280); }
.usage-h { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--app-fg-3, #9CA3AF); margin: 20px 0 8px; }
.usage-table { width: 100%; }
.usage-table th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--app-fg-4, #9CA3AF); text-align: left; padding: 8px 12px; }
.usage-table td { font-size: 12.5px; padding: 8px 12px; border-top: 1px solid rgba(148,163,184,.08); font-variant-numeric: tabular-nums; }
.usage-table td:first-child { font-weight: 500; }
.usage-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(148,163,184,.12); font-size: 11px; color: var(--app-fg-4, #9CA3AF); flex-wrap: wrap; }
@media (max-width: 820px) { .usage-cards { grid-template-columns: repeat(2, 1fr); } }

/* ── Admin → Mantenimiento cards ────────────────────────────── */
.maintenance-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.maintenance-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--app-tint-1);
  border: 1px solid var(--app-tint-3);
  border-radius: 10px;
}
.maintenance-card--disabled {
  opacity: 0.5;
}
.maintenance-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.maintenance-card__body {
  flex: 1;
  min-width: 0;
}
.maintenance-card__title {
  font-family: var(--mx-font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--app-fg-1);
  letter-spacing: 0.2px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.maintenance-card__pill {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 1px 6px;
  background: rgba(244,121,32,.15);
  color: #fbbf85;
  border: 1px solid rgba(244,121,32,.30);
  border-radius: 4px;
}
.maintenance-card__desc {
  font-size: 12px;
  color: var(--app-fg-2);
  margin-top: 4px;
  line-height: 1.5;
}

/* ── Tasks KPI header — 5 clickable counters by status ─────── */
.task-kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 0 0 14px;
}
@media (max-width: 720px) {
  .task-kpis { grid-template-columns: repeat(2, 1fr); }
}
.task-kpi {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--app-tint-1);
  border: 1px solid var(--app-tint-3);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
}
.task-kpi:hover { background: var(--app-tint-2); }
.task-kpi.is-active {
  background: rgba(244,121,32,.10);
  border-color: rgba(244,121,32,.40);
}
.task-kpi__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 8px currentColor;
}
.task-kpi__body { min-width: 0; }
.task-kpi__value {
  font-family: var(--mx-font-mono);
  font-size: 18px;
  font-weight: 800;
  color: var(--app-fg-1);
  line-height: 1;
}
.task-kpi.is-active .task-kpi__value { color: #F47920; }
.task-kpi__label {
  font-size: 10.5px;
  color: var(--app-fg-3);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-family: var(--mx-font-display);
  font-weight: 700;
  margin-top: 3px;
}

/* Category badge on each task row */
.task-row__catbadge {
  font-family: var(--mx-font-display);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid transparent;
}

/* Status badge clickable variant (with hover hint) */
.task-row__statuswrap {
  position: relative;
  display: inline-block;
}
.task-row__statebadge--clickable {
  cursor: pointer;
}

/* ── Tasks toolbar: dropdowns + search ─────────────────────── */
.task-toolbar {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr)) minmax(160px, 1.3fr) auto;
  gap: 10px;
  align-items: end;
  margin: 12px 0 14px;
}
@media (max-width: 1280px) {
  .task-toolbar {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 1024px) {
  .task-toolbar {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 720px) {
  .task-toolbar {
    grid-template-columns: 1fr 1fr;
  }
}
.task-toolbar__group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.task-toolbar__group label {
  font-family: var(--mx-font-display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--app-fg-4);
}
.task-toolbar__select {
  background: var(--app-tint-2);
  border: 1px solid var(--app-tint-4);
  color: var(--app-fg-1);
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 12.5px;
  font-family: inherit;
  outline: none;
  width: 100%;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%23F47920' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
  padding-right: 28px;
}
.task-toolbar__select:focus {
  border-color: rgba(244,121,32,.55);
  background-color: rgba(244,121,32,.05);
}
.task-toolbar__searchwrap {
  position: relative;
  display: flex;
  align-items: center;
}
.task-toolbar__searchwrap svg {
  position: absolute;
  left: 10px;
  color: var(--app-fg-4);
  pointer-events: none;
}
.task-toolbar__search {
  background: var(--app-tint-2);
  border: 1px solid var(--app-tint-4);
  color: var(--app-fg-1);
  padding: 8px 10px 8px 30px;
  border-radius: 7px;
  font-size: 12.5px;
  font-family: inherit;
  outline: none;
  width: 100%;
}
.task-toolbar__search:focus {
  border-color: rgba(244,121,32,.55);
  background: rgba(244,121,32,.05);
}
.task-toolbar__clear {
  height: 34px;
}

/* Board head — caption above the flat list */
.task-board {
  margin-top: 6px;
}
.task-board__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 10px;
  font-size: 11px;
  font-family: var(--mx-font-display);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--app-fg-4);
}

/* Always-visible "Limpiar filtros" button */
.task-toolbar__clear {
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 7px;
  font-family: var(--mx-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity .12s, background .12s, border-color .12s;
}
.task-toolbar__clear.btn--primary-soft {
  background: rgba(244,121,32,.14);
  border: 1px solid rgba(244,121,32,.5);
  color: #F47920;
}
.task-toolbar__clear.btn--primary-soft:hover {
  background: rgba(244,121,32,.22);
  border-color: #F47920;
}
.task-toolbar__clear.is-disabled {
  background: var(--app-tint-1);
  border: 1px solid var(--app-tint-3);
  color: var(--app-fg-4);
  cursor: not-allowed;
  opacity: .5;
}

/* ── Call Summaries (Resúmenes de llamada) ── */
.callsum {
  margin-top: 8px;
}
.callsum__intro {
  padding: 24px 24px 20px;
  background: linear-gradient(135deg, rgba(244,121,32,.10), rgba(244,121,32,.02));
  border: 1px solid rgba(244,121,32,.15);
  border-radius: 12px;
  margin-bottom: 18px;
}
.callsum__intro-title {
  font-family: var(--mx-font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.5px;
  color: var(--app-fg-1);
  margin-bottom: 6px;
}
.callsum__intro-sub {
  font-size: 13px;
  color: var(--app-fg-2);
  line-height: 1.5;
  max-width: 720px;
}

.callsum__brandgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.callsum__brandcard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 16px;
  background: var(--app-tint-1);
  border: 1px solid var(--app-tint-4);
  border-radius: 12px;
  cursor: pointer;
  transition: transform .12s, border-color .12s, background .12s, box-shadow .12s;
  text-align: left;
  font-family: inherit;
  color: var(--app-fg-1);
}
.callsum__brandcard:hover {
  transform: translateY(-2px);
  border-color: rgba(244,121,32,.45);
  background: rgba(244,121,32,.05);
  box-shadow: 0 8px 24px rgba(244,121,32,.10);
}
.callsum__brandcard-swatch {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-family: var(--mx-font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .4px;
  color: #0A111A;
}
.callsum__brandcard-name {
  font-family: var(--mx-font-display);
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: .3px;
  color: var(--app-fg-1);
}
.callsum__brandcard-stats {
  display: flex;
  gap: 14px;
  margin-top: auto;
}
.callsum__brandcard-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.callsum__brandcard-stat-v {
  font-family: var(--mx-font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--app-fg-1);
  line-height: 1;
}
.callsum__brandcard-stat-l {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--app-fg-3);
  text-transform: uppercase;
}
.callsum__brandcard-stat--overdue .callsum__brandcard-stat-v { color: #ef4444; }
.callsum__brandcard-stat--overdue .callsum__brandcard-stat-l { color: #fca5a5; }

/* ── Brand summary header ── */
.callsum__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  background: var(--app-tint-1);
  border: 1px solid var(--app-tint-4);
  border-radius: 12px;
  margin-bottom: 12px;
}
.callsum__head-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.callsum__head-swatch {
  width: 48px; height: 48px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-family: var(--mx-font-display);
  font-size: 16px;
  font-weight: 800;
  color: #0A111A;
}
.callsum__head-name {
  font-family: var(--mx-font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.3px;
  color: var(--app-fg-1);
}
.callsum__head-sub {
  font-size: 11.5px;
  color: var(--app-fg-3);
  margin-top: 2px;
}
.callsum__head-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.callsum__period {
  display: inline-flex;
  background: var(--app-tint-2);
  border: 1px solid var(--app-tint-4);
  border-radius: 7px;
  overflow: hidden;
}
.callsum__period-btn {
  padding: 6px 14px;
  background: transparent;
  border: none;
  color: var(--app-fg-2);
  font-family: var(--mx-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  text-transform: uppercase;
  transition: background .12s, color .12s;
}
.callsum__period-btn:hover { color: var(--app-fg-1); background: var(--app-tint-2); }
.callsum__period-btn.is-active { background: #F47920; color: #0A111A; }

/* ── Stat strip ── */
.callsum__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.callsum__stat {
  padding: 12px 14px;
  background: var(--app-tint-1);
  border: 1px solid var(--app-tint-4);
  border-radius: 10px;
  border-left: 3px solid var(--app-tint-6);
}
.callsum__stat--done { border-left-color: #22c55e; }
.callsum__stat--brand { border-left-color: #a855f7; }
.callsum__stat--overdue { border-left-color: #ef4444; background: rgba(239,68,68,.05); }
.callsum__stat-v {
  font-family: var(--mx-font-display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.5px;
  color: var(--app-fg-1);
  line-height: 1;
}
.callsum__stat--overdue .callsum__stat-v { color: #ef4444; }
.callsum__stat-l {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.3px;
  color: var(--app-fg-3);
  text-transform: uppercase;
  margin-top: 5px;
}

/* ── Two-column layout ── */
.callsum__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.callsum__col {
  padding: 14px;
  background: var(--app-tint-1);
  border: 1px solid var(--app-tint-4);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.callsum__col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--app-tint-3);
  font-family: var(--mx-font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--app-fg-2);
  text-transform: uppercase;
}
.callsum__col-count {
  margin-left: auto;
  padding: 2px 9px;
  background: rgba(244,121,32,.15);
  color: #F47920;
  border-radius: 999px;
  font-size: 11px;
}
.callsum__empty {
  padding: 20px 12px;
  text-align: center;
  color: var(--app-fg-4);
  font-size: 12.5px;
  font-style: italic;
}
.callsum__subgroup {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.callsum__subgroup-head {
  font-family: var(--mx-font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--app-fg-4);
  text-transform: uppercase;
  padding: 4px 0 2px;
}
.callsum__subgroup-head--brand { color: #c4a4f8; }
.callsum__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Item card ── */
.callsum__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--app-tint-1);
  border: 1px solid var(--app-tint-3);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.callsum__item-pri {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
}
.callsum__item-body {
  flex: 1;
  min-width: 0;
  padding-left: 4px;
}
.callsum__item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--app-fg-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.callsum__item-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--app-fg-2);
}
.callsum__item-assignee {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
}
.callsum__item-av {
  display: inline-grid;
  place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F47920, #c14d10);
  color: #fff;
  font-family: var(--mx-font-display);
  font-size: 9px;
  font-weight: 800;
}
.callsum__item-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mx-font-display);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1px;
}
.callsum__item-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
}
.callsum__item-date {
  font-family: var(--mx-font-mono);
  font-size: 11px;
  color: var(--app-fg-3);
  white-space: nowrap;
  flex-shrink: 0;
}
.callsum__item-date--overdue { color: #ef4444; font-weight: 700; }
.callsum__item--done { background: rgba(34,197,94,.04); border-color: rgba(34,197,94,.15); }
.callsum__item--brand { background: rgba(168,85,247,.04); border-color: rgba(168,85,247,.15); }

/* ── DateField + MexusCalendar (used by every date input) ── */
.datefield {
  position: relative;
  display: inline-flex;
  width: 100%;
}
.datefield__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  width: 100%;
  background: var(--app-tint-2);
  border: 1px solid var(--app-tint-4);
  border-radius: 6px;
  color: var(--app-fg-1);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  text-align: left;
  transition: border-color .12s, background .12s;
}
.datefield__btn:hover {
  border-color: rgba(244,121,32,.45);
  background: rgba(244,121,32,.06);
}
.datefield__btn--empty { color: var(--app-fg-4); font-style: italic; }
.datefield__caret {
  margin-left: auto;
  color: rgba(244,121,32,.7);
  font-size: 11px;
}
.datefield__pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 200;
  animation: picker-in .16s ease-out;
}

.mxcal {
  background: rgba(20,18,24,0.98);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(244,121,32,.30);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.55);
  padding: 14px;
  width: 296px;
  font-family: var(--mx-font-display);
  color: var(--app-fg-1);
}
.mxcal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.mxcal__nav {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: var(--app-tint-2);
  border: 1px solid var(--app-tint-4);
  color: var(--app-fg-1);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.mxcal__nav:hover { background: rgba(244,121,32,.12); border-color: rgba(244,121,32,.4); }
.mxcal__monthlabel {
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: capitalize;
}
.mxcal__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--app-fg-4);
  margin-bottom: 6px;
}
.mxcal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.mxcal__cell {
  height: 32px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--app-fg-1);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .1s, border-color .1s;
  font-family: inherit;
}
.mxcal__cell:hover { background: rgba(244,121,32,.14); border-color: rgba(244,121,32,.3); }
.mxcal__cell.is-today { color: #F47920; border-color: rgba(244,121,32,.45); }
.mxcal__cell.is-selected {
  background: #F47920;
  color: #0A111A;
  font-weight: 800;
  border-color: #F47920;
}
.mxcal__cell.is-selected.is-today { box-shadow: 0 0 0 2px rgba(244,121,32,.4); }
.mxcal__cell--empty { cursor: default; background: transparent; border-color: transparent; }
.mxcal__cell--empty:hover { background: transparent; border-color: transparent; }

.mxcal__shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--app-tint-3);
}
.mxcal__shortcut {
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--app-tint-2);
  border: 1px solid var(--app-tint-4);
  color: var(--app-fg-1);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .5px;
  cursor: pointer;
  font-family: inherit;
}
.mxcal__shortcut:hover {
  background: rgba(244,121,32,.14);
  border-color: rgba(244,121,32,.45);
  color: #F47920;
}

.mxcal__foot {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--app-tint-3);
}
.mxcal__foot-btn {
  flex: 1;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--app-tint-2);
  border: 1px solid var(--app-tint-4);
  color: var(--app-fg-1);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  cursor: pointer;
  font-family: inherit;
}
.mxcal__foot-btn:hover { background: var(--app-tint-4); }
.mxcal__foot-btn--clear { color: #fca5a5; border-color: rgba(239,68,68,.25); }
.mxcal__foot-btn--clear:hover { background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.45); }
.mxcal__foot-btn--primary {
  background: #F47920;
  border-color: #F47920;
  color: #0A111A;
}
.mxcal__foot-btn--primary:hover { background: #fb8a3b; }

/* DueDateQuickPicker now wraps MexusCalendar — strip its old custom layout */
.duedate-quickpicker {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  width: auto !important;
}
.duedate-quickpicker__head {
  padding: 8px 12px;
  background: rgba(20,18,24,0.98);
  border: 1px solid rgba(244,121,32,.30);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  font-size: 11px;
  font-family: var(--mx-font-display);
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--app-fg-3);
}
.duedate-quickpicker .mxcal {
  border-radius: 0 0 12px 12px;
  border-top: none;
}

/* ── PendingTaskCard chips: clickable, missing, optional ── */
.pending-chip-wrap {
  position: relative;
  display: inline-flex;
}
.pending-chip--clickable {
  cursor: pointer;
  background: transparent;
  color: inherit;
  font-family: inherit;
}
.pending-chip--clickable:hover {
  background: rgba(244,121,32,.08);
  border-color: rgba(244,121,32,.35);
}
.pending-chip--optional {
  color: var(--app-fg-4);
  background: transparent;
  border: 1px dashed var(--app-tint-6);
  font-style: italic;
}

/* ─── PPC View: professional advertising dashboard ───────────────── */
.ppc-view { margin-top: 4px; }
.ppc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(91,111,232,.06), rgba(244,121,32,.04));
  border: 1px solid rgba(244,121,32,.15);
  border-radius: 12px;
  margin-bottom: 14px;
}
.ppc-head__brand { display: flex; align-items: center; gap: 14px; }
.ppc-head__name {
  font-family: var(--mx-font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.3px;
  color: var(--app-fg-1);
}
.ppc-head__sub { font-size: 11.5px; color: var(--app-fg-3); margin-top: 3px; }
.ppc-head__actions { display: flex; gap: 6px; }

.ppc-alerts {
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px;
}
.ppc-alert {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  border: 1px solid;
}
.ppc-alert--crit { background: rgba(239,68,68,.10);  border-color: rgba(239,68,68,.35);  color: #fca5a5; }
.ppc-alert--warn { background: rgba(244,121,32,.10); border-color: rgba(244,121,32,.35); color: #fcb47e; }
.ppc-alert--info { background: rgba(91,111,232,.10); border-color: rgba(91,111,232,.30); color: #9eabe8; }

.ppc-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.ppc-kpi {
  padding: 12px 14px;
  background: var(--app-tint-1);
  border: 1px solid var(--app-tint-4);
  border-radius: 10px;
}
.ppc-kpi__label {
  font-family: var(--mx-font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.3px;
  color: var(--app-fg-3);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ppc-kpi__value {
  font-family: var(--mx-font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.5px;
  color: var(--app-fg-1);
  line-height: 1;
}
.ppc-kpi__row { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.ppc-kpi__delta {
  font-family: var(--mx-font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .3px;
}
.ppc-kpi__delta.is-up   { color: #22c55e; }
.ppc-kpi__delta.is-down { color: #ef4444; }
.ppc-kpi__delta.is-flat { color: var(--app-fg-4); }
.ppc-kpi__hint { font-size: 10px; color: var(--app-fg-4); margin-left: auto; }

.ppc-daily, .ppc-weekly { margin-top: 16px; }
.ppc-daily__svg, .ppc-weekly__svg { width: 100%; height: 220px; display: block; }

.ppc-twocol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
@media (max-width: 900px) { .ppc-twocol { grid-template-columns: 1fr; } }

.ppc-channels__bar {
  display: flex;
  height: 24px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--app-tint-2);
  margin: 6px 0 12px;
}
.ppc-channels__seg { transition: opacity .12s; }
.ppc-channels__seg:hover { opacity: .85; }
.ppc-channels__rows { display: flex; flex-direction: column; gap: 6px; }
.ppc-channels__row {
  display: grid;
  grid-template-columns: 14px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--app-tint-2);
  font-size: 12px;
}
.ppc-channels__row:last-child { border-bottom: none; }
.ppc-channels__dot { width: 10px; height: 10px; border-radius: 50%; }
.ppc-channels__name { color: var(--app-fg-1); font-weight: 600; }
.ppc-channels__val  { color: var(--app-fg-1); font-family: var(--mx-font-mono); font-weight: 700; }
.ppc-channels__pct  { color: #F47920; font-family: var(--mx-font-display); font-weight: 800; min-width: 48px; text-align: right; }

.ppc-markets__tbl th,
.ppc-markets__tbl td { font-size: 11.5px; }

.ppc-ads-stub {
  margin-top: 18px;
  padding: 18px 20px;
  background: var(--app-tint-1);
  border: 1px dashed var(--app-tint-5);
  border-radius: 10px;
}
.ppc-ads-stub__head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
  font-family: var(--mx-font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: #F47920;
  text-transform: uppercase;
}
.ppc-ads-stub__badge {
  margin-left: auto;
  padding: 3px 9px;
  background: rgba(244,121,32,.15);
  border: 1px solid rgba(244,121,32,.4);
  border-radius: 4px;
  font-size: 9.5px;
  letter-spacing: 1.2px;
}
.ppc-ads-stub p {
  font-size: 12.5px;
  color: var(--app-fg-2);
  line-height: 1.5;
  margin: 0;
}

/* ── Bandeja IA: sub-mode toggle (Por revisar vs Historial) ── */
.bandeja-submode {
  display: flex;
  gap: 4px;
  margin: 14px 0 8px;
  padding: 4px;
  background: var(--app-tint-2);
  border: 1px solid var(--app-tint-4);
  border-radius: 10px;
  width: fit-content;
}
.bandeja-submode__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 7px;
  background: transparent;
  border: none;
  color: var(--app-fg-2);
  font-family: var(--mx-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.bandeja-submode__btn:hover { background: var(--app-tint-2); color: var(--app-fg-1); }
.bandeja-submode__btn.is-active {
  background: #F47920;
  color: #0A111A;
  box-shadow: 0 2px 6px rgba(244,121,32,.30);
}
.bandeja-submode__count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  padding: 0 6px;
  height: 18px;
  border-radius: 999px;
  background: var(--app-tint-6);
  color: inherit;
  font-size: 10.5px;
  font-weight: 800;
}
.bandeja-submode__btn.is-active .bandeja-submode__count { background: rgba(0,0,0,.20); }
.bandeja-submode__count--muted { background: var(--app-tint-3); }
.bandeja-submode__hint {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: none;
  opacity: .65;
  margin-left: 4px;
}

/* Discarded meeting styling */
.bandeja-group--discarded {
  opacity: .65;
  border-style: dashed !important;
}
.bandeja-group--discarded .bandeja-group__title { text-decoration: line-through; text-decoration-color: var(--app-fg-4); }
.bandeja-discarded-tag {
  display: inline-block;
  padding: 2px 7px;
  margin-right: 8px;
  background: rgba(239,68,68,.18);
  color: #ef4444;
  border: 1px solid rgba(239,68,68,.35);
  border-radius: 4px;
  font-family: var(--mx-font-display);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  vertical-align: 1px;
}

/* ── Global scan toast (Bandeja IA background scan) ── */
.scan-toast {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 9000;
  display: flex;
  align-items: stretch;
  gap: 12px;
  min-width: 320px;
  max-width: 440px;
  padding: 14px 16px;
  background: rgba(20,18,24,.97);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(244,121,32,.45);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
  animation: scantoast-in .25s ease-out;
}
@keyframes scantoast-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.scan-toast--success { border-color: rgba(34,197,94,.5); }
.scan-toast--error   { border-color: rgba(239,68,68,.5); }
.scan-toast__icon {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(244,121,32,.18);
  color: #F47920;
  flex-shrink: 0;
}
.scan-toast--success .scan-toast__icon { background: rgba(34,197,94,.18); color: #22c55e; }
.scan-toast--error   .scan-toast__icon { background: rgba(239,68,68,.18); color: #ef4444; }
.scan-toast__spinner {
  width: 18px; height: 18px;
  border: 2.5px solid rgba(244,121,32,.25);
  border-top-color: #F47920;
  border-radius: 50%;
  animation: scantoast-spin .8s linear infinite;
}
@keyframes scantoast-spin {
  to { transform: rotate(360deg); }
}
.scan-toast__body {
  flex: 1;
  min-width: 0;
}
.scan-toast__title {
  font-family: var(--mx-font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--app-fg-1);
  margin-bottom: 4px;
}
.scan-toast__elapsed {
  color: rgba(244,121,32,.9);
  font-family: var(--mx-font-mono);
  font-weight: 700;
  font-size: 11px;
}
.scan-toast__status {
  font-size: 12px;
  color: var(--app-fg-2);
  line-height: 1.35;
}
.scan-toast__bar {
  margin-top: 8px;
  height: 4px;
  background: var(--app-tint-4);
  border-radius: 2px;
  overflow: hidden;
}
.scan-toast__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #F47920, #fbbf24);
  border-radius: 2px;
  transition: width .4s ease;
}
.scan-toast__actions {
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
}
.scan-toast__btn {
  padding: 5px 12px;
  background: #F47920;
  color: #0A111A;
  border: none;
  border-radius: 6px;
  font-family: var(--mx-font-display);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  cursor: pointer;
}
.scan-toast__btn:hover { background: #fb8a3b; }
.scan-toast__btn--ghost {
  background: transparent;
  border: 1px solid var(--app-tint-6);
  color: var(--app-fg-2);
}
.scan-toast__btn--ghost:hover { background: var(--app-tint-3); color: var(--app-fg-1); }

/* ── Pending edit modal — required block ── */
.pending-req-block {
  margin-top: 14px;
  padding: 14px;
  background: rgba(244,121,32,.04);
  border: 1px solid rgba(244,121,32,.25);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(244,121,32,.05);
}
.pending-req-block__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.pending-req-block__badge {
  font-family: var(--mx-font-display);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1.4px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(244,121,32,.20);
  color: #F47920;
  border: 1px solid rgba(244,121,32,.4);
}

/* ── Fused task-board top bar: status counters + sort headers ── */
.task-board__topbar {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin-bottom: 10px;
  background: linear-gradient(180deg, rgba(244,121,32,.04), var(--app-tint-1));
  border: 1px solid var(--app-tint-4);
  border-radius: 12px;
  overflow: hidden;
}

/* Row 1: counter chips — flex-wrap with equal-stretch via flex-grow */
.task-board__kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
  background: var(--app-tint-1);
  border-bottom: 1px solid var(--app-tint-3);
}
.tboard-kpi {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  flex: 1 1 0;             /* equal-stretch across the row */
  min-width: 170px;
  background: var(--app-tint-2);
  border: 1px solid var(--app-tint-4);
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--mx-font-display);
  color: var(--app-fg-1);
  transition: background .12s, border-color .12s, transform .08s;
  text-align: left;
}
.tboard-kpi:hover { background: var(--app-tint-3); border-color: rgba(244,121,32,.30); }
.tboard-kpi:active { transform: translateY(1px); }
.tboard-kpi.is-active {
  background: rgba(244,121,32,.16);
  border-color: #F47920;
  box-shadow: 0 0 0 1px rgba(244,121,32,.35), 0 4px 12px rgba(244,121,32,.15);
}
.tboard-kpi__dot {
  display: inline-block;
  width: 11px; height: 11px; border-radius: 50%;
  box-shadow: 0 0 0 3px var(--app-tint-2), 0 0 12px currentColor;
  flex-shrink: 0;
}
.tboard-kpi__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1;
}
.tboard-kpi__value {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.5px;
  color: var(--app-fg-1);
}
.tboard-kpi__label {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: var(--app-fg-3);
  text-transform: uppercase;
}
.tboard-kpi.is-active .tboard-kpi__label { color: rgba(244,121,32,.95); }

/* Row 2: sort headers */
.task-board__sortbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 9px 14px;
}
.task-board__sortbar-prefix {
  font-family: var(--mx-font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.6px;
  color: var(--app-fg-4);
  text-transform: uppercase;
  margin-right: 6px;
  padding-right: 8px;
  border-right: 1px solid var(--app-tint-4);
}
.tboard-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 7px;
  background: var(--app-tint-2);
  border: 1px solid var(--app-tint-4);
  color: var(--app-fg-2);
  font-family: var(--mx-font-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  text-transform: uppercase;
  transition: background .12s, color .12s, border-color .12s;
}
.tboard-sort:hover {
  background: var(--app-tint-3);
  border-color: rgba(244,121,32,.30);
  color: var(--app-fg-1);
}
.tboard-sort.is-active {
  background: rgba(244,121,32,.16);
  border-color: rgba(244,121,32,.6);
  color: #F47920;
  box-shadow: 0 0 0 1px rgba(244,121,32,.25);
}
.tboard-sort__arrow {
  display: inline-grid;
  place-items: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--app-tint-2);
  font-size: 11px;
  font-weight: 700;
  opacity: .8;
}
.tboard-sort.is-active .tboard-sort__arrow {
  background: rgba(244,121,32,.25);
  color: #F47920;
  opacity: 1;
}
.task-board__count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--app-tint-2);
  border: 1px solid var(--app-tint-4);
  font-family: var(--mx-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--app-fg-2);
  text-transform: uppercase;
}

/* Per-assignee mini fichas in the sort bar */
.tboard-people {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-right: 10px;
  margin-right: 4px;
  border-right: 1px solid var(--app-tint-4);
}
.tboard-person {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px 4px 4px;
  border-radius: 999px;
  background: var(--app-tint-2);
  border: 1px solid var(--app-tint-4);
  cursor: pointer;
  font-family: var(--mx-font-display);
  transition: background .12s, border-color .12s, transform .08s;
}
.tboard-person:hover {
  background: rgba(244,121,32,.10);
  border-color: rgba(244,121,32,.40);
}
.tboard-person:active { transform: translateY(1px); }
.tboard-person.is-active {
  background: rgba(244,121,32,.18);
  border-color: #F47920;
  box-shadow: 0 0 0 1px rgba(244,121,32,.25);
}
.tboard-person__av {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid transparent;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .3px;
}
.tboard-person__count {
  font-size: 13px;
  font-weight: 800;
  color: var(--app-fg-1);
  min-width: 14px;
  text-align: center;
}
.task-board__count::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34,197,94,.6);
}

/* ── Brand filter chips (Tasks view) ─────────────────────────── */
.task-brandfilter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  align-items: center;
}
.task-brandchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 6px;
  background: var(--app-tint-1);
  border: 1px solid var(--app-tint-3);
  color: var(--app-fg-2);
  border-radius: 999px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
}
.task-brandchip:hover {
  background: rgba(244,121,32,.10);
  border-color: rgba(244,121,32,.30);
  color: var(--app-fg-1);
}
.task-brandchip.is-active {
  background: rgba(244,121,32,.18);
  border-color: rgba(244,121,32,.55);
  color: var(--app-fg-1);
  box-shadow: 0 0 0 1px rgba(244,121,32,.18);
}
.task-brandchip__swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mx-font-display);
  font-weight: 800;
  font-size: 8px;
  color: var(--app-fg-1);
  letter-spacing: 0.2px;
  box-shadow: inset 0 0 0 1px var(--app-tint-4);
}
.task-brandchip__all {
  font-size: 14px;
  color: #94a3b8;
  margin-left: 5px;
}
.task-brandchip.is-active .task-brandchip__all { color: #F47920; }
.task-brandchip__name { white-space: nowrap; }
.task-brandchip__count {
  font-family: var(--mx-font-mono);
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  background: var(--app-tint-3);
  border-radius: 999px;
  color: var(--app-fg-2);
}
.task-brandchip.is-active .task-brandchip__count {
  background: rgba(244,121,32,.25);
  color: var(--app-fg-1);
}
.task-brandchip--more {
  border-style: dashed;
  color: var(--app-fg-3);
  font-style: italic;
  padding: 5px 11px;
}

/* ── View mode toggle (Lista / Persona / Marca) ─────────────── */
.task-viewmode {
  display: inline-flex;
  background: var(--app-tint-2);
  border: 1px solid var(--app-tint-3);
  border-radius: 8px;
  padding: 2px;
  margin: 0 6px;
}
.task-viewmode__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  background: transparent;
  border: none;
  color: var(--app-fg-3);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.12s;
}
.task-viewmode__btn:hover { color: var(--app-fg-1); }
.task-viewmode__btn.is-active {
  background: linear-gradient(135deg, rgba(244,121,32,.18), rgba(244,121,32,.06));
  color: #F47920;
  box-shadow: inset 0 0 0 1px rgba(244,121,32,.30);
}
.task-viewmode__btn svg { color: currentColor; }

/* ── Persona view: 4-column kanban ──────────────────────────── */
.task-personagrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  margin-top: 6px;
}
.task-personacol {
  background: var(--app-tint-1);
  border: 1px solid var(--app-tint-2);
  border-radius: 10px;
  padding: 8px;
  min-height: 120px;
}
.task-personacol__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px 8px;
  border-bottom: 1px solid var(--app-tint-2);
  margin-bottom: 8px;
}
.task-personacol__name {
  font-family: var(--mx-font-display);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--app-fg-1);
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.task-personacol__metag {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: 1px 5px;
  background: rgba(34,197,94,.18);
  color: #4ade80;
  border-radius: 999px;
  text-transform: uppercase;
}
.task-personacol__count {
  font-family: var(--mx-font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #F47920;
  background: rgba(244,121,32,.10);
  padding: 2px 8px;
  border-radius: 999px;
}
.task-personacol__empty {
  text-align: center;
  font-size: 11px;
  color: var(--app-fg-4);
  font-style: italic;
  padding: 16px 0;
}
.task-personacol .task-row { margin-bottom: 4px; }

/* ── Marca view: brand-grouped stacks ───────────────────────── */
.task-brandgroups { margin-top: 6px; }
.task-brandgroup {
  margin-bottom: 14px;
}
.task-brandgroup__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--app-tint-1);
  border: 1px solid var(--app-tint-2);
  border-radius: 8px 8px 0 0;
}
.task-brandgroup__name {
  font-family: var(--mx-font-display);
  font-size: 13px;
  font-weight: 800;
  color: var(--app-fg-1);
  letter-spacing: 0.3px;
}
.task-brandgroup__count {
  margin-left: auto;
  font-family: var(--mx-font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--app-fg-3);
}
.task-brandgroup .task-row { border-radius: 0; margin-top: -1px; }
.task-brandgroup .task-row:last-child { border-radius: 0 0 8px 8px; }

/* ── Coming Soon placeholder ───────────────────────────────── */
.coming-soon {
  position: relative;
  min-height: 60vh;
  max-width: 540px;
  margin: 60px auto 40px;
  padding: 56px 42px 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: linear-gradient(180deg, var(--app-tint-1), var(--app-tint-1));
  border: 1px solid var(--app-tint-3);
  border-radius: 20px;
  overflow: hidden;
}
.coming-soon__bg-glow {
  position: absolute;
  inset: -20%;
  background: radial-gradient(ellipse at top, rgba(244,121,32,.12) 0%, transparent 55%);
  pointer-events: none;
  animation: coming-soon-pulse 6s ease-in-out infinite;
}
@keyframes coming-soon-pulse {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}
.coming-soon > * { position: relative; z-index: 2; }
.coming-soon__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mx-font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: #fbbf85;
  padding: 4px 12px;
  background: rgba(244,121,32,.12);
  border: 1px solid rgba(244,121,32,.30);
  border-radius: 999px;
  margin-bottom: 24px;
}
.coming-soon__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #F47920;
  box-shadow: 0 0 8px #F47920;
  animation: coming-soon-blink 1.6s ease-in-out infinite;
}
@keyframes coming-soon-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.coming-soon__icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(244,121,32,.25), rgba(244,121,32,.08));
  border: 1px solid rgba(244,121,32,.30);
  display: grid;
  place-items: center;
  color: #F47920;
  margin-bottom: 18px;
  box-shadow: 0 8px 22px rgba(244,121,32,.18);
  animation: coming-soon-float 4s ease-in-out infinite;
}
@keyframes coming-soon-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.coming-soon__title {
  font-family: var(--mx-font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--app-fg-1);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.coming-soon__sub {
  font-family: var(--mx-font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(244,121,32,.85);
  margin-bottom: 18px;
}
.coming-soon__hint {
  font-size: 14px;
  color: var(--app-fg-2);
  line-height: 1.7;
  max-width: 380px;
}
.coming-soon__footer {
  margin-top: 28px;
  padding-top: 20px;
  font-size: 12px;
  color: var(--app-fg-4);
  border-top: 1px solid var(--app-tint-2);
  width: 100%;
}
.coming-soon__footer strong { color: var(--app-fg-2); }

/* Sidebar nav: dim "coming soon" items + add tiny PRONTO badge */
.nav-item.is-coming-soon {
  opacity: 0.55;
}
.nav-item.is-coming-soon:hover { opacity: 0.85; }
.nav-item.is-coming-soon.active { opacity: 1; }
.nav-item__soon {
  margin-left: auto;
  font-family: var(--mx-font-display);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 2px 6px;
  background: rgba(244,121,32,.15);
  color: #fbbf85;
  border: 1px solid rgba(244,121,32,.30);
  border-radius: 4px;
  white-space: nowrap;
}

/* ── Storage / Aged Inventory dashboard ─────────────────────── */
.storage-filterbar {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.storage-filterbar__group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.storage-filterbar__group label {
  font-family: var(--mx-font-display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--app-fg-4);
}
.storage-filterbar__group select,
.storage-filterbar__group input {
  background: var(--app-tint-2);
  border: 1px solid var(--app-tint-4);
  color: var(--app-fg-1);
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 12.5px;
  font-family: inherit;
  outline: none;
  min-width: 140px;
}
.storage-filterbar__group select:focus,
.storage-filterbar__group input:focus {
  border-color: rgba(244,121,32,.55);
  background: rgba(244,121,32,.06);
}

/* Top 10 horizontal bar chart */
.storage-topbars {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 18px 16px;
}
.storage-topbar__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
}
.storage-topbar__rank {
  width: 22px;
  font-family: var(--mx-font-display);
  font-size: 11px;
  font-weight: 800;
  color: var(--app-fg-4);
  text-align: right;
}
.storage-topbar__brand { flex-shrink: 0; }
.storage-topbar__sku {
  width: 240px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.storage-topbar__sku-code {
  font-family: var(--mx-font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--app-fg-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.storage-topbar__sku-title {
  font-size: 10.5px;
  color: var(--app-fg-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.storage-topbar__bar-wrap {
  flex: 1;
  min-width: 80px;
  height: 12px;
  background: var(--app-tint-2);
  border-radius: 999px;
  overflow: hidden;
}
.storage-topbar__bar {
  height: 100%;
  background: linear-gradient(90deg, #F47920, #ef4444);
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(244,121,32,0.40);
  transition: width 0.5s ease-out;
}
.storage-topbar__val {
  font-family: var(--mx-font-mono);
  font-size: 12.5px;
  font-weight: 700;
  color: #F47920;
  min-width: 80px;
  text-align: right;
}

/* Status filter chips */
.storage-chiprow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.storage-chip {
  background: var(--app-tint-2);
  border: 1px solid var(--app-tint-4);
  color: var(--app-fg-2);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  transition: all 0.12s;
}
.storage-chip:hover {
  border-color: rgba(244,121,32,.30);
  color: var(--app-fg-1);
}
.storage-chip.is-active {
  background: rgba(244,121,32,.15);
  border-color: rgba(244,121,32,.55);
  color: var(--app-fg-1);
}
.storage-chip__count {
  background: var(--app-tint-4);
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-family: var(--mx-font-mono);
}
.storage-chip.is-active .storage-chip__count {
  background: rgba(244,121,32,.30);
  color: var(--app-fg-1);
}
.storage-chiprow__meta {
  font-size: 11px;
  color: var(--app-fg-4);
  font-family: var(--mx-font-mono);
}

/* Detail table — horizontal scroll wrapper so the 11-column grid keeps
   readable column widths instead of crushing when the sidebar is expanded
   and the content area gets narrower. */
.storage-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.storage-table { min-width: 1100px; }
.storage-table th,
.storage-table td { white-space: nowrap; }
.storage-table-scroll::-webkit-scrollbar { height: 8px; }
.storage-table-scroll::-webkit-scrollbar-thumb {
  background: var(--app-tint-5);
  border-radius: 999px;
}
.storage-table-scroll::-webkit-scrollbar-thumb:hover { background: var(--app-fg-5); }

/* Top 10 bars — SKU column needs to shrink gracefully on narrow widths
   (expanded sidebar) so the bar itself doesn't disappear. */
.storage-topbar__sku {
  width: auto;
  flex: 0 1 240px;
  min-width: 140px;
}
@media (max-width: 1200px) {
  .storage-topbar__sku { flex-basis: 180px; }
  .storage-topbar__val { min-width: 70px; }
}

/* Per-brand marketplace picker (Reports → Configuración) */
.markets-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  font-family: var(--mx-font-mono);
  background: var(--app-tint-1);
  border: 1px solid var(--app-tint-4);
  color: var(--app-fg-3);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.14s;
  white-space: nowrap;
}
.markets-chip:hover {
  background: rgba(244,121,32,.08);
  border-color: rgba(244,121,32,.30);
  color: var(--app-fg-1);
}
.markets-chip.is-on {
  background: rgba(244,121,32,.15);
  border-color: rgba(244,121,32,.55);
  color: var(--app-fg-1);
  box-shadow: 0 0 0 1px rgba(244,121,32,.20);
}
.markets-chip.is-on:hover {
  background: rgba(244,121,32,.22);
}
.markets-chip svg { color: #F47920 !important; }

/* ───────────────────────────────────────────────────────────────
   BOOT SPLASH — cinematic loading screen with KAI mascot
   ─────────────────────────────────────────────────────────────── */
.boot-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(ellipse at center, #131420 0%, #08090f 70%);
  color: var(--app-fg-1);
  font-family: inherit;
  animation: boot-splash-in 0.5s ease-out;
}
@keyframes boot-splash-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Animated radial gradient pulsing behind everything */
.boot-splash__bg {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 50% 50%, rgba(244,121,32,0.18) 0%, transparent 50%);
  animation: boot-splash-bgpulse 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes boot-splash-bgpulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1.0; transform: scale(1.08); }
}

/* Subtle grid overlay for that "tech / data" feel */
.boot-splash__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(244,121,32,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,121,32,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  pointer-events: none;
}

/* Floating particles */
.boot-splash__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.boot-splash__particle {
  position: absolute;
  background: rgba(244,121,32,0.55);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(244,121,32,0.7);
  animation: boot-splash-float linear infinite;
  opacity: 0;
}
@keyframes boot-splash-float {
  0%   { opacity: 0; transform: translateY(20px); }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-100px); }
}

/* Main content stack */
.boot-splash__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 24px;
  max-width: 520px;
  width: 100%;
}

/* Brand mark */
.boot-splash__brand {
  text-align: center;
  margin-bottom: 36px;
  animation: boot-splash-fadeup 0.6s ease-out;
}
.boot-splash__logo {
  width: 220px;
  height: auto;
  color: #F47920;
  filter: drop-shadow(0 0 18px rgba(244,121,32,0.45));
}
.boot-splash__tagline {
  margin-top: 8px;
  font-family: var(--mx-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--app-fg-4);
}

/* KAI stage — orbits, aura, fox */
.boot-splash__stage {
  position: relative;
  width: 240px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  animation: boot-splash-fadeup 0.7s 0.1s ease-out backwards;
}
.boot-splash__orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(244,121,32,0.22);
  animation: boot-splash-spin linear infinite;
}
.boot-splash__orbit--outer {
  inset: 0;
  animation-duration: 28s;
}
.boot-splash__orbit--mid {
  inset: 28px;
  animation-duration: 18s;
  animation-direction: reverse;
  border-color: rgba(244,121,32,0.32);
}
@keyframes boot-splash-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* KAI fox (free-floating, no aura) */
.boot-splash__kai {
  position: relative;
  z-index: 3;
  width: 150px;
  height: 150px;
  animation: boot-splash-foxbreathe 3.4s ease-in-out infinite;
  filter:
    drop-shadow(0 10px 18px rgba(0,0,0,0.45))
    drop-shadow(0 0 24px rgba(244,121,32,0.25));
}
.boot-splash__kai img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  /* Per-pose rotation set via --kai-rot inline style; fade in on mount */
  animation: boot-splash-poseswap 0.55s ease-out;
  transform: rotate(var(--kai-rot, 0deg));
}
@keyframes boot-splash-poseswap {
  0%   { opacity: 0; transform: rotate(var(--kai-rot, 0deg)) scale(0.88); }
  60%  { opacity: 1; transform: rotate(var(--kai-rot, 0deg)) scale(1.04); }
  100% { opacity: 1; transform: rotate(var(--kai-rot, 0deg)) scale(1); }
}
@keyframes boot-splash-foxbreathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* Connection chips floating around KAI */
.boot-splash__chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--mx-font-display);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(20, 24, 36, 0.85);
  border: 1px solid rgba(244,121,32,0.40);
  color: var(--app-fg-1);
  box-shadow: 0 6px 20px rgba(0,0,0,0.30), 0 0 0 1px rgba(244,121,32,0.10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 4;
  white-space: nowrap;
  animation: boot-splash-chipfloat 4s ease-in-out infinite;
}
.boot-splash__chip span:first-child { font-size: 13px; }
.boot-splash__chip--mx     { top:  8px; left: -8px;  animation-delay: 0.0s; }
.boot-splash__chip--us     { top:  8px; right: -8px; animation-delay: 0.8s; }
.boot-splash__chip--nova   { bottom: 14px; left: -10px; animation-delay: 1.6s; }
.boot-splash__chip--brands { bottom: 14px; right: -10px; animation-delay: 2.4s; }
@keyframes boot-splash-chipfloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* Greeting + caption */
.boot-splash__greeting {
  font-family: var(--mx-font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: var(--app-fg-1);
  animation: boot-splash-fadeup 0.7s 0.2s ease-out backwards;
}
.boot-splash__greeting strong { color: #F47920; }
.boot-splash__caption {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--app-fg-3);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  animation: boot-splash-fadeup 0.7s 0.3s ease-out backwards;
}
.boot-splash__dots {
  display: inline-flex;
  gap: 3px;
  margin-left: 4px;
}
.boot-splash__dots span {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #F47920;
  animation: boot-splash-dot 1.4s ease-in-out infinite;
}
.boot-splash__dots span:nth-child(2) { animation-delay: 0.18s; }
.boot-splash__dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes boot-splash-dot {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40%           { opacity: 1;    transform: translateY(-3px); }
}

/* Boot log — items appear with stagger */
.boot-splash__log {
  margin-top: 24px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 20px;
  background: rgba(20,18,24,0.55);
  border: 1px solid var(--app-tint-3);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: boot-splash-fadeup 0.7s 0.4s ease-out backwards;
}
.boot-splash__log-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  font-family: var(--mx-font-mono);
  transition: color 0.3s, opacity 0.3s;
}
.boot-splash__log-item.is-done    { color: rgba(134,239,172,0.95); }
.boot-splash__log-item.is-active  { color: var(--app-fg-1); font-weight: 600; }
.boot-splash__log-item.is-pending { color: var(--app-fg-5); }
.boot-splash__log-icon {
  width: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 800;
}
.boot-splash__log-item.is-done .boot-splash__log-icon    { color: #22c55e; }
.boot-splash__log-item.is-active .boot-splash__log-icon  { color: #F47920; }
.boot-splash__log-item.is-pending .boot-splash__log-icon { color: var(--app-fg-5); }
.boot-splash__spinner {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid rgba(244,121,32,0.30);
  border-top-color: #F47920;
  animation: boot-splash-rot 0.8s linear infinite;
}
@keyframes boot-splash-rot {
  to { transform: rotate(360deg); }
}
.boot-splash__log-label { flex: 1; }
.boot-splash__log-bar {
  width: 30px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #F47920, transparent);
  border-radius: 999px;
  background-size: 200% 100%;
  animation: boot-splash-shimmer 1.2s linear infinite;
}
@keyframes boot-splash-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Indeterminate progress bar */
.boot-splash__progress {
  margin-top: 18px;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: var(--app-tint-3);
  overflow: hidden;
  animation: boot-splash-fadeup 0.7s 0.5s ease-out backwards;
}
.boot-splash__progress-fill {
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #F47920, #FBBF85, #F47920, transparent);
  border-radius: 999px;
  animation: boot-splash-indeterminate 1.6s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(244,121,32,0.6);
}
@keyframes boot-splash-indeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(280%); }
}

/* Footer */
.boot-splash__foot {
  margin-top: 20px;
  font-family: var(--mx-font-display);
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--app-fg-4);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  animation: boot-splash-fadeup 0.7s 0.6s ease-out backwards;
}
.boot-splash__foot-dot { color: var(--app-tint-6); }

/* Generic fade-up animation used by multiple elements */
@keyframes boot-splash-fadeup {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--app-tint-4); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--app-tint-6); }


/* ═══════════════════════════════════════════════════════════════════════
   Research / Market-study generator UI
   ═══════════════════════════════════════════════════════════════════════ */

.rs-page { padding: 24px 32px; max-width: 980px; margin: 0 auto; }
.rs-page-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 28px; gap: 16px; }
.rs-page-head h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.3px; color: var(--app-fg-1); }
.rs-page-head p { margin: 6px 0 0; color: var(--app-fg-2); font-size: 14px; line-height: 1.5; max-width: 620px; }
.rs-back { margin-bottom: 10px; }

/* ── Section card with numbered badge ── */
.rs-section { padding: 22px 24px; margin-bottom: 18px; border-radius: 12px; border: 1px solid var(--app-border); background: var(--app-bg); transition: border-color 0.15s ease; }
.rs-section--locked { opacity: 0.6; pointer-events: none; }
.rs-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.rs-section-num {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 999px;
  background: #F47920; color: #fff; font-weight: 700; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  letter-spacing: -0.5px;
}
.rs-section-title { font-size: 15px; font-weight: 700; color: var(--app-fg-1); margin: 0; line-height: 1.3; }
.rs-section-sub { font-size: 12px; color: var(--app-fg-3); margin-top: 2px; line-height: 1.4; }

/* ── Form grid ── */
.rs-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .rs-fields { grid-template-columns: 1fr; } }
.rs-field { display: flex; flex-direction: column; gap: 5px; }
.rs-field label { font-size: 11px; color: var(--app-fg-2); font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
.rs-field input, .rs-field select {
  padding: 10px 12px; border: 1px solid var(--app-border); border-radius: 7px;
  font-size: 14px; font-family: inherit; background: var(--app-bg); color: var(--app-fg-1);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.rs-field input:focus, .rs-field select:focus { outline: none; border-color: #F47920; box-shadow: 0 0 0 3px rgba(244,121,32,.12); }
.rs-field-req { color: #F47920; margin-left: 2px; }

/* ── Proposal toggle ── */
.rs-toggle { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; padding: 4px 0; cursor: pointer; }
.rs-toggle input { margin-top: 3px; flex: 0 0 16px; cursor: pointer; }
.rs-toggle-hint { color: var(--app-fg-3); font-size: 12px; margin-top: 3px; }

/* ── File drop card ── */
.rs-file-drop {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; margin-bottom: 12px;
  border: 1.5px dashed var(--app-border); border-radius: 10px;
  background: var(--app-tint-1); cursor: pointer; transition: all 0.15s ease;
  position: relative;
}
.rs-file-drop:hover { border-color: rgba(244,121,32,.6); background: rgba(244,121,32,.04); }
.rs-file-drop--drag { border-color: #F47920; background: rgba(244,121,32,.08); border-style: solid; }
.rs-file-drop--loaded { border-color: rgba(16,150,80,.5); border-style: solid; background: rgba(16,150,80,.04); }
.rs-file-drop--loaded:hover { border-color: rgba(16,150,80,.7); }
.rs-file-drop input[type="file"] { display: none; }
.rs-file-icon {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 8px;
  background: rgba(244,121,32,.08); color: #F47920;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mx-font-display); font-weight: 800; font-size: 11px;
  letter-spacing: 0.5px;
}
.rs-file-drop--loaded .rs-file-icon { background: rgba(16,150,80,.12); color: #10A050; }
.rs-file-body { flex: 1; min-width: 0; }
.rs-file-label { font-size: 13px; font-weight: 700; color: var(--app-fg-1); display: flex; align-items: center; gap: 8px; }
.rs-file-required { font-size: 10px; padding: 2px 6px; border-radius: 4px; background: rgba(244,121,32,.15); color: #F47920; font-weight: 700; letter-spacing: 0.3px; }
.rs-file-optional { font-size: 10px; padding: 2px 6px; border-radius: 4px; background: var(--app-tint-2); color: var(--app-fg-3); font-weight: 700; letter-spacing: 0.3px; }
.rs-file-name { font-size: 12px; color: var(--app-fg-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-file-hint { font-size: 11px; color: var(--app-fg-3); margin-top: 3px; }
.rs-file-action { font-size: 12px; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--app-border); background: var(--app-bg); color: var(--app-fg-1); cursor: pointer; }
.rs-file-action:hover { border-color: #F47920; color: #F47920; }
.rs-file-check { color: #10A050; font-size: 22px; font-weight: 700; }

/* ── Submit row ── */
.rs-submit-row { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.rs-submit-row .btn { padding: 11px 22px; font-size: 14px; }
.rs-error {
  padding: 12px 16px; border-radius: 8px;
  background: rgba(244,121,32,.08); border: 1px solid rgba(244,121,32,.4);
  color: #F47920; margin-bottom: 16px; font-size: 13px;
  display: flex; gap: 10px; align-items: flex-start;
}

/* ── Progress overlay (during submission) ── */
.rs-progress-backdrop {
  position: fixed; inset: 0; background: rgba(10,17,26,.75);
  backdrop-filter: blur(6px); z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  animation: rs-fade-in 0.2s ease-out;
}
@keyframes rs-fade-in { from { opacity: 0; } to { opacity: 1; } }
.rs-progress-card {
  background: var(--app-bg); border-radius: 16px; padding: 36px 40px;
  max-width: 560px; width: 92%; box-shadow: 0 24px 80px rgba(0,0,0,.4);
  animation: rs-pop-in 0.3s cubic-bezier(.2,.8,.3,1.2);
}
@keyframes rs-pop-in { from { transform: scale(0.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.rs-progress-title { font-size: 18px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.2px; }
.rs-progress-sub { font-size: 13px; color: var(--app-fg-3); margin-bottom: 26px; }
.rs-progress-steps { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.rs-progress-step { display: flex; align-items: center; gap: 14px; opacity: 0.5; transition: opacity 0.3s ease; }
.rs-progress-step--active { opacity: 1; }
.rs-progress-step--done { opacity: 1; }
.rs-progress-step-icon {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--app-tint-2); color: var(--app-fg-3); font-size: 12px; font-weight: 700;
  border: 2px solid transparent;
}
.rs-progress-step--active .rs-progress-step-icon { background: rgba(244,121,32,.15); color: #F47920; border-color: #F47920; }
.rs-progress-step--done   .rs-progress-step-icon { background: #10A050; color: #fff; border-color: #10A050; }
.rs-progress-step-body { flex: 1; }
.rs-progress-step-label { font-size: 14px; font-weight: 600; color: var(--app-fg-1); }
.rs-progress-step--active .rs-progress-step-label { color: var(--app-fg-1); }
.rs-progress-step:not(.rs-progress-step--active):not(.rs-progress-step--done) .rs-progress-step-label { color: var(--app-fg-3); }
.rs-progress-step-hint { font-size: 11px; color: var(--app-fg-3); margin-top: 2px; }
.rs-progress-step--active .rs-progress-step-hint { color: #F47920; }
.rs-progress-spinner {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 999px;
  animation: rs-spin 0.7s linear infinite;
}
@keyframes rs-spin { to { transform: rotate(360deg); } }
.rs-progress-bar {
  height: 6px; border-radius: 999px; background: var(--app-tint-2);
  overflow: hidden; position: relative;
}
.rs-progress-bar-fill {
  height: 100%; background: #F47920; border-radius: 999px;
  transition: width 0.6s cubic-bezier(.4,0,.2,1);
}
.rs-progress-meta { display: flex; justify-content: space-between; margin-top: 10px; font-size: 11px; color: var(--app-fg-3); }
.rs-progress-meta strong { color: var(--app-fg-1); font-variant-numeric: tabular-nums; }

/* ── Studies dashboard ── */
.rs-stats {
  display: flex; gap: 24px; padding: 18px 22px; margin-bottom: 16px;
  border: 1px solid var(--app-border); border-radius: 12px;
  background: var(--app-tint-1);
}
.rs-stat { display: flex; flex-direction: column; gap: 2px; }
.rs-stat-num { font-family: var(--mx-font-display); font-size: 28px; font-weight: 800; color: var(--app-fg-1); letter-spacing: -0.5px; line-height: 1; }
.rs-stat-label { font-size: 11px; color: var(--app-fg-3); font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; }
.rs-stat-num--accent { color: #F47920; }

.rs-toolbar {
  display: flex; gap: 12px; align-items: center; margin-bottom: 14px;
  flex-wrap: wrap;
}
.rs-search {
  flex: 1; min-width: 240px; position: relative;
}
.rs-search input {
  width: 100%; padding: 10px 14px 10px 38px;
  border: 1px solid var(--app-border); border-radius: 8px;
  font-size: 14px; background: var(--app-bg); color: var(--app-fg-1);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.rs-search input:focus { outline: none; border-color: #F47920; box-shadow: 0 0 0 3px rgba(244,121,32,.12); }
.rs-search-icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--app-fg-3); font-size: 15px; pointer-events: none;
}
.rs-search-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; padding: 4px 8px;
  color: var(--app-fg-3); font-size: 13px; line-height: 1;
}
.rs-search-clear:hover { color: var(--app-fg-1); }
.rs-sort {
  padding: 10px 14px; border: 1px solid var(--app-border); border-radius: 8px;
  background: var(--app-bg); color: var(--app-fg-1); font-size: 14px;
  cursor: pointer; min-width: 180px;
}
.rs-sort:focus { outline: none; border-color: #F47920; }

.rs-list { padding: 0; overflow: hidden; border-radius: 12px; }
.rs-list table { width: 100%; border-collapse: collapse; }
.rs-list thead th { text-align: left; padding: 13px 18px; font-size: 11px; font-weight: 700; color: var(--app-fg-2); text-transform: uppercase; letter-spacing: 0.5px; background: var(--app-tint-1); border-bottom: 1px solid var(--app-border); }
.rs-list thead th:last-child { text-align: right; }
.rs-list tbody tr { border-top: 1px solid var(--app-border); transition: background 0.12s ease; }
.rs-list tbody tr:first-child { border-top: none; }
.rs-list tbody tr:hover { background: var(--app-tint-1); }
.rs-list tbody td { padding: 14px 18px; font-size: 13px; vertical-align: middle; }
.rs-list-cell-date { color: var(--app-fg-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rs-list-cell-date strong { color: var(--app-fg-1); display: block; font-weight: 600; font-size: 13px; }
.rs-list-cell-date small { color: var(--app-fg-3); font-size: 11px; }
.rs-list-cell-brand { font-weight: 700; color: var(--app-fg-1); }
.rs-list-cell-niche { color: var(--app-fg-2); }
.rs-list-cell-actions { text-align: right; white-space: nowrap; }
.rs-list-cell-actions .btn { margin-left: 6px; padding: 7px 12px; font-size: 12px; }
.rs-list-tag {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
  background: var(--app-tint-2); color: var(--app-fg-2);
}

.rs-no-results {
  padding: 48px 24px; text-align: center; color: var(--app-fg-3);
  font-size: 14px;
}

/* ── File row inside the Archivos modal ── */
.rs-file-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--app-border); background: var(--app-tint-1);
  text-decoration: none; color: var(--app-fg-1);
  transition: all 0.12s ease;
}
.rs-file-row:hover { border-color: #F47920; background: rgba(244,121,32,.04); transform: translateY(-1px); }
.rs-file-row .rs-file-icon { flex: 0 0 44px; width: 44px; height: 44px; }
.rs-file-row .rs-file-action { flex: 0 0 auto; }

.rs-empty {
  padding: 56px 24px; border: 1.5px dashed var(--app-border); border-radius: 14px;
  text-align: center; color: var(--app-fg-2); background: var(--app-tint-1);
}
.rs-empty-icon { font-size: 36px; margin-bottom: 12px; opacity: 0.6; }
.rs-empty-title { font-size: 17px; font-weight: 600; color: var(--app-fg-1); margin-bottom: 6px; }
.rs-empty-text { font-size: 13px; margin-bottom: 22px; max-width: 480px; margin-left: auto; margin-right: auto; line-height: 1.55; }

/* ── PPC (BigQuery campaigns) — interactivo, dark, naranja ── */
.ppc-bq > .card{margin-bottom:var(--d-gap,14px)}
.ppc-bq .ppc-twocol{display:grid;grid-template-columns:1fr 1fr;gap:var(--d-gap,14px)}

/* KPIs clicables que arman la gráfica */
.ppc-bq .ppc-metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:var(--d-gap,14px)}
.ppc-bq .ppc-mcard{background:var(--app-surface);border:1px solid var(--app-border);border-radius:12px;padding:11px 13px;cursor:pointer;transition:box-shadow .12s,background .12s,border-color .12s;user-select:none}
.ppc-bq .ppc-mcard:hover{border-color:var(--app-fg-4)}
.ppc-bq .ppc-mcard.on{border-color:transparent;box-shadow:inset 0 0 0 1.5px var(--mc,#F47920);background:color-mix(in srgb, var(--mc,#F47920) 9%, var(--app-surface))}
.ppc-bq .ppc-mcard__label{font-size:10px;text-transform:uppercase;letter-spacing:.03em;color:var(--app-fg-3);font-weight:650;display:flex;align-items:center;gap:6px}
.ppc-bq .ppc-mcard__val{font-size:18px;font-weight:760;margin-top:5px;color:var(--app-fg-1);font-variant-numeric:tabular-nums}
.ppc-bq .ppc-mcard .dot{width:8px;height:8px;border-radius:50%;background:var(--mc,#F47920);flex:none}

/* Leyenda de la gráfica */
.ppc-bq .ppc-legend{display:flex;gap:18px;flex-wrap:wrap;font-size:11.5px;color:var(--app-fg-2);margin-top:8px}
.ppc-bq .ppc-legend .sw{width:18px;height:3px;border-radius:2px;display:inline-block;vertical-align:middle;margin-right:7px}

/* Títulos con barra naranja */
.ppc-bq .card-head h4{display:flex;align-items:center;gap:9px}
.ppc-bq .card-head h4::before{content:"";width:4px;height:15px;border-radius:3px;background:var(--accent,#F47920);flex:none}
.ppc-bq .ppc-detail .card-head h4::before{display:none}

/* Cuadros con scroll interno + encabezado sticky */
.ppc-bq .ppc-scroll{max-height:400px;overflow-y:auto}
.ppc-bq .ppc-scroll .tbl thead th{position:sticky;top:0;z-index:1;background:var(--app-surface)}

/* tablas ordenables + selección */
.ppc-bq .tbl.ppc-sortable th{cursor:pointer;user-select:none;white-space:nowrap}
.ppc-bq .tbl.ppc-sortable th:hover{color:var(--accent,#F47920)}
.ppc-bq .tbl tbody tr.rc{cursor:pointer}
.ppc-bq .tbl tbody tr.rc:hover{background:var(--app-row-hover)}
.ppc-bq .tbl tbody tr.sel{background:rgba(244,121,32,.10);box-shadow:inset 0 0 0 1.5px var(--accent,#F47920)}
.ppc-bq .card.ppc-detail{border-left:3px solid var(--accent,#F47920)}

/* Stats del detalle de campaña */
.ppc-bq .ppc-dstats{display:flex;flex-wrap:wrap;gap:24px;margin:10px 0 12px;padding:12px 15px;background:var(--app-tint-1);border-radius:10px}
.ppc-bq .ppc-dstat{display:flex;flex-direction:column}
.ppc-bq .ppc-dstat span{font-size:10px;text-transform:uppercase;letter-spacing:.03em;color:var(--app-fg-4);font-weight:650}
.ppc-bq .ppc-dstat b{font-size:17px;font-weight:760;color:var(--app-fg-1);margin-top:2px;font-variant-numeric:tabular-nums}

/* chips/badges */
.ppc-bq .ppc-nm{max-width:300px;overflow:hidden;text-overflow:ellipsis;font-weight:600;display:inline-block;vertical-align:bottom}
.ppc-bq .ppc-bdg{font-size:9px;font-weight:800;padding:1px 6px;border-radius:4px;letter-spacing:.02em}
.ppc-bq .ppc-bdg.sp{background:rgba(37,99,235,.16);color:#60a5fa}
.ppc-bq .ppc-bdg.sb{background:rgba(124,58,237,.18);color:#a78bfa}
.ppc-bq .ppc-bdg.sd{background:rgba(34,197,94,.16);color:#4ade80}
.ppc-bq .ppc-mt{font-size:9px;font-weight:700;padding:1px 5px;border-radius:4px;background:var(--app-tint-3);color:var(--app-fg-3)}
.ppc-bq .ppc-acos{font-weight:700;padding:2px 7px;border-radius:6px;display:inline-block;min-width:44px;text-align:center;font-size:11.5px}
.ppc-bq .ppc-acos.ag{background:rgba(34,197,94,.15);color:#4ade80}
.ppc-bq .ppc-acos.ao{color:var(--app-fg-2)}
.ppc-bq .ppc-acos.aw{background:rgba(244,121,32,.18);color:#fb923c}
.ppc-bq .ppc-acos.ab{background:rgba(239,68,68,.15);color:#f87171}
.ppc-bq .ppc-neg{font-size:10px;font-weight:700;padding:2px 8px;border-radius:5px}
.ppc-bq .ppc-neg.y{color:#4ade80;background:rgba(34,197,94,.15)}
.ppc-bq .ppc-neg.n{color:#f87171;background:rgba(239,68,68,.15)}
.ppc-bq .ppc-mut{color:var(--app-fg-4)}
.ppc-bq .neg-strong{color:#f87171}
@media(max-width:900px){.ppc-bq .ppc-metrics{grid-template-columns:repeat(2,1fr)}.ppc-bq .ppc-twocol{grid-template-columns:1fr}}
.ppc-bq .card-head.ppc-kwhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ppc-bq .ppc-search{margin-left:auto;background:var(--app-bg);border:1px solid var(--app-border);border-radius:8px;padding:6px 11px;font-size:12px;color:var(--app-fg-1);min-width:220px;outline:none}
.ppc-bq .ppc-search:focus{border-color:var(--accent,#F47920)}
.ppc-bq .ppc-search::placeholder{color:var(--app-fg-4)}
.ppc-bq .card-head.ppc-kwhead .sub{color:var(--app-fg-4);font-size:11px;white-space:nowrap}
/* ── PPC pill nav + secciones ── */
.ppc-bq .ppc-pills{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:var(--d-gap,14px);border-bottom:1px solid var(--app-border);padding-bottom:11px}
.ppc-bq .ppc-pill{appearance:none;border:1px solid var(--app-border);background:var(--app-tint-1);color:var(--app-fg-3);font-size:12px;font-weight:600;padding:6px 13px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s,border-color .15s;white-space:nowrap}
.ppc-bq .ppc-pill:hover{color:var(--app-fg-1);border-color:var(--app-fg-4)}
.ppc-bq .ppc-pill.on{background:var(--accent,#F47920);border-color:var(--accent,#F47920);color:#1a1206}
.ppc-bq .kpi-grid{margin-bottom:var(--d-gap,14px)}
.ppc-bq .ppc-chartpick{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 12px}
.ppc-bq .ppc-chip{appearance:none;border:1px solid var(--app-border);background:transparent;color:var(--app-fg-3);font-size:11px;font-weight:600;padding:4px 10px;border-radius:7px;cursor:pointer;transition:color .12s,border-color .12s}
.ppc-bq .ppc-chip:hover{color:var(--app-fg-1)}
.ppc-bq .ppc-chip.on{color:var(--app-fg-1);border-color:var(--mc,#F47920);box-shadow:inset 0 0 0 1px var(--mc,#F47920)}
.ppc-bq .ppc-chip.on::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--mc,#F47920);margin-right:6px;vertical-align:middle}
.ppc-bq .ppc-select{background:var(--app-bg);border:1px solid var(--app-border);border-radius:8px;padding:6px 10px;font-size:12px;color:var(--app-fg-1);outline:none;cursor:pointer}
.ppc-bq .ppc-select:focus{border-color:var(--accent,#F47920)}
.ppc-bq .ppc-soon{margin-top:6px}
.ppc-bq .ppc-soon__tag{display:inline-block;margin-top:10px;font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--accent,#F47920);background:rgba(244,121,32,.1);border:1px solid rgba(244,121,32,.25);border-radius:999px;padding:4px 11px}
/* Catálogo padre-hijo */
.ppc-bq table.ppc-cat{width:100%}
.ppc-bq .ppc-cat__p{cursor:pointer;font-weight:600}
.ppc-bq .ppc-cat__p:hover{background:var(--app-tint-2)}
.ppc-bq .ppc-cat__ex{display:inline-block;width:14px;color:var(--app-fg-4);font-size:10px}
.ppc-bq .ppc-cat__c td{background:var(--app-tint-1);font-size:12px}
.ppc-bq .ppc-cat__c td.l{padding-left:30px}
.ppc-bq .ppc-cat__sku{font-family:var(--mx-font-mono);font-size:11px;color:var(--app-fg-2)}
/* Sin PPC callout */
.ppc-bq .ppc-callout{display:flex;align-items:center;gap:9px;background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.25);color:var(--app-fg-1);border-radius:10px;padding:11px 14px;margin-bottom:var(--d-gap,14px);font-size:13px}
.ppc-bq .ppc-callout svg{color:#4ade80;flex:none}
/* Budget pacing */
.ppc-bq .ppc-pace__bar{position:relative;height:16px;background:var(--app-tint-3);border-radius:8px;margin-top:4px}
.ppc-bq .ppc-pace__fill{position:absolute;left:0;top:0;bottom:0;border-radius:8px;transition:width .4s}
.ppc-bq .ppc-pace__mark{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--app-fg-1);box-shadow:0 0 0 1px rgba(0,0,0,.3);transform:translateX(-1px)}
.ppc-bq .ppc-pace__row{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;font-family:var(--mx-font-mono);color:var(--app-fg-3)}
/* ── Búsqueda / SEO ── */
.seo-bq .seo-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--d-gap,12px);margin-bottom:var(--d-gap,14px)}
.seo-bq .seo-kpi{border-top:2px solid rgba(244,121,32,.55)}
.seo-bq > .card{margin-bottom:var(--d-gap,14px)}
.seo-bq .seo-twocol{display:grid;grid-template-columns:1fr 1fr;gap:var(--d-gap,14px)}
.seo-bq .card-head h4{display:flex;align-items:center;gap:9px}
.seo-bq .card-head h4::before{content:"";width:4px;height:15px;border-radius:3px;background:var(--accent,#F47920);flex:none}
.seo-bq .card-head.seo-kwhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.seo-bq .seo-search{margin-left:auto;background:var(--app-bg);border:1px solid var(--app-border);border-radius:8px;padding:6px 11px;font-size:12px;color:var(--app-fg-1);min-width:200px;outline:none}
.seo-bq .seo-search:focus{border-color:var(--accent,#F47920)}
.seo-bq .seo-search::placeholder{color:var(--app-fg-4)}
.seo-bq .seo-scroll{max-height:380px;overflow-y:auto}
.seo-bq .seo-scroll .tbl thead th{position:sticky;top:0;z-index:1;background:var(--app-surface)}
.seo-bq .tbl.seo-sortable th{cursor:pointer;user-select:none;white-space:nowrap}
.seo-bq .tbl.seo-sortable th:hover{color:var(--accent,#F47920)}
.seo-bq .tbl tbody tr:hover{background:var(--app-row-hover)}
.seo-bq .seo-nm{max-width:340px;overflow:hidden;text-overflow:ellipsis;font-weight:600;display:inline-block;vertical-align:bottom}
.seo-bq .seo-mono{font-size:11px;color:var(--app-fg-3);font-family:ui-monospace,Menlo,monospace}
.seo-bq .seo-chip{font-weight:700;padding:2px 7px;border-radius:6px;font-size:11px;display:inline-block;min-width:42px;text-align:center}
.seo-bq .seo-chip.g{background:rgba(34,197,94,.15);color:#4ade80}
.seo-bq .seo-chip.o{background:rgba(244,121,32,.16);color:#fb923c}
.seo-bq .seo-chip.a{background:rgba(251,191,36,.16);color:#fbbf24}
.seo-bq .seo-chip.r{background:rgba(239,68,68,.15);color:#f87171}
@media(max-width:900px){.seo-bq .seo-kpis{grid-template-columns:repeat(2,1fr)}.seo-bq .seo-twocol{grid-template-columns:1fr}}
/* ── Vendor (1P) ── */
.ven-chart__read{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:6px;flex-wrap:wrap}
.ven-chart__day{font-size:13px;font-weight:700;color:var(--app-fg-1)}
.ven-chart__day em{font-style:normal;font-weight:600;color:var(--app-fg-4);font-size:11.5px}
.ven-chart__metrics{display:flex;gap:22px}
.ven-chart__metrics span{display:flex;flex-direction:column;line-height:1.15}
.ven-chart__metrics i{font-style:normal;font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--app-fg-4)}
.ven-chart__metrics b{font-size:15px;color:var(--app-fg-1)}
.ven-chart rect{transition:opacity .12s}
.ven-chart rect:hover{opacity:.82}
.ven-loading{position:absolute;top:6px;right:6px;z-index:5;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--app-fg-2);background:var(--app-surface);border:1px solid var(--app-border);border-radius:999px;padding:6px 12px;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.ven-spin{width:13px;height:13px;border-radius:50%;border:2px solid var(--app-tint-2);border-top-color:var(--accent,#F47920);animation:venspin .7s linear infinite}
@keyframes venspin{to{transform:rotate(360deg)}}
.ven-agency-kpis{margin-bottom:22px}
/* Vendor pill nav (mismo look que PPC) */
.ven-bq .ven-pills{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:var(--d-gap,14px);border-bottom:1px solid var(--app-border);padding-bottom:11px}
.ven-bq .ven-pill{appearance:none;border:1px solid var(--app-border);background:var(--app-tint-1);color:var(--app-fg-3);font-size:12px;font-weight:600;padding:6px 13px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s,border-color .15s;white-space:nowrap}
.ven-bq .ven-pill:hover{color:var(--app-fg-1);border-color:var(--app-fg-4)}
.ven-bq .ven-pill.on{background:var(--accent,#F47920);border-color:var(--accent,#F47920);color:#1a1206}
.ven-bq .kpi-grid{margin-bottom:var(--d-gap,14px)}
.ven-bq .ven-neg{color:#f87171}
.ven-bq .card.padless .card-head{padding:16px 18px 4px}
.ven-bq .card.padless .ven-scroll{border-top:1px solid var(--app-border)}
.ven-bq .ven-brands{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.ven-bq .ven-chip-b{font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:10px;border:1px solid var(--app-border);background:var(--app-surface);color:var(--app-fg-2);cursor:pointer}
.ven-bq .ven-chip-b:hover{border-color:var(--app-fg-4)}
.ven-bq .ven-chip-b.on{background:var(--accent,#F47920);color:#fff;border-color:var(--accent,#F47920)}
.ven-bq .ven-chip-b .mk{font-size:10px;opacity:.7;margin-left:4px}
.ven-bq .ven-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--d-gap,12px);margin-bottom:var(--d-gap,14px)}
.ven-bq .ven-kpi{border-top:2px solid rgba(244,121,32,.55)}
.ven-bq > .card{margin-bottom:22px}
.ven-bq .card-head h4{display:flex;align-items:center;gap:9px}
.ven-bq .card-head h4::before{content:"";width:4px;height:15px;border-radius:3px;background:var(--accent,#F47920);flex:none}
.ven-bq .ven-twocol > .card{display:flex;flex-direction:column}
.ven-bq .ven-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:16px;align-content:start;flex:1}
.ven-bq .ven-stat{display:flex;flex-direction:column;gap:3px;padding:12px 13px;background:var(--app-tint-1);border:1px solid var(--app-tint-3);border-radius:10px}
.ven-bq .ven-stat span{font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--app-fg-4);font-weight:700}
.ven-bq .ven-stat b{font-size:20px;font-weight:780;color:var(--app-fg-1);font-variant-numeric:tabular-nums;line-height:1.05}
.ven-bq .ven-stat b.warn{color:#fb923c}.ven-bq .ven-stat b.bad{color:#f87171}
.ven-bq .ven-stat i{font-size:10.5px;color:var(--app-fg-4);font-style:normal;margin-top:1px}
.ven-bq .ven-scroll{max-height:420px;overflow-y:auto}
.ven-bq .ven-scroll .tbl thead th{position:sticky;top:0;z-index:1;background:var(--app-surface)}
.ven-bq .tbl.ven-sortable th{cursor:pointer;user-select:none;white-space:nowrap}
.ven-bq .tbl.ven-sortable th:hover{color:var(--accent,#F47920)}
.ven-bq .tbl tbody tr:hover{background:var(--app-row-hover)}
.ven-bq .ven-nm{max-width:280px;overflow:hidden;text-overflow:ellipsis;font-weight:600;display:inline-block;vertical-align:bottom}
.ven-bq .ven-mono{font-size:11px;color:var(--app-fg-3);font-family:ui-monospace,Menlo,monospace}
.ven-bq .ven-untitled{font-size:11.5px;color:var(--app-fg-4);font-style:italic}
.ven-bq .ven-nm{max-width:360px}
.ven-bq .ven-chip{font-weight:700;padding:2px 7px;border-radius:6px;font-size:11px;background:rgba(251,191,36,.16);color:#fbbf24}
@media(max-width:900px){.ven-bq .ven-kpis{grid-template-columns:repeat(2,1fr)}}
.ven-bq .ven-bar{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.ven-bq .ven-kpis{grid-template-columns:repeat(6,1fr)}
.ven-bq .ven-twocol{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:22px}
@media(max-width:900px){.ven-bq .ven-kpis{grid-template-columns:repeat(2,1fr)}.ven-bq .ven-twocol{grid-template-columns:1fr}}

/* ── Settlements (dinero real) ───────────────────────────────── */
.set-basis{display:flex;align-items:center;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.set-basis__lbl{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--app-fg-4);font-weight:700}
.set-basis__btn{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;padding:6px 12px;border-radius:8px;border:1px solid var(--app-border);background:var(--app-surface);color:var(--app-fg-2);cursor:pointer;font-size:12.5px;font-weight:600}
.set-basis__btn i{font-style:normal;font-size:9.5px;color:var(--app-fg-4);font-weight:500}
.set-basis__btn.on{border-color:var(--accent,#F47920);background:rgba(244,121,32,.1);color:var(--app-fg-1)}
.set-basis__btn.on i{color:var(--accent,#F47920)}
.set-basis__hint{margin-left:auto;font-size:11px;color:var(--app-fg-4)}
.set-bq .set-kpis{margin-bottom:22px}
.set-bq > .card{margin-bottom:22px}
.set-bq .card-head h4{display:flex;align-items:center;gap:9px}
.set-bq .card-head h4::before{content:"";width:4px;height:15px;border-radius:3px;background:var(--accent,#F47920);flex:none}
.set-bq .set-twocol{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;margin-bottom:22px}
.set-bq .set-twocol > .card{display:flex;flex-direction:column}
.set-pos{color:#4ade80}.set-neg{color:#f87171}
.agency-kpi__value.set-neg{color:#f87171}
/* funnel (embudo) */
.set-funnel{display:flex;flex-direction:column;gap:7px;padding:8px 2px;flex:1}
.set-funnel__row{display:grid;grid-template-columns:188px 1fr;align-items:center;gap:14px}
.set-funnel__meta{display:flex;flex-direction:column;line-height:1.2;text-align:right}
.set-funnel__name{font-size:12.5px;font-weight:600;color:var(--app-fg-1)}
.set-funnel__name i{font-style:normal;font-size:10px;color:var(--app-fg-4);font-weight:500;display:block}
.set-funnel__ded{font-family:var(--mx-font-mono);font-size:11.5px;font-weight:600;margin-top:2px}
.set-funnel__zone{display:flex;justify-content:center;align-items:center}
.set-funnel__bar{height:30px;border-radius:6px;display:flex;align-items:center;justify-content:center;min-width:56px;transition:width .45s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 4px rgba(0,0,0,.28)}
.set-funnel__bar span{font-family:var(--mx-font-mono);font-size:12px;font-weight:700;color:#0b121c;padding:0 8px;white-space:nowrap}
.set-funnel__bar.top{background:#4ade80}
.set-funnel__bar.mid{background:linear-gradient(180deg,rgba(244,121,32,.9),rgba(244,121,32,.55))}
.set-funnel__bar.net{background:var(--accent,#F47920)}
.set-funnel__bar.net span{color:#fff;font-size:13px}
/* types */
.set-types{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:6px 2px}
.set-type{background:var(--app-tint-1);border:1px solid var(--app-tint-3);border-radius:10px;padding:13px 14px}
.set-type__t{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--app-fg-4);font-weight:700}
.set-type__v{font-size:18px;font-weight:780;font-variant-numeric:tabular-nums;margin-top:5px}
.set-type__n{font-size:10.5px;color:var(--app-fg-4);margin-top:3px}
.set-cogsnote{margin:14px 2px 2px;font-size:11.5px;color:#e6b450;background:rgba(230,180,80,.08);border:1px solid rgba(230,180,80,.25);border-radius:8px;padding:8px 11px}
/* table */
.set-bq .card.padless .card-head{padding:16px 18px 4px}
.set-bq .set-scroll{max-height:460px;overflow-y:auto;border-top:1px solid var(--app-border)}
.set-bq .set-scroll .tbl thead th{position:sticky;top:0;z-index:1;background:var(--app-surface)}
.set-bq .tbl.set-sortable th{cursor:pointer;user-select:none;white-space:nowrap}
.set-bq .tbl.set-sortable th:hover{color:var(--accent,#F47920)}
.set-bq .tbl tbody tr:hover{background:var(--app-row-hover)}
.set-bq .set-mono{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--app-fg-3)}
.set-bq td.mono,.set-bq .tbl td{font-variant-numeric:tabular-nums}
@media(max-width:900px){.set-bq .set-twocol{grid-template-columns:1fr}.set-bq .set-types{grid-template-columns:1fr}}

/* Estado de resultados (P&L) — readable income statement */
.set-bq .pnl-card{margin-bottom:22px}
.pnl-stmt{display:flex;flex-direction:column;padding:4px 2px 2px}
.pnl-row{display:grid;grid-template-columns:248px 1fr 130px 64px;align-items:center;gap:16px;padding:9px 6px;border-bottom:1px solid var(--app-tint-2)}
.pnl-row:last-child{border-bottom:none}
.pnl-name{display:flex;flex-direction:column;line-height:1.25}
.pnl-name > span{font-size:13px;color:var(--app-fg-2);font-weight:500}
.pnl-name i{font-style:normal;font-size:10.5px;color:var(--app-fg-4);font-weight:500;margin-top:1px}
.pnl-bar{height:13px;background:var(--app-tint-2);border-radius:4px;overflow:hidden;position:relative}
.pnl-barfill{position:absolute;left:0;top:0;height:100%;border-radius:4px;transition:width .5s cubic-bezier(.4,0,.2,1)}
.pnl-barfill.g{background:#4ade80}
.pnl-barfill.p{background:#4ade80;opacity:.7}
.pnl-barfill.n{background:#f87171;opacity:.85}
.pnl-amt{font-family:var(--mx-font-mono);font-size:13px;font-weight:600;text-align:right;color:var(--app-fg-2);font-variant-numeric:tabular-nums}
.pnl-pct{font-family:var(--mx-font-mono);font-size:11.5px;text-align:right;color:var(--app-fg-4);font-variant-numeric:tabular-nums}
.pnl-muted{color:var(--app-fg-4);font-style:italic;font-weight:500}
/* gross row — anchor */
.pnl-row--gross{border-bottom:2px solid var(--app-border);padding-bottom:11px}
.pnl-row--gross .pnl-name > span{font-size:14px;font-weight:700;color:var(--app-fg-1)}
.pnl-row--gross .pnl-amt{font-size:15px;font-weight:700;color:var(--app-fg-1)}
/* subtotal rows */
.pnl-row--sub{border-top:1px solid var(--app-border);border-bottom:1px solid var(--app-border);background:var(--app-tint-1)}
.pnl-row--sub .pnl-name > span{font-weight:700;color:var(--app-fg-1)}
.pnl-row--sub .pnl-amt{font-size:13.5px;font-weight:700;color:var(--app-fg-1)}
/* utilidad neta — the total */
.pnl-row--total{margin-top:6px;border:1px solid rgba(244,121,32,.35);border-radius:10px;background:linear-gradient(135deg,rgba(244,121,32,.14),rgba(244,121,32,.03));padding:13px 14px}
.pnl-row--total .pnl-name > span{font-size:15px;font-weight:800;color:#F47920}
.pnl-row--total .pnl-name i{color:rgba(244,121,32,.7)}
.pnl-row--total .pnl-amt{font-size:18px;font-weight:800;color:#F47920}
.pnl-row--total .pnl-pct{font-size:13px;font-weight:700;color:#F47920}
@media(max-width:760px){.pnl-row{grid-template-columns:1fr 96px 52px;gap:10px}.pnl-bar{display:none}}