@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);
  /* Estos cuatro tokens estaban definidos como sí mismos (--app-fg-3: var(--app-fg-3)).
     Un ciclo así es inválido en CSS: la propiedad cae a heredada, así que el texto
     "apagado" salía con la tinta del contenedor — oscuro sobre oscuro en el tema
     nocturno. Valores reales, respetando la escala de opacidad. */
  --app-fg-3:        rgba(255,255,255,.52);
  --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: rgba(255,255,255,.045);
  --app-tint-3: rgba(255,255,255,.07);
  --app-tint-4: rgba(255,255,255,.10);
  --app-tint-5: rgba(255,255,255,.14);
  --app-tint-6: rgba(255,255,255,.18);
  /* Density vars (default = comfortable) */
  --d-pad-y:        14px;
  --d-pad-x:        24px;
  /* Shared header height so the sidebar logo block and the topbar line up into
     one continuous divider (no seam/gap in the top-left corner). Derived from
     pad-y so it tracks each density automatically. */
  --header-h:       calc(var(--d-pad-y) * 2 + 44px);
  --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: 40px;
  width: 40px;
  margin: 0 auto;
  object-fit: contain;
  background: transparent;
}
.app.is-sidebar-collapsed .sidebar-brand {
  flex-direction: column;
  gap: 8px;
  /* Height comes from the shared --header-h on the base rule; keep padding
     symmetric so the mini logo centers and the block lines up with the topbar. */
  padding: 0 4px;
  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;
  /* Above the sticky page-header (z-index 90) so the sidebar sits ON TOP in
     every section — including its full logo when the rail expands. Below the
     app's modals/overlays (z-index 9000). */
  z-index: 95;
  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: 0 16px;
  height: var(--header-h);
  box-sizing: border-box;
  flex-shrink: 0;
  /* Same color + height as the topbar's bottom border so the two form one
     continuous divider line across the app — fills the top-left corner seam. */
  border-bottom: 1px solid var(--app-border-soft);
}

/* 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;
  /* Sticky top bar. Sidebar (rail, z-index 95) sits ABOVE this on purpose, so
     the header stays below the sidebar in every section. */
  z-index: 90;
  /* SOLID surface-2 (same as the sidebar) — a translucent header left a visible
     seam at the sidebar edge (the "hueco" in the top-left). Solid = the top bar
     runs continuous into the sidebar, no gap. */
  background: var(--app-surface-2);
}

.topbar {
  border-bottom: 1px solid var(--app-border-soft);
  padding: var(--d-pad-y) var(--d-pad-x);
  min-height: var(--header-h);
  box-sizing: border-box;
  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-name--sc { display: flex; align-items: center; gap: 8px; }
.sales-context-brand .brand-name__link {
  all: unset; cursor: pointer; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit;
  display: inline-flex; align-items: baseline; gap: 6px;
  border-bottom: 2px solid transparent; transition: color .12s, border-color .12s;
}
.sales-context-brand .brand-name__link:hover { color: var(--mx-orange, #F47920); border-bottom-color: var(--mx-orange, #F47920); }
.sales-context-brand .brand-name__ext { font-size: 14px; color: var(--app-fg-4); transform: translateY(-2px); }
.sales-context-brand .brand-name__link:hover .brand-name__ext { color: var(--mx-orange, #F47920); }
.sales-context-brand .brand-name__edit {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px; color: var(--app-fg-4); opacity: 0; transition: opacity .12s, background .12s;
}
.sales-context-brand:hover .brand-name__edit { opacity: 1; }
.sales-context-brand .brand-name__edit:hover { background: var(--app-tint-3); color: var(--app-fg-1); }

/* Seller Central link editor */
.sc-link-modal__kicker { font-family: var(--mx-font-display); font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--mx-orange, #F47920); }
.sc-link-modal__title { font-family: var(--mx-font-display); font-size: 20px; font-weight: 800; text-transform: uppercase; color: var(--app-fg-1); margin-top: 2px; }
.sc-link-modal__body p { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--app-fg-2); }
.sc-link-modal__input {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 8px; font-size: 12.5px; font-family: var(--mx-font-mono, ui-monospace, monospace);
  background: var(--app-bg-3); border: 1px solid var(--app-line-2); color: var(--app-fg-1); outline: none;
}
.sc-link-modal__input:focus { border-color: var(--mx-orange, #F47920); }
.sc-link-modal__msg { margin-top: 10px; font-size: 12px; line-height: 1.45; color: var(--app-fg-3); display: flex; gap: 6px; align-items: flex-start; }
.sc-link-modal__msg code { font-size: 11px; background: var(--app-tint-3); padding: 0 4px; border-radius: 4px; }
.sc-link-modal__msg.is-ok { color: #22c55e; }
.sc-link-modal__msg.is-bad { color: #f87171; }
.sc-link-modal__actions { display: flex; align-items: center; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--app-line-1); }
.sc-link-modal__remove { color: #f87171; }

/* Brand search palette (header magnifier / ⌘K) */
.palette-overlay { padding-top: 12vh; }
.palette {
  width: min(560px, 92vw); background: var(--app-bg-2); border: 1px solid var(--app-line-2); border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0,0,0,.55); overflow: hidden;
}
.palette__input { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--app-line-1); color: var(--app-fg-3); }
.palette__input input { flex: 1; background: transparent; border: 0; outline: none; color: var(--app-fg-1); font-size: 16px; font-family: inherit; }
.palette kbd { font-family: inherit; font-size: 10px; padding: 2px 6px; border-radius: 5px; background: var(--app-tint-3); color: var(--app-fg-3); border: 1px solid var(--app-line-1); }
.palette__list { max-height: 52vh; overflow-y: auto; padding: 6px; }
.palette__row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 9px; cursor: pointer; }
.palette__row.is-active { background: rgba(244,121,32,.14); }
.palette__name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.palette__name > span:first-child { font-size: 14px; font-weight: 700; color: var(--app-fg-1); }
.palette__meta { font-size: 11px; color: var(--app-fg-3); margin-top: 2px; }
.palette__sc { font-family: var(--mx-font-display); font-size: 9.5px; font-weight: 800; letter-spacing: 1px; padding: 2px 6px; border-radius: 5px; color: var(--mx-orange, #F47920); border: 1px solid rgba(244,121,32,.45); }
.palette__row .markets { display: flex; gap: 4px; }
.palette__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; }
.palette__empty { padding: 22px 14px; text-align: center; color: var(--app-fg-3); font-size: 13px; }
.palette__hint { display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-top: 1px solid var(--app-line-1); font-size: 11px; color: var(--app-fg-4); }

.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); }
}

/* Variante con calendario de promociones: la tira deja de ser una rejilla de
   dos columnas y pasa a ser dos renglones — contexto arriba, calendario abajo. */
.sales-context--cal { display: block; padding: 0; }
.sales-context--cal .sales-context__top {
  display: grid; grid-template-columns: 1fr auto; gap: 32px;
  align-items: center; padding: 16px 20px;
}
@media (max-width: 1080px) {
  .sales-context--cal .sales-context__top { grid-template-columns: 1fr; gap: 16px; }
}

/* ── Calendario de promociones (window.MexusPromoCalendar) ────────── */
/* En :root y no en .mxpc porque el overlay se monta en un portal fuera del
   componente y ahí no heredaría nada. */
body { --mxpc-us: #4B9BFF; --mxpc-dl: #FF5A5F; }
body[data-theme="light"] { --mxpc-us: #2F7FE0; --mxpc-dl: #D6353A; }
.mxpc { border-top: 1px solid rgba(244,121,32,.18); }
.mxpc.open { background: var(--app-surface); border-radius: 0 0 9px 9px; }

/* — tubo — */
.mxpc-tube {
  display: flex; align-items: center; height: 38px; padding: 0 8px 0 16px;
  cursor: pointer; user-select: none; overflow: hidden; white-space: nowrap;
}
.mxpc-tube:hover { background: rgba(244,121,32,.06); }
.mxpc-ico { font-size: 13px; margin-right: 9px; opacity: .9; }
.mxpc-lab {
  font-family: var(--mx-font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--mx-orange); margin-right: 12px;
}
.mxpc-flag { font-size: 11px; color: var(--app-fg-3); margin-right: 12px; }
.mxpc-flag em { font-style: normal; color: var(--mxpc-dl); font-size: 10.5px; }
.mxpc-vr { width: 1px; height: 17px; background: var(--app-tint-4); margin-right: 12px; flex: none; }
.mxpc-nx {
  display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--app-fg-2);
  margin-right: 14px; min-width: 0; background: none; border: 0; padding: 0;
  font-family: inherit; cursor: pointer;
}
.mxpc-nx .mxpc-dot { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.mxpc-nx b { color: var(--app-fg-1); font-weight: 600; }
.mxpc-nx .d { color: var(--app-fg-4); font-size: 11.5px; }
.mxpc-nx.soon b { color: var(--mx-orange); }
.mxpc-nx:hover b { text-decoration: underline; }
.mxpc-grow { flex: 1; min-width: 10px; }
.mxpc-warn {
  display: inline-flex; align-items: center; gap: 7px; background: rgba(255,90,95,.13);
  border: 1px solid rgba(255,90,95,.3); color: var(--mxpc-dl); border-radius: 7px;
  padding: 4px 10px; font-size: 11.5px; font-weight: 600; margin-right: 12px;
  flex: none; cursor: pointer; font-family: inherit;
}
.mxpc-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--mxpc-dl); animation: mxpcPulse 1.6s ease-in-out infinite; }
@keyframes mxpcPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
.mxpc-exp {
  background: transparent; border: 0; color: var(--app-fg-3); cursor: pointer;
  font-size: 11.5px; padding: 5px 9px; border-radius: 7px; font-family: inherit; flex: none;
}
.mxpc-exp:hover { background: var(--app-tint-2); color: var(--app-fg-1); }

/* — cabecera expandida — */
.mxpc-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px 11px; border-bottom: 1px solid var(--app-border); }
.mxpc-head h4 {
  margin: 0; font-family: var(--mx-font-display); font-size: 17px;
  letter-spacing: .5px; text-transform: uppercase;
  /* el h4 global de tokens.css trae tinta para fondo claro */
  color: var(--app-fg-1);
}
.mxpc-head .sub { font-size: 11.5px; color: var(--app-fg-4); }
.mxpc-cawarn { font-style: normal; color: var(--mxpc-dl); }
.mxpc-head .sp { flex: 1; }
.mxpc-seg { display: inline-flex; border: 1px solid var(--app-border); border-radius: 8px; overflow: hidden; }
.mxpc-seg button {
  background: transparent; border: 0; border-right: 1px solid var(--app-border);
  color: var(--app-fg-3); font-size: 11.5px; padding: 6px 11px; cursor: pointer; font-family: inherit;
}
.mxpc-seg button:last-child { border-right: 0; }
.mxpc-seg button.on { background: var(--app-tint-3); color: var(--app-fg-1); font-weight: 600; }

/* — barras (compartidas por 120 días y 12 meses) — */
.mxpc-bar {
  position: absolute; top: 3px; height: 20px; border-radius: 5px; display: flex;
  align-items: center; padding: 0 8px; font-size: 11px; font-weight: 600; color: #fff;
  white-space: nowrap; cursor: pointer; border: 0; font-family: inherit; z-index: 1;
}
.mxpc-bar.b3 { top: 5px; height: 19px; font-size: 10.5px; padding: 0 7px; }
.mxpc-bar:hover { filter: brightness(1.1); }
.mxpc-bar.mx { background: var(--mx-orange); }
.mxpc-bar.us { background: var(--mxpc-us); }
/* Los eventos clave pesan más que el país: rojo en ambos calendarios. */
.mxpc-bar.key { background: var(--mxpc-dl); }
.mxpc-bar.key .mxpc-out { color: var(--mxpc-dl); }
.mxpc-row .rn.key { color: var(--mxpc-dl); font-weight: 600; }
.mxpc-legend .sw.key { background: var(--mxpc-dl); }
.mxpc-bar.t2 { opacity: .8; }
.mxpc-bar.t3 { opacity: .6; }
/* Sobre crema, bajar la opacidad deja texto blanco sobre naranja pastel. */
body[data-theme="light"] .mxpc-bar.t2 { opacity: .92; }
body[data-theme="light"] .mxpc-bar.t3 { opacity: .82; }
.mxpc-out {
  position: absolute; left: calc(100% + 8px); color: var(--app-fg-2);
  font-weight: 600; white-space: nowrap; pointer-events: none;
}
.mxpc-bar.flip .mxpc-out, .mxpc-d3.flip .mxpc-out { left: auto; right: calc(100% + 8px); }
.mxpc-d3 .mxpc-out { top: 50%; transform: translateY(-50%) rotate(-45deg); transform-origin: left center; }
.mxpc-d3.flip .mxpc-out { transform-origin: right center; }

/* — 120 días — */
.mxpc-rail { padding: 14px 16px 6px; position: relative; }
.mxpc-axis { position: relative; height: 20px; margin-bottom: 6px; }
.mxpc-axis .m {
  position: absolute; top: 0; font-size: 10px; color: var(--app-fg-4);
  letter-spacing: .4px; text-transform: uppercase; transform: translateX(2px);
}
.mxpc-lane { position: relative; height: 26px; margin-bottom: 5px; }
.mxpc-lane .g { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--app-tint-3); }
.mxpc-empty { font-size: 12px; color: var(--app-fg-4); padding: 8px 0; margin: 0; }
.mxpc-dlrow { position: relative; height: 72px; margin-top: 10px; border-top: 1px dashed var(--app-tint-4); padding-top: 2px; }
.mxpc-dlrow .cap {
  position: absolute; left: 0; top: 6px; font-size: 10px; letter-spacing: .6px;
  text-transform: uppercase; color: var(--mxpc-dl); font-weight: 700;
}
.mxpc-dmark {
  position: absolute; top: 14px; transform: translateX(-50%); display: flex;
  flex-direction: column; align-items: center; cursor: pointer; background: transparent;
  border: 0; font-family: inherit; padding: 0;
}
.mxpc-dmark.right { transform: none; align-items: flex-end; }
.mxpc-dmark.right .mxpc-di { margin-right: -5px; }
.mxpc-di { width: 11px; height: 11px; background: var(--mxpc-dl); transform: rotate(45deg); border-radius: 2px; }
.mxpc-dmark .dt { margin-top: 5px; font-size: 10.5px; color: var(--mxpc-dl); white-space: nowrap; font-weight: 600; }
.mxpc-dmark.lv1 .dt { margin-top: 19px; }
.mxpc-dmark.lv1 .mxpc-di { box-shadow: 0 14px 0 -5px var(--mxpc-dl); }
.mxpc-dmark.lv2 .dt { margin-top: 33px; }
.mxpc-dmark.lv2 .mxpc-di { box-shadow: 0 28px 0 -5px var(--mxpc-dl); }
.mxpc-dmark:hover .mxpc-di { box-shadow: 0 0 0 4px rgba(255,90,95,.2); }
.mxpc-lk { position: absolute; pointer-events: none; opacity: .5; z-index: 0; }
.mxpc-lk.v { border-left: 1px dashed var(--mxpc-dl); width: 0; }
.mxpc-lk.h { border-top: 1px dashed var(--mxpc-dl); height: 0; }
.mxpc-today { position: absolute; top: 20px; bottom: 0; width: 2px; background: var(--mxpc-dl); z-index: 2; pointer-events: none; }
.mxpc-today::before {
  content: "HOY"; position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--mxpc-dl); color: #fff; font-size: 8.5px; font-weight: 700;
  padding: 1px 4px; border-radius: 3px; letter-spacing: .5px;
}

/* — 12 meses — */
.mxpc-full { max-height: 56vh; overflow-y: auto; }
.mxpc-months { display: grid; position: sticky; top: 0; background: var(--app-surface); z-index: 3; border-bottom: 1px solid var(--app-border); }
.mxpc-months div {
  padding: 9px 4px; text-align: center; font-size: 11px; color: var(--app-fg-3);
  font-weight: 600; border-left: 1px solid var(--app-border); text-transform: capitalize;
}
.mxpc-months div:first-child {
  border-left: 0; text-align: left; padding-left: 16px; font-size: 10px;
  letter-spacing: .6px; text-transform: uppercase; color: var(--app-fg-4);
}
.mxpc-months div span { display: block; font-size: 9px; color: var(--app-fg-4); font-weight: 500; }
.mxpc-grp {
  display: flex; align-items: center; gap: 8px; padding: 7px 16px; background: var(--app-tint-1);
  border-top: 1px solid var(--app-border); border-bottom: 1px solid var(--app-border);
  font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--app-fg-2);
}
.mxpc-grp span { font-weight: 500; color: var(--app-fg-4); letter-spacing: 0; text-transform: none; }
.mxpc-row { display: grid; height: 29px; border-bottom: 1px solid var(--app-tint-1); }
.mxpc-row .rn {
  display: flex; align-items: center; padding: 0 10px 0 16px; font-size: 11.5px;
  color: var(--app-fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-right: 1px solid var(--app-border);
}
.mxpc-row.dl .rn { color: var(--mxpc-dl); }
.mxpc-row .rt { position: relative; }
.mxpc-row .tk { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--app-border); opacity: .35; }
.mxpc-row .tk.wk, .mxpc-lane .g.wk {
  opacity: 1; background: var(--app-border); mask-image: repeating-linear-gradient(180deg, #000 0 3px, transparent 3px 7px);
}
.mxpc-wk {
  display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 4px;
  text-decoration: none; border-top: 1px solid var(--app-border);
}
.mxpc-wk b {
  font-size: 8px; font-weight: 500; color: var(--app-fg-4); line-height: 1.6;
  border-left: 1px solid var(--app-border);
}
.mxpc-wk b:first-child { border-left: 0; }
.mxpc-d3 {
  position: absolute; top: 50%; transform: translate(-50%,-50%) rotate(45deg); width: 10px;
  height: 10px; background: var(--mxpc-dl); border-radius: 2px; cursor: pointer; border: 0; padding: 0;
}
.mxpc-d3 .mxpc-out { color: var(--mxpc-dl); font-size: 10.5px; }

/* — overlay a pantalla casi completa — */
.mxpc-ovl {
  position: fixed; inset: 0; z-index: 900; display: flex; align-items: center;
  justify-content: center; padding: 2vh 2vw;
  background: rgba(0,0,0,.62); backdrop-filter: blur(3px);
  animation: mxpcFade .14s ease;
}
@keyframes mxpcFade { from { opacity: 0; } to { opacity: 1; } }
.mxpc-modal {
  width: 96vw; max-width: 1800px; height: 92vh; display: flex; flex-direction: column;
  background: var(--app-bg); border: 1px solid var(--app-border); border-radius: 16px;
  overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,.55);
}
.mxpc-banner {
  display: flex; align-items: center; gap: 20px; padding: 18px 22px; position: relative;
  background: linear-gradient(103deg, #1A1A1A 0%, #2A2320 48%, #4A2B10 100%);
  color: #fff; flex: none;
}
.mxpc-banner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(640px 180px at 88% -30%, rgba(244,121,32,.42), transparent 70%);
}
.mxpc-banner > * { position: relative; z-index: 1; }
.mxpc-banner img { height: 32px; width: auto; }
.mxpc-banner .bar { width: 1px; height: 36px; background: rgba(255,255,255,.18); }
.mxpc-banner .txt { min-width: 200px; }
.mxpc-banner h3 {
  margin: 0; font-family: var(--mx-font-display); font-size: 22px; color: #fff;
  letter-spacing: .5px; text-transform: uppercase; line-height: 1.1;
}
.mxpc-banner p { margin: 3px 0 0; font-size: 12.5px; color: rgba(255,255,255,.68); }
.mxpc-banner .sp { flex: 1; }
.mxpc-bchip {
  font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.86); white-space: nowrap;
}
.mxpc-close {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08); color: #fff; font-size: 19px; line-height: 1;
  cursor: pointer; flex: none;
}
.mxpc-close:hover { background: rgba(255,255,255,.18); }

.mxpc-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex: none;
  padding: 12px 22px; border-bottom: 1px solid var(--app-border); background: var(--app-surface);
}
.mxpc-tgl {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px;
  color: var(--app-fg-2); cursor: pointer; border: 1px solid var(--app-border);
  border-radius: 9px; padding: 6px 12px;
}
.mxpc-tgl input { accent-color: var(--mx-orange); margin: 0; cursor: pointer; }
.mxpc-legend {
  margin-left: auto; display: flex; gap: 15px; align-items: center;
  font-size: 11.5px; color: var(--app-fg-3); flex-wrap: wrap;
}
.mxpc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mxpc-legend .sw { width: 22px; height: 9px; border-radius: 3px; display: inline-block; }
.mxpc-legend .sw.mx { background: var(--mx-orange); }
.mxpc-legend .sw.us { background: var(--mxpc-us); }
.mxpc-legend .sw.t2 { background: var(--mx-orange); opacity: .55; }
.mxpc-legend .sw.dot { width: 9px; height: 9px; border-radius: 2px; background: var(--mxpc-dl); transform: rotate(45deg); }

.mxpc-cabar {
  margin: 0; flex: none; padding: 9px 22px; font-size: 12px; color: var(--mxpc-dl);
  background: rgba(255,90,95,.08); border-bottom: 1px solid var(--app-border);
}
.mxpc-modalbody { flex: 1; min-height: 0; overflow: auto; }
.mxpc-modal .mxpc-full { max-height: none; overflow: visible; }
.mxpc-modal .mxpc-months { background: var(--app-bg); }
.mxpc-modal .mxpc-rail { padding: 20px 24px 10px; }
.mxpc-modal .mxpc-det { flex: none; max-height: 32vh; overflow: auto; background: var(--app-surface); }

/* — detalle — */
.mxpc-det { border-top: 1px solid var(--app-border); padding: 14px 16px; background: var(--app-tint-1); }
.mxpc-det h5 { margin: 0 0 3px; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mxpc-tg { font-size: 9.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; }
.mxpc-tg.mx { background: var(--mx-orange-soft); color: var(--mx-orange); }
.mxpc-tg.us { background: rgba(75,155,255,.16); color: var(--mxpc-us); }
.mxpc-tg.est { background: rgba(255,90,95,.14); color: var(--mxpc-dl); }
.mxpc-x { margin-left: auto; background: none; border: 0; color: var(--app-fg-4); font-size: 17px; cursor: pointer; line-height: 1; padding: 0 4px; }
.mxpc-x:hover { color: var(--app-fg-1); }
.mxpc-det .w { font-size: 11.5px; color: var(--app-fg-4); margin: 0 0 11px; }
.mxpc-det .cc { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { .mxpc-det .cc { grid-template-columns: 1fr; } }
.mxpc-det h6 { margin: 0 0 5px; font-size: 10px; letter-spacing: .6px; text-transform: uppercase; color: var(--app-fg-4); font-weight: 700; }
.mxpc-det p, .mxpc-det li { font-size: 12.5px; color: var(--app-fg-2); margin: 0; }
.mxpc-det ul { margin: 0; padding-left: 16px; }
.mxpc-det li { margin-bottom: 4px; }
.mxpc-det li::marker { color: var(--mx-orange); }

.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); }
/* Click-to-open weekly-trend icon on KPIs that have a weekly series. */
.kpi-trend-btn { margin-left: auto; align-self: center; background: transparent; border: none; color: var(--app-fg-4); cursor: pointer; padding: 2px; border-radius: 5px; display: inline-flex; opacity: 0; transition: opacity .15s, color .15s, background .15s; }
.kpi:hover .kpi-trend-btn { opacity: .65; }
.kpi-trend-btn:hover { color: var(--mx-orange); opacity: 1 !important; background: var(--app-tint-2); }
.kpi-trend-summary { display: flex; gap: 24px; margin-bottom: 12px; }
.kpi-trend-summary .l { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--app-fg-4); margin-bottom: 2px; }
.kpi-trend-summary .v { font-family: var(--mx-font-mono); font-weight: 700; font-size: 15px; color: var(--app-fg-1); }
.kpi-trend-summary .v.pos { color: #22c55e; } .kpi-trend-summary .v.neg { color: #ef4444; }
/* Weekly fluctuation table under the trend chart. */
.kpi-trend-tbl-wrap { margin-top: 16px; max-height: 240px; overflow-y: auto; border: 1px solid var(--app-border); border-radius: 8px; }
.kpi-trend-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.kpi-trend-tbl th { position: sticky; top: 0; background: var(--app-tint-1); color: var(--app-fg-3); text-transform: uppercase; font-size: 10px; letter-spacing: .05em; font-weight: 700; text-align: left; padding: 8px 14px; border-bottom: 1px solid var(--app-border); }
.kpi-trend-tbl th.num, .kpi-trend-tbl td.num { text-align: right; font-family: var(--mx-font-mono); font-variant-numeric: tabular-nums; }
.kpi-trend-tbl td { padding: 7px 14px; border-bottom: 1px solid var(--app-border-soft); color: var(--app-fg-1); }
.kpi-trend-tbl tr:last-child td { border-bottom: none; }
.kpi-trend-tbl td.pos { color: #22c55e; } .kpi-trend-tbl td.neg { color: #ef4444; }
.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;
}
/* El ASIN del renglón es el enlace al listado en Amazon. La flechita avisa que
   sale de la plataforma; el clic no debe disparar el desplegable de la familia. */
.sku-id-link{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor;cursor:pointer}
.sku-id-link:hover{color:#F47920;border-bottom-color:#F47920}
.sku-id-ext{font-size:9px;margin-left:3px;opacity:.7;border:none}
.sku-id-link:hover .sku-id-ext{opacity:1}
.sku-id-code {
  font-family: var(--mx-font-mono);
  font-size: 10.5px;
  color: var(--app-fg-2);
  letter-spacing: 0.2px;
}
/* Clickable ASIN → Amazon listing. Underline on hover so it reads as a link. */
a.sku-id-code--link {
  color: #F47920;
  text-decoration: none;
  cursor: pointer;
}
a.sku-id-code--link:hover { text-decoration: underline; }
.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 */
/* Editable product thumbnail — click to override the photo from the feed */
.thumb-edit {
  position: relative;
  display: inline-block;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 6px;
}
.thumb-edit__pencil {
  position: absolute;
  right: -3px; bottom: -3px;
  width: 15px; height: 15px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #F47920;
  color: #fff;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .12s, transform .12s;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  pointer-events: none;
}
.thumb-edit:hover .thumb-edit__pencil { opacity: 1; transform: scale(1); }
.thumb-edit:hover { box-shadow: 0 0 0 2px rgba(244,121,32,.55); }

.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);
}
/* Discounts live on the selected day (band under the daily chart) */
.daily-promo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: -2px 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--app-tint-3);
}
.daily-promo__row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11.5px;
  line-height: 1.45;
}
.daily-promo__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  transform: translateY(-1px);
}
.daily-promo__tag {
  font-family: var(--mx-font-mono);
  font-weight: 700;
  color: var(--app-fg-1);
}
.daily-promo__title { color: var(--app-fg-2); font-weight: 600; }
.daily-promo__meta { color: var(--app-fg-4); flex-basis: 100%; padding-left: 15px; }
.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,
.fba-settings__field select {
  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;
}
/* La lista desplegable la pinta el sistema, no el panel: hay que darle tinta
   por TEMA o en claro sale texto claro sobre fondo claro. */
.fba-settings__field select option { background: var(--app-surface); color: var(--app-fg-1); }
.fba-settings__field input:focus,
.fba-settings__field select:focus { border-color: rgba(244,121,32,.5); }
.fba-settings__hint {
  font-size: 10.5px;
  color: var(--app-fg-3);
  line-height: 1.4;
}
/* Textarea: mismo trato que input/select del panel. */
.fba-settings__field textarea {
  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: 13px;
  line-height: 1.45;
  resize: vertical;
  outline: none;
}
.fba-settings__field textarea:focus { border-color: rgba(244,121,32,.5); }
/* Campos de texto largo ocupan la reja completa. */
.fba-settings__field--wide { grid-column: 1 / -1; }

/* Procedencia del dato: estimado por nosotros ≠ confirmado por el cliente.
   Va en el resumen del panel para que se lea sin abrirlo. */
.fba-src {
  margin-left: auto;
  flex: none;
  font-family: var(--mx-font-display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .9px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 5px;
  white-space: nowrap;
}
.fba-src--declarado { background: rgba(34,197,94,.14); color: #4ADE80; }
.fba-src--estimado  { background: rgba(244,121,32,.15); color: #F9A05C; }
.fba-src--default   { background: var(--app-tint-2);    color: var(--app-fg-3); }

/* Alcance marca / mercado. Ocupa la reja completa y va arriba de los campos. */
.fba-settings__scope {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--app-tint-1);
  border: 1px solid var(--app-tint-3);
  border-radius: 8px;
}
.fba-settings__scope > 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__scope .fba-settings__hint { flex: 1 1 240px; min-width: 0; }
.fba-settings__clear {
  background: transparent;
  border: 1px solid var(--app-tint-4);
  border-radius: 6px;
  color: var(--app-fg-3);
  font-size: 11px;
  padding: 5px 10px;
  cursor: pointer;
}
.fba-settings__clear:hover { border-color: rgba(239,68,68,.5); color: #F87171; }

/* Aviso de cobertura corregida: el número que se usó no es el que se capturó,
   y el cliente lo va a notar al comparar. Mejor decirlo aquí. */
.fba-settings__adj {
  margin-top: 8px;
  padding: 9px 13px;
  border-radius: 8px;
  border-left: 3px solid rgba(244,121,32,.6);
  background: rgba(244,121,32,.08);
  color: var(--app-fg-2);
  font-size: 11.5px;
  line-height: 1.5;
}
.fba-settings__adj--bad {
  border-left-color: rgba(239,68,68,.7);
  background: rgba(239,68,68,.09);
}

/* 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); }

/* ── FBA Replenish · timeline de agotamiento ────────────────────── */
.fba-tl { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 14px; overflow: hidden; }
.fba-tl__legend { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; margin: 2px 0 14px; font-size: 11.5px; color: var(--app-fg-3); }
.fba-tl__legend i { width: 18px; height: 5px; border-radius: 3px; display: inline-block; margin-right: 6px; vertical-align: middle; }
.fba-tl__legend i.ring { width: 11px; height: 11px; border-radius: 50%; background: var(--app-surface); border: 2.5px solid #F47920; }
.fba-tl__legend i.zone { width: 16px; height: 11px; border-radius: 3px; }

/* shared column template: label | cover | rail | action */
.fba-tl__axis,
.fba-tl__row { display: grid; grid-template-columns: 250px 58px 1fr 156px; gap: 16px; align-items: center; }
.fba-tl__axis { padding: 12px 18px; border-bottom: 1px solid var(--app-border); font-size: 9.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--app-fg-4); font-family: var(--mx-font-mono); }
.fba-tl__scale { position: relative; height: 12px; }
.fba-tl__scale span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.fba-tl__scale span.l { transform: none; left: 0 !important; }
.fba-tl__scale span.r { transform: none; right: 0; left: auto !important; }

.fba-tl__row { padding: 13px 18px 13px 15px; border-left: 3px solid transparent; border-bottom: 1px solid var(--app-border-soft); transition: background .12s; }
.fba-tl__row:last-child { border-bottom: none; }
.fba-tl__row:hover { background: var(--app-row-hover); }
.fba-tl__row.is-approved { background: rgba(34,197,94,.06); }

.fba-tl__lab-t { font-size: 12.5px; font-weight: 600; color: var(--app-fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fba-tl__lab-s { font-family: var(--mx-font-mono); font-size: 10.5px; color: var(--app-fg-4); margin-top: 3px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.fba-tl__badge { font-size: 8.5px; font-weight: 700; letter-spacing: .4px; padding: 1px 5px; border-radius: 4px; }

.fba-tl__cover { text-align: right; font-family: var(--mx-font-mono); line-height: 1.05; }
.fba-tl__cover b { font-size: 15px; font-weight: 700; }
.fba-tl__cover span { display: block; font-size: 8px; color: var(--app-fg-4); margin-top: 2px; letter-spacing: .2px; }

.fba-tl__rail { position: relative; height: 8px; border-radius: 6px; background: var(--app-tint-3); }
.fba-tl__zone { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 6px 0 0 6px; background: rgba(239,68,68,.10); }
.fba-tl__fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 6px; min-width: 5px; box-shadow: 0 0 0 1px rgba(0,0,0,.04); }
.fba-tl__reorder { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 2px; background: var(--app-fg-3); opacity: .45; }
.fba-tl__eta { position: absolute; top: 50%; transform: translate(-50%,-50%); width: 12px; height: 12px; border-radius: 50%; background: var(--app-surface); border: 2.5px solid #F47920; box-shadow: 0 1px 4px rgba(0,0,0,.35); }

.fba-tl__act { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.fba-tl__qty { width: 62px; padding: 6px 8px; font-family: var(--mx-font-mono); font-size: 13px; font-weight: 700; text-align: right; color: var(--app-fg-1); background: var(--app-tint-1); border: 1px solid var(--app-border); border-radius: 7px; }
.fba-tl__qty:focus { outline: none; border-color: #F47920; background: rgba(244,121,32,.08); }
.fba-tl__u { font-size: 10px; color: var(--app-fg-4); }
.fba-tl__ck { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--app-border); background: var(--app-tint-1); cursor: pointer; color: var(--app-fg-4); transition: .12s; }
.fba-tl__ck:hover { border-color: #22c55e; color: #22c55e; }
.fba-tl__ck.on { background: #22c55e; border-color: #22c55e; color: #fff; }
.fba-tl__muted { font-size: 11px; color: var(--app-fg-4); font-weight: 600; }
.fba-tl__more { width: 100%; text-align: center; padding: 12px; background: var(--app-surface-2); border: none; border-top: 1px solid var(--app-border-soft); color: var(--app-fg-3); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.fba-tl__more:hover { background: var(--app-tint-2); color: var(--app-fg-1); }

/* ── 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--repeated { opacity: 0.55; border-style: dotted; border-color: rgba(96,165,250,.35); background: rgba(96,165,250,.05); }
.pending-card__badge--repeated { background: rgba(96,165,250,.16); color: #93c5fd; }
/* Bandeja (Ro 06/10): tasks of a meeting split into our side / brand side. */
.bandeja-block__head { display: flex; align-items: baseline; gap: 8px; margin: 10px 2px 4px; font-family: var(--mx-font-display); font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--app-fg-3); }
.bandeja-block__head:first-child { margin-top: 2px; }
.bandeja-block__count { font-family: var(--mx-font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0; color: var(--app-fg-4); }
.bandeja-block__hint { font-family: inherit; font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--app-fg-4); }
.bandeja-block__head--marca { margin-top: 16px; color: #eab308; }
.pending-card--marca { border: 1.5px solid rgba(234,179,8,.7); background: rgba(234,179,8,.06); }

.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-chip--cliente {
  background: rgba(244,121,32,.12);
  border-color: rgba(244,121,32,.45);
  color: #F47920;
  font-weight: 700;
}
.pending-chip--huerfana {
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.45);
  color: #fca5a5;
}
.pending-chip--kai {
  background: rgba(59,130,246,.12);
  border-color: rgba(59,130,246,.45);
  color: #93c5fd;
  font-weight: 700;
}
.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;
}
/* Three clearly-labeled action buttons (Aprobar · Editar · Descartar),
   equal width and stacked so each reads at a glance. */
.pending-card__btns {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 172px;
}
.pending-btn {
  justify-content: flex-start;
  gap: 7px;
  width: 100%;
}
.pending-btn--danger {
  color: #fca5a5;
  border-color: rgba(239,68,68,.30);
}
.pending-btn--danger:hover {
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.5);
  color: #fca5a5;
}

/* ── Bandeja tally bar: decided count + undo of the last 10 ─────────── */
.bandeja-undo {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px 11px 12px;
  background: var(--app-bg-2, #1a2433);
  border: 1px solid var(--app-tint-4);
  border-left: 3px solid #22c55e;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
  font-size: 13px;
  color: var(--app-fg-1);
  animation: bandeja-undo-in .18s ease-out;
}
.bandeja-undo--discard { border-left-color: #ef4444; }
@keyframes bandeja-undo-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.bandeja-undo__count { display: inline-flex; gap: 6px; flex-shrink: 0; }
.bandeja-undo__n {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 800;
  font-family: var(--mx-font-display, inherit);
}
.bandeja-undo__n--ok { background: rgba(34,197,94,.14); color: #4ade80; }
.bandeja-undo__n--no { background: rgba(239,68,68,.14); color: #f87171; }
.bandeja-undo__depth {
  min-width: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--app-tint-3); font-size: 11px; text-align: center;
}
.bandeja-undo__x {
  flex-shrink: 0; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 6px;
  background: transparent; border: 0; color: var(--app-fg-3); cursor: pointer;
}
.bandeja-undo__x:hover { background: var(--app-tint-2); color: var(--app-fg-1); }
.bandeja-undo__msg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; }
.bandeja-undo__title { color: var(--app-fg-3); }
.bandeja-undo__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: var(--app-tint-2);
  border: 1px solid var(--app-tint-4);
  border-radius: 7px;
  color: var(--app-fg-1);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.bandeja-undo__btn:hover {
  background: var(--app-tint-3);
  border-color: var(--app-fg-4);
}
.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); }
.task-row.is-brand-pending, .task-row.is-brand-pending:hover { border-color: rgba(234,179,8,.7); box-shadow: 0 0 0 1px rgba(234,179,8,.35); }

/* 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 (design "KAI en el centro") — navy scene echoing the KAI entrance:
   subtle grid + orange glow, KAI in an orange ring, centered borderless column.
   Committed dark regardless of app theme (see the light-theme opt-out above). */
.login-screen {
  position: fixed; inset: 0; z-index: 100; overflow: hidden;
  background: #0A111A;
  display: grid; place-items: center; padding: 24px;
}
.login-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(circle at 50% 42%, black, transparent 72%);
  mask-image: radial-gradient(circle at 50% 42%, black, transparent 72%);
}
.login-bg-glow {
  position: absolute; top: 4%; left: 50%; transform: translateX(-50%);
  width: 560px; height: 560px; pointer-events: none;
  background: radial-gradient(circle, rgba(244,121,32,.16), transparent 55%);
}
.login-card {
  position: relative; width: 100%; max-width: 340px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center;
  animation: loginIn .45s cubic-bezier(.16,1,.3,1);
}
@keyframes loginIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.login-kai { position: relative; width: 132px; height: 132px; display: grid; place-items: center; margin-bottom: 2px; }
.login-kai__aura {
  position: absolute; top: 50%; left: 50%; width: 114px; height: 114px; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(244,121,32,.30), transparent 70%);
  animation: loginBreathe 3s ease-in-out infinite;
}
.login-kai__ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.login-kai__fox {
  position: absolute; top: 50%; left: 50%; width: 96px; height: auto; transform: translate(-50%,-50%);
  animation: loginBreathe 3s ease-in-out infinite;
  -webkit-user-select: none; user-select: none;
}
@keyframes loginBreathe { 0%,100% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-50%) scale(1.05); } }

.login-logo { width: 232px; height: auto; color: #F47920; display: block; }
.login-tagline {
  font-family: var(--mx-font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 6px;
}
.login-field { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 6px; }
.login-field label {
  font-family: var(--mx-font-display); font-size: 12.5px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255,255,255,.62);
}
.login-field input {
  width: 100%; padding: 12px 13px; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12); border-radius: 9px; color: #fff;
  font-family: var(--mx-font-sans); font-size: 15px; outline: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.login-field input::placeholder { color: rgba(255,255,255,.35); }
.login-field input:focus {
  border-color: #F47920; background: rgba(244,121,32,.06);
  box-shadow: 0 0 0 3px rgba(244,121,32,.14);
}
/* Chrome/Safari autofill ignores the translucent background above and paints a
   solid lavender-white box. Force it back to the dark translucent look: a solid
   inset shadow that matches the input over the dark screen, white text, and a
   ~forever transition so the yellow autofill flash never shows. */
.login-field input:-webkit-autofill,
.login-field input:-webkit-autofill:hover,
.login-field input:-webkit-autofill:focus,
.login-field input:-webkit-autofill:active {
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px #10161e inset;
  box-shadow: 0 0 0 1000px #10161e inset;
  transition: background-color 9999s ease-out 0s;
}
.login-field input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #171313 inset, 0 0 0 3px rgba(244,121,32,.14);
  box-shadow: 0 0 0 1000px #171313 inset, 0 0 0 3px rgba(244,121,32,.14);
}
.login-error {
  width: 100%; 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; text-align: left; animation: shake .3s;
}
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.login-cta {
  width: 100%; margin-top: 4px; padding: 13px; background: #F47920; border: 0; border-radius: 9px;
  color: #0D1826; font-family: var(--mx-font-display); text-transform: uppercase; letter-spacing: 1px;
  font-weight: 700; font-size: 15px; cursor: pointer; transition: background .15s, transform .05s;
}
.login-cta:hover:not(:disabled) { background: #E56A15; }
.login-cta:active:not(:disabled) { transform: translateY(1px); }
.login-cta:disabled { opacity: .5; cursor: not-allowed; }
.login-cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.login-hint { font-size: 12.5px; color: rgba(255,255,255,.45); line-height: 1.5; }
.login-secure {
  font-family: var(--mx-font-mono); font-size: 12px; letter-spacing: 1px;
  color: rgba(255,255,255,.45); display: flex; align-items: center; gap: 6px; justify-content: center;
}
.login-secure b { color: #7AD694; font-weight: 700; }
.login-footer {
  position: absolute; bottom: 18px; left: 0; right: 0; text-align: center;
  font-size: 11.5px; color: rgba(255,255,255,.4); font-family: var(--mx-font-mono); letter-spacing: 1px;
}
@media (prefers-reduced-motion: reduce) {
  .login-card, .login-kai__aura, .login-kai__fox { animation: none; }
}

/* ── 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.sync-pill--update {
  background: rgba(59, 130, 246, 0.14);
  border-color: rgba(59, 130, 246, 0.55);
  animation: syncPillPulse 2s ease-in-out infinite;
}
.sync-pill.sync-pill--update:hover { background: rgba(59, 130, 246, 0.24); }
.sync-pill--update .sync-pill__primary { color: #60a5fa; font-weight: 700; }
@keyframes syncPillPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(59,130,246,.35); } 50% { box-shadow: 0 0 0 4px rgba(59,130,246,0); } }

.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; }
/* The generic kai-fullscreen rule adds 14px of bottom padding, which made the
   page ~13px taller than the viewport; focusing the composer then scrolled the
   whole page and shoved the KAI header off the top. */
body.kai-fullscreen .content.content--ai { padding-bottom: 0 !important; }
html:has(body.kai-fullscreen) { overflow: hidden; }
.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__x {
  margin-left: auto;
  background: none;
  border: 0;
  color: inherit;
  opacity: .7;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 2px 4px;
}
.kai-error__x:hover { opacity: 1; }
.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: 12px;
  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__search { display: flex; align-items: center; gap: 7px; margin-top: 10px; padding: 8px 10px; background: var(--app-surface); border: 1px solid var(--app-tint-2); border-radius: 9px; }
.kai-hub__search:focus-within { border-color: rgba(244,121,32,.45); }
.kai-hub__search-ic { font-size: 11px; opacity: .55; flex: 0 0 auto; }
.kai-hub__search input { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: none; color: var(--app-fg-1); font-size: 12.5px; font-family: inherit; }
.kai-hub__search input::placeholder { color: var(--app-fg-4); }
.kai-hub__search-x { flex: 0 0 auto; background: transparent; border: 0; color: var(--app-fg-4); font-size: 11px; cursor: pointer; padding: 0 2px; }
.kai-hub__search-x:hover { color: var(--app-fg-2); }
.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-hub__expand { width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px; background: var(--app-tint-1); border: 1px solid var(--app-tint-3); color: var(--app-fg-2); border-radius: 9px; padding: 8px 12px; cursor: pointer; font-size: 12px; font-weight: 600; margin: 0 0 12px; }
.kai-hub__expand:hover { border-color: rgba(244,121,32,.55); color: var(--mx-orange, #F47920); }

/* ── Historial expandido (⤢) ── */
.kai-histbig {
  width: min(920px, 100%); max-height: 82vh;
  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,.45); overflow: hidden;
}
.kai-histbig__head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--app-tint-3); }
.kai-histbig__title { font-family: var(--mx-font-display); font-weight: 800; font-size: 15px; color: var(--app-fg-1); }
.kai-histbig__sub { font-size: 12px; color: var(--app-fg-3); margin-top: 3px; }
.kai-histbig__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-histbig__x:hover { background: var(--app-tint-3); color: var(--app-fg-1); }
.kai-histbig__searchbar { display: flex; align-items: center; gap: 8px; margin: 14px 18px 4px; padding: 9px 11px; background: var(--app-tint-1); border: 1px solid var(--app-tint-3); border-radius: 9px; }
.kai-histbig__searchbar input { flex: 1; background: none; border: none; outline: none; color: var(--app-fg-1); font-size: 13px; font-family: inherit; }
.kai-histbig__body { flex: 1; overflow-y: auto; padding: 10px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.kai-histcard { border: 1px solid var(--app-tint-3); border-radius: 11px; padding: 12px 14px; cursor: pointer; background: var(--app-tint-1); transition: .12s; }
.kai-histcard:hover { border-color: rgba(244,121,32,.5); background: var(--app-tint-2); }
.kai-histcard.is-active { border-color: rgba(244,121,32,.8); }
.kai-histcard__top { display: flex; align-items: baseline; gap: 12px; }
.kai-histcard__t { font-weight: 700; font-size: 13.5px; color: var(--app-fg-1); flex: 1; }
.kai-histcard__meta { display: flex; gap: 10px; font: 600 11px/1 var(--mx-font-mono); color: var(--app-fg-4); white-space: nowrap; }
.kai-histcard__n { color: var(--app-fg-3); }
.kai-histcard__q, .kai-histcard__a { font-size: 12.5px; line-height: 1.5; margin-top: 7px; color: var(--app-fg-2); overflow-wrap: anywhere; }
.kai-histcard__a { color: var(--app-fg-3); }
.kai-histcard__q b, .kai-histcard__a b { color: var(--app-fg-4); font-weight: 700; }
.kai-histcard__acts { display: flex; gap: 7px; margin-top: 11px; }
.kai-histcard__del:hover { background: rgba(239,68,68,.16); border-color: rgba(239,68,68,.55); color: #fca5a5; }

.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; }

/* Staged attachments live inside the compose box, above the text. */
.kai-tray { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 10px; margin-bottom: 8px; border-bottom: 1px solid var(--app-tint-3); }
.kai-tray__item {
  position: relative; display: flex; align-items: center; gap: 9px;
  height: 52px; max-width: 220px; padding: 0 26px 0 7px; border-radius: 10px;
  background: var(--app-tint-2); border: 1px solid var(--app-tint-4);
}
.kai-tray__item.is-img { width: 52px; padding: 0; overflow: hidden; }
.kai-tray__thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.kai-tray__item--loading { opacity: .75; }
.kai-tray__item--error { border-color: rgba(239,68,68,.5); }
.kai-tray__ic {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center;
  background: rgba(244,121,32,.14); color: var(--mx-orange);
}
.kai-tray__ic--pdf { background: rgba(239,68,68,.14); color: #ef4444; }
.kai-tray__ic--excel { background: rgba(34,197,94,.14); color: #22c55e; }
.kai-tray__item--error .kai-tray__ic { background: rgba(239,68,68,.14); color: #ef4444; }
.kai-tray__txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.kai-tray__nm { font-size: 12px; font-weight: 600; color: var(--app-fg-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kai-tray__meta { font-size: 10.5px; color: var(--app-fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kai-tray__item--error .kai-tray__meta { color: #ef4444; }
.kai-tray__x {
  position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 50%;
  border: 0; padding: 0; display: grid; place-items: center; cursor: pointer;
  background: rgba(0,0,0,.55); color: #fff; opacity: .8; transition: opacity .15s;
}
.kai-tray__x:hover { opacity: 1; }
.kai-tray__item:not(.is-img) .kai-tray__x { background: transparent; color: var(--app-fg-3); }
.kai-tray__item:not(.is-img) .kai-tray__x:hover { color: var(--app-fg-1); background: var(--app-tint-3); }
.kai-tray__spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: kaiTraySpin .8s linear infinite; }
@keyframes kaiTraySpin { to { transform: rotate(360deg); } }

/* Floating panel: the field wrapper is the box; the textarea goes borderless inside it. */
.kai-panel__field {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  background: var(--app-tint-2); border: 1px solid var(--app-tint-4); border-radius: 10px;
  transition: border-color .15s, background .15s;
}
.kai-panel__field:focus-within { border-color: rgba(244,121,32,.5); background: var(--app-tint-3); }
.kai-panel__field.has-atts { padding-top: 8px; }
.kai-panel__field .kai-tray { padding: 0 8px 8px; margin-bottom: 0; }
.kai-panel__input .kai-panel__field textarea, .kai-panel__input .kai-panel__field textarea:focus { background: transparent; border: 0; border-radius: 10px; }
.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: 12.5px;
  line-height: 1.6;
  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); } }
/* Animated hourglass while a change is being pushed to Amazon (status: running). */
@keyframes kai-hourglass { 0% { transform: rotate(0deg); } 60%, 100% { transform: rotate(180deg); } }
.kai-spin { display: inline-block; animation: kai-hourglass 1.1s ease-in-out infinite; }

/* ── 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;
}
/* Modo Entregable: el documento sale sin voz de KAI. Vive junto al enviar porque
   es una decisión del turno, no una preferencia de la sesión. */
.kai-entregable {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 9px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .2px;
  background: transparent;
  color: var(--mx-text-dim, #9CA3AF);
  border: 1px solid var(--app-tint-3, rgba(255,255,255,.12));
  white-space: nowrap; transition: background .15s, color .15s, border-color .15s;
}
.kai-entregable:hover:not(:disabled) { color: var(--mx-text, #e5e7eb); border-color: rgba(244,121,32,.45); }
.kai-entregable.is-on {
  background: rgba(244,121,32,.16);
  border-color: rgba(244,121,32,.55);
  color: #fbbf85;
}
.kai-entregable:disabled { opacity: .45; }
.kai-inputbar__hint--on { color: #fbbf85; font-weight: 600; }

/* Cuenta sobre la que se va a escribir: marca · mercado · canal · moneda.
   Va sola y arriba porque el desajuste marca/moneda es el error más caro del
   write-path (descuentos de Vikari US con precios de México). */
.kai-confirm__cuenta {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: -2px 0 12px; padding: 6px 10px; border-radius: 8px;
  background: rgba(244,121,32,.10);
  border: 1px solid rgba(244,121,32,.30);
}
.kai-confirm__cuenta-lbl {
  font-size: 10px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--mx-text-dim, #9CA3AF); font-weight: 700;
}
.kai-confirm__cuenta-val { font-size: 12.5px; font-weight: 700; color: #fbbf85; }
.kai-confirm__cuenta-id {
  font-family: var(--mx-font-mono); font-size: 10.5px; opacity: .7;
  color: var(--mx-text-dim, #9CA3AF);
}
.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). */
/* Aviso de error: presentable, con código para reportar. Nada de detalle del
   proveedor ni de la operación — eso vive en el servidor. */
.kai-err {
  border: 1px solid rgba(239,68,68,.32);
  background: rgba(239,68,68,.07);
  border-radius: 10px;
  padding: 12px 14px;
}
.kai-err__txt { font-size: 13.5px; color: var(--mx-text, #e5e7eb); font-weight: 500; }
.kai-err__pie {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 9px;
  border-top: 1px solid rgba(239,68,68,.20);
}
.kai-err__lbl {
  font-size: 10px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--mx-text-dim, #9CA3AF); font-weight: 700;
}
.kai-err__cod {
  font-family: var(--mx-font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 1px; color: #fca5a5;
  background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.30);
  border-radius: 6px; padding: 3px 9px;
}
.kai-err__cod:hover { background: rgba(239,68,68,.20); }

/* ASIN/SKU: un clic los copia. */
.kai-copiable { cursor: pointer; border-bottom: 1px dotted rgba(244,121,32,.5); transition: background .15s, color .15s; }
.kai-copiable:hover { background: rgba(244,121,32,.16); color: #fbbf85; }
.kai-copiable.is-copiado { background: rgba(34,197,94,.20); color: #7ad694; border-bottom-color: transparent; }

/* Link de KAI que te lleva a una pantalla de la plataforma (no abre pestaña). */
.kai-goto {
  display: inline-flex; align-items: center; gap: 5px; margin: 2px 0;
  background: rgba(244,121,32,.10); border: 1px solid rgba(244,121,32,.45);
  color: #fbbf85; border-radius: 8px; padding: 3px 10px;
  font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.kai-goto:hover { background: rgba(244,121,32,.22); border-color: rgba(244,121,32,.7); }

/* Tabla como dato: barra con conteo/filtro/exportar, encabezado ordenable y
   pegajoso. El markdown seguía siendo la fuente; esto es sólo la superficie. */
.kai-tbl { margin: 12px 0 6px; }
.kai-tbl__bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 0 2px 6px;
}
.kai-tbl__count {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--mx-text-dim, #9CA3AF); font-weight: 700;
}
.kai-tbl__spacer { flex: 1; }
.kai-tbl__filter {
  background: var(--app-tint-1, rgba(255,255,255,.04));
  border: 1px solid var(--app-tint-3, rgba(255,255,255,.12));
  border-radius: 7px; padding: 3px 8px; font-size: 11.5px; width: 130px;
  color: var(--mx-text, #e5e7eb); font-family: inherit;
}
.kai-tbl__filter:focus { outline: none; border-color: rgba(244,121,32,.55); }
.kai-tbl__btn {
  background: transparent; border: 1px solid var(--app-tint-3, rgba(255,255,255,.12));
  color: var(--mx-text-dim, #9CA3AF); border-radius: 7px;
  padding: 3px 8px; font-size: 11px; font-weight: 600; white-space: nowrap;
}
.kai-tbl__btn:hover { color: #fbbf85; border-color: rgba(244,121,32,.45); }
.kai-tbl .kai-table-wrap { margin: 0; max-height: 460px; overflow: auto; }
.kai-table th.kai-th--sortable {
  cursor: pointer; user-select: none;
  position: sticky; top: 0; z-index: 1;
  /* El encabezado pegajoso necesita fondo propio: si no, las filas se ven
     atravesando el texto al hacer scroll dentro de la tabla. */
  background: var(--app-surface, #171b21);
  box-shadow: 0 1px 0 var(--app-tint-6, rgba(255,255,255,.1));
}
.kai-table th.kai-th--sortable:hover { color: #fbbf85; }
.kai-table th.is-sorted { color: #fbbf85; }
.kai-th__arrow { display: inline-block; width: 9px; margin-left: 3px; font-size: 9px; opacity: .9; }

.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; }
/* KAI Equipo: tracking card of a hand-off to a bot, under KAI's answer. */
.kai-enc { margin-top: 10px; border: 1px solid var(--app-tint-3); border-left: 3px solid #F47920; border-radius: 10px; background: var(--app-surface); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; color: var(--app-fg-2); }
.kai-enc--load { color: var(--app-fg-3); border-left-color: var(--app-tint-4); }
.kai-enc--por_revisar { border-left-color: #F2B544; }
.kai-enc--aprobado { border-left-color: #3FCB8A; }
.kai-enc--error { border-left-color: #ef6b6b; }
.kai-enc__head { display: flex; align-items: center; gap: 8px; }
.kai-enc__t { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13.5px; color: var(--app-fg-1); }
.kai-enc__st { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; color: #fbbf85; border: 1px solid rgba(244,121,32,.45); white-space: nowrap; }
.kai-enc--por_revisar .kai-enc__st { color: #F2B544; border-color: rgba(242,181,68,.5); }
.kai-enc--aprobado .kai-enc__st { color: #5FD9A0; border-color: rgba(63,203,138,.5); }
.kai-enc--error .kai-enc__st { color: #ef8a8a; border-color: rgba(239,107,107,.5); }
.kai-enc__sub { font-size: 11.5px; color: var(--app-fg-3); margin-top: -4px; }
.kai-enc__flow { list-style: none; margin: 2px 0 0; padding: 0; display: flex; gap: 4px; flex-wrap: wrap; }
.kai-enc__flow li { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--app-fg-4); padding: 2px 8px 2px 4px; border-radius: 999px; background: var(--app-tint-1); }
.kai-enc__dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--app-tint-4); display: inline-flex; align-items: center; justify-content: center; }
.kai-enc__flow li.done { color: var(--app-fg-2); }
.kai-enc__flow li.done .kai-enc__dot { background: #3FCB8A; border-color: #3FCB8A; color: #0D1826; }
.kai-enc__flow li.now { color: #fbbf85; background: rgba(244,121,32,.12); }
.kai-enc__flow li.now .kai-enc__dot { border-color: #F47920; animation: kai-enc-pulse 1.2s ease-in-out infinite; }
.kai-enc__flow li.wait { color: #F2B544; background: rgba(242,181,68,.12); }
.kai-enc__flow li.wait .kai-enc__dot { border-color: #F2B544; background: #F2B544; }
.kai-enc__flow li.err { color: #ef8a8a; background: rgba(239,107,107,.12); }
.kai-enc__flow li.err .kai-enc__dot { border-color: #ef6b6b; background: #ef6b6b; }
@keyframes kai-enc-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(244,121,32,.5); } 50% { box-shadow: 0 0 0 4px rgba(244,121,32,0); } }
.kai-enc__live { display: flex; align-items: center; gap: 8px; }
.kai-enc__pulse { width: 8px; height: 8px; border-radius: 50%; background: #F47920; flex: none; animation: kai-enc-pulse 1.2s ease-in-out infinite; }
.kai-enc__livetx { flex: 1; min-width: 0; color: var(--app-fg-2); }
.kai-enc__livetx em { font-style: normal; color: var(--app-fg-3); }
.kai-enc__live time { font-variant-numeric: tabular-nums; color: var(--app-fg-3); font-size: 11.5px; }
.kai-enc__verd { border-radius: 8px; padding: 7px 10px; line-height: 1.45; }
.kai-enc__verd.is-ok { background: rgba(63,203,138,.10); color: #8ee6bd; }
.kai-enc__verd.is-warn { background: rgba(242,181,68,.10); color: #f5cf7d; }
.kai-enc__verd.is-bad { background: rgba(239,107,107,.10); color: #f3a3a3; }
.kai-enc__notas { font-size: 12px; color: var(--app-fg-3); display: flex; flex-direction: column; gap: 3px; }
.kai-enc__notas b { color: var(--app-fg-2); font-weight: 600; }
.kai-enc__acts { display: flex; gap: 6px; flex-wrap: wrap; }
.kai-enc__acts button { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; font-size: 12px; font-weight: 600; border-radius: 7px; border: 1px solid var(--app-tint-4); background: transparent; color: var(--app-fg-2); cursor: pointer; }
.kai-enc__acts button:hover { color: #fbbf85; border-color: rgba(244,121,32,.45); }
.kai-enc__acts button.is-pri { background: #F47920; border-color: #F47920; color: #fff; }
.kai-enc__acts button.is-pri:hover { background: #ff8a33; color: #fff; }
.kai-enc__acts button:disabled { opacity: .5; cursor: default; }
.kai-enc__obs { display: flex; flex-direction: column; gap: 6px; }
.kai-enc__obs textarea { width: 100%; resize: vertical; font: 500 13px/1.5 var(--mx-font-body, inherit); color: var(--app-fg-1); background: var(--app-bg); border: 1px solid var(--app-tint-3); border-radius: 8px; padding: 8px 10px; outline: none; }
.kai-enc__obs textarea:focus { border-color: rgba(244,121,32,.6); }
.kai-enc__doc { border-top: 1px solid var(--app-tint-3); padding-top: 8px; max-height: 520px; overflow: auto; color: var(--app-fg-1); }
.kai-enc__proc { align-self: flex-start; background: none; border: 0; padding: 0; font-size: 11.5px; color: var(--app-fg-3); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.kai-enc__proc:hover { color: #fbbf85; }
.kai-enc__pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.kai-enc__pasos li { display: flex; gap: 8px; line-height: 1.4; }
.kai-enc__pasos time { flex: none; width: 40px; color: var(--app-fg-4); font-variant-numeric: tabular-nums; }
.kai-enc__err { color: #ef8a8a; font-size: 12px; }
body[data-theme="light"] .kai-enc__st { color: #b45309; }
body[data-theme="light"] .kai-enc--por_revisar .kai-enc__st, body[data-theme="light"] .kai-enc__flow li.wait { color: #92400e; }
body[data-theme="light"] .kai-enc--aprobado .kai-enc__st { color: #047857; }
body[data-theme="light"] .kai-enc--error .kai-enc__st, body[data-theme="light"] .kai-enc__flow li.err, body[data-theme="light"] .kai-enc__err { color: #b91c1c; }
body[data-theme="light"] .kai-enc__flow li.now { color: #b45309; }
body[data-theme="light"] .kai-enc__verd.is-ok { color: #047857; }
body[data-theme="light"] .kai-enc__verd.is-warn { color: #92400e; }
body[data-theme="light"] .kai-enc__verd.is-bad { color: #b91c1c; }

/* Excel export only shows when the answer has a table — tint it Excel-green. */
.kai-msg__export button.kai-msg__export--xls { color: #6ee7b7; border-color: rgba(16,185,129,.30); }
.kai-msg__export button.kai-msg__export--xls:hover { color: #a7f3d0; border-color: rgba(16,185,129,.55); }

/* ═══════════════════════════════════════════════════════════════════
   KAI redesign · clean copilot (01) + compact hub (03) + live head (04)
   Placed after both .kai-msg blocks so these overrides win at equal spec.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 01 · Messages: user = solid orange bubble right; KAI = plain text left ── */
.kai-msg { gap: 12px; align-items: flex-start; }
.kai-msg--ai .kai-msg__bubble,
.kai-msg--you .kai-msg__bubble { background: none; border: 0; padding: 0; border-radius: 0; }
.kai-msg--you .kai-msg__bubble { max-width: 74%; }
/* KAI: strip the card — reset both earlier definitions to plain readable text */
.kai-msg--ai .kai-msg__body {
  background: none; border: 0; border-left: 0; padding: 0; border-radius: 0; max-width: 64ch;
}
.kai-msg--ai .kai-msg__author { color: var(--mx-orange); }
/* User: one solid orange bubble, no author label (bubble + right-align says "you") */
.kai-msg--you .kai-msg__author { display: none; }
.kai-msg--you .kai-msg__body {
  background: linear-gradient(160deg, var(--mx-orange), #c95f10);
  border: 0; color: #160c02; font-weight: 500;
  padding: 11px 15px; border-radius: 15px 15px 5px 15px; max-width: 100%;
  box-shadow: 0 8px 22px -10px rgba(244,121,32,.5);
}
.kai-msg--you .kai-msg__body p { color: #160c02; }
.kai-msg--you .kai-msg__avatar {
  background: linear-gradient(150deg, var(--mx-orange), #c95f10);
  color: #160c02; border-radius: 10px;
}

/* ── 04 · Live status header (personality + what KAI is doing now) ── */
.kai-kaihead {
  display: flex; align-items: center; gap: 14px;
  margin: 12px 16px 0; padding: 12px 16px;
  border: 1px solid var(--app-tint-3); border-radius: 14px;
  background: linear-gradient(180deg, var(--app-tint-2), var(--app-tint-1));
  flex-shrink: 0;
}
.kai-kaihead__face { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; }
.kai-kaihead.is-busy .kai-kaihead__face { animation: kai-ring-breathe 2.2s ease-in-out infinite; }
@keyframes kai-ring-breathe {
  0%,100% { box-shadow: 0 0 0 2px var(--app-surface-2), 0 0 0 4px var(--mx-orange), 0 0 10px rgba(244,121,32,.3); }
  50%     { box-shadow: 0 0 0 2px var(--app-surface-2), 0 0 0 4px var(--mx-orange), 0 0 26px rgba(244,121,32,.55); }
}
.kai-kaihead__id { min-width: 0; flex: 1; }
.kai-kaihead__nm { font-family: var(--mx-font-display); font-weight: 700; font-size: 16px; letter-spacing: .5px; color: var(--app-fg-1); display: flex; align-items: center; gap: 10px; }
.kai-kaihead__badge { font: 700 9.5px/1 var(--mx-font-mono); text-transform: uppercase; letter-spacing: .6px; color: #F47920; border: 1px solid rgba(244,121,32,.4); background: rgba(244,121,32,.1); border-radius: 6px; padding: 3px 7px; }
.kai-kaihead__st { font-size: 12.5px; color: var(--app-fg-3); margin-top: 4px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.kai-kaihead__ready { width: 8px; height: 8px; border-radius: 50%; background: #3ecf8e; box-shadow: 0 0 8px rgba(62,207,142,.55); flex: 0 0 auto; }
.kai-kaihead__pulse { width: 8px; height: 8px; border-radius: 50%; background: #F47920; flex: 0 0 auto; animation: kai-working-pulse 1.2s ease-in-out infinite; }
.kai-kaihead__phrase {
  background: linear-gradient(90deg, #fbbf85, var(--app-fg-1), #fbbf85); 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; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kai-kaihead__right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.kai-kaihead__time { font: 600 11px/1 var(--mx-font-mono); color: var(--app-fg-3); font-variant-numeric: tabular-nums; }
.kai-kaihead__cancel { border: 1px solid var(--app-tint-4); background: var(--app-surface); color: var(--app-fg-2); font: 600 12px/1 var(--mx-font-display); padding: 8px 12px; border-radius: 9px; cursor: pointer; transition: .12s; }
.kai-kaihead__cancel:hover { background: rgba(239,68,68,.16); border-color: rgba(239,68,68,.55); color: #fca5a5; }
.kai-kaihead__go { border: 1px solid rgba(244,121,32,.55); background: rgba(244,121,32,.14); color: var(--mx-orange, #F47920); font: 700 12px/1 var(--mx-font-display); padding: 8px 12px; border-radius: 9px; cursor: pointer; transition: .12s; white-space: nowrap; }
.kai-kaihead__go:hover { background: rgba(244,121,32,.26); border-color: rgba(244,121,32,.85); }
.kai-checkin { display: flex; flex-direction: column; gap: 8px; }
.kai-checkin__txt { font: 600 12.5px/1.45 var(--mx-font-display); color: var(--app-fg-2); }
.kai-checkin__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.kai-kaihead__caps { font: 600 10.5px/1 var(--mx-font-mono); letter-spacing: .4px; text-transform: uppercase; color: var(--app-fg-4); flex: 0 0 auto; }
.kai-kaihead__bar { height: 2px; margin: 8px 16px 0; border-radius: 2px; overflow: hidden; background: rgba(244,121,32,.15); position: relative; flex-shrink: 0; }
.kai-kaihead__bar span { position: absolute; top: 0; left: -40%; height: 100%; width: 40%; background: linear-gradient(90deg, transparent, #F47920, transparent); animation: kai-working-slide 1.3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .kai-kaihead.is-busy .kai-kaihead__face, .kai-kaihead__phrase, .kai-kaihead__pulse, .kai-kaihead__bar span { animation: none; }
}

/* ── 03 · Compact engine dropdown (replaces the 4-button grid) ── */
.kai-motorpick { position: relative; display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; padding: 9px 12px; border: 1px solid var(--app-border); border-radius: 11px; background: var(--app-surface); cursor: pointer; flex: 0 0 auto; }
.kai-motorpick:hover, .kai-motorpick.is-open { border-color: rgba(244,121,32,.5); }
.kai-motorpick__dot { width: 7px; height: 7px; border-radius: 50%; background: #3ecf8e; flex: 0 0 auto; box-shadow: 0 0 7px rgba(62,207,142,.5); }
.kai-motorpick__txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.kai-motorpick__lbl { font: 700 8.5px/1 var(--mx-font-mono); text-transform: uppercase; letter-spacing: 1px; color: var(--app-fg-4); }
.kai-motorpick__val { font-size: 13px; font-weight: 700; color: var(--app-fg-1); }
.kai-motorpick__caret { margin-left: auto; color: var(--app-fg-4); font-size: 11px; transition: transform .15s; }
.kai-motorpick.is-open .kai-motorpick__caret { transform: rotate(180deg); }
.kai-motormenu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 11px; overflow: hidden; box-shadow: 0 16px 40px -12px rgba(0,0,0,.55); }
.kai-motormenu__item { width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 13px; background: none; border: 0; border-bottom: 1px solid var(--app-tint-2); cursor: pointer; text-align: left; }
.kai-motormenu__item:last-child { border-bottom: 0; }
.kai-motormenu__item:hover:not(:disabled) { background: var(--app-tint-2); }
.kai-motormenu__item.is-active { background: rgba(244,121,32,.1); }
.kai-motormenu__item:disabled { opacity: .5; cursor: not-allowed; }
.kai-motormenu__nm { font-size: 12.5px; font-weight: 700; color: var(--app-fg-1); }
.kai-motormenu__tag { font-size: 10px; color: var(--app-fg-4); }
.kai-motormenu__check { margin-left: auto; color: #F47920; font-weight: 800; }
.kai-motormenu__scrim { position: fixed; inset: 0; z-index: 20; }

/* ── 03 · Pin conversations + Fijadas group ── */
.kai-conv__pin { opacity: 0; border: 0; background: none; cursor: pointer; font-size: 11px; padding: 2px; flex: 0 0 auto; filter: grayscale(1); transition: .12s; }
.kai-conv:hover .kai-conv__pin { opacity: .7; }
.kai-conv__pin.is-on { opacity: 1; filter: none; }
.kai-conv__pin:hover { opacity: 1 !important; transform: scale(1.12); }
.kai-hub__convs--pinned { flex: 0 0 auto; overflow: visible; margin-bottom: 2px; }
.kai-hub__playbook { flex: 0 0 auto; }

/* ── 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: 10px; background: var(--app-surface); border: 1px solid var(--app-border); 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-table .r { text-align: right; }

/* Facturación de IA (Gasto IA v2): presupuesto + proyección + meses */
.usage-months { display: inline-flex; gap: 4px; background: var(--app-tint-1, rgba(148,163,184,.05)); border: 1px solid rgba(148,163,184,.14); border-radius: 9px; padding: 3px; }
.usage-chip { border: none; background: transparent; color: var(--app-fg-3, #9CA3AF); font-size: 11.5px; padding: 4px 12px; border-radius: 7px; cursor: pointer; font-family: inherit; text-transform: capitalize; }
.usage-chip.on { background: rgba(244,121,32,.16); color: var(--mx-orange, #F47920); font-weight: 600; }
.usage-meter-block { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 10px; padding: 14px 18px; margin-bottom: 14px; }
/* Tendencia de gasto: barras apiladas por proveedor (paleta validada CVD-safe
   sobre superficie oscura) con gap de 2px entre segmentos y entre barras. */
.usage-trend-bars { display: flex; align-items: flex-end; gap: 10px; margin-top: 14px; }
.usage-trend-col { flex: 1; max-width: 58px; display: flex; flex-direction: column; align-items: center; gap: 5px; position: relative; }
.usage-trend-stack { width: 100%; max-width: 40px; display: flex; flex-direction: column-reverse; gap: 2px; }
.usage-trend-col .lbl { font-size: 10px; color: var(--app-fg-4); white-space: nowrap; }
.usage-trend-col .val { font-size: 10.5px; font-variant-numeric: tabular-nums; color: var(--app-fg-3); height: 14px; }
.usage-trend-tip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 5; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 8px; padding: 8px 10px; font-size: 11px; white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.usage-trend-tip .row { display: flex; align-items: center; gap: 6px; justify-content: space-between; min-width: 130px; }
.usage-legend { display: inline-flex; gap: 12px; align-items: center; font-size: 11px; color: var(--app-fg-3); flex-wrap: wrap; }
.usage-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; }
.usage-meter-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--app-fg-2, #cbd5e1); }
.usage-meter { height: 12px; border-radius: 6px; background: rgba(244,121,32,.14); overflow: visible; margin: 10px 0 8px; position: relative; }
.usage-meter__fill { height: 100%; border-radius: 6px; transition: width .3s ease; }
.usage-meter__mark { position: absolute; top: -4px; bottom: -4px; width: 2px; background: rgba(255,255,255,.5); border-radius: 1px; }
.usage-budget-edit { border: none; background: transparent; color: var(--mx-orange, #F47920); font-size: 12px; cursor: pointer; font-family: inherit; padding: 0 2px; }
.usage-budget-edit:hover { text-decoration: underline; }
.usage-cache-note { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; font-size: 12px; color: var(--app-fg-3, #9CA3AF); }
.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;
}
.task-toolbar__new {
  align-self: end;
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 7px;
  background: rgba(244,121,32,.16);
  border: 1px solid rgba(244,121,32,.6);
  color: #F47920;
  font-family: var(--mx-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(244,121,32,.25);
  transition: background .12s, border-color .12s;
}
.task-toolbar__new:hover {
  background: rgba(244,121,32,.24);
  border-color: #F47920;
}

/* ── 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__intro-picker {
  margin-top: 18px;
  /* The switcher's dropdown is absolutely positioned; keep it above the empty
     panel below instead of clipped by it. */
  position: relative;
  z-index: 5;
  display: inline-block;
}

.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;
}
/* Drop upward — used inside modals where the field sits near the bottom and
   a downward popup would be clipped by the scrollable body. */
.datefield__pop--up {
  top: auto;
  bottom: calc(100% + 6px);
}

.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--kai .tboard-person__av {
  background: rgba(244,121,32,.16);
  color: #F47920;
  border-color: rgba(244,121,32,.45);
}
.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
   ─────────────────────────────────────────────────────────────── */
/* ── KAI entrance overlay (design ref "2a") — first-load splash ───────────
   KAI centered in an orange progress ring over a navy grid; ring driven by
   real boot progress (see BootSplash in app.jsx). Always the dark scene
   regardless of app theme. Replaces the old .boot-splash block. */
.kai-intro {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px;
  background: #0A111A;
  /* No fade-in: this panel always replaces another full-screen dark surface (the
     login card's screen, or the probe shell). Fading it up let the page background
     show through for ~350ms — a cream flash for anyone on the light theme. */
  transition: opacity 0.6s cubic-bezier(.16,1,.3,1), background-color .34s ease;
}
/* Two-step exit. `is-exiting` = ring full + KAI celebrating; the overlay must stay
   fully opaque here or the win beat fades while it plays. `is-leaving` is the last
   stretch that dissolves the backdrop — the fox is held out of it, because the
   flight overlay picks him up from exactly this position. */
.kai-intro.is-exiting { pointer-events: none; }
/* Dissolve the backdrop layer by layer instead of fading the container: a parent
   opacity would take the fox down with it, and the flight overlay needs to pick
   him up from exactly this spot at full opacity. */
.kai-intro.is-leaving { background-color: transparent; }
.kai-intro.is-leaving .kai-intro__grid,
.kai-intro.is-leaving .kai-intro__glow,
.kai-intro.is-leaving .kai-intro__pct,
.kai-intro.is-leaving .kai-intro__label,
.kai-intro.is-leaving .kai-intro__log,
.kai-intro.is-leaving .kai-intro__url,
.kai-intro.is-leaving .kai-intro__ring,
.kai-intro.is-leaving .kai-intro__aura { opacity: 0; transition: opacity .34s ease; }
@keyframes kai-intro-in { from { opacity: 0; } to { opacity: 1; } }

.kai-intro__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(circle at 50% 45%, black, transparent 75%);
  mask-image: radial-gradient(circle at 50% 45%, black, transparent 75%);
}
.kai-intro__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 40%, rgba(244,121,32,.18), transparent 55%);
}

.kai-intro__center { position: relative; width: 168px; height: 168px; }
.kai-intro__aura {
  position: absolute; top: 50%; left: 50%; width: 128px; height: 128px;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(244,121,32,.28), transparent 70%);
  animation: kai-breathe 3s ease-in-out infinite;
}
.kai-intro__ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.kai-intro__ring-track { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 3; }
.kai-intro__ring-prog {
  fill: none; stroke: #F47920; stroke-width: 3; stroke-linecap: round;
  transition: stroke-dashoffset 0.2s linear;
}
.kai-intro__fox {
  position: absolute; top: 50%; left: 50%; width: 116px; height: auto;
  transform: translate(-50%,-50%);
  animation: kai-breathe 3s ease-in-out infinite;
  -webkit-user-select: none; user-select: none;
}
@keyframes kai-breathe {
  0%,100% { transform: translate(-50%,-50%) scale(1); }
  50%     { transform: translate(-50%,-50%) scale(1.05); }
}

.kai-intro__pct {
  position: relative;
  font-family: var(--mx-font-display), 'Barlow Condensed', sans-serif;
  font-size: 46px; font-weight: 800; line-height: 1; color: #fff;
  font-variant-numeric: tabular-nums;
}
.kai-intro__label {
  position: relative;
  font-family: var(--mx-font-display), 'Barlow Condensed', sans-serif;
  font-size: 15px; text-transform: uppercase; letter-spacing: 2.5px;
  color: rgba(255,255,255,.78);
}
.kai-intro__url {
  position: relative;
  font-family: var(--mx-font-mono), 'JetBrains Mono', monospace;
  font-size: 13px; color: rgba(255,255,255,.62);
}
@media (prefers-reduced-motion: reduce) {
  .kai-intro { animation: none; transition: opacity 0.2s linear; }
  .kai-intro__aura, .kai-intro__fox { animation: none; }
  .kai-intro__ring-prog { transition: none; }
}

/* ── Boot log: real milestones, one line per proven fact ───────────────── */
.kai-intro__log {
  position: relative; min-height: 84px; width: 330px; text-align: left;
  font-family: var(--mx-font-mono), 'JetBrains Mono', monospace;
  font-size: 12px; line-height: 1.85; color: rgba(255,255,255,.42);
}
.kai-intro__log-line { animation: boot-splash-fadeup .3s ease-out both; }
.kai-intro__log-line span { color: #F47920; margin-right: 7px; }

/* The win beat. The aura punches out once as the ring completes; the pose swap
   does the rest, so this stays cheap and never fights the flight transform. */
.kai-intro.is-exiting .kai-intro__aura { animation: kai-win .5s ease-out; }
@keyframes kai-win {
  0%   { transform: translate(-50%,-50%) scale(.7); opacity: .45; }
  50%  { transform: translate(-50%,-50%) scale(1.55); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
}

/* ── Login → splash handoff ─────────────────────────────────────────────
   The card drops away while KAI holds his ground and grows into the splash
   position, so the two screens read as one move instead of a hard cut. */
.login-card.is-handoff > *:not(.login-kai) { opacity: 0; transform: translateY(14px); }
.login-card.is-handoff > * { transition: opacity .26s ease, transform .3s ease; }
.login-card.is-handoff .login-kai {
  transition: transform .46s cubic-bezier(.6,0,.2,1);
  z-index: 2;
}
.login-card.is-handoff .login-kai__fox,
.login-card.is-handoff .login-kai__aura { animation: none; }

/* ── KaiFlight: the fox travelling from the splash to his nav item ────── */
.kai-flight {
  position: fixed; top: 50%; left: 50%; width: 116px; height: 116px;
  margin: -58px 0 0 -58px; z-index: 10000; pointer-events: none;
  transition: opacity .3s ease; will-change: transform, opacity;
}
.kai-flight img { width: 100%; height: auto; display: block; }
.kai-flight__aura {
  position: absolute; top: 50%; left: 50%; width: 128px; height: 128px;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(244,121,32,.28), transparent 70%);
}
/* El botón flotante no existe visualmente durante la entrada — el zorro que
   vuela aterriza sobre él y se veían dos. Aparece cuando el volador se apaga,
   con un pop corto para que se lea como "llegó y se quedó". */
body.kai-flying .kai-fab { opacity: 0; pointer-events: none; }
/* Sin fill-mode a propósito: el botón usa transform en :hover y :active, y una
   animación retenida se los comería. Solo tras aterrizar, no en cada montaje. */
body.kai-landed .kai-fab { animation: kai-fab-in .34s cubic-bezier(.16,1,.3,1); }
@keyframes kai-fab-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }

/* La frase del aterrizaje. Vive FUERA del nodo que vuela: ese se escala hasta
   el tamaño del FAB y el texto quedaría ilegible. Se ancla al FAB por JS y
   crece hacia la izquierda para no salirse por el borde derecho. */
.kai-flight__say {
  position: fixed; z-index: 10001; pointer-events: none;
  transform: translate(-100%, -50%);
  background: var(--app-surface, #161b22);
  border: 1px solid rgba(244,121,32,.55);
  color: var(--app-fg-1, #e6edf3);
  font-weight: 700; font-size: 13px; white-space: nowrap;
  padding: 8px 14px; border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0,0,0,.5);
  animation: kai-say-in .26s cubic-bezier(.16,1,.3,1) both;
}
@keyframes kai-say-in {
  from { opacity: 0; transform: translate(-100%,-50%) translateX(10px) scale(.9); }
  to   { opacity: 1; transform: translate(-100%,-50%); }
}

/* Cache boot had no splash to arrive from, so he introduces himself first. */
.kai-flight.is-cache { animation: kai-flight-in .32s cubic-bezier(.16,1,.3,1) both; }
@keyframes kai-flight-in { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .kai-intro__log-line { animation: none; }
  .kai-intro.is-exiting .kai-intro__aura { animation: none; }
  .login-card.is-handoff .login-kai { transition: none; }
  .kai-flight.is-cache { animation: none; }
  .kai-flight__say { animation: none; }
}

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

/* ── First-load reveal cascade (phase 2 of the KAI entrance) ─────────────
   One-shot on a fresh (non-cache) boot: .mx-reveal is added to .app for ~1.8s,
   staggering the shell + dashboard blocks in (fade + translateY). Overview uses
   the agency-* classes; the generic .kpi-grid / .card / .tbl selectors cover
   whatever else a user might land on first. Disabled under reduced-motion. */
@keyframes mxReveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .app.mx-reveal .sidebar,
  .app.mx-reveal .page-header,
  .app.mx-reveal .agency-kpis > .agency-kpi,
  .app.mx-reveal .agency-grid > .agency-card,
  .app.mx-reveal .agency-bottom,
  .app.mx-reveal .section-h,
  .app.mx-reveal .content .kpi-grid > *,
  .app.mx-reveal .content .card,
  .app.mx-reveal .content .tbl tbody tr {
    animation: mxReveal 0.34s cubic-bezier(.16,1,.3,1) both;
  }
  /* chrome */
  .app.mx-reveal .sidebar     { animation-delay: 0s; }
  .app.mx-reveal .page-header { animation-delay: 0.06s; }
  /* Overview hero KPIs */
  .app.mx-reveal .agency-kpis > .agency-kpi:nth-child(1) { animation-delay: 0.14s; }
  .app.mx-reveal .agency-kpis > .agency-kpi:nth-child(2) { animation-delay: 0.21s; }
  .app.mx-reveal .agency-kpis > .agency-kpi:nth-child(3) { animation-delay: 0.28s; }
  .app.mx-reveal .agency-kpis > .agency-kpi:nth-child(4) { animation-delay: 0.35s; }
  .app.mx-reveal .agency-kpis > .agency-kpi:nth-child(5) { animation-delay: 0.42s; }
  .app.mx-reveal .agency-kpis > .agency-kpi:nth-child(6) { animation-delay: 0.49s; }
  .app.mx-reveal .agency-kpis > .agency-kpi:nth-child(n+7) { animation-delay: 0.56s; }
  /* Overview 3-col cards */
  .app.mx-reveal .agency-grid > .agency-card:nth-child(1) { animation-delay: 0.42s; }
  .app.mx-reveal .agency-grid > .agency-card:nth-child(2) { animation-delay: 0.51s; }
  .app.mx-reveal .agency-grid > .agency-card:nth-child(3) { animation-delay: 0.60s; }
  .app.mx-reveal .agency-grid > .agency-card:nth-child(n+4) { animation-delay: 0.69s; }
  /* Overview bottom (alerts + trend chart) + section heading */
  .app.mx-reveal .agency-bottom { animation-delay: 0.64s; }
  .app.mx-reveal .section-h     { animation-delay: 0.70s; }
  /* Leaderboard / data cards */
  .app.mx-reveal .content .card { animation-delay: 0.74s; }
  /* Table rows */
  .app.mx-reveal .content .tbl tbody tr:nth-child(1)  { animation-delay: 0.80s; }
  .app.mx-reveal .content .tbl tbody tr:nth-child(2)  { animation-delay: 0.84s; }
  .app.mx-reveal .content .tbl tbody tr:nth-child(3)  { animation-delay: 0.88s; }
  .app.mx-reveal .content .tbl tbody tr:nth-child(4)  { animation-delay: 0.92s; }
  .app.mx-reveal .content .tbl tbody tr:nth-child(5)  { animation-delay: 0.96s; }
  .app.mx-reveal .content .tbl tbody tr:nth-child(6)  { animation-delay: 1.00s; }
  .app.mx-reveal .content .tbl tbody tr:nth-child(7)  { animation-delay: 1.04s; }
  .app.mx-reveal .content .tbl tbody tr:nth-child(8)  { animation-delay: 1.08s; }
  .app.mx-reveal .content .tbl tbody tr:nth-child(9)  { animation-delay: 1.12s; }
  .app.mx-reveal .content .tbl tbody tr:nth-child(10) { animation-delay: 1.16s; }
  .app.mx-reveal .content .tbl tbody tr:nth-child(n+11) { animation-delay: 1.20s; }
  /* Generic KPI grids (brand-detail / other landing views) */
  .app.mx-reveal .content .kpi-grid > *:nth-child(1) { animation-delay: 0.16s; }
  .app.mx-reveal .content .kpi-grid > *:nth-child(2) { animation-delay: 0.22s; }
  .app.mx-reveal .content .kpi-grid > *:nth-child(3) { animation-delay: 0.28s; }
  .app.mx-reveal .content .kpi-grid > *:nth-child(4) { animation-delay: 0.34s; }
  .app.mx-reveal .content .kpi-grid > *:nth-child(5) { animation-delay: 0.40s; }
  .app.mx-reveal .content .kpi-grid > *:nth-child(6) { animation-delay: 0.46s; }
  .app.mx-reveal .content .kpi-grid > *:nth-child(n+7) { animation-delay: 0.52s; }
}

/* 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
   ═══════════════════════════════════════════════════════════════════════ */

/* Research hub — two main tabs (Estudios / Estudios A.G.S.) on one page */
.rs-hub__tabs { max-width: 980px; margin: 0 auto; padding: 22px 32px 0; display: flex; gap: 2px; border-bottom: 1px solid var(--app-border); }
.rs-hub__tab { padding: 11px 20px; font-size: 14px; font-weight: 600; color: var(--app-fg-3); border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: inherit; transition: color .12s, border-color .12s; }
.rs-hub__tab:hover { color: var(--app-fg-1); }
.rs-hub__tab.is-active { color: var(--mx-orange); border-bottom-color: var(--mx-orange); }
.rs-hub__tabs + * .rs-page { padding-top: 22px; }

.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; }
/* Kebab (⋯) overflow menu — keeps the actions column to just "Abrir" + "⋯". */
.rs-menu-wrap { position: relative; display: inline-block; margin-left: 6px; }
.rs-kebab { padding: 7px 12px; font-weight: 700; letter-spacing: 1px; line-height: 1; }
.rs-menu {
  position: fixed; z-index: 1000;
  min-width: 210px; text-align: left; padding: 6px;
  background: var(--app-bg-2, #15181d); border: 1px solid var(--app-border, rgba(255,255,255,.12));
  border-radius: 10px; box-shadow: 0 12px 34px rgba(0,0,0,.45);
}
.rs-menu-item {
  display: flex; flex-direction: column; gap: 2px;
  width: 100%; text-align: left; padding: 9px 11px; border-radius: 7px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--app-fg-1); font-size: 13px; font-weight: 600; text-decoration: none;
}
.rs-menu-item:hover { background: var(--app-tint-2, rgba(255,255,255,.06)); }
.rs-menu-hint { font-size: 10.5px; font-weight: 500; color: var(--app-fg-3); }
.rs-menu-item--danger { color: #ff6b6b; }
.rs-menu-item--danger:hover { background: rgba(255,80,80,.12); }
.rs-regen-badge {
  display: inline-block; margin-left: 8px; padding: 3px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; vertical-align: middle;
  background: var(--app-tint-2, rgba(255,255,255,.08)); color: var(--app-fg-2);
}
.rs-regen-badge.done { background: rgba(46,160,87,.16); color: #4ade80; }
.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-metric-chips{display:flex;flex-wrap:wrap;align-items:center;gap:5px;padding:9px 14px;border-bottom:1px solid var(--app-border-soft)}
.ppc-bq .ppc-mc-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--app-fg-4);margin-right:4px}
.ppc-bq .ppc-mc{background:var(--app-surface);border:1px solid var(--app-border);color:var(--app-fg-3);border-radius:7px;padding:4px 10px;font-size:11.5px;font-weight:600;cursor:pointer;font-family:inherit}
.ppc-bq .ppc-mc:hover{background:var(--app-hover)}
.ppc-bq .ppc-mc.on{background:var(--accent,#F47920);border-color:var(--accent,#F47920);color:#fff}
.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}
/* Sin PPC · ficha de producto + barra de filtros */
.ppc-bq .ppc-asin{font-family:var(--mx-font-mono);font-size:11px;color:var(--app-fg-2);letter-spacing:.2px}
.ppc-bq .ppc-cat__t{display:inline-block;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;font-size:11.5px;color:var(--app-fg-2)}
.ppc-bq .ppc-stk{font-family:var(--mx-font-mono);font-weight:700;font-size:12px;color:var(--app-fg-1)}
.ppc-bq .ppc-stk.z{color:#f87171}
.ppc-bq .ppc-sinbar{gap:5px}
.ppc-bq .ppc-sinbar__n{margin-left:auto;color:var(--app-fg-4);font-size:11px;white-space:nowrap}
.ppc-bq .ppc-sinbar .btn.sm{padding:4px 11px;font-size:11.5px}
.ppc-bq .ppc-nm{white-space:nowrap}
.ppc-bq table.ppc-cat td,.ppc-bq table.ppc-cat th{white-space:nowrap}
.ppc-bq table.ppc-cat .ppc-neg,.ppc-bq table.ppc-cat .ppc-mt{white-space:nowrap}
/* 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 > .card{margin-bottom: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 .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}

/* controls row */
.seo-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:var(--d-gap,14px)}
.seo-controls .spacer{flex:1}
.seo-scopebadge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:650;color:var(--app-fg-3);background:var(--app-tint-1);border:1px solid var(--app-tint-3);padding:5px 10px;border-radius:8px}

/* SKU picker */
.seo-pickbox{position:relative}
.seo-pick{display:flex;align-items:center;gap:10px;background:var(--app-surface);border:1px solid var(--app-border);border-radius:10px;padding:5px 11px 5px 6px;cursor:pointer;min-width:230px}
.seo-pick:hover{border-color:var(--accent,#F47920)}
.seo-pick__thumb{width:32px;height:32px;border-radius:7px;object-fit:cover;background:var(--app-tint-2);flex:none}
.seo-pick__thumb.ph{display:grid;place-items:center;color:var(--app-fg-4);font-weight:800}
.seo-pick__lab{flex:1;min-width:0}
.seo-pick__lab .k{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--app-fg-4)}
.seo-pick__lab .v{font-size:12.5px;font-weight:680;color:var(--app-fg-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seo-pick__cv{color:var(--app-fg-4);font-size:13px}
.seo-ppanel{position:absolute;top:calc(100% + 6px);left:0;width:420px;max-height:62vh;overflow:auto;background:var(--app-surface);border:1px solid var(--app-border);border-radius:12px;box-shadow:var(--app-shadow);z-index:40;padding:8px}
.seo-ptabs{display:flex;gap:4px;padding:3px;background:var(--app-tint-2);border-radius:9px;margin-bottom:8px}
.seo-ptabs button{flex:1;border:none;background:none;padding:7px;border-radius:7px;font-size:12px;font-weight:650;color:var(--app-fg-3);cursor:pointer}
.seo-ptabs button.on{background:var(--app-surface);color:var(--app-fg-1);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.seo-psearch{width:100%;border:1px solid var(--app-border);background:var(--app-bg);color:var(--app-fg-1);border-radius:8px;padding:8px 11px;font-size:12.5px;margin-bottom:6px;outline:none}
.seo-pitem{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:9px;cursor:pointer}
.seo-pitem:hover{background:var(--app-tint-1)}
.seo-pitem.on{background:rgba(244,121,32,.12)}
.seo-pitem .th{width:38px;height:38px;border-radius:7px;object-fit:cover;background:var(--app-tint-2);flex:none;display:grid;place-items:center;color:var(--app-fg-4);font-weight:800}
.seo-pitem .nm{font-size:12.5px;font-weight:640;color:var(--app-fg-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seo-pitem .sb{font-size:11px;color:var(--app-fg-4);margin-top:1px}
.seo-pitem .sb b{font-family:ui-monospace,monospace;font-weight:500;color:var(--app-fg-4)}

/* KPIs */
.seo-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--d-gap,10px);margin-bottom:var(--d-gap,14px)}
.seo-kpis .ppc-kpi{border-top:2px solid rgba(244,121,32,.55)}
.seo-kpis .ppc-kpi__value{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.seo-kpis .ppc-kpi__value small{font-size:11px;font-weight:600;color:var(--app-fg-3)}

/* WoW delta + type chips */
.seo-dlt{font-size:10.5px;font-weight:750;padding:1px 6px;border-radius:5px;white-space:nowrap}
.seo-dlt.up{background:rgba(34,197,94,.15);color:#4ade80}
.seo-dlt.down{background:rgba(239,68,68,.15);color:#f87171}
.seo-dlt.flat{background:var(--app-tint-2);color:var(--app-fg-4)}
.seo-dlt.new{background:rgba(124,58,237,.18);color:#b084f5}
.seo-tchip{font-size:9px;font-weight:800;padding:2px 6px;border-radius:5px;text-transform:uppercase;letter-spacing:.2px}
.seo-tchip.brand{background:rgba(124,58,237,.18);color:#b084f5}
.seo-tchip.gen{background:var(--app-tint-2);color:var(--app-fg-3)}

/* trend strip */
.seo-trend{display:flex;align-items:stretch;gap:14px;background:var(--app-surface);border:1px solid var(--app-border);border-radius:10px;padding:13px 16px;margin-bottom:var(--d-gap,14px)}
.seo-trend__lab{flex:0 0 160px;border-right:1px solid var(--app-border);padding-right:14px}
.seo-trend__lab .h{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--app-fg-4)}
.seo-trend__lab .big{font-size:22px;font-weight:780;letter-spacing:-.5px;color:var(--app-fg-1);margin-top:3px}
.seo-trend__lab .d{font-size:11.5px;margin-top:4px;color:var(--app-fg-3)}
.seo-trend__charts{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.seo-mini .ml{font-size:10px;font-weight:700;color:var(--app-fg-4);text-transform:uppercase;letter-spacing:.3px;margin-bottom:6px;display:flex;justify-content:space-between;align-items:baseline}
.seo-mini .ml b{color:var(--app-fg-1);font-weight:760;font-size:12px}
.seo-mini .bars{display:flex;align-items:flex-end;gap:3px;height:40px}
.seo-mini .bars i{flex:1;background:linear-gradient(180deg,rgba(244,121,32,.6),rgba(244,121,32,.22));border-radius:2px 2px 0 0;min-height:2px}
.seo-mini .bars i.last{background:var(--accent,#F47920)}

.seo-pricewarn{font-size:11.5px;color:var(--app-fg-2);background:rgba(217,119,6,.10);border:1px solid rgba(217,119,6,.28);border-radius:8px;padding:8px 12px;margin-bottom:var(--d-gap,14px)}
.seo-pricewarn b{color:#fbbf24}

/* filter chips (lever / bucket) */
.seo-fchips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:var(--d-gap,12px)}
.seo-fchip{padding:6px 12px;border-radius:8px;border:1px solid var(--app-border);background:var(--app-surface);font-size:12px;font-weight:640;color:var(--app-fg-3);cursor:pointer;display:flex;align-items:center;gap:6px}
.seo-fchip:hover{color:var(--app-fg-1);border-color:var(--app-fg-4)}
.seo-fchip.on{background:var(--app-fg-1);color:var(--app-bg);border-color:var(--app-fg-1)}
.seo-fchip .n{font-size:10.5px;opacity:.65;font-weight:700}
.seo-fchip.invisible.on{background:#dc2626;color:#fff;border-color:#dc2626}
.seo-fchip.ctr.on{background:#d97706;color:#fff;border-color:#d97706}
.seo-fchip.cvr.on{background:#2563eb;color:#fff;border-color:#2563eb}
.seo-fchip.win.on{background:#16a34a;color:#fff;border-color:#16a34a}
/* "sin dato de compra" es ausencia de veredicto, no un veredicto: gris neutro. */
.seo-fchip.nodata.on{background:var(--app-fg-3);color:var(--app-bg);border-color:var(--app-fg-3)}

/* action cards (cliente) */
.seo-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--d-gap,13px)}
.seo-ac{background:var(--app-surface);border:1px solid var(--app-border);border-left:4px solid var(--lc,#F47920);border-radius:12px;padding:15px 16px}
.seo-ac__top{display:flex;align-items:flex-start;gap:10px;margin-bottom:11px}
.seo-ac__kw{flex:1;font-size:14.5px;font-weight:720;letter-spacing:-.2px;color:var(--app-fg-1)}
.seo-ac__kw small{display:flex;align-items:center;gap:7px;color:var(--app-fg-4);font-weight:500;font-size:11.5px;margin-top:3px}
.seo-lvr{font-size:9.5px;font-weight:800;padding:3px 9px;border-radius:7px;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}
.seo-lvr.ppc{background:rgba(124,58,237,.16);color:#b084f5}
.seo-lvr.list{background:rgba(217,119,6,.18);color:#fbbf24}
.seo-lvr.price{background:rgba(37,99,235,.16);color:#60a5fa}
.seo-lvr.prod{background:rgba(34,197,94,.16);color:#4ade80}
.seo-ac__stats{display:flex;gap:16px;margin-bottom:11px;flex-wrap:wrap}
.seo-ac__stats .l{font-size:10px;color:var(--app-fg-4);font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.seo-ac__stats .v{font-size:16px;font-weight:760;color:var(--app-fg-1);margin-top:1px;display:flex;align-items:baseline;gap:6px}
.seo-ac__stats .v.g{color:#4ade80}.seo-ac__stats .v.a{color:#fbbf24}.seo-ac__stats .v.r{color:#f87171}
.seo-ac__why{font-size:12.5px;color:var(--app-fg-3);margin-bottom:11px}
.seo-ac__why b{color:var(--app-fg-1)}
.seo-ac__do{display:flex;align-items:center;gap:9px;background:var(--app-tint-1);border-radius:9px;padding:9px 12px}
.seo-ac__do .ico{width:22px;height:22px;border-radius:6px;background:var(--lc,#F47920);display:grid;place-items:center;color:#fff;font-weight:800;font-size:12px;flex:none}
.seo-ac__do .txt{font-size:12px;font-weight:600;color:var(--app-fg-1)}
.seo-ac__do .up{margin-left:auto;text-align:right}
.seo-ac__do .up b{display:block;color:#4ade80;font-size:14px;font-weight:780}
.seo-ac__do .up span{font-size:10px;color:var(--app-fg-4)}

/* operación table */
.seo-oper .seo-otop{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:11px}
.seo-oper .seo-search{background:var(--app-bg);border:1px solid var(--app-border);border-radius:8px;padding:7px 11px;font-size:12.5px;color:var(--app-fg-1);min-width:230px;outline:none}
.seo-oper .seo-search:focus{border-color:var(--accent,#F47920)}
.seo-oper .seo-count{margin-left:auto;font-size:11.5px;color:var(--app-fg-4)}
.seo-tblwrap{overflow-x:auto}
.seo-otbl{width:100%;border-collapse:collapse;font-size:12.5px;min-width:1060px}
.seo-otbl thead th{position:sticky;top:0;background:var(--app-surface-2);text-align:right;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--app-fg-4);padding:9px 10px;cursor:pointer;white-space:nowrap;border-bottom:1px solid var(--app-border);user-select:none}
.seo-otbl thead th.l{text-align:left}
.seo-otbl thead th:hover,.seo-otbl thead th.on{color:var(--accent,#F47920)}
.seo-otbl tbody td{padding:7px 10px;border-bottom:1px solid var(--app-tint-1);text-align:right;white-space:nowrap;color:var(--app-fg-2)}
.seo-otbl tbody td.l{text-align:left}
.seo-otbl tbody tr:hover{background:var(--app-row-hover)}
.seo-okw{font-weight:600;max-width:220px;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:bottom;color:var(--app-fg-1)}
.seo-tag{font-size:9px;font-weight:800;padding:2px 7px;border-radius:5px;text-transform:uppercase}
.seo-tag.invisible{background:rgba(239,68,68,.16);color:#f87171}
.seo-tag.ctr{background:rgba(251,191,36,.16);color:#fbbf24}
.seo-tag.cvr{background:rgba(96,165,250,.18);color:#60a5fa}
.seo-tag.win{background:rgba(34,197,94,.16);color:#4ade80}
.seo-tag.nodata{background:var(--app-tint-4);color:var(--app-fg-3)}
.seo-rk{font-weight:700;padding:2px 7px;border-radius:5px;background:var(--app-tint-2)}
.seo-heat{border-radius:5px;padding:2px 7px;font-weight:600}
.seo-paid{color:#b084f5;font-weight:700}
.seo-dash{color:var(--app-fg-5)}
.seo-note{font-size:11px;color:var(--app-fg-4);margin-top:9px}

/* rank chip (legacy reuse) */
.seo-bq .seo-chip{font-weight:700;padding:2px 7px;border-radius:6px;font-size:11px;display:inline-block;min-width:40px;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:1100px){.seo-kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.seo-kpis{grid-template-columns:repeat(2,1fr)}.seo-cards{grid-template-columns:1fr}.seo-trend{flex-direction:column}.seo-trend__lab{border-right:none;border-bottom:1px solid var(--app-border);padding-right:0;padding-bottom:10px}}
/* ── 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)}}
/* Vendor loading skeleton (VendorSkeleton) */
.vsk{pointer-events:none}
.vsk-sh{position:relative;overflow:hidden;background:var(--app-tint-2);border-radius:8px;display:inline-block}
.vsk-sh::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.08) 50%,transparent 70%);background-size:220% 100%;animation:vskSweep 1.3s linear infinite}
@keyframes vskSweep{to{background-position:-220% 0}}
.vsk .ven-pills{border-bottom-color:transparent}
.vsk-pill{width:112px;height:30px;border-radius:999px}
.vsk-sub{width:min(320px,70%);height:12px;margin:2px 2px 12px;display:block}
.vsk-kpi{background:var(--app-surface);border:1px solid var(--app-border);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:9px}
.vsk-line{height:10px;border-radius:6px}
.vsk-line.s{width:55%}
.vsk-line.l{width:72%;height:22px}
.vsk-line.m{width:38%}
.vsk-chart{margin-top:14px;padding:16px 18px;display:flex;flex-direction:column;gap:16px}
.vsk-bars{display:flex;align-items:flex-end;gap:6px;height:180px}
.vsk-bar{flex:1;border-radius:4px 4px 0 0;min-width:6px}
.vsk-status{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:18px;font-size:12.5px;font-weight:600;color:var(--app-fg-2)}
/* Generic skeleton blocks (skeletons.jsx — window.SK) */
.vsk-nopad{border-bottom-color:transparent !important}
.vsk-table{margin-top:14px;padding:14px 18px;display:flex;flex-direction:column;gap:13px}
.vsk-table.bare{margin-top:0;padding:10px 4px}
.vsk-trow{display:flex;align-items:center;gap:14px}
.vsk-trow.head{margin-bottom:2px}
.vsk-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:6px}
.vsk-card{background:var(--app-surface);border:1px solid var(--app-border);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:11px}
@media (prefers-reduced-motion: reduce){.vsk-sh::after{animation:none}}
.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}}

/* ── Vendor 1P: capa "se entiende sin saber de 1P" ───────────── */
/* Nota explicativa, semáforo, hoy-en-vivo y órdenes de compra.   */
.ven-bq .ven-help{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;border:1px solid var(--app-fg-4);color:var(--app-fg-4);font-size:9.5px;font-weight:800;cursor:help;flex:none;vertical-align:middle;line-height:1}
.ven-bq .ven-help:hover,.ven-bq .ven-help:focus{border-color:var(--accent,#F47920);color:var(--accent,#F47920);outline:none}
.ven-bq .ven-note{font-size:12.5px;line-height:1.55;color:var(--app-fg-2);background:var(--app-tint-1);border:1px solid var(--app-tint-3);border-left:3px solid var(--accent,#F47920);border-radius:9px;padding:11px 14px;margin-bottom:16px}
.ven-bq .ven-note.lead{margin-bottom:18px}
.ven-bq .ven-note b{color:var(--app-fg-1)}
.ven-bq .ven-alert{font-size:12.5px;line-height:1.55;border-radius:9px;padding:11px 14px;margin:0 16px 14px}
.ven-bq .ven-alert.big{margin:0 0 20px;padding:13px 16px;font-size:13px}
.ven-bq .ven-alert.bad{background:rgba(220,38,38,.11);border:1px solid rgba(220,38,38,.4);color:#fca5a5}
.ven-bq .ven-alert.bad b{color:#fecaca}

.ven-bq .ven-health-card{margin-bottom:22px}
.ven-bq .ven-health{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:14px 16px 18px}
.ven-bq .ven-hcard{background:var(--app-tint-1);border:1px solid var(--app-tint-3);border-radius:11px;padding:12px 13px 13px;display:flex;flex-direction:column;gap:5px}
.ven-bq .ven-hcard.is-bad{border-color:rgba(220,38,38,.42);background:rgba(220,38,38,.06)}
.ven-bq .ven-hcard.is-warn{border-color:rgba(245,158,11,.38);background:rgba(245,158,11,.05)}
.ven-bq .ven-hcard__top{display:flex;align-items:center;gap:7px}
.ven-bq .ven-hdot{width:8px;height:8px;border-radius:50%;flex:none}
.ven-bq .ven-hcard__title{font-size:11.5px;font-weight:700;color:var(--app-fg-2);flex:1;min-width:0}
.ven-bq .ven-hcard__tag{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;border:1px solid;border-radius:999px;padding:1px 7px;flex:none}
.ven-bq .ven-hcard__val{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.05}
.ven-bq .ven-hcard__msg{font-size:11.5px;line-height:1.5;color:var(--app-fg-3);margin:0}
.ven-bq .ven-hcard__good{font-size:10.5px;color:var(--app-fg-4);font-weight:600;margin-top:auto;padding-top:4px}
@media(max-width:1250px){.ven-bq .ven-health{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.ven-bq .ven-health{grid-template-columns:1fr}}

.ven-bq .ven-ovs{padding:16px 18px 18px}
.ven-bq .ven-ovs__bar{display:flex;height:26px;border-radius:8px;overflow:hidden;background:var(--app-tint-3)}
.ven-bq .ven-ovs__fill{background:var(--accent,#F47920);transition:width .4s}
.ven-bq .ven-ovs__gap{transition:width .4s}
.ven-bq .ven-ovs__legend{display:flex;gap:24px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--app-fg-3)}
.ven-bq .ven-ovs__legend b{color:var(--app-fg-1);font-variant-numeric:tabular-nums}
.ven-bq .ven-ovs__legend .sw{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:7px;vertical-align:middle}
.ven-bq .ven-ovs__tot{margin-left:auto;color:var(--app-fg-4)}

.ven-bq .ven-live-wait{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--app-fg-3);padding:30px 4px}
.ven-bq .ven-live-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--app-fg-3);margin-bottom:14px}
.ven-bq .ven-live-head b{color:var(--app-fg-1)}
.ven-bq .ven-live-dot{width:8px;height:8px;border-radius:50%;background:hsl(142 71% 45%);display:inline-block;margin-right:8px;animation:venpulse 1.9s ease-in-out infinite}
@keyframes venpulse{0%,100%{opacity:1}50%{opacity:.35}}
.ven-bq .ven-live-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:14px}
.ven-bq .ven-livecard{background:var(--app-surface);border:1px solid var(--app-border);border-top:2px solid var(--accent,#F47920);border-radius:11px;padding:14px 16px 15px;display:flex;flex-direction:column;gap:4px}
.ven-bq .ven-livecard__lbl{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--app-fg-4);font-weight:700}
.ven-bq .ven-livecard__v{font-size:30px;font-weight:800;color:var(--app-fg-1);font-variant-numeric:tabular-nums;line-height:1.05}
.ven-bq .ven-livecard__cmp{display:flex;flex-direction:column;gap:2px;margin-top:5px;font-size:11.5px;color:var(--app-fg-4)}
.ven-bq .ven-livecard__cmp em{font-style:normal;font-weight:800;margin-left:6px;font-variant-numeric:tabular-nums}
.ven-bq .ven-livecard__cmp em.up{color:hsl(142 71% 52%)}
.ven-bq .ven-livecard__cmp em.down{color:#f87171}
@media(max-width:900px){.ven-bq .ven-live-cards{grid-template-columns:1fr}}

.ven-bq .ven-hours{display:flex;align-items:flex-end;gap:3px;padding:18px 18px 12px;height:190px}
.ven-bq .ven-hour{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%}
.ven-bq .ven-hour__col{position:relative;width:100%;flex:1;display:flex;align-items:flex-end;background:var(--app-tint-1);border-radius:4px}
.ven-bq .ven-hour.is-future .ven-hour__col{opacity:.45}
.ven-bq .ven-hour__bar{width:100%;background:var(--accent,#F47920);border-radius:4px;min-height:2px;transition:height .3s}
.ven-bq .ven-hour__avg{position:absolute;left:0;right:0;height:2px;background:var(--app-fg-3);opacity:.75;border-radius:2px}
.ven-bq .ven-hour__lbl{font-size:9.5px;color:var(--app-fg-4);font-variant-numeric:tabular-nums;height:12px}

.ven-bq .ven-days{display:flex;align-items:flex-end;gap:8px;padding:16px 16px 8px;height:180px}
.ven-bq .ven-day{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%}
.ven-bq .ven-day__bar{width:100%;border-radius:5px;min-height:3px}
.ven-bq .ven-day__u{font-size:11px;font-weight:700;color:var(--app-fg-2);font-variant-numeric:tabular-nums}
.ven-bq .ven-day__d{font-size:9.5px;color:var(--app-fg-4);white-space:nowrap}
.ven-bq .ven-lowlist{padding:2px 16px 16px;display:flex;flex-direction:column;gap:1px;max-height:300px;overflow-y:auto}
.ven-bq .ven-lowrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 2px;border-bottom:1px solid var(--app-tint-2);font-size:12px}
.ven-bq .ven-lowrow__n{color:var(--app-fg-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ven-bq .ven-lowrow b{font-variant-numeric:tabular-nums;color:var(--app-fg-1);flex:none}
.ven-bq .ven-lowrow b.low{color:#fb923c}.ven-bq .ven-lowrow b.zero{color:#f87171}

.ven-bq .ven-po-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:18px}
.ven-bq .ven-postat{background:var(--app-surface);border:1px solid var(--app-border);border-radius:11px;padding:13px 15px;display:flex;flex-direction:column;gap:3px}
.ven-bq .ven-postat.bad{border-color:rgba(220,38,38,.45);background:rgba(220,38,38,.06)}
.ven-bq .ven-postat.ok{border-color:rgba(34,197,94,.32)}
.ven-bq .ven-postat span{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--app-fg-4);font-weight:700}
.ven-bq .ven-postat b{font-size:26px;font-weight:800;color:var(--app-fg-1);font-variant-numeric:tabular-nums;line-height:1.05}
.ven-bq .ven-postat.bad b{color:#f87171}
.ven-bq .ven-postat i{font-size:11px;font-style:normal;color:var(--app-fg-4)}
.ven-bq .ven-po-filters{display:flex;gap:6px;flex-wrap:wrap}
.ven-bq .ven-pill.sm{font-size:11px;padding:4px 11px}
.ven-bq .ven-wtag{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;border:1px solid;border-radius:999px;padding:2px 8px;white-space:nowrap}
@media(max-width:1100px){.ven-bq .ven-po-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

.ven-bq .ven-note.fam{margin:0 18px 2px}
.ven-bq .ven-fam-card .ven-scroll{border-top:1px solid var(--app-border);margin-top:14px}
.ven-bq .ven-famrow{cursor:pointer}
.ven-bq .ven-famrow.on{background:var(--app-tint-1)}
.ven-bq .ven-caret{display:inline-block;width:13px;color:var(--app-fg-4);font-size:10px;transition:transform .15s}
.ven-bq .ven-caret.on{transform:rotate(90deg);color:var(--accent,#F47920)}
.ven-bq .ven-famchild td{background:var(--app-tint-1);font-size:11.5px;color:var(--app-fg-3);border-top:none}
.ven-bq .ven-famchild .ven-nm{font-weight:500;color:var(--app-fg-3);max-width:250px}
.ven-bq .ven-fam-more{padding:12px 18px 16px}
.ven-bq .ven-bsr{font-variant-numeric:tabular-nums;color:var(--app-fg-3)}
.ven-bq .ven-bsr.top{color:hsl(142 71% 52%);font-weight:700}

/* ── Vendor 1P · Resumen tipo reporte (27/09/2026) ── */
.ven-bq .vr-stamp{font-size:12px;color:var(--app-fg-2);margin:2px 2px 12px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.ven-bq .vr-stamp span{color:var(--app-fg-3)}
.ven-bq .vr-stamp em{font-style:normal;font-size:11px;color:var(--app-fg-4);margin-left:auto}
.ven-bq .vr-head{padding:18px 20px;margin-bottom:14px;border-left:3px solid var(--mx-orange)}
.ven-bq .vr-eyebrow{font-size:10.5px;text-transform:uppercase;letter-spacing:1.2px;color:var(--app-fg-3);font-weight:700}
.ven-bq .vr-h1{font-family:var(--mx-font-display);font-size:22px;font-weight:600;color:var(--app-fg-1);line-height:1.3;margin-top:6px}
.ven-bq .vr-k4{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:14px}
.ven-bq .vr-kpi{border-top-color:var(--app-border)}
.ven-bq .vr-kpi .value{font-size:30px}
.ven-bq .vr-spark{display:block;width:100%;height:52px}
.ven-bq .vr-raw{fill:none;stroke:var(--app-tint-5);stroke-width:1.2}
.ven-bq .vr-ma{fill:none;stroke:var(--mx-orange);stroke-width:2.4;stroke-linejoin:round}
.ven-bq .vr-trend{display:flex;justify-content:space-between;font-size:10.5px;color:var(--app-fg-4)}
.ven-bq .vr-d{font-family:var(--mx-font-mono);font-size:11.5px;font-weight:700;margin-left:4px}
.ven-bq .vr-d.up{color:hsl(142 60% 42%)}.ven-bq .vr-d.dn{color:hsl(0 65% 55%)}.ven-bq .vr-d.n{color:var(--app-fg-4)}
.ven-bq .vr-sec{margin-bottom:14px;overflow-x:auto}
.ven-bq .vr-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px 8px}
.ven-bq .vr-h h4{margin:0;font-size:14px;font-weight:700;color:var(--app-fg-1)}
.ven-bq .vr-h .sub{font-size:11.5px;color:var(--app-fg-4)}
.ven-bq .vr-pad{padding:0 16px 12px}
.ven-bq .vr-empty{padding:10px 16px 16px;font-size:12.5px;color:var(--app-fg-3);display:flex;gap:8px;align-items:center}
.ven-bq .vr-foot{font-size:11px;color:var(--app-fg-4);padding:8px 16px 14px}
.ven-bq .vr-leg{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:11px;color:var(--app-fg-3);margin-bottom:6px}
.ven-bq .vr-leg span{display:inline-flex;gap:6px;align-items:center}
.ven-bq .vr-leg em{font-style:normal;color:var(--app-fg-4)}
.ven-bq .vr-leg i{width:12px;height:10px;border-radius:2px;display:inline-block}
.ven-bq .vr-leg i.on{background:rgba(244,121,32,.5)}.ven-bq .vr-leg i.off{background:var(--app-tint-4)}
.ven-bq .vr-leg i.ln{height:3px;background:var(--mx-orange)}
.ven-bq .vr-leg i.sa{height:3px;background:#3b82f6}.ven-bq .vr-leg i.sp{height:0;border-top:2px dashed var(--mx-orange);border-radius:0}
.ven-bq .vr-leg i.act{background:var(--app-tint-5)}.ven-bq .vr-leg i.fc{background:var(--mx-orange)}.ven-bq .vr-leg i.p90{background:rgba(244,121,32,.22)}
.ven-bq .vr-daily,.ven-bq .vr-fc{display:block;width:100%;height:190px}
.ven-bq .vr-bar{fill:var(--app-tint-4)}.ven-bq .vr-bar.on{fill:rgba(244,121,32,.5)}
.ven-bq .vr-ax{font-size:10px;fill:var(--app-fg-4);font-family:var(--mx-font-mono)}.ven-bq .vr-ax.b{fill:var(--app-fg-2);font-weight:700;font-size:11px}
.ven-bq .vr-now{stroke:var(--app-fg-3);stroke-dasharray:3 3}
.ven-bq .vr-fc-act{fill:var(--app-tint-5)}.ven-bq .vr-fc-m{fill:var(--mx-orange)}.ven-bq .vr-fc-p90{fill:rgba(244,121,32,.2)}
.ven-bq .vr-pks{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--app-border-soft);border-top:1px solid var(--app-border-soft);border-bottom:1px solid var(--app-border-soft)}
.ven-bq .vr-pk{background:var(--app-surface);padding:10px 14px;display:flex;flex-direction:column;gap:2px}
.ven-bq .vr-pk span{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--app-fg-4);font-weight:700}
.ven-bq .vr-pk b{font-family:var(--mx-font-display);font-size:21px;color:var(--app-fg-1);line-height:1.1}
.ven-bq .vr-pk .vr-d{margin:0}
.ven-bq .vr-pk em{font-style:normal;font-size:10.5px;color:var(--app-fg-4)}
.ven-bq .vr-ppcg{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px;padding:14px 16px;align-items:center}
.ven-bq .vr-ads{display:block;width:100%;height:140px}
.ven-bq .vr-l-sa{fill:none;stroke:#3b82f6;stroke-width:2.2}.ven-bq .vr-l-sp{fill:none;stroke:var(--mx-orange);stroke-width:2.2;stroke-dasharray:5 4}
.ven-bq .vr-ty{margin-bottom:12px}
.ven-bq .vr-ty .t{display:flex;justify-content:space-between;font-size:12px;color:var(--app-fg-2);margin-bottom:4px}
.ven-bq .vr-ty .t b{color:var(--app-fg-1)}.ven-bq .vr-ty .t span{font-family:var(--mx-font-mono);font-size:11.5px}
.ven-bq .vr-ty .vr-bar{height:8px;max-width:none}
.ven-bq div.vr-bar{height:4px;background:var(--app-tint-2);border-radius:3px;margin-top:4px;max-width:240px}
.ven-bq div.vr-bar i{display:block;height:100%;background:var(--mx-orange);border-radius:3px;opacity:.85}
.ven-bq .vr-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.ven-bq .vr-tbl th{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--app-fg-4);font-weight:700;text-align:left;padding:7px 14px;border-bottom:1px solid var(--app-border)}
.ven-bq .vr-tbl td{padding:8px 14px;border-bottom:1px solid var(--app-border-soft);color:var(--app-fg-2);vertical-align:middle}
.ven-bq .vr-tbl tr:last-child td{border-bottom:none}
.ven-bq .vr-tbl .r{text-align:right;font-family:var(--mx-font-mono);font-variant-numeric:tabular-nums}
.ven-bq .vr-tbl .b{color:var(--app-fg-1);font-weight:700}.ven-bq .vr-tbl .mono{font-family:var(--mx-font-mono)}
.ven-bq .vr-tbl .nm{color:var(--app-fg-1);font-weight:600;max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ven-bq .vr-tag{display:inline-block;padding:2px 8px;border-radius:8px;font-size:10.5px;font-weight:700;background:var(--app-tint-3);color:var(--app-fg-3);white-space:nowrap}
.ven-bq .vr-vs{position:relative;height:16px;min-width:180px}
.ven-bq .vr-vs i{position:absolute;left:0;border-radius:3px;display:block}
.ven-bq .vr-vs i.e{top:0;height:8px;background:var(--mx-orange)}.ven-bq .vr-vs i.h{top:9px;height:6px;background:var(--app-tint-5)}
.ven-bq .vr-po{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:24px;padding:6px 16px 12px;align-items:end}
.ven-bq .vr-stack{display:flex;height:20px;border-radius:5px;overflow:hidden;background:var(--app-tint-2);margin-bottom:12px}
.ven-bq .vr-stack i{display:block;height:100%}
.ven-bq .vr-pls{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
.ven-bq .vr-pl{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--app-fg-2)}
.ven-bq .vr-pl>span{width:10px;height:10px;border-radius:3px;flex:none;margin-top:4px}
.ven-bq .vr-pl b{font-family:var(--mx-font-display);font-size:18px;color:var(--app-fg-1);margin-right:2px}
.ven-bq .vr-pl em{display:block;font-style:normal;font-size:11px;color:var(--app-fg-4);font-family:var(--mx-font-mono)}
.ven-bq .vr-poc{display:block;width:100%;height:130px}
.ven-bq .vr-po-new{background:#60a5fa;fill:#60a5fa}
.ven-bq .vr-po-open{background:var(--mx-orange);fill:var(--mx-orange)}
.ven-bq .vr-po-late{background:#94a3b8;fill:#94a3b8}
.ven-bq .vr-po-closed{background:#475569;fill:#475569}
.ven-bq .vr-st{display:inline-block;padding:2px 8px;border-radius:8px;font-size:10.5px;font-weight:700;white-space:nowrap;color:#fff}
.ven-bq .vr-st.vr-po-late{color:#1e293b}
.ven-bq .vr-chips{display:flex;gap:6px;padding:4px 16px 8px}
.ven-bq .vr-chips button{border:1px solid var(--app-tint-4);background:var(--app-tint-1);color:var(--app-fg-2);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:600;cursor:pointer}
.ven-bq .vr-chips button.on{background:rgba(244,121,32,.14);border-color:var(--mx-orange);color:var(--app-fg-1)}
@media (max-width:1100px){
  .ven-bq .vr-k4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ven-bq .vr-pks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ven-bq .vr-ppcg,.ven-bq .vr-po{grid-template-columns:1fr}
  .ven-bq .vr-stamp em{margin-left:0}
}

/* ── 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}}

/* ════════════ Settlements v2 — period tiles + per-product P&L ════════════ */
.set2{ --s2-green:#22c55e; --s2-red:#ef4444; --s2-blue:#60a5fa; }
.set2 .s2-sub{ color:var(--app-fg-3); font-size:12px; margin-bottom:16px; }
/* tiles */
.set2 .s2-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
@media(max-width:1100px){ .set2 .s2-tiles{ grid-template-columns:repeat(2,1fr); } }
.set2 .s2-tile{ border-radius:14px; border:1px solid var(--app-border); background:var(--app-surface); cursor:pointer; transition:transform .15s,box-shadow .15s; position:relative; }
.set2 .s2-tile:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.28); }
.set2 .s2-tile.sel{ box-shadow:0 0 0 2px #FDBA74, 0 12px 30px rgba(0,0,0,.32); }
.set2 .s2-band{ padding:13px 15px 11px; color:#fff; position:relative; border-radius:13px 13px 0 0; }
.set2 .s2-band h3{ font-family:var(--mx-font-display); font-size:17px; font-weight:700; padding-right:34px; margin:0; }
.set2 .s2-band .rng{ font-size:11px; opacity:.92; margin-top:1px; font-weight:500; }
.set2 .s2-cal{ position:absolute; top:10px; right:10px; width:28px; height:28px; border-radius:8px; background:rgba(0,0,0,.24); display:flex; align-items:center; justify-content:center; transition:.12s; color:#fff; }
.set2 .s2-cal:hover{ background:rgba(0,0,0,.44); }
.set2 .s2-body{ padding:13px 15px 11px; }
.set2 .s2-sales-l{ font-size:11px; color:var(--app-fg-3); display:flex; align-items:center; gap:7px; }
.set2 .s2-sales{ font-family:var(--mx-font-display); font-size:29px; font-weight:800; line-height:1; margin:3px 0 11px; color:var(--app-fg-1); }
.set2 .s2-chip{ font-size:10.5px; font-weight:700; padding:1px 6px; border-radius:5px; }
.set2 .s2-chip.up{ background:rgba(34,197,94,.16); color:var(--s2-green); }
.set2 .s2-chip.down{ background:rgba(239,68,68,.16); color:var(--s2-red); }
.set2 .s2-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 10px; }
.set2 .s2-kv .k{ font-size:9.5px; color:var(--app-fg-4); text-transform:uppercase; letter-spacing:.3px; }
.set2 .s2-kv .v{ font-family:var(--mx-font-mono); font-size:13px; font-weight:600; margin-top:1px; color:var(--app-fg-1); }
.set2 .s2-more{ margin-top:12px; padding-top:10px; border-top:1px solid var(--app-border-soft); text-align:center; color:#F47920; font-weight:700; font-size:12px; cursor:pointer; transition:color .15s; }
.set2 .s2-more:hover{ color:var(--mx-orange-hover,#E56A15); }
.set2 .s2-sel-hint{ margin-top:12px; padding-top:10px; border-top:1px solid var(--app-border-soft); text-align:center; color:var(--s2-green); font-weight:700; font-size:10.5px; letter-spacing:.3px; }
.set2 .s2-sel-hint + .s2-more{ margin-top:6px; padding-top:0; border-top:0; }
/* ── "Ver desglose" P&L popup ── */
.set2 .s2-modal{ position:fixed; inset:0; z-index:1000; background:rgba(5,9,14,.6); backdrop-filter:blur(3px); display:grid; place-items:center; padding:12px; animation:s2modalin .15s ease-out; }
/* Los modales altos se anclan arriba en vez de centrarse: centrar reparte el
   desbordamiento entre los dos bordes y esconde el encabezado. Pegados al tope,
   lo primero que se ve es el título y el sobrante lo absorbe el scroll interno. */
.set2 .s2-modal.arriba{ align-items:start; }
@keyframes s2modalin{ from{opacity:0} to{opacity:1} }
.set2 .s2-modal__card{ position:relative; width:100%; max-width:400px; max-height:86vh; overflow-y:auto; background:var(--app-bg-1,#0D1826); border:1px solid var(--app-border); border-radius:14px; box-shadow:0 30px 70px -24px #000; }
.set2 .s2-modal__x{ position:absolute; top:12px; right:12px; z-index:2; width:26px; height:26px; border-radius:7px; border:1px solid var(--app-border); background:var(--app-tint-1); color:var(--app-fg-2); font-size:13px; cursor:pointer; display:grid; place-items:center; }
.set2 .s2-modal__x:hover{ color:var(--app-fg-1); background:var(--app-tint-2); }
.set2 .neg{ color:var(--s2-red); } .set2 .pos{ color:var(--s2-green); } .set2 .reflink{ color:var(--s2-blue); font-weight:600; }
/* calendar popover */
.set2 .s2-calmenu{ position:absolute; top:46px; right:6px; z-index:40; background:var(--app-surface); border:1px solid var(--app-border); border-radius:12px; box-shadow:0 18px 46px rgba(0,0,0,.5); display:grid; grid-template-columns:118px 226px; overflow:hidden; cursor:default; color:var(--app-fg-1); }
.set2 .s2-presets{ border-right:1px solid var(--app-border); padding:8px 6px; display:flex; flex-direction:column; gap:1px; }
.set2 .s2-presets__t{ font-size:9px; text-transform:uppercase; letter-spacing:.5px; color:var(--app-fg-4); padding:4px 8px 5px; font-weight:700; }
.set2 .s2-opt{ text-align:left; padding:7px 9px; border-radius:7px; font-size:12px; color:var(--app-fg-2); font-weight:500; background:none; border:none; cursor:pointer; }
.set2 .s2-opt:hover{ background:var(--app-tint-2); color:var(--app-fg-1); }
.set2 .s2-opt.on{ background:rgba(244,121,32,.16); color:#F47920; font-weight:700; }
.set2 .s2-calbox{ padding:11px 13px; }
.set2 .s2-calhead{ display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; }
.set2 .s2-calhead b{ font-size:13px; font-weight:700; }
.set2 .s2-calnav{ width:24px; height:24px; border-radius:6px; background:var(--app-tint-2); display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--app-fg-2); border:none; cursor:pointer; }
.set2 .s2-calnav:hover{ color:var(--app-fg-1); }
.set2 .s2-calgrid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.set2 .s2-dow{ font-size:9px; color:var(--app-fg-4); text-align:center; padding:3px 0; font-weight:700; }
.set2 .s2-day{ aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:11px; font-family:var(--mx-font-mono); color:var(--app-fg-2); border-radius:6px; cursor:pointer; border:none; background:none; }
.set2 .s2-day:hover{ background:var(--app-tint-2); color:var(--app-fg-1); }
.set2 .s2-day.muted{ opacity:0; cursor:default; }
.set2 .s2-day.inrange{ background:rgba(244,121,32,.16); border-radius:0; }
.set2 .s2-day.end{ background:#F47920; color:#fff; font-weight:700; border-radius:6px; }
.set2 .s2-calfoot{ display:flex; align-items:center; justify-content:space-between; margin-top:9px; padding-top:8px; border-top:1px solid var(--app-border-soft); }
.set2 .s2-calfoot .selr{ font-size:11px; color:var(--app-fg-3); font-family:var(--mx-font-mono); }
.set2 .s2-apply{ padding:6px 13px; border-radius:7px; background:#F47920; color:#fff; font-size:12px; font-weight:700; border:none; cursor:pointer; }
.set2 .s2-apply:disabled{ opacity:.4; cursor:not-allowed; }
/* lower layout */
.set2 .s2-lower{ display:grid; grid-template-columns:1fr; gap:18px; align-items:start; }
.set2 .s2-panel{ background:var(--app-surface); border:1px solid var(--app-border); border-radius:14px; overflow:hidden; }
/* products header + lens filters */
.set2 .s2-ph{ display:flex; align-items:center; gap:16px; padding:14px 18px 0; }
.set2 .s2-ph__tab{ font-size:13px; font-weight:600; color:var(--app-fg-1); padding-bottom:11px; border-bottom:2px solid #F47920; display:flex; align-items:center; gap:6px; }
.set2 .s2-group{ margin-left:auto; display:flex; gap:3px; background:var(--app-bg); border:1px solid var(--app-border); border-radius:8px; padding:3px; }
.set2 .s2-group button{ padding:5px 11px; border-radius:6px; font-size:11.5px; font-weight:600; color:var(--app-fg-3); border:none; background:none; cursor:pointer; }
.set2 .s2-group button.on{ background:#F47920; color:#fff; }
/* KAI — avance real del turno (paso, consultas hechas, aviso de atoro) */
.kai-prog{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:3px; font-size:10.5px; font-family:var(--mx-font-mono); }
.kai-prog__paso{ color:var(--app-fg-3); font-weight:600; }
.kai-prog__hechos{ color:var(--app-fg-4); cursor:help; border-bottom:1px dotted var(--app-fg-4); }
.kai-prog__quieto{ color:var(--app-fg-4); }
.kai-prog__atoro{ color:#F59E0B; font-weight:700; }
.kai-kaihead__pulse.quieto{ background:#F59E0B; animation:none; }

/* costo editable en la tabla de Rentabilidad */
.set2 .s2-costo{ display:inline-flex; align-items:center; gap:5px; justify-content:flex-end; }
.set2 .s2-costo input{ width:84px; padding:4px 7px; border-radius:6px; border:1px solid var(--app-border); background:var(--app-bg); color:var(--app-fg-1); font-size:11.5px; text-align:right; font-family:var(--mx-font-mono); }
.set2 .s2-costo input:focus{ border-color:#F47920; outline:none; }
.set2 .s2-costo input:disabled{ opacity:.6; }
.set2 .s2-costo__ok{ border:none; background:#F47920; color:#fff; width:20px; height:20px; border-radius:5px; font-size:11px; cursor:pointer; line-height:1; padding:0; }
.set2 .s2-costo__wait{ font-size:11px; color:var(--app-fg-4); }
.set2 .s2-costo__done{ font-size:11px; color:var(--s2-green); }
.set2 .s2-costo__err{ font-size:11px; color:var(--s2-red); cursor:help; }
.set2 .s2-tbl th.fill{ color:#F47920; }

/* aviso de marca sin COGS (3P Sellers) */
.cogs-alert{ display:flex; align-items:center; gap:13px; margin:14px 0 0; padding:12px 16px; border-radius:11px; border:1px solid var(--app-border); background:var(--app-surface-2); }
.cogs-alert.hard{ border-color:rgba(244,121,32,.45); background:rgba(244,121,32,.09); }
.cogs-alert .ca-ic{ font-size:17px; line-height:1; color:#F47920; flex-shrink:0; }
.cogs-alert .ca-txt{ flex:1; min-width:0; }
.cogs-alert .ca-txt b{ display:block; font-size:13px; font-weight:600; color:var(--app-fg-1); margin-bottom:2px; }
.cogs-alert .ca-txt span{ display:block; font-size:11.5px; line-height:1.5; color:var(--app-fg-3); }
.cogs-alert .ca-btn{ flex-shrink:0; padding:8px 15px; border-radius:9px; border:1px solid #F47920; background:#F47920; color:#fff; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; }
.cogs-alert .ca-btn:hover:not(:disabled){ filter:brightness(1.08); }
.cogs-alert .ca-btn:disabled{ opacity:.6; cursor:default; }
@media (max-width: 700px){ .cogs-alert{ flex-wrap:wrap; } .cogs-alert .ca-btn{ width:100%; } }

/* "?" de metodología */
.set2 .s2-help{ margin-left:8px; width:18px; height:18px; border-radius:50%; border:1px solid var(--app-border); background:var(--app-bg); color:var(--app-fg-3); font-size:11px; font-weight:700; cursor:pointer; line-height:1; padding:0; vertical-align:middle; }
.set2 .s2-help:hover{ border-color:#F47920; color:#F47920; }
.set2 .s2-modal__card.met{ max-width:640px; max-height:calc(100vh - 24px); min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.set2 .mt-scroll{ flex:1 1 auto; min-height:0; overflow:auto; padding:4px 18px 18px; }
.set2 .mt-blk{ padding:13px 0; border-bottom:1px solid var(--app-border-soft); }
.set2 .mt-blk:last-child{ border-bottom:none; }
.set2 .mt-t{ font-size:12px; font-weight:700; color:#F47920; text-transform:uppercase; letter-spacing:.4px; margin-bottom:5px; }
.set2 .mt-b{ font-size:12.5px; line-height:1.65; color:var(--app-fg-2); }
.set2 .mt-b b{ color:var(--app-fg-1); font-weight:600; }

/* costos de producto (COGS): botón + gestor */
.set2 .s2-tplbtn{ padding:7px 13px; border-radius:8px; font-size:11.5px; font-weight:600; color:var(--app-fg-2); border:1px solid var(--app-border); background:var(--app-bg); cursor:pointer; white-space:nowrap; }
.set2 .s2-tplbtn:hover:not(:disabled){ border-color:#F47920; color:#F47920; }
.set2 .s2-tplbtn:disabled{ opacity:.55; cursor:default; }
/* Aire de 56px arriba y abajo (nunca full-height) y alto acotado a la ventana:
   el scroll vive dentro de la tabla, no en el modal. */
/* min-height:0 es obligatorio: como item de grid su min-height es `auto`, que
   resuelve a la altura del contenido y GANA sobre max-height. Sin esto la
   tarjeta medía lo que pedía la tabla y cualquier tope de altura se ignoraba
   en silencio — la causa real de que el modal se cortara. */
.set2 .s2-modal__card.cogs{ max-width:1060px; max-height:calc(100vh - 24px); min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.set2 .cg-head{ flex:0 0 auto; padding:11px 46px 9px 18px; border-bottom:1px solid var(--app-border); }
.set2 .cg-head h3{ margin:0; font-size:15px; font-weight:700; color:var(--app-fg-1); }
.set2 .cg-sub{ font-size:11.5px; color:var(--app-fg-4); margin-top:3px; }
.set2 .cg-bar{ flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:9px 18px; border-bottom:1px solid var(--app-border); background:var(--app-surface-2); flex-wrap:wrap; }
.set2 .cg-q{ flex:1; min-width:180px; padding:7px 11px; border-radius:8px; border:1px solid var(--app-border); background:var(--app-bg); color:var(--app-fg-1); font-size:12px; }
.set2 .cg-chk{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--app-fg-3); cursor:pointer; white-space:nowrap; }
.set2 .cg-acts{ display:flex; gap:7px; }
.set2 .cg-acts button{ padding:7px 12px; border-radius:8px; font-size:11.5px; font-weight:600; color:var(--app-fg-2); border:1px solid var(--app-border); background:var(--app-bg); cursor:pointer; white-space:nowrap; }
.set2 .cg-acts button:hover:not(:disabled){ border-color:#F47920; color:#F47920; }
.set2 .cg-acts button:disabled{ opacity:.5; cursor:default; }
.set2 .cg-aviso{ flex:0 0 auto; margin:10px 18px 0; padding:9px 12px; border-radius:8px; font-size:11.5px; line-height:1.5; }
.set2 .cg-aviso.ok{ background:rgba(34,197,94,.12); color:var(--s2-green); border:1px solid rgba(34,197,94,.3); }
.set2 .cg-aviso.err{ background:rgba(239,68,68,.12); color:var(--s2-red); border:1px solid rgba(239,68,68,.3); }
.set2 .cg-det{ margin-top:5px; font-size:10.5px; opacity:.85; }
/* min-height:0 es lo que permite que este bloque se encoja: sin él, un item
   flex no baja de la altura de su contenido y el modal desborda la ventana,
   cortando encabezado y pie. */
.set2 .cg-scroll{ flex:1 1 auto; min-height:0; overflow:auto; padding:0 18px; margin-top:6px; }
/* Ancho fijo por columna: el nombre del producto se lleva el sobrante y se
   recorta, en vez de estirar la tabla y sacar scroll horizontal en el modal. */
.set2 .cg-tbl{ width:100%; border-collapse:collapse; font-size:12px; table-layout:fixed; }
.set2 .cg-tbl th:nth-child(2), .set2 .cg-tbl td:nth-child(2){ width:88px; }
.set2 .cg-tbl th:nth-child(3), .set2 .cg-tbl td:nth-child(3){ width:64px; }
.set2 .cg-tbl th:nth-child(4), .set2 .cg-tbl td:nth-child(4),
.set2 .cg-tbl th:nth-child(5), .set2 .cg-tbl td:nth-child(5){ width:112px; }
.set2 .cg-tbl th:nth-child(6), .set2 .cg-tbl td:nth-child(6){ width:64px; }
.set2 .cg-tbl th:nth-child(7), .set2 .cg-tbl td:nth-child(7){ width:132px; }
.set2 .cg-tbl thead th{ position:sticky; top:0; z-index:1; background:var(--app-surface-2); text-align:right; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--app-fg-4); padding:9px 10px; border-bottom:1px solid var(--app-border); white-space:nowrap; }
.set2 .cg-tbl thead th.l{ text-align:left; }
.set2 .cg-tbl thead th.fill{ color:#F47920; }
.set2 .cg-tbl td{ padding:6px 10px; text-align:right; border-bottom:1px solid var(--app-border-soft); color:var(--app-fg-1); }
.set2 .cg-tbl td.l{ text-align:left; }
.set2 .cg-tbl tr.dirty{ background:rgba(244,121,32,.08); }
/* El nombre y el subtítulo se recortan: sin esto una lista con títulos largos
   ensancha la tabla y aparece scroll horizontal en todo el modal. */
.set2 .cg-pt{ min-width:0; }
.set2 .cg-pt b, .set2 .cg-pt span{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.set2 .cg-pt b{ font-size:12px; font-weight:600; color:var(--app-fg-1); }
.set2 .cg-pt span{ font-size:10.5px; color:var(--app-fg-4); font-family:var(--mx-font-mono); }
.set2 .cg-tbl td.fill input{ width:86px; padding:5px 8px; border-radius:6px; border:1px solid var(--app-border); background:var(--app-bg); color:var(--app-fg-1); font-size:12px; text-align:right; font-family:var(--mx-font-mono); }
.set2 .cg-tbl td.fill input:focus{ border-color:#F47920; outline:none; }
.set2 .cg-cur{ font-size:11px; color:var(--app-fg-4); font-family:var(--mx-font-mono); }
.set2 .cg-date{ padding:4px 7px; border-radius:6px; border:1px solid var(--app-border); background:var(--app-bg); color:var(--app-fg-3); font-size:11px; }
.set2 .cg-mas{ padding:10px 2px; font-size:11px; color:var(--app-fg-4); }
.set2 .cg-foot{ flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:10px 18px; border-top:1px solid var(--app-border); background:var(--app-surface-2); }
.set2 .cg-cnt{ font-size:12px; font-weight:600; color:var(--app-fg-1); white-space:nowrap; }
.set2 .cg-note{ flex:1; font-size:10.5px; color:var(--app-fg-4); line-height:1.4; }
.set2 .cg-save{ padding:9px 18px; border-radius:9px; border:none; background:#F47920; color:#fff; font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap; }
.set2 .cg-save:disabled{ opacity:.4; cursor:default; }
.set2 .s2-filters{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:11px 18px; border-top:1px solid var(--app-border); border-bottom:1px solid var(--app-border); background:var(--app-surface-2); }
.set2 .s2-filters .lbl{ font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:var(--app-fg-4); font-weight:700; }
.set2 .s2-lens{ padding:6px 13px; border-radius:999px; font-size:12px; font-weight:600; color:var(--app-fg-3); border:1px solid var(--app-border); background:var(--app-bg); cursor:pointer; }
.set2 .s2-lens:hover{ color:var(--app-fg-1); border-color:var(--app-fg-4); }
.set2 .s2-lens.on{ background:#F47920; border-color:#F47920; color:#fff; }
/* products table */
.set2 .s2-scroll{ overflow-x:auto; }
.set2 .s2-tbl{ width:100%; border-collapse:collapse; font-size:12px; }
.set2 .s2-tbl thead th{ background:var(--app-surface-2); text-align:right; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--app-fg-4); padding:10px 12px; border-bottom:1px solid var(--app-border); white-space:nowrap; }
.set2 .s2-tbl thead th.l{ text-align:left; }
.set2 .s2-tbl td{ padding:9px 12px; text-align:right; border-bottom:1px solid var(--app-border-soft); font-family:var(--mx-font-mono); white-space:nowrap; color:var(--app-fg-1); }
.set2 .s2-tbl td.l{ text-align:left; font-family:var(--mx-font-sans); }
.set2 .s2-tbl tr.parent{ cursor:pointer; }
.set2 .s2-tbl tr.parent:hover{ background:var(--app-tint-1); }
.set2 .s2-tbl tr.child{ background:rgba(0,0,0,.16); }
.set2 .s2-prod{ display:flex; align-items:center; gap:11px; min-width:0; }
.set2 .s2-chev{ width:13px; color:var(--app-fg-4); font-size:10px; flex-shrink:0; transition:.15s; display:inline-block; }
.set2 .s2-chev.open{ transform:rotate(90deg); color:#F47920; }
.set2 .s2-img{ width:38px; height:38px; border-radius:7px; object-fit:cover; background:var(--app-surface-2); flex-shrink:0; border:1px solid var(--app-border); }
.set2 .s2-img.sm{ width:30px; height:30px; }
.set2 .s2-pt{ min-width:0; }
.set2 .s2-pt b{ font-size:12.5px; font-weight:600; color:var(--app-fg-1); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:280px; }
.set2 .s2-pt span{ font-family:var(--mx-font-mono); font-size:10.5px; color:var(--app-fg-4); }
.set2 .s2-tacos{ font-family:var(--mx-font-mono); font-size:11px; font-weight:700; padding:2px 7px; border-radius:6px; }
/* drawer */
.set2 .s2-drawer{ position:sticky; top:14px; }
.set2 .s2-dh{ padding:14px 18px; border-bottom:1px solid var(--app-border); }
.set2 .s2-dh h3{ font-family:var(--mx-font-display); font-size:17px; margin:0; }
.set2 .s2-dh .rng{ font-size:11px; color:var(--app-fg-3); margin-top:2px; }
.set2 .s2-drow{ display:flex; align-items:center; justify-content:space-between; padding:9px 18px; border-bottom:1px solid var(--app-border-soft); font-size:12.5px; }
.set2 .s2-drow .dk{ color:var(--app-fg-2); display:flex; align-items:center; gap:7px; }
.set2 .s2-drow .dv{ font-family:var(--mx-font-mono); font-weight:600; color:var(--app-fg-1); }
.set2 .s2-drow.exp .dk{ cursor:pointer; }
.set2 .s2-drow.exp .dk::before{ content:'▸'; color:var(--app-fg-4); font-size:9px; display:inline-block; transition:.15s; }
.set2 .s2-drow.exp.open .dk::before{ transform:rotate(90deg); color:#F47920; }
.set2 .s2-drow.head{ background:var(--app-tint-1); } .set2 .s2-drow.head .dk{ font-weight:700; color:var(--app-fg-1); } .set2 .s2-drow.head .dv{ font-weight:800; }
.set2 .s2-drow.sub{ padding:7px 18px 7px 34px; background:rgba(0,0,0,.16); font-size:11.5px; } .set2 .s2-drow.sub .dk{ color:var(--app-fg-3); }
.set2 .s2-drow.metric .dk{ color:var(--app-fg-3); text-transform:uppercase; font-size:10.5px; letter-spacing:.4px; } .set2 .s2-drow.metric .dv{ color:#F47920; }
.set2 .s2-cogsnote{ font-size:10.5px; color:#fbbf24; background:rgba(251,191,36,.1); padding:8px 18px; border-bottom:1px solid var(--app-border-soft); line-height:1.45; }
/* ── "Bloques" P&L popup (Ingresos / Costos / Resultado / Indicadores) ── */
/* Section label = the only structural device; colour is reserved for meaning
   (neg=red money out, pos=green result). Everything else stays neutral. */
.set2 .s2-sec{ padding:12px 18px 5px; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--app-fg-4); font-weight:700; border-top:1px solid var(--app-border); }
.set2 .s2-muted{ color:var(--app-fg-4); font-style:italic; }
/* Subdued, neutral advisory (no more amber block) — the emoji carries the hint. */
.set2 .s2-note{ font-size:10.5px; color:var(--app-fg-3); background:var(--app-tint-1); padding:8px 18px; border-bottom:1px solid var(--app-border-soft); line-height:1.45; }
/* Indicators as a calm 2-col grid instead of orange metric rows. */
.set2 .s2-ratios{ display:grid; grid-template-columns:1fr 1fr; }
.set2 .s2-ratio{ display:flex; align-items:center; justify-content:space-between; padding:9px 18px; border-bottom:1px solid var(--app-border-soft); }
.set2 .s2-ratio:nth-child(odd){ border-right:1px solid var(--app-border-soft); }
.set2 .s2-ratio .rk{ color:var(--app-fg-3); text-transform:uppercase; font-size:10px; letter-spacing:.06em; }
.set2 .s2-ratio .rv{ font-family:var(--mx-font-mono); font-weight:700; color:var(--app-fg-1); font-variant-numeric:tabular-nums; }
.set2 .hidden{ display:none; }
/* Settlements calendar — block today/future like the 3P Sellers calendar */
.set2 .s2-day:disabled, .set2 .s2-day.disabled { cursor:not-allowed; color:var(--app-fg-4); opacity:.4; }
.set2 .s2-day.disabled:hover { background:none; }
.set2 .s2-day.strike { position:relative; color:var(--app-fg-4); }
.set2 .s2-day.strike::after { content:''; position:absolute; left:16%; right:16%; top:50%; height:1.5px; background:#F47920; transform:rotate(-14deg); }
.set2 .s2-day.strike:hover { background:none; }

/* PPC hub — segmented control to switch Campañas / Automatización / Trazabilidad */
.ppc-seg { display:inline-flex; background:var(--app-surface); border:1px solid var(--app-border); border-radius:11px; padding:3px; gap:2px; margin-top:12px; }
.ppc-seg button { font-family:var(--mx-font-sans); font-size:13px; font-weight:600; color:var(--app-fg-3); background:transparent; border:0; padding:7px 16px; border-radius:8px; cursor:pointer; transition:.14s; }
.ppc-seg button:hover { color:var(--app-fg-1); }
.ppc-seg button.on { background:var(--mx-orange); color:#fff; font-weight:700; }

/* ── KAI "sigue pensando" floating pill (global, any section) ── */
.kai-pip {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border-radius: 999px;
  font-family: var(--mx-font-sans);
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
  backdrop-filter: blur(6px);
  animation: kaiPipIn .22s ease-out;
  user-select: none;
}
.kai-pip--think { background: rgba(20,20,24,.92); }
.kai-pip--done  { background: var(--mx-orange); }
.kai-pip--warn  { background: #b45309; }
.kai-pip__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--mx-orange);
  box-shadow: 0 0 0 0 rgba(244,121,32,.6);
}
.kai-pip--think .kai-pip__dot { animation: kaiPipPulse 1.1s ease-in-out infinite; }
.kai-pip--done .kai-pip__dot, .kai-pip--warn .kai-pip__dot { background: #fff; box-shadow: none; }
.kai-pip__time {
  font-family: var(--mx-font-mono);
  font-size: 11px;
  opacity: .8;
  font-weight: 500;
}
.kai-pip__x {
  background: transparent; border: 0; color: #fff;
  opacity: .7; cursor: pointer; font-size: 12px; line-height: 1;
  padding: 0 0 0 2px; margin-left: 2px;
}
.kai-pip__x:hover { opacity: 1; }
@keyframes kaiPipIn {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes kaiPipPulse {
  0%   { box-shadow: 0 0 0 0 rgba(244,121,32,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(244,121,32,0); }
  100% { box-shadow: 0 0 0 0 rgba(244,121,32,0); }
}

/* ═══════════ Contenido — Generador de Contenido (carrete T3) ═══════════ */
/* Los componentes de Contenido usan fondos oscuros hardcodeados (fallbacks),
   pero los títulos sin color explícito heredaban el texto del tema de la app —
   casi negro en tema claro → invisibles sobre el fondo oscuro. Se fuerza color
   claro en los contenedores raíz para que TODO texto herede legible sin importar
   el tema. Los colores explícitos (ej. la tarjeta blanca de Amazon) ganan igual. */
.ctn-lib, .ctn-ws, .ctn-lightbox{color:var(--text,#e6edf3)}
/* Y el color DIRECTO en los títulos (h3-h6) de Contenido: no depende de herencia,
   así ninguna regla del tema los deja invisibles. Se excluye h2 a propósito: la
   tarjeta blanca de Amazon (SEO) usa h2 y debe quedar oscura. */
.ctn-lib :is(h3,h4,h5,h6), .ctn-ws :is(h3,h4,h5,h6), .ctn-lightbox :is(h3,h4,h5,h6){color:var(--text,#e6edf3)}
.ctn-lib{padding:4px 6px}
.ctn-h{font-size:14px;margin:6px 0 10px;color:var(--text,#e6edf3)}
.ctn-dim{color:var(--muted,#8b95a5);font-size:12.5px}
.ctn-error{background:#f8514922;border:1px solid #f8514966;border-radius:9px;padding:9px 12px;font-size:12.5px;margin-bottom:12px}
.ctn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.ctn-prod{background:var(--card,#161b22);border:1px solid var(--border,#2a3240);border-radius:10px;padding:10px;cursor:pointer;transition:border-color .15s}
.ctn-prod:hover{border-color:#F4792088}
.ctn-ph{height:110px;border-radius:8px;background:var(--card2,#1c2330);display:flex;align-items:center;justify-content:center;font-size:30px;overflow:hidden;margin-bottom:8px}
.ctn-ph img{width:100%;height:100%;object-fit:contain}
.ctn-prod h4{font-size:12.5px;margin:0 0 2px;line-height:1.3;max-height:33px;overflow:hidden}
.ctn-prod p{font-size:11px;color:var(--muted,#8b95a5);margin:0 0 8px}
.ctn-row{display:flex;align-items:center;justify-content:space-between;gap:6px}
.ctn-ring{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted,#8b95a5);margin-bottom:8px}
.ctn-bar{flex:1;height:6px;border-radius:3px;background:var(--card2,#1c2330);overflow:hidden}
.ctn-bar i{display:block;height:100%;background:#3fb950}
.ctn-cost{font-size:11px;color:var(--muted,#8b95a5)}
.ctn-st{display:inline-block;padding:2px 9px;border-radius:10px;font-size:10px;font-weight:700}
.ctn-st.ok{background:#3fb95022;color:#3fb950}
.ctn-st.rev{background:#58a6ff22;color:#58a6ff}
.ctn-st.gen{background:#d2992222;color:#d29922}
.ctn-st.pend{background:#8b95a522;color:#8b95a5}
.ctn-st.bad{background:#f8514922;color:#f85149}
.ctn-st.mini{padding:1px 7px;font-size:9.5px;margin-left:auto}
.ctn-st.pri{background:rgba(244,121,32,.16);color:#F47920}
.ctn-st.live{background:rgba(244,121,32,.16);color:#F47920;animation:ctnpulse 1.5s infinite}
/* Tablero de listados: "listo para publicar" — generado por nosotros, todavía
   NO en Amazon. Es el estado que empuja a la acción, por eso va en naranja. */
.ctn-st.rdy{background:rgba(244,121,32,.18);color:#F47920}
/* .ctn-st es inline-block; con un icono adentro hay que alinear la caja. */
.ctn-st.ico{display:inline-flex;align-items:center;gap:4px}
/* La matriz lleva 7 columnas: con el padding normal de 10px no cabe en 1440. */
.ctn-cov.matriz th, .ctn-cov.matriz td{padding-left:7px;padding-right:7px}
.ctn-cov.matriz .ctn-st.ico{padding:3px 7px;font-size:9.5px}
.ctn-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.ctn-f{padding:5px 12px;border:1px solid var(--border,#2a3240);border-radius:14px;font-size:12px;color:var(--muted,#8b95a5);cursor:pointer}
.ctn-f.on{border-color:#F47920;color:#F47920}
.ctn-search{margin-left:auto;background:var(--card,#161b22);border:1px solid var(--border,#2a3240);border-radius:8px;padding:7px 11px;color:var(--text,#e6edf3);font-size:12.5px;min-width:220px}
/* Biblioteca marca-primero: rail de marcas + tabla de cobertura por parent */
.ctn-covwrap{display:grid;grid-template-columns:232px 1fr;gap:16px;align-items:start}
@media(max-width:900px){.ctn-covwrap{grid-template-columns:1fr}}
.ctn-rail{display:flex;flex-direction:column;gap:5px;position:sticky;top:12px}
.ctn-railh{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted,#8b95a5);padding:2px 11px 6px}
.ctn-rrow{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:9px;cursor:pointer;border:1px solid transparent}
.ctn-rrow:hover{background:rgba(255,255,255,.03)}
.ctn-rrow.on{background:rgba(244,121,32,.09);border-color:rgba(244,121,32,.35)}
.ctn-rrow small{font-size:9.5px;color:var(--muted,#8b95a5)}
.ctn-rsw{width:24px;height:24px;border-radius:6px;font-size:9.5px;display:flex;align-items:center;justify-content:center;font-weight:800;color:#111;flex-shrink:0}
.ctn-rsw.big{width:38px;height:38px;border-radius:10px;font-size:13px}
.ctn-rnm{font-size:12px;font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctn-rlive{color:#F47920;margin-left:5px;animation:ctnpulse 1.5s infinite}
.ctn-rbar{height:4px;border-radius:2px;background:rgba(255,255,255,.08);width:46px;overflow:hidden;flex-shrink:0}
.ctn-rbar i{display:block;height:100%;background:#4ade80}
.ctn-covhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.ctn-covhead h3{color:var(--text,#e6edf3);margin:0}
.ctn-covkpis{display:flex;gap:18px;margin-left:auto;flex-wrap:wrap}
.ctn-covkpis>div{text-align:right}
.ctn-covkpis b{display:block;font-size:15px}
.ctn-covkpis span{font-size:9px;color:var(--muted,#8b95a5);text-transform:uppercase;letter-spacing:.05em}
.ctn-covctl{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.ctn-covcard{background:var(--card2,#1c2330);border:1px solid var(--border,#2a3240);border-radius:12px;overflow:auto}
table.ctn-cov{width:100%;border-collapse:collapse;font-size:12px;min-width:760px}
.ctn-cov th{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted,#8b95a5);text-align:left;padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.13)}
.ctn-cov td{padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.06);color:var(--muted2,#b9c2d0);vertical-align:middle}
.ctn-cov .c{text-align:center;white-space:nowrap}
.ctn-cov tr:hover td{background:rgba(255,255,255,.02)}
.ctn-parentrow td{background:rgba(255,255,255,.025)}
.ctn-childrow td{background:rgba(0,0,0,.14);font-size:11.5px}
.ctn-childrow td:first-child{padding-left:36px}
.ctn-pn{display:flex;align-items:center;gap:9px}
.ctn-pn h6{font-size:12.5px;font-weight:650;color:var(--text,#e6edf3);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:340px}
.ctn-pn>div{min-width:0}
.ctn-childrow td:first-child b{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px;vertical-align:bottom}
.ctn-chev{width:18px;height:18px;border-radius:5px;background:rgba(255,255,255,.08);display:inline-flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0}
.ctn-covph{width:30px;height:30px;border-radius:6px;background:#fff;object-fit:contain;display:inline-flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
/* Carrete diseño B: banda "V1 ACTUAL" + número editorial + revelado en persianas */
.ctn-cimB{flex-direction:column;background:linear-gradient(135deg,rgba(244,121,32,.12),rgba(244,121,32,.02))}
/* "Antes / v1" ahora es un chip chico en la esquina que aparece al pasar el
   cursor — ya no una banda que roba 24% de alto y recorta la foto nueva. */
.ctn-v1band{position:absolute;top:6px;left:6px;display:flex;align-items:center;gap:5px;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);padding:3px 6px 3px 3px;z-index:3;border-radius:7px;border:1px solid rgba(255,255,255,.14);cursor:zoom-in;opacity:0;transition:opacity .14s}
.ctn-cell:hover .ctn-v1band{opacity:1}
.ctn-v1band:hover{background:rgba(0,0,0,.78)}
.ctn-cim .ctn-v1band img{width:30px;height:30px;object-fit:cover;border-radius:5px;background:#fff;flex-shrink:0}
.ctn-v1band span{font-size:8px;font-weight:700;letter-spacing:.05em;color:rgba(255,255,255,.85);white-space:nowrap}
.ctn-bignum{font-size:52px;font-weight:800;color:rgba(244,121,32,.32);line-height:1}
.ctn-bignum.breathe{animation:ctnbreathe 1.6s ease-in-out infinite}
.ctn-bigsub{font-size:9px;font-weight:600;color:var(--muted,#8b95a5);letter-spacing:.1em;text-transform:uppercase;margin-top:2px;padding:0 6px;text-align:center}
.ctn-bigsub.genlbl{color:#F47920}
@keyframes ctnbreathe{0%,100%{transform:scale(1);opacity:.32}50%{transform:scale(1.07);opacity:.6}}
/* La foto generada llena TODO el recuadro cuadrado y se ve COMPLETA (contain),
   sin recortar — no hace falta picarla para verla entera. */
.ctn-newwrap{position:absolute;inset:0;overflow:hidden;cursor:zoom-in;background:var(--card2,#1c2330);display:flex;align-items:center;justify-content:center}
.ctn-cim .ctn-newwrap img{width:100%;height:100%;object-fit:contain;display:block}
.ctn-blind{position:absolute;left:0;right:0;height:25.5%;background:var(--card2,#1c2330);transform-origin:top}
.ctn-blind.b1{top:0;animation:ctnblind .5s .1s ease both}
.ctn-blind.b2{top:25%;animation:ctnblind .5s .25s ease both}
.ctn-blind.b3{top:50%;animation:ctnblind .5s .4s ease both}
.ctn-blind.b4{top:75%;animation:ctnblind .5s .55s ease both}
@keyframes ctnblind{to{transform:scaleY(0)}}
/* Juez de calidad: sello en la celda + veredicto en el panel */
.ctn-qcbadge{position:absolute;top:6px;right:6px;z-index:4;font-size:9px;font-weight:800;letter-spacing:.04em;padding:2px 7px;border-radius:10px;pointer-events:auto}
.ctn-qcbadge.ok{background:rgba(74,222,128,.9);color:#06331a}
.ctn-qcbadge.warn{background:rgba(251,146,60,.95);color:#3a1c00}
.ctn-qcverdict{margin:8px 0 12px;padding:9px 12px;border-radius:9px;font-size:12px;line-height:1.5}
.ctn-qcverdict.ok{background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.3);color:var(--text,#e6edf3)}
.ctn-qcverdict.warn{background:rgba(251,146,60,.1);border:1px solid rgba(251,146,60,.35);color:var(--text,#e6edf3)}
.ctn-qcfails{margin-top:7px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ctn-qcfail{font-size:10px;font-weight:600;background:rgba(251,146,60,.16);color:#fdba74;padding:2px 8px;border-radius:20px}
/* Galería de contenido por marca: cuadros de imagen principal + fecha, expand→descargar */
/* Spinner del análisis (relojito): anillo naranja girando alrededor del avatar */
.ctn-spinner{position:absolute;top:50%;left:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;border:3px solid rgba(244,121,32,.18);border-top-color:#F47920;animation:ctnspin .8s linear infinite;pointer-events:none}
@keyframes ctnspin{to{transform:rotate(360deg)}}
.ctn-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.ctn-galcard{background:var(--card2,#1c2330);border:1px solid var(--border,#2a3240);border-radius:12px;overflow:hidden;align-self:start}
.ctn-galcard.open{border-color:rgba(244,121,32,.4);grid-column:1/-1}
.ctn-galtop{display:flex;gap:11px;padding:11px;cursor:pointer;align-items:center}
.ctn-galtop:hover{background:rgba(255,255,255,.02)}
.ctn-galimg{width:64px;height:64px;border-radius:9px;background:#fff;flex-shrink:0;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;font-size:24px}
.ctn-galimg img{width:100%;height:100%;object-fit:cover}
.ctn-galpub{position:absolute;bottom:0;left:0;right:0;font-size:7px;font-weight:700;text-align:center;background:rgba(74,222,128,.9);color:#06331a;padding:1px 0}
.ctn-galmeta{flex:1;min-width:0}
.ctn-galmeta h6{font-size:12.5px;font-weight:650;color:var(--text,#e6edf3);margin:0 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctn-galsub{font-size:11px;color:var(--muted,#8b95a5);margin-top:3px}
.ctn-galchev{color:var(--muted,#8b95a5);font-size:12px;align-self:center}
.ctn-galexp{border-top:1px solid var(--border,#2a3240);padding:12px;background:rgba(0,0,0,.14)}
.ctn-galstrip{display:flex;gap:8px;flex-wrap:wrap}
.ctn-galstrip img{width:96px;height:96px;object-fit:cover;border-radius:8px;background:#fff;cursor:zoom-in;border:1px solid var(--border,#2a3240)}
.ctn-galacts{display:flex;gap:8px;margin-top:11px}
.ctn-ids{font-size:10.5px;color:var(--muted,#8b95a5)}
.ctn-sales{font-size:11.5px;font-weight:650;color:var(--text,#e6edf3)}
.ctn-mono{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.95em}
.cc-ok{color:#4ade80;font-size:12.5px} .cc-no{color:rgba(255,255,255,.18);font-size:12.5px}
.cc-part{color:#fbbf24;font-size:11px;font-variant-numeric:tabular-nums}
.cc-gen{color:#F47920;font-size:11px;animation:ctnpulse 1.4s infinite;font-variant-numeric:tabular-nums}
@keyframes ctnpulse{50%{opacity:.5}}
.ctn-batchbar{display:flex;gap:10px;align-items:stretch;margin:10px 0 14px;flex-wrap:wrap}
.ctn-motor{flex:1 1 250px;border:1px solid var(--border,#2a3240);border-radius:10px;padding:10px 14px;cursor:pointer;background:var(--card2,#1c2330);font-size:11.5px;color:var(--muted,#8b95a5);line-height:1.5;transition:border-color .15s}
.ctn-motor.on{border-color:#F47920;background:rgba(244,121,32,.07);color:var(--text,#e6edf3)}
.ctn-motor.off{opacity:.45;cursor:not-allowed}
.ctn-motor b{display:block;font-size:12.5px;margin-bottom:2px;color:var(--text,#e6edf3)}
.ctn-motor .ctn-qual{display:flex;margin-top:8px}
/* Selector de modo de motor (3 opciones): GPT · Mixto · Gemini */
.ctn-enginemodes{display:flex;gap:8px;flex:1 1 100%;flex-wrap:wrap}
.ctn-enginemodes .ctn-motor{flex:1 1 180px}
.ctn-recpill{display:inline-block;margin-left:7px;font-size:8.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#F47920;background:rgba(244,121,32,.14);border-radius:999px;padding:1px 7px;vertical-align:middle}
.ctn-batchqual{align-self:center}
.ctn-motorlbl{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;color:var(--text,#e6edf3);background:var(--card2,#1c2330);border:1px solid var(--border,#2a3240);border-radius:8px;padding:4px 10px}
/* Interruptor de logo por pieza (Opción A): ON = ámbar, OFF = apagado */
.ctn-logochip{display:inline-flex;align-items:center;font-size:11px;font-weight:700;border-radius:8px;padding:3px 9px;cursor:pointer;border:1px solid var(--border,#2a3240);background:var(--card2,#1c2330);color:var(--muted,#8b95a5);white-space:nowrap;user-select:none}
.ctn-logochip.on{border-color:#F47920;background:rgba(244,121,32,.12);color:#F47920}
.ctn-logochip.off{cursor:default;opacity:.7}
.ctn-ctxchip{display:inline-flex;align-items:center;font-size:11px;font-weight:700;border-radius:8px;padding:3px 9px;cursor:pointer;border:1px solid var(--border,#2a3240);background:var(--card2,#1c2330);color:var(--muted,#8b95a5);white-space:nowrap;user-select:none}
.ctn-ctxchip.on{border-color:#e0a52e;background:rgba(224,165,46,.14);color:#e0a52e}
/* Palanca de CTR encendida que SÍ es política limpia: verde, para que el ámbar
   quede reservado a la única que arriesga supresión. */
.ctn-ctxchip.safe{border-color:#3fb950;background:rgba(63,185,80,.13);color:#3fb950}
.ctn-btn{padding:6px 12px;border-radius:7px;border:1px solid var(--border,#2a3240);background:var(--card2,#1c2330);color:var(--text,#e6edf3);font-size:12px;cursor:pointer;text-decoration:none;display:inline-block}
.ctn-btn.pri{background:#F47920;border-color:#F47920;color:#111;font-weight:700}
.ctn-btn.pri:disabled{opacity:.55;cursor:not-allowed}
.ctn-btn.ghost{color:var(--muted,#8b95a5)}
.ctn-btn.big{padding:10px 22px;font-size:14px}
.ctn-btn.mini{padding:2px 8px;font-size:10.5px}
.ctn-ws{padding:4px 6px}
.ctn-ws.ctn-fullscreen{position:fixed;inset:0;z-index:300;background:var(--bg,#0d1117);padding:22px 28px;overflow-y:auto}
.ctn-wshdr{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.ctn-crumb{font-size:12.5px;color:var(--muted,#8b95a5);margin-left:10px}
.ctn-crumb b{color:var(--text,#e6edf3)}
.ctn-wsacts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ctn-chip{background:var(--card,#161b22);border:1px solid var(--border,#2a3240);border-radius:8px;padding:5px 10px;font-size:11.5px;color:var(--muted,#8b95a5)}
.ctn-chip b{color:var(--text,#e6edf3)}
.ctn-chip.warn{border-color:#d2992266;color:#d29922}
.ctn-seg{display:inline-flex;border:1px solid var(--border,#2a3240);border-radius:9px;overflow:hidden}
.ctn-seg span{padding:6px 13px;font-size:12px;color:var(--muted,#8b95a5);cursor:pointer}
.ctn-seg span.on{background:#F47920;color:#111;font-weight:700}
.ctn-kchip{display:flex;gap:10px;background:var(--card,#161b22);border:1px solid var(--border,#2a3240);border-left:3px solid #F47920;border-radius:9px;padding:10px 13px;font-size:12.5px;align-items:flex-start;margin-bottom:14px}
.ctn-kav{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#F47920,#ff9d4d);display:flex;align-items:center;justify-content:center;font-weight:800;color:#111;font-size:11px;flex-shrink:0}
.ctn-kav.big{width:46px;height:46px;font-size:20px;margin:0 auto 12px}
.ctn-hero{max-width:520px;margin:40px auto;text-align:center;background:var(--card,#161b22);border:1px solid var(--border,#2a3240);border-radius:14px;padding:28px}
.ctn-hero h3{font-size:16px;margin:0 0 8px;color:var(--text,#e6edf3)}
.ctn-hero p{margin:0 0 16px;color:var(--muted,#8b95a5)}
.ctn-dots{display:flex;gap:0;align-items:center;margin-bottom:12px}
.ctn-dot{width:30px;height:30px;border-radius:50%;background:var(--card2,#1c2330);display:flex;align-items:center;justify-content:center;font-size:12px;border:2px solid var(--border,#2a3240);font-weight:700;cursor:pointer;flex-shrink:0;color:var(--muted,#8b95a5)}
.ctn-dot.done{background:#3fb95028;color:#3fb950;border-color:#3fb950}
.ctn-dot.mid{border-color:#d29922;color:#d29922}
.ctn-dot.sel{box-shadow:0 0 0 3px #F4792055;border-color:#F47920}
.ctn-connect{flex:1;height:2px;background:var(--border,#2a3240);min-width:12px;max-width:60px}
.ctn-connect.done{background:#3fb950}
/* Recuadros un poco más chicos: auto-fill deja caber más por fila. */
.ctn-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:14px}
.ctn-cell{background:var(--card,#161b22);border:1px solid var(--border,#2a3240);border-radius:11px;overflow:hidden;cursor:pointer}
.ctn-cell.sel{border-color:#F47920;box-shadow:0 0 14px #F4792022}
.ctn-cim{aspect-ratio:1/1;background:var(--card2,#1c2330);display:flex;align-items:center;justify-content:center;font-size:38px;overflow:hidden}
.ctn-cim img{width:100%;height:100%;object-fit:contain}
.ctn-cbd{padding:7px 9px;font-size:11.5px;display:flex;align-items:center;gap:6px}
.ctn-badge{width:19px;height:19px;border-radius:50%;background:var(--card2,#1c2330);display:flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:800;flex-shrink:0;color:var(--muted,#8b95a5)}
.ctn-badge.ok{background:#3fb95033;color:#3fb950}
.ctn-badge.warn{background:#d2992233;color:#d29922}
.ctn-badge.bad{background:#f8514933;color:#f85149}
.ctn-cname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctn-panel{display:flex;gap:16px;background:var(--card,#161b22);border:1px solid var(--border,#2a3240);border-radius:12px;padding:14px}
.ctn-panel-l{width:280px;flex-shrink:0;display:flex;flex-direction:column;gap:6px}
.ctn-bigimg{width:100%;height:230px;object-fit:contain;border-radius:9px;background:var(--card2,#1c2330)}
.ctn-cands{display:flex;gap:6px;align-items:stretch;flex-wrap:wrap}
.ctn-cand{width:58px;height:58px;object-fit:cover;border-radius:7px;border:2px solid transparent;cursor:pointer;opacity:.75;background:var(--card2,#1c2330)}
.ctn-cand:hover{opacity:1}
.ctn-cand.on{border-color:var(--mx-orange,#F47920);opacity:1;cursor:default}
.ctn-noimg{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;font-size:36px;color:var(--muted,#8b95a5)}
.ctn-noimg span{font-size:11px}
.ctn-panel-r{flex:1;min-width:0}
.ctn-panel-r h4{font-size:14px;margin:0 0 6px;display:flex;align-items:center;gap:8px}
.ctn-diag{font-size:12.5px;color:var(--muted,#8b95a5);margin:0 0 10px}
.ctn-card{background:var(--card2,#1c2330);border:1px solid var(--border,#2a3240);border-radius:9px;padding:10px 12px;margin-bottom:10px}
.ctn-card h5{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted,#8b95a5);margin:0 0 5px;display:flex;align-items:center;gap:8px}
.ctn-card p{margin:0;font-size:12.5px}
.ctn-prompt{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--text,#e6edf3);white-space:pre-wrap}
.ctn-genrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ctn-qual{display:inline-flex;gap:6px}
.ctn-qual .q{padding:4px 9px;border:1px solid var(--border,#2a3240);border-radius:8px;color:var(--muted,#8b95a5);font-size:11px;cursor:pointer}
.ctn-qual .q.on{border-color:#F47920;color:#F47920;font-weight:700}
.ctn-antesgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.ctn-antesph{position:relative;height:150px;border-radius:9px;overflow:hidden;background:var(--card2,#1c2330);border:1px solid var(--border,#2a3240)}
.ctn-antesph img{width:100%;height:100%;object-fit:contain}
.ctn-antesph span{position:absolute;bottom:5px;left:5px;font-size:9.5px;background:#000a;color:#fff;padding:1px 7px;border-radius:8px}
.ctn-copyline{margin:0 0 4px;font-size:12.5px}
.ctn-add{color:#3fb950}
.ctn-logtoggle{margin-top:16px;font-size:12px;color:var(--muted,#8b95a5);cursor:pointer}
.ctn-log{margin-top:8px;background:#0a0e14;border:1px solid var(--border,#2a3240);border-radius:9px;padding:10px 13px;font:11.5px/1.7 ui-monospace,Menlo,monospace;color:var(--muted,#8b95a5);max-height:220px;overflow-y:auto}
.ctn-logln b{color:#3fb950}
@media(max-width:900px){.ctn-panel{flex-direction:column}.ctn-panel-l{width:100%}.ctn-strip{grid-template-columns:repeat(2,1fr)}}

/* ── Contenido: animaciones + KAI creador + SEO ── */
.ctn-working{display:flex;gap:14px;align-items:center;background:var(--card,#161b22);border:1px solid #F4792088;border-radius:11px;padding:12px 16px;margin-bottom:14px;font-size:13px}
.ctn-float{display:inline-flex;animation:ctnFloat 2.2s ease-in-out infinite}
@keyframes ctnFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.ctn-cell.working{border-color:#F47920;animation:ctnGlow 1.6s ease-in-out infinite}
@keyframes ctnGlow{0%,100%{box-shadow:0 0 4px #F4792033}50%{box-shadow:0 0 18px #F4792066}}
.ctn-cim{position:relative}
.ctn-shimmer{position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,#F4792022 48%,#ffffff14 52%,transparent 70%);background-size:220% 100%;animation:ctnSweep 1.4s linear infinite;pointer-events:none}
@keyframes ctnSweep{0%{background-position:130% 0}100%{background-position:-90% 0}}
.ctn-popin{animation:ctnPop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes ctnPop{0%{opacity:0;transform:scale(.85)}100%{opacity:1;transform:scale(1)}}
.ctn-pulse{animation:ctnPulse 1.3s ease-in-out infinite}
@keyframes ctnPulse{0%,100%{box-shadow:0 0 0 0 #d2992255}50%{box-shadow:0 0 0 7px #d2992200}}
.ctn-stripes i{background:repeating-linear-gradient(45deg,#F47920 0 10px,#ff9d4d 10px 20px);background-size:28px 28px;animation:ctnStripes 1s linear infinite}
@keyframes ctnStripes{0%{background-position:0 0}100%{background-position:28px 0}}
/* min-height 100px: el anillo del spinner (76px) + la animación de flote deben
   caber SIN invadir el título de abajo; .ctn-float pisaba el display a
   inline-flex y encimaba el texto — aquí se re-fija flex con especificidad. */
.ctn-heroav,.ctn-hero .ctn-heroav.ctn-float{display:flex;justify-content:center;align-items:center;min-height:100px;margin-bottom:12px}
.ctn-bigimg{position:relative}
/* SEO diff */
.ctn-seoblock{background:var(--card2,#1c2330);border:1px solid var(--border,#2a3240);border-radius:10px;padding:12px 14px;margin-bottom:10px}
.ctn-seohd{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.ctn-seohd h5{font-size:10.5px;letter-spacing:.6px;color:var(--muted,#8b95a5);margin:0}
.ctn-old{margin:0 0 6px;font-size:12.5px;color:#f85149;text-decoration:line-through;opacity:.75}
.ctn-new{margin:0;font-size:13.5px;color:#3fb950;font-weight:600}
.ctn-bullet{display:flex;gap:10px;margin:0 0 7px;font-size:12.5px;color:var(--text,#e6edf3)}
.ctn-bullet>b{width:18px;height:18px;border-radius:50%;background:#3fb95022;color:#3fb950;font-size:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.ctn-bullet .ctn-bl{color:#F47920}
.ctn-kw{margin:0;font:12px/1.7 ui-monospace,Menlo,monospace;color:var(--text,#e6edf3)}
.ctn-desc{margin:0;font-size:13px;line-height:1.65;color:var(--text,#e6edf3);white-space:pre-wrap}
.ctn-charcount{font:600 11px ui-monospace,Menlo,monospace;color:var(--muted,#8b95a5);background:var(--card2,#1c2330);border:1px solid var(--border,#2a3240);border-radius:6px;padding:1px 7px;margin-left:6px}
.ctn-charcount.over{color:#f85149;border-color:#f85149}
.ctn-panel-r h4{color:var(--text,#e6edf3)}

/* ── Contenido: lightbox / carrusel ── */
.ctn-zoomable{cursor:zoom-in}
.ctn-lightbox{position:fixed;inset:0;z-index:400;background:#000d;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px)}
.ctn-lightbox figure{margin:0;max-width:88vw;max-height:92vh;display:flex;flex-direction:column;gap:10px;cursor:default}
.ctn-lightbox figure img{max-width:88vw;max-height:82vh;object-fit:contain;border-radius:12px;box-shadow:0 24px 80px #000}
.ctn-lightbox figcaption{display:flex;align-items:center;gap:14px;justify-content:center;color:#e6edf3;font-size:13px}
.ctn-lb-x{position:absolute;top:18px;right:24px;background:#ffffff14;border:1px solid #ffffff2a;color:#fff;width:38px;height:38px;border-radius:50%;font-size:16px;cursor:pointer}
.ctn-lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:#ffffff14;border:1px solid #ffffff2a;color:#fff;width:46px;height:46px;border-radius:50%;font-size:26px;line-height:1;cursor:pointer}
.ctn-lb-nav.prev{left:26px}
.ctn-lb-nav.next{right:26px}
.ctn-lb-nav:hover,.ctn-lb-x:hover{background:#F47920;color:#111;border-color:#F47920}

/* ── Contenido · popup "Pedir cambios" ──────────────────────────────── */
.ctn-cellnota{display:block;width:calc(100% - 14px);margin:0 7px 8px;padding:5px 8px;font-size:11px;font-weight:600;border-radius:7px;border:1px dashed #F4792066;background:#F4792012;color:#F47920;cursor:pointer}
.ctn-cellnota:hover{background:#F47920;color:#111;border-style:solid}
.ctn-cellnota:disabled{opacity:.45;cursor:default}
.ctn-notamodal{background:var(--app-surface,#161b22);border:1px solid var(--app-border,#30363d);border-radius:14px;max-width:780px;width:min(780px,92vw);max-height:90vh;overflow:auto;box-shadow:0 24px 80px #000;cursor:default}
/* ── Historial en el KAI flotante ── */
.kai-widget-hist{max-height:280px;overflow-y:auto;border-bottom:1px solid var(--app-border,#30363d);background:var(--app-surface,#161b22)}
.kai-widget-hist__row{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;border-bottom:1px solid rgba(148,163,184,.07)}
.kai-widget-hist__row:hover{background:rgba(244,121,32,.08)}
.kai-widget-hist__row.on{background:rgba(244,121,32,.14)}
.kai-widget-hist__row .t{font-size:12px;color:var(--app-fg-1,#e5e7eb);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.kai-widget-hist__row .m{font-size:10.5px;color:var(--app-fg-4,#6b7280);flex:none}

/* ── Tour guiado (onboarding) ── */
.tour-overlay{position:fixed;inset:0;z-index:520;pointer-events:none}
.tour-ring{position:fixed;border:2px solid var(--mx-orange,#F47920);border-radius:12px;box-shadow:0 0 0 9999px rgba(0,0,0,.55),0 0 22px rgba(244,121,32,.55);transition:all .25s ease;pointer-events:none}
.tour-card{position:fixed;width:330px;background:var(--app-surface,#161b22);border:1px solid var(--app-border,#30363d);border-radius:12px;padding:14px 16px;box-shadow:0 18px 60px rgba(0,0,0,.6);pointer-events:auto;transition:all .25s ease}
.tour-step{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--mx-orange,#F47920);font-weight:700}
.tour-title{font-size:15px;font-weight:800;margin:4px 0 4px;color:var(--app-fg-1,#e5e7eb)}
.tour-desc{font-size:12.5px;line-height:1.55;color:var(--app-fg-2,#cbd5e1)}
.tour-btns{display:flex;gap:8px;align-items:center;margin-top:12px}
.tour-btns button{font-family:inherit;font-size:12px;border-radius:8px;padding:6px 12px;cursor:pointer;border:1px solid var(--app-border,#30363d);background:transparent;color:var(--app-fg-2,#cbd5e1)}
.tour-btns .tour-next{background:var(--mx-orange,#F47920);border-color:var(--mx-orange,#F47920);color:#fff;font-weight:700}
.tour-btns .tour-skip{border:none;opacity:.6}
.tour-btns .tour-skip:hover{opacity:1}

/* ── Campanita (notificaciones de organización) ── */
.notif-veil{position:fixed;inset:0;z-index:380}
.notif-dd{position:absolute;left:auto;right:0;top:38px;z-index:390;width:min(360px,78vw);padding:0;overflow:hidden;text-align:left}
.notif-hd{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--app-border,#30363d);font-size:13px}
.notif-mark{font-size:11px;opacity:.65;cursor:pointer}
.notif-mark:hover{opacity:1}
.notif-list{max-height:420px;overflow-y:auto}
.notif-empty{padding:22px 16px;font-size:12px;opacity:.6;text-align:center;line-height:1.5}
.notif-row{padding:10px 12px;border-bottom:1px solid var(--app-border,#30363d)}
.notif-row:last-child{border-bottom:none}
.notif-row.unread{background:rgba(244,121,32,.07)}
.notif-row .t{font-size:12.5px;font-weight:600}
.notif-row .c{font-size:11.5px;opacity:.75;margin-top:2px;line-height:1.4}
.notif-row .m{font-size:10.5px;opacity:.5;margin-top:3px}

/* ── Publicar a Amazon ── */
/* El overlay vive dentro de .main (zoom 1.18), así que position:fixed inset:0
   renderiza ~118% del viewport y corta el modal arriba/abajo. Des-zoomear el
   overlay regresa inset:0 al viewport real; el alto queda garantizado. */
.ctn-pub-ov{zoom:calc(1/1.18)}
.ctn-pub{max-height:calc(100vh - 96px);width:min(1120px,94vw)}

/* Historial de publicaciones: una tarjeta por publicación. El renglón viejo era
   una sola línea con ellipsis, así que el error real de Amazon y el ASIN/SKU
   nunca se alcanzaban a leer — que es justo lo que necesitas para decidir. */
.ctn-pubrow{border:1px solid var(--border,#2a3240);border-radius:11px;background:var(--card2,#1c2330);padding:11px 13px;margin-bottom:9px}
.ctn-pubrow-hd{display:flex;align-items:flex-start;gap:11px}
.ctn-pubrow-th{width:46px;height:46px;border-radius:7px;object-fit:cover;flex-shrink:0;background:var(--card,#161b22);border:1px solid var(--border,#2a3240)}
.ctn-pubrow-t{font-size:13.5px;line-height:1.35}
.ctn-pubrow-st{display:flex;align-items:flex-start;gap:9px;margin-top:10px}
.ctn-pubrow-st .ctn-st.mini{margin-left:0;flex-shrink:0;margin-top:1px}
/* La nota trae el mensaje textual de Amazon: se deja envolver, sin ellipsis. */
.ctn-pubrow-note{font-size:11.5px;line-height:1.45;margin-top:4px;white-space:normal}
.ctn-pubrow-prog{position:relative;height:16px;border-radius:8px;background:var(--card,#161b22);border:1px solid var(--border,#2a3240);margin-top:9px;overflow:hidden}
.ctn-pubrow-prog>span{position:absolute;inset:0 auto 0 0;background:rgba(63,185,80,.28);transition:width .3s}
.ctn-pubrow-prog>b{position:relative;display:block;text-align:center;font-size:10px;line-height:16px;font-weight:700;opacity:.8}
.ctn-pubrow-ax{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ctn-pubrow-vars{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:5px;margin-top:9px;padding-top:9px;border-top:1px solid var(--border,#2a3240)}
.ctn-pubrow-var{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:7px;background:var(--card,#161b22);font-size:11.5px;text-decoration:none;color:inherit}
.ctn-pubrow-var:hover{background:rgba(244,121,32,.1)}
.ctn-pubrow-var .ctn-st.mini{margin-left:0}
.ctn-pubrow-var b{font-weight:650}
.ctn-pubrow-var .ctn-dim{margin-left:auto;font-size:10.5px}
/* Liga al producto real desde la bitácora de publicaciones. */
.ctn-publink{color:var(--text,#e6edf3);text-decoration:none;font-weight:650;display:inline-flex;align-items:center;gap:5px;border-bottom:1px dashed rgba(244,121,32,.5)}
.ctn-publink:hover{color:#F47920;border-bottom-color:#F47920}
.ctn-pub .ctn-bulk-ft{flex-wrap:nowrap;align-items:center}
.ctn-pub-step{display:flex;align-items:center;gap:6px;margin:16px 0 8px;font-size:13px;padding-top:12px;border-top:1px solid var(--border,#2a3240)}
.ctn-pub-step:first-child{margin-top:2px;border-top:none;padding-top:0}
.ctn-pub-hint{font-size:11.5px;opacity:.65;margin:-4px 0 8px}
.ctn-pub-src{background:var(--card,#161b22);color:inherit;border:1px solid var(--border,#2a3240);border-radius:8px;padding:5px 8px;font-size:12px;max-width:340px}
/* ── Generar por familias (bulk) ── */
.ctn-bulk{background:var(--card,#161b22);border:1px solid var(--border,#2a3240);border-radius:16px;width:min(860px,94vw);max-height:90vh;display:flex;flex-direction:column;cursor:default;box-shadow:0 24px 80px #000;overflow:hidden}
.ctn-bulk-hd{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border-bottom:1px solid var(--border,#2a3240)}
.ctn-bulk-hd h4{margin:0;font-size:16px}
.ctn-bulk-hd .ctn-dim{display:block;font-size:11.5px;margin-top:2px}
.ctn-bulk-body{padding:14px 18px;overflow-y:auto;flex:1}
.ctn-bulk-tools{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.ctn-bulkfam{margin-bottom:16px}
.ctn-bulkfam-hd{display:flex;align-items:center;gap:9px;margin-bottom:6px;flex-wrap:wrap}
.ctn-bulkfam-hd:hover .ctn-chev{background:rgba(244,121,32,.25);color:#F47920}
.ctn-bulkfam-hd b{font-size:13.5px;max-width:52ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctn-bulkfam-hd .ctn-dim{font-size:11px}
.ctn-bulkg{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border,#2a3240);border-radius:9px;background:var(--card2,#1c2330);margin-bottom:6px;cursor:pointer;transition:border-color .12s}
.ctn-bulkg:hover{border-color:var(--muted,#8b95a5)}
.ctn-bulkg.on{border-color:#F47920;background:rgba(244,121,32,.08)}
/* "Ya generado" informa, no bloquea: se puede reseleccionar para rehacerlo. */
.ctn-bulkg.done{opacity:.7;cursor:pointer}
.ctn-cbx2{width:17px;height:17px;border-radius:5px;border:1.5px solid var(--border,#2a3240);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;background:var(--card,#161b22)}
.ctn-cbx2.on{background:#F47920;border-color:#F47920}
/* Familia a medias: ni vacía ni completa. El guion la distingue del palomeado
   sin inventar un tercer color. */
.ctn-cbx2.half{background:rgba(244,121,32,.28);border-color:#F47920;color:#F47920}
.ctn-bulkfam-hd{align-items:center}
.ctn-bulkfam-hd:hover b{color:#F47920}
.ctn-bulkth{width:34px;height:34px;border-radius:7px;object-fit:contain;background:#fff;flex-shrink:0}
.ctn-bulkth.ph{display:flex;align-items:center;justify-content:center;font-size:16px;background:var(--card,#161b22)}
.ctn-bulkg-nm{font-size:13px;min-width:0;flex:1 1 auto}
.ctn-bulkg-nm b{font-weight:650}
/* El título es lo que identifica al listado, pero mide 200 caracteres: se
   recorta con puntos suspensivos y el completo vive en el tooltip. min-width:0
   en el contenedor es lo que permite que encoja dentro del flex de la fila. */
.ctn-bulkg-t{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52ch;line-height:1.3}
.ctn-bulkg-meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin-top:1px;font-size:11.5px;line-height:1.35}
.ctn-bulkg-meta .id{font:600 11px var(--mx-font-mono,ui-monospace),Menlo,monospace;letter-spacing:.02em;color:var(--text,#e6edf3);opacity:.9}
.ctn-bulkg .cost{font:700 12px ui-monospace,Menlo,monospace;color:var(--text,#e6edf3)}
.ctn-bulk-ft{display:flex;align-items:center;gap:12px;padding:13px 18px;border-top:1px solid var(--border,#2a3240);background:var(--card2,#1c2330);flex-wrap:wrap}
.ctn-bulkbudget{display:flex;align-items:center;gap:9px}
.ctn-bulkbudget label{font-size:12px;color:var(--muted,#8b95a5);display:flex;align-items:center;gap:6px}
.ctn-bulkbudget input{width:80px;background:var(--card,#161b22);border:1px solid var(--border,#2a3240);border-radius:7px;color:var(--text,#e6edf3);padding:5px 8px;font-size:12px}
.ctn-bulktot{font-size:13px;color:var(--muted,#8b95a5)}
.ctn-bulktot b{color:var(--text,#e6edf3);font-family:ui-monospace,Menlo,monospace}
.ctn-bulktot b.over{color:#f85149}
/* run view */
.ctn-bulkrun-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13.5px}
.ctn-bulkspent{font-size:12.5px;color:var(--muted,#8b95a5)}
.ctn-bulkspent b{color:var(--text,#e6edf3)}
.ctn-bulklist{margin-top:10px;display:flex;flex-direction:column;gap:4px;max-height:44vh;overflow-y:auto}
.ctn-bulkrow{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:7px;background:var(--card2,#1c2330);font-size:12.5px}
/* Un grupo terminado se abre desde la cola; el resto no es clicable y no
   debe insinuar que lo sea. */
.ctn-bulkrow.abre{cursor:pointer}
.ctn-bulkrow.abre:hover{background:rgba(244,121,32,.10);border-radius:7px}

/* ── Publicar: una sola lista de lo generado que aún no está en Amazon ── */
.ctn-pub{padding:2px 0 90px}
.ctn-pubbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.ctn-seg{display:inline-flex;gap:2px;background:var(--card2,#1c2330);border:1px solid var(--border,#2a3240);border-radius:10px;padding:3px}
.ctn-segb{display:inline-flex;align-items:center;gap:7px;background:none;border:0;color:var(--app-fg-2,#8b95a5);
  font:inherit;font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:8px;cursor:pointer;transition:.12s}
.ctn-segb:hover{color:var(--app-fg,#e6edf3)}
.ctn-segb.on{background:#F47920;color:#fff}
.ctn-pubcnt{background:rgba(255,255,255,.16);border-radius:99px;padding:0 7px;font-size:11px;font-variant-numeric:tabular-nums}
.ctn-segb:not(.on) .ctn-pubcnt{background:var(--border,#2a3240)}
.ctn-pubcampos{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;
  padding:10px 12px;background:var(--card2,#1c2330);border:1px solid var(--border,#2a3240);border-radius:10px}
/* El pie viaja con el scroll: la decisión de publicar no debería obligar a
   volver hasta abajo después de elegir arriba. */
/* ── Hoja de familia: reemplaza los renglones delgados del desplegable ── */
.ctn-hojarow > td{padding:0 !important;background:#12161d}
.ctn-hoja{border-top:1px solid var(--border,#2a3240)}
.ctn-hvacio{padding:22px;text-align:center;color:var(--app-fg-2,#8b95a5);font-size:12.5px}
.ctn-hbar{display:flex;align-items:center;gap:10px;padding:9px 14px;flex-wrap:wrap;
  border-bottom:1px solid rgba(255,255,255,.05)}
.ctn-hseg{display:inline-flex;gap:2px;background:var(--card2,#1c2330);border:1px solid var(--border,#2a3240);
  border-radius:8px;padding:2px}
.ctn-hseg button{background:none;border:0;color:var(--app-fg-2,#8b95a5);font:inherit;font-size:11px;
  font-weight:650;padding:5px 11px;border-radius:6px;cursor:pointer}
.ctn-hseg button.on{background:#F47920;color:#fff}
.ctn-hseg.mini button{font-size:9.5px;padding:2px 6px}
/* El scroll horizontal vive AQUÍ: abrir una familia no debe mover el tablero. */
.ctn-hscroll{overflow-x:auto;overflow-y:visible;padding:4px 0 8px}
.ctn-htbl{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%}
.ctn-htbl th{font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--app-fg-2,#8b95a5);
  font-weight:700;padding:7px 5px;white-space:nowrap;border-bottom:1px solid rgba(255,255,255,.06)}
.ctn-htbl th.apcol{color:#bc8cff}
.ctn-htbl th.seocol{color:#4ade80}
.ctn-htbl td{padding:5px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle}
.ctn-htbl tr.sel td{background:rgba(244,121,32,.06)}
.ctn-htbl tr.trab .idc{box-shadow:inset 3px 0 0 #60a5fa}
.ctn-htbl .sep{border-left:2px solid #bc8cff33}
.ctn-htbl .sepseo{border-left:2px solid #4ade8033}
.ctn-htbl .idc{position:sticky;left:0;z-index:2;background:#12161d;min-width:330px;max-width:330px;
  padding:8px 14px;border-right:1px solid var(--border,#2a3240);text-align:left}
.ctn-htbl tr.sel .idc{background:#191813}
.ctn-hid{display:flex;gap:8px;align-items:flex-start}
.ctn-hid .th{width:34px;height:34px;border-radius:6px;background:#fff;object-fit:contain;flex:none;cursor:pointer}
.ctn-hid b{font-size:12px;display:block;line-height:1.3;cursor:pointer}
/* Título mediano y legible; los identificadores, chiquitos debajo. El SKU solo
   no dice qué producto es — "MFJAB02" obliga a abrirlo para saberlo. */
.ctn-hid b.tit{font-size:13px;font-weight:650;line-height:1.32;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ctn-hid .ids{font-size:9.5px;color:var(--app-fg-2,#8b95a5);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctn-hid .ids .ctn-mono{font-size:9.5px}
.ctn-hid .bot{display:flex;align-items:center;gap:5px;margin-top:6px;flex-wrap:wrap}
.ctn-hcel{position:relative;width:96px;height:96px;border-radius:7px;overflow:hidden;background:#fff;
  cursor:zoom-in;display:block;transition:transform .12s,box-shadow .12s}
.ctn-hcel img{width:100%;height:100%;object-fit:contain;display:block}
.ctn-hcel:hover{transform:scale(1.7);z-index:9;box-shadow:0 14px 44px rgba(0,0,0,.75)}
.ctn-hcel.ap{width:140px}
.ctn-hvac{width:96px;height:96px;border-radius:7px;border:1px dashed var(--border,#2a3240);
  display:flex;align-items:center;justify-content:center;color:#4b5563;font-size:10px}
.ctn-hvac.ap{width:140px}
.ctn-hvac.seo{width:210px;height:auto;padding:12px 10px}
.ctn-hqc{position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:99px;box-shadow:0 0 0 2px rgba(0,0,0,.4)}
.ctn-hqc.ok{background:#4ade80}
.ctn-hqc.no{background:#f87171}
.ctn-htag{position:absolute;left:3px;bottom:3px;font-size:8.5px;font-weight:800;letter-spacing:.04em;
  padding:1px 5px;border-radius:4px;background:rgba(0,0,0,.66);color:#fff}
.ctn-htag.nueva{background:rgba(244,121,32,.92)}
.ctn-hseo{width:210px;border-radius:7px;border:1px solid var(--border,#2a3240);background:var(--card2,#1c2330);
  padding:7px 9px;cursor:pointer}
.ctn-hseo:hover{border-color:#4ade80}
.ctn-hseo .t{font-size:10.5px;line-height:1.35;margin-top:4px;display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden}
/* Barra de selección de la hoja de familia. Era estática al final de la tabla
   —fuera de pantalla en cuanto la familia pasaba de 4 variaciones—, así que
   seleccionar no producía ninguna respuesta visible. Ahora flota, como la de
   Listados, y entra con un deslizamiento para que se note que apareció. */
.ctn-hsel{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:62;
  display:flex;align-items:center;gap:9px;padding:10px 15px;
  width:max-content;max-width:min(1120px,94vw);
  background:var(--card,#161b22);border:1px solid #F47920;border-radius:12px;
  box-shadow:0 12px 34px rgba(0,0,0,.55);font-size:12px;
  animation:ctnselin .22s cubic-bezier(.2,.9,.3,1.15) both}
/* Si la barra de Listados ya ocupa el sitio, ésta se sube en vez de encimarse. */
.ctn-hsel.arriba{bottom:96px}
.ctn-hsel > span{color:var(--app-fg-2,#8b95a5)}
.ctn-hsel-n{font-size:16px;color:#F47920;display:inline-block;
  animation:ctnselnum .26s cubic-bezier(.2,.9,.3,1.4) both}
.ctn-hsel-msg{font-size:11.5px;color:var(--app-fg,#e6edf3);opacity:.85;
  max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  animation:ctnselfade .3s ease both}
.ctn-hsel .ctn-btn,.ctn-selbar .ctn-btn{white-space:nowrap}
@keyframes ctnselin{from{opacity:0;transform:translate(-50%,16px) scale(.97)}
  to{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes ctnselnum{from{transform:scale(.55);opacity:.2}to{transform:scale(1);opacity:1}}
@keyframes ctnselfade{from{opacity:0;transform:translateY(4px)}to{opacity:.85;transform:none}}
/* Variación sin contenido: la familia se enseña COMPLETA, y lo que falta va
   abajo en una fila fina — pesa lo mismo saber que existe que verla vacía. */
.ctn-htbl tr.falta td{background:#10141b}
.ctn-htbl tr.falta .idc{background:#10141b;padding:5px 14px}
.ctn-htbl tr.falta.sel .idc{background:#191813}
.ctn-hid.fina{align-items:center}
.ctn-hid.fina .th{width:26px;height:26px;opacity:.75}
.ctn-hid.fina b{font-size:11px}
.ctn-hfalta{color:#6b7280;font-size:11.5px;padding-left:14px !important}
.ctn-hfalta span{margin-right:10px;letter-spacing:.02em}
/* Trabajando ahora: la celda dice qué se está dibujando y, si el motor se
   saturó, cuánto va a esperar — para no confundir atorado con lento. */
@keyframes ctnsh{0%{background-position:-180px 0}100%{background-position:180px 0}}
@keyframes ctnpulso{0%,100%{opacity:1}50%{opacity:.45}}
.ctn-hgen{width:96px;height:96px;border-radius:7px;border:1px solid rgba(96,165,250,.45);
  background:linear-gradient(100deg,#1b2432 30%,#243044 50%,#1b2432 70%);background-size:360px 100%;
  animation:ctnsh 1.25s linear infinite;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:5px;color:#93c5fd;font-size:9px;font-weight:700;text-align:center;padding:4px}
.ctn-hgen.espera{border-color:rgba(251,191,36,.5);color:#fcd34d;animation:none;background:#241f14}
.ctn-hgen.seo{width:210px}
.ctn-hgen .pt{width:7px;height:7px;border-radius:99px;background:currentColor;animation:ctnpulso 1s ease-in-out infinite}
.ctn-hgen small{font-size:8px;opacity:.85;line-height:1.25}
.ctn-hvivo{display:inline-flex;align-items:center;gap:6px;font-size:9.5px;font-weight:800;letter-spacing:.04em;
  color:#60a5fa;background:rgba(96,165,250,.14);padding:3px 8px;border-radius:6px}
.ctn-hvivo .pt{width:6px;height:6px;border-radius:99px;background:#60a5fa;animation:ctnpulso 1s ease-in-out infinite}
/* Comparador — portaleado a body (la capa .main tiene zoom y deforma los vh). */
.ctn-hlb{position:fixed;inset:0;background:rgba(0,0,0,.93);z-index:1200;display:flex;flex-direction:column;padding:24px 30px 18px}
.ctn-hlb .hd{display:flex;align-items:center;gap:14px;color:#e6edf3;font-size:14px;margin-bottom:12px;flex:none}
.ctn-hlb .hd .x{margin-left:auto;background:rgba(255,255,255,.1);border:0;color:#fff;width:34px;height:34px;
  border-radius:99px;font-size:17px;cursor:pointer}
.ctn-hlb .par{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:16px;min-height:0}
.ctn-hlb figure{margin:0;display:flex;flex-direction:column;min-height:0}
.ctn-hlb figcaption{font-size:11px;text-transform:uppercase;letter-spacing:.07em;font-weight:700;
  color:#8b95a5;margin-bottom:7px;flex:none}
.ctn-hlb figure.nueva figcaption{color:#F47920}
.ctn-hlb figure.nueva .box{box-shadow:0 0 0 2px rgba(244,121,32,.55)}
.ctn-hlb .box{flex:1;background:#fff;border-radius:11px;overflow:hidden;display:flex;align-items:center;
  justify-content:center;min-height:0}
.ctn-hlb .box img{max-width:100%;max-height:100%;object-fit:contain}
.ctn-hlb .falta{color:#9ca3af;font-size:13px;padding:0 20px;text-align:center}
.ctn-hlb .txt{flex:1;overflow:auto;background:#161b22;border-radius:11px;padding:16px 18px;min-height:0}
.ctn-hlb .campo{margin-bottom:14px}
.ctn-hlb .campo h4{margin:0 0 4px;font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:#8b95a5;font-weight:800}
.ctn-hlb .campo.nuevo h4{color:#4ade80}
.ctn-hlb .campo p{margin:0;font-size:12.5px;line-height:1.55;color:#e6edf3;white-space:pre-wrap}
.ctn-hlb .campo ul{margin:0;padding-left:16px}
.ctn-hlb .campo li{font-size:12.5px;line-height:1.5;margin-bottom:5px;color:#e6edf3}
.ctn-hlb .campo .kw{font-family:ui-monospace,monospace;font-size:11px;color:#cbd5e1;word-break:break-word}
.ctn-hlb .ft{display:flex;gap:10px;align-items:center;margin-top:12px;flex:none}
/* Tira de fotos dentro del renglón del Publicador: elegir cuáles se mandan. */
.ctn-asinlink{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor;cursor:pointer}
.ctn-asinlink:hover{color:#F47920;border-bottom-color:#F47920}
/* Barra flotante de selección del tablero. */
.ctn-selbar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;gap:10px;padding:11px 16px;
  width:max-content;min-width:min(560px,90vw);max-width:min(1180px,94vw);
  background:var(--card,#161b22);border:1px solid #F47920;border-radius:12px;
  box-shadow:0 12px 34px rgba(0,0,0,.55);font-size:13px;
  animation:ctnselin .22s cubic-bezier(.2,.9,.3,1.15) both}
.ctn-selbar b{font-size:15px;color:#F47920}
.ctn-selbar > span{color:var(--app-fg-2,#8b95a5);font-size:12px}
/* Píldora global de auditoría: barra de vaivén, porque la espera es de minutos
   y una píldora estática se lee como un aviso viejo que nadie quitó. */
.kai-pip--aud{border-color:rgba(188,140,255,.55)}
.kai-pip--aud .kai-pip__dot{background:#bc8cff}
.kai-pip__bar{display:block;height:3px;width:74px;border-radius:99px;background:rgba(188,140,255,.25);
  overflow:hidden;position:relative;flex:none;margin:0 4px}
.kai-pip__bar i{position:absolute;top:0;bottom:0;width:40%;border-radius:99px;background:#bc8cff;
  animation:ctnvaiven 1.35s ease-in-out infinite}
/* Celda auditándose: ocupa el lugar de la foto que va a existir. */
.ctn-haud{width:96px;height:96px;border-radius:7px;border:1px solid rgba(188,140,255,.45);
  background:linear-gradient(100deg,#1c1a2b 30%,#2a2440 50%,#1c1a2b 70%);background-size:360px 100%;
  animation:ctnsh 1.25s linear infinite;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:4px;color:#bc8cff;text-align:center;padding:4px}
.ctn-haud b{font-size:10px;font-weight:800;letter-spacing:.03em}
.ctn-haud small{font-size:8px;opacity:.85;line-height:1.2}
.ctn-haud .pt{width:7px;height:7px;border-radius:99px;background:currentColor;animation:ctnpulso 1s ease-in-out infinite}
/* Slot esperando su turno dentro de un lote vivo. */
.ctn-hcola{width:96px;height:96px;border-radius:7px;border:1px solid rgba(96,165,250,.4);
  background:linear-gradient(100deg,#141d2b 30%,#1d2a3d 50%,#141d2b 70%);background-size:360px 100%;
  animation:ctnsh 1.6s linear infinite;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;padding:5px;text-align:center}
.ctn-hcola-t{font-size:9.5px;font-weight:700;color:#60a5fa;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ctn-hcola small{font-size:8px;color:var(--app-fg-2,#8b95a5)}
/* Slot planeado sin imagen: se sabe QUÉ va a ir ahí. */
.ctn-hplan{width:96px;height:96px;border-radius:7px;border:1px dashed rgba(244,121,32,.4);
  background:rgba(244,121,32,.05);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:5px;text-align:center}
.ctn-hplan-t{font-size:9.5px;font-weight:700;color:#F47920;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ctn-hplan small{font-size:8px;color:var(--app-fg-2,#8b95a5)}
.ctn-ptmini{display:inline-block;width:6px;height:6px;border-radius:99px;background:currentColor;
  margin-right:5px;animation:ctnpulso 1s ease-in-out infinite}
/* Auditorías corriendo: la espera larga que antes no se veía por ningún lado. */
.ctn-auditstrip{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:9px 14px;font-size:12.5px;
  border:1px solid rgba(188,140,255,.4);background:rgba(188,140,255,.08);border-radius:11px}
.ctn-auditstrip b{color:#bc8cff;font-size:15px}
.ctn-auditstrip.gen{border-color:rgba(96,165,250,.42);background:rgba(96,165,250,.08)}
.ctn-auditstrip.gen b{color:#60a5fa}
.ctn-auditstrip.gen .pt{background:#60a5fa}
.ctn-auditstrip.gen .ctn-cargabar{background:rgba(96,165,250,.2)}
.ctn-auditstrip.gen .ctn-cargabar i{background:#60a5fa}
.ctn-auditstrip .pt{width:8px;height:8px;border-radius:99px;background:#bc8cff;
  animation:ctnpulso 1s ease-in-out infinite;flex:none}
.ctn-auditstrip .ctn-cargabar{background:rgba(188,140,255,.18)}
.ctn-auditstrip .ctn-cargabar i{background:#bc8cff}
.ctn-auditstrip .ctn-dim{font-size:11px}
/* Botón trabajando. Una espera de 30 s sin movimiento se lee como "se trabó",
   y el operador le pica otra vez o se va (Ro 20/08: "si no parece que todo se
   queda estancado"). Cualquier acción que hable con Amazon lleva esto. */
.ctn-btn.cargando{position:relative;overflow:hidden;border-color:#F47920;color:#F47920;cursor:progress}
.ctn-btn.cargando::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 18%,rgba(244,121,32,.3) 50%,transparent 82%);
  background-size:200px 100%;animation:ctnsh 1.15s linear infinite}
.ctn-btn.cargando .pt{width:7px;height:7px;border-radius:99px;background:currentColor;
  animation:ctnpulso 1s ease-in-out infinite;flex:none}
/* Barra indeterminada para esperas sin porcentaje (una lectura a Amazon no
   avisa por dónde va). Dice "sigo aquí", no "voy en el 40%". */
.ctn-cargabar{height:3px;border-radius:99px;background:rgba(244,121,32,.16);overflow:hidden;
  flex:1 0 120px;max-width:260px;position:relative}
.ctn-cargabar i{position:absolute;top:0;bottom:0;width:38%;border-radius:99px;background:#F47920;
  animation:ctnvaiven 1.35s ease-in-out infinite}
@keyframes ctnvaiven{0%{left:-40%}100%{left:102%}}
/* Lote de publicación en curso: texto al centro y barra de progreso. */
.ctn-pubjob{position:relative;flex-direction:row;align-items:center;gap:12px}
.ctn-pubjob-in{flex:1;min-width:0;text-align:center}
.ctn-pubjob-txt{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:650}
.ctn-pubjob-txt .pt{width:8px;height:8px;border-radius:99px;background:#F47920;animation:ctnpulso 1s ease-in-out infinite}
.ctn-pubjob-bar{height:6px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden;margin:8px auto 0;max-width:640px}
.ctn-pubjob-bar i{display:block;height:100%;background:#F47920;border-radius:99px;transition:width .4s ease}
.ctn-pubjob-sub{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.ctn-pubjob-sub .ctn-st{margin-left:0}
.ctn-pubjob-x{position:absolute;right:12px;top:10px}
/* Franja de familia dentro de la pestaña de A+. */
.ctn-apfam{border:1px solid rgba(188,140,255,.35);background:rgba(188,140,255,.07);border-radius:11px;
  padding:10px 13px;margin:0 0 12px}
.ctn-apfam-hd{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12.5px}
.ctn-apfam-hd .ctn-dim{font-size:11px}
.ctn-apfam-list{margin-top:10px;border-top:1px solid rgba(255,255,255,.07);padding-top:9px;
  max-height:340px;overflow-y:auto}
.ctn-apfam-r{display:flex;align-items:center;gap:9px;padding:5px 7px;border-radius:7px;cursor:pointer;font-size:12px}
.ctn-apfam-r:hover{background:rgba(255,255,255,.04)}
.ctn-apfam-r.off{opacity:.4}
.ctn-apfam-r img,.ctn-apfam-r .ph{width:26px;height:26px;border-radius:5px;background:#fff;object-fit:contain;flex:none}
.ctn-apfam-r .ctn-dim{font-size:10.5px;font-family:ui-monospace,monospace}
/* A+ por familia: a quiénes les toca el documento. */
.ctn-pubfam{padding:8px 12px 12px 44px;background:rgba(255,255,255,.02);border-bottom:1px solid rgba(255,255,255,.05)}
.ctn-pubfam-hd{font-size:11.5px;color:var(--app-fg-2,#8b95a5);margin-bottom:7px;max-width:92ch}
.ctn-pubfam-r{display:flex;align-items:center;gap:9px;padding:4px 6px;border-radius:7px;cursor:pointer;font-size:12px}
.ctn-pubfam-r:hover{background:rgba(255,255,255,.04)}
.ctn-pubfam-r.off{opacity:.4}
.ctn-pubfam-r img,.ctn-pubfam-r .ph{width:26px;height:26px;border-radius:5px;background:#fff;object-fit:contain;flex:none}
.ctn-pubfam-r .ctn-dim{font-size:10.5px}
/* Ajuste vs rediseño en el popup de cambios. */
.ctn-notamodo{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.ctn-notamodo-o span{display:block;font-size:11px;line-height:1.35;color:var(--app-fg-3,#8b95a5);margin-top:2px}
.ctn-notamodo-o{border:1px solid var(--border,#2a3240);border-radius:10px;padding:9px 11px;cursor:pointer}
.ctn-notamodo-o.on{border-color:#F47920;background:rgba(244,121,32,.08)}
.ctn-notamodo-o b{display:block;font-size:12.5px;margin-bottom:2px}
.ctn-notamodo-o span{display:block;font-size:10.5px;line-height:1.35;color:var(--app-fg-2,#8b95a5)}
/* Lo que KAI entendió de la nota, antes de gastar en la imagen. */
.ctn-notaaudit{margin:10px 0 0;padding:11px 12px;border-radius:10px;
  border:1px solid rgba(244,121,32,.45);background:rgba(244,121,32,.07)}
.ctn-notaaudit.off{border-color:var(--border,#2a3240);background:rgba(255,255,255,.03)}
.ctn-notaaudit.bad{border-color:rgba(248,113,113,.55);background:rgba(248,113,113,.09)}
.ctn-notaaudit__hd{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.ctn-notaaudit__hd b{font-size:12.5px;color:var(--app-fg,#e6edf3)}
.ctn-notaaudit__t{margin:0;font-size:13px;line-height:1.5;color:var(--app-fg,#e6edf3)}
.ctn-notaaudit__w{margin-top:8px;padding:7px 9px;border-radius:8px;font-size:11.5px;line-height:1.45;
  background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.4);color:#fca5a5}
.ctn-notaaudit__w .ctn-btn{vertical-align:middle}
.ctn-notaaudit__d{margin-top:9px}
.ctn-notaaudit__d summary{font-size:11px;cursor:pointer;color:var(--app-fg-2,#8b95a5)}
.ctn-notaaudit__d summary:hover{color:#F47920}
.ctn-notaaudit__d .ctn-prompt{margin-top:6px;max-height:150px;overflow-y:auto}
.ctn-pubfotos{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 12px 12px 44px;
  background:rgba(255,255,255,.02);border-bottom:1px solid rgba(255,255,255,.05)}
.ctn-pubfoto{position:relative;width:74px;height:74px;border-radius:8px;overflow:hidden;background:#fff;
  cursor:pointer;display:block;border:2px solid transparent;opacity:.45;transition:opacity .12s,border-color .12s}
.ctn-pubfoto.on{opacity:1;border-color:#F47920}
.ctn-pubfoto:hover{opacity:1}
.ctn-pubfoto img{width:100%;height:100%;object-fit:contain;display:block}
.ctn-pubfoto .cb{position:absolute;top:4px;left:4px;width:16px;height:16px;border-radius:4px;
  background:rgba(0,0,0,.45);border:1.5px solid rgba(255,255,255,.55);color:#fff;font-size:10px;
  font-weight:800;display:flex;align-items:center;justify-content:center}
.ctn-pubfoto.on .cb{background:#F47920;border-color:#F47920}
.ctn-pubfoto .nn{position:absolute;left:3px;bottom:3px;font-size:8px;font-weight:800;letter-spacing:.04em;
  padding:1px 4px;border-radius:4px;background:rgba(0,0,0,.66);color:#fff}
.ctn-pubfoto .qc{position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:99px;background:#f87171;
  box-shadow:0 0 0 2px rgba(0,0,0,.4)}
.ctn-pubfotos-ac{display:flex;gap:6px;margin-left:6px}
.ctn-pubft{position:sticky;bottom:14px;z-index:5;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:16px;padding:12px 16px;background:var(--card,#161b22);
  border:1px solid #F47920;border-radius:12px;box-shadow:0 8px 26px rgba(0,0,0,.4);font-size:13px}


.ctn-bulkrow .nm{font-weight:650}
.ctn-bulklog{margin-top:10px;font-size:11.5px;color:#f0a35a;background:rgba(240,163,90,.1);border-radius:8px;padding:8px 10px}
.ctn-bulklive{animation:ctnBulkPulse 1.6s ease-in-out infinite}
@keyframes ctnBulkPulse{0%,100%{box-shadow:0 0 0 0 rgba(244,121,32,.5)}50%{box-shadow:0 0 0 5px rgba(244,121,32,0)}}
/* Banner de progreso de la cola por familias (inline en la marca) */
.ctn-bulkstrip{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding:10px 14px;border:1px solid #F47920;background:rgba(244,121,32,.08);border-radius:11px;cursor:pointer}
.ctn-bulkstrip.fin{border-color:var(--good,#3fb950);background:rgba(63,185,80,.08)}
.ctn-bulkstrip-ic{font-size:20px;flex-shrink:0}
.ctn-bulkstrip-main{flex:1;min-width:0}
.ctn-bulkstrip-top{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;font-size:13px}
.ctn-bulkstrip-top .ctn-dim{font-size:11.5px}
.ctn-bulkstrip-spent{font:700 12.5px ui-monospace,Menlo,monospace;color:var(--text,#e6edf3);white-space:nowrap}
.ctn-bulkstrip-spent .ctn-dim{font-weight:500}
.ctn-bulkstrip-x{border:none;background:transparent;color:var(--muted,#8b95a5);font-size:14px;cursor:pointer;padding:2px 4px;line-height:1;border-radius:6px}
.ctn-bulkstrip-x:hover{color:var(--text,#e6edf3);background:rgba(255,255,255,.06)}
.ctn-notahd{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--app-tint-2,#30363d)}
.ctn-notahd>div{flex:1;min-width:0}
.ctn-notahd h4{margin:0 0 2px;font-size:14px}
.ctn-notahd .ctn-dim{font-size:11.5px;display:block}
.ctn-notabody{display:grid;grid-template-columns:260px 1fr;gap:16px;padding:16px 18px}
.ctn-notabody>img{width:100%;border-radius:10px;border:1px solid var(--app-border,#30363d);align-self:start}
.ctn-notaform{display:flex;flex-direction:column;gap:10px;min-width:0}
.ctn-notaform textarea{width:100%;resize:vertical;background:var(--app-surface-2,#0d1117);border:1px solid var(--app-border,#30363d);border-radius:9px;color:var(--app-fg,#e6edf3);font:inherit;font-size:13px;padding:10px 12px;min-height:110px}
.ctn-notaform textarea:focus{outline:none;border-color:#F47920}
.ctn-notachips{display:flex;flex-wrap:wrap;gap:6px}
.ctn-notachip{font-size:11px;padding:4px 10px;border-radius:999px;border:1px solid var(--app-border,#30363d);background:var(--app-surface-2,#0d1117);color:var(--app-fg-3,#8b95a5);cursor:pointer}
.ctn-notachip:hover{border-color:#F47920;color:#F47920}
/* Pregunta de estilo de la MAIN — tarjetas, no chips: es la decisión que
   mueve el CTR y merece leerse antes de gastar en una generación. */
.ctn-mainpick{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:9px}
.ctn-mainopt{border:1px solid var(--app-border,#30363d);background:var(--app-tint-1,#0d1117);border-radius:10px;padding:11px 12px;cursor:pointer;transition:.12s}
.ctn-mainopt:hover{border-color:var(--app-fg-4,#8b949e)}
.ctn-mainopt.on{border-color:#F47920;background:rgba(244,121,32,.10)}
.ctn-mainopt.warn{border-color:rgba(245,158,11,.75);background:rgba(245,158,11,.10)}
.ctn-mainopt__t{font-weight:700;font-size:13px;color:var(--app-fg-1,#e6edf3);margin-bottom:4px}
.ctn-mainopt__h{font-size:11.5px;line-height:1.45;color:var(--app-fg-3,#8b949e)}
.ctn-notafoot{display:flex;align-items:center;gap:8px;margin-top:auto}
.ctn-kitmsg{transition:color .15s ease}
.ctn-kitmsg.ok{color:#22c55e;font-weight:600}
.ctn-kitmsg.bad{color:#fca5a5;font-weight:600}
.ctn-notafoot .ctn-dim{flex:1}
/* Foto de referencia del cambio (modal Pedir cambios) */
.ctn-notaref{margin-top:4px}
.ctn-notarefadd{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:7px 12px;border-radius:8px;border:1px dashed var(--app-border,#30363d);background:var(--app-surface-2,#0d1117);color:var(--app-fg-2,#adbac7);cursor:pointer}
.ctn-notarefadd:hover{border-color:#F47920;color:#F47920}
.ctn-notarefhas{display:flex;align-items:center;gap:10px;padding:7px;border-radius:8px;border:1px solid var(--app-border,#30363d);background:var(--app-surface-2,#0d1117)}
.ctn-notarefhas img{width:44px;height:44px;object-fit:cover;border-radius:6px;flex-shrink:0}
.ctn-notarefhas>div{display:flex;flex-direction:column;min-width:0;flex:1}
.ctn-notarefhas b{font-size:12px}
.ctn-notarefhas .ctn-dim{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Selector de arquetipo por módulo A+ */
.ctn-arqsel{font-size:11px;padding:2px 6px;border-radius:6px;border:1px solid var(--app-border,#30363d);background:var(--app-surface-2,#0d1117);color:var(--app-fg-2,#adbac7);cursor:pointer;max-width:170px}
@media (max-width:700px){.ctn-notabody{grid-template-columns:1fr}.ctn-notabody>img{max-width:220px}}

/* ── Contenido · pestañas de entregable (Galería / A+ / Video / SEO) ── */
.ctn-dtabs{display:flex;gap:6px;border-bottom:1px solid var(--app-border,#30363d);margin:14px 0 16px;overflow-x:auto;scrollbar-width:none}
.ctn-dtab{white-space:nowrap;flex:none;padding:9px 15px;font-size:13px;color:var(--app-fg-3,#8b95a5);cursor:pointer;border:1px solid transparent;border-bottom:none;border-radius:10px 10px 0 0;display:flex;gap:8px;align-items:center;user-select:none}
.ctn-dtab:hover{color:var(--app-fg-1,#e6edf3)}
.ctn-dtab.on{background:var(--app-surface,#161b22);border-color:var(--app-border,#30363d);color:var(--app-fg-1,#e6edf3);font-weight:700}
.ctn-dtabcnt{font-size:10.5px;background:var(--app-surface-2,#1c2330);border-radius:8px;padding:1px 8px;color:var(--app-fg-3,#8b95a5)}
.ctn-dtab.on .ctn-dtabcnt{background:#F4792033;color:#F47920}
.ctn-kaibar{display:flex;align-items:center;gap:10px;margin:-6px 0 16px;padding:7px 8px 7px 12px;border:1px solid var(--app-border,#30363d);border-radius:10px;background:var(--app-surface,#161b22)}
.ctn-kaibar:focus-within{border-color:#F47920}
.ctn-kaibar-lbl{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#F47920;white-space:nowrap}
.ctn-kaibar input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--app-fg,#e6edf3);font-size:13px;padding:4px 0}
.ctn-kaibar input::placeholder{color:var(--app-fg-3,#8b95a5)}
/* Pestaña "En curso" mientras algo se genera: el reloj gira y el contador late.
   Reemplaza a la franja azul, que daba un número sin contexto (Ro 25/08). */
.ctn-dtab.viva{color:#F47920}
.ctn-dtab.viva svg{animation:ctngira 2.6s linear infinite;transform-origin:50% 50%}
.ctn-dtab.viva .ctn-dtabcnt{background:#F4792033;color:#F47920;animation:ctnlatido 1.4s ease-in-out infinite}
@keyframes ctngira{to{transform:rotate(360deg)}}
@keyframes ctnlatido{0%,100%{opacity:1}50%{opacity:.42}}
@media (prefers-reduced-motion: reduce){
  .ctn-dtab.viva svg,.ctn-dtab.viva .ctn-dtabcnt{animation:none}
}
.ctn-dtablive{width:8px;height:8px;border-radius:50%;background:#d29922;animation:ctnpulse 1.1s infinite}
@keyframes ctnpulse{50%{opacity:.3}}

/* ── Contenido · A+ Premium ── */
.ctn-apbar{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.ctn-apmod{background:var(--app-surface,#161b22);border:1px solid var(--app-border,#30363d);border-radius:12px;padding:12px 14px;margin-bottom:14px}
.ctn-apmodhd{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:8px}
.ctn-apconcepto{width:100%;resize:vertical;background:var(--app-surface-2,#0d1117);border:1px solid var(--app-border,#30363d);border-radius:8px;color:var(--app-fg,#e6edf3);font:inherit;font-size:12px;padding:8px 10px;min-height:44px;margin-bottom:10px}
.ctn-apconcepto:focus{outline:none;border-color:#F47920}
.ctn-apboxes{display:grid;grid-template-columns:2fr 1fr;gap:12px;align-items:start}
.ctn-apboxhd{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--app-fg-3,#8b95a5);margin-bottom:6px}
.ctn-apim{position:relative;border-radius:9px;overflow:hidden;background:linear-gradient(145deg,#232b3a,#1a212e);border:1px solid var(--app-border,#30363d);display:flex;align-items:center;justify-content:center;cursor:pointer}
.ctn-apim.desktop{aspect-ratio:2.44}
.ctn-apim.mobile{aspect-ratio:4/3}
.ctn-apim.regular{aspect-ratio:1.617}
/* revelado de persianas al caer la imagen nueva (mismo efecto que la galería) */
.ctn-apim .ctn-apnew{position:absolute;inset:0;overflow:hidden}
.ctn-apim .ctn-apnew img{width:100%;height:100%;object-fit:cover;display:block}
/* página continua: "Proponer cambio" flotante abajo-centro al hover de cada foto */
.ctn-apphov{position:relative}
.ctn-apphov img{width:100%;display:block;cursor:zoom-in}
.ctn-apphovbtn{position:absolute;left:50%;bottom:12px;transform:translateX(-50%) translateY(4px);opacity:0;transition:opacity .15s,transform .15s;background:#0d1117e0;border:1px solid #F47920;color:#F47920;border-radius:9px;padding:6px 14px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;box-shadow:0 6px 18px #0009}
.ctn-apphov:hover .ctn-apphovbtn{opacity:1;transform:translateX(-50%) translateY(0)}
.ctn-apphovbtn:hover{background:#F47920;color:#111}
.ctn-apphovgen{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);background:#0d1117e0;border:1px solid #d29922;color:#d29922;border-radius:9px;padding:5px 12px;font-size:11.5px}
.ctn-apim img{width:100%;height:100%;object-fit:cover;display:block}
.ctn-apempty{font-size:11.5px;color:#68748a}
.ctn-apgenlbl{font-size:12px;color:#d29922}
.ctn-apworking:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,#ffffff10 50%,transparent 70%);animation:ctnshim 1.4s infinite}
@keyframes ctnshim{from{transform:translateX(-60%)}to{transform:translateX(60%)}}
.ctn-apboxacts{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
/* vista "página continua": los módulos pegados sin separación, como en Amazon */
.ctn-appegado{display:grid;grid-template-columns:2fr 1fr;gap:16px;align-items:start}
.ctn-appcol h6{font-size:11px;color:var(--app-fg-3,#8b95a5);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px}
.ctn-appstack{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 8px 30px #0006}
.ctn-appstack img{width:100%;display:block;cursor:pointer}
.ctn-appph{display:flex;align-items:center;justify-content:center;color:#999;font-size:12px;border:1px dashed #ccc;margin:0}
.ctn-appph.desk{aspect-ratio:2.44}
.ctn-appph.mob{aspect-ratio:4/3}
.ctn-apcat{padding:14px 18px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ctn-apcatit{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--app-border,#30363d);border-radius:10px;padding:11px;cursor:pointer;background:var(--app-surface-2,#0d1117)}
.ctn-apcatit:hover{border-color:#F47920}
.ctn-apcatprev{width:40px;height:40px;border-radius:8px;background:linear-gradient(145deg,#2b2130,#1d1826);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;color:#bc8cff}
.ctn-apcatit h6{font-size:12.5px;margin:0 0 3px}
.ctn-apcatit p{font-size:11px;color:var(--app-fg-3,#8b95a5);margin:0}
.ctn-apcatit.picked{border-color:#bc8cff;background:#bc8cff12}
.ctn-apcatn{margin-left:7px;font-size:10px;background:#bc8cff33;color:#bc8cff;border-radius:8px;padding:1px 7px;font-weight:700}
.ctn-apcatfoot{display:flex;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid var(--app-border,#30363d);flex-wrap:wrap}
.ctn-apcatseq{flex:1;display:flex;flex-wrap:wrap;gap:6px;min-width:200px}
.ctn-apcatchip{display:inline-flex;align-items:center;gap:6px;font-size:11px;background:var(--app-surface-2,#0d1117);border:1px solid #bc8cff55;border-radius:999px;padding:3px 9px}
.ctn-apcatchip b{color:#bc8cff}
.ctn-apcatchip i{font-style:normal;cursor:pointer;color:var(--app-fg-3,#8b95a5)}
.ctn-apcatchip i:hover{color:#f85149}
/* estilo maestro de la página A+ */
.ctn-apestilo{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;background:var(--app-surface,#161b22);border:1px solid var(--app-border,#30363d);border-left:3px solid #bc8cff;border-radius:10px;padding:9px 12px;flex-wrap:wrap}
.ctn-apestilo>span{font-size:11.5px;color:#bc8cff;font-weight:700;white-space:nowrap;padding-top:5px}
.ctn-apestilo textarea{flex:1;resize:vertical;background:transparent;border:none;color:var(--app-fg,#e6edf3);font:inherit;font-size:12px;padding:4px 2px;min-height:26px}
.ctn-apestilo textarea:focus{outline:none}
@media (max-width:900px){.ctn-apboxes,.ctn-appegado{grid-template-columns:1fr}}

/* ── Contenido · Brand Kit ── */
.ctn-kitbody{padding:14px 18px;display:flex;flex-direction:column;gap:16px}
.ctn-kitsec>b{display:block;font-size:12px;margin-bottom:8px}
.ctn-kitlogos{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ctn-kitlogo{position:relative;width:86px;height:60px;border:1px solid var(--app-border,#30363d);border-radius:9px;background:#fff;display:flex;align-items:center;justify-content:center;padding:6px}
.ctn-kitlogo img{max-width:100%;max-height:100%;object-fit:contain}
.ctn-kitlogo i{position:absolute;top:-7px;right:-7px;width:18px;height:18px;border-radius:50%;background:#f85149;color:#fff;font-style:normal;font-size:10px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.ctn-kitupload{display:inline-flex;align-items:center;justify-content:center;width:86px;height:60px;border:1px dashed #F4792066;border-radius:9px;color:#F47920;font-size:11.5px;cursor:pointer;background:#F4792010}
.ctn-kitupload:hover{background:#F4792022}
.ctn-kitcolor{display:flex;gap:8px;align-items:center;margin-bottom:7px}
.ctn-kitcolor input[type=color]{width:34px;height:30px;border:none;background:none;padding:0;cursor:pointer}
.ctn-kithex{width:96px;font-family:monospace}
.ctn-kituso{flex:1}
.ctn-kithex,.ctn-kituso,.ctn-kitinput{background:var(--app-surface-2,#0d1117);border:1px solid var(--app-border,#30363d);border-radius:8px;color:var(--app-fg,#e6edf3);font:inherit;font-size:12.5px;padding:7px 10px}
.ctn-kitinput{width:100%;resize:vertical}
.ctn-kithex:focus,.ctn-kituso:focus,.ctn-kitinput:focus{outline:none;border-color:#F47920}

/* ── Contenido · SEO simulación Amazon ── */
.ctn-amz{display:flex;flex-direction:column;gap:20px;background:#fff;border-radius:12px;padding:22px;color:#0f1111;box-shadow:0 8px 30px #0006}
.ctn-amztop{display:flex;gap:22px}
/* Galería estilo Amazon: riel de miniaturas + foto principal */
.ctn-amzgalw{flex:0 0 360px;display:flex;gap:10px}
.ctn-amzthumbs{display:flex;flex-direction:column;gap:8px;width:46px;flex-shrink:0}
.ctn-amzthumb{width:46px;height:46px;padding:0;border:1px solid #d5d9d9;border-radius:8px;background:#fff;cursor:pointer;overflow:hidden;display:flex;align-items:center;justify-content:center}
.ctn-amzthumb img{width:100%;height:100%;object-fit:contain}
.ctn-amzthumb.on{border-color:#e77600;box-shadow:0 0 0 1px #e77600}
.ctn-amzmain{flex:1;height:314px;border:1px solid #e3e6e6;border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:zoom-in}
.ctn-amzmain img{max-width:100%;max-height:100%;object-fit:contain}
.ctn-amzinfo{flex:1;min-width:0}
/* Sección "Descripción del producto" dentro de la página blanca */
.ctn-amzdesc{border-top:1px solid #e7e7e7;padding-top:16px}
.ctn-amzdesc b{font-size:15px;color:#0f1111;font-family:Arial,Helvetica,sans-serif;display:block;margin-bottom:8px}
.ctn-amzdesc p{margin:0;font-size:13.5px;line-height:1.6;color:#0f1111;font-family:Arial,Helvetica,sans-serif;white-space:pre-wrap}
.ctn-amzdescnote{display:inline-block;margin-top:10px;font-size:11.5px;color:#565959;font-family:Arial,Helvetica,sans-serif}
.ctn-amztitle{font-size:19px;line-height:1.35;font-weight:600;color:#0f1111;margin:0 0 4px;font-family:Arial,Helvetica,sans-serif}
/* La página simulada de Amazon es una isla BLANCA dentro del tema oscuro. La
   regla global de encabezados (body:not([data-theme=light]) h1..h4) le gana por
   especificidad a las clases de aquí y pintaba el título casi blanco sobre
   blanco. Se fuerza la tinta oscura de la isla: el fondo es fijo, no temático. */
.ctn-amz :is(h1,h2,h3,h4,h5,h6){color:#0f1111 !important;text-transform:none !important;letter-spacing:normal !important;font-family:Arial,Helvetica,sans-serif !important}
/* La parte del título que viene de itemHighlight (title_differentiation): en
   Amazon se lee pegada al nombre, pero aquí se atenúa para que se vea DÓNDE
   termina uno y empieza el otro. */
.ctn-amztitle .hl{font-weight:400;color:#565959}
.ctn-amzhl{font-size:11px;color:#565959;font-family:Arial,Helvetica,sans-serif;margin:0 0 6px}
.ctn-amzhl b{font-weight:700;color:#0f1111}
.ctn-amzhl b.hl{color:#565959}
.ctn-amzbrand{font-size:13px;color:#007185;margin-bottom:2px;font-family:Arial,Helvetica,sans-serif}
.ctn-amzstars{font-size:13px;color:#de7921;margin-bottom:8px;font-family:Arial,Helvetica,sans-serif}
.ctn-amzstars b{color:#0f1111;font-weight:400;margin-left:4px}
.ctn-amzstars span{color:#007185;margin-left:6px}
.ctn-amz hr{border:none;border-top:1px solid #e7e7e7;margin:10px 0}
.ctn-amzabout b{font-size:15px;color:#0f1111;font-family:Arial,Helvetica,sans-serif}
.ctn-amzabout ul{margin:8px 0 0 18px;padding:0}
.ctn-amzabout li{font-size:13.5px;line-height:1.5;color:#0f1111;margin-bottom:5px;font-family:Arial,Helvetica,sans-serif}
@media (max-width:800px){.ctn-amztop{flex-direction:column}.ctn-amzgalw{flex:none;width:100%}.ctn-amzmain{height:auto;aspect-ratio:1/1}}

/* ── Admin → Usuarios · Editar usuario (layout dos columnas) ─────────── */
.uem-body { display: grid; grid-template-columns: 300px 1fr; padding: 0; }
.uem-left { padding: 18px 20px; border-right: 1px solid var(--app-tint-2); display: flex; flex-direction: column; gap: 2px; }
.uem-right { padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 860px) {
  .uem-body { grid-template-columns: 1fr; }
  .uem-left { border-right: 0; border-bottom: 1px solid var(--app-tint-2); }
}
.uem-grp-title { display: flex; align-items: center; gap: 10px; font-family: var(--mx-font-display); font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--app-fg-3); margin-bottom: 8px; }
.uem-count { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--mx-orange); text-transform: none; letter-spacing: 0; white-space: nowrap; }
.uem-seg { display: inline-flex; background: var(--app-surface-2); border: 1px solid var(--app-border); border-radius: 9px; padding: 3px; gap: 2px; }
.uem-seg button { font-size: 11.5px; font-weight: 600; padding: 4px 11px; border-radius: 7px; border: 0; background: transparent; color: var(--app-fg-3); cursor: pointer; white-space: nowrap; text-transform: none; letter-spacing: 0; }
.uem-seg button.on { background: var(--mx-orange); color: #fff; }
.uem-seg.grow { display: flex; }
.uem-seg.grow button { flex: 1; padding: 7px 11px; font-size: 12.5px; }
.uem-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.uem-chip { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--app-border); background: var(--app-tint-1); color: var(--app-fg-2); cursor: pointer; user-select: none; text-transform: none; letter-spacing: 0; }
.uem-chip.on { border-color: var(--mx-orange); background: var(--mx-orange-soft); color: var(--mx-orange); }
.uem-chip.on::before { content: '✓ '; font-weight: 800; }
.uem-summary { font-size: 12px; color: var(--app-fg-3); padding: 8px 11px; background: var(--app-tint-1); border-radius: 8px; line-height: 1.5; }
.uem-summary b { color: var(--app-fg-1); }
.uem-perms { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 8px; }
.uem-perm { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--app-tint-1); cursor: pointer; }
.uem-perm.is-locked { opacity: .6; cursor: default; }
.uem-perm .pl { flex: 1; min-width: 0; }
.uem-perm .pl b { display: block; font-size: 12.5px; font-weight: 600; color: var(--app-fg-1); }
.uem-perm .pl span { display: block; font-size: 10.5px; color: var(--app-fg-4); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uem-sw { position: relative; width: 34px; height: 19px; border-radius: 999px; background: var(--app-tint-3); flex: none; transition: background .15s; }
.uem-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 999px; background: var(--app-fg-3); transition: left .15s, background .15s; }
.uem-sw.on { background: var(--mx-orange); }
.uem-sw.on::after { left: 17px; background: #fff; }

/* ── Top productos — rediseño "Ledger" (21/07/2026) ──────────────── */
.sales-main { font-family: var(--mx-font-mono); font-weight: 700; font-size: 13.5px; color: var(--app-fg-1); }
.sales-sub  { font-family: var(--mx-font-mono); font-size: 10.5px; color: var(--app-fg-4); margin-top: 2px; }

.ref-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mx-font-mono); font-size: 12px; font-weight: 700;
  color: #f87171; background: rgba(248,113,113,.13);
  border: 1px solid rgba(248,113,113,.25); border-radius: 999px;
  padding: 3px 10px; cursor: pointer; transition: background .12s;
}
.ref-chip:hover { background: rgba(248,113,113,.24); }
.ref-chip__pct { font-weight: 400; opacity: .75; font-size: 10.5px; }

.stock-cell { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mx-font-mono); font-size: 12px; white-space: nowrap; }
.stock-cell__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.stock-cell__fbm { color: #0ea5e9; font-weight: 700; }

.wow-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mx-font-mono); font-size: 12px; font-weight: 700;
  border-radius: 7px; padding: 4px 9px; white-space: nowrap;
}
.wow-pill.up   { color: #4ade80; background: rgba(74,222,128,.14); }
.wow-pill.down { color: #f87171; background: rgba(248,113,113,.13); }
.wow-sub { font-family: var(--mx-font-mono); font-size: 9.5px; color: var(--app-fg-4); white-space: nowrap; }

/* Popup de motivos de devolución */
.rr-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(5,7,10,.72);
  display: grid; place-items: center; padding: 20px;
}
.rr-modal {
  width: min(580px, 94vw); max-height: 86vh; overflow-y: auto;
  background: var(--app-surface-2); border: 1px solid var(--app-tint-4);
  border-radius: 16px; padding: 22px 24px;
  box-shadow: 0 22px 60px rgba(0,0,0,.5);
}
.rr-eyebrow { font-family: var(--mx-font-mono); font-size: 10px; letter-spacing: 2px; color: var(--app-fg-4); text-transform: uppercase; }
.rr-title { font-size: 15px; font-weight: 800; margin: 6px 0 2px; color: var(--app-fg-1); }
.rr-sub { color: var(--app-fg-3); font-size: 12.5px; margin-bottom: 14px; }
.rr-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--app-tint-2); }
.rr-chip {
  border: 1px solid var(--app-tint-4); background: var(--app-tint-2);
  color: var(--app-fg-2); font-size: 11.5px; font-weight: 600;
  border-radius: 999px; padding: 4px 11px; cursor: pointer; transition: background .12s;
}
.rr-chip:hover { background: var(--app-tint-3); }
.rr-chip.on { background: var(--mx-orange); border-color: var(--mx-orange); color: #12161b; }
.rr-body { padding-top: 10px; min-height: 120px; }
.rr-empty { padding: 34px 0; text-align: center; color: var(--app-fg-4); font-size: 13px; }
.rr-row { display: grid; grid-template-columns: 1fr 44px 40px 130px; gap: 12px; align-items: center; padding: 7px 0; }
.rr-row__name { font-size: 13px; color: var(--app-fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-row__n { font-family: var(--mx-font-mono); font-size: 12.5px; font-weight: 700; text-align: right; color: var(--app-fg-1); }
.rr-row__pct { font-family: var(--mx-font-mono); font-size: 11px; text-align: right; color: var(--app-fg-4); }
.rr-row__track { height: 7px; background: var(--app-tint-3); border-radius: 4px; overflow: hidden; }
.rr-row__track i { display: block; height: 100%; background: var(--mx-orange); border-radius: 4px; }
.rr-foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--app-tint-2); color: var(--app-fg-3); font-size: 12px; }
.rr-foot b { color: var(--app-fg-1); }

/* ── Top productos "Ledger" — layout fixes (una línea por dato) ─────
   La columna Producto es la ÚNICA fluida (width:100% + max-width:0 =
   absorbe el espacio sobrante y trunca), así la tabla respira igual con
   el sidebar abierto o cerrado; todo lo demás va en una línea sin wrap,
   numéricos a la derecha como en la propuesta aprobada. */
.sku-tbl { table-layout: auto; }
.sku-tbl th, .sku-tbl td { white-space: nowrap; }
.sku-tbl td { vertical-align: middle; }
.sku-tbl-scroll { overflow-x: auto; }
.sku-tbl td.sku-prod-cell { width: 100%; max-width: 0; }
.sku-tbl .sku-title-cell, .sku-tbl .sku-title-cell--child { max-width: none; flex: 1; min-width: 0; }
.sku-tbl .sku-title {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
  -webkit-line-clamp: unset;
}
.sku-tbl .sku-ids { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
.sku-tbl .sku-ids .sku-id-tag { flex: none; }
.sku-tbl .sku-ids .sku-id-code { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ref-chip { white-space: nowrap; }
.wow-cell { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.wow-cell__top { display: inline-flex; align-items: center; gap: 7px; }

/* Stock y Δ semanal centrados (no pegados a la derecha), y padding
   horizontal más apretado para que la tabla quepa SIN scroll lateral
   también con el sidebar expandido. */
.sku-tbl th, .sku-tbl td { padding-left: 9px; padding-right: 9px; }
.sku-tbl th:last-child, .sku-tbl td:last-child { padding-right: 14px; }
.sku-tbl th:nth-child(7), .sku-tbl td:nth-child(7),
.sku-tbl th:nth-child(8), .sku-tbl td:nth-child(8) { text-align: center; }
.wow-cell { align-items: center; }

/* Refunds = puro número clickeable (el chip rojo con % amontonaba la fila).
   Subrayado punteado sutil como pista de que abre el popup de motivos. */
.ref-plain {
  background: transparent; border: 0; padding: 0; cursor: pointer;
  font-family: var(--mx-font-mono); font-size: 13px; font-weight: 700;
  color: var(--app-fg-1);
  text-decoration: underline dotted rgba(255,255,255,.28);
  text-underline-offset: 3px;
}
.ref-plain:hover { color: var(--mx-orange); text-decoration-color: var(--mx-orange); }

/* Ajustes de tamaño pedidos 21/07: unidades y "disp." al MISMO tamaño que
   el resto de la fila, y la columna Producto con piso de ancho para que
   ASIN + SKU lead salgan completos. */
.sales-sub { font-size: 13.5px; color: var(--app-fg-3); }
.stock-cell { font-size: 13px; }
.sku-tbl td.sku-prod-cell { min-width: 360px; }
.wow-cell__top { gap: 5px; }

/* IDs en dos renglones + filas más aireadas (21/07): el segundo renglón de
   ids va pegadito al primero, y la fila gana padding vertical para respirar. */
.sku-tbl td { padding-top: 16px; padding-bottom: 16px; }
.sku-ids + .sku-ids { margin-top: 3px; }

/* Homologación 21/07 — headers idénticos, cuerpo estándar 13px, stock blanco,
   datos centrados bajo su header.
   - Los th con clase num/pct heredaban la fuente MONO de `.tbl .num` y se
     veían de otro tamaño que "PRODUCTO": aquí se fuerza la display en todos.
   - El tamaño del título del producto (13px) es el estándar de TODO el
     cuerpo, parent y child.
   - Columnas 3-8 centradas para que cada dato caiga bajo su header (evita
     el "¿cuál es refunds?" entre ventas/unidades y refunds). */
.sku-tbl th, .sku-tbl th.num, .sku-tbl th.pct {
  font-family: var(--mx-font-display);
  font-size: 10.5px;
  letter-spacing: 1.2px;
}
.sku-tbl th:nth-child(n+3), .sku-tbl td:nth-child(n+3) { text-align: center; }
.sales-main { font-size: 13px; }
.sales-sub  { font-size: 13px; }
.sku-tbl .sku-title--child { font-size: 13px; }
.sku-tbl td.num, .sku-tbl td.pct { font-size: 13px; }
.ref-plain { font-size: 13px; }
.stock-cell { font-size: 13px; color: var(--app-fg-1); }
.stock-cell b { color: var(--app-fg-1); }

/* Popup de devoluciones — marginado y fino (21/07): .main lleva zoom 1.18,
   así que los vh del modal medían de más y el popup tocaba ambos bordes.
   Se compensa el zoom para dejar margen real arriba/abajo, y el scroll vive
   SOLO en la lista de motivos (header + filtros quedan fijos). */
.rr-overlay { padding: 0; }
.rr-modal {
  width: min(580px, calc(92vw / 1.18));
  max-height: calc(100vh / 1.18 - 96px);   /* ≈56px de aire real arriba y abajo */
  display: flex; flex-direction: column;
  overflow: hidden;
}
.rr-body { flex: 1; overflow-y: auto; }

/* Más aire a la zona de datos (21/07): el título cede espacio — padding
   más generoso en las columnas 3-8 y piso de ancho para el Δ semanal, con
   sparkline más grande (64×20). */
.sku-tbl th:nth-child(n+3), .sku-tbl td:nth-child(n+3) { padding-left: 14px; padding-right: 14px; }
.sku-tbl th:nth-child(8), .sku-tbl td:nth-child(8) { min-width: 210px; }

/* ── Recomendaciones de KAI (sustituye al Marketplace Split, 21/07) ── */
.kai-recs__avatar {
  width: 20px; height: 20px; border-radius: 6px; flex: none;
  background: linear-gradient(135deg, #F47920, #C4541A); color: #fff;
  display: inline-grid; place-items: center;
  font-family: var(--mx-font-display); font-size: 11px; font-weight: 800;
}
.kai-rec {
  display: flex; align-items: center; gap: 10px; width: 100%;
  text-align: left; background: transparent; border: 0;
  border-top: 1px solid var(--app-tint-2);
  padding: 10px 4px; cursor: pointer;
  color: var(--app-fg-2); font-size: 12.5px; line-height: 1.45;
  font-family: inherit; transition: background .12s;
}
.kai-rec:hover { background: rgba(244,121,32,.05); }
.kai-rec__rank {
  font-family: var(--mx-font-mono); font-size: 11px; font-weight: 800;
  color: var(--mx-orange); width: 14px; text-align: center; flex: none;
}
.kai-rec__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.kai-rec__dot--s2 { background: #f87171; }
.kai-rec__dot--s1 { background: #fbbf24; }
.kai-rec__dot--s0 { background: #4ade80; }
.kai-rec__txt { flex: 1; min-width: 0; }
.kai-rec__txt b { color: var(--app-fg-1); font-weight: 600; }
.kai-rec__cat {
  font-family: var(--mx-font-display); font-size: 9px; font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase; color: var(--app-fg-4);
  background: var(--app-tint-2); border-radius: 4px; padding: 2px 7px; flex: none;
}
.kai-recs__empty { padding: 26px 6px; color: var(--app-fg-4); font-size: 12.5px; }

/* ── Voz del cliente (reseñas del barrido semanal, 21/07) ── */
.voc-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7.5px 2px; border-top: 1px solid var(--app-tint-2);
}
.voc-stars { font-family: var(--mx-font-mono); font-size: 11px; letter-spacing: 1px; flex: none; }
.voc-txt {
  flex: 1; min-width: 0; font-size: 12.5px; color: var(--app-fg-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.voc-txt b { color: var(--app-fg-1); font-weight: 600; }
.voc-chip {
  font-family: var(--mx-font-mono); font-size: 9px; font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase; color: var(--app-fg-4);
  background: var(--app-tint-2); border-radius: 4px; padding: 2px 7px; flex: none;
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.voc-date { font-family: var(--mx-font-mono); font-size: 10px; color: var(--app-fg-4); flex: none; }
.voc-empty { padding: 26px 6px; color: var(--app-fg-4); font-size: 12.5px; }

/* Reseñas: estrellas grandes y amarillas estilo Amazon; título clickeable. */
.voc-stars { font-size: 15px; letter-spacing: 1.5px; color: #FFA41C; }
a.voc-txt--link { text-decoration: none; color: var(--app-fg-2); }
a.voc-txt--link:hover b { color: var(--mx-orange); text-decoration: underline; }

/* ── Sección Reseñas (11/08): elegir marca → línea de tiempo + reseñas ── */
.rsn-card { padding: 0; overflow: hidden; }
.rsn-muted { color: var(--app-fg-4); font-size: 11px; }
.rsn-empty { padding: 28px 16px; color: var(--app-fg-4); font-size: 12.5px; }
.rsn-prog {
  display: flex; align-items: center; gap: 13px; padding: 10px 15px;
  border-bottom: 1px solid var(--app-border);
  background: linear-gradient(90deg, rgba(74,222,128,.07), transparent 62%);
}
.rsn-prog__dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; flex: none; }
.rsn-prog__dot.is-off { background: var(--app-fg-5); }
/* La franja del programa se distingue de la del barrido: una manda correos a
   clientes, la otra solo lee. */
.rsn-prog--sol { background: linear-gradient(90deg, rgba(244,121,32,.08), transparent 62%); }
.rsn-prog--sol .rsn-muted { margin-left: auto; }
.rsn-switch {
  width: 38px; height: 21px; border-radius: 20px; background: var(--app-tint-4);
  border: none; position: relative; cursor: pointer; flex: none; padding: 0;
  transition: background .15s;
}
.rsn-switch.is-on { background: var(--mx-orange); }
.rsn-switch:disabled { opacity: .5; cursor: wait; }
.rsn-switch b { position: absolute; top: 2px; left: 2px; width: 17px; height: 17px;
                border-radius: 50%; background: #fff; transition: left .15s; }
.rsn-switch.is-on b { left: 19px; }
.rsn-prog__t { font-size: 12.5px; color: var(--app-fg-1); }
.rsn-filt {
  display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
  padding: 11px 15px; border-bottom: 1px solid var(--app-border);
}
.rsn-seg { display: inline-flex; border: 1px solid var(--app-border); border-radius: 8px; overflow: hidden; }
.rsn-seg span { padding: 5px 11px; font-size: 11.5px; color: var(--app-fg-3); cursor: pointer; }
.rsn-seg span.is-on { background: var(--mx-orange); color: #1a1005; font-weight: 700; }
.rsn-bar { display: inline-flex; width: 100%; height: 7px; border-radius: 4px; overflow: hidden;
           background: var(--app-tint-2); margin: 9px 0 6px; }

/* paso 1 */
.rsn-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 10px; padding: 15px; }
.rsn-bcard {
  border: 1px solid var(--app-border); border-radius: 10px; padding: 12px 13px;
  background: var(--app-surface-2); cursor: pointer; transition: border-color .12s, transform .12s;
}
.rsn-bcard:hover { border-color: var(--mx-orange); transform: translateY(-2px); }
.rsn-bcard__head { display: flex; align-items: center; gap: 9px; }
.rsn-bcard__n { flex: 1; min-width: 0; font-size: 12.5px; color: var(--app-fg-1); font-weight: 600;
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rsn-switch--sm { width: 30px; height: 17px; }
.rsn-switch--sm b { width: 13px; height: 13px; }
.rsn-switch--sm.is-on b { left: 15px; }
.rsn-bcard__r { display: flex; align-items: baseline; gap: 6px; margin-top: 7px; }
.rsn-bcard__r b { font-family: var(--mx-font-display); font-size: 20px; font-weight: 800; color: var(--app-fg-1); }
.rsn-bcard__m { font-size: 10.5px; color: var(--app-fg-4); margin-top: 3px; }

/* paso 2 */
.rsn-crumb { display: flex; align-items: center; gap: 10px; padding: 12px 15px; border-bottom: 1px solid var(--app-border); }
.rsn-crumb__back { font-size: 11.5px; color: var(--mx-orange); cursor: pointer; }
.rsn-crumb__back:hover { text-decoration: underline; }
.rsn-crumb__n { font-family: var(--mx-font-display); font-size: 17px; font-weight: 800; color: var(--app-fg-1); }
.rsn-hero { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 22px;
            padding: 16px 15px; border-bottom: 1px solid var(--app-border); }
.rsn-hero__big { font-family: var(--mx-font-display); font-size: 40px; font-weight: 800; color: var(--app-fg-1); line-height: 1; }
.rsn-hero__new { margin-top: 11px; font-size: 12px; line-height: 1.3; }
.rsn-hero__new b { color: #4ade80; font-weight: 800; font-size: 15px; display: block; }
.rsn-hero__new span { color: var(--app-fg-4); font-size: 10.5px; }

/* max-width por barra: con dos barridos, flex:1 a secas hacía que cada una
   midiera media pantalla y pareciera un bloque de color, no una gráfica. */
.rsn-weeks { display: flex; gap: 7px; align-items: flex-end; height: 84px; }
.rsn-wk { flex: 1 1 0; max-width: 52px; display: flex; flex-direction: column;
          justify-content: flex-end; gap: 2px; cursor: pointer; }
.rsn-wk u { display: block; background: rgba(244,121,32,.55); border-radius: 3px 3px 0 0; }
.rsn-wk s { display: block; background: rgba(74,222,128,.6); text-decoration: none; border-radius: 3px; }
.rsn-wk em { display: block; text-align: center; font-style: normal; font-size: 9px; color: var(--app-fg-4); margin-top: 4px; }
.rsn-wk:hover s { background: #4ade80; }
.rsn-wk.is-on s { background: #4ade80; }
.rsn-wk.is-on em { color: var(--mx-orange); font-weight: 700; }
.rsn-legend { display: flex; gap: 15px; font-size: 10.5px; color: var(--app-fg-4); margin-top: 5px; }
.rsn-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; }

/* reseña */
.rsn-rev { display: grid; grid-template-columns: minmax(0, 1fr) 148px; gap: 14px;
           padding: 13px 15px; border-bottom: 1px solid var(--app-tint-2); }
.rsn-rev:hover { background: var(--app-row-hover); }
.rsn-rev__top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 4px; }
.rsn-rev__t { font-size: 13.5px; font-weight: 700; color: var(--app-fg-1); margin-bottom: 3px; }
.rsn-rev__x { font-size: 12.6px; color: var(--app-fg-2); line-height: 1.5; }
.rsn-rev__meta { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 7px; }
.rsn-rev__act { display: flex; flex-direction: column; gap: 6px; }
.rsn-tag { font-size: 10px; padding: 2.5px 8px; border-radius: 20px; border: 1px solid var(--app-border);
           color: var(--app-fg-4); white-space: nowrap; max-width: 220px;
           overflow: hidden; text-overflow: ellipsis; }
.rsn-tag.is-var { color: #93c5fd; border-color: rgba(147,197,253,.35); background: rgba(147,197,253,.08); }
.rsn-tag.is-vine { color: #4ade80; border-color: rgba(74,222,128,.35); background: rgba(74,222,128,.08); }
.rsn-tag.is-bad { color: #f87171; border-color: rgba(248,113,113,.35); background: rgba(248,113,113,.08); }
.rsn-b { display: block; text-align: center; border-radius: 8px; padding: 6px 9px;
         font-size: 11px; font-weight: 700; text-decoration: none; }
.rsn-b.is-o { background: var(--mx-orange); color: #1a1005; }
.rsn-b.is-g { border: 1px solid var(--app-border); color: var(--app-fg-2); }
.rsn-b:hover { opacity: .88; }

/* ── Voz del cliente v2 (10/08): resumen fijo + feed scrolleable ──
   El alto de esta tarjeta lo amarra su hermana del par (Pagada vs orgánica),
   así que el feed scrollea DENTRO y la tarjeta nunca empuja la página. */
.voc-card { display: flex; flex-direction: column; min-height: 0; }
.voc-split {
  flex: 1; min-height: 0; display: grid;
  grid-template-columns: 132px minmax(0, 1fr); gap: 14px;
}
.voc-sum { border-right: 1px solid var(--app-tint-2); padding-right: 13px; }
.voc-sum__big {
  font-family: var(--mx-font-display); font-size: 26px; font-weight: 800;
  color: var(--app-fg-1); line-height: 1; margin-right: 6px;
}
.voc-sum__n { font-family: var(--mx-font-mono); font-size: 10.5px; color: var(--app-fg-4); margin-top: 4px; }
.voc-sum__new { margin-top: 11px; font-size: 12px; line-height: 1.3; }
.voc-sum__new b { color: #4ade80; font-weight: 800; font-size: 14px; display: block; }
.voc-sum__new span { color: var(--app-fg-4); font-size: 10.5px; }
.voc-sum__wait { color: var(--app-fg-4); font-size: 10.5px; }
.voc-alert {
  display: inline-block; margin-top: 9px; font-size: 10px; padding: 2px 7px;
  border-radius: 20px; color: #f87171; border: 1px solid rgba(248,113,113,.35);
  background: rgba(248,113,113,.08);
}
.voc-bar {
  display: inline-flex; width: 100%; max-width: 106px; height: 6px;
  border-radius: 3px; overflow: hidden; background: var(--app-tint-2); margin-top: 9px;
}
/* max-height, no solo overflow: la tarjeta vive en un grid que estira la fila al
   contenido más alto. Sin tope, 133 reseñas hacían crecer la tarjeta a 309px y
   empujaban a su hermana; el scroll interno nunca se activaba. */
/* overflow-x oculto: la fila de cabecera (estrellas + fecha + chip + liga) no
   cabe en 330px con nombres de producto largos y sacaba una barra horizontal
   que además recortaba el "Amazon ↗". El chip es lo único que cede. */
.voc-feed { min-height: 0; max-height: 144px; overflow-y: auto; overflow-x: hidden; padding-right: 4px; }
.voc-item { padding: 7px 0; border-top: 1px solid var(--app-tint-2); }
.voc-item:first-child { border-top: none; padding-top: 0; }
.voc-item__top { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.voc-item__top .voc-stars { font-size: 12px; letter-spacing: 1px; flex: none; }
.voc-item__top .voc-date { flex: none; }
.voc-item__top .voc-chip { flex: 0 1 auto; min-width: 0; max-width: 92px; }
.voc-amz {
  margin-left: auto; flex: none; font-size: 10.5px; color: var(--mx-orange); text-decoration: none;
  padding-left: 2px;
}
.voc-amz:hover { text-decoration: underline; }
.voc-item__txt {
  font-size: 12.2px; color: var(--app-fg-2); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.voc-item__txt b { color: var(--app-fg-1); font-weight: 600; }

/* ── Selección de texto con marca (04/08) ─────────────────────────
   El azul default del sistema sobre nuestros fondos oscuros dejaba tinta
   oscura sobre azul (ilegible — regla de contraste de Ro). Selección en
   naranja MEXUS translúcido conservando la tinta del tema. */
::selection { background: rgba(244, 121, 32, 0.4); }

/* Excepción: lo que TÚ le escribes a KAI se selecciona en azul sólido con
   tinta blanca — tanto en la barra de escritura como en la burbuja ya enviada.
   La burbuja del usuario es naranja MEXUS sólido, así que el resaltado naranja
   translúcido de arriba caía naranja-sobre-naranja y era invisible. El azul es
   el único tono que contrasta contra el naranja y contra el fondo del input a
   la vez, y la tinta blanca va explícita porque la burbuja fuerza #160c02. */
.kai-input::selection,
.kai-panel__input textarea::selection,
.kai-msg--you .kai-msg__body::selection,
.kai-msg--you .kai-msg__body ::selection,
.kai-msg--you .kai-msg__bubble::selection,
.kai-msg--you .kai-msg__bubble ::selection { background: #2D6BFF; color: #FFFFFF; }

/* ── Calendario promo: vista 6 meses con zoom (05/08) ─────────────
   Más ancho por mes = etiquetas legibles; navegación ‹ 3 meses › y
   flecha ▼ de la semana en curso alineada al carril de tiempo. */
.mxpc-navrow { display: flex; align-items: center; gap: 12px; padding: 6px 2px 10px; }
.mxpc-navrow b { font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--app-fg-1); }
.mxpc-navrow .nv { background: var(--app-surface); border: 1px solid var(--app-border); color: var(--app-fg-2); border-radius: 8px; padding: 5px 12px; font-size: 12px; cursor: pointer; }
.mxpc-navrow .nv:hover { border-color: #F47920; color: #F47920; }
.mxpc-navrow .nv.hoy { color: #F47920; border-color: #F47920; font-weight: 700; }
.mxpc-hoyrow { position: relative; height: 20px; margin-left: 190px; }
.mxpc-hoyrow .a { position: absolute; transform: translateX(-50%); color: #F47920; font-size: 13px; font-weight: 800; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.mxpc-hoyrow .a span { font-size: 8.5px; letter-spacing: .6px; text-transform: uppercase; white-space: nowrap; color: var(--app-fg-3); }
.mxpc-full .tk.hoy { background: #F47920; width: 2px; opacity: .5; }
/* zoom de texto: 6 columnas dan el doble de aire — súbele a las etiquetas */
.mxpc-full .mxpc-out { font-size: 12px; }
.mxpc-full .mxpc-months > div { font-size: 12.5px; }
.mxpc-full .mxpc-row .rn { font-size: 12.5px; }

/* ── Finanzas / CRM (06/08 · rediseño 16/08) ──────────────────────
   La grilla imita una hoja de cálculo a propósito: los inputs son
   invisibles hasta que se tocan, así 13 columnas editables se leen como
   una tabla y no como un formulario.

   Todo lo que antes vivía en style={{}} dentro del JSX está aquí: los
   colores de semáforo tienen que resolverse por tema y un literal metido
   en el markup no puede hacerlo. */

/* Tintas de estatus, por tema. Un solo valor no puede contrastar contra la
   crema del tema claro y contra el navy del oscuro a la vez. */
body[data-theme="light"] {
  --fz-ok:   #15803D; --fz-ok-bg:   rgba(22,163,74,.13);
  --fz-warn: #A85D00; --fz-warn-bg: rgba(217,138,4,.15);
  --fz-bad:  #B42318; --fz-bad-bg:  rgba(180,35,24,.10);
  --fz-dim:  #5C564E; --fz-dim-bg:  rgba(26,22,20,.07); --fz-dim-bar: #CFC9BC;
}
body:not([data-theme="light"]) {
  --fz-ok:   #6FDBA0; --fz-ok-bg:   rgba(111,219,160,.16);
  --fz-warn: #F0B45C; --fz-warn-bg: rgba(240,180,92,.16);
  --fz-bad:  #F98A80; --fz-bad-bg:  rgba(249,138,128,.15);
  --fz-dim:  #A9B4BF; --fz-dim-bg:  rgba(255,255,255,.09); --fz-dim-bar: #4A5560;
}

/* ── encabezado de sección ── */
.fz-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.fz-head__sp { flex: 1; min-width: 0; }
.fz-head__acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Botón de revisión: cuando hay hallazgos graves deja de ser un botón neutro.
   Es el único elemento de la sección con permiso para llamar la atención. */
.fz-alert {
  display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 12.5px;
  font-weight: 600; padding: 7px 13px; border-radius: 8px; cursor: pointer; transition: .14s;
  border: 1px solid var(--app-border); background: var(--app-surface); color: var(--app-fg-2);
}
.fz-alert:hover { border-color: var(--app-fg-4); color: var(--app-fg-1); }
.fz-alert.is-alta { border-color: var(--fz-bad); color: var(--fz-bad); background: var(--fz-bad-bg); }
.fz-alert.is-alta:hover { border-color: var(--fz-bad); color: var(--fz-bad); }
.fz-alert .n {
  font-family: var(--mx-font-mono); font-size: 11px; font-weight: 700; line-height: 1;
  padding: 3px 7px; border-radius: 20px; background: var(--app-tint-3); color: var(--app-fg-1);
}
.fz-alert.is-alta .n { background: var(--fz-bad); color: var(--app-bg); }

/* ── barra de mes ── */
.fz-monthbar {
  display: inline-flex; align-items: center; gap: 2px; padding: 4px;
  background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 9px;
}
.fz-monthbar__m {
  font-family: var(--mx-font-display); font-weight: 700; font-size: 19px; letter-spacing: .03em;
  text-transform: uppercase; padding: 0 14px; min-width: 168px; text-align: center; color: var(--app-fg-1);
}
.fz-nav {
  border: 0; background: transparent; color: var(--app-fg-3); cursor: pointer; border-radius: 6px;
  padding: 5px 9px; display: inline-flex; align-items: center; transition: .12s;
}
.fz-nav:hover { background: var(--app-hover); color: var(--app-fg-1); }
.fz-nav:disabled { opacity: .35; cursor: default; }

/* ── KPIs ── */
.fz-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.fz-kpis.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fz-kpi {
  position: relative; overflow: hidden; padding: 14px 16px 15px;
  background: var(--app-surface); border: 1px solid var(--app-border);
  border-top: 3px solid var(--fz-accent, var(--app-fg-4)); border-radius: var(--mx-radius-md);
}
.fz-kpi__l {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--app-fg-3); margin-bottom: 8px;
}
.fz-kpi__v {
  font-family: var(--mx-font-mono); font-size: 24px; font-weight: 700; letter-spacing: -.02em;
  line-height: 1; color: var(--app-fg-1); font-variant-numeric: tabular-nums;
}
.fz-kpi__s { font-size: 11.8px; color: var(--app-fg-3); margin-top: 7px; line-height: 1.35; }

/* ── tarjetas ── */
.fz-card { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--mx-radius-md); overflow: hidden; margin-bottom: 16px; }
.fz-card__head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 16px; border-bottom: 1px solid var(--app-border); background: var(--app-surface-2);
}
.fz-card__head h4 {
  margin: 0; font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--app-fg-1);
  letter-spacing: 0; text-transform: none; display: flex; align-items: center; gap: 9px;
}
.fz-card__head h4::before {
  content: ""; width: 4px; height: 15px; border-radius: 3px; background: var(--mx-orange); flex: none;
}
.fz-card__hint { font-size: 11.5px; color: var(--app-fg-4); }

/* ── filtros ── */
.fz-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.fz-chip {
  border: 1px solid var(--app-border); background: transparent; color: var(--app-fg-3);
  font: inherit; font-size: 11.5px; font-weight: 600; padding: 4px 11px;
  border-radius: 20px; cursor: pointer; transition: .12s;
  display: inline-flex; align-items: center; gap: 6px;
}
.fz-chip:hover { color: var(--app-fg-1); border-color: var(--app-fg-4); }
.fz-chip.on { background: var(--app-fg-1); border-color: var(--app-fg-1); color: var(--app-bg); }
.fz-chip .n { font-family: var(--mx-font-mono); font-size: 10.5px; opacity: .75; }
.fz-search {
  border: 1px solid var(--app-border); background: var(--app-bg); color: var(--app-fg-1);
  font: inherit; font-size: 12.5px; padding: 6px 11px; border-radius: 7px; width: 190px; max-width: 100%;
}
.fz-search:focus { outline: 0; border-color: var(--mx-orange); box-shadow: 0 0 0 3px var(--mx-orange-ring); }

/* ── tabla ──
   El thead pegajoso necesita un contenedor con ALTURA acotada. Con sólo
   overflow-x:auto el navegador crea el contexto de scroll pero sin tope de alto,
   y el encabezado no se pega nunca: se va con la página. */
.fz-scroll { overflow: auto; max-height: clamp(320px, calc(74vh / 1.18), 760px); }
.fz-tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; font-variant-numeric: tabular-nums; min-width: 1080px; }
.fz-tabla thead th {
  position: sticky; top: 0; z-index: 3; background: var(--app-surface-2);
  font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  color: var(--app-fg-4); text-align: left; padding: 9px 11px;
  border-bottom: 1px solid var(--app-border); white-space: nowrap;
}
.fz-tabla thead th.n { text-align: right; }
/* Los inputs de la grilla llevan width:100%, así que no aportan ancho propio y
   la columna se encogía al tamaño del encabezado: "$30,000" salía cortado como
   "$30,00(". El ancho mínimo lo pone la columna, no el input. */
.fz-tabla th.n, .fz-tabla td.n { min-width: 98px; }
.fz-tabla th.pct, .fz-tabla td.pct { min-width: 72px; }
.fz-tabla tbody td { padding: 0 11px; height: 38px; border-bottom: 1px solid var(--app-border-soft); color: var(--app-fg-2); white-space: nowrap; }
.fz-tabla tbody td.n { text-align: right; }
.fz-tabla tbody tr:hover { background: var(--app-row-hover); }
.fz-tabla tbody tr.pagado td { color: var(--app-fg-3); }
.fz-tabla tbody tr.pagado td.marca, .fz-tabla tbody tr.pagado td.total { color: var(--app-fg-2); }
/* La primera columna se congela ENTERA — encabezado, celdas y total. Congelar
   sólo las celdas dejaba el nombre de la marca alineado con el mes equivocado
   en cuanto se scrolleaba de lado. */
.fz-tabla th.marca, .fz-tabla td.marca { position: sticky; left: 0; z-index: 2; }
.fz-tabla th.marca { z-index: 4; }
.fz-tabla td.marca { font-weight: 600; color: var(--app-fg-1); background: var(--app-surface); }
.fz-tabla tbody tr:hover td.marca { background: var(--app-row-hover); }
.fz-tabla td.total, .fz-tabla td.tot { font-weight: 700; color: var(--app-fg-1); font-size: 13px; font-family: var(--mx-font-mono); }
.fz-tabla td.calc { color: var(--app-fg-3); }
.fz-tabla td.n, .fz-tabla td.marca .fz-money { font-family: var(--mx-font-mono); }
.fz-tabla tfoot td {
  position: sticky; bottom: 0; z-index: 3;
  padding: 12px 11px; background: var(--app-surface-2); border-top: 2px solid var(--app-border);
  font-weight: 700; color: var(--app-fg-1); font-size: 13px; text-align: left; font-family: var(--mx-font-mono);
}
.fz-tabla tfoot td.marca { z-index: 4; background: var(--app-surface-2); font-family: inherit; }
.fz-tabla tfoot td.n { text-align: right; }

.fz-ed {
  /* Sin box-sizing el ancho real era 100% + padding + borde: el input se salía
     de su celda y la tabla le cortaba el último dígito ("$30,00" por $30,000). */
  box-sizing: border-box;
  width: 100%; border: 1px solid transparent; background: transparent; color: inherit;
  font: inherit; font-family: var(--mx-font-mono); font-variant-numeric: tabular-nums;
  padding: 5px 7px; border-radius: 5px; transition: .1s;
}
.fz-ed.txt { font-family: inherit; }
.fz-ed:hover { border-color: var(--app-border); background: var(--app-bg); }
.fz-ed:focus {
  outline: 0; border-color: var(--mx-orange); background: var(--app-bg);
  box-shadow: 0 0 0 3px var(--mx-orange-ring); color: var(--app-fg-1);
}
.fz-ed::placeholder { color: var(--app-fg-4); }
.fz-ed.guardando { border-color: var(--mx-orange); background: var(--mx-orange-soft); }

/* ── píldoras y marcas de estado ── */
.fz-pill {
  border: 0; cursor: pointer; min-width: 96px; border-radius: 20px; padding: 5px 11px;
  font: inherit; font-size: 11px; font-weight: 700; transition: .12s;
}
.fz-pill:hover { filter: brightness(1.08); }
.fz-pill.pendiente { background: var(--fz-dim-bg);  color: var(--fz-dim); }
.fz-pill.facturado { background: var(--fz-warn-bg); color: var(--fz-warn); }
.fz-pill.pagado    { background: var(--fz-ok-bg);   color: var(--fz-ok); }
.fz-flag {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; vertical-align: middle;
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px; white-space: nowrap;
}
.fz-flag.warn { background: var(--fz-warn-bg); color: var(--fz-warn); }
.fz-flag.bad  { background: var(--fz-bad-bg);  color: var(--fz-bad); }
.fz-flag.dim  { background: var(--app-tint-3); color: var(--app-fg-3); }
.fz-flag.pct  { background: var(--mx-orange-soft); color: var(--mx-orange); }
/* "Se cobra el mes siguiente" — vive junto al estatus porque es información del
   cobro, no del cliente. Discreto hasta que está activo. */
.fz-defer {
  display: block; margin-top: 4px; border: 0; background: transparent; font: inherit;
  font-size: 10px; font-weight: 700; color: var(--app-fg-4); cursor: pointer;
  padding: 1px 5px; border-radius: 20px; transition: .12s; white-space: nowrap;
}
.fz-defer:hover { color: var(--app-fg-2); background: var(--app-hover); }
.fz-defer[aria-pressed="true"] { color: var(--fz-dim); background: var(--fz-dim-bg); }
/* Se revela al pasar por el renglón. Ocupa su lugar siempre (opacidad, no
   display) para que la fila no brinque, y sigue siendo alcanzable con teclado.
   Veinte botones visibles a la vez para una acción que se usa tres veces al mes
   era ruido; escondido del todo, nadie lo encuentra. */
.fz-defer { opacity: 0; }
.fz-tabla tbody tr:hover .fz-defer,
.fz-defer:focus-visible,
.fz-defer[aria-pressed="true"] { opacity: 1; }
.fz-hint { font-size: 11px; color: var(--app-fg-4); margin-top: 6px; line-height: 1.4; }
.fz-x {
  border: 0; background: transparent; color: var(--app-fg-4); cursor: pointer;
  padding: 4px 6px; border-radius: 6px; display: inline-flex; transition: .12s;
}
.fz-x:hover { background: var(--fz-bad-bg); color: var(--fz-bad); }

/* ── rezago: lo que se arrastra de meses anteriores ── */
.fz-late { border-left: 3px solid var(--fz-bad); }
.fz-late__sum { display: flex; align-items: center; gap: 14px; padding: 12px 16px; flex-wrap: wrap; }
.fz-late__v { font-family: var(--mx-font-mono); font-size: 20px; font-weight: 700; color: var(--fz-bad); line-height: 1; }
.fz-late__t { font-size: 12.5px; color: var(--app-fg-2); }
.fz-late__list { border-top: 1px solid var(--app-border-soft); max-height: 260px; overflow-y: auto; }
.fz-late__row {
  display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 12px; align-items: center;
  padding: 8px 16px; border-bottom: 1px solid var(--app-border-soft); font-size: 12.5px;
  background: transparent; border-left: 0; border-right: 0; border-top: 0; width: 100%;
  text-align: left; font-family: inherit; color: var(--app-fg-2); cursor: pointer;
}
.fz-late__row:hover { background: var(--app-row-hover); }
.fz-late__row b { color: var(--app-fg-1); font-weight: 600; }
.fz-late__row .m { font-family: var(--mx-font-mono); font-weight: 700; color: var(--app-fg-1); }
.fz-late__row .d { font-size: 11px; font-weight: 700; color: var(--fz-bad); white-space: nowrap; }

/* ── estados vacíos ── */
.fz-empty { padding: 34px 20px; text-align: center; }
.fz-empty__t { font-size: 13.5px; color: var(--app-fg-2); margin-bottom: 5px; }
.fz-empty__s { font-size: 12.5px; color: var(--app-fg-4); margin-bottom: 16px; line-height: 1.5; max-width: 460px; margin-left: auto; margin-right: auto; }
.fz-load { padding: 26px 18px; }

/* ── cartera ── */
.fz-kanban { display: grid; grid-template-columns: repeat(4, minmax(210px, 1fr)); gap: 14px; align-items: start; }
.fz-col { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--mx-radius-md); overflow: hidden; transition: .12s; }
.fz-col.sobre { outline: 2px solid var(--mx-orange); outline-offset: -1px; }
.fz-col__head { padding: 12px 14px; border-bottom: 1px solid var(--app-border); background: var(--app-surface-2); box-shadow: inset 0 3px 0 var(--fz-accent, var(--app-fg-4)); }
.fz-col__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.fz-col__name { font-family: var(--mx-font-display); font-weight: 700; font-size: 16.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--app-fg-1); }
.fz-col__n { font-family: var(--mx-font-mono); font-size: 11.5px; font-weight: 700; background: var(--app-tint-3); color: var(--app-fg-2); padding: 3px 9px; border-radius: 20px; }
.fz-col__m { font-family: var(--mx-font-mono); font-size: 12.5px; color: var(--app-fg-3); margin-top: 6px; }
.fz-col__m b { color: var(--app-fg-1); font-size: 14.5px; }
.fz-col__body { padding: 6px; max-height: 520px; overflow-y: auto; }
.fz-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  padding: 8px 10px; border-radius: 7px; cursor: pointer; transition: .1s; text-align: left;
  background: transparent; border: 0; font: inherit; color: inherit;
}
.fz-item:hover { background: var(--app-hover); }
.fz-item:focus-visible { outline: 2px solid var(--mx-orange); outline-offset: -2px; }
.fz-item .nm { font-size: 12.5px; font-weight: 600; color: var(--app-fg-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fz-item .mo { font-family: var(--mx-font-mono); font-size: 12.5px; color: var(--app-fg-2); flex: none; }
.fz-item .mo.zero { color: var(--app-fg-4); }
.fz-add {
  padding: 8px 10px; font-size: 12px; font-weight: 600; color: var(--app-fg-4); cursor: pointer;
  border-radius: 7px; width: 100%; text-align: left; background: transparent; border: 0; font-family: inherit;
  display: flex; align-items: center; gap: 6px;
}
.fz-add:hover { color: var(--mx-orange); background: var(--app-hover); }
.fz-colempty { padding: 14px 10px; font-size: 11.5px; color: var(--app-fg-4); line-height: 1.5; }

/* ── gráfica del histórico ── */
.fz-chart { display: flex; align-items: flex-end; gap: 10px; height: 210px; padding: 20px 18px 0; overflow-x: auto; }
.fz-bar {
  flex: 1 0 44px; display: flex; flex-direction: column; align-items: center; gap: 7px;
  height: 100%; justify-content: flex-end; cursor: pointer; background: transparent;
  border: 0; font: inherit; border-radius: 8px 8px 0 0; transition: .12s;
}
.fz-bar:hover { background: var(--app-hover); }
.fz-bar__v { font-family: var(--mx-font-mono); font-size: 11.5px; font-weight: 700; color: var(--app-fg-1); }
.fz-bar__col { width: 100%; max-width: 54px; border-radius: 5px 5px 0 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.fz-bar__m { font-size: 10.5px; font-weight: 700; color: var(--app-fg-3); text-transform: uppercase; letter-spacing: .05em; padding-bottom: 12px; }
.fz-legend { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.fz-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--app-fg-2); }
.fz-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ── ficha de cliente (cajón) y modal de revisión ──
   Ambos se portalean a <body>: .main lleva zoom 1.18 (1.36 presentando) y
   multiplica las unidades vh de todo lo que cuelga dentro, así que un overlay
   montado ahí se sale de la pantalla por arriba y por abajo. */
.fz-scrim { position: fixed; inset: 0; background: rgba(8,12,18,.55); z-index: 9000; backdrop-filter: blur(2px); }
body[data-theme="light"] .fz-scrim { background: rgba(30,26,22,.38); }
.fz-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 94vw; z-index: 9010;
  background: var(--app-surface); border-left: 1px solid var(--app-border);
  box-shadow: var(--mx-shadow-lift); display: flex; flex-direction: column;
}
.fz-drawer__head { padding: 18px 20px; border-bottom: 1px solid var(--app-border); display: flex; gap: 12px; align-items: flex-start; }
.fz-drawer__head h3 {
  margin: 0; flex: 1; font-family: var(--mx-font-display); font-weight: 700; font-size: 22px;
  letter-spacing: .03em; text-transform: uppercase; line-height: 1.1; color: var(--app-fg-1);
}
.fz-drawer__body { padding: 18px 20px; overflow-y: auto; flex: 1; }
.fz-drawer__foot { padding: 14px 20px; border-top: 1px solid var(--app-border); display: flex; gap: 9px; background: var(--app-surface-2); }
.fz-field { margin-bottom: 15px; }
.fz-field label, .fz-lab {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--app-fg-4); margin-bottom: 6px;
}
.fz-in {
  background: var(--app-surface-2); border: 1px solid var(--app-border); border-radius: 6px;
  padding: 8px 11px; color: var(--app-fg-1); font: inherit; font-size: 13px; width: 100%;
}
.fz-in:focus { outline: 0; border-color: var(--mx-orange); box-shadow: 0 0 0 3px var(--mx-orange-ring); }
.fz-in textarea, textarea.fz-in { min-height: 72px; resize: vertical; }
.fz-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fz-check {
  display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--app-border);
  border-radius: 8px; background: var(--app-surface-2); cursor: pointer; margin-bottom: 15px;
}
.fz-check input { width: 16px; height: 16px; accent-color: var(--mx-orange); margin-top: 1px; flex: none; }
.fz-check b { display: block; font-size: 12.5px; font-weight: 600; color: var(--app-fg-1); }
.fz-check span { font-size: 11px; color: var(--app-fg-3); }

/* Modal con aire arriba y abajo — nunca de borde a borde — y el scroll sólo en
   el cuerpo, con el encabezado y el pie fijos. */
.fz-modal {
  position: fixed; inset: 0; z-index: 9010; display: flex; align-items: center;
  justify-content: center; padding: 56px 20px; pointer-events: none;
}
.fz-modal__card {
  pointer-events: auto; width: min(940px, 100%); max-height: 100%; display: flex; flex-direction: column;
  background: var(--app-surface); border: 1px solid var(--app-border);
  border-radius: var(--mx-radius-lg); box-shadow: var(--mx-shadow-lift); overflow: hidden;
}
.fz-modal__head { display: flex; align-items: flex-start; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--app-border); background: var(--app-surface-2); }
.fz-modal__head h3 {
  margin: 0; font-family: var(--mx-font-display); font-weight: 700; font-size: 21px;
  letter-spacing: .03em; text-transform: uppercase; color: var(--app-fg-1); line-height: 1.15;
}
.fz-modal__head p { margin: 5px 0 0; font-size: 12.5px; color: var(--app-fg-3); line-height: 1.45; }
.fz-modal__body { overflow-y: auto; flex: 1; min-height: 0; }
.fz-modal__foot { padding: 12px 22px; border-top: 1px solid var(--app-border); background: var(--app-surface-2); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ── hallazgos ── */
.fz-grp { padding: 14px 22px 4px; }
.fz-grp__t { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--app-fg-4); margin-bottom: 9px; }
.fz-find {
  display: grid; grid-template-columns: 4px minmax(0,1fr) auto; gap: 13px; align-items: center;
  padding: 11px 22px; border-bottom: 1px solid var(--app-border-soft); width: 100%;
  background: transparent; border-left: 0; border-right: 0; border-top: 0; text-align: left;
  font: inherit; color: inherit; cursor: pointer; transition: .1s;
}
.fz-find:hover { background: var(--app-row-hover); }
.fz-find:disabled { cursor: default; }
.fz-find:disabled:hover { background: transparent; }
.fz-find__sev { width: 4px; height: 30px; border-radius: 3px; background: var(--app-fg-4); }
.fz-find.alta  .fz-find__sev { background: var(--fz-bad); }
.fz-find.media .fz-find__sev { background: var(--fz-warn); }
.fz-find.baja  .fz-find__sev { background: var(--fz-dim-bar); }
.fz-find__t { display: block; font-size: 13px; font-weight: 600; color: var(--app-fg-1); margin-bottom: 3px; }
.fz-find__d { display: block; font-size: 11.8px; color: var(--app-fg-3); line-height: 1.45; }
.fz-find__m { font-family: var(--mx-font-mono); font-size: 13px; font-weight: 700; color: var(--app-fg-1); white-space: nowrap; }
.fz-find__m i { display: block; font-style: normal; font-size: 10px; font-weight: 600; color: var(--app-fg-4); text-align: right; margin-top: 2px; }

/* ── responsive ── */
@media (max-width: 1100px) {
  .fz-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fz-kanban { grid-template-columns: repeat(2, minmax(200px, 1fr)); }
}
@media (max-width: 720px) {
  .fz-kpis, .fz-kpis.k3 { grid-template-columns: 1fr; }
  .fz-kanban { grid-template-columns: 1fr; }
  .fz-monthbar__m { font-size: 16px; min-width: 130px; padding: 0 8px; }
  .fz-search { width: 100%; }
  .fz-modal { padding: 20px 12px; }
  .fz-late__row { grid-template-columns: minmax(0,1fr) auto; }
}
@media print {
  .fz-head, .fz-chips, .fz-search, .fz-alert, .fz-x, .fz-add { display: none !important; }
  .fz-scroll { max-height: none; overflow: visible; }
  .fz-tabla { min-width: 0; font-size: 10px; }
}

/* tokens.css fija color:var(--mx-navy) en h1/h2/h3 — pensado para la landing,
   sobre blanco. En la plataforma en tema oscuro eso es navy sobre navy: el
   título existe pero no se lee. Solo alcanza a los encabezados que hoy heredan
   ese azul; cualquier sección que ya defina su propio color sigue mandando. */
body:not([data-theme="light"]) h1,
body:not([data-theme="light"]) h2,
body:not([data-theme="light"]) h3,
body:not([data-theme="light"]) h4 { color: var(--app-fg-1); }

/* ── Resultados sugeridos (cierre de Ventas 3P) ─────────────────────────
   Cuatro alertas de inventario. La barra bajo cada etiqueta es la TAJADA del
   dinero en juego, no un porcentaje de avance — por eso almacenaje se come dos
   tercios: compara capital detenido contra venta mensual. El rótulo bajo cada
   cifra es lo único que lo desambigua; no lo quites. */
.rs-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 15px; flex-wrap: wrap; }
.rs-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rs-title h3 { font-family: var(--mx-font-display, 'Barlow Condensed', sans-serif); font-size: 20px; text-transform: uppercase; letter-spacing: .03em; margin: 0; font-weight: 600; }
.rs-kai { font-family: var(--mx-font-mono, monospace); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; background: var(--mx-orange-soft, rgba(244,121,32,.14)); color: var(--mx-orange, #F47920); border: 1px solid var(--mx-orange-ring, rgba(244,121,32,.22)); }
.rs-stamp { font-family: var(--mx-font-mono, monospace); font-size: 10.5px; color: var(--app-fg-4); letter-spacing: .04em; }
.rs-acts { display: flex; gap: 8px; }

.rs-box { border: 1px solid var(--app-border-soft); border-radius: 10px; overflow: hidden; }
.rs-row { display: grid; grid-template-columns: 1fr 128px 40px; gap: 20px; align-items: center; padding: 15px 18px; border-bottom: 1px solid var(--app-border-soft); cursor: pointer; transition: background .12s; }
.rs-row:last-child { border-bottom: none; }
.rs-row:hover, .rs-row.open { background: rgba(255, 255, 255, .022); }
.rs-lab { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--app-fg-1); }
.rs-dot { width: 8px; height: 8px; border-radius: 99px; flex: none; }
.rs-cnt { font-size: 11.5px; color: var(--app-fg-4); font-weight: 400; margin-left: 2px; }
.rs-track { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .05); margin-top: 9px; overflow: hidden; }
.rs-fill { height: 100%; border-radius: 3px; transition: width .35s ease; }
.rs-money { text-align: right; font-family: var(--mx-font-mono, monospace); font-size: 13px; color: var(--app-fg-2); font-variant-numeric: tabular-nums; }
.rs-money i { display: block; font-style: normal; font-size: 10px; color: var(--app-fg-4); margin-top: 3px; font-family: inherit; letter-spacing: .05em; text-transform: uppercase; }
.rs-n { font-family: var(--mx-font-display, 'Barlow Condensed', sans-serif); font-size: 24px; font-weight: 600; line-height: 1; text-align: right; }

.rs-open { background: var(--app-surface-2); border-bottom: 1px solid var(--app-border-soft); overflow-x: auto; }
.rs-open table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rs-open th { text-align: left; padding: 9px 18px; color: var(--app-fg-4); font-weight: 600; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid var(--app-border-soft); white-space: nowrap; }
.rs-open th.r, .rs-open td.r { text-align: right; }
.rs-open td { padding: 11px 18px; border-bottom: 1px solid var(--app-border-soft); color: var(--app-fg-2); }
.rs-open tr:last-child td { border-bottom: none; }
.rs-open td b { color: var(--app-fg-1); font-weight: 600; }
.rs-open td.m { font-family: var(--mx-font-mono, monospace); font-variant-numeric: tabular-nums; font-size: 12px; white-space: nowrap; }
.rs-open .rs-sku { font-family: var(--mx-font-mono, monospace); font-size: 10.5px; color: var(--app-fg-4); display: block; margin-top: 2px; }
.rs-open .rs-act { color: var(--app-fg-3); }
/* La nota bajo la acción es una frase, no un código: hereda la tipografía de
   texto y envuelve en vez de estirar la columna. */
.rs-open .rs-act .rs-sku { font-family: inherit; white-space: normal; line-height: 1.35; max-width: 320px; }
.rs-open .rs-act b { color: var(--mx-orange, #F47920); }

.rs-empty { padding: 26px 18px; text-align: center; }
.rs-empty .rs-ok { font-family: var(--mx-font-display, 'Barlow Condensed', sans-serif); font-size: 20px; color: var(--mx-success-fg, #7AD694); text-transform: uppercase; margin-bottom: 5px; font-weight: 600; }
.rs-empty p { margin: 0; font-size: 13px; color: var(--app-fg-4); }

/* Modo Presentar: el mismo bloque a pantalla completa para proyectarlo. */
.rs-present { position: fixed; inset: 0; z-index: 9000; background: var(--app-bg); display: flex; flex-direction: column; padding: 5vh 6vw; overflow: auto; }
.rs-present .rs-row { grid-template-columns: 1fr 200px 70px; padding: 26px 22px; cursor: default; }
.rs-present .rs-lab { font-size: 22px; }
.rs-present .rs-cnt { font-size: 15px; }
.rs-present .rs-money { font-size: 19px; }
.rs-present .rs-money i { font-size: 12px; }
.rs-present .rs-n { font-size: 42px; }
.rs-present .rs-track { height: 8px; margin-top: 14px; }
.rs-present-close { position: absolute; top: 22px; right: 26px; }

@media (max-width: 820px) {
  .rs-row { grid-template-columns: 1fr 84px 30px; gap: 12px; padding: 13px 14px; }
  .rs-n { font-size: 20px; }
  .rs-money { font-size: 11.5px; }
}

/* ═══ Perfil logístico (perfil-logistico.jsx) ═══════════════════════
   El cuestionario de onboarding dentro de Resurtido FBA. Sustituyó al panel
   de campos sueltos: aquí la pregunta y su "para qué sirve" pesan más que el
   input, porque se contesta en junta con el cliente y de eso depende que la
   respuesta sea el último embarque real y no un número de memoria. */
.pl { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 18px; }

.pl-top {
  display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1.4fr) minmax(0,.9fr);
  gap: 18px; align-items: center;
  padding: 15px 18px; background: var(--app-tint-1);
  border: 1px solid var(--app-tint-3); border-radius: 11px;
}
@media (max-width: 1000px) { .pl-top { grid-template-columns: 1fr; gap: 12px; } }
.pl-top__id { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; min-width: 0; }
.pl-top__id strong { font-family: var(--mx-font-display); font-size: 17px; color: var(--app-fg-1); }
.pl-eyebrow {
  font-family: var(--mx-font-display); font-size: 9.5px; font-weight: 700;
  letter-spacing: 1.3px; text-transform: uppercase; color: #F47920;
}
.pl-top__id .fba-src { margin-left: 0; margin-top: 3px; }

.pl-lead { display: flex; align-items: baseline; gap: 7px; }
.pl-lead b {
  font-family: var(--mx-font-mono); font-size: 30px; font-weight: 700;
  line-height: 1; color: #F47920; font-variant-numeric: tabular-nums;
}
.pl-lead span { font-size: 11.5px; color: var(--app-fg-3); }
.pl-legs { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 5px; font-size: 11px; color: var(--app-fg-3); }
.pl-legs b { font-family: var(--mx-font-mono); color: var(--app-fg-2); font-weight: 700; }
.pl-legs .is-accent { color: #F47920; } .pl-legs .is-accent b { color: #F47920; }

.pl-top__prog { display: flex; flex-direction: column; gap: 5px; }
.pl-top__prog span { font-size: 11px; color: var(--app-fg-3); }
.pl-progbar { height: 5px; border-radius: 3px; background: var(--app-tint-3); overflow: hidden; }
.pl-progbar i { display: block; height: 100%; background: #F47920; transition: width .25s ease; }

.pl-scope {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--app-tint-1);
  border: 1px solid var(--app-tint-3); border-radius: 9px;
}
.pl-scope > 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);
}
.pl-hint { flex: 1 1 260px; min-width: 0; font-size: 11px; color: var(--app-fg-3); line-height: 1.45; }
.pl-clear {
  background: transparent; border: 1px solid var(--app-tint-4); border-radius: 6px;
  color: var(--app-fg-3); font-size: 11px; padding: 5px 10px; cursor: pointer;
}
.pl-clear:hover { border-color: rgba(239,68,68,.5); color: #F87171; }

.pl-flags { display: flex; flex-direction: column; gap: 6px; }
.pl-flag {
  padding: 9px 13px; border-radius: 8px; font-size: 11.5px; line-height: 1.5;
  color: var(--app-fg-2); background: rgba(244,121,32,.08);
  border-left: 3px solid rgba(244,121,32,.6);
}
.pl-flag.is-bad { background: rgba(239,68,68,.09); border-left-color: rgba(239,68,68,.7); }

.pl-sec { border: 1px solid var(--app-tint-3); border-radius: 10px; overflow: hidden; background: var(--app-tint-1); }
.pl-sec.is-open { border-color: rgba(244,121,32,.35); }
.pl-sec__head {
  width: 100%; display: grid; grid-template-columns: auto auto 1fr auto auto;
  align-items: center; gap: 12px; padding: 13px 16px; cursor: pointer;
  background: transparent; border: 0; text-align: left; color: inherit;
}
.pl-sec__head:hover { background: var(--app-tint-2); }
.pl-sec.is-open .pl-sec__head { background: rgba(244,121,32,.06); }
.pl-sec__n { font-family: var(--mx-font-mono); font-size: 10.5px; color: #F47920; font-weight: 700; }
.pl-sec__title { font-family: var(--mx-font-display); font-size: 15px; font-weight: 700; color: var(--app-fg-1); }
.pl-sec__intro { font-size: 11.5px; color: var(--app-fg-3); line-height: 1.4; }
@media (max-width: 820px) {
  .pl-sec__head { grid-template-columns: auto 1fr auto auto; }
  .pl-sec__intro { display: none; }
}
.pl-sec__tick { color: #4ADE80; font-size: 13px; }
.pl-sec__chev { font-family: var(--mx-font-mono); font-size: 15px; color: var(--app-fg-3); width: 14px; text-align: center; }

.pl-sec__body { padding: 4px 16px 14px; display: flex; flex-direction: column; }
.pl-q {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(200px,270px);
  gap: 20px; align-items: start; padding: 14px 0;
  border-top: 1px solid var(--app-tint-2);
}
.pl-q.is-wide { grid-template-columns: 1fr; gap: 8px; }
@media (max-width: 780px) { .pl-q { grid-template-columns: 1fr; gap: 8px; } }
.pl-q__ask { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pl-q__ask label {
  font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--app-fg-1);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; cursor: pointer;
}
.pl-help { font-size: 11.5px; color: var(--app-fg-3); line-height: 1.5; max-width: 66ch; }

.pl-chip {
  font-family: var(--mx-font-display); font-size: 9px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase; padding: 2px 6px;
  border-radius: 4px; white-space: nowrap;
}
.pl-chip.is-req { background: rgba(239,68,68,.13); color: #F87171; }
.pl-chip.is-opt { background: var(--app-tint-3); color: var(--app-fg-3); }
.pl-chip.is-new { background: rgba(56,139,190,.16); color: #7FB2DF; }

.pl-q__ans { min-width: 0; }
.pl-inrow { display: flex; align-items: center; gap: 8px; }
.pl-q__ans input, .pl-q__ans select, .pl-q__ans textarea {
  width: 100%; padding: 9px 11px; 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: 13.5px; outline: none;
}
.pl-q__ans textarea { font-size: 12.5px; line-height: 1.5; resize: vertical; }
.pl-q__ans select { font-family: inherit; font-size: 13px; }
.pl-q__ans select option { background: var(--app-surface); color: var(--app-fg-1); }
.pl-q__ans input:focus, .pl-q__ans select:focus, .pl-q__ans textarea:focus { border-color: rgba(244,121,32,.55); }
.pl-unit { font-size: 11px; color: var(--app-fg-3); white-space: nowrap; flex: none; }

.pl-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px,1fr)); gap: 4px; }
.pl-check {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  font-size: 11.5px; font-weight: 600; padding: 6px 4px; cursor: pointer;
  border: 1px solid var(--app-tint-4); border-radius: 6px; color: var(--app-fg-2);
}
.pl-check input { display: none; }
.pl-check:hover { border-color: rgba(244,121,32,.5); }
.pl-check.is-on { background: rgba(244,121,32,.14); border-color: rgba(244,121,32,.55); color: #F9A05C; }

/* Plantilla de caja máster por SKU, dentro de "Empaque y embarque". */
.pl-tpl {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 16px; align-items: center;
  margin-top: 12px; padding: 14px 16px;
  background: var(--app-tint-2); border: 1px solid var(--app-tint-4); border-radius: 9px;
}
@media (max-width: 780px) { .pl-tpl { grid-template-columns: 1fr; } }
.pl-tpl__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pl-tpl__txt strong { font-family: var(--mx-font-display); font-size: 13.5px; color: var(--app-fg-1); }
.pl-tpl__txt span { font-size: 11.5px; color: var(--app-fg-3); line-height: 1.5; max-width: 74ch; }
.pl-tpl__n { color: #4ADE80 !important; font-weight: 600; }
.pl-tpl__acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pl-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: #F47920; color: #14110E; border: 0; border-radius: 7px;
  font-family: var(--mx-font-display); font-size: 12px; font-weight: 700;
  letter-spacing: .3px; padding: 9px 14px; white-space: nowrap;
}
.pl-btn:hover { filter: brightness(1.08); }
.pl-btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.pl-btn.is-ghost { background: transparent; color: #F47920; border: 1px solid rgba(244,121,32,.45); }
.pl-btn.is-ghost:hover { background: rgba(244,121,32,.1); }
.pl-tpl__clear {
  background: transparent; border: 1px solid var(--app-tint-4); border-radius: 6px;
  color: var(--app-fg-3); font-size: 11px; padding: 7px 10px; cursor: pointer;
}
.pl-tpl__clear:hover { border-color: rgba(239,68,68,.5); color: #F87171; }
.pl-tpl__msg {
  grid-column: 1 / -1; margin-top: 2px; padding: 8px 12px; border-radius: 7px;
  font-size: 11.5px; line-height: 1.5; color: var(--app-fg-2);
  background: rgba(34,197,94,.09); border-left: 3px solid rgba(34,197,94,.55);
}
.pl-tpl__msg.is-bad { background: rgba(239,68,68,.09); border-left-color: rgba(239,68,68,.65); }

/* ═══════════════════════════════════════════════════════════════════════════
   CARGA DE FOTOS A AMAZON
   El objeto central es la tira de nueve casillas: es el carrusel tal como va a
   quedar, no una galería de archivos. Por eso cada casilla lleva su número, y
   las que se van a vaciar se pintan en rojo ANTES de mandar nada.
   ═══════════════════════════════════════════════════════════════════════════ */
@keyframes fotosIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fotosPop{from{transform:scale(.55);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes fotosShim{from{transform:translateX(-110%)}to{transform:translateX(110%)}}
@keyframes fotosPulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes fotosModal{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}

.fotos-wrap{padding-bottom:130px}
.fotos-in{animation:fotosIn .32s cubic-bezier(.2,.9,.3,1) both}

.fotos-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.fotos-sel{background:var(--card,#161b22);border:1px solid var(--border,#2a3240);border-radius:10px;
  padding:9px 13px;color:var(--app-fg,#e6edf3);font:inherit;font-size:13px;min-width:210px}
.fotos-sel:focus{outline:none;border-color:#F47920}

.fotos-say{border-left:3px solid #F47920;background:rgba(244,121,32,.08);border-radius:0 9px 9px 0;
  padding:11px 15px;font-size:13px;color:var(--app-fg,#e6edf3);margin-bottom:16px;line-height:1.55}
.fotos-ok{border:1px solid rgba(63,185,80,.5);background:rgba(63,185,80,.1);color:#3fb950;
  border-radius:9px;padding:10px 14px;font-size:12.5px;margin-bottom:14px}

.fotos-search{display:flex;gap:9px;margin-bottom:14px;flex-wrap:wrap}
.fotos-inp{flex:1;max-width:470px;background:#12161d;border:1px solid var(--border,#2a3240);
  border-radius:9px;padding:10px 14px;color:var(--app-fg,#e6edf3);font:inherit;font-size:13px}
.fotos-inp:focus{outline:none;border-color:#F47920}

.fotos-hits{border:1px solid var(--border,#2a3240);border-radius:12px;overflow:hidden;margin-bottom:16px}
.fotos-hit{display:flex;align-items:center;gap:12px;padding:11px 14px;cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.05);transition:background .12s}
.fotos-hit:last-child{border-bottom:0}
.fotos-hit:hover{background:rgba(244,121,32,.07)}
.fotos-hit .th,.fotos-row .th{width:38px;height:38px;border-radius:7px;background:#222a35 center/cover;flex-shrink:0}
.fotos-hit .nm,.fotos-row .nm{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fotos-hit .mt,.fotos-row .mt{color:var(--app-fg-2,#8b95a5);font-size:11px;font-family:ui-monospace,monospace}

.fotos-drop{display:block;border:2px dashed var(--border,#2a3240);border-radius:14px;background:#12161d;
  padding:40px 26px;text-align:center;cursor:pointer;transition:.15s;margin-bottom:16px}
.fotos-drop:hover{border-color:#F47920;background:rgba(244,121,32,.05)}
.fotos-drop.busy{border-color:#d29922;cursor:progress}
.fotos-drop .big{font-size:19px;font-weight:700;margin-bottom:6px}
.fotos-drop .sm{color:var(--app-fg-2,#8b95a5);font-size:12.5px}
.fotos-drop code{background:#1c2330;border:1px solid var(--border,#2a3240);border-radius:4px;
  padding:1px 6px;font-family:ui-monospace,monospace;font-size:11.5px}

.fotos-items{display:flex;flex-direction:column;gap:11px}
.fotos-row{background:var(--card,#161b22);border:1px solid var(--border,#2a3240);border-radius:13px;
  overflow:hidden;animation:fotosIn .32s cubic-bezier(.2,.9,.3,1) both;transition:border-color .15s}
.fotos-row.drag{border-color:#F47920;background:rgba(244,121,32,.05)}
.fotos-row.frenada{border-color:rgba(210,153,34,.6)}
.fotos-row .top{display:flex;align-items:center;gap:12px;padding:12px 15px}
.fotos-row .bd{padding:0 15px 13px}
.fotos-row .foot{border-top:1px solid rgba(255,255,255,.05);padding:11px 15px;display:flex;
  align-items:center;gap:12px;flex-wrap:wrap;background:#12161d}

.fotos-strip{display:flex;gap:6px;flex-wrap:wrap;align-items:flex-start;align-content:flex-start}
.fotos-slot{width:88px;height:112px;flex:0 0 auto;border-radius:9px;border:1px solid var(--border,#2a3240);
  background:#12161d;overflow:hidden;display:flex;flex-direction:column;position:relative;
  animation:fotosIn .3s cubic-bezier(.2,.9,.3,1.2) both;transition:border-color .12s,transform .12s}
.fotos-slot .cap{flex:0 0 auto;font-size:9px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--app-fg-2,#8b95a5);text-align:center;padding:4px 2px;font-weight:700;line-height:1.4;
  border-bottom:1px solid rgba(255,255,255,.05)}
.fotos-slot .ph{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;
  font-size:9.5px;color:#5b6675;overflow:hidden;text-align:center;line-height:1.35;padding:0 4px;
  background-size:cover;background-position:center}
.fotos-slot.new{border-color:#F47920;cursor:grab}
.fotos-slot.new:hover{transform:translateY(-2px)}
.fotos-slot.new:active{cursor:grabbing}
.fotos-slot.new .cap{color:#F47920;border-bottom-color:rgba(244,121,32,.33)}
.fotos-slot.main .cap{background:#F47920;color:#111}
.fotos-slot.kill{border-color:#f85149;background:rgba(248,81,73,.1)}
.fotos-slot.kill .cap{color:#f85149}
.fotos-slot.kill .ph b{color:#f85149;font-size:10px;animation:fotosPulse 2.4s ease-in-out infinite}
.fotos-slot.off{border-style:dashed;opacity:.45}
.fotos-slot .x{position:absolute;top:24px;right:4px;width:17px;height:17px;border-radius:5px;
  background:rgba(13,17,23,.85);color:var(--app-fg-2,#8b95a5);font-size:10px;display:flex;
  align-items:center;justify-content:center;opacity:0;transition:.12s;cursor:pointer}
.fotos-slot:hover .x{opacity:1}
.fotos-slot .x:hover{background:#f85149;color:#fff}

.fotos-prog{display:flex;align-items:center;gap:9px;margin-top:11px;font-size:12px;color:#d29922}
.fotos-prog .pt{width:7px;height:7px;border-radius:99px;background:currentColor;animation:fotosPulse 1s ease-in-out infinite;flex:0 0 auto}
.fotos-prog i{flex:1;max-width:260px;height:4px;border-radius:99px;background:#222a35;overflow:hidden;position:relative}
.fotos-prog i b{display:block;height:100%;background:#d29922;transition:width .25s ease}
.fotos-prog i::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.18) 50%,transparent 80%);
  animation:fotosShim 1.4s linear infinite}

.fotos-legend{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:12px;
  font-size:11.5px;color:var(--app-fg-2,#8b95a5)}
.fotos-add,.fotos-sw{border:1px dashed rgba(244,121,32,.5);color:#F47920;background:rgba(244,121,32,.07);
  border-radius:8px;padding:5px 11px;font-size:11.5px;cursor:pointer;transition:.12s;white-space:nowrap}
.fotos-add:hover,.fotos-sw:hover{background:rgba(244,121,32,.16)}
.fotos-sw{border-color:var(--border,#2a3240);color:var(--app-fg-2,#8b95a5);background:transparent}
.fotos-sw.has{border-color:#3fb950;color:#3fb950;background:rgba(63,185,80,.09)}

.fotos-rej{margin-top:11px;background:rgba(248,81,73,.08);border:1px solid rgba(248,81,73,.35);
  border-radius:9px;padding:10px 13px;font-size:11.5px;color:var(--app-fg-2,#8b95a5)}
.fotos-rej b{color:#f85149;display:block;margin-bottom:5px}
.fotos-rej div{margin-top:4px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fotos-rej code{font-family:ui-monospace,monospace;color:var(--app-fg,#e6edf3);font-size:11px}

.fotos-diff{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.fotos-diff .box{background:var(--card,#161b22);border:1px solid var(--border,#2a3240);border-radius:9px;
  padding:6px 12px;display:flex;align-items:center;gap:9px}
.fotos-diff .box .n{font-size:20px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;
  display:inline-block;animation:fotosPop .38s cubic-bezier(.2,.9,.3,1.5) both}
.fotos-diff .box .l{font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--app-fg-2,#8b95a5);line-height:1.3}
.fotos-diff .arw{color:#5b6675;font-size:15px}
.fotos-diff .box.after{border-color:#F47920} .fotos-diff .box.after .n{color:#F47920}
.fotos-diff .box.gone{border-color:#f85149} .fotos-diff .box.gone .n{color:#f85149}

.fotos-foot{position:sticky;bottom:16px;z-index:60;margin-top:16px;display:flex;align-items:center;
  gap:13px;flex-wrap:wrap;background:var(--card,#161b22);border:1px solid #F47920;border-radius:13px;
  padding:13px 17px;box-shadow:0 12px 34px rgba(0,0,0,.55);
  animation:fotosIn .3s cubic-bezier(.2,.9,.3,1.2) both}
.fotos-mirror{font-size:12.5px;color:var(--app-fg-2,#8b95a5)}
.fotos-mirror b{color:var(--app-fg,#e6edf3)} .fotos-mirror .kill{color:#f85149}

.fotos-env{background:var(--card,#161b22);border:1px solid var(--border,#2a3240);border-radius:13px;
  margin-bottom:11px;overflow:hidden}
.fotos-env.gen{border-color:rgba(210,153,34,.65)}
.fotos-env.bad{border-color:#f85149}
.fotos-env .hd{display:flex;align-items:center;gap:12px;padding:13px 16px;flex-wrap:wrap}
.fotos-env .hd .nm{font-weight:600;font-size:13.5px}
.fotos-env .hd .mt{color:var(--app-fg-2,#8b95a5);font-size:11.5px;font-family:ui-monospace,monospace}
.fotos-env .track{display:flex;padding:0 16px 15px;flex-wrap:wrap}
.fotos-env .tk{flex:1 1 165px;border-top:3px solid #222a35;padding:10px 12px 0;transition:border-color .3s}
.fotos-env .tk .k{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#5b6675;font-weight:700}
.fotos-env .tk .v{font-size:11.5px;color:#5b6675;margin-top:3px;line-height:1.4}
.fotos-env .tk.done{border-top-color:#3fb950}
.fotos-env .tk.done .k{color:#3fb950} .fotos-env .tk.done .v{color:var(--app-fg-2,#8b95a5)}
.fotos-env .tk.now{border-top-color:#d29922}
.fotos-env .tk.now .k{color:#d29922} .fotos-env .tk.now .v{color:var(--app-fg,#e6edf3)}
.fotos-env .tk.now .k::after{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;
  background:#d29922;margin-left:6px;vertical-align:middle;animation:fotosPulse 1.1s infinite}
.fotos-env .tk.fail{border-top-color:#f85149}
.fotos-env .tk.fail .k{color:#f85149} .fotos-env .tk.fail .v{color:var(--app-fg,#e6edf3)}
.fotos-env .det{border-top:1px solid rgba(255,255,255,.05);background:#12161d;padding:11px 16px;
  font-size:12px;color:var(--app-fg-2,#8b95a5)}
.fotos-env .det b{color:var(--app-fg,#e6edf3)}

.fotos-ov{position:fixed;inset:0;background:rgba(0,0,0,.66);z-index:400;display:flex;
  align-items:center;justify-content:center;padding:24px}
.fotos-modal{background:var(--card,#161b22);border:1px solid #F47920;border-radius:15px;max-width:610px;
  width:100%;box-shadow:0 20px 60px rgba(0,0,0,.6);overflow:hidden;
  animation:fotosModal .26s cubic-bezier(.2,.9,.3,1.2) both}
.fotos-modal .mh{padding:16px 20px;border-bottom:1px solid var(--border,#2a3240);display:flex;
  align-items:center;gap:11px}
.fotos-modal .mh h4{margin:0;font-size:17px}
.fotos-modal .mb{padding:18px 20px;display:flex;flex-direction:column;gap:14px;font-size:13px}
.fotos-modal .mf{padding:13px 20px;border-top:1px solid var(--border,#2a3240);display:flex;gap:9px;
  justify-content:flex-end;background:#12161d;flex-wrap:wrap}
.fotos-modal .what{display:flex;flex-direction:column;gap:10px}
.fotos-modal .what > div{display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.fotos-modal .ic{width:19px;height:19px;border-radius:5px;flex-shrink:0;display:flex;
  align-items:center;justify-content:center;font-size:11px;font-weight:800;margin-top:1px}
.fotos-modal .ic.add{background:#F47920;color:#111}
.fotos-modal .ic.del{background:#f85149;color:#fff}
.fotos-modal .ic.keep{background:#222a35;color:var(--app-fg-2,#8b95a5)}

@media (prefers-reduced-motion:reduce){
  .fotos-in,.fotos-row,.fotos-slot,.fotos-foot,.fotos-modal,.fotos-diff .box .n{animation:none}
  .fotos-prog i::after,.fotos-slot.kill .ph b,.fotos-env .tk.now .k::after{animation:none}
}

/* ── Top productos: tráfico, conversión y panel de 8 semanas (ago-2026) ──
   Dos columnas nuevas no cabían: el título bajó a UN renglón con los ids en
   línea, y precio + TACOS se fusionaron en una celda. Eso libera ~140px, que
   es justo lo que piden tráfico y conversión. */
.sku-tbl td.sku-prod-cell { min-width: 300px; }
.sku-tbl .sku-title--tight { font-size: 13px; line-height: 1.3; font-weight: 600; margin-bottom: 2px; }
.sku-ids--inline { display: flex; align-items: center; gap: 6px; margin-top: 3px; flex-wrap: nowrap; overflow: hidden; }
/* Parent / SKU apilados: renglones más altos para que el ASIN y el SKU quepan enteros. */
.sku-ids-stack { display: flex; flex-direction: column; gap: 1px; }
.sku-ids-stack .sku-ids--inline { margin-top: 2px; }
.sku-ids-stack .sku-id-code { font-size: 11.5px; }
.sku-tbl .sku-row > td { padding-top: 18px; padding-bottom: 18px; }
.sku-ids__sep { color: var(--app-tint-4); font-size: 10px; flex: none; }
.fam-chip {
  flex: none; font-family: var(--mx-font-mono); font-size: 9.5px; font-weight: 700;
  padding: 2px 6px; border-radius: 4px; background: rgba(139,123,214,.16); color: #b3a7ea;
  white-space: nowrap;
}
/* "sin dato" ≠ cero. Una marca recién conectada a DataDoe no tiene historia de
   tráfico, y un 0% ahí se lee como que el producto no convierte. */
.cell-nodata { font-family: var(--mx-font-mono); font-size: 12px; color: var(--app-fg-4); }

.trf-cell { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.trf-main { font-family: var(--mx-font-mono); font-weight: 700; font-size: 13px; color: var(--app-fg-1); }
.trf-sub  { font-family: var(--mx-font-mono); font-size: 10.5px; color: var(--app-fg-4); white-space: nowrap; }
.trf-delta { font-family: var(--mx-font-mono); font-size: 10px; font-weight: 700; }
.trf-delta.up { color: #4ade80; } .trf-delta.down { color: #f87171; }

.cv-cell { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; min-width: 74px; }
.cv-main { font-family: var(--mx-font-mono); font-weight: 700; font-size: 13px; }
.cv-bar { position: relative; width: 62px; height: 5px; border-radius: 3px; background: var(--app-tint-3); }
.cv-bar__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; }
.cv-bar__avg { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--app-fg-3); border-radius: 1px; }
.cv-sub { font-family: var(--mx-font-mono); font-size: 10px; color: var(--app-fg-4); white-space: nowrap; }

.pt-main { font-family: var(--mx-font-mono); font-weight: 700; font-size: 13px; color: var(--app-fg-1); }
.pt-sub  { font-family: var(--mx-font-mono); font-size: 10.5px; margin-top: 2px; }

.wow-with-chart { display: flex; align-items: center; gap: 8px; justify-content: center; }
.row-chart-btn {
  flex: none; background: transparent; border: 1px solid var(--app-tint-4); border-radius: 6px;
  width: 24px; height: 24px; cursor: pointer; color: var(--app-fg-4); padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.row-chart-btn:hover { color: var(--mx-orange); border-color: rgba(244,121,32,.5); }
.row-chart-btn.on { color: var(--mx-orange); border-color: rgba(244,121,32,.6); background: rgba(244,121,32,.12); }

/* ── Panel de 8 semanas ──
   Cada serie vive en SU cuadro. Apilar dinero, sesiones y porcentaje en una
   sola gráfica obliga a ejes dobles y se vuelve ilegible; separados comparten
   la rejilla de semanas, así que la misma semana cae en la misma columna. */
.skuwk-row > td { padding: 0 !important; background: var(--app-surface-2); }
.skuwk { padding: 16px 18px 14px; border-top: 1px solid var(--app-tint-3); border-bottom: 1px solid var(--app-tint-3); }
.skuwk__top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 11px; }
.skuwk__top h4 {
  margin: 0; font-family: var(--mx-font-display); font-size: 14px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--app-fg-2);
}
.skuwk__top span { font-family: var(--mx-font-mono); font-size: 10.5px; color: var(--app-fg-4); }
.skuwk__hint { margin-left: auto; }

/* Las tarjetas son a la vez KPI, leyenda e interruptor de la serie. */
.skuwk__switches { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.skuwk__sw {
  flex: 1 1 160px; min-width: 158px; text-align: left; cursor: pointer; font-family: inherit;
  background: var(--app-tint-1); border: 1px solid var(--app-tint-3); border-radius: 9px;
  padding: 9px 12px; transition: background .12s, border-color .12s;
}
.skuwk__sw:hover { border-color: var(--app-tint-4); }
.skuwk__sw-state {
  float: right; font-family: var(--mx-font-mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: .1em; color: var(--app-fg-4); border: 1px solid var(--app-tint-4);
  border-radius: 4px; padding: 1px 5px;
}
.skuwk__sw.on .skuwk__sw-state { color: #fff; }
.skuwk__sw-l {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mx-font-mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--app-fg-4);
}
.skuwk__sw-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; border: 2px solid currentColor; background: transparent; }
.skuwk__sw-v { display: block; font-family: var(--mx-font-mono); font-size: 18px; font-weight: 700; color: var(--app-fg-3); margin-top: 4px; }
.skuwk__sw.on .skuwk__sw-v { color: var(--app-fg-1); }
.skuwk__sw-d { display: block; font-family: var(--mx-font-mono); font-size: 10.5px; font-weight: 700; margin-top: 1px; color: var(--app-fg-4); }
.skuwk__sw.on .skuwk__sw-d.up { color: #4ade80; }
.skuwk__sw.on .skuwk__sw-d.down { color: #f87171; }

/* El stack acota el ancho para que el tooltip, posicionado en % del viewBox,
   caiga exactamente sobre su semana en cualquier pantalla. */
.skuwk__stack { position: relative; max-width: 980px; margin: 0 auto; }
.skuwk__pane { background: var(--app-tint-1); border: 1px solid var(--app-tint-3); border-radius: 10px; padding: 10px 6px 4px; }
.skuwk__pane + .skuwk__pane { margin-top: 12px; }
.skuwk__head { display: flex; align-items: center; gap: 8px; padding: 0 10px 8px; }
.skuwk__head i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.skuwk__head b { font-family: var(--mx-font-mono); font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.skuwk__head u { text-decoration: none; margin-left: auto; font-family: var(--mx-font-mono); font-size: 10px; color: var(--app-fg-4); }
.skuwk__plot { position: relative; }
.skuwk__plot svg { display: block; width: 100%; height: auto; }

.skuwk__tip {
  position: absolute; top: 8px; z-index: 5; pointer-events: none;
  background: #0B1520; border: 1px solid var(--app-tint-4); border-radius: 8px;
  padding: 8px 10px; box-shadow: 0 10px 30px rgba(0,0,0,.5); min-width: 158px;
}
.skuwk__tip-w { font-family: var(--mx-font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--app-fg-4); margin-bottom: 6px; white-space: nowrap; }
.skuwk__tip-r { display: flex; align-items: baseline; gap: 7px; font-family: var(--mx-font-mono); font-size: 11.5px; margin-top: 3px; white-space: nowrap; }
.skuwk__tip-r i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.skuwk__tip-r b { color: var(--app-fg-1); font-weight: 700; margin-left: auto; }
.skuwk__tip-r em { font-style: normal; font-size: 10px; font-weight: 700; }
.skuwk__tip-r em.up { color: #4ade80; } .skuwk__tip-r em.down { color: #f87171; } .skuwk__tip-r em.flat { color: var(--app-fg-4); }
.skuwk__gap { font-family: var(--mx-font-mono); font-size: 10.5px; color: #fbbf24; margin-top: 10px; }

/* Cargas a Amazon — detalle comparativo */
.fotos-envhd{cursor:pointer;user-select:none}
.fotos-envhd:hover{background:rgba(255,255,255,.02)}
.fotos-chev{display:inline-block;color:var(--app-fg-2,#8b95a5);font-size:11px;
  transition:transform .18s ease;flex:0 0 auto}
.fotos-chev.on{transform:rotate(90deg);color:#F47920}
.fotos-marca{margin-left:9px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--app-fg-2,#8b95a5);border:1px solid var(--border,#2a3240);border-radius:6px;
  padding:1px 7px;font-weight:700;vertical-align:middle;white-space:nowrap}
.fotos-detalle{border-top:1px solid rgba(255,255,255,.06);background:#0f1319;
  padding:15px 17px;display:flex;flex-direction:column;gap:16px;
  animation:fotosIn .26s cubic-bezier(.2,.9,.3,1) both}
.fotos-prod{display:flex;flex-direction:column;gap:11px;border:1px solid var(--border,#2a3240);
  border-radius:11px;padding:13px 15px;background:var(--card,#161b22)}
.fotos-prod .ph{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.fotos-prod .ph b{font-size:13px;max-width:62ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fotos-prod .ph .mt{font-family:ui-monospace,monospace;font-size:11px;color:var(--app-fg-2,#8b95a5)}
.fotos-tira{display:flex;flex-direction:column;gap:7px}
.fotos-tira .tt{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  color:var(--app-fg-2,#8b95a5);display:flex;align-items:center;gap:8px}
.fotos-tira .tt .n{background:rgba(255,255,255,.07);border-radius:99px;padding:0 7px;font-size:10px}
.fotos-tira.destaca .tt{color:#3fb950}
.fotos-tira.destaca .tt .n{background:rgba(63,185,80,.16);color:#3fb950}
.fotos-tira.destaca .fotos-slot{border-color:rgba(63,185,80,.5)}
.fotos-tira.destaca .fotos-slot .cap{color:#3fb950;border-bottom-color:rgba(63,185,80,.28)}
.fotos-tira.tenue{opacity:.62}
.fotos-tira.tenue .fotos-slot{border-color:var(--border,#2a3240)}
.fotos-tira.tenue .fotos-slot .cap{color:var(--app-fg-2,#8b95a5);border-bottom-color:rgba(255,255,255,.05)}
.fotos-tira .fotos-slot{width:70px;height:90px;text-decoration:none;cursor:zoom-in}
.fotos-tira .fotos-slot:hover{transform:translateY(-2px)}
.fotos-veredicto{font-size:12px;border-radius:8px;padding:8px 12px;margin-top:2px}
.fotos-veredicto.ok{background:rgba(63,185,80,.1);border:1px solid rgba(63,185,80,.4);color:#3fb950}
.fotos-veredicto.mal{background:rgba(210,153,34,.12);border:1px solid rgba(210,153,34,.45);color:#d29922}

/* Captura de medidas — bloquea la generación hasta tenerlas */
.ctn-medidas{border:1px solid rgba(210,153,34,.55);background:rgba(210,153,34,.09);
  border-radius:12px;padding:14px 16px;margin-bottom:12px;display:flex;flex-direction:column;gap:12px}
.ctn-medidas .hd{display:flex;gap:11px;align-items:flex-start}
.ctn-medidas .hd b{display:block;font-size:13px;margin-bottom:3px;color:#d29922}
.ctn-medidas .hd .ctn-dim{font-size:11.5px;line-height:1.5;display:block}
.ctn-medidas .campos{display:flex;gap:9px;flex-wrap:wrap}
.ctn-medidas label{display:flex;flex-direction:column;gap:4px;flex:1 1 92px;min-width:92px}
.ctn-medidas label span{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--app-fg-2,#8b95a5);font-weight:700}
.ctn-medidas label span i{opacity:.6;font-style:normal}
.ctn-medidas input{background:#12161d;border:1px solid var(--border,#2a3240);border-radius:8px;
  padding:8px 10px;color:var(--app-fg,#e6edf3);font:inherit;font-size:13px;width:100%}
.ctn-medidas input:focus{outline:none;border-color:#d29922}
.ctn-medidas .pie{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:11.5px}

/* Re-auditar: la galería de abajo es del plan ANTERIOR, así que se atenúa y
   se dice en voz alta qué está pasando. Ningún botón mudo. */
.ctn-replan{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;
  border:1px solid rgba(244,121,32,.5);background:rgba(244,121,32,.09);border-radius:12px;
  padding:13px 16px;margin-bottom:14px;animation:fotosIn .3s cubic-bezier(.2,.9,.3,1) both}
.ctn-replan b{display:block;font-size:13px;color:#F47920;margin-bottom:3px}
.ctn-replan .ctn-dim{font-size:11.5px;line-height:1.5;display:block;max-width:74ch}
.ctn-replan-pt{display:inline-flex;gap:4px;align-items:center;padding-top:4px;flex:0 0 auto}
.ctn-replan-pt i{width:7px;height:7px;border-radius:99px;background:#F47920;display:block;
  animation:ctnrep 1.05s ease-in-out infinite}
.ctn-replan-pt i:nth-child(2){animation-delay:.16s}
.ctn-replan-pt i:nth-child(3){animation-delay:.32s}
@keyframes ctnrep{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.ctn-replanning{opacity:.32;filter:saturate(.35);pointer-events:none;
  transition:opacity .3s ease,filter .3s ease}
@media (prefers-reduced-motion:reduce){
  .ctn-replan-pt i{animation:none;opacity:.8}
  .ctn-replan{animation:none}
}

/* ── Contenido · historial de versiones por marca ── */
.ctn-histprod{border-top:1px solid var(--app-border,#30363d)}
.ctn-histprod:first-of-type{border-top:none}
.ctn-histhd{display:flex;align-items:center;gap:12px;padding:10px 2px;cursor:pointer}
.ctn-histhd:hover{background:rgba(255,255,255,.02)}
.ctn-histhd>img{width:46px;height:46px;object-fit:cover;border-radius:8px;background:#0d1117;flex:0 0 auto}
.ctn-histbody{padding:4px 2px 14px 58px;display:flex;flex-direction:column;gap:14px}
.ctn-histtira{display:flex;gap:8px;flex-wrap:wrap}
.ctn-histpz{position:relative;display:block;width:92px;text-decoration:none}
.ctn-histpz img{width:92px;height:92px;object-fit:cover;border-radius:8px;border:1px solid var(--app-border,#30363d);background:#0d1117;opacity:.62;transition:opacity .15s}
.ctn-histpz:hover img{opacity:1}
.ctn-histpz.viva img{opacity:1;border-color:#F47920}
.ctn-histpz>span{display:block;font-size:10px;color:var(--app-fg-3,#8b95a5);margin-top:3px;text-align:center}
.ctn-histviva.alt{background:var(--app-surface-2,#1c2330);color:var(--app-fg-3,#8b95a5)}
.ctn-histviva{position:absolute;top:4px;left:4px;font-style:normal;font-size:9px;font-weight:700;letter-spacing:.04em;
  background:#F47920;color:#0d1117;border-radius:5px;padding:1px 5px}

.ctn-histdev{font-size:10px;font-weight:700;letter-spacing:.02em;border-radius:5px;padding:2px 7px;white-space:nowrap}
.ctn-histdev.desk{background:#F4792022;color:#F47920}
.ctn-histdev.mov{background:#60a5fa22;color:#60a5fa}
.ctn-visor{width:min(94vw,1280px);max-height:92vh;display:flex;flex-direction:column;gap:10px}
.ctn-visor-hd,.ctn-visor-ft{display:flex;align-items:center;gap:10px;color:var(--app-fg,#e6edf3);font-size:12.5px}
.ctn-visor-ft{font-size:11px}
.ctn-visor-img{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  background:#0d1117;border:1px solid var(--app-border,#30363d);border-radius:12px;overflow:hidden}
.ctn-visor-img img{max-width:100%;max-height:76vh;object-fit:contain;display:block}

.ctn-candwrap{position:relative;display:inline-block;line-height:0}
.ctn-candmotor{position:absolute;left:4px;bottom:4px;font-style:normal;font-size:9px;font-weight:700;letter-spacing:.03em;
  background:rgba(96,165,250,.92);color:#0d1117;border-radius:5px;padding:1px 5px}
.ctn-candmotor.gpt{background:rgba(16,185,129,.92)}

.ctn-lineasel{display:inline-flex;align-items:center;gap:6px;margin-left:12px;font-size:12px;color:var(--app-fg-3,#8b95a5)}
.ctn-lineasel select{background:var(--app-surface-2,#1c2330);color:var(--app-fg,#e6edf3);border:1px solid var(--app-border,#30363d);
  border-radius:8px;padding:3px 8px;font-size:12px;cursor:pointer}
.ctn-lineasel i{font-style:normal;font-size:9.5px;font-weight:700;background:#F4792022;color:#F47920;border-radius:5px;padding:1px 6px}
/* "Sin Brand Kit" no es un estilo más: se lee de un vistazo que la marca está
   apagada, si no el operador cree que generó con kit y no fue así. */
.ctn-lineasel.off select{border-color:#8b95a5;color:var(--app-fg-3,#8b95a5)}
.ctn-lineasel.falta select{border-color:#F47920;box-shadow:0 0 0 2px #F4792033}
.ctn-lineasel i.req{background:#F47920;color:#fff}
.ctn-kitpick-row{display:flex;align-items:center;gap:10px;padding:7px 10px;border-bottom:1px solid var(--app-tint-2,#30363d)}
.ctn-kitpick-row:last-child{border-bottom:0}
.ctn-kitpick-row.falta{background:#F4792014}
.ctn-kitpick-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}
.ctn-kitpick-row select{max-width:250px;flex:none}
/* A+: para quién es el documento (familia / sólo este producto). */
.ctn-apalc{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;text-align:left}
.ctn-apalc-o{border:1px solid var(--border,#2a3240);border-radius:12px;padding:14px 15px;cursor:pointer;background:var(--app-surface-2,#0d1117)}
.ctn-apalc-o:hover{border-color:#F47920;background:rgba(244,121,32,.07)}
.ctn-apalc-o b{display:block;font-size:13.5px;margin-bottom:5px;color:var(--text,#e6edf3)}
.ctn-apalc-o span{display:block;font-size:12px;line-height:1.5;color:var(--app-fg-2,#8b95a5)}
@media (max-width:760px){.ctn-apalc{grid-template-columns:1fr}}
.ctn-lineasel.off i{background:#8b95a522;color:#c2cad6}
/* Recuperación de la papelera: ámbar, no rojo — no es un error en curso, es
   trabajo pagado esperando a que lo regreses. */
.ctn-papstrip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px;padding:8px 12px;
  border:1px solid #f0883e55;background:#f0883e14;border-radius:8px;font-size:12px;color:var(--app-fg-2,#c2cad6)}
.ctn-papstrip svg{color:#f0883e;flex:none}

.ctn-kitlineas{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:10px 0 6px;border-bottom:1px solid var(--app-border,#30363d);margin-bottom:10px}
.ctn-kitlinea{font-size:12px;padding:5px 11px;border-radius:8px;cursor:pointer;border:1px solid var(--app-border,#30363d);color:var(--app-fg-3,#8b95a5)}
.ctn-kitlinea:hover{color:var(--app-fg,#e6edf3)}
.ctn-kitlinea.on{border-color:#F47920;background:rgba(244,121,32,.1);color:#F47920;font-weight:700}
.ctn-kitlinea.add{border-style:dashed}
.ctn-kitlinea.del{border-color:rgba(248,81,73,.4);color:#f85149;margin-left:auto}

.ctn-chev.clic{cursor:pointer;padding:2px 5px;margin:-2px -1px;border-radius:6px}
.ctn-chev.clic:hover{background:rgba(244,121,32,.16);color:#F47920}
/* Estrella de favorito en el tablero de Contenido: fija la familia o la
   variación arriba de la tabla. Vive en el perfil del usuario. */
.ctn-fav{width:18px;height:18px;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;color:rgba(255,255,255,.28);transition:color .12s,background .12s}
.ctn-fav:hover{background:rgba(244,121,32,.16);color:#F47920}
.ctn-fav.on{color:#F47920}
.ctn-fav.on svg{fill:#F47920}
.ctn-hid .ctn-fav{margin-right:2px}

/* ── 3P · "Actualizar productos" (feed re-query) ─────────────────── */
@keyframes spinIc { to { transform: rotate(360deg); } }
.spin-ic { animation: spinIc .9s linear infinite; }
.btn.is-busy { opacity: .75; cursor: progress; }
.sku-refresh-note { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 11px; color: var(--ok, #22c55e); margin: -6px 0 8px; }
.sku-refresh-note.is-error { color: var(--danger, #ef4444); }

/* ═══════════════════════ CRM (views-crm.jsx) ═══════════════════════ */
.crm-tabs{display:flex;gap:4px;border-bottom:1px solid var(--app-tint-4);margin-bottom:14px}
.crm-tabs button{background:none;border:none;border-bottom:2px solid transparent;padding:10px 14px;font-size:13px;font-weight:700;color:var(--app-fg-3);cursor:pointer;display:inline-flex;gap:7px;align-items:center;margin-bottom:-1px}
.crm-tabs button.on{color:var(--app-fg-1);border-bottom-color:var(--mx-orange)}
.crm-tabs.crm-top{margin-bottom:16px}
.crm-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:8px;font-size:9.5px;font-weight:800;letter-spacing:.3px;white-space:nowrap;background:var(--app-tint-3);color:var(--app-fg-3)}
.crm-dim{color:var(--app-fg-4);font-size:11px}
.crm-mono{font-family:var(--mx-font-mono);font-size:11.5px;color:var(--app-fg-2)}
.crm-late{color:#dc2626 !important}
[data-theme="dark"] .crm-late{color:#f87171 !important}
.crm-btn{border:1px solid var(--app-tint-4);background:var(--app-tint-1);color:var(--app-fg-2);border-radius:7px;padding:5px 10px;font-size:11.5px;font-weight:600;cursor:pointer;display:inline-flex;gap:5px;align-items:center;white-space:nowrap}
.crm-btn:hover{border-color:var(--app-tint-6)}
.crm-btn:disabled{opacity:.5;cursor:default}
.crm-btn.pri{background:var(--mx-orange);border-color:var(--mx-orange);color:#fff}
.crm-btn.no{border-color:rgba(239,68,68,.45);color:#dc2626}
[data-theme="dark"] .crm-btn.no{color:#fca5a5}
.crm-new{padding:8px 14px;font-size:12.5px;align-self:center}
.crm-kpis{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.crm-kpi{padding:9px 14px;min-width:120px}
.crm-kpi .l{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:var(--app-fg-4)}
.crm-kpi .v{font-size:21px;font-weight:800;font-family:var(--mx-font-display);line-height:1.15;color:var(--app-fg-1)}
.crm-kpi .v small{font-size:11px;font-weight:700;color:var(--app-fg-4);margin-left:4px}
.crm-hoy{padding:0;margin-bottom:6px}
.crm-h{display:flex;align-items:center;gap:10px;padding:12px 16px 10px}
.crm-fox{width:32px;height:32px;border-radius:999px;background:rgba(244,121,32,.16);display:flex;align-items:center;justify-content:center;color:var(--mx-orange);flex:none}
.crm-mode{font-size:10px;text-transform:uppercase;letter-spacing:1.4px;color:var(--mx-orange);font-weight:800}
.crm-sub{font-size:12.5px;color:var(--app-fg-2);margin-top:2px}
.crm-sug{display:flex;gap:12px;padding:11px 16px;border-top:1px solid var(--app-tint-3);align-items:flex-start}
.crm-sug .n{font-family:var(--mx-font-display);font-size:22px;font-weight:800;color:var(--app-tint-6);width:22px;line-height:1;flex:none}
.crm-sug .t{font-weight:700;font-size:13px;color:var(--app-fg-1)}
.crm-sug .w{font-size:12px;color:var(--app-fg-3);margin-top:3px;line-height:1.45}
.crm-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.crm-more{padding:8px 16px 12px;border-top:1px solid var(--app-tint-3)}
.crm-sec{display:flex;align-items:center;gap:10px;margin:22px 0 10px}
.crm-sec h3{margin:0;font-size:16px;font-family:var(--mx-font-display);letter-spacing:.6px;text-transform:uppercase;color:var(--app-fg-1)}
.crm-sec::after{content:'';flex:1;height:1px;background:var(--app-tint-4)}
.crm-board{display:grid;grid-template-columns:repeat(5,minmax(152px,1fr));gap:9px;align-items:start;overflow-x:auto;padding-bottom:6px}
.crm-col{background:var(--app-tint-1);border:1px solid var(--app-tint-3);border-radius:12px;padding:0 0 8px;min-height:160px;transition:border-color .12s,background .12s}
.crm-col.over{border-color:var(--mx-orange);background:rgba(244,121,32,.07)}
.crm-col .hd{padding:9px 11px 7px;border-bottom:1px solid var(--app-tint-3);position:sticky;top:0;background:var(--app-tint-1);border-radius:12px 12px 0 0;z-index:3}
.crm-col .bd{max-height:calc(100vh - 300px);overflow-y:auto;overscroll-behavior:contain}
.crm-col .hd .nm{display:flex;gap:6px;align-items:center;font-weight:800;font-size:12px;color:var(--app-fg-1);text-transform:uppercase;letter-spacing:.6px;font-family:var(--mx-font-display)}
.crm-col .hd .sum{font-family:var(--mx-font-mono);font-size:11px;color:var(--app-fg-3);margin-top:3px}
.crm-drop{padding:14px 10px;font-size:11px;color:var(--app-fg-4);text-align:center}
.crm-col-won{border-style:dashed;min-height:120px}
.crm-col-won .crm-drop{line-height:1.5}
.crm-card{margin:6px 7px 0;padding:7px 9px;border-radius:8px;background:var(--app-surface);border:1px solid var(--app-tint-3);border-left-width:3px;font-size:12px;cursor:grab;user-select:none}
.crm-card.tmp-red{border-left-color:#ef4444}.crm-card.tmp-amb{border-left-color:#f59e0b}.crm-card.tmp-grn{border-left-color:#22c55e}
.crm-card:hover{border-color:var(--mx-orange)}
.crm-card .t{font-weight:700;color:var(--app-fg-1);font-size:12.5px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-card .c{font-size:11px;color:var(--app-fg-4);margin-top:2px}
.crm-card .r{display:flex;gap:6px;align-items:center;margin-top:4px;font-size:10.5px}
.crm-card .r .sp{flex:1}
.crm-up{color:var(--mx-orange);font-weight:800;margin-right:4px}
.crm-warm{color:#fbbf24}
.crm-card .nx{font-size:10.5px;color:var(--app-fg-3);margin-top:4px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.crm-card .crm-auto{margin-left:6px;padding:0 5px;border-radius:5px;font-size:9px;font-weight:800;letter-spacing:.3px;vertical-align:1px;background:var(--app-tint-3);color:var(--app-fg-3);text-transform:uppercase}
.crm-card .t .crm-pelota{margin-left:6px;vertical-align:1px}
.crm-pelota{padding:1px 6px;border-radius:6px;font-size:9.5px;font-weight:700;background:var(--app-tint-3);color:var(--app-fg-3);white-space:nowrap}
.crm-pelota.nos{background:rgba(239,68,68,.14);color:#ef4444}
.crm-card .kc{margin-top:7px;font-size:11px;font-weight:600;color:var(--mx-orange);display:flex;gap:5px;align-items:flex-start;line-height:1.3}
/* Modo lista: una línea por marca. El detalle ya vive en la ficha. */
.crm-board.mini .crm-card{padding:5px 9px}
.crm-board.mini .crm-card .r,.crm-board.mini .crm-card .nx{display:none}
.crm-board.mini .crm-col .bd{max-height:calc(100vh - 260px)}
.crm-boardbar{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:11.5px}
.crm-fo{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.4fr) 100px auto;gap:12px;align-items:center;padding:9px 16px;border-top:1px solid var(--app-tint-3);font-size:12.5px;color:var(--app-fg-1)}
.crm-fo-head{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--app-fg-4);font-weight:700;border-top:none}
.crm-link{font-weight:700;cursor:pointer}
.crm-link:hover{color:var(--mx-orange)}
.crm-empty{padding:26px;text-align:center;color:var(--app-fg-3);font-size:13px}
.crm-drawer-bg{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1200;display:flex;justify-content:flex-end}
.crm-drawer{width:480px;max-width:94vw;height:100%;overflow:auto;background:var(--app-surface);border-left:1px solid var(--app-tint-4);color:var(--app-fg-1)}
.crm-fx-top{padding:16px 18px 12px;border-bottom:1px solid var(--app-tint-3)}
.crm-fx-top h2{margin:0;font-family:var(--mx-font-display);font-size:24px;letter-spacing:.3px;color:var(--app-fg-1)}
.crm-stages{display:flex;gap:4px;flex-wrap:wrap;margin-top:10px}
.crm-stages button{border:1px solid var(--app-tint-4);background:var(--app-tint-1);color:var(--app-fg-3);border-radius:999px;padding:4px 10px;font-size:11px;font-weight:700;cursor:pointer}
.crm-stages button.on{background:var(--mx-orange);border-color:var(--mx-orange);color:#fff}
.crm-stages button.won.on{background:#16a34a;border-color:#16a34a}
.crm-fuera-box{margin-top:10px;font-size:12px;color:var(--app-fg-2);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.crm-kai{margin:12px 18px 0;padding:10px 12px;border-radius:10px;background:rgba(244,121,32,.07);border-left:3px solid var(--mx-orange);font-size:12px;color:var(--app-fg-2);line-height:1.5}
.crm-kai b{color:var(--mx-orange)}
.crm-form{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;padding:14px 18px;border-bottom:1px solid var(--app-tint-3)}
.crm-form label{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:700;color:var(--app-fg-3)}
.crm-form label.full,.crm-form .full{grid-column:1/-1}
.crm-form label.chk{flex-direction:row;align-items:center;gap:7px;grid-column:1/-1;font-weight:600}
.crm-form input,.crm-form select,.crm-input,.crm-add input{border:1px solid var(--app-tint-4);background:var(--app-tint-1);color:var(--app-fg-1);border-radius:7px;padding:7px 9px;font-size:12.5px;font-family:inherit;min-width:0}
.crm-input{width:100%;box-sizing:border-box}
.crm-blk{padding:6px 18px 12px;border-bottom:1px solid var(--app-tint-3)}
.crm-blk h4{margin:10px 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:1.1px;color:var(--app-fg-4)}
.crm-add{display:flex;gap:6px;margin-bottom:8px}
.crm-add input{flex:1}
.crm-ev{display:flex;gap:10px;padding:7px 0;border-top:1px solid var(--app-tint-3);font-size:12px}
.crm-ev .d{font-size:11px;color:var(--app-fg-4);width:52px;flex:none;padding-top:1px}
.crm-ev .who{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:#2563eb}
[data-theme="dark"] .crm-ev .who{color:#93c5fd}
.crm-ev .tx{color:var(--app-fg-2);line-height:1.45}
.crm-foot{display:flex;gap:8px;padding:14px 18px 22px}
.crm-md-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1210;display:flex;align-items:center;justify-content:center;padding:20px}
.crm-md{width:560px;max-width:100%;max-height:calc(100vh - 60px);overflow:auto;background:var(--app-surface);border:1px solid var(--app-tint-4);border-radius:14px;box-shadow:var(--app-shadow);color:var(--app-fg-1)}
.crm-md .mh{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--app-tint-3)}
.crm-md .mh h3{margin:0;flex:1;font-size:16px;font-family:var(--mx-font-display);letter-spacing:.4px;color:var(--app-fg-1);text-transform:uppercase}
.crm-md .mf{display:flex;gap:8px;justify-content:flex-end;padding:12px 18px;border-top:1px solid var(--app-tint-3)}
.crm-md .crm-form{border-bottom:none}
.crm-rad{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 12px}
.crm-rad button{border:1px solid var(--app-tint-4);background:var(--app-tint-1);color:var(--app-fg-2);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer}
.crm-rad button.on{background:rgba(244,121,32,.14);border-color:var(--mx-orange);color:var(--app-fg-1)}
.crm-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:1300;background:var(--app-fg-1);color:var(--app-bg);padding:9px 16px;border-radius:10px;font-size:12.5px;font-weight:600;box-shadow:var(--app-shadow)}
@media (max-width:720px){.crm-form{grid-template-columns:1fr}.crm-fo{grid-template-columns:1fr 1fr}}
.crm-card .kc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ── Cerebro de KAI: pulgares bajo cada respuesta + cola de lecciones ── */
.kai-voto { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.kai-msg__export .kai-voto button { padding: 3px 7px; }
.kai-msg__export .kai-voto button.is-on { color: #fbbf85; border-color: rgba(244,121,32,.45); }
.kai-voto--done { font-size: 10.5px; font-weight: 600; color: var(--mx-text-dim, #9CA3AF); gap: 5px; }
.kai-voto__form { display: flex; gap: 6px; flex: 1 1 260px; min-width: 0; }
.kai-voto__form input {
  flex: 1; min-width: 0; font-size: 12px; padding: 4px 9px; border-radius: 7px;
  border: 1px solid rgba(244,121,32,.4); background: var(--app-tint-1); color: var(--app-fg-1); outline: none;
}
.kai-msg__export { flex-wrap: wrap; }
.kai-hub__lecc { margin-top: 8px; }
.kai-hub__lecc-n { background: var(--mx-orange, #F47920); color: #0D1826; border-radius: 999px; padding: 1px 7px; font-size: 11px; font-weight: 800; }
.kai-lecc { max-height: calc(100vh - 112px); }
.kai-lecc__tabs { display: flex; gap: 6px; padding: 12px 18px 0; }
.kai-lecc__tabs button { border: 1px solid var(--app-tint-4); background: var(--app-tint-1); color: var(--app-fg-2); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.kai-lecc__tabs button.is-on { background: rgba(244,121,32,.14); border-color: var(--mx-orange, #F47920); color: var(--app-fg-1); }
.kai-lecc__tabs button span { font-family: var(--mx-font-mono); font-size: 11px; color: var(--app-fg-3); }
.kai-lecc__err { margin: 10px 18px 0; font-size: 12px; color: #fca5a5; }
.kai-lecc__body { overflow-y: auto; padding: 12px 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.kai-lecc__empty { font-size: 13px; color: var(--app-fg-3); padding: 28px 4px; text-align: center; line-height: 1.5; }
.kai-lecc__item { border: 1px solid var(--app-tint-3); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; background: var(--app-tint-1); }
.kai-lecc__meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 11.5px; color: var(--app-fg-3); }
.kai-lecc__chip { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fbbf85; border: 1px solid rgba(244,121,32,.4); border-radius: 999px; padding: 1px 8px; }
.kai-lecc__chip--dim { color: var(--app-fg-3); border-color: var(--app-tint-4); }
.kai-lecc__text { width: 100%; resize: vertical; font: 500 13.5px/1.5 var(--mx-font-body, inherit); color: var(--app-fg-1); background: var(--app-surface); border: 1px solid var(--app-tint-3); border-radius: 8px; padding: 9px 11px; outline: none; }
.kai-lecc__text:focus { border-color: rgba(244,121,32,.6); }
.kai-lecc__text--ro { resize: none; }
.kai-lecc__why { font-size: 12px; color: var(--app-fg-3); line-height: 1.45; }
.kai-lecc__origen summary { font-size: 12px; color: var(--app-fg-3); cursor: pointer; }
.kai-lecc__origen p { font-size: 12px; color: var(--app-fg-2); line-height: 1.5; margin: 6px 0 0; white-space: pre-wrap; }
.kai-lecc__resp { max-height: 180px; overflow-y: auto; }
.kai-lecc__actions { display: flex; justify-content: flex-end; gap: 8px; }
/* Examen fijo de KAI + ficha de marca */
.kai-ficha__campo { display: flex; flex-direction: column; gap: 5px; }
.kai-ficha__campo > span { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--app-fg-3); }
.kai-exam { display: flex; flex-direction: column; gap: 12px; }
.kai-exam__intro { font-size: 12.5px; color: var(--app-fg-3); line-height: 1.5; }
.kai-exam__bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--app-tint-3); border-radius: 10px; background: var(--app-tint-1); }
.kai-exam__count { font-size: 12px; color: var(--app-fg-2); flex: 1 1 220px; font-variant-numeric: tabular-nums; }
.kai-exam__viejos { flex: 1 1 100%; font-size: 12px; color: var(--app-fg-2); }
.kai-exam__viejos summary { cursor: pointer; }
.kai-exam__viejos .btn { margin: 8px 8px 0 0; }
.kai-exam__prog { flex: 1 1 160px; height: 6px; border-radius: 99px; background: var(--app-tint-3); overflow: hidden; }
.kai-exam__prog span { display: block; height: 100%; background: var(--mx-orange, #F47920); transition: width .4s ease; }
.kai-exam__list { display: flex; flex-direction: column; gap: 8px; }
.kai-exam__row { border: 1px solid var(--app-tint-3); border-left-width: 3px; border-radius: 8px; padding: 9px 12px; display: flex; flex-direction: column; gap: 6px; }
.kai-exam__row.is-ok { border-left-color: #22c55e; }
.kai-exam__row.is-bad { border-left-color: #ef4444; }
.kai-exam__rowhead { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.kai-exam__mark { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.is-ok .kai-exam__mark { color: #22c55e; }
.is-bad .kai-exam__mark { color: #f87171; }
.kai-exam__score { font-family: var(--mx-font-mono); font-size: 12px; color: var(--app-fg-2); }
.kai-exam__q { font-size: 13px; color: var(--app-fg-1); flex: 1 1 240px; }
.kai-exam__fallas { margin: 0; padding-left: 18px; font-size: 12px; color: var(--app-fg-3); line-height: 1.45; }
.kai-exam__ver { align-self: flex-start; background: none; border: 0; padding: 0; font-size: 12px; color: #fbbf85; cursor: pointer; }
.kai-exam__resp { font-size: 12.5px; max-height: 320px; overflow-y: auto; padding: 8px 10px; border-radius: 8px; background: var(--app-surface); border: 1px solid var(--app-tint-3); }
.kai-exam__hist { display: flex; flex-direction: column; gap: 8px; }
.kai-exam__run { display: flex; flex-direction: column; gap: 8px; }
.kai-exam__runhead { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; text-align: left; background: var(--app-tint-1); border: 1px solid var(--app-tint-3); border-radius: 8px; padding: 9px 12px; color: var(--app-fg-1); font-size: 13px; cursor: pointer; }
.kai-exam__runhead span { font-size: 12px; color: var(--app-fg-3); }
.crm-strip{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:12px;align-items:stretch;margin-bottom:12px}
.crm-strip .crm-hoy{margin-bottom:0}
.crm-inbox{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:16px;cursor:pointer;border:1px dashed var(--mx-orange) !important}
.crm-inbox.on{background:rgba(244,121,32,.07)}
.crm-inbox .big{font-family:var(--mx-font-display);font-size:38px;font-weight:800;color:var(--mx-orange);line-height:1}
.crm-sug.done{opacity:.5}.crm-sug.done .t{text-decoration:line-through}
.crm-pill.ok{background:rgba(34,197,94,.16);color:#15803d}.crm-pill.warn{background:rgba(245,158,11,.18);color:#b45309}
.crm-pill.bad{background:rgba(239,68,68,.16);color:#dc2626}.crm-pill.info{background:rgba(96,165,250,.16);color:#2563eb}
[data-theme="dark"] .crm-pill.ok{color:#86efac}[data-theme="dark"] .crm-pill.warn{color:#fbbf24}[data-theme="dark"] .crm-pill.bad{color:#fca5a5}[data-theme="dark"] .crm-pill.info{color:#93c5fd}
.crm-detbox{padding:0;margin-bottom:12px}
.crm-h3{margin:0;font-size:14px;font-family:var(--mx-font-display);letter-spacing:.5px;text-transform:uppercase;color:var(--app-fg-1)}
.crm-dets{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:10px;padding:0 16px 16px}
.crm-det{padding:11px 14px;border:1px solid var(--app-tint-3);border-radius:10px;background:var(--app-tint-1);cursor:pointer;color:var(--app-fg-1)}
.crm-det:hover{border-color:var(--mx-orange)}
.crm-det .hd{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.crm-det .hd b{font-size:13px}
.crm-det .ev{font-size:11.5px;color:var(--app-fg-3);margin-top:6px;line-height:1.45}
.crm-det .ev b{color:var(--app-fg-2)}
.crm-det .dots{display:flex;gap:4px;align-items:center;flex-wrap:wrap;margin-top:8px;color:var(--app-fg-4)}
.crm-det .dots span{font-size:10.5px;font-family:var(--mx-font-mono);color:var(--app-fg-2);background:var(--app-tint-2);border-radius:5px;padding:2px 6px}
.crm-det .more{font-size:11px;font-weight:700;color:var(--mx-orange);margin-top:7px;display:inline-flex;gap:4px;align-items:center}
.crm-nolead{padding:0 16px 14px}
.crm-call{border:1px solid var(--app-tint-3);border-radius:10px;margin-bottom:8px;overflow:hidden}
.crm-call .ch{display:flex;gap:10px;align-items:center;padding:9px 11px;cursor:pointer;background:var(--app-tint-1)}
.crm-call .ch .d{font-weight:800;font-size:12px;color:var(--app-fg-1);white-space:nowrap}
.crm-call .ch .tt{flex:1;min-width:0;font-size:11.5px;color:var(--app-fg-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-call .cb{padding:8px 12px 10px;font-size:12px;color:var(--app-fg-2);line-height:1.45}
.crm-call .cb ul{margin:4px 0 8px;padding-left:18px}
.crm-call .cb li{margin-bottom:3px}
.crm-call .cb a{color:var(--mx-orange);font-weight:700;font-size:11.5px;text-decoration:none}
.crm-kai-blue{background:rgba(96,165,250,.08);border-left-color:#3b82f6}
.crm-kai-blue b{color:var(--app-fg-1)}
.crm-join{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0 4px;font-size:12px;color:var(--app-fg-2)}
.crm-join select{border:1px solid var(--app-tint-4);background:var(--app-tint-1);color:var(--app-fg-1);border-radius:7px;padding:6px 8px;font-size:12px;max-width:220px}
.crm-explain{font-size:11.5px;color:var(--app-fg-3);background:var(--app-tint-1);border-radius:8px;padding:8px 10px;margin-bottom:12px;line-height:1.45}
.crm-explain b{color:var(--app-fg-1)}
.crm-textarea{width:100%;box-sizing:border-box;min-height:200px;line-height:1.5;border:1px solid var(--app-tint-4);background:var(--app-tint-1);color:var(--app-fg-1);border-radius:7px;padding:8px 10px;font-size:12.5px;font-family:inherit;resize:vertical}
@media (max-width:900px){.crm-strip{grid-template-columns:1fr}}
.crm-mail{display:flex;gap:10px;padding:8px 0;border-top:1px solid var(--app-tint-3);font-size:12px;text-decoration:none;color:inherit}
.crm-mail:hover .s{color:var(--mx-orange)}
.crm-mail .d{font-size:11px;color:var(--app-fg-4);width:52px;flex:none;padding-top:1px}
.crm-mail .who{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--app-fg-4)}
.crm-mail .s{font-weight:700;color:var(--app-fg-1);margin-top:1px}
.crm-mail .tx{color:var(--app-fg-3);line-height:1.4;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Vigía del pipe: compromisos que KAI convirtió en tarea de Ro. */
.crm-vig{display:flex;gap:10px;padding:8px 0;border-top:1px solid var(--app-tint-3);font-size:12px}
.crm-vig__dot{width:7px;height:7px;border-radius:50%;flex:none;margin-top:5px;background:var(--app-fg-4)}
.crm-vig__dot.is-open{background:var(--mx-orange);box-shadow:0 0 0 3px color-mix(in srgb,var(--mx-orange) 18%,transparent)}
.crm-vig__t{font-weight:700;color:var(--app-fg-1)}
.crm-vig__w{color:var(--app-fg-3);line-height:1.4;margin-top:2px}

/* ═══════════════════════════════════════════════════════════════════
   KAI · chat a lo ancho (versión B, 27/09/2026)
   One header line with a single KAI presence, the thread at full width,
   conversations in a drawer over the chat, a composer that grows.
   ═══════════════════════════════════════════════════════════════════ */
.content--ai > .kai-grid.kai-grid--b { grid-template-columns: 1fr; gap: 0; padding: 0; }
.content--ai .kai-grid--b .kai-chat { background: var(--app-bg); }
.kai-grid--b .kai-bg-glow { display: none; }

/* Header */
.kai-bar {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  height: 54px; padding: 0 14px 0 20px;
  border-bottom: 1px solid var(--app-tint-3);
  position: relative; z-index: 6;
}
.kai-bar__switch { position: relative; min-width: 0; }
.kai-bar__title {
  display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 46vw;
  border: 0; background: transparent; color: inherit; text-align: left;
  padding: 6px 8px; margin-left: -8px; border-radius: 8px; cursor: pointer;
}
.kai-bar__title:hover { background: var(--app-tint-2); }
.kai-bar__title > svg { color: var(--app-fg-4); flex-shrink: 0; }
.kai-bar__titletxt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kai-bar__name { font: 700 16px/1.1 var(--mx-font-display); letter-spacing: .3px; color: var(--app-fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kai-bar__sub { font: 500 10.5px/1 var(--mx-font-mono); color: var(--app-fg-4); }
.kai-bar__sp { flex: 1; }
.kai-bar__rel { position: relative; }
.kai-bar__scrim { position: fixed; inset: 0; z-index: 30; }
.kai-bar__btn {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  height: 34px; padding: 0 12px; border-radius: 9px;
  border: 1px solid var(--app-tint-4); background: var(--app-tint-1); color: var(--app-fg-2);
  font: 600 12.5px/1 var(--mx-font-body); cursor: pointer; white-space: nowrap;
}
.kai-bar__btn:hover:not(:disabled) { background: var(--app-tint-3); color: var(--app-fg-1); }
.kai-bar__btn:disabled { opacity: .45; cursor: default; }
.kai-bar__btn--or { background: var(--mx-orange); border-color: var(--mx-orange); color: #1a0e04; }
.kai-bar__btn--or:hover:not(:disabled) { background: var(--mx-orange-hover); color: #1a0e04; }
.kai-bar__ib {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; display: inline-grid; place-items: center;
  border: 1px solid transparent; background: transparent; color: var(--app-fg-2); cursor: pointer;
}
.kai-bar__ib:hover:not(:disabled) { background: var(--app-tint-3); color: var(--app-fg-1); }
.kai-bar__ib:disabled { opacity: .45; }
.kai-bar__phone { display: none; }
.kai-bar__prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; }
.kai-bar__prog span { position: absolute; inset: 0; width: 35%; background: linear-gradient(90deg, transparent, var(--mx-orange), transparent); animation: kaiBarRun 1.3s linear infinite; }
@keyframes kaiBarRun { from { transform: translateX(-100%); } to { transform: translateX(300%); } }

/* The single KAI presence — idle "Listo", busy = what it is doing + time + cut */
.kai-pill {
  display: flex; align-items: center; gap: 8px; min-width: 0; flex-shrink: 1;
  height: 34px; padding: 0 12px 0 4px; border-radius: 999px;
  border: 1px solid var(--app-tint-3); background: var(--app-tint-1);
}
.kai-pill:not(:has(.kai-pill__face)) { padding-left: 12px; }
.kai-pill__face { width: 26px !important; height: 26px !important; border-radius: 50%; background: rgba(244,121,32,.12); flex-shrink: 0; }
.kai-pill__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.15); }
.kai-pill__st { font: 600 11.5px/1 var(--mx-font-body); color: var(--app-fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.kai-pill__t { font: 600 10.5px/1 var(--mx-font-mono); color: var(--mx-orange); flex-shrink: 0; }
.kai-pill__cut { display: inline-grid; place-items: center; border: 0; background: transparent; color: var(--app-fg-3); cursor: pointer; padding: 4px; margin-right: -6px; border-radius: 6px; }
.kai-pill__cut:hover { color: #f87171; background: var(--app-tint-3); }
.kai-bar.is-busy .kai-pill { border-color: rgba(244,121,32,.45); background: rgba(244,121,32,.08); }
.kai-bar.is-busy .kai-pill__dot { background: var(--mx-orange); box-shadow: 0 0 0 3px rgba(244,121,32,.2); animation: dotpulse 1.1s infinite; }
.kai-pill.is-stuck .kai-pill__dot { background: #fbbf24; animation: none; }

/* Menus (more / motor) */
.kai-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 31; min-width: 230px;
  background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 12px;
  box-shadow: var(--app-shadow); padding: 6px;
}
.kai-menu__h { font: 700 9.5px/1 var(--mx-font-display); letter-spacing: 1.2px; text-transform: uppercase; color: var(--app-fg-4); padding: 8px 10px 6px; }
.kai-menu button {
  display: flex; width: 100%; align-items: center; gap: 10px; border: 0; background: transparent;
  color: var(--app-fg-2); font: 500 13px/1.2 var(--mx-font-body); padding: 9px 10px; border-radius: 8px; cursor: pointer; text-align: left;
}
.kai-menu button:hover { background: var(--app-tint-3); color: var(--app-fg-1); }
.kai-menu button.is-sel { color: var(--mx-orange); }
.kai-menu__ck { width: 14px; display: inline-flex; }
.kai-menu__nm { display: block; }
.kai-menu__tag { display: block; font-size: 11px; color: var(--app-fg-4); margin-top: 3px; }
.kai-menu__n { margin-left: auto; font: 700 10px/1 var(--mx-font-mono); background: rgba(244,121,32,.22); color: var(--mx-orange); padding: 3px 6px; border-radius: 6px; }

/* Quick switcher under the title */
.kai-quick {
  position: absolute; top: calc(100% + 4px); left: -8px; z-index: 31; width: 380px; max-width: calc(100vw - 32px);
  background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 14px; box-shadow: var(--app-shadow); padding: 8px;
}
.kai-quick__list { max-height: 340px; overflow-y: auto; }
.kai-quick__all {
  display: flex; width: 100%; justify-content: space-between; align-items: center;
  border: 0; border-top: 1px solid var(--app-tint-3); background: transparent; margin-top: 6px; padding: 11px 8px 5px;
  font: 600 12px/1 var(--mx-font-body); color: var(--mx-orange); cursor: pointer;
}

/* Conversation rows (quick switcher + drawer) */
.kai-row { display: flex; align-items: flex-start; gap: 6px; padding: 8px 8px 8px 10px; border-radius: 9px; cursor: pointer; color: var(--app-fg-2); position: relative; }
.kai-row:hover { background: var(--app-tint-2); color: var(--app-fg-1); }
.kai-row.is-active { background: rgba(244,121,32,.10); color: var(--app-fg-1); }
.kai-row.is-active::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--mx-orange); }
.kai-row__main { flex: 1; min-width: 0; }
.kai-row__t { font: 600 13px/1.3 var(--mx-font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kai-row__m { font: 500 10.5px/1.3 var(--mx-font-mono); color: var(--app-fg-4); margin-top: 3px; }
.kai-row__p { font: 500 12px/1.45 var(--mx-font-body); color: var(--app-fg-3); margin-top: 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kai-row__ib { opacity: 0; border: 0; background: transparent; color: var(--app-fg-4); cursor: pointer; padding: 4px; border-radius: 6px; display: inline-grid; place-items: center; flex-shrink: 0; }
.kai-row:hover .kai-row__ib, .kai-row__ib.is-on { opacity: 1; }
.kai-row__ib:hover { background: var(--app-tint-3); color: var(--app-fg-1); }
.kai-row__ib.is-on { color: var(--mx-orange); }
.kai-row__del:hover { color: #f87171; }

/* Drawer */
.kai-drawer-scrim { position: absolute; inset: 0; z-index: 20; background: rgba(5,9,15,.45); animation: kaiSheetFade .18s ease; }
.kai-drawer {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 21; width: 400px; max-width: 92%;
  display: flex; flex-direction: column; background: var(--app-surface-2);
  border-left: 1px solid var(--app-border); box-shadow: -20px 0 60px rgba(0,0,0,.35);
  transform: translateX(104%); transition: transform .22s ease; visibility: hidden;
}
.kai-drawer.is-open { transform: none; visibility: visible; }
.kai-drawer__head { display: flex; align-items: center; gap: 8px; padding: 14px 12px 10px 16px; }
.kai-drawer__ttl { flex: 1; font: 800 18px/1 var(--mx-font-display); text-transform: uppercase; letter-spacing: .3px; color: var(--app-fg-1); }
.kai-drawer__searchwrap { padding: 0 14px 8px; }
.kai-drawer__search {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border-radius: 9px;
  background: var(--app-tint-2); border: 1px solid var(--app-tint-3); color: var(--app-fg-4);
}
.kai-drawer__search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--app-fg-1); font: 500 13px/1 var(--mx-font-body); }
.kai-drawer__search kbd { font: 600 10px/1 var(--mx-font-mono); color: var(--app-fg-4); border: 1px solid var(--app-tint-4); border-radius: 5px; padding: 3px 5px; }
.kai-drawer__clr { border: 0; background: transparent; color: var(--app-fg-3); cursor: pointer; display: inline-grid; place-items: center; padding: 3px; }
.kai-drawer__list { flex: 1; overflow-y: auto; padding: 0 8px 10px; }
.kai-drawer__list .kai-row { padding: 11px 8px 11px 12px; }
.kai-drawer__grp { display: flex; align-items: center; gap: 6px; font: 700 9.5px/1 var(--mx-font-display); letter-spacing: 1.3px; text-transform: uppercase; color: var(--app-fg-4); padding: 14px 10px 6px; }
.kai-drawer__empty { padding: 18px 12px; color: var(--app-fg-3); font: 500 12.5px/1.45 var(--mx-font-body); }
.kai-drawer__note { padding: 12px 12px 4px; color: var(--app-fg-4); font: 500 11px/1.4 var(--mx-font-body); }
.kai-drawer__foot { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--app-tint-3); }

/* Thread: no avatars, KAI signs with a short orange rule, full reading width */
.content--ai .kai-grid--b .kai-stream > .kai-msg,
.content--ai .kai-grid--b .kai-stream > .kai-toolchip,
.content--ai .kai-grid--b .kai-stream > .kai-confirm,
.content--ai .kai-grid--b .kai-inputbar__inner,
.content--ai .kai-grid--b .kai-inputbar__hint { max-width: 880px; }
.kai-grid--b .kai-msg__avatar { display: none; }
.kai-grid--b .kai-msg--ai .kai-msg__bubble { max-width: 100%; width: 100%; }
.kai-grid--b .kai-msg--ai .kai-msg__body { max-width: 100%; font-size: 14.5px; line-height: 1.65; }
/* Dash + KAI set like the MEXUS-SELLER wordmark (Montserrat heavy, short thick hyphen) */
.kai-grid--b .kai-msg--ai .kai-msg__author { font: 800 13px/1 var(--mx-font-sans); letter-spacing: .4px; gap: 6px; }
.kai-grid--b .kai-msg--ai .kai-msg__author::before { content: ""; width: 9px; height: 3px; border-radius: 0; background: var(--mx-orange); }
.kai-grid--b .kai-msg--you .kai-msg__body { font-size: 14px; }

/* Empty state — the only big KAI, and then the header pill drops its own face */
.kai-hello { max-width: 660px; margin: 7vh auto 0; text-align: center; }
.kai-hello > img { margin: 0 auto; }
.kai-hello__t { font: 800 30px/1.1 var(--mx-font-display); text-transform: uppercase; letter-spacing: .2px; margin: 14px 0 6px; color: var(--app-fg-1); }
.kai-hello__s { color: var(--app-fg-3); font: 500 14px/1.5 var(--mx-font-body); margin: 0 0 22px; }
.kai-hello__sugg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left; }
.kai-hello__sugg button {
  display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--app-border); background: var(--app-surface);
  border-radius: 12px; padding: 12px 14px; color: var(--app-fg-2); font: 500 13px/1.4 var(--mx-font-body); cursor: pointer; text-align: left;
}
.kai-hello__sugg button:hover:not(:disabled) { border-color: rgba(244,121,32,.5); color: var(--app-fg-1); }
.kai-hello__sugg svg { color: var(--mx-orange); flex-shrink: 0; margin-top: 1px; }

/* Composer: text on top, tools underneath; grows, and can be enlarged */
.kai-grid--b .kai-inputbar { border-top: 0; padding: 6px 24px 16px; }
.kai-grid--b .kai-inputbar__inner.kai-compose {
  flex-direction: column; align-items: stretch; gap: 0;
  border-radius: 16px; padding: 12px 10px 8px 16px;
}
.kai-grid--b .kai-compose:focus-within { box-shadow: 0 0 0 4px rgba(244,121,32,.10); }
/* flex:0 0 auto — with the inherited flex:1 the column layout ignores the JS auto-grow height. */
.kai-grid--b .kai-compose .kai-input { flex: 0 0 auto; font-size: 14.5px; line-height: 1.55; padding: 0; min-height: 46px; max-height: 272px; }
.kai-grid--b .kai-compose.is-big .kai-input { height: 38vh; max-height: none; }
.kai-compose__bar { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.kai-compose__sp { flex: 1; }
.kai-compose__hint { font-size: 10.5px; color: var(--app-fg-4); margin-right: 4px; white-space: nowrap; }
.kai-compose__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-compose__big { width: 34px; height: 34px; border-radius: 8px; border: 0; background: transparent; color: var(--app-fg-3); cursor: pointer; display: inline-grid; place-items: center; }
.kai-compose__big:hover { background: var(--app-tint-3); color: var(--app-fg-1); }
.kai-grid--b .kai-compose .kai-send { width: 38px; height: 38px; border-radius: 11px; }
.kai-grid--b .kai-inputbar__hint { text-align: left; margin: 8px auto 0; }

@media (max-width: 1100px) {
  .kai-bar__title { max-width: 34vw; }
  .kai-pill__st { max-width: 180px; }
}

/* ═══════════════════════════════════════════════════════════════════
   KAI · ronda 3 (27/09/2026): arranque "Compacto" + conversación con
   avatar en cada respuesta, pausar y editar la pregunta.
   ═══════════════════════════════════════════════════════════════════ */
/* Native scale: undo .main's 1.18 zoom only inside KAI (phones already run at 1). */
@media (min-width: 768px) {
  .content--ai > .kai-grid.kai-grid--b { zoom: calc(1 / 1.18); padding-top: 0; }
  /* The rail's 72px gutter lives inside .main's zoom (≈85px real) — close the seam so the header runs flush. */
  .app.is-sidebar-rail .content--ai > .kai-grid.kai-grid--b { margin-left: calc(72px - 72px * 1.18); }
}
/* Header continues the sidebar's brand row: same color, height and divider. */
.content--ai .kai-grid--b .kai-bar {
  height: var(--header-h); background: var(--app-surface-2);
  border-bottom-color: var(--app-border-soft); padding: 0 14px 0 18px;
}
.kai-grid--b .kai-bar__name { font-size: 15px; }
.kai-grid--b .kai-bar__btn { height: 32px; font-size: 12px; }
.kai-grid--b .kai-bar__ib { width: 32px; height: 32px; }
.kai-grid--b .kai-pill { height: 32px; padding-left: 12px; }

/* Arranque: fox with a soft halo, 2×2 suggestions and the composer right under them */
.kai-chat.is-empty .kai-stream { flex: 0 0 auto; overflow: visible; padding-bottom: 0; }
.kai-chat.is-empty .kai-inputbar { padding-top: 18px; }
.content--ai .kai-grid--b .kai-chat.is-empty .kai-inputbar__inner,
.content--ai .kai-grid--b .kai-chat.is-empty .kai-inputbar__hint { max-width: 760px; }
.kai-grid--b .kai-hello { width: 100%; max-width: 760px; margin-top: 9vh; }
.kai-hello__halo { position: relative; display: inline-block; }
.kai-hello__halo::before { content: ""; position: absolute; inset: -26px; border-radius: 50%; background: radial-gradient(circle, rgba(244,121,32,.22), transparent 65%); }
.kai-hello__halo .kai-avatar { position: relative; margin: 0 auto; }
.kai-grid--b .kai-hello__t { font-size: 23px; margin: 10px 0 4px; }
.kai-grid--b .kai-hello__s { font-size: 13px; margin-bottom: 20px; }
.kai-grid--b .kai-hello__sugg { gap: 8px; }
.kai-grid--b .kai-hello__sugg button { padding: 10px 12px; border-radius: 10px; font-size: 12.5px; gap: 9px; }

/* Conversación: KAI signs every answer with its face, you with your initials */
.content--ai .kai-grid--b .kai-stream > .kai-msg,
.content--ai .kai-grid--b .kai-stream > .kai-toolchip,
.content--ai .kai-grid--b .kai-stream > .kai-confirm,
.content--ai .kai-grid--b .kai-inputbar__inner,
.content--ai .kai-grid--b .kai-inputbar__hint { max-width: 800px; }
.content--ai .kai-grid--b .kai-stream > .kai-toolchip,
.content--ai .kai-grid--b .kai-stream > .kai-confirm { padding-left: 42px; box-sizing: border-box; }
.kai-grid--b .kai-msg__avatar { display: grid; width: 30px; height: 30px; }
.kai-grid--b .kai-msg--ai .kai-msg__avatar {
  place-items: end center; box-shadow: none; border: 1px solid rgba(244,121,32,.35);
  background: radial-gradient(circle at 50% 35%, rgba(244,121,32,.28), rgba(244,121,32,.06));
}
.kai-grid--b .kai-msg--you { align-items: flex-end; }
.kai-grid--b .kai-msg--you .kai-msg__avatar {
  width: 26px; height: 26px; border-radius: 50%; background: var(--mx-orange); color: #1a0e04;
  font: 700 10px/1 var(--mx-font-display); letter-spacing: .3px; box-shadow: none;
}
.kai-grid--b .kai-msg--you .kai-msg__body {
  background: var(--app-surface); border: 1px solid var(--app-border); color: var(--app-fg-1); box-shadow: none;
  border-radius: 14px 14px 4px 14px; padding: 8px 13px; font-size: 13.5px; line-height: 1.55;
}
.kai-grid--b .kai-msg--you .kai-msg__body p { color: var(--app-fg-1); }
.kai-grid--b .kai-msg--ai .kai-msg__body { font-size: 13.5px; line-height: 1.65; }
.kai-grid--b .kai-msg--you .kai-msg__bubble { display: flex; flex-direction: column; align-items: flex-end; }
.kai-grid--b .kai-msg--you .kai-msg__bubble { position: relative; }
.kai-msg__youact { position: absolute; top: 100%; right: 0; display: flex; padding-top: 3px; opacity: 0; transition: opacity .15s; }
.kai-msg--you:hover .kai-msg__youact, .kai-msg--you:focus-within .kai-msg__youact { opacity: 1; }
.kai-msg__youact button {
  display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; cursor: pointer;
  color: var(--app-fg-3); font: 600 11px/1 var(--mx-font-body); padding: 5px 7px; border-radius: 6px;
}
.kai-msg__youact button:hover { color: var(--app-fg-1); background: var(--app-tint-2); }
.kai-msg.is-editing .kai-msg__body { border-color: rgba(244,121,32,.6); }
.kai-msg.is-stale { opacity: .38; }

/* Composer: edit strip, and Pausar replaces Enviar while KAI works */
.kai-grid--b .kai-compose .kai-input { font-size: 14px; min-height: 24px; }
.kai-grid--b .kai-inputbar__inner.kai-compose { border-radius: 14px; padding: 10px 10px 7px 14px; }
.kai-grid--b .kai-compose .kai-send { width: 32px; height: 32px; border-radius: 9px; }
.kai-grid--b .kai-compose__big { width: 30px; height: 30px; }
.kai-compose.is-editing { border-color: rgba(244,121,32,.55); }
.kai-compose__edit {
  display: flex; align-items: center; gap: 8px; margin: -2px 0 8px; padding: 0 0 8px;
  border-bottom: 1px solid var(--app-tint-3); color: var(--mx-orange); font: 600 11.5px/1.3 var(--mx-font-body);
}
.kai-compose__edit span { flex: 1; min-width: 0; }
.kai-compose__edit button { border: 1px solid var(--app-tint-4); background: transparent; color: var(--app-fg-2); font: 600 11px/1 var(--mx-font-body); padding: 5px 9px; border-radius: 6px; cursor: pointer; }
.kai-compose__edit button:hover { color: var(--app-fg-1); background: var(--app-tint-2); }
.kai-compose__hint b { color: var(--app-fg-2); font-weight: 600; }
/* KAI working block: one steady card for the whole turn (status, thought, finished steps) */
.kai-work__av { position: relative; overflow: visible !important; }
/* Bigger while thinking; the negative margin keeps the text column where the answer lands */
.kai-grid--b .kai-work__av { width: 40px; height: 40px; margin-left: -10px; }
.kai-grid--b .kai-work .kai-msg__author { font-size: 15px; }
.kai-bar__cost { margin-left: 8px; padding: 1px 6px; border-radius: 5px; background: rgba(244,121,32,.12); color: var(--mx-orange); font: 600 10.5px/1.4 var(--mx-font-mono); letter-spacing: 0; }
.kai-work__av::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid transparent; border-top-color: var(--mx-orange); border-right-color: rgba(244,121,32,.35); animation: kaiWorkSpin 1.1s linear infinite; }
@keyframes kaiWorkSpin { to { transform: rotate(360deg); } }
.kai-work__t { font: 500 10.5px/1 var(--mx-font-mono); color: var(--app-fg-4); letter-spacing: 0; text-transform: none; margin-left: 8px; }
.kai-work__now { display: flex; align-items: center; gap: 9px; margin-top: 2px; }
.kai-work__spin { width: 6px; height: 6px; border-radius: 50%; background: var(--mx-orange); flex-shrink: 0; animation: dotpulse 1.1s infinite; }
.kai-work__lbl {
  font: 600 13.5px/1.4 var(--mx-font-body);
  background: linear-gradient(90deg, var(--app-fg-3) 0%, var(--app-fg-1) 45%, var(--app-fg-3) 90%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: kaiWorkShimmer 2.2s linear infinite;
}
@keyframes kaiWorkShimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.kai-work__thought {
  margin: 8px 0 0 15px; padding-left: 10px; border-left: 2px solid var(--app-tint-4);
  color: var(--app-fg-3); font: italic 400 12.5px/1.5 var(--mx-font-body);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kai-work__steps { list-style: none; margin: 10px 0 0 15px; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.kai-work__steps li { display: flex; align-items: center; gap: 7px; font: 500 12px/1.3 var(--mx-font-body); color: var(--app-fg-3); animation: kaiMsgIn .25s ease-out; }
.kai-work__steps li svg { color: #34d399; flex-shrink: 0; }
.kai-work__steps li.is-err svg { color: #f87171; }
.kai-work__steps li em { font: 500 10.5px/1 var(--mx-font-mono); font-style: normal; color: var(--app-fg-4); margin-left: auto; }
.kai-work__n { font: 600 10.5px/1 var(--mx-font-mono); color: var(--app-fg-4); margin-left: 6px; }
.kai-work__steps li.is-more { color: var(--app-fg-4); font-size: 11px; padding-left: 18px; }
.kai-work__sum { margin-top: 8px; font: 500 10.5px/1 var(--mx-font-mono); color: var(--app-fg-4); }

/* ── Check-in de los 3 min: aviso centrado DENTRO del hilo ──────────
   No es modal a propósito: si el operador se fue a otra sección, esto no
   lo persigue; lo encuentra al volver al chat. */
.kai-ask {
  margin: 28px auto 4px;
  max-width: 520px;
  background: var(--app-tint-1);
  border: 1px solid var(--app-tint-4);
  border-radius: 14px;
  padding: 18px 20px 16px;
  text-align: center;
  animation: kaiAskIn .25s cubic-bezier(.22,1.1,.36,1);
}
@keyframes kaiAskIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.kai-ask.is-stuck { border-color: rgba(229,83,75,.30); }
.kai-ask .kai-avatar { margin: 0 auto; border-radius: 50%; }
.kai-ask__t {
  font: 700 20px/1.15 var(--mx-font-display);
  letter-spacing: .3px;
  margin: 8px 0 0;
  color: var(--app-fg-1);
}
.kai-ask__p { font-size: 13.5px; line-height: 1.6; color: var(--app-fg-2); margin: 8px 0 0; }
.kai-ask__p b { color: var(--app-fg-1); font-weight: 600; }
.kai-ask__meta { margin-top: 12px; font: 400 11.5px var(--mx-font-mono); color: var(--app-fg-4); }
.kai-ask__meta b { color: var(--app-fg-2); font-weight: 500; }
.kai-ask__acts { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.kai-ask__btn {
  border-radius: 10px;
  padding: 10px 20px;
  font: 600 13px var(--mx-font-body);
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--app-tint-4);
  color: var(--app-fg-2);
}
.kai-ask__btn:hover { background: var(--app-tint-3); color: var(--app-fg-1); }
.kai-ask__btn--ok { background: var(--mx-orange); border-color: var(--mx-orange); color: #0D1826; }
.kai-ask__btn--ok:hover { background: #ff8b39; color: #0D1826; }
.kai-ask__count { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 11.5px; color: var(--app-fg-4); }
.kai-ask__bar { flex: 1; height: 3px; border-radius: 2px; background: var(--app-tint-3); overflow: hidden; }
.kai-ask__bar i { display: block; height: 100%; background: var(--mx-orange); transition: width 1s linear; }
.kai-ask__count b { font: 500 11.5px var(--mx-font-mono); color: var(--app-fg-2); }
@media (prefers-reduced-motion: reduce) { .kai-work__av::after, .kai-work__lbl { animation: none; } .kai-work__lbl { color: var(--app-fg-1); background: none; } }
.kai-send.kai-send--stop { background: var(--app-fg-1); color: var(--app-bg); }
.kai-send.kai-send--stop:hover { opacity: .85; }

/* ── CRM · Clientes ── */
.cc-filt{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.cc-filt button{border:1px solid var(--app-tint-4);background:var(--app-tint-1);color:var(--app-fg-2);border-radius:999px;padding:5px 11px;font-size:11.5px;font-weight:700;cursor:pointer}
.cc-filt button.on{background:rgba(244,121,32,.14);border-color:var(--mx-orange);color:var(--app-fg-1)}
.cc-filt select{border:1px solid var(--app-tint-4);background:var(--app-tint-1);color:var(--app-fg-2);border-radius:999px;padding:5px 10px;font-size:11.5px;font-weight:700}
.cc-filt input{margin-left:auto;border:1px solid var(--app-tint-4);background:var(--app-tint-1);color:var(--app-fg-1);border-radius:7px;padding:6px 10px;font-size:12px;width:220px;max-width:100%}
.cc-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.cc-tbl th{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--app-fg-4);font-weight:700;text-align:left;padding:10px 12px;border-bottom:1px solid var(--app-tint-4);white-space:nowrap}
.cc-tbl td{padding:10px 12px;border-top:1px solid var(--app-tint-3);color:var(--app-fg-1);vertical-align:middle}
.cc-tbl .num{text-align:right;font-family:var(--mx-font-mono);font-size:12px}
.cc-list tbody tr{cursor:pointer}
.cc-list tbody tr:hover td{background:rgba(244,121,32,.05)}
.cc-name{font-weight:800;font-size:13px}
.cc-miss{display:inline-block;font-size:10px;font-weight:700;color:#b45309;background:rgba(245,158,11,.14);border-radius:6px;padding:1px 6px;margin-top:3px}
[data-theme="dark"] .cc-miss{color:#fbbf24}
.cc-mk{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.4px;padding:2px 6px;border-radius:5px;background:var(--app-tint-2);color:var(--app-fg-2);margin:1px 3px 1px 0;font-family:var(--mx-font-mono);white-space:nowrap}
.cc-mk.p1{background:rgba(96,165,250,.16);color:#2563eb}
[data-theme="dark"] .cc-mk.p1{color:#93c5fd}
.cc-faces{display:inline-flex;align-items:center}
.cc-face{width:24px;height:24px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:800;color:#fff;border:2px solid var(--app-surface);margin-left:-6px;flex:none}
.cc-faces .cc-face:first-child{margin-left:0}
.cc-face.none{background:var(--app-tint-3);color:var(--app-fg-4);margin-left:0}
.cc-face.big{width:34px;height:34px;font-size:12px;margin:0;border:none}
.cc-teamcell{display:inline-flex;align-items:center;gap:6px;padding:3px 6px;border-radius:8px;border:1px dashed transparent;color:var(--mx-orange)}
.cc-teamcell > svg{opacity:0}
.cc-teamcell:hover{border-color:var(--mx-orange)}
.cc-teamcell:hover > svg{opacity:1}
.cc-dots{display:inline-flex;gap:3px}
.cc-dots i{width:9px;height:9px;border-radius:3px;display:inline-block}
.cc-compl{display:inline-flex;align-items:center;gap:6px}
.cc-compl .cc-bar{width:54px}
.cc-bar{display:block;height:7px;border-radius:9px;background:var(--app-tint-3);overflow:hidden}
.cc-bar i{display:block;height:100%;border-radius:9px}
.crm-drawer.cc-drawer{width:780px}
.cc-top{padding:18px 20px 14px;border-bottom:1px solid var(--app-tint-3)}
.cc-top h2{margin:6px 0 0;font-family:var(--mx-font-display);font-size:28px;letter-spacing:.3px;color:var(--app-fg-1);line-height:1.05}
.cc-rs{font-size:12px;color:var(--app-fg-3);margin-top:4px}
.cc-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}
.cc-fact{background:var(--app-tint-1);border:1px solid var(--app-tint-3);border-radius:10px;padding:9px 12px}
.cc-fact .l{font-size:9.5px;text-transform:uppercase;letter-spacing:1.1px;color:var(--app-fg-4);font-weight:700}
.cc-fact .v{font-size:17px;font-weight:800;font-family:var(--mx-font-display);color:var(--app-fg-1);margin-top:2px;line-height:1.15}
.cc-fact .s{font-size:11px;color:var(--app-fg-3);margin-top:2px}
.cc-tabs{display:flex;gap:2px;padding:0 20px;border-bottom:1px solid var(--app-tint-3);position:sticky;top:0;background:var(--app-surface);z-index:2}
.cc-tabs button{background:none;border:none;border-bottom:2px solid transparent;padding:10px 12px;font-size:12.5px;font-weight:700;color:var(--app-fg-3);cursor:pointer;margin-bottom:-1px;display:inline-flex;gap:6px;align-items:center}
.cc-tabs button.on{color:var(--app-fg-1);border-bottom-color:var(--mx-orange)}
.cc-drawer .crm-kai ul{margin:4px 0 0;padding-left:18px}
.cc-sec{padding:14px 20px;border-bottom:1px solid var(--app-tint-3)}
.cc-sec h4{margin:0 0 10px;font-size:11px;text-transform:uppercase;letter-spacing:1.2px;color:var(--app-fg-4);display:flex;gap:8px;align-items:center}
.cc-sec h4 .sp{flex:1}
.cc-sec h4 .hint{text-transform:none;letter-spacing:0;font-weight:500}
.cc-dl{display:grid;grid-template-columns:170px 1fr;gap:4px 12px;font-size:12.5px;align-items:center;margin:0}
.cc-dl dt{color:var(--app-fg-4)}
.cc-dl dd{margin:0;color:var(--app-fg-1);font-weight:600;line-height:1.4;padding:4px 6px;border-radius:6px;cursor:text;min-height:18px}
.cc-dl dd:hover{background:var(--app-tint-2)}
.cc-dl dd.ed{padding:0;background:none}
.cc-dl dd a{color:var(--mx-orange)}
.cc-dl dd input,.cc-dl dd select{width:100%;box-sizing:border-box;border:1px solid var(--mx-orange);background:var(--app-tint-1);color:var(--app-fg-1);border-radius:6px;padding:5px 8px;font-size:12.5px;font-family:inherit}
.cc-empty{color:var(--app-fg-4);font-weight:500;font-style:italic}
.cc-src{font-size:10px;font-weight:700;color:var(--app-fg-4);margin-left:6px}
.cc-svc{display:flex;gap:6px;flex-wrap:wrap}
.cc-svc button{border:1px solid var(--app-tint-4);background:var(--app-tint-1);color:var(--app-fg-3);border-radius:999px;padding:5px 11px;font-size:11.5px;font-weight:700;cursor:pointer;display:inline-flex;gap:5px;align-items:center}
.cc-svc button.on{background:rgba(244,121,32,.14);border-color:var(--mx-orange);color:var(--app-fg-1)}
.cc-baja{border:1px solid rgba(239,68,68,.35);background:rgba(239,68,68,.08);border-radius:10px;padding:12px 14px}
.ccu-colors{display:flex;gap:5px;flex-wrap:wrap}
.ccu-colors button{width:22px;height:22px;border-radius:6px;border:2px solid var(--app-tint-4);cursor:pointer;padding:0}
.ccu-colors button.on{border-color:var(--app-fg-1)}
.ccu-budget{display:flex;flex-direction:column;gap:6px;font-weight:400}
.ccu-budget>div{display:flex;align-items:center;gap:8px}
.ccu-budget span{font-size:10px;font-weight:700;letter-spacing:1px;color:var(--app-fg-3);min-width:24px}
.ccu-ligar{border:1px dashed rgba(245,158,11,.6);background:rgba(245,158,11,.08);color:var(--app-fg-1);border-radius:7px;padding:5px 8px;font-size:12px;font-family:inherit;max-width:190px}
.ccu-st{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--app-fg-2)}
.ccu-st i{width:7px;height:7px;border-radius:999px;display:inline-block}
.ccu-rev{margin-bottom:12px}
.ccu-rev li{margin:4px 0;line-height:1.5}
.cc-acc{display:grid;grid-template-columns:80px minmax(0,1fr) 150px 150px 28px;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--app-tint-3);font-size:12.5px}
.cc-acc:first-of-type{border-top:none}
.cc-acc .cc-mk{justify-self:start}
.cc-ok{display:inline-flex;gap:5px;align-items:center;font-size:11px;font-weight:700;color:var(--app-fg-2)}
.cc-ok i{width:7px;height:7px;border-radius:9px;display:inline-block}
.cc-mini{background:none;border:none;color:var(--app-fg-4);cursor:pointer;padding:3px;border-radius:5px;display:inline-flex}
.cc-mini:hover{color:var(--app-fg-1);background:var(--app-tint-2)}
.cc-roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cc-role{border:1px solid var(--app-tint-3);border-radius:10px;padding:10px;background:var(--app-tint-1)}
.cc-role .rh{font-size:10px;text-transform:uppercase;letter-spacing:1px;font-weight:800;color:var(--app-fg-3)}
.cc-role .rd{font-size:10.5px;color:var(--app-fg-4);margin:2px 0 8px;line-height:1.35}
.cc-chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 4px 3px 3px;font-size:11.5px;font-weight:700;background:var(--app-surface);border:1px solid var(--app-tint-4);color:var(--app-fg-1);margin:0 4px 5px 0}
.cc-chip .cc-face{width:20px;height:20px;font-size:8.5px;border:none;margin:0}
.cc-chip button{background:none;border:none;cursor:pointer;color:var(--app-fg-4);display:inline-flex;padding:1px}
.cc-chip button:hover{color:#ef4444}
.cc-addsel{border:1px dashed var(--app-tint-5);background:none;color:var(--app-fg-3);border-radius:999px;padding:3px 8px;font-size:11px;font-weight:700;cursor:pointer;max-width:100%}
.cc-person{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:flex-start;padding:10px;border:1px solid var(--app-tint-3);border-radius:10px;margin-bottom:7px;background:var(--app-tint-1)}
.cc-person .nm{font-weight:800;font-size:12.5px;color:var(--app-fg-1)}
.cc-person .rl{font-size:11px;color:var(--app-fg-3);margin-top:1px}
.cc-person .ct{font-size:11.5px;margin-top:4px;display:flex;gap:12px;flex-wrap:wrap}
.cc-person .ct a{color:var(--mx-orange);text-decoration:none;font-family:var(--mx-font-mono);font-size:11px;display:inline-flex;gap:4px;align-items:center}
.cc-person .tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.cc-add{border:1px dashed var(--app-tint-5);border-radius:10px;padding:9px;text-align:center;font-size:11.5px;font-weight:700;color:var(--app-fg-3);cursor:pointer;display:flex;gap:5px;justify-content:center;align-items:center}
.cc-add:hover{border-color:var(--mx-orange);color:var(--mx-orange)}
.cc-obj{display:grid;grid-template-columns:minmax(0,1.5fr) 100px 100px minmax(110px,1fr) auto;gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--app-tint-3);font-size:12.5px}
.cc-obj:first-of-type{border-top:none}
.cc-obj .t{font-weight:700;color:var(--app-fg-1)}
.cc-obj .os{font-size:10.5px;color:var(--app-fg-4);margin-top:2px}
.cc-obj .k{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--app-fg-4)}
.cc-obj .v{font-family:var(--mx-font-mono);font-size:12px;color:var(--app-fg-1);font-weight:700}
.crm-pill.org{background:rgba(244,121,32,.16);color:var(--mx-orange)}
@media (max-width:760px){
  .crm-drawer.cc-drawer{width:100vw}
  .cc-facts,.cc-roles{grid-template-columns:1fr 1fr}
  .cc-dl{grid-template-columns:120px 1fr}
  .cc-acc{grid-template-columns:70px minmax(0,1fr) 28px}
  .cc-acc .crm-mono,.cc-acc .cc-ok{display:none}
  .cc-obj{grid-template-columns:1fr 1fr}
}
.cc-list td:first-child{min-width:170px}
.cc-miss,.cc-mk{white-space:nowrap}
.cc-list td:nth-child(3){white-space:nowrap}
.crm-diario{margin-left:auto;align-self:center;font-size:11px;color:var(--app-fg-4);display:inline-flex;gap:5px;align-items:center;padding-bottom:4px}

/* ── Acciones: lo enviado a Amazon y si llegó ── */
.nav-item .badge.warn { background: #f59e0b; color: #12161b; }
.acx-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.acx .dim { color: var(--app-fg-4); font-size: 11.5px; }
.acx .mono { font-family: var(--mx-font-mono); font-size: 11.5px; color: var(--app-fg-3); }
.acx-loading { display: flex; gap: 10px; align-items: center; padding: 40px; justify-content: center; color: var(--app-fg-3); font-size: 13px; }
.acx-spin { display: inline-flex; animation: acx-spin 1s linear infinite; }
@keyframes acx-spin { to { transform: rotate(360deg); } }
.acx-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
@media (max-width: 1100px) { .acx-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.acx-kpi { padding: 12px 16px; cursor: pointer; border: 1px solid var(--app-tint-3); }
.acx-kpi.on { border-color: var(--mx-orange); background: rgba(244,121,32,.06); }
.acx-kpi.tk { cursor: default; }
.acx-kpi .l { font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--app-fg-4); font-weight: 700; }
.acx-kpi .v { font-size: 26px; font-weight: 800; font-family: var(--mx-font-display); line-height: 1.1; color: var(--app-fg-1); margin-top: 4px; }
.acx-kpi .v small { font-size: 12px; color: var(--app-fg-4); font-weight: 700; margin-left: 4px; }
.acx-kpi .s { font-size: 11px; color: var(--app-fg-4); margin-top: 2px; }
.acx-kpi.alert .v { color: #f59e0b; }
.acx-tkbar { display: flex; height: 5px; border-radius: 3px; overflow: hidden; background: var(--app-tint-3); margin-top: 8px; }
.acx-tkbar .p, .acx-tkleg i.p { background: var(--mx-orange); }
.acx-tkbar .e, .acx-tkleg i.e { background: rgba(244,121,32,.4); }
.acx-tkleg { display: flex; gap: 10px; font-size: 10.5px; color: var(--app-fg-4); margin-top: 5px; font-family: var(--mx-font-mono); }
.acx-tkleg i { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 4px; }
.acx-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.acx-bar input { border: 1px solid var(--app-tint-4); background: var(--app-tint-1); color: var(--app-fg-1); border-radius: 7px; padding: 6px 10px; font-size: 12px; width: 200px; }
.acx-bar select { border: 1px solid var(--app-tint-4); background: var(--app-tint-1); color: var(--app-fg-1); border-radius: 7px; padding: 6px 8px; font-size: 12px; max-width: 200px; }
.acx-chip { border: 1px solid var(--app-tint-4); background: var(--app-tint-1); color: var(--app-fg-2); border-radius: 999px; padding: 5px 11px; font-size: 11.5px; font-weight: 600; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.acx-chip.on { background: rgba(244,121,32,.14); border-color: var(--mx-orange); color: var(--app-fg-1); }
.acx-chip .n { font-family: var(--mx-font-mono); font-size: 10.5px; color: var(--app-fg-4); }
.acx-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.acx-tbl th { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--app-fg-4); font-weight: 700; text-align: left; padding: 10px; border-bottom: 1px solid var(--app-tint-3); white-space: nowrap; }
.acx-tbl td { padding: 12px 10px; border-bottom: 1px solid var(--app-tint-3); vertical-align: middle; color: var(--app-fg-1); }
.acx-tbl td:first-child, .acx-tbl th:first-child { padding-left: 16px; }
.acx-tbl td:last-child, .acx-tbl th:last-child { padding-right: 16px; }
.acx-tbl tr.row { cursor: pointer; }
.acx-tbl tr.row:hover td { background: rgba(244,121,32,.05); }
.acx-tbl tr.sel td { background: rgba(244,121,32,.08); }
.acx-tbl tr.day td { padding: 14px 16px 6px; font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--app-fg-4); font-weight: 800; border-bottom: none; }
.acx-tbl td.q { min-width: 240px; }
.acx-tbl td.q .t { font-weight: 700; color: var(--app-fg-1); }
.acx-tbl td.q .sub { font-size: 11px; color: var(--app-fg-4); margin-top: 3px; }
.acx-tbl td.fl { width: 1%; }
.acx-tbl td.tok { font-family: var(--mx-font-mono); font-size: 12px; color: var(--app-fg-2); text-align: right; white-space: nowrap; }
.acx-tbl td.tok.z { color: var(--app-fg-4); }
.acx-tbl td.empty { padding: 30px; text-align: center; color: var(--app-fg-4); }
.acx .ty { display: inline-flex; gap: 5px; align-items: center; color: var(--app-fg-3); }
.acx .org { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--app-fg-4); }
.acx .org.kai { color: var(--mx-orange); }
.acx-brand { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.acx-brand b { font-weight: 700; color: var(--app-fg-1); }
.acx-brand .mk, .acx-drawer .mk { font-family: var(--mx-font-mono); font-size: 9.5px; font-weight: 700; padding: 1px 5px; border-radius: 4px; background: var(--app-tint-3); color: var(--app-fg-3); }
.acx-st { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .2px; white-space: nowrap; }
.acx-st.ok { background: rgba(34,197,94,.14); color: #15803d; }
.acx-st.run { background: rgba(244,121,32,.14); color: #F47920; }
.acx-st.warn { background: rgba(245,158,11,.16); color: #b45309; }
.acx-st.err { background: rgba(239,68,68,.14); color: #dc2626; }
.acx-st.gry { background: var(--app-tint-3); color: var(--app-fg-3); }
body[data-theme="dark"] .acx-st.ok, [data-theme="dark"] .acx-st.ok { color: #86efac; }
body[data-theme="dark"] .acx-st.warn, [data-theme="dark"] .acx-st.warn { color: #fbbf24; }
body[data-theme="dark"] .acx-st.err, [data-theme="dark"] .acx-st.err { color: #fca5a5; }
.acx-pulse { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: acx-p 1.4s ease-in-out infinite; display: inline-block; }
.acx-loading .acx-pulse { color: var(--mx-orange); width: 8px; height: 8px; }
@keyframes acx-p { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
/* Enviado → Amazon → Página */
.acx-flow { display: flex; align-items: flex-start; }
.acx-nd { position: relative; display: flex; flex-direction: column; align-items: center; width: 58px; flex: none; cursor: pointer; }
.acx-nd .c { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--app-tint-3); color: var(--app-fg-4); border: 1.5px solid var(--app-tint-4); transition: transform .12s; box-sizing: border-box; }
.acx-nd:hover .c { transform: scale(1.15); }
.acx-nd .lb { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--app-fg-4); margin-top: 4px; }
.acx-nd .tm { font-family: var(--mx-font-mono); font-size: 9.5px; color: var(--app-fg-4); margin-top: 1px; white-space: nowrap; }
.acx-nd.d .c { background: #22c55e; border-color: #22c55e; color: #0b1a10; }
.acx-nd.d .lb { color: var(--app-fg-2); }
.acx-nd.r .c { background: rgba(244,121,32,.18); border-color: #F47920; color: #F47920; }
.acx-nd.r .c::after { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #F47920; animation: acx-ring 1.6s ease-out infinite; box-sizing: border-box; }
@keyframes acx-ring { from { transform: scale(1); opacity: .7; } to { transform: scale(1.8); opacity: 0; } }
.acx-nd.r .lb { color: #F47920; }
.acx-nd.w .c { background: #f59e0b; border-color: #f59e0b; color: #1a1204; }
.acx-nd.w .lb { color: #f59e0b; }
.acx-nd.x .c { background: #ef4444; border-color: #ef4444; color: #fff; }
.acx-nd.x .lb { color: #ef4444; }
.acx-nd.na .c { background: transparent; border-style: dashed; }
.acx-flow .ln { flex: none; width: 40px; height: 2px; margin-top: 10px; background: var(--app-tint-4); border-radius: 1px; position: relative; overflow: hidden; }
.acx-flow .ln.d { background: #22c55e; }
.acx-flow .ln.x { background: #ef4444; }
.acx-flow .ln.r { background: rgba(244,121,32,.25); }
.acx-flow .ln.r::after { content: ''; position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: #F47920; animation: acx-flow 1.3s linear infinite; }
@keyframes acx-flow { to { left: 100%; } }
.acx-flow .ln.na { background: none; border-top: 1.5px dashed var(--app-tint-4); height: 0; }
.acx-nd .tip { display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 220px; z-index: 50; background: var(--app-surface); border: 1px solid var(--app-tint-4); border-radius: 9px; box-shadow: var(--app-shadow); padding: 9px 11px; text-align: left; font-size: 11.5px; color: var(--app-fg-2); line-height: 1.4; pointer-events: none; }
.acx-nd .tip b { display: block; color: var(--app-fg-1); font-size: 12px; margin-bottom: 2px; }
.acx-nd:hover .tip { display: block; }
/* campanita propia */
.acx-bellw { position: relative; }
.acx-bell { position: relative; }
.acx-bell .b { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; border-radius: 8px; background: #f59e0b; color: #12161b; font-size: 9.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 4px; font-family: var(--mx-font-mono); }
.acx-pop { position: absolute; right: 0; top: 40px; width: 360px; z-index: 320; background: var(--app-surface); border: 1px solid var(--app-tint-4); border-radius: 12px; box-shadow: var(--app-shadow); overflow: hidden; }
.acx-pop .ph { padding: 11px 14px; border-bottom: 1px solid var(--app-tint-3); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; font-weight: 800; color: var(--app-fg-3); }
.acx-pop .pe { padding: 14px; font-size: 12px; color: var(--app-fg-3); }
.acx-pop .pi { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--app-tint-3); cursor: pointer; font-size: 12px; }
.acx-pop .pi:hover { background: rgba(244,121,32,.05); }
.acx-pop .pi .d { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; margin-top: 4px; flex: none; }
.acx-pop .pi .d.err { background: #ef4444; }
.acx-pop .pi .tx { color: var(--app-fg-1); font-weight: 700; line-height: 1.3; }
.acx-pop .pi .tx small { display: block; color: var(--app-fg-4); font-weight: 500; margin-top: 2px; }
.acx-pop .pf { padding: 9px 14px; font-size: 11.5px; color: var(--mx-orange); font-weight: 700; cursor: pointer; }
/* detalle */
.acx-drawer-bg { position: fixed; inset: 0; background: rgba(0,0,0,.38); z-index: 300; display: flex; justify-content: flex-end; }
.acx-drawer { width: 480px; max-width: 94vw; height: 100%; overflow: auto; background: var(--app-surface); border-left: 1px solid var(--app-tint-4); animation: acx-dr .18s ease-out; }
@keyframes acx-dr { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.acx-drawer .top { padding: 16px 18px 14px; border-bottom: 1px solid var(--app-tint-3); }
.acx-drawer .top .k { font-size: 10px; text-transform: uppercase; letter-spacing: 1.3px; color: var(--app-fg-4); font-weight: 800; display: flex; gap: 6px; align-items: center; }
.acx-drawer .top h2 { margin: 6px 0 8px; font-family: var(--mx-font-display); font-size: 22px; letter-spacing: .3px; color: var(--app-fg-1); line-height: 1.15; }
.acx-drawer .blk { padding: 12px 18px; border-bottom: 1px solid var(--app-tint-3); }
.acx-drawer .blk h4 { margin: 0 0 10px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.1px; color: var(--app-fg-4); }
.acx-step { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.acx-step .rail { display: flex; flex-direction: column; align-items: center; height: 100%; }
.acx-step .rail i { width: 12px; height: 12px; border-radius: 50%; margin-top: 3px; flex: none; background: var(--app-tint-4); box-sizing: border-box; }
.acx-step .rail span { flex: 1; width: 2px; background: var(--app-tint-3); min-height: 16px; margin: 2px 0; }
.acx-step .rail i.d { background: #22c55e; }
.acx-step .rail i.r { background: #F47920; box-shadow: 0 0 0 3px rgba(244,121,32,.2); }
.acx-step .rail i.w { background: #f59e0b; }
.acx-step .rail i.x { background: #ef4444; }
.acx-step .rail i.na { background: transparent; border: 1.5px dashed var(--app-tint-5); }
.acx-step .t { font-size: 12.5px; font-weight: 700; color: var(--app-fg-1); padding-bottom: 12px; }
.acx-step .t small { display: block; font-weight: 500; font-size: 11.5px; color: var(--app-fg-3); margin-top: 2px; line-height: 1.4; }
.acx-step .h { font-family: var(--mx-font-mono); font-size: 11px; color: var(--app-fg-4); padding-top: 2px; }
.acx-drawer dl { display: grid; grid-template-columns: 110px 1fr; gap: 7px 10px; margin: 0; font-size: 12px; }
.acx-drawer dt { color: var(--app-fg-4); }
.acx-drawer dd { margin: 0; color: var(--app-fg-1); font-weight: 600; word-break: break-all; }
.acx-err { font-family: var(--mx-font-mono); font-size: 11px; color: var(--app-fg-2); background: var(--app-tint-1); border: 1px solid var(--app-tint-3); border-radius: 8px; padding: 8px 10px; line-height: 1.5; word-break: break-word; }
.acx-sku { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.acx-sku td, .acx-sku th { padding: 6px 4px; border-bottom: 1px solid var(--app-tint-3); text-align: left; }
.acx-sku th { font-size: 9.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--app-fg-4); }
.acx-sku td { color: var(--app-fg-2); font-family: var(--mx-font-mono); }
.acx-sku td.pg { font-family: inherit; }
.acx-drawer .foot { display: flex; gap: 8px; padding: 14px 18px 22px; flex-wrap: wrap; }
.acx-btn { border: 1px solid var(--app-tint-4); background: var(--app-tint-1); color: var(--app-fg-2); border-radius: 7px; padding: 6px 11px; font-size: 11.5px; font-weight: 600; cursor: pointer; display: inline-flex; gap: 5px; align-items: center; white-space: nowrap; }
.acx-btn:hover { border-color: var(--app-tint-6); }
.acx-btn.pri { background: var(--mx-orange); border-color: var(--mx-orange); color: #fff; }
.acx-btn[disabled] { opacity: .6; cursor: default; }
.acx-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 500; background: var(--app-fg-1); color: var(--app-bg); padding: 9px 16px; border-radius: 10px; font-size: 12.5px; font-weight: 600; box-shadow: var(--app-shadow); }

/* ── Catálogo (views-catalogo.jsx) ───────────────────────────────── */
.cat .ctn-btn, .cat-det .ctn-btn { display:inline-flex; align-items:center; gap:6px; }
.cat-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:14px 0 10px; }
.cat-head__info { flex:1; min-width:220px; display:flex; flex-direction:column; gap:2px; }
.cat-head__info b { color:var(--app-fg-1); font-size:13px; }
.cat-head__info span { color:var(--app-fg-3); font-size:11.5px; }
.cat-head__info .cat-head__aviso { color:var(--mx-orange); }
.cat > .ctn-cargabar { max-width:none; margin:-4px 0 10px; }
.cat-cargando { padding:60px 16px; display:flex; flex-direction:column; align-items:center; gap:14px; color:var(--app-fg-2); font-size:13px; }
.cat-cargando .ctn-cargabar { width:260px; flex:none; }
.cat-kpis { margin-bottom:12px; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); }
.cat-pipe { padding:12px 14px; margin-bottom:14px; }
.cat-pipe__h { 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-bottom:8px; }
.cat-etapas { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cat-etapa { display:flex; align-items:center; gap:7px; padding:8px 12px; border-radius:9px; background:var(--app-tint-2); border:1px solid var(--app-tint-3); }
.cat-etapa.is-cero { opacity:.5; }
.cat-etapa__dot { width:8px; height:8px; border-radius:50%; flex:none; }
.cat-etapa__k { font-size:11.5px; color:var(--app-fg-3); }
.cat-etapa__v { font-family:var(--mx-font-mono); font-size:14px; color:var(--app-fg-1); }
.cat-etapa small { font-size:10.5px; color:var(--app-fg-3); }
.cat-etapa__sep { color:var(--app-fg-4); flex:none; }
.cat-etapa--awd { margin-left:auto; border-color:rgba(139,92,246,.35); }
.cat-etapas.is-compacto { gap:4px; }
.cat-etapas.is-compacto .cat-etapa { padding:5px 8px; }
.cat-etapas.is-compacto .cat-etapa__v { font-size:12px; }
.cat-etapas.is-compacto .cat-etapa--awd { margin-left:0; }
.cat-tools { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.cat-search { flex:1; min-width:240px; display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:9px; background:var(--app-surface); border:1px solid var(--app-border); color:var(--app-fg-3); }
.cat-search input { flex:1; min-width:0; background:transparent; border:0; outline:0; color:var(--app-fg-1); font:inherit; font-size:13px; }
.cat-search button { background:none; border:0; color:var(--app-fg-3); cursor:pointer; display:flex; }
.cat-seg { margin-top:0; }
.cat-chips { margin-bottom:12px; }
/* Sin scroll horizontal en pantallas anchas: un contenedor con overflow rompe el
   encabezado pegajoso (sticky se queda dentro de él). En angostas, scroll. */
.cat-scroll { overflow-x:visible; }
@media (max-width: 1300px) { .cat-scroll { overflow-x:auto; } }
.cat-tabla .tbl thead th { position:sticky; top:var(--cat-top, 0px); z-index:5; background:var(--app-surface-2);
  box-shadow:0 1px 0 var(--app-border); }
.cat-tabla .tbl { min-width:860px; }
.cat-tabla .tbl th { letter-spacing:.4px; white-space:nowrap; font-size:10px; }
.cat-tabla .tbl td.num { white-space:nowrap; }
.cat-tabla.is-actualizando { opacity:.6; transition:opacity .2s; }
.cat-row { cursor:pointer; }
.cat-row td { vertical-align:middle; }
.cat-row .tag { white-space:nowrap; }
.cat-row.is-hijo td:first-child { padding-left:34px; }
.cat-row.is-open td { border-bottom-color:transparent; }
.cat-prod { display:flex; align-items:center; gap:12px; min-width:236px; max-width:360px; }
.cat-thumb { border-radius:9px; object-fit:contain; background:#fff; flex:none; border:1px solid var(--app-tint-3); }
.cat-thumb--vacio { display:flex; align-items:center; justify-content:center; background:var(--app-tint-4); color:var(--app-fg-4); }
.cat-prod__txt { min-width:0; display:flex; flex-direction:column; gap:5px; }
.cat-prod__title { color:var(--app-fg-1); font-size:12.5px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cat-prod__ids { display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.cat-id { display:inline-flex; align-items:center; gap:4px; padding:2px 7px; border-radius:6px; background:var(--app-tint-2); border:1px solid var(--app-tint-3); color:var(--app-fg-2); font-family:var(--mx-font-mono); font-size:10.5px; cursor:pointer; text-decoration:none; }
.cat-id:hover { color:var(--app-fg-1); border-color:rgba(244,121,32,.4); }
.cat-id--vacio { cursor:default; color:var(--app-fg-4); }
.cat-id--link { color:#60a5fa; }
.cat-id__k { color:var(--app-fg-4); font-size:9.5px; }
.cat-id__ok { color:#25d366; display:inline-flex; }
.cat-mkt { font-family:var(--mx-font-mono); font-size:10px; color:var(--app-fg-3); padding:2px 6px; border-radius:5px; border:1px solid var(--app-tint-3); }
.cat-fam { font-size:11px; color:var(--mx-orange); font-weight:600; }
.cat-err { display:inline-flex; align-items:center; gap:3px; margin-left:6px; color:hsl(0 72% 64%); font-family:var(--mx-font-mono); font-size:11px; }
.cat-camino { display:flex; flex-direction:column; align-items:flex-end; gap:1px; }
.cat-camino small { font-size:10px; color:var(--app-fg-3); white-space:nowrap; }
.cat-sug { display:flex; align-items:center; justify-content:flex-end; gap:6px; }
.cat-chev { width:28px; color:var(--app-fg-3); }
.cat-vacio { text-align:center; padding:30px; color:var(--app-fg-3); }
.cat-mas { display:block; width:100%; padding:12px; background:var(--app-tint-1); border:0; border-top:1px solid var(--app-border); color:var(--app-fg-2); font:inherit; font-size:12.5px; cursor:pointer; }
.cat-mas:hover { color:var(--app-fg-1); }
.cat-det-row > td { background:var(--app-tint-1); padding:0 !important; }
.cat-det { display:grid; grid-template-columns:1.1fr 1.2fr 1fr; gap:18px; padding:14px 16px 16px 34px; }
.cat-det__col { min-width:0; display:flex; flex-direction:column; gap:10px; }
.cat-det h5 { margin:0; font-family:var(--mx-font-display); font-size:10px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--app-fg-4); }
.cat-det__ids { display:flex; flex-wrap:wrap; gap:5px; }
.cat-det__meta { display:flex; flex-wrap:wrap; gap:10px; font-size:11.5px; color:var(--app-fg-3); }
.cat-det__links { display:flex; flex-wrap:wrap; gap:6px; }
.cat-det__nota { margin:0; font-size:11px; color:var(--app-fg-3); line-height:1.4; }
.cat-det__problema { display:flex; gap:8px; padding:9px 11px; border-radius:8px; background:rgba(245,158,11,.10); border:1px solid rgba(245,158,11,.3); color:var(--app-fg-1); font-size:12px; }
.cat-det__problema.is-error { background:rgba(239,68,68,.10); border-color:rgba(239,68,68,.35); }
.cat-det__problema p { margin:3px 0 0; color:var(--app-fg-2); font-size:11.5px; line-height:1.4; }
.cat-det__grid { display:grid; grid-template-columns:1fr auto; gap:5px 14px; font-size:12px; color:var(--app-fg-3); }
.cat-det__grid b { font-family:var(--mx-font-mono); color:var(--app-fg-1); text-align:right; font-weight:600; }
.cat-det__grid b.is-warn { color:var(--mx-orange); }
.cat-det__plan { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12px; color:var(--app-fg-2); padding-top:4px; }
.cat-det__plan b { color:var(--app-fg-1); }
.cat-envios { display:flex; flex-direction:column; gap:6px; max-height:260px; overflow-y:auto; }
.cat-envio { padding:8px 10px; border-radius:8px; background:var(--app-surface); border:1px solid var(--app-border); }
.cat-envio__top { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--app-fg-1); }
.cat-envio__top b { margin-left:auto; font-family:var(--mx-font-mono); }
.cat-envio__etapa { font-size:11.5px; font-weight:600; }
.cat-envio__etapa.is-preparando { color:#94a3b8; }
.cat-envio__etapa.is-en_camino { color:#60a5fa; }
.cat-envio__etapa.is-recibiendo { color:#f59e0b; }
.cat-envio__nom { font-size:11px; color:var(--app-fg-2); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cat-envio__fechas { font-size:10.5px; color:var(--app-fg-3); margin-top:2px; }
.cat-envio__fechas.is-tarde { color:hsl(0 72% 64%); }
@media (max-width: 900px) {
  .cat-det { grid-template-columns:1fr; padding-left:16px; }
  .cat-etapa--awd { margin-left:0; }
}

/* Cadena hacia FBA en cada renglón de Resurtido */
.fba-cadena { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; font-size:10.5px; color:var(--app-fg-3); }
.fba-cadena i { font-style:normal; color:var(--app-fg-4); margin:0 3px; }
.fba-cadena b { font-family:var(--mx-font-mono); color:var(--app-fg-2); font-weight:600; }

.cat-edad { display:flex; flex-direction:column; gap:7px; padding-top:6px; border-top:1px solid var(--app-tint-3); }
.cat-edad h5 small { font-family:var(--mx-font-sans); letter-spacing:0; text-transform:none; font-weight:400; color:var(--app-fg-4); margin-left:4px; }
.cat-edad__bar { display:flex; height:8px; border-radius:99px; overflow:hidden; background:var(--app-tint-3); }
.cat-edad__bar i { display:block; height:100%; }
.cat-edad__lista { display:flex; flex-wrap:wrap; gap:4px 10px; font-size:11px; color:var(--app-fg-3); }
.cat-edad__lista span { display:inline-flex; align-items:center; gap:4px; }
.cat-edad__lista span.is-cero { opacity:.5; }
.cat-edad__lista i { width:7px; height:7px; border-radius:50%; display:inline-block; }
.cat-edad__lista b { font-family:var(--mx-font-mono); color:var(--app-fg-1); font-weight:600; }

.cat-aviso { display:flex; gap:9px; align-items:flex-start; padding:10px 14px; margin-bottom:12px; border-radius:9px; background:rgba(234,179,8,.08); border:1px solid rgba(234,179,8,.3); color:var(--app-fg-2); font-size:12.5px; line-height:1.45; }
.cat-aviso b { color:var(--app-fg-1); }
.cat-congelado { display:block; margin-top:4px; font-size:10.5px; color:#eab308; white-space:nowrap; }

/* "Que KAI la haga" dentro de la tarea */
.kai-trabajo { border:1px solid rgba(244,121,32,.35); background:rgba(244,121,32,.06); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:10px; }
.kai-trabajo__head { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--app-fg-1); }
.kai-trabajo__head svg { color:#F47920; }
.kai-trabajo__fmt { margin-left:auto; font-size:10.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:#F47920; }
.kai-trabajo__plan { display:grid; grid-template-columns:max-content 1fr; gap:6px 14px; margin:0; font-size:12.5px; line-height:1.45; }
.kai-trabajo__plan dt { color:var(--app-fg-3); font-weight:600; }
.kai-trabajo__plan dd { margin:0; color:var(--app-fg-1); }
.kai-trabajo__acciones { display:flex; justify-content:flex-end; gap:8px; }
.kai-trabajo__estado { display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; font-size:12.5px; color:var(--app-fg-2); }
.kai-trabajo__nota { font-size:11.5px; color:var(--app-fg-4); }
.kai-trabajo__error { font-size:12px; color:#ef4444; }
.kai-trabajo__pregunta { display:flex; flex-direction:column; gap:8px; font-size:12.5px; line-height:1.45; color:var(--app-fg-1); background:#F2B5441a; border:1px solid #F2B54466; border-radius:8px; padding:10px 12px; }
.kai-trabajo__pregunta textarea { width:100%; resize:vertical; font:inherit; color:var(--app-fg-1); background:var(--app-surface-2); border:1px solid var(--app-border); border-radius:6px; padding:7px 9px; }
.kai-trabajo__toca { display:block; margin-top:4px; color:#b7791f; font-weight:600; }
.kai-trabajo__spin { width:12px; height:12px; border-radius:50%; border:2px solid rgba(244,121,32,.3); border-top-color:#F47920; display:inline-block; animation:kaiTrabajoSpin .8s linear infinite; flex:none; }
@keyframes kaiTrabajoSpin { to { transform:rotate(360deg); } }
.kai-trabajo__interno { flex-basis:100%; font-size:12px; color:var(--app-fg-2); border:1px solid var(--app-border); border-radius:8px; padding:7px 10px; }
.kai-trabajo__interno summary { cursor:pointer; font-weight:600; color:var(--app-fg-1); }
.kai-trabajo__interno dl { display:grid; grid-template-columns:max-content 1fr; gap:6px 14px; margin:8px 0 2px; line-height:1.45; }
.kai-trabajo__interno dt { color:var(--app-fg-3); font-weight:600; }
.kai-trabajo__interno dd { margin:0; color:var(--app-fg-1); }
.kai-trabajo__interno ul { margin:0; padding-left:16px; }
.kai-trabajo__interno pre { white-space:pre-wrap; font:inherit; margin:0 0 6px; padding:8px 10px; background:var(--app-surface-2); border-radius:6px; }
@media (max-width:560px) { .kai-trabajo__plan, .kai-trabajo__interno dl { grid-template-columns:1fr; } }

/* Catálogo v2: etapas como filtro, familia abierta, venta día por día */
.cat-pipe__h { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.cat-pipe__h span { font-family:var(--mx-font-sans); font-size:11.5px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--app-fg-3); }
button.cat-etapa { font:inherit; cursor:pointer; transition:border-color .12s, background .12s; }
button.cat-etapa:hover:not(:disabled) { border-color:rgba(244,121,32,.5); background:var(--app-tint-3); }
button.cat-etapa:disabled { cursor:default; }
.cat-etapa.is-on { border-color:var(--mx-orange); background:rgba(244,121,32,.14); box-shadow:0 0 0 1px var(--mx-orange) inset; }
.cat-etapa.is-on .cat-etapa__k { color:var(--app-fg-1); }

.cat-fam { display:inline-flex; align-items:center; gap:4px; padding:2px 8px 2px 5px; border-radius:6px; border:1px solid rgba(244,121,32,.35); background:rgba(244,121,32,.08); }
.cat-fam.is-open { background:var(--mx-orange); border-color:var(--mx-orange); color:#12161b; }
.cat-row--familia.is-open td { background:rgba(244,121,32,.07); border-bottom-color:transparent; }
.cat-row--familia.is-open td:first-child { box-shadow:inset 3px 0 0 var(--mx-orange); }
.cat-hijos-h td { padding:6px 16px 6px 34px !important; background:rgba(244,121,32,.07); box-shadow:inset 3px 0 0 var(--mx-orange);
  font-size:10.5px; letter-spacing:.8px; text-transform:uppercase; color:var(--app-fg-3); border-bottom:1px solid var(--app-tint-3); }
.cat-hijos-h td svg { vertical-align:-2px; margin-right:4px; color:var(--mx-orange); }
.cat-row.is-hijo td, .cat-det-row.is-hijo > td { background:rgba(244,121,32,.03); }
.cat-row.is-hijo td:first-child, .cat-det-row.is-hijo > td { box-shadow:inset 3px 0 0 rgba(244,121,32,.55); }
.cat-row.is-hijo.is-ultimo td, .cat-det-row.is-hijo.is-ultimo > td { border-bottom:2px solid rgba(244,121,32,.4); }
.cat-row.is-hijo td:first-child { padding-left:26px; }

.cat-vendidas { display:inline-flex; align-items:center; gap:5px; padding:3px 7px; margin-right:-7px; border-radius:6px; border:1px solid transparent;
  background:none; color:var(--app-fg-1); font:inherit; font-family:var(--mx-font-mono); cursor:pointer; }
.cat-vendidas svg { color:var(--app-fg-4); }
.cat-vendidas:hover { border-color:rgba(244,121,32,.45); background:rgba(244,121,32,.08); }
.cat-vendidas:hover svg { color:var(--mx-orange); }

.cat-modal__fondo { position:fixed; inset:0; z-index:300; background:rgba(5,7,10,.72); display:grid; place-items:center; padding:56px 20px; }
.cat-modal { width:min(880px, 94vw); max-height:calc(100vh - 112px); display:flex; flex-direction:column; background:var(--app-surface-2);
  border:1px solid var(--app-tint-4); border-radius:16px; box-shadow:0 22px 60px rgba(0,0,0,.5); color:var(--app-fg-2); }
.cat-modal__head { display:flex; justify-content:space-between; gap:16px; padding:20px 24px 14px; border-bottom:1px solid var(--app-tint-2); }
.cat-modal__eyebrow { font-family:var(--mx-font-mono); font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--app-fg-4); }
.cat-modal__titulo { font-size:15px; font-weight:700; color:var(--app-fg-1); margin-top:5px; line-height:1.35; }
.cat-modal__sub { font-family:var(--mx-font-mono); font-size:11px; color:var(--app-fg-3); margin-top:3px; }
.cat-modal__x { background:none; border:0; color:var(--app-fg-3); cursor:pointer; padding:4px; height:28px; border-radius:6px; }
.cat-modal__x:hover { background:var(--app-tint-3); color:var(--app-fg-1); }
.cat-modal__cuerpo { overflow-y:auto; padding:16px 24px 20px; display:flex; flex-direction:column; gap:12px; }
.cat-venta__stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:8px; }
.cat-venta__stats div { padding:9px 11px; border-radius:9px; background:var(--app-tint-2); border:1px solid var(--app-tint-3); display:flex; flex-direction:column; gap:3px; }
.cat-venta__stats span { font-size:10.5px; color:var(--app-fg-3); }
.cat-venta__stats b { font-family:var(--mx-font-mono); font-size:14px; color:var(--app-fg-1); }
.cat-venta__stats b.is-mal { color:hsl(0 72% 64%); }
.cat-venta__leyenda { display:flex; gap:16px; font-size:11.5px; color:var(--app-fg-3); }
.cat-venta__leyenda span { display:inline-flex; align-items:center; gap:6px; }
.cat-venta__leyenda .sw-barra { width:10px; height:10px; border-radius:2px; background:var(--mx-orange); }
.cat-venta__leyenda .sw-linea { width:16px; height:0; border-top:2px dashed var(--app-fg-2); }
.cat-venta__graf { position:relative; }
.cat-g__grid { stroke:var(--app-tint-3); stroke-width:1; }
.cat-g__base { stroke:var(--app-tint-4); stroke-width:1; }
.cat-g__eje { fill:var(--app-fg-4); font-size:10px; font-family:var(--mx-font-mono); }
.cat-g__barra { fill:var(--mx-orange); opacity:.85; }
.cat-g__barra.is-hover { opacity:1; }
.cat-g__proy { stroke:var(--app-fg-2); stroke-width:2; stroke-dasharray:5 4; }
.cat-g__hoy { stroke:var(--app-fg-4); stroke-width:1; stroke-dasharray:2 3; }
.cat-g__fin { stroke:hsl(0 72% 64%); stroke-width:1.5; stroke-dasharray:3 3; }
.cat-g__etq { fill:hsl(0 72% 64%); font-size:10.5px; font-weight:600; }
.cat-g__tip { position:absolute; top:0; transform:translateX(-50%); pointer-events:none; padding:6px 9px; border-radius:7px;
  background:var(--app-surface); border:1px solid var(--app-tint-4); box-shadow:0 6px 18px rgba(0,0,0,.35);
  display:flex; flex-direction:column; gap:2px; font-size:11px; color:var(--app-fg-2); white-space:nowrap; }
.cat-g__tip b { color:var(--app-fg-1); }
.cat-tabla .tbl th.num { white-space:normal; line-height:1.25; }
.cat-row td.num { padding-left:8px; padding-right:8px; }
/* Botón KAI en cada tarea: naranja si la puede hacer, gris si no */
.metapill--kai { flex-direction:row; align-items:center; justify-content:center; gap:6px; padding:6px 14px; cursor:not-allowed; background:var(--app-tint-1); border-color:var(--app-tint-3); color:var(--app-fg-4); }
.metapill--kai .metapill__label { color:var(--app-fg-4); font-size:11px; letter-spacing:1.5px; }
.metapill--kai.is-on { cursor:pointer; background:#F47920; border-color:#F47920; color:#0D1826; }
.metapill--kai.is-on .metapill__label { color:#0D1826; font-weight:700; }
.metapill--kai.is-on:hover { background:#ff8a33; border-color:#ff8a33; }
.acx-lnk { color: var(--mx-orange); font-family: inherit; font-weight: 600; text-decoration: none; display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; }
.acx-lnk:hover { text-decoration: underline; }
/* Empezar de cero sin modal: el avance y el resultado viven arriba de la barra de selección */
.ctn-cero-aviso{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:63;display:flex;gap:10px;align-items:flex-start;
  max-width:min(720px,calc(100vw - 32px));padding:12px 14px;border-radius:12px;background:var(--card,#161b22);
  border:1px solid rgba(63,185,80,.45);color:var(--app-fg,#e6edf3);font-size:12.5px;line-height:1.5;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.ctn-cero-aviso.mal{border-color:rgba(248,81,73,.55)}
.ctn-cero-aviso > svg{flex:none;margin-top:2px;color:#3fb950}
.ctn-cero-aviso.mal > svg{color:#f85149}
.ctn-notaavz{font-size:12px;color:var(--app-fg-2,#8b95a5)}
.ctn-notaavz > summary{cursor:pointer;list-style:none;padding:2px 0}
.ctn-notaavz > summary::-webkit-details-marker{display:none}
.ctn-notaavz > summary::before{content:'▸ ';}
.ctn-notaavz[open] > summary::before{content:'▾ ';}

/* ── Admin → Usuarios y accesos (perfiles + qué ve / qué mueve / plataforma) ── */
.uadm-tabs{display:flex;gap:6px;margin-bottom:14px;align-items:center;flex-wrap:wrap}
.uadm-tabs .sp{flex:1}
.uadm-tab{border:1px solid var(--app-tint-4);background:var(--app-tint-1);color:var(--app-fg-2);border-radius:9px;padding:7px 14px;font-size:12.5px;font-weight:700;cursor:pointer;display:inline-flex;gap:7px;align-items:center;text-transform:none}
.uadm-tab.on{background:var(--mx-orange);border-color:var(--mx-orange);color:#fff}
.uadm-tab .n{font-family:var(--mx-font-mono);font-size:10.5px;opacity:.75}
.uadm-ask{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.uadm-ask .l{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--app-fg-4);margin-right:4px}
.uadm-chip{border:1px solid var(--app-tint-4);background:var(--app-tint-1);color:var(--app-fg-2);border-radius:999px;padding:5px 11px;font-size:11.5px;font-weight:600;cursor:pointer;text-transform:none}
.uadm-chip.on{background:rgba(244,121,32,.14);border-color:var(--mx-orange);color:var(--app-fg-1)}
.uadm-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.uadm-tbl th{font-size:9.5px;text-transform:uppercase;letter-spacing:1px;color:var(--app-fg-4);font-weight:800;text-align:left;padding:10px 6px;border-bottom:1px solid var(--app-tint-3);white-space:nowrap;vertical-align:bottom}
.uadm-tbl th.ac{text-align:center;width:66px;white-space:normal;line-height:1.25;padding-left:4px;padding-right:4px}
.uadm-tbl th.grp{text-align:center;border-bottom:none;padding-bottom:0;color:var(--mx-orange)}
.uadm-tbl td{padding:10px 6px;border-bottom:1px solid var(--app-tint-3);vertical-align:middle;color:var(--app-fg-1)}
.uadm-tbl td.ac{text-align:center}
.uadm-tbl tr.row{cursor:pointer}
.uadm-tbl tr.row:hover td{background:rgba(244,121,32,.05)}
.uadm-tbl tr.dim td{opacity:.35}
.uadm-tbl td:first-child,.uadm-tbl th:first-child{padding-left:16px}
.uadm-tbl td:last-child,.uadm-tbl th:last-child{padding-right:16px}
.uadm-who{display:flex;gap:10px;align-items:center}
.uadm-av{width:32px;height:32px;border-radius:50%;background:#33415a;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:800;flex:none}
.uadm-av.cl{background:rgba(244,121,32,.2);color:var(--mx-orange)}
.uadm-nm{font-weight:700}
.uadm-sub{font-size:11px;color:var(--app-fg-4);margin-top:1px}
.uadm-who .uadm-sub{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uadm-prof{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:8px;font-size:11px;font-weight:800;background:var(--app-tint-3);color:var(--app-fg-2);white-space:nowrap}
.uadm-prof.dir{background:rgba(244,121,32,.16);color:var(--mx-orange)}
.uadm-prof.none{background:rgba(245,158,11,.14);color:#b45309}
.uadm-prof i{font-style:normal;font-weight:600;color:var(--app-fg-4)}
.uadm-yes{color:#16a34a}.uadm-no{color:var(--app-tint-5)}
[data-theme="dark"] .uadm-yes{color:#4ade80}
[data-theme="dark"] .uadm-prof.none{color:#fbbf24}
.uadm-mk{font-family:var(--mx-font-mono);font-size:10px;font-weight:700;padding:1px 5px;border-radius:4px;background:var(--app-tint-3);color:var(--app-fg-3);margin-right:3px}
.uadm-ib{border:1px solid var(--app-tint-4);background:var(--app-tint-2);color:var(--app-fg-2);border-radius:7px;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;margin-left:4px;padding:0}
.uadm-ib.danger{color:#ef4444}
/* editor */
.uadm-ov{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:300;display:flex;align-items:center;justify-content:center;padding:20px}
/* Portaled to <body>, outside .main's zoom (which inflates vh). The card
   carries the same 1.18 itself so type matches the app, and divides its own
   viewport limits by it: 56px of air top and bottom, header and footer fixed. */
.uadm-mc{zoom:1.18;width:1060px;max-width:calc((100vw - 40px) / 1.18);max-height:calc((100vh - 112px) / 1.18);display:flex;flex-direction:column;background:var(--app-surface);border:1px solid var(--app-tint-4);border-radius:14px;box-shadow:var(--app-shadow);overflow:hidden}
.uadm-mh,.uadm-mf{flex:none}
.uadm-mh{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--app-tint-3)}
.uadm-mh .k{font-family:var(--mx-font-display);font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--app-fg-4)}
.uadm-mh .t{font-size:18px;font-weight:800;color:var(--app-fg-1);margin-top:2px}
.uadm-mh .sp{flex:1}
.uadm-mf{display:flex;gap:8px;justify-content:flex-end;align-items:center;padding:12px 20px;border-top:1px solid var(--app-tint-3)}
.uadm-mf .sp{flex:1;font-size:11.5px;color:var(--app-fg-4)}
.uadm-ue{display:grid;grid-template-columns:290px minmax(0,1fr);grid-template-rows:minmax(0,1fr);flex:1 1 auto;min-height:0;overflow:hidden}
.uadm-l{padding:18px;border-right:1px solid var(--app-tint-3);display:flex;flex-direction:column;gap:12px;overflow:auto}
.uadm-r{padding:16px 20px;overflow:auto;display:flex;flex-direction:column;gap:16px}
.uadm-lab{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--app-fg-4);margin-bottom:5px}
.uadm-in{width:100%;box-sizing:border-box;border:1px solid var(--app-tint-4);background:var(--app-tint-1);color:var(--app-fg-1);border-radius:8px;padding:8px 10px;font-size:12.5px}
.uadm-profs{display:flex;flex-direction:column;gap:6px}
.uadm-pf{border:1px solid var(--app-tint-4);border-radius:10px;padding:9px 11px;cursor:pointer;background:var(--app-tint-1);text-align:left;text-transform:none}
.uadm-pf b{display:block;font-size:12.5px;color:var(--app-fg-1)}
.uadm-pf span{font-size:11px;color:var(--app-fg-4);line-height:1.35;display:block;margin-top:2px}
.uadm-pf.on{border-color:var(--mx-orange);background:rgba(244,121,32,.08);box-shadow:inset 3px 0 0 var(--mx-orange)}
.uadm-blk{border:1px solid var(--app-tint-3);border-radius:12px;overflow:hidden;flex:none}
.uadm-bh{display:flex;align-items:center;gap:9px;padding:10px 14px;background:var(--app-tint-1);border-bottom:1px solid var(--app-tint-3)}
.uadm-bh h4{margin:0;font-family:var(--mx-font-display);font-size:13px;letter-spacing:.8px;text-transform:uppercase;color:var(--app-fg-1)}
.uadm-bh .q{font-size:11.5px;color:var(--app-fg-4)}
.uadm-bb{padding:12px 14px;display:flex;flex-direction:column;gap:12px}
.uadm-row{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px;align-items:start}
.uadm-row>.k{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--app-fg-4);padding-top:6px}
.uadm-acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.uadm-act{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--app-tint-3);border-radius:10px;padding:10px 12px;cursor:pointer}
.uadm-act:hover{border-color:var(--app-tint-5)}
.uadm-act.on{border-color:rgba(34,197,94,.55);background:rgba(34,197,94,.06)}
.uadm-act.lock{cursor:not-allowed;opacity:.75}
.uadm-act .tx{flex:1;min-width:0}
.uadm-act .tx b{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;font-size:12.5px;color:var(--app-fg-1)}
.uadm-act .tx span{display:block;font-size:11px;color:var(--app-fg-4);line-height:1.4;margin-top:2px}
.uadm-act .tx em{font-style:normal;display:inline-block;margin-top:4px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--mx-orange)}
.uadm-risk{white-space:nowrap;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;padding:1px 6px;border-radius:5px}
.uadm-risk.money{background:rgba(239,68,68,.14);color:#dc2626}
.uadm-risk.list{background:rgba(245,158,11,.16);color:#b45309}
[data-theme="dark"] .uadm-risk.money{color:#fca5a5}[data-theme="dark"] .uadm-risk.list{color:#fbbf24}
.uadm-sw{width:34px;height:20px;border-radius:10px;background:var(--app-tint-4);position:relative;flex:none;margin-top:1px;transition:background .12s}
.uadm-sw::after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .12s}
.uadm-sw.on{background:#22c55e}.uadm-sw.on::after{left:17px}
.uadm-sum{border-radius:12px;padding:12px 14px;background:rgba(244,121,32,.06);border:1px solid rgba(244,121,32,.35);font-size:12.5px;line-height:1.6;color:var(--app-fg-2)}
.uadm-sum b{color:var(--app-fg-1)}
.uadm-sum .h{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.1px;color:var(--mx-orange);margin-bottom:4px}
.uadm-mod{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--mx-orange);margin-left:6px}
.uadm-secg{display:flex;flex-direction:column;gap:6px}
.uadm-secg .gl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--app-fg-4)}
.uadm-c{display:flex;flex-wrap:wrap;gap:6px}
.uadm-c button{border:1px solid var(--app-tint-4);background:var(--app-tint-1);color:var(--app-fg-3);border-radius:999px;padding:5px 11px;font-size:11.5px;font-weight:600;cursor:pointer;text-transform:none}
.uadm-c button.on{background:rgba(244,121,32,.14);border-color:var(--mx-orange);color:var(--app-fg-1)}
.uadm-seg{display:inline-flex;border:1px solid var(--app-tint-4);border-radius:8px;overflow:hidden}
.uadm-seg button{border:none;background:var(--app-tint-1);color:var(--app-fg-3);padding:5px 11px;font-size:11.5px;font-weight:700;cursor:pointer;text-transform:none}
.uadm-seg button.on{background:var(--mx-orange);color:#fff}
.uadm-pfgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.uadm-pfcard{padding:14px 16px}
.uadm-pfcard h3{margin:0;font-family:var(--mx-font-display);font-size:17px;letter-spacing:.4px;text-transform:uppercase;color:var(--app-fg-1)}
.uadm-pfcard .d{font-size:12px;color:var(--app-fg-3);margin:4px 0 10px;line-height:1.45}
.uadm-pfcard ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;font-size:12px}
.uadm-pfcard li{display:flex;gap:7px;align-items:center;color:var(--app-fg-2)}
.uadm-pfcard li.no{color:var(--app-fg-4)}
.uadm-pfcard .who{margin-top:12px;font-size:11px;color:var(--app-fg-4)}
@media (max-width: 900px){ .uadm-ue{grid-template-columns:1fr;overflow:auto} .uadm-acts{grid-template-columns:1fr} }

/* ── Tareas · carriles (Ro 14/10) ─────────────────────────────────────── */
.bnd-lanes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 6px 0 4px; }
.bnd-lanes--kai { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.1fr); }
.bnd-lane { border: 1px solid var(--app-tint-3); background: var(--app-surface); border-radius: 12px; padding: 12px 14px; cursor: pointer; text-align: left; color: var(--app-fg-2); font: inherit; }
.bnd-lane:hover { border-color: var(--app-tint-5); }
.bnd-lane.is-on { border-color: var(--mx-orange); box-shadow: 0 0 0 3px rgba(244,121,32,.14); }
.bnd-lane__label { display: flex; gap: 7px; align-items: center; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.bnd-lane--semanal .bnd-lane__label, .bnd-lane--kai .bnd-lane__label { color: var(--mx-orange); }
.bnd-lane--whatsapp .bnd-lane__label { color: #16a34a; }
.bnd-lane--interna .bnd-lane__label { color: #6366f1; }
.bnd-lane--prospecto .bnd-lane__label { color: var(--app-fg-4); }
[data-theme="dark"] .bnd-lane--whatsapp .bnd-lane__label { color: #4ade80; }
[data-theme="dark"] .bnd-lane--interna .bnd-lane__label { color: #a5b4fc; }
.bnd-lane--kai { background: linear-gradient(135deg, rgba(244,121,32,.10), transparent 70%), var(--app-surface); }
.bnd-lane__nums { display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: 22px; margin-top: 6px; }
.bnd-lane__nums div { display: flex; flex-direction: column; min-width: 0; }
.bnd-lane__nums b { font-family: var(--mx-font-display); font-size: 34px; font-weight: 800; color: var(--app-fg-1); line-height: 1.05; }
.bnd-lane__nums span { font-size: 10.5px; color: var(--app-fg-4); text-transform: uppercase; letter-spacing: .2px; font-weight: 700; white-space: nowrap; }
.bnd-lane__kai { margin-top: 8px; font-size: 12.5px; color: var(--app-fg-3); display: flex; gap: 5px; align-items: center; }
.bnd-lane__kai b { color: var(--mx-orange); }
.bnd-day { font-size: 12px; text-transform: uppercase; letter-spacing: 1.3px; color: var(--app-fg-4); font-weight: 800; margin: 10px 2px 8px; display: flex; align-items: center; gap: 10px; }
.bnd-day::after { content: ""; flex: 1; height: 1px; background: var(--app-tint-3); }
.bandeja-group__brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 1 auto; }
.bandeja-group__head .bandeja-group__meta { flex-wrap: wrap; row-gap: 2px; }
.bandeja-group__head .bandeja-group__meta > span { white-space: nowrap; }
.bnd-swatch { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #0A111A; flex: none; }
.bandeja-group__brandname { font-family: var(--mx-font-display); font-size: 28px; font-weight: 800; letter-spacing: .3px; color: var(--app-fg-1); line-height: 1.1; text-transform: uppercase; }
.bandeja-group__subname { font-size: 13px; font-weight: 600; color: var(--app-fg-3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px; }
.bandeja-group__foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--app-tint-3); background: var(--app-tint-1); font-size: 13px; color: var(--app-fg-3); border-radius: 0 0 12px 12px; }
.bnd-kai__gasto { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--app-fg-3); margin: 10px 2px 0; flex-wrap: wrap; }
.bnd-kai__gasto b { color: var(--app-fg-1); }
.bnd-kai__bar { flex: 0 0 200px; height: 6px; border-radius: 3px; background: var(--app-tint-3); overflow: hidden; }
.bnd-kai__bar i { display: block; height: 100%; background: #22c55e; }
.bnd-kj { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; border: 1px solid var(--app-tint-3); background: var(--app-surface); border-radius: 12px; padding: 12px 16px; margin-bottom: 8px; }
.bnd-kj__ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: var(--app-tint-6); }
.bnd-kj--ok .bnd-kj__ic { background: #22c55e; }
.bnd-kj--run .bnd-kj__ic { background: var(--mx-orange); }
.bnd-kj--warn .bnd-kj__ic { background: #f59e0b; }
.bnd-kj__t { font-weight: 700; font-size: 13px; color: var(--app-fg-1); }
.bnd-kj__sub { font-size: 11.5px; color: var(--app-fg-4); margin-top: 3px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.bnd-kj__brand { font-weight: 700; color: var(--app-fg-2); background: var(--app-tint-2); border-radius: 6px; padding: 1px 7px; }
.bnd-kj__q { margin-top: 8px; font-size: 12px; color: var(--app-fg-2); background: rgba(245,158,11,.08); border-left: 3px solid #f59e0b; border-radius: 0 8px 8px 0; padding: 8px 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bnd-kj__q input { flex: 1; min-width: 160px; border: 1px solid var(--app-tint-4); background: var(--app-surface); color: var(--app-fg-1); border-radius: 7px; padding: 6px 9px; font-size: 12px; }
.bnd-kj__act { display: flex; gap: 6px; align-items: center; }
.bnd-kj__run { width: 120px; height: 5px; border-radius: 3px; background: var(--app-tint-3); overflow: hidden; }
.bnd-kj__run i { display: block; height: 100%; width: 40%; background: var(--mx-orange); animation: bndkj 1.6s ease-in-out infinite; }
@keyframes bndkj { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
@media (max-width: 900px) {
  .bnd-lanes, .bnd-lanes--kai { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bnd-kj { grid-template-columns: 34px minmax(0, 1fr); }
  .bnd-kj__act { grid-column: 2; }
}

/* Tareas: texto más grande dentro de la bandeja (Ro 14/10: "los textos se ven muy chiquitos") */
.bandeja .bandeja-group__head .bandeja-group__meta { font-size: 13px; }
.bandeja .bandeja-group__title { font-size: 16px; }
.bandeja .pending-card__title { font-size: 15.5px; line-height: 1.4; }
.bandeja .pending-card__desc { font-size: 13.5px; line-height: 1.5; }
.bandeja .pending-chip { font-size: 12px; }
.bandeja .pending-card__ai-notes { font-size: 12.5px; }
.bandeja .bandeja-block__head { font-size: 12.5px; }
.bandeja .pending-btn { font-size: 12.5px; }
.bandeja .bandeja-group__foot .btn { font-size: 13px; padding: 7px 14px; }
.bnd-rev { display: flex; align-items: center; gap: 12px; margin: 2px 0 0; }
.bnd-rev__st { font-size: 13px; color: var(--app-fg-3); }
.bnd-rev__st b { color: var(--app-fg-1); }
.bnd-rev__btn { display: inline-flex; align-items: center; gap: 9px; background: var(--mx-orange); color: #fff; border: none; border-radius: 11px; padding: 11px 18px; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; box-shadow: 0 6px 18px rgba(244,121,32,.28); }
.bnd-rev__btn:hover { filter: brightness(1.06); }
.bnd-rev__btn[disabled] { opacity: .85; cursor: default; }
.bnd-rev__btn.is-run svg { animation: bndspin 1s linear infinite; }
@keyframes bndspin { to { transform: rotate(360deg); } }
/* Tareas: fila con ✓ / – / ✗ y detalle al picar el título */
.ptr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 12px 14px; border: 1px solid var(--app-tint-3); border-radius: 12px; background: var(--app-surface); margin: 0 0 8px; transition: opacity .15s, background .15s; }
.ptr--marca { border-left: 3px solid #eab308; }
.ptr--approved, .ptr--modified { background: rgba(34,197,94,.06); border-color: rgba(34,197,94,.35); }
.ptr--discarded { opacity: .55; }
.ptr--discarded .ptr__title { text-decoration: line-through; }
.ptr__tri { display: inline-flex; border: 1px solid var(--app-tint-4); border-radius: 10px; overflow: hidden; flex: none; margin-top: 1px; }
.ptr__b { width: 36px; height: 34px; display: grid; place-items: center; background: var(--app-tint-1); border: none; color: var(--app-fg-4); cursor: pointer; font-size: 18px; font-weight: 800; line-height: 1; }
.ptr__b + .ptr__b { border-left: 1px solid var(--app-tint-4); }
.ptr__b:hover { background: var(--app-tint-3); color: var(--app-fg-1); }
.ptr__b--ok { color: #22c55e; }
.ptr__b--ok:hover, .ptr__b--done:hover { background: rgba(34,197,94,.14); color: #22c55e; }
.ptr__b--no:hover { background: rgba(239,68,68,.14); color: #ef4444; }
.ptr__b--ok.is-on, .ptr__b--done.is-on { background: #22c55e; color: #fff; }
.ptr__b--no.is-on { background: #ef4444; color: #fff; }
.ptr__title { all: unset; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; font-size: 15.5px; font-weight: 700; color: var(--app-fg-1); line-height: 1.4; }
.ptr__title:hover { color: var(--mx-orange); }
.ptr__title svg { color: var(--app-fg-4); flex: none; }
.ptr__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; align-items: center; }
.ptr__chips .pending-chip { font-size: 12px; }
.ptr__state { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 6px; }
.ptr__state--ok { color: #16a34a; background: rgba(34,197,94,.12); }
.ptr__state--no { color: #ef4444; background: rgba(239,68,68,.10); }
[data-theme="dark"] .ptr__state--ok { color: #86efac; }
.ptr__detail { margin-top: 10px; padding: 12px 14px; border-radius: 10px; background: var(--app-tint-1); border: 1px solid var(--app-tint-3); font-size: 13.5px; color: var(--app-fg-2); line-height: 1.55; }
.ptr__detail p { margin: 0 0 10px; color: var(--app-fg-1); opacity: 1; }
.ptr__src { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 13px; color: var(--app-fg-3); }
.ptr__src b { color: var(--app-fg-1); }
.ptr__src a { color: var(--mx-orange); font-weight: 700; }
.ptr__quote { margin: 10px 0 0; padding: 8px 12px; border-left: 3px solid var(--mx-orange); background: rgba(244,121,32,.06); border-radius: 0 8px 8px 0; font-style: italic; color: var(--app-fg-1); }
.ptr__quote span { display: block; font-style: normal; font-size: 12px; color: var(--app-fg-4); margin-top: 4px; }
.ptr__note { margin-top: 8px; display: flex; gap: 6px; align-items: flex-start; font-size: 13px; }
.ptr__note--warn { color: #d97706; }
.ptr__btns { display: flex; gap: 8px; margin-top: 10px; }
.ptr__act { display: flex; gap: 6px; align-items: center; }
@media (max-width: 760px) { .ptr { grid-template-columns: auto minmax(0, 1fr); } .ptr__act { grid-column: 2; } }
/* ── Gasto IA (Admin → Gasto IA, opción B) ── */
.gia-bar { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding: 12px 16px; margin-bottom: 14px; }
.gia-grp { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.gia-lbl { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--app-fg-4); margin-right: 2px; }
.gia-chip { border: 1px solid var(--app-tint-4); background: var(--app-tint-1); color: var(--app-fg-2); border-radius: 999px; padding: 5px 11px; font-size: 11.5px; font-weight: 600; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; font-family: inherit; }
.gia-chip.on { background: rgba(244,121,32,.14); border-color: var(--mx-orange); color: var(--app-fg-1); }
.gia-chip .sw { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.gia-date { background: var(--app-tint-1); border: 1px solid var(--app-tint-4); color: var(--app-fg-1); border-radius: 8px; padding: 4px 8px; font-size: 12px; font-family: var(--mx-font-mono); color-scheme: dark; }
[data-theme="light"] .gia-date { color-scheme: light; }
.gia-sp { flex: 1; }
.gia-dd { position: relative; }
.gia-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; background: var(--app-surface); border: 1px solid var(--app-tint-4); border-radius: 10px; box-shadow: var(--app-shadow); padding: 8px; min-width: 240px; max-height: 340px; overflow: auto; }
.gia-menu label { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 6px; font-size: 12px; color: var(--app-fg-1); cursor: pointer; }
.gia-menu label:hover { background: var(--app-tint-2); }
.gia-menu .h { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--app-fg-4); padding: 8px 8px 4px; }
.gia-menu .acts { display: flex; gap: 10px; padding: 4px 8px 8px; border-bottom: 1px solid var(--app-tint-3); margin-bottom: 4px; }
.gia-menu .acts button { background: none; border: none; color: var(--mx-orange); font-size: 11px; font-weight: 700; cursor: pointer; padding: 0; font-family: inherit; }
.gia-menu .c { margin-left: auto; font-family: var(--mx-font-mono); font-size: 10.5px; color: var(--app-fg-4); }
.gia-kpis { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.gia-kpi { padding: 14px 16px; }
.gia-kpi .k { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--app-fg-4); }
.gia-kpi .v { font-family: var(--mx-font-display); font-size: 30px; font-weight: 800; color: var(--app-fg-1); line-height: 1.1; margin-top: 4px; }
.gia-kpi .v small { font-size: 15px; color: var(--app-fg-4); font-weight: 700; }
.gia-kpi .s { font-size: 11.5px; color: var(--app-fg-3); margin-top: 3px; }
.gia-prow { display: flex; justify-content: space-between; margin-top: 6px; }
.gia-prow i, .gia-legend i, .gia-tip i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }
.gia-prow b { font-family: var(--mx-font-mono); color: var(--app-fg-1); }
.gia-meter { height: 9px; border-radius: 5px; background: var(--app-tint-3); overflow: hidden; margin-top: 9px; position: relative; }
.gia-meter i { display: block; height: 100%; border-radius: 5px; }
.gia-meter b { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--app-fg-3); }
.gia-hd { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; flex-wrap: wrap; }
.gia-hd h3 { margin: 0; font-size: 13px; font-weight: 800; color: var(--app-fg-1); }
.gia-sub { font-size: 11px; color: var(--app-fg-4); font-weight: 500; margin-top: 1px; }
.gia-chart { padding: 6px 16px 12px; }
.gia-chart svg text { fill: var(--app-fg-4); font-size: 10px; font-family: var(--mx-font-mono); }
.gia-chart svg line.grid { stroke: var(--app-tint-3); }
.gia-legend { display: flex; gap: 14px; flex-wrap: wrap; padding: 0 16px 12px; font-size: 11.5px; color: var(--app-fg-2); }
.gia-legend b { font-family: var(--mx-font-mono); font-size: 11px; color: var(--app-fg-1); }
.gia-tip { position: fixed; z-index: 600; pointer-events: none; background: var(--app-surface); border: 1px solid var(--app-tint-4); border-radius: 8px; padding: 8px 10px; font-size: 11.5px; color: var(--app-fg-1); box-shadow: var(--app-shadow); min-width: 160px; }
.gia-tip > div { display: flex; justify-content: space-between; gap: 14px; }
.gia-tip .m { font-family: var(--mx-font-mono); }
.gia-tip .t { border-top: 1px solid var(--app-tint-3); margin-top: 4px; padding-top: 4px; font-weight: 700; }
.gia-seg { display: inline-flex; border: 1px solid var(--app-tint-4); border-radius: 8px; overflow: hidden; }
.gia-seg button { background: var(--app-tint-1); border: none; color: var(--app-fg-2); padding: 6px 11px; font-size: 11.5px; font-weight: 700; cursor: pointer; border-right: 1px solid var(--app-tint-4); font-family: inherit; }
.gia-seg button:last-child { border-right: none; }
.gia-seg button.on { background: var(--mx-orange); color: #fff; }
.gia-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.gia-tbl th { font-size: 9.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--app-fg-4); font-weight: 800; text-align: right; padding: 10px; border-bottom: 1px solid var(--app-tint-3); white-space: nowrap; cursor: pointer; user-select: none; }
.gia-tbl th:first-child { text-align: left; }
.gia-tbl th.on { color: var(--mx-orange); }
.gia-tbl td { padding: 10px; border-bottom: 1px solid var(--app-tint-3); color: var(--app-fg-1); text-align: right; font-family: var(--mx-font-mono); font-size: 12px; white-space: nowrap; }
.gia-tbl td:first-child { text-align: left; font-family: inherit; font-size: 12.5px; font-weight: 700; }
.gia-tbl td:first-child, .gia-tbl th:first-child { padding-left: 16px; }
.gia-tbl td:last-child, .gia-tbl th:last-child { padding-right: 16px; }
.gia-tbl td.z { color: var(--app-fg-4); opacity: .5; }
.gia-tbl td.tot { font-weight: 800; }
.gia-tbl tr.r { cursor: pointer; }
.gia-tbl tr.r:hover td { background: rgba(244,121,32,.05); }
.gia-tbl tr.sub td { background: var(--app-tint-1); font-size: 11.5px; color: var(--app-fg-2); }
.gia-tbl tr.sub td:first-child { font-weight: 600; padding-left: 40px; }
.gia-tbl tfoot td { border-top: 2px solid var(--app-tint-4); border-bottom: none; font-weight: 800; }
.gia-heat { position: relative; }
.gia-heat::before { content: ""; position: absolute; inset: 4px; border-radius: 5px; background: var(--mx-orange); opacity: var(--a, 0); }
.gia-heat span { position: relative; }
.gia-who { display: inline-flex; gap: 9px; align-items: center; }
.gia-av { width: 26px; height: 26px; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; flex: none; }
.gia-av.sm { width: 18px; height: 18px; font-size: 9px; }
.gia-share { display: inline-block; width: 46px; height: 5px; border-radius: 3px; background: var(--app-tint-3); vertical-align: middle; margin-left: 8px; overflow: hidden; }
.gia-share i { display: block; height: 100%; background: var(--mx-orange); }
@media (max-width: 1100px) { .gia-kpis { grid-template-columns: 1fr 1fr; } }

/* Tareas → KAI: the one desk for KAI's work on tasks (Ro 14/10) */
.tboard-person--kai { position: relative; }
.tboard-person--kai .tboard-person__count { white-space: nowrap; }
.tboard-person__dot { position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 2px var(--app-surface); }
.kai-mesa { padding: 14px 16px 6px; }
.kai-mesa__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.kai-mesa__stats { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--app-fg-3); }
.kai-mesa__stats b { font-size: 17px; margin-right: 3px; color: var(--app-fg-1); }
.kai-mesa__como { font-size: 12.5px; color: var(--app-fg-3); background: var(--app-tint-1); border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; }
.kai-mesa__sec { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin: 14px 2px 8px; display: flex; align-items: center; gap: 6px; }
.kai-mesa__sec--btn { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.kai-mesa__vacio { font-size: 12.5px; color: var(--app-fg-4); padding: 10px 2px 14px; }
.kai-mesa__ojo { margin-top: 6px; font-size: 12px; color: #b45309; }
.kai-mesa__toca { margin-top: 4px; font-size: 12px; color: var(--app-fg-2); }
.bnd-kj--idle .bnd-kj__ic { background: rgba(244,121,32,.16); color: var(--mx-orange); }
.kai-mesa .bnd-kj__act { flex-wrap: wrap; justify-content: flex-end; }

/* ── Tareas · lista limpia (14/10/2026) ─────────────────────────────── */
.tl-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.tl-tools { display: flex; align-items: center; gap: 6px; }
.tl-icon { position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--app-tint-4); background: var(--app-tint-1); color: var(--app-fg-2); cursor: pointer; }
.tl-icon:hover:not(:disabled) { border-color: var(--app-tint-6); color: var(--app-fg-1); }
.tl-icon:disabled { opacity: .4; cursor: default; }
.tl-icon__n { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--mx-orange); color: #fff; font-size: 9.5px; font-weight: 800; display: grid; place-items: center; }

.tl-people { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.tl-person { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; border: 1px solid var(--app-tint-3); background: var(--app-surface); color: var(--app-fg-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.tl-person:hover { border-color: var(--app-tint-6); }
.tl-person.is-on { border-color: var(--mx-orange); box-shadow: 0 0 0 3px rgba(244,121,32,.16); color: var(--app-fg-1); }
.tl-person__n { font-family: var(--mx-font-mono); font-size: 11px; color: var(--app-fg-4); }
.tl-person--kai { border-color: rgba(244,121,32,.55); background: rgba(244,121,32,.08); }
.tl-person__kai { font-size: 11px; color: var(--app-fg-3); font-weight: 600; white-space: nowrap; }
.tl-person__dot { position: absolute; top: 2px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 2px var(--app-surface); }
.tl-people__sep { width: 1px; height: 24px; background: var(--app-tint-4); margin: 0 2px; }
.tl-av { display: inline-grid; place-items: center; flex: none; border-radius: 50%; border: 1px solid transparent; font-size: 11px; font-weight: 800; line-height: 1; }
.tl-av--meta { background: var(--app-tint-2); color: var(--app-fg-3); }
.tl-av--kai { background: var(--mx-orange); color: #fff; }
.tl-avs { display: inline-flex; align-items: center; }
.tl-avs .tl-av { font-size: 10px; }
.tl-avs .tl-av + .tl-av { margin-left: -6px; box-shadow: 0 0 0 2px var(--app-surface); }
.tl-avs__more { margin-left: 4px; font-size: 10.5px; font-weight: 700; color: var(--app-fg-3); }

.tl-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.tl-select { max-width: 190px; border: 1px solid var(--app-tint-4); background: var(--app-surface); color: var(--app-fg-1); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 12px; font-weight: 600; }
.tl-seg { display: inline-flex; border: 1px solid var(--app-tint-4); border-radius: 8px; overflow: hidden; }
.tl-seg button { border: 0; border-right: 1px solid var(--app-tint-4); background: var(--app-surface); color: var(--app-fg-3); font: inherit; font-size: 12px; font-weight: 600; padding: 6px 10px; cursor: pointer; white-space: nowrap; }
.tl-seg button:last-child { border-right: 0; }
.tl-seg button.is-on { background: rgba(244,121,32,.14); color: var(--app-fg-1); }
.tl-seg__n { font-family: var(--mx-font-mono); font-size: 10.5px; color: var(--app-fg-4); margin-left: 5px; }
.tl-search { flex: 1; min-width: 120px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--app-tint-4); background: var(--app-surface); border-radius: 8px; padding: 0 9px; color: var(--app-fg-4); }
.tl-search input { flex: 1; border: 0; background: none; outline: none; color: var(--app-fg-1); font: inherit; font-size: 12.5px; padding: 7px 0; min-width: 0; }
.tl-btn, .tl-clear { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--app-tint-4); background: var(--app-tint-1); color: var(--app-fg-2); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.tl-btn.is-on { border-color: var(--mx-orange); color: var(--app-fg-1); }
.tl-btn__n { background: var(--mx-orange); color: #fff; border-radius: 999px; font-size: 10px; font-weight: 800; padding: 0 6px; }
.tl-clear:disabled { opacity: .45; cursor: default; }

.tl-anchor { position: relative; display: inline-flex; justify-content: center; }
.tl-anchor--right .pri-quickpicker, .tl-anchor--right .duedate-quickpicker { left: auto; right: 0; }
.tl-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 110; min-width: 220px; padding: 6px; border-radius: 12px; background: var(--app-surface); border: 1px solid var(--app-tint-4); box-shadow: 0 16px 40px rgba(0,0,0,.35); text-align: left; }
.tl-menu--right { left: auto; right: 0; }
.tl-menu__it { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 9px; border: 0; border-radius: 8px; background: none; color: var(--app-fg-1); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: left; white-space: nowrap; }
.tl-menu__it:hover { background: var(--app-tint-2); }
.tl-menu__it.is-on { background: rgba(244,121,32,.12); }
.tl-menu__it--danger { color: #dc2626; }
.tl-menu__n { margin-left: auto; font-family: var(--mx-font-mono); font-size: 10.5px; color: var(--app-fg-4); font-weight: 500; }
.tl-menu__sep { height: 1px; background: var(--app-tint-3); margin: 5px 2px; }
.tl-menu__lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .9px; color: var(--app-fg-4); font-weight: 800; margin: 8px 9px 4px; }
.tl-menu .tl-select { width: calc(100% - 12px); margin: 0 6px 4px; }

.tl-caption { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--app-fg-3); margin: 4px 2px 8px; }
.tl-caption svg { vertical-align: -1px; color: var(--mx-orange); }
.tl-caption__n { margin-left: auto; font-family: var(--mx-font-mono); font-size: 11px; color: var(--app-fg-4); }
.tl-link { border: 0; background: none; padding: 0; color: var(--mx-orange); font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; }
.tl-link:hover { text-decoration: underline; }
.tl-link:disabled { color: var(--app-fg-1); cursor: default; text-decoration: none; }

.tl-card { border: 1px solid var(--app-tint-3); background: var(--app-surface); border-radius: 12px; }
.tl-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tl-table th { padding: 10px 8px; font-size: 10px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; color: var(--app-fg-4); border-bottom: 1px solid var(--app-tint-3); white-space: nowrap; user-select: none; text-align: left; }
.tl-table th.tl-c-mid { text-align: center; }
.tl-table th.is-sort { cursor: pointer; }
.tl-table th.is-sort:hover, .tl-table th.is-on { color: var(--app-fg-1); }
.tl-table td { padding: 10px 8px; border-bottom: 1px solid var(--app-tint-2); vertical-align: middle; color: var(--app-fg-2); }
.tl-table tbody tr:last-child td { border-bottom: 0; }
.tl-row { cursor: pointer; }
.tl-row:hover td { background: var(--app-tint-1); }
.tl-row.is-sel td { background: rgba(244,121,32,.06); }
.tl-row.is-bp td:first-child { box-shadow: inset 3px 0 0 #eab308; }
.tl-row.is-done .tl-title__t { text-decoration: line-through; opacity: .65; }
.tl-c-sel { width: 34px; text-align: center !important; padding-left: 12px !important; }
.tl-c-task { min-width: 240px; }
.tl-c-mid { text-align: center; white-space: nowrap; }
.tl-c-more { width: 40px; text-align: right; }

/* Selection checkbox blends into the surface; orange only when on. */
.tl-cb { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 0; border-radius: 4px; border: 1.5px solid var(--app-tint-5); background: transparent; cursor: pointer; vertical-align: middle; display: inline-grid; place-items: center; transition: border-color .12s, background .12s; }
.tl-cb:hover { border-color: var(--app-fg-4); }
.tl-cb:checked { background: var(--mx-orange); border-color: var(--mx-orange); }
.tl-cb:checked::after { content: ""; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }

.tl-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tl-title__t { font-size: 13px; font-weight: 700; color: var(--app-fg-1); line-height: 1.35; }
.tl-desc { margin-top: 0; font-size: 11.5px; color: var(--app-fg-3); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tl-more-toggle { display: inline-flex; align-items: center; gap: 3px; margin-top: 3px; padding: 0; background: none; border: none; font-size: 11px; font-weight: 600; color: var(--app-fg-3); cursor: pointer; }
.tl-more-toggle:hover { color: var(--app-fg-1); }
.tl-more-toggle svg { transition: transform .15s; }
.tl-more-toggle.is-open svg { transform: rotate(180deg); }
.tl-expand { margin-top: 5px; padding: 7px 10px; border-left: 2px solid var(--app-border); background: var(--app-tint-1); border-radius: 0 6px 6px 0; }
.tl-expand .tl-origin { margin-top: 5px; }
.tl-flag--cabina { background: var(--app-tint-2, rgba(255,255,255,.05)); color: var(--app-fg-2); border: 1px solid var(--app-border); }
.tl-cabina { margin-top: 6px; display: grid; gap: 8px; }
.tl-cabina__head { font-size: 11px; color: var(--app-fg-3); display: flex; align-items: center; gap: 4px; }
.tl-cabina__head b { color: var(--app-fg-1); }
.tl-cabina__head svg { color: var(--mx-orange); }
.tl-cabina ul { margin: 3px 0 0; padding-left: 16px; font-size: 11.5px; line-height: 1.45; color: var(--app-fg-2); }
.tl-cabina__mas { color: var(--app-fg-4); list-style: none; margin-left: -16px; }
.tl-cabina__nota { margin-top: 6px; font-size: 11px; color: var(--app-fg-4); }
.tl-origin { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 10.5px; font-weight: 700; color: var(--mx-orange); text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-origin:hover { text-decoration: underline; }
.tl-origin--muted { color: var(--app-fg-4); }
.tl-flag { font-size: 9.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; border-radius: 5px; padding: 1px 6px; border: 1px solid; white-space: nowrap; }
.tl-flag--red { color: #dc2626; background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.35); }
.tl-flag--amber { color: #b45309; background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.35); }
[data-theme="dark"] .tl-flag--red { color: #f87171; }
[data-theme="dark"] .tl-flag--amber { color: #fbbf24; }

.tl-brand, .tl-who, .tl-st { font: inherit; cursor: pointer; }
.tl-brand { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; border-radius: 6px; padding: 3px 5px; font-size: 11.5px; font-weight: 700; color: var(--app-fg-1); max-width: 170px; }
.tl-brand:hover, .tl-who:hover { background: var(--app-tint-2); }
.tl-brand__sw { width: 20px; height: 20px; border-radius: 5px; display: inline-grid; place-items: center; flex: none; color: #fff; font-size: 8.5px; font-weight: 800; }
.tl-brand__n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-who { display: inline-flex; align-items: center; border: 0; background: none; border-radius: 6px; padding: 3px 5px; }
.tl-empty { font-size: 11px; font-weight: 700; color: #b45309; border: 1px dashed rgba(245,158,11,.6); border-radius: 6px; padding: 2px 7px; }
[data-theme="dark"] .tl-empty { color: #fbbf24; }
.tl-st { display: inline-flex; align-items: center; gap: 5px; border: 1px solid transparent; border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.tl-st i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tl-st--todo { background: rgba(148,163,184,.16); color: #475569; }
.tl-st--prog { background: rgba(59,130,246,.13); color: #1d4ed8; }
.tl-st--bp   { background: rgba(234,179,8,.16); color: #a16207; }
.tl-st--done { background: rgba(34,197,94,.14); color: #15803d; }
[data-theme="dark"] .tl-st--todo { color: #cbd5e1; }
[data-theme="dark"] .tl-st--prog { color: #93c5fd; }
[data-theme="dark"] .tl-st--bp   { color: #fde047; }
[data-theme="dark"] .tl-st--done { color: #86efac; }
.tl-st:hover { border-color: currentColor; }
.tl-created { font-family: var(--mx-font-mono); font-size: 11px; color: var(--app-fg-4); }
.tl-rep { border: 0; background: none; cursor: pointer; padding: 4px; border-radius: 6px; display: inline-grid; place-items: center; color: #16a34a; }
.tl-rep.is-off { color: var(--app-fg-4); opacity: .65; }
.tl-rep:hover:not(:disabled) { background: var(--app-tint-2); }
.tl-rep:disabled { cursor: default; }
[data-theme="dark"] .tl-rep { color: #4ade80; }
[data-theme="dark"] .tl-rep.is-off { color: var(--app-fg-4); }
.tl-kai-wrap { display: inline-flex; align-items: center; gap: 2px; }
.tl-kai { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--app-tint-4); border-radius: 999px; padding: 3px 9px; font-size: 10.5px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; white-space: nowrap; color: var(--app-fg-4); }
.tl-kai--none { border-color: transparent; }
.tl-kai--puede { border-color: rgba(244,121,32,.6); color: var(--mx-orange); }
.tl-kai--trabajando { background: rgba(244,121,32,.12); border-color: var(--mx-orange); color: var(--mx-orange); }
.tl-kai--trabajando svg { animation: tl-spin 1.6s linear infinite; }
.tl-kai--listo { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.55); color: #15803d; }
.tl-kai--falta_dato { background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.6); color: #b45309; }
.tl-kai--error { border-color: rgba(239,68,68,.5); color: #dc2626; }
[data-theme="dark"] .tl-kai--listo { color: #4ade80; }
[data-theme="dark"] .tl-kai--falta_dato { color: #fbbf24; }
[data-theme="dark"] .tl-kai--error { color: #f87171; }
@keyframes tl-spin { to { transform: rotate(360deg); } }
.tl-kai-dl { border: 0; background: none; cursor: pointer; padding: 3px; border-radius: 6px; color: #15803d; display: inline-grid; place-items: center; }
.tl-kai-dl:hover { background: var(--app-tint-2); }
[data-theme="dark"] .tl-kai-dl { color: #4ade80; }
.tl-more { border: 0; background: none; cursor: pointer; color: var(--app-fg-4); padding: 4px 6px; border-radius: 6px; display: inline-grid; place-items: center; }
.tl-more:hover { background: var(--app-tint-2); color: var(--app-fg-1); }

/* Detail panel */
.tl-drawer-overlay { justify-content: flex-end; }
.tl-drawer { max-width: 560px; margin-right: 16px; }
.tl-drawer__head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--app-tint-3); }
.tl-drawer__chips { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.tl-drawer__body { flex: 1; overflow-y: auto; padding: 16px 20px 20px; }
.tl-drawer__title { margin: 0; font-family: inherit; text-transform: none; letter-spacing: 0; font-size: 19px; line-height: 1.3; font-weight: 800; color: var(--app-fg-1); }
.tl-drawer__desc { margin: 8px 0 0; font-size: 13px; line-height: 1.55; color: var(--app-fg-2); white-space: pre-wrap; }
.tl-drawer__foot { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--app-tint-3); }
.tl-sec { margin: 20px 0 8px; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--app-fg-4); display: flex; align-items: center; gap: 10px; }
.tl-sec::after { content: ""; flex: 1; height: 1px; background: var(--app-tint-3); }
.tl-origin-card { border: 1px solid var(--app-tint-3); background: var(--app-tint-1); border-radius: 10px; padding: 11px 13px; font-size: 12.5px; color: var(--app-fg-2); }
.tl-origin-card__src { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; color: var(--app-fg-1); }
.tl-origin-card__src svg { color: var(--mx-orange); }
.tl-origin-card__src .tl-link { margin-left: auto; font-size: 12px; }
.tl-origin-card__when { margin-top: 4px; font-size: 11.5px; color: var(--app-fg-3); }
.tl-origin-card__note { margin-top: 8px; font-size: 12px; line-height: 1.45; color: var(--app-fg-2); }
.tl-origin-card__note svg { color: var(--mx-orange); vertical-align: -1px; }
.tl-quote { margin: 9px 0 0; padding: 7px 11px; border-left: 3px solid var(--mx-orange); background: var(--app-surface); border-radius: 0 8px 8px 0; font-size: 12.5px; line-height: 1.5; color: var(--app-fg-1); }
.tl-quote cite { font-style: normal; color: var(--app-fg-3); font-size: 11.5px; }
.tl-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin: 14px 0 0; }
.tl-facts dt { font-size: 9.5px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; color: var(--app-fg-4); margin-bottom: 2px; }
.tl-facts dd { margin: 0; font-size: 12.5px; color: var(--app-fg-1); justify-content: flex-start; }
.tl-kai-off { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--app-fg-3); border: 1px dashed var(--app-tint-4); border-radius: 10px; padding: 10px 12px; }
.tl-kai-off .btn { margin-left: auto; }
.tl-hist { list-style: none; margin: 0; padding: 0; font-size: 12px; color: var(--app-fg-2); }
.tl-hist li { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--app-tint-2); }
.tl-hist li.is-rev { opacity: .55; }
.tl-hist__when { flex: none; width: 118px; font-family: var(--mx-font-mono); font-size: 10.5px; color: var(--app-fg-4); padding-top: 1px; }

.kai-bitacora { margin-top: 10px; font-size: 12px; color: var(--app-fg-2); }
.kai-bitacora__now { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: rgba(244,121,32,.08); color: var(--app-fg-1); }
.kai-bitacora__vivo { list-style: none; margin: 8px 0 0; padding: 0; }
.kai-bitacora__vivo li { padding: 3px 0; }
.kai-bitacora__vivo li.is-bad { color: #dc2626; }
.kai-bitacora__vivo span, .kai-bitacora__pasos li span { font-family: var(--mx-font-mono); font-size: 10.5px; color: var(--app-fg-4); margin-right: 8px; }
.kai-bitacora__pasos { margin-top: 10px; }
.kai-bitacora__pasos summary { cursor: pointer; font-weight: 700; color: var(--app-fg-2); font-size: 12px; }
.kai-bitacora__pasos ul { list-style: none; margin: 6px 0 0; padding: 0 0 0 10px; border-left: 2px solid var(--app-tint-3); }
.kai-bitacora__pasos li { padding: 4px 0 4px 8px; line-height: 1.45; }
@media (max-width: 760px) {
  .tl-drawer { margin-right: 0; }
  .tl-facts { grid-template-columns: 1fr; }
}

/* Tareas · marca a la izquierda + completar (15/10/2026) */
.tl-c-brand { width: 1%; white-space: nowrap; text-align: left; padding-left: 14px !important; }
.tl-table th.tl-c-brand { padding-left: 19px !important; }
.tl-anchor--left { justify-content: flex-start; }
.tl-c-sel { padding-left: 4px !important; padding-right: 14px !important; }
.tl-row .tl-cb { opacity: .55; }
.tl-row:hover .tl-cb, .tl-row .tl-cb:checked { opacity: 1; }
.tl-c-done { width: 1%; }
.tl-done { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--app-tint-4); background: transparent; color: var(--app-fg-3); font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.tl-done:hover { border-color: #22c55e; color: #16a34a; background: rgba(34,197,94,.10); }
[data-theme="dark"] .tl-done:hover { color: #4ade80; }
.tl-done.is-leaving, .tl-done.is-on { border-color: #22c55e; background: #22c55e; color: #fff; }
.tl-row.is-leaving td { background-image: linear-gradient(rgba(34,197,94,.13), rgba(34,197,94,.13)); background-repeat: no-repeat; background-size: 0 100%; animation: tl-sweep .1s linear var(--sw, 0s) forwards, tl-row-out .5s cubic-bezier(.55,0,.75,.3) 1.05s both; }
.tl-row.is-leaving td:nth-child(2) { --sw: .05s; } .tl-row.is-leaving td:nth-child(3) { --sw: .1s; } .tl-row.is-leaving td:nth-child(4) { --sw: .15s; } .tl-row.is-leaving td:nth-child(5) { --sw: .2s; }
.tl-row.is-leaving td:nth-child(6) { --sw: .25s; } .tl-row.is-leaving td:nth-child(7) { --sw: .3s; } .tl-row.is-leaving td:nth-child(8) { --sw: .35s; } .tl-row.is-leaving td:nth-child(9) { --sw: .4s; } .tl-row.is-leaving td:nth-child(10) { --sw: .45s; }
/* Complete beat (~1.6 s): pop + check draws + ring, green sweep left to right, strike, "Completada · hora", row slides out. */
.tl-done { position: relative; overflow: visible; }
.tl-done.is-leaving { animation: tl-done-pop .46s cubic-bezier(.3,1.6,.5,1) both; box-shadow: 0 0 0 0 rgba(34,197,94,.55); }
.tl-done.is-leaving::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 2px solid #22c55e; animation: tl-done-ring .72s ease-out both; pointer-events: none; }
.tl-done.is-leaving polyline { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tl-check-draw .36s ease-out .1s forwards; }
.tl-row.is-leaving .tl-title__t { background: linear-gradient(#22c55e, #22c55e) no-repeat 0 56% / 0 2px; animation: tl-strike .41s ease-out .24s forwards; }
@keyframes tl-done-pop { 0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1); } }
@keyframes tl-done-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(2.3); opacity: 0; } }
@keyframes tl-check-draw { to { stroke-dashoffset: 0; } }
@keyframes tl-sweep { to { background-size: 100% 100%; } }
@keyframes tl-done-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes tl-strike { to { background-size: 100% 2px; color: var(--app-fg-3); } }
@keyframes tl-row-out { to { transform: translateX(48px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tl-done.is-leaving, .tl-done.is-leaving::after, .tl-row.is-leaving td, .tl-flag--done { animation: none; }
  .tl-row.is-leaving td { background-size: 100% 100%; }
  .tl-done.is-leaving polyline { animation: none; stroke-dashoffset: 0; }
  .tl-row.is-leaving .tl-title__t { animation: none; background-size: 100% 2px; }
}
/* Brand picker: search on top, list scrolls, never clipped */
.pri-quickpicker.brand-qp { width: 260px; display: flex; flex-direction: column; overflow: hidden; padding: 0; z-index: 1200; }
.brand-qp__search { display: flex; align-items: center; gap: 7px; padding: 9px 11px; border-bottom: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.55); flex: none; }
.brand-qp__search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: #fff; font: inherit; font-size: 12.5px; }
.brand-qp__list { overflow-y: auto; flex: 1 1 auto; min-height: 0; padding: 4px 0; }
.brand-qp__empty { padding: 14px 12px; font-size: 12px; color: rgba(255,255,255,.55); }

/* Tareas · ajuste 15/10: anchos fijos (nada se sale), avisos en gris,
   amarillo sólo para brand pending. */
.tl-table { table-layout: fixed; }
.tl-w-brand { width: 176px; } .tl-w-who { width: 124px; } .tl-w-st { width: 132px; }
.tl-w-created { width: 82px; } .tl-w-rep { width: 90px; } .tl-w-kai { width: 136px; }
.tl-w-done { width: 124px; } .tl-w-more { width: 38px; } .tl-w-sel { width: 38px; }
.tl-table th { overflow: hidden; text-overflow: ellipsis; }
.tl-c-brand { width: auto; }
.tl-c-done { width: auto; }
.tl-c-task { min-width: 0; overflow: hidden; }
.tl-title__t { overflow-wrap: anywhere; }
.tl-desc { overflow-wrap: anywhere; }
.tl-origin { display: flex; width: fit-content; }
.tl-brand { max-width: 100%; }
.tl-c-brand .tl-anchor { max-width: 100%; }
.tl-kai { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* Avisos (vencida, reincidente, estancado): grises, que no griten. */
.tl-flag, .tl-flag--red, .tl-flag--amber,
[data-theme="dark"] .tl-flag--red, [data-theme="dark"] .tl-flag--amber {
  color: var(--app-fg-3); background: var(--app-tint-2); border-color: var(--app-tint-4); font-weight: 700;
}
/* "Completada · hora" while the row leaves: the one flag that does get color. */
.tl-flag.tl-flag--done { color: #16a34a; background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.4); animation: tl-done-in .3s ease-out .3s both; }
[data-theme="dark"] .tl-flag.tl-flag--done { color: #4ade80; }
/* Sin marca / sin asignar: gris punteado (el amarillo es de brand pending). */
.tl-empty, [data-theme="dark"] .tl-empty { color: var(--app-fg-3); border-color: var(--app-tint-6); }
/* KAI te pregunta: naranja (acción tuya), no amarillo. */
.tl-kai--falta_dato, [data-theme="dark"] .tl-kai--falta_dato { background: var(--mx-orange); border-color: var(--mx-orange); color: #fff; }

/* Brand pending: borde amarillo a la izquierda de la marca y la fila apenas teñida. */
.tl-row.is-bp td { background: rgba(234,179,8,.05); }
.tl-row.is-bp:hover td { background: rgba(234,179,8,.09); }
.tl-row.is-bp td:first-child { box-shadow: inset 4px 0 0 #eab308; }

/* Laptop: columnas más angostas y «Completar» sólo con ícono. */
@media (max-width: 1600px) {
  .tl-w-brand { width: 150px; } .tl-w-st { width: 112px; } .tl-w-kai { width: 112px; }
  .tl-w-done { width: 52px; } .tl-w-who { width: 100px; } .tl-w-rep { width: 70px; } .tl-w-created { width: 64px; }
  .tl-done { padding: 0; width: 30px; height: 30px; border-radius: 50%; justify-content: center; }
  .tl-table th { font-size: 9px; letter-spacing: .4px; padding-left: 4px; padding-right: 4px; }
  .tl-done__t { display: none; }
  .tl-table th.tl-c-done { font-size: 0; }
}
@media (max-width: 1280px) {
  .tl-w-brand { width: 104px; } .tl-w-kai { width: 90px; } .tl-w-st { width: 100px; }
  .tl-w-who { width: 102px; } .tl-w-rep { width: 70px; } .tl-w-created { width: 64px; }
  .tl-kai { padding: 3px 7px; font-size: 9.5px; }
  .tl-st { padding: 3px 8px; }
  .tl-table th { font-size: 9px; letter-spacing: .5px; }
}

/* ── Contenido · Revisión (views-contenido-revision.jsx) ─────────────────── */
.crv-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crv-sp{flex:1}
.crv-lbl{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--app-fg-4)}
.crv-mono{font-family:var(--mx-font-mono)}
.crv-hint{font-size:11px;color:var(--app-fg-3);margin-top:6px;line-height:1.4}
.crv-when{font-size:10.5px;color:var(--app-fg-4);font-family:var(--mx-font-mono)}
.crv-when b{color:var(--app-fg-2)}
.crv-empty{text-align:center;color:var(--app-fg-3);font-size:12.5px;padding:26px 12px;line-height:1.6}
.crv-chip{border:1px solid var(--app-tint-4);background:var(--app-tint-1);color:var(--app-fg-2);border-radius:999px;padding:5px 11px;font-size:11.5px;font-weight:600;cursor:pointer;display:inline-flex;gap:6px;align-items:center;font-family:inherit}
.crv-chip.on{background:rgba(244,121,32,.14);border-color:var(--mx-orange);color:var(--app-fg-1)}
.crv-av{width:24px;height:24px;border-radius:50%;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:800;flex:none}
.crv-av.sm{width:18px;height:18px;font-size:8px}
.crv-avs{display:flex;gap:3px}
.crv-st{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:10px;font-size:10.5px;font-weight:700;white-space:nowrap}
.crv-st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.crv-st.abierta{background:rgba(244,121,32,.16);color:#F47920}
.crv-st.proceso{background:#58a6ff22;color:#58a6ff}
.crv-st.ok{background:#3fb95022;color:#3fb950}
.crv-st.reab{background:#f8514922;color:#f85149}
.crv-st.gris{background:var(--app-tint-3);color:var(--app-fg-3)}
[data-theme="light"] .crv-st.abierta{color:#b4530a}
[data-theme="light"] .crv-st.proceso{color:#1f6feb}
[data-theme="light"] .crv-st.ok{color:#1a7f37}
[data-theme="light"] .crv-st.reab{color:#cf222e}
.crv-tag{font-size:10px;font-weight:800;letter-spacing:.5px;padding:1px 6px;border-radius:5px;background:var(--app-tint-3);color:var(--app-fg-2)}

.crv-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:14px}
.crv-kpi{background:var(--app-surface);border:1px solid var(--app-border);border-radius:12px;padding:12px 14px;cursor:pointer}
.crv-kpi.on{border-color:var(--mx-orange);box-shadow:0 0 0 1px var(--mx-orange) inset}
.crv-kpi .v{font-family:var(--mx-font-display);font-size:26px;font-weight:800;color:var(--app-fg-1);line-height:1.1;margin-top:4px}
.crv-kpi .s{font-size:11px;color:var(--app-fg-3);margin-top:2px}
.crv-list{background:var(--app-surface);border:1px solid var(--app-border);border-radius:12px;overflow:hidden}
.crv-item{display:grid;grid-template-columns:150px minmax(0,2.2fr) 150px 150px 70px 60px;gap:14px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--app-tint-3);cursor:pointer}
.crv-item:last-child{border-bottom:none}
.crv-item:hover{background:rgba(244,121,32,.05)}
.crv-item.head{cursor:default;background:var(--app-surface-2);padding-top:9px;padding-bottom:9px}
.crv-item.head:hover{background:var(--app-surface-2)}
.crv-strip{display:flex;gap:5px;align-items:center}
.crv-strip .t{width:32px;height:32px;border-radius:6px;background:var(--app-tint-3) center/cover;position:relative;flex:none;border:1px solid var(--app-tint-4);display:flex;align-items:center;justify-content:center;font-size:8.5px;font-weight:800;color:var(--app-fg-4)}
.crv-strip .t b{position:absolute;top:-5px;right:-5px;min-width:15px;height:15px;border-radius:8px;background:var(--mx-orange);color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center;padding:0 3px}
.crv-strip .t b.ok{background:#1f8f4a}
.crv-more{font-size:11px;color:var(--app-fg-3);font-weight:700}
.crv-pname{font-weight:700;color:var(--app-fg-1);font-size:13px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.crv-pmeta{font-size:11.5px;color:var(--app-fg-3);margin-top:2px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.crv-cnt{font-size:12px;color:var(--app-fg-2)}
.crv-cnt b{color:var(--app-fg-1)}
.crv-age{font-family:var(--mx-font-mono);font-size:11.5px;color:var(--app-fg-3)}
.crv-age.late{color:#f85149}
[data-theme="light"] .crv-age.late{color:#cf222e}

.crv-etapas{display:flex;align-items:center;margin:0 0 12px;background:var(--app-surface);border:1px solid var(--app-border);border-radius:12px;padding:10px 14px;overflow-x:auto;gap:0}
.crv-etapa{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--app-fg-4);white-space:nowrap;font-weight:600}
.crv-etapa .d{width:20px;height:20px;border-radius:50%;border:2px solid var(--app-tint-5);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800}
.crv-etapa.done{color:var(--app-fg-2)}
.crv-etapa.done .d{background:#1f8f4a;border-color:#1f8f4a;color:#fff}
.crv-etapa.cur{color:var(--app-fg-1);font-weight:800}
.crv-etapa.cur .d{border-color:var(--mx-orange);background:rgba(244,121,32,.18);color:var(--mx-orange)}
.crv-eline{width:30px;height:2px;background:var(--app-tint-4);margin:0 10px;flex:none}
.crv-eline.done{background:#1f8f4a}

.crv-mesa{display:grid;grid-template-columns:84px minmax(0,1fr) 340px;gap:12px;align-items:start}
.crv-rail{display:flex;flex-direction:column;gap:8px}
.crv-th{position:relative;border-radius:10px;border:2px solid transparent;background:var(--app-surface);cursor:pointer;overflow:hidden}
.crv-th img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:#fff}
.crv-th.sel{border-color:var(--mx-orange)}
.crv-th.gen{animation:ctnGlow 1.6s ease-in-out infinite}
.crv-th .lb{position:absolute;left:0;right:0;bottom:0;font-size:9.5px;font-weight:800;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.72));padding:12px 6px 4px;display:flex;justify-content:space-between}
.crv-th .bd{position:absolute;top:5px;right:5px;min-width:18px;height:18px;border-radius:9px;background:var(--mx-orange);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.crv-th .bd.ok{background:#1f8f4a}
.crv-stagecard{background:var(--app-surface);border:1px solid var(--app-border);border-radius:12px;padding:10px;min-width:0}
.crv-tools{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.crv-seg{display:inline-flex;background:var(--app-tint-2);border:1px solid var(--app-tint-4);border-radius:9px;padding:2px}
.crv-seg button{border:none;background:none;color:var(--app-fg-3);padding:6px 11px;border-radius:7px;font-size:12px;font-weight:700;cursor:pointer;display:inline-flex;gap:6px;align-items:center;font-family:inherit}
.crv-seg button.on{background:var(--mx-orange);color:#fff}
.crv-seg button:disabled{opacity:.4;cursor:not-allowed}
.crv-verinfo{font-size:11.5px;color:var(--app-fg-3)}
.crv-verinfo b{color:var(--app-fg-1)}
/* El lienzo cabe en pantalla: .main lleva zoom 1.18, por eso el /1.18. */
.crv-stage{position:relative;margin:0 auto;width:min(100%,calc((100vh - 120px)/1.18 - 240px));min-width:300px;border-radius:8px;background:#fff;user-select:none}
/* La imagen marca el tamaño del lienzo (cuadrada en carrusel, ancha en A+) y los
   marcadores se posicionan en % sobre ella. */
.crv-stage>img{display:block;width:100%;height:auto;pointer-events:none;border-radius:8px}
.crv-stage>img.after{position:absolute;inset:0;height:100%}
.crv-stage.ap{width:100%;min-width:0}
.crv-stage.ap.mobile{width:min(100%,560px)}
.crv-stage.senalar{cursor:crosshair}
.crv-stage.cmp{overflow:hidden;cursor:ew-resize}
.crv-stage.cmp .after{clip-path:inset(0 0 0 var(--cut,50%))}
.crv-cline{position:absolute;top:0;bottom:0;left:var(--cut,50%);width:2px;background:var(--mx-orange);transform:translateX(-1px);pointer-events:none}
.crv-knob{position:absolute;top:50%;left:var(--cut,50%);width:32px;height:32px;border-radius:50%;background:var(--mx-orange);color:#fff;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.4);pointer-events:none}
.crv-ctag{position:absolute;top:10px;font-size:10.5px;font-weight:800;color:#fff;background:rgba(13,24,38,.82);padding:3px 8px;border-radius:6px}
.crv-pin{position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50% 50% 50% 4px;transform:rotate(-45deg);background:var(--mx-orange);border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.45);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:3}
.crv-pin span{transform:rotate(45deg);color:#fff;font-weight:800;font-size:11.5px}
.crv-pin.hl{box-shadow:0 0 0 4px rgba(244,121,32,.45),0 2px 8px rgba(0,0,0,.45);z-index:5}
.crv-pin.proceso{background:#1f6feb}
.crv-pin.ok{background:#1f8f4a;opacity:.85}
.crv-pin.reab{background:#cf222e}
.crv-pin.draft{background:#fff;border-color:var(--mx-orange)}
.crv-pin.draft span{color:var(--mx-orange)}
.crv-stage.sinpins .crv-pin:not(.draft){display:none}
.crv-pop{position:absolute;z-index:10;width:300px;background:var(--app-surface);border:1px solid var(--mx-orange);border-radius:12px;box-shadow:var(--app-shadow);padding:12px;cursor:default}
.crv-pop h4{margin:0 0 8px;font-size:12.5px;color:var(--app-fg-1);display:flex;gap:6px;align-items:center}
.crv-in{width:100%;box-sizing:border-box;background:var(--app-tint-1);border:1px solid var(--app-tint-4);border-radius:8px;color:var(--app-fg-1);padding:7px 10px;font-size:12.5px;font-family:inherit}
.crv-in:focus{outline:none;border-color:var(--mx-orange)}
.crv-ta{min-height:70px;resize:vertical}
.crv-dgrid{display:grid;grid-template-columns:120px 1fr;gap:6px;margin-top:8px}

.crv-panel{background:var(--app-surface);border:1px solid var(--app-border);border-radius:12px;display:flex;flex-direction:column;max-height:calc((100vh - 120px)/1.18);position:sticky;top:8px}
.crv-panel-h{padding:12px 14px;border-bottom:1px solid var(--app-tint-3)}
.crv-panel-b{padding:10px;overflow:auto;flex:1;display:flex;flex-direction:column;gap:8px;min-height:120px}
.crv-panel-f{padding:12px 14px;border-top:1px solid var(--app-tint-3);display:flex;flex-direction:column;gap:8px}
.crv-pie-txt{font-size:12px;color:var(--app-fg-2);line-height:1.45;display:flex;gap:6px;align-items:flex-start}
.crv-pie-txt b{color:var(--app-fg-1)}
.crv-ptabs{display:flex;gap:4px;margin-top:10px}
.crv-ptabs button{flex:1;border:1px solid var(--app-tint-4);background:none;color:var(--app-fg-3);border-radius:7px;padding:5px 6px;font-size:11.5px;font-weight:700;cursor:pointer;font-family:inherit;display:inline-flex;gap:4px;align-items:center;justify-content:center}
.crv-ptabs button.on{background:var(--app-tint-3);color:var(--app-fg-1);border-color:var(--app-tint-5)}
.crv-obs{border:1px solid var(--app-tint-4);border-radius:10px;padding:10px 11px;background:var(--app-tint-1);cursor:pointer}
.crv-obs.hl{border-color:var(--mx-orange);background:rgba(244,121,32,.06)}
.crv-obs-h{display:flex;align-items:center;gap:7px}
.crv-num{width:20px;height:20px;border-radius:50%;background:var(--mx-orange);color:#fff;font-size:10.5px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.crv-num.proceso{background:#1f6feb}.crv-num.ok{background:#1f8f4a}.crv-num.reab{background:#cf222e}
.crv-who{font-size:12px;font-weight:700;color:var(--app-fg-1)}
.crv-obs p{margin:7px 0 0;font-size:12.5px;color:var(--app-fg-1);line-height:1.45;white-space:pre-wrap}
.crv-dato{margin-top:7px;display:flex;gap:6px;align-items:center;font-size:11.5px;background:var(--app-tint-2);border:1px dashed var(--app-tint-5);border-radius:7px;padding:5px 8px;color:var(--app-fg-2)}
.crv-dato b{color:var(--app-fg-1);font-family:var(--mx-font-mono)}
.crv-aviso{margin-top:6px;font-size:11px;color:#d29922}
[data-theme="light"] .crv-aviso{color:#9a6700}
.crv-thread{margin-top:8px;border-left:2px solid var(--app-tint-4);padding-left:9px;display:flex;flex-direction:column;gap:5px}
.crv-thread div{font-size:11.5px;color:var(--app-fg-2);line-height:1.4}
.crv-thread b{color:var(--app-fg-1)}
.crv-acts{display:flex;gap:5px;margin-top:9px;flex-wrap:wrap}
.crv-reply{display:flex;gap:6px;margin-top:8px}
.crv-tl{display:flex;flex-direction:column;gap:9px;padding:4px}
.crv-tl div{display:flex;gap:8px;font-size:12px;color:var(--app-fg-2);line-height:1.4;align-items:flex-start}
.crv-tl i{font-style:normal;font-family:var(--mx-font-mono);font-size:10.5px;color:var(--app-fg-4);white-space:nowrap;min-width:74px}
.crv-tl b{color:var(--app-fg-1)}

/* Modales: van por portal a <body>, fuera del zoom de .main. */
.crv-ov{position:fixed;inset:0;background:rgba(5,10,18,.62);z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px}
.crv-modal{background:var(--app-surface);border:1px solid var(--app-border);border-radius:14px;box-shadow:var(--app-shadow);width:min(720px,100%);max-height:calc(100vh - 32px);overflow:auto;color:var(--app-fg-1)}
.crv-modal-h{padding:15px 18px;border-bottom:1px solid var(--app-tint-3);display:flex;align-items:center;gap:10px}
.crv-modal-h h3{margin:0;font-size:15px;color:var(--app-fg-1)}
.crv-modal-b{padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.crv-modal-f{padding:12px 18px;border-top:1px solid var(--app-tint-3);display:flex;gap:8px;justify-content:flex-end;align-items:center}
.crv-x{margin-left:auto;background:none;border:none;color:var(--app-fg-3);cursor:pointer;display:flex}
.crv-drop{display:block;border:2px dashed var(--app-tint-5);border-radius:12px;padding:26px;text-align:center;color:var(--app-fg-2);font-size:13px;cursor:pointer;background:var(--app-tint-1)}
.crv-drop:hover,.crv-drop.over{border-color:var(--mx-orange);background:rgba(244,121,32,.06)}
.crv-up{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.crv-up figure{margin:0}
.crv-up img{width:100%;aspect-ratio:1;object-fit:contain;background:#fff;border-radius:8px;border:1px solid var(--app-tint-4)}
.crv-up figcaption{font-size:11px;color:var(--app-fg-3);margin-top:4px;font-weight:700}
.crv-up figcaption.nueva{color:var(--mx-orange)}
.crv-checks{display:flex;flex-direction:column;gap:6px}
.crv-check{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--app-fg-1)}
.crv-check .ic{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;color:#fff}
.crv-check .ic.ok{background:#1f8f4a}.crv-check .ic.warn{background:#c98500}.crv-check .ic.bad{background:#cf222e}
.crv-check small{color:var(--app-fg-3);font-size:11px}
.crv-resv{display:flex;flex-direction:column;gap:6px}
.crv-resv label{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--app-fg-1);background:var(--app-tint-1);border:1px solid var(--app-tint-4);border-radius:8px;padding:8px 10px;cursor:pointer}
.crv-crop{width:120px;height:120px;border-radius:8px;border:2px solid var(--mx-orange);background-repeat:no-repeat;background-size:400%;flex:none;background-color:#fff}

@media (max-width:1400px){
  .crv-mesa{grid-template-columns:76px minmax(0,1fr) 300px}
  .crv-item{grid-template-columns:130px minmax(0,2fr) 130px 140px 60px 54px;gap:10px}
}
@media (max-width:1180px){
  .crv-mesa{grid-template-columns:1fr}
  .crv-rail{flex-direction:row;overflow-x:auto}
  .crv-th{width:76px;flex:none}
  .crv-panel{position:static;max-height:none}
  .crv-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.crv-cellbd{position:absolute;top:6px;left:6px;z-index:4;min-width:20px;height:20px;border-radius:10px;background:var(--mx-orange);color:#fff;font-size:10.5px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 5px;box-shadow:0 1px 4px rgba(0,0,0,.45);cursor:pointer}
.crv-pista button{padding:7px 14px}
.crv-segn{margin-left:4px;min-width:17px;height:17px;border-radius:9px;background:var(--mx-orange);color:#fff;font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;padding:0 4px}
.crv-seg button.on .crv-segn{background:#fff;color:var(--mx-orange)}
.crv-mesa.ap{grid-template-columns:150px minmax(0,1fr) 340px}
.crv-th.ap img{aspect-ratio:auto;height:auto;object-fit:contain}
.crv-strip .t.ap{width:52px;background-size:contain;background-repeat:no-repeat;background-color:#fff}
.crv-modal.ancho{width:min(980px,100%)}
.crv-up.ap{grid-template-columns:1fr}
.crv-up.ap img{aspect-ratio:auto;height:auto}
@media (max-width:1400px){.crv-mesa.ap{grid-template-columns:120px minmax(0,1fr) 300px}}
@media (max-width:1180px){.crv-mesa.ap{grid-template-columns:1fr}.crv-th.ap{width:140px}}

/* Tareas · Completar va entre Marca y Tarea, siempre como círculo con palomita. */
.tl-w-done, .tl-table col.tl-w-done { width: 46px; }
.tl-table .tl-c-done { padding-left: 2px; padding-right: 2px; text-align: center; }
.tl-done { padding: 0; width: 28px; height: 28px; border-radius: 50%; justify-content: center; }

/* SearchSelect — brand lists with type-to-search, A-Z (shell.jsx) */
.ssel-pop { z-index: 3000; display: flex; flex-direction: column; overflow: hidden; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 10px; box-shadow: var(--app-shadow); font-size: 13px; color: var(--app-fg-1); }
.ssel-pop__search { display: flex; align-items: center; gap: 7px; padding: 9px 11px; border-bottom: 1px solid var(--app-tint-3); color: var(--app-fg-3); flex: none; }
.ssel-pop__search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--app-fg-1); font: inherit; font-size: 13px; padding: 0; }
.ssel-pop__list { overflow-y: auto; flex: 1 1 auto; min-height: 0; padding: 4px; }
.ssel-pop__row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; cursor: pointer; line-height: 1.25; }
.ssel-pop__row > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssel-pop__row.is-hi { background: var(--app-tint-2); }
.ssel-pop__row.is-on { color: var(--mx-orange, #F47920); font-weight: 600; }
.ssel-pop__row.is-pin { color: var(--app-fg-3); }
.ssel-pop__row.is-pin + .ssel-pop__row:not(.is-pin) { margin-top: 5px; box-shadow: 0 -1px 0 var(--app-tint-3); }
.ssel-pop__empty { padding: 14px 12px; font-size: 12px; color: var(--app-fg-3); }

/* ── Vendor 1P · página principal (oct 2026) ─────────────────────────────
   KPIs, Shipped COGS semanal, órdenes de compra y familias. Colores sólo con
   tokens de la app para que el tema claro y el oscuro se lean igual de bien. */
.ven-bq, .vp-fresh { --vp-good:#22c55e; --vp-bad:#ef4444; --vp-warn:#f59e0b; --vp-info:#60a5fa; }
body[data-theme="light"] .ven-bq, body[data-theme="light"] .vp-fresh { --vp-good:#15803d; --vp-bad:#dc2626; --vp-warn:#b45309; --vp-info:#1d4ed8; }
.vp { display:flex; flex-direction:column; gap:var(--d-gap,14px); }
.vp-up { color:var(--vp-good); } .vp-down { color:var(--vp-bad); } .vp-flat { color:var(--app-fg-4); }
.vp-up, .vp-down { font-family:var(--mx-font-mono); font-weight:700; }
.ven-bq .vp-kpis { grid-template-columns:repeat(5,minmax(0,1fr)); margin:0; }
.vp-kpis .kpi .value { font-size:26px; }
.vp-kpis .label-row .ven-help { margin-left:auto; }
.vp-unit { font-family:var(--mx-font-sans); font-size:15px; font-weight:600; color:var(--app-fg-3); margin-left:6px; }
.vp-cmp { display:flex; flex-direction:column; gap:3px; font-size:11.5px; color:var(--app-fg-3); }
.vp-cmp b { font-family:var(--mx-font-mono); color:var(--app-fg-1); }
.vp-card { margin:0; }
.vp-h { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.vp-h.pad { padding:16px 18px 0; }
.vp-h h4 { font-family:var(--mx-font-display); font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin:0; color:var(--app-fg-1); }
.vp-h .sub { font-size:11.5px; color:var(--app-fg-4); }
.vp-h .vp-seg { margin-left:auto; }
.vp-leg { margin-left:auto; display:flex; gap:14px; font-size:11.5px; color:var(--app-fg-3); }
.vp-leg span { display:inline-flex; align-items:center; gap:6px; }
.vp-leg i { width:10px; height:10px; border-radius:2px; display:inline-block; background:var(--mx-orange); }
.vp-leg i.off { background:var(--app-tint-5); }
.vp-bars { display:block; width:100%; }
.vp-bars .gl { stroke:var(--app-tint-3); stroke-width:1; }
.vp-bars .ax { fill:var(--app-fg-4); font-family:var(--mx-font-mono); font-size:10px; }
.vp-bars .val { fill:var(--app-fg-2); font-family:var(--mx-font-mono); font-size:10.5px; font-weight:700; }
.vp-bars .bar { fill:var(--mx-orange); }
.vp-bars .bar.dim { fill:var(--app-tint-5); }
.vp-bars .bar:hover { fill:#ffa05c; }
/* órdenes */
.vp-po-top { padding:0 18px 14px; display:grid; gap:12px; }
.vp-upd { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; border:1px solid var(--app-tint-4); border-left:3px solid var(--mx-orange); background:var(--app-tint-1); border-radius:9px; padding:12px 14px; }
.vp-upd.fresh { border-left-color:var(--vp-good); }
.vp-upd-l { display:flex; gap:12px; align-items:center; color:var(--app-fg-3); }
.vp-upd .lb { font-size:10px; text-transform:uppercase; letter-spacing:1.2px; color:var(--app-fg-4); font-weight:700; }
.vp-upd .vv { font-family:var(--mx-font-display); font-size:24px; font-weight:800; color:var(--app-fg-1); line-height:1.15; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.vp-upd .vv .msg { font-family:var(--mx-font-sans); font-size:12px; font-weight:700; color:var(--vp-good); }
.vp-upd .vv .msg.bad { color:var(--vp-bad); }
.vp-upd .sb, .vp-upd-r .sb { font-size:11px; color:var(--app-fg-4); }
.vp-upd-r { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.vp-btn { display:inline-flex; gap:7px; align-items:center; border:1px solid var(--app-tint-4); background:var(--app-tint-2); color:var(--app-fg-2); border-radius:7px; padding:8px 14px; font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer; }
.vp-btn.pri { background:var(--mx-orange); border-color:var(--mx-orange); color:#fff; }
.vp-btn.pri:hover { background:#E56A15; }
.vp-btn[disabled] { cursor:default; opacity:.85; }
.vp-btn:focus-visible, .vp-pobox:focus-visible, .vp-chip:focus-visible, .vp-more:focus-visible { outline:2px solid var(--mx-orange); outline-offset:2px; }
.vp-poboxes { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.vp-pobox { text-align:left; font-family:inherit; border:1px solid var(--app-tint-3); background:var(--app-tint-1); border-radius:9px; padding:10px 14px; cursor:pointer; display:flex; flex-direction:column; gap:2px; color:inherit; }
.vp-pobox:hover { border-color:var(--app-tint-6, var(--app-fg-4)); }
.vp-pobox.on { border-color:var(--mx-orange); background:rgba(244,121,32,.07); }
.vp-pobox .l { font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--app-fg-4); font-weight:700; }
.vp-pobox .v { font-family:var(--mx-font-display); font-size:26px; font-weight:800; color:var(--app-fg-1); line-height:1.1; }
.vp-pobox .s { font-size:11px; color:var(--app-fg-3); }
.vp-pobox.bad .v { color:var(--vp-bad); } .vp-pobox.warn .v { color:var(--vp-warn); }
.vp-scroll { overflow-x:auto; }
.vp-tbl > thead > tr > th, .vp-tbl > tbody > tr > td { text-align:right; white-space:nowrap; }
.vp-tbl > thead > tr > th.l, .vp-tbl > tbody > tr > td.l { text-align:left; }
.vp-tbl > thead > tr > th:first-child, .vp-tbl > tbody > tr > td:first-child { padding-left:18px; }
.vp-tbl > thead > tr > th:last-child, .vp-tbl > tbody > tr > td:last-child { padding-right:18px; }
.vp-tbl > tbody > tr > td { vertical-align:middle; font-variant-numeric:tabular-nums; }
/* El detalle de una orden trae su propia tabla ancha: que se desplace adentro
   en vez de ensanchar la lista de órdenes. */
.vp-tbl > tbody > tr > td.vp-podet { padding:0; max-width:0; text-align:left; white-space:normal; }
.vp-podet > div { overflow-x:auto; }
.vp-row { cursor:pointer; }
.vp-row:hover td { background:rgba(244,121,32,.05); }
.vp-row.open td { background:rgba(244,121,32,.08); }
.vp-pon, .vp-pn { display:flex; align-items:center; gap:6px; }
.vp-pn .t { font-weight:600; max-width:380px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }
.vp-caret { display:inline-flex; color:var(--app-fg-4); transition:transform .15s; }
.vp-caret.o { transform:rotate(90deg); color:var(--mx-orange); }
.vp-sub { font-size:10.5px; color:var(--app-fg-4); margin-top:2px; }
.vp-child td { background:var(--app-tint-1); }
.vp-tbl > tbody > tr.vp-child > td:first-child { padding-left:40px; }
.vp-child .vp-pn .t { font-weight:500; font-size:12px; }
.vp-st { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:8px; font-size:10.5px; font-weight:800; white-space:nowrap; }
.vp-st.ok { background:rgba(34,197,94,.14); color:var(--vp-good); }
.vp-st.warn { background:rgba(245,158,11,.16); color:var(--vp-warn); }
.vp-st.bad { background:rgba(239,68,68,.14); color:var(--vp-bad); }
.vp-st.run { background:rgba(244,121,32,.14); color:var(--mx-orange); }
.vp-st.info { background:rgba(59,130,246,.14); color:var(--vp-info); }
.vp-st.gry { background:var(--app-tint-3); color:var(--app-fg-3); }
.vp-chg { font-family:var(--mx-font-mono); color:var(--app-fg-1); }
.vp-chg.old { color:var(--vp-warn); }
.vp-empty { text-align:center !important; color:var(--app-fg-4); padding:24px !important; }
.vp-more { display:flex; gap:6px; align-items:center; width:100%; background:none; border:0; border-top:1px solid var(--app-border-soft); padding:12px 18px; font-family:inherit; font-size:12px; font-weight:700; color:var(--mx-orange); cursor:pointer; }
/* familias */
.vp-seg button { padding:4px 10px; font-size:11.5px; }
.vp-chips { display:flex; gap:8px; flex-wrap:wrap; padding:0 18px 12px; }
.vp-chip { border:1px solid var(--app-tint-4); background:var(--app-tint-1); color:var(--app-fg-2); border-radius:999px; padding:5px 11px; font-family:inherit; font-size:11.5px; font-weight:600; cursor:pointer; display:inline-flex; gap:7px; align-items:center; }
.vp-chip.on { background:rgba(244,121,32,.14); border-color:var(--mx-orange); color:var(--app-fg-1); }
.vp-chip .n { font-family:var(--mx-font-mono); font-size:10.5px; color:var(--app-fg-4); }
.vp-chip .d { width:8px; height:8px; border-radius:50%; display:inline-block; }
.vp-chip .d.cae { background:var(--vp-warn); } .vp-chip .d.est { background:var(--app-fg-4); } .vp-chip .d.sube { background:var(--vp-good); }
.vp-spark { display:block; }
.vp-spark .ln { fill:none; stroke:var(--mx-orange); stroke-width:1.8; stroke-linejoin:round; }
.vp-spark .ar { fill:rgba(244,121,32,.10); stroke:none; }
.vp-cov { display:inline-flex; align-items:center; gap:8px; justify-content:flex-end; font-family:var(--mx-font-mono); }
.vp-cov i { width:56px; height:6px; border-radius:3px; background:var(--app-tint-3); overflow:hidden; display:inline-block; }
.vp-cov b { display:block; height:100%; border-radius:3px; }
.vp-det td { background:var(--app-tint-1); padding:16px 18px !important; white-space:normal !important; text-align:left !important; }
.vp-det-g { display:grid; grid-template-columns:minmax(0,2fr) minmax(220px,1fr); gap:20px; align-items:start; }
.vp-facts { display:grid; gap:8px; }
.vp-facts > div { display:flex; justify-content:space-between; gap:10px; font-size:12.5px; border-bottom:1px solid var(--app-tint-3); padding-bottom:7px; }
.vp-facts span { color:var(--app-fg-3); } .vp-facts b { font-family:var(--mx-font-mono); color:var(--app-fg-1); }
/* barra de arriba: periodos y frescura */
.vp-perwrap { position:relative; }
.vp-perwrap .seg button { display:inline-flex; gap:6px; align-items:center; }
.vp-perpop { position:absolute; top:calc(100% + 6px); left:0; z-index:320; width:260px; padding:12px; display:grid; gap:10px; }
.vp-perrow { display:grid; grid-template-columns:52px 1fr; align-items:center; gap:8px; font-size:12px; color:var(--app-fg-3); }
.vp-perrow input { font-family:inherit; font-size:12.5px; padding:6px 8px; border-radius:6px; border:1px solid var(--app-tint-4); background:var(--app-tint-1); color:var(--app-fg-1); color-scheme:dark; }
body[data-theme="light"] .vp-perrow input { color-scheme:light; }
.vp-perpop .vp-btn { justify-content:center; }
.vp-fresh { margin-left:auto; display:flex; gap:10px; flex-wrap:wrap; }
.vp-fp { display:flex; gap:9px; align-items:center; border:1px solid var(--app-tint-4); background:var(--app-tint-1); border-radius:9px; padding:6px 12px; }
.vp-fp b { display:block; font-size:12.5px; color:var(--app-fg-1); font-weight:700; }
.vp-fp span { display:block; font-size:10.5px; color:var(--app-fg-4); }
.vp-fp > i { width:8px; height:8px; border-radius:50%; flex:none; background:var(--vp-good); box-shadow:0 0 0 3px rgba(34,197,94,.18); }
.vp-fp > i.warn { background:var(--vp-warn); box-shadow:0 0 0 3px rgba(245,158,11,.18); }
@media (max-width: 1100px) {
  .ven-bq .vp-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .vp-poboxes { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .vp-det-g { grid-template-columns:1fr; }
  .vp-fresh { margin-left:0; }
}

/* ── Casos Amazon: casos abiertos con Seller/Vendor Support (hola@) ── */
.csx-wrap { display: flex; flex-direction: column; gap: 0; }
.csx-fresh { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--app-fg-3); margin-bottom: 14px; }
.csx-fresh i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; flex: none; }
.csx-fresh i.run { background: #f59e0b; animation: csx-pulse 1s ease-in-out infinite; }
.csx-fresh i.bad { background: #ef4444; }
.csx-fresh .sp, .csx-bar .sp { flex: 1; }
@keyframes csx-pulse { 50% { opacity: .35; } }
.csx-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.csx-tile { border-radius: 10px; padding: 14px 16px; border: 1px solid var(--app-border); background: var(--app-surface); border-left: 4px solid var(--c); cursor: pointer; text-align: left; font-family: inherit; color: inherit; }
.csx-tile.on { background: color-mix(in srgb, var(--c) 10%, var(--app-surface)); }
.csx-tile .l { font-family: var(--mx-font-display); font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700; color: var(--app-fg-3); }
.csx-tile .v { font-family: var(--mx-font-display); font-size: 32px; font-weight: 800; color: var(--app-fg-1); line-height: 1.1; margin-top: 4px; }
.csx-tile .s { font-size: 11.5px; color: var(--app-fg-3); margin-top: 2px; }
.csx-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.csx-tgl { display: inline-flex; gap: 8px; align-items: center; font-size: 12px; color: var(--app-fg-2); cursor: pointer; font-weight: 600; user-select: none; }
.csx-tgl i { width: 30px; height: 17px; border-radius: 999px; background: var(--app-tint-4); position: relative; display: inline-block; }
.csx-tgl i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; transition: left .15s; }
.csx-tgl.on i { background: var(--mx-orange); }
.csx-tgl.on i::after { left: 15px; }
.csx-sec { font-family: var(--mx-font-display); font-size: 20px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--app-fg-1); margin: 6px 0 10px; display: flex; gap: 10px; align-items: baseline; }
.csx-sec small { font-size: 12px; color: var(--app-fg-4); font-weight: 600; letter-spacing: 0; text-transform: none; font-family: inherit; }
.csx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 12px; margin-bottom: 22px; }
.csx-card { background: var(--app-surface); border: 1px solid var(--app-border); border-left: 4px solid var(--c); border-radius: 10px; padding: 13px 15px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; }
.csx-card:hover { border-color: var(--app-tint-5); border-left-color: var(--c); }
.csx-card.sel { box-shadow: 0 0 0 2px var(--mx-orange); }
.csx-top { display: flex; gap: 10px; align-items: center; }
.csx-brand { width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; color: #fff; background: #475569; font-weight: 700; font-size: 10px; font-family: var(--mx-font-display); flex: none; }
.csx-brand.sin { background: rgba(239,68,68,.85); }
.csx-id { flex: 1; min-width: 0; }
.csx-id .nm { font-weight: 700; font-size: 13.5px; color: var(--app-fg-1); }
.csx-id .mt { font-size: 11px; color: var(--app-fg-4); font-family: var(--mx-font-mono); white-space: nowrap; }
.csx-id .nm { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.csx-owners { display: inline-flex; gap: 4px; }
.csx-st { display: inline-flex; padding: 3px 9px; border-radius: 8px; font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.csx-st.acc { background: rgba(244,121,32,.16); color: #c2410c; }
.csx-st.esp { background: rgba(245,158,11,.16); color: #b45309; }
.csx-st.abi { background: rgba(59,130,246,.15); color: #1d4ed8; }
.csx-st.cer { background: var(--app-tint-3); color: var(--app-fg-3); }
.csx-st.esp_ags { background: rgba(139,92,246,.16); color: #6d28d9; }
.csx-st.resp_ags { background: rgba(244,121,32,.16); color: #c2410c; }
[data-theme="dark"] .csx-st.esp_ags { color: #c4b5fd; }
[data-theme="dark"] .csx-st.resp_ags { color: #fdba74; }
.csx-sec.esc { color: #8b5cf6; }
.csx-escalado { color: #8b5cf6; font-weight: 700; }
[data-theme="dark"] .csx-st.acc { color: #fdba74; }
[data-theme="dark"] .csx-st.esp { color: #fbbf24; }
[data-theme="dark"] .csx-st.abi { color: #93c5fd; }
.csx-ctx { font-size: 12.5px; color: var(--app-fg-2); line-height: 1.45; }
.csx-ctx.sm { font-size: 12px; color: var(--app-fg-3); }
.csx-when { font-size: 15px; font-weight: 700; color: var(--app-fg-1); line-height: 1.35; margin-bottom: 6px; }
.csx-when .l { display: block; font-family: var(--mx-font-display); font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--app-fg-4); font-weight: 700; margin-bottom: 2px; }
.csx-foot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 11px; color: var(--app-fg-4); }
.csx-foot .r { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.csx-days { font-family: var(--mx-font-mono); font-weight: 700; font-size: 11px; padding: 2px 7px; border-radius: 6px; }
.csx-days.g { background: rgba(34,197,94,.14); color: #15803d; }
.csx-days.a { background: rgba(245,158,11,.16); color: #b45309; }
.csx-days.r { background: rgba(239,68,68,.14); color: #dc2626; }
[data-theme="dark"] .csx-days.g { color: #86efac; }
[data-theme="dark"] .csx-days.a { color: #fbbf24; }
[data-theme="dark"] .csx-days.r { color: #fca5a5; }
.csx-nuevo { font-size: 9.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; background: var(--mx-orange); color: #fff; border-radius: 5px; padding: 2px 6px; vertical-align: 1px; }
.csx-empty { padding: 30px; text-align: center; color: var(--app-fg-3); font-size: 13px; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 10px; display: flex; gap: 10px; justify-content: center; align-items: center; }
.csx-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--app-tint-4); border-top-color: var(--mx-orange); animation: csx-rot .8s linear infinite; }
@keyframes csx-rot { to { transform: rotate(360deg); } }
.csx-err { font-size: 12px; color: #ef4444; background: rgba(239,68,68,.08); border-radius: 8px; padding: 8px 10px; margin-bottom: 12px; }
.csx-drawer .top .csx-ctx { margin-top: 2px; }
.csx-why { font-size: 11.5px; color: var(--app-fg-3); background: var(--app-tint-1); border-radius: 8px; padding: 8px 10px; line-height: 1.45; margin: 8px 0; }
.csx-stpick { display: flex; gap: 6px; flex-wrap: wrap; }
.csx-stpick button { border: 1px solid var(--app-tint-4); background: var(--app-tint-1); color: var(--app-fg-2); border-radius: 8px; padding: 6px 10px; font-size: 11.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.csx-stpick button.on { border-color: var(--mx-orange); background: rgba(244,121,32,.14); color: var(--app-fg-1); }
.csx-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.csx-owner { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 600; color: var(--app-fg-1); margin-right: 10px; }
.csx-owner.sin { color: #ef4444; }
.csx-hint { font-size: 11px; color: var(--app-fg-4); margin-top: 4px; line-height: 1.45; }
.csx-select, .csx-input { width: 100%; box-sizing: border-box; border: 1px solid var(--app-tint-4); background: var(--app-tint-1); color: var(--app-fg-1); border-radius: 8px; padding: 7px 9px; font-family: inherit; font-size: 12.5px; }
textarea.csx-input { resize: vertical; }
.csx-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.csx-actions a.btn { text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.csx-form { display: flex; flex-direction: column; gap: 10px; }
.csx-form label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--app-fg-4); font-weight: 700; text-transform: uppercase; letter-spacing: .8px; }
.csx-tl .m { display: grid; grid-template-columns: 14px 1fr; gap: 10px; padding-bottom: 14px; position: relative; }
.csx-tl .m::before { content: ''; position: absolute; left: 6px; top: 14px; bottom: 0; width: 2px; background: var(--app-tint-3); }
.csx-tl .m:last-child::before { display: none; }
.csx-tl .dot { width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--app-surface); background: var(--app-tint-5); margin-top: 2px; z-index: 1; box-sizing: border-box; }
.csx-tl .dot.amz { background: #f59e0b; }
.csx-tl .dot.mx { background: var(--mx-orange); }
.csx-tl .who { font-size: 11.5px; font-weight: 700; color: var(--app-fg-1); }
.csx-tl .who span { font-weight: 500; color: var(--app-fg-4); font-family: var(--mx-font-mono); font-size: 10.5px; margin-left: 6px; }
.csx-tl .tx { font-size: 12px; color: var(--app-fg-2); line-height: 1.45; margin-top: 3px; white-space: pre-line; }
@media (max-width: 1100px) { .csx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }