/* --- Estilos Globales --- */
html, body {
	position: relative; /* Asegura que el pseudo-elemento se posicione relativo al body */
  font-family: "Open Sans", sans-serif;
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  color: #272829;
  overflow: hidden;
  background-color: #000;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  z-index: 0;
  width: 100%;
}

body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6); /* Negro con 80% de transparencia */
  pointer-events: none;  /* Para que no interfiera con la interacción */
  z-index: 0;
}
/* Reproductor */
#player {
  background-size: cover;
  background-position: center;
  border-radius: 15px;
  margin: 100px auto 0;
  width: 40%;
  height: 50%;
  padding: 20px 0;
  background: transparent !important;
}
@media only screen and (max-width: 768px) {
  #player {
    width: 80%;
    height: 45%;
  }
}

/* Botones rojos  ANTERIO*/
/*.btn-red {
  background-color: #9d1717;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 15px;
  font-size: 16px;
  cursor: pointer;
  text-align: left;
  font-family: sans-serif;
  width: 200px;
  display: inline-block;
  white-space: nowrap;
  margin-bottom: 10px;
}*/

.btn-red {
  background: transparent;/* Fondo transparente */
  
  border-radius: 10px;  /* Bordes redondeados más pronunciados (15px) */
  color: #fff;/* Texto blanco */
  font-size: 16px;/* Ajusta el tamaño de la fuente como prefieras */
  font-family: sans-serif;
  padding: 10px 15px;/* Espaciado interno */
  width: 200px;/* Mantén la anchura si lo deseas */
  text-align: left;  /* Centrado o alineado a la izquierda, según prefieras */
  display: inline-block;/* Efectos generales */
  white-space: nowrap;
  margin-bottom: 10px;
  cursor: pointer;
  transition: background 0.2s ease;/* Suaviza la transición al hacer hover */
}

.btn-red i {
  margin-right: 8px;
}
.btn-red:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* OFFCANVAS (menú unificado) */
/* Móvil (<768px): offcanvas con ancho 80%, fondo 70% */
@media (max-width: 768px) {
  #menuContainer.offcanvas-start {
    width: 80% !important;
    background-color: rgba(0,0,0,0.7)!important; 
  }
}
/* Escritorio (≥768px): menú fijo a la izquierda */
@media (min-width: 768px) {
  #menuContainer.offcanvas-start {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 250px !important;
    min-height: 100vh !important;
    transform: none !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: none;
  }
  /* Oculta el botón close en escritorio */
  #menuContainer .btn-close {
    display: none !important;
  }
}

/* Contenido interno del offcanvas */
.offcanvas-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Divide en dos secciones: menuTop y tvSection */
  align-items: flex-start;
  height: 100%;
  padding: 1rem;
  margin-top: 20px;
}


/* Sección TV en vivo: aparece solo en PC */
#tvSection {
  display: block;
}
@media (max-width: 767.98px) {
  #tvSection {
    display: none;
  }
}

#copyMenu {
  font-size: 14px;
  color: #fff;
  text-align: center;
  
}

.offcanvas-body img {
  max-width: 150px;
  margin-bottom: 1rem;
}

/* Botón hamburguesa/X en móvil */
#menuBtn {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
}
@media (min-width: 768px) {
  #menuBtn {
    display: none;
  }
}

/* Footer unificado */
#footerBar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column; 
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
}

/* Íconos arriba en móvil y escritorio */
#socialIcons {
  display: flex;
  gap: 15px;
  padding: 10px 0; /* Espacio vertical para íconos en móvil */
}

/* Íconos circulares (tamaño de escritorio por defecto) */
.social-icon {
  width: 60px;
  height: 60px;
  border: 2px solid #fff;
  border-radius: 50%;
  /* Quitamos line-height y usamos flex para centrar vertical/horizontal */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 30px;
  text-decoration: none;
  transition: background 0.2s ease;
  margin-bottom: 10px;
}
.social-icon:hover {
  background: rgba(255,255,255,0.2);
}

/* Texto con fondo semitransparente en móvil */
#footerCopy {
  background: rgba(0,0,0,0.8);
  color: #fff;
  text-align: center;
  font-size: 13px;
  width: 100%;
  padding: 8px 0; 
}

/* Vista escritorio (≥768px) */
@media (min-width: 768px) {

  /* Footer en esquina inferior derecha */
  #footerBar {
    bottom: 15px;
    right: 15px;
    width: auto;
    left: auto;
    flex-direction: row;
    background: none; 
  }

  /* Íconos mantienen tamaño 50px, 
     texto de copyright NO se muestra en PC */
  #footerCopy {
    display: none !important; /* Oculta en escritorio */
  }
}

/* Vista móvil (<768px) */
@media (max-width: 767.98px) {
  /* Íconos más pequeños en móvil */
  .social-icon {
    width: 30px;
    height: 30px;
    font-size: 15px;
    line-height: 26px;
  }
}








/* Contenedor para el reloj, estilo similar a btn-red */

@font-face {
  font-family: 'DS-DIGIB';
  src: url('../font/DS-DIGIB.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
}


#clockContainer {
  font-family: 'DS-DIGIB', sans-serif;
  font-size: 28px; /* Ajusta el tamaño a tu gusto */
  color: #fff;
  background: transparent;
  border: 1px solid #fff;
  border-radius: 10px;
  padding: 0px 15px;
  width: 190px;
  text-align: center;
}

/* En versión PC (≥768px): posicionar el reloj en la esquina superior derecha */
@media (min-width: 768px) {
  #clockContainer {
    position: fixed;
    top: 30px;
    right: 20px;
    margin: 0;
  }
}

/* En versión móvil (<768px): colocar el reloj en el flujo, justo encima del reproductor */
@media (max-width: 767.98px) {
  #clockContainer {
    position: absolute;
    font-size: 24px;
    left: 50%;
    transform: translateX(-50%);
    top: 80px;        /* Ajusta para controlar la distancia desde arriba */
    margin-bottom: 50px; /* Espacio extra debajo */
    z-index: 2;       /* Para asegurarlo encima de la capa oscura */
    text-align: center;
  }
}









/* Estilo para el botón instalar, similar a btn-red, pero con su propia clase */
/* En tu CSS */
.btn-instalar {
  background: transparent;
  border: 1px solid #fff;
  border-radius: 10px;
  color: #fff;
  font-size: 16px;
  font-family: sans-serif;
  padding: 10px 15px;
  width: 135px;
  display: block;          /* Para que ocupe todo el ancho disponible y se pueda centrar */
  text-align: center;
  white-space: nowrap;
  margin: 10px auto;       /* Centrado horizontal con margen superior/inferior */
  cursor: pointer;
  transition: background 0.2s ease;
}
.btn-instalar:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Si quieres mostrarlo solo en móvil: */
#install-button-container-footer {
  display: block;
}
@media (min-width: 768px) {
  #install-button-container-footer {
    display: none; /* Oculta en PC */
  }
}