/*
 * Guia de TV - Estilo Moderno e Escuro (Versão final e definitiva)
 * Este CSS é adaptado para a estrutura HTML e resolve os conflitos com o tema.
 */

/* ------------------------------------- */
/* --- Variáveis e Estilos Globais --- */
/* ------------------------------------- */

:root {
  --bg-color: #1a1a1a !important;
  --bg-container-color: #2a2a2a !important;
  --text-color: #e0e0e0 !important;
  --accent-color: #e74c3c !important; /* Vermelho para a barra de progresso */
  --border-color: #444 !important;
  --hover-color: #383838 !important;
  --active-channel-color: #e74c3c !important;
}

body {
  line-height: 1.6;
}



/* ----------------------------- */
/* --- Estilos da Lista EPG --- */
/* ----------------------------- */

/* Container principal da lista de programas */
.epg-lista {
  background-color: var(--bg-container-color) !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* Item individual do programa */
.epg-bloco {
  position: relative !important;
  padding: 15px !important;
  border-bottom: 1px solid var(--border-color) !important;
  background-color: transparent !important;
  transition: background-color 0.2s ease;
  overflow: hidden !important;
}

/* Estilo para o programa que está no ar */
/*
 * Ajuste no estilo para o bloco de programa no ar
 */
.epg-bloco.on-air {
  /* Mantém um fundo sutil para indicar o programa no ar */
  background-color: var(--hover-color) !important;
  /* Remove a borda vermelha, deixando o destaque apenas para a barra de progresso */
  border-left: none !important;
}

/*
 * Ajuste na barra de progresso para se destacar mais
 */
.epg-bloco.on-air .progress-bar {
  display: block !important;
  background-color: var(--accent-color) !important;
  /* Aumenta a opacidade para que a barra seja mais visível */
  oXpacity: 0.5 !important;
  height: 100% !important;
  z-index: 1 !important;
  transition: width 0.5s ease-in-out !important;
}

/* Efeito de hover nos programas */
.epg-bloco:hover {
  background-color: var(--hover-color) !important;
}

/* Garante que o último item não tenha borda inferior */
.epg-lista .epg-bloco:last-child {
  border-bottom: none !important;
}

/* Estilos para as informações do programa */
.epg-hora {
  font-size: 0.9em !important;
  color: #aaa !important;
  display: block !important;
  margin-bottom: 5px !important;
  position: relative !important;
  z-index: 2 !important;
}

.epg-titulo {
  font-size: 1.1em !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

.epg-desc {
  font-size: 0.9em !important;
  color: var(--text-color) !important;
  margin-top: 10px !important;
  position: relative !important;
  z-index: 2 !important;
}

/* ----------------------------- */
/* --- Barra de Progresso --- */
/* ----------------------------- */

/* O container 'progress' é forçado a aparecer apenas dentro do bloco 'on-air' */
.epg-bloco.on-air .progress {
 display: block !important;
  position: absolute !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  opacity: 1 !important; /* Garante que o container não seja transparente */
}

/* A barra de progresso em si */
.epg-bloco.on-air .progress-bar {
  display: block !important;
  background-color: var(--accent-color) !important;
/*  opacity: 0.3 !important; /* Torna a barra semitransparente para ver o texto */
  height: 100% !important;
  z-index: 1 !important;
}

/* Garante que o resto do texto também tenha a cor correta */
/* #app, .container, .row, .col-md-12, .chanel_contents, .content {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
} */

/* Correçao  */
#app, .row, {
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
}

/* Estilo para a imagem do canal */
.chanel_image img {
    border-radius: 8px !important;
    background-color: #000 !important;
    padding: 10px !important;
	border: 1px solid #c8ccd1;
}

/* Estilo Teste 1 */
.chanel_image img {
	float: left;
	margin-left:50px;
    margin-right:0.5em;
	margin-bottom:20px;
	width:175px;
	height:90px;
/*  border-width: 0.5em 1.4em 0.8em 0;*/
}

/* A Seguir */ 
.aseguir {
	 color: #fff;
  font-family: Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol');
  width: 100%; text-align: center;margin-top:10px;   
} 

/* Esconde a descrição em telas pequenas */
@media (max-width: 768px) {
  .epg-desc.small {
    display: none !important;
  }
}