/* COPIA LOCAL de hub.css (sistema de diseño común: tokens del tema «estudio», tipografías y
   componentes base). Antes se cargaba de https://hub.<ip>.nip.io/shared/hub.css: eso filtraba la
   IP del VPS y hacía depender el SaaS de otra app. Si cambia hub.css en el Hub, copiarlo aquí. (25/09) */
/* ============================================================
   Alex López · Unified Design System
   ------------------------------------------------------------
   Single source of truth for tokens, typography and the
   cross-app launcher. Loaded from https://hub.62-84-178-183.nip.io/shared/hub.css
   by every app in the ecosystem.

   Non-destructive: uses @layer so per-app styles always win.
   ============================================================ */

@layer fs-reset, fs-tokens, fs-base, fs-components, fs-launcher;

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Sora:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ─── TOKENS ──────────────────────────────────────────────── */
@layer fs-tokens {
  :root {
    /* Neutrals — light */
    --fs-bg:           #FAFAFA;
    --fs-surface:      #FFFFFF;
    --fs-surface-2:    #F4F4F5;
    --fs-surface-3:    #E9E9EC;
    --fs-border:       #E4E4E7;
    --fs-border-soft:  #F0F0F2;
    --fs-text:         #0A0A0A;
    --fs-text-2:       #52525B;
    --fs-text-3:       #A1A1AA;

    /* Neutrals — dark (opt-in via [data-theme="dark"] or .dark) */
    --fs-bg-dark:        #0A0A0B;
    --fs-surface-dark:   #111113;
    --fs-surface-2-dark: #18181B;
    --fs-border-dark:    #27272A;
    --fs-text-dark:      #FAFAFA;
    --fs-text-2-dark:    #A1A1AA;

    /* Accent palette per app */
    --fs-hub:        #18181B;
    --fs-film:       #F59E0B;
    --fs-gestion:    #14B8A6;
    --fs-leadgen:    #3B82F6;
    --fs-ai:         #D97449;
    --fs-biblio:     #10B981;
    --fs-bloodcash:  #DC2626;
    --fs-news:       #3B82F6;
    --fs-trading:    #F59E0B;
    --fs-misgastos:  #6366F1;
    --fs-cintas:     #A855F7;
    --fs-copilot:    #A78BFA;
    --fs-triathlon:  #FF5722;
    --fs-cami:       #0F766E;

    /* Active accent (overridden per-app via [data-fs-app]) */
    --fs-accent:        var(--fs-hub);
    --fs-accent-soft:   color-mix(in srgb, var(--fs-accent) 12%, transparent);
    --fs-accent-softer: color-mix(in srgb, var(--fs-accent) 6%,  transparent);
    --fs-accent-ring:   color-mix(in srgb, var(--fs-accent) 32%, transparent);

    /* Typography — Unified across all hub apps */
    --fs-font-sans:    'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --fs-font-display: 'Sora', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --fs-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

    /* Scale (modular 1.125) */
    --fs-t-xs:   12px;
    --fs-t-sm:   13px;
    --fs-t-base: 14px;
    --fs-t-md:   15px;
    --fs-t-lg:   18px;
    --fs-t-xl:   22px;
    --fs-t-2xl:  28px;
    --fs-t-3xl:  36px;
    --fs-t-display: 48px;

    /* Spacing (4px base) */
    --fs-s-1: 4px;  --fs-s-2: 8px;  --fs-s-3: 12px; --fs-s-4: 16px;
    --fs-s-5: 24px; --fs-s-6: 32px; --fs-s-7: 48px; --fs-s-8: 64px;

    /* Radii */
    --fs-r-sm: 6px;   --fs-r-md: 10px; --fs-r-lg: 14px;
    --fs-r-xl: 20px;  --fs-r-full: 999px;

    /* Shadows — soft, never pure black */
    --fs-shadow-1: 0 1px 2px rgba(17,17,20,.04), 0 1px 1px rgba(17,17,20,.03);
    --fs-shadow-2: 0 4px 12px rgba(17,17,20,.06), 0 2px 4px rgba(17,17,20,.04);
    --fs-shadow-3: 0 12px 32px rgba(17,17,20,.10), 0 4px 8px rgba(17,17,20,.05);
    --fs-shadow-pop: 0 20px 48px rgba(10,10,15,.18), 0 8px 16px rgba(10,10,15,.10);

    /* Motion */
    --fs-ease:     cubic-bezier(.2, .8, .2, 1);
    --fs-ease-out: cubic-bezier(.16, 1, .3, 1);
    --fs-dur-fast: 120ms;
    --fs-dur-med:  220ms;
    --fs-dur-slow: 380ms;

    /* Layout */
    --fs-z-rail:     9000;
    --fs-z-popover: 9100;
    --fs-z-toast:   9200;
  }

  /* Dark mode tokens: activated by class "dark" or [data-theme=dark]
     on <html> or <body>. Per-app dark also picked up by most apps. */
  html.dark, [data-theme="dark"], .dark {
    --fs-bg:          var(--fs-bg-dark);
    --fs-surface:     var(--fs-surface-dark);
    --fs-surface-2:   var(--fs-surface-2-dark);
    --fs-surface-3:   #202024;
    --fs-border:      var(--fs-border-dark);
    --fs-border-soft: #1F1F22;
    --fs-text:        var(--fs-text-dark);
    --fs-text-2:      var(--fs-text-2-dark);
    --fs-text-3:      #71717A;

    --fs-shadow-1: 0 1px 2px rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.25);
    --fs-shadow-2: 0 4px 12px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.30);
    --fs-shadow-3: 0 12px 32px rgba(0,0,0,.55), 0 4px 8px rgba(0,0,0,.40);
    --fs-shadow-pop: 0 20px 48px rgba(0,0,0,.60), 0 8px 16px rgba(0,0,0,.40);
  }

  /* Per-app accent binding via data attribute on <html> or <body> */
  [data-fs-app="hub"]       { --fs-accent: var(--fs-hub); }
  [data-fs-app="film"]      { --fs-accent: var(--fs-film); }
  [data-fs-app="gestion"]   { --fs-accent: var(--fs-gestion); }
  [data-fs-app="leadgen"]   { --fs-accent: var(--fs-leadgen); }
  [data-fs-app="ai"]        { --fs-accent: var(--fs-ai); }
  [data-fs-app="biblio"]    { --fs-accent: var(--fs-biblio); }
  [data-fs-app="bloodcash"] { --fs-accent: var(--fs-bloodcash); }
  [data-fs-app="news"]      { --fs-accent: var(--fs-news); }
  [data-fs-app="trading"]   { --fs-accent: var(--fs-trading); }
  [data-fs-app="misgastos"] { --fs-accent: var(--fs-misgastos); }
  [data-fs-app="cintas"]    { --fs-accent: var(--fs-cintas); }
  [data-fs-app="copilot"]   { --fs-accent: var(--fs-copilot); }
  [data-fs-app="triathlon"] { --fs-accent: var(--fs-triathlon); }
  [data-fs-app="cami"]      { --fs-accent: var(--fs-cami); }
}

/* ─── COMPONENTS (opt-in — .fs-* classes) ────────────────── */
@layer fs-components {
  .fs-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--fs-s-2);
    height: 36px; padding: 0 14px;
    font: 500 var(--fs-t-base)/1 var(--fs-font-sans);
    color: #fff; background: var(--fs-accent);
    border: 0; border-radius: var(--fs-r-md);
    cursor: pointer; user-select: none;
    transition:
      transform var(--fs-dur-fast) var(--fs-ease),
      box-shadow var(--fs-dur-fast) var(--fs-ease),
      background var(--fs-dur-fast) var(--fs-ease);
  }
  .fs-btn:hover  { transform: translateY(-1px); box-shadow: var(--fs-shadow-2); }
  .fs-btn:active { transform: translateY(0);    box-shadow: var(--fs-shadow-1); }
  .fs-btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--fs-accent-ring); }
  .fs-btn--ghost {
    background: transparent; color: var(--fs-text);
    border: 1px solid var(--fs-border);
  }
  .fs-btn--ghost:hover { background: var(--fs-accent-soft); border-color: var(--fs-accent); color: var(--fs-accent); }

  .fs-card {
    background: var(--fs-surface);
    border: 1px solid var(--fs-border);
    border-radius: var(--fs-r-lg);
    box-shadow: var(--fs-shadow-1);
    transition: box-shadow var(--fs-dur-med) var(--fs-ease),
                border-color var(--fs-dur-med) var(--fs-ease),
                transform var(--fs-dur-med) var(--fs-ease);
  }
  .fs-card:hover {
    box-shadow: var(--fs-shadow-2);
    border-color: color-mix(in srgb, var(--fs-accent) 30%, var(--fs-border));
  }

  .fs-input {
    height: 36px; padding: 0 12px;
    background: var(--fs-surface-2);
    border: 1px solid transparent;
    border-radius: var(--fs-r-md);
    color: var(--fs-text);
    font: 400 var(--fs-t-base)/1 var(--fs-font-sans);
    transition: border-color var(--fs-dur-fast) var(--fs-ease),
                box-shadow var(--fs-dur-fast) var(--fs-ease);
  }
  .fs-input:focus {
    outline: 0;
    border-color: var(--fs-accent);
    box-shadow: 0 0 0 3px var(--fs-accent-ring);
  }

  .fs-pill {
    display: inline-flex; align-items: center; gap: 6px;
    height: 24px; padding: 0 10px;
    font: 500 var(--fs-t-xs)/1 var(--fs-font-sans);
    color: var(--fs-accent);
    background: var(--fs-accent-soft);
    border-radius: var(--fs-r-full);
  }

  .fs-kbd {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 6px;
    font: 500 11px/1 var(--fs-font-mono);
    color: var(--fs-text-2);
    background: var(--fs-surface-2);
    border: 1px solid var(--fs-border);
    border-bottom-width: 2px;
    border-radius: 6px;
  }
}

/* ─── BASE (very light — only font smoothing; does not clobber) ── */
@layer fs-base {
  html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
}

/* ─── LAUNCHER (floating cross-app switcher) ─────────────── */
@layer fs-launcher {
  .fs-launcher,
  .fs-launcher * { box-sizing: border-box; }

  .fs-launcher-btn {
    position: fixed;
    left: 20px; bottom: 20px;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: var(--fs-accent);
    color: #fff;
    border: 0;
    border-radius: var(--fs-r-full);
    box-shadow: var(--fs-shadow-pop),
                0 0 0 3px color-mix(in srgb, var(--fs-accent) 18%, transparent);
    cursor: pointer;
    z-index: var(--fs-z-rail);
    transition: transform var(--fs-dur-fast) var(--fs-ease),
                box-shadow var(--fs-dur-fast) var(--fs-ease);
    font: 600 17px/1 var(--fs-font-sans);
  }
  .fs-launcher-btn:hover  { transform: translateY(-2px) scale(1.02); }
  .fs-launcher-btn:active { transform: translateY(0) scale(.98); }
  .fs-launcher-btn svg    { width: 18px; height: 18px; }

  .fs-launcher-backdrop {
    position: fixed; inset: 0;
    background: rgba(10,10,15,.28);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: var(--fs-z-popover);
    opacity: 0; pointer-events: none;
    transition: opacity var(--fs-dur-med) var(--fs-ease);
  }
  .fs-launcher-backdrop[data-open="true"] {
    opacity: 1; pointer-events: auto;
  }

  .fs-launcher-panel {
    position: fixed;
    left: 50%; top: 50%;
    transform: translate(-50%, calc(-50% + 8px));
    width: min(560px, calc(100vw - 32px));
    max-height: min(640px, calc(100vh - 80px));
    display: flex; flex-direction: column;
    background: var(--fs-surface);
    color: var(--fs-text);
    border: 1px solid var(--fs-border);
    border-radius: var(--fs-r-xl);
    box-shadow: var(--fs-shadow-pop);
    z-index: calc(var(--fs-z-popover) + 1);
    opacity: 0; pointer-events: none;
    transition: opacity var(--fs-dur-med) var(--fs-ease),
                transform var(--fs-dur-med) var(--fs-ease);
    overflow: hidden;
    font-family: var(--fs-font-sans);
  }
  .fs-launcher-panel[data-open="true"] {
    opacity: 1; pointer-events: auto;
    transform: translate(-50%, -50%);
  }

  .fs-launcher-search {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--fs-border-soft);
  }
  .fs-launcher-search svg {
    width: 16px; height: 16px; color: var(--fs-text-3); flex-shrink: 0;
  }
  .fs-launcher-search input {
    flex: 1; min-width: 0;
    border: 0; outline: 0; background: transparent;
    font: 400 15px/1.2 var(--fs-font-sans);
    color: var(--fs-text);
  }
  .fs-launcher-search input::placeholder { color: var(--fs-text-3); }

  .fs-launcher-list {
    flex: 1; overflow-y: auto;
    padding: 8px;
  }
  .fs-launcher-group-label {
    padding: 8px 12px 4px;
    font: 500 11px/1 var(--fs-font-sans);
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--fs-text-3);
  }
  .fs-launcher-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border-radius: var(--fs-r-md);
    cursor: pointer;
    transition: background var(--fs-dur-fast) var(--fs-ease);
  }
  .fs-launcher-item:hover,
  .fs-launcher-item[data-active="true"] {
    background: var(--fs-surface-2);
  }
  .fs-launcher-item[data-active="true"] { outline: 1px solid var(--fs-border); }

  .fs-launcher-icon {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--fs-r-md);
    font-size: 16px;
    background: color-mix(in srgb, var(--fs-item-color, var(--fs-accent)) 14%, transparent);
    color: var(--fs-item-color, var(--fs-accent));
    border: 1px solid color-mix(in srgb, var(--fs-item-color, var(--fs-accent)) 22%, transparent);
    flex-shrink: 0;
  }
  .fs-launcher-title {
    font: 500 14px/1.3 var(--fs-font-sans);
    color: var(--fs-text);
  }
  .fs-launcher-desc {
    font: 400 12px/1.4 var(--fs-font-sans);
    color: var(--fs-text-3);
    margin-top: 2px;
  }
  .fs-launcher-item-text { flex: 1; min-width: 0; }
  .fs-launcher-status {
    display: inline-flex; align-items: center; gap: 5px;
    font: 500 10px/1 var(--fs-font-mono);
    color: var(--fs-text-3);
    text-transform: uppercase; letter-spacing: .06em;
  }
  .fs-launcher-status::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--fs-text-3);
  }
  .fs-launcher-status[data-live="true"]::before {
    background: #10B981;
    box-shadow: 0 0 0 2px color-mix(in srgb, #10B981 30%, transparent);
  }

  .fs-launcher-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--fs-border-soft);
    font: 400 12px/1 var(--fs-font-sans);
    color: var(--fs-text-3);
    background: var(--fs-surface-2);
  }
  .fs-launcher-footer-keys { display: flex; align-items: center; gap: 6px; }

  /* Dark mode for launcher uses dark tokens automatically */
  @media (max-width: 520px) {
    .fs-launcher-panel { width: calc(100vw - 24px); }
  }
}

/* ─── HARMONIZED DARK SHELL ──────────────────────────────────
   Opt-in unified look for any dark-mode app. Apps just add
   data-fs-shell="dark" on <html> and they inherit the same
   typography, colors, cards, buttons, kpis, modals.
   Per-app accent still comes from data-fs-app="…".
   ───────────────────────────────────────────────────────── */
@layer fs-components {
  [data-fs-shell="dark"] {
    /* Core neutrals — single source of truth across apps */
    --shell-bg:        #0A0A0B;
    --shell-surface:   #111113;
    --shell-surface-2: #161618;
    --shell-elevated:  #1B1B1E;
    --shell-border:    rgba(255,255,255,0.06);
    --shell-border-2:  rgba(255,255,255,0.10);
    --shell-text:      #FAFAFA;
    --shell-sub:       #A1A1AA;
    --shell-muted:     #71717A;
    --shell-faint:     #3F3F46;
    --shell-accent:    var(--fs-accent);
    --shell-accent-soft: color-mix(in srgb, var(--fs-accent) 12%, transparent);
    --shell-accent-glow: color-mix(in srgb, var(--fs-accent) 18%, transparent);
    --shell-green:     #10B981;
    --shell-green-soft:rgba(16,185,129,0.12);
    --shell-red:       #EF4444;
    --shell-red-soft:  rgba(239,68,68,0.12);
    --shell-amber:     #F59E0B;
    --shell-purple:    #A78BFA;
    --shell-cyan:      #22D3EE;

    /* Compatibility aliases for existing apps. These let each app keep
       its local CSS names while sharing the ecosystem shell underneath. */
    --bg:              var(--shell-bg);
    --bg2:             var(--shell-surface);
    --bg3:             var(--shell-surface-2);
    --bg4:             var(--shell-elevated);
    --surface:         var(--shell-surface);
    --surface-2:       var(--shell-surface-2);
    --elevated:        var(--shell-elevated);
    --raised:          #202024;
    --border:          var(--shell-border);
    --border2:         var(--shell-border-2);
    --border-h:        color-mix(in srgb, var(--fs-accent) 35%, transparent);
    --text:            var(--shell-text);
    --text2:           var(--shell-sub);
    --text3:           var(--shell-muted);
    --sub:             var(--shell-sub);
    --muted:           var(--shell-muted);
    --faint:           var(--shell-faint);
    --accent:          var(--fs-accent);
    --accent-bright:   color-mix(in srgb, var(--fs-accent) 78%, white);
    --accent-dim:      color-mix(in srgb, var(--fs-accent) 52%, #0A0A0B);
    --accent-soft:     var(--shell-accent-soft);
    --accent-glow:     var(--shell-accent-glow);
  }

  /* Apply harmonized typography to the whole document */
  [data-fs-shell="dark"] body {
    font-family: var(--fs-font-sans);
    background: var(--shell-bg);
    color: var(--shell-text);
    line-height: 1.5;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  [data-fs-shell="dark"] h1,
  [data-fs-shell="dark"] h2,
  [data-fs-shell="dark"] h3,
  [data-fs-shell="dark"] .fs-display {
    font-family: var(--fs-font-display);
    letter-spacing: -0.02em;
    font-weight: 700;
  }

  [data-fs-shell="dark"] code,
  [data-fs-shell="dark"] kbd,
  [data-fs-shell="dark"] .fs-mono,
  [data-fs-shell="dark"] pre {
    font-family: var(--fs-font-mono);
  }

  /* Scrollbars (WebKit) */
  [data-fs-shell="dark"] ::-webkit-scrollbar { width: 6px; height: 6px; }
  [data-fs-shell="dark"] ::-webkit-scrollbar-track { background: transparent; }
  [data-fs-shell="dark"] ::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--fs-accent) 18%, transparent);
    border-radius: 3px;
  }
  [data-fs-shell="dark"] ::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--fs-accent) 32%, transparent);
  }

  /* Harmonized form controls */
  [data-fs-shell="dark"] input,
  [data-fs-shell="dark"] select,
  [data-fs-shell="dark"] textarea {
    background: var(--shell-surface-2);
    border: 1px solid var(--shell-border);
    color: var(--shell-text);
    padding: 9px 12px;
    border-radius: var(--fs-r-md);
    outline: none;
    font: 400 var(--fs-t-sm)/1.4 var(--fs-font-sans);
    transition: border-color var(--fs-dur-fast) var(--fs-ease),
                background var(--fs-dur-fast) var(--fs-ease);
    width: 100%;
  }
  [data-fs-shell="dark"] input:focus,
  [data-fs-shell="dark"] select:focus,
  [data-fs-shell="dark"] textarea:focus {
    border-color: var(--fs-accent);
    background: var(--shell-elevated);
  }

  /* Selection */
  [data-fs-shell="dark"] ::selection {
    background: color-mix(in srgb, var(--fs-accent) 35%, transparent);
    color: var(--shell-text);
  }

  /* ── Reusable shell components ── */
  .fs-shell-card {
    background: var(--shell-surface);
    border: 1px solid var(--shell-border);
    border-radius: var(--fs-r-lg);
    padding: 18px;
    transition: border-color var(--fs-dur-med) var(--fs-ease);
  }
  .fs-shell-card:hover { border-color: var(--shell-border-2); }

  .fs-shell-kpi {
    background: var(--shell-surface);
    border: 1px solid var(--shell-border);
    border-radius: var(--fs-r-lg);
    padding: 18px 20px;
    position: relative;
    overflow: hidden;
  }
  .fs-shell-kpi::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, var(--fs-accent), transparent);
    opacity: .12; pointer-events: none;
    mask: radial-gradient(120px 80px at 90% 10%, black, transparent);
  }
  .fs-shell-kpi-label {
    font-size: var(--fs-t-xs); color: var(--shell-muted);
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-bottom: 6px;
  }
  .fs-shell-kpi-value {
    font-family: var(--fs-font-display);
    font-weight: 700; font-size: var(--fs-t-2xl);
    letter-spacing: -0.02em;
  }

  .fs-shell-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    height: 34px; padding: 0 14px;
    font: 600 12.5px/1 var(--fs-font-sans);
    color: var(--shell-text);
    background: var(--shell-surface-2);
    border: 1px solid var(--shell-border);
    border-radius: var(--fs-r-md);
    cursor: pointer;
    transition: all var(--fs-dur-fast) var(--fs-ease);
  }
  .fs-shell-btn:hover {
    background: var(--shell-elevated);
    border-color: var(--shell-border-2);
  }
  .fs-shell-btn--primary {
    background: linear-gradient(135deg, var(--fs-accent), color-mix(in srgb, var(--fs-accent) 70%, white));
    border: none; color: #fff;
    box-shadow: 0 6px 18px var(--shell-accent-soft);
  }
  .fs-shell-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px var(--shell-accent-glow);
  }
  .fs-shell-btn--ghost {
    background: transparent;
  }
  .fs-shell-btn--danger {
    background: var(--shell-red-soft);
    color: var(--shell-red);
    border-color: rgba(239,68,68,0.22);
  }

  .fs-shell-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px;
    border-radius: var(--fs-r-full);
    font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
    background: var(--shell-accent-soft);
    color: var(--fs-accent);
  }
  .fs-shell-pill--green { background: var(--shell-green-soft); color: var(--shell-green); }
  .fs-shell-pill--red   { background: var(--shell-red-soft);   color: var(--shell-red); }

  .fs-shell-modal-bg {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(6px);
    z-index: 100;
    display: grid; place-items: center;
    padding: 20px;
  }
  .fs-shell-modal {
    background: var(--shell-surface);
    border: 1px solid var(--shell-border);
    border-radius: var(--fs-r-xl);
    padding: 22px;
    width: 100%; max-width: 480px;
    max-height: 90vh; overflow-y: auto;
    box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  }

  /* ── Hub-style visual language (panels translúcidos, accent-bar, tinted icons) ── */

  /* Panels — superficie translúcida con blur, igual al hub */
  .fs-panel {
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--fs-r-lg);
    transition: all var(--fs-dur-med) var(--fs-ease);
  }
  .fs-panel-hi {
    background: rgba(255,255,255,0.065);
    border: 1px solid rgba(255,255,255,0.14);
  }
  .fs-panel-h:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.14);
  }

  /* Accent-bar — tira vertical del color de acento de la app */
  .fs-accent-bar {
    position: relative;
  }
  .fs-accent-bar::before {
    content: '';
    position: absolute;
    left: 0; top: 14px; bottom: 14px;
    width: 3px;
    background: var(--fs-accent);
    border-radius: 4px;
    opacity: 0.6;
    transition: opacity var(--fs-dur-med) var(--fs-ease);
  }
  .fs-accent-bar:hover::before { opacity: 1; }
  .fs-accent-bar--top::before {
    left: 14px; right: 14px; top: 0; bottom: auto;
    width: auto; height: 3px;
  }

  /* Tinted icon box — caja del color de la app, suave + halo */
  .fs-icon-box {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--fs-r-md);
    font-size: 20px;
    background: color-mix(in srgb, var(--fs-accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--fs-accent) 26%, transparent);
    color: var(--fs-accent);
    box-shadow: 0 0 20px color-mix(in srgb, var(--fs-accent) 12%, transparent);
    flex-shrink: 0;
  }
  .fs-icon-box--sm { width: 32px; height: 32px; font-size: 14px; border-radius: 9px; }
  .fs-icon-box--lg { width: 56px; height: 56px; font-size: 26px; border-radius: 14px; }

  /* Badge / pill suave del color de acento */
  .fs-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 8px;
    font-size: 10px; font-weight: 500;
    letter-spacing: 0.04em; text-transform: uppercase;
    border-radius: var(--fs-r-full);
    background: color-mix(in srgb, var(--fs-accent) 15%, transparent);
    color: var(--fs-accent);
  }
  .fs-badge--neutral {
    background: rgba(255,255,255,0.06);
    color: var(--shell-sub, #A1A1AA);
  }

  /* Hero — saludo grande con saludo + fecha (estilo hub) */
  .fs-hero {
    background: var(--shell-surface, rgba(255,255,255,0.035));
    border: 1px solid var(--shell-border, rgba(255,255,255,0.08));
    border-radius: var(--fs-r-xl);
    padding: 24px 28px;
    position: relative;
    overflow: hidden;
  }
  .fs-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(600px 300px at 100% 0%,
                color-mix(in srgb, var(--fs-accent) 14%, transparent), transparent 60%);
    pointer-events: none;
  }
  .fs-hero-title {
    font-family: var(--fs-font-display);
    font-weight: 700;
    font-size: clamp(22px, 3vw, 32px);
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--shell-text, #FAFAFA);
    margin: 0 0 4px;
    position: relative;
  }
  .fs-hero-sub {
    color: var(--shell-sub, #A1A1AA);
    font-size: 13px;
    position: relative;
  }

  /* Action chip — botón pequeño con tinte del acento */
  .fs-action-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    font-size: 11px; font-weight: 600;
    border-radius: var(--fs-r-md);
    background: color-mix(in srgb, var(--fs-accent) 13%, transparent);
    color: var(--fs-accent);
    border: 1px solid color-mix(in srgb, var(--fs-accent) 24%, transparent);
    cursor: pointer;
    transition: all var(--fs-dur-fast) var(--fs-ease);
  }
  .fs-action-chip:hover {
    background: color-mix(in srgb, var(--fs-accent) 22%, transparent);
    border-color: color-mix(in srgb, var(--fs-accent) 40%, transparent);
  }

  /* Dot — punto de status */
  .fs-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--fs-accent);
    display: inline-block;
  }
  .fs-dot--live {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fs-accent) 28%, transparent);
    animation: fs-pulse 2.4s ease-in-out infinite;
  }
  @keyframes fs-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .55; }
  }

  /* Sidebar nav item con accent-bar al activo */
  .fs-nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    border-radius: var(--fs-r-md);
    color: var(--shell-sub, #A1A1AA);
    font-weight: 500; font-size: 13px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--fs-dur-fast) var(--fs-ease);
    position: relative;
  }
  .fs-nav-item:hover {
    color: var(--shell-text, #FAFAFA);
    background: rgba(255,255,255,0.04);
  }
  .fs-nav-item[data-active="true"],
  .fs-nav-item.active {
    background: color-mix(in srgb, var(--fs-accent) 12%, transparent);
    color: var(--fs-accent);
    border-color: color-mix(in srgb, var(--fs-accent) 22%, transparent);
  }
  .fs-nav-item[data-active="true"]::before,
  .fs-nav-item.active::before {
    content: '';
    position: absolute;
    left: -1px; top: 8px; bottom: 8px;
    width: 2px;
    background: var(--fs-accent);
    border-radius: 2px;
  }

  /* App-shell layout: sidebar + main */
  .fs-app-shell {
    display: grid;
    grid-template-columns: 220px 1fr;
    height: 100vh;
  }
  @media (max-width: 900px) {
    .fs-app-shell { grid-template-columns: 1fr; }
  }
}