/* ColinaTV — estilos globais para elementos criados via JS (fora do escopo dos .razor.css)
   e ajustes de layout. Cores exclusivamente via tokens do YNEX. */

/* App-header removido do layout: devolve ao conteúdo o espaço que era reservado a ele,
   mas reserva uma faixa no topo para a barra flutuante central (login/chat/tema/PWA)
   nunca sobrepor o conteúdo das páginas. */
.app-content {
    margin-block-start: 0 !important;
    padding-block-start: 3.9rem;
}

/* Logo na sidebar: escudo em destaque (header da sidebar mais alto que o padrão YNEX). */
.app-sidebar .main-sidebar-header {
    height: 8.5rem;
}

.app-sidebar .main-sidebar-header .header-logo img {
    height: 7.5rem;
    line-height: 7.5rem;
    width: auto;
}

.app-sidebar .main-sidebar {
    margin-block-start: 8.5rem;
}

/* O toggle da sidebar em telas <992px é a PRIMEIRA aba da barra central do topo
   (.menu-topo no MainLayout) — solto no canto ele ficava escondido atrás da barra. */

/* Tokens novos (padrão YNEX): borda dos flutuantes, gramado do campinho e overlay escuro. */
:root {
    --colinatv-borda-flutuante: #fff;
    --colinatv-gramado-claro: #2e7d46;
    --colinatv-gramado-escuro: #1f5c33;
    --colinatv-linha-campo: rgba(255, 255, 255, 0.5);
    --colinatv-overlay-escuro: rgba(10, 12, 16, 0.82);
    --colinatv-overlay-texto: #fff;
    /* Dourado das Edições Douradas do Expresso da Vitória. */
    --colinatv-dourado: #d4af37;
}

/* Badge sobre thumbnails/fotos: fundo escuro FIXO + texto branco FIXO — legível nos dois
   temas (o bg-dark do YNEX inverte no tema escuro e sumia com o texto). */
.badge-escuro {
    background: var(--colinatv-overlay-escuro) !important;
    color: var(--colinatv-overlay-texto) !important;
}

/* Trio login + chat + baixar: bloco único encostado no topo, estilo abas.
   IMPORTANTE: centralizado com margin auto (sem transform) — transform criaria um novo
   referencial para position:fixed e faria o offcanvas do chat abrir "embaixo do botão". */
.topo-central {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    margin-inline: auto;
    width: max-content;
    max-width: calc(100vw - 1rem);
    /* Altura FIXA: painéis (conta/chat/PWA) são fixos/absolutos — nada pode inflar a barra. */
    height: 3.1rem;
    z-index: 1060;
    display: flex;
    align-items: center;
    gap: 0;
    background: rgb(var(--primary-rgb));
    border-radius: 0 0 0.75rem 0.75rem;
    box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.4);
    overflow: visible;
}

/* Cada item (login/chat/tema/pwa) ocupa a altura toda da barra, sempre alinhado. */
.topo-central > * {
    height: 100%;
    display: flex;
    align-items: stretch;
    position: relative;
}

/* Offcanvas do chat aberto: dock de players desliza para a esquerda (largura do offcanvas
   24rem + folga) para não ficar por baixo do chat. */
html.colinatv-chat-aberto .player-dock {
    inset-inline-end: calc(24rem + 1rem);
}

/* Botões unidos (sem espaçamento), como abas: cantos retos entre eles, arredondados só
   nas pontas inferiores do bloco; separados por um filete escuro. */
.topo-central .botao-topo {
    height: 100%;
    min-width: 3.4rem;
    border-radius: 0 !important;
    border: 0;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.75rem;
}

.topo-central > * + * .botao-topo {
    border-inline-start: 1px solid rgba(0, 0, 0, 0.25);
}

.topo-central > :first-child .botao-topo {
    border-end-start-radius: 0.75rem !important;
}

.topo-central > :last-child .botao-topo {
    border-end-end-radius: 0.75rem !important;
}

/* No desktop o toggle do menu (1º item) some: quem herda o canto e perde o filete
   separador é o 2º item (login). */
@media (min-width: 992px) {
    .topo-central > :nth-child(2) .botao-topo {
        border-end-start-radius: 0.75rem !important;
        border-inline-start: 0;
    }
}

/* Popover de prévia da grade EPG (js/epgPopover.js) */
#epg-popover {
    position: fixed;
    z-index: 1090;
    width: min(22.5rem, calc(100vw - 16px));
    display: none;
    flex-direction: column;
    overflow: hidden;
    border-radius: 0.5rem;
    border: 1px solid var(--default-border);
    background: var(--custom-white);
    color: var(--default-text-color);
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

#epg-popover.visivel {
    display: flex;
}

#epg-popover .epg-popover-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    background: rgba(var(--secondary-rgb), 0.15);
}

#epg-popover .epg-popover-corpo {
    padding: 0.65rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

#epg-popover .epg-popover-topo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#epg-popover .epg-popover-meta {
    font-size: 0.6875rem;
    color: var(--text-muted);
}

#epg-popover .epg-popover-titulo {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#epg-popover .epg-popover-canal {
    font-size: 0.6875rem;
    color: var(--text-muted);
}

#epg-popover .epg-popover-desc {
    font-size: 0.75rem;
    line-height: 1.45;
    white-space: pre-line;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    border-block-start: 1px dashed var(--default-border);
    padding-block-start: 0.4rem;
    overflow-wrap: anywhere;
}

#epg-popover .epg-popover-desc.sem-desc {
    color: var(--text-muted);
    font-style: italic;
}


/* ===== Avisos de duelo (Expresso): cards slide-in no canto inferior direito ===== */
.duelo-avisos {
    position: fixed;
    inset-block-end: 1rem;
    inset-inline-end: 1rem;
    z-index: 1092;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: min(22rem, calc(100vw - 2rem));
    pointer-events: none; /* só os cards recebem clique */
}

.duelo-avisos > * {
    pointer-events: auto;
}

/* Vídeo minimizado sobe enquanto houver aviso de duelo aberto — segue assistível. */
.player-dock {
    transition: inset-block-end 0.25s ease;
}

html[data-duelo-aviso] .player-dock {
    inset-block-end: 11.5rem;
}


/* ===== Súmula da disputa (Expresso): dois onzes lado a lado, ⚽ nos autores ===== */
.sumula {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-block: 0.5rem 0.75rem;
}

.sumula-lado {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.14rem;
}

.sumula-direita {
    align-items: flex-end;
    text-align: end;
}

.sumula-time {
    font-weight: 700;
    font-size: 0.82rem;
    margin-block-end: 0.2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 100%;
}

.sumula-linha {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    font-size: 0.75rem;
    line-height: 1.25;
    max-width: 100%;
}

.sumula-direita .sumula-linha {
    flex-direction: row-reverse;
}

.sumula-nome {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sumula-gols {
    color: rgb(var(--success-rgb));
    font-weight: 700;
    font-size: 0.72rem;
    flex: 0 0 auto;
}


/* ===== Odds estilo bet (compartilhado: campanha, duelo, campeonato PvP) ===== */
.odds-linha {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-block: 0.35rem 0.55rem;
}

.odds-linha.justify-content-center { justify-content: center; }

.odd {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.55rem;
    border-radius: 0.4rem;
    border: 1px solid var(--default-border);
    background: rgba(var(--dark-rgb), 0.04);
    font-weight: 800;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.odd-lbl {
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--text-muted);
    border-inline-end: 1px solid var(--default-border);
    padding-inline-end: 0.35rem;
}

/* Modais SEMPRE acima da barra flutuante do topo (perfil/chat/tema, z 1060-1075). */
.modal { z-index: 1085; }
.modal-backdrop { z-index: 1084; }


/* Toast de pontos ganhos assistindo vídeo */
.video-pontos-toast {
    position: fixed;
    inset-block-end: 5rem;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    z-index: 1090;
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    background: rgba(0, 0, 0, 0.85);
    color: #ffd75e;
    font-weight: 800;
    font-size: 0.9rem;
    box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.4);
    transition: opacity 0.6s ease;
}

.video-pontos-toast.some { opacity: 0; }