body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: #f0f0f0;
  background: linear-gradient(45deg, rgb(36, 81, 180), rgb(196, 237, 250));
  position: relative;
}

header {
  text-align: center;
  padding: 15px 0;
  color: #fff;
  text-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  font-size: 50px;
  width: 100%;
}
#eventos-container .card,
#todos-eventos-container .card {
    transition: transform 0.3s;
    height: 100%;
}

#eventos-container .card:hover,
#todos-eventos-container .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

#eventos-container .card-title,
#todos-eventos-container .card-title {
    color: #115dad; /* Color primario de Bootstrap */
}

#eventos-container .bi,
#todos-eventos-container .bi {
    margin-right: 5px;
    color: #6c757d; /* Color secundario de Bootstrap */
}

#eventos-container .btn,
#todos-eventos-container .btn {
    display: block;
    margin: 0 auto;
}

.btn-primary,
.btn-danger,
.btn-secondary {
    color: #fff;
    background-color: #115dad;
    border-color: #115dad;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: #0c3b6d;
    border-color: #0c3b6d;
}

.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active {
    background-color: #c82333;
    border-color: #bd2130;
}

.btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active {
    background-color: #5a6268;
    border-color: #545b62;
}

#eventModal .modal-body {
    position: relative;
}

#eventModal .modal-body div[id^="map-"] {
    width: 100%;
    height: 300px;
}
#sin-eventos-container {
    display: none;
}
/* Personaliza los estilos del carrusel si es necesario */
.slick-slide {
    margin: 0 10px;
}
  /* Ocultar las flechas del slider en pantallas pequeñas */
@media (max-width: 600px) {
    .slick-prev,
    .slick-next {
        display: none !important;
    }
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1050; /* Asegúrate de que el modal esté siempre por encima del carrusel */
}

.modal-dialog {
    margin: 1.75rem auto;
    max-width: 100%;
}

.modal-content {
    padding: 1rem;
}

@media (max-width: 576px) {
    .modal-dialog {
        margin: 0.5rem;
    }

    .modal-content {
        padding: 0.5rem;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 0.5rem;
    }

    .modal-header .modal-title {
        font-size: 1.25rem;
    }

    .modal-body p {
        font-size: 0.875rem;
    }

    #map {
        height: 200px;
    }
}