/* --- START OF FILE style.css --- */

/* Estilos para el contenedor principal del menú (MOVIMIENTO A LA IZQUIERDA) */
.rss {
  position: fixed;
  top: 10px; /* Ajusta este valor si quieres que esté más arriba o más abajo */
  left: 10px; /* Esto lo coloca a 10px del borde izquierdo */
  /* Asegúrate de que no haya una propiedad 'right' que lo anule si la habías puesto antes */
  z-index: 999999; /* Asegúrate de que esté por encima de todo */
  display: flex; /* Para que los botones se alineen horizontalmente */
  align-items: center; /* Alineación vertical de los botones */
  justify-content: flex-start; /* Alineación horizontal a la IZQUIERDA */
}

/* Estilos base para todos los botones compartidos (secundarios y principal) */
.shareButton {
  background: #222; /* Fondo oscuro por defecto para botones secundarios */
  border: none;
  border-radius: 50%;
  padding: 10px; /* Tamaño del padding para el círculo del botón */
  margin: 5px;
  cursor: pointer;
  box-sizing: content-box; /* padding no afecta width/height del contenido */
  width: 24px; /* Tamaño del SVG/imagen */
  height: 24px; /* Tamaño del SVG/imagen */

  /* Centrar SVG/IMG dentro del botón */
  display: flex;
  justify-content: center;
  align-items: center;

  /* Ocultar por defecto los botones secundarios */
  opacity: 0;
  visibility: hidden;
  transform: scale(0.7) translateY(10px); /* Un poco más pequeño y hacia abajo al estar oculto */
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

/* Estilos para los iconos dentro de los botones secundarios */
.shareButton:not(.main) svg, 
.shareButton:not(.main) img {
  width: 24px;
  height: 24px;
  fill: #fff; /* Asegura el color blanco para los SVG de botones secundarios */
}

/* El botón principal siempre visible */
.shareButton.main {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  background: #fff; /* Fondo blanco para el botón principal */
  box-shadow: 0 0 0 rgba(0, 0, 0, 0); /* Eliminar box-shadow inicial si no lo quieres */
}

/* **IMPORTANTE:** Color de los SVGs dentro del botón principal */
.shareButton.main svg.share,
.shareButton.main svg.close {
  fill: #ff0000; /* Color rojo para la hamburguesa y la 'X' */
}


/* Estilos de hover para todos los botones */
.shareButton:hover {
  transform: scale(1.1); /* Ligeramente más grande al pasar el ratón */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
}

/* Cuando el botón principal abre el menú, los botones secundarios reciben la clase 'active' */
.shareButton.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
}

/* Iconos del botón principal (hamburguesa vs X) */
/* Posicionar los iconos dentro del botón principal */
.shareButton.main .share,
.shareButton.main .close {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centrado perfecto */
  transition: all 0.3s ease; /* Transición suave para el cambio de icono */
}

/* Ocultar la 'X' por defecto */
.shareButton.main .close {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg) scale(0);
}

/* Ocultar la hamburguesa cuando el menú está 'open' */
.shareButton.main.open .share {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg) scale(0);
}

/* Mostrar la 'X' cuando el menú está 'open' */
.shareButton.main.open .close {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

/* Aplicar delays para que los botones secundarios aparezcan uno tras otro */
/* (Puedes ajustar el orden y los tiempos aquí si quieres) */
.shareButton.active.wt { transition-delay: 0.2s; } /* WhatsApp aparecerá más tarde */
.shareButton.active.fb { transition-delay: 0.1s; } /* Facebook en medio */
.shareButton.active.ig { transition-delay: 0s; } /* Instagram aparecerá primero */


/* --- Tus otros estilos existentes que no interfieren con el menú --- */

/* Btn Digitarte (asegurado display:none en tu código html) */
.digit {
  display: none; /* Mantengo tu display: none; si no está en index.html */
}

/* Btn Wps flotante */
.wsp {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100; /* Asegura que esté sobre otros elementos, pero debajo del menú principal si es necesario */
}
.wsp img {
  width: 60px;
  height: 60px;
}

/* Reproductor de radio */
.radio-player {
  width: 100%;
  max-width: 800px;
  height: 550px;
  background-color: rgba(9,15,25,0.8);
  border-radius: 8px;
  margin: 20px auto;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* Video */
.video-container {
  width: 100%;
  max-width: 800px;
  margin: 20px auto;
}
.video-container video {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* Footer */
.footer {
  width: 100%;
  text-align: center;
  padding: 1rem 0;
  color: #fff;
  font-family: 'Saira Condensed', sans-serif;
  margin-top: auto;
  background-color: rgba(0,0,0,0.5);
}

/* Estilos para el botón de instalación de PWA */
#installButton {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
#installButton img {
  width: 115px;
  top: 4px;
  left: 4px;
  position: fixed;
  height: 35px;
  transition: transform 0.3s ease;
}
#installButton img:hover {
  transform: scale(1.1);
}