@import "vx-theme-tokens.css";

/* ============================================================================
   APEX SOVEREIGN MOBILE COMMAND CENTER (menuemisor.php)
   Executive Porcelain Light Theme & Sovereign Evinux Harmony
   ============================================================================ */

/* --- 1. DESKTOP ZERO-REGRESSION ISOLATION CONTRACT (>= 821px) --- */
@media (min-width: 821px) {
  #vxSovereignCommandCenter,
  #vxHubAmbientHud,
  #vxTenantCarousel,
  #vxFinancialMeridian,
  #vxBentoGrid,
  #vxFiscalRadarContainer,
  #vxHubBottomDock,
  #vxHubActionTray,
  .vx-sovereign-command-center,
  .vx-hub-ambient-hud,
  .vx-tenant-carousel-sheet,
  .vx-financial-meridian,
  .vx-bento-grid,
  .vx-fiscal-radar-container,
  .vx-hub-bottom-dock,
  .vx-action-tray-sheet {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }
}

/* --- 2. MOBILE COMMAND CENTER CANVAS (<= 820px) --- */
@media (max-width: 820px) {
  /* Complete eradication of floating desktop/cockpit elements on menuemisor */
  body.vx-menu-page #filemon_trigger_badge,
  body.vx-menu-page #filemon_root_container,
  body.vx-menu-page #filemonCockpitContainer,
  body.vx-menu-page #filemonTriggerBadge,
  body.vx-menu-page #filemonBeaconWrapper,
  body.vx-menu-page .filemon-trigger-badge,
  body.vx-menu-page .filemon-beacon-wrapper,
  body.vx-menu-page .filemon-cockpit-card,
  body.vx-menu-page .filemon-beacon-pill,
  body.vx-menu-page.vx-on .vx-launcher-wrap,
  body.vx-menu-page .vxf-launcher,
  body.vx-menu-page .vx-mobile-fab,
  body.vx-menu-page .vx-appbar,
  body.vx-menu-page .vx-bottomnav,
  body.vx-menu-page .vx-nav-rail,
  body.vx-menu-page .vx-appbar-pill-btn {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  /* Full 100vw edge-to-edge canvas with zero lateral gutters */
  html,
  body.vx-sovereign-active,
  body:has(#vxSovereignCommandCenter) {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    background: var(--vx-canvas, #f8fafc) !important;
  }

  body.vx-sovereign-active .vx-shell,
  body:has(#vxSovereignCommandCenter) .vx-shell {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
  }

  body.vx-sovereign-active .vx-container,
  body:has(#vxSovereignCommandCenter) .vx-container {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.vx-sovereign-active .vx-page-frame,
  body:has(#vxSovereignCommandCenter) .vx-page-frame {
    display: none !important;
  }

  .vx-sovereign-command-center {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 0 calc(96px + env(safe-area-inset-bottom, 24px)) 0 !important;
    background: var(--vx-canvas, #f8fafc);
    color: var(--vx-ink, #0f172a);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }

  /* 2.1 Titanium Dynamic Island (44px) - Executive Porcelain Light */
  .vx-hub-ambient-hud {
    position: sticky;
    top: 0;
    z-index: 900;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--vx-border, rgba(226, 232, 240, 0.9));
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
  }
  .vx-hud-emisor-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    background: rgba(241, 245, 249, 0.9);
    padding: 3px 10px 3px 4px;
    border-radius: 9999px;
    border: 1px solid var(--vx-border, #e2e8f0);
    transition: background 0.18s ease;
  }
  .vx-hud-emisor-pill:active {
    background: #e2e8f0;
  }
  .vx-emisor-avatar {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--vx-accent-d, #1d4ed8), var(--vx-accent, #2563eb));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #ffffff;
    box-shadow: 0 2px 6px var(--vx-accent-glow, rgba(37, 99, 235, 0.25));
  }
  .vx-csd-pulse-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid #ffffff;
    background: #10b981;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
  }
  .vx-csd-pulse-dot.is-warning {
    background: #f59e0b;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.6);
  }
  .vx-csd-pulse-dot.is-critical,
  .vx-csd-pulse-dot.is-expired {
    background: #ef4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.7);
    animation: vxCsdPulseCrit 1.5s infinite ease-in-out;
  }
  @keyframes vxCsdPulseCrit {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.6; }
  }
  .vx-emisor-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
  }
  .vx-emisor-legal {
    font-size: 12px;
    font-weight: 700;
    color: var(--vx-ink, #0f172a);
    letter-spacing: -0.01em;
  }
  .vx-emisor-rfc {
    font-size: 10px;
    font-weight: 500;
    color: var(--vx-text-muted, #64748b);
  }
  .vx-emisor-chevron {
    font-size: 10px;
    color: var(--vx-text-muted, #64748b);
    margin-left: 2px;
  }
  .vx-hud-right-deck {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .vx-folios-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 9999px;
    background: var(--vx-accent-subtle, #eff6ff);
    border: 1px solid var(--vx-accent-light, #fed7aa);
    font-size: 11px;
    font-weight: 700;
    color: var(--vx-accent, #2563eb);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: all 0.3s ease;
  }
  .vx-folios-badge.is-warning,
  .vx-folios-badge.is-low {
    background: #fef3c7;
    border-color: #fde68a;
    color: #b45309;
  }
  .vx-folios-badge.is-critical {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
    animation: vxPulseFolios 2s infinite ease-in-out;
  }
  @keyframes vxPulseFolios {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
  }
  .vx-folios-ico {
    font-size: 11px;
    display: flex;
    align-items: center;
  }
  .vx-hud-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--vx-border, #e2e8f0);
    background: #f8fafc;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.16s ease;
  }
  .vx-hud-icon-btn:hover,
  .vx-hud-icon-btn:active {
    background: #e2e8f0;
    color: var(--vx-accent, #2563eb);
    border-color: var(--vx-accent-light, #fed7aa);
  }

  /* 2.2 Multi-Tenant Carousel Sheet (Executive Porcelain) */
  .vx-tenant-carousel-sheet {
    position: fixed;
    top: 44px;
    left: 0;
    right: 0;
    max-height: 70vh;
    background: #ffffff;
    border-bottom: 1px solid var(--vx-border, #e2e8f0);
    border-radius: 0 0 24px 24px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.16);
    z-index: 950;
    transform: translateY(-110%);
    transition: transform 340ms cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    padding: 16px;
    visibility: hidden;
  }
  .vx-tenant-carousel-sheet.is-open {
    transform: translateY(0);
    visibility: visible;
  }
  .vx-carousel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f5f9;
  }
  .vx-carousel-title {
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
  }
  .vx-carousel-sub {
    display: block;
    font-size: 11px;
    color: #64748b;
  }
  .vx-carousel-close {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #64748b;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 13px;
    cursor: pointer;
  }
  .vx-carousel-track {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .vx-tenant-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.16s ease;
  }
  .vx-tenant-card:hover, .vx-tenant-card:active {
    background: #f1f5f9;
    border-color: #cbd5e1;
  }
  .vx-tenant-card.is-active {
    background: var(--vx-accent-subtle, #eff6ff);
    border-color: var(--vx-accent, #2563eb);
  }
  .vx-tenant-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--vx-accent-d, #1d4ed8), var(--vx-accent, #2563eb));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
  }
  .vx-tenant-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
  }
  .vx-tenant-name {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
  }
  .vx-tenant-rfc {
    font-size: 11px;
    color: #64748b;
  }
  .vx-tenant-check {
    font-size: 14px;
    font-weight: 800;
    color: var(--vx-accent, #2563eb);
  }
  .vx-carousel-footer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e2e8f0;
  }
  .vx-carousel-all-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: var(--vx-accent, #2563eb);
    color: #ffffff !important;
    border-radius: 12px;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 2px 8px var(--vx-accent-glow, rgba(37, 99, 235, 0.28));
    transition: opacity 0.15s ease;
  }
  .vx-carousel-all-link:active {
    opacity: 0.9;
  }

  /* 2.3 Financial Meridian (Executive Porcelain White Card) */
  .vx-financial-meridian {
    padding: 14px 14px 6px;
  }
  .vx-meridian-card {
    background: var(--vx-card, #ffffff);
    border: 1px solid var(--vx-border, #e2e8f0);
    border-radius: 22px;
    padding: 18px 16px 14px;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.03);
    position: relative;
    overflow: hidden;
  }
  .vx-meridian-card::before {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, var(--vx-accent-light, #dbeafe) 0%, transparent 70%);
    opacity: 0.6;
    pointer-events: none;
  }
  .vx-meridian-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
  }
  .vx-meridian-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 9999px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    font-size: 11px;
    font-weight: 600;
    color: #475569;
  }
  .vx-meridian-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--vx-accent, #2563eb);
    box-shadow: 0 0 6px var(--vx-accent-glow, rgba(37, 99, 235, 0.35));
  }
  .vx-meridian-sat-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 9999px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
    font-size: 11px;
    font-weight: 700;
    color: #92400e;
  }
  .vx-odometer-primary {
    display: flex;
    align-items: baseline;
    justify-content: center;
    font-size: 32px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
    cursor: pointer;
    user-select: none;
  }
  .vx-currency-prefix {
    font-size: 22px;
    color: #94a3b8;
    margin-right: 4px;
  }
  .vx-currency-suffix {
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    margin-left: 6px;
  }
  .vx-odometer-rotor {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    display: inline-flex;
    overflow: hidden;
    height: 38px;
    line-height: 38px;
    color: #0f172a;
  }
  .vx-odometer-wheel,
  .vx-digit-strip,
  .vx-odometer-static {
    font-variant-numeric: tabular-nums;
    color: #0f172a !important;
  }
  .vx-meridian-sublabel {
    text-align: center;
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-top: 2px;
    margin-bottom: 14px;
  }
  .vx-meridian-split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
  }
  .vx-split-metric {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.16s ease;
  }
  .vx-split-metric.is-collected {
    background: #f0fdf4;
    border: 1px solid #dcfce7;
  }
  .vx-split-metric.is-collected .vx-split-icon {
    background: #dcfce7;
    color: #16a34a;
  }
  .vx-split-metric.is-collected .vx-split-caption {
    color: #166534;
  }
  .vx-split-metric.is-collected .vx-split-val {
    color: #15803d;
  }
  .vx-split-metric.is-pending {
    background: #fffbeb;
    border: 1px solid #fef3c7;
  }
  .vx-split-metric.is-pending .vx-split-icon {
    background: #fef3c7;
    color: #d97706;
  }
  .vx-split-metric.is-pending .vx-split-caption {
    color: #92400e;
  }
  .vx-split-metric.is-pending .vx-split-val {
    color: #b45309;
  }
  .vx-split-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
  }
  .vx-split-data {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
  }
  .vx-split-caption {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
  }
  .vx-split-val {
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }
  .vx-cashflow-scrubber {
    margin-top: 10px;
    overflow-x: auto;
  }
  .vx-scrubber-track {
    display: flex;
    gap: 8px;
    padding: 2px 0;
  }
  .vx-scrubber-pill {
    flex: 1;
    min-width: 72px;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
  }
  .vx-scrubber-pill.is-active {
    background: var(--vx-accent, #2563eb);
    border-color: var(--vx-accent-d, #1d4ed8);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 2px 8px var(--vx-accent-glow, rgba(37, 99, 235, 0.3));
  }

  /* 2.4 High-Density Bento Grid (Porcelain Cards) */
  .vx-bento-grid {
    padding: 8px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .vx-bento-card {
    background: var(--vx-card, #ffffff);
    border: 1px solid var(--vx-border, #e2e8f0);
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.03);
  }
  .vx-card-kicker {
    font-size: 10px;
    font-weight: 800;
    color: #64748b;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 10px;
  }
  .vx-launchpad-actions {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 10px;
  }
  .vx-btn-blast {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--vx-accent, #2563eb), var(--vx-accent-d, #1d4ed8));
    box-shadow: 0 4px 14px var(--vx-accent-glow, rgba(37, 99, 235, 0.35));
    border: 0;
    color: #fff;
    cursor: pointer;
    overflow: hidden;
    text-align: left;
    transition: transform 0.12s ease;
  }
  .vx-btn-blast:active {
    transform: scale(0.98);
  }
  .vx-blast-ring {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 32px;
    height: 32px;
    transform: rotate(-90deg);
  }
  .vx-blast-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.25);
    stroke-width: 3;
  }
  .vx-blast-progress {
    fill: none;
    stroke: #ffffff;
    stroke-width: 3;
    stroke-dasharray: 125.6;
    stroke-dashoffset: 125.6;
    transition: stroke-dashoffset 0.1s linear;
  }
  .vx-btn-blast.is-charging .vx-blast-progress {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 750ms linear;
  }
  .vx-blast-content {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .vx-blast-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }
  .vx-blast-icon .vx-svg-ico {
    width: 20px;
    height: 20px;
    stroke: #ffffff;
    stroke-width: 2.6;
  }
  .vx-blast-text strong {
    display: block;
    font-size: 13.5px;
    line-height: 1.2;
    color: #ffffff;
  }
  .vx-blast-text small {
    display: block;
    font-size: 9.5px;
    color: rgba(255, 255, 255, 0.85);
  }
  .vx-btn-rep {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #0f172a;
    cursor: pointer;
    text-align: left;
    transition: all 0.16s ease;
  }
  .vx-btn-rep:active {
    background: #f1f5f9;
    border-color: #cbd5e1;
    transform: scale(0.98);
  }
  .vx-rep-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--vx-accent, #2563eb);
  }
  .vx-rep-icon .vx-svg-ico {
    width: 18px;
    height: 18px;
    stroke: var(--vx-accent, #2563eb);
  }
  .vx-rep-text strong {
    display: block;
    font-size: 13px;
    line-height: 1.2;
    color: #0f172a;
  }
  .vx-rep-text small {
    display: block;
    font-size: 9.5px;
    color: #64748b;
  }

  /* Quick Modules Section (Instant Navigation Hub) */
  .vx-modules-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .vx-module-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    text-decoration: none;
    color: #0f172a;
    transition: all 0.16s ease;
  }
  .vx-module-pill:active {
    background: #f1f5f9;
    border-color: #cbd5e1;
    transform: scale(0.98);
  }
  .vx-mod-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--vx-accent-subtle, #eff6ff);
    border: 1px solid var(--vx-accent-light, #fed7aa);
    color: var(--vx-accent, #2563eb);
    flex-shrink: 0;
    transition: all 0.16s ease;
  }
  .vx-mod-ico .vx-svg-ico {
    width: 18px;
    height: 18px;
    stroke: var(--vx-accent, #2563eb);
  }
  .vx-module-pill:hover .vx-mod-ico,
  .vx-module-pill:active .vx-mod-ico {
    background: var(--vx-accent, #2563eb);
    color: #ffffff;
    border-color: var(--vx-accent-d, #1d4ed8);
  }
  .vx-module-pill:hover .vx-mod-ico .vx-svg-ico,
  .vx-module-pill:active .vx-mod-ico .vx-svg-ico {
    stroke: #ffffff;
  }
  .vx-mod-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
  }
  .vx-mod-meta strong {
    font-size: 12.5px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .vx-mod-meta small {
    font-size: 9.5px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Bento 2: Collections Sniper */
  .vx-sniper-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
  }
  .vx-sniper-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
  }
  .vx-sniper-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 6px #ef4444;
  }
  .vx-sniper-count {
    font-size: 11px;
    font-weight: 700;
    color: #dc2626;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    padding: 2px 7px;
    border-radius: 9999px;
  }
  .vx-sniper-amount {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
  }
  .vx-sniper-lead {
    font-size: 11px;
    color: #64748b;
    margin-top: 2px;
    margin-bottom: 10px;
  }
  .vx-sniper-bar {
    display: flex;
    gap: 8px;
  }
  .vx-sniper-btn {
    flex: 1;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    border: 0;
    text-align: center;
  }
  .vx-sniper-btn.is-whatsapp {
    background: #10b981;
    color: #fff;
  }
  .vx-sniper-btn.is-inspect {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #334155;
  }
  .vx-sniper-btn:active {
    filter: brightness(0.95);
  }

  /* Bento 3: Quick Bóveda */
  .vx-boveda-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #f1f5f9;
  }
  .vx-boveda-title {
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
  }
  .vx-boveda-all-link {
    font-size: 11px;
    color: var(--vx-accent, #2563eb);
    text-decoration: none;
    font-weight: 600;
  }
  .vx-boveda-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .vx-boveda-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: background 0.16s ease;
  }
  .vx-boveda-row:active {
    background: #f1f5f9;
  }
  .vx-boveda-col-info {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
  }
  .vx-boveda-folio-row {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .vx-boveda-folio {
    font-size: 13px;
    font-weight: 800;
    color: #0f172a;
  }
  .vx-boveda-status {
    font-size: 9.5px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
  }
  .vx-boveda-status.is-vigente {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
  }
  .vx-boveda-status.is-cancelado {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
  }
  .vx-boveda-receptor {
    font-size: 11px;
    color: #64748b;
  }
  .vx-boveda-col-amount {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .vx-boveda-total {
    font-size: 13px;
    font-weight: 800;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
  }
  .vx-boveda-actions {
    display: flex;
    gap: 4px;
  }
  .vx-chip-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
    text-decoration: none;
    font-size: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  }
  .vx-chip-action:active {
    background: #f1f5f9;
    color: var(--vx-accent, #2563eb);
  }
  .vx-boveda-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 14px;
    gap: 8px;
    text-align: center;
  }
  .vx-boveda-empty-icon {
    font-size: 26px;
    opacity: 0.8;
  }
  .vx-boveda-empty-text {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
  }
  .vx-boveda-empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--vx-accent, #2563eb);
    background: var(--vx-accent-subtle, #eff6ff);
    border: 1px solid var(--vx-accent-light, #dbeafe);
    padding: 6px 14px;
    border-radius: 9999px;
    text-decoration: none;
    transition: all 0.2s ease;
  }
  .vx-boveda-empty-cta:active {
    transform: scale(0.96);
  }

  /* 2.5 Ambient Fiscal Radar & 3D Card Flip (Executive Porcelain) */
  .vx-fiscal-radar-container {
    padding: 6px 14px;
    perspective: 1200px;
  }
  .vx-3d-card {
    width: 100%;
    min-height: 156px;
  }
  .vx-3d-card-inner {
    position: relative;
    width: 100%;
    min-height: 156px;
    transition: transform 650ms cubic-bezier(0.2, 0.85, 0.4, 1.15);
    transform-style: preserve-3d;
  }
  .vx-3d-card-inner.is-flipped {
    transform: rotateY(180deg);
  }
  .vx-3d-card-front,
  .vx-3d-card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 156px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 18px;
    background: var(--vx-card, #ffffff);
    border: 1px solid var(--vx-border, #e2e8f0);
    padding: 14px;
    box-sizing: border-box;
    box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.03);
  }
  .vx-3d-card-back {
    transform: rotateY(180deg);
  }
  .vx-radar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #f1f5f9;
  }
  .vx-radar-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
  }
  .vx-flip-trigger-btn {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 3px 8px;
    color: var(--vx-accent, #2563eb);
    font-size: 10.5px;
    font-weight: 700;
    cursor: pointer;
  }
  .vx-csd-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
  }
  .vx-csd-label {
    display: block;
    font-size: 10px;
    color: #64748b;
    text-transform: uppercase;
  }
  .vx-csd-serie {
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
  }
  .vx-csd-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
  }
  .vx-csd-pill.is-active {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
  }
  .vx-csd-pill.is-warning {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
  }
  .vx-radar-subbar {
    display: flex;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid #f1f5f9;
  }
  .vx-mini-label {
    display: block;
    font-size: 9.5px;
    color: #64748b;
    text-transform: uppercase;
  }
  .vx-mini-value {
    font-size: 11.5px;
    font-weight: 700;
    color: #334155;
  }
  .vx-mini-value.is-ok {
    color: #16a34a;
  }
  .vx-radar-audit-matrix {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
  }
  .vx-audit-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: #334155;
  }
  .vx-audit-check {
    color: #16a34a;
    font-weight: 800;
  }
  .vx-audit-stat.is-clean {
    color: #16a34a;
    margin-left: auto;
  }
  .vx-btn-accountant-wa {
    width: 100%;
    padding: 9px;
    border-radius: 10px;
    background: #10b981;
    border: 0;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
  }

  /* 2.6 Floating Sovereign Bottom Dock (Translucent Porcelain Glass) */
  .vx-hub-bottom-dock {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 920;
    padding: 6px 14px max(10px, env(safe-area-inset-bottom, 10px));
    display: flex;
    justify-content: center;
    pointer-events: auto;
  }
  .vx-dock-pill {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--vx-border, #e2e8f0);
    border-radius: 9999px;
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.08), 0 10px 30px rgba(15, 23, 42, 0.08);
    padding: 5px 8px;
    width: 100%;
    max-width: 440px;
    pointer-events: auto;
  }
  .vx-dock-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: none;
    border: 0;
    color: #64748b;
    padding: 4px 8px;
    cursor: pointer;
    line-height: 1.1;
    transition: color 0.15s ease;
  }
  .vx-dock-item.is-active {
    color: var(--vx-accent, #2563eb);
    font-weight: 700;
  }
  .vx-dock-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    color: currentColor;
  }
  .vx-dock-icon .vx-svg-ico {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2;
  }
  .vx-dock-item.is-active .vx-dock-icon .vx-svg-ico {
    stroke: var(--vx-accent, #2563eb);
  }
  .vx-dock-label {
    font-size: 9.5px;
    font-weight: 600;
    margin-top: 3px;
    color: currentColor;
  }
  .vx-dock-jewel {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--vx-accent, #2563eb), var(--vx-accent-d, #1d4ed8));
    border: 2px solid #ffffff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px var(--vx-accent-glow, rgba(37, 99, 235, 0.45));
    margin: -10px 4px 0;
    transition: transform 0.12s ease;
  }
  .vx-dock-jewel .vx-svg-ico {
    width: 22px;
    height: 22px;
    stroke: #ffffff;
    stroke-width: 2.6;
  }
  .vx-dock-jewel:active {
    transform: scale(0.94);
  }

  /* 2.7 Sovereign Action Tray (Executive Porcelain) */
  .vx-action-tray-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 980;
    background: #ffffff;
    border-top: 1px solid var(--vx-border, #e2e8f0);
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -16px 48px rgba(15, 23, 42, 0.16);
    padding: 10px 16px max(24px, env(safe-area-inset-bottom, 24px));
    transform: translateY(105%);
    transition: transform 340ms cubic-bezier(0.16, 1, 0.3, 1);
    visibility: hidden;
  }
  .vx-action-tray-sheet.is-open {
    transform: translateY(0);
    visibility: visible;
  }
  .vx-tray-grab-handle {
    display: flex;
    justify-content: center;
    padding: 6px 0 10px;
    cursor: grab;
    touch-action: none;
  }
  .vx-grab-bar {
    width: 36px;
    height: 4px;
    border-radius: 9999px;
    background: #cbd5e1;
  }
  .vx-tray-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
  }
  .vx-tray-title {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
  }
  .vx-tray-close {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #64748b;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 13px;
    cursor: pointer;
  }
  .vx-tray-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 60vh;
    overflow-y: auto;
  }
  .vx-group-label {
    font-size: 10.5px;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
  }
  .vx-group-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .vx-tray-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 6px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    text-decoration: none;
    color: #334155;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    transition: all 0.16s ease;
  }
  .vx-tray-tile:active {
    background: #f1f5f9;
    border-color: #cbd5e1;
    transform: scale(0.97);
  }
  .vx-tile-icon {
    font-size: 20px;
    margin-bottom: 4px;
  }
  .vx-tile-name {
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    color: #0f172a;
  }

  /* 2.8 Focus Backdrop & Toast */
  .vx-focus-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 940;
    opacity: 0;
    pointer-events: none;
    transition: opacity 280ms ease;
  }
  .vx-focus-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
  .vx-hub-toast {
    position: fixed;
    top: 56px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--vx-accent, #2563eb);
    border-radius: 9999px;
    padding: 8px 16px;
    color: var(--vx-ink, #0f172a);
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.12);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: all 220ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .vx-hub-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@media (max-width: 820px) {
  .vx-hub-bottom-dock {
    z-index: 10000 !important;
    pointer-events: auto !important;
  }
}