/* Estilos para la Sección de Filtros (#directorio) */

#directorio .directory-category-btn {
    /* Puedes agregar estilos personalizados para los botones de categoría si lo deseas */
}

#directorio .directory-category-btn.active {
    background-color: #0056b3;
    color: #fff;
}

#directorio .directory-alphabet-btn {
    /* Puedes agregar estilos personalizados para los botones de letras si lo deseas */
}

#directorio .directory-alphabet-btn.active {
    background-color: #0056b3;
    color: #fff;
}

/* Contenedor de categorías - Ajustes para compactar el espacio y evitar corte de texto */
#directorio .category-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    /* Reducir el espacio entre los botones */
}

#directorio .category-link {
    flex: 1 1 20%;
    /* Reducir el tamaño a 20% del ancho del contenedor */
    min-width: 80px;
    /* Asegura que los botones no sean demasiado pequeños */
    padding: 6px 10px;
    /* Ajustar el relleno interno del botón */
    font-size: 0.85rem;
    /* Ajustar el tamaño del texto */
    text-align: center;
    white-space: nowrap;
    /* Evitar que el texto se rompa en varias líneas */
    overflow: hidden;
    /* Ocultar el desbordamiento de texto */
    text-overflow: ellipsis;
    /* Añadir puntos suspensivos si el texto es demasiado largo */
}

#directorio .alphabet-navigation {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    /* Reducir el espacio entre los botones */
}

#directorio .alphabet-link {
    flex: 1 1 15%;
    /* Reducir el tamaño a 15% del ancho del contenedor */
    min-width: 40px;
    /* Asegura que los botones no sean demasiado pequeños */
    padding: 5px 8px;
    /* Reducir el relleno interno del botón */
    font-size: 0.75rem;
    /* Reducir el tamaño del texto */
    text-align: center;
}

/* Estilos responsivos para los filtros */
@media (max-width: 768px) {

    #directorio .category-link,
    #directorio .alphabet-link {
        flex: 1 1 22%;
        /* Los botones ocuparán menos espacio en pantallas más pequeñas */
        font-size: 0.8rem;
        /* Ajustar el tamaño de texto */
        padding: 5px 8px;
        /* Ajustar el relleno interno */
        white-space: normal;
        /* Permitir que el texto se divida en varias líneas si es necesario */
    }
}

@media (max-width: 576px) {

    #directorio .category-link,
    #directorio .alphabet-link {
        flex: 1 1 28%;
        /* Los botones ocuparán menos espacio en pantallas muy pequeñas */
        font-size: 0.75rem;
        /* Ajustar el tamaño de texto para pantallas pequeñas */
        padding: 4px 6px;
        /* Ajustar el relleno interno */
        white-space: normal;
        /* Permitir que el texto se divida en varias líneas si es necesario */
    }
}

/* Estilos para asegurar que los enlaces tengan un foco visible (accesibilidad) */
#directorio .category-buttons .category-link:focus,
#directorio .alphabet-navigation .alphabet-link:focus {
    outline: 2px solid #0056b3;
    outline-offset: 2px;
}

/* Estilos para el placeholder de la barra de búsqueda */
#searchBar::placeholder {
    color: #6c757d;
    opacity: 1;
    /* Firefox */
}

#searchBar:-ms-input-placeholder {
    color: #6c757d;
    /* Internet Explorer 10-11 */
}

#searchBar::-ms-input-placeholder {
    color: #6c757d;
    /* Microsoft Edge */
}

/* Estilos para el botón activo en categorías */
#directorio .category-link.active {
    background-color: #0056b3;
    color: #fff;
}

/* Estilos para el botón activo en la navegación alfabética */
#directorio .alphabet-link.active {
    background-color: #0056b3;
    color: #fff;
}

/* Estilos para la Sección de Locales (#locales) */

/* Estilos para los encabezados de letras y separadores */
#locales .letter-section h2 {
    font-size: 2em;
    margin-top: 1.5em;
    font-weight: bold;
    color: #333;
}

#locales .letter-section hr {
    border-top: 2px solid #ccc;
    margin-bottom: 1em;
}

#locales .letter-section {
    margin-bottom: 2em;
}

/* Estilos para los locales */
#locales .locales-image-container {
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    /* Mantiene la proporción cuadrada */
    background-color: #f8f9fa;
    /* Color de fondo mientras carga la imagen */
}

#locales .local-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

#locales .locales-image-container:hover .local-image {
    transform: scale(1.1);
}

#locales .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 123, 255, 0.7);
    opacity: 0;
    transition: opacity 0.3s;
    border-radius: 50%;
}

#locales .locales-image-container:hover .overlay {
    opacity: 1;
}

#locales .local-name {
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    word-wrap: break-word;
    /* Para ajustar nombres largos */
}

#locales .local-link {
    text-decoration: none;
    color: inherit;
}

#locales .local-link:hover .local-name {
    color: #fff;
}

/* Estilos responsivos para los locales */
@media (max-width: 767.98px) {
    #locales .local-name {
        font-size: 0.9rem;
    }
}

@media (max-width: 575.98px) {
    #locales .local-name {
        font-size: 0.8rem;
    }
}

/* Ajustes adicionales */
#locales .col-md-2.col-sm-4.col-6 {
    padding-left: 5px;
    padding-right: 5px;
}

#locales .mt-4 {
    margin-top: 1.5rem !important;
}

/* Estilos para asegurar que los enlaces tengan un foco visible (accesibilidad) */
#locales .local-link:focus {
    outline: 2px solid #0056b3;
    outline-offset: 2px;
}