/* ============================================================
   Placar Super Fest — placar.css  v2.0
   ============================================================ */

/* ───────────────────────────────────────────────
   [numeros_concessionaria]
   Três caixinhas inline: VN | VD | SN
   Posicione via Elementor sobre o layout do placar.
─────────────────────────────────────────────── */
.sf-numeros {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    font-family: "Montserrat", sans-serif;
}

.sf-numeros--title{
	font-family: "Montserrat", sans-serif;
	color: #fff;
	font-size: 15px;
	text-transform: uppercase;
	font-style: italic;
	font-weight: 700;
}

.sf-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 215px;
    height: 90px;
    border-radius: 6px;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: .02em;
    transition: transform .15s, opacity .15s;
}

/* Cores por tipo */
.sf-vn  { background: #fff; color: #000; border: 1px solid rgba(255,255,255,.3); }
.sf-vd  { background: #fff; color: #000; border: 1px solid rgba(255,255,255,.3); }
.sf-sn  { background: #fff; color: #000; border: 1px solid rgba(255,255,255,.3); }

/* Animação quando o valor muda */
.sf-num.sf-atualizado {
    animation: sf-flash .4s ease;
}

@keyframes sf-flash {
    0%   { transform: scale(1.15); opacity: .7; }
    100% { transform: scale(1);    opacity: 1; }
}

/* ───────────────────────────────────────────────
   [total_vendas]
─────────────────────────────────────────────── */
#sf-total-geral,
.sf-total-geral {
    font-family: "Montserrat", sans-serif;
    font-size: 80px;
    font-weight: 700;
	text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    transition: opacity .2s;
}

/* ───────────────────────────────────────────────
   [placar_hora]
─────────────────────────────────────────────── */
p.placar-rodape.placar-sf-hora {
	margin: 14px 0 0;
    font-size: 1.5rem;
    color: #ffffff;
    text-align: right;
    font-family: 'Montserrat';
    text-align: center;
}

#sf-hora,
.sf-hora {
    font-family: "Montserrat", sans-serif;
    font-size: inherit;
    font-weight: 600;
    color: inherit;
}

/* ───────────────────────────────────────────────
   [ranking_top3]
   Layout idêntico à imagem: posição à esq,
   caixa branca com logo, depois VN / VD / SN.
─────────────────────────────────────────────── */
#sf-ranking-top3 {
    display: flex;
    flex-direction: column;
    gap: 28px;
    font-family: "Montserrat", sans-serif;
    width: 100%;
}

.sf-ranking-linha {
    display: flex;
    align-items: center;
    gap: 28px;
}

/* Número da posição */
.sf-pos-numero {
    font-size: 3rem;
    font-weight: 900;
    color: #fff;
    min-width: 64px;
    text-align: right;
    line-height: 1;
    text-shadow: 0 2px 8px rgba(0,0,0,.4);
}

/* Caixa branca que contém a logo */
.sf-ranking-logo-box {
    width: 240px;
    height: 120px;
    background: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

/* Borda colorida por posição (igual à imagem) */
.sf-pos-1 .sf-ranking-logo-box { box-shadow: 0 0 0 4px #f5c518, 0 4px 20px rgba(245,197,24,.35); }
.sf-pos-2 .sf-ranking-logo-box { box-shadow: 0 0 0 4px #9e9e9e, 0 4px 20px rgba(0,0,0,.2); }
.sf-pos-3 .sf-ranking-logo-box { box-shadow: 0 0 0 4px #cd7f32, 0 4px 20px rgba(205,127,50,.3); }

.sf-ranking-logo {
    max-width: 90%;
    max-height: 85%;
    object-fit: contain;
    display: block;
}

.sf-ranking-nome-fallback {
    font-weight: 700;
    font-size: .95rem;
    color: #1a1a1a;
    text-align: center;
    padding: 8px;
    line-height: 1.2;
}

/* Grupo de números VN / VD / SN */
.sf-ranking-numeros {
    display: flex;
    gap: 14px;
}

.sf-ranking-campo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.sf-ranking-label {
    font-size: .65rem;
    font-weight: 700;
    color: rgba(255,255,255,.75);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.sf-ranking-valor {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    height: 56px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 10px;
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
    backdrop-filter: blur(4px);
}

/* Erro */
.sf-erro {
    color: #e53935;
    font-size: .85rem;
    font-style: italic;
}


/* ───────────────────────────────────────────────
   [placar_concessionarias] — tabela legada
─────────────────────────────────────────────── */
#placar-concessionarias {
    font-family: "Montserrat", sans-serif;
    max-width: 1550px;
    margin: 0 auto;
}

.placar-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 2px solid #f0f0f0;
}

.placar-align{
	align-items:center!important;
}

.placar-titulo {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    color: #1a1a1a;
}

.placar-status {
    font-size: .78rem;
    padding: 3px 12px;
    border-radius: 20px;
    background: #f0f0f0;
    color: #888;
    transition: background .3s, color .3s;
}
.placar-status.ok          { background: #d4edda; color: #155724; }
.placar-status.atualizando { background: #fff3cd; color: #856404; }
.placar-status.erro        { background: #f8d7da; color: #721c24; }

.placar-grid {
    display: grid;
    grid-template-columns: 36px 52px 1fr 68px 68px 84px 76px;
    align-items: center;
    gap: 0 8px;
    padding: 8px 12px;
}

.placar-grid > span,
.placar-grid > div { text-align: center; }

.placar-grid > span:nth-child(3),
.placar-grid > div:nth-child(3) { text-align: left; }

.placar-grid--header {
    background: #f7f7f7;
    border-radius: 8px 8px 0 0;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #999;
    margin-bottom: 2px;
}

#placar-linhas {
    border: 1px solid #f0f0f0;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}

.placar-linha {
    border-bottom: 1px solid #f5f5f5;
    transition: background .15s;
    min-height: 56px;
    animation: fadein .25s ease forwards;
}
.placar-linha:hover      { background: #fafafa; }
.placar-linha:last-child { border-bottom: none; }

.col-pos { font-weight: 700; font-size: .9rem; color: #bbb; }
.pos-1   { color: #c9a227; font-size: 1.1rem; }
.pos-2   { color: #8a8a8a; font-size: 1rem; }
.pos-3   { color: #a0522d; font-size: 1rem; }

.col-logo { text-align: center; }

.placar-logo {
    width: 40px; height: 40px;
    object-fit: contain; border-radius: 6px;
    display: block; margin: 0 auto;
}

.placar-sem-logo {
    width: 40px; height: 40px;
    background: #f0f0f0; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; margin: 0 auto;
}

.col-nome {
    font-weight: 600; font-size: .9rem; color: #1a1a1a;
    text-align: left; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}

.placar-badge {
    display: inline-block; min-width: 42px;
    padding: 3px 8px; border-radius: 20px;
    font-size: .82rem; font-weight: 700; text-align: center;
}
.badge-vn        { background: #e8f4fd; color: #1565c0; }
.badge-vd        { background: #fff3e0; color: #e65100; }
.badge-seminovos { background: #e8f5e9; color: #2e7d32; }
.badge-total     { background: #ede7f6; color: #4527a0; font-size: .88rem; }

.placar-loader {
    padding: 40px; text-align: center;
    color: #bbb; font-style: italic;
}

.placar-rodape {
    margin: 14px 0 0; font-size: .78rem;
    color: #bbb; text-align: right;
}

/* ── Tabela legada — layout ranking ── */
#placar-linhas {
    border: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.placar-linha-rank {
    display: flex;
    align-items: center;
    gap: 24px;
	height: 170px;
}

/* Número grande */
.plr-numero {
    font-size: 6rem;
    font-weight: 900;
    color: #fff;
    min-width: 60px;
    text-align: right;
    line-height: 1;
    text-shadow: 0 2px 8px rgba(0,0,0,.5);
}

/* Card branco da logo */
.plr-logo-box {
    width: 280px;
    height: 140px;
    background: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

/* Borda gradiente por posição */
.placar-linha-rank.pos-1 .plr-logo-box {
    box-shadow: 0 0 0 4px #f5c518, 0 4px 20px rgba(245,197,24,.4);
}
.placar-linha-rank.pos-2 .plr-logo-box {
    box-shadow: 0 0 0 4px #9e9e9e, 0 4px 20px rgba(0,0,0,.2);
}
.placar-linha-rank.pos-3 .plr-logo-box {
    box-shadow: 0 0 0 4px #cd7f32, 0 4px 20px rgba(205,127,50,.3);
}

.plr-logo-box img {
    max-width: 90%;
    max-height: 85%;
    object-fit: contain;
}

.plr-logo-box .placar-sem-logo {
    font-size: 2rem;
    background: transparent;
}

/* Campos VN / VD / SN */
.plr-campos {
    display: flex;
    gap: 14px;
}

.plr-campo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.plr-label {
    font-size: .65rem;
    font-weight: 700;
    color: rgba(255,255,255,.8);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.plr-valor {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    height: 56px;
    background: #fff;
    border-radius: 10px;
    font-size: 1.6rem;
    font-weight: 800;
    color: #1a1a1a;
}

@keyframes fadein {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsivo ── */
@media (max-width: 600px) {
    .placar-grid {
        grid-template-columns: 28px 36px 1fr 52px 52px 60px 56px;
        gap: 0 4px; padding: 6px 8px; font-size: .78rem;
    }
    .placar-logo, .placar-sem-logo { width: 32px; height: 32px; }
    .placar-badge { min-width: 32px; padding: 2px 5px; font-size: .75rem; }

    #sf-ranking-top3 { gap: 16px; }
    .sf-pos-numero   { font-size: 2rem; min-width: 44px; }
    .sf-ranking-logo-box { width: 140px; height: 70px; }
    .sf-ranking-valor { min-width: 48px; height: 36px; font-size: 1.1rem; }
    .sf-ranking-numeros { gap: 8px; }
	
	.sf-numeros-time {
		width: 100%;
		flex-direction: column;
	}
}

/* ── Responsivo ── */
@media screen and (max-width: 768px) {

	.sf-numeros-time {
		width: 100%!important;
		flex-direction: column;
	}
}



/* ============================================================
   MÓDULO VENDEDORES PEDRAGON — v4.0
   ============================================================ */

/* ── Ranking [ranking_vendedores_pedragon] ── */
.sf-ranking-vendedores {
    font-family: "Montserrat", sans-serif;
    max-width: 900px;
    margin: 0 auto;
}

.srv-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 2px solid rgba(255,255,255,.15);
}

.srv-titulo {
    font-size: 1.3rem;
    font-weight: 800;
    margin: 0;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.srv-status            { font-size: .75rem; padding: 3px 12px; border-radius: 20px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); }
.srv-status--ok        { background: rgba(40,167,69,.25);  color: #6fcf97; }
.srv-status--erro      { background: rgba(220,53,69,.25);  color: #f28b82; }

/* Grid */
.srv-grid {
    display: grid;
    grid-template-columns: 44px 1fr 110px 64px 64px 64px 68px;
    align-items: center;
    gap: 0 10px;
    padding: 10px 14px;
}
.srv-grid > *            { text-align: center; }
.srv-grid > *:nth-child(2){ text-align: left; }

.srv-grid--header {
    background: rgba(255,255,255,.08);
    border-radius: 8px 8px 0 0;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255,255,255,.5);
    margin-bottom: 2px;
}

.srv-linhas             { border-radius: 0 0 8px 8px; overflow: hidden; }
.srv-linha              { border-bottom: 1px solid rgba(255,255,255,.06); transition: background .15s; min-height: 48px; }
.srv-linha:last-child   { border-bottom: none; }
.srv-linha:hover        { background: rgba(255,255,255,.04); }

/* Destaque lateral por time */
.srv-linha.srv-time--verde   { border-left: 3px solid #27ae60; }
.srv-linha.srv-time--amarelo { border-left: 3px solid #f1c40f; }

/* Posição */
.srv-pos       { font-size: .9rem; font-weight: 800; color: rgba(255,255,255,.35); display: block; text-align: center; }
.srv-pos--1    { color: #f5c518; font-size: 1rem; }
.srv-pos--2    { color: #b0b0b0; }
.srv-pos--3    { color: #cd7f32; }

/* Nome */
.srv-nome { font-weight: 700; font-size: .88rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Badge time */
.srv-badge          { display: inline-block; font-size: .7rem; font-weight: 700; padding: 3px 8px; border-radius: 20px; white-space: nowrap; }
.srv-badge--verde   { background: rgba(39,174,96,.2);  color: #6fcf97; border: 1px solid rgba(39,174,96,.4); }
.srv-badge--amarelo { background: rgba(241,196,15,.2); color: #f9e547; border: 1px solid rgba(241,196,15,.4); }

/* Números */
.srv-num       { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 34px; border-radius: 8px; font-size: .9rem; font-weight: 800; }
.srv-vn        { background: rgba(255,255,255,.1); color: #90caf9; }
.srv-vd        { background: rgba(255,255,255,.1); color: #ffcc80; }
.srv-sn        { background: rgba(255,255,255,.1); color: #a5d6a7; }
.srv-total     { background: rgba(255,255,255,.18); color: #fff; }

.srv-loader    { padding: 28px; text-align: center; color: rgba(255,255,255,.3); font-style: italic; font-size: .85rem; }

/* ── Totais por time ── */
.sf-total-time {
    font-family: "Montserrat", sans-serif;
    font-size: 3rem;
    font-weight: 900;
    display: inline-block;
    line-height: 1;
}
.sf-total-time--verde   { color: #27ae60; }
.sf-total-time--amarelo { color: #f1c40f; }

/* ── Caixinhas [numeros_time] ── */
.sf-numeros-time {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    font-family: "Montserrat", sans-serif;
	width: 450px;
}

/* ── Responsivo ── */
@media (max-width: 600px) {
    .srv-grid {
        grid-template-columns: 32px 1fr 80px 44px 44px 44px 50px;
        gap: 0 5px;
        padding: 8px 8px;
        font-size: .75rem;
    }
    .sf-total-time { font-size: 2rem; }
}