/* _content/DataTouch.Web/Components/Layout/MainLayout.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════════
   MainLayout Styles - Light Enterprise Theme + Electric Blue Navigation
   Palette: #183EEB · #040813 · #807DFE · #DCDEDD
   Cache-bust: 2026-04-27T02:15Z (forces new fingerprint after Liquid Glass deploy
   so browsers stop serving the OLD periwinkle-tinted scoped-CSS bundle).
   ══════════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════════
   GLOBAL OVERFLOW PREVENTION - Prevent any page from causing horizontal scroll
   ══════════════════════════════════════════════════════════════════════════════ */

html[b-s7ztdedxrb],
body[b-s7ztdedxrb] {
    max-width: 100vw;
    overflow-x: hidden;
}

.page[b-s7ztdedxrb] {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 100vw;
    overflow-x: hidden;
}

main[b-s7ztdedxrb] {
    flex: 1;
    max-width: 100%;
    overflow-x: hidden;
}

/* ══════════════════════════════════════════════════════════════════════════════
   PREMIUM HEADER — Dark navy bar
   ══════════════════════════════════════════════════════════════════════════════ */

.header-wrapper[b-s7ztdedxrb] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1100 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

.premium-header[b-s7ztdedxrb] {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    height: 56px !important;
    padding: 0 24px !important;
    /* Same vivid gradient as the desktop sidebar — unifies the brand-blue
       across all mobile/tablet UI surfaces (header, drawer, bottom-nav, sheet). */
    background: linear-gradient(180deg, #2456F5 0%, #183EEB 35%, #1A2F8E 75%, #0F1F66 100%) !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid rgba(220, 222, 221, 0.10) !important;
    box-shadow: 0 2px 12px rgba(24, 62, 235, 0.3) !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Hamburger Menu Button - Hidden on mobile (< 768px), shown on tablet */
.header-menu-btn[b-s7ztdedxrb] {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.header-menu-btn:hover[b-s7ztdedxrb] {
    background: rgba(220, 222, 221, 0.10);
}

.header-menu-btn:active[b-s7ztdedxrb] {
    background: rgba(220, 222, 221, 0.16);
}

/* Logo/Title - Shown on mobile, hidden on tablet/desktop */
.header-logo[b-s7ztdedxrb] {
    display: block;
    height: 32px;
    width: auto;
    filter: brightness(0) invert(1);
}

/* Spacer */
.header-spacer[b-s7ztdedxrb] {
    flex: 1;
}

/* User Container (Avatar + Popover) */
.header-user-container[b-s7ztdedxrb] {
    position: relative;
}

/* Avatar Button */
.header-avatar[b-s7ztdedxrb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: #183EEB;
    border: 2px solid rgba(220, 222, 221, 0.25);
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(24, 62, 235, 0.35);
}

.header-avatar:hover[b-s7ztdedxrb] {
    transform: scale(1.05);
    border-color: rgba(220, 222, 221, 0.45);
    box-shadow: 0 4px 12px rgba(24, 62, 235, 0.45);
}

.header-avatar--photo[b-s7ztdedxrb] {
    background: transparent;
    padding: 0;
    overflow: hidden;
}

.header-avatar-img[b-s7ztdedxrb] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* Login Button (for unauthenticated users) */
.header-login-btn[b-s7ztdedxrb] {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: #183EEB;
    border-radius: 8px;
    color: #FFFFFF;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.header-login-btn:hover[b-s7ztdedxrb] {
    background: #1234CC;
}

/* ══════════════════════════════════════════════════════════════════════════════
   USER POPOVER (Dropdown Menu) — dark navy surface
   ══════════════════════════════════════════════════════════════════════════════ */

.popover-overlay[b-s7ztdedxrb] {
    position: fixed;
    inset: 0;
    z-index: 1099;
    background: transparent;
}

.header-popover[b-s7ztdedxrb] {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 260px;
    padding: 16px;
    background: #183EEB;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(24, 62, 235, 0.5);
    z-index: 1200;
    animation: popoverSlideDown-b-s7ztdedxrb 0.2s ease-out;
}

/* Arrow pointing to avatar */
.popover-arrow[b-s7ztdedxrb] {
    position: absolute;
    top: -8px;
    right: 18px;
    width: 16px;
    height: 16px;
    background: #183EEB;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    transform: rotate(45deg);
}

/* Popover Rows */
.popover-row[b-s7ztdedxrb] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
}

.popover-row:not(:last-child)[b-s7ztdedxrb] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* Environment Info */
.popover-environment[b-s7ztdedxrb] {
    flex-wrap: wrap;
}

.env-label[b-s7ztdedxrb] {
    color: rgba(255, 255, 255, 0.70);
    font-size: 0.875rem;
}

.env-value[b-s7ztdedxrb] {
    color: #FFFFFF;
    font-size: 0.875rem;
    font-weight: 600;
}

/* Theme Toggle */
.popover-theme[b-s7ztdedxrb] {
    justify-content: space-between;
}

.theme-label[b-s7ztdedxrb] {
    color: rgba(255, 255, 255, 0.70);
    font-size: 0.875rem;
}

.theme-toggle[b-s7ztdedxrb] {
    display: flex;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    padding: 4px;
    gap: 4px;
}

.theme-btn[b-s7ztdedxrb] {
    padding: 6px 14px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.70);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.theme-btn:hover:not(.active)[b-s7ztdedxrb] {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.10);
}

.theme-btn.active[b-s7ztdedxrb] {
    background: #FFFFFF;
    color: #183EEB;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.25);
}

/* Logout Link */
.popover-logout[b-s7ztdedxrb] {
    color: rgba(255, 255, 255, 0.70);
    font-size: 0.875rem;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
    border-bottom: none !important;
}

.popover-logout:hover[b-s7ztdedxrb] {
    color: #FFFFFF;
}

/* ══════════════════════════════════════════════════════════════════════════════
   DRAWER - Electric Blue sidebar
   ══════════════════════════════════════════════════════════════════════════════ */

[b-s7ztdedxrb] .drawer-dark {
    /* Mobile/tablet drawer — same gradient stack as desktop .enterprise-sidebar
       (rim highlight + radial glow + thickness shadow + 4-stop blue→navy)
       so the drawer reads as the brand sidebar wherever it appears. */
    background-color: #183EEB !important;
    background-image:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.28) 0%,
            rgba(255, 255, 255, 0.08) 2px,
            transparent 10%
        ),
        radial-gradient(ellipse 180% 90% at 0% 0%,
            rgba(255, 255, 255, 0.18),
            transparent 60%
        ),
        radial-gradient(ellipse 140% 80% at 100% 100%,
            rgba(0, 0, 0, 0.12),
            transparent 55%
        ),
        linear-gradient(180deg,
            #2456F5 0%,
            #183EEB 35%,
            #1A2F8E 75%,
            #0F1F66 100%
        ) !important;
}

/* Logo inside drawer (mobile/tablet only) */
.drawer-logo-container[b-s7ztdedxrb] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 24px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.drawer-logo[b-s7ztdedxrb] {
    width: 180px;
    height: auto;
    filter: brightness(0) invert(1);
}

[b-s7ztdedxrb] .drawer-premium {
    display: none !important;
    margin-top: 56px !important;
    height: calc(100vh - 56px) !important;
    border-right: 1px solid rgba(220, 222, 221, 0.10);
    z-index: 1000 !important;
}

[b-s7ztdedxrb] .mud-drawer {
    z-index: 1000 !important;
}

[b-s7ztdedxrb] .mud-drawer-content {
    z-index: 1000 !important;
}

.sidebar[b-s7ztdedxrb] {
    background: linear-gradient(180deg, #2456F5 0%, #183EEB 35%, #1A2F8E 75%, #0F1F66 100%);
}

[b-s7ztdedxrb] .fluent-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    flex: 0 0 auto;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

[b-s7ztdedxrb] .fluent-icon-dashboard {
    -webkit-mask-image: url("/icons/fluent/dashboard-24-regular.svg");
    mask-image: url("/icons/fluent/dashboard-24-regular.svg");
}

[b-s7ztdedxrb] .fluent-icon-leads {
    -webkit-mask-image: url("/icons/fluent/leads-24-regular.svg");
    mask-image: url("/icons/fluent/leads-24-regular.svg");
}

[b-s7ztdedxrb] .fluent-icon-appointments {
    -webkit-mask-image: url("/icons/fluent/appointments-24-regular.svg");
    mask-image: url("/icons/fluent/appointments-24-regular.svg");
}

[b-s7ztdedxrb] .fluent-icon-quotes {
    -webkit-mask-image: url("/icons/fluent/quotes-24-regular.svg");
    mask-image: url("/icons/fluent/quotes-24-regular.svg");
}

[b-s7ztdedxrb] .fluent-icon-card {
    -webkit-mask-image: url("/icons/fluent/card-24-regular.svg");
    mask-image: url("/icons/fluent/card-24-regular.svg");
}

[b-s7ztdedxrb] .fluent-icon-templates {
    -webkit-mask-image: url("/icons/fluent/templates-24-regular.svg");
    mask-image: url("/icons/fluent/templates-24-regular.svg");
}

[b-s7ztdedxrb] .fluent-icon-analytics {
    -webkit-mask-image: url("/icons/fluent/analytics-24-regular.svg");
    mask-image: url("/icons/fluent/analytics-24-regular.svg");
}

[b-s7ztdedxrb] .fluent-icon-users {
    -webkit-mask-image: url("/icons/fluent/users-24-regular.svg");
    mask-image: url("/icons/fluent/users-24-regular.svg");
}

[b-s7ztdedxrb] .fluent-icon-roles {
    -webkit-mask-image: url("/icons/fluent/roles-24-regular.svg");
    mask-image: url("/icons/fluent/roles-24-regular.svg");
}

.enterprise-sidebar[b-s7ztdedxrb] {
    display: none;
}

/* Compact brand block — single horizontal row: [Logo] • PLAN.
   Logo image and bold-dot separator + plan label share the same row,
   vertically centred. Logo file (Logo.png / Isotipo.png) untouched —
   only render size changed (44 → 28px). */
.enterprise-sidebar-header[b-s7ztdedxrb] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

/* Bold middle-circle that splits the brand from the plan tier. Slightly
   pushed up on the baseline so it visually centres against the logo (which
   is taller than the plan text). */
.brand-separator[b-s7ztdedxrb] {
    color: rgba(255, 255, 255, 0.55);
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
    user-select: none;
    flex-shrink: 0;
}

.brand-plan[b-s7ztdedxrb] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1;
    user-select: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.enterprise-logo-link[b-s7ztdedxrb] {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    justify-content: flex-start;
    flex-shrink: 0;
}

.enterprise-logo[b-s7ztdedxrb] {
    display: block;
    height: 28px;          /* was 44px — compact size matching the design ref */
    width: auto;
    max-width: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
    transition: opacity 0.3s ease;
}

.enterprise-isotipo[b-s7ztdedxrb] {
    display: block;
    height: 28px;          /* was 40px — compact for the collapsed sidebar */
    width: 28px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    transition: opacity 0.3s ease;
}

/* Density tightened to match reference HTML — 10px outer padding +
   tight 1px gap between items so more nav rows fit per viewport, which is
   the reason the reference sidebar reads "taller and better". */
.enterprise-nav[b-s7ztdedxrb] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 10px 10px 14px;
    overflow-y: auto;
    flex: 1;
}

.enterprise-nav-item[b-s7ztdedxrb] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 0;            /* override — let padding drive height */
    padding: 7px 10px;        /* reference: 7px 10px */
    border-radius: 7px;       /* reference: 7px (was 12px — tighter looks crisper) */
    color: #FFFFFF;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.enterprise-nav-item:hover[b-s7ztdedxrb] {
    color: #FFFFFF;
    /* Softer hover so it sits well on translucent surface — strong tints
       look "muddy" against frosted glass. */
    background: rgba(255, 255, 255, 0.06);
}

.enterprise-nav-item.active[b-s7ztdedxrb] {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.10);
    /* No inset border any more — the new ::before pillar takes over the
       "this is the selected route" affordance (Spotify-pattern). */
    box-shadow: none;
}

/* Spotify-style left accent bar: 3px wide × 16px tall, rounded, anchored
   to the left edge of the active item. White (not brand-blue) because the
   surface is brand-blue translucent — a same-colour indicator would
   disappear. The faint white glow gives it the "tracer light" feel. */
.enterprise-nav-item.active[b-s7ztdedxrb]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    border-radius: 0 2px 2px 0;
    background: #FFFFFF;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.40);
}

/* Legacy <span class="enterprise-nav-indicator"> in the markup is now
   replaced by the .enterprise-nav-item.active::before pseudo-element above
   (3×16 left pillar). Hide the span to avoid double-bars on active items.
   Markup left intact for backwards-compat with anything that queries it. */
.enterprise-nav-indicator[b-s7ztdedxrb] {
    display: none;
}

/* Legacy active-state rule kept as no-op (pseudo-element handles it now). */
.enterprise-nav-item.active .enterprise-nav-indicator[b-s7ztdedxrb] {
    background: transparent;
}

.enterprise-nav-icon[b-s7ztdedxrb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
}

[b-s7ztdedxrb] .enterprise-nav-icon .fluent-icon {
    width: 16px;       /* reference: 16x16 (was 20x20 — tighter) */
    height: 16px;
}

.enterprise-nav-item.active .enterprise-nav-icon[b-s7ztdedxrb] {
    color: #FFFFFF;
}

.enterprise-nav-text[b-s7ztdedxrb] {
    font-size: 13px;    /* reference: 13px (was 14.7px — tighter, denser nav) */
    font-weight: 500;   /* reference: 500 */
    line-height: 1.25;
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SIDEBAR COLLAPSE BUTTON
   ══════════════════════════════════════════════════════════════════════════════ */

.sidebar-toggle[b-s7ztdedxrb] {
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 36px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 0 6px 6px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.50);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.sidebar-toggle:hover[b-s7ztdedxrb] {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.20);
    color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08),
                0 0 0 1px rgba(255, 255, 255, 0.05);
}

.sidebar-toggle:active[b-s7ztdedxrb] {
    transform: translateY(-50%) scale(0.96);
    background: rgba(255, 255, 255, 0.08);
}

.sidebar-toggle svg[b-s7ztdedxrb] {
    width: 14px;
    height: 14px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    stroke-width: 2.5;
}

/* ══════════════════════════════════════════════════════════════════════════════
   COLLAPSED STATE
   ══════════════════════════════════════════════════════════════════════════════ */

.enterprise-sidebar.collapsed[b-s7ztdedxrb] {
    width: 80px;
}

.enterprise-sidebar.collapsed .enterprise-sidebar-header[b-s7ztdedxrb] {
    width: 80px;
    padding: 14px 8px;
    overflow: hidden;
    justify-content: center;
}

/* Plan separator + label aren't rendered at all when sidebar is collapsed
   (the @if (!_sidebarCollapsed) branch in the markup short-circuits them),
   so no CSS-side hide rule needed. */
.enterprise-sidebar.collapsed .enterprise-logo-link[b-s7ztdedxrb] {
    justify-content: center;
    width: 100%;
}

.enterprise-sidebar.collapsed .enterprise-nav-item[b-s7ztdedxrb] {
    padding: 10px 12px;
    justify-content: center;
}

.enterprise-sidebar.collapsed .enterprise-nav-text[b-s7ztdedxrb] {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.enterprise-sidebar.collapsed .enterprise-nav-indicator[b-s7ztdedxrb] {
    display: none;
}

.enterprise-sidebar.collapsed .enterprise-nav-icon[b-s7ztdedxrb] {
    margin: 0;
}

[b-s7ztdedxrb] .mud-nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px;
}

[b-s7ztdedxrb] .mud-nav-link .drawer-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
    width: 20px;
    height: 20px;
}

[b-s7ztdedxrb] .mud-nav-link .drawer-nav-icon .fluent-icon {
    width: 20px;
    height: 20px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   MUDBLAZOR ROOT OVERRIDES — must let body's radial gradient bleed through.
   PRE-Liquid-Glass these rules slammed a solid `#F5F4F1` onto .mud-layout and
   .mud-main-content with !important. Problem: the sidebar's backdrop-filter
   then sampled flat bone, so blur(28px) of a solid color produces the same
   solid color, and any tint on top reads as flat/opaque — exactly the symptom
   the user reported ("cualquier color se verá opaco").
   Fix: bg = transparent so the body's brand-blue + lavender radial gradients
   show through and give backdrop-filter colour-rich substrate to refract.
   ══════════════════════════════════════════════════════════════════════════════ */

[b-s7ztdedxrb] .mud-layout {
    background: transparent !important;
}

[b-s7ztdedxrb] .mud-main-content {
    background: transparent !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   MAIN CONTENT - Canvas bone background, proper offset for fixed Header
   ══════════════════════════════════════════════════════════════════════════════ */

[b-s7ztdedxrb] .main-content-wrapper {
    padding-top: 72px !important;
    /* 56px header + 16px spacing */
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 24px;
    min-height: calc(100vh - 56px);
    /* Transparent so body's radial gradient shows through — the sidebar's
       backdrop-filter needs colour-rich substrate to refract. Old rule painted
       solid `#F5F4F1` here, occluding the gradient and forcing the sidebar's
       blur(28px) to sample a uniform colour (zero refraction). */
    background: transparent;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ══════════════════════════════════════════════════════════════════════════════
   LEGACY STYLES
   ══════════════════════════════════════════════════════════════════════════════ */

.top-row[b-s7ztdedxrb] {
    background-color: var(--dt-surface-2, #F3F4F8);
    border-bottom: 1px solid var(--dt-border-default, #DCDEDD);
    justify-content: flex-end;
    height: 64px;
    display: flex;
    align-items: center;
}

.top-row[b-s7ztdedxrb]  a,
.top-row[b-s7ztdedxrb]  .btn-link {
    white-space: nowrap;
    margin-left: 1.5rem;
    text-decoration: none;
}

.top-row[b-s7ztdedxrb]  a:hover,
.top-row[b-s7ztdedxrb]  .btn-link:hover {
    text-decoration: underline;
}

.top-row[b-s7ztdedxrb]  a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE STYLES - MOBILE (< 600px)
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 599.98px) {
    .header-wrapper[b-s7ztdedxrb] {
        padding: 0;
    }

    [b-s7ztdedxrb] .premium-header {
        height: 52px;
        padding: 0 14px;
        gap: 12px;
        border-radius: 0;
    }

    /* Logo hidden on mobile - shown only in drawer */

    .header-menu-btn[b-s7ztdedxrb] {
        width: 36px;
        height: 36px;
    }

    .header-menu-btn svg[b-s7ztdedxrb] {
        width: 20px;
        height: 20px;
    }

    .header-avatar[b-s7ztdedxrb] {
        width: 38px;
        height: 38px;
        font-size: 0.875rem;
    }

    /* Mobile popover - dropdown from avatar with smooth animation */
    .header-popover[b-s7ztdedxrb] {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        left: auto;
        bottom: auto;
        min-width: 260px;
        border-radius: 12px;
        padding: 16px;
        animation: popoverSlideDown-b-s7ztdedxrb 0.2s ease-out;
    }

    .popover-arrow[b-s7ztdedxrb] {
        display: block;
    }

    [b-s7ztdedxrb] .drawer-premium {
        margin-top: 52px !important;
        height: calc(100vh - 52px) !important;
    }

    [b-s7ztdedxrb] .main-content-wrapper {
        padding-top: 64px !important;
    }
}

/* Popover animation */
@keyframes popoverSlideDown-b-s7ztdedxrb {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE STYLES - MOBILE LARGE (600px - 767px)
   Same as mobile: Logo in header, no drawer, only bottom nav
   ══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 600px) and (max-width: 767.98px) {
    .header-wrapper[b-s7ztdedxrb] {
        padding: 0;
    }

    [b-s7ztdedxrb] .premium-header {
        height: 54px;
        padding: 0 20px;
        gap: 14px;
        border-radius: 0;
    }

    /* Keep logo visible (mobile behavior) */
    .header-logo[b-s7ztdedxrb] {
        height: 36px;
    }

    /* Keep hamburger hidden (mobile behavior) */
    .header-menu-btn[b-s7ztdedxrb] {
        display: none;
    }

    .header-avatar[b-s7ztdedxrb] {
        width: 42px;
        height: 42px;
    }

    /* Keep drawer hidden (mobile behavior) */
    [b-s7ztdedxrb] .drawer-premium {
        display: none !important;
    }

    [b-s7ztdedxrb] .main-content-wrapper {
        padding-top: 70px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE STYLES - DESKTOP (> 960px)
   ══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 960px) {
    .header-wrapper[b-s7ztdedxrb] {
        padding: 0;
    }

    [b-s7ztdedxrb] .premium-header {
        height: 56px;
        padding: 0 28px;
        border-radius: 0;
    }

    .page[b-s7ztdedxrb] {
        flex-direction: row;
    }

    .sidebar[b-s7ztdedxrb] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

}

/* ══════════════════════════════════════════════════════════════════════════════
   EXTRA WIDE SCREENS (> 1920px)
   ══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1920px) {
    .header-wrapper[b-s7ztdedxrb] {
        padding: 16px 32px;
    }

    [b-s7ztdedxrb] .premium-header {
        max-width: 1800px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   BLAZOR ERROR UI
   ══════════════════════════════════════════════════════════════════════════════ */

#blazor-error-ui[b-s7ztdedxrb] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-s7ztdedxrb] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SWIPE NAVIGATION - Instagram Stories-style module navigation
   ══════════════════════════════════════════════════════════════════════════════ */

/* Swipe wrapper */
.swipe-navigation-wrapper[b-s7ztdedxrb] {
    will-change: transform;
    touch-action: pan-y pinch-zoom;
    position: relative;
    min-height: 100%;
}

/* Peek containers - hidden on desktop */
.swipe-peek-container[b-s7ztdedxrb] {
    display: none;
}

/* Navigation dots - hidden on desktop */
.swipe-nav-indicators[b-s7ztdedxrb] {
    display: none;
}

/* Mobile styles for swipe navigation */
@media (max-width: 767.98px) {
    .swipe-navigation-wrapper[b-s7ztdedxrb] {
        transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
            opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .swipe-navigation-wrapper.swiping[b-s7ztdedxrb] {
        transition: none;
    }

    /* Peek containers */
    .swipe-peek-container[b-s7ztdedxrb] {
        display: flex;
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        width: 48px;
        height: 48px;
        align-items: center;
        justify-content: center;
        background: rgba(24, 62, 235, 0.12);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-radius: 50%;
        opacity: 0;
        transition: opacity 0.15s ease, transform 0.15s ease;
        z-index: 100;
        pointer-events: none;
    }

    .swipe-peek-left[b-s7ztdedxrb] {
        left: 8px;
    }

    .swipe-peek-right[b-s7ztdedxrb] {
        right: 8px;
    }

    .swipe-peek-icon[b-s7ztdedxrb] {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .swipe-peek-icon svg[b-s7ztdedxrb] {
        width: 24px;
        height: 24px;
        color: #807DFE;
    }

}

/* Extra small mobile */
@media (max-width: 599.98px) {
    .swipe-peek-container[b-s7ztdedxrb] {
        width: 40px;
        height: 40px;
    }

    .swipe-peek-icon svg[b-s7ztdedxrb] {
        width: 20px;
        height: 20px;
    }
}

@media (min-width: 768px) {
    .enterprise-sidebar[b-s7ztdedxrb] {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        width: 240px;
        height: 100dvh;
        /* SPOTIFY-INSPIRED VIVID GRADIENT (replaces the prior translucent
           backdrop-filter "Liquid Glass" approach — that requires rich colour
           content behind the sidebar to refract, which a CRM dashboard does
           not have, so the sidebar painted as flat grayish slate).
           Now: solid baked gradient with brand-blue at top, deepening to
           navy at the bottom, plus multi-layer specular highlights and an
           inner glow for true glass-like depth. No transparency = vivid,
           saturated colour every time, regardless of what's behind it. */
        background-color: #183EEB;
        /* Layer order paints top-to-bottom. Stack:
             1. Top edge highlight — 28% white in first 2px (rim of glass
                catching light).
             2. Top-left radial glow — soft 18% white ambient shine, mimics
                an off-screen specular highlight on a curved glass surface.
             3. Bottom-right radial — 12% black to suggest glass thickness.
             4. Vertical brand-blue → navy gradient — the core color depth. */
        background-image:
            linear-gradient(180deg,
                rgba(255, 255, 255, 0.28) 0%,
                rgba(255, 255, 255, 0.08) 2px,
                transparent 10%
            ),
            radial-gradient(ellipse 180% 90% at 0% 0%,
                rgba(255, 255, 255, 0.18),
                transparent 60%
            ),
            radial-gradient(ellipse 140% 80% at 100% 100%,
                rgba(0, 0, 0, 0.12),
                transparent 55%
            ),
            linear-gradient(180deg,
                #2456F5 0%,
                #183EEB 35%,
                #1A2F8E 75%,
                #0F1F66 100%
            );
        border-right: 1px solid rgba(255, 255, 255, 0.18);
        /* Inset highlights on the edges = light glancing off glass thickness. */
        box-shadow:
            inset 1px 0 0 rgba(255, 255, 255, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.22),
            inset -1px 0 0 rgba(0, 0, 0, 0.08),
            4px 0 24px rgba(15, 31, 102, 0.18);
        z-index: 1250;
        box-sizing: border-box;
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Premium header is hidden on desktop — its contents (NotificationBell + user
       avatar/menu) live inside the sidebar footer now (see .enterprise-sidebar-footer
       below). On mobile the header still renders normally; this only kicks in at
       768px+ so the responsive bottom-nav layout is untouched. */
    .header-wrapper[b-s7ztdedxrb] {
        display: none !important;
    }

    [b-s7ztdedxrb] .premium-header {
        height: 64px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 32px 0 24px !important;
        gap: 0 !important;
        background: transparent !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }

    .header-menu-btn[b-s7ztdedxrb],
    .header-logo[b-s7ztdedxrb] {
        display: none;
    }

    .header-spacer[b-s7ztdedxrb] {
        flex: 1;
    }

    .header-avatar[b-s7ztdedxrb] {
        width: 38px;
        height: 38px;
        border-color: rgba(24, 62, 235, 0.35);
        box-shadow: none;
    }

    .header-user-container[b-s7ztdedxrb] {
        margin-right: 4px;
    }

    [b-s7ztdedxrb] .mud-main-content.main-content-wrapper {
        /* Frosted-glass requires the page content to scroll BEHIND the sidebar.
           Padding-left (instead of margin-left) keeps the wrapper full-width
           — only the inside content area is offset by the sidebar's footprint,
           so backdrop-filter on .enterprise-sidebar has real content to blur. */
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-top: 24px !important;
        padding-left: calc(240px + 24px) !important;   /* 240px sidebar + 24px gutter */
        padding-right: 24px !important;
        padding-bottom: 32px !important;
        min-height: 100dvh;
        box-sizing: border-box;
        transition: padding-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Main content adjustment when sidebar is collapsed (80px column). */
    .layout-root.sidebar-collapsed[b-s7ztdedxrb]  .mud-main-content.main-content-wrapper {
        padding-left: calc(80px + 24px) !important;
    }

    .swipe-navigation-wrapper[b-s7ztdedxrb] {
        width: 100%;
        box-sizing: border-box;
        min-height: calc(100dvh - 64px);
    }

    [b-s7ztdedxrb] .drawer-premium,
    [b-s7ztdedxrb] .mud-drawer,
    [b-s7ztdedxrb] .mud-drawer-content,
    [b-s7ztdedxrb] .mud-overlay-drawer {
        display: none !important;
    }

    .mobile-bottom-nav[b-s7ztdedxrb],
    .more-sheet[b-s7ztdedxrb],
    .more-sheet-overlay[b-s7ztdedxrb],
    .swipe-peek-container[b-s7ztdedxrb],
    .drawer-logo-container[b-s7ztdedxrb] {
        display: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   SIDEBAR — Grouped nav sections + footer (NotificationBell + user card)

   The sidebar is desktop-only (rendered inside the `@media (min-width: 768px)`
   block above where `.enterprise-sidebar` is given a fixed 240px column).
   The footer pins to the bottom via `margin-top: auto` so the nav and the
   user card don't fight for space when the viewport is short.
   ══════════════════════════════════════════════════════════════════════════════ */

/* (.enterprise-nav itself is defined earlier in the file — flex: column, gap: 6px,
   padding: 14px 12px 22px, overflow-y: auto. We don't redefine it here; the
   structural styles below only target the nested groups + footer.) */

/* Reference: nav-group margin-top 14px, label padding 6px 10px, font-size 10.5px,
   letter-spacing .08em. Tighter than what we had. */
.enterprise-nav-group[b-s7ztdedxrb] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0;
}

.enterprise-nav-group + .enterprise-nav-group[b-s7ztdedxrb] {
    /* Hairline finer on glass — 0.08 was visible on solid blue; on frosted
       it competes with the inner gradient overlay, drop to 0.06. */
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 14px;
    padding-top: 8px;
}

.enterprise-nav-group__title[b-s7ztdedxrb] {
    margin: 0;
    padding: 6px 10px;        /* reference: 6px 10px */
    font-size: 10.5px;        /* reference: 10.5px */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;   /* reference: .08em (was .10em) */
    /* Softer on translucent surface — 50% reads heavy on frosted glass
       because the bg itself is partly transparent; 45% balances eye
       tracking with a quieter section label. */
    color: rgba(255, 255, 255, 0.45);
    user-select: none;
}

/* Collapsed state hides the group titles (only icons visible). */
.enterprise-sidebar.collapsed .enterprise-nav-group__title[b-s7ztdedxrb] {
    opacity: 0;
    height: 0;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
}

.enterprise-sidebar.collapsed .enterprise-nav-group + .enterprise-nav-group[b-s7ztdedxrb] {
    border-top-color: rgba(255, 255, 255, 0.12);
}

/* ── Sidebar footer ───────────────────────────────────────────────────────── */
.enterprise-sidebar-footer[b-s7ztdedxrb] {
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* NotificationBell wrapper — keeps the bell aligned to the right edge of the
   sidebar so it reads as an "actions" row above the user card. */
/* Bell row is now a full-width nav-item-styled button (icon + "Notificaciones"
   label, left-aligned to match .enterprise-nav-item above it). The wrapper
   only provides block layout — alignment lives inside the button itself. */
.sidebar-bell-wrap[b-s7ztdedxrb] {
    display: block;
    width: 100%;
}

/* Collapsed sidebar: hide the label, centre the icon. ::deep reaches into
   NotificationBell's scoped CSS because the button + label live there;
   MainLayout owns the .enterprise-sidebar.collapsed state class. */
.enterprise-sidebar.collapsed[b-s7ztdedxrb]  .header-notif-label {
    display: none;
}

.enterprise-sidebar.collapsed[b-s7ztdedxrb]  .header-notif-btn {
    justify-content: center;
    padding: 7px;
}

/* ── User card (clickable → /account) ─────────────────────────────────────── */
.sidebar-user-card[b-s7ztdedxrb] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    /* Drop the explicit fill — let the frosted parent show through.
       The 1px white border is the only visible "card" affordance; on
       glass that's enough to delineate without making the card a
       chip-on-a-chip. */
    background: transparent;
    color: #FFFFFF;
    text-decoration: none;
    transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
    border: 1px solid rgba(255, 255, 255, 0.10);
    min-width: 0; /* Required for text truncation in flex children */
}

.sidebar-user-card:hover[b-s7ztdedxrb] {
    /* Tiniest tint on hover — keeps the glass-y feel, no chip pop. */
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.20);
}

.sidebar-user-card:active[b-s7ztdedxrb] {
    transform: scale(0.98);
}

.sidebar-user-card.active[b-s7ztdedxrb] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.30);
}

.sidebar-user-card__avatar[b-s7ztdedxrb] {
    width: 30px;       /* reference: 30x30 (was 36) */
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #807DFE 0%, #183EEB 100%);
    color: #FFFFFF;
    font-size: 11px;       /* reference: 11px on 30x30 avatar */
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.sidebar-user-card__avatar img[b-s7ztdedxrb] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sidebar-user-card__info[b-s7ztdedxrb] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.sidebar-user-card__name[b-s7ztdedxrb] {
    font-size: 12.5px;   /* reference: 12.5px (was 13) */
    font-weight: 600;
    color: #FFFFFF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}

.sidebar-user-card__role[b-s7ztdedxrb] {
    font-size: 11.5px;   /* reference: 11.5px */
    color: rgba(255, 255, 255, 0.65);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}

/* Collapsed sidebar: hide labels + role line, center the avatar. */
.enterprise-sidebar.collapsed .sidebar-user-card[b-s7ztdedxrb] {
    justify-content: center;
    padding: 6px;
}

.enterprise-sidebar.collapsed .sidebar-user-card__info[b-s7ztdedxrb] {
    display: none;
}

/* The collapse-toggle is absolutely positioned (right: -10px) by the rule
   defined earlier in this file — no override needed inside the footer. */
/* _content/DataTouch.Web/Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-1x9s3euhit] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(220, 222, 221, 0.15);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28220, 222, 221, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(220, 222, 221, 0.08);
}

.navbar-toggler:checked[b-1x9s3euhit] {
    background-color: rgba(220, 222, 221, 0.20);
}

.top-row[b-1x9s3euhit] {
    min-height: 3.5rem;
    background-color: rgba(24, 62, 235, 0.6);
}

.navbar-brand[b-1x9s3euhit] {
    font-size: 1.1rem;
}

.bi[b-1x9s3euhit] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-1x9s3euhit] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-1x9s3euhit] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-1x9s3euhit] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-1x9s3euhit] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-1x9s3euhit] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-1x9s3euhit] {
        padding-bottom: 1rem;
    }

    .nav-item[b-1x9s3euhit]  .nav-link {
        color: #FFFFFF;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-1x9s3euhit]  a.active {
    background-color: rgba(255, 255, 255, 0.18);
    color: #FFFFFF;
}

.nav-item[b-1x9s3euhit]  .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.10);
    color: #FFFFFF;
}

.nav-scrollable[b-1x9s3euhit] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-1x9s3euhit] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-1x9s3euhit] {
        display: none;
    }

    .nav-scrollable[b-1x9s3euhit] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* _content/DataTouch.Web/Components/Pages/Account.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════════
   Account / Mi Cuenta — premium clean self-service profile page.
   Layout matches the user mockup: hero card on top, then a 2-col grid with
   Seguridad + Sesión side-by-side. Stacks to a single column on tablet/mobile.
   All colors / spacing / radii flow through design-tokens v2.1.0.
   ══════════════════════════════════════════════════════════════════════════════ */

.account-page[b-qottt5zsl1] {
    max-width: 1080px;
    margin: 0 auto;
    padding: var(--dt-space-6) var(--dt-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--dt-space-6);
}

.account-page__header[b-qottt5zsl1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* CRM-wide standard heading typography — mirror of ModulePageHeader rules so
   pages that don't use the shared component still align to the same visual
   rhythm (22px title / 14px subtitle, with mobile drops to 20/13). */
.account-page__title[b-qottt5zsl1] {
    margin: 0;
    font-size: var(--dt-font-2xl);     /* 22px — CRM standard */
    font-weight: var(--dt-font-weight-bold);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--dt-text-primary);
}

.account-page__subtitle[b-qottt5zsl1] {
    margin: 0;
    font-size: var(--dt-font-base);    /* 14px */
    line-height: 1.45;
    color: var(--dt-text-muted);
}

.account-loading[b-qottt5zsl1] {
    padding: var(--dt-space-8);
    text-align: center;
    color: var(--dt-text-muted);
    font-size: var(--dt-font-sm);
}

/* ══════════════════════════════════════════════════════════════════════════════
   HERO / PROFILE CARD
   ══════════════════════════════════════════════════════════════════════════════ */

.account-hero[b-qottt5zsl1] {
    background: var(--dt-surface-1);
    border: 1px solid var(--dt-border-default);
    border-radius: 20px;
    padding: var(--dt-space-6);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--dt-space-6);
    box-shadow: 0 1px 3px rgba(1, 3, 62, 0.04), 0 4px 16px rgba(1, 3, 62, 0.06);
}

.account-hero__avatar[b-qottt5zsl1] {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--dt-primary-500) 0%, var(--dt-accent-500) 100%);
    color: var(--dt-surface-1);
    font-size: 32px;
    font-weight: var(--dt-font-weight-bold);
    letter-spacing: 0.02em;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(1, 3, 62, 0.10);
}

.account-hero__avatar img[b-qottt5zsl1] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.account-hero__info[b-qottt5zsl1] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.account-hero__name[b-qottt5zsl1] {
    margin: 0;
    font-size: 28px;
    font-weight: var(--dt-font-weight-bold);
    color: var(--dt-text-primary);
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.account-hero__email[b-qottt5zsl1] {
    margin: 0;
    font-size: var(--dt-font-base);
    color: var(--dt-text-muted);
}

.account-hero__chips[b-qottt5zsl1] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dt-space-2);
    margin-top: var(--dt-space-2);
    align-items: center;
}

/* Subtle chips with brand-blue tint, pill shape, icon + label. */
.account-chip[b-qottt5zsl1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 10px;
    border-radius: 999px;
    background: rgba(24, 62, 235, 0.08);
    color: var(--dt-primary-500);
    font-size: var(--dt-font-sm);
    font-weight: var(--dt-font-weight-semibold);
    border: 1px solid rgba(24, 62, 235, 0.15);
}

.account-chip svg[b-qottt5zsl1] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.account-chip--org[b-qottt5zsl1] {
    background: rgba(24, 62, 235, 0.05);
    color: var(--dt-text-secondary);
    border-color: var(--dt-border-default);
}

.account-hero__actions[b-qottt5zsl1] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--dt-space-2);
}

.account-hero__hint[b-qottt5zsl1] {
    margin: 0;
    font-size: var(--dt-font-xs);
    color: var(--dt-text-muted);
    text-align: right;
}

/* ══════════════════════════════════════════════════════════════════════════════
   2-COL GRID (Seguridad + Sesión)
   ══════════════════════════════════════════════════════════════════════════════ */

.account-grid[b-qottt5zsl1] {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: var(--dt-space-5);
    /* `stretch` (the default) makes both cards take the row's full height so
       Seguridad and Sesión share the same baseline regardless of how much
       content each has. The shorter card distributes its slack with
       margin-top:auto on its primary CTA (see .account-info-list below). */
    align-items: stretch;
}

.account-card[b-qottt5zsl1] {
    background: var(--dt-surface-1);
    border: 1px solid var(--dt-border-default);
    border-radius: 20px;
    padding: var(--dt-space-6);
    box-shadow: 0 1px 3px rgba(1, 3, 62, 0.04), 0 4px 16px rgba(1, 3, 62, 0.06);
    display: flex;
    flex-direction: column;
    gap: var(--dt-space-5);
}

.account-card__head[b-qottt5zsl1] {
    display: flex;
    align-items: center;
    gap: var(--dt-space-4);
}

/* Round bubble with the section's icon — light blue tint to match the mockup. */
.account-card__icon-bubble[b-qottt5zsl1] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(24, 62, 235, 0.10);
    color: var(--dt-primary-500);
    flex-shrink: 0;
    border: 1px solid rgba(24, 62, 235, 0.18);
}

.account-card__icon-bubble svg[b-qottt5zsl1] {
    width: 22px;
    height: 22px;
}

.account-card__title[b-qottt5zsl1] {
    margin: 0 0 2px;
    font-size: var(--dt-font-xl);
    font-weight: var(--dt-font-weight-semibold);
    color: var(--dt-text-primary);
}

.account-card__subtitle[b-qottt5zsl1] {
    margin: 0;
    font-size: var(--dt-font-sm);
    color: var(--dt-text-muted);
    line-height: 1.4;
}

.account-card__divider[b-qottt5zsl1] {
    height: 1px;
    background: var(--dt-border-default);
    margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   FORM (Seguridad)
   ══════════════════════════════════════════════════════════════════════════════ */

.account-form[b-qottt5zsl1] {
    display: flex;
    flex-direction: column;
    gap: var(--dt-space-4);
}

.account-field[b-qottt5zsl1] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.account-field label[b-qottt5zsl1] {
    font-size: var(--dt-font-sm);
    font-weight: var(--dt-font-weight-medium);
    color: var(--dt-text-secondary);
}

/* Wrapper centralises the prefix lock icon + suffix eye toggle. The input stretches
   to fill the remaining width and gets left/right padding to clear the icons. */
.account-input-wrap[b-qottt5zsl1] {
    position: relative;
    display: flex;
    align-items: center;
}

.account-input-wrap input[b-qottt5zsl1] {
    width: 100%;
    padding: 12px 44px 12px 44px;
    background: var(--dt-surface-1);
    border: 1px solid var(--dt-border-default);
    border-radius: var(--dt-radius-md);
    color: var(--dt-text-primary);
    font-size: var(--dt-font-base);
    font-family: inherit;
    outline: none;
    transition: all var(--dt-transition-fast);
    box-sizing: border-box;
}

.account-input-wrap input:hover[b-qottt5zsl1] {
    border-color: var(--dt-border-strong);
}

.account-input-wrap input:focus[b-qottt5zsl1] {
    border-color: var(--dt-primary-500);
    box-shadow: 0 0 0 3px rgba(24, 62, 235, 0.12);
}

.account-input-prefix[b-qottt5zsl1] {
    position: absolute;
    left: 14px;
    color: var(--dt-text-muted);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.account-input-prefix svg[b-qottt5zsl1] {
    width: 16px;
    height: 16px;
}

.account-input-toggle[b-qottt5zsl1] {
    position: absolute;
    right: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--dt-text-muted);
    cursor: pointer;
    border-radius: var(--dt-radius-sm);
    padding: 0;
    transition: color var(--dt-transition-fast), background var(--dt-transition-fast);
}

.account-input-toggle:hover[b-qottt5zsl1] {
    color: var(--dt-text-primary);
    background: var(--dt-surface-2);
}

.account-input-toggle svg[b-qottt5zsl1] {
    width: 16px;
    height: 16px;
}

/* ── Strength meter ───────────────────────────────────────────────────────── */
.account-strength-row[b-qottt5zsl1] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--dt-space-3);
    flex-wrap: wrap;
}

.account-strength-row__hint[b-qottt5zsl1] {
    font-size: var(--dt-font-xs);
    color: var(--dt-text-muted);
}

.account-strength[b-qottt5zsl1] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    min-width: 200px;
}

.account-strength__bars[b-qottt5zsl1] {
    display: flex;
    gap: 4px;
    width: 100%;
}

.account-strength__bar[b-qottt5zsl1] {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--dt-border-default);
    transition: background var(--dt-transition-fast);
}

.account-strength__bar.active.strength-weak[b-qottt5zsl1]    { background: var(--dt-danger);  }
.account-strength__bar.active.strength-medium[b-qottt5zsl1]  { background: var(--dt-primary-500); }
.account-strength__bar.active.strength-strong[b-qottt5zsl1]  { background: var(--dt-success); }

.account-strength__label[b-qottt5zsl1] {
    font-size: var(--dt-font-xs);
    color: var(--dt-text-muted);
    align-self: flex-end;
}

.account-strength__label.strength-weak    strong[b-qottt5zsl1] { color: var(--dt-danger); }
.account-strength__label.strength-medium  strong[b-qottt5zsl1] { color: var(--dt-warning); }
.account-strength__label.strength-strong  strong[b-qottt5zsl1] { color: var(--dt-success); }

/* ── Inline messages ──────────────────────────────────────────────────────── */
.account-msg[b-qottt5zsl1] {
    margin: 0;
    padding: var(--dt-space-3) var(--dt-space-4);
    border-radius: var(--dt-radius-md);
    font-size: var(--dt-font-sm);
    line-height: 1.4;
}

.account-msg--error[b-qottt5zsl1] {
    background: var(--dt-danger-bg);
    color: var(--dt-danger);
    border: 1px solid rgba(220, 38, 38, 0.25);
}

.account-msg--success[b-qottt5zsl1] {
    background: var(--dt-success-bg);
    color: var(--dt-success);
    border: 1px solid rgba(22, 163, 74, 0.25);
}

.account-form__actions[b-qottt5zsl1] {
    display: flex;
    justify-content: center;
    gap: var(--dt-space-3);
    margin-top: var(--dt-space-2);
}

/* ══════════════════════════════════════════════════════════════════════════════
   SESSION INFO LIST
   ══════════════════════════════════════════════════════════════════════════════ */

.account-info-list[b-qottt5zsl1] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    /* Grow to absorb extra height when the Sesión card stretches to match
       Seguridad's height — keeps the "Cerrar sesión" button anchored at the
       bottom edge instead of floating below the last info row. */
    flex: 1;
}

.account-info-row[b-qottt5zsl1] {
    display: flex;
    align-items: flex-start;
    gap: var(--dt-space-4);
    padding: var(--dt-space-3) 0;
    border-bottom: 1px solid var(--dt-border-default);
}

.account-info-row:last-child[b-qottt5zsl1] {
    border-bottom: none;
}

.account-info-row__icon[b-qottt5zsl1] {
    color: var(--dt-text-muted);
    flex-shrink: 0;
    margin-top: 2px;
}

.account-info-row__icon svg[b-qottt5zsl1] {
    width: 20px;
    height: 20px;
}

.account-info-row__body[b-qottt5zsl1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.account-info-row__label[b-qottt5zsl1] {
    font-size: var(--dt-font-sm);
    color: var(--dt-text-muted);
}

.account-info-row__value[b-qottt5zsl1] {
    font-size: var(--dt-font-base);
    color: var(--dt-text-primary);
    font-weight: var(--dt-font-weight-semibold);
    word-break: break-all;
}

/* ══════════════════════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════════════════════ */

.account-btn[b-qottt5zsl1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dt-space-2);
    padding: 12px var(--dt-space-5);
    border-radius: var(--dt-radius-md);
    font-size: var(--dt-font-base);
    font-weight: var(--dt-font-weight-semibold);
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all var(--dt-transition-fast);
    white-space: nowrap;
    box-sizing: border-box;
}

.account-btn svg[b-qottt5zsl1] {
    width: 16px;
    height: 16px;
}

.account-btn--primary[b-qottt5zsl1] {
    background: var(--dt-primary-500);
    color: var(--dt-surface-1);
    box-shadow: 0 2px 8px rgba(24, 62, 235, 0.20);
}

.account-btn--primary:hover:not(:disabled)[b-qottt5zsl1] {
    background: var(--dt-primary-600);
    box-shadow: 0 4px 12px rgba(24, 62, 235, 0.28);
}

.account-btn--primary:disabled[b-qottt5zsl1] {
    background: var(--dt-surface-2);
    color: var(--dt-text-muted);
    box-shadow: none;
    cursor: not-allowed;
    border-color: var(--dt-border-default);
}

.account-btn--outline-primary[b-qottt5zsl1] {
    background: var(--dt-surface-1);
    color: var(--dt-primary-500);
    border-color: var(--dt-primary-500);
}

.account-btn--outline-primary:hover[b-qottt5zsl1] {
    background: rgba(24, 62, 235, 0.06);
}

.account-btn--outline-danger[b-qottt5zsl1] {
    background: var(--dt-surface-1);
    color: var(--dt-danger);
    border-color: var(--dt-danger);
}

.account-btn--outline-danger:hover[b-qottt5zsl1] {
    background: var(--dt-danger-bg);
}

.account-btn--block[b-qottt5zsl1] {
    width: 100%;
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════════ */

/* Tablet (≤1024px): stack the 2-col grid to a single column. */
@media (max-width: 1024px) {
    .account-grid[b-qottt5zsl1] {
        grid-template-columns: 1fr;
    }
}

/* Tablet hero: actions wrap below the info column. */
@media (max-width: 900px) {
    .account-hero[b-qottt5zsl1] {
        grid-template-columns: auto 1fr;
    }
    .account-hero__actions[b-qottt5zsl1] {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .account-hero__hint[b-qottt5zsl1] {
        text-align: left;
    }
}

/* Mobile (≤600px): single column, centered hero, smaller paddings. */
@media (max-width: 600px) {
    .account-page[b-qottt5zsl1] {
        padding: var(--dt-space-4) var(--dt-space-3);
        gap: var(--dt-space-4);
    }
    .account-page__title[b-qottt5zsl1] {
        font-size: 20px;       /* CRM standard mobile drop */
    }
    .account-page__subtitle[b-qottt5zsl1] {
        font-size: var(--dt-font-sm);  /* 13px */
    }
    .account-hero[b-qottt5zsl1],
    .account-card[b-qottt5zsl1] {
        padding: var(--dt-space-4);
        border-radius: 16px;
        gap: var(--dt-space-4);
    }
    .account-hero[b-qottt5zsl1] {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .account-hero__avatar[b-qottt5zsl1] {
        justify-self: center;
        width: 88px;
        height: 88px;
        font-size: 26px;
    }
    .account-hero__info[b-qottt5zsl1] {
        align-items: center;
    }
    .account-hero__name[b-qottt5zsl1] {
        font-size: 22px;
    }
    .account-hero__chips[b-qottt5zsl1] {
        justify-content: center;
    }
    .account-hero__actions[b-qottt5zsl1] {
        flex-direction: column;
        align-items: stretch;
    }
    .account-hero__actions .account-btn[b-qottt5zsl1] {
        width: 100%;
    }
    .account-hero__hint[b-qottt5zsl1] {
        text-align: center;
    }
    .account-strength[b-qottt5zsl1] {
        align-items: stretch;
        min-width: 0;
        width: 100%;
    }
    .account-strength__label[b-qottt5zsl1] {
        align-self: flex-start;
    }
    .account-form__actions .account-btn[b-qottt5zsl1] {
        width: 100%;
    }
}
/* _content/DataTouch.Web/Components/Pages/Dashboard.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════════
   Dashboard Page Styles - Light Enterprise Theme with Dark Sidebar
   Pixel-perfect implementation matching mockup
   ══════════════════════════════════════════════════════════════════════════════ */

/* Reference HTML: page padding 24px 28px 40px (was 24px 32px). Tighter
   horizontal gutter so widgets get more breathing width on narrower viewports. */
.dashboard-page[b-uj8r836w4y] {
    padding: 24px 28px 40px;
    margin: 0;
    width: 100%;
    max-width: 100%;
    min-height: 100dvh;
    box-sizing: border-box;
    background: transparent;
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE-ONLY ELEMENTS - Hidden on desktop
   ══════════════════════════════════════════════════════════════════════════════ */

.mobile-header[b-uj8r836w4y],
.mobile-bottom-nav[b-uj8r836w4y],
.mobile-chart-toggle[b-uj8r836w4y],
.locations-section-header[b-uj8r836w4y] {
    display: none;
}


/* HEADER moved to DashboardWidgets/GlobalFilterBar.razor + GlobalFilterBar.razor.css (Plan 03 Task 5) */

/* LOADING STATE moved to Components/Shared/Primitives/LoadingOverlay.razor (Plan 03 Task 14) */

/* KPI SECTION moved to DashboardWidgets/KpisRow.razor + KpisRow.razor.css (Plan 03 Task 3) */

/* Allow grid children to shrink below intrinsic content width
   (.kpi-track variant lives in the child's scoped CSS) */
.main-row > *[b-uj8r836w4y],
.insights-row > *[b-uj8r836w4y] {
    min-width: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   MAIN ROW (Chart + Locations)
   ══════════════════════════════════════════════════════════════════════════════ */

/* Tightened gap 16 → 12 and section margin 20 → 14 (2026-04-27 dimension
   harmonization). Combined with the dt-card border-radius pull (16→12) and
   shadow refinement, the panels read as a cohesive grid instead of floating
   isolated tiles. */
.main-row[b-uj8r836w4y] {
    display: grid;
    grid-template-columns: 1.65fr 1fr;   /* reference: 1.65fr 1fr (was 2fr 1fr) */
    gap: 12px;
    margin-bottom: 14px;
}

/* ::deep is required because the .panel / .panel-header / .panel-title /
   .panel-actions elements are now rendered by child widget components
   (GeographicIntelligencePanel, InteractionsVsLeadsPanel, etc.) after
   Plan 03's structural refactor, so they carry a different scope attribute
   than this file. Without ::deep these rules would not match → panels would
   render with 0 padding and headers would collapse against the card edge. */
/* Panel body padding 16 → 14 (matches the harmonized .analytics-widget
   and .dt-kpi paddings). Border-radius matches .dt-card's new 12px so
   the inner panel surface aligns with the outer .dt-card it lives in. */
.dashboard-page[b-uj8r836w4y]  .panel {
    padding: 14px;
    border-radius: 12px;
}

/* Keep all dashboard widgets at the same hierarchy/surface level.
   Note: .locations-panel split off into GeographicIntelligencePanel.razor.css
   (Plan 03 Task 8 — Lesson 4: scoped CSS comma-rule split).
   .smart-summary-panel split off into SmartSummaryPanel.razor.css
   (Plan 03 Task 9 — same lesson).
   .links-panel split off into CardInteractionsPanel.razor.css
   (Plan 03 Task 10 — same lesson).
   .high-intent-panel split off into HighIntentPanel.razor.css
   (Plan 03 Task 11 — same lesson). */

[b-uj8r836w4y] .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;       /* reference: 14px between head and body */
}

[b-uj8r836w4y] .panel-title {
    font-size: 13.5px;         /* reference: card-head h3 is 13.5px (was 16) */
    font-weight: 600;
    color: var(--dt-text-primary, #01033E);
    margin: 0;
    letter-spacing: -0.005em;  /* reference */
}

[b-uj8r836w4y] .panel-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative; /* Permite que dropdowns se anclen aquí */
}

/* Used inside SmartSummaryPanel + ChannelConversionPanel — needs ::deep
   for the same reason as .panel-header above. */
[b-uj8r836w4y] .section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--dt-text-secondary, #3E4188);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 16px 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   CHART PANEL
   ══════════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════════
   CHART PANEL - PREMIUM REDESIGN
   ══════════════════════════════════════════════════════════════════════════════ */

.chart-panel[b-uj8r836w4y] {
    display: flex;
    flex-direction: column;
}

.chart-header[b-uj8r836w4y] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.chart-title[b-uj8r836w4y] {
    font-size: 16px;
    font-weight: 600;
    color: var(--dt-text-primary, #01033E);
    margin: 0 0 4px 0;
}

.chart-subtitle[b-uj8r836w4y] {
    font-size: 12px;
    color: #6B6E8F;
}

.chart-toggle[b-uj8r836w4y] {
    display: flex;
    background: var(--dt-bg-subtle, #F3F4F8);
    border-radius: var(--dt-radius-full, 9999px);
    padding: 2px;
    border: 1px solid var(--dt-border-default, #DCDEDD);
}

.toggle-btn[b-uj8r836w4y] {
    padding: 4px 12px;
    border: none;
    background: transparent;
    color: var(--dt-text-secondary, #3E4188);
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--dt-radius-full, 9999px);
    cursor: pointer;
    transition: all var(--dt-transition-fast, 150ms ease);
}

.toggle-btn:hover[b-uj8r836w4y] {
    color: var(--dt-text-primary, #01033E);
}

.toggle-btn.active[b-uj8r836w4y] {
    background: var(--dt-surface-3, #ECEDF3);
    color: var(--dt-text-primary, #01033E);
    box-shadow: 0 1px 2px rgba(1, 3, 62, 0.08);
}

/* KPI Bar Inline */
.chart-kpi-bar[b-uj8r836w4y] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding: 12px 16px;
    background: var(--dt-bg-subtle, #F7F8FC);
    border-radius: var(--dt-radius-md, 8px);
    border: 1px solid var(--dt-border-subtle, #ECEDF3);
}

.chart-kpi[b-uj8r836w4y] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kpi-divider[b-uj8r836w4y] {
    color: var(--dt-border-default, #DCDEDD);
    opacity: 0.5;
}

.kpi-label[b-uj8r836w4y] {
    font-size: 13px;
    color: var(--dt-text-secondary, #3E4188);
    font-weight: 500;
}

.kpi-value[b-uj8r836w4y] {
    font-size: 15px;
    font-weight: 600;
    color: var(--dt-text-primary, #01033E);
    font-feature-settings: "tnum";
}

.kpi-delta[b-uj8r836w4y] {
    font-size: 12px;
    font-weight: 500;
}

.kpi-delta.positive[b-uj8r836w4y] {
    color: var(--dt-success, #16A34A);
}

.kpi-delta.negative[b-uj8r836w4y] {
    color: var(--dt-danger, #DC2626);
}

/* Chart SVG Area */
.chart-container[b-uj8r836w4y] {
    position: relative;
    margin: 0 -10px;
    /* Slight overflow correction */
}

.chart-svg[b-uj8r836w4y] {
    width: 100%;
    height: auto;
    overflow: visible;
}

.grid-line[b-uj8r836w4y] {
    stroke: #01033E;
    stroke-width: 1;
    opacity: 0.06;
}

.axis-label[b-uj8r836w4y] {
    font-size: 11px;
    fill: #3E4188;
    /* Navy secondary on light */
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

.axis-label.y-label-left[b-uj8r836w4y] {
    text-anchor: end;
}

.axis-label.y-label-right[b-uj8r836w4y] {
    text-anchor: start;
}

.axis-label.x-label[b-uj8r836w4y] {
    text-anchor: middle;
}

/* Series Lines */
.chart-line[b-uj8r836w4y] {
    transition: all 0.3s ease;
    filter: drop-shadow(0 4px 6px rgba(1, 3, 62, 0.12));
}

.chart-line.interactions[b-uj8r836w4y] {
    stroke: var(--dt-primary-500, #183EEB);
}

.chart-line.leads[b-uj8r836w4y] {
    stroke: var(--dt-secondary-400, #807DFE);
}

/* Interactive Elements */
.hover-zone[b-uj8r836w4y] {
    cursor: crosshair;
    pointer-events: all;
    fill: transparent;
}

.hover-zone:hover[b-uj8r836w4y] {
    fill: rgba(1, 3, 62, 0.02);
}

.data-point[b-uj8r836w4y] {
    transition: r 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    stroke: var(--dt-bg-surface-2, #FFFFFF);
    /* Match card bg for ring effect */
    stroke-width: 2px;
}

.data-point.interactions-point[b-uj8r836w4y] {
    fill: var(--dt-primary-500, #183EEB);
}

.data-point.leads-point[b-uj8r836w4y] {
    fill: var(--dt-secondary-400, #807DFE);
}


/* Premium Floating Tooltip */
.chart-tooltip[b-uj8r836w4y] {
    position: absolute;
    top: 20px;
    transform: translateX(-50%);
    background: var(--dt-bg-card, #FFFFFF);
    border: 1px solid var(--dt-border-accent, #C0C1C8);
    border-radius: var(--dt-radius-md, 8px);
    padding: 12px;
    box-shadow: 0 10px 25px -5px rgba(1, 3, 62, 0.12);
    z-index: 20;
    min-width: 160px;
    pointer-events: none;
    animation: tooltip-fade-b-uj8r836w4y 0.2s ease-out;
}

@keyframes tooltip-fade-b-uj8r836w4y {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.tooltip-date[b-uj8r836w4y] {
    font-size: 12px;
    color: #01033E;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--dt-border-default, #DCDEDD);
    font-weight: 500;
}

.tooltip-row[b-uj8r836w4y] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 13px;
}

.tooltip-dot[b-uj8r836w4y] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.tooltip-dot.interactions[b-uj8r836w4y] {
    background: var(--dt-primary-500, #183EEB);
}

.tooltip-dot.leads[b-uj8r836w4y] {
    background: var(--dt-secondary-400, #807DFE);
}

.tooltip-label[b-uj8r836w4y] {
    flex: 1;
    color: var(--dt-text-secondary, #3E4188);
}

.tooltip-value[b-uj8r836w4y] {
    font-weight: 600;
    color: var(--dt-text-primary, #01033E);
}

.tooltip-conversion[b-uj8r836w4y] {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px dashed var(--dt-border-default, #DCDEDD);
    font-size: 12px;
    color: var(--dt-text-secondary, #3E4188);
    text-align: right;
}

.tooltip-conversion strong[b-uj8r836w4y] {
    color: var(--dt-text-primary, #01033E);
}

/* Footer & Legend */
.chart-footer[b-uj8r836w4y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--dt-border-subtle, #ECEDF3);
}

.chart-legend[b-uj8r836w4y] {
    display: flex;
    gap: 16px;
}

.legend-item[b-uj8r836w4y] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #01033E;
    font-weight: 500;
}

.legend-dot[b-uj8r836w4y] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.legend-dot.interactions[b-uj8r836w4y] {
    background: var(--dt-primary-500, #183EEB);
}

.legend-dot.leads[b-uj8r836w4y] {
    background: var(--dt-secondary-400, #807DFE);
}

.chart-insights[b-uj8r836w4y] {
    font-size: 11px;
    color: #6B6E8F;
}

.chart-insights strong[b-uj8r836w4y] {
    color: #01033E;
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ANALYTICS WIDGET base/header/KPI/footer-strip rules moved to
   Components/Pages/DashboardWidgets/InteractionsVsLeadsPanel.razor.css
   (Plan 03 Task 7).
   The legacy `.analytics-segmented`, `.seg-btn`, `.analytics-legend`,
   `.legend-item`, `.legend-dot`, and `.analytics-chart` styles below are
   not used by current markup but kept as inert stylesheet residue.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Segmented Control (legacy) */
.analytics-segmented[b-uj8r836w4y] {
    display: flex;
    background: #F3F4F8;
    border-radius: 24px;
    padding: 4px;
    border: 1px solid #DCDEDD;
}

.seg-btn[b-uj8r836w4y] {
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: #6B6E8F;
    font-size: 13px;
    font-weight: 500;
    border-radius: 20px;
    cursor: pointer;
    transition: all 150ms ease;
    white-space: nowrap;
}

.seg-btn:hover[b-uj8r836w4y] {
    color: #01033E;
}

.seg-btn.active[b-uj8r836w4y] {
    background: linear-gradient(135deg, #183EEB, #040813);
    color: #fff;
    box-shadow: 0 2px 8px rgba(24, 62, 235, 0.25);
}

/* Legend (legacy, not used by current markup) */
.analytics-legend[b-uj8r836w4y] {
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
}

.analytics-legend.bottom-centered[b-uj8r836w4y] {
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 0;
    padding-top: 16px;
    border-top: 1px solid #ECEDF3;
}

.legend-item[b-uj8r836w4y] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #3E4188;
}

.legend-dot[b-uj8r836w4y] {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.legend-dot.interactions[b-uj8r836w4y] {
    background: linear-gradient(135deg, #183EEB, #040813);
}

.legend-dot.leads[b-uj8r836w4y] {
    background: linear-gradient(135deg, #807DFE, #183EEB);
}

/* Chart Container (legacy) */
.analytics-chart[b-uj8r836w4y] {
    position: relative;
    margin: 0 -10px;
}

.analytics-svg[b-uj8r836w4y] {
    width: 100%;
    height: auto;
    overflow: visible;
}

/* ─── HTML Labels (outside SVG - NEVER stretch) ─── */
.chart-y-labels[b-uj8r836w4y] {
    position: absolute;
    /* Grid lines en SVG: y=20 (top) a y=220 (bottom) de viewBox 280 = 7.1% a 78.6% */
    top: 7%;
    bottom: 21%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
    z-index: 5;
}

.chart-y-labels.left[b-uj8r836w4y] {
    left: 0;
    width: 50px;
    align-items: flex-end;
    padding-right: 10px;
}

.chart-y-labels.right[b-uj8r836w4y] {
    right: 0;
    width: 50px;
    align-items: flex-start;
    padding-left: 10px;
}

.chart-y-labels .y-label[b-uj8r836w4y] {
    font-size: 11px;
    font-family: 'Inter', -apple-system, sans-serif;
    font-weight: 500;
    line-height: 1;
}

.chart-y-labels.left .y-label[b-uj8r836w4y] {
    color: rgba(24, 62, 235, 0.85);
}

.chart-y-labels.right .y-label[b-uj8r836w4y] {
    color: rgba(128, 125, 254, 0.85);
}

.chart-x-labels[b-uj8r836w4y] {
    position: absolute;
    bottom: 3%;
    /* Align with bars area: 8.75% left (70/800) to 91.25% right (730/800) */
    left: 8.5%;
    right: 8.5%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    pointer-events: none;
    z-index: 5;
}

.chart-x-labels .x-label[b-uj8r836w4y] {
    font-size: 12px;
    font-family: 'Inter', -apple-system, sans-serif;
    font-weight: 600;
    color: rgba(1, 3, 62, 0.7);
    text-transform: uppercase;
}

.chart-gridline[b-uj8r836w4y] {
    stroke: rgba(1, 3, 62, 0.06);
    stroke-width: 1;
}

.axis-label[b-uj8r836w4y] {
    font-size: 11px;
    font-family: 'Inter', -apple-system, sans-serif;
    font-weight: 500;
    fill: rgba(1, 3, 62, 0.45);
}

.axis-label.y-left[b-uj8r836w4y] {
    text-anchor: end;
}

.axis-label.y-right[b-uj8r836w4y] {
    text-anchor: start;
}

.axis-label.x-label[b-uj8r836w4y] {
    text-anchor: middle;
}

.axis-label-vertical[b-uj8r836w4y] {
    font-size: 10px;
    font-family: 'Inter', -apple-system, sans-serif;
    font-weight: 500;
    fill: rgba(24, 62, 235, 0.7);
    letter-spacing: 0.5px;
}

.chart-bar[b-uj8r836w4y] {
    transition: all 200ms ease;
    filter: drop-shadow(0 2px 6px rgba(1, 3, 62, 0.12));
}

/* Glow effect for interactions bar (brand blue) */
.chart-bar[fill*="interactionsBarGradient"][b-uj8r836w4y] {
    filter: drop-shadow(0 4px 12px rgba(24, 62, 235, 0.25));
}

/* Glow effect for leads bar (lavender) */
.chart-bar[fill*="leadsBarGradient"][b-uj8r836w4y] {
    filter: drop-shadow(0 4px 12px rgba(128, 125, 254, 0.3));
}

.chart-bar.hovered[b-uj8r836w4y] {
    filter: drop-shadow(0 6px 16px rgba(24, 62, 235, 0.35)) brightness(1.1);
}

.bar-hover-zone[b-uj8r836w4y] {
    cursor: crosshair;
    pointer-events: all;
}

/* Premium Tooltip */
.analytics-tooltip[b-uj8r836w4y] {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    background: #FFFFFF;
    border: 1px solid rgba(24, 62, 235, 0.2);
    border-radius: 10px;
    padding: 12px 16px;
    min-width: 160px;
    z-index: 50;
    pointer-events: none;
    box-shadow: 0 16px 48px rgba(1, 3, 62, 0.12);
    backdrop-filter: blur(12px);
    animation: tooltipFadeIn-b-uj8r836w4y 150ms ease-out;
}

@keyframes tooltipFadeIn-b-uj8r836w4y {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.tooltip-header[b-uj8r836w4y] {
    font-size: 13px;
    font-weight: 600;
    color: #01033E;
    margin-bottom: 4px;
}

.tooltip-subheader[b-uj8r836w4y] {
    font-size: 11px;
    color: #6B6E8F;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #DCDEDD;
}

.tooltip-occurrences[b-uj8r836w4y] {
    color: #6B6E8F;
    font-weight: 400;
}

.tooltip-row[b-uj8r836w4y] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 13px;
}

.tooltip-dot[b-uj8r836w4y] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tooltip-dot.interactions[b-uj8r836w4y] {
    background: linear-gradient(135deg, #183EEB, #040813);
}

.tooltip-dot.leads[b-uj8r836w4y] {
    background: linear-gradient(135deg, #807DFE, #183EEB);
}

.tooltip-label[b-uj8r836w4y] {
    color: #3E4188;
}

.tooltip-footer[b-uj8r836w4y] {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed #DCDEDD;
    font-size: 12px;
    color: #6B6E8F;
    text-align: right;
}

.tooltip-footer strong[b-uj8r836w4y] {
    color: #01033E;
}

/* `.analytics-footer` (legacy, no markup) and `.footer-insights` rules moved
   with the rest of the Interacciones vs. Leads CSS to
   Components/Pages/DashboardWidgets/InteractionsVsLeadsPanel.razor.css
   (Plan 03 Task 7).

   States: Loading / Empty / Error rules moved to
   Components/Pages/DashboardWidgets/WidgetStateView.razor.css (Plan 03 Task 6c). */

/* ══════════════════════════════════════════════════════════════════════════════
   BAR CHART WIDGET - Premium Redesign (Legacy - keeping for backwards compat)
   ══════════════════════════════════════════════════════════════════════════════ */

.bar-chart-widget[b-uj8r836w4y] {
    display: flex;
    flex-direction: column;
}

/* Header with Pill Tabs */
.bar-chart-header[b-uj8r836w4y] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 16px;
}

.bar-chart-header-left[b-uj8r836w4y] {
    flex: 1;
    min-width: 0;
}

.bar-chart-title[b-uj8r836w4y] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--dt-text-primary, #01033E);
    margin: 0 0 4px 0;
}

.bar-chart-subtitle[b-uj8r836w4y] {
    font-size: 12px;
    color: #6B6E8F;
}

/* Pill/Segmented Tabs */
.bar-chart-tabs[b-uj8r836w4y] {
    display: flex;
    background: #F3F4F8;
    border-radius: 20px;
    padding: 3px;
    border: 1px solid #DCDEDD;
    flex-shrink: 0;
}

.bar-tab[b-uj8r836w4y] {
    padding: 6px 16px;
    border: none;
    background: transparent;
    color: #6B6E8F;
    font-size: 13px;
    font-weight: 500;
    border-radius: 17px;
    cursor: pointer;
    transition: all 150ms ease;
    min-width: 60px;
    text-align: center;
}

.bar-tab:hover[b-uj8r836w4y] {
    color: #01033E;
}

.bar-tab.active[b-uj8r836w4y] {
    background: linear-gradient(135deg, #183EEB, #040813);
    color: #fff;
    box-shadow: 0 2px 8px rgba(24, 62, 235, 0.25);
}

/* Mobile toggle - hidden on desktop */
.bar-chart-mobile-tabs[b-uj8r836w4y] {
    display: none;
}

/* KPI Cards Row */
.bar-chart-kpis[b-uj8r836w4y] {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.bar-kpi-card[b-uj8r836w4y] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 100px;
}

.bar-kpi-label[b-uj8r836w4y] {
    font-size: 12px;
    color: #6B6E8F;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bar-kpi-value[b-uj8r836w4y] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--dt-text-primary, #01033E);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.bar-kpi-delta[b-uj8r836w4y] {
    font-size: 13px;
    font-weight: 500;
}

.bar-kpi-delta.positive[b-uj8r836w4y] {
    color: var(--dt-success, #16A34A);
}

.bar-kpi-delta.negative[b-uj8r836w4y] {
    color: var(--dt-danger, #DC2626);
}

/* Bar Chart Container */
.bar-chart-container[b-uj8r836w4y] {
    position: relative;
    margin: 0 -10px;
}

.bar-chart-svg[b-uj8r836w4y] {
    width: 100%;
    height: auto;
    overflow: visible;
}

/* Grid and Axis */
.bar-grid-line[b-uj8r836w4y] {
    stroke: rgba(1, 3, 62, 0.06);
    stroke-width: 1;
}

.bar-axis-label[b-uj8r836w4y] {
    font-size: 11px;
    fill: rgba(1, 3, 62, 0.45);
    font-family: 'Inter', -apple-system, sans-serif;
    font-weight: 500;
}

.bar-y-label[b-uj8r836w4y] {
    text-anchor: end;
}

.bar-x-label[b-uj8r836w4y] {
    text-anchor: middle;
}

/* Bar Rectangles */
.bar-rect[b-uj8r836w4y] {
    transition: all 200ms ease;
    filter: drop-shadow(0 2px 4px rgba(1, 3, 62, 0.10));
}

.bar-rect.hovered[b-uj8r836w4y] {
    filter: drop-shadow(0 4px 12px rgba(1, 3, 62, 0.15)) brightness(1.05);
}

.bar-hover-zone[b-uj8r836w4y] {
    cursor: crosshair;
    pointer-events: all;
}

.bar-hover-zone:hover[b-uj8r836w4y] {
    fill: rgba(1, 3, 62, 0.02);
}

/* Bar Chart Tooltip */
.bar-chart-tooltip[b-uj8r836w4y] {
    position: absolute;
    top: 20px;
    transform: translateX(-50%);
    background: #FFFFFF;
    border: 1px solid #C0C1C8;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 10px 25px -5px rgba(1, 3, 62, 0.12);
    z-index: 20;
    min-width: 160px;
    pointer-events: none;
    animation: bar-tooltip-fade-b-uj8r836w4y 200ms ease-out;
    backdrop-filter: blur(8px);
}

@keyframes bar-tooltip-fade-b-uj8r836w4y {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.bar-tooltip-date[b-uj8r836w4y] {
    font-size: 12px;
    color: #01033E;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #DCDEDD;
    font-weight: 500;
}

.bar-tooltip-row[b-uj8r836w4y] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 13px;
}

.bar-tooltip-dot[b-uj8r836w4y] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.bar-tooltip-dot.interactions[b-uj8r836w4y] {
    background: linear-gradient(135deg, #183EEB, #040813);
}

.bar-tooltip-dot.leads[b-uj8r836w4y] {
    background: linear-gradient(135deg, #807DFE, #183EEB);
}

.bar-tooltip-label[b-uj8r836w4y] {
    flex: 1;
    color: #3E4188;
}

.bar-tooltip-value[b-uj8r836w4y] {
    font-weight: 600;
    color: #01033E;
}

.bar-tooltip-conversion[b-uj8r836w4y] {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px dashed #DCDEDD;
    font-size: 12px;
    color: #6B6E8F;
    text-align: right;
}

.bar-tooltip-conversion strong[b-uj8r836w4y] {
    color: #01033E;
}

/* Footer and Legend */
.bar-chart-footer[b-uj8r836w4y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #ECEDF3;
}

.bar-chart-legend[b-uj8r836w4y] {
    display: flex;
    gap: 20px;
}

.bar-legend-item[b-uj8r836w4y] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #01033E;
    font-weight: 500;
}

.bar-legend-dot[b-uj8r836w4y] {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.bar-legend-dot.interactions[b-uj8r836w4y] {
    background: linear-gradient(135deg, #183EEB, #040813);
}

.bar-legend-dot.leads[b-uj8r836w4y] {
    background: linear-gradient(135deg, #807DFE, #183EEB);
}

.bar-chart-insights[b-uj8r836w4y] {
    font-size: 12px;
    color: #6B6E8F;
}

.bar-chart-insights strong[b-uj8r836w4y] {
    color: #01033E;
    font-weight: 600;
}


/* Sort Controls */
.sort-controls[b-uj8r836w4y] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.sort-label[b-uj8r836w4y] {
    font-size: 12px;
    color: var(--dt-text-muted, #6B6E8F);
}

.sort-btn[b-uj8r836w4y] {
    padding: 4px 10px;
    border: 1px solid var(--dt-border-default, #233044);
    background: transparent;
    color: var(--dt-text-secondary, #6B6E8F);
    font-size: 11px;
    border-radius: var(--dt-radius-sm, 4px);
    cursor: pointer;
    transition: all var(--dt-transition-fast, 150ms ease);
}

.sort-btn:hover[b-uj8r836w4y] {
    border-color: var(--dt-primary-500, #183EEB);
    color: var(--dt-text-primary, #01033E);
}

.sort-btn.active[b-uj8r836w4y] {
    background: var(--dt-primary-600, #183EEB);
    border-color: var(--dt-primary-600, #183EEB);
    color: white;
}

/* ══════════════════════════════════════════════════════════════════════════════
   INSIGHTS ROW (3 Panels)
   ══════════════════════════════════════════════════════════════════════════════ */

.insights-row[b-uj8r836w4y] {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 20px;
}

/* `.smart-summary-panel`, `.ss-*`, `.chip-{perf,channel,friction,action}` and
   the `@keyframes ss-shimmer` animation moved to
   Components/Pages/DashboardWidgets/SmartSummaryPanel.razor.css
   (Plan 03 Task 9). */

/* `.analytics-empty-state` and friends moved to
   Components/Pages/DashboardWidgets/InteractionsVsLeadsPanel.razor.css
   (Plan 03 Task 7). */

/* ══════════════════════════════════════════════════════════════════════════════
   TOP LINKS PANEL
   ══════════════════════════════════════════════════════════════════════════════ */

.links-table[b-uj8r836w4y] {
    margin-bottom: 16px;
}

.links-header[b-uj8r836w4y] {
    display: grid;
    grid-template-columns: 1.5fr 0.8fr 1.2fr 0.8fr;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--dt-border-default, #DCDEDD);
    font-size: 11px;
    font-weight: 600;
    color: var(--dt-text-muted, #6B6E8F);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.link-row[b-uj8r836w4y] {
    display: grid;
    grid-template-columns: 1.5fr 0.8fr 1.2fr 0.8fr;
    gap: 8px;
    padding: 10px 0;
    align-items: center;
    border-bottom: 1px solid rgba(220, 222, 221, 0.7);
}

.col-link[b-uj8r836w4y] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Icon badge for links - circular container */
.link-icon-badge[b-uj8r836w4y] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--dt-transition-fast, 150ms ease);
}

.link-name[b-uj8r836w4y] {
    font-size: 14px;
    font-weight: 500;
    color: var(--dt-text-primary, #01033E);
}

.col-clicks[b-uj8r836w4y] {
    font-size: 14px;
    font-weight: 600;
    color: var(--dt-text-primary, #01033E);
}

.col-conversion[b-uj8r836w4y] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.conversion-bar[b-uj8r836w4y] {
    flex: 1;
    height: 6px;
    background: var(--dt-bg-subtle, #F3F4F8);
    border-radius: 3px;
    overflow: hidden;
}

.bar-fill[b-uj8r836w4y] {
    height: 100%;
    background: linear-gradient(90deg, var(--dt-primary-600, #183EEB), var(--dt-primary-400, #807DFE));
    border-radius: 3px;
    transition: width var(--dt-transition-normal, 250ms ease);
}

.conversion-value[b-uj8r836w4y] {
    font-size: 13px;
    font-weight: 600;
    color: var(--dt-text-primary, #01033E);
    min-width: 40px;
    text-align: right;
}

.col-trend[b-uj8r836w4y] {
    font-size: 12px;
    font-weight: 600;
}

.col-trend.positive[b-uj8r836w4y] {
    color: var(--dt-success, #16A34A);
}

.col-trend.negative[b-uj8r836w4y] {
    color: var(--dt-danger, #DC2626);
}

.col-trend.na[b-uj8r836w4y] {
    color: var(--dt-text-muted, #9ca3af);
}

.links-category-header[b-uj8r836w4y] {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dt-text-muted, #9ca3af);
    padding: 8px 0 4px 0;
    margin-top: 4px;
    border-top: 1px solid var(--dt-border-subtle, rgba(0,0,0,0.06));
}

.links-category-header:first-of-type[b-uj8r836w4y] {
    border-top: none;
    margin-top: 0;
}

.col-conversion--na[b-uj8r836w4y] {
    color: var(--dt-text-muted, #9ca3af);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
}

/* Links Actions */
.links-actions[b-uj8r836w4y] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.action-btn[b-uj8r836w4y] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid var(--dt-border-default, #233044);
    background: transparent;
    color: var(--dt-text-secondary, #6B6E8F);
    font-size: 12px;
    border-radius: var(--dt-radius-md, 8px);
    cursor: pointer;
    transition: all var(--dt-transition-fast, 150ms ease);
}

.action-btn:hover[b-uj8r836w4y] {
    border-color: var(--dt-primary-500, #183EEB);
    color: var(--dt-text-primary, #01033E);
    background: rgba(24, 62, 235, 0.05);
}

.action-icon[b-uj8r836w4y] {
    font-size: 14px;
}

/* Links Footer */
.links-footer[b-uj8r836w4y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--dt-border-default, #DCDEDD);
}

.sync-status[b-uj8r836w4y] {
    font-size: 12px;
    color: var(--dt-success, #16A34A);
}

.view-details-btn[b-uj8r836w4y] {
    padding: 8px 16px;
    border: none;
    background: var(--dt-primary-600, #183EEB);
    color: white;
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--dt-radius-md, 8px);
    cursor: pointer;
    transition: background var(--dt-transition-fast, 150ms ease);
}

.view-details-btn:hover[b-uj8r836w4y] {
    background: var(--dt-primary-500, #183EEB);
    filter: brightness(1.1);
}

/* `.high-intent-panel`, `.high-intent-summary`, `.hi-*`, `.activity-*`,
   `.top-visitors*`, `.tv-*` and the panel's drawer-aware grid responsive
   rules moved into HighIntentPanel.razor.css (Plan 03 Task 11). */

/* `.sort-dropdown` is an orphan rule (no live consumers); preserved as-is
   to keep this task pure-relocation. Drop in a follow-up cleanup if needed. */
.sort-dropdown[b-uj8r836w4y] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--dt-text-secondary, #6B6E8F);
    cursor: pointer;
}

.sort-dropdown svg[b-uj8r836w4y] {
    width: 14px;
    height: 14px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   DRAWER-OPEN GRID REFLOW
   When the sidebar drawer is open on desktop (~240px push), the content area
   shrinks but CSS @media still measures the viewport. These compound selectors
   fire ~240px earlier than normal breakpoints to reflow the grid properly.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Viewport ≤1660px + drawer open → insights goes to 2 columns (normal: ≤1400px) */
@media (max-width: 1660px) {
    .drawer-open .insights-row[b-uj8r836w4y] {
        grid-template-columns: 1fr 1fr;
    }

    /* `.drawer-open .high-intent-panel` moved to HighIntentPanel.razor.css (Plan 03 Task 11) */
    /* `.drawer-open .ss-card-pair` moved to SmartSummaryPanel.razor.css (Plan 03 Task 9) */
}

/* Viewport ≤1536px + drawer open → KPIs go to 2 columns (normal: ≤1200px).
   .kpi-track now lives inside the KpisRow child component, so we use ::deep
   to reach across the scoped-CSS boundary. */
@media (max-width: 1536px) {
    .drawer-open[b-uj8r836w4y]  .kpi-track {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Viewport ≤1440px + drawer open → main-row stacks to 1 column (normal: ≤1200px) */
@media (max-width: 1440px) {
    .drawer-open .main-row[b-uj8r836w4y] {
        grid-template-columns: 1fr;
    }
}

/* Viewport ≤1140px + drawer open → insights goes to 1 column (normal: ≤900px) */
@media (max-width: 1140px) {
    .drawer-open .insights-row[b-uj8r836w4y] {
        grid-template-columns: 1fr;
    }

    /* `.drawer-open .high-intent-panel` moved to HighIntentPanel.razor.css (Plan 03 Task 11) */
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE DESIGN
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1400px) {
    .insights-row[b-uj8r836w4y] {
        grid-template-columns: 1fr 1fr;
    }

    /* `.high-intent-panel { grid-column: span 2 }` moved to HighIntentPanel.razor.css (Plan 03 Task 11) */
    /* `.ss-card-pair` responsive moved to SmartSummaryPanel.razor.css (Plan 03 Task 9) */
}

/* Content-driven: sidebar 252px + padding 48px → content at 1350px ≈ 1050px, still 2-col */
@media (max-width: 1350px) {
    .main-row[b-uj8r836w4y] {
        grid-template-columns: 1fr;
    }
}

/* @media (max-width: 1200px) .kpi-track moved to KpisRow.razor.css (Plan 03 Task 3) */

@media (max-width: 900px) {
    .insights-row[b-uj8r836w4y] {
        grid-template-columns: 1fr;
    }

    /* `.high-intent-panel { grid-column: span 1 }` moved to HighIntentPanel.razor.css (Plan 03 Task 11) */

    .dashboard-page[b-uj8r836w4y] {
        padding: 16px;
    }
}

@media (max-width: 600px) {
    /* ═══════════════════════════════════════════════════════════════════════
       MOBILE FINTECH REDESIGN - App Shell Structure
       ═══════════════════════════════════════════════════════════════════════ */

    /* Hide desktop elements on mobile. ::deep so the rule reaches
       GlobalFilterBar's <div class="desktop-only"> wrapper, which carries
       a different scope attribute after the Plan 03 extraction. */
    [b-uj8r836w4y] .desktop-only {
        display: none !important;
    }

    /* Dashboard page adjustments for mobile app feel */
    .dashboard-page[b-uj8r836w4y] {
        padding: 0;
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
        /* Space for bottom nav */
        background: transparent;
        margin-left: -16px;
        margin-right: -16px;
        width: calc(100% + 32px);
        max-width: 100vw;
        min-height: 100dvh;
        overflow-x: hidden !important;
    }

    /* Main Row - Stack widgets vertically on mobile */
    .main-row[b-uj8r836w4y] {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
    }

    /* ═══════════════════════════════════════════════════════════════════════
       MOBILE HEADER - Fintech Style
       ═══════════════════════════════════════════════════════════════════════ */
    .mobile-header[b-uj8r836w4y] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        position: sticky;
        top: 0;
        z-index: 100;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(24, 62, 235, 0.08);
    }

    .mobile-user[b-uj8r836w4y] {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .mobile-avatar[b-uj8r836w4y] {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: linear-gradient(135deg, #183EEB 0%, #040813 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 600;
        color: white;
        box-shadow: 0 0 20px rgba(24, 62, 235, 0.2);
    }

    .mobile-user-info[b-uj8r836w4y] {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .mobile-user-name[b-uj8r836w4y] {
        font-size: 14px;
        font-weight: 600;
        color: #01033E;
    }

    .mobile-user-role[b-uj8r836w4y] {
        font-size: 11px;
        color: #6B6E8F;
    }

    .mobile-actions[b-uj8r836w4y] {
        display: flex;
        gap: 8px;
    }

    .mobile-action-btn[b-uj8r836w4y] {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background: #F3F4F8;
        border: 1px solid rgba(24, 62, 235, 0.12);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .mobile-action-btn svg[b-uj8r836w4y] {
        width: 20px;
        height: 20px;
        color: #6B6E8F;
    }

    .mobile-action-btn:active[b-uj8r836w4y] {
        background: rgba(24, 62, 235, 0.12);
    }

    /* KPI SECTION mobile carousel rules moved to KpisRow.razor.css (Plan 03 Task 3) */

    /* ═══════════════════════════════════════════════════════════════════════
       MAIN ROW - Stack vertically
       ═══════════════════════════════════════════════════════════════════════ */
    .main-row[b-uj8r836w4y] {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 0 8px;
        margin-bottom: 12px;
    }

    /* Chart Panel Mobile */
    .chart-panel[b-uj8r836w4y] {
        padding: 16px !important;
        border-radius: 20px !important;
        background: #FFFFFF !important;
        border: 1px solid #DCDEDD !important;
        border-top: 1px solid #C0C1C8 !important;
        box-shadow:
            0 2px 4px rgba(1, 3, 62, 0.06),
            0 8px 24px rgba(1, 3, 62, 0.08),
            0 20px 48px rgba(1, 3, 62, 0.05),
            0 0 0 0.5px rgba(1, 3, 62, 0.04) !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 420px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Header: Title and subtitle only, toggles hidden here */
    .chart-header[b-uj8r836w4y] {
        flex-direction: column !important;
        gap: 4px !important;
        margin-bottom: 12px !important;
    }

    .chart-header-left[b-uj8r836w4y] {
        width: 100% !important;
    }

    .chart-title[b-uj8r836w4y] {
        font-size: 18px !important;
        font-weight: 600 !important;
        margin-bottom: 2px !important;
    }

    .chart-subtitle[b-uj8r836w4y] {
        font-size: 12px !important;
        color: #6B6E8F !important;
    }

    /* Hide toggle in header - will show it after KPIs */
    .chart-header .chart-toggle[b-uj8r836w4y] {
        display: none !important;
    }

    /* KPI Bar - VERTICAL STACK - Each KPI as full-width card */
    .chart-kpi-bar[b-uj8r836w4y] {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 0 !important;
        margin-bottom: 12px !important;
        background: transparent !important;
        border: none !important;
        overflow: visible !important;
    }

    .chart-kpi[b-uj8r836w4y] {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 12px 14px !important;
        background: #F7F8FC !important;
        border-radius: 10px !important;
        border: 1px solid rgba(24, 62, 235, 0.08) !important;
        gap: 8px !important;
        box-sizing: border-box !important;
    }

    /* Hide 3rd KPI (Conversión) on mobile - it's the 5th child (after 2 KPIs and 2 dividers) */
    .chart-kpi-bar>.chart-kpi:nth-of-type(3)[b-uj8r836w4y] {
        display: none !important;
    }

    /* Hide chart-kpi dividers on mobile (not the KPI card dividers) */
    .chart-kpi .kpi-divider[b-uj8r836w4y],
    .chart-kpi-bar .kpi-divider[b-uj8r836w4y] {
        display: none !important;
    }

    .chart-kpi .kpi-label[b-uj8r836w4y] {
        font-size: 13px !important;
        color: #6B6E8F !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    .chart-kpi .kpi-value[b-uj8r836w4y] {
        font-size: 20px !important;
        font-weight: 700 !important;
        color: #01033E !important;
        white-space: nowrap !important;
        margin-left: auto !important;
    }

    .chart-kpi .kpi-delta[b-uj8r836w4y] {
        font-size: 12px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    .chart-kpi .kpi-delta.positive[b-uj8r836w4y] {
        color: #16A34A !important;
    }

    .chart-kpi .kpi-delta.negative[b-uj8r836w4y] {
        color: #DC2626 !important;
    }

    /* Toggle buttons - Create a separate row after KPI bar via ::after pseudo or JavaScript */
    /* Since we can't move DOM, we need to add a mobile toggle in HTML or use different approach */

    /* Chart container - Fixed height for stable layout */
    .chart-container[b-uj8r836w4y] {
        height: 160px !important;
        min-height: 160px !important;
        overflow: visible !important;
        margin: 0 !important;
        position: relative !important;
    }

    .chart-svg[b-uj8r836w4y] {
        width: 100% !important;
        height: 160px !important;
        max-height: 160px !important;
    }

    .chart-footer[b-uj8r836w4y] {
        flex-direction: row !important;
        justify-content: flex-start !important;
        gap: 16px !important;
        margin-top: 8px !important;
    }

    .chart-legend[b-uj8r836w4y] {
        font-size: 12px !important;
    }

    .legend-dot[b-uj8r836w4y] {
        width: 8px !important;
        height: 8px !important;
    }

    /* Mobile Chart Toggle - Centered pill buttons */
    .mobile-chart-toggle[b-uj8r836w4y] {
        display: none !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0 !important;
        margin-bottom: 16px !important;
        background: #F3F4F8 !important;
        border-radius: 999px !important;
        padding: 4px !important;
        width: fit-content !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .mobile-chart-toggle .toggle-btn[b-uj8r836w4y] {
        padding: 8px 16px !important;
        border: none !important;
        background: transparent !important;
        color: #6B6E8F !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        border-radius: 999px !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }

    .mobile-chart-toggle .toggle-btn:hover[b-uj8r836w4y] {
        color: #01033E !important;
    }

    .mobile-chart-toggle .toggle-btn.active[b-uj8r836w4y] {
        background: #183EEB !important;
        color: #FFFFFF !important;
    }

    /* ═══════════════════════════════════════════════════════════════════════
       ANALYTICS WIDGET — mobile rules moved to
       Components/Pages/DashboardWidgets/InteractionsVsLeadsPanel.razor.css
       (Plan 03 Task 7). Only legacy/orphan chart rules remain below.
       ═══════════════════════════════════════════════════════════════════════ */

    /* ─── Chart Container (legacy) ─── */
    .analytics-chart[b-uj8r836w4y] {
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        overflow: visible !important;
        /* CRITICAL: Fixed height for mobile so dynamic viewBox can fill it */
        min-height: 320px !important;
        height: clamp(280px, 45vh, 400px) !important;
    }

    .analytics-svg[b-uj8r836w4y] {
        width: 100% !important;
        /* CRITICAL: height:100% so SVG fills container, not auto */
        height: 100% !important;
        display: block !important;
    }

    /* Axis labels - ensure readability */
    .axis-label[b-uj8r836w4y] {
        font-size: 11px !important;
    }

    .axis-label.y-left[b-uj8r836w4y] {
        fill: rgba(24, 62, 235, 0.8) !important;
    }

    .axis-label.y-right[b-uj8r836w4y] {
        fill: rgba(128, 125, 254, 0.8) !important;
    }

    .axis-label.x-label[b-uj8r836w4y] {
        fill: rgba(1, 3, 62, 0.7) !important;
        font-weight: 600 !important;
        font-size: 12px !important;
    }

    /* Chart bars - PROMINENT GLOW like mockup */
    .chart-bar[b-uj8r836w4y] {
        transition: all 200ms ease !important;
    }

    /* Interactions bar - brand blue glow */
    .chart-bar[fill*="interactionsBarGradient"][b-uj8r836w4y] {
        filter: drop-shadow(0 6px 16px rgba(24, 62, 235, 0.35)) !important;
    }

    /* Leads bar - lavender glow */
    .chart-bar[fill*="leadsBarGradient"][b-uj8r836w4y] {
        filter: drop-shadow(0 6px 16px rgba(128, 125, 254, 0.35)) !important;
    }

    .chart-bar.hovered[b-uj8r836w4y] {
        filter: drop-shadow(0 8px 24px rgba(24, 62, 235, 0.45)) brightness(1.1) !important;
    }

    /* ─── Tooltip - Premium Style ─── */
    .analytics-tooltip[b-uj8r836w4y] {
        position: absolute !important;
        bottom: calc(100% + 12px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        min-width: 160px !important;
        max-width: 200px !important;
        padding: 12px 14px !important;
        background: #FFFFFF !important;
        border: 1px solid #DCDEDD !important;
        border-radius: 12px !important;
        box-shadow: 0 12px 40px rgba(1, 3, 62, 0.12) !important;
        z-index: 50 !important;
    }

    .tooltip-header[b-uj8r836w4y] {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #01033E !important;
        margin-bottom: 4px !important;
    }

    .tooltip-subheader[b-uj8r836w4y] {
        font-size: 10px !important;
        color: #6B6E8F !important;
        margin-bottom: 10px !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid #DCDEDD !important;
    }

    .tooltip-row[b-uj8r836w4y] {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin-bottom: 4px !important;
        font-size: 12px !important;
    }

    .tooltip-footer[b-uj8r836w4y] {
        font-size: 11px !important;
        color: #6B6E8F !important;
        margin-top: 8px !important;
        padding-top: 8px !important;
        border-top: 1px dashed #DCDEDD !important;
    }

    /* ─── Legend - Centered at Bottom ─── */
    .analytics-legend[b-uj8r836w4y] {
        display: flex !important;
        justify-content: center !important;
        gap: 24px !important;
        margin-top: 20px !important;
        margin-bottom: 0 !important;
        padding-top: 16px !important;
        border-top: 1px solid #DCDEDD !important;
    }

    .analytics-legend.bottom-centered[b-uj8r836w4y] {
        margin-top: 20px !important;
    }

    .legend-item[b-uj8r836w4y] {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        font-size: 13px !important;
        color: #3E4188 !important;
    }

    .legend-dot[b-uj8r836w4y] {
        width: 10px !important;
        height: 10px !important;
        border-radius: 3px !important;
    }

    /* ─── Footer/.footer-insights mobile rules moved to
       Components/Pages/DashboardWidgets/InteractionsVsLeadsPanel.razor.css
       (Plan 03 Task 7). ─── */

    /* ─── Loading/Empty/Error States ─── */
    .kpi-skeleton-row[b-uj8r836w4y] {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .kpi-skeleton[b-uj8r836w4y] {
        height: 80px !important;
        border-radius: 12px !important;
    }

    .chart-skeleton[b-uj8r836w4y] {
        height: 200px !important;
        border-radius: 12px !important;
    }

    /* ═══════════════════════════════════════════════════════════════════════
       BAR CHART WIDGET - Mobile Responsive (Legacy)
       ═══════════════════════════════════════════════════════════════════════ */

    .bar-chart-widget[b-uj8r836w4y] {
        padding: 16px !important;
    }

    /* Header - Stack title and subtitle */
    .bar-chart-header[b-uj8r836w4y] {
        flex-direction: column !important;
        gap: 12px !important;
        margin-bottom: 16px !important;
    }

    .bar-chart-header-left[b-uj8r836w4y] {
        width: 100% !important;
    }

    .bar-chart-title[b-uj8r836w4y] {
        font-size: 1rem !important;
    }

    /* Hide desktop tabs on mobile */
    .bar-chart-tabs[b-uj8r836w4y] {
        display: none !important;
    }

    /* Show mobile tabs */
    .bar-chart-mobile-tabs[b-uj8r836w4y] {
        display: flex !important;
        justify-content: center !important;
        background: #F3F4F8 !important;
        border-radius: 20px !important;
        padding: 4px !important;
        margin-bottom: 16px !important;
        width: 100% !important;
        border: 1px solid #DCDEDD !important;
    }

    .bar-chart-mobile-tabs .bar-tab[b-uj8r836w4y] {
        flex: 1 !important;
        padding: 10px 8px !important;
        font-size: 12px !important;
        min-width: auto !important;
    }

    /* KPI Cards - Stack vertically */
    .bar-chart-kpis[b-uj8r836w4y] {
        flex-direction: column !important;
        gap: 12px !important;
        margin-bottom: 16px !important;
    }

    .bar-kpi-card[b-uj8r836w4y] {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 12px 14px !important;
        background: #F7F8FC !important;
        border-radius: 10px !important;
        border: 1px solid #DCDEDD !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .bar-kpi-label[b-uj8r836w4y] {
        font-size: 13px !important;
        text-transform: none !important;
        letter-spacing: normal !important;
        color: #6B6E8F !important;
    }

    .bar-kpi-value[b-uj8r836w4y] {
        font-size: 1.25rem !important;
        margin-left: auto !important;
        margin-right: 8px !important;
    }

    .bar-kpi-delta[b-uj8r836w4y] {
        font-size: 12px !important;
    }

    /* Bar Chart Container */
    .bar-chart-container[b-uj8r836w4y] {
        height: 160px !important;
        min-height: 160px !important;
        overflow: visible !important;
        margin: 0 !important;
    }

    .bar-chart-svg[b-uj8r836w4y] {
        width: 100% !important;
        height: 160px !important;
        max-height: 160px !important;
    }

    /* Tooltip - Fixed position on mobile */
    .bar-chart-tooltip[b-uj8r836w4y] {
        left: 50% !important;
        transform: translateX(-50%) !important;
        top: -10px !important;
        width: auto !important;
        min-width: 140px !important;
        max-width: 200px !important;
    }

    /* Footer */
    .bar-chart-footer[b-uj8r836w4y] {
        flex-direction: row !important;
        justify-content: flex-start !important;
        gap: 16px !important;
        margin-top: 8px !important;
        padding-top: 12px !important;
    }

    .bar-chart-legend[b-uj8r836w4y] {
        gap: 12px !important;
    }

    .bar-legend-item[b-uj8r836w4y] {
        font-size: 11px !important;
    }

    .bar-legend-dot[b-uj8r836w4y] {
        width: 8px !important;
        height: 8px !important;
    }

    .bar-chart-insights[b-uj8r836w4y] {
        font-size: 10px !important;
    }


    /* ═══════════════════════════════════════════════════════════════════════
       INSIGHTS ROW - Stack vertically
       ═══════════════════════════════════════════════════════════════════════ */
    .insights-row[b-uj8r836w4y] {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 0 8px 16px;
    }

    .panel[b-uj8r836w4y] {
        padding: 12px;
        border-radius: 20px;
        background: #FFFFFF;
        backdrop-filter: blur(12px);
        border: 1px solid #DCDEDD;
        border-top: 1px solid #C0C1C8;
        overflow: hidden;
        max-width: 100%;
        box-shadow:
            0 2px 4px rgba(1, 3, 62, 0.06),
            0 8px 24px rgba(1, 3, 62, 0.08),
            0 20px 48px rgba(1, 3, 62, 0.06),
            0 0 0 0.5px rgba(1, 3, 62, 0.04);
    }

    .panel-title[b-uj8r836w4y] {
        font-size: 15px;
    }

    /* Smart Summary mobile overrides moved to SmartSummaryPanel.razor.css (Plan 03 Task 9) */

    /* Links panel mobile override (.links-panel padding/overflow) moved to
       CardInteractionsPanel.razor.css (Plan 03 Task 10). The legacy
       .link-row / .link-icon-badge / .link-name / .link-stats / .link-clicks
       / .link-conversion / .link-trend / .trend-badge / .links-actions /
       .action-btn / .links-header rules pointed at a long-removed table-based
       Top Links UI; they were dropped as part of the move. */

    /* High-Intent Panel mobile overrides (.hi-value / .hi-item / .hi-icon-badge /
       .activity-item / .activity-icon-wrapper / .activity-name / .activity-action /
       .activity-time) moved to HighIntentPanel.razor.css (Plan 03 Task 11). */

    /* ═══════════════════════════════════════════════════════════════════════
       BOTTOM NAVIGATION - Fixed App Nav
       ═══════════════════════════════════════════════════════════════════════ */
    .mobile-bottom-nav[b-uj8r836w4y] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 64px;
        background: rgba(247, 248, 252, 0.98);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-top: 1px solid #DCDEDD;
        padding-bottom: env(safe-area-inset-bottom);
        z-index: 1000;
    }

    .nav-item[b-uj8r836w4y] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 8px 12px;
        text-decoration: none;
        color: #6B6E8F;
        font-size: 10px;
        font-weight: 500;
        transition: color 0.2s ease;
    }

    .nav-item svg[b-uj8r836w4y] {
        width: 22px;
        height: 22px;
        stroke-width: 1.5;
    }

    .nav-item.active[b-uj8r836w4y] {
        color: #183EEB;
    }

    .nav-item.active svg[b-uj8r836w4y] {
        filter: drop-shadow(0 0 8px rgba(24, 62, 235, 0.4));
    }

    .nav-item:active[b-uj8r836w4y] {
        transform: scale(0.95);
    }

    /* LOADING OVERLAY Mobile moved to Components/Shared/Primitives/LoadingOverlay.razor (Plan 03 Task 14) */
}

/* ══════════════════════════════════════════════════════════════════════════════
   ICON BADGE COLOR CLASSES
   Unified styling for all icon badges across dashboard widgets
   ══════════════════════════════════════════════════════════════════════════════ */

/* Default badge style */
[b-uj8r836w4y] .badge-default {
    background: var(--dt-bg-subtle, #F7F8FC);
    color: var(--dt-text-secondary, #3E4188);
    border: 1px solid var(--dt-border-default, #DCDEDD);
}

/* Brand-specific badge colors */
[b-uj8r836w4y] .badge-whatsapp {
    background: rgba(37, 211, 102, 0.12);
    color: #25D366;
    border: 1px solid rgba(37, 211, 102, 0.2);
}

[b-uj8r836w4y] .badge-linkedin {
    background: rgba(10, 102, 194, 0.12);
    color: #0A66C2;
    border: 1px solid rgba(10, 102, 194, 0.2);
}

[b-uj8r836w4y] .badge-instagram {
    background: linear-gradient(135deg, rgba(253, 29, 29, 0.1), rgba(131, 58, 180, 0.1));
    color: #E4405F;
    border: 1px solid rgba(228, 64, 95, 0.2);
}

[b-uj8r836w4y] .badge-facebook {
    background: rgba(24, 119, 242, 0.12);
    color: #1877F2;
    border: 1px solid rgba(24, 119, 242, 0.2);
}

[b-uj8r836w4y] .badge-twitter,
[b-uj8r836w4y] .badge-x {
    background: rgba(1, 3, 62, 0.06);
    color: var(--dt-text-primary, #01033E);
    border: 1px solid rgba(1, 3, 62, 0.12);
}

[b-uj8r836w4y] .badge-youtube {
    background: rgba(255, 0, 0, 0.1);
    color: #FF0000;
    border: 1px solid rgba(255, 0, 0, 0.2);
}

[b-uj8r836w4y] .badge-tiktok {
    background: rgba(1, 3, 62, 0.06);
    color: var(--dt-text-primary, #01033E);
    border: 1px solid rgba(1, 3, 62, 0.12);
}

[b-uj8r836w4y] .badge-telegram {
    background: rgba(0, 136, 204, 0.12);
    color: #0088CC;
    border: 1px solid rgba(0, 136, 204, 0.2);
}

/* Action badge colors */
[b-uj8r836w4y] .badge-email {
    background: rgba(24, 62, 235, 0.10);
    color: var(--dt-primary-500, #183EEB);
    border: 1px solid rgba(24, 62, 235, 0.2);
}

[b-uj8r836w4y] .badge-call {
    background: rgba(128, 125, 254, 0.10);
    color: var(--dt-accent-500, #807DFE);
    border: 1px solid rgba(128, 125, 254, 0.2);
}

[b-uj8r836w4y] .badge-calendar {
    background: rgba(128, 125, 254, 0.10);
    color: #807DFE;
    border: 1px solid rgba(128, 125, 254, 0.2);
}

[b-uj8r836w4y] .badge-portfolio {
    background: rgba(217, 119, 6, 0.10);
    color: #D97706;
    border: 1px solid rgba(217, 119, 6, 0.2);
}

[b-uj8r836w4y] .badge-website {
    background: rgba(24, 62, 235, 0.08);
    color: var(--dt-primary-500, #183EEB);
    border: 1px solid rgba(24, 62, 235, 0.15);
}

/* Event type badge colors */
[b-uj8r836w4y] .badge-contact {
    background: rgba(16, 185, 129, 0.12);
    color: #10B981;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

[b-uj8r836w4y] .badge-form {
    background: rgba(59, 130, 246, 0.12);
    color: #3B82F6;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

[b-uj8r836w4y] .badge-time {
    background: rgba(24, 62, 235, 0.10);
    color: var(--dt-primary-500, #183EEB);
    border: 1px solid rgba(24, 62, 235, 0.2);
}

[b-uj8r836w4y] .badge-inactive {
    background: rgba(107, 110, 143, 0.10);
    color: var(--dt-text-muted, #6B6E8F);
    border: 1px solid rgba(107, 110, 143, 0.2);
}

[b-uj8r836w4y] .badge-qr {
    background: rgba(128, 125, 254, 0.12);
    color: #807DFE;
    border: 1px solid rgba(128, 125, 254, 0.2);
}

[b-uj8r836w4y] .badge-nfc {
    background: rgba(34, 197, 94, 0.12);
    color: #22C55E;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

[b-uj8r836w4y] .badge-lead {
    background: rgba(14, 165, 233, 0.12);
    color: #0EA5E9;
    border: 1px solid rgba(14, 165, 233, 0.2);
}

[b-uj8r836w4y] .badge-location {
    background: rgba(239, 68, 68, 0.12);
    color: #EF4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* `.date-picker-overlay`, `.date-picker-modal`, `.date-picker-header`,
   `.date-picker-body`, `.date-field`, `.date-error`, `.date-picker-footer`,
   plus the responsive @media (max-width: 768px) overrides moved to
   Components/Pages/DashboardWidgets/DateRangePickerModal.razor.css
   (Plan 03 Task 13). */

/* `.mobile-range-pill.full-width` rules moved to
   Components/Pages/DashboardWidgets/InteractionsVsLeadsPanel.razor.css
   (Plan 03 Task 7). */

/* ═══════════════════════════════════════════════════════════════════════════
   ANALYTICS WIDGET — responsive zone overrides (Large/Small Mobile · Tablet ·
   SM/XS/Micro Mobile) and the #widget-interactions-leads scoped block,
   plus the LOCAL FILTER INDICATORS for the inline mobile-range-pill button,
   moved to Components/Pages/DashboardWidgets/InteractionsVsLeadsPanel.razor.css
   (Plan 03 Task 7). The legacy chart-bar/axis-label/analytics-tooltip styles
   that lived inside those media queries pointed at markup that no longer
   exists; they have been dropped along with the move.
   ═══════════════════════════════════════════════════════════════════════════ */

/* `.main-row` global padding override at the LARGE MOBILE breakpoint kept here
   because `.main-row` lives in Dashboard.razor's own markup. */
@media (max-width: 599px) and (min-width: 430px) {
    .main-row[b-uj8r836w4y] {
        padding: 0 12px !important;
    }
}

/* Card-Interactions widget styles (.links-empty-state, .links-interactions-widget,
   .an-section-block / -header / -icon / -title, .an-device-row / -label / -track
   / -fill / -pct, .an-row-icon, .an-fill-save, .an-commercial-row / -label /
   -value / -value-group / -cta, .an-commercial-row--highlight,
   .an-conversion-badge) moved to CardInteractionsPanel.razor.css
   (Plan 03 Task 10). */
/* _content/DataTouch.Web/Components/Pages/DashboardWidgets/CardInteractionsPanel.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════════
   CARD INTERACTIONS PANEL — Premium redesign matching the reference mockup.
   Two ordered sections (Perfiles Sociales · Captura Comercial), each row pairs
   a brand icon + label + thin progress bar + count. All colors flow through
   design-tokens v2.1.0 so the panel tracks theme changes consistently.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Panel surface — overflow visible so dropdowns escape the card. */
.links-panel[b-jex9sjxgfn] {
    background: var(--dt-surface-1);
    position: relative;
    overflow: visible;
}

/* ══════════════════════════════════════════════════════════════════════════════
   HEADER (title + subtitle + actions)
   ══════════════════════════════════════════════════════════════════════════════ */

.ci-header[b-jex9sjxgfn] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--dt-space-4);
    margin-bottom: var(--dt-space-5);
    flex-wrap: wrap;
}

.ci-header__text[b-jex9sjxgfn] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Reference card-head: h3 13.5px weight 600, sub 12px. */
.ci-title[b-jex9sjxgfn] {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--dt-text-primary);
    line-height: 1.2;
    letter-spacing: -0.005em;
}

.ci-subtitle[b-jex9sjxgfn] {
    margin: 0;
    font-size: 12px;
    color: var(--dt-text-muted);
}

.ci-header__actions[b-jex9sjxgfn] {
    display: flex;
    align-items: center;
    gap: var(--dt-space-2);
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SECTIONS
   ══════════════════════════════════════════════════════════════════════════════ */

.ci-section[b-jex9sjxgfn] {
    padding-top: var(--dt-space-4);
}

.ci-section + .ci-section[b-jex9sjxgfn] {
    margin-top: var(--dt-space-4);
    border-top: 1px dashed var(--dt-border-default);
}

.ci-section-title[b-jex9sjxgfn] {
    margin: 0 0 2px;
    padding: 6px 0 2px;
    font-size: 10.5px;          /* reference: 10.5px section labels */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;     /* reference: .06em */
    color: var(--dt-text-muted);
}

/* ══════════════════════════════════════════════════════════════════════════════
   ROW PATTERN — icon · (name + bar) · count
   ══════════════════════════════════════════════════════════════════════════════ */

/* Reference HTML .channel-row: grid 28px 1fr auto, gap 10px, padding 10px 0,
   icon 28x28 radius 7px, name 12.5px weight 500, sub 11.5px,
   bar 6px height, value 13px weight 600. */
.ci-row[b-jex9sjxgfn] {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 10px;
    padding: 10px 0;
    align-items: center;
}

.ci-row + .ci-row[b-jex9sjxgfn] {
    border-top: 1px dashed rgba(220, 222, 221, 0.5);
}

/* Icon container — 28x28 radius 7px per reference. */
.ci-row__icon[b-jex9sjxgfn] {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--dt-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dt-text-secondary);
    flex-shrink: 0;
}

.ci-row__icon[b-jex9sjxgfn]  .icon-svg {
    width: 14px;     /* reference: 14x14 inside 28x28 chip */
    height: 14px;
}

.ci-row__body[b-jex9sjxgfn] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    grid-column: 2;
}

.ci-row__top[b-jex9sjxgfn] {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.ci-row__name[b-jex9sjxgfn] {
    flex: 1;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--dt-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ci-row__count-label[b-jex9sjxgfn] {
    font-size: 11.5px;
    color: var(--dt-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Conversion-rate badge variant: green tint to call out the number. */
.ci-row__count-label--badge[b-jex9sjxgfn] {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--dt-success-bg);
    color: var(--dt-success);
    font-weight: var(--dt-font-weight-bold);
}

.ci-row__count[b-jex9sjxgfn] {
    grid-column: 3;
    font-size: 13px;                  /* reference: ch-val 13px */
    font-weight: 600;
    color: var(--dt-text-primary);
    font-variant-numeric: tabular-nums;
    min-width: 24px;
    text-align: right;
    align-self: center;
}

.ci-row__bar[b-jex9sjxgfn] {
    height: 6px;                      /* reference: 6px (was 4) */
    background: var(--dt-border-default);
    border-radius: 99px;              /* reference: pill */
    overflow: hidden;
}

.ci-row__bar-fill[b-jex9sjxgfn] {
    height: 100%;
    background: linear-gradient(90deg, var(--dt-primary-500) 0%, var(--dt-accent-500) 100%);
    border-radius: 2px;
    transition: width 0.4s ease;
}

/* ══════════════════════════════════════════════════════════════════════════════
   EMPTY + FOOTER
   ══════════════════════════════════════════════════════════════════════════════ */

.ci-empty[b-jex9sjxgfn] {
    margin: 0;
    padding: var(--dt-space-5) 0 var(--dt-space-2);
    text-align: center;
    font-size: var(--dt-font-sm);
    color: var(--dt-text-muted);
}

.ci-footer[b-jex9sjxgfn] {
    margin-top: var(--dt-space-4);
    padding-top: var(--dt-space-3);
    border-top: 1px dashed var(--dt-border-default);
    display: flex;
    justify-content: flex-end;
}

.ci-footer-link[b-jex9sjxgfn] {
    font-size: var(--dt-font-sm);
    font-weight: var(--dt-font-weight-semibold);
    color: var(--dt-primary-500);
    text-decoration: none;
    transition: color var(--dt-transition-fast);
}

.ci-footer-link:hover[b-jex9sjxgfn] {
    color: var(--dt-primary-600);
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE — same row pattern, just tighter padding so the panel doesn't overflow
   on ≤768px viewports. Original .links-panel mobile rule preserved.
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .links-panel[b-jex9sjxgfn] {
        padding: var(--dt-space-3);
        overflow: hidden;
    }

    .ci-header[b-jex9sjxgfn] {
        margin-bottom: var(--dt-space-4);
    }

    .ci-row__name[b-jex9sjxgfn] {
        font-size: var(--dt-font-sm);
    }
}
/* _content/DataTouch.Web/Components/Pages/DashboardWidgets/ChannelConversionPanel.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════════
   ChannelConversionPanel — scoped CSS (Plan 04.2)
   Created to localise the .ss-header / .ss-empty styling that the markup borrows
   from the Smart Summary widget. Without these the header layout collapses
   (spacer / title / actions stop aligning) and the empty-state copy loses its
   centered padded card look — a side-effect of Blazor scoped CSS not crossing
   component boundaries (Plan 03 Lesson 2: duplicate helpers per-child).
   ══════════════════════════════════════════════════════════════════════════════ */

.channel-funnel-row[b-do1mo2zd2k] {
    margin-top: var(--dt-space-6);
}

/* Header: 3-column grid that centres the title, with optional spacer/actions
   slots on either side. Mirrors SmartSummaryPanel's .ss-header. */
.ss-header[b-do1mo2zd2k] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    margin-bottom: var(--dt-space-3);
    gap: var(--dt-space-2);
}

.ss-header-spacer[b-do1mo2zd2k] {
    display: flex;
}

.ss-header .section-title[b-do1mo2zd2k] {
    margin: 0;
    text-align: center;
    font-size: var(--dt-font-sm);
    font-weight: var(--dt-font-weight-semibold);
    color: var(--dt-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--dt-letter-spacing-wider);
}

/* Empty-state container: centred copy block when there is no funnel data yet. */
.ss-empty[b-do1mo2zd2k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--dt-space-8) var(--dt-space-4);
    text-align: center;
    gap: var(--dt-space-2);
}

.ss-empty p[b-do1mo2zd2k] {
    margin: 0;
    font-size: var(--dt-font-sm);
    color: var(--dt-text-muted);
    line-height: 1.5;
    max-width: 520px;
}

.ss-empty p strong[b-do1mo2zd2k] {
    color: var(--dt-text-primary);
    font-weight: var(--dt-font-weight-semibold);
}

.channel-funnel-chart[b-do1mo2zd2k] {
    margin-top: var(--dt-space-3);
}
/* _content/DataTouch.Web/Components/Pages/DashboardWidgets/DateRangePickerModal.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════════
   DATE RANGE PICKER MODAL (Personalizado) — Plan 04.6 token migration

   Originally a pure-relocation move from Dashboard.razor.css (Plan 03 Task 13).
   Plan 04.6 migrates the hardcoded hex/pixel values to design-tokens v2.1.0
   so the modal tracks theme changes consistently with the rest of the
   dashboard. Behaviour and animation timings are preserved verbatim.
   ══════════════════════════════════════════════════════════════════════════════ */

.date-picker-overlay[b-8lnbes2xrr] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(1, 3, 62, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: overlay-fade-b-8lnbes2xrr 150ms ease-out;
}

@keyframes overlay-fade-b-8lnbes2xrr {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.date-picker-modal[b-8lnbes2xrr] {
    background: var(--dt-surface-1);
    border: 1px solid var(--dt-border-default);
    border-radius: var(--dt-radius-xl);
    padding: 0;
    min-width: 320px;
    max-width: 90vw;
    box-shadow: var(--dt-shadow-xl);
    animation: modal-slide-b-8lnbes2xrr 200ms ease-out;
}

@keyframes modal-slide-b-8lnbes2xrr {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.date-picker-header[b-8lnbes2xrr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--dt-space-5) var(--dt-space-6);
    border-bottom: 1px solid var(--dt-border-default);
}

.date-picker-header h3[b-8lnbes2xrr] {
    margin: 0;
    font-size: var(--dt-font-xl);
    font-weight: var(--dt-font-weight-semibold);
    color: var(--dt-text-primary);
}

.date-picker-header .close-btn[b-8lnbes2xrr] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--dt-text-muted);
    cursor: pointer;
    border-radius: var(--dt-radius-md);
    transition: all var(--dt-transition-fast);
}

.date-picker-header .close-btn:hover[b-8lnbes2xrr] {
    background: var(--dt-surface-2);
    color: var(--dt-text-primary);
}

.date-picker-header .close-btn svg[b-8lnbes2xrr] {
    width: 18px;
    height: 18px;
}

.date-picker-body[b-8lnbes2xrr] {
    padding: var(--dt-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--dt-space-5);
}

.date-field[b-8lnbes2xrr] {
    display: flex;
    flex-direction: column;
    gap: var(--dt-space-2);
}

.date-field label[b-8lnbes2xrr] {
    font-size: var(--dt-font-sm);
    font-weight: var(--dt-font-weight-medium);
    color: var(--dt-text-secondary);
}

.date-field input[type="date"][b-8lnbes2xrr] {
    width: 100%;
    padding: var(--dt-space-3) var(--dt-space-4);
    background: var(--dt-surface-2);
    border: 1px solid var(--dt-border-default);
    border-radius: var(--dt-radius-md);
    color: var(--dt-text-primary);
    font-size: var(--dt-font-base);
    font-family: inherit;
    outline: none;
    transition: all var(--dt-transition-fast);
}

.date-field input[type="date"]:hover[b-8lnbes2xrr] {
    border-color: rgba(24, 62, 235, 0.4);
}

.date-field input[type="date"]:focus[b-8lnbes2xrr] {
    border-color: var(--dt-primary-500);
    box-shadow: 0 0 0 3px rgba(24, 62, 235, 0.12);
}

/* Estilo para el icono del calendario en navegadores webkit */
.date-field input[type="date"][b-8lnbes2xrr]::-webkit-calendar-picker-indicator {
    filter: invert(0.8);
    cursor: pointer;
}

.date-error[b-8lnbes2xrr] {
    padding: var(--dt-space-2) var(--dt-space-3);
    background: var(--dt-danger-bg);
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: var(--dt-radius-md);
    color: var(--dt-danger);
    font-size: var(--dt-font-sm);
}

.date-picker-footer[b-8lnbes2xrr] {
    display: flex;
    justify-content: flex-end;
    gap: var(--dt-space-3);
    padding: var(--dt-space-4) var(--dt-space-6);
    border-top: 1px solid var(--dt-border-default);
}

.date-picker-footer .btn-cancel[b-8lnbes2xrr],
.date-picker-footer .btn-accept[b-8lnbes2xrr] {
    padding: var(--dt-space-3) var(--dt-space-5);
    border-radius: var(--dt-radius-md);
    font-size: var(--dt-font-base);
    font-weight: var(--dt-font-weight-medium);
    cursor: pointer;
    transition: all var(--dt-transition-fast);
}

.date-picker-footer .btn-cancel[b-8lnbes2xrr] {
    background: transparent;
    border: 1px solid var(--dt-border-default);
    color: var(--dt-text-secondary);
}

.date-picker-footer .btn-cancel:hover[b-8lnbes2xrr] {
    background: var(--dt-surface-2);
    color: var(--dt-text-primary);
}

.date-picker-footer .btn-accept[b-8lnbes2xrr] {
    background: var(--dt-primary-500);
    border: none;
    color: var(--dt-surface-1);
    box-shadow: 0 2px 8px rgba(24, 62, 235, 0.25);
}

.date-picker-footer .btn-accept:hover[b-8lnbes2xrr] {
    background: var(--dt-primary-600);
    box-shadow: 0 4px 12px rgba(24, 62, 235, 0.3);
}

/* Responsive date picker */
@media (max-width: 768px) {
    .date-picker-modal[b-8lnbes2xrr] {
        min-width: auto;
        width: calc(100vw - 32px);
        margin: var(--dt-space-4);
    }

    .date-picker-header[b-8lnbes2xrr] {
        padding: var(--dt-space-4) var(--dt-space-5);
    }

    .date-picker-body[b-8lnbes2xrr] {
        padding: var(--dt-space-5);
    }

    .date-picker-footer[b-8lnbes2xrr] {
        padding: var(--dt-space-4) var(--dt-space-5);
        flex-direction: column;
    }

    .date-picker-footer .btn-cancel[b-8lnbes2xrr],
    .date-picker-footer .btn-accept[b-8lnbes2xrr] {
        width: 100%;
        text-align: center;
    }
}
/* _content/DataTouch.Web/Components/Pages/DashboardWidgets/DeviceChannelPanel.razor.rz.scp.css */
/* Phase 3 — Dispositivos y Canales widget */

.device-channel-row[b-s1tjkjvvab] { margin-top: 1.5rem; }

.dch-champion[b-s1tjkjvvab] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, rgba(201, 162, 74, 0.12), rgba(24, 62, 235, 0.08));
    border: 1px solid rgba(201, 162, 74, 0.4);
    border-radius: 12px;
}

.dch-champion-medal[b-s1tjkjvvab] { font-size: 1.5rem; }
.dch-champion-text[b-s1tjkjvvab] { display: flex; flex-direction: column; }
.dch-champion-label[b-s1tjkjvvab] { font-weight: 600; color: var(--dt-text-primary, #01033E); }
.dch-champion-stats[b-s1tjkjvvab] { font-size: 0.85rem; color: var(--dt-text-secondary, #6B7280); }

/* ─── Per-Kind summary cards grid ─── */
.dch-kind-grid[b-s1tjkjvvab] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.dch-kind-card[b-s1tjkjvvab] {
    background: var(--dt-surface-1, #FAF8F4);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    padding: 0.75rem 0.85rem;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.dch-kind-header[b-s1tjkjvvab] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--dt-text-primary, #01033E);
}

.dch-kind-icon[b-s1tjkjvvab] { font-size: 1.1rem; }

.dch-kind-stats[b-s1tjkjvvab] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.85rem;
    font-size: 0.8rem;
    color: var(--dt-text-secondary, #6B7280);
}

.dch-kind-stats b[b-s1tjkjvvab] { color: var(--dt-text-primary, #01033E); }

.dch-conv[b-s1tjkjvvab] {
    margin-left: auto;
    font-weight: 600;
    color: var(--dt-accent-primary, #183EEB);
}

.dch-sparkline[b-s1tjkjvvab] {
    font-family: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
    font-size: 1rem;
    color: var(--dt-accent-primary, #183EEB);
    letter-spacing: -0.05em;
    margin-top: auto;
}

.dch-kind-empty[b-s1tjkjvvab] {
    font-size: 0.8rem;
    color: var(--dt-text-secondary, #9CA3AF);
    font-style: italic;
}

/* ─── Detail table ─── */
.dch-table-wrap[b-s1tjkjvvab] {
    overflow-x: auto;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    background: #FFF;
}

.dch-table[b-s1tjkjvvab] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.dch-table th[b-s1tjkjvvab] {
    text-align: left;
    background: #F9FAFB;
    color: var(--dt-text-secondary, #6B7280);
    font-weight: 600;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    white-space: nowrap;
}

.dch-table td[b-s1tjkjvvab] {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    color: var(--dt-text-primary, #01033E);
}

.dch-table tr:last-child td[b-s1tjkjvvab] { border-bottom: 0; }
.dch-table tr:hover[b-s1tjkjvvab] { background: rgba(24, 62, 235, 0.03); }

.dch-table .num[b-s1tjkjvvab] { text-align: right; font-variant-numeric: tabular-nums; }

.dch-pill[b-s1tjkjvvab] {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    background: rgba(24, 62, 235, 0.08);
    color: var(--dt-accent-primary, #183EEB);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.dch-status[b-s1tjkjvvab] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}

.dch-status-active[b-s1tjkjvvab]   { background: rgba(34, 197, 94, 0.12);  color: #047857; }
.dch-status-pending[b-s1tjkjvvab]  { background: rgba(245, 158, 11, 0.14); color: #B45309; }
.dch-status-revoked[b-s1tjkjvvab]  { background: rgba(239, 68, 68, 0.12);  color: #B91C1C; }
.dch-status-expired[b-s1tjkjvvab]  { background: rgba(107, 114, 128, 0.14); color: #4B5563; }

.dch-sparkline-cell[b-s1tjkjvvab] {
    font-family: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
    color: var(--dt-accent-primary, #183EEB);
    letter-spacing: -0.05em;
    white-space: nowrap;
}
/* _content/DataTouch.Web/Components/Pages/DashboardWidgets/GeographicIntelligencePanel.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════════
   GEOGRAPHIC INTELLIGENCE PANEL — scoped CSS
   Pure-relocation extraction from Dashboard.razor.css (Plan 03 Task 8).

   All MapLibre internal classes (.maplibregl-*, .dt-gl-*) are reached via
   ::deep because they are rendered by the MapLibre JS library inside
   #locations-map and not by Blazor — scoped CSS attributes are not applied
   to JS-injected DOM, so the descendant ::deep combinator is required.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Panel surface — overflow visible so dropdowns render outside the card */
.locations-panel[b-h4jv6ztga6] {
    background: #FFFFFF;
    position: relative;
    overflow: visible;
}

/* Panel header layout */
.panel-title-group[b-h4jv6ztga6] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.panel-subtitle[b-h4jv6ztga6] {
    font-size: 12px;
    color: var(--dt-text-muted, #6B6E8F);
    font-weight: 400;
    margin: 0;
    line-height: 1.3;
}

/* ══════════════════════════════════════════════════════════════════════════════
   LOCATION HIGHLIGHT (top-line summary above the map)
   ══════════════════════════════════════════════════════════════════════════════ */

.location-highlight[b-h4jv6ztga6] {
    margin-bottom: 16px;
}

.location-title-row[b-h4jv6ztga6] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.location-flag[b-h4jv6ztga6] { font-size: 1.4rem; flex-shrink: 0; line-height: 1; }

.location-name[b-h4jv6ztga6] {
    font-size: 24px;
    font-weight: 700;
    color: var(--dt-text-primary, #01033E);
}

.location-delta[b-h4jv6ztga6] {
    font-size: 13px;
    font-weight: 500;
}

.location-delta.positive[b-h4jv6ztga6] {
    color: var(--dt-success, #16A34A);
}

.location-delta.negative[b-h4jv6ztga6] {
    color: var(--dt-danger, #DC2626);
}

.delta-arrow[b-h4jv6ztga6] {
    margin-left: 4px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   PREMIUM MAP CONTAINER - MapLibre GL Integration
   ══════════════════════════════════════════════════════════════════════════════ */

.map-container[b-h4jv6ztga6] {
    margin-bottom: 16px;
    overflow: hidden;
    transition: all var(--dt-transition-normal, 250ms ease);
    position: relative;
    border-radius: var(--dt-radius-lg, 12px);
    background: #F3F4F8;
}

.map-container.collapsed[b-h4jv6ztga6] {
    height: 200px;
}

.map-container.expanded[b-h4jv6ztga6] {
    height: 320px;
}

/* MapLibre GL map container */
.maplibre-map[b-h4jv6ztga6] {
    width: 100%;
    height: 100%;
    min-height: 180px;
    border-radius: var(--dt-radius-lg, 12px);
    z-index: 1;
}

/* Subtle overlay for theme integration */
.map-overlay[b-h4jv6ztga6] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(1, 3, 62, 0.02);
    pointer-events: none;
    z-index: 2;
    border-radius: var(--dt-radius-lg, 12px);
}

/* Top Location Pill - contextual overlay */
.map-top-pill[b-h4jv6ztga6] {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(220, 222, 221, 0.6);
    border-radius: var(--dt-radius-full, 9999px);
    font-size: 12px;
    color: var(--dt-text-primary, #01033E);
    box-shadow: 0 4px 16px rgba(1, 3, 62, 0.10);
    z-index: 10;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.map-top-pill .pill-icon[b-h4jv6ztga6] {
    font-size: 14px;
}

.map-top-pill .pill-text strong[b-h4jv6ztga6] {
    color: var(--dt-primary-600, #183EEB);
    font-weight: 600;
}

/* Override MapLibre GL Navigation Control (DOM injected by JS — needs ::deep) */
[b-h4jv6ztga6] .maplibregl-ctrl-group {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(220, 222, 221, 0.6) !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(1, 3, 62, 0.08) !important;
    backdrop-filter: blur(8px) !important;
    overflow: hidden;
}

[b-h4jv6ztga6] .maplibregl-ctrl-group button {
    width: 30px !important;
    height: 30px !important;
    border-bottom: 1px solid rgba(220, 222, 221, 0.4) !important;
}

[b-h4jv6ztga6] .maplibregl-ctrl-group button:hover {
    background: var(--dt-hover-surface, #EDF0FD) !important;
}

[b-h4jv6ztga6] .maplibregl-ctrl-group button:last-child {
    border-bottom: none !important;
}

/* Attribution styling */
[b-h4jv6ztga6] .maplibregl-ctrl-attrib {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    font-size: 10px !important;
    border-radius: 4px !important;
}

/* ── MapLibre Premium Markers (DOM injected by DataTouchMap JS) ── */

[b-h4jv6ztga6] .dt-gl-marker {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: filter 0.2s ease;
}

[b-h4jv6ztga6] .dt-gl-marker:hover {
    filter: brightness(1.1);
}

/* Pulsing ring for top location marker */
[b-h4jv6ztga6] .dt-gl-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200%;
    height: 200%;
    border-radius: 50%;
    background: rgba(24, 62, 235, 0.15);
    animation: dt-gl-pulse-ring-b-h4jv6ztga6 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    pointer-events: none;
}

@keyframes dt-gl-pulse-ring-b-h4jv6ztga6 {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0.8;
    }
    70% {
        opacity: 0.2;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.8);
        opacity: 0;
    }
}

/* ── MapLibre Premium Popups (Glassmorphism) ── */

[b-h4jv6ztga6] .dt-gl-popup-wrapper .maplibregl-popup-content {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(220, 222, 221, 0.5) !important;
    border-radius: 12px !important;
    padding: 0 !important;
    box-shadow: 0 12px 40px rgba(1, 3, 62, 0.14),
                0 4px 12px rgba(1, 3, 62, 0.06) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    font-family: 'Inter', sans-serif !important;
    overflow: hidden;
}

[b-h4jv6ztga6] .dt-gl-popup-wrapper .maplibregl-popup-tip {
    border-top-color: rgba(255, 255, 255, 0.95) !important;
}

[b-h4jv6ztga6] .dt-gl-popup-wrapper .maplibregl-popup-close-button {
    font-size: 18px;
    color: var(--dt-text-muted, #6B6E8F);
    padding: 4px 8px;
    right: 2px;
    top: 2px;
}

[b-h4jv6ztga6] .dt-gl-popup-wrapper .maplibregl-popup-close-button:hover {
    color: var(--dt-text-primary, #01033E);
    background: transparent;
}

[b-h4jv6ztga6] .dt-gl-popup {
    padding: 14px 16px;
    min-width: 220px;
}

[b-h4jv6ztga6] .dt-gl-popup__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(220, 222, 221, 0.5);
}

[b-h4jv6ztga6] .dt-gl-popup__pin {
    font-size: 16px;
}

[b-h4jv6ztga6] .dt-gl-popup__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--dt-text-primary, #01033E);
    flex: 1;
}

[b-h4jv6ztga6] .dt-gl-popup__badge {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 8px;
    background: linear-gradient(135deg, #183EEB, #807DFE);
    color: white;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

[b-h4jv6ztga6] .dt-gl-popup__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

[b-h4jv6ztga6] .dt-gl-popup__stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

[b-h4jv6ztga6] .dt-gl-popup__stat-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--dt-text-primary, #01033E);
    font-variant-numeric: tabular-nums;
}

[b-h4jv6ztga6] .dt-gl-popup__stat-label {
    font-size: 10px;
    color: var(--dt-text-muted, #6B6E8F);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 500;
}

[b-h4jv6ztga6] .dt-gl-popup__delta--positive {
    color: #10B981 !important;
    display: flex;
    align-items: center;
    gap: 3px;
}

[b-h4jv6ztga6] .dt-gl-popup__delta--negative {
    color: #EF4444 !important;
    display: flex;
    align-items: center;
    gap: 3px;
}

/* Map placeholder overlay */
.map-placeholder[b-h4jv6ztga6] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(247, 248, 252, 0.92);
    color: var(--dt-text-muted, #6B6E8F);
    font-size: 13px;
    z-index: 5;
    pointer-events: none;
    border-radius: var(--dt-radius-lg, 12px);
}

.map-placeholder svg[b-h4jv6ztga6] {
    opacity: 0.5;
}

.map-notice[b-h4jv6ztga6] {
    position: absolute;
    bottom: 40px;
    left: 10px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(24, 62, 235, 0.2);
    color: var(--dt-text-secondary, #3E4188);
    font-size: 11px;
    padding: 5px 10px;
    border-radius: var(--dt-radius-sm, 4px);
    z-index: 10;
    backdrop-filter: blur(4px);
}

.map-toggle[b-h4jv6ztga6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    padding: 8px;
    border: none;
    background: transparent;
    color: var(--dt-text-secondary, #3E4188);
    font-size: 12px;
    cursor: pointer;
    transition: color var(--dt-transition-fast, 150ms ease);
}

.map-toggle:hover[b-h4jv6ztga6] {
    color: var(--dt-text-primary, #01033E);
}

.map-toggle svg[b-h4jv6ztga6] {
    width: 14px;
    height: 14px;
    transition: transform var(--dt-transition-fast, 150ms ease);
}

.map-toggle svg.rotated[b-h4jv6ztga6] {
    transform: rotate(180deg);
}

/* ══════════════════════════════════════════════════════════════════════════════
   LOCATIONS ANALYSIS SECTION (desktop) — separator between map and table
   The mobile-specific overrides live in the @media (max-width:600px) block
   later in the file. Desktop styling was missing entirely after Plan 03,
   so the table title rendered with browser defaults and no separator.
   ══════════════════════════════════════════════════════════════════════════════ */
.locations-analysis-section[b-h4jv6ztga6] {
    margin-top: var(--dt-space-5);
    padding-top: var(--dt-space-4);
    border-top: 1px solid var(--dt-border-default);
}

.locations-analysis-title[b-h4jv6ztga6] {
    font-size: var(--dt-font-lg);
    font-weight: var(--dt-font-weight-semibold);
    color: var(--dt-text-primary);
    margin: 0 0 var(--dt-space-3) 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   LOCATION TABLE
   ══════════════════════════════════════════════════════════════════════════════ */

.location-table[b-h4jv6ztga6] {
    margin-bottom: 12px;
}

.table-header-row[b-h4jv6ztga6],
.table-row[b-h4jv6ztga6] {
    display: grid;
    grid-template-columns: 1.8fr 1fr 0.8fr 0.8fr 0.8fr;
    gap: 8px;
    padding: 8px 0;
    align-items: center;
}

.table-header-row[b-h4jv6ztga6] {
    border-bottom: 1px solid var(--dt-border-default, #DCDEDD);
    font-size: 11px;
    font-weight: 600;
    color: var(--dt-text-muted, #6B6E8F);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table-row[b-h4jv6ztga6] {
    font-size: 13px;
    color: var(--dt-text-primary, #01033E);
    border-bottom: 1px solid rgba(220, 222, 221, 0.7);
}

.col-location[b-h4jv6ztga6] {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
}

.loc-flag[b-h4jv6ztga6] { font-size: 1.05rem; line-height: 1; flex-shrink: 0; margin-right: 0.1rem; }
.loc-name[b-h4jv6ztga6]  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.col-stat[b-h4jv6ztga6] {
    text-align: right;
}

/* Volume bar — used by the Interacciones cell. */
.vol-cell[b-h4jv6ztga6]    { display: flex; flex-direction: column; gap: 2px; min-width: 52px; }
.vol-number[b-h4jv6ztga6]  { font-size: 0.8rem; color: var(--dt-text-primary, #01033E); text-align: right; }
.vol-track[b-h4jv6ztga6]   { display: block; height: 3px; background: color-mix(in srgb, var(--dt-primary-500, #183EEB) 15%, transparent); border-radius: 2px; }
.vol-fill[b-h4jv6ztga6]    { display: block; height: 100%; background: var(--dt-primary-500, #183EEB); border-radius: 2px; transition: width 0.4s ease; }

/* `.col-stat.conversion`, `.conv-high`, `.conv-mid` removed — the Conversión
   column was deleted from the table markup; per-row conversion still flows
   through OrgAnalyticsSummary for export-CSV but is no longer surfaced here. */

/* ══════════════════════════════════════════════════════════════════════════════
   INTELIGENCIA GEOGRÁFICA — Executive header, expanded table, precision chips,
   sparklines, and leads subtable. All colors go through --dt-* tokens so the
   widget tracks the CRM light/dark theme.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Reference HTML "geo-stats" 3-up segmented row: padding 10px 12px,
   label 10.5px uppercase letter-spacing .06em,
   value 14px weight 600 (was 13). Single segmented border instead of
   per-pill borders gives tighter visual grouping. */
.geo-exec-row[b-h4jv6ztga6] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0 0 14px;
    border: 1px solid var(--dt-border-default, #DCDEDD);
    border-radius: 8px;
    overflow: hidden;
}
.geo-exec-pill[b-h4jv6ztga6] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    background: var(--dt-surface-elevated, #F9FAFB);
    border: 0;
    border-right: 1px solid var(--dt-border-default, #DCDEDD);
    border-radius: 0;
    min-width: 0;
}
.geo-exec-pill:last-child[b-h4jv6ztga6] { border-right: 0; }

.geo-exec-label[b-h4jv6ztga6] {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dt-text-muted, #6B6E8F);
}
.geo-exec-value[b-h4jv6ztga6] {
    font-size: 14px;
    font-weight: 600;
    color: var(--dt-text-primary, #01033E);
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.geo-exec-flag[b-h4jv6ztga6] { font-size: 1rem; line-height: 1; }

/* 4-column layout: Ubicación · País · Interacciones · Tendencia.
   (Was 8 columns — Leads/Conversión/Precisión/Provider were trimmed per
   UX simplification request; per-lead precision still surfaces in the
   expandable subrow below.) */
.geo-intel-table .table-header-row[b-h4jv6ztga6],
.geo-intel-table .table-row[b-h4jv6ztga6] {
    grid-template-columns: 1.8fr 1fr 1.2fr 1fr;
}
.geo-intel-row[b-h4jv6ztga6] { cursor: pointer; transition: background 150ms ease; }
.geo-intel-row:hover[b-h4jv6ztga6] { background: var(--dt-surface-hover, rgba(24,62,235,0.04)); }
.geo-intel-row.expanded[b-h4jv6ztga6] { background: var(--dt-surface-hover, rgba(24,62,235,0.06)); }

/* Pulse animation fired from the map via DataTouchMap.highlightLocationRow.
   This class is added imperatively from JS (MapLibre marker click handler),
   so the rule must reach the row even though the JS does not know about the
   Blazor scope attribute — the row IS rendered by Blazor here, so the scoped
   selector resolves correctly without ::deep. */
.geo-intel-row--pulse[b-h4jv6ztga6] { animation: geoRowPulse-b-h4jv6ztga6 1.8s ease; }
@keyframes geoRowPulse-b-h4jv6ztga6 {
    0%   { background: rgba(24,62,235,0.18); box-shadow: inset 3px 0 0 var(--dt-primary-500, #183EEB); }
    60%  { background: rgba(24,62,235,0.08); box-shadow: inset 3px 0 0 var(--dt-primary-500, #183EEB); }
    100% { background: transparent; box-shadow: none; }
}

.col-country[b-h4jv6ztga6]  { font-size: 12px; color: var(--dt-text-secondary, #4B5063); }
.col-trend[b-h4jv6ztga6]    { color: var(--dt-primary-500, #183EEB); display: flex; align-items: center; min-width: 80px; }
/* `.col-precision` and `.col-provider` removed — those table columns were
   deleted to simplify the at-a-glance read. The `.geo-precision-chip` rules
   below are kept because the expandable leads sub-table still uses them. */

.geo-sparkline[b-h4jv6ztga6] { display: block; color: var(--dt-primary-500, #183EEB); }
.geo-sparkline-empty[b-h4jv6ztga6] { color: var(--dt-text-muted, #9ca3af); font-size: 12px; }

/* Precision chips — 5 bands */
.geo-precision-chip[b-h4jv6ztga6] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.2px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.geo-precision-chip .precision-dot[b-h4jv6ztga6] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}
.precision-alta[b-h4jv6ztga6] {
    color: #065F46;
    background: rgba(16, 185, 129, 0.14);
    border-color: rgba(16, 185, 129, 0.28);
}
.precision-media[b-h4jv6ztga6] {
    color: #1E3A8A;
    background: rgba(59, 130, 246, 0.14);
    border-color: rgba(59, 130, 246, 0.28);
}
.precision-aproximada[b-h4jv6ztga6] {
    color: #92400E;
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.32);
}
.precision-dudosa[b-h4jv6ztga6] {
    color: #374151;
    background: rgba(156, 163, 175, 0.18);
    border-color: rgba(156, 163, 175, 0.32);
}
.precision-unknown[b-h4jv6ztga6] {
    color: #6B7280;
    background: transparent;
    border: 1px dashed rgba(156, 163, 175, 0.6);
}

/* Leads subtable expanded below a location row */
.geo-leads-subrow[b-h4jv6ztga6] {
    padding: 10px 12px 14px;
    background: var(--dt-surface-elevated, #F9FAFB);
    border-bottom: 1px solid var(--dt-border-default, #DCDEDD);
    margin-bottom: 4px;
    border-radius: 0 0 8px 8px;
}
.geo-leads-empty[b-h4jv6ztga6] {
    padding: 12px;
    font-size: 12px;
    color: var(--dt-text-muted, #6B6E8F);
    font-style: italic;
    text-align: center;
}
.geo-leads-table[b-h4jv6ztga6] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.geo-leads-header[b-h4jv6ztga6],
.geo-leads-row[b-h4jv6ztga6] {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1.2fr 0.8fr 1fr;
    gap: 8px;
    padding: 6px 4px;
    align-items: center;
    font-size: 12px;
}
.geo-leads-header[b-h4jv6ztga6] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--dt-text-muted, #6B6E8F);
    border-bottom: 1px solid var(--dt-border-default, #DCDEDD);
}
.geo-leads-row[b-h4jv6ztga6] {
    color: var(--dt-text-primary, #01033E);
    border-bottom: 1px solid rgba(220, 222, 221, 0.5);
}
.geo-leads-row:last-child[b-h4jv6ztga6] { border-bottom: none; }
.geo-lead-name[b-h4jv6ztga6] { font-weight: 600; color: var(--dt-text-primary, #01033E); }
.geo-lead-coords code[b-h4jv6ztga6] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    color: var(--dt-text-secondary, #4B5063);
    background: transparent;
}

/* Mobile: stack the executive pills and tighten the table.
   With only 4 columns now, we hide País + Tendencia on small phones so
   Ubicación + Interacciones stay legible without horizontal scroll. */
@media (max-width: 640px) {
    .geo-exec-row[b-h4jv6ztga6] { grid-template-columns: 1fr; }
    .geo-intel-table .table-header-row[b-h4jv6ztga6],
    .geo-intel-table .table-row[b-h4jv6ztga6] {
        grid-template-columns: 1.6fr 1fr;
    }
    .geo-intel-table .col-country[b-h4jv6ztga6],
    .geo-intel-table .col-trend[b-h4jv6ztga6] { display: none; }

    /* Leads sub-table: keep 3 visible columns (Nombre · Captado · Card) on phones. */
    .geo-leads-header[b-h4jv6ztga6],
    .geo-leads-row[b-h4jv6ztga6] {
        grid-template-columns: 1fr 0.8fr 0.8fr;
    }
    .geo-leads-header > :nth-child(n+4)[b-h4jv6ztga6],
    .geo-leads-row  > :nth-child(n+4)[b-h4jv6ztga6] { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE OVERRIDES (formerly inside Dashboard.razor.css @media (max-width: 600px))
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    .locations-panel[b-h4jv6ztga6] {
        padding: 16px !important;
        border-radius: 20px !important;
        background: #FFFFFF !important;
        backdrop-filter: blur(12px) !important;
        border: 1px solid #DCDEDD !important;
        border-top: 1px solid #C0C1C8 !important;
        box-shadow:
            0 2px 4px rgba(1, 3, 62, 0.06),
            0 8px 24px rgba(1, 3, 62, 0.08),
            0 20px 48px rgba(1, 3, 62, 0.06),
            0 0 0 0.5px rgba(1, 3, 62, 0.04) !important;
        overflow: visible !important;
        min-height: 400px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .locations-panel .panel-header[b-h4jv6ztga6] {
        margin-bottom: 8px !important;
    }

    .locations-panel .panel-title[b-h4jv6ztga6] {
        font-size: 16px !important;
    }

    /* Location Highlight */
    .location-highlight[b-h4jv6ztga6] {
        margin-bottom: 12px !important;
    }

    .location-name[b-h4jv6ztga6] {
        font-size: 22px !important;
        font-weight: 700 !important;
    }

    .location-delta[b-h4jv6ztga6] {
        font-size: 12px !important;
    }

    /* Map Container - Full width, increased height for visibility */
    .map-container[b-h4jv6ztga6] {
        width: calc(100% + 32px) !important;
        /* Full width + padding compensation */
        margin-left: -16px !important;
        margin-right: -16px !important;
        height: 280px !important;
        min-height: 280px !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        margin-bottom: 12px !important;
        position: relative !important;
    }

    .map-container.expanded[b-h4jv6ztga6] {
        height: 380px !important;
    }

    .map-top-pill[b-h4jv6ztga6] {
        font-size: 11px !important;
        padding: 6px 12px !important;
    }

    /* Map toggle button - centered pill below map */
    .map-toggle[b-h4jv6ztga6] {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        width: fit-content !important;
        margin: 0 auto 16px !important;
        padding: 10px 24px !important;
        background: #F7F8FC !important;
        border: 1px solid rgba(24, 62, 235, 0.2) !important;
        border-radius: 999px !important;
        color: #01033E !important;
        font-size: 13px !important;
        font-weight: 500 !important;
    }

    .map-toggle svg[b-h4jv6ztga6] {
        width: 16px !important;
        height: 16px !important;
    }

    /* ═══ Locations Analysis Section ═══ */
    .locations-analysis-section[b-h4jv6ztga6] {
        margin-top: 20px !important;
        padding-top: 16px !important;
        border-top: 1px solid #DCDEDD !important;
    }

    .locations-analysis-title[b-h4jv6ztga6] {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #01033E !important;
        margin: 0 0 16px 0 !important;
    }

    /* Location Table - Full table layout with visible headers */
    .location-table[b-h4jv6ztga6] {
        font-size: 12px !important;
        overflow-x: auto !important;
    }

    /* Show table header on mobile - Grid layout */
    .table-header-row[b-h4jv6ztga6] {
        display: grid !important;
        /* 4-col reduced to the 2 visible on mobile (Ubicación · Interacciones)
           after the País + Tendencia hides above. Matches geo-intel-table
           grid-template-columns: 1.6fr 1fr at the same breakpoint. */
        grid-template-columns: 1.6fr 1fr !important;
        gap: 8px !important;
        padding: 10px 0 !important;
        border-bottom: 1px solid #DCDEDD !important;
    }

    .table-header-row span[b-h4jv6ztga6] {
        font-size: 11px !important;
        font-weight: 500 !important;
        color: #6B6E8F !important;
        text-transform: none !important;
    }

    /* Location row - Grid layout matching headers */
    .table-row[b-h4jv6ztga6] {
        display: grid !important;
        /* 4-col reduced to the 2 visible on mobile (Ubicación · Interacciones)
           after the País + Tendencia hides above. Matches geo-intel-table
           grid-template-columns: 1.6fr 1fr at the same breakpoint. */
        grid-template-columns: 1.6fr 1fr !important;
        gap: 8px !important;
        padding: 12px 0 !important;
        align-items: center !important;
        border-bottom: 1px solid #DCDEDD !important;
    }

    .table-row:last-child[b-h4jv6ztga6] {
        border-bottom: none !important;
    }

    .col-location[b-h4jv6ztga6] {
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #01033E !important;
    }

    /* Stats columns */
    .col-stat[b-h4jv6ztga6] {
        font-size: 13px !important;
        color: #6B6E8F !important;
        text-align: center !important;
    }

    /* Remove ::before labels for grid layout */
    .table-row .col-stat[b-h4jv6ztga6]::before {
        content: none !important;
    }

    /* Mobile `.col-stat.conversion` rule removed — the Conversión column no
       longer exists in the markup; this rule was dead code. */
}
/* _content/DataTouch.Web/Components/Pages/DashboardWidgets/GlobalFilterBar.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════════════════════════ */

.date-selector[b-ou4k9981cy] {
    position: relative;
    display: flex;
    align-items: center;
}

.date-dropdown[b-ou4k9981cy] {
    appearance: none;
    background: var(--dt-surface-2, #F3F4F8);
    border: 1px solid var(--dt-border-default, #DCDEDD);
    border-radius: var(--dt-radius-lg, 12px);
    padding: 10px 40px 10px 16px;
    color: var(--dt-text-primary, #01033E);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    min-width: 140px;
    transition: all var(--dt-transition-fast, 150ms ease);
}

.date-dropdown:hover[b-ou4k9981cy] {
    border-color: var(--dt-primary-500, #183EEB);
}

.date-dropdown:focus[b-ou4k9981cy] {
    outline: none;
    border-color: var(--dt-primary-500, #183EEB);
    box-shadow: 0 0 0 3px rgba(24, 62, 235, 0.15);
}

.dropdown-icon[b-ou4k9981cy] {
    position: absolute;
    right: 12px;
    width: 16px;
    height: 16px;
    color: var(--dt-text-secondary, #3E4188);
    pointer-events: none;
}
/* _content/DataTouch.Web/Components/Pages/DashboardWidgets/HighIntentPanel.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════════
   HIGH INTENT PANEL — Premium redesign matching the reference mockup.

   Structure:
     · Header (title + subtitle + actions)
     · Hero block (CLIENTES label + big number + decorative spark bars)
     · 2×2 stats grid (Contactos guardados · Reuniones · Clics WhatsApp · Llamada)
     · Actividad reciente (feed or empty-state placeholder)
     · Top Visitors table (kept verbatim — only renders when data exists)

   All colors / spacing / radii flow through design-tokens v2.1.0 so the panel
   tracks theme changes consistently with the rest of the dashboard.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Panel surface — matches CardInteractionsPanel for visual parity. */
.high-intent-panel[b-mcbheofo57] {
    background: var(--dt-surface-1);
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: var(--dt-space-5);
}

/* ══════════════════════════════════════════════════════════════════════════════
   HEADER (title + subtitle + actions)
   ══════════════════════════════════════════════════════════════════════════════ */

.hi-header[b-mcbheofo57] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--dt-space-4);
    flex-wrap: wrap;
}

.hi-header__text[b-mcbheofo57] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Reference card-head: h3 13.5px weight 600, sub 12px. */
.hi-title[b-mcbheofo57] {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--dt-text-primary);
    line-height: 1.2;
    letter-spacing: -0.005em;
}

.hi-subtitle[b-mcbheofo57] {
    margin: 0;
    font-size: 12px;
    color: var(--dt-text-muted);
}

.hi-header__actions[b-mcbheofo57] {
    display: flex;
    align-items: center;
    gap: var(--dt-space-2);
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   HERO — "Clientes" label + big number + decorative spark bars
   ══════════════════════════════════════════════════════════════════════════════ */

.hi-hero[b-mcbheofo57] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--dt-space-4);
}

.hi-hero__main[b-mcbheofo57] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* Reference HTML "high intent" card:
     · label 11px uppercase letter-spacing .06em
     · big-num 40px weight 600 letter-spacing -0.03em
     · sublabel 12.5px
     · spark 74×50 with 8px-wide bars rounded 2px */
.hi-hero__label[b-mcbheofo57] {
    font-size: 11px;
    font-weight: 600;
    color: var(--dt-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.hi-hero__value[b-mcbheofo57] {
    font-size: 40px;
    font-weight: 600;
    color: var(--dt-text-primary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    margin-top: 4px;
}

.hi-hero__sublabel[b-mcbheofo57] {
    font-size: 12.5px;
    color: var(--dt-text-muted);
    margin-top: 4px;
}

.hi-hero__spark[b-mcbheofo57] {
    width: 74px;
    height: 50px;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   2×2 STATS GRID
   ══════════════════════════════════════════════════════════════════════════════ */

/* Reference HTML .intent-grid: gap 8px (was 12), margin-top 14px.
   .intent-cell: padding 10px 12px, label 10.5px, value-bold 18px (smaller
   than what we had at 24 — increases hero/cell contrast). */
.hi-stats[b-mcbheofo57] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 14px;
}

.hi-stat[b-mcbheofo57] {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 6px;
    row-gap: 4px;
    padding: 10px 12px;
    background: transparent;          /* reference: no fill, just border */
    border: 1px solid var(--dt-border-default);
    border-radius: 8px;
}

.hi-stat__label[b-mcbheofo57] {
    grid-column: 1 / -1;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--dt-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

.hi-stat__value[b-mcbheofo57] {
    grid-column: 1;
    font-size: 18px;
    font-weight: 600;
    color: var(--dt-text-primary);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.hi-stat__delta[b-mcbheofo57] {
    grid-column: 2;
    align-self: baseline;
    font-size: 10.5px;
    color: var(--dt-text-muted);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ACTIVIDAD RECIENTE
   ══════════════════════════════════════════════════════════════════════════════ */

.hi-activity[b-mcbheofo57] {
    display: flex;
    flex-direction: column;
    gap: var(--dt-space-3);
}

/* Reference .act-head: 10.5px uppercase weight 600 letter-spacing .05em.
   Reference activity li: 12px color ink-2. */
.hi-activity__title[b-mcbheofo57] {
    margin: 0 0 6px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--dt-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hi-activity__empty[b-mcbheofo57] {
    margin: 0;
    font-size: 12px;
    color: var(--dt-text-muted);
}

.hi-activity__list[b-mcbheofo57] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.hi-activity__row[b-mcbheofo57] {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: var(--dt-space-3);
    padding: var(--dt-space-2) 0;
    border-bottom: 1px dashed var(--dt-border-default);
}

.hi-activity__row:last-child[b-mcbheofo57] {
    border-bottom: none;
}

.hi-activity__row.clickable[b-mcbheofo57] {
    cursor: pointer;
    transition: background var(--dt-transition-fast);
}

.hi-activity__row.clickable:hover[b-mcbheofo57] {
    background: var(--dt-surface-2);
}

.hi-activity__icon[b-mcbheofo57] {
    width: 28px;
    height: 28px;
    border-radius: var(--dt-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hi-activity__body[b-mcbheofo57] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.hi-activity__name[b-mcbheofo57] {
    font-size: var(--dt-font-sm);
    font-weight: var(--dt-font-weight-semibold);
    color: var(--dt-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hi-activity__action[b-mcbheofo57] {
    font-size: var(--dt-font-xs);
    color: var(--dt-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hi-activity__time[b-mcbheofo57] {
    font-size: var(--dt-font-xs);
    color: var(--dt-text-muted);
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════════
   TOP VISITORS TABLE (Alta Intención — PDR §15.6 #6)
   Visitantes con mayor intent score. Filas clickables navegan a /leads/{id}.
   Preserved verbatim from previous design — only the wrapper class added a
   `top-visitors` margin-top to separate it from .hi-activity above.
   ══════════════════════════════════════════════════════════════════════════════ */

.top-visitors[b-mcbheofo57] {
    margin-top: var(--dt-space-2);
    padding-top: var(--dt-space-4);
    border-top: 1px solid var(--dt-border-default);
}

.top-visitors-title[b-mcbheofo57] {
    font-size: 13px;
    font-weight: 600;
    color: var(--dt-text-primary);
    margin: 0 0 8px 0;
    letter-spacing: -0.01em;
}

.top-visitors-table[b-mcbheofo57] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.top-visitors-table thead th[b-mcbheofo57] {
    text-align: left;
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dt-text-muted);
    padding: 6px 8px;
    border-bottom: 1px solid var(--dt-border-default);
}

.top-visitors-table .tv-col-score[b-mcbheofo57]   { width: 56px;  text-align: center; }
.top-visitors-table .tv-col-seen[b-mcbheofo57]    { width: 84px; }
.top-visitors-table .tv-col-source[b-mcbheofo57]  { width: 80px; }
.top-visitors-table .tv-col-lead[b-mcbheofo57]    { width: auto; }

.tv-row td[b-mcbheofo57] {
    padding: 8px;
    border-bottom: 1px solid rgba(220, 222, 221, 0.5);
    vertical-align: middle;
}

.tv-row.clickable[b-mcbheofo57] { cursor: pointer; }
.tv-row.clickable:hover[b-mcbheofo57] { background: var(--dt-surface-2); }

.tv-visitor-key[b-mcbheofo57] {
    font-family: 'JetBrains Mono', Menlo, Consolas, monospace;
    font-size: 11px;
    color: var(--dt-text-primary);
    font-weight: 500;
}

.tv-score-pill[b-mcbheofo57] {
    display: inline-block;
    min-width: 32px;
    padding: 2px 8px;
    border-radius: 12px;
    background: rgba(24, 62, 235, 0.10);
    color: var(--dt-primary-500);
    font-weight: 700;
    font-size: 11px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.tv-source-chip[b-mcbheofo57] {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--dt-surface-2);
    color: var(--dt-text-muted);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.tv-source-chip--empty[b-mcbheofo57] { opacity: 0.4; }

.tv-lead-match[b-mcbheofo57] {
    color: var(--dt-primary-500);
    font-weight: 600;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 100%;
}

.tv-lead-empty[b-mcbheofo57] {
    color: var(--dt-text-muted);
    font-size: 11px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ICON BADGE COLOR CLASSES — used by .hi-activity__icon via GetEventTypeBadgeClass.
   Keep these in sync with Dashboard.razor.css ::deep .badge-* rules; the activity
   feed uses a subset (contact/form/default/qr/nfc).
   ══════════════════════════════════════════════════════════════════════════════ */

.badge-default[b-mcbheofo57] {
    background: var(--dt-surface-2);
    color: var(--dt-text-secondary);
    border: 1px solid var(--dt-border-default);
}

.badge-whatsapp[b-mcbheofo57] {
    background: rgba(37, 211, 102, 0.12);
    color: #25D366;
    border: 1px solid rgba(37, 211, 102, 0.2);
}

.badge-call[b-mcbheofo57] {
    background: rgba(128, 125, 254, 0.10);
    color: var(--dt-accent-500);
    border: 1px solid rgba(128, 125, 254, 0.2);
}

.badge-calendar[b-mcbheofo57] {
    background: rgba(128, 125, 254, 0.10);
    color: var(--dt-accent-500);
    border: 1px solid rgba(128, 125, 254, 0.2);
}

.badge-contact[b-mcbheofo57] {
    background: var(--dt-success-bg);
    color: var(--dt-success);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.badge-form[b-mcbheofo57] {
    background: rgba(59, 130, 246, 0.12);
    color: #3B82F6;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.badge-qr[b-mcbheofo57] {
    background: rgba(128, 125, 254, 0.12);
    color: var(--dt-accent-500);
    border: 1px solid rgba(128, 125, 254, 0.2);
}

.badge-nfc[b-mcbheofo57] {
    background: rgba(34, 197, 94, 0.12);
    color: #22C55E;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — drawer-open + viewport breakpoints (preserved from previous)
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1660px) {
    .drawer-open .high-intent-panel[b-mcbheofo57] {
        grid-column: span 2;
    }
}

@media (max-width: 1140px) {
    .drawer-open .high-intent-panel[b-mcbheofo57] {
        grid-column: span 1;
    }
}

@media (max-width: 1400px) {
    .high-intent-panel[b-mcbheofo57] {
        grid-column: span 2;
    }
}

@media (max-width: 900px) {
    .high-intent-panel[b-mcbheofo57] {
        grid-column: span 1;
    }
}

@media (max-width: 600px) {
    .hi-hero__value[b-mcbheofo57] {
        font-size: 30px;
    }

    .hi-stat__value[b-mcbheofo57] {
        font-size: 22px;
    }

    /* Stack the 2×2 grid to a single column on phones so labels don't truncate. */
    .hi-stats[b-mcbheofo57] {
        grid-template-columns: 1fr;
    }
}
/* _content/DataTouch.Web/Components/Pages/DashboardWidgets/InteractionsVsLeadsPanel.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════════
   InteractionsVsLeadsPanel — scoped CSS (Plan 03 Task 7)
   Migrated verbatim from Dashboard.razor.css. The base, mobile, and widget-id
   override blocks all live here so the CSS travels with the component.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════════
   ANALYTICS WIDGET - Premium Mockup Redesign (base)
   ══════════════════════════════════════════════════════════════════════════════ */

/* Tightened body padding — was 16, now 14, matching the KpiCard primitive
   and giving the chart slightly more horizontal real estate. */
.analytics-widget[b-7ch9xtu90i] {
    display: flex;
    flex-direction: column;
    padding: 14px;
    position: relative;
}

.analytics-widget.loading[b-7ch9xtu90i] {
    min-height: 320px;
}

/* Header */
.analytics-header[b-7ch9xtu90i] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.analytics-header-left[b-7ch9xtu90i] {
    flex: 1;
    min-width: 200px;
}

/* Reference card-head: h3 13.5px weight 600, sub 12px (was 24/13). */
.analytics-title[b-7ch9xtu90i] {
    font-size: 13.5px;
    font-weight: 600;
    color: #01033E;
    margin: 0;
    letter-spacing: -0.005em;
}

.analytics-subtitle[b-7ch9xtu90i] {
    font-size: 12px;
    color: #6B6E8F;
}

.analytics-header-right[b-7ch9xtu90i] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Range pill — local copy for the mobile-range-pill button (the dropdown
   variant lives inside WidgetRangeDropdown's own scoped CSS). */
.range-pill[b-7ch9xtu90i] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid rgba(24, 62, 235, 0.4);
    border-radius: 24px;
    color: #01033E;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 150ms ease;
    white-space: nowrap;
}

.range-pill:hover[b-7ch9xtu90i] {
    border-color: #183EEB;
    background: rgba(24, 62, 235, 0.06);
}

/* Mobile Controls (hidden on desktop) */
.analytics-mobile-controls[b-7ch9xtu90i] {
    display: none;
}

/* Mobile full-width range pill */
.mobile-range-pill.full-width[b-7ch9xtu90i] {
    width: 100%;
}

.mobile-range-pill.full-width .range-pill[b-7ch9xtu90i] {
    width: 100%;
    justify-content: space-between;
}

/* Reference HTML "chart-sum" 3-col header: padding 14px 16px,
   label 11px uppercase letter-spacing .06em,
   value 22px weight 600 letter-spacing -0.02em (was 32px).
   Switched to grid 3-col with bottom border to mimic the ref's segmented row. */
.analytics-kpis[b-7ch9xtu90i] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-bottom: 12px;
    border: 1px solid #ECEEF2;
    border-radius: 8px;
    overflow: hidden;
}

.analytics-kpi-card[b-7ch9xtu90i] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 14px;
    background: transparent;
    border: 0;
    border-right: 1px solid #ECEEF2;
    border-radius: 0;
}

.analytics-kpi-card:last-child[b-7ch9xtu90i] { border-right: 0; }

.kpi-title[b-7ch9xtu90i] {
    font-size: 11px;
    font-weight: 600;
    color: #6B6E8F;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.kpi-number[b-7ch9xtu90i] {
    /* Tightened inline-KPI scale (was 22, now 18) so these inner cards
       defer visually to the top KPI row's 24px. Hierarchy: top KPIs >
       chart inner KPIs > body text. */
    font-size: 18px;
    font-weight: 600;
    color: #01033E;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.kpi-change[b-7ch9xtu90i] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
}

.kpi-change.positive[b-7ch9xtu90i] {
    color: #16A34A;
}

.kpi-change.negative[b-7ch9xtu90i] {
    color: #DC2626;
}

.kpi-change .info-icon[b-7ch9xtu90i] {
    margin-left: 4px;
    cursor: help;
}

.kpi-change .info-icon svg[b-7ch9xtu90i] {
    width: 14px;
    height: 14px;
    opacity: 0.5;
}

.kpi-change .info-icon:hover svg[b-7ch9xtu90i] {
    opacity: 1;
}

/* ─── Mobile-only elements: hidden on desktop ─── */
.analytics-conv-badge[b-7ch9xtu90i] {
    display: none;
}

.kpi-change-compact[b-7ch9xtu90i] {
    display: none;
}

.kpi-change-full[b-7ch9xtu90i] {
    display: inline;
}

/* ECharts Container - Auto-responsive.
   Trimmed from 280px → 240px on desktop. The previous height made the chart
   visually dominate the row; 240px keeps the bars legible while letting the
   widget breathe with the rest of the dashboard. */
.analytics-echart[b-7ch9xtu90i] {
    width: 100%;
    height: 240px;
    margin: 0.25rem 0;
}

/* Taller on mobile for better visibility */
@media (max-width: 768px) {
    .analytics-echart[b-7ch9xtu90i] {
        height: clamp(300px, 50vh, 420px);
        margin: 0.5rem 0;
    }
}

/* ─── Premium Footer Strip with Legend Pills ─── */
.analytics-footer-strip[b-7ch9xtu90i] {
    margin-top: 0.5rem;
}

.footer-divider[b-7ch9xtu90i] {
    height: 1px;
    background: linear-gradient(90deg,
            transparent,
            rgba(128, 125, 254, 0.3) 20%,
            rgba(24, 62, 235, 0.2) 80%,
            transparent);
    margin-bottom: 12px;
}

.footer-content[b-7ch9xtu90i] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 36px;
}

.legend-pills[b-7ch9xtu90i] {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex: 1;
}

.legend-pill[b-7ch9xtu90i] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: #F7F8FC;
    border: 1px solid #DCDEDD;
    border-radius: 9999px;
    cursor: default;
    transition: all 150ms ease;
}

.legend-pill:hover[b-7ch9xtu90i] {
    background: #EDF0FD;
    border-color: #C0C1C8;
}

.pill-dot[b-7ch9xtu90i] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Pill dots match the bar gradients exactly (Interacciones lavender,
   Leads brand-blue) so the legend reads as the chart's key. */
.pill-dot.interactions[b-7ch9xtu90i] {
    background: linear-gradient(180deg, #A8A6FF, #807DFE);
    box-shadow: 0 0 6px rgba(128, 125, 254, 0.3);
}

.pill-dot.leads[b-7ch9xtu90i] {
    background: linear-gradient(180deg, #2456F5, #183EEB);
    box-shadow: 0 0 6px rgba(24, 62, 235, 0.3);
}

.pill-label[b-7ch9xtu90i] {
    font-size: 12px;
    font-weight: 500;
    color: #3E4188;
}

.footer-insights[b-7ch9xtu90i] {
    font-size: 11px;
    color: #6B6E8F;
    text-align: right;
    flex-shrink: 0;
}

.footer-insights strong[b-7ch9xtu90i] {
    color: #01033E;
    font-weight: 600;
}

@media (max-width: 768px) {
    .footer-content[b-7ch9xtu90i] {
        flex-direction: column;
        gap: 8px;
    }

    .footer-insights[b-7ch9xtu90i] {
        text-align: center;
    }
}

/* Interacciones vs. Leads chart — empty state shown instead of bars when there
   is zero interaction data in the selected period. Matches the vertical rhythm
   of the chart itself so the panel height doesn't collapse. */
.analytics-empty-state[b-7ch9xtu90i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    padding: 32px 16px;
    text-align: center;
    gap: 10px;
}

.analytics-empty-icon[b-7ch9xtu90i] {
    width: 44px;
    height: 44px;
    color: #6B6E8F;
    opacity: 0.45;
    margin-bottom: 4px;
}

.analytics-empty-text[b-7ch9xtu90i] {
    font-size: 14px;
    font-weight: 600;
    color: #4A4D6B;
}

.analytics-empty-sub[b-7ch9xtu90i] {
    font-size: 12px;
    color: #6B6E8F;
    max-width: 320px;
    line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ANALYTICS WIDGET - Mobile Responsive (Mockup Match)
   Target: 342px+ width, premium look, legible at a glance
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .analytics-widget[b-7ch9xtu90i] {
        padding: 20px 16px !important;
        border-radius: 16px !important;
        background: #FFFFFF !important;
        border: 1px solid #DCDEDD !important;
    }

    /* Header - title centered top, controls row below */
    .analytics-header[b-7ch9xtu90i] {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        margin-bottom: 16px !important;
        gap: 8px !important;
    }

    .analytics-header-left[b-7ch9xtu90i] {
        width: 100% !important;
        text-align: center !important;
        min-width: 0 !important;
    }

    .analytics-title[b-7ch9xtu90i] {
        font-size: 0.85rem !important;
        font-weight: 700 !important;
        color: #6B6E8F !important;
        margin: 0 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.06em !important;
    }

    .analytics-subtitle[b-7ch9xtu90i] {
        display: none !important;
    }

    .analytics-header-right[b-7ch9xtu90i] {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .range-pill[b-7ch9xtu90i] {
        padding: 8px 14px !important;
        font-size: 12px !important;
        border-radius: 20px !important;
        border: 1px solid rgba(24, 62, 235, 0.25) !important;
        background: #F7F8FC !important;
    }

    /* Hide mobile controls (we show desktop header on mobile now) */
    .analytics-mobile-controls[b-7ch9xtu90i] {
        display: none !important;
    }

    /* ─── Conversion Badge in Header ─── */
    .analytics-conv-badge[b-7ch9xtu90i] {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        padding: 5px 10px !important;
        border-radius: 20px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        background: rgba(24, 62, 235, 0.10) !important;
        border: 1px solid rgba(24, 62, 235, 0.18) !important;
    }

    .conv-badge-label[b-7ch9xtu90i] {
        font-size: 9px !important;
        font-weight: 700 !important;
        letter-spacing: 0.05em !important;
        color: #6B6E8F !important;
    }

    .conv-badge-value[b-7ch9xtu90i] {
        font-size: 12px !important;
        font-weight: 700 !important;
        color: #01033E !important;
    }

    /* ─── KPI Cards: 2 Horizontal Mini-Cards ─── */
    .analytics-kpis[b-7ch9xtu90i] {
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        margin-bottom: 16px !important;
    }

    .analytics-kpi-card[b-7ch9xtu90i] {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 14px 16px !important;
        background: #F7F8FC !important;
        border: 1px solid #DCDEDD !important;
        border-radius: 12px !important;
        gap: 4px !important;
        min-height: 0 !important;
    }

    /* Hide 3rd card (Conversión) — now lives as badge in header */
    .analytics-kpi-conversion[b-7ch9xtu90i] {
        display: none !important;
    }

    .analytics-kpi-card .kpi-title[b-7ch9xtu90i] {
        font-size: 10px !important;
        font-weight: 600 !important;
        color: #6B6E8F !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        order: 1 !important;
        margin-bottom: 2px !important;
    }

    .analytics-kpi-card .kpi-number[b-7ch9xtu90i] {
        font-size: 1.75rem !important;
        font-weight: 700 !important;
        color: #01033E !important;
        line-height: 1.1 !important;
        order: 2 !important;
        margin: 0 !important;
    }

    /* Show compact delta, hide full text */
    .kpi-change-compact[b-7ch9xtu90i] {
        display: inline !important;
    }

    .kpi-change-full[b-7ch9xtu90i] {
        display: none !important;
    }

    .analytics-kpi-card .kpi-change[b-7ch9xtu90i] {
        font-size: 12px !important;
        font-weight: 600 !important;
        order: 3 !important;
        display: flex !important;
        align-items: center !important;
        gap: 2px !important;
    }

    .analytics-kpi-card .kpi-change.positive[b-7ch9xtu90i] {
        color: #22C55E !important;
    }

    .analytics-kpi-card .kpi-change.negative[b-7ch9xtu90i] {
        color: #EF4444 !important;
    }

    /* ─── Footer with Insights ─── */
    .footer-insights[b-7ch9xtu90i] {
        font-size: 12px !important;
        color: #6B6E8F !important;
    }

    .footer-insights strong[b-7ch9xtu90i] {
        color: #01033E !important;
        font-weight: 600 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LARGE MOBILE (430–599px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 599px) and (min-width: 430px) {
    .analytics-widget[b-7ch9xtu90i] {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SMALL TABLET (600–767px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) and (min-width: 600px) {
    .analytics-widget[b-7ch9xtu90i] {
        width: 100% !important;
        max-width: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SM MOBILE (360–429px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 431px) and (min-width: 360px) {
    .analytics-widget[b-7ch9xtu90i] {
        padding: 16px 14px !important;
    }

    .analytics-title[b-7ch9xtu90i] {
        font-size: 0.8rem !important;
    }

    .range-pill[b-7ch9xtu90i] {
        padding: 6px 12px !important;
        font-size: 11px !important;
    }

    .analytics-conv-badge[b-7ch9xtu90i] {
        padding: 4px 8px !important;
    }
    .conv-badge-label[b-7ch9xtu90i] { font-size: 8px !important; }
    .conv-badge-value[b-7ch9xtu90i] { font-size: 11px !important; }

    .analytics-kpi-card[b-7ch9xtu90i] {
        padding: 10px 12px !important;
    }

    .analytics-kpi-card .kpi-title[b-7ch9xtu90i] {
        font-size: 9px !important;
    }

    .analytics-kpi-card .kpi-number[b-7ch9xtu90i] {
        font-size: 1.5rem !important;
    }

    .analytics-kpi-card .kpi-change[b-7ch9xtu90i] {
        font-size: 11px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   XS MOBILE (320–359px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 359px) and (min-width: 320px) {
    .analytics-widget[b-7ch9xtu90i] {
        padding: 14px 10px !important;
    }

    .analytics-title[b-7ch9xtu90i] {
        font-size: 0.75rem !important;
    }

    .range-pill[b-7ch9xtu90i] {
        padding: 5px 10px !important;
        font-size: 10px !important;
    }

    .analytics-conv-badge[b-7ch9xtu90i] { padding: 3px 6px !important; gap: 2px !important; }
    .conv-badge-label[b-7ch9xtu90i] { font-size: 7px !important; }
    .conv-badge-value[b-7ch9xtu90i] { font-size: 10px !important; }

    .analytics-kpi-card[b-7ch9xtu90i] {
        padding: 8px 10px !important;
        gap: 2px !important;
    }

    .analytics-kpi-card .kpi-title[b-7ch9xtu90i] {
        font-size: 8px !important;
    }

    .analytics-kpi-card .kpi-number[b-7ch9xtu90i] {
        font-size: 1.3rem !important;
    }

    .analytics-kpi-card .kpi-change[b-7ch9xtu90i] {
        font-size: 10px !important;
    }

    .footer-insights[b-7ch9xtu90i] {
        font-size: 10px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MICRO MOBILE (0–319px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 319px) {
    .analytics-widget[b-7ch9xtu90i] {
        padding: 12px 8px !important;
    }

    .analytics-title[b-7ch9xtu90i] {
        font-size: 0.7rem !important;
    }

    .range-pill[b-7ch9xtu90i] {
        padding: 4px 8px !important;
        font-size: 9px !important;
    }

    .conv-badge-label[b-7ch9xtu90i] { display: none !important; }
    .conv-badge-value[b-7ch9xtu90i] { font-size: 9px !important; }

    .analytics-kpi-card[b-7ch9xtu90i] {
        padding: 6px 8px !important;
        gap: 2px !important;
    }

    .analytics-kpi-card .kpi-title[b-7ch9xtu90i] {
        font-size: 7px !important;
    }

    .analytics-kpi-card .kpi-number[b-7ch9xtu90i] {
        font-size: 1.1rem !important;
    }

    .analytics-kpi-card .kpi-change[b-7ch9xtu90i] {
        font-size: 9px !important;
    }

    .footer-insights[b-7ch9xtu90i] {
        font-size: 9px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   WIDGET: Interacciones vs. Leads — Responsive overrides (scoped) v5
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Base (applies to all sizes) ── */
#widget-interactions-leads[b-7ch9xtu90i] {
    padding: 20px 20px 14px;
    overflow: hidden;
    /* align-self not set → CSS Grid stretch (matches neighbor height in 2-col) */
}

#widget-interactions-leads .analytics-header[b-7ch9xtu90i] {
    margin-bottom: 14px;
    align-items: center;
}

#widget-interactions-leads .analytics-kpis[b-7ch9xtu90i] { gap: 10px; margin-bottom: 8px; }

#widget-interactions-leads .analytics-kpi-card[b-7ch9xtu90i] {
    padding: 10px 14px;
    border-color: rgba(1, 3, 62, 0.08);
    border-radius: 10px;
    gap: 4px;
}

#widget-interactions-leads .kpi-title[b-7ch9xtu90i]  { font-size: 10px; letter-spacing: 0.5px; }
#widget-interactions-leads .kpi-number[b-7ch9xtu90i] { font-size: 1.6rem; }

/* ── 2-col zone (≥1351px): chart grows to fill grid-stretched widget height ── */
#widget-interactions-leads .analytics-echart[b-7ch9xtu90i] {
    flex: 1;
    min-height: 220px;
    margin: 0;
}

#widget-interactions-leads .analytics-footer-strip[b-7ch9xtu90i] { margin-top: 4px; }
#widget-interactions-leads .footer-divider[b-7ch9xtu90i]        { margin-bottom: 8px; }
#widget-interactions-leads .legend-pill[b-7ch9xtu90i]  { padding: 5px 10px; font-size: 12px; gap: 6px; }
#widget-interactions-leads .footer-insights[b-7ch9xtu90i] { font-size: 11px; }

/* ── Stacked zone (≤1350px): .main-row is 1-col, no neighbor → fixed height ── */
@media (max-width: 1350px) {
    #widget-interactions-leads .analytics-echart[b-7ch9xtu90i] {
        flex: none;
        height: 280px;
        min-height: unset;
    }
    #widget-interactions-leads .analytics-kpis[b-7ch9xtu90i] { gap: 8px; }
    #widget-interactions-leads .analytics-kpi-card[b-7ch9xtu90i] { padding: 9px 12px; }
    #widget-interactions-leads .kpi-number[b-7ch9xtu90i] { font-size: 1.5rem; }
    #widget-interactions-leads .legend-pill[b-7ch9xtu90i] { padding: 4px 9px; }
}

/* ── Narrow stacked (≤900px): slightly smaller chart ── */
@media (max-width: 900px) {
    #widget-interactions-leads .analytics-echart[b-7ch9xtu90i] { height: 260px; }
}

/* ── Mobile (≤600px): compact + hide Conversión KPI (badge in header covers it) ── */
@media (max-width: 600px) {
    #widget-interactions-leads[b-7ch9xtu90i] { padding: 14px !important; }
    #widget-interactions-leads .analytics-header[b-7ch9xtu90i] { margin-bottom: 10px !important; }
    #widget-interactions-leads .analytics-kpis[b-7ch9xtu90i] { gap: 6px !important; margin-bottom: 14px !important; }
    #widget-interactions-leads .analytics-kpi-card[b-7ch9xtu90i] { padding: 8px 10px !important; }
    #widget-interactions-leads .kpi-number[b-7ch9xtu90i] { font-size: 1.375rem !important; }
    #widget-interactions-leads .analytics-echart[b-7ch9xtu90i] { height: 260px !important; }
    #widget-interactions-leads .analytics-kpi-conversion[b-7ch9xtu90i] { display: none !important; }
    #widget-interactions-leads .legend-pill[b-7ch9xtu90i] { padding: 4px 8px !important; font-size: 11px !important; }
    #widget-interactions-leads .footer-insights[b-7ch9xtu90i] { font-size: 10px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   LOCAL FILTER INDICATORS — local copies for the mobile-range-pill button.
   The desktop dropdown variant has its own copies in WidgetRangeDropdown's
   scoped CSS; the parent (Dashboard.razor.css) keeps the unscoped originals
   for any remaining call sites.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Range pill with active local filter */
.range-pill.local-active[b-7ch9xtu90i] {
    border-color: var(--dt-accent-500, #807DFE);
    background: rgba(128, 125, 254, 0.08);
    position: relative;
}

.range-pill.local-active[b-7ch9xtu90i]::before {
    content: "";
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: var(--dt-accent-500, #807DFE);
    border-radius: 50%;
    border: 2px solid var(--dt-surface-card, #FFFFFF);
    z-index: 1;
}

/* Local filter indicator dot inside button (mobile-range-pill button). */
.local-indicator[b-7ch9xtu90i] {
    margin-left: 4px;
    opacity: 0.8;
    flex-shrink: 0;
}

/* Mobile adjustments for local indicators. */
@media (max-width: 600px) {
    .range-pill.local-active[b-7ch9xtu90i]::before {
        width: 6px;
        height: 6px;
        top: -1px;
        right: -1px;
    }

    .local-indicator[b-7ch9xtu90i] {
        width: 6px;
        height: 6px;
    }
}

/* Chevron rotation for the mobile-range-pill button. */
.range-pill .chevron[b-7ch9xtu90i] {
    width: 16px;
    height: 16px;
    transition: transform 200ms ease;
}

.range-pill .chevron.open[b-7ch9xtu90i] {
    transform: rotate(180deg);
}
/* _content/DataTouch.Web/Components/Pages/DashboardWidgets/KpisRow.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════════
   KPI SECTION — Layout shell only.
   Card visuals live in <KpiCard> primitive (Components/Shared/Primitives/KpiCard.razor.css).
   This file owns: section margins, desktop grid, mobile carousel, mobile indicators.
   ══════════════════════════════════════════════════════════════════════════════ */

.kpi-section[b-2f3xmzo3uh] {
    /* Tightened section spacing — was space-2/space-6, now space-1/space-4.
       Reduces vertical "air" between page header and KPI row + between KPI
       row and the chart panel below. */
    margin: var(--dt-space-1) 0 var(--dt-space-4);
    background: transparent;
}

.kpi-carousel[b-2f3xmzo3uh] {
    overflow: visible;
    background: transparent;
}

/* Desktop: 4-up grid that auto-fits 3/4/5 cards based on DashCfg flags.
   Gap tightened to 12px (was 14) to match the harmonized dt-card spacing. */
.kpi-track[b-2f3xmzo3uh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* Allow grid children to shrink below intrinsic content width. */
.kpi-track > *[b-2f3xmzo3uh] {
    min-width: 0;
}

/* Mobile carousel indicators are hidden on desktop. */
.kpi-indicators[b-2f3xmzo3uh] {
    display: none;
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
    .kpi-track[b-2f3xmzo3uh] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile (<=600px): horizontal scroll-snap carousel + visible dot indicators. */
@media (max-width: 600px) {
    .kpi-section[b-2f3xmzo3uh] {
        margin: var(--dt-space-4) 0;
        padding: 0 var(--dt-space-2);
    }

    .kpi-carousel[b-2f3xmzo3uh] {
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .kpi-carousel[b-2f3xmzo3uh]::-webkit-scrollbar {
        display: none;
    }

    .kpi-track[b-2f3xmzo3uh] {
        display: flex;
        gap: var(--dt-space-3);
        padding-right: var(--dt-space-2);
        width: max-content;
    }

    /* ::deep reaches into the <KpiCard> primitive's scoped .dt-kpi so each card
       behaves as a snap-aligned carousel item without changing the primitive itself. */
    .kpi-track[b-2f3xmzo3uh]  .dt-kpi {
        flex: 0 0 clamp(272px, 78vw, 320px);
        scroll-snap-align: start;
        min-width: 260px;
        max-width: 320px;
    }

    .kpi-indicators[b-2f3xmzo3uh] {
        display: flex;
        justify-content: center;
        gap: var(--dt-space-2);
        margin-top: var(--dt-space-3);
    }

    .kpi-indicators .indicator[b-2f3xmzo3uh] {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--dt-border-default);
        transition: all var(--dt-transition-fast);
        cursor: pointer;
    }

    .kpi-indicators .indicator.active[b-2f3xmzo3uh] {
        width: 24px;
        border-radius: var(--dt-radius-sm);
        background: linear-gradient(90deg, var(--dt-primary-500) 0%, var(--dt-accent-500) 100%);
    }
}
/* _content/DataTouch.Web/Components/Pages/DashboardWidgets/MobileHeroCard.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE HERO CARD — Hidden on desktop, visible on mobile.
   Plan 04.1: ported to design-tokens v2.1.0; markup untouched.
   ══════════════════════════════════════════════════════════════════════════════ */

.mobile-hero-card[b-iriatvrnec] {
    display: none;
}

@media (max-width: 600px) {
    .mobile-hero-card[b-iriatvrnec] {
        margin: var(--dt-space-4);
        padding: var(--dt-space-6) var(--dt-space-5);
        background: var(--dt-surface-1);
        border: 1px solid var(--dt-border-default);
        border-radius: var(--dt-radius-xl);
        box-shadow: var(--dt-shadow-md);
    }

    .hero-kpi[b-iriatvrnec] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--dt-space-1);
        margin-bottom: var(--dt-space-5);
    }

    .hero-value[b-iriatvrnec] {
        font-size: var(--dt-font-4xl);
        font-weight: var(--dt-font-weight-bold);
        color: var(--dt-text-primary);
        line-height: 1;
        font-variant-numeric: tabular-nums;
    }

    .hero-label[b-iriatvrnec] {
        font-size: var(--dt-font-sm);
        font-weight: var(--dt-font-weight-medium);
        color: var(--dt-text-muted);
    }

    .hero-delta[b-iriatvrnec] {
        font-size: var(--dt-font-sm);
        font-weight: var(--dt-font-weight-semibold);
        padding: 4px 12px;
        border-radius: 999px;
        margin-top: var(--dt-space-1);
        font-variant-numeric: tabular-nums;
    }

    .hero-delta.positive[b-iriatvrnec] {
        background: var(--dt-success-bg);
        color: var(--dt-success);
    }

    .hero-delta.negative[b-iriatvrnec] {
        background: var(--dt-danger-bg);
        color: var(--dt-danger);
    }

    .hero-date-chips[b-iriatvrnec] {
        display: flex;
        justify-content: center;
        gap: var(--dt-space-2);
    }

    .date-chip[b-iriatvrnec] {
        padding: var(--dt-space-2) var(--dt-space-4);
        border: 1px solid var(--dt-border-default);
        background: transparent;
        color: var(--dt-text-muted);
        font-size: var(--dt-font-sm);
        font-weight: var(--dt-font-weight-medium);
        border-radius: 999px;
        cursor: pointer;
        transition: all var(--dt-transition-fast);
    }

    .date-chip.active[b-iriatvrnec] {
        background: var(--dt-primary-500);
        color: var(--dt-surface-1);
        border-color: transparent;
        box-shadow: 0 4px 12px rgba(24, 62, 235, 0.25);
    }

    .date-chip:active[b-iriatvrnec] {
        transform: scale(0.97);
    }
}
/* _content/DataTouch.Web/Components/Pages/DashboardWidgets/SmartSummaryPanel.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════════
   SMART SUMMARY PANEL — scoped CSS
   Pure-relocation extraction from Dashboard.razor.css (Plan 03 Task 9).

   Originally the panel surface (white background + overflow:visible) was
   shared via a comma rule with `.links-panel` and `.high-intent-panel` in
   Dashboard.razor.css. Lesson 4 (scoped-CSS comma split): the rule was
   broken into per-widget copies, so the local copy lives here while the
   other two stay in the parent until they're extracted.

   Drawer-open / responsive overrides for `.ss-card-pair` are duplicated
   here with the original viewport breakpoints — once the element belongs
   to this scope, the parent's rules can no longer reach it.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Panel surface — overflow visible so dropdowns render outside the card */
.smart-summary-panel[b-ehkyvirgar] {
    background: #FFFFFF;
    position: relative;
    overflow: visible; /* CRÍTICO: Dropdowns no deben ser cortados */
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.ss-header[b-ehkyvirgar] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    margin-bottom: 14px;
    gap: 10px;
}

.ss-header-spacer[b-ehkyvirgar] {
    display: flex;
}

.ss-header .section-title[b-ehkyvirgar] {
    margin: 0;
    text-align: center;
}

/* Quality Badge */
.ss-quality-badge[b-ehkyvirgar] {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 3px 8px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

.ss-quality-alta[b-ehkyvirgar] {
    background: rgba(22, 163, 74, 0.12);
    color: #16A34A;
    border: 1px solid rgba(22, 163, 74, 0.2);
}

.ss-quality-media[b-ehkyvirgar] {
    background: rgba(217, 119, 6, 0.12);
    color: #D97706;
    border: 1px solid rgba(217, 119, 6, 0.2);
}

.ss-quality-baja[b-ehkyvirgar] {
    background: rgba(107, 110, 143, 0.12);
    color: #6B6E8F;
    border: 1px solid rgba(107, 110, 143, 0.2);
}

/* Cards Container */
.ss-cards[b-ehkyvirgar] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Card Base */
.ss-card[b-ehkyvirgar] {
    padding: 14px;
    border-radius: 8px;
    background: var(--dt-bg-subtle, #F7F8FC);
    border-left: 3px solid rgba(107, 110, 143, 0.25);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ss-card-full[b-ehkyvirgar] {
    width: 100%;
}

/* Card Pair (Canal + Fricción) */
.ss-card-pair[b-ehkyvirgar] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

/* Chip */
.ss-chip[b-ehkyvirgar] {
    display: inline-block;
    font-size: 8.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    padding: 2px 7px;
    border-radius: 6px;
    width: fit-content;
}

.chip-perf[b-ehkyvirgar] {
    background: rgba(24, 62, 235, 0.10);
    color: #183EEB;
    border: 1px solid rgba(24, 62, 235, 0.2);
}

.chip-channel[b-ehkyvirgar] {
    background: rgba(128, 125, 254, 0.12);
    color: #807DFE;
    border: 1px solid rgba(128, 125, 254, 0.2);
}

.chip-friction[b-ehkyvirgar] {
    background: rgba(217, 119, 6, 0.12);
    color: #D97706;
    border: 1px solid rgba(217, 119, 6, 0.2);
}

.chip-action[b-ehkyvirgar] {
    background: rgba(22, 163, 74, 0.12);
    color: #16A34A;
    border: 1px solid rgba(22, 163, 74, 0.2);
}

/* Card Title */
.ss-card-title[b-ehkyvirgar] {
    font-size: 13px;
    font-weight: 700;
    color: var(--dt-text-primary, #01033E);
    margin: 0;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Card Description */
.ss-card-desc[b-ehkyvirgar] {
    font-size: 11px;
    line-height: 1.5;
    color: var(--dt-text-secondary, #6B6E8F);
    margin: 0;
}

/* Card Baseline */
.ss-card-base[b-ehkyvirgar] {
    font-size: 10px;
    color: var(--dt-text-muted, #6B6E8F);
    letter-spacing: 0.2px;
    cursor: default;
}

/* CTA Button */
.ss-cta-btn[b-ehkyvirgar] {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--dt-primary-500, #183EEB);
    background: transparent;
    border: 1px solid rgba(24, 62, 235, 0.25);
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    width: fit-content;
    margin-top: 2px;
}

.ss-cta-btn:hover[b-ehkyvirgar] {
    background: rgba(24, 62, 235, 0.08);
    border-color: rgba(24, 62, 235, 0.4);
    color: #183EEB;
}

/* ── Scenario Border-Left Colors ── */

/* Rendimiento scenarios */
.ss-scenario-low-data[b-ehkyvirgar] {
    border-left-color: #6B6E8F;
}
.ss-scenario-decline[b-ehkyvirgar] {
    border-left-color: #DC2626;
}
.ss-scenario-exploring[b-ehkyvirgar] {
    border-left-color: #D97706;
}
.ss-scenario-interest-no-contact[b-ehkyvirgar] {
    border-left-color: #D97706;
}
.ss-scenario-good[b-ehkyvirgar] {
    border-left-color: #183EEB;
}

/* Canal scenarios */
.ss-scenario-no-channel[b-ehkyvirgar] {
    border-left-color: #6B6E8F;
}
.ss-scenario-balanced[b-ehkyvirgar] {
    border-left-color: #807DFE;
}
.ss-scenario-dominant[b-ehkyvirgar] {
    border-left-color: #183EEB;
}

/* Fricción scenarios */
.ss-scenario-no-data[b-ehkyvirgar] {
    border-left-color: #6B6E8F;
}
.ss-scenario-form-abandon[b-ehkyvirgar] {
    border-left-color: #DC2626;
}
.ss-scenario-explore-friction[b-ehkyvirgar] {
    border-left-color: #D97706;
}
.ss-scenario-click-no-capture[b-ehkyvirgar] {
    border-left-color: #D97706;
}
.ss-scenario-no-friction[b-ehkyvirgar] {
    border-left-color: #16A34A;
}

/* Próximo Paso scenarios */
.ss-scenario-action-share[b-ehkyvirgar] {
    border-left-color: #807DFE;
}
.ss-scenario-action-form[b-ehkyvirgar] {
    border-left-color: #807DFE;
}
.ss-scenario-action-cta[b-ehkyvirgar] {
    border-left-color: #183EEB;
}
.ss-scenario-action-funnel[b-ehkyvirgar] {
    border-left-color: #183EEB;
}
.ss-scenario-action-maintain[b-ehkyvirgar] {
    border-left-color: #16A34A;
}
.ss-scenario-action-optimize[b-ehkyvirgar] {
    border-left-color: #807DFE;
}

.ss-scenario-empty[b-ehkyvirgar] {
    border-left-color: rgba(107, 110, 143, 0.2);
}

/* ── Mini Channel Breakdown ── */

.ss-mini-breakdown[b-ehkyvirgar] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 4px;
}

.ss-mini-bar[b-ehkyvirgar] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ss-mini-label[b-ehkyvirgar] {
    font-size: 9px;
    color: var(--dt-text-muted, #6B6E8F);
    min-width: 60px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.ss-mini-track[b-ehkyvirgar] {
    flex: 1;
    height: 4px;
    background: rgba(1, 3, 62, 0.08);
    border-radius: 2px;
    overflow: hidden;
}

.ss-mini-fill[b-ehkyvirgar] {
    height: 100%;
    border-radius: 2px;
    transition: width 0.4s ease;
}

.ss-type-contact[b-ehkyvirgar] {
    background: #183EEB;
}

.ss-type-exploration[b-ehkyvirgar] {
    background: #807DFE;
}

.ss-type-mixed[b-ehkyvirgar] {
    background: #6B6E8F;
}

.ss-mini-pct[b-ehkyvirgar] {
    font-size: 9px;
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
    color: var(--dt-text-muted, #6B6E8F);
    min-width: 28px;
    text-align: right;
}

/* Microcopy explaining what "acciones" means */
.ss-microcopy[b-ehkyvirgar] {
    font-size: 9px;
    color: var(--dt-text-muted, #6B6E8F);
    font-style: italic;
    letter-spacing: 0.2px;
    line-height: 1.4;
    margin-top: 2px;
}

/* Hint for "Otros" aggregation */
.ss-otros-hint[b-ehkyvirgar] {
    font-size: 9px;
    color: var(--dt-text-muted, #6B6E8F);
    opacity: 0.75;
    letter-spacing: 0.1px;
    margin-top: 1px;
    display: block;
}

/* ── Loading State ── */

.ss-loading[b-ehkyvirgar] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ss-skeleton[b-ehkyvirgar] {
    border-radius: 8px;
    background: linear-gradient(
        90deg,
        rgba(107, 114, 128, 0.08) 0%,
        rgba(107, 114, 128, 0.15) 50%,
        rgba(107, 114, 128, 0.08) 100%
    );
    background-size: 200% 100%;
    animation: ss-shimmer-b-ehkyvirgar 1.5s ease-in-out infinite;
}

.ss-skeleton-full[b-ehkyvirgar] {
    height: 90px;
    width: 100%;
}

.ss-skeleton-row[b-ehkyvirgar] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.ss-skeleton-half[b-ehkyvirgar] {
    height: 110px;
}

@keyframes ss-shimmer-b-ehkyvirgar {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Empty State ── */

.ss-empty[b-ehkyvirgar] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    text-align: center;
    gap: 8px;
}

.ss-empty-icon[b-ehkyvirgar] {
    width: 36px;
    height: 36px;
    color: var(--dt-text-muted, #6B6E8F);
    opacity: 0.5;
}

.ss-empty-text[b-ehkyvirgar] {
    font-size: 13px;
    font-weight: 600;
    color: var(--dt-text-secondary, #6B6E8F);
}

.ss-empty-sub[b-ehkyvirgar] {
    font-size: 11px;
    color: var(--dt-text-muted, #6B6E8F);
}

/* ── Error State ── */

.ss-error[b-ehkyvirgar] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    text-align: center;
    gap: 10px;
}

.ss-error-text[b-ehkyvirgar] {
    font-size: 12px;
    color: var(--dt-text-muted, #6B6E8F);
}

.ss-retry-btn[b-ehkyvirgar] {
    font-size: 11px;
    font-weight: 600;
    color: var(--dt-primary-500, #183EEB);
    background: transparent;
    border: 1px solid rgba(24, 62, 235, 0.25);
    border-radius: 6px;
    padding: 5px 14px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ss-retry-btn:hover[b-ehkyvirgar] {
    background: rgba(24, 62, 235, 0.08);
    border-color: rgba(24, 62, 235, 0.4);
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — drawer-open + viewport breakpoints
   Originally lived in Dashboard.razor.css. Moved here because once the
   `.ss-card-pair` element belongs to this scope, the parent's selectors
   can't reach it.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Viewport ≤1660px + drawer open → card pair side-by-side */
@media (max-width: 1660px) {
    .drawer-open .ss-card-pair[b-ehkyvirgar] {
        grid-template-columns: 1fr 1fr;
    }
}

/* Viewport ≤1400px → card pair side-by-side (insights collapses to 2-col) */
@media (max-width: 1400px) {
    .ss-card-pair[b-ehkyvirgar] {
        grid-template-columns: 1fr 1fr;
    }
}

/* Mobile overrides (≤600px in original Dashboard.razor.css) */
@media (max-width: 600px) {
    .ss-card[b-ehkyvirgar] {
        padding: 10px;
    }

    .ss-card-title[b-ehkyvirgar] {
        font-size: 12px;
    }

    .ss-card-desc[b-ehkyvirgar] {
        font-size: 10px;
    }

    .ss-card-pair[b-ehkyvirgar] {
        grid-template-columns: 1fr;
    }
}
/* _content/DataTouch.Web/Components/Pages/DashboardWidgets/WidgetExportMenu.razor.rz.scp.css */
/* Export Menu */
.analytics-export[b-5de38xs90i] {
    position: relative;
}

.export-btn[b-5de38xs90i] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid #DCDEDD;
    border-radius: 10px;
    color: #6B6E8F;
    cursor: pointer;
    transition: all 150ms ease;
}

.export-btn:hover[b-5de38xs90i] {
    background: #F3F4F8;
    color: #01033E;
}

.export-btn svg[b-5de38xs90i] {
    width: 18px;
    height: 18px;
}

.export-dropdown[b-5de38xs90i] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 160px;
    background: #FFFFFF;
    border: 1px solid #DCDEDD;
    border-radius: 12px;
    padding: 8px;
    z-index: 100;
    box-shadow: 0 16px 48px rgba(1, 3, 62, 0.12);
}

.export-option[b-5de38xs90i] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    color: #3E4188;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
    transition: all 150ms ease;
}

.export-option:hover[b-5de38xs90i] {
    background: #EDF0FD;
    color: #01033E;
}

.export-option svg[b-5de38xs90i] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Pattern B Export Menus (for widget panels: Map, Links, Summary, High-Intent)
   ══════════════════════════════════════════════════════════════════════════════ */

.export-menu-button[b-5de38xs90i] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid #DCDEDD;
    border-radius: 10px;
    color: #6B6E8F;
    cursor: pointer;
    transition: all 150ms ease;
    flex-shrink: 0;
}

.export-menu-button:hover[b-5de38xs90i] {
    background: #F3F4F8;
    color: #01033E;
}

.export-menu-button svg[b-5de38xs90i] {
    width: 18px;
    height: 18px;
}

.export-menu[b-5de38xs90i] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 160px;
    background: #FFFFFF;
    border: 1px solid #DCDEDD;
    border-radius: 12px;
    padding: 8px;
    z-index: 100;
    box-shadow: 0 16px 48px rgba(1, 3, 62, 0.12);
}

.menu-item[b-5de38xs90i] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    color: #3E4188;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
    transition: all 150ms ease;
}

.menu-item:hover[b-5de38xs90i] {
    background: #EDF0FD;
    color: #01033E;
}

.menu-item svg[b-5de38xs90i] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Mobile: hide the analytics-variant export button (originally lived in
   Dashboard.razor.css mobile media query). */
@media (max-width: 600px) {
    .analytics-export[b-5de38xs90i] {
        display: none !important;
    }
}
/* _content/DataTouch.Web/Components/Pages/DashboardWidgets/WidgetRangeDropdown.razor.rz.scp.css */
/* Range Dropdown Pill */
.analytics-range-dropdown[b-g1st9m5h11] {
    position: relative;
}

.range-pill[b-g1st9m5h11] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid rgba(24, 62, 235, 0.4);
    border-radius: 24px;
    color: #01033E;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 150ms ease;
    white-space: nowrap;
}

.range-pill:hover[b-g1st9m5h11] {
    border-color: #183EEB;
    background: rgba(24, 62, 235, 0.06);
}

.range-pill .chevron[b-g1st9m5h11] {
    width: 16px;
    height: 16px;
    transition: transform 200ms ease;
}

.range-pill .chevron.open[b-g1st9m5h11] {
    transform: rotate(180deg);
}

/* Dropdown para widgets Pattern B (map, links, summary, high-intent) */
.range-dropdown[b-g1st9m5h11] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: #FFFFFF;
    border: 1px solid #DCDEDD;
    border-radius: 12px;
    padding: 8px;
    z-index: 100;
    box-shadow: 0 16px 48px rgba(1, 3, 62, 0.12);
    backdrop-filter: blur(16px);
}

/* Dropdown para chart widget (Pattern A) */
.range-dropdown-menu[b-g1st9m5h11] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: #FFFFFF;
    border: 1px solid #DCDEDD;
    border-radius: 12px;
    padding: 8px;
    z-index: 100;
    box-shadow: 0 16px 48px rgba(1, 3, 62, 0.12);
    backdrop-filter: blur(16px);
}

.range-option[b-g1st9m5h11] {
    display: block;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    color: #3E4188;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
    transition: all 150ms ease;
}

.range-option:hover[b-g1st9m5h11] {
    background: #EDF0FD;
    color: #01033E;
}

.range-option.selected[b-g1st9m5h11] {
    background: #D5DCFA;
    color: #183EEB;
}

/* ══════════════════════════════════════════════════════════════════════════════
   LOCAL FILTER INDICATORS - Enterprise Two-Level Filter Architecture
   Visual indicators for widgets with active local filters
   ══════════════════════════════════════════════════════════════════════════════ */

/* Range pill with active local filter */
.range-pill.local-active[b-g1st9m5h11] {
    border-color: var(--dt-accent-primary, #807DFE);
    background: rgba(128, 125, 254, 0.08);
    position: relative;
}

.range-pill.local-active[b-g1st9m5h11]::before {
    content: "";
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: var(--dt-accent-primary, #807DFE);
    border-radius: 50%;
    border: 2px solid var(--dt-surface-card, #FFFFFF);
    z-index: 1;
}

/* Local filter indicator dot inside button */
.local-indicator[b-g1st9m5h11] {
    margin-left: 4px;
    opacity: 0.8;
    flex-shrink: 0;
}

/* Divider before reset option */
.range-option-divider[b-g1st9m5h11] {
    height: 1px;
    background: var(--dt-divider, rgba(0, 0, 0, 0.08));
    margin: 4px 0;
}

/* Reset button in dropdown */
.range-option.reset[b-g1st9m5h11] {
    border-top: 1px solid var(--dt-divider, rgba(0, 0, 0, 0.08));
    color: var(--dt-accent-primary, #807DFE);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding-top: 8px;
}

.range-option.reset svg[b-g1st9m5h11] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.range-option.reset:hover[b-g1st9m5h11] {
    background: rgba(128, 125, 254, 0.08);
    color: var(--dt-accent-primary, #807DFE);
}

/* Mobile adjustments for local indicators */
@media (max-width: 600px) {
    .range-pill.local-active[b-g1st9m5h11]::before {
        width: 6px;
        height: 6px;
        top: -1px;
        right: -1px;
    }

    .local-indicator[b-g1st9m5h11] {
        width: 6px;
        height: 6px;
    }
}
/* _content/DataTouch.Web/Components/Pages/DashboardWidgets/WidgetStateView.razor.rz.scp.css */
/* States: Loading */
.analytics-loading[b-wsh1cy9yl5] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 20px 0;
}

.kpi-skeleton-row[b-wsh1cy9yl5] {
    display: flex;
    gap: 20px;
}

.kpi-skeleton[b-wsh1cy9yl5] {
    flex: 1;
    height: 100px;
    background: linear-gradient(90deg, rgba(1, 3, 62, 0.04) 25%, rgba(1, 3, 62, 0.08) 50%, rgba(1, 3, 62, 0.04) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-wsh1cy9yl5 1.5s infinite;
    border-radius: 12px;
}

.chart-skeleton[b-wsh1cy9yl5] {
    height: 200px;
    background: linear-gradient(90deg, rgba(1, 3, 62, 0.04) 25%, rgba(1, 3, 62, 0.08) 50%, rgba(1, 3, 62, 0.04) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-wsh1cy9yl5 1.5s infinite;
    border-radius: 12px;
}

@keyframes shimmer-b-wsh1cy9yl5 {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* States: Empty */
.analytics-empty[b-wsh1cy9yl5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.analytics-empty svg[b-wsh1cy9yl5] {
    width: 48px;
    height: 48px;
    color: rgba(1, 3, 62, 0.25);
    margin-bottom: 16px;
}

.empty-title[b-wsh1cy9yl5] {
    font-size: 16px;
    font-weight: 600;
    color: #01033E;
    margin-bottom: 4px;
}

.empty-subtitle[b-wsh1cy9yl5] {
    font-size: 13px;
    color: #6B6E8F;
    margin-bottom: 20px;
}

.empty-cta[b-wsh1cy9yl5] {
    padding: 10px 20px;
    background: linear-gradient(135deg, #183EEB, #040813);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 150ms ease;
}

.empty-cta:hover[b-wsh1cy9yl5] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(24, 62, 235, 0.3);
}

/* States: Error */
.analytics-error[b-wsh1cy9yl5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.analytics-error svg[b-wsh1cy9yl5] {
    width: 48px;
    height: 48px;
    color: #EF4444;
    margin-bottom: 16px;
}

.error-title[b-wsh1cy9yl5] {
    font-size: 16px;
    font-weight: 600;
    color: #01033E;
    margin-bottom: 16px;
}

.error-cta[b-wsh1cy9yl5] {
    padding: 10px 20px;
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.5);
    border-radius: 10px;
    color: #EF4444;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 150ms ease;
}

.error-cta:hover[b-wsh1cy9yl5] {
    background: rgba(239, 68, 68, 0.1);
    border-color: #EF4444;
}
/* _content/DataTouch.Web/Components/Pages/Dev/PrimitivesShowcase.razor.rz.scp.css */
.ps-page[b-jlcevm1d4b] {
    max-width: 1100px;
    margin-inline: auto;
    padding: var(--dt-space-8) var(--dt-container-padding);
    color: var(--dt-text-primary);
    background: var(--dt-bg-app);
    min-height: 100vh;
}

.ps-header[b-jlcevm1d4b] { margin-bottom: var(--dt-space-12); }
.ps-header p[b-jlcevm1d4b] { margin-top: var(--dt-space-2); color: var(--dt-text-muted); }
.ps-header__nav[b-jlcevm1d4b] { margin-top: var(--dt-space-4); }
.ps-header__nav a[b-jlcevm1d4b] {
    color: var(--dt-primary-500);
    text-decoration: none;
    font-size: var(--dt-font-sm);
    font-weight: var(--dt-font-weight-medium);
}
.ps-header__nav a:hover[b-jlcevm1d4b] { color: var(--dt-primary-600); text-decoration: underline; }

.ps-section[b-jlcevm1d4b] {
    margin-bottom: var(--dt-space-12);
    padding-bottom: var(--dt-space-8);
    border-bottom: 1px solid var(--dt-border-default);
}
.ps-section h2[b-jlcevm1d4b] {
    margin-bottom: var(--dt-space-2);
    font-size: var(--dt-font-xl);
    color: var(--dt-text-primary);
}
.ps-section p[b-jlcevm1d4b] {
    margin-bottom: var(--dt-space-4);
    color: var(--dt-text-muted);
    font-size: var(--dt-font-sm);
}

.ps-row[b-jlcevm1d4b] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dt-space-3);
    align-items: flex-start;
    margin-bottom: var(--dt-space-3);
}
.ps-row--align-center[b-jlcevm1d4b] { align-items: center; }
.ps-row--cols[b-jlcevm1d4b] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.ps-row--kpi-grid[b-jlcevm1d4b] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.ps-card-frame[b-jlcevm1d4b] {
    border: 1px solid var(--dt-border-default);
    border-radius: var(--dt-radius-md);
    background: var(--dt-surface-1);
}

.ps-hint[b-jlcevm1d4b] {
    color: var(--dt-text-muted);
    font-size: var(--dt-font-xs);
}
.ps-hint code[b-jlcevm1d4b] { font-family: var(--dt-font-mono); color: var(--dt-text-secondary); }

.ps-toggle-button[b-jlcevm1d4b] {
    padding: var(--dt-space-2) var(--dt-space-4);
    border-radius: var(--dt-radius-md);
    border: 1px solid var(--dt-primary-500);
    background: var(--dt-primary-500);
    color: var(--dt-on-primary);
    font-size: var(--dt-font-sm);
    font-weight: var(--dt-font-weight-medium);
    cursor: pointer;
    transition: background var(--dt-transition-fast);
}
.ps-toggle-button:hover[b-jlcevm1d4b] { background: var(--dt-primary-600); border-color: var(--dt-primary-600); }
.ps-toggle-button:focus-visible[b-jlcevm1d4b] { outline: 2px solid var(--dt-focus-ring); outline-offset: 2px; }

@media (min-width: 768px) {
    .ps-page[b-jlcevm1d4b] { padding: var(--dt-space-12) var(--dt-container-padding); }
}
/* _content/DataTouch.Web/Components/Pages/Dev/TokenShowcase.razor.rz.scp.css */
.ts-page[b-77c6lf3rla] {
    max-width: 1100px;
    margin-inline: auto;
    padding: var(--dt-space-8) var(--dt-container-padding);
    color: var(--dt-text-primary);
    background: var(--dt-bg-app);
    min-height: 100vh;
}

.ts-header[b-77c6lf3rla] { margin-bottom: var(--dt-space-12); }
.ts-header p[b-77c6lf3rla] { margin-top: var(--dt-space-2); color: var(--dt-text-muted); }
.ts-header small[b-77c6lf3rla] { color: var(--dt-text-muted); font-family: var(--dt-font-mono); }

.ts-section[b-77c6lf3rla] {
    margin-bottom: var(--dt-space-12);
    padding-bottom: var(--dt-space-8);
    border-bottom: 1px solid var(--dt-border-default);
}
.ts-section h2[b-77c6lf3rla] {
    margin-bottom: var(--dt-space-4);
    font-size: var(--dt-font-xl);
    color: var(--dt-text-primary);
}

.ts-grid[b-77c6lf3rla] {
    display: grid;
    gap: var(--dt-space-3);
}
.ts-grid--swatches[b-77c6lf3rla] { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.ts-grid--small[b-77c6lf3rla]    { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.ts-grid--icons[b-77c6lf3rla]    { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }

.ts-swatch[b-77c6lf3rla] {
    display: flex;
    flex-direction: column;
    gap: var(--dt-space-1);
    padding: var(--dt-space-3);
    background: var(--dt-surface-1);
    border: 1px solid var(--dt-border-default);
    border-radius: var(--dt-radius-md);
}
.ts-swatch-chip[b-77c6lf3rla] {
    width: 100%;
    height: 56px;
    border-radius: var(--dt-radius-sm);
    border: 1px solid var(--dt-border-default);
    margin-bottom: var(--dt-space-2);
}
.ts-swatch code[b-77c6lf3rla]  { font-size: var(--dt-font-sm); color: var(--dt-text-primary); }
.ts-swatch small[b-77c6lf3rla] { font-family: var(--dt-font-mono); color: var(--dt-text-muted); font-size: var(--dt-font-xs); }

.ts-type-stack[b-77c6lf3rla] { display: flex; flex-direction: column; gap: var(--dt-space-3); }
.ts-type[b-77c6lf3rla] { color: var(--dt-text-primary); }

.ts-space-row[b-77c6lf3rla] {
    display: grid;
    grid-template-columns: 140px 1fr 100px;
    align-items: center;
    gap: var(--dt-space-3);
    margin-bottom: var(--dt-space-2);
}
.ts-space-label[b-77c6lf3rla] { font-size: var(--dt-font-sm); color: var(--dt-text-secondary); font-family: var(--dt-font-mono); }
.ts-space-bar[b-77c6lf3rla]  { height: 12px; background: var(--dt-primary-500); border-radius: var(--dt-radius-sm); }

.ts-radius-card[b-77c6lf3rla] {
    display: flex; flex-direction: column; align-items: center; gap: var(--dt-space-2);
    padding: var(--dt-space-3);
    background: var(--dt-surface-1);
    border: 1px solid var(--dt-border-default);
    border-radius: var(--dt-radius-md);
}
.ts-radius-box[b-77c6lf3rla] {
    width: 64px; height: 64px;
    background: var(--dt-primary-50);
    border: 1px solid var(--dt-primary-500);
}

.ts-shadow-card[b-77c6lf3rla] {
    padding: var(--dt-space-6);
    background: var(--dt-surface-1);
    border-radius: var(--dt-radius-md);
    text-align: center;
    color: var(--dt-text-primary);
}

.ts-icon-card[b-77c6lf3rla] {
    display: flex; flex-direction: column; align-items: center; gap: var(--dt-space-1);
    padding: var(--dt-space-3);
    background: var(--dt-surface-1);
    border: 1px solid var(--dt-border-default);
    border-radius: var(--dt-radius-md);
    color: var(--dt-text-primary);
}
.ts-icon-card code[b-77c6lf3rla] { font-size: var(--dt-font-xs); color: var(--dt-text-muted); }

.ts-link[b-77c6lf3rla] { margin-top: var(--dt-space-4); }
.ts-link a[b-77c6lf3rla] {
    color: var(--dt-primary-500);
    text-decoration: none;
    font-size: var(--dt-font-sm);
    font-weight: var(--dt-font-weight-medium);
}
.ts-link a:hover[b-77c6lf3rla] { color: var(--dt-primary-600); text-decoration: underline; }

@media (min-width: 768px) {
    .ts-page[b-77c6lf3rla] { padding: var(--dt-space-12) var(--dt-container-padding); }
}
/* _content/DataTouch.Web/Components/Pages/Leads.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════════
   LEADS MODULE - RESPONSIVE STYLES
   DT Table Pattern: dt-filter-bar + DtTableShell + MudTable + DtStatusChip
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   DESKTOP PAGE HEADER
   ───────────────────────────────────────────────────────────────────────────── */
.btn-create-lead[b-qf617kvbls] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #06B6D4 0%, #0891B2 100%);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.25);
}

.btn-create-lead:hover[b-qf617kvbls] {
    background: linear-gradient(135deg, #22D3EE 0%, #06B6D4 100%);
    box-shadow: 0 6px 20px rgba(6, 182, 212, 0.35);
    transform: translateY(-1px);
}

.btn-create-lead .mud-icon-root[b-qf617kvbls] {
    font-size: 1rem;
}

[b-qf617kvbls] .leads-container {
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* ─────────────────────────────────────────────────────────────────────────────
   FILTER BAR — DT Table Standard
   ───────────────────────────────────────────────────────────────────────────── */
.dt-filter-bar[b-qf617kvbls] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--dt-surface-1, #FFFFFF);
    border: 1px solid var(--dt-border-default, #DCDEDD);
    border-radius: var(--dt-radius-lg, 12px);
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.dt-filter-bar__search[b-qf617kvbls] {
    flex: 0 1 380px;
    min-width: 180px;
}

.dt-filter-bar__spacer[b-qf617kvbls] {
    flex: 1;
    min-width: 0;
}

.dt-filter-bar__advanced[b-qf617kvbls] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .dt-filter-bar__spacer[b-qf617kvbls] {
        display: none;
    }

    .dt-filter-bar[b-qf617kvbls] {
        gap: 8px;
    }

    .dt-filter-bar__search[b-qf617kvbls] {
        flex: 1 1 100%;
    }

    .dt-filter-bar__advanced[b-qf617kvbls] {
        flex: 1 1 100%;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PREMIUM TOOLBAR (desktop)
   ───────────────────────────────────────────────────────────────────────────── */
.toolbar-card[b-qf617kvbls] {
    background: var(--dt-surface-1, #FFFFFF);
    border: 1px solid var(--dt-border-default, #DCDEDD);
    border-radius: var(--dt-radius-lg, 12px);
    margin-bottom: 20px;
}

.search-input[b-qf617kvbls] { min-width: 260px; max-width: 360px; }
.status-filter[b-qf617kvbls] { width: 150px; }

/* ─────────────────────────────────────────────────────────────────────────────
   MOBILE TOOLBAR (Compact)
   ───────────────────────────────────────────────────────────────────────────── */
.mobile-toolbar[b-qf617kvbls] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.toolbar-left[b-qf617kvbls] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.toolbar-title[b-qf617kvbls] {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--dt-text-primary, #01033E);
}

.toolbar-count[b-qf617kvbls] {
    font-size: 0.875rem;
    color: var(--dt-text-secondary, #6B6E8F);
    background: var(--dt-surface-2, #ECEDF3);
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   FILTER CHIPS ROW (Mobile)
   ───────────────────────────────────────────────────────────────────────────── */
.filter-chips-row[b-qf617kvbls] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.filter-chip-compact[b-qf617kvbls] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    height: 36px;
    background: var(--dt-surface-2, #F3F4F8);
    border: 1px solid var(--dt-border-default, #DCDEDD);
    border-radius: 18px;
    font-size: 0.8125rem;
    color: var(--dt-text-secondary, #6B6E8F);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.filter-chip-compact:hover[b-qf617kvbls] {
    background: var(--dt-hover-surface, #EDF0FD);
    border-color: var(--dt-border-strong, #C0C1C8);
}

.filter-chip-compact .chip-value[b-qf617kvbls] {
    color: var(--dt-primary-500, #183EEB);
    font-weight: 500;
    margin-left: 0.25rem;
}

.filter-chip-compact .mud-icon-root[b-qf617kvbls] {
    font-size: 0.875rem;
    opacity: 0.6;
}

.filter-chip-clear[b-qf617kvbls] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.625rem;
    height: 36px;
    background: var(--dt-surface-2, #F3F4F8);
    border: 1px solid var(--dt-border-default, #DCDEDD);
    border-radius: 18px;
    font-size: 0.8125rem;
    color: var(--dt-text-secondary, #6B6E8F);
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-chip-clear:hover[b-qf617kvbls] {
    background: var(--dt-hover-surface, #EDF0FD);
    border-color: var(--dt-border-strong, #C0C1C8);
}

.filter-chip-clear .mud-icon-root[b-qf617kvbls] {
    font-size: 0.75rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   LEAD CARDS (Mobile)
   ───────────────────────────────────────────────────────────────────────────── */
.leads-cards-container[b-qf617kvbls] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.lead-card-link[b-qf617kvbls] {
    text-decoration: none;
    color: inherit;
    display: block;
}

.lead-card[b-qf617kvbls] {
    background: var(--dt-surface-1, #FFFFFF);
    border: 1px solid var(--dt-border-default, #DCDEDD);
    border-radius: 12px;
    padding: 0.875rem 1rem;
    transition: all 0.2s ease;
}

.lead-card:hover[b-qf617kvbls] {
    border-color: var(--dt-border-strong, #C0C1C8);
    background: var(--dt-hover-surface, #EDF0FD);
}

.lead-card:active[b-qf617kvbls] {
    transform: scale(0.99);
}

.lead-card-header[b-qf617kvbls] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.375rem;
    gap: 0.5rem;
}

.lead-name[b-qf617kvbls] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dt-text-primary, #01033E);
    margin: 0;
}

.lead-meta[b-qf617kvbls] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--dt-text-secondary, #6B6E8F);
    margin-bottom: 0.625rem;
}

.lead-meta .meta-divider[b-qf617kvbls] {
    font-size: 0.375rem;
    opacity: 0.5;
}

.lead-card-actions[b-qf617kvbls] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.quick-actions[b-qf617kvbls] {
    display: flex;
    gap: 0.375rem;
}

.quick-action-btn[b-qf617kvbls] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--dt-border-default, #DCDEDD);
    background: var(--dt-surface-2, #F3F4F8);
    color: var(--dt-text-secondary, #6B6E8F);
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

.quick-action-btn:hover[b-qf617kvbls] {
    border-color: var(--dt-border-strong, #C0C1C8);
    color: var(--dt-text-primary, #01033E);
    transform: scale(1.1);
}

.quick-action-btn.phone-btn:hover[b-qf617kvbls] {
    background: rgba(24, 62, 235, 0.10);
    border-color: rgba(24, 62, 235, 0.35);
    color: #183EEB;
}

.quick-action-btn.whatsapp-btn[b-qf617kvbls] {
    background: rgba(37, 211, 102, 0.12);
    border-color: rgba(37, 211, 102, 0.28);
    color: #16A34A;
}

.quick-action-btn.whatsapp-btn:hover[b-qf617kvbls] {
    background: rgba(37, 211, 102, 0.18);
    border-color: rgba(37, 211, 102, 0.45);
    color: #15803D;
}

.quick-action-btn.email-btn:hover[b-qf617kvbls] {
    background: rgba(24, 62, 235, 0.10);
    border-color: rgba(24, 62, 235, 0.35);
    color: #183EEB;
}

.card-chevron[b-qf617kvbls] {
    color: var(--dt-text-secondary, #6B6E8F);
    transition: transform 0.15s ease;
}

.lead-card:hover .card-chevron[b-qf617kvbls] {
    transform: translateX(2px);
}

/* ─────────────────────────────────────────────────────────────────────────────
   FILTERS MODAL
   ───────────────────────────────────────────────────────────────────────────── */
.filters-modal-content[b-qf617kvbls] {
    padding: 1.5rem;
}

.filter-field[b-qf617kvbls] {
    margin-bottom: 1.25rem;
}

.filter-field-label[b-qf617kvbls] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--dt-text-secondary, #6B6E8F);
    margin-bottom: 0.5rem;
    display: block;
}

.filter-actions[b-qf617kvbls] {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.filter-actions .btn-clear[b-qf617kvbls] {
    flex: 1;
    padding: 0.75rem;
    background: transparent;
    border: 1px solid var(--dt-border-strong, #C0C1C8);
    border-radius: 8px;
    color: var(--dt-text-secondary, #6B6E8F);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-actions .btn-clear:hover[b-qf617kvbls] {
    background: var(--dt-surface-2, #F3F4F8);
}

.filter-actions .btn-apply[b-qf617kvbls] {
    flex: 1;
    padding: 0.75rem;
    background: var(--dt-primary-500, #183EEB);
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-actions .btn-apply:hover[b-qf617kvbls] {
    background: var(--dt-primary-600, #1234CC);
}

/* ─────────────────────────────────────────────────────────────────────────────
   METRIC CARDS ROW
   ───────────────────────────────────────────────────────────────────────────── */
.leads-metrics-row[b-qf617kvbls] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.metric-card[b-qf617kvbls] {
    background: var(--dt-surface-1, #FFFFFF);
    border: 1px solid var(--dt-border-default, #DCDEDD);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 150ms ease;
    box-shadow: var(--dt-shadow-sm);
}

.metric-card:hover[b-qf617kvbls] {
    border-color: var(--dt-border-strong, #C0C1C8);
    box-shadow: var(--dt-shadow-md);
}

.metric-icon[b-qf617kvbls] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.metric-icon .mud-icon-root[b-qf617kvbls] {
    font-size: 1.5rem;
}

.metric-card.total .metric-icon[b-qf617kvbls] {
    background: var(--dt-primary-100, #D5DCFA);
    color: var(--dt-primary-500, #183EEB);
}

.metric-card.new .metric-icon[b-qf617kvbls] {
    background: rgba(6, 182, 212, 0.15);
    color: #0891B2;
}

.metric-card.qualified .metric-icon[b-qf617kvbls] {
    background: var(--dt-success-bg, rgba(22, 163, 74, 0.1));
    color: var(--dt-success, #16A34A);
}

.metric-card.closed .metric-icon[b-qf617kvbls] {
    background: var(--dt-warning-bg, rgba(217, 119, 6, 0.1));
    color: var(--dt-warning, #D97706);
}

.metric-content[b-qf617kvbls] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.metric-value[b-qf617kvbls] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--dt-text-primary, #01033E);
    line-height: 1.1;
}

.metric-label[b-qf617kvbls] {
    font-size: 11px;
    color: var(--dt-text-muted, #6B6E8F);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   MUDTABLE STYLES (leads-mud-table)
   ───────────────────────────────────────────────────────────────────────────── */
[b-qf617kvbls] .leads-mud-table {
    border: 1px solid var(--dt-table-border, #DCDEDD);
    border-radius: var(--dt-radius-lg, 12px);
    overflow: hidden;
}

[b-qf617kvbls] .leads-mud-table th {
    background: var(--dt-table-header-bg, #F3F4F8) !important;
    color: var(--dt-text-muted, #6B6E8F);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

[b-qf617kvbls] .leads-mud-table tr:hover td {
    background: var(--dt-table-hover, #EDF0FD) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TABLE COLUMN STYLES (used in MudTd cells)
   ───────────────────────────────────────────────────────────────────────────── */
.col-date[b-qf617kvbls] {
    font-variant-numeric: tabular-nums;
    color: var(--dt-text-secondary, #3E4188);
    font-size: 12px;
}

.col-name[b-qf617kvbls] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.col-name .avatar[b-qf617kvbls] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

.col-name .name-info[b-qf617kvbls] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.col-name .name[b-qf617kvbls] {
    font-weight: 500;
    color: var(--dt-text-primary, #01033E);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.col-name .email[b-qf617kvbls] {
    font-size: 12px;
    color: var(--dt-text-muted, #6B6E8F);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.col-phone[b-qf617kvbls] {
    font-variant-numeric: tabular-nums;
    color: var(--dt-text-secondary, #3E4188);
    font-size: 12px;
}

.col-card[b-qf617kvbls] {
    color: var(--dt-text-secondary, #3E4188);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Source badge */
.source-badge[b-qf617kvbls] {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    background: var(--dt-primary-100, #D5DCFA);
    border: 1px solid rgba(24, 62, 235, 0.20);
    border-radius: var(--dt-radius-sm, 4px);
    font-size: 11px;
    font-weight: 500;
    color: var(--dt-primary-600, #1234CC);
}

/* Kebab menu icon */
.menu-icon[b-qf617kvbls] {
    margin-right: 8px;
    opacity: 0.7;
}

/* ─────────────────────────────────────────────────────────────────────────────
   LAYOUT WRAPPERS
   ───────────────────────────────────────────────────────────────────────────── */
.leads-desktop-wrapper[b-qf617kvbls] {
    display: block;
}

.leads-mobile-wrapper[b-qf617kvbls] {
    display: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE BREAKPOINTS
   ───────────────────────────────────────────────────────────────────────────── */

/* Hide desktop header on mobile */
@media (max-width: 1024px) {
    .leads-page-header[b-qf617kvbls] {
        display: none !important;
    }

    .leads-desktop-wrapper[b-qf617kvbls] {
        display: none;
    }

    .leads-mobile-wrapper[b-qf617kvbls] {
        display: block;
        padding-top: 0;
    }
}

@media (max-width: 1024px) and (min-width: 601px) {
    [b-qf617kvbls] .leads-container {
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        overflow-x: hidden !important;
    }
}

@media (min-width: 1025px) {
    .leads-mobile-wrapper[b-qf617kvbls] {
        display: none;
    }

    .leads-desktop-wrapper[b-qf617kvbls] {
        display: block;
    }
}

/* Metric cards: 2 columns on tablets */
@media (max-width: 1280px) and (min-width: 1025px) {
    .leads-metrics-row[b-qf617kvbls] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Smaller desktop: adjust avatar and padding */
@media (max-width: 1400px) and (min-width: 1025px) {
    .col-name .avatar[b-qf617kvbls] {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .metric-card[b-qf617kvbls] {
        padding: 16px;
    }

    .metric-value[b-qf617kvbls] {
        font-size: 1.5rem;
    }
}

@media (max-width: 600px) {
    [b-qf617kvbls] .leads-container {
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        overflow-x: hidden !important;
    }

    .mobile-toolbar[b-qf617kvbls] {
        padding: 4px 0 10px;
        margin-bottom: 10px;
    }

    .filter-chips-row[b-qf617kvbls] {
        margin-bottom: 0.875rem;
    }
}

@media (max-width: 480px) {
    .filter-chips-row[b-qf617kvbls] {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.25rem;
        -webkit-overflow-scrolling: touch;
    }

    .filter-chip-compact[b-qf617kvbls] {
        flex-shrink: 0;
    }
}
/* _content/DataTouch.Web/Components/Shared/DtStatusChip.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════════
   DtStatusChip — Unified status badge for all CRM admin tables
   Colors injected via inline style using --dt-status-{variant}-{bg|border|text}
   tokens defined in wwwroot/design-tokens.css
   ══════════════════════════════════════════════════════════════════════════════ */

.dt-status-chip[b-u5jr3hw7zi] {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: var(--dt-radius-sm, 4px);
    border: 1px solid; /* color set via inline style */
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    line-height: 1.4;
    font-family: var(--dt-font-family);
    /* background, border-color, color — all set via inline style from tokens */
}

/* Compact variant: mobile card headers */
.dt-status-chip--compact[b-u5jr3hw7zi] {
    padding: 3px 8px;
    font-size: 10px;
}
/* _content/DataTouch.Web/Components/Shared/DtTableShell.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════════
   DtTableShell — Container for CRM admin tables
   Handles loading / empty / data states with consistent layout and styling.
   All colors via var(--dt-*) tokens — no hardcoded hex.
   ══════════════════════════════════════════════════════════════════════════════ */

.dt-table-shell[b-l03tsgdbh7] {
    width: 100%;
    min-height: 120px;
}

/* ── Loading state ────────────────────────────────────────────────────────── */
.dt-table-shell__loading[b-l03tsgdbh7] {
    padding: 16px;
}

/* ── Empty state ──────────────────────────────────────────────────────────── */
.dt-table-shell__empty[b-l03tsgdbh7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 56px 24px;
    text-align: center;
    border: 1px dashed var(--dt-border-default, #DCDEDD);
    border-radius: var(--dt-radius-lg, 12px);
    background: var(--dt-surface-1, #FFFFFF);
}

.dt-table-shell__empty-icon[b-l03tsgdbh7] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--dt-surface-2, #F3F4F8);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--dt-text-muted, #6B6E8F);
}

.dt-table-shell__empty-icon .mud-icon-root[b-l03tsgdbh7] {
    font-size: 2rem !important;
}

.dt-table-shell__empty-title[b-l03tsgdbh7] {
    color: var(--dt-text-primary, #01033E) !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
}

.dt-table-shell__empty-subtitle[b-l03tsgdbh7] {
    color: var(--dt-text-muted, #6B6E8F) !important;
    max-width: 52ch;
    margin-bottom: 0 !important;
}

.dt-table-shell__empty-actions[b-l03tsgdbh7] {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
    justify-content: center;
}
/* _content/DataTouch.Web/Components/Shared/IconRegistry.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════════
   IconRegistry Styles - Enterprise Icon System
   ══════════════════════════════════════════════════════════════════════════════ */

.icon-wrapper[b-cp6l3e1mo9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1;
}

.icon-svg[b-cp6l3e1mo9] {
    display: block;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ICON BADGES - Circular container for icons
   ══════════════════════════════════════════════════════════════════════════════ */

.icon-badge[b-cp6l3e1mo9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    transition: all var(--dt-transition-fast, 150ms ease);
}

/* Default badge style */
.badge-default[b-cp6l3e1mo9] {
    background: var(--dt-bg-subtle, #0E141B);
    border: 1px solid var(--dt-border-default, #233044);
}

/* Brand-specific badge colors */
.badge-whatsapp[b-cp6l3e1mo9] {
    background: rgba(37, 211, 102, 0.12);
    color: #25D366;
    border: 1px solid rgba(37, 211, 102, 0.2);
}

.badge-linkedin[b-cp6l3e1mo9] {
    background: rgba(10, 102, 194, 0.12);
    color: #0A66C2;
    border: 1px solid rgba(10, 102, 194, 0.2);
}

.badge-instagram[b-cp6l3e1mo9] {
    background: linear-gradient(135deg, rgba(253, 29, 29, 0.1), rgba(131, 58, 180, 0.1));
    color: #E4405F;
    border: 1px solid rgba(228, 64, 95, 0.2);
}

.badge-facebook[b-cp6l3e1mo9] {
    background: rgba(24, 119, 242, 0.12);
    color: #1877F2;
    border: 1px solid rgba(24, 119, 242, 0.2);
}

.badge-twitter[b-cp6l3e1mo9],
.badge-x[b-cp6l3e1mo9] {
    background: rgba(255, 255, 255, 0.08);
    color: var(--dt-text-primary, #E5E7EB);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.badge-youtube[b-cp6l3e1mo9] {
    background: rgba(255, 0, 0, 0.1);
    color: #FF0000;
    border: 1px solid rgba(255, 0, 0, 0.2);
}

.badge-tiktok[b-cp6l3e1mo9] {
    background: rgba(255, 255, 255, 0.08);
    color: var(--dt-text-primary, #E5E7EB);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.badge-telegram[b-cp6l3e1mo9] {
    background: rgba(0, 136, 204, 0.12);
    color: #0088CC;
    border: 1px solid rgba(0, 136, 204, 0.2);
}

.badge-email[b-cp6l3e1mo9] {
    background: rgba(99, 102, 241, 0.12);
    color: var(--dt-primary-400, #818CF8);
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.badge-call[b-cp6l3e1mo9] {
    background: rgba(20, 184, 166, 0.12);
    color: var(--dt-accent-teal-400, #2DD4BF);
    border: 1px solid rgba(20, 184, 166, 0.2);
}

.badge-calendar[b-cp6l3e1mo9] {
    background: rgba(167, 139, 250, 0.12);
    color: #A78BFA;
    border: 1px solid rgba(167, 139, 250, 0.2);
}

.badge-portfolio[b-cp6l3e1mo9] {
    background: rgba(251, 191, 36, 0.12);
    color: #FBBF24;
    border: 1px solid rgba(251, 191, 36, 0.2);
}

.badge-website[b-cp6l3e1mo9] {
    background: rgba(99, 102, 241, 0.1);
    color: var(--dt-primary-400, #818CF8);
    border: 1px solid rgba(99, 102, 241, 0.15);
}

.badge-contact[b-cp6l3e1mo9] {
    background: rgba(16, 185, 129, 0.12);
    color: #10B981;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.badge-form[b-cp6l3e1mo9] {
    background: rgba(59, 130, 246, 0.12);
    color: #3B82F6;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.badge-time[b-cp6l3e1mo9] {
    background: rgba(99, 102, 241, 0.12);
    color: var(--dt-primary-400, #818CF8);
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.badge-inactive[b-cp6l3e1mo9] {
    background: rgba(107, 114, 128, 0.12);
    color: var(--dt-text-muted, #6B7280);
    border: 1px solid rgba(107, 114, 128, 0.2);
}

.badge-qr[b-cp6l3e1mo9] {
    background: rgba(139, 92, 246, 0.12);
    color: #8B5CF6;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.badge-nfc[b-cp6l3e1mo9] {
    background: rgba(34, 197, 94, 0.12);
    color: #22C55E;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.badge-lead[b-cp6l3e1mo9] {
    background: rgba(14, 165, 233, 0.12);
    color: #0EA5E9;
    border: 1px solid rgba(14, 165, 233, 0.2);
}

.badge-location[b-cp6l3e1mo9] {
    background: rgba(239, 68, 68, 0.12);
    color: #EF4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Hover effects for interactive badges */
.icon-badge:hover[b-cp6l3e1mo9] {
    transform: scale(1.05);
}

/* ══════════════════════════════════════════════════════════════════════════════
   SIZE VARIANTS
   ══════════════════════════════════════════════════════════════════════════════ */

.icon-sm .icon-svg[b-cp6l3e1mo9] {
    width: 14px;
    height: 14px;
}

.icon-md .icon-svg[b-cp6l3e1mo9] {
    width: 18px;
    height: 18px;
}

.icon-lg .icon-svg[b-cp6l3e1mo9] {
    width: 22px;
    height: 22px;
}

.icon-xl .icon-svg[b-cp6l3e1mo9] {
    width: 28px;
    height: 28px;
}
/* _content/DataTouch.Web/Components/Shared/ModulePageHeader.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════════
   ModulePageHeader — STANDARD page heading for the CRM.

   Typography rule (single source of truth for every page that uses this
   component, plus any page that opts into `.dt-page-title` / `.dt-page-subtitle`
   utility classes in app.css):

     · Title:    22px (var(--dt-font-2xl)).  20px on ≤600px viewports for
                 mobile breathing room.
     · Subtitle: 14px (var(--dt-font-base)). 13px on ≤600px.

   The 22:14 ratio (~1.57×) gives a clean, modern hierarchy — clearly
   distinguishable but not ostentatious. Pages that previously rendered larger
   titles (28-32px clamps) now align to this single visual rhythm; modules no
   longer drift apart visually.
   ══════════════════════════════════════════════════════════════════════════════ */

.module-page-header[b-t2v57r1l6l] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    margin: 0 0 24px;
}

.module-page-header__text[b-t2v57r1l6l] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.module-page-header__title[b-t2v57r1l6l] {
    margin: 0;
    font-family: "Sora", "Plus Jakarta Sans", "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: var(--dt-font-2xl);     /* 22px — CRM standard */
    font-weight: var(--dt-font-weight-bold);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--dt-text-primary);
}

.module-page-header__subtitle[b-t2v57r1l6l] {
    margin: 0;
    max-width: 110ch;
    font-family: "Sora", "Plus Jakarta Sans", "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: var(--dt-font-base);    /* 14px — proportional to the 22px title */
    font-weight: var(--dt-font-weight-medium);
    line-height: 1.45;
    color: var(--dt-text-muted);
}

.module-page-header__actions[b-t2v57r1l6l] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Tablet: keep the same sizes — 22px is already comfortable down to ~768px. */
@media (max-width: 1024px) {
    .module-page-header[b-t2v57r1l6l] {
        margin-bottom: 20px;
    }
}

/* Mobile: drop the title 2px so it doesn't compete with constrained widths,
   and tighten the subtitle to maintain the visual ratio. */
@media (max-width: 600px) {
    .module-page-header[b-t2v57r1l6l] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 16px;
    }

    .module-page-header__title[b-t2v57r1l6l] {
        font-size: 20px;
    }

    .module-page-header__subtitle[b-t2v57r1l6l] {
        font-size: var(--dt-font-sm);  /* 13px */
    }

    .module-page-header__actions[b-t2v57r1l6l] {
        width: 100%;
        justify-content: flex-start;
    }
}
/* _content/DataTouch.Web/Components/Shared/NotificationBell.razor.rz.scp.css */
/* src/DataTouch.Web/Components/Shared/NotificationBell.razor.css

   The bell now lives in the sidebar footer (Plan-04 sidebar restructure),
   not the legacy top-right header. The button is restyled as a
   nav-item-like row so it visually aligns with .enterprise-nav-item
   above it (icon left + label + 7px 10px padding + 13px white text).
*/

.header-notif-wrapper[b-dex6qsz4q8] {
    position: relative;
    display: block;
    width: 100%;
}

.header-notif-btn[b-dex6qsz4q8] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 10px;
    border-radius: 7px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
    text-align: left;
    transition: background-color 0.2s ease;
}

.header-notif-btn:hover[b-dex6qsz4q8] {
    /* Match .enterprise-nav-item:hover (Task 3 of frosted-glass plan) — same
       soft 0.06 tint so the bell row reads as part of the same nav family on
       the new translucent surface. */
    background: rgba(255, 255, 255, 0.06);
}

.header-notif-btn.is-open[b-dex6qsz4q8] {
    background: rgba(255, 255, 255, 0.10);
}

/* Icon + badge stack — relative so the badge can absolute-position over
   the bell's top-right corner without escaping the icon's bounding box. */
.header-notif-icon[b-dex6qsz4q8] {
    position: relative;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.header-notif-icon svg[b-dex6qsz4q8] {
    width: 16px;
    height: 16px;
    display: block;
}

.header-notif-label[b-dex6qsz4q8] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Badge: small red pill anchored to the icon's top-right corner so it stays
   visually attached when the sidebar collapses (label hides, icon stays). */
.header-notif-badge[b-dex6qsz4q8] {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #DC2626;
    color: #fff;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 0 0 1.5px var(--dt-primary-500, #183EEB);
}

/* Click-outside catcher — sits above the page so a click anywhere closes
   the dropdown, but the dropdown itself (z-index 1300) stays interactive. */
.header-notif-overlay[b-dex6qsz4q8] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: transparent;
}

/* Collapsed-state rules live in MainLayout.razor.css under
   .enterprise-sidebar.collapsed ::deep .header-notif-* — Blazor scoped CSS
   can't reach a parent-component class from a child component's stylesheet,
   so the collapse/expand toggle (which lives in MainLayout) drives child
   visibility from there via ::deep. */
/* _content/DataTouch.Web/Components/Shared/NotificationDropdown.razor.rz.scp.css */
/* src/DataTouch.Web/Components/Shared/NotificationDropdown.razor.css */
/* Bell now lives in the sidebar footer (left edge of the viewport). Opening
   the dropdown DOWN would push it off-screen; opening UP would collide with
   the user card above. Solution: open to the RIGHT of the sidebar, with the
   dropdown's BOTTOM edge anchored to the bell's bottom — the panel grows
   upward from there, so it always fits regardless of how tall the dropdown
   becomes (max-height clamps at 520px or 80vh, whichever is smaller).

   `left: calc(100% + 8px)` escapes the wrapper to the right with an 8px
   breathing gap. `bottom: 0` anchors the dropdown's bottom to the wrapper's
   bottom (the bell button's bottom edge). */
.notif-dropdown[b-y9p1hv1a0k] {
    position: absolute;
    left: calc(100% + 8px);
    bottom: 0;
    width: 380px;
    max-width: calc(100vw - 260px);   /* leave room for the 240px sidebar */
    max-height: min(520px, 80vh);
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--dt-border-default, #E5E7EB);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(1, 3, 62, 0.18), 0 4px 8px rgba(1, 3, 62, 0.08);
    z-index: 1300;
    overflow: hidden;
    color: var(--dt-text-primary, #01033E);
}
.notif-dropdown-head[b-y9p1hv1a0k] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-bottom: 1px solid var(--dt-border-subtle, #EEF0F2);
    background: var(--dt-bg-subtle, #F6F7F9);
}
.notif-dropdown-title[b-y9p1hv1a0k] { font-weight: 700; color: var(--dt-text-primary, #01033E); }
.notif-markall[b-y9p1hv1a0k] { background: none; border: none; color: var(--dt-primary-500, #183EEB); cursor: pointer; font-size: 13px; font-weight: 600; }
.notif-dropdown-body[b-y9p1hv1a0k] { overflow-y: auto; flex: 1; }
.notif-empty[b-y9p1hv1a0k] { padding: 32px 16px; text-align: center; color: var(--dt-text-muted, #6B7280); }
.notif-dropdown-foot[b-y9p1hv1a0k] {
    padding: 10px 16px; border-top: 1px solid var(--dt-border-subtle, #EEF0F2);
    text-align: center;
}
.notif-dropdown-foot a[b-y9p1hv1a0k] { color: var(--dt-primary-500, #183EEB); font-weight: 600; text-decoration: none; font-size: 13px; }
/* _content/DataTouch.Web/Components/Shared/NotificationRow.razor.rz.scp.css */
/* src/DataTouch.Web/Components/Shared/NotificationRow.razor.css */
.notif-row[b-jk2k5ebjm2] {
    display: flex;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    background: #fff;
    border: none;
    border-bottom: 1px solid var(--dt-border-subtle, #EEF0F2);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s;
    color: var(--dt-text-primary, #01033E);
}
.notif-row:hover[b-jk2k5ebjm2] { background: var(--dt-bg-subtle, #F6F7F9); }
.notif-row:focus-visible[b-jk2k5ebjm2] { outline: 2px solid var(--dt-primary-500, #183EEB); outline-offset: -2px; }
.notif-row--unread[b-jk2k5ebjm2] {
    background: var(--dt-primary-50, #EEF2FF);
    border-left: 3px solid var(--dt-primary-500, #183EEB);
}
.notif-icon[b-jk2k5ebjm2] {
    flex: 0 0 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; background: var(--dt-primary-500, #183EEB);
}
.notif-kind-success .notif-icon[b-jk2k5ebjm2] { background: #16A34A; }
.notif-kind-warning .notif-icon[b-jk2k5ebjm2] { background: #F59E0B; }
.notif-kind-error   .notif-icon[b-jk2k5ebjm2] { background: #DC2626; }
.notif-body[b-jk2k5ebjm2] { flex: 1 1 auto; min-width: 0; }
.notif-title[b-jk2k5ebjm2] { font-weight: 600; font-size: 14px; line-height: 1.3; }
.notif-text[b-jk2k5ebjm2]  { font-size: 13px; color: var(--dt-text-secondary, #4B5563); margin-top: 2px; }
.notif-meta[b-jk2k5ebjm2]  { display: flex; gap: 8px; font-size: 12px; margin-top: 4px; color: var(--dt-text-muted, #6B7280); }
.notif-action-label[b-jk2k5ebjm2] { color: var(--dt-primary-500, #183EEB); font-weight: 600; }
/* _content/DataTouch.Web/Components/Shared/Primitives/DashboardSkeleton.razor.rz.scp.css */
/* DashboardSkeleton — pure-CSS shimmer placeholders.
   Token-driven (uses --dt-space-*, --dt-radius-*, etc) so theme changes
   propagate without touching this file. */

.ds-page[b-5hxr0d5fc4] {
    display: flex;
    flex-direction: column;
    gap: var(--dt-space-4, 16px);
    padding: var(--dt-space-4, 16px);
    width: 100%;
}

.ds-header[b-5hxr0d5fc4] {
    display: flex;
    flex-direction: column;
    gap: var(--dt-space-2, 8px);
}

.ds-kpi-row[b-5hxr0d5fc4] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--dt-space-3, 12px);
}

@media (max-width: 900px) {
    .ds-kpi-row[b-5hxr0d5fc4] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .ds-kpi-row[b-5hxr0d5fc4] { grid-template-columns: 1fr; }
}

.ds-main-row[b-5hxr0d5fc4] {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--dt-space-4, 16px);
}

@media (max-width: 1100px) {
    .ds-main-row[b-5hxr0d5fc4] { grid-template-columns: 1fr; }
}

.ds-kpi-card[b-5hxr0d5fc4] {
    display: flex;
    flex-direction: column;
    gap: var(--dt-space-2, 8px);
    padding: var(--dt-space-4, 16px);
    min-height: 110px;
}

.ds-chart-card[b-5hxr0d5fc4],
.ds-map-card[b-5hxr0d5fc4] {
    display: flex;
    flex-direction: column;
    gap: var(--dt-space-3, 12px);
    padding: var(--dt-space-4, 16px);
    min-height: 360px;
}

.ds-chart-body[b-5hxr0d5fc4] { flex: 1; min-height: 280px; }
.ds-map-body[b-5hxr0d5fc4]   { flex: 1; min-height: 280px; }

.ds-bar[b-5hxr0d5fc4] {
    background: linear-gradient(
        90deg,
        rgba(1, 3, 62, 0.04) 0%,
        rgba(1, 3, 62, 0.10) 50%,
        rgba(1, 3, 62, 0.04) 100%);
    background-size: 200% 100%;
    animation: ds-shimmer-b-5hxr0d5fc4 1.2s linear infinite;
    border-radius: 6px;
    height: 12px;
}

.ds-bar--title[b-5hxr0d5fc4]  { height: 18px; width: 60%; }
.ds-bar--sub[b-5hxr0d5fc4]    { height: 12px; width: 40%; }
.ds-bar--label[b-5hxr0d5fc4]  { height: 10px; width: 50%; }
.ds-bar--number[b-5hxr0d5fc4] { height: 28px; width: 70%; }
.ds-bar--delta[b-5hxr0d5fc4]  { height: 12px; width: 35%; }

.ds-chart-body[b-5hxr0d5fc4],
.ds-map-body[b-5hxr0d5fc4] {
    background: linear-gradient(
        90deg,
        rgba(1, 3, 62, 0.03) 0%,
        rgba(1, 3, 62, 0.07) 50%,
        rgba(1, 3, 62, 0.03) 100%);
    background-size: 200% 100%;
    animation: ds-shimmer-b-5hxr0d5fc4 1.2s linear infinite;
    border-radius: 12px;
}

@keyframes ds-shimmer-b-5hxr0d5fc4 {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ds-bar[b-5hxr0d5fc4],
    .ds-chart-body[b-5hxr0d5fc4],
    .ds-map-body[b-5hxr0d5fc4] { animation: none; }
}
/* _content/DataTouch.Web/Components/Shared/Primitives/DataPanel.razor.rz.scp.css */
.dt-panel[b-t7rwrdt44q] {
    background: var(--dt-surface-1);
    border: 1px solid var(--dt-border-default);
    border-radius: var(--dt-radius-lg);
    padding: var(--dt-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--dt-space-4);
}

.dt-panel__head[b-t7rwrdt44q] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--dt-space-3);
}
.dt-panel__titles[b-t7rwrdt44q] { display: flex; flex-direction: column; gap: var(--dt-space-1); min-width: 0; }
.dt-panel__title[b-t7rwrdt44q]  {
    font-size: var(--dt-font-lg);
    font-weight: var(--dt-font-weight-semibold);
    color: var(--dt-text-primary);
    margin: 0;
}
.dt-panel__subtitle[b-t7rwrdt44q] {
    font-size: var(--dt-font-sm);
    color: var(--dt-text-muted);
    margin: 0;
}
.dt-panel__actions[b-t7rwrdt44q] {
    display: flex;
    align-items: center;
    gap: var(--dt-space-2);
    flex-shrink: 0;
}

.dt-panel__body[b-t7rwrdt44q] { min-height: 120px; }

.dt-panel__loading[b-t7rwrdt44q] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
}
.dt-panel__skeleton[b-t7rwrdt44q] {
    width: 100%;
    height: 180px;
    border-radius: var(--dt-radius-md);
    background: linear-gradient(90deg,
        var(--dt-surface-2) 25%,
        var(--dt-surface-3) 50%,
        var(--dt-surface-2) 75%);
    background-size: 200% 100%;
    animation: dt-skeleton-pulse-b-t7rwrdt44q 1.4s ease-in-out infinite;
}
@keyframes dt-skeleton-pulse-b-t7rwrdt44q {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .dt-panel__skeleton[b-t7rwrdt44q] { animation: none; background: var(--dt-surface-2); }
}

@media (min-width: 768px) {
    .dt-panel[b-t7rwrdt44q] { padding: var(--dt-space-6); }
}
/* _content/DataTouch.Web/Components/Shared/Primitives/EmptyState.razor.rz.scp.css */
.dt-empty[b-gtru5vlc3l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--dt-space-8) var(--dt-space-4);
    gap: var(--dt-space-2);
    color: var(--dt-text-muted);
}

.dt-empty__icon-wrap[b-gtru5vlc3l] {
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--dt-radius-full);
    background: var(--dt-surface-2);
    color: var(--dt-text-muted);
    margin-bottom: var(--dt-space-1);
}
.dt-empty--warn  .dt-empty__icon-wrap[b-gtru5vlc3l] { background: var(--dt-warning-bg); color: var(--dt-warning); }
.dt-empty--error .dt-empty__icon-wrap[b-gtru5vlc3l] { background: var(--dt-danger-bg);  color: var(--dt-danger); }

.dt-empty__title[b-gtru5vlc3l] {
    font-size: var(--dt-font-base);
    font-weight: var(--dt-font-weight-semibold);
    color: var(--dt-text-primary);
    margin: 0;
}

.dt-empty__subtitle[b-gtru5vlc3l] {
    font-size: var(--dt-font-sm);
    color: var(--dt-text-muted);
    max-width: 340px;
    margin: 0;
}

.dt-empty__cta[b-gtru5vlc3l] {
    margin-top: var(--dt-space-2);
    padding: var(--dt-space-2) var(--dt-space-4);
    border-radius: var(--dt-radius-md);
    border: 1px solid var(--dt-border-default);
    background: var(--dt-surface-1);
    color: var(--dt-text-primary);
    font-size: var(--dt-font-sm);
    font-weight: var(--dt-font-weight-medium);
    cursor: pointer;
    transition: background var(--dt-transition-fast), border-color var(--dt-transition-fast);
}
.dt-empty__cta:hover[b-gtru5vlc3l] { background: var(--dt-hover-surface); border-color: var(--dt-primary-500); }
.dt-empty__cta:focus-visible[b-gtru5vlc3l] { outline: 2px solid var(--dt-focus-ring); outline-offset: 2px; }
/* _content/DataTouch.Web/Components/Shared/Primitives/KebabMenu.razor.rz.scp.css */
.dt-kebab[b-nzwsfvp8n7] { position: relative; display: inline-block; }

.dt-kebab__trigger[b-nzwsfvp8n7] {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: var(--dt-radius-md);
    border: none;
    background: transparent;
    color: var(--dt-text-muted);
    cursor: pointer;
    transition: background var(--dt-transition-fast), color var(--dt-transition-fast);
}
.dt-kebab__trigger:hover[b-nzwsfvp8n7] { background: var(--dt-hover-surface); color: var(--dt-text-primary); }
.dt-kebab--open .dt-kebab__trigger[b-nzwsfvp8n7] { background: var(--dt-surface-2); color: var(--dt-text-primary); }
.dt-kebab__trigger:focus-visible[b-nzwsfvp8n7] { outline: 2px solid var(--dt-focus-ring); outline-offset: 2px; }

.dt-kebab__menu[b-nzwsfvp8n7] {
    position: absolute;
    top: calc(100% + var(--dt-space-1));
    right: 0;
    min-width: 180px;
    background: var(--dt-surface-1);
    border: 1px solid var(--dt-border-default);
    border-radius: var(--dt-radius-md);
    box-shadow: var(--dt-shadow-md);
    padding: var(--dt-space-1);
    z-index: 10;
    display: flex; flex-direction: column;
}

.dt-kebab__item[b-nzwsfvp8n7] {
    display: flex;
    align-items: center;
    gap: var(--dt-space-2);
    padding: var(--dt-space-2) var(--dt-space-3);
    border-radius: var(--dt-radius-sm);
    border: none;
    background: transparent;
    color: var(--dt-text-primary);
    font-size: var(--dt-font-sm);
    text-align: left;
    cursor: pointer;
    transition: background var(--dt-transition-fast);
    white-space: nowrap;
}
.dt-kebab__item:hover[b-nzwsfvp8n7] { background: var(--dt-hover-surface); }
.dt-kebab__item:focus-visible[b-nzwsfvp8n7] { outline: 2px solid var(--dt-focus-ring); outline-offset: -2px; }
.dt-kebab__item-icon[b-nzwsfvp8n7] { display: flex; color: var(--dt-text-muted); }
/* _content/DataTouch.Web/Components/Shared/Primitives/KpiCard.razor.rz.scp.css */
/* Harmonized dimensions (2026-04-27 dashboard tightening):
     · padding 12px 14px (was 16x16x14)
     · min-height 88px (was 110)
     · border-radius 12px to match .dt-card (was 10)
     · label 11px (was 11.5) — slightly tighter
     · value 24px (was 30) — restrained executive scale, not marketing splash
   Numbers now read as confident hierarchy instead of dominating the panel. */
.dt-kpi[b-0tnf009w6b] {
    /* Depth-system surface: subtle vertical gradient (top highlight, bottom
       recede) — same language as .dt-card so the entire dashboard reads
       as one cohesive elevation system. */
    background: linear-gradient(180deg, #FFFFFF 0%, #FCFCFE 100%);
    border: 1px solid var(--dt-border-default);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 88px;
    /* Same 4-layer elevation as .dt-card: rim highlight + 3 shadow distances.
       The far diffuse shadow has negative spread so adjacent KPIs in the
       4-up grid don't blend their halos into a smudge. */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 1px 1px rgba(1, 3, 62, 0.05),
        0 2px 6px rgba(1, 3, 62, 0.05),
        0 8px 18px -6px rgba(1, 3, 62, 0.08);
    transition: border-color var(--dt-transition-fast),
                box-shadow var(--dt-transition-fast),
                transform var(--dt-transition-fast);
}

/* Subtle hover: 1px lift + brighter rim. Less aggressive than .dt-card's
   hover because there are 4 KPIs in a row — moving them all on cursor
   movement would be noisy. The lift is small but perceptible. */
.dt-kpi:hover[b-0tnf009w6b] {
    border-color: var(--dt-border-strong);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 1px 1px rgba(1, 3, 62, 0.06),
        0 4px 10px rgba(1, 3, 62, 0.06),
        0 14px 22px -8px rgba(1, 3, 62, 0.10);
}

@media (prefers-reduced-motion: reduce) {
    .dt-kpi[b-0tnf009w6b] { transition: none; }
    .dt-kpi:hover[b-0tnf009w6b] { transform: none; }
}
.dt-kpi--accent[b-0tnf009w6b] { border-color: var(--dt-warning-border); background: var(--dt-warning-bg); }
.dt-kpi--compact[b-0tnf009w6b] { padding: 10px 12px; min-height: 76px; }

.dt-kpi__head[b-0tnf009w6b] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.dt-kpi__icon[b-0tnf009w6b] { display: flex; color: var(--dt-text-muted); }
.dt-kpi__label[b-0tnf009w6b] {
    flex: 1;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dt-text-muted);
}
.dt-kpi__sparkline[b-0tnf009w6b] { flex-shrink: 0; }

.dt-kpi__value[b-0tnf009w6b] {
    font-size: 24px;
    font-weight: 600;
    color: var(--dt-text-primary);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 6px 0 0;
}
.dt-kpi__value--empty[b-0tnf009w6b] { color: var(--dt-text-muted); }

.dt-kpi__delta[b-0tnf009w6b] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}
.dt-kpi__delta-label[b-0tnf009w6b] {
    font-size: 11.5px;
    color: var(--dt-text-muted);
}

.dt-kpi__hint[b-0tnf009w6b] {
    margin-top: 4px;
    font-size: 11px;
    color: var(--dt-warning);
}
/* _content/DataTouch.Web/Components/Shared/Primitives/LoadingOverlay.razor.rz.scp.css */
.dt-loading-overlay[b-u9ceb98uvc] {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--dt-space-3);
    background: var(--dt-overlay-scrim);
    backdrop-filter: blur(2px);
    z-index: 9999;
    color: var(--dt-text-inverse);
    animation: dt-fade-in-b-u9ceb98uvc var(--dt-transition-fast) ease-out;
}

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

.dt-loading-overlay__spinner[b-u9ceb98uvc] {
    position: relative;
    width: 48px; height: 48px;
}
.dt-loading-overlay__spinner span[b-u9ceb98uvc] {
    position: absolute;
    inset: 0;
    border: 3px solid transparent;
    border-top-color: var(--dt-primary-300);
    border-radius: var(--dt-radius-full);
    animation: dt-spin-b-u9ceb98uvc 1.2s var(--dt-easing-out) infinite;
}
.dt-loading-overlay__spinner span:nth-child(2)[b-u9ceb98uvc] { animation-delay: -0.3s; border-top-color: var(--dt-primary-500); }
.dt-loading-overlay__spinner span:nth-child(3)[b-u9ceb98uvc] { animation-delay: -0.6s; border-top-color: var(--dt-accent-500); }
.dt-loading-overlay__spinner span:nth-child(4)[b-u9ceb98uvc] { animation-delay: -0.9s; border-top-color: var(--dt-primary-700); }

@keyframes dt-spin-b-u9ceb98uvc { to { transform: rotate(360deg); } }

.dt-loading-overlay__message[b-u9ceb98uvc] {
    font-size: var(--dt-font-base);
    color: var(--dt-text-inverse);
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .dt-loading-overlay[b-u9ceb98uvc] { animation: none; }
    .dt-loading-overlay__spinner span[b-u9ceb98uvc] { animation: none; border-top-color: var(--dt-primary-500); }
}
/* _content/DataTouch.Web/Components/Shared/Primitives/Pill.razor.rz.scp.css */
.dt-pill[b-rylmilbjhm] {
    display: inline-flex;
    align-items: center;
    gap: var(--dt-space-1);
    padding: var(--dt-space-1) var(--dt-space-2);
    border-radius: var(--dt-radius-full);
    font-size: var(--dt-font-xs);
    font-weight: var(--dt-font-weight-semibold);
    line-height: 1;
    letter-spacing: var(--dt-letter-spacing-wide);
    border: 1px solid transparent;
    white-space: nowrap;
}

.dt-pill--md[b-rylmilbjhm] {
    font-size: var(--dt-font-sm);
    padding: var(--dt-space-1) var(--dt-space-3);
}

.dt-pill--neutral[b-rylmilbjhm]         { background: var(--dt-surface-2);  color: var(--dt-text-secondary); border-color: var(--dt-border-default); }
.dt-pill--accent[b-rylmilbjhm]          { background: var(--dt-accent-100); color: var(--dt-accent-700);     border-color: var(--dt-accent-300); }
.dt-pill--warn[b-rylmilbjhm]            { background: var(--dt-warning-bg); color: var(--dt-warning);        border-color: var(--dt-warning-border); }
.dt-pill--success[b-rylmilbjhm]         { background: var(--dt-success-bg); color: var(--dt-success);        border-color: var(--dt-success-border); }
.dt-pill--danger[b-rylmilbjhm]          { background: var(--dt-danger-bg);  color: var(--dt-danger);         border-color: var(--dt-danger-border); }

.dt-pill__icon[b-rylmilbjhm] { flex-shrink: 0; }
.dt-pill__text[b-rylmilbjhm] { line-height: 1; }
/* _content/DataTouch.Web/Components/Shared/Primitives/RangePillGroup.razor.rz.scp.css */
.dt-rpg[b-vluzqd9fet] {
    display: inline-flex;
    align-items: center;
    gap: var(--dt-space-1);
    padding: var(--dt-space-1);
    background: var(--dt-surface-2);
    border: 1px solid var(--dt-border-default);
    border-radius: var(--dt-radius-full);
}

.dt-rpg__pill[b-vluzqd9fet] {
    display: inline-flex;
    align-items: center;
    gap: var(--dt-space-1);
    padding: var(--dt-space-1) var(--dt-space-3);
    border-radius: var(--dt-radius-full);
    border: none;
    background: transparent;
    color: var(--dt-text-muted);
    font-size: var(--dt-font-sm);
    font-weight: var(--dt-font-weight-medium);
    cursor: pointer;
    transition: background var(--dt-transition-fast), color var(--dt-transition-fast);
    white-space: nowrap;
}
.dt-rpg__pill:hover[b-vluzqd9fet] { color: var(--dt-text-primary); }
.dt-rpg__pill--active[b-vluzqd9fet] {
    background: var(--dt-surface-1);
    color: var(--dt-text-primary);
    box-shadow: var(--dt-shadow-sm);
}
.dt-rpg__pill:focus-visible[b-vluzqd9fet] { outline: 2px solid var(--dt-focus-ring); outline-offset: 2px; }

.dt-rpg__dot[b-vluzqd9fet] {
    width: 6px; height: 6px;
    border-radius: var(--dt-radius-full);
    background: var(--dt-primary-500);
}

@media (max-width: 639px) {
    .dt-rpg[b-vluzqd9fet] { overflow-x: auto; max-width: 100%; }
    .dt-rpg__pill[b-vluzqd9fet] { flex-shrink: 0; }
}
/* _content/DataTouch.Web/Components/Shared/Primitives/Sparkline.razor.rz.scp.css */
.dt-sparkline[b-mvl699h76z] { display: inline-block; vertical-align: middle; }
.dt-sparkline--empty[b-mvl699h76z] { width: 60px; height: 20px; }