/* Fondo del Navbar y Footer */
.navbar {
    background-color: #010206 !important;
    color: #ffffff;
}

footer { 
    background-color: #101010; 
    color: #010206;
}

/* Elementos comunes */
.logo-img {
    height: 50px;
    margin: 0;
    padding: 0;
    display: block;
    object-fit: contain;
}

.btn-lg {
    font-size: 44px !important;
    line-height: 1.5 !important;
}

/* Enlaces y hover effects */
.navbar .nav-link {
    color: #dbd1d1 !important;
    transition: color 0.3s ease;
}

.navbar .nav-link:hover,
footer a:hover {
    color: #ffffff !important;
}

footer a {
    color: #ff6b6b;
    transition: color 0.3s ease;
}

footer a:hover {
    color: #f39c12;
}

/* User info y elementos de lista */
#userCode, #userCredits, #codeusuario, #codecredito, #smallUserCode, #smallUserCredits {
    color: white !important;
    font-weight: bold;
}

.list-group-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    gap: 8px;
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-grow: 1;
}

.btn-agregar-cancion {
    min-width: 120px;
    padding: 5px 10px;
    white-space: nowrap;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Media containers unificados */
.media-container {
    width: 100%;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    overflow: hidden;
    position: relative;
}

/* 📌 Mantener un tamaño fijo para los carruseles en `detalle_negocio.html` y `datos_negocio.html` */
#carouselArchivos .media-container,
#carouselArchivosNegocio .media-container {
    width: 100%;
    height: 400px; /* Mantener altura fija */
    min-height: 400px; /* Evitar que se reduzca */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000; /* Fondo negro para imágenes más pequeñas */
    overflow: hidden;
    position: relative;
}

/* 📌 Imágenes y videos dentro del carrusel - Se ajustan sin cambiar el tamaño del contenedor */
#carouselArchivos .media-container img,
#carouselArchivosNegocio .media-container img,
#carouselArchivos .media-container video,
#carouselArchivosNegocio .media-container video {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: 100%;
    object-fit: contain; /* Mantener proporción sin recortes */
    border-radius: 5px;
    background-color: black; /* Mantener fondo negro si la imagen es más pequeña */
}

/* 📌 Evitar cambios de tamaño en videos verticales */
@media screen and (max-aspect-ratio: 9/16) { 
    #carouselArchivos .media-container video,
    #carouselArchivosNegocio .media-container video {
        width: auto;
        height: 100%;
    }
}




.media-container img,
.media-container video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 5px;
    background-color: black;
}

/* Elementos de negocio */
.negocio-img, .qr-img {
    width: 100%;
    max-width: 350px;
    height: 350px;
    border-radius: 10px;
}

.negocio-img {
    object-fit: cover;
}

.qr-img {
    object-fit: contain;
    padding: 5px;
}

/* Media Queries combinadas */
@media (max-width: 992px) {
    .user-info span[id="userCodeLabel"],
    .user-info span[id="userCreditsLabel"] {
        display: none;
    }
}

@media (max-width: 768px) {
    .user-info span[id="userCodeLabel"]::after { content: "Cód:"; display: inline; }
    .user-info span[id="userCreditsLabel"]::after { content: "Créd:"; display: inline; }
    
    .list-group-item {
        flex-wrap: nowrap;
        gap: 4px;
    }
    
    .btn-agregar-cancion {
        padding: 4px 8px;
        font-size: 0.85rem;
    }
   

    /* 📌 Asegurar que el nombre de la canción no se superponga con el botón */
    .reproductor-item span {
        flex-grow: 1; /* El nombre de la canción ocupa el espacio restante */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .row.align-items-center {
        flex-direction: column;
    }
}

@media screen and (max-aspect-ratio: 9/16) {
    .media-container video {
        width: auto;
        height: 100%;
    }
}

/* 📌 Mantener un tamaño fijo para el carrusel en `datos_negocio.html` */
.carrusel-datos-negocio .media-container {
    width: 100%;
    height: 400px; /* Tamaño fijo para evitar cambios de altura */
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black; /* Fondo negro para imágenes más pequeñas */
    overflow: hidden;
    position: relative;
}

/* 📌 Imágenes y videos dentro del carrusel de `datos_negocio.html` */
.carrusel-datos-negocio .media-container img,
.carrusel-datos-negocio .media-container video {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: 100%;
    object-fit: contain; /* Evita recortes y mantiene la proporción */
    border-radius: 5px;
    background-color: black; /* Mantener fondo negro si la imagen es más pequeña */
}

/* 📌 Evitar cambios de tamaño en videos verticales */
@media screen and (max-aspect-ratio: 9/16) { 
    .carrusel-datos-negocio .media-container video {
        width: auto;
        height: 100%;
    }
}

/* 📌 Mantener un tamaño fijo para el carrusel en `datos_negocio.html` */
.carrusel-datos-negocio {
    position: relative;
    width: 100%;
    max-width: 600px; /* Ajusta según sea necesario */
    margin: auto;
}

/* 📌 Mantener el botón siempre visible en `datos_negocio.html` */
.reproductor-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px; /* Espaciado entre el texto y el botón */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



/* 📌 Mantener el botón fijo */
.reproductor-item button {
    flex-shrink: 0; /* Evita que el botón se reduzca si el nombre es largo */
    padding: 4px 8px;
    font-size: 1rem;
    min-width: 40px; /* Asegurar que el botón tenga un ancho mínimo */
    text-align: center;
}

.estrella {
    position: relative;
    display: inline-block;
    font-size: 2em;
    color: gray; /* Color de fondo de las estrellas inactivas */
    width: 1em;
    overflow: hidden;
}

.estrella-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%; /* Se actualizará dinámicamente con JS */
    height: 100%;
    overflow: hidden;
    color: gold; /* Color de la parte activa */
    white-space: nowrap;
    display: inline-block;
}

.badge-custom {
    font-size: 1.0rem;
    font-weight: bold;
    padding: 6px 12px;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #010206, #010206);
    color: rgb(250, 250, 250);
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
}

.badge-custom:hover {
    transform: scale(1.1);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}

.badge-custom i {
    font-size: 1rem;
}

.btn-custom {
    background: linear-gradient(135deg, #010206, #010206); /* Mismo gradiente de las etiquetas */
    color: white !important;
    border: none;
    padding: 8px 12px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-custom:hover {
    transform: scale(1.05);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    filter: brightness(1.1);
}

/* 📌 Estilos para calificación de los productos */
.producto-calificacion .estrella-producto {
    position: relative;
    display: inline-block;
    font-size: 2em;
    color: gray; /* Color de fondo de estrellas inactivas */
    width: 1em;
    overflow: hidden;
}

.producto-calificacion .estrella-producto .estrella-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    overflow: hidden;
    color: gold;
    white-space: nowrap;
    display: inline-block;
}

.estrella-producto {
    cursor: pointer; /* Hace que el cursor sea una mano al pasar sobre las estrellas */
    font-size: 2em;
    color: gray;
}

.estrella-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    overflow: hidden;
    color: gold;
    white-space: nowrap;
    display: inline-block;
}

/* Reglas para unificar el tamaño de las imágenes del carousel en home.html */
.carousel-inner img {
    /* Forzar que todas las imágenes tengan la misma altura */
    height: 520px; 
    width: 100%; /* Se mantiene el 100% del ancho del contenedor */
    
    /* Ajustar la imagen sin deformarla, aunque recortará sobrantes */
    object-fit: cover; 
    
    /* Opcional: border-radius para esquinas redondeadas */
    border-radius: 5px;
}

/* ───── Mobile / tablets ───── */
@media (max-width: 768px){
  .carousel-inner img{
      height: auto;      /* elimina alto fijo */
      max-height: 60vh;  /* nunca más del 60 % de la pantalla */
      width: 100%;
      object-fit: contain; /* muestra la imagen completa (sin recortes) */
  }
}

.home-latest-highlight {
    background-color: #e2f0f7;   /* Un gris muy claro de fondo */
    border-radius: 6px;         /* Esquinas ligeramente redondeadas */
    padding: 1rem;              /* Espacio interior alrededor de la sección */
    box-shadow: 0 2px 5px rgba(0,0,0,0.08); /* Sombra sutil */
  }
  

/* Contenedor que engloba todas las últimas tarjetas */
.home-latest-container {
    display: flex;
    flex-wrap: nowrap;    /* Para ponerlas en una sola fila */
    overflow-x: hidden;   /* O auto si quieres la barra de scroll visible */
    width: 100%;          /* Se ajusta al ancho del padre */
    gap: 1rem;            /* Espacio horizontal entre tarjetas */
  }
  
  /* Tarjetas uniformes */
  .home-latest-card {
    width: 250px;         /* Ancho fijo para todas */
    flex: 0 0 auto;       /* Evita que se estiren */
  }
  
  /* Imágenes uniformes dentro de esas tarjetas */
  .home-latest-card img {
    width: 100%;          /* Ocupará el 100% del ancho de la tarjeta */
    height: 180px;        /* Fijas la misma altura */
    object-fit: cover;    /* Recorta la imagen para mantener proporción */
  }
  
  .scroll-canciones {
    max-height: 400px; /* Ajusta la altura máxima deseada (8 items aprox.) */
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 5px;
    background-color: #f8f9fa;
}

/* Mantener el footer pegado al fondo */
body{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
main.container{
  flex:1 0 auto;   /* ocupa todo el alto disponible */
}
footer{
  flex-shrink:0;
}

/* ══════════════════════════════════════════════════════════
   Carrusel de detalle de PRODUCTO
   ══════════════════════════════════════════════════════════*/
#carouselProducto .media-container{
    width:100%;
    height:600px;           /* mismo alto fijo que en detalle_negocio */
    min-height:600px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#000;
    overflow:hidden;
    position:relative;
}

#carouselProducto .media-container img,
#carouselProducto .media-container video{
    max-width:100%;
    max-height:100%;
    width:auto;
    height:100%;
    object-fit:contain;     /* SIN recortes */
    border-radius:5px;
    background:#000;
}

/* Evitar que los vídeos verticales agranden el contenedor */
@media screen and (max-aspect-ratio:9/16){
    #carouselProducto .media-container video{
        width:auto;
        height:100%;
    }
}

/* La caja de búsqueda queda “pegada” arriba y siempre visible */
.bootstrap-select .dropdown-menu .bs-searchbox{
    position: sticky;
    top: 0;
    z-index: 1020;
    padding: .4rem .8rem;
    background: #fff;
}

/* Mantener el menú del dropdown exactamente al ancho del botón */
.bootstrap-select .dropdown-menu {
    width: 100% !important;    /* igual al botón (hereda de data-width) */
}

/* ==== marco gris a todos los selectpicker ==== */
.bootstrap-select > .dropdown-toggle {
    border: 1px solid #ced4da !important;   /* mismo gris que .form-control */
    background-color: #fff !important;      /* fondo blanco */
    min-height: 38px;                       /* alto estándar de un input */
    font-weight: normal;                    /* quita el bold de btn-light */
}
.bootstrap-select > .dropdown-toggle:focus {
    box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);   /* aro azul al enfocar */
}

/* Máximo 3 ítems (~3 × 3.5 rem = 10.5 rem) */
#listaSesiones{
  max-height:10.5rem;   /* ≈ 168 px, ajusta si un item es más alto */
  overflow-y:auto;
}

/* Un poco de aire entre líneas para que no se “pisen” */
#listaSesiones .list-group-item{
  line-height:1.25;
  padding:.45rem .75rem;
}

#listaSesiones::-webkit-scrollbar{
  width:6px;
}
#listaSesiones::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.25);
  border-radius:3px;
}

/* ================= Sesiones activas ================= */
#listaSesiones .list-group-item{
    white-space: normal;         /* ✅ permite saltos de línea            */
    overflow    : visible;       /* ✅ ya no recorta el contenido         */
    text-overflow: initial;      /* ✅ desactiva los puntos suspensivos   */
    padding:.45rem .75rem;       /* ancho igual que una list-group normal */
    line-height:1.3;             /* separación vertical legible          */
}