/* P�gina noticias */
.container {
    display: flex;
    flex-wrap: wrap; /* Permite que las columnas se ajusten en pantallas peque�as */
    justify-content: space-between;
    gap: 20px; /* Espacio entre las columnas */
}

.column {
    width: 48%; /* Dos columnas en pantallas grandes, ajusta seg�n sea necesario */
    padding: 20px;
}

#pagina-noticia {
    /* Ajustes para pantallas peque�as */
    @media (max-width: 1500px) {
        .column {
            width: 100%; /* En pantallas m�s peque�as, cada columna ocupa todo el ancho */
        }
    }

    @media (max-width: 480px) {
        .container {
            flex-direction: column; /* En pantallas muy peque�as, las columnas se apilan verticalmente */
        }
    }
}

.galeria-fotos-noticia {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
    margin: 20px;
}

.galeria-fotos-noticia img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.galeria-fotos-noticia img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}


/* FIN PAGINA NOTICIA */

/* INICIO: P�GINA B�SQUEDA */

/* Aseguramos que el contenedor tenga la posici�n relativa para posicionar el bot�n */
.lightbox-item {
    position: relative;
    text-align: center;
    cursor: pointer;
}

/* Hacemos que el contenedor de la imagen ocupe toda la secci�n */
.port-img-overlay {
    position: relative;
}

/* Para asegurarnos de que el bot�n est� centrado en la imagen */
.port-btn-cont {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px;
    color: white;
    opacity: 0; /* Lo ocultamos inicialmente */
    pointer-events: none; /* Evitamos que interfiera con la interacci�n */
    transition: opacity 0.3s ease; /* Suavizamos la aparici�n */
}

/* Aparecer cuando el rat�n pase por encima */
.lightbox-item:hover .port-btn-cont {
    opacity: 1; /* Mostramos el bot�n cuando pasamos el rat�n por encima */
    pointer-events: auto; /* Permitimos la interacci�n del bot�n */
}

/* Opcional: A�adimos un efecto para la imagen al pasar el rat�n */
.lightbox-item:hover img {
    filter: brightness(0.5);
}

.interior_pagina {
    margin-left: 19rem;
    margin-right: 19rem;
}

/* Ajustes para pantallas m�s peque�as */
@media (max-width: 1200px) {
    .interior_pagina {
        margin-left: 10rem;
        margin-right: 10rem;
    }
}

/* Ajustes para pantallas m�s peque�as */
@media (max-width: 1200px) {
    .interior_pagina {
        margin-left: 10rem;
        margin-right: 10rem;
    }
}

@media (max-width: 1824px) {
    .busqueda {
        flex-direction: column;
        align-items: center;
    }
    .formulario{
        width: 100%;
    }

    .form-buttons{
        margin-top: 0.5rem;
        text-align: center;
    }
}

/* Ajustes para pantallas de tabletas o m�viles peque�os */
@media (max-width: 768px) {
    .interior_pagina {
        margin-left: 5rem;
        margin-right: 5rem;
    }

    .busqueda {
        flex-direction: column;
        align-items: center;
    }

    .resultados-busqueda a {
        font-size: 18px;
    }

    .pagination{
        flex-wrap: wrap;
        gap: 25px 0px;
    }

    .pagination li {
        margin: 0px 0;
        padding: 0px;
    }

    .pagination a {
        padding: 8px 12px;
    }

    .formulario{
        width: 100%;
    }

    .form-buttons{
        margin-top: 0.5rem;
        text-align: center;
    }
}

/* Ajustes para pantallas de m�viles m�s peque�os */
@media (max-width: 480px) {
    .interior_pagina {
        margin-left: 2rem;
        margin-right: 2rem;
    }

    .busqueda {
        flex-direction: column;
        align-items: center;
    }

    .resultados-busqueda a {
        font-size: 16px;
    }

    .pagination a {
        padding: 6px 10px;
        font-size: 14px;
    }
}

.busqueda {
    display: flex;
    justify-content: space-between; /* Ajusta el espacio entre los elementos */
}

/* Estilo general para los enlaces de b�squeda */
.resultados-busqueda a {
    font-size: 20px;
    text-decoration: none;
}

/* Paginaci�n */
.paginacion {
    text-align: center;
}

/* Estilo general para el paginador */
.pagination {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: center;
}

.pagination li {
    margin: 0 5px;
}

/* Estilo de los enlaces */
.pagination a {
    text-decoration: none;
    padding: 10px 15px;
    color: var(--base-color-neutral--black);
    background-color: #0000;
    border: 1px solid var(--base-color-neutral--black);
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s, transform 0.2s;
}

.pagination a:hover {
    background-color: var(--base-color-neutral--black);
    color: white;
    transform: scale(1.1); /* Efecto de agrandar al pasar el mouse */
}

/* Estilo para el enlace activo */
.pagination li.active a {
    background-color: var(--base-color-neutral--black); /* Fondo vibrante */
    color: white; /* Texto blanco */
    font-weight: bold;
    box-shadow: 0 0 10px rgba(0, 196, 204, 0.5); /* Sombra brillante */
    transform: scale(1.1); /* Agrandado al estar activo */
}

/* Estilo para los botones de navegaci�n */
.pagination a:first-child, .pagination a:last-child {
    font-weight: bold;
}

.pagination a:disabled {
    background-color: #ddd;
    color: #aaa;
    pointer-events: none;
}

.no-hay-resultados{
    text-align: center;
}

/* BOOTSTRAP COPY */
/* Clase para la fila */
.fila {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

/* Clase base para las columnas */
.columna {
    padding-right: 15px;
    padding-left: 15px;
    flex-grow: 1;
    max-width: 100%;
}

/* Tamaños personalizados de las columnas en múltiplos de 12 */
.col-1 { flex: 0 0 8.33%; max-width: 8.33%; }
.col-2 { flex: 0 0 16.66%; max-width: 16.66%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.33%; max-width: 33.33%; }
.col-5 { flex: 0 0 41.66%; max-width: 41.66%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.33%; max-width: 58.33%; }
.col-8 { flex: 0 0 66.66%; max-width: 66.66%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.33%; max-width: 83.33%; }
.col-11 { flex: 0 0 91.66%; max-width: 91.66%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

/* Media Queries para hacerlo responsive */

/* Para pantallas pequeñas (móviles, menos de 576px) */
@media (max-width: 575.98px) {
    .col-1 { flex: 0 0 100%; max-width: 100%; }
    .col-2 { flex: 0 0 100%; max-width: 100%; }
    .col-3 { flex: 0 0 100%; max-width: 100%; }
    .col-4 { flex: 0 0 100%; max-width: 100%; }
    .col-5 { flex: 0 0 100%; max-width: 100%; }
    .col-6 { flex: 0 0 100%; max-width: 100%; }
    .col-7 { flex: 0 0 100%; max-width: 100%; }
    .col-8 { flex: 0 0 100%; max-width: 100%; }
    .col-9 { flex: 0 0 100%; max-width: 100%; }
    .col-10 { flex: 0 0 100%; max-width: 100%; }
    .col-11 { flex: 0 0 100%; max-width: 100%; }
    .col-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Para pantallas medianas (tabletas, entre 576px y 768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .col-1 { flex: 0 0 50%; max-width: 50%; }
    .col-2 { flex: 0 0 50%; max-width: 50%; }
    .col-3 { flex: 0 0 50%; max-width: 50%; }
    .col-4 { flex: 0 0 50%; max-width: 50%; }
    .col-5 { flex: 0 0 50%; max-width: 50%; }
    .col-6 { flex: 0 0 50%; max-width: 50%; }
    .col-7 { flex: 0 0 50%; max-width: 50%; }
    .col-8 { flex: 0 0 50%; max-width: 50%; }
    .col-9 { flex: 0 0 50%; max-width: 50%; }
    .col-10 { flex: 0 0 50%; max-width: 50%; }
    .col-11 { flex: 0 0 50%; max-width: 50%; }
    .col-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Para pantallas grandes (desktops, entre 768px y 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .col-1 { flex: 0 0 25%; max-width: 25%; }
    .col-2 { flex: 0 0 33.33%; max-width: 33.33%; }
    .col-3 { flex: 0 0 33.33%; max-width: 33.33%; }
    .col-4 { flex: 0 0 33.33%; max-width: 33.33%; }
    .col-5 { flex: 0 0 41.66%; max-width: 41.66%; }
    .col-6 { flex: 0 0 50%; max-width: 50%; }
    .col-7 { flex: 0 0 58.33%; max-width: 58.33%; }
    .col-8 { flex: 0 0 66.66%; max-width: 66.66%; }
    .col-9 { flex: 0 0 75%; max-width: 75%; }
    .col-10 { flex: 0 0 83.33%; max-width: 83.33%; }
    .col-11 { flex: 0 0 91.66%; max-width: 91.66%; }
    .col-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Para pantallas muy grandes (desktops grandes, más de 1024px) */
@media (min-width: 1024px) {
    /* En pantallas muy grandes, puedes dejar la configuración original */
    .col-1 { flex: 0 0 8.33%; max-width: 8.33%; }
    .col-2 { flex: 0 0 16.66%; max-width: 16.66%; }
    .col-3 { flex: 0 0 25%; max-width: 25%; }
    .col-4 { flex: 0 0 33.33%; max-width: 33.33%; }
    .col-5 { flex: 0 0 41.66%; max-width: 41.66%; }
    .col-6 { flex: 0 0 50%; max-width: 50%; }
    .col-7 { flex: 0 0 58.33%; max-width: 58.33%; }
    .col-8 { flex: 0 0 66.66%; max-width: 66.66%; }
    .col-9 { flex: 0 0 75%; max-width: 75%; }
    .col-10 { flex: 0 0 83.33%; max-width: 83.33%; }
    .col-11 { flex: 0 0 91.66%; max-width: 91.66%; }
    .col-12 { flex: 0 0 100%; max-width: 100%; }
}

.ayuntamiento_actas_tab-content{
    color: black;
}

.equipo_gobierno_content{
    grid-template-columns: 2fr 1fr;
}

#contenido_noticia p:not(:first-of-type){
    margin-top: 15px;
}