/* 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. */
.app-content {
    margin-block-start: 0 !important;
}

/* 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;
}

/* Botão flutuante que substitui o toggle da sidebar em telas <992px (ficava no header). */
.menu-toggle-flutuante {
    position: fixed;
    inset-block-start: 0.75rem;
    inset-inline-end: 0.75rem;
    z-index: 1035;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.35);
}

/* Token novo (padrão YNEX): borda dos elementos flutuantes sobre o conteúdo. */
:root {
    --colinatv-borda-flutuante: #fff;
}

/* 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;
    z-index: 1060;
    display: flex;
    align-items: stretch;
    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);
}

/* 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: 2.9rem;
    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;
}

/* 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;
}