body {
margin: 0;
padding: 0;
font-family: 'Gabarito', sans-serif;
font-optical-sizing: auto;
background-color: #000;
color: #999;
box-sizing: border-box;
display: flex;
flex-direction: column;
height: 100dvh;
}
img {
vertical-align: middle;
}
a {
color: #fff; /* Color del enlace */
text-decoration: underline; /* Con subrayado */
transition: color 0.3s ease;
}
header {
background-color: #ff333f;
color: #fff;
padding: 1em;
text-align: center;
z-index: 1000;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
header h1 {
font-size: 2em;
font-family: Gabarito, sans-serif;
font-optical-sizing: auto;
font-weight: 900;
margin: 0; /* Eliminar el margen para evitar espacio adicional */
line-height: 4vh; /* Ajustar la altura de la línea para centrar verticalmente */
}
header .logo-link {
text-decoration: none; /* Quitar el subrayado */
color: #fff;
}
header .blinking-dot {
line-height: inherit; /* Hereda la altura de línea del elemento padre (header h1) */
}
.blinking-dot {
animation: blink 1s step-end infinite;
}  
@keyframes blink {
0%,
100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
.shuffle-button {
width: 1.5em;
height: 1.5em;
position: absolute;
left: 1em;
cursor: pointer;
opacity: 1;
transition: transform 0.5s ease;
}
.shuffle-button:hover {
transform: rotate(360deg);
}
.shuffle-button:active {
transform: rotate(0deg);
transition: transform 0s ease;
}
.info-button {
width: 1.5em;
height: 1.5em;
position: absolute;
right: 1em;
cursor: pointer;
opacity: 1;
transition: opacity 0.5s ease;
}
.info-button:hover {
opacity: 1;
}
.info-button:active {
opacity: 0.5;
}
.close-button:hover {
opacity: 1;
}
.info-panel {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 51, 63, 1); /* Fondo rojo con transparencia */
color: #fff;
display: flex;
justify-content: center;
align-items: center;
z-index: 2000; /* Z-index alto para estar encima de otros elementos */
opacity: 0; /* Inicialmente oculto */
pointer-events: none; /* No interactuable */
transition: opacity 0.3s ease; /* Trasición suave de opacidad */
overflow-y: auto; /* Habilita el scroll vertical cuando sea necesario */
}
.info-panel.active {
opacity: 1; /* Mostrar panel */
pointer-events: auto; /* Hacer interactuable */
}
.info-content {
width: 80%;
max-width: 600px;
padding: 0;
text-align: left;
max-height: 90%; /* Altura máxima del contenido */
overflow: auto; /* Habilita el scroll en caso de que el contenido exceda la altura máxima */
}
.info-content p {
margin: 0;
padding: 0;
}
.info-content h2 {
font-size: 2.53em;
font-weight: 900;
line-height: 0.9em;
margin-top: 0;
margin-bottom: 0;
}
.info-content h3 {
font-size: 1.5em;
margin-top: 1em;
margin-bottom: 0.2em;
}
.info-content a {
font-weight: 400;
}
.info-content a:hover {
text-decoration: none;
} 
.close-button {
position: absolute;
top: 0.5em;
right: 0.5em;
padding: 0;
border: none;
color: #fff;
cursor: pointer;
background: none;
opacity: 1;
transition: opacity 0.3s ease;
}
.close-button img {
width: 5em;
height: 5em;
}
.close-button:hover {
opacity: 1;
}
.close-button:active {
opacity: 0.5;
}
main {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden; /* Oculta el contenido que sobresale */
padding: 0.8em;
position: relative; /* Posición relativa para contener las flechas */
}
.ticker {
background: #000;
color: #999;
padding: 1em 0 0 0;
overflow: hidden;
height: 1.5em;
position: relative; /* Añadido para contener los mensajes */
text-align: center; /* Centrar contenido horizontalmente */
font-size: 0.9em;
display: flex;
justify-content: center;
align-items: center;
}
.ticker a {
color: #ccc; /* Color del enlace */
text-decoration: underline; /* Con subrayado */
transition: color 0.3s ease;
}
.ticker a:hover {
color: #fff; /* Color al pasar el cursor */
}
.message {
transition: opacity 1s ease; /* Transición suave de opacidad */
}
.message.hidden {
opacity: 0;
}
.message-type {
color: #999;
border: 0.2em solid #666;
border-radius: 0.5em; /* Punta redondeada */
padding: 0.2em 0.5em 0.2em 0.5em; /* Espacio interno alrededor del texto */
margin-right: 0.6em;
vertical-align: middle;
display: inline-block; /* Mantener el tamaño según el contenido */
font-size: 0.7em;
font-weight: 600;
}
/* Estilo exclusivo para la imagen del ícono */
.social-icon {
width: 2em; /* Tamaño del ícono */
height: auto; /* Mantener proporciones */
vertical-align: middle; /* Alinear con el texto */
margin: 1em; /* Espaciado entre la imagen y otros elementos */
opacity: 0.5; /* Opacidad cuando está inactiva */
transition: opacity 0.3s ease; /* Suaviza la transición de opacidad */
}

/* Sin opacidad al pasar el cursor */
.social-icon:hover {
    opacity: 1; /* Recupera opacidad completa al estar activa */
}
.container {
flex: 1;
position: relative;
overflow: hidden; /* Oculta el contenido que sobresale */
border: 0.125em solid #444; /*= 2px */
border-radius: 0.6em;
margin-bottom: 0.5em;
}
iframe {
width: 100%;
height: 100%;
border: none;
border-radius: 0;
}
#iframe-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.chip-menu-container,
.botonera-container {
display: flex;
flex-direction: column;
overflow-x: auto;
position: relative;
margin: 0.1em;
overflow: hidden; /* Evita el desplazamiento vertical */
}
.chip-menu-container::before,
.chip-menu-container::after {
content: "";
position: absolute;
top: 0;
width: 5%; /* Ajusta el ancho del degradado */
height: 100%;
z-index: 1; /* Asegura que el degradado esté sobre los botones */
pointer-events: none; /* Permite hacer clic en los botones a través del degradado */
}
.chip-menu-container::before {
left: 0;
background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); /* Degradado de izquierda a derecha */
}
.chip-menu-container::after {
right: 0;
background: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); /* Degradado de derecha a izquierda */
}
.botonera-container::before,
.botonera-container::after {
content: "";
position: absolute;
top: 0;
width: 5%; /* Ajusta el ancho del degradado */
height: 100%;
z-index: 1; /* Asegura que el degradado esté sobre los botones */
pointer-events: none; /* Permite hacer clic en los botones a través del degradado */
}
.botonera-container::before {
left: 0;
background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); /* Degradado de izquierda a derecha */
}
.botonera-container::after {
right: 0;
background: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); /* Degradado de derecha a izquierda */
}
.chip-menu,
.botonera {
display: flex;
align-items: center;
padding: 0em;
overflow-x: auto;
white-space: nowrap;
position: relative;
flex: 1;
margin: 0 2.5em; /* Margen a los lados para evitar superposición con flechas */
scrollbar-width: none; /* Oculta la barra de desplazamiento en Firefox */
-ms-overflow-style: none; /* Oculta la barra de desplazamiento en IE/Edge */
}
.chip-menu::-webkit-scrollbar,
.botonera::-webkit-scrollbar {
display: none; /* Oculta la barra de desplazamiento en WebKit (Chrome, Safari) */
}
.chip {
font-size: 0.8em;
display: inline-block;
padding: 1em 2em;
background-color: #222;
border-radius: 2em;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0.8em;
margin-right: 0.8em;
}
.chip.active {
background: linear-gradient(to bottom, #000, #333); /* Degradado de gris oscuro a negro */
border: 0.125em solid #333;
color: #fff;
}
.chip:hover {
background-color: #333;
color: #fff;
}
.boton {
font-size: 0.6em;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1em;
margin: 0 1em;
background-color: #222;
color: #999;
border: none;
border-radius: 1em;
cursor: pointer;
opacity: 0; /* Inicialmente oculto */
transition: opacity 0.5s ease, background-color 0.3s ease;
text-align: center;
max-width: 10em; /* Ancho máximo del botón */
min-width: 10em; /* Tamaño mínimo del botón */
overflow: hidden; /* Ocultar contenido que sobresale */
position: relative; /* Asegura que el contenido esté posicionado correctamente */
}
.boton.fade-in {
opacity: 1; /* Mostrar botón con fade-in */
}
.boton:hover {
background-color: #333;
}
.boton.active {
color: #fff;
background: linear-gradient(to bottom, #000, #333); /* Degradado de gris oscuro a negro */
border: 0.125em solid #333;
}
.boton img {
width: 100%; /* Ancho máximo para la imagen */
height: 100%; /* Altura máxima para la imagen */
max-width: 80%; /* Tamaño máximo para la imagen */
object-fit: contain; /* Ajuste de la imagen para mantener la proporción */
margin-bottom: 0.5em; /* Espacio entre la imagen y el texto */
opacity: 0.5;
transition: opacity 0.3s ease;
}
.boton:hover img {
opacity: 1;
}
.boton.active img {
opacity: 1;
}
.nav-button {
background-color: #222; /* Color de fondo del contenedor */
color: #666;
border: 0;
cursor: pointer;
position: absolute;
top: 0;
bottom: 0; /* Ocupa todo el alto del contenedor */
z-index: 1000;
transition: background-color 0.3s ease;
}
.nav-button img {;
opacity: 0.3;
transition: opacity 0.3s ease;
}
.nav-button.left {
left: 0;
border-top-right-radius: 0.5em;
border-bottom-right-radius: 0.5em;
}
.nav-button.right {
right: 0;
border-top-left-radius: 0.5em;
border-bottom-left-radius: 0.5em;
}
.nav-button:hover {
background-color: #333; /* Cambia el color al hacer hover */
}

/* Media Query para dispositivos móviles */
@media (max-width: 768px) {
  body {
    height: 100dvh; /* Ajusta la altura en dispositivos móviles */
  }
  .nav-button {
    display: none; /* Oculta las flechas de navegación en dispositivos móviles */
  }
  .chip-menu, .botonera {
    margin: 0 !important; /* Elimina el espacio utilizado por las flechas en dispositivos móviles */
  }
}

/* Media Query para dispositivos móviles en posición horizontal */
@media (max-height: 480px) and (orientation: landscape) {
  body {
    height: 100dvh; /* Ajusta la altura en dispositivos móviles */
  }
  header, 
  .ticker, 
  .chip-menu-container, 
  .botonera-container {
    display: none !important; /* Oculta los elementos especificados */
  }
}