/* ============================================
   TERMÔMETRO DE LEADS — Painel de TV
   5 blocos = estágios de temperatura.
   Leads/vendas aterrissam no vermelho e esfriam,
   migrando de bloco conforme o cronômetro avança.
   ============================================ */

:root {
    --tv-bg-0: #14141c;
    --tv-bg-1: #0a0a0f;
    --tv-ink: #ffffff;
    --tv-ink-soft: rgba(255, 255, 255, 0.62);
    --tv-ink-faint: rgba(255, 255, 255, 0.34);
    --tv-line: rgba(255, 255, 255, 0.09);

    /* Cores vivas dos estágios (versão turbinada da imagem) */
    --c-red-1:    #ff7a45;  --c-red-2:    #ff2d00;  --c-red-g:    255, 60, 0;    /* quente  */
    --c-orange-1: #ffb64d;  --c-orange-2: #ff7a00;  --c-orange-g: 255, 138, 0;   /* morno   */
    --c-yellow-1: #ffe24d;  --c-yellow-2: #ffc400;  --c-yellow-g: 255, 200, 0;   /* esfriando */
    --c-green-1:  #a9e356;  --c-green-2:  #4fac0f;  --c-green-g:  90, 180, 30;    /* frio    */
    --c-blue-1:   #6cbaff;  --c-blue-2:   #1c86ff;  --c-blue-g:   40, 140, 255;   /* gelado  */

    --live: #ff3b30;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--tv-ink);
    background: radial-gradient(130% 100% at 50% -10%, #1c1c28 0%, var(--tv-bg-0) 42%, var(--tv-bg-1) 100%);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    user-select: none;
    cursor: default;
}
body::before {
    content: "";
    position: fixed; inset: -20%;
    background:
        radial-gradient(38% 38% at 50% 45%, rgba(255, 60, 0, 0.12), transparent 70%),
        radial-gradient(40% 40% at 18% 22%, rgba(255, 138, 0, 0.09), transparent 70%),
        radial-gradient(40% 40% at 82% 22%, rgba(255, 200, 0, 0.07), transparent 70%),
        radial-gradient(45% 45% at 20% 84%, rgba(40, 140, 255, 0.09), transparent 70%),
        radial-gradient(45% 45% at 82% 84%, rgba(90, 180, 30, 0.09), transparent 70%);
    filter: blur(12px);
    animation: auroraDrift 20s ease-in-out infinite alternate;
    z-index: 0;
}
@keyframes auroraDrift { 0% { transform: scale(1); } 100% { transform: translateY(-2%) scale(1.05); } }

/* ============================================
   SHELL
   ============================================ */
.tv {
    position: relative; z-index: 1;
    height: 100vh;
    display: flex; flex-direction: column;
    padding: clamp(14px, 2.2vh, 30px) clamp(18px, 2.6vw, 48px);
    gap: clamp(8px, 1.4vh, 20px);
}

/* ---------- Top bar ---------- */
.tv-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex: 0 0 auto; }
.tv-brand { display: flex; align-items: center; gap: 15px; }
.tv-logo {
    width: clamp(38px, 3.2vw, 52px); height: clamp(38px, 3.2vw, 52px);
    border-radius: 14px; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--c-red-1), var(--c-red-2));
    box-shadow: 0 8px 26px rgba(var(--c-red-g), 0.45); color: #fff;
}
.tv-title { font-size: clamp(1.02rem, 1.6vw, 1.6rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.tv-subtitle { font-size: clamp(0.68rem, 0.92vw, 0.92rem); color: var(--tv-ink-soft); font-weight: 500; margin-top: 2px; }

.tv-top-right { display: flex; align-items: center; gap: clamp(10px, 1.2vw, 18px); }
.tv-live {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 8px 15px; border-radius: 999px;
    background: rgba(255, 59, 48, 0.14); border: 1px solid rgba(255, 59, 48, 0.4);
    font-weight: 800; font-size: clamp(0.7rem, 0.9vw, 0.9rem); letter-spacing: 0.06em; color: #ff6b61;
}
.tv-live .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--live); animation: livePulse 1.6s ease-out infinite; }
@keyframes livePulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.65); }
    70% { box-shadow: 0 0 0 12px rgba(255, 59, 48, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); }
}
.tv-modebtn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 15px; border-radius: 999px; cursor: pointer;
    background: rgba(255, 255, 255, 0.05); border: 1px solid var(--tv-line);
    font-weight: 700; font-size: clamp(0.66rem, 0.84vw, 0.84rem); color: var(--tv-ink-soft);
    font-family: inherit; transition: all .2s ease;
}
.tv-modebtn:hover { color: #fff; background: rgba(255,255,255,0.1); }
.tv-modebtn .mdot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-yellow-2); }
.tv-modebtn.live .mdot { background: var(--c-green-2); }
.tv-clock { text-align: right; line-height: 1.05; }
.tv-clock .time { font-size: clamp(1.02rem, 1.6vw, 1.65rem); font-weight: 800; font-variant-numeric: tabular-nums; }
.tv-clock .date { font-size: clamp(0.64rem, 0.82vw, 0.82rem); color: var(--tv-ink-soft); font-weight: 500; text-transform: capitalize; }
.tv-fs {
    width: clamp(38px, 2.8vw, 48px); height: clamp(38px, 2.8vw, 48px);
    border-radius: 12px; border: 1px solid var(--tv-line); background: rgba(255,255,255,0.04);
    color: var(--tv-ink-soft); display: grid; place-items: center; cursor: pointer; transition: all .2s ease;
}
.tv-fs:hover { color: #fff; background: rgba(255,255,255,0.1); transform: translateY(-1px); }

/* ============================================
   STAGE — quincunx
   ============================================ */
.tv-stage-wrap { flex: 1 1 auto; display: grid; place-items: center; min-height: 0; }
.tv-stage {
    position: relative;
    width: min(97vw, 176vh);
    height: 100%;
}
.tv-grid {
    position: absolute; inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: clamp(12px, 2vw, 34px);
}

/* ---------- Bloco de estágio (glossy) ---------- */
.stage-block {
    position: relative;
    border-radius: clamp(18px, 2.2vw, 36px);
    overflow: hidden;
    padding: clamp(12px, 1.3vw, 22px) clamp(14px, 1.5vw, 26px);
    color: #fff;
    display: flex; flex-direction: column; gap: clamp(8px, 0.9vw, 14px);
    isolation: isolate;
    animation: blkIn .8s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes blkIn { 0% { opacity: 0; transform: translateY(22px) scale(.97); } 100% { opacity: 1; transform: none; } }
.sb-morno     { background: linear-gradient(150deg, var(--c-orange-1), var(--c-orange-2)); box-shadow: 0 18px 54px rgba(var(--c-orange-g), .32), inset 0 1px 0 rgba(255,255,255,.5); animation-delay: .05s; }
.sb-esfriando { background: linear-gradient(150deg, var(--c-yellow-1), var(--c-yellow-2)); box-shadow: 0 18px 54px rgba(var(--c-yellow-g), .28), inset 0 1px 0 rgba(255,255,255,.55); animation-delay: .12s; color: #5a3d00; }
.sb-gelado    { background: linear-gradient(150deg, var(--c-blue-1), var(--c-blue-2));    box-shadow: 0 18px 54px rgba(var(--c-blue-g), .32), inset 0 1px 0 rgba(255,255,255,.5); animation-delay: .19s; }
.sb-frio      { background: linear-gradient(150deg, var(--c-green-1), var(--c-green-2));  box-shadow: 0 18px 54px rgba(var(--c-green-g), .30), inset 0 1px 0 rgba(255,255,255,.5); animation-delay: .26s; }

.stage-block::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.08) 22%, transparent 46%);
}

/* header do bloco */
.sb-head { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 10px; }
.sb-icon {
    width: clamp(30px, 2.4vw, 42px); height: clamp(30px, 2.4vw, 42px);
    border-radius: 11px; display: grid; place-items: center; flex: 0 0 auto;
    background: rgba(255,255,255,0.26); box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.sb-esfriando .sb-icon { background: rgba(90,61,0,0.14); }
.sb-titles { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.05; min-width: 0; }
.sb-name { font-size: clamp(0.92rem, 1.35vw, 1.6rem); font-weight: 800; letter-spacing: -0.01em; }
.sb-range { font-size: clamp(0.62rem, 0.82vw, 0.9rem); font-weight: 600; opacity: .78; }
.sb-count {
    position: absolute; right: 0;
    font-size: clamp(1.3rem, 2.6vw, 3rem); font-weight: 800; line-height: 1;
    font-variant-numeric: tabular-nums; letter-spacing: -0.03em;
    text-shadow: 0 2px 8px rgba(0,0,0,.12);
}

/* lista de leads dentro do bloco */
.sb-list {
    position: relative; z-index: 2;
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column; gap: clamp(5px, 0.55vw, 9px);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
    align-content: flex-start;
}

/* ============================================
   CARTÃO DE LEAD
   ============================================ */
.lead-card {
    display: flex; align-items: center; gap: 10px;
    padding: clamp(5px, 0.5vw, 8px) clamp(9px, 0.9vw, 14px) clamp(5px, 0.5vw, 8px) clamp(5px, 0.5vw, 7px);
    border-radius: 999px;
    background: rgba(255,255,255,0.9);
    color: #17171f;
    box-shadow: 0 6px 18px rgba(0,0,0,0.14);
    flex: 0 0 auto;
    animation: cardIn .45s cubic-bezier(0.16,1,0.3,1);
    will-change: transform;
}
@keyframes cardIn { 0% { opacity: 0; transform: translateX(-12px) scale(.9); } 100% { opacity: 1; transform: none; } }
.lead-card .lc-av {
    width: clamp(28px, 2.1vw, 38px); height: clamp(28px, 2.1vw, 38px);
    border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; color: #fff;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.4);
}
.lead-card.type-lead .lc-av { background: linear-gradient(135deg, #ffb64d, #ff7a00); }
.lead-card.type-sale .lc-av { background: linear-gradient(135deg, #ff6a2b, #ff2d00); }
.lc-body { display: flex; flex-direction: column; line-height: 1.12; min-width: 0; flex: 1 1 auto; }
.lc-name { font-size: clamp(0.72rem, 0.95vw, 1.05rem); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-timer {
    font-size: clamp(0.64rem, 0.82vw, 0.9rem); font-weight: 700; color: #6b7280;
    font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 4px;
}
.lc-timer svg { opacity: .7; }
.lc-tag {
    flex: 0 0 auto; font-size: clamp(0.56rem, 0.7vw, 0.72rem); font-weight: 800;
    padding: 3px 9px; border-radius: 999px; letter-spacing: .03em;
}
.lead-card.type-lead .lc-tag { background: #fff2e2; color: #c25e00; }
.lead-card.type-sale .lc-tag { background: #ffe6df; color: #d62a00; }

/* piscada quando o cartão migra de estágio */
.lead-card.moved { animation: cardMoved .8s ease; }
@keyframes cardMoved {
    0% { box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 6px 18px rgba(0,0,0,.14); }
    100% { box-shadow: 0 6px 18px rgba(0,0,0,.14); }
}

/* ============================================
   BLOCO CENTRAL — QUENTE (zona de pouso)
   ============================================ */
.stage-center {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: clamp(210px, 25vw, 420px); height: clamp(210px, 25vw, 420px);
    max-width: 40%; max-height: 54%;
    border-radius: clamp(24px, 2.8vw, 46px);
    background: linear-gradient(150deg, var(--c-red-1), var(--c-red-2));
    box-shadow:
        0 30px 90px rgba(var(--c-red-g), .55),
        0 0 0 6px rgba(10,10,15,0.55),
        0 0 0 8px rgba(var(--c-red-g), .35),
        inset 0 2px 0 rgba(255,255,255,.5);
    display: flex; flex-direction: column; align-items: center;
    padding: clamp(12px, 1.4vw, 24px) clamp(12px, 1.4vw, 22px);
    z-index: 20; overflow: hidden; isolation: isolate;
    animation: centerIn .9s .3s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes centerIn { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.6); } 100% { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
.stage-center::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.08) 28%, transparent 52%);
}
.stage-center::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0;
    box-shadow: 0 0 0 0 rgba(var(--c-red-g), 0.5); animation: centerHalo 2.6s ease-out infinite;
}
@keyframes centerHalo {
    0% { box-shadow: 0 0 0 0 rgba(var(--c-red-g), 0.5); }
    70% { box-shadow: 0 0 0 26px rgba(var(--c-red-g), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--c-red-g), 0); }
}
.sc-head { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 8px; }
.sc-flame { display: grid; place-items: center; }
.sc-name { font-size: clamp(0.82rem, 1.15vw, 1.35rem); font-weight: 800; letter-spacing: 0.1em; }
.sc-range { font-size: clamp(0.58rem, 0.76vw, 0.82rem); font-weight: 700; opacity: .78; padding-left: 4px; }
.sc-count {
    position: relative; z-index: 3;
    font-size: clamp(2.6rem, 6vw, 5.6rem); font-weight: 800; line-height: 0.92;
    letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
    margin-top: clamp(2px, 0.4vw, 8px); text-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.sc-caption { position: relative; z-index: 3; font-size: clamp(0.62rem, 0.82vw, 0.9rem); font-weight: 700; opacity: .82; margin-bottom: 6px; }
.sc-list {
    position: relative; z-index: 3;
    width: 100%; flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column; gap: 5px; align-items: stretch;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
}
/* cartões compactos dentro do centro */
.sc-list .lead-card { background: rgba(255,255,255,0.96); box-shadow: 0 4px 12px rgba(0,0,0,.2); padding: 4px 10px 4px 4px; }
.sc-list .lead-card .lc-tag { display: none; }

/* batida do bloco quando algo aterrissa/migra */
.stage-center.hit { animation: centerHit .7s cubic-bezier(0.175,0.885,0.32,1.275); }
@keyframes centerHit {
    0%,100% { transform: translate(-50%,-50%) scale(1); }
    30% { transform: translate(-50%,-50%) scale(1.09); }
    55% { transform: translate(-50%,-50%) scale(0.98); }
}
.stage-block.hit { animation: blkHit .65s cubic-bezier(0.175,0.885,0.32,1.275); }
@keyframes blkHit { 0%,100% { transform: scale(1); } 35% { transform: scale(1.035); } }

/* ============================================
   AVIÃOZINHO + efeitos de pouso/migração
   ============================================ */
.tv-plane {
    position: fixed; z-index: 70; pointer-events: none;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    will-change: transform, opacity;
}
.tv-plane .plane-ico { filter: drop-shadow(0 6px 14px rgba(0,0,0,.4)); }
.tv-plane.type-lead .plane-ico { color: #ffb64d; }
.tv-plane.type-sale .plane-ico { color: #ff5a2b; }
.tv-plane .plane-tag {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(20,20,28,0.9); border: 1px solid rgba(255,255,255,0.16);
    padding: 5px 12px 5px 5px; border-radius: 999px;
    font-size: clamp(0.68rem, 0.85vw, 0.92rem); font-weight: 700; color: #fff;
    box-shadow: 0 10px 28px rgba(0,0,0,.45); white-space: nowrap;
}
.tv-plane .plane-tag .pt-av {
    width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
    font-size: 0.62rem; font-weight: 800; color: #fff;
}
.tv-plane.type-lead .plane-tag .pt-av { background: linear-gradient(135deg, #ffb64d, #ff7a00); }
.tv-plane.type-sale .plane-tag .pt-av { background: linear-gradient(135deg, #ff6a2b, #ff2d00); }

.tv-trail { position: fixed; z-index: 65; width: 12px; height: 12px; border-radius: 50%; pointer-events: none; opacity: .8; will-change: transform, opacity; }
.tv-confetti { position: fixed; z-index: 68; width: 9px; height: 9px; border-radius: 2px; pointer-events: none; will-change: transform, opacity; }
.tv-shock { position: fixed; z-index: 64; border-radius: 50%; border: 3px solid rgba(255,255,255,.8); pointer-events: none; will-change: transform, opacity; }
/* clone que voa de um bloco para o outro na migração */
.tv-migrate { position: fixed; z-index: 66; pointer-events: none; will-change: transform, opacity; border-radius: 999px; }

/* bandeira com o nome que sobe do centro ao aterrissar */
.center-flag {
    position: absolute; left: 50%; top: -14px; transform: translate(-50%, 0);
    padding: 8px 18px; border-radius: 999px;
    font-size: clamp(0.72rem, 0.92vw, 1.02rem); font-weight: 700; white-space: nowrap;
    box-shadow: 0 10px 30px rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.2);
    z-index: 40; pointer-events: none; opacity: 0; color: #fff;
    animation: flagUp 2.4s cubic-bezier(0.16,1,0.3,1) forwards;
}
.center-flag.type-sale { background: linear-gradient(135deg, #ff6a2b, #ff2d00); }
.center-flag.type-lead { background: linear-gradient(135deg, #ffb64d, #ff7a00); }
.center-flag b { font-weight: 800; }
@keyframes flagUp {
    0% { opacity: 0; transform: translate(-50%, 18px) scale(.85); }
    14% { opacity: 1; transform: translate(-50%, -6px) scale(1); }
    82% { opacity: 1; transform: translate(-50%, -14px) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -46px) scale(.9); }
}

/* ============================================
   RODAPÉ discreto
   ============================================ */
.tv-foot {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: clamp(14px, 2vw, 34px);
    padding: clamp(8px, 1.1vh, 14px) clamp(14px, 1.6vw, 24px);
    border-radius: 16px; background: rgba(255,255,255,0.035); border: 1px solid var(--tv-line);
    overflow: hidden;
}
.foot-privacy {
    width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center;
    border-radius: 11px; border: 1px solid var(--tv-line); color: var(--tv-ink-faint);
    background: rgba(255,255,255,.045); cursor: pointer; transition: .2s ease;
}
.foot-privacy:hover { color: #fff; background: rgba(255,255,255,.1); }
.foot-privacy .eye-closed { display: none; }
.tv-foot.data-hidden .foot-privacy .eye-open { display: none; }
.tv-foot.data-hidden .foot-privacy .eye-closed { display: block; }
.tv-foot.data-hidden .foot-stat b { color: transparent; position: relative; user-select: none; }
.tv-foot.data-hidden .foot-stat b::after { content: "••••"; color: var(--tv-ink); position: absolute; inset: 0; }
.foot-stats { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 30px); flex: 0 0 auto; }
.foot-stat { display: flex; flex-direction: column; line-height: 1.1; }
.foot-stat span { font-size: clamp(0.56rem, 0.72vw, 0.74rem); color: var(--tv-ink-faint); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.foot-stat b { font-size: clamp(0.86rem, 1.15vw, 1.3rem); font-weight: 800; font-variant-numeric: tabular-nums; }
.foot-feed { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    justify-content: flex-end;
}
.feed-chip {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 13px 5px 5px; border-radius: 999px;
    background: rgba(255,255,255,0.06); border: 1px solid var(--tv-line);
    font-size: clamp(0.64rem, 0.8vw, 0.86rem); font-weight: 600;
    animation: chipIn .5s cubic-bezier(0.16,1,0.3,1);
}
@keyframes chipIn { 0% { opacity: 0; transform: translateX(14px); } 100% { opacity: 1; transform: none; } }
.feed-chip .fc-av { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 0.56rem; font-weight: 800; color: #fff; }
.feed-chip.type-lead .fc-av { background: linear-gradient(135deg, #ffb64d, #ff7a00); }
.feed-chip.type-sale .fc-av { background: linear-gradient(135deg, #ff6a2b, #ff2d00); }
.feed-chip .fc-tag { color: var(--tv-ink-faint); font-weight: 700; }

/* ============================================
   RESPONSIVO
   ============================================ */
@media (max-aspect-ratio: 9/10) {
    .tv-stage { width: 95vw; }
    .stage-center { width: 46%; height: 32%; max-width: 46%; }
    .foot-stat:nth-child(n+3) { display: none; }
}
@media (max-width: 720px) { .tv-clock .date, .tv-subtitle { display: none; } }
@media (prefers-reduced-motion: reduce) {
    body::before, .stage-block, .stage-center, .tv-live .dot, .stage-center::after { animation: none !important; }
}