/* ── Reset & Base ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  background: var(--bg-main);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.015'/%3E%3C/svg%3E");
}
button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
button:active { transform: scale(0.96); opacity: 0.85; }
a      { -webkit-tap-highlight-color: transparent; }

/* ── Keyboard focus ring ────────────────────────────────── */
/* Visible only on keyboard navigation, invisible for mouse/touch */
:focus-visible {
  outline: 2px solid rgba(74, 130, 240,.55);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }
/* Form inputs use box-shadow for focus — suppress double indicator */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
}

:root {
  --bg:          #05070f;
  --bg-card:     #1a1a1a;
  --bg-card-2:   #212121;
  --border:      #272727;
  --border-hi:   #303030;
  --accent:      var(--aurix-blue);  /* AURIX-DESIGN-SYSTEM-1: legacy accent → canonical blue */
  --accent-dim:  #1a2438;
  --green:       var(--aurix-success);
  --green-dim:   rgba(63, 191, 127,.09);
  --red:         var(--aurix-danger);  /* AURIX-DESIGN-SYSTEM-1: → canonical danger */
  --orange:      #e0904a;
  --text:        #e6e6e8;
  --text-bright: rgba(255,255,255,0.985);  /* AURIX-VISUAL-CLARITY-1: Level-1 crispness — the top tier (key numbers/emphasis) reads truly clean so the hierarchy gap below it widens, without brightening the UI overall */
  --text-muted:  #b0b4bd;  /* AURIX-DASH-V1: was #a0a0a0 — lift secondary text toward soft white for low-brightness legibility */
  --text-dim:    #686c75;  /* AURIX-DASH-V1: was #484848 — tertiary (dates/prices/inactive) now readable, not near-invisible */
  --radius:      12px;
  --radius-sm:   8px;
  --radius-xs:   6px;
  --shadow:      0 4px 20px rgba(0,0,0,.4);
  --shadow-sm:   0 2px 8px rgba(0,0,0,.28);
  /* Easing curves */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:  cubic-bezier(0.34, 1.1, 0.64, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  /* Timing — slightly slower for more refined feel */
  --dur-tap:  80ms;
  --dur-fast: 160ms;
  --dur-med:  290ms;
  --dur-slow: 420ms;
  /* Glow system — removed; any var(--glow-*) renders as none */
  --glow-soft:   none;
  --glow-medium: none;
  --glow-strong: none;
  /* ════════ AURIX DESIGN SYSTEM v1 — canonical brand tokens (AURIX-DESIGN-SYSTEM-1)
     Single source of truth. ONE blue + its states, one success / danger /
     warning, one bg / card / border, two text levels. Legacy token names alias
     into these (here and below) so existing rules stay coherent with no
     per-rule edits. New rules must consume these, never raw literals. */
  --aurix-blue:         #4A82F0;                 /* primary action: buttons, active tabs, focus, links */
  --aurix-blue-hover:   var(--aurix-blue-hover);                 /* hover / pressed lift */
  --aurix-blue-soft:    rgba(74, 130, 240, .16); /* soft tint / fill */
  --aurix-blue-border:  rgba(74, 130, 240, .28); /* active / accent border */
  --aurix-blue-glow:    rgba(74, 130, 240, .35); /* glow color — use inside box-shadow */

  --aurix-success:      #3fbf7f;
  --aurix-danger:       #e05a5a;
  --aurix-warning:      #e9a857;

  --aurix-bg:           #070a14;
  --aurix-card:         #11161f;
  --aurix-border:       var(--aurix-blue-border);

  --aurix-text:           rgba(255, 255, 255, 0.92);
  --aurix-text-secondary: rgba(255, 255, 255, 0.68);  /* AURIX-VISUAL-CLARITY-1: Level-2 secondary reads "without effort" at low brightness/OLED; still clearly below the primary tier */

  /* Legacy blue alias → canonical (the cyan #2bc8f2 is retired; do not assign
     new literals to --aurix-blue-light). */
  --aurix-blue-light:   var(--aurix-blue);
  /* Category palette */
  --color-crypto:      #2563EB;
  --color-real-estate: #7C3AED;
  --color-funds:       #0891B2;
  --color-stocks:      #EA580C;
  --color-cash:        #16A34A;
  --color-metals:      #CA8A04;

  /* ── Spacing tokens ── */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 20px;
  --space-5: 24px;
  --space-6: 32px;

  /* ── Radius tokens (additive — --radius/--radius-sm/--radius-xs kept for compat) ── */
  --radius-md: 16px;
  --radius-lg: 20px;

  /* ── Typography tokens ── */
  --font-size-xs:  12px;
  --font-size-sm:  14px;
  --font-size-md:  16px;
  --font-size-lg:  20px;
  --font-size-xl:  28px;

  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;

  /* ── Color tokens (additive — existing --bg-* vars untouched) ── */
  /* Backgrounds — map to existing vars; #121212/#181818 not in codebase yet */
  --color-bg-primary:   var(--bg);
  --color-bg-surface:   var(--bg-card);
  --color-bg-elevated:  var(--bg-card-2);

  /* Borders — exact matches present in CSS */
  --color-border-subtle:  rgba(255, 255, 255, 0.08);  /* AURIX-VISUAL-CLARITY-1: Level-4 card edges hold their separation at 20–50% brightness / OLED (was 0.06 → vanished); still a hairline at full brightness — depth without heavier shadows */
  --color-border-default: rgba(255, 255, 255, 0.10);

  /* Text */
  --color-text-primary:   #FFFFFF;
  --color-text-secondary: rgba(255, 255, 255, 0.7);
  --color-text-tertiary:  rgba(255, 255, 255, 0.5);

  /* States */
  --color-positive: var(--aurix-success);
  --color-negative: var(--aurix-danger);

  /* ── Visual system ── */
  --bg-main:    #0B0F1A;
  --surface-1:  rgba(255,255,255,0.03);
  --surface-2:  rgba(255,255,255,0.05);
  --surface-3:  rgba(255,255,255,0.08);
  --border-subtle: rgba(255,255,255,0.08);  /* AURIX-VISUAL-CLARITY-1: kept in step with --color-border-subtle (0.06→0.08) — card edge separation at low brightness */
  --border-strong: rgba(255,255,255,0.10);  /* alias of --color-border-default */
  --accent:        var(--aurix-blue);  /* AURIX-DESIGN-SYSTEM-1: legacy accent → canonical blue */
  --text-primary:  #FFFFFF;
  --text-secondary: rgba(255,255,255,0.7);
  --text-tertiary:  rgba(255,255,255,0.5);

  /* UI-POLISH-1 glass surfaces — additive (never reassign legacy --bg-* /
     --surface-*). The blue tokens here now alias the canonical AURIX DESIGN
     SYSTEM values above so the whole app reads as one blue. */
  --aurix-surface:    rgba(20, 30, 56, 0.55);
  --aurix-surface-2:  rgba(28, 42, 74, 0.48);
  --aurix-border-hi:  var(--aurix-blue-border);
  --aurix-blue-fill:  var(--aurix-blue-soft);
  --aurix-glow:       0 6px 22px -10px var(--aurix-blue-glow);

  /* MODAL-SYSTEM-1: safe-area reservations for mobile modals so they
     never visually go under the bottom navigation. Bottom nav is
     `.bottom-nav { height: 60px }` (line ~5975). The gap adds a touch
     of breathing room above the nav. */
  --aurix-bottom-nav-height:  60px;
  --aurix-modal-mobile-gap:   12px;
  --aurix-modal-safe-bottom:  calc(
    var(--aurix-bottom-nav-height) + env(safe-area-inset-bottom) + var(--aurix-modal-mobile-gap)
  );
}

body {
  background: var(--bg-main);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  min-height: 100vh;
  min-height: 100dvh; /* BLOQUE-1.4 — dvh progressive enhancement (Safari iOS dynamic toolbar); vh kept as fallback */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color 400ms cubic-bezier(0.22, 1, 0.36, 1), all 1.5s ease;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 40%, rgba(74, 130, 240,0.12), transparent 60%),
    radial-gradient(circle at 70% 65%, rgba(0,255,180,0.08), transparent 70%);
  z-index: -2;
  transition: all 1.5s ease;
}
.ambient-text-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}
.ambient-text {
  position: absolute;
  font-size: var(--font-size-sm);
  color: rgba(255,255,255,0.08);
  font-weight: 400;
  letter-spacing: 0.5px;
  opacity: 0;
  transform: translateY(10px) translateX(0px);
  animation: floatText 12s ease forwards;
  white-space: nowrap;
  user-select: none;
}
@keyframes floatText {
  0%   { opacity: 0;   transform: translateY(10px)  translateX(0px);  }
  20%  { opacity: 1;                                                    }
  80%  { opacity: 1;   transform: translateY(-10px) translateX(20px);  }
  100% { opacity: 0;   transform: translateY(-20px) translateX(40px);  }
}
/* Subtle background darkening when drilling into a category */
body.is-detail-view {
  background-color: #090a0f;
}

/* ── Page & card entrance ──────────────────────────────── */
@keyframes page-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
main { animation: page-enter .4s var(--ease-out) forwards; }

@keyframes section-enter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hero card: always visible on load — subtle lift-in */
.hero-card {
  animation: section-enter 0.5s var(--ease-out) 0.05s both;
}

/* Distribution + categories: animate on first appearance (JS adds .is-entering) */
.distribution-section.is-entering {
  animation: section-enter 0.45s var(--ease-out) 0.08s both;
}
.categories-section.is-entering {
  animation: section-enter 0.45s var(--ease-out) 0.15s both;
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .hero-card,
  .distribution-section.is-entering,
  .categories-section.is-entering { animation: none; }
}

@keyframes card-enter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* AURIX-PWA-FIRST-FRAME: removed the dead `logo-enter` keyframe (translateY +
   scale). Its consumer was already deleted when the wordmark entrance animation
   was retired; keeping a motion keyframe around is a foot-gun for the
   "no movement on boot" guarantee. */

/* ── Skeleton shimmer ───────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.skeleton {
  color: transparent !important;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.04) 25%,
    rgba(255,255,255,.12) 37%,
    rgba(255,255,255,.04) 63%
  );
  background-size: 200% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
  border-radius: 8px;
  user-select: none;
  pointer-events: none;
}

/* ── UX-LOADING-1: standardized async-button busy state ───
   Pairs with services/ux.js (setButtonBusy). Adds a subtle
   opacity + cursor signal without changing layout. Scoped
   to <button> so it does not collide with the existing
   table-cell rules (.col-change.is-loading / .col-chart.is-loading)
   which keep their own treatment. */
button.is-loading,
button[aria-busy="true"] {
  pointer-events: none;
  opacity: 0.72;
  cursor: progress;
  transition: opacity 160ms ease;
}

/* ── App Shell ─────────────────────────────────────────── */
.app {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--space-6) 64px;
  background: var(--bg-main);
}

/* AURIX-DESKTOP-LAYOUT-1 — widen the content shell on desktop so 1440px /
   1920px screens stop leaving a tiny centred app. Desktop-only (>=1024px);
   below this width the 1080px cap never constrained anything (the viewport
   is already narrower), so mobile and tablet stay visually identical.
   Workspace keeps its own full-bleed shell via body.workspace-active .app. */
@media (min-width: 1024px) {
  .app { max-width: 1280px; }
}

/* Wide desktop: lay the dashboard asset list out in two columns so cards
   don't stretch into long, sparse single-column rows on big monitors. The
   category-detail list (a single stacked card of rows) is excluded, and any
   non-card child (empty state, drag placeholder) spans the full width so it
   is never awkwardly half-width. Below 1280px the list stays single-column,
   and the mobile touch-reorder path (single column) is untouched. */
@media (min-width: 1280px) {
  .assets-list:not(.assets-list--detail) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    align-items: start;
  }
  .assets-list:not(.assets-list--detail) > :not(.asset-card) {
    grid-column: 1 / -1;
  }
}

/* ── Header ────────────────────────────────────────────── */
.header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: var(--space-3) 0 11px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  margin-bottom: var(--space-1);
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  transition: background .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s var(--ease-out);
}

.header--scrolled {
  background: rgba(11,15,26,0.80);
  /* AURIX-BRAND-PREMIUM-1: deeper, less-saturated glass reads more refined and
     "expensive" than an oversaturated blur — same darkness, calmer colour. */
  backdrop-filter: blur(24px) saturate(120%);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
  /* AURIX-BRAND-PREMIUM-HEADER-2 (B2): more elegant separation — inner top
     light, a faint Aurix-blue hairline at the base, and a softer deeper shadow
     so the header reads as a premium glass plane floating above content. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 1px 0 rgba(74,130,240,.05),
    0 12px 34px -14px rgba(0,0,0,.55);
  border-color: transparent;
}

.header-left {
  justify-self: center;
  grid-column: 2;
}

/* ── Logo ──────────────────────────────────────────────── */
.logo-block {
  display: flex;
  flex-direction: column;
  line-height: 1;
  user-select: none;
  margin-top: 2px;
  /* button reset */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ── AURIX brand mark — shared base ───────────────────── */
.logo-aurix {
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-weight: var(--font-weight-semibold);
  letter-spacing: .60em;
  text-transform: uppercase;
  line-height: 1;
  display: block;
  /* AURIX-BRAND-PREMIUM-HEADER-2 (B1): premium, near-imperceptible material
     gradient #6A9CFF → #4A82F0. The DS unification had collapsed
     --aurix-blue-light onto --aurix-blue (both #4A82F0), flattening the
     wordmark into a single flat blue — this restores subtle depth so it reads
     as "better material", not a visible gradient. Sharper text rendering. */
  background: linear-gradient(168deg, #6A9CFF 0%, #4A82F0 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Dashboard header variant — refined brand mark */
.logo-block .logo-aurix {
  font-size: 21px;
  letter-spacing: .38em;
  transform: scaleX(1.18) scaleY(0.86);
  transform-origin: center center;
  /* AURIX-PWA-FIRST-FRAME-CRITICAL-1: removed the `logo-enter` entrance
     animation (translateY + opacity) — it was the visible wordmark "movement"
     on boot. The mark now appears static at full opacity; the splash → header
     handoff is a clean fade with no motion. */
  transition: opacity .15s, filter .15s;
  /* AURIX-WORDMARK-RECTANGLE-BUG-1 (HOTFIX): the premium passes added a
     `background:` SHORTHAND here, which resets background-clip back to
     border-box — the gradient then rendered as a SOLID BLUE RECTANGLE while the
     transparent text (-webkit-text-fill-color from the base) vanished. Fix: drop
     the background override entirely so the header mark inherits the base
     .logo-aurix rule, where `background` and `-webkit-background-clip:text` live
     together and always clip to the glyphs. Restored the prior stable glow.
     (Re-premiumise later ONLY by re-asserting the clip in the SAME rule as any
     background override.) */
  filter: drop-shadow(0 1px 8px rgba(74, 130, 240, 0.10)) drop-shadow(0 0 20px rgba(74, 130, 240, 0.06));
}
#logoHome:hover .logo-aurix { opacity: .75; }
#logoHome:active .logo-aurix { opacity: .55; transition-duration: 60ms; }

/* Login hero variant */
.beta-logo-above .logo-aurix { font-size: 32px; }

.header-right {
  display: flex;
  align-items: center;
  justify-self: end;
  grid-column: 3;
  gap: 10px;
  position: relative; /* contains the dropdown panel */
}

/* Hidden proxy button — keeps revokeAccess listener, never shown */
#btnExit { display: none !important; }

/* Desktop-only header-search — hidden by default so mobile stays clean */
.header-search { display: none; }

/* ── Language switcher ─────────────────────────────────── */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
}

.lang-btn {
  background: none;
  border: none;
  border-radius: 7px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  opacity: .35;
  transition: opacity .18s var(--ease-out), background .18s var(--ease-out), transform .15s var(--ease-premium);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  line-height: 1;
}

.lang-btn:hover  { opacity: .7; }
.lang-btn.active { opacity: 1; background: rgba(255,255,255,.08); }
.lang-btn:active { transform: scale(.9); }

.currency-toggle {
  display: flex;
  background: transparent;
  border: none;
  padding: 0;
  gap: 6px;
}

.currency-btn {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xs);
  padding: 4px 9px;
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  color: var(--text-dim);
  cursor: pointer;
  letter-spacing: .2px;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-premium),
              filter var(--dur-fast) var(--ease-premium),
              opacity var(--dur-fast);
}
.currency-btn:hover {
  background: rgba(255,255,255,.04);
  color: var(--text-muted);
  border-color: rgba(255,255,255,.18);
}
.currency-btn.active {
  background: rgba(255,255,255,.09);
  color: var(--text);
  border-color: rgba(255,255,255,.20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.currency-btn:active {
  transform: scale(.92);
  filter: brightness(.84);
  opacity: .78;
  transition: transform var(--dur-tap) var(--ease-premium),
              filter var(--dur-tap) var(--ease-premium),
              opacity var(--dur-tap);
}

.btn-add {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: opacity var(--dur-fast), transform var(--dur-med) var(--ease-premium),
              box-shadow var(--dur-med) var(--ease-out);
}
.btn-add:hover  { opacity: .9; transform: translateY(-1px); box-shadow: var(--glow-medium); }
.btn-add:active { transform: scale(.97); box-shadow: none; transition-duration: 70ms; }

.summary-actions {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.btn-summary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  font-weight: var(--font-weight-medium);
  padding: 6px var(--space-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s var(--ease-out), border-color .18s var(--ease-out),
              color .15s, transform .2s var(--ease-premium),
              box-shadow .2s var(--ease-out), opacity .15s;
}
/* Dashboard add buttons — unified accent style, consistent with category screens */
.btn-primary,
.btn-secondary {
  background: rgba(74, 130, 240,.08);
  border: 1px solid rgba(74, 130, 240,.22);
  color: var(--accent);
  box-shadow: 0 4px 12px rgba(74, 130, 240,0.25);
  font-weight: var(--font-weight-semibold);
}

/* AURIX-HERO-PREMIUM-REFINE-1: clear primary/secondary hierarchy for the hero
   add buttons with a calmer glow. Scoped to .btn-summary-action so global
   .btn-primary / .btn-secondary used elsewhere (modals etc.) are untouched.
   Primary = subtle accent fill; Secondary = quiet ghost outline. */
.btn-summary-action.btn-primary {
  /* AURIX-BRAND-PREMIUM-1: lit-glass material — a subtle top→bottom accent
     gradient (same brightness envelope as the old flat 0.14 fill), a 1px inset
     top highlight, and a tighter contact + ambient shadow. Reads crafted and
     "expensive" without being larger, brighter or louder. */
  /* AURIX-DASH-V2: quieter operational CTA — dropped the blue ambient glow so
     the wealth figure dominates and the Intelligence pill reads as the layer above. */
  background: linear-gradient(180deg, rgba(74,130,240,0.14), rgba(74,130,240,0.09));
  border-color: rgba(74, 130, 240,0.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 1px 2px rgba(0,0,0,0.18);
  /* P0-HERO-PREMIUM-POLISH: white label (was accent-on-accent, low contrast) so the
     primary action reads instantly. Border + fill kept exactly as before. */
  color: #fff;
}
.btn-summary-action.btn-primary:hover {
  /* P0-HERO-PREMIUM-POLISH: hover fills with solid electric blue + white text so it
     unmistakably reads as THE primary action. Scoped (beats the generic hover). */
  background: linear-gradient(180deg, #4f8bff, #3f78ee);
  border-color: rgba(74,130,240,0.70);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 2px 6px rgba(0,0,0,0.22),
    0 8px 20px -6px rgba(74,130,240,0.45);
}
.btn-summary-action.btn-secondary {
  /* AURIX-WEALTH-CARD-HIERARCHY-REFINEMENT-1: lift the secondary to the same
     visual level as the primary — brighter text, a present premium outline and
     a faint fill — so "Añadir liquidez" reads as an equal action, not a faded
     ghost. Stays neutral (vs the primary's Aurix-blue) to keep the hierarchy. */
  /* P0-HERO-PREMIUM-POLISH: secondary = transparent fill + electric-blue outline +
     white text. Clear contrast vs the dark hero, clear hierarchy vs the FILLED primary. */
  background: transparent;
  border-color: rgba(74,130,240,0.55);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.btn-summary-action.btn-secondary:hover {
  background: rgba(74,130,240,0.12);
  border-color: rgba(74,130,240,0.85);
  color: #fff;
}
.btn-primary:hover,
.btn-secondary:hover {
  background: rgba(74, 130, 240,.15);
  border-color: rgba(74, 130, 240,.36);
  color: var(--aurix-blue);
  transform: scale(1.02);
  filter: none;
  box-shadow: none;
}
.btn-primary:active,
.btn-secondary:active {
  transform: scale(.93);
  filter: brightness(.82);
  opacity: .82;
  transition: transform var(--dur-tap) var(--ease-premium),
              filter var(--dur-tap) var(--ease-premium),
              opacity var(--dur-tap);
}


/* ── Summary Panel ─────────────────────────────────────── */
.summary-panel {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: var(--space-6) 40px;
  position: relative;
  overflow: hidden;
  transition: border-color var(--dur-med) var(--ease-premium);
}
.summary-panel:hover { border-color: var(--border-hi); }

/* Blobs removed */
.summary-panel::before,
.summary-panel::after { display: none; }

@keyframes panel-breathe {
  0%, 100% { opacity: 0; }
  50%       { opacity: 0; }
}

/* ── Card title — single source of truth ───────────────── */
.card-title {
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .14em;
  line-height: 1;
}

.summary-label {
  margin-bottom: 14px;
}

.summary-total {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: var(--font-weight-medium);
  color: rgba(255,255,255,0.95);
  letter-spacing: -0.5px;
  line-height: 1.1;
  margin-bottom: var(--space-4);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px rgba(255,255,255,0.15);
  animation: summaryFadeUp 0.6s ease forwards;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
}
/* Compact size when value string exceeds ~12 characters */
.summary-total--compact {
  font-size: 32px;
}

@keyframes summaryFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .summary-total { animation: none; }
}

.summary-perf {
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  letter-spacing: .01em;
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
  transition: color 300ms var(--ease-out);
}
.summary-perf.positive { color: var(--green); }
.summary-perf.negative { color: var(--red); }
.positive { text-shadow: 0 0 6px rgba(63, 191, 127,0.3); }
.negative { text-shadow: 0 0 6px rgba(224, 90, 90,0.25); }

.summary-meta {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0;
}

.summary-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
}
.summary-currency {
  flex-shrink: 0;
}
.summary-currency .currency-toggle {
  display: inline-flex;
  gap: 4px;
}

.summary-footer {
  /* AURIX-WEALTH-CARD-HIERARCHY-REFINEMENT-1: actions sit immediately after the
     info block (new order: value → actions → health). No longer bottom-anchored
     — margin-top:auto created a big central void that buried the buttons and
     over-promoted the health row. A comfortable fixed top margin gives premium
     air without a dead gap. Visual order (footer before the health pill) is set
     via `order` on desktop. Desktop only (display:none ≤768px). Divider stays
     removed. */
  margin-top: var(--space-4);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
/* AURIX-DASHBOARD-HERO-COMPOSITION-FIX-1: a touch more presence for the hero add
   actions on desktop so they read as clear primary/secondary actions, not faint
   chips — modest, not enormous. Primary keeps its lit-glass weight over the
   ghost secondary. Desktop only (the buttons are hidden ≤768px). */
@media (min-width: 769px) {
  .summary-footer .btn-summary-action {
    font-size: 12px;            /* AURIX-DASH-V3: slightly quieter than the wealth hero */
    padding: 7px 14px;
  }
}

/* AURIX-DASH-V1: elevated interior zone — the most important surface on the
   platform. Wraps label → value → meta in a slightly more luminous, raised
   panel with relief + a soft blue glow so the user's wealth reads instantly. */
/* AURIX-DASH-V4: the inner capsule is GONE — no chrome. The wealth content lives
   directly on the hero card (one premium surface, no box-in-box) at every size.
   Pure layout wrapper now; spacing comes from the label/figure/meta margins and
   the hero-left padding. */
.summary-hero-zone {
  position: relative;
}
/* Figure gets more presence inside the zone — a tighter, bluer glow than the
   global soft white text-shadow. */
.summary-hero-zone .summary-total {
  text-shadow: 0 0 18px rgba(74,130,240,0.30), 0 0 8px rgba(255,255,255,0.12);
}
.summary-hero-zone .summary-meta { color: var(--text-muted); }
/* AURIX-DASH-V4: the two hero titles ("VALOR TOTAL DE CARTERA" / "EVOLUCIÓN DEL
   PATRIMONIO") are one system — identical card-title typography (size/weight/
   tracking) + a single slightly-brighter premium tone (~12% over --text-muted,
   not white, not grey). They already share .card-title; this only lifts colour. */
.summary-label.card-title,
.chart-title.card-title {
  color: rgba(214, 221, 235, 0.74);
}
/* AURIX-DASH-V4: capsule removed — content fills the left panel directly (more
   amplitude). Just the vertical breathing so the figure dominates. Desktop only. */
@media (min-width: 769px) {
  .summary-hero-zone .summary-label { margin-bottom: 20px; }   /* label → figure breathes */
  .summary-hero-zone .summary-total { margin-bottom: 18px; }   /* figure → meta separation */
  /* P0-HERO-PREMIUM-POLISH: a more relaxed vertical rhythm between the meta line
     ("N activos · Actualizado…") and the analytic state row (Riesgo + Ver análisis).
     Spacing only — typography/sizes untouched. */
  .summary-hero-zone .aurix-signal-row { margin-top: 16px; }
  /* P0-HERO-PREMIUM-POLISH: more solidity for the wealth figure WITHOUT enlarging it —
     same Aurix family, semibold weight + lining tabular numerals + a hair tighter
     tracking. DESKTOP ONLY (mobile figure untouched). */
  .summary-hero-zone .summary-total {
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.6px;
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
  }
}

/* ── Assets Section ────────────────────────────────────── */
.section-header h2 {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .14em;
}

/* ── Assets List ───────────────────────────────────────── */
.assets-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* ── Asset Card ────────────────────────────────────────── */
/* AURIX-DASH-V1: aligned to the Intelligence card material — blue-glass
   (radial+linear gradient), electric-blue border, inset top highlight and a
   soft contact shadow — so holdings never read as flat dark rows. */
.asset-card {
  background:
    radial-gradient(130% 130% at 10% 0%, rgba(74,130,240,0.08), transparent 58%),
    linear-gradient(165deg, rgba(28,40,68,0.42), rgba(15,21,37,0.50));
  border: 1px solid rgba(74,130,240,0.14);
  border-radius: 14px;   /* AURIX-DASH-V2: unify card-family radius (was --radius 12) */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 6px 20px -12px rgba(0,0,0,0.55), 0 0 20px -12px rgba(74,130,240,0.14);
  cursor: pointer;
  padding: 20px var(--space-4) 20px 18px;   /* AURIX-DASH-V2: more vertical air */
  display: grid;
  grid-template-columns: auto 1fr minmax(160px, auto) auto;
  align-items: center;
  gap: 0 var(--space-4);
  transition: border-color var(--dur-med) var(--ease-premium),
              transform var(--dur-med) var(--ease-premium),
              box-shadow var(--dur-med) var(--ease-out),
              opacity 200ms var(--ease-out);
}
.asset-card:hover {
  border-color: rgba(74,130,240,0.40);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.30), 0 0 0 1px rgba(74,130,240,0.10), 0 0 24px rgba(74,130,240,0.10);
}
.asset-card:active {
  transform: scale(.98);
  transition: transform var(--dur-tap) var(--ease-premium);
}

/* Stagger entrance — only fires when JS sets --card-i */
.asset-card[style*="--card-i"] {
  animation: card-enter .45s var(--ease-out) both;
  animation-delay: calc(var(--card-i, 0) * 45ms);
}

.asset-badge {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  flex-shrink: 0;
}
.asset-badge.crypto      { background: rgba(91,156,246,.15);  color: #5b9cf6; }
.asset-badge.stock       { background: rgba(192,200,216,.15); color: #c0c8d8; }
.asset-badge.etf         { background: rgba(143,157,186,.15); color: #8f9dba; }
.asset-badge.metal       { background: rgba(212,168,67,.15);  color: #d4a843; }
.asset-badge.cash        { background: rgba(63, 191, 127,.15);  color: var(--aurix-success); }
.asset-badge.real_estate { background: rgba(167,139,250,.15); color: #a78bfa; }
.asset-badge.other       { background: rgba(107,114,128,.15); color: #6b7280; }

/* When a real logo is showing, remove the coloured pill — show only the icon */
.badge--has-logo {
  background: none !important;
  box-shadow: none !important;
}

.asset-badge-logo {
  width: 28px; height: 28px;
  object-fit: contain;
  border-radius: 50%;
  display: block;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  padding: 0 !important;
}
.badge--has-logo .asset-badge-text { display: none; }
.dar-badge .asset-badge-logo { width: 22px; height: 22px; }

/* ══ AURIX-METALS-VISUAL-SYSTEM-V1 — premium metal icon badge ══════════════════
   When a badge renders a precious-metal asset it shows the Aurix metal glyph
   (bar / coin / ring) on a neutral dark plate (so gold AND silver tones pop),
   never the gold-tinted text pill. Works across every badge size class. */
.badge--metal-icon {
  padding: 0 !important;
  overflow: hidden;
  background: radial-gradient(circle at 38% 28%, rgba(58,74,116,0.45) 0%, rgba(17,23,40,0.96) 100%) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: none !important;
}
.badge--metal-icon svg {
  width: 74%;
  height: 74%;
  display: block;
}
/* Add-metal picker tile (#11 reuse) — same glyph, sized to the option icon box. */
.add-v2-icon--metal { overflow: hidden; }
.add-v2-icon--metal svg { width: 76%; height: 76%; display: block; }

.asset-info { min-width: 0; }

.asset-name {
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  color: var(--text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -.01em;
}

.asset-meta {
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--color-border-default);
  border-radius: 4px;
  padding: 2px 6px;
}

/*
 * Asset value block: 2-column grid
 *   col 1 = units + price/unit   (center position)
 *   col 2 = total value + change (right position, dominant)
 *
 * .asset-value-sub uses display:contents so its children
 * (.units, .price, .change) participate directly in this grid.
 */
.asset-value {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 22px;
  row-gap: 7px;   /* AURIX-DASH-V2: separate amount from change/participation */
  align-items: center;
}

/* Total value — right col, top row — most dominant element */
.asset-value-amount {
  grid-column: 2;
  grid-row: 1;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-bright);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
  letter-spacing: -.02em;
}

/* Dissolve sub-row into the parent grid */
.asset-value-sub {
  display: contents;
}

/* Units — left col, top row — clearly visible */
.asset-value-sub .units {
  grid-column: 1;
  grid-row: 1;
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: var(--text-muted);
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Price per unit — left col, bottom row — secondary info */
.asset-value-sub .price {
  grid-column: 1;
  grid-row: 2;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-dim);
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Change % — right col, bottom row — under the total value */
.asset-value-sub .change {
  grid-column: 2;
  grid-row: 2;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.asset-value-sub .change.up   { color: var(--green); }
.asset-value-sub .change.down { color: var(--red); }

/* Monthly rent — real estate asset cards */
@keyframes re-rent-pulse {
  0%, 100% { opacity: 1;    }
  50%       { opacity: 0.55; }
}
.asset-value-sub .asset-rent {
  grid-column: 2;
  grid-row: 2;
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
  animation: re-rent-pulse 5s ease-in-out infinite;
  will-change: opacity;
}

/* Monthly rent in category card */
.cat-card-rent-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
}
.cat-card-rent-lbl {
  font-size: 9.5px;
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1;
}
.cat-card-rent {
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  color: var(--green);
  font-variant-numeric: tabular-nums;
  animation: re-rent-pulse 5s ease-in-out infinite;
  will-change: opacity;
}

/* ── Rental income banner (Real Estate drill-down) ── */
.rent-banner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  background: rgba(63, 191, 127,.07);
  border: 1px solid rgba(63, 191, 127,.18);
  border-radius: 12px;
  padding: var(--space-2) var(--space-3);
  margin-bottom: 10px;
}
.rent-banner-label {
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.rent-banner-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  animation: re-rent-pulse 5s ease-in-out infinite;
  will-change: opacity;
}
.rent-banner--zero {
  background: rgba(255,255,255,.03);
  border-color: var(--border);
}
.rent-banner-zero {
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
}

.orig-price {
  color: var(--text-dim);
  font-size: 10px;
}

.curr-btn {
  flex: 1;
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: var(--space-1);
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: var(--text-muted);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.curr-btn.active { background: var(--accent); color: #fff; }

.asset-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: var(--space-3);
  border-left: 1px solid var(--border);
}

.btn-add-pos,
.btn-reduce,
.btn-delete,
.btn-edit-re {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xs);
  color: rgba(255,255,255,.52);
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast),
              transform var(--dur-fast) var(--ease-premium),
              filter var(--dur-fast) var(--ease-premium),
              opacity var(--dur-fast);
}
.btn-edit-re:hover {
  color: #a78bfa;
  background: rgba(167,139,250,.10);
  border-color: rgba(167,139,250,.25);
  transform: translateY(-1px);
}
.btn-add-pos:hover {
  color: var(--green);
  background: var(--green-dim);
  border-color: rgba(63, 191, 127,.25);
  transform: translateY(-1px);
}
.btn-reduce:hover {
  color: var(--orange);
  background: rgba(240,136,62,.10);
  border-color: rgba(240,136,62,.25);
  transform: translateY(-1px);
}
.btn-delete:hover {
  color: var(--red);
  background: rgba(224, 90, 90,.10);
  border-color: rgba(224, 90, 90,.25);
  transform: translateY(-1px);
}
.btn-add-pos:active,
.btn-reduce:active,
.btn-delete:active,
.btn-edit-re:active {
  transform: scale(.91);
  filter: brightness(.82);
  opacity: .82;
  transition: transform var(--dur-tap) var(--ease-premium),
              filter var(--dur-tap) var(--ease-premium),
              opacity var(--dur-tap);
}

/* ── Assets Section top spacing ────────────────────────── */
.assets-section { margin-top: var(--space-5); }

/* ── Market status badge — top-right corner of cat-card ─── */
.market-status {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  opacity: 0.75;
  pointer-events: none; /* let clicks pass through to the card */
}
.market-status .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.market-status.open   { color: var(--aurix-success); }
.market-status.closed { color: var(--aurix-danger); }
.market-status.crypto { color: #a855f7; }
.market-status.open   .dot { background: var(--aurix-success); animation: mkt-pulse 1.5s ease-in-out infinite; }
.market-status.closed .dot { background: var(--aurix-danger); }
.market-status.crypto .dot { background: #a855f7; }

@keyframes mkt-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

/* Gold-specific dot — kept for updateGoldTimestamps() back-compat */
.gold-live-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  animation: pulse-dot-glow 2s ease-out infinite;
}
.gold-live-dot.stale {
  background: var(--text-dim);
  animation: none;
}
/* Gold text spans — allow shrinking so they stay within narrow columns */
.js-gold-live,
.js-gold-change,
.js-gold-updated {
  min-width: 0;
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gold-change.positive { color: var(--green); }
.gold-change.negative { color: var(--red); }
.gold-change.neutral  { color: var(--text-muted); }

/* ── Empty State ───────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 60px var(--space-4);
  color: var(--text);
  border: 1px dashed rgba(74, 130, 240,.22);
  border-radius: var(--radius);
  background: radial-gradient(ellipse at 50% 0%, rgba(74, 130, 240,.03) 0%, transparent 70%);
}
.empty-icon {
  font-size: 32px;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.empty-state p { font-size: var(--font-size-sm); line-height: 1.6; }
.empty-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* ── Body scroll lock when any modal is open ───────────── */
body.modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  touch-action: none;
}

/* ── Modal ─────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s var(--ease-out), backdrop-filter .32s var(--ease-out),
              -webkit-backdrop-filter .32s var(--ease-out);
  padding: var(--space-3);
}
.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.modal {
  background: rgba(20,20,25,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform, opacity;
  overscroll-behavior: none;
  /* MC-7B: cap modal height + flex layout so a long ISIN expansion or a
     full add-asset form never pushes submit buttons off-screen on
     desktop. Mobile keeps the dedicated sheet layout in the media-query
     block below (which already sets overflow-y on .modal-body). */
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.modal-overlay.open .modal {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  /* MC-7B: header doesn't shrink so it stays pinned while body scrolls. */
  flex-shrink: 0;
}
.modal-header h3 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }

.modal-close {
  background: none; border: none;
  color: var(--text-muted);
  font-size: 15px; cursor: pointer;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  transition: color .15s var(--ease-out), background .15s var(--ease-out),
              transform .15s var(--ease-premium);
}
.modal-close:hover  { color: var(--text); background: var(--bg-card-2); }
.modal-close:active { transform: scale(.85); transition-duration: 70ms; }

/* Mobile drag handle for the bottom-sheet modal. Hidden on desktop
   (where the modal is a centred card) and revealed inside the mobile
   media query below. */
.sheet-handle {
  display: none;
}

/* Mobile-only ISIN toggle and helper hint. Hidden by default — the
   mobile media query reveals them and rewires the ISIN section to be
   collapsed until the user opts in. */
.isin-toggle-mobile,
.search-empty-hint {
  display: none;
}

/* ── ADD-V2.1: Step 1 type picker ────────────────────────────────
   Premium first-step picker that lives inside #modalOverlay. The
   .modal toggles data-step between "picker" and "form" — picker mode
   hides the existing form scaffolding (header + segmented toggle +
   #assetForm) and reveals #addV2Picker; form mode is the existing
   modal exactly as it was. Card clicks route to the existing flows
   (selectAsset / liquidityForm / enterRealEstateMode) — no submit or
   persistence logic is duplicated. */
.modal[data-step="picker"] > .modal-header,
.modal[data-step="picker"] > .add-type-toggle,
.modal[data-step="picker"] > #assetForm {
  display: none;
}
.modal:not([data-step="picker"]) > #addV2Picker {
  display: none;
}
/* AURIX-METALS-ADD-SHEET-FIX — metal-picker step: same chrome hiding as the
   generic picker, and show ONLY the metal picker section on this step. */
.modal[data-step="metal-picker"] > .modal-header,
.modal[data-step="metal-picker"] > .add-type-toggle,
.modal[data-step="metal-picker"] > #assetForm {
  display: none;
}
.modal:not([data-step="metal-picker"]) > #addV2MetalPicker {
  display: none;
}
.modal[data-step="metal-picker"] > #addV2MetalPicker {
  display: flex;
}

.add-v2-picker {
  display: flex;
  flex-direction: column;
  padding: 16px 20px 22px;
  gap: 14px;
}
.add-v2-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.add-v2-picker-head h3 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.add-v2-picker-sub {
  margin: -4px 0 4px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-muted);
  letter-spacing: 0.005em;
}
.add-v2-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.add-v2-card {
  display: grid;
  grid-template-columns: 44px 1fr 16px;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.07);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.22s ease;
}
.add-v2-card:hover {
  border-color: rgba(74, 130, 240,0.32);
  background: linear-gradient(180deg, rgba(74, 130, 240,0.08), rgba(74, 130, 240,0.02));
  box-shadow: 0 0 0 4px rgba(74, 130, 240,0.06);
}
.add-v2-card:active {
  transform: scale(0.985);
  box-shadow: 0 0 0 4px rgba(74, 130, 240,0.10);
}
.add-v2-card.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01));
  border-color: rgba(255,255,255,0.05);
}
.add-v2-card.is-disabled:hover {
  border-color: rgba(255,255,255,0.05);
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01));
  box-shadow: none;
}
.add-v2-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 700;
  color: rgba(74, 130, 240,0.95);
  background: rgba(74, 130, 240,0.10);
  border: 1px solid rgba(74, 130, 240,0.20);
}
.add-v2-card[data-pick="liquidity"] .add-v2-icon { color: #3FBF7F; background: rgba(63,191,127,0.10); border-color: rgba(63,191,127,0.22); }
.add-v2-card[data-pick="gold"]      .add-v2-icon { color: #E9C46A; background: rgba(233,196,106,0.10); border-color: rgba(233,196,106,0.24); }
.add-v2-card[data-pick="real_estate"] .add-v2-icon { color: #C9B3F6; background: rgba(201,179,246,0.10); border-color: rgba(201,179,246,0.22); }
.add-v2-card.is-disabled .add-v2-icon {
  color: rgba(220,230,250,0.5);
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.06);
}
.add-v2-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.add-v2-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
}
.add-v2-sub {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.35;
  white-space: normal;
}
.add-v2-soon {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(225,233,255,0.7);
}
.add-v2-chevron {
  font-size: 16px;
  color: rgba(220,230,250,0.45);
  line-height: 1;
}

/* Back button — shows only when Step 2 was entered via the picker. */
.add-v2-back {
  display: none;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  border-radius: 8px;
  cursor: pointer;
  margin-right: 2px;
  transition: color 0.15s var(--ease-out), background 0.15s var(--ease-out);
}
.add-v2-back:hover { color: var(--text); background: var(--bg-card-2); }
.modal[data-from-picker="1"] .add-v2-back { display: inline-flex; }

/* ── ADD-V2.2: contextual Step-2 chrome ───────────────────────────
   Each mode hides the chrome that belongs to a different flow. The
   existing JS still drives fine-grained visibility (qty group reveal,
   gold section after XAU select, etc.) — these rules only suppress
   the cross-mode noise. */

/* ASSET mode: drop the RE filter chip (handled by the picker card
   now), drop the redundant mobile empty hint, reveal the curated
   quick picks instead. Promote the ISIN toggle to all viewports. */
.modal[data-mode="asset"] .filter-btn[data-filter="real_estate"] {
  display: none !important;
}
.modal[data-mode="asset"] #searchEmptyHint {
  display: none !important;
}
.modal[data-mode="asset"] .isin-toggle-mobile {
  display: inline-flex;
}
.modal[data-mode="asset"] #searchWrap .form-or-divider {
  display: none;
}

#addV2Quick {
  display: none;
  flex-direction: column;
  gap: 12px;
  margin: 4px 0 14px;
}
.modal[data-mode="asset"] #addV2Quick:not(.is-hidden) { display: flex; }

.add-v2-quick-section { display: flex; flex-direction: column; gap: 8px; }
.add-v2-quick-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(220,230,250,0.55);
}
.add-v2-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.add-v2-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.add-v2-chip:hover {
  border-color: rgba(74, 130, 240,0.32);
  background: rgba(74, 130, 240,0.08);
}
.add-v2-chip:active { transform: scale(0.97); }
.add-v2-chip.is-recent { padding: 7px 12px; }
.add-v2-chip-badge {
  width: 24px; height: 24px;
  border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em;
  flex-shrink: 0;
}
.add-v2-chip-badge.crypto { background: rgba(91,156,246,.18); color: #5b9cf6; }
.add-v2-chip-badge.stock  { background: rgba(192,200,216,.18); color: #c0c8d8; }
.add-v2-chip-badge.etf    { background: rgba(143,157,186,.18); color: #8f9dba; }
.add-v2-chip-badge.metal  { background: rgba(212,168,67,.18);  color: #d4a843; }
.add-v2-chip-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
@media (max-width: 560px) {
  /* Mobile: chips become a horizontal carousel — no wrap, no clip. */
  .add-v2-chips {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .add-v2-chips::-webkit-scrollbar { display: none; }
  .add-v2-chip { flex-shrink: 0; }
}

/* GOLD mode: dedicated gold experience — only gold-related controls
   visible. The picker auto-selects XAU via the canonical selectAsset
   pipeline, so the gold section / karat / unit selectors populate the
   same way they would when XAU is searched manually. */
.modal[data-mode="gold"] #searchInputWrap,
.modal[data-mode="gold"] #searchFilters,
.modal[data-mode="gold"] #isinOrWrap,
.modal[data-mode="gold"] #isinToggleMobile,
.modal[data-mode="gold"] #addV2Quick,
.modal[data-mode="gold"] #searchEmptyHint {
  display: none !important;
}

/* REAL ESTATE mode: dedicated RE experience — search, ISIN and gold
   are not part of this flow. enterRealEstateMode() already hides
   search inputs via inline style; these rules belt-and-braces the rest
   so no cross-flow chrome bleeds through. */
.modal[data-mode="real_estate"] #searchInputWrap,
.modal[data-mode="real_estate"] #searchFilters,
.modal[data-mode="real_estate"] #isinOrWrap,
.modal[data-mode="real_estate"] #isinToggleMobile,
.modal[data-mode="real_estate"] #addV2Quick,
.modal[data-mode="real_estate"] #searchEmptyHint,
.modal[data-mode="real_estate"] #goldSection,
.modal[data-mode="real_estate"] #karatGroup,
.modal[data-mode="real_estate"] #goldUnitGroup {
  display: none !important;
}

/* ADD-V2.2: when Step 2 was entered via the picker, the modal header
   has [back, title, close]. Centre the title between back and close so
   the eye lands on the contextual heading immediately. */
.modal[data-from-picker="1"] .modal-header h3 {
  flex: 1;
  text-align: center;
  margin: 0 8px;
}
/* The Activo / Liquidez segmented control is redundant when the user
   already picked a type in Step 1 — back returns to Step 1 for switches. */
.modal[data-from-picker="1"] .add-type-toggle {
  display: none;
}

/* ADD-V2.2: premium search polish in asset mode — taller field, 12px
   radius, glass background, soft Aurix focus ring. Mobile already
   gets the 46px / 16px treatment from MA-1; this unifies desktop. */
.modal[data-mode="asset"] .search-field-wrap input {
  height: 52px;
  font-size: 15px;
  padding: 0 44px 0 16px;
  border-radius: 14px;
  background: rgba(13,18,30,0.55);
  border-color: rgba(255,255,255,0.10);
}
.modal[data-mode="asset"] .search-field-wrap input:focus {
  border-color: rgba(74,130,240,0.45);
  background: rgba(13,18,30,0.75);
  box-shadow: 0 0 0 4px rgba(74,130,240,0.08);
}

/* ── ADD-V4.2: premium desktop modal — financial asset onboarding ──
   Wider workspace-style sheet on desktop (≥901px), preserved mobile
   sheet experience. The 2-column layout is scoped to data-mode="asset"
   so gold / RE / liquidity keep the single-column flow. */
@media (min-width: 901px) {
  /* Premium presence — wider, taller, deeper shadow, glass. */
  .modal-overlay.open .modal {
    max-width: 980px;
    width: 100%;
    min-height: 640px;
    border-radius: 24px;
    background: rgba(14,18,28,0.94);
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.04) inset,
      0 40px 80px -32px rgba(4,8,16,0.95),
      0 24px 48px -24px rgba(74,130,240,0.10);
  }
  .modal-header {
    padding: 22px 26px 18px;
  }
  .modal-header h3 { font-size: 22px; letter-spacing: -0.012em; }
  .modal-title-block { display: flex; flex-direction: column; gap: 4px; }
  .modal-title-block .modal-subtitle {
    font-size: 13px;
    color: rgba(220,230,250,0.6);
    letter-spacing: 0.005em;
    margin: 0;
  }
  .modal-body { padding: 4px 26px 26px; }

  /* 2-column layout — asset mode only. Search left, preview+qty+CTA right. */
  .modal[data-mode="asset"] #assetForm.modal-body {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 28px;
    padding: 4px 26px 26px;
  }
  .modal[data-mode="asset"] .add-v2-left  { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
  .modal[data-mode="asset"] .add-v2-right { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
  /* When mode is anything other than asset, the two-column wrappers
     collapse into a single stream so gold/RE/manual keep their flow. */
  .modal:not([data-mode="asset"]) .add-v2-left,
  .modal:not([data-mode="asset"]) .add-v2-right {
    display: contents;
  }
}

/* On smaller viewports both wrappers behave as `display: contents` so
   the existing single-column stack is preserved exactly. */
@media (max-width: 900px) {
  .add-v2-left, .add-v2-right { display: contents; }
}

.modal-title-block { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.modal-title-block h3 { line-height: 1.2; }
.modal-subtitle {
  font-size: 12.5px;
  color: rgba(220,230,250,0.55);
  letter-spacing: 0.005em;
  margin: 0;
}

/* Filter chips — secondary visual weight in asset mode. Smaller pads,
   lower contrast, tighter spacing so they read as filter chrome rather
   than primary actions. */
.modal[data-mode="asset"] .search-filters {
  gap: 6px;
  margin: 4px 0 16px;
}
.modal[data-mode="asset"] .filter-btn {
  padding: 5px 11px;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: rgba(220,230,250,0.6);
  border-color: rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.025);
}
.modal[data-mode="asset"] .filter-btn:hover {
  color: rgba(225,233,255,0.92);
  border-color: rgba(74, 130, 240,0.32);
  background: rgba(74, 130, 240,0.06);
}
.modal[data-mode="asset"] .filter-btn.active {
  color: #fff;
  border-color: rgba(74, 130, 240,0.45);
  background: rgba(74, 130, 240,0.14);
}

/* Premium asset cards (replaces pill quick picks in asset mode). */
.add-v2-asset-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012));
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: transform 0.16s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.22s ease;
  min-width: 0;
}
.add-v2-asset-card:hover {
  border-color: rgba(74, 130, 240,0.32);
  background: linear-gradient(180deg, rgba(74, 130, 240,0.08), rgba(74, 130, 240,0.02));
  transform: scale(1.01);
}
.add-v2-asset-card:active {
  transform: scale(0.985);
  box-shadow: 0 0 0 4px rgba(74, 130, 240,0.10);
}
.add-v2-asset-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  flex-shrink: 0;
  background: rgba(91,156,246,.16); color: #5b9cf6;
}
.add-v2-asset-icon.crypto { background: rgba(91,156,246,.18); color: #5b9cf6; }
.add-v2-asset-icon.stock  { background: rgba(192,200,216,.18); color: #c0c8d8; }
.add-v2-asset-icon.etf    { background: rgba(143,157,186,.18); color: #8f9dba; }
.add-v2-asset-icon.metal  { background: rgba(212,168,67,.18);  color: #d4a843; }
.add-v2-asset-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}
.add-v2-asset-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.005em;
}
.add-v2-asset-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
.add-v2-asset-ticker {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(220,230,250,0.65);
  letter-spacing: 0.02em;
}
.add-v2-asset-type-pill {
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(220,230,250,0.65);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}
.add-v2-asset-type-pill.crypto { color: #5b9cf6; background: rgba(91,156,246,.10); border-color: rgba(91,156,246,.20); }
.add-v2-asset-type-pill.stock  { color: #c0c8d8; background: rgba(192,200,216,.10); border-color: rgba(192,200,216,.18); }
.add-v2-asset-type-pill.etf    { color: #8f9dba; background: rgba(143,157,186,.10); border-color: rgba(143,157,186,.18); }
.add-v2-asset-type-pill.metal  { color: #d4a843; background: rgba(212,168,67,.10); border-color: rgba(212,168,67,.22); }

/* Quick picks layout: desktop = 2-column grid; mobile = horizontal
   carousel that scrolls. Recents become a single horizontal row of
   compact text chips (existing .add-v2-chip style). */
@media (min-width: 561px) {
  .modal[data-mode="asset"] #addV2PopularChips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}
@media (max-width: 560px) {
  .modal[data-mode="asset"] #addV2PopularChips {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .modal[data-mode="asset"] #addV2PopularChips::-webkit-scrollbar { display: none; }
  .modal[data-mode="asset"] .add-v2-asset-card { flex: 0 0 78%; max-width: 320px; }
}

/* ── ADD-V4.2: live preview panel (desktop) ─────────────────────── */
.add-v2-preview {
  position: relative;
  border-radius: 18px;
  padding: 22px 22px 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012));
  border: 1px solid rgba(255,255,255,0.07);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: opacity 0.18s ease;
}
.add-v2-preview-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(220,230,250,0.55);
  text-align: center;
  padding: 24px 14px;
}
.add-v2-preview-empty-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(74, 130, 240,0.10);
  border: 1px solid rgba(74, 130, 240,0.22);
  color: rgba(74, 130, 240,0.95);
  font-size: 18px;
}
.add-v2-preview-empty-text {
  font-size: 13px;
  line-height: 1.45;
  max-width: 240px;
}
.add-v2-preview-body { display: flex; flex-direction: column; gap: 6px; }
.add-v2-preview-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.add-v2-preview-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.add-v2-preview-type {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(220,230,250,0.65);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.add-v2-preview-type.crypto { color: #5b9cf6; background: rgba(91,156,246,.10); border-color: rgba(91,156,246,.20); }
.add-v2-preview-type.stock  { color: #c0c8d8; background: rgba(192,200,216,.10); border-color: rgba(192,200,216,.18); }
.add-v2-preview-type.etf    { color: #8f9dba; background: rgba(143,157,186,.10); border-color: rgba(143,157,186,.18); }
.add-v2-preview-type.metal  { color: #d4a843; background: rgba(212,168,67,.10); border-color: rgba(212,168,67,.22); }
.add-v2-preview-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: rgba(220,230,250,0.55);
  letter-spacing: 0.02em;
}
.add-v2-preview-ticker { font-weight: 600; font-variant-numeric: tabular-nums; }
.add-v2-preview-currency { font-weight: 600; color: rgba(220,230,250,0.45); }
.add-v2-preview-price-label,
.add-v2-preview-value-label {
  margin-top: 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(220,230,250,0.5);
}
.add-v2-preview-price {
  font-size: 18px;
  font-weight: 600;
  color: rgba(248,252,255,0.92);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.add-v2-preview-value {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

/* Hide the desktop preview card on mobile — sticky CTA + inline
   preview already cover that flow. Also hide in non-asset modes
   (gold/RE) so the dedicated flows stay clean. */
@media (max-width: 900px) {
  .add-v2-preview { display: none; }
}
.modal:not([data-mode="asset"]) .add-v2-preview { display: none !important; }

/* Desktop CTA lives inside the right column, not floating at the
   bottom of the sheet. Keep it sticky-free; the right column is a
   flex column so the button naturally sits below qty + previewTotal. */
@media (min-width: 901px) {
  .modal[data-mode="asset"] .modal-cta {
    position: static;
    padding: 0;
    background: none;
  }
  .modal[data-mode="asset"] .btn-submit {
    padding: 14px;
    border-radius: 12px;
    font-size: 14px;
  }
  /* Desktop hides the inline #formPreview line — the live preview
     card on the right is the canonical view. */
  .modal[data-mode="asset"] #formPreview { display: none !important; }

  /* GOLD-UX-PREMIUM-REBUILD — on desktop the gold CTA is NOT sticky.
     It sits below the estimate as a regular block. The body gets its
     own scroll if content overflows the modal cap. */
  .modal[data-mode="gold"] .modal-cta {
    position: static;
    padding: 8px 0 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: 0;
    box-shadow: none;
    margin-top: 4px;
  }
  .modal[data-mode="gold"] .btn-submit {
    padding: 14px;
    border-radius: 12px;
    font-size: 14px;
  }
}

/* Picker step gets a tighter, centred width on the wider desktop
   modal so the type cards stay readable instead of stretching the
   full 980px. Mobile keeps the existing full-bleed layout. */
@media (min-width: 901px) {
  .add-v2-picker {
    max-width: 560px;
    margin: 0 auto;
    padding: 28px 32px 32px;
  }
}

/* ISIN advanced disclosure — keep monospace input but ensure colors
   read on the dark sheet (defensive fix for ISIN input + status). */
.form-group--isin input {
  background: rgba(13,18,30,0.55);
  color: rgba(248,252,255,0.96);
  border-color: rgba(255,255,255,0.10);
}
.form-group--isin input:focus {
  background: rgba(13,18,30,0.75);
  border-color: rgba(74,130,240,0.45);
  box-shadow: 0 0 0 4px rgba(74,130,240,0.08);
}
.form-group--isin label {
  color: rgba(220,230,250,0.72);
}
.form-group--isin .label-optional { color: rgba(220,230,250,0.45); }

/* Promote the existing isin-toggle (mobile-only by default) to all
   viewports in asset mode — premium disclosure label. */
.modal[data-mode="asset"] .isin-toggle-mobile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(74, 130, 240,0.05);
  border: 1px solid rgba(74, 130, 240,0.16);
  border-radius: 12px;
  width: auto;
  align-self: flex-start;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: rgba(220,230,250,0.85);
}
.modal[data-mode="asset"] .isin-toggle-mobile:hover {
  border-color: rgba(74, 130, 240,0.32);
  background: rgba(74, 130, 240,0.10);
}
.modal[data-mode="asset"] #searchWrap.isin-revealed .isin-or-wrap {
  margin-top: 10px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
}

/* MOBILE PASS 1A: complete the ISIN disclosure across all viewports.
   When the toggle is collapsed, the label / input / divider / spacing
   must all be hidden — no vertical dead space underneath. The legacy
   rule lived only inside the mobile media query; this layer promotes
   it so desktop behaves the same way. */
.modal[data-mode="asset"] #searchWrap #isinOrWrap {
  display: none;
}
.modal[data-mode="asset"] #searchWrap.isin-revealed #isinOrWrap {
  display: block;
}
.modal[data-mode="asset"] #searchWrap .form-or-divider {
  display: none;
}

/* MOBILE PASS 1A: ISIN is irrelevant for crypto / metals / real
   estate — hide the toggle AND the disclosure for those filters so
   the user never sees a label/input that doesn't apply. The JS side
   also force-collapses the disclosure on filter switch via
   _addV42UpdateFilterAttr, so the state stays clean either way. */
.modal[data-mode="asset"][data-search-filter="crypto"] #isinToggleMobile,
.modal[data-mode="asset"][data-search-filter="metal"]  #isinToggleMobile,
.modal[data-mode="asset"][data-search-filter="real_estate"] #isinToggleMobile,
.modal[data-mode="asset"][data-search-filter="crypto"] #isinOrWrap,
.modal[data-mode="asset"][data-search-filter="metal"]  #isinOrWrap,
.modal[data-mode="asset"][data-search-filter="real_estate"] #isinOrWrap {
  display: none !important;
}

.modal-body {
  padding: var(--space-5);
  /* MC-7B: scroll the form body, not the whole modal, so the header
     stays anchored. flex:1 + min-height:0 lets it shrink under the
     90vh cap on .modal. Mobile media-query at line ~2981 overrides
     this with its own sheet-friendly variant — same scroll contract. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  flex: 1;
  min-height: 0;
}

/* ── Form ──────────────────────────────────────────────── */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.form-group label {
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .6px;
}

.form-group input {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  color: var(--text);
  font-size: 15px;
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
  outline: none;
  width: 100%;
}
.form-group input::placeholder { color: var(--text-dim); }
.form-group input:focus { border-color: var(--accent); box-shadow: var(--glow-medium); }

/* ── Type Toggle ───────────────────────────────────────── */
.type-toggle {
  display: flex;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 3px;
}
/* GOLD-1: 6-button karat row + 3-button unit row wrap cleanly on
   narrow viewports without the buttons getting squashed. */
.type-toggle--wrap { flex-wrap: wrap; }
.type-toggle--wrap .type-btn { flex: 1 0 auto; min-width: 56px; }

.form-group--gold .gold-section-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: rgba(255, 205, 96, 0.05);
  border: 1px solid rgba(255, 205, 96, 0.18);
  border-radius: 10px;
}
.gold-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 205, 96, 0.92);
}
.gold-spot-line {
  font-size: 12.5px;
  color: rgba(220, 230, 250, 0.72);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.005em;
}
.gold-spot-line:empty { display: none; }

/* GOLD-2: dual-value panel (Spot vs Estimated resale). Lives inside
   the gold section card. Two stacked rows with shared border, plus a
   dealer-margin chip row under the resale row. */
.gold-valuation-panel {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}
.gold-val-row {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gold-val-row + .gold-val-row {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.gold-val-row--resale { background: rgba(255, 205, 96, 0.03); }
.gold-val-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(220, 230, 250, 0.55);
}
.gold-val-amount {
  font-size: 20px;
  font-weight: 700;
  color: rgba(248, 252, 255, 0.98);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  margin-top: 2px;
}
.gold-val-meta {
  font-size: 11.5px;
  color: rgba(220, 230, 250, 0.50);
  letter-spacing: 0.005em;
}
.gold-margin-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.gold-margin-chips button {
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(220, 230, 250, 0.72);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.gold-margin-chips button:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
}
.gold-margin-chips button.active {
  border-color: rgba(255, 205, 96, 0.45);
  background: rgba(255, 205, 96, 0.12);
  color: rgba(255, 222, 150, 0.98);
}
.gold-val-disclaimer {
  margin-top: 8px;
  font-size: 11px;
  color: rgba(220, 230, 250, 0.42);
  font-style: italic;
  letter-spacing: 0.005em;
}

/* ── ADD-V4.1: premium physical-gold layout ─────────────────────
   Sits inside #goldSection (visible only when XAU is the selected
   asset, i.e. data-mode="gold" or a manual XAU pick). Hides the
   legacy dual-panel / margin-chips rendering above which is still
   present in DOM for backward-compat but never visible. */
.form-group--gold .gold-section-head,
.form-group--gold .gold-valuation-panel { display: none; }
/* Legacy outer karat/unit groups — kept in DOM so old handlers stay
   harmless, but never visible. selectAsset() still flips their inline
   display; !important keeps them hidden either way. */
#karatGroup, #goldUnitGroup { display: none !important; }

#goldSection.form-group--gold {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  background: transparent;
  border: none;
}

/* Section 1 — market reference */
.gold-market-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(233,196,106,0.08), rgba(233,196,106,0.02));
  border: 1px solid rgba(233,196,106,0.22);
}
.gold-market-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.gold-market-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(233,196,106,0.95);
}
.gold-market-meta {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(220,230,250,0.5);
  text-transform: uppercase;
}
.gold-market-price {
  font-size: 14px;
  font-weight: 600;
  color: rgba(248,252,255,0.95);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.005em;
}

/* Section eyebrow */
.gold-section-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(220,230,250,0.78);
  margin-top: 6px;
}
.gold-section-eyebrow--tight { margin-top: 4px; }

/* Field block — label + control(s) */
.gold-field-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gold-field-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(220,230,250,0.62);
}

/* Purity grid — 2×2 retail-friendly purity cards */
.gold-purity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.gold-purity-advanced {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
/* GOLD-MOBILE-P0: the [hidden] attribute on advanced karats has lower
   specificity than the class rule above, so without this guard the
   21K / 14K / 10K row leaks into the default karat grid. */
.gold-purity-advanced[hidden] {
  display: none !important;
}
.gold-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  color: rgba(220,230,250,0.85);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.gold-chip:hover {
  border-color: rgba(233,196,106,0.32);
  background: rgba(233,196,106,0.05);
}
.gold-chip:active { transform: scale(0.985); }
.gold-chip.is-active {
  border-color: rgba(233,196,106,0.55);
  background: rgba(233,196,106,0.12);
  color: rgba(255,238,176,0.98);
}
.gold-chip-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.gold-chip-sub {
  font-size: 11.5px;
  color: rgba(220,230,250,0.55);
  font-weight: 500;
}
.gold-chip.is-active .gold-chip-sub { color: rgba(255,238,176,0.75); }

.gold-more-toggle {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 0;
  background: none;
  border: none;
  color: rgba(74, 130, 240,0.92);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
}
.gold-more-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(74, 130, 240,0.12);
  color: rgba(74, 130, 240,0.95);
  font-size: 13px;
  line-height: 1;
}

/* Unit + valuation mode + buyer rows share a pill style */
.gold-unit-row,
.gold-mode-row,
.gold-buyer-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.gold-pill {
  flex: 1 0 auto;
  min-width: 0;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(220,230,250,0.78);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.gold-pill:hover {
  border-color: rgba(233,196,106,0.32);
  background: rgba(233,196,106,0.06);
  color: rgba(255,238,176,0.95);
}
.gold-pill.is-active {
  border-color: rgba(233,196,106,0.55);
  background: rgba(233,196,106,0.14);
  color: rgba(255,238,176,0.98);
}
.gold-pill:active { transform: scale(0.97); }

.gold-buyer-block,
.gold-adjust-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gold-adjust-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 2px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
}
/* Re-assert [hidden] over the panel's class rule so the default
   collapsed state actually hides on disk. */
.gold-adjust-panel[hidden] { display: none !important; }
.gold-buyer-row[hidden] { display: none !important; }
.gold-mode-row[hidden]  { display: none !important; }
.gold-adjust-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(220,230,250,0.55);
}
.gold-buyer-row {
  flex-direction: row;
}
@media (max-width: 480px) {
  .gold-buyer-row { flex-direction: column; }
  .gold-buyer-row .gold-pill { width: 100%; }
}

/* Summary card */
.gold-summary-card {
  margin-top: 4px;
  padding: 16px 18px;
  border-radius: 16px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(233,196,106,0.16) 0%, rgba(233,196,106,0) 60%),
    linear-gradient(180deg, rgba(20,16,8,0.92), rgba(14,12,8,0.92));
  border: 1px solid rgba(233,196,106,0.28);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gold-summary-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(220,230,250,0.6);
}
.gold-summary-amount {
  font-size: clamp(24px, 5.5vw, 30px);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  white-space: nowrap;
}
.gold-summary-meta {
  font-size: 12.5px;
  color: rgba(220,230,250,0.6);
  letter-spacing: 0.005em;
}
.gold-summary-spot {
  font-size: 11.5px;
  color: rgba(220,230,250,0.55);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.gold-summary-disclaimer {
  margin-top: 6px;
  font-size: 10.5px;
  color: rgba(220,230,250,0.42);
  font-style: italic;
  letter-spacing: 0.005em;
}

/* GOLD-UX-PREMIUM-REBUILD — secondary "1 g · ≈ 109 US$" line above
   the CTA. Tabular nums + tight letter-spacing so the number reads as
   a precise figure, not chatter. Collapses to zero height when blank
   so the CTA never shifts during the form's empty state. */
.gold-cta-summary {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(233,196,106,0.78);
  font-variant-numeric: tabular-nums;
  text-align: center;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gold-cta-summary[hidden] { display: none !important; }
/* Compact CTA pill in gold mode — the summary line above already
   states qty + value, so the button can stay short and confident. */
.modal[data-mode="gold"] .btn-submit {
  padding: 13px 16px;
  font-size: 14.5px;
  letter-spacing: 0.005em;
}

/* Hide the legacy in-form estimate strip in gold mode — the summary
   card above is the single source of truth for the user. */
.modal[data-mode="gold"] #formPreview { display: none !important; }

/* GOLD-MOBILE-P0: in gold mode the CTA is a structural footer of the
   sheet — header / scrollable body / fixed footer. The .modal is the
   positioning context (transform already makes it a containing block,
   but position:relative is set explicitly for clarity and Safari
   parity). Body padding-bottom reserves CTA height + safe-area + 24px
   so the karat chips, qty input and estimate card never overlap. */
@media (max-width: 768px) {
  .modal[data-mode="gold"] { position: relative; }
  .modal[data-mode="gold"] .modal-cta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(10,12,18,0.98);
    border-top: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 -8px 24px -10px rgba(0,0,0,0.55);
    z-index: 5;
  }
  /* Footer footprint = CTA pill (48px) + 12px top + 12px bottom +
     14px secondary summary line + 6px margin = ~92px. Body padding
     adds 24px breathing room above so the last element never sits
     under the footer. */
  .modal[data-mode="gold"] .modal-body {
    padding-bottom: calc(env(safe-area-inset-bottom) + 92px + 24px);
  }
  .modal[data-mode="asset"] #assetForm.modal-body {
    padding-bottom: calc(env(safe-area-inset-bottom) + 48px + 22px + 24px);
  }
  /* Non-gold asset modes keep the sticky variant — solid base so the
     CTA never reads as a translucent overlay. */
  .modal[data-mode="asset"] .modal-cta {
    background: rgba(5,7,13,0.96);
    border-top: 1px solid rgba(255,255,255,0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}
.type-btn {
  flex: 1;
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: var(--space-1);
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: var(--text-muted);
  cursor: pointer;
  transition: background .18s var(--ease-out), color .15s, box-shadow .18s var(--ease-out);
}
.type-btn:hover { background: rgba(255,255,255,.05); color: var(--text); }
.type-btn.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 10px rgba(74, 130, 240,.25);
}

/* ── Form Preview ──────────────────────────────────────── */
.form-preview {
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
  text-align: center;
}
.form-preview strong { color: var(--text); font-size: 15px; }

/* ── Submit Button ─────────────────────────────────────── */
.modal-cta {
  position: sticky;
  bottom: 0;
  padding: var(--space-3);
  z-index: 2;
  background: linear-gradient(
    to top,
    rgba(5,7,13,0.95),
    rgba(5,7,13,0.7),
    rgba(5,7,13,0)
  );
}
.modal-cta button {
  width: 100%;
}

.btn-submit {
  width: 100%;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 13px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s var(--ease-out), transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.btn-submit:hover  { opacity: .93; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(74, 130, 240,.3); }
.btn-submit:active { transform: scale(.97); opacity: .95; box-shadow: none; transition-duration: 80ms; }

/* ── Modal size variant ────────────────────────────────── */
.modal--sm { max-width: 400px; }

/* ADD-FLOW-ARCHITECTURE-2: liquidity-modal visual accent.
   Transactional flow reads green so the user instantly perceives
   it as different from the discovery-focused asset modal. The
   border + header hairline are subtle so the surface stays calm. */
.modal--liquidity {
  border-color: rgba(63, 191, 127, 0.18);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(63, 191, 127, 0.10) inset;
}
.modal--liquidity .modal-header {
  border-bottom: 1px solid rgba(63, 191, 127, 0.16);
}
.modal--liquidity .modal-header h3 {
  color: rgba(218, 246, 224, 0.96);
  letter-spacing: 0.005em;
}

/* Source pill row — premium chip selector. Reuses the existing
   liq-btn visual language so the whole modal feels coherent. */
.liq-source-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.liq-source-pill {
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(220,230,250,0.86);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.liq-source-pill:hover {
  background: rgba(63, 191, 127,0.08);
  border-color: rgba(63, 191, 127,0.22);
  color: rgba(225,242,228,0.95);
}
.liq-source-pill.active {
  background: rgba(63, 191, 127,0.16);
  border-color: rgba(63, 191, 127,0.40);
  color: rgba(232,250,236,0.98);
}
.liq-source-pill:active { transform: scale(0.96); }

/* ── Input hint ────────────────────────────────────────── */
.input-hint {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: -4px;
}

/* ── Reduce: asset info chip ───────────────────────────── */
.reduce-asset-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) 14px;
  margin-bottom: var(--space-4);
}
.reduce-asset-info .asset-badge {
  width: 36px; height: 36px;
  font-size: 11px;
}
.reduce-info-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text);
}
.reduce-info-qty {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* ── Reduce preview ────────────────────────────────────── */
.reduce-preview {
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px var(--space-3);
  margin-bottom: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.reduce-preview-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--text-muted);
}
.reduce-preview-row strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ── Reduce warning / error ────────────────────────────── */
.reduce-warning {
  font-size: 12px;
  color: #f39c12;
  background: rgba(243,156,18,.08);
  border: 1px solid rgba(243,156,18,.2);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  margin-bottom: var(--space-3);
  display: none;
}
.reduce-warning.visible { display: block; }

.reduce-error {
  font-size: 12px;
  color: var(--red);
  margin-bottom: var(--space-2);
  min-height: 16px;
}

/* ── Submit orange variant ─────────────────────────────── */
.btn-submit--orange {
  background: #e67e22;
}
.btn-submit--orange:hover { opacity: .93; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(230,126,34,.3); }

/* ── Submit green variant ──────────────────────────────── */
.btn-submit--green {
  background: var(--green);
}
.btn-submit--green:hover { opacity: .93; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(63, 191, 127,.25); }

/* ── Hero view — full-screen overlay ───────────────────── */
#hero-view {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  contain: layout paint size;
}
#hero-view[hidden]  { display: none; }
#hero-view canvas   { pointer-events: none; }
#hero-view .hero    { flex: 1; min-height: 0; height: 100%; }

/* Hard isolation — hero elements invisible outside hero-active */
body:not(.hero-active) .hero-glow,
body:not(.hero-active) .hero-fade,
body:not(.hero-active) #orb-canvas {
  display: none !important;
  opacity: 0 !important;
}

/* ── Hero Landing ───────────────────────────────────────── */
.hero {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 80px);
  padding: 0 var(--space-5);
  overflow: hidden;
}

/* Fade layer — combined radial + lateral + vertical dissolve */
.hero-fade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at center,
      transparent 45%,
      rgba(0,0,0,0.20) 65%,
      rgba(0,0,0,0.60) 85%,
      #000 100%
    ),
    linear-gradient(to right,
      #000 0%,
      transparent 12%,
      transparent 88%,
      #000 100%
    ),
    linear-gradient(to bottom,
      #000 0%,
      transparent 18%,
      transparent 80%,
      #000 100%
    );
}

.hero-core {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-8vh);
  position: relative;
  z-index: 3;
}

.orb-wrapper {
  position: relative;
  isolation: isolate;
}

/* Ambient glow — bigger than viewport so overflow crop is invisible */
.hero-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140vw;
  height: 140vw;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(0,255,170,0.22) 0%,
    rgba(0,255,170,0.10) 28%,
    rgba(0,255,170,0.04) 45%,
    transparent 70%
  );
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
}

/* Canvas orb — isolated from global CSS contamination */
.orb-canvas {
  all: unset;
  display: block;
  width: clamp(240px, 22vw, 300px);
  height: clamp(240px, 22vw, 300px);
  position: relative;
  z-index: 1;
  margin-bottom: 14px;
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 420px;
  text-align: center;
}

.hero-text {
  font-size: 15px;
  line-height: 1.5;
  opacity: 0.9;
  color: var(--text-bright);
  margin: 0;
}

.hero-cta {
  background: none;
  border: none;
  color: var(--text-bright);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
  cursor: pointer;
  padding: var(--space-1) 0;
  transition: opacity 0.2s ease;
}

.hero-cta:hover { opacity: 1; }

@media (max-width: 768px) {
  .hero {
    position: relative;
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: 64px;
    padding-bottom: var(--space-5);
    height: 100dvh;
    min-height: 100svh;
    overflow: hidden;
    background: #000;
  }

  .hero-core {
    transform: none;
    width: 100%;
  }

  .orb-canvas {
    width: 170px !important;
    height: 170px !important;
    margin: 0 auto 18px;
  }

  .hero-copy { padding: 0 var(--space-4); }
  .hero-text  { font-size: var(--font-size-sm); }
  .hero-cta   { font-size: 11px; }
}

/* ── Card base (design system hook) ────────────────────── */
.card {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to bottom, rgba(255,255,255,0.06), transparent 40%);
  pointer-events: none;
  z-index: 0;
}

@media (hover: hover) {
  .card:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
  }
}

.row:hover {
  background: rgba(255,255,255,0.03);
}

/* ── Dashboard top row / Hero Card ────────────────────── */
.dashboard-top {
  margin-top: var(--space-4);
  margin-bottom: 28px;
}

/* AURIX-DASH-V1: hero card raised to the Intelligence hero material — deep
   blue dual-radial + linear backdrop, electric-blue border, inset highlight and
   a layered glow. Dashboard, Market and Intelligence now share one look. */
.hero-card {
  background:
    radial-gradient(120% 150% at 8% 8%, rgba(77,141,255,0.16), transparent 56%),
    radial-gradient(120% 150% at 92% 92%, rgba(37,99,235,0.12), transparent 60%),
    linear-gradient(165deg, rgba(30,46,82,0.62), rgba(13,19,36,0.66));
  border: 1px solid rgba(77,141,255,0.30);
  border-radius: var(--radius-lg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 18px 50px rgba(0,0,0,0.40),
    0 0 44px rgba(77,141,255,0.10);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1.58fr;   /* WN.26 PART 2 — desktop hero/chart split. P0-HERO-PREMIUM-POLISH: nudged ~37/63 → ~39/61 so the wealth block gains horizontal breathing and reads as the equal/primary protagonist (number size unchanged; balance via distribution only). Mobile/tablet override to flex column, unaffected. */
  align-items: stretch;   /* both columns fill full height — keeps divider intact */
  transition: border-color var(--dur-med) var(--ease-premium),
              box-shadow var(--dur-med) var(--ease-out);
}

.hero-card:hover {
  border-color: rgba(77,141,255,0.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 22px 62px rgba(0,0,0,0.46),
    0 0 52px rgba(77,141,255,0.16);
}

.hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 20% 0%,
    rgba(74, 130, 240,0.10),
    transparent 60%
  );
  pointer-events: none;
  z-index: 0;
}

/* ── Hero left (total value + actions) ─────────────────── */
.hero-left {
  padding: var(--space-5) var(--space-5) 28px var(--space-5); /* AURIX-DASH-V4: capsule removed → top matches hero-right (var(--space-5)) so the "Valor total" and "Evolución" titles align on the same baseline */
  position: relative;
  z-index: 1;
  border-right: 1px solid rgba(255,255,255,.055);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
  overflow: hidden;       /* prevent value from bleeding into chart */
  max-width: 100%;
  min-width: 0;
}

/* ── Hero right (chart) ────────────────────────────────── */
.hero-right {
  padding: var(--space-5) var(--space-5) 18px var(--space-4); /* top matches hero-left */
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
}

/* ── Distribution Section ─────────────────────────────── */
.distribution-section {
  /* AURIX-DASHBOARD-PREMIUM-PASS-1: tighter band before the category cards
     (was --space-6 / 32px) so the desktop dashboard reads composed, not
     sparse. Desktop-only section (hidden on mobile). */
  margin-bottom: var(--space-5);
  min-width: 0;
}

.portfolio-combined-card {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
  transition: border-color .22s var(--ease-out), transform .22s var(--ease-out);
  will-change: transform;
  cursor: pointer;
}

.portfolio-combined-card:hover { border-color: var(--border-hi); }

.distribution-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.watchlist-section {
  display: none;
}

.watchlist-inner-card {
  padding: var(--space-2);
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}

.watchlist-inner-card:hover {
  background: var(--surface-3);
  border-color: var(--border-strong);
}

.distribution-header { margin-bottom: var(--space-3); }

.distribution-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  flex: 1;
  overflow: visible; /* never clip the donut arc on hover */
}

.donut-wrap {
  position: relative;
  width: 160px;
  height: 160px;
  flex-shrink: 0;
  overflow: visible;
}
.donut-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.donut-center-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  gap: 5px;
}

.donut-center-val {
  font-size: var(--font-size-md);
  font-weight: 800;
  color: var(--text-bright);
  font-variant-numeric: tabular-nums;
  text-align: center;
  line-height: 1.1;
  white-space: nowrap;
  max-width: 78px;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -.02em;
  transition: opacity .18s ease;
}

.donut-center-sub {
  font-size: 9px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .7px;
  text-align: center;
  white-space: nowrap;
  max-width: 78px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity .18s ease;
}

.distribution-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 4px var(--space-1);
  margin: 0 -8px;
  border-radius: 7px;
  transition: background .2s var(--ease-out), transform .2s var(--ease-out);
}

.legend-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-item:hover {
  background: rgba(255,255,255,.05);
  transform: translateX(2px);
}

.legend-item--active {
  background: rgba(255,255,255,.07);
}

/* Click-pinned filter: stronger background + left accent line */
.legend-item--pinned {
  background: rgba(255,255,255,.11);
  box-shadow: inset 2px 0 0 currentColor;
}
.legend-item--pinned .legend-name {
  color: var(--text-bright);
  font-weight: var(--font-weight-semibold);
}

.legend-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform .15s var(--ease-premium);
}

.legend-item--active .legend-dot,
.legend-item:hover    .legend-dot {
  transform: scale(1.3);
}

.distribution-legend span { white-space: nowrap; }

.legend-label {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.legend-percent {
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.75);
  margin-left: 2px;
}

/* ── Chart Section (legacy selector kept for compatibility) */
/* Chart is now embedded inside .hero-right — no card wrapper */
.chart-section {
  /* no-op: chart lives inside .hero-right */
}

/* AURIX-DASH-V1: bluer, glassier line glow to match the Aurix palette
   (was a neutral white drop-shadow). */
.chart-line {
  stroke-width: 2.4;
  filter:
    drop-shadow(0 0 6px rgba(74,130,240,0.45))
    drop-shadow(0 0 14px rgba(74,130,240,0.25));
}

.chart-grid line {
  opacity: 0.22;   /* AURIX-DASH-V1: was 0.15 — a touch more grid contrast */
}

.chart-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: var(--space-2);
}

.chart-controls {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.perf-toggle {
  display: flex;
  background: transparent;
  border: none;
  padding: 0;
  gap: 4px;
}

.perf-btn {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xs);
  padding: 4px 9px;
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  color: var(--text-dim);
  cursor: pointer;
  letter-spacing: .2px;
  min-width: 28px;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-premium),
              filter var(--dur-fast) var(--ease-premium),
              opacity var(--dur-fast);
}
.perf-btn:hover {
  background: rgba(255,255,255,.04);
  color: var(--text-muted);
  border-color: rgba(255,255,255,.18);
}
.perf-btn.active {
  background: rgba(255,255,255,.09);
  color: var(--text);
  border-color: rgba(255,255,255,.20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.perf-btn:active {
  transform: scale(.92);
  filter: brightness(.84);
  opacity: .78;
  transition: transform var(--dur-tap) var(--ease-premium),
              filter var(--dur-tap) var(--ease-premium),
              opacity var(--dur-tap);
}

/* WN.26 PART 3 — group the chart title + metric as one premium title block:
   tighter vertical gap so the percentage reads as part of the title group. */
.chart-title { margin-bottom: 1px; }

.chart-change {
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  line-height: 1.05;
}
.chart-change.up   { color: var(--green); }
.chart-change.down { color: var(--red); }
.chart-change.flat { color: var(--text-muted); }

/* ── RETURN-PENDING-FINAL — premium "Calculando…" baseline-pending state ─────────────
   Shown (web + mobile, identical markup) whenever the return baseline is not yet valid
   (new / reset / onboarding / import). Electric-blue text with a subtle 1.5s shimmer
   sweep — NEVER red/green, no %/$, no flash. Replaces the old dry "—" / false loss.
   Degrades to static blue text under prefers-reduced-motion. */
.chart-change.calculating       { color: var(--aurix-blue); font-weight: 700; }
.perf-hero-money.calculating    { color: var(--aurix-blue); text-shadow: none; }
.perf-hero-money.calculating .wsc-metric-calc { font-size: 26px; letter-spacing: -.01em; }
.wsc-metric-calc {
  color: #4A82F0;                                  /* fallback if background-clip text unsupported */
  background-image: linear-gradient(100deg, #4A82F0 0%, #4A82F0 38%, #cfe0ff 50%, #4A82F0 62%, #4A82F0 100%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: aurixCalcShimmer 1.5s linear infinite;
  font-variant-numeric: normal;
  letter-spacing: .005em;
}
@keyframes aurixCalcShimmer { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) {
  .wsc-metric-calc {
    animation: none;
    background: none;
    -webkit-text-fill-color: #4A82F0;
    color: #4A82F0;
  }
}

.range-toggle {
  display: flex;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}

.range-btn {
  background: transparent;
  border: none;
  border-radius: 5px;
  padding: 5px var(--space-2);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  letter-spacing: .6px;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast),
              transform var(--dur-fast) var(--ease-premium),
              filter var(--dur-fast) var(--ease-premium),
              opacity var(--dur-fast);
}
.range-btn.active             { background: var(--accent); color: #fff; box-shadow: var(--glow-medium); }
.range-btn:not(.active):hover { color: var(--text); background: rgba(255,255,255,.05); }
.range-btn:active {
  transform: scale(.92);
  filter: brightness(.84);
  opacity: .78;
  transition: transform var(--dur-tap) var(--ease-premium),
              filter var(--dur-tap) var(--ease-premium),
              opacity var(--dur-tap);
}

.chart-wrap {
  position: relative;
  height: 190px;
  overflow: hidden; /* contain the energy-sweep glow inside the chart bounds */
  background: linear-gradient(to bottom, rgba(255,255,255,0.02), transparent);
}

/* Energy sweep removed — clean chart surface */
.chart-wrap::after { display: none; }

/* ── AURIX-CHART-LOADING-PREMIUM-1 ──────────────────────────────────────────
   Premium loading skin: the dashboard chart area must NEVER read as an empty
   dark rectangle. A subtle grid + a tenue ghost line live behind the canvas /
   V2 host (which are transparent until a real line paints), so from the very
   first frame — before lightweight-charts/the V2 engine mount — the surface
   feels intentional and alive. It fades out the moment a real series is ready
   ([data-chart-state="ready"]). Pure presentation: no data, no logic. */
.chart-loading-skin {
  position: absolute;
  inset: 0;
  z-index: 0;                 /* behind the chart canvas / V2 host */
  pointer-events: none;
  opacity: 1;
  transition: opacity .5s var(--ease-out);
  /* Calm, ultra-subtle guide grid integrated with the card surface. */
  background-image:
    repeating-linear-gradient(to right,
      transparent 0, transparent calc(20% - 1px),
      rgba(255,255,255,0.020) calc(20% - 1px), rgba(255,255,255,0.020) 20%),
    repeating-linear-gradient(to bottom,
      transparent 0, transparent calc(25% - 1px),
      rgba(255,255,255,0.016) calc(25% - 1px), rgba(255,255,255,0.016) 25%);
}
/* Once a real, validated series is ready the skin dissolves — no double grid,
   no double line. Driven by JS mirroring the single chart state machine. */
.chart-wrap[data-chart-state="ready"] .chart-loading-skin { opacity: 0; }
/* Empty portfolio uses its own calm invitation copy — keep the skin out of the
   way so the two surfaces never stack. */
.chart-wrap[data-chart-state="empty"] .chart-loading-skin { opacity: 0; }

.chart-loading-skin__line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: chart-ghost-breathe 3s ease-in-out infinite;
}
.chart-loading-skin__stroke {
  fill: none;
  stroke: rgba(138,166,255,0.30);   /* AURIX-DASH-V1: slightly brighter Aurix blue, still clearly not real data */
  stroke-width: 1.4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.chart-loading-skin__area { fill: rgba(138,166,255,0.08); }   /* AURIX-DASH-V1: deeper gradient fill */

/* Very calm breathing so it feels alive without an aggressive shimmer. */
@keyframes chart-ghost-breathe {
  0%, 100% { opacity: .68; }
  50%      { opacity: 1; }
}

/* Neutralize the V2 engine's own shimmer skeleton ONLY on the dashboard chart
   (.chart-wrap), so there is a SINGLE premium loading visual. Higher specificity
   than the engine's runtime-injected rule, so order is irrelevant. Asset /
   category detail (.detail-chart-wrap) and the brand demo keep their shimmer. */
.chart-wrap .aurix-chart-skeleton { display: none !important; }

/* Left→right "draw" reveal when the chart goes loading/building → ready. The real
   chart layer (V2 host) is progressively UNCLIPPED from left to right, so the line
   + area appear to draw themselves in. CRITICAL: there is NO dark cover — the old
   solid curtain (#0d1018) collapsing toward the right is exactly what read as a
   "black mass on the right" on refresh; it is removed. A soft blue pen-glow of
   LIGHT (never a dark fill) rides the leading edge. One-shot; class added/removed
   by JS only on a genuine first paint (never on minor refresh / last-good repaint).
   ~520ms easeOutCubic (spec: 400–600ms). */
@keyframes chart-draw-clip {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
.chart-wrap--revealing .aurix-chart-host {
  animation: chart-draw-clip .52s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes chart-draw-glow {
  0%   { left: 0;    opacity: 0; }
  12%  { opacity: .9; }
  86%  { opacity: .9; }
  100% { left: 100%; opacity: 0; }
}
.chart-wrap--revealing::after {
  content: '';
  display: block;             /* override .chart-wrap::after { display:none } */
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 56px;
  margin-left: -28px;         /* centre the glow on the reveal frontier */
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(138,166,255,0.22), transparent);
  filter: blur(1px);
  animation: chart-draw-glow .52s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* AURIX-WEB-POLISH-1 — desktop (≥1024px) premium dashboard chart. More vertical
   presence (190px → 240px, ≈+26%) so the curve reads like a financial platform,
   not a technical widget; a deeper surface gradient for depth; and a tighter
   internal rhythm so the card feels fully used rather than padded with dead space.
   Desktop-only → mobile (≤768px, 220px) and tablet stay untouched. Presentation
   only: no data, no ranges, no logic. The chart engine reads .chart-wrap's height
   via its ResizeObserver, so the canvas grows with the wrap. */
@media (min-width: 1024px) {
  .chart-wrap {
    height: 240px;
    /* AURIX-DASH-V1: deeper blue base so the chart well integrates with the
       Intelligence-grade surfaces around it. */
    background: linear-gradient(to bottom,
      rgba(74, 130, 240, 0.10) 0%,
      rgba(138, 166, 255, 0.03) 42%,
      rgba(255, 255, 255, 0) 100%);
  }
  .chart-header { margin-bottom: 14px; }
  .hero-right   { padding-bottom: 14px; }
}

.chart-no-data {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 13px;
  pointer-events: none;
}

/* ── Chart interactive tooltip ─────────────────────────── */
.chart-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(8, 10, 18, 0.88);
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  padding: 6px 10px;
  pointer-events: none;
  opacity: 0;
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 4px 16px rgba(0,0,0,.5),
              0 0 12px rgba(255,255,255,0.04);
  transition: opacity 100ms var(--ease-out);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.chart-tooltip--visible {
  opacity: 1;
}
.chart-tooltip-time {
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  letter-spacing: .3px;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.chart-tooltip-val {
  font-size: var(--font-size-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  letter-spacing: -.01em;
}
.chart-tooltip-val[data-dir="up"]   { color: var(--green); }
.chart-tooltip-val[data-dir="down"] { color: var(--red); }
.chart-tooltip-val[data-dir="flat"] { color: var(--text); }

/* ── Category cards ────────────────────────────────────── */
.categories-section { margin-bottom: 28px; }

.categories-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-auto-rows: 1fr;
  grid-auto-flow: dense;
  align-items: stretch;
  gap: var(--space-3);
  touch-action: pan-y;
}

.cat-card {
  position: relative;
  overflow: hidden;
  /* AURIX-DASH-V2: raised to the Intelligence blue-glass material (was flat
     --surface-2 that read dark/old) — deep blue gradient + electric border. */
  background:
    radial-gradient(130% 130% at 12% 0%, rgba(74,130,240,0.10), transparent 58%),
    linear-gradient(165deg, rgba(30,44,74,0.46), rgba(15,21,37,0.54));
  border: 1px solid rgba(74,130,240,0.16);
  border-radius: 18px;
  padding: var(--space-4) 22px 18px;
  min-height: 130px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;   /* AURIX-DASH-V2: slightly more breathing between name/value/pct */
  cursor: pointer;
  text-align: left;
  touch-action: auto;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 8px 24px -14px rgba(0,0,0,0.55),
    0 0 22px -10px rgba(74,130,240,0.16);
  transition: border-color var(--dur-med) var(--ease-premium),
              transform     var(--dur-med) var(--ease-premium),
              box-shadow    var(--dur-med) var(--ease-premium),
              opacity       200ms var(--ease-out);
}
.cat-card.dragging {
  transition: none !important;
  z-index: 1000;
  box-shadow: 0 20px 40px rgba(0,0,0,0.35),
              inset 0 1px 0 rgba(255,255,255,0.05);
  cursor: grabbing;
}
.cat-card:hover {
  border-color: rgba(74,130,240,0.42);
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 14px 34px rgba(0,0,0,0.30),
              0 0 0 1px rgba(74,130,240,0.12),
              0 0 26px rgba(74,130,240,0.12),
              inset 0 1px 0 rgba(255,255,255,0.07);
}
.cat-card:active,
.cat-card.is-pressing {
  transform: scale(0.98);
  box-shadow: 0 2px 6px rgba(0,0,0,0.12),
              inset 0 1px 0 rgba(255,255,255,0.04);
  transition: transform var(--dur-tap) var(--ease-premium),
              box-shadow var(--dur-tap) var(--ease-premium),
              opacity    var(--dur-tap);
}

/* Dim siblings when one card is hovered — focus effect */
@media (hover: hover) {
  .categories-grid:has(.cat-card:hover) .cat-card:not(:hover) {
    opacity: 0.68;
  }
}

.cat-card--active {
  border-color: var(--accent);
  background: rgba(74, 130, 240,.07);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

/* Empty category — no assets yet: visible but clearly inactive */
.cat-card--empty {
  opacity: 0.9;
  /* CAT-EMPTY-1: drill-down is blocked in JS for empty cards, so
     stop signalling tap-actionable via the pointer cursor. */
  cursor: default;
}
.cat-card--empty .cat-card-value { color: var(--text-muted); }
.cat-card--empty:hover { border-color: var(--border-hi); }
.cat-card--empty .cat-card-visual { opacity: 0.25; }

.cat-card-header {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 2px;
}

.cat-card-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cat-card-name {
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.cat-card--active .cat-card-name { color: var(--accent); }

.cat-card-value {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-bright);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin-top: 2px;
}

.cat-card-pct {
  font-size: 13px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Hint — hidden until hover (desktop) or always faint (touch) */
.cat-card-hint {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: .04em;
  margin-top: auto;
  padding-top: var(--space-1);
  opacity: 0;
  transition: opacity .2s;
}
@media (hover: hover) {
  .cat-card:hover .cat-card-hint { opacity: 0.55; }
}
@media (hover: none) {
  .cat-card-hint { opacity: 0.4; }
}

/* AURIX-DESKTOP-ALLOCATION-HUB-1 — desktop-only allocation hub.
   The smart category cards ARE the desktop allocation representation, so the
   old donut + legend + watchlist block is removed from the desktop dashboard
   (mobile keeps its separate slider donut; the watchlist still lives in
   Market). Six categories lay out as a balanced 3×2 grid with no orphan row,
   and each card gains a proportional allocation bar. All of this is gated to
   >=769px (the existing desktop boundary), so mobile (<=768px) — its slider
   donut, category cards and order — is completely untouched. */
/* Bar hidden by default (mobile/tablet) — base rule FIRST so the desktop
   override below wins by source order. Keeps mobile category cards identical. */
/* Weight group (label · % + bar) — hidden on mobile so the mobile card keeps
   its original layout (icons stay the only visual). Shown on desktop. */
.cat-card-weight { display: none; }
/* SPEC DASHBOARD-SUMMARY-CARDS — the category return % is a DESKTOP-only refinement; hidden by default so
   the mobile summary card stays visually + functionally identical (shown only in the >=769px block below). */
.cat-card-return { display: none; }
/* SPEC MOBILE-SUMMARY-CARDS — mobile-only return % twin (in the content column, under the amount). Hidden by
   default; shown ONLY inside the max-width:768px block below → desktop (>=769px) never renders it. */
.cat-card-return-m { display: none; }
/* The foot wrapper (icons + return) is layout-transparent by default so mobile renders its children EXACTLY
   as before (icons keep their absolute bottom-right position; the return stays display:none). Only the
   >=769px block turns the foot into the bottom flex row. */
.cat-card-foot { display: contents; }

/* ── Premium asset glyphs for classes with no third-party logo ── */
.cat-glyph {
  width: 24px; height: 24px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px; background: rgba(255,255,255,0.06);
  font-size: 13px; font-weight: 700; line-height: 1; color: #fff;
}
.cat-glyph svg { width: 16px; height: 16px; display: block; }
.cat-glyph--cash { color: var(--aurix-success); background: rgba(63, 191, 127,0.14); }
.cat-glyph--re   svg { fill: #b6a6f3; }
/* AURIX-DASHBOARD-PREMIUM-POLISH-1: the metal ingot is its own dimensional
   object — drop the flat glyph chip and let the SVG breathe a touch larger
   with a soft cast shadow so it reads as premium on desktop and mobile. */
.cat-glyph--metal { background: transparent; }
.cat-glyph--metal svg {
  width: 21px; height: 21px;
  filter: drop-shadow(0 2px 2.5px rgba(0,0,0,0.45));
}
.cat-glyph--metal-gold   svg { filter: drop-shadow(0 2px 3px rgba(120,82,12,0.5)); }
.cat-glyph--metal-silver svg { filter: drop-shadow(0 2px 3px rgba(40,52,70,0.5)); }
.cat-glyph--metal-copper svg { filter: drop-shadow(0 2px 3px rgba(96,50,20,0.5)); }

@media (min-width: 769px) {
  .distribution-section { display: none !important; }
  .categories-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* AURIX-DASHBOARD-ASSET-CARDS-PREMIUM-1 — patrimonial cards with real asset
     identity restored. The card reads top→bottom: header (dot + name, market
     badge top-right) → value (protagonist) → real asset icons → weight
     (Participación · % tied to its bar) pinned to the foot. Icons are flowed
     (order:2, margin-top:auto) so they never collide with the bar. */
  .cat-card { flex-direction: column; }
  .cat-card .cat-card-content { order: 1; max-width: 100%; }
  /* SPEC DASHBOARD-SUMMARY-CARDS-POSITION — the freed foot is ONE bottom flex row: asset icons pinned
     bottom-left, the return % bottom-right, vertically centered on the icon row. Symmetric side margins come
     from the card's own padding (22px); margin-left:auto keeps the % right-anchored whether the card has
     one, several or NO icons. No arbitrary offsets. */
  .cat-card .cat-card-foot {
    display: flex; order: 2; margin-top: auto;
    align-items: center; justify-content: flex-start;
    gap: 10px; padding-top: 18px; padding-bottom: 2px;
  }
  .cat-card .cat-card-visual {
    display: flex; position: static; bottom: auto; right: auto;
    justify-content: flex-start; align-items: center; flex-wrap: wrap;
    gap: 9px; margin-top: 0; padding-top: 0; flex: 1 1 auto; min-width: 0;
  }
  /* SPEC DASHBOARD-SUMMARY-CARDS — Allocation row + bar removed from the desktop summary card (already
     represented by the hero donut). Reversible: restore `display:block; order:3; margin-top:12px`. */
  .cat-card .cat-card-weight { display: none; }
  .cat-card .market-status { display: flex; }   /* re-enabled top-right badge */
  .cat-card .cat-card-hint { display: none; }    /* hover lift is the affordance */
  /* Return % — bottom-right of the foot row, IN-FLOW (flex, no absolute offsets), vertically aligned with
     the icon row, slightly larger + bolder than v528. Same data/calc/sign/color/formatter. Same colors as
     the category detail header (--green / --red / --text-muted). pointer-events:none → card stays clickable. */
  .cat-card .cat-card-return {
    display: inline-block; position: static; margin-left: auto; align-self: center;
    flex: 0 0 auto; white-space: nowrap; pointer-events: none;
    font-size: 13.5px; font-weight: 800; letter-spacing: .01em;
    font-variant-numeric: tabular-nums; opacity: .96;
  }
  .cat-card .cat-card-return.up   { color: var(--green); }
  .cat-card .cat-card-return.down { color: var(--red); }
  .cat-card .cat-card-return.flat { color: var(--text-muted); }
  /* Nudge the main amount down slightly for a more balanced vertical rhythm now the foot is lighter. */
  .cat-card .cat-card-value { font-size: 23px; margin-top: 2px; }

  .cat-card-weight-label {
    display: block; font-size: 11px; color: var(--text-muted);
    letter-spacing: .01em; margin-bottom: 7px; font-variant-numeric: tabular-nums;
  }
  .cat-card-bar {
    display: block; height: 5px; border-radius: 999px;
    background: rgba(255,255,255,0.05); overflow: hidden;
  }
  .cat-card-bar-fill {
    display: block; height: 100%; min-width: 4px; border-radius: inherit;
    opacity: 0.92;
    transition: width .5s var(--ease-premium), opacity .2s var(--ease-out);
  }
  /* Hover: full-strength bar + a soft glow on the asset icons (subtle). */
  .cat-card:hover .cat-card-bar-fill { opacity: 1; }
  .cat-card:hover .cat-card-visual img,
  .cat-card:hover .cat-glyph { filter: drop-shadow(0 0 6px rgba(74, 130, 240,0.35)); }
}

/* Tablet: 2 columns */
@media (max-width: 700px) {
  .categories-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Mobile: single column */
@media (max-width: 480px) {
  .categories-grid { grid-template-columns: 1fr; gap: 10px; }
  .cat-card { min-height: 100px; }
}
/* FINAL-MOBILE-POLISH-1 — dashboard category cards are a quick
   snapshot, not an analysis surface. The textual percentage echoes
   the donut on the hero card above, so on mobile we drop it for
   populated categories. Empty cards keep the .cat-card-pct slot to
   surface the "Sin asignación todavía" status instead. */
@media (max-width: 768px) {
  .cat-card:not(.cat-card--empty) .cat-card-pct { display: none; }
}

/* SPEC MOBILE-SUMMARY-CARDS-POSITION — mobile-only hierarchy (desktop >=769px is untouched, identical to
   v529): 1) category + market state, 2) amount (left), 3) return % under the amount (left), 4) "View
   assets →" above the icons, 5) icons bottom-right. Solved with flex inside the breakpoint; no arbitrary
   offsets. Cards stay clickable (cluster is pointer-events:none). */
@media (max-width: 768px) {
  /* 3) return % — in the content column, directly under the amount, left-aligned, slightly more legible
        than the value's secondary text but never competing with the value. Same colors as detail/desktop. */
  .cat-card .cat-card-return-m {
    display: block; text-align: left; margin-top: 3px;
    font-size: 13px; font-weight: 700; letter-spacing: .01em; line-height: 1.1;
    font-variant-numeric: tabular-nums;
  }
  .cat-card .cat-card-return-m.up   { color: var(--green); }
  .cat-card .cat-card-return-m.down { color: var(--red); }
  .cat-card .cat-card-return-m.flat { color: var(--text-muted); }
  /* 4)+5) bottom-right cluster: "View assets →" sits directly above the icon row, both anchored to the
     bottom-right with a safe, uniform margin. The foot (icons + hidden desktop %) becomes an absolute
     bottom-right flex COLUMN; consistent for zero / one / many icons. */
  .cat-card .cat-card-foot {
    display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
    position: absolute; right: 12px; bottom: 12px; margin: 0; padding: 0;
    max-width: 62%; pointer-events: none;
  }
  .cat-card .cat-card-foot .cat-card-hint {
    display: block; position: static; margin: 0; opacity: 0.5;
    text-align: right; white-space: nowrap;
  }
  .cat-card .cat-card-visual {
    position: static; bottom: auto; right: auto; margin: 0;
    justify-content: flex-end; align-items: center;
  }
}
/* Blur only on desktop — skip on mobile to avoid GPU lag */
@media (min-width: 768px) {
  .cat-card {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}
@media (max-width: 767px) {
  /* AURIX-DASH-V2: mobile (no blur) gets the same blue-glass as desktop. */
  .cat-card {
    background:
      radial-gradient(130% 130% at 12% 0%, rgba(74,130,240,0.10), transparent 58%),
      linear-gradient(165deg, rgba(30,44,74,0.46), rgba(15,21,37,0.60));
  }
}

/* ── Category card content wrapper (sits above visual) ──── */
.cat-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  /* Reserve right zone for the absolute-positioned visual (96px wide at right:14px) */
  max-width: calc(100% - 88px);
}

/* ── Category card visual system ────────────────────────── */

/* Category card: no ambient glow — clean surface */
.cat-card::before { display: none; }
.cat-card--empty::before { display: none; }

/* Visual container — bottom-right logo zone */
.cat-card-visual {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  background: none !important;
  box-shadow: none !important;
}

.cat-card-visual img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 50%;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  margin: 0;
  opacity: 1 !important;
  transform: none !important;
}

.logo-fallback {
  display: inline-flex;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  color: rgba(255,255,255,0.6);
}

@media (max-width: 768px) {
  .cat-card-visual img { width: 22px; height: 22px; }
  .logo-fallback        { width: 22px; height: 22px; }
}

/* ── Section filter nav bar (category view) ─────────────── */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.section-filter-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
}

.assets-back-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 10px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out), transform var(--dur-med) var(--ease-premium),
              filter var(--dur-med) var(--ease-premium);
}
.assets-back-btn:hover {
  color: var(--text);
  border-color: var(--border-hi);
  background: rgba(255,255,255,.04);
  transform: translateX(-2px);
}
.assets-back-btn:active {
  transform: scale(.92) translateX(-1px);
  filter: brightness(.84);
  opacity: .78;
  transition: transform var(--dur-tap) var(--ease-premium),
              filter var(--dur-tap) var(--ease-premium),
              opacity var(--dur-tap);
}

.section-filter-name {
  font-size: var(--font-size-md);
  font-weight: 700;
  letter-spacing: -.01em;
}

/* Context-aware "+ Add [category]" button in the detail view header */
.btn-add-context {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  color: var(--accent);
  background: rgba(74, 130, 240,.08);
  border: 1px solid rgba(74, 130, 240,.2);
  border-radius: var(--radius-sm);
  padding: 6px 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-premium);
}
.btn-add-context:hover {
  background: rgba(74, 130, 240,.15);
  border-color: rgba(74, 130, 240,.36);
  color: var(--aurix-blue);
  transform: scale(1.02);
}
.btn-add-context:active {
  transform: scale(.93);
  filter: brightness(.82);
  opacity: .82;
  transition: transform var(--dur-tap) var(--ease-premium),
              filter var(--dur-tap) var(--ease-premium),
              opacity var(--dur-tap);
}

/* ── Summary update indicator ──────────────────────────── */
.summary-divider { color: var(--text-dim); margin: 0 10px; }

.update-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.update-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-dim);
  flex-shrink: 0;
  transition: background .3s;
}
.update-dot.ok {
  background: var(--green);
  animation: pulse-live 1.8s ease-in-out infinite;
}
.update-dot.error       { background: var(--red); }
.update-dot.refreshing  {
  background: #f39c12;
  animation: pulse-dot .9s ease-in-out infinite alternate;
}

/* SAVE-INDICATOR-1: subtle autosave status pill. Visual peer of
   .update-indicator — same compact muted text, same colored-dot
   convention. starts hidden via [hidden] (the JS toggles it only
   once a save cycle has actually fired) so layout never shifts on
   first paint. The "saved-faded" variant lowers opacity after a
   few seconds so a stale "Guardado" recedes without disappearing. */
.save-indicator {
  /* AURIX-HERO-PREMIUM-REFINE-1: the update-indicator ("● Sincronizado") is
     now the SINGLE visible sync status. This element is kept only for its
     aria-live announcements (saving / saved / failed) — it is visually hidden
     everywhere so the hero never shows a duplicate status dot. */
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.save-indicator::before { display: none; }
.save-indicator[data-state="saving"]::before,
.save-indicator[data-state="retrying"]::before {
  background: #f39c12;
  animation: pulse-dot .9s ease-in-out infinite alternate;
}
.save-indicator[data-state="saved"]::before,
.save-indicator[data-state="saved-faded"]::before {
  background: var(--green);
}
.save-indicator[data-state="offline"]::before,
.save-indicator[data-state="failed"]::before {
  background: var(--red);
}
.save-indicator[data-state="saved-faded"] { opacity: 0.55; }
/* Note: .save-indicator is visually hidden globally (see base rule above);
   these state ::before colours are inert now but kept for a clean revert. */
@keyframes pulse-live {
  0%   { opacity: .4; transform: scale(1); }
  50%  { opacity: 1;  transform: scale(1.4); }
  100% { opacity: .4; transform: scale(1); }
}
/* Ripple-glow for live status dots (status-dot.live, gold-live-dot) */
@keyframes pulse-dot-glow {
  0%   { box-shadow: 0 0 0 0   rgba(63, 191, 127,.55); }
  65%  { box-shadow: 0 0 0 5px rgba(63, 191, 127,.0);  }
  100% { box-shadow: 0 0 0 0   rgba(63, 191, 127,.0);  }
}
@keyframes pulse-dot {
  from { opacity: .35; transform: scale(.75); }
  to   { opacity: 1;   transform: scale(1.15); }
}

/* ── Lookup status ─────────────────────────────────────── */
.lookup-status {
  font-size: 12px;
  min-height: 14px;
  margin-top: -2px;
  padding: 0 2px;
  transition: color .2s;
}
.lookup-status.loading { color: var(--text-muted); }
.lookup-status.ok      { color: var(--green); }
.lookup-status.error   { color: var(--red); }

/* ── Price input with LIVE badge ───────────────────────── */
.price-input-wrap {
  position: relative;
  width: 100%;
}
.price-input-wrap input { padding-right: 54px; }

.live-badge {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
  color: var(--green);
  background: rgba(46,204,113,.12);
  border: 1px solid rgba(46,204,113,.22);
  border-radius: 4px;
  padding: 2px 6px;
  pointer-events: none;
  display: none;
}

.form-group input[readonly] {
  color: var(--text-muted);
  cursor: default;
}


/* ── Flash animation on price update ──────────────────── */
@keyframes flash-up {
  0%   { color: var(--green); transform: translateY(-3px); }
  30%  { transform: translateY(0); }
  100% { color: inherit; }
}
@keyframes flash-down {
  0%   { color: var(--red); transform: translateY(3px); }
  30%  { transform: translateY(0); }
  100% { color: inherit; }
}
.flash-up   { animation: flash-up   0.85s var(--ease-out) forwards; }
.flash-down { animation: flash-down 0.85s var(--ease-out) forwards; }

/* ── Flash + lift animation on total value update ──────── */
@keyframes flash-value-up {
  0%   { color: var(--green); transform: translateY(-4px) scale(1.015); filter: brightness(1.25); }
  40%  { transform: translateY(0) scale(1); filter: brightness(1); }
  100% { color: inherit; }
}
@keyframes flash-value-down {
  0%   { color: var(--red); transform: translateY(4px) scale(.985); filter: brightness(0.9); }
  40%  { transform: translateY(0) scale(1); filter: brightness(1); }
  100% { color: inherit; }
}
@keyframes value-lift {
  0%   { opacity: .85; }
  100% { opacity: 1; }
}
.value-flash-up   { animation: flash-value-up   500ms var(--ease-out) forwards; }
.value-flash-down { animation: flash-value-down 500ms var(--ease-out) forwards; }
.value-lift       { animation: value-lift       250ms var(--ease-out) forwards; }

/* ── Asset search ──────────────────────────────────────── */
.search-form-group {
  position: relative;
  margin-bottom: var(--space-3);
}

.search-field-wrap {
  position: relative;
}

.search-field-wrap input {
  width: 100%;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) 40px var(--space-2) var(--space-3);
  color: var(--text);
  font-size: 15px;
  outline: none;
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.search-field-wrap input::placeholder { color: var(--text-dim); }
.search-field-wrap input:focus {
  border-color: var(--accent);
  box-shadow: var(--glow-medium);
}

.search-clear {
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  color: var(--text-dim); cursor: pointer;
  font-size: var(--font-size-sm);
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
  transition: color .15s, background .15s;
}
.search-clear:hover { color: var(--text); background: rgba(255,255,255,.07); }

/* ── Suggestions dropdown ──────────────────────────────── */
.asset-suggestions {
  position: absolute;
  top: calc(100% + 2px);
  left: 0; right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 36px rgba(0,0,0,.55);
  z-index: 300;
  max-height: 300px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: none;
}
.asset-suggestions.open { display: block; }
/* Fade at bottom signals more content is scrollable */
.asset-suggestions.open::after {
  content: '';
  position: sticky;
  bottom: 0;
  display: block;
  height: 28px;
  background: linear-gradient(to top, var(--bg-card) 0%, transparent 100%);
  pointer-events: none;
  margin-top: -28px;
}

.suggestion-item {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
  transition: background .18s var(--ease-out);
}
.suggestion-item:hover,
.suggestion-item.focused { background: var(--bg-card-2); }
.suggestion-item + .suggestion-item { border-top: 1px solid rgba(255,255,255,.04); }

.sugg-badge {
  width: 34px; height: 34px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; letter-spacing: .2px;
  flex-shrink: 0;
}
.sugg-badge.crypto { background: rgba(91,156,246,.18);  color: #5b9cf6; }
.sugg-badge.stock  { background: rgba(192,200,216,.18); color: #c0c8d8; }
.sugg-badge.etf    { background: rgba(143,157,186,.18); color: #8f9dba; }
.sugg-badge.metal  { background: rgba(212,168,67,.18);  color: #d4a843; }
.sugg-badge.manual { background: rgba(107,116,148,.14); color: var(--text-muted); font-size: 15px; }

.sugg-info { min-width: 0; }
.sugg-name {
  font-size: 13px; font-weight: var(--font-weight-semibold);
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sugg-ticker { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

.sugg-type {
  font-size: 10px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase;
  padding: 3px 7px; border-radius: 4px; flex-shrink: 0;
}
.sugg-type.crypto { background: rgba(91,156,246,.12);  color: #5b9cf6; }
.sugg-type.stock  { background: rgba(192,200,216,.12); color: #c0c8d8; }
.sugg-type.etf    { background: rgba(143,157,186,.12); color: #8f9dba; }
.sugg-type.metal  { background: rgba(212,168,67,.12);  color: #d4a843; }
.sugg-type.manual { background: rgba(107,116,148,.10); color: var(--text-muted); }

.sugg-section-label {
  padding: var(--space-1) 14px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--text-dim);
}

.suggestion-loading {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: var(--space-1) 14px;
  font-size: 11px;
  color: var(--text-dim);
  border-top: 1px solid rgba(255,255,255,.04);
  letter-spacing: .3px;
}

.suggestion-empty {
  padding: var(--space-2) 14px;
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
}

@keyframes dots-fade {
  0%, 100% { opacity: .3; }
  50%       { opacity: 1; }
}
.sugg-dot-anim {
  letter-spacing: 2px;
  animation: dots-fade .9s ease-in-out infinite;
}

/* ── Selected asset chip ───────────────────────────────── */
.selected-chip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px var(--space-2) 10px 14px;
  margin-bottom: var(--space-3);
}

.chip-badge {
  width: 36px; height: 36px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  flex-shrink: 0;
}
.chip-badge.crypto { background: rgba(91,156,246,.18);  color: #5b9cf6; }
.chip-badge.stock  { background: rgba(192,200,216,.18); color: #c0c8d8; }
.chip-badge.etf    { background: rgba(143,157,186,.18); color: #8f9dba; }
.chip-badge.metal  { background: rgba(212,168,67,.18);  color: #d4a843; }

.chip-info { flex: 1; min-width: 0; }
.chip-name { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--text); }
.chip-sub  { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.chip-price {
  font-size: 13px; font-weight: var(--font-weight-semibold);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.chip-clear {
  background: none; border: none;
  color: var(--text-dim); cursor: pointer;
  font-size: 12px; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px; flex-shrink: 0;
  transition: color .15s, background .15s;
}
.chip-clear:hover { color: var(--text); background: rgba(255,255,255,.07); }

/* ── Search type filters ───────────────────────────────── */
.search-filters {
  display: flex;
  gap: 6px;
  margin: -4px 0 14px;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 4px 11px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast),
              background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-premium),
              filter var(--dur-fast) var(--ease-premium),
              opacity var(--dur-fast);
}
.filter-btn:hover  { border-color: var(--accent); color: var(--text); background: rgba(74, 130, 240,.06); }
.filter-btn:active {
  transform: scale(.92);
  filter: brightness(.84);
  opacity: .78;
  transition: transform var(--dur-tap) var(--ease-premium),
              filter var(--dur-tap) var(--ease-premium),
              opacity var(--dur-tap);
}
.filter-btn.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}


/* ── Liquidity modal currency toggle ───────────────────── */
.type-toggle:has(.liq-btn),
.type-toggle:has(.re-curr-btn) {
  background: transparent;
  border: none;
  padding: 0;
  gap: 6px;
}

.liq-btn,
.re-curr-btn {
  appearance: none;
  -webkit-appearance: none;
  flex: 1;
  background: transparent;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: var(--space-1) 14px;
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: var(--text-muted);
  cursor: pointer;
  transition: background .18s var(--ease-out), color .15s, border-color .18s var(--ease-out),
              box-shadow .18s var(--ease-out), transform .18s var(--ease-premium);
}
.liq-btn:hover,
.re-curr-btn:hover {
  background: rgba(255,255,255,.05);
  color: var(--text);
  border-color: rgba(255,255,255,.22);
}
.liq-btn.active,
.re-curr-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 0 12px rgba(74, 130, 240,.35), inset 0 1px 0 rgba(255,255,255,.15);
}
.liq-btn:active,
.re-curr-btn:active { transform: scale(0.93); transition-duration: 70ms; }

/* ── Type-toggle buttons (karats, units) ───────────────── */
.type-btn {
  transition: background .18s var(--ease-out), color .15s, box-shadow .18s var(--ease-out),
              transform .18s var(--ease-premium);
}
.type-btn:active { transform: scale(0.93); transition-duration: 70ms; }

/* ── Asset skeleton (loading placeholder) ──────────────── */
.asset-skeleton {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  height: 82px;
  background-image: linear-gradient(
    90deg,
    rgba(255,255,255,.03) 25%,
    rgba(255,255,255,.08) 37%,
    rgba(255,255,255,.03) 63%
  );
  background-size: 200% 100%;
  animation: shimmer 1.2s ease-in-out infinite, fade-in .3s var(--ease-out) both;
}


/* ── Numeric value smooth transition + hover glow ─────────── */
.asset-value-amount,
.donut-center-val,
.summary-total {
  transition: color 250ms var(--ease-out), opacity 200ms var(--ease-out),
              filter 220ms var(--ease-out);
}
.summary-panel:hover .summary-total {
  filter: drop-shadow(0 0 16px rgba(255,255,255,.12)) brightness(1.08);
}
.asset-card:hover .asset-value-amount {
  filter: brightness(1.12);
}

/* ── Responsive ────────────────────────────────────────── */

/* Disable sticky hover lifts on touch devices */
@media (hover: none) {
  .summary-panel:hover,
  .distribution-section:hover,
  .chart-section:hover,
  .asset-card:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--border);
  }
  .btn-primary:hover,
  .btn-secondary:hover,
  .btn-summary-action:hover,
  .btn-add:hover {
    transform: none;
    filter: none;
    box-shadow: none;
  }
  .legend-item:hover,
  .menu-item:hover,
  .assets-back-btn:hover {
    transform: none;
  }
  /* Disable hover lift on hero card for touch devices */
  .hero-card:hover {
    transform: none;
    box-shadow: none;
  }
  /* Disable will-change on touch to save GPU memory */
  .hero-card,
  .distribution-section,
  .asset-card,
  .modal {
    will-change: auto;
  }
}

/* ── Mobile header: center logo (≤ 768px) ─────────────── */
@media (max-width: 768px) {
  /* AURIX-MOBILE-POLISH-1 (#1 + #2): native-app header. AURIX sits left,
     controls right ([AURIX] ............ [☰]). Fixed height, safe-area aware,
     persistent subtle glass + hairline border, always sticky. Replaces the
     old centered-logo + absolutely-pinned menu that read as "logo flotando /
     menú desplazado". */
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    grid-template-columns: none;
    justify-items: initial;
    position: sticky;
    top: 0;
    z-index: 60;
    /* SPEC MOBILE-ABOVE-THE-FOLD-COMPRESSION (#1 v550: 54→48; #2: 48→42) —
       min-height now matches the compacted content (hamburger 30 + 12 padding =
       42), so the leftover space below the wordmark is removed. Safe-area inset
       preserved so the mark never rides under the notch / Dynamic Island. */
    min-height: 42px;
    /* AURIX-MOBILE-DASHBOARD-CATEGORY-FIX-1 (#1): a small horizontal inset so
       AURIX aligns optically with the card CONTENT (the .app shell adds 16px,
       this adds ~8px more) instead of sitting flush against the screen edge.
       Symmetric, so the hamburger reads as intentionally placed on the right. */
    padding: 6px var(--space-2);
    padding-top: calc(6px + env(safe-area-inset-top, 0px));
    /* SPEC MOBILE-ABOVE-THE-FOLD-COMPRESSION (#2) — 8→4: remove leftover margin
       between the header and the Total Value card (clean premium separation
       kept via the card's own top margin). */
    margin-bottom: 4px;
    background: rgba(11, 15, 26, 0.72);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    /* SPEC MOBILE-ABOVE-THE-FOLD-COMPRESSION — remove the static header divider
       line (the glass background + scroll depth already separate the header). */
    border-bottom: none;
  }
  /* AURIX-LAUNCH-CRITICAL-MOBILE-1 (#2): AURIX centred in the mobile header
     (roadmap requirement), hamburger/search on the right. The logo is taken
     out of flow and absolutely centred across the full bar so it is optically
     centred on the SCREEN regardless of the right-controls width. The
     container is pointer-events:none (clicks pass through to the controls
     underneath) while the wordmark itself stays tappable for "back home".
     Vertical box starts below the status bar via the safe-area inset so the
     mark never rides under the notch / Dynamic Island. Drop the desktop
     scaleX/scaleY transform (it squished the mark and read as floating). */
  .header-left {
    position: absolute;
    left: 0;
    right: 0;
    top: env(safe-area-inset-top, 0px);
    bottom: 0;
    grid-column: auto;
    justify-self: initial;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  .logo-block {
    align-items: center;
    margin-top: 0;
    pointer-events: auto;
  }
  .logo-block .logo-aurix {
    /* SPEC MOBILE-ABOVE-THE-FOLD-COMPRESSION — a slightly smaller, flatter,
       tighter-tracked wordmark reads more premium and trims header height.
       scaleY only (no horizontal scale) so the optical-centering math below
       still holds. NEVER add a `background` shorthand here (wordmark clip bug). */
    transform: scaleY(0.92);
    transform-origin: center;
    font-size: 18px;
    letter-spacing: 0.30em;
    /* AURIX-LAUNCH-CRITICAL-MOBILE-1 (#2) — OPTICAL centering. letter-spacing
       adds tracking AFTER every glyph, including a trailing 0.30em after the
       final "X", so the text BOX is wider on the right and the inked glyphs
       sit left of the box centre. A left padding equal to the tracking
       balances that trailing space, so the GLYPHS (not the box) are centred
       on screen. em-based, so it scales with the font at every breakpoint.
       This is the missing piece — geometric centring alone
       (left:0;right:0;justify-content:center) leaves the optical
       offset that reads as "shifted left". */
    padding-left: 0.30em;
  }
  /* Controls right — static in flow, kept above the centred logo layer and
     always clickable. */
  .header-right {
    position: relative;
    z-index: 2;
    transform: none;
    right: auto;
    top: auto;
    grid-column: auto;
    justify-self: initial;
    margin-left: auto;
    gap: 8px;
  }
  /* SPEC MOBILE-ABOVE-THE-FOLD-COMPRESSION (#2) — trim the hamburger's VISUAL
     height (36→30, vertical padding 9→5) so the header reads lighter and the bar
     drives less flow height (the header is content-sized by the sole visible
     header-right child; search is display:none on mobile). Width 34 + the bar
     geometry (gap 4px, bar 1.5px) are UNCHANGED, so the open-X animation is
     intact and the tap area stays comfortable. Mobile-scoped only (this whole
     block is inside @media ≤768) — desktop keeps the base 36px. NOTE: the
     descendant selector (.header-right .menu-toggle, 0,2,0) is REQUIRED so it
     beats the base `.menu-toggle` rule, which appears LATER in source and would
     otherwise win the same-specificity tie. */
  .header-right .menu-toggle {
    width: 34px;
    height: 30px;
    padding: 5px 6px;
    border-radius: 9px;
    margin-top: 0;
  }
}

/* ── Large mobile / tablet (≤ 640px) ──────────────────── */
@media (max-width: 640px) {
  /* App shell — premium side padding. AURIX-MOBILE-CATEGORY-POLISH-1 (#2):
     16px (was 12px) so the centered content breathes and never sits tight
     against the left edge. .app is already max-width capped + margin:auto. */
  .app {
    padding: 0 var(--space-4) 48px;
  }

  /* Header — tighter vertical rhythm. AURIX-MOBILE-POLISH-1: keep the
     safe-area inset on the top padding so the logo never sits under the
     status bar / Dynamic Island on notched iPhones. */
  .header {
    padding: 6px var(--space-2);
    padding-top: calc(6px + env(safe-area-inset-top, 0px));
    /* SPEC MOBILE-ABOVE-THE-FOLD-COMPRESSION (#2) — 8→4, matches the ≤768 tier. */
    margin-bottom: 4px;
  }
  .logo-block .logo-aurix { font-size: 18px; }

  /* DASHBOARD-MOBILE-DENSITY-1 — tighter rhythm above the card so the
     chart + Aurix Signal surface lift slightly into view. The 4-step
     top margin used to push the card too far down on small screens.
     SPEC MOBILE-ABOVE-THE-FOLD-COMPRESSION — top margin 16→12 (#1 v550) → 8 (#2)
     to raise the whole column (Total Value / Portfolio Evolution / first Summary
     Card) while keeping a clean, premium gap under the header. */
  .dashboard-top {
    margin-top: var(--space-1);
    margin-bottom: var(--space-2);
  }

  /* Hero card — vertical flex column on mobile */
  .hero-card {
    display: flex;          /* override the desktop CSS grid */
    flex-direction: column;
    align-items: stretch;   /* reset desktop align-items:center so children fill full width */
    grid-template-columns: 1fr; /* no-op on flex, kept for clarity */
    border-radius: var(--radius-md);
  }
  .hero-left {
    flex-shrink: 0;         /* never compress the value block */
    height: auto;           /* reset the desktop height:100% */
    /* FINAL-MOBILE-POLISH-1 — tighten bottom dead space further so
       the meta row lifts toward the value (~6–10px) and the chart +
       Aurix Signal cards sit higher above the fold. Previous polish
       (DASHBOARD-MOBILE-DENSITY-1) left 12px below the row, which
       still read as a gap once the footer was hidden. */
    /* AURIX-PREMIUM-CLEANUP-1 — small premium breathing room (6px→10px). */
    padding: 16px var(--space-4) 10px var(--space-4) !important;
    border-right: none;
    border-bottom: none;
  }
  .hero-right {
    display: flex;
    flex-direction: column;
    padding: var(--space-3) var(--space-4) var(--space-4);
  }
  .summary-label {
    margin-bottom: var(--space-1);
  }
  .summary-total {
    font-size: clamp(26px, 8vw, 38px);
    color: #ffffff;
    /* AURIX-PREMIUM-CLEANUP-1 — value-to-meta gap relaxed slightly
       (2px→6px) for premium breathing room without growing height. */
    margin-bottom: 6px;
  }
  /* FINAL-MOBILE-POLISH-1 — calm the perf line: smaller bottom margin
     keeps it tucked under the total instead of pushing the meta row
     down. Desktop default (14px) stays for wider canvases. */
  .summary-perf {
    margin-bottom: 6px;
  }
  .summary-meta {
    font-size: 12px;
    min-width: 0;
  }
  .summary-divider { margin: 0 6px; }
  .summary-meta-row {
    gap: 10px;
  }
  .summary-footer {
    margin-top: var(--space-1) !important;
    padding-top: var(--space-2);
    border-top: none;
    gap: 6px;
  }
  .summary-actions  { flex-direction: row; flex-wrap: wrap; gap: 6px; width: auto; }
  /* Action buttons: keep same style as desktop — only size/padding adjusted */
  .btn-summary-action {
    width: auto;
    min-height: 30px;
    font-size: 11px;
    padding: 5px var(--space-2);
    border-radius: 6px;
  }
  /* btn-primary / btn-secondary: NO colour overrides — desktop values apply unchanged */

  /* Distribution — stack donut + legend vertically */
  .portfolio-combined-card {
    padding: var(--space-4) var(--space-3);
    border-radius: 14px;
    gap: var(--space-3);
  }
  .distribution-section {
    margin-bottom: 28px;
  }
  .distribution-header { margin-bottom: var(--space-2); }
  .distribution-inner {
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
  }
  .donut-wrap {
    width: min(180px, 50vw);
    height: min(180px, 50vw);
    flex-shrink: 0;
  }
  .distribution-legend {
    width: 100%;
    gap: 2px;
  }
  .legend-item {
    padding: 4px 7px;
    margin: 0 -7px;
  }

  /* Chart — dominant on mobile */
  .chart-header {
    flex-shrink: 0;         /* keep controls visible, never compress */
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
    gap: 10px;
  }
  .chart-controls {
    gap: 6px;
    width: 100%;
    justify-content: flex-start;
  }
  .chart-wrap {
    height: 220px;
    min-height: 220px;
    margin-top: var(--space-3);
    overflow: hidden;
  }
  .chart-wrap canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
  }
  .chart-change { font-size: 13px; }
  .range-btn {
    padding: 6px 10px;
    font-size: 11px;
  }
  .perf-btn {
    padding: 5px 10px;
    font-size: 11px;
    min-height: 30px;
  }

  /* Assets section */
  .assets-section { margin-top: 28px; }
  .assets-list    { gap: var(--space-1); }
}

/* ── Mobile phones (≤ 520px) ───────────────────────────── */
@media (max-width: 520px) {
  /* Asset card: badge+info | value (row 2) | actions */
  .asset-card {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: 0 var(--space-2);
    padding: 14px var(--space-2);
    border-radius: 10px;
  }

  /* Value block drops to row 2 under the asset name */
  .asset-value {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    grid-column: 2;
    grid-row: 2;
    padding-top: var(--space-1);
  }

  .asset-value-sub {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px var(--space-1);
  }

  .asset-value-sub .units,
  .asset-value-sub .price,
  .asset-value-sub .change,
  .asset-value-sub .asset-rent {
    grid-column: unset;
    grid-row: unset;
    text-align: left;
  }

  .asset-value-amount {
    grid-column: unset;
    grid-row: unset;
    font-size: 15px;
  }

  /* Action buttons: stacked vertically, thumb-friendly size */
  .asset-actions {
    grid-column: 3;
    grid-row: 1 / 3;
    border-left: none;
    padding-left: 6px;
    flex-direction: column;
    gap: 6px;
    align-self: center;
  }
  .btn-add-pos,
  .btn-reduce,
  .btn-delete,
  .btn-edit-re {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    font-size: var(--font-size-md);
  }

  /* Modals slide up as bottom sheets */
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .modal {
    max-width: 100%;
    width: 100%;
    border-radius: 20px 20px 0 0;
    transform: translateY(60px) scale(0.98);
    transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform, opacity;
    /* Constrain height so body can scroll independently. dvh respects
       the iOS keyboard inset; svh is the fallback for older Safari. */
    max-height: calc(100dvh - env(safe-area-inset-top));
    max-height: 92svh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Premium sheet feel: a hairline top border + a tiny tint shift
       from the surface behind. Bottom area honours the home indicator. */
    background: rgba(14,16,22,0.96);
    border: 1px solid rgba(255,255,255,0.06);
    border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .modal-overlay.open .modal {
    transform: translateY(0) scale(1);
  }
  /* Drag handle — purely decorative, signals "this is a sheet". */
  .sheet-handle {
    display: block;
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,0.18);
    margin: 8px auto 4px;
    flex-shrink: 0;
  }
  /* Header stays fixed at top of sheet */
  .modal-header {
    flex-shrink: 0;
    padding: 6px 16px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  .modal-header h3 { font-size: 16px; }
  /* Form body scrolls within the constrained sheet */
  .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    will-change: transform;
    flex: 1;
    min-height: 0;
    padding: 14px 16px 96px;
  }
  /* Sticky CTA bar at the bottom of the sheet so the primary button is
     always reachable without scrolling. Honours the home indicator. */
  .modal-cta {
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
  }
  /* Segmented Activo / Liquidez control: roomier tap targets aligned
     with the sheet gutters. */
  .add-type-toggle {
    margin: 4px 16px 10px;
    gap: 6px;
  }
  .add-type-toggle .type-btn { padding: 11px 0; font-size: 13.5px; }

  /* Search input: 48px height + 16px font so iOS Safari doesn't
     auto-zoom on focus (which then drags the sheet sideways). */
  .search-field-wrap input {
    height: 46px;
    font-size: 16px;
    padding: 0 44px 0 14px;
    border-radius: 12px;
  }
  .search-clear { right: 12px; }
  /* Filter chips wrap cleanly instead of forcing a horizontal scroll. */
  .search-filters {
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 12px;
  }
  .filter-btn { padding: 7px 12px; font-size: 12px; }
  /* Selected chip — premium, aligned with the search input radius. */
  .selected-chip {
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 14px;
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.06);
  }

  /* Empty-state helper — only renders when JS confirms no chip, no
     query, no manual mode. Subtle and out of the way. */
  .search-empty-hint {
    display: block;
    margin: 4px 2px 12px;
    font-size: 12.5px;
    line-height: 1.4;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.01em;
  }

  /* Mobile ISIN: collapsed by default, revealed only after the user
     taps the toggle. The big "—— o ——" divider is dropped on mobile
     to remove visual dead weight (replaced by the toggle link). */
  .isin-toggle-mobile {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 2px 0 12px;
    padding: 6px 10px 6px 0;
    background: none;
    border: none;
    color: rgba(74, 130, 240,0.92);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
  }
  .isin-toggle-mobile:active { opacity: 0.7; }
  .isin-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: rgba(74, 130, 240,0.12);
    color: rgba(74, 130, 240,0.95);
    font-size: 13px;
    line-height: 1;
  }
  #searchWrap .isin-or-wrap { display: none; }
  #searchWrap.isin-revealed .isin-or-wrap { display: block; }
  #searchWrap .form-or-divider { display: none; }
  #searchWrap.isin-revealed .form-or-divider {
    display: flex;
    margin: 6px 0 10px;
    font-size: 10px;
    opacity: 0.55;
  }

  /* Suggestions list: tighter max-height on small screens */
  .asset-suggestions { max-height: 42vh; }

  .hero-left     { flex-shrink: 0; padding: var(--space-3) 14px 10px; }
  .hero-right    { padding: 14px 14px 18px; }
  .form-row      { grid-template-columns: 1fr; }
}

/* ── Very small phones (≤ 375px) ───────────────────────── */
@media (max-width: 375px) {
  .app            { padding: 0 var(--space-2) 40px; }
  .summary-total  { font-size: 24px; }
  .asset-card     { padding: var(--space-2) 10px; gap: 0 10px; }
  .btn-add-pos,
  .btn-reduce,
  .btn-delete,
  .btn-edit-re    { width: 36px; height: 36px; }
  .hero-left      { flex-shrink: 0; padding: var(--space-3) var(--space-2) var(--space-2); }
  .hero-right     { padding: 14px var(--space-2) var(--space-3); }
}

/* ── Dashboard entrance animation ──────────────────────── */

/* Element slide-in (used via inline JS transitions, not a class) */
@keyframes dash-enter {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Glow pulse on the total balance after count-up completes */
@keyframes balance-glow {
  0%, 100% { filter: none; }
  38%       {
    filter:
      drop-shadow(0 0 10px rgba(74, 130, 240,.50))
      drop-shadow(0 0 28px rgba(74, 130, 240,.18));
  }
}
.balance-glow-pulse {
  animation: balance-glow .95s var(--ease-out) forwards;
}

/* Chart: cover slides away left→right revealing line; leading edge has a soft blue pen-glow */
@keyframes chart-wipe {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}
.chart-wrap--drawing::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Gradient: pen-glow at the left (leading) edge, solid cover behind it */
  background: linear-gradient(to right,
    rgba(74, 130, 240,.28) 0px,
    rgba(74, 130, 240,.08) 10px,
    rgba(74, 130, 240,.02) 22px,
    #0d1018             28px  /* matches hero-card right-side background */
  );
  transform-origin: right center;
  animation: chart-wipe .95s .05s var(--ease-out) forwards;
  pointer-events: none;
  z-index: 2;
}

/* Category card lift-wave on entrance */
@keyframes cat-card-arrive {
  0%   { transform: translateY(0) scale(1); }
  34%  { transform: translateY(-5px) scale(1.018); }
  68%  { transform: translateY(1.5px) scale(0.998); }
  100% { transform: translateY(0) scale(1); }
}
.cat-card--arrive {
  animation: cat-card-arrive .46s var(--ease-out);
}

/* Staggered fade-up entrance — JS adds .cat-card--visible one by one */
.categories-grid .cat-card {
  opacity: 0;
  transform: translateY(8px);
}
.categories-grid .cat-card.cat-card--visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Suppress hover transforms while entrance sequence is running */
.app--animating .hero-card:hover,
.app--animating .distribution-section:hover,
.app--animating .portfolio-combined-card:hover,
.app--animating .cat-card:hover {
  transform: none !important;
}

/* No motion — instant reveal, no animations */
@media (prefers-reduced-motion: reduce) {
  .balance-glow-pulse { animation: none; }
  .cat-card--arrive   { animation: none; }
  /* Skip stagger — show all cards immediately */
  .categories-grid .cat-card          { opacity: 1; transform: none; }
  .categories-grid .cat-card.cat-card--visible { transition: none; }
  .chart-wrap--drawing::after { animation: none; opacity: 0; }
  /* AURIX-CHART-LOADING-PREMIUM-1 — no draw animation; show the chart at once.
     The loading skin still appears (static, no breathing) so the area is never
     an empty rectangle, but it switches instantly to the ready chart. */
  .chart-wrap--revealing::after { animation: none; display: none; }
  .chart-wrap--revealing .aurix-chart-host { animation: none; clip-path: none; }
  .chart-loading-skin__line     { animation: none; }
  .hero-card::before { animation: none; }
  .cat-card-visual img { opacity: 1; transform: none; }
  .chart-wrap::after { animation: none; opacity: 0; }
  .logo-block .logo-aurix { animation: none; }
  /* Strip transitions for reduced-motion users */
  .hero-card,
  .distribution-section,
  .asset-card,
  .cat-card,
  .legend-item,
  .menu-item,
  .assets-back-btn,
  .modal,
  .modal-overlay {
    transition: none;
  }
}

/* ── Private Beta Access Screen ─────────────────────────── */

@keyframes pin-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-5px); }
  40%       { transform: translateX(5px); }
  60%       { transform: translateX(-3px); }
  80%       { transform: translateX(3px); }
}

@keyframes beta-bg-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(28px, -18px) scale(1.05); }
}

/* ── Screen wrapper ── */
#betaAccessScreen {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  overflow: hidden;
  background: #07080f;
  transition: opacity .65s var(--ease-out);
}

/* Slow-drifting ambient glows */
#betaAccessScreen::before {
  content: '';
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(circle 750px at 22% 32%, rgba(74, 130, 240,.10) 0%, transparent 60%),
    radial-gradient(circle 600px at 80% 74%, rgba(63, 191, 127,.06) 0%, transparent 60%);
  animation: beta-bg-drift 26s ease-in-out infinite alternate;
  pointer-events: none;
}

/* Authenticated: entire screen fades out */
#betaAccessScreen.authed {
  opacity: 0;
  pointer-events: none;
}

/* Exiting: container shrinks + blurs before screen fades */
#betaAccessScreen.exiting .beta-container {
  opacity: 0;
  transform: scale(.94) translateY(10px);
  filter: blur(5px);
  transition:
    opacity   .42s var(--ease-out),
    transform .42s var(--ease-out),
    filter    .42s var(--ease-out);
}

/* ── Container (logo + card, stacked) ── */
.beta-container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  width: 100%;
  max-width: 360px;
}

/* ── Stacked logo ── */
.beta-logo-above {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  user-select: none;
}

/* Login logo sizing handled by .beta-logo-above .logo-aurix above */

/* ── Main card — glassmorphism ── */
.beta-card {
  width: 100%;
  padding: 48px 40px 42px;
  background: rgba(11, 14, 22, 0.78);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 24px;
  box-shadow:
    0 32px 90px rgba(0,0,0,.70),
    0 0 0 1px rgba(255,255,255,.025),
    0 0 100px rgba(74, 130, 240,.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.beta-access-label {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--text-bright);
  margin-bottom: var(--space-1);
}

.beta-hint {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: .03em;
  margin-bottom: 34px;
}

/* Form */
#betaForm {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* ── Input area ── */
.beta-input-wrap {
  position: relative;
  margin-bottom: var(--space-1);
  /* Shake applied here so dots + underline shake together */
}

.beta-input-wrap.shake {
  animation: pin-shake .38s var(--ease-out);
}

/* Hidden input — no border, fully invisible text + bullets, accent caret */
#betaPin {
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  /* Remove browser bullet rendering (WebKit/Blink) before color:transparent */
  -webkit-text-security: none;
  color: transparent;
  caret-color: var(--accent);
  font-size: var(--font-size-lg);
  font-family: inherit;
  padding: 10px 0 18px;
  outline: none;
  text-align: center;
}

/* Hide caret once dots appear */
#betaPin.has-value {
  caret-color: transparent;
}

.beta-dots {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}

.beta-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 160ms ease-out, transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.beta-dot.visible {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.22);
}

/* Animated underline (left → right on focus) */
.beta-underline {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, .09);
  overflow: hidden;
  /* Smooth glow transition for ready state */
  transition: box-shadow .35s var(--ease-out);
}

.beta-underline::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--accent), #3ecfb0);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .32s var(--ease-out), background .22s var(--ease-out);
}

/* Focus: reveal accent line */
.beta-input-wrap.focused .beta-underline::after {
  transform: scaleX(1);
}

/* Typing (1–3 digits): slightly brighter accent */
.beta-input-wrap.focused.has-input .beta-underline::after {
  background: linear-gradient(90deg, #6aaeff, #45e8c4);
}

/* Ready (4 digits): soft persistent glow on the underline */
.beta-input-wrap.ready .beta-underline {
  box-shadow: 0 0 10px rgba(74, 130, 240, .32), 0 0 20px rgba(74, 130, 240, .10);
}

/* Ready + focused: brightest underline */
.beta-input-wrap.ready.focused .beta-underline::after {
  background: linear-gradient(90deg, #80bfff, #4aedd4);
}

/* Ready: dots shift to accent tint */
.beta-input-wrap.ready .beta-dot.visible {
  background: rgba(160, 210, 255, 0.97);
  box-shadow: 0 0 8px rgba(74, 130, 240, 0.40);
}

/* Shake: underline flashes warning */
.beta-input-wrap.shake .beta-underline {
  box-shadow: 0 0 12px rgba(255, 80, 80, 0.30);
}

/* Error state (CSS prep — toggled via .error class) */
.beta-input-wrap.error .beta-dot.visible {
  background: rgba(255, 100, 90, 0.92);
  box-shadow: 0 0 8px rgba(255, 70, 60, 0.32);
  transition: background 180ms ease-out, box-shadow 180ms ease-out;
}

.beta-input-wrap.error .beta-underline {
  background: rgba(255, 80, 70, 0.12);
  box-shadow: 0 0 12px rgba(255, 70, 60, 0.28);
}

.beta-input-wrap.error .beta-underline::after {
  background: linear-gradient(90deg, #ff6060, #ff9060);
  transform: scaleX(1);
}

/* Error */
.beta-error {
  font-size: 11px;
  color: var(--red);
  letter-spacing: .03em;
  min-height: 20px;
  margin-bottom: 2px;
  opacity: 0;
  transition: opacity .18s;
}

.beta-error.show { opacity: 1; }

/* ── Submit button ── */
.beta-btn {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, var(--aurix-blue) 0%, #3ecfb0 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: .13em;
  text-transform: uppercase;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  margin-top: 10px;
  /* Reduced default glow */
  box-shadow: 0 4px 16px rgba(74, 130, 240,.18);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), opacity .15s;
}

/* Ready state — 4 digits entered */
.beta-btn.ready {
  box-shadow: 0 6px 26px rgba(74, 130, 240,.36);
}

.beta-btn:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(74, 130, 240,.40);
}

.beta-btn:not(:disabled):active {
  transform: scale(.98);
  box-shadow: 0 2px 10px rgba(74, 130, 240,.18);
}

.beta-btn:disabled {
  opacity: .20;
  cursor: default;
  box-shadow: none;
  pointer-events: none;
}

/* Version microcopy */
.beta-version {
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: .08em;
  margin-top: 22px;
  user-select: none;
}

/* ── Hamburger menu toggle ─────────────────────────────── */
.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 36px;
  height: 36px;
  padding: 9px var(--space-1);
  margin-top: 2px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-premium),
              filter var(--dur-fast) var(--ease-premium),
              opacity var(--dur-fast);
  flex-shrink: 0;
}

.menu-toggle:hover {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
}
.menu-toggle:active {
  transform: scale(.92);
  filter: brightness(.84);
  opacity: .78;
  transition: transform var(--dur-tap) var(--ease-premium),
              filter var(--dur-tap) var(--ease-premium),
              opacity var(--dur-tap);
}

.menu-toggle.open {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}

.menu-toggle-bar {
  display: block;
  width: 100%;
  height: 1.5px;
  background: rgba(255,255,255,.75);
  border-radius: 2px;
  transition: transform .2s var(--ease-out), opacity .15s ease-out;
  transform-origin: center;
}

/* Animated X when open */
.menu-toggle.open .menu-toggle-bar:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.menu-toggle.open .menu-toggle-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-toggle.open .menu-toggle-bar:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ── Dropdown panel ────────────────────────────────────── */
.menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: rgba(13,16,26,.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  padding: 6px;
  width: 186px;
  z-index: 200;
  opacity: 0;
  transform: translateY(-6px) scale(0.97);
  pointer-events: none;
  transition: opacity .18s ease-out, transform .18s var(--ease-out);
  box-shadow: 0 16px 48px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
}

.menu-panel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ── Menu items ────────────────────────────────────────── */
.menu-item {
  width: 100%;
  text-align: left;
  padding: 9px var(--space-2);
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  font-weight: var(--font-weight-medium);
  border-radius: 9px;
  cursor: pointer;
  transition: background .15s var(--ease-out), color .15s var(--ease-out),
              transform .15s var(--ease-out);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  letter-spacing: .01em;
}

.menu-item:hover  { background: rgba(255,255,255,.07); transform: translateX(2px); }
.menu-item:active { background: rgba(255,255,255,.04); transform: translateX(0); }

/* Active language indicator */
.menu-item--lang.active {
  color: var(--accent);
  background: rgba(74, 130, 240,.08);
}
.menu-item--lang.active:hover { background: rgba(74, 130, 240,.13); }

.menu-divider {
  height: 1px;
  background: rgba(255,255,255,.07);
  margin: 5px 4px;
}

.menu-item--danger { color: var(--aurix-danger); }
.menu-item--danger:hover { background: rgba(224, 90, 90,.10); color: var(--aurix-danger); }

/* ── Menu currency toggle ─────────────────────────────── */
.menu-curr-row {
  display: flex;
  gap: 5px;
  padding: 6px var(--space-1) 4px;
}

.menu-curr-btn {
  flex: 1;
  padding: 7px 6px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 7px;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: .02em;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-tap) var(--ease-premium);
  -webkit-tap-highlight-color: transparent;
}
.menu-curr-btn:hover:not(.active) {
  background: rgba(255,255,255,.08);
  color: var(--text);
  border-color: rgba(255,255,255,.16);
}
.menu-curr-btn.active {
  background: rgba(74, 130, 240,.12);
  border-color: rgba(74, 130, 240,.30);
  color: var(--accent);
}
.menu-curr-btn:active {
  transform: scale(.93);
}

/* ── Exit button (header top-right) ── (kept as hidden proxy) */
.btn-exit {
  display: none !important; /* always hidden — menu-item--danger is the visible exit */
}

@media (max-width: 480px) {
  .beta-card      { padding: 40px 28px 36px; }
  .beta-container { gap: 18px; }
  .beta-logo-above .logo-aurix { font-size: 26px; }
}

/* ── Detail View Hero ──────────────────────────────────────
   Appears at the top of a category drill-down view.
   Shows category name, total value, 24h change, mini sparkline.
   ─────────────────────────────────────────────────────── */
.detail-hero {
  /* CATEGORY-HERO-PREMIUM-FINAL: institutional two-column hero —
     dominant value on the left, segmented metadata rail on the right.
     Right column sizes to its content so the rail neither floats in
     dead space nor crushes against the value. */
  background:
    linear-gradient(180deg, rgba(28, 42, 74, 0.38) 0%, rgba(14, 20, 36, 0.18) 60%),
    var(--bg-card);
  border: 1px solid var(--aurix-border, rgba(74, 130, 240, 0.18));
  border-radius: 16px;
  padding: 22px 24px 20px;
  margin-bottom: 14px;
  overflow: hidden;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
}

.detail-hero-info { position: relative; z-index: 1; min-width: 0; }

/* Right-side rail: institutional metadata block, vertically centered
   alongside the value on the left. */
.detail-hero-side {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

/* CATEGORY-HERO-PREMIUM-FINAL — segmented metadata rail for desktop.
   Three cells (Exposición / Posiciones / Principal) sit inside a single
   navy capsule with subtle dividers, each cell showing a caption above
   a tabular-numeric value. Reads like a Bloomberg / Apple Finance
   identity card, not floating badges. */
/* AURIX-FINAL-CATEGORY-POLISH — quieter, more institutional rail.
   More breathing room, calmer captions (smaller + softer colour),
   stronger numeric values, and softer dividers so the rail feels
   like a premium finance product rather than a dashboard widget. */
.detail-hero-meta-rail {
  display: flex;
  align-items: stretch;
  padding: 10px 8px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(20, 30, 56, 0.50), rgba(14, 22, 42, 0.42));
  border: 1px solid var(--aurix-border, rgba(74, 130, 240, 0.18));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 10px 28px -20px rgba(4, 8, 18, 0.7);
}
.detail-hero-meta-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  padding: 8px 20px;
  min-width: 102px;
  position: relative;
}
.detail-hero-meta-item[hidden] { display: none; }
.detail-hero-meta-item + .detail-hero-meta-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: rgba(74, 130, 240, 0.10);
}
.detail-hero-meta-caption {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(180, 200, 240, 0.42);
}
.detail-hero-meta-value {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: rgba(232, 240, 255, 0.96);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.detail-hero-meta-item.is-top .detail-hero-meta-value {
  /* Tickers tend to be uppercase + 3–4 chars; nudge them a hair
     smaller so they sit visually balanced next to the numeric cells. */
  font-size: 17px;
  letter-spacing: 0.01em;
}
/* FINAL-MOBILE-POLISH-1 — the inline unit ("cartera", "activos") is
   mobile-only. Desktop keeps the formal caption-above-value rail. */
.detail-hero-meta-unit { display: none; }

@media (max-width: 640px) {
  /* CATEGORY-HERO-PREMIUM-FINAL — mobile collapses the desktop rail to
     a quiet vertical stack of pills. No outer capsule, no dividers,
     calmer borders so the total value clearly dominates the card. The
     Principal cell hides — covered by the `[hidden]` rule above plus
     the explicit override below for the `.is-top` class. */
  .detail-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 14px 16px 14px;
    gap: 12px;
    align-items: center;
  }
  .detail-hero-side {
    align-items: flex-end;
    justify-content: center;
  }
  .detail-hero-meta-rail {
    flex-direction: column;
    align-items: flex-end;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    gap: 6px;
  }
  .detail-hero-meta-item {
    /* AURIX-FINAL-CATEGORY-POLISH — calmer pills: lower opacity bg +
       softer border so the total value clearly dominates the hero. */
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    padding: 4px 11px;
    min-width: 0;
    border-radius: 999px;
    background: rgba(74, 130, 240, 0.04);
    border: 1px solid rgba(74, 130, 240, 0.10);
  }
  .detail-hero-meta-item + .detail-hero-meta-item::before {
    display: none;
  }
  /* FINAL-MOBILE-POLISH-1 — drop the uppercase enterprise caption on
     mobile. The chip reads as a single inline phrase via the unit
     span below, e.g. "13% cartera" instead of "EXPOSICIÓN 13%". */
  .detail-hero-meta-caption { display: none; }
  .detail-hero-meta-value {
    font-size: 11px;
    color: rgba(225, 233, 255, 0.82);
    font-weight: 600;
  }
  /* FINAL-MOBILE-POLISH-1 — softer secondary token that gives the
     chip its consumer-premium reading: number first, lowercase unit
     after. Calmer weight + colour so the number stays the anchor. */
  .detail-hero-meta-unit {
    display: inline;
    font-size: 11px;
    font-weight: 500;
    color: rgba(180, 200, 240, 0.55);
    letter-spacing: 0.005em;
  }
  /* Principal cell stays desktop-only — agreed in CATEGORY-MOBILE-POLISH-2. */
  .detail-hero-meta-item.is-top { display: none !important; }
}
@media (max-width: 380px) {
  .detail-hero { grid-template-columns: minmax(0, 1fr) auto; }
  .detail-hero-meta-caption { font-size: 8.5px; }
  .detail-hero-meta-value   { font-size: 10.5px; }
  .detail-hero-meta-item    { padding: 3px 10px; }
}

.detail-hero-meta {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: 6px;
}

.detail-hero-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.detail-hero-type {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: .08em;
}

.detail-hero-value {
  /* CATEGORY-HERO-PREMIUM-FINAL: total category value anchors the hero.
     Bumped ~10% so it clearly dominates the metadata rail on its right. */
  font-size: 31px;
  font-weight: 800;
  color: var(--text-bright);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: var(--space-1);
  transition: color 150ms;
}

/* Flash colors on value update (JS-driven classes) */
@keyframes hero-flash-up {
  0%   { color: var(--green); filter: brightness(1.15); }
  55%  { color: var(--green); filter: brightness(1.08); }
  100% { color: var(--text-bright); filter: brightness(1); }
}
@keyframes hero-flash-down {
  0%   { color: var(--red); opacity: .88; }
  55%  { color: var(--red); opacity: 1;   }
  100% { color: var(--text-bright); opacity: 1; }
}
.detail-hero-value.hero-flash-up   { animation: hero-flash-up   650ms var(--ease-out) forwards; }
.detail-hero-value.hero-flash-down { animation: hero-flash-down 650ms var(--ease-out) forwards; }

.detail-hero-change {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  padding: 3px 10px;
  border-radius: 20px;
}
.detail-hero-change.up   { background: rgba(63, 191, 127,.14); color: var(--green); }
.detail-hero-change.down { background: rgba(224, 90, 90,.12);  color: var(--red);   }
.detail-hero-change.flat { background: rgba(107,116,148,.14); color: var(--text-muted); }

.detail-hero-pct {
  display: block;
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
  letter-spacing: .02em;
  margin-top: 6px;
}

/* CATEGORY-DETAIL-1 — premium hero copy blocks: count chip in the meta
   row, full-sentence summary, contextual insight line. */
.detail-hero-meta {
  flex-wrap: wrap;
}
.detail-hero-count {
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.detail-hero-summary {
  margin: 10px 0 0;
  font-size: 13.5px;
  font-weight: var(--font-weight-medium);
  color: var(--text-bright);
  letter-spacing: -.005em;
  line-height: 1.35;
}
.detail-hero-insight {
  margin: 6px 0 0;
  font-size: 12.5px;
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
  letter-spacing: 0;
  line-height: 1.4;
}
@media (max-width: 480px) {
  .detail-hero-summary { font-size: 12.5px; margin-top: 8px; }
  .detail-hero-insight { font-size: 11.5px; }
  .detail-hero-count   { font-size: 9.5px; padding: 2px 8px; }
}

/* CATEGORY-DETAIL-CHARTS-2 — premium dedicated performance panel.
   Lives between the hero and the asset list, uses the AurixCharts V2
   engine. Matches the dashboard chart language (calm gradient, tabular
   numerics, subtle range pills) so the category drill-down reads as
   the same surface family. */
.category-perf-panel {
  --category-perf-color: var(--accent, #8aa6ff);
  position: relative;
  margin: 0 0 18px;
  padding: 18px 20px 24px;
  /* CATEGORY-MOBILE-POLISH-2: strengthen the navy so the panel reads
     as the same Aurix surface family as the hero — no grey/black tone
     mismatch when the user scrolls past the hero. Same two-gradient
     stack as the hero rule below so mobile and desktop look identical
     across both cards. */
  background:
    linear-gradient(160deg, rgba(40, 60, 110, 0.24) 0%, rgba(14, 20, 36, 0.0) 55%),
    linear-gradient(180deg, rgba(14, 22, 42, 0.92), rgba(8, 12, 22, 0.94));
  border: 1px solid var(--aurix-border, rgba(74, 130, 240, 0.18));
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 18px 40px -24px rgba(4, 8, 18, 0.85);
}
/* CATEGORY-MOBILE-POLISH-2: the V2 chart engine sets an inline pixel
   height on its host. On mobile that pinned height didn't shrink with
   the responsive panel, so the x-axis labels fell outside the panel
   and visually collided with the positions card below. Forcing the
   host to fill its parent lets the panel CSS govern actual height. */
.category-perf-chart > .aurix-chart-host {
  height: 100% !important;
  width: 100% !important;
}
.category-perf-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
/* ASSET-SECTIONS-CARDS-CLEANUP — chartless category panel: a slim, premium textual summary
   (title + gain/loss) with no internal chart and no dead space. Rollback: delete this block. */
.category-perf-panel.is-chartless { margin: 0 0 12px; padding: 14px 18px; }
.category-perf-panel.is-chartless .category-perf-header {
  align-items: baseline; margin-bottom: 0; gap: 10px; flex-wrap: nowrap;
}
.category-perf-panel.is-chartless .category-perf-title-wrap {
  flex-direction: row; align-items: baseline; justify-content: space-between;
  gap: 10px; width: 100%;
}
.category-perf-panel.is-chartless .category-perf-change { font-size: 13px; white-space: nowrap; }
.category-perf-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.category-perf-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--text-bright);
}
.category-perf-change {
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  color: var(--text-muted);
}
.category-perf-change.is-up   { color: var(--green); }
.category-perf-change.is-down { color: var(--red); }
.category-perf-change.is-flat { color: var(--text-muted); }

.category-perf-ranges {
  display: inline-flex;
  align-items: stretch;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  flex-wrap: wrap;
}
.category-perf-range {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 6px 11px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  color: rgba(225,233,255,0.62);
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.category-perf-range:hover {
  color: rgba(225,233,255,0.92);
  background: rgba(74, 130, 240,0.06);
}
.category-perf-range.is-active {
  color: #fff;
  background: rgba(74, 130, 240,0.18);
}
.category-perf-range:focus-visible {
  outline: 2px solid rgba(74, 130, 240,0.55);
  outline-offset: 2px;
}

.category-perf-chart {
  position: relative;
  width: 100%;
  /* AURIX-FINAL-CATEGORY-POLISH — trim a further ~6% so the first
     holdings row lifts into view without scrolling, while the chart
     stays the panel's focal point. */
  height: 188px;
  min-height: 188px;
}
.category-perf-empty {
  position: absolute;
  inset: 56px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  pointer-events: none;
  padding: 24px;
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
  border: 1px dashed rgba(255,255,255,0.07);
}
.category-perf-empty[hidden] { display: none; }
.category-perf-empty-title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-bright);
}
.category-perf-empty-body {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  max-width: 320px;
  line-height: 1.4;
}

@media (max-width: 480px) {
  /* CATEGORY-DETAIL-DENSITY-FINAL — mobile chart trimmed ~19% to lift
     holdings into view. Panel keeps a generous bottom padding (22px)
     so the LWC x-axis labels stay safely inside the card and never
     bleed into the positions list below. */
  .category-perf-panel  { padding: 14px 14px 22px; margin-bottom: 16px; }
  .category-perf-title  { font-size: 13.5px; }
  .category-perf-change { font-size: 11.5px; }
  .category-perf-chart  { height: 178px; min-height: 178px; }
  .category-perf-empty  { inset: 50px 14px 22px; padding: 18px; }
  .category-perf-range  { padding: 5px 9px; font-size: 10.5px; }
}

/* CATEGORY-MOBILE-POLISH-2: hide the "Mayor: TSLA" chip on mobile.
   Spec calls it not intuitive enough for the small viewport; the
   "13% cartera" + "2 posiciones" chips already carry the most useful
   meta. Desktop keeps the chip when there's a clear category leader. */
@media (max-width: 640px) {
  .detail-hero-chip.is-top { display: none !important; }
}

.detail-hero-pnl {
  display: block;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  margin-top: 5px;
}
.detail-hero-pnl.up   { color: var(--green); }
.detail-hero-pnl.down { color: var(--red); }
.detail-hero-pnl.flat { color: var(--text-muted); }

/* Chart container — canvas fills the full height */
.detail-chart-wrap {
  height: 82px;
  margin-top: var(--space-3);
  position: relative;
}
.detail-chart-wrap canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

@media (max-width: 480px) {
  .detail-hero          { padding: var(--space-3) 18px var(--space-2); }
  /* AURIX-FINAL-CATEGORY-POLISH: bumped +4% more so the value reads as
     unambiguously the focal point against the calmer pills. */
  .detail-hero-value    { font-size: 26px; }
  .detail-chart-wrap    { height: 64px; margin-top: var(--space-2); }
}

/* ═══════════════════════════════════════════════════════════
   DETAIL VIEW — PREMIUM ASSET ROWS
   Rendered inside a category drill-down (activeCategory set).
   ═══════════════════════════════════════════════════════════ */

/* Left accent bar on the hero (colour-coded per category) */
.detail-hero::before {
  content: '';
  position: absolute;
  left: 0; top: 16px; bottom: 16px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--detail-hero-color, var(--accent));
  opacity: .8;
}

/* Taller sparkline for more impact */
.detail-chart-wrap { height: 100px; }

/* Card-style wrapper around the detail row list */
.assets-list.assets-list--detail {
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 6px;
  padding: 0;
  gap: 0;
}

/* Individual premium row */
@keyframes dar-enter {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}

.detail-asset-row {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  cursor: pointer;
  gap: 0 14px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--color-border-subtle);
  transition: background var(--dur-fast) var(--ease-premium);
}
.detail-asset-row:last-child { border-bottom: none; }
.detail-asset-row:hover      { background: rgba(255,255,255,.038); }

.detail-asset-row.dar-entering {
  animation: dar-enter 260ms calc(var(--card-i, 0) * 38ms + 30ms) var(--ease-out) both;
}

/* Badge — coloured square for each asset type */
.dar-badge {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  flex-shrink: 0;
}
.dar-badge.crypto      { background: rgba(91,156,246,.15);  color: #5b9cf6; }
.dar-badge.stock       { background: rgba(192,200,216,.10); color: #c0c8d8; }
.dar-badge.etf         { background: rgba(143,157,186,.12); color: #8f9dba; }
.dar-badge.metal       { background: rgba(212,168,67,.15);  color: #d4a843; }
.dar-badge.cash        { background: rgba(63, 191, 127,.12);  color: var(--aurix-success); }
.dar-badge.real_estate { background: rgba(167,139,250,.14); color: #a78bfa; }
/* Badge with logo — no coloured background in list view either */
.dar-badge.badge--has-logo { background: none !important; box-shadow: none !important; }

/* Name + sub-info column */
.dar-info { min-width: 0; }
.dar-name {
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  color: var(--text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  margin-bottom: 4px;
}
.dar-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  flex-wrap: wrap;
  line-height: 1;
}
.dar-rent {
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  color: var(--green);
  background: rgba(63, 191, 127,.10);
  border-radius: 4px;
  padding: 1px 5px;
}

/* Right column: value + change pill + action buttons */
.dar-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.dar-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-bright);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1;
}
.dar-change {
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  padding: 2px 7px;
  border-radius: 6px;
}
.dar-change.up   { background: rgba(63, 191, 127,.12); color: var(--green); }
.dar-change.down { background: rgba(224, 90, 90,.10);  color: var(--red);   }
.dar-change.flat { background: rgba(107,116,148,.12); color: var(--text-muted); }

.dar-cat-pct {
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.dar-fx {
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  opacity: 0.85;
}

.dar-actions { display: flex; gap: 4px; margin-top: 2px; }
.dar-actions button {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease-premium),
              color     var(--dur-fast) var(--ease-premium),
              border-color var(--dur-fast) var(--ease-premium);
}
.dar-actions button:hover         { background: var(--bg-card-2); color: var(--text); border-color: var(--border-hi); }
.dar-actions .btn-add-pos:hover   { color: var(--green); border-color: rgba(63, 191, 127,.30); background: rgba(63, 191, 127,.08); }
.dar-actions .btn-delete:hover    { color: var(--red);   border-color: rgba(224, 90, 90,.30);  background: rgba(224, 90, 90,.08); }
.dar-actions button:active {
  transform: scale(.88);
  filter: brightness(.80);
  opacity: .78;
  transition: transform var(--dur-tap) var(--ease-premium),
              filter var(--dur-tap) var(--ease-premium),
              opacity var(--dur-tap);
}

/* Section header in detail mode */
.assets-section.is-detail .assets-back-btn {
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: var(--accent);
  gap: 5px;
  opacity: .85;
}
.assets-section.is-detail .assets-back-btn:hover { opacity: 1; }
.assets-section.is-detail .section-filter-name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text-bright);
}

/* Mobile ≤ 520px */
@media (max-width: 520px) {
  /* AURIX-MOBILE-DASHBOARD-CATEGORY-FIX-1 (#6/#8): two-zone row — identity on
     the left, value + result + a compact right-aligned "Gestionar" pill on the
     right (NEVER full-width, never below as a wide block). The avg-buy-price
     label stays in the roomy left column; the right column keeps the protagonist
     value, P&L and weight compact so a new user reads the row in <3s. */
  .detail-asset-row {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 2px 10px;
    padding: 12px 14px;
    align-items: start;            /* value top-aligns with the name */
  }
  .dar-badge { width: 38px; height: 38px; border-radius: 10px; font-size: 9.5px; margin-top: 1px; }
  .dar-info  { min-width: 0; }
  .dar-name  { font-size: var(--font-size-sm); }
  .dar-right {
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;                /* keep value/P&L on one line each */
  }
  /* Current value is the protagonist — top-right, never wraps. */
  .dar-value { font-size: 15.5px; line-height: 1.2; white-space: nowrap; }
  .detail-asset-row .dar-cat-pct,
  .detail-asset-row .dar-pnl {
    text-align: right;
    white-space: nowrap;
    font-size: 11.5px;
  }
  /* Avg-buy-price label shows in the left column (room). The verbose right-
     column labels (Peso/Ganancia) stay hidden on mobile so value/P&L/weight
     read compact and never wrap-cut against the Gestionar pill. The 24h pill
     is redundant with P&L here, so it is hidden to keep the row clean. */
  .detail-asset-row .dar-right .dar-metric-label { display: none; }
  .dar-change { display: none; }
  /* Gestionar — compact right-aligned pill, comfortable tap target. The
     triple-class selector beats `.dar-actions button{width:28px}` + base. */
  .dar-actions { margin-top: 8px; }
  .detail-asset-row .dar-actions .dar-manage {
    width: auto;
    padding: 8px 16px;
    font-size: 13px;
    min-height: 36px;
    border-radius: 9px;
  }
  .detail-chart-wrap  { height: 80px; }
  .assets-section.is-detail .section-filter-name { font-size: 17px; }
  .btn-add-context    { font-size: 11px; padding: 5px 10px; }
}

@media (max-width: 375px) {
  .detail-asset-row   { padding: 11px var(--space-2); gap: 0 var(--space-1); }
  .dar-actions button { width: 26px; height: 26px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .detail-asset-row.dar-entering { animation: none; }
  .cat-card::before               { animation: none; }
}

/* Shake animation for validation errors (shared — used by ISIN validation) */
@keyframes aes-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-5px); }
  40%       { transform: translateX(5px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}
.aes-shake { animation: aes-shake 420ms var(--ease-premium) both; }

/* ── ISIN / Manual Mode ─────────────────────────────────── */

/* "— or —" divider between search and ISIN sections */
.form-or-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 10px;
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.form-or-divider::before,
.form-or-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Optional label suffix */
.label-optional {
  color: var(--text-muted);
  font-weight: 400;
  font-size: .85em;
}

/* ISIN input — monospace with letter-spacing for readability */
.form-group--isin input {
  font-family: 'SF Mono', 'Fira Code', 'Roboto Mono', ui-monospace, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 13.5px;
}

/* ISIN status indicator (below ISIN input) */
.isin-status {
  display: block;
  font-size: 11.5px;
  margin-top: 5px;
  transition: color var(--dur-fast) ease;
}
.isin-status:empty { margin-top: 0; }
.isin-status--hint  { color: var(--text-muted); }
.isin-status--ok    { color: var(--green); }
.isin-status--error { color: var(--red); }
.isin-status--warn  { color: var(--orange); }

/* Loading spinner for ISIN lookup */
.isin-status--loading {
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 7px;
}
.isin-status--loading::before {
  content: '';
  display: inline-block;
  width: 11px;
  height: 11px;
  border: 1.5px solid rgba(106,115,144,.4);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: isin-spin 0.65s linear infinite;
  flex-shrink: 0;
}
@keyframes isin-spin {
  to { transform: rotate(360deg); }
}

/* ══════════════════════════════════════════════════════════════
   PREMIUM REDESIGN — Remove glow, enforce clarity
   "Confidence through clarity, not decoration"
══════════════════════════════════════════════════════════════ */

/* ── Remove all button glows ──────────────────────────────── */
.btn-add:hover,
.btn-submit:hover,
.btn-submit--orange:hover,
.btn-submit--green:hover           { box-shadow: none; }
.range-btn.active                  { box-shadow: none; }
.type-btn.active                   { box-shadow: none; }
.liq-btn.active, .re-curr-btn.active { box-shadow: none; }

/* ── Remove glow from form input / search focus ──────────── */
.form-group input:focus,
.search-field-wrap input:focus     { box-shadow: none; }

/* ── Remove hover filter on hero / asset numbers ─────────── */
.summary-panel:hover .summary-total,
.hero-card:hover .summary-total    { filter: none; }
.asset-card:hover .asset-value-amount { filter: none; }

/* ── Remove text-shadow on rent banner ───────────────────── */
.rent-banner-value                 { text-shadow: none; }

/* ── Softer live dot — no glow ring ─────────────────────── */
@keyframes pulse-dot-glow {
  0%   { box-shadow: 0 0 0 0   rgba(63,191,127,.25); }
  65%  { box-shadow: 0 0 0 3px rgba(63,191,127,.0);  }
  100% { box-shadow: 0 0 0 0   rgba(63,191,127,.0);  }
}
/* Smaller update dot pulse — no scale jump */
@keyframes pulse-live {
  0%   { opacity: .5; }
  50%  { opacity: 1;  }
  100% { opacity: .5; }
}

/* ── Neutralize balance glow on portfolio number ─────────── */
@keyframes balance-glow {
  from { filter: none; }
  to   { filter: none; }
}
.balance-glow-pulse { animation: none !important; }

/* ── Cleaner chart tooltip ───────────────────────────────── */
.chart-tooltip {
  border-color: var(--color-border-default);
  box-shadow: 0 4px 16px rgba(0,0,0,.5), 0 0 12px rgba(255,255,255,0.04);
}

/* ── Category card: no sibling dim — too aggressive ─────── */
@media (hover: hover) {
  .categories-grid:has(.cat-card:hover) .cat-card:not(:hover) { opacity: 1; }
}

/* ── Asset badge: softer cash green ─────────────────────── */
.asset-badge.cash { background: rgba(63,191,127,.13); color: #3fbf7f; }

/* ── Hero left divider: slightly softer ─────────────────── */
.hero-left { border-right-color: rgba(255,255,255,.04); }

/* ── Increase card gap for breathing room ────────────────── */
.assets-list { gap: 10px; }

/* ── Smoother value flash (remove vertical jump) ────────── */
@keyframes flash-value-up {
  0%   { color: var(--green); }
  100% { color: inherit; }
}
@keyframes flash-value-down {
  0%   { color: var(--red); }
  100% { color: inherit; }
}

/* ── Remove hover lift from distribution + hero on touch ── */
@media (hover: none) {
  .hero-card:hover,
  .distribution-section:hover,
  .portfolio-combined-card:hover,
  .asset-card:hover,
  .cat-card:hover { transform: none; border-color: var(--border); }
}

/* ── Card highlight on add / edit ──────────────────────── */
@keyframes card-updated-flash {
  0%   { border-color: rgba(74, 130, 240,.50); background: rgba(74, 130, 240,.07); }
  55%  { border-color: rgba(74, 130, 240,.20); background: rgba(74, 130, 240,.03); }
  100% { border-color: var(--border);        background: var(--bg-card); }
}
.asset-card.card--just-updated,
.detail-asset-row.card--just-updated {
  animation: card-updated-flash 600ms var(--ease-out) forwards;
}
.cat-card.cat-card--just-updated {
  animation: card-updated-flash 600ms var(--ease-out) forwards;
}

/* ── Card exit animation on delete ─────────────────────── */
@keyframes card-exit {
  0%   { opacity: 1; transform: translateX(0) scale(1); }
  100% { opacity: 0; transform: translateX(24px) scale(0.97); }
}
.asset-card.card--exiting,
.detail-asset-row.card--exiting {
  animation: card-exit 200ms var(--ease-premium) forwards;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .card--just-updated { animation: none !important; }
  .card--exiting      { animation: none !important; opacity: 0; }
}

/* ── Cat-card drag & drop (floating) ───────────────────── */

/* Placeholder that holds space in the grid while card floats */
.cat-drag-ph {
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(74, 130, 240, 0.2);
  pointer-events: none;
  visibility: hidden;
}

/* (transitions already defined on .cat-card above) */

/* ── Asset-card Drag & Drop ─────────────────────────────── */
.asset-card.card--dragging {
  box-shadow: 0 14px 44px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.28);
  border-color: var(--border-hi);
  opacity: .96;
  will-change: top;
  /* Don't override the animation; just lift visually */
  transition: box-shadow 150ms var(--ease-out), border-color 150ms var(--ease-out) !important;
}
.card--drag-ph {
  border: 1px dashed rgba(74, 130, 240,.18);
  border-radius: var(--radius);
  pointer-events: none;
  flex-shrink: 0;
  transition: height 100ms var(--ease-out);
}

/* ── Per-asset P&L ──────────────────────────────────────── */
/* Row 3 of the asset-value grid (desktop); flex child on mobile */
.asset-pnl {
  grid-column: 2;
  grid-row: 3;
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: -.01em;
}
.asset-pnl.up   { color: var(--green); }
.asset-pnl.down { color: var(--red); }

/* Detail row P&L */
.dar-pnl {
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: -.01em;
}
.dar-pnl.up   { color: var(--green); }
.dar-pnl.down { color: var(--red); }

/* AURIX-MOBILE-CATEGORY-POLISH-1 (#7): metric labels. Hidden by default so the
   desktop right column stays compact (value/weight/P&L right-aligned), EXCEPT
   the avg-buy-price label which always shows (it lives in the roomy left
   column and replaces the cryptic "∅"). The weight / P&L labels are revealed
   on mobile, where the row stacks and every figure gets named. */
.dar-metric-label { display: none; font-weight: var(--font-weight-medium); color: var(--text-muted); }
.dar-tx-info .dar-metric-label { display: inline; }

/* ── Logo artifact safety override (highest specificity) ── */
.cat-card-visual img {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

/* ── Global image safety override — no background on any img ── */
img {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}



.dar-tx-info {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

/* ── Asset detail modal ────────────────────────────────────── */
.modal--detail { max-width: 420px; }

.ad-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-3);
}

.ad-hero {
  text-align: center;
  padding: var(--space-1) 0 4px;
}
.ad-hero-value {
  font-size: 30px;
  font-weight: 800;
  color: var(--text-bright);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: 5px;
}
.ad-hero-label {
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.ad-secondary {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ad-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-1);
}

.ad-label {
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.ad-value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.ad-value--pos { color: var(--green); }
.ad-value--neg { color: var(--red); }

/* MARKET-1B: market asset preview modal — premium glass panel that
   opens on row click. Inherits .modal-overlay / .modal chrome (radius,
   shadow, blur, safe-area). Self-contained sub-tree below. */
.modal--mkt-preview { max-width: 540px; }
/* MARKET-1C: bigger hit area on the modal close button. The legacy
   32×32 is fine on desktop but punishing on touch; 40×40 stays
   premium-compact while doubling the tap target. Scoped to this
   modal so no global change. */
.modal--mkt-preview .modal-close {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-size: 16px;
}
/* SPEC.47 institutional polish — reinforced header hierarchy + a hairline divider that separates the header
   from the body (logo → name → symbol · type read as one clean identity block). */
.modal--mkt-preview .modal-header {
  padding: 20px 22px 16px;
}
.modal--mkt-preview .modal-body {
  padding: 18px 22px 20px;
}
.mkt-prv-head {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  flex: 1;
}
.mkt-prv-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  color: rgba(225,233,255,0.94);
  background: rgba(74, 130, 240,0.13);
  border: 1px solid rgba(74, 130, 240,0.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  flex-shrink: 0;
  letter-spacing: 0;
}
.mkt-prv-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mkt-prv-name {
  font-size: 16.5px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.012em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}
.mkt-prv-sub {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: rgba(220,230,250,0.62);
  font-variant-numeric: tabular-nums;
}
.mkt-prv-symbol { font-weight: 600; letter-spacing: 0.02em; }
.mkt-prv-badge {
  display: inline-flex;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(220,230,250,0.65);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}
.mkt-prv-badge:empty { display: none; }
.mkt-prv-stats {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.mkt-prv-price {
  font-size: clamp(24px, 5vw, 30px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mkt-prv-change {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.mkt-prv-change.is-up   { color: #3FBF7F; }
.mkt-prv-change.is-down { color: #E05A5A; }
.mkt-prv-change.is-flat { color: rgba(220,230,250,0.55); }
.mkt-prv-ranges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.mkt-prv-meta {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(220,230,250,0.5);
  margin-bottom: 6px;
}
.mkt-prv-meta[hidden] { display: none; }
/* SPEC.47 — give the chart more presence (taller stage) + clear air before the actions zone. The renderer
   is untouched; only the mount container's height/spacing changes. */
.mkt-prv-mount {
  width: 100%;
  min-height: 260px;
  margin-bottom: 2px;
}
/* SPEC.47 — actions zone visually separated from the chart by a hairline; "Añadir a cartera" is the clear
   primary (fills the row), Favoritos is the compact secondary icon. */
.mkt-prv-cta {
  display: flex;
  gap: 10px;
  align-items: center;
  border-top: 1px solid rgba(120,160,255,0.09);
}
.modal--mkt-preview .mkt-prv-cta .btn-submit { font-weight: 800; letter-spacing: 0.005em; }
.mkt-prv-cta .btn-secondary {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  padding: 0;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(220,230,250,0.7);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.15s;
  font-family: inherit;
}
.mkt-prv-cta .btn-secondary:hover {
  color: rgba(244,196,90,0.92);
  background: rgba(244,196,90,0.06);
  border-color: rgba(244,196,90,0.32);
}
.mkt-prv-cta .btn-secondary.is-active {
  color: rgba(244,196,90,0.95);
  background: rgba(244,196,90,0.10);
  border-color: rgba(244,196,90,0.40);
}
.mkt-prv-cta .btn-submit { flex: 1; }
/* SPEC.47 INSTITUTIONAL ASSET-DETAIL POLISH — DESKTOP ONLY (>=561px). Mobile keeps its dedicated
   <=560px block unchanged (identical to v531). Adds: header→body hairline divider, one aligned segmented
   track for the temporal selectors (scoped; the shared chart-range control is untouched globally), and a
   clear actions-zone separation above the primary "Añadir a cartera". Purely visual; no markup/behaviour. */
@media (min-width: 561px) {
  .modal--mkt-preview .modal-header { border-bottom: 1px solid rgba(120,160,255,0.09); }
  .modal--mkt-preview .mkt-prv-ranges {
    gap: 4px; margin: 2px 0 16px; padding: 4px; width: max-content; max-width: 100%;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); border-radius: 12px;
  }
  .modal--mkt-preview .mkt-prv-ranges .aurix-chart-range {
    padding: 6px 12px; font-size: 12px; font-weight: 700; border-radius: 9px; letter-spacing: 0.01em;
  }
  .modal--mkt-preview .mkt-prv-cta { margin-top: 18px; padding-top: 16px; }
}
@media (max-width: 560px) {
  .mkt-prv-name { max-width: 60vw; }
  .mkt-prv-mount { min-height: 200px; }
}

/* CHART-6: asset detail chart slot. Hidden by default; revealed by
   _aurixAssetMount when the engine + adapter are ready and the asset
   has an addressable history source. */
.ad-chart-slot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.06);
}
.ad-chart-slot[hidden] { display: none; }
.ad-chart-ranges { display: flex; flex-wrap: wrap; gap: 6px; }
.ad-chart-mount  { width: 100%; min-height: 180px; }
/* CHART-6B: source / granularity line — subtle, eyebrow-cap, never
   competes with the chart for attention. */
.ad-chart-meta {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(220,230,250,0.50);
  margin: 2px 2px 0;
}
.ad-chart-meta[hidden] { display: none; }
/* CHART-6B: disabled range pill (e.g. 24H for daily-NAV funds). The
   pointer-events:none guarantees no fetch fires; the muted opacity +
   not-allowed cursor make the inactive state legible. */
.aurix-chart-range[aria-disabled="true"],
.aurix-chart-range.is-disabled {
  opacity: 0.32;
  cursor: not-allowed;
  pointer-events: none;
}

.ad-tx-section { display: flex; flex-direction: column; gap: var(--space-1); }

.ad-tx-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ad-tx-header span {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.btn-add-tx-detail {
  display: block;
  width: 100%;
  margin-top: 10px;
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  text-align: center;
  color: var(--accent);
  background: rgba(74, 130, 240,.10);
  border: 1px solid rgba(74, 130, 240,.25);
  border-radius: 8px;
  padding: 9px 0;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn-add-tx-detail:hover {
  background: rgba(74, 130, 240,.18);
  border-color: rgba(74, 130, 240,.40);
}

.ad-tx-list { display: flex; flex-direction: column; gap: 6px; }

.ad-tx-empty {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  padding: var(--space-2) 0;
}

.ad-tx-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  padding: var(--space-1) 10px;
  border-radius: 8px;
  background: var(--card-bg, rgba(255,255,255,.03));
}

.ad-tx-detail {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.ad-tx-sub {
  font-size: 11px;
  color: var(--text-muted);
}

.ad-tx-edit,
.ad-tx-delete {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.45;
  transition: opacity .15s, background .15s, color .15s;
}
.ad-tx-edit:hover {
  opacity: 1;
  background: rgba(74, 130, 240,.12);
  color: var(--accent);
}
.ad-tx-delete:hover {
  opacity: 1;
  background: rgba(224, 90, 90,.12);
  color: var(--red);
}

.ad-tx-badge {
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 6px;
  text-transform: uppercase;
  letter-spacing: .04em;
  flex-shrink: 0;
}
.tx-buy  { background: rgba(52,199,89,.15);  color: var(--green); }
.tx-sell { background: rgba(255,59,48,.15);  color: var(--red); }

.ad-tx-qty   { font-weight: var(--font-weight-semibold); flex-shrink: 0; }
.ad-tx-price { color: var(--text-muted); flex: 1; }
.ad-tx-date  { color: var(--text-muted); flex-shrink: 0; }

/* ── Bottom navigation ─────────────────────────────────── */
main { padding-bottom: 72px; }

@keyframes navBreath {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  /* BLOQUE-1.1 — extend the bar by the iOS home-indicator inset and pad the
     bottom by the same amount, so the icon row (centered in the top 60px under
     border-box) clears the home indicator instead of overlapping its gesture
     zone. Background still fills to bottom:0; env→0 on devices without an inset.
     Content reservation in .app (calc(60px + env(safe-area-inset-bottom))) stays
     consistent. */
  height: calc(60px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: rgba(5,7,13,0.6);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--color-border-subtle);
  z-index: 200;
}

.bottom-nav .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  padding: var(--space-1) 14px;
  opacity: 0.5;
  transition: opacity 0.25s ease, transform 0.2s ease;
}
.bottom-nav .item:active {
  transform: scale(0.92);
}
.bottom-nav .item svg {
  width: 22px;
  height: 22px;
  stroke: rgba(180,220,255,0.6);
  stroke-width: 1.7;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 2px rgba(120,180,255,0.15));
  transition: all 0.3s ease;
}
.bottom-nav .item:hover svg {
  transform: scale(1.08);
  stroke: rgba(180,255,220,0.9);
}
.bottom-nav .item.active {
  opacity: 1;
  transform: translateY(-1px);
}
.bottom-nav .item.active::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(107,255,184,0.15) 0%, rgba(107,255,184,0.05) 40%, transparent 70%);
  opacity: 0.6;
  pointer-events: none;
}
.bottom-nav .item.active svg {
  stroke: #6BFFB8;
  filter:
    drop-shadow(0 0 4px rgba(107,255,184,0.4))
    drop-shadow(0 0 10px rgba(107,255,184,0.2));
  transform: scale(1.05);
  animation: navBreath 2.8s ease-in-out infinite;
}
.bottom-nav .item.active::after {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  margin: 4px auto 0;
  border-radius: 50%;
  background: #6BFFB8;
  box-shadow: 0 0 6px rgba(107,255,184,0.6);
}
/* Search — premium central tab. Slightly more presence than peers
   (larger icon, stronger stroke, brighter rest opacity), but stays
   flat inside the bar — no FAB, no circular pill, no glow. */
.bottom-nav .item[data-tab="search"] {
  opacity: 0.72;
}
.bottom-nav .item[data-tab="search"]:hover {
  opacity: 0.92;
}
.bottom-nav .item[data-tab="search"] svg {
  width: 25px;
  height: 25px;
  stroke-width: 1.85;
  stroke: rgba(210,232,255,0.85);
}

.top-fade {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  pointer-events: none;
  z-index: 7;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.35) 0%,
    rgba(0,0,0,0.15) 40%,
    rgba(0,0,0,0.05) 70%,
    rgba(0,0,0,0)    100%
  );
}

#aurora-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
}

.tab-placeholder {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: stretch;
  justify-content: center;
  height: calc(100vh - 60px - 56px);
  height: calc(100dvh - 60px - 56px); /* BLOQUE-1.4 — dvh progressive enhancement; vh kept as fallback */
  background: transparent;
}
/* SPEC INTELLIGENCE-SCROLL-INTEGRITY — #tabPlaceholder is the shared host for
   Market/Insights/Intelligence and pins a fixed sub-viewport height
   (height: calc(100dvh - 116px)) with display:flex; align-items:stretch and NO
   overflow-y. Intelligence content (.aurix-intcc) flows taller than that box,
   so everything below the fold was clipped and unreachable — the host trapped
   scroll instead of letting the page scroll. Scope-relax to min-height ONLY
   when the Intelligence screen is mounted, so the window/body is the single
   canonical scroll owner (same model as Dashboard's <main>). Market/Insights
   keep the fixed host untouched. min-height preserves the empty-state centering
   (.aurix-intcc.is-empty). :has() is already the host pattern used below. */
.tab-placeholder:has(.aurix-intelligence-screen) {
  height: auto;
  min-height: calc(100vh - 60px - 56px);
  min-height: calc(100dvh - 60px - 56px);
}
.placeholder-label {
  color: #444;
  font-size: var(--font-size-sm);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ── Metrics premium placeholder ──────────────────────────
   Presentation-only "coming soon" surface. Mobile gets a stacked,
   scrollable view; desktop opens up to a 3-column feature grid
   and centres the hero in the available viewport. */
.metrics-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: var(--space-5) var(--space-4) 80px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.metrics-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-4) 0 var(--space-5);
  max-width: 640px;
}

.metrics-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(74, 130, 240, 0.08);
  border: 1px solid rgba(74, 130, 240, 0.24);
  color: rgba(196, 220, 255, 0.92);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  margin-bottom: var(--space-3);
}
.metrics-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--aurix-blue-light);
  box-shadow: 0 0 8px var(--aurix-blue-light);
  animation: metricsBadgePulse 2.4s ease-in-out infinite;
}
@keyframes metricsBadgePulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

.metrics-title {
  font-family: 'Inter', sans-serif;
  font-size: 28px;
  font-weight: 600;
  color: rgba(245, 250, 255, 1);
  letter-spacing: -0.012em;
  line-height: 1.1;
  margin: 0;
}
.metrics-subtitle {
  font-size: 14px;
  color: rgba(220, 230, 250, 0.62);
  margin-top: 10px;
  letter-spacing: 0.005em;
}
.metrics-microcopy {
  font-size: 13px;
  color: rgba(220, 230, 250, 0.42);
  line-height: 1.55;
  margin-top: 14px;
}

.metrics-feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  width: 100%;
  max-width: 1080px;
  margin-top: var(--space-3);
}
.metrics-feature-card {
  background: rgba(13, 18, 30, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.2s ease;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.metrics-feature-card:hover {
  border-color: rgba(74, 130, 240, 0.24);
  background: rgba(13, 18, 30, 0.62);
  transform: translateY(-1px);
}
.metrics-feature-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(74, 130, 240, 0.08);
  border: 1px solid rgba(74, 130, 240, 0.18);
  color: rgba(196, 220, 255, 0.92);
}
.metrics-feature-glyph svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.metrics-feature-title {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: rgba(235, 243, 255, 0.96);
  letter-spacing: 0.005em;
  margin: 0;
}
.metrics-feature-desc {
  font-size: 12.5px;
  color: rgba(220, 230, 250, 0.48);
  line-height: 1.5;
  margin: 0;
}

@media (min-width: 1024px) {
  .metrics-screen {
    padding: var(--space-6) 0 var(--space-6);
  }
  .metrics-hero {
    padding: var(--space-5) 0 var(--space-6);
    max-width: 720px;
  }
  .metrics-title {
    font-size: 40px;
  }
  .metrics-subtitle {
    font-size: 16px;
    margin-top: 12px;
  }
  .metrics-microcopy {
    font-size: 14px;
    margin-top: 16px;
  }
  .metrics-feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    margin-top: 0;
  }
  .metrics-feature-card {
    padding: 20px;
  }
}

/* ── Insights tab ──────────────────────────────────────── */
.insights-screen {
  width: 100%;
  max-width: none;
  background: transparent;
}

.insights-hero {
  width: 100%;
  min-height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(
    circle at center,
    rgba(0,255,180,0.12),
    transparent 70%
  );
}

.insights-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 140px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.9)  0%,
    rgba(0,0,0,0.7)  35%,
    rgba(0,0,0,0.4)  65%,
    rgba(0,0,0,0.1)  85%,
    transparent      100%
  );
}

.insights-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at center,
    transparent 40%,
    rgba(0,0,0,0.6) 100%
  );
  z-index: 1;
}
.monster-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
  width: 100%;
  max-width: none;
  z-index: 2;
}
.monster-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
}
.monster-wrap.chaos-drift {
  transform: translateX(3px);
  transition: transform 0.3s ease;
}
.monster-orb.chaos-flash { filter: brightness(1.2) blur(0.2px); }
.monster-core {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}
.monster-orb {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  filter: blur(0.2px);
  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 1s ease;
  background:
    radial-gradient(circle at 30% 30%, rgba(120,160,255,0.7), transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(0,255,180,0.2), transparent 55%),
    radial-gradient(circle at center, #05070f, #000);
  box-shadow:
    0 0 40px rgba(74, 130, 240,0.25),
    0 0 80px rgba(0,255,180,0.08),
    inset 0 0 30px rgba(255,255,255,0.04);
  animation: idleLuxury 10s ease-in-out infinite;
}
.monster-orb:hover {
  transform: scale(1.03);
  filter: brightness(1.05);
  transition: all 0.4s ease;
}
.monster-orb::before {
  content: "";
  position: absolute;
  inset: -15%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.05), transparent 65%);
  filter: blur(30px);
  opacity: 0.5;
  mix-blend-mode: overlay;
  pointer-events: none;
  animation: innerDrift 14s linear infinite;
}
.monster-orb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 25% 25%, rgba(255,255,255,0.12), transparent 45%);
  opacity: 0.6;
  pointer-events: none;
}
@keyframes innerDrift {
  0%   { transform: rotate(0deg)   scale(1);    }
  50%  { transform: rotate(180deg) scale(1.03); }
  100% { transform: rotate(360deg) scale(1);    }
}
.monster-orb.bad {
  background:
    radial-gradient(circle at 30% 30%, rgba(255,100,80,0.9), transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(255,0,60,0.4), transparent 50%),
    radial-gradient(circle, #1a0000, #000);
  box-shadow:
    0 0 40px rgba(255,60,60,0.6),
    inset 0 0 30px rgba(255,255,255,0.05),
    inset 0 0 60px rgba(255,0,80,0.08);
}
.monster-orb.soft-caution {
  filter: brightness(0.95);
  box-shadow: 0 0 35px rgba(255,160,120,0.25);
}
.monster-orb.soft-positive {
  filter: brightness(1.1);
  box-shadow: 0 0 40px rgba(120,255,200,0.3);
}
.monster-orb.active {
  transform: scale(1.08);
  filter: brightness(1.2);
  animation-play-state: paused;
}
.monster-orb.ctx-home     { opacity: 0.9; }
.monster-orb.ctx-insights { opacity: 1; }
.monster-orb.ctx-asset    { filter: brightness(1.05); }
.monster-orb.ctx-market   { opacity: 0.85; }
.monster-orb.evo-1 {
  background:
    radial-gradient(circle at 30% 30%, rgba(120,160,255,0.6), transparent 40%),
    radial-gradient(circle at center, #05070f, #000);
  box-shadow:
    0 0 30px rgba(74, 130, 240,0.2);
}
.monster-orb.evo-2 {
  background:
    radial-gradient(circle at 30% 30%, rgba(120,160,255,0.7), transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(0,255,180,0.15), transparent 60%),
    radial-gradient(circle at center, #05070f, #000);
  box-shadow:
    0 0 50px rgba(74, 130, 240,0.25),
    0 0 80px rgba(0,255,180,0.1);
}
.monster-orb.evo-3 {
  background:
    radial-gradient(circle at 30% 30%, rgba(120,160,255,0.5), transparent 45%),
    radial-gradient(circle at 70% 70%, rgba(0,255,180,0.1), transparent 65%),
    radial-gradient(circle at center, #02030a, #000);
  box-shadow:
    0 0 40px rgba(74, 130, 240,0.18),
    0 0 100px rgba(0,255,180,0.06),
    inset 0 0 30px rgba(255,255,255,0.03);
}
@keyframes idleLuxury {
  0%   { transform: scale(1);     }
  50%  { transform: scale(1.015); }
  100% { transform: scale(1);     }
}
.monster-message {
  position: absolute;
  top: calc(50% + 120px);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 300px;
  padding: 0 var(--space-4);
  box-sizing: border-box;
  text-align: center;
  min-height: 60px;
}
.monster-line {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.82);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.01em;
  margin: 10px 0 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  opacity: 0;
  transform: translateY(10px);
  filter: blur(4px);
  transition: opacity 0.4s ease, transform 0.4s ease, filter 0.4s ease;
}
.monster-line.visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.monster-action {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.38);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 10px;
  opacity: 0;
  transition: opacity 0.4s ease, color 0.2s ease;
  text-align: center;
  user-select: none;
}
.monster-action.visible {
  opacity: 1;
}
.monster-action:hover {
  color: rgba(255, 255, 255, 0.72);
}

.insights-history { padding: 0 var(--space-3) 80px; opacity: .75; }
.insights-history-header {
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #555;
  margin-bottom: 4px;
}
.insights-history-empty {
  padding: var(--space-5) var(--space-3);
  font-size: 13px;
  color: #555;
}

.ins-tx-list { display: flex; flex-direction: column; }

.tx-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.tx-left  { display: flex; flex-direction: column; gap: 3px; }
.tx-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }

.tx-type       { font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.tx-type.buy   { color: var(--aurix-success); }
.tx-type.sell  { color: var(--aurix-danger); }
.tx-asset      { font-size: 13px; color: #ddd; }
.tx-date       { font-size: 11px; color: #555; }
.tx-main       { font-size: 13px; font-weight: var(--font-weight-semibold); color: #fff; }
.tx-sub        { font-size: 11px; color: #555; }
.tx-total      { font-size: 13px; color: #aaa; }

.tx-view-all {
  margin-top: var(--space-2);
  padding: var(--space-1) 0;
  font-size: 13px;
  color: #5b8cff;
  cursor: pointer;
  text-align: center;
}

/* ── Tracking block (desktop only) ── */
.tracking-block {
  display: none;
}

.tracking-header {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.tracking-title {
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.tracking-content {
  flex: 1;
  overflow: hidden;
  min-height: 0;
}


/* Ticker */
.tracking-ticker-wrap {
  overflow: hidden;
  height: 100%;
}

.tracking-ticker {
  display: flex;
  flex-direction: column;
  animation: ticker-scroll 20s linear infinite;
}

@keyframes ticker-scroll {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

.ticker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: 13px;
  flex-shrink: 0;
}

.ticker-sym {
  font-weight: var(--font-weight-semibold);
  color: var(--text-bright);
  min-width: 44px;
}

.ticker-price {
  color: var(--text-muted);
  font-size: 12px;
}

.ticker-change {
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  min-width: 48px;
  text-align: right;
}

.ticker-change.positive { color: #27c768; }
.ticker-change.negative { color: var(--aurix-danger); }

/* Watchlist preview */
.watchlist-preview {
  display: flex;
  flex-direction: column;
}

.watchlist-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: var(--space-1) 6px;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: 12px;
  position: relative;
  transition: background 0.12s ease, transform 0.12s ease;
}

.watchlist-spark {
  width: 70px;
  height: 22px;
  display: block;
  justify-self: center;
  filter: blur(0.2px);
  transition: opacity 0.25s ease;
  opacity: 0.25;
}

.watchlist-spark.placeholder { opacity: 0.55; }

.watchlist-spark.ready {
  opacity: 1;
}

.watchlist-row:hover .watchlist-spark {
  opacity: 1;
}

@keyframes sparkBreath {
  0%,100% { opacity: 0.72; }
  50%     { opacity: 1; }
}

.watchlist-row:last-child { border-bottom: none; }

.watchlist-empty {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 10px 4px;
  font-size: 12px;
  line-height: 1.4;
}

.watchlist-empty span {
  opacity: 0.45;
}

.watchlist-empty-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  flex-shrink: 0;
  opacity: 0.6;
  animation: pulseLive 2s ease-in-out infinite;
}

.watchlist-sym {
  font-weight: var(--font-weight-medium);
  color: var(--text-bright);
  letter-spacing: 0.2px;
  opacity: 0.85;
  transition: opacity 0.2s ease;
  margin-left: 10px;
}

.watchlist-row:hover .watchlist-sym {
  opacity: 1;
}

/* LR.3 (H): quiet "Sugerencia" tag on seeded watchlist rows so curated
   markets never read as the user's own positions. */
.watchlist-seed-tag {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--color-border-subtle);
  font-size: 9px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  vertical-align: middle;
  opacity: 0.7;
}

.watchlist-price {
  color: var(--text-bright);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  text-align: right;
  min-width: 100px;
  margin-right: 10px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  animation: subtleDrift 4s ease-in-out infinite;
}

/* ── Desktop layout enhancements ── */
@media (min-width: 1024px) {
  .container {
    max-width: 1600px;
    padding: 0 var(--space-6);
  }

  .top-grid {
    display: grid;
    grid-template-columns: 1.2fr 2fr;
    gap: var(--space-5);
    align-items: stretch;
  }

  .portfolio-value {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-5);
  }

  .portfolio-value h1 {
    font-size: 42px;
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
  }

  .portfolio-meta {
    margin-top: var(--space-1);
    opacity: 0.7;
    font-size: var(--font-size-sm);
  }

  .chart-container {
    height: 320px;
    padding: var(--space-3);
  }

  /* Distribution: single unified horizontal card */
  .portfolio-combined-card {
    flex-direction: row;
    gap: var(--space-6);
    padding: var(--space-5) 28px;
    border-radius: 20px;
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    transition: border-color 0.25s, transform 0.25s;
    align-items: stretch;
  }

  .portfolio-combined-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
  }

  .distribution-panel {
    flex: 1.1;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .watchlist-section {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    border-left: 1px solid var(--color-border-subtle);
    padding-left: 28px;
  }

  .section-title {
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    opacity: 0.8;
    letter-spacing: 0.08em;
    margin: 0 0 var(--space-3);
  }

  .distribution-inner {
    display: flex !important;
    align-items: center;
    gap: var(--space-4);
    background: transparent;
    flex: 1;
  }

  .donut-wrap {
    flex: 0 0 160px;
    width: 160px;
    height: 160px;
  }

  #donutChart {
    width: 100% !important;
    height: 100% !important;
    margin-top: 0 !important;
  }

  .distribution-legend {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    margin-top: 0;
    overflow: visible;
  }

  .watchlist-inner-card {
    flex: 1;
    padding: 22px var(--space-4);
    border-radius: 14px;
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
    display: flex;
    flex-direction: column;
  }

  .watchlist-inner-card:hover {
    background: var(--surface-3);
    border-color: var(--border-strong);
    transform: translateY(-1px);
  }

  .tracking-content {
    display: flex;
    flex-direction: column;
  }

  .watchlist-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px var(--space-1);
    font-size: 13px;
    line-height: 1.3;
    border-radius: 6px;
  }

  .watchlist-row:not(:last-child) {
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .watchlist-row:hover {
    background: rgba(255,255,255,0.05);
    transform: translateX(3px);
  }

  .watchlist-row:active {
    transform: translateX(1px) scale(0.995);
    transition-duration: 60ms;
  }

  .watchlist-price {
    font-size: 13px;
    min-width: 100px;
  }

  .ticker-item {
    font-size: 12px;
  }

  .assets-grid {
    margin-top: var(--space-5);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }

  .asset-card {
    padding: var(--space-3);
    border-radius: 12px;
  }
}

@media (max-width: 768px) {
  .insights-hero::before {
    height: 180px;
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.95) 0%,
      rgba(0,0,0,0.8)  40%,
      rgba(0,0,0,0.5)  70%,
      transparent      100%
    );
  }
}

/* ── Watchlist Modal ──────────────────────────────────────── */
.watchlist-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.watchlist-modal.hidden {
  display: none;
}

.watchlist-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.watchlist-modal-content {
  width: 420px;
  max-width: 90vw;
  max-height: 80vh;
  border-radius: 20px;
  padding: var(--space-5);
  background: rgba(20,20,25,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transform: scale(0.95) translateY(6px);
  opacity: 0;
  transition: transform 200ms cubic-bezier(0.4,0,0.2,1), opacity 200ms ease;
}

.watchlist-modal.open .watchlist-modal-content {
  transform: scale(1) translateY(0);
  opacity: 1;
}

@keyframes wl-fade-in-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.watchlist-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.watchlist-modal-header h2 {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-bright);
  margin: 0;
}

.watchlist-modal-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: none;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, transform 120ms ease;
}

.watchlist-modal-close:hover  { background: rgba(255,255,255,0.12); }
.watchlist-modal-close:active { transform: scale(0.88); }

.watchlist-modal-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* LR.3 (H): divider that labels the seeded/curated markets below the user's
   own tracked positions in the watchlist editor. */
.watchlist-modal-section {
  padding: 14px var(--space-1) 6px;
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.7;
}

.watchlist-modal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px var(--space-1);
  border-radius: 8px;
  transition: background .15s ease, opacity 180ms ease, transform 180ms ease;
}

.watchlist-modal-row:hover { background: rgba(255,255,255,0.04); }

.watchlist-modal-row.new {
  animation: wl-fade-in-up 220ms cubic-bezier(0.4,0,0.2,1);
}

.watchlist-modal-row.highlight {
  background: rgba(0,255,150,0.08) !important;
}

.watchlist-modal-row.removing {
  opacity: 0;
  transform: translateX(10px);
  pointer-events: none;
}

.watchlist-modal-sym {
  font-weight: var(--font-weight-semibold);
  font-size: 13px;
  color: var(--text-bright);
  min-width: 52px;
}

.watchlist-modal-name {
  font-size: 12px;
  color: var(--text-muted);
  flex: 1;
  padding: 0 var(--space-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watchlist-modal-price {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.watchlist-modal-empty {
  text-align: center;
  padding: var(--space-5) 0;
  font-size: 13px;
  color: var(--text-dim);
}

/* Header actions */
.modal-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.add-button {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: none;
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform 120ms ease;
  backdrop-filter: blur(6px);
}

.add-button:hover  { background: rgba(255,255,255,0.12); }
.add-button:active { transform: scale(0.88); }

.add-button--active {
  background: rgba(100,220,160,0.12);
  color: rgba(100,220,160,1);
}

/* Edit mode row */
.watchlist-modal-row.editing {
  position: relative;
  padding-right: 28px;
}

/* Remove button */
.remove-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,80,80,0.9);
  color: white;
  font-size: 10px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}

.remove-btn:hover {
  transform: translateY(-50%) scale(1.15);
  background: rgba(255,50,50,1);
}

/* Add asset panel */
.add-asset-panel {
  border-top: 1px solid var(--color-border-subtle);
  padding-top: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.add-asset-panel.hidden {
  display: none;
}

.add-asset-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text);
  font-size: 13px;
  outline: none;
  font-family: inherit;
  transition: border-color .2s ease;
}

.add-asset-input:focus {
  border-color: rgba(255,255,255,0.18);
}

.add-asset-input::placeholder {
  color: var(--text-dim);
}

.add-asset-results {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.add-asset-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--space-1) 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s ease;
}

.add-asset-result:hover {
  background: rgba(255,255,255,0.06);
}

/* ── Watchlist live feel ── */
@keyframes subtleDrift {
  0%,100% { opacity: 0.82; }
  50%     { opacity: 1; }
}

@keyframes pulseLive {
  0%,100% { opacity: 0.25; transform: translateY(-50%) scale(0.9); }
  50%     { opacity: 0.7;  transform: translateY(-50%) scale(1.15); }
}


/* ── Price-change flash (glow + movement) ── */
@keyframes wl-price-up {
  0%   { color: #00ff9c; text-shadow: 0 0 6px rgba(0,255,156,0.4); transform: translateY(-2px); }
  100% { color: inherit; text-shadow: none; transform: translateY(0); }
}

@keyframes wl-price-down {
  0%   { color: var(--aurix-danger); text-shadow: 0 0 6px rgba(224, 90, 90,0.35); transform: translateY(2px); }
  100% { color: inherit; text-shadow: none; transform: translateY(0); }
}

.price-up   { animation: wl-price-up   600ms ease-out; }
.price-down { animation: wl-price-down 600ms ease-out; }

/* ── Market tab ──────────────────────────────────────────── */
.market-screen {
  padding: var(--space-3) 12px 80px;
  width: 100%;
}

.market-header {
  padding: 16px 20px 8px;
}

.market-title {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
}

.market-subtitle {
  font-size: 12px;
  opacity: 0.6;
  margin-top: 2px;
}

.market-search-wrap {
  display: flex;
  justify-content: center;
  padding: 0 var(--space-4);
  margin: 12px 0;
}

.market-search-wrap input {
  width: 100%;
  max-width: 360px;
  height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.06);
  color: #fff;
  outline: none;
  font-size: 13px;
  opacity: 0.9;
}

/* Lupa icon is a desktop-only decoration — hidden on mobile so the
   centred input renders identically to before. */
.market-search-icon { display: none; }

.market-tabs {
  display: flex;
  gap: 8px;
  padding: 10px var(--space-4) 6px;
  margin: 8px 0 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.market-tabs::-webkit-scrollbar { display: none; }

.market-tab {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
  transition: background 0.16s ease, color 0.16s ease;
}

.market-tab.active {
  /* AURIX-DESIGN-SYSTEM-1: active tab is the canonical blue everywhere (was a
     green fill on mobile while desktop was blue — single identity now). */
  background: var(--aurix-blue-soft);
  color: var(--aurix-blue-light);
  font-weight: 600;
}

.market-featured {
  display: flex;
  gap: var(--space-2);
  padding: 10px var(--space-4);
  overflow-x: auto;
  scrollbar-width: none;
}

.market-featured::-webkit-scrollbar { display: none; }

.featured-card {
  min-width: 120px;
  padding: var(--space-2);
  border-radius: 14px;
  /* AURIX-DASH-V3: Market featured cards join the blue-glass system. */
  background:
    radial-gradient(130% 130% at 10% 0%, rgba(74,130,240,0.08), transparent 58%),
    linear-gradient(165deg, rgba(28,40,68,0.40), rgba(15,21,37,0.48));
  border: 1px solid rgba(74,130,240,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 20px -12px rgba(74,130,240,0.14);
  flex-shrink: 0;
}

.market-chg.up {
  background: rgba(63, 191, 127,0.10);
  color: var(--aurix-success);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 12px;
}

.market-chg.down {
  background: rgba(224, 90, 90,0.10);
  color: var(--aurix-danger);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 12px;
}

.market-row-rank {
  font-size: 12px;
  color: rgba(255,255,255,0.25);
  text-align: center;
}

.market-row-name {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.market-name-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.market-row-price {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: #fff;
}

.market-row-change {
  display: flex;
  align-items: center;
}

.market-row-spark {
  line-height: 0;
  opacity: 0.9;
}

.market-row-action {
  display: flex;
  justify-content: flex-end;
}

.featured-card > div:first-child {
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: var(--text-muted);
  margin-bottom: 4px;
}

.featured-card > div:nth-child(2) {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: #fff;
  margin-bottom: 4px;
}

.market-section {
  padding: 0;
  margin-top: 24px;
  margin-bottom: var(--space-5);
  max-height: 70vh;
  overflow-y: auto;
}

/* ── MC-9A: Funds / ETFs discovery view ─────────────────────────────────
   Horizontal category chips + responsive card grid. Lives inside
   #marketList alongside the existing market list rendering. Dark-theme
   native; no images, no asset icons, no external dependencies. */
.funds-discover {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 0 24px;
}
.funds-cats {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px 2px 6px;
  margin: -2px;
}
.funds-cats::-webkit-scrollbar { display: none; }
.funds-cat {
  flex: 0 0 auto;
  padding: 8px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  color: rgba(255,255,255,0.78);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}
.funds-cat:hover  { background: rgba(255,255,255,0.07); color: #fff; }
.funds-cat:active { transform: scale(0.97); }
.funds-cat.active {
  background: rgba(74, 130, 240,0.18);
  border-color: rgba(74, 130, 240,0.45);
  color: #fff;
}
.funds-grid {
  display: grid;
  /* MP.1: balanced FIXED columns per breakpoint. auto-fit's 1fr tracks
     stretched a partial last row to a DIFFERENT width than the rows above
     (the "5+2 huecos / tarjetas de anchuras distintas" problem). Fixed
     counts keep every card the same width at every width; a partial last
     row simply leaves trailing empty tracks (left-aligned, equal width).
     Mobile-first 2 cols → tablet 3 → desktop 4. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 600px) {
  .funds-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .funds-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}
.funds-card { min-width: 0; }   /* MP.1: prevent 2-col mobile content blowout */
.funds-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  /* MARKET-1A: ~12% tighter — premium-compact, not cramped. */
  padding: 12px 14px;
  /* AURIX-DASH-V1: Market cards share the Intelligence blue-glass material. */
  background:
    radial-gradient(130% 130% at 10% 0%, rgba(74,130,240,0.08), transparent 58%),
    linear-gradient(165deg, rgba(28,40,68,0.40), rgba(15,21,37,0.48));
  border: 1px solid rgba(74,130,240,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 20px -12px rgba(74,130,240,0.14);   /* AURIX-DASH-V2: unified resting blue glow */
  border-radius: 14px;   /* AURIX-DASH-V2: card-family radius */
  color: #e8e8ea;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease, box-shadow 160ms ease;
  min-height: 84px;
}
.funds-card:hover {
  background:
    radial-gradient(130% 130% at 10% 0%, rgba(74,130,240,0.13), transparent 58%),
    linear-gradient(165deg, rgba(34,48,80,0.52), rgba(16,23,40,0.55));
  border-color: rgba(74,130,240,0.40);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.28), 0 0 0 1px rgba(74,130,240,0.10), 0 0 24px rgba(74,130,240,0.10);
}
.funds-card:active { transform: scale(0.985); }
.funds-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.funds-card-ticker {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
}
.funds-card-mgr {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.funds-card-name {
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(255,255,255,0.78);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.funds-card-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;   /* MC-10: badges row moved out of foot */
  margin-top: 2px;
}
/* MC-10: metadata badges. Pills sit on a dedicated row between the
   product name and the Add CTA so they don't fight for space with the
   ticker / manager line. Hidden cleanly when no badges apply (the
   builder returns an empty string). */
.funds-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
  min-height: 0;
}
.funds-card-badges:empty { display: none; }
.funds-card-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.78);
}
.funds-card-pill.is-kind  { color: rgba(74, 130, 240,0.95); border-color: rgba(74, 130, 240,0.30); }
.funds-card-pill.is-ucits { color: rgba(160,220,170,0.95); border-color: rgba(160,220,170,0.30); }
.funds-card-pill.is-share { color: rgba(255,205,150,0.95); border-color: rgba(255,205,150,0.30); }
.funds-card-pill.is-curr  { color: rgba(255,255,255,0.92); border-color: rgba(255,255,255,0.18); }
/* MC-10: deprecated single .funds-card-type kept as a no-op fallback in
   case any external CSS still targets it; new render path doesn't emit
   the class at all. */
.funds-card-type {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.40);
}
.funds-card-cta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(74, 130, 240,0.95);
}
@media (max-width: 480px) {
  /* MP.1: small iPhones keep 2 clean columns (was 1) — tighter gap so the
     pair never overflows a 360px viewport. */
  .funds-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

.market-section-title {
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--space-1);
}

.market-my-assets {
  margin-bottom: 12px;
}

.market-my-assets .market-row {
  background: rgba(63, 191, 127,0.04);
}

.green { color: #00ff88; }
.red   { color: var(--aurix-danger); }

.market-empty {
  padding: 40px;
  text-align: center;
  color: rgba(255,255,255,0.5);
  font-size: var(--font-size-sm);
}

.market-row.skeleton {
  pointer-events: none;
  animation: skeletonPulse 1.5s ease-in-out infinite;
}

.skeleton-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #2a2f3a;
  flex-shrink: 0;
}

.skeleton-text,
.skeleton-price,
.skeleton-change {
  height: 12px;
  background: #2a2f3a;
  border-radius: 4px;
}

.skeleton-text  { width: 100px; }
.skeleton-price { width: 64px;  }
.skeleton-change { width: 48px; }

@keyframes skeletonPulse {
  0%,100% { opacity: 0.4; }
  50%      { opacity: 0.7; }
}

.market-loading {
  padding: 30px;
  text-align: center;
  color: rgba(255,255,255,0.5);
  font-size: var(--font-size-sm);
}

.market-section-header {
  padding: 10px 0 var(--space-1);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.4);
}

.market-badge {
  margin-left: var(--space-1);
  font-size: 11px;
  font-weight: 400;
  color: var(--orange);
  letter-spacing: 0;
}

.market-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.market-chart {
  width: 80px;
  margin: 0 10px;
  opacity: 0.8;
  flex-shrink: 0;
  line-height: 0;
}

.market-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.market-symbol {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text);
}

.market-type {
  font-size: 11px;
  color: rgba(255,255,255,0.55);   /* AURIX-DASH-V2: lift market-state legibility at low brightness */
  margin-top: 2px;
}

.market-row {
  display: grid;
  grid-template-columns: 2.8fr 1fr 1fr 1.4fr 40px;
  align-items: center;
  /* MC-11A: premium row geometry. Taller rows + softer divider + inset
     hover glow + smooth transition. Keep grid template untouched so
     existing alignment + columns are stable. */
  padding: 16px 10px;
  margin: 0 -10px;
  border-bottom: 1px solid rgba(255,255,255,0.035);
  border-radius: 10px;
  transition: background 140ms ease, box-shadow 220ms ease, transform 160ms ease;
}
.market-row:hover {
  /* AURIX-DASH-V1: blue-tinted hover to match the unified design system. */
  background: rgba(74,130,240,0.06);
  box-shadow: inset 0 0 0 1px rgba(74,130,240,0.14),
              0 6px 20px rgba(0,0,0,0.20);
  /* MARKET-1B: rows are now clickable (open preview). The pointer
     cursor reinforces the affordance — falls back to default if the
     flag ever disables the click handler in a future build. */
  cursor: pointer;
}
.market-row:last-child { border-bottom: 0; }

.market-row-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.market-row-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.market-coin-img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.market-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(74, 130, 240,0.15);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.market-sym {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text);
}

.market-name {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}

.market-price {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text);
}

.market-chg {
  font-size: 12px;
  font-weight: var(--font-weight-medium);
}

.market-err {
  font-size: 13px;
  color: var(--text-dim);
  padding: var(--space-1) 0;
}

.market-stale {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--orange);
  margin-left: 6px;
}

.watchlist-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.3);
  font-size: var(--font-size-md);
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.15s;
  line-height: 1;
}
.watchlist-btn.active { color: #FFD700; }

.empty-watchlist {
  margin: 18px var(--space-4);
  padding: 32px 22px;
  text-align: center;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.empty-watchlist-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #FFD700;
  background: rgba(255, 215, 0, 0.10);
  border: 1px solid rgba(255, 215, 0, 0.25);
  margin-bottom: 4px;
}
.empty-watchlist-title {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.01em;
}
.empty-watchlist-helper {
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255,255,255,0.55);
  max-width: 280px;
}
/* AURIX-MARKET-LAUNCH-1 P4 — premium CTA on the empty watchlist. */
.empty-watchlist-cta {
  margin-top: 10px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(74,130,240,0.40);
  background: var(--aurix-blue-fill, rgba(74,130,240,0.16));
  color: rgba(232,240,255,0.96);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.12s ease;
}
.empty-watchlist-cta:hover  { background: rgba(74,130,240,0.26); border-color: rgba(74,130,240,0.55); }
.empty-watchlist-cta:active { transform: scale(0.97); }

/* Market metrics header */
.market-metrics-scroll {
  display: flex;
  overflow-x: auto;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  scrollbar-width: none;
}

.market-metrics-scroll::-webkit-scrollbar {
  display: none;
}

.market-metric-card {
  min-width: 140px;
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: var(--space-2);
}

.market-metric-card .label {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}

.market-metric-card .value {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: #fff;
}

/* ── Market desktop layout ── */
.market-body {
  display: block;
  margin-top: 12px;
}

.col {
  display: flex;
  align-items: center;
}

.col-asset { justify-content: flex-start; }
.col-price { justify-content: flex-end; font-weight: 500; font-variant-numeric: tabular-nums; }
.col-change { justify-content: flex-end; font-weight: 500; font-size: 13px; font-variant-numeric: tabular-nums; }
.col-chart  { justify-content: flex-end; line-height: 0; opacity: 0.9; }
.col-action { justify-content: flex-end; }

.col-change.is-up   { color: var(--aurix-success); }
.col-change.is-down { color: var(--aurix-danger); }

.asset-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.asset-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #1f2633;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

/* AURIX-MARKET-ICONS-1 — single conditional asset-icon renderer (logo XOR premium
   fallback, NEVER both). Replaces the old overlay that left the placeholder
   visible behind the logo (double render). The initial fallback is in the DOM but
   hidden whenever a logo is present; the real logo fills the box and the badge's
   own bg is removed so no legacy circle/square shows behind it. */
.asset-icon,
.sugg-badge,
.add-v2-asset-icon { position: relative; overflow: hidden; }
.aurix-aicon-init {
  position: relative;
  z-index: 1;
  line-height: 1;
}
.aurix-aicon-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* fill the box; circular containers clip to a clean circle */
  border-radius: inherit;
  display: block;
  z-index: 2;                 /* above the (hidden) initial */
}
/* When a real logo is shown: hide the initial AND strip the legacy badge bg/border
   so ONLY the logo is visible — no placeholder, circle or square behind it. */
.asset-icon.has-logo .aurix-aicon-init,
.sugg-badge.has-logo .aurix-aicon-init,
.add-v2-asset-icon.has-logo .aurix-aicon-init { display: none; }
.asset-icon.has-logo,
.sugg-badge.has-logo,
.add-v2-asset-icon.has-logo {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
/* Premium fallback (no logo): one unified Aurix circle — dark gradient + clean
   centered initial — same box/size as a real logo, so the user can't tell which
   is which. Replaces the old flat/tinted placeholders. */
.asset-icon:not(.has-logo),
.sugg-badge:not(.has-logo),
.add-v2-asset-icon:not(.has-logo) {
  background: radial-gradient(circle at 32% 26%, rgba(58,74,116,0.85) 0%, rgba(17,23,40,0.96) 100%) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  color: rgba(228,235,255,0.92) !important;
}
.aurix-aicon-init {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: rgba(228,235,255,0.92);
}
/* AURIX-MARKET-ICONS-1 — when buildBadgeHtml surfaces (Dashboard holdings /
   category cards / asset+portfolio detail) show a real logo, strip the tinted
   badge square so only the logo shows, consistent with the rule above. The
   no-logo state keeps its premium tinted badge + text via .asset-badge. */
.badge--has-logo {
  background: transparent !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   AURIX-MARKET-ICONS-PREMIUM-1 — premium Market-family asset icons.
   Scope: .asset-icon / .sugg-badge / .add-v2-asset-icon (Market row,
   Seguimiento, Search, quick-picks). The Dashboard / category badge
   family (.asset-badge / .cat-card-visual / .logo-fallback) is NOT
   touched. Goals: zero flicker (stable box + opacity fade-in, the
   designed fallback never flashes as an empty box or a bare letter),
   strong contrast on the dark Aurix bg, a designed fallback per type.
   ══════════════════════════════════════════════════════════════════ */

/* Fallback layer — fills the box, centered, sits behind the logo. */
.aurix-aicon-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  overflow: hidden;
  z-index: 1;
  line-height: 1;
}
/* AURIX-MARKET-ICON-FLICKER-FIX — paint the logo immediately (like the Dashboard
   badge), not via an opacity-0 → 1 fade. The fade replayed on every refresh (even
   for cached logos) and read as a flicker; the designed fallback is hidden when a
   logo exists and the dark plate covers the brief decode gap, so no letter flash. */
.aurix-aicon-img {
  opacity: 1;
}
.aurix-aicon-img.is-loaded { opacity: 1; }
/* While a logo is present, hide the designed fallback — the user sees a
   neutral premium plate (the container bg) until the logo fades in. */
.asset-icon.has-logo .aurix-aicon-fallback,
.sugg-badge.has-logo .aurix-aicon-fallback,
.add-v2-asset-icon.has-logo .aurix-aicon-fallback { visibility: hidden; }

/* Per-type plates so the logo always sits on the right backdrop. */
.aicon--crypto.has-logo {
  background: radial-gradient(circle at 50% 38%, #1b2438 0%, #0d1322 100%) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
}
.aicon--crypto .aurix-aicon-img { object-fit: cover; }
/* AURIX-ASSET-ICON-UNIFICATION — stocks / ETFs / funds now sit on the SAME
   premium dark Aurix plate as crypto (no more stark white "sticker" chip), so a
   stock in Market looks identical to the same stock on the Dashboard. The old
   #f3f6fc chip also broke light-text logos (e.g. Invesco/QQQ = white text → white
   on white). Logos render transparent on the integrated dark plate. */
.aicon--stock.has-logo,
.aicon--etf.has-logo,
.aicon--fund.has-logo {
  background: radial-gradient(circle at 50% 38%, #1b2438 0%, #0d1322 100%) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  box-shadow: none !important;
}
/* SPEC 3.3 — stock/ETF/fund logos (FMP, often with internal whitespace, not
   always square) keep object-fit:contain so they are never cropped, but the
   surrounding padding drops 15% → 9% so they fill the circle like crypto and
   stop reading as small stickers. Crypto stays object-fit:cover (fills). */
.aicon--stock .aurix-aicon-img,
.aicon--etf   .aurix-aicon-img,
.aicon--fund  .aurix-aicon-img { object-fit: contain; padding: 9%; }

/* ── Premium fallbacks (no logo) ───────────────────────────────────── */
/* Crypto / stock / generic — clean initial on the existing Aurix dark
   circle (inherits the :not(.has-logo) gradient defined above). */
.aicon-fb-init .aurix-aicon-init {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: rgba(228,235,255,0.94);
}
/* For index / ETF / fund / commodity the inner badge paints the full box,
   so neutralise the generic gradient + border on the container. */
.asset-icon.aicon--index:not(.has-logo),
.asset-icon.aicon--etf:not(.has-logo),
.asset-icon.aicon--fund:not(.has-logo),
.asset-icon.aicon--commodity:not(.has-logo),
.asset-icon.aicon--metal:not(.has-logo),
.sugg-badge.aicon--index:not(.has-logo),
.sugg-badge.aicon--etf:not(.has-logo),
.sugg-badge.aicon--fund:not(.has-logo),
.sugg-badge.aicon--commodity:not(.has-logo),
.sugg-badge.aicon--metal:not(.has-logo),
.add-v2-asset-icon.aicon--index:not(.has-logo),
.add-v2-asset-icon.aicon--etf:not(.has-logo),
.add-v2-asset-icon.aicon--fund:not(.has-logo),
.add-v2-asset-icon.aicon--commodity:not(.has-logo),
.add-v2-asset-icon.aicon--metal:not(.has-logo) {
  background: transparent !important;
  border-color: transparent !important;
}

/* ETF / fund — institutional provider monogram chip. */
.aicon-fb-provider {
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #eaf1ff;
  background:
    linear-gradient(180deg, rgba(74,130,240,0.32), rgba(40,70,140,0.16)),
    #131a2c;
  border: 1px solid rgba(120,160,240,0.35);
}

/* Index — numeric / family badge with a category accent. */
.aicon-fb-index {
  font-weight: 800;
  font-size: 10px;
  letter-spacing: -0.01em;
  color: #fff;
}
.aicon-fb-index.idx-sp    { background: radial-gradient(circle at 38% 30%, #e8584f, #9c2a23); }
.aicon-fb-index.idx-ndx   { background: radial-gradient(circle at 38% 30%, #4a82f0, #2350a8); }
.aicon-fb-index.idx-dji   { background: radial-gradient(circle at 38% 30%, #5b7fb0, #2c3f5c); font-size: 9px; }
.aicon-fb-index.idx-stoxx { background: radial-gradient(circle at 38% 30%, #3aa0e0, #1f5fa0); }
.aicon-fb-index.idx-rut   { background: radial-gradient(circle at 38% 30%, #9a6cf0, #5733a8); font-size: 8.5px; }
.aicon-fb-index.idx-gen   { background: radial-gradient(circle at 38% 30%, #46618f, #25324c); font-size: 9px; }

/* Commodity — inline SVG glyph on a dark plate + a subtle premium glow
   (the glow doubles as the contrast halo so nothing reads black-on-black). */
.aicon-fb-commodity {
  background: radial-gradient(circle at 50% 40%, #1a2236, #0c1120);
  border: 1px solid rgba(255,255,255,0.06);
}
.aicon-cmd {
  width: 70%;
  height: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.aicon-cmd svg { width: 100%; height: 100%; display: block; }
.aicon-cmd--gold   { filter: drop-shadow(0 0 5px rgba(230,180,70,0.45)); }
.aicon-cmd--silver { filter: drop-shadow(0 0 5px rgba(200,210,225,0.40)); }
.aicon-cmd--oil    { filter: drop-shadow(0 0 5px rgba(210,145,63,0.50)); }
.aicon-cmd--gas    { filter: drop-shadow(0 0 6px rgba(74,130,240,0.55)); }

.asset-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}

.asset-symbol {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.asset-name {
  font-size: 12px;
  opacity: 0.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.logo {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.change-pill {
  padding: 4px var(--space-1);
  border-radius: 6px;
  font-size: 12px;
}

.change.pos .change-pill {
  background: rgba(63, 191, 127,0.12);
  color: var(--aurix-success);
}

.change.neg .change-pill {
  background: rgba(224, 90, 90,0.12);
  color: var(--aurix-danger);
}

@media (min-width: 1024px) {
  /* ── Screen shell: align with .app content edge (no double padding)
     and use a 2-column grid so the hero title sits left and the search
     bar sits right on the same row, with tabs + list spanning full
     width below. */
  /* AURIX-WEB-POLISH-1 — the screen opens straight into an operative toolbar
     (filter tabs left, search right) on a single row, like a financial terminal,
     with the table directly below. The marketing-style hero (title + subtitle) is
     dropped on web to reclaim vertical space and raise the useful content.
     Desktop-only: mobile keeps its header + layout. */
  .market-screen {
    padding: var(--space-3) 0 80px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "tabs   search"
      "body   body";
    column-gap: var(--space-5);
    row-gap: var(--space-3);
    align-items: center;
  }

  .market-header      { display: none; }
  .market-search-wrap { grid-area: search; padding: 0; margin: 0; justify-content: flex-end; position: relative; }
  .market-tabs        { grid-area: tabs;   padding: 0; margin: 0; overflow: visible; }
  .market-body        { grid-area: body;   margin-top: 0; }
  .market-main        { width: 100%; }
  .market-main > *    { margin-bottom: 0; }

  /* ── Hero: flagship title + supportive subtitle */
  .market-title {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: rgba(245, 250, 255, 1);
    line-height: 1.1;
  }
  .market-subtitle {
    font-size: 13px;
    color: rgba(220, 230, 250, 0.55);
    margin-top: 6px;
    letter-spacing: 0.01em;
  }

  /* ── Search: premium glass with integrated lupa, focus ring.
     Rest state slightly more legible — border, icon and placeholder
     pick up a touch more contrast without changing size or layout. */
  .market-search-wrap input {
    width: 320px;
    max-width: none;
    height: 40px;
    padding: 0 16px 0 40px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(13, 18, 30, 0.55);
    color: rgba(235, 243, 255, 0.95);
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.01em;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.22s ease;
  }
  .market-search-wrap input::placeholder {
    color: rgba(190, 208, 234, 0.52);
  }
  .market-search-wrap input:hover {
    border-color: rgba(255, 255, 255, 0.20);
  }
  .market-search-wrap input:focus {
    outline: none;
    border-color: rgba(74, 130, 240, 0.45);
    background: rgba(13, 18, 30, 0.75);
    box-shadow: 0 0 0 4px rgba(74, 130, 240, 0.08);
  }
  .market-search-icon {
    display: block;
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    fill: none;
    stroke: rgba(204, 224, 255, 0.72);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
    transition: stroke 0.18s ease;
  }
  .market-search-wrap input:focus ~ .market-search-icon,
  .market-search-wrap:focus-within .market-search-icon {
    stroke: var(--aurix-blue-light);
  }

  /* ── Filter bar: segmented premium control (no green pills) */
  /* AURIX-MARKET-V1.0 CAMBIO 7: premium segmented control — depth + subtle blue
     glow on the container, brighter inactive text, elegant blue hover, and a
     clearly-lit active segment. Desktop premium (not mobile-style, not huge). */
  .market-tabs {
    display: inline-flex;
    gap: 3px;
    padding: 4px;
    background: linear-gradient(180deg, rgba(13,18,30,0.66), rgba(13,18,30,0.5));
    border: 1px solid rgba(74,130,240,0.16);
    border-radius: 12px;
    width: fit-content;
    align-self: start;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 22px -14px rgba(74,130,240,0.30);
  }
  .market-tab {
    background: transparent;
    color: rgba(220, 230, 250, 0.70);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.005em;
    padding: 8px 14px;
    border-radius: 8px;
    border: 0;
    cursor: pointer;
    transition: color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
  }
  .market-tab:hover {
    color: rgba(235, 243, 255, 0.98);
    background: rgba(74, 130, 240, 0.08);
  }
  .market-tab.active {
    background: linear-gradient(180deg, rgba(74,130,240,0.24), rgba(74,130,240,0.14));
    color: #fff;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 0 16px -6px rgba(74,130,240,0.6);
  }

  /* ── Table surface: glass panel container */
  /* AURIX-DASH-V2: Market section card aligned to the Intelligence/Dashboard
     blue-glass material (was flat rgba(13,18,30,.40) + grey border). */
  .market-section {
    background:
      radial-gradient(130% 120% at 10% 0%, rgba(74,130,240,0.11), transparent 58%),
      linear-gradient(165deg, rgba(30,44,74,0.44), rgba(13,19,34,0.52));
    /* AURIX-MARKET-V1.0 CAMBIO 10: slightly more visible electric border + a soft
       outer glow + depth so the card reads as part of the Dashboard/Intelligence
       ecosystem. */
    border: 1px solid rgba(74,130,240,0.22);
    border-radius: 14px;
    padding: 6px 20px 14px;
    margin: 0;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.05),
      0 10px 30px -20px rgba(0,0,0,0.5),
      0 0 26px -12px rgba(74,130,240,0.22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .market-section-header {
    padding: 4px 0 8px;   /* AURIX-MARKET-V1.0 CAMBIO 2: trim top dead space — lift the table up */
    font-size: 11px;
    font-weight: 600;
    color: rgba(220, 230, 250, 0.55);   /* AURIX-DASH-V2: lift secondary label */
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* ── Table header row: 5-col grid matching rows, right-aligned numeric labels */
  /* AURIX-WEB-POLISH-1 — denser, terminal-grade table: tighter column rhythm
     (less air between blocks, better use of the horizontal space) shared by the
     header and the rows so they stay perfectly aligned. */
  .market-table-header {
    display: grid;
    grid-template-columns: 2.3fr 1fr 0.9fr 1.2fr 36px;
    column-gap: 10px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(220, 230, 250, 0.55);   /* AURIX-DASH-V2: lift table-header label */
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 0;
  }
  .market-table-header > div:nth-child(2),
  .market-table-header > div:nth-child(3) {
    text-align: right;
  }

  /* ── Rows: data-terminal density with premium hover */
  .market-row {
    grid-template-columns: 2.3fr 1fr 0.9fr 1.2fr 36px;
    column-gap: 10px;
    height: 48px;
    padding: 0 4px;
    margin: 0 -4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    transition: background 0.15s ease;
  }
  .market-row:hover {
    background: rgba(74, 130, 240,0.06);   /* AURIX-DASH-V2: blue hover (flag-off fallback parity) */
  }
  .market-row:last-child {
    border-bottom: 0;
  }

  /* ── Asset cell: clearer hierarchy (name dominant, symbol subdued) */
  .asset-symbol {
    font-size: 13px;
    font-weight: 600;
    color: rgba(235, 243, 255, 0.96);
    letter-spacing: 0.01em;
  }
  .asset-name {
    font-size: 11.5px;
    color: rgba(220, 230, 250, 0.48);
    margin-top: 2px;
    letter-spacing: 0.005em;
  }
  .asset-icon {
    background: rgba(74, 130, 240, 0.10);
    color: rgba(196, 220, 255, 0.88);
    border: 1px solid rgba(74, 130, 240, 0.18);
  }

  /* ── Price + change: financial typography */
  .col-price {
    font-size: 14px;
    font-weight: 600;
    color: rgba(245, 250, 255, 0.98);
  }
  .col-change {
    font-size: 13px;
    font-weight: 500;
  }

  /* ── Watchlist star: refined, less emoji-loud */
  .watchlist-btn {
    color: rgba(220, 230, 250, 0.22);
    font-size: 18px;
    line-height: 1;
    transition: color 0.18s ease, transform 0.18s ease;
  }
  .watchlist-btn:hover {
    color: rgba(255, 215, 0, 0.55);
    transform: scale(1.08);
  }
  .watchlist-btn.active {
    color: #FFC53D;
  }

  /* ── Featured row (kept for compatibility) */
  .market-featured {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2);
    padding: 0 0 var(--space-3);
    overflow: visible;
  }
  .featured-card {
    min-width: unset;
    flex-shrink: unset;
  }
}

@media (max-width: 1023px) {
  .market-table-header { display: none; }

  .market-screen {
    display: block;
    padding: var(--space-3) var(--space-3) 80px;
  }

  .market-body {
    display: block;
  }

  .market-sidebar {
    position: static;
  }

  .market-row {
    grid-template-columns: 2fr 1fr 0.9fr 40px;
    height: 52px;
  }

  .col-chart { display: none; }
}

/* ── Market intelligence layer ── */
.insight-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-4) 4px;
}

.insight {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  white-space: nowrap;
}

.insight.bullish { color: var(--aurix-success); border: 1px solid rgba(63, 191, 127,0.2); }
.insight.bearish { color: var(--aurix-danger); border: 1px solid rgba(224, 90, 90,0.2); }
.insight.neutral { color: #eab308; border: 1px solid rgba(234,179,8,0.2); }

.insight {
  position: relative;
  cursor: default;
  transition: background 0.15s ease;
}

.insight-text {
  display: block;
}

.insight-signal {
  display: none;
  font-size: 11px;
  opacity: 0.75;
  margin-top: 3px;
  line-height: 1.4;
  white-space: normal;
}

@media (hover: hover) {
  .insight:hover .insight-signal { display: block; }
}

.insight.active .insight-signal { display: block; }

/* ── Market wow layer ── */

/* Step 1–2: value transitions + flash */
@keyframes flash-up {
  0%   { background: rgba(63, 191, 127,0.18); }
  100% { background: transparent; }
}
@keyframes flash-down {
  0%   { background: rgba(224, 90, 90,0.18); }
  100% { background: transparent; }
}
.value-flash-up   { animation: flash-up   0.45s ease forwards; }
.value-flash-down { animation: flash-down 0.45s ease forwards; }

/* AURIX-DASH-V3: the wealth figure must never flash red/garnet on a drop — it
   reads as a bug/alert. Both up AND down get the SAME calm Aurix-blue glow
   (~360ms): "data updated", not "alarm". Id-scoped so other price flashes are
   untouched; wins by specificity regardless of source order. */
@keyframes aurixWealthUpdate {
  0%   { background: rgba(74,130,240,0.16); }
  100% { background: transparent; }
}
#totalValue.value-flash-up,
#totalValue.value-flash-down {
  animation: aurixWealthUpdate 360ms var(--ease-out);
  border-radius: 8px;
}

.market-metric-card .value,
.market-row-price,
.market-row-change {
  transition: color 0.2s ease;
}

/* Step 3: hover depth (desktop only) */
@media (hover: hover) {
  .market-row:hover {
    /* AURIX-DASH-V2: was rgba(255,255,255,0.06) white — this @media-hover rule
       won by source order over the desktop blue hover on the active is-v4 rows. */
    background: rgba(74,130,240,0.06);
    border-radius: 8px;
    transform: translateX(2px);
    transition: background 0.15s ease, transform 0.15s ease;
  }
  .featured-card:hover {
    transform: translateY(-2px);
    transition: transform 0.2s ease;
    /* AURIX-DASH-V3: blue-glass hover + glow to match the system. */
    background:
      radial-gradient(130% 130% at 10% 0%, rgba(74,130,240,0.13), transparent 58%),
      linear-gradient(165deg, rgba(34,48,80,0.52), rgba(16,23,40,0.55));
    border-color: rgba(74,130,240,0.40);
    box-shadow: 0 12px 28px rgba(0,0,0,0.28), 0 0 24px rgba(74,130,240,0.10);
  }
}

/* Step 4: market summary strip */
.market-ticker-strip {
  padding: 6px var(--space-4);
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.market-ticker-strip .t-up   { color: var(--aurix-success); }
.market-ticker-strip .t-down { color: var(--aurix-danger); }

/* Step 6: featured card emphasis */
.featured-card > div:nth-child(2) {
  font-size: 18px;
}

/* Step 9: scroll feel */
.market-body,
.market-screen {
  scroll-behavior: smooth;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE PORTFOLIO SLIDER — additive, isolated, desktop-safe
   ═══════════════════════════════════════════════════════════ */

/* Hidden by default — desktop never sees it */
.portfolio-mobile-slider { display: none; }
.portfolio-slider-card   { display: none; }

@media (max-width: 768px) {
  /* Hide desktop chart and distribution so slider takes over */
  .hero-right           { display: none; }
  .distribution-section { display: none; }

  /* Card container — same visual hierarchy as hero-card */
  .portfolio-slider-card {
    /* AURIX-DASHBOARD-CARD-HARMONIZATION (#11.8) — single shared spacing system so
       the chart slide and the donut slide evolve together and read as one premium
       component. Both slides consume THESE vars, never independent hardcoded values. */
    --slide-pad-x:        var(--space-3);  /* sectionHorizontalPadding */
    --slide-pad-top:      var(--space-3);  /* titleTopSpacing (card → title) */
    --slide-pad-bottom:   18px;            /* carouselBottomSpacing (dots zone) */
    --slide-title-mb:     14px;            /* title → content, BOTH slides */
    --slide-controls-gap: 6px;             /* chartControlsSpacing */
    --slide-legend-rowgap: 8px;            /* donutLegendSpacing */
    display: block;
    margin: var(--space-1) 0;
    padding: var(--slide-pad-top) var(--slide-pad-x) var(--space-2) !important;
    /* AURIX-MOBILE-HERO-V1: mobile chart card on the Intelligence/Hero blue-glass
       system (was flat --surface-2 that read dark/old). */
    background:
      radial-gradient(130% 120% at 10% 0%, rgba(74,130,240,0.10), transparent 58%),
      linear-gradient(165deg, rgba(30,44,74,0.44), rgba(15,21,37,0.52));
    border: 1px solid rgba(74,130,240,0.16);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.05),
      0 8px 24px -16px rgba(0,0,0,0.55),
      0 0 22px -12px rgba(74,130,240,0.16);
    transition: border-color var(--dur-med) var(--ease-premium),
                box-shadow var(--dur-med) var(--ease-out);
  }

  .portfolio-slider-card:hover,
  .portfolio-slider-card:active {
    border-color: rgba(74,130,240,0.40);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.05),
      0 12px 30px -16px rgba(0,0,0,0.5),
      0 0 26px -10px rgba(74,130,240,0.18);
  }

  /* Slider: adaptive height, padding-bottom reserves space for dots */
  .portfolio-mobile-slider {
    display: block;
    overflow: hidden;
    width: 100%;
    /* AURIX-MOBILE-POLISH-1 (#6): chart height reduced ~17% (280→232) so more
       categories surface above the fold without losing legibility.
       AURIX-CHART-RELIABILITY-GATE-1 · PARTE D: +20px (232→252) to give the
       premium curve more useful vertical presence on mobile without pushing the
       category list meaningfully below the fold. */
    min-height: 240px;   /* AURIX-MOBILE-HERO-V1: ~5% shorter to give the wealth hero more room */
    height: auto;
    position: relative;
    padding-bottom: var(--slide-pad-bottom) !important;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
  }

  /* Track: 200% wide, full height so slides can fill it */
  .mobile-slider-track {
    display: flex;
    width: 200%;
    height: 100%;
    transition: transform 0.28s cubic-bezier(0.22, 0.8, 0.3, 1);
    will-change: transform;
  }

  /* Each slide: no padding — card provides it */
  .mobile-slide {
    width: 50%;
    min-height: 240px;   /* AURIX-MOBILE-HERO-V1: matches the ~5%-shorter slider */
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 0;
  }

  /* Chart header: title → content gap from the shared system (#11.1/#11.2). */
  .portfolio-mobile-slider .chart-header {
    margin-bottom: var(--slide-title-mb);
  }
  /* #11.2 — tighter control rhythm to reclaim vertical space for the chart,
     keeping touch targets (≥28px). Scoped to the slider so desktop is untouched. */
  .portfolio-mobile-slider .chart-controls { gap: var(--slide-controls-gap); }
  .portfolio-mobile-slider .range-btn { padding: 5px 9px; }
  .portfolio-mobile-slider .perf-btn  { padding: 4px 9px; min-height: 28px; }

  /* Chart slide: flex column so chart-wrap fills remaining space */
  .mobile-slide-chart {
    display: flex;
    flex-direction: column;
  }

  /* #11.3 — kill the dead margin above the chart (was margin-top:var(--space-3)
     from the shared mobile .chart-wrap rule); that ~16px now goes to the line. */
  .mobile-slide-chart .chart-wrap {
    flex: 1;
    min-height: 0;
    margin-top: 0;
    position: relative;
    overflow: hidden;
    /* AURIX-MOBILE-HERO-V1: subtle blue depth so the chart well matches the system. */
    background: linear-gradient(180deg, rgba(74,130,240,0.06), transparent 70%);
  }

  /* Donut slide: title starts at the SAME Y as the chart title (#11.1) — no extra
     top padding; the card padding-top is the single source of the title baseline. */
  .mobile-slide-donut {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding-top: 0;
  }

  /* Donut slide: stack donut + legend vertically, tighter (#11.4). */
  .mobile-distribution-inner {
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
  }

  /* #11.5 — donut slightly larger so it carries the same visual weight as the line. */
  .mobile-donut-wrap {
    position: relative;
    flex-shrink: 0;
    width: min(180px, 48vw);
    height: min(180px, 48vw);
    overflow: visible;
  }

  /* Dots: sit in the 24px padding-bottom zone — never over the chart */
  .mobile-slider-dots {
    position: absolute;
    bottom: 6px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 6px;
  }

  .m-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
    opacity: 0.4;
    transition: opacity 0.2s ease;
    cursor: pointer;
  }

  .m-dot.active {
    opacity: 1;
  }
}

/* Explicit desktop guard — slider and card never visible at ≥769px */
@media (min-width: 769px) {
  .portfolio-mobile-slider  { display: none; }
  .portfolio-slider-card    { display: none; }
  .portfolio-actions-mobile { display: none; }
}

/* ═══════════════════════════════════════════════
   MOBILE FAB — additive, isolated, desktop-safe
   ═══════════════════════════════════════════════ */

/* Hidden by default — shown only on mobile */
.portfolio-actions-mobile { display: none; }

@media (max-width: 768px) {
  /* Hide large action buttons — FAB replaces them */
  #btnAdd, #btnAddLiquidity { display: none; }

  /* DASHBOARD-MOBILE-DENSITY-1 — the summary-footer block exists only
     to wrap those two buttons, both display:none above. Hiding it
     here removes the empty padding-top + margin-top that used to
     leave dead space below the meta row. */
  .summary-footer { display: none; }

  /* DASHBOARD-MOBILE-DENSITY-1 — FAB sits naturally as the right cell
     of the meta row's flex layout (.summary-meta-row uses
     justify-content: space-between). The previous absolute
     positioning floated it over a fixed centre slot, which pinned it
     too low and broke the "one footer row" alignment with
     "7 activos · Actualizado ahora". */
  .portfolio-actions-mobile {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    /* Relative so the absolute .fab-menu (below) still anchors to the
       button instead of escaping all the way up the layout tree. */
    position: relative;
    transform: none;
    z-index: auto;
  }

  .fab-trigger {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    /* AURIX-MOBILE-HERO-V1: lit-glass + glow + relief so the "+" reads as part of
       the premium system, not a flat floating chip. Same size/function. */
    background: linear-gradient(180deg, rgba(74,130,240,0.22), rgba(74,130,240,0.12));
    border: 1px solid rgba(74,130,240,0.38);
    color: var(--aurix-blue);
    font-size: 17px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(6px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.12),
      0 2px 10px -4px rgba(74,130,240,0.45);
    transition: opacity 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  }

  .fab-trigger:active { opacity: 0.7; }

  /* Dropdown menu */
  .fab-menu {
    position: absolute;
    top: 44px;
    right: 0;
    display: none;
    flex-direction: column;
    gap: var(--space-1);
    z-index: 7;
  }

  .fab-menu.open { display: flex; }

  .fab-option {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 14px;
    border-radius: 8px;
    white-space: nowrap;
    font-size: var(--font-size-sm);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease;
  }

  .fab-option:hover { border-color: var(--border-hi); }
}

/* ══════════════════════════════════════════════════════════
   MOBILE OVERRIDES — CONSOLIDATED (FAB + DONUT)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── FAB container — flex child of summary-meta-row ── */
  .portfolio-actions-mobile {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center;
    flex-shrink: 0;
  }

  /* ── FAB trigger ── */
  .fab-trigger {
    margin-right: var(--space-1);
    transition: transform 0.15s ease;
    /* FINAL-MOBILE-POLISH-1 — the "+" glyph sits a hair above the
       optical centre of the 32px box because of font metrics, so
       align-items: center on the row pulled the button visually
       higher than the meta text baseline. A 1px push down via
       margin restores parity with "X activos · Actualizado ahora"
       without fighting the :active scale transform. */
    margin-top: 1px;
  }

  .fab-trigger:active {
    transform: scale(0.95) !important;
    opacity: 0.85 !important;
  }

  /* ── Donut legend — 2-column compact grid (#11.4) — tighter row rhythm + closer
     columns so it consumes ~15-25% less height; row-gap from the shared system. ── */
  .distribution-legend {
    display: grid !important;
    grid-template-columns: auto auto !important;
    justify-content: start;
    column-gap: var(--space-4);
    row-gap: var(--slide-legend-rowgap);
    width: fit-content;
    margin: var(--space-1) auto 0;
  }

  .distribution-legend .legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }

  .distribution-legend .legend-label {
    white-space: nowrap;
  }

  /* ── Donut title: matches chart-title exactly (font + start Y) and uses the
     SHARED title→content gap so both slides feel identical (#11.1/#11.8). ── */
  .mobile-slide-donut .section-title.card-title {
    font-size: 11px !important;
    font-weight: var(--font-weight-semibold) !important;
    letter-spacing: .14em !important;
    opacity: 1 !important;
    line-height: 1 !important;
    margin-top: 0 !important;
    margin-bottom: var(--slide-title-mb) !important;
    transform: none;
  }
}

/* ── Global FAB menu — position: fixed, never clipped by any container ── */
.fab-menu-global {
  position: fixed;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-1);
  min-width: 190px;
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform-origin: top right;
  background: rgba(18, 20, 28, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.fab-menu-global.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ── On mobile FAB opens modal directly — menu not needed ── */
@media (max-width: 768px) {
  .fab-menu,
  .fab-menu-global { display: none !important; }
}

/* ── Tap feedback ── */
@media (max-width: 768px) {
  .fab-trigger:active { transform: scale(0.96); }
}

/* ── Category drill-down: hide entire mobile slider, show only detail view ── */
body.is-detail-view .portfolio-slider-card   { display: none !important; }
body.is-detail-view .mobile-slide-donut      { display: none !important; }
body.is-detail-view .portfolio-mobile-slider { height: auto !important; }
body.is-detail-view .mobile-slider-track     { height: auto !important; }
body.is-detail-view .mobile-slide            { height: auto !important; }

/* ── Modal type toggle (Activo / Liquidez) ── */
.add-type-toggle {
  display: flex;
  gap: var(--space-1);
  margin: var(--space-2) var(--space-3) 0;
}

.type-btn {
  flex: 1;
  padding: 10px 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #aaa;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.type-btn.active {
  background: rgba(74, 130, 240, 0.15);
  border-color: rgba(74, 130, 240, 0.4);
  color: #fff;
}

/* ── Mobile card bottom margin reset ── */
@media (max-width: 768px) {
  .hero-left > *:last-child          { margin-bottom: 0 !important; }
  .portfolio-slider-card > *:last-child { margin-bottom: 0 !important; }
}

/* ── Donut spacing override — AURIX-DASHBOARD-CARD-HARMONIZATION (#11.1): this is
   the cascade-winning rule for the donut title; it now uses the SHARED
   title→content gap so it stays aligned with the chart slide. ── */
@media (max-width: 768px) {
  .mobile-slide-donut .section-title.card-title {
    font-size: 11px !important;
    font-weight: var(--font-weight-semibold) !important;
    letter-spacing: .14em !important;
    opacity: 1 !important;
    line-height: 1 !important;
    margin-top: 0 !important;
    margin-bottom: var(--slide-title-mb) !important;
    transform: none !important;
  }
}

/* ── AW-1: Aurix Workspace — minimal foundation styles ─────────────────────── */
/* AW-6.1 §1-3: full-bleed. El workspace escapa del .app (max-width:1080px)
   activando body.workspace-active. Reglas escopeadas — sólo afectan al tab
   workspace; el resto (Home/Market/Profile) queda intacto. */
.aurix-workspace {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh; /* BLOQUE-1.4 — dvh progressive enhancement; vh kept as fallback */
  padding: var(--space-3);
  padding-bottom: 96px; /* clear bottom-nav */
  box-sizing: border-box;
  color: var(--text);
  background: var(--bg);
}

/* AW-6.1 §2: liberar el .app shell sólo cuando workspace está activo. */
body.workspace-active .app {
  max-width: none;
  padding: 0;
}

/* Header: sin padding lateral del .app, le damos su propio gutter para que
   logo/menu no queden pegados al borde. Coincide con el gutter del workspace
   para mantener alineación visual vertical. */
body.workspace-active .header {
  padding-left: clamp(16px, 2.5vw, 36px);
  padding-right: clamp(16px, 2.5vw, 36px);
}

@media (min-width: 1024px) {
  .aurix-workspace {
    max-width: none;
    margin: 0;
    padding: 14px clamp(20px, 2.5vw, 36px) 18px;
  }
}

/* AW-6.1 §8: mobile full-width — el workspace usa todo el ancho disponible
   con padding interno mínimo y safe-area awareness para notch/bottom-nav. */
@media (max-width: 1023.98px) {
  body.workspace-active .aurix-workspace {
    padding: var(--space-2)
             max(var(--space-2), env(safe-area-inset-left))
             96px
             max(var(--space-2), env(safe-area-inset-right));
  }
}

.aurix-shell {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.aurix-topbar {
  display: flex;
  align-items: center;
  padding: var(--space-2) 0;
}

.aurix-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.01em;
}

.aurix-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-2);
}

.aurix-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-2);
  align-content: start;
}

.aurix-card {
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.aurix-card-label {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.aurix-card-value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}

.aurix-formulas pre {
  margin: 0;
  font-size: var(--font-size-xs);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-muted);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── AW-3 / AW-4 / AW-5 / AW-6: Dual-layout shell (desktop workstation + mobile cockpit) ─ */

.aurix-workspace-shell {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}

/* ── Desktop layout (≥1024px): premium financial workstation ─────────────── */
.aurix-workspace-shell.is-desktop {
  height: calc(100vh - 80px);
  gap: 14px;
}

/* AW-6 §6: formula bar = command surface. Layout fx | coord | divider |
   value | sheet-name. Más respiración, más contraste, tipografía mayor. */
.aurix-toolbar {
  display: grid;
  grid-template-columns: auto auto auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.030), rgba(255,255,255,0) 60%),
    var(--bg-card);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.025) inset,
    0 6px 18px rgba(0,0,0,0.22);
  min-height: 52px;
  box-sizing: border-box;
}

.aurix-formula-fx {
  font-family: 'Times New Roman', Georgia, serif;
  font-style: italic;
  font-size: 17px;
  font-weight: 500;
  color: rgba(74, 130, 240, 0.92);
  padding: 0 2px;
  letter-spacing: 0.01em;
  user-select: none;
}

.aurix-formula-divider {
  width: 1px;
  height: 22px;
  background: rgba(255,255,255,0.10);
}

.aurix-formula-coord {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: var(--text);
  text-align: center;
  padding: 6px 12px;
  background: rgba(74, 130, 240, 0.10);
  border: 1px solid rgba(74, 130, 240, 0.22);
  border-radius: 7px;
  min-width: 52px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.aurix-formula-coord.is-empty {
  color: var(--text-muted);
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.07);
}

/* AW-7.2: formula bar es ahora <input>. Resetear defaults nativos del input
   y mantener tipografía/contraste premium del AW-5/AW-6. */
.aurix-formula-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14.5px;
  color: var(--text);
  background: transparent;
  border: 0;
  outline: none;
  padding: 4px 10px;
  margin: 0;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  caret-color: rgba(74, 130, 240, 0.95);
}

.aurix-formula-value.is-formula {
  color: rgba(74, 130, 240, 0.96);
}

.aurix-formula-value.is-literal {
  color: var(--text);
}

.aurix-formula-value.is-empty {
  color: var(--text-muted);
  font-style: italic;
  opacity: 0.7;
}

.aurix-formula-value::placeholder {
  color: var(--text-muted);
  font-style: italic;
  opacity: 0.55;
}

/* AW-7.2: readonly (system cell o sin selección) — sin caret, cursor neutro. */
.aurix-formula-value.is-readonly,
.aurix-formula-value[readonly] {
  cursor: default;
  caret-color: transparent;
}

/* AW-7.2: editable — refuerzo visual cuando el input tiene foco. */
.aurix-formula-value.is-editable:focus {
  background: rgba(74, 130, 240, 0.06);
  border-radius: 4px;
}

.aurix-formula-value.is-editing {
  background: rgba(74, 130, 240, 0.06);
  border-radius: 4px;
}

.aurix-sheet-name {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: var(--font-weight-semibold);
  opacity: 0.78;
  white-space: nowrap;
}

/* AW-6 §2: grid dominates (~86-88%); risk monitor narrows to 220px. */
.aurix-workspace-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 12px;
  flex: 1;
  min-height: 0;
}

.aurix-grid-panel {
  overflow: auto;
  min-height: 0;
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  outline: none;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.025) inset,
    0 10px 28px rgba(0,0,0,0.20);
}

.aurix-grid-panel:focus-visible {
  border-color: rgba(74, 130, 240, 0.40);
}

/* AW-6 §3-4: 12 cols × 30 rows lógicos. Visualmente menos rows visibles,
   celdas más altas y legibles para sensación premium. */
.aurix-grid-matrix {
  --aw-grid-cols: 12;
  display: grid;
  grid-template-columns: 52px repeat(var(--aw-grid-cols), minmax(128px, 1fr));
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'cv11' 1;
}

.aurix-grid-corner {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 4;
  background: var(--bg-card);
  border-right: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  height: 38px;
}

.aurix-grid-col-header {
  position: sticky;
  top: 0;
  z-index: 3;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0)),
    var(--bg-card);
  color: var(--text);
  opacity: 0.78;
  font-size: 12.5px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  text-align: center;
  padding: 9px 10px;
  border-right: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  height: 38px;
  box-sizing: border-box;
  user-select: none;
}

.aurix-grid-col-header:last-child {
  border-right: 0;
}

.aurix-grid-row-header {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  text-align: center;
  padding: 0 8px;
  border-right: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.045);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  box-sizing: border-box;
  user-select: none;
}

.aurix-grid-cell {
  position: relative;
  padding: 9px 14px;
  font-size: 14px;
  color: var(--text);
  background: transparent;
  border-right: 1px solid rgba(255,255,255,0.035);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: cell;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  transition: background 80ms ease-out;
}

.aurix-grid-cell:last-child {
  border-right: 0;
}

/* Numeric values right-aligned with tabular figures. */
.aurix-grid-cell.is-numeric {
  justify-content: flex-end;
  font-variant-numeric: tabular-nums;
}

.aurix-grid-cell:hover {
  background: rgba(255,255,255,0.025);
}

.aurix-grid-cell.is-formula {
  background: rgba(74, 130, 240, 0.04);
  color: var(--text);
}

.aurix-grid-cell.is-readonly {
  color: var(--text);
  opacity: 0.94;
}

.aurix-grid-cell.is-empty {
  color: transparent;
}

.aurix-grid-cell.is-empty:hover {
  background: rgba(255,255,255,0.022);
}

.aurix-grid-cell.is-active {
  background: rgba(74, 130, 240, 0.13);
  outline: 1.5px solid rgba(74, 130, 240, 0.95);
  outline-offset: -1px;
  z-index: 1;
  box-shadow:
    inset 0 0 0 1px rgba(74, 130, 240, 0.18),
    0 0 0 3px rgba(74, 130, 240, 0.10);
}

.aurix-grid-cell.is-active.is-formula {
  background: rgba(74, 130, 240, 0.20);
}

/* AW-7.1: system cells (readonly) — cursor neutro, sin edición. */
.aurix-grid-cell.is-system {
  cursor: default;
}

/* AW-7.4: invalid formula state (#ERROR / #DIV/0). */
.aurix-grid-cell.is-invalid {
  color: #E05A5A;
  font-style: italic;
}

.aurix-grid-cell.is-invalid.is-active {
  color: #E05A5A;
}

/* AW-7.1: editing state — input reemplaza el contenido visual. */
.aurix-grid-cell.is-editing {
  background: rgba(74, 130, 240, 0.16);
  outline: 1.5px solid rgba(74, 130, 240, 0.95);
  outline-offset: -1px;
  z-index: 2;
  padding: 0;
  box-shadow:
    inset 0 0 0 1px rgba(74, 130, 240, 0.22),
    0 0 0 3px rgba(74, 130, 240, 0.10);
}

.aurix-cell-edit {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text);
  font: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: inherit;
  padding: 9px 14px;
  margin: 0;
  box-sizing: border-box;
  line-height: 1.2;
  caret-color: rgba(74, 130, 240, 0.95);
}

/* En la pasada AW-6.2, las celdas usan padding 7px 12px en desktop;
   replicamos en el input para que el caret no salte al entrar a editar. */
@media (min-width: 1024px) {
  .aurix-cell-edit {
    padding: 7px 12px;
  }
}

.aurix-grid-cell.is-editing.is-numeric .aurix-cell-edit {
  text-align: right;
}

/* AW-6 §7: Risk Monitor refinement — más breathing, jerarquía clara. */
.aurix-copilot-panel {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 20px 18px 22px;
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  align-self: stretch;
  min-height: 0;
  overflow: auto;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.025) inset,
    0 10px 28px rgba(0,0,0,0.20);
}

.aurix-copilot-header {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.aurix-copilot-eyebrow {
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  opacity: 0.94;
}

.aurix-copilot-subtitle {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.68;
  font-weight: var(--font-weight-medium);
}

.aurix-risk-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.aurix-risk-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aurix-risk-group-title {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.78;
  font-weight: var(--font-weight-semibold);
  margin: 0;
}

.aurix-risk-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.aurix-risk-signal {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.aurix-risk-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-top: 8px;
  background: var(--text-muted);
  opacity: 0.55;
}

.aurix-risk-signal.is-warn .aurix-risk-dot {
  background: #E9A857;
  opacity: 0.95;
  box-shadow: 0 0 7px rgba(233, 168, 87, 0.40);
}

.aurix-risk-signal.is-info .aurix-risk-dot {
  background: rgba(74, 130, 240, 0.88);
  opacity: 0.92;
}

.aurix-risk-signal.is-ok .aurix-risk-dot {
  background: #3FBF7F;
  opacity: 0.88;
}

.aurix-risk-signal.is-warn .aurix-risk-text {
  color: var(--text);
}

.aurix-risk-signal.is-ok .aurix-risk-text {
  color: var(--text-muted);
  opacity: 0.78;
}

.aurix-risk-text {
  flex: 1;
  min-width: 0;
}

/* ── Mobile layout (<1024px): executive cockpit ──────────────────────────── */
/* MW-2: mobile workspace — premium intelligence dashboard.
   Hero → secondary KPI grid → portfolio-intelligence header → stacked
   risk cards → quick actions. Replaces the earlier 6-card grid + table
   risk panel. Desktop renderer is unaffected — every selector below is
   either is-mobile scoped or only emitted by _renderWorkspaceMobile. */
.aurix-workspace-shell.is-mobile {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 12px 14px calc(env(safe-area-inset-bottom) + 28px);
  max-width: min(560px, 100%);
  margin-inline: auto;
  width: 100%;
  overflow-x: hidden;
}

/* Legacy nodes — kept hidden so any stale consumer of these classes
   stays a no-op (renderer no longer emits them). */
.aurix-mobile-header,
.aurix-mobile-title,
.aurix-mobile-note,
.aurix-mobile-summary,
.aurix-summary-card,
.aurix-mobile-risk,
.aurix-mobile-risk-row { /* legacy guards */ }

/* ── Intelligence hero (workspace identity) ──────────────── */
/* Workspace mobile leads with intelligence signals, not portfolio totals
   — that surface belongs to Dashboard. The hero shows what needs
   attention: active signals, risk band, sync status. */
.ws-intel-hero {
  position: relative;
  padding: 20px 20px 18px;
  border-radius: 22px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(74, 130, 240,0.16) 0%, rgba(74, 130, 240,0) 60%),
    linear-gradient(180deg, rgba(20,26,40,0.92), rgba(12,16,26,0.92));
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 18px 40px -24px rgba(8,12,24,0.85);
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.ws-intel-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(60% 40% at 50% -10%, rgba(74, 130, 240,0.18), transparent 70%);
  opacity: 0.9;
}
.ws-intel-hero.is-warn {
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(233,168,87,0.14) 0%, rgba(233,168,87,0) 60%),
    linear-gradient(180deg, rgba(28,22,16,0.94), rgba(14,12,8,0.92));
  border-color: rgba(233,168,87,0.24);
}
.ws-intel-hero.is-positive { border-color: rgba(63,191,127,0.22); }
.ws-intel-hero.is-info     { border-color: rgba(74, 130, 240,0.22); }
.ws-intel-eyebrow {
  position: relative;
  z-index: 1;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: #fff;
  line-height: 1.2;
}
.ws-intel-sub {
  position: relative;
  z-index: 1;
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(220,230,250,0.6);
  letter-spacing: 0.005em;
}
.ws-intel-status {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.ws-intel-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(225,233,255,0.92);
  white-space: nowrap;
}
.ws-intel-pill.is-positive { color: #3FBF7F; background: rgba(63,191,127,0.10); border-color: rgba(63,191,127,0.24); }
.ws-intel-pill.is-info     { color: rgba(74, 130, 240,0.95); background: rgba(74, 130, 240,0.10); border-color: rgba(74, 130, 240,0.24); }
.ws-intel-pill.is-warn     { color: #E9A857; background: rgba(233,168,87,0.10); border-color: rgba(233,168,87,0.28); }
.ws-intel-pill.is-neutral  { color: rgba(225,233,255,0.70); }

/* Legacy hero class — renderer no longer emits this, kept as a no-op. */
.ws-hero {
  position: relative;
  padding: 20px 20px 18px;
  border-radius: 22px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(74, 130, 240,0.16) 0%, rgba(74, 130, 240,0) 60%),
    linear-gradient(180deg, rgba(20,26,40,0.92), rgba(12,16,26,0.92));
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 18px 40px -24px rgba(8,12,24,0.85);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 150px;
  overflow: hidden;
}
.ws-hero::after {
  /* Soft Aurix inner glow that only reads at the top edge — keeps the
     glass surface premium without competing with the value typography. */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(60% 40% at 50% -10%, rgba(74, 130, 240,0.18), transparent 70%);
  opacity: 0.9;
}
.ws-hero.is-warn {
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(233,168,87,0.14) 0%, rgba(233,168,87,0) 60%),
    linear-gradient(180deg, rgba(28,22,16,0.94), rgba(14,12,8,0.92));
  border-color: rgba(233,168,87,0.24);
}
.ws-hero.is-positive { border-color: rgba(63,191,127,0.22); }
.ws-hero.is-info     { border-color: rgba(74, 130, 240,0.22); }

.ws-hero-label {
  position: relative;
  z-index: 1;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(220,230,250,0.65);
  font-weight: 600;
}
.ws-hero-value {
  position: relative;
  z-index: 1;
  font-size: clamp(26px, 6vw, 36px);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  /* Never truncate — clamp scales it down on narrow screens instead. */
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: keep-all;
}
.ws-hero-delta {
  position: relative;
  z-index: 1;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.ws-hero-delta.is-positive { color: #3FBF7F; }
.ws-hero-delta.is-negative { color: #E05A5A; }
.ws-hero-delta.is-muted    { color: rgba(220,230,250,0.55); font-weight: 500; }
.ws-hero-meta {
  position: relative;
  z-index: 1;
  font-size: 12.5px;
  color: rgba(220,230,250,0.6);
  letter-spacing: 0.01em;
  margin-top: 4px;
}

/* ── Secondary KPI grid (2×2) ─────────────────────────────── */
.ws-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ws-kpi-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-height: 96px;
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012));
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.ws-kpi-card:active { transform: scale(0.985); }
.ws-kpi-card.is-info     { border-color: rgba(74, 130, 240,0.22); }
.ws-kpi-card.is-positive { border-color: rgba(63,191,127,0.22); }
.ws-kpi-card.is-warn     { border-color: rgba(233,168,87,0.24); }
.ws-kpi-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(220,230,250,0.6);
  font-weight: 600;
}
.ws-kpi-value {
  font-size: clamp(18px, 5vw, 24px);
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.15;
  /* MW-3: values here are always short (counts, OK/Pending, BTC). Use
     nowrap + keep-all so a currency token like "US$" or "€1.2K" never
     splits across lines (e.g. "U\nS$"). clamp() handles narrow phones. */
  white-space: nowrap;
  word-break: keep-all;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-kpi-card.is-warn     .ws-kpi-value { color: #E9A857; }
.ws-kpi-card.is-positive .ws-kpi-value { color: #3FBF7F; }

/* ── Section header ───────────────────────────────────────── */
.ws-section-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.ws-section-eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(220,230,250,0.85);
}
.ws-section-sub {
  font-size: 12.5px;
  color: rgba(220,230,250,0.55);
  letter-spacing: 0.005em;
  line-height: 1.4;
}

/* ── Stacked risk cards ───────────────────────────────────── */
.ws-risk-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ws-risk-card {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.06);
}
.ws-risk-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: rgba(74, 130, 240,0.95);
  background: rgba(74, 130, 240,0.12);
  border: 1px solid rgba(74, 130, 240,0.20);
  flex-shrink: 0;
}
.ws-risk-body { min-width: 0; }
.ws-risk-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(220,230,250,0.55);
  font-weight: 600;
  margin-bottom: 2px;
}
.ws-risk-msg {
  font-size: 13.5px;
  line-height: 1.4;
  color: #fff;
  font-weight: 500;
}
.ws-risk-card.is-ok       { border-color: rgba(63,191,127,0.22); }
.ws-risk-card.is-ok       .ws-risk-icon { color: #3FBF7F; background: rgba(63,191,127,0.12); border-color: rgba(63,191,127,0.22); }
.ws-risk-card.is-warn     { border-color: rgba(233,168,87,0.26); }
.ws-risk-card.is-warn     .ws-risk-icon { color: #E9A857; background: rgba(233,168,87,0.14); border-color: rgba(233,168,87,0.30); }
.ws-risk-card.is-critical { border-color: rgba(224,90,90,0.30); }
.ws-risk-card.is-critical .ws-risk-icon { color: #E05A5A; background: rgba(224,90,90,0.14); border-color: rgba(224,90,90,0.30); }
.ws-risk-card.is-info     { border-color: rgba(74, 130, 240,0.22); }
.ws-risk-card.is-info     .ws-risk-icon { color: rgba(74, 130, 240,0.95); background: rgba(74, 130, 240,0.12); border-color: rgba(74, 130, 240,0.22); }

/* ── WORKSPACE-MOBILE-1: premium cockpit ───────────────────
   Mobile-only block. Hierarchy reads: cockpit head (eyebrow +
   demoted action pills) → cockpit strip (4 chips) → hero insight
   → diagnostic grid 2x2 → main signals (max 3) → micro sync row.
   Selectors are scoped tightly so desktop rendering is unaffected. */

.aurix-workspace-shell.is-mobile.is-empty { gap: 20px; }

.ws-empty-card {
  margin-top: 28px;
  padding: 22px 22px 20px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(74, 130, 240,0.05), rgba(74, 130, 240,0.015));
  border: 1px solid rgba(74, 130, 240,0.18);
  text-align: center;
}
.ws-empty-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: rgba(235,242,255,0.96);
}
.ws-empty-sub {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(220,230,250,0.66);
}
.ws-empty-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(74, 130, 240,0.20), rgba(74, 130, 240,0.06));
  border: 1px solid rgba(74, 130, 240,0.36);
  color: rgba(232,240,255,0.98);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.16s ease, background 0.16s ease;
}
.ws-empty-cta:active { transform: scale(0.96); }

/* Cockpit head — eyebrow titles on the left, compact action pills
   on the right. On very narrow screens the action group wraps under
   the title block without losing alignment. */
.ws-cockpit-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.ws-cockpit-titles { min-width: 0; flex: 1 1 auto; }
.ws-cockpit-eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(180,196,228,0.62);
  font-weight: 600;
  margin-bottom: 4px;
}
.ws-cockpit-sub {
  font-size: 13px;
  line-height: 1.4;
  color: rgba(220,230,250,0.78);
}
.ws-cockpit-head .ws-action-row { margin-top: 0; flex: 0 0 auto; }

/* Cockpit strip — 4 chips in a row. Each chip pairs a small uppercase
   label with a value; tone shifts the value colour without overwhelming
   the surface. */
.ws-cockpit-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.ws-cockpit-chip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 10px 11px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.06);
  min-width: 0;
}
.ws-cockpit-chip-label {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(190,204,230,0.55);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-cockpit-chip-value {
  font-size: 14px;
  font-weight: 600;
  color: rgba(235,242,255,0.96);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-cockpit-chip.is-positive .ws-cockpit-chip-value { color: var(--aurix-success); }
.ws-cockpit-chip.is-info     .ws-cockpit-chip-value { color: rgba(174,196,255,0.98); }
.ws-cockpit-chip.is-warn     .ws-cockpit-chip-value { color: #E9A857; }
.ws-cockpit-chip.is-high,
.ws-cockpit-chip.is-elevated  { border-color: rgba(233,168,87,0.22); }
.ws-cockpit-chip.is-high     .ws-cockpit-chip-value,
.ws-cockpit-chip.is-elevated .ws-cockpit-chip-value { color: #E9A857; }
.ws-cockpit-chip.is-moderate .ws-cockpit-chip-value { color: rgba(174,196,255,0.98); }
.ws-cockpit-chip.is-solid    .ws-cockpit-chip-value { color: var(--aurix-success); }
.ws-cockpit-chip.is-neutral  .ws-cockpit-chip-value { color: rgba(220,230,250,0.7); }

/* Hero insight — single dominant card. Visually weightier than the
   diagnostic cards below so the user's eye lands here first. */
.ws-hero-insight {
  position: relative;
  padding: 18px 18px 20px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(74, 130, 240,0.10), rgba(74, 130, 240,0.02));
  border: 1px solid rgba(74, 130, 240,0.22);
  overflow: hidden;
}
.ws-hero-insight::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 80% at 100% 0%, rgba(74, 130, 240,0.12), transparent 60%);
}
.ws-hero-eyebrow {
  position: relative;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(180,196,228,0.7);
  font-weight: 600;
  margin-bottom: 8px;
}
.ws-hero-title {
  position: relative;
  margin: 0 0 4px;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: rgba(238,244,255,0.98);
}
.ws-hero-msg {
  position: relative;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(220,230,250,0.74);
}
.ws-hero-insight.is-warn    { border-color: rgba(233,168,87,0.32); background: linear-gradient(180deg, rgba(233,168,87,0.10), rgba(233,168,87,0.02)); }
.ws-hero-insight.is-warn::after    { background: radial-gradient(120% 80% at 100% 0%, rgba(233,168,87,0.14), transparent 60%); }
.ws-hero-insight.is-positive { border-color: rgba(63,191,127,0.28); background: linear-gradient(180deg, rgba(63,191,127,0.10), rgba(63,191,127,0.02)); }
.ws-hero-insight.is-positive::after{ background: radial-gradient(120% 80% at 100% 0%, rgba(63,191,127,0.14), transparent 60%); }
.ws-hero-insight.is-neutral  { border-color: rgba(255,255,255,0.10); background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)); }
.ws-hero-insight.is-neutral::after { background: none; }

/* Diagnostic grid — 2x2 compact cards. Label / status / context line. */
.ws-diag-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ws-diag-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px 13px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.06);
  min-width: 0;
}
.ws-diag-label {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(190,204,230,0.55);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-diag-status {
  font-size: 15px;
  font-weight: 600;
  color: rgba(235,242,255,0.96);
  line-height: 1.2;
}
.ws-diag-context {
  font-size: 11.5px;
  color: rgba(200,214,238,0.62);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-diag-card.is-positive { border-color: rgba(63,191,127,0.22); }
.ws-diag-card.is-positive .ws-diag-status { color: var(--aurix-success); }
.ws-diag-card.is-info     { border-color: rgba(74, 130, 240,0.22); }
.ws-diag-card.is-info     .ws-diag-status { color: rgba(174,196,255,0.98); }
.ws-diag-card.is-warn     { border-color: rgba(233,168,87,0.26); }
.ws-diag-card.is-warn     .ws-diag-status { color: #E9A857; }
.ws-diag-card.is-neutral  { border-color: rgba(255,255,255,0.06); }
.ws-diag-card.is-neutral  .ws-diag-status { color: rgba(220,230,250,0.78); }

/* Main signals — same visual family as risk cards but lighter so the
   hero insight retains primacy. Max 3 cards is enforced by JS. */
.ws-signal-stack {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ws-signal-card {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.008));
  border: 1px solid rgba(255,255,255,0.06);
}
.ws-signal-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
  font-weight: 700;
  color: rgba(74, 130, 240,0.95);
  background: rgba(74, 130, 240,0.12);
  border: 1px solid rgba(74, 130, 240,0.20);
  flex-shrink: 0;
}
.ws-signal-body { min-width: 0; }
.ws-signal-label {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(200,214,238,0.55);
  font-weight: 600;
  margin-bottom: 2px;
}
.ws-signal-msg {
  font-size: 13px;
  line-height: 1.4;
  color: rgba(235,242,255,0.94);
  font-weight: 500;
}
.ws-signal-card.is-ok       { border-color: rgba(63,191,127,0.22); }
.ws-signal-card.is-ok       .ws-signal-icon { color: #3FBF7F; background: rgba(63,191,127,0.12); border-color: rgba(63,191,127,0.22); }
.ws-signal-card.is-warn     { border-color: rgba(233,168,87,0.26); }
.ws-signal-card.is-warn     .ws-signal-icon { color: #E9A857; background: rgba(233,168,87,0.14); border-color: rgba(233,168,87,0.30); }
.ws-signal-card.is-critical { border-color: rgba(224,90,90,0.30); }
.ws-signal-card.is-critical .ws-signal-icon { color: #E05A5A; background: rgba(224,90,90,0.14); border-color: rgba(224,90,90,0.30); }
.ws-signal-card.is-info     { border-color: rgba(74, 130, 240,0.22); }
.ws-signal-card.is-info     .ws-signal-icon { color: rgba(74, 130, 240,0.95); background: rgba(74, 130, 240,0.12); border-color: rgba(74, 130, 240,0.22); }
.ws-signals-empty {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: rgba(200,214,238,0.55);
  line-height: 1.4;
}

/* Micro sync status — small muted row, no longer a peer card. */
.ws-micro-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 0;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(190,204,230,0.50);
  font-weight: 500;
}
.ws-micro-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3FBF7F;
  box-shadow: 0 0 0 3px rgba(63,191,127,0.12);
}
.ws-micro-status.is-stale { color: rgba(233,168,87,0.78); }
.ws-micro-status.is-stale .ws-micro-dot {
  background: #E9A857;
  box-shadow: 0 0 0 3px rgba(233,168,87,0.14);
}

/* Tighter spacing on 375px-wide devices so the strip doesn't crowd. */
@media (max-width: 380px) {
  .ws-cockpit-strip { gap: 6px; }
  .ws-cockpit-chip { padding: 9px 8px 10px; }
  .ws-cockpit-chip-label { font-size: 9px; letter-spacing: 0.12em; }
  .ws-cockpit-chip-value { font-size: 13px; }
  .ws-hero-title { font-size: 15.5px; }
  .ws-diag-card { padding: 11px 12px 12px; }
}

/* ══════════════════════════════════════════════════════════════════
   WORKSPACE-INTELLIGENCE-3 — investor intelligence cockpit.
   Premium reading surface used by BOTH the mobile workspace tab and
   the desktop right-hand panel. Bloomberg × Revolut Wealth tone:
   generous spacing, soft hierarchy, no shouting all-caps, explanation
   text softer than headlines, severity reads through colour not noise.
   ══════════════════════════════════════════════════════════════════ */

.aurix-workspace-shell.is-mobile.is-intelligence {
  gap: 20px;
  padding: 14px 16px 36px;
}
.ws-intel-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
}
.ws-intel-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(174, 196, 255, 0.78);
}
.ws-intel-headline {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.018em;
  color: #fff;
  line-height: 1.18;
}
.ws-intel-explainer {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(220, 230, 250, 0.6);
  letter-spacing: 0.005em;
}

/* STATUS STRIP — 4 across when width allows, 2x2 when narrow. */
.ws-intel-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 640px) {
  .ws-intel-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}
.ws-intel-stat {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 12px 12px 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ws-intel-stat-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(220, 230, 250, 0.5);
}
.ws-intel-stat-value {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.012em;
  color: rgba(255, 255, 255, 0.96);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  /* Anti-truncation guard: full word renders, never DIVERSI… */
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}
.ws-intel-stat-sub {
  font-size: 11.5px;
  line-height: 1.35;
  color: rgba(220, 230, 250, 0.55);
  white-space: normal;
}
.ws-intel-stat.is-positive .ws-intel-stat-value,
.ws-intel-stat.is-solid    .ws-intel-stat-value { color: var(--aurix-success); }
.ws-intel-stat.is-info     .ws-intel-stat-value,
.ws-intel-stat.is-moderate .ws-intel-stat-value { color: rgba(174, 196, 255, 0.98); }
.ws-intel-stat.is-warn     .ws-intel-stat-value,
.ws-intel-stat.is-elevated .ws-intel-stat-value,
.ws-intel-stat.is-high     .ws-intel-stat-value { color: #E9A857; }

/* HERO INSIGHT — single anchor card. */
.ws-intel-hero {
  position: relative;
  padding: 18px 18px 20px;
  border-radius: 16px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(74, 130, 240, 0.10) 0%, rgba(74, 130, 240, 0) 60%),
    linear-gradient(180deg, rgba(20, 22, 32, 0.94), rgba(14, 16, 24, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.02) inset,
    0 18px 36px -22px rgba(0, 0, 0, 0.5);
}
.ws-intel-hero.is-warn       { border-color: rgba(233, 168, 87, 0.30); }
.ws-intel-hero.is-moderate   { border-color: rgba(174, 196, 255, 0.28); }
.ws-intel-hero.is-info       { border-color: rgba(74, 130, 240, 0.24); }
.ws-intel-hero.is-positive   { border-color: rgba(63, 191, 127, 0.24); }
.ws-intel-hero-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(174, 196, 255, 0.75);
}
.ws-intel-hero-title {
  margin: 2px 0 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #fff;
  line-height: 1.22;
}
.ws-intel-hero-summary {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(225, 233, 255, 0.92);
  letter-spacing: 0.002em;
}
.ws-intel-hero-explanation {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(220, 230, 250, 0.7);
}
.ws-intel-hero-hint {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(174, 196, 255, 0.78);
  letter-spacing: 0.005em;
}

/* SECTION TITLES — quieter than the hero so attention flows down. */
.ws-intel-section-title {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(220, 230, 250, 0.55);
}

/* DIMENSIONS GRID — 2x2 cards with full prose WHY. */
.ws-intel-dim-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 380px) {
  .ws-intel-dim-grid { grid-template-columns: 1fr; }
}
.ws-intel-dim {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 14px 14px 15px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ws-intel-dim-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(220, 230, 250, 0.48);
}
.ws-intel-dim-state {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.2;
}
.ws-intel-dim-why {
  margin: 2px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(220, 230, 250, 0.6);
}
.ws-intel-dim.is-positive .ws-intel-dim-state { color: var(--aurix-success); }
.ws-intel-dim.is-info     .ws-intel-dim-state { color: rgba(174, 196, 255, 0.98); }
.ws-intel-dim.is-warn     .ws-intel-dim-state { color: #E9A857; }
.ws-intel-dim.is-neutral  .ws-intel-dim-state { color: rgba(220, 230, 250, 0.72); }

/* EXPLAINED SIGNALS — institutional intelligence rows. */
.ws-intel-signal-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ws-intel-signal {
  position: relative;
  padding: 14px 14px 14px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ws-intel-signal::before {
  content: '';
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 2px;
  border-radius: 2px;
  background: rgba(174, 196, 255, 0.45);
}
.ws-intel-signal.is-positive::before { background: rgba(63, 191, 127, 0.65); }
.ws-intel-signal.is-info::before     { background: rgba(174, 196, 255, 0.5); }
.ws-intel-signal.is-warn::before     { background: rgba(233, 168, 87, 0.65); }
.ws-intel-signal.is-neutral::before  { background: rgba(220, 230, 250, 0.30); }
.ws-intel-signal-cat {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(220, 230, 250, 0.48);
}
.ws-intel-signal-title {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.94);
  line-height: 1.32;
}
.ws-intel-signal-explanation {
  margin: 2px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(220, 230, 250, 0.66);
}

/* EMPTY STATE — calm placeholder. */
.ws-intel-empty {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 32px 16px;
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}
.ws-intel-empty-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: rgba(225, 233, 255, 0.94);
}
.ws-intel-empty-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(220, 230, 250, 0.6);
}

/* DESKTOP — same intelligence stack inside the right panel.
   Status strip stays 4-across at panel width, falls back to 2x2 if
   the panel is narrower than 360px (collapsible rail future). */
.aurix-copilot-panel--intel {
  gap: 18px;
  padding: 18px 16px 22px;
}
.aurix-copilot-panel--intel .ws-intel-stats--desktop {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (min-width: 1180px) {
  .aurix-copilot-panel--intel .ws-intel-stats--desktop {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.aurix-copilot-panel--intel .ws-intel-dim-grid {
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 1240px) {
  .aurix-copilot-panel--intel .ws-intel-dim-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.aurix-copilot-panel--intel .ws-intel-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ADD-FLOW-ARCH-1: workspace action row. Compact pill duo that sits
   below the risk stack on mobile — the cockpit reads as intelligence
   first, actions second. The Add Asset / Add Liquidity intents stay
   strictly separate by design and never collapse into a single CTA. */
.ws-action-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}
.ws-action-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px 0 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(225,233,255,0.92);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}
.ws-action-pill:hover {
  background: rgba(74, 130, 240,0.10);
  border-color: rgba(74, 130, 240,0.26);
  color: rgba(235,242,255,0.98);
}
.ws-action-pill:active { transform: scale(0.96); }
.ws-action-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(74, 130, 240,0.18);
  color: rgba(225,233,255,0.95);
  font-size: 12px;
  line-height: 1;
  flex-shrink: 0;
}
.ws-action-pill-label {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}
@media (max-width: 360px) {
  .ws-action-pill { font-size: 12px; padding: 0 10px 0 8px; gap: 5px; }
}

/* ── AW-6.2: Immersive desktop workstation refinement ──────────────────────
   Presentation-only refinement on top of AW-6 + AW-6.1. Compresses the
   global header (workspace tab only), turns the toolbar into a flush
   command strip, narrows the Risk Monitor and tightens cell rhythm so the
   grid genuinely behaves like the primary surface. Mobile is untouched. */

/* AURIX-APP-SHELL-STATIC-HEADER-2: the AW-6.2 immersive refinement compressed
   the global header ONLY in Workspace (padding-top:8px, padding-bottom:6px,
   margin-bottom:0). That shrank the header, so the AURIX wordmark (vertically
   centred in the header grid) visibly jumped UP when entering Workspace and
   dropped back on leaving — breaking the "static app-shell" feel.
   Removed: the header now keeps ONE vertical definition in every section — base
   .header on desktop, and the mobile .header media queries (4316 / 4394), which
   already carry the safe-area-inset-top notch guard, on mobile. The Workspace
   CONTENT below is untouched (its own top padding/gutters are unchanged); only
   the header is unified, so the wordmark, search and menu stay put. */

@media (min-width: 1024px) {
  /* Workspace surface: gutters mínimos, top padding casi nulo. */
  body.workspace-active .aurix-workspace {
    padding: 6px clamp(14px, 1.6vw, 22px) 12px;
  }

  /* Aprovecha la altura ganada por header + workspace top compactos. */
  .aurix-workspace-shell.is-desktop {
    height: calc(100vh - 56px);
    gap: 10px;
  }

  /* ── Toolbar — premium command surface.
     Subtle glass card (not the heavy "floating card" of AW-5, but no
     longer the flat strip of AW-6.2 either): tinted dark glass with
     backdrop blur, a hairline border on all sides and rounded corners
     so it reads as a deliberate command surface that belongs to the
     same shell language as the rest of the app. */
  .aurix-toolbar {
    background: rgba(13, 18, 30, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    min-height: 44px;
    padding: 6px 14px;
    gap: 14px;
  }

  /* fx indicator: slightly calmer so the surrounding controls breathe. */
  .aurix-formula-fx {
    font-size: 15px;
    opacity: 0.82;
  }

  /* Vertical divider — softer so it doesn't compete with content. */
  .aurix-formula-divider {
    background: rgba(255, 255, 255, 0.08);
    height: 20px;
  }

  /* Coord badge: slightly stronger Aurix-blue accent to read as a chip,
     not a stamp. */
  .aurix-formula-coord {
    background: rgba(74, 130, 240, 0.10);
    border-color: rgba(74, 130, 240, 0.26);
    padding: 5px 11px;
    font-size: 12.5px;
  }
  .aurix-formula-coord.is-empty {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.06);
  }

  /* Formula input: same monospace + tabular nums, refined focus state. */
  .aurix-formula-value {
    font-size: 14px;
  }
  .aurix-formula-value.is-empty { opacity: 0.55; }
  .aurix-formula-value.is-editable:focus,
  .aurix-formula-value.is-editing {
    background: rgba(74, 130, 240, 0.08);
    box-shadow: inset 0 0 0 1px rgba(74, 130, 240, 0.18);
  }

  /* Sheet name: quieter eyebrow on the right. */
  .aurix-sheet-name {
    font-size: 10.5px;
    opacity: 0.62;
    letter-spacing: 0.16em;
  }

  /* ── Workspace body: same Aurix glass language as the toolbar so the
     two surfaces read as one panel. */
  .aurix-workspace-body {
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 12px;
  }

  .aurix-grid-panel {
    background: rgba(13, 18, 30, 0.40);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .aurix-grid-panel:focus-visible {
    border-color: rgba(74, 130, 240, 0.40);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.02),
      0 0 0 3px rgba(74, 130, 240, 0.08);
  }

  /* Quieter grid rhythm — lower the line noise so values dominate. */
  .aurix-grid-corner,
  .aurix-grid-col-header {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0)),
      rgba(13, 18, 30, 0.55);
    border-bottom-color: rgba(255, 255, 255, 0.07);
  }
  .aurix-grid-col-header {
    height: 34px;
    padding: 7px 10px;
    opacity: 0.66;
    font-size: 12px;
    letter-spacing: 0.12em;
    border-right-color: rgba(255, 255, 255, 0.03);
  }
  .aurix-grid-row-header {
    background: rgba(13, 18, 30, 0.55);
    min-height: 40px;
    font-size: 11.5px;
    opacity: 0.58;
    border-right-color: rgba(255, 255, 255, 0.05);
    border-bottom-color: rgba(255, 255, 255, 0.025);
  }
  .aurix-grid-corner { height: 34px; }

  /* Cells: keep desktop 7/12 padding (aligned with .aurix-cell-edit),
     soften separators so the grid reads quieter, micro letter-spacing. */
  .aurix-grid-cell {
    padding: 7px 12px;
    min-height: 40px;
    font-size: 13.5px;
    letter-spacing: 0.003em;
    border-right-color: rgba(255, 255, 255, 0.022);
    border-bottom-color: rgba(255, 255, 255, 0.025);
  }
  .aurix-grid-cell:hover {
    background: rgba(255, 255, 255, 0.030);
  }
  .aurix-grid-cell.is-formula {
    background: rgba(74, 130, 240, 0.035);
  }

  /* Active cell: same outline contract as before (engine relies on it),
     plus a subtle outer glow for premium feel. */
  .aurix-grid-cell.is-active {
    background: rgba(74, 130, 240, 0.14);
    box-shadow:
      inset 0 0 0 1px rgba(74, 130, 240, 0.22),
      0 0 0 3px rgba(74, 130, 240, 0.10),
      0 0 14px rgba(74, 130, 240, 0.16);
  }

  /* ── Risk Monitor: matched glass surface so the right rail belongs
     to the same product as the grid. Slightly more breathable. */
  .aurix-copilot-panel {
    padding: 16px 14px 18px;
    gap: 18px;
    border-radius: 12px;
    background: rgba(13, 18, 30, 0.40);
    border-color: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .aurix-copilot-header {
    padding-bottom: 12px;
    gap: 4px;
    border-bottom-color: rgba(255, 255, 255, 0.05);
  }
  .aurix-copilot-eyebrow {
    font-size: 11px;
    letter-spacing: 0.18em;
    color: rgba(235, 243, 255, 0.92);
  }
  .aurix-copilot-subtitle {
    font-size: 9.5px;
    color: rgba(220, 230, 250, 0.50);
  }
  .aurix-risk-body { gap: 16px; }
  .aurix-risk-group { gap: 7px; }
  .aurix-risk-list { gap: 4px; }
  .aurix-risk-signal {
    font-size: 12.5px;
    line-height: 1.45;
    padding: 5px 6px;
    margin: 0 -6px;
    border-radius: 6px;
    transition: background 0.18s ease;
  }
  .aurix-risk-signal:hover {
    background: rgba(255, 255, 255, 0.025);
  }
  .aurix-risk-dot {
    margin-top: 7px;
  }
}

/* ── AW-9.1: Formula autocomplete dropdown ─────────────────────────────────
   Premium dark surface, terminal-finance feel. Anchored absolutely to the
   workspace container; positioned by JS (left/top in inline style). Mobile
   is gated below — autocomplete is desktop-only in AW-9.1. */

.aurix-formula-autocomplete {
  position: absolute;
  z-index: 200;
  background: rgba(13, 17, 28, 0.96);
  border: 1px solid rgba(74, 130, 240, 0.18);
  border-radius: 8px;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.50),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  padding: 4px;
  min-width: 220px;
  max-height: 280px;
  overflow-y: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.aurix-formula-autocomplete-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 5px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  color: var(--text);
  line-height: 1.3;
  transition: background 80ms ease-out;
}

.aurix-formula-autocomplete-item:hover {
  background: rgba(74, 130, 240, 0.08);
}

.aurix-formula-autocomplete-item.is-selected {
  background: rgba(74, 130, 240, 0.16);
  outline: 1px solid rgba(74, 130, 240, 0.30);
}

.aurix-formula-autocomplete-label {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.aurix-formula-autocomplete-kind {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.65;
  font-weight: var(--font-weight-semibold);
}

.aurix-formula-autocomplete-item.is-financial .aurix-formula-autocomplete-kind {
  color: rgba(74, 130, 240, 0.85);
  opacity: 0.90;
}

/* AW-9.1: mobile gate. Mobile is excluded by JS too, but this is the visual
   safety net in case anything ever gets injected outside desktop. */
@media (max-width: 1023.98px) {
  .aurix-formula-autocomplete { display: none !important; }
}

/* ── AW-9.2: Inline formula validation pill ───────────────────────────── */
.aurix-formula-validation {
  position: absolute;
  z-index: 199;
  background: rgba(80, 14, 14, 0.92);
  border: 1px solid rgba(224, 90, 90, 0.35);
  color: rgba(255, 195, 195, 0.95);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em;
  font-weight: var(--font-weight-medium);
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.40),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  pointer-events: none;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  white-space: nowrap;
}

@media (max-width: 1023.98px) {
  .aurix-formula-validation { display: none !important; }
}

/* NAV-2: premium desktop product shell (≥1024px).
   Mobile is fully preserved — every rule lives inside the media query and
   .header-tabs stays display:none by default. The base header grid is
   (1fr auto 1fr); desktop reassigns columns so brand → left, tabs →
   center, utility → right, sharing the same horizontal axis as .app
   (max-width 1080px, padding 0 var(--space-6)). */
.header-tabs {
  display: none;
}

@media (min-width: 1024px) {
  /* ── Shell: refined glass header, subtle depth, single hairline rule */
  .header {
    padding-top: var(--space-4);
    padding-bottom: var(--space-3);
    background: rgba(11, 15, 26, 0.62);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .header.header--scrolled {
    background: rgba(11, 15, 26, 0.9);
    border-bottom-color: rgba(255, 255, 255, 0.07);
    /* AURIX-BRAND-PREMIUM-HEADER-2 (B2): consistent premium glass with the
       base scrolled state — inner light + faint blue hairline + soft depth. */
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.05),
      0 1px 0 rgba(74, 130, 240, 0.05),
      0 12px 34px -14px rgba(0, 0, 0, 0.5);
  }

  /* ── Grid column reassignment for the three zones.
     Brand gets a 20px optical inset so AURIX aligns with the
     internal content edge of the cards (which carry ~20px padding),
     not just with the cards' bounding-box edge. Utility zone gets a
     symmetric 20px inset on the right plus a 40px gap so Search and
     Settings read as two intentional controls with real breathing. */
  .header-left  { justify-self: start; grid-column: 1; padding-left: 20px; }
  .header-right { grid-column: 3; padding-right: 20px; gap: 40px; }

  /* ── Branding: tighter tracking (0.18em) and an even softer
     drop-shadow so AURIX reads as a confident flagship mark, not
     a landing-page banner. Same semibold weight, calmer aura. */
  .logo-block .logo-aurix {
    font-size: 24px;
    letter-spacing: 0.18em;
    transform: none;
    filter: drop-shadow(0 1px 8px rgba(74, 130, 240, 0.10)) drop-shadow(0 0 20px rgba(74, 130, 240, 0.06));
  }

  /* ── Tabs: flagship primary nav.
     Single shared active state — same underline geometry for every
     tab (including Workspace, whose header otherwise compresses).
     bottom:-3px keeps the indicator inside the header's padding even
     when body.workspace-active shortens .header padding-bottom to 6px. */
  .header-tabs {
    display: flex;
    align-items: center;
    gap: 16px;
    grid-column: 2;
    justify-self: center;
    margin: 0;
  }
  .header-tab {
    position: relative;
    background: transparent;
    border: 0;
    color: rgba(220, 230, 250, 0.68);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.015em;
    line-height: 1;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.18s ease, background-color 0.18s ease;
  }
  .header-tab:hover {
    /* AURIX-HEADER-NAV-ACTIVE-BACKGROUND-1: Aurix-tinted hover via TEXT only —
       no background pill, so the header stays clean and integrated with the
       black surface (was a faint blue fill). */
    color: rgba(235, 243, 255, 0.96);
  }
  .header-tab.active {
    /* AURIX-HEADER-NAV-ACTIVE-BACKGROUND-1: removed the bluish pill/rectangle
       behind the active tab. The active state now reads through bright text +
       the bottom blue underline glow (::after) only — no background surface. */
    color: #fff;
    font-weight: 600;
  }
  .header-tab.active::after {
    content: '';
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: -3px;
    height: 1.5px;
    background: linear-gradient(90deg,
      rgba(74, 130, 240, 0)   0%,
      var(--aurix-blue-light) 50%,
      rgba(74, 130, 240, 0)   100%);
    box-shadow: 0 0 6px rgba(74, 130, 240, 0.40);
    border-radius: 1px;
  }

  /* ── Search — premium discover action.
     Stronger Aurix-blue border, brighter icon stroke and a faint
     blue micro-glow at rest so the control reads as "search assets"
     at a glance. Hover keeps the focus-ring halo; keyboard focus
     gets the same ring so the discoverability is consistent. */
  .header-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    /* AURIX-BRAND-PREMIUM-HEADER-2 (B4): calmer, premium glass — same Aurix
       language as the settings control (was a louder, brighter blue box). */
    background: rgba(74, 130, 240, 0.07);
    border: 1px solid rgba(74, 130, 240, 0.22);
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
  }
  .header-search:hover,
  .header-search:focus-visible {
    background: rgba(74, 130, 240, 0.12);
    border-color: rgba(74, 130, 240, 0.4);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.04),
      0 0 0 4px rgba(74, 130, 240, 0.08);
    outline: none;
  }
  .header-search svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: rgba(220, 234, 255, 1);
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.18s ease;
  }
  .header-search:hover svg,
  .header-search:focus-visible svg { stroke: var(--aurix-blue-light); }

  /* ── Settings utility — restores the 3-line shell utility (hamburger)
     so it reads as preferences/settings, not as a profile/account
     avatar. Keeps the mobile flex-column geometry and the X-on-open
     animation untouched; only colors are refined for desktop. */
  .menu-toggle {
    margin-top: 0;
    /* AURIX-BRAND-PREMIUM-HEADER-2 (B4): unified with Search — same subtle
       Aurix glass language so the two controls read as one system. */
    background: rgba(74, 130, 240, 0.05);
    border-color: rgba(74, 130, 240, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }
  .menu-toggle:hover {
    background: rgba(74, 130, 240, 0.1);
    border-color: rgba(74, 130, 240, 0.38);
  }
  .menu-toggle.open {
    border-color: rgba(74, 130, 240, 0.32);
    background: rgba(74, 130, 240, 0.06);
  }
  .menu-toggle-bar {
    background: rgba(220, 230, 250, 0.62);
  }
  .menu-toggle:hover .menu-toggle-bar {
    background: rgba(235, 243, 255, 0.92);
  }

  /* ── Dashboard CTAs: stronger type, flat surface, no neon halo */
  .btn-summary-action {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 9px 16px;
    border-radius: 8px;
  }
  .btn-primary,
  .btn-secondary {
    box-shadow: none;
    font-weight: 500;
    border-color: rgba(74, 130, 240, 0.20);
    background: rgba(74, 130, 240, 0.06);
  }
  .btn-primary:hover,
  .btn-secondary:hover {
    transform: none;
    background: rgba(74, 130, 240, 0.12);
    border-color: rgba(74, 130, 240, 0.38);
  }

  /* ── Mobile bottom nav hidden on desktop */
  .bottom-nav { display: none; }
}

/* ── MC-11A: premium Market table polish ─────────────────────────────────
   Visual-only upgrade to the shared .market-row used by Watchlist / All /
   Crypto / Stocks / Indices / Commodities (plus the live ETF list inside
   the merged Funds & ETFs tab). No layout grid changes — only typography,
   spacing, badges, hover, and the watchlist star polish. Existing JS
   click handlers (.watchlist-btn, .market-row[data-symbol]) untouched. */

/* Asset cell typography hierarchy */
.asset-symbol-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.asset-symbol {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.005em;
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.asset-name {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: rgba(255,255,255,0.50);
  margin-top: 2px;
}
.asset-icon {
  /* MC-11A: tighter circle, slightly larger ring, subtle inner contrast */
  width: 34px;
  height: 34px;
  background: rgba(74, 130, 240,0.10);
  border: 1px solid rgba(74, 130, 240,0.18);
  color: rgba(255,255,255,0.88);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
}

/* Compact type badge — shares pill language with MC-10 funds cards */
.market-row-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.5;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.70);
  flex: 0 0 auto;
  font-family: inherit;
}
.market-row-badge.is-crypto    { color: rgba(247,160,90,0.95);  border-color: rgba(247,160,90,0.30); }
.market-row-badge.is-stock     { color: rgba(74, 130, 240,0.95); border-color: rgba(74, 130, 240,0.30); }
.market-row-badge.is-etf       { color: rgba(74, 130, 240,0.95); border-color: rgba(74, 130, 240,0.30); }
.market-row-badge.is-fund      { color: rgba(255,205,150,0.95); border-color: rgba(255,205,150,0.30); }
.market-row-badge.is-index     { color: rgba(160,220,170,0.95); border-color: rgba(160,220,170,0.30); }
.market-row-badge.is-commodity { color: rgba(255,180,120,0.95); border-color: rgba(255,180,120,0.30); }
.market-row-badge.is-metal     { color: rgba(255,210,100,0.95); border-color: rgba(255,210,100,0.30); }

/* Price + change typography */
.col-price {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.col-change {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
/* Directional indicator via pseudo-elements — no extra DOM needed. */
.col-change.is-up::before {
  content: '▲ ';
  font-size: 8.5px;
  margin-right: 3px;
  vertical-align: 0.06em;
}
.col-change.is-down::before {
  content: '▼ ';
  font-size: 8.5px;
  margin-right: 3px;
  vertical-align: 0.06em;
}

/* Sparkline consistent sizing & subtle opacity (data unchanged).
   MARKET-1A: bumped 28→32px so the V2 line breathes — the column was
   feeling compressed against the price/change/star cells. The legacy
   SVG fallback also uses 32px so flag-off renders identically. */
.col-chart {
  opacity: 0.85;
  min-height: 32px;
  padding-left: 6px;
}
.col-chart svg {
  height: 32px;
  width: auto;
  max-width: 100%;
}

/* Watchlist star polish */
.watchlist-btn {
  font-size: 17px;
  color: rgba(255,255,255,0.28);
  padding: 4px 6px;
  border-radius: 8px;
  transition: color 140ms ease, background 140ms ease, transform 140ms ease;
}
.watchlist-btn:hover {
  color: rgba(255,215,0,0.85);
  background: rgba(255,215,0,0.06);
}
.watchlist-btn.active {
  color: #FFD700;
}
.watchlist-btn:active { transform: scale(0.92); }

/* Smaller screens: keep table compact but readable */
@media (max-width: 560px) {
  .market-row {
    padding: 14px 8px;
    margin: 0 -8px;
    grid-template-columns: minmax(0, 1.8fr) 0.9fr 0.9fr 0.9fr 32px;
    gap: 6px;
  }
  .asset-icon { width: 30px; height: 30px; font-size: 12px; }
  .asset-symbol { font-size: 13.5px; }
  .asset-name   { font-size: 11px; }
  .col-price    { font-size: 13px; }
  .col-change   { font-size: 12px; }
  .col-chart svg { height: 22px; }
  .market-row-badge {
    font-size: 8.5px;
    padding: 1px 5px;
  }
}

/* ── MC-11C.1: mobile Market hardening ──────────────────────────────────
   Mobile-only CSS. Fixes horizontal page drift, market-row overlap with
   the type badge, clipped tabs at viewport edges, and discovery cards
   dominating the live list. Desktop layout untouched. */

/* The discovery "Ver más" affordance is mobile-only — fully hidden on
   anything wider so the desktop grid keeps showing every card. */
.funds-show-more { display: none; }

@media (max-width: 560px) {
  /* (1) Hard-clamp page horizontals so no child can force the viewport
     wider than the screen. body/html already have overflow-x:hidden;
     this layer adds the major market containers as a belt-and-braces.
     width:100% (not 100vw) on the inner containers avoids the iOS
     scrollbar-gutter overshoot that would otherwise reintroduce
     sideways drift when the soft keyboard opens. */
  html, body, #app { max-width: 100vw; overflow-x: hidden; }
  .market-screen,
  .market-body,
  #marketList,
  .market-section {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  /* Horizontal scrollers (top tabs, category chips) stay scrollable
     internally but their overscroll must not bubble up and rock the
     page sideways when the keyboard slides in. contain:paint isolates
     repaints to the scroller bounds. */
  .market-tabs,
  .funds-cats {
    max-width: 100%;
    overscroll-behavior-x: contain;
    contain: paint;
  }

  /* (2) Row layout: 3-column grid — asset cell on the left (icon + name
     + type badge stacked), price/change stacked on the right, star on
     the far right. The badge stays inside col-asset so it can never
     overlap col-price. col-chart hides on mobile (carries no info value
     at this width and the sparkline becomes a smudge anyway). */
  .market-row {
    grid-template-columns: minmax(0, 1fr) auto 36px;
    grid-template-rows: auto auto;
    gap: 2px 12px;
    align-items: center;
    padding: 12px 8px;
    margin: 0 -8px;
    height: auto;
    min-height: 60px;
  }
  .market-row .col-asset  { grid-column: 1 / 2; grid-row: 1 / 3; min-width: 0; }
  .market-row .col-price  { grid-column: 2 / 3; grid-row: 1 / 2; justify-self: end; }
  .market-row .col-change { grid-column: 2 / 3; grid-row: 2 / 3; justify-self: end; }
  .market-row .col-action { grid-column: 3 / 4; grid-row: 1 / 3; align-self: center; justify-self: end; }
  .market-row .col-chart  { display: none; }

  /* Long asset names truncate cleanly instead of wrapping into the
     price/star area. The symbol row keeps its inline badge tightly. */
  .market-row .asset-text { min-width: 0; flex: 1 1 auto; }
  .market-row .asset-symbol-row { flex-wrap: nowrap; gap: 5px; }
  .market-row .asset-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  /* (3) Top market-tabs: ensure inner padding ends inside the scroller
     so the first and last pills are fully reachable. Soft fade on both
     edges signals "scroll for more" without clipping the active tab.
     MOBILE PASS 1A: bumped left/right padding to 22px and shifted the
     mask inwards so the first tab ("Seguimiento") is never partially
     clipped by the fade gradient, and scrollIntoView({inline:'center'})
     has enough scroll-padding to keep the active pill fully visible. */
  .market-tabs {
    padding-left: 22px;
    padding-right: 22px;
    scroll-padding-inline: 22px;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
  }
  .market-tab { padding: 7px 13px; font-size: 12.5px; }

  /* (4) Discovery cards: collapsed state shows only the first 2 cards
     so the live monitoring list reaches the user immediately. The
     state is toggled by JS via the .is-collapsed class on .funds-
     discover. Desktop never sees this rule. */
  .funds-discover.is-collapsed .funds-card:nth-child(n+3) { display: none; }
  .funds-discover.is-collapsed .funds-show-more {
    display: inline-flex;
    align-self: center;
    margin-top: 4px;
    padding: 8px 16px;
    border: 1px solid rgba(74, 130, 240,0.30);
    border-radius: 999px;
    background: rgba(74, 130, 240,0.08);
    color: rgba(74, 130, 240,0.95);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
  }
  .funds-discover.is-collapsed .funds-show-more:active { transform: scale(0.97); }

  /* (5) Category chips: keep horizontally scrollable, but compact the
     pill geometry so more chips peek without forcing the row wider. */
  .funds-cats { padding-right: 16px; }
  .funds-cat  { padding: 6px 11px; font-size: 11.5px; }

  /* Tighter discovery container so cards don't push the live list far
     down — paired with the 2-card cap above. */
  .funds-discover { gap: 8px; padding: 2px 0 8px; }
  .funds-grid { gap: 8px; }
  .funds-card { padding: 11px 12px; min-height: 0; }
}

/* ── MC-11C.3: mobile Market density cleanup ────────────────────────────
   Mobile-only: drop the redundant "Markets" hero (bottom nav already
   says where the user is), promote search as the primary top element
   with the desktop blue-accent visual language, and compress vertical
   gaps so the live monitoring list reaches the user sooner. */
@media (max-width: 560px) {
  /* (1) Hide the page header entirely. The bottom nav signals the
     active section and the search bar carries the first interaction. */
  .market-screen .market-header { display: none; }

  /* (2) Search becomes the top element with a blue-accent premium
     style mirroring the desktop treatment: lupa visible, compact 40px
     height, glass background, focus ring tinted Aurix blue.
     font-size sits at 16px — below this iOS Safari auto-zooms the
     viewport on focus, which then drags the layout sideways and
     clips the field. 16px keeps the page stable when the keyboard
     opens. width/box-sizing/min-width locked so the focused input
     can never exceed the viewport. */
  .market-search-wrap {
    position: relative;
    padding: 0 12px;
    margin: 10px 0 6px;
    justify-content: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
  }
  .market-search-wrap input {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    height: 40px;
    padding: 0 14px 0 38px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(13,18,30,0.55);
    color: rgba(235,243,255,0.95);
    font-size: 16px;
    letter-spacing: 0.01em;
    opacity: 1;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.22s ease;
  }
  .market-search-wrap input::placeholder { color: rgba(190,208,234,0.62); font-size: 14px; }
  .market-search-wrap input:focus {
    outline: none;
    font-size: 16px;
    border-color: rgba(74,130,240,0.45);
    background: rgba(13,18,30,0.75);
    box-shadow: 0 0 0 4px rgba(74,130,240,0.08);
  }
  .market-search-icon {
    display: block;
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    fill: none;
    stroke: rgba(204,224,255,0.72);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
    transition: stroke 0.18s ease;
  }
  .market-search-wrap:focus-within .market-search-icon { stroke: rgba(74, 130, 240,0.95); }

  /* (4) Compress vertical spacing between the stacked Market blocks.
     Each gap is tightened by ~30% — premium-compact, not cramped. */
  .market-screen { padding: var(--space-2) 12px 80px; }
  .market-tabs   { margin: 4px 0 4px; padding-top: 6px; padding-bottom: 4px; }
  .market-body   { margin-top: 0; }
  .market-section,
  #marketList    { margin-top: 8px; }
  .funds-discover { gap: 6px; padding: 0 0 6px; }
  .funds-cats     { padding: 0 16px 4px 2px; }
  .funds-grid     { gap: 6px; }
  .market-section-header { padding: 6px 0 2px; }
}

/* ── MC-11C.4: mobile chip hierarchy + clipping fix ──────────────────────
   Mobile-only. Two goals:
   • Vertical clipping — the secondary chip row had only 4px bottom
     padding, so the active chip's 1px border was cut off when its
     bottom edge met the container's overflow boundary. Restore enough
     padding above and below the chips that no border ever touches.
   • Visual hierarchy — primary market tabs (section nav) and secondary
     discovery chips (category filter inside a section) currently read
     as peers. Re-tier them: primary stays bold pill, secondary becomes
     smaller, lighter, less saturated, thinner-bordered, and uses a
     softer 8px radius so the eye separates "what page am I on" from
     "what slice of this page am I filtering". */
@media (max-width: 560px) {
  /* Primary section-nav tabs: keep them the loudest pill on the screen */
  .market-tabs { padding-top: 8px; padding-bottom: 6px; }
  .market-tab {
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 999px;
    line-height: 1.2;
  }
  .market-tab.active { font-weight: 700; }

  /* Secondary discovery chip container: enough vertical air so the
     active border never clips against the scroll-area edge. Horizontal
     scrolling preserved (overflow-x: auto inherited from the base). */
  .funds-cats {
    padding: 6px 18px 8px 4px;
    margin: -2px -2px 0;
    overflow-y: visible;
  }
  /* Secondary discovery chips: demoted — smaller, lighter, softer
     radius, thinner border. Active state still readable but clearly
     less assertive than .market-tab.active. */
  .funds-cat {
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.015em;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.025);
    color: rgba(255,255,255,0.62);
    line-height: 1.35;
  }
  .funds-cat.active {
    border-color: rgba(74, 130, 240,0.30);
    background: rgba(74, 130, 240,0.10);
    color: rgba(225,232,255,0.95);
    font-weight: 600;
  }
}

/* ── MW-2: Dashboard mobile unified with Market / Workspace ──────────────
   Mobile-only. Brings the Dashboard's gutter, card geometry, vertical
   rhythm, chart container and safe-area bottom padding into line with
   the language we shipped in MC-11C.3 and MW-1. No HTML/JS changes —
   pure CSS overrides on top of the existing 640px rules. */
@media (max-width: 560px) {
  /* Horizontal gutter standardised to 12px so Dashboard / Market /
     Workspace share the same screen edges. Safe-area aware bottom
     padding stops content from scrolling under the fixed bottom nav
     when the iPhone home indicator is present (env() resolves to 0
     on devices without it, so desktop is unaffected). */
  .app  { padding: 0 12px calc(60px + env(safe-area-inset-bottom) + 8px); }
  main  { padding-bottom: 0; }

  /* No screen-level "Dashboard" title is rendered — matches Market and
     Workspace mobile (the bottom nav already signals the active tab).
     Defensive: hide any future markup carrying this class. */
  .dashboard-page-title { display: none; }

  /* Defensive clamp — no Dashboard child may force the viewport wider
     than the screen. html/body already have overflow-x:hidden. */
  .app, main, .dashboard-top, .hero-card, .portfolio-slider-card,
  .assets-section { max-width: 100%; }

  /* Top spacing compressed to the same beat as the Market/Workspace
     mobile shells. SPEC MOBILE-ABOVE-THE-FOLD-COMPRESSION — top margin 12→8 (#1
     v550) → 6px (#2) to lift the column a further notch on small phones while
     keeping a clean premium gap (header margin-bottom 4 + this 6 = 10px). */
  .dashboard-top { margin-top: 6px; margin-bottom: var(--space-2); }

  /* Hero card: same radius/border treatment as the Workspace summary
     cards and the Market discovery cards. */
  .hero-card {
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.07);
    overflow: hidden;
  }
  .hero-left {
    padding: 14px 14px var(--space-1) !important;
  }
  .hero-right {
    padding: var(--space-2) 14px 14px;
  }

  /* Mobile slider card aligned with the hero card: same 14px radius,
     same 12px horizontal padding, gentle 8px outer margin so the
     vertical rhythm with the hero card above matches Workspace's
     summary grid spacing. */
  .portfolio-slider-card {
    margin: 8px 0;
    /* Block 4: trim horizontal padding (12→8px) so the curve gains real width
       on phones. Header + curve shift in tandem, still a clean legible inset
       (priority #12 — clarity not sacrificed). Pairs with the narrower axis font
       and the removed floating label to make the curve the protagonist (#13). */
    padding: 12px 8px 10px !important;
    border-radius: 14px;
    border: 1px solid rgba(74,130,240,0.16);   /* AURIX-MOBILE-HERO-V1: keep the electric border on small phones */
  }

  /* Chart container: fit viewport, never clip horizontally. width:100%
     overrides any inline canvas width Chart.js writes during reflow. */
  .chart-wrap, .mobile-chart-wrap {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
  .chart-wrap canvas, .mobile-chart-wrap canvas {
    max-width: 100%;
  }

  /* Section header ("Mis activos") tightened so the assets list rises
     closer to the slider card, matching the Market list rhythm. */
  .section-header { margin-bottom: var(--space-2); }
  .assets-section { margin-top: var(--space-3); }
  .assets-list   { gap: 6px; }
}

/* ── GLOBAL-SEARCH-1: Global Search overlay ──────────────────────────────
   A separate, premium command-palette surface for "find any asset and
   inspect it". Does NOT host the Add Asset / Liquidity flow — that
   stays inside #modalOverlay. Desktop: centered card; mobile: near
   full-screen. Backdrop is dim + blur so the active screen stays
   contextually visible. */
.gs-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(4, 8, 16, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: max(8vh, 24px) 16px 24px;
  animation: gsFadeIn 0.16s ease-out;
}
.gs-overlay[hidden] { display: none; }
body.gs-open { overflow: hidden; }

@keyframes gsFadeIn { from { opacity: 0; } to { opacity: 1; } }

.gs-shell {
  position: relative;
  width: 100%;
  max-width: 820px;
  background: linear-gradient(180deg, rgba(15, 22, 40, 0.96), rgba(11, 16, 28, 0.96));
  border: 1px solid rgba(74, 130, 240, 0.16);
  border-radius: 20px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(74, 130, 240, 0.04) inset,
    0 0 40px -8px rgba(74, 130, 240, 0.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 84vh;
}

/* Close button floats top-right above the hero so the title can claim
   horizontal space without competing for a header slot. */
.gs-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(220, 230, 250, 0.55);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.gs-close:hover  { color: #fff; background: rgba(255, 255, 255, 0.08); }
.gs-close:active { transform: scale(0.92); }

/* Hero: command-center title + subtitle + premium search input. */
.gs-hero {
  padding: 28px 30px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.gs-hero-title {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgba(247, 251, 255, 0.98);
  line-height: 1.15;
}
.gs-hero-sub {
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(220, 230, 250, 0.50);
  letter-spacing: 0.005em;
  max-width: 480px;
}

.gs-input-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  height: 52px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(8, 12, 22, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02),
              0 1px 2px rgba(0, 0, 0, 0.25);
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.22s ease;
  cursor: text;
}
.gs-input-wrap:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(8, 12, 22, 0.72);
}
.gs-input-wrap:focus-within {
  border-color: rgba(74, 130, 240, 0.55);
  background: rgba(8, 12, 22, 0.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03),
              0 0 0 4px rgba(74, 130, 240, 0.14),
              0 4px 14px rgba(74, 130, 240, 0.10);
}
.gs-icon {
  width: 18px; height: 18px;
  fill: none;
  stroke: rgba(204, 224, 255, 0.70);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
  transition: stroke 0.18s ease;
}
.gs-input-wrap:focus-within .gs-icon { stroke: rgba(74, 130, 240, 0.95); }
#globalSearchInput {
  flex: 1 1 auto;
  background: transparent;
  border: none;
  outline: none;
  color: rgba(238, 245, 255, 0.97);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.005em;
  height: 100%;
}
#globalSearchInput::placeholder {
  color: rgba(190, 208, 234, 0.56);
  font-weight: 400;
}

.gs-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 0 12px;
}

/* Empty-state sections — "Populares" + "Recientes". Consistent
   horizontal padding matching the hero so labels line up cleanly. */
.gs-section {
  padding: 18px 30px 0;
}
.gs-section + .gs-section { padding-top: 14px; }
.gs-section[hidden] { display: none; }
.gs-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(220, 230, 250, 0.38);
  margin-bottom: 12px;
}
.gs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.gs-chip.is-recent {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  color: rgba(220, 230, 250, 0.72);
}

.gs-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.gs-results[hidden] { display: none; }

/* ── GLOBAL-SEARCH-2: empty state container + chip styles ── */
.gs-empty {
  display: flex;
  flex-direction: column;
  padding: 4px 0 14px;
}
.gs-empty[hidden] { display: none; }
.gs-chip {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.028);
  color: rgba(225, 233, 250, 0.78);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.015em;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease, transform 0.14s ease, box-shadow 0.16s ease;
}
.gs-chip:hover {
  background: rgba(255,255,255,0.07);
  color: #fff;
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.gs-chip:active { transform: scale(0.96); }

.gs-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px 16px;
  font-size: 13px;
  color: rgba(220, 230, 250, 0.62);
}
.gs-loading[hidden] { display: none; }
.gs-loading-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(74, 130, 240, 0.85);
  animation: gsLoadingPulse 1.0s ease-in-out infinite;
}
@keyframes gsLoadingPulse {
  0%, 100% { opacity: 0.35; transform: scale(0.9); }
  50%      { opacity: 1;    transform: scale(1.1); }
}

.gs-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.035);
  transition: background 0.14s ease;
}
.gs-row:hover     { background: rgba(255, 255, 255, 0.025); }
.gs-row:last-child { border-bottom: 0; }

.gs-row-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.gs-row-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gs-row-ticker {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.005em;
}
.gs-row-name {
  font-size: 12.5px;
  color: rgba(220, 230, 250, 0.58);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gs-row-badge {
  display: inline-flex;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.5;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.70);
  text-transform: uppercase;
  flex: 0 0 auto;
}
.gs-row-badge.is-crypto    { color: rgba(247,160,90,0.95);  border-color: rgba(247,160,90,0.30); }
.gs-row-badge.is-stock     { color: rgba(74, 130, 240,0.95); border-color: rgba(74, 130, 240,0.30); }
.gs-row-badge.is-etf       { color: rgba(74, 130, 240,0.95); border-color: rgba(74, 130, 240,0.30); }
.gs-row-badge.is-fund      { color: rgba(255,205,150,0.95); border-color: rgba(255,205,150,0.30); }
.gs-row-badge.is-index     { color: rgba(160,220,170,0.95); border-color: rgba(160,220,170,0.30); }
.gs-row-badge.is-commodity { color: rgba(255,180,120,0.95); border-color: rgba(255,180,120,0.30); }
.gs-row-badge.is-metal     { color: rgba(255,210,100,0.95); border-color: rgba(255,210,100,0.30); }

.gs-row-meta {
  font-size: 12px;
  font-weight: 500;
  color: rgba(225, 233, 250, 0.62);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.gs-row-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.gs-row-btn {
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: rgba(220, 230, 250, 0.88);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, box-shadow 0.18s ease, transform 0.14s ease;
}
.gs-row-btn:hover  { background: rgba(255,255,255,0.08); color: #fff; }
.gs-row-btn:active { transform: scale(0.96); }
.gs-row-btn.is-primary {
  border-color: rgba(74, 130, 240,0.45);
  background: rgba(74, 130, 240,0.14);
  color: rgba(232,238,255,0.98);
  box-shadow: 0 1px 2px rgba(74,130,240,0.18),
              inset 0 1px 0 rgba(255,255,255,0.06);
}
.gs-row-btn.is-primary:hover {
  background: rgba(74, 130, 240,0.22);
  border-color: rgba(74, 130, 240,0.60);
  box-shadow: 0 2px 10px rgba(74,130,240,0.28),
              inset 0 1px 0 rgba(255,255,255,0.08);
}
/* SEARCH-1: secondary glass action for "+ Añadir". Quieter than the
   primary blue "Ver gráfico" — outline-style, navy-tinted on hover. */
.gs-row-btn.is-secondary {
  border-color: rgba(74, 130, 240,0.18);
  background: rgba(20, 30, 56, 0.40);
  color: rgba(220, 230, 250, 0.85);
}
.gs-row-btn.is-secondary:hover {
  background: rgba(74, 130, 240,0.10);
  border-color: rgba(74, 130, 240,0.36);
  color: #fff;
}

.gs-hint {
  padding: 24px 24px 28px;
  margin: 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(220, 230, 250, 0.55);
}
.gs-hint[hidden] { display: none; }

@media (max-width: 768px) {
  /* GLOBAL-SEARCH-2B: premium command-sheet — a centred glass card
     floating over the dim backdrop instead of a raw full-screen
     panel. The shell's own padding owns the inner gutter, so
     content never touches the viewport edge. Backdrop stays full-
     screen; overlay scrolls if the sheet plus chrome exceeds the
     viewport. */
  .gs-overlay {
    align-items: flex-start;
    justify-content: center;
    padding: 0;
    background: rgba(4, 8, 16, 0.74);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .gs-shell {
    width: calc(100vw - 24px);
    max-width: 520px;
    height: auto;
    max-height: calc(100vh - 96px);
    max-height: calc(100dvh - 96px); /* BLOQUE-1.4 — dvh progressive enhancement; vh kept as fallback */
    margin: max(72px, calc(env(safe-area-inset-top) + 56px)) auto 24px;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(74, 130, 240, 0.16);
    background: linear-gradient(180deg, rgba(15,22,40,0.98), rgba(11,16,28,0.98));
    box-shadow: 0 30px 80px rgba(0,0,0,0.55),
                0 0 0 1px rgba(74, 130, 240,0.04) inset,
                0 0 40px -8px rgba(74,130,240,0.18);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* Close button sits cleanly inside the sheet's padding. */
  .gs-close {
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    font-size: 15px;
  }

  /* Hero loses its outer padding — the shell already owns the 18px
     gutter. Title trails right so it never overlaps the close button. */
  .gs-hero {
    padding: 6px 0 14px;
    margin: 0 0 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
  }
  .gs-hero-title {
    margin: 0 40px 6px 0;
    font-size: 22px;
    letter-spacing: -0.02em;
    line-height: 1.18;
  }
  .gs-hero-sub {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.5;
    max-width: 100%;
  }
  .gs-input-wrap {
    height: 50px;
    padding: 0 14px;
    gap: 10px;
    border-radius: 12px;
  }
  .gs-icon { width: 18px; height: 18px; }
  #globalSearchInput { font-size: 16px; }    /* iOS no-zoom threshold */

  /* Body scrolls inside the sheet — premium card geometry is
     preserved no matter how many results land. */
  .gs-body {
    padding: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: 55vh;
  }
  .gs-section { padding: 14px 0 0; }
  .gs-section + .gs-section { padding-top: 12px; }
  .gs-section-label {
    margin-bottom: 10px;
    font-size: 10px;
    letter-spacing: 0.16em;
  }
  .gs-chips { gap: 7px; }
  .gs-chip  { height: 32px; padding: 0 13px; font-size: 12.5px; }

  .gs-loading { padding: 22px 0; }
  .gs-hint    { padding: 22px 6px; font-size: 12.5px; }

  /* Result cards: keep the card geometry but lift the price hierarchy
     and tighten the row so they feel like native list items. */
  .gs-results { padding: 10px 0 0; gap: 8px; }
  .gs-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.022);
    transition: background 0.14s ease, transform 0.14s ease;
  }
  .gs-row:active { transform: scale(0.985); }
  .gs-row-line { flex-wrap: wrap; gap: 6px 8px; }
  .gs-row-name { max-width: 100%; }
  .gs-row-meta { font-size: 12px; font-weight: 500; }
  .gs-row-actions { gap: 6px; }
  .gs-row-btn { padding: 0 12px; font-size: 12px; height: 34px; }
  .gs-row-btn.is-primary {
    border-color: rgba(74, 130, 240,0.50);
    background: rgba(74, 130, 240,0.16);
  }
  /* SEARCH-1: very narrow phones — actions drop to second row so
     "Ver gráfico" + "+ Añadir" can sit side-by-side full-width
     without crowding the ticker / name line. */
  @media (max-width: 380px) {
    .gs-row {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto auto;
    }
    .gs-row-actions {
      grid-column: 1;
      grid-row: 2;
      width: 100%;
    }
    .gs-row-actions .gs-row-btn { flex: 1 1 0; }
  }
}

/* ══════════════════════════════════════════════════════════════
   DESKTOP PASS 1 — premium polish across surfaces (no logic touched)
   Scoped to ≥1024px so mobile/tablet experiences stay untouched.
   ═════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* ── Dashboard ─────────────────────────────────────────────── */
  /* AURIX-DASH-V2-FIX: this desktop override (equal specificity, later source)
     was reverting .cat-card to the old white gradient and hiding the V2
     blue-glass. Re-aligned to the Intelligence material so V2 shows on desktop. */
  .cat-card {
    border-radius: 18px;
    border-color: rgba(74,130,240,0.16);
    background:
      radial-gradient(130% 130% at 12% 0%, rgba(74,130,240,0.10), transparent 58%),
      linear-gradient(165deg, rgba(30,44,74,0.46), rgba(15,21,37,0.54));
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.22s ease;
  }
  .cat-card:hover {
    transform: translateY(-2px);
    border-color: rgba(74,130,240,0.42);
    background:
      radial-gradient(130% 130% at 12% 0%, rgba(74,130,240,0.16), transparent 58%),
      linear-gradient(165deg, rgba(34,50,84,0.56), rgba(16,23,40,0.60));
    box-shadow: 0 14px 34px rgba(0,0,0,0.30),
                0 0 0 1px rgba(74,130,240,0.12),
                0 0 26px rgba(74,130,240,0.12),
                inset 0 1px 0 rgba(255,255,255,0.07);
  }
  .cat-card-name {
    font-weight: 600;
    letter-spacing: -0.005em;
  }
  .cat-card-value {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.005em;
  }

  /* Distribution / donut card — slightly tighter padding so legend
     and chart breathe at the right rhythm. */
  .distribution-section {
    border-radius: 18px;
    border-color: rgba(255,255,255,0.06);
  }

  /* Watchlist rows — softer dividers + premium hover. */
  .watchlist-row,
  .market-row {
    transition: background 0.16s ease, border-color 0.16s ease;
  }
  .watchlist-row + .watchlist-row { border-top-color: rgba(255,255,255,0.04); }
  .watchlist-row:hover,
  .market-row:hover {
    background: rgba(74, 130, 240,0.045);
  }

  /* ── Market ────────────────────────────────────────────────── */
  /* Type badge: drop contrast a notch — premium chrome, not loud chip. */
  .market-row-badge {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
    color: rgba(220,230,250,0.62);
    font-weight: 700;
  }
  .market-row-badge.is-crypto    { color: rgba(247,160,90,0.85);  border-color: rgba(247,160,90,0.22); }
  .market-row-badge.is-stock     { color: rgba(74, 130, 240,0.85); border-color: rgba(74, 130, 240,0.22); }
  .market-row-badge.is-etf       { color: rgba(74, 130, 240,0.85); border-color: rgba(74, 130, 240,0.22); }
  .market-row-badge.is-fund      { color: rgba(255,205,150,0.85); border-color: rgba(255,205,150,0.22); }
  .market-row-badge.is-index     { color: rgba(160,220,170,0.85); border-color: rgba(160,220,170,0.22); }
  .market-row-badge.is-commodity { color: rgba(255,180,120,0.85); border-color: rgba(255,180,120,0.22); }
  .market-row-badge.is-metal     { color: rgba(255,210,100,0.85); border-color: rgba(255,210,100,0.22); }

  /* Star: less aggressive when active — premium muted gold instead
     of full saturation. */
  .watchlist-btn.active { color: rgba(244,196,90,0.92); }
  .watchlist-btn:hover  { color: rgba(244,196,90,0.78); background: rgba(244,196,90,0.05); }

  /* Market header eyebrow + price/change column rhythm. */
  .col-price, .col-change { letter-spacing: 0; }

  /* ── Global Search overlay ─────────────────────────────────── */
  /* Premium command-palette feel: tighter sheet, calmer surface. */
  .gs-overlay {
    background: rgba(4,8,16,0.78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .gs-input-wrap {
    border-radius: 14px;
    background: rgba(13,18,30,0.55);
    border-color: rgba(255,255,255,0.10);
  }
  .gs-input-wrap:focus-within {
    border-color: rgba(74,130,240,0.45);
    box-shadow: 0 0 0 4px rgba(74,130,240,0.10);
    background: rgba(13,18,30,0.78);
  }
  /* Result row — softer divider, premium hover. */
  .gs-row {
    border-color: rgba(255,255,255,0.05);
    background: rgba(255,255,255,0.018);
    transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
  }
  .gs-row:hover {
    border-color: rgba(74, 130, 240,0.22);
    background: rgba(74, 130, 240,0.06);
  }

  /* Empty state — slightly more premium air. */
  .gs-empty { letter-spacing: 0.01em; }

  /* ── Add Asset (≥1024 polishes on top of the 901 layout) ─── */
  /* Selected chip — denser, cleaner hierarchy when an asset is
     selected on desktop (mobile keeps its compact treatment). */
  .modal[data-mode="asset"] .selected-chip {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(74, 130, 240,0.06);
    border-color: rgba(74, 130, 240,0.22);
  }
  .modal[data-mode="asset"] .chip-name {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.005em;
  }
  .modal[data-mode="asset"] .chip-sub {
    font-size: 11.5px;
    color: rgba(220,230,250,0.55);
  }
  .modal[data-mode="asset"] .chip-price {
    color: rgba(225,233,255,0.88);
    font-variant-numeric: tabular-nums;
  }

  /* When an asset is selected the left column doesn't need the quick
     picks below — they're stale UI at that point. Hide them so the
     left column reads as a calm search context, not a dump of chips. */
  .modal[data-mode="asset"] #searchWrap:has(#selectedChip:not([style*="display: none"])) #addV2Quick {
    display: none;
  }

  /* ── Workspace desktop polish ──────────────────────────────── */
  /* Grid: a touch more contrast between active and resting cells so
     the spreadsheet feels less like a debug grid. */
  .aurix-grid-cell { transition: background 0.14s ease, border-color 0.14s ease; }
  .aurix-grid-cell:hover { background: rgba(74, 130, 240,0.045); }

  /* Risk monitor panel — align with the mobile risk language
     (consistent radius, calmer border, softer card surfaces). */
  .aurix-copilot-panel {
    border-radius: 18px;
    border-color: rgba(255,255,255,0.07);
    background: linear-gradient(180deg, rgba(14,18,28,0.92), rgba(10,14,22,0.92));
  }
  .aurix-copilot-eyebrow {
    letter-spacing: 0.18em;
    font-weight: 700;
  }

  /* Toolbar / formula bar — slightly tighter glass. */
  .aurix-toolbar {
    border-radius: 14px;
    border-color: rgba(255,255,255,0.07);
  }

  /* Sheet name pill — premium chrome. */
  .aurix-sheet-name {
    border-radius: 10px;
    border-color: rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
  }

  /* ── Design system consistency (scoped) ────────────────────── */
  /* Default chip height/radius for chrome chips across surfaces.
     Mobile keeps its own sizing via the existing media queries. */
  .filter-btn,
  .add-v2-chip,
  .ws-intel-pill {
    border-radius: 999px;
  }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE FINAL POLISH — incremental visual refinements (no logic).
   Sits on top of MA-1 / ADD-V4.1 / ADD-V4.2 / MOBILE PASS 1A.
   Scoped to ≤768px so desktop is untouched.
   ═════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Mobile sheet system consistency ────────────────────────
     Unify radius / backdrop / close-button sizing across Add Asset,
     Liquidity, Reduce, Transaction and Detail modals so every sheet
     reads as the same product surface. */
  .modal-overlay.open { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .modal {
    border-radius: 22px 22px 0 0;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .modal-close {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 14px;
  }

  /* ── Add Asset picker (Step 1) — compact ~9% ──────────────── */
  /* Reduces each row's vertical footprint so the five type cards
     ("Otro activo" included) sit comfortably above the bottom nav
     without scrolling on a 6.7" phone. */
  .add-v2-picker {
    padding: 14px 16px 18px;
    gap: 12px;
  }
  .add-v2-grid { gap: 8px; }
  .add-v2-card {
    padding: 12px 14px;
    gap: 12px;
    grid-template-columns: 40px 1fr 14px;
    border-radius: 14px;
  }
  .add-v2-icon { width: 40px; height: 40px; border-radius: 11px; font-size: 17px; }
  .add-v2-title { font-size: 14px; }
  .add-v2-sub   { font-size: 12px; }
  .add-v2-picker {
    /* Reserve space for the home indicator + a comfortable buffer. */
    padding-bottom: calc(env(safe-area-inset-bottom) + 22px);
  }

  /* ── Add Asset — selected chip compact ─────────────────────── */
  /* When an asset is selected on mobile the chip currently uses
     desktop chrome. Tighten padding/typography so quantity sits one
     visual beat below the chip instead of two. */
  .selected-chip {
    padding: 9px 12px 9px 12px;
    gap: 10px;
    margin-bottom: 12px;
    border-radius: 12px;
  }
  .chip-badge { width: 32px; height: 32px; border-radius: 8px; font-size: 10px; }
  .chip-name { font-size: 13.5px; }
  .chip-sub  { font-size: 11px; }
  .chip-price { font-size: 12.5px; }

  /* ── Add Asset — quantity rhythm ──────────────────────────── */
  #qtyGroup { margin-bottom: 12px; }
  #qtyGroup input { height: 46px; font-size: 16px; }
  #formPreview {
    padding: 10px 12px;
    border-radius: 12px;
    margin-bottom: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
  }

  /* ── Market mobile — tabs + discovery ──────────────────────── */
  /* Tabs already padded to 22/22 in MOBILE PASS 1A; lift the active
     pill slightly so it visually pops above the surrounding chrome
     and never reads as clipped at the start of the scroll. */
  .market-tab.active { box-shadow: 0 6px 18px -10px var(--aurix-blue-glow); }

  /* Discovery cards quieter — lower border alpha + reduced inner
     padding so the live monitoring table reaches the user faster. */
  .funds-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.008));
    border-color: rgba(255,255,255,0.05);
  }
  .funds-card:hover {
    border-color: rgba(74, 130, 240,0.20);
    background: linear-gradient(180deg, rgba(74, 130, 240,0.05), rgba(255,255,255,0.012));
  }

  /* Market row badge — drop visual weight a notch on mobile too. */
  .market-row-badge {
    background: rgba(255,255,255,0.035);
    border-color: rgba(255,255,255,0.08);
    color: rgba(220,230,250,0.62);
  }

  /* ── Global Search mobile — row density ───────────────────── */
  /* Tighter vertical rhythm + cleaner divider/border alpha. */
  .gs-row { padding: 10px 12px; border-radius: 12px; }
  .gs-row + .gs-row { margin-top: 6px; }
  .gs-row-ticker { font-size: 12.5px; letter-spacing: 0.02em; }
  .gs-row-name { font-size: 12.5px; }

  /* ── Workspace mobile — softer hero glow + safe-area ──────── */
  /* Lower radial glow opacity so the hero feels premium-soft rather
     than spotlit, and ensure the last action chip always clears the
     bottom nav + home indicator. */
  .ws-intel-hero {
    box-shadow:
      0 1px 0 rgba(255,255,255,0.03) inset,
      0 14px 32px -22px rgba(8,12,24,0.85);
  }
  .ws-intel-hero::after {
    background: radial-gradient(60% 40% at 50% -10%, rgba(74, 130, 240,0.12), transparent 70%);
    opacity: 0.85;
  }

  /* Risk cards: slightly more air between cards and a touch less
     padding so the four stacked cards (incl. Sync) breathe better
     on a 360px viewport. */
  .ws-risk-stack { gap: 12px; }
  .ws-risk-card  { padding: 12px 14px; }

  /* Last actionable section reserves enough bottom space for the
     home indicator + bottom nav. The shell already includes safe-
     area padding; add a little extra below the action row. */
  .aurix-workspace-shell.is-mobile .ws-action-row {
    margin-bottom: 4px;
  }

  /* ── Dashboard mobile — card cohesion ─────────────────────── */
  /* AURIX-DASH-V2-FIX: mobile override was also reverting to the white gradient.
     Re-aligned to the V2 blue-glass so the lower dashboard matches on mobile. */
  .cat-card {
    border-radius: 16px;
    border-color: rgba(74,130,240,0.16);
    background:
      radial-gradient(130% 130% at 12% 0%, rgba(74,130,240,0.10), transparent 58%),
      linear-gradient(165deg, rgba(30,44,74,0.46), rgba(15,21,37,0.60));
  }

  /* ── Numbers + currency — guard rails ─────────────────────── */
  /* Belt-and-braces: financial values never wrap or ellipsize on
     mobile rows. Covers any new node added later that forgets the
     rule. */
  .col-price, .col-change,
  .gs-row-meta,
  .ws-kpi-value,
  .gold-summary-amount,
  .add-v2-preview-value,
  .add-v2-preview-price {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
}

/* ──────────────────────────────────────────────────────────────────
   MARKET-2: explorer controls (timeframe pills + sort dropdown)
   Inserted at the top of #marketList by renderCurrentMarketView only
   when window.__AURIX_MARKET_EXPLORER_V2 is on. Flag off → no DOM.
   ────────────────────────────────────────────────────────────────── */
.mkt-explorer-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  padding: 8px 2px;
  flex-wrap: wrap;
}
.mkt-tf-pills {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.mkt-tf-pill {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
  color: rgba(220,230,250,0.58);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}
.mkt-tf-pill:hover {
  color: rgba(225,233,255,0.92);
  border-color: rgba(74, 130, 240,0.22);
  background: rgba(74, 130, 240,0.06);
}
.mkt-tf-pill.is-active {
  color: #fff;
  border-color: rgba(74, 130, 240,0.45);
  background: rgba(74, 130, 240,0.14);
}

/* Sort dropdown — premium chip with menu under it */
.mkt-sort-wrap {
  position: relative;
}
.mkt-sort-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03);
  color: rgba(220,230,250,0.78);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}
.mkt-sort-toggle:hover {
  color: rgba(225,233,255,0.95);
  border-color: rgba(74, 130, 240,0.30);
  background: rgba(74, 130, 240,0.06);
}
.mkt-sort-label   { color: rgba(220,230,250,0.55); font-weight: 500; }
.mkt-sort-current { color: rgba(225,233,255,0.95); font-weight: 700; }
.mkt-sort-chevron { font-size: 9px; line-height: 1; color: rgba(220,230,250,0.55); }
.mkt-sort-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 160px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(14,18,28,0.96);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 18px 36px -16px rgba(4,8,16,0.9);
  display: flex;
  flex-direction: column;
  gap: 2px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.mkt-sort-menu[hidden] { display: none; }
.mkt-sort-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: rgba(220,230,250,0.85);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.mkt-sort-item:hover {
  background: rgba(74, 130, 240,0.10);
  color: #fff;
}
.mkt-sort-item.is-active {
  background: rgba(74, 130, 240,0.14);
  color: #fff;
  font-weight: 700;
}

/* Honest empty state for non-24H timeframes — muted dash. */
.col-change.is-flat .col-change-empty,
.col-change-empty {
  color: rgba(220,230,250,0.42);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Mobile: keep controls usable, allow horizontal scroll if needed. */
@media (max-width: 560px) {
  .mkt-explorer-controls {
    gap: 8px;
    padding: 6px 2px;
  }
  .mkt-tf-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .mkt-tf-pills::-webkit-scrollbar { display: none; }
  .mkt-tf-pill { flex: 0 0 auto; }
  .mkt-sort-toggle { padding: 6px 10px; }
}

/* ──────────────────────────────────────────────────────────────────
   MARKET-3: flagship explorer overlay. Applied only when #marketList
   has .is-v3 — flag-off keeps the MARKET-2 layout pixel-for-pixel.
   All rules are scoped under #marketList.is-v3 (or .mkt-tf-helper
   which is only rendered by the V3 controls path), so no global
   selectors are touched.
   ────────────────────────────────────────────────────────────────── */

/* Controls bar — premium hairline separator + tighter rhythm. */
#marketList.is-v3 .mkt-explorer-controls {
  padding: 4px 2px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  margin-bottom: 10px;
}
#marketList.is-v3 .mkt-tf-pill {
  padding: 7px 13px;
  font-size: 11.5px;
  letter-spacing: 0.05em;
}
#marketList.is-v3 .mkt-tf-pill.is-active {
  box-shadow: 0 4px 14px -8px rgba(74, 130, 240,0.40);
}
#marketList.is-v3 .mkt-sort-toggle {
  padding: 7px 13px;
}

/* Honest helper text under the timeframe pills (V3 + non-24H only). */
.mkt-tf-helper {
  margin: 2px 2px 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(220,230,250,0.42);
  font-style: italic;
}

/* Row geometry — re-cluster price/perf/sparkline so they read as
   ONE block instead of four floating columns. Slightly wider chart,
   tighter center, tabular-nums everywhere. */
#marketList.is-v3 .market-table-header {
  padding: 0 12px 8px;
  /* AURIX-MARKET-V1.0 CAMBIO 3: match the row's negative margin + the SAME grid
     so ACTIVO/PRECIO/24H line up perfectly with the rows (was floating +12px on a
     different grid → institutional Bloomberg-style alignment). */
  margin: 0 -12px;
  grid-template-columns: 3.8fr 1.3fr 0.95fr 1.15fr 44px;
  column-gap: 10px;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(220,230,250,0.58);
  text-transform: uppercase;
  font-weight: 700;
}
#marketList.is-v3 .market-row {
  padding: 14px 12px;
  margin: 0 -12px;
  border-bottom: 1px solid rgba(255,255,255,0.025);
  border-radius: 12px;
  /* AURIX-MARKET-V1.0 CAMBIO 4/5: ACTIVO ≈55% (wider), sparkline column ≈28%
     narrower; same grid as the header above. */
  grid-template-columns: 3.8fr 1.3fr 0.95fr 1.15fr 44px;
  gap: 10px;
  transition: background 160ms ease, box-shadow 220ms ease;
}
#marketList.is-v3 .market-row:hover {
  background: rgba(74, 130, 240,0.07);   /* AURIX-DASH-V2: align row hover to the dashboard blue */
  box-shadow: inset 0 0 0 1px rgba(74, 130, 240,0.14);
}

/* Asset cell — stronger ticker hierarchy, calmer name. */
#marketList.is-v3 .asset-icon {
  width: 36px;
  height: 36px;
  font-size: 13px;
}
#marketList.is-v3 .asset-symbol {
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: -0.005em;
  color: #fff;
}
#marketList.is-v3 .asset-name {
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(220,230,250,0.55);
  letter-spacing: 0.005em;
}
#marketList.is-v3 .market-row-badge {
  padding: 1px 6px;
  font-size: 8.5px;
}

/* Price + perf — tabular figures, refined sizing. */
#marketList.is-v3 .col-price {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
#marketList.is-v3 .col-change {
  font-size: 14.5px;   /* AURIX-MARKET-V1.0 CAMBIO 6: the % is the primary data — the eye goes here, not the sparkline */
  font-weight: 800;
  letter-spacing: 0.01em;
}

/* Sparkline — secondary indicator (CAMBIO 5/6): narrower via the grid + calmer. */
#marketList.is-v3 .col-chart {
  min-height: 34px;
  padding-left: 8px;
  opacity: 0.6;   /* AURIX-MARKET-V1.0: recedes behind the % (color/data/form kept) */
}
#marketList.is-v3 .col-chart svg {
  height: 34px;
}
/* AURIX-MARKET-V1.0 CAMBIO 9: the favourites star gets +12px inner margin so it
   no longer hugs the edge (size unchanged). */
#marketList .col-action { padding-right: 12px; }

/* Watchlist star — slightly larger hit target, calmer idle. */
#marketList.is-v3 .watchlist-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 16px;
  color: rgba(220,230,250,0.32);
}
#marketList.is-v3 .watchlist-btn:hover {
  color: rgba(244,196,90,0.78);
  background: rgba(244,196,90,0.05);
}
#marketList.is-v3 .watchlist-btn.active {
  color: rgba(244,196,90,0.92);
}

/* Discovery card CTA — turn "+ Añadir" into a clear secondary action
   chip so users see it's clickable alongside the body→preview affordance. */
#marketList.is-v3 .funds-card-cta {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(74, 130, 240,0.10);
  border: 1px solid rgba(74, 130, 240,0.22);
  color: rgba(74, 130, 240,0.95);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
#marketList.is-v3 .funds-card:hover .funds-card-cta {
  background: rgba(74, 130, 240,0.16);
  border-color: rgba(74, 130, 240,0.32);
}

/* Mobile — keep the new geometry but compress safely. */
@media (max-width: 560px) {
  #marketList.is-v3 .market-row {
    padding: 12px 8px;
    margin: 0 -8px;
  }
  #marketList.is-v3 .asset-symbol { font-size: 14px; }
  #marketList.is-v3 .col-price    { font-size: 13.5px; }
  #marketList.is-v3 .mkt-tf-pill  { padding: 6px 11px; font-size: 11px; }
}

/* Market Preview polish — bigger close hit, calmer footer. */
.modal--mkt-preview .mkt-prv-cta { padding-top: 14px; padding-bottom: 18px; }
.modal--mkt-preview .mkt-prv-cta .btn-submit { padding: 13px 16px; font-size: 14px; }
.modal--mkt-preview .mkt-prv-meta {
  margin-top: 2px;
  margin-bottom: 8px;
}

/* ──────────────────────────────────────────────────────────────────
   MARKET-4B: premium rebuild. All rules scoped to #marketList.is-v4
   or .mkt-filter-overlay so flag-off keeps MARKET-3 pixel-for-pixel.
   ────────────────────────────────────────────────────────────────── */

/* ── V4 single-chip filter button (replaces pill row + sort dropdown) */
/* AURIX-MARKET-V1.0 CAMBIO 1: temporarily hide the filters/sort bar (Filtros ·
   Destacados · timeframe) — not enough value for the vertical space it consumes.
   Code-intact (only hidden); this lifts the table ~50px (CAMBIO 2). */
#marketList.is-v4 .mkt-explorer-controls {
  display: none;
}
.mkt-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(74, 130, 240,0.06);
  border: 1px solid rgba(74, 130, 240,0.20);
  color: rgba(225,233,255,0.95);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}
.mkt-filter-chip:hover {
  border-color: rgba(74, 130, 240,0.36);
  background: rgba(74, 130, 240,0.12);
}
.mkt-filter-chip:active { transform: scale(0.985); }
.mkt-filter-chip-icon {
  font-size: 13px;
  line-height: 1;
  color: rgba(74, 130, 240,0.95);
}
.mkt-filter-chip-label { font-weight: 700; }
.mkt-filter-chip-current {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.06);
  font-size: 11px;
  font-weight: 600;
  color: rgba(220,230,250,0.75);
  font-variant-numeric: tabular-nums;
}

/* ── Filter sheet (mobile bottom-sheet / desktop centered popover) */
.mkt-filter-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.mkt-filter-overlay[hidden] { display: none; }
.mkt-filter-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.mkt-filter-sheet {
  width: 100%;
  max-width: 540px;
  background: rgba(14,18,28,0.96);
  border: 1px solid rgba(255,255,255,0.06);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  padding: 14px 18px calc(20px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 16px;
  transform: translateY(40px);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 -20px 40px -20px rgba(4,8,16,0.85);
}
.mkt-filter-overlay.open .mkt-filter-sheet { transform: translateY(0); }
.mkt-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 4px;
}
.mkt-filter-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: #fff;
}
.mkt-filter-close {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(220,230,250,0.75);
  font-family: inherit;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mkt-filter-close:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.16);
}
.mkt-filter-section { display: flex; flex-direction: column; gap: 10px; }
.mkt-filter-section-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(220,230,250,0.55);
}
.mkt-filter-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.mkt-filter-pill {
  flex: 1 0 auto;
  min-width: 60px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  color: rgba(220,230,250,0.78);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.mkt-filter-pill:hover {
  color: #fff;
  border-color: rgba(74, 130, 240,0.30);
  background: rgba(74, 130, 240,0.08);
}
.mkt-filter-pill.is-active {
  color: #fff;
  border-color: rgba(74, 130, 240,0.45);
  background: rgba(74, 130, 240,0.16);
  box-shadow: 0 4px 14px -8px rgba(74, 130, 240,0.40);
}
.mkt-filter-helper {
  font-size: 11.5px;
  color: rgba(220,230,250,0.50);
  letter-spacing: 0.005em;
  font-style: italic;
}
.mkt-filter-helper[hidden] { display: none; }
.mkt-filter-sort-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.mkt-filter-sort-item {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  color: rgba(220,230,250,0.78);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.mkt-filter-sort-item:hover {
  color: #fff;
  border-color: rgba(74, 130, 240,0.30);
  background: rgba(74, 130, 240,0.06);
}
.mkt-filter-sort-item.is-active {
  color: #fff;
  border-color: rgba(74, 130, 240,0.45);
  background: rgba(74, 130, 240,0.14);
}
/* Desktop: center the sheet as a popover with rounded corners on both sides. */
@media (min-width: 768px) {
  .mkt-filter-overlay { align-items: center; }
  .mkt-filter-sheet {
    max-width: 440px;
    border-radius: 18px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 18px 20px 22px;
    transform: translateY(20px) scale(0.98);
  }
  .mkt-filter-overlay.open .mkt-filter-sheet { transform: translateY(0) scale(1); }
}

/* ── V4 mobile row redesign (sparkline restored, no overlaps) ──── */
@media (max-width: 560px) {
  /* Sparkline back. Cell sized so it never collides with star/price. */
  #marketList.is-v4 .market-row .col-chart {
    display: flex !important;
    grid-column: 3 / 4;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: end;
    min-height: 28px;
    padding-left: 0;
    width: 72px;
    opacity: 0.85;
  }
  #marketList.is-v4 .market-row .col-chart svg { height: 28px; max-width: 72px; }

  /* Row grid: ASSET | PRICE/CHANGE | SPARK | STAR  (4 columns). */
  /* AURIX-MARKET-LAUNCH-1 P2 — premium density: the list is the protagonist.
     Tighter vertical rhythm (60→50px, 12→8px padding) shows ~2 more rows per
     screen without losing legibility. Structure (icon→ticker→price→change→
     sparkline→star) and column geometry are unchanged. */
  #marketList.is-v4 .market-row {
    grid-template-columns: minmax(0, 1fr) auto 72px 32px;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 1px;
    padding: 8px 8px;
    margin: 0 -8px;
    min-height: 50px;
  }
  #marketList.is-v4 .market-row .col-asset  { grid-column: 1 / 2; grid-row: 1 / 3; min-width: 0; }
  #marketList.is-v4 .market-row .col-price  { grid-column: 2 / 3; grid-row: 1 / 2; justify-self: end; }
  #marketList.is-v4 .market-row .col-change { grid-column: 2 / 3; grid-row: 2 / 3; justify-self: end; }
  #marketList.is-v4 .market-row .col-action { grid-column: 4 / 5; grid-row: 1 / 3; align-self: center; justify-self: end; }

  /* Mobile hierarchy — strict alignment, no overlap possible. */
  #marketList.is-v4 .asset-symbol { font-size: 14px; font-weight: 700; letter-spacing: -0.005em; }
  #marketList.is-v4 .asset-name {
    font-size: 11px;
    font-weight: 500;
    color: rgba(220,230,250,0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  #marketList.is-v4 .col-price {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  #marketList.is-v4 .col-change {
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* Hide the V3 sort dropdown row (V4 chip is in its place). */
  #marketList.is-v4 .mkt-explorer-controls { padding: 4px 2px 8px; }

  /* Compact top nav rhythm — pulls the rows above-fold without crowding. */
  #marketList.is-v4 .market-table-header { padding: 0 8px 6px; }
  #marketList.is-v4 .market-section-header { padding: 4px 8px 6px; font-size: 11px; }
}

/* ── Watchlist star polish (V4 — subtle idle, premium gold active) ── */
#marketList.is-v4 .watchlist-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 16px;
  color: rgba(220,230,250,0.28);
  transition: color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}
#marketList.is-v4 .watchlist-btn:hover {
  color: rgba(244,196,90,0.85);
  background: rgba(244,196,90,0.07);
}
#marketList.is-v4 .watchlist-btn.active {
  color: rgba(244,196,90,0.95);
  text-shadow: 0 0 8px rgba(244,196,90,0.18);
}
#marketList.is-v4 .watchlist-btn:active { transform: scale(0.88); }

/* ══════════════════════════════════════════════════════════════════
   UI-POLISH-1 — Aurix premium visual consistency pass.
   Scoped overrides on the four surfaces that still leaked the
   pre-Aurix grey/brown palette (filter chip, filter sheet, dashboard
   range selector, category detail hero). All rules are append-only
   and target existing selectors — flag-off → original look returns.
   ══════════════════════════════════════════════════════════════════ */

/* 1 ── Market filter chip (V4) ─────────────────────────────────── */
.mkt-filter-chip {
  gap: 8px;
  padding: 7px 8px 7px 12px;
  background: var(--aurix-surface);
  border: 1px solid var(--aurix-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
  color: rgba(225,233,255,0.96);
  font-size: 12px;
}
.mkt-filter-chip:hover {
  border-color: var(--aurix-border-hi);
  background: rgba(28, 42, 74, 0.72);
}
.mkt-filter-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(180, 200, 255, 0.95);
  width: 14px;
  height: 14px;
}
.mkt-filter-chip-label {
  font-weight: 700;
  letter-spacing: 0.01em;
  color: rgba(232, 240, 255, 0.95);
}
.mkt-filter-chip-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--aurix-blue-fill);
  border: 1px solid rgba(74, 130, 240, 0.36);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 1px rgba(74,130,240,0.10) inset;
}
.mkt-filter-chip-sort {
  font-size: 11px;
  font-weight: 500;
  color: rgba(200, 214, 240, 0.55);
  letter-spacing: 0.01em;
  padding-right: 4px;
}
/* Hide the legacy single-summary span if it's still in the DOM somewhere. */
.mkt-filter-chip .mkt-filter-chip-current { display: none; }
@media (max-width: 560px) {
  #marketList.is-v4 .mkt-explorer-controls {
    justify-content: flex-end;
    padding-right: 6px;
  }
  .mkt-filter-chip-sort { display: none; }
  .mkt-filter-chip { padding: 6px 8px 6px 11px; gap: 7px; }
}

/* ══════════════════════════════════════════════════════════════════
   MARKET-MOBILE-POLISH-2 — launch simplification + premium tab polish.
   SCOPED to phones (≤768px); desktop / web stays byte-identical. Pure
   presentation — no Market logic, search, watchlist or data touched.
     • CAMBIO 1 — remove the Filtros control entirely (unfinished, low
       value, ate critical vertical space). display:none collapses the
       row with no empty gap; the list rises automatically.
     • CAMBIO 2 — remove the duplicated grey title under the tabs on
       EVERY tab (Seguimiento / Todo / Cripto / … ). The active tab is
       already the context, so the list starts right under the tabs.
     • CAMBIO 3 — spend the recovered space on a more premium top-tab row
       (more padding + spacing, softer active glow, smooth tactile states).
   Subcategory chips (Top / Layer 1 / DeFi…) stay: they are functional
   filters, not a title. The V4 row layout (sparkline + alignment) and the
   filter-sheet markup/JS are left intact — the sheet is simply unreachable
   on mobile, so nothing behavioural changes.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* (A) Drop the big discovery cards + "Ver más": pure duplication on
     mobile now that a subcategory chip filters the list directly. */
  #marketList.is-v4 .funds-grid,
  #marketList.is-v4 .funds-show-more { display: none !important; }
  #marketList.is-v4 .funds-discover  { gap: 0; padding: 0 0 2px; }

  /* (B) CAMBIO 1 — remove the Filtros block. No empty gap is left (the
     row collapses); the list rises automatically. */
  #marketList.is-v4 .mkt-explorer-controls { display: none !important; }

  /* (C) Subcategory chips: full, un-masked row that sits directly under
     the tabs (these are filters, not a title — they stay). */
  #marketList.is-v4 .funds-cats {
    display: flex;
    align-items: center;
    min-height: 0;
    padding: 0 2px;
    margin: 0;
    -webkit-mask-image: none;
            mask-image: none;
  }

  /* (D) CAMBIO 2 — remove the duplicated grey title under the tabs on
     EVERY tab; the active tab already defines the context. */
  #marketList.is-v4 .market-section-header { display: none !important; }

  /* (E) Compress the top rhythm so the list reaches the user sooner. */
  #marketList.is-v4 { margin-top: 4px; }
}

/* CAMBIO 3 — PREMIUM TABS POLISH (mobile only). Elevates the existing
   pill language (more padding + breathing room, a softer gradient glow on
   the active tab aligned with the Dashboard range buttons, smooth + tactile
   states, slightly more solid text). Navigation / behaviour unchanged.
   Scoped ≤768px so the desktop segmented control stays byte-identical. */
@media (max-width: 768px) {
  .market-tabs {
    gap: 10px;
    padding-top: 10px;
    padding-bottom: 8px;
  }
  .market-tab {
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    color: rgba(225, 233, 250, 0.66);
    background: rgba(255, 255, 255, 0.045);
    border-radius: 999px;
    transition:
      background 0.2s var(--ease-out, ease),
      color 0.2s var(--ease-out, ease),
      box-shadow 0.2s var(--ease-out, ease),
      transform 0.12s var(--ease-premium, cubic-bezier(0.2, 0.8, 0.2, 1));
  }
  .market-tab:hover {
    color: rgba(235, 243, 255, 0.92);
    background: rgba(255, 255, 255, 0.07);
  }
  .market-tab:active { transform: scale(0.96); }
  .market-tab.active {
    color: #fff;
    font-weight: 700;
    background: linear-gradient(180deg, rgba(74,130,240,0.30), rgba(74,130,240,0.15));
    box-shadow:
      0 0 0 1px rgba(74,130,240,0.40) inset,
      0 8px 22px -12px rgba(74,130,240,0.70);
  }
}

/* 2 ── Market filter sheet (mobile bottom-sheet / desktop popover) */
.mkt-filter-sheet {
  background:
    linear-gradient(180deg, rgba(28, 42, 74, 0.32) 0%, rgba(12, 18, 32, 0.0) 50%),
    rgba(10, 14, 24, 0.96);
  border: 1px solid var(--aurix-border);
  border-bottom: 0;
  box-shadow:
    0 -24px 60px -20px rgba(2, 6, 14, 0.85),
    0 0 0 1px rgba(255,255,255,0.02) inset;
}
.mkt-filter-title {
  letter-spacing: -0.01em;
  font-size: 16px;
}
.mkt-filter-close {
  background: rgba(20, 30, 56, 0.55);
  border: 1px solid var(--aurix-border);
  color: rgba(220, 230, 250, 0.82);
  border-radius: 12px;
}
.mkt-filter-close:hover {
  background: var(--aurix-blue-soft);
  border-color: var(--aurix-border-hi);
  color: #fff;
}
.mkt-filter-section-label {
  color: rgba(180, 200, 240, 0.55);
  font-size: 10px;
  letter-spacing: 0.20em;
}
.mkt-filter-pill {
  background: var(--aurix-surface-2);
  border: 1px solid rgba(74, 130, 240, 0.12);
  color: rgba(220, 230, 250, 0.78);
}
.mkt-filter-pill:hover {
  border-color: var(--aurix-border-hi);
  background: var(--aurix-blue-soft);
  color: #fff;
}
.mkt-filter-pill.is-active {
  color: #fff;
  background: linear-gradient(180deg, rgba(74,130,240,0.30), rgba(74,130,240,0.18));
  border-color: rgba(74, 130, 240, 0.55);
  box-shadow: var(--aurix-glow);
}
.mkt-filter-helper {
  font-size: 11px;
  color: rgba(180, 200, 240, 0.50);
}
.mkt-filter-sort-item {
  background: var(--aurix-surface-2);
  border: 1px solid rgba(74, 130, 240, 0.12);
  color: rgba(220, 230, 250, 0.82);
  border-radius: 12px;
}
.mkt-filter-sort-item:hover {
  border-color: var(--aurix-border-hi);
  background: var(--aurix-blue-soft);
  color: #fff;
}
.mkt-filter-sort-item.is-active {
  color: #fff;
  background: linear-gradient(180deg, rgba(74,130,240,0.26), rgba(74,130,240,0.14));
  border-color: rgba(74, 130, 240, 0.55);
  box-shadow: var(--aurix-glow);
}
@media (min-width: 768px) {
  .mkt-filter-sheet {
    border-bottom: 1px solid var(--aurix-border);
    box-shadow:
      0 24px 60px -20px rgba(2, 6, 14, 0.85),
      0 0 0 1px rgba(255,255,255,0.02) inset;
  }
}

/* 3 ── Dashboard timeframe selector ─────────────────────────────── */
.range-toggle {
  background: var(--aurix-surface);
  border: 1px solid var(--aurix-border);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset;
}
.range-btn {
  color: rgba(200, 214, 240, 0.65);
  padding: 5px 11px;
  border-radius: 7px;
  letter-spacing: 0.06em;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast),
    box-shadow var(--dur-fast),
    transform var(--dur-fast) var(--ease-premium),
    filter var(--dur-fast) var(--ease-premium),
    opacity var(--dur-fast);
}
/* WN.26 PART 4 — range controls premium state (final/winning rules):
   inactive quieter, active clearer (brighter gradient + slightly stronger glow
   + heavier weight). Shape, sizing and click behaviour unchanged. */
.range-btn:not(.active)        { opacity: .82; }
.range-btn:not(.active):hover {
  background: var(--aurix-blue-soft);
  color: #fff;
  opacity: 1;
}
.range-btn.active {
  background: linear-gradient(180deg, rgba(74,130,240,0.52), rgba(74,130,240,0.30));
  color: #fff;
  font-weight: 800;
  opacity: 1;
  box-shadow:
    0 0 0 1px rgba(74, 130, 240,0.55) inset,
    var(--aurix-glow);
}

/* The "%/€" toggle that lives in the same .chart-controls row — same
   surface family so the row reads as one premium component. */
.perf-toggle {
  display: flex;
  background: var(--aurix-surface);
  border: 1px solid var(--aurix-border);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.perf-btn {
  background: transparent;
  border: 0;
  color: rgba(200, 214, 240, 0.62);
  border-radius: 7px;
  padding: 5px 10px;
  min-width: 30px;
}
.perf-btn:hover {
  background: var(--aurix-blue-soft);
  color: #fff;
  border-color: transparent;
}
.perf-btn.active {
  background: linear-gradient(180deg, rgba(74,130,240,0.42), rgba(74,130,240,0.22));
  color: #fff;
  border-color: transparent;
  box-shadow:
    0 0 0 1px rgba(74, 130, 240,0.45) inset,
    var(--aurix-glow);
}

/* 4 ── Category detail hero ─────────────────────────────────────── */
.detail-hero {
  background:
    linear-gradient(160deg, rgba(40, 60, 110, 0.28) 0%, rgba(14, 20, 36, 0.0) 55%),
    linear-gradient(180deg, rgba(14, 22, 42, 0.92), rgba(8, 12, 22, 0.94));
  border: 1px solid var(--aurix-border);
  border-radius: 18px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 18px 40px -24px rgba(4, 8, 18, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* Category accent is the only place the category colour bleeds — keep
   the rest of the card Aurix-dark-blue. */
.detail-hero::before {
  width: 3px;
  background: var(--detail-hero-color, var(--aurix-blue-light));
  opacity: 0.95;
  box-shadow: 0 0 14px -2px var(--detail-hero-color, rgba(74,130,240,0.6));
}
.detail-hero-type {
  color: rgba(180, 200, 240, 0.62);
}
.detail-hero-pct {
  color: rgba(180, 200, 240, 0.55);
}

/* Category detail chart empty / "no histórico" copy — quieter so the
   hero stays the focal point. The legacy chart canvas + Chart.js render
   logic stays untouched; we only style its empty-state container. */
.detail-chart-wrap .chart-no-data,
.detail-chart-wrap .detail-no-data {
  font-size: 11px;
  color: rgba(180, 200, 240, 0.45);
  letter-spacing: 0.01em;
}

/* 5 ── Category asset rows (detail list) ────────────────────────── */
.assets-list.assets-list--detail {
  background:
    linear-gradient(180deg, rgba(20, 30, 56, 0.42), rgba(14, 20, 36, 0.55));
  border: 1px solid var(--aurix-border);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset;
  border-radius: 16px;
}
.detail-asset-row {
  border-bottom-color: rgba(74, 130, 240, 0.08);
  padding: 14px 18px;
}
.detail-asset-row:hover {
  background: var(--aurix-blue-soft);
}
.detail-asset-row .dar-actions .btn-edit,
.detail-asset-row .dar-actions .btn-delete {
  background: rgba(20, 30, 56, 0.40);
  border: 1px solid rgba(74, 130, 240, 0.10);
  color: rgba(220, 230, 250, 0.72);
}
.detail-asset-row .dar-actions .btn-edit:hover {
  background: var(--aurix-blue-soft);
  border-color: var(--aurix-border-hi);
  color: #fff;
}
.detail-asset-row .dar-actions .btn-delete:hover {
  background: rgba(224, 90, 90, 0.10);
  border-color: rgba(224, 90, 90, 0.35);
  color: var(--red);
}
@media (max-width: 480px) {
  .detail-hero {
    border-radius: 16px;
    padding: 18px 18px 14px;
  }
  .detail-asset-row { padding: 12px 14px; }
}

/* ══════════════════════════════════════════════════════════════════
   SETTINGS-1 — General panel + plan + safe reset.
   Reuses .modal-overlay / .modal chrome so the open/close transition,
   safe-area handling and z-index all match the rest of the app.
   ══════════════════════════════════════════════════════════════════ */
.menu-item--general {
  letter-spacing: 0.01em;
}

.modal--settings {
  max-width: 560px;
  background:
    linear-gradient(180deg, rgba(28, 42, 74, 0.32) 0%, rgba(12, 18, 32, 0.0) 50%),
    rgba(10, 14, 24, 0.96);
  border: 1px solid var(--aurix-border);
}
.modal--reset {
  max-width: 460px;
  background:
    linear-gradient(180deg, rgba(74, 22, 22, 0.18) 0%, rgba(12, 18, 32, 0.0) 50%),
    rgba(10, 14, 24, 0.96);
  border: 1px solid rgba(224, 90, 90, 0.32);
}

.settings-body {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 18px 20px 24px;
  overflow-y: auto;
}

.settings-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.settings-section-title {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(180, 200, 240, 0.62);
  margin: 0 0 2px;
}
/* SETTINGS-INVESTOR-PROFILE-1 — investor profile section.
   Three calm chip rows; never reads as a questionnaire. */
.settings-section-sub {
  font-size: 12.5px;
  color: rgba(220, 230, 250, 0.62);
  line-height: 1.45;
  letter-spacing: 0.005em;
  margin: -4px 0 4px;
}
.settings-profile-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.settings-profile-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(220, 230, 250, 0.55);
}
.settings-profile-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.settings-profile-chips--age { gap: 5px; }
.settings-profile-chip {
  appearance: none;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  padding: 8px 13px;
  color: rgba(220, 230, 250, 0.78);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.003em;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
.settings-profile-chip:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.settings-profile-chip:active { transform: scale(0.97); }
.settings-profile-chip.is-active {
  background: rgba(74, 130, 240, 0.14);
  border-color: rgba(74, 130, 240, 0.55);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(74, 130, 240, 0.18) inset;
}
.settings-profile-chip--ghost {
  background: transparent;
  border-style: dashed;
}
.settings-profile-chip--ghost.is-active {
  border-style: solid;
}
.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  min-height: 46px;                 /* DSH.SETTINGS.05 — uniform institutional row height */
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.022);   /* dark glass, less solid blue */
  border: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 13px;
}
.settings-row-label { color: rgba(220, 230, 250, 0.60); }
.settings-row-value { color: var(--text-bright); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Plan cards ── */
.plan-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(40, 60, 110, 0.28), rgba(14, 20, 36, 0.0));
  border: 1px solid var(--aurix-border);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset;
}
.plan-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.plan-card-tier {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
}
.plan-card-badge {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--aurix-blue-fill);
  border: 1px solid rgba(74, 130, 240, 0.36);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #fff;
}
.plan-card-price {
  font-size: 13px;
  font-weight: 700;
  color: rgba(244, 196, 90, 0.92);
  font-variant-numeric: tabular-nums;
}
.plan-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plan-usage {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
}
.plan-usage-label { color: rgba(220, 230, 250, 0.62); }
.plan-usage-value { color: var(--text-bright); font-weight: 700; font-variant-numeric: tabular-nums; }
.plan-usage-bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  overflow: hidden;
}
.plan-usage-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--aurix-blue-light), var(--aurix-blue));
  transition: width 0.32s var(--ease-out);
}
.plan-usage-bar-fill.is-over {
  background: linear-gradient(90deg, var(--orange), var(--red));
}
.plan-usage-warn {
  font-size: 11.5px;
  color: rgba(244, 196, 90, 0.85);
}

.plan-card--offer {
  background:
    linear-gradient(180deg, rgba(244, 196, 90, 0.10), rgba(14, 20, 36, 0.0));
  border-color: rgba(244, 196, 90, 0.30);
}
.plan-card-desc {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(220, 230, 250, 0.78);
}
.btn-submit--plan {
  background: linear-gradient(180deg, rgba(244, 196, 90, 0.32), rgba(244, 196, 90, 0.18));
  border: 1px solid rgba(244, 196, 90, 0.45);
  color: #fff;
}
.btn-submit--plan[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
.plan-card-note {
  margin: 0;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(244, 196, 90, 0.72);
  text-align: center;
}

/* ════════════════════════════════════════════════════════════════
   AURIX-MONETIZATION-1 — Founder page + upgrade screen.
   Encapsulated, additive classes. Reuse the gold founder accent and
   the shared .modal-overlay / .modal chrome. No layout change to any
   existing surface.
   ════════════════════════════════════════════════════════════════ */
.menu-item--founder { color: rgba(244, 196, 90, 0.92); }
.menu-item--founder:hover { background: rgba(244, 196, 90, 0.10); color: #fff; }

.modal--founder, .modal--upgrade { max-width: 460px; }

.founder-body { display: flex; flex-direction: column; gap: 22px; }

.founder-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 18px 20px;
  border-radius: 16px;
  text-align: center;
  background: linear-gradient(180deg, rgba(244, 196, 90, 0.14), rgba(14, 20, 36, 0.0));
  border: 1px solid rgba(244, 196, 90, 0.28);
}
.founder-badge {
  padding: 3px 11px;
  border-radius: 999px;
  background: rgba(244, 196, 90, 0.16);
  border: 1px solid rgba(244, 196, 90, 0.36);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 196, 90, 0.95);
}
.founder-price-amount {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.founder-price-note {
  margin: 0;
  font-size: 12px;
  color: rgba(244, 196, 90, 0.82);
}

.founder-section { display: flex; flex-direction: column; gap: 12px; }
.founder-section-title {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(220, 230, 250, 0.55);
}
.founder-benefits, .founder-perks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.founder-benefit { display: flex; align-items: center; gap: 10px; }
.founder-benefit-check {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(244, 196, 90, 0.16);
  color: rgba(244, 196, 90, 0.95);
  font-size: 11px;
  font-weight: 800;
}
.founder-benefit-label { font-size: 13.5px; font-weight: 600; color: var(--text-bright); }
.founder-perks li {
  position: relative;
  padding-left: 16px;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(220, 230, 250, 0.78);
}
.founder-perks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(244, 196, 90, 0.7);
}

.founder-cta-wrap { display: flex; flex-direction: column; gap: 10px; }
.founder-cta {
  width: 100%;
  cursor: default;
}
.founder-cta-note {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  text-align: center;
  color: rgba(220, 230, 250, 0.55);
}

.upgrade-body { display: flex; flex-direction: column; gap: 16px; }
.upgrade-lead {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(220, 230, 250, 0.82);
}

/* ── Data actions ── */
.settings-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.settings-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--aurix-surface-2);
  border: 1px solid rgba(74, 130, 240, 0.12);
  color: var(--text-bright);
  font-family: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s, background 0.16s, transform 0.16s;
}
.settings-action:hover:not([disabled]) {
  border-color: var(--aurix-border-hi);
  background: var(--aurix-blue-soft);
}
.settings-action:active:not([disabled]) { transform: scale(0.99); }
.settings-action[disabled] { opacity: 0.55; cursor: not-allowed; }
.settings-action-label { font-weight: 700; }
.settings-action-sub {
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(220, 230, 250, 0.58);
}
.settings-action--danger {
  background: rgba(224, 90, 90, 0.06);
  border-color: rgba(224, 90, 90, 0.22);
}
.settings-action--danger:hover {
  background: rgba(224, 90, 90, 0.12);
  border-color: rgba(224, 90, 90, 0.45);
}
.settings-action--danger .settings-action-label { color: var(--red); }

/* ── Prefs list ── */
.settings-prefs-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.settings-pref-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--aurix-surface-2);
  border: 1px solid rgba(74, 130, 240, 0.08);
  font-size: 13px;
}
.settings-pref-label { color: rgba(220, 230, 250, 0.72); }
.settings-pref-value { color: var(--text-bright); font-weight: 600; }
.settings-pref-soon {
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(180, 200, 240, 0.50);
  font-weight: 700;
}

/* ── Reset confirm overlay ── */
.modal--reset .modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 22px 22px;
}
.reset-warn-lead {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--red);
}
.reset-list {
  margin: 0;
  padding: 0 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12.5px;
  color: rgba(220, 230, 250, 0.82);
}
.reset-keep {
  margin: 0;
  font-size: 11.5px;
  color: rgba(180, 200, 240, 0.55);
  font-style: italic;
}
.reset-confirm-label {
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(220, 230, 250, 0.62);
  font-weight: 700;
  margin-top: 4px;
}
.reset-confirm-input {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(224, 90, 90, 0.25);
  color: var(--text-bright);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-align: center;
  text-transform: uppercase;
  outline: none;
  transition: border-color 0.15s;
}
.reset-confirm-input:focus {
  border-color: var(--red);
  background: rgba(224, 90, 90, 0.05);
}
.btn-submit--danger {
  background: linear-gradient(180deg, rgba(224, 90, 90, 0.32), rgba(224, 90, 90, 0.18));
  border: 1px solid rgba(224, 90, 90, 0.55);
  color: #fff;
  font-weight: 700;
  padding: 13px 16px;
  margin-top: 4px;
}
.btn-submit--danger[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn-submit--danger:not([disabled]):hover {
  background: linear-gradient(180deg, rgba(224, 90, 90, 0.42), rgba(224, 90, 90, 0.25));
}

/* Mobile: sheet-like presentation, safe-area inset for bottom CTA. */
@media (max-width: 560px) {
  .modal--settings,
  .modal--reset {
    max-width: 100%;
    border-radius: 22px 22px 0 0;
    align-self: flex-end;
  }
  .settings-body {
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
  }
  .modal--reset .modal-body {
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }
}

/* ══════════════════════════════════════════════════════════════════
   MARKET-9 — Mobile preview HARD FIX (supersedes -5 / -6).
   Root cause from -6: flex column + `overflow: hidden` on body + chart
   `flex: 1 1 auto` could push the modal-cta below the visible sheet
   when content + min-heights exceeded available space. Sticky base
   rules on .modal-cta then mis-anchored the footer.
   Strategy: CSS Grid for the sheet AND for the body. Footer lives in
   row 3 of an explicit `auto / minmax(0,1fr) / auto` track — it is
   structurally forced into the visible viewport.
   All rules scoped @media (max-width: 520px) — desktop untouched.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 520px) {
  /* ── 1. Sheet shell — CSS Grid with footer in row 3 ───────────── */
  .modal--mkt-preview {
    display: grid;
    /* Rows: sheet-handle / header / body / footer.
       sheet-handle is an inline 12px decoration so it collapses small;
       header + footer auto-size to their content; body fills the rest
       via minmax(0, 1fr) — the `0` floor lets it shrink if the chart
       has too much intrinsic height. */
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    height: min(82dvh, 700px);
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 12px);
    overflow: hidden;
    background:
      linear-gradient(180deg, rgba(28, 42, 74, 0.18) 0%, rgba(10, 14, 24, 0.0) 40%),
      rgba(10, 14, 24, 0.97);
    border: 1px solid var(--aurix-border);
    border-bottom: 0;
    box-shadow: 0 -28px 60px -20px rgba(2, 6, 14, 0.85);
  }
  /* Taller viewports: nudge the sheet a touch taller. */
  @media (min-height: 780px) {
    .modal--mkt-preview {
      height: min(84dvh, 720px);
    }
  }
  .modal--mkt-preview .sheet-handle {
    grid-row: 1;
    background: rgba(180, 200, 240, 0.30);
    margin: 8px auto 2px;
  }

  /* ── 2. Header — row 2 of sheet grid ──────────────────────────── */
  .modal--mkt-preview .modal-header {
    grid-row: 2;
    padding: 6px 14px 12px;
    border-bottom: 1px solid rgba(74, 130, 240, 0.08);
    align-items: center;
    min-height: 60px;
  }
  .modal--mkt-preview .mkt-prv-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    font-size: 13px;
  }
  .modal--mkt-preview .mkt-prv-name {
    font-size: 15px;
    font-weight: 700;
    max-width: 54vw;
    letter-spacing: -0.005em;
  }
  .modal--mkt-preview .mkt-prv-sub {
    font-size: 11px;
    gap: 6px;
    color: rgba(180, 200, 240, 0.62);
  }
  .modal--mkt-preview .mkt-prv-badge {
    padding: 2px 6px;
    font-size: 9px;
    letter-spacing: 0.08em;
  }
  .modal--mkt-preview .modal-close {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: rgba(20, 30, 56, 0.65);
    border: 1px solid var(--aurix-border);
    color: rgba(225, 233, 255, 0.92);
    font-size: 14px;
    z-index: 30;
    flex-shrink: 0;
  }
  .modal--mkt-preview .modal-close:hover,
  .modal--mkt-preview .modal-close:active {
    background: rgba(28, 42, 74, 0.85);
    border-color: var(--aurix-border-hi);
    color: #fff;
  }

  /* ── 3. Body — row 3, scrollable, internal grid ───────────────── */
  .modal--mkt-preview .modal-body {
    grid-row: 3;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 14px 16px 12px !important; /* override generic mobile rule */
    display: grid;
    /* Rows: stats / pills / meta / chart. Each non-chart row is
       `auto` so it collapses to 0 when hidden (.mkt-prv-meta has
       [hidden]). Chart uses `minmax(170px, 1fr)` so it absorbs free
       space but can shrink to a safe 170px floor. */
    grid-template-rows: auto auto auto minmax(170px, 1fr);
    gap: 10px;
    z-index: 1;
  }
  .modal--mkt-preview .mkt-prv-stats  { grid-row: 1; }
  .modal--mkt-preview .mkt-prv-ranges { grid-row: 2; }
  .modal--mkt-preview .mkt-prv-meta   { grid-row: 3; }
  .modal--mkt-preview .mkt-prv-mount  { grid-row: 4; }

  /* ── 4. Price block ─────────────────────────────────────────── */
  .modal--mkt-preview .mkt-prv-stats {
    margin: 0;
    gap: 12px;
    align-items: baseline;
    flex-wrap: wrap;
  }
  .modal--mkt-preview .mkt-prv-price {
    font-size: clamp(26px, 8vw, 32px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.02em;
  }
  .modal--mkt-preview .mkt-prv-change {
    font-size: clamp(15px, 4.5vw, 19px);
    font-weight: 600;
    line-height: 1.1;
  }

  /* ── 5. Range pills — one row, h-scroll if needed ───────────── */
  .modal--mkt-preview .mkt-prv-ranges {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
    margin: 0 -2px;
  }
  .modal--mkt-preview .mkt-prv-ranges::-webkit-scrollbar { display: none; }
  .modal--mkt-preview .mkt-prv-ranges .aurix-chart-range {
    flex-shrink: 0;
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--aurix-surface-2);
    border: 1px solid rgba(74, 130, 240, 0.14);
    color: rgba(220, 230, 250, 0.78);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
  }
  .modal--mkt-preview .mkt-prv-ranges .aurix-chart-range[aria-pressed="true"] {
    background: linear-gradient(180deg, rgba(74, 130, 240, 0.42), rgba(74, 130, 240, 0.22));
    border-color: rgba(74, 130, 240, 0.55);
    color: #fff;
    box-shadow: var(--aurix-glow);
  }

  /* ── 6. Meta label — subtle eyebrow ─────────────────────────── */
  .modal--mkt-preview .mkt-prv-meta {
    font-size: 9.5px;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: rgba(180, 200, 240, 0.46);
    margin: 0;
    font-weight: 700;
  }

  /* ── 7. Chart — row 4 of body grid, adapts to available space ── */
  .modal--mkt-preview .mkt-prv-mount {
    width: 100%;
    height: auto;
    min-height: 170px;
    max-height: none;
    min-width: 0;
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  /* Tiny viewports: keep chart legible but never push the footer. */
  @media (max-height: 650px) {
    .modal--mkt-preview .mkt-prv-mount { min-height: 150px; }
  }

  /* ── 8. Footer — row 4 of sheet grid, ALWAYS visible ──────────── */
  /* Position: relative + !important defeats the legacy base rule
     `.modal-cta { position: sticky; bottom: 0 }` so the footer's
     visibility is guaranteed by grid placement, not by sticky offset. */
  .modal--mkt-preview .modal-cta.mkt-prv-cta,
  .modal--mkt-preview .mkt-prv-cta {
    grid-row: 4;
    position: relative !important;
    bottom: auto !important;
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 12px 16px max(16px, env(safe-area-inset-bottom));
    background:
      linear-gradient(180deg, rgba(12, 18, 34, 0.99) 0%, rgba(7, 12, 24, 1) 100%);
    background-clip: padding-box;
    border-top: 1px solid rgba(74, 130, 240, 0.20);
    box-shadow: 0 -18px 38px rgba(0, 0, 0, 0.45);
    z-index: 20;
  }
  .modal--mkt-preview .mkt-prv-cta .btn-secondary {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(20, 30, 56, 0.65);
    border: 1px solid var(--aurix-border);
    color: rgba(220, 230, 250, 0.72);
    font-size: 19px;
    flex-shrink: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.16s, color 0.16s, border-color 0.16s, transform 0.16s;
  }
  .modal--mkt-preview .mkt-prv-cta .btn-secondary:active {
    transform: scale(0.96);
  }
  .modal--mkt-preview .mkt-prv-cta .btn-secondary.is-active {
    color: rgba(244, 196, 90, 0.98);
    background: rgba(244, 196, 90, 0.08);
    border-color: rgba(244, 196, 90, 0.42);
    text-shadow: 0 0 10px rgba(244, 196, 90, 0.32);
  }
  .modal--mkt-preview .mkt-prv-cta .btn-submit {
    flex: 1;
    height: 52px;
    padding: 0 18px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.005em;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(74, 130, 240, 0.55) 0%, rgba(74, 130, 240, 0.95) 100%);
    border: 1px solid rgba(74, 130, 240, 0.55);
    box-shadow:
      0 6px 20px -8px rgba(74, 130, 240, 0.55),
      0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    color: #fff;
    transition: transform 0.12s var(--ease-out), box-shadow 0.18s var(--ease-out);
  }
  .modal--mkt-preview .mkt-prv-cta .btn-submit:active {
    transform: scale(0.985);
    box-shadow: 0 2px 10px -4px rgba(74, 130, 240, 0.55);
  }
}

/* ══════════════════════════════════════════════════════════════════
   MARKET-7 — Filter logic UX: disabled period pills + helper polish.
   Applies to both the V4 sheet pills (.mkt-filter-pill.is-soon) and
   the V3 fallback pill row (.mkt-tf-pill.is-soon). Scoped strictly to
   .is-soon and the helper, so enabled-state styling stays intact.
   ══════════════════════════════════════════════════════════════════ */
.mkt-filter-pill.is-soon,
.mkt-tf-pill.is-soon {
  position: relative;
  cursor: not-allowed;
  color: rgba(220, 230, 250, 0.36);
  background: rgba(20, 30, 56, 0.30);
  border-color: rgba(74, 130, 240, 0.06);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mkt-filter-pill.is-soon:hover,
.mkt-tf-pill.is-soon:hover {
  /* No real hover affordance — taps are intentionally inert. */
  background: rgba(20, 30, 56, 0.34);
  border-color: rgba(74, 130, 240, 0.10);
  color: rgba(220, 230, 250, 0.44);
  box-shadow: none;
  transform: none;
}
.mkt-filter-pill-soon,
.mkt-tf-pill-soon {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(74, 130, 240, 0.10);
  border: 1px solid rgba(74, 130, 240, 0.14);
  color: rgba(180, 200, 240, 0.62);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  line-height: 1;
}

/* Helper text — always visible (subtle), explains the muted pills. */
.mkt-filter-helper,
.mkt-tf-helper {
  font-size: 11px;
  line-height: 1.4;
  color: rgba(180, 200, 240, 0.50);
  font-style: normal;
  letter-spacing: 0.01em;
  margin-top: 2px;
}
.mkt-filter-helper[hidden] { display: none; }

/* Pulse: tap on a disabled pill briefly flashes the helper text into
   focus so the user sees the explanation. Single-shot, ~700ms. */
@keyframes mktHelperPulse {
  0%   { color: rgba(180, 200, 240, 0.50); transform: translateX(0); }
  20%  { color: rgba(244, 196, 90, 0.95);  transform: translateX(2px); }
  60%  { color: rgba(244, 196, 90, 0.85);  transform: translateX(0); }
  100% { color: rgba(180, 200, 240, 0.50); transform: translateX(0); }
}
.mkt-filter-helper.mkt-helper-pulse,
.mkt-tf-helper.mkt-helper-pulse {
  animation: mktHelperPulse 720ms var(--ease-premium);
}

/* Mobile-only tweak: pill-soon badge stays compact next to the period
   token, never wraps. */
@media (max-width: 520px) {
  .mkt-filter-pill,
  .mkt-tf-pill {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  .mkt-filter-pill-soon,
  .mkt-tf-pill-soon {
    font-size: 8.5px;
    padding: 1px 5px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   MARKET-8 — Loading shimmer for rows awaiting non-24H history.
   No layout shift: skeleton has the same intrinsic dimensions as the
   real change %. Sparkline cell stays the same size — just muted.
   ══════════════════════════════════════════════════════════════════ */
.col-change.is-loading,
.col-chart.is-loading {
  pointer-events: none;
}
.col-change-skeleton {
  display: inline-block;
  width: 56px;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    rgba(74, 130, 240, 0.06) 0%,
    rgba(74, 130, 240, 0.16) 50%,
    rgba(74, 130, 240, 0.06) 100%
  );
  background-size: 200% 100%;
  animation: mktChangeShimmer 1.4s linear infinite;
}
.col-change-empty {
  color: rgba(220, 230, 250, 0.42);
  font-variant-numeric: tabular-nums;
}
.col-chart.is-loading {
  position: relative;
  opacity: 0.55;
}
.col-chart.is-loading::after {
  content: '';
  position: absolute;
  inset: 30% 6%;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    rgba(74, 130, 240, 0.05) 0%,
    rgba(74, 130, 240, 0.16) 50%,
    rgba(74, 130, 240, 0.05) 100%
  );
  background-size: 200% 100%;
  animation: mktChangeShimmer 1.4s linear infinite;
}
@keyframes mktChangeShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ══════════════════════════════════════════════════════════════════
   MODAL-SYSTEM-1 — Mobile modal safe-area & centering fix.
   Root issue: the bottom nav (.bottom-nav, z-index 200, height 60px)
   sits above the modal overlay (z-index 100), so any modal extending
   to the viewport bottom gets visually clipped under the nav. Per-
   modal padding hacks were always one fix behind. This block defines
   a single source of truth — --aurix-modal-safe-bottom — and applies
   it to ALL mobile overlays so content lifts above the nav by default.
   Bottom-sheet modals keep their flex-end alignment via per-ID rules;
   centered modals (preview, settings, reset) opt out via .modal--* .
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* All overlays get safe-area padding. This is the cascading fix —
     after this rule, no mobile modal can extend below safe-bottom. */
  .modal-overlay {
    padding:
      calc(env(safe-area-inset-top, 0px) + 12px)
      12px
      var(--aurix-modal-safe-bottom)
      12px;
  }
  /* Modals capped to the safe viewport height. The legacy
     `max-height: 92svh` is overridden by the higher-specificity
     `.modal-overlay > .modal` selector. */
  .modal-overlay > .modal {
    max-height: calc(
      100dvh
      - env(safe-area-inset-top, 0px)
      - var(--aurix-modal-safe-bottom)
      - 16px
    );
  }
}

/* ── Bottom-sheet family: preserve flex-end (sheet UX) for the modals
   the user already expects to slide up from the bottom. The new
   overlay padding-bottom keeps them above the nav, the sheet radius
   stays intact. Scoped via overlay IDs so other modals don't inherit. */
@media (max-width: 520px) {
  #modalOverlay,
  #liquidityOverlay,
  #txOverlay,
  #addOverlay,
  #reduceOverlay,
  #assetDetailOverlay {
    align-items: flex-end;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    /* padding-bottom inherited from .modal-overlay (safe-bottom var). */
  }
  #modalOverlay     > .modal,
  #liquidityOverlay > .modal,
  #txOverlay        > .modal,
  #addOverlay       > .modal,
  #reduceOverlay    > .modal,
  #assetDetailOverlay > .modal {
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-width: 100%;
  }
}

/* ── Centered-safe modals: preview, settings, reset.
   These three are NOT bottom sheets — they should open as fully
   rounded cards centered in the safe viewport. */
@media (max-width: 768px) {
  #marketPreviewOverlay,
  #settingsOverlay,
  #resetConfirmOverlay {
    align-items: center;
    justify-content: center;
  }
  .modal--mkt-preview,
  .modal--settings,
  .modal--reset {
    border-radius: 20px;
    border: 1px solid var(--aurix-border);
    border-bottom: 1px solid var(--aurix-border);
    width: 100%;
    /* Each modal keeps its desktop max-width so reset stays narrower
       than settings; on viewport widths below that max they expand
       to fit. */
    align-self: center;
    margin-bottom: 0;
  }
  .modal--settings .modal-body,
  .modal--reset .modal-body {
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .modal--settings {
    max-height: calc(
      100dvh
      - env(safe-area-inset-top, 0px)
      - var(--aurix-modal-safe-bottom)
      - 16px
    );
  }
  .modal--reset {
    max-height: calc(
      100dvh
      - env(safe-area-inset-top, 0px)
      - var(--aurix-modal-safe-bottom)
      - 16px
    );
  }
}

/* Market Preview — sized to a slightly smaller premium card, fits
   under the safe-bottom even on tall devices. Overrides MARKET-9's
   `height: min(82dvh, 700px)` because this rule comes later in the
   cascade and uses the same single-class specificity. */
@media (max-width: 520px) {
  .modal--mkt-preview {
    height: min(78dvh, 680px);
    max-height: calc(
      100dvh
      - env(safe-area-inset-top, 0px)
      - var(--aurix-modal-safe-bottom)
      - 12px
    );
    /* Restore the bottom border that MARKET-9 stripped for sheet feel. */
    border-bottom: 1px solid var(--aurix-border);
  }
  @media (min-height: 780px) {
    .modal--mkt-preview {
      height: min(80dvh, 700px);
    }
  }
}

/* ══════════════════════════════════════════════════════════════════
   RESET-5 — Premium toast (used after atomic Reset, etc.).
   Body-level host; auto-stacks; safe-area aware on mobile so it
   never sits behind the bottom nav.
   ══════════════════════════════════════════════════════════════════ */
.aurix-toast-host {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(28px + env(safe-area-inset-bottom));
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}
@media (max-width: 768px) {
  .aurix-toast-host {
    bottom: calc(var(--aurix-modal-safe-bottom, 80px) + 8px);
  }
}
.aurix-toast {
  pointer-events: auto;
  min-width: 200px;
  max-width: min(86vw, 420px);
  padding: 11px 18px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(28, 42, 74, 0.92) 0%, rgba(10, 14, 24, 0.96) 100%);
  border: 1px solid var(--aurix-border);
  color: rgba(232, 240, 255, 0.95);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-align: center;
  box-shadow:
    0 14px 38px -10px rgba(2, 6, 14, 0.75),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity 0.32s var(--ease-out), transform 0.32s var(--ease-premium);
}
.aurix-toast.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.aurix-toast--success {
  border-color: rgba(63, 191, 127, 0.32);
  box-shadow:
    0 14px 38px -10px rgba(2, 6, 14, 0.75),
    0 0 0 1px rgba(63, 191, 127, 0.08) inset,
    0 0 24px -8px rgba(63, 191, 127, 0.30);
}
.aurix-toast--error {
  border-color: rgba(224, 90, 90, 0.40);
  box-shadow:
    0 14px 38px -10px rgba(2, 6, 14, 0.75),
    0 0 24px -8px rgba(224, 90, 90, 0.35);
}

/* ══════════════════════════════════════════════════════════════════
   ONBOARDING-1 — activation overlay.
   Dedicated modal chrome (NOT the add-asset modal). Mounts above the
   bottom-nav safe area on mobile, centred premium card on desktop.
   Steps are toggled via [data-step] on .modal--onboarding; only the
   matching <section[data-onb-step]> is shown.
   ══════════════════════════════════════════════════════════════════ */
#onboardingOverlay {
  /* Sits above bottom-nav (z-index 200) and every other modal layer. */
  z-index: 250;
  padding: var(--space-3);
}
.modal--onboarding {
  position: relative;
  max-width: 480px;
  background:
    linear-gradient(180deg, rgba(40, 80, 150, 0.18) 0%, rgba(12, 18, 32, 0.0) 50%),
    rgba(8, 12, 22, 0.96);
  border: 1px solid rgba(74, 130, 240, 0.18);
  border-radius: var(--radius-lg);
  box-shadow:
    0 24px 80px -20px rgba(0, 0, 0, 0.80),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  /* ONBOARDING-2: tighter intentional height — no more giant blank
     vertical space between content and CTAs. */
  max-height: min(82vh, 600px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Step switching — show only the matching step. */
.modal--onboarding > .onb-step { display: none; }
.modal--onboarding[data-step="LANGUAGE"]   > .onb-step[data-onb-step="LANGUAGE"],
.modal--onboarding[data-step="WELCOME"]    > .onb-step[data-onb-step="WELCOME"],
.modal--onboarding[data-step="INTERESTS"]  > .onb-step[data-onb-step="INTERESTS"],
.modal--onboarding[data-step="EXPERIENCE"] > .onb-step[data-onb-step="EXPERIENCE"],
.modal--onboarding[data-step="PROFILE"]    > .onb-step[data-onb-step="PROFILE"],
.modal--onboarding[data-step="ACTIVATION"] > .onb-step[data-onb-step="ACTIVATION"],
.modal--onboarding[data-step="SUCCESS"]    > .onb-step[data-onb-step="SUCCESS"] {
  display: flex;
}
.modal--onboarding[data-step="SUCCESS"] > .onb-skip,
.modal--onboarding[data-step="SUCCESS"] > .onb-progress {
  opacity: 0;
  pointer-events: none;
}

/* Progress dots — tighter, sits closer to the top edge. */
.onb-progress {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 2;
  transition: opacity .24s var(--ease-out);
}
.onb-progress-dot {
  width: 5px; height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  transition: background .22s var(--ease-out), width .26s var(--ease-premium);
}
.modal--onboarding[data-step="LANGUAGE"]   .onb-progress-dot[data-step="LANGUAGE"],
.modal--onboarding[data-step="WELCOME"]    .onb-progress-dot[data-step="WELCOME"],
.modal--onboarding[data-step="INTERESTS"]  .onb-progress-dot[data-step="INTERESTS"],
.modal--onboarding[data-step="EXPERIENCE"] .onb-progress-dot[data-step="EXPERIENCE"],
.modal--onboarding[data-step="PROFILE"]    .onb-progress-dot[data-step="PROFILE"],
.modal--onboarding[data-step="ACTIVATION"] .onb-progress-dot[data-step="ACTIVATION"] {
  background: var(--aurix-blue);
  width: 16px;
}

/* Skip button */
.onb-skip {
  position: absolute;
  top: 14px; right: 16px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.50);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  z-index: 2;
  transition: color .18s var(--ease-out), background .18s var(--ease-out);
}
.onb-skip:hover { color: #fff; background: rgba(255,255,255,0.06); }

/* Steps — shared layout. ONBOARDING-2: tighter padding so each step
   feels intentional, not stretched. */
.onb-step {
  flex-direction: column;
  gap: 14px;
  padding: 42px 28px 22px;
  flex: 1;
  overflow-y: auto;
  animation: onb-fade-in .36s var(--ease-premium);
}
@keyframes onb-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* SPEC 45 ONBOARDING POLISH — premium entrance choreography. On top of the whole-step fade, each step's
   selectable cards/bullets cascade up in a subtle stagger so every screen change feels intentional and
   smooth. `backwards` fill applies the hidden pre-state during the stagger delay (no flash) and RELEASES
   after the animation ends, so it never clobbers the existing :hover / :active / .is-selected transforms.
   Purely additive (final resting state = the existing layout), reversible, fully off under reduced-motion.
   No markup / handler / navigation / data change. */
@keyframes onb-card-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.modal--onboarding .onb-lang-card,
.modal--onboarding .onb-chip,
.modal--onboarding .onb-exp-card,
.modal--onboarding .onb-bullet { animation: onb-card-rise .42s var(--ease-premium) backwards; }
.modal--onboarding .onb-lang-card:nth-child(2), .modal--onboarding .onb-chip:nth-child(2), .modal--onboarding .onb-exp-card:nth-child(2), .modal--onboarding .onb-bullet:nth-child(2) { animation-delay: .05s; }
.modal--onboarding .onb-lang-card:nth-child(3), .modal--onboarding .onb-chip:nth-child(3), .modal--onboarding .onb-exp-card:nth-child(3), .modal--onboarding .onb-bullet:nth-child(3) { animation-delay: .10s; }
.modal--onboarding .onb-lang-card:nth-child(4), .modal--onboarding .onb-chip:nth-child(4), .modal--onboarding .onb-exp-card:nth-child(4), .modal--onboarding .onb-bullet:nth-child(4) { animation-delay: .15s; }
.modal--onboarding .onb-lang-card:nth-child(5), .modal--onboarding .onb-chip:nth-child(5), .modal--onboarding .onb-exp-card:nth-child(5), .modal--onboarding .onb-bullet:nth-child(5) { animation-delay: .20s; }
.modal--onboarding .onb-chip:nth-child(6), .modal--onboarding .onb-exp-card:nth-child(6) { animation-delay: .25s; }
.modal--onboarding .onb-chip:nth-child(7), .modal--onboarding .onb-exp-card:nth-child(7) { animation-delay: .30s; }
.modal--onboarding .onb-chip:nth-child(n+8) { animation-delay: .34s; }
@media (prefers-reduced-motion: reduce) {
  .modal--onboarding .onb-lang-card,
  .modal--onboarding .onb-chip,
  .modal--onboarding .onb-exp-card,
  .modal--onboarding .onb-bullet { animation: none; }
}
.onb-headline {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.18;
  text-align: center;
}
.onb-headline-line { display: block; }
.onb-headline-line--alt {
  font-size: 17px;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  margin-top: 6px;
  letter-spacing: -0.005em;
}
.onb-sub {
  font-size: 15px;
  font-weight: 400;
  color: rgba(255,255,255,0.62);
  text-align: center;
  line-height: 1.5;
  max-width: 420px;
  margin: -8px auto 0;
}

/* Footer / CTAs */
.onb-footer {
  margin-top: auto;
  padding-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.onb-footer--split {
  flex-direction: row;
  gap: 12px;
}
.onb-footer--split .onb-cta--primary { flex: 1; }
.onb-cta {
  appearance: none;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 14px 20px;
  cursor: pointer;
  transition: transform .12s var(--ease-out), background .18s var(--ease-out),
              opacity .18s var(--ease-out), box-shadow .22s var(--ease-out);
  min-height: 48px;
}
.onb-cta--primary {
  background: linear-gradient(180deg, var(--aurix-blue) 0%, var(--aurix-blue) 100%);
  color: #fff;
  box-shadow:
    0 6px 18px -6px rgba(74, 130, 240, 0.55),
    0 0 0 1px rgba(255,255,255,0.06) inset;
}
.onb-cta--primary:hover:not(:disabled) {
  filter: brightness(1.06);
}
.onb-cta--primary:active:not(:disabled) { transform: scale(0.985); }
.onb-cta--primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}
.onb-cta--ghost {
  background: transparent;
  color: rgba(255,255,255,0.72);
  border: 1px solid rgba(255,255,255,0.10);
}
.onb-cta--ghost:hover { background: rgba(255,255,255,0.04); color: #fff; }

/* Step: LANGUAGE */
.onb-lang-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: var(--space-2);
}
.onb-lang-card {
  appearance: none;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  cursor: pointer;
  transition: background .18s var(--ease-out), border-color .18s var(--ease-out),
              transform .12s var(--ease-out);
  text-align: left;
}
.onb-lang-card:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.16);
}
.onb-lang-card:active { transform: scale(0.985); }
.onb-lang-card.is-selected {
  background: rgba(74, 130, 240, 0.10);
  border-color: rgba(74, 130, 240, 0.55);
  box-shadow: 0 0 0 1px rgba(74, 130, 240, 0.18) inset;
}
.onb-lang-name {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}
.onb-lang-native {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

/* Step: INTERESTS — chip grid */
.onb-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: var(--space-2);
}
.onb-chip {
  appearance: none;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  padding: 10px 16px;
  color: rgba(255,255,255,0.78);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background .16s var(--ease-out), border-color .16s var(--ease-out),
              color .16s var(--ease-out), transform .12s var(--ease-out);
}
.onb-chip:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  color: #fff;
}
.onb-chip:active { transform: scale(0.96); }
.onb-chip.is-selected {
  background: rgba(74, 130, 240, 0.14);
  border-color: rgba(74, 130, 240, 0.55);
  color: #fff;
}

/* ONBOARDING-PROFILE-UI-1 — investor profile step.
   Calm two-question layout. The label sub-headers sit a notch tighter
   than the main subtitle so the screen reads as one card, not two
   questionnaires stacked. */
.onb-sub--label {
  margin-top: 14px;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: rgba(225, 233, 255, 0.66);
  text-transform: none;
}
.onb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.onb-chips--age {
  gap: 6px;
}
.onb-chip.is-active:not(.is-selected) {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.onb-chip--ghost {
  background: transparent;
  border-style: dashed;
}

/* Step: EXPERIENCE */
.onb-exp-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--space-2);
}
.onb-exp-card {
  appearance: none;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  cursor: pointer;
  text-align: left;
  transition: background .18s var(--ease-out), border-color .18s var(--ease-out),
              transform .12s var(--ease-out);
}
.onb-exp-card:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.16);
}
.onb-exp-card:active { transform: scale(0.99); }
.onb-exp-card.is-selected {
  background: rgba(74, 130, 240, 0.10);
  border-color: rgba(74, 130, 240, 0.55);
}
.onb-exp-name {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}
.onb-exp-desc {
  font-size: 12.5px;
  color: rgba(255,255,255,0.55);
}

/* Step: ACTIVATION — tighter radial badge so the step no longer
   feels mostly empty. */
.onb-activation-art,
.onb-success-art {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px auto 2px;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 40%, rgba(74,130,240,0.30), rgba(74,130,240,0.0) 70%);
}
.onb-activation-icon {
  font-size: 30px;
  font-weight: 300;
  color: #fff;
  line-height: 1;
}
.onb-success-art {
  background: radial-gradient(circle at 50% 40%, rgba(63, 191, 127,0.30), rgba(63, 191, 127,0.0) 70%);
}
.onb-success-icon {
  font-size: 30px;
  font-weight: 700;
  color: var(--aurix-success);
  line-height: 1;
}

/* Welcome bullets — short value props between headline and CTA. */
.onb-bullets {
  list-style: none;
  margin: 4px auto 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
  width: 100%;
}
.onb-bullet {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.86);
  letter-spacing: -0.005em;
}
.onb-bullet-dot {
  width: 6px; height: 6px;
  flex: 0 0 6px;
  border-radius: 999px;
  background: var(--aurix-blue);
  box-shadow: 0 0 8px rgba(74, 130, 240, 0.55);
}

/* SPEC 45 WELCOME — convergence hero + capability rail. Fixed-size box (no layout impact); dots are
   absolutely positioned and animate transform/opacity ONLY, converging once into the Aurix core →
   "todo tu patrimonio, una sola visión". Reversible; disabled under prefers-reduced-motion. */
.onb-welcome-hero {
  position: relative; width: 100%; height: 76px; flex: 0 0 76px;
  display: flex; align-items: center; justify-content: center; margin: 2px 0 16px;
}
.onb-wh-core {
  width: 42px; height: 42px; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, rgba(120,170,255,0.95), rgba(60,110,255,0.28) 60%, transparent 72%);
  box-shadow: 0 0 34px rgba(80,140,255,0.45), inset 0 0 0 1px rgba(150,185,255,0.35);
  animation: onb-wh-core-in 0.5s var(--ease-premium) 0.30s both;
}
.onb-wh-dot {
  position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; background: rgba(150,185,255,0.92); box-shadow: 0 0 8px rgba(90,140,255,0.7);
  animation: onb-wh-converge 0.62s var(--ease-premium) both;
}
.onb-wh-dot:nth-child(2) { --dx: -60px; --dy: -20px; }
.onb-wh-dot:nth-child(3) { --dx:  56px; --dy: -14px; animation-delay: 0.04s; }
.onb-wh-dot:nth-child(4) { --dx: -40px; --dy:  22px; animation-delay: 0.08s; }
.onb-wh-dot:nth-child(5) { --dx:  46px; --dy:  20px; animation-delay: 0.06s; }
.onb-wh-dot:nth-child(6) { --dx:   4px; --dy: -30px; animation-delay: 0.10s; }
@keyframes onb-wh-converge {
  0%   { transform: translate(var(--dx, 0), var(--dy, 0)) scale(1); opacity: 0; }
  28%  { opacity: 0.9; }
  100% { transform: translate(0, 0) scale(0.35); opacity: 0; }
}
@keyframes onb-wh-core-in {
  from { transform: scale(0.55); opacity: 0.2; }
  to   { transform: scale(1); opacity: 1; }
}
.onb-welcome-rail {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 10px; margin: 6px 0 2px;
}
.onb-wr-step {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(190,208,240,0.74);
}
.onb-wr-arrow { color: rgba(120,160,255,0.5); font-size: 12px; line-height: 1; }
@media (prefers-reduced-motion: reduce) {
  .onb-wh-dot { display: none; }
  .onb-wh-core { animation: none; }
}
@media (max-width: 360px) {
  .onb-welcome-hero { height: 64px; flex-basis: 64px; margin-bottom: 12px; }
  .onb-welcome-rail { gap: 7px; }
  .onb-wr-step { font-size: 11.5px; letter-spacing: 0.04em; }
}

/* SPEC 45 INVESTOR PROFILE — premium identity cards. The four risk chips become full cards (name +
   personality line + a risk-meter icon slot that's ready for a future illustration, no empty holes).
   Same data-onb-risk / is-selected / is-active hooks → JS, persistence, selection-sync and flow are
   untouched. Age drops to a visually subordinate block below. Reversible; off under reduced-motion. */
.onb-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: var(--space-2);
}
.onb-profile-card {
  appearance: none;
  position: relative;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 16px;
  padding: 15px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  cursor: pointer;
  text-align: left;
  transition: background .18s var(--ease-out), border-color .18s var(--ease-out),
              box-shadow .18s var(--ease-out), transform .12s var(--ease-out);
}
.onb-profile-card:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
}
.onb-profile-card:focus-visible {
  outline: none;
  border-color: rgba(120, 165, 255, 0.75);
  box-shadow: 0 0 0 3px rgba(74, 130, 240, 0.30);
}
.onb-profile-card:active { transform: scale(0.99); }
.onb-profile-card.is-active:not(.is-selected) {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.18);
}
.onb-profile-card.is-selected {
  background: rgba(74, 130, 240, 0.11);
  border-color: rgba(74, 130, 240, 0.60);
  box-shadow: 0 0 0 1px rgba(74, 130, 240, 0.20) inset;
}
/* Risk-meter icon slot — four ascending bars, filled 1→4 by profile (illustration-ready). */
.onb-pc-icon {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 20px;
}
.onb-pc-bar {
  width: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.14);
  transition: background .18s var(--ease-out);
}
.onb-pc-bar:nth-child(1) { height: 8px; }
.onb-pc-bar:nth-child(2) { height: 12px; }
.onb-pc-bar:nth-child(3) { height: 16px; }
.onb-pc-bar:nth-child(4) { height: 20px; }
.onb-profile-card[data-onb-risk="conservative"] .onb-pc-bar:nth-child(-n+1),
.onb-profile-card[data-onb-risk="balanced"] .onb-pc-bar:nth-child(-n+2),
.onb-profile-card[data-onb-risk="growth"] .onb-pc-bar:nth-child(-n+3),
.onb-profile-card[data-onb-risk="aggressive"] .onb-pc-bar {
  background: linear-gradient(180deg, rgba(140,180,255,0.95), rgba(74,130,240,0.72));
}
.onb-pc-name {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}
.onb-pc-desc {
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.42;
  color: rgba(225, 233, 255, 0.60);
}
/* Age — visually subordinate secondary block, separated by a hairline. */
.onb-profile-age {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.onb-profile-age .onb-sub--label { margin-top: 0; }
.onb-age-helper {
  margin: 8px 0 0;
  font-size: 11.5px;
  font-weight: 400;
  color: rgba(255,255,255,0.40);
  text-align: center;
  letter-spacing: 0.005em;
}
/* Entrance cascade (reuses onb-card-rise); released after run, so it never clobbers hover/selected. */
.modal--onboarding .onb-profile-card { animation: onb-card-rise .42s var(--ease-premium) backwards; }
.modal--onboarding .onb-profile-card:nth-child(2) { animation-delay: .05s; }
.modal--onboarding .onb-profile-card:nth-child(3) { animation-delay: .10s; }
.modal--onboarding .onb-profile-card:nth-child(4) { animation-delay: .15s; }
@media (prefers-reduced-motion: reduce) {
  .modal--onboarding .onb-profile-card { animation: none; }
  .onb-profile-card, .onb-pc-bar { transition: none; }
}
/* Mobile — one column keeps the personality lines fully legible down to 320px. */
@media (max-width: 768px) {
  .onb-profile-grid { grid-template-columns: 1fr; }
  .onb-profile-card { padding: 13px 14px 14px; gap: 6px; }
}
@media (max-width: 360px) {
  .onb-pc-name { font-size: 14.5px; }
  .onb-pc-desc { font-size: 12px; }
}

/* Success step extras — multi-line body that updates with asset count. */
.onb-success-body {
  margin-top: -4px;
}

/* Mobile — centered card, 92vw, sits above bottom-nav via the system
   --aurix-modal-safe-bottom token (single source of truth shared with
   every other overlay). The base .modal-overlay mobile rule already
   sets padding-bottom: var(--aurix-modal-safe-bottom); we keep the
   same alignment as the centered-safe family (settings / reset). */
@media (max-width: 768px) {
  #onboardingOverlay {
    align-items: center;
    justify-content: center;
    /* Inherit padding-bottom (= --aurix-modal-safe-bottom) from the
       base .modal-overlay mobile rule so the modal never sits under
       the bottom nav. Top + horizontal padding are reset here so the
       card fits the requested 92vw on small screens. */
    padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
    padding-left: 0;
    padding-right: 0;
  }
  .modal--onboarding {
    width: 92vw;
    max-width: 92vw;
    border-radius: var(--radius-lg);
    /* Cap height so the card never overlaps the top safe-area or the
       bottom-nav (the var already includes safe-area-inset-bottom). */
    max-height: calc(
      100dvh
      - var(--aurix-modal-safe-bottom)
      - env(safe-area-inset-top, 0px)
      - 24px
    );
    align-self: center;
    margin-bottom: 0;
  }
  .onb-step {
    padding: 48px 22px 20px;
  }
  .onb-headline { font-size: 22px; }
  .onb-headline-line--alt { font-size: 15px; }
  .onb-sub { font-size: 14px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .onb-step { animation: none; }
  .onb-cta, .onb-chip, .onb-lang-card, .onb-exp-card,
  .onb-progress-dot { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════
   AURIX-EMPTY-1 — premium activation states.
   Driven by JS via the `is-empty` class on .dashboard-top + canonical
   empty-state nodes (.empty-state--activation, .cat-card--empty,
   .distribution-section--empty, .chart-no-data multi-line).
   ══════════════════════════════════════════════════════════════════ */

/* ── Hero empty mode (.dashboard-top.is-empty) ── */
.dashboard-top.is-empty .summary-total {
  color: rgba(255, 255, 255, 0.40);
  font-feature-settings: 'tnum' on;
  letter-spacing: -0.02em;
}
.dashboard-top.is-empty .summary-perf {
  display: inline-block !important;
  background: rgba(74, 130, 240, 0.10);
  color: rgba(180, 200, 240, 0.85);
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(74, 130, 240, 0.22);
  letter-spacing: 0.005em;
}
.dashboard-top.is-empty #assetCount {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
}
.dashboard-top.is-empty .btn-summary-action.btn-primary {
  /* Slightly amplify the primary CTA when the portfolio is empty so
     the first action is unambiguous. No color change — premium feel. */
  box-shadow:
    0 8px 22px -8px rgba(74, 130, 240, 0.55),
    0 0 0 1px rgba(74, 130, 240, 0.10) inset;
}

/* ── Chart no-data: premium two-line copy ──
   Note: the base `.chart-no-data` rule (position:absolute; inset:0;
   flex centred) lives near the top of this file. Here we only OVERRIDE
   the flex direction (so the two-line copy stacks vertically) and add
   the per-span typography. Positioning + interaction props are
   inherited from the base rule. */
.chart-no-data {
  flex-direction: column;
  gap: 4px;
  text-align: center;
}
.chart-no-data-title {
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: -0.005em;
}
.chart-no-data-body {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.42);
  font-weight: 500;
}

/* ── Donut ghost ring (empty state) ── */
.distribution-section--empty .legend-item { display: none; }
.distribution-section--empty .distribution-legend::before {
  content: '';
  display: block;
  height: 1px;
}
.distribution-section--empty .donut-center-val {
  color: rgba(255, 255, 255, 0.62);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.distribution-section--empty .donut-center-sub {
  color: rgba(255, 255, 255, 0.42);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-top: 2px;
  text-transform: none;
}

/* ── Category cards empty subline ── */
.cat-card--empty .cat-card-pct {
  font-size: 11.5px !important;
  color: rgba(255, 255, 255, 0.36) !important;
  font-weight: 500 !important;
  letter-spacing: 0.005em !important;
  text-transform: none !important;
}
.cat-card--empty .cat-card-value {
  color: rgba(255, 255, 255, 0.42);
}

/* ── Activation card (replaces the bare .empty-state line) ── */
.empty-state--activation {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 48px 28px 36px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(40, 80, 150, 0.10) 0%, rgba(12, 18, 32, 0.0) 60%),
    rgba(16, 22, 36, 0.62);
  border: 1px solid rgba(74, 130, 240, 0.10);
  overflow: hidden;
  box-shadow:
    0 24px 60px -28px rgba(0, 0, 0, 0.70),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  animation: empty-fade-in .42s var(--ease-premium);
}
@keyframes empty-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.empty-state-aurora {
  position: absolute;
  top: -80px; left: 50%;
  transform: translateX(-50%);
  width: 320px; height: 220px;
  pointer-events: none;
  z-index: 0;
}
.empty-state-orb {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(closest-side, rgba(74, 130, 240, 0.28), rgba(74, 130, 240, 0.0) 72%);
  filter: blur(2px);
}
.empty-state-title,
.empty-state-body,
.empty-state-actions,
.empty-state-quickstart {
  position: relative;
  z-index: 1;
}
.empty-state-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0;
}
.empty-state-body {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.62);
  font-weight: 400;
  max-width: 420px;
  line-height: 1.5;
  margin: 0;
}
.empty-state-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 6px;
}
.empty-cta {
  appearance: none;
  border: none;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 11px 18px;
  cursor: pointer;
  transition: transform .12s var(--ease-out), background .18s var(--ease-out),
              filter .18s var(--ease-out), opacity .18s var(--ease-out);
  min-height: 42px;
}
.empty-cta--primary {
  background: linear-gradient(180deg, var(--aurix-blue) 0%, var(--aurix-blue) 100%);
  color: #fff;
  box-shadow:
    0 6px 18px -6px rgba(74, 130, 240, 0.50),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
.empty-cta--primary:hover { filter: brightness(1.06); }
.empty-cta--primary:active { transform: scale(0.985); }
.empty-cta--secondary {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.empty-cta--secondary:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.empty-cta--secondary:active { transform: scale(0.985); }

.empty-state-quickstart {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.empty-state-quickstart-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}
.empty-state-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 480px;
}
.empty-chip {
  appearance: none;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.80);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.003em;
  cursor: pointer;
  transition: background .16s var(--ease-out), border-color .16s var(--ease-out),
              color .16s var(--ease-out), transform .12s var(--ease-out);
}
.empty-chip:hover {
  background: rgba(74, 130, 240, 0.10);
  border-color: rgba(74, 130, 240, 0.36);
  color: #fff;
}
.empty-chip:active { transform: scale(0.96); }

/* Hide the legacy bare-empty .empty-icon if it ever renders. */
.empty-state--activation .empty-icon { display: none; }

/* Mobile — keep activation card readable, no horizontal overflow,
   buttons stack but stay touch-friendly. The system bottom-nav
   clearance is already applied at the layout level. */
@media (max-width: 520px) {
  .empty-state--activation {
    padding: 38px 18px 28px;
    border-radius: 20px;
  }
  .empty-state-title { font-size: 18px; }
  .empty-state-body  { font-size: 13.5px; }
  .empty-state-actions { width: 100%; flex-direction: column; }
  .empty-cta { width: 100%; }
  .empty-state-chips { gap: 6px; }
  .empty-chip { padding: 6px 12px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .empty-state--activation { animation: none; }
  .empty-cta, .empty-chip { transition: none; }
}

/* CAT-CONTEXT-1: empty state inside a category drill-down hides the
   multi-class quickstart chips and the secondary "explore market" CTA —
   both reference assets outside the active category and would push the
   user back into the generic decision they already made. */
.empty-state[data-empty-category] .empty-state-quickstart,
.empty-state[data-empty-category] .empty-cta--secondary {
  display: none !important;
}

/* AURIX-EMPTY-MOBILE-COMPACT-1: on phones + portrait tablets, the
   quickstart chip row on the dashboard's empty state pushes the
   primary CTAs below the fold. Hide it on the main activation card
   so the first action is reachable without scroll. The :not()
   guard scopes the rule to the dashboard empty state — category
   drill-down empty states already hide chips above and stay
   unaffected. Desktop layout is untouched. */
@media (max-width: 768px) {
  .empty-state--activation:not([data-empty-category]) .empty-state-quickstart {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════════
   AURIX-SIGNALS-2 — Compact dashboard awareness card + Portfolio
   Health bridge. The card is intentionally slim so it never pushes
   the chart down. Detection lives in computeAurixSignal(); rendering
   in renderAurixSignal(); the CTA opens the Portfolio Health panel
   (NOT the full Workspace).
   ══════════════════════════════════════════════════════════════════ */
.aurix-signal {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  /* SIGNALS-3: tightened to 12px top + 12px bottom so the card sits
     evenly between the hero card and the distribution section. */
  margin: 12px 0;
  border-radius: 14px;
  /* AURIX-DASH-V1: reads as a mini Intelligence module embedded in the hero —
     same blue-glass material, electric-blue border and soft glow as .intcc-card,
     so Intelligence feels integrated into the Dashboard. */
  background:
    radial-gradient(120% 140% at 6% 0%, rgba(74,130,240,0.14), transparent 60%),
    linear-gradient(165deg, rgba(30,44,74,0.50), rgba(14,20,34,0.55));
  border: 1px solid rgba(74, 130, 240, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 8px 24px -14px rgba(0,0,0,0.60),
    0 0 22px -6px rgba(74,130,240,0.16);
  backdrop-filter: blur(8px);
  animation: aurix-signal-in .32s var(--ease-premium);
}
/* The icon becomes a small glowing core — a nod to the Intelligence orb. */
.aurix-signal--health .aurix-signal-icon {
  box-shadow: 0 0 16px -2px rgba(74,130,240,0.5), inset 0 0 8px rgba(74,130,240,0.30);
}
/* Rotation cross-fade — dims body + cta while the text swaps.
   SIGNAL-MOBILE-2: adds a 2px translateY so the message slides as it
   fades rather than just dimming. Title stays still per spec. */
.aurix-signal-msg,
.aurix-signal-cta {
  transition: opacity .22s var(--ease-premium), transform .22s var(--ease-premium);
}
.aurix-signal.is-fading .aurix-signal-msg,
.aurix-signal.is-fading .aurix-signal-cta {
  opacity: 0;
  transform: translateY(2px);
}
@media (prefers-reduced-motion: reduce) {
  .aurix-signal-msg,
  .aurix-signal-cta { transition: none; }
  .aurix-signal.is-fading .aurix-signal-msg,
  .aurix-signal.is-fading .aurix-signal-cta { opacity: 1; transform: none; }
}
/* Subtle pulse on the signal icon so the card feels alive without
   demanding attention. Pauses on hover for accessibility. */
.aurix-signal-icon {
  position: relative;
}
.aurix-signal-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 currentColor;
  opacity: 0.0;
  animation: aurix-signal-icon-pulse 2400ms ease-out infinite;
  pointer-events: none;
}
.aurix-signal:hover .aurix-signal-icon::after { animation-play-state: paused; }
@keyframes aurix-signal-icon-pulse {
  0%   { box-shadow: 0 0 0 0   currentColor; opacity: 0.40; }
  100% { box-shadow: 0 0 0 10px currentColor; opacity: 0.0; }
}
@media (prefers-reduced-motion: reduce) {
  .aurix-signal-icon::after { animation: none; opacity: 0; }
}
@keyframes aurix-signal-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.aurix-signal[hidden] { display: none; }

.aurix-signal-icon {
  width: 28px; height: 28px;
  flex: 0 0 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(74, 130, 240, 0.14);
  color: var(--aurix-blue);
}
.aurix-signal-icon svg { width: 14px; height: 14px; }

/* Desktop: single-line layout — [icon] AURIX SIGNAL · message ......... cta */
.aurix-signal-body {
  flex: 1 1 auto;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.aurix-signal-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(180, 200, 240, 0.62);
  flex: 0 0 auto;
  white-space: nowrap;
}
.aurix-signal-title::after {
  content: ' ·';
  margin-left: 4px;
  color: rgba(180, 200, 240, 0.32);
}
.aurix-signal-msg {
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.35;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aurix-signal-cta {
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(74, 130, 240, 0.95);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.003em;
  cursor: pointer;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background .16s var(--ease-out), color .16s var(--ease-out),
              transform .12s var(--ease-out);
}
.aurix-signal-cta:hover {
  background: rgba(74, 130, 240, 0.10);
  color: #fff;
}
.aurix-signal-cta:active { transform: scale(0.96); }
.aurix-signal-cta-arrow {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  margin-left: 2px;
  opacity: 0.85;
}

/* Variant tints — never red/warning. Concentration & single share
   gold; crypto & cash share blue; performance green; loss amber. */
.aurix-signal[data-kind="concentration"] .aurix-signal-icon,
.aurix-signal[data-kind="single"]        .aurix-signal-icon {
  background: rgba(244, 196, 90, 0.16);
  color: #f4c45a;
}
.aurix-signal[data-kind="crypto"] .aurix-signal-icon,
.aurix-signal[data-kind="cash"]   .aurix-signal-icon {
  background: rgba(74, 130, 240, 0.16);
  color: var(--aurix-blue);
}
.aurix-signal[data-kind="performance"] .aurix-signal-icon {
  background: rgba(63, 191, 127, 0.16);
  color: var(--aurix-success);
}
.aurix-signal[data-kind="loss"] .aurix-signal-icon {
  background: rgba(224, 144, 74, 0.16);
  color: #e0904a;
}

/* AURIX-PREMIUM-CLEANUP-1 — Workspace health teaser.
   Status dot inside the icon chip; the chip goes transparent so only the
   tone-coloured dot (+ its existing subtle pulse) reads. The whole card is
   clickable and routes into Workspace. Tones never use red/warning. */
.aurix-signal--health { cursor: pointer; }
.aurix-signal--health:hover { border-color: rgba(74, 130, 240, 0.22); }
.aurix-signal--health .aurix-signal-icon {
  background: transparent;
  border-radius: 50%;
  /* AURIX-DASHBOARD-PREMIUM-PASS-1: compact dot chip for the in-hero row. */
  width: 16px; height: 16px; flex: 0 0 16px;
}
.aurix-signal-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

/* AURIX-HERO-PREMIUM-REFINE-1: the health teaser is now an integrated insight
   ROW inside hero-left — not a bordered mini-card. Drop the card chrome
   (border / background / shadow / fly-in) so it reads as part of the hero
   module; it sits just under the add buttons (which already carry the single
   top divider) separated only by margin. Applies to desktop + mobile. */
.hero-left .aurix-signal {
  width: 100%;
  margin: 12px 0 0;
  padding: 0;
  gap: 8px;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  animation: none;
  min-height: 0;
}
/* AURIX-DASHBOARD-HERO-COMPOSITION-FIX-1: on DESKTOP the health teaser is a
   compact premium PILL that hugs its content ("Salud sólida · Ver análisis ›"),
   NOT a full-width bar (the previous COMPOSITION-1 surface stretched the whole
   column and read as a stray rectangle). align-self:flex-start stops the flex
   column from stretching it; width:fit-content sizes it to the text. Subtle
   glass + hairline + pill radius, soft hover (the row is clickable). Desktop
   only; mobile keeps the compact inline row untouched. */
@media (min-width: 769px) {
  /* AURIX-WEALTH-CARD-HIERARCHY-REFINEMENT-1: reorder the hero-left column to
     value → actions → health WITHOUT touching the DOM. The actions (order:1)
     follow the info block; the health pill (order:2) drops below them as a
     secondary layer. */
  .hero-left .summary-footer {
    order: 1;
    position: relative;
    padding-top: 34px;   /* AURIX-DASH-V4.1: more air between the separator and the buttons (was 22) */
    padding-left: 4px;   /* AURIX-DASH-V4: tiny right-nudge so the buttons balance optically with the wealth block (not flush to the edge) */
  }
  /* AURIX-DASH-V3: premium 1px Aurix-gradient separator between the wealth
     capsule (hero) and the operational buttons. Visual only. */
  .hero-left .summary-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(74,130,240,0.32), transparent);
  }
  /* The health pill now lives INSIDE the capsule — keep its gap from the meta
     row; order/align-self are no-ops in the (block) capsule but harmless. */
  .hero-left .aurix-signal {
    margin-top: 30px;   /* AURIX-DASH-V4.1: more air between patrimonial info and the intelligence pill (was var(--space-4)=20) */
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
    padding: 7px 14px 7px 12px;
    gap: 8px;
    /* AURIX-DASH-V2: mini Intelligence module — blue-glass + soft glow so it
       reads as a diagnostic badge, NOT another button like the add CTAs. */
    background:
      radial-gradient(140% 200% at 0% 0%, rgba(74,130,240,0.18), transparent 72%),
      linear-gradient(180deg, rgba(40,56,94,0.42), rgba(20,28,48,0.34));
    border: 1px solid rgba(74,130,240,0.26);
    border-radius: 999px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.06),
      0 0 18px -6px rgba(74,130,240,0.30);
  }
  .hero-left .aurix-signal:hover {
    background:
      radial-gradient(140% 200% at 0% 0%, rgba(74,130,240,0.24), transparent 72%),
      linear-gradient(180deg, rgba(46,64,104,0.50), rgba(22,30,52,0.40));
    border-color: rgba(74,130,240,0.40);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.08),
      0 0 24px -6px rgba(74,130,240,0.40);
  }
}

/* ════════════════════════════════════════════════════════════════════
   AURIX-WEALTH-CARD-PREMIUM-DESKTOP-1 — flagship polish, DESKTOP ≥1024 ONLY.
   Mobile + tablet (<1024) are frozen: every rule below is inside the query,
   so those breakpoints are pixel-identical. Refine, don't redesign.
   ════════════════════════════════════════════════════════════════════ */
@keyframes aurixVerAnalisisSheen {
  /* Long pause (off-screen), then one slow left→right sweep ≈ every 8s. */
  0%, 72% { transform: translateX(-140%); }
  88%     { transform: translateX(140%); }
  100%    { transform: translateX(140%); }
}
@media (min-width: 1024px) {
  /* 1. Wealth = absolute focus: figure +~7% size ONLY (same typography, weight,
     colour, position) + a layered shadow that lifts it off the surface (depth,
     not neon). 45/42 ≈ +7%. */
  .hero-left .summary-total {
    font-size: clamp(32px, 4.6vw, 48px);   /* AURIX-DASH-V4: ~7% more presence — the figure dominates the screen */
    text-shadow: 0 1px 1px rgba(0,0,0,0.22), 0 0 18px rgba(255,255,255,0.16);
  }
  /* 2/3/6. Vertical balance via dual auto-margins: the free space splits EQUALLY
     above the actions AND above the health pill, so the actions sit a touch
     lower than the info block (elegant breathing) and the health capsule drops
     to a distinct lower "intelligence" layer — leaving a bottom gap that
     optically matches the top margin above "VALOR TOTAL" (padding-top ==
     padding-bottom == --space-5). Buttons + pill themselves are untouched. */
  .hero-left { padding-bottom: 34px; }   /* AURIX-DASH-V4.1: bottom cushion so the block breathes (was var(--space-5)=24) */
  /* AURIX-DASH-V4.2: bring each module toward the central divider to trim the
     dead space facing it. Divider/grid/widths UNTOUCHED — pure inner padding.
     Left content shifts right (+12, padding-left 24→36). The left side breathes
     correctly and is kept as-is. */
  .hero-left  { padding-left: 36px; }
  /* AURIX-DASH-V4.4: the right module was too tight against the divider (V4.2 left
     it at padding-left 8). Give it breathing — the chart TRANSLATES right +14
     (padding-left 8→22, padding-right 36→22) so total horizontal padding stays
     44px and the chart is never resized. Divider/grid untouched; only the right
     block's inner padding changes (the sanctioned mechanism). */
  .hero-right { padding-left: 22px; padding-right: 22px; }
  /* AURIX-DASH-V3: buttons sit just below the capsule (with the gradient divider
     between), not floated to the column bottom. Health pill is inside the capsule. */
  .hero-left .summary-footer { margin-top: 30px; }   /* AURIX-DASH-V4.1: lower the separator a touch (was 22) */
  /* "Añadir liquidez" — equal-weight contrast at desktop. Stays NEUTRAL
     (not Aurix-blue), so it reads as an equal action, never a second primary. */
  .summary-footer .btn-summary-action.btn-secondary {
    background: rgba(255,255,255,0.055);
    border-color: rgba(255,255,255,0.22);
  }
  /* Bloque 3 — raised-key relief: a brighter top inset edge + a faint dark
     bottom inset edge so both actions feel tactile/premium. Additive to the
     existing material; no size/function/hierarchy change. Whisper-subtle. */
  .summary-footer .btn-summary-action.btn-primary {
    /* AURIX-DASH-V2: keep the tactile relief, drop the blue ambient glow. */
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.12),
      inset 0 -1px 0 rgba(0,0,0,0.16),
      0 1px 2px rgba(0,0,0,0.20);
  }
  .summary-footer .btn-summary-action.btn-secondary {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.08),
      inset 0 -1px 0 rgba(0,0,0,0.14);
  }
  /* "Ver análisis" — extremely subtle, low-frequency travelling glow.
     "Aurix is analysing", not "there is an animation". The static blue glow
     (base rule) stays; this adds a faint sheen that sweeps once ≈ every 8s. */
  .aurix-signal--health .aurix-signal-cta { position: relative; overflow: hidden; }
  .aurix-signal--health .aurix-signal-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 38%, rgba(122,166,255,0.20) 50%, transparent 62%);
    transform: translateX(-140%);
    animation: aurixVerAnalisisSheen 8s var(--ease-out) infinite;
    pointer-events: none;
  }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .aurix-signal--health .aurix-signal-cta::after { animation: none; opacity: 0; }
}
/* Tiny, subtle health dot — no glow ring, no status orb, so it never
   competes with the sync dot in the meta row above. */
.hero-left .aurix-signal .aurix-signal-icon {
  width: auto; height: auto; flex: 0 0 auto;
}
.hero-left .aurix-signal .aurix-signal-icon::after { display: none; }
.hero-left .aurix-signal .aurix-signal-dot {
  width: 7px; height: 7px;
  box-shadow: 0 0 6px currentColor;   /* AURIX-DASH-V2: small glowing status core (nods to the Intelligence orb) */
}
/* The state text reuses .aurix-signal-msg styling but should hug the title
   rather than stretch, so the line reads "PORTFOLIO HEALTH · State". */
.aurix-signal--health .aurix-signal-msg { flex: 0 1 auto; }
.aurix-signal[data-tone="solid"]    .aurix-signal-icon { color: var(--aurix-success); }
.aurix-signal[data-tone="moderate"] .aurix-signal-icon { color: #7db8ff; }
.aurix-signal[data-tone="elevated"] .aurix-signal-icon { color: #f4c45a; }
.aurix-signal[data-tone="high"]     .aurix-signal-icon { color: #e0904a; }

/* AURIX-MOBILE-HERO-LOADER-CHART-PREMIUM-1 — health teaser as ONE compact
   insight/action: "Salud sólida · Ver análisis ›". Desktop + mobile.
   • The status dot/orb is removed entirely. Health state is now carried by the
     text alone, so the only green status dot left in the hero is the single
     sync dot in the meta row (no duplicate green indicators).
   • The state text and the CTA sit next to each other (separated by a middot)
     instead of being pushed to opposite edges — the body no longer stretches.
   These rules win over the generic mobile signal bar (icon glass/breath/halo,
   far-right pill) on specificity, so the row reads identically on every size. */
.aurix-signal--health .aurix-signal-icon { display: none; }
/* Scoped under .hero-left so these layout props beat the generic mobile
   signal-bar rules (.aurix-signal {…}) on specificity, not source order. */
.hero-left .aurix-signal--health {
  justify-content: flex-start;
  align-items: baseline;
  gap: 0;
  flex-wrap: nowrap;
}
.aurix-signal--health .aurix-signal-body {
  flex: 0 1 auto;
  flex-direction: row;
  align-items: baseline;
}
.aurix-signal--health .aurix-signal-msg {
  flex: 0 1 auto;
  width: auto;
  max-width: none;
  overflow: visible;
  white-space: nowrap;
}
.aurix-signal--health .aurix-signal-msg::after {
  content: '·';
  margin: 0 7px;
  color: rgba(180, 200, 240, 0.34);
  font-weight: 600;
}
.aurix-signal--health .aurix-signal-cta {
  flex: 0 0 auto;
  height: auto;
  padding: 2px 4px;
  background: transparent;
  border-radius: 8px;
  white-space: nowrap;
  /* AURIX-WEALTH-CARD-HIERARCHY-REFINEMENT-1: a very subtle STATIC blue glow on
     "Ver análisis" — premium hint of intelligence, no continuous motion / no
     shimmer loop (per spec: sin movimiento continuo). */
  text-shadow: 0 0 8px rgba(74, 130, 240, 0.28);
}
.aurix-signal--health .aurix-signal-cta:hover {
  background: rgba(74, 130, 240, 0.10);
  color: #fff;
}

/* AURIX-MOBILE-HERO-V1 — mobile only (≤768px), desktop untouched:
   (1) flatten the inner wealth capsule so the hero CARD is the single premium
       surface (no box-in-box); (2) turn the health teaser into a compact
       blue-glass pill ("Salud sólida · Ver análisis →") that reads as an
       intelligence layer, not loose text. Placed after the base/health rules so
       it wins by source order; .aurix-signal--health beats the generic mobile
       signal-bar rules by specificity. */
@media (max-width: 768px) {
  .summary-hero-zone {
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    width: auto;
    max-width: none;
    margin: 0;
  }
  .hero-left .aurix-signal--health {
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
    margin-top: 14px;
    padding: 7px 14px;
    border-radius: 999px;
    background:
      radial-gradient(140% 200% at 0% 0%, rgba(74,130,240,0.18), transparent 72%),
      linear-gradient(180deg, rgba(40,56,94,0.42), rgba(20,28,48,0.34));
    border: 1px solid rgba(74,130,240,0.26);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.06),
      0 0 18px -6px rgba(74,130,240,0.30);
  }
  .hero-left .aurix-signal--health:active {
    background:
      radial-gradient(140% 200% at 0% 0%, rgba(74,130,240,0.24), transparent 72%),
      linear-gradient(180deg, rgba(46,64,104,0.50), rgba(22,30,52,0.40));
    border-color: rgba(74,130,240,0.40);
  }
}

/* Mobile — premium single-row signal bar:
   [icon 34px] [AURIX SIGNAL / message · ellipsis] [Ver análisis ›]
   The CTA stays on the right (no full-width button, no second row)
   so the card never pushes the chart down. Height ~64–72px. */
@media (max-width: 640px) {
  .aurix-signal {
    flex-wrap: nowrap;
    padding: 10px 12px;
    margin: 10px 0;
    gap: 10px;
    align-items: center;
  }
  .aurix-signal-icon {
    width: 34px; height: 34px;
    flex: 0 0 34px;
    border-radius: 9px;
  }
  .aurix-signal-icon svg { width: 16px; height: 16px; }
  /* Body stacks title (tiny tag) above message — both single-line so
     the CTA stays aligned on the right. */
  .aurix-signal-body {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
  }
  .aurix-signal-title {
    font-size: 9.5px;
    flex: 0 0 auto;
    line-height: 1.1;
    letter-spacing: 0.14em;
  }
  /* No separator dot on mobile — title is its own row. */
  .aurix-signal-title::after { display: none; }
  .aurix-signal-msg {
    font-size: 13px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    max-width: 100%;
  }
  .aurix-signal-cta {
    flex: 0 0 auto;
    flex-shrink: 0;
    height: 30px;
    padding: 0 10px;
    background: rgba(74, 130, 240, 0.10);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: var(--aurix-blue);
    white-space: nowrap;
    line-height: 1;
  }
  .aurix-signal-cta:hover { background: rgba(74, 130, 240, 0.16); color: var(--aurix-blue); }
  .aurix-signal-cta-arrow { margin-left: 0; font-size: 13px; }
}

/* Extreme small viewport (~≤340px): hide the "AURIX SIGNAL" tag so
   message + CTA still fit on one line, and let the message ellipsis
   take any remaining room. */
@media (max-width: 340px) {
  .aurix-signal-title { display: none; }
  .aurix-signal-cta { padding: 0 8px; font-size: 12.5px; }
}

/* SIGNAL-MOBILE-2: premium mobile breath. Replaces the box-shadow
   ring-flash with a GPU-friendly transform + opacity tween on the
   icon container itself. The ::after pseudo runs a paired halo that
   scales out subtly so the breath feels three-dimensional without
   layout cost. Independent of the rotation cross-fade — restarting
   text never resets the breathing cycle. */
@media (max-width: 640px) {
  .aurix-signal-icon {
    /* Glass surface: top highlight + bottom depth + soft tint. */
    background:
      linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.0) 60%),
      rgba(74,130,240,0.16);
    border: 1px solid rgba(74, 130, 240,0.14);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.10),
      inset 0 -1px 0 rgba(0,0,0,0.16);
    width: 36px; height: 36px;
    flex: 0 0 36px;
    border-radius: 10px;
    animation: aurix-signal-icon-breath 5400ms cubic-bezier(0.22, 1, 0.36, 1) infinite;
    will-change: transform, opacity;
  }
  .aurix-signal-icon svg { width: 16px; height: 16px; }
  /* Halo behind the icon — pure transform + opacity, no box-shadow
     animation so the browser can promote it cleanly. */
  .aurix-signal-icon::after {
    background: radial-gradient(circle at 50% 50%, currentColor 0%, rgba(0,0,0,0) 70%);
    opacity: 0.18;
    box-shadow: none;
    animation: aurix-signal-icon-halo 5400ms cubic-bezier(0.22, 1, 0.36, 1) infinite;
    will-change: transform, opacity;
  }
  @keyframes aurix-signal-icon-breath {
    0%, 100% { transform: scale(1.0);    opacity: 0.78; }
    50%      { transform: scale(1.025);  opacity: 1; }
  }
  @keyframes aurix-signal-icon-halo {
    0%, 100% { transform: scale(0.94); opacity: 0.10; }
    50%      { transform: scale(1.16); opacity: 0.22; }
  }
}

/* Tone the variant tints on mobile so the glass background reads
   through the colour overlay (keeps the icon feeling like a surface,
   not a flat block). */
@media (max-width: 640px) {
  .aurix-signal[data-kind="concentration"] .aurix-signal-icon,
  .aurix-signal[data-kind="single"]        .aurix-signal-icon {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.0) 60%),
      rgba(244, 196, 90, 0.18);
    border-color: rgba(244, 196, 90, 0.22);
  }
  .aurix-signal[data-kind="performance"] .aurix-signal-icon {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.0) 60%),
      rgba(63, 191, 127, 0.18);
    border-color: rgba(63, 191, 127, 0.22);
  }
  .aurix-signal[data-kind="loss"] .aurix-signal-icon {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.0) 60%),
      rgba(224, 144, 74, 0.18);
    border-color: rgba(224, 144, 74, 0.22);
  }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .aurix-signal-icon,
  .aurix-signal-icon::after {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aurix-signal { animation: none; }
  .aurix-signal-cta { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════
   AURIX-HEALTH-2 — Portfolio Health experience (#healthOverlay).
   Self-contained surface: header → score ring → metrics row → cards →
   disclaimer + (subtle) advanced link → close. Reuses the canonical
   .modal-overlay / .modal chrome so safe-area, open/close transitions
   and z-index stack with the rest of the app.
   ══════════════════════════════════════════════════════════════════ */
#healthOverlay { z-index: 210; }
.modal--health {
  max-width: 640px;
  background:
    linear-gradient(180deg, rgba(40, 60, 110, 0.20) 0%, rgba(12, 18, 32, 0.0) 50%),
    rgba(10, 14, 24, 0.96);
  border: 1px solid rgba(74, 130, 240, 0.18);
}
/* HEALTH-3 fix: the section selectors below all set display:flex/grid,
   which overrides the built-in `[hidden]` user-agent rule. Force the
   empty branch and its inverse to actually hide when the JS flips
   the `.hidden` property on these containers. */
.modal--health [hidden] { display: none !important; }

.health-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 22px 22px;
  overflow-y: auto;
}

/* ── Empty state (defensive — usually never seen) ── */
.health-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 16px;
  text-align: center;
  color: rgba(255, 255, 255, 0.62);
}
.health-empty-art {
  font-size: 28px;
  color: rgba(74, 130, 240, 0.42);
}
.health-empty-msg {
  margin: 0;
  font-size: 14px;
}

/* ── Score section ── */
.health-score-section {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(74, 130, 240, 0.10) 0%, rgba(12, 18, 32, 0.0) 75%),
    rgba(16, 22, 38, 0.6);
  border: 1px solid rgba(74, 130, 240, 0.16);
}
.health-score-ring {
  width: 96px; height: 96px;
  flex: 0 0 96px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background:
    conic-gradient(var(--health-ring-color, var(--aurix-success)) calc(var(--health-score, 0) * 1%),
                   rgba(255,255,255,0.06) 0);
  transition: --health-score 600ms var(--ease-premium);
}
.health-score-ring::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 999px;
  background: rgba(10, 14, 24, 0.96);
  border: 1px solid rgba(255,255,255,0.04);
}
.health-score-value {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.health-score-num {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.health-score-suffix {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  margin-top: 4px;
  letter-spacing: 0.02em;
}
.health-score-meta {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.health-score-tag {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  align-self: flex-start;
}
.health-score-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.health-score-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--health-ring-color, var(--aurix-success));
  width: 0%;
  transition: width 520ms var(--ease-premium), background 240ms var(--ease-out);
}
.health-score-explain {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
  font-weight: 500;
  letter-spacing: -0.003em;
}

/* Score tone palette — driven by data-tone on the ring */
.health-score-ring[data-tone="solid"]    { --health-ring-color: var(--aurix-success); }
.health-score-ring[data-tone="moderate"] { --health-ring-color: var(--aurix-blue); }
.health-score-ring[data-tone="elevated"] { --health-ring-color: #f4c45a; }
.health-score-ring[data-tone="high"]     { --health-ring-color: #e0904a; }
.health-score-ring[data-tone="solid"]    ~ .health-score-meta .health-score-tag { background: rgba(63, 191, 127, 0.16); color: var(--aurix-success); }
.health-score-ring[data-tone="moderate"] ~ .health-score-meta .health-score-tag { background: rgba(74, 130, 240, 0.16); color: var(--aurix-blue); }
.health-score-ring[data-tone="elevated"] ~ .health-score-meta .health-score-tag { background: rgba(244, 196, 90, 0.16); color: #f4c45a; }
.health-score-ring[data-tone="high"]     ~ .health-score-meta .health-score-tag { background: rgba(224, 144, 74, 0.18); color: #e0904a; }

/* ── Metrics row ── */
.health-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.health-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  min-width: 0;
}
.health-metric-value {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.health-metric-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(180, 200, 240, 0.58);
}

/* ── Diagnostic cards ── */
.health-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.health-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.health-card-title {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(180, 200, 240, 0.66);
}
.health-card-body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(255,255,255,0.84);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.health-card[data-tone="warn"]   { background: rgba(244, 196, 90, 0.07); border-color: rgba(244, 196, 90, 0.20); }
.health-card[data-tone="warn"]   .health-card-title { color: #f4c45a; }
.health-card[data-tone="bad"]    { background: rgba(224, 144, 74, 0.08); border-color: rgba(224, 144, 74, 0.22); }
.health-card[data-tone="bad"]    .health-card-title { color: #e0904a; }
.health-card[data-tone="good"]   { background: rgba(63, 191, 127, 0.07); border-color: rgba(63, 191, 127, 0.20); }
.health-card[data-tone="good"]   .health-card-title { color: var(--aurix-success); }
.health-card[data-tone="info"]   { background: rgba(74, 130, 240, 0.07); border-color: rgba(74, 130, 240, 0.20); }
.health-card[data-tone="info"]   .health-card-title { color: var(--aurix-blue); }

/* ── Disclaimer + advanced link row ── */
.health-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
}
.health-disclaimer {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.42);
  font-style: italic;
  flex: 1 1 auto;
  min-width: 0;
}
.health-advanced-link {
  appearance: none;
  background: transparent;
  border: none;
  color: rgba(74, 130, 240, 0.85);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.003em;
  padding: 4px 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(74, 130, 240, 0.22);
  text-underline-offset: 3px;
  transition: color .16s var(--ease-out), text-decoration-color .16s var(--ease-out);
  flex: 0 0 auto;
}
.health-advanced-link:hover {
  color: var(--aurix-blue);
  text-decoration-color: rgba(74, 130, 240, 0.55);
}

.health-actions {
  display: flex;
  gap: 10px;
}
.health-actions .btn-submit { flex: 1; }
.btn-submit--ghost {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.btn-submit--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* Mobile — centered-safe (same family as settings/reset): the system
   safe-bottom padding lifts the panel above the bottom nav. */
@media (max-width: 768px) {
  #healthOverlay {
    align-items: center;
    justify-content: center;
  }
  .modal--health {
    border-radius: var(--radius-lg);
    width: 100%;
    align-self: center;
    margin-bottom: 0;
  }
  .health-body { padding: 14px 16px 18px; gap: 14px; }
  .health-score-section { padding: 14px 14px; gap: 14px; }
  .health-score-ring { width: 84px; height: 84px; flex-basis: 84px; }
  .health-score-num { font-size: 24px; }
  .health-metrics { grid-template-columns: repeat(2, 1fr); }
  .health-footer-row { flex-direction: column; align-items: flex-start; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .modal--health { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════
   ONBOARDING-2B — premium UX overrides.
   Layered AFTER the ONBOARDING-1 baseline so these refinements win
   without rewriting the existing rules. Targets: richer language &
   experience cards, premium chip selected state, animated activation
   orb + success tick, count chip, microinteractions, tighter rhythm.
   ══════════════════════════════════════════════════════════════════ */

/* Microinteractions — slightly faster, more "Apple/Arc" feel. */
.onb-cta,
.onb-chip,
.onb-lang-card,
.onb-exp-card {
  transition: background .18s var(--ease-premium),
              border-color .18s var(--ease-premium),
              transform .14s var(--ease-premium),
              box-shadow .22s var(--ease-premium),
              color .16s var(--ease-premium),
              filter .18s var(--ease-premium);
}

/* ── Language step ── */
.onb-lang-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(74, 130, 240, 0.06) 0%, rgba(255,255,255,0.0) 60%),
    rgba(255, 255, 255, 0.025);
  padding: 16px 16px 14px;
}
.onb-lang-card:hover {
  background:
    linear-gradient(180deg, rgba(74, 130, 240, 0.10) 0%, rgba(255,255,255,0.0) 60%),
    rgba(255, 255, 255, 0.05);
  border-color: rgba(74, 130, 240, 0.24);
}
.onb-lang-card.is-selected {
  background:
    linear-gradient(180deg, rgba(74, 130, 240, 0.18) 0%, rgba(74, 130, 240, 0.02) 70%),
    rgba(20, 30, 56, 0.6);
  border-color: rgba(74, 130, 240, 0.6);
  box-shadow:
    0 0 0 1px rgba(74, 130, 240, 0.22) inset,
    0 8px 24px -12px rgba(74, 130, 240, 0.45);
}
/* SPEC 45 ONBOARDING FINISH — one selection language across the whole flow: a premium corner check that
   fades / scales in when a card or chip is chosen (Language / Experience / Interests). Absolute → reflow-
   free, so selecting never shifts layout. Replaces the old Language-only dot with a shared glyph. */
.onb-lang-card::after,
.onb-exp-card::after,
#onbInterestsGrid .onb-chip::after {
  content: '✓';
  position: absolute;
  top: 10px; right: 10px;
  width: 17px; height: 17px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1;
  color: transparent;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transform: scale(0.7);
  opacity: 0.5;
  pointer-events: none;
  transition: background .18s var(--ease-premium), border-color .18s var(--ease-premium),
              color .18s var(--ease-premium), transform .18s var(--ease-premium),
              opacity .18s var(--ease-premium);
}
.onb-lang-card.is-selected::after,
.onb-exp-card.is-selected::after,
#onbInterestsGrid .onb-chip.is-selected::after {
  color: #fff;
  background: var(--aurix-blue);
  border-color: rgba(74, 130, 240, 0.6);
  transform: scale(1);
  opacity: 1;
}

/* ── Interests chips — premium selected ── */
.onb-chip.is-selected {
  background:
    linear-gradient(180deg, rgba(74, 130, 240, 0.22) 0%, rgba(74, 130, 240, 0.10) 100%);
  border-color: rgba(74, 130, 240, 0.6);
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(74, 130, 240, 0.18) inset,
    0 6px 18px -10px rgba(74, 130, 240, 0.40);
}

/* ── Experience step ── */
.onb-exp-card {
  position: relative;
  padding: 14px 16px 14px 18px;
}
.onb-exp-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(74, 130, 240, 0.66);
  margin-bottom: 4px;
}
.onb-exp-card.is-selected {
  background:
    linear-gradient(180deg, rgba(74, 130, 240, 0.18) 0%, rgba(74, 130, 240, 0.02) 70%),
    rgba(20, 30, 56, 0.6);
  border-color: rgba(74, 130, 240, 0.6);
  box-shadow:
    0 0 0 1px rgba(74, 130, 240, 0.20) inset,
    0 8px 22px -12px rgba(74, 130, 240, 0.42);
}
.onb-exp-card.is-selected .onb-exp-tag { color: var(--aurix-blue); }

/* ── Activation orb — pulsing rings ── */
.onb-activation-art--orb {
  position: relative;
  width: 84px;
  height: 84px;
  background: none;
  margin: 6px auto 0;
}
.onb-activation-art--orb .onb-activation-icon {
  position: relative;
  z-index: 3;
  font-size: 30px;
  color: #fff;
  font-weight: 300;
  text-shadow: 0 0 14px rgba(74, 130, 240, 0.55);
}
.onb-activation-ring {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 1px solid rgba(74, 130, 240, 0.36);
  background: radial-gradient(circle at 50% 50%, rgba(74, 130, 240, 0.30) 0%, rgba(74, 130, 240, 0.0) 65%);
  animation: onb-orb-pulse 2400ms var(--ease-premium) infinite;
  pointer-events: none;
}
.onb-activation-ring--2 {
  animation-delay: 1200ms;
  border-color: rgba(74, 130, 240, 0.22);
}
@keyframes onb-orb-pulse {
  0%   { transform: scale(0.92); opacity: 0.0; }
  30%  { opacity: 0.95; }
  100% { transform: scale(1.42); opacity: 0.0; }
}

/* ── Success badge with animated tick ── */
.onb-success-art--badge {
  position: relative;
  width: 72px;
  height: 72px;
  background: none;
  margin: 8px auto 2px;
}
.onb-success-ring {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(63, 191, 127, 0.28) 0%, rgba(63, 191, 127, 0.0) 65%);
  border: 1px solid rgba(63, 191, 127, 0.40);
  animation: onb-success-pulse 1800ms var(--ease-premium) 1;
}
.onb-success-tick {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  padding: 22px;
  color: var(--aurix-success);
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: onb-tick-draw 600ms var(--ease-premium) 220ms forwards;
}
@keyframes onb-success-pulse {
  0%   { transform: scale(0.84); opacity: 0; }
  40%  { opacity: 0.95; }
  100% { transform: scale(1.0); opacity: 1; }
}
@keyframes onb-tick-draw {
  to { stroke-dashoffset: 0; }
}

/* ── Success count chip — "Tienes 1 activo" / "Tienes 3 activos" ── */
.onb-success-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(63, 191, 127, 0.10);
  color: var(--aurix-success);
  border: 1px solid rgba(63, 191, 127, 0.28);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.005em;
  margin: -4px auto 2px;
  font-variant-numeric: tabular-nums;
}

/* Success body — slightly muted, closer to chip */
.onb-success-body {
  margin-top: 0 !important;
}

/* ── Tighter vertical rhythm overall ── */
.onb-step {
  padding-top: 36px;
  gap: 12px;
}
.modal--onboarding[data-step="LANGUAGE"]   > .onb-step,
.modal--onboarding[data-step="WELCOME"]    > .onb-step,
.modal--onboarding[data-step="ACTIVATION"] > .onb-step,
.modal--onboarding[data-step="SUCCESS"]    > .onb-step {
  /* Center the content vertically inside the step so single-asset
     screens (welcome / activation / success) don't gravitate to top. */
  justify-content: center;
}
.modal--onboarding {
  /* Slimmer max-height — every step now fits without scrolling. */
  max-height: min(78vh, 560px);
}
.onb-headline {
  font-size: 24px;
}
.onb-sub {
  font-size: 14.5px;
}
.onb-footer {
  padding-top: 16px;
}

/* Mobile premium polish */
@media (max-width: 520px) {
  .onb-step {
    padding: 36px 20px 18px;
    gap: 10px;
  }
  .onb-headline    { font-size: 21px; }
  .onb-sub         { font-size: 13.5px; }
  .onb-activation-art--orb { width: 72px; height: 72px; }
  .onb-success-art--badge  { width: 64px; height: 64px; }
  .onb-bullets { gap: 8px; max-width: 100%; }
  .onb-bullet  { padding: 9px 12px; font-size: 13px; }
  .onb-cta { padding: 12px 16px; font-size: 14px; min-height: 44px; }
  .onb-footer--split { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .onb-activation-ring,
  .onb-success-ring,
  .onb-success-tick {
    animation: none;
  }
  .onb-success-tick { stroke-dashoffset: 0; }
}

/* ══════════════════════════════════════════════════════════════════
   SPEC 45 ONBOARDING FINISH — Language / Interests / Experience polish.
   CSS-only, layered last so it wins without rewriting the baseline. Unifies keyboard focus and the
   selection language, tightens each step's use of space, and keeps every step's hierarchy secondary
   to the Investor Profile (Age lives inside Profile since v538 — untouched here). No markup / JS /
   handler / flow / persistence / engine change.
   ══════════════════════════════════════════════════════════════════ */

/* Unified, accessible keyboard focus across every selectable control (matches the profile cards). */
.onb-lang-card:focus-visible,
#onbInterestsGrid .onb-chip:focus-visible,
.onb-exp-card:focus-visible {
  outline: none;
  border-color: rgba(120, 165, 255, 0.75);
  box-shadow: 0 0 0 3px rgba(74, 130, 240, 0.30);
}

/* ── Language — institutional first impression: the locale code reads as a quiet pill. ── */
.onb-lang-native {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
}
.onb-lang-card.is-selected .onb-lang-native {
  border-color: rgba(74, 130, 240, 0.45);
  background: rgba(74, 130, 240, 0.14);
  color: rgba(206, 222, 255, 0.92);
}

/* ── Interests — a deliberate tile grid (multi-asset), not a generic filter bar. ── */
#onbInterestsGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: var(--space-2);
}
#onbInterestsGrid .onb-chip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 14px;
  padding: 13px 12px;
}

/* ── Experience — reserve room for the corner check; calm, secondary to the profile. ── */
.onb-exp-card { padding-right: 40px; }
.onb-exp-desc { line-height: 1.4; }

@media (max-width: 768px) {
  #onbInterestsGrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 360px) {
  #onbInterestsGrid { gap: 7px; }
  #onbInterestsGrid .onb-chip { padding: 12px 10px; }
  /* Fill alone signals selection when horizontal space is tight. */
  #onbInterestsGrid .onb-chip::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .onb-lang-card::after,
  .onb-exp-card::after,
  #onbInterestsGrid .onb-chip::after { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════
   GOLD-UX-1 — Premium mobile gold entry redesign.
   Adds the STEP 1 type selector (Joyería / Moneda / Lingote),
   contextual karat filtering, premium copy spacing and a safer
   sticky-CTA reserve so the primary button never sits over the
   summary card on phones.
   ══════════════════════════════════════════════════════════════════ */

/* STEP 1 — Tipo de oro */
.gold-field-block--type { margin-bottom: 4px; }
.gold-type-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.gold-type-chip {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(220,230,250,0.86);
  font-family: inherit;
  cursor: pointer;
  transition: background .18s var(--ease-premium),
              border-color .18s var(--ease-premium),
              transform .12s var(--ease-premium),
              box-shadow .22s var(--ease-premium);
  min-height: 78px;
}
.gold-type-chip:hover {
  background: rgba(233,196,106,0.05);
  border-color: rgba(233,196,106,0.32);
}
.gold-type-chip:active { transform: scale(0.985); }
.gold-type-chip.is-active {
  background:
    linear-gradient(180deg, rgba(233,196,106,0.18) 0%, rgba(233,196,106,0.04) 70%),
    rgba(20, 18, 10, 0.6);
  border-color: rgba(233,196,106,0.55);
  color: rgba(255,238,176,0.98);
  box-shadow:
    0 0 0 1px rgba(233,196,106,0.20) inset,
    0 8px 22px -12px rgba(233,196,106,0.40);
}
.gold-type-icon {
  font-size: 22px;
  line-height: 1;
  color: rgba(233,196,106,0.78);
}
.gold-type-chip.is-active .gold-type-icon { color: #ffd66b; }
.gold-type-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
}

/* GOLD-UX-PREMIUM-REBUILD — STEP 2 "Pureza del oro".
   All purity tiers (24/22/18/14/10) plus a "No lo sé" tile are visible
   upfront. The legacy contextual filter + "Ver más quilates" advanced
   disclosure are intentionally gone — they made common karats feel
   hidden and added friction. */
.gold-field-sub {
  font-size: 12px;
  color: rgba(220,230,250,0.50);
  line-height: 1.4;
  margin-top: -4px;
}

/* The "No lo sé" tile reads as a calmer ghost option so it doesn't
   compete with the numeric purity chips for primary attention. */
.gold-chip--unknown {
  background: rgba(255,255,255,0.015);
  border-style: dashed;
  border-color: rgba(255,255,255,0.10);
}
.gold-chip--unknown .gold-chip-title {
  font-size: 14px;
  letter-spacing: -0.002em;
  color: rgba(220,230,250,0.78);
}
.gold-chip--unknown .gold-chip-sub {
  color: rgba(220,230,250,0.42);
}
.gold-chip--unknown:hover {
  border-color: rgba(233,196,106,0.35);
  background: rgba(233,196,106,0.04);
}

/* Compact market card — quieter meta line, less density. */
.gold-market-card { padding: 12px 14px; }
.gold-market-meta { font-size: 11.5px; opacity: 0.6; }

/* GOLD-MOBILE-P0: the gold CTA is now a structural absolute footer
   (see the .modal[data-mode="gold"] .modal-cta rule earlier in the
   file). The body padding-bottom is set there as CTA height + safe
   area + 24px, so no extra reserve is needed here. */

/* Mobile spacing polish — bigger tap targets, gentler rhythm. */
@media (max-width: 520px) {
  .gold-type-chip { min-height: 72px; padding: 12px 8px; }
  .gold-type-icon { font-size: 20px; }
  .gold-type-name { font-size: 12.5px; }
  .gold-field-label { font-size: 12px; }
  .gold-field-sub   { font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .gold-type-chip { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════
   GOLD-UX-2 — Final premium polish: progressive disclosure, CTA
   gating, subtle "more karats" link and demoted market reference.
   ══════════════════════════════════════════════════════════════════ */

/* Vertical rhythm — the gold section is the parent flex container so
   `order` could be used, but we restructure via HTML now and rely on
   tighter gap + visibility gating. */
.form-group--gold {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Progressive disclosure — every block past STEP 1 stays hidden until
   the user picks a gold type. Once they do, STEP 2 (karat) + STEP 3
   (quantity) + valuation surface together; STEP 4 (estimated value)
   reveals once the quantity is valid. The market reference card is
   visible from the start but lives at the bottom so it never
   competes with the user's own choices for hierarchy. */
#goldSection[data-gold-type=""] .gold-field-block:not(.gold-field-block--type),
#goldSection[data-gold-type=""] #goldQtyAnchor,
#goldSection[data-gold-type=""] .gold-section-eyebrow,
#goldSection[data-gold-type=""] .gold-mode-row,
#goldSection[data-gold-type=""] .gold-buyer-block,
#goldSection[data-gold-type=""] .gold-adjust-block,
#goldSection[data-gold-type=""] .gold-summary-card,
#goldSection[data-gold-type=""] .gold-market-card {
  display: none;
}
/* STEP 4: hide the estimated-value card AND the "Ajustar estimación"
   toggle until the user has entered a valid quantity. (Market card
   remains visible once a type is chosen — small, at the bottom, so
   users can still verify it.) */
#goldSection[data-gold-type]:not([data-gold-type=""])[data-gold-qty="0"] .gold-summary-card,
#goldSection[data-gold-type]:not([data-gold-type=""])[data-gold-qty="0"] .gold-adjust-block {
  display: none;
}

/* Más quilatajes — subtle text-link rather than a chunky CTA. */
.gold-more-toggle--subtle {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 4px 0;
  color: rgba(74, 130, 240, 0.78);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.003em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.gold-more-toggle--subtle .gold-more-icon {
  background: transparent;
  width: auto; height: auto;
  font-size: 14px;
  font-weight: 700;
  color: rgba(74, 130, 240, 0.78);
  margin: 0;
}
.gold-more-toggle--subtle:hover { color: var(--aurix-blue); }
.gold-more-toggle--subtle:hover .gold-more-icon { color: var(--aurix-blue); }

/* Demoted market card — compact, secondary tone. */
.gold-market-card--compact {
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
}
.gold-market-card--compact .gold-market-eyebrow {
  font-size: 10.5px;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.10em;
}
.gold-market-card--compact .gold-market-price {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.86);
}
.gold-market-card--compact .gold-market-meta {
  font-size: 11px;
  opacity: 0.55;
  margin-top: 2px;
}

/* CTA disabled state — premium muted, not greyed-out. Mirrors the
   primary blue so the user always reads it as the same control,
   just dimmer. */
.btn-submit:disabled,
.btn-submit.btn-submit--disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: rgba(74, 130, 240, 0.45);
  box-shadow: none;
  filter: saturate(0.6);
}
.btn-submit:disabled:hover,
.btn-submit.btn-submit--disabled:hover {
  transform: none;
  filter: saturate(0.6);
  background: rgba(74, 130, 240, 0.45);
}

/* ══════════════════════════════════════════════════════════════════
   GOLD-UX-3 — Micro polish: context line, fast-path for bars and
   tighter mobile rhythm.
   ══════════════════════════════════════════════════════════════════ */

/* Context line under the estimated value. Soft fade-in so each update
   feels alive without flashing. Empty string (cleared by JS when
   invalid) collapses to zero height. */
.gold-summary-context {
  margin-top: 2px;
  font-size: 12px;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.58);
  font-variant-numeric: tabular-nums;
  min-height: 0;
  transition: opacity .22s var(--ease-premium);
}
.gold-summary-context:empty {
  display: none;
}

/* GOLD-UX-PREMIUM-REBUILD — the previous Lingote fast-path is gone.
   With all purity tiers visible upfront and a per-type preselect (bar
   defaults to 24K), no per-type CSS reshape is needed. */

/* Mobile tightening — slightly less vertical air without crushing
   readability. Applies to both the form-group--gold rhythm and the
   summary-card padding so the user reaches the CTA faster. */
@media (max-width: 520px) {
  .form-group--gold { gap: 12px; }
  .gold-field-block { gap: 6px; }
  .gold-summary-card { padding: 14px 16px; }
  .gold-summary-amount { font-size: 26px; }
  .gold-summary-context { font-size: 11.5px; }
  .gold-section-eyebrow,
  .gold-section-eyebrow--tight { margin-top: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .gold-summary-context { transition: none; }
}

/* ─────────────────────────────────────────────────────────────────
   WORKSPACE-WEB-MODES-1 — desktop workspace persistent view modes.
   Three top-level surfaces (Inteligencia / Hoja / Plantillas) selected
   via a premium segmented switcher at the top of the workspace shell.
   Mobile is untouched — the mobile cockpit owns its own surface and
   already lands on the intelligence narrative directly.
   ───────────────────────────────────────────────────────────────── */
.aurix-ws-modes {
  display: inline-flex;
  align-items: stretch;
  gap: 4px;
  align-self: flex-start;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.025) inset,
    0 6px 18px rgba(0, 0, 0, 0.18);
}
.aurix-ws-mode {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 8px 18px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(225, 233, 255, 0.62);
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.aurix-ws-mode:hover {
  color: rgba(225, 233, 255, 0.92);
  background: rgba(74, 130, 240, 0.06);
}
.aurix-ws-mode.is-active {
  color: #ffffff;
  background: rgba(74, 130, 240, 0.18);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 4px 14px -6px rgba(74, 130, 240, 0.55);
}
.aurix-ws-mode:focus-visible {
  outline: 2px solid rgba(74, 130, 240, 0.55);
  outline-offset: 2px;
}

/* Reusable pill (toolbar buttons in Hoja mode). */
.aurix-ws-pill {
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: #e8e8ea;
  font-family: inherit;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.aurix-ws-pill:hover {
  background: rgba(74, 130, 240, 0.10);
  border-color: rgba(74, 130, 240, 0.32);
}
.aurix-ws-pill.is-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.10);
  color: rgba(225, 233, 255, 0.78);
}
.aurix-ws-pill.is-ghost:hover {
  color: #ffffff;
  border-color: rgba(74, 130, 240, 0.40);
  background: rgba(74, 130, 240, 0.06);
}

/* Sheet mode — the workspace body now hosts only the grid; remove the
   220px right-rail track that the legacy "spreadsheet + intel side"
   layout reserved. */
.aurix-workspace-shell[data-ws-mode="sheet"] .aurix-workspace-body {
  grid-template-columns: minmax(0, 1fr);
}

/* Intelligence mode — full-width single column. */
.aurix-workspace-shell[data-ws-mode="intelligence"] {
  overflow: hidden;
}
.aurix-ws-intel-mode {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 22px 28px 28px;
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.025) inset,
    0 10px 28px rgba(0, 0, 0, 0.20);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.aurix-ws-intel-mode.is-empty {
  align-items: center;
  justify-content: center;
}
/* Within intelligence mode, the dimension grid breathes more on
   desktop and the signals stack pads up — they finally have room. */
.aurix-ws-intel-mode .ws-intel-dim-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.aurix-ws-intel-mode .ws-intel-signal-stack {
  gap: 10px;
}

/* ════════ AURIX-WORKSPACE-EXECUTIVE-INTELLIGENCE-1 ═══════════════════════════
   Desktop executive patrimonial report. Scoped entirely under
   .aurix-ws-intel-mode (desktop intelligence mode) — no .is-mobile, sheet or
   templates rule is touched. Built on Aurix Design System tokens. */

/* Premium dark canvas (replaces the flat gray card look behind the report). */
.aurix-ws-intel-mode.is-exec {
  padding: 24px clamp(20px, 2.2vw, 34px) 32px;
  gap: 22px;
  background:
    radial-gradient(140% 120% at 0% 0%, rgba(74, 130, 240, 0.05) 0%, transparent 46%),
    linear-gradient(180deg, rgba(14, 19, 30, 0.72) 0%, rgba(8, 11, 18, 0.78) 100%);
  border-color: var(--aurix-border);
}

/* ── Block 1 — Executive hero band (≈68% hero / ≈32% matrix) ── */
.aurix-ws-intel-mode .ws-exec-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 0.47fr);
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 1140px) {
  .aurix-ws-intel-mode .ws-exec-band {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}

/* Hero — the dominant conclusion. */
.aurix-ws-intel-mode .ws-exec-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 30px 32px 30px;
  border-radius: 22px;
  border: 1px solid var(--aurix-blue-border);
  background:
    radial-gradient(125% 135% at 10% -10%, rgba(74, 130, 240, 0.18) 0%, rgba(74, 130, 240, 0.05) 36%, transparent 68%),
    linear-gradient(162deg, var(--aurix-surface) 0%, rgba(11, 16, 26, 0.92) 100%);
  box-shadow:
    0 26px 64px -36px var(--aurix-blue-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.aurix-ws-intel-mode .ws-exec-hero::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--aurix-blue), transparent);
  opacity: 0.55;
}
.aurix-ws-intel-mode .ws-exec-hero-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--aurix-blue-light);
}
.aurix-ws-intel-mode .ws-exec-hero-title {
  margin: 0;
  font-size: clamp(23px, 2.3vw, 33px);
  line-height: 1.13;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: 28ch;
}
.aurix-ws-intel-mode .ws-exec-hero-lead {
  margin: 2px 0 0;
  font-size: 15.5px;
  line-height: 1.5;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  max-width: 62ch;
}
.aurix-ws-intel-mode .ws-exec-hero-body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--aurix-text-secondary);
  max-width: 66ch;
}
.aurix-ws-intel-mode .ws-exec-hero-watch {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 7px 0 0;
  padding: 12px 14px;
  border-radius: 13px;
  background: var(--aurix-blue-soft);
  border: 1px solid var(--aurix-blue-border);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}
.aurix-ws-intel-mode .ws-exec-hero-watch-ic { color: var(--aurix-blue-light); margin-top: 1px; }

/* Hero tone variants — recolor the glow/border by severity, keep dominance. */
.aurix-ws-intel-mode .ws-exec-hero.is-warn {
  border-color: rgba(233, 168, 87, 0.32);
  background:
    radial-gradient(125% 135% at 10% -10%, rgba(233, 168, 87, 0.16) 0%, rgba(233, 168, 87, 0.04) 36%, transparent 68%),
    linear-gradient(162deg, rgba(40, 31, 18, 0.55) 0%, rgba(11, 16, 26, 0.92) 100%);
  box-shadow: 0 26px 64px -36px rgba(233, 168, 87, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.aurix-ws-intel-mode .ws-exec-hero.is-warn::before { background: linear-gradient(90deg, transparent, var(--aurix-warning), transparent); }
.aurix-ws-intel-mode .ws-exec-hero.is-warn .ws-exec-hero-eyebrow { color: var(--aurix-warning); }
.aurix-ws-intel-mode .ws-exec-hero.is-warn .ws-exec-hero-watch {
  background: rgba(233, 168, 87, 0.12);
  border-color: rgba(233, 168, 87, 0.3);
}
.aurix-ws-intel-mode .ws-exec-hero.is-warn .ws-exec-hero-watch-ic { color: var(--aurix-warning); }
/* AURIX-BRAND-PREMIUM-HEADER-2 (P1): the hero is the Aurix brand surface, so it
   stays blue-dominant even when the portfolio reads positive (slightly richer
   blue than neutral). Green is reserved for the Health metric and Strength
   signals — never the hero. */
.aurix-ws-intel-mode .ws-exec-hero.is-positive {
  border-color: var(--aurix-blue-border);
  background:
    radial-gradient(125% 135% at 10% -10%, rgba(74, 130, 240, 0.2) 0%, rgba(74, 130, 240, 0.055) 36%, transparent 68%),
    linear-gradient(162deg, var(--aurix-surface) 0%, rgba(11, 16, 26, 0.92) 100%);
  box-shadow: 0 26px 64px -36px var(--aurix-blue-glow), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.aurix-ws-intel-mode .ws-exec-hero.is-positive::before { background: linear-gradient(90deg, transparent, var(--aurix-blue), transparent); }
.aurix-ws-intel-mode .ws-exec-hero.is-positive .ws-exec-hero-eyebrow { color: var(--aurix-blue-light); }

/* Health Matrix — compact, terminal-grade, secondary to the hero. */
.aurix-ws-intel-mode .ws-exec-matrix {
  display: flex;
  flex-direction: column;
  padding: 16px 16px 6px;
  border-radius: 18px;
  border: 1px solid var(--aurix-border);
  background: linear-gradient(180deg, rgba(17, 23, 35, 0.7) 0%, rgba(10, 14, 22, 0.7) 100%);
  /* AURIX-BRAND-PREMIUM-HEADER-2 (P1): Level-2 depth, secondary to the hero. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 26px -20px rgba(0, 0, 0, 0.55);
}
.aurix-ws-intel-mode .ws-exec-matrix-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aurix-text-secondary);
  padding: 0 2px 12px;
  border-bottom: 1px solid var(--aurix-border);
}
.aurix-ws-intel-mode .ws-exec-metric {
  display: grid;
  grid-template-columns: 3px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 13px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.aurix-ws-intel-mode .ws-exec-metric:last-child { border-bottom: 0; }
.aurix-ws-intel-mode .ws-exec-metric-bar { width: 3px; height: 26px; border-radius: 2px; background: var(--aurix-blue); }
.aurix-ws-intel-mode .ws-exec-metric-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aurix-ws-intel-mode .ws-exec-metric-label { font-size: 13px; font-weight: 600; color: #fff; }
.aurix-ws-intel-mode .ws-exec-metric-sub {
  font-size: 11px; color: var(--aurix-text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aurix-ws-intel-mode .ws-exec-metric-value {
  font-size: 17px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums;
}
/* Tone mapping (engine tones → DS colors). */
/* AURIX-BRAND-PREMIUM-HEADER-2 (P1): positive/solid reads Aurix blue across the
   matrix to cut green dominance; only the Health row keeps green (Salud = verde). */
.aurix-ws-intel-mode .ws-exec-metric.is-positive .ws-exec-metric-bar,
.aurix-ws-intel-mode .ws-exec-metric.is-solid .ws-exec-metric-bar { background: var(--aurix-blue); }
.aurix-ws-intel-mode .ws-exec-metric.is-positive .ws-exec-metric-value,
.aurix-ws-intel-mode .ws-exec-metric.is-solid .ws-exec-metric-value { color: var(--aurix-blue-light); }
.aurix-ws-intel-mode .ws-exec-metric--health.is-positive .ws-exec-metric-bar,
.aurix-ws-intel-mode .ws-exec-metric--health.is-solid .ws-exec-metric-bar { background: var(--aurix-success); }
.aurix-ws-intel-mode .ws-exec-metric--health.is-positive .ws-exec-metric-value,
.aurix-ws-intel-mode .ws-exec-metric--health.is-solid .ws-exec-metric-value { color: var(--aurix-success); }
.aurix-ws-intel-mode .ws-exec-metric.is-warn .ws-exec-metric-bar,
.aurix-ws-intel-mode .ws-exec-metric.is-elevated .ws-exec-metric-bar,
.aurix-ws-intel-mode .ws-exec-metric.is-high .ws-exec-metric-bar { background: var(--aurix-warning); }
.aurix-ws-intel-mode .ws-exec-metric.is-warn .ws-exec-metric-value,
.aurix-ws-intel-mode .ws-exec-metric.is-elevated .ws-exec-metric-value,
.aurix-ws-intel-mode .ws-exec-metric.is-high .ws-exec-metric-value { color: var(--aurix-warning); }
.aurix-ws-intel-mode .ws-exec-metric.is-info .ws-exec-metric-bar,
.aurix-ws-intel-mode .ws-exec-metric.is-moderate .ws-exec-metric-bar { background: var(--aurix-blue); }
.aurix-ws-intel-mode .ws-exec-metric.is-neutral .ws-exec-metric-bar { background: var(--aurix-text-secondary); opacity: 0.5; }

/* ── Section framing (shared by Dimensions + Signals) ── */
.aurix-ws-intel-mode .ws-exec-section { display: flex; flex-direction: column; gap: 13px; }
.aurix-ws-intel-mode .ws-exec-section-title {
  margin: 0;
  padding-left: 2px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aurix-text-secondary);
  display: flex;
  align-items: center;
  gap: 12px;
}
.aurix-ws-intel-mode .ws-exec-section-title::after {
  content: ''; flex: 1; height: 1px; background: var(--aurix-border);
}

/* ── Block 2 — Portfolio Dimensions (clean cards, more air) ── */
.aurix-ws-intel-mode .ws-exec-dim-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1024px) {
  .aurix-ws-intel-mode .ws-exec-dim-grid { grid-template-columns: repeat(2, 1fr); }
}
.aurix-ws-intel-mode .ws-exec-dim {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 19px 18px 20px;
  border-radius: 16px;
  /* AURIX-BRAND-PREMIUM-HEADER-2 (P1): Level-2 material — subtle top-light
     gradient + soft depth shadow so cards read as a clear tier below the hero. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.012) 100%);
  border: 1px solid var(--aurix-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 26px -20px rgba(0, 0, 0, 0.55);
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.aurix-ws-intel-mode .ws-exec-dim:hover {
  border-color: var(--aurix-blue-border);
  background: rgba(74, 130, 240, 0.05);
  transform: translateY(-2px);
}
.aurix-ws-intel-mode .ws-exec-dim::before {
  content: '';
  position: absolute;
  top: 0; left: 18px; right: 18px;
  height: 2px; border-radius: 0 0 2px 2px;
  background: var(--aurix-blue);
  opacity: 0.7;
}
.aurix-ws-intel-mode .ws-exec-dim.is-positive::before { background: var(--aurix-blue); }
.aurix-ws-intel-mode .ws-exec-dim.is-warn::before { background: var(--aurix-warning); }
.aurix-ws-intel-mode .ws-exec-dim.is-neutral::before { background: var(--aurix-text-secondary); opacity: 0.4; }
.aurix-ws-intel-mode .ws-exec-dim-head { display: flex; align-items: center; gap: 9px; }
.aurix-ws-intel-mode .ws-exec-dim-idx {
  font-size: 11px; font-weight: 700; color: var(--aurix-blue-light);
  font-variant-numeric: tabular-nums; opacity: 0.85;
}
.aurix-ws-intel-mode .ws-exec-dim-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--aurix-text-secondary);
}
.aurix-ws-intel-mode .ws-exec-dim-state {
  font-size: 18px; font-weight: 700; color: #fff; letter-spacing: -0.01em;
}
.aurix-ws-intel-mode .ws-exec-dim.is-positive .ws-exec-dim-state { color: var(--aurix-blue-light); }
.aurix-ws-intel-mode .ws-exec-dim.is-warn .ws-exec-dim-state { color: var(--aurix-warning); }
.aurix-ws-intel-mode .ws-exec-dim.is-info .ws-exec-dim-state { color: var(--aurix-blue-light); }
.aurix-ws-intel-mode .ws-exec-dim-why {
  margin: 0; font-size: 13px; line-height: 1.5; color: var(--aurix-text-secondary);
}

/* ── Block 3 — Signals as actionable conclusions ── */
.aurix-ws-intel-mode .ws-exec-signal-stack { display: flex; flex-direction: column; gap: 10px; }
.aurix-ws-intel-mode .ws-exec-signal {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px 18px;
  border-radius: 14px;
  /* AURIX-BRAND-PREMIUM-HEADER-2 (P1): Level-2 material, matching the dimensions. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.012) 100%);
  border: 1px solid var(--aurix-border);
  border-left: 3px solid var(--aurix-blue);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 26px -20px rgba(0, 0, 0, 0.55);
  transition: border-color 0.16s ease, background 0.16s ease;
}
.aurix-ws-intel-mode .ws-exec-signal:hover { background: rgba(255, 255, 255, 0.04); }
.aurix-ws-intel-mode .ws-exec-signal.is-strength  { border-left-color: var(--aurix-success); }
.aurix-ws-intel-mode .ws-exec-signal.is-attention { border-left-color: var(--aurix-warning); }
.aurix-ws-intel-mode .ws-exec-signal.is-risk      { border-left-color: var(--aurix-danger); }
.aurix-ws-intel-mode .ws-exec-signal.is-context   { border-left-color: var(--aurix-blue); }
.aurix-ws-intel-mode .ws-exec-signal-ic {
  width: 40px; height: 40px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700;
  background: var(--aurix-blue-soft); color: var(--aurix-blue-light);
  border: 1px solid var(--aurix-blue-border);
}
.aurix-ws-intel-mode .ws-exec-signal.is-strength .ws-exec-signal-ic {
  background: rgba(63, 191, 127, 0.14); color: var(--aurix-success); border-color: rgba(63, 191, 127, 0.3);
}
.aurix-ws-intel-mode .ws-exec-signal.is-attention .ws-exec-signal-ic {
  background: rgba(233, 168, 87, 0.14); color: var(--aurix-warning); border-color: rgba(233, 168, 87, 0.3);
}
.aurix-ws-intel-mode .ws-exec-signal.is-risk .ws-exec-signal-ic {
  background: rgba(224, 90, 90, 0.14); color: var(--aurix-danger); border-color: rgba(224, 90, 90, 0.3);
}
.aurix-ws-intel-mode .ws-exec-signal-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.aurix-ws-intel-mode .ws-exec-signal-head { display: flex; align-items: center; gap: 10px; }
.aurix-ws-intel-mode .ws-exec-signal-level {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--aurix-blue-light);
}
.aurix-ws-intel-mode .ws-exec-signal.is-strength  .ws-exec-signal-level { color: var(--aurix-success); }
.aurix-ws-intel-mode .ws-exec-signal.is-attention .ws-exec-signal-level { color: var(--aurix-warning); }
.aurix-ws-intel-mode .ws-exec-signal.is-risk      .ws-exec-signal-level { color: var(--aurix-danger); }
.aurix-ws-intel-mode .ws-exec-signal-cat {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--aurix-text-secondary);
}
.aurix-ws-intel-mode .ws-exec-signal-cat::before { content: '·'; margin-right: 8px; opacity: 0.5; }
.aurix-ws-intel-mode .ws-exec-signal-title { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.3; }
.aurix-ws-intel-mode .ws-exec-signal-msg {
  margin: 0; font-size: 13px; line-height: 1.55; color: var(--aurix-text-secondary);
}

/* Templates mode — polished placeholder gallery. */
.aurix-workspace-shell[data-ws-mode="templates"] {
  overflow: hidden;
}
.aurix-ws-templates-mode {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 28px 32px 32px;
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.025) inset,
    0 10px 28px rgba(0, 0, 0, 0.20);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.aurix-ws-templates-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 640px;
}
.aurix-ws-templates-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: rgba(225, 233, 255, 0.94);
}
.aurix-ws-templates-sub {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: rgba(225, 233, 255, 0.74);
}
.aurix-ws-templates-hint {
  margin: 0;
  font-size: 12.5px;
  color: rgba(220, 230, 250, 0.55);
}
.aurix-ws-tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.aurix-ws-tpl-card {
  position: relative;
  padding: 18px 18px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 120px;
  cursor: not-allowed;
  opacity: 0.78;
  transition: transform 0.15s ease, opacity 0.15s ease, border-color 0.15s ease;
}
.aurix-ws-tpl-card:hover {
  opacity: 1;
  border-color: rgba(74, 130, 240, 0.22);
  transform: translateY(-1px);
}
.aurix-ws-tpl-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(74, 130, 240, 0.12);
  color: rgba(225, 233, 255, 0.92);
  font-size: 16px;
  font-weight: 600;
}
.aurix-ws-tpl-title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(225, 233, 255, 0.94);
  letter-spacing: -0.003em;
}
.aurix-ws-tpl-tag {
  margin-top: auto;
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(220, 230, 250, 0.62);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 700;
}

/* WS.1 — active (clickable) premium planning templates */
.aurix-ws-tpl-card.is-active {
  cursor: pointer;
  opacity: 1;
  text-align: left;
  font: inherit;
  color: inherit;
  background: linear-gradient(180deg, rgba(74,130,240,0.06), rgba(255,255,255,0.02));
  border-color: rgba(74, 130, 240, 0.22);
  -webkit-appearance: none;
  appearance: none;
}
.aurix-ws-tpl-card.is-active:hover {
  border-color: rgba(74, 130, 240, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.28);
}
.aurix-ws-tpl-card.is-active:active { transform: translateY(0); }
.aurix-ws-tpl-card.is-active:focus-visible { outline: 2px solid rgba(74,130,240,0.6); outline-offset: 2px; }
.aurix-ws-tpl-desc {
  font-size: 12px;
  line-height: 1.45;
  color: rgba(220, 230, 250, 0.62);
}
.aurix-ws-tpl-cta {
  margin-top: auto;
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(74, 130, 240, 0.16);
  border: 1px solid rgba(74, 130, 240, 0.34);
  color: rgba(225, 233, 255, 0.95);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.aurix-ws-tpl-soon-head {
  margin: 22px 0 2px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(220, 230, 250, 0.42);
}
.aurix-ws-tpl-grid.is-soon { opacity: 0.9; }

/* ════════ AURIX-ASSET-DETAIL-1 · own-screen asset detail ════════ */
.asset-detail{ max-width: 760px; margin: 0 auto; padding: 6px 0 48px; }
.ad2-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 22px; }
.ad2-back{ display:inline-flex; align-items:center; gap:8px; background:none; border:1px solid var(--border-subtle); color:var(--text-muted); border-radius:12px; padding:8px 14px; font:inherit; font-size:14px; cursor:pointer; transition:color .18s, border-color .18s; }
.ad2-back:hover{ color:var(--text-bright); border-color:var(--border-strong); }
.ad2-manage{ position:relative; }
.ad2-manage-btn{ display:inline-flex; align-items:center; gap:6px; background:rgba(74, 130, 240,.12); border:1px solid rgba(74, 130, 240,.30); color:var(--accent); border-radius:12px; padding:9px 16px; font:inherit; font-size:14px; font-weight:600; cursor:pointer; transition:background .18s; }
.ad2-manage-btn:hover{ background:rgba(74, 130, 240,.18); }
.ad2-menu{ position:absolute; top:calc(100% + 8px); right:0; min-width:224px; background:var(--bg-card,#11161f); border:1px solid var(--border-subtle); border-radius:14px; box-shadow:0 24px 60px -24px rgba(0,0,0,.7); padding:6px; z-index:30; display:flex; flex-direction:column; }
.ad2-menu[hidden]{ display:none; }
.ad2-menu button{ text-align:left; background:none; border:none; color:var(--text-bright); font:inherit; font-size:14.5px; padding:11px 14px; border-radius:10px; cursor:pointer; transition:background .15s; }
.ad2-menu button:hover{ background:rgba(255,255,255,.06); }
.ad2-menu .ad2-menu-danger{ color:var(--red); }

.ad2-hero{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin-bottom:30px; }
.ad2-badge{ margin-bottom:8px; }
.ad2-id{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.ad2-name{ font-size:22px; font-weight:700; color:var(--text-bright); letter-spacing:-.02em; }
.ad2-ticker{ font-size:13.5px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }
.ad2-value{ font-size:clamp(38px,7.5vw,54px); font-weight:800; letter-spacing:-.03em; color:#fff; font-variant-numeric:tabular-nums; line-height:1.04; margin-top:6px; }

.ad2-metrics{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:6px; }
.ad2-metric{ border:1px solid var(--border-subtle); border-radius:16px; padding:18px; background:var(--surface-2); display:flex; flex-direction:column; gap:7px; }
.ad2-k{ font-size:12.5px; color:var(--text-muted); letter-spacing:.01em; }
.ad2-v{ font-size:20px; font-weight:700; color:var(--text-bright); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.ad2-v.up{ color:var(--green); }
.ad2-v.down{ color:var(--red); }

.ad2-block{ border-top:1px solid var(--border-subtle); padding-top:24px; margin-top:28px; }
.ad2-block-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.ad2-block-head h3{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--text-muted); margin:0; }
.ad2-muted{ color:var(--text-muted); font-size:14px; }

.ad2-evo-filters{ display:flex; gap:4px; }
.ad2-evo-filters button{ background:none; border:1px solid var(--border-subtle); color:var(--text-muted); font:inherit; font-size:12px; font-weight:600; padding:5px 10px; border-radius:8px; cursor:default; }
.ad2-evo-filters button.is-active{ background:rgba(74, 130, 240,.14); color:var(--accent); border-color:rgba(74, 130, 240,.30); }
.ad2-evo-body{ min-height:120px; display:flex; align-items:center; justify-content:center; border:1px dashed var(--border-subtle); border-radius:14px; background:rgba(255,255,255,.015); }

.ad2-history-list{ display:flex; flex-direction:column; }
.ad2-tx{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:13px 4px; border-bottom:1px solid var(--border-subtle); }
.ad2-tx:last-child{ border-bottom:none; }
.ad2-tx-type{ font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px; background:rgba(255,255,255,.06); color:var(--text-muted); }
.ad2-tx.up .ad2-tx-type{ color:var(--green); background:rgba(63, 191, 127,.12); }
.ad2-tx.down .ad2-tx-type{ color:var(--red); background:rgba(224, 90, 90,.12); }
.ad2-tx-meta{ font-size:13px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.ad2-tx-amount{ font-size:14px; font-weight:600; color:var(--text-bright); font-variant-numeric:tabular-nums; }

.ad2-insights-list{ display:flex; flex-direction:column; gap:10px; }
.ad2-insight{ border:1px solid var(--border-subtle); border-left:3px solid var(--accent); border-radius:12px; padding:14px 16px; font-size:14.5px; line-height:1.5; color:var(--text-bright); background:rgba(255,255,255,.02); }

@media (max-width:560px){
  .ad2-metric{ padding:14px; }
  .ad2-v{ font-size:18px; }
  .ad2-tx{ grid-template-columns:auto 1fr; row-gap:4px; }
  .ad2-tx-amount{ grid-column:2; justify-self:end; }
}

/* ════════ AURIX-ASSET-MANAGE-OVERLAY-1 · per-row Gestionar + sheet ════════ */
/* AURIX-MOBILE-DASHBOARD-CATEGORY-FIX-1 (#7): premium pill — clearly a button,
   not loose grey text. Rounded, blue glass, brighter label, hover glow + focus
   ring, tap feedback. The row's 18px right padding keeps it off the edge. */
.dar-manage{ background:rgba(74, 130, 240,.12); border:1px solid rgba(74, 130, 240,.34); color:var(--aurix-blue-light,var(--aurix-blue)); font:inherit; font-size:12.5px; font-weight:600; padding:7px 15px; border-radius:999px; cursor:pointer; white-space:nowrap; transition:background .16s, border-color .16s, box-shadow .16s, transform .12s; }
.dar-manage:hover{ background:rgba(74, 130, 240,.20); border-color:rgba(74, 130, 240,.52); box-shadow:0 0 0 3px rgba(74, 130, 240,.12); }
.dar-manage:active{ transform:scale(.97); }
.dar-manage:focus-visible{ outline:2px solid var(--aurix-blue-light,var(--aurix-blue)); outline-offset:2px; }

.manage-overlay{ position:fixed; inset:0; z-index:200; display:none; }
.manage-overlay.open{ display:block; }
.manage-overlay::before{ content:''; position:absolute; inset:0; background:rgba(4,6,12,.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.manage-sheet{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(420px,92vw);
  background:var(--bg-card,#11161f); border:1px solid var(--border-subtle); border-radius:20px; padding:18px;
  box-shadow:0 40px 100px -40px rgba(0,0,0,.85); animation:mngPop .22s ease; }
@keyframes mngPop{ from{opacity:0; transform:translate(-50%,-46%) scale(.98)} to{opacity:1; transform:translate(-50%,-50%) scale(1)} }
.manage-head{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.manage-id{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto; }
.manage-name{ font-size:16px; font-weight:700; color:var(--text-bright); letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.manage-ticker{ font-size:12px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; }
.manage-x{ flex:0 0 auto; background:none; border:none; color:var(--text-muted); font-size:24px; line-height:1; cursor:pointer; padding:0 4px; }
.manage-x:hover{ color:var(--text-bright); }
.manage-actions{ display:flex; flex-direction:column; gap:4px; }
.manage-act{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:none; border:none; color:var(--text-bright); font:inherit; font-size:15px; padding:13px 12px; border-radius:12px; cursor:pointer; transition:background .15s; }
.manage-act:hover{ background:rgba(255,255,255,.05); }
.manage-act-ic{ width:26px; height:26px; flex:0 0 26px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; background:rgba(255,255,255,.06); color:var(--text-muted); font-size:15px; }
.manage-act--danger{ color:var(--red); }
.manage-act--danger .manage-act-ic{ color:var(--red); background:rgba(224, 90, 90,.12); }
.manage-chevron{ margin-left:auto; color:var(--text-muted); font-size:12px; }
.manage-tx{ margin-top:8px; border-top:1px solid var(--border-subtle); padding-top:10px; max-height:240px; overflow:auto; }
.manage-tx[hidden]{ display:none; }
.mng-tx-row{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid var(--border-subtle); }
.mng-tx-row:last-child{ border-bottom:none; }
.mng-tx-type{ font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.06); color:var(--text-muted); }
.mng-tx-row.up .mng-tx-type{ color:var(--green); background:rgba(63, 191, 127,.12); }
.mng-tx-row.down .mng-tx-type{ color:var(--red); background:rgba(224, 90, 90,.12); }
.mng-tx-meta{ font-size:12px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.mng-tx-amount{ font-size:13px; font-weight:600; color:var(--text-bright); font-variant-numeric:tabular-nums; }
.mng-tx-empty{ color:var(--text-muted); font-size:13.5px; padding:8px 4px; }

@media (max-width:560px){
  .manage-sheet{ left:0; right:0; top:auto; bottom:0; transform:none; width:100%; max-width:none;
    border-radius:20px 20px 0 0; padding:18px 16px calc(18px + env(safe-area-inset-bottom)); animation:mngUp .24s ease; }
  @keyframes mngUp{ from{transform:translateY(16px); opacity:.6} to{transform:none; opacity:1} }
  .mng-tx-row{ grid-template-columns:auto 1fr; row-gap:3px; }
  .mng-tx-amount{ grid-column:2; justify-self:end; }
}

/* ════════════════════════════════════════════════════════════════════════
   AURIX-MOBILE-POLISH-1 — native-app mobile refinements (must win the cascade,
   so this block lives last). Scoped to ≤768px; desktop is untouched.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* AURIX-MOBILE-DASHBOARD-CATEGORY-FIX-1 (#3): reverted the labelled
     "+ Añadir activo / + Añadir liquidez" buttons here — they took too much
     vertical space in the hero card. The original compact "+" FAB
     (.portfolio-actions-mobile / .fab-trigger, defined earlier) is restored:
     it sits at the right of the meta row and opens the add flow on tap.
     A small premium upgrade to that FAB lives in the dedicated block below. */

  /* #8 — vertical rhythm. Keep the slider card visually tied to the hero card
     (no dead band between them) without compressing the content. */
  .portfolio-slider-card { margin-top: var(--space-2) !important; }
  .categories-section    { margin-top: var(--space-2); }

  /* #10 — 641–768px range. The desktop hero-card is a 2-column grid
     (value | chart), but the chart half (.hero-right) is hidden ≤768px, which
     left an empty right column with the value/buttons cramped on the left.
     Collapse the card to a single full-width column across the whole mobile
     range (it only did so ≤640px before).
     AURIX-MOBILE-DASHBOARD-CATEGORY-FIX-1 (#4): NO !important here — it would
     beat render()'s inline `display:none` and keep the global value card
     visible inside a category. Same specificity as the base `.hero-card`
     grid, so source order (this block is last) already wins on mobile, while
     the inline display:none can still hide the card in category view. */
  .hero-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    grid-template-columns: 1fr;
  }
  .hero-left {
    height: auto;
    border-right: none;
    border-bottom: none;
  }
}

/* ══════════════════════════════════════════════════════════════════
   AURIX-HOLDINGS-PREMIUM-UI-1 — holdings polish (UI/UX only). No data,
   financial calc, persistence, FX, snapshots, chart, Market or PCE touched.
   Append-only + encapsulated so it is trivially reversible.
   ══════════════════════════════════════════════════════════════════ */

/* 1 — Stock / ETF logos integrated with the dark theme. FMP stock images often
   carry a white background and, drawn raw at a 50% circle, read as a harsh
   white sticker on the dark Aurix surface. Frame them in a subtle dark chip
   with a thin blue border (the crypto-icon language) and inset the mark as a
   rounded-square so the white never dominates. Crypto / metal / cash keep their
   clean transparent marks (untouched). */
.asset-badge.stock.badge--has-logo,
.asset-badge.etf.badge--has-logo,
.dar-badge.stock.badge--has-logo,
.dar-badge.etf.badge--has-logo {
  background: radial-gradient(circle at 50% 36%, rgba(42,56,92,0.55) 0%, rgba(15,21,37,0.92) 100%) !important;
  border: 1px solid rgba(74,130,240,0.26) !important;
  box-shadow: 0 0 0 1px rgba(8,12,22,0.45) inset !important;
}
.asset-badge.stock .asset-badge-logo,
.asset-badge.etf .asset-badge-logo,
.dar-badge.stock .asset-badge-logo,
.dar-badge.etf .asset-badge-logo {
  width: 66%;
  height: 66%;
  border-radius: 6px;            /* rounded-square, never a full white disc */
  object-fit: contain;
}

/* 2 — The card / detail-row BODY is no longer a click target (only "Gestionar"
   opens actions), so it must not read as interactive. */
.asset-card,
.detail-asset-row { cursor: default; }

/* 3 — Premium "Gestionar" pill — the single action trigger, consistent on web
   and mobile. Overrides the cramped 28px square it inherited from
   `.dar-actions button` on desktop, so the web list no longer reads as flat. */
.dar-actions .dar-manage {
  width: auto;
  min-height: 32px;
  padding: 7px 14px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(228,236,255,0.95);
  background: linear-gradient(180deg, rgba(74,130,240,0.20), rgba(74,130,240,0.10));
  border: 1px solid rgba(74,130,240,0.34);
  transition: background 0.15s var(--ease-out, ease), border-color 0.15s var(--ease-out, ease), transform 0.12s var(--ease-premium, ease);
}
.dar-actions .dar-manage:hover {
  background: linear-gradient(180deg, rgba(74,130,240,0.30), rgba(74,130,240,0.16));
  border-color: rgba(74,130,240,0.52);
  color: #fff;
}
.dar-actions .dar-manage:active { transform: scale(0.96); }

/* ══════════════════════════════════════════════════════════════════
   AURIX-ASSET-ACTION-SHEET-PREMIUM-1 — "Gestionar activo" sheet polish.
   UI/UX only — no buy/sell/tx/delete logic, persistence, sync or calc touched.
   Shared sheet markup (#assetManageOverlay) → applies to every asset/category,
   web + mobile. The header badge had NO sized container, so the shared
   buildBadgeHtml logo had no reference box and wide ETF/fund marks (SPDR,
   iShares) blew up to their intrinsic width. Pin a fixed premium container.
   ══════════════════════════════════════════════════════════════════ */

/* 1 — Header icon: fixed, balanced container (same icon language as holdings). */
.manage-badge {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 34%, rgba(42,56,92,0.50) 0%, rgba(15,21,37,0.92) 100%);
  border: 1px solid rgba(74,130,240,0.18);      /* very soft, not dominant */
  box-shadow: 0 0 0 1px rgba(8,12,22,0.4) inset;
}
/* The inner badge just fills the container — the container is the single frame
   (no double chip / border from the holdings rules). */
.manage-badge .mng-badge-inner {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* Logo: always CONTAINED + padded → never gigante, never cropped, never half
   the header. Works for square (AAPL) and wide (SPDR/iShares) marks alike. */
.manage-badge .asset-badge-logo {
  width: 72%;
  height: 72%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 7px;
  padding: 0;
}
/* Fallback (no logo): premium initial / institutional monogram (passed by
   openAssetManage), centered and legible. Shown ONLY when there is no logo —
   when a logo loads, .badge--has-logo keeps the text hidden (no overlap). */
.manage-badge .mng-badge-inner:not(.badge--has-logo) .asset-badge-text {
  display: inline-flex;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: rgba(228,236,255,0.92);
}
@media (min-width: 560px) {
  .manage-badge { width: 64px; height: 64px; flex-basis: 64px; border-radius: 16px; }
  .manage-badge .mng-badge-inner:not(.badge--has-logo) .asset-badge-text { font-size: 17px; }
}

/* 2 — Action rows: consistent height, premium per-action icon capsules. */
.manage-act { min-height: 48px; }
.manage-act-ic {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  border-radius: 9px;
  font-size: 16px;
  font-weight: 700;
}
.manage-act[data-mng-act="buy"]  .manage-act-ic { color: #5ad19a; background: rgba(63,191,127,0.14); }
.manage-act[data-mng-act="sell"] .manage-act-ic { color: #e0a85a; background: rgba(224,168,90,0.14); }
.manage-act[data-mng-act="tx"]   .manage-act-ic { color: rgba(200,214,240,0.92); background: rgba(255,255,255,0.07); }
.manage-act[data-mng-act="del"]  .manage-act-ic { color: #e06a6a; background: rgba(224,90,90,0.12); }
.manage-act--danger { color: rgba(232,150,150,0.95); }
.manage-act:hover           { background: rgba(255,255,255,0.05); }
.manage-act--danger:hover   { background: rgba(224,90,90,0.09); }
.manage-act:active          { transform: scale(0.99); }

/* AURIX-ASSET-MANAGE-FLOW-1 — sheet container: Aurix dark surface (not flat
   grey) + subtle blue border + soft premium glow, matching the filter-sheet
   language. UI only. */
.manage-sheet {
  background:
    linear-gradient(180deg, rgba(28,42,74,0.32) 0%, rgba(12,18,32,0.0) 46%),
    rgba(10,14,24,0.97) !important;
  border: 1px solid rgba(74,130,240,0.22) !important;
  box-shadow:
    0 40px 100px -40px rgba(2,6,14,0.90),
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 0 38px -18px rgba(74,130,240,0.34) !important;   /* soft Aurix glow */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ══════════════════════════════════════════════════════════════════
   AURIX-HOLDING-CONTEXTUAL-BUY-SELL-1 — premium Aurix treatment for the
   contextual "Aumentar / Reducir posición" panels (scoped by overlay id so the
   shared .modal chrome elsewhere is untouched). UI only. Buy keeps the green
   confirm, Sell the amber confirm (existing btn-submit--green/--orange).
   ══════════════════════════════════════════════════════════════════ */
#addOverlay .modal,
#reduceOverlay .modal {
  background:
    linear-gradient(180deg, rgba(28,42,74,0.30) 0%, rgba(12,18,32,0.0) 46%),
    rgba(10,14,24,0.96) !important;
  border: 1px solid rgba(74,130,240,0.22) !important;
  box-shadow:
    0 40px 100px -40px rgba(2,6,14,0.90),
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 0 36px -18px rgba(74,130,240,0.30) !important;
}
/* Internal preview card → subtle blue-bordered Aurix card (not flat grey). */
#addOverlay .reduce-preview,
#reduceOverlay .reduce-preview {
  border: 1px solid rgba(74,130,240,0.16);
  background: rgba(74,130,240,0.04);
  border-radius: 12px;
  padding: 10px 12px;
}
/* Inputs: blue Aurix focus ring. */
#addOverlay #addQty:focus,
#reduceOverlay #reduceQty:focus {
  border-color: rgba(74,130,240,0.55);
  box-shadow: 0 0 0 3px rgba(74,130,240,0.14);
  outline: none;
}
/* AURIX-CONTEXTUAL-ADD-FIX-1 — asset preview card inside the contextual panels:
   was flat grey (var(--bg-card-2)); make it Aurix dark-blue with a soft blue
   border + glow, and frame the icon in a consistent Aurix container. Scoped to
   these overlays so the shared .reduce-asset-info elsewhere is untouched. */
#addOverlay .reduce-asset-info,
#reduceOverlay .reduce-asset-info {
  background: radial-gradient(circle at 18% 0%, rgba(42,56,92,0.40) 0%, rgba(13,18,32,0.92) 70%);
  border: 1px solid rgba(122,162,255,0.25);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset, 0 0 28px -16px rgba(74,130,240,0.40);
  border-radius: 14px;
  padding: 12px 14px;
}
#addOverlay .reduce-asset-info .asset-badge,
#reduceOverlay .reduce-asset-info .asset-badge {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  flex-shrink: 0;
}
#addOverlay .reduce-asset-info .asset-badge .asset-badge-logo,
#reduceOverlay .reduce-asset-info .asset-badge .asset-badge-logo {
  width: 66%;
  height: 66%;
  object-fit: contain;
}

/* AURIX-CHART-INSTITUTIONAL-PHASE2 — contextual note under the chart headline
   (baseline "Histórico desde …" / "Incluye movimientos de cartera"). Subtle,
   premium, never competes with the % headline. */
.chart-baseline-note {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(150, 170, 210, 0.62);
}
.chart-baseline-note[hidden] { display: none; }

/* ── AURIX-PREMIUM-CONFIRM-DIALOG-1 ──────────────────────────────
   Premium replacement for native confirm() (destructive actions).
   Aurix dark-blue sheet + soft blue glow, border rgba(122,162,255,.25).
   Sits above modal overlays (z 9500) but below toasts (z 9999). */
.aurix-confirm-host {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .2s var(--ease-out, ease);
}
.aurix-confirm-host.is-open { opacity: 1; }
.aurix-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 12, .62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.aurix-confirm {
  position: relative;
  width: min(380px, 92vw);
  background:
    linear-gradient(180deg, rgba(28, 42, 74, 0.34) 0%, rgba(12, 18, 32, 0.0) 48%),
    rgba(10, 14, 24, 0.97);
  border: 1px solid rgba(122, 162, 255, 0.25);
  border-radius: 18px;
  padding: 20px 20px 16px;
  box-shadow:
    0 40px 100px -40px rgba(2, 6, 14, 0.90),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset,
    0 0 40px -18px rgba(74, 130, 240, 0.40);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transform: translateY(8px) scale(.98);
  transition: transform .22s var(--ease-premium, cubic-bezier(0.22, 1, 0.36, 1));
}
.aurix-confirm-host.is-open .aurix-confirm { transform: translateY(0) scale(1); }
.aurix-confirm-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: rgba(232, 238, 255, 0.98);
  margin-bottom: 8px;
}
.aurix-confirm-msg {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(190, 204, 232, 0.88);
  margin-bottom: 18px;
}
.aurix-confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.aurix-confirm-btn {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s var(--ease-out, ease), border-color .15s var(--ease-out, ease), filter .15s var(--ease-out, ease), transform .12s var(--ease-premium, ease);
}
.aurix-confirm-btn:active { transform: scale(0.97); }
.aurix-confirm-cancel {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
  color: rgba(220, 228, 245, 0.92);
}
.aurix-confirm-cancel:hover { background: rgba(255, 255, 255, 0.10); }
.aurix-confirm-danger {
  background: linear-gradient(180deg, rgba(224, 90, 90, 0.92), rgba(196, 64, 64, 0.92));
  border-color: rgba(255, 140, 140, 0.35);
  color: #fff;
}
.aurix-confirm-danger:hover { filter: brightness(1.06); }
.aurix-confirm-primary {
  background: linear-gradient(180deg, rgba(74, 130, 240, 0.95), rgba(48, 96, 200, 0.95));
  border-color: rgba(140, 176, 255, 0.40);
  color: #fff;
}
.aurix-confirm-primary:hover { filter: brightness(1.06); }
@media (max-width: 420px) {
  .aurix-confirm-actions { flex-direction: column-reverse; }
  .aurix-confirm-btn { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════════
   SPEC 4.1B — PCE founder validation overlay. Founder-only (mounted only when
   localStorage aurix_pce_founder === '1'); invisible to every normal user.
   ════════════════════════════════════════════════════════════════════════ */
.aurix-pce-ov {
  position: fixed; z-index: 100000; right: 12px; bottom: 12px;
  width: min(560px, 96vw); max-height: 70vh; overflow: auto;
  background: rgba(10, 14, 22, 0.97); color: #e6edff;
  border: 1px solid rgba(120, 160, 240, 0.32); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  font: 11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.aurix-pce-ov .pce-ov-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: sticky; top: 0; background: inherit;
}
.aurix-pce-ov .pce-ov-title { font-weight: 700; letter-spacing: 0.02em; color: #8aa6ff; }
.aurix-pce-ov .pce-ov-actions { display: flex; gap: 6px; }
.aurix-pce-ov button {
  background: rgba(74, 130, 240, 0.18); color: #dce7ff; cursor: pointer;
  border: 1px solid rgba(120, 160, 240, 0.35); border-radius: 7px;
  padding: 4px 8px; font: inherit; font-weight: 600;
}
.aurix-pce-ov button:hover { background: rgba(74, 130, 240, 0.3); }
.aurix-pce-ov .pce-ov-body { padding: 6px 8px; }
.aurix-pce-ov.is-collapsed .pce-ov-body,
.aurix-pce-ov.is-collapsed .pce-ov-foot { display: none; }
.aurix-pce-ov .pce-ov-tbl { width: 100%; border-collapse: collapse; }
.aurix-pce-ov .pce-ov-tbl th,
.aurix-pce-ov .pce-ov-tbl td {
  text-align: left; padding: 4px 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: top; white-space: nowrap;
}
.aurix-pce-ov .pce-ov-tbl th { color: rgba(220, 230, 250, 0.6); font-weight: 600; }
.aurix-pce-ov .pce-sub { color: rgba(200, 210, 235, 0.5); font-size: 9.5px; }
.aurix-pce-ov .pce-ok { color: #2ecc84; }
.aurix-pce-ov .pce-dim { color: rgba(200, 210, 235, 0.45); }
.aurix-pce-ov .pce-bad { color: #ff8a8a; font-weight: 700; }
.aurix-pce-ov .pce-ov-subtitle { padding: 10px 4px 4px; color: #8aa6ff; font-weight: 700; letter-spacing: 0.02em; }
.aurix-pce-ov .pce-ov-note { padding: 6px 4px 2px; color: rgba(200, 210, 235, 0.5); font-size: 9.5px; }
.aurix-pce-ov .pce-ov-foot {
  padding: 8px 10px; border-top: 1px solid rgba(255, 255, 255, 0.08);
  position: sticky; bottom: 0; background: inherit;
}
.aurix-pce-ov .pce-ov-foot button { background: rgba(224, 90, 90, 0.18); border-color: rgba(224, 90, 90, 0.4); color: #ffd9d9; }
.aurix-pce-ov .pce-ov-foot button:hover { background: rgba(224, 90, 90, 0.3); }
@media (max-width: 600px) {
  .aurix-pce-ov { right: 6px; left: 6px; bottom: 6px; width: auto; max-height: 60vh; font-size: 10px; }
  .aurix-pce-ov .pce-ov-tbl th, .aurix-pce-ov .pce-ov-tbl td { padding: 3px 4px; }
}

/* ════════ WL.2 — Wealth Location (Fase 2) ════════════════════════════════════
   First visible slice: optional location/custodian capture in the add/edit
   modal + a "Dónde está tu patrimonio" card on the Intelligence surface.
   Encapsulated under wl-loc-* classes; desktop + mobile. No alarmist styling. */

/* — Add/edit modal: optional location field (nested in #qtyGroup) — */
.wl-loc-field {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border-subtle);
}
.wl-loc-field-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.wl-loc-field-inputs {
  display: grid;
  grid-template-columns: minmax(110px, 0.8fr) 1.2fr;
  gap: 8px;
}
.wl-loc-field-type,
.wl-loc-field-provider {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-sm, 10px);
  border: 1px solid var(--color-border-subtle);
  background: var(--bg-card-2, rgba(255,255,255,0.03));
  color: var(--text-bright);
  font-size: 13px;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.wl-loc-field-type:focus,
.wl-loc-field-provider:focus {
  outline: none;
  border-color: rgba(79, 142, 247, 0.45);
}
.wl-loc-field-provider::placeholder { color: var(--text-dim, rgba(255,255,255,0.35)); }
@media (max-width: 520px) {
  .wl-loc-field-inputs { grid-template-columns: 1fr; }
}

/* — Intelligence card: "Dónde está tu patrimonio" — */
.wl-loc-card {
  margin-top: 16px;
  padding: 20px;
  border-radius: var(--radius-lg, 16px);
  border: 1px solid var(--color-border-subtle);
  background: var(--bg-card, rgba(255,255,255,0.02));
}
.wl-loc-head { margin-bottom: 16px; }
.wl-loc-title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: var(--font-weight-semibold, 600);
  color: var(--text-bright);
  letter-spacing: 0.01em;
}
.wl-loc-sub {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
}
.wl-loc-empty {
  margin: 4px 0 0;
  padding: 14px 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
  opacity: 0.85;
}
.wl-loc-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wl-loc-row { position: relative; }
.wl-loc-row-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 7px;
}
.wl-loc-row-name {
  font-size: 13.5px;
  font-weight: var(--font-weight-medium, 500);
  color: var(--text-bright);
}
.wl-loc-row-type {
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 2px 7px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 999px;
  opacity: 0.75;
}
.wl-loc-row-pct {
  margin-left: auto;
  font-size: 13px;
  font-weight: var(--font-weight-semibold, 600);
  color: var(--text-bright);
  font-variant-numeric: tabular-nums;
}
.wl-loc-row-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.wl-loc-row-bar {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(79,142,247,0.85), rgba(99,179,237,0.65));
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.wl-loc-row.is-unassigned .wl-loc-row-bar {
  background: rgba(255,255,255,0.18);
}
.wl-loc-row.is-unassigned .wl-loc-row-name { color: var(--text-muted); }
.wl-loc-row-val {
  display: block;
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ════════ INT.1 — Premium Portfolio Intelligence ════════════════════════════
   "A personal financial analyst explaining my wealth" — clean hierarchy,
   elegant cards, generous spacing, calm (non-alarmist) severity colours.
   Encapsulated under .int-premium; responsive. */
.int-premium {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 860px;
  margin: 0 auto;
  padding: 4px 16px 40px;
}
.int-premium.is-empty { min-height: 40vh; justify-content: center; }

/* INT.1R — desktop premium layout. Stop looking like a stretched mobile column:
   widen the canvas and arrange the blocks in a balanced 2-column grid (the
   wealth reading + signals stay full-width as the lead; drivers / liquidity sit
   side by side; areas-to-watch spans full width). */
@media (min-width: 1024px) {
  .int-premium {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    max-width: 1140px;
    padding: 8px 28px 48px;
    align-items: start;
  }
  .int-exec,
  .int-block--signals,
  .int-block--review,
  .int-disclaimer { grid-column: 1 / -1; }
  .int-block--drivers   { grid-column: 1 / 2; }
  .int-block--liquidity { grid-column: 2 / 3; }
  /* On the wide canvas the signal cards breathe in a 2-up grid. */
  .int-block--signals .int-signals { grid-template-columns: repeat(2, 1fr); }
  .int-exec { padding: 26px 30px 26px 32px; }
}
@media (min-width: 1440px) {
  .int-premium { max-width: 1240px; }
}
.int-empty-card {
  text-align: center;
  padding: 40px 24px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg, 16px);
  background: var(--bg-card, rgba(255,255,255,0.02));
}
.int-empty-title { margin: 0 0 8px; font-size: 16px; font-weight: 600; color: var(--text-bright); }
.int-empty-body  { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.5; }

/* 1 — Executive summary (dominant, calm) */
.int-exec {
  position: relative;
  padding: 22px 24px 22px 28px;
  border-radius: var(--radius-lg, 16px);
  border: 1px solid var(--color-border-subtle);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
  overflow: hidden;
}
.int-exec::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: rgba(120, 160, 230, 0.55);
}
.int-exec.is-positive::before { background: rgba(39, 199, 104, 0.55); }
.int-exec.is-info::before     { background: rgba(79, 142, 247, 0.55); }
.int-exec.is-watch::before    { background: rgba(232, 176, 84, 0.6); }
.int-exec-eyebrow {
  display: block;
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 10px;
}
.int-exec-line {
  margin: 0 0 6px; font-size: 15px; line-height: 1.55; color: var(--text-bright);
  font-weight: 500; letter-spacing: 0.01em;
}
.int-exec-line:last-child { margin-bottom: 0; }
.int-exec-line ~ .int-exec-line { color: var(--text-muted); font-weight: 400; font-size: 14px; }

/* Generic block */
.int-block {
  padding: 20px;
  border-radius: var(--radius-lg, 16px);
  border: 1px solid var(--color-border-subtle);
  background: var(--bg-card, rgba(255,255,255,0.02));
}
.int-block-title {
  margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--text-bright);
}

/* 2 — Signals */
.int-signals { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.int-signal {
  padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--color-border-subtle);
  background: rgba(255,255,255,0.018);
}
.int-signal-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.int-signal-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: rgba(120,160,230,0.8); }
.int-signal.is-positive .int-signal-dot { background: rgba(39,199,104,0.9); }
.int-signal.is-info     .int-signal-dot { background: rgba(79,142,247,0.9); }
.int-signal.is-watch    .int-signal-dot { background: rgba(232,176,84,0.95); }
.int-signal-title { font-size: 13px; font-weight: 600; color: var(--text-bright); }
.int-signal-metric {
  margin-left: auto; font-size: 12px; font-weight: 700; color: var(--text-bright);
  font-variant-numeric: tabular-nums; opacity: 0.85;
}
.int-signal-body { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }

/* 3 — Drivers */
.int-driver-lines { margin-bottom: 14px; }
.int-driver-line { margin: 0 0 6px; font-size: 13.5px; line-height: 1.5; color: var(--text-bright); }
.int-driver-line:last-child { margin-bottom: 0; }
.int-driver-bars { display: flex; flex-direction: column; gap: 10px; }
.int-driver-row { display: grid; grid-template-columns: minmax(70px, 1.1fr) 2fr auto; align-items: center; gap: 10px; }
.int-driver-name { font-size: 12.5px; color: var(--text-bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.int-driver-track, .int-liq-track { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.06); overflow: hidden; }
.int-driver-bar { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, rgba(79,142,247,0.85), rgba(99,179,237,0.6)); }
.int-driver-pct { font-size: 12px; font-weight: 600; color: var(--text-bright); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }

/* 4 — Liquidity */
.int-liq-lead { margin: 0 0 4px; font-size: 13.5px; line-height: 1.5; color: var(--text-bright); }
.int-liq-note { margin: 0 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
/* INT.1R — neutral real-estate context note (never alarmist, never a % bar). */
.int-liq-re-note {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--color-border-subtle);
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
}
.int-liq-rows { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.int-liq-row { display: grid; grid-template-columns: minmax(90px, 1fr) 2fr auto; align-items: center; gap: 10px; }
.int-liq-label { font-size: 12.5px; color: var(--text-muted); }
.int-liq-bar { display: block; height: 100%; border-radius: 999px; background: rgba(255,255,255,0.32); }
.int-liq-row.is-cash       .int-liq-bar { background: linear-gradient(90deg, rgba(39,199,104,0.8), rgba(72,207,173,0.6)); }
.int-liq-row.is-market     .int-liq-bar { background: linear-gradient(90deg, rgba(79,142,247,0.8), rgba(99,179,237,0.6)); }
.int-liq-row.is-realestate .int-liq-bar { background: rgba(180,170,150,0.5); }
.int-liq-pct { font-size: 12px; font-weight: 600; color: var(--text-bright); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.int-liq-row + .int-liq-row { margin-top: 0; }
.int-block .wl-loc-card { margin-top: 18px; }

/* 5 — Review areas */
.int-review-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.int-review-item {
  position: relative; padding-left: 22px; font-size: 13px; line-height: 1.5; color: var(--text-bright);
}
.int-review-item::before {
  content: '→'; position: absolute; left: 0; top: 0;
  color: rgba(79,142,247,0.8); font-weight: 700;
}

.int-disclaimer {
  margin: 4px 2px 0; font-size: 11px; line-height: 1.5; color: var(--text-muted);
  opacity: 0.7; text-align: center;
}

@media (max-width: 640px) {
  .int-premium { padding: 4px 12px 32px; gap: 14px; }
  .int-signals { grid-template-columns: 1fr; }
  .int-exec { padding: 18px 18px 18px 22px; }
  .int-exec-line { font-size: 14px; }
  .int-block { padding: 16px; }
}

/* ════════ INT.2 — Aurix Intelligence Command Center ═════════════════════════
   "The place where Aurix interprets your wealth." Premium glass surfaces, a
   living energy orb, a wealth radar, an explainable health score, inline
   exploration, identity, watch areas and a timeline. Encapsulated under
   .aurix-intcc; mobile = prioritised flex column, desktop = professional grid.
   Real estate is context only — never a bar, score input or driver here. */

.aurix-intelligence-screen { width: 100%; }

.aurix-intcc {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 760px;
  margin: 0 auto;
  padding: 6px 14px 40px;
}
.aurix-intcc.is-empty { min-height: 46vh; justify-content: center; }

/* Reveal-on-mount stagger (disabled under reduced motion below). */
.aurix-intcc > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.aurix-intcc.is-revealed > * { opacity: 1; transform: none; }
.aurix-intcc.is-revealed > *:nth-child(1) { transition-delay: 0.02s; }
.aurix-intcc.is-revealed > *:nth-child(2) { transition-delay: 0.07s; }
.aurix-intcc.is-revealed > *:nth-child(3) { transition-delay: 0.12s; }
.aurix-intcc.is-revealed > *:nth-child(4) { transition-delay: 0.17s; }
.aurix-intcc.is-revealed > *:nth-child(5) { transition-delay: 0.22s; }
.aurix-intcc.is-revealed > *:nth-child(6) { transition-delay: 0.27s; }
.aurix-intcc.is-revealed > *:nth-child(7) { transition-delay: 0.32s; }
.aurix-intcc.is-revealed > *:nth-child(8) { transition-delay: 0.37s; }
.aurix-intcc.is-revealed > *:nth-child(9) { transition-delay: 0.42s; }

/* Shared card surface — INT.2P: navy/blue glass, not flat grey */
.intcc-card {
  position: relative;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(74,130,240,0.16);
  background:
    radial-gradient(140% 120% at 12% 0%, rgba(74,130,240,0.10), transparent 58%),
    linear-gradient(165deg, rgba(32,44,72,0.50), rgba(15,21,37,0.62));
  backdrop-filter: blur(10px);
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.intcc-card:hover {
  border-color: rgba(74,130,240,0.42);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.32), 0 0 0 1px rgba(74,130,240,0.12), 0 0 28px rgba(74,130,240,0.10);
}
/* INT.2ZA — refined title accent: a small premium glowing dot (was a wide dash
   that read like a big hyphen). Same accent on every Intelligence title. */
.intcc-card-title::before {
  content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--aurix-blue, #4A82F0); vertical-align: middle;
  margin-right: 9px; opacity: 0.95; position: relative; top: -1px;
  box-shadow: 0 0 6px rgba(74,130,240,0.55);
}
/* INT.2Z — unified Intelligence title system: same Aurix-blue, weight, tracking,
   accent dash and spacing across every card (Salud, Radar, Factores, Explora,
   Áreas, Timeline) so the whole tab reads as one system. */
.intcc-card-title {
  margin: 0 0 14px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(159,194,255,0.95);
}
.intcc-empty-card {
  text-align: center; padding: 44px 24px;
  border: 1px solid var(--color-border-subtle); border-radius: 18px;
  background: var(--bg-card, rgba(255,255,255,0.02));
}
.intcc-empty-title { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: var(--text-bright); }
.intcc-empty-body  { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.55; }

/* INT.2Y — mobile-only Intelligence cards. Hidden on desktop/tablet; the ≤640
   block reveals them and hides the desktop hero. Keeps desktop fully intact. */
.intcc-m-card { display: none; }

/* ── Bloque 1 — Hero wealth reading + energy orb ── */
.intcc-hero {
  position: relative;
  display: flex; align-items: center; gap: 30px;
  padding: 20px 32px;                /* INT.2S Bloque 4 — tighter, radar sooner */
  border-radius: 22px;
  border: 1px solid rgba(77,141,255,0.30);
  background:
    radial-gradient(120% 150% at 8% 8%, rgba(77,141,255,0.16), transparent 56%),
    radial-gradient(120% 150% at 92% 92%, rgba(37,99,235,0.14), transparent 60%),
    linear-gradient(165deg, rgba(30,46,82,0.62), rgba(13,19,36,0.62));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 18px 50px rgba(0,0,0,0.34);
  overflow: hidden;
  --orb-c: 77,141,255;               /* electric Aurix blue #4D8DFF (Bloque 3) */
  transition: box-shadow 240ms ease, border-color 240ms ease;
}
/* Hover: subtle shimmer + glow lift (Bloque 3 — glow +10%, core +2px) */
.intcc-hero:hover {
  border-color: rgba(77,141,255,0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 22px 62px rgba(0,0,0,0.42), 0 0 44px rgba(77,141,255,0.16);
}
.intcc-hero:hover .intcc-orb-glow { opacity: 1; transform: scale(1.06); }
.intcc-hero:hover .intcc-orb-core { transform: translateY(-2px); box-shadow: 0 0 36px rgba(var(--orb-c),0.98), inset 0 0 14px rgba(255,255,255,0.5), inset 0 -4px 10px rgba(var(--orb-c),0.6); }

/* INT.2S Bloque 1 — institutional 3-zone hero: SCORE · MESSAGE · ORB */
/* AURIX-INTCC-V1.4: Salud — same premium visual FAMILY as the Inteligencia
   sub-card (blue-glass + diffuse Aurix halo + slightly brighter border) and a
   touch wider (+24px via horizontal padding) for more score presence. Tuned to
   stay BELOW Inteligencia's prominence (weaker glow spread/alpha) — same family,
   not same importance. Height/structure/score/proportions unchanged. */
.intcc-hero-score {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 12px 28px;   /* +24px width vs V1.3's 16 — only horizontal padding */
  border-radius: 16px;
  border: 1px solid rgba(120,160,255,0.20);   /* slightly brighter, Inteligencia-family hue */
  background:
    radial-gradient(130% 130% at 12% 0%, rgba(74,130,240,0.11), transparent 60%),
    linear-gradient(165deg, rgba(34,48,80,0.46), rgba(15,21,37,0.32));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 8px 26px -18px rgba(77,141,255,0.5),   /* diffuse halo — Inteligencia family, weaker spread */
    0 0 22px -14px rgba(77,141,255,0.38);    /* soft outer glow */
}
.intcc-hero .intcc-score-ring { position: relative; width: 116px; height: 116px; display: grid; place-items: center; }
.intcc-hero .intcc-score-svg  { width: 116px; height: 116px; }
.intcc-hero-score .intcc-health-badge { margin: 2px 0 0; }
.intcc-hero-health-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; color: rgba(159,194,255,0.95); text-transform: uppercase; }
/* INT.2ZC — desktop/tablet hero: the Inteligencia module groups body + orb as one
   block (sibling to the Salud module). Hidden hero (≤640) is unaffected; mobile
   uses the dedicated .intcc-m-* cards. */
.intcc-hero-intel { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 20px; }
.intcc-hero-body { flex: 1 1 auto; min-width: 0; padding-left: 22px; }   /* AURIX-INTCC-V2.1: insight a touch further toward the sphere (was 16, position only) */
.intcc-hero .intcc-score-val { font-size: 33px; }
.intcc-hero .intcc-score-suffix { margin-top: 2px; }
.intcc-hero-orb-wrap { flex: 0 0 auto; display: grid; place-items: center; margin-left: -20px; }   /* AURIX-INTCC-V2.1: sphere a touch closer to the insight (was -16; position only — same size/glow/animation) */
.intcc-hero-orb-wrap .intcc-orb { width: 112px; height: 112px; }
.intcc-eyebrow {
  display: block; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(var(--orb-c), 0.95); margin-bottom: 10px; font-weight: 600;
}
.intcc-hero-title {
  margin: 0 0 8px; font-size: 24px; line-height: 1.18; font-weight: 700;
  letter-spacing: -0.01em; color: var(--text-bright, #fff);
}
.intcc-hero-sub { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-muted, rgba(255,255,255,0.66)); max-width: 52ch; }
.intcc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.intcc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 25px; padding: 0 12px; border-radius: 999px;       /* INT.2V — height -10% */
  font-size: 11.5px; font-weight: 600; line-height: 1; white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.05); color: var(--text-bright);   /* softer border */
  background: rgba(255,255,255,0.035);
  box-shadow: inset 0 0 12px rgba(74,130,240,0.06);          /* premium inner glow */
}
.intcc-chip.is-good::before, .intcc-chip.is-accent::before { content: '✓'; font-size: 10px; font-weight: 800; opacity: 0.95; }
.intcc-chip.is-good   { border-color: rgba(63,191,127,0.28); color: #8fe6b6; background: rgba(63,191,127,0.09);  box-shadow: inset 0 0 12px rgba(63,191,127,0.12); }
.intcc-chip.is-accent { border-color: rgba(74,130,240,0.30); color: #aecbff; background: rgba(74,130,240,0.10); box-shadow: inset 0 0 12px rgba(74,130,240,0.14); }
.intcc-chip.is-warn   { border-color: rgba(233,168,87,0.30); color: #f3cf9a; background: rgba(233,168,87,0.10); box-shadow: inset 0 0 12px rgba(233,168,87,0.12); }

/* Energy orb — pure SVG/CSS, no external assets */
.intcc-orb {
  position: relative; flex: 0 0 auto;
  width: 124px; height: 124px;
  display: grid; place-items: center;
}
.intcc-orb-glow {
  position: absolute; inset: -28%;                 /* INT.2ZA — orb V3, deeper halo */
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(var(--orb-c), 0.98), rgba(var(--orb-c), 0.26) 48%, transparent 74%);  /* INT.2ZA — fuller inner glow */
  filter: blur(10px);
  animation: intccOrbPulse 4.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.intcc-orb-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(var(--orb-c), 0.45);
}
.intcc-orb-ring--1 { inset: 6%;  animation: intccOrbSpin 16s linear infinite; border-top-color: rgba(var(--orb-c), 0.95); border-right-color: rgba(var(--orb-c), 0.6); }
.intcc-orb-ring--2 { inset: 19%; animation: intccOrbSpin 11s linear infinite reverse; border-left-color: rgba(var(--orb-c), 0.8); }
.intcc-orb-core {
  position: absolute; inset: 29%;                  /* INT.2ZA — orb V3, +presence */
  border-radius: 50%;
  /* INT.2ZA — deeper, more dimensional sphere: soft blue-tinted specular highlight
     (never pure white), richer body, stronger bottom shadow. Stays Aurix blue. */
  background: radial-gradient(circle at 33% 25%, rgba(226,241,255,1), rgba(var(--orb-c), 0.99) 42%, rgba(var(--orb-c), 0.36) 100%);
  box-shadow:
    0 0 38px rgba(var(--orb-c), 0.98),
    inset 0 2px 11px rgba(214,236,255,0.66),
    inset 0 -6px 15px rgba(var(--orb-c), 0.72);
  animation: intccOrbBreath 4.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.intcc-orb-ecg {
  position: absolute; left: 13%; right: 13%; width: 74%; height: 34px;
  overflow: visible;
}
.intcc-orb-ecg path {
  fill: none; stroke: #bdecff; stroke-width: 2.3;          /* INT.2ZA — brighter cyan, thicker so the center crossing reads clearly */
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 58 202; stroke-dashoffset: 260;
  filter: drop-shadow(0 0 4px rgba(56,189,248,1)) drop-shadow(0 0 10px rgba(56,189,248,0.68));
  animation: intccEcg 3s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes intccOrbPulse  { 0%,100% { opacity: 0.65; transform: scale(0.97); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes intccOrbBreath { 0%,100% { transform: scale(0.96); } 50% { transform: scale(1.06); } }
@keyframes intccOrbSpin   { to { transform: rotate(360deg); } }
@keyframes intccEcg       { from { stroke-dashoffset: 260; } to { stroke-dashoffset: 0; } }

/* ── Bloque 2 — Aurix Health ── */
.intcc-health-main { display: flex; align-items: center; gap: 20px; }
.intcc-score-ring { position: relative; flex: 0 0 auto; width: 130px; height: 130px; display: grid; place-items: center; }
.intcc-score-svg { width: 130px; height: 130px; transform: rotate(0deg); }
.intcc-score-track { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 9; }
.intcc-score-arc {
  fill: none; stroke-width: 9; stroke-linecap: round;
  stroke: var(--aurix-blue, #4A82F0);
  transition: stroke-dashoffset 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
/* INT.2Z — health visual state by score range (5 levels, formula untouched):
   80-100 verde · 60-79 lima · 40-59 ámbar · 20-39 naranja · 0-19 rojo. */
.intcc-hero.is-tone-green  .intcc-score-arc { stroke: #3fbf7f; }
.intcc-hero.is-tone-lime   .intcc-score-arc { stroke: #b6d957; }
.intcc-hero.is-tone-amber  .intcc-score-arc { stroke: #e9a857; }
.intcc-hero.is-tone-orange .intcc-score-arc { stroke: #e6843c; }
.intcc-hero.is-tone-red    .intcc-score-arc { stroke: #e05a5a; }
.intcc-score-num { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.intcc-score-val { font-size: 38px; font-weight: 700; color: var(--text-bright, #fff); font-variant-numeric: tabular-nums; }
.intcc-score-suffix { font-size: 11px; color: var(--text-muted); margin-top: 4px; letter-spacing: 0.05em; }
.intcc-health-side { flex: 1 1 auto; min-width: 0; }
.intcc-health-badge {
  display: inline-block; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px;
  letter-spacing: 0.02em; margin-bottom: 10px;
}
.intcc-health-badge.is-tone-green  { color: #8fe6b6; background: rgba(63,191,127,0.14); border: 1px solid rgba(63,191,127,0.4); }
.intcc-health-badge.is-tone-lime   { color: #d9eaa0; background: rgba(150,200,80,0.14); border: 1px solid rgba(150,200,80,0.42); }
.intcc-health-badge.is-tone-amber  { color: #f3cf9a; background: rgba(233,168,87,0.14); border: 1px solid rgba(233,168,87,0.4); }
.intcc-health-badge.is-tone-orange { color: #f5c193; background: rgba(230,132,60,0.14); border: 1px solid rgba(230,132,60,0.42); }
.intcc-health-badge.is-tone-red    { color: #f0a3a3; background: rgba(224,90,90,0.14);  border: 1px solid rgba(224,90,90,0.4); }
.intcc-health-explain { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-muted); }
/* INT.2P — give Salud patrimonial the same premium treatment as the hero so the
   two read as one system; on desktop the content centres in the equalised height. */
.intcc-health {
  border-color: rgba(74,130,240,0.26);
  background:
    radial-gradient(130% 150% at 88% 10%, rgba(92,156,255,0.16), transparent 60%),
    linear-gradient(165deg, rgba(34,48,80,0.52), rgba(15,21,37,0.60));
}

/* ── Bloque 3 — Since last visit ── */
.intcc-slv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.intcc-slv-item { position: relative; padding-left: 20px; font-size: 13.5px; line-height: 1.5; color: var(--text-bright); }
.intcc-slv-dot { position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: rgba(120,160,230,0.9); }
.intcc-slv-item.is-up   .intcc-slv-dot { background: #3fbf7f; }
.intcc-slv-item.is-down .intcc-slv-dot { background: #e9a857; }
.intcc-slv-empty { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-muted); }

/* ── Bloque 4 — Radar ── */
.intcc-radar-wrap { display: grid; place-items: center; }
.intcc-radar-svg { width: 100%; max-width: 340px; height: auto; }
.intcc-radar-ring { fill: none; stroke: rgba(150,180,240,0.10); stroke-width: 0.8; }
.intcc-radar-axis { stroke: rgba(150,180,240,0.10); stroke-width: 0.8; }
.intcc-radar-area {
  fill: rgba(92,156,255,0.20);
  stroke: #6aa0ff; stroke-width: 1.6; stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(92,156,255,0.55));
  transform-origin: 110px 106px;
  animation: intccRadarIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.intcc-radar-dot { fill: #cfe0ff; filter: drop-shadow(0 0 3px rgba(92,156,255,0.9)); }
.intcc-radar-label { fill: rgba(214,226,255,0.82); font-size: 9.5px; font-weight: 600; }
.intcc-radar-val   { fill: rgba(150,180,240,0.62); font-size: 8px; font-weight: 700; font-variant-numeric: tabular-nums; }
@keyframes intccRadarIn { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ── Bloque 5 — Drivers ── */
.intcc-drv-explain { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--text-bright); }
.intcc-drv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.intcc-drv-row { display: grid; grid-template-columns: 22px minmax(78px, 1.3fr) 1.8fr auto; align-items: center; gap: 10px; }
.intcc-drv-rank {
  width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: #aecbff;
  background: rgba(74,130,240,0.16); border: 1px solid rgba(74,130,240,0.32);
}
.intcc-drv-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 12.5px; color: var(--text-bright); }
.intcc-drv-kind {
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(150,180,240,0.7);
}
.intcc-drv-row.is-monetary .intcc-drv-kind { color: rgba(120,210,170,0.8); }
.intcc-drv-track { height: 7px; border-radius: 999px; background: rgba(255,255,255,0.06); overflow: hidden; }
.intcc-drv-bar {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, rgba(92,156,255,0.98), rgba(150,190,255,0.6));
  animation: intccBarGrow 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.intcc-drv-row.is-monetary .intcc-drv-rank { color: #9fe6c2; background: rgba(63,191,127,0.14); border-color: rgba(63,191,127,0.32); }
.intcc-drv-row.is-monetary .intcc-drv-bar { background: linear-gradient(90deg, rgba(63,191,127,0.92), rgba(130,215,175,0.58)); }
.intcc-drv-pct { font-size: 12px; font-weight: 700; color: var(--text-bright); font-variant-numeric: tabular-nums; min-width: 36px; text-align: right; }
@keyframes intccBarGrow { from { width: 0 !important; } }

/* ── Bloque 6 — Explore (inline) ── */
.intcc-explore-hint { margin: -6px 0 14px; font-size: 12px; color: var(--text-muted); }
.intcc-explore-list { display: flex; flex-direction: column; gap: 8px; }
.intcc-x-item { position: relative; border: 1px solid var(--color-border-subtle); border-radius: 12px; background: rgba(255,255,255,0.015); }
.intcc-x-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font: inherit; cursor: pointer; text-align: left;
  padding: 11px 14px; border: 0; background: transparent;
  font-size: 13px; font-weight: 600; color: var(--text-bright);
  transition: background 140ms ease;
}
.intcc-x-q:hover { background: rgba(74,130,240,0.07); }
.intcc-x-label { min-width: 0; }
.intcc-x-caret {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; color: #8fb8ff;
  background: rgba(74,130,240,0.12); border: 1px solid rgba(74,130,240,0.30);
  transition: transform 260ms cubic-bezier(0.22,1,0.36,1), background 160ms ease, color 160ms ease;
}
.intcc-x-caret svg { width: 13px; height: 13px; display: block; }
.intcc-x-q:hover .intcc-x-caret { background: rgba(74,130,240,0.2); color: #cfe0ff; }
.intcc-x-q.is-active .intcc-x-caret { transform: rotate(180deg); background: rgba(74,130,240,0.24); color: #cfe0ff; }
.intcc-x-item.is-active { border-color: rgba(74,130,240,0.4); background: rgba(74,130,240,0.05); }
/* INT.2V Bloque 7 — premium internal popover: absolute, z-index, never grows the
   card nor pushes content below; soft opacity + translateY transition. */
.intcc-x-answer {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  border-radius: 12px; border: 1px solid rgba(74,130,240,0.40);
  background: linear-gradient(165deg, rgba(34,48,80,0.99), rgba(15,21,37,0.99));
  box-shadow: 0 16px 42px rgba(0,0,0,0.52), 0 0 0 1px rgba(74,130,240,0.12);
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}
.intcc-x-answer.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* INT.2Z — an open answer must always stack above the cards below it. Raise the
   whole Explore card (and the active item) into a high stacking context so the
   popover can never be painted under the next card's own context. */
.intcc-explore { position: relative; }
.intcc-explore:has(.intcc-x-answer.is-open) { z-index: 60; }
.intcc-x-item.is-active { position: relative; z-index: 60; }
.intcc-x-answer p { margin: 0; padding: 12px 14px; font-size: 13px; line-height: 1.55; color: var(--text-bright); }

/* "+N más" footer for scalable Desde-última-visita / Línea temporal */
.intcc-more-note { margin: 12px 0 0; font-size: 11.5px; font-weight: 600; color: rgba(150,180,240,0.7); letter-spacing: 0.02em; }

/* ── Bloque 7/9 — Identity (premium radial seal icon) ── */
.intcc-id-body { display: flex; align-items: center; gap: 16px; }
.intcc-id-icon {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; color: #aecbff;
  background:
    radial-gradient(circle at 50% 36%, rgba(120,170,255,0.32), rgba(74,130,240,0.10) 60%, transparent 74%),
    radial-gradient(circle, rgba(74,130,240,0.16), rgba(74,130,240,0.04));
  border: 1px solid rgba(74,130,240,0.4);
  box-shadow: inset 0 0 14px rgba(74,130,240,0.28), 0 0 18px rgba(74,130,240,0.18);
}
.intcc-id-icon svg { width: 26px; height: 26px; display: block; }
.intcc-id-text { min-width: 0; }
.intcc-id-name { margin: 0 0 5px; font-size: 16px; font-weight: 700; color: var(--text-bright); }
.intcc-id-desc { margin: 0 0 5px; font-size: 13px; line-height: 1.5; color: var(--text-bright); opacity: 0.92; }
.intcc-id-explain { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.intcc-identity.is-defensive .intcc-id-icon { color: #8fe6b6; border-color: rgba(63,191,127,0.42);
  background:
    radial-gradient(circle at 50% 36%, rgba(120,215,170,0.30), rgba(63,191,127,0.10) 60%, transparent 74%),
    radial-gradient(circle, rgba(63,191,127,0.14), rgba(63,191,127,0.04));
  box-shadow: inset 0 0 14px rgba(63,191,127,0.26), 0 0 18px rgba(63,191,127,0.16);
}
/* INT.2P — real-estate context as a discreet footnote inside Identity */
.intcc-re-ctx {
  margin: 16px 0 0; padding-top: 12px; font-size: 11.5px; line-height: 1.45;
  color: var(--text-dim, rgba(255,255,255,0.45));
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* ── Bloque 8 — Watch areas ── */
.intcc-watch-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.intcc-watch-item { display: flex; gap: 12px; }
.intcc-watch-mark { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; background: rgba(233,168,87,0.9); box-shadow: 0 0 8px rgba(233,168,87,0.5); }
.intcc-watch-name { margin: 0 0 3px; font-size: 13.5px; font-weight: 600; color: var(--text-bright); }
.intcc-watch-desc { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
/* INT.2P — empty = good news, not an empty card */
.intcc-watch-ok { display: flex; align-items: flex-start; gap: 12px; }
.intcc-watch-ok-icon {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; color: #8fe6b6;
  background: rgba(63,191,127,0.14); border: 1px solid rgba(63,191,127,0.4);
  box-shadow: 0 0 14px rgba(63,191,127,0.18);
}
.intcc-watch-ok-icon svg { width: 16px; height: 16px; }
.intcc-watch-clean { margin: 0; font-size: 13px; line-height: 1.55; color: rgba(216,238,226,0.82); }

/* ── Bloque 9/11 — Timeline ── */
.intcc-tl-list { list-style: none; margin: 0; padding: 0 0 0 7px; }
.intcc-tl-item { position: relative; padding: 0 0 20px 24px; border-left: 1.5px solid rgba(150,180,240,0.16); }
.intcc-tl-item:last-child { padding-bottom: 0; border-left-color: transparent; }
.intcc-tl-node { position: absolute; left: -6.5px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #6aa0ff; box-shadow: 0 0 0 4px rgba(92,156,255,0.16), 0 0 10px rgba(92,156,255,0.5); }
.intcc-tl-item.is-up .intcc-tl-node { background: #5fd6a0; box-shadow: 0 0 0 4px rgba(63,191,127,0.16), 0 0 10px rgba(63,191,127,0.5); }
.intcc-tl-item.is-down .intcc-tl-node { background: #e9a857; box-shadow: 0 0 0 4px rgba(233,168,87,0.16), 0 0 10px rgba(233,168,87,0.5); }
.intcc-tl-text { margin: 0 0 4px; font-size: 13.5px; line-height: 1.45; color: var(--text-bright); }
.intcc-tl-date { font-size: 10.5px; font-weight: 600; color: rgba(150,180,240,0.6); letter-spacing: 0.06em; text-transform: uppercase; }

.intcc-disclaimer { margin: 6px 2px 0; font-size: 11px; line-height: 1.5; color: var(--text-muted); opacity: 0.7; text-align: center; }

/* ── Desktop — professional grid (≥1024px) ──
   Row 1: dominant Hero (left, 2 rows tall) + Salud / Desde última visita stacked
   right. Row 2: Radar · Factores · Explora. Row 3: Identidad · Áreas · Línea
   temporal. No long strips, no dead space — reads as one system. */
@media (min-width: 1024px) {
  .aurix-intcc {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
    max-width: 1240px;
    padding: 12px 30px 56px;
    align-items: stretch;
  }
  .intcc-hero      { grid-column: 1 / 13; grid-row: 1; }
  .intcc-radar     { grid-column: 1 / 5;  grid-row: 2; }
  .intcc-drivers   { grid-column: 5 / 9;  grid-row: 2; }
  .intcc-explore   { grid-column: 9 / 13; grid-row: 2; }
  /* INT.2Z — Perfil removed; Áreas + Timeline split row 3 in halves (no hole). */
  .intcc-watch     { grid-column: 1 / 7;  grid-row: 3; }
  .intcc-timeline  { grid-column: 7 / 13; grid-row: 3; }
  .intcc-disclaimer { grid-column: 1 / 13; grid-row: 4; }
  .intcc-hero { gap: 20px; }
  .intcc-hero-title { font-size: 27px; margin-bottom: 9px; }
  /* INT.2ZC — Salud (left) and Inteligencia (right) read as two sibling modules
     inside ONE hero. The Inteligencia module is the premium soft sub-card that
     WRAPS title + headline + text + chips + orb, so the orb no longer floats
     outside it. Premium separation = gap + the card's border + a tenuous vertical
     glow bleeding into the gap (no thick table line). */
  .intcc-hero-intel {
    align-self: stretch;
    display: flex; align-items: center; gap: 22px;
    padding: 16px 24px 16px 16px;   /* AURIX-INTCC-V2.1 CAMBIO 5: trim the left inner void (left 24→16) */
    background: linear-gradient(165deg, rgba(120,160,255,0.06), rgba(255,255,255,0.012));
    border: 1px solid rgba(120,160,255,0.13);
    border-radius: 16px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.05),
      0 8px 26px -16px rgba(77,141,255,0.6),
      -12px 0 26px -20px rgba(77,141,255,0.55);
  }
  .intcc-hero-body {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column; justify-content: center;
    margin-top: -6px;   /* AURIX-INTCC-V2.1 CAMBIO 1/6: lift INTELIGENCIA onto SALUD's optical line */
  }
  /* Orb lives inside the Inteligencia card, vertically centred with the text; the
     card's right padding keeps it off the hero edge. */
  /* AURIX-INTCC-V1.3: pull the sphere slightly toward the insight (was margin:0) —
     reduces the central dead space inside the Inteligencia sub-card. Position only. */
  .intcc-hero-orb-wrap { flex: 0 0 auto; align-self: center; margin: 0 0 0 -20px; }   /* AURIX-INTCC-V2.1: sphere closer (was -16) */
  .intcc-hero-body .intcc-eyebrow {
    font-size: 11px; letter-spacing: 0.16em; color: rgba(159,194,255,0.95);
    margin-bottom: 11px; font-weight: 700;
  }
}
@media (min-width: 1440px) { .aurix-intcc { max-width: 1340px; } }

/* ── Mobile — prioritised experience (spec order) ── */
@media (max-width: 1023px) {
  .intcc-hero     { order: 1; }
  .intcc-radar    { order: 2; }
  .intcc-drivers  { order: 3; }
  .intcc-explore  { order: 4; }
  .intcc-watch    { order: 5; }
  .intcc-timeline { order: 6; }
  .intcc-disclaimer { order: 8; }
}
@media (max-width: 640px) {
  /* Bloque 12 — clear the bottom nav (safe area) so last cards aren't hidden */
  /* INT.2ZB — mobile width utilisation. The app shell adds 20px side padding and
     the container another 12px → ~32px lateral margin, too much on a phone. Drop
     the container's own side padding and pull -6px into the shell padding so cards
     sit ~14px from the screen edge (never <12px). Desktop untouched (≥1024 grid).
     Card radius/glow and per-card inner padding are unchanged, so content never
     touches the edge; safe-area bottom is preserved. */
  .aurix-intcc { margin-left: -6px; margin-right: -6px; padding: 4px 0 calc(78px + env(safe-area-inset-bottom, 0px)); gap: 12px; }

  /* INT.2Y — mobile composition: the single desktop hero is replaced by two
     dedicated cards (Inteligencia + Salud). Hide the desktop hero, reveal the
     mobile cards, and order them first. */
  .intcc-hero { display: none; }
  .intcc-m-card { display: block; }
  .intcc-m-hero   { order: 0; }
  .intcc-m-health { order: 1; }

  /* Card 1 — Inteligencia: reading + smart hint on the left, blue orb on the
     right. No health score here. INT.2ZA — the "Inteligencia" title now uses the
     unified .intcc-card-title (same as Salud/Radar/etc.), so it matches the system. */
  .intcc-m-hero {
    --orb-c: 77,141,255;                 /* electric Aurix blue #4D8DFF */
    display: flex; align-items: center; gap: 14px;
  }
  .intcc-m-hero-text { flex: 1 1 auto; min-width: 0; }
  .intcc-m-hero .intcc-card-title { margin: 0 0 8px; }
  .intcc-m-hero-title {
    margin: 0 0 6px; font-size: 19px; line-height: 1.2; font-weight: 700;
    letter-spacing: -0.01em; color: var(--text-bright, #fff);
  }
  .intcc-m-hero-hint {
    margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-muted);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .intcc-m-orb { flex: 0 0 auto; display: grid; place-items: center; }
  .intcc-m-orb .intcc-orb { width: 72px; height: 72px; }   /* INT.2ZA — orb V3 +~12% */

  /* Card 2 — Salud: score ring + badge on the left, sober conclusion rows on
     the right (distinct from the solid Excelente badge). */
  .intcc-m-health-body { display: flex; align-items: center; gap: 16px; }
  .intcc-m-health-score { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .intcc-m-health .intcc-score-ring, .intcc-m-health .intcc-score-svg { width: 78px; height: 78px; }
  .intcc-m-health .intcc-score-val { font-size: 24px; }
  .intcc-m-health .intcc-score-suffix { font-size: 8px; margin-top: 1px; }
  .intcc-m-health .intcc-health-badge { margin: 0; font-size: 10.5px; padding: 3px 10px; }
  .intcc-m-health.is-tone-green  .intcc-score-arc { stroke: #3fbf7f; }
  .intcc-m-health.is-tone-lime   .intcc-score-arc { stroke: #b6d957; }
  .intcc-m-health.is-tone-amber  .intcc-score-arc { stroke: #e9a857; }
  .intcc-m-health.is-tone-orange .intcc-score-arc { stroke: #e6843c; }
  .intcc-m-health.is-tone-red    .intcc-score-arc { stroke: #e05a5a; }
  .intcc-m-concl { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
  .intcc-m-concl-row {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--text-bright);
    padding: 7px 11px; border-radius: 10px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(120,160,255,0.10);
  }
  .intcc-m-concl-check {
    flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%;
    display: grid; place-items: center; font-size: 9px; font-weight: 800;
    color: #8fe6b6; background: rgba(63,191,127,0.14); border: 1px solid rgba(63,191,127,0.30);
  }
  .intcc-m-concl-row.is-warn .intcc-m-concl-check { color: #f3cf9a; background: rgba(233,168,87,0.14); border-color: rgba(233,168,87,0.30); }

  /* Bloque 4/5/6/9 — compact cards on mobile */
  .intcc-card { padding: 14px 15px; }
  .intcc-card-title { margin-bottom: 10px; }
  .intcc-radar-svg { max-width: 280px; }
  .intcc-drv-explain { font-size: 12px; margin-bottom: 10px; }
  .intcc-drv-list { gap: 9px; }
  .intcc-x-q { padding: 9px 13px; font-size: 12.5px; }
  .intcc-x-caret { width: 20px; height: 20px; }
  .intcc-x-caret svg { width: 11px; height: 11px; }
  .intcc-watch-list { gap: 11px; }
  .intcc-tl-item { padding-bottom: 14px; }
  .intcc-id-icon { width: 44px; height: 44px; }
  .intcc-id-icon svg { width: 21px; height: 21px; }
  .intcc-id-name { font-size: 15px; }
}

/* ════════ INT.F2 — Mobile Intelligence premium refinement ════════════════════
   Density, hierarchy and premium perception only — no architecture/nav/logic.
   Sphere V3 is global (one design system; sizes unchanged); the rest is scoped
   to ≤640 mobile so the validated desktop grid stays frozen. Additive overrides. */

/* ── 8. Sphere V3 integration (global) — approved landing sphere language:
   fixed core (no vertical movement), full-redraw ECG, top-left crystal reflection,
   electric AURIX blue, premium inner halo, deeper volume. Sizes untouched. */
.intcc-orb-core {
  background: radial-gradient(circle at 34% 26%, rgba(232,244,255,1), rgba(var(--orb-c),0.99) 44%, rgba(var(--orb-c),0.34) 100%);
  box-shadow:
    0 0 38px rgba(var(--orb-c),0.96),
    inset 0 2px 12px rgba(220,238,255,0.60),
    inset 0 0 18px rgba(var(--orb-c),0.50),     /* soft inner halo */
    inset 0 -7px 16px rgba(8,24,68,0.72);        /* darker base — depth */
  animation: none;                                /* fixed sphere: no breathing / vertical movement */
}
/* Top-left crystal reflection. */
.intcc-orb-core::before {
  content: ''; position: absolute; left: 24%; top: 15%;
  width: 42%; height: 31%; border-radius: 50%;
  transform: rotate(-14deg); filter: blur(1px); pointer-events: none;
  background: radial-gradient(ellipse at 42% 40%, rgba(255,255,255,0.62), rgba(255,255,255,0) 70%);
}
/* Keep the sphere anchored on hover too (was a -2px lift). */
.intcc-hero:hover .intcc-orb-core { transform: none; }
/* ECG — single trace, full redraw each cycle: invisible → draw L→R → hold → soft
   fade → clean reset. Never a partial/static line between cycles (pathLength=100). */
.intcc-orb-ecg path {
  stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: intccEcgF2 3.4s cubic-bezier(0.45,0,0.55,1) infinite;
}
@keyframes intccEcgF2 {
  0%   { stroke-dashoffset: 100; opacity: 0; }
  5%   { opacity: 1; }
  48%  { stroke-dashoffset: 0;   opacity: 1; }
  72%  { stroke-dashoffset: 0;   opacity: 1; }
  86%  { stroke-dashoffset: 0;   opacity: 0; }
  87%  { stroke-dashoffset: 100; opacity: 0; }
  100% { stroke-dashoffset: 100; opacity: 0; }
}

@media (max-width: 640px) {
  /* ── 7. Title consistency — all 7 titles share one signature exactly.
     They already use .intcc-card-title; align the hero's margin to the rest. */
  .intcc-m-hero .intcc-card-title { margin: 0 0 10px; }

  /* ── 1. Key Drivers premium — focus on Asset → %, EXPOSURE secondary.
     Thinner bars (−18%), wider useful bar (+~8% via column ratio + tighter gap),
     larger % (+~10%), de-emphasised EXPOSURE kind label. */
  .intcc-drv-row { grid-template-columns: 20px minmax(56px, 0.9fr) 2.1fr auto; gap: 8px; }
  .intcc-drv-track { height: 5.7px; }
  .intcc-drv-name { font-size: 13px; font-weight: 600; }
  .intcc-drv-kind { font-size: 7.5px; letter-spacing: 0.05em; color: rgba(150,180,240,0.42); }
  .intcc-drv-pct  { font-size: 13.5px; font-weight: 800; min-width: 38px; }
  .intcc-drv-rank { width: 20px; height: 20px; }

  /* ── 2. Explore your wealth — denser rows, smaller expand button.
     Same width / functionality / order. */
  .intcc-explore-list { gap: 7px; }
  .intcc-x-q { padding: 7px 13px; }
  .intcc-x-caret { width: 18px; height: 18px; }
  .intcc-x-caret svg { width: 10px; height: 10px; }

  /* ── 3. Areas to watch — risk panel, not a text list.
     Tighter rows, smaller status bullets, stronger title, softer description. */
  .intcc-watch-list { gap: 9px; }
  .intcc-watch-mark { width: 6px; height: 6px; margin-top: 6px; }
  .intcc-watch-name { font-size: 13.5px; font-weight: 700; color: #ffffff; }
  .intcc-watch-desc { color: rgba(255,255,255,0.52); }

  /* ── 4. Timeline — more terminal / Bloomberg.
     −8% vertical separation, node↔text alignment, brighter dates. */
  .intcc-tl-item { padding-bottom: 13px; }
  .intcc-tl-node { top: 3px; }
  .intcc-tl-text { margin: 0 0 3px; }
  .intcc-tl-date { color: rgba(174,200,255,0.82); }

  /* ── 5. Radar — better read, no added noise.
     Dimmer secondary mesh, brighter main polygon, +10% active dots. */
  .intcc-radar-ring, .intcc-radar-axis { stroke: rgba(150,180,240,0.07); }
  .intcc-radar-area {
    fill: rgba(92,156,255,0.27);
    stroke: #8ab6ff;
    filter: drop-shadow(0 0 6px rgba(92,156,255,0.7));
  }
  .intcc-radar-dot { r: 2.86px; fill: #e2edff; }

  /* ── 6. Health card — more premium and compact.
     Truly-centred score, higher-contrast checks, −8% badge height. */
  .intcc-m-health .intcc-score-num { top: 50%; left: 50%; transform: translate(-50%, -50%); }
  .intcc-m-concl-check {
    color: #abf0cc; background: rgba(63,191,127,0.20); border-color: rgba(63,191,127,0.46);
  }
  .intcc-m-health .intcc-health-badge { padding: 2px 10px; }
}

/* ════════ INT.F2-WEB — Intelligence desktop/tablet polish (≥641px only) ════════
   Rebalance the hero into one unit, kill dead space, lift premium feel. Mobile
   (≤640) is fully untouched. Visual/positioning only — no logic/data/architecture. */

/* Watch-card footer (§6) is desktop/tablet only — keep mobile visually intact. */
@media (max-width: 640px) { .intcc-watch-foot { display: none; } }

@media (min-width: 641px) {
  /* §1A — SALUD and INTELIGENCIA modules equal height + content top-aligned, so
     both titles start on the exact same visual line (sizes unchanged). */
  .intcc-hero { align-items: stretch; }
  .intcc-hero-score { justify-content: flex-start; }
  .intcc-hero-body  { justify-content: flex-start; }

  /* §1D — keep the descriptive line from sprawling across the hero. */
  .intcc-hero-sub { max-width: 520px; }

  /* §2 — more air between the description and the green badges. */
  .intcc-chips { margin-top: 22px; }

  /* §4A — Factores: thinner bars (less graphic weight). */
  .intcc-drv-track { height: 6px; }
  /* §4B — figures lead (weight only, no size change). */
  .intcc-drv-pct { font-weight: 800; }

  /* §5 — Áreas a vigilar: tighter rows + trimmed bottom (less dead space). */
  .intcc-watch { display: flex; flex-direction: column; padding-bottom: 13px; }
  .intcc-watch-list { gap: 10px; }

  /* §6 — informative footer that closes the card. */
  .intcc-watch-foot {
    margin: 14px 0 0; font-size: 12px; font-weight: 500;
    color: rgba(150,180,240,0.55); letter-spacing: 0.01em;
  }

  /* §7 — Timeline: tighter node↔text vertical alignment. */
  .intcc-tl-node { top: 3px; }
}

/* Desktop (≥1024) — precise hero rebalance + footer pinned to close the
   grid-stretched watch card. */
@media (min-width: 1024px) {
  .intcc-hero-score { padding-top: 16px; }   /* §1A — match Inteligencia card top so titles level */
  .intcc-hero-body {
    justify-content: flex-start; margin-top: 0;   /* drop the -6px lift → eyebrow tops align with SALUD */
    transform: translateX(24px);                   /* §1B — text block +24px toward the sphere */
  }
  .intcc-hero-orb-wrap { transform: translateX(-32px); }   /* §1C/§3 — sphere -32px into the content */
  .intcc-watch-foot { margin-top: auto; padding-top: 14px; }  /* §5/§6 — sink footer to card bottom */
}

/* Tablet (641–1023) — same rebalance with smaller deltas. */
@media (min-width: 641px) and (max-width: 1023px) {
  .intcc-hero-body     { padding-top: 12px; transform: translateX(16px); }  /* §1A align + §1B +16px */
  .intcc-hero-orb-wrap { transform: translateX(-20px); }                    /* §1C/§3 -20px */
}

/* Reduced-motion — calm everything, keep it readable */
@media (prefers-reduced-motion: reduce) {
  .aurix-intcc > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .intcc-orb-glow, .intcc-orb-core, .intcc-orb-ring, .intcc-orb-ecg path,
  .intcc-radar-area, .intcc-drv-bar { animation: none !important; }
  .intcc-orb-ecg path { stroke-dashoffset: 0; stroke-dasharray: none; }
}

/* ════════ WS.1 — Workspace Home (planning center) ════════════════════════════
   New Workspace entry. Shares the Intelligence ADN (dark glass, blue glow,
   electric borders, soft reveal). Lives inside .aurix-workspace which already
   provides the lateral gutter (matches Intelligence margins). Namespaced wsh-*. */
.aurix-wsh {
  display: flex; flex-direction: column; gap: 14px;
  max-width: 1100px; margin: 0 auto;
}
/* Soft reveal-on-mount stagger (mirrors .aurix-intcc). */
.aurix-wsh > * { opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22,1,0.36,1); }
.aurix-wsh.is-revealed > * { opacity: 1; transform: none; }
.aurix-wsh.is-revealed > *:nth-child(1) { transition-delay: 0.02s; }
.aurix-wsh.is-revealed > *:nth-child(2) { transition-delay: 0.08s; }
.aurix-wsh.is-revealed > *:nth-child(3) { transition-delay: 0.14s; }
.aurix-wsh.is-revealed > *:nth-child(4) { transition-delay: 0.20s; }
.aurix-wsh.is-revealed > *:nth-child(5) { transition-delay: 0.26s; }

/* Shared card surface (same glass as .intcc-card). */
.wsh-card {
  position: relative; padding: 18px; border-radius: 18px;
  border: 1px solid rgba(74,130,240,0.16);
  background:
    radial-gradient(140% 120% at 12% 0%, rgba(74,130,240,0.10), transparent 58%),
    linear-gradient(165deg, rgba(32,44,72,0.50), rgba(15,21,37,0.62));
  backdrop-filter: blur(10px);
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.wsh-card:hover {
  border-color: rgba(74,130,240,0.42); transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.32), 0 0 0 1px rgba(74,130,240,0.12), 0 0 28px rgba(74,130,240,0.10);
}
.wsh-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.wsh-title {
  margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(159,194,255,0.95);
}
.wsh-title::before {
  content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--aurix-blue, #4A82F0); vertical-align: middle; margin-right: 9px;
  opacity: 0.95; position: relative; top: -1px; box-shadow: 0 0 6px rgba(74,130,240,0.55);
}
.wsh-cta {
  font: inherit; cursor: pointer; white-space: nowrap;
  font-size: 12px; font-weight: 600; color: #aecbff;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(74,130,240,0.10); border: 1px solid rgba(74,130,240,0.30);
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.wsh-cta:hover { background: rgba(74,130,240,0.20); color: #cfe0ff; border-color: rgba(74,130,240,0.5); }
.wsh-cta.is-primary { display: inline-block; margin-top: 14px; }
.wsh-empty { margin: 0 0 14px; font-size: 13px; line-height: 1.55; color: var(--text-muted); }
.wsh-pill {
  display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: rgba(159,194,255,0.9); background: rgba(74,130,240,0.10); border: 1px solid rgba(74,130,240,0.26);
}

/* Hero — premium electric-blue glass, orb on the right (Aurix signature). */
/* WS.5A P9 — lighter hero (less landing-page weight: smaller padding/title, no
   heavy bottom shadow). Workspace doesn't need to sell itself. */
.wsh-hero {
  position: relative; display: flex; align-items: center; gap: 26px;
  padding: 16px 24px; border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(77,141,255,0.24);
  background:
    radial-gradient(120% 150% at 8% 8%, rgba(77,141,255,0.12), transparent 56%),
    radial-gradient(120% 150% at 92% 92%, rgba(37,99,235,0.10), transparent 60%),
    linear-gradient(165deg, rgba(30,46,82,0.55), rgba(13,19,36,0.58));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 30px rgba(0,0,0,0.26);
}
.wsh-hero-main { flex: 1 1 auto; min-width: 0; }
.wsh-eyebrow {
  display: block; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(159,194,255,0.9); margin-bottom: 7px; font-weight: 700;
}
.wsh-hero-title {
  margin: 0 0 6px; font-size: 20px; line-height: 1.18; font-weight: 700;
  letter-spacing: -0.01em; color: var(--text-bright, #fff);
}
.wsh-hero-sub { margin: 0 0 13px; font-size: 13px; line-height: 1.5; color: var(--text-muted, rgba(255,255,255,0.66)); max-width: 56ch; }
.wsh-stats { display: flex; flex-wrap: wrap; gap: 22px; }
.wsh-stat { display: flex; flex-direction: column; gap: 3px; }
.wsh-stat-val { font-size: 21px; font-weight: 700; color: var(--text-bright, #fff); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.wsh-stat-label { font-size: 11px; color: var(--text-muted); letter-spacing: 0.02em; }
/* WS.1A — Future Path visual (Workspace's own hero signature; no Intelligence orb) */
.wsh-hero-viz { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 230px; }
.wsh-fp-svg { width: 220px; height: auto; overflow: visible; }
.wsh-fp-reading { margin: 0; text-align: center; font-size: 11.5px; line-height: 1.4; font-weight: 600; color: rgba(159,194,255,0.85); max-width: 230px; }
.wsh-fp-grid line { stroke: rgba(150,180,240,0.16); stroke-width: 1; stroke-dasharray: 2 4; }
.wsh-fp-area { opacity: 0.9; }
.wsh-fp-line {
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(74,130,240,0.55));
  stroke-dasharray: 280; stroke-dashoffset: 280;
  animation: wshFpDraw 1.2s cubic-bezier(0.22,1,0.36,1) 0.15s forwards;
}
.wsh-fp-node {
  fill: #cfe0ff; stroke: #4A82F0; stroke-width: 2;
  filter: drop-shadow(0 0 5px rgba(92,156,255,0.9));
  opacity: 0; animation: wshFpNode 0.4s ease forwards;
}
.wsh-fp-node.is-now    { animation-delay: 0.5s; }
.wsh-fp-node.is-base   { animation-delay: 0.85s; }
.wsh-fp-node.is-future { animation-delay: 1.2s; }
.wsh-fp-node.is-future { fill: #eaf2ff; }
.wsh-fp-label {
  fill: rgba(159,194,255,0.78); font-size: 9px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
}
@keyframes wshFpDraw { to { stroke-dashoffset: 0; } }
@keyframes wshFpNode { from { opacity: 0; } to { opacity: 1; } }

/* Goals snapshot */
.wsh-goals-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.wsh-goal {
  display: flex; flex-direction: column; gap: 9px; padding: 14px;
  border-radius: 14px; border: 1px solid rgba(120,160,255,0.12); background: rgba(255,255,255,0.025);
}
.wsh-goal-icon {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #aecbff;
  background: rgba(74,130,240,0.12); border: 1px solid rgba(74,130,240,0.30);
}
.wsh-goal-icon svg { width: 19px; height: 19px; }
.wsh-goal-name { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--text-bright); }
.wsh-goal-track { height: 6px; border-radius: 999px; background: rgba(120,160,255,0.12); overflow: hidden; }
.wsh-goal-bar { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #4A82F0, #6aa0ff); }
.wsh-goal-meta { font-size: 11px; font-weight: 600; color: rgba(159,194,255,0.7); letter-spacing: 0.02em; }

/* Scenario Builder — the feature card (most prominent). */
.wsh-scenario.is-feature {
  border-color: rgba(77,141,255,0.34);
  background:
    radial-gradient(130% 150% at 88% 6%, rgba(92,156,255,0.18), transparent 58%),
    linear-gradient(165deg, rgba(34,52,92,0.58), rgba(14,20,38,0.64));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 18px 46px rgba(0,0,0,0.34), 0 0 30px rgba(77,141,255,0.10);
}
.wsh-sc-compare { display: flex; align-items: stretch; gap: 14px; }
.wsh-sc-col {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px;
  padding: 16px; border-radius: 14px; border: 1px solid rgba(120,160,255,0.14); background: rgba(255,255,255,0.025);
}
.wsh-sc-col.is-best { border-color: rgba(63,191,127,0.30); background: rgba(63,191,127,0.06); }
.wsh-sc-label { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.wsh-sc-value { font-size: 22px; font-weight: 700; color: var(--text-bright); font-variant-numeric: tabular-nums; }
.wsh-sc-vs { align-self: center; flex: 0 0 auto; font-size: 12px; font-weight: 700; color: rgba(159,194,255,0.7); text-transform: uppercase; letter-spacing: 0.08em; }
.wsh-sc-concl { margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-bright); opacity: 0.9; }

/* Planning snapshot */
.wsh-plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.wsh-plan {
  display: flex; flex-direction: column; justify-content: space-between; gap: 16px; min-height: 96px; padding: 15px;
  border-radius: 14px; border: 1px solid rgba(120,160,255,0.12); background: rgba(255,255,255,0.025);
}
.wsh-plan-name { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-bright); }
.wsh-plan-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wsh-plan-upd { font-size: 10.5px; color: var(--text-muted); }

/* Workspaces snapshot */
.wsh-ws-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.wsh-ws {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 15px;
  border-radius: 14px; border: 1px solid rgba(120,160,255,0.12); background: rgba(255,255,255,0.025);
}
.wsh-ws-mark { width: 26px; height: 26px; border-radius: 8px; background: rgba(74,130,240,0.14); border: 1px solid rgba(74,130,240,0.30); }
.wsh-ws-name { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--text-bright); }

/* Desktop polish */
@media (min-width: 1024px) {
  .aurix-wsh { gap: 16px; }
  .wsh-hero-title { font-size: 22px; }
  .wsh-card { padding: 20px; }
}

/* Mobile — vertical cards, snapshot grids collapse gracefully. */
@media (max-width: 720px) {
  .wsh-hero { flex-direction: column; align-items: stretch; gap: 18px; padding: 18px 18px 20px; }
  .wsh-hero-main { width: 100%; }
  .wsh-hero-viz { align-self: stretch; order: -1; width: 100%; max-width: 280px; margin: 0 auto; }
  .wsh-fp-svg { width: 100%; }
  .wsh-hero-title { font-size: 21px; }
  .wsh-hero-sub { max-width: none; }
  .wsh-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
  /* header wraps so a long CTA never overflows the card on narrow screens */
  .wsh-head { flex-wrap: wrap; }
  .wsh-goals-grid { grid-template-columns: 1fr; }
  .wsh-plan-grid { grid-template-columns: 1fr; }
  .wsh-ws-grid { grid-template-columns: 1fr 1fr; }
  .wsh-sc-compare { flex-direction: column; }
  .wsh-sc-vs { align-self: flex-start; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .aurix-wsh > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .wsh-fp-line { animation: none !important; stroke-dashoffset: 0 !important; }
  .wsh-fp-node { animation: none !important; opacity: 1 !important; }
}

/* ── WS.2 — Scenario Builder (inside Workspace, wsb-* namespace) ── */
.wsb-header { position: relative; }
.wsb-back {
  font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; color: #aecbff; margin: 0 0 12px; padding: 5px 12px 5px 8px;
  border-radius: 999px; background: rgba(74,130,240,0.10); border: 1px solid rgba(74,130,240,0.28);
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.wsb-back:hover { background: rgba(74,130,240,0.20); color: #cfe0ff; border-color: rgba(74,130,240,0.5); }
.wsb-title { margin: 0 0 6px; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--text-bright, #fff); }
.wsb-subtitle { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
.wsb-horizon { font-size: 11px; font-weight: 600; color: rgba(159,194,255,0.8); letter-spacing: 0.02em; }
.wsb-note { margin: 0 0 14px; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }

.wsb-bl-grid { display: flex; flex-wrap: wrap; gap: 26px; }
.wsb-bl-metric { display: flex; flex-direction: column; gap: 3px; }
.wsb-bl-val { font-size: 19px; font-weight: 700; color: var(--text-bright); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.wsb-bl-label { font-size: 11px; color: var(--text-muted); letter-spacing: 0.02em; }

.wsb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.wsb-card {
  display: flex; flex-direction: column; gap: 10px; padding: 16px;
  border-radius: 14px; border: 1px solid rgba(120,160,255,0.13); background: rgba(255,255,255,0.025);
}
.wsb-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wsb-card-name { margin: 0; font-size: 14px; font-weight: 700; color: var(--text-bright); }
.wsb-pill {
  display: inline-flex; align-items: center; height: 21px; padding: 0 9px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
  color: #aecbff; background: rgba(74,130,240,0.12); border: 1px solid rgba(74,130,240,0.28);
}
.wsb-pill.is-steady   { color: #8fe6b6; background: rgba(63,191,127,0.12); border-color: rgba(63,191,127,0.30); }
.wsb-pill.is-dynamic  { color: #9fc6ff; background: rgba(74,130,240,0.14); border-color: rgba(74,130,240,0.34); }
.wsb-pill.is-balanced { color: #cbe0a6; background: rgba(150,200,80,0.12); border-color: rgba(150,200,80,0.32); }
.wsb-card-desc { margin: -2px 0 2px; font-size: 12px; font-weight: 600; color: rgba(159,194,255,0.85); }
.wsb-card-rows { display: flex; flex-direction: column; gap: 6px; }
.wsb-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--text-muted); }
.wsb-row b { color: var(--text-bright); font-variant-numeric: tabular-nums; font-size: 13.5px; }
.wsb-row.is-diff b { color: #8fe6b6; }
.wsb-card-read { margin: 2px 0 0; font-size: 12px; line-height: 1.45; color: var(--text-muted); }
.wsb-save { margin-top: 4px; text-align: center; }
.wsb-save.is-saved { color: #8fe6b6; background: rgba(63,191,127,0.12); border-color: rgba(63,191,127,0.35); cursor: default; }

.wsb-chart { display: grid; place-items: center; }
.wsb-chart-svg { width: 100%; max-width: 420px; height: auto; }
.wsb-chart-base { stroke: rgba(150,180,240,0.18); stroke-width: 1; }
.wsb-bar { fill: #5c9cff; filter: drop-shadow(0 0 6px rgba(74,130,240,0.4)); }
.wsb-bar.is-base { fill: rgba(150,180,240,0.4); filter: none; }
.wsb-bar-x { fill: rgba(214,226,255,0.7); font-size: 10px; font-weight: 700; }

.wsb-concl.is-feature {
  border-color: rgba(77,141,255,0.34);
  background:
    radial-gradient(130% 150% at 88% 6%, rgba(92,156,255,0.18), transparent 58%),
    linear-gradient(165deg, rgba(34,52,92,0.58), rgba(14,20,38,0.64));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 18px 46px rgba(0,0,0,0.34), 0 0 30px rgba(77,141,255,0.10);
}
.wsb-concl-text { margin: 0; font-size: 15px; line-height: 1.5; font-weight: 600; color: var(--text-bright); }
.wsb-disclaimer { margin: 4px 2px 0; font-size: 11px; line-height: 1.5; color: var(--text-muted); opacity: 0.7; text-align: center; }

@media (min-width: 1024px) {
  .wsb-title { font-size: 25px; }
}
@media (max-width: 720px) {
  .wsb-grid { grid-template-columns: 1fr; }
  .wsb-bl-grid { gap: 16px 22px; }
  .wsb-title { font-size: 20px; }
}

/* ── WS.3 — Planning · Wealth Projection (wsp-* namespace) ── */
/* Active planning card on the Home snapshot */
.wsh-plan.is-active { cursor: pointer; border-color: rgba(77,141,255,0.30); background: rgba(74,130,240,0.07); }
.wsh-plan.is-active:hover { border-color: rgba(77,141,255,0.5); background: rgba(74,130,240,0.12); }
.wsh-plan-go { font-size: 12px; font-weight: 700; color: #aecbff; letter-spacing: 0.01em; }

/* Inputs (premium sliders) */
.wsp-inputs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.wsp-field { display: flex; flex-direction: column; gap: 10px; }
.wsp-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.wsp-field-name { font-size: 12px; color: var(--text-muted); }
.wsp-field-val { font-size: 15px; font-weight: 700; color: var(--text-bright); font-variant-numeric: tabular-nums; }
.wsp-range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 999px; background: rgba(120,160,255,0.18); outline: none; }
.wsp-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #5c9cff; border: 2px solid #cfe0ff; box-shadow: 0 0 8px rgba(74,130,240,0.6); cursor: pointer; }
.wsp-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #5c9cff; border: 2px solid #cfe0ff; box-shadow: 0 0 8px rgba(74,130,240,0.6); cursor: pointer; }

/* Output region */
.wsp-out { display: flex; flex-direction: column; gap: 18px; }
.wsp-summary { display: flex; flex-wrap: wrap; gap: 26px; }
.wsp-sum-metric { display: flex; flex-direction: column; gap: 3px; }
.wsp-sum-val { font-size: 21px; font-weight: 700; color: var(--text-bright); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.wsp-sum-label { font-size: 11px; color: var(--text-muted); letter-spacing: 0.02em; }

.wsp-chart { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wsp-chart-svg { width: 100%; max-width: 460px; height: auto; }
.wsp-axis { stroke: rgba(150,180,240,0.18); stroke-width: 1; }
.wsp-axis-x { fill: rgba(214,226,255,0.6); font-size: 9px; font-weight: 700; letter-spacing: 0.04em; }
.wsp-area { fill: rgba(74,130,240,0.12); }
.wsp-line { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.wsp-line.is-cons { stroke: rgba(150,180,240,0.6); stroke-width: 1.8; }
.wsp-line.is-base { stroke: #5c9cff; filter: drop-shadow(0 0 5px rgba(74,130,240,0.5)); }
.wsp-line.is-opt  { stroke: #8fe6b6; stroke-width: 1.8; }
.wsp-legend { display: flex; flex-wrap: wrap; gap: 14px; }
.wsp-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--text-muted); }
.wsp-leg::before { content: ''; width: 12px; height: 3px; border-radius: 2px; background: currentColor; }
.wsp-leg.is-cons { color: rgba(170,195,245,0.85); }
.wsp-leg.is-base { color: #7fb0ff; }
.wsp-leg.is-opt  { color: #8fe6b6; }

.wsp-scn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.wsp-reading, .ws4-reading {
  margin: 0; padding: 14px 16px; border-radius: 14px; font-size: 14px; line-height: 1.5; font-weight: 600;
  color: var(--text-bright);
  border: 1px solid rgba(77,141,255,0.30);
  background: radial-gradient(130% 150% at 88% 6%, rgba(92,156,255,0.16), transparent 60%), linear-gradient(165deg, rgba(34,52,92,0.5), rgba(14,20,38,0.55));
}

@media (max-width: 720px) {
  .wsp-inputs { grid-template-columns: 1fr; gap: 14px; }
  .wsp-summary { gap: 16px 22px; }
  .wsp-scn-grid { grid-template-columns: 1fr; }
}

/* ── WS.4 — Workspaces (template projects, ws4-* namespace) ── */
/* Active template cards on the Home Workspaces snapshot */
.wsh-ws.is-active { cursor: pointer; }
.wsh-ws.is-active:hover { border-color: rgba(77,141,255,0.42); background: rgba(74,130,240,0.10); transform: translateY(-2px); }
.wsh-ws-go { font-size: 11.5px; font-weight: 700; color: #aecbff; letter-spacing: 0.01em; }
.wsh-ws-cta { font-size: 11px; font-weight: 600; color: rgba(159,194,255,0.7); letter-spacing: 0.02em; }

/* Mode toggle (Manual / Aurix Sync) */
.ws4-modes { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(120,160,255,0.14); }
.ws4-mode { font: inherit; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text-muted); padding: 7px 16px; border-radius: 9px; border: 0; background: transparent; transition: background 160ms ease, color 160ms ease; }
.ws4-mode.is-active { color: #cfe0ff; background: rgba(74,130,240,0.22); box-shadow: inset 0 0 0 1px rgba(74,130,240,0.34); }
.ws4-sync-ctx { margin: 12px 0 0; font-size: 12px; font-weight: 600; color: rgba(159,194,255,0.85); }
.ws4-sync-ctx.is-empty { color: var(--text-muted); font-weight: 500; }

/* Detail layout: 2 columns desktop, 1 mobile */
.ws4-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ws4-fields { display: flex; flex-direction: column; gap: 14px; }
.ws4-field { display: flex; flex-direction: column; gap: 7px; }
.ws4-field-name { font-size: 12px; color: var(--text-muted); }
.ws4-field-input { position: relative; display: block; }
.ws4-num {
  -webkit-appearance: none; appearance: none; -moz-appearance: textfield;
  width: 100%; box-sizing: border-box; padding: 10px 34px 10px 12px;
  font: inherit; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--text-bright); background: rgba(255,255,255,0.04);
  border: 1px solid rgba(120,160,255,0.18); border-radius: 10px; outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.ws4-num:focus { border-color: rgba(77,141,255,0.55); box-shadow: 0 0 0 3px rgba(77,141,255,0.15); }
.ws4-num::-webkit-outer-spin-button, .ws4-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ws4-field-unit { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 12.5px; font-weight: 600; color: rgba(159,194,255,0.7); pointer-events: none; }
.ws4-autosave { font-size: 10.5px; font-weight: 600; color: rgba(143,230,182,0.8); letter-spacing: 0.02em; }

/* Output rows (light table) + reading */
.ws4-out { display: flex; flex-direction: column; gap: 14px; }
.ws4-rows { display: flex; flex-direction: column; }
.ws4-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid rgba(120,160,255,0.10); }
.ws4-row:last-child { border-bottom: 0; }
.ws4-row-label { font-size: 13px; color: var(--text-muted); }
.ws4-row-val { font-size: 15px; font-weight: 700; color: var(--text-bright); font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .ws4-detail-grid { grid-template-columns: 1fr; }
}

/* ── WS.5 — Goals Engine (wsg-* namespace) ── */
/* Home goals snapshot: clickable templates + dual CTA */
.wsh-goal.is-active { cursor: pointer; }
.wsh-goal.is-active:hover { border-color: rgba(77,141,255,0.42); background: rgba(74,130,240,0.10); transform: translateY(-2px); }
.wsh-head-ctas { display: inline-flex; gap: 8px; flex-wrap: wrap; }

/* Create form */
.wsg-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
.wsg-select, .wsg-text {
  -webkit-appearance: none; appearance: none; width: 100%; box-sizing: border-box;
  padding: 10px 12px; font: inherit; font-size: 14px; font-weight: 600; color: var(--text-bright);
  background: rgba(255,255,255,0.04); border: 1px solid rgba(120,160,255,0.18); border-radius: 10px; outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.wsg-select:focus, .wsg-text:focus { border-color: rgba(77,141,255,0.55); box-shadow: 0 0 0 3px rgba(77,141,255,0.15); }
.wsg-select { cursor: pointer; }
.wsg-select option { background: #0f1730; color: #fff; }
.wsg-text::placeholder { color: var(--text-muted); font-weight: 500; }

/* Goals list */
.wsg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wsg-card { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 14px; border: 1px solid rgba(120,160,255,0.13); background: rgba(255,255,255,0.025); }
.wsg-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.wsg-card-id { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wsg-card-name { margin: 0; font-size: 15px; font-weight: 700; color: var(--text-bright); }
.wsg-modes { flex: 0 0 auto; }
.wsg-modes .ws4-mode { padding: 5px 11px; font-size: 11px; }
.wsg-card-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wsg-sync-note { grid-column: 1 / -1; font-size: 12px; font-weight: 600; color: rgba(159,194,255,0.85); padding: 8px 0; }

/* Progress bar */
.wsg-progress { display: flex; align-items: center; gap: 10px; }
.wsg-bar-track { flex: 1 1 auto; height: 8px; border-radius: 999px; background: rgba(120,160,255,0.14); overflow: hidden; }
.wsg-bar-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #4A82F0, #6aa0ff); transition: width 0.6s cubic-bezier(0.22,1,0.36,1); }
.wsg-pct { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--text-bright); font-variant-numeric: tabular-nums; }
.wsg-progress.is-reached  .wsg-bar-fill { background: linear-gradient(90deg, #3fbf7f, #6fe0a6); }
.wsg-progress.is-behind   .wsg-bar-fill { background: linear-gradient(90deg, #e9a857, #f3cf9a); }
.wsg-progress.is-no-data  .wsg-bar-fill { background: rgba(150,180,240,0.4); }
.wsg-out { display: flex; flex-direction: column; gap: 14px; }

/* WS.5A P7 — human state badge */
.wsg-state-row { display: flex; }
.wsg-state { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; border: 1px solid transparent; }
.wsg-state-ic { width: 14px; height: 14px; flex: 0 0 auto; }
.wsg-state.is-on-track { color: #8fb8ff; background: rgba(74,130,240,0.12); border-color: rgba(74,130,240,0.30); }
.wsg-state.is-reached  { color: #8fe6b6; background: rgba(63,191,127,0.12); border-color: rgba(63,191,127,0.32); }
.wsg-state.is-behind   { color: #f3cf9a; background: rgba(233,168,87,0.12); border-color: rgba(233,168,87,0.32); }
.wsg-state.is-no-data  { color: var(--text-muted); background: rgba(150,180,240,0.08); border-color: rgba(150,180,240,0.20); }

/* WS.5A P6 — premium select arrow + create form with always-on side preview */
.wsg-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239fc2ff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px;
}
.wsg-create-body { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; margin-bottom: 16px; align-items: start; }
.wsg-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 0; }
.wsg-form-preview {
  position: sticky; top: 12px; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 14px;
  border: 1px solid rgba(77,141,255,0.30);
  background: radial-gradient(130% 150% at 88% 6%, rgba(92,156,255,0.16), transparent 60%), linear-gradient(165deg, rgba(34,52,92,0.5), rgba(14,20,38,0.55));
}
.wsg-pv-title { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(159,194,255,0.9); }
.wsg-pv-state { align-self: flex-start; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; color: #8fb8ff; background: rgba(74,130,240,0.12); border: 1px solid rgba(74,130,240,0.3); }
.wsg-pv-state.is-reached { color: #8fe6b6; background: rgba(63,191,127,0.12); border-color: rgba(63,191,127,0.32); }
.wsg-pv-state.is-behind  { color: #f3cf9a; background: rgba(233,168,87,0.12); border-color: rgba(233,168,87,0.32); }
.wsg-pv-state.is-no-data { color: var(--text-muted); background: rgba(150,180,240,0.08); border-color: rgba(150,180,240,0.2); }

/* WS.5A P8 — Scenario impact block (lead with the result) */
.wsb-impact.is-feature {
  border-color: rgba(77,141,255,0.34);
  background: radial-gradient(130% 150% at 50% 0%, rgba(92,156,255,0.18), transparent 62%), linear-gradient(165deg, rgba(34,52,92,0.58), rgba(14,20,38,0.64));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 30px rgba(77,141,255,0.10);
}
.wsb-impact-row { display: flex; align-items: center; gap: 18px; }
.wsb-impact-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.wsb-impact-label { font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.wsb-impact-val { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--text-bright); font-variant-numeric: tabular-nums; }
.wsb-impact-col.is-best .wsb-impact-val { color: #8fe6b6; }
.wsb-impact-arrow { flex: 0 0 auto; font-size: 22px; color: rgba(159,194,255,0.7); }
.wsb-impact-uplift { display: flex; align-items: baseline; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(120,160,255,0.14); }
.wsb-impact-delta { font-size: 22px; font-weight: 800; color: #8fe6b6; font-variant-numeric: tabular-nums; }
.wsb-impact-pct { font-size: 15px; font-weight: 700; color: #8fe6b6; }
.wsb-impact-cap { font-size: 12px; color: var(--text-muted); margin-left: auto; }

@media (max-width: 720px) {
  .wsg-form { grid-template-columns: 1fr; }
  .wsg-grid { grid-template-columns: 1fr; }
  .wsg-create-body { grid-template-columns: 1fr; }
  .wsg-form-preview { position: static; }
  .wsb-impact-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .wsb-impact-arrow { transform: rotate(90deg); align-self: center; }
  .wsb-impact-val { font-size: 23px; }
}

/* ── WS.5A Commit B — save model (P5), Continuar (P3), Mis Proyectos (P4) ── */
.wsg-card-foot, .wsg-foot-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wsg-card-foot { margin-top: 4px; padding-top: 12px; border-top: 1px solid rgba(120,160,255,0.10); }
.wsg-savebar { display: flex; align-items: center; gap: 10px; }
.wsg-savestate { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
.wsg-savestate.is-saved   { color: rgba(143,230,182,0.85); }
.wsg-savestate.is-dirty   { color: #f3cf9a; }
.wsg-savestate.is-unsaved { color: var(--text-muted); }
.wsg-savebtn { padding: 6px 16px; }
.wsg-savebtn[disabled] { opacity: 0.45; cursor: default; }
.wsg-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.wsg-act {
  font: inherit; cursor: pointer; font-size: 11.5px; font-weight: 600; color: #aecbff;
  padding: 6px 11px; border-radius: 8px; background: rgba(74,130,240,0.08); border: 1px solid rgba(74,130,240,0.22);
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.wsg-act:hover { background: rgba(74,130,240,0.18); color: #cfe0ff; }
.wsg-act.is-danger { color: #f0a3a3; background: rgba(224,90,90,0.08); border-color: rgba(224,90,90,0.24); }
.wsg-act.is-danger:hover { background: rgba(224,90,90,0.16); color: #f5c0c0; }

/* P3 — Continuar */
.wsh-continue { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wsh-cont-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wsh-cont-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(159,194,255,0.85); }
.wsh-cont-name { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-bright); }
.wsh-cont-meta { font-size: 12px; color: var(--text-muted); }

/* P4 — Mis proyectos */
.wsh-proj-grid { display: flex; flex-direction: column; gap: 10px; }
.wsh-proj { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(120,160,255,0.12); background: rgba(255,255,255,0.025); }
.wsh-proj-info { display: flex; align-items: center; gap: 12px; min-width: 0; flex-wrap: wrap; }
.wsh-proj-name { margin: 0; font-size: 14px; font-weight: 700; color: var(--text-bright); }
.wsh-proj-meta { font-size: 11.5px; color: var(--text-muted); }
.wsh-proj-acts { display: flex; gap: 6px; flex: 0 0 auto; }

@media (max-width: 720px) {
  .wsh-continue { flex-direction: column; align-items: stretch; gap: 12px; }
  .wsh-proj { flex-direction: column; align-items: stretch; }
  .wsh-proj-acts { justify-content: flex-end; }
  .wsg-card-foot, .wsg-foot-card { flex-direction: column; align-items: stretch; }
  .wsg-actions { justify-content: flex-end; }
}

/* ── WS.6A — pinned items, saved/pinned states, featured tool, viz extras ── */
.wsh-tpl, .wsh-tool { position: relative; }
.wsh-pin { position: absolute; top: 10px; right: 10px; z-index: 2; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border-radius: 8px; cursor: pointer; color: rgba(159,194,255,0.55); background: rgba(255,255,255,0.04); border: 1px solid rgba(120,160,255,0.14); transition: color 150ms ease, background 150ms ease, border-color 150ms ease; }
.wsh-pin svg { width: 15px; height: 15px; fill: none; }
.wsh-pin:hover { color: #aecbff; background: rgba(74,130,240,0.16); }
.wsh-pin.is-on { color: #f3cf9a; border-color: rgba(233,168,87,0.42); background: rgba(233,168,87,0.12); }
.wsh-pin.is-on svg { fill: currentColor; }
.wsb-pill.is-saved  { color: #8fe6b6; background: rgba(63,191,127,0.12); border-color: rgba(63,191,127,0.30); }
.wsb-pill.is-pinned { color: #f3cf9a; background: rgba(233,168,87,0.12); border-color: rgba(233,168,87,0.30); }
.wsh-proj-type { font-size: 11px; color: var(--text-muted); }
.wsh-proj.is-pinned { border-style: dashed; }
.wsh-tool.is-featured { border-color: rgba(77,141,255,0.34); background: radial-gradient(130% 150% at 85% 0%, rgba(92,156,255,0.14), transparent 60%), linear-gradient(165deg, rgba(34,52,92,0.52), rgba(15,21,37,0.6)); box-shadow: 0 0 24px rgba(77,141,255,0.10); }
.wsh-tool-viz { height: 52px; margin-bottom: 8px; }
.wsh-tpl-viz-svg .v-up   { stroke: #8fe6b6; }
.wsh-tpl-viz-svg .v-down { stroke: #e0746f; }
.wsh-tpl-viz-svg .v-dot2 { stroke: #8fe6b6; }

/* ── WS.7A — Mi Espacio visual grid cards (mini preview + name + type + acts) ── */
.wsh-space-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; }
.wsh-scard { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 14px; border-radius: 14px; border: 1px solid rgba(120,160,255,0.13); background: rgba(255,255,255,0.025); transition: border-color 150ms ease, transform 150ms ease; }
.wsh-scard:hover { border-color: rgba(77,141,255,0.30); transform: translateY(-2px); }
.wsh-scard.is-pinned { border-style: dashed; border-color: rgba(224,177,92,0.30); }
.wsh-scard.is-pinned:hover { border-color: rgba(224,177,92,0.5); }
.wsh-scard .wsb-pill { align-self: flex-start; }
.wsh-scard-viz { height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 10px; margin: 4px 0 2px; color: #9fc2ff; background: rgba(74,130,240,0.06); }
.wsh-scard.is-pinned .wsh-scard-viz { color: #e6c483; background: rgba(224,177,92,0.07); }
.wsh-scard-viz .wsh-tpl-viz-svg { width: 64px; height: 34px; }
.wsh-scard-name { margin: 2px 0 0; font-size: 14px; font-weight: 700; line-height: 1.25; color: var(--text-bright); }
.wsh-scard-type { font-size: 11px; color: var(--text-muted); }
.wsh-scard-meta { font-size: 13px; font-weight: 800; color: #9fc2ff; font-variant-numeric: tabular-nums; }
.wsh-scard-acts { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.wsh-scard-open { flex: 1 1 auto; font: inherit; cursor: pointer; font-size: 12.5px; font-weight: 700; color: #cfe0ff; padding: 8px 10px; border-radius: 9px; border: 1px solid rgba(74,130,240,0.32); background: rgba(74,130,240,0.16); transition: background 150ms ease; }
.wsh-scard-open:hover { background: rgba(74,130,240,0.26); }
.wsh-scard-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: 9px; cursor: pointer; color: var(--text-muted); background: transparent; border: 1px solid rgba(120,160,255,0.16); transition: color 150ms ease, border-color 150ms ease; }
.wsh-scard-x:hover { color: #cfe0ff; border-color: rgba(120,160,255,0.34); }
.wsh-scard-x.is-danger:hover { color: #f0897f; border-color: rgba(240,137,127,0.4); }
.wsh-scard-x svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) {
  .wsh-space-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .wsh-scard { padding: 12px; }
}

/* ── WS.5C — Aurix delete modal + template visual previews ── */
.ws-modal-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: rgba(5,8,16,0.66); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity 160ms ease; }
.ws-modal-overlay.is-open { opacity: 1; }
.ws-modal { width: min(380px, 100%); padding: 22px; border-radius: 18px; border: 1px solid rgba(74,130,240,0.30); background: radial-gradient(130% 120% at 12% 0%, rgba(74,130,240,0.12), transparent 58%), linear-gradient(165deg, rgba(32,44,72,0.96), rgba(15,21,37,0.97)); box-shadow: 0 30px 70px rgba(0,0,0,0.5); transform: translateY(8px) scale(0.98); transition: transform 200ms cubic-bezier(0.22,1,0.36,1); }
.ws-modal-overlay.is-open .ws-modal { transform: none; }
.ws-modal-title { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: var(--text-bright); }
.ws-modal-text { margin: 0 0 18px; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
.ws-modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
.ws-modal-btn { font: inherit; cursor: pointer; font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 10px; }
.ws-modal-btn.is-cancel { color: #aecbff; background: rgba(74,130,240,0.10); border: 1px solid rgba(74,130,240,0.28); }
.ws-modal-btn.is-cancel:hover { background: rgba(74,130,240,0.20); }
.ws-modal-btn.is-danger { color: #fff; background: #e05a5a; border: 1px solid rgba(224,90,90,0.6); }
.ws-modal-btn.is-danger:hover { background: #e9706f; }

.wsh-tpl-viz { height: 58px; display: grid; place-items: center; margin-bottom: 10px; border-radius: 10px; background: linear-gradient(165deg, rgba(74,130,240,0.10), rgba(255,255,255,0.012)); border: 1px solid rgba(120,160,255,0.10); color: #7fb0ff; }
.wsh-tpl-viz-svg { width: 66px; height: 42px; }
.wsh-tpl-viz-svg .v-track { stroke: rgba(150,180,240,0.30); }
.wsh-tpl-viz-svg .v-area { fill: rgba(74,130,240,0.18); stroke: none; }
.wsh-tpl-viz-svg .v-dim { stroke: rgba(150,180,240,0.45); }
.wsh-tpl-viz-svg .v-dim2 { stroke: rgba(143,230,182,0.85); stroke-width: 2; }
.wsh-tpl-viz-svg .v-dot { fill: #8fe6b6; stroke: none; }

/* ── WS.6 — Compound Growth tool (wstool-* namespace) ── */
.wsh-tool.is-active { cursor: pointer; }
.wsh-tool.is-active:hover { border-color: rgba(77,141,255,0.42); transform: translateY(-2px); background: rgba(74,130,240,0.08); }
.wsh-tool-go { font-size: 12px; font-weight: 700; color: #aecbff; }
.wstool-fields { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.wstool-out { display: flex; flex-direction: column; gap: 18px; }
.wstool-result { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; align-items: stretch; }
.wstool-res-main {
  display: flex; flex-direction: column; gap: 4px; justify-content: center; padding: 18px 20px; border-radius: 14px;
  border: 1px solid rgba(77,141,255,0.30);
  background: radial-gradient(130% 150% at 80% 0%, rgba(92,156,255,0.20), transparent 60%), linear-gradient(165deg, rgba(34,52,92,0.58), rgba(14,20,38,0.62));
}
.wstool-res-label { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.wstool-res-final { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; color: var(--text-bright); font-variant-numeric: tabular-nums; }
.wstool-res-orient { font-size: 11px; color: rgba(159,194,255,0.7); font-weight: 600; }
.wstool-res-split { display: flex; flex-direction: column; gap: 10px; }
.wstool-res-cell { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(120,160,255,0.13); background: rgba(255,255,255,0.025); }
.wstool-res-v { font-size: 20px; font-weight: 800; color: var(--text-bright); font-variant-numeric: tabular-nums; }
.wstool-res-cell.is-gain .wstool-res-v { color: #8fe6b6; }
.wstool-res-cell.is-neg .wstool-res-v { color: #f0897f; }
.wstool-res-k { font-size: 11.5px; color: var(--text-muted); }
.wstool-chart { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wstool-chart-svg { width: 100%; max-width: 480px; height: auto; }
.wstool-area { fill: rgba(74,130,240,0.14); }
.wstool-line { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.wstool-line.is-total { stroke: #5c9cff; filter: drop-shadow(0 0 5px rgba(74,130,240,0.5)); }
.wstool-line.is-contrib { stroke: rgba(150,180,240,0.6); stroke-width: 1.8; stroke-dasharray: 4 3; }
.wstool-ms { display: flex; flex-direction: column; gap: 8px; }
.wstool-ms-title { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(159,194,255,0.9); }
.wstool-ms-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.wstool-ms-list li { position: relative; padding-left: 18px; font-size: 13px; line-height: 1.45; color: var(--text-bright); }
.wstool-ms-list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: #5fd6a0; box-shadow: 0 0 8px rgba(63,191,127,0.5); }
@media (max-width: 720px) {
  .wstool-fields { grid-template-columns: 1fr 1fr; }
  .wstool-result { grid-template-columns: 1fr; }
}

/* ── WS.7 — Monthly Budget tool (wsbud-* namespace, reuses wstool-* result) ── */
.wstool-result.wsbud-result { grid-template-columns: 1fr; gap: 16px; }
.wsbud-result .wstool-res-main { align-items: flex-start; padding: 22px 24px; }
.wsbud-result .wstool-res-final { font-size: 46px; line-height: 1.02; }
.wstool-res-final.is-pos { color: #7ef0b8; }
.wstool-res-final.is-neg { color: #f0897f; }
.wsbud-split { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wsbud-chartbox { align-items: stretch; gap: 12px; }
.wsbud-chart-title { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(159,194,255,0.9); }
.wsbud-chart-wrap { display: flex; flex-direction: column; gap: 12px; }
.wsbud-bar { display: flex; width: 100%; height: 20px; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,0.05); border: 1px solid rgba(120,160,255,0.14); }
.wsbud-seg { height: 100%; transition: width 220ms ease; }
.wsbud-seg.is-free { background: linear-gradient(90deg, #2fd98e, #57e6a6); box-shadow: inset 0 0 8px rgba(47,217,142,0.4); }
.wsbud-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.wsbud-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.wsbud-leg i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.wsbud-leg i.is-free { background: #2fd98e; }
.wsbud-leg b { color: var(--text-bright); font-variant-numeric: tabular-nums; font-weight: 700; }
.wsbud-reading { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-bright); padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(120,160,255,0.14); background: rgba(74,130,240,0.07); }
@media (max-width: 720px) {
  .wsbud-result .wstool-res-final { font-size: 38px; }
  .wsbud-split { grid-template-columns: 1fr; }
}

/* ── WS.8 — Trade Journal tool (wsjrn-* namespace, reuses wstool-* result) ── */
.wstool-result.wsjrn-summary { grid-template-columns: 1fr; gap: 16px; }
.wsjrn-summary .wstool-res-main { align-items: flex-start; padding: 22px 24px; }
.wsjrn-summary .wstool-res-final { font-size: 46px; line-height: 1.02; }
.wstool-res-v.is-up { color: #7ef0b8; }
.wstool-res-v.is-down { color: #f0897f; }
.wsjrn-sum-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wsjrn-chartbox { align-items: stretch; gap: 10px; }
.wsjrn-chart-svg { width: 100%; max-width: 480px; height: auto; }
.wsjrn-axis { stroke: rgba(150,180,240,0.25); stroke-width: 1; }
.wsjrn-bar.is-win { fill: #2fd98e; filter: drop-shadow(0 0 5px rgba(47,217,142,0.4)); }
.wsjrn-bar.is-loss { fill: #f0897f; filter: drop-shadow(0 0 5px rgba(240,137,127,0.35)); }
.wsjrn-bar-lbl { fill: var(--text-muted); font-size: 9px; font-weight: 700; }
/* add/edit form */
.wsjrn-form-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.wsjrn-select { width: 100%; cursor: pointer; }
.wsjrn-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.wsjrn-form-btns { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.wsjrn-preview { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.wsjrn-preview.is-win { color: #7ef0b8; }
.wsjrn-preview.is-loss { color: #f0897f; }
.wsjrn-preview.is-open { color: rgba(159,194,255,0.85); }
/* trade list */
.wsjrn-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; }
.wsjrn-card { position: relative; display: flex; flex-direction: column; gap: 9px; padding: 14px; border-radius: 14px; border: 1px solid rgba(120,160,255,0.13); background: rgba(255,255,255,0.025); border-left-width: 3px; }
.wsjrn-card.is-win { border-left-color: #2fd98e; }
.wsjrn-card.is-loss { border-left-color: #f0897f; }
.wsjrn-card.is-open { border-left-color: rgba(150,180,240,0.5); }
.wsjrn-card-top { display: flex; align-items: center; gap: 8px; }
.wsjrn-asset { font-size: 15px; font-weight: 800; color: var(--text-bright); }
.wsjrn-type-chip { font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; color: #aecbff; padding: 2px 8px; border-radius: 999px; background: rgba(74,130,240,0.14); border: 1px solid rgba(74,130,240,0.26); }
.wsjrn-ccy { font-size: 10.5px; font-weight: 700; color: var(--text-muted); padding: 2px 7px; border-radius: 999px; border: 1px solid rgba(120,160,255,0.2); }
.wsjrn-card-rows { display: flex; flex-direction: column; gap: 4px; }
.wsjrn-row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-muted); }
.wsjrn-row b { color: var(--text-bright); font-variant-numeric: tabular-nums; font-weight: 700; }
.wsjrn-card-pl { display: flex; align-items: baseline; gap: 10px; }
.wsjrn-ret { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.wsjrn-pl { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wsjrn-ret.is-win, .wsjrn-pl.is-win { color: #7ef0b8; }
.wsjrn-ret.is-loss, .wsjrn-pl.is-loss { color: #f0897f; }
.wsjrn-status.is-open { font-size: 12.5px; font-weight: 700; color: rgba(159,194,255,0.85); }
.wsjrn-card-acts { display: flex; align-items: center; gap: 7px; margin-top: 2px; }
@media (max-width: 720px) {
  .wsjrn-form-grid { grid-template-columns: 1fr 1fr; }
  .wsjrn-sum-grid { grid-template-columns: 1fr; }
  .wsjrn-summary .wstool-res-final { font-size: 38px; }
}
@media (max-width: 640px) {
  .wsjrn-list { grid-template-columns: 1fr; }
}

/* ── WS.9 — Goal Funding (wsfund-* namespace) ── */
.wsfund-block { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(47,217,142,0.22); background: radial-gradient(120% 130% at 90% 0%, rgba(47,217,142,0.08), transparent 60%), rgba(255,255,255,0.022); }
.wsfund-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.wsfund-title { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(146,224,184,0.95); }
.wsfund-amount { font-size: 22px; font-weight: 800; color: var(--text-bright); font-variant-numeric: tabular-nums; }
.wsfund-progress { display: flex; align-items: center; gap: 10px; }
.wsfund-bar-track { flex: 1 1 auto; height: 7px; border-radius: 99px; background: rgba(255,255,255,0.07); overflow: hidden; }
.wsfund-bar-fill { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #2fd98e, #57e6a6); box-shadow: 0 0 8px rgba(47,217,142,0.4); transition: width 260ms ease; }
.wsfund-pct { font-size: 12.5px; font-weight: 800; color: #8fe6b6; font-variant-numeric: tabular-nums; }
.wsfund-sub { font-size: 11px; color: var(--text-muted); }
.wsfund-last { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; padding-top: 4px; }
.wsfund-last-lbl { font-size: 11px; color: var(--text-muted); }
.wsfund-last-amt { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.wsfund-last-meta { font-size: 11.5px; color: var(--text-muted); }
.wsfund-last.is-empty { font-size: 12px; color: var(--text-muted); }
.wsfund-last-amt.is-pos, .wsfund-mv-amt.is-pos { color: #7ef0b8; }
.wsfund-last-amt.is-neg, .wsfund-mv-amt.is-neg { color: #f0897f; }
.wsfund-list { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.wsfund-mv { display: flex; align-items: baseline; gap: 10px; font-size: 12.5px; }
.wsfund-mv-amt { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 64px; }
.wsfund-mv-note { color: var(--text-muted); }
.wsfund-more { font-size: 11.5px; color: rgba(159,194,255,0.8); }
.wsfund-btn { margin-top: 4px; align-self: flex-start; }
/* assign-funds modal */
.wsfund-modal { width: min(420px, 100%); }
.wsfund-types { display: flex; gap: 6px; padding: 5px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(120,160,255,0.12); margin: 4px 0 14px; }
.wsfund-type { flex: 1 1 0; font: inherit; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text-muted); padding: 9px 12px; border: 0; border-radius: 9px; background: transparent; transition: background 150ms ease, color 150ms ease; }
.wsfund-type.is-active { color: #cfe0ff; background: rgba(74,130,240,0.2); box-shadow: inset 0 0 0 1px rgba(74,130,240,0.32); }
.wsfund-disclaimer { margin: 12px 0 0; font-size: 12px; line-height: 1.45; color: rgba(159,194,255,0.85); padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(74,130,240,0.2); background: rgba(74,130,240,0.07); }
.ws-modal-btn.is-primary { color: #cfe0ff; background: rgba(74,130,240,0.2); border: 1px solid rgba(74,130,240,0.36); }
.ws-modal-btn.is-primary:hover { background: rgba(74,130,240,0.3); }
.wsfund-modal .ws4-field { margin-top: 10px; }
/* feedback toast */
.wsfund-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 14px); z-index: 1200; font-size: 13px; font-weight: 700; color: #d7ffe9; padding: 11px 18px; border-radius: 12px; border: 1px solid rgba(47,217,142,0.4); background: rgba(18,40,30,0.96); box-shadow: 0 18px 44px rgba(0,0,0,0.45); opacity: 0; transition: opacity 220ms ease, transform 220ms ease; pointer-events: none; }
.wsfund-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ── WS.5B — studio layout: compact hero, internal tabs, templates, tools ── */
.wsh-hero.is-studio { padding: 14px 22px; gap: 22px; }
.wsh-hero.is-studio .wsh-hero-main { display: flex; flex-direction: column; justify-content: center; }
.wsh-studio-root { gap: 14px; }

.wsh-tabs { display: flex; gap: 6px; padding: 5px; border-radius: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(120,160,255,0.12); }
.wsh-tab { flex: 1 1 0; font: inherit; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-muted); padding: 10px 14px; border: 0; border-radius: 10px; background: transparent; transition: background 160ms ease, color 160ms ease; }
.wsh-tab:hover { color: #cfe0ff; }
.wsh-tab.is-active { color: #cfe0ff; background: rgba(74,130,240,0.20); box-shadow: inset 0 0 0 1px rgba(74,130,240,0.32); }
.wsh-tabpanel { display: flex; flex-direction: column; gap: 14px; }

/* Templates catalog */
.wsh-tpl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.wsh-tpl { cursor: pointer; display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 14px; border: 1px solid rgba(120,160,255,0.13); background: rgba(255,255,255,0.025); transition: border-color 200ms ease, transform 200ms ease, background 200ms ease; }
.wsh-tpl:hover { border-color: rgba(77,141,255,0.42); transform: translateY(-2px); background: rgba(74,130,240,0.08); }
.wsh-tpl-name { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--text-bright); }
.wsh-tpl-desc { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-muted); flex: 1 1 auto; }
.wsh-tpl-go { font-size: 12px; font-weight: 700; color: #aecbff; }

/* Tools */
.wsh-tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.wsh-tool { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 14px; border: 1px solid rgba(120,160,255,0.12); background: rgba(255,255,255,0.025); }
.wsh-tool-icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: #aecbff; background: rgba(74,130,240,0.12); border: 1px solid rgba(74,130,240,0.30); }
.wsh-tool-icon svg { width: 20px; height: 20px; }
.wsh-tool-name { margin: 0; font-size: 14px; font-weight: 700; color: var(--text-bright); }
.wsh-tool-desc { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-muted); flex: 1 1 auto; }
.wsh-tool .wsh-pill { align-self: flex-start; }

.wsh-space-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.wsh-space-empty .wsh-empty { margin: 0; }

/* ════════ WS.10 — Visual Identity System (preview-dominant cards) ════════════ */
.wsh-cardv { padding: 0; gap: 0; overflow: hidden; }
.wsh-cardv .wsh-pin { top: 8px; right: 8px; z-index: 3; }
.wsh-pv-wrap { height: 108px; display: flex; }
.wsh-pv-wrap > .wspv { flex: 1 1 auto; }
.wsh-cardv-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-top: 1px solid rgba(120,160,255,0.10); }
.wsh-cardv-foot .wsh-tpl-name, .wsh-cardv-foot .wsh-tool-name { margin: 0; font-size: 13.5px; font-weight: 700; }
.wsh-cardv .wsh-tpl-go, .wsh-cardv .wsh-tool-go { flex: none; }
/* preview base */
.wspv { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 100%; padding: 12px 14px; background: linear-gradient(165deg, rgba(74,130,240,0.08), rgba(255,255,255,0.012)); }
/* compound: dominant figure + spark */
.wspv-compound { gap: 3px; }
.wspv-fig { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.wspv-num { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--text-bright); font-variant-numeric: tabular-nums; }
.wspv-lbl { font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.wspv-spark { width: 100%; height: 26px; margin-top: 2px; }
.wspv-spark-area { fill: rgba(74,130,240,0.16); }
.wspv-spark-line { fill: none; stroke: #5c9cff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(74,130,240,0.5)); }
/* budget: ingresos/gastos/libre figures + mini bar */
.wspv-budget { gap: 9px; background: linear-gradient(165deg, rgba(47,217,142,0.07), rgba(255,255,255,0.012)); }
.wspv-rows { display: flex; align-items: flex-end; justify-content: space-around; width: 100%; gap: 6px; }
.wspv-row { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.wspv-row-v { font-size: 15px; font-weight: 800; color: var(--text-bright); font-variant-numeric: tabular-nums; }
.wspv-row.is-free .wspv-row-v { color: #7ef0b8; }
.wspv-row-k { font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); font-style: normal; }
.wspv-budbar { display: flex; width: 100%; height: 7px; border-radius: 99px; overflow: hidden; background: rgba(255,255,255,0.06); }
.wspv-budseg.is-exp { background: rgba(120,160,255,0.5); }
.wspv-budseg.is-free { background: linear-gradient(90deg, #2fd98e, #57e6a6); }
/* journal: ticker rows green/red */
.wspv-journal { gap: 6px; justify-content: center; padding: 14px 20px; background: linear-gradient(165deg, rgba(120,160,255,0.06), rgba(255,255,255,0.012)); }
.wspv-tk { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 12px; }
.wspv-tk-a { font-size: 13px; font-weight: 700; color: var(--text-bright); letter-spacing: 0.02em; }
.wspv-tk-r { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.wspv-tk-r.is-win { color: #7ef0b8; }
.wspv-tk-r.is-loss { color: #f0897f; }
/* glyph archetype tiles (distinct DNA per category) */
.wspv-glyph svg { width: 46px; height: 46px; }
.wspv-glyph.is-gold   { color: #f3cf9a; background: linear-gradient(165deg, rgba(233,168,87,0.15), rgba(255,255,255,0.01)); }
.wspv-glyph.is-amber  { color: #ffb169; background: linear-gradient(165deg, rgba(240,150,70,0.15), rgba(255,255,255,0.01)); }
.wspv-glyph.is-green  { color: #7ef0b8; background: linear-gradient(165deg, rgba(47,217,142,0.14), rgba(255,255,255,0.01)); }
.wspv-glyph.is-cyan   { color: #6fe0e6; background: linear-gradient(165deg, rgba(80,210,220,0.14), rgba(255,255,255,0.01)); }
.wspv-glyph.is-violet { color: #b9a6ff; background: linear-gradient(165deg, rgba(138,125,255,0.15), rgba(255,255,255,0.01)); }
.wspv-glyph.is-blue   { color: #7fb0ff; background: linear-gradient(165deg, rgba(74,130,240,0.13), rgba(255,255,255,0.01)); }
/* viz tiles (reused stroke previews) — accent by category */
.wspv-viz { color: #7fb0ff; }
.wspv-viz.is-violet { color: #b9a6ff; background: linear-gradient(165deg, rgba(138,125,255,0.10), rgba(255,255,255,0.012)); }
.wspv-viz .wsh-tpl-viz-svg { width: 92px; height: 52px; }
/* goal archetype glyph in goal card head */
.wsg-card-id { display: flex; align-items: center; gap: 11px; }
.wsg-card-idtxt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wsg-glyph { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; }
.wsg-glyph svg { width: 22px; height: 22px; }
.wsg-glyph.is-wealth    { color: #7fb0ff; background: rgba(74,130,240,0.14); }
.wsg-glyph.is-emergency { color: #7ef0b8; background: rgba(47,217,142,0.13); }
.wsg-glyph.is-home      { color: #f3cf9a; background: rgba(233,168,87,0.14); }
.wsg-glyph.is-fire      { color: #ffb169; background: rgba(240,150,70,0.14); }
.wsg-glyph.is-free      { color: #b9a6ff; background: rgba(138,125,255,0.14); }
@media (max-width: 720px) {
  .wsh-pv-wrap { height: 96px; }
}

/* WS.10A — iOS zooms when a focused input has font-size < 16px. Force 16px on
   mobile for every Workspace + assign-funds-modal field (desktop unchanged). */
@media (max-width: 768px) {
  .aurix-workspace input,
  .aurix-workspace select,
  .aurix-workspace textarea,
  .ws-modal input,
  .ws-modal select,
  .ws-modal textarea { font-size: 16px; }
}

@media (max-width: 720px) {
  .wsh-tabs { position: sticky; top: 6px; z-index: 6; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .wsh-tpl-grid { grid-template-columns: 1fr; }
  .wsh-tool-grid { grid-template-columns: 1fr; }
}

/* ════════ WS.11B — Mi Espacio professional desktop ═══════════════════════════ */
.wsh-mse { display: flex; flex-direction: column; gap: 14px; }
.wsh-premium-badge { margin-left: auto; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #f3cf9a; padding: 3px 9px; border-radius: 999px; background: rgba(233,168,87,0.12); border: 1px solid rgba(233,168,87,0.32); }
.wsh-mse-block .wsh-head { display: flex; align-items: center; }
/* (1) Trabajo diario — big project cards */
.wsh-daily-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.wsh-dcard { display: flex; flex-direction: column; border-radius: 14px; border: 1px solid rgba(120,160,255,0.14); background: rgba(255,255,255,0.022); overflow: hidden; transition: border-color 180ms ease, transform 180ms ease; }
.wsh-dcard:hover { border-color: rgba(77,141,255,0.34); transform: translateY(-2px); }
.wsh-dcard-pv { height: 116px; display: flex; }
.wsh-dcard-pv > .wspv { flex: 1 1 auto; }
.wsh-dcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-top: 1px solid rgba(120,160,255,0.10); }
.wsh-dcard-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wsh-dcard-name { margin: 0; font-size: 14px; font-weight: 700; color: var(--text-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsh-dcard-type { font-size: 11px; color: var(--text-muted); }
.wsh-dcard-acts { display: flex; align-items: center; gap: 7px; flex: none; }
.wsh-dcard.is-demo { cursor: pointer; }
.wsh-dcard.is-demo .wsh-dcard-type { color: rgba(159,194,255,0.8); }
/* premium-preview prep (NOT locking anything now) */
.is-premium-preview { position: relative; }
.is-premium-preview .wsh-dcard.is-demo { opacity: 0.97; }
.is-locked { pointer-events: none; filter: grayscale(0.25) brightness(0.85); }
/* progress preview (goals) */
.wspv-goal { gap: 10px; }
.wspv-goal-top { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.wspv-goal-glyph { color: #f3cf9a; }
.wspv-goal-glyph svg { width: 30px; height: 30px; }
.wspv-goal-pct { font-size: 22px; font-weight: 800; color: var(--text-bright); font-variant-numeric: tabular-nums; }
.wspv-goal-track { width: 100%; height: 8px; border-radius: 99px; background: rgba(255,255,255,0.07); overflow: hidden; }
.wspv-goal-fill { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #4d8dff, #7fb0ff); }
/* journal summary preview */
.wspv-jsum { background: linear-gradient(165deg, rgba(120,160,255,0.06), rgba(255,255,255,0.012)); }
.wspv-jsum-v { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.wspv-jsum-v.is-win { color: #7ef0b8; }
.wspv-jsum-v.is-loss { color: #f0897f; }
.wspv-jsum-k { font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
/* (2) Herramientas fijadas — compact toolbox */
.wsh-tool-row { display: flex; flex-wrap: wrap; gap: 10px; }
.wsh-tchip { display: flex; align-items: center; gap: 9px; padding: 8px 10px 8px 8px; border-radius: 12px; border: 1px solid rgba(224,177,92,0.28); border-style: dashed; background: rgba(224,177,92,0.05); }
.wsh-tchip-ic { width: 34px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; background: rgba(74,130,240,0.10); color: #9fc2ff; }
.wsh-tchip-ic .wsh-tpl-viz-svg { width: 30px; height: 18px; }
.wsh-tchip-name { font-size: 13px; font-weight: 700; color: var(--text-bright); }
.wsh-tchip-open { font: inherit; cursor: pointer; font-size: 12px; font-weight: 700; color: #cfe0ff; padding: 6px 11px; border-radius: 8px; border: 1px solid rgba(74,130,240,0.30); background: rgba(74,130,240,0.14); }
.wsh-tchip-open:hover { background: rgba(74,130,240,0.24); }
.wsh-tchip-x { flex: none; width: 26px; height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; cursor: pointer; color: var(--text-muted); background: transparent; border: 1px solid rgba(120,160,255,0.16); }
.wsh-tchip-x:hover { color: #cfe0ff; }
.wsh-tchip-x svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
@media (max-width: 920px) { .wsh-daily-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .wsh-daily-grid { grid-template-columns: 1fr; }
  .wsh-tchip { flex: 1 1 100%; }
}

/* ════════ WS.12 — Real Estate Portfolio Pro ═════════════════════════════════ */
/* Portfolio summary — KPIs dominate (Equity / Cashflow / Rentabilidad). */
.wsre-summary { display: flex; flex-direction: column; gap: 14px; }
.wsre-sum-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.wsre-sum-count { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(159,194,255,0.9); }
.wsre-sum-value { font-size: 26px; font-weight: 800; color: var(--text-bright); font-variant-numeric: tabular-nums; }
.wsre-sum-vlbl { font-size: 11px; color: var(--text-muted); }
.wsre-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.wsre-kpi { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; border-radius: 14px; border: 1px solid rgba(120,160,255,0.16); background: rgba(255,255,255,0.025); }
.wsre-kpi.is-equity { border-color: rgba(77,141,255,0.30); background: radial-gradient(130% 150% at 85% 0%, rgba(92,156,255,0.16), transparent 60%), rgba(255,255,255,0.022); }
.wsre-kpi.is-cf { border-color: rgba(47,217,142,0.26); }
.wsre-kpi.is-yield { border-color: rgba(224,177,92,0.26); }
.wsre-kpi-v { font-size: 24px; font-weight: 800; color: var(--text-bright); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.wsre-kpi-v.is-pos { color: #7ef0b8; } .wsre-kpi-v.is-neg { color: #f0897f; }
.wsre-kpi-k { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.wsre-subkpis { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.wsre-subkpi { display: inline-flex; flex-direction: column; gap: 1px; }
.wsre-subkpi b { font-size: 14px; font-weight: 700; color: var(--text-bright); font-variant-numeric: tabular-nums; }
.wsre-subkpi i { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); font-style: normal; }
/* Property grid — premium visual cards (never an Excel table). */
.wsre-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.wsre-card { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; border: 1px solid rgba(120,160,255,0.14); background: rgba(255,255,255,0.022); cursor: pointer; transition: border-color 180ms ease, transform 180ms ease; }
.wsre-card:hover { border-color: rgba(77,141,255,0.36); transform: translateY(-2px); }
.wsre-cover { height: 108px; background-size: cover; background-position: center; position: relative; }
.wsre-status { position: absolute; top: 10px; right: 10px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(8,12,22,0.7); }
.wsre-status.is-green { background: #2fd98e; box-shadow: 0 0 8px rgba(47,217,142,0.6); }
.wsre-status.is-amber { background: #e0a85c; box-shadow: 0 0 8px rgba(224,168,92,0.6); }
.wsre-status.is-red { background: #f0897f; box-shadow: 0 0 8px rgba(240,137,127,0.6); }
.wsre-card-body { display: flex; flex-direction: column; gap: 9px; padding: 13px 15px; }
.wsre-card-top { display: flex; flex-direction: column; gap: 1px; }
.wsre-card-name { margin: 0; font-size: 15px; font-weight: 800; color: var(--text-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsre-card-city { font-size: 11.5px; color: var(--text-muted); }
.wsre-card-rows { display: flex; flex-direction: column; gap: 4px; }
.wsre-prow { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-muted); }
.wsre-prow b { color: var(--text-bright); font-variant-numeric: tabular-nums; font-weight: 700; }
.wsre-prow b.is-win { color: #7ef0b8; } .wsre-prow b.is-loss { color: #f0897f; }
.wsre-card-acts { display: flex; gap: 7px; margin-top: 2px; }
.wsre-mini { width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; cursor: pointer; color: var(--text-muted); background: transparent; border: 1px solid rgba(120,160,255,0.16); }
.wsre-mini:hover { color: #cfe0ff; border-color: rgba(120,160,255,0.34); }
.wsre-mini.is-danger:hover { color: #f0897f; border-color: rgba(240,137,127,0.4); }
.wsre-mini svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wsre-empty-hint { margin: 10px 0 0; font-size: 12.5px; color: rgba(159,194,255,0.8); }
/* Create/edit property form */
.wsre-form-photo { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.wsre-photo-pv { width: 96px; height: 64px; flex: none; border-radius: 12px; background-size: cover; background-position: center; background-color: rgba(74,130,240,0.10); border: 1px solid rgba(120,160,255,0.16); background-image: linear-gradient(150deg, rgba(74,130,240,0.2), rgba(10,16,30,0.7)); }
.wsre-photo-pv.has-photo { background-image: none; }
.wsre-photo-btn { font-size: 12.5px; font-weight: 700; color: #cfe0ff; padding: 9px 14px; border-radius: 9px; border: 1px solid rgba(74,130,240,0.30); background: rgba(74,130,240,0.14); cursor: pointer; }
.wsre-photo-btn:hover { background: rgba(74,130,240,0.24); }
.wsre-form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.wsre-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.wsre-form-btns { display: flex; gap: 8px; margin-left: auto; }
.wsre-prev { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.wsre-prev.is-win { color: #7ef0b8; } .wsre-prev.is-loss { color: #f0897f; }
/* Property detail */
.wsre-detail-hero { display: flex; flex-direction: column; gap: 14px; }
.wsre-detail-cover { height: 200px; border-radius: 14px; background-size: cover; background-position: center; position: relative; }
.wsre-detail-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.wsre-d-rows { display: flex; flex-direction: column; gap: 7px; }
.wsre-d-row { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--text-muted); padding: 7px 0; border-bottom: 1px solid rgba(120,160,255,0.08); }
.wsre-d-row b { color: var(--text-bright); font-variant-numeric: tabular-nums; }
.wsre-d-notes { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-bright); padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,0.03); }
.wsre-tl-form { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.wsre-tl-form .wsjrn-select { flex: 0 0 auto; width: auto; }
.wsre-tl-form [data-wsre-tl-text] { flex: 1 1 160px; }
.wsre-tl-datein { flex: 0 0 90px; }
.wsre-tl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wsre-tl-item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-bright); }
.wsre-tl-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: #5c9cff; }
.wsre-tl-dot.is-buy { background: #4d8dff; } .wsre-tl-dot.is-reform { background: #e0a85c; }
.wsre-tl-dot.is-rent_up { background: #2fd98e; } .wsre-tl-dot.is-incident { background: #f0897f; }
.wsre-tl-label { flex: 1 1 auto; }
.wsre-tl-date { font-size: 11.5px; color: var(--text-muted); }
/* Mi Espacio preview (Trabajo diario) */
.wspv-re { padding: 0; align-items: stretch; justify-content: flex-end; background-size: cover; background-position: center; background-image: linear-gradient(160deg, rgba(74,130,240,0.22), rgba(10,16,30,0.9)); position: relative; }
.wspv-re.has-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,12,22,0.05), rgba(8,12,22,0.82)); }
.wspv-re-ov { position: absolute; top: 12px; left: 14px; display: flex; flex-direction: column; gap: 0; z-index: 2; }
.wspv-re-eq { font-size: 20px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 1px 6px rgba(0,0,0,0.5); }
.wspv-re-lbl { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.82); }
.wspv-re-foot { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; font-size: 12px; font-weight: 700; color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); }
.wspv-re-foot .is-win { color: #7ef0b8; } .wspv-re-foot .is-loss { color: #f0897f; }
.wspv-re-tpl { align-items: center; justify-content: center; }
.wspv-re-tpl .wspv-re-ov { position: static; align-items: center; text-align: center; }
.wspv-re-tpl .wspv-re-eq { font-size: 15px; }
@media (max-width: 920px) { .wsre-grid { grid-template-columns: repeat(2, 1fr); } .wsre-form-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .wsre-kpis { grid-template-columns: 1fr; }
  .wsre-grid { grid-template-columns: 1fr; }
  .wsre-form-grid { grid-template-columns: 1fr 1fr; }
  .wsre-detail-kpis { grid-template-columns: 1fr; }
}

/* ════════ WS.12 (v2) — Workspace Operating System ═══════════════════════════ */
/* Mi Espacio — per-card ⋮ context menu + desktop variable (featured) grid. */
.wsh-dcard-menu { flex: none; width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; cursor: pointer; color: var(--text-muted); background: transparent; border: 1px solid rgba(120,160,255,0.16); transition: color 150ms ease, border-color 150ms ease; }
.wsh-dcard-menu:hover { color: #cfe0ff; border-color: rgba(120,160,255,0.34); }
.wsh-dcard-menu svg { width: 16px; height: 16px; fill: currentColor; }
.wsh-daily-grid .wsh-dcard.is-featured { grid-column: span 2; }
.wsh-daily-grid .wsh-dcard.is-featured .wsh-dcard-pv { height: 150px; }
.wsmse-menu { position: fixed; z-index: 1300; min-width: 184px; padding: 6px; border-radius: 13px; border: 1px solid rgba(120,160,255,0.22); background: linear-gradient(165deg, rgba(28,38,64,0.98), rgba(15,21,37,0.99)); box-shadow: 0 24px 60px rgba(0,0,0,0.5); display: flex; flex-direction: column; gap: 2px; }
.wsmse-menu-item { font: inherit; text-align: left; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-bright); padding: 10px 12px; border: 0; border-radius: 9px; background: transparent; }
.wsmse-menu-item:hover { background: rgba(74,130,240,0.16); }
.wsmse-menu-item.is-danger { color: #f0897f; }
.wsmse-menu-item.is-danger:hover { background: rgba(240,137,127,0.14); }
.wsmse-rename-in { width: 100%; box-sizing: border-box; margin: 4px 0 4px; font-size: 15px; }
.wsmse-empty-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 16px; }
.wsmse-empty-title { margin: 0; font-size: 14px; color: var(--text-bright); }
/* Plantillas — premium gallery (large image-led cards). */
.wsh-gallery { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.wsh-gallery .wsh-pv-wrap { height: 132px; }
.wsh-tpl.is-soon { cursor: default; opacity: 0.92; }
.wsh-tpl.is-soon:hover { transform: none; border-color: rgba(120,160,255,0.13); }
/* Herramientas — compact operative toolbox with per-tool accent. */
.wsh-toolbox { grid-template-columns: repeat(5, 1fr); gap: 12px; }
.wsh-toolcard { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 16px 14px; border-radius: 14px; border: 1px solid rgba(120,160,255,0.14); background: rgba(255,255,255,0.025); cursor: pointer; transition: border-color 160ms ease, transform 160ms ease, background 160ms ease; }
.wsh-toolcard:hover { transform: translateY(-2px); }
.wsh-toolcard.is-soon { cursor: default; opacity: 0.85; }
.wsh-toolcard.is-soon:hover { transform: none; }
.wsh-toolcard-ic { width: 46px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: rgba(74,130,240,0.10); color: #9fc2ff; }
.wsh-toolcard-ic .wsh-tpl-viz-svg { width: 44px; height: 26px; }
.wsh-toolcard .wsh-tool-name { font-size: 13px; line-height: 1.25; }
.wsh-toolcard.is-blue:hover    { border-color: rgba(77,141,255,0.42); background: rgba(74,130,240,0.08); }
.wsh-toolcard.is-blue    .wsh-toolcard-ic { color: #7fb0ff; background: rgba(74,130,240,0.12); }
.wsh-toolcard.is-violet:hover  { border-color: rgba(138,125,255,0.42); }
.wsh-toolcard.is-violet  .wsh-toolcard-ic { color: #b9a6ff; background: rgba(138,125,255,0.12); }
.wsh-toolcard.is-amber:hover   { border-color: rgba(240,168,92,0.42); }
.wsh-toolcard.is-amber   .wsh-toolcard-ic { color: #ffb169; background: rgba(240,168,92,0.12); }
.wsh-toolcard.is-green   .wsh-toolcard-ic { color: #7ef0b8; background: rgba(47,217,142,0.12); }
.wsh-toolcard.is-navy    .wsh-toolcard-ic { color: #8fb4ff; background: rgba(40,70,150,0.18); }
/* Receivables + asset-prices previews */
.wspv-recv, .wspv-assets { gap: 6px; align-items: stretch; justify-content: center; padding: 12px 16px; }
.wspv-recv-row, .wspv-asset-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
.wspv-recv-row b, .wspv-asset-row b { color: var(--text-bright); font-weight: 700; }
.wspv-recv-row i, .wspv-asset-row i { color: var(--text-muted); font-style: normal; font-variant-numeric: tabular-nums; }
.wspv-recv-row em { font-style: normal; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.wspv-recv-row em.is-paid { color: #7ef0b8; background: rgba(47,217,142,0.14); }
.wspv-recv-row em.is-pending { color: #ffd089; background: rgba(240,168,92,0.14); }
.wspv-recv-row em.is-overdue { color: #f0897f; background: rgba(240,137,127,0.14); }
.wspv-asset-row em { font-style: normal; font-size: 10.5px; font-variant-numeric: tabular-nums; }
.wspv-asset-row em.is-win { color: #7ef0b8; } .wspv-asset-row em.is-loss { color: #f0897f; }
@media (max-width: 1100px) { .wsh-toolbox { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 920px) { .wsh-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .wsh-gallery { grid-template-columns: 1fr 1fr; }
  .wsh-toolbox { grid-template-columns: 1fr 1fr; }
  .wsh-daily-grid .wsh-dcard.is-featured { grid-column: span 1; }
  .wsh-daily-grid .wsh-dcard.is-featured .wsh-dcard-pv { height: 96px; }
  .wsmse-menu { left: 12px !important; right: 12px; min-width: 0; }
}

/* ════════ WS.13 — Receivables Pro (bordeaux CRM identity) ═══════════════════ */
.wsrecv-summary { display: flex; flex-direction: column; gap: 14px; }
.wsrecv-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.wsrecv-kpi { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; border-radius: 14px; border: 1px solid rgba(120,160,255,0.14); background: rgba(255,255,255,0.025); }
.wsrecv-kpi.is-pending { border-color: rgba(199,91,122,0.34); background: radial-gradient(130% 150% at 85% 0%, rgba(199,91,122,0.16), transparent 60%), rgba(255,255,255,0.022); }
.wsrecv-kpi.is-collected { border-color: rgba(47,217,142,0.26); }
.wsrecv-kpi.is-overdue { border-color: rgba(240,137,127,0.30); }
.wsrecv-kpi-v { font-size: 24px; font-weight: 800; color: var(--text-bright); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.wsrecv-kpi.is-pending .wsrecv-kpi-v { color: #f3a3bb; }
.wsrecv-kpi.is-collected .wsrecv-kpi-v { color: #7ef0b8; }
.wsrecv-kpi.is-overdue .wsrecv-kpi-v { color: #f0897f; }
.wsrecv-kpi-k { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.wsrecv-sumbar { width: 100%; height: 8px; border-radius: 99px; background: rgba(255,255,255,0.07); overflow: hidden; }
.wsrecv-sumbar-fill { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #8e2d49, #c75b7a); }
.wsrecv-sumbar-lbl { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.wsrecv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.wsrecv-card { display: flex; flex-direction: column; gap: 11px; padding: 16px; border-radius: 14px; border: 1px solid rgba(120,160,255,0.13); background: rgba(255,255,255,0.022); border-left-width: 3px; }
.wsrecv-card.is-pendiente { border-left-color: rgba(150,180,240,0.5); }
.wsrecv-card.is-parcial { border-left-color: #e0a85c; }
.wsrecv-card.is-vencido { border-left-color: #f0897f; }
.wsrecv-card.is-cobrado { border-left-color: #2fd98e; }
.wsrecv-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.wsrecv-card-id { min-width: 0; }
.wsrecv-who { margin: 0; font-size: 15px; font-weight: 800; color: var(--text-bright); }
.wsrecv-concept { font-size: 12px; color: var(--text-muted); }
.wsrecv-status { flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: 0.02em; padding: 3px 10px; border-radius: 999px; }
.wsrecv-status.is-pendiente { color: #aecbff; background: rgba(74,130,240,0.14); }
.wsrecv-status.is-parcial { color: #ffd089; background: rgba(240,168,92,0.16); }
.wsrecv-status.is-vencido { color: #f0897f; background: rgba(240,137,127,0.16); }
.wsrecv-status.is-cobrado { color: #7ef0b8; background: rgba(47,217,142,0.16); }
.wsrecv-amounts { display: flex; gap: 18px; }
.wsrecv-amt { display: flex; flex-direction: column; gap: 1px; }
.wsrecv-amt i { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); font-style: normal; }
.wsrecv-amt b { font-size: 16px; font-weight: 800; color: var(--text-bright); font-variant-numeric: tabular-nums; }
.wsrecv-amt.is-pending b { color: #f3a3bb; }
.wsrecv-bar { width: 100%; height: 6px; border-radius: 99px; background: rgba(255,255,255,0.06); overflow: hidden; }
.wsrecv-bar-fill { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #8e2d49, #c75b7a); }
.wsrecv-bar-fill.is-cobrado { background: linear-gradient(90deg, #2fd98e, #57e6a6); }
.wsrecv-bar-fill.is-vencido { background: linear-gradient(90deg, #c0392b, #f0897f); }
.wsrecv-card-acts { display: flex; gap: 7px; }
.wsrecv-form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.wsrecv-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.wsrecv-form-btns { display: flex; gap: 8px; margin-left: auto; }
.wsrecv-prev { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.wsrecv-prev em { font-style: normal; }
.wsrecv-prev em.is-vencido { color: #f0897f; } .wsrecv-prev em.is-cobrado { color: #7ef0b8; } .wsrecv-prev em.is-parcial { color: #ffd089; }
/* Mi Espacio widget */
.wspv-recvw { gap: 8px; align-items: stretch; padding: 14px 16px; background: linear-gradient(165deg, rgba(142,45,73,0.16), rgba(255,255,255,0.012)); }
.wspv-recvw-top { display: flex; flex-direction: column; gap: 1px; }
.wspv-recvw-amt { font-size: 22px; font-weight: 800; color: #f3a3bb; font-variant-numeric: tabular-nums; }
.wspv-recvw-lbl { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.wspv-recvw-bar { width: 100%; height: 6px; border-radius: 99px; background: rgba(255,255,255,0.08); overflow: hidden; }
.wspv-recvw-fill { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #8e2d49, #c75b7a); }
.wspv-recvw-foot { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); }
.wspv-recvw-foot .is-overdue { color: #f0897f; font-weight: 700; }
@media (max-width: 920px) { .wsrecv-form-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .wsrecv-kpis { grid-template-columns: 1fr; }
  .wsrecv-grid { grid-template-columns: 1fr; }
  .wsrecv-form-grid { grid-template-columns: 1fr 1fr; }
}

/* ════════ WS.14 — Loan Simulator Pro (steel-blue banking identity) ══════════ */
.wsh-toolcard.is-steel-blue:hover { border-color: rgba(184,198,221,0.42); }
.wsh-toolcard.is-steel-blue .wsh-toolcard-ic { color: #cdd9ee; background: rgba(140,160,192,0.16); }
.wsloan-fields { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.wsloan-out { display: flex; flex-direction: column; gap: 18px; }
/* dominant hero */
.wsloan-hero { display: flex; flex-direction: column; gap: 3px; padding: 22px 24px; border-radius: 16px; border: 1px solid rgba(184,198,221,0.30); background: radial-gradient(130% 150% at 82% 0%, rgba(160,179,208,0.20), transparent 60%), linear-gradient(165deg, rgba(40,52,76,0.6), rgba(14,20,34,0.65)); }
.wsloan-hero-lbl { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(200,214,237,0.85); font-weight: 600; }
.wsloan-hero-v { font-size: 46px; font-weight: 800; letter-spacing: -0.02em; color: #fff; font-variant-numeric: tabular-nums; }
.wsloan-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.wsloan-kpi { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(184,198,221,0.16); background: rgba(255,255,255,0.025); }
.wsloan-kpi-v { font-size: 19px; font-weight: 800; color: var(--text-bright); font-variant-numeric: tabular-nums; }
.wsloan-kpi-k { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); }
/* donut */
.wsloan-split { display: flex; align-items: center; gap: 22px; }
.wsloan-donut { width: 132px; height: 132px; flex: none; }
.wsloan-donut-track { fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 14; }
.wsloan-donut-int { fill: none; stroke: #c08a9a; stroke-width: 14; }
.wsloan-donut-cap { fill: none; stroke: #9fb3d0; stroke-width: 14; stroke-linecap: round; }
.wsloan-donut-c { fill: #fff; font-size: 20px; font-weight: 800; }
.wsloan-donut-l { fill: rgba(200,214,237,0.7); font-size: 8px; text-transform: uppercase; letter-spacing: 0.04em; }
.wsloan-legend { display: flex; flex-direction: column; gap: 10px; }
.wsloan-leg { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-muted); }
.wsloan-leg i { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.wsloan-leg.is-cap i { background: #9fb3d0; } .wsloan-leg.is-int i { background: #c08a9a; }
.wsloan-leg b { color: var(--text-bright); font-variant-numeric: tabular-nums; font-weight: 700; }
/* insights */
.wsloan-insights { display: flex; flex-direction: column; gap: 7px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(184,198,221,0.18); background: rgba(140,160,192,0.06); }
.wsloan-insights-t { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(200,214,237,0.9); }
.wsloan-insights ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wsloan-insights li { position: relative; padding-left: 16px; font-size: 13px; line-height: 1.45; color: var(--text-bright); }
.wsloan-insights li::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: #9fb3d0; }
/* amortization (collapsed) */
.wsloan-amort { border-top: 1px solid rgba(184,198,221,0.12); padding-top: 12px; }
.wsloan-amort summary { cursor: pointer; font-size: 13px; font-weight: 700; color: #cdd9ee; list-style: none; }
.wsloan-amort summary::-webkit-details-marker { display: none; }
.wsloan-amort summary::before { content: '▸ '; }
.wsloan-amort[open] summary::before { content: '▾ '; }
.wsloan-amort-tablewrap { max-height: 360px; overflow: auto; margin-top: 12px; }
.wsloan-amort-table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.wsloan-amort-table th { text-align: right; padding: 7px 10px; color: var(--text-muted); font-weight: 600; position: sticky; top: 0; background: #0f1525; }
.wsloan-amort-table th:first-child, .wsloan-amort-table td:first-child { text-align: left; }
.wsloan-amort-table td { text-align: right; padding: 6px 10px; color: var(--text-bright); border-top: 1px solid rgba(184,198,221,0.07); }
.wsloan-amort-cards { display: none; }
/* comparator */
.wsloan-cmp-btn { align-self: flex-start; color: #cdd9ee; border: 1px solid rgba(184,198,221,0.3); background: rgba(140,160,192,0.12); }
.wsloan-cmp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.wsloan-cmp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.wsloan-cmp-rows { display: flex; flex-direction: column; gap: 7px; }
.wsloan-cmp-row { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--text-muted); padding: 7px 0; border-bottom: 1px solid rgba(184,198,221,0.08); }
.wsloan-cmp-row b { color: var(--text-bright); font-variant-numeric: tabular-nums; }
.wsloan-cmp-row b.is-pos { color: #7ef0b8; } .wsloan-cmp-row b.is-neg { color: #f0a37a; }
.wsloan-cmp-insight { margin: 12px 0 0; font-size: 13px; line-height: 1.45; color: var(--text-bright); padding: 11px 14px; border-radius: 11px; border: 1px solid rgba(184,198,221,0.2); background: rgba(140,160,192,0.08); }
/* Mi Espacio preview */
.wspv-loan { gap: 8px; align-items: stretch; padding: 14px 16px; background: linear-gradient(165deg, rgba(160,179,208,0.16), rgba(255,255,255,0.012)); }
.wspv-loan-top { display: flex; flex-direction: column; gap: 1px; }
.wspv-loan-amt { font-size: 22px; font-weight: 800; color: #cdd9ee; font-variant-numeric: tabular-nums; }
.wspv-loan-lbl { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.wspv-loan-foot { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 920px) { .wsloan-fields { grid-template-columns: repeat(2, 1fr); } .wsloan-kpis { grid-template-columns: repeat(2, 1fr); } .wsloan-cmp-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .wsloan-hero-v { font-size: 38px; }
  .wsloan-split { flex-direction: column; align-items: flex-start; }
  .wsloan-amort-tablewrap { display: none; }
  .wsloan-amort-cards { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; max-height: 360px; overflow: auto; }
  .wsloan-amort-card { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,0.03); font-size: 12px; }
  .wsloan-amort-card .wsloan-amort-m { width: 100%; font-weight: 700; color: #cdd9ee; }
  .wsloan-amort-card i { color: var(--text-muted); font-style: normal; }
  .wsloan-amort-card b { color: var(--text-bright); }
}

/* ════════ WS.14A — Real Estate Pro premium upgrade (per-type scene covers) ══ */
.wsre-cover, .wsre-detail-cover, .wsre-photo-pv { position: relative; overflow: hidden; }
.wsre-cover:not(.has-photo), .wsre-detail-cover:not(.has-photo), .wsre-photo-pv:not(.has-photo) {
  background: radial-gradient(120% 130% at 80% -12%, rgba(var(--wsre-c, 74,130,240), 0.42), transparent 58%), linear-gradient(155deg, rgba(var(--wsre-c, 74,130,240), 0.20), rgba(9,14,26,0.94) 84%);
}
.wsre-cover.is-flat, .wsre-detail-cover.is-flat, .wsre-photo-pv.is-flat { --wsre-c: 74,130,240; }
.wsre-cover.is-house, .wsre-detail-cover.is-house, .wsre-photo-pv.is-house { --wsre-c: 47,200,140; }
.wsre-cover.is-chalet, .wsre-detail-cover.is-chalet, .wsre-photo-pv.is-chalet { --wsre-c: 55,199,184; }
.wsre-cover.is-local, .wsre-detail-cover.is-local, .wsre-photo-pv.is-local { --wsre-c: 224,168,92; }
.wsre-cover.is-office, .wsre-detail-cover.is-office, .wsre-photo-pv.is-office { --wsre-c: 138,125,255; }
.wsre-cover.is-warehouse, .wsre-detail-cover.is-warehouse, .wsre-photo-pv.is-warehouse { --wsre-c: 80,200,210; }
.wsre-cover.is-garage, .wsre-detail-cover.is-garage, .wsre-photo-pv.is-garage { --wsre-c: 150,165,188; }
.wsre-cover-glyph { position: absolute; right: -10px; bottom: -16px; width: 92px; height: 92px; color: rgba(255,255,255,0.12); pointer-events: none; }
.wsre-detail-cover .wsre-cover-glyph { width: 150px; height: 150px; right: -16px; bottom: -24px; }
.wsre-photo-pv .wsre-cover-glyph { width: 56px; height: 56px; right: -6px; bottom: -10px; }

/* ════════ WS.17 — Premium visual asset system (local WebP covers) ══════════ */
/* Self-removing overlay <img>: fills its (relative, overflow:hidden) host when the
   WebP loads, removed on error so the underlying CSS scene/glyph/preview shows. */
.ws-asset-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; z-index: 1; border-radius: inherit;
  opacity: 0; transition: opacity 360ms ease;
}
.ws-asset-img.is-loaded { opacity: 1; }
/* Real-estate covers already are position:relative; keep status dot above photo. */
.wsre-status { z-index: 2; }
/* Template-card cover host: positioned slot so the overlay fills the preview. */
.wspv-asset-host { position: relative; display: flex; width: 100%; height: 100%; overflow: hidden; }
.wspv-asset-host > .wspv { flex: 1 1 auto; }
.wsh-pv-wrap > .wspv-asset-host, .wsh-dcard-pv > .wspv-asset-host { flex: 1 1 auto; }
/* Tool-card icon tile: compact premium cover fills the tile (icon is the fallback). */
.wsh-toolcard-ic { position: relative; overflow: hidden; }

/* ════════ WS.17C — visual card polish (image-led covers, no redundant CTA) ═══ */
/* Discrete affordance instead of a "Usar plantilla" CTA: the whole card is the
   click target and the hover (border + lift + bg) already signals it. */
.wsh-tpl-chev { flex: none; font-size: 19px; font-weight: 700; line-height: 1; color: rgba(159,194,255,0.5); transition: color 180ms ease, transform 180ms ease; }
.wsh-cardv:hover .wsh-tpl-chev { color: #aecbff; transform: translateX(2px); }
/* Covers breathe more — image acts as a premium portada. */
.wsh-gallery .wsh-pv-wrap { height: 150px; }
.wsh-cardv .ws-asset-img { transition: opacity 360ms ease, transform 320ms ease; }
.wsh-cardv:hover .ws-asset-img.is-loaded { transform: scale(1.03); }
@media (max-width: 640px) {
  .wsh-gallery .wsh-pv-wrap { height: 132px; }
}
/* card type chip + restructured top */
.wsre-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.wsre-card-id { min-width: 0; }
.wsre-type-chip { flex: none; font-size: 10px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: #e6c483; background: rgba(224,177,92,0.14); border: 1px solid rgba(224,177,92,0.28); padding: 2px 8px; border-radius: 999px; }
/* form sections */
.wsre-form-section { padding: 14px 0; border-top: 1px solid rgba(120,160,255,0.09); }
.wsre-form-section:first-of-type { border-top: 0; padding-top: 4px; }
.wsre-form-sec-t { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: rgba(224,177,92,0.85); margin-bottom: 10px; }
.wsre-form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 640px) { .wsre-form-grid { grid-template-columns: 1fr; } }

/* ════════ WS.15 — Asset Price Tracker (petrol-blue trading table) ═══════════ */
.wstool-result.wsap-result { grid-template-columns: 1.1fr 1.4fr; gap: 16px; }
.wsap-result .wstool-res-main { border-color: rgba(47,143,158,0.32); background: radial-gradient(130% 150% at 82% 0%, rgba(79,179,196,0.18), transparent 60%), linear-gradient(165deg, rgba(20,52,60,0.55), rgba(12,20,30,0.62)); }
.wsap-result .wstool-res-final { font-size: 40px; }
.wsap-sum-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
/* ranking */
.wsap-ranking { display: flex; flex-direction: column; gap: 8px; }
.wsap-ranking-t { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(120,200,214,0.9); margin-bottom: 2px; }
.wsap-rank-row { display: flex; align-items: center; gap: 10px; }
.wsap-rank-t { width: 54px; flex: none; font-size: 12px; font-weight: 700; color: var(--text-bright); }
.wsap-rank-track { flex: 1 1 auto; height: 9px; border-radius: 99px; background: rgba(255,255,255,0.05); overflow: hidden; }
.wsap-rank-bar { display: block; height: 100%; border-radius: 99px; }
.wsap-rank-bar.is-ganadora { background: linear-gradient(90deg, #2fd98e, #57e6a6); }
.wsap-rank-bar.is-perdedora { background: linear-gradient(90deg, #c0392b, #f0897f); }
.wsap-rank-bar.is-cerrada { background: rgba(120,160,255,0.4); }
.wsap-rank-v { width: 56px; flex: none; text-align: right; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.wsap-rank-v.is-win { color: #7ef0b8; } .wsap-rank-v.is-loss { color: #f0897f; }
/* desktop table */
.wsap-tablewrap { overflow-x: auto; }
.wsap-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.wsap-table th { text-align: right; padding: 8px 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); border-bottom: 1px solid rgba(79,179,196,0.16); }
.wsap-table th:first-child, .wsap-table td:first-child { text-align: left; }
.wsap-table td { text-align: right; padding: 9px 10px; color: var(--text-bright); border-bottom: 1px solid rgba(120,160,255,0.07); }
.wsap-table tr.is-ganadora td:first-child, .wsap-table tr.is-perdedora td:first-child { box-shadow: inset 3px 0 0 transparent; }
.wsap-asset b { font-weight: 700; } .wsap-asset i { font-style: normal; color: var(--text-muted); margin-left: 6px; font-size: 11.5px; }
.wsap-table td.is-win { color: #7ef0b8; font-weight: 700; } .wsap-table td.is-loss { color: #f0897f; font-weight: 700; } .wsap-table td.is-open { color: var(--text-muted); }
.wsap-open-pill { font-size: 10.5px; font-weight: 700; color: #8fd3df; background: rgba(79,179,196,0.16); padding: 2px 8px; border-radius: 999px; }
.wsap-row-acts { display: inline-flex; gap: 5px; }
.wsap-cards { display: none; }
/* form */
.wsap-form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.wsap-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.wsap-form-btns { display: flex; gap: 8px; margin-left: auto; }
.wsap-prev { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.wsap-prev.is-ganadora { color: #7ef0b8; } .wsap-prev.is-perdedora { color: #f0897f; } .wsap-prev.is-abierta { color: #8fd3df; }
/* Mi Espacio preview */
.wspv-ap { gap: 8px; align-items: stretch; padding: 14px 16px; background: linear-gradient(165deg, rgba(47,143,158,0.16), rgba(255,255,255,0.012)); }
.wspv-ap-top { display: flex; flex-direction: column; gap: 1px; }
.wspv-ap-amt { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.wspv-ap-amt.is-win { color: #7ef0b8; } .wspv-ap-amt.is-loss { color: #f0897f; }
.wspv-ap-lbl { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.wspv-ap-foot { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); }
.wspv-ap-foot .is-win { color: #7ef0b8; font-weight: 700; }
@media (max-width: 920px) { .wstool-result.wsap-result { grid-template-columns: 1fr; } .wsap-form-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .wsap-sum-grid { grid-template-columns: 1fr; }
  .wsap-form-grid { grid-template-columns: 1fr 1fr; }
  .wsap-tablewrap { display: none; }
  .wsap-cards { display: flex; flex-direction: column; gap: 10px; }
  .wsap-card { display: flex; flex-direction: column; gap: 9px; padding: 14px; border-radius: 13px; border: 1px solid rgba(79,179,196,0.16); background: rgba(255,255,255,0.022); border-left-width: 3px; }
  .wsap-card.is-ganadora { border-left-color: #2fd98e; } .wsap-card.is-perdedora { border-left-color: #f0897f; } .wsap-card.is-abierta, .wsap-card.is-cerrada { border-left-color: rgba(120,160,255,0.45); }
  .wsap-card-top { display: flex; justify-content: space-between; align-items: center; }
  .wsap-card-a { font-size: 14px; font-weight: 800; color: var(--text-bright); }
  .wsap-card-type { font-size: 11px; color: #8fd3df; }
  .wsap-card-rows { display: flex; gap: 16px; }
  .wsap-card-rows span { display: flex; flex-direction: column; gap: 1px; }
  .wsap-card-rows i { font-size: 10px; text-transform: uppercase; color: var(--text-muted); font-style: normal; }
  .wsap-card-rows b { font-size: 13px; font-weight: 700; color: var(--text-bright); font-variant-numeric: tabular-nums; }
  .wsap-card-pl { display: flex; gap: 12px; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
  .wsap-card-pl .is-win { color: #7ef0b8; } .wsap-card-pl .is-loss { color: #f0897f; }
  .wsap-card-acts { display: flex; gap: 7px; }
}

/* ════════ WS.16 — Mobile density + renames (Pro badge, payment control) ═════ */
.wsh-pro-badge { display: inline-block; vertical-align: middle; font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #f3cf9a; background: rgba(233,168,87,0.14); border: 1px solid rgba(233,168,87,0.30); padding: 1px 7px; border-radius: 999px; margin-left: 6px; }
/* Control de cobros — Total KPI + overdue badge + search */
.wsrecv-kpi.is-total { border-color: rgba(120,160,255,0.26); }
.wsrecv-kpi.is-total .wsrecv-kpi-v { color: var(--text-bright); }
.wsrecv-sumbar-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wsrecv-overdue-badge { font-size: 11px; font-weight: 800; color: #f0897f; background: rgba(240,137,127,0.14); border: 1px solid rgba(240,137,127,0.28); padding: 2px 9px; border-radius: 999px; flex: none; }
.wsrecv-search { width: 100%; box-sizing: border-box; margin: 12px 0 4px; }
/* ── Mobile density: more useful info per screen, still premium ── */
@media (max-width: 640px) {
  .aurix-wsh.wsh-tool-view, .aurix-wsh.wsh-wsg, .aurix-wsh.wsh-wsp, .aurix-wsh.wsh-ws4 { gap: 10px; }
  .aurix-wsh .wsh-card { padding: 13px 14px; }
  .wsh-mse { gap: 10px; }
  .wsh-head { margin-bottom: 8px; }
  /* tighter forms */
  .wsre-form-section { padding: 10px 0; }
  .wsre-form-grid, .wsrecv-form-grid, .wsap-form-grid, .wstool-fields, .wsloan-fields, .wsg-form { gap: 9px; }
  .ws4-num, .wsg-text, .wsg-select { padding-top: 9px; padding-bottom: 9px; }
  /* receivables compact rows (≤140px) */
  .wsrecv-card { gap: 7px; padding: 11px 12px; }
  .wsrecv-amounts { gap: 12px; }
  .wsrecv-amt b { font-size: 14px; }
  .wsrecv-who { font-size: 14px; }
  .wsrecv-kpis { gap: 8px; }
  .wsrecv-kpi { padding: 12px 13px; }
  .wsrecv-kpi-v { font-size: 20px; }
  /* asset cards tighter */
  .wsap-card { padding: 11px 12px; gap: 7px; }
  /* RE summary + cards tighter */
  .wsre-kpi { padding: 13px 14px; }
  .wsre-kpi-v { font-size: 20px; }
  .wsre-cover { height: 92px; }
  .wsre-card-body { padding: 11px 13px; gap: 7px; }
  /* compound/loan hero a touch smaller already handled; tighten KPI cards */
  .wsloan-kpi, .wstool-res-cell { padding: 12px 13px; }
  /* tool cards (toolbox + gallery) lower, CTA not cut */
  .wsh-pv-wrap { height: 90px; }
  .wsh-cardv-foot { padding: 10px 12px; }
  .wsh-tpl-name, .wsh-tool-name { font-size: 13px; line-height: 1.2; }
  .wsh-tpl-go, .wsh-tool-go { white-space: nowrap; }
  .wsh-toolcard { padding: 13px 12px; gap: 7px; }
  .wsh-toolcard-ic { width: 40px; height: 32px; }
}

/* ════════ WS.2 — Financial Tools Hub (dedicated tools) ═══════════════════════
   Premium interactive tools that open inside Workspace templates mode (never
   the Sheet). Encapsulated under ws2-* classes; responsive. */
.ws2-tool { max-width: 920px; margin: 0 auto; }
.ws2-tool-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.ws2-tool-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-bright, #e8eaf0);
  letter-spacing: -0.01em;
  flex: 1 1 auto;
}
.ws2-tool-actions { margin-left: auto; }
.ws2-back, .ws2-ghost, .ws2-use-sheet {
  font: inherit;
  cursor: pointer;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(225,233,255,0.9);
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.ws2-back:hover, .ws2-ghost:hover, .ws2-use-sheet:hover { background: rgba(255,255,255,0.08); border-color: rgba(74,130,240,0.4); }
.ws2-back:active, .ws2-ghost:active, .ws2-use-sheet:active { transform: scale(0.97); }

.ws2-tool-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}
.ws2-inputs, .ws2-results {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.08));
  background: var(--bg-card, rgba(255,255,255,0.02));
}
.ws2-field { display: flex; flex-direction: column; gap: 5px; }
.ws2-field-label { font-size: 12px; color: var(--text-muted, rgba(220,230,250,0.6)); }
.ws2-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.1));
  background: rgba(255,255,255,0.03);
  color: var(--text-bright, #e8eaf0);
  font: inherit;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  -webkit-appearance: none;
  appearance: none;
}
.ws2-input:focus { outline: none; border-color: rgba(74,130,240,0.5); }

.ws2-result {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border-subtle, rgba(255,255,255,0.06));
}
.ws2-result:last-of-type { border-bottom: 0; }
.ws2-result-label { font-size: 12.5px; color: var(--text-muted, rgba(220,230,250,0.6)); }
.ws2-result-value { font-size: 15px; font-weight: 600; color: var(--text-bright, #e8eaf0); font-variant-numeric: tabular-nums; text-align: right; }
.ws2-result.is-big {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 4px 0 14px;
}
.ws2-result.is-big .ws2-result-label { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.ws2-result.is-big .ws2-result-value { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }

.ws2-breakdown { margin-top: 14px; }
.ws2-breakdown-title { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted, rgba(220,230,250,0.5)); margin-bottom: 8px; }
.ws2-bd-rows { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }
.ws2-bd-row { display: flex; justify-content: space-between; font-size: 12.5px; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.ws2-bd-year { color: var(--text-muted, rgba(220,230,250,0.6)); }
.ws2-bd-val { color: var(--text-bright, #e8eaf0); font-variant-numeric: tabular-nums; }

.ws2-status-wrap { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.ws2-status-label { font-size: 12px; color: var(--text-muted, rgba(220,230,250,0.6)); }
.ws2-status {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,0.12);
}
.ws2-status.is-reached      { color: rgba(72,207,173,0.95); border-color: rgba(72,207,173,0.4); background: rgba(72,207,173,0.08); }
.ws2-status.is-ontrack      { color: rgba(99,179,237,0.95); border-color: rgba(99,179,237,0.4); background: rgba(99,179,237,0.08); }
.ws2-status.is-needmore     { color: rgba(232,176,84,0.95); border-color: rgba(232,176,84,0.4); background: rgba(232,176,84,0.08); }
.ws2-status.is-insufficient { color: var(--text-muted, rgba(220,230,250,0.6)); }

.ws2-tool-foot { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ws2-use-sheet { align-self: flex-start; opacity: 0.85; }
.ws2-disclaimer { margin: 0; font-size: 11px; color: var(--text-muted, rgba(220,230,250,0.55)); opacity: 0.85; }

@media (max-width: 720px) {
  .ws2-tool-body { grid-template-columns: 1fr; gap: 14px; }
  .ws2-result.is-big .ws2-result-value { font-size: 26px; }
  .ws2-tool-title { font-size: 16px; flex-basis: 100%; order: 2; }
  .ws2-back { order: 1; }
  .ws2-tool-actions { order: 3; }
}

/* ════════════════ WS.F1 — Workspace premium polish (visual only) ════════════════ */
/* #2 Mi Espacio — three equal-height feature columns (Presupuesto · Inmobiliario · Cobros) */
.wsh-daily-grid { gap: 14px; }
.wsh-daily-grid.is-premium-preview { align-items: stretch; }
.wsh-daily-grid.is-premium-preview .wsh-dcard { height: 100%; }
.wsh-daily-grid.is-premium-preview .wsh-dcard-pv { height: 132px; }
.wsh-daily-grid.is-premium-preview .wsh-dcard-foot { min-height: 54px; }
.wsh-mse { gap: 16px; }

/* #3 Presupuesto mensual — premium donut (income/expense arcs, free money centered) */
.wspv-bud-donut { flex-direction: row; align-items: center; justify-content: center; gap: 14px; padding: 10px 16px; }
.wspv-dn-wrap { position: relative; width: 84px; height: 84px; flex: none; }
.wspv-dn { width: 100%; height: 100%; transform: rotate(-90deg); }
.wspv-dn-track { fill: none; stroke: rgba(255,255,255,0.07); stroke-width: 9; }
.wspv-dn-seg { fill: none; stroke-width: 9; stroke-linecap: round; }
.wspv-dn-seg.is-exp { stroke: rgba(120,160,255,0.55); }
.wspv-dn-seg.is-free { stroke: #2fd98e; filter: drop-shadow(0 0 5px rgba(47,217,142,0.4)); }
.wspv-dn-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.wspv-dn-v { font-size: 15px; font-weight: 800; color: #7ef0b8; font-variant-numeric: tabular-nums; line-height: 1; }
.wspv-dn-k { font-size: 7.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.wspv-dn-legend { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.wspv-dn-li { display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: var(--text-muted); white-space: nowrap; }
.wspv-dn-li b { margin-left: auto; color: var(--text-bright); font-weight: 700; font-variant-numeric: tabular-nums; }
.wspv-dn-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.wspv-dn-dot.is-inc { background: #7db8ff; }
.wspv-dn-dot.is-exp { background: rgba(120,160,255,0.6); }

/* #4 Control de cobros — dashboard status indicators (● paid/pending/overdue) + total */
.wspv-recvi { gap: 9px; align-items: stretch; justify-content: center; padding: 12px 16px; }
.wspv-recvi-total { display: flex; flex-direction: column; gap: 0; }
.wspv-recvi-total b { font-size: 22px; font-weight: 800; color: var(--text-bright); font-variant-numeric: tabular-nums; line-height: 1.05; }
.wspv-recvi-total i { font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-style: normal; }
.wspv-recvi-rows { display: flex; flex-direction: column; gap: 5px; }
.wspv-recvi-row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.wspv-recvi-row em { font-style: normal; color: var(--text-muted); }
.wspv-recvi-row b { margin-left: auto; color: var(--text-bright); font-weight: 700; font-variant-numeric: tabular-nums; }
.wspv-recvi-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.wspv-recvi-dot.is-paid { background: #2fd98e; box-shadow: 0 0 5px rgba(47,217,142,0.5); }
.wspv-recvi-dot.is-pending { background: #f0a85c; box-shadow: 0 0 5px rgba(240,168,92,0.45); }
.wspv-recvi-dot.is-overdue { background: #f0897f; box-shadow: 0 0 5px rgba(240,137,127,0.45); }

/* #5 Herramientas fijadas — real mini-cards (icon · name · Abrir), not dashed tags */
.wsh-tool-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 10px; }
.wsh-tchip { position: relative; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; border-radius: 14px; border: 1px solid rgba(120,160,255,0.16); border-style: solid; background: rgba(255,255,255,0.025); transition: border-color 180ms ease, transform 180ms ease, background 180ms ease; }
.wsh-tchip:hover { border-color: rgba(77,141,255,0.36); transform: translateY(-2px); background: rgba(74,130,240,0.06); }
.wsh-tchip-ic { width: 44px; height: 44px; border-radius: 12px; background: rgba(74,130,240,0.12); color: #9fc2ff; }
.wsh-tchip-ic .wsh-tpl-viz-svg { width: 30px; height: 20px; }
.wsh-tchip-name { font-size: 13.5px; line-height: 1.2; }
.wsh-tchip-open { width: 100%; text-align: center; padding: 8px 11px; border-radius: 10px; }
.wsh-tchip-x { position: absolute; top: 9px; right: 9px; }

/* #6/#7 Template identity scenes (premium CSS fallback; auto-upgrades to WebP) */
.wspv-scene { padding: 10px 12px; background: linear-gradient(165deg, rgba(74,130,240,0.09), rgba(255,255,255,0.012)); }
.wspv-scene svg { width: 100%; height: 100%; display: block; }
.wspv-scene.is-property { background: linear-gradient(165deg, rgba(125,184,255,0.10), rgba(255,255,255,0.012)); }
.wspv-scene.is-networth { background: linear-gradient(165deg, rgba(138,125,255,0.09), rgba(255,255,255,0.012)); }
.wspv-scene.is-business { background: linear-gradient(165deg, rgba(110,224,210,0.08), rgba(255,255,255,0.012)); }
.wspv-scene.is-fire { background: linear-gradient(165deg, rgba(243,207,154,0.10), rgba(255,255,255,0.012)); }

/* #8 Herramientas — more presence + premium hover (no size increase) */
.wsh-toolcard { background: linear-gradient(165deg, rgba(255,255,255,0.038), rgba(255,255,255,0.012)); }
.wsh-toolcard:hover { box-shadow: 0 12px 30px -20px rgba(0,0,0,0.8); }
.wsh-toolcard-ic { width: 50px; height: 42px; border-radius: 12px; }
.wsh-toolcard-ic .wsh-tpl-viz-svg { width: 46px; height: 28px; }

/* ════════ MK.F1 — Market web premium rebuild (DESKTOP ≥769px only) ════════════
   Turn Market from "promo cards + table below" into a premium asset terminal: the
   list becomes the protagonist. Scoped to ≥769px so tablet/mobile stay identical.
   Visual + light structure only — no data/price/search/watchlist/API logic touched.
   (i18n ES label fixes + extending the existing pill filter to desktop live in app.js.) */
@media (min-width: 769px) {
  /* §2/§13 — hide the large suggested-asset discovery cards on desktop; keep the
     subcategory pills (now real list filters via the extended _aurixMktMobileCategoryFilter).
     The cards' markup/handlers are untouched — only hidden, so nothing breaks internally. */
  #marketList .funds-grid,
  #marketList .funds-show-more { display: none; }
  /* §11/§12 — with the cards gone, collapse the discovery block to just the pills row
     so the list rises naturally and leaves no dead space. */
  #marketList .funds-discover { gap: 0; padding: 2px 0 10px; }
  #marketList .funds-cats { align-items: center; padding: 2px 2px 4px; }

  /* §3 — pills: compact, premium, subtle blue glow only when active. */
  #marketList .funds-cat { padding: 6px 13px; font-size: 12px; line-height: 1.1; }
  #marketList .funds-cat.active {
    box-shadow: 0 0 0 1px rgba(74,130,240,0.30), 0 0 14px -4px rgba(74,130,240,0.55);
  }

  /* §5/§6 — restructure the table columns (Activo ≈40% / Precio ≈21% / 24H ≈17% /
     Sparkline ≈21% / Favorito 44px) so the price sits close to the asset and the big
     asset↔price gap disappears. Header + rows share the EXACT same grid → perfect
     Bloomberg-style column alignment. */
  #marketList.is-v3 .market-table-header,
  #marketList.is-v3 .market-row {
    grid-template-columns: 2.9fr 1.5fr 1.2fr 1.45fr 44px;
  }

  /* §7 — sparkline is a secondary indicator: ~18% shorter (svg has a viewBox so it
     scales cleanly), kept calm via the existing opacity. Shape/colour/trend intact. */
  #marketList.is-v3 .col-chart svg { width: 66px; }

  /* §10 — search reads as part of the module: height closer to the tabs/pills,
     higher-contrast placeholder. Position & size otherwise unchanged. */
  .market-search-wrap input { height: 38px; }
  .market-search-wrap input::placeholder { color: rgba(228,236,255,0.52); }

  /* §11/§12 — tighter vertical rhythm between tabs, pills, header and the list. */
  .market-screen { padding-top: 8px; }
  .market-tabs { padding-top: 8px; padding-bottom: 4px; margin: 4px 0; }
  #marketList.market-section { margin-top: 10px; }
}

/* §3/§13 — TODO (deferred per spec §14, no logic invented): optional crypto pills
   Memecoins / RWA / DEX need category entries in _CRYPTO_CATALOG with tagged items.
   Add the catalog data + discCat_crypto_* labels first; the pill UI then renders
   automatically through _renderDiscoveryCatalog. Not forced here. */

/* ════════ MK.F2 — Market asset-row premium hierarchy ═════════════════════════
   Two-level asset cell: ticker (dominant) → name (secondary) → category (tertiary
   metadata text, e.g. "Bitcoin · Cripto"). Builds on MK.F1. Visual/hierarchy only —
   no API/price/data/favorites/search/nav/filter logic. The category text replaces
   the per-row badge pill (§5/§15: metadata, not pills) consistently on every viewport,
   so it's never shown twice. Row height is unchanged (category shares the name line). */

/* §2/§5 — category as lightweight tertiary metadata; retire the per-row pill. */
#marketList .asset-cat { color: rgba(200,214,245,0.42); font-weight: 500; letter-spacing: 0.005em; }
#marketList .market-row-badge { display: none; }

/* §3 — refine desktop columns toward MK.F2 ratios: narrower 24H, asset ~42%, price
   sitting close to the asset (less dead space). Header + rows share the EXACT grid →
   aligned columns. Tablet/mobile (≤768) keep their current geometry untouched. */
@media (min-width: 769px) {
  #marketList.is-v3 .market-table-header,
  #marketList.is-v3 .market-row {
    grid-template-columns: 2.9fr 1.45fr 1.0fr 1.5fr 44px;
  }
}

/* ════════ MK.F3 — Market web alignment + header cleanup ══════════════════════
   Polish after MK.F1/MK.F2: drop the redundant in-table section title, rebalance
   columns (price closer to the asset, 24H separated from the sparkline), and keep
   the layout stable across categories. Visual/alignment only — no API/data/price/
   favorites/filter/search/nav logic. ES labels + pills already handled in MK.F1/F2.

   §1 — remove the redundant section title ("Seguimiento / Cripto / …") inside the
   container; it just repeats the active tab. Mobile (.is-v4) already hid it — this
   matches desktop to it so the only label left is the functional column header. */
#marketList .market-section-header { display: none; }

@media (min-width: 769px) {
  /* §4/§5/§6 — rebalanced desktop columns: asset dominant (~45%), price + 24H pulled
     into compact columns (right-aligned text sits closer to the asset → less dead
     space), sparkline narrowed. Header + rows share the EXACT grid → aligned. */
  #marketList.is-v3 .market-table-header,
  #marketList.is-v3 .market-row {
    grid-template-columns: 3.5fr 1.15fr 1.0fr 1.45fr 44px;
  }

  /* §7 — sparkline ~12% narrower again (58px). Right-aligned, so the extra room
     falls on its LEFT → §6's clear separation between the 24H figure and the chart.
     Shape/colour/height/data untouched. */
  #marketList.is-v3 .col-chart svg { width: 58px; }
}

/* ════════ MK.F4 — Market fixed structure + premium iconography ═══════════════
   Stable layout across categories, tighter right-side sequence, more refined
   pills, and (via the app.js type-normalization fix) real provider/index/
   commodity badges in Fondos/Índices/Materias. Visual/alignment only.
   Desktop ≥769; tablet/mobile (≤768) keep their current geometry. */
@media (min-width: 769px) {
  /* §6/§7 — compact right-side sequence ACTIVO → PRECIO → 24H → GRÁFICO. Narrow
     the sparkline column so the (right-aligned) chart sits ~24-32px from the 24H
     figure, and shrink the svg ~14% (58→50px). Header + rows share the grid. */
  #marketList.is-v3 .market-table-header,
  #marketList.is-v3 .market-row {
    /* fixed sparkline track → the 24H↔chart gap stays ~30px at any width (§6),
       instead of widening on large monitors as a fr track would. */
    grid-template-columns: 3.5fr 1.15fr 1.0fr 70px 44px;
  }
  #marketList.is-v3 .col-chart svg { width: 50px; }

  /* §3 — secondary filters read as professional filters, not buttons:
     shorter, tighter padding, slightly squarer radius, uniform gap. */
  #marketList .funds-cats { gap: 6px; }
  #marketList .funds-cat {
    padding: 5px 11px; font-size: 11.5px; line-height: 1.1; border-radius: 8px;
  }

  /* §4 — guarantee a visual dead-zone so a row's hover never touches the next
     row's icon. Small, so density is preserved. */
  #marketList.is-v3 .market-row { margin-bottom: 2px; }

  /* §5 — table glued to the filters: trim residual padding under the pills so the
     list starts right below them (Cripto-style) on every category. */
  #marketList .funds-discover { padding: 2px 0 6px; }
}

/* ════════ MK.F5 — Market asset-row perceived quality ═════════════════════════
   More value per row without turning rows into cards: clean name subline + a
   discrete context badge, stronger favourites, sparkline fill (legacy path), a
   touch more breathing room, uniform 40px icons, clearer type hierarchy, and a
   discrete market-status line. Visual only. Desktop is-v3 (applies all viewports
   where noted); ≤768 keeps its row geometry. */

/* §2 — discrete context badge on the ticker line (un-hides MK.F2's hidden pill,
   neutralises the old strong per-type colours → one calm, uniform chip). */
#marketList.is-v3 .market-row-badge {
  display: inline-flex; align-items: center;
  margin-left: 8px; padding: 1px 7px; border-radius: 6px;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.03em; text-transform: none;
  color: rgba(200,214,245,0.60);
  background: rgba(138,166,255,0.08);
  border: 1px solid rgba(138,166,255,0.12);
}

/* §3 + §9 — favourites: faint when idle, soft glow + scale on hover, premium gold
   when active, with a 180ms transition so toggling feels smooth (not instant). */
#marketList.is-v3 .watchlist-btn {
  color: rgba(220,230,250,0.28);
  transition: color 180ms ease, transform 180ms cubic-bezier(0.22,1,0.36,1), text-shadow 180ms ease;
}
#marketList.is-v3 .watchlist-btn:hover { color: rgba(244,196,90,0.85); transform: scale(1.12); }
#marketList.is-v3 .watchlist-btn.active { color: #f4c44a; text-shadow: 0 0 9px rgba(244,196,90,0.55); }
#marketList.is-v3 .watchlist-btn:active { transform: scale(0.92); }

/* §5 + §6 — desktop only (≤768 keeps its tuned is-v4 geometry untouched):
   a little more breathing room + a uniform 40×40 circular icon for EVERY class. */
@media (min-width: 769px) {
  #marketList.is-v3 .market-row { padding: 16px 12px; }
  #marketList.is-v3 .asset-icon { width: 40px; height: 40px; font-size: 14px; }
}

/* §7 — typographic hierarchy: ticker 700, name 400, price 700, 24H 700. */
#marketList.is-v3 .asset-symbol { font-weight: 700; }
#marketList.is-v3 .asset-name   { font-weight: 400; }
#marketList.is-v3 .col-price    { font-weight: 700; }
#marketList.is-v3 .col-change   { font-weight: 700; }

/* §8 — discrete market-status microindicator (one calm line at the top, never
   per-row). Reuses the .market-status dot; styled here as an inline status line. */
#marketList .mkt-status-line {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 10px; padding: 0; background: none; border: 0;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  color: rgba(200,214,245,0.62);
}
#marketList .mkt-status-line .dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(200,214,245,0.5); }
#marketList .mkt-status-line.open .dot   { background: #3fbf7f; box-shadow: 0 0 6px rgba(63,191,127,0.6); }
#marketList .mkt-status-line.closed .dot { background: rgba(224,90,90,0.85); }
#marketList .mkt-status-line.crypto .dot { background: #9a6cf0; box-shadow: 0 0 6px rgba(154,108,240,0.5); }

/* ════════ MK.F7 — Market final premium fix ═══════════════════════════════════
   Fixed top row (search never moves), consistent list start across categories,
   no redundant row badges (handled in app.js), tighter columns, finer header.
   Visual/structure only. */

/* §1/§2 — the search position + the list start are ALREADY fixed at ≥1024 by the
   existing .market-screen grid (areas "tabs search" / "body body" → search pinned
   top-right, body always row 2). MK.F7's real fix was moving the MK.F5 status line
   OUT of the per-category list flow into the search cell (below) so nothing shifts. */
@media (min-width: 769px) {
  /* §5 — tighter columns: Activo ~42 / Precio ~16 / 24H ~13 / Sparkline ~20 / ★.
     Price + 24H pulled left (compact A→P→24H), sparkline separated on the right. */
  #marketList.is-v3 .market-table-header,
  #marketList.is-v3 .market-row {
    grid-template-columns: 2.95fr 1.12fr 0.9fr 1.35fr 44px;
  }
  /* §6 — sparkline ~12% narrower again (50→44px); supports, never dominates. */
  #marketList.is-v3 .col-chart svg { width: 44px; }

  /* §7 — hover stays inside the row (the 16px row padding already gives a ≥6px
     dead-zone to neighbouring icons); calm blue-glass, no scale, no shift. */
  #marketList.is-v3 .market-row { margin-bottom: 3px; }
  #marketList.is-v3 .market-row:hover {
    background: rgba(74,130,240,0.06);
    box-shadow: inset 0 0 0 1px rgba(74,130,240,0.12);
  }

  /* §8 — secondary filters: finer, calmer. */
  #marketList .funds-cat { padding: 4px 10px; font-size: 11px; }
  #marketList .funds-cat.active { box-shadow: 0 0 0 1px rgba(74,130,240,0.28); }

  /* §11 — table header more discreet (must not compete with the data). */
  #marketList.is-v3 .market-table-header {
    font-size: 9.5px; font-weight: 600; letter-spacing: 0.16em;
    color: rgba(220,230,250,0.42);
  }
}

/* (MK.F8 §1 — market-status chip removed entirely; styling deleted.) */

/* ════════ MK.F8 — definitive Market layout ═══════════════════════════════════
   Real fixed toolbar (search never moves), card always same start, no market
   status, columns pulled left, shorter sparkline. Structure/visual only. */

/* §1/§2/§3 — fixed toolbar OUTSIDE the dynamic content. Replaces the old ≥1024
   grid-area layout (which kept tabs/search as direct grid children) with an explicit
   flex toolbar, so the search holds the exact same Y and the list (.market-body)
   always starts at the same coordinate regardless of category / filters / row count. */
@media (min-width: 1024px) {
  .market-screen { display: block; }            /* override grid-areas layout */
  .market-screen .market-header { display: none; }
  .market-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; min-height: 44px; margin: 0 0 14px;
  }
  .market-toolbar .market-tabs {
    flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; overflow-x: auto;
    scrollbar-width: none;
  }
  .market-toolbar .market-tabs::-webkit-scrollbar { display: none; }
  .market-toolbar .market-search-wrap { flex: 0 0 auto; margin: 0; padding: 0; justify-content: flex-end; }
  .market-toolbar .market-search-wrap input { width: 240px; max-width: 240px; height: 36px; }
  .market-body { margin-top: 0; }
  #marketList.market-section { margin-top: 0; }  /* §3/§4 — card (pills+table) starts right after the toolbar gap */
}
/* Tablet/mobile: toolbar stacks; column-reverse keeps the search ABOVE the tabs
   (the original pre-MK.F8 order), so no mobile regression. */
@media (max-width: 1023px) {
  .market-toolbar { display: flex; flex-direction: column-reverse; gap: 8px; }
}

/* §5/§6/§7 — columns pulled left + shorter sparkline. Price + 24H sit in compact
   columns near the asset; the (right-aligned) sparkline keeps clear air after 24H
   (§6 ≥28px) and is ~14% shorter (44→38px). Header + rows share the grid. */
@media (min-width: 769px) {
  #marketList.is-v3 .market-table-header,
  #marketList.is-v3 .market-row {
    grid-template-columns: 3.0fr 1.0fr 0.82fr 1.1fr 40px;
  }
  #marketList.is-v3 .col-chart svg { width: 38px; }

  /* §9 — hover stays inside the row with ≥6px air (16px row padding + 3px margin);
     calm blue-glass, no scale, no shift. */
  #marketList.is-v3 .market-row { margin-bottom: 3px; }
}

/* ════════ MK.F9A — Market column shift (PRECIO + 24H to the left) ════════════
   Single Market-only change (no new columns): narrow ACTIVO and pull PRECIO + 24H
   clearly left to kill the central void, keeping the 5-col structure
   ACTIVO | PRECIO | 24H | GRÁFICO | FAVORITO. Ratio 34 / 16 / 13 / 31 / 6 in fr
   (so the 10px gap is absorbed without overflow). The wide GRÁFICO track holds the
   air after 24H while the svg itself is narrowed — sparkline reads small + separated,
   never dominant. Header + rows share the grid, so each header moves WITH its values.
   Nothing else touched (search, card height, tabs, filters, favourites, mobile). */
@media (min-width: 769px) {
  #marketList.is-v3 .market-table-header,
  #marketList.is-v3 .market-row {
    grid-template-columns: 34fr 16fr 13fr 31fr 6fr;
  }
  /* §7 — narrower sparkline svg (38→32px) so the graph supports, not dominates;
     right-aligned in its track → clear air between the 24H % and the chart. */
  #marketList.is-v3 .col-chart svg { width: 32px; }
}

/* ════════════════════════════════════════════════════════════════════════
   DSH.09 — PERFORMANCE SNAPSHOT V3 · Wealth Management Standard
   Desktop-only (≥769; mobile slider untouched). Executive layout: eyebrow →
   primary metric → human context line → 3 horizontal premium indicators
   (monochrome SVG, no emoji) · right: small investable-only donut.
   ════════════════════════════════════════════════════════════════════════ */

.perf-snapshot { display: none; }

@media (min-width: 769px) {
  /* erase the old chart surface; KEEP the title (it is the section eyebrow,
     "EVOLUCIÓN DEL PATRIMONIO", sharing .card-title with the left "VALOR TOTAL
     DE CARTERA" → identical size/weight/tracking, one system). */
  .hero-right .chart-wrap          { display: none !important; }
  .hero-right .chart-baseline-note { display: none !important; }
  /* WealthSnapshotCurve: the range-change metric now lives under the title. */
  .hero-right .chart-change        { display: block; margin-top: 4px; }
  #distributionSection             { display: none !important; }
  /* header row: title left, controls (%/$ + ranges) right — top-aligned so the
     metric can sit on the next line under the title without shifting controls */
  .hero-right .chart-header        { margin-bottom: 14px; align-items: flex-start; }
  .hero-right .chart-title         { margin-bottom: 0; }

  .perf-snapshot {
    display: flex;
    gap: var(--space-5);
    align-items: stretch;
    transition: opacity .18s var(--ease-out);
  }
  .perf-snapshot.perf-fading { opacity: 0; transition: opacity .12s var(--ease-out); }

  /* ── left 70%: highlight value → % → 2x2 insight blocks ── */
  .perf-info {
    flex: 0 0 68%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
  }
  /* Highlight (not hero) number — reduced so it never competes with the left
     "Valor total" figure (clamp 28–42px). Active unit leads; glow kept. */
  .perf-hero { display: flex; flex-direction: column; gap: 1px; }
  .perf-hero-money {
    font-size: 38px; font-weight: 800; line-height: 1.05;
    letter-spacing: -.025em; font-variant-numeric: tabular-nums;
    color: var(--text-bright);
  }
  .perf-hero-money.up   { color: var(--green); text-shadow: 0 0 18px rgba(63,191,127,.22); }
  .perf-hero-money.down { color: var(--red);   text-shadow: 0 0 18px rgba(224,90,90,.20); }
  .perf-hero-pct {
    font-size: 15px; font-weight: 600; line-height: 1.2;
    letter-spacing: -.01em; font-variant-numeric: tabular-nums;
    color: var(--text-muted);
  }

  /* 2x2 premium insight blocks — integrated (no boxes/borders), pure hierarchy.
     The ASSET is the protagonist: NAME → description → value. */
  .perf-insights-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 14px; column-gap: 22px;
  }
  .perf-block { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .perf-block-name {
    font-size: 14px; font-weight: 700; color: var(--text-bright);
    letter-spacing: .2px; text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .perf-block-desc {
    font-size: 10px; font-weight: 500; color: var(--text-dim);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .perf-block-sub { margin-top: 2px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
  .perf-block-sub.pos { color: var(--green); }
  .perf-block-sub.neg { color: var(--red); }
  .perf-block-sub.perf-block-neutral { color: var(--text-muted); }

  /* ── right 35%: title + small investable donut ── */
  .perf-compo {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 10px; padding-left: var(--space-5);
    border-left: 1px solid var(--border-subtle);
  }
  .perf-compo-title {
    align-self: stretch; text-align: center;
    font-size: 9.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--text-dim);
  }
  .perf-donut { position: relative; width: 70px; height: 70px; flex-shrink: 0; }
  .perf-donut-svg { width: 100%; height: 100%; display: block; transform: rotate(-90deg); }
  .perf-donut-seg { transition: opacity .2s ease; }
  .perf-donut-center {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; pointer-events: none;
  }
  .perf-donut-center-val { font-size: 15px; font-weight: 800; color: var(--text-bright); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .perf-donut-center-sub { margin-top: 1px; font-size: 7px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--text-dim); }
  .perf-donut-legend { width: 100%; display: flex; flex-direction: column; gap: 4px; }
  .perf-legend-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 9px; }
  .perf-legend-left { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .perf-legend-dot { width: 6px; height: 6px; border-radius: 2px; flex-shrink: 0; }
  .perf-legend-label { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .perf-legend-pct { color: var(--text-muted); font-weight: 600; font-variant-numeric: tabular-nums; flex-shrink: 0; }

  .perf-empty {
    flex: 1; display: flex; align-items: center; justify-content: center;
    text-align: center; color: var(--text-dim); font-size: 13px; line-height: 1.5; padding: 20px;
  }

  /* entrance micro-animation on range/unit change (no bounce/overshoot) */
  .perf-anim-in .perf-hero { animation: perfFadeUp .18s var(--ease-out) both; }
  .perf-anim-in .perf-block { animation: perfIndSlide .2s var(--ease-out) both; }
  .perf-anim-in .perf-block:nth-child(2) { animation-delay: .04s; }
  .perf-anim-in .perf-block:nth-child(3) { animation-delay: .06s; }
  .perf-anim-in .perf-block:nth-child(4) { animation-delay: .08s; }

  /* loading skeleton */
  .perf-skel {
    background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.08) 37%, rgba(255,255,255,.04) 63%);
    background-size: 400% 100%; animation: perfShimmer 1.4s ease infinite; border-radius: 6px;
  }
  .perf-skel-head { width: 42%; height: 46px; margin-bottom: 8px; }
  .perf-skel-sub  { width: 30%; height: 16px; margin-bottom: 12px; }
  .perf-metrics-skel { display: flex; flex-direction: column; gap: 10px; }
  .perf-skel-cell { height: 20px; border-radius: 6px; }
  .perf-skel-donut { width: 70px; height: 70px; border-radius: 50%; align-self: center; margin: auto; }
}

/* tablet (≥769 ≤1024): scale the hero number down so nothing crowds */
@media (min-width: 769px) and (max-width: 1024px) {
  .perf-info { flex-basis: 62%; }
  .perf-hero-money { font-size: 32px; }
  .perf-hero-pct   { font-size: 14px; }
  .perf-donut { width: 64px; height: 64px; }
}

@keyframes perfShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes perfFadeUp { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes perfIndSlide { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .perf-snapshot { transition: none; }
  .perf-anim-in .perf-hero, .perf-anim-in .perf-block { animation: none; }
  .perf-skel { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   WealthSnapshotCurve — single responsive premium wealth curve. Shared by
   desktop (#perfSnapshot) and mobile (#wealthCurveMobile). Thin smooth line,
   generous negative space, no heavy grid, no trading fill — institutional.
   ════════════════════════════════════════════════════════════════════════ */
.wsc {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.wsc-plot {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.wsc-svg { display: block; width: 100%; height: 100%; }

/* WN.5/WN.23 — premium institutional line (value chart). Stroke width is set
   inline per range (WN.23 adaptive); the value here is a fallback. Rounded
   joins + geometricPrecision (set inline) keep turns smooth and edges crisp. */
.wsc-line {
  stroke: var(--accent, #4a82f0);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  shape-rendering: geometricPrecision;   /* RC4-C C1 — smooth Retina antialias, no join teeth */
  opacity: .98;
}
/* WN.23 — refined institutional state colours: premium green, softened red
   (not arcade neon), soft silver-blue neutral. Semantic up/down/flat preserved. */
.wsc-up   .wsc-line { stroke: #2ebd85; }
.wsc-down .wsc-line { stroke: #e25563; }
.wsc-flat .wsc-line { stroke: #9fb0c7; }

/* WN.5/WN.23 — subtle institutional grid: horizontal value lines + lighter
   vertical markers. Low opacity + crisp edges so the grid stays secondary to
   the line (line dominant, grid present but quiet). */
/* RC1-B increment 5 (Fase 4 — menos ruido, más elegancia): quieter horizontal value
   lines and a near-invisible vertical grid so the curve dominates and the surface reads
   as a wealth product, not a technical chart. Desktop only (.wsc-grid* exist only in the
   desktop paint SVG; the mobile lite renderer draws no grid). CSS only. */
.wsc-grid   { stroke: rgba(255,255,255,.052); stroke-width: 1; shape-rendering: crispEdges; }
.wsc-grid-v { stroke: rgba(255,255,255,.018); stroke-width: 1; shape-rendering: crispEdges; }

/* WN.5 — very subtle gradient area fill under the line (fades to transparent,
   no block). */
/* WN.23 — refined area fill: present but quiet (Bloomberg/Kubera). Long ranges
   are dimmed further via an inline opacity on the area path. */
/* RC1-A — richer institutional area fill: a deeper top, a lingering mid-stop, then a
   clean fade to transparent (Wealthica/TradingView depth without a heavy block). */
/* RC4-C C2 — area fill slightly lighter + smoother top→fade so the curve "floats"
   (bottom invisible: .wsc-area-1 stop-opacity 0). Same corporate colours. */
.wsc-area-0   { stop-color: var(--accent, #4a82f0); stop-opacity: .115; }
.wsc-area-mid { stop-color: var(--accent, #4a82f0); stop-opacity: .032; }
.wsc-area-1   { stop-color: var(--accent, #4a82f0); stop-opacity: 0; }
.wsc-up   .wsc-area-0   { stop-color: #2ebd85; stop-opacity: .125; }
.wsc-up   .wsc-area-mid { stop-color: #2ebd85; stop-opacity: .036; }
.wsc-down .wsc-area-0   { stop-color: #e25563; stop-opacity: .105; }
.wsc-down .wsc-area-mid { stop-color: #e25563; stop-opacity: .032; }
.wsc-flat .wsc-area-0   { stop-color: #9fb0c7; stop-opacity: .062; }
.wsc-flat .wsc-area-mid { stop-color: #9fb0c7; stop-opacity: .018; }

/* RC1-A — TradingView-style glowing END marker at the last real point. Tone-coloured,
   soft outer ring + a gentle pulse. Desktop only (mobile uses the lite renderer). */
.wsc-last-dot {
  position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: var(--accent, #4a82f0);
  box-shadow: 0 0 0 3px rgba(74,130,240,.16), 0 0 10px 1px rgba(74,130,240,.55);
  pointer-events: none; z-index: 3;
}
.wsc-last-dot::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  border: 1.5px solid currentColor; color: var(--accent, #4a82f0);
  opacity: .5; animation: wscDotPulse 2.1s var(--ease-out, ease-out) infinite;
}
.wsc-up   .wsc-last-dot { background: #2ebd85; box-shadow: 0 0 0 3px rgba(46,189,133,.16), 0 0 10px 1px rgba(46,189,133,.55); }
.wsc-up   .wsc-last-dot::after { color: #2ebd85; }
.wsc-down .wsc-last-dot { background: #e25563; box-shadow: 0 0 0 3px rgba(226,85,99,.16), 0 0 10px 1px rgba(226,85,99,.5); }
.wsc-down .wsc-last-dot::after { color: #e25563; }
.wsc-flat .wsc-last-dot { background: #9fb0c7; box-shadow: 0 0 0 3px rgba(159,176,199,.14), 0 0 8px 1px rgba(159,176,199,.4); }
.wsc-flat .wsc-last-dot::after { color: #9fb0c7; }
@keyframes wscDotPulse {
  0%   { transform: scale(.7); opacity: .55; }
  70%  { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* WN.5 — axis labels (positioned HTML, crisp): real investable values on the
   right, range-specific time labels along the bottom. */
.wsc-ylabs, .wsc-xlabs { position: absolute; inset: 0; pointer-events: none; }
/* WN.25 PART 2 — premium right-side Y-axis labels: grid-aligned, vertically
   centred, tabular numerals, subtle (does not fight the curve). */
.wsc-ylab {
  position: absolute; right: 6px; transform: translateY(-50%);
  font: 600 9px/1 ui-monospace, SFMono-Regular, monospace;
  color: var(--text-dim, #8a96aa); opacity: .72;
  letter-spacing: .2px; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);   /* keep readable over the line/area */
}
.wsc-xlab {
  position: absolute; bottom: 1px; transform: translateX(-50%);
  font: 700 9px/1 ui-monospace, SFMono-Regular, monospace;
  color: var(--text-dim, #8a96aa); opacity: .6; white-space: nowrap;
}

/* WN.2 — organic chart metric + subtle "excludes contributions" note. The note
   stays muted (does not inherit the up/down tone colour) and small/premium. */
.wsc-metric-val { color: inherit; }
.wsc-metric-note {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2px;
  line-height: 1.2;
  color: var(--text-dim, #8a96aa);
}

/* empty / building state */
.wsc--empty { display: flex; align-items: center; justify-content: center; }
.wsc-empty {
  text-align: center;
  max-width: 320px;
  padding: 20px;
}
.wsc-empty-title {
  font-size: 14px; font-weight: 700; color: var(--text-bright, #eef2f8);
  letter-spacing: -.01em; margin-bottom: 6px;
}
.wsc-empty-body {
  font-size: 12.5px; font-weight: 500; line-height: 1.5; color: var(--text-dim, #8a96aa);
}

/* WN.5 — crosshair (vertical + horizontal dashed) + cursor marker + tooltip. */
/* RC1-A — crosshair: finer, calmer dashes; a soft glide on the cursor for a
   premium magnetic feel (short enough to never trail the pointer). */
/* RC4-C C8 — TradingView-style hairline: subtler, clean. */
.wsc-hair {
  position: absolute; top: 0; bottom: 0; left: 0; width: 1px;
  border-left: 1px dashed rgba(255,255,255,.15);
  opacity: 0; transition: opacity .14s var(--ease-out, ease), transform .06s linear;
  pointer-events: none;
}
.wsc-hair-h {
  position: absolute; left: 0; right: 0; top: 0; height: 0;
  border-top: 1px dashed rgba(255,255,255,.09);
  opacity: 0; transition: opacity .14s var(--ease-out, ease), transform .06s linear;
  pointer-events: none;
}
/* RC4-C C7 — active point: finer ring + softer, slightly wider glow (natural light). */
.wsc-cursor {
  position: absolute; top: 0; left: 0;
  width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: var(--text-bright, #fff);
  box-shadow: 0 0 0 3px rgba(255,255,255,.14), 0 0 14px rgba(255,255,255,.42);
  opacity: 0; transition: opacity .14s var(--ease-out, ease), transform .06s linear;
  pointer-events: none;
}
/* cursor adopts the trend tone so the read matches the line */
.wsc-up   .wsc-cursor { background: #2ebd85; box-shadow: 0 0 0 3px rgba(46,189,133,.16), 0 0 14px rgba(46,189,133,.42); }
.wsc-down .wsc-cursor { background: #e25563; box-shadow: 0 0 0 3px rgba(226,85,99,.16), 0 0 14px rgba(226,85,99,.40); }
/* RC1-A — premium tooltip card: deeper glass, hairline border, layered shadow,
   backdrop blur, and a thin tone accent bar on the left edge. */
.wsc-tip {
  /* WN.10 — left/top set by JS (smart placement); never covers the marker. */
  position: absolute; top: 0; left: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 8px 12px 8px 13px; border-radius: 12px;
  /* RC4-A — premium glass card: layered soft shadow + fine top highlight + more blur. */
  background: linear-gradient(180deg, rgba(22,28,40,.975), rgba(11,15,23,.975));
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: 0 8px 28px rgba(0,0,0,.46), 0 2px 8px rgba(0,0,0,.34), 0 1px 0 rgba(255,255,255,.06) inset;
  -webkit-backdrop-filter: blur(11px) saturate(1.15); backdrop-filter: blur(11px) saturate(1.15);
  min-width: 122px;
  opacity: 0; transition: opacity .1s var(--ease-out, ease);
  pointer-events: none; white-space: nowrap; overflow: hidden;
}
.wsc-tip::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent, #4a82f0); opacity: .9;
}
.wsc-up   .wsc-tip::before { background: #2ebd85; }
.wsc-down .wsc-tip::before { background: #e25563; }
.wsc-flat .wsc-tip::before { background: #9fb0c7; }
.wsc-plot.wsc-hot .wsc-hair,
.wsc-plot.wsc-hot .wsc-hair-h,
.wsc-plot.wsc-hot .wsc-cursor,
.wsc-plot.wsc-hot .wsc-tip { opacity: 1; }
.wsc-tip-date { font-size: 11px; font-weight: 700; color: var(--text-bright, #fff); }
.wsc-tip-time { font-size: 10px; font-weight: 600; color: var(--text-dim, #8a96aa); }
.wsc-tip-lbl  { font-size: 8.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-dim, #8a96aa); margin-top: 4px; }
.wsc-tip-v    { font-size: 14px; font-weight: 800; color: var(--text-bright, #fff); font-variant-numeric: tabular-nums; }
.wsc-tip-chg  { font-size: 10px; font-weight: 700; color: var(--text-muted, #9aa7bd); margin-top: 1px; font-variant-numeric: tabular-nums; }
.wsc-tip-chg.pos { color: var(--green, #3fbf7f); }
.wsc-tip-chg.neg { color: var(--red,   #e05a5a); }

/* entrance micro-animation on range / unit change */
.wsc-in .wsc-line  { animation: wscDraw .46s var(--ease-out, ease) both; }
@keyframes wscDraw { from { opacity: 0; } to { opacity: .98; } }

/* ══════════════════════════════════════════════════════════════
   RC5-A — Premium Motion Layer (VISUAL ONLY; geometry/data untouched).
   Painted ONLY under the `.aurix-pm` host class (added by JS on first visible
   render + manual range/unit change, never on auto refresh / hidden tab /
   reduced-motion). Absent class ⇒ exactly the prior RC4 behaviour.
   The line draws left→right via pathLength=1 + stroke-dashoffset (no
   getTotalLength / per-frame measure). Area reveals AFTER the line (delay),
   end-dot fades in (opacity only — marker lock position is JS, untouched). */
@keyframes aurixLineDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes aurixAreaReveal { from { opacity: 0; } }   /* implicit `to` = inline area opacity */
@keyframes aurixDotIn     { from { opacity: 0; } }
/* DESKTOP (.wsc-*) — higher specificity than `.wsc-in .wsc-line`, so it replaces wscDraw */
.wsc-in.aurix-pm .wsc-line {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: aurixLineDraw .42s cubic-bezier(.4, 0, .2, 1) forwards;   /* 420ms, no overshoot/bounce */
}
.wsc-in.aurix-pm .wsc-area     { animation: aurixAreaReveal .2s var(--ease-out, ease) .11s backwards; }   /* after the line: 110ms delay */
.wsc-in.aurix-pm .wsc-last-dot { animation: aurixDotIn .22s var(--ease-out, ease) .3s backwards; }
/* MOBILE lite (.aurix-lite-*) */
.aurix-lite-in.aurix-pm .aurix-lite-line {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: aurixLineDraw .4s cubic-bezier(.4, 0, .2, 1) forwards;
}
.aurix-lite-in.aurix-pm .aurix-lite-area { animation: aurixAreaReveal .2s var(--ease-out, ease) .1s backwards; }
@media (prefers-reduced-motion: reduce) {
  .wsc-in.aurix-pm .wsc-line,
  .aurix-lite-in.aurix-pm .aurix-lite-line { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
  .wsc-in.aurix-pm .wsc-area, .wsc-in.aurix-pm .wsc-last-dot,
  .aurix-lite-in.aurix-pm .aurix-lite-area { animation: none; }
}

/* ══════════════════════════════════════════════════════════════
   AURIX RENDER CONTRACT — card skeleton (shown only while body.aurix-skeleton,
   which is added on mobile shell-first reveal and removed on first data hydrate).
   Pure visual; never paints when the class is absent (desktop/normal flow). */
body.aurix-skeleton #totalValue { color: transparent; position: relative; }
body.aurix-skeleton #totalValue::after {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 168px; height: 30px; border-radius: 9px;
  background: linear-gradient(90deg, #0e1830 25%, #18254400 37%, #0e1830 63%);
  background-size: 300% 100%; animation: aurixSkelShimmer 1.25s ease-in-out infinite;
}
.aurix-skel-row { display: flex; align-items: center; gap: 12px; padding: 14px 12px; }
.aurix-skel-ico { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; }
.aurix-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.aurix-skel-ico, .aurix-skel-bar {
  background: linear-gradient(90deg, #0e1830 25%, #16223f 37%, #0e1830 63%);
  background-size: 300% 100%; animation: aurixSkelShimmer 1.25s ease-in-out infinite;
}
.aurix-skel-bar { height: 11px; border-radius: 6px; display: block; }
.aurix-skel-bar.w55 { width: 55%; } .aurix-skel-bar.w35 { width: 35%; } .aurix-skel-bar.w22 { width: 52px; }
@keyframes aurixSkelShimmer { 0% { background-position: 150% 0; } 100% { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) {
  body.aurix-skeleton #totalValue::after, .aurix-skel-ico, .aurix-skel-bar { animation: none; }
}

/* RC4-C C4/C5 — mobile lite chart fade-in on range change / first paint (NOT on a
   same-range data refresh → render stability). Pure opacity, no overshoot/bounce. */
@keyframes aurixLiteIn { from { opacity: .5; } to { opacity: 1; } }
.aurix-lite-in { animation: aurixLiteIn .22s var(--ease-out, ease) both; }
@media (prefers-reduced-motion: reduce) { .aurix-lite-in { animation: none; } }

/* ══════════════════════════════════════════════════════════════
   RC2 — Mobile chart institutional inspector + premium grid (mobile only).
   Grid: faint, mobile-specific (NOT the desktop grid). Cursor/hair/tooltip: hidden
   until #wealthCurveMobile.mob-inspecting (long-press); pointer-events:none so they
   never intercept touch; positioned by JS. ══════════════════════════════════════ */
/* RC4-B Fase 3 — premium mobile grid: horizontals subtle, verticals fainter; never compete
   with the curve, never darken the area. Base keeps the crisp 1px hairline. */
.mob-chart-grid line { stroke: rgba(255,255,255,.05); stroke-width: 1; vector-effect: non-scaling-stroke; shape-rendering: crispEdges; }
.mob-chart-grid line.h { stroke: rgba(255,255,255,.058); }
.mob-chart-grid line.v { stroke: rgba(255,255,255,.028); }
.mob-chart-hair, .mob-chart-cursor, .mob-chart-tip {
  position: absolute; pointer-events: none; opacity: 0; transition: opacity .12s ease; z-index: 6;
}
.mob-chart-hair { top: 0; bottom: 0; width: 0; border-left: 1px dashed rgba(255,255,255,.26); }
/* RC3 inc1 (Fase 3) — institutional cursor: crisp white core + a dark separation ring
   (reads on a green OR red curve) + a soft Aurix-blue halo & glow (integrated in the app,
   not a bare white dot) + a discreet breathing ring. */
.mob-chart-cursor {
  width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(10,16,28,.85), 0 0 0 4px rgba(120,170,255,.30), 0 0 14px 2px rgba(120,170,255,.45);
}
.mob-chart-cursor::after {
  content: ''; position: absolute; inset: -7px; border-radius: 50%;
  border: 1px solid rgba(120,170,255,.38);
  animation: mobCursorBreath 2.4s ease-in-out infinite;
}
@keyframes mobCursorBreath {
  0%, 100% { transform: scale(.78); opacity: .55; }
  50%      { transform: scale(1.10); opacity: .16; }
}
.mob-chart-tip {
  /* RC4-A — premium glass card: layered soft shadow + fine top highlight + more blur. */
  display: flex; flex-direction: column; gap: 1px; padding: 7px 11px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(22,28,40,.975), rgba(11,15,23,.975));
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: 0 8px 26px rgba(0,0,0,.46), 0 2px 8px rgba(0,0,0,.34), 0 1px 0 rgba(255,255,255,.06) inset;
  -webkit-backdrop-filter: blur(11px) saturate(1.15); backdrop-filter: blur(11px) saturate(1.15);
  white-space: nowrap; min-width: 96px; max-width: 70%;
}
#wealthCurveMobile.mob-inspecting .mob-chart-hair,
#wealthCurveMobile.mob-inspecting .mob-chart-cursor,
#wealthCurveMobile.mob-inspecting .mob-chart-tip { opacity: 1; }
.mob-tip-v    { font: 800 15px/1.15 -apple-system, system-ui, sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.mob-tip-date { font: 600 10px/1.2 -apple-system, system-ui, sans-serif; color: #8a96aa; }
.mob-tip-time { font: 600 9.5px/1.2 -apple-system, system-ui, sans-serif; color: #8a96aa; }
.mob-tip-chg  { font: 700 10.5px/1.2 -apple-system, system-ui, sans-serif; color: #9aa7bd; margin-top: 1px; font-variant-numeric: tabular-nums; }
.mob-tip-chg.pos { color: #34d39e; }
.mob-tip-chg.neg { color: #ff6b6b; }
@media (prefers-reduced-motion: reduce) {
  .mob-chart-hair, .mob-chart-cursor, .mob-chart-tip { transition: none; }
  .mob-chart-cursor::after { animation: none; opacity: 0; }   /* RC3 inc1 — no breathing ring under reduced motion */
}

/* mobile host: REPLACES the legacy canvas / V2 chart inside .mobile-chart-wrap.
   The old layers stay mounted (boot / sync safety) but are hidden so they never
   bleed through the curve's negative space; the wrap's own subtle gradient is
   the curve backdrop. */
.wsc-host { display: none; }
.mobile-chart-wrap .wsc-host {
  display: block;
  position: absolute; inset: 0; z-index: 4;
  background: transparent;
}
.mobile-chart-wrap > canvas,
.mobile-chart-wrap > .chart-loading-skin,
.mobile-chart-wrap > [data-aurix-dash] { visibility: hidden !important; }

/* desktop: #perfSnapshot becomes the curve host (override the old flex module) */
@media (min-width: 769px) {
  .perf-snapshot {
    display: block !important;
    height: 255px;          /* WN.6 — taller plot, real financial-chart feel */
    padding: 0;
    gap: 0;
  }
  /* WN.6 — tighten the chart card's vertical padding so the plot dominates. */
  .hero-right { padding-top: var(--space-4); padding-bottom: 12px; }
  .hero-right .chart-header { margin-bottom: 10px; }
  /* WN.6 — move the title + metric LEFT (closer to the card edge). */
  .hero-right .chart-header > div:first-child { padding-left: 6%; }
}

/* mobile: modest title indent toward the plotting origin */
.mobile-slide-chart .chart-header > div:first-child { padding-left: 5%; }

@media (prefers-reduced-motion: reduce) {
  .wsc-in .wsc-line { animation: none; }
  .wsc-last-dot::after { animation: none; opacity: 0; }   /* RC1-A — no end-dot pulse under reduced motion */
}

/* ══════════════════════════════════════════════════════════════
   WN.27 — Mobile Chart Responsive Lock (mobile/tablet ≤768px only)
   Scoped to .mobile-slide-chart + the mobile curve host so DESKTOP
   (#perfSnapshot, ≥769px) is completely untouched. Visual/layout only.
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* PART 1/7 — clean vertical stack: title → metric → controls → plot,
     with the title + percentage grouped as one premium header block. */
  .mobile-slide-chart .chart-header {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 10px;
  }
  .mobile-slide-chart .chart-header > div:first-child { padding-left: 2%; }
  .mobile-slide-chart .chart-title { margin-bottom: 1px; }

  /* PART 4 — range controls: compact, single row, no wrap/crowding. */
  /* align-items:flex-start so the range buttons stay level with the %/€ selector while
     the return indicator hangs below it (RC5-B FASE 2). */
  .mobile-slide-chart .chart-controls { width: 100%; gap: 6px; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; }
  .mobile-slide-chart .range-toggle  { flex-wrap: nowrap; flex: 1; justify-content: space-between; padding: 2px; }
  .mobile-slide-chart .range-btn     { padding: 5px 7px; font-size: 10.5px; letter-spacing: .3px; flex: 1 1 auto; }
  .mobile-slide-chart .range-btn.active { font-weight: 800; }  /* active clear but compact */
  .mobile-slide-chart .perf-toggle   { flex: 0 0 auto; }

  /* RC5-B FASE 2 — Header Gain Placement: %/€ selector on top, current return as a premium
     micro-subtext directly below it. Touch area of the buttons is untouched; the indicator
     reserves its line height so toggling/empty state never jumps the layout. */
  .mobile-slide-chart .perf-unit-block { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; flex: 0 0 auto; }
  .mobile-slide-chart .perf-unit-block .chart-change {
    margin: 0; padding-left: 3px; min-height: 12px; line-height: 1;
    font-size: 11px; font-weight: 800; letter-spacing: .2px; font-variant-numeric: tabular-nums;
  }
  .mobile-slide-chart .perf-unit-block .chart-change .wsc-metric-val { font-size: 11px; font-weight: 800; }

  /* RC5-C — Mobile header micro-tuning: invert hierarchy slightly. The %/€ selector reads as a
     compact CONTROL; the return below reads as the important DATUM. CSS-only; tone colour, the
     single-row temporalities and a comfortable touch target (≥26px) are preserved. The indicator
     stays nowrap + content-sized so a longer money value never overflows the row.
     Rollback: delete this RC5-C block (restores the RC5-B FASE 2 state exactly). */
  .mobile-slide-chart .perf-toggle .perf-btn { padding: 3px 7px; min-height: 26px; font-size: 11px; line-height: 1; }
  .mobile-slide-chart .perf-unit-block { gap: 2px; }
  .mobile-slide-chart .perf-unit-block .chart-change {
    font-size: 14px; min-height: 15px; line-height: 1.02; white-space: nowrap;
  }
  .mobile-slide-chart .perf-unit-block .chart-change .wsc-metric-val { font-size: 14px; font-weight: 800; }

  /* RC5-D — Header Lock & Selector Compactness. The left block gets a HARD fixed flex-basis so
     the temporalities never move when toggling %/€ (the data width no longer affects layout —
     0px shift). The %/€ selector becomes a narrow fixed-width control aligned in height with the
     range buttons (comfortable ≥26px touch). The return below gets reserved width + breathing
     (margin-top + line-height). Range group is flex:1/min-width:0 so it owns the rest of the row.
     CSS-only, mobile-scoped; rollback: delete this RC5-D block (restores RC5-C exactly). */
  .mobile-slide-chart .perf-unit-block { flex: 0 0 92px; width: 92px; min-width: 92px; gap: 2px; }
  .mobile-slide-chart .perf-toggle { width: 62px; padding: 2px; gap: 2px; }
  .mobile-slide-chart .perf-toggle .perf-btn { flex: 1 1 0; min-width: 0; padding: 4px 0; min-height: 26px; font-size: 11px; line-height: 1; }
  .mobile-slide-chart .perf-unit-block .chart-change { width: 92px; min-width: 92px; margin-top: 4px; min-height: 16px; line-height: 1.2; }
  .mobile-slide-chart .range-toggle { flex: 1; min-width: 0; }

  /* PART 6 — give the plot breathing room (slightly taller).
     SPEC MOBILE-ABOVE-THE-FOLD-COMPRESSION — this scoped min-height is the TRUE
     governing height of the mobile chart drawing area (it wins the cascade over
     the slider/slide min-heights and the ≤640 .chart-wrap height, with flex:1
     growing from this floor). Trimmed a small, proportional −20px (244→224) so
     the first Summary Card lifts into view. Renderer/scale/point-selection/
     geometry/continuity are UNCHANGED — the surface sizes to this container. */
  .mobile-slide-chart .chart-wrap { min-height: 224px; }

  /* PART 2 — reserved right Y-label lane (curve/grid stop at ~85% in the SVG;
     labels live in the remaining lane). Keep them readable + clear of the path. */
  .mobile-chart-wrap .wsc-ylab { right: 7px; opacity: .8; font-size: 9px; }

  /* PART 5 — no refresh shimmer / paint-glow on mobile: render directly. */
  .mobile-chart-wrap .wsc-in .wsc-line { animation: none !important; }
  .mobile-chart-wrap .chart-loading-skin__line { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   DSH.WORKSPACE.01 — Mi Espacio V2 (personal operating centre)
   Two equal columns: Mis plantillas | Mis herramientas. Recency-ordered
   cards (uniform height). Scoped to .wsh-mse2 — no other view touched.
══════════════════════════════════════════════════════════════ */
.wsh-mse2{
  display:grid;
  grid-template-columns:1fr 1fr;   /* 50/50 — same importance, same size */
  gap:14px;
  align-items:start;
}
.wsh-mse2-col{ display:flex; flex-direction:column; }
.wsh-mse2-head{ margin-bottom:12px; }
.wsh-mse2-head .wsh-title{ margin:0; }
.wsh-mse2-sub{
  display:block; margin-top:3px;
  font-size:12px; color:var(--text-dim,#8a96aa); letter-spacing:.1px;
}
.wsh-mse2-list{ display:flex; flex-direction:column; gap:8px; }

.wsh-mse2-card{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px;
  border:1px solid var(--border,rgba(255,255,255,.08));
  border-radius:12px;
  background:rgba(255,255,255,.02);
  cursor:pointer;
  transition:transform .18s var(--ease-premium,ease), border-color .18s ease,
             box-shadow .18s ease, background .18s ease;
}
.wsh-mse2-card:hover{
  transform:translateY(-2px);
  border-color:rgba(77,141,255,.45);
  background:rgba(77,141,255,.06);
  box-shadow:0 10px 26px -14px rgba(0,0,0,.55), 0 0 22px rgba(77,141,255,.14);
}
.wsh-mse2-pv{
  flex:0 0 auto; width:52px; height:52px;
  border-radius:9px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.03);
}
.wsh-mse2-pv > *{ width:100%; height:100%; }
.wsh-mse2-pv svg{ width:100%; height:100%; }
.wsh-mse2-body{ flex:1 1 auto; min-width:0; }
.wsh-mse2-name{
  margin:0; font-size:13.5px; font-weight:700; color:var(--text,#e7ecf5);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.wsh-mse2-meta{
  display:block; margin-top:2px;
  font-size:11.5px; color:var(--text-dim,#8a96aa); font-variant-numeric:tabular-nums;
}
.wsh-mse2-open{
  flex:0 0 auto; font-size:12px; font-weight:700;
  color:var(--accent,#4d8dff); opacity:.85;
  transition:transform .18s var(--ease-premium,ease), opacity .18s ease;
}
.wsh-mse2-card:hover .wsh-mse2-open{ opacity:1; transform:translateX(2px); }

.wsh-mse2-empty{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  padding:18px 4px 6px;
}
.wsh-mse2-empty-t{ margin:0; font-size:14px; font-weight:700; color:var(--text,#e7ecf5); }
.wsh-mse2-empty-b{ margin:0 0 8px; font-size:12.5px; color:var(--text-dim,#8a96aa); }

/* Tablet — keep two columns while they fit, then stack. */
@media (max-width:760px){
  .wsh-mse2{ grid-template-columns:1fr; gap:12px; }
}
/* Mobile — columns stacked; each list becomes a horizontal scroll of tiles. */
@media (max-width:640px){
  .wsh-mse2-list{
    flex-direction:row; overflow-x:auto; gap:10px;
    padding-bottom:4px; scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }
  .wsh-mse2-card{
    flex:0 0 78%; max-width:78%;
    flex-direction:column; align-items:flex-start; gap:8px;
    scroll-snap-align:start;
  }
  .wsh-mse2-pv{ width:100%; height:84px; }
  .wsh-mse2-open{ align-self:flex-end; }
}
@media (prefers-reduced-motion: reduce){
  .wsh-mse2-card{ transition:none; }
  .wsh-mse2-card:hover{ transform:none; }
}

/* ══════════════════════════════════════════════════════════════
   WN.P1 — Aurix Premium modal (reusable conversion layer)
   Dark glass card, subtle Aurix-blue glow, Founder gold accent.
   Self-contained .aurix-premium-* namespace; no global pollution.
══════════════════════════════════════════════════════════════ */
.aurix-premium-overlay{
  position:fixed; inset:0; z-index:4000;
  display:none; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(6,10,20,.62);
  backdrop-filter:blur(10px) saturate(120%);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
  opacity:0; transition:opacity .2s var(--ease-out,ease);
  overflow-y:auto;
}
.aurix-premium-overlay.is-open{ opacity:1; }
.aurix-premium-modal{
  position:relative; width:min(940px,100%); max-height:92vh; overflow-y:auto;
  margin:auto;
  background:linear-gradient(165deg, rgba(26,38,66,.92), rgba(12,18,34,.96));
  border:1px solid rgba(77,141,255,.32);
  border-radius:20px;
  box-shadow:0 30px 80px -28px rgba(0,0,0,.7), 0 0 50px rgba(77,141,255,.12), inset 0 1px 0 rgba(255,255,255,.06);
  padding:28px 30px 24px;
  color:#e7ecf5;
  transform:scale(.96); opacity:0;
  transition:transform .2s var(--ease-premium,cubic-bezier(.2,.8,.2,1)), opacity .2s var(--ease-out,ease);
}
.aurix-premium-overlay.is-open .aurix-premium-modal{ transform:scale(1); opacity:1; }
.aurix-premium-close{
  position:absolute; top:14px; right:14px;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  color:#cdd6e6; font-size:15px; cursor:pointer;
  transition:background .15s, color .15s, transform .15s;
}
.aurix-premium-close:hover{ background:rgba(255,255,255,.1); color:#fff; transform:rotate(90deg); }

.aurix-premium-header{ text-align:center; max-width:620px; margin:0 auto 22px; }
.aurix-premium-eyebrow{
  display:inline-block; font-size:11px; font-weight:800; letter-spacing:.22em;
  color:var(--accent,#4d8dff); margin-bottom:10px;
}
.aurix-premium-tagline{ margin:0 0 8px; font-size:24px; font-weight:800; line-height:1.2; color:#fff; }
.aurix-premium-lede{ margin:0; font-size:13.5px; line-height:1.55; color:#9aa7bd; }

.aurix-premium-comparison{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:22px; }
.aurix-premium-compare-col{
  border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:16px 16px 14px;
  background:rgba(255,255,255,.02);
}
.aurix-premium-compare-col.is-premium{ border-color:rgba(77,141,255,.34); background:rgba(77,141,255,.05); }
.aurix-premium-compare-tier{ display:block; font-size:12px; font-weight:800; letter-spacing:.06em; color:#cdd6e6; }
.aurix-premium-compare-q{ display:block; margin:2px 0 12px; font-size:13.5px; font-weight:700; color:#fff; }
.aurix-premium-compare-col.is-premium .aurix-premium-compare-q{ color:var(--accent,#4d8dff); }
.aurix-premium-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.aurix-premium-list li{ position:relative; padding-left:20px; font-size:12.5px; color:#aeb9cc; line-height:1.35; }
.aurix-premium-list li::before{ content:"✓"; position:absolute; left:0; top:0; font-weight:800; color:#5f7088; }
.aurix-premium-list li.is-prem::before{ color:var(--accent,#4d8dff); }

.aurix-premium-plans{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.aurix-premium-plan{ border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:18px; display:flex; flex-direction:column; }
.aurix-premium-founder{
  border-color:rgba(212,175,93,.5);
  background:linear-gradient(165deg, rgba(212,175,93,.10), rgba(255,255,255,.02));
  box-shadow:0 0 30px rgba(212,175,93,.08), inset 0 1px 0 rgba(255,255,255,.05);
}
.aurix-premium-plan-top{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.aurix-premium-badge{
  font-size:10px; font-weight:900; letter-spacing:.14em; padding:4px 9px; border-radius:999px;
  color:#1a1206; background:linear-gradient(180deg,#e9cf8a,#d4af5d);
}
.aurix-premium-plan-title{ margin:0; font-size:16px; font-weight:800; color:#fff; }
.aurix-premium-plan-desc{ margin:0 0 12px; font-size:12.5px; color:#9aa7bd; line-height:1.5; }
.aurix-premium-price{ display:flex; align-items:baseline; gap:4px; margin:2px 0; }
.aurix-premium-price-amount{ font-size:30px; font-weight:900; color:#fff; letter-spacing:-.02em; }
.aurix-premium-price-per{ font-size:13px; font-weight:700; color:#8a96aa; }
.aurix-premium-plan-note{ margin:4px 0 12px; font-size:11.5px; color:#8a96aa; line-height:1.45; }
.aurix-premium-scarcity{ margin:6px 0 14px; }
.aurix-premium-scarcity-bar{ height:5px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; margin-bottom:6px; }
.aurix-premium-scarcity-bar span{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#e9cf8a,#d4af5d); }
.aurix-premium-scarcity-txt{ font-size:11px; color:#b9a86f; font-weight:600; }
.aurix-premium-cta{
  margin-top:auto; width:100%; border:none; border-radius:11px; padding:12px 14px;
  font-size:13.5px; font-weight:800; cursor:pointer;
  transition:transform .15s var(--ease-premium,ease), box-shadow .15s, filter .15s, opacity .15s;
}
.aurix-premium-cta.is-founder{ color:#1a1206; background:linear-gradient(180deg,#ecd592,#d4af5d); box-shadow:0 10px 26px -12px rgba(212,175,93,.7); }
.aurix-premium-cta.is-premium{ color:#fff; background:linear-gradient(180deg,rgba(77,141,255,.95),rgba(53,110,225,.95)); box-shadow:0 10px 26px -12px rgba(77,141,255,.7); }
.aurix-premium-cta.is-monthly{ margin-top:8px; color:#aeb9cc; background:transparent; border:1px solid rgba(255,255,255,.14); font-weight:700; box-shadow:none; }
.aurix-premium-cta:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.aurix-premium-cta.is-monthly:hover{ background:rgba(255,255,255,.05); color:#fff; }
.aurix-premium-cta.is-done{ opacity:.8; cursor:default; transform:none; filter:none; }

.aurix-premium-footer{ margin-top:18px; text-align:center; }
.aurix-premium-footer p{ margin:0; font-size:12px; color:#8a96aa; line-height:1.5; }
.aurix-premium-microcopy{ margin-top:4px !important; font-size:11px !important; color:#6b7689 !important; }

body.aurix-premium-lock{ overflow:hidden; }

/* Mobile — full-width scrollable card, stacked plans, full-width CTAs. */
@media (max-width:720px){
  .aurix-premium-overlay{ padding:0; align-items:stretch; }
  .aurix-premium-modal{ width:100%; max-height:100vh; border-radius:0; padding:54px 18px 24px; }
  .aurix-premium-comparison{ grid-template-columns:1fr; gap:10px; }
  .aurix-premium-plans{ grid-template-columns:1fr; }
  .aurix-premium-tagline{ font-size:21px; }
  .aurix-premium-close{ top:12px; right:12px; }
}
@media (prefers-reduced-motion: reduce){
  .aurix-premium-overlay, .aurix-premium-modal{ transition:none; }
  .aurix-premium-modal{ transform:none; }
}

/* ── WN.P1 refinement — premium experience + visual hierarchy ───────────────
   Hero emphasis, 2-column feature lists, Premium intelligence positioning band,
   Premium dominant / Free de-emphasized, Founder framed as Premium·Founder.
   Hierarchy: Premium > Founder > Free. Later rules override the base block. */
.aurix-premium-tagline{ font-size:28px; line-height:1.15; letter-spacing:-.01em; }
.aurix-premium-sub{ margin:0 0 8px; font-size:15px; font-weight:700; color:var(--accent,#4d8dff); }

/* Two-column feature lists (less empty space, more institutional). */
.aurix-premium-list.is-2col{ display:grid; grid-template-columns:1fr 1fr; gap:6px 16px; }

/* Free de-emphasized; Premium comparison card dominant. */
.aurix-premium-compare-col.is-free{ opacity:.9; background:rgba(255,255,255,.015); }
.aurix-premium-compare-col.is-free .aurix-premium-compare-tier{ color:#9aa7bd; }
.aurix-premium-compare-col.is-premium{
  border-color:rgba(77,141,255,.42);
  background:linear-gradient(165deg, rgba(77,141,255,.09), rgba(77,141,255,.03));
  box-shadow:0 0 34px rgba(77,141,255,.1), inset 0 1px 0 rgba(255,255,255,.05);
}

/* Premium intelligence positioning band (above the Premium list). */
.aurix-premium-pos{ margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid rgba(77,141,255,.18); }
.aurix-premium-pos-title{ display:block; font-size:11.5px; font-weight:900; letter-spacing:.12em; color:var(--accent,#4d8dff); line-height:1.3; }
.aurix-premium-pos-text{ margin:5px 0 9px; font-size:12px; color:#9aa7bd; line-height:1.45; }
.aurix-premium-indicators{ display:flex; flex-wrap:wrap; gap:6px; }
.aurix-premium-ind{
  font-size:10.5px; font-weight:700; letter-spacing:.04em; padding:3px 9px; border-radius:999px;
  color:#bcd0ff; background:rgba(77,141,255,.12); border:1px solid rgba(77,141,255,.28);
}

/* Plan benefit lists. */
.aurix-premium-benefits{ list-style:none; margin:10px 0 12px; padding:0; display:flex; flex-direction:column; gap:6px; }
.aurix-premium-benefits li{ position:relative; padding-left:20px; font-size:12.5px; color:#c2ccdd; line-height:1.35; }
.aurix-premium-benefits li::before{ content:"✓"; position:absolute; left:0; top:0; font-weight:800; }
.aurix-premium-benefits li.is-prem::before{ color:var(--accent,#4d8dff); }
.aurix-premium-benefits li.is-founder::before{ color:#d4af5d; }

/* Standard Premium = dominant pricing block (blue presence, strong CTA). */
.aurix-premium-standard{
  border-color:rgba(77,141,255,.5);
  background:linear-gradient(165deg, rgba(77,141,255,.10), rgba(255,255,255,.02));
  box-shadow:0 0 34px rgba(77,141,255,.12), inset 0 1px 0 rgba(255,255,255,.06);
}
.aurix-premium-standard .aurix-premium-cta.is-premium{ padding:13px 14px; font-size:14px; }

/* Founder framed as an exclusive edition OF Premium (kicker + gold badge). */
.aurix-premium-kicker{ font-size:10px; font-weight:900; letter-spacing:.2em; color:var(--accent,#4d8dff); }
.aurix-premium-plan-top{ justify-content:space-between; }

/* Trust block — reassuring, primary line emphasized. */
.aurix-premium-trust-1{ font-size:13px !important; font-weight:700 !important; color:#e7ecf5 !important; }

@media (max-width:720px){
  .aurix-premium-list.is-2col{ grid-template-columns:1fr; }
  .aurix-premium-tagline{ font-size:23px; }
}

/* ── WN.27 premium refinement — Premium protagonist, density, demo, seat ────
   Hierarchy Premium > Founder > Free. Premium gains visual weight; Founder
   stays elegant but recessed; density tightened. Later rules override base. */

/* PART 9 — tighter density (less dead space, less scroll). */
.aurix-premium-modal{ padding:22px 26px 20px; }
.aurix-premium-header{ margin-bottom:16px; }
.aurix-premium-comparison{ margin-bottom:14px; }
.aurix-premium-plans{ gap:12px; }
.aurix-premium-footer{ margin-top:14px; }

/* WN.P2 PART 1 — demo chips removed (block deleted). */

/* PART 1 — Premium is the protagonist (≈+15% visual weight, brighter, dominant CTA). */
.aurix-premium-standard{
  border-color:rgba(77,141,255,.66);
  background:linear-gradient(165deg, rgba(77,141,255,.15), rgba(77,141,255,.045));
  box-shadow:0 0 42px rgba(77,141,255,.2), inset 0 1px 0 rgba(255,255,255,.08);
  padding:20px;
}
.aurix-premium-standard .aurix-premium-plan-title{ font-size:18px; }
.aurix-premium-standard .aurix-premium-price-amount{ font-size:34px; }
.aurix-premium-standard .aurix-premium-cta.is-premium{ padding:14px; font-size:14.5px; box-shadow:0 12px 30px -12px rgba(77,141,255,.8); }

/* PART 1/5 — Founder elegant but secondary (gold, quieter than Premium). */
.aurix-premium-founder{ border-color:rgba(212,175,93,.4); box-shadow:0 0 18px rgba(212,175,93,.06), inset 0 1px 0 rgba(255,255,255,.04); }
.aurix-premium-founder .aurix-premium-price-amount{ font-size:28px; }

/* PART 5 — Founder seat (belonging, not discount). */
.aurix-premium-seat{
  display:inline-block; margin:3px 0 4px;
  font-size:11px; font-weight:800; letter-spacing:.04em; padding:3px 11px; border-radius:999px;
  color:#1a1206; background:linear-gradient(180deg,#ecd592,#d4af5d);
}

/* PART 4 — de-emphasize Free so the two blue Premium blocks read as one family. */
.aurix-premium-compare-col.is-free{ opacity:.82; }

/* ══════════════════════════════════════════════════════════════
   WN.P2 — Premium modal layout lock (titles, Free polish, compact)
   Comparison titles top-aligned & equally deliberate; Free reads premium;
   Premium positioning moved to card bottom; Founder seat compact; tighter
   density. Hierarchy Premium > Founder > Free preserved. Later rules win.
══════════════════════════════════════════════════════════════ */
/* PART 2 — comparison card titles: top, aligned, premium, breathing room. */
.aurix-premium-compare-col{ padding:16px 16px 14px; }
.aurix-premium-compare-tier{ display:block; font-size:15px; font-weight:800; letter-spacing:.01em; color:#e7ecf5; }
.aurix-premium-card-desc{ margin:5px 0 15px; font-size:12px; line-height:1.4; color:#9fb4d8; }

/* PART 3 — Aurix Free looks premium (silver-blue), not crippled. */
.aurix-premium-compare-col.is-free{ opacity:1; background:rgba(255,255,255,.025); }
.aurix-premium-compare-col.is-free .aurix-premium-compare-tier{ color:#cdd9ec; }
.aurix-premium-compare-col.is-free .aurix-premium-card-desc{ color:#93a2bb; }
/* Premium card title/descriptor (blue family). */
.aurix-premium-compare-col.is-premium .aurix-premium-compare-tier{ color:#fff; }
.aurix-premium-compare-col.is-premium .aurix-premium-card-desc{ color:#bcd0ff; }

/* PART 4 — positioning copy at the BOTTOM of the Premium card, muted/small. */
.aurix-premium-pos-foot{ margin:13px 0 0; padding-top:10px; border-top:1px solid rgba(77,141,255,.16); font-size:11px; line-height:1.45; color:#8a96aa; }

/* PART 5 — balanced two-column lists, tighter rhythm, -1px feature size. */
.aurix-premium-list.is-2col{ gap:6px 14px; }
.aurix-premium-list li{ font-size:11.5px; line-height:1.3; }

/* PART 6 — compact modal (less hero padding, smaller gaps, card padding). */
.aurix-premium-header{ margin-bottom:12px; }
.aurix-premium-comparison{ margin-bottom:11px; }
.aurix-premium-plans{ gap:11px; }
.aurix-premium-plan{ padding:16px; }
.aurix-premium-standard{ padding:18px; }

/* PART 7 — Founder seat: compact gold chip (not a full-width yellow bar). */
.aurix-premium-seat{
  display:inline-block; margin:2px 0 7px; padding:3px 10px; border-radius:999px;
  font-size:10.5px; font-weight:800; letter-spacing:.03em;
  color:#e9cf8a; background:rgba(212,175,93,.12); border:1px solid rgba(212,175,93,.45);
}

/* ══════════════════════════════════════════════════════════════
   DSH.MENU.02 — personal premium user menu (identity-first panel)
   Visual/hierarchy only. Reuses existing lang/currency buttons + active
   states; no auth/lang/currency/premium logic touched. Same layout on
   desktop/tablet/mobile.
══════════════════════════════════════════════════════════════ */
.menu-panel{
  width:224px; padding:7px;                                /* slightly narrower + tighter → cleaner, less dead space */
  transform:translateY(-6px);                              /* no scale/zoom */
  transition:opacity .12s ease-out, transform .12s ease-out;
}
.menu-panel.open{ transform:translateY(0); }

/* Identity header — dominant block. */
.menu-identity{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:14px 12px 12px; }
.menu-identity-name{
  max-width:100%; font-size:16px; font-weight:800; color:#fff; letter-spacing:.01em; line-height:1.1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.menu-identity-badge{
  display:inline-flex; align-items:center; height:24px; padding:0 11px; border-radius:999px;
  font-size:10.5px; font-weight:900; letter-spacing:.12em;
}
.menu-identity-badge[data-tier="premium"]{ color:#0a1124; background:linear-gradient(180deg,#6ba4ff,#3f74e6); box-shadow:0 0 14px rgba(107,164,255,.4); }
.menu-identity-badge[data-tier="founder"]{ color:#1a1206; background:linear-gradient(180deg,#ecd592,#d4af5d); box-shadow:0 0 14px rgba(212,175,93,.34); }
.menu-identity-badge[data-tier="free"]{ color:#d6e3f6; background:rgba(120,160,255,.06); border:1px solid rgba(150,180,255,.20); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); text-transform:uppercase; }

/* More air between sections. */
.menu-divider{ margin:8px 6px; }
.menu-item{ padding:11px var(--space-2); }   /* a touch more breathing room */

/* Secondary preferences (language + currency) — compact, not dominant. */
.menu-pref-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 10px; }
.menu-pref-label{ font-size:12px; font-weight:600; color:var(--text-muted); }
.menu-pref-opts{ display:flex; gap:5px; }
.menu-pref-opt{
  flex:0 0 auto; padding:5px 10px; border-radius:7px;
  font-size:11px; font-weight:700; letter-spacing:.02em; font-family:inherit; cursor:pointer;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); color:var(--text-muted);
  transition:background .15s var(--ease-out), color .15s, border-color .15s var(--ease-out);
}
.menu-pref-opt:hover:not(.active){ background:rgba(255,255,255,.08); color:var(--text); border-color:rgba(255,255,255,.16); }
.menu-pref-opt.active{ color:var(--accent); background:rgba(74,130,240,.12); border-color:rgba(74,130,240,.30); }

/* Logout — soft red, calm, never competing with Premium/Configuración. */
.menu-item--danger{ font-weight:var(--font-weight-medium); }

/* ── DSH.SETTINGS.02 — Configuración reorg (tier chip + meta row weight) ─────
   Visual-only. Membership tier chip on the plan card; Build row de-emphasized. */
.settings-tier-chip{
  display:inline-flex; align-items:center; height:20px; padding:0 9px; border-radius:999px;
  font-size:9.5px; font-weight:900; letter-spacing:.1em; margin-left:8px;
}
.settings-tier-chip[data-tier="premium"]{ color:#0a1124; background:linear-gradient(180deg,#6ba4ff,#3f74e6); }
.settings-tier-chip[data-tier="founder"]{ color:#1a1206; background:linear-gradient(180deg,#ecd592,#d4af5d); }
.settings-tier-chip[data-tier="free"]{ color:#cdd9ec; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); }
/* Build = lowest visual weight in Cuenta. */
.settings-row-value--meta{ font-size:11px; color:var(--text-dim,#8a96aa); opacity:.8; }

/* ── DSH.MENU.03 — Aurix Premium as the menu hero (gold, more separation) ───
   Language/currency selectors removed from the menu (moved to Configuración →
   Preferencias). Visual-only; logic untouched. */
.menu-item--premium-cta{
  margin:8px 2px;                 /* extra air above + below → feels special */
  color:#e9cf8a;
  background:linear-gradient(180deg, rgba(212,175,93,.13), rgba(212,175,93,.05));
  border:1px solid rgba(212,175,93,.34);
  font-weight:800;
  box-shadow:0 0 18px rgba(212,175,93,.10);
}
.menu-item--premium-cta:hover{
  background:linear-gradient(180deg, rgba(212,175,93,.22), rgba(212,175,93,.09));
  color:#f4e3b0; transform:none;
}
/* PREMIUM-PREVIEW-FINAL — Free user intrigue/coming-soon state: subtly blurred golden, mysterious,
   NOT clickable (no modal/navigation — the JS click handler no-ops). Never reads as broken or "pay now". */
.menu-item--premium-locked{
  color:#d9c48a;
  opacity:.62;
  filter:blur(.4px);
  cursor:not-allowed;
  box-shadow:0 0 14px rgba(212,175,93,.08);
  transition:opacity .2s ease;
}
.menu-item--premium-locked:hover{
  /* keep it calm — a barely-there lift, no strong hover */
  background:linear-gradient(180deg, rgba(212,175,93,.13), rgba(212,175,93,.05));
  color:#e2cf95; opacity:.72; transform:none;
}
.menu-premium-soon{
  display:inline-block;
  margin-left:8px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:rgba(212,175,93,.72);
  opacity:.85;
}
/* PREMIUM-PREVIEW POLISH — Free user's premium slot is a mysterious, non-clickable "coming soon".
   Uppercase, wide tracking, cool premium tint, dimmed, not-allowed — NEVER gold "pay now", NEVER reveals
   "Aurix Premium". Overrides the gold .menu-item--premium-cta the button still carries (launch-critical). */
.menu-item--coming-soon{
  color:rgba(190,208,240,.72)!important;
  background:rgba(255,255,255,.03)!important;
  border:1px solid rgba(150,180,255,.16)!important;
  box-shadow:inset 0 0 26px rgba(90,140,255,.05)!important;
  opacity:.65;
  cursor:not-allowed;
  font-size:12px; font-weight:700; letter-spacing:.28em; text-transform:uppercase; text-align:center;
  text-shadow:0 0 12px rgba(120,160,255,.22);
  position:relative; overflow:hidden;
  transition:opacity .2s ease;
}
.menu-item--coming-soon:hover{ opacity:.72; color:rgba(205,220,248,.85)!important; background:rgba(255,255,255,.05)!important; transform:none; }
.menu-item--coming-soon::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 32%,rgba(160,190,255,.10) 50%,transparent 68%);
  transform:translateX(-120%); animation:menuSoonShimmer 5s ease-in-out infinite;
}
@keyframes menuSoonShimmer{ 0%,55%{ transform:translateX(-120%); } 100%{ transform:translateX(120%); } }
@media (prefers-reduced-motion:reduce){ .menu-item--coming-soon::after{ animation:none; opacity:0; } }
/* DSH.SETTINGS.05 — Idioma/Moneda toggles sit on the right of their Cuenta row.
   Currency pills carry flex:1 for the (removed) menu row; size to content here. */
.settings-row .menu-pref-opts{ flex:0 0 auto; }
.settings-row .menu-curr-btn{ flex:0 0 auto; }
.settings-row .menu-pref-opt{ padding:6px 12px; }
/* DSH.SETTINGS.TOGGLE.01 — crisp active state: Aurix blue fill, bright border,
   white text. Inactive keeps the dark-glass base above. */
.settings-row .menu-pref-opt.active{
  background:rgba(77,141,255,.20);
  border-color:rgba(77,141,255,.55);
  color:#eaf2ff;
}

/* ── DSH.SETTINGS.01 — Configuración: desktop/tablet side-nav layout ──────────
   Left rail of section tabs + a single visible pane on the right (Revolut /
   Linear / Apple Settings feel). Mobile (≤768) hides the rail and stacks every
   section vertically. Reorganization only — no auth/lang/currency/premium logic
   is touched. */
.settings-nav-item{
  appearance:none; -webkit-appearance:none;
  text-align:left; width:100%;
  padding:10px 12px; border-radius:10px; border:none; background:transparent;
  color:rgba(220,230,250,.60); font-size:13px; font-weight:600; letter-spacing:.01em;
  cursor:pointer; transition:background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.settings-nav-item:hover{ background:rgba(255,255,255,.045); color:var(--text-bright,#fff); }
.settings-nav-item.is-current{
  background:rgba(77,141,255,.13); color:#eaf2ff;
  box-shadow:inset 2px 0 0 #4D8DFF;
}

@media (min-width: 769px){
  .modal--settings{ max-width:760px; }
  .settings-body--nav{
    flex-direction:row; gap:0; padding:0; align-items:stretch; overflow:hidden;
  }
  .settings-nav{
    display:flex; flex-direction:column; gap:2px;
    flex:0 0 198px; padding:18px 12px;
    border-right:1px solid var(--aurix-border);
    background:linear-gradient(180deg, rgba(28,42,74,.16), rgba(12,18,32,0));
  }
  .settings-panes{
    flex:1 1 auto; min-width:0; padding:20px 24px 26px;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  .settings-body--nav .settings-panes > .settings-section{ display:none; }
  .settings-body--nav .settings-panes > .settings-section.is-active{ display:flex; }
}

/* Mobile / small tablet: no rail, every section stacked. */
@media (max-width: 768px){
  .settings-nav{ display:none; }
  .settings-body--nav{ flex-direction:column; }
  .settings-panes{ display:flex; flex-direction:column; gap:22px; }
  .settings-body--nav .settings-panes > .settings-section{ display:flex; }
}

/* ── DSH.SETTINGS.05 — inline editable display name (Cuenta) ──────────────────
   Sits on the right of its row like the other values; saves on Enter / blur.
   No Save button. Reorganization/persistence only; no auth. */
.settings-name-input{
  appearance:none; -webkit-appearance:none;
  flex:0 1 200px; min-width:0; width:200px; text-align:left;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius:9px;
  padding:7px 11px; color:var(--text-bright,#fff); font-size:13.5px; font-weight:600;
  transition:border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.settings-name-input::placeholder{ color:rgba(220,230,250,.32); font-weight:500; }
.settings-name-input:focus{
  outline:none; border-color:rgba(77,141,255,.55);
  background:rgba(77,141,255,.07); box-shadow:0 0 0 3px rgba(77,141,255,.14);
}
@media (max-width: 560px){
  .settings-name-input{ flex:1 1 auto; width:auto; max-width:58%; }
}

/* ══════════════════════════════════════════════════════════════
   DSH.DONUT.01 — Desktop micro-composition donut + composition modal.
   Micro-donut: DESKTOP ONLY (≥769px), a small premium button next to the
   analysis pill. Mobile is untouched (button hidden). Modal reuses the
   .modal-overlay / .modal chrome. ══════════════════════════════════════ */
.micro-composition-donut { display: none; }          /* hidden by default ⇒ mobile never shows it */
@media (min-width: 769px) {
  .micro-composition-donut {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; margin-left: 10px; padding: 3px;
    width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
    background: rgba(20, 30, 55, 0.55);
    border: 1px solid rgba(120, 170, 255, 0.22);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset, 0 0 10px -2px rgba(74,130,240,0.35);
    transition: transform .16s var(--ease-out, ease), box-shadow .16s var(--ease-out, ease), border-color .16s ease;
    animation: aurixMcdIn .6s var(--ease-out, ease) both;   /* fade-in entrance */
  }
  .micro-composition-donut:hover {
    transform: scale(1.04);                                  /* max 1.04 per spec */
    border-color: rgba(120, 170, 255, 0.40);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.03) inset, 0 0 16px 1px rgba(74,130,240,0.50);
  }
  .micro-composition-donut:active { transform: scale(.985); transition-duration: 90ms; }
  .micro-composition-donut:focus-visible { outline: 2px solid rgba(120,170,255,.55); outline-offset: 2px; }
  /* very subtle periodic glow (pulse every several seconds; never aggressive) */
  .micro-composition-donut::after {
    content: ''; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none;
    animation: aurixMcdPulse 6.5s ease-in-out infinite;
  }
}
.mcd-ring { width: 40px; height: 40px; display: block; }
.mcd-track {
  fill: none; stroke: rgba(120, 170, 255, 0.16); stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  transform: rotate(-90deg); transform-origin: 50% 50%;
  animation: aurixMcdDraw .72s var(--ease-out, ease) forwards;   /* ring draws 0→100% */
}
.mcd-segs { opacity: 0; animation: aurixMcdSegs .42s ease .42s forwards; }   /* colours reveal after */
.mcd-segs circle { fill: none; stroke-width: 6; transform: rotate(-90deg); transform-origin: 50% 50%; }
@keyframes aurixMcdIn   { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
@keyframes aurixMcdDraw { to { stroke-dashoffset: 0; } }
@keyframes aurixMcdSegs { to { opacity: 1; } }
@keyframes aurixMcdPulse { 0%, 100% { box-shadow: 0 0 8px 0 rgba(74,130,240,0.0); } 50% { box-shadow: 0 0 13px 1px rgba(74,130,240,0.18); } }
@media (prefers-reduced-motion: reduce) {
  .micro-composition-donut { animation: none; }
  .micro-composition-donut::after { animation: none; }
  .mcd-track { animation: none; stroke-dashoffset: 0; }
  .mcd-segs  { animation: none; opacity: 1; }
}

/* Composition modal — donut + legend */
.modal--composition { max-width: 420px; }
.aurix-composition-body { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 22px 24px 8px; }
.aurix-composition-chart { position: relative; width: 200px; height: 200px; flex: 0 0 auto; }
.aurix-composition-chart svg { width: 100%; height: 100%; display: block; }
.aurix-composition-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.aurix-composition-center-val { font-size: 24px; font-weight: 800; color: var(--text-bright, #fff); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.aurix-composition-center-sub { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim, #8a96aa); margin-top: 2px; }
.aurix-composition-legend { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 9px; }
.aurix-composition-legend li { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.aurix-composition-legend .acl-dot { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.aurix-composition-legend .acl-label { color: var(--text, #d7e0f0); flex: 1; }
.aurix-composition-legend .acl-pct { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-bright, #fff); }

/* ══════════════════════════════════════════════════════════════
   DSH.DONUT.02 — premium refinement (overrides DSH.DONUT.01).
   Pill restored to original; micro-donut is an INDEPENDENT 54px premium
   button to its right (own glass/border/shadow, never shared). Modal is a
   compact premium window with donut + legend grouped. Desktop only. ═════ */
.aurix-signal-row { display: flex; align-items: center; }
@media (min-width: 769px) { .aurix-signal-row { gap: 18px; } }   /* 16–20px separation */

@media (min-width: 769px) {
  .micro-composition-donut {
    width: 54px; height: 54px; margin-left: 0; padding: 5px;
    background:
      radial-gradient(120% 120% at 30% 18%, rgba(74,130,240,0.16), transparent 62%),
      linear-gradient(165deg, rgba(22,32,56,0.72), rgba(11,16,28,0.78));
    border: 1px solid rgba(120,170,255,0.20);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 8px 22px -14px rgba(0,0,0,0.70), 0 0 16px -7px rgba(74,130,240,0.30);
  }
  .micro-composition-donut:hover {
    transform: scale(1.05);                                  /* max 1.05 per spec */
    border-color: rgba(120,170,255,0.42);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 18px 1px rgba(74,130,240,0.50);
  }
}
.mcd-ring { width: 44px; height: 44px; transform-origin: 50% 50%; animation: aurixMcdBreath 10s ease-in-out 1.6s infinite; }
.mcd-track { stroke-width: 5.5; }
.mcd-segs circle { stroke-width: 5.5; }
/* subtle "breathing" every ~10s (scale ≤1.02); no rotation, no aggressive motion */
@keyframes aurixMcdBreath { 0%, 90%, 100% { transform: scale(1); } 95% { transform: scale(1.02); } }
@media (prefers-reduced-motion: reduce) { .mcd-ring { animation: none; } }

/* Compact premium window: donut + legend grouped side-by-side */
.modal--composition { max-width: 560px; }
.aurix-composition-body { flex-direction: row; align-items: center; justify-content: center; gap: 26px; padding: 20px 26px 10px; flex-wrap: wrap; }
.aurix-composition-chart { width: 188px; height: 188px; }
.aurix-composition-legend { width: auto; min-width: 210px; flex: 1 1 210px; gap: 10px; }

/* ══════════════════════════════════════════════════════════════
   DSH.DONUT.03 — final donut UX (overrides DSH.DONUT.01/02). Mini: independent,
   moved further right, NO outer track ring, crisp butt-cap segments that draw one
   by one once per load. Modal: compact centred premium panel, big 280px donut,
   single-column legend with name+% together, donut↔legend hover sync. Desktop. */
@media (min-width: 769px) { .aurix-signal-row { gap: 60px; } }   /* ~60px right of the pill, clear air */
.mcd-track { display: none; }                                     /* remove the outer ring (clean original look) */
.mcd-segs { opacity: 1; animation: none; }                        /* per-segment draw replaces the group fade */
.mcd-segs circle { transform: none; }                             /* rotation handled per-segment via attribute */
@keyframes aurixSegDraw { to { stroke-dashoffset: 0; } }          /* progressive slice draw */
.mcd-seg { transition: opacity .12s ease, filter .12s ease; }

/* Modal — compact premium panel: title · big donut · compact legend · close */
.modal--composition { max-width: 420px; transform: scale(.98); transition: opacity .18s ease, transform .18s ease; }  /* fade + scale .98 / 180ms */
.modal-overlay.open .modal--composition { transform: scale(1); }
.aurix-composition-body { flex-direction: column; align-items: center; gap: 14px; padding: 8px 26px 4px; flex-wrap: nowrap; }
.aurix-composition-chart { width: 280px; height: 280px; }          /* big donut dominates */
.aurix-composition-chart.hot .mcd-seg { opacity: .32; }
.aurix-composition-chart.hot .mcd-seg.is-hot { opacity: 1; filter: brightness(1.3); }
.aurix-composition-legend { width: 100%; max-width: 300px; min-width: 0; flex: none; gap: 9px; margin: 0 auto; }
.aurix-composition-legend li { justify-content: flex-start; gap: 10px; padding: 3px 8px; border-radius: 8px; transition: background .12s ease; }
.aurix-composition-legend li.is-hot { background: rgba(120,170,255,0.10); }
.aurix-composition-legend .acl-label { flex: 0 0 auto; min-width: 96px; }   /* name + % together, soft column, NOT far-right */
.aurix-composition-legend .acl-pct { flex: 0 0 auto; }

/* ══════════════════════════════════════════════════════════════
   DSH.DONUT.04 — final premium pass (overrides DSH.DONUT.01/02/03).
   Mini: thicker solid ring (~9.5px), bigger (50px), dropped + nudged right,
   subtle halo (no dark frame). Modal: wider compact executive panel, big donut
   protagonist, 2-column legend, per-segment tooltip. Desktop only. ════════ */
@media (min-width: 769px) {
  .micro-composition-donut {
    width: 58px; height: 58px; margin-top: 18px; margin-left: 24px;   /* P0-HERO-PREMIUM-POLISH: +~7% (54→58) — still a support element, never the protagonist; position/separation unchanged */
    background: transparent;                                           /* no dark frame */
    border: 1px solid rgba(120,170,255,0.14);                         /* barely-there ring */
    box-shadow: 0 0 14px -4px rgba(74,130,240,0.34);                  /* subtle exterior halo only */
  }
  .micro-composition-donut:hover {
    transform: scale(1.05);
    border-color: rgba(120,170,255,0.40);
    box-shadow: 0 0 18px 1px rgba(74,130,240,0.50);
  }
}
.mcd-ring { width: 54px; height: 54px; }   /* P0-HERO-PREMIUM-POLISH: +8% (50→54) in step with the 54→58 button; ring proportions unchanged */
.mcd-segs circle { stroke-width: 9.5; }   /* solid financial ring, not a thin loader */

/* Modal — wider compact executive panel; donut is the protagonist */
.modal--composition { max-width: 720px; transform: scale(.96); transition: opacity .15s ease, transform .15s ease; }  /* open .96→1, close →.96; 150ms */
.modal-overlay.open .modal--composition { transform: scale(1); }
.aurix-composition-body { flex-direction: column; align-items: center; gap: 14px; padding: 6px 30px 4px; flex-wrap: nowrap; }
.aurix-composition-chart { width: 230px; height: 230px; }   /* big donut dominates */
/* per-segment tooltip (name · % · real value); reserves its line so layout never jumps */
.aurix-composition-tip {
  display: flex; align-items: center; gap: 8px; height: 24px; opacity: 0;
  transition: opacity .12s ease; font-size: 12.5px; color: var(--text, #d7e0f0); font-variant-numeric: tabular-nums;
}
.aurix-composition-tip.show { opacity: 1; }
.aurix-composition-tip .act-dot { width: 9px; height: 9px; border-radius: 3px; }
.aurix-composition-tip .act-name { font-weight: 700; color: var(--text-bright, #fff); }
.aurix-composition-tip .act-pct { color: var(--text-muted, #9aa7bd); }
.aurix-composition-tip .act-val { margin-left: 6px; font-weight: 700; color: var(--text-bright, #fff); }
/* two-column legend, tight, aligned */
.aurix-composition-legend {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 34px;
  width: 100%; max-width: 560px; margin: 0 auto; flex: none;
}
.aurix-composition-legend li { justify-content: flex-start; gap: 9px; padding: 3px 8px; border-radius: 8px; transition: background .12s ease; }
.aurix-composition-legend li.is-hot { background: rgba(120,170,255,0.10); }
.aurix-composition-legend .acl-label { flex: 1 1 auto; min-width: 0; }
.aurix-composition-legend .acl-pct { flex: 0 0 auto; }

/* ══════════════════════════════════════════════════════════════
   DSH.DONUT.05 — final close (overrides). FIX: slices are positioned by an INLINE
   transform; this rule only sets the transform-box/origin so the rotation pivots on
   the donut centre (the earlier `transform:none` could blank the rotation → half-empty
   ring). Thicker mini ring, smaller hole. Compact modal, centred title, tight 2-col
   legend (name + % close together). Desktop only. ════════════════════════════════ */
.mcd-seg { transform-box: fill-box; transform-origin: center; }
.mcd-segs circle { stroke-width: 12; }                 /* fatter, clearly a donut (not a loader) */

/* Modal — narrower compact panel (~−22%), donut stays the protagonist */
.modal--composition { max-width: 560px; }
.modal--composition .modal-header { justify-content: center; position: relative; text-align: center; }
.modal--composition .modal-close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
.aurix-composition-chart { width: 234px; height: 234px; }   /* not smaller; slightly larger */

/* Two columns; within each, name + % are CLOSE (narrow column) and aligned, never at the modal edge */
.aurix-composition-legend {
  display: grid; grid-template-columns: repeat(2, minmax(0, 184px)); gap: 8px 48px;
  justify-content: center; width: auto; max-width: 100%; margin: 0 auto;
}
.aurix-composition-legend li { justify-content: flex-start; gap: 9px; }
.aurix-composition-legend .acl-label { flex: 1 1 auto; min-width: 0; }
.aurix-composition-legend .acl-pct { flex: 0 0 auto; }

/* ══════════════════════════════════════════════════════════════
   DSH.DONUT.06 — fluid premium close (overrides). Remove the periodic pulse "resplandor"
   (keep a clean static halo + the gentle breathing). Narrow the modal a touch more.
   The donut draw is an ease-out sweep from 12:00 clockwise (timed in JS). Desktop only. */
.micro-composition-donut::after { animation: none; box-shadow: none; content: none; }   /* no dirty pulse glow */
@media (min-width: 769px) {
  .micro-composition-donut { box-shadow: 0 0 13px -5px rgba(74,130,240,0.40); }          /* clean, subtle blue halo */
}
.modal--composition { max-width: 490px; }   /* ≈−12% lateral space; donut unchanged (protagonist) */

/* ══════════════════════════════════════════════════════════════
   DSH.DONUT.07 — clockwise mask-wipe REVEAL + dashboard flicker fix.
   The colored ring is static (complete); a single white wipe arc (rotated -90° ⇒ starts at
   12:00) grows clockwise via stroke-dashoffset 1→0, revealing it as one fluid sweep that closes
   back at the top. .donut-ready holds it hidden (mask empty) until .donut-reveal triggers the
   sweep on the next frame ⇒ never flashes complete. reduced-motion ⇒ static full ring. ════ */
.mcd-wipe { stroke-dashoffset: 1; }
.donut-reveal .mcd-wipe { animation: aurixDonutSweep 850ms cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes aurixDonutSweep { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .mcd-wipe { animation: none; stroke-dashoffset: 0; } }

/* FLICKER FIX — the donut, the analysis pill and the wealth chart all live INSIDE .hero-card,
   whose :hover transitioned a large 52px box-shadow glow ⇒ a repaint flash every time the mouse
   moved over them. Hover now only nudges the (cheap) border-colour; the box-shadow is identical
   to the base (no transition), so nothing repaints. Only border-color animates. */
.hero-card { transition: border-color var(--dur-med) var(--ease-premium); }
.hero-card:hover {
  border-color: rgba(77,141,255,0.40);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 18px 50px rgba(0,0,0,0.40),
    0 0 44px rgba(77,141,255,0.10);
}

/* Modal — a touch narrower; legend columns separated a bit more */
.modal--composition { max-width: 480px; }
.aurix-composition-legend { grid-template-columns: repeat(2, minmax(0, 176px)); gap: 8px 56px; }