/* --------- Codi Gerard ------------- */
select {
    height: 100%;
}

/* Codi Gerard:  botó pàgina següent (estils i hover) */
.paginador {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
    display: inline-block; /* Permite que el botón sea tratado como bloque alineado */
    /*float: right;*/ /* Coloca el botón a la derecha del contenedor */
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.paginador:hover {
    background-color: #0056b3; /* Cambia el color al pasar el cursor */
}

/* --- Codi Gerard: Botó Pàgina anterior: Quan estem a la pàgina 1 canvien els estils i el botó está inactiu, no dona opció de fer "click" ----- */
/* He afegit el atribut disabled al html, al botó de Pàgina anterior */

/* Estilos para botones desactivados */
.paginador:disabled {
    color: #000; /* Texto en negro */
    background-color: #e0e0e0; /* Fondo gris claro */
    border-color: #e0e0e0; /* Borde del mismo color que el fondo */
    cursor: not-allowed; /* Cursor indicando que no se puede interactuar */
    box-shadow: none; /* Sin sombra */
}

/* Elimina el hover en botones desactivados */
.paginador:disabled:hover {
    background-color: #e0e0e0;
}

.paginador-izquierdo {
    float: left;
    width: 30%;
}

.paginador-derecho {
    float: right;
    width: 30%;
}
/* --- Codi Gerard -- Quan estiguem en mode Responsive el que volem es que els botons Pàgina anterior i Següent i la informació actual(número de página actual)
    estiguin en un mateix nivell  */

/* Estilos para cuentapaginas */
.cuentapaginas {
    font-size: 25px;
    padding-top: 10%;
    padding-left: 2%;
    margin-right: 5%;
    margin-left: 10%;
}

.imagen {
    margin-left: 4%;
    margin-bottom: 4%;
    width: 395px;
    height: 395px
}


/* --- Codi Responsive per files Naus ----- */

/* Diseño responsivo para pantallas pequeñas */
@media (max-width: 768px) {
    .responsive-divs > div {
        display: block; /* Forzar cada div a ocupar toda la fila */
        width: 100%; /* Asegura que ocupe el ancho completo */
        margin-bottom: 10px; /* Espaciado entre filas */
    }
    /* Estilos para cuentapaginas */
    .cuentapaginas {
        margin-right: 3%;
        margin-left: 5%;
    }

    .imagen {
        width: 315px;
        height: 315px
    }
}