/* style.css */

/* Add any custom styles here that are difficult or verbose to achieve with Tailwind */

/* Example: Ensure images within the grid maintain aspect ratio */
#artwork-grid > div > img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* or 'contain' depending on preference */
}

/* Style for visually 'disabled' or faded artwork */
.artwork-discarded {
    opacity: 0.3;
    filter: grayscale(80%);
    transition: opacity 0.5s ease, filter 0.5s ease;
    cursor: not-allowed;
}

/* Style for the answer area */
#respuesta-area.respuesta-si {
    background-color: #48BB78; /* Verde */
    color: white;
    font-style: normal;
}

#respuesta-area.respuesta-no {
    background-color: #F56565; /* Rojo */
    color: white;
    font-style: normal;
}

/* Style to visually indicate an active category button */
.category-button.active {
    background-color: #217a70; /* Teal más oscuro */
    /* Add other styles like border or scale if desired */
}

/* Forzar texto blanco en los botones de categoría */
.category-button {
    color: white !important; /* O #FFFFFF !important */
}