{{--
    Vista: Detalle del Vendedor (TV Wall)

    Layout:
    - Izquierda: tarjeta de perfil (foto, nombre, rango, tendencia, semáforo compacto)
    - Derecha: galería de KPI cards premium
        · HERO: Cumplimiento de Meta (anillo + delta vs equipo)
        · 3 KPI satélites: Ventas · Pedidos · Devoluciones
        · 1 KPI dual: Clientes (nuevos / reactivados)
        · 1 KPI dual: Cotizaciones (mes / hoy con split bar)
        · Sección expandible: Desempeño por Sede

    Convención de valores:
    - Todos los KPI muestran `N/A` (no `0`) cuando el dato es null/undefined/NaN
    - El helper `naValue(value)` de tv-wall.js centraliza la lógica
    - 0 sigue siendo un valor válido (ej. vendedor sin devoluciones = 0)
--}}
<section class="tv-screen tv-screen--seller-detail tv-glass"
         x-show="activeScreen === 'seller_detail'"
         x-transition:enter="tv-screen-enter"
         x-transition:leave="tv-screen-leave">
    <template x-if="activeSeller()">
        <div class="tv-seller-detail">

            {{-- ===== HEADER ===== --}}
            <div class="tv-seller-detail__header">
                <div class="tv-seller-detail__header-meta">
                    <i class="fas fa-id-badge" aria-hidden="true"></i>
                    <span class="tv-seller-detail__counter"
                          x-text="`Vendedor ${activeSellerIndex + 1} de ${(snapshot.sellers ?? []).length}`"></span>
                </div>
                <div class="tv-screen-pills tv-screen-pills--inline" aria-hidden="true">
                    <template x-for="(s, idx) in snapshot.sellers" :key="'dot-' + s.id">
                        <span class="tv-screen-pills__dot"
                              :class="{ 'tv-screen-pills__dot--active': idx === activeSellerIndex }"></span>
                    </template>
                </div>
            </div>

            {{-- ===== LAYOUT PRINCIPAL ===== --}}
            <div class="tv-seller-detail__layout">

                {{-- ===== COLUMNA IZQ: PERFIL ===== --}}
                <aside class="tv-seller-detail__profile-card">
                    <div class="tv-seller-detail__photo-stage">
                        <div class="tv-portrait tv-portrait--seller-hero">
                            <div class="tv-portrait__ring tv-portrait__ring--hero"
                                 :class="activeSeller().badge === 'lider' ? 'tv-portrait__ring--leader' : 'tv-portrait__ring--glow'">
                                <img :src="sellerPhotoUrl(activeSeller())"
                                     :alt="naValue(activeSeller().name)"
                                     class="tv-portrait__img">
                            </div>
                        </div>

                        {{-- Nuevo Badge de Meta en la foto --}}
                        <div class="tv-seller-detail__goal-badge"
                             :class="`tv-seller-detail__goal-badge--${sellerGoalStatus(activeSeller())}`"
                             title="Cumplimiento de Meta">
                            <div class="tv-seller-detail__goal-badge-ring"
                                 :style="`--pct: ${isMissing(activeSeller()?.performance?.sales_progress?.percent) ? 0 : Math.min(100, activeSeller().performance.sales_progress.percent)}`">
                                 <div class="tv-seller-detail__goal-badge-fill"></div>
                            </div>
                            <div class="tv-seller-detail__goal-badge-content">
                                <i class="fas fa-trophy"></i>
                                <span class="tv-seller-detail__goal-badge-pct tv-animated-count" x-tv-count.percent="naValue(activeSeller()?.performance?.sales_progress?.percent)"></span>
                            </div>
                        </div>

                        <div class="tv-seller-detail__photo-overlay">
                            <template x-if="activeSeller().badge === 'lider'">
                                <x-tv.leader-badge variant="profile" class="tv-seller-detail__leader-badge" />
                            </template>
                            <h2 class="tv-seller-detail__name" x-text="naValue(activeSeller().name)"></h2>
                            <div class="tv-seller-detail__meta">
                                <span class="tv-seller-detail__rank"
                                      :title="`Posición ${activeSeller().rank} en el ranking del mes`"
                                      x-text="isMissing(activeSeller().rank) ? 'N/A' : `#${activeSeller().rank} del mes`"></span>
                                <span class="tv-seller-detail__trend tv-seller-detail__trend--up"
                                      x-show="activeSeller().trend === 'up'"
                                      title="Tendencia alcista vs mes anterior">
                                    <i class="fas fa-arrow-up"></i> Subiendo
                                </span>
                                <span class="tv-seller-detail__trend tv-seller-detail__trend--down"
                                      x-show="activeSeller().trend === 'down'"
                                      title="Tendencia bajista vs mes anterior">
                                    <i class="fas fa-arrow-down"></i> Bajando
                                </span>
                                <span class="tv-seller-detail__trend tv-seller-detail__trend--same"
                                      x-show="activeSeller().trend === 'same'"
                                      title="Sin cambios significativos vs mes anterior">
                                    <i class="fas fa-minus"></i> Estable
                                </span>
                            </div>
                        </div>
                    </div>

                    <div class="tv-kpi-hero__meta" style="margin-top: clamp(16px, 2vh, 24px);">
                        <div class="tv-kpi-hero__semaphore">
                            <div class="tv-seller-semaphore">
                                <div class="tv-seller-semaphore__track" role="presentation">
                                    <div class="tv-seller-semaphore__zones" aria-hidden="true">
                                        <span class="tv-seller-semaphore__zone tv-seller-semaphore__zone--alert"></span>
                                        <span class="tv-seller-semaphore__zone tv-seller-semaphore__zone--warn"></span>
                                        <span class="tv-seller-semaphore__zone tv-seller-semaphore__zone--ok"></span>
                                        <span class="tv-seller-semaphore__zone tv-seller-semaphore__zone--success"></span>
                                    </div>
                                    <div class="tv-seller-semaphore__fill"
                                         :class="`tv-seller-semaphore__fill--${sellerGoalStatus(activeSeller())}`"
                                         :style="`width: ${sellerGoalWidth(activeSeller())}%`"></div>
                                    <div class="tv-seller-semaphore__marker"
                                         :style="`left: ${isMissing(activeSeller()?.performance?.sales_progress?.percent) ? 0 : Math.min(100, activeSeller().performance.sales_progress.percent)}%`"
                                         aria-hidden="true"></div>
                                </div>
                                <div class="tv-seller-semaphore__legend">
                                    <span class="tv-seller-semaphore__legend-item tv-seller-semaphore__legend-item--alert">0%</span>
                                    <span class="tv-seller-semaphore__legend-item">40%</span>
                                    <span class="tv-seller-semaphore__legend-item">70%</span>
                                    <span class="tv-seller-semaphore__legend-item tv-seller-semaphore__legend-item--success">100%</span>
                                </div>
                            </div>
                        </div>
                        <div class="tv-kpi-hero__quick-stat"
                             title="Porcentaje de pedidos mensuales ya procesados">
                            <i class="fas fa-check-double" aria-hidden="true"></i>
                            <span class="tv-kpi-hero__quick-stat-value tv-animated-count"
                                  x-tv-count.percent="naValue(sellerProcessedOrdersPercent(activeSeller()))"></span>
                            <span class="tv-kpi-hero__quick-stat-label">Pedidos procesados</span>
                        </div>
                    </div>
                </aside>

                {{-- ===== COLUMNA DER: GALERÍA KPI ===== --}}
                <div class="tv-seller-detail__charts">
                    <div class="tv-chart-card--panorama" style="display: none;" aria-hidden="true"></div>

                    {{-- ========== KPI 0: ANÁLISIS DE META ========== --}}
                    <div class="tv-kpi-card">
                        <div class="tv-kpi-card__head">
                            <div class="tv-kpi-card__icon" aria-hidden="true">
                                <i class="fas fa-bullseye"></i>
                            </div>
                            <div class="tv-kpi-card__title-block">
                                <div class="tv-kpi-card__title"
                                     title="Análisis del desempeño vs equipo y estatus de meta">Análisis de Meta</div>
                                <div class="tv-kpi-card__subtitle"
                                     x-text="naValue(sellerEvaluationLabel(activeSeller()))"></div>
                            </div>
                        </div>
                        <div class="tv-kpi-card__body">
                            <div class="tv-kpi-card__value-row">
                                <span class="tv-kpi-card__value tv-animated-count"
                                      :class="sellerVsTeamDelta(activeSeller()) >= 0 ? 'tv-seller-performance__value--success' : 'tv-seller-performance__value--alert'"
                                      x-tv-count="isMissing(sellerVsTeamDelta(activeSeller())) ? 0 : Math.abs(sellerVsTeamDelta(activeSeller()))"></span>
                                <span class="tv-kpi-card__value-unit" style="font-size: 1.5rem;" x-text="isMissing(sellerVsTeamDelta(activeSeller())) ? 'N/A vs equipo' : `% ${sellerVsTeamDelta(activeSeller()) >= 0 ? 'arriba' : 'abajo'} del equipo`"></span>
                            </div>
                            <div class="tv-kpi-card__trend"
                                 :class="sellerVsTeamDelta(activeSeller()) >= 0 ? 'tv-kpi-card__trend--up' : 'tv-kpi-card__trend--down'">
                                <i :class="sellerVsTeamDelta(activeSeller()) >= 0 ? 'fas fa-arrow-up' : 'fas fa-arrow-down'" aria-hidden="true"></i>
                                <span x-text="isMissing(activeSeller()?.performance?.sales_progress?.percent) ? 'Sin meta asignada' : (sellerGoalStatus(activeSeller()) === 'over' ? '¡Superó la meta!' : (100 - activeSeller().performance.sales_progress.percent > 0 ? `Falta ${100 - activeSeller().performance.sales_progress.percent}%` : 'Meta alcanzada'))"></span>
                            </div>
                        </div>
                    </div>

                    {{-- ========== KPI 1: VENTAS ========== --}}
                    <div class="tv-kpi-card tv-kpi-card--gold">
                        <div class="tv-kpi-card__head">
                            <div class="tv-kpi-card__icon" aria-hidden="true">
                                <i class="fas fa-receipt"></i>
                            </div>
                            <div class="tv-kpi-card__title-block">
                                <div class="tv-kpi-card__title"
                                     title="Cantidad de ventas efectivas (facturas) del mes en curso">Ventas del Mes</div>
                                <div class="tv-kpi-card__subtitle">Facturas emitidas</div>
                            </div>
                        </div>
                        <div class="tv-kpi-card__body">
                            <div class="tv-kpi-card__value tv-animated-count"
                                 :class="`tv-kpi-card__value--${semaphoreColor(activeSeller()?.performance?.sales_progress?.percent)}`"
                                 x-tv-count="naValue(activeSeller()?.sales_count_month)"></div>
                            <div class="tv-kpi-card__trend"
                                 :class="`tv-kpi-card__trend--${activeSeller()?.trend ?? 'same'}`"
                                 :title="activeSeller()?.trend === 'up' ? 'Subiendo vs mes anterior' : (activeSeller()?.trend === 'down' ? 'Bajando vs mes anterior' : 'Estable vs mes anterior')">
                                <i :class="activeSeller()?.trend === 'up' ? 'fas fa-arrow-trend-up' : (activeSeller()?.trend === 'down' ? 'fas fa-arrow-trend-down' : 'fas fa-equals')"
                                   aria-hidden="true"></i>
                                <span x-text="naValue(activeSeller()?.trend === 'up' ? 'En alza' : (activeSeller()?.trend === 'down' ? 'En baja' : (activeSeller()?.trend === 'same' ? 'Estable' : null)))"></span>
                            </div>
                        </div>
                    </div>

                    {{-- ========== KPI 2: PEDIDOS ========== --}}
                    <div class="tv-kpi-card tv-kpi-card--info">
                        <div class="tv-kpi-card__head">
                            <div class="tv-kpi-card__icon" aria-hidden="true">
                                <i class="fas fa-boxes-stacked"></i>
                            </div>
                            <div class="tv-kpi-card__title-block">
                                <div class="tv-kpi-card__title"
                                     title="Total de pedidos del mes y porcentaje procesado">Pedidos del Mes</div>
                                <div class="tv-kpi-card__subtitle">Procesados vs pendientes</div>
                            </div>
                        </div>
                        <div class="tv-kpi-card__body">
                            <div class="tv-kpi-card__value-row">
                                <span class="tv-kpi-card__value tv-animated-count"
                                      x-tv-count="naValue((activeSeller()?.performance?.orders?.monthly_total_count ?? 0) - (activeSeller()?.performance?.orders?.monthly_unprocessed_count ?? 0))"></span>
                                <span class="tv-kpi-card__value-sep">/</span>
                                <span class="tv-kpi-card__value tv-kpi-card__value--muted tv-animated-count"
                                      x-tv-count="naValue(activeSeller()?.performance?.orders?.monthly_total_count)"></span>
                            </div>
                            <div class="tv-kpi-card__bar">
                                <div class="tv-kpi-card__bar-track">
                                    <div class="tv-kpi-card__bar-fill tv-kpi-card__bar-fill--info"
                                         :style="`width: ${Math.max(0, Math.min(100, 100 - (activeSeller()?.performance?.orders?.unprocessed_percent || 0)))}%`"></div>
                                </div>
                                <span class="tv-kpi-card__bar-label"
                                      :class="(activeSeller()?.performance?.orders?.unprocessed_percent || 0) >= 50 ? 'tv-kpi-card__bar-label--warn' : ''"
                                      x-text="isMissing(activeSeller()?.performance?.orders?.monthly_unprocessed_count) ? 'N/A pendientes' : `${activeSeller().performance.orders.monthly_unprocessed_count} pendiente${activeSeller().performance.orders.monthly_unprocessed_count === 1 ? '' : 's'}`"></span>
                            </div>
                        </div>
                    </div>

                    {{-- ========== KPI 3: DEVOLUCIONES ========== --}}
                    <div class="tv-kpi-card"
                         :class="isMissing(activeSeller()?.performance?.returns?.percent) ? 'tv-kpi-card--muted' : ((activeSeller().performance.returns.percent || 0) >= returnsAlertPercent ? 'tv-kpi-card--alert' : 'tv-kpi-card--success')">
                        <div class="tv-kpi-card__head">
                            <div class="tv-kpi-card__icon" aria-hidden="true">
                                <i class="fas fa-rotate-left"></i>
                            </div>
                            <div class="tv-kpi-card__title-block">
                                <div class="tv-kpi-card__title"
                                     title="Devoluciones del mes vs ventas totales">Devoluciones</div>
                                <div class="tv-kpi-card__subtitle"
                                     x-text="isMissing(activeSeller()?.performance?.returns?.percent) ? 'Sin datos' : ((activeSeller().performance.returns.percent || 0) >= returnsAlertPercent ? 'Tasa elevada' : 'Tasa saludable')"></div>
                            </div>
                            <div class="tv-kpi-card__badge"
                                 :class="isMissing(activeSeller()?.performance?.returns?.percent) ? 'tv-kpi-card__badge--muted' : ((activeSeller().performance.returns.percent || 0) >= returnsAlertPercent ? 'tv-kpi-card__badge--alert' : 'tv-kpi-card__badge--success')"
                                 x-text="isMissing(activeSeller()?.performance?.returns?.percent) ? 'N/A' : ((activeSeller().performance.returns.percent || 0) >= returnsAlertPercent ? 'Alerta' : 'OK')"></div>
                        </div>
                        <div class="tv-kpi-card__body">
                            <div class="tv-kpi-card__value-row">
                                <span class="tv-kpi-card__value tv-animated-count"
                                      x-tv-count="naValue(activeSeller()?.performance?.returns?.count)"></span>
                                <span class="tv-kpi-card__value-unit">dev.</span>
                            </div>
                            <div class="tv-kpi-card__bar">
                                <div class="tv-kpi-card__bar-track">
                                    <div class="tv-kpi-card__bar-fill"
                                         :class="(activeSeller()?.performance?.returns?.percent || 0) >= returnsAlertPercent ? 'tv-kpi-card__bar-fill--alert' : 'tv-kpi-card__bar-fill--success'"
                                         :style="`width: ${Math.min(100, (activeSeller()?.performance?.returns?.percent || 0) * 2)}%`"></div>
                                </div>
                                <span class="tv-kpi-card__bar-label">
                                    <span class="tv-animated-count"
                                          x-tv-count.percent="naValue(activeSeller()?.performance?.returns?.percent)"></span>
                                    del total de ventas
                                </span>
                            </div>
                        </div>
                    </div>

                    {{-- ========== KPI 4: CLIENTES (DUAL) ========== --}}
                    <div class="tv-kpi-card tv-kpi-card--duo tv-kpi-card--gold">
                        <div class="tv-kpi-card__head">
                            <div class="tv-kpi-card__icon" aria-hidden="true">
                                <i class="fas fa-user-plus"></i>
                            </div>
                            <div class="tv-kpi-card__title-block">
                                <div class="tv-kpi-card__title"
                                     title="Clientes nuevos y reactivados (tras +6 meses sin comprar) que compraron este mes">Cartera de Clientes</div>
                                <div class="tv-kpi-card__subtitle"
                                     x-text="isMissing(sellerCustomersTotal(activeSeller())) || sellerCustomersTotal(activeSeller()) === null ? 'N/A clientes este mes' : `${sellerCustomersTotal(activeSeller())} cliente${sellerCustomersTotal(activeSeller()) === 1 ? '' : 's'} este mes`"></div>
                            </div>
                        </div>
                        <div class="tv-kpi-card__duo-body">
                            <div class="tv-kpi-duo">
                                <div class="tv-kpi-duo__side tv-kpi-duo__side--new"
                                     title="Clientes cuya primera compra histórica fue este mes">
                                    <div class="tv-kpi-duo__icon"><i class="fas fa-sparkles" aria-hidden="true"></i></div>
                                    <div class="tv-kpi-duo__value tv-animated-count"
                                         x-tv-count="naValue(activeSeller()?.performance?.customers?.new_with_purchase_count)"></div>
                                    <div class="tv-kpi-duo__label">Nuevos</div>
                                </div>
                                <div class="tv-kpi-duo__divider" aria-hidden="true"></div>
                                <div class="tv-kpi-duo__side tv-kpi-duo__side--reactivated"
                                     title="Clientes inactivos por +6 meses que regresaron este mes">
                                    <div class="tv-kpi-duo__icon"><i class="fas fa-rotate" aria-hidden="true"></i></div>
                                    <div class="tv-kpi-duo__value tv-animated-count"
                                         x-tv-count="naValue(activeSeller()?.performance?.customers?.reactivated_count)"></div>
                                    <div class="tv-kpi-duo__label">Reactivados</div>
                                </div>
                            </div>
                            <div class="tv-kpi-card__bar tv-kpi-card__bar--inline">
                                <div class="tv-kpi-card__bar-track">
                                    <div class="tv-kpi-card__bar-segment tv-kpi-card__bar-segment--new"
                                         :style="`width: ${sellerCustomersTotal(activeSeller()) > 0 ? Math.round((activeSeller().performance.customers.new_with_purchase_count / sellerCustomersTotal(activeSeller())) * 100) : 0}%`"></div>
                                    <div class="tv-kpi-card__bar-segment tv-kpi-card__bar-segment--reactivated"
                                         :style="`width: ${sellerCustomersTotal(activeSeller()) > 0 ? Math.round((activeSeller().performance.customers.reactivated_count / sellerCustomersTotal(activeSeller())) * 100) : 0}%`"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- ========== KPI 5: COTIZACIONES (DUAL: mes + hoy) ========== --}}
                    <div class="tv-kpi-card tv-kpi-card--duo tv-kpi-card--info"
                         x-show="(activeSeller()?.performance?.quotes?.monthly?.total_count ?? 0) > 0
                                 || (activeSeller()?.performance?.quotes?.daily?.total_count ?? 0) > 0">
                        <div class="tv-kpi-card__head">
                            <div class="tv-kpi-card__icon" aria-hidden="true">
                                <i class="fas fa-file-invoice-dollar"></i>
                            </div>
                            <div class="tv-kpi-card__title-block">
                                <div class="tv-kpi-card__title"
                                     title="Cotizaciones procesadas, pendientes y anuladas (mes y hoy)">Cotizaciones</div>
                                <div class="tv-kpi-card__subtitle">Embudo del mes y de hoy</div>
                            </div>
                        </div>
                        <div class="tv-kpi-card__duo-body">
                            <div class="tv-kpi-quotes-row">
                                <div class="tv-kpi-quotes-block">
                                    <div class="tv-kpi-quotes-block__title">
                                        <i class="fas fa-calendar" aria-hidden="true"></i> Mes
                                    </div>
                                    <div class="tv-kpi-quotes-block__trio">
                                        <div class="tv-kpi-quotes-block__stat tv-kpi-quotes-block__stat--ok"
                                             :title="`${naValue(activeSeller()?.performance?.quotes?.monthly?.processed_count)} cotizaciones procesadas este mes`">
                                            <span class="tv-kpi-quotes-block__value tv-animated-count"
                                                  x-tv-count="naValue(activeSeller()?.performance?.quotes?.monthly?.processed_count)"></span>
                                            <span class="tv-kpi-quotes-block__label">Proc.</span>
                                        </div>
                                        <div class="tv-kpi-quotes-block__stat tv-kpi-quotes-block__stat--warn"
                                             :title="`${naValue(activeSeller()?.performance?.quotes?.monthly?.unprocessed_count)} cotizaciones pendientes este mes`">
                                            <span class="tv-kpi-quotes-block__value tv-animated-count"
                                                  x-tv-count="naValue(activeSeller()?.performance?.quotes?.monthly?.unprocessed_count)"></span>
                                            <span class="tv-kpi-quotes-block__label">Pend.</span>
                                        </div>
                                        <div class="tv-kpi-quotes-block__stat tv-kpi-quotes-block__stat--alert"
                                             :title="`${naValue(activeSeller()?.performance?.quotes?.monthly?.annulled_count)} cotizaciones anuladas este mes`">
                                            <span class="tv-kpi-quotes-block__value tv-animated-count"
                                                  x-tv-count="naValue(activeSeller()?.performance?.quotes?.monthly?.annulled_count)"></span>
                                            <span class="tv-kpi-quotes-block__label">Anul.</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="tv-kpi-quotes-block">
                                    <div class="tv-kpi-quotes-block__title">
                                        <i class="fas fa-sun" aria-hidden="true"></i> Hoy
                                    </div>
                                    <div class="tv-kpi-quotes-block__trio">
                                        <div class="tv-kpi-quotes-block__stat tv-kpi-quotes-block__stat--ok"
                                             :title="`${naValue(activeSeller()?.performance?.quotes?.daily?.processed_count)} cotizaciones procesadas hoy`">
                                            <span class="tv-kpi-quotes-block__value tv-animated-count"
                                                  x-tv-count="naValue(activeSeller()?.performance?.quotes?.daily?.processed_count)"></span>
                                            <span class="tv-kpi-quotes-block__label">Proc.</span>
                                        </div>
                                        <div class="tv-kpi-quotes-block__stat tv-kpi-quotes-block__stat--warn"
                                             :title="`${naValue(activeSeller()?.performance?.quotes?.daily?.unprocessed_count)} cotizaciones pendientes hoy`">
                                            <span class="tv-kpi-quotes-block__value tv-animated-count"
                                                  x-tv-count="naValue(activeSeller()?.performance?.quotes?.daily?.unprocessed_count)"></span>
                                            <span class="tv-kpi-quotes-block__label">Pend.</span>
                                        </div>
                                        <div class="tv-kpi-quotes-block__stat tv-kpi-quotes-block__stat--alert"
                                             :title="`${naValue(activeSeller()?.performance?.quotes?.daily?.annulled_count)} cotizaciones anuladas hoy`">
                                            <span class="tv-kpi-quotes-block__value tv-animated-count"
                                                  x-tv-count="naValue(activeSeller()?.performance?.quotes?.daily?.annulled_count)"></span>
                                            <span class="tv-kpi-quotes-block__label">Anul.</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- ========== EMPTY STATE: Sin cotizaciones del vendedor ========== --}}
                    <div class="tv-kpi-card tv-kpi-card--info tv-kpi-card--empty"
                         x-show="(activeSeller()?.performance?.quotes?.monthly?.total_count ?? 0) === 0
                                 && (activeSeller()?.performance?.quotes?.daily?.total_count ?? 0) === 0"
                         title="El vendedor no ha emitido cotizaciones este mes">
                        <div class="tv-kpi-card__head">
                            <div class="tv-kpi-card__icon" aria-hidden="true">
                                <i class="fas fa-file-invoice-dollar"></i>
                            </div>
                            <div class="tv-kpi-card__title-block">
                                <div class="tv-kpi-card__title">Cotizaciones</div>
                                <div class="tv-kpi-card__subtitle">Sin cotizaciones registradas</div>
                            </div>
                        </div>
                        <div class="tv-kpi-card__body tv-kpi-card__body--empty">
                            <i class="fas fa-file-circle-xmark tv-kpi-card__empty-icon" aria-hidden="true"></i>
                            <p class="tv-kpi-card__empty-msg">Este vendedor no ha emitido cotizaciones este mes ni hoy.</p>
                        </div>
                    </div>

                    {{-- ========== SECCIÓN: DESEMPEÑO POR SEDE ========== --}}
                    <div class="tv-kpi-section"
                         x-show="activeSeller().branches && Object.keys(activeSeller().branches).length > 0">
                        <div class="tv-kpi-section__head">
                            <i class="fas fa-store" aria-hidden="true"></i>
                            <span class="tv-kpi-section__title"
                                  title="Desglose de ventas, facturas, pedidos y kilos por sede">Desempeño por Sede</span>
                        </div>
                        <div class="tv-kpi-section__body">
                            <div class="tv-branch-ventas-grid">
                                <template x-for="(branchStats, branchCode) in activeSeller().branches" :key="branchCode">
                                    <div class="tv-kpi-branch"
                                         :title="`Resumen operativo de la sede ${branchCode}`">
                                        <div class="tv-kpi-branch__head">
                                            <i class="fas fa-store-alt tv-kpi-branch__icon" aria-hidden="true"></i>
                                            <span class="tv-kpi-branch__name"
                                                  x-text="(branchCode || 'N/A').charAt(0).toUpperCase() + (branchCode || 'N/A').slice(1)"></span>
                                        </div>
                                        <div class="tv-kpi-branch__metrics">
                                            <div class="tv-kpi-branch__metric"
                                                 :title="`${naValue(branchStats.clientes_venta_efectiva)} clientes con venta efectiva en ${branchCode}`">
                                                <i class="fas fa-users" aria-hidden="true"></i>
                                                <span class="tv-kpi-branch__metric-value tv-animated-count"
                                                      x-tv-count="naValue(branchStats.clientes_venta_efectiva)"></span>
                                                <span class="tv-kpi-branch__metric-label">Clientes</span>
                                            </div>
                                            <div class="tv-kpi-branch__metric"
                                                 :title="`${naValue(branchStats.cantidad_facturas)} facturas emitidas en ${branchCode}`">
                                                <i class="fas fa-receipt" aria-hidden="true"></i>
                                                <span class="tv-kpi-branch__metric-value tv-animated-count"
                                                      x-tv-count="naValue(branchStats.cantidad_facturas)"></span>
                                                <span class="tv-kpi-branch__metric-label">Facturas</span>
                                            </div>
                                            <div class="tv-kpi-branch__metric"
                                                 :title="`${naValue(branchStats.orders_total)} pedidos registrados en ${branchCode}`">
                                                <i class="fas fa-box" aria-hidden="true"></i>
                                                <span class="tv-kpi-branch__metric-value tv-animated-count"
                                                      x-tv-count="naValue(branchStats.orders_total)"></span>
                                                <span class="tv-kpi-branch__metric-label">Pedidos</span>
                                            </div>
                                            <div class="tv-kpi-branch__metric tv-kpi-branch__metric--highlight"
                                                 :title="`Kilos vendidos en ${branchCode}`">
                                                <i class="fas fa-weight-hanging" aria-hidden="true"></i>
                                                <span class="tv-kpi-branch__metric-value tv-kpi-branch__metric-value--accent"
                                                      x-text="isMissing(branchStats.kilos_sold_month) ? 'N/A kg' : `${Number(branchStats.kilos_sold_month).toLocaleString('es-VE', {minimumFractionDigits: 1, maximumFractionDigits: 1})} kg`"></span>
                                                <span class="tv-kpi-branch__metric-label">kg vendidos</span>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>

                    {{-- ========== EMPTY STATE: Sin datos de sede ========== --}}
                    <div class="tv-kpi-section tv-kpi-section--empty"
                         x-show="!activeSeller().branches || Object.keys(activeSeller().branches).length === 0"
                         title="El driver pdo_sqlsrv no está instalado en este servidor; los datos por sede no se pueden leer de Profit Plus/Central">
                        <div class="tv-kpi-section__head">
                            <i class="fas fa-store" aria-hidden="true"></i>
                            <span class="tv-kpi-section__title">Desempeño por Sede</span>
                        </div>
                        <div class="tv-kpi-section__empty">
                            <i class="fas fa-plug-circle-exclamation tv-kpi-section__empty-icon" aria-hidden="true"></i>
                            <p class="tv-kpi-section__empty-title">Sin datos por sede</p>
                            <p class="tv-kpi-section__empty-msg">No se pudo leer la información de Caldera y Central. Verificá que el driver <code>pdo_sqlsrv</code> esté instalado en el servidor.</p>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </template>
</section>