/* Geral para a TV */
body {
  background-color: #330A00;
  /* Tom bem escuro de #a23 para o fundo principal */
  color: #E0E0E0;
  /* Texto claro para contraste */
  font-family: 'Roboto', sans-serif;
  /* Fonte de alta legibilidade */
  margin: 0;
  /* overflow: hidden; */
  /* Evita barras de rolagem */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  /* Ocupa a altura total da tela */
  width: 100vw;
  /* Ocupa a largura total da tela */
}

.painel-header {
  text-align: center;
  /* margin-bottom: 3vh; */
  /* Margem responsiva */
  /* padding: 2vh 5vw; */
  /* background-color: #551100; */
  /* Tom mais claro de #a23 para o cabeçalho */
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.painel-header h1 {
  font-size: 3vw;
  /* Tamanho da fonte responsivo */
  font-weight: bold;
  color: #FFFFFF;
  /* Branco puro para destaque */
  margin-bottom: 1vh;
  letter-spacing: 0.1vw;
  /* Espaçamento entre letras */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

.painel-header p {
  font-size: 2.5vw;
  color: #CCCCCC;
  font-style: italic;
}

/* Container do Swiper */
.painel-swiper {
  width: 95vw;
  /* Ocupa 90% da largura da tela */
  height: 90vh;
  /* Ocupa 60% da altura da tela */
  background-color: #A23;
  /* A cor principal #a23 para o fundo do carrossel */
  border-radius: 20px;
  /* Bordas arredondadas suaves */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  /* Sombra mais forte para profundidade */
  position: relative;
  overflow: hidden;
  /* Importante para o fade */
}

/* Slides individuais */
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: #A23;
  /* Garante que o fundo do slide seja o mesmo do container */
  color: #E0E0E0;
  padding: 0.5vw;
  /* Padding interno responsivo */
  box-sizing: border-box;
  /* Transição de fade será controlada pelo JS do Swiper */
}

.slide-content {
  width: 100%;
  max-width: 100vw;
  /* Garante que o conteúdo não seja muito largo */
}

.swiper-slide h1 {
  font-size: 3vw;
  font-weight: bold;
  margin-bottom: 3vh;
  color: #FFFFFF;
  letter-spacing: 0.1vw;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.swiper-slide h2 {
  font-size: 2.5vw;
  margin-bottom: 3vh;
  color: #FFFFFF;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

/* Tabela de Eventos */
table {
  width: 100%;
  border-collapse: collapse;
  /* Remove espaçamento entre as células */
  margin-top: 2vh;
  font-size: 1.6vw;
  /* Tamanho da fonte grande para fácil leitura */
}

th,
td {
  padding: 1.5vh 1.5vw;
  /* Padding responsivo para células */
  text-align: left;
  border-bottom: 1px solid #CC4400;
  /* Linha sutil para separar as linhas, em tom de laranja-avermelhado */
}

th {
  background-color: #882200;
  /* Fundo mais escuro para o cabeçalho da tabela */
  color: #FFFFFF;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05vw;
}

tbody tr:nth-child(even) {
  background-color: #771A00;
  /* Cor de fundo para linhas pares (zebra striping) */
}

tbody tr:hover {
  background-color: #CC4400;
  /* Efeito hover para feedback visual (mesmo em painéis fixos) */
  cursor: default;
  /* Remove o cursor de "mão" */
}

/* Remover botões e paginação padrão do Swiper, se não forem usados */
.swiper-button-prev,
.swiper-button-next,
.swiper-pagination {
  display: none !important;
  /* Esconde elementos que não são úteis em um painel de TV */
}

/* Opcional: Adicionar um logotipo ou um pequeno elemento de marca */
.logo {
  position: absolute;
  top: 2vh;
  left: 2vw;
  width: 10vw;
  /* Tamanho do logo responsivo */
  opacity: 0.7;
  z-index: 10;
}

/*********RSS TICKER*********/
/* A barra principal, agora usando Flexbox */
#ticker-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #1a1a1a;
  color: #ffffff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
  font-family: 'Segoe UI', Arial, sans-serif;
  display: flex;
  /* ATIVA O FLEXBOX */
  align-items: center;
  /* Alinha os itens verticalmente ao centro */
  height: 45px;
  /* Altura fixa para a barra */
}

/* Estilos para os containers do relógio e do clima */
#clock-container,
#weather-container {
  padding: 0 20px;
  font-size: 1.1em;
  font-weight: bold;
  background-color: #1a1a1a;
  height: 100%;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  /* Impede que esses containers encolham */
}

/* Container do meio (notícias), que deve ocupar o espaço restante */
#news-ticker-container {
  flex-grow: 1;
  /* Faz este container crescer e ocupar o espaço livre */
  overflow: hidden;
  /* ESSENCIAL: Esconde as notícias fora desta área */
  white-space: nowrap;
  height: 100%;
}

/* O conteúdo que efetivamente rola (a linha de notícias) */
.ticker-content {
  display: inline-block;
  padding-left: 100%;
  animation: scroll-ticker 80s linear infinite;
  /* Alinha o texto das notícias com o relógio/clima */
  line-height: 45px;
}

/* Pausa a animação ao passar o mouse sobre a área de notícias */
#news-ticker-container:hover .ticker-content {
  animation-play-state: paused;
}

/* A animação continua a mesma */
@keyframes scroll-ticker {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

/* Estilos para os itens de notícia e separadores */
.news-item {
  font-size: 1em;
  text-decoration: none;
  color: #fff;
}

.separator {
  margin: 0 25px;
  color: #ff5733;
  font-weight: bold;
}