body {
    background-color: #f4f6f9;
    font-size: 13px;
}

.card {
    border: none;
    border-radius: 15px;
}

.card-header {
    border-top-left-radius: 15px !important;
    border-top-right-radius: 15px !important;
}

.nota-importante {
    background: #fff3cd;
    border-left: 5px solid #ffc107;
    padding: 1rem 1.5rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
}

.nota-importante i {
    font-size: 1.5rem;
    color: #856404;
}

@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }

    .d-flex {
        display: block !important;
        width: 100%;
    }

    .contenedor {
        position: fixed !important;
        top: 0;
        left: -280px;
        width: 280px !important;
        height: 100vh;
        z-index: 2000;
        transition: left 0.25s ease;
    }

    .contenedor.menu-abierto {
        left: 0;
    }

    .menu-lateral {
        width: 280px !important;
        min-width: 280px !important;
        height: 100vh;
        overflow-y: auto;
    }

    .contenido-seccion {
        width: 100% !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    .contenido {
        width: 100% !important;
        padding: 16px !important;
    }

    .encabezado {
        width: 100% !important;
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    .encabezado .titulo h5,
    .encabezado .titulo h3 {
        font-size: 14px !important;
        margin: 0;
    }

    .admin-name {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
    }

    .avatar-img {
        width: 34px;
        height: 34px;
    }

    .overlay-menu {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        z-index: 1500;
    }

    .overlay-menu.activo {
        display: block;
    }

    #contenedorEventos {
        display: block !important;
    }

    #contenedorEventos > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 14px;
    }

    .evento-card {
        width: 100% !important;
    }
}