/* Estilos max-width-1200 */
.max-width-1200{
    width: inherit;
    text-align: center;
}
/* Estilos principales (Mobile First) */
.contenedor-selector {
    width: 100%;
    margin-top: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Estilos para el nav-bar móvil */
.mobile-nav-bar {
    display: none; /* Oculto por defecto */
    position: fixed; /* Fijo en la pantalla */
    top: 0; /* Posicionado en la parte superior */
    left: 0;
    width: 100%; /* Ocupa todo el ancho */
    background-color: #4C6A2A;
    padding: 10px; /* Espaciado interno */
    z-index: 10000; /* Asegura que esté por encima del modal */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); /* Sombra para destacar */
}

.mobile-nav-bar.visible {
    display: flex;
    justify-content: flex-end; /* Mueve los íconos a la derecha */
    align-items: center;
    padding-right: 10%; /* 10% del ancho */
}

/* Estilos para los íconos del nav-bar móvil */
.mobile-nav-bar .modal-icons {
    display: flex;
    gap: 20px; /* Espacio entre los íconos */
}

.mobile-nav-bar .material-symbols-outlined {
    font-size: 24px; /* Tamaño de los íconos */
    color: #f1e7c8; /* Color de los íconos */
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s ease;
}

.mobile-nav-bar .material-symbols-outlined:hover {
    color: #E87722; /* Cambia el color al hacer hover */
    transform: scale(1.2); /* Aumenta el tamaño al hacer hover */
}

.player-bar.hidden {
    display: none;
}

.contenedor-selector {
    display: flex;
    flex-direction: column;
}

.selector {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    margin-top: 20px; /* Reemplazado vh por px */
}
#option_selector{
    font-family: 'montserrat', serif;
}

.selector-obras {
    width: 90%;
    max-width: 100%;
    font-size: 16px; /* Reemplazado vh por rem */
    padding: 10px; /* Reemplazado vh por px */
    box-sizing: border-box;
    color: var(--color-principal);
    background-color: var(--color-fondo);
    border: 2px solid var(--color-interactivo); /* Reemplazado vh por px */
    border-radius: 5px; /* Reemplazado vh por px */
    cursor: pointer;
    margin: 10px; /* Reemplazado vh por px */
    transition: border-color 0.3s ease;
    font-family: 'montserrat', serif;
}

.galeria {
    margin-top: 20px; /* Reemplazado vh por px */
    background-color: var(--color-fondo);
}

.galeria-header {
    display: flex; /* Usamos Flexbox */
    /* width: 100%; */
    margin-left: 15px;
    margin-right: 15px;
    padding: 0; /* Elimina paddings internos */
}

.tab {
    flex-grow: 1; /* Hace que cada pestaña crezca para ocupar el mismo espacio */
    text-align: center; /* Centra el texto dentro de cada pestaña */
    background-color: #f1e7c8; /* Color de fondo */
    color: var(--color-principal); /* Color del texto */
    font-size: 16px; /* Tamaño de fuente */
    border: none; /* Sin bordes adicionales */
    padding: 10px 0; /* Padding vertical (sin horizontal) */
    cursor: pointer; /* Cursor de puntero */
    transition: background-color 0.3s ease; /* Transición suave */
    border-radius: 16px 16px 0 0; /* Bordes redondeados solo arriba */
    font-family: 'Montserrat', serif; /* Fuente */
}

.tab:hover {
    background-color: #2f501a;
    color: var(--color-fondo);
    border-radius: 16px 16px 0 0; /* Ajusta los bordes redondeados */
}

.tab.active {
    text-decoration: underline; /* Subrayado para el tab activo */
    color: var(--color-fondo); /* Cambia el color del texto */
    background-color: var(--color-principal); /* Cambia el color de fondo */
    border-radius: 16px 16px 0 0; /* Ajusta los bordes redondeados */
}

.galeria-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Cambiado a 3 columnas */
    gap: 5px; /* Reemplazado vh por px */
    background-color: #3b6021;
    border-radius: 5px; /* Reemplazado vh por px */
    padding: 5px; /* Reemplazado vh por px */
    justify-items: center;
    align-items: center;
}

.galeria-item {
    background-color: #c1a378;
    border: 1px solid #3b6021; /* Reemplazado vh por px */
    aspect-ratio: 1; /* Mantiene el formato cuadrado */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; /* Asegura que ocupe todo el espacio disponible */
    height: auto; /* Altura automática para mantener el aspecto cuadrado */
}

.galeria-item img {
    width: 100%; /* Asegura que la imagen ocupe todo el espacio del contenedor */
    height: 100%; /* Asegura que la imagen ocupe todo el espacio del contenedor */
    object-fit: cover; /* Mantiene la proporción sin deformar la imagen */
}

.galeria-item::before {
    font-size: 1.5rem; /* Reemplazado vh por rem */
    color: #3b6021;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.canciones {
    background-color: #3b6021;
    padding: 20px; /* Reemplazado vh por px */
}

.buscador {
    display: flex;
    align-items: center;
    background-color: var(--color-fondo);
    border-radius: 20px; /* Reemplazado vh por px */
    padding: 0px 20px; /* Reemplazado vh por px */
    width: 100%;
    margin-bottom: 20px; /* Reemplazado vh por px */
    border: 2px solid var(--color-interactivo); /* Borde color #BC570A */
}

.buscador input {
    border: none;
    background-color: transparent;
    outline: none;
    font-size: 14px; /* Reemplazado vh por rem */
    flex-grow: 1;
    color: var(--color-interactivo); /* Fuente color #BC570A */
    padding: 10px; /* Reemplazado vh por px */
}

.buscador input::placeholder {
    color: var(--color-interactivo); /* Color del texto del placeholder */
}

.buscador button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.icon-lupa {
    width: 20px; /* Reemplazado vh por px */
    height: 20px; /* Reemplazado vh por px */
    color: var(--color-interactivo);
}

.buscador button:hover .icon-lupa {
    color: #2f501a;
}

/* Lista de canciones */
.galeria-grid-canciones {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Reemplazado vh por px */
    margin-top: 10px; /* Reemplazado vh por px */
}

.galeria-item-canciones {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: #3b6021;
    padding: 10px 20px; /* Reemplazado vh por px */
    border-radius: 10px; /* Reemplazado vh por px */
    color: #f1e7c8;
}

.galeria-item-canciones:hover {
    background-color: #2f501a;
}

#canciones {
    background-color: var(--color-principal);
    padding-top: 20px; /* Reemplazado vh por px */
    padding-bottom: 20px; /* Reemplazado vh por px */
    border-radius: 5px;
}

.cancion-info {
    display: flex;
    align-items: center;
    gap: 10px; /* Reemplazado vh por px */
    width: 100%;
}

.cancion-play {
    background-color: #f1e7c8;
    color: #3b6021;
    width: 40px; /* Reemplazado vh por px */
    height: 40px; /* Reemplazado vh por px */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.cancion-play.reproduciendo {
    background-color: #E87722;
}

.cancion-play:hover {
    background-color: #e0d6b8;
}

.cancion-texto {
    display: flex;
    flex-direction: column;
}

.cancion-texto .titulo {
    color: #f1e7c8;
    font-weight: bold;
    font-size: 1.2rem; /* Reemplazado vh por rem */
}

.cancion-texto .subtitulo {
    font-size: 1rem; /* Reemplazado vh por rem */
    color: #e0d6b8;
}

/* Estilos para el modal */
.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #4C6A2ACC;
    padding-top: 0;
}

/* Contenedor que agrupa los íconos y la imagen */
.modal-container {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 600px; /* Reemplazado vh por px */
    background-color: transparent;
}

/* Estilos para los íconos del modal */
.modal-icons {
    display: flex;
    gap: 10px; /* Reemplazado vh por px */
    padding: 10px 0; /* Reemplazado vh por px */
    justify-content: flex-end;
    display: none;
}

.modal-icons .material-symbols-outlined {
    cursor: pointer;
    font-size: 24px; /* Tamaño de los íconos */
    color: #f1e7c8;
    transition: color 0.3s ease, transform 0.3s ease;
}

.modal-icons .material-symbols-outlined:hover {
    color: #E87722; /* Cambia el color al hacer hover */
    transform: scale(1.2); /* Aumenta el tamaño al hacer hover */
}

/* Estilos para el contenido del modal (imagen o video) */
.modal-content {
    width: 100%;
    min-height: max-content;
    display: block;
}
.modal-content iframe {
    width: 100%;
    display: block;
}
.modal img {
    width: 100%;
    height: auto;
    display: block;
}

.modal video {
    width: 100%;
    height: auto;
}

/* Contenedor general de canciones */
.galeria-grid-canciones {
    display: grid;
    grid-template-rows: auto auto;
    gap: 10px; /* Reemplazado vh por px */
}

/* Barra de reproducción */
.player-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px; /* Reemplazado vh por px */
    background-color: #3b6021;
    color: #f1e7c8;
    border: 1px solid #3b6021; /* Reemplazado vh por px */
    border-radius: 5px; /* Reemplazado vh por px */
    width: 75%;
    margin: 0 auto;
    box-sizing: border-box;
}

.player-info {
    display: flex;
    align-items: center;
    gap: 10px; /* Reemplazado vh por px */
    justify-content: center;
    width: 100%;
    text-align: center;
}

.player-img {
    width: 30%;
    height: auto;
    border-radius: 5px; /* Reemplazado vh por px */
    flex-shrink: 0;
}

.player-text {
    font-size: 1.2rem; /* Reemplazado vh por rem */
    flex-grow: 1;
    width: 70%;
    text-align: left;
}

.player-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* Reemplazado vh por px */
    width: 100%;
    margin-top: 10px; /* Reemplazado vh por px */
}

.control-button {
    background: none;
    border: none;
    cursor: pointer;
}

.player-progress {
    display: flex;
    align-items: center;
    gap: 5px; /* Reemplazado vh por px */
    width: 100%;
    margin-top: 10px; /* Reemplazado vh por px */
}

.progress-bar {
    flex-grow: 1;
    background-color: #E87722;
    border-radius: 5px; /* Reemplazado vh por px */
    height: 5px; /* Reemplazado vh por px */
    position: relative;
}

.progress {
    background-color: #f1e7c8;
    height: 100%;
    width: 0;
    border-radius: 5px; /* Reemplazado vh por px */
    transition: width 0.3s ease;
}

.time {
    font-size: 1rem; /* Reemplazado vh por rem */
    color: #f1e7c8;
}
/* Mensaje no_content_msg */
#no-fotos-message , #no-canciones-message, #no-videos-message{
    display: none; 
    text-align: center; 
    padding: 20px; 
    font-size: 20px; 
    font-weight: bold;
    color: var(--color-principal);
}


.galeria-item {
    position: relative; /* Necesario para posicionar el ícono */
    display: inline-block; /* Ajusta según tu layout */
}

.video-thumbnail {
    width: 100%; /* Ajusta el tamaño de la miniatura */
    height: auto;
    display: block;
}

.fa-youtube{
    position: absolute; /* Posiciona el ícono sobre la miniatura */
    top: 50%; /* Centra verticalmente */
    left: 50%; /* Centra horizontalmente */
    transform: translate(-50%, -50%); /* Ajusta el centrado */
    font-size: 40px; /* Tamaño del ícono */
    color: var(--color-fondo); /* Color del ícono */
    opacity: 0.8; /* Transparencia */
    transition: opacity 0.3s ease; /* Efecto de transición */
}

.play-icon:hover {
    opacity: 1; /* Hace el ícono más visible al pasar el mouse */
}

/* Estilos para pantallas medianas (Tablet) */
@media (min-width: 350px) and (max-width: 768px) {
    .galeria-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .galeria-item {
        min-width: 100px; /* Reemplazado vh por px */
        min-height: 100px; /* Reemplazado vh por px */
    }

    .galeria-grid-canciones {
        gap: 15px; /* Reemplazado vh por px */
    }

    .galeria-item-canciones {
        flex-direction: row; /* Cambia a disposición horizontal */
        align-items: center;
        justify-content: space-between;
    }

    .cancion-info {
        gap: 15px; /* Reemplazado vh por px */
    }
}

@media (min-width: 769px) {
    .contenedor-selector {
        margin-top: 10px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .selector {
        display: flex;
        flex-direction: row;
        gap: 10px; /* Reemplazado vh por px */
        width: 48%;
        margin-top: 20px; /* Reemplazado vh por px */
    }

    .selector-obras {
        font-size: 24px;
        border: 3px solid var(--color-interactivo);
    }

    .tab {
        font-size: 24px;
    }

    .galeria-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* 4 columnas */
        gap: 20px; /* Reemplazado vh por px */
        padding: 20px; /* Reemplazado vh por px */
    }

    .galeria-item {
        width: 100%;
        height: auto;
        min-width: 120px; /* Reemplazado vh por px */
        min-height: 120px; /* Reemplazado vh por px */
        aspect-ratio: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border-radius: 10px; /* Reemplazado vh por px */
        cursor: pointer;
    }

    .galeria-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .buscador {
        max-width: 400px; /* Reemplazado vh por px */
        margin-left: 20px; /* Reemplazado vh por px */
    }

    .buscador input {
        font-size: 24px;
    }

    .galeria-grid-canciones {
        gap: 20px; /* Reemplazado vh por px */
    }

    .galeria-item-canciones {
        padding: 15px 20px; /* Reemplazado vh por px */
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    /* #canciones {
        background-color: var(--color-principal);
        padding-top: 20px; /* Reemplazado vh por px 
        padding-bottom: 20px; /* Reemplazado vh por px 
        border-radius: 5px;
    } */

    .cancion-texto .titulo-cancion {
        font-size: 1.2rem; /* Reemplazado vh por rem */
    }

    .cancion-texto .subtitulo {
        font-size: 1rem; /* Reemplazado vh por rem */
    }

    .duracion {
        align-self: flex-end;
        margin-top: 10px; /* Reemplazado vh por px */
    }

    .modal-icons {
        display: flex;
        gap: 10px; /* Reemplazado vh por px */
        padding: 10px 0; /* Reemplazado vh por px */
        justify-content: flex-end;
    }

    .modal img {
        transform: rotate(0deg);
        max-width: 100%;
        height: auto;
    }

    .mobile-nav-bar.visible {
        display: none;
    }

    @media only screen and (max-width: 768px) and (orientation: landscape) {
        /* Ajustar la imagen del modal para que no sobrepase los límites de la pantalla */
        .modal-container {
            transform: rotate(90deg);
            max-width: 100vh; /* Ajusta el ancho máximo al alto de la pantalla */
            max-height: 100vw; /* Ajusta el alto máximo al ancho de la pantalla */
            width: auto;
            height: auto;
            object-fit: contain; /* Asegura que la imagen se ajuste sin deformarse */
        }
    
        /* Posicionar la barra mobile-nav-bar en el costado izquierdo */
        .mobile-nav-bar {
            display: flex;
            flex-direction: column; /* Coloca los íconos en vertical */
            justify-content: flex-start; /* Alinea los íconos al inicio */
            align-items: flex-start; /* Alinea los íconos a la izquierda */
            top: 0;
            left: 0;
            width: auto; /* Ancho automático para que no ocupe mucho espacio */
            height: 100%; /* Ocupa toda la altura */
            padding: 10px; /* Espaciado interno */
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2); /* Sombra para destacar */
            overflow: hidden; /* Evita que aparezca la barra de desplazamiento */
        }
    
        /* Ajustar los íconos dentro de la barra */
        .mobile-nav-bar .modal-icons {
            flex-direction: column; /* Coloca los íconos en vertical */
            gap: 15px; /* Espacio entre los íconos */
        }
    
        /* Asegurar que no aparezca la barra de desplazamiento */
        .mobile-nav-bar.visible {
            overflow: hidden;
        }
    }
}