/*
 * Estilo para las tarjetas de categoría.
 * Se aplica un fondo azul y texto blanco en la cabecera para consistencia.
*/
#category-list-container .card-header {
    background-color: var(--primary-solid-color); /* Mismo azul que la barra de navegación */
    color: #ffffff;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,.125);
}

/*
 * Efecto hover para toda la tarjeta de categoría.
 * Similar al de productos para una experiencia de usuario consistente.
*/
#category-list-container .card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

#category-list-container .card:hover {
    transform: translateY(-5px); /* Levanta la tarjeta 5px */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; /* Aumenta la sombra */
}