/* Intro página Eventos (fondo claro, estilo alineado al sitio) */
.eventos-page-head {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.eventos-page-title {
    font-size: clamp(1.5rem, 2.5vw, 1.85rem);
    font-weight: 700;
    color: #111;
    letter-spacing: 0.02em;
    margin-bottom: 0.85rem;
    padding-bottom: 0.65rem;
    border-bottom: 3px solid #ffc107;
    display: inline-block;
    width: 100%;
    max-width: 100%;
}

.eventos-page-lead {
    color: #3d3d3d;
    font-size: 1.05rem;
    line-height: 1.65;
    max-width: 42rem;
}

@media (min-width: 768px) {
    .eventos-page-lead {
        font-size: 1.08rem;
    }
}

/* Ajustes para que la card tenga sombra suave y bordes redondeados */
.card {
    border-radius: 0.5rem;
}

/* Botón crear evento más ancho y con transición */
#btnCrearEvento {
    transition: background-color 0.3s ease;
}

    #btnCrearEvento:hover {
        background-color: #343a40cc; /* oscurece un poco en hover */
    }

/* Botones editar y borrar tienen separación y tamaño uniforme */
.btnEditarEvento,
.btnEliminarEvento {
    min-width: 80px;
}

/* Formulario de borrar inline */
form {
    margin: 0;
}
    /* Validación Bootstrap nativa (colocar clases .was-validated al form) */
    form.was-validated .form-control:invalid {
        border-color: #dc3545;
        padding-right: calc(1.5em + 0.75rem);
        background-repeat: no-repeat;
        background-position: right calc(0.375em + 0.1875rem) center;
        background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    }

        form.was-validated .form-control:invalid:focus {
            box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
        }

.invalid-feedback {
    display: block;
    font-size: 0.875em;
}

/* Más espacio en textarea */
textarea.form-control {
    resize: vertical;
}

/* Ajustes de botón */
.modal-footer .btn {
    min-width: 100px;
}