body {
    font-size: 12px;
    line-height: 0.5; /* Espacio Barra Busqueda */
    font-family: Arial, Helvetica, sans-serif;
    color: #ff0080;
    background: url('images/body-bg-01.gif');
    /*background: url('images/body-bg-02jpg');*/
    background-color: #000000;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
}


header, #main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: var(--header-height);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(0,0,0,0.9);
    box-shadow: 0 1px 6px rgba(0,0,0,0.3);
}

:root {
  --header-bg: rgba(0,0,0,0.85);
  --header-height: 72px; /* valor por defecto inicial; JS recalcula si hace falta */
  --header-gap: 6px;
}

/* Header: columna con dos áreas */
header#main-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;            /* auto porque son dos filas */
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: var(--header-gap);
  background: linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0.6));
  box-shadow: 0 2px 14px rgba(0,0,0,0.5);
  padding: 8px 12px;
  box-sizing: border-box;
  backdrop-filter: blur(6px);
}

/* fila superior: menú */
.header-top {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

/* fila inferior: reproductores (centro) */
.header-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8px;
}

/* wrapper de reproductores */
.players {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
  max-width: 1200px;
  width: 100%;
  padding: 4px;
  box-sizing: border-box;
}

/* elementos individuales (video y radio) */
.player-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.02);
  padding: 6px;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}

/* video container: tamaño elegante y responsivo */
#video-container {
  width: 460px;
  height: 260px;
  max-width: 48vw;
  max-height: 34vh;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
}

/* radio: compacto */
#radioPlayer audio {
  width: 260px;
  max-width: 36vw;
}

/* estilo de foco visible (útil para TV remote) */
.header-bottom .player-item:focus,
.header-bottom .player-item:focus-within {
  outline: 3px solid rgba(242,162,35,0.9);
  outline-offset: 3px;
}

/* Ajustes para móviles y TV (pantallas pequeñas) */
@media (max-width: 900px) {
  .players { gap: 10px; }
  #video-container { width: 320px; height: 180px; max-width: 66vw; max-height: 220px; }
  #radioPlayer audio { width: 180px; }
}

@media (max-width: 600px) {
  header#main-header {
    padding: 6px 10px;
  }
  .players {
    flex-direction: column;
    gap: 10px;
  }
  #video-container {
    width: 88vw;
    height: calc(88vw * 9 / 16); /* 16:9 responsive */
    max-height: 300px;
  }
  #radioPlayer audio { width: 70vw; max-width: 360px; }
  /* Ajustar menú para navegación por remote */
  .elegant-menu .main-menu { gap: 8px; flex-wrap: wrap; justify-content: center; }
}

/* Ajustes para el contenido dentro del header cuando la pantalla es más alta (desktop) */
@media (min-width: 901px) {
    :root{ --header-height: 88px; }
    header, #main-header {
        height: var(--header-height);
        padding: 10px 16px;
    }
}

/* Si quieres un header más alto en pantallas muy grandes */
@media (min-width: 1400px) {
    :root{ --header-height: 110px; }
}

/* En pantallas pequeñas mantener el header compacto */
@media (max-width: 600px) {
    :root{ --header-height: 64px; }
    header, #main-header {
        height: var(--header-height);
        padding: 6px 10px;
    }

    /* Asegurar que el menú horizontal se adapte y no desborde */
    .elegant-menu .main-menu {
        gap: 6px;
        flex-wrap: wrap;
    }
}

/* Evitar que elementos del body empujen el header fuera de la pantalla */
.carrusel-container, .carrusel-container * {
    max-width: 100% !important;
}

.header-flex {
    display: flex;
    flex-direction: column;
    width: 100%; 
    gap: 20px; 

}

.movie-image {
    float: left;
    width: 152px;
    height: 214px;
    position: relative;
}

.movie-image img {
    width: 152px;
    height: 214px;
}

.movie-image a {
   float: left;
   display: inline;
   width: 152px;
   height: 214px;
   position: relative;
   z-index: 2;
}


.rating {
    float: left;
    width: 110px; /* ancho de la caratula */
    height: 240px; /* altura total incluyendo espacio para texto y estrellas */
    margin: 1px; /* espacio entre caratulas */
    padding-top: 1px; /* espacio arriba de la caratula */
    text-align: justify-all;
}
    .rating p {
        float: left;
        font-size: 10px;
        color: #fff;
        font-weight: bold;
    }
    .rating img {
        width: 100%;
        height: auto;
        max-height: 150px;
        object-fit: contain;
        box-shadow: 0 0 6px rgba(0,0,0,0.3);
        transition: transform 0.3s ease;
    }
        .rating img:hover {
            transform: scale(1.15);
        }
    .rating .stars {
        float: left;
        width: 60px;
        height: 11px;
       /* background: url('images/stars.gif') no-repeat 0 0;*/
        margin-left: 2px;
    }
    .rating .stars-in {
        width: 48px;
        display: inline;
        /*background: url('images/stars.gif') no-repeat 0 bottom;*/
        position: absolute;
        height: 11px;
        font-size: 0;
        line-height: 0;
        text-indent: -4000px;
    }


/* Estilo PARA MOVILES */

@media (max-width: 300px) { /*600px*/
    .player-area {
        flex-direction: column;
        gap: 52px; /* 52px espacio entre video y radio*/
        flex: 1 1 60%; /* Ajusta el tamaño según sea necesario */
        width: 100%; /* Asegura que ocupe todo el ancho disponible */
        min-width: 150px; /* 250px Ancho mínimo para móviles */
        max-width: 500px; /* 500px Ancho máximo para móviles */
        min-height: 200px; /* Altura mínima para móviles */
        display:flex; /* Asegura que sea un contenedor flex */
        align-items: flex-start; /* Alinea los elementos al inicio */
        justify-content: flex-start; /* Justifica los elementos al inicio */
        align-items:normal; /* Centra los elementos horizontalmente */
    }


    /* Asegúrate de que este estilo esté en tu hoja de estilos principal */
    #video-container {
        width: 150%; /* Ancho que desees */
        height: 300%; /* Altura que desees */
        max-width: 100%;
        min-height: 100%; /* Es crucial para que el GIF sea visible */
        /*background-color: black;*/
        flex: 0 1 100%;
        display: none; /* Oculta el video por defecto en móviles */
    }

    /* Esto DEBE estar en tu archivo CSS (no en el HTML/script) */
        #video-container.radio-activo {
            /* Ruta de la imagen: Asegúrate que sea correcta */
            background-image: url('images/galvanometro.gif');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            /* Necesitas una altura mínima para ver el GIF */
            min-height: 250px;
            /*background-color: black;*/
        }

    /* Opcional: Define estilos para el contenedor base si aún no lo has hecho */
    #video-container {
        width: 100%;
        min-height: 250px; /* Asegura que haya espacio para el GIF */
        /*background-color: black;*/
        /* Otros estilos base... */
    }
}


/* Estilo base para capa1 */
/* Solo se aplica cuando el dispositivo está en landscape */
@media screen and (orientation: landscape) { /* Pantalla horizontal */
    .capa1 {
        position: fixed; /* Fija el video en la pantalla */
        top: 10%; /* Alinea al tope */
        left: 0; /* Alinea a la izquierda */
        width: 100%; /* Ocupa todo el ancho */
        height: 100%; /* Ocupa toda la altura */
        z-index: 9999; /* Asegura que esté encima de otros elementos */
        /*background: url('images/body-bg.gif');  Fondo */        
        display: flex; /* Usa flexbox para centrar el video */
        align-items: center; /* Centra verticalmente */
        justify-content: center; /* Centra horizontalmente */
    }
 }

/* Estilos específicos para cuando es un reproductor de radio */
.radio-activo {
    /* Tu GIF de Galvanómetro 
    background-image: url('images/case.gif');*/
    background-size: 20px; /* Ajusta el tamaño para que se vea completo */
    background-repeat: no-repeat;
    background-position: right;
    /* Necesitas una altura mínima para ver el GIF */
    min-height: 100px;
    max-height: 200px;
    min-width: 100px;
    max-width: 200px;
    width: 200px;
    height: 200px;
    /*background-image: url('images/body-bg.gif');*/
}

#radioPlayer {
    position:relative; /* Para posicionar el botón */
    padding-top: 40px; /* Espacio para el botón */
    display:none; /* Oculto por defecto */
}

#volverVideoBtn button {
    /*background-color: #222;*/
    color: #fff;
    border: none;
    padding: 6px 10px;
    font-size: 14px;
    /*border-radius: 6px;*/
    font-weight: bold;
    box-shadow: 0 0 6px rgba(255, 0, 0, 0.4);
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 120px;
}

.radio-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    padding: 20px;
}

#visualizer {
    border: 2px solid #ff0080;
    /*border-radius: 8px;*/
    box-shadow: 0 0 20px rgba(255, 0, 128, 0.6);
    animation: pulsoNeon 1.5s infinite alternate;
}

@keyframes pulsoNeon {
    from {
        box-shadow: 0 0 10px rgba(255, 0, 128, 0.3);
    }

    to {
        box-shadow: 0 0 30px rgba(255, 0, 128, 0.8);
    }
}

/* ESTILO DE CARATULAS */

.rating {
    display: inline-block;
    vertical-align: top;
    margin: 10px;   /*Espacio entre caratulas */
    text-align: center;
}

    .rating .movie-image {
        width: 160px;
        height: 240px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        /*background: #222;*/
        /*border-radius: 12px;*/
        box-shadow: 0 2px 12px rgba(0,0,0,0.15);
        margin-bottom: 8px;
    }

        .rating .movie-image img {
            width: 140px; 
            height: 210px;
            object-fit: cover; 
            /*border-radius: 8px; */
            transition: transform 0.2s;
        }

            .rating .movie-image img:hover {
                transform: rotateX('angle'); /* rotateX('angle')   Efecto de zoom al pasar el raton */
                box-shadow: 0 0 100px #ff0000; /* efecto de resplandor rojo */
            }



/* ESTILO PARA VARIAS PANTALLAS*/
@media (max-width: 900px) {
    .rating {
        margin: 8px;
    }

        .rating .movie-image {
            width: 44vw;
            height: 66vw;
            min-width: 100px;
            min-height: 150px;
        }

            .rating .movie-image img {
                width: 40vw;
                height: 60vw;
                min-width: 90px;
                min-height: 135px;
            }
}

@media (max-width: 600px) {
    .rating {
        margin: 4vw;
    }

        .rating .movie-image {
            width: 80vw;
            height: 120vw;
        }

            .rating .movie-image img {
                width: 72vw;
                height: 108vw;
            }
}

@media (max-width: 600px) {
    .rating .movie-image {
        width: 36vw;
        height: 36vw;
        min-width: 70px;
        min-height: 70px;
        max-width: 120px;
        max-height: 120px;
    }
}

/* CARATULAS CIRCULARES */
.rating .movie-image {
    width: 50vw;
    height: 50vw;
    min-width: 50px; 
    min-height: 50px;
    max-width: 150px;
    max-height: 150px;
    /*border-radius: 100%;*/
    overflow:inherit; /* Cambiado a inherit para permitir que la imagen se salga del contenedor */
    display: flex; 
    align-items: center;
    justify-content: center;
    /*background: #222; /* Fondo oscuro para resaltar la imagen */ 
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    margin-bottom: 8px;
}

    .rating .movie-image img {
        width: 100%;
        height: 100%;
        object-fit:fill;
        /*border-radius: 50%;*/
        transition: transform 0.2s;
        align-items: center;
        margin-top: 30px;
    }

.caratulas-grid {
  display: flex;
  flex-wrap: wrap; 
  justify-content: center;
  gap:2% ; /* Espacio entre caratulas*/
  width: 100%;
  padding: 10px;
}

/* Carátula individual */
.caratula {
    flex: 1 1 80px; /* Se adapta pero no baja de 180px */
    max-width: 220px; /*220 ancho maximo pantalla grande*/
    min-width: 70px; /*140 ancho minimo pantalla grande*/
    height: auto;
}

/* Tablets y móviles grandes */
@media (max-width: 400px) { /* 900px*/
  .caratulas-grid {
    gap: 10px;/* Espacio entre caratulas*/
  }
  .caratula {
    flex: 1 1 10%; /*se apadta pero no baja de 45%*/
    max-width: 45%;/* ancho maximo para tablet*/
  }
}

/* Móviles pequeños */
@media (max-width: 300px) { /* 600px*/
  .caratula {
    flex: 1 1 100%; 
    max-width: 100%; 
  }
}

/* MENU DE BUSQUEDA 
.menu-area ul li {
    flex-wrap:wrap; 
}

.menu-area select,
.menu-area input[type="text"] {
    max-width: 220px; 
    width: 100%;
    box-sizing: border-box;
    margin: 4px 0;
}

@media (max-width: 600px) {
    .menu-area select,
    .menu-area input[type="text"] {
        font-size: 14px;
        max-width: 100%;
    }
}
*/

/* Estilo personalizado para el selector de categorías */
#categoriaSelect {
    color: #f2a223 !important; /* Cambia este color según tu preferencia */
   /* background: #222 !important; /* Fondo oscuro opcional */
    border: 1px solid #f2a223 !important;
    font-weight: bold !important;
}

/* Estilo personalizado para la barra de búsqueda */
#searchBar {
    color: #f2a223 !important; /* Cambia este color según tu preferencia */
   /* background: #222 !important; /* Fondo oscuro opcional */
    border: 1px solid #f2a223 !important;
    font-weight: bold !important;
    padding: 6px;
    font-size: 16px;
    min-width: 120px;
}


/* Carrusel responsive y estilos */
.carrusel-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.carousel-inner .item img {
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: contain;
    cursor: pointer;
}

.carousel-caption {
    position: static;
    padding: 4px;
    /* background: rgba(0,0,0,0.5);*/
    border-radius: 6px;
    text-align: left;
}

@media (max-width: 600px) {
    .carrusel-container {
        max-width: 100%;
        padding: 0;
    }

    .carousel-inner .item img {
        max-height: 120px;
    }

    .carousel-caption h2, .carousel-caption h3, .carousel-caption span {
        font-size: 0.9em !important;
    }
}

/* Mobile fixes: improve layout and sizing on phones (<= 600px) */
@media (max-width: 600px) {
  /* Remove large top margin that pushes content off-screen on small devices */
  body {
    margin-top: 0;
    font-size: 14px; /* slightly larger for readability on phones */
  }

  /* Keep header fixed on small screens so it remains visible */
    header, #main-header {
        position: fixed;
        width: 100%;
        height: var(--header-height);
        left: 0;
        top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 8px 12px;
        box-shadow: 0 1px 6px rgba(0,0,0,0.3);
        z-index: 10000;
        /* background: rgba(0,0,0,0.9);*/
    }

  /* Ensure player-area stacks vertically and fits the screen */
  .player-area {
    width: 100%;
    flex-direction: column;
    gap: 12px;
    padding: 8px;
    box-sizing: border-box;
    margin-top: var(--header-height);
  }

  /* Carousel container should be full width and not exceed viewport */
  #capa3, .carrusel-container {
    width: 100%;
    max-width: 100%;
    padding: 0 6px;
    box-sizing: border-box;
    margin-top: 6px;
  }

  /* Make carátulas (thumbnails) a predictable, readable size on phones */
  .rating {
    margin: 8px 6px;
    width: auto;
    display: inline-block;
    text-align: center;
  }

  .rating .movie-image {
    width: 40vw;       /* responsive width (approx 2 per row) */
    height: 60vw;      /* keep aspect ratio ~3:4 */
    max-width: 160px;  /* max fixed size to avoid huge images */
    max-height: 240px;
    min-width: 90px;
    min-height: 135px;
    margin-bottom: 6px;
  }

  .rating .movie-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin-top: 0;
  }

  /* Reduce padding/margins for the grid so content fits better */
  .caratulas-grid {
    gap: 8px;
    padding: 6px;
  }

  /* If there's a fixed player (#capa1), ensure it doesn't cover the page */
  .capa1, #video-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: 160px;
    box-sizing: border-box;
  }

  /* Make sure the carousel images are not too tall */
  .carousel-inner .item img {
    max-height: 160px;
  }

  /* Menu adjustments for small screens */
  .elegant-menu .main-menu {
    flex-wrap: wrap;
    gap: 6px;
  }

  .elegant-menu .menu-link {
    padding: 8px 10px;
    font-size: 1rem;
  }
}

/* --- Menú elegante Vertical al lado del carrusel --- */
.elegant-menu { /* Contenedor del menú */
    width: 100%;
    margin: 0px auto 0px auto; /* Margen inferior para separar del carrusel */
    padding: 0;
   /* background: rgba(1,1,1,1); /* Fondo semitransparente */
    border-bottom: 2px solid #f80c05; /* Línea inferior */
    position: relative; /* Para posicionar submenús */
    z-index: 10; /* Asegura que esté encima de otros elementos */
}
    .elegant-menu .main-menu { /* Lista principal del menú */
        display: flex; /* Flexbox para disposición horizontal */
        flex-direction: row; /* Dirección horizontal */
        justify-content: center; /* Centrar elementos */
        align-items: normal; /* Alinear verticalmente */
        list-style: disc; /* Quitar viñetas */
        margin: 0; /* Quitar margen */
        padding: 0px 5px 0px 5px;
        min-height: 100%; /* Altura mínima del menú */

    }
.elegant-menu .menu-item { /* Elementos del menú */
  position: relative;
  margin:  1px; /* Espacio entre elementos */

}
    .elegant-menu .menu-link { /* Enlaces del menú */
        display: block;
        padding: 6px 16px;
        color: #f2a223; /* COLOR FUENTE */
        font-weight: bold;
        font-size: large; /* Tamaño de fuente */
        text-decoration: none; /* Quitar subrayado */
        border-radius: 4px 4px 0 0; /* Bordes redondeados arriba */
        transition: background 0.2s, color 0.2s;
        /* background: transparent;*/
    }
        .elegant-menu .menu-link:hover,
        .elegant-menu .menu-link:focus {
            /* background: #222;*/
            color: #fff;
        }


/* CONFIGURACION PARA SUB-MENU VERTICAL */

.elegant-menu .submenu {
    display: none;
    position: absolute;
    min-width: 160px;
    background: rgba(30,30,30,0.98);
    border: 1px solid #f2a223;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 3;
    top: 150%; 
    left: 0%; /*ubicacion sub-menu a la derecha del menu principal*/
    /*list-style: url('images/case.gif');*/
}

/* Mejora compatibilidad TV: muestra submenu con focus, active y focus-within */
.elegant-menu .has-submenu:focus-within > .submenu,
.elegant-menu .has-submenu:focus > .submenu,
.elegant-menu .has-submenu:active > .submenu {
    display: block;
}

/* FIN  CONFIGURACION PARA MENU VERTICAL */

.elegant-menu .submenu a {
  display: block;
  padding: 14px 24px; /* Aumenta tamaño para TV */
  color: #f2a223;
  font-size: 1.2rem; /* Más grande para TV */
  text-decoration:auto; /* Quitar subrayado */
  background: transparent;
  border-radius: 0; /* Sin bordes redondeados */
  transition: background 0.2s, color 0.2s;
}

.elegant-menu .submenu a:hover,
.elegant-menu .submenu a:focus {
  background: #222;
  color: #fff;
  outline: 2px solid #f2a223; /* Indica foco para TV */
}

.elegant-menu .menu-link {
    display: block;
    padding: 14px 24px; /* Aumenta tamaño para TV */
    color: #f2a223;
    font-weight: bold;
    font-size: 1.3em; /* Más grande para TV */
    text-decoration: none;
    border-radius: 4px 4px 0 0;
    transition: background 0.2s, color 0.2s;
    background: transparent;
}

.elegant-menu .menu-link:focus {
    background: #222;
    color: #fff;
    outline: 2px solid #f2a223; /* Indica foco para TV */
}

h1 {
    font-size: 13px !important;
    color: #d91d2a;
    font-weight: 300;
    text-align: center;
    line-height: 1.6;
    display: none;
    margin: 6px 0 2px 0;
}

h2 {
    font-size: 15px !important;
    color: #f2a223;
    font-weight: 400;
    text-align: center;
    line-height: 1.3;
    display: block;
    margin: 2px 0 8px 0;
    word-break: break-word;
}

h3 {
    font-size: 1.2em !important;
}

h4 {
    font-size: 1em !important;
}

h5 {
    font-size: 0.9em !important;
}

h6 {
    font-size: 0.8em !important;
}
/* FIN ESTILOS */


@media (max-width: 600px) {
  /* Ensure header is visible and does not get pushed off-screen on small devices */
  :root { --mobile-header-height: 72px; }

  header, #main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 10000;
    box-shadow: 0 1px 6px rgba(0,0,0,0.3);
    background: rgba(0,0,0,0.85);
  }

  /* Reserve space so content isn't hidden under the fixed header */
  body {
    padding-top: var(--mobile-header-height);
    margin-top: 0; /* ensure no extra margin */
  }

  /* Keep the header content compact on small screens */
  .header-flex {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  /* Make sure the carousel and player are below header */
  #capa3, .player-area, .caratulas-grid {
    margin-top: 0;
  }
}