:root {
    --pbi-canvas: #16181d;
    --pbi-surface: rgba(255, 255, 255, 0.06);
    --pbi-glass: rgba(255, 255, 255, 0.08);
    --pbi-border: rgba(255, 255, 255, 0.12);
    --pbi-accent: #FFCC21;
    --pbi-accent-soft: rgba(255, 204, 33, 0.18);
    --pbi-text: #f3f4f6;
    --pbi-muted: rgba(243, 244, 246, 0.55);
    --tv-gold: #FFCC21;
    --tv-gold-light: #FFE566;
    --tv-gold-dark: #E6A800;
    /* Contadores TV — legibles a distancia */
    --tv-counter-xl: clamp(3.5rem, 16vh, 9rem);
    --tv-counter-lg: clamp(3rem, 13vh, 7.5rem);
    --tv-counter-md: clamp(2.5rem, 11cqh, 6rem);
    --tv-counter-sm: clamp(2rem, 8cqh, 4.5rem);
    /* Tipografía TV panorámico (~3 m) */
    --tv-text-display: clamp(2.5rem, 7vh, 5rem);
    --tv-text-title: clamp(1.75rem, 4.5vh, 3rem);
    --tv-text-heading: clamp(1.35rem, 3vh, 2.25rem);
    --tv-text-body: clamp(1.1rem, 2.2vh, 1.75rem);
    --tv-text-label: clamp(1.1rem, 2.4vh, 1.65rem);
    --tv-text-micro: clamp(0.95rem, 1.9vh, 1.35rem);
    --tv-portrait-chase: clamp(88px, 28cqh, 160px);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    font-family: 'Segoe UI', 'Nunito', Roboto, Helvetica, Arial, sans-serif;
    background: var(--pbi-canvas);
    color: var(--pbi-text);
    overflow: hidden;
}

:fullscreen html, :fullscreen body { height: 100%; }
:-webkit-full-screen html, :-webkit-full-screen body { height: 100%; }

.tv-wall {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    padding: clamp(8px, 1vh, 16px) clamp(10px, 1.2vw, 20px);
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 0.8vh, 12px);
    overflow: hidden;
}

:fullscreen .tv-wall { height: 100%; max-height: 100%; }
:-webkit-full-screen .tv-wall { height: 100%; max-height: 100%; }

/* Soporte para pruebas en resoluciones muy pequeñas (DevTools) */
@media (max-height: 700px) {
    html, body, .tv-wall {
        height: auto !important;
        min-height: 100vh;
        overflow-y: auto !important;
        overflow-x: hidden;
    }
}

.tv-wall__canvas-grid {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 204, 33, 0.06), transparent 55%),
        linear-gradient(var(--pbi-canvas), var(--pbi-canvas)),
        repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255,255,255,0.02) 39px, rgba(255,255,255,0.02) 40px),
        repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255,255,255,0.02) 39px, rgba(255,255,255,0.02) 40px);
    z-index: 0;
}

.tv-wall > *:not(.tv-wall__canvas-grid):not(.tv-celebration):not(.tv-demo-btn) {
    position: relative;
    z-index: 1;
}

.tv-celebration,
.tv-demo-btn {
    z-index: 1000;
}

/* Glass panel */
.tv-glass {
    background: var(--pbi-glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--pbi-border);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Brand header */
.tv-wall__brand {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.4vw, 20px);
    padding: clamp(8px, 1vh, 12px) clamp(14px, 1.4vw, 20px);
    flex-shrink: 0;
    min-width: 0;
    flex-wrap: nowrap;
}

.tv-wall__brand-text {
    min-width: 0;
    flex: 0 1 auto;
}

.tv-wall__logo {
    width: clamp(48px, 6vw, 72px);
    height: auto;
}

.tv-wall__brand-text h1 {
    margin: 0;
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.tv-wall__brand-text p {
    margin: 2px 0 0;
    font-size: 0.85rem;
    color: var(--pbi-muted);
    text-transform: capitalize;
}

.tv-wall__clock {
    margin-left: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(8px, 1.2vw, 14px);
    flex-shrink: 0;
}

.tv-wall__clock-time {
    font-size: clamp(0.85rem, 1.2vw, 0.95rem);
    color: var(--pbi-text);
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tv-wall__clock-rotation {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.tv-rotation-ring {
    --rotation-pct: 100;
    width: clamp(28px, 3.2vh, 36px);
    height: clamp(28px, 3.2vh, 36px);
    border-radius: 50%;
    background: conic-gradient(
        from -90deg,
        var(--pbi-accent) calc(var(--rotation-pct) * 1%),
        rgba(255, 255, 255, 0.1) 0
    );
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 0 12px rgba(255, 204, 33, 0.15);
}

.tv-rotation-ring::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--pbi-canvas);
}

.tv-rotation-ring__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.tv-rotation-ring__value {
    font-size: clamp(0.65rem, 1vh, 0.75rem);
    font-weight: 800;
    color: var(--pbi-accent);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.tv-rotation-ring__pause {
    font-size: 0.55rem;
    color: var(--pbi-accent);
}

.tv-rotation-ring--pause {
    background: conic-gradient(
        from -90deg,
        rgba(255, 204, 33, 0.35) 100%,
        rgba(255, 255, 255, 0.1) 0
    );
    animation: rotationRingPulse 2s ease-in-out infinite;
}

@keyframes rotationRingPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(255, 204, 33, 0.15); }
    50% { box-shadow: 0 0 16px rgba(255, 204, 33, 0.35); }
}

.tv-wall__clock-time i {
    color: var(--pbi-accent);
}

.tv-wall__clock-sync {
    font-size: clamp(0.65rem, 0.9vw, 0.75rem);
    color: var(--pbi-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding-left: clamp(6px, 0.8vw, 10px);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.tv-wall__clock-sync i {
    font-size: 0.65rem;
    color: var(--pbi-accent);
    opacity: 0.85;
}

.tv-fullscreen-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(28px, 3.2vh, 36px);
    height: clamp(28px, 3.2vh, 36px);
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 204, 33, 0.35);
    background: rgba(255, 255, 255, 0.06);
    color: var(--pbi-accent);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    animation: tvFullscreenBtnPulse 3s ease-in-out infinite;
}

.tv-fullscreen-btn:hover,
.tv-fullscreen-btn:focus-visible {
    background: rgba(255, 204, 33, 0.14);
    border-color: rgba(255, 204, 33, 0.55);
    box-shadow: 0 0 14px rgba(255, 204, 33, 0.25);
    outline: none;
    transform: scale(1.05);
}

.tv-fullscreen-btn i {
    font-size: clamp(0.72rem, 1.2vh, 0.85rem);
}

@keyframes tvFullscreenBtnPulse {
    0%, 100% { box-shadow: 0 0 0 rgba(255, 204, 33, 0); }
    50% { box-shadow: 0 0 12px rgba(255, 204, 33, 0.22); }
}

/* KPI row */
.tv-wall__kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(10px, 1.2vw, 16px);
}

.tv-kpi {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: clamp(14px, 1.5vw, 20px);
    min-height: 88px;
}

.tv-kpi--accent {
    border-color: rgba(255, 204, 33, 0.35);
    background: linear-gradient(135deg, rgba(255, 204, 33, 0.12), var(--pbi-glass));
}

.tv-kpi--gauge {
    justify-content: center;
}

.tv-kpi__icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--pbi-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pbi-accent);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.tv-kpi__value {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
}

.tv-kpi__value--sm {
    font-size: clamp(1rem, 1.8vw, 1.35rem);
}

.tv-kpi__label {
    margin-top: 4px;
    font-size: 0.75rem;
    /* text-transform removed */
    letter-spacing: 0.06em;
    color: var(--pbi-muted);
}

/* Goal gauge */
.tv-gauge {
    text-align: center;
}

.tv-gauge__ring {
    --gauge-pct: 0;
    width: 64px;
    height: 64px;
    margin: 0 auto 6px;
    border-radius: 50%;
    background: conic-gradient(
        var(--pbi-accent) calc(var(--gauge-pct) * 1%),
        rgba(255, 255, 255, 0.08) 0
    );
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.tv-gauge__ring::before {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: var(--pbi-canvas);
}

.tv-gauge__inner {
    position: relative;
    z-index: 1;
}

.tv-gauge__value {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--pbi-accent);
}

.tv-gauge__label {
    font-size: 0.7rem;
    /* text-transform removed */
    letter-spacing: 0.05em;
    color: var(--pbi-muted);
}

.tv-gauge__sub {
    font-size: 0.65rem;
    color: var(--pbi-muted);
    margin-top: 2px;
}

/* Metrics grid */
.tv-wall__metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(10px, 1.2vw, 14px);
    flex: 1;
    min-height: 0;
}

.tv-metric-tile {
    padding: clamp(12px, 1.4vw, 18px);
    display: flex;
    flex-direction: column;
    min-height: 140px;
}

.tv-metric-tile--rich {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.1) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    transition: border-color 0.2s ease;
}

.tv-metric-tile--rich:hover {
    border-color: rgba(255, 204, 33, 0.2);
}

.tv-metric-tile__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.tv-metric-tile__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.68rem;
    font-weight: 600;
    /* text-transform removed */
    letter-spacing: 0.06em;
    color: var(--pbi-muted);
}

.tv-metric-tile__title i {
    color: var(--pbi-accent);
    font-size: 0.85rem;
}

.tv-metric-tile__badge {
    flex-shrink: 0;
}

.tv-metric-badge {
    padding: clamp(6px, 0.8vh, 8px) clamp(12px, 1.5vw, 18px);
    border-radius: 999px;
    font-size: clamp(0.75rem, 1.5vh, 1rem);
    font-weight: 800;
    /* text-transform removed */
    letter-spacing: 0.06em;
    white-space: nowrap;
    border: 1px solid transparent;
}

.tv-metric-badge--ok { 
    background: rgba(255, 204, 33, 0.15); 
    color: #FFDF00; 
    border-color: rgba(255, 204, 33, 0.6);
    box-shadow: 0 0 12px rgba(255, 204, 33, 0.25);
}
.tv-metric-badge--warn { 
    background: rgba(251, 191, 36, 0.15); 
    color: #FDE047; 
    border-color: rgba(251, 191, 36, 0.6);
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.25);
}
.tv-metric-badge--alert { 
    background: rgba(248, 113, 113, 0.15); 
    color: #FCA5A5; 
    border-color: rgba(248, 113, 113, 0.6);
    box-shadow: 0 0 12px rgba(248, 113, 113, 0.25);
}
.tv-metric-badge--info { 
    background: rgba(96, 165, 250, 0.15); 
    color: #93C5FD; 
    border-color: rgba(96, 165, 250, 0.6);
    box-shadow: 0 0 12px rgba(96, 165, 250, 0.25);
}

.tv-metric-tile__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.tv-metric-tile__footer {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.62rem;
    color: var(--pbi-muted);
}

/* Mini gauges */
.tv-progress-trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.tv-mini-gauge {
    text-align: center;
}

.tv-mini-gauge--lg .tv-mini-gauge__ring {
    width: 72px;
    height: 72px;
}

.tv-mini-gauge__ring {
    --gauge-pct: 0;
    width: 52px;
    height: 52px;
    margin: 0 auto 4px;
    border-radius: 50%;
    background: conic-gradient(
        var(--pbi-accent) calc(var(--gauge-pct) * 1%),
        rgba(255, 255, 255, 0.08) 0
    );
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.tv-mini-gauge__ring--alert {
    background: conic-gradient(
        #f87171 calc(var(--gauge-pct) * 1%),
        rgba(255, 255, 255, 0.08) 0
    );
}

.tv-metric-returns--alert .tv-mini-gauge__ring--alert {
    background: conic-gradient(
        #ef4444 calc(var(--gauge-pct) * 1%),
        rgba(239, 68, 68, 0.15) 0
    );
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.25);
}

.tv-mini-gauge__ring::before {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: var(--pbi-canvas);
}

.tv-mini-gauge__inner {
    position: relative;
    z-index: 1;
}

.tv-mini-gauge__value {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--pbi-accent);
}

.tv-mini-gauge--lg .tv-mini-gauge__value {
    font-size: 0.85rem;
}

.tv-metric-returns--alert .tv-mini-gauge__value {
    color: #f87171;
}

.tv-mini-gauge__label {
    font-size: 0.6rem;
    /* text-transform removed */
    letter-spacing: 0.05em;
    color: var(--pbi-muted);
}

.tv-mini-gauge__sub {
    font-size: 0.55rem;
    color: var(--pbi-muted);
    margin-top: 1px;
}

.tv-mini-gauge--rich .tv-mini-gauge__ring {
    width: 58px;
    height: 58px;
}

.tv-mini-gauge--rich .tv-mini-gauge__value {
    font-size: 0.75rem;
}

.tv-mini-gauge__ring--lg {
    width: 80px !important;
    height: 80px !important;
}

.tv-mini-gauge__ring--success {
    background: conic-gradient(#4ade80 calc(var(--gauge-pct) * 1%), rgba(255, 255, 255, 0.08) 0);
}

.tv-mini-gauge__ring--ok {
    background: conic-gradient(var(--pbi-accent) calc(var(--gauge-pct) * 1%), rgba(255, 255, 255, 0.08) 0);
}

.tv-mini-gauge__ring--warn {
    background: conic-gradient(#fbbf24 calc(var(--gauge-pct) * 1%), rgba(255, 255, 255, 0.08) 0);
}

.tv-mini-gauge__ring--alert {
    background: conic-gradient(#f87171 calc(var(--gauge-pct) * 1%), rgba(255, 255, 255, 0.08) 0);
}

.tv-mini-gauge__track {
    height: 4px;
    margin-top: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
}

.tv-mini-gauge__track-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--tv-gold-dark), var(--pbi-accent));
    border-radius: 999px;
    transition: width 0.5s ease;
    min-width: 2px;
}

/* Kilos tile */
.tv-metric-kilos,
.tv-metric-returns {
    display: flex;
    align-items: center;
    gap: 14px;
}

.tv-metric-kilos__value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--pbi-accent);
    display: block;
}

.tv-metric-kilos__sub {
    font-size: 0.7rem;
    color: var(--pbi-muted);
}

.tv-metric-kilos--rich {
    gap: 16px;
}

.tv-metric-kilos__track {
    height: 6px;
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
}

.tv-metric-kilos__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--tv-gold-dark), var(--pbi-accent));
    border-radius: 999px;
    transition: width 0.5s ease;
}

.tv-metric-returns__count {
    font-size: 0.95rem;
    font-weight: 600;
    display: block;
}

.tv-metric-returns__sub {
    font-size: 0.7rem;
    color: var(--pbi-muted);
}

.tv-metric-returns--rich {
    gap: 16px;
}

.tv-metric-returns__track {
    height: 6px;
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
}

.tv-metric-returns__fill {
    height: 100%;
    background: linear-gradient(90deg, #dc2626, #f87171);
    border-radius: 999px;
    transition: width 0.5s ease;
}

/* Quotes tile */
.tv-metric-quotes {
    text-align: center;
}

.tv-metric-quotes__hero {
    font-size: 2rem;
    font-weight: 800;
    color: var(--pbi-accent);
    line-height: 1;
}

.tv-metric-quotes__label {
    font-size: 0.65rem;
    /* text-transform removed */
    letter-spacing: 0.06em;
    color: var(--pbi-muted);
    margin-bottom: 10px;
}

.tv-metric-quotes--rich .tv-metric-quotes__hero {
    font-size: 2.2rem;
    text-shadow: 0 0 20px rgba(255, 204, 33, 0.2);
}

.tv-metric-quotes__donuts {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 10px;
}

/* Quote split bar */
.tv-quote-split__counts {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.65rem;
    color: var(--pbi-muted);
    margin-bottom: 6px;
}

.tv-quote-split__counts i {
    margin-right: 3px;
}

.tv-quote-split__processed strong {
    color: #4ade80;
    margin-left: 4px;
}

.tv-quote-split__unprocessed strong {
    color: #fbbf24;
    margin-left: 4px;
}

.tv-quote-split__track {
    display: flex;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
}

.tv-quote-split__fill {
    height: 100%;
    transition: width 0.5s ease;
    min-width: 2px;
}

.tv-quote-split__fill--processed {
    background: linear-gradient(90deg, #22c55e, #4ade80);
}

.tv-quote-split__fill--unprocessed {
    background: linear-gradient(90deg, #d97706, #fbbf24);
}

/* Dual KPI (clientes) */
.tv-metric-dual {
    display: flex;
    align-items: stretch;
    gap: 12px;
    height: 100%;
}

.tv-metric-dual__item {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tv-metric-dual__divider {
    width: 1px;
    background: var(--pbi-border);
    align-self: stretch;
}

.tv-metric-dual__value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--pbi-accent);
    line-height: 1;
}

.tv-metric-dual__label {
    margin-top: 4px;
    font-size: 0.6rem;
    /* text-transform removed */
    letter-spacing: 0.05em;
    color: var(--pbi-muted);
}

.tv-metric-dual--rich .tv-metric-dual__value {
    font-size: 2rem;
}

.tv-metric-dual__value--muted {
    color: #60a5fa;
}

/* Orders tile */
.tv-metric-orders {
    text-align: center;
}

.tv-metric-orders__hero {
    font-size: 2rem;
    font-weight: 800;
    color: #fbbf24;
    line-height: 1;
}

.tv-metric-orders__label {
    font-size: 0.65rem;
    /* text-transform removed */
    letter-spacing: 0.06em;
    color: var(--pbi-muted);
}

.tv-metric-orders__sub {
    font-size: 0.75rem;
    color: var(--pbi-muted);
    margin: 6px 0 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tv-metric-orders__sub span:first-child {
    font-weight: 700;
    color: var(--pbi-text);
    font-size: 0.9rem;
}

.tv-metric-orders__track {
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
}

.tv-metric-orders__fill {
    height: 100%;
    background: linear-gradient(90deg, #d97706, #fbbf24);
    border-radius: 999px;
    transition: width 0.5s ease;
    min-width: 2px;
}

.tv-metric-orders--rich {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tv-metric-orders__donuts {
    display: flex;
    justify-content: center;
    gap: 24px;
}

.tv-metric-orders__stats {
    text-align: center;
}

.tv-metric-orders--rich .tv-metric-orders__hero {
    font-size: 1.6rem;
}

.tv-metric-orders__total {
    display: block;
    font-size: 0.7rem;
    color: var(--pbi-muted);
    margin-top: 2px;
}

.tv-chart-donut--sm {
    width: 64px;
    height: 64px;
}

.tv-chart-donut--sm::before {
    inset: 8px;
}

.tv-chart-donut__value--xs {
    font-size: 0.75rem;
}

.tv-portrait--xs .tv-portrait__ring {
    width: 32px;
    height: 32px;
}

.tv-portrait--xs .tv-portrait__fallback {
    font-size: 0.85rem;
}

/* Main layout */
.tv-wall__main {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.4fr);
    gap: clamp(12px, 1.5vw, 20px);
    min-height: 0;
}

.tv-wall__podium--solo {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: clamp(4px, 0.6vh, 8px) clamp(6px, 0.8vw, 12px) clamp(2px, 0.4vh, 6px);
    container-type: size;
    container-name: tv-podium-solo;
    background:
        radial-gradient(ellipse 85% 65% at 50% 55%, rgba(196, 130, 42, 0.2), transparent 58%),
        radial-gradient(ellipse 120% 90% at 50% 100%, rgba(28, 18, 10, 0.92), rgba(6, 4, 3, 0.98)),
        var(--pbi-glass);
    border-color: rgba(212, 175, 55, 0.28);
}

.tv-section-title {
    margin: 0 0 16px;
    font-size: 0.8rem;
    font-weight: 600;
    /* text-transform removed */
    letter-spacing: 0.08em;
    color: var(--pbi-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.tv-section-title i {
    color: var(--pbi-accent);
}

.tv-wall__podium,
.tv-wall__ranking {
    padding: clamp(14px, 1.8vw, 22px);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.tv-wall__podium {
    flex: 1;
}

/* Top 3 — Podio gala */
.tv-podium--gala {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 0;
    overflow: hidden;
}

.tv-wall__podium--solo .tv-podium--gala {
    flex: 1 1 0;
    min-height: 0;
}

.tv-podium__scene {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
    border-radius: clamp(10px, 1.4vh, 16px);
    overflow: hidden;
    background:
        radial-gradient(ellipse 55% 50% at 50% 42%, rgba(210, 145, 50, 0.32), transparent 62%),
        radial-gradient(ellipse 100% 80% at 50% 100%, rgba(42, 28, 16, 0.88), rgba(10, 7, 5, 0.96));
}

.tv-podium__spotlight {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 42% 38% at 50% 38%, rgba(255, 210, 90, 0.18), transparent 70%);
    animation: podiumSpotlightBreath 5s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes podiumSpotlightBreath {
    0%, 100% { opacity: 0.65; }
    50% { opacity: 1; }
}

.tv-podium__confetti {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.tv-podium__confetti-piece {
    position: absolute;
    top: -8%;
    left: var(--confetti-left, 50%);
    opacity: 0;
    animation: podiumConfettiDrift var(--confetti-dur, 6s) linear infinite;
    animation-delay: var(--confetti-delay, 0s);
}

.tv-podium__confetti-piece--dot {
    width: clamp(5px, 0.7vh, 8px);
    height: clamp(5px, 0.7vh, 8px);
    border-radius: 50%;
    background: linear-gradient(135deg, #fff4c4, #d4af37);
    box-shadow: 0 0 6px rgba(255, 204, 33, 0.6);
}

.tv-podium__confetti-piece--ribbon {
    width: clamp(6px, 0.9vh, 10px);
    height: clamp(14px, 2vh, 22px);
    border-radius: 2px;
    background: linear-gradient(180deg, #ffe9a8, #c9a227);
    box-shadow: 0 0 8px rgba(255, 204, 33, 0.45);
}

.tv-podium__confetti-piece--spiral {
    width: clamp(10px, 1.4vh, 16px);
    height: clamp(3px, 0.45vh, 5px);
    border-radius: 999px;
    border: 2px solid rgba(212, 175, 55, 0.85);
    border-left-color: transparent;
    border-right-color: transparent;
}

@keyframes podiumConfettiDrift {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    8% {
        opacity: 0.9;
    }
    100% {
        opacity: 0.15;
        transform: translate3d(calc((var(--confetti-left, 50%) - 50%) * 0.3), 115%, 0) rotate(540deg);
    }
}

.tv-podium__arena {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.2fr) minmax(0, 0.94fr);
    align-items: stretch;
    gap: clamp(4px, 0.8vw, 12px);
    min-height: 0;
    height: 100%;
    position: relative;
    z-index: 2;
    padding: clamp(4px, 0.8vh, 10px) clamp(6px, 1vw, 14px) 0;
    box-sizing: border-box;
}

.tv-wall__podium--solo .tv-podium__arena {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0 auto;
    gap: clamp(3px, 0.6vw, 10px);
    padding-top: clamp(2px, 0.4vh, 6px);
}

.tv-podium__floor {
    position: relative;
    z-index: 3;
    height: clamp(8px, 1.2vh, 12px);
    background: linear-gradient(180deg, rgba(58, 42, 24, 0.95), rgba(14, 10, 7, 1));
    border-top: 1px solid rgba(212, 175, 55, 0.25);
    box-shadow: 0 -6px 24px rgba(255, 204, 33, 0.1);
    flex-shrink: 0;
}

.tv-podium__slot {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: stretch;
    min-width: 0;
    min-height: 0;
    height: 100%;
    position: relative;
    z-index: 2;
    text-align: center;
}

.tv-podium__slot--first {
    z-index: 4;
}

.tv-wall__podium--solo .tv-podium__slot {
    max-height: 100%;
}

.tv-podium__upper {
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    overflow: visible;
}

.tv-podium__photo-stack {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-shrink: 0;
    overflow: hidden;
    max-width: 100%;
}

.tv-podium__halo {
    position: absolute;
    inset: 0;
    border: clamp(2px, 0.35vh, 4px) solid rgba(212, 175, 55, 0.75);
    border-radius: clamp(16px, 2.2vh, 22px);
    box-shadow:
        0 0 28px rgba(255, 204, 33, 0.3),
        0 0 56px rgba(255, 204, 33, 0.1);
    animation: podiumHaloPulse 4.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes podiumHaloPulse {
    0%, 100% {
        opacity: 0.72;
        box-shadow:
            0 0 28px rgba(255, 204, 33, 0.28),
            0 0 56px rgba(255, 204, 33, 0.1),
            inset 0 0 20px rgba(255, 204, 33, 0.06);
    }
    50% {
        opacity: 1;
        box-shadow:
            0 0 48px rgba(255, 204, 33, 0.45),
            0 0 90px rgba(255, 204, 33, 0.18),
            inset 0 0 36px rgba(255, 204, 33, 0.12);
    }
}

.tv-podium__frame {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: clamp(4px, 0.6vh, 8px);
    z-index: 2;
}

.tv-podium__frame--rank-1 {
    padding-top: clamp(6px, 1vh, 10px);
    filter: drop-shadow(0 0 18px rgba(255, 204, 33, 0.2));
}

.tv-podium__slot--first .tv-podium__leader-ribbon {
    margin: clamp(2px, 0.3vh, 4px) 0;
}

.tv-podium__crown-badge {
    position: absolute;
    top: clamp(-10px, -1.2vh, -4px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(36px, 5.5vh, 52px);
    height: clamp(36px, 5.5vh, 52px);
    border-radius: 50%;
    background: linear-gradient(145deg, #fff4b0, var(--pbi-accent) 55%, var(--tv-gold-dark));
    border: 2px solid rgba(255, 240, 180, 0.85);
    box-shadow: 0 4px 14px rgba(255, 204, 33, 0.45);
}

.tv-podium__crown-badge i {
    font-size: clamp(1rem, 2vh, 1.45rem);
    color: #1a1a1a;
}

.tv-podium__leader-ribbon {
    width: 100%;
    max-width: min(100%, 380px);
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    z-index: 5;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.45));
}

.tv-podium__leader-ribbon-badge {
    width: 100%;
    justify-content: center;
    padding: clamp(5px, 0.75vh, 7px) clamp(10px, 1.4vw, 14px) !important;
    font-size: clamp(0.54rem, 0.92vh, 0.68rem) !important;
    letter-spacing: 0.09em !important;
    border-radius: 4px !important;
}

.tv-podium__photo-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
}

.tv-podium__photo-overlay--shade {
    background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.28) 100%);
}

.tv-podium__caption {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(4px, 0.55vh, 7px);
    padding: clamp(4px, 0.6vh, 8px) clamp(2px, 0.4vw, 6px) 0;
    flex-shrink: 0;
    min-width: 0;
}

.tv-podium__caption--champion {
    gap: clamp(6px, 0.75vh, 10px);
    padding: clamp(8px, 1vh, 12px) clamp(6px, 0.8vw, 10px);
    border-radius: clamp(8px, 1vh, 12px);
    background: linear-gradient(180deg, rgba(255, 204, 33, 0.18), rgba(255, 204, 33, 0.04));
    border: 1px solid rgba(255, 204, 33, 0.42);
    box-shadow:
        0 4px 22px rgba(255, 204, 33, 0.22),
        inset 0 1px 0 rgba(255, 240, 160, 0.15);
}

.tv-podium__sales-badge {
    flex-shrink: 0;
    display: inline-flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: clamp(4px, 0.5vw, 6px);
    min-width: 0;
    padding: clamp(4px, 0.55vh, 6px) clamp(10px, 1.2vw, 14px);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.72);
    border: 1px solid rgba(255, 204, 33, 0.45);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
}

.tv-podium__sales-badge--champion {
    padding: clamp(6px, 0.85vh, 10px) clamp(16px, 1.8vw, 22px);
    background: linear-gradient(135deg, #ffe566 0%, var(--pbi-accent) 50%, var(--tv-gold-dark) 100%);
    border: 2px solid rgba(255, 240, 180, 0.85);
    box-shadow:
        0 4px 24px rgba(255, 204, 33, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    animation: leaderRibbonShine 3s ease-in-out infinite;
}

.tv-portrait--podium-first,
.tv-portrait--podium-second,
.tv-portrait--podium-third {
    height: 100%;
    width: auto;
    aspect-ratio: 1;
    flex-shrink: 0;
}

.tv-portrait--podium-first {
    max-height: min(58cqh, 480px);
}

.tv-portrait--podium-second {
    max-height: min(52cqh, 384px);
}

.tv-portrait--podium-third {
    max-height: min(46cqh, 312px);
}

.tv-portrait--podium-first .tv-portrait__ring--podium,
.tv-portrait--podium-second .tv-portrait__ring--podium,
.tv-portrait--podium-third .tv-portrait__ring--podium {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    border-radius: clamp(14px, 1.8vh, 20px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
    border: 2px solid rgba(255, 255, 255, 0.15);
}

.tv-portrait--podium-first .tv-portrait__ring--podium {
    border-width: clamp(3px, 0.4vh, 4px);
    border-color: rgba(212, 175, 55, 0.75);
    border-radius: clamp(16px, 2.2vh, 22px);
    box-shadow:
        0 0 32px rgba(255, 204, 33, 0.3),
        0 10px 28px rgba(0, 0, 0, 0.4);
}

.tv-portrait--podium-second .tv-portrait__ring--podium {
    border-radius: clamp(14px, 1.9vh, 19px);
}

.tv-portrait--podium-third .tv-portrait__ring--podium {
    border-radius: clamp(12px, 1.6vh, 17px);
}

.tv-podium--gala .tv-portrait__ring--podium {
    overflow: hidden;
}

.tv-portrait__ring--podium-silver {
    border-color: rgba(203, 213, 225, 0.55) !important;
    box-shadow:
        0 0 20px rgba(148, 163, 184, 0.25),
        0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

.tv-portrait__ring--podium-bronze {
    border-color: rgba(251, 191, 36, 0.5) !important;
    box-shadow:
        0 0 20px rgba(217, 119, 6, 0.2),
        0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

.tv-podium__slot--leader .tv-portrait__ring--podium,
.tv-portrait__ring--leader.tv-portrait__ring--podium {
    border-color: rgba(255, 204, 33, 0.65) !important;
    box-shadow:
        0 0 44px rgba(255, 204, 33, 0.38),
        0 12px 32px rgba(0, 0, 0, 0.4),
        inset 0 0 0 1px rgba(255, 240, 160, 0.2) !important;
}

.tv-podium__name {
    margin: 0;
    width: 100%;
    font-size: var(--tv-text-body);
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    word-break: break-word;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
}

.tv-podium__slot--first .tv-podium__name {
    font-size: clamp(0.88rem, 1.75vh, 1.28rem);
    font-weight: 900;
    color: #fff8dc;
    text-shadow:
        0 0 14px rgba(255, 204, 33, 0.45),
        0 2px 8px rgba(0, 0, 0, 0.9);
}

.tv-podium__score--champion {
    display: none;
}

.tv-podium__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 8px;
}

.tv-podium__today {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    color: var(--pbi-text);
    background: rgba(255, 255, 255, 0.06);
}

.tv-podium__today i {
    color: var(--pbi-accent);
    font-size: 0.6rem;
}

.tv-podium__trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 700;
    /* text-transform removed */
}

.tv-podium__trend--up {
    background: rgba(74, 222, 128, 0.15);
    color: #4ade80;
}

.tv-podium__trend--down {
    background: rgba(248, 113, 113, 0.15);
    color: #f87171;
}

.tv-podium__chip {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.58rem;
    color: var(--pbi-muted);
    background: rgba(255, 255, 255, 0.06);
}

.tv-podium__bar-label {
    display: block;
    margin-top: 4px;
    font-size: 0.58rem;
    color: var(--pbi-muted);
}

.tv-podium__performance {
    width: 100%;
    margin-top: 10px;
}

.tv-wall__podium--solo .tv-portrait--podium-first {
    max-height: min(52cqh, 380px);
}

.tv-wall__podium--solo .tv-portrait--podium-second {
    max-height: min(46cqh, 320px);
}

.tv-wall__podium--solo .tv-portrait--podium-third {
    max-height: min(40cqh, 260px);
}

.tv-wall__podium--solo .tv-podium__platform-body {
    min-height: clamp(36px, 7vh, 72px);
}

.tv-wall__podium--solo .tv-podium__platform--rank-1 .tv-podium__platform-body {
    min-height: clamp(44px, 9vh, 96px);
}

.tv-wall__podium--solo .tv-podium__platform--rank-2 .tv-podium__platform-body {
    min-height: clamp(32px, 6.5vh, 64px);
}

.tv-wall__podium--solo .tv-podium__platform--rank-3 .tv-podium__platform-body {
    min-height: clamp(26px, 5vh, 52px);
}

.tv-wall__podium--solo .tv-podium__frame {
    flex-shrink: 1;
    min-height: 0;
}

.tv-wall__podium--solo .tv-podium__name {
    font-size: clamp(0.72rem, 1.35vh, 0.98rem);
}

.tv-wall__podium--solo .tv-podium__slot--first .tv-podium__name {
    font-size: clamp(0.88rem, 1.75vh, 1.28rem);
}

.tv-wall__podium--solo .tv-podium__score {
    margin: 0;
}

.tv-wall__podium--solo .tv-podium__count {
    font-size: clamp(1rem, 2vh, 1.5rem);
    line-height: 1;
}

.tv-wall__podium--solo .tv-podium__slot--first .tv-podium__count {
    font-size: clamp(1.35rem, 2.8vh, 2.1rem);
    text-shadow: none;
}

.tv-wall__podium--solo .tv-podium__count-label {
    font-size: clamp(0.55rem, 0.95vh, 0.72rem);
    letter-spacing: 0.06em;
}

.tv-wall__podium--solo .tv-podium__platform-rank {
    font-size: clamp(1.75rem, 4.5vh, 3.5rem);
}

.tv-wall__podium--solo .tv-podium__slot {
    position: relative;
}

.tv-wall__podium--solo .tv-podium__slot--first .tv-podium__frame {
    z-index: 2;
}

@container tv-podium-solo (max-height: 520px) {
    .tv-wall__podium--solo .tv-portrait--podium-first {
        max-height: min(48cqh, 340px);
    }

    .tv-wall__podium--solo .tv-portrait--podium-second {
        max-height: min(42cqh, 280px);
    }

    .tv-wall__podium--solo .tv-portrait--podium-third {
        max-height: min(36cqh, 230px);
    }
}

@container tv-podium-solo (max-height: 420px) {
    .tv-wall__podium--solo .tv-portrait--podium-first {
        max-height: min(44cqh, 300px);
    }

    .tv-wall__podium--solo .tv-portrait--podium-second {
        max-height: min(38cqh, 250px);
    }

    .tv-wall__podium--solo .tv-portrait--podium-third {
        max-height: min(32cqh, 200px);
    }
}

.tv-podium__count {
    display: inline;
    font-size: clamp(1rem, 2vh, 1.5rem);
    font-weight: 900;
    color: var(--pbi-accent);
    line-height: 1;
    letter-spacing: -0.02em;
}

.tv-podium__slot--first .tv-podium__count {
    font-size: clamp(1.35rem, 2.8vh, 2.1rem);
    color: #1a1a1a;
    text-shadow: none;
}

.tv-podium__count-label {
    display: inline;
    margin-top: 0;
    font-size: clamp(0.55rem, 0.95vh, 0.72rem);
    /* text-transform removed */
    letter-spacing: 0.06em;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
}

.tv-podium__sales-badge--champion .tv-podium__count-label {
    color: #2d2400;
}

.tv-podium__bar {
    width: 100%;
    max-width: 180px;
    margin-bottom: 8px;
}

.tv-podium__slot--first .tv-podium__bar {
    max-width: 220px;
}

.tv-podium__bar .tv-ranking__bar-track {
    height: 8px;
}

.tv-podium__stars {
    justify-content: center;
}

.tv-podium__stage {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
}

.tv-podium__stairs {
    width: 88%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2px, 0.35vh, 4px);
    margin-bottom: clamp(2px, 0.35vh, 4px);
}

.tv-podium__stair {
    height: clamp(8px, 1.5vh, 14px);
    background: linear-gradient(180deg, #2a2a2a 0%, #121212 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: clamp(2px, 0.3vh, 4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.tv-podium__stair--upper {
    width: 78%;
}

.tv-podium__slot--second .tv-podium__stair,
.tv-podium__slot--third .tv-podium__stair {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.tv-podium__platform {
    width: 88%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.tv-podium__platform--rank-1 {
    width: 78%;
}

.tv-podium__platform-cap {
    height: clamp(14px, 2.4vh, 22px);
    margin: 0 clamp(4px, 0.6vw, 8px);
    border-radius: 50%;
    background: linear-gradient(180deg, #fff0b8 0%, #e8c547 35%, #c9a227 70%, #9a7b1a 100%);
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.35),
        inset 0 2px 4px rgba(255, 255, 255, 0.45);
    transform: scaleY(0.55);
    transform-origin: bottom center;
    z-index: 2;
}

.tv-podium__platform--rank-2 .tv-podium__platform-cap {
    background: linear-gradient(180deg, #f1f5f9, #94a3b8, #64748b);
}

.tv-podium__platform--rank-3 .tv-podium__platform-cap {
    background: linear-gradient(180deg, #fde68a, #f59e0b, #b45309);
}

.tv-podium__platform-body {
    position: relative;
    min-height: clamp(32px, 6vh, 56px);
    margin-top: clamp(-4px, -0.6vh, -3px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #242424 0%, #141414 55%, #0a0a0a 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: clamp(4px, 0.6vh, 8px) clamp(4px, 0.6vh, 8px) 0 0;
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.tv-podium__platform-body::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.06) 50%, transparent 58%);
    pointer-events: none;
}

.tv-podium__platform--rank-1 .tv-podium__platform-body {
    min-height: clamp(40px, 7.5vh, 72px);
    box-shadow:
        0 -8px 24px rgba(255, 204, 33, 0.12),
        0 -6px 18px rgba(0, 0, 0, 0.45);
}

.tv-podium__platform-rank {
    font-size: clamp(1.4rem, 2.8vw, 2.4rem);
    font-weight: 900;
    line-height: 1;
    color: rgba(255, 255, 255, 0.22);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    padding: clamp(6px, 1vh, 12px) 0;
}

.tv-podium__platform--rank-1 .tv-podium__platform-rank {
    color: rgba(255, 230, 140, 0.35);
}

.tv-podium__trophy-stars {
    position: absolute;
    bottom: clamp(4px, 0.8vh, 10px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(6px, 1vw, 14px);
    z-index: 4;
    pointer-events: none;
}

.tv-podium__trophy-star {
    color: #e8c547;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45));
    animation: podiumTrophyStarShimmer 3s ease-in-out infinite;
}

.tv-podium__trophy-star--side {
    font-size: clamp(1rem, 2vh, 1.5rem);
    margin-bottom: clamp(4px, 0.8vh, 10px);
    opacity: 0.85;
}

.tv-podium__trophy-pedestal {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(28px, 4.5vh, 44px);
    height: clamp(18px, 3vh, 28px);
    background: linear-gradient(180deg, #f5e6a8, #c9a227);
    border-radius: clamp(3px, 0.4vh, 5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.tv-podium__trophy-star--hero {
    font-size: clamp(1.35rem, 2.6vh, 2rem);
    margin-bottom: clamp(2px, 0.3vh, 4px);
    animation-delay: 0.5s;
}

@keyframes podiumTrophyStarShimmer {
    0%, 100% { opacity: 0.75; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45)); }
    50% { opacity: 1; filter: drop-shadow(0 4px 12px rgba(255, 204, 33, 0.55)); }
}

@media (prefers-reduced-motion: reduce) {
    .tv-podium__confetti-piece,
    .tv-podium__halo,
    .tv-podium__spotlight,
    .tv-podium__trophy-star {
        animation: none;
    }

    .tv-podium__confetti-piece {
        opacity: 0.35;
    }
}

@container tv-podium-solo (max-width: 520px) {
    .tv-podium__halo {
        width: min(98%, 300px);
    }

    .tv-podium__confetti-piece:nth-child(n + 10) {
        display: none;
    }
}

@media (min-aspect-ratio: 16/9) {
    .tv-podium__arena {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr) minmax(0, 1fr);
        gap: clamp(10px, 2vw, 28px);
        padding-inline: clamp(12px, 2.5vw, 40px);
    }

    .tv-podium__halo {
        width: min(88%, 480px);
    }
}

@media (max-aspect-ratio: 4/3) {
    .tv-podium__arena {
        grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.15fr) minmax(0, 0.88fr);
        gap: clamp(4px, 0.6vw, 8px);
    }

    .tv-podium__confetti-piece:nth-child(n + 12) {
        display: none;
    }

    .tv-podium__trophy-stars {
        transform: translateX(-50%) scale(0.85);
    }
}

.tv-portrait--lg .tv-portrait__ring {
    width: 72px;
    height: 72px;
    border-radius: 14px;
}

.tv-portrait--lg .tv-portrait__fallback {
    font-size: 1.6rem;
}

/* Seller performance strip */
.tv-seller-performance {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    width: 100%;
}

.tv-seller-performance--podium {
    gap: 4px;
}

.tv-seller-performance__cell {
    text-align: center;
    padding: 4px 2px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.tv-seller-performance__cell--alert {
    border-color: rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.08);
}

.tv-seller-performance__cell--alert .tv-seller-performance__value {
    color: #f87171;
}

.tv-seller-performance__label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 0.5rem;
    /* text-transform removed */
    letter-spacing: 0.04em;
    color: var(--pbi-muted);
    margin-bottom: 2px;
}

.tv-seller-performance__label i {
    font-size: 0.55rem;
    color: var(--pbi-accent);
}

.tv-seller-performance__value {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--pbi-accent);
    line-height: 1.1;
}

.tv-seller-performance--podium .tv-seller-performance__value {
    font-size: 0.75rem;
}

.tv-seller-performance__value--dual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.tv-seller-performance__sep {
    color: var(--pbi-muted);
    font-weight: 400;
    font-size: 0.65rem;
}

.tv-seller-performance__sub {
    font-size: 0.48rem;
    color: var(--pbi-muted);
    margin-top: 1px;
    /* text-transform removed */
    letter-spacing: 0.03em;
}

.tv-seller-performance--ranking .tv-seller-performance__cell {
    padding: 3px 2px;
}

.tv-seller-performance--ranking .tv-seller-performance__value {
    font-size: 0.75rem;
}

/* Portrait */
.tv-portrait__ring {
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
    border: 1px solid var(--pbi-border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.tv-portrait--sm .tv-portrait__ring { width: 40px; height: 40px; border-radius: 10px; }
.tv-portrait--md .tv-portrait__ring { width: 56px; height: 56px; }
.tv-portrait--hero .tv-portrait__ring { width: 100%; aspect-ratio: 1; border-radius: 16px; }

.tv-portrait__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tv-portrait__fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    background: linear-gradient(135deg, rgba(255, 204, 33, 0.35), rgba(255, 204, 33, 0.08));
    color: var(--pbi-text);
}

.tv-portrait--sm .tv-portrait__fallback { font-size: 1rem; }
.tv-portrait--md .tv-portrait__fallback { font-size: 1.35rem; }

/* Ranking bars */
.tv-ranking {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tv-ranking__row {
    display: grid;
    grid-template-columns: 36px 56px 1fr 52px;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    min-height: 72px;
    border-radius: 8px;
    background: var(--pbi-surface);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.tv-ranking__row--leader {
    border-color: rgba(255, 204, 33, 0.35);
    background: linear-gradient(90deg, rgba(255, 204, 33, 0.08), var(--pbi-surface));
}

.tv-ranking__rank {
    font-weight: 700;
    color: var(--pbi-muted);
    text-align: center;
}

.tv-ranking__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.tv-ranking__name {
    font-weight: 600;
    font-size: clamp(0.95rem, 1.4vw, 1.15rem);
}

.tv-ranking__today {
    font-size: 0.75rem;
    color: var(--pbi-muted);
}

.tv-ranking__trend--up { color: #4ade80; font-size: 0.75rem; }
.tv-ranking__trend--down { color: #f87171; font-size: 0.75rem; }

.tv-ranking__bar-track {
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 4px;
}

.tv-ranking__goal-label {
    font-size: 0.6rem;
    color: var(--pbi-muted);
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}

.tv-ranking__performance {
    margin-bottom: 6px;
}

.tv-ranking__bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--tv-gold-dark), var(--pbi-accent));
    border-radius: 999px;
    transition: width 0.6s ease;
    min-width: 4px;
}

.tv-ranking__value {
    font-size: clamp(1.35rem, 2vw, 1.65rem);
    font-weight: 800;
    color: var(--pbi-accent);
    text-align: right;
}

.tv-wall__kpi-row--compact {
    grid-template-columns: repeat(3, 1fr);
}

.tv-wall__screens {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 650px;
    position: relative;
    container-type: size;
    container-name: tv-screens;
    overflow: hidden;
}

.tv-screen {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: clamp(10px, 1.2vw, 16px);
    overflow: hidden;
}

.tv-screen--leaderboard,
.tv-screen--goal-ranking,
.tv-screen--seller-detail {
    gap: clamp(8px, 1vh, 14px);
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.tv-screen--metrics {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    gap: clamp(6px, 0.8vh, 10px);
    min-height: 0;
    height: 100%;
    overflow: hidden;
    padding: clamp(8px, 1vh, 12px) clamp(10px, 1.2vw, 16px);
}

.tv-screen--leaderboard {
    gap: clamp(6px, 0.8vh, 10px);
    padding: clamp(8px, 1vh, 12px) clamp(10px, 1.2vw, 16px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-content: stretch;
}

.tv-leaderboard__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
}

.tv-leaderboard__title {
    margin: 0;
}

.tv-leaderboard__meta {
    font-size: clamp(0.65rem, 1.1vh, 0.78rem);
    color: var(--pbi-muted);
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: min(48vw, 420px);
}

.tv-leaderboard__stage {
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) minmax(220px, 1fr);
    gap: clamp(8px, 1vw, 14px);
    min-height: 0;
    height: 100%;
    align-items: stretch;
    overflow: hidden;
}

.tv-leaderboard__podium {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
    padding: clamp(8px, 1vh, 12px) clamp(10px, 1.2vw, 16px);
}

.tv-leaderboard__podium.tv-wall__podium--solo {
    container-type: size;
    container-name: tv-podium-solo;
    background:
        radial-gradient(ellipse 85% 65% at 50% 55%, rgba(196, 130, 42, 0.2), transparent 58%),
        radial-gradient(ellipse 120% 90% at 50% 100%, rgba(28, 18, 10, 0.92), rgba(6, 4, 3, 0.98)),
        var(--pbi-glass);
    border-color: rgba(212, 175, 55, 0.28);
}

.tv-podium__slot--first .tv-podium__leader-ribbon-badge {
    font-size: clamp(0.62rem, 1.05vh, 0.8rem) !important;
    padding: clamp(7px, 1vh, 10px) clamp(14px, 1.8vw, 22px) !important;
}

.tv-leaderboard__podium-label {
    margin: 0 0 clamp(4px, 0.5vh, 8px);
    font-size: clamp(0.65rem, 1vh, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.06em;
    /* text-transform removed */
    color: var(--pbi-muted);
    flex-shrink: 0;
}

.tv-leaderboard__podium .tv-podium {
    flex: 1;
    min-height: 0;
}

.tv-leaderboard__chase-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    container-type: size;
    container-name: tv-chase-panel;
    padding: clamp(10px, 1.2vh, 14px) clamp(10px, 1vw, 14px);
}

.tv-leaderboard-chase {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 0;
    height: 100%;
    overflow: hidden;
}

.tv-leaderboard-chase__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: clamp(6px, 0.8vh, 10px);
    flex-shrink: 0;
}

.tv-leaderboard-chase__title {
    margin: 0;
    font-size: clamp(0.72rem, 1.2vh, 0.85rem);
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--pbi-text);
}

.tv-leaderboard-chase__title i {
    color: var(--tv-gold);
    margin-right: 6px;
}

.tv-leaderboard-chase__count {
    font-size: 0.62rem;
    color: var(--pbi-muted);
    letter-spacing: 0.04em;
    /* text-transform removed */
}

.tv-leaderboard-chase__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

.tv-leaderboard-chase__progress {
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--tv-gold);
    letter-spacing: 0.06em;
}

.tv-leaderboard-chase__viewport {
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.tv-leaderboard-chase__list {
    display: grid;
    grid-template-rows: repeat(var(--chase-rows, 4), minmax(0, 1fr));
    gap: clamp(6px, 1.2cqh, 12px);
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
}

.tv-chase-enter {
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.tv-chase-enter-start,
.tv-chase-leave-end {
    opacity: 0;
    transform: translateY(10px);
}

.tv-chase-enter-end {
    opacity: 1;
    transform: translateY(0);
}

.tv-leaderboard-chase__row {
    display: grid;
    grid-template-columns:
        clamp(36px, 8cqh, 52px)
        clamp(64px, 22cqh, 104px)
        minmax(0, 1fr)
        auto
        clamp(24px, 5cqh, 32px);
    gap: clamp(8px, 1.4cqh, 14px);
    align-items: center;
    padding: clamp(8px, 1.4cqh, 14px) clamp(10px, 1.4vw, 14px);
    border-radius: clamp(8px, 1.4cqh, 12px);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    min-height: clamp(72px, 22cqh, 112px);
    overflow: hidden;
}

.tv-leaderboard-chase__row--up {
    border-color: rgba(74, 222, 128, 0.22);
    background: linear-gradient(90deg, rgba(74, 222, 128, 0.06), rgba(255, 255, 255, 0.02));
}

.tv-leaderboard-chase__rank {
    font-weight: 700;
    font-size: clamp(0.95rem, 5cqh, 1.45rem);
    color: var(--pbi-muted);
    text-align: center;
}

.tv-leaderboard-chase__portrait {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-width: var(--tv-portrait-chase);
    min-height: var(--tv-portrait-chase);
}

.tv-leaderboard-chase__portrait .tv-portrait__ring {
    width: var(--tv-portrait-chase);
    height: var(--tv-portrait-chase);
    flex-shrink: 0;
    border-radius: clamp(10px, 2.2cqh, 16px);
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.38);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
}

.tv-leaderboard-chase__portrait .tv-portrait__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.tv-leaderboard-chase__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(2px, 0.6cqh, 6px);
    min-width: 0;
    min-height: 0;
}

.tv-leaderboard-chase__name {
    font-weight: 600;
    font-size: var(--tv-text-body);
    line-height: 1.25;
    color: var(--pbi-text);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    word-break: break-word;
}

.tv-leaderboard-chase__gap {
    font-size: var(--tv-text-micro);
    color: var(--pbi-muted);
    letter-spacing: 0.02em;
}

.tv-leaderboard-chase__stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    line-height: 1.05;
    flex-shrink: 0;
}

.tv-leaderboard-chase__sales {
    font-weight: 700;
    font-size: clamp(1rem, 5.5cqh, 1.65rem);
    color: var(--tv-gold);
}

.tv-leaderboard-chase__sales-label {
    font-size: clamp(0.5rem, 2cqh, 0.68rem);
    color: var(--pbi-muted);
    /* text-transform removed */
    letter-spacing: 0.04em;
}

.tv-leaderboard-chase__trend {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.65rem, 3cqh, 0.85rem);
}

.tv-leaderboard-chase__trend--up { color: #4ade80; }
.tv-leaderboard-chase__trend--down { color: #f87171; }
.tv-leaderboard-chase__trend--flat { color: var(--pbi-muted); opacity: 0.6; }

.tv-leaderboard-chase__empty {
    margin: auto 0;
    text-align: center;
    font-size: 0.72rem;
    color: var(--pbi-muted);
}

/* Seller board — base compartida (chase + metas) */
.tv-seller-board {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 0;
    height: 100%;
    overflow: hidden;
}

/* Goal ranking board */
.tv-goal-board {
    container-type: size;
    container-name: tv-goal-board;
}

.tv-goal-board__meta-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: clamp(6px, 0.8vh, 10px);
    flex-shrink: 0;
}

.tv-goal-board__count {
    font-size: 0.62rem;
    color: var(--pbi-muted);
    letter-spacing: 0.04em;
    /* text-transform removed */
}

.tv-goal-board__progress {
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--tv-gold);
    letter-spacing: 0.06em;
}

.tv-goal-board__viewport {
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.tv-goal-board__list {
    display: grid;
    grid-template-rows: repeat(var(--board-rows, 4), minmax(0, 1fr));
    gap: clamp(6px, 1.2cqh, 12px);
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
}

.tv-goal-board__row {
    display: flex;
    gap: clamp(12px, 1.8cqh, 24px);
    align-items: center;
    padding: clamp(16px, 2.2cqh, 24px) clamp(20px, 2.5vw, 32px);
    border-radius: clamp(12px, 1.8cqh, 16px);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    min-height: clamp(100px, 28cqh, 150px);
    overflow: hidden;
}

.tv-goal-board__row--up {
    border-color: rgba(74, 222, 128, 0.22);
    background: linear-gradient(90deg, rgba(74, 222, 128, 0.06), rgba(255, 255, 255, 0.02));
}

.tv-goal-board__rank-box {
    display: flex;
    align-items: center;
    gap: clamp(12px, 2cqh, 20px);
    flex-shrink: 0;
}

.tv-goal-board__rank {
    font-weight: 800;
    font-size: clamp(1.5rem, 6cqh, 2.5rem);
    color: var(--pbi-muted);
    text-align: center;
    min-width: 40px;
}

.tv-goal-board__portrait {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--tv-portrait-chase);
    height: 100%;
    min-width: var(--tv-portrait-chase);
    min-height: var(--tv-portrait-chase);
}

.tv-goal-board__portrait .tv-portrait__ring {
    width: var(--tv-portrait-chase);
    height: var(--tv-portrait-chase);
    flex-shrink: 0;
    border-radius: clamp(10px, 2.2cqh, 16px);
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.38);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
}

.tv-goal-board__portrait .tv-portrait__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.tv-goal-board__data-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-width: 0;
    gap: clamp(10px, 1.8cqh, 18px);
}

.tv-goal-board__data-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.tv-goal-board__bar-name {
    font-weight: 800;
    font-size: clamp(1.4rem, 4cqh, 2.5rem);
    line-height: 1.1;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tv-goal-board__data-metrics {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.5vw, 40px);
}

.tv-goal-board__metric-group {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.tv-goal-board__metric-label {
    font-size: clamp(0.85rem, 2.2cqh, 1.2rem);
    font-weight: 700;
    /* text-transform removed */
    letter-spacing: 0.05em;
    color: var(--pbi-muted);
}

.tv-goal-board__metric-value {
    font-weight: 800;
    font-size: clamp(1.3rem, 3.8cqh, 2.3rem);
    font-variant-numeric: tabular-nums;
    color: var(--pbi-text);
}

.tv-goal-board__pct {
    font-weight: 800;
    font-size: clamp(2.2rem, 7cqh, 4rem);
    font-variant-numeric: tabular-nums;
    text-align: right;
    line-height: 1;
}

.tv-goal-board__pct--over { color: #c084fc; text-shadow: 0 0 20px rgba(192, 132, 252, 0.4); }
.tv-goal-board__pct--success { color: #4ade80; text-shadow: 0 0 20px rgba(74, 222, 128, 0.4); }
.tv-goal-board__pct--ok { color: var(--tv-gold); text-shadow: 0 0 20px rgba(255, 204, 33, 0.4); }
.tv-goal-board__pct--warn { color: #fb923c; }
.tv-goal-board__pct--alert { color: #f87171; }

.tv-goal-board__trend {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.2rem, 4cqh, 2rem);
}

.tv-goal-board__trend--up { color: #4ade80; }
.tv-goal-board__trend--down { color: #f87171; }
.tv-goal-board__trend--flat { color: var(--pbi-muted); opacity: 0.6; }

.tv-goal-board__bar-track {
    position: relative;
    width: 100%;
    height: clamp(14px, 2.8cqh, 28px);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.tv-goal-board__bar-fill {
    height: 100%;
    border-radius: inherit;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.15);
}

.tv-goal-board__bar-fill--over {
    background: linear-gradient(90deg, #9333ea, #a855f7);
    box-shadow: 0 0 16px rgba(168, 85, 247, 0.4);
}

.tv-goal-board__bar-fill--success {
    background: linear-gradient(90deg, #16a34a, #22c55e);
    box-shadow: 0 0 16px rgba(34, 197, 94, 0.4);
}

.tv-goal-board__bar-fill--ok {
    background: linear-gradient(90deg, #ca8a04, #eab308);
    box-shadow: 0 0 16px rgba(234, 179, 8, 0.4);
}

.tv-goal-board__bar-fill--warn {
    background: linear-gradient(90deg, #ea580c, #f97316);
}

.tv-goal-board__bar-fill--alert {
    background: linear-gradient(90deg, #dc2626, #ef4444);
}

.tv-goal-board__empty {
    margin: auto 0;
    text-align: center;
    font-size: 0.72rem;
    color: var(--pbi-muted);
}

.tv-leaderboard__ticker {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: clamp(8px, 1vh, 10px) clamp(12px, 1.4vw, 16px);
    font-size: clamp(0.72rem, 1.15vh, 0.85rem);
    flex-shrink: 0;
    min-width: 0;
    overflow: hidden;
}

.tv-leaderboard__ticker span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.tv-leaderboard__ticker i {
    color: var(--tv-gold);
    flex-shrink: 0;
}

.tv-section-title--compact {
    margin: 0 0 6px;
    font-size: 0.72rem;
    flex-shrink: 0;
}

.tv-screen--goal-ranking {
    padding: clamp(12px, 1.4vw, 20px);
}

.tv-screen-goal-ranking__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
}

.tv-screen-goal-ranking__head .tv-screen__title {
    margin-bottom: 0;
}

.tv-screen__title--goal-ranking {
    text-transform: none !important;
    letter-spacing: 0.01em;
    font-weight: 700;
    gap: clamp(8px, 1vw, 12px);
}

.tv-screen__title--goal-ranking span {
    line-height: 1.15;
}

.tv-screen-goal-ranking__head-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.tv-screen-goal-ranking__marker-legend {
    margin-left: 8px;
    padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.tv-screen-goal-ranking__marker-legend i {
    margin-right: 4px;
    opacity: 0.7;
}

.tv-screen-goal-ranking__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.tv-comparison-bars--fullscreen {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1vh, 12px);
    min-height: 0;
    overflow: hidden;
    padding-right: 4px;
}

.tv-comparison-bars--rich.tv-comparison-bars--fullscreen {
    max-height: none;
    overflow-y: auto;
}

.tv-comparison-bars__row--lg {
    flex: 1 1 0;
    min-height: clamp(56px, 8vh, 96px);
    padding: clamp(10px, 1.5vh, 18px) clamp(14px, 1.8vw, 22px);
    align-content: center;
}

.tv-comparison-bars__row--lg .tv-comparison-bars__rank {
    font-size: clamp(0.95rem, 1.8vw, 1.25rem);
    font-weight: 800;
}

.tv-comparison-bars__row--lg .tv-comparison-bars__name {
    font-size: clamp(0.9rem, 1.6vw, 1.1rem);
}

.tv-comparison-bars__row--lg .tv-comparison-bars__meta {
    font-size: clamp(0.6rem, 1.1vw, 0.72rem);
}

.tv-comparison-bars__row--lg .tv-comparison-bars__track {
    height: clamp(12px, 2vh, 20px);
}

.tv-comparison-bars__row--lg .tv-comparison-bars__pct {
    font-size: clamp(1rem, 2vw, 1.35rem);
}

.tv-comparison-bars__row--lg .tv-comparison-bars__delta {
    font-size: clamp(0.58rem, 1vw, 0.7rem);
}

.tv-screen--goal-ranking .tv-metrics-kpi-strip {
    flex-shrink: 0;
    margin-top: auto;
    padding-top: clamp(6px, 1vh, 10px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.tv-screen--goal-ranking .tv-seller-kpi {
    padding: clamp(10px, 1.4vh, 14px) clamp(12px, 1.4vw, 16px);
}

.tv-screen--goal-ranking .tv-seller-kpi__value {
    font-size: clamp(0.95rem, 1.6vw, 1.15rem);
}

.tv-screen-metrics__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
}

.tv-screen-metrics__head .tv-screen__title {
    margin-bottom: 0;
}

.tv-screen-metrics__avg-chip {
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    /* text-transform removed */
    letter-spacing: 0.04em;
    color: var(--pbi-accent);
    background: var(--pbi-accent-soft);
    border: 1px solid rgba(255, 204, 33, 0.25);
    white-space: nowrap;
}

/* Métricas panorámica — command bar + carrusel */
.tv-screen--operational-summary {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 2vh, 20px);
    padding: clamp(16px, 2.5vh, 28px);
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.tv-ops-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: clamp(12px, 1.8vw, 22px);
    min-height: 0;
    height: 100%;
}

.tv-ops-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 1.8vh, 20px);
    padding: clamp(20px, 3.5vh, 40px);
    border-radius: clamp(14px, 2.5vh, 22px);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    text-align: center;
    height: 100%;
    min-height: 0;
}

.tv-ops-card--accent {
    border-color: rgba(255, 204, 33, 0.22);
    background: linear-gradient(135deg, rgba(255, 204, 33, 0.08), rgba(255, 255, 255, 0.02));
}

.tv-ops-card__icon {
    font-size: clamp(2rem, 5vh, 3.5rem);
    color: var(--pbi-accent);
    opacity: 0.85;
}

.tv-ops-card__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 1vw, 14px);
    flex-wrap: wrap;
}

.tv-ops-card__value {
    font-size: var(--tv-counter-lg);
    font-weight: 900;
    line-height: 1;
    color: var(--pbi-text);
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
    word-break: break-word;
    font-variant-numeric: tabular-nums;
}

.tv-ops-card__value--name {
    font-size: clamp(1.8rem, 6vh, 3.5rem);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.1;
}

.tv-ops-card__label {
    font-size: var(--tv-text-heading);
    /* text-transform removed */
    letter-spacing: 0.1em;
    color: var(--pbi-muted);
    font-weight: 700;
}

.tv-ops-card__chip {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: var(--tv-text-micro);
    font-weight: 700;
    color: var(--pbi-accent);
    background: var(--pbi-accent-soft);
}

.tv-ops-card__chip--daily {
    color: var(--pbi-text);
    background: rgba(255, 255, 255, 0.06);
}

.tv-ops-card__chip--avg {
    color: #a8b0bc;
    background: rgba(255, 255, 255, 0.06);
}

.tv-ops-card--indicators {
    justify-content: center;
    padding: clamp(14px, 2vh, 24px);
}

.tv-ops-indicators {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(10px, 1.5vh, 18px);
    width: 100%;
    max-width: 400px;
}

.tv-ops-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(4px, 0.8vh, 8px);
    padding: clamp(8px, 1.2vh, 14px);
    border-radius: clamp(10px, 1.2vh, 14px);
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.tv-ops-indicator__icon {
    font-size: clamp(1rem, 2.5vh, 1.6rem);
    color: var(--pbi-accent);
    opacity: 0.8;
}

.tv-ops-indicator__value {
    font-size: var(--tv-counter-sm);
    font-weight: 900;
    line-height: 1;
    color: var(--pbi-text);
    font-variant-numeric: tabular-nums;
}

.tv-ops-indicator__value--alert {
    color: #fecaca;
}

.tv-ops-indicator__label {
    font-size: var(--tv-text-label);
    /* text-transform removed */
    letter-spacing: 0.08em;
    color: var(--pbi-muted);
    font-weight: 700;
}

.tv-pano-comparison {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 1.5vw, 20px);
    min-height: 0;
}

.tv-pano-comparison__side {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2px, 0.5vh, 6px);
}

.tv-pano-comparison__value {
    font-size: var(--tv-counter-lg);
    font-weight: 900;
    line-height: 1.1;
    color: var(--pbi-text);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
    font-variant-numeric: tabular-nums;
}

/* Tarjetas solo contadores (sin gráficas) */
.tv-chart-card--counters .tv-chart-card__body,
.tv-metric-tile--counters .tv-metric-tile__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    flex: 1;
    min-height: 0;
}

.tv-chart-card--counters .tv-pano-comparison,
.tv-metric-tile--counters .tv-pano-comparison {
    flex: 1;
    min-height: 0;
}

.tv-chart-card--counters .tv-pano-comparison__value,
.tv-metric-tile--counters .tv-pano-comparison__value {
    font-size: var(--tv-counter-xl);
}

.tv-chart-card--counters .tv-pano-comparison__label,
.tv-metric-tile--counters .tv-pano-comparison__label {
    font-size: var(--tv-text-heading);
    font-weight: 700;
    letter-spacing: 0.1em;
}

.tv-chart-card--counters .tv-pano-comparison__bar-label,
.tv-metric-tile--counters .tv-pano-comparison__bar-label {
    font-size: clamp(0.85rem, 2vh, 1.15rem);
    font-weight: 800;
}

.tv-pano-comparison__value--accent {
    color: var(--pbi-accent);
}

.tv-pano-comparison__value--alert {
    color: #fecaca;
}

.tv-pano-comparison__label {
    font-size: var(--tv-text-label);
    /* text-transform removed */
    letter-spacing: 0.08em;
    color: var(--pbi-muted);
    font-weight: 700;
}

.tv-pano-comparison__sub {
    font-size: clamp(0.6rem, 1.1vh, 0.8rem);
    font-weight: 700;
    color: var(--pbi-muted);
}

.tv-pano-comparison__vs {
    flex-shrink: 0;
    font-size: clamp(1.2rem, 3vh, 2rem);
    color: var(--pbi-muted);
    opacity: 0.5;
}

/* Donut comparativo ventas vs devoluciones (% del total) */
.tv-returns-donut {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 1.4vh, 16px);
    margin-top: auto;
    padding: clamp(4px, 0.8vh, 10px) 0;
    flex: 1;
    min-height: 0;
    width: 100%;
}

.tv-returns-donut__ring {
    --sales-share: 97;
    flex-shrink: 0;
    width: clamp(140px, 22vh, 240px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(
        from -90deg,
        #ffcc21 0 calc(var(--sales-share) * 1%),
        #ef4444 calc(var(--sales-share) * 1%) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 28px rgba(255, 204, 33, 0.18);
    transition: box-shadow 0.4s ease;
}

.tv-returns-donut__ring--alert {
    box-shadow: 0 0 28px rgba(239, 68, 68, 0.35);
}

.tv-returns-donut__hole {
    width: 64%;
    height: 64%;
    border-radius: 50%;
    background: #12141a;
    border: 2px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
    padding: 4px;
}

.tv-returns-donut__rate {
    font-size: clamp(1.4rem, 3vh, 2.2rem);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.tv-returns-donut__rate--ok {
    color: #10b981;
}

.tv-returns-donut__rate--alert {
    color: #f87171;
}

.tv-returns-donut__rate-label {
    font-size: clamp(0.7rem, 1.2vh, 0.95rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--pbi-muted);
}

.tv-returns-donut__legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(12px, 2vw, 20px);
    width: 100%;
    padding: 0 8px;
}

.tv-returns-donut__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(0.8rem, 1.4vh, 1rem);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.tv-returns-donut__swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
}

.tv-returns-donut__legend-item--sales {
    color: var(--pbi-accent);
}

.tv-returns-donut__legend-item--sales .tv-returns-donut__swatch {
    background: #ffcc21;
    box-shadow: 0 0 8px rgba(255, 204, 33, 0.5);
}

.tv-returns-donut__legend-item--returns {
    color: #f87171;
}

.tv-returns-donut__legend-item--returns .tv-returns-donut__swatch {
    background: #ef4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.45);
}

.tv-pano-comparison__bar {
    flex-shrink: 0;
    position: relative;
    height: clamp(18px, 3vh, 28px);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
    width: 100%;
    margin-top: auto;
    min-height: 0;
}

.tv-pano-comparison__bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #f87171, #dc2626);
    transition: width 0.6s ease;
    border-radius: 999px;
}

.tv-pano-comparison__bar--alert .tv-pano-comparison__bar-fill {
    background: linear-gradient(90deg, #fca5a5, #ef4444);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
}

.tv-pano-comparison__bar-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.7rem, 1.4vh, 1rem);
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}

.tv-screen--metrics .tv-metrics-stage {
    height: 100%;
    min-height: 0;
    align-self: stretch;
}

.tv-metrics-stage {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 0.6vh, 8px);
    container-type: size;
    container-name: tv-metrics-stage;
    overflow: hidden;
}

.tv-metrics-carousel {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

.tv-metrics-deck {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.tv-metrics-deck__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
    gap: clamp(10px, 1.4vw, 18px);
    flex: 1 1 0;
    height: 100%;
    min-height: 0;
    align-content: stretch;
    align-items: stretch;
}

.tv-metrics-deck__grid > .tv-metric-tile {
    height: 100%;
    min-height: 0;
}

.tv-metrics-deck-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-shrink: 0;
    padding-bottom: 2px;
}

.tv-metrics-deck-dots__dot {
    width: clamp(10px, 1.2vh, 14px);
    height: clamp(10px, 1.2vh, 14px);
    border-radius: 50%;
    border: 2px solid rgba(255, 204, 33, 0.35);
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.tv-metrics-deck-dots__dot--active {
    background: var(--pbi-accent);
    border-color: var(--pbi-accent);
    transform: scale(1.15);
}

.tv-metrics-deck-enter {
    transition: opacity 0.4s ease;
}

.tv-metrics-deck-enter-start,
.tv-metrics-deck-leave-end {
    opacity: 0;
}

.tv-metrics-deck-enter-end,
.tv-metrics-deck-leave-start {
    opacity: 1;
}

.tv-metrics-deck-leave {
    transition: opacity 0.35s ease;
}

/* Metric tiles — variante panorama TV */
.tv-metric-tile--panorama {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: clamp(12px, 1.6vh, 18px) clamp(14px, 1.6vw, 20px);
    border-radius: clamp(12px, 1.6vh, 18px);
    overflow: hidden;
    container-type: size;
    container-name: tv-metric-tile;
}

.tv-metric-tile--panorama.tv-metric-tile {
    min-height: 0;
}

.tv-metric-tile--panorama .tv-chart-card__head {
    flex-shrink: 0;
    margin-bottom: clamp(4px, 0.6vh, 8px);
}

.tv-metric-tile--panorama .tv-metric-tile__body {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    align-self: stretch;
    width: 100%;
    gap: clamp(4px, 0.8vh, 10px);
    overflow: hidden;
}

.tv-metric-tile--panorama .tv-metric-tile__footer {
    flex-shrink: 0;
    margin-top: auto;
    padding-top: clamp(6px, 0.8vh, 10px);
    font-size: clamp(0.62rem, 1.1vh, 0.78rem);
}

.tv-metric-tile--headless.tv-metric-tile--chart-only {
    padding: clamp(8px, 1vh, 12px);
}

.tv-metric-tile--headless.tv-metric-tile--chart-only .tv-metric-tile__body {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

.tv-pano-apex-stack--solo {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.tv-pano-apex--solo {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

.tv-chart-card--chart-only .tv-chart-card__body {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    padding: clamp(6px, 0.8vh, 10px);
}

.tv-chart-card--chart-only {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Grupal — gráficas llenan el tile */
.tv-metrics-deck .tv-metric-tile--panorama .tv-pano-hbars-stack,
.tv-metrics-deck .tv-metric-tile--panorama .tv-pano-hbars {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    height: auto;
}

.tv-metrics-deck .tv-metric-tile--panorama .tv-pano-apex-stack,
.tv-metrics-deck .tv-metric-tile--panorama .tv-pano-split,
.tv-metrics-deck .tv-metric-tile--panorama .tv-pano-vbars {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    height: auto;
}

.tv-metrics-deck .tv-metric-tile--panorama .tv-pano-apex,
.tv-metrics-deck .tv-metric-tile--panorama .tv-pano-apex--grow {
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
    width: 100%;
}

.tv-metrics-deck .tv-metric-tile--panorama .tv-pano-apex--horizontal {
    min-height: 0;
    flex: 1 1 0;
    height: 100%;
}

.tv-metrics-deck .tv-metric-tile--panorama .tv-pano-split .tv-pano-apex-stack {
    flex: 1 1 0;
    min-height: 0;
}

.tv-metrics-deck .tv-metric-tile--panorama .tv-pano-apex > div,
.tv-metrics-deck .tv-metric-tile--panorama .tv-pano-apex .apexcharts-canvas,
.tv-metrics-deck .tv-metric-tile--panorama .tv-pano-apex svg {
    height: 100% !important;
    min-height: 100% !important;
}

.tv-metrics-deck .tv-metric-tile--counters .tv-metric-tile__body {
    justify-content: flex-start;
    gap: clamp(10px, 2.5cqh, 20px);
}

.tv-metrics-deck .tv-metric-tile--counters .tv-pano-comparison {
    flex: 1 1 0;
    min-height: 0;
    align-items: center;
}

.tv-metrics-deck .tv-metric-tile--counters .tv-pano-comparison__value {
    font-size: clamp(2.4rem, 16cqh, 5rem);
}

.tv-metrics-deck .tv-metric-tile--counters .tv-pano-comparison__vs {
    font-size: clamp(1.4rem, 6cqh, 2.8rem);
}

.tv-metrics-deck .tv-metric-tile--counters .tv-pano-comparison__bar {
    flex-shrink: 0;
    height: clamp(12px, 3cqh, 22px);
}

/* Panorama charts — ApexCharts barras TV */
.tv-pano-apex-stack {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    gap: clamp(4px, 0.8cqh, 8px);
}

.tv-pano-apex {
    flex: 1;
    min-height: 0;
    width: 100%;
    animation: tv-chart-fade-in 0.6s ease-out both;
}

.tv-pano-apex--grow {
    flex: 1;
    min-height: 0;
}

.tv-pano-apex--horizontal {
    min-height: clamp(160px, 24cqh, 320px);
}

.tv-pano-apex-stack--horizontal {
    gap: clamp(6px, 1cqh, 10px);
}

.tv-pano-apex-subs {
    display: grid;
    gap: clamp(6px, 1vw, 12px);
    flex-shrink: 0;
}

.tv-pano-apex-subs--trio {
    grid-template-columns: repeat(3, 1fr);
}

.tv-pano-apex-subs--duo {
    grid-template-columns: repeat(2, 1fr);
}

.tv-pano-apex-subs__item {
    text-align: center;
    min-width: 0;
}

.tv-pano-apex-subs__label {
    display: block;
    font-size: clamp(0.58rem, 1.1cqh, 0.72rem);
    /* text-transform removed */
    letter-spacing: 0.06em;
    color: var(--pbi-muted);
    font-weight: 600;
}

.tv-pano-apex-subs__value {
    display: block;
    font-size: clamp(0.62rem, 1.2cqh, 0.78rem);
    color: var(--pbi-muted);
    font-variant-numeric: tabular-nums;
}

.tv-seller-detail__charts .tv-pano-apex {
    min-height: 0;
}

/* Legacy CSS bars (fallback / hero meters) */
.tv-pano-vbars {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(10px, 1.5vw, 18px);
    min-height: 0;
    height: 100%;
    align-items: stretch;
}

.tv-pano-vbars--duo {
    grid-template-columns: repeat(2, 1fr);
}

.tv-pano-vbars__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 0;
    height: 100%;
    gap: clamp(6px, 1cqh, 10px);
}

.tv-pano-vbars__track {
    flex: 1;
    width: 100%;
    min-height: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: rgba(0, 0, 0, 0.35);
    border-radius: clamp(8px, 1.2cqh, 14px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 3px 12px rgba(0, 0, 0, 0.45);
}

.tv-pano-vbars__fill {
    position: relative;
    width: 100%;
    min-height: 3px;
    border-radius: clamp(6px, 1cqh, 10px) clamp(6px, 1cqh, 10px) 0 0;
    background: linear-gradient(180deg, var(--pbi-accent), var(--tv-gold-dark));
    transform-origin: bottom center;
    animation: tv-pano-bar-rise 1.05s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    transition: height 0.75s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 -6px 20px rgba(255, 204, 33, 0.35);
}

.tv-pano-vbars__fill::before {
    content: '';
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: clamp(2px, 0.35cqh, 4px);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.55);
    animation: tv-pano-bar-glow 2.4s ease-in-out infinite;
}

.tv-pano-vbars__fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, transparent 45%);
    pointer-events: none;
}

.tv-pano-vbars__value {
    position: absolute;
    left: 50%;
    z-index: 2;
    font-size: clamp(1.35rem, 5.5cqh, 3.25rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #fff;
    white-space: nowrap;
    padding: clamp(3px, 0.5cqh, 6px) clamp(8px, 1.2cqh, 14px);
    border-radius: clamp(6px, 0.8cqh, 10px);
    transform: translate(-50%, 50%);
    bottom: calc(var(--bar-pct, 0) * 1%);
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.5),
        0 3px 12px rgba(0, 0, 0, 0.85);
    animation: tv-pano-value-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

.tv-pano-vbars__track--low .tv-pano-vbars__value {
    bottom: 20%;
    transform: translate(-50%, 0);
    background: rgba(0, 0, 0, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
    animation-name: tv-pano-value-in-low;
}

.tv-pano-vbars__track--low .tv-pano-vbars__value--success {
    color: #86efac;
    text-shadow: 0 0 18px rgba(74, 222, 128, 0.55);
}

.tv-pano-vbars__track--low .tv-pano-vbars__value--warn,
.tv-pano-vbars__track--low .tv-pano-vbars__value--ok {
    color: #fde047;
    text-shadow: 0 0 18px rgba(251, 191, 36, 0.5);
}

.tv-pano-vbars__track--low .tv-pano-vbars__value--alert {
    color: #fca5a5;
    text-shadow: 0 0 18px rgba(248, 113, 113, 0.55);
}

.tv-pano-vbars__track--low .tv-pano-vbars__value--blue {
    color: #93c5fd;
    text-shadow: 0 0 18px rgba(96, 165, 250, 0.5);
}

@keyframes tv-chart-fade-in {
    0% { opacity: 0; transform: translateY(12px) scale(0.97); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes tv-star-pulse {
    0% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(1.25); opacity: 1; }
}

@keyframes tv-pano-bar-rise {
    from {
        transform: scaleY(0);
        opacity: 0.55;
    }

    to {
        transform: scaleY(1);
        opacity: 1;
    }
}

@keyframes tv-pano-bar-glow {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 1; }
}

@keyframes tv-pano-value-in {
    from {
        opacity: 0;
        transform: translate(-50%, 50%) scale(0.82);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 50%) scale(1);
    }
}

@keyframes tv-pano-value-in-low {
    from {
        opacity: 0;
        transform: translate(-50%, 0) scale(0.82);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

.tv-pano-vbars__fill--success {
    background: linear-gradient(180deg, #4ade80, #15803d);
    box-shadow: 0 -6px 20px rgba(74, 222, 128, 0.4);
}

.tv-pano-vbars__fill--warn,
.tv-pano-vbars__fill--ok {
    background: linear-gradient(180deg, #fbbf24, #b45309);
    box-shadow: 0 -6px 20px rgba(251, 191, 36, 0.35);
}

.tv-pano-vbars__fill--alert {
    background: linear-gradient(180deg, #f87171, #b91c1c);
    box-shadow: 0 -6px 20px rgba(248, 113, 113, 0.4);
}

.tv-pano-vbars__fill--blue {
    background: linear-gradient(180deg, #60a5fa, #1d4ed8);
    box-shadow: 0 -6px 20px rgba(96, 165, 250, 0.35);
}

.tv-pano-vbars__fill--success::before { box-shadow: 0 0 14px rgba(134, 239, 172, 0.65); }
.tv-pano-vbars__fill--warn::before,
.tv-pano-vbars__fill--ok::before { box-shadow: 0 0 14px rgba(253, 224, 71, 0.55); }
.tv-pano-vbars__fill--alert::before { box-shadow: 0 0 14px rgba(252, 165, 165, 0.55); }
.tv-pano-vbars__fill--blue::before { box-shadow: 0 0 14px rgba(147, 197, 253, 0.55); }

/* Barras horizontales — nombre encima de la barra */
.tv-pano-hbars-stack {
    gap: clamp(6px, 1vh, 10px);
}

.tv-pano-hbars {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(14px, 2.8vh, 28px);
    min-height: 0;
    height: 100%;
    width: 100%;
    padding: clamp(4px, 0.6vh, 8px) clamp(2px, 0.4vw, 6px);
}

.tv-pano-hbars--grow {
    flex: 1 1 auto;
    min-height: 0;
}

.tv-pano-hbars__row {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1vh, 10px);
    min-width: 0;
}

.tv-pano-hbars__label {
    font-size: var(--tv-text-heading);
    font-weight: 700;
    /* text-transform removed */
    letter-spacing: 0.1em;
    color: var(--pbi-text);
    line-height: 1.1;
    text-align: left;
}

.tv-pano-hbars__track {
    position: relative;
    width: 100%;
    height: clamp(36px, 7vh, 64px);
    display: flex;
    align-items: stretch;
    background: rgba(0, 0, 0, 0.35);
    border-radius: clamp(10px, 1.4vh, 14px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.45);
}

.tv-pano-hbars__fill {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 100%;
    border-radius: inherit;
    transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    background: linear-gradient(90deg, var(--pbi-accent), var(--tv-gold-dark));
    box-shadow: 0 0 20px rgba(255, 204, 33, 0.25);
}

.tv-pano-hbars__fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
    pointer-events: none;
}

.tv-pano-hbars__value {
    position: relative;
    z-index: 1;
    padding: 0 clamp(10px, 1.2vw, 16px);
    font-size: clamp(1rem, 2.2vh, 1.5rem);
    font-weight: 900;
    color: #fff;
    white-space: nowrap;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
    font-variant-numeric: tabular-nums;
}

.tv-pano-hbars__fill--success {
    background: linear-gradient(90deg, #4ade80, #15803d);
    box-shadow: 0 0 20px rgba(74, 222, 128, 0.35);
}

.tv-pano-hbars__fill--warn,
.tv-pano-hbars__fill--ok {
    background: linear-gradient(90deg, #fbbf24, #b45309);
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
}

.tv-pano-hbars__fill--alert {
    background: linear-gradient(90deg, #f87171, #b91c1c);
    box-shadow: 0 0 20px rgba(248, 113, 113, 0.35);
}

.tv-pano-hbars__fill--over {
    background: linear-gradient(90deg, #c084fc, #7e22ce);
    box-shadow: 0 0 20px rgba(192, 132, 252, 0.35);
}

.tv-wall--broadcast .tv-pano-hbars__label {
    font-size: clamp(1.5rem, 3.5vh, 2.5rem);
}

.tv-wall--broadcast .tv-pano-hbars__value {
    font-size: clamp(1.2rem, 2.8vh, 2rem);
}

.tv-wall--broadcast .tv-pano-hbars__track {
    height: clamp(44px, 8vh, 72px);
}

.tv-pano-vbars__label {
    font-size: clamp(0.62rem, 1.3cqh, 0.82rem);
    /* text-transform removed */
    letter-spacing: 0.06em;
    color: var(--pbi-muted);
    font-weight: 600;
    text-align: center;
    flex-shrink: 0;
}

.tv-pano-vbars__sub {
    font-size: clamp(0.58rem, 1.1cqh, 0.72rem);
    color: var(--pbi-muted);
    text-align: center;
    flex-shrink: 0;
}

/* Medidor vertical hero (kilos / devoluciones) */
.tv-pano-meter {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    gap: clamp(6px, 1cqh, 10px);
}

.tv-pano-meter__bar {
    flex: 1;
    position: relative;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: rgba(255, 255, 255, 0.05);
    border-radius: clamp(10px, 1.4cqh, 16px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.3);
}

.tv-pano-meter__fill {
    width: 100%;
    height: calc(var(--meter-pct, 0) * 1%);
    min-height: 6px;
    background: linear-gradient(180deg, var(--pbi-accent), var(--tv-gold-dark));
    transition: height 0.6s ease;
    box-shadow: 0 -6px 24px rgba(255, 204, 33, 0.35);
}

.tv-pano-meter--alert .tv-pano-meter__fill {
    background: linear-gradient(180deg, #f87171, #b91c1c);
    box-shadow: 0 -6px 24px rgba(248, 113, 113, 0.35);
}

.tv-pano-meter--alert-active .tv-pano-meter__bar {
    border-color: rgba(239, 68, 68, 0.45);
    box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.3), 0 0 20px rgba(239, 68, 68, 0.15);
}

.tv-pano-meter__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(4px, 0.8cqh, 8px);
    padding: clamp(12px, 2cqh, 20px);
    text-align: center;
    pointer-events: none;
}

.tv-pano-meter__hero {
    font-size: var(--tv-counter-lg);
    font-weight: 900;
    line-height: 1;
    color: var(--pbi-accent);
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.9), 0 2px 12px rgba(0, 0, 0, 0.6);
    font-variant-numeric: tabular-nums;
}

.tv-pano-meter__hero--alert {
    color: #fecaca;
}

.tv-pano-meter__unit {
    font-size: clamp(0.72rem, 1.6cqh, 1rem);
    /* text-transform removed */
    letter-spacing: 0.08em;
    color: var(--pbi-muted);
    font-weight: 600;
}

.tv-pano-meter__sub {
    font-size: clamp(0.68rem, 1.4cqh, 0.9rem);
    color: var(--pbi-muted);
}

.tv-pano-meter__pct {
    font-size: clamp(1.25rem, 4cqh, 2.25rem);
    font-weight: 800;
    color: var(--pbi-text);
    text-shadow: 0 0 12px rgba(0, 0, 0, 0.8);
    margin-top: clamp(4px, 0.6cqh, 8px);
}

.tv-pano-meter__pct--alert {
    color: #f87171;
}

.tv-pano-meter__footer {
    flex-shrink: 0;
    font-size: clamp(0.62rem, 1.1cqh, 0.78rem);
    color: var(--pbi-muted);
    text-align: center;
}

/* Layout split: hero arriba + barras abajo */
.tv-pano-split {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    gap: clamp(8px, 1.2cqh, 14px);
}

.tv-pano-split__hero {
    flex-shrink: 0;
    text-align: center;
    padding: clamp(4px, 0.8cqh, 8px) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.tv-pano-split__hero--compact {
    padding: clamp(2px, 0.5cqh, 6px) 0;
}

.tv-pano-split__hero-value {
    display: block;
    font-size: var(--tv-counter-md);
    font-weight: 900;
    line-height: 1;
    color: var(--pbi-accent);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

.tv-pano-split__hero-value--warn {
    color: #fbbf24;
}

.tv-pano-split__hero-label {
    display: block;
    margin-top: clamp(2px, 0.4cqh, 6px);
    font-size: clamp(0.68rem, 1.4cqh, 0.88rem);
    /* text-transform removed */
    letter-spacing: 0.07em;
    color: var(--pbi-muted);
    font-weight: 600;
}

.tv-pano-split__hero-sub {
    display: block;
    margin-top: clamp(2px, 0.4cqh, 4px);
    font-size: clamp(0.65rem, 1.2cqh, 0.82rem);
    color: var(--pbi-muted);
}

.tv-pano-split .tv-pano-vbars {
    flex: 1;
    min-height: 0;
}

.tv-pano-split__empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--pbi-muted);
    font-size: clamp(0.75rem, 1.5cqh, 0.95rem);
}

.tv-pano-split__empty i {
    font-size: clamp(1.5rem, 4cqh, 2.5rem);
    opacity: 0.4;
}

@container tv-metrics-stage (max-height: 520px) {
    .tv-pano-vbars__value {
        font-size: clamp(1.1rem, 4.5cqh, 2.25rem);
    }

    .tv-pano-meter__hero {
        font-size: clamp(1.75rem, 6cqh, 3rem);
    }

    .tv-pano-split__hero-value {
        font-size: clamp(1.75rem, 5.5cqh, 2.75rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tv-metrics-deck-enter,
    .tv-metrics-deck-leave {
        transition: none;
    }

    .tv-pano-vbars__fill,
    .tv-pano-vbars__fill::before,
    .tv-pano-vbars__value {
        animation: none !important;
    }

    .tv-pano-vbars__fill {
        transition: height 0.4s ease;
    }
}

.tv-screen__title {
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    color: var(--pbi-text);
}

.tv-screen__title:not(.tv-chart-card__title) {
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    font-weight: 700;
    gap: 10px;
}

.tv-screen__title i {
    color: var(--pbi-accent);
}

.tv-screen-pills {
    display: flex;
    align-items: center;
    gap: clamp(4px, 0.6vw, 8px);
    min-width: 0;
    flex: 0 1 auto;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.tv-screen-pills::-webkit-scrollbar {
    display: none;
}

.tv-screen-pills__pill {
    padding: clamp(8px, 1vh, 12px) clamp(16px, 2vw, 24px);
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.05);
    color: #f3f4f6;
    font-size: clamp(0.85rem, 1.2vw, 1.1rem);
    font-weight: 700;
    /* text-transform removed */
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.tv-screen-pills__pill:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.4);
}

.tv-screen-pills__pill--active {
    background: rgba(255, 204, 33, 0.2);
    border-color: rgba(255, 204, 33, 0.7);
    color: #FFDF00;
    box-shadow: 0 0 16px rgba(255, 204, 33, 0.35);
}

.tv-screen-pills__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}

.tv-screen-pills__dot--active {
    background: var(--pbi-accent);
    box-shadow: 0 0 8px rgba(255, 204, 33, 0.5);
}

.tv-leader-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 204, 33, 0.25), rgba(255, 204, 33, 0.08));
    border: 1px solid rgba(255, 204, 33, 0.45);
    color: var(--pbi-accent);
    font-size: 0.65rem;
    font-weight: 700;
    /* text-transform removed */
    letter-spacing: 0.05em;
    animation: leaderBadgePulse 2.5s ease-in-out infinite;
    white-space: nowrap;
}

.tv-leader-badge__icon {
    flex-shrink: 0;
}

.tv-leader-badge--compact {
    padding: 2px 8px;
    font-size: 0.55rem;
    gap: 4px;
}

.tv-leader-badge--compact .tv-leader-badge__text {
    font-size: 0.5rem;
}

.tv-leader-badge--ribbon {
    padding: 4px 12px 4px 10px;
    border-radius: 4px;
    background: linear-gradient(135deg, #ffe566 0%, var(--pbi-accent) 45%, var(--tv-gold-dark) 100%);
    border: none;
    color: #1a1a1a;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    box-shadow: 0 2px 10px rgba(255, 204, 33, 0.35);
    animation: leaderRibbonShine 3s ease-in-out infinite;
    position: relative;
}

.tv-leader-badge--ribbon .tv-leader-badge__icon {
    color: #1a1a1a;
    font-size: 0.65rem;
    filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.3));
}

.tv-leader-badge--ribbon::before,
.tv-leader-badge--ribbon::after {
    content: '';
    position: absolute;
    top: 100%;
    width: 0;
    height: 0;
    border-style: solid;
}

.tv-leader-badge--ribbon::before {
    left: 0;
    border-width: 5px 0 0 8px;
    border-color: var(--tv-gold-dark) transparent transparent transparent;
}

.tv-leader-badge--ribbon::after {
    right: 0;
    border-width: 5px 8px 0 0;
    border-color: var(--tv-gold-dark) transparent transparent transparent;
}

.tv-leader-badge--podium {
    padding: clamp(6px, 0.9vh, 8px) clamp(14px, 2vw, 20px);
    border-radius: 6px;
    background: linear-gradient(135deg, #fff4c2 0%, var(--pbi-accent) 40%, #e6a800 100%);
    border: 1px solid rgba(255, 240, 160, 0.6);
    color: #1a1a1a;
    font-size: clamp(0.62rem, 1.1vh, 0.75rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    box-shadow:
        0 4px 18px rgba(255, 204, 33, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
    animation: leaderRibbonShine 2.5s ease-in-out infinite;
}

.tv-leader-badge--podium .tv-leader-badge__icon {
    color: #1a1a1a;
    font-size: 0.85rem;
}

.tv-leader-badge--podium::before,
.tv-leader-badge--podium::after {
    content: '';
    position: absolute;
    top: 100%;
    border-style: solid;
}

.tv-leader-badge--podium::before {
    left: 6px;
    border-width: 6px 0 0 10px;
    border-color: #c99200 transparent transparent transparent;
}

.tv-leader-badge--podium::after {
    right: 6px;
    border-width: 6px 10px 0 0;
    border-color: #c99200 transparent transparent transparent;
}

.tv-leader-badge--ribbon,
.tv-leader-badge--podium {
    position: relative;
}

@keyframes leaderBadgePulse {
    0%, 100% { box-shadow: 0 0 0 rgba(255, 204, 33, 0); }
    50% { box-shadow: 0 0 16px rgba(255, 204, 33, 0.35); }
}

@keyframes leaderRibbonShine {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.12); }
}

.tv-screen-metrics__comparison {
    flex-shrink: 0;
    margin-top: 4px;
}

.tv-screen-metrics__comparison-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.tv-screen-metrics__subtitle {
    margin: 0;
    font-size: 0.75rem;
    /* text-transform removed */
    letter-spacing: 0.06em;
    color: var(--pbi-muted);
}

.tv-screen-metrics__comparison-legend {
    font-size: 0.6rem;
    color: var(--pbi-muted);
    /* text-transform removed */
    letter-spacing: 0.04em;
    display: flex;
    gap: 10px;
}

.tv-screen-metrics__comparison-legend .fa-arrow-up { color: #4ade80; margin-right: 3px; }
.tv-screen-metrics__comparison-legend .fa-arrow-down { color: #f87171; margin-right: 3px; }

.tv-comparison-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tv-comparison-bars--rich:not(.tv-comparison-bars--fullscreen) {
    max-height: 220px;
    overflow-y: auto;
    padding-right: 4px;
}

.tv-portrait--goal-row .tv-portrait__ring {
    width: clamp(44px, 5vw, 64px);
    height: clamp(44px, 5vw, 64px);
}

.tv-comparison-bars__row {
    display: grid;
    grid-template-columns: 24px minmax(140px, 1.2fr) 2fr 56px;
    gap: 10px;
    align-items: center;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--pbi-surface);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.tv-comparison-bars__row--leader {
    border-color: rgba(255, 204, 33, 0.3);
    background: linear-gradient(90deg, rgba(255, 204, 33, 0.06), var(--pbi-surface));
}

.tv-comparison-bars__row--over {
    border-left: 3px solid #a855f7;
    background: linear-gradient(90deg, rgba(168, 85, 247, 0.08), transparent);
}
.tv-comparison-bars__row--success { border-left: 3px solid #4ade80; }
.tv-comparison-bars__row--ok { border-left: 3px solid var(--pbi-accent); }
.tv-comparison-bars__row--warn { border-left: 3px solid #fbbf24; }
.tv-comparison-bars__row--alert { border-left: 3px solid #f87171; }

.tv-comparison-bars__rank {
    font-weight: 800;
    color: var(--pbi-muted);
    text-align: center;
    font-size: 0.85rem;
}

.tv-comparison-bars__seller {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.tv-comparison-bars__info {
    min-width: 0;
}

.tv-comparison-bars__name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.tv-comparison-bars__name {
    font-weight: 700;
    font-size: 0.85rem;
}

.tv-comparison-bars__meta {
    font-size: 0.62rem;
    color: var(--pbi-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tv-comparison-bars__meta-sep {
    margin: 0 4px;
    opacity: 0.5;
}

.tv-comparison-bars__trend--up { color: #4ade80; font-size: 0.65rem; }
.tv-comparison-bars__trend--down { color: #f87171; font-size: 0.65rem; }

.tv-comparison-bars__track {
    position: relative;
    height: 12px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: visible;
}

.tv-comparison-bars__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--tv-gold-dark), var(--pbi-accent));
    border-radius: 999px;
    transition: width 0.5s ease;
}

.tv-comparison-bars__marker {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    background: rgba(255, 255, 255, 0.5);
    transform: translateX(-50%);
    border-radius: 1px;
    pointer-events: none;
}

.tv-comparison-bars__pct-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.tv-comparison-bars__pct {
    font-weight: 800;
    color: var(--pbi-accent);
    font-size: 0.9rem;
    line-height: 1;
}

.tv-comparison-bars__stars {
    display: inline-flex;
    gap: 2px;
    color: #c084fc;
    font-size: 0.65rem;
    text-shadow: 0 0 8px rgba(168, 85, 247, 0.5);
    animation: tv-star-pulse 1.5s ease-in-out infinite alternate;
}

.tv-comparison-bars__delta {
    font-size: 0.58rem;
    font-weight: 700;
}

.tv-comparison-bars__delta--up { color: #4ade80; }
.tv-comparison-bars__delta--down { color: #f87171; }

.tv-metrics-kpi-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    flex-shrink: 0;
}

.tv-seller-kpi__value--alert {
    color: #f87171 !important;
}

.tv-seller-detail .tv-chart-card__title {
    text-transform: none !important;
}

.tv-seller-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
}

.tv-seller-detail__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
}

.tv-seller-detail__header-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.tv-seller-detail__screen-timer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 204, 33, 0.14);
    border: 1px solid rgba(255, 204, 33, 0.35);
    color: var(--pbi-accent);
    font-size: 0.82rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    box-shadow: 0 0 16px rgba(255, 204, 33, 0.12);
}

.tv-seller-detail__counter {
    font-size: 0.75rem;
    /* text-transform removed */
    letter-spacing: 0.06em;
    color: var(--pbi-muted);
    font-weight: 600;
}

.tv-seller-detail__layout {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(280px, 38%) 1fr;
    gap: clamp(10px, 1.4vw, 18px);
    align-items: stretch;
    min-height: 0;
}

.tv-seller-detail__profile-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    height: 100%;
    min-height: 0;
    padding: clamp(8px, 1vh, 12px);
    border-radius: clamp(12px, 1.4vh, 18px);
    background: linear-gradient(160deg, rgba(255, 204, 33, 0.08) 0%, rgba(255, 255, 255, 0.03) 45%, rgba(0, 0, 0, 0.15) 100%);
    border: 1px solid rgba(255, 204, 33, 0.18);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    gap: clamp(6px, 0.8vh, 10px);
    overflow: hidden;
}

.tv-seller-detail__photo-stage {
    flex: 1;
    min-height: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: clamp(10px, 1.2vh, 14px);
    overflow: hidden;
}

.tv-seller-detail__goal-badge {
    position: absolute;
    top: clamp(8px, 1vh, 16px);
    left: clamp(8px, 1vw, 16px);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    width: clamp(60px, 8vw, 90px);
    height: clamp(60px, 8vw, 90px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.tv-seller-detail__goal-badge-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(currentColor calc(var(--pct) * 1%), rgba(255, 255, 255, 0.1) 0);
    mask: radial-gradient(transparent 55%, black 56%);
    -webkit-mask: radial-gradient(transparent 55%, black 56%);
}

.tv-seller-detail__goal-badge-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.tv-seller-detail__goal-badge-content i {
    font-size: clamp(0.7rem, 1vw, 1rem);
    margin-bottom: 2px;
    opacity: 0.9;
}

.tv-seller-detail__goal-badge-pct {
    font-size: clamp(1rem, 1.5vw, 1.5rem);
    font-weight: 800;
}

.tv-seller-detail__goal-badge--success { color: #4ade80; }
.tv-seller-detail__goal-badge--over { color: #c084fc; text-shadow: 0 0 16px rgba(192, 132, 252, 0.6); box-shadow: 0 0 20px rgba(192, 132, 252, 0.5); border-color: rgba(192, 132, 252, 0.6); }
.tv-seller-detail__goal-badge--ok { color: #eab308; }
.tv-seller-detail__goal-badge--warn { color: #f97316; }
.tv-seller-detail__goal-badge--alert { color: #ef4444; }

.tv-portrait--seller-hero {
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
}

.tv-portrait--seller-hero .tv-portrait__ring--hero {
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: auto;
    border-radius: clamp(10px, 1.2vh, 14px);
    margin: 0;
}

.tv-portrait__ring--hero {
    position: relative;
    max-width: none;
    margin: 0 auto;
}

.tv-portrait__ring--glow {
    box-shadow: 0 0 40px rgba(255, 204, 33, 0.2);
}

.tv-portrait__ring--leader {
    border-color: rgba(255, 204, 33, 0.55);
    box-shadow:
        0 0 28px rgba(255, 204, 33, 0.28),
        inset 0 0 0 1px rgba(255, 204, 33, 0.15);
}

.tv-seller-detail__photo-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: clamp(28px, 5vh, 48px) clamp(12px, 1.4vw, 18px) clamp(12px, 1.6vh, 18px);
    background: linear-gradient(0deg, rgba(6, 4, 3, 0.95) 0%, rgba(6, 4, 3, 0.72) 55%, transparent 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(4px, 0.6vh, 8px);
    pointer-events: none;
}

.tv-seller-detail__leader-badge {
    position: static;
    transform: none;
    flex-shrink: 0;
    margin-bottom: clamp(2px, 0.4vh, 6px);
}

.tv-leader-badge--profile {
    padding: 5px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #fff4c2 0%, var(--pbi-accent) 48%, #e6a800 100%);
    border: 1px solid rgba(255, 240, 160, 0.55);
    color: #1a1a1a;
    font-size: clamp(0.52rem, 0.85vw, 0.6rem);
    font-weight: 800;
    letter-spacing: 0.07em;
    box-shadow:
        0 3px 14px rgba(255, 204, 33, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    animation: leaderRibbonShine 2.5s ease-in-out infinite;
}

.tv-leader-badge--profile .tv-leader-badge__icon {
    color: #1a1a1a;
    font-size: 0.72em;
}

.tv-seller-detail__profile-compact {
    flex-shrink: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: clamp(6px, 1vh, 12px);
    padding: clamp(8px, 1.2vh, 14px) clamp(8px, 1vw, 12px);
}

/* Barra semáforo — evaluación meta mensual (sidebar vendedor) */
.tv-seller-semaphore {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 0.9vh, 10px);
}

.tv-seller-semaphore__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.tv-seller-semaphore__title {
    font-size: clamp(0.62rem, 1.2vh, 0.78rem);
    /* text-transform removed */
    letter-spacing: 0.07em;
    font-weight: 700;
    color: var(--pbi-muted);
}

.tv-seller-semaphore__pct {
    font-size: clamp(1.1rem, 2.8vh, 1.65rem);
    font-weight: 900;
    line-height: 1;
    color: var(--pbi-accent);
}

.tv-seller-semaphore__pct--success,
.tv-seller-semaphore__pct--over { color: #4ade80; }
.tv-seller-semaphore__pct--ok { color: #eab308; }
.tv-seller-semaphore__pct--warn { color: #f97316; }
.tv-seller-semaphore__pct--alert { color: #ef4444; }

.tv-seller-semaphore__track {
    position: relative;
    height: clamp(14px, 2.2vh, 22px);
    border-radius: 999px;
    overflow: visible;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
}

.tv-seller-semaphore__zones {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-radius: 999px;
    overflow: hidden;
    opacity: 0.45;
}

.tv-seller-semaphore__zone--alert { background: #ef4444; }
.tv-seller-semaphore__zone--warn { background: #f97316; }
.tv-seller-semaphore__zone--ok { background: #eab308; }
.tv-seller-semaphore__zone--success { background: #22c55e; }

.tv-seller-semaphore__fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 999px;
    min-width: 0;
    transition: width 0.6s ease;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
    z-index: 1;
    overflow: hidden;
}

.tv-kpi-card__bar-fill,
.tv-kpi-card__bar-segment,
.tv-goal-board__bar-fill,
.tv-pano-comparison__bar-fill,
.tv-pano-hbars__fill {
    position: relative;
    overflow: hidden;
}

.tv-seller-semaphore__fill::after,
.tv-kpi-card__bar-fill::after,
.tv-kpi-card__bar-segment::after,
.tv-goal-board__bar-fill::after,
.tv-pano-comparison__bar-fill::after,
.tv-pano-hbars__fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100px;
    width: 80px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    animation: tvPowerCharge 2.5s infinite;
    z-index: 2;
    transform: skewX(-20deg);
}

@keyframes tvPowerCharge {
    0% { left: -100px; }
    40% { left: 110%; }
    100% { left: 110%; }
}

.tv-seller-semaphore__fill--success {
    background: linear-gradient(90deg, #16a34a, #4ade80);
}

.tv-seller-semaphore__fill--over {
    background: linear-gradient(90deg, #9333ea, #c084fc);
    box-shadow: 0 0 12px rgba(192, 132, 252, 0.4);
}

.tv-seller-semaphore__fill--ok {
    background: linear-gradient(90deg, #ca8a04, #eab308);
}

.tv-seller-semaphore__fill--warn {
    background: linear-gradient(90deg, #c2410c, #f97316);
}

.tv-seller-semaphore__fill--alert {
    background: linear-gradient(90deg, #b91c1c, #ef4444);
}

.tv-seller-semaphore__marker {
    position: absolute;
    top: 50%;
    width: clamp(4px, 0.5vh, 6px);
    height: calc(100% + clamp(6px, 1vh, 10px));
    margin-left: clamp(-2px, -0.25vh, -3px);
    transform: translateY(-50%);
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8), 0 0 4px rgba(0, 0, 0, 0.5);
    z-index: 2;
    transition: left 0.6s ease;
}

.tv-seller-semaphore__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tv-seller-semaphore__status {
    font-size: clamp(0.65rem, 1.2vh, 0.82rem);
    font-weight: 700;
    /* text-transform removed */
    letter-spacing: 0.05em;
}

.tv-seller-semaphore__status--success,
.tv-seller-semaphore__status--over { color: #4ade80; }
.tv-seller-semaphore__status--ok { color: #eab308; }
.tv-seller-semaphore__status--warn { color: #f97316; }
.tv-seller-semaphore__status--alert { color: #ef4444; }

.tv-seller-semaphore__sub {
    font-size: clamp(0.58rem, 1.1vh, 0.72rem);
    color: var(--pbi-muted);
    font-variant-numeric: tabular-nums;
}

.tv-seller-detail__name {
    margin: 0;
    font-size: clamp(1rem, 2.2vh, 1.45rem);
    font-weight: 800;
    line-height: 1.15;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.tv-seller-detail__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.tv-seller-detail__rank {
    font-size: 0.75rem;
    color: var(--pbi-muted);
    /* text-transform removed */
    letter-spacing: 0.06em;
    font-weight: 600;
}

.tv-seller-detail__trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    /* text-transform removed */
    letter-spacing: 0.04em;
}

.tv-seller-detail__trend--up {
    background: rgba(74, 222, 128, 0.15);
    color: #4ade80;
}

.tv-seller-detail__trend--down {
    background: rgba(248, 113, 113, 0.15);
    color: #f87171;
}

.tv-seller-detail__trend--same {
    background: rgba(255, 255, 255, 0.08);
    color: var(--pbi-muted);
}

.tv-seller-detail__sales {
    margin: clamp(2px, 0.4vh, 6px) 0 0;
}

.tv-seller-detail__sales-count {
    display: block;
    font-size: var(--tv-counter-md);
    font-weight: 900;
    color: var(--pbi-accent);
    line-height: 1;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7), 0 0 24px rgba(255, 204, 33, 0.35);
    font-variant-numeric: tabular-nums;
}

.tv-seller-detail__sales-label {
    font-size: 0.68rem;
    /* text-transform removed */
    color: var(--pbi-muted);
    letter-spacing: 0.05em;
}

.tv-seller-detail__today {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--pbi-text);
    background: rgba(255, 255, 255, 0.06);
}

.tv-seller-detail__today i {
    color: var(--pbi-accent);
    font-size: 0.7rem;
}

.tv-seller-detail__stars-matrix {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(4px, 0.8vh, 10px) clamp(6px, 1vw, 12px);
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: clamp(4px, 0.6vh, 8px) clamp(2px, 0.4vw, 6px);
}

.tv-seller-detail__stars-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(4px, 0.6vh, 8px);
    min-width: 0;
    opacity: 0.5;
}

.tv-seller-detail__stars-cell--earned {
    opacity: 1;
}

.tv-seller-detail__stars-cell .tv-star {
    font-size: clamp(1.1rem, 3.2vh, 1.85rem);
    line-height: 1;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

.tv-seller-detail__stars-cell--earned .tv-star--filled {
    filter: drop-shadow(0 0 10px rgba(255, 204, 33, 0.45));
}

.tv-seller-detail__stars-cell-label {
    font-size: clamp(0.55rem, 1.2vh, 0.72rem);
    /* text-transform removed */
    letter-spacing: 0.04em;
    color: var(--pbi-muted);
    line-height: 1.1;
    font-weight: 600;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tv-seller-detail__stars-cell--earned .tv-seller-detail__stars-cell-label {
    color: var(--pbi-text);
}

.tv-seller-detail__stars-hint {
    margin: 0 auto;
    width: 100%;
    font-size: clamp(0.45rem, 0.7vw, 0.5rem);
    color: var(--pbi-muted);
    text-align: center;
    line-height: 1.2;
}

.tv-seller-detail__goal-bars {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 0.5vh, 6px);
}

.tv-seller-detail__goal-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tv-seller-detail__goal-legend {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.58rem;
    /* text-transform removed */
    letter-spacing: 0.05em;
    color: var(--pbi-muted);
}

.tv-seller-detail__goal-dot {
    font-size: 0.45rem;
}

.tv-seller-detail__goal-dot--month {
    color: var(--pbi-accent);
}

.tv-seller-detail__goal-dot--day {
    color: #60a5fa;
}

.tv-seller-detail__bar {
    width: 100%;
}

.tv-seller-detail__bar--day .tv-ranking__bar-fill--day {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.tv-seller-detail__bar-label {
    font-size: 0.58rem;
    color: var(--pbi-muted);
    font-variant-numeric: tabular-nums;
}

.tv-seller-detail__over-stars {
    display: flex;
    justify-content: center;
    gap: 4px;
    width: 100%;
    flex-shrink: 0;
    margin-top: auto;
    padding-top: clamp(6px, 0.8vh, 10px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #c084fc;
    font-size: clamp(0.85rem, 1.4vw, 1.1rem);
    text-shadow: 0 0 12px rgba(168, 85, 247, 0.5);
}
.tv-seller-detail__over-stars i {
    animation: tv-star-pulse 1.2s ease-in-out infinite alternate;
}
.tv-seller-detail__over-stars i:nth-child(2) { animation-delay: 0.15s; }
.tv-seller-detail__over-stars i:nth-child(3) { animation-delay: 0.3s; }
.tv-seller-detail__over-stars i:nth-child(4) { animation-delay: 0.45s; }
.tv-seller-detail__over-stars i:nth-child(5) { animation-delay: 0.6s; }

.tv-seller-detail__quick-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    width: 100%;
    flex-shrink: 0;
    margin-top: auto;
    padding-top: clamp(6px, 0.8vh, 10px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.tv-seller-detail__quick-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tv-seller-detail__quick-stat-value {
    font-size: clamp(1.35rem, 3.2vh, 2rem);
    font-weight: 800;
    color: var(--pbi-accent);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.tv-seller-detail__quick-stat-value--up { color: #4ade80; }
.tv-seller-detail__quick-stat-value--down { color: #f87171; }

.tv-seller-detail__quick-stat-label {
    font-size: 0.6rem;
    /* text-transform removed */
    color: var(--pbi-muted);
    letter-spacing: 0.04em;
}

.tv-seller-detail__main {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    overflow: hidden;
}

.tv-seller-detail__charts {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(0, auto);
    grid-template-rows: auto;
    align-content: start;
    gap: clamp(10px, 1.2vh, 14px);
    min-height: 0;
    height: 100%;
    overflow: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 204, 33, 0.3) transparent;
}

.tv-seller-detail__charts::-webkit-scrollbar {
    width: 6px;
}
.tv-seller-detail__charts::-webkit-scrollbar-thumb {
    background: rgba(255, 204, 33, 0.3);
    border-radius: 999px;
}
.tv-seller-detail__charts::-webkit-scrollbar-track { background: transparent; }

.tv-seller-detail__charts .tv-chart-card--panorama {
    /* Mantener compatibilidad con selectores legacy; sin efecto en el rediseño */
    display: none;
}

.tv-seller-detail__charts .tv-chart-card--panorama .tv-chart-card__head {
    flex-shrink: 0;
    margin-bottom: clamp(6px, 0.8vh, 10px);
}

.tv-seller-detail__charts .tv-chart-card--panorama .tv-chart-card__body {
    flex: 1;
    min-height: 0;
    max-height: 100%;
    justify-content: stretch;
    align-items: stretch;
    overflow: hidden;
}

.tv-seller-detail__charts .tv-chart-card--panorama .tv-chart-card__foot {
    flex-shrink: 0;
    margin-top: clamp(4px, 0.6vh, 8px);
}

.tv-seller-detail__charts .tv-pano-apex-stack,
.tv-seller-detail__charts .tv-pano-split {
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

.tv-seller-detail__charts .tv-pano-apex,
.tv-seller-detail__charts .tv-pano-split,
.tv-seller-detail__charts .tv-pano-meter {
    height: 100%;
    max-height: 100%;
    min-height: 0;
}

.tv-seller-detail__charts .tv-pano-apex > div,
.tv-seller-detail__charts .tv-pano-apex .apexcharts-canvas {
    max-height: 100% !important;
}

.tv-seller-detail__charts .tv-pano-split__hero {
    padding: clamp(2px, 0.4cqh, 4px) 0;
}

.tv-seller-detail__charts .tv-pano-split__hero-value {
    font-size: var(--tv-counter-md);
}

.tv-seller-detail__charts .tv-chart-card--counters .tv-pano-comparison {
    min-height: 0;
}

.tv-seller-detail__charts .tv-chart-card--counters .tv-pano-comparison__value {
    font-size: clamp(2.5rem, 6vh, 4rem);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tv-seller-detail__charts .tv-pano-apex-subs {
    gap: clamp(4px, 0.6cqh, 8px);
}

.tv-seller-detail__charts .tv-pano-apex-subs__value {
    font-size: clamp(0.55rem, 1cqh, 0.68rem);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tv-seller-detail__charts .tv-pano-meter__hero {
    font-size: clamp(1.75rem, 7cqh, 3.25rem);
}

.tv-seller-detail__kpi-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    flex-shrink: 0;
}

.tv-seller-kpi {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--pbi-surface);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.tv-seller-kpi__icon {
    color: var(--pbi-accent);
    font-size: 1rem;
    opacity: 0.85;
}

.tv-seller-kpi__body {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.tv-seller-kpi__value {
    font-size: 1rem;
    font-weight: 800;
    color: var(--pbi-text);
    line-height: 1.1;
}

.tv-seller-kpi__label {
    font-size: 0.6rem;
    /* text-transform removed */
    color: var(--pbi-muted);
    letter-spacing: 0.04em;
}

.tv-metrics-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.tv-metrics-summary__card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--pbi-surface);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.tv-metrics-summary__card--accent {
    border-color: rgba(255, 204, 33, 0.25);
    background: linear-gradient(135deg, rgba(255, 204, 33, 0.1), rgba(255, 255, 255, 0.03));
}

.tv-metrics-summary__card--success { border-color: rgba(74, 222, 128, 0.3); }
.tv-metrics-summary__card--ok { border-color: rgba(255, 204, 33, 0.2); }
.tv-metrics-summary__card--warn { border-color: rgba(251, 191, 36, 0.3); }
.tv-metrics-summary__card--alert { border-color: rgba(248, 113, 113, 0.3); }

.tv-metrics-summary__icon {
    font-size: 1.25rem;
    color: var(--pbi-accent);
    opacity: 0.9;
}

.tv-metrics-summary__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tv-metrics-summary__value {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--pbi-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tv-metrics-summary__label {
    font-size: 0.65rem;
    /* text-transform removed */
    color: var(--pbi-muted);
    letter-spacing: 0.04em;
}

.tv-metrics-summary__chip {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--pbi-accent);
    background: var(--pbi-accent-soft);
    white-space: nowrap;
}

.tv-chart-card {
    padding: 16px;
    border-radius: 12px;
    background: var(--pbi-surface);
    border: 1px solid rgba(255, 255, 255, 0.06);
    text-align: center;
}

.tv-chart-card--rich {
    display: flex;
    flex-direction: column;
    padding: clamp(14px, 1.5vw, 18px);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.12) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-align: left;
    min-height: 0;
}

.tv-chart-card--rich:hover {
    border-color: rgba(255, 204, 33, 0.2);
}

.tv-chart-card--over {
    border-color: rgba(168, 85, 247, 0.4);
    box-shadow: 0 0 24px rgba(168, 85, 247, 0.18);
}
.tv-chart-card--success { border-color: rgba(74, 222, 128, 0.3); }
.tv-chart-card--ok { border-color: rgba(255, 204, 33, 0.2); }
.tv-chart-card--warn { border-color: rgba(251, 191, 36, 0.35); }
.tv-chart-card--alert { border-color: rgba(239, 68, 68, 0.35); }

.tv-chart-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.tv-chart-card__title {
    font-size: var(--tv-text-heading);
    font-weight: 800;
    /* text-transform removed */
    letter-spacing: 0.06em;
    color: var(--pbi-text);
}

.tv-chart-card__title i {
    color: var(--pbi-accent);
    margin-right: 5px;
}

.tv-chart-card__badge {
    padding: 3px 8px;
    border-radius: 999px;
    font-size: var(--tv-text-micro);
    font-weight: 700;
    /* text-transform removed */
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.tv-chart-card__badge--over { background: rgba(168, 85, 247, 0.2); color: #c084fc; }
.tv-chart-card__badge--success { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.tv-chart-card__badge--ok { background: var(--pbi-accent-soft); color: var(--pbi-accent); }
.tv-chart-card__badge--warn { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.tv-chart-card__badge--alert { background: rgba(248, 113, 113, 0.15); color: #f87171; }
.tv-chart-card__badge--info { background: rgba(96, 165, 250, 0.15); color: #60a5fa; }

.tv-chart-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tv-chart-card__body--donut {
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.tv-chart-card__body--dual-donut {
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    gap: 12px;
}

.tv-chart-card__metrics {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tv-chart-card__metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tv-chart-card__metric-value {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--pbi-accent);
    line-height: 1;
}

.tv-chart-card__metric-label {
    font-size: 0.6rem;
    /* text-transform removed */
    color: var(--pbi-muted);
    letter-spacing: 0.04em;
}

.tv-chart-card__track {
    height: 6px;
    margin-top: 12px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
}

.tv-chart-card__track--alert .tv-chart-card__track-fill--alert {
    background: linear-gradient(90deg, #dc2626, #f87171);
}

.tv-chart-card__track-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--tv-gold-dark), var(--pbi-accent));
    border-radius: 999px;
    transition: width 0.6s ease;
}

.tv-chart-card__foot {
    margin-top: 8px;
    font-size: 0.68rem;
    color: var(--pbi-muted);
}

.tv-chart-card__sub {
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--pbi-muted);
}

.tv-chart-donut {
    --chart-pct: 0;
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    border-radius: 50%;
    background: conic-gradient(
        var(--pbi-accent) calc(var(--chart-pct) * 1%),
        rgba(255, 255, 255, 0.08) 0
    );
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.tv-chart-donut--lg {
    width: 120px;
    height: 120px;
}

.tv-chart-donut--md {
    width: 88px;
    height: 88px;
}

.tv-chart-donut--ok {
    background: conic-gradient(
        var(--pbi-accent) calc(var(--chart-pct) * 1%),
        rgba(255, 255, 255, 0.08) 0
    );
}

.tv-chart-donut--warn {
    background: conic-gradient(
        #fbbf24 calc(var(--chart-pct) * 1%),
        rgba(255, 255, 255, 0.08) 0
    );
}

.tv-chart-donut--alert {
    background: conic-gradient(
        #f87171 calc(var(--chart-pct) * 1%),
        rgba(255, 255, 255, 0.08) 0
    );
}

.tv-chart-donut--success {
    background: conic-gradient(
        #4ade80 calc(var(--chart-pct) * 1%),
        rgba(255, 255, 255, 0.08) 0
    );
}

.tv-chart-donut::before {
    content: '';
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    background: var(--pbi-canvas);
}

.tv-chart-donut--lg::before { inset: 14px; }
.tv-chart-donut--md::before { inset: 10px; }

.tv-chart-donut__inner {
    position: relative;
    z-index: 1;
}

.tv-chart-donut__value {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--pbi-accent);
}

.tv-chart-donut__value--sm {
    font-size: 0.95rem;
}

.tv-chart-donut-pair {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.tv-chart-donut-pair__label {
    font-size: 0.6rem;
    /* text-transform removed */
    color: var(--pbi-muted);
    letter-spacing: 0.04em;
}

.tv-chart-dual {
    display: flex;
    justify-content: center;
    gap: 24px;
}

.tv-chart-dual--lg {
    gap: 32px;
    margin-bottom: 12px;
}

.tv-chart-dual__value {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: var(--pbi-accent);
    line-height: 1;
}

.tv-chart-dual--lg .tv-chart-dual__value {
    font-size: 2.4rem;
}

.tv-chart-dual__value--muted {
    color: #60a5fa;
}

.tv-chart-dual__label {
    font-size: 0.65rem;
    /* text-transform removed */
    color: var(--pbi-muted);
    margin-top: 4px;
}

.tv-chart-stack-bar {
    display: flex;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
}

.tv-chart-stack-bar__segment {
    height: 100%;
    transition: width 0.5s ease;
}

.tv-chart-stack-bar__segment--new {
    background: linear-gradient(90deg, var(--tv-gold-dark), var(--pbi-accent));
}

.tv-chart-stack-bar__segment--react {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.tv-chart-stack-legend {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 8px;
    font-size: 0.6rem;
    color: var(--pbi-muted);
    /* text-transform removed */
}

.tv-chart-stack-legend__dot--new { color: var(--pbi-accent); font-size: 0.45rem; }
.tv-chart-stack-legend__dot--react { color: #60a5fa; font-size: 0.45rem; }
.tv-chart-stack-legend__dot--month { color: var(--pbi-accent); font-size: 0.45rem; }
.tv-chart-stack-legend__dot--day { color: #60a5fa; font-size: 0.45rem; }
.tv-chart-stack-legend__dot--ok { color: #4ade80; font-size: 0.45rem; }
.tv-chart-stack-legend__dot--warn { color: #fbbf24; font-size: 0.45rem; }

.tv-chart-stack-legend--goals,
.tv-chart-stack-legend--orders {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.tv-chart-donut-pair--goal {
    flex: 1;
    min-width: 0;
}

.tv-chart-donut-pair__sub {
    font-size: 0.58rem;
    color: var(--pbi-text);
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
}

.tv-chart-donut-pair__hint {
    font-size: 0.52rem;
    color: var(--pbi-muted);
    text-align: center;
}

.tv-chart-card--goals .tv-chart-card__body--dual-donut {
    gap: clamp(12px, 2vw, 20px);
}

.tv-screen-enter {
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.tv-screen-leave {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Stars */
.tv-star-rating {
    display: flex;
    gap: 3px;
}

.tv-star-rating--row { flex-direction: row; }

.tv-star-sm .tv-star { font-size: 0.6rem; }
.tv-star-md .tv-star { font-size: 0.75rem; }
.tv-star-celebration .tv-star { font-size: 1.5rem; }

.tv-star--filled { color: var(--pbi-accent); }
.tv-star--empty { color: rgba(255, 255, 255, 0.2); }

.tv-star-rating--animate .tv-star--filled {
    animation: starPop 0.5s ease backwards;
}

.tv-star-rating--arc {
    justify-content: center;
    gap: 8px;
    margin: 12px 0;
    perspective: 200px;
}

.tv-star-rating--arc .tv-star {
    opacity: 0;
    animation: starArcAppear 0.6s ease forwards;
    transform: rotate(calc((var(--arc-index) - 2.5) * 12deg)) translateY(calc(var(--arc-index) * -2px));
}

@keyframes starPop {
    0% { transform: scale(0); opacity: 0; }
    70% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes starArcAppear {
    0% { opacity: 0; transform: scale(0) rotate(calc((var(--arc-index) - 2.5) * 12deg)); }
    100% { opacity: 1; transform: scale(1) rotate(calc((var(--arc-index) - 2.5) * 12deg)) translateY(-4px); }
}

/* Insight footer */
.tv-wall__insight {
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    font-weight: 500;
}

.tv-wall__insight--inline {
    flex-shrink: 0;
    padding: clamp(6px, 0.9vh, 10px) clamp(12px, 1.4vw, 16px);
    font-size: clamp(0.72rem, 1.1vw, 0.85rem);
    gap: 8px;
}

.tv-wall__insight i {
    color: var(--pbi-accent);
}

/* Celebration overlay */
.tv-celebration {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(4px, 0.8vh, 12px);
}

.tv-celebration__backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 55% 45% at 26% 50%, rgba(255, 204, 33, 0.14), transparent 55%),
        radial-gradient(ellipse 40% 50% at 78% 50%, rgba(255, 204, 33, 0.06), transparent 50%),
        radial-gradient(ellipse 100% 100% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.55) 100%),
        rgba(8, 10, 14, 0.9);
    backdrop-filter: blur(16px);
}

.tv-celebration__panel {
    position: relative;
    z-index: 2;
    max-width: min(1600px, 98vw);
    width: 100%;
    height: min(900px, 90dvh);
    max-height: min(900px, 90dvh);
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 204, 33, 0.4);
    border-radius: clamp(18px, 2.2vh, 26px);
    animation: panelSlideUp 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow:
        0 32px 100px rgba(0, 0, 0, 0.55),
        0 0 80px rgba(255, 204, 33, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, rgba(22, 24, 29, 0.98) 0%, rgba(12, 14, 18, 0.99) 100%);
}

.tv-celebration__panel::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, var(--pbi-accent), transparent 40%, var(--pbi-accent));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    animation: borderShimmer 3s linear infinite;
}

@keyframes panelSlideUp {
    from { opacity: 0; transform: translateY(24px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes borderShimmer {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* Celebration hero */
.tv-celebration-hero {
    position: relative;
    flex: 1;
    min-height: 0;
    padding: clamp(12px, 1.6vh, 24px) clamp(14px, 2vw, 28px);
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.tv-celebration-hero__mesh {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 204, 33, 0.06), transparent 35%),
        radial-gradient(circle at 80% 70%, rgba(255, 204, 33, 0.04), transparent 30%);
    opacity: 0.9;
}

.tv-celebration-hero--revealed .tv-celebration-hero__mesh {
    animation: celebrationMeshDrift 8s ease-in-out infinite;
}

@keyframes celebrationMeshDrift {
    0%, 100% {
        background:
            radial-gradient(circle at 20% 30%, rgba(255, 204, 33, 0.08), transparent 35%),
            radial-gradient(circle at 80% 70%, rgba(255, 204, 33, 0.05), transparent 30%);
    }
    50% {
        background:
            radial-gradient(circle at 28% 38%, rgba(255, 204, 33, 0.12), transparent 40%),
            radial-gradient(circle at 72% 62%, rgba(255, 204, 33, 0.08), transparent 35%);
    }
}

.tv-celebration-hero__flash {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    background: radial-gradient(circle at 50% 18%, rgba(255, 230, 120, 0.55), transparent 55%);
    opacity: 0;
}

.tv-celebration-hero--revealed .tv-celebration-hero__flash {
    animation: celebrationFlash 0.9s ease-out forwards;
}

@keyframes celebrationFlash {
    0% { opacity: 0; }
    12% { opacity: 0.85; }
    100% { opacity: 0; }
}

.tv-celebration-hero__sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    overflow: hidden;
}

.tv-celebration-hero__sparkle {
    position: absolute;
    width: clamp(30px, 6vh, 70px);
    height: clamp(30px, 6vh, 70px);
    background: #ffdf00;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    filter: drop-shadow(0 0 15px rgba(255, 204, 33, 1));
    opacity: 0;
    left: calc(5% + (var(--sparkle-i) * 6.5%));
    bottom: -15%;
    animation: none;
}

.tv-celebration-hero--revealed .tv-celebration-hero__sparkle {
    animation: celebrationSparkleFloat 3.8s ease-in-out calc(var(--sparkle-i) * 0.15s) infinite;
}

@keyframes celebrationSparkleFloat {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0.2) rotate(0deg);
    }
    15% {
        opacity: 1;
        transform: translate3d(-20px, -15vh, 0) scale(1) rotate(70deg);
    }
    50% {
        transform: translate3d(20px, -45vh, 0) scale(1.3) rotate(200deg);
    }
    85% {
        opacity: 0.8;
        transform: translate3d(-10px, -75vh, 0) scale(0.8) rotate(300deg);
    }
    100% {
        opacity: 0;
        transform: translate3d(0, -95vh, 0) scale(0.4) rotate(360deg);
    }
}

.tv-celebration-hero__glow {
    position: absolute;
    top: 50%;
    left: 28%;
    transform: translate(-50%, -50%);
    width: min(52vw, 76vh, 680px);
    height: min(52vw, 76vh, 680px);
    background: radial-gradient(ellipse, rgba(255, 204, 33, 0.32), transparent 68%);
    pointer-events: none;
    animation: celebrationGlow 3s ease-in-out infinite;
}

.tv-celebration-hero__rays {
    position: absolute;
    top: 50%;
    left: 28%;
    width: min(70vw, 90vh, 820px);
    height: min(70vw, 90vh, 820px);
    transform: translate(-50%, -50%);
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 204, 33, 0.06) 15deg,
        transparent 30deg,
        transparent 60deg,
        rgba(255, 204, 33, 0.04) 75deg,
        transparent 90deg
    );
    animation: celebrationRays 20s linear infinite;
    pointer-events: none;
}

.tv-celebration-hero--sale-first {
    container-type: size;
    container-name: tv-celebration;
}

.tv-celebration-hero__layout {
    display: flex;
    flex-direction: column;
    position: relative;
    flex: 1;
    min-height: 0;
    height: 100%;
    gap: clamp(10px, 1.6vh, 18px);
    z-index: 1;
}

.tv-celebration-hero__title-band {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    gap: clamp(10px, 1.4vh, 16px);
    padding: 0;
    flex-shrink: 0;
    position: relative;
    width: 100%;
}

.tv-celebration-hero__burst {
    position: absolute;
    top: 58%;
    left: 42%;
    width: clamp(120px, 20vh, 200px);
    height: clamp(120px, 20vh, 200px);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.tv-celebration-hero__burst span {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 204, 33, 0.55);
    opacity: 0;
    transform: scale(0.35);
}

.tv-celebration-hero--revealed .tv-celebration-hero__burst span {
    animation: celebrationBurstRing 2.4s ease-out infinite;
}

.tv-celebration-hero--revealed .tv-celebration-hero__burst span:nth-child(2) {
    animation-delay: 0.45s;
}

.tv-celebration-hero--revealed .tv-celebration-hero__burst span:nth-child(3) {
    animation-delay: 0.9s;
}

@keyframes celebrationBurstRing {
    0% {
        opacity: 0.85;
        transform: scale(0.35);
    }
    100% {
        opacity: 0;
        transform: scale(2.8);
    }
}

.tv-celebration-hero__title {
    position: relative;
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: clamp(8px, 1.2vw, 16px);
    font-size: clamp(2.75rem, 9.5vh, 6.5rem);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: 0.04em;
    /* text-transform removed */
    filter: drop-shadow(0 4px 24px rgba(255, 204, 33, 0.45));
    max-width: 100%;
}

.tv-celebration-hero__title-word {
    display: inline-block;
    background: linear-gradient(
        105deg,
        #fff 0%,
        #fff 30%,
        var(--pbi-accent) 45%,
        #ffdf00 65%,
        #fff 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0px 2px 0px #b8860b)
            drop-shadow(0px 4px 0px #8b6508)
            drop-shadow(0px 8px 12px rgba(255, 204, 33, 0.6));
    opacity: 0;
    transform: scale(0.4) translateY(40px);
}

.tv-celebration-hero--revealed .tv-celebration-hero__title-word:nth-child(2) {
    animation:
        celebrationWordPop 0.65s cubic-bezier(0.34, 1.45, 0.64, 1) 0.05s forwards,
        celebrationTitleShine 3.5s linear 0.7s infinite,
        celebrationTitlePulse 2.2s ease-in-out 0.7s infinite,
        celebrationTitleGlow 2.5s ease-in-out 0.7s infinite;
}

.tv-celebration-hero--revealed .tv-celebration-hero__title-word:nth-child(3) {
    animation:
        celebrationWordPop 0.65s cubic-bezier(0.34, 1.45, 0.64, 1) 0.22s forwards,
        celebrationTitleShine 3.5s linear 0.85s infinite,
        celebrationTitlePulse 2.2s ease-in-out 0.85s infinite,
        celebrationTitleGlow 2.5s ease-in-out 0.85s infinite;
}

@keyframes celebrationWordPop {
    0% {
        opacity: 0;
        transform: scale(0.4) translateY(50px) rotate(-8deg);
    }
    60% {
        opacity: 1;
        transform: scale(1.3) translateY(-10px) rotate(3deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0) rotate(0);
    }
}

@keyframes celebrationTitlePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

.tv-celebration-hero__title-shine {
    position: absolute;
    inset: -8% -4%;
    pointer-events: none;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(255, 255, 255, 0.35) 50%,
        transparent 60%
    );
    opacity: 0;
    mix-blend-mode: overlay;
}

.tv-celebration-hero--revealed .tv-celebration-hero__title-shine {
    animation: celebrationTitleSweep 2.2s ease-in-out 0.5s infinite;
}

@keyframes celebrationTitlePop {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes celebrationTitleShine {
    to { background-position: 200% center; }
}

@keyframes celebrationTitleGlow {
    0%, 100% { filter: drop-shadow(0 4px 24px rgba(255, 204, 33, 0.45)); }
    50% { filter: drop-shadow(0 8px 42px rgba(255, 204, 33, 0.9)); }
}

@keyframes celebrationTitleSweep {
    0%, 100% { opacity: 0; transform: translateX(-30%); }
    40% { opacity: 0.6; }
    60% { opacity: 0; transform: translateX(30%); }
}

.tv-celebration-hero__main {
    container-type: size;
    container-name: tv-celebration-main;
    display: grid;
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    gap: clamp(16px, 2.5vw, 40px);
    align-items: center;
    flex: 1 1 auto;
    min-height: 0;
    padding: clamp(8px, 1.2vh, 16px) clamp(12px, 2vw, 32px);
    opacity: 0;
    transform: translateY(16px);
}

.tv-celebration-hero--revealed .tv-celebration-hero__main {
    animation: celebrationBodyIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
}

.tv-celebration-hero__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(18px, 2.8vh, 32px);
    min-width: 0;
    min-height: 0;
    padding: clamp(4px, 0.8vh, 10px) clamp(4px, 1vw, 12px) clamp(4px, 0.8vh, 10px) clamp(12px, 1.8vw, 24px);
    border-left: 1px solid rgba(255, 204, 33, 0.14);
}

.tv-celebration-hero__content .tv-celebration-hero__title {
    font-size: clamp(1.85rem, min(7.5vh, 11cqw), 4.5rem);
    flex-wrap: wrap;
    row-gap: clamp(4px, 0.6vh, 8px);
}

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

.tv-celebration-hero__visual {
    --celebration-ring-size: clamp(220px, min(72cqh, 94cqw), 640px);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: min(78cqh, 100%);
    opacity: 0;
    transform: scale(0.82);
}

.tv-celebration-hero--revealed .tv-celebration-hero__visual {
    animation: celebrationPhotoIn 0.75s cubic-bezier(0.34, 1.35, 0.64, 1) 0.4s forwards;
}

@keyframes celebrationPhotoIn {
    0% {
        opacity: 0;
        transform: scale(0.82) rotate(-3deg);
    }
    70% {
        opacity: 1;
        transform: scale(1.05) rotate(1deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

.tv-celebration-hero__ring-halo {
    position: absolute;
    width: calc(var(--celebration-ring-size) * 1.08);
    aspect-ratio: 1;
    border-radius: clamp(20px, 2.2vh, 28px);
    border: 2px solid rgba(255, 204, 33, 0.25);
    pointer-events: none;
    opacity: 0;
}

.tv-celebration-hero--revealed .tv-celebration-hero__ring-halo {
    animation: celebrationHaloPulse 2.5s ease-in-out 0.5s infinite;
}

@keyframes celebrationHaloPulse {
    0%, 100% {
        opacity: 0.35;
        transform: scale(1);
    }
    50% {
        opacity: 0.75;
        transform: scale(1.06);
    }
}

.tv-celebration-hero__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(16px, 2.4vh, 28px);
    width: 100%;
    min-width: 0;
}

.tv-celebration-hero--revealed .tv-celebration-hero__identity {
    animation: celebrationAsideSlide 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}

.tv-celebration-hero--revealed .tv-celebration-hero__counter-tile--hero {
    animation: celebrationAsideSlide 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.62s both;
}

@keyframes celebrationAsideSlide {
    from {
        opacity: 0;
        transform: translateX(28px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.tv-celebration-hero__footer {
    flex-shrink: 0;
    padding: 0 clamp(12px, 2vw, 32px) clamp(8px, 1.2vh, 14px);
    opacity: 0;
    transform: translateY(10px);
}

.tv-celebration-hero--revealed .tv-celebration-hero__footer {
    animation: celebrationFooterIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
}

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

.tv-celebration-hero__eyebrow {
    margin: 0;
    font-size: clamp(0.72rem, 1.4vh, 0.95rem);
    /* text-transform removed */
    letter-spacing: 0.16em;
    color: #1a1a1a;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: clamp(6px, 0.9vh, 10px) clamp(14px, 2vw, 22px);
    border-radius: 999px;
    background: linear-gradient(135deg, var(--tv-gold-light), var(--pbi-accent));
    border: 1px solid rgba(255, 240, 160, 0.5);
    box-shadow: 0 4px 16px rgba(255, 204, 33, 0.35);
    opacity: 0;
    transform: scale(0.9);
}

.tv-celebration-hero--revealed .tv-celebration-hero__eyebrow {
    animation:
        eyebrowPop 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) 0.1s forwards,
        eyebrowPulse 2s ease-in-out 0.6s infinite;
}

.tv-celebration-hero__eyebrow-icon {
    animation: none;
}

.tv-celebration-hero--revealed .tv-celebration-hero__eyebrow-icon {
    animation: eyebrowIconPop 0.5s ease 0.25s both;
}

@keyframes eyebrowPulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(255, 204, 33, 0.35); }
    50% { box-shadow: 0 6px 28px rgba(255, 204, 33, 0.65); }
}

@keyframes eyebrowIconPop {
    0% { transform: scale(0); }
    60% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

.tv-celebration-hero__pedestal {
    width: min(90%, calc(var(--celebration-ring-size) * 0.82));
    height: clamp(8px, 1.2vh, 14px);
    margin-top: clamp(6px, 1vh, 12px);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255, 204, 33, 0.35), transparent 70%);
    filter: blur(4px);
    animation: pedestalGlow 3s ease-in-out infinite;
}

@keyframes pedestalGlow {
    0%, 100% { opacity: 0.6; transform: scaleX(0.95); }
    50% { opacity: 1; transform: scaleX(1); }
}

.tv-celebration-hero__photo-shine {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        105deg,
        transparent 38%,
        rgba(255, 255, 255, 0.18) 48%,
        transparent 58%
    );
    animation: photoShine 4s ease-in-out infinite;
}

@keyframes photoShine {
    0%, 100% { transform: translateX(-120%); opacity: 0; }
    15% { opacity: 1; }
    35% { transform: translateX(120%); opacity: 0; }
}

.tv-celebration-hero__delta-badge {
    position: absolute;
    top: clamp(4px, 1vh, 12px);
    right: clamp(4px, 1vw, 12px);
    z-index: 3;
    padding: clamp(8px, 1.2vh, 12px) clamp(14px, 2vw, 20px);
    border-radius: 999px;
    background: linear-gradient(135deg, #ffe566, var(--pbi-accent));
    color: #1a1a1a;
    font-size: clamp(1.1rem, 2.4vh, 1.75rem);
    font-weight: 900;
    box-shadow: 0 6px 20px rgba(255, 204, 33, 0.45);
    animation: deltaPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s both;
}

.tv-celebration-hero--revealed .tv-celebration-hero__delta-badge {
    animation:
        deltaPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s both,
        deltaBounce 1.8s ease-in-out 1.2s infinite;
}

@keyframes deltaBounce {
    0%, 100% { transform: translateY(0) scale(1); filter: brightness(1); }
    50% { transform: translateY(-8px) scale(1.15); filter: brightness(1.3); }
}

@keyframes deltaPop {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}

.tv-celebration-hero__ring {
    --ring-pct: 0;
    --celebration-ring-radius: clamp(18px, 2vh, 24px);
    --celebration-ring-padding: clamp(5px, 0.8vh, 8px);
    width: var(--celebration-ring-size);
    max-width: 100%;
    aspect-ratio: 1;
    height: auto;
    box-sizing: border-box;
    display: grid;
    border-radius: var(--celebration-ring-radius);
    padding: var(--celebration-ring-padding);
    background: conic-gradient(
        var(--pbi-accent) calc(var(--ring-pct) * 1%),
        rgba(255, 255, 255, 0.1) 0
    );
    border: 2px solid rgba(255, 204, 33, 0.35);
    box-shadow:
        0 0 48px rgba(255, 204, 33, 0.25),
        0 12px 32px rgba(0, 0, 0, 0.35);
    flex-shrink: 0;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.tv-celebration-hero--revealed .tv-celebration-hero__ring {
    animation: celebrationRingPulse 2.8s ease-in-out 0.6s infinite;
}

@keyframes celebrationRingPulse {
    0%, 100% {
        box-shadow:
            0 0 48px rgba(255, 204, 33, 0.25),
            0 12px 32px rgba(0, 0, 0, 0.35);
    }
    50% {
        box-shadow:
            0 0 72px rgba(255, 204, 33, 0.55),
            0 16px 40px rgba(0, 0, 0, 0.4);
    }
}

.tv-celebration-hero__ring--leader {
    border-color: rgba(255, 204, 33, 0.55);
    box-shadow:
        0 0 56px rgba(255, 204, 33, 0.35),
        0 12px 32px rgba(0, 0, 0, 0.35),
        inset 0 0 0 1px rgba(255, 204, 33, 0.15);
}

.tv-celebration-hero__frame {
    position: relative;
    grid-area: 1 / 1;
    width: 100%;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 1;
    border-radius: calc(var(--celebration-ring-radius) - var(--celebration-ring-padding) - 2px);
    overflow: hidden;
    background: var(--pbi-canvas);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
}

.tv-celebration-hero__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    display: block;
}

@keyframes celebrationRays {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes celebrationGlow {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

@keyframes eyebrowPop {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}

.tv-celebration-hero__identity {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(6px, 1vh, 10px);
    flex-shrink: 0;
}

.tv-celebration-hero__name {
    margin: 0;
    font-size: clamp(2rem, 5.5vh, 3.5rem);
    font-weight: 900;
    color: var(--pbi-text);
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-shadow: 0 4px 6px rgba(0,0,0,0.3), 0 2px 20px rgba(0, 0, 0, 0.4);
}

.tv-celebration-hero--revealed .tv-celebration-hero__name {
    animation: celebrationNameGlow 2.4s ease-in-out 0.8s infinite;
}

@keyframes celebrationNameGlow {
    0%, 100% { text-shadow: 0 4px 6px rgba(0,0,0,0.3), 0 2px 20px rgba(0, 0, 0, 0.4); }
    50% { text-shadow: 0 4px 6px rgba(0,0,0,0.3), 0 2px 28px rgba(255, 204, 33, 0.35), 0 0 40px rgba(255, 204, 33, 0.2); }
}

.tv-celebration-hero__rank-line {
    margin: 0;
    font-size: clamp(0.85rem, 1.6vh, 1.1rem);
    color: var(--pbi-muted);
    /* text-transform removed */
    letter-spacing: 0.12em;
    font-weight: 700;
}

.tv-celebration-hero__counter-tile {
    width: 100%;
    padding: clamp(14px, 2vh, 24px) clamp(20px, 2.8vw, 32px);
    flex-shrink: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.15));
    border: 1px solid rgba(255, 204, 33, 0.25);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.tv-celebration-hero__counter-tile--hero {
    position: relative;
    padding: clamp(20px, 3vh, 36px) clamp(22px, 3vw, 36px);
    background:
        linear-gradient(135deg, rgba(255, 204, 33, 0.14) 0%, transparent 50%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.28));
    border: 1px solid rgba(255, 204, 33, 0.45);
    border-radius: clamp(16px, 2vh, 22px);
    box-shadow:
        0 14px 44px rgba(0, 0, 0, 0.38),
        0 0 40px rgba(255, 204, 33, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.tv-celebration-hero__counter-tile--hero::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: conic-gradient(
        from 0deg,
        transparent,
        rgba(255, 204, 33, 0.5),
        transparent 40%,
        transparent 60%,
        rgba(255, 230, 120, 0.4),
        transparent
    );
    animation: none;
    z-index: 0;
    opacity: 0;
}

.tv-celebration-hero--revealed .tv-celebration-hero__counter-tile--hero::before {
    opacity: 1;
    animation: counterBorderSpin 3s linear infinite;
}

.tv-celebration-hero__counter-tile--hero > * {
    position: relative;
    z-index: 1;
}

@keyframes counterBorderSpin {
    to { transform: rotate(360deg); }
}

.tv-celebration-hero__counter-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(14px, 2.5vw, 28px);
}

.tv-celebration-hero__counter-prev {
    font-size: clamp(1.75rem, 4vh, 2.75rem);
    font-weight: 800;
    color: var(--pbi-muted);
    opacity: 0.55;
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, 0.2);
}

.tv-celebration-hero__counter-arrow {
    color: var(--pbi-accent);
    font-size: clamp(1.5rem, 3vh, 2.25rem);
    opacity: 0.9;
    filter: drop-shadow(0 0 8px rgba(255, 204, 33, 0.4));
}

.tv-celebration-hero--revealed .tv-celebration-hero__counter-arrow {
    animation: counterArrowPing 1.4s ease-in-out 0.7s infinite;
}

@keyframes counterArrowPing {
    0%, 100% {
        transform: translateX(0);
        opacity: 0.7;
    }
    50% {
        transform: translateX(8px);
        opacity: 1;
        filter: drop-shadow(0 0 14px rgba(255, 204, 33, 0.8));
    }
}

.tv-celebration-hero__counter {
    font-size: clamp(2.75rem, 7.5vh, 4.75rem);
    font-weight: 900;
    line-height: 1;
    color: var(--pbi-accent);
    letter-spacing: -0.04em;
    text-shadow:
        0 0 40px rgba(255, 204, 33, 0.45),
        0 2px 0 rgba(0, 0, 0, 0.2);
}

.tv-celebration-hero__counter--pulse {
    animation: counterPulse 0.75s cubic-bezier(0.34, 1.45, 0.64, 1);
}

.tv-celebration-hero--counter-landed .tv-celebration-hero__counter-tile--hero {
    animation:
        celebrationAsideSlide 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.62s both,
        counterTileCelebrate 0.6s ease 0s;
}

@keyframes counterTileCelebrate {
    0%, 100% { transform: scale(1); }
    40% { transform: scale(1.04); }
}

@keyframes counterPulse {
    0% { transform: scale(1); color: var(--pbi-text); }
    30% { transform: scale(1.6) rotate(-2deg); color: #4ade80; text-shadow: 0 0 24px rgba(74, 222, 128, 0.8); }
    50% { transform: scale(1.5) rotate(2deg); color: #4ade80; text-shadow: 0 0 24px rgba(74, 222, 128, 0.8); }
    100% { transform: scale(1); color: var(--pbi-text); }
}

.tv-celebration-hero__counter-label {
    margin-top: clamp(8px, 1.2vh, 12px);
    font-size: clamp(0.78rem, 1.35vh, 0.98rem);
    /* text-transform removed */
    letter-spacing: 0.14em;
    color: var(--pbi-muted);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.tv-celebration-hero__counter-label i {
    color: var(--pbi-accent);
    opacity: 0.85;
}

.tv-celebration-hero__trophy-banner {
    margin: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 1.8vw, 16px);
    padding: clamp(14px, 2vh, 20px) clamp(18px, 2.5vw, 28px);
    border-radius: clamp(12px, 1.5vh, 16px);
    background: linear-gradient(90deg, rgba(255, 204, 33, 0.22), rgba(255, 204, 33, 0.06));
    border: 1px solid rgba(255, 204, 33, 0.35);
    font-size: clamp(1rem, 1.9vh, 1.25rem);
    font-weight: 800;
    color: var(--pbi-text);
    line-height: 1.35;
    text-align: center;
    box-shadow: 0 4px 20px rgba(255, 204, 33, 0.1);
}

.tv-celebration-hero--revealed .tv-celebration-hero__trophy-banner {
    animation: trophyBannerGlow 2.5s ease-in-out 0.7s infinite;
}

.tv-celebration-hero__trophy-icon {
    flex-shrink: 0;
    font-size: clamp(1.25rem, 2.2vh, 1.6rem);
    color: var(--pbi-accent);
    filter: drop-shadow(0 0 10px rgba(255, 204, 33, 0.55));
}

.tv-celebration-hero--revealed .tv-celebration-hero__trophy-icon {
    animation: trophyIconBounce 1.6s ease-in-out 0.9s infinite;
}

@keyframes trophyIconBounce {
    0%, 100% { transform: translateY(0) rotate(0); }
    30% { transform: translateY(-5px) rotate(-8deg); }
    60% { transform: translateY(0) rotate(6deg); }
}

@keyframes trophyBannerGlow {
    0%, 100% { box-shadow: 0 4px 20px rgba(255, 204, 33, 0.1); }
    50% { box-shadow: 0 4px 28px rgba(255, 204, 33, 0.22); }
}

@media (max-width: 900px) {
    .tv-celebration__panel {
        height: auto;
        max-height: min(900px, 94dvh);
    }

    .tv-celebration-hero__main {
        grid-template-columns: 1fr;
        gap: clamp(16px, 2.5vh, 24px);
    }

    .tv-celebration-hero__content {
        align-items: center;
        padding: 0;
        border-left: none;
    }

    .tv-celebration-hero__title-band {
        align-items: center;
        text-align: center;
    }

    .tv-celebration-hero__title {
        justify-content: center;
        flex-wrap: wrap;
        font-size: clamp(2.5rem, 9vh, 4.5rem);
    }

    .tv-celebration-hero__burst {
        left: 50%;
    }

    .tv-celebration-hero__glow,
    .tv-celebration-hero__rays {
        left: 50%;
    }

    .tv-celebration-hero__aside {
        align-items: center;
        text-align: center;
    }

    .tv-celebration-hero__identity {
        align-items: center;
    }

    .tv-celebration-hero__counter-row,
    .tv-celebration-hero__counter-label {
        justify-content: center;
    }

    .tv-celebration-hero__visual {
        --celebration-ring-size: min(68vw, 38vh, 420px, 100%);
        max-height: 45vh;
    }

    .tv-celebration-hero__glow {
        width: min(70vw, 45vh, 420px);
        height: min(70vw, 45vh, 420px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tv-celebration-hero__title,
    .tv-celebration-hero__title-word,
    .tv-celebration-hero__main,
    .tv-celebration-hero__footer,
    .tv-celebration-hero__eyebrow,
    .tv-celebration-hero__visual,
    .tv-celebration-hero__flash {
        opacity: 1;
        transform: none;
        animation: none !important;
    }

    .tv-celebration-hero--revealed .tv-celebration-hero__title,
    .tv-celebration-hero--revealed .tv-celebration-hero__title-word,
    .tv-celebration-hero--revealed .tv-celebration-hero__title-shine {
        animation: none !important;
        opacity: 1;
        transform: none;
    }

    .tv-celebration-hero__rays,
    .tv-celebration-hero__glow,
    .tv-celebration-hero__mesh,
    .tv-celebration-hero__sparkle,
    .tv-celebration-hero__burst span,
    .tv-celebration-hero__ring-halo,
    .tv-celebration-hero__photo-shine,
    .tv-celebration-hero__pedestal,
    .tv-celebration-hero__delta-badge,
    .tv-celebration-hero__ring,
    .tv-celebration-hero__counter-arrow,
    .tv-celebration-hero__name,
    .tv-celebration-hero__eyebrow-icon,
    .tv-celebration-hero__trophy-icon,
    .tv-celebration-hero--revealed .tv-celebration-hero__trophy-banner,
    .tv-celebration-hero--revealed .tv-celebration-hero__counter-tile--hero::before {
        animation: none !important;
    }

    .tv-celebration-hero__counter--pulse,
    .tv-celebration-hero--counter-landed .tv-celebration-hero__counter-tile--hero {
        animation: none !important;
    }
}

/* Demo button */
.tv-demo-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100;
    padding: 12px 20px;
    border: 1px solid rgba(255, 204, 33, 0.4);
    border-radius: 8px;
    background: var(--pbi-glass);
    backdrop-filter: blur(12px);
    color: var(--pbi-accent);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.tv-demo-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 204, 33, 0.2);
}

/* Loading / error */
.tv-wall__loading {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 24px;
    cursor: pointer;
}

.tv-wall__loading-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: clamp(28px, 4vw, 40px) clamp(36px, 5vw, 56px);
    text-align: center;
    border-color: rgba(255, 204, 33, 0.2);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.35),
        0 0 48px rgba(255, 204, 33, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.tv-wall__loading-logo-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tv-wall__loading-logo-wrap::before {
    content: '';
    position: absolute;
    inset: -18px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 204, 33, 0.18), transparent 70%);
    animation: loadingLogoGlow 2.4s ease-in-out infinite;
}

.tv-wall__loading-logo {
    position: relative;
    z-index: 1;
    width: clamp(96px, 14vw, 140px);
    height: auto;
    animation: loadingLogoPulse 2.4s ease-in-out infinite;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35));
}

.tv-wall__loading-spinner {
    font-size: 1.35rem;
    color: var(--pbi-accent);
}

.tv-wall__loading-text {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    /* text-transform removed */
    color: var(--pbi-muted);
}

.tv-wall__loading-hint {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    /* text-transform removed */
    color: var(--pbi-accent);
    opacity: 0.85;
}

@keyframes loadingLogoPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.04); opacity: 0.92; }
}

@keyframes loadingLogoGlow {
    0%, 100% { opacity: 0.5; transform: scale(0.95); }
    50% { opacity: 1; transform: scale(1.05); }
}

.tv-wall__error {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 1.1rem;
    color: var(--pbi-muted);
}

/* Responsive — TV Wall multi-pantalla */
.tv-wall__content {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Header: pills en segunda fila en anchos medios (excepto broadcast TV) */
@media (max-width: 1480px) {
    .tv-wall:not(.tv-wall--broadcast) .tv-wall__brand {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .tv-wall:not(.tv-wall--broadcast) .tv-screen-pills {
        order: 3;
        flex: 1 1 100%;
        justify-content: center;
        max-width: none;
    }

    .tv-wall__clock {
        margin-left: auto;
    }

    .tv-screen-pills__pill {
        padding: 5px 11px;
        font-size: 0.64rem;
        flex-shrink: 0;
    }
}

/* Pantallas 4:3 y altura limitada */
@media (max-aspect-ratio: 4/3) {
    .tv-wall {
        padding: clamp(6px, 0.8vh, 12px) clamp(8px, 1vw, 14px);
        gap: clamp(4px, 0.6vh, 8px);
    }

    .tv-leaderboard__stage {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1.1fr) minmax(0, 1fr);
    }

    .tv-metrics-deck__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(6px, 0.8vw, 10px);
    }

    .tv-seller-detail__layout {
        grid-template-columns: minmax(240px, 34%) minmax(0, 1fr);
    }

    .tv-ops-card__value {
        font-size: clamp(2.75rem, 11vh, 6.5rem);
    }

    .tv-chart-card--counters .tv-pano-comparison__value,
    .tv-metric-tile--counters .tv-pano-comparison__value {
        font-size: clamp(2.5rem, 12vh, 6rem);
    }
}

@media (max-height: 780px) {
    .tv-wall {
        padding: 6px 10px;
        gap: 4px;
    }

    .tv-wall__brand {
        padding: 6px 12px;
    }

    .tv-wall__logo {
        width: clamp(36px, 5vh, 52px);
    }

    .tv-wall__brand-text h1 {
        font-size: clamp(0.95rem, 2.2vh, 1.2rem);
    }

    .tv-wall__brand-text p {
        font-size: 0.72rem;
    }

    .tv-screen-pills__pill {
        padding: 4px 9px;
        font-size: 0.58rem;
    }

    .tv-leaderboard__stage {
        gap: 6px;
    }

    .tv-seller-detail__photo-stage {
        min-height: clamp(150px, 26vh, 240px);
    }

    .tv-seller-detail__charts {
        gap: 8px;
    }

    .tv-ops-card {
        padding: clamp(12px, 2vh, 24px);
    }

    .tv-ops-card__value {
        font-size: clamp(2.25rem, 10vh, 5.5rem);
    }

    .tv-chart-card--counters .tv-pano-comparison__value,
    .tv-metric-tile--counters .tv-pano-comparison__value {
        font-size: clamp(2rem, 10vh, 5rem);
    }

    .tv-metrics-deck__grid {
        gap: 8px;
    }

    .tv-celebration-hero__title {
        font-size: clamp(2rem, 8vh, 3.5rem);
    }
}

/* Portrait / móvil horizontal estrecho */
@media (orientation: portrait) and (max-width: 1100px) {
    .tv-wall__brand {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    .tv-wall__logo {
        width: clamp(40px, 8vw, 56px);
    }

    .tv-screen-pills {
        order: 3;
        flex: 1 1 100%;
        justify-content: flex-start;
    }

    .tv-wall__clock {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }

    .tv-leaderboard__stage,
    .tv-seller-detail__layout {
        grid-template-columns: 1fr;
    }

    .tv-metrics-deck__grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, minmax(0, 1fr));
    }

    .tv-ops-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1200px) {
    .tv-wall__kpi-row,
    .tv-wall__kpi-row--compact {
        grid-template-columns: repeat(2, 1fr);
    }

    .tv-wall__metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tv-metrics-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .tv-metrics-command-bar {
        grid-template-columns: 1fr;
        max-height: none;
    }

    .tv-metrics-command-bar__kpis {
        grid-template-columns: repeat(2, 1fr);
    }

    .tv-metrics-command-bar__avg {
        justify-self: end;
    }

    .tv-leaderboard__stage {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1.2fr) minmax(0, 1fr);
    }

    .tv-metrics-deck__grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, minmax(0, 1fr));
    }

    .tv-metrics-kpi-strip {
        grid-template-columns: repeat(3, 1fr);
    }

    .tv-wall__main {
        grid-template-columns: 1fr;
    }

    .tv-podium__arena {
        grid-template-columns: 1fr 1.12fr 1fr;
        gap: 8px;
    }

    .tv-seller-detail__layout {
        grid-template-columns: 1fr;
    }

    .tv-seller-detail__photo-stage {
        min-height: clamp(200px, 28vh, 320px);
    }

    .tv-ops-grid {
        gap: clamp(8px, 1.2vw, 14px);
    }

    .tv-goal-board__row,
    .tv-leaderboard-chase__row {
        grid-template-columns: 28px 40px minmax(0, 1fr) auto;
        gap: 8px;
        min-height: clamp(56px, 14cqh, 88px);
    }

    .tv-goal-board__portrait .tv-portrait__ring,
    .tv-leaderboard-chase__portrait .tv-portrait__ring {
        width: 40px;
        height: 40px;
    }
}

@container tv-chase-panel (max-width: 400px) {
    .tv-leaderboard-chase__row {
        grid-template-columns: 28px 36px minmax(0, 1fr) auto;
        gap: 6px;
        padding: 6px 8px;
    }

    .tv-leaderboard-chase__stats {
        display: none;
    }
}

@container tv-goal-board (max-width: 520px) {
    .tv-goal-board__row {
        grid-template-columns: 24px 36px minmax(0, 1fr) 44px 22px;
        gap: 6px;
    }

    .tv-goal-board__portrait .tv-portrait__ring {
        width: 36px;
        height: 36px;
    }
}

@container tv-screens (max-height: 680px) {
    .tv-leaderboard__podium-label,
    .tv-leaderboard-chase__meta {
        display: none;
    }

    .tv-seller-detail__quick-stats {
        gap: 4px;
    }
}

@media (max-width: 900px) {
    .tv-ops-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(2, minmax(0, 1fr));
    }

    .tv-ops-card__value--name {
        font-size: clamp(1.2rem, 4.5vh, 2rem);
    }
}

@media (max-width: 768px) {
    .tv-wall__kpi-row,
    .tv-wall__kpi-row--compact {
        grid-template-columns: 1fr;
    }

    .tv-wall__metrics-grid {
        grid-template-columns: 1fr;
    }

    .tv-progress-trio {
        gap: 4px;
    }

    .tv-seller-detail__layout {
        grid-template-columns: 1fr;
    }

    .tv-seller-detail__charts {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, minmax(0, 1fr));
        overflow-y: auto;
        scrollbar-width: thin;
    }

    .tv-ops-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, minmax(0, 1fr));
    }

    .tv-seller-detail__kpi-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .tv-metrics-summary {
        grid-template-columns: 1fr;
    }

    .tv-metrics-kpi-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .tv-comparison-bars__row {
        grid-template-columns: 24px 1fr 56px;
    }

    .tv-comparison-bars__seller {
        grid-column: 2 / -1;
    }

    .tv-comparison-bars__track {
        grid-column: 2 / 3;
    }

    .tv-chart-card__body--donut {
        flex-direction: column;
        text-align: center;
    }

    .tv-wall__brand-text h1 {
        font-size: 1rem;
    }

    .tv-wall__clock-sync {
        display: none;
    }

    .tv-celebration-hero__trophy {
        display: none;
    }

    .tv-ranking__row {
        grid-template-columns: 28px 36px 1fr 40px;
    }

    .tv-seller-performance {
        grid-template-columns: repeat(2, 1fr);
    }

    .tv-seller-performance--ranking {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1920px) {
    .tv-wall {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: clamp(12px, 1.2vh, 20px) clamp(20px, 2vw, 48px);
    }

    .tv-wall__brand-text h1 {
        font-size: clamp(1.25rem, 1.4vw, 1.65rem);
    }
}

@media (min-width: 2560px) {
    .tv-wall {
        padding: clamp(16px, 1.4vh, 28px) clamp(28px, 2.5vw, 64px);
    }

    .tv-screen-pills__pill {
        padding: 8px 18px;
        font-size: 0.78rem;
    }
}

/* ===== Modo broadcast / TV panorámico (~3 m) ===== */
.tv-wall--broadcast {
    --tv-text-label: clamp(1.35rem, 3vh, 2.15rem);
    --tv-text-micro: clamp(1.15rem, 2.5vh, 1.75rem);
    --tv-text-heading: clamp(1.65rem, 3.8vh, 2.75rem);
    padding: clamp(4px, 0.6vh, 10px) clamp(8px, 1vw, 16px);
    gap: clamp(4px, 0.5vh, 8px);
}

.tv-wall--broadcast .tv-wall__brand {
    padding: clamp(4px, 0.6vh, 8px) clamp(10px, 1.2vw, 16px);
    flex-wrap: nowrap;
    align-items: center;
    gap: clamp(8px, 1vw, 16px);
}

.tv-wall--broadcast .tv-wall__brand-text {
    display: flex;
    align-items: baseline;
    gap: 0.6em;
    flex-shrink: 0;
    min-width: 0;
}

.tv-wall--broadcast .tv-wall__brand-text h1 {
    font-size: var(--tv-text-heading);
    white-space: nowrap;
}

.tv-wall--broadcast .tv-wall__brand-text p {
    font-size: var(--tv-text-micro);
    margin: 0;
    white-space: nowrap;
}

.tv-wall--broadcast .tv-wall__clock-time {
    font-size: var(--tv-text-label);
}

.tv-wall--broadcast .tv-wall__clock-sync {
    font-size: var(--tv-text-micro);
}

.tv-wall--broadcast .tv-screen {
    padding: clamp(6px, 0.8vh, 10px) clamp(8px, 1vw, 12px);
}

.tv-wall--broadcast .tv-metrics-deck-dots {
    margin: 0;
    padding: 2px 0 0;
    gap: 6px;
}

.tv-wall--broadcast .tv-seller-detail__photo-stage {
    min-height: clamp(220px, 58vh, 420px);
}

.tv-wall--broadcast .tv-podium__floor {
    height: clamp(4px, 0.8vh, 8px);
}

.tv-wall--broadcast .tv-podium__platform-body {
    min-height: clamp(28px, 5.5vh, 56px);
}

.tv-wall--broadcast .tv-screen-pills__pill {
    font-size: clamp(0.62rem, 1.05vh, 0.78rem);
    padding: clamp(4px, 0.45vh, 6px) clamp(10px, 0.9vw, 14px);
    letter-spacing: 0.04em;
}

.tv-wall--broadcast .tv-screen-pills {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
    order: unset;
}

.tv-wall--broadcast .tv-wall__clock {
    margin-left: auto;
    flex-shrink: 0;
    flex-wrap: nowrap;
    align-items: center;
}

.tv-wall--broadcast .tv-fullscreen-btn {
    width: clamp(34px, 4vh, 44px);
    height: clamp(34px, 4vh, 44px);
    border-width: 2px;
    box-shadow: 0 0 0 2px rgba(255, 204, 33, 0.12);
}

.tv-wall--broadcast .tv-fullscreen-btn i {
    font-size: var(--tv-text-label);
}

.tv-wall--broadcast .tv-ops-card__label {
    font-size: clamp(1.75rem, 4.2vh, 3rem);
    letter-spacing: 0.12em;
}

.tv-wall--broadcast .tv-ops-indicator__label {
    font-size: clamp(1.35rem, 3.2vh, 2.2rem);
}

.tv-wall--broadcast .tv-ops-card__chip {
    font-size: clamp(1.1rem, 2.4vh, 1.65rem);
    padding: clamp(6px, 0.9vh, 12px) clamp(14px, 1.6vw, 22px);
}

.tv-wall--broadcast .tv-ops-card__chip--muted {
    font-size: clamp(1rem, 2.2vh, 1.5rem);
}

.tv-wall--broadcast .tv-metric-tile--counters .tv-pano-comparison__label,
.tv-wall--broadcast .tv-chart-card--counters .tv-pano-comparison__label {
    font-size: clamp(1.5rem, 3.5vh, 2.5rem);
}

.tv-wall--broadcast .tv-metric-tile--counters .tv-pano-comparison__bar-label,
.tv-wall--broadcast .tv-chart-card--counters .tv-pano-comparison__bar-label {
    font-size: clamp(1.2rem, 2.8vh, 2rem);
}

.tv-ops-card--leader-compact .tv-ops-card__value {
    font-size: var(--tv-counter-lg);
}

.tv-ops-card__chip--muted {
    color: var(--pbi-muted);
    background: rgba(255, 255, 255, 0.05);
    font-weight: 600;
}

.tv-seller-detail__quick-stats--compact {
    grid-template-columns: 1fr;
    justify-items: center;
}

.tv-seller-detail__quick-stats--compact .tv-seller-detail__quick-stat-value {
    font-size: var(--tv-text-title);
}

.tv-seller-detail__name {
    font-size: var(--tv-text-title);
}

.tv-seller-detail__rank,
.tv-seller-detail__trend {
    font-size: var(--tv-text-label);
}

.tv-seller-semaphore__title {
    font-size: var(--tv-text-label);
}

.tv-seller-semaphore__pct {
    font-size: var(--tv-text-heading);
}

.tv-seller-semaphore__status {
    font-size: var(--tv-text-body);
}

.tv-leaderboard-chase__sales {
    font-size: var(--tv-text-heading);
}

.tv-leaderboard-chase__sales-label {
    font-size: var(--tv-text-micro);
}

.tv-leaderboard__meta {
    font-size: var(--tv-text-label);
}

.tv-pano-comparison__value {
    font-size: var(--tv-counter-md);
}

.tv-pano-comparison__label {
    font-size: var(--tv-text-heading);
}

.tv-pano-comparison__sub {
    font-size: var(--tv-text-micro);
}

@media (min-width: 1920px) {
    .tv-wall--broadcast {
        padding: clamp(6px, 0.8vh, 12px) clamp(12px, 1.5vw, 24px);
    }
}

/* ── Animaciones TV: contadores y gráficos ── */
.tv-animated-count {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    transform-origin: center bottom;
}

.tv-animated-count--rolling {
    animation: tvCountRollPulse 1.15s ease-out;
}

@keyframes tvCountRollPulse {
    0% {
        transform: translateY(0.55em) scale(0.86);
        opacity: 0.35;
        filter: blur(2px);
    }
    40% {
        transform: translateY(-0.12em) scale(1.06);
        opacity: 1;
        filter: blur(0);
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.tv-pano-apex--enter {
    animation: tvChartEnter 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.tv-pano-hbars--enter .tv-pano-hbars__row {
    animation: tvHbarRowEnter 0.95s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.tv-pano-hbars--enter .tv-pano-hbars__row:nth-child(1) { animation-delay: 0.05s; }
.tv-pano-hbars--enter .tv-pano-hbars__row:nth-child(2) { animation-delay: 0.15s; }
.tv-pano-hbars--enter .tv-pano-hbars__row:nth-child(3) { animation-delay: 0.25s; }

@keyframes tvChartEnter {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes tvHbarRowEnter {
    from {
        opacity: 0;
        transform: translateX(-16px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.tv-pano-comparison__bar-fill,
.tv-seller-semaphore__fill,
.tv-goal-board__bar-fill {
    transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.tv-mini-gauge__track-fill {
    transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
    .tv-animated-count--rolling,
    .tv-pano-apex--enter,
    .tv-pano-hbars--enter .tv-pano-hbars__row {
        animation: none !important;
    }

    .tv-pano-comparison__bar-fill,
    .tv-seller-semaphore__fill,
    .tv-goal-board__bar-fill,
    .tv-pano-hbars__fill,
    .tv-mini-gauge__track-fill {
        transition: none !important;
    }
}

/* ==========================================================================
   NUEVOS COMPONENTES: COLUMNAS OPERATIVAS, SEMÁFORO Y ANIMACIÓN PREMIUM
   ========================================================================== */

/* 1. Tarjeta del Líder Compacta */
.tv-ops-card--leader-compact {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    text-align: left;
    padding: clamp(14px, 2.5vh, 24px);
    background: linear-gradient(135deg, rgba(255, 204, 33, 0.08), rgba(255, 255, 255, 0.02));
    border-color: rgba(255, 204, 33, 0.22);
}
.tv-ops-card__leader-layout {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.8vw, 18px);
}
.tv-ops-card__leader-avatar {
    flex-shrink: 0;
}
.tv-ops-card__leader-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.tv-ops-card__leader-name {
    font-size: var(--tv-text-heading);
    font-weight: 800;
    margin: 0;
    color: var(--pbi-accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tv-ops-card__leader-subtitle {
    font-size: var(--tv-text-micro);
    color: var(--pbi-muted);
    /* text-transform removed */
    letter-spacing: 0.05em;
}
.tv-ops-card__leader-stats {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: clamp(8px, 1.5vh, 14px);
}

/* 2. Resumen Operativo: Distribución en Columnas Separadas */
.tv-ops-card--operational-details {
    padding: clamp(12px, 2vh, 22px) !important;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
}
.tv-ops-details-split {
    display: flex;
    height: 100%;
    width: 100%;
    gap: clamp(16px, 2.5vw, 36px);
}
.tv-ops-branches-column,
.tv-ops-feed-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    text-align: left;
}
.tv-ops-column-title {
    font-size: var(--tv-text-label);
    font-weight: 700;
    /* text-transform removed */
    letter-spacing: 0.06em;
    color: var(--pbi-text);
    margin: 0 0 clamp(8px, 1.5vh, 16px);
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 6px;
}
.tv-ops-column-title i {
    color: var(--pbi-accent);
}
.tv-ops-details-divider {
    width: 1px;
    background: rgba(255, 255, 255, 0.08);
    align-self: stretch;
}

/* Sucursales (Sedes) */
.tv-ops-branches-list {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1.2vh, 12px);
    flex: 1;
    overflow-y: auto;
}
.tv-ops-branch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(6px, 1.2vh, 12px) clamp(10px, 1.5vw, 16px);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.tv-ops-branch-row:hover {
    border-color: rgba(255, 204, 33, 0.15);
    background: rgba(255, 204, 33, 0.02);
}
.tv-ops-branch-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.tv-ops-branch-name {
    font-size: var(--tv-text-body);
    font-weight: 700;
    color: var(--pbi-text);
}
.tv-ops-branch-today {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--tv-text-micro);
    font-weight: 700;
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    white-space: nowrap;
}
.tv-ops-branch-count {
    font-size: var(--tv-text-heading);
    font-weight: 800;
    color: var(--pbi-accent);
    font-variant-numeric: tabular-nums;
}

/* Actividad en Vivo (Últimas Ventas) */
.tv-ops-feed-list {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1.2vh, 12px);
    flex: 1;
    overflow-y: auto;
}
.tv-ops-feed-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
    color: var(--pbi-muted);
    font-size: var(--tv-text-body);
}
.tv-ops-feed-row {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1.2vw, 14px);
    padding: clamp(6px, 1vh, 10px);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    animation: slideUpFeed 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.tv-ops-feed-avatar {
    flex-shrink: 0;
    width: clamp(28px, 3.5vh, 42px) !important;
    height: clamp(28px, 3.5vh, 42px) !important;
}
.tv-ops-feed-avatar .tv-portrait__ring {
    width: 100% !important;
    height: 100% !important;
}
.tv-ops-feed-body {
    flex: 1;
    min-width: 0;
}
.tv-ops-feed-text {
    font-size: var(--tv-text-micro);
    color: var(--pbi-text);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tv-ops-feed-text strong {
    color: var(--pbi-accent);
    font-weight: 700;
}
.tv-ops-feed-time {
    font-size: var(--tv-text-micro);
    color: var(--pbi-muted);
    font-variant-numeric: tabular-nums;
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

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

.tv-ops-feed-pulse {
    animation: tvPulseLive 1.5s infinite ease-in-out;
}
@keyframes tvPulseLive {
    0%, 100% { color: #f87171; opacity: 1; }
    50% { color: #dc2626; opacity: 0.6; }
}

/* 3. Semáforo de Cumplimiento (Detalle Vendedor) */
.tv-traffic-light-wrapper {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2.5vh, 24px);
    width: 100%;
    height: auto;
    flex: 1;
    min-height: 0;
}

.tv-traffic-light-bar {
    position: relative;
    height: clamp(16px, 2.5vh, 26px);
    border-radius: 999px;
    overflow: visible;
    display: flex;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin: clamp(15px, 2.5vh, 25px) 30px clamp(20px, 3vh, 30px);
}
.tv-traffic-light-segment {
    height: 100%;
}
.tv-traffic-light-segment--red {
    width: 50%;
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.25));
    border-right: 1px dashed rgba(239, 68, 68, 0.4);
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
}
.tv-traffic-light-segment--yellow {
    width: 30%;
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.25));
    border-right: 1px dashed rgba(245, 158, 11, 0.4);
}
.tv-traffic-light-segment--green {
    width: 20%;
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.25));
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
}

.tv-traffic-light-bar--split {
    overflow: visible;
    display: block;
    position: relative;
    height: clamp(16px, 2.5vh, 26px);
    background: transparent;
    box-shadow: none;
    border: none;
}

.tv-traffic-light-bar__track {
    position: absolute;
    inset: 0;
    display: flex;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.tv-traffic-light-bar--split .tv-traffic-light-segment {
    width: auto;
    min-width: 0;
}

.tv-traffic-light-wrapper--returns-compare {
    overflow: visible;
}

.tv-traffic-light-wrapper--returns-compare .tv-traffic-light-bar {
    position: relative;
    margin: clamp(15px, 2.5vh, 25px) 30px clamp(20px, 3vh, 30px);
}

.tv-traffic-light-segment--sales {
    background: linear-gradient(90deg, rgba(255, 204, 33, 0.22), rgba(255, 204, 33, 0.38));
    border-right: 1px dashed rgba(255, 204, 33, 0.45);
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
}

.tv-traffic-light-segment--returns {
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.35));
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
}

.tv-traffic-light-compare-legend {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 0 clamp(24px, 4vw, 30px);
    font-size: clamp(0.65rem, 1vh, 0.78rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tv-traffic-light-compare-legend__item--sales {
    color: var(--pbi-accent);
}

.tv-traffic-light-compare-legend__item--returns {
    color: #f87171;
}

.tv-traffic-light-pin {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(34px, 4.8vh, 44px);
    height: clamp(34px, 4.8vh, 44px);
    border-radius: 50%;
    background: #16181d;
    border: 3px solid var(--pbi-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 16px rgba(255, 204, 33, 0.5), inset 0 1px 3px rgba(255, 255, 255, 0.2);
    z-index: 10;
    transition: left 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tv-traffic-light-pin-value {
    font-size: clamp(0.72rem, 1.25vh, 0.85rem);
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.tv-traffic-light-pin--over,
.tv-traffic-light-pin--success,
.tv-traffic-light-pin--ok,
.tv-traffic-light-pin--green {
    border-color: #10b981;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.7), inset 0 1px 3px rgba(255, 255, 255, 0.2);
}
.tv-traffic-light-pin--warn {
    border-color: #f59e0b;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.7), inset 0 1px 3px rgba(255, 255, 255, 0.2);
}
.tv-traffic-light-pin--alert {
    border-color: #ef4444;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.7), inset 0 1px 3px rgba(255, 255, 255, 0.2);
}

.tv-traffic-light-scroll-container {
    flex: 1;
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(to bottom, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 5%, black 95%, transparent);
}

.tv-traffic-light-criteria {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(8px, 1.5vh, 14px);
    width: 100%;
    animation: tvCriteriaScroll 15s linear infinite alternate;
}

.tv-traffic-light-scroll-container:hover .tv-traffic-light-criteria {
    animation-play-state: paused;
}

@keyframes tvCriteriaScroll {
    0%, 15% { transform: translateY(0); }
    85%, 100% { transform: translateY(calc(-100% + 140px)); }
}
.tv-traffic-light-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: clamp(8px, 1.4vh, 12px) clamp(10px, 1.8vh, 14px);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    transition: border-color 0.3s ease, background 0.3s ease;
}
.tv-traffic-light-item--earned {
    border-color: rgba(16, 185, 129, 0.15);
    background: rgba(16, 185, 129, 0.03);
}
.tv-traffic-light-lamp {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #0b0f19;
    border: 2px solid #1e293b;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8);
}
.tv-traffic-light-bulb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}
.tv-traffic-light-bulb--green {
    background: #10b981;
    box-shadow: 0 0 10px #10b981, inset 0 1px 1px rgba(255, 255, 255, 0.5);
}
.tv-traffic-light-bulb--red {
    background: #ef4444;
    box-shadow: 0 0 10px #ef4444, inset 0 1px 1px rgba(255, 255, 255, 0.5);
}
.tv-traffic-light-desc {
    display: flex;
    flex-direction: column;
    min-width: 0;
    text-align: left;
}
.tv-traffic-light-label {
    font-size: var(--tv-text-body);
    font-weight: 700;
    color: var(--pbi-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tv-traffic-light-hint {
    font-size: var(--tv-text-micro);
    color: var(--pbi-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 4. Mejoras de Celebración Premium */
.tv-celebration__panel {
    position: relative;
    border: 2px solid transparent !important;
    background-image: linear-gradient(var(--pbi-canvas), var(--pbi-canvas)), 
                      linear-gradient(135deg, #FFCC21, #FFE566, #ff7e40, #FFCC21) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    box-shadow: 0 0 45px rgba(255, 204, 33, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    animation: borderGlowFlow 4s linear infinite;
    background-size: 300% 300% !important;
}

@keyframes borderGlowFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Rayos de sol acelerados giratorios */
.tv-celebration-hero__rays {
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle, transparent 30%, rgba(22, 24, 29, 0.95) 75%),
                repeating-conic-gradient(from 0deg, rgba(255, 204, 33, 0.08) 0deg 15deg, transparent 15deg 30deg) !important;
    animation: rotateSunrays 12s linear infinite !important;
    z-index: 1;
    pointer-events: none;
}
@keyframes rotateSunrays {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Doble Halo Sonar Concéntrico */
.tv-celebration-hero__ring-halo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(200px, 32vh, 320px);
    height: clamp(200px, 32vh, 320px);
    transform: translate(-50%, -50%) scale(0.9);
    border: 2px solid rgba(255, 204, 33, 0.4);
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
    animation: sonarPulse 3s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.tv-celebration-hero__ring-halo--outer {
    width: clamp(200px, 32vh, 320px);
    height: clamp(200px, 32vh, 320px);
    border-color: rgba(255, 126, 64, 0.35);
    animation: sonarPulse 3s cubic-bezier(0.16, 1, 0.3, 1) infinite;
    animation-delay: 1.5s;
}
@keyframes sonarPulse {
    0% {
        transform: translate(-50%, -50%) scale(0.95);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.65);
        opacity: 0;
        border-width: 4px;
    }
}

/* Brillo continuo del título */
.tv-celebration-hero__title {
    position: relative;
    color: #fff;
    background: linear-gradient(135deg, #fff 20%, #FFE566 45%, #FFCC21 50%, #FFE566 55%, #fff 80%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shineText 3.5s linear infinite;
    text-shadow: 0 0 25px rgba(255, 204, 33, 0.2);
}
@keyframes shineText {
    to { background-position: 200% center; }
}

/* Impacto y vibración del contador al finalizar */
.tv-celebration-hero--counter-landed .tv-celebration-hero__counter-tile {
    animation: counterLandedShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}
@keyframes counterLandedShake {
    10%, 90% { transform: translate3d(-1px, 0, 0) scale(1.05); }
    20%, 80% { transform: translate3d(2px, 0, 0) scale(1.05); }
    30%, 50%, 70% { transform: translate3d(-3px, 0, 0) scale(1.08); box-shadow: 0 0 30px rgba(255, 204, 33, 0.8); }
    40%, 60% { transform: translate3d(3px, 0, 0) scale(1.08); }
    100% { transform: translate3d(0, 0, 0) scale(1.02); }
}

/* ==========================================================================
   MEJORAS DE RESPONSIVIDAD Y PREVENCIÓN DE DESBORDES (Laptops y TVs de 40")
   ========================================================================== */

/* 1. Ajustes globales de altura y contención */
.tv-wall {
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
}

.tv-screen {
    max-height: 100%;
    overflow: hidden;
}

/* 2. Blindaje contra desbordes en el Resumen Operativo */
.tv-ops-details-split {
    min-height: 0;
}

.tv-ops-branches-column,
.tv-ops-feed-column {
    min-height: 0;
}

.tv-ops-branches-list,
.tv-ops-feed-list {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    max-height: 100%;
    scrollbar-width: none; /* Firefox */
}
.tv-ops-branches-list::-webkit-scrollbar,
.tv-ops-feed-list::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* Reducir gaps y paddings en pantallas de baja altura (Laptops, viewports pequeños) */
@media (max-height: 800px) {
    .tv-wall {
        padding: 6px 10px;
        gap: 6px;
    }
    
    .tv-wall__brand {
        padding: 4px 10px;
        gap: 10px;
    }
    
    .tv-ops-grid {
        gap: 8px;
    }
    
    .tv-ops-card {
        padding: clamp(10px, 1.5vh, 18px);
        gap: clamp(6px, 1vh, 12px);
    }
    
    .tv-ops-card__icon {
        font-size: 1.8rem;
    }
    
    .tv-ops-card__value {
        font-size: clamp(2rem, 7vh, 4rem);
    }
    
    .tv-ops-card__label {
        font-size: 0.9rem;
    }

    .tv-ops-card--operational-details {
        padding: 8px 12px !important;
    }

    .tv-ops-column-title {
        font-size: var(--tv-text-body);
        margin-bottom: 6px;
    }

    .tv-ops-branch-row,
    .tv-ops-feed-row {
        padding: 4px 8px;
        gap: 8px;
    }

    .tv-ops-branch-count {
        font-size: 1.1rem;
    }

    .tv-ops-feed-text {
        font-size: 0.75rem;
    }
}

/* 3. Ajustes de la Pantalla de Detalle de Vendedor */
.tv-seller-detail__profile-card {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    min-height: 0;
}
.tv-seller-detail__profile-card::-webkit-scrollbar {
    display: none;
}

.tv-seller-detail__main {
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

/* En resoluciones medias y laptops, permitimos que el grid de charts se adapte sin cortarse */
@media (max-width: 1366px), (max-height: 820px) {
    .tv-seller-detail__layout {
        grid-template-columns: 280px 1fr;
        gap: 10px;
    }
    
    .tv-seller-detail__photo-stage {
        min-height: 140px;
    }
    
    .tv-portrait--seller-hero {
        --tv-portrait-hero-size: 100px;
    }
    
    .tv-seller-semaphore {
        padding: 6px;
        gap: 4px;
    }
    
    .tv-seller-semaphore__title {
        font-size: 0.8rem;
    }
    
    .tv-seller-semaphore__pct {
        font-size: 1.1rem;
    }
    
    .tv-seller-detail__quick-stats--compact .tv-seller-detail__quick-stat-value {
        font-size: 1.1rem;
    }

    .tv-chart-card--panorama {
        padding: 8px !important;
    }

    /* Reducir tamaño de las comparaciones para que quepan */
    .tv-pano-comparison__value {
        font-size: 1.8rem !important;
    }
    
    .tv-pano-comparison__label {
        font-size: 0.8rem !important;
    }
}

/* Para pantallas aún más estrechas o laptops de baja resolución (1280x720, etc.) */
@media (max-width: 1100px) {
    .tv-seller-detail__layout {
        grid-template-columns: 1fr;
        overflow-y: auto;
        height: 100%;
    }
    
    .tv-seller-detail__profile-card {
        height: auto;
        min-height: 250px;
        overflow-y: visible;
    }
    
    .tv-seller-detail__main {
        height: auto;
        overflow: visible;
    }
    
    .tv-seller-detail__charts {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        height: auto;
        min-height: 400px;
        overflow: visible;
    }
}

/* 4. Optimización de la cuadrícula de métricas para Laptops */
@media (max-width: 1280px) {
    .tv-metrics-deck {
        overflow-y: auto;
        height: 100%;
        scrollbar-width: none;
    }
    .tv-metrics-deck::-webkit-scrollbar {
        display: none;
    }
    
    .tv-metrics-deck__grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        height: auto;
        gap: 12px;
        padding-bottom: 20px;
    }
    
    .tv-metric-tile {
        min-height: 200px;
        height: auto;
    }
    
    .tv-pano-split {
        flex-direction: row;
        align-items: center;
        gap: 15px;
    }
    
    .tv-pano-split__hero {
        min-width: 150px;
    }
}

/* ==========================================================================
   Nuevas pantallas de métricas (Purga de ApexCharts)
   ========================================================================== */

.tv-screen--metrics {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.tv-screen__title--metrics {
    margin-bottom: clamp(10px, 2.5vh, 20px) !important;
}

/* Grillas principales */
.tv-metrics-grid {
    flex: 1;
    min-height: 0;
}

.tv-metrics-grid--two {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(12px, 2vw, 24px);
    height: 100%;
}

.tv-metrics-grid--three {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(12px, 2vw, 24px);
    height: 100%;
}

.tv-metrics-grid--one {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(12px, 2vw, 24px);
    height: 100%;
}

/* Pantalla Pedidos y Clientes del Mes — layout vertical fluido (flex) */
.tv-screen--metrics-orders .tv-metrics-stage {
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 0.6vh, 10px);
    overflow: hidden;
}

.tv-screen--metrics-orders .tv-metrics-grid--orders-globals {
    flex: 1.1;
    min-height: 0;
    height: auto;
}

.tv-screen--metrics-orders .tv-metrics-grid--orders-branches,
.tv-screen--metrics-orders .tv-metrics-grid--customers-branches {
    flex: 0.95;
    min-height: 0;
    height: auto;
}

.tv-screen--metrics-orders .tv-metrics-grid--orders-branches > .tv-metric-tile,
.tv-screen--metrics-orders .tv-metrics-grid--customers-branches > .tv-metric-tile {
    height: 100%;
    min-height: 0;
}

.tv-screen--metrics-orders .tv-metric-huge-value {
    font-size: clamp(2.5rem, 9vh, 5rem);
}

.tv-screen--metrics-orders .tv-metrics-grid--orders-branches .tv-metric-huge-value,
.tv-screen--metrics-orders .tv-metrics-grid--customers-branches .tv-metric-huge-value {
    font-size: clamp(1.5rem, 4vh, 2.5rem);
}

.tv-screen--metrics-orders .tv-metrics-grid--orders-branches .tv-metric-huge-label,
.tv-screen--metrics-orders .tv-metrics-grid--customers-branches .tv-metric-huge-label {
    font-size: clamp(0.65rem, 1.3vh, 0.85rem);
    margin-top: 2px;
}

.tv-screen--metrics-orders .tv-metrics-grid--orders-branches .tv-quote-split__counts,
.tv-screen--metrics-orders .tv-metrics-grid--customers-branches .tv-quote-split__counts {
    font-size: clamp(0.6rem, 1.2vh, 0.85rem);
}

/* Cascada defensiva contra desbordes en tarjetas de sedes (orders/customers) */
.tv-screen--metrics-orders .tv-metrics-grid--three .tv-metric-tile {
    overflow: hidden;
}

.tv-screen--metrics-orders .tv-metrics-grid--three .tv-metric-large-split {
    padding: clamp(4px, 0.8vh, 12px) clamp(8px, 1.5vw, 20px);
    gap: clamp(6px, 0.8vh, 12px);
}

.tv-screen--metrics-orders .tv-metrics-grid--three .tv-quote-split__track {
    height: clamp(4px, 0.8vh, 6px);
}

.tv-screen--metrics-orders .tv-metrics-grid--three .tv-metric-large-split > div {
    min-height: 0;
}

/* Cartera de Clientes global: ajuste panorámico compacto */
.tv-screen--metrics-orders .tv-metric-tile--panorama .tv-pano-comparison {
    flex: none;
    min-height: 0;
    gap: clamp(4px, 0.8vw, 12px);
}

.tv-screen--metrics-orders .tv-metric-tile--panorama .tv-pano-comparison__value {
    font-size: clamp(1.8rem, 5vh, 2.8rem);
}

.tv-screen--metrics-orders .tv-metric-tile--panorama .tv-pano-comparison__label {
    font-size: clamp(0.65rem, 1.3vh, 0.85rem);
    margin-top: 2px;
}

.tv-screen--metrics-orders .tv-metric-tile--panorama .tv-pano-comparison__sub {
    font-size: clamp(0.5rem, 0.9vh, 0.7rem);
}

.tv-screen--metrics-orders .tv-metric-tile--panorama .tv-metric-detailed-card {
    padding: clamp(4px, 0.8vh, 12px) 0;
    justify-content: center;
    gap: clamp(8px, 1.5vh, 16px);
}

.tv-screen--metrics-orders .tv-metric-tile--panorama .tv-metric-huge-display {
    margin-bottom: 0;
}

.tv-screen--metrics-orders .tv-metric-tile--panorama .tv-metric-huge-value {
    font-size: clamp(2rem, 6vh, 3.5rem);
}

.tv-screen--metrics-orders .tv-metric-tile--panorama .tv-metric-sub-stats {
    margin: clamp(2px, 0.4vh, 8px) 0;
    gap: clamp(8px, 1.5vw, 16px);
}

.tv-screen--metrics-orders .tv-metric-tile--panorama .tv-metric-sub-value {
    font-size: clamp(1.8rem, 4.5vh, 3rem);
}

.tv-screen--metrics-orders .tv-metric-tile--panorama .tv-metric-sub-label {
    font-size: var(--tv-text-micro);
}

.tv-screen--metrics-orders .tv-metric-tile--panorama .tv-traffic-light-wrapper {
    margin-top: clamp(4px, 0.6vh, 10px) !important;
}

/* Detalle de tarjeta métrica */
.tv-metric-detailed-card {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 100%;
    padding: clamp(10px, 1.5vh, 20px) 0;
}

.tv-metric-huge-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.tv-metric-huge-value {
    font-size: clamp(4rem, 14vh, 7.5rem);
    font-weight: 800;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.tv-metric-huge-value--success,
.tv-metric-huge-value--ok {
    color: #4ade80; /* Green */
}

.tv-metric-huge-value--warn {
    color: #fbbf24; /* Yellow */
}

.tv-metric-huge-value--alert {
    color: #ef4444; /* Red */
}

.tv-metric-huge-label {
    font-size: clamp(1.2rem, 3.5vh, 2rem);
    color: var(--pbi-muted);
    font-weight: 600;
    margin-top: 6px;
    letter-spacing: 0.05em;
}

.tv-metric-sub-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-size: var(--tv-text-heading);
    font-weight: 700;
    margin: clamp(8px, 1.5vh, 20px) 0;
}

.tv-metric-sub-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tv-metric-sub-value {
    font-size: clamp(2.5rem, 6vh, 4rem);
    color: var(--pbi-text);
    font-variant-numeric: tabular-nums;
}

.tv-metric-sub-label {
    font-size: var(--tv-text-micro);
    color: var(--pbi-muted);
    font-weight: 600;
    /* text-transform removed */
}

.tv-metric-sub-divider {
    font-size: 2.2rem;
    color: rgba(255, 255, 255, 0.15);
    align-self: center;
}

/* Barra de progreso */
.tv-metric-progress-wrapper {
    width: 100%;
    padding: 0 clamp(20px, 3vw, 40px);
}

.tv-metric-progress-track {
    height: 16px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}

.tv-metric-progress-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.tv-metric-progress-fill--success,
.tv-metric-progress-fill--ok {
    background: linear-gradient(90deg, #16a34a, #4ade80);
    box-shadow: 0 0 12px rgba(74, 222, 128, 0.4);
}

.tv-metric-progress-fill--warn {
    background: linear-gradient(90deg, #d97706, #fbbf24);
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.4);
}

.tv-metric-progress-fill--alert {
    background: linear-gradient(90deg, #dc2626, #ef4444);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
}

/* Sedes summary style */
.tv-metrics-branches-summary {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(10px, 2vh, 24px);
    height: 100%;
    padding: 0 clamp(10px, 2vw, 30px);
}

.tv-metrics-branch-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(8px, 1.5vh, 18px) clamp(12px, 1.5vw, 24px);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.tv-metrics-branch-block:hover {
    transform: translateX(6px);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

.tv-metrics-branch-name {
    font-size: var(--tv-text-body);
    font-weight: 700;
    color: var(--pbi-text);
}

.tv-metrics-branch-value {
    font-size: clamp(1.8rem, 3.5vh, 2.5rem);
    font-weight: 800;
    color: var(--pbi-accent);
    font-variant-numeric: tabular-nums;
}

.tv-metrics-branch-today {
    font-size: var(--tv-text-micro);
    color: #4ade80;
    background: rgba(74, 222, 128, 0.15);
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
    margin-left: 10px;
}

/* Cotizaciones Split */
.tv-metric-large-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(16px, 3vw, 40px);
    align-items: center;
    height: 100%;
    padding: clamp(10px, 2vh, 24px) clamp(20px, 3vw, 50px);
}

.tv-metric-large-value-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding-right: clamp(16px, 3vw, 40px);
}

.tv-metric-large-details-side {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 2.5vh, 24px);
}

.tv-metric-detail-block {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2vw, 24px);
    padding: clamp(8px, 1.5vh, 18px) clamp(12px, 1.5vw, 24px);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
}

.tv-metric-detail-block--green {
    border-left: 6px solid #22c55e;
}

.tv-metric-detail-block--yellow {
    border-left: 6px solid #eab308;
}

.tv-metric-detail-count {
    font-size: clamp(3rem, 7vh, 4.5rem);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.tv-metric-detail-block--green .tv-metric-detail-count { color: #4ade80; }
.tv-metric-detail-block--yellow .tv-metric-detail-count { color: #fbbf24; }

.tv-metric-detail-text {
    font-size: var(--tv-text-body);
    font-weight: 600;
    color: var(--pbi-muted);
}

.tv-metric-split-progress-track {
    display: flex;
    height: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 999px;
    overflow: hidden;
    margin: 0 clamp(20px, 3vw, 50px) clamp(10px, 2vh, 24px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.tv-metric-split-progress-fill {
    height: 100%;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.tv-metric-split-progress-fill--green {
    background: linear-gradient(90deg, #15803d, #22c55e);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.tv-metric-split-progress-fill--yellow {
    background: linear-gradient(90deg, #a16207, #eab308);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Seller detail goals styles */
.tv-seller-goals-detail {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 10px;
}

.tv-seller-goals-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.tv-seller-goals-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tv-seller-goals-stat-value {
    font-size: clamp(2.2rem, 5vh, 4rem);
    font-weight: 800;
    color: var(--pbi-text);
    font-variant-numeric: tabular-nums;
}

.tv-seller-goals-stat-label {
    font-size: var(--tv-text-micro);
    color: var(--pbi-muted);
    font-weight: 600;
    /* text-transform removed */
}

.tv-seller-goals-stat-divider {
    font-size: 2.8rem;
    color: rgba(255, 255, 255, 0.1);
    font-weight: 300;
}

.tv-seller-goals-progress-bar-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.tv-seller-goals-progress-bar-track {
    height: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.tv-seller-goals-progress-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 1s ease-out;
}

.tv-seller-goals-progress-bar-fill--success,
.tv-seller-goals-progress-bar-fill--ok,
.tv-seller-goals-progress-bar-fill--over {
    background: linear-gradient(90deg, #16a34a, #4ade80);
}

.tv-seller-goals-progress-bar-fill--warn {
    background: linear-gradient(90deg, #d97706, #fbbf24);
}

.tv-seller-goals-progress-bar-fill--alert {
    background: linear-gradient(90deg, #dc2626, #ef4444);
}

.tv-seller-goals-progress-meta {
    display: flex;
    justify-content: space-between;
    font-size: var(--tv-text-micro);
    font-weight: 600;
}

.tv-seller-goals-progress-percent {
    color: var(--pbi-accent);
}

.tv-seller-goals-progress-gap {
    color: var(--pbi-muted);
}




/* ====== Branch Ventas Screen ====== */
.tv-branch-ventas-stage {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: clamp(20px, 2.5vh, 32px);
}

.tv-branch-ventas-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: clamp(16px, 2vw, 32px);
    padding: clamp(18px, 2vh, 28px) clamp(24px, 3vw, 48px);
    background: linear-gradient(135deg, rgba(255, 204, 33, 0.06), rgba(0, 0, 0, 0.25));
    border: 1px solid rgba(255, 204, 33, 0.18);
    border-radius: clamp(12px, 1.4vh, 20px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.tv-branch-ventas-total__main {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tv-branch-ventas-total__label {
    font-size: var(--tv-text-label);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--pbi-muted);
    font-weight: 600;
}

.tv-branch-ventas-total__percent {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.tv-branch-ventas-total__pct {
    font-size: clamp(3.4rem, 8vw, 7rem);
    font-weight: 800;
    line-height: 1;
    color: var(--pbi-muted);
}

.tv-branch-ventas-total__pct--ok { color: #22c55e; }
.tv-branch-ventas-total__pct--warn { color: #eab308; }
.tv-branch-ventas-total__pct--alert { color: #ef4444; }

.tv-branch-ventas-total__pct-suffix {
    font-size: clamp(1.6rem, 3vw, 2.6rem);
    font-weight: 700;
    color: var(--pbi-muted);
}

.tv-branch-ventas-total__chips {
    display: flex;
    gap: clamp(10px, 1.2vw, 18px);
    flex-wrap: wrap;
}

.tv-branch-ventas-total__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--pbi-muted);
    font-size: var(--tv-text-label);
    font-weight: 600;
}

.tv-branch-ventas-total__chip i {
    color: var(--pbi-accent);
}

.tv-branch-ventas-total__chip .tv-animated-count {
    color: var(--pbi-text);
    font-weight: 800;
    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
}

.tv-branch-ventas-grid {
    flex: 1;
    display: grid;
    gap: clamp(16px, 1.6vw, 24px);
    grid-template-columns: repeat(var(--branch-cols, 2), minmax(0, 1fr));
    min-height: 0;
}

.tv-branch-card {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.2vh, 16px);
    padding: clamp(18px, 2vh, 28px);
    border-radius: clamp(14px, 1.6vh, 22px);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.tv-branch-card--caldera {
    border-color: rgba(59, 130, 246, 0.35);
    background:
        linear-gradient(160deg, rgba(59, 130, 246, 0.12), rgba(0, 0, 0, 0.4)),
        rgba(0, 0, 0, 0.2);
}

.tv-branch-card--central {
    border-color: rgba(34, 197, 94, 0.35);
    background:
        linear-gradient(160deg, rgba(34, 197, 94, 0.12), rgba(0, 0, 0, 0.4)),
        rgba(0, 0, 0, 0.2);
}

.tv-branch-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.tv-branch-card__title-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tv-branch-card__schema {
    font-size: var(--tv-text-micro);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--pbi-muted);
    font-weight: 700;
}

.tv-branch-card__name {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(1.6rem, 2.4vw, 2.4rem);
    font-weight: 800;
    color: var(--pbi-text);
    line-height: 1.1;
}

.tv-branch-card__name i {
    color: var(--pbi-accent);
}

.tv-branch-card__goal {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.tv-branch-card__goal-label {
    font-size: var(--tv-text-micro);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--pbi-muted);
    font-weight: 700;
}

.tv-branch-card__goal-value {
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    font-weight: 800;
    line-height: 1;
    color: var(--pbi-muted);
}

.tv-branch-card__goal-value--ok { color: #22c55e; }
.tv-branch-card__goal-value--warn { color: #eab308; }
.tv-branch-card__goal-value--alert { color: #ef4444; }

.tv-branch-card__goal-suffix {
    font-size: clamp(1rem, 1.6vw, 1.4rem);
    font-weight: 700;
    color: var(--pbi-muted);
    margin-left: 2px;
}

.tv-branch-card__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.tv-branch-card__metric {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.tv-branch-card__metric i {
    color: var(--pbi-accent);
    font-size: 1.1rem;
}

.tv-branch-card__metric > div {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.tv-branch-card__metric .tv-animated-count {
    font-size: clamp(1.1rem, 1.6vw, 1.5rem);
    font-weight: 800;
    color: var(--pbi-text);
}

.tv-branch-card__metric span:last-child {
    font-size: var(--tv-text-micro);
    color: var(--pbi-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.tv-branch-card__bar {
    width: 100%;
}

.tv-branch-card__bar-track {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.tv-branch-card__bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #ef4444, #eab308);
    transition: width 0.6s ease;
}

.tv-branch-card__bar-fill--ok {
    background: linear-gradient(90deg, #22c55e, #16a34a);
}

.tv-branch-card__bar-fill--warn {
    background: linear-gradient(90deg, #eab308, #f59e0b);
}

.tv-branch-card__bar-fill--alert {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.tv-branch-card__sellers {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.tv-branch-card__sellers-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--tv-text-label);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--pbi-muted);
    margin: 0 0 8px 0;
    font-weight: 700;
}

.tv-branch-card__sellers-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    max-height: 100%;
    scrollbar-width: thin;
}

.tv-branch-card__seller {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.tv-branch-card__seller:last-child {
    border-bottom: none;
}

.tv-branch-card__seller-id {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.tv-branch-card__seller-co {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(255, 204, 33, 0.15);
    color: var(--pbi-accent);
    font-weight: 800;
    font-size: var(--tv-text-micro);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.04em;
}

.tv-branch-card__seller-name {
    font-size: var(--tv-text-label);
    color: var(--pbi-text);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tv-branch-card__seller-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.tv-branch-card__seller-fact {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--pbi-muted);
    font-size: var(--tv-text-micro);
    font-weight: 600;
}

.tv-branch-card__seller-fact i {
    color: var(--pbi-accent);
}

.tv-branch-card__seller-sep {
    opacity: 0.4;
    margin: 0 2px;
}

.tv-branch-card__seller-pct {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.35);
    color: var(--pbi-muted);
    font-weight: 800;
    font-size: clamp(0.95rem, 1.3vw, 1.1rem);
    min-width: 64px;
    justify-content: center;
}

.tv-branch-card__seller-pct--ok {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.12);
}

.tv-branch-card__seller-pct--warn {
    color: #eab308;
    background: rgba(234, 179, 8, 0.12);
}

.tv-branch-card__seller-pct--alert {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
}

.tv-branch-card__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--pbi-muted);
    font-size: var(--tv-text-label);
    padding: 16px 0;
    margin: 0;
    text-align: center;
    flex: 1;
}

.tv-branch-ventas-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--pbi-muted);
    font-size: var(--tv-text-body);
    padding: 60px 0;
    margin: 0;
    text-align: center;
    flex: 1;
}

/* ====== Goal Ranking Board (Percent emphasis) ====== */
.tv-goal-board__pct--featured {
    font-size: clamp(2.4rem, 3.4vw, 3.6rem);
    font-weight: 800;
    padding: 4px 14px;
    border-radius: 12px;
    min-width: 96px;
    text-align: center;
    line-height: 1;
}

.tv-goal-board__bar-track {
    height: 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

/* ====== Podium badge % emphasis ====== */
.tv-podium__count--ok { color: #22c55e; }
.tv-podium__count--warn { color: #eab308; }
.tv-podium__count--alert { color: #ef4444; }
.tv-podium__count--muted { color: var(--pbi-muted); }

/* ====== Chase board badge % emphasis ====== */
.tv-leaderboard-chase__sales--ok { color: #22c55e; }
.tv-leaderboard-chase__sales--warn { color: #eab308; }
.tv-leaderboard-chase__sales--alert { color: #ef4444; }
.tv-leaderboard-chase__sales--muted { color: var(--pbi-muted); }

/* ====== Seller performance value % emphasis ====== */
.tv-seller-performance__value--ok { color: #22c55e; }
.tv-seller-performance__value--warn { color: #eab308; }
.tv-seller-performance__value--alert { color: #ef4444; }

/* =============================================================
   REDISEÑO: Vendedor Detalle — Galería de KPI Cards Premium
   - Hero card (Cumplimiento de Meta) + 5 KPI cards + 1 sección
   - Sistema de tokens: bordes rgba, elevación con gradient sutil
   - Sin emojis, todo FontAwesome
   ============================================================= */

/* ---------- HERO: Cumplimiento de Meta ---------- */
.tv-kpi-hero {
    grid-column: 1 / -1;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: clamp(10px, 1.2vh, 16px);
    padding: clamp(16px, 1.8vw, 24px) clamp(18px, 2vw, 28px);
    border-radius: clamp(14px, 1.5vh, 20px);
    background: linear-gradient(135deg,
        rgba(255, 204, 33, 0.10) 0%,
        rgba(255, 255, 255, 0.04) 45%,
        rgba(0, 0, 0, 0.12) 100%);
    border: 1px solid rgba(255, 204, 33, 0.22);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
    min-height: 0;
}

.tv-kpi-hero::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -10%;
    width: 60%;
    height: 180%;
    background: radial-gradient(ellipse at center, rgba(255, 204, 33, 0.10), transparent 65%);
    pointer-events: none;
    z-index: 0;
}

.tv-kpi-hero > * { position: relative; z-index: 1; }

.tv-kpi-hero--success {
    border-color: rgba(74, 222, 128, 0.35);
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.10) 0%, rgba(255, 255, 255, 0.04) 50%, rgba(0, 0, 0, 0.12) 100%);
}
.tv-kpi-hero--success::before { background: radial-gradient(ellipse at center, rgba(74, 222, 128, 0.10), transparent 65%); }

.tv-kpi-hero--over {
    border-color: rgba(168, 85, 247, 0.45);
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.12) 0%, rgba(255, 204, 33, 0.08) 50%, rgba(0, 0, 0, 0.15) 100%);
    animation: tvKpiHeroOverPulse 3s ease-in-out infinite;
}
.tv-kpi-hero--over::before { background: radial-gradient(ellipse at center, rgba(168, 85, 247, 0.15), transparent 65%); }

.tv-kpi-hero--warn {
    border-color: rgba(251, 146, 60, 0.35);
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.08) 0%, rgba(255, 255, 255, 0.04) 50%, rgba(0, 0, 0, 0.12) 100%);
}
.tv-kpi-hero--warn::before { background: radial-gradient(ellipse at center, rgba(251, 146, 60, 0.10), transparent 65%); }

.tv-kpi-hero--alert {
    border-color: rgba(239, 68, 68, 0.40);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.10) 0%, rgba(255, 255, 255, 0.04) 50%, rgba(0, 0, 0, 0.12) 100%);
}
.tv-kpi-hero--alert::before { background: radial-gradient(ellipse at center, rgba(239, 68, 68, 0.12), transparent 65%); }

@keyframes tvKpiHeroOverPulse {
    0%, 100% { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 0 24px rgba(168, 85, 247, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
    50% { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 0 48px rgba(168, 85, 247, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
}

.tv-kpi-hero__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(10px, 1.2vw, 18px);
    flex-wrap: wrap;
}

.tv-kpi-hero__title-block {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1vw, 16px);
    min-width: 0;
}

.tv-kpi-hero__title-icon {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    color: var(--pbi-accent);
    filter: drop-shadow(0 0 8px rgba(255, 204, 33, 0.35));
    flex-shrink: 0;
}

.tv-kpi-hero--over .tv-kpi-hero__title-icon { color: #c084fc; filter: drop-shadow(0 0 8px rgba(192, 132, 252, 0.5)); }
.tv-kpi-hero--success .tv-kpi-hero__title-icon { color: #4ade80; filter: drop-shadow(0 0 8px rgba(74, 222, 128, 0.4)); }
.tv-kpi-hero--warn .tv-kpi-hero__title-icon { color: #fb923c; filter: drop-shadow(0 0 8px rgba(251, 146, 60, 0.4)); }
.tv-kpi-hero--alert .tv-kpi-hero__title-icon { color: #f87171; filter: drop-shadow(0 0 8px rgba(248, 113, 113, 0.4)); }

.tv-kpi-hero__title {
    font-size: clamp(1.1rem, 1.8vw, 1.5rem);
    font-weight: 800;
    color: var(--pbi-text);
    line-height: 1.1;
    letter-spacing: 0.01em;
}

.tv-kpi-hero__subtitle {
    font-size: clamp(0.7rem, 1vw, 0.85rem);
    font-weight: 700;
    margin-top: 2px;
    color: var(--pbi-muted);
}
.tv-kpi-hero__subtitle--success,
.tv-kpi-hero__subtitle--over { color: #4ade80; }
.tv-kpi-hero__subtitle--ok { color: var(--pbi-accent); }
.tv-kpi-hero__subtitle--warn { color: #fb923c; }
.tv-kpi-hero__subtitle--alert { color: #f87171; }

.tv-kpi-hero__delta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: clamp(0.68rem, 0.95vw, 0.78rem);
    font-weight: 800;
    white-space: nowrap;
}
.tv-kpi-hero__delta--up { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.tv-kpi-hero__delta--down { background: rgba(248, 113, 113, 0.15); color: #f87171; }
.tv-kpi-hero__delta i { font-size: 0.85em; }

.tv-kpi-hero__body {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.5vw, 32px);
    flex: 1;
    min-height: 0;
}

.tv-kpi-hero__ring {
    --pct: 0;
    position: relative;
    width: clamp(140px, 22cqh, 220px);
    height: clamp(140px, 22cqh, 220px);
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
}

.tv-kpi-hero__ring-track {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        from -90deg,
        rgba(255, 255, 255, 0.08) 0deg,
        rgba(255, 255, 255, 0.04) 180deg,
        rgba(255, 255, 255, 0.08) 360deg
    );
    box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.45);
}

.tv-kpi-hero__ring-fill {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        from -90deg,
        var(--ring-color, var(--pbi-accent)) calc(var(--pct) * 3.6deg),
        transparent calc(var(--pct) * 3.6deg)
    );
    mask: radial-gradient(circle, transparent 64%, black 65%);
    -webkit-mask: radial-gradient(circle, transparent 64%, black 65%);
    transition: background 0.6s ease;
    filter: drop-shadow(0 0 12px var(--ring-glow, rgba(255, 204, 33, 0.45)));
}

.tv-kpi-hero__ring--ok    { --ring-color: var(--pbi-accent); --ring-glow: rgba(255, 204, 33, 0.45); }
.tv-kpi-hero__ring--success,
.tv-kpi-hero__ring--over  { --ring-color: #4ade80; --ring-glow: rgba(74, 222, 128, 0.55); }
.tv-kpi-hero__ring--warn  { --ring-color: #fb923c; --ring-glow: rgba(251, 146, 60, 0.55); }
.tv-kpi-hero__ring--alert { --ring-color: #f87171; --ring-glow: rgba(248, 113, 113, 0.55); }

.tv-kpi-hero--over .tv-kpi-hero__ring-fill { --ring-color: #c084fc; --ring-glow: rgba(192, 132, 252, 0.65); }
.tv-kpi-hero--over .tv-kpi-hero__ring {
    animation: tvRingShine 4s ease-in-out infinite;
}
@keyframes tvRingShine {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(192, 132, 252, 0.4)); }
    50% { filter: drop-shadow(0 0 18px rgba(192, 132, 252, 0.75)); }
}

.tv-kpi-hero__ring-center {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
    padding: 0 8px;
}

.tv-kpi-hero__pct {
    font-size: clamp(2.6rem, 7cqh, 4.2rem);
    font-weight: 900;
    line-height: 0.95;
    color: var(--pbi-accent);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.tv-kpi-hero__pct--ok { color: var(--pbi-accent); text-shadow: 0 0 24px rgba(255, 204, 33, 0.4), 0 2px 12px rgba(0, 0, 0, 0.6); }
.tv-kpi-hero__pct--success,
.tv-kpi-hero__pct--over { color: #4ade80; text-shadow: 0 0 24px rgba(74, 222, 128, 0.4), 0 2px 12px rgba(0, 0, 0, 0.6); }
.tv-kpi-hero__pct--warn { color: #fb923c; text-shadow: 0 0 24px rgba(251, 146, 60, 0.4), 0 2px 12px rgba(0, 0, 0, 0.6); }
.tv-kpi-hero__pct--alert { color: #f87171; text-shadow: 0 0 24px rgba(248, 113, 113, 0.45), 0 2px 12px rgba(0, 0, 0, 0.6); }

.tv-kpi-hero--over .tv-kpi-hero__pct { color: #c084fc; text-shadow: 0 0 28px rgba(192, 132, 252, 0.6), 0 2px 12px rgba(0, 0, 0, 0.6); }

.tv-kpi-hero__pct-label {
    font-size: clamp(0.55rem, 0.85vw, 0.7rem);
    font-weight: 700;
    color: var(--pbi-muted);
    letter-spacing: 0.05em;
    line-height: 1.1;
}

.tv-kpi-hero__meta {
    flex: none;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.2vh, 16px);
}

.tv-kpi-hero__semaphore {
    width: 100%;
}

.tv-seller-semaphore__legend {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: clamp(0.5rem, 0.75vw, 0.6rem);
    color: var(--pbi-muted);
    font-weight: 700;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}
.tv-seller-semaphore__legend-item--alert { color: #f87171; }
.tv-seller-semaphore__legend-item--success { color: #4ade80; }

.tv-kpi-hero__quick-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.tv-kpi-hero__quick-stat > i {
    color: #60a5fa;
    font-size: clamp(0.9rem, 1.2vw, 1.05rem);
    flex-shrink: 0;
}
.tv-kpi-hero__quick-stat-value {
    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
    font-weight: 800;
    color: #60a5fa;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.tv-kpi-hero__quick-stat-label {
    font-size: clamp(0.6rem, 0.85vw, 0.72rem);
    color: var(--pbi-muted);
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* ---------- KPI CARD: Base + Variants ---------- */
.tv-kpi-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1vh, 12px);
    padding: clamp(12px, 1.4vw, 18px);
    border-radius: clamp(12px, 1.4vh, 16px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.10) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    overflow: hidden;
    min-height: 0;
}

.tv-kpi-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.tv-kpi-card--gold {
    border-color: rgba(255, 204, 33, 0.22);
    background: linear-gradient(180deg, rgba(255, 204, 33, 0.06) 0%, rgba(0, 0, 0, 0.10) 100%);
}
.tv-kpi-card--gold:hover { border-color: rgba(255, 204, 33, 0.45); }

.tv-kpi-card--info {
    border-color: rgba(96, 165, 250, 0.22);
    background: linear-gradient(180deg, rgba(96, 165, 250, 0.05) 0%, rgba(0, 0, 0, 0.10) 100%);
}
.tv-kpi-card--info:hover { border-color: rgba(96, 165, 250, 0.45); }

.tv-kpi-card--success {
    border-color: rgba(74, 222, 128, 0.28);
    background: linear-gradient(180deg, rgba(74, 222, 128, 0.06) 0%, rgba(0, 0, 0, 0.10) 100%);
}
.tv-kpi-card--success:hover { border-color: rgba(74, 222, 128, 0.5); }

.tv-kpi-card--alert {
    border-color: rgba(239, 68, 68, 0.40);
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.10) 0%, rgba(0, 0, 0, 0.12) 100%);
    animation: tvKpiAlertPulse 2.5s ease-in-out infinite;
}
.tv-kpi-card--alert:hover { border-color: rgba(239, 68, 68, 0.6); }

@keyframes tvKpiAlertPulse {
    0%, 100% { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22), 0 0 0 rgba(239, 68, 68, 0); }
    50% { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22), 0 0 24px rgba(239, 68, 68, 0.25); }
}

.tv-kpi-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.tv-kpi-card__icon {
    width: clamp(32px, 3vw, 40px);
    height: clamp(32px, 3vw, 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255, 204, 33, 0.15);
    color: var(--pbi-accent);
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.tv-kpi-card--gold .tv-kpi-card__icon { background: rgba(255, 204, 33, 0.18); color: var(--pbi-accent); }
.tv-kpi-card--info .tv-kpi-card__icon { background: rgba(96, 165, 250, 0.18); color: #60a5fa; }
.tv-kpi-card--success .tv-kpi-card__icon { background: rgba(74, 222, 128, 0.18); color: #4ade80; }
.tv-kpi-card--alert .tv-kpi-card__icon { background: rgba(239, 68, 68, 0.22); color: #f87171; }

.tv-kpi-card__title-block {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.tv-kpi-card__title {
    font-size: clamp(0.78rem, 1.05vw, 0.92rem);
    font-weight: 800;
    color: var(--pbi-text);
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tv-kpi-card__subtitle {
    font-size: clamp(0.6rem, 0.82vw, 0.7rem);
    font-weight: 600;
    color: var(--pbi-muted);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tv-kpi-card__badge {
    padding: 3px 9px;
    border-radius: 999px;
    font-size: clamp(0.55rem, 0.78vw, 0.65rem);
    font-weight: 800;
    white-space: nowrap;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}
.tv-kpi-card__badge--success { background: rgba(74, 222, 128, 0.18); color: #4ade80; }
.tv-kpi-card__badge--alert { background: rgba(239, 68, 68, 0.20); color: #f87171; }

.tv-kpi-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 0.8vh, 10px);
    min-height: 0;
}

.tv-kpi-card__value-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: wrap;
}

.tv-kpi-card__value {
    font-size: clamp(1.9rem, 4.4cqh, 3rem);
    font-weight: 900;
    color: var(--pbi-text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.tv-kpi-card--gold .tv-kpi-card__value { color: var(--pbi-accent); text-shadow: 0 0 16px rgba(255, 204, 33, 0.25); }
.tv-kpi-card--info .tv-kpi-card__value { color: #60a5fa; text-shadow: 0 0 16px rgba(96, 165, 250, 0.20); }
.tv-kpi-card--success .tv-kpi-card__value { color: #4ade80; text-shadow: 0 0 16px rgba(74, 222, 128, 0.20); }
.tv-kpi-card--alert .tv-kpi-card__value { color: #f87171; text-shadow: 0 0 16px rgba(239, 68, 68, 0.25); }

.tv-kpi-card__value--muted { color: var(--pbi-muted) !important; text-shadow: none !important; }
.tv-kpi-card__value-sep {
    font-size: clamp(1.4rem, 3cqh, 2rem);
    color: var(--pbi-muted);
    font-weight: 600;
    padding: 0 2px;
}
.tv-kpi-card__value-unit {
    font-size: clamp(0.75rem, 1.1vw, 0.95rem);
    color: var(--pbi-muted);
    font-weight: 700;
    text-transform: lowercase;
    letter-spacing: 0.04em;
    margin-left: 4px;
}

.tv-kpi-card__trend {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: clamp(0.62rem, 0.88vw, 0.74rem);
    font-weight: 700;
    letter-spacing: 0.03em;
}
.tv-kpi-card__trend--up { color: #4ade80; }
.tv-kpi-card__trend--down { color: #f87171; }
.tv-kpi-card__trend--same { color: var(--pbi-muted); }
.tv-kpi-card__trend i { font-size: 0.95em; }

.tv-kpi-card__bar {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tv-kpi-card__bar--inline { flex-direction: row; align-items: center; gap: 8px; }

.tv-kpi-card__bar-track {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
    display: flex;
    gap: 2px;
}

.tv-kpi-card__bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.6s ease;
}
.tv-kpi-card__bar-fill--info { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.tv-kpi-card__bar-fill--success { background: linear-gradient(90deg, #16a34a, #4ade80); }
.tv-kpi-card__bar-fill--alert { background: linear-gradient(90deg, #b91c1c, #f87171); }
.tv-kpi-card__bar-fill--gold { background: linear-gradient(90deg, var(--tv-gold-dark), var(--pbi-accent)); }

.tv-kpi-card__bar-segment {
    height: 100%;
    transition: width 0.6s ease;
}
.tv-kpi-card__bar-segment--new {
    background: linear-gradient(90deg, var(--tv-gold-dark), var(--pbi-accent));
    border-radius: 999px 0 0 999px;
}
.tv-kpi-card__bar-segment--reactivated {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    border-radius: 0 999px 999px 0;
}

.tv-kpi-card__bar-label {
    font-size: clamp(0.58rem, 0.82vw, 0.68rem);
    color: var(--pbi-muted);
    font-weight: 700;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}
.tv-kpi-card__bar-label--warn { color: #fbbf24; }

/* ---------- KPI CARD DUO (Clientes / Cotizaciones) ---------- */
.tv-kpi-card--duo .tv-kpi-card__duo-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    justify-content: center;
}

.tv-kpi-duo {
    display: flex;
    align-items: stretch;
    gap: 6px;
    min-height: 0;
}

.tv-kpi-duo__side {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: clamp(8px, 1vh, 12px) 6px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.04);
    min-width: 0;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.tv-kpi-duo__side--new:hover {
    background: rgba(255, 204, 33, 0.10);
    border-color: rgba(255, 204, 33, 0.30);
}
.tv-kpi-duo__side--reactivated:hover {
    background: rgba(96, 165, 250, 0.10);
    border-color: rgba(96, 165, 250, 0.30);
}

.tv-kpi-duo__icon {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.78rem;
}
.tv-kpi-duo__side--new .tv-kpi-duo__icon {
    background: rgba(255, 204, 33, 0.18);
    color: var(--pbi-accent);
}
.tv-kpi-duo__side--reactivated .tv-kpi-duo__icon {
    background: rgba(96, 165, 250, 0.18);
    color: #60a5fa;
}

.tv-kpi-duo__value {
    font-size: clamp(1.5rem, 3.2cqh, 2.1rem);
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.tv-kpi-duo__side--new .tv-kpi-duo__value { color: var(--pbi-accent); }
.tv-kpi-duo__side--reactivated .tv-kpi-duo__value { color: #60a5fa; }

.tv-kpi-duo__label {
    font-size: clamp(0.58rem, 0.82vw, 0.7rem);
    font-weight: 700;
    color: var(--pbi-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tv-kpi-duo__divider {
    width: 1px;
    align-self: stretch;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.12), transparent);
    flex-shrink: 0;
}

/* ---------- Cotizaciones (Mes + Hoy) ---------- */
.tv-kpi-quotes-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    flex: 1;
    min-height: 0;
}

.tv-kpi-quotes-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 6px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.04);
    min-width: 0;
}

.tv-kpi-quotes-block__title {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: clamp(0.6rem, 0.85vw, 0.72rem);
    font-weight: 800;
    color: var(--pbi-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.tv-kpi-quotes-block__title i { color: #60a5fa; font-size: 0.95em; }

.tv-kpi-quotes-block__trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    flex: 1;
    min-height: 0;
}

.tv-kpi-quotes-block__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 2px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    min-width: 0;
    transition: background 0.25s ease;
    cursor: default;
}
.tv-kpi-quotes-block__stat:hover { background: rgba(255, 255, 255, 0.07); }

.tv-kpi-quotes-block__stat--ok .tv-kpi-quotes-block__value { color: #4ade80; }
.tv-kpi-quotes-block__stat--warn .tv-kpi-quotes-block__value { color: #fbbf24; }
.tv-kpi-quotes-block__stat--alert .tv-kpi-quotes-block__value { color: #f87171; }

.tv-kpi-quotes-block__value {
    font-size: clamp(1.1rem, 2.2cqh, 1.55rem);
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.tv-kpi-quotes-block__label {
    font-size: clamp(0.5rem, 0.72vw, 0.6rem);
    font-weight: 700;
    color: var(--pbi-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ---------- SECCIÓN: Desempeño por Sede ---------- */
.tv-kpi-section {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1vh, 12px);
    padding: clamp(12px, 1.4vw, 18px);
    border-radius: clamp(12px, 1.4vh, 16px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.10) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    min-height: 0;
}

.tv-kpi-section__head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.tv-kpi-section__head > i {
    color: var(--pbi-accent);
    font-size: clamp(0.95rem, 1.3vw, 1.15rem);
}
.tv-kpi-section__title {
    font-size: clamp(0.9rem, 1.25vw, 1.1rem);
    font-weight: 800;
    color: var(--pbi-text);
    letter-spacing: 0.02em;
}

.tv-kpi-section__body {
    flex: 1;
    min-height: 0;
}

.tv-kpi-section .tv-branch-ventas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.tv-kpi-branch {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: clamp(10px, 1.2vw, 14px);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    min-height: 0;
}
.tv-kpi-branch:hover {
    background: rgba(255, 204, 33, 0.06);
    border-color: rgba(255, 204, 33, 0.25);
    transform: translateY(-1px);
}

.tv-kpi-branch__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.tv-kpi-branch__icon { color: var(--pbi-accent); font-size: 0.95rem; }
.tv-kpi-branch__name {
    font-size: clamp(0.85rem, 1.15vw, 1rem);
    font-weight: 800;
    color: var(--pbi-text);
    text-transform: capitalize;
    letter-spacing: 0.02em;
}

.tv-kpi-branch__metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    flex: 1;
    min-height: 0;
}

.tv-kpi-branch__metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 4px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.22);
    min-width: 0;
    text-align: center;
    transition: background 0.25s ease;
}
.tv-kpi-branch__metric:hover { background: rgba(0, 0, 0, 0.35); }
.tv-kpi-branch__metric--highlight {
    background: linear-gradient(135deg, rgba(255, 204, 33, 0.10), rgba(0, 0, 0, 0.22));
    border: 1px solid rgba(255, 204, 33, 0.20);
}

.tv-kpi-branch__metric > i {
    color: var(--pbi-muted);
    font-size: 0.78rem;
    margin-bottom: 2px;
}
.tv-kpi-branch__metric--highlight > i { color: var(--pbi-accent); }

.tv-kpi-branch__metric-value {
    font-size: clamp(1.05rem, 1.8cqh, 1.4rem);
    font-weight: 800;
    color: var(--pbi-text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.tv-kpi-branch__metric-value--accent {
    color: var(--pbi-accent);
    text-shadow: 0 0 12px rgba(255, 204, 33, 0.25);
}

.tv-kpi-branch__metric-label {
    font-size: clamp(0.5rem, 0.7vw, 0.6rem);
    font-weight: 700;
    color: var(--pbi-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.1;
}

/* ---------- Grid layout override (replaces tv-chart-card--panorama 2x2) ---------- */
.tv-seller-detail__charts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(0, auto);
    gap: clamp(10px, 1.2vh, 14px);
    min-height: 0;
    height: 100%;
    overflow: auto;
    align-content: start;
}

/* Mantener requisitos del test: tv-chart-card--panorama presente en la vista.
   Se usa como contenedor interno para las cards que antes eran panorama. */
.tv-seller-detail .tv-chart-card--panorama { display: none; }

/* ---------- Header: dot pills inline ---------- */
.tv-screen-pills__dot {
    display: inline-block;
}

/* ---------- Responsive: tablet pequeño colapsa a 1 col ---------- */
@media (max-width: 1100px) {
    .tv-seller-detail__charts {
        grid-template-columns: 1fr;
    }
    .tv-kpi-hero__body { flex-direction: column; align-items: stretch; }
    .tv-kpi-hero__ring { margin: 0 auto; }
}

/* ---------- Responsive: muy angosto (TV 32" portrait) ---------- */
@media (max-width: 720px) {
    .tv-kpi-quotes-row { grid-template-columns: 1fr; }
    .tv-kpi-branch__metrics { grid-template-columns: repeat(2, 1fr); }
}
.tv-seller-performance__value--muted { color: var(--pbi-muted); }

/* ---------- Empty states (sin datos de sede / sin cotizaciones) ---------- */
.tv-kpi-section--empty {
    background: rgba(0, 0, 0, 0.25);
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: none;
}

.tv-kpi-section__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: clamp(12px, 1.5vh, 20px);
    min-height: 80px;
}

.tv-kpi-section__empty-icon {
    font-size: clamp(1.5rem, 2vw, 2rem);
    color: var(--pbi-muted);
    opacity: 0.7;
}

.tv-kpi-section__empty-title {
    margin: 0;
    font-size: clamp(0.85rem, 1.1vw, 1rem);
    font-weight: 700;
    color: var(--pbi-text);
    letter-spacing: 0.02em;
}

.tv-kpi-section__empty-msg {
    margin: 0;
    font-size: clamp(0.7rem, 0.95vw, 0.8rem);
    color: var(--pbi-muted);
    line-height: 1.3;
    max-width: 70%;
}

.tv-kpi-section__empty-msg code {
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.95em;
    color: #fbbf24;
    font-family: 'JetBrains Mono', monospace;
}

.tv-kpi-card--empty {
    background: rgba(0, 0, 0, 0.20);
    border-style: dashed;
    box-shadow: none;
}

.tv-kpi-card__body--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    padding: 8px;
    min-height: 60px;
}

.tv-kpi-card__empty-icon {
    font-size: clamp(1.4rem, 1.8vw, 1.7rem);
    color: var(--pbi-muted);
    opacity: 0.7;
}

.tv-kpi-card__empty-msg {
    margin: 0;
    font-size: clamp(0.65rem, 0.88vw, 0.75rem);
    color: var(--pbi-muted);
    line-height: 1.3;
}

/* ---------- N/A (Not Available) — usado por naValue() en tv-wall.js ---------- */
.tv-na,
.tv-na.tv-animated-count,
.tv-na.tv-metric-huge-value,
.tv-na.tv-metric-sub-value,
.tv-na.tv-metric-detail-count,
.tv-na.tv-pano-comparison__value,
.tv-na.tv-returns-donut__rate,
.tv-na.tv-podium__count,
.tv-na.tv-goal-board__pct,
.tv-na.tv-leaderboard-chase__sales,
.tv-na.tv-kpi-hero__pct,
.tv-na.tv-kpi-card__value,
.tv-na.tv-kpi-duo__value,
.tv-na.tv-kpi-quotes-block__value,
.tv-na.tv-kpi-branch__metric-value,
.tv-na.tv-ops-card__value,
.tv-na.tv-ops-branch-count,
.tv-na.tv-chart-card__metric-value,
.tv-na.tv-animated-count {
    color: var(--pbi-muted) !important;
    font-style: italic;
    font-weight: 600 !important;
    font-size: 0.7em !important;
    letter-spacing: 0.05em;
    text-shadow: none !important;
    filter: none !important;
    opacity: 0.85;
}

.tv-na.tv-returns-donut__rate {
    font-size: 0.9rem !important;
}

.tv-kpi-card--muted {
    background: rgba(0, 0, 0, 0.20);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

.tv-kpi-card__badge--muted {
    background: rgba(255, 255, 255, 0.06);
    color: var(--pbi-muted) !important;
    border: 1px dashed rgba(255, 255, 255, 0.10);
}

/* ==========================================================================
   Responsive Adaptations (Mobile / Tablet)
   ========================================================================== */
@media (max-width: 1024px) {
    /* Allow scrolling on mobile */
    html, body, .tv-wall {
        height: auto;
        min-height: 100dvh;
        max-height: none;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .tv-wall {
        padding-bottom: 30px;
    }
    
    /* Keep canvas grid fixed in background */
    .tv-wall__canvas-grid {
        position: fixed;
    }
    
    /* Header layout wraps and allows scrolling pills */
    .tv-wall__brand {
        flex-wrap: wrap;
    }
    .tv-wall__clock {
        flex-basis: 100%;
        margin-left: 0;
        justify-content: flex-start;
        padding-top: 8px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin-top: 8px;
    }
    
    .tv-screen-pills {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
        flex-basis: 100%;
        margin-top: 8px;
        gap: 8px;
    }
    .tv-screen-pills__pill {
        white-space: nowrap;
        min-height: 44px; /* Touch target size */
        padding: 0 16px;
        flex-shrink: 0;
    }

    /* Grids to single/double columns */
    .tv-wall__kpi-row,
    .tv-wall__metrics-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
    
    /* Leaderboard stacking */
    .tv-leaderboard__stage {
        display: flex;
        flex-direction: column;
        height: auto;
        overflow: visible;
    }

    /* Screen containers collapse fix (remove absolute positioning which breaks mobile scroll height) */
    .tv-wall__screens {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        overflow: visible;
        height: auto;
        flex: none;
    }
    
    .tv-screen {
        position: relative;
        grid-area: 1 / 1;
        height: auto;
        min-height: auto;
        padding-bottom: 40px;
    }
    
    /* Typography adjustments for smaller screens, ensure they don't get too large due to vh/vw scaling */
    :root {
        --tv-counter-xl: clamp(2.5rem, 8vw, 4rem);
        --tv-counter-lg: clamp(2rem, 7vw, 3.5rem);
        --tv-counter-md: clamp(1.75rem, 6vw, 3rem);
        --tv-counter-sm: clamp(1.5rem, 5vw, 2.5rem);
        --tv-text-display: clamp(1.75rem, 6vw, 3rem);
        --tv-text-title: clamp(1.5rem, 5vw, 2.5rem);
        --tv-text-heading: clamp(1.25rem, 4vw, 2rem);
        --tv-text-body: clamp(1rem, 3.5vw, 1.5rem);
        --tv-text-label: clamp(0.9rem, 3vw, 1.25rem);
        --tv-text-micro: clamp(0.8rem, 2.5vw, 1rem);
    }
    
    .tv-metric-tile {
        min-height: auto;
        padding: 16px !important;
        gap: 16px !important;
    }
    
    /* Impeccable overrides for mobile (taming vh/vw explosions) */
    .tv-branch-card {
        padding: 16px !important;
        gap: 12px !important;
    }
    .tv-branch-card__header {
        margin-bottom: 12px !important;
    }
    .tv-branch-card__metrics {
        gap: 8px !important;
        margin-bottom: 16px !important;
    }
    .tv-branch-card__metric {
        font-size: 0.9rem !important;
    }
    .tv-branch-card__name {
        font-size: 1.1rem !important;
    }
    .tv-branch-card__goal-value {
        font-size: 1.25rem !important;
    }

    .tv-seller-kpi {
        padding: 12px !important;
        gap: 8px !important;
    }
    .tv-metrics-kpi-strip {
        gap: 8px !important;
        flex-wrap: wrap !important;
    }
    
    .tv-pano-comparison {
        flex-direction: column !important;
        gap: 16px !important;
        padding: 16px 0 !important;
    }
    .tv-pano-comparison__value {
        font-size: 2.5rem !important;
    }
    .tv-pano-comparison__vs {
        transform: rotate(90deg); /* Vs arrow points down on mobile */
    }
    
    /* Inline style overrides for hero sizes that use vh */
    .tv-metric-huge-value {
        font-size: clamp(3rem, 15vw, 5rem) !important;
    }
    .tv-metric-huge-label {
        font-size: clamp(1.1rem, 5vw, 1.5rem) !important;
    }
    .tv-metric-detail-text {
        font-size: 1rem !important;
    }

    /* Podium fixes */
    .tv-podium__scene {
        min-height: auto !important;
        height: auto !important;
        padding-top: 30px !important;
    }
    .tv-podium__arena {
        height: auto !important;
        padding-bottom: 20px !important;
    }
    .tv-podium__floor {
        display: none !important; /* Hide 3D floor reflection on mobile for space */
    }
    .tv-podium__slot {
        height: auto !important;
    }
    .tv-podium__upper {
        margin-bottom: 12px !important;
    }
    .tv-podium__platform-body {
        height: 60px !important; 
        min-height: 60px !important;
    }
    .tv-podium__photo-stack {
        width: 80px !important;
        height: 80px !important;
    }
    .tv-podium__crown-badge {
        font-size: 1.5rem !important;
        top: -15px !important;
    }
    .tv-podium__name {
        font-size: 1.1rem !important;
    }
    .tv-podium__score {
        font-size: 1.2rem !important;
    }
    .tv-podium__trend {
        font-size: 1rem !important;
    }

    .tv-seller-detail__charts {
        grid-template-columns: 1fr !important;
    }
    
    .tv-branch-ventas-total {
        padding: 16px !important;
        margin-bottom: 16px !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    .tv-branch-ventas-total__chips {
        flex-wrap: wrap !important;
    }
    .tv-branch-ventas-total__pct {
        font-size: 2.5rem !important;
    }
    
    .tv-screen__title {
        font-size: 1.25rem !important;
        margin-bottom: 16px !important;
    }
}