/* Estilo general del cuerpo */
body {
    background-color: #f3e5f5; /* Color de fondo suave */
    font-family: 'Arial', sans-serif;
}

/* Estilo para el título principal */
h1 {
    color: #6a1b9a; /* Violeta cálido */
    margin-bottom: 20px;
}

/* Estilo de las tarjetas (cards) */
.card {
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #ffffff; /* Fondo blanco para las tarjetas */
}

/* Efecto hover para las tarjetas */
.card:hover {
    transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el ratón */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); /* Sombra más profunda */
}

/* Estilo para el título de la tarjeta */
.card-title {
    color: #8e44ad; /* Color violeta para los títulos de las tarjetas */
    font-size: 1.25rem;
    margin-bottom: 10px;
}

/* Estilo para el texto dentro de las tarjetas */
.card-text {
    color: #4a148c; /* Violeta oscuro para el texto */
    font-size: 1rem;
}

/* Estilo para el botón en las tarjetas */
.btn-primary {
    background-color: #8e44ad; /* Botón violeta */
    border: none;
    padding: 10px 15px;
    font-size: 1rem;
    transition: background-color 0.3s ease;
    border-radius: 8px;
    width: 100%;
}

/* Efecto hover para el botón */
.btn-primary:hover {
    background-color: #732d91; /* Tono más oscuro de violeta para hover */
}

/* Estilo para la lista de eventos en versiones anteriores */
.list-group-item {
    background-color: #e1bee7; /* Violeta claro */
    color: #4a148c; /* Texto en un violeta más oscuro */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Efecto hover para la lista de eventos */
.list-group-item:hover {
    background-color: #d5006d; /* Violeta más oscuro */
    color: white; /* Texto blanco al pasar el ratón */
}

/* Asegura que las tarjetas se vean bien en dispositivos móviles */
@media (max-width: 768px) {
    .card {
        margin-bottom: 20px;
    }
}