/* ============================================================
   TEMPO REAL - BOTÕES DO SHORTCODE
   CSS standalone que carrega em qualquer página com o shortcode.
   Não depende do CSS principal do plugin.
   ============================================================ */

.tr-botao,
.tr-botao:link,
.tr-botao:visited {
    --tr-btn-cor: #A32D2D;
    --tr-btn-cor-light: #C24545;
    --tr-btn-cor-dark: #7A1F1F;
    box-sizing: border-box;
    text-decoration: none !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.3;
    color: white;
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.tr-botao *,
.tr-botao *::before,
.tr-botao *::after { box-sizing: border-box; }

.tr-botao:hover { text-decoration: none !important; }

@keyframes tr-btn-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.7); }
}

@keyframes tr-btn-pulse-ring {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.6); }
    70%  { box-shadow: 0 0 0 6px rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

@keyframes tr-btn-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================================
   ESTILO PILL — versão padrão melhorada
   ============================================================ */
.tr-botao-pill {
    display: inline-flex;
    align-items: stretch;
    background: var(--tr-btn-cor);
    border-radius: 999px;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    color: white !important;
    margin: 8px 0;
    max-width: 100%;
}

.tr-botao-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    color: white !important;
}

.tr-botao-pill .tr-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.22);
    padding: 10px 14px;
    flex-shrink: 0;
}

.tr-botao-pill .tr-pill-pulse {
    width: 7px;
    height: 7px;
    background: #fff;
    border-radius: 50%;
    flex-shrink: 0;
    /* Estado padrão: ponto estático (sem animação) */
}

/* Anima APENAS quando o estado é live/today (jogo de fato em andamento ou hoje) */
.tr-botao-pill .tr-pill-pulse.tr-pill-pulse-active {
    animation: tr-btn-pulse 1.4s ease-in-out infinite;
}

/* Em estados sem urgência, esmaece o ponto pra não confundir com indicador "ao vivo" */
.tr-botao-pill.tr-state-soon .tr-pill-pulse,
.tr-botao-pill.tr-state-far .tr-pill-pulse,
.tr-botao-pill.tr-state-none .tr-pill-pulse {
    background: rgba(255, 255, 255, 0.55);
}

.tr-botao-pill .tr-pill-aovivo {
    font-size: 11px;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.tr-botao-pill .tr-pill-texto {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    color: white;
}

.tr-botao-pill .tr-pill-arrow {
    font-size: 16px;
    line-height: 1;
    transition: transform 0.18s ease;
}

.tr-botao-pill:hover .tr-pill-arrow { transform: translateX(3px); }

/* ============================================================
   ESTILO CARD — mini placar com descrição
   ============================================================ */
.tr-botao-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 14px 18px;
    color: inherit !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    margin: 12px 0;
    max-width: 460px;
    width: 100%;
}

.tr-botao-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    border-color: var(--tr-btn-cor);
    color: inherit !important;
}

.tr-botao-card .tr-card-escudo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: contain;
    background: #f5f5f5;
    flex-shrink: 0;
    padding: 2px;
}

.tr-botao-card .tr-card-escudo-fallback {
    background: var(--tr-btn-cor);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    padding: 0;
}

.tr-botao-card .tr-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tr-botao-card .tr-card-aovivo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--tr-btn-cor);
}

.tr-botao-card .tr-card-pulse {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--tr-btn-cor);
    border-radius: 50%;
}

.tr-botao-card .tr-card-pulse.tr-card-pulse-active {
    animation: tr-btn-pulse 1.4s ease-in-out infinite;
}

/* Estados sem urgência: badge fica neutro */
.tr-botao-card.tr-state-soon .tr-card-aovivo,
.tr-botao-card.tr-state-far .tr-card-aovivo,
.tr-botao-card.tr-state-none .tr-card-aovivo {
    color: #666;
}
.tr-botao-card.tr-state-soon .tr-card-pulse,
.tr-botao-card.tr-state-far .tr-card-pulse,
.tr-botao-card.tr-state-none .tr-card-pulse {
    background: #888;
}

.tr-botao-card .tr-card-titulo {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.3;
}

.tr-botao-card .tr-card-meta {
    font-size: 12px;
    color: #666;
}

.tr-botao-card .tr-card-arrow {
    color: var(--tr-btn-cor);
    font-size: 22px;
    font-weight: 600;
    transition: transform 0.18s ease;
    flex-shrink: 0;
}

.tr-botao-card:hover .tr-card-arrow { transform: translateX(4px); }

/* ============================================================
   ESTILO HERO — CTA grande e chamativo com brilho
   ============================================================ */
.tr-botao-hero-wrapper {
    text-align: center;
    margin: 18px 0;
}

.tr-botao-hero {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 28px;
    border-radius: 999px;
    color: white !important;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
    background: linear-gradient(90deg,
        var(--tr-btn-cor) 0%,
        var(--tr-btn-cor-light) 50%,
        var(--tr-btn-cor) 100%);
    background-size: 200% 100%;
    animation: tr-btn-shimmer 3s ease-in-out infinite;
    position: relative;
}

.tr-botao-hero:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
    color: white !important;
    animation-duration: 1.5s;
}

.tr-botao-hero .tr-hero-pulse {
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    flex-shrink: 0;
}

.tr-botao-hero .tr-hero-pulse.tr-hero-pulse-active {
    animation: tr-btn-pulse-ring 1.4s ease-in-out infinite;
}

/* Hero sem urgência: brilho mais lento, ponto sem pulse-ring */
.tr-botao-hero.tr-state-soon,
.tr-botao-hero.tr-state-far,
.tr-botao-hero.tr-state-none {
    animation-duration: 6s;
}

.tr-botao-hero .tr-hero-aovivo {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.tr-botao-hero .tr-hero-sep {
    opacity: 0.5;
    font-weight: 300;
}

.tr-botao-hero .tr-hero-texto {
    font-size: 15px;
}

.tr-botao-hero .tr-hero-arrow {
    font-size: 18px;
    margin-left: 4px;
    transition: transform 0.18s ease;
}

.tr-botao-hero:hover .tr-hero-arrow { transform: translateX(4px); }

/* ============================================================
   ESTILO BANNER — bloco horizontal integrado
   ============================================================ */
.tr-botao-banner {
    display: flex;
    align-items: stretch;
    background: linear-gradient(90deg, var(--tr-btn-cor) 0%, var(--tr-btn-cor-dark) 100%);
    border-radius: 12px;
    overflow: hidden;
    color: white !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
    margin: 14px 0;
    max-width: 520px;
    width: 100%;
}

.tr-botao-banner:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    color: white !important;
}

.tr-botao-banner .tr-banner-conteudo {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    flex: 1;
    min-width: 0;
}

.tr-botao-banner .tr-banner-escudo {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: white;
    object-fit: contain;
    padding: 4px;
    flex-shrink: 0;
}

.tr-botao-banner .tr-banner-escudo-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    padding: 0;
}

.tr-botao-banner .tr-banner-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tr-botao-banner .tr-banner-aovivo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    color: #FAC775;
    letter-spacing: 0.08em;
}

.tr-botao-banner .tr-banner-pulse {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #FAC775;
    border-radius: 50%;
}

.tr-botao-banner .tr-banner-pulse.tr-banner-pulse-active {
    animation: tr-btn-pulse 1.4s ease-in-out infinite;
}

/* Banner sem urgência: badge interno fica branco em vez de amarelo (sem alarme falso) */
.tr-botao-banner.tr-state-soon .tr-banner-aovivo,
.tr-botao-banner.tr-state-far .tr-banner-aovivo,
.tr-botao-banner.tr-state-none .tr-banner-aovivo {
    color: rgba(255, 255, 255, 0.8);
}
.tr-botao-banner.tr-state-soon .tr-banner-pulse,
.tr-botao-banner.tr-state-far .tr-banner-pulse,
.tr-botao-banner.tr-state-none .tr-banner-pulse {
    background: rgba(255, 255, 255, 0.55);
}

.tr-botao-banner .tr-banner-titulo {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: white;
}

.tr-botao-banner .tr-banner-meta {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
}

.tr-botao-banner .tr-banner-cta {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 22px;
    background: rgba(0, 0, 0, 0.22);
    color: white;
    font-weight: 600;
    font-size: 13px;
    flex-shrink: 0;
}

.tr-botao-banner .tr-banner-arrow {
    font-size: 16px;
    transition: transform 0.18s ease;
}

.tr-botao-banner:hover .tr-banner-arrow { transform: translateX(4px); }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 600px) {
    .tr-botao-pill { font-size: 13px; }
    .tr-botao-pill .tr-pill-aovivo { font-size: 10px; }
    .tr-botao-pill .tr-pill-texto { padding: 9px 14px; }

    .tr-botao-card { padding: 12px 14px; gap: 10px; }
    .tr-botao-card .tr-card-escudo { width: 42px; height: 42px; }
    .tr-botao-card .tr-card-titulo { font-size: 13px; }
    .tr-botao-card .tr-card-meta { font-size: 11px; }

    .tr-botao-hero {
        padding: 14px 20px;
        font-size: 13px;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .tr-botao-hero .tr-hero-texto { font-size: 13px; }

    .tr-botao-banner .tr-banner-conteudo { padding: 14px 16px; gap: 10px; }
    .tr-botao-banner .tr-banner-escudo { width: 44px; height: 44px; }
    .tr-botao-banner .tr-banner-titulo { font-size: 14px; }
    .tr-botao-banner .tr-banner-cta { padding: 0 14px; font-size: 12px; }
    .tr-botao-banner .tr-banner-cta span:first-child { display: none; }
}

/* Em telas muito estreitas, o banner empilha */
@media (max-width: 380px) {
    .tr-botao-banner { flex-direction: column; }
    .tr-botao-banner .tr-banner-cta {
        padding: 10px;
        justify-content: center;
        background: rgba(0, 0, 0, 0.3);
    }
    .tr-botao-banner .tr-banner-cta span:first-child { display: inline; }
}